:root {
  --bg: #0c1e29;
  --panel: #153342;
  --panel-2: #1c4452;
  --text: #f8fbf3;
  --muted: #a9c0c2;
  --cream: #fff8e9;
  --gold: #f6b73c;
  --gold-2: #ffd66b;
  --blue: #63c7ff;
  --blue-2: #1685ff;
  --danger: #ff5f61;
  --shadow: 0 18px 45px rgba(0,0,0,.32);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07151d;
  color: var(--text);
  touch-action: manipulation;
}
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(99,199,255,.75); outline-offset: 3px; }

.app-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,214,107,.12), transparent 30%),
    linear-gradient(180deg, #193745 0%, #0c202c 48%, #07151d 100%);
}

.screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: scale(1.02); transition: .25s ease; }
.screen.is-active { opacity: 1; pointer-events: auto; transform: scale(1); }

.menu-screen {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background:
    linear-gradient(rgba(8,31,40,.26), rgba(5,22,30,.4)),
    radial-gradient(circle at 20% 18%, rgba(94,212,196,.2), transparent 30%),
    radial-gradient(circle at 80% 28%, rgba(246,183,60,.16), transparent 24%);
}
.menu-screen::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(30deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%);
  background-size: 58px 100px;
  opacity: .75;
}
.ambient { position: absolute; border-radius: 999px; filter: blur(4px); opacity: .75; pointer-events: none; }
.ambient-a { width: 36vw; height: 36vw; max-width: 360px; max-height: 360px; left: -12vw; bottom: 10vh; background: rgba(47,163,177,.16); }
.ambient-b { width: 42vw; height: 42vw; max-width: 420px; max-height: 420px; right: -20vw; top: 8vh; background: rgba(246,183,60,.12); }

