@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;font-family:'Space Grotesk',Arial,sans-serif;color:#eee7da;background:#080d15;font-synthesis:none;--muted:#a3aeb8;--teal:#b5d5c7;--gold:#dec294;--edge:32px}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
button,input,select{font:inherit}
button,select{color:inherit;background:#19232de8;border:1px solid #49544f;border-radius:6px;min-height:42px;padding:0 14px}
button{cursor:pointer;transition:background .15s,border-color .15s}
button:hover:not(:disabled){background:#2a3943;border-color:#81938a}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #d8edd6;outline-offset:4px}
[hidden]{display:none!important}
.game,.stage,.space{position:fixed;inset:0;width:100%;height:100dvh}
.game{isolation:isolate}
.stage{z-index:0;overflow:hidden}
.space{--board-safe-top:32px;--board-safe-bottom:32px;background:radial-gradient(ellipse at 85% 18%,#18353a40,transparent 45%),radial-gradient(ellipse at 15% 65%,#34284b45,transparent 55%),#080e17}
.space canvas{height:100%;width:100%;display:block;touch-action:none;cursor:grab}
.space canvas:active{cursor:grabbing}
.is-holding-cheese .space canvas{cursor:crosshair}
.game-title{position:absolute;left:max(var(--edge),env(safe-area-inset-left));top:max(26px,env(safe-area-inset-top));pointer-events:none;z-index:1}
h1{font-size:clamp(28px,3.2vw,42px);font-weight:500;letter-spacing:-.065em;line-height:1.1;margin:0 0 6px}
p.edition{font-size:12px;color:var(--muted);margin:0}
.round-control{width:54px;height:54px;border-radius:50%;padding:0;display:grid;place-items:center;background:#111c25d9;border-color:#6170687d;backdrop-filter:blur(12px);box-shadow:0 4px 20px #0003}
.settings-toggle{position:fixed;right:max(var(--edge),env(safe-area-inset-right));top:max(26px,env(safe-area-inset-top));z-index:10;color:#ded9c9}
.settings-toggle[aria-expanded=true]{background:#2b3a36;border-color:#a4b8a8}
.loading{position:absolute;top:45%;width:100%;text-align:center;color:#bdb4a8;z-index:1}
.quiet{background:#111c25a6;border-color:#3d4b4c}
.primary{background:#d8cbb0;color:#202423;border-color:#d8cbb0;font-weight:500}
.primary:hover:not(:disabled){background:#eee1c6;border-color:#eee1c6}
.turn-status{position:fixed;z-index:2;left:max(var(--edge),env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));max-width:min(420px,calc(100% - var(--edge) * 2 - 90px));pointer-events:none;background:none;border:0;box-shadow:none;text-shadow:0 2px 12px #000,0 1px 3px #000}
.turn-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.turn-copy{display:flex;align-items:center;gap:10px}
.turn-copy h2{font-size:19px;line-height:1.2;letter-spacing:-.03em;font-weight:500;margin:0}
.phase-dot{width:7px;height:7px;border-radius:50%;background:#7e8d99;flex:none}
.phase-dot.player{background:#bedaca;box-shadow:0 0 14px #b6dab660}
.phase-dot.vortex{background:#dcbb92;animation:breathing .85s ease-in-out infinite alternate}
.phase-dot.replay{background:#c5b5d7}
.phase-dot.warning{background:#f2a17d;box-shadow:0 0 14px #f2a17d60}
.phase-dot.cheese{width:7px;height:7px;background:#c1d892;box-shadow:0 0 14px #b6d88c60}
#hint{font-size:12px;color:#c2cdd0;line-height:1.5;margin:6px 0 0;max-width:370px}
.control-label{font-size:9px;letter-spacing:.13em;color:#a4b3bb;display:block;margin-bottom:8px}
/* Native keyboard targets sit on their 3D points; pointer input stays on the canvas. */
.play-controls,.moves{position:fixed;inset:0;z-index:1;pointer-events:none;background:none;border:0}
.moves button{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;min-height:44px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:transparent;box-shadow:none;pointer-events:none;transition:none;font-size:12px;opacity:1}
.moves button:disabled{opacity:0}
.moves button:focus-visible{color:#e1f6dd;background:#11271dbd;border-color:#d8edd6;outline:2px solid #e5f7df;outline-offset:3px;box-shadow:0 0 14px #010a07}
.moves button.known-vortex:focus-visible{color:#ffd1b6;border-color:#d08e72;outline-color:#d08e72}
.cheese-dock{position:fixed;right:max(var(--edge),env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));z-index:3}
.probe{position:relative;color:#dce8c6}
.probe:disabled{opacity:1;color:#a3b0af;border-color:#354140}
.probe[aria-pressed=true]{border-color:#d6d39c;background:#313e2b}
.probe.is-arriving{background:#293929;border-color:#c7df9d;box-shadow:0 0 32px #a9ca7540}
.probe-copy{position:absolute;right:66px;bottom:6px;width:165px;text-align:right;pointer-events:none;text-shadow:0 2px 8px #080e17,0 1px 3px #080e17;font-size:12px;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.probe:hover .probe-copy,.probe:focus-visible .probe-copy,.probe.is-carrying .probe-copy{opacity:1;transform:none}
.cheese-countdown{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#16241b;color:#c8d7b0;border:1px solid #54694d;font-size:10px;font-variant-numeric:tabular-nums}
.probe-copy small{display:block;margin-top:4px;font-size:10px;color:#a8b6aa;line-height:1.4}
.cheese{width:25px;height:25px;border-radius:50%;background:#acbd7e;box-shadow:inset -5px -4px #7e8c57;display:inline-block}
.cheese-slot{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;flex:none}
.cheese-slot .cheese{width:25px;height:25px}
.cheese.is-empty{background:transparent;border:1px dashed #859172;box-shadow:none;opacity:.65}
.cheese-slot .cheese.is-held{opacity:0;transform:translateY(-8px) scale(.6)}
.probe.is-carrying .cheese-slot::after{content:'×';position:absolute;inset:0;display:grid;place-items:center;border:1px dashed #c4d99c80;border-radius:50%;color:#d9e6bf;font-size:23px;line-height:1}
.carried-cheese{position:fixed;z-index:4;width:32px;height:32px;display:grid;place-items:center;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 2px 3px #020b06) drop-shadow(0 0 10px #b6d88c80)}
.carried-cheese .cheese{width:30px;height:30px;animation:cheese-pickup .18s ease-out both}
@keyframes cheese-pickup{from{transform:scale(.6) rotate(-18deg);opacity:.5}to{transform:scale(1) rotate(0);opacity:1}}
.cheese-delivery{position:absolute;left:2.5px;top:2.5px;z-index:5;pointer-events:none;filter:drop-shadow(0 0 10px #b6d88c80)}
.is-arriving .cheese-delivery{animation:cheese-arrival .85s cubic-bezier(.18,.7,.24,1) both}
.replay-cheese{display:grid;place-items:center;width:54px;height:54px;border:1px solid #6170687d;border-radius:50%;background:#111c25d9;backdrop-filter:blur(12px)}
.replay-cheese.is-arriving{border-color:#b4c88e;background:#293929}
.replay-controls{position:fixed;z-index:3;left:0;right:0;margin:0 auto;bottom:max(24px,env(safe-area-inset-bottom));width:min(385px,calc(100% - 160px));display:grid;gap:9px;background:none;border:0;box-shadow:none}
.replay-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.replay-buttons button{font-size:12px}
.replay-buttons #again{margin-left:auto}
.icon{padding:0;width:40px;min-width:40px;font-size:18px}
.scrubber{display:flex;align-items:center;gap:12px}
#timeline{width:100%;accent-color:#c6b49a;cursor:pointer;height:22px;min-width:30px}
#replay-position{font-size:10px;color:#a9b4bc;white-space:nowrap;font-variant-numeric:tabular-nums}
.replay-legend{font-size:10px;color:#afbbc1;display:flex;align-items:center;gap:5px;white-space:nowrap}
.replay-legend i{height:3px;width:10px;display:inline-block}
.player-key{background:#dc7664}.vortex-key{background:#dcc697}
.result,.probe-feedback{position:absolute;left:50%;top:25%;transform:translateX(-50%);max-width:calc(100% - 40px);width:max-content;padding:0;border:0;background:none;text-shadow:0 2px 12px #000,0 1px 3px #000;text-align:center;pointer-events:none;z-index:2}
.result strong,.probe-feedback strong{display:block;font-size:23px;font-weight:500;letter-spacing:-.03em}
.result span,.probe-feedback span{display:block;color:#b6c0c6;font-size:12px;margin-top:5px}
.probe-feedback strong{font-size:18px;color:#d9ebc8}
.probe-feedback.hit strong{color:#ffd1b6}.probe-feedback.hit span{color:#e7bdac}
.game.is-replay .result{display:none}
.settings-layer{position:fixed;inset:0;z-index:8}
.settings-backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#03091166;cursor:default}
.settings-backdrop:hover:not(:disabled){background:#03091166}
.settings-panel{position:absolute;top:max(92px,calc(env(safe-area-inset-top) + 66px));right:max(var(--edge),env(safe-area-inset-right));width:330px;max-width:calc(100% - 32px);max-height:calc(100dvh - 115px);overflow-y:auto;overscroll-behavior:contain;background:#101b24f5;border:1px solid #465653;border-radius:12px;padding:20px;box-shadow:0 20px 70px #0007;backdrop-filter:blur(20px)}
.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-heading h2{font-size:21px;letter-spacing:-.03em;font-weight:500;margin:0}
.panel-heading .icon{border:0;background:transparent;font-size:25px}
.settings-section{border-top:1px solid #34423f;margin-top:16px;padding-top:16px}
.option-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.option-row+.option-row{margin-top:12px}
.option-toggle{font-size:11px;min-height:36px;width:97px;padding:0 9px}
.option-toggle[aria-pressed=true]{color:#cee1bd;background:#26382c;border-color:#617a55}
.camera-picker,.example-picker,.player-picker{display:flex;align-items:center;gap:7px}
.camera-picker select,.example-picker select,.player-picker select{flex:1;min-width:0;width:100%;font-size:12px;padding:0 9px}
.settings-note{font-size:11px;line-height:1.55;color:#a3b3ba;margin:10px 0 0}
.vortex-design-control select{font-size:12px;width:100%}
.compare-designs{display:inline-block;margin-top:10px;font-size:11px;color:#c2d9ce;text-underline-offset:4px}
.settings-actions{display:grid;gap:8px}
.settings-actions button{text-align:left;font-size:12px}
.settings-credit{font-size:10px;line-height:1.8;color:#8e9eaa;margin:18px 0 0}
.prototype{font-size:8px;letter-spacing:.14em;color:#84938e}
.intro{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:28px 20px;overflow:auto;overscroll-behavior:contain;background:#070d16bd;backdrop-filter:blur(15px)}
.intro-card{width:min(460px,100%);margin:auto}
#intro-title{margin:0 auto 8px;width:min(360px,88%)}
#intro-title img{display:block;width:100%;height:auto;max-height:156px;object-fit:contain}
.intro-subtitle{text-align:center;font-size:12px;color:#b9c3c6;letter-spacing:.13em;margin:8px 0 29px}
.tutorial-steps{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.tutorial-steps li{display:flex;align-items:flex-start;gap:16px}
.tutorial-symbol{display:grid;place-items:center;flex:none;width:35px;height:35px;border:1px solid #8b96857d;border-radius:50%;color:#d6d2ba;font-size:10px;margin-top:1px}
.tutorial-cheese{border:none}
.tutorial-steps h3{font-size:15px;font-weight:500;letter-spacing:-.015em;margin:0 0 5px}
.tutorial-steps p{font-size:12px;line-height:1.65;color:#b1bec5;margin:0}
.intro-replay{font-size:11px;line-height:1.6;color:#aab9c2;text-align:center;margin:24px 0 18px}
.intro .primary{width:100%;min-height:49px;text-align:center;font-size:14px}
.intro-footnote{font-size:10px;color:#8f9ea8;text-align:center;line-height:1.5;margin:14px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes breathing{to{opacity:.35}}
@keyframes cheese-arrival{0%{opacity:0;transform:translate(-54px,-90px) scale(1.5) rotate(-65deg)}18%{opacity:1;transform:translate(-44px,-70px) scale(1.45) rotate(-40deg)}75%{opacity:1;transform:translate(3px,3px) scale(.92) rotate(8deg)}100%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}}
@media(max-width:1100px){.is-replay .turn-status{bottom:126px;max-width:min(520px,calc(100% - var(--edge) * 2))}.probe-copy{right:0;bottom:66px;width:150px}}
@media(max-width:600px){
  :root{--edge:18px}
  .space{--board-safe-top:22px;--board-safe-bottom:22px}
  .game-title{top:max(22px,env(safe-area-inset-top))}h1{font-size:29px}p.edition{font-size:10px}
  .settings-toggle{top:max(20px,env(safe-area-inset-top))}.round-control,.replay-cheese{width:48px;height:48px}
  .turn-status{bottom:max(22px,env(safe-area-inset-bottom));max-width:calc(100% - 110px)}
  .turn-copy h2{font-size:17px}
  #hint{font-size:11px;line-height:1.5;margin:5px 0 0}
  .cheese-dock{bottom:max(22px,env(safe-area-inset-bottom))}.probe-copy{bottom:60px;width:145px;font-size:11px}.probe-copy small{font-size:9px}
  .probe.is-carrying .probe-copy{width:72px}.probe.is-carrying .probe-copy small{display:none}
  .replay-controls{left:var(--edge);right:86px;margin:0;width:auto;bottom:max(22px,env(safe-area-inset-bottom))}.is-replay .turn-status{bottom:122px;max-width:calc(100% - 36px)}
  .replay-buttons{gap:6px}.replay-buttons button{min-height:36px;font-size:11px;padding:0 10px}.replay-buttons .icon{width:34px;min-width:34px;padding:0}.replay-buttons #again{margin-left:0}.replay-legend{display:none}
  .settings-panel{top:82px;max-height:calc(100dvh - 104px);padding:18px;width:320px}
  .intro{padding:24px 22px}.intro-card{max-width:380px}#intro-title{width:280px}.intro-subtitle{font-size:10px;margin-bottom:25px}.tutorial-steps{gap:17px}.tutorial-steps h3{font-size:14px}.tutorial-steps p{font-size:11px}.tutorial-steps li{gap:13px}.intro-replay{font-size:10px;margin-top:22px}
}
@media(max-height:580px) and (min-width:650px){
  :root{--edge:24px}.space{--board-safe-top:18px;--board-safe-bottom:18px}
  .game-title{top:18px}h1{font-size:29px}p.edition{font-size:10px}.settings-toggle{top:18px;width:45px;height:45px}
  .turn-status{bottom:18px;max-width:300px}.turn-copy h2{font-size:17px}#hint{font-size:10px;margin:5px 0 0}.control-label{font-size:8px;margin-bottom:6px}.is-replay .turn-status{bottom:110px}.replay-controls{bottom:18px}
  .cheese-dock{bottom:18px}.probe-copy{bottom:62px}.settings-panel{top:75px;max-height:calc(100dvh - 90px)}
  .intro-card{width:min(780px,100%);display:grid;grid-template-columns:240px 1fr;column-gap:35px;align-items:center}
  #intro-title{grid-column:1;grid-row:1 / 3;width:240px;align-self:end;margin-bottom:20px}.intro-subtitle{grid-column:1;grid-row:3;align-self:start;margin:0}.tutorial-steps{grid-column:2;grid-row:1 / 4;gap:12px}.tutorial-steps p{font-size:11px}.tutorial-steps h3{font-size:13px}.intro-replay{grid-column:1 / -1;margin:18px 0 12px}.intro .primary{grid-column:1 / -1;min-height:43px}.intro-footnote{grid-column:1 / -1;margin:10px 0 0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.is-arriving .cheese-delivery{opacity:1;transform:none;filter:none}}