/* ---------- the main page: Poké Dungeon's logo and the log in window over our drawn scene (client/js/title.js) ----------
   The scene is a pixel canvas (#title-bg). title.js sizeTitle() picks the layout for the window, on #title[data-layout]:
     wide   the logo left, the window right (desktops, tablets in landscape)
     short  the same, smaller (phones in landscape)
     tall   the logo above the window (phones and tablets in portrait, narrow windows)
   and the sizes: --lf the logo's font size, --sp the star emblem (whole multiples of its 32 px art), --tz the window's
   zoom (1 at 720p, 1.25 at 1080p .. 2 at 4K), --gut the side gutters. #title.intro is the first view after loading: the
   logo's letters drop in, the window slides in, its rows pop up one by one. Everything that moves stops with
   prefers-reduced-motion.
   The look is the game's own (style.css, windows.css): the blue window with its light rim, gold titles, the gold tab chips,
   the orange button, dark input slots, the HUD's round portrait rings (hudcards.css .hring) and the pixel icons, with a
   little more depth and life (a sheen on the rim, the title's gold rule drawing out, a shine over the button). */
#title {
  position: fixed; inset: 0; z-index: 60; overflow: hidden; background: #5a9ae8; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  --lf: 120px; --sp: 64px; --tz: 1; --gut: 24px;
  --navy: #1b3f9c; --navy-d: #0b1d55;   /* the logo's outline and its drop (the old title's blue) */
}
#title-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* a little shade along the bottom, under the footer line */
#title::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, color-mix(in srgb, var(--bg-1, rgb(10 16 56)) 32%, transparent), color-mix(in srgb, var(--bg-1, rgb(10 16 56)) 0%, transparent) 16%); }
#title-stage {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--gut);
  padding: max(16px, var(--sat)) max(var(--gut), var(--sar)) max(36px, var(--sab)) max(var(--gut), var(--sal));
}
#title[data-layout="short"] #title-stage { padding-top: max(10px, var(--sat)); padding-bottom: max(10px, var(--sab)); }
#title[data-layout="tall"] #title-stage { flex-direction: column; justify-content: center; gap: 14px; padding-top: max(60px, var(--sat)); padding-bottom: max(8px, var(--sab)); }

/* ---- the hero: logo + ribbon */
#title-hero { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--lf) * 0.12); margin-bottom: 14vh; pointer-events: none; user-select: none; }   /* in the sky: the hills and the dungeon show under it */
#title[data-layout="tall"] #title-hero { flex: none; margin: 0; }
#title[data-layout="short"] #title-hero { margin: 0; }
#title.creating #title-hero, #title.creating #title-foot { display: none; }
#title-logo { margin: 0; font-weight: normal; line-height: 1; }
.logo-word {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start;
  font: var(--lf)/0.86 "Lilita One", var(--font); font-kerning: none; letter-spacing: 0.01em; white-space: nowrap;
  rotate: -4deg; animation: logoFloat 3.6s ease-in-out 1.6s infinite;
}
.lw { position: relative; display: block; }
.lw.poke { font-size: 0.64em; margin: 0 0 0.02em 0.1em; }
/* each letter: on a bouncy arc (--y, --r: title.js), the letter itself is the thick blue outline and its drop, ::after
   lays the fill on top (white for "Poké", the old logo's gold for "Dungeon"), ::before is its glint */
