:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --app-width: 100vw;
  --app-height: 100vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --bg: #192A51;
  --bg-soft: #967AA1;
  --bg-soft-2: #AAA1C8;
  --panel: #F5E6E8;
  --panel-2: #D5C6E0;
  --text: #192A51;
  --text-light: #F5E6E8;
  --muted: rgba(25,42,81,.70);
  --muted-light: rgba(245,230,232,.78);
  --accent: #59C8C1;
  --accent-strong: #39B4AD;
  --good: #46B89B;
  --bad: #C76575;
  --shadow: 0 18px 48px rgba(14,19,34,.22);
}

* { box-sizing: border-box; min-width: 0; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
button { font: inherit; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

#app {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--app-width);
  height: var(--app-height);
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 17%, rgba(245,230,232,.16), transparent 22%),
    radial-gradient(circle at 84% 16%, rgba(170,161,200,.19), transparent 23%),
    radial-gradient(circle at 78% 82%, rgba(89,200,193,.13), transparent 30%),
    linear-gradient(165deg, #192A51 0%, #263C6C 45%, #967AA1 100%);
}

/* Shared screen shell. Child widths are relative to this safe-area content box, never 100vw. */
.ui-screen,
.gate-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ui-screen {
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: auto;
  padding-top: max(12px, var(--safe-top));
  padding-bottom: max(12px, var(--safe-bottom));
  padding-left: max(14px, var(--safe-left), var(--safe-right));
  padding-right: max(14px, var(--safe-left), var(--safe-right));
}

.page-card {
  width: 100%;
  max-width: 1180px;
  max-height: 100%;
  min-height: 0;
  padding: clamp(14px, 2.5vh, 30px) clamp(14px, 2.4vw, 30px);
  border-radius: clamp(18px, 2.5vw, 28px);
  border: 1px solid rgba(245,230,232,.24);
  background: linear-gradient(180deg, rgba(245,230,232,.17), rgba(245,230,232,.08));
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 64px rgba(14,19,34,.27);
}
.page-card.compact { max-width: 760px; }
.eyebrow {
  color: var(--accent);
  font-weight: 850;
  letter-spacing: .16em;
  font-size: clamp(10px, 1.6vh, 13px);
}

/* Splash / orientation */
.gate-screen {
  z-index: 100;
  display: grid;
  place-items: center;
  padding-top: max(14px, var(--safe-top));
  padding-bottom: max(14px, var(--safe-bottom));
  padding-left: max(16px, var(--safe-left), var(--safe-right));
  padding-right: max(16px, var(--safe-left), var(--safe-right));
}
.gate-card {
  width: min(720px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: clamp(18px, 4vh, 38px) clamp(18px, 4vw, 34px);
  text-align: center;
  border-radius: 28px;
  border: 1px solid rgba(245,230,232,.24);
  background: linear-gradient(180deg, rgba(245,230,232,.18), rgba(213,198,224,.10));
  box-shadow: 0 30px 80px rgba(12,18,36,.30);
  backdrop-filter: blur(18px);
}
.gate-symbol {
  display: grid;
  place-items: center;
  width: clamp(54px, 10vh, 72px);
  height: clamp(54px, 10vh, 72px);
  border-radius: 50%;
  background: rgba(89,200,193,.14);
  border: 2px solid rgba(89,200,193,.70);
  color: var(--accent);
  font-size: clamp(26px, 5vh, 34px);
  padding-left: 3px;
}
.gate-card h1 {
  margin: 0;
  color: var(--text-light);
  font-size: clamp(30px, 6vh, 58px);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.gate-card p {
  margin: 0 0 6px;
  max-width: 560px;
  color: var(--muted-light);
  font-size: clamp(14px, 2.3vh, 20px);
  line-height: 1.38;
}
#boot-button,
.primary-button {
  min-width: min(260px, 100%);
  min-height: clamp(46px, 7.2vh, 58px);
  padding: 0 24px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: #10243f;
  font-weight: 900;
  letter-spacing: .03em;
  font-size: clamp(14px, 2.2vh, 19px);
  box-shadow: 0 10px 26px rgba(57,180,173,.25);
  cursor: pointer;
}
#boot-button:disabled { opacity: .70; cursor: default; }
.gate-note { color: rgba(245,230,232,.72); font-size: clamp(11px, 1.7vh, 14px); }
.gate-card.rotate-mode .gate-symbol { animation: rotatePulse 1.25s ease-in-out infinite; }
@keyframes rotatePulse { 0%,100% { transform:rotate(-7deg) scale(.96); opacity:.75; } 50% { transform:rotate(15deg) scale(1.04); opacity:1; } }

#rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 120;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(14,18,31,.84);
  backdrop-filter: blur(12px);
}
.rotate-card {
  display: grid;
  gap: 8px;
  width: min(340px, 90%);
  padding: 24px;
  text-align: center;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(245,230,232,.18), rgba(245,230,232,.10));
  border: 1px solid rgba(245,230,232,.26);
  color: var(--text-light);
}
.rotate-card strong { font-size: 20px; }
.rotate-card span { opacity:.82; font-size:14px; }
.rotate-icon { font-size:48px; line-height:1; color:var(--accent); }
body.landscape-required #rotate-hint { display:none; }
@media (orientation:portrait) and (pointer:coarse) { body.landscape-required #rotate-hint { display:flex; } }

/* Main menu */
.menu-screen { overflow: hidden; }
.menu-layout {
  height: min(720px, 100%);
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  gap: clamp(8px, 2vh, 20px);
}
.page-header { text-align:center; }
.page-header h1 {
  margin: 5px 0 3px;
  color: var(--text-light);
  font-size: clamp(28px, 5.2vh, 56px);
  line-height: 1;
  letter-spacing: -.03em;
}
.page-header p { margin:0; color:var(--muted-light); font-size:clamp(12px, 2vh, 18px); }
.page-header .eyebrow { color:var(--text-light); opacity:.9; }
.page-footer { text-align:center; color:rgba(245,230,232,.68); font-size:clamp(10px,1.7vh,14px); }
.game-card-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(10px, 2vw, 24px);
}
.game-card {
  position: relative;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto auto auto;
  align-items: center;
  gap: clamp(4px, 1vh, 9px);
  padding: clamp(10px, 2vh, 22px);
  border: 1px solid rgba(25,42,81,.12);
  border-radius: clamp(16px, 2.2vw, 25px);
  background: linear-gradient(180deg, rgba(245,230,232,.96), rgba(213,198,224,.90));
  color: var(--text);
  text-align: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;
}
.platformer-card { background: linear-gradient(180deg, rgba(213,198,224,.96), rgba(170,161,200,.90)); }
.game-card::after {
  content:"";
  position:absolute;
  left:18px; right:18px; bottom:12px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.48;
}
.card-visual { min-height:0; display:grid; place-items:center; }
.card-visual img {
  display:block;
  width:auto;
  height:min(100%, clamp(76px, 22vh, 158px));
  max-width:70%;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(14,19,34,.16));
}
.card-title { font-size:clamp(20px,3.5vh,35px); font-weight:900; line-height:1.04; letter-spacing:-.02em; }
.card-copy { color:var(--muted); font-size:clamp(11px,1.8vh,17px); line-height:1.28; }
.card-action {
  justify-self:center;
  min-width:112px;
  padding:clamp(6px,1.2vh,10px) 18px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--accent),var(--accent-strong));
  color:#10243f;
  font-size:clamp(11px,1.7vh,14px);
  font-weight:900;
  letter-spacing:.08em;
}

