:root{--bg:#080031;--bg-deep:#05001d;--panel:#550061;--panel-strong:#7b0017;--pink:#b60057;--hot:#cd203a;--orange:#f05e23;--amber:#ff8a3f;--violet:#af4dbd;--cyan:#41d7ff;--white:#fff;--soft:#ffd9ef;color:var(--white);background:var(--bg);font-synthesis:none;text-rendering:geometricprecision;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;font-family:Impact,Haettenschweiler,Arial Black,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:radial-gradient(circle at 20% 0%, #af4dbd52, transparent 32rem), radial-gradient(circle at 80% 100%, #f05e2338, transparent 30rem), var(--bg);margin:0;overflow:hidden}button{font:inherit}.app-shell{place-items:center;min-height:100svh;padding:clamp(10px,2vw,24px);display:grid}.game-frame{aspect-ratio:16/9;background:var(--bg-deep);width:min(100%,1180px);min-height:min(100svh - 24px,420px);max-height:calc(100svh - 24px);image-rendering:pixelated;border:3px solid #af4dbde6;position:relative;overflow:hidden;box-shadow:0 30px 80px #00000061,inset 0 0 0 2px #ffffff14}.phaser-stage,.phaser-stage canvas{width:100%;height:100%;position:absolute;inset:0}.phaser-stage canvas{display:block}.brand-lockup{z-index:3;pointer-events:none;align-items:center;gap:clamp(12px,2.5vw,28px);width:min(86%,760px);transition:opacity .18s,transform .18s;display:flex;position:absolute;top:7%;left:50%;transform:translate(-50%)}.brand-lockup[aria-hidden=true]{opacity:0;transform:translate(-50%,-16px)}.brand-lockup img{filter:drop-shadow(0 12px #00000047);width:clamp(78px,13vw,150px);height:auto}.brand-lockup p,.brand-lockup h1{letter-spacing:0;text-shadow:0 6px #b60057,6px 6px #550061,-3px 0 #550061;margin:0;line-height:.92}.brand-lockup p{color:var(--hot);margin-bottom:10px;font-size:clamp(14px,2.2vw,28px)}.brand-lockup h1{color:var(--white);font-size:clamp(44px,9vw,108px)}.hud{z-index:5;pointer-events:none;grid-template-columns:auto minmax(140px,1fr) auto auto;align-items:start;gap:clamp(8px,1.5vw,16px);display:grid;position:absolute;inset:clamp(12px,2vw,24px) clamp(12px,2vw,24px) auto}.hud-panel,.element-card{background:#550061d6;border:2px solid #ffffffd9;min-height:68px;box-shadow:8px 8px #05001d8c}.hud-panel{min-width:96px;padding:10px 14px;display:grid}.hud-label{color:var(--soft);font-size:12px;line-height:1}.hud strong{color:var(--white);letter-spacing:0;text-shadow:0 4px 0 var(--pink);font-size:clamp(26px,5vw,48px);line-height:.9}.element-card{justify-self:center;align-items:center;gap:12px;min-width:min(100%,300px);padding:8px 16px 8px 10px;display:flex}.element-card img{object-fit:contain;filter:drop-shadow(0 5px #00000059);width:58px;height:58px}.element-card span,.element-card p{color:var(--soft);margin:0;font-size:11px;line-height:1;display:block}.element-card strong{margin:2px 0 4px;font-size:clamp(28px,4vw,42px);display:block}.status-panel{grid-template-columns:auto auto;align-items:center;gap:2px 10px}.status-panel .hud-label{grid-column:1/-1}.shield-readout{color:var(--soft);align-items:center;gap:4px;font-size:16px;display:inline-flex}.shield-readout img{object-fit:contain;width:28px;height:28px}.best-panel small{color:var(--amber);font-size:16px}.center-overlay{z-index:6;background:linear-gradient(180deg, #7b0017db, #550061e6), var(--panel);text-align:center;border:3px solid #ffffffe0;place-items:center;width:min(90%,580px);padding:clamp(18px,3vw,34px);display:grid;position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);box-shadow:14px 14px #05001d9e,inset 0 0 0 3px #ff8a3f47}.instruction-row{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px;display:flex}.mobile-title{color:var(--white);letter-spacing:0;text-shadow:0 5px #b60057,4px 4px #550061;margin:0 0 14px;font-size:clamp(34px,11vw,54px);line-height:.92;display:none}.instruction-row span{border:2px solid var(--violet);min-height:32px;color:var(--soft);background:#080031c7;align-items:center;padding:6px 10px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(10px,1.4vw,13px);line-height:1.15;display:inline-flex}.image-button,.pixel-button{min-width:172px;min-height:64px;color:var(--white);cursor:pointer;image-rendering:pixelated;background:0 0;border:0;place-items:center;transition:transform .14s,filter .14s;display:inline-grid}.image-button:hover,.pixel-button:hover{filter:brightness(1.12);transform:translateY(-3px)}.image-button:focus-visible,.pixel-button:focus-visible{outline:3px solid var(--cyan);outline-offset:6px}.image-button img{filter:drop-shadow(0 10px #00000059);width:min(260px,60vw);height:auto}.pixel-button{border:3px solid var(--soft);text-shadow:0 3px #550061;background:linear-gradient(#cd203a 0%,#7b0017 100%);padding:14px 24px;font-size:clamp(22px,3vw,32px);line-height:1;box-shadow:6px 6px #080031,inset 0 0 0 3px #ffffff2e}.session-code,.best-copy,.attempt-overlay p{color:var(--soft);margin:12px 0 0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(12px,1.8vw,16px)}.result-medal{justify-content:center;align-items:center;gap:18px;width:100%;margin-bottom:18px;display:flex}.result-medal img{object-fit:contain;filter:drop-shadow(0 8px #00000052);width:clamp(82px,16vw,142px);height:clamp(82px,16vw,142px)}.result-medal div{text-align:left}.result-medal span{color:var(--amber);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px}.result-medal strong{color:var(--white);text-shadow:0 6px 0 var(--pink);font-size:clamp(54px,9vw,92px);line-height:.9;display:block}.result-medal p{color:var(--soft);margin:6px 0 0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.result-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;margin:0 0 22px;display:grid}.result-grid div{background:#0800318c;border:2px solid #ffffffb8;padding:12px}.result-grid dt,.result-grid dd{margin:0}.result-grid dt{color:var(--soft);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}.result-grid dd{color:var(--white);font-size:clamp(24px,4vw,42px);line-height:1}@media (width<=760px){body{overflow:auto}.app-shell{min-height:100svh;padding:0}.game-frame{aspect-ratio:auto;border:0;width:100vw;min-height:100svh;max-height:none}.hud{grid-template-columns:1fr auto;align-items:stretch}.element-card{order:3;grid-column:1/-1;justify-self:stretch}.brand-lockup,.best-panel{display:none}.center-overlay{width:calc(100% - 24px);top:57%}.mobile-title{display:block}.result-grid{grid-template-columns:1fr}}