.lw .ch {
  position: relative; top: var(--y, 0); display: inline-block; rotate: var(--r, 0deg); color: var(--navy); -webkit-text-stroke: 0.19em var(--navy);
  text-shadow: 0 0.09em 0 var(--navy-d), 0 0.15em 0.08em rgba(0, 0, 0, 0.35); transform-origin: 50% 90%;
  animation: chIn 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) calc(0.15s + var(--i) * 60ms) both, chHop 6s ease calc(2.6s + var(--i) * 85ms) infinite;
}
.lw .ch::after, .lw .ch::before { content: attr(data-c); position: absolute; left: 0; top: 0; -webkit-text-stroke: 0; text-shadow: none; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lw .ch::after { background-image: linear-gradient(#ffffff 45%, #d6e2ff 92%); color: var(--tx-hi, #fff); }
.lw.dungeon .ch::after { background-image: linear-gradient(#fff6a0 12%, #ffd51e 50%, #f39a12 92%); }
/* the glint: a bright band crossing the letters one after the other */
.lw .ch::before {
  z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgba(var(--hl-rgb, 255, 255, 255), 0) 38%, rgba(var(--hl-rgb, 255, 255, 255), 0.95) 48%, rgba(var(--hl-rgb, 255, 255, 255), 0.5) 54%, rgba(var(--hl-rgb, 255, 255, 255), 0) 62%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;   /* after the shorthand, which resets it */
  animation: logoGlint 6s ease-in-out calc(2.2s + var(--i) * 45ms) infinite;
}
/* the explorer's star (our site icon, client/icons/favicon-32.png) on the corner of "Poké", wobbling */
.logo-star {
  position: absolute; left: 100%; top: -0.3em; width: var(--sp); height: var(--sp); margin-left: 0.14em; image-rendering: pixelated;
  filter: drop-shadow(0 calc(var(--sp) / 16) 0 var(--navy-d)); transform-origin: 50% 60%;
  animation: starIn 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) 0.95s both, starWobble 3.2s ease-in-out 2s infinite;
}
/* twinkles around the logo */
.logo-tw {
  position: absolute; z-index: 3; width: 0.16em; height: 0.16em; opacity: 0; pointer-events: none;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  background: radial-gradient(#fff 35%, #fff4b8); animation: logoTw 6s ease calc(2.5s + var(--k) * 0.35s) infinite;
}
.logo-tw:nth-of-type(1) { left: -0.06em; top: 0.02em; }
.logo-tw:nth-of-type(2) { left: 46%; top: 84%; width: 0.12em; height: 0.12em; }
.logo-tw:nth-of-type(3) { right: -0.1em; top: 38%; width: 0.2em; height: 0.2em; }
@keyframes chIn { 0% { opacity: 0; translate: 0 -1.1em; scale: 0.6 1.3; } 55% { opacity: 1; translate: 0 0.06em; scale: 1.12 0.86; } 80% { scale: 0.97 1.04; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes chHop { 0%, 40%, 56%, 100% { transform: none; } 44% { transform: translateY(-0.16em) scale(0.92, 1.1); } 48% { transform: translateY(0) scale(1.12, 0.86); } 52% { transform: scale(0.97, 1.04); } }
@keyframes logoFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.05em; } }
@keyframes logoGlint { 0% { background-position: 100% 0; } 14%, 100% { background-position: 0 0; } }
@keyframes logoTw { 0%, 16%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } 5% { opacity: 1; transform: scale(1.25) rotate(45deg); } 10% { opacity: 1; transform: scale(0.8) rotate(70deg); } }
@keyframes starIn { 0% { opacity: 0; scale: 0.2; rotate: -200deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes starWobble { 0%, 62%, 100% { transform: rotate(0deg); } 68% { transform: rotate(-18deg) scale(1.08); } 76% { transform: rotate(14deg); } 84% { transform: rotate(-6deg); } }

/* the ribbon under the logo: the old title's red ONLINE ribbon, now saying what the game is */
#title-tag {
  position: relative; z-index: 1; margin: 0; padding: 0.14em 0.8em 0.2em; border: 0.09em solid #ffe36a; border-radius: 0.3em; rotate: -3deg;
  background: linear-gradient(#ff6a52, #d42a32); box-shadow: 0 0.1em 0 #7a0f1a, 0 0.22em 0.3em rgba(0, 0, 0, 0.35);
  color: #fff; font: max(15px, calc(var(--lf) * 0.17))/1.1 "Lilita One", var(--font); letter-spacing: 0.06em; white-space: nowrap;
  text-shadow: 0 0.07em 0 #7a0f1a, 0.05em 0 0 #7a0f1a, -0.05em 0 0 #7a0f1a, 0 -0.05em 0 #7a0f1a; --tx-hi: initial; --tx-dim: initial;
}
/* the ribbon and the footer wait for the logo, which title.js builds once the scripts are in (#title.ready) */
#title:not(.ready) #title-tag, #title:not(.ready) #title-foot { opacity: 0; }
#title.ready #title-tag { animation: tagIn 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) 1.1s both; }
#title.ready #title-foot { animation: tcFade 0.6s ease 1.4s both; }
@keyframes tagIn { 0% { opacity: 0; translate: 0 0.8em; scale: 0.6; } 100% { opacity: 1; translate: 0 0; scale: 1; } }

/* the fine print: bottom left beside the window, under the window on tall screens */
#title-foot {
  position: absolute; left: max(var(--gut), var(--sal)); bottom: max(8px, var(--sab)); max-width: min(560px, calc(100% - 420px * var(--tz) - var(--gut) * 4));
  padding: 0.25em 0.9em; border-radius: 1em; background: color-mix(in srgb, var(--bg-1, rgb(8 18 48)) 45%, transparent); color: var(--tx-hi, #fff); font: 500 12px/1.3 var(--font); text-shadow: 0 1px 1px #000;
  pointer-events: none;
}
#title[data-layout="short"] #title-foot { display: none; }
#title[data-layout="tall"] #title-foot { position: static; flex: none; max-width: 100%; text-align: center; font-size: 11px; }
@keyframes tcFade { from { opacity: 0; } }

/* ---- the window: a title bar, the tabs (Play / Log in / Sign up), the view, a footer row */
.tcard {
  --from: 80px 0;
  position: relative; flex: none; display: flex; flex-direction: column; width: 420px; max-width: 100%; max-height: 100%; overflow: hidden;
  border: 2px solid var(--win-border); border-radius: 12px; color: var(--ink); font: 16px/1.35 var(--font);
  background: radial-gradient(120% 50% at 50% -8%, rgba(130, 160, 255, 0.4), rgba(130, 160, 255, 0) 70%), linear-gradient(180deg, var(--bg-3, #34479f), var(--win-a) 30%, var(--win-b));
  box-shadow: 0 0 0 2px var(--bg-1, #0a0e30), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 0 color-mix(in srgb, var(--bg-1, rgb(6 10 40)) 35%, transparent), 0 18px 44px color-mix(in srgb, var(--bg-0, rgb(4 8 32)) 50%, transparent);
  zoom: var(--tz); --pxz: var(--tz);   /* pixel icons and portrait rings stay whole-pixel inside the zoom */
  animation: tcIn 0.65s cubic-bezier(0.2, 1.25, 0.4, 1) 0.3s both;
}
/* a sheen running along the rim now and then */
.tcard::before {
  content: ""; position: absolute; inset: -2px; z-index: 3; border-radius: 12px; padding: 2px; pointer-events: none;
  background: linear-gradient(115deg, rgba(var(--hl-rgb, 255, 255, 255), 0) 40%, rgba(255, 246, 200, 0.95) 50%, rgba(var(--hl-rgb, 255, 255, 255), 0) 60%) 120% 0 / 250% 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: rimSheen 7s ease-in-out 1.4s infinite;
}
@keyframes rimSheen { 0% { background-position: 120% 0; } 18%, 100% { background-position: -20% 0; } }
#title[data-layout="tall"] .tcard { --from: 0 70px; flex: 0 1 auto; min-height: 0; }
.tcard[data-view="create"] { width: 560px; }
@keyframes tcIn { 0% { opacity: 0; translate: var(--from); scale: 0.94; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
.tcard button { font-family: var(--font); cursor: pointer; touch-action: manipulation; }
.tcard :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* the title bar: the star, the title in gold, a gold rule drawing out under it */
.tc-head { position: relative; flex: none; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 9px 16px 10px; color: var(--gold); font: 15px/1.2 var(--head); text-shadow: 0 2px 0 #0a0e30; }
.tc-head::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(255, 227, 106, 0), var(--gold) 20%, var(--gold) 80%, rgba(255, 227, 106, 0));
  transform-origin: 50% 50%; animation: ruleIn 0.7s ease-out 0.75s both;
}
@keyframes ruleIn { from { transform: scaleX(0); opacity: 0; } }
.tc-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; }
.tc-star { flex: none; width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #0a0e30); animation: starWobble 3.2s ease-in-out 2.4s infinite; }
.tc-back {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -4px; border: 2px solid var(--win-border); border-radius: 8px; background: var(--bg-1, #0c1240);
  transition: border-color 0.15s, transform 0.15s;
}
.tc-back:hover { border-color: var(--gold); transform: translateX(-2px); }

/* the tabs: the game's chips (like the Journal's tabs), the picked one gold; it pops when picked */
.tc-tabs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 14px 0; }
.ttab {
  position: relative; min-height: 40px; padding: 4px 6px; border: 2px solid var(--slot-line); border-radius: 8px; background: var(--slot); color: var(--tx-hi, #e8ecff); font-size: 15px;
  transition: border-color 0.15s, transform 0.12s;
}
.ttab:hover { border-color: var(--gold); }
.ttab[aria-selected="true"] { background: linear-gradient(var(--acc-1, #ffe88a), var(--acc-2, #e8b830)); border-color: #fff6c0; color: var(--on-acc, #141832); box-shadow: 0 0 0 1px var(--bg-0, #050820), inset 0 -3px 0 #c88a1a; animation: tabPick 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes tabPick { 0% { scale: 0.9; } 100% { scale: 1; } }

.tc-body {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 16px;
  animation: tcBody 0.3s ease-out;
}
@keyframes tcBody { from { opacity: 0; translate: 0 10px; } }
.tcard .tform { gap: 11px; }
.tcard .tfield { gap: 4px; color: var(--dim); font-size: 14px; }
.tcard .tfield input { min-height: 46px; border-radius: 8px; border: 2px solid var(--win-border); background: var(--bg-1, #0c1240); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35); transition: border-color 0.15s, box-shadow 0.15s; }
.tcard .tfield input::placeholder { color: var(--tx-info, #5f6aa8); }
.tcard .tfield input:focus { border-color: var(--gold); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(255, 227, 106, 0.3); }

/* the big button: the game's orange (style.css .tgo) with a bevel, a press and a shine crossing it */
.tcard .tgo {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 20px; overflow: hidden;
  border: 2px solid #fff3c4; border-radius: 10px; color: var(--on-acc, #2a1200); font: 15px var(--head); text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  background: linear-gradient(var(--acc-1, #ffd98a), var(--acc-2, #ffb84a) 45%, var(--acc-2, #e0782a));
  box-shadow: 0 0 0 2px var(--bg-1, #0a0e30), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 0 rgba(150, 60, 0, 0.35), 0 5px 0 var(--bg-1, #0a0e30);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.tcard .tgo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(var(--hl-rgb, 255, 255, 255), 0) 30%, rgba(var(--hl-rgb, 255, 255, 255), 0.65) 50%, rgba(var(--hl-rgb, 255, 255, 255), 0) 70%) -150% 0 / 45% 100% no-repeat;
  animation: tcShine 3.6s ease-in-out 1.6s infinite;
}
.tcard .tgo:hover { filter: brightness(1.07); transform: translateY(-1px); }
.tcard .tgo:active { transform: translateY(4px); box-shadow: 0 0 0 2px var(--bg-1, #0a0e30), inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 1px 0 var(--bg-1, #0a0e30); }
.tcard .tgo:disabled { filter: grayscale(0.6) brightness(0.8); cursor: wait; transform: none; }
.tcard .tgo.tdanger { background: linear-gradient(#ffa89a, #ff8a7a 45%, #d0453a); color: #2a0600; }
@keyframes tcShine { 0% { background-position: -150% 0; } 45%, 100% { background-position: 250% 0; } }
.tcard .tback { min-height: 46px; border-radius: 8px; transition: border-color 0.15s; }
.tcard .tback:hover { border-color: var(--gold); }
.tcard .trow { justify-content: center; margin-top: 2px; }
.tlink { min-height: 36px; padding: 0 6px; border: 0; background: none; color: var(--tx-hi, #bfe0ff); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(191, 224, 255, 0.4); }
.tlink:hover { color: var(--gold); text-decoration-color: currentColor; }
.tc-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; margin-top: -2px; }
.tc-alt { margin: -2px 0 0; text-align: center; color: var(--dim); font-size: 14px; }
.tcard .tmsg { margin: 0; min-height: 0; padding: 7px 12px; border-radius: 8px; background: color-mix(in srgb, var(--bg-1, rgb(12 18 64)) 70%, transparent); border: 1px solid rgba(191, 224, 255, 0.3); animation: tcPop 0.3s cubic-bezier(0.2, 1.5, 0.4, 1); }
.tcard .tmsg.bad { border-color: rgba(255, 154, 122, 0.5); }
.tcard .tnote { margin: 0; font-size: 13px; }
@keyframes tcPop { from { opacity: 0; scale: 0.94; } }

/* Play, nothing saved yet: why play as a guest, in a dark slot like the bag's */
.tperks { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 10px; background: color-mix(in srgb, var(--bg-1, rgb(9 13 52)) 75%, transparent); border: 2px solid var(--slot-line); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.3); }
.tperk { display: flex; align-items: center; gap: 12px; padding: 5px 8px 5px 4px; border-radius: 6px; animation: tcRow 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) calc(var(--k) * 70ms) both; }
#title.intro .tperk { animation-delay: calc(0.8s + var(--k) * 110ms); }
.tperk + .tperk { border-top: 1px solid color-mix(in srgb, var(--bg-3, rgb(78 92 168)) 50%, transparent); border-radius: 0; }
.tperk .ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; }
.tperk b { display: block; color: var(--gold); font: 13px var(--head); }
.tperk small { display: block; color: var(--dim); font-size: 13.5px; line-height: 1.3; }
@keyframes tcRow { from { opacity: 0; translate: -16px 0; } }

/* Play with saved games: a card per game like the HUD's player card (the round portrait ring, the name, the level),
   the cursor on the picked one; the first one is the gold "Continue" */
.tslots { display: flex; flex-direction: column; gap: 8px; }
.tcard .tslot {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 6px 12px 6px 6px; border: 2px solid var(--slot-line); border-radius: 10px;
  background: var(--slot); color: var(--ink); text-align: left; font: 15px var(--font); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.3);
  transition: border-color 0.12s, transform 0.12s, background 0.12s; animation: tcRow 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) calc(var(--k) * 80ms) both;
}
#title.intro .tslot { animation-delay: calc(0.75s + var(--k) * 110ms); }
.tcard .tslot:hover, .tcard .tslot:focus, .tcard .tslot:focus-visible { border-color: var(--gold); background: var(--bg-2, #141c5a); outline: none; }
.tcard .tslot:active { transform: translateY(2px); }
.tcard .tslot.primary { border-color: #fff6c0; background: linear-gradient(90deg, rgba(255, 227, 106, 0.22), rgba(255, 227, 106, 0.04) 70%), var(--slot); box-shadow: 0 0 0 1px var(--bg-0, #050820), 0 0 16px rgba(255, 227, 106, 0.25); }
.ts-pic { position: relative; flex: none; line-height: 0; }
.ts-pic .hring { --want: 92px; }
.ts-pic .ts-star { width: 64px; height: 64px; margin: 6px; image-rendering: pixelated; }
.ts-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ts-txt b { color: var(--gold); font: 15px/1.2 var(--head); }
.ts-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.ts-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-size: 13px; }
.ts-go { flex: none; color: transparent; }
.ts-go .pxi { visibility: hidden; }
.tslot.primary .ts-go .pxi, .tslot:hover .ts-go .pxi, .tslot:focus .ts-go .pxi { visibility: visible; animation: tsNudge 0.9s ease-in-out infinite; }
@keyframes tsNudge { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }

/* settings, credits, the waiting view */
.tcard .tset { gap: 12px; padding: 0; }
.tcard .tslider, .tcard .tpair { grid-template-columns: 82px 1fr auto; }
.tcard .tpair { grid-template-columns: 82px auto auto; }
/* Windows: the six window styles (client/js/theme.js) in two rows of three beside the label */
.tcard .tpair.twin { grid-template-columns: 82px repeat(3, minmax(0, 1fr)); }
.tcard .tpair.twin > span { grid-row: span 2; align-self: start; padding-top: 10px; }
.tcard .tpair.twin .tchip { padding-inline: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard .tchip { border-radius: 8px; }
.tcard .tchip:not(.on):hover { border-color: var(--gold); }
.tcard .tcredits { padding: 0; font-size: 14.5px; }
.tcard .tstatus { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 6px 4px; font-size: 18px; text-align: center; }
.tc-spin { width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 #0a0e30); animation: tcHop 0.5s cubic-bezier(0.3, 0, 0.6, 1) infinite alternate; }
@keyframes tcHop { 0% { translate: 0 0; scale: 1.1 0.9; } 30% { scale: 1; } 100% { translate: 0 -20px; rotate: 10deg; } }
.tcard .tpick-t { color: var(--tx-hi, #cfd6ff); font-size: 15px; }

/* the footer row: small window buttons with pixel icons, the sound button on the right */
.tc-foot { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px 10px; border-top: 1px solid rgba(var(--rim-rgb, 201, 210, 255), 0.25); background: color-mix(in srgb, var(--bg-1, rgb(6 10 40)) 25%, transparent); }
.tc-foot button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 3px 12px 3px 8px; border: 2px solid var(--slot-line); border-radius: 8px; background: var(--slot);
  color: var(--tx-hi, #e8ecff); font-size: 14px; transition: border-color 0.15s;
}
.tc-foot button:hover { border-color: var(--gold); }
.tc-foot .tc-sound { margin-left: auto; width: 38px; padding: 0; justify-content: center; }
html.touch .tc-foot button, html.touch .tlink, html.touch .ttab, html.touch .tc-back { min-height: 44px; }
html.touch .tc-foot .tc-sound, html.touch .tc-back { width: 44px; }

/* landscape phones: a slimmer window */
#title[data-layout="short"] .tc-head { min-height: 46px; padding: 6px 14px 7px; }
#title[data-layout="short"] .tc-tabs { margin-top: 8px; }
#title[data-layout="short"] .tc-body { padding: 10px 14px 12px; gap: 10px; }
#title[data-layout="short"] .tperks { display: none; }   /* the big button must show without scrolling */
/* short portrait screens: the perks keep their titles only */
@media (orientation: portrait) and (max-height: 820px) {
  .tperk small { display: none; }
  .tperk .ic { width: 34px; height: 34px; }
}
/* narrow phones in portrait */
@media (max-width: 400px) {
  .tc-tabs { margin: 10px 12px 0; gap: 5px; }
  .ttab { font-size: 14px; }
  .tc-body { padding: 12px 12px 14px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #title *, #title *::before, #title *::after { animation-delay: 0s !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}