:root{--ink:#0a0c14;--cyan:#4ea4d8;--cyan-deep:#3459a1;--cyan-frame:#49a7ce;--cyan-hi:#78c8ef;--peach:#cc9968;--peach-hi:#dababb;--peach-lo:#a47551;--peach-shadow:#573717;--alert:#cf766d;--alert-hi:#e8a098;--alert-ink:#1a1010;--hex-green:#4eff8a;--hex-bg:#062818;--prof:#4e9673;--prof-hi:#6ec894;--prof-lo:#2a6848;--map-water:#131f5f;--map-land:#243878;--map-line:#68b0f8;--spidey-red:#e84840;--spidey-green:#40e878;--cream:#f0e8e0;--pixel:"Press Start 2P",monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;image-rendering:pixelated;margin:0;padding:0}html,body{overflow:hidden;color:var(--cream);font-family:var(--pixel);user-select:none;touch-action:none;background:radial-gradient(at 50% 10%,#2a4068 0%,#0000 55%),linear-gradient(#121828 0%,#080c14 100%);height:100%}.scanlines{pointer-events:none;position:fixed;z-index:60;background:repeating-linear-gradient(#ffffff08 0 1px,#0000 1px 3px);inset:0}.hidden{display:none!important}.screen{width:100%;min-height:100%}.peach-btn,.prof-btn,.btn-boot,.btn-ghost,.side-btn{font-family:var(--pixel);border:3px solid var(--ink);cursor:pointer}.peach-btn{background:linear-gradient(180deg,var(--peach-hi)0%,var(--peach)45%,var(--peach-lo)100%);color:var(--ink);box-shadow:inset 0 2px 0 #fff0dca6,inset 0 -3px 0 #5a301873,0 3px 0 var(--peach-shadow);letter-spacing:-.02em;padding:.55rem .25rem;font-size:.42rem}.peach-btn:active:not(.peach-btn--disabled){box-shadow:inset 0 2px 0 #5a301859,0 1px 0 var(--peach-shadow);transform:translateY(2px)}.peach-btn.active{background:linear-gradient(#ffe08a 0%,#e0a030 100%);box-shadow:inset 0 2px #fff2c0,inset 0 -2px #8a5010,0 3px #3a2008}.prof-btn{background:linear-gradient(180deg,var(--prof-hi)0%,var(--prof)50%,var(--prof-lo)100%);color:#061810;letter-spacing:-.02em;display:flex;flex-direction:column;align-items: center;gap:.25rem;padding:.55rem .25rem;font-size:.42rem;box-shadow:inset 0 2px #c8ffdc73,inset 0 -3px #143c2873,0 3px #1a4028}.prof-btn span{opacity:.8;font-size:.36rem}.prof-btn.active{background:linear-gradient(#b8ff80 0%,#58d040 100%);box-shadow:inset 0 2px #e0ffc0,inset 0 -2px #2a6818,0 3px #143010}.prof-btn:active{transform:translateY(2px)}.peach-btn--disabled{color:#303038;cursor:not-allowed;background:linear-gradient(#a8a098,#686058);box-shadow:inset 0 2px #dcdcdc4d,0 2px #303038}.peach-btn--quit{color:#fff0f0;background:linear-gradient(#f09090,#a03030)}.peach-btn span{display:block;opacity:.75;margin-top:.25rem;font-size:.38rem}.menu{display:grid;place-items: center;padding:1.25rem}.boot-panel{background:linear-gradient(180deg,var(--cyan)0%,var(--cyan-deep)100%);border:5px solid var(--ink);text-align:center;animation:boot-in .55s ease-out both;width:min(440px,100%);padding:1.2rem 1.1rem 1.1rem;box-shadow:inset 0 3px #ffffff59,inset 0 -4px #143c6480,0 12px #00000073}@keyframes boot-in{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:none}}.boot-face,.result-face,.spidey-face,.portrait--mask,.portrait--body{border:3px solid var(--ink);display:block;background:#1a1020;border-radius:50%;box-shadow:0 3px #00000059}.boot-face,.result-face{width:72px;height:72px;margin:0 auto .7rem}.boot-eyebrow{letter-spacing:.04em;color:#083050;margin-bottom:.65rem;font-size:.48rem;line-height:1.5}.logo{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.65rem}.logo-spidey{color:var(--spidey-red);text-shadow:3px 3px #4a1010;font-size:clamp(1.3rem,6vw,1.65rem)}.logo-tracker{color:#fff4e0;text-shadow:2px 2px #1a4060;font-size:clamp(.9rem,4.5vw,1.1rem)}.menu-sub{font-family:var(--pixel);color:#083050;margin-bottom:.9rem;font-size:.48rem;line-height:1.55}.boot-map-preview{position:relative;background:var(--map-water);border:3px solid var(--ink);overflow:hidden;height:110px;margin:0 auto .95rem}.preview-grid{position:absolute;background:linear-gradient(var(--map-line)1px,transparent 1px),linear-gradient(90deg,var(--map-line)1px,transparent 1px),var(--map-land);opacity:.95;background-size:14px 14px,14px 14px,auto;inset:10% 18%}.preview-ping{position:absolute;z-index:1;border:2px solid #111;border-radius:50%;width:16px;height:16px}.preview-ping--a{background:var(--spidey-red);animation:bob 1.4s ease-in-out infinite;top:38%;left:30%}.preview-ping--b{background:var(--spidey-green);animation:bob 1.4s ease-in-out infinite .3s;top:52%;right:28%}.preview-ping--you{animation:bob 1.1s ease-in-out infinite .15s;background:#ffe066;top:46%;left:48%;box-shadow:inset 0 0 0 4px #70d0ff}.preview-web{position:absolute;background:conic-gradient(from 0deg,transparent 0 10%,#dce6ff59 10% 11%,transparent 11% 100%);opacity:.7;border:2px solid #dce6ff73;border-radius:50%;width:42px;height:42px;bottom:8%;right:8%;box-shadow:inset 0 0 0 8px #0000,0 0 0 1px #dce6ff33}@keyframes bob{50%{transform:translateY(-3px)}}.profile-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-bottom:.85rem}.btn-boot{color:#fff8f0;background:linear-gradient(#ff8a4a 0%,#d04018 100%);width:100%;padding:.85rem .5rem;font-size:.65rem;box-shadow:inset 0 2px #ffc090,inset 0 -3px #8a2808,0 5px #3a1008}.btn-boot:active{transform:translateY(2px)}.best-line{color:#083050;margin-top:.65rem;font-size:.48rem}.how-line{color:#104060;margin-top:.4rem;font-size:.42rem;line-height:1.5}.game{display:flex;padding:env(safe-area-inset-top)env(safe-area-inset-right)env(safe-area-inset-bottom)env(safe-area-inset-left);justify-content:center;align-items:stretch}.device{width:min(560px,100%);height:100dvh;max-height:100dvh;padding:.45rem}.device-bezel{display:grid;grid-template-rows:1fr auto;background:linear-gradient(180deg,var(--cyan-hi)0%,var(--cyan)45%,var(--cyan-frame)100%);border:5px solid var(--ink);overflow:hidden;height:100%;box-shadow:inset 0 3px #fff6,inset 0 -3px #143c6459,0 0 0 3px #2a6088,0 8px #0006}.workspace{display:grid;grid-template-columns:52px 1fr;gap:.35rem;min-height:0;padding:.4rem .4rem .15rem}.sidebar{display:flex;flex-direction:column;gap:.35rem;padding-top:.15rem}.side-btn{aspect-ratio:1.05;clip-path:polygon(22% 0,78% 0,100% 50%,78% 100%,22% 100%,0 50%);background:linear-gradient(180deg,var(--peach-hi),var(--peach-lo));color:var(--ink);box-shadow:none;outline:2px solid var(--ink);outline-offset:-2px;border-width:0;font-size:.65rem}.side-btn.active{background:linear-gradient(#7aef9a,#2aaa50)}.side-btn:disabled{opacity:.45}.portrait{aspect-ratio:1;width:100%;margin-top:.15rem}.portrait--mask{margin-top:auto}.map-frame{position:relative;overflow:hidden;background:var(--map-water);border:3px solid var(--ink);box-shadow:inset 0 0 0 3px var(--cyan-hi),inset 0 0 0 5px #1a3a68,0 0 0 2px var(--cyan-frame);min-height:0}.map-ticks{pointer-events:none;position:absolute;z-index:2;opacity:.55}.map-ticks--x{background:repeating-linear-gradient(90deg,#d8e8ff 0 2px,#0000 2px 14px);height:8px;top:3px;left:8%;right:8%}.map-ticks--y{background:repeating-linear-gradient(#d8e8ff 0 2px,#0000 2px 14px);width:8px;top:8%;bottom:8%;left:3px}.map-bracket{pointer-events:none;position:absolute;z-index:2;border:2px solid #c8e6ff8c;width:28px;height:28px}.map-bracket--tl{border-bottom:none;border-right:none;top:10px;left:10px}.map-bracket--br{border-top:none;border-left:none;bottom:10px;right:10px}#mapCanvas{display:block;cursor:grab;width:100%;height:100%}#mapCanvas.dragging{cursor:grabbing}.hud-tl{position:absolute;display:flex;pointer-events:none;z-index:3;align-items: flex-start;gap:.35rem;top:.4rem;left:.4rem}.hud-globe{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);position:relative;background:#0a1830;border:none;width:36px;height:36px;box-shadow:0 0 0 2px #e6f0ffbf}.hud-globe:before{content:"";position:absolute;background:linear-gradient(90deg,#0000 48%,#e6f0ffb3 48% 52%,#0000 52%),linear-gradient(#0000 48%,#e6f0ffb3 48% 52%,#0000 52%),radial-gradient(circle,#0000 34%,#e6f0ff73 35% 38%,#0000 39%);inset:3px}.hud-globe:after{content:"";position:absolute;background:var(--spidey-red);border:2px solid #111;border-radius:50%;inset:10px;box-shadow:inset 4px 0 0 -1px #fff,inset -4px 0 0 -1px #fff}.hud-tl-text{display:flex;flex-direction:column;gap:.15rem}.hud-chip{color:#f0f6ff;text-shadow:1px 1px #000;font-size:.42rem}.hud-sub{color:#dcebffd9;text-shadow:1px 1px #000;letter-spacing:-.03em;font-size:.34rem}.hud-tools{display:block;opacity:.8;background:linear-gradient(#d8e8ff,#d8e8ff) 0 2px/10px 6px no-repeat,radial-gradient(circle at 22px 5px,#d8e8ff 0 3px,#0000 3.5px),linear-gradient(#d8e8ff,#d8e8ff) 34px 1px/3px 8px no-repeat,linear-gradient(#d8e8ff,#d8e8ff) 40px 3px/3px 6px no-repeat,linear-gradient(#d8e8ff,#d8e8ff) 46px 2px/3px 7px no-repeat;width:54px;height:10px;margin-top:.15rem}.hud-tr{position:absolute;display:flex;z-index:3;pointer-events:none;flex-direction:column;align-items: flex-end;gap:.25rem;top:.4rem;right:.4rem}.hex-readout{color:var(--hex-green);background:var(--hex-bg);letter-spacing:-.04em;border:3px solid #0a4020;padding:.35rem .4rem;font-size:.42rem;box-shadow:inset 0 0 0 1px #1a8040,0 2px #00000059}.status-row{display:flex;align-items: center;gap:.3rem}.hearts{display:flex;color:#102010;background:linear-gradient(#6ee88a,#2aa850);border:3px solid #0a3018;align-items: center;gap:.25rem;padding:.2rem .35rem .2rem .25rem;font-size:.55rem;box-shadow:inset 0 1px #ffffff59}.heart-icon{background:var(--spidey-red);clip-path:polygon(50% 100%,0 35%,18% 0,50% 18%,82% 0,100% 35%);position:relative;border:none;width:14px;height:12px}.spider-badge{background:var(--peach);border:3px solid var(--ink);box-shadow:0 2px 0 var(--peach-shadow);border-radius:2px;width:28px;height:28px}.alert-float{position:absolute;z-index:4;pointer-events:none;display:flex;flex-direction:column;align-items: center;gap:.2rem;width:min(92%,340px);top:18%;left:50%;transform:translate(-50%)}.alert-timers{display:flex;align-items: center;gap:.45rem}.timer{color:#f4f8ff;text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000;text-align:center;min-width:3.2rem;font-size:.55rem}.spidey-face{flex-shrink:0;width:48px;height:48px}.alert-banner{letter-spacing:-.01em;color:var(--alert-ink);background:linear-gradient(180deg,var(--alert-hi),var(--alert)40%,#c86858);border:3px solid var(--ink);text-align:center;width:100%;padding:.55rem .6rem;font-size:clamp(.38rem,1.7vw,.48rem);line-height:1.4;box-shadow:inset 0 2px #ffe6d273,0 4px #00000059}.alert-banner.hot{animation:alert-pulse .4s steps(2)infinite;box-shadow:inset 0 2px #ffe6d28c,0 0 16px #ff643c8c,0 4px #00000059}@keyframes alert-pulse{50%{filter:brightness(1.18)}}.web-radar{position:absolute;pointer-events:none;z-index:2;background:repeating-conic-gradient(from 0deg,#dce6ff66 0 1.5deg,transparent 1.5deg 45deg),radial-gradient(circle,transparent 22%,#dce6ff47 23% 25%,transparent 26%),radial-gradient(circle,transparent 48%,#dce6ff38 49% 51%,transparent 52%),radial-gradient(circle,transparent 72%,#dce6ff2e 73% 75%,transparent 76%);border:2px solid #dce6ff8c;border-radius:50%;width:96px;height:96px;bottom:.55rem;right:.55rem;box-shadow:0 0 14px #50a0ff40}.web-radar:before{content:"";position:absolute;border:1px solid #dce6ff4d;border-radius:50%;inset:14%}.web-radar:after{content:"";position:absolute;background:linear-gradient(#dce6ff59,#dce6ff59) 50%/2px 100% no-repeat,linear-gradient(#dce6ff59,#dce6ff59) 50%/100% 2px no-repeat;border-radius:50%;inset:0}.web-dot{position:absolute;border:1px solid #111;border-radius:50%;width:6px;height:6px}.web-dot--a{background:#a060ff;top:34%;left:28%}.web-dot--b{background:#40c0ff;top:42%;right:30%}.web-dot--c{background:#ff60b0;bottom:28%;left:48%}.web-dot--d{background:#70ff90;bottom:40%;right:38%}.map-hint{position:absolute;color:#c8e6ffbf;pointer-events:none;z-index:2;background:#081020b3;border:1px solid #78a0dc59;padding:.25rem .35rem;font-size:.38rem;bottom:.4rem;left:.4rem}.deck{position:relative;display:grid;grid-template-columns:auto 1fr 1fr 1fr auto;background:linear-gradient(180deg,var(--cyan-hi)0%,var(--cyan)40%,var(--cyan-frame)100%);border-top:3px solid var(--ink);gap:.35rem;padding:.45rem .5rem .55rem .4rem;box-shadow:inset 0 2px #ffffff47}.deck-mascot{border:3px solid var(--ink);background:#1a1028;border-radius:50%;align-self: end;width:44px;height:44px;box-shadow:0 3px #00000059}.deck-col--prof .prof-btn{width:100%}.leds .led{color:#fff0e0;background:#c85830}.leds .led--on{color:#8ef0a8;background:#1a6030}.deck-col{display:flex;flex-direction:column;gap:.3rem}.leds{display:flex;gap:.25rem;margin-bottom:.05rem}.led{color:#f0a0a8;background:#5a2030;border:2px solid #111;padding:.22rem .32rem;font-size:.36rem}.led--on{color:#8ef0a8;background:#1a6030}.deck-score{display:flex;border:3px solid var(--ink);background:#0a2038;flex-direction:column;justify-content:center;gap:.22rem;min-width:78px;padding:.25rem .35rem;box-shadow:inset 0 0 0 1px #2a5080}.deck-score .peach-btn{width:100%}.score-label{color:#7aa0c0;font-size:.36rem}.score-value{color:#ffe066;margin:.2rem 0;font-size:.7rem}.overlay{position:fixed;z-index:40;display:grid;backdrop-filter:blur(2px);background:#040812b8;place-items: center;padding:1rem;inset:0}.panel{background:linear-gradient(180deg,var(--cyan),var(--cyan-deep));border:5px solid var(--ink);text-align:center;width:min(380px,100%);padding:1.1rem;box-shadow:inset 0 2px #ffffff4d,0 10px #0006}.panel-eyebrow{color:#082040;margin-bottom:.65rem;font-size:.6rem;line-height:1.4}.panel-body{color:#082040;white-space:pre-wrap;margin-bottom:1rem;font-size:.5rem;line-height:1.55}.archive-list{list-style:none;text-align:left;overflow:auto;border:3px solid var(--ink);background:#0a1830;max-height:220px;margin-bottom:.9rem}.archive-list li{color:#b8d0e8;border-bottom:1px solid #1a3050;padding:.45rem .5rem;font-size:.4rem;line-height:1.5}.result-actions{display:flex;flex-direction:column;gap:.45rem}.btn-ghost{color:#083050;background:0 0;border-color:#083050;padding:.65rem;font-size:.48rem}.panel-close{font-size:.55rem}.sighting-overlay{z-index:50;background:#040812c7}.sighting-panel{border:5px solid var(--ink);text-align:center;transform-origin:center;background:linear-gradient(#f6d2a8,#e8b888);width:min(300px,92vw);padding:1rem .9rem .85rem;box-shadow:inset 0 2px #ffffff59,0 12px #00000073}.sighting-panel--villain{animation:sighting-pop .38s cubic-bezier(.2,1.4,.4,1)both,sighting-shake .45s ease-out .28s both;background:linear-gradient(#c85848,#8a2830)}.sighting-panel--spidey{animation:sighting-pop .42s cubic-bezier(.2,1.55,.35,1)both,sighting-bounce .9s ease-in-out .35s 2;background:linear-gradient(#4ec8f0,#1a6aa8)}.sighting-kicker{letter-spacing:.08em;color:#fff8e0;text-shadow:2px 2px #0a0a12;margin-bottom:.55rem;font-size:.42rem}.sighting-panel--villain .sighting-kicker{color:#ffe066}.sighting-art{image-rendering:pixelated;display:block;border:4px solid var(--ink);background:#08102059;width:140px;height:140px;margin:0 auto .55rem;box-shadow:inset 0 0 0 2px #ffffff1f}.sighting-panel--spidey .sighting-art{animation:web-spin 1.6s linear infinite}.sighting-name{color:#fff8e0;text-shadow:2px 2px #0a0a12;margin-bottom:.4rem;font-size:.55rem;line-height:1.35}.sighting-tag{color:#ffe8c8;min-height:2.2em;margin-bottom:.65rem;font-size:.38rem;line-height:1.5}.sighting-tap{color:#fff8e0b3;letter-spacing:.06em;font-size:.32rem}@keyframes sighting-pop{0%{transform:scale(.2)rotate(-8deg);opacity:0}70%{transform:scale(1.08)rotate(2deg);opacity:1}to{transform:scale(1)rotate(0);opacity:1}}@keyframes sighting-shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)rotate(-2deg)}40%{transform:translate(8px)rotate(2deg)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}@keyframes sighting-bounce{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-10px)scale(1.03)}}@keyframes web-spin{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(25deg)}}@media (max-height:720px) and (orientation:portrait){.portrait--body{display:none}.alert-float{top:14%}.web-radar{width:64px;height:64px}.peach-btn{padding:.4rem .15rem;font-size:.38rem}}@media (min-width:700px) and (orientation:portrait){.device{height:calc(100dvh - 1rem);margin:.5rem 0}}@media (orientation:landscape) and (max-height:560px){.menu{align-items:stretch;padding:.5rem}.boot-panel{overflow:auto;display:grid;grid-template-columns:1fr 1.1fr;grid-template-areas:"face title" "face sub" "preview profiles" "preview boot" "best best";text-align:left;gap:.35rem .9rem;width:min(720px,100%);max-height:calc(100dvh - 1rem);padding:.75rem 1rem}.boot-face{grid-area:face;align-self: center;width:88px;height:88px;margin:0}.boot-eyebrow,.logo{grid-area:title;margin:0}.boot-eyebrow{margin-bottom:.25rem}.menu-sub{grid-area:sub;margin:0;font-size:.42rem}.boot-map-preview{grid-area:preview;height:100%;min-height:90px;margin:0}.profile-row{grid-area:profiles;margin:0}.btn-boot{grid-area:boot}.best-line,.how-line{grid-area:best;margin-top:.2rem}.how-line{display:none}.game{padding:0}.device{width:100%;max-width:none;height:100dvh;padding:.2rem}.device-bezel{grid-template-columns:minmax(0,1fr)minmax(168px,210px);grid-template-rows:1fr}.workspace{grid-template-columns:36px 1fr;gap:.25rem;min-height:0;padding:.25rem}.sidebar{gap:.25rem}.side-btn{box-shadow:inset 0 1px 0 #fff0dca6,0 2px 0 var(--peach-shadow);font-size:.55rem}.portrait--mask,.portrait--body{display:none}.map-frame{border-width:3px}.hud-tl,.hud-tr{top:.25rem}.hud-tl{left:.25rem}.hud-tr{right:.25rem}.hud-globe{width:26px;height:26px}.hud-sub,.hud-tools{display:none}.hex-readout{padding:.2rem .3rem;font-size:.36rem}.hearts{padding:.15rem .25rem;font-size:.45rem}.spider-badge{width:22px;height:22px}.alert-float{width:min(70%,280px);top:10%}.spidey-face{width:34px;height:34px}.timer{min-width:2.6rem;font-size:.45rem}.alert-banner{padding:.35rem .4rem;font-size:.34rem}.web-radar{width:52px;height:52px;bottom:.3rem;right:.3rem}.map-hint{font-size:.32rem;bottom:.25rem;left:.25rem}.deck{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;border-top:none;border-left:3px solid var(--ink);overflow-y:auto;align-content: start;gap:.28rem;padding:.3rem}.deck-mascot{display:none}.deck-col{gap:.22rem}.deck-col--prof{grid-column:1/-1;display:grid;grid-template-columns:auto auto 1fr 1fr 1fr;align-items: center;gap:.22rem}.deck-col--prof .leds{display:contents}.peach-btn{box-shadow:inset 0 1px 0 #fff0dca6,0 2px 0 var(--peach-shadow);padding:.38rem .15rem;font-size:.34rem}.deck-score{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr 1fr 1fr auto;align-items: center;gap:.25rem;min-width:0;padding:.25rem .3rem}.score-label{display:none}.score-value{margin:0;font-size:.5rem}.deck-score .peach-btn{min-width:0;margin-top:0}.panel{overflow:auto;max-height:calc(100dvh - 1.5rem)}}@media (orientation:landscape) and (min-height:561px){.device{width:min(960px,100%);height:calc(100dvh - .75rem);margin:.35rem 0;padding:.35rem}.workspace{grid-template-columns:48px 1fr}}