:root{--ink:#eef3f7;--muted:#91a0ad;--night:#0c1117;--panel:#151e27;--panel2:#1d2934;--line:#30404e;--orange:#ff7918;--amber:#ffc12d;--green:#42d488;--red:#ff5b5b;--shadow:0 18px 50px #0008;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#354757 0,#151d25 36%,#080c11 100%);color:var(--ink);overflow-x:hidden}
body{min-height:100dvh;padding:clamp(.4rem,1.4vw,1.2rem);touch-action:manipulation;overscroll-behavior:none}
button{font:inherit;color:inherit}
button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.game-shell{width:min(1500px,100%);margin:auto;background:#0d141b;border:1px solid #344553;border-radius:22px;overflow:hidden;box-shadow:0 24px 90px #000a,0 0 0 1px #ffffff08 inset}
.topbar{height:68px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#1a2530,#111920);border-bottom:1px solid #334452}
.brand{display:flex;align-items:center;gap:11px;border:0;background:none;padding:0;text-align:left;cursor:pointer}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;background:linear-gradient(145deg,#ff9a2e,#f35b0b);border-radius:10px 10px 14px 10px;box-shadow:0 8px 20px #ff6b1833;color:#16100b;font-weight:1000;letter-spacing:-.12em;padding-right:.1em;transform:skew(-5deg)}
.brand strong{display:block;font-size:1.05rem;line-height:1}.brand small{display:block;color:#9badba;margin-top:5px;font-size:.72rem;letter-spacing:.04em}
.top-actions{display:flex;gap:8px}.icon-button,.speed-controls button,.camera-button,.stage-fullscreen-button,.close-button{border:1px solid #3a4b58;background:#202d38;border-radius:10px;cursor:pointer;box-shadow:0 2px 0 #0005}
.icon-button{width:42px;height:42px;font-weight:800;font-size:1.05rem}.icon-button:hover,.speed-controls button:hover,.camera-button:hover,.stage-fullscreen-button:hover{background:#2b3b48}.icon-button[aria-pressed="false"]{color:#73808a;text-decoration:line-through}
.status-strip{display:grid;grid-template-columns:minmax(230px,1.6fr) repeat(4,minmax(90px,.55fr));min-height:68px;background:#111a22;border-bottom:1px solid #2e3e4b}
.status-strip>div{padding:11px 18px;border-right:1px solid #263541;display:flex;flex-direction:column;justify-content:center}.status-strip>div:last-child{border:0}
.site-title span,.status-stat span{font-size:.65rem;font-weight:850;letter-spacing:.13em;color:#81929f;text-transform:uppercase}.site-title strong{font-size:1.05rem;margin-top:3px}.status-stat strong{font-size:1.25rem;font-variant-numeric:tabular-nums;margin-top:2px}.status-stat strong b{font-weight:900;color:var(--green)}.status-stat.score strong{color:var(--amber)}
.game-stage{position:relative;aspect-ratio:16/9;max-height:calc(100dvh - 285px);min-height:340px;background:#86c9ea;overflow:hidden;isolation:isolate}
#gameCanvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;background:#6fc1e7}
.canvas-message{position:absolute;left:50%;top:15%;transform:translate(-50%,-14px);background:#101820e8;border:1px solid #425563;border-radius:999px;padding:.7rem 1rem;font-weight:800;pointer-events:none;opacity:0;transition:.2s;box-shadow:var(--shadow);white-space:nowrap}.canvas-message.show{opacity:1;transform:translate(-50%,0)}
.speed-controls{position:absolute;left:14px;top:14px;display:flex;gap:5px;padding:5px;background:#0b1118cc;border:1px solid #40515f;border-radius:13px;backdrop-filter:blur(8px)}
.speed-controls button{min-width:39px;height:36px;border:0;background:transparent}.speed-controls button.active{background:var(--orange);color:#1d1005}
.camera-button{position:absolute;right:14px;top:14px;width:46px;height:46px;background:#0b1118dd;border-color:#40515f;font-size:1.2rem}
.stage-fullscreen-button{position:absolute;right:68px;top:14px;height:46px;padding:0 15px;background:#0b1118e8;border-color:#526675;font-weight:900;backdrop-filter:blur(8px)}.stage-fullscreen-button span{margin-left:5px}
.tool-dock{display:grid;grid-template-columns:minmax(0,1fr) 260px;background:linear-gradient(180deg,#1a2530,#121a21);border-top:1px solid #394b59;min-height:118px}
.tool-scroll{display:grid;grid-template-columns:repeat(5,minmax(104px,1fr));gap:9px;padding:12px;overflow-x:auto}
.tool{position:relative;display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:8px;min-width:104px;padding:10px;border:1px solid #394a58;background:#202c36;border-radius:13px;cursor:pointer;text-align:left;transition:transform .14s,border-color .14s,background .14s;box-shadow:0 4px 10px #0003}
.tool:hover{transform:translateY(-2px);border-color:#627686}.tool.selected{border-color:var(--amber);background:#47351c;box-shadow:0 0 0 2px #ffc12d33 inset,0 8px 20px #0005}.tool.empty{opacity:.42;filter:saturate(.35)}
.tool img{grid-row:1/3;width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 5px 5px #0007)}.tool strong{font-size:.78rem;line-height:1.1}.tool small{font-size:.67rem;color:#94a4b0;line-height:1.2}.tool-count{position:absolute;right:7px;top:6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#0f171e;border:1px solid #50616e;color:var(--amber);font-size:.78rem;font-weight:900}
.mission-card{border-left:1px solid #334552;padding:18px 17px;background:#121b22;display:flex;flex-direction:column;justify-content:center}.mission-label{font-size:.64rem;font-weight:900;color:var(--orange);letter-spacing:.15em}.mission-card p{font-size:.8rem;line-height:1.45;color:#b4c0c9;margin:.45rem 0 0}
.modal{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:18px;background:#05080bd9;backdrop-filter:blur(10px)}.modal.open{display:grid}
.modal-card{width:min(920px,100%);max-height:calc(100dvh - 36px);overflow:auto;background:linear-gradient(145deg,#1f2c37,#111820 72%);border:1px solid #495b68;border-radius:24px;box-shadow:0 30px 100px #000;animation:modal-in .28s ease-out}
@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
.start-card{display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden}.modal-art{position:relative;min-height:510px;display:grid;place-items:end center;background:radial-gradient(circle at 52% 35%,#ffd658 0,#fd8a1e 27%,#8c2c10 58%,#1c1614 100%);overflow:hidden}.modal-art:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 28px,#15100c15 28px 56px)}.modal-art img{position:relative;width:95%;height:90%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 25px 20px #35100288)}
.stamp{position:absolute;right:20px;top:20px;width:98px;height:98px;display:grid;place-items:center;text-align:center;border:3px solid #2a170e;border-radius:50%;color:#2a170e;font-weight:1000;font-size:.68rem;letter-spacing:.08em;transform:rotate(8deg)}
.modal-copy{padding:clamp(26px,5vw,64px);display:flex;flex-direction:column;justify-content:center}.eyebrow{margin:0 0 .65rem;color:var(--orange);font-size:.7rem;font-weight:900;letter-spacing:.18em}.modal-copy h1{font-size:clamp(2.2rem,5vw,4.7rem);line-height:.86;letter-spacing:-.065em;margin:0;max-width:9ch}.modal-copy h1 span{color:var(--orange)}.modal-copy>p:not(.eyebrow){color:#b7c3cc;line-height:1.6;margin:1.6rem 0}
.start-stats{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #344552;margin:0 0 1.4rem}.start-stats div{padding:14px 8px;border-right:1px solid #344552}.start-stats div:last-child{border:0}.start-stats strong{display:block;color:var(--amber);font-size:1.35rem}.start-stats span{font-size:.65rem;color:#8495a2}
.primary-button,.secondary-button,.text-button{border:0;border-radius:12px;padding:.92rem 1.15rem;font-weight:900;cursor:pointer}.primary-button{background:linear-gradient(135deg,#ff9b28,var(--orange));color:#211207;box-shadow:0 8px 24px #ff711b35}.primary-button:hover{filter:brightness(1.08)}.primary-button span{float:right}.secondary-button{background:#2a3945;border:1px solid #4a5d6b}.text-button{background:transparent;color:#9eadb8;margin-top:8px}.text-button:hover{color:#fff}
.compact-card,.result-card,.help-card,.level-card{padding:clamp(24px,5vw,48px);width:min(650px,100%)}.compact-card h2,.result-card h2,.help-card h2,.level-card h2{font-size:clamp(1.8rem,5vw,3rem);margin:0 0 .8rem}.compact-card>p:not(.eyebrow),.result-card>p:not(.eyebrow){color:#b5c2cb;line-height:1.6}
.briefing-goals,.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:1.3rem 0}.briefing-goals div,.result-grid div{background:#10181f;border:1px solid #344653;border-radius:12px;padding:12px;text-align:center}.briefing-goals strong,.result-grid strong{display:block;font-size:1.35rem;color:var(--amber)}.briefing-goals span,.result-grid span{font-size:.68rem;color:#899aa6}
.stars{display:flex;justify-content:center;gap:10px;font-size:3.7rem;color:#47545e;margin:1rem 0}.stars .earned{color:var(--amber);filter:drop-shadow(0 5px 10px #ffae2355);animation:star-pop .4s both}.stars .earned:nth-child(2){animation-delay:.12s}.stars .earned:nth-child(3){animation-delay:.24s}@keyframes star-pop{from{transform:scale(.3) rotate(-35deg);opacity:0}}
.modal-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin-top:1.4rem}.modal-heading{display:flex;justify-content:space-between;align-items:start}.close-button{width:42px;height:42px;font-size:1.3rem}
.level-card{width:min(850px,100%)}.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:1rem}.level-tile{position:relative;min-height:115px;border:1px solid #3b4d5a;background:#18232c;border-radius:13px;padding:14px;text-align:left;cursor:pointer}.level-tile:hover:not(:disabled){border-color:var(--orange);transform:translateY(-2px)}.level-tile:disabled{opacity:.45;cursor:not-allowed}.level-tile .num{font-size:.63rem;color:var(--orange);font-weight:900;letter-spacing:.12em}.level-tile strong{display:block;margin:.55rem 0;font-size:.9rem}.level-tile .tile-stars{color:var(--amber);letter-spacing:.1em}.lock{position:absolute;right:12px;top:12px}
.help-list{padding-left:1.3rem;color:#bac5cd;line-height:1.55}.help-list li{margin:.75rem 0}.help-list strong{color:#fff}.keyboard-help{background:#101820;border:1px solid #334550;border-radius:12px;padding:12px;font-size:.8rem;color:#92a3af}
.certificate-card{width:min(900px,100%);max-height:calc(100dvh - 28px);overflow:auto;border-radius:24px;background:#111a22;border:1px solid #4b5d69;box-shadow:0 30px 100px #000;padding:12px}.certificate-paper{position:relative;overflow:hidden;padding:clamp(28px,5vw,62px);color:#1a2025;text-align:center;background:linear-gradient(145deg,#fffdf5,#f2e4c1);border:7px double #b87916;box-shadow:inset 0 0 0 3px #fff8dc,inset 0 0 50px #9b651822}.certificate-paper:before,.certificate-paper:after{content:"";position:absolute;width:150px;height:150px;border:18px solid #f27a18;opacity:.09;transform:rotate(45deg)}.certificate-paper:before{left:-95px;top:-95px}.certificate-paper:after{right:-95px;bottom:-95px}.certificate-stripes{height:14px;margin:-10px -10px 28px;background:repeating-linear-gradient(135deg,#161d23 0 18px,#ff7a18 18px 36px)}.certificate-kicker{margin:0;color:#9b5c0d;font-size:.72rem;font-weight:950;letter-spacing:.19em}.certificate-paper h2{margin:.4rem 0 .8rem;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.5rem,7vw,5.2rem);line-height:1;color:#172029}.certificate-intro,.certificate-copy{margin:.65rem auto;color:#4b5155;line-height:1.55;max-width:660px}.certificate-name-label{display:block;margin-top:1rem;color:#8b6226;font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.certificate-name{display:block;width:min(580px,100%);margin:.2rem auto .8rem;padding:.25rem .5rem;border:0;border-bottom:2px solid #b87916;background:transparent;color:#172029;text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.65rem,5vw,3rem);font-weight:700}.certificate-name:focus{outline:2px solid #f27a18;outline-offset:4px;border-radius:4px}.certificate-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:1.8rem 0;border-block:1px solid #c9a96f}.certificate-stats div{padding:14px 8px;border-right:1px solid #c9a96f}.certificate-stats div:last-child{border:0}.certificate-stats strong{display:block;color:#b85b0a;font-size:1.35rem}.certificate-stats span{display:block;margin-top:4px;color:#625c51;font-size:.68rem;font-weight:750}.certificate-rating{display:inline-block;margin:.2rem 0 1.2rem!important;padding:.55rem 1rem;border-radius:999px;background:#18232b;color:#ffd15a!important;font-weight:950;letter-spacing:.08em}.certificate-footer{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;gap:16px;margin-top:1rem}.certificate-footer>span:not(.certificate-seal){border-top:1px solid #8c7959;padding-top:8px}.certificate-footer strong,.certificate-footer small{display:block}.certificate-footer small{margin-top:4px;color:#746b5d;font-size:.66rem}.certificate-seal{display:grid;place-items:center;width:112px;height:112px;margin:auto;border:5px double #7f4d08;border-radius:50%;background:radial-gradient(circle,#ffd96a,#e69116);color:#432708;font-size:2rem;font-weight:1000;line-height:.7;box-shadow:0 7px 18px #70400044}.certificate-seal small{font-size:.52rem;letter-spacing:.1em}.certificate-actions{display:grid;grid-template-columns:1fr 1.45fr;gap:10px;padding:12px 4px 2px}
.focus-mode .topbar,.focus-mode .status-strip{display:none}.focus-mode{padding:0}.focus-mode .game-shell{width:100%;height:100dvh;border:0;border-radius:0;display:grid;grid-template-rows:minmax(0,1fr) auto}.focus-mode .game-stage{max-height:none;min-height:0;aspect-ratio:auto}.focus-mode .tool-dock{min-height:116px}
@media(max-width:850px){html,body{min-height:100%;min-height:100dvh;overflow-x:hidden}body{height:auto;padding:0 0 max(12px,env(safe-area-inset-bottom,0px));overflow-y:auto}.game-shell{height:auto;min-height:100dvh;border-radius:0;border-inline:0;display:grid;grid-template-rows:68px auto auto auto;align-content:start}.game-stage{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:16/9;align-self:start}.focus-mode .game-shell{height:auto;min-height:100dvh;grid-template-rows:auto auto;align-content:start}.focus-mode .game-stage{width:100%;height:auto;aspect-ratio:16/9}.status-strip{grid-template-columns:1.5fr repeat(3,1fr)}.status-stat.score{display:none}.status-strip>div{padding:9px 10px}.tool-dock{grid-template-columns:1fr;min-height:0;padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}.mission-card{display:none}.tool-scroll{grid-template-columns:repeat(5,116px);overscroll-behavior-x:contain}.modal{padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}.start-card{grid-template-columns:1fr;overflow-x:hidden;overflow-y:auto}.modal-art{min-height:210px;max-height:33vh}.modal-art img{height:135%;position:absolute;bottom:-44%}.stamp{width:76px;height:76px;font-size:.55rem}.modal-copy{padding:26px 26px max(34px,calc(env(safe-area-inset-bottom,0px) + 18px))}.modal-copy h1{font-size:clamp(2.2rem,11vw,4rem);max-width:10ch}.modal-copy>p:not(.eyebrow){margin:1rem 0}.level-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:570px) and (orientation:portrait){.game-shell{grid-template-rows:56px auto auto auto}.topbar{height:56px;padding:0 10px}.brand small{display:none}.brand-mark{width:36px;height:36px}.icon-button{width:36px;height:36px}.status-strip{min-height:54px;grid-template-columns:1.35fr repeat(3,.65fr)}.site-title strong{font-size:.82rem}.status-stat span{font-size:.53rem;letter-spacing:.05em}.status-stat strong{font-size:.95rem}.game-stage{aspect-ratio:16/9}.tool-dock{min-height:102px}.tool-scroll{padding:8px;grid-template-columns:repeat(5,104px);gap:6px}.tool{grid-template-columns:39px 1fr;padding:7px}.tool img{width:39px;height:39px}.tool strong{font-size:.7rem}.tool small{display:none}.tool-count{width:21px;height:21px}.speed-controls{top:8px;left:8px}.speed-controls button{min-width:34px;height:32px}.camera-button{top:8px;right:8px;width:40px;height:40px}.stage-fullscreen-button{top:8px;right:56px;height:40px;padding:0 10px}.canvas-message{font-size:.76rem;max-width:82%;white-space:normal;text-align:center}.modal{padding:10px 10px max(14px,env(safe-area-inset-bottom,0px))}.modal-card{max-height:calc(100dvh - max(24px,env(safe-area-inset-bottom,0px)))}.briefing-goals,.result-grid{grid-template-columns:repeat(3,1fr)}.level-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:390px){.stage-fullscreen-button span{display:none}.stage-fullscreen-button{width:40px;padding:0}}
@media(max-width:650px){.certificate-card{max-height:calc(100dvh - max(24px,env(safe-area-inset-bottom,0px)));padding:6px}.certificate-paper{padding:24px 16px}.certificate-stripes{margin:-8px -4px 20px}.certificate-stats{grid-template-columns:repeat(2,1fr);margin:1.2rem 0}.certificate-stats div:nth-child(2){border-right:0}.certificate-stats div:nth-child(-n+2){border-bottom:1px solid #c9a96f}.certificate-footer{grid-template-columns:1fr 82px 1fr;gap:8px}.certificate-seal{width:76px;height:76px;font-size:1.4rem}.certificate-actions{grid-template-columns:1fr}.certificate-actions button{min-height:48px}}
@media(max-height:620px) and (orientation:landscape){html,body{height:100%;height:100dvh;overflow:hidden}body{padding:0}.game-shell{width:100%;height:100dvh;min-height:0;border-radius:0;display:grid;grid-template-rows:46px auto minmax(0,1fr) auto;align-content:stretch}.focus-mode .game-shell{height:100dvh;min-height:0;grid-template-rows:minmax(0,1fr) auto;align-content:stretch}.topbar{height:46px}.brand-mark{width:32px;height:32px}.brand small{display:none}.icon-button{width:34px;height:34px}.status-strip{min-height:46px}.status-strip>div{padding:5px 12px}.status-stat strong{font-size:.95rem}.site-title strong{font-size:.85rem}.game-stage{width:min(100%,calc((100dvh - 176px)*1.7778));height:auto;min-height:0;aspect-ratio:16/9;justify-self:center;align-self:center}.focus-mode .game-stage{width:min(100%,calc((100dvh - 84px)*1.7778));height:auto;aspect-ratio:16/9}.tool-dock{min-height:84px;padding-bottom:max(4px,env(safe-area-inset-bottom,0px))}.tool-scroll{padding:7px;grid-template-columns:repeat(5,1fr)}.tool{padding:5px;grid-template-columns:35px 1fr}.tool img{width:35px;height:35px}.tool small{display:none}.mission-card{padding:8px 12px}.mission-card p{font-size:.68rem}.start-card{grid-template-columns:.75fr 1.25fr;overflow-y:auto}.modal-art{min-height:calc(100dvh - 36px);max-height:none}.modal-copy{padding:24px}.modal-copy h1{font-size:3.1rem}.modal-copy>p:not(.eyebrow){margin:.8rem 0}.start-stats{margin-bottom:.8rem}.start-stats div{padding:8px}.stars{font-size:2.6rem}}
.certificate-actions{grid-template-columns:repeat(3,1fr)}
@media(max-width:650px){.certificate-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media print{body{background:#fff!important;padding:0!important}body>*{display:none!important}#certificateModal{display:block!important;position:static!important;padding:0!important;background:#fff!important;backdrop-filter:none!important}#certificateModal .certificate-card{display:block!important;width:100%!important;max-height:none!important;overflow:visible!important;padding:0!important;border:0!important;box-shadow:none!important;background:#fff!important}#certificateModal .certificate-paper{box-shadow:none!important;min-height:96vh!important}#certificateModal .certificate-actions{display:none!important}}
