/* Battle of Talingchan — bot mode. Original board layout & UI.
   Card art is referenced from cdn.bottcg.com per the game's official assets. */
:root{
  --bg:#0d1117; --bg2:#151b24; --panel:#1c2530; --panel2:#232f3d;
  --line:#2d3a4a; --line2:#3c4d61;
  --text:#e8eef5; --muted:#93a2b4; --dim:#6b7a8d;
  --red:#e5484d; --blue:#3aa0ff; --purple:#a877ff; --green:#46c56a;
  --gold:#f2c14e; --accent:#f2c14e;
  --danger:#e5484d; --ok:#46c56a;
  --shadow:0 6px 20px rgba(0,0,0,.45);
  --radius:12px;
  --card-w:92px; --card-h:128px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Noto Sans Thai","Sarabun",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:radial-gradient(1200px 800px at 50% -10%, #17202b 0%, var(--bg) 60%);
  color:var(--text); overflow:hidden; user-select:none; -webkit-user-select:none;
}
button{font-family:inherit;cursor:pointer;color:var(--text)}
img{-webkit-user-drag:none;user-drag:none}
.hidden{display:none !important}

/* ============ Buttons ============ */
.btn{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2); color:var(--text);
  padding:10px 18px; border-radius:10px; font-size:15px; font-weight:600;
  transition:transform .08s, box-shadow .12s, border-color .12s;
}
.btn:hover{border-color:var(--gold); box-shadow:0 0 0 2px rgba(242,193,78,.15)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#e9b949,#d19b2b);color:#1a1206;border-color:#f2c14e}
.btn.primary:hover{box-shadow:0 0 18px rgba(242,193,78,.45)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ============ Screens ============ */
.screen{position:fixed;inset:0;display:flex;flex-direction:column}
/* the lobby scrolls when it is taller than the screen (phones); auto margins keep it centred otherwise */
#screen-menu{align-items:center;justify-content:flex-start;text-align:center;gap:8px;isolation:isolate;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px 12px}
#screen-menu>*{flex-shrink:0}
#screen-menu>.logo{margin-top:auto}
/* lobby: the official banner as a soft, dimmed backdrop */
#screen-menu::before{content:"";position:fixed;inset:-20px;z-index:-2;background:url("../assets/bg/menu.jpg") center/cover no-repeat;opacity:.22;filter:blur(3px) saturate(1.15)}
#screen-menu::after{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(900px 600px at 50% 40%,rgba(13,17,23,.35),rgba(13,17,23,.9))}
.logo{font-size:min(9vw,64px);font-weight:800;letter-spacing:1px;
  background:linear-gradient(180deg,#fff,#f2c14e);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 30px rgba(242,193,78,.15)}
.logo small{display:block;font-size:16px;font-weight:600;color:var(--muted);letter-spacing:4px;margin-top:4px;-webkit-text-fill-color:var(--muted)}
.menu-sub{color:var(--muted);margin:6px 0 26px;font-size:15px}
.menu-btns{display:flex;flex-direction:column;gap:14px;width:min(340px,80vw)}
.menu-foot{margin-top:auto;padding-top:18px;color:var(--dim);font-size:12px;text-align:center;width:100%}
/* short screens (laptops, landscape phones): tighten the lobby so it fits without scrolling */
@media (max-height:760px){
  .logo{font-size:min(9vw,50px)}
  .menu-sub{margin:4px 0 14px}
  .menu-btns{gap:9px}
  .menu-btns .btn{padding:8px 16px}
  .menu-foot{padding-top:10px}
}
#screen-menu .hint{max-width:460px}
.menu-foot a{color:var(--muted)}

/* ============ Generic top bar ============ */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--bg2)}
.topbar h2{font-size:19px;font-weight:700}
.topbar .spacer{flex:1}
.pill{background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--muted)}
.pill b{color:var(--gold)}

/* ============ Deck / collection grids ============ */
.body-scroll{flex:1;overflow-y:auto;padding:18px}
.set-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.deck-card{
  width:230px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;
  transition:transform .1s,border-color .12s,box-shadow .12s;cursor:pointer;
}
.deck-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow)}
.deck-card .thumb{height:150px;background:#0a0e13 center/cover no-repeat;display:flex;align-items:flex-end}
.deck-card .thumb .tag{background:rgba(0,0,0,.6);font-size:12px;padding:3px 8px;border-radius:6px;margin:8px;color:var(--gold)}
.deck-card .meta{padding:12px 14px}
.deck-card .meta h3{font-size:17px;margin-bottom:4px}
.deck-card .meta p{font-size:13px;color:var(--muted);line-height:1.5}
.color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle}