/* Intro screens */
.intro-screen { overflow:auto; }
.top-back {
  position:absolute;
  top:max(10px,var(--safe-top));
  left:max(10px,var(--safe-left));
  z-index:8;
}
.text-button {
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(245,230,232,.15);
  border-radius:999px;
  background:rgba(25,42,81,.32);
  color:var(--text-light);
  font-weight:850;
  letter-spacing:.04em;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
  backdrop-filter:blur(8px);
}
.intro-stage-host {
  width:100%;
  max-width:1120px;
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
}
.intro-panel {
  width:100%;
  max-height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(130px,.42fr) minmax(0,1fr);
  gap:clamp(12px,2.5vw,34px);
  align-items:center;
  overflow:hidden;
}
.catch-accent { background:linear-gradient(165deg, rgba(245,230,232,.97), rgba(213,198,224,.93)); }
.platformer-accent { background:linear-gradient(165deg, rgba(213,198,224,.97), rgba(170,161,200,.93)); }
.intro-hero { display:grid; place-items:center; min-height:0; }
.intro-hero img {
  display:block;
  width:auto;
  height:min(100%, clamp(120px, 40vh, 300px));
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(14,19,34,.18));
}
.intro-copy { min-width:0; color:var(--text); }
.intro-copy .eyebrow { color:var(--accent-strong); }
.intro-copy h2 {
  margin:4px 0 6px;
  font-size:clamp(28px,5.2vh,54px);
  line-height:1.02;
  letter-spacing:-.03em;
}
.intro-copy > p {
  margin:0 0 clamp(7px,1.5vh,13px);
  color:var(--muted);
  font-size:clamp(12px,2vh,19px);
  line-height:1.30;
}
.rule-panel {
  padding:clamp(9px,1.8vh,18px);
  border-radius:18px;
  background:rgba(245,230,232,.84);
  border:1px solid rgba(25,42,81,.10);
  box-shadow:0 12px 28px rgba(14,19,34,.10);
}
.items-row {
  display:grid;
  grid-template-columns:minmax(72px,92px) minmax(0,1fr);
  align-items:center;
  gap:8px;
  margin:2px 0 6px;
}
.items-row label { font-weight:900; font-size:clamp(11px,1.7vh,14px); }
.items-row.good label { color:var(--good); }
.items-row.bad label { color:var(--bad); }
.item-icons { display:flex; align-items:center; gap:clamp(7px,1.2vw,16px); flex-wrap:nowrap; }
.item-icons img { width:clamp(34px,7vh,52px); height:clamp(34px,7vh,52px); object-fit:contain; }
.rule-line { color:var(--text); font-size:clamp(13px,2vh,18px); line-height:1.3; }
.control-line { color:var(--muted); margin-top:5px; font-size:clamp(10px,1.65vh,15px); line-height:1.3; }
.intro-copy .primary-button { margin-top:clamp(7px,1.4vh,13px); }

