.trail-page { min-height:100vh; background:radial-gradient(circle at 12% 15%,#65efd614,transparent 27%),radial-gradient(circle at 87% 32%,#ff5d8513,transparent 29%),var(--bg); }
.trail-shell { width:min(1120px,calc(100% - 28px)); margin:0 auto; padding:22px 0 70px; }
.trail-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(285px,.55fr); align-items:end; gap:18px; margin-bottom:12px; }
.trail-heading h1 { margin:0; font-size:clamp(1.65rem,4vw,2.35rem); }
.trail-heading p { margin:2px 0 0; color:var(--muted); }
.trail-unavailable { padding:28px; border:1px solid #ffcc6655; border-radius:18px; background:#332914; text-align:center; }
.trail-board { overflow:hidden; border:1px solid #3b4763; border-radius:24px; background:linear-gradient(145deg,#11192b,#0b1120); box-shadow:0 24px 70px #0005; }
.trail-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 17px; border-bottom:1px solid #2b354c; }
.trail-topline span,.trail-topline b { display:block; }
.trail-topline span { color:#65efd6; font-size:.58rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.trail-topline b { font-size:.86rem; }
.trail-top-metrics { display:flex; gap:7px; }
.trail-top-metrics > div { min-width:74px; padding:6px 9px; border:1px solid #3c4a67; border-radius:10px; background:#151e31; text-align:center; }
.trail-top-metrics b { font-variant-numeric:tabular-nums; }
.trail-clue { padding:13px 16px 4px; text-align:center; }
.trail-clue span { color:#ffd166; font-size:.57rem; font-weight:900; letter-spacing:.1em; }
.trail-clue h2 { margin:2px 0; font-size:clamp(1.1rem,3vw,1.45rem); }
.trail-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr); gap:13px; padding:13px; }
.trail-play,.trail-shelf { min-width:0; padding:12px; border:1px solid #33405a; border-radius:18px; background:#11182a; }
.trail-barcode { height:92px; overflow:hidden; margin-bottom:9px; border-radius:13px; background:#fff; }
.trail-barcode svg { display:block; width:100%; height:100%; }
.trail-grid { --trail-node:46px; position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px 10px; padding:14px; border:1px solid #2f3b55; border-radius:18px; background:radial-gradient(circle at 50% 50%,#1a263b,#0d1424 72%); touch-action:none; user-select:none; -webkit-user-select:none; }
.trail-paths { position:absolute; z-index:0; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); overflow:visible; pointer-events:none; }
.trail-path-line { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.trail-path-line.selecting { stroke:#ff5f86; stroke-width:7; filter:drop-shadow(0 0 5px #ff5f8699); }
.trail-path-line.found { stroke:#65efd6; stroke-width:6; opacity:.82; }
.trail-path-line.new { stroke-dasharray:1; stroke-dashoffset:1; animation:trail-draw .62s ease forwards; }
.trail-cell { position:relative; z-index:1; display:grid; min-width:0; min-height:58px; place-items:center; padding:0; border:0; background:transparent; color:#edf2ff; font-family:var(--font-display); font-size:clamp(1.12rem,3vw,1.65rem); font-weight:900; text-shadow:0 2px 8px #000; transition:transform .1s ease,color .14s ease; }
.trail-cell::before { content:''; position:absolute; z-index:-1; width:var(--trail-node); height:var(--trail-node); border-radius:50%; background:transparent; transition:transform .12s cubic-bezier(.2,.8,.25,1),background .14s ease,box-shadow .14s ease; }
.trail-cell:hover { color:#65efd6; transform:scale(1.04); }
.trail-cell:hover::before { background:#ffffff0b; }
.trail-cell.selected { color:#fff; text-shadow:none; transform:scale(1.04); }
.trail-cell.selected::before { background:#ff5f86; box-shadow:0 0 0 4px #ff5f8630,0 0 18px #ff5f8670; transform:scale(1.04); }
.trail-cell.found { color:#071b18; text-shadow:none; }
.trail-cell.found::before { background:#65efd6; box-shadow:0 0 0 3px #65efd625; }
.trail-cell.hint::after { content:''; position:absolute; width:calc(var(--trail-node) + 7px); height:calc(var(--trail-node) + 7px); border:3px solid #ffd166; border-radius:50%; animation:trail-hint 1.15s ease-in-out infinite; pointer-events:none; }
.trail-cell.new-found { animation:trail-found .55s cubic-bezier(.2,.9,.25,1); }
@keyframes trail-hint { 50% { opacity:.35; transform:scale(1.12); } }
@keyframes trail-found { 0% { transform:scale(.72) rotate(-5deg); } 65% { transform:scale(1.12) rotate(2deg); } 100% { transform:none; } }
@keyframes trail-draw { to { stroke-dashoffset:0; } }
.trail-status { min-height:40px; margin-top:9px; padding:9px 11px; border:1px solid #3c4965; border-radius:11px; background:#151d30; color:#cbd3e8; font-size:.75rem; text-align:center; }
.trail-status.success { border-color:#55e08a66; background:#123124; color:#c9ffdc; }
.trail-status.miss { border-color:#ff657e66; background:#2c1720; color:#ffc6d0; animation:trail-shake .32s ease; }
@keyframes trail-shake { 30% { transform:translateX(-6px); } 65% { transform:translateX(6px); } }
.trail-actions { display:grid; grid-template-columns:auto auto minmax(150px,1fr); gap:7px; margin-top:8px; }
.trail-actions button { min-height:43px; padding:8px 11px; }
.trail-actions .primary { background:linear-gradient(120deg,#ff9346,#ff4f83); box-shadow:0 10px 24px #ff5d8533; }
.trail-shelf-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.trail-shelf-heading span { color:#65efd6; font-size:.55rem; font-weight:900; letter-spacing:.09em; }
.trail-shelf-heading h2 { margin:1px 0 0; font-size:1.05rem; }
.trail-shelf-heading > b { color:#ffd166; font-size:1.05rem; }
.trail-entries { display:grid; gap:7px; }
.trail-entry { display:grid; grid-template-columns:45px minmax(0,1fr); align-items:center; gap:9px; min-height:62px; padding:7px; border:1px solid #34405a; border-radius:12px; background:#151d30; transition:border-color .2s ease,background .2s ease,transform .2s ease,filter .2s ease; }
.trail-entry-mark { display:grid; width:42px; height:42px; place-items:center; border:1px dashed #53617f; border-radius:10px; color:#7e8ba9; font-family:var(--font-display); font-weight:900; }
.trail-entry b,.trail-entry span,.trail-entry small { display:block; }
.trail-entry b { overflow:hidden; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }
.trail-entry span { color:#95a2c0; font-size:.63rem; letter-spacing:.08em; }
.trail-entry small { color:#73809d; font-size:.56rem; }
.trail-entry.locked .trail-entry-code { color:#ffd166; font-size:1.02rem; }
.trail-entry.locked { cursor:pointer; }
.trail-entry.locked:hover,.trail-entry.locked:focus-visible { border-color:#ffd16688; outline:0; }
.trail-entry.locked.active-target { border-color:#ff6a8c; background:#2a1b2b; box-shadow:0 0 0 2px #ff6a8c25; }
.trail-entry.locked.active-target .trail-entry-mark { border-color:#ff6a8c; background:#ff6a8c18; }
.trail-entry.found { border-color:#65efd666; background:#12352f; }
.trail-entry.pending-unlock { filter:brightness(.28) blur(2px); transform:scale(.97); }
.trail-entry.unlocking { animation:trail-card-unlock .5s cubic-bezier(.2,.85,.25,1); }
.trail-entry.shelf { border-color:#ffd16677; background:#302817; }
.trail-entry img { width:42px; height:42px; padding:3px; object-fit:contain; border-radius:9px; background:#fff; }
.trail-entry .trail-entry-code { color:#65efd6; font-family:ui-monospace,monospace; letter-spacing:.12em; }
.trail-completion-summary { margin-top:12px; padding:10px; border:1px solid #65efd666; border-radius:14px; background:linear-gradient(145deg,#12352f,#101a2c 72%); box-shadow:inset 4px 0 0 #65efd6; animation:trail-summary-in .42s cubic-bezier(.16,1,.3,1); }
.trail-completion-summary .primary { width:100%; min-height:42px; margin-top:9px; background:linear-gradient(120deg,#ff9346,#ff4f83); box-shadow:0 10px 24px #ff5d8533; }
@keyframes trail-summary-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.trail-unlock-flight { position:fixed; z-index:500; inset:0; width:100vw; height:100vh; overflow:visible; pointer-events:none; }
.trail-unlock-flight path { fill:none; stroke:#65efd6; stroke-width:7; stroke-linecap:round; filter:drop-shadow(0 0 8px #65efd6); stroke-dasharray:1; stroke-dashoffset:1; animation:trail-flight .72s ease-in-out forwards; }
@keyframes trail-flight { 75%,100% { stroke-dashoffset:0; } 100% { opacity:0; } }
@keyframes trail-card-unlock { 0% { transform:scale(.88); box-shadow:0 0 0 #65efd600; } 55% { transform:scale(1.06); box-shadow:0 0 30px #65efd688; } 100% { transform:none; } }
.trail-ad-slot { max-width:900px; }
.trail-result-scoreboard { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.trail-result-scoreboard article { min-width:0; padding:9px 5px; border:1px solid #65efd633; border-radius:11px; background:#0d1726aa; text-align:center; }
.trail-result-scoreboard span,.trail-result-scoreboard b,.trail-result-scoreboard small { display:block; }
.trail-result-scoreboard span { color:#8995b1; font-size:.58rem; font-weight:900; text-transform:uppercase; }
.trail-result-scoreboard b { margin:2px 0; color:#fff; font-family:var(--font-display); font-size:1.2rem; }
.trail-result-scoreboard small { color:#65efd6; font-size:.57rem; }
#trailResultCompare { min-height:1.3em; margin:8px 0 0; color:#ffd166; font-size:.68rem; font-weight:900; line-height:1.35; text-align:center; }

@media (max-width:820px) {
  .trail-heading { grid-template-columns:1fr; gap:8px; }
  .trail-layout { grid-template-columns:1fr; }
  .trail-shelf { order:-1; }
  .trail-entries { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trail-entry { min-height:61px; padding:6px; }
  .trail-entry-mark,.trail-entry img { width:34px; height:34px; }
  .trail-entry b { font-size:.67rem; }
}

@media (max-width:560px) {
  .trail-shell { width:min(100% - 12px,1120px); padding-top:12px; }
  .trail-heading p { font-size:.76rem; }
  .trail-board { border-radius:18px; }
  .trail-topline { padding:9px 11px; }
  .trail-top-metrics > div { min-width:60px; padding:5px 6px; }
  .trail-layout { gap:8px; padding:8px; }
  .trail-play,.trail-shelf { padding:8px; border-radius:14px; }
  .trail-shelf-heading { margin-bottom:6px; }
  .trail-shelf-heading h2 { font-size:.85rem; }
  .trail-entries { gap:4px; }
  .trail-entry { min-height:57px; padding:5px; border-radius:9px; }
  .trail-entry-mark,.trail-entry img { width:30px; height:30px; }
  .trail-entry b { font-size:.62rem; }
  .trail-entry span { font-size:.52rem; }
  .trail-entry small { display:none; }
  .trail-entry.found .trail-entry-code { display:block; overflow:hidden; font-size:.45rem; text-overflow:ellipsis; white-space:nowrap; }
  .trail-barcode { height:70px; }
  .trail-grid { --trail-node:38px; gap:2px 5px; padding:9px; border-radius:14px; }
  .trail-paths { inset:9px; width:calc(100% - 18px); height:calc(100% - 18px); }
  .trail-cell { min-height:44px; font-size:1.15rem; }
  .trail-actions { grid-template-columns:1fr 1fr; }
  .trail-actions #trailCheck { grid-column:1/-1; }
  .trail-result-scoreboard { gap:5px; }
  .trail-result-scoreboard article { padding:7px 3px; }
  .trail-result-scoreboard b { font-size:1.05rem; }
}

@media (prefers-reduced-motion:reduce) {
  .trail-cell,.trail-cell.hint::after,.trail-cell.new-found,.trail-status.miss,.trail-completion-summary { animation:none; transition:none; }
}