:root{--ink:#123d49;--paper:#f7f0e5;--cream:#fffaf1;--accent:#b95467;--gold:#e4b75b;--danger:#a62d46}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:ui-rounded,"Avenir Next",system-ui,-apple-system,sans-serif}body{overscroll-behavior-y:none}.screen{display:none;min-height:100svh;position:relative}.screen.active{display:flex}.card{background:#fffdf8;border:1px solid #153d4917;border-radius:28px;box-shadow:0 22px 70px #123d4922}.start-card,.loading-card,.end-card{width:min(820px,92vw);padding:clamp(26px,5vw,56px);margin:auto;text-align:center}.eyebrow,.build,.step-label{font-size:.75rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.build{display:inline-block;padding:5px 10px;border:2px solid var(--ink);border-radius:999px;margin:8px}.start-card h1{font-size:clamp(2.4rem,8vw,5.5rem);line-height:.9;margin:.25em 0 .16em}.start-card h2{margin:.35em 0 .15em}.tagline{font-size:1.25rem}.step-label{margin-top:20px}.chooser{display:flex;gap:12px;justify-content:center;margin:14px 0 24px;flex-wrap:wrap}.difficulty-chooser{gap:9px}.choice,.primary,.secondary{appearance:none;border-radius:999px;font-weight:900;letter-spacing:.04em;cursor:pointer;min-height:48px}.choice{padding:13px 22px;background:#ece6dc;color:var(--ink);border:3px solid transparent}.difficulty-choice{min-width:112px}.choice.selected{background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px #123d4918,0 6px 18px #123d4920}.choice:focus-visible,.primary:focus-visible,.secondary:focus-visible{outline:4px solid #e4b75b;outline-offset:3px}.primary{border:0;padding:16px 28px;background:var(--ink);color:white;font-size:1rem}.primary:disabled{background:#c9c3ba;color:#6b6863;cursor:not-allowed}.secondary{padding:10px 16px;background:#fff;border:2px solid var(--ink);color:var(--ink)}.setup-button{margin-top:12px}.startup-error{color:var(--danger);font-weight:800}
.loading-screen{z-index:200;background:var(--paper)}.loading-card h2{font-size:clamp(1.8rem,5vw,3.1rem)}.load-track{height:20px;background:#e7ded0;border:2px solid #123d4920;border-radius:999px;overflow:hidden;margin:24px 0 10px}.load-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#63a99f,var(--gold),var(--accent));transition:width .12s}.loading-card strong{font-size:1.65rem}
.game-screen{flex-direction:column;min-height:100svh}.hud{position:sticky;top:0;z-index:80;display:grid;grid-template-columns:repeat(4,minmax(74px,1fr)) minmax(185px,1.35fr);gap:8px;padding:8px 12px;background:#fffaf2f5;border-bottom:1px solid #153d491c}.hud>div{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px}.hud span{font-size:.62rem;font-weight:900;letter-spacing:.1em}.hud strong{font-size:.95rem}.kraken-hud .meter{width:min(150px,42%);height:10px;background:#ddded8;border-radius:999px;overflow:hidden}.kraken-hud i{display:block;height:100%;width:0;background:linear-gradient(90deg,#58a890,#e0b34d,#b32847);transition:width .25s}.promptbar{z-index:60;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 12px;background:#f7f0e5;border-bottom:1px solid #153d4914;min-height:66px}.promptbar #instruction{font-weight:800;text-align:center;max-width:780px}.promptbar #instruction strong{display:block;font-size:1.02rem}.promptbar #instruction span{display:block;font-size:.82rem;opacity:.74;margin-top:5px}.stage-shell{width:100%;padding:12px;display:flex;justify-content:center}.arena{position:relative;width:min(1180px,100%);aspect-ratio:16/9;overflow:hidden;border-radius:22px;background:#d9b98c;box-shadow:0 12px 36px #123d4922;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.arena img{user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:none}.layer{position:absolute;display:block}.room-layer{inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.sheet-layer{left:23%;top:42%;width:62%;height:45%;object-fit:fill;z-index:4;filter:drop-shadow(0 10px 10px #0004)}.kraken-layer{left:32%;top:47%;width:45%;height:35%;object-fit:contain;z-index:5;opacity:0;mix-blend-mode:multiply;transition:opacity .28s}.character-layer{left:3%;bottom:5%;width:27%;height:72%;object-fit:contain;object-position:left bottom;z-index:7;filter:drop-shadow(0 8px 10px #0003)}.corner{position:absolute;width:72px;height:72px;border-radius:50%;border:0;background:transparent;transform:translate(-50%,-50%);z-index:20;touch-action:none;padding:0}.corner::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;border:4px dashed #fff;background:#173d4930;box-shadow:0 0 0 3px #173d49aa;transition:width .18s,height .18s,box-shadow .18s,background .18s,border-color .18s}.corner.active::after{border-style:solid;background:#fff9;box-shadow:0 0 0 5px #173d49,0 0 25px #fff;animation:pulse .75s infinite alternate}.corner.target::after{border-style:solid;background:#f4d06fbb;box-shadow:0 0 0 5px #173d49,0 0 25px #f6d56d}.drop-zone{position:absolute;width:92px;height:92px;border-radius:50%;border:4px solid var(--ink);background:#fff6;transform:translate(-50%,-50%);z-index:15;display:none;transition:width .18s,height .18s,opacity .18s,border-width .18s}.drop-zone.show{display:block;animation:pulse .75s infinite alternate}
/* Difficulty alters visible cues, never the actual 72px interaction hitboxes. */
.arena[data-difficulty="normal"] .drop-zone{width:76px;height:76px;border-width:3px;background:#fff5}.arena[data-difficulty="normal"] .corner.target::after{width:29px;height:29px;box-shadow:0 0 0 4px #173d49,0 0 18px #f6d56d}
.arena[data-difficulty="hard"] .drop-zone{width:52px;height:52px;border-width:3px;background:#fff3;opacity:.88}.arena[data-difficulty="hard"] .corner.active::after,.arena[data-difficulty="hard"] .corner.target::after{width:29px;height:29px;box-shadow:0 0 0 4px #173d49}.arena[data-difficulty="hard"] .corner.target::after{background:#f5dc9a88}
.arena[data-difficulty="expert"] .drop-zone{width:38px;height:38px;border-width:2px;background:#fff2;opacity:.58}.arena[data-difficulty="expert"] .corner.active::after,.arena[data-difficulty="expert"] .corner.target::after{width:28px;height:28px;background:#ffffff78;box-shadow:0 0 0 3px #173d49aa}.arena[data-difficulty="expert"] .corner.target::after{background:#f7ecd078}
.guide{display:none;position:absolute;z-index:25;pointer-events:none;transform:translate(-50%,-50%)}.guide.show{display:block}.guide span{display:block;width:96px;height:4px;background:var(--ink);border-radius:999px;box-shadow:0 0 0 4px #fff8}.guide b{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:4px 8px;border-radius:999px;font-size:.6rem}.toast{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%) translateY(10px);z-index:30;background:#123d49e8;color:#fff;border-radius:999px;padding:9px 16px;font-weight:900;opacity:0;transition:.2s;pointer-events:none;max-width:86%;text-align:center}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.arena.failure .sheet-layer{animation:jerk .35s ease}.arena.failure .character-layer{animation:flinch .35s ease}.controls{display:flex;justify-content:center;padding:0 12px 14px}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.results div{background:#f4eee4;border-radius:18px;padding:14px}.results span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.results strong{font-size:1.2rem}.rating{font-weight:1000;font-size:1.5rem}.confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none}.confetti:empty{display:none}.confetti i{position:absolute;left:var(--x);top:-15px;width:9px;height:15px;background:var(--c);animation:fall var(--d) linear var(--delay) infinite}
.defeat-screen{background:#24191d;align-items:center;justify-content:center;overflow:hidden}.defeat-visual{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#24191d}.defeat-visual img{width:100%;height:100%;object-fit:cover;filter:saturate(1.12) contrast(1.08);animation:krakenPush 2.15s ease-out both}.defeat-shade{position:absolute;inset:0;background:radial-gradient(circle at 56% 44%,transparent 12%,#1a0d14aa 72%,#12080de8 100%)}.defeat-copy{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);width:min(92%,900px);text-align:center;color:#fffaf1;font-size:clamp(2.2rem,8vw,6.8rem);font-weight:1000;letter-spacing:.04em;line-height:.9;text-shadow:0 5px 22px #000,0 0 3px #000;animation:defeatText .48s .25s ease both}
@keyframes pulse{to{transform:translate(-50%,-50%) scale(1.15)}}@keyframes jerk{35%{transform:translate(-1.5%,1%) rotate(-1deg)}70%{transform:translate(1%,-1%) rotate(1deg)}}@keyframes flinch{50%{transform:translateX(-1.5%) rotate(-1deg)}}@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}@keyframes krakenPush{from{transform:scale(1.02)}to{transform:scale(1.16)}}@keyframes defeatText{from{opacity:0;transform:translate(-50%,18px) scale(.92)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.promptbar #hintBtn[hidden]{display:none}.arena.resist .sheet-layer{animation:resist .58s ease-in-out}.arena.catastrophe .sheet-layer{animation:catastrophe-sheet .55s ease-in-out both;filter:drop-shadow(0 12px 16px #0006)}.arena.catastrophe .character-layer{animation:catastrophe-folder .55s ease-in-out both}.arena.catastrophe .kraken-layer{opacity:.96!important;filter:drop-shadow(0 10px 18px #6b122b88)}
@keyframes resist{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-.6%,.25%) rotate(-.35deg)}65%{transform:translate(.55%,-.2%) rotate(.3deg)}}
@keyframes catastrophe-sheet{0%{transform:none}45%{transform:scale(1.015) rotate(-.5deg)}100%{transform:scale(1.01) rotate(.25deg)}}
@keyframes catastrophe-folder{0%{transform:none}55%{transform:translateY(-1.3%) rotate(-1deg)}100%{transform:translateY(-.5%) rotate(.4deg)}}
@media(max-width:760px){.hud{grid-template-columns:repeat(2,1fr);position:relative}.kraken-hud{grid-column:1/-1}.promptbar{flex-direction:column;gap:7px}.stage-shell{padding:6px}.arena{border-radius:14px}.character-layer{width:30%;height:68%}.sheet-layer{left:22%;top:43%;width:66%;height:44%}.corner{width:62px;height:62px}.results{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.start-card,.loading-card,.end-card{width:96vw;padding:22px 18px}.choice{width:100%}.difficulty-choice{width:calc(50% - 6px);min-width:0}.hud{font-size:.9rem}.promptbar #instruction strong{font-size:.92rem}.promptbar #instruction span{font-size:.76rem}.stage-shell{padding:4px}.arena{width:100%}.character-layer{left:1%;width:32%}.sheet-layer{left:21%;width:69%}.corner::after{width:26px;height:26px}.results{grid-template-columns:1fr 1fr}.defeat-copy{bottom:15%}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}