/* Results */
.result-screen { overflow:auto; }
.result-card {
  width:100%;
  max-width:760px;
  max-height:100%;
  min-height:0;
  text-align:center;
  color:var(--text-light);
  background:linear-gradient(180deg,rgba(25,42,81,.82),rgba(25,42,81,.74));
  overflow:auto;
}
.result-card h2 { margin:6px 0 4px; font-size:clamp(28px,5vh,48px); line-height:1.02; }
.result-score { color:var(--text-light); font-size:clamp(62px,15vh,108px); font-weight:900; line-height:.92; margin-top:8px; }
.result-score-label { color:rgba(245,230,232,.7); font-size:clamp(10px,1.7vh,14px); letter-spacing:.16em; font-weight:850; }
.result-card p { margin:clamp(8px,2vh,16px) 0; color:rgba(245,230,232,.82); font-size:clamp(12px,2vh,18px); }
.result-bonus { display:none; }
.result-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.primary-button.secondary { background:linear-gradient(180deg,rgba(245,230,232,.96),rgba(213,198,224,.94)); color:var(--text); box-shadow:none; }

/* Game surface */
#game-shell {
  position:absolute;
  top:var(--safe-top);
  right:var(--safe-right);
  bottom:var(--safe-bottom);
  left:var(--safe-left);
  z-index:1;
  overflow:hidden;
  background:#101A32;
}
#game-container { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#game-container canvas { display:block; max-width:100%; max-height:100%; touch-action:none; image-rendering:auto; }
.hud { position:absolute; inset:0; z-index:30; pointer-events:none; font-variant-numeric:tabular-nums; }
.hud-menu {
  position:absolute;
  top:8px;
  left:8px;
  min-height:42px;
  padding:0 14px;
  border:1px solid rgba(245,230,232,.18);
  border-radius:14px;
  background:rgba(25,42,81,.78);
  color:var(--text-light);
  font-size:13px;
  font-weight:850;
  pointer-events:auto;
  backdrop-filter:blur(10px);
}
.hud-stats {
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(3,auto);
  min-height:42px;
  max-width:calc(100% - 290px);
  border:1px solid rgba(245,230,232,.18);
  border-radius:14px;
  overflow:hidden;
  background:rgba(25,42,81,.78);
  backdrop-filter:blur(10px);
}
.hud-stat { display:flex; align-items:center; gap:7px; min-height:42px; padding:5px 13px; border-left:1px solid rgba(245,230,232,.11); }
.hud-stat:first-child { border-left:0; }
.hud-stat span { color:rgba(245,230,232,.68); font-size:9px; letter-spacing:.11em; font-weight:850; }
.hud-stat strong { color:var(--text-light); font-size:18px; line-height:1; white-space:nowrap; }
.hud-right strong.bad { color:#FFD8DB; }
.hud-center strong.gold { color:#FFF1C1; }

/* Compact landscape phones. Height rather than width is the limiting dimension. */
@media (max-height: 460px) and (orientation: landscape) {
  .ui-screen { padding-top:max(8px,var(--safe-top)); padding-bottom:max(8px,var(--safe-bottom)); padding-left:max(10px,var(--safe-left),var(--safe-right)); padding-right:max(10px,var(--safe-left),var(--safe-right)); }
  .page-card { padding:9px 12px; border-radius:19px; }
  .menu-layout { gap:7px; height:100%; }
  .page-header .eyebrow { font-size:9px; }
  .page-header h1 { margin:2px 0 1px; font-size:clamp(24px,7vh,32px); }
  .page-header p { font-size:11px; }
  .game-card-grid { gap:10px; }
  .game-card { padding:8px 10px; gap:3px; border-radius:17px; }
  .card-visual img { height:min(100%, 84px); max-width:62%; }
  .card-title { font-size:clamp(18px,5.2vh,23px); }
  .card-copy { font-size:10px; }
  .card-action { min-width:94px; padding:6px 12px; font-size:10px; }
  .page-footer { font-size:9px; }

  .intro-stage-host { height:100%; }
  .intro-panel { grid-template-columns:130px minmax(0,1fr); gap:11px; padding:10px 12px; }
  .intro-hero img { height:min(150px, 40vh); }
  .intro-copy h2 { margin:1px 0 3px; font-size:27px; }
  .intro-copy > p { margin-bottom:5px; font-size:11px; }
  .rule-panel { padding:7px 10px; border-radius:13px; }
  .items-row { grid-template-columns:70px minmax(0,1fr); margin:1px 0 3px; }
  .items-row label { font-size:10px; }
  .item-icons img { width:33px; height:33px; }
  .rule-line { font-size:11px; }
  .control-line { margin-top:3px; font-size:9.5px; }
  .intro-copy .primary-button { margin-top:5px; min-height:38px; min-width:190px; font-size:12px; }
  .top-back { top:max(7px,var(--safe-top)); left:max(7px,var(--safe-left)); min-height:32px; font-size:10px; }

  .result-card { padding:12px 16px; }
  .result-card h2 { font-size:28px; }
  .result-score { font-size:62px; margin-top:5px; }
  .result-card p { margin:7px 0; font-size:11px; }
  .result-actions { gap:8px; }
  .result-actions .primary-button { min-width:155px; min-height:38px; font-size:11px; }

  .hud-menu { top:6px; left:6px; min-height:36px; padding:0 11px; border-radius:11px; font-size:11px; }
  .hud-stats { top:6px; min-height:36px; max-width:calc(100% - 230px); border-radius:11px; }
  .hud-stat { min-height:36px; padding:4px 9px; gap:5px; }
  .hud-stat span { font-size:8px; }
  .hud-stat strong { font-size:15px; }
}

/* Tablet / narrow desktop fallback: no element is ever allowed to overflow horizontally. */
@media (max-width: 820px) and (min-height: 520px) {
  .game-card-grid { grid-template-columns:1fr; overflow:auto; }
  .menu-layout { height:auto; max-height:100%; overflow:auto; }
  .game-card { min-height:250px; }
  .intro-panel { grid-template-columns:1fr; overflow:auto; text-align:center; }
  .intro-hero img { height:190px; }
  .item-icons { justify-content:center; }
  .items-row { grid-template-columns:1fr; text-align:center; }
}

.game-card:focus-visible,
.primary-button:focus-visible,
#boot-button:focus-visible,
.hud-menu:focus-visible,
.text-button:focus-visible { outline:3px solid rgba(89,200,193,.85); outline-offset:3px; }

/* ---------- v1.4 visual refinement ---------- */
.gate-symbol {
  overflow: hidden;
  padding: 0;
  background: rgba(245,230,232,.16);
  border-color: rgba(89,200,193,.62);
}
.gate-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  border-radius: 50%;
}
.gate-card.rotate-mode .gate-symbol {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: clamp(30px, 6vh, 42px);
}

/* The menu cards now have a real illustrated world, while content remains DOM text for responsive sharpness. */
.game-card > * { position: relative; z-index: 2; }
.game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(245,230,232,.46), rgba(245,230,232,.86) 72%, rgba(245,230,232,.96));
}
.catch-card {
  background-image: url('assets/ui/menu_catch_bg.png');
  background-size: cover;
  background-position: center;
  border-color: rgba(89,200,193,.36);
}
.platformer-card {
  background-image: url('assets/ui/menu_platformer_bg.png');
  background-size: cover;
  background-position: center;
  border-color: rgba(80,106,179,.28);
}
.platformer-card::before {
  background: linear-gradient(180deg, rgba(245,230,232,.36), rgba(213,198,224,.78) 68%, rgba(213,198,224,.94));
}
.card-visual {
  position: relative;
}
.card-visual::before {
  content: "";
  position: absolute;
  width: min(42%, 180px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(245,230,232,.54);
  filter: blur(1px);
  box-shadow: 0 10px 30px rgba(25,42,81,.12);
}
.card-visual img { position: relative; z-index: 1; }
.card-title { color: #192A51; }
.card-copy { color: rgba(25,42,81,.78); }

/* Tutorial screens: illustrated ambience under a restrained translucent content card. */
.intro-screen.catch-accent {
  background:
    linear-gradient(90deg, rgba(245,230,232,.24), rgba(245,230,232,.04)),
    url('assets/ui/intro_catch_bg.png') center / cover no-repeat;
}
.intro-screen.platformer-accent {
  background:
    linear-gradient(90deg, rgba(25,42,81,.10), rgba(245,230,232,.10)),
    url('assets/ui/intro_platformer_bg.png') center / cover no-repeat;
}
.intro-panel.catch-accent,
.intro-panel.platformer-accent {
  background: rgba(245,230,232,.76);
  border-color: rgba(245,230,232,.58);
  box-shadow: 0 26px 54px rgba(25,42,81,.18);
  backdrop-filter: blur(12px) saturate(1.05);
}
.intro-panel {
  grid-template-columns: minmax(145px,.38fr) minmax(0,1.25fr);
}
.intro-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: clamp(4px,1vh,10px) clamp(4px,1vw,12px);
}
.intro-copy .rule-panel {
  width: 100%;
  background: rgba(245,230,232,.68);
  backdrop-filter: blur(7px);
}
.intro-copy .primary-button {
  width: min(360px, 82%);
  align-self: flex-start;
}
.platformer-accent .intro-copy .primary-button {
  background: linear-gradient(180deg, #6c80be, #506AB3);
  color: #f8f4fb;
  box-shadow: 0 10px 24px rgba(80,106,179,.22);
}
.platformer-accent .intro-copy .eyebrow { color: #506AB3; }

@media (max-height: 460px) and (orientation: landscape) {
  .gate-avatar { object-position: 50% 32%; }
  .game-card::before { background: linear-gradient(180deg, rgba(245,230,232,.42), rgba(245,230,232,.91)); }
  .platformer-card::before { background: linear-gradient(180deg, rgba(245,230,232,.34), rgba(213,198,224,.91)); }
  .intro-panel { grid-template-columns: 124px minmax(0,1fr); }
  .intro-copy { padding: 2px 4px; }
  .intro-copy .primary-button { width: min(310px, 72%); }
}