:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f8fbff; background: #030611; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 12% 10%, rgba(22, 218, 255, .14), transparent 28rem), radial-gradient(circle at 90% 14%, rgba(170, 67, 255, .14), transparent 31rem), linear-gradient(145deg, #040816, #090c1f 58%, #03050d); }
button { font: inherit; }
.game-shell { width: min(1040px, 100%); margin: 0 auto; padding: clamp(14px, 3vw, 30px); }
.game-header, .score-strip, footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-lockup img { width:50px; height:50px; object-fit:contain; filter:drop-shadow(0 0 18px rgba(82,221,255,.25)); }
.brand-lockup h1 { margin: -1px 0 0; font-size: clamp(1.3rem, 4vw, 2rem); font-style: italic; letter-spacing: .13em; }
.eyebrow, .panel-tag { color: #72eaff; font-size: .65rem; font-weight: 900; letter-spacing: .2em; }
.utility-button { padding: 9px 13px; border: 1px solid rgba(113,222,255,.3); border-radius: 9px; color: #d9faff; background: rgba(8,16,36,.76); font-size: .7rem; font-weight: 900; letter-spacing: .09em; cursor: pointer; }
.utility-button[aria-pressed="false"] { color: #7e899f; border-color: rgba(126,137,159,.22); }
.score-strip { margin: 18px 0 12px; padding: 12px clamp(10px,2vw,24px); border: 1px solid rgba(106,222,255,.17); border-radius: 14px; background: rgba(7,12,30,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.score-strip div { display: grid; min-width: 68px; text-align: center; }
.score-strip span { color: #7e8ca4; font-size: .59rem; font-weight: 850; letter-spacing: .15em; }
.score-strip strong { margin-top: 2px; font-size: clamp(1.05rem,3vw,1.65rem); font-variant-numeric: tabular-nums; }
.puzzle-shell { position: relative; overflow: hidden; min-height: 650px; border: 1px solid rgba(89,217,255,.27); border-radius: 22px; background: radial-gradient(circle at 50% 45%, rgba(63,85,169,.16), transparent 52%), linear-gradient(145deg,#050a1b,#080a1b 62%,#040713); box-shadow: 0 28px 90px rgba(0,0,0,.48),0 0 52px rgba(35,185,255,.06); }
.puzzle-shell::before { content: ""; position: absolute; inset: 58px 0 0; opacity: .2; background: linear-gradient(rgba(104,225,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(104,225,255,.04) 1px,transparent 1px); background-size: 36px 36px; pointer-events: none; }
.puzzle-shell::after { content:""; position:absolute; inset:auto 6% 1%; height:28%; border:1px solid rgba(83,226,255,.12); border-radius:50%; background:radial-gradient(ellipse,rgba(65,109,215,.14),transparent 67%); transform:perspective(340px) rotateX(67deg); pointer-events:none; }
.map-environment { position:absolute; z-index:0; inset:58px 0 0; overflow:hidden; pointer-events:none; }
.radar { position:absolute; right:4%; top:5%; width:120px; height:120px; border:1px solid rgba(104,231,255,.13); border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 19px,rgba(102,228,255,.06) 20px 21px); opacity:.5; }
.radar::before,.radar::after { content:""; position:absolute; left:50%; top:50%; background:rgba(101,230,255,.2); transform:translate(-50%,-50%); }.radar::before { width:1px; height:100%; }.radar::after { width:100%; height:1px; }
.radar > i:first-child { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,rgba(85,234,255,.26),transparent 18%,transparent); animation:radarSweep 4.5s linear infinite; }.radar > i:nth-child(2) { position:absolute; left:26%; top:31%; width:5px; height:5px; border-radius:50%; background:#6ff3d8; box-shadow:0 0 11px #6ff3d8; animation:ping 1.5s ease-in-out infinite alternate; }.radar span { position:absolute; inset:42%; display:grid; place-items:center; color:rgba(150,245,255,.52); font:italic 900 .85rem Georgia,serif; }
.map-rail { position:absolute; left:4%; width:1px; height:31%; background:linear-gradient(transparent,rgba(104,232,255,.4),transparent); }.map-rail::before,.map-rail::after { content:""; position:absolute; left:-3px; width:7px; height:7px; border-radius:50%; background:#6ae9ff; box-shadow:0 0 10px #6ae9ff; }.map-rail::before { top:22%; }.map-rail::after { bottom:18%; }.rail-a { top:8%; }.rail-b { left:auto; right:4%; bottom:6%; transform:rotate(180deg); }
.mission-bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 9px; height: 58px; padding: 0 18px; border-bottom: 1px solid rgba(104,221,255,.16); color: #7989a1; background: rgba(7,13,30,.9); font-size: .72rem; }
.mission-bar strong { color: #eafaff; font-size: .67rem; letter-spacing: .11em; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #62f3c2; box-shadow: 0 0 14px #62f3c2; animation: pulse 1s ease-in-out infinite alternate; }
.board { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; width: min(610px,calc(100% - 32px)); margin: 22px auto; }
.cell { position: relative; display: grid; aspect-ratio: 1; place-items: center; border: 1px solid rgba(122,160,203,.2); border-radius: 14px; color: #7f8fa8; background: rgba(12,20,42,.84); cursor: pointer; transition: transform .12s ease,border-color .12s ease,background .12s ease; }
.cell:hover, .cell:focus-visible { z-index: 2; border-color: rgba(104,231,255,.65); outline: 2px solid rgba(104,231,255,.22); outline-offset: 2px; transform: translateY(-2px); }
.cell::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.025); border-radius: 8px; }
.cell.visited { border-color: rgba(97,235,255,.5); background: rgba(21,83,113,.48); }
.cell.current { border-color: #74ecff; background: linear-gradient(135deg,rgba(71,216,255,.35),rgba(119,73,255,.38)); box-shadow: 0 0 23px rgba(76,219,255,.25); }
.cell.trap { color: #ff6998; border-color: rgba(255,65,124,.28); background: rgba(59,12,38,.72); }
.cell.target { color: #06141b; border-color: #77f4d6; background: linear-gradient(135deg,#7cf5bc,#65eaff); box-shadow: 0 0 24px rgba(88,240,207,.2); }
.cell.boost { color: #281800; border-color: rgba(255,215,92,.72); background: #f6c956; }
.cell .symbol { position: relative; z-index: 1; font-size: clamp(.74rem,2.3vw,1.15rem); font-weight: 950; }
.cell .label { position: absolute; z-index: 1; inset: auto 3px 6px; overflow: hidden; font-size: .45rem; font-weight: 900; letter-spacing: .07em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.cell-art { position:relative; z-index:1; display:block; width:clamp(31px,5.4vw,54px); aspect-ratio:1; filter:drop-shadow(0 0 8px currentColor); }
.cell-art i { position:absolute; display:block; }
.route-node { color:#5c7fa7; opacity:.58; background:linear-gradient(currentColor,currentColor) 50% 50%/2px 72% no-repeat,linear-gradient(90deg,currentColor,currentColor) 50% 50%/72% 2px no-repeat; }
.route-node::before { content:""; position:absolute; inset:35%; border:2px solid currentColor; border-radius:3px; transform:rotate(45deg); background:#0c1730; }.route-node i { width:5px; height:5px; border:1px solid currentColor; border-radius:50%; background:#0b142b; }.route-node i:nth-child(1){left:calc(50% - 2px);top:5%;}.route-node i:nth-child(2){right:5%;top:calc(50% - 2px);}.route-node i:nth-child(3){left:calc(50% - 2px);bottom:5%;}.route-node i:nth-child(4){left:5%;top:calc(50% - 2px);}
.raid-token { color:#79efff; border:1px solid currentColor; border-radius:50%; background:radial-gradient(circle at 40% 32%,rgba(126,240,255,.32),rgba(22,64,104,.7) 58%,#081329 72%); box-shadow:0 0 0 4px rgba(104,91,255,.12),inset 0 0 12px rgba(100,234,255,.28); }
.raid-token::before { content:"W"; position:absolute; inset:25%; display:grid; place-items:center; border-radius:50%; color:#fff; background:#10234b; font:italic 900 clamp(.55rem,1.5vw,.85rem) Georgia,serif; }.raid-token::after { content:""; position:absolute; inset:-7%; border:1px dashed currentColor; border-radius:50%; animation:radarSweep 5s linear infinite; }
.raid-token i { width:8px; height:8px; border:1px solid #bffaff; border-radius:50%; background:#4977ae; box-shadow:0 0 6px #72eaff; }.raid-token i:nth-child(1){left:-1px;top:16%;}.raid-token i:nth-child(2){right:-1px;top:16%;}.raid-token i:nth-child(3){left:-3px;bottom:12%;}.raid-token i:nth-child(4){right:-3px;bottom:12%;}
.live-station { color:#65f1c0; border:2px solid currentColor; border-radius:9px; background:linear-gradient(145deg,rgba(94,244,193,.23),#0a1e2b 65%); box-shadow:inset 0 0 14px rgba(82,242,188,.28),0 0 16px rgba(89,241,197,.35); }
.live-station::before { content:""; position:absolute; left:25%; top:24%; border-style:solid; border-width:9px 0 9px 14px; border-color:transparent transparent transparent #d8fff1; }.live-station::after { content:""; position:absolute; left:15%; right:15%; bottom:14%; height:2px; background:currentColor; box-shadow:0 0 8px currentColor; }.live-station i { right:8%; top:8%; width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff; animation:ping 1s ease-in-out infinite alternate; }
.trap-device { color:#ff5f93; border:2px solid currentColor; border-radius:9px; background:linear-gradient(145deg,rgba(255,65,125,.18),#26091b 67%); box-shadow:inset 0 0 12px rgba(255,61,121,.25),0 0 14px rgba(255,50,112,.2); overflow:hidden; }
.trap-device::before,.trap-device::after { content:""; position:absolute; left:12%; right:12%; height:2px; background:currentColor; box-shadow:0 0 7px currentColor; }.trap-device::before{top:34%;transform:rotate(38deg);}.trap-device::after{top:58%;transform:rotate(-38deg);}
.trap-device i { bottom:9%; width:3px; background:currentColor; opacity:.6; animation:trapGlitch .85s steps(2) infinite alternate; }.trap-device i:nth-child(1){left:8%;height:5px}.trap-device i:nth-child(2){left:30%;height:7px}.trap-device i:nth-child(3){left:52%;height:9px}.trap-device i:nth-child(4){left:74%;height:11px}
.trap-offline { border-style:dashed; }.trap-spam { background:repeating-linear-gradient(0deg,rgba(255,78,135,.18) 0 3px,transparent 4px 8px),#24091a; }.trap-fake::before { top:18%; height:22%; border:1px solid currentColor; border-radius:4px; background:none; transform:none; }.trap-loop { border-radius:50%; }.trap-loop::before,.trap-loop::after { left:20%; right:20%; top:20%; bottom:20%; height:auto; border:2px dashed currentColor; border-radius:50%; background:none; box-shadow:none; animation:radarSweep 3s linear infinite; }
.boost-device { color:#ffd45f; border:2px solid currentColor; border-radius:9px; background:linear-gradient(145deg,rgba(255,211,81,.25),#322109 70%); box-shadow:inset 0 0 13px rgba(255,217,94,.3),0 0 16px rgba(255,204,69,.28); }
.boost-device::before { content:""; position:absolute; left:23%; right:23%; top:18%; bottom:18%; border:2px solid currentColor; border-radius:5px; }.boost-device::after { content:""; position:absolute; left:39%; top:29%; width:22%; height:42%; background:currentColor; clip-path:polygon(60% 0,100% 0,67% 42%,91% 42%,28% 100%,44% 55%,14% 55%); }.boost-device i:first-child { left:43%; top:8%; width:14%; height:5px; border-radius:2px; background:currentColor; }
.game-panel { position: absolute; z-index: 6; inset: 50% auto auto 50%; width: min(590px,calc(100% - 30px)); transform: translate(-50%,-50%); padding: clamp(23px,5vw,40px); border: 1px solid rgba(103,218,255,.3); border-radius: 20px; text-align: center; background: rgba(5,9,24,.95); box-shadow: 0 28px 80px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.055); backdrop-filter: blur(14px); }
.game-panel::before { content:""; position:absolute; left:16%; right:16%; top:-1px; height:2px; background:linear-gradient(90deg,transparent,#70eaff,transparent); box-shadow:0 0 18px rgba(75,218,255,.55); }
#result.game-panel { background:radial-gradient(circle at 50% 0,rgba(81,236,211,.12),transparent 48%),rgba(5,9,24,.97); }
#result.game-panel::after { content:"RAID ROUTE ARCHIVED"; display:block; width:max-content; margin:17px auto -20px; color:rgba(111,237,255,.45); font-size:.5rem; font-weight:900; letter-spacing:.19em; }
.route-emblem { position:relative; display:grid; width:80px; height:80px; margin:0 auto 13px; place-items:center; border:1px solid rgba(104,234,255,.35); border-radius:18px; background:radial-gradient(circle at 40% 34%,rgba(78,181,255,.28),rgba(10,18,43,.9) 68%); box-shadow:0 0 0 6px rgba(117,79,255,.06),0 0 26px rgba(73,216,255,.18); transform:rotate(45deg); }
.route-emblem span { color:#fff; font:italic 900 1.55rem Georgia,serif; transform:rotate(-45deg); }.route-emblem i { position:absolute; width:7px; height:7px; border:1px solid #baf7ff; border-radius:50%; background:#5281bd; box-shadow:0 0 9px #68eaff; }.route-emblem i:first-of-type { left:-4px; top:36%; }.route-emblem i:last-of-type { right:-4px; bottom:29%; }.route-emblem b { position:absolute; left:4%; right:4%; top:50%; height:2px; background:linear-gradient(90deg,#6cecff,transparent 42%,transparent 58%,#6cecff); transform:rotate(-45deg); }
.game-panel h2 { margin: 10px 0 12px; font-size: clamp(1.5rem,5vw,2.55rem); line-height: 1.05; letter-spacing: -.04em; }
.game-panel h2 em { color: #6deaff; font-style: normal; }
.game-panel>p { max-width: 470px; margin: 0 auto 20px; color: #a9b5c9; font-size: .9rem; line-height: 1.55; }
.legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px 17px; margin-bottom: 22px; color: #cbd6e8; font-size: .7rem; font-weight: 760; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; font-size: .64rem; font-style: normal; font-weight: 950; }
.legend i { position:relative; overflow:hidden; }.legend .raid { border:1px solid #69eaff; border-radius:50%; background:radial-gradient(circle,#77eeff,#18365d 66%); }.legend .raid::after { content:""; position:absolute; inset:33%; border-radius:50%; background:#fff; }.legend .live { border:1px solid #71efbc; background:linear-gradient(145deg,#71efbc,#174c41); }.legend .live::after { content:""; position:absolute; left:38%; top:28%; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff; }.legend .trap { border:1px solid #ff6799; background:repeating-linear-gradient(45deg,#7d173d 0 3px,#2c0a1b 4px 7px); }.legend .trap::before,.legend .trap::after { content:""; position:absolute; left:22%; right:22%; top:47%; height:2px; background:#fff; }.legend .trap::before{transform:rotate(45deg);}.legend .trap::after{transform:rotate(-45deg);}.legend .boost { border:1px solid #f6ca58; background:linear-gradient(145deg,#f6ca58,#4a330a); }.legend .boost::after { content:""; position:absolute; inset:24% 32%; background:#fff4c2; clip-path:polygon(60% 0,100% 0,67% 42%,91% 42%,28% 100%,44% 55%,14% 55%); }
.primary-button { padding: 14px 21px; border: 0; border-radius: 11px; color: #041018; background: linear-gradient(105deg,#6bf48f,#5ee9ed 50%,#6898ff); box-shadow: 0 12px 34px rgba(65,208,239,.22); font-size: .77rem; font-weight: 950; letter-spacing: .08em; cursor: pointer; }
.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.game-panel small { display: block; margin-top: 12px; color: #69758c; font-size: .65rem; }
.hidden { display: none; }
.result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0 0 22px; }
.result-grid div { display: grid; gap: 2px; padding: 10px 5px; border: 1px solid rgba(104,218,255,.13); border-radius: 10px; background: rgba(255,255,255,.025); }
.result-grid strong { color: #6ae9ff; font-size: 1.3rem; }.result-grid span { color: #7f8da3; font-size: .62rem; }
.callout { position: absolute; z-index: 8; left: 50%; top: 20%; opacity: 0; transform: translate(-50%,-8px) scale(.94); color: #fff; font-size: clamp(1.05rem,4vw,1.85rem); font-style: italic; font-weight: 1000; letter-spacing: .06em; text-shadow: 0 0 18px var(--callout,#59e9ff),0 3px 0 rgba(0,0,0,.42); pointer-events: none; transition: opacity .14s ease,transform .18s ease; white-space: nowrap; }
.callout.show { opacity: 1; transform: translate(-50%,0) scale(1); }
.how-to { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }
.how-to div { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid rgba(105,220,255,.1); border-radius: 11px; background: rgba(7,12,28,.7); }
.how-to strong { color: #66eaff; font-size: .76rem; }.how-to span { color: #8794aa; font-size: .69rem; }
footer { padding: 14px 3px 0; color: #758299; font-size: .7rem; } footer p { margin: 0; } footer strong { color: #aebacd; }
@keyframes pulse { to { opacity: .45; transform: scale(.82); } }
@keyframes radarSweep { to { transform:rotate(360deg); } }
@keyframes ping { to { opacity:.3; transform:scale(.72); } }
@keyframes trapGlitch { to { transform:translateY(-4px); opacity:.25; } }
@media (max-width:680px) {
  .game-shell { padding: 10px; }.brand-lockup img { width: 42px; height: 42px; }.game-header { gap: 8px; }.utility-button { padding: 8px 9px; font-size: .61rem; }
  .score-strip { gap: 2px; margin-top: 12px; padding-inline: 7px; }.score-strip div { min-width: 0; }.score-strip span { font-size: .47rem; letter-spacing: .07em; }.score-strip strong { font-size: .93rem; }
  .puzzle-shell { min-height: 525px; border-radius: 16px; }.mission-bar { height: 50px; padding: 0 11px; }.mission-bar span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .board { gap: 5px; width: calc(100% - 18px); margin-block: 16px; }.cell { border-radius: 10px; }.cell .label { display: none; }
  .game-panel { width: calc(100% - 18px); padding: 18px 13px; }.route-emblem { width:52px; height:52px; margin-bottom:8px; border-radius:13px; }.game-panel h2 { margin: 7px 0 9px; font-size: 1.38rem; }.game-panel>p { margin-bottom: 12px; font-size: .74rem; line-height: 1.4; }.legend { gap: 7px 11px; margin-bottom: 14px; font-size: .6rem; }.legend i { width: 21px; height: 21px; }.primary-button { padding: 10px 14px; font-size: .67rem; }.game-panel small { margin-top: 8px; font-size: .53rem; }
  .result-grid strong { font-size: 1.08rem; }.how-to { grid-template-columns: 1fr; gap: 5px; }.how-to div { padding: 8px 11px; }footer { align-items: flex-start; flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition:none!important; } }