/* Astral Allies — Duels of the Continuum */
@font-face{font-family:"AB Cinzel";src:url(../assets/fonts/cinzel.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"AB Cormorant";src:url(../assets/fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"AB Cormorant";src:url(../assets/fonts/cormorant-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
:root{
  --bg:#05060d; --bg2:#0b0e1f; --ink:#e9ecff; --dim:#9aa3c7; --faint:#7f88ad;
  --gold:#f2cf7a; --gold2:#c9a24d; --line:rgba(170,185,255,.16); --glass:rgba(14,18,40,.62);
  --concord:#6fb6ff; --shadowsworn:#b07cff; --veilborn:#5fe3d0;
  --danger:#ff6b8a; --heal:#7cf2b0; --shield:#9fd2ff;
  --serif: "AB Cinzel","AB Cormorant",Georgia,"Times New Roman",serif; --lit: "AB Cormorant",Georgia,serif;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:16px; --safe-b: env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--gold)}
#sky{position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 80% at 50% 0%,#141a3c 0%,#070914 55%,#030409 100%)}
#sky::after{content:"";position:absolute;inset:0;background:url(../assets/sky.webp) center/cover no-repeat;opacity:.28;mix-blend-mode:screen}
#stars{position:fixed;inset:0;z-index:-1;pointer-events:none}
#app{max-width:1000px;margin:0 auto;min-height:100%;padding:0 14px calc(18px + var(--safe-b));position:relative}
.screen{display:none;animation:fadeIn .45s ease both}
.screen.on{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;height:52px;position:sticky;top:0;z-index:5;
  background:#05060d}
.bar::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:linear-gradient(#05060d,rgba(5,6,13,0));pointer-events:none}
.bar .mid{font-family:var(--serif);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--dim);text-align:center;flex:1}
.iconbtn{background:var(--glass);border:1px solid var(--line);border-radius:999px;height:36px;min-width:36px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:var(--ink)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--glass)}
.lang button{border:0;background:transparent;padding:7px 11px;font-size:12px;letter-spacing:.08em;color:var(--dim)}
.lang button.on{background:rgba(242,207,122,.16);color:var(--gold)}

/* title */
.hero{text-align:center;padding:28px 6px 10px}
.hero img.logo{width:132px;height:132px;border-radius:24px;box-shadow:0 0 60px rgba(111,182,255,.25);object-fit:cover}
.hero h1{font-family:var(--serif);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(22px,6vw,38px);margin:18px 0 4px;
  background:linear-gradient(180deg,#fff, #cfd8ff 55%, var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .brand{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.hero p.tag{color:var(--dim);max-width:520px;margin:10px auto 22px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:50px;padding:8px 24px;line-height:1.25;border-radius:999px;border:1px solid rgba(242,207,122,.55);
  background:linear-gradient(180deg,rgba(242,207,122,.22),rgba(242,207,122,.06));color:#fff4d6;font-family:var(--serif);letter-spacing:.12em;text-transform:uppercase;font-size:14px;
  text-decoration:none;transition:transform .15s, box-shadow .2s}
.btn:hover{box-shadow:0 0 24px rgba(242,207,122,.25)}
.btn:active{transform:scale(.97)}
.btn.ghost{border-color:var(--line);background:var(--glass);color:var(--ink)}
.btn.block{width:100%}
.stack{display:flex;flex-direction:column;gap:10px;max-width:420px;margin:0 auto}
.law{max-width:560px;margin:26px auto 8px;padding:18px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.law .lbl{font-family:var(--serif);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.law q{display:block;font-family:var(--lit);font-style:italic;color:#cdd3f5;margin-top:8px;font-size:18px;line-height:1.35;quotes:"\201C" "\201D"}
details.how{max-width:560px;margin:14px auto;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
details.how summary{cursor:pointer;font-family:var(--serif);letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--gold)}
details.how ol{margin:10px 0 2px;padding-left:20px;color:var(--dim)}
details.how li{margin:5px 0}
.foot{text-align:center;color:var(--faint);font-size:12px;margin:22px 0 8px}
.foot a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line)}
.linkbtn{background:none;border:0;color:var(--faint);text-decoration:underline;font-size:12px}

/* headings */
.h2{font-family:var(--serif);text-transform:uppercase;letter-spacing:.14em;font-size:20px;margin:8px 0 2px;text-align:center}
.sub{color:var(--dim);text-align:center;margin:0 0 14px;font-size:13px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:700px){.grid{grid-template-columns:repeat(5,1fr)}}
.card{--fc:var(--concord);position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,#121633,#090b1a);
  border:1px solid color-mix(in srgb,var(--fc) 40%,transparent);box-shadow:0 8px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.03);
  text-align:left;padding:0;width:100%;transition:transform .2s, box-shadow .25s}
.card.f-shadowsworn{--fc:var(--shadowsworn)} .card.f-veilborn{--fc:var(--veilborn)} .card.f-concord{--fc:var(--concord)}
button.card:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 22px color-mix(in srgb,var(--fc) 30%,transparent)}
.art{position:relative;aspect-ratio:1/1;overflow:hidden;background:#0a0c1c}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,6,13,.85))}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(60% 55% at 50% 42%,color-mix(in srgb,var(--fc) 45%,transparent),transparent 70%),
             radial-gradient(120% 90% at 50% 120%,color-mix(in srgb,var(--fc) 25%,#05060d),#05060d)}
.ph svg{width:46%;height:46%;filter:drop-shadow(0 0 14px var(--fc));color:#fff}
.ph .note{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--fc) 70%,#fff);opacity:.85}
.ph::before{content:"";position:absolute;inset:10%;border:1px solid color-mix(in srgb,var(--fc) 45%,transparent);border-radius:50%;opacity:.5}
.meta{padding:9px 11px 11px}
.nm{font-family:var(--serif);font-size:15px;letter-spacing:.06em;line-height:1.15}
.tt{font-size:11.5px;color:var(--dim);margin-top:1px}
.fac{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--fc) 75%,#fff)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--fc);box-shadow:0 0 8px var(--fc)}
.badge{position:absolute;top:8px;right:8px;z-index:2;background:rgba(5,6,13,.7);border:1px solid var(--line);border-radius:999px;font-size:10px;padding:3px 8px;color:var(--gold);letter-spacing:.06em}

/* sheet */
.sheet{position:fixed;inset:0;z-index:20;display:none;align-items:flex-end;justify-content:center;background:rgba(2,3,8,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet.on{display:flex;animation:fadeIn .25s both}
.sheet .panel{width:100%;max-width:560px;max-height:92vh;overflow:auto;background:linear-gradient(180deg,#0f1330,#080a17);border:1px solid var(--line);border-bottom:0;
  border-radius:22px 22px 0 0;padding:16px 16px calc(18px + var(--safe-b))}
@media (min-width:700px){.sheet{align-items:center}.sheet .panel{border-radius:22px;border-bottom:1px solid var(--line)}}
.detail{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:start}
.detail .card{pointer-events:none}
.kv{font-size:12.5px;color:var(--dim);margin:2px 0}
.kv b{color:var(--ink);font-weight:500}
.stats{display:grid;grid-template-columns:auto 1fr auto;gap:5px 8px;align-items:center;margin-top:10px;font-size:12px}
.stats .bar2{height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.stats .bar2 i{display:block;height:100%;background:linear-gradient(90deg,var(--fc,#6fb6ff),#fff)}
.abil{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.abil div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.abil b{font-family:var(--serif);letter-spacing:.05em;font-weight:500}
.abil span{display:block;font-size:12.5px;color:var(--dim)}
.abil em{font-style:normal;font-size:11px;color:var(--faint)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.row .btn{flex:1;min-width:150px}
.os{font-size:12px;color:var(--dim);text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);padding-bottom:1px}

/* ladder */
.ladder{display:flex;flex-direction:column;gap:8px;max-width:560px;margin:0 auto}
.rung{--fc:var(--concord);display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:14px;border:1px solid var(--line);background:var(--glass)}
.rung.f-shadowsworn{--fc:var(--shadowsworn)} .rung.f-veilborn{--fc:var(--veilborn)}
.rung .mini{width:48px;height:48px;border-radius:10px;overflow:hidden;position:relative;flex:none;border:1px solid color-mix(in srgb,var(--fc) 45%,transparent)}
.rung .mini .ph svg{width:60%;height:60%} .rung .mini .ph .note,.rung .mini .ph::before{display:none}
.rung .mini img{width:100%;height:100%;object-fit:cover}
.rung .info{flex:1;min-width:0}
.rung .n{font-family:var(--serif);font-size:14px;overflow-wrap:anywhere}
.rung .s{font-size:11px;color:var(--dim)}
.rung .st{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.rung.done{opacity:.55} .rung.done .st{color:var(--heal)}
.rung.cur{border-color:rgba(242,207,122,.6);box-shadow:0 0 22px rgba(242,207,122,.12)} .rung.cur .st{color:var(--gold)}
.adv{font-size:10.5px} .adv.up{color:var(--heal)} .adv.dn{color:var(--danger)}
.me{display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto 14px;padding:10px;border-radius:14px;border:1px solid var(--line);background:rgba(242,207,122,.05)}
.me .mini{width:60px;height:60px}
.sticky-cta{position:sticky;bottom:0;padding:14px 0 calc(6px + var(--safe-b));background:linear-gradient(#05060d00,#05060dee 40%);max-width:560px;margin:0 auto}

/* battle */
.arena{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);padding:14px 10px 12px;margin-top:2px;min-height:300px}
.arena .realm{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.32;filter:saturate(1.1)}
.arena::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 40%,transparent,rgba(5,6,13,.8));pointer-events:none}
.duel{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}
.vs{font-family:var(--serif);color:var(--gold);letter-spacing:.2em;font-size:13px;opacity:.85}
.fighter{position:relative;display:flex;flex-direction:column;gap:6px}
.fighter .card{max-width:190px;margin:0 auto}
.fighter .meta{padding:7px 9px 8px}
.fighter .nm{font-size:14px}
.hpwrap{max-width:190px;width:100%;margin:0 auto}
.hpbar{position:relative;height:10px;border-radius:10px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.hpbar .fill{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,#3ad19a,#9ff0c8);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.hpbar .lag{position:absolute;inset:0 auto 0 0;width:100%;background:rgba(255,107,138,.55);transition:width .9s .25s ease}
.hpbar.mid .fill{background:linear-gradient(90deg,#e0b84a,#ffe08a)} .hpbar.low .fill{background:linear-gradient(90deg,#e0466a,#ff8aa3)}
.hpbar .sh{position:absolute;inset:0 0 0 auto;background:repeating-linear-gradient(45deg,rgba(159,210,255,.75) 0 4px,rgba(159,210,255,.45) 4px 8px);transition:width .35s}
.hpnum{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:3px;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:4px;min-height:18px;justify-content:center}
.chip{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:999px;border:1px solid var(--line);background:rgba(5,6,13,.6);color:var(--dim)}
.chip.bad{color:#ffb3c2;border-color:rgba(255,107,138,.35)} .chip.good{color:#bfe6ff;border-color:rgba(159,210,255,.35)}
.float{position:absolute;left:50%;top:38%;transform:translate(-50%,0);font-family:var(--serif);font-weight:700;font-size:26px;pointer-events:none;z-index:4;
  text-shadow:0 2px 12px rgba(0,0,0,.8);animation:floatUp 1.1s ease-out forwards;white-space:nowrap;line-height:1}
.float.dmg{color:#ff8aa3} .float.heal{color:var(--heal)} .float.info{color:#dfe6ff;font-size:14px;letter-spacing:.08em;text-transform:uppercase} .float.crit{color:#ffd36b;font-size:32px} .float.shield{color:var(--shield);font-size:20px}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,8px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.08)}30%{transform:translate(-50%,0) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-6px) scale(1)}}
.shake{animation:shake .38s}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px) rotate(-1deg)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.lunge-r{animation:lungeR .35s} .lunge-l{animation:lungeL .35s}
@keyframes lungeR{50%{transform:translateX(14px) scale(1.03)}} @keyframes lungeL{50%{transform:translateX(-14px) scale(1.03)}}
.ko .card{filter:grayscale(.9) brightness(.5);transition:filter .8s}
.fxl{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:var(--r);opacity:0}
.fxl.go{animation:fxPulse .6s ease-out}
@keyframes fxPulse{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.fx-lightning{background:radial-gradient(circle at 50% 40%,rgba(200,230,255,.95),rgba(111,182,255,.4) 35%,transparent 70%)}
.fx-void{background:radial-gradient(circle,rgba(176,124,255,.85),rgba(40,10,70,.6) 45%,transparent 75%)}
.fx-fire{background:radial-gradient(circle at 50% 70%,rgba(255,170,90,.9),rgba(255,80,60,.45) 40%,transparent 75%)}
.fx-frost{background:radial-gradient(circle,rgba(200,245,255,.9),rgba(95,227,208,.35) 45%,transparent 75%)}
.fx-time{background:conic-gradient(from 0deg,rgba(242,207,122,.0),rgba(242,207,122,.8),rgba(111,182,255,.5),rgba(242,207,122,0))}
.fx-star{background:radial-gradient(circle,rgba(255,255,255,.95),rgba(242,207,122,.5) 35%,transparent 70%)}
.fx-stone{background:radial-gradient(circle,rgba(255,220,170,.75),rgba(90,70,60,.5) 50%,transparent 80%)}
.fx-moon{background:radial-gradient(circle at 50% 30%,rgba(230,235,255,.95),rgba(176,124,255,.35) 45%,transparent 75%)}
.fx-reality{background:linear-gradient(120deg,rgba(255,95,168,.5),rgba(111,182,255,.6),rgba(95,227,208,.5))}
.fx-heal{background:radial-gradient(circle,rgba(124,242,176,.75),transparent 70%)}
.fx-shield,.fx-guard{background:radial-gradient(circle,transparent 45%,rgba(159,210,255,.75) 62%,transparent 72%)}
.fx-strike{background:radial-gradient(circle,rgba(255,255,255,.6),transparent 60%)}
.advline{position:relative;z-index:1;text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:10px;color:var(--dim)}
.advline.up{color:var(--heal)} .advline.dn{color:#ffb3c2}
.log{margin:10px 0 8px;min-height:64px;padding:8px 12px;border-radius:14px;background:var(--glass);border:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.log p{margin:1px 0;overflow-wrap:anywhere}
.log p:last-child{color:var(--ink)}
.log .aeth{color:var(--gold);font-family:var(--lit);font-style:italic;font-size:15px}
.turn{text-align:center;font-family:var(--serif);letter-spacing:.18em;text-transform:uppercase;font-size:11.5px;color:var(--gold);min-height:18px;margin-bottom:6px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.act{position:relative;min-height:66px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  text-align:left;padding:9px 12px;display:flex;flex-direction:column;justify-content:center;gap:2px;transition:transform .12s,border-color .2s,opacity .2s}
.act b{font-family:var(--serif);font-weight:500;letter-spacing:.05em;font-size:14px}
.act span{font-size:11px;color:var(--dim);line-height:1.25;overflow-wrap:anywhere}
.act.ab{border-color:color-mix(in srgb,var(--fc,#6fb6ff) 45%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--fc,#6fb6ff) 18%,transparent),rgba(255,255,255,.015))}
.act:active{transform:scale(.97)}
.act:disabled{opacity:.42;cursor:default}
.act.ab{padding-top:20px}
.act .cdb{position:absolute;top:6px;right:10px;font-size:10px;line-height:1.2;color:var(--gold);letter-spacing:.06em}
.actions.wait .act{opacity:.5;pointer-events:none}
@media (min-width:700px){
  .fighter .card,.hpwrap{max-width:230px}
  .actions{grid-template-columns:repeat(4,1fr)}
  .arena{min-height:380px}
}
@media (max-height:700px){ .fighter .card,.hpwrap{max-width:150px} }

/* result overlay */
.result{text-align:center;padding:18px 6px}
.result h2{font-family:var(--serif);letter-spacing:.2em;text-transform:uppercase;font-size:30px;margin:6px 0;
  background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.result.lose h2{background:linear-gradient(180deg,#fff,#b8b0ff);-webkit-background-clip:text;background-clip:text}
.result .aethq{font-family:var(--lit);font-style:italic;font-size:19px;color:#cdd3f5;margin:8px auto 16px;max-width:420px}
.result .card{max-width:150px;margin:0 auto}
.ctas{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:18px;font-size:13px}
.ctas .soft{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.ctas .soft a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line)}
.asc .pair{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px auto;max-width:520px}
.asc .pair .mini{width:40px;height:40px;border-radius:9px;overflow:hidden;position:relative;border:1px solid var(--line)}
.asc .pair .mini img{width:100%;height:100%;object-fit:cover}
.asc .pair .mini .ph svg{width:60%;height:60%} .asc .pair .mini .ph .note,.asc .pair .mini .ph::before{display:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.mini{position:relative;overflow:hidden;border-radius:10px;flex:none;background:#0a0c1c}
.mini img{width:100%;height:100%;object-fit:cover;display:block}
.mini .ph svg{width:60%;height:60%} .mini .ph .note,.mini .ph::before{display:none}
.me .info{min-width:0}

/* v2: sound toggle, daily duel, share card */
.rt{display:inline-flex;align-items:center;gap:6px}
.iconbtn.snd{width:36px;padding:0;color:var(--gold)}
.iconbtn.snd.off{color:var(--faint)}
.np{text-align:center;font-size:11.5px;color:var(--faint);margin:12px auto 0;min-height:16px;letter-spacing:.02em}
.np a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line);white-space:nowrap}
.daily{max-width:560px;margin:22px auto 6px;padding:14px 14px 12px;border-radius:var(--r);border:1px solid rgba(242,207,122,.38);
  background:linear-gradient(180deg,rgba(242,207,122,.09),rgba(14,18,40,.7));box-shadow:0 0 34px rgba(242,207,122,.08)}
.daily .dh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.daily .lbl{font-family:var(--serif);letter-spacing:.2em;text-transform:uppercase;font-size:14px;color:var(--gold)}
.daily .dd{font-size:12px;color:var(--dim)}
.daily .dm{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:10px}
.daily .vs{font-family:var(--serif);color:var(--gold);font-size:12px;letter-spacing:.2em}
.dside{--fc:var(--concord);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0}
.dside .mini{width:60px;height:60px;border:1px solid color-mix(in srgb,var(--fc) 55%,transparent)}
.dinfo{min-width:0;display:flex;flex-direction:column;align-items:center}
.dinfo b{font-family:var(--serif);font-weight:500;font-size:14px;letter-spacing:.04em;overflow-wrap:anywhere}
.dinfo span{font-size:11px;color:var(--dim);line-height:1.25;overflow-wrap:anywhere}
.dinfo .dl{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.daily .ds{margin:0 0 10px;font-size:12.5px;color:var(--dim);text-align:center}
.dres{text-align:center;font-size:12.5px;margin:0 0 10px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.04)}
.dres.win{color:var(--heal)} .dres.lose{color:#ffb3c2}
.dfoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.dfoot .dst{color:var(--gold)}
.dnote{font-size:12.5px;color:var(--dim);margin:6px auto 0;max-width:420px}
.sharebox{max-width:420px;margin:22px auto 0;padding:14px;border-radius:var(--r);border:1px solid var(--line);background:var(--glass)}
.sharebox .lbl{font-family:var(--serif);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.shimg{position:relative;aspect-ratio:1080/1350;border-radius:12px;overflow:hidden;background:#0a0c1c;border:1px solid var(--line);max-width:300px;margin:0 auto}
.shimg img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.shimg.ready img{opacity:1} .shimg.ready .shwait{display:none}
.shwait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--dim)}
.sharebox .row{margin-top:12px}
.sharebox .row{flex-direction:column;gap:8px}
.sharebox .btn{flex:none;width:100%;min-width:0;font-size:12.5px;min-height:46px}
.sharebox a.btn[aria-disabled]{opacity:.5;pointer-events:none}
.shmsg{margin:8px 0 0;font-size:12px;color:var(--heal);min-height:16px}
@media (max-width:360px){.bar .mid{font-size:10.5px;letter-spacing:.08em}.lang button{padding:7px 9px}}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.card:focus-visible,.act:focus-visible,.btn:focus-visible{outline-offset:3px}
.daily .dm{align-items:start}
.daily .vs{align-self:center}