.brand-card { z-index: 1; align-self: end; text-align: center; max-width: 620px; }
.brand-kicker { font-size: clamp(11px, 2.4vw, 15px); letter-spacing: .22em; text-transform: uppercase; color: #b9d9d6; font-weight: 800; }
.brand-card h1 { margin: 10px 0 4px; font-size: clamp(40px, 10vw, 82px); line-height: .9; letter-spacing: -.06em; text-shadow: 0 8px 0 rgba(0,0,0,.18), 0 0 28px rgba(99,199,255,.1); }
.brand-card h1 span { color: var(--gold); }
.brand-card p { margin: 14px auto 0; max-width: 390px; color: #c6d7d6; font-weight: 650; font-size: clamp(14px, 3.4vw, 18px); }

.menu-actions { z-index: 1; width: min(92vw, 430px); display: grid; gap: 11px; }
.btn {
  border: 0; border-radius: 18px; min-height: 54px; padding: 0 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-weight: 900; color: var(--text); box-shadow: 0 10px 22px rgba(0,0,0,.2);
}
.btn-primary { background: linear-gradient(180deg, var(--gold-2), #f0a91d); color: #1b2830; border: 2px solid rgba(255,255,255,.45); }
.btn-primary:active { transform: translateY(2px); }
.btn-xl { min-height: 70px; font-size: 22px; }
.btn-icon { width: 34px; height: 34px; border-radius: 12px; background: rgba(13,50,64,.92); color: white; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.btn-secondary { justify-content: flex-start; background: linear-gradient(180deg, rgba(31,77,91,.95), rgba(18,51,66,.95)); border: 1px solid rgba(255,255,255,.13); }
.btn-secondary b { margin-left: auto; color: #769095; font-size: 11px; text-transform: uppercase; }
.btn:disabled { opacity: .72; cursor: default; }

.icon-btn {
  width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.17); border-radius: 15px;
  display: grid; place-items: center; color: white; background: linear-gradient(180deg,#244d5d,#15323f); box-shadow: 0 8px 16px rgba(0,0,0,.25); cursor: pointer;
}
.menu-settings { position: absolute; top: max(18px, env(safe-area-inset-top)); right: 18px; z-index: 2; }
.menu-footer { z-index: 1; align-self: end; color: rgba(211,229,229,.46); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.game-screen {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 0;
  padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
}
.game-topbar { display: grid; grid-template-columns: 48px 1fr auto 48px; align-items: center; gap: 9px; width: min(100%, 760px); margin: 0 auto; }
.level-pill { justify-self: center; min-width: 112px; padding: 6px 18px 7px; text-align: center; border-radius: 16px; background: rgba(12,37,50,.85); border: 1px solid rgba(255,255,255,.13); box-shadow: inset 0 0 16px rgba(99,199,255,.06); }
.level-pill .eyebrow { display: block; font-size: 9px; color: #83a7ae; font-weight: 900; letter-spacing: .17em; }
.level-pill strong { display: block; font-size: 21px; line-height: 1.05; }
.hearts { display: flex; gap: 3px; padding: 0 3px; }
.heart { font-size: clamp(20px, 5vw, 27px); filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); transition: .2s ease; }
.heart.lost { filter: grayscale(1); opacity: .22; transform: scale(.88); }

.objective { justify-self: center; margin: 10px 0 4px; padding: 7px 13px; border-radius: 999px; color: #c4d6d7; background: rgba(7,24,33,.44); font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.objective-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }

.board-zone { min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; }
.board-frame {
  position: relative;
  width: min(88vw, 68vh, 560px);
  aspect-ratio: 1;
  border-radius: 12%;
  padding: 5.8%;
  background: linear-gradient(145deg,#8c7041 0%,#5f4b2e 40%,#3d3325 100%);
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(255,225,163,.22), inset 0 -14px 24px rgba(0,0,0,.28);
}
.board-frame::before {
  content:""; position:absolute; inset:3%; border-radius:10%;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 72%, rgba(0,0,0,.18) 0 3px, transparent 4px),
    linear-gradient(150deg,#463d2e,#272a25);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.28), inset 0 10px 25px rgba(0,0,0,.35);
}
.board-glow { position:absolute; inset:9%; border-radius:18%; background: radial-gradient(circle,rgba(91,196,225,.09),transparent 68%); pointer-events:none; }
.board { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(5,1fr); gap: 2%; }

.tile {
  position: relative; border: 0; padding: 0; cursor: pointer; border-radius: 25%;
  display: grid; place-items: center;
  background: linear-gradient(145deg,#fffdf7 0%,#e9e4d9 55%,#c9c3b8 100%);
  box-shadow: 0 6px 9px rgba(0,0,0,.34), inset 0 0 0 2px rgba(255,255,255,.78), inset 0 -5px 6px rgba(51,57,58,.13);
  clip-path: polygon(24% 0,76% 0,100% 24%,100% 76%,76% 100%,24% 100%,0 76%,0 24%);
  transition: transform .12s ease, filter .15s ease;
  will-change: transform, opacity;
}
.tile::after { content:""; position:absolute; inset:12%; border-radius:22%; box-shadow: inset 0 0 0 1px rgba(29,50,58,.12); clip-path: inherit; }
.tile:active { transform: scale(.94); }
.tile .arrow { font-size: clamp(26px, 8vw, 54px); line-height: 1; color: var(--blue-2); font-weight: 1000; text-shadow: 0 2px 0 white, 0 5px 9px rgba(15,101,188,.24); }
.tile.hint { animation: hintPulse .8s ease-in-out infinite alternate; }
.tile.blocked { animation: bump .34s ease; }
.tile.exit-up { animation: exitUp .42s cubic-bezier(.2,.7,.2,1) forwards; }
.tile.exit-down { animation: exitDown .42s cubic-bezier(.2,.7,.2,1) forwards; }
.tile.exit-left { animation: exitLeft .42s cubic-bezier(.2,.7,.2,1) forwards; }
.tile.exit-right { animation: exitRight .42s cubic-bezier(.2,.7,.2,1) forwards; }

.cell-mark { align-self: center; justify-self: center; width: 24%; aspect-ratio:1; border-radius:50%; background: rgba(79,142,154,.15); box-shadow: inset 0 0 0 1px rgba(118,209,218,.06); }

.game-controls { width: min(100%, 520px); margin: 4px auto 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.control-btn { min-height: 60px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; color: white; background: linear-gradient(180deg,#234a59,#14303c); box-shadow: 0 8px 18px rgba(0,0,0,.25); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; }
.control-btn span { font-size: 23px; line-height: 1; }
.control-btn small { font-weight: 850; color:#c5d5d6; font-size:11px; }
.control-main { background: linear-gradient(180deg,#315f65,#20444d); border-color: rgba(255,214,107,.28); }
.control-btn:disabled { opacity:.34; cursor:default; }

.toast { position:absolute; left:50%; bottom:5%; transform:translate(-50%,12px); background:rgba(8,25,33,.94); color:white; border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:9px 14px; font-size:12px; font-weight:800; opacity:0; pointer-events:none; transition:.2s ease; white-space:nowrap; z-index:5; }
.toast.show { opacity:1; transform:translate(-50%,0); }

.modal { position:absolute; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(3,13,18,.72); backdrop-filter: blur(8px); opacity:0; pointer-events:none; transition:.2s ease; }
.modal.is-open { opacity:1; pointer-events:auto; }
.modal-card { width:min(90vw,390px); text-align:center; border-radius:28px; padding:32px 24px 24px; color:#23323a; background:linear-gradient(180deg,#fffdf5,#f0e6d2); box-shadow:0 30px 65px rgba(0,0,0,.4); transform:translateY(14px) scale(.97); transition:.25s ease; }
.modal.is-open .modal-card { transform:none; }
.modal-badge { width:72px; height:72px; border-radius:24px; display:grid; place-items:center; margin:-3px auto 15px; background:linear-gradient(180deg,#69d88c,#2eaa61); color:white; font-size:38px; font-weight:1000; box-shadow:0 12px 24px rgba(47,169,98,.28); }
.modal-kicker { margin:0; font-size:10px; letter-spacing:.15em; font-weight:1000; color:#809096; }
.modal-card h2 { margin:5px 0 7px; font-size:30px; }
.modal-card p:not(.modal-kicker) { color:#66767c; font-weight:650; margin:0 0 22px; }
.modal-card .btn { width:100%; }

@keyframes hintPulse { from { filter: drop-shadow(0 0 0 rgba(255,214,107,0)); transform:scale(1); } to { filter: drop-shadow(0 0 14px rgba(255,214,107,.95)); transform:scale(1.07); } }
@keyframes bump { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7%)} 55%{transform:translateX(7%)} 80%{transform:translateX(-3%)} }
@keyframes exitUp { to { transform:translateY(-180%) scale(.82); opacity:0; filter:blur(2px) brightness(1.25); } }
@keyframes exitDown { to { transform:translateY(180%) scale(.82); opacity:0; filter:blur(2px) brightness(1.25); } }
@keyframes exitLeft { to { transform:translateX(-180%) scale(.82); opacity:0; filter:blur(2px) brightness(1.25); } }
@keyframes exitRight { to { transform:translateX(180%) scale(.82); opacity:0; filter:blur(2px) brightness(1.25); } }

@media (orientation: landscape) and (max-height: 620px) {
  .game-screen { grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; padding-top: max(6px, env(safe-area-inset-top)); }
  .objective { position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:4; margin:0; }
  .board-frame { width:min(65vh, 430px); }
  .game-controls { position:absolute; right:max(10px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%); width:74px; grid-template-columns:1fr; gap:8px; }
  .control-btn { min-height:64px; padding:4px; }
  .game-topbar { width:calc(100% - 90px); margin-left:0; }
}

@media (min-width: 760px) {
  .game-screen { padding-left:24px; padding-right:24px; }
  .menu-screen { padding-left:30px; padding-right:30px; }
}