/* card tiles (collection / deckbuilder) */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.card-tile{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#0a0e13;aspect-ratio:388/540;cursor:pointer;transition:transform .08s,border-color .1s}
.card-tile:hover{transform:scale(1.04);border-color:var(--gold);z-index:2}
.card-tile img{width:100%;height:100%;object-fit:cover;display:block}
.card-tile .cnt{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.75);border:1px solid var(--line2);border-radius:6px;font-size:12px;padding:1px 7px;font-weight:700;color:var(--gold)}
.card-tile.dim{opacity:.32;filter:grayscale(.7)}
.card-tile.dim.craftable{opacity:1;filter:none}
.card-tile.dim.craftable img{opacity:.42;filter:grayscale(.6)}
.card-tile .rar{position:absolute;left:4px;top:4px;font-size:10px;padding:1px 5px;border-radius:5px;background:rgba(0,0,0,.7);color:#fff;font-weight:700}
.only1-badge{position:absolute;left:0;right:0;top:20px;text-align:center;font-size:9px;font-weight:800;color:#1a1206;background:linear-gradient(90deg,transparent,var(--gold),transparent);padding:1px 0;letter-spacing:.5px}

/* ============ GAME BOARD ============ */
#screen-game{background:linear-gradient(180deg,#0b1320,#0d1117)}
.gametop{display:flex;align-items:center;gap:10px;padding:6px 14px;background:rgba(0,0,0,.35);border-bottom:1px solid var(--line);font-size:13px}
.gametop .spacer{flex:1}
.phase-track{display:flex;gap:4px}
.phase-track .ph{padding:4px 10px;border-radius:7px;background:var(--panel);color:var(--muted);font-size:12px;border:1px solid transparent}
.phase-track .ph.on{background:linear-gradient(180deg,#e9b949,#d19b2b);color:#1a1206;font-weight:700;border-color:#f2c14e}

.game-body{flex:1;display:flex;min-height:0;position:relative}
/* ---- the two playmats: sized in JS (--mat-w/--mat-h) to the mat's exact proportions ---- */
.board{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:4px;position:relative;min-height:0;min-width:0;overflow:hidden;--mat-w:600px;--mat-h:350px}
.mat{position:relative;width:var(--mat-w);height:var(--mat-h);flex:0 0 auto;
  --mc-h:calc(var(--mat-h)*.285); --mc-w:calc(var(--mc-h)*.716)}
.mat-bg{position:absolute;inset:0;background:center/100% 100% no-repeat;border-radius:calc(var(--mat-h)*.025);box-shadow:0 8px 26px rgba(0,0,0,.6)}
.mat.foe .mat-bg{transform:rotate(180deg)}
/* the turn player's mat: a gold aura (a ring + soft glow inside and out) that breathes slowly */
.mat.turn .mat-bg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 3px #f2c14e,0 0 12px 4px rgba(242,193,78,.8),inset 0 0 calc(var(--mat-h)*.09) calc(var(--mat-h)*.015) rgba(242,193,78,.75);
  animation:turnAura 2.2s ease-in-out infinite}
@keyframes turnAura{0%,100%{opacity:.65}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.mat.turn .mat-bg::after{animation:none;opacity:.85}}
.mz{position:absolute;display:flex;align-items:center;justify-content:center}
.mz-tag{position:absolute;left:50%;bottom:1px;transform:translateX(-50%);font-size:clamp(9px,calc(var(--mat-h)*.036),13px);font-weight:700;line-height:1.5;color:#fff;background:rgba(10,14,20,.8);padding:0 6px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:6}
.mat.foe .mz-tag{bottom:auto;top:1px}
.mz-tag.warn{background:rgba(170,20,32,.92)}
/* Avatar Zone + Magic Zone: same slot columns so worn cards line up with their Avatar */
.slot-row{display:flex;align-items:center;justify-content:center;gap:calc(var(--mat-w)*.012);height:100%;width:100%}
.slot{width:calc(var(--mc-h)*.82);height:100%;display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto}
/* 5–6 Avatars (BT04-059 พิภพรัททาทุย): the cards and their Magic Zone column shrink so the row still fits */
.slot-row.many5{--mc-h:calc(var(--mat-h)*.285*.8);--mc-w:calc(var(--mat-h)*.285*.8*.716)}
.slot-row.many6{--mc-h:calc(var(--mat-h)*.285*.66);--mc-w:calc(var(--mat-h)*.285*.66*.716)}
.z-avatar.drop-hover,body.drag-avatar .mat.me .z-avatar{outline:3px dashed var(--gold);outline-offset:-3px;background:rgba(242,193,78,.14);border-radius:8px}
/* LIFE zone */
.z-life{flex-direction:column;border-radius:8px}
.lcard{width:var(--life-w,calc(var(--mat-w)*.105));aspect-ratio:63/88;border-radius:4px;background:var(--card-back) center/cover no-repeat,#1a232e;border:1px solid rgba(0,0,0,.55);box-shadow:0 2px 5px rgba(0,0,0,.55);flex:0 0 auto;overflow:hidden}
.lcard+.lcard{margin-top:calc(var(--life-w,calc(var(--mat-w)*.105))*1.397*-.66)}
.lcard.up{border:2px solid var(--red);cursor:pointer}
.lcard.up img{width:100%;height:100%;object-fit:cover;display:block}
.z-life.life-target{outline:3px dashed var(--red);outline-offset:-2px;background:rgba(229,72,77,.2);animation:lifePulse 1s infinite;cursor:crosshair}
@keyframes lifePulse{0%,100%{box-shadow:0 0 10px rgba(229,72,77,.35)}50%{box-shadow:0 0 22px rgba(229,72,77,.75)}}
.life-hit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;font-size:12px;font-weight:800;color:#ffe1e1;background:rgba(120,10,20,.9);border:1px solid var(--red);border-radius:8px;padding:3px 8px;white-space:nowrap}
/* Hell / Deck */
.z-hell,.z-deck{cursor:pointer}
.pcard{height:88%;aspect-ratio:63/88;border-radius:5px;overflow:hidden;box-shadow:0 3px 8px rgba(0,0,0,.6);background:#0a0e13;flex:0 0 auto}
.pcard img{width:100%;height:100%;object-fit:cover;display:block}
.pcard.back{background:var(--card-back) center/cover no-repeat,#1a232e}
.pcard.deck-top{outline:2px solid var(--gold);box-shadow:0 0 12px rgba(242,193,78,.55)}
.pcard.empty{background:rgba(0,0,0,.06);box-shadow:none;border:2px dashed rgba(0,0,0,.28)}
.z-hell:hover .pcard,.z-deck:hover .pcard{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.7)}
.z-hell.can-act .pcard{outline:3px solid var(--gold);box-shadow:0 0 16px rgba(242,193,78,.85)}
/* Land Magic Zone: the Land lies sideways, like on a real mat */
.z-land{z-index:5}
.mat .fcard.landcard{width:calc(var(--mat-h)*.112);height:calc(var(--mat-h)*.112*1.397);transform:rotate(90deg);border-width:1.5px;cursor:pointer}
@media (hover:hover){ .mat .fcard.landcard:hover{transform:rotate(90deg) scale(2.6);z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.7)} }
/* a mat whose Land Magic Zone is portrait (e.g. BoT #1): the Land stands upright */
.mat.land-upright .fcard.landcard{transform:none;width:calc(var(--mat-h)*.16);height:calc(var(--mat-h)*.16*1.397)}
@media (hover:hover){ .mat.land-upright .fcard.landcard:hover{transform:scale(2)} }
/* the opponent's hand along the far edge of their mat */
.z-foehand{pointer-events:none}
.z-foehand .back{height:66%;aspect-ratio:63/88;border-radius:3px;background:var(--card-back) center/cover no-repeat,#1a232e;border:1px solid rgba(0,0,0,.5);box-shadow:1px 0 3px rgba(0,0,0,.5);flex:0 0 auto}
.z-foehand .back+.back{margin-left:calc(var(--mat-h)*-.035)}
.mat.foe .z-foehand .mz-tag{top:auto;bottom:1px;left:auto;right:4px;transform:none}

/* Avatar/field cards */
.fcard{width:var(--card-w);height:var(--card-h);border-radius:8px;position:relative;overflow:hidden;border:2px solid var(--line2);background:#0a0e13;transition:transform .1s,box-shadow .1s,border-color .1s;flex:0 0 auto}
.fcard img{width:100%;height:100%;object-fit:cover;display:block}
.fcard.tapped{transform:rotate(90deg) scale(.86)}
.fcard.can-act{border-color:var(--gold);box-shadow:0 0 12px rgba(242,193,78,.5);cursor:pointer}
.fcard.selected{border-color:#fff;box-shadow:0 0 0 3px var(--gold)}
.fcard.target{cursor:crosshair;border-color:var(--red);box-shadow:0 0 12px rgba(229,72,77,.6)}
.fcard .pw{position:absolute;left:2px;bottom:2px;background:rgba(0,0,0,.8);border-radius:5px;font-size:13px;font-weight:800;padding:0 5px;color:#fff;min-width:20px;text-align:center}
.fcard .pw.buff{color:#9ff2a8}.fcard .pw.nerf{color:#ff9a9a}
.fcard .cst{position:absolute;left:2px;top:2px;background:rgba(0,0,0,.7);border-radius:5px;font-size:11px;padding:0 5px;font-weight:700}
.fcard .atkmark{position:absolute;right:2px;top:2px;font-size:12px}
.fcard .prot{position:absolute;right:2px;bottom:2px;font-size:12px;background:rgba(0,0,0,.6);border-radius:5px;padding:0 3px}
.fcard.no-target{opacity:.45;filter:grayscale(.6)}
.fcard.drop-ok{border-color:var(--gold);box-shadow:0 0 12px rgba(242,193,78,.6)}
.fcard.drop-ok.drop-hover{transform:scale(1.08);border-color:#fff}
.fcard.summonsick::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(0,0,0,.12) 6px,rgba(0,0,0,.12) 12px)}
/* the other side's moves: card drop-in, "being used / attacking" highlights (scale/translate don't touch a tapped card's rotate) */
.fcard.enter{animation:cardEnter .55s cubic-bezier(.2,1.3,.4,1) backwards}
@keyframes cardEnter{0%{opacity:0;scale:1.45;translate:0 -26px;filter:brightness(2.2)}60%{opacity:1;filter:brightness(1.4)}100%{opacity:1;scale:1;translate:0 0;filter:none}}
.fcard.act-src{border-color:#ff6b6b;box-shadow:0 0 0 2px #ff6b6b,0 0 22px rgba(255,107,107,.85);animation:actPulse .55s ease-in-out infinite alternate;z-index:3}
.fcard.act-tgt{border-color:#ffd66b;box-shadow:0 0 0 2px #ffd66b,0 0 22px rgba(255,214,107,.85);animation:actPulse .55s ease-in-out infinite alternate;z-index:3}
.z-life.act-tgt{box-shadow:0 0 0 3px #ffd66b,0 0 26px rgba(255,214,107,.8);animation:actPulse .55s ease-in-out infinite alternate}
@keyframes actPulse{from{filter:brightness(1)}to{filter:brightness(1.35)}}
.fcard.enter.act-src,.fcard.enter.act-tgt{animation:cardEnter .55s cubic-bezier(.2,1.3,.4,1) backwards,actPulse .55s ease-in-out infinite alternate}
/* small pop-up for the other side's summon / ability / attack (the board stays visible around it) */
.fx-pop.act{top:40%;gap:5px}
.fx-cards{display:flex;align-items:center;gap:8px}
.fx-card.sm{width:128px;height:179px;border-width:2px}
.fx-vs{font-size:28px;font-weight:900;color:#ff6b6b;text-shadow:0 0 10px rgba(0,0,0,.9)}
.fx-life{width:96px;height:134px;border-radius:10px;border:2px dashed #ffd66b;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:#ffd66b;background:rgba(0,0,0,.7)}
.fx-pop.act.k-attack .fx-cap{border-color:#ff6b6b;color:#ffb4b4}
.fx-pop.act.k-ability .fx-cap{border-color:#b388ff;color:#e0ccff}
.fx-pop.act.k-ability .fx-card{border-color:#b388ff;box-shadow:0 0 34px rgba(179,136,255,.5),0 14px 30px rgba(0,0,0,.7)}
@media (max-width:560px){ .fx-card.sm{width:96px;height:134px} .fx-life{width:72px;height:100px;font-size:16px} .fx-pop.act .fx-cap{font-size:13px} }
/* cards on the mat */
.mat .fcard{width:var(--mc-w);height:var(--mc-h);border-width:2px;border-radius:calc(var(--mc-h)*.06)}
.mat .fcard.tapped{transform:rotate(90deg) scale(.8)}
@media (hover:hover){ .mat .slot .fcard:not(.tapped):hover{transform:scale(1.45);z-index:30;box-shadow:0 10px 26px rgba(0,0,0,.7)} }
/* a Modification / worn crew in the Magic Zone, fanned when there are several */
.acard{position:absolute;left:50%;top:50%;width:calc(var(--mc-w)*.9);height:calc(var(--mc-h)*.9);border-radius:5px;overflow:hidden;border:2px solid #b58cff;background:#0a0e13;box-shadow:0 2px 6px rgba(0,0,0,.6);cursor:pointer;
  transform:translate(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * 24%),-50%);z-index:calc(2 + var(--i))}
.acard.crew{border-color:#6fd18a}
.acard img{width:100%;height:100%;object-fit:cover;display:block}
.acard.target{border-color:var(--red);box-shadow:0 0 12px rgba(229,72,77,.85);animation:lifePulse 1s infinite}
.acard.can-act{border-color:var(--gold);box-shadow:0 0 10px rgba(242,193,78,.85)}
@media (hover:hover){ .acard:hover{z-index:30;box-shadow:0 0 0 2px #fff,0 8px 20px rgba(0,0,0,.7)} }
.hell-grid{max-width:680px;max-height:58vh;overflow:auto;padding:2px}

/* hand */
.hand-wrap{position:relative;background:rgba(0,0,0,.35);border-top:1px solid var(--line);padding:6px 12px;min-height:132px;display:flex;align-items:center;gap:8px}
.hand{flex:1;min-width:0;display:flex;gap:0;justify-content:center;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding:12px 2px 2px}
.hcard{width:86px;height:120px;border-radius:8px;overflow:hidden;border:2px solid var(--line2);background:#0a0e13;position:relative;transition:transform .12s,box-shadow .12s,border-color .12s;flex:0 0 auto;touch-action:none;cursor:pointer}
.hcard+.hcard{margin-left:8px}
.hcard img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.hcard:hover{transform:translateY(-14px) scale(1.05);z-index:5;box-shadow:var(--shadow)}
.hcard.playable{border-color:var(--gold)}
.hcard.playable:hover{box-shadow:0 0 16px rgba(242,193,78,.5)}
.hcard.drag-src{opacity:.35}
.hcard .pw{position:absolute;left:3px;bottom:3px;background:rgba(0,0,0,.8);border-radius:5px;font-size:13px;font-weight:800;padding:0 5px}
.hcard .cst{position:absolute;left:3px;top:3px;background:rgba(20,20,20,.85);border-radius:5px;font-size:12px;padding:0 5px;font-weight:700;border:1px solid var(--line2)}
.hcard .gem{position:absolute;right:3px;top:3px;background:rgba(210,215,225,.92);color:#1a2330;border-radius:5px;font-size:11px;padding:0 5px;font-weight:800}
.hcard .gem.col{color:#fff}
/* drag ghost */
.drag-ghost{position:fixed;left:0;top:0;width:96px;height:134px;border-radius:8px;overflow:hidden;border:2px solid var(--gold);box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 18px rgba(242,193,78,.5);pointer-events:none;z-index:300;opacity:.95}
.drag-ghost img{width:100%;height:100%;object-fit:cover;display:block}
body.dragging{cursor:grabbing}

/* action bar */
.actionbar{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;min-width:170px}
.actionbar .btn{width:100%}
.hint{font-size:12px;color:var(--muted);text-align:center;max-width:170px;min-height:16px}
.hint.strong{color:var(--gold);font-weight:700}

/* Turn banner */
.turn-banner{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:60}
.turn-banner .tb{font-size:46px;font-weight:800;padding:18px 60px;border-radius:16px;background:rgba(0,0,0,.6);border:1px solid var(--gold);color:var(--gold);opacity:0;transform:scale(.8)}
.turn-banner.show .tb{animation:pop 1.4s ease}
@keyframes pop{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}

/* Log — a side column on wide screens, a slide-in drawer on smaller ones (never covers LIFE) */
.logpanel{display:none;width:290px;flex:0 0 290px;flex-direction:column;background:rgba(0,0,0,.35);border-left:1px solid var(--line);min-height:0}
.game-body.log-open .logpanel{display:flex}
.log-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px}
.log-head>div{flex:1}
.log-head .hint{text-align:left;max-width:none;font-size:11px}
.log-list{flex:1;overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;gap:5px}
.le{display:flex;gap:7px;align-items:flex-start;padding:5px 6px;border-radius:8px;background:rgba(255,255,255,.03);border-left:3px solid var(--line2);font-size:12px;line-height:1.5;color:var(--muted)}
.le.me{border-left-color:#3aa0ff}.le.foe{border-left-color:#e5484d}.le.sys{border-left-color:var(--gold)}
.le.me .le-text{color:#cfe8ff}.le.foe .le-text{color:#ffd9d9}.le.sys .le-text{color:#f5dfa6}
.le-thumb{width:30px;height:42px;flex:0 0 30px;border-radius:4px;overflow:hidden;border:1px solid var(--line2);cursor:pointer;background:#0a0e13}
.le-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.le-body{flex:1;min-width:0}
.le-src{font-size:10.5px;color:var(--dim)}
.lc{color:var(--gold);font-weight:700;cursor:pointer;border-bottom:1px dotted rgba(242,193,78,.6)}
.lc:hover{color:#fff}
.log-ticker{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:12px;cursor:pointer;padding:3px 8px;border-radius:7px;background:rgba(255,255,255,.03)}
.gametop .btn.on{border-color:var(--gold);color:var(--gold)}

/* Magic popup (non-blocking) */
.fx-pop{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%) scale(.85);z-index:150;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;animation:fxIn .25s ease forwards}
.fx-pop.out{animation:fxOut .28s ease forwards}
@keyframes fxIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fxOut{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-58%) scale(.92)}}
.fx-cap{font-size:15px;font-weight:800;padding:5px 14px;border-radius:999px;background:rgba(0,0,0,.8);border:1px solid var(--gold);color:var(--gold);white-space:nowrap}
.fx-pop.foe .fx-cap{border-color:var(--red);color:#ffb4b4}
.fx-card{position:relative;width:190px;height:265px;border-radius:12px;overflow:hidden;border:3px solid var(--gold);box-shadow:0 0 40px rgba(242,193,78,.45),0 18px 40px rgba(0,0,0,.7);background:#0a0e13}
.fx-pop.foe .fx-card{border-color:var(--red);box-shadow:0 0 40px rgba(229,72,77,.45),0 18px 40px rgba(0,0,0,.7)}
.fx-card img{width:100%;height:100%;object-fit:cover;display:block}
.fx-stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-18deg);font-size:34px;font-weight:900;color:#ff5b5b;border:4px solid #ff5b5b;border-radius:10px;padding:2px 14px;background:rgba(0,0,0,.55)}
.fx-pop.countered .fx-card{filter:grayscale(.7)}
.fx-name{font-size:15px;font-weight:700;background:rgba(0,0,0,.75);padding:3px 12px;border-radius:8px}
.fx-sub{font-size:12px;color:var(--muted);background:rgba(0,0,0,.7);padding:2px 10px;border-radius:8px}
.fx-sub.fx-note{max-width:360px;text-align:center;line-height:1.45;color:var(--text);font-size:13px;padding:4px 12px}
/* React prompt: what is being answered + what each React does */
.react-ctx{display:flex;gap:12px;align-items:flex-start;text-align:left;max-width:560px;margin:4px auto 10px;padding:10px;border-radius:12px;background:rgba(0,0,0,.32);border:1px solid var(--line)}
.rc-cards{display:flex;gap:6px;flex-shrink:0}
.rc-card{width:72px;height:100px;border-radius:6px;overflow:hidden;border:1px solid var(--line2);background:#0a0e13}
.rc-card img{width:100%;height:100%;object-fit:cover;display:block}
.rc-body{min-width:0;flex:1}
.rc-head{font-size:14px;line-height:1.55}
.rc-head b{color:var(--gold)}
.rc-what{display:inline-block;font-size:12px;padding:1px 8px;border-radius:999px;background:rgba(242,193,78,.16);border:1px solid rgba(242,193,78,.45);color:var(--gold)}
.rc-text{margin-top:5px;font-size:12px;line-height:1.5;color:var(--muted);white-space:pre-line;max-height:92px;overflow:auto}
.react-cand{width:120px;text-align:center;cursor:pointer}
.react-cand .rc-name{font-size:12px;margin-top:4px;font-weight:700}
.react-cand .rc-does{font-size:11px;line-height:1.35;color:var(--muted);margin-top:2px}

/* ============ Modal / overlays ============ */
.overlay{position:fixed;inset:0;background:rgba(4,7,12,.78);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);max-width:min(860px,94vw);max-height:90vh;overflow:auto;padding:22px}
.modal h2{margin-bottom:6px}
.modal p.sub{color:var(--muted);margin-bottom:16px;font-size:14px}
.modal .row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* card detail preview */
.detail{display:flex;gap:18px}
.detail .big{width:280px;flex:0 0 auto;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:#0a0e13}
.detail .big img{width:100%;display:block}
.detail .info{flex:1;min-width:220px}
.detail .info h3{font-size:22px;margin-bottom:8px}
.detail .kv{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.detail .kv span{background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:4px 10px;font-size:13px}
.detail .eff{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:14px;line-height:1.7;white-space:pre-wrap}
.detail .favor{margin-top:10px;color:var(--dim);font-style:italic;font-size:13px;line-height:1.6}
.detail-note{margin-bottom:10px;padding:8px 12px;border-radius:9px;background:rgba(242,193,78,.08);border:1px solid rgba(242,193,78,.35);font-size:13px;color:#f5dfa6}
.unit-box{margin-bottom:12px;padding:10px 12px;border-radius:10px;background:rgba(58,160,255,.07);border:1px solid rgba(58,160,255,.3);font-size:13px;line-height:1.7}
.unit-box .buff{color:#9ff2a8}.unit-box .nerf{color:#ff9a9a}
.unit-box .hint{text-align:left;max-width:none}
.ub-title{margin-top:6px;font-weight:700;color:#d9c2ff}
.ub-att{display:flex;gap:8px;align-items:center;padding:5px;border-radius:8px;cursor:pointer;margin-top:4px;background:rgba(168,119,255,.08);border:1px solid rgba(168,119,255,.3)}
.ub-att:hover{border-color:#b58cff}
.ub-img{width:34px;height:47px;flex:0 0 34px;border-radius:4px;overflow:hidden}
.ub-img img{width:100%;height:100%;object-fit:cover;display:block}

/* payment selector */
.pay-grid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:14px 0}
.pay-card{width:80px;height:112px;border-radius:8px;overflow:hidden;border:2px solid var(--line2);position:relative;cursor:pointer;background:#0a0e13}
.pay-card img{width:100%;height:100%;object-fit:cover}
.pay-card.on{border-color:var(--gold);box-shadow:0 0 12px rgba(242,193,78,.5)}
.pay-card .g{position:absolute;right:2px;top:2px;background:rgba(210,215,225,.95);color:#1a2330;border-radius:5px;font-size:11px;padding:0 5px;font-weight:800}
.pay-card.off{cursor:not-allowed;opacity:.45;filter:grayscale(.7)}
.pay-card .offl{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);font-size:10px;text-align:center;color:#ffb4b4}
.pay-status{text-align:center;font-size:15px;margin-top:6px}
.pay-status b{color:var(--gold)}

/* gacha */
.pack-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.pack-area.body-scroll{justify-content:flex-start;padding-top:22px}
.pack-area>*{flex-shrink:0}                 /* a long page scrolls instead of squashing its lines on top of each other */
.pack-area .hint{max-width:min(680px,100%);line-height:1.5}
.pack-area>.shop-tabs{align-self:stretch;margin:0}
.gacha-info{width:100%;max-width:760px;display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--text)}
.gi-row{display:flex;gap:10px;align-items:flex-start}
.gi-row.dim{color:var(--muted)}
.gi-row b{color:var(--gold)}
.gi-tag{flex-shrink:0;min-width:74px;text-align:center;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:rgba(242,193,78,.16);border:1px solid rgba(242,193,78,.5);color:var(--gold)}
.gi-tag.prem{background:rgba(124,77,255,.2);border-color:rgba(179,136,255,.6);color:#d9c2ff}
.gi-tag.tix{background:rgba(255,95,109,.14);border-color:rgba(255,95,109,.5);color:#ffb4bb}
.gi-tag.gem{background:rgba(74,163,255,.14);border-color:rgba(74,163,255,.45);color:#a9d4ff}
.pack-row{display:flex;gap:34px;flex-wrap:wrap;justify-content:center}
.pack-box{display:flex;flex-direction:column;align-items:center;gap:10px;width:230px}
.pack{width:230px;height:230px;padding:10px;border-radius:16px;position:relative;cursor:pointer;transition:transform .15s,box-shadow .15s;background:linear-gradient(180deg,#ffffff,#e6ebf2);border:2px solid var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.pack:hover{transform:translateY(-6px) rotate(-1deg) scale(1.03);box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 24px rgba(242,193,78,.35)}
.pack-cover{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.pack-tag{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);background:linear-gradient(180deg,#e9b949,#d19b2b);color:#1a1206;font-weight:800;font-size:13px;padding:2px 12px;border-radius:999px;border:1px solid #f2c14e}
.pack-btns{display:flex;gap:8px;margin-top:6px}
.pack-odds{font-size:12px;color:var(--muted);line-height:1.8;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;padding:8px 12px;width:100%}
/* CC01 premium pack: purple-gold frame, rules box, guaranteed-pack banner */
.pack.premium{background:linear-gradient(160deg,#fff8e1,#f3e1ff 55%,#e2d4ff);border:3px solid #ffd66b;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 22px rgba(255,214,107,.45)}
.pack.premium::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);background-size:250% 100%;animation:shine 3.2s linear infinite}
.pack.premium .pack-tag{background:linear-gradient(180deg,#b388ff,#7c4dff);color:#fff;border-color:#d1b3ff}
.pack-box.premium .pack-odds{border-color:rgba(179,136,255,.45)}
.pack-rule{font-size:12px;line-height:1.7;width:100%;padding:8px 12px;border-radius:10px;background:linear-gradient(135deg,rgba(124,77,255,.22),rgba(242,193,78,.14));border:1px solid rgba(179,136,255,.55);color:var(--text)}
.pack-rule b{color:var(--gold);font-size:14px}
.pity-banner{font-weight:800;font-size:14px;color:#1a1206;background:linear-gradient(90deg,#ffd66b,#ffb74d,#ffd66b);background-size:200% 100%;animation:shine 2.4s linear infinite;padding:6px 16px;border-radius:999px;box-shadow:0 0 18px rgba(255,214,107,.5);text-align:center}
.pity-left{margin:0;color:#d1b3ff}
.pull-card.pity .pull-front{outline:3px solid #ffd66b;outline-offset:2px}
.pull-card.pity::after{content:"การันตี";position:absolute;left:50%;top:-9px;transform:translateX(-50%);z-index:3;background:#ffd66b;color:#1a1206;font-size:10px;font-weight:800;padding:1px 7px;border-radius:999px;white-space:nowrap}
.pack-odds .rchip{min-width:34px;display:inline-block;text-align:center}
.pack-peek{position:absolute;left:50%;top:8px;transform:translateX(-50%);white-space:nowrap;background:rgba(10,14,19,.82);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid rgba(242,193,78,.6);opacity:.0;transition:opacity .15s;pointer-events:none}
.pack:hover .pack-peek{opacity:1}
@media (hover:none){ .pack-peek{opacity:.92} }
/* box contents (tap a pack cover) */
.box-modal{width:min(860px,94vw)}
.box-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.box-head img{width:70px;height:70px;object-fit:contain;background:#fff;border-radius:10px;border:1px solid var(--gold);padding:3px;flex:0 0 auto}
.box-head h2{margin:0 0 4px}
.box-head .sub{margin:0;font-size:13px}
.box-filters{position:sticky;top:-22px;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 0;background:var(--panel2);border-bottom:1px solid var(--line)}
.box-filters .rchip{font-size:11px}
.box-miss{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);margin-left:auto;cursor:pointer}
.box-rhead{margin:14px 0 8px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.box-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.box-grid .card-tile.dim{opacity:.62;filter:grayscale(.4)}
.box-grid .card-tile.dim:hover{opacity:1;filter:none}
@media (max-width:560px){ .card-grid.box-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px} .box-head img{width:52px;height:52px} .box-filters{top:-14px} .box-miss{margin-left:0} }
/* ---- account bar on the menu ---- */
.acct-bar{position:absolute;top:12px;right:14px;display:flex;align-items:center;gap:8px;z-index:3;max-width:calc(100% - 28px)}
.acct-chip{position:relative}
.icon-btn{position:relative;font-size:18px;line-height:1;padding:6px 9px}
.dot-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:900;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--bg,#0b0f14),0 0 10px rgba(229,72,77,.7);animation:dotPulse 1.4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.acct-chip{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:4px 12px 4px 4px;color:var(--text);cursor:pointer;min-width:0;font:inherit}
.acct-chip:hover{border-color:var(--gold)}
.acct-av{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid var(--gold);flex:0 0 auto}
.acct-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;min-width:0}
.acct-txt b{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-txt small{color:var(--dim,#9aa6b2);font-size:11px}
@media (max-width:640px),(max-height:520px){ .acct-bar{position:static;justify-content:center;margin:0 auto;flex-wrap:wrap;max-width:100%} }
@media (max-width:420px){
  .acct-bar{flex-wrap:nowrap;gap:6px}
  .acct-chip{padding:3px 10px 3px 3px;gap:6px}
  .acct-av{width:30px;height:30px}
  .acct-txt b{max-width:96px;font-size:13px}
  .acct-txt small{font-size:10px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .acct-bar>.btn{padding:6px 10px;font-size:12px;min-height:36px;white-space:nowrap}
}
/* ---- login / register ---- */
.auth-body{display:flex;justify-content:center;align-items:flex-start;padding-top:20px}
.auth-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.auth-tabs{display:flex;gap:8px}.auth-tabs .btn{flex:1}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--dim,#9aa6b2)}
.auth-field input{background:#0d131a;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;font-size:15px}
.auth-field input:focus{outline:2px solid var(--gold);outline-offset:-1px}
.auth-chk{font-size:13px}
.auth-err{color:#ff8a8f;font-size:13px;min-height:1em}
.auth-go{padding:12px;font-size:16px}
.auth-note{max-width:none;text-align:left;margin:0}
.auth-import{display:flex;justify-content:center}
/* ---- profile ---- */
.pf-body{max-width:960px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:14px}
.pf-head{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:linear-gradient(135deg,rgba(242,193,78,.12),var(--panel) 45%);border:1px solid var(--line2);border-radius:18px;padding:16px}
.pf-avwrap{position:relative}
.pf-av{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:3px solid var(--gold);box-shadow:0 6px 20px rgba(0,0,0,.5);display:block}
.pf-lv{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1a1405;font-weight:800;font-size:13px;border-radius:999px;padding:1px 10px;white-space:nowrap}
.pf-id{min-width:0}
.pf-name{font-size:24px;font-weight:800;line-height:1.2;word-break:break-word}
.pf-sub{color:var(--dim,#9aa6b2);font-size:13px;margin:2px 0 6px}
.pf-title{color:var(--gold);font-weight:700}
.pf-bio{font-style:italic;margin:4px 0 8px}
.pf-xp .qbar{height:10px}
.pf-since{margin:4px 0 0;text-align:left;max-width:none}
.pf-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.pf-section{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:14px;padding:12px 14px}
.pf-section h3{margin:0 0 10px}
.pf-section h3 .hint{font-weight:400;font-size:12px;display:inline;margin:0}
.pf-section>.hint{text-align:left;max-width:none;margin:0}
.pf-showcase{display:flex;gap:12px;flex-wrap:wrap}
.pf-sc{position:relative;width:110px;aspect-ratio:63/88;border-radius:8px;overflow:hidden;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.55)}
.pf-sc img{width:100%;height:100%;object-fit:cover;display:block}
.pf-sc .rchip{position:absolute;top:4px;left:4px}
.pf-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.pf-stat{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px}
.pf-stat .hint{text-align:left;max-width:none;margin:0;font-size:12px}
.pf-stat.pf-wr{grid-column:span 2}
.pf-ic{font-size:22px}
.pf-val{font-size:20px;font-weight:800}
.donut{--p:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*1%),rgba(255,255,255,.1) 0);display:grid;place-items:center;flex:0 0 auto}
.donut span{width:48px;height:48px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-weight:800;font-size:14px}
.pf-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pf-badge{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px;text-align:center;opacity:.4;filter:grayscale(1)}
.pf-badge.ok{opacity:1;filter:none;border-color:rgba(242,193,78,.6)}
.pf-badge .hint{max-width:none;margin:2px 0 0;font-size:11px}
.pf-bi{font-size:26px}
.pf-table{width:100%;border-collapse:collapse;font-size:14px}
.pf-table th,.pf-table td{padding:6px 8px;border-bottom:1px solid var(--line2);text-align:left}
.pf-table th{color:var(--dim,#9aa6b2);font-weight:600}
.qbar.sm{display:inline-block;width:70px;height:6px;vertical-align:middle;margin-right:4px}
.pf-hist{display:flex;flex-direction:column;gap:6px}
.pf-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;background:var(--panel);border:1px solid var(--line2);border-left:4px solid #5a6572;border-radius:10px;padding:8px 10px;font-size:14px}
.pf-h.win{border-left-color:#3fb950}.pf-h.lose{border-left-color:var(--red)}
.pf-h .hint{max-width:none;margin:0;font-size:12px}
.pf-res{font-weight:800;min-width:34px}
.pf-h.win .pf-res{color:#3fb950}.pf-h.lose .pf-res{color:#ff8a8f}
.pf-vs i{color:var(--dim,#9aa6b2);font-style:normal;margin:0 4px}
.pf-danger{text-align:right;background:none;border:none;padding:0}
.pf-edit{max-width:min(96vw,720px);width:100%}
.pf-edit .auth-field{margin-bottom:8px}
.pf-edit>input{width:100%;background:#0d131a;border:1px solid var(--line2);border-radius:10px;padding:8px 10px;color:var(--text);font:inherit;margin-bottom:8px}
.pf-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;max-height:44vh;overflow:auto;padding:4px}
.pf-pc{position:relative;aspect-ratio:63/88;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent}
.pf-pc img{width:100%;height:100%;object-fit:cover;display:block}
.pf-pc .rchip{position:absolute;bottom:2px;left:2px;transform:scale(.8);transform-origin:left bottom}
.pf-pc.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(242,193,78,.5)}
@media (max-width:640px){ .pf-sc{width:calc((100% - 24px)/3);max-width:110px} .pf-head{grid-template-columns:1fr;justify-items:center;text-align:center} .pf-av{width:96px;height:96px} .pf-xp{width:100%} .pf-stat.pf-wr{grid-column:auto} .pf-since{text-align:center} }
/* online opponent chip + XP line on the game-over screen */
.foe-chip{display:flex;align-items:center;gap:6px}
.foe-chip img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.xp-line{margin:-6px 0 14px;font-weight:700;color:var(--gold)}
/* menu badge (claimable quests) */
.btn .badge{display:inline-block;min-width:20px;padding:0 6px;margin-left:6px;border-radius:10px;background:var(--red);color:#fff;font-size:12px;font-weight:800;line-height:20px;text-align:center}
.btn .badge.tix{background:linear-gradient(180deg,#9b6bff,#6d3fd6)}
/* pack tickets (gacha) */
.pack-tix{margin-top:0}
.tix-btn{background:linear-gradient(180deg,rgba(124,77,255,.28),rgba(124,77,255,.12));border-color:rgba(179,136,255,.6)}
.tix-btn.k-CC{background:linear-gradient(180deg,rgba(242,193,78,.28),rgba(242,193,78,.1));border-color:rgba(242,193,78,.6)}
.tix-btn:disabled{opacity:.4;cursor:not-allowed}
.tix-pill b{color:#d1b3ff}
/* login calendar */
.login-modal{max-width:640px}
.login-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.lg-day{position:relative;border-radius:12px;padding:10px 6px 8px;text-align:center;background:var(--panel);border:1px solid var(--line2);display:flex;flex-direction:column;gap:6px;align-items:center;min-height:96px}
.lg-day.big{grid-column:span 2;background:linear-gradient(135deg,rgba(124,77,255,.22),rgba(242,193,78,.16));border-color:rgba(242,193,78,.55)}
.lg-day.today{border:2px solid var(--gold);box-shadow:0 0 16px rgba(242,193,78,.45);animation:actPulse .8s ease-in-out infinite alternate}
.lg-day.done{opacity:.55}
.lg-n{font-size:12px;color:var(--muted);font-weight:700}
.lg-r{display:flex;flex-direction:column;gap:3px;align-items:center;font-weight:800;font-size:14px}
.lg-gem{color:var(--gold)}
.lg-tix{color:#d1b3ff}.lg-tix.k-CC{color:#ffd66b}
.lg-ok{font-size:11px;font-weight:800;color:#9ff2a8}.lg-ok.now{color:var(--gold)}
.login-daily{font-size:13px;color:var(--muted);text-align:center;margin-bottom:6px}
.login-daily .lg-gem,.login-daily .lg-tix{display:inline-block;margin:0 3px}
.login-got{font-size:17px;font-weight:800;text-align:center;color:var(--text);margin:6px 0}
.login-got span{display:inline-block;margin:0 4px}
@media (max-width:560px){ .login-grid{grid-template-columns:repeat(3,1fr)} .lg-day.big{grid-column:span 3} .lg-r{font-size:12px} }
/* quests */
.quest-body{max-width:860px;margin:0 auto;width:100%}
.q-h{margin:14px 0 8px}
.q-h .hint{display:block;font-weight:400;font-size:12px;max-width:none;margin:3px 0 0;text-align:left}
.mq-head>div{flex:1;min-width:0}
.mq-head .hint{max-width:none;margin:2px 0 0;text-align:left}
.quest-list,.main-quests{display:flex;flex-direction:column;gap:8px}
.quest{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px 12px}
.quest.done{border-color:var(--gold);box-shadow:0 0 0 1px rgba(242,193,78,.35)}
.quest.claimed{opacity:.55}
.quest.bonus{background:linear-gradient(90deg,rgba(242,193,78,.1),var(--panel))}
.quest.tix-q{background:linear-gradient(90deg,rgba(255,95,109,.1),var(--panel));border-color:rgba(255,95,109,.35)}
.quest.tix-q .q-rw{color:#ffb4bb}
.q-sub{margin:10px 0 2px;font-weight:800;font-size:14px;color:#ffb4bb}
.q-sub .hint{max-width:none;display:inline;font-weight:600}
.q-main{flex:1;min-width:0}
.q-t{font-weight:700;margin-bottom:6px}
.qbar{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.qbar>div{height:100%;background:linear-gradient(90deg,#f2c14e,#ffdf8a);border-radius:5px}
.qnum{font-size:12px;color:var(--dim,#9aa6b2);margin-top:3px}
.q-rw{font-weight:800;color:var(--gold);white-space:nowrap}
.mq{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px}
.mq-head{display:flex;align-items:center;gap:12px}
.mq-head img{width:52px;aspect-ratio:63/88;object-fit:cover;border-radius:5px;cursor:pointer}
.mq-name{font-weight:800;font-size:16px}
.mq-row .mq-rw{width:40px;aspect-ratio:63/88;object-fit:cover;border-radius:4px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.quest.claimed .mq-rw{opacity:1}
/* shop */
.shop-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.sd-modal{width:min(760px,94vw)}
.sd-modal .hint{max-width:none;text-align:left;margin:10px 0 0}
.sd-modal .sd-list{max-height:44vh;overflow:auto;margin-top:8px;padding:2px}
.shop-decks{margin-top:6px}
#screen-shop .hint{max-width:none;text-align:left;margin:0 0 6px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.shop-grid.sleeves{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.shop-item{background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px}
.shop-item.in-use{border-color:var(--gold);box-shadow:0 0 0 1px rgba(242,193,78,.4)}
.shop-name{font-weight:800}
.shop-prev{background:center/cover no-repeat #111;border-radius:10px;cursor:zoom-in}
.shop-prev.playmat{aspect-ratio:1660/968;background-size:100% 100%}
.shop-prev.sleeve{aspect-ratio:63/88;width:70%;align-self:center;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.6)}
.shop-modal{max-width:min(96vw,1100px)}
.shop-prev.big.playmat{width:min(90vw,1000px)}
.shop-prev.big.sleeve{width:min(60vw,300px);margin:0 auto}
@media (max-width:640px){ .shop-grid{grid-template-columns:1fr} .shop-grid.sleeves{grid-template-columns:repeat(2,1fr)} .quest{flex-wrap:wrap} }
/* post-game GEM reward */
.reward-box{margin:10px auto 16px;max-width:300px;background:rgba(242,193,78,.08);border:1px solid rgba(242,193,78,.45);border-radius:12px;padding:10px 14px;text-align:left}
.reward-box .rw-total{font-size:24px;font-weight:800;color:var(--gold);text-align:center;margin-bottom:6px}
.reward-box .rw-line{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:2px 0}
.reward-box .rw-line b{color:var(--gold)}
.reward-box .rw-now{margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:var(--muted,#9aa6b2);text-align:center}
.sp-banner{background:linear-gradient(90deg,rgba(168,119,255,.25),rgba(242,193,78,.25));border:1px solid var(--gold);border-radius:12px;padding:10px 16px;font-weight:700;color:#fff3c4;text-align:center}
.pull-grid.many{gap:8px}
.pull-grid.many .pull-card{width:90px;height:125px}
/* rarity colours */
.rchip{font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px;background:#3a4656;color:#fff}
.r-R .rar,.rchip.r-R{background:#2d6cb3}
.r-SR .rar,.rchip.r-SR{background:#7b3fc4}
.r-UR .rar,.rchip.r-UR{background:linear-gradient(90deg,#c9861a,#e9b949);color:#1a1206}
.r-SEC .rar,.rchip.r-SEC{background:linear-gradient(90deg,#b0183a,#ff5c8a);color:#fff}
.r-PR .rar,.rchip.r-PR{background:linear-gradient(90deg,#0f8f6f,#39e0b4);color:#062019}
.r-CBR .rar,.rchip.r-CBR{background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcBff,#b388ff);color:#1a1206}
.card-tile.sp,.pull-card.sp .pull-front{border-color:#ffd66b;box-shadow:0 0 14px rgba(255,214,107,.55)}
.card-tile.sp::after,.pull-card.sp .pull-front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 60%);background-size:250% 100%;animation:shine 2.6s linear infinite}
@keyframes shine{from{background-position:130% 0}to{background-position:-130% 0}}
.pull-card.r-UR .pull-front,.pull-card.r-SR .pull-front{box-shadow:0 0 10px rgba(168,119,255,.45)}
/* collection */
.coll-hint{max-width:none;text-align:left;margin-bottom:10px}
.dust-pill b{color:#c7a6ff}
.coll-mark{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.78);font-size:10px;text-align:center;padding:2px 0;color:#c7a6ff;font-weight:700}
.coll-mark.lock{color:var(--dim)}
.coll-mark.new{color:#ffd66b}
.bulk-list{max-height:46vh;overflow:auto;font-size:13px;line-height:1.9;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:rgba(0,0,0,.2)}
/* the collection's "ย่อยการ์ด" window: filters, rarity chips, one row per card with − n + */
.dz-modal{width:min(860px,94vw)}
.dz-filters{margin-bottom:8px}
.dz-rars{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.dz-rar{border:0;cursor:pointer;font-size:12px;padding:3px 9px;font-family:inherit}
.dz-rar.off{opacity:.3;filter:grayscale(.7)}
.dz-list{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.2);padding:4px 8px}
.dz-list .menu-sub{margin:16px 6px;font-size:13px}
.dz-row{display:flex;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dz-row:last-child{border-bottom:0}
.dz-row.off{opacity:.5}
.dz-img{width:38px;height:53px;object-fit:cover;border-radius:4px;cursor:pointer;flex:none;background:#0b1118}
.dz-name{flex:1 1 180px;min-width:0;font-size:13px;line-height:1.35}
.dz-name small{display:block;color:var(--muted);font-size:11px}
.dz-step{display:flex;align-items:center;gap:4px}
.dz-step .btn.sm{min-width:30px;padding:3px 8px}
.dz-n{min-width:24px;text-align:center;font-size:15px}
.dz-gain{min-width:52px;text-align:right;color:var(--gold);font-weight:700;font-size:13px}
.dz-total{margin-top:10px;font-size:14px}
.dz-acts{flex-wrap:wrap;align-items:center}
.dz-acts .spacer{flex:1}
/* option prompt (เป่ายิ้งฉุบ / ทายเลข) */
.opt-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.opt-btn{font-size:20px;min-width:64px;padding:12px 16px}
.pull-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;perspective:1000px}
/* 3D flip: starts showing the card BACK, flips to the FRONT */
.pull-card{width:120px;height:167px;position:relative;perspective:700px;cursor:pointer}
.pull-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.8,.3,1);transform:rotateY(180deg)}
.pull-card.rev .pull-inner{transform:rotateY(0)}
.pull-face{position:absolute;inset:0;border-radius:8px;overflow:hidden;border:2px solid var(--line2);background:#0a0e13;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pull-back{transform:rotateY(180deg);background:var(--card-back) center/cover no-repeat,linear-gradient(135deg,#2a3746,#141b24)}
.pull-face img{width:100%;height:100%;object-fit:cover;display:block}
.pull-card .rar{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.7);border-radius:5px;font-size:10px;padding:1px 5px;font-weight:700;color:#fff}
.pull-card .new{position:absolute;left:4px;top:4px;background:var(--red);color:#fff;font-size:10px;padding:1px 6px;border-radius:5px;font-weight:700;z-index:2}
/* ---- gacha reveal: pack shake → burst → deal → flip ---- */
.gacha-reveal{gap:16px;padding-bottom:30px}
.reveal-banners{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%}
.reveal-banners:empty{display:none}
.pack-intro{position:relative;width:230px;height:230px;display:flex;align-items:center;justify-content:center;margin-top:30px;animation:packShake .56s ease-in-out}
.pack-intro .pi-cover{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 12px 26px rgba(0,0,0,.65))}
.pack-intro.premium .pi-cover{filter:drop-shadow(0 0 26px rgba(255,214,107,.65)) drop-shadow(0 12px 26px rgba(0,0,0,.65))}
.pack-intro .pi-flash{position:absolute;inset:-50px;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,244,210,.9) 25%,rgba(242,193,78,0) 70%);opacity:0;transform:scale(.3);pointer-events:none}
.pack-intro.premium .pi-flash{background:radial-gradient(circle,#fff 0%,rgba(225,205,255,.9) 25%,rgba(179,136,255,0) 70%)}
.pack-intro.burst .pi-cover{animation:packBurst .34s ease-in forwards}
.pack-intro.burst .pi-flash{animation:packFlash .5s ease-out forwards}
.pi-count{position:absolute;right:-4px;top:-4px;background:var(--gold);color:#1a1206;font-weight:900;font-size:16px;border-radius:999px;padding:3px 12px;box-shadow:0 4px 12px rgba(0,0,0,.5)}
@keyframes packShake{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-4deg) scale(1.03)}40%{transform:rotate(4deg) scale(1.05)}60%{transform:rotate(-3deg) scale(1.07)}80%{transform:rotate(3deg) scale(1.09)}}
@keyframes packBurst{to{transform:scale(1.4);opacity:0;filter:brightness(2.6)}}
@keyframes packFlash{0%{opacity:0;transform:scale(.3)}35%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
/* cards dealt in (scale / translate leave the flip's rotate alone) */
.pull-grid{gap:14px;padding:6px 4px}
.pull-grid:not(.many){row-gap:40px;padding-bottom:22px}
.pull-grid:not(.many) .pull-card{width:140px;height:195px}
.pull-grid .pull-card{opacity:0;translate:0 46px;scale:.82;transition:opacity .35s ease,translate .5s cubic-bezier(.2,1.25,.4,1),scale .5s cubic-bezier(.2,1.25,.4,1);transition-delay:calc(var(--i)*70ms)}
.pull-grid.many .pull-card{transition-delay:calc(var(--i)*16ms)}
.pull-grid.dealt .pull-card{opacity:1;translate:0 0;scale:1}
.pull-card:not(.rev):hover .pull-back{box-shadow:0 0 14px rgba(242,193,78,.55)}
.pull-back{border-color:#3a4a5e}
/* rarity glow once turned */
.pull-card.rev.r-R .pull-front{border-color:#4aa3ff;box-shadow:0 0 14px rgba(74,163,255,.55)}
.pull-card.rev.r-SR .pull-front{border-color:#a877ff;box-shadow:0 0 18px rgba(168,119,255,.75)}
.pull-card.rev.r-UR .pull-front{border-color:#ffd66b;box-shadow:0 0 24px rgba(255,214,107,.85)}
.pull-card.rev.r-UR .pull-front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.3) 45%,transparent 60%);background-size:250% 100%;animation:shine 2.4s linear infinite}
.pull-card.sp.rev::before{content:"";position:absolute;inset:-5px;border-radius:12px;z-index:-1;background:linear-gradient(90deg,#ff5f6d,#ffc371,#7cffcb,#4facfe,#c471f5,#ff5f6d);background-size:300% 100%;animation:rainbow 2s linear infinite;filter:blur(1px);box-shadow:0 0 30px rgba(255,214,107,.6)}
@keyframes rainbow{to{background-position:300% 0}}
.pull-card.rev .pull-inner{animation:flipPop .6s ease}
@keyframes flipPop{50%{scale:1.08}}
/* a SEC / PR / CBR shakes and glows before it turns */
.pull-card.tease{animation:tease .55s ease-in-out}
.pull-card.tease .pull-back{border-color:#ffd66b;box-shadow:0 0 28px rgba(255,214,107,.95)}
@keyframes tease{0%,100%{rotate:0deg}20%{rotate:-5deg}40%{rotate:5deg}60%{rotate:-4deg}80%{rotate:4deg}}
.pull-name{position:absolute;left:-10px;right:-10px;top:100%;margin-top:6px;font-size:12px;line-height:1.3;text-align:center;color:var(--text);opacity:0;transition:opacity .3s .25s;max-height:32px;overflow:hidden}
.pull-card.rev .pull-name{opacity:1}
.reveal-skip{margin-top:4px}
.pull-summary{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;font-weight:700;padding:8px 14px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid var(--line);animation:fadeUp .4s ease}
.ps-item{display:inline-flex;align-items:center;gap:4px}
.ps-new{color:#9ff2a8}.ps-dup{color:var(--muted);font-weight:600}
.reveal-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.sp-banner.pop,.pity-banner.pop{animation:bannerPop .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes bannerPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* deckbuilder split */
.builder{flex:1;display:grid;grid-template-columns:1fr 300px;gap:0;min-height:0}
.builder .pool{overflow-y:auto;padding:14px;border-right:1px solid var(--line)}
.builder .cur{overflow-y:auto;padding:14px;background:var(--bg2)}
.builder .cur h3{font-size:16px;margin-bottom:8px}
.deck-list-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;font-size:13px}
.deck-list-item:hover{background:var(--panel)}
.deck-list-item .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.builder{grid-template-columns:1fr 330px}
.builder-top{flex-wrap:wrap}
.builder-top .deck-pick,.builder-top .deck-name{background:var(--panel);border:1px solid var(--line2);color:var(--text);border-radius:8px;padding:7px 10px;font-family:inherit;font-size:14px}
.builder-top .deck-pick{max-width:220px}
.builder-top .deck-name{width:180px}
.bld-tabs{display:none}
.bld-filters{align-items:center;margin-bottom:6px}
.bld-search{flex:1 1 260px;min-width:200px}
.chk{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.chk.adm-chk{color:#c98a1b;font-weight:600}
.bld-info{max-width:none;text-align:left;margin-bottom:8px}
.lock-banner{background:var(--panel);border:1px solid var(--gold);border-radius:10px;padding:12px;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.card-tile.in-deck{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.card-tile .indeck{position:absolute;right:4px;top:22px;min-width:22px;text-align:center;background:linear-gradient(180deg,#e9b949,#d19b2b);color:#1a1206;font-weight:900;font-size:13px;border-radius:999px;padding:0 6px;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.tile-ctr{position:absolute;left:4px;bottom:4px;display:flex;gap:3px}
.tbtn{font-size:15px;font-weight:800;line-height:1;padding:3px 8px;border-radius:7px;border:1px solid var(--line2);background:rgba(15,20,28,.9);color:#fff}
.tbtn:hover{border-color:var(--gold)}
.tbtn.off{opacity:.35}
.tbtn.craft{background:linear-gradient(180deg,#9b6bff,#6d3fd6);border-color:#c7a6ff;font-size:13px}
.tbtn.craft:hover{border-color:var(--gold);box-shadow:0 0 10px rgba(179,136,255,.6)}
.card-tile .craft-mid{top:50%;bottom:auto;transform:translateY(-50%);background:rgba(20,10,40,.85);color:#d9c2ff;font-size:11px;padding:3px 0}
.bld-dust{color:#d1b3ff;white-space:nowrap}
.bld-dust b{color:#e7d8ff}
.deck-head{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.dh-name{font-weight:800;font-size:16px;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-dirty{font-size:12px;color:var(--gold);font-weight:600}
.dh-bar{height:8px;border-radius:99px;background:#0b1118;overflow:hidden;border:1px solid var(--line)}
.dh-bar span{display:block;height:100%;background:linear-gradient(90deg,#d19b2b,#f2c14e)}
.dh-row{display:flex;justify-content:space-between;margin-top:6px;font-size:13px;color:var(--muted)}
.dh-row b.ok{color:var(--ok)}
.deck-tools{display:flex;gap:6px;margin-bottom:10px}
.deck-tools select{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line2);color:var(--text);border-radius:8px;padding:6px 8px;font-family:inherit;font-size:13px}
.deck-stats{background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:10px;font-size:13px}
.ds-line{margin-bottom:6px;color:var(--muted)}.ds-line b{color:var(--text)}
.curve{display:flex;gap:4px;align-items:flex-end;height:64px}
.cv{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.cv-bar{width:100%;min-height:2px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#f2c14e,#a8741c)}
.cv-n{font-size:10px;color:var(--text);height:13px}
.cv-l{font-size:10px;color:var(--dim)}
.deck-warn{background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.5);color:#ffc9c9;border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.6;margin-bottom:10px}
.dl-title{font-weight:800;margin:10px 0 4px;color:var(--gold)}
.deck-list-item .dli-img{width:28px;height:39px;flex:0 0 28px;border-radius:4px;overflow:hidden;cursor:pointer;border:1px solid var(--line2)}
.deck-list-item .dli-img img{width:100%;height:100%;object-fit:cover;display:block}
.deck-list-item .nm small{display:block;color:var(--dim);font-size:11px}
.dli-n{min-width:28px;text-align:center;font-weight:800}
/* deck tiles on the deck-select screen */
.deck-card.bad{border-color:rgba(229,72,77,.6)}
.deck-card .warn-t{color:#ff9a9a;font-size:12px}
.dc-acts{display:flex;gap:6px;margin-top:8px}
.new-deck .nd-thumb{display:flex;align-items:center;justify-content:center;font-size:54px;color:var(--gold);background:linear-gradient(160deg,#26313d,#141b24)}
.new-deck{border-style:dashed}
.filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.filters select,.filters input{background:var(--panel);border:1px solid var(--line2);color:var(--text);border-radius:8px;padding:6px 10px;font-size:13px;font-family:inherit}

/* scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* toast */
/* shown near the top (never over the hand) and never catches taps — a faded toast used to sit invisibly over the middle of the hand */
.toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--gold);border-radius:10px;padding:12px 22px;font-size:15px;z-index:200;box-shadow:var(--shadow);opacity:0;visibility:hidden;pointer-events:none;max-width:calc(100vw - 24px);width:max-content;text-align:center;transition:opacity .2s,transform .2s,visibility .2s}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}

/* below 1100px the log is a drawer that slides over the board (closed by default) */
@media (max-width:1099px){
  .game-body.log-open .logpanel{position:absolute;right:0;top:0;bottom:0;z-index:90;width:min(330px,90vw);background:rgba(13,17,23,.97);box-shadow:-10px 0 30px rgba(0,0,0,.6)}
}
@media (min-width:1100px){ .log-head .btn{display:none} }
@media (max-width:900px){
  :root{--card-w:70px;--card-h:98px}
  /* deck builder: one panel at a time, switched by tabs */
  .builder{grid-template-columns:1fr}
  .bld-tabs{display:flex;gap:6px;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--bg2)}
  .bld-tabs .btn{flex:1}
  .bld-tabs .btn.on{border-color:var(--gold);color:var(--gold)}
  .builder.show-pool .cur{display:none}
  .builder.show-deck .pool{display:none}
  .builder .pool{border-right:none}
  .builder-top .deck-pick{max-width:none;flex:1 1 140px}
  .builder-top .deck-name{flex:1 1 120px;width:auto}
  .modal{padding:16px}
}
/* phones */
@media (max-width:560px){
  :root{--card-w:58px;--card-h:81px}
  .board{padding:2px;gap:8px}
  .pack{width:170px;height:170px}
  .pack-box{width:180px}
  .pack-btns{flex-direction:column;width:100%}
  .pull-grid.many .pull-card{width:64px;height:89px}
  .fcard .pw{font-size:11px;padding:0 3px;min-width:14px}
  .life-hit{font-size:10px;padding:2px 5px}
  .gametop{font-size:11px;padding:4px 6px;gap:5px;flex-wrap:wrap}
  .gametop .btn{min-height:28px;padding:3px 8px;font-size:12px}
  .gametop .pill{display:none}                 /* the opponent's hand is shown on their mat */
  .log-ticker{order:10;flex:1 1 60%;font-size:11px;padding:2px 6px}
  .phase-track .ph{padding:3px 6px;font-size:10px}
  .pill{padding:4px 9px;font-size:12px}
  /* hand + actions stack; hand cards overlap to always fit the width */
  .hand-wrap{flex-direction:column;min-height:auto;padding:4px 6px 8px;gap:6px}
  .actionbar{flex-direction:row;flex-wrap:wrap;min-width:0;width:100%;gap:6px;justify-content:center}
  .actionbar .btn{width:auto;flex:1 1 auto;min-height:44px}
  .actionbar .hint{max-width:100%;flex-basis:100%;order:-1}
  .hand{width:100%;justify-content:safe center;padding:12px 2px 4px}
  .hcard{width:76px;height:106px}
  .hcard:hover{transform:none}      /* no hover-lift on touch */
  .hcard:active{transform:translateY(-10px);z-index:5}
  .drag-ghost{width:76px;height:106px}
  .fx-card{width:150px;height:209px}
  .fx-cap{font-size:13px}
  .le{font-size:11.5px}
  .fcard.can-act{box-shadow:0 0 10px rgba(242,193,78,.7)}
  .btn{min-height:40px}
  .modal{max-width:96vw;padding:14px}
  .detail{flex-direction:column}
  .detail .big{width:100%;max-width:220px;margin:0 auto}
  .deck-card{width:100%;max-width:280px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
  .pay-grid{gap:6px}
  .pay-card{width:66px;height:92px}
  .rc-card{width:52px;height:72px}
  .react-ctx{gap:8px;padding:8px}
  .rc-head{font-size:13px}
  .react-cand{width:96px}
  .react-cand .pay-card{width:96px !important;height:134px !important}
  .logo{font-size:36px}
  .logo small{font-size:13px;letter-spacing:2px}
  .menu-sub{margin:4px 0 14px;font-size:13px}
  .menu-btns{gap:9px;width:min(340px,100%)}
  .menu-btns .btn{padding:9px 14px;font-size:14px}
  .turn-banner .tb{font-size:30px;padding:12px 30px}
}
.acct-sync{font-size:10px;color:#8fd3ff}
/* landscape phones / very short windows: a slimmer hand so the board keeps most of the height */
@media (max-height:500px) and (min-width:561px){
  .gametop{padding:3px 8px;gap:6px}
  .gametop .btn{padding:4px 10px;font-size:12px}
  .hand-wrap{min-height:auto;padding:2px 8px}
  .hand{padding:10px 2px 2px}
  .hcard{width:60px;height:84px}
  .hcard:hover{transform:translateY(-8px) scale(1.04)}
  .hcard .pw,.hcard .cst{font-size:11px}
  .actionbar{min-width:136px;gap:4px}
  .actionbar .btn{padding:6px 10px;font-size:13px}
  .actionbar .hint{font-size:11px;min-height:0}
  .drag-ghost{width:64px;height:90px}
}
/* ---- surrender / online link state ---- */
.btn.danger{color:#ff9a9f;border-color:rgba(229,72,77,.55)}
.btn.danger:hover{border-color:var(--red);box-shadow:0 0 0 2px rgba(229,72,77,.18)}
.btn.danger-fill{background:linear-gradient(180deg,#e5484d,#b8262c);border-color:#ff6b70;color:#fff}
.surrender-modal{max-width:min(420px,94vw);text-align:center}
.surrender-modal .row{justify-content:center}
.net-banner{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:95;max-width:calc(100% - 16px);width:max-content;
  background:rgba(120,70,0,.94);border:1px solid var(--gold);border-radius:12px;padding:8px 14px;font-size:14px;text-align:center;color:#fff3c4;
  box-shadow:0 6px 20px rgba(0,0,0,.55);pointer-events:none;animation:lifePulse 1.6s infinite}
.net-banner b{color:#fff;font-size:16px;margin-left:4px}
.net-banner small{display:block;font-size:11.5px;color:#f5dfa6;opacity:.85}
.net-wait{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px}
.end-reason{font-weight:700;color:#f5dfa6}
.resume-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;width:min(520px,100%);margin:0 auto 14px;padding:10px 12px;
  border-radius:14px;background:linear-gradient(90deg,rgba(242,193,78,.16),rgba(229,72,77,.12));border:1px solid var(--gold);text-align:left}
.resume-bar .rs-txt{flex:1 1 220px;font-size:14px;line-height:1.5}
.resume-bar .rs-txt small{display:block;color:var(--muted);font-size:12px}
.resume-bar .rs-acts{display:flex;gap:6px;flex-wrap:wrap}
/* ---- Redeem Code ---- */
.redeem-btn{border-color:var(--gold);color:var(--gold)}
.redeem-modal{width:min(520px,94vw)}
.rd-form{display:flex;gap:8px;margin:4px 0 10px}
.rd-input{flex:1;min-width:0;background:#0d131a;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;font-size:18px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.rd-input:focus{outline:2px solid var(--gold);outline-offset:-1px}
.rd-out{min-height:10px}
.rd-out .btn{margin-top:8px}
.rd-err{color:#ff8a8f;font-size:14px;line-height:1.6}
.rd-reward{background:rgba(242,193,78,.08);border:1px solid rgba(242,193,78,.45);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.rd-r-title{font-weight:800;color:var(--gold);font-size:16px}
.rd-note{font-style:italic;color:#f5dfa6}
.rd-gems{font-size:22px;font-weight:800;color:var(--gold)}
.rd-dust{color:#d1b3ff}
.rd-tix{color:#ffb4bb;font-size:19px}
.rd-tix small{font-size:12px;font-weight:600;color:var(--muted)}
.cf-tix{max-width:110px}
.rd-dust small{font-size:12px;font-weight:600;color:var(--muted)}
.rd-cards{display:flex;gap:8px;flex-wrap:wrap}
.rd-card{position:relative;width:64px;aspect-ratio:63/88;border-radius:6px;overflow:hidden;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.rd-card img{width:100%;height:100%;object-fit:cover;display:block}
.rd-card .rd-cnt{position:absolute;right:2px;bottom:2px;background:rgba(0,0,0,.8);border-radius:5px;font-size:11px;font-weight:800;padding:0 4px;color:var(--gold)}
.rd-card .rchip{position:absolute;left:2px;top:2px;transform:scale(.85);transform-origin:left top}
.rd-set{font-weight:700}
.rd-now{font-size:13px;color:var(--muted)}
.rd-hist{margin-top:12px}
.rd-h-title{font-size:13px;color:var(--muted);margin-bottom:4px}
.rd-h-row{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:13px;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.03);margin-bottom:4px}
.rd-h-row small{color:var(--dim);margin-left:auto}
.redeem-modal .row{align-items:center}
.rd-admin{margin-right:auto}
/* admin: code designer */
.codes-body{max-width:900px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:16px}
.codes-form,.codes-list{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:14px;padding:14px}
.codes-form h3,.codes-list h3{margin-bottom:10px}
.cf-field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.cf-label{font-size:13px;font-weight:700;color:var(--muted)}
.cf-hint{font-size:11.5px;color:var(--dim)}
.cf-in{background:#0d131a;border:1px solid var(--line2);border-radius:9px;padding:8px 10px;color:var(--text);font:inherit;font-size:14px;min-width:0}
.cf-in:focus{outline:2px solid var(--gold);outline-offset:-1px}
.cf-code{font-weight:800;letter-spacing:1.5px;flex:1}
.cf-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cf-mini{font-size:12px;color:var(--muted)}
.cf-cards{display:flex;flex-direction:column;gap:8px}
.cf-picked{display:flex;flex-direction:column;gap:6px}
.cf-pick{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:4px 6px}
.cf-pick img{width:30px;height:42px;object-fit:cover;border-radius:4px}
.cf-pn{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px}
.cf-pn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-pn small{color:var(--dim)}
.cf-n{min-width:22px;text-align:center;font-weight:800;color:var(--gold)}
.cf-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:240px;overflow:auto}
.cf-res{position:relative;aspect-ratio:63/88;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent}
.cf-res:hover{border-color:var(--gold)}
.cf-res img{width:100%;height:100%;object-fit:cover;display:block}
.cf-res .rchip{position:absolute;left:2px;top:2px;transform:scale(.8);transform-origin:left top}
.cf-preview{margin:6px 0 10px;display:flex;flex-direction:column;gap:6px}
.code-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px;border-radius:10px;background:var(--panel);border:1px solid var(--line2);margin-bottom:8px}
.cr-main{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:3px}
.cr-main small{color:var(--dim);font-size:12px}
.cr-top{display:flex;align-items:center;gap:8px}
.cr-code{font-size:16px;letter-spacing:1px}
.cr-st{font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px}
.cr-st.on{background:rgba(70,197,106,.2);color:#8ff0a8}
.cr-st.off{background:rgba(229,72,77,.18);color:#ff9a9f}
.cr-st.wait{background:rgba(242,193,78,.18);color:var(--gold)}
.cr-sum{font-size:13px}
.cr-acts{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:560px){ .net-banner{font-size:12px;padding:6px 10px} .rd-input{font-size:16px} .topbar .redeem-btn{padding:6px 9px;font-size:12px} }
/* drag: follows the pointer with no easing; on touch the card rides above the finger */
.drag-ghost{will-change:transform;transition:none}
.drag-ghost.touch{box-shadow:0 16px 36px rgba(0,0,0,.65),0 0 22px rgba(242,193,78,.6)}
.hcard{-webkit-touch-callout:none}
body.dragging .hcard{transition:none}
/* "ลำเอียง" tag (Redeem Code only cards) */
.tag-chip{position:absolute;right:4px;top:4px;background:rgba(90,40,140,.9);border:1px solid #b58cff;border-radius:6px;font-size:10px;font-weight:800;padding:0 5px;color:#fff;z-index:2}
.cf-res .tag-chip{right:2px;top:auto;bottom:2px;padding:0 3px}
.tag-kv{color:#d9c2ff}
.cf-sugg{grid-column:1/-1;font-size:12px;color:#d9c2ff}
/* ---- coin flip / dice roll / who goes first ---- */
.chance-pop{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%) scale(.85);z-index:160;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;animation:fxIn .25s ease forwards;perspective:800px}
.chance-pop.out{animation:fxOut .3s ease forwards}
.chance-pop.foe .fx-cap{border-color:var(--red);color:#ffb4b4}
.chance-pop.k-first .fx-cap{font-size:16px}
.coin{width:120px;height:120px;position:relative;transform-style:preserve-3d;animation:coinFlip 1.2s cubic-bezier(.2,.75,.3,1) forwards}
.coin .face{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-weight:900;font-size:19px;line-height:1.1;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;border:5px solid #8a6414;color:#3a2800;
  background:radial-gradient(circle at 35% 30%,#fff6d2,#f2c14e 48%,#b8861c);box-shadow:inset 0 0 0 7px rgba(255,255,255,.28),0 12px 30px rgba(0,0,0,.6)}
.coin .face.b{transform:rotateY(180deg);border-color:#4d5661;color:#1c232b;background:radial-gradient(circle at 35% 30%,#ffffff,#c3cbd4 48%,#6b7785)}
@keyframes coinFlip{0%{transform:translateY(40px) rotateY(0) scale(.7)}45%{transform:translateY(-70px) rotateY(calc(var(--turns) * .55)) scale(1.1)}100%{transform:translateY(0) rotateY(var(--turns)) scale(1)}}
.die{width:100px;height:100px;border-radius:20px;padding:14px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:4px;
  background:linear-gradient(145deg,#ffffff,#d9e0e8);border:3px solid #9aa6b2;box-shadow:0 12px 30px rgba(0,0,0,.6),inset 0 -6px 0 rgba(0,0,0,.08)}
.die.rolling{animation:dieRoll 1s cubic-bezier(.25,.8,.3,1)}
.die i{width:17px;height:17px;border-radius:50%;align-self:center;justify-self:center;background:#1c232b;visibility:hidden}
.die i.on{visibility:visible}
.die.landed.odd i.on{background:#d62f35}
.die.landed{animation:dieLand .35s ease}
@keyframes dieRoll{0%{transform:translate(-120px,-80px) rotate(-200deg) scale(.6)}55%{transform:translate(20px,10px) rotate(380deg) scale(1.05)}80%{transform:translate(-6px,0) rotate(700deg)}100%{transform:translate(0,0) rotate(720deg) scale(1)}}
@keyframes dieLand{0%{transform:scale(1.25)}100%{transform:scale(1)}}
.chance-result{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;font-size:24px;font-weight:900;color:#fff;background:rgba(0,0,0,.78);border:1px solid var(--gold);border-radius:12px;padding:6px 18px;text-align:center;max-width:min(360px,90vw)}
.chance-result.show{opacity:1;transform:none}
.chance-result small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}
.chance-pop.mine .chance-result{color:var(--gold)}
@media (max-width:560px){ .coin{width:100px;height:100px} .coin .face{font-size:16px} .die{width:86px;height:86px;padding:12px} .die i{width:14px;height:14px} .chance-result{font-size:20px} }
/* ---- sound settings (🔊) + the small 🎵 music control in the menu corner ---- */
.sound-btn{min-width:38px}
.music-mini{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;background:rgba(10,14,19,.72);border:1px solid var(--line2);border-radius:999px;backdrop-filter:blur(4px);margin-top:14px}
.music-mini .mm-toggle{width:28px;height:28px;border-radius:50%;border:0;background:rgba(242,193,78,.18);color:inherit;font-size:14px;line-height:1;cursor:pointer;flex:0 0 auto}
.music-mini .mm-toggle:hover{background:rgba(242,193,78,.32)}
.music-mini .mm-vol{width:96px;accent-color:var(--gold);cursor:pointer}
.music-mini .mm-pct{font-size:12px;min-width:30px;text-align:right;color:var(--muted)}
.music-mini.off .mm-vol{opacity:.4}
@media (min-width:700px){ #screen-menu .music-mini{position:fixed;left:14px;top:12px;margin:0;z-index:3} }
.sound-modal{width:min(440px,94vw)}
.snd-row{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px}
.snd-toggle{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.snd-toggle input{width:18px;height:18px;accent-color:var(--gold)}
.snd-line{display:flex;align-items:center;gap:8px}
.snd-line .btn{min-width:36px;padding:4px 0;font-size:16px;font-weight:800}
.snd-slider{flex:1;min-width:0;accent-color:var(--gold)}
.snd-pct{min-width:44px;text-align:right;color:var(--gold)}
.snd-note{max-width:none;text-align:left;font-size:12px;line-height:1.6;margin:4px 0 0}
/* ---- deck select (starter decks + my decks) ---- */
.ds-body{max-width:1180px;margin:0 auto;width:100%}
.ds-rewards{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;background:linear-gradient(90deg,rgba(242,193,78,.1),rgba(255,255,255,.02));border:1px solid var(--line2);border-radius:12px;padding:8px 12px;margin-bottom:6px}
.ds-rw-t{font-weight:800;color:var(--gold);margin-right:4px;font-size:14px}
.ds-chip{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.ds-chip b{color:var(--gold)}
.ds-chip small{font-size:11px}
/* bot difficulty picker */
.ds-level{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.ds-lv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ds-lv{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;padding:10px 12px;border-radius:12px;border:2px solid var(--line2);background:var(--panel);color:var(--text);cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s}
.ds-lv:hover{transform:translateY(-2px)}
.ds-lv b{font-size:15px}
.ds-lv small{font-size:11.5px;line-height:1.45;color:var(--muted)}
.ds-lv.on.lv-easy{border-color:#3ecf6e;box-shadow:0 0 14px rgba(62,207,110,.35)}
.ds-lv.on.lv-normal{border-color:#f2c14e;box-shadow:0 0 14px rgba(242,193,78,.4)}
.ds-lv.on.lv-hard{border-color:#ff5b5b;box-shadow:0 0 16px rgba(255,91,91,.45);background:linear-gradient(160deg,rgba(255,91,91,.12),var(--panel))}
.ds-lv:not(.on){opacity:.75}
.ds-lv-bonus{align-self:flex-start;font-size:11px;font-weight:800;color:var(--gold);background:rgba(242,193,78,.12);border:1px solid rgba(242,193,78,.4);border-radius:999px;padding:1px 8px}
@media (max-width:640px){ .ds-lv-row{grid-template-columns:1fr} }
.ds-head{display:flex;align-items:flex-end;gap:10px;margin:18px 0 10px;flex-wrap:wrap}
.ds-ht{flex:1;min-width:0}
.ds-ht h3{font-size:18px;display:flex;align-items:center;gap:8px}
.ds-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.ds-n{font-size:12px;background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:0 8px;color:var(--gold)}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px}
.deck-grid .deck-card{--dc:var(--gold);width:auto;max-width:none;position:relative;display:flex;flex-direction:column;border-radius:14px;background:linear-gradient(180deg,var(--panel2),var(--panel) 60%)}
.deck-grid .deck-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--dc);z-index:2}
.deck-grid .deck-card:hover{transform:translateY(-4px);border-color:var(--dc);box-shadow:0 12px 28px rgba(0,0,0,.55),0 0 0 1px var(--dc)}
.deck-grid .deck-card .thumb{position:relative;height:150px;background-size:cover;background-position:50% 22%;display:block}
.deck-grid .deck-card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,17,23,0) 45%,rgba(28,37,48,.96) 100%)}
.dc-code,.dc-color{position:absolute;top:10px;z-index:1;background:rgba(6,9,14,.72);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:800}
.dc-code{left:10px;color:var(--gold)}
.dc-color{right:10px;display:flex;align-items:center;gap:5px;color:var(--text)}
.dc-color i{width:9px;height:9px;border-radius:50%;display:inline-block}
.dc-lock{position:absolute;inset:0;z-index:1;background:rgba(6,9,14,.55);display:grid;place-items:center;font-size:34px}
.deck-grid .deck-card .meta{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;margin-top:-26px;position:relative;z-index:1}
.deck-grid .deck-card .meta h3{font-size:18px;font-weight:800;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.8);line-height:1.25}
.deck-grid .deck-card .meta p{font-size:12.5px;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dc-chips{display:flex;flex-wrap:wrap;gap:4px}
.dc-chips span{font-size:11px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-cta{margin-top:auto;text-align:center;font-weight:800;font-size:14px;padding:8px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--dc);color:var(--text);transition:background .12s}
.deck-grid .deck-card:hover .dc-cta{background:var(--dc);color:#0d1117}
.deck-grid .deck-card.locked .thumb{filter:grayscale(.55)}
.deck-grid .deck-card.locked .dc-cta{border-color:var(--gold);color:var(--gold)}
.deck-grid .deck-card.locked:hover .dc-cta{background:var(--gold);color:#1a1405}
.dc-colbar{display:flex;height:5px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.08)}
.dc-colbar i{display:block;height:100%}
.deck-grid .dc-acts{display:flex;gap:6px;margin-top:auto}
.deck-grid .dc-acts .dc-go{flex:1}
.deck-grid .deck-card.bad{border-color:rgba(229,72,77,.6)}
.deck-grid .deck-card.bad .dc-code{color:#ff9a9a}
.deck-grid .deck-card .warn-t{color:#ff9a9a;font-size:12px;-webkit-line-clamp:3}
.deck-grid .new-deck{border:2px dashed var(--line2);background:rgba(255,255,255,.02);align-items:center;justify-content:center;text-align:center;padding:24px 16px;min-height:230px;gap:6px}
.deck-grid .new-deck::before{display:none}
.deck-grid .new-deck:hover{border-color:var(--gold);box-shadow:none}
.nd-plus{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:rgba(242,193,78,.12);border:1px solid rgba(242,193,78,.4)}
.deck-grid .new-deck h3{font-size:17px}
.deck-grid .new-deck p{font-size:12.5px;color:var(--muted);max-width:200px}
@media (max-width:640px){
  .deck-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .deck-grid .deck-card .thumb{height:112px}
  .deck-grid .deck-card .meta{padding:8px 9px 10px;margin-top:-22px;gap:5px}
  .deck-grid .deck-card .meta h3{font-size:15px}
  .deck-grid .deck-card .meta p{font-size:11.5px}
  .dc-code,.dc-color{top:7px;font-size:10.5px;padding:1px 7px}.dc-code{left:7px}.dc-color{right:7px}
  .dc-cta{font-size:13px;padding:7px 4px}
  .deck-grid .dc-acts .btn{padding:6px 8px}
  .deck-grid .new-deck{min-height:190px}
  .ds-head{margin:14px 0 8px}
  .ds-rewards{gap:5px;padding:7px 9px}
  .ds-rw-t{width:100%;font-size:13px}
  .ds-chip{font-size:11px;padding:2px 8px}
  .dc-chips .dc-cnt{display:none}
}
/* ---- banlist viewer ---- */
.ban-modal{width:min(680px,96vw)}
.ban-sub{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 12px}
.ban-list{display:flex;flex-direction:column;gap:8px}
.ban-row{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line2);border-left:4px solid var(--danger);border-radius:12px;padding:8px 10px}
.ban-row.used{border-left-color:var(--gold)}
.ban-row.bad{border-color:rgba(229,72,77,.7);background:rgba(229,72,77,.1)}
.ban-cards{display:flex;gap:4px;flex:0 0 auto}
.ban-card{width:52px;aspect-ratio:63/88;border-radius:5px;overflow:hidden;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform .1s}
.ban-card:hover{transform:scale(1.06)}
.ban-card img{width:100%;height:100%;object-fit:cover;display:block}
.ban-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ban-names{font-weight:800;font-size:15px;line-height:1.3}
.ban-plus{color:var(--gold);margin:0 2px}
.ban-codes{font-size:11px;color:var(--dim)}
.ban-rules{display:flex;flex-wrap:wrap;gap:5px}
.ban-lim,.ban-tag{font-size:12px;font-weight:700;border-radius:6px;padding:1px 8px}
.ban-lim{background:var(--danger);color:#fff}
.ban-lim.zero{background:#000;border:1px solid var(--danger);color:#ff8a8f}
.ban-tag{background:rgba(229,72,77,.14);border:1px solid rgba(229,72,77,.45);color:#ffc9c9}
.ban-tag.ok{background:rgba(70,197,106,.12);border-color:rgba(70,197,106,.45);color:#b8f0c8;cursor:pointer}
.ban-tag.ok.on{background:rgba(70,197,106,.3);color:#fff}
.ban-have{font-size:12px;color:var(--muted)}
.ban-row.bad .ban-have{color:#ff9a9a;font-weight:700}
@media (max-width:560px){ .ban-card{width:42px} .ban-row{gap:8px;padding:7px 8px} .ban-names{font-size:14px} }
/* ---- level rewards (profile) ---- */
.lr-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.lr-head h3{flex:1 1 260px;margin:0}
.lr-head .hint{display:block;margin-top:2px}
.lr-sum{font-size:13px;color:var(--muted);align-self:center}
.lr-sum b{color:var(--gold)}
.lr-box{position:relative;margin-top:10px}
.lr-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 2px 10px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;-webkit-overflow-scrolling:touch}
.lr-tile{flex:0 0 auto;width:92px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 5px 7px;border-radius:12px;background:var(--panel);border:1px solid var(--line2);scroll-snap-align:start;cursor:pointer;position:relative;transition:transform .1s,border-color .1s}
.lr-tile:hover{transform:translateY(-2px)}
.lr-tile.ms{background:linear-gradient(180deg,rgba(242,193,78,.14),var(--panel) 70%);border-color:rgba(242,193,78,.45)}
.lr-tile.locked{opacity:.55}
.lr-tile.locked .lr-art{filter:grayscale(.8)}
.lr-tile.claimed{opacity:.6}
.lr-tile.ready{border-color:var(--gold);box-shadow:0 0 0 1px rgba(242,193,78,.5),0 0 14px rgba(242,193,78,.35);animation:lrGlow 1.6s ease-in-out infinite}
@keyframes lrGlow{50%{box-shadow:0 0 0 1px rgba(242,193,78,.8),0 0 22px rgba(242,193,78,.55)}}
.lr-tile.cur .lr-lv{background:var(--gold);color:#1a1405}
.lr-lv{font-size:12px;font-weight:800;border-radius:999px;padding:0 8px;background:rgba(255,255,255,.07)}
.lr-art{position:relative;height:88px;width:100%;display:grid;place-items:center}
.lr-art img{height:88px;aspect-ratio:63/88;object-fit:cover;border-radius:5px;box-shadow:0 3px 10px rgba(0,0,0,.55)}
.lr-art .rchip{position:absolute;left:8px;top:2px}
.lr-n{position:absolute;right:6px;bottom:2px;background:rgba(0,0,0,.8);border:1px solid var(--gold);color:var(--gold);font-size:11px;font-weight:800;border-radius:6px;padding:0 5px}
.lr-gemic{font-size:32px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.lr-mystery{height:88px;aspect-ratio:63/88;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;border:1px solid rgba(255,255,255,.2)}
.lr-mystery b{font-size:28px;line-height:1}
.lr-mystery small{font-size:10px;font-weight:700;line-height:1.2;padding:0 2px}
.lr-mystery.sec{background:linear-gradient(135deg,#b0183a,#ff5c8a)}
.lr-mystery.o1{background:linear-gradient(135deg,#8a5a00,#f2c14e);color:#1a1405}
.lr-gem{font-size:12px;font-weight:800;color:var(--gold)}
.lr-st{font-size:11px;color:var(--muted)}
.lr-tile.ready .lr-st{color:#1a1405;background:var(--gold);border-radius:6px;padding:0 6px;font-weight:800}
.lr-tile.claimed .lr-st{color:var(--ok)}
.lr-nav{position:absolute;top:50%;transform:translateY(-60%);z-index:2;width:30px;height:48px;border-radius:10px;border:1px solid var(--line2);background:rgba(13,17,23,.85);color:var(--text);font-size:24px;line-height:1;cursor:pointer}
.lr-nav.prev{left:-8px}.lr-nav.next{right:-8px}
.lr-nav:hover{border-color:var(--gold);color:var(--gold)}
@media (hover:none){ .lr-nav{display:none} }
.lr-result{width:min(560px,94vw);text-align:center}
.lr-res-gem{font-size:26px;font-weight:900;color:var(--gold);margin:8px 0 12px}
.lr-res-gem small{font-size:13px;font-weight:600;color:var(--muted)}
.lr-res-cards{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.lr-res-card{position:relative;width:110px;cursor:pointer}
.lr-res-card img{width:100%;aspect-ratio:63/88;object-fit:cover;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.6);display:block}
.lr-res-card.sp img{box-shadow:0 0 18px rgba(255,92,138,.7)}
.lr-res-card .rchip{position:absolute;left:4px;top:4px}
.lr-res-card .lr-n{bottom:auto;top:128px;right:4px}
.lr-res-name{font-size:12px;font-weight:700;margin-top:4px;line-height:1.3}
.lr-res-name small{display:block;color:var(--muted);font-weight:400}
.lr-res-note{max-width:none;text-align:center;margin:10px 0 0}
.lr-pick{width:min(760px,96vw)}
.lr-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-top:10px;max-height:58vh;overflow:auto;padding:4px}
.lr-pc{position:relative;border:2px solid transparent;border-radius:10px;padding:4px;cursor:pointer;background:var(--panel);transition:border-color .1s,transform .1s}
.lr-pc:hover{transform:translateY(-2px)}
.lr-pc.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(242,193,78,.4)}
.lr-pc img{width:100%;aspect-ratio:63/88;object-fit:cover;border-radius:6px;display:block}
.lr-pc-name{font-size:12px;font-weight:700;margin-top:4px;line-height:1.3}
.lr-pc-name small{display:block;color:var(--muted);font-weight:400}
.lr-zoom{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);background:rgba(0,0,0,.7);cursor:pointer;font-size:13px}
@media (max-width:560px){ .lr-tile{width:80px} .lr-art,.lr-art img,.lr-mystery{height:76px} .lr-pick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .lr-res-card{width:92px} .lr-res-card .lr-n{top:106px} }
/* ---- friends ---- */
.fr-body{max-width:760px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:14px}
.fr-me{cursor:pointer;font-family:inherit}
.fr-me:hover{border-color:var(--gold)}
.fr-sec{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.fr-sec h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fr-head{display:flex;align-items:center;gap:8px}
.fr-head h3{flex:1}
.fr-on-n{font-size:12px;font-weight:600;color:var(--ok)}
.fr-add-row{display:flex;gap:8px}
.fr-add-row input{flex:1;min-width:0;background:#0d131a;border:1px solid var(--line2);border-radius:10px;padding:9px 12px;color:var(--text);font:inherit;font-size:15px}
.fr-add-row input:focus{outline:2px solid var(--gold);outline-offset:-1px}
.fr-results{display:flex;flex-direction:column;gap:6px}
.fr-note{max-width:none;text-align:left;margin:0}
.fr-row{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:8px 10px}
.fr-row .btn{flex:0 0 auto}
.fr-av{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid var(--line2);flex:0 0 auto;display:block}
.fr-avw{position:relative;flex:0 0 auto;cursor:pointer}
.fr-dot{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:#5a6572;border:2px solid var(--panel)}
.fr-friend.on .fr-dot{background:var(--ok);box-shadow:0 0 6px rgba(70,197,106,.8)}
.fr-friend.on .fr-av{border-color:var(--ok)}
.fr-info{flex:1;min-width:0;display:flex;flex-direction:column;cursor:pointer}
.fr-info b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-info small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-seen{font-size:12px;color:var(--muted)}
.fr-friend.on .fr-seen{color:var(--ok);font-weight:700}
.fr-incoming{border-color:rgba(242,193,78,.5);background:linear-gradient(90deg,rgba(242,193,78,.08),rgba(255,255,255,.02))}
.fr-empty{text-align:center;padding:40px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--muted)}
.fr-big{font-size:48px}
.fr-err{background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.5);color:#ffc9c9;border-radius:10px;padding:10px 12px;font-size:14px}
.fr-loading{max-width:none;text-align:center;margin:20px 0}
.fr-lobby-note{margin-top:10px;font-size:14px;color:var(--muted);max-width:420px}
.fr-card{width:min(420px,94vw)}
.fr-card-head{display:flex;align-items:center;gap:14px}
.fr-card-av{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:3px solid var(--gold)}
.fr-card-name{font-size:20px;font-weight:800;word-break:break-word}
.fr-bio{font-style:italic;margin:12px 0 0}
.fr-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 8px}
.fr-stats>div{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column}
.fr-stats b{font-size:18px}
.fr-stats small{font-size:12px;color:var(--muted)}
/* invite pop-up (any screen) */
#fr-invites{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;width:min(440px,calc(100vw - 24px));pointer-events:none}
.fr-invite{pointer-events:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(242,193,78,.2),var(--panel2) 55%);border:1px solid var(--gold);border-radius:14px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.6);animation:frIn .3s ease}
@keyframes frIn{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
.fr-inv-av{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid var(--gold)}
.fr-inv-t{flex:1;min-width:140px;font-size:14px;line-height:1.35}
.fr-inv-t small{display:block;color:var(--muted);font-size:12px}
.fr-inv-acts{display:flex;gap:6px;margin-left:auto}
@media (max-width:560px){ .fr-row{padding:7px 8px;gap:8px} .fr-av{width:38px;height:38px} .fr-row .btn{padding:6px 9px;font-size:13px} .fr-me{font-size:12px;padding:5px 10px} }
#screen-pvp .body-scroll>.hint{max-width:460px;margin:0 auto}
/* ---- card trades (js/trade.js) ---- */
.tr-offer{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.tr-offer.in{border-color:rgba(242,193,78,.6)}
.tr-offer.his{opacity:.8;padding:6px 10px}
.tr-head{display:flex;align-items:center;gap:10px}
.tr-head .fr-info{cursor:default}
.tr-lines{display:flex;flex-direction:column;gap:4px}
.tr-line{display:flex;align-items:center;gap:8px;min-width:0}
.tr-lab{flex:0 0 52px;font-size:12px;font-weight:700;color:var(--ok)}
.tr-lab.give{color:var(--gold)}
.tr-thumbs{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto;max-width:60%}
.tr-names{flex:1;min-width:0;font-size:12px;color:var(--muted);line-height:1.35;word-break:break-word}
.tr-th{position:relative;width:44px;cursor:pointer;border-radius:5px}
.tr-th img{width:44px;height:60px;object-fit:cover;border-radius:5px;display:block;border:1px solid var(--line2)}
.tr-th .rchip{position:absolute;left:2px;bottom:2px;font-size:8px;padding:0 3px}
.tr-th .tr-x{position:absolute;right:-4px;top:-6px;background:var(--gold);color:#1a1206;font-size:11px;border-radius:999px;padding:0 5px}
.tr-th.short img{outline:2px solid var(--danger);opacity:.55}
.tr-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.tr-warn{margin:0;font-size:12px;color:#ffc9a3}
.tr-his{display:flex;flex-direction:column;gap:6px}
.tr-his-h{font-size:12px;color:var(--muted);font-weight:700}
.tr-modal{width:min(860px,94vw);display:flex;flex-direction:column}
.tr-confirm{width:min(460px,94vw);display:flex;flex-direction:column;gap:8px}
.tr-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tr-col{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tr-col h3{margin:0;font-size:15px}
.tr-find{background:#0d131a;border:1px solid var(--line2);border-radius:8px;padding:7px 10px;color:var(--text);font:inherit;font-size:14px;min-width:0}
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;max-height:46vh;overflow:auto;padding:6px 4px 2px 2px}
.tr-tile{position:relative;cursor:pointer;border-radius:7px;border:2px solid transparent;transition:transform .1s}
.tr-tile img{width:100%;aspect-ratio:388/528;object-fit:cover;border-radius:5px;display:block}
.tr-tile.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(242,193,78,.35)}
.tr-tile:active{transform:scale(.97)}
.tr-tile .rchip{position:absolute;left:3px;top:3px}
.tr-tile .tr-n{position:absolute;left:3px;bottom:3px;font-size:10px;background:rgba(0,0,0,.72);color:#fff;border-radius:4px;padding:0 4px}
.tr-tile .tr-k{position:absolute;right:-4px;top:-6px;background:var(--gold);color:#1a1206;font-size:13px;border-radius:999px;padding:0 6px}
.tr-tile .tr-k:empty{display:none}
.tr-tile .tr-i{position:absolute;right:3px;bottom:3px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line2);background:rgba(0,0,0,.7);color:#fff;font:700 11px/18px Georgia,serif;padding:0;cursor:pointer}
.tr-foot{position:sticky;bottom:-22px;background:linear-gradient(180deg,rgba(28,37,48,0),var(--panel) 30%);padding-top:10px;margin-top:6px}
.tr-foot .row{margin-top:8px}
.tr-sum{font-size:14px;color:var(--muted)}
.tr-sum b{color:var(--gold)}
@media (max-width:640px){ .tr-cols{grid-template-columns:1fr} .tr-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));max-height:32vh} .tr-modal{padding:16px} .tr-foot{bottom:-16px} }
.fr-on-t{color:var(--ok);font-weight:700}
.fr-nodetail{background:rgba(58,160,255,.08);border:1px solid rgba(58,160,255,.35);border-radius:10px;padding:8px 12px;color:#bcdcff}
.fr-upd{text-align:center;margin:0 0 8px}
/* CC01-050 SD Plaza: Avatars kept in the Magic Zone */
.stash-row{position:absolute;right:3px;top:3px;display:flex;gap:3px;align-items:flex-start;z-index:2}
.pcard.stash{width:calc(var(--mc-h)*.52);height:calc(var(--mc-h)*.72);border:2px solid var(--gold);border-radius:5px;overflow:hidden;cursor:pointer;box-shadow:0 0 8px rgba(242,193,78,.5)}
.pcard.stash img{width:100%;height:100%;object-fit:cover;display:block}
.stash-row .mz-tag{position:static;align-self:flex-end}
.pcard.stash.back{background:var(--card-back) center/cover no-repeat,#1a232e;border-color:#6b4fa0;box-shadow:0 0 6px rgba(107,79,160,.6)}     /* campaign 3-2: face-down cards */
/* friends screen: play-online block on top */
.fr-pvp{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin-bottom:14px;border-radius:14px;background:linear-gradient(90deg,rgba(242,193,78,.14),rgba(0,0,0,.2));border:1px solid rgba(242,193,78,.45)}
.fr-pvp .hint{max-width:none;text-align:left;flex:1;min-width:200px;font-size:12.5px;line-height:1.5}

/* ---------- credits page ---------- */
.menu-credit{display:inline-block;margin-top:6px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.menu-credit:hover{color:var(--gold)}
.credits-body{display:flex;flex-direction:column;align-items:center;gap:14px}
.credits-body>*{width:min(860px,100%);flex-shrink:0}
.cr-intro{color:var(--muted);font-size:14px;line-height:1.6;text-align:center;margin:2px 0 4px}
.cr-box{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:14px;padding:14px 16px}
.cr-box h3{font-size:16px;margin-bottom:6px;color:var(--gold)}
.cr-box p{color:var(--text);font-size:14px;line-height:1.55}
.cr-link,.cr-src{margin-top:6px;font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
.cr-box a{color:#7cc4ff;text-decoration:underline;text-underline-offset:3px}
.cr-box a:hover{color:var(--gold)}
.cr-group{padding:10px 0;border-top:1px dashed var(--line)}
.cr-box h3+.cr-group{border-top:0}
.cr-src{margin:0 0 8px;font-weight:600}
.cr-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}
.cr-thumbs.wide{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.cr-thumb{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);text-align:center;min-width:0}
.cr-thumb img{width:100%;aspect-ratio:63/88;object-fit:cover;border-radius:6px;border:1px solid var(--line2);background:var(--bg2)}
.cr-thumbs.wide .cr-thumb img{aspect-ratio:16/9}
.cr-thumb span{overflow-wrap:anywhere;line-height:1.3}
.cr-foot{text-align:center;color:var(--muted);font-size:13px;margin:6px 0 10px}

/* ---------- opening-hand swap (mulligan) ---------- */
.mull-modal{width:min(700px,94vw);text-align:center}
.mull-first{display:inline-block;margin:2px 0 8px;padding:5px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line2);font-weight:700;color:var(--muted)}
.mull-first.mine{color:var(--gold);border-color:var(--gold)}
.mull-grid{display:flex;gap:10px;justify-content:center;flex-wrap:nowrap;margin:14px 0 10px}
.mull-card{position:relative;flex:1 1 0;max-width:120px;min-width:0;aspect-ratio:63/88;border-radius:9px;overflow:hidden;border:2px solid var(--line2);cursor:pointer;background:#0a0e13;transition:transform .15s,border-color .15s,box-shadow .15s}
.mull-card img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .15s}
.mull-card:hover{transform:translateY(-3px)}
.mull-card.on{border-color:#ff8a5c;box-shadow:0 0 14px rgba(255,138,92,.55);transform:translateY(-6px)}
.mull-card.on img{filter:grayscale(.75) brightness(.55)}
.mull-x{position:absolute;inset:auto 0 38%;margin:auto;text-align:center;font-weight:800;font-size:13px;color:#fff;background:rgba(220,80,40,.9);padding:4px 0;opacity:0;transform:scale(.8);transition:.15s;pointer-events:none}
.mull-card.on .mull-x{opacity:1;transform:none}
.mull-zoom{position:absolute;right:4px;top:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(10,14,19,.75);color:#fff;font-size:13px;cursor:pointer;padding:0;line-height:26px}
.mull-ok{min-width:220px}
.mull-clock{margin-top:8px}
@media (max-width:520px){ .mull-grid{gap:8px;flex-wrap:wrap} .mull-card{flex:0 0 calc((100% - 16px)/3);max-width:110px} .mull-x{font-size:11px} .mull-zoom{width:22px;height:22px;line-height:22px;font-size:11px} }

/* ---------- deck builder: unfinished decks, missing cards, quick craft, deck codes ---------- */
.deck-status{margin:8px 0;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:700;border:1px solid var(--line2);background:var(--panel)}
.deck-status.ok{color:#7ee2a8;border-color:rgba(126,226,168,.45);background:rgba(46,160,90,.12)}
.deck-status.draft{color:var(--muted)}
.deck-status.miss{color:#ffb86b;border-color:rgba(255,184,107,.45);background:rgba(255,160,60,.10)}
.deck-status.bad{color:#ff8a8a;border-color:rgba(255,120,120,.45);background:rgba(220,60,60,.10)}
.deck-miss{margin:6px 0 10px;padding:9px 10px;border-radius:10px;border:1px dashed rgba(255,184,107,.5);background:rgba(255,160,60,.06);font-size:13px}
.deck-miss .dm-h{font-weight:700;color:#ffb86b;margin-bottom:6px}
.deck-miss .dm-quick{width:100%;margin:2px 0 6px}
.deck-miss .dm-other{color:var(--muted);font-size:12px;line-height:1.5}
.deck-list-item.short{background:rgba(255,160,60,.07)}
.dli-miss{color:#ffb86b}
.dli-craft{padding:2px 8px}
.card-tile .indeck.short{background:#d9534f;color:#fff}
.code-modal{width:min(560px,94vw)}
.code-modal .cm-h{font-weight:700;margin:12px 0 6px;font-size:14px}
.code-modal .cm-code{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:13px;line-height:1.45;padding:8px 10px;border-radius:8px;border:1px solid var(--line2);background:var(--bg2);color:var(--text);resize:vertical;word-break:break-all}
.code-modal .cm-msg{color:#ff8a8a;font-size:13px;min-height:18px;margin-top:4px}
.code-modal .btn.sm.primary{margin-top:6px}

/* ---- สอดแนม: the scouted cards are shown as pictures (choose / options modals) ---- */
.choose-grid .card-tile.pickable{border:2px solid var(--gold);box-shadow:0 0 12px rgba(255,200,80,.35)}
.choose-grid .card-tile.dim{opacity:.55;filter:grayscale(.45)}
.choose-grid .card-tile.dim:hover{opacity:.85;filter:none}
.opt-cards{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0 4px}
.opt-cards .card-tile{width:96px;flex:0 0 auto}
.opt-cards.one .card-tile{width:150px}
.opt-cards .card-tile.focus{border:2px solid var(--gold);box-shadow:0 0 14px rgba(255,200,80,.45);transform:translateY(-4px)}
.opt-cards .card-tile.dim{opacity:.5;filter:grayscale(.4)}
.opt-cards-h{max-width:none;text-align:center;margin:2px 0 0}
@media (max-width:560px){ .opt-cards{gap:6px} .opt-cards .card-tile{width:70px} .opt-cards.one .card-tile{width:128px} }

/* ---- BT05: a Cost changed in hand (แมลงปอนางพญา / น้องนาว / ของขวัญที่เมียทิ้งไว้ให้) · a card borrowed with รับซื้อของโจร ---- */
.hcard .cst.mod{background:#1f7a4a;color:#fff}
.hcard.borrowed img{filter:sepia(.5) saturate(.8)}
.hcard .borrow-tag{position:absolute;left:0;right:0;bottom:0;background:rgba(120,60,0,.85);color:#ffd66b;font-size:10px;font-weight:700;text-align:center;padding:1px 0}
/* BT05 box in the shop: browse only until the set opens */
.pack-box.soon .pack{filter:saturate(.75)}
.pack .pack-soon{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(-8deg);background:rgba(10,14,20,.85);color:#ffd66b;border:2px solid #ffd66b;border-radius:10px;padding:6px 14px;font-weight:800;font-size:16px;white-space:nowrap;pointer-events:none}
.pack-rule.soon-rule{color:var(--muted)}

/* ============ Campaign (js/campaign.js) ============ */
.menu-btns .btn.campaign-btn{background:linear-gradient(180deg,#3a2a12,#241a0b);border-color:#b8862e;color:#ffe2a8}
.badge.camp-new{background:var(--gold);color:#241a0b}
.badge.camp-done{background:var(--ok);color:#0b1a10}
.camp-body{padding:16px;display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0 auto;width:100%}
.camp-body>*{flex-shrink:0}
.camp-chapter{display:flex;gap:14px;align-items:stretch;background:linear-gradient(135deg,#2a1d0c,#141b24 70%);border:1px solid #6b5220;border-radius:16px;overflow:hidden}
.cc-art{flex:0 0 120px;background:center 20%/cover no-repeat;min-height:150px;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.cc-info{padding:14px 14px 14px 0;display:flex;flex-direction:column;gap:8px}
.cc-info h2{color:var(--gold);font-size:20px}
.cc-info p{color:var(--muted);font-size:14px;line-height:1.6}
.cc-prog{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.cc-bar{flex:1;height:8px;border-radius:99px;background:#0d1117;overflow:hidden;border:1px solid var(--line)}
.cc-bar i{display:block;height:100%;background:linear-gradient(90deg,#b8862e,var(--gold))}
.camp-path{display:flex;flex-direction:column;gap:10px;position:relative;padding-left:4px}
.camp-path::before{content:"";position:absolute;left:39px;top:20px;bottom:20px;width:3px;background:var(--line2);border-radius:2px}
.camp-node{position:relative;display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:10px 12px;cursor:pointer;transition:transform .15s,border-color .15s}
.camp-node:hover{transform:translateX(3px);border-color:var(--gold)}
.camp-node.next{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(242,193,78,.25)}
.camp-node.cleared{background:linear-gradient(90deg,#16291c,var(--panel))}
.camp-node.locked{opacity:.55;cursor:default}
.camp-node.locked:hover{transform:none;border-color:var(--line2)}
.cn-face{flex:0 0 56px;height:56px;border-radius:50%;background:50% 30%/170% auto no-repeat #0d1117;border:2px solid var(--line2);position:relative;z-index:1}
.camp-node.next .cn-face{border-color:var(--gold)}
.camp-node.cleared .cn-face{border-color:var(--ok)}
.camp-node.locked .cn-face{filter:grayscale(1) brightness(.5)}
.cn-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px}
.cn-info{flex:1;min-width:0}
.cn-info h3{font-size:16px;margin:2px 0}
.cn-id{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.3px}
.cn-tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;background:#1d3a5c;color:#bfe0ff;margin-left:4px}
.cn-tag.boss{background:#5c1d24;color:#ffc9cf}
.cn-boss{font-size:13px;color:var(--muted)}
.cn-stars{color:var(--gold);letter-spacing:1px}
.cn-state{font-size:13px;font-weight:700;color:var(--gold);white-space:nowrap}
.camp-node.cleared .cn-state{color:var(--ok)}
.camp-node.locked .cn-state{color:var(--dim)}
.camp-next{display:flex;gap:12px;align-items:center;border:1px dashed var(--line2);border-radius:14px;padding:10px 12px;opacity:.7}
.camp-next.lit{opacity:1;border-color:#7a4bc2;background:linear-gradient(90deg,#22163a,var(--panel))}
.camp-admin{border:1px solid #c98a1b;background:rgba(201,138,27,.12);color:var(--text);border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:13px}
/* gacha test account (wallet "tester") */
.tester-bar{max-width:520px;margin:0 auto 12px;border:1px dashed #3fb68b;background:rgba(63,182,139,.12);color:var(--text);border-radius:10px;padding:8px 12px;font-size:13px;text-align:center}
.btn.tester-off{opacity:.45;filter:grayscale(.8)}
.cx-art{flex:0 0 64px;height:64px;border-radius:12px;background:center 15%/cover no-repeat;filter:brightness(.35) grayscale(.6)}
.camp-next.lit .cx-art{filter:none}
.cx-info h3{font-size:15px}
.cx-info p{font-size:13px;color:var(--muted);line-height:1.5}
.camp-modal{max-width:min(560px,96vw)}
.cm-top{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.cm-face{flex:0 0 84px;height:84px;border-radius:50%;background:50% 30%/170% auto no-repeat;border:3px solid var(--gold);box-shadow:0 0 18px rgba(242,193,78,.3)}
.cm-head h2{margin:2px 0 4px}
.cm-clr{color:var(--ok)}
.cm-meta{font-size:13px;color:var(--muted);line-height:1.6}
.cm-blurb{color:var(--text);font-size:14px;line-height:1.6;margin:6px 0 10px}
.cm-rules{background:#2a1418;border:1px solid #6b2a33;border-radius:10px;padding:8px 10px;font-size:13px;line-height:1.6;margin-bottom:10px}
.cm-rules b{display:block;color:#ffb4bd;margin-bottom:2px}
.cm-reward{background:#11212e;border:1px solid #24435d;border-radius:10px;padding:8px 10px;font-size:13px}
.cm-reward>b{display:block;color:#bfe0ff;margin-bottom:6px}
.cr-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.cm-reward .cr-row{justify-content:flex-start}
.cr-row.got{opacity:.55}
.cr-chip{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--panel2);border:1px solid var(--line2)}
.cr-chip.gem{color:#9fe3ff}
.cr-chip.tix{color:#ffd0e0}
.cr-chip.card{color:var(--gold)}
.cm-cards{display:flex;gap:8px;justify-content:center;margin:10px 0 2px}
.cm-card{width:76px;height:106px;border-radius:7px;overflow:hidden;border:1px solid var(--line2);cursor:pointer}
.cm-card img{width:100%;height:100%;object-fit:cover}
.camp-pick-note{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.6;margin-bottom:12px}
.camp-over{margin:4px 0 8px}
.camp-res{border-radius:12px;padding:10px 12px;font-size:15px;line-height:1.6;background:var(--panel);border:1px solid var(--line2)}
.camp-res.win{background:linear-gradient(180deg,#2a1d0c,#1c2530);border-color:#b8862e;color:#ffe2a8;font-weight:700}
.camp-res.win .cr-row{margin-top:8px}
.camp-res.lose{color:var(--muted)}
.camp-res.warn{color:#ffd9a0;border-color:#6b5220}
.camp-teaser{text-align:center;max-width:min(440px,94vw)}
.ct-art{width:180px;height:250px;margin:0 auto 10px;border-radius:12px;background:center/cover no-repeat;box-shadow:0 0 40px rgba(168,119,255,.45)}
.camp-teaser p{color:var(--muted);line-height:1.6;margin:8px 0 12px}
/* dialogue */
.vn-ov{align-items:flex-end;background:radial-gradient(900px 500px at 50% 100%,rgba(4,7,12,.5),rgba(4,7,12,.88));cursor:pointer;padding:16px 16px 28px}
.vn-box{position:relative;display:flex;gap:14px;align-items:flex-end;width:min(760px,100%);background:linear-gradient(180deg,#1f2a37,#141b24);border:1px solid #6b5220;border-radius:16px;padding:16px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.vn-box.in{animation:vnIn .22s ease-out}
@keyframes vnIn{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
.vn-face{flex:0 0 120px;height:150px;margin-top:-60px;border-radius:12px;background:50% 28%/150% auto no-repeat;border:2px solid var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.6)}
.vn-main{flex:1;min-width:0}
.vn-name{color:var(--gold);font-weight:800;font-size:16px;margin-bottom:4px;min-height:1px}
.vn-text{font-size:17px;line-height:1.7;color:var(--text)}
.vn-box.narr{border-color:var(--line2)}
.vn-box.narr .vn-text{font-style:italic;color:#c8d3df;text-align:center}
.vn-box.me .vn-name{color:#9fe3ff}
.vn-hint{margin-top:8px;font-size:12px;color:var(--dim);text-align:right}
.vn-skip{position:absolute;top:14px;right:14px}
@media (max-width:600px){ .vn-face{flex-basis:84px;height:108px;margin-top:-44px} .vn-text{font-size:15px} .cc-art{flex-basis:84px} }
/* tutorial coach (js/tutorial.js) */
.tut-ring{position:fixed;z-index:400;pointer-events:none;border:3px solid var(--gold);border-radius:12px;box-shadow:0 0 0 4px rgba(242,193,78,.25),0 0 24px rgba(242,193,78,.7);animation:tutPulse 1s ease-in-out infinite alternate;transition:left .15s,top .15s,width .15s,height .15s}
.tut-ring.big{animation:none;box-shadow:0 0 0 3px rgba(242,193,78,.2)}
@keyframes tutPulse{from{box-shadow:0 0 0 3px rgba(242,193,78,.2),0 0 12px rgba(242,193,78,.5)}to{box-shadow:0 0 0 8px rgba(242,193,78,.12),0 0 30px rgba(242,193,78,.9)}}
.tut-bubble{position:fixed;z-index:401;background:linear-gradient(180deg,#2a1d0c,#1a140a);border:2px solid var(--gold);border-radius:14px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.6);font-size:14px;line-height:1.6;color:#fff3d6;transition:left .15s,top .15s}
.tut-bubble.shake{animation:tutShake .35s}
@keyframes tutShake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.tut-head{font-size:12px;font-weight:800;color:var(--gold);margin-bottom:4px}
.tut-text b{color:#ffe08a}
.tut-row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.tut-skip{font-size:12px;opacity:.75}
.cm-reward .hint{text-align:left;max-width:none;margin:6px 0 0;font-size:12px;color:var(--muted)}

/* ---- BT06: Construct Zone — up to 3 Constructs lying sideways in the strip (like the Land), --cz-h = the strip's height ---- */
.z-construct{z-index:5;--cw:min(calc(var(--cz-h,40px)*.88),calc(var(--mat-w)*.085))}
.mat .fcard.ccard{width:var(--cw);height:calc(var(--cw)*1.397);transform:rotate(90deg);margin:0 calc(var(--cw)*.24);border-width:1.5px;border-color:#e3b341;border-radius:4px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.55)}
.mat .fcard.ccard .pw{font-size:clamp(8px,calc(var(--mat-h)*.03),12px);padding:0 3px;min-width:12px;left:auto;right:1px;bottom:1px;transform:rotate(-90deg);transform-origin:center}
.mat .fcard.ccard .atkmark{font-size:10px;right:auto;left:1px;top:1px}
.mat .fcard.ccard.target{border-color:var(--red);box-shadow:0 0 12px rgba(229,72,77,.75);animation:lifePulse 1s infinite}
.mat .fcard.ccard.target.weak{border-style:dashed;opacity:.8}
@media (hover:hover){ .mat .fcard.ccard:hover{transform:rotate(90deg) scale(2.3);z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.7)} }
body.drag-construct .mat.me .z-construct{outline:3px dashed #e3b341;outline-offset:-3px;background:rgba(227,179,65,.14);border-radius:8px}
.hcard.construct{border-color:#e3b341}
/* Avatars kept in the Magic Zone (BT06 servants / เสามงคล / พี่หน่วง) */
.pcard.stash{position:relative}
.pcard.stash .stash-tag{position:absolute;left:0;right:0;bottom:0;font-size:9px;line-height:1.35;font-weight:800;text-align:center;color:#fff;background:rgba(10,14,20,.82);white-space:nowrap;overflow:hidden}
.pcard.stash.k-servant{border-color:#6fd1c4;box-shadow:0 0 8px rgba(111,209,196,.55)}
.pcard.stash.k-jail{border-color:#c46fd1;box-shadow:0 0 8px rgba(196,111,209,.55);filter:grayscale(.35)}
.pcard.stash.k-pillar{border-color:#8fd16f}
.pcard.stash.can-act{outline:2px solid var(--gold);outline-offset:1px}

/* ============ ⚡ quick match · Formats · the online chess clock (js/quick.js, js/net.js) ============ */
.qm-body{max-width:1100px;margin:0 auto;width:100%}
.qm-stats{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:9px 14px;font-size:14px;color:var(--muted);margin:4px 0 6px}
.qm-stats b{color:var(--gold)}
.qm-online b{color:#7ee08a}
.badge.qm-on{background:rgba(46,160,67,.25);color:#9ff0a8;border:1px solid rgba(46,160,67,.6)}
.qm-fmts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.qm-fmt{background:linear-gradient(180deg,var(--panel2),var(--panel));border:2px solid var(--line2);border-radius:14px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .15s, box-shadow .15s}
.qm-fmt:hover{border-color:var(--gold)}
.qm-fmt.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,193,78,.18)}
.qm-fmt .qf-top{display:flex;align-items:center;gap:10px}
.qm-fmt .qf-ico{font-size:28px}
.qm-fmt h3{margin:0;font-size:16px}
.qm-fmt small{color:var(--muted);font-size:12px}
.qm-fmt p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.qm-fmt .qf-q{font-size:12px;color:#9ff0a8;min-height:16px}
.qm-fmt .btn{align-self:flex-start}
.qm-rules{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px 14px;margin:18px 0 10px;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:5px;line-height:1.5}
.qm-rules b{color:var(--text)}
.qm-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;justify-content:flex-end;flex-wrap:wrap;padding:10px 0 14px;background:linear-gradient(180deg,transparent,var(--bg) 35%)}
.qm-sel{color:var(--muted);font-size:14px}
.qm-sel b{color:var(--gold)}
.qm-go{font-size:17px;padding:12px 26px}
.qm-go:disabled{opacity:.45;cursor:not-allowed}
.deck-grid .deck-card.qm-picked{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,193,78,.35)}
.qm-login{margin:10px 0}
.qm-search{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:40px 12px}
.qm-search .qs-spin{font-size:54px;animation:qmPulse 1.2s ease-in-out infinite}
.qm-search .qs-state{font-size:20px;font-weight:700;color:var(--gold)}
.qm-search .qs-time{font-size:34px;font-variant-numeric:tabular-nums;letter-spacing:2px}
.qm-search .qs-info{color:var(--muted);font-size:14px}
.qm-search .qs-info b{color:var(--text)}
.qm-search .qs-ver{display:inline-block;margin-top:8px;color:var(--gold);font-size:13px}
/* 🔄 a newer copy of the game is on the site (js/version.js BOT.Update) */
.upd-bar{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:99;display:flex;align-items:center;gap:8px;
  width:max-content;max-width:calc(100vw - 32px);background:var(--panel2);border:1px solid var(--gold);border-radius:12px;
  padding:6px 8px 6px 12px;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.upd-bar span{flex:1;min-width:0}
.upd-bar small{color:var(--muted)}
.upd-bar .btn{flex:none}
.upd-modal{text-align:center;max-width:420px}
@media (max-width:560px){ .upd-bar{font-size:12px;top:4px} .upd-bar small{display:none} }
.qm-search .qs-ver .btn{margin-left:6px}
.qm-search .qs-err{color:#ff9a9a;font-size:13px;min-height:16px}
@keyframes qmPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.15);opacity:1}}
/* the campaign's "play the bot" card */
.camp-bot{display:flex;align-items:center;gap:14px;padding:12px 16px;margin:4px 0 16px;border-radius:14px;cursor:pointer;
  border:2px solid rgba(110,170,255,.55);background:linear-gradient(110deg,rgba(60,110,190,.28),var(--panel) 70%)}
.camp-bot:hover{border-color:var(--gold)}
.camp-bot .cb-ico{font-size:40px}
.camp-bot .cb-info{flex:1;min-width:0}
.camp-bot h3{margin:0 0 3px;font-size:18px}
.camp-bot .cb-tag{font-size:11px;font-weight:700;color:#1a1206;background:#8fc2ff;border-radius:999px;padding:1px 8px;vertical-align:middle}
.camp-bot p{margin:0;color:var(--muted);font-size:13px}
.camp-bot .cb-go{font-weight:800;color:var(--gold);white-space:nowrap}
/* deck builder: Format */
.fmt-sel{background:var(--panel);border:1px solid var(--gold);color:var(--text);border-radius:8px;padding:5px 8px;font-size:13px;max-width:240px}
.bld-fmt{display:inline-block;background:rgba(242,193,78,.14);border:1px solid rgba(242,193,78,.5);color:var(--gold);border-radius:999px;padding:0 8px;margin-right:6px;font-size:12px}
.ban-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.ban-row.bad-set{border-color:rgba(229,72,77,.6)}
/* the chess clock bar under the game's top bar */
.pvp-clock{display:flex;align-items:center;justify-content:center;gap:10px;padding:3px 10px;background:rgba(0,0,0,.28);border-bottom:1px solid var(--line);font-size:13px}
.pvp-clock .pc-mid{color:var(--muted);font-size:12px;white-space:nowrap}
.pvp-clock .pc-side{display:flex;align-items:center;gap:7px;padding:2px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line2);min-width:118px;justify-content:center;transition:all .2s}
.pvp-clock .pc-n{color:var(--muted);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvp-clock .pc-t{font-size:17px;font-variant-numeric:tabular-nums;color:var(--text)}
.pvp-clock .pc-r{font-style:normal;font-size:12px;font-weight:800;color:#ffb347}
.pvp-clock .pc-side.run{border-color:var(--gold);box-shadow:0 0 0 2px rgba(242,193,78,.25)}
.pvp-clock .pc-side.run .pc-t{color:var(--gold)}
.pvp-clock .pc-side.low .pc-t{color:#ff8a8a}
.pvp-clock .pc-side.afk{animation:pcBlink .6s steps(2) infinite;border-color:#e5484d}
.pvp-clock .pc-side.fast{background:rgba(229,72,77,.22)}
@keyframes pcBlink{50%{background:rgba(229,72,77,.35)}}
@media (max-width:560px){ .pvp-clock{gap:6px;padding:2px 6px} .pvp-clock .pc-mid{display:none} .pvp-clock .pc-side{min-width:0;padding:2px 8px} .pvp-clock .pc-n{max-width:60px} .camp-bot .cb-ico{font-size:30px} }

/* ============ community (js/social.js): golden hour · chat · watching a friend · the weekly community quest ============ */
.golden-bar{margin:6px auto 10px;max-width:560px;padding:8px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--muted);font-size:13px;text-align:center}
.golden-bar.on{color:#2a1d05;background:linear-gradient(90deg,#f2c14e,#ffdf8a,#f2c14e);border-color:#f2c14e;font-weight:700;animation:goldGlow 2.4s ease-in-out infinite}
.golden-bar.menu-golden{cursor:pointer;width:calc(100% - 32px)}
@keyframes goldGlow{50%{box-shadow:0 0 14px rgba(242,193,78,.65)}}
/* in-match chat */
.chat-btn{position:relative}
.chat-btn.has-new{border-color:var(--gold);animation:goldGlow 1.6s ease-in-out infinite}
.chat-btn .badge{position:absolute;top:-6px;right:-6px;margin:0;min-width:16px;line-height:16px;font-size:10px;padding:0 4px}
.match-chat{position:fixed;right:10px;bottom:150px;z-index:260;width:min(320px,calc(100vw - 20px));max-height:min(420px,60vh);display:flex;flex-direction:column;
  background:var(--panel2);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.mc-head{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--line)}
.mc-head b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-head b small{color:var(--muted);font-weight:600}
.mc-list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:5px;min-height:80px;user-select:text;-webkit-user-select:text}
.mc-msg{align-self:flex-start;max-width:88%;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px 8px;font-size:13px;word-break:break-word}
.mc-msg b{color:var(--gold);margin-right:4px}
.mc-msg small{display:block;color:var(--dim);font-size:10px}
.mc-msg.mine{align-self:flex-end;background:rgba(58,160,255,.14);border-color:rgba(58,160,255,.45)}
.mc-msg.mine b{color:#9fd0ff}
.mc-empty{color:var(--muted);font-size:13px;text-align:center;padding:14px 6px}
.mc-note{padding:6px 10px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.mc-emotes{display:flex;gap:4px;overflow-x:auto;padding:4px 6px;border-top:1px solid var(--line)}
.mc-emotes .btn{flex:0 0 auto;padding:4px 8px;font-size:12px;white-space:nowrap}
.mc-form,.ch-form{display:flex;gap:6px;padding:6px;border-top:1px solid var(--line)}
.mc-form input,.ch-form input{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;color:var(--text);padding:8px 10px;font:inherit;font-size:14px;user-select:text;-webkit-user-select:text}
.chat-bubble{position:fixed;top:70px;right:12px;z-index:270;max-width:min(320px,calc(100vw - 24px));background:var(--panel2);border:1px solid var(--gold);border-radius:12px;padding:8px 12px;font-size:14px;
  box-shadow:var(--shadow);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s,transform .2s;cursor:pointer}
.chat-bubble.show{opacity:1;transform:none;pointer-events:auto}
.chat-bubble b{color:var(--gold);margin-right:4px}
/* spectators */
.watch-pill{cursor:default}
.watch-chip{background:rgba(168,119,255,.16);border-color:rgba(168,119,255,.55)}
.watch-hint{color:#d9c4ff}
.hcard.back-card{cursor:default;border-color:var(--line)}
.fr-playing{color:#d9c4ff !important}
.watch-btn{border-color:rgba(168,119,255,.6)}
.dm-btn{position:relative}
.dm-btn .badge{position:absolute;top:-6px;right:-6px;margin:0;min-width:16px;line-height:16px;font-size:10px;padding:0 4px}
.fr-online{background:linear-gradient(135deg,rgba(70,197,106,.18),var(--panel2) 55%);border-color:var(--ok)}
/* the chat screen */
.ch-body{display:flex;flex-direction:column;gap:8px;max-width:760px;width:100%;margin:0 auto;padding-bottom:8px}
.ch-tabs{justify-content:center;padding:6px 12px 0;margin:0}
.ch-note{font-size:12px;max-width:none}
.ch-set .hint,.ch-menu .hint,.watch-ov .hint,.quest.community .hint{max-width:none;text-align:left}
.ch-list{flex:1;min-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px;user-select:text;-webkit-user-select:text}
.ch-msg{display:flex;gap:8px;align-items:flex-start;max-width:92%}
.ch-msg.mine{align-self:flex-end;flex-direction:row-reverse}
.ch-av{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid var(--line2);flex:0 0 auto}
.ch-b{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:6px 10px;min-width:0}
.ch-msg.mine .ch-b{background:rgba(58,160,255,.14);border-color:rgba(58,160,255,.45)}
.ch-n{cursor:pointer;font-size:13px}
.ch-n small,.ch-b > small{color:var(--dim);font-size:11px}
.ch-t{font-size:14px;word-break:break-word;white-space:pre-wrap}
.ch-b .btn{margin-top:6px}
.ch-head{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:8px 10px}
.ch-head > div{flex:1;display:flex;flex-direction:column;min-width:0}
.ch-head small{color:var(--muted);font-size:12px}
.ch-dm{cursor:pointer}
.ch-form{position:sticky;bottom:0;background:var(--bg2);border:1px solid var(--line2);border-radius:12px}
.ch-menu .col{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ch-set .ch-opt{display:flex;gap:10px;align-items:flex-start;text-align:left;margin:10px 0;cursor:pointer}
.ch-set .ch-opt input{margin-top:4px;width:18px;height:18px;flex:0 0 auto}
.ch-set .ch-opt small{display:block;color:var(--muted);font-size:12px}
/* the weekly community quest */
.quest.community{background:linear-gradient(90deg,rgba(70,197,106,.12),var(--panel));border-color:rgba(70,197,106,.45)}
.quest.community .q-rw{color:#a8f0bb}
.quest.community .hint{font-size:11px;margin-top:2px}
@media (max-width:560px){ .match-chat{bottom:130px} .golden-bar{font-size:12px} }
.quest.on-q{background:linear-gradient(90deg,rgba(58,160,255,.1),var(--panel));border-color:rgba(58,160,255,.35)}
.quest.on-q .q-rw{color:#9fd0ff}
/* 🛰️ the admins' Monitor (js/social.js showMonitor) */
.admin-btn{border-color:rgba(168,119,255,.6);background:linear-gradient(180deg,rgba(168,119,255,.22),var(--panel))}
.mon-body{display:flex;flex-direction:column;gap:8px;max-width:980px;width:100%;margin:0 auto}
.mon-range{background:var(--panel);border:1px solid var(--line2);color:var(--text);border-radius:8px;padding:6px 8px;font:inherit;font-size:13px}
.mon-head{font-size:14px;color:var(--muted)}
.mon-head b{color:var(--ok)}
.mon-head .hint{display:inline;max-width:none;margin-left:6px}
.mon-filt{margin:0}
.mon-filt .btn{padding:5px 10px;font-size:12px}
.mon-search{background:var(--bg2);border:1px solid var(--line2);border-radius:8px;color:var(--text);padding:8px 10px;font:inherit;font-size:14px;user-select:text;-webkit-user-select:text}
.mon-list{display:flex;flex-direction:column;gap:6px}
.mon-row .fr-info{flex:1 1 220px}
.mon-act{flex:1 1 240px;min-width:0;display:flex;flex-direction:column}
.mon-what{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-act small{font-size:11px;color:var(--muted)}
.mon-row.cat-online{border-left:3px solid var(--red)}
.mon-row.cat-bot{border-left:3px solid var(--blue)}
.mon-row.cat-search{border-left:3px solid var(--gold)}
.mon-row.cat-shop{border-left:3px solid var(--purple)}
.mon-row.cat-deck{border-left:3px solid var(--green)}
.mon-row.cat-social{border-left:3px solid #4fd1c5}
.mon-row.cat-away{opacity:.6}
.mon-row.on .fr-dot{background:var(--ok);box-shadow:0 0 6px rgba(70,197,106,.8)}
.mon-empty,.mon-note{max-width:none;text-align:center}
.mon-admin{border:1px solid rgba(168,119,255,.5);border-radius:12px;padding:10px 12px;background:linear-gradient(135deg,rgba(168,119,255,.1),var(--panel))}
.mon-line{display:flex;gap:10px;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--line);font-size:13px}
.mon-line span{color:var(--muted);flex:0 0 auto}
.mon-line b{text-align:right;font-weight:600}
.mon-line .hint{display:inline;max-width:none}
.mon-sub{margin:10px 0 4px;font-weight:700;font-size:13px}
.mon-log td{font-size:12px}
.mon-up{color:var(--ok)} .mon-down{color:#ff8a8a}
@media (max-width:640px){ .mon-row{flex-wrap:wrap} .mon-act{flex-basis:100%;order:3} }

/* ---------- 🏆 อันดับตามฤดูกาล (js/rank.js) ---------- */
.rk-modal{max-width:620px;width:min(620px,calc(100vw - 24px))}
.rk-list{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:6px;margin:8px 0}
.rk-row{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.rk-row.me{border-color:var(--gold);background:linear-gradient(135deg,rgba(242,193,78,.14),var(--panel) 60%)}
.rk-row.podium{border-color:var(--line2)}
.rk-row.p1{background:linear-gradient(135deg,rgba(242,193,78,.18),var(--panel) 62%)}
/* 📢 ประกาศจากแอดมิน (js/announce.js) */
.ann-modal{max-width:460px;text-align:center}
.ann-modal .ann-ic{font-size:44px;line-height:1}
.ann-modal h2{margin:6px 0 10px}
.ann-body{white-space:normal;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:15px}
.ann-modal.ann-warn{border-color:var(--danger)}
.ann-modal.ann-event{border-color:var(--gold)}
.ann-form{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:16px}
.ann-form h3{margin:0 0 10px}
.ann-f{margin-bottom:10px}
.ann-f label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.ann-f input,.ann-f select,.ann-f textarea{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:9px;color:var(--text);padding:8px 10px;font:inherit;font-size:14px}
.ann-row{display:flex;gap:8px}
.ann-row>*{flex:1;min-width:0}
.ann-flags{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0}
.ann-chk{display:flex;align-items:center;gap:6px;font-size:14px}
.ann-chk input{width:18px;height:18px}
.ann-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.ann-item.off{opacity:.55}
.ann-it-h{font-size:15px}
.ann-it-b{font-size:13px;color:var(--muted);margin-top:4px;white-space:pre-wrap}
.ann-it-a{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.rk-warn{color:var(--gold)}
.rk-row.tap{cursor:pointer}
.rk-row.tap:hover{border-color:var(--line2);filter:brightness(1.08)}
.rk-pos{min-width:34px;text-align:center;font-weight:800;font-size:15px;color:var(--muted)}
.rk-av{width:34px;height:34px;border-radius:8px;object-fit:cover;object-position:top center;border:1px solid var(--line2);flex:none}
.rk-who{flex:1;min-width:0}
.rk-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-name small{color:var(--dim);font-weight:500}
.rk-you{background:var(--gold);color:#1a1205;border-radius:6px;padding:0 5px;font-size:11px;font-weight:800}
.rk-sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-pts{text-align:right;flex:none;min-width:58px}
.rk-pts b{display:block;font-size:17px;color:var(--gold);line-height:1.1}
.rk-pts small{color:var(--dim);font-size:11px}
.rk-mine{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;font-size:13px;margin-bottom:8px}

/* ---------- ✏️ แก้แบนลิสต์ (แอดมิน · js/banlist.js) ---------- */
.ban-edit{max-width:760px;width:min(760px,calc(100vw - 24px))}
.be-dirty{color:var(--gold)}
.be-add{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:8px 0}
.be-add label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.be-q{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;color:var(--text);padding:7px 10px;font:inherit;font-size:14px}
.be-hits{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.be-hits small{color:var(--dim)}
.be-rows{max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
.be-row{display:flex;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.be-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.be-ctl,.be-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.be-lab{font-size:12px;color:var(--muted)}
.be-sel{background:var(--bg2);border:1px solid var(--line2);border-radius:8px;color:var(--text);padding:4px 6px;font:inherit;font-size:13px}
.be-chk{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer}
.be-bar{margin-top:10px;flex-wrap:wrap}
.be-pick{max-width:520px;width:min(520px,calc(100vw - 24px))}
.be-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;min-height:24px}
.be-chip{background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:3px 9px;font-size:12px;cursor:pointer}
.be-chip:hover{border-color:var(--danger)}
.btn.danger{border-color:var(--danger);color:#ffb4b4}
@media (max-width:640px){ .be-row{flex-direction:column} .rk-sub{white-space:normal} }

/* ---------- 🎁 รางวัลจบฤดูกาล (js/rank.js) ---------- */
.rk-claim:not(:empty){background:linear-gradient(135deg,rgba(242,193,78,.18),var(--panel2) 60%);border:1px solid var(--gold);border-radius:10px;padding:9px 11px;font-size:13px;margin-bottom:8px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.rk-done{color:var(--ok);font-weight:700}
.rk-rw{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rk-rw-h{background:var(--panel2);padding:7px 10px;font-weight:700;font-size:13px}
.rk-rw-h small{display:block;color:var(--muted);font-weight:400;font-size:11px}
.rk-rw-row{display:flex;gap:10px;align-items:center;padding:6px 10px;border-top:1px solid var(--line);font-size:12.5px}
.rk-rw-c{flex:none;min-width:150px;font-weight:700}
.rk-rw-c small{display:block;color:var(--muted);font-weight:400;font-size:11px}
.rk-rw-g{flex:1;color:var(--gold)}
.rw-row .be-ctl{gap:5px}
.be-n{background:var(--bg2);border:1px solid var(--line2);border-radius:8px;color:var(--text);padding:4px 7px;font:inherit;font-size:13px;width:80px}
@media (max-width:640px){ .rk-rw-row{flex-direction:column;align-items:flex-start;gap:2px} .rk-rw-c{min-width:0} }