/* The main page: Poké Dungeon's pixel logo and the log-in window over our drawn scene (title/title.js). The scene
   (#title-bg, a dungeon floor) and the logo (#title-logo-cv) are pixel canvases. 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: --tz the window's zoom (1 at 720p, 1.25 at 1080p .. 2 at 4K), --gut the side gutters; the logo canvas
   sizes itself. Until the scene's first frame is drawn (#title.ready) the page is black with the hopping star, so
   nothing half-built shows while the scripts load; then it all fades in. The legal notice sits along the bottom edge.
   Everything that moves stops with prefers-reduced-motion. */
#title {
  position: fixed; inset: 0; z-index: 60; overflow: hidden; display: flex; flex-direction: column; background: #000;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  --tz: 1; --gut: 24px;
}
/* the scene and the page over it; the legal notice under them (the scene ends above it) */
#title-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
#title-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* the first paint: black, a star hopping in the middle (the site icon, whole pixels), until the first frame is up */
#title-load { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
#title-load img { width: 64px; height: 64px; image-rendering: pixelated; animation: loadHop 0.5s cubic-bezier(0.3, 0, 0.6, 1) infinite alternate; }
#title.ready #title-load { display: none; }
/* the first-launch download under the star (boot.js draws the bar; its canvas is sized in whole device pixels) */
#boot-dl { position: absolute; left: 50%; top: calc(50% + 52px); translate: -50% 0; }
#boot-dl[hidden] { display: none; }
#boot-bar { display: block; image-rendering: pixelated; }
@keyframes loadHop { from { translate: 0 0; } to { translate: 0 -16px; } }
#title:not(.ready) :is(#title-main, #title-foot) { visibility: hidden; }
#title.ready :is(#title-main, #title-foot) { animation: titleIn 0.5s ease-out both; }
@keyframes titleIn { from { opacity: 0; } }

#title-stage {
  position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--gut);
  padding: max(16px, var(--sat)) max(var(--gut), var(--sar)) 12px max(var(--gut), var(--sal));
}
#title[data-layout="short"] #title-stage { padding-top: max(8px, var(--sat)); padding-bottom: 6px; }
#title[data-layout="tall"] #title-stage { flex-direction: column; justify-content: center; gap: 12px; padding-top: max(56px, var(--sat)); padding-bottom: 8px; }

/* The hero: the logo canvas (title.js sets its size: whole device pixels per logo pixel) */
#title-hero { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; user-select: none; }
#title[data-layout="tall"] #title-hero { flex: none; align-self: center; 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: 0; }
#title-logo-cv { display: block; image-rendering: pixelated; }

/* The legal notice: a black band along the bottom edge in every window style (so its text stays light: --tx-hi:
   initial), a 2-px rim on top in the style's panel colour */
#title-foot {
  position: relative; z-index: 2; flex: none; padding: 7px max(var(--gut), var(--sar)) max(8px, var(--sab)) max(var(--gut), var(--sal));
  background: #000; border-top: 2px solid var(--pf-c-fillLo, #171f6f); color: #c7cfef; font: 500 12px/1.4 var(--font); text-align: center;
  --tx-hi: initial;
}
#title-foot p { max-width: 1320px; margin: 0 auto; }
#title-foot p + p { color: #8f9fdf; --tx-hi: initial; }
#title[data-layout="short"] #title-foot { padding-top: 3px; padding-bottom: max(3px, var(--sab)); font-size: 9px; line-height: 1.25; }
#title[data-layout="tall"] #title-foot { padding-top: 5px; font-size: 9.5px; line-height: 1.3; }

/* 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, 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 (.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 window styles in rows 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; }
}