:root{
    color-scheme: dark;

    --night:#1B1310;
    --room:#241A15;
    --room-2:#2E211A;
    --room-3:#3A2A20;
    --edge:#4A3527;

    --cream:#F9F0E5;    --warm:#D3B79D;
    --warm-dim:#9C816C;

    --amber:#FFB454;    --amber-soft:#FFD9A0;
    --ember:#E8663D;    --wine:#C7534A;    --pine:#74A98A;    --frost:#A9D8E6;
    --f:"Nunito","Segoe UI",system-ui,sans-serif;

    --r:22px;
    --r-lg:30px;
    --r-sm:14px;

    --sh-1:0 2px 8px rgba(20,10,4,.3);
    --sh-2:0 12px 30px -12px rgba(20,10,4,.6);
    --sh-3:0 30px 60px -24px rgba(20,10,4,.75);
    --glow:0 0 40px -8px rgba(255,180,84,.45);

    --ease-out-3:cubic-bezier(0,0,.3,1);    --ease:cubic-bezier(.22,.8,.3,1);    --t-fast:.2s;    --t-mid:.35s;    --t-slow:.8s;  }
  *{box-sizing:border-box}
  html,body{margin:0}

  html{
    scrollbar-width:auto;
    scrollbar-color:#6B5142 var(--night);
  }
  ::-webkit-scrollbar{width:16px;height:16px}
  ::-webkit-scrollbar-track{background:var(--night)}
  ::-webkit-scrollbar-button{display:none}
  ::-webkit-scrollbar-thumb{background:#6B5142;border-radius:8px}
  ::-webkit-scrollbar-thumb:hover{background:#8A6A54}
  ::-webkit-scrollbar-corner{background:var(--night)}
  body{
    position:relative;    background-color:var(--night);
    background-image:url(/img/knit.png);
    background-size:310px;
    color:var(--cream);
    font-family:var(--f);
    font-size:16px;line-height:1.7;font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.02em;line-height:1.14;text-wrap:balance}
  p{margin:0}
  :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}

  .wrap{width:100%;max-width:1120px;margin:0 auto;padding-inline:22px}

  .i{width:1em;height:1em;fill:currentColor;flex:none;display:block}

  @keyframes skel{0%,100%{opacity:.45}50%{opacity:1}}
  .wait-status #chipMap,.wait-status #chipNow,.wait-status #plCount,.wait-status #mapTime,
  .wait-status .nowmap .under h3,.wait-status .nowmap .under p,.wait-status #plist li > span,
  .wait-top .numrow b,.wait-top #topBody td > *{
    color:transparent!important;background:rgba(255,220,180,.11)!important;
    border-radius:7px;box-shadow:none!important;animation:skel 1.4s ease-in-out infinite;
  }
  .wait-status #mapTime::before{visibility:hidden}
  .wait-top #topBody td:not(:has(> *)){
    color:transparent!important;
    background:linear-gradient(rgba(255,220,180,.11),rgba(255,220,180,.11)) no-repeat right 14px center / 46% 12px;
  }
  .wait-top #topBody td > *{display:inline-block}
  .wait-status .nowmap .under > *,.wait-status #plist li > .n{width:fit-content;justify-self:start}
  .wait-status #mapShot{object-position:-9999px 0;background:rgba(255,220,180,.07);animation:skel 1.4s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){
    .wait-status [data-live],.wait-status #plist li > span,.wait-top [data-live] *{animation:none!important}
  }

  .badge{
    width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex:none;
    font-size:26px;
    background:radial-gradient(circle at 34% 28%,var(--room-3),var(--room-2));
    box-shadow:inset 0 1px 0 rgba(255,220,180,.13),var(--sh-1);
  }
  .badge.amber{color:var(--amber);box-shadow:inset 0 1px 0 rgba(255,220,180,.16),0 0 24px -10px rgba(255,180,84,.8)}
  .badge.ember{color:var(--ember)}
  .badge.wine{color:var(--wine)}
  .badge.pine{color:var(--pine)}
  .badge.frost{color:var(--frost)}

  .garland{
    position:absolute;top:78px;left:0;right:0;height:46px;width:100%;
    pointer-events:none;z-index:6;overflow:hidden;
  }
  .garland .wire{position:absolute;left:0;right:0;top:0;height:2px;background:#3A2A20}
  .lamp{position:absolute;top:0;transform:translateX(-50%)}
  .lamp *{display:block}  .lamp .cap{width:7px;height:5px;margin:0 auto;background:#3A2A20}
  .lamp .glass{
    width:17px;height:23px;margin:0 auto;position:relative;
    border:2px solid rgba(0,0,0,.55);
    border-radius:46% 46% 50% 50% / 30% 30% 70% 70%;
    animation:onoff 1.3s steps(1) infinite;
  }
  .lamp .glass::after{
    content:"";position:absolute;left:18%;top:20%;width:5px;height:6px;
    border-radius:50%;background:rgba(255,255,255,.75);
  }
  @keyframes onoff{
    0%  {background:var(--on); border-color:rgba(0,0,0,.55)}
    50% {background:var(--off);border-color:rgba(0,0,0,.4)}
  }
  @media (prefers-reduced-motion:reduce){
    .lamp .glass{animation:none;background:var(--on)}
  }

  .snow-off{display:none}
  .snow-btn{
    position:fixed;right:22px;z-index:70;
    bottom:calc(22px + env(safe-area-inset-bottom,0px));
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--f);font-weight:800;font-size:14px;color:var(--frost);
    background:rgba(36,26,21,.82);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(169,216,230,.26);
    padding:11px 18px;border-radius:999px;cursor:pointer;
    box-shadow:var(--sh-2);
    transition:background .25s var(--ease-out-3),border-color .25s var(--ease-out-3),
               color .25s var(--ease-out-3),transform .3s cubic-bezier(.2,.9,.3,1.2);
  }
  .snow-btn:hover{background:rgba(46,33,26,.9);border-color:rgba(169,216,230,.45);transform:translateY(-2px)}
  .snow-btn .i{font-size:18px}
  .snow-btn[aria-pressed="true"] .i{animation:snowspin 9s linear infinite}
  @keyframes snowspin{to{transform:rotate(360deg)}}
  .snow-btn[aria-pressed="false"]{
    color:var(--warm-dim);border-color:rgba(255,220,180,.14);
  }
  .snow-btn[aria-pressed="false"] .i{opacity:.5;transform:rotate(-22deg)}
  @media (prefers-reduced-motion:reduce){.snow-btn{display:none}}

  .nav{
    position:relative;z-index:8;
    background:rgba(27,19,16,.7);
    backdrop-filter:blur(14px) saturate(130%);
    -webkit-backdrop-filter:blur(14px) saturate(130%);
    border-bottom:1px solid rgba(255,220,180,.1);
    box-shadow:0 10px 30px -18px rgba(12,6,2,.9);
  }
  .nav-in{display:flex;align-items:center;gap:22px;height:78px}
  .logo{display:flex;align-items:center;gap:11px;font-weight:900;font-size:20px;letter-spacing:-.01em}
  .logo-mark{
    width:46px;height:46px;object-fit:contain;flex:none;
    filter:drop-shadow(0 3px 7px rgba(12,6,2,.55));
  }
  .logo-t{display:flex;flex-direction:column;line-height:1.05}
  .logo-t b{color:var(--amber);font-weight:900;font-size:15px;letter-spacing:.02em}
  .logo{font-size:17px}
  .nav-links{display:flex;gap:20px;margin-left:auto;font-weight:600;font-size:15px;color:var(--warm);
             white-space:nowrap}
  .logo-t{white-space:nowrap}
  .nav-links a[aria-current]{color:var(--amber)}
  @media (max-width:640px){
    .nav-in{gap:14px}
    .nav-links{gap:14px;font-size:14px}
    .logo-t{display:none}
    .nav .nav-tg{padding:9px 11px}
    .nav .nav-tg span{display:none}
  }
  @media (max-width:420px){
    .nav .wrap{padding-inline:16px}
    .nav-in{gap:10px}
    .nav-links{gap:11px;font-size:13px}
    .logo-mark{width:38px;height:38px}
    .nav .nav-tg{padding:8px 10px}
  }
  @media (max-width:350px){.nav .nav-tg{display:none}}
  .nav-links a{transition:color .25s ease}
  .nav-links a:hover{color:var(--amber)}
  .nav-tg{
    display:inline-flex;align-items:center;gap:9px;flex:none;
    font-weight:800;font-size:14px;color:var(--frost);
    background:rgba(169,216,230,.12);
    border:1px solid rgba(169,216,230,.22);
    padding:9px 16px;border-radius:999px;white-space:nowrap;
    transition:background .25s var(--ease-out-3),border-color .25s var(--ease-out-3);
  }
  .nav-tg .i{font-size:18px}
  .nav-tg:hover{background:rgba(169,216,230,.2);border-color:rgba(169,216,230,.4)}
  @keyframes pulse{70%{box-shadow:0 0 0 8px rgba(116,169,138,0)}100%{box-shadow:0 0 0 0 rgba(116,169,138,0)}}

  .topbar{position:relative;z-index:8}
  .page-head{
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
    padding-block:clamp(66px,8vw,88px) 0;
  }
  .page-head h1{font-size:clamp(30px,4.2vw,46px)}
  .page-head h1 em{font-style:normal;color:var(--amber);font-size:.6em;margin-left:.35em;letter-spacing:-.01em}
  .page-head p{color:var(--warm);max-width:56ch}
  .page-head .art,.sec-head .art{width:84px;height:84px;margin-bottom:2px}
  .sec-head .art{width:76px;height:76px}
  .page-head + .sec{padding-top:clamp(34px,5vw,54px)}

  .hero{
    position:relative;overflow:hidden;isolation:isolate;
    display:flex;flex-direction:column;
    min-height:clamp(540px,68vh,780px);
    border-bottom:2px solid rgba(255,180,84,.6);
  }
  .hero-bg{position:absolute;inset:0;z-index:-2;background:var(--night)}
  .hero-bg picture{display:contents}  .hero-bg img{
    width:100%;height:100%;object-fit:cover;
    object-position:50% 50%;  }
  .hero-bg img{filter:brightness(.9) saturate(.95)}
  @media (min-width:561px){.hero-bg img{filter:brightness(.7) saturate(.95)}}
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(180deg,rgba(27,19,16,.9) 0,rgba(27,19,16,.82) 124px,rgba(27,19,16,.45) 170px,rgba(27,19,16,0) 250px),
      radial-gradient(40% 62% at 50% 52%,rgba(27,19,16,.9) 0%,rgba(27,19,16,.72) 42%,rgba(27,19,16,0) 100%);
  }
  @media (max-width:560px){
    .hero-bg::after{
      background:
        linear-gradient(180deg,rgba(27,19,16,.9) 0,rgba(27,19,16,.82) 124px,rgba(27,19,16,.45) 170px,rgba(27,19,16,0) 250px),
        radial-gradient(120% 58% at 50% 50%,rgba(27,19,16,.84) 0%,rgba(27,19,16,.7) 55%,rgba(27,19,16,.25) 100%);
    }
  }

  .hero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
  .hero-glow::before,.hero-glow::after{
    content:"";position:absolute;border-radius:50%;filter:blur(72px);
  }
  .hero-glow::before{
    width:620px;height:520px;left:-120px;top:-60px;
    background:radial-gradient(circle,rgba(255,180,84,.18),transparent 68%);
    animation:breathe 9s ease-in-out infinite;
  }
  .hero-glow::after{
    width:560px;height:480px;right:-140px;top:120px;
    background:radial-gradient(circle,rgba(232,102,61,.14),transparent 68%);
    animation:breathe 11s ease-in-out infinite reverse;
  }
  @keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}
  @media (prefers-reduced-motion:reduce){.hero-glow::before,.hero-glow::after{animation:none}}
  @media (max-width:640px){
    .hero-glow{display:none}
    .snow-btn{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(36,26,21,.94)}
  }

  #snow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:60;overflow-anchor:none}
  #snow .sb{position:absolute;left:0;right:0}
  #snow .sb:not(.on) i{display:none}
  #snow i{
    position:absolute;display:block;border-radius:50%;background:#F9F0E5;
    animation-name:snowfall;animation-timing-function:linear;animation-iteration-count:infinite;
  }
  @keyframes snowfall{
    0%   {transform:translate(0,0);opacity:0}
    9%   {opacity:var(--o)}
    30%  {transform:translate(var(--x1),calc(var(--d) * .30))}
    55%  {transform:translate(var(--x2),calc(var(--d) * .55))}
    80%  {transform:translate(var(--x3),calc(var(--d) * .80))}
    91%  {opacity:var(--o)}
    100% {transform:translate(0,var(--d));opacity:0}
  }
  @media (prefers-reduced-motion:reduce){#snow{display:none}}
  @media (prefers-reduced-motion:reduce){#snow{display:none}}

  .hero-in{
    position:relative;z-index:5;
    flex:1;justify-content:center;
    padding-block:64px 52px;
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;
  }
  .hero-kicker{
    display:inline-flex;align-items:center;gap:9px;
    background:rgba(255,180,84,.12);color:var(--amber-soft);
    padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px;
  }
  .hero-kicker .i{font-size:17px}
  .hero h1{font-size:clamp(26px,4.4vw,52px);line-height:1.08;max-width:100%;
           text-transform:uppercase;letter-spacing:.02em}
  .hero h1 em{font-style:normal;color:var(--amber);display:block;font-size:.72em;margin-top:.14em;letter-spacing:-.015em}
  .hero-sub{
    color:var(--warm);font-size:clamp(16px,1.8vw,19px);max-width:52ch;
    text-wrap:balance;  }
  .hero-sub b{color:var(--cream);font-weight:700}

  .connect{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
    background:rgba(46,33,26,.72);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,220,180,.13);
    border-radius:var(--r);padding:12px 12px 12px 22px;
    box-shadow:var(--sh-3),inset 0 1px 0 rgba(255,220,180,.09);
    margin-top:4px;
  }
  .connect .ip{
    display:flex;align-items:center;gap:11px;font-weight:800;font-size:clamp(16px,2.2vw,20px);
    font-variant-numeric:tabular-nums;letter-spacing:.01em;
  }
  .connect .ip .i{font-size:21px;color:var(--warm-dim)}
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--f);font-weight:800;font-size:15px;
    padding:13px 24px;border-radius:var(--r-sm);border:0;cursor:pointer;
    transition:transform .3s cubic-bezier(.2,.9,.3,1.2),box-shadow .3s ease,background .3s ease;
  }
  .btn .i{font-size:19px}
  .btn-amber{background:linear-gradient(170deg,#FFC470,var(--amber));color:#3A2206;box-shadow:var(--glow)}
  .btn-amber:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 52px -6px rgba(255,180,84,.65)}
  .btn-soft{background:var(--room-3);color:var(--cream);box-shadow:var(--sh-1)}
  .btn-soft:hover{background:var(--edge);transform:translateY(-2px)}
  .btn.done{background:linear-gradient(170deg,#8FC7A5,var(--pine));color:#0E2417}

  .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
  .chip{
    display:flex;align-items:center;gap:9px;
    background:rgba(46,33,26,.6);border:1px solid rgba(255,220,180,.09);
    padding:9px 17px;border-radius:999px;font-size:14px;color:var(--warm);
    font-variant-numeric:tabular-nums;
  }
  .chip .i{font-size:17px;color:var(--amber)}
  .chip b{color:var(--cream);font-weight:800}
  .chip-live i{
    width:8px;height:8px;border-radius:50%;background:var(--pine);display:block;flex:none;
    box-shadow:0 0 0 0 rgba(116,169,138,.7);animation:pulse 2.4s infinite;
  }
  .chip-live b{color:var(--pine)}
  @media (prefers-reduced-motion:reduce){.chip-live i{animation:none}}

  .art{
    width:96px;height:96px;object-fit:contain;flex:none;
    filter:drop-shadow(0 8px 16px rgba(12,6,2,.55));
    transition:transform .4s cubic-bezier(.2,.9,.3,1.2);
  }
  .feat .art{width:80px;height:80px}
  .good .art{width:76px;height:76px}
  .feat:hover .art,.good:hover .art{transform:translateY(-4px) scale(1.07)}

  .hang{
    position:absolute;top:0;display:flex;flex-direction:column;align-items:center;
    pointer-events:none;z-index:1;
    transform-origin:50% 0;
    animation:sway 6s ease-in-out infinite;
  }
  .hang i{width:1px;background:linear-gradient(180deg,rgba(255,220,180,0),rgba(255,220,180,.3))}
  .hang-a{left:6%;animation-delay:0s}      .hang-a i{height:44px}
  .hang-b{left:23%;animation-delay:-2.1s}  .hang-b i{height:82px}  .hang-b img{width:42px;height:42px}
  .hang-c{right:8%;animation-delay:-4s}    .hang-c i{height:62px}
  .hang-d{right:24%;animation-delay:-1.2s} .hang-d i{height:36px}  .hang-d img{width:40px;height:40px}
  .hang img{
    width:52px;height:52px;object-fit:contain;
    filter:drop-shadow(0 7px 13px rgba(12,6,2,.6));
  }
  @keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
  @media (prefers-reduced-motion:reduce){.hang{animation:none}}
  @media (max-width:900px){.hang{display:none}}

  .trinket{
    position:absolute;object-fit:contain;pointer-events:none;z-index:1;
    filter:drop-shadow(0 8px 16px rgba(12,6,2,.55));
  }
  @media (max-width:900px){.trinket{display:none}}

  .sec{padding-block:clamp(56px,8vw,96px);position:relative}
  .sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin-bottom:44px}
  .sec-head h2{font-size:clamp(27px,4vw,44px)}
  .sec-head p{color:var(--warm);max-width:54ch}

  .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .feat{
    background:linear-gradient(168deg,var(--room-2),var(--room));
    border:1px solid rgba(255,220,180,.07);
    border-radius:var(--r-lg);padding:28px 26px 30px;
    display:flex;flex-direction:column;gap:15px;
    box-shadow:var(--sh-2);
    transition:transform .35s cubic-bezier(.2,.9,.3,1.1),box-shadow .35s ease,border-color .35s ease;
  }
  .feat:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:rgba(255,220,180,.16)}
  .feat h3{font-size:20px}
  .feat p{color:var(--warm);font-size:15px}
  .feat code,.step code{
    background:rgba(255,180,84,.12);color:var(--amber-soft);
    padding:2px 8px;border-radius:7px;font-family:var(--f);font-weight:700;font-size:14px;
  }

  .clock-note{color:var(--warm);max-width:52ch}

  .seam-wrap{position:relative;height:0;z-index:4;pointer-events:none}
  .seam{
    position:absolute;left:0;right:0;top:-10px;height:74px;
    background:url(/img/seam-icicles.png) repeat-x 0 0;
    background-size:auto 100%;
  }
  @media (max-width:640px){.seam{height:54px;top:-8px}}

  .shop{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .good{
    background:var(--room);border:1px solid rgba(255,220,180,.07);
    border-radius:var(--r);padding:22px 20px 20px;
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;
    box-shadow:var(--sh-1);
    transition:transform .35s cubic-bezier(.2,.9,.3,1.1),background .35s ease;
  }
  .good:hover{transform:translateY(-4px);background:var(--room-2)}
  .good h3{font-size:16px;font-weight:800;line-height:1.35}
  .good .when{
    font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--amber);background:rgba(255,180,84,.1);
    padding:3px 10px;border-radius:99px;margin-top:-4px;
  }
  .lot{list-style:none;margin:4px 0 0;padding:0;width:100%}
  .lot li{
    display:flex;align-items:baseline;gap:10px;text-align:left;
    padding:10px 0;font-size:14.5px;color:var(--warm);line-height:1.35;
  }
  .lot li + li{border-top:1px solid rgba(255,220,180,.06)}
  .lot li:last-child{padding-bottom:0}
  .lot .what{flex:1}
  .lot .cost{
    font-weight:900;color:var(--amber);font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  .lot .cost i{font-style:normal;font-size:11px;font-weight:700;color:var(--warm-dim);margin-left:3px}

  .art-clock{width:clamp(108px,13vw,140px);height:clamp(108px,13vw,140px)}
  .decor{
    position:absolute;bottom:14px;width:116px;height:116px;object-fit:contain;
    opacity:.9;pointer-events:none;filter:drop-shadow(0 12px 22px rgba(12,6,2,.65));
  }
  .decor-l{left:30px}
  .decor-r{right:30px}
  @media (max-width:1020px){.decor{display:none}}

  .clock-wrap{
    position:relative;
    background:
      radial-gradient(900px 340px at 50% -10%,rgba(255,180,84,.16),transparent 70%),
      linear-gradient(170deg,var(--room-2),var(--room));
    border:1px solid rgba(255,220,180,.1);
    border-radius:var(--r-lg);
    padding:clamp(34px,5vw,56px) 26px;
    text-align:center;box-shadow:var(--sh-3);
    display:flex;flex-direction:column;align-items:center;gap:20px;
  }
  .clock-wrap h2{font-size:clamp(25px,3.6vw,38px)}
  .clock{display:flex;gap:clamp(10px,2vw,20px);flex-wrap:wrap;justify-content:center}
  .unit{
    background:rgba(27,19,16,.6);border:1px solid rgba(255,220,180,.09);
    border-radius:var(--r-sm);padding:14px 20px;min-width:84px;
  }
  .unit b{
    display:block;font-size:clamp(28px,4.4vw,44px);font-weight:900;color:var(--amber);
    line-height:1.1;font-variant-numeric:tabular-nums;
  }
  .unit span{font-size:12px;font-weight:700;color:var(--warm-dim);text-transform:uppercase;letter-spacing:.1em}
  .clock-note b{color:var(--amber-soft);font-weight:800}

  .maps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .mapcard{
    background:var(--room);border:1px solid rgba(255,220,180,.07);
    border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
    transition:border-color .35s var(--ease-out-3);
  }
  .mapcard:hover{border-color:rgba(255,220,180,.2)}
  .mapcard figure{margin:0}
  .mapcard img{
    width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
    filter:saturate(.88) brightness(.86);
    transform:scale(1.001);
    transition:transform .6s cubic-bezier(.2,.9,.3,1.1),filter .5s var(--ease-out-3);
  }
  .mapcard:hover img{filter:saturate(1.04) brightness(1.06);transform:scale(1.045)}
  .mapcard figcaption{padding:16px 20px 20px}
  .mapcard .tag{
    display:block;font-weight:800;font-size:12px;color:var(--amber);
    letter-spacing:.08em;margin-bottom:5px;font-variant-numeric:tabular-nums;
  }
  .mapcard h3{font-size:17px;margin-bottom:5px}
  .mapcard p{color:var(--warm);font-size:14px}
  @media (max-width:820px){.maps{grid-template-columns:1fr}}

  .toptable-wrap{overflow-x:auto;border-radius:var(--r)}
  .toptable{
    width:100%;border-collapse:collapse;
    background:var(--room);border:1px solid rgba(255,220,180,.07);
    border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2);
  }
  .toptable th{
    text-align:right;padding:13px 14px;font-size:11px;font-weight:800;
    letter-spacing:.12em;text-transform:uppercase;color:var(--warm-dim);
    background:rgba(27,19,16,.45);border-bottom:1px solid rgba(255,220,180,.08);
  }
  .toptable th:nth-child(-n+2){text-align:left}
  .toptable td{
    padding:12px 14px;text-align:right;font-variant-numeric:tabular-nums;
    color:var(--warm);border-bottom:1px solid rgba(255,220,180,.05);font-size:15px;
  }
  .toptable td:nth-child(-n+2){text-align:left}
  .toptable tbody tr:last-child td{border-bottom:0}
  .toptable tbody tr{transition:background .2s var(--ease-out-3)}
  .toptable tbody tr:hover{background:rgba(255,220,180,.04)}
  .toptable .nick{color:var(--cream);font-weight:700}
  .toptable .nick a{transition:color .2s}
  .toptable .nick a:hover{color:var(--amber)}
  .toptable .pts{color:var(--amber);font-weight:800}
  .place{
    display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
    font-weight:900;font-size:13px;color:var(--warm-dim);
  }
  .place.p1{background:linear-gradient(160deg,#FFD98A,var(--amber));color:#3A2206}
  .place.p2{background:linear-gradient(160deg,#E4E7EA,#AFB6BD);color:#2A2A2E}
  .place.p3{background:linear-gradient(160deg,#E0A071,#B87446);color:#2E1A0C}
  .top-more{display:flex;justify-content:center;margin-top:22px}
  @media (max-width:820px){
    .toptable .hide-s{display:none}
    .toptable th,.toptable td{padding:11px 9px;font-size:14px}
  }
  @media (max-width:520px){
    .toptable .hide-xs{display:none}
    .toptable th,.toptable td{padding:10px 6px;font-size:13.5px}
    .toptable th{font-size:10.5px;letter-spacing:.05em}
    .toptable .nick a{display:block;max-width:29vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  }

  .statgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:stretch}
  .players{display:flex;flex-direction:column}
  .plist-box{position:relative;flex:1;min-height:200px}
  .plist-box .plist{position:absolute;inset:0;max-height:none}
  .panel{
    background:var(--room);border:1px solid rgba(255,220,180,.07);
    border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
  }
  .panel-t{
    display:flex;align-items:center;gap:10px;padding:16px 20px;
    border-bottom:1px solid rgba(255,220,180,.07);font-weight:800;font-size:15px;
  }
  .panel-t .i{font-size:19px;color:var(--amber)}
  .panel-t span{margin-left:auto;font-weight:700;font-size:13px;color:var(--warm-dim);
                font-variant-numeric:tabular-nums}
  .nowmap img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
              filter:saturate(.92) brightness(.9)}
  .nowmap .under{padding:16px 20px 20px}
  .nowmap h3{font-size:18px;margin-bottom:4px}
  .nowmap .meta{color:var(--warm);font-size:14px}
  .plist{list-style:none;margin:0;padding:6px 0;max-height:384px;overflow-y:auto;
         scrollbar-width:thin;scrollbar-color:rgba(255,220,180,.16) transparent}
  .plist::-webkit-scrollbar{width:6px}
  .plist::-webkit-scrollbar-track{background:transparent}
  .plist::-webkit-scrollbar-thumb{background:rgba(255,220,180,.16);border-radius:3px}
  .plist li{
    display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
    padding:9px 20px;font-size:15px;
  }
  .plist li + li{border-top:1px solid rgba(255,220,180,.05)}
  .plist .n{color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .plist .f{color:var(--amber);font-weight:800;font-variant-numeric:tabular-nums}
  .plist .p{color:var(--warm-dim);font-size:13px;font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
  .live-note{margin-top:14px;text-align:center;font-size:13px;color:var(--warm-dim)}
  .live-note b{color:var(--warm);font-weight:700}
  .plist .empty{padding:26px 20px;text-align:center;color:var(--warm-dim)}
  .numrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
  .numrow div{
    background:var(--room);border:1px solid rgba(255,220,180,.07);
    border-radius:var(--r);padding:16px 18px;
  }
  .numrow b{display:block;font-weight:900;font-size:clamp(20px,2.4vw,26px);color:var(--cream);
            font-variant-numeric:tabular-nums;line-height:1.2}
  .numrow span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--warm-dim)}
  @media (max-width:900px){
    .statgrid{grid-template-columns:1fr}
    .plist-box{min-height:0}
    .plist-box .plist{position:static;max-height:384px}
    .numrow{grid-template-columns:repeat(2,1fr)}
  }

  .panel-t .live-t{display:flex;align-items:center;gap:8px;color:var(--pine);font-weight:800}
  .live-t::before{
    content:"";width:8px;height:8px;border-radius:50%;background:var(--pine);flex:none;
    box-shadow:0 0 0 0 rgba(116,169,138,.7);animation:pulse 2.4s infinite;
  }
  @media (prefers-reduced-motion:reduce){.live-t::before{animation:none}}
  .prev .sub-t{
    padding:14px 20px 0;border-top:1px solid rgba(255,220,180,.07);
    font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--warm-dim);
  }
  .feed{list-style:none;margin:0;padding:12px 20px 20px}
  .feed li{position:relative;display:flex;gap:14px;padding:0 0 18px 26px}
  .feed li:last-child{padding-bottom:0}
  .feed li::before{
    content:"";position:absolute;left:6px;top:14px;bottom:-2px;width:2px;
    background:rgba(255,220,180,.1);
  }
  .feed li:last-child::before{display:none}
  .feed li::after{
    content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;
    background:var(--room-3);box-shadow:inset 0 0 0 2px rgba(255,220,180,.2);
  }
  .feed .fm{flex:1;min-width:0}
  .feed .fm b{display:block;font-weight:800;color:var(--cream);
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .feed .fm span{font-size:13.5px;color:var(--warm-dim);font-variant-numeric:tabular-nums}
  .feed .fw{font-size:13px;font-weight:800;color:var(--warm-dim);white-space:nowrap;
            font-variant-numeric:tabular-nums;padding-top:2px}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .step{
    background:var(--room);border:1px solid rgba(255,220,180,.07);
    border-radius:var(--r-lg);padding:26px 24px 28px;
    display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-1);
  }
  .step h3{font-size:18px}
  .step p{color:var(--warm);font-size:15px}
  .step .cmd{
    margin-top:auto;background:rgba(27,19,16,.7);border:1px solid rgba(255,220,180,.09);
    border-radius:12px;padding:11px 14px;font-weight:700;color:var(--pine);
    font-variant-numeric:tabular-nums;word-break:break-all;font-size:14px;
  }

  .faq{max-width:840px;margin:0 auto}
  .qa{
    position:relative;overflow:hidden;
    background:var(--room);
    border:1px solid rgba(255,220,180,.08);
    border-radius:var(--r);
    box-shadow:inset 0 1px 0 rgba(255,220,180,.09),var(--sh-1);
    transition:background .25s var(--ease-out-3),border-color .25s var(--ease-out-3),
               transform .25s var(--ease-out-3),box-shadow .25s var(--ease-out-3);
  }
  .qa + .qa{margin-top:12px}
  .qa:hover{
    transform:translateY(-2px);
    border-color:rgba(255,180,84,.22);
    box-shadow:inset 0 1px 0 rgba(255,220,180,.14),var(--sh-2);
  }
  .qa[open]{border-color:rgba(255,180,84,.24)}
  .qa[open]::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);
  }
  .qa summary{
    display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
    padding:18px 22px;font-weight:800;font-size:16.5px;line-height:1.35;
  }
  .qa summary::-webkit-details-marker{display:none}
  .qa summary:hover{color:var(--amber-soft)}
  .qa summary span{flex:1}
  .qa summary i{position:relative;width:16px;height:16px;flex:none}
  .qa summary i::before,.qa summary i::after{
    content:"";position:absolute;left:0;top:7px;width:16px;height:2px;
    border-radius:1px;background:var(--amber);
    transition:transform .25s cubic-bezier(.2,.9,.3,1.1);
  }
  .qa summary i::after{transform:rotate(90deg)}
  .qa[open] summary i::after{transform:rotate(0)}
  .ans{
    padding:16px 22px 20px;
    background:rgba(10,5,2,.42);
    border-top:1px solid rgba(255,220,180,.07);
  }
  .ans p{margin:0;color:var(--warm);font-size:15.5px}
  .ans a{color:var(--frost)}
  .ans a:hover{color:var(--cream)}
  .qa code{
    background:rgba(255,180,84,.12);color:var(--amber-soft);
    padding:2px 8px;border-radius:7px;font-family:var(--f);font-weight:700;font-size:.94em;
    font-variant-numeric:tabular-nums;
  }
  @media (prefers-reduced-motion:reduce){
    .qa,.qa summary i::before,.qa summary i::after{transition:none}
    .qa:hover{transform:none}
  }
  @media (max-width:520px){
    .qa summary{padding:15px 17px;font-size:15.5px;gap:12px}
    .ans{padding:14px 17px 17px}
  }

  footer{
    background:linear-gradient(0deg,var(--room),var(--night));
    border-top:1px solid rgba(255,220,180,.08);
    padding-top:52px;margin-top:20px;
  }
  .foot-cols{display:grid;grid-template-columns:1.25fr .7fr 1.05fr;gap:44px}
  footer h4{
    margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--warm-dim);
  }
  .foot-brand p{color:var(--warm);font-size:14.5px;margin:16px 0 22px;max-width:34ch}

  .foot-nav{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
  .foot-nav a{color:var(--warm);transition:color .2s var(--ease-out-3)}
  .foot-nav a:hover{color:var(--amber)}

  .foot-ip{
    display:inline-flex;align-items:center;gap:11px;cursor:pointer;
    background:rgba(255,180,84,.08);border:1px solid rgba(255,180,84,.24);
    border-radius:var(--r);padding:13px 17px;color:var(--cream);
    font-family:var(--f);font-weight:800;font-size:16px;line-height:1;
    font-variant-numeric:tabular-nums;
    transition:background .25s var(--ease-out-3),border-color .25s var(--ease-out-3);
  }
  .foot-ip:hover{background:rgba(255,180,84,.16);border-color:rgba(255,180,84,.45)}
  .foot-ip .i{color:var(--amber);font-size:18px}
  .foot-ip b{
    font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--warm-dim);
  }
  .foot-ip.done b{color:var(--amber)}

  .tgrow{
    display:flex;align-items:center;gap:14px;padding:12px 15px;
    border:1px solid rgba(255,220,180,.09);border-radius:var(--r);
    background:rgba(255,220,180,.025);
    transition:background .25s var(--ease-out-3),border-color .25s var(--ease-out-3),
               transform .25s var(--ease-out-3);
  }
  .tgrow + .tgrow{margin-top:10px}
  .tgrow:hover{
    background:rgba(169,216,230,.08);border-color:rgba(169,216,230,.3);
    transform:translateX(3px);
  }
  .tgrow .i{font-size:22px;color:var(--frost)}
  .tgrow .t{display:flex;flex-direction:column;line-height:1.25;font-weight:800;font-size:15px}
  .tgrow .t em{font-style:normal;font-weight:400;font-size:13px;color:var(--warm-dim)}

  .foot-base{
    margin-top:36px;padding:20px 0 28px;
    border-top:1px solid rgba(255,220,180,.07);
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    color:var(--warm-dim);font-size:13px;
  }
  @media (max-width:860px){.foot-cols{grid-template-columns:minmax(0,1fr);gap:30px}}
  @media (max-width:340px){.toptable .nick a{max-width:21vw}}
  @media (max-width:360px){.foot-ip{flex-wrap:wrap;row-gap:6px;font-size:15px;padding:12px 14px}}

  @media (max-width:900px){
    .feats,.steps{grid-template-columns:1fr}
    .shop{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:520px){
    .shop{grid-template-columns:1fr}
  }

  @keyframes rv-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
  @media (prefers-reduced-motion:no-preference){
    .rv :is(.sec-head,.statgrid > *,.numrow > *,.top-more,.stat-more,.pl-back,
            .feats > *,.shop > *,.clock-wrap,.maps > *,.toptable-wrap,.steps > *,
            .faq > *,.sec > .panel,.when-grid > *,.recs > *,.regs-wrap,
            .podium > *,.prof,.pl-top > *,.pl-grid > *,.foot-cols > *):not(.in){opacity:var(--rv-o,0)}
    .rv .in{animation:rv-in .5s var(--ease) var(--rv-d,0ms) both}  }

  @keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
  @keyframes hero-zoom{from{transform:scale(1.07)}to{transform:scale(1)}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion:no-preference){
    .hero-in > *,.page-head > *{animation:rise .9s var(--ease) both}
    .hero-in > :nth-child(2),.page-head > :nth-child(2){animation-delay:.08s}
    .hero-in > :nth-child(3),.page-head > :nth-child(3){animation-delay:.16s}
    .hero-in > :nth-child(4),.page-head > :nth-child(4){animation-delay:.24s}
    .hero-in > :nth-child(5),.page-head > :nth-child(5){animation-delay:.32s}
    .hero-in > :nth-child(6){animation-delay:.4s}
    .hero-bg img{animation:hero-zoom 2.4s var(--ease) both}
    .seam{animation:fade 1s .3s ease both}
  }

  .btn,.nav-tg,.foot-ip,.snow-btn,.seg button,.pager button{
    transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),
               background var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease;
  }
  .nav-tg:hover,.foot-ip:hover{transform:translateY(-2px)}
  .btn:active,.nav-tg:active,.foot-ip:active,.snow-btn:active,.seg button:active,.pager button:active:not(:disabled){
    transform:translateY(0) scale(.96);transition-duration:.08s;
  }
  .btn .i,.nav-tg .i,.foot-ip .i{transition:transform var(--t-mid) var(--ease)}
  .btn:hover .i,.nav-tg:hover .i,.foot-ip:hover .i{transform:scale(1.12) rotate(-6deg)}

  @keyframes pop{0%{transform:scale(.94)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
  .btn.done,.foot-ip.done{animation:pop .45s var(--ease)}

  .step,.mapcard,.numrow > div{
    transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),
               border-color var(--t-mid) ease,background var(--t-mid) ease;
  }
  .step:hover,.mapcard:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:rgba(255,220,180,.16)}
  .numrow > div:hover{transform:translateY(-3px);border-color:rgba(255,220,180,.14)}
  .feat,.good,.qa{transition-timing-function:var(--ease)}

  [data-live],[data-live] *,#plist li > span,#topBody td{
    transition:color .6s ease,background-color .6s ease;
  }

  @keyframes row-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
  @media (prefers-reduced-motion:no-preference){
    #topBody tr,.rank tbody tr{animation:row-in .5s var(--ease) both}
    #topBody tr:nth-child(2),.rank tbody tr:nth-child(2){animation-delay:.03s}
    #topBody tr:nth-child(3),.rank tbody tr:nth-child(3){animation-delay:.06s}
    #topBody tr:nth-child(4),.rank tbody tr:nth-child(4){animation-delay:.09s}
    #topBody tr:nth-child(5),.rank tbody tr:nth-child(5){animation-delay:.12s}
    #topBody tr:nth-child(6),.rank tbody tr:nth-child(6){animation-delay:.15s}
    #topBody tr:nth-child(7),.rank tbody tr:nth-child(7){animation-delay:.18s}
    #topBody tr:nth-child(8),.rank tbody tr:nth-child(8){animation-delay:.21s}
    #topBody tr:nth-child(9),.rank tbody tr:nth-child(9){animation-delay:.24s}
    #topBody tr:nth-child(n+10),.rank tbody tr:nth-child(n+10){animation-delay:.27s}
  }

  @keyframes ans-in{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
  @media (prefers-reduced-motion:no-preference){
    .qa[open] .ans{animation:ans-in .4s var(--ease)}
  }

  .foot-nav a{transition:color var(--t-fast) ease,translate var(--t-mid) var(--ease)}
  .foot-nav a:hover{translate:3px 0}
  .tgrow{transition:background var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-mid) var(--ease)}
  .tgrow .i{transition:transform var(--t-mid) var(--ease)}
  .tgrow:hover .i{transform:scale(1.12)}

  @media (prefers-reduced-motion:no-preference){
    @view-transition{navigation:auto}
    ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
    html{scroll-behavior:smooth}
  }

  @media (prefers-reduced-motion:reduce){
    .btn,.nav-tg,.foot-ip,.step,.mapcard,.numrow > div,.tgrow,.foot-nav a{transition:none}
    .step:hover,.mapcard:hover,.numrow > div:hover,.nav-tg:hover,.foot-ip:hover{transform:none}
  }

  @media (prefers-reduced-motion:no-preference){
    .faq{interpolate-size:allow-keywords}
    .qa::details-content{
      block-size:0;overflow:hidden;
      transition:block-size .6s cubic-bezier(.45,0,.2,1),content-visibility .6s allow-discrete;
    }
    .qa[open]::details-content{block-size:auto}
    .qa[open] .ans{animation-duration:.6s}
  }

  .tgrow:active{
    transform:translateX(3px) scale(.97);transition-duration:.08s;
    background:rgba(169,216,230,.13);box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
  }
  .pod:active{transform:translateY(-1px) scale(.98);transition-duration:.08s}
  .qa summary{transition:color var(--t-fast) ease,transform var(--t-mid) var(--ease)}
  .qa summary:active{transform:scale(.99);transition-duration:.08s}
  .rank tbody tr:active{background:rgba(255,180,84,.08)}
  .foot-nav a:active,.toptable .nick a:active{translate:3px 1px}
  .logo-mark{transition:transform var(--t-mid) var(--ease)}
  .logo:hover .logo-mark{transform:rotate(-7deg) scale(1.06)}
  .logo:active .logo-mark{transform:scale(.92);transition-duration:.08s}
  @media (prefers-reduced-motion:reduce){
    .tgrow:active,.pod:active,.qa summary:active,.logo:hover .logo-mark,.logo:active .logo-mark{transform:none}
  }