*{box-sizing:border-box}body{margin:0;min-height:100svh;background:var(--color-subtle);color:var(--color-ink);display:grid;place-items:center;padding:28px;font-family:Pretendard}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid var(--color-ink);outline-offset:5px}[hidden]{display:none!important}.title-console{width:min(1320px,100%);border:3px solid var(--color-ink);box-shadow:7px 7px 0 var(--color-ink);background:var(--color-paper);overflow:hidden}.console-header{height:61px;border-bottom:2px solid var(--color-ink);display:flex;align-items:center;justify-content:space-between;padding:0 27px;gap:15px;background:var(--color-surface)}.tiny-brand{font-size:12px;font-weight:800;display:flex;align-items:center;gap:9px}.tiny-brand i{width:11px;height:11px;background:var(--color-electric);box-shadow:3px 3px 0 var(--color-ink);border:2px solid var(--color-ink)}.console-header nav{display:flex;gap:4px}.console-header nav button{padding:7px 14px;border:0;background:var(--color-surface);color:var(--color-muted);font-size:11px;font-weight:700}.console-header nav button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-paper)}.mock-badge{font-size:10px;letter-spacing:1px;font-weight:800}.title-scene{height:690px;min-height:540px;position:relative;isolation:isolate;overflow:hidden}.field-dots{position:absolute;inset:0;pointer-events:none}.field-dots i{position:absolute;width:3px;height:3px;background:var(--color-metal);opacity:.45}.title-center{position:absolute;top:49%;left:50%;transform:translate(-50%,-50%);text-align:center;width:470px;z-index:2;pointer-events:none}.title-center>*{pointer-events:auto}.title-kicker{font-size:12px;font-weight:800;letter-spacing:1px;margin:0 0 20px;display:flex;justify-content:center;align-items:center;gap:12px}.title-kicker>span{width:20px;height:2px;background:var(--color-ink)}h1{font-size:112px;line-height:.96;letter-spacing:-9px;font-weight:950;margin:0;transform:rotate(-3deg);text-shadow:5px 5px 0 var(--color-electric)}h1>span{display:inline-block;font-size:128px;position:relative}.question-mark{color:var(--color-fighting);display:inline-block;transform:rotate(8deg);margin-left:3px;text-shadow:4px 4px 0 var(--color-ink)}.title-sub{font-size:14px;font-weight:500;line-height:1.9;margin:27px 0 24px;color:var(--color-muted)}.start-button{margin:auto;display:flex;align-items:center;justify-content:space-between;gap:42px;background:var(--color-ink);color:var(--color-paper);border:2px solid var(--color-ink);padding:16px 20px;min-width:256px;font-size:17px;font-weight:800;box-shadow:4px 4px 0 var(--color-electric);transition:transform .12s}.start-button:hover{transform:translate(-2px,-2px)}.start-button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--color-electric)}.start-key{border:1px solid var(--color-muted);font-size:9px;letter-spacing:1px;padding:4px 5px;color:var(--color-metal)}.start-note{display:block;font-size:10px;color:var(--color-muted);margin-top:15px}.weapon-field{position:absolute;inset:0;z-index:1}.floating-weapon{position:absolute;left:var(--x);top:var(--y);border:0;padding:0;background:var(--color-paper);transform:translate(-50%,-50%) rotate(var(--angle));animation:weapon-bob var(--speed) steps(8) infinite;animation-delay:var(--delay);isolation:isolate}.floating-weapon canvas{width:var(--size);height:var(--size);image-rendering:pixelated;display:block;transition:scale .15s}.floating-weapon:after{content:'';position:absolute;width:58%;height:8px;background:var(--color-subtle);left:21%;bottom:-14px;z-index:-1;transform:skewX(-30deg)}.floating-weapon .weapon-label{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(calc(-1 * var(--angle)));margin-top:22px;white-space:nowrap;font-size:11px;font-weight:800;padding:5px 8px;background:var(--color-ink);color:var(--color-paper);opacity:0;transition:opacity .15s}.floating-weapon:hover canvas,.floating-weapon:focus-visible canvas{scale:1.14}.floating-weapon:hover .weapon-label,.floating-weapon:focus-visible .weapon-label{opacity:1}.floating-weapon.popped{animation:weapon-pop .35s steps(5)}.field-caption{position:absolute;font-size:14px;font-weight:800;color:var(--color-muted);z-index:0;letter-spacing:-.5px}.caption-left{left:13%;bottom:15%;transform:rotate(-10deg)}.caption-right{right:11%;top:19%;transform:rotate(12deg)}.scene-corner{position:absolute;width:22px;height:22px;border-color:var(--color-metal);border-style:solid;opacity:.7}.top-left{top:22px;left:22px;border-width:2px 0 0 2px}.bottom-right{bottom:22px;right:22px;border-width:0 2px 2px 0}.console-footer{min-height:45px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 23px;border-top:2px solid var(--color-ink);font-size:10px;font-weight:700;background:var(--color-surface)}.console-footer>span:first-child{display:flex;align-items:center;gap:7px}.status-dot{width:6px;height:6px;background:var(--color-nature)}.console-footer small{font-size:9px;color:var(--color-muted)}#preview-note{letter-spacing:1.5px;font-size:9px;color:var(--color-muted)}
.loading-scene{min-height:690px;text-align:center;padding:40px 24px 26px;position:relative}.loading-eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--color-muted)}.loading-scene h2{font-size:35px;line-height:1.2;letter-spacing:-1.7px;margin:15px 0 0;font-weight:900}.loading-art{height:175px;width:260px;margin:10px auto 16px;position:relative;display:grid;place-items:center}.loading-art canvas{width:122px;height:122px;image-rendering:pixelated;animation:loading-bob 1.8s steps(8) infinite;position:relative;z-index:1}.art-ground{position:absolute;bottom:25px;width:112px;height:10px;background:var(--color-subtle);transform:skewX(-30deg)}.loading-art-label{position:absolute;bottom:0;font-size:10px;font-weight:700;color:var(--color-muted)}.orbit-pixel{position:absolute;background:var(--color-electric);border:2px solid var(--color-ink);width:10px;height:10px;animation:pixel-tick 1.8s steps(3) infinite}.orbit-one{left:39px;top:45px;rotate:20deg}.orbit-two{right:27px;top:74px;width:7px;height:7px;animation-delay:-.6s}.orbit-three{right:66px;top:20px;width:6px;height:6px;animation-delay:-1.2s}.loading-progress{max-width:480px;margin:auto}.progress-copy{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;font-size:12px;font-weight:700;min-height:30px}.progress-copy strong{font-size:26px;letter-spacing:-1px;min-width:68px;text-align:right;font-variant-numeric:tabular-nums}.progress-copy strong span{font-size:12px;margin-left:3px}.loading-track{height:18px;border:2px solid var(--color-ink);padding:3px;background:var(--color-surface)}#loading-fill{height:100%;width:0;background:var(--color-electric);transition:width .2s steps(3)}.loading-stages{display:flex;justify-content:space-between;list-style:none;margin:11px 0 0;padding:0;font-size:10px;color:var(--color-normal)}.loading-stages li.active{font-weight:800;color:var(--color-ink)}.loading-stages li.complete{color:var(--color-muted)}.loading-stages li.active:before{content:'';display:inline-block;width:5px;height:5px;background:var(--color-ink);margin-right:5px}.skill-reveal{display:flex;max-width:480px;margin:27px auto 18px;gap:10px}.skill-reveal>div{width:25%;border:2px solid var(--color-subtle);background:var(--color-paper);padding:10px 4px 8px;position:relative;opacity:.38;transition:opacity .25s,border-color .25s}.skill-reveal canvas{width:40px;height:40px;image-rendering:pixelated;display:block;margin:0 auto 8px;filter:grayscale(1)}.skill-reveal span{font-size:10px;font-weight:700;display:block}.skill-reveal small{position:absolute;top:5px;left:5px;font-size:8px;color:var(--color-normal)}.skill-reveal>div.ready{opacity:1;border-color:var(--skill-color)}.skill-reveal>div.ready canvas{filter:none;animation:weapon-pop .4s steps(5)}.loading-tip{font-size:9px;color:var(--color-muted);font-weight:800;letter-spacing:1px}.loading-tip span{font-size:11px;letter-spacing:0;font-weight:500;margin-left:7px}.loading-back{border:0;border-bottom:1px solid var(--color-metal);background:var(--color-paper);font-size:10px;padding:5px 0;margin-top:10px;color:var(--color-muted)}
@keyframes weapon-bob{0%,100%{translate:0 0}50%{translate:0 -9px}}@keyframes weapon-pop{0%{scale:1}40%{scale:1.15}100%{scale:1}}@keyframes loading-bob{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-10px) rotate(6deg)}}@keyframes pixel-tick{0%,100%{translate:0 0;opacity:1}50%{translate:0 -9px;opacity:.3}}
.console-header nav a{font-size:11px;font-weight:700;text-decoration:none;color:var(--color-ink);padding:8px 12px;border-bottom:2px solid var(--color-ink)}
@media(min-width:1500px){.title-scene{height:740px}.loading-scene{min-height:740px;padding-top:55px}}@media(max-width:850px){body{padding:14px}.console-header{padding:0 16px}.mock-badge{display:none}.title-scene{height:680px}.title-center{width:360px}h1{font-size:94px}h1>span{font-size:108px}.floating-weapon canvas{width:calc(var(--size) * .75);height:calc(var(--size) * .75)}.title-sub{font-size:12px}.field-caption{display:none}.console-footer>span:first-child{font-size:9px}#preview-note{display:none}}@media(max-width:540px){body{padding:0}.title-console{border-width:0;box-shadow:none;min-height:100svh}.console-header{height:54px;padding:0 14px}.tiny-brand{font-size:10px}.console-header nav button{font-size:10px;padding:7px 9px}.title-scene{height:calc(100svh - 99px);min-height:680px}.title-center{top:49%;width:290px}h1{font-size:83px;letter-spacing:-6px}h1>span{font-size:96px}.title-kicker{font-size:10px;gap:7px}.title-kicker>span{width:12px}.title-sub{font-size:11px;margin:22px 0}.start-button{font-size:15px;min-width:225px;padding:14px 18px}.floating-weapon canvas{width:calc(var(--size) * .55);height:calc(var(--size) * .55)}.floating-weapon{left:var(--mobile-x);top:var(--mobile-y)}.floating-weapon .weapon-label{font-size:9px;margin-top:12px}.console-footer{padding:12px;font-size:9px}.console-footer small{font-size:8px}.loading-scene{min-height:calc(100svh - 99px);padding:40px 20px 22px}.loading-scene h2{font-size:32px}.skill-reveal{gap:5px}.skill-reveal span{font-size:9px}.loading-progress{margin-top:12px}.loading-tip span{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Keep captions clear of the fish and bottom-edge weapon. */
.caption-right{top:8%;right:8%}
.floating-weapon:hover,.floating-weapon:focus-visible{z-index:3}
.floating-weapon[data-label-side="above"] .weapon-label{left:100%;top:50%;transform:translateY(-50%) rotate(calc(-1 * var(--angle)));margin-top:0;margin-left:14px}