/* Learn: the lesson road (menu screen) and the in-match coach. Shares the Play screen's shell
   (.play-arts, .play-shade, .play-foot, .play-sel, .fbtn--go) and the gold tokens from arena.css. */

/* ---------- Learn screen ---------- */
.learn{position:relative;height:100vh;min-height:600px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;
  padding:clamp(150px,19vh,200px) clamp(24px,3.4vw,64px) clamp(18px,3.4vh,36px);transition:--fc .6s ease}
.ln-body{flex:1;min-height:0;display:flex;flex-direction:column}
.ln-head{display:flex;align-items:flex-end;gap:clamp(16px,2vw,32px);flex-wrap:wrap}
.ln-head .play-h{margin-bottom:8px}
.ln-intro{margin:0;font:500 15px/1.35 "Segoe UI",system-ui,sans-serif;color:#e4d9c2;text-shadow:0 1px 4px #000}
.ln-meter{flex:0 1 280px;height:10px;margin-bottom:6px;margin-left:auto;border-radius:99px;background:rgba(6,8,10,.8);border:1px solid rgba(215,166,83,.45);overflow:hidden}
.ln-meter i{display:block;height:100%;width:calc(var(--p) * 100%);min-width:0;border-radius:inherit;background:linear-gradient(90deg,var(--gold3),var(--gold2) 60%,var(--gold1));box-shadow:0 0 12px rgba(255,200,110,.6)}
.ln-rules-btn{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 18px;font-size:15px}
.ln-rules-btn svg{width:20px;height:20px;color:var(--gold1)}

/* The road: lesson cards in a row, their number medallions strung on a gold line. */
.ln-scroll{flex:1;min-height:0;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;margin:0 calc(clamp(24px,3.4vw,64px) * -1);padding:0 clamp(24px,3.4vw,64px);
  scrollbar-width:thin;scrollbar-color:var(--gold2) transparent;scroll-snap-type:x proximity}
.ln-road{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,calc((100vw - var(--rail) - 7vw) / 6 - 18px),250px);gap:clamp(14px,1.4vw,24px);
  margin:0 auto;padding:30px 4px 14px;list-style:none}
.ln-road::before{content:"";position:absolute;left:calc(clamp(150px,calc((100vw - var(--rail) - 7vw) / 6 - 18px),250px) / 2);right:calc(clamp(150px,calc((100vw - var(--rail) - 7vw) / 6 - 18px),250px) / 2);top:30px;height:3px;translate:0 -50%;
  background:linear-gradient(90deg,var(--gold2),var(--gold1) 50%,var(--gold2));box-shadow:0 0 10px rgba(255,200,110,.45),0 2px 4px rgba(0,0,0,.8)}
.ln-stop{position:relative;scroll-snap-align:center;animation:lnIn .5s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 60ms) backwards}
@keyframes lnIn{from{opacity:0;transform:translateY(18px)}}
.ln-card{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:inherit;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ln-num{position:absolute;left:50%;top:0;z-index:2;translate:-50% -50%;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  font:700 20px/1 var(--cond);color:#f5ecd6;border:3px solid transparent;background:radial-gradient(circle at 40% 30%,#2b3339,#0d1114) padding-box,var(--frame) border-box;box-shadow:0 0 0 3px rgba(0,0,0,.55),0 6px 12px rgba(0,0,0,.7)}
.ln-num svg{width:22px;height:22px}
.ln-frame{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;aspect-ratio:3/4.3;padding:16px 14px 14px;border-radius:12px;overflow:hidden;
  border:3px solid transparent;background:linear-gradient(#0c0f12,#0c0f12) padding-box,linear-gradient(rgba(215,166,83,.45),rgba(215,166,83,.45)) border-box;
  box-shadow:0 14px 28px rgba(0,0,0,.65);transition:box-shadow .25s,filter .25s}
.ln-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.72);transition:filter .3s,transform .6s cubic-bezier(.2,.8,.2,1)}
.ln-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(6,8,10,.55) 55%,rgba(6,8,10,.96) 100%),radial-gradient(120% 60% at 50% 100%,color-mix(in srgb,var(--fc) 45%,transparent),transparent 70%)}
.ln-text{position:relative;display:flex;flex-direction:column;gap:6px}
.ln-text b{font:700 clamp(17px,1.35vw,23px)/1.05 var(--cond);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 6px #000}
.ln-text small{font:500 13px/1.3 "Segoe UI",system-ui,sans-serif;color:#dcd1ba}
.ln-tag{position:relative;align-self:flex-start;display:flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:99px;background:rgba(6,8,10,.85);border:1px solid rgba(215,166,83,.4);
  font:700 13px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#f3e3b8}
.ln-tag .pill-ico{width:18px;height:18px}
.ln-tag--done{padding-left:8px;color:#1c1204;background:linear-gradient(180deg,#fff1c4,#e2b25a);border-color:transparent}
.ln-tag--done svg{width:14px;height:14px}
.ln-tag--next{padding-left:10px;color:#fff;background:linear-gradient(180deg,#2f7fcf,#123e74);border-color:rgba(160,210,255,.6)}
.ln-card:hover{transform:translateY(-6px)}
.ln-card:hover .ln-art{filter:saturate(.9) brightness(.85)}
.ln-card.is-on{transform:translateY(-10px)}
.ln-card.is-on .ln-frame{box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 34px color-mix(in srgb,var(--fc) 75%,transparent),0 18px 34px rgba(0,0,0,.7)}
/* The selection frame fades in and out (a gradient border can't transition), so quick picks glide instead of snapping. */
.ln-card::after{content:"";position:absolute;inset:0;z-index:1;border-radius:12px;padding:3px;background:var(--frame);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .3s ease}
.ln-card.is-on::after{opacity:1}
.ln-card{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ln-frame{transition:box-shadow .35s ease,filter .3s}
.ln-card.is-on .ln-art{filter:none;transform:scale(1.04)}
.ln-card.is-next .ln-num{background:radial-gradient(circle at 40% 30%,#3a8fe0,#123e74) padding-box,var(--frame) border-box;animation:lnPulse 1.8s ease-in-out infinite}
@keyframes lnPulse{50%{box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 0 9px rgba(63,168,255,.25),0 0 24px rgba(63,168,255,.7)}}
.ln-card.is-done .ln-num{color:#1c1204;background:radial-gradient(circle at 40% 30%,#fff4d6,#e0b35e 60%,#8a5f22) padding-box,var(--frame) border-box}
.ln-chips{display:flex;flex-wrap:wrap;gap:6px;white-space:normal!important}
.ln-chips span{padding:4px 10px;border-radius:99px;background:rgba(6,8,10,.7);border:1px solid rgba(215,166,83,.35);font:600 12px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#eadfc6}
.learn .play-sel p.ln-chips{margin-top:10px}

/* Rulebook in the inspector dialog. */
.ln-rulebook{width:min(720px,92vw);max-height:84vh;overflow-y:auto;padding:28px 32px;border-radius:10px;border:2px solid transparent;
  background:linear-gradient(180deg,#141b21,#080b0e) padding-box,var(--frame) border-box;box-shadow:0 30px 70px rgba(0,0,0,.8);scrollbar-width:thin;scrollbar-color:var(--gold2) transparent}
.ln-rulebook h3{margin:0 0 6px;font:700 26px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;text-align:center}
.ln-rulebook h4{margin:20px 0 6px;font:700 13px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--gold1)}
.ln-rulebook p{margin:0;font:500 15px/1.55 "Segoe UI",system-ui,sans-serif;color:#e8dec8}

/* ---------- coach (in a lesson) ---------- */
#coach{position:fixed;inset:0;z-index:8800;pointer-events:none;font-family:var(--cond)}
#coach[hidden]{display:none}
.coach-spot{position:fixed;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 3px var(--gold1),0 0 26px 6px rgba(255,205,120,.6),inset 0 0 18px rgba(255,205,120,.35);
  transition:left .35s cubic-bezier(.2,.8,.2,1),top .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
  animation:coachSpot 1.6s ease-in-out infinite}
.coach-spot.is-dim{box-shadow:0 0 0 3px var(--gold1),0 0 26px 6px rgba(255,205,120,.6),inset 0 0 18px rgba(255,205,120,.35),0 0 0 200vmax rgba(3,5,8,.58)}
@keyframes coachSpot{50%{outline:3px solid rgba(251,231,176,.35);outline-offset:6px}}
.coach-drag{position:fixed;inset:0;width:100vw;height:100vh;overflow:visible;pointer-events:none}
.coach-drag-path{fill:none;stroke:var(--gold1);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 12;filter:drop-shadow(0 0 5px rgba(255,190,90,.9)) drop-shadow(0 2px 2px rgba(0,0,0,.8));animation:coachDash .7s linear infinite}
@keyframes coachDash{to{stroke-dashoffset:-14}}
.coach-drag-dot{fill:#fff6da;stroke:var(--gold2);stroke-width:3;filter:drop-shadow(0 0 8px rgba(255,200,110,1))}

.coach-bubble{position:fixed;left:0;top:0;pointer-events:auto;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;width:min(420px,calc(100vw - 24px));padding:16px 18px 16px 16px;
  border-radius:12px;border:2px solid transparent;background:linear-gradient(180deg,rgba(22,28,34,.97),rgba(8,10,13,.97)) padding-box,var(--frame) border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 22px 50px rgba(0,0,0,.75),0 0 30px rgba(255,200,110,.18);
  transition:left .35s cubic-bezier(.2,.8,.2,1),top .35s cubic-bezier(.2,.8,.2,1);animation:coachIn .4s cubic-bezier(.2,.9,.3,1.2)}
@keyframes coachIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
.coach-face{position:relative;width:64px;height:64px;border-radius:50%;overflow:hidden;border:3px solid transparent;background:radial-gradient(circle,#111,#111) padding-box,var(--frame) border-box;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.6)}
.coach-body{min-width:0}
.coach-name{display:flex;align-items:center;gap:10px;font:700 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--gold1)}
.coach-cue{margin-left:auto;display:flex;align-items:center;gap:3px;padding:4px 9px;border-radius:99px;background:linear-gradient(180deg,#2f7fcf,#123e74);color:#fff;letter-spacing:.12em;font-size:11px;animation:coachCue 1.4s ease-in-out infinite}
.coach-cue--wait{background:rgba(255,255,255,.08);color:#cfc4ac;animation:none}
.coach-cue--wait i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:coachDot 1s ease-in-out infinite}
.coach-cue--wait i:nth-child(2){animation-delay:.15s}.coach-cue--wait i:nth-child(3){animation-delay:.3s}
@keyframes coachCue{50%{box-shadow:0 0 14px rgba(63,168,255,.8)}}
@keyframes coachDot{50%{opacity:.25;transform:translateY(-2px)}}
.coach-body p{margin:8px 0 0;font:500 16px/1.45 "Segoe UI",system-ui,sans-serif;color:#f1e8d4}
.coach-body p b{color:#ffe09a;font-weight:700}
.coach-actions{display:flex;justify-content:flex-end;margin-top:12px}
.coach-next{min-width:0;padding:10px 18px;font-size:15px;display:flex;align-items:center;gap:10px}
.coach-next kbd{padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);font:600 10px/1 var(--cond);letter-spacing:.08em;color:#cfe3ff}
/* The notch points at the spotlight: --notch is its offset along the facing edge. */
.coach-notch{position:absolute;width:16px;height:16px;rotate:45deg;background:#0c1014;border:2px solid var(--gold2);display:none}
.coach-bubble[data-side="above"] .coach-notch{display:block;left:var(--notch);bottom:-9px;margin-left:-8px;border-top:0;border-left:0}
.coach-bubble[data-side="below"] .coach-notch{display:block;left:var(--notch);top:-9px;margin-left:-8px;border-bottom:0;border-right:0;background:#161c22}
.coach-bubble[data-side="right"] .coach-notch{display:block;top:var(--notch);left:-9px;margin-top:-8px;border-top:0;border-right:0}
.coach-bubble[data-side="left"] .coach-notch{display:block;top:var(--notch);right:-9px;margin-top:-8px;border-bottom:0;border-left:0}

.coach-hud{position:fixed;left:66px;top:12px;pointer-events:auto;display:flex;align-items:center;gap:14px;padding:7px 8px 7px 16px;border-radius:99px;
  background:rgba(6,8,10,.86);border:1px solid rgba(251,231,176,.35);box-shadow:0 6px 16px rgba(0,0,0,.6)}
.coach-lesson{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.coach-lesson em{font:700 11px/1 var(--cond);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--gold1)}
.coach-lesson b{font:700 15px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase}
.coach-hud small{font:600 11px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#9fd0ff}
.coach-pips{display:flex;gap:4px}
.coach-pips i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14);transition:background .3s}
.coach-pips i.on{background:var(--gold2)}
.coach-pips i.now{background:var(--gold1);box-shadow:0 0 8px rgba(255,210,130,.9)}
.coach-link{padding:6px 12px;border-radius:99px;border:1px solid rgba(251,231,176,.3);background:rgba(255,255,255,.04);cursor:pointer;font:700 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#e9dfc8}
.coach-link:hover{background:rgba(251,231,176,.14)}
/* Lesson complete / practice result (replaces the match end card). */
.ln-end-card{gap:22px;text-align:center}
.ln-end-card .ln-kicker{font:700 15px/1 var(--cond);letter-spacing:.3em;text-transform:uppercase;color:var(--gold1);animation:fade .6s ease .2s backwards}
.ln-end-card h2{font-size:clamp(48px,9vh,96px)}
.ln-learned{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:620px;margin:0;padding:0;list-style:none}
.ln-learned li{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:99px;background:rgba(6,8,10,.8);border:1px solid rgba(215,166,83,.45);
  font:700 14px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;animation:lnIn .45s cubic-bezier(.2,.8,.2,1) calc(.5s + var(--i) * 90ms) backwards}
.ln-learned svg{width:16px;height:16px;color:var(--gold1)}
.ln-reward{display:flex;align-items:center;gap:10px;margin:0;padding:10px 20px;border-radius:12px;border:2px solid transparent;background:linear-gradient(180deg,#1b1714,#0b0908) padding-box,var(--frame) border-box;
  font:700 24px/1 var(--cond);letter-spacing:.06em;animation:lnIn .5s cubic-bezier(.2,.8,.2,1) 1s backwards}
.ln-reward small{font:600 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

@media (max-width:900px){
  .ln-meter{margin-left:0}
  .coach-hud{left:60px;right:10px;gap:10px;flex-wrap:wrap;border-radius:14px}
  .coach-pips{display:none}
  .coach-bubble{grid-template-columns:1fr;padding:14px}
  .coach-face{display:none}
  .coach-body p{font-size:15px}
}
/* Phones: like the Play screen, the page scrolls and the bottom nav bar keeps clear of the Start button. */
@media (max-width:700px){
  .learn{height:auto;min-height:100vh;padding:130px 16px 96px}
  .ln-head{gap:12px}.ln-meter{flex:1 1 100%;order:3}
}
@media (prefers-reduced-motion:reduce){
  .coach-spot,.coach-drag-path,.coach-cue,.ln-card.is-next .ln-num{animation:none}
  .coach-drag-dot{display:none}
}
body.no-motion .coach-drag-dot{display:none}


/* ---------- deck unlocks ---------- */
/* Locked decks (Play, Collection, new-deck picker): greyed art, a lock and the lesson that unlocks it. */
.deck-tile.is-locked img,.champ.is-locked .champ-art img{filter:grayscale(.85) brightness(.45)}
.deck-tile.is-locked{border-style:dashed}
.deck-tile.is-locked small{color:#9fd0ff}
.champ.is-locked .champ-art{position:relative}
.deck-lock{position:absolute;right:8px;top:8px;z-index:2;display:flex;align-items:center;gap:5px;padding:5px 9px 5px 7px;border-radius:99px;background:rgba(6,8,10,.88);border:1px solid rgba(251,231,176,.45);
  font:700 11px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--gold1);box-shadow:0 4px 10px rgba(0,0,0,.6)}
.deck-lock svg{width:13px;height:13px}
.deck-lock em{font-style:normal;white-space:nowrap}
.champ .deck-lock{right:5px;top:5px;padding:4px 7px 4px 6px;font-size:10px;letter-spacing:.06em}
.deck-tile.is-locked:hover .deck-lock,.champ.is-locked:hover .deck-lock{background:linear-gradient(180deg,#2f7fcf,#123e74);color:#fff}

/* Lesson card: the deck(s) it unlocks. */
.ln-unlock{position:relative;display:flex;align-items:center;gap:8px;min-width:0}
.ln-unlock-faces{display:flex;flex:none}
.ln-unlock-faces i{position:relative;width:26px;height:26px;border-radius:50%;overflow:hidden;border:2px solid var(--gold2);background:#111;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.ln-unlock-faces i+i{margin-left:-10px}
.ln-unlock-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.ln-unlock small{display:flex;align-items:center;gap:4px;font:700 10px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#9fd0ff}
.ln-unlock small svg{width:11px;height:11px}
.ln-unlock b{font:700 12px/1.1 var(--cond);letter-spacing:.04em;text-transform:uppercase;color:#fff;overflow-wrap:anywhere}
.ln-unlock.is-done small{color:var(--gold1)}
.ln-unlock.is-done .ln-unlock-faces i{border-color:var(--gold1)}

/* Lesson complete: the decks this win unlocked. */
.ln-new-decks{display:flex;flex-direction:column;align-items:center;gap:12px;animation:lnIn .5s cubic-bezier(.2,.8,.2,1) .8s backwards}
.ln-new-decks>small{font:700 14px/1 var(--cond);letter-spacing:.24em;text-transform:uppercase;color:#9fd0ff}
.ln-new-decks>div{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.ln-new-deck{display:flex;flex-direction:column;align-items:center;gap:8px;animation:lnUnlock .6s cubic-bezier(.2,.9,.3,1.3) calc(1s + var(--i) * 120ms) backwards}
.ln-new-deck i{position:relative;width:74px;height:74px;border-radius:50%;overflow:hidden;border:3px solid transparent;background:radial-gradient(circle,#111,#111) padding-box,var(--frame) border-box;
  box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 26px color-mix(in srgb,var(--fc) 80%,transparent)}
.ln-new-deck b{font:700 13px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase}
@keyframes lnUnlock{from{opacity:0;transform:scale(.4)}}

/* Home: the next unlock. */
.hub-learn{position:absolute;left:clamp(24px,3vw,56px);top:clamp(140px,19vh,200px);z-index:4;display:flex;align-items:center;gap:14px;max-width:min(420px,calc(100% - 48px));padding:12px 16px 12px 12px;cursor:pointer;text-align:left;color:inherit;
  border:2px solid transparent;border-radius:10px;background:linear-gradient(180deg,rgba(18,22,26,.92),rgba(6,8,10,.94)) padding-box,var(--frame) border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 14px 30px rgba(0,0,0,.6),0 0 28px color-mix(in srgb,var(--fc) 45%,transparent);transition:transform .2s,filter .2s;animation:lnIn .6s cubic-bezier(.2,.8,.2,1) .2s backwards}
.hub-learn:hover{transform:translateY(-2px);filter:brightness(1.12)}
.hub-learn-face{position:relative;flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;border:3px solid transparent;background:radial-gradient(circle,#111,#111) padding-box,var(--frame) border-box}
.hub-learn-face .face{filter:grayscale(.6) brightness(.7)}
.hub-learn-face i{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold1);filter:drop-shadow(0 2px 3px #000)}
.hub-learn-face i svg{width:24px;height:24px}
.hub-learn-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.hub-learn-text small{font:700 11px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#9fd0ff}
.hub-learn-text b{font:700 clamp(18px,1.5vw,24px)/1.05 var(--cond);letter-spacing:.05em;text-transform:uppercase;text-shadow:0 2px 4px #000}
.hub-learn-text em{font:600 12px/1 var(--cond);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hub-learn-go{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-left:auto;border-radius:50%;color:#fff;background:linear-gradient(180deg,#2f7fcf,#123e74);box-shadow:0 0 16px rgba(63,168,255,.5);animation:coachCue 1.6s ease-in-out infinite}
.hub-learn-go svg{width:20px;height:20px}
@media (max-width:700px){.hub-learn{top:120px;left:16px;right:16px;max-width:none}}
@media (prefers-reduced-motion:reduce){.hub-learn-go{animation:none}}

/* ---------- lessons in order ---------- */
.ln-card.is-locked .ln-art{filter:grayscale(.9) brightness(.4)}
.ln-card.is-locked:hover .ln-art{filter:grayscale(.7) brightness(.55)}
.ln-card.is-locked.is-on .ln-art{filter:grayscale(.5) brightness(.6)}
.ln-card.is-locked .ln-num{color:var(--gold1);background:radial-gradient(circle at 40% 30%,#1b2025,#07090b) padding-box,var(--frame) border-box}
.ln-card.is-locked .ln-text b{color:#cfc6b3}
.ln-tag--locked{color:#cfc4ac;padding-left:8px;white-space:nowrap;font-size:11px;letter-spacing:.06em}
.ln-tag--locked svg{width:12px;height:12px}
.ln-go{animation:lnGoIn .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes lnGoIn{from{opacity:.4;transform:scale(.96)}}
.ln-go--locked{cursor:pointer;filter:none}
.ln-go--locked span{font-size:clamp(16px,1.4vw,24px)}
.ln-go--locked i{color:var(--gold1)}