:root{--outline:#1B1230;--panel:rgba(31,27,46,.85);--panel-solid:#1F1B2E;--blue:#2F8CFF;--blue-d:#1B5FCC;--red:#FF3B3B;--red-d:#B81E1E;--green:#4CD137;--green-d:#2E8B24;--gold:#FFC531;--gold-d:#B8860B;--gem:#B15CFF;--text:#FFFFFF;--muted:#CFC9E6;--ink:#1B1230;--sky:#FFB3C7;--hills:#F06292;--ground:#C2185B;--common:#D9D4C7;--rare:#2F8CFF;--epic:#B15CFF;--legendary:linear-gradient(135deg,#FFC531,#FF6A1F);--r:14px;--fast:120ms;--norm:240ms}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--panel:rgba(31,27,46,.85);--panel-solid:#1F1B2E;--text:#FFFFFF;--muted:#CFC9E6}}
:root[data-theme="dark"]{--panel:rgba(31,27,46,.85);--panel-solid:#1F1B2E;--text:#FFFFFF;--muted:#CFC9E6}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}
.card:focus-visible,.btn:focus-visible{outline:3px solid #fff;outline-offset:4px}
.card .ico{position:relative}
.card .ico canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;background:#fff;pointer-events:none}
.card .ico canvas.loaded{opacity:1}
.hand-empty{padding:10px 16px;border-radius:12px;background:var(--panel-solid);font-size:13px;align-self:center}
.rival-preview{margin-top:10px;padding:6px 10px;background:var(--panel-solid);border-radius:8px;font:500 12px/1.35 Rubik, sans-serif;color:var(--muted)}
.rival-preview strong{display:block;color:var(--text);font-weight:700;margin-bottom:2px}
#tacticHint{position:absolute;top:88px;left:50%;transform:translateX(-50%);max-width:430px;padding:5px 12px;background:var(--panel-solid);border:2px solid var(--gold);border-radius:10px;color:var(--text);font:700 13px/1.35 Rubik,sans-serif;text-align:center;z-index:3;pointer-events:none}
.card.combo-ready{outline:2px solid var(--gold);outline-offset:2px}
.card .combo-label{position:absolute;bottom:2px;left:2px;right:2px;background:var(--outline);color:var(--gold);border-radius:4px;font:700 10px/1.4 Rubik,sans-serif}
@media(prefers-reduced-motion:reduce){#tacticHint{animation:none;transition:none}}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{background:#FFB3C7;background:var(--sky);color:var(--text);font-family:Rubik,system-ui,sans-serif;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;transition:background var(--norm)}
#stage{position:absolute;left:50%;top:50%;width:844px;height:390px;transform-origin:center;transform:translate(-50%,-50%);overflow:hidden;background:var(--sky)}
#bgcv{position:absolute;inset:0;width:844px;height:390px}
.lil,.btn,.h-out,.pill,.vs span,#rail button{font-family:'Lilita One',Rubik,system-ui,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.4px}
.h-out{color:#fff;-webkit-text-stroke:1.2px var(--outline);paint-order:stroke fill;text-shadow:3px 3px 0 var(--outline);line-height:1}
.h1{font-size:40px}.h2{font-size:22px}.h3{font-size:16px}
.muted{color:var(--muted)}.small{font-size:11px}.tab{font-variant-numeric:tabular-nums}.center{text-align:center}.mt{margin-top:8px}.grow{flex:1}
.row{display:flex;align-items:center;gap:8px}.row.between{justify-content:space-between}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.cols5{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.panel{background:var(--panel);border:2px solid var(--outline);border-radius:var(--r);padding:10px;color:#fff;box-shadow:0 3px 0 var(--outline)}
.panel h3{margin:0 0 6px;font-size:15px}
/* buttons */
.btn{--bg:var(--blue);--fl:var(--blue-d);--pt:6px;--px:14px;--nudge:1px;font-size:15px;line-height:1.15;text-align:center;color:#fff;-webkit-text-stroke:.8px var(--outline);paint-order:stroke fill;text-shadow:1px 2px 0 var(--outline);background:var(--bg);border:2px solid var(--outline);border-radius:var(--r);box-shadow:0 5px 0 var(--fl),0 5px 0 2px var(--outline);padding:calc(var(--pt) - var(--nudge)) var(--px) calc(var(--pt) + var(--nudge));min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;cursor:pointer;transition:transform var(--fast),box-shadow var(--fast),opacity var(--norm);white-space:nowrap;position:relative;overflow:hidden}
.btn:active{transform:translateY(4px) scale(1.03,.96);box-shadow:0 1px 0 var(--fl),0 1px 0 2px var(--outline)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-green{--bg:var(--green);--fl:var(--green-d)}.btn-gold{--bg:var(--gold);--fl:var(--gold-d)}.btn-red{--bg:var(--red);--fl:var(--red-d)}.btn-dark{--bg:#3A3352;--fl:#141022}.btn-white{--bg:#fff;--fl:#BDB6D6;color:#1B1230;-webkit-text-stroke:0;text-shadow:none}
.btn-big{font-size:26px;min-height:64px;--pt:8px;--px:26px}.btn-sm{font-size:13px;min-height:34px;--pt:4px;--px:10px;border-radius:11px;box-shadow:0 4px 0 var(--fl),0 4px 0 2px var(--outline)}.btn-xs{font-size:11px;min-height:28px;--pt:2px;--px:8px;border-radius:9px;box-shadow:0 3px 0 var(--fl),0 3px 0 2px var(--outline)}.btn.wide{width:100%}
.btn .fill{position:absolute;inset:0;background:rgba(255,255,255,.3);width:0;transition:width 3s linear;pointer-events:none}
/* chips */
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--panel);border:2px solid var(--outline);border-radius:999px;padding:2px 10px;font-family:'Lilita One',sans-serif;font-size:13px;min-height:28px;color:#fff;text-shadow:1px 1px 0 var(--outline);font-variant-numeric:tabular-nums}
.chip canvas{width:18px;height:18px}
.chip.btn2{cursor:pointer}
.badge{font-size:10px;font-family:'Lilita One';background:var(--green);border:2px solid var(--outline);border-radius:999px;padding:1px 8px;display:none}.badge.on{display:inline-block}
.bar{height:12px;background:#1B1230;border:2px solid var(--outline);border-radius:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green);transition:width var(--norm)}
.bar.gold i{background:var(--gold)}.bar.blue i{background:var(--blue)}
/* cards (DOM) */
.card{--rc:#D9D4C7;position:relative;background:#fff;color:#1B1230;border:3px solid var(--outline);border-radius:12px;box-shadow:inset 0 0 0 3px var(--rc),0 4px 0 var(--outline);padding:10px 3px 5px;text-align:center;cursor:pointer;min-width:0;transition:transform var(--fast),box-shadow var(--norm),opacity var(--norm)}
.card.r-rare{--rc:#2F8CFF}.card.r-epic{--rc:#B15CFF}.card.r-legendary{--rc:#FFC531;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#FFC531,#FF6A1F) border-box;border-color:transparent;box-shadow:inset 0 0 0 3px #FF6A1F,0 4px 0 var(--outline)}
.card .cost{position:absolute;top:-9px;left:-7px;width:24px;height:24px;border-radius:50%;background:var(--gem);border:2px solid var(--outline);color:#fff;font-family:'Lilita One';font-size:13px;display:grid;place-items:center;z-index:1;text-shadow:1px 1px 0 var(--outline)}
.card.atk .cost{background:var(--red)}.card.def .cost{background:var(--blue)}.card.bld .cost{background:var(--green)}
.buffs{position:absolute;left:50%;bottom:110px;transform:translateX(calc(-50% + 150px));display:flex;gap:4px;z-index:2}
.buffs span{background:var(--green);border:2px solid var(--outline);border-radius:999px;padding:1px 7px;font-family:'Lilita One';font-size:10px;text-shadow:1px 1px 0 var(--outline);white-space:nowrap}
.card .typ{position:absolute;top:-8px;right:-5px;font-size:10px;background:#fff;border:2px solid var(--outline);border-radius:999px;padding:0 4px}
/* An illustrated card gets a 5:4 picture box instead of one emoji line, so the 4:5 art is cropped by a third, not by two thirds. */
.card .ico:has(canvas){aspect-ratio:5/4}
.card .nm{font-family:'Lilita One';font-size:10px;text-transform:uppercase;margin-top:3px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .lv{font-size:9px;color:#5b5476;font-weight:700}
.card.dim{opacity:.4;filter:grayscale(.9)}
.card.sel{transform:translateY(-12px) scale(1.06);box-shadow:inset 0 0 0 3px var(--rc),0 0 0 3px var(--gold),0 8px 0 var(--outline);z-index:2}
.card.big .nm{font-size:11px;white-space:normal}
.card .prog{height:6px;background:#e7e3f3;border:1.5px solid var(--outline);border-radius:999px;margin:4px 3px 0;overflow:hidden}.card .prog i{display:block;height:100%;background:var(--green)}.card .prog.ready i{background:var(--gold)}
.card .cp{font-size:9px;color:#5b5476;font-weight:700}
.card .mk{position:absolute;bottom:2px;right:3px;line-height:0}[dir=rtl] .card .mk{right:auto;left:3px}
.card .pr{margin-top:4px;font-family:'Lilita One';font-size:11px;color:var(--gold-d)}
.card.target{outline:3px solid var(--gold);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* menu layout */
#menu{position:absolute;inset:0;display:none}#menu.on{display:block}
#rail{position:absolute;left:0;top:0;bottom:0;width:100px;background:var(--panel);border-right:3px solid var(--outline);display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:6px 4px;z-index:3}
#rail button{width:88px;height:58px;border-radius:14px;border:2px solid transparent;background:none;color:#fff;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;text-shadow:1px 1px 0 var(--outline);transition:background var(--fast)}
#rail button .i{font-size:22px;line-height:1}
#rail button.on{background:rgba(255,255,255,.14);border-color:var(--outline)}
#rail button.center{background:var(--green);border-color:var(--outline);box-shadow:0 4px 0 var(--green-d),0 4px 0 2px var(--outline);height:68px;font-size:14px}
#rail button.center .i{font-size:26px}
#rail button.center:active{transform:translateY(3px);box-shadow:0 1px 0 var(--green-d),0 1px 0 2px var(--outline)}
#content{position:absolute;left:100px;top:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding:8px 12px 12px;scrollbar-width:thin}
.screen{display:none}.screen.on{display:block;animation:screenIn 180ms ease-out}
@keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bump{animation:bump 260ms cubic-bezier(.2,.8,.3,1)}
@keyframes bump{35%{transform:scale(1.28)}}
.hand .card.deal{animation:deal 220ms cubic-bezier(.2,.8,.3,1) backwards}
@keyframes deal{from{transform:translateY(34px) scale(.88);opacity:0}}
#top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.topbtns{display:flex;gap:6px}
/* home */
.hero{background:var(--panel);border:2px solid var(--outline);border-radius:var(--r);padding:10px;display:flex;gap:10px;align-items:center;box-shadow:0 3px 0 var(--outline)}
.avbig{width:56px;height:56px;border-radius:50%;background:#fff;border:3px solid var(--outline);display:grid;place-items:center;flex:none}
.pname{font-family:'Lilita One';font-size:20px;text-transform:uppercase;text-shadow:2px 2px 0 var(--outline);display:flex;align-items:center;gap:6px}
.chests{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.chest{background:var(--panel);border:2px solid var(--outline);border-radius:12px;padding:4px;text-align:center;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px}
.chest canvas{width:40px;height:40px}
.chest.ready{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold);animation:bob 1.2s infinite ease-in-out}
.chest.empty{opacity:.55;border-style:dashed}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.noads{background:var(--panel);border:2px solid var(--gem);border-radius:var(--r);padding:8px 10px}
/* battle */
#s-battle{position:absolute;inset:0;display:none}#s-battle.on{display:block}
#cv{position:absolute;inset:0;width:844px;height:390px;touch-action:none}
.bhud{position:absolute;left:0;right:0;top:0;height:52px;display:grid;grid-template-columns:1fr 84px 1fr;pointer-events:none;z-index:2}
.hside{display:flex;align-items:center;gap:7px;padding:5px 10px;border-bottom:3px solid var(--outline);min-width:0}
.hside.blue{background:var(--blue)}.hside.red{background:var(--red);flex-direction:row-reverse}
.hside .av{width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid var(--outline);display:grid;place-items:center;flex:none}
.hinfo{min-width:0;display:flex;flex-direction:column}
.hname{font-family:'Lilita One';font-size:14px;text-transform:uppercase;text-shadow:1px 1px 0 var(--outline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htro{font-size:10px;font-weight:700;text-shadow:1px 1px 0 var(--outline)}
.hpwrap{flex:1;display:flex;flex-direction:column;gap:2px;min-width:70px}
.hpbar{height:13px;border:2px solid var(--outline);border-radius:8px;background:#1B1230;overflow:hidden}
.hpbar i{display:block;height:100%;background:var(--green);transition:width var(--norm)}
.hpbar.low i{background:var(--gold)}.hpbar.crit i{background:var(--red)}
.hppct{font-family:'Lilita One';font-size:12px;text-shadow:1px 1px 0 var(--outline);display:flex;justify-content:space-between}
.chips{display:flex;gap:2px}.chips span{width:20px;height:20px;border-radius:6px;background:rgba(0,0,0,.28);border:1.5px solid var(--outline);display:grid;place-items:center}
.vs{background:var(--panel-solid);border:3px solid var(--outline);border-top:0;transform:skewX(-14deg);display:grid;place-items:center;margin:0 -10px;border-radius:0 0 10px 10px;z-index:1}
.vs span{transform:skewX(14deg);font-size:26px;color:#fff;-webkit-text-stroke:1px var(--outline);paint-order:stroke fill;text-shadow:2px 2px 0 var(--outline)}
.hside.active{box-shadow:inset 0 -6px 0 var(--gold)}
.pill{position:absolute;background:var(--panel);border:2px solid var(--outline);border-radius:999px;padding:3px 12px;font-size:13px;color:#fff;text-shadow:1px 1px 0 var(--outline);pointer-events:none;white-space:nowrap;z-index:2}
#topPills{position:absolute;top:58px;left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:6px;align-items:center;z-index:2;pointer-events:none}
#topPills .pill{position:static;transform:none!important}
#timerPill{top:58px;left:50%;transform:translateX(4%)}
#timerPill.hot{background:var(--red)}
#aimInfo{top:128px;left:50%;transform:translateX(-50%);display:none;font-size:15px}
#aimInfo.on{display:block}
.strip{position:absolute;left:50%;bottom:136px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:nowrap;font-family:'Lilita One';font-size:13px;text-transform:uppercase;text-shadow:1px 1px 0 var(--outline);z-index:2;max-width:380px;text-align:center}
.strip .threat{display:flex;align-items:center;gap:8px;background:var(--red);border:2px solid var(--outline);border-radius:999px;padding:3px 14px;box-shadow:0 3px 0 var(--outline);animation:pulse 1s infinite;font-size:15px}
.strip .threat b{display:flex}
.strip .msg{background:var(--panel);border:2px solid var(--outline);border-radius:999px;padding:3px 12px}
.alts{display:flex;gap:3px}.alts .btn.on{outline:3px solid var(--gold)}
.ebar{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);display:flex;align-items:center;gap:3px;background:var(--panel);border:2px solid var(--outline);border-radius:999px;padding:3px 10px;z-index:2}
.ebar b{font-family:'Lilita One';font-size:12px;margin-right:4px;text-shadow:1px 1px 0 var(--outline)}
.ebar i{width:20px;height:10px;border-radius:4px;background:#3A3352;border:1.5px solid var(--outline)}.ebar i.on{background:var(--gold)}
.hand{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;gap:8px;z-index:2;min-height:100px;align-items:flex-end}
.hand .card{width:76px;height:98px;padding-top:12px}
.hand .ph{background:transparent!important;border:0!important;height:40px!important;font-size:12px!important;opacity:.8;width:328px;height:60px;display:grid;place-items:center;background:var(--panel);border:2px dashed var(--outline);border-radius:12px;font-family:'Lilita One';text-transform:uppercase;font-size:13px}
#passBtn{position:absolute;right:12px;bottom:12px;z-index:2}
/* battle controls: one 30px translucent gear in the corner (hit area stays 48px via ::before), the timer beside it;
   settings / sound / leave fold out of it in a panel. Clear of the enemy castle's top rows. */
.bctl{position:absolute;right:8px;top:56px;display:flex;gap:6px;align-items:center;z-index:2}
.pausebtn{position:relative;width:30px;height:30px;border-radius:50%;border:2px solid var(--outline);background:rgba(27,18,48,.55);opacity:.75;display:grid;place-items:center;padding:0;cursor:pointer;transition:opacity var(--fast),transform var(--fast)}
.pausebtn::before{content:"";position:absolute;inset:calc((30px - max(48px,var(--arena-tap,48px)))/2)}
.pausebtn canvas.ic{width:18px;height:18px}
.pausebtn:active{transform:scale(.9)}
.pausebtn:hover,.pausebtn:focus-visible,.pausebtn[aria-expanded=true]{opacity:1}
.pausepanel{position:absolute;right:8px;top:92px;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--panel-solid);border:2px solid var(--outline);border-radius:12px;box-shadow:0 4px 0 var(--outline);z-index:6;animation:pop 150ms ease-out}
.pausepanel .btn{justify-content:flex-start;min-height:40px;--px:12px}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
#passBtn,#buildBtn{min-height:44px}
#roundLbl{max-width:330px;overflow:hidden;text-overflow:ellipsis}
.overlay{position:absolute;inset:0;background:rgba(27,18,48,.82);display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;z-index:20}
.overlay.on{display:flex}
#endOverlay.on{animation:overlayIn 280ms cubic-bezier(.2,.8,.3,1)}
@keyframes overlayIn{from{opacity:0;transform:scale(.94)}}
#endOverlay.on .endstats span,#endOverlay.on .reward>*{animation:deal 320ms cubic-bezier(.2,.8,.3,1) backwards}
#endOverlay.on .endstats span:nth-child(2),#endOverlay.on .reward>:nth-child(2){animation-delay:70ms}
#endOverlay.on .endstats span:nth-child(3),#endOverlay.on .reward>:nth-child(3){animation-delay:140ms}
#endOverlay.on .reward>:nth-child(n+4){animation-delay:210ms}
.reward{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
/* shop */
.hero-offer{background:var(--panel);border:3px solid var(--gold);border-radius:var(--r);padding:10px;position:relative;overflow:hidden;box-shadow:0 3px 0 var(--outline)}
.tag{position:absolute;top:8px;left:-32px;background:var(--red);color:#fff;font-family:'Lilita One';font-size:11px;padding:3px 40px;transform:rotate(-35deg);border:2px solid var(--outline)}
.price{font-family:'Lilita One';font-size:20px;text-shadow:2px 2px 0 var(--outline)}.price s{color:var(--muted);font-size:13px;margin-left:6px}
.pack{background:var(--panel);border:2px solid var(--outline);border-radius:12px;padding:6px 4px;text-align:center;display:flex;flex-direction:column;gap:3px;align-items:center;box-shadow:0 3px 0 var(--outline)}
.pack .ci{line-height:0}.pack b{font-family:'Lilita One';font-size:13px}
.pass{display:flex;gap:5px;overflow-x:auto;padding:4px 0;scrollbar-width:none}
.tier{flex:none;width:54px;background:rgba(255,255,255,.1);border:2px solid var(--outline);border-radius:10px;padding:4px 2px;text-align:center;font-size:9px}
.tier .ci{line-height:0;padding:2px 0}.tier.pro{border-color:var(--gold)}
.daily{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* clan / events */
.friend{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.15)}.friend{flex-wrap:wrap}.friend .btn{margin-inline-start:auto}
.status{display:inline-block;width:9px;height:9px;border-radius:50%;background:#8d87a6;border:1.5px solid var(--outline);vertical-align:middle;margin-inline-start:2px}.status.online{background:var(--green)}.friend:last-child{border-bottom:0}
.av{width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--outline);display:grid;place-items:center}
.lb{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:8px;font-size:12px}.lb .rk{width:18px;font-family:'Lilita One';color:var(--muted)}.lb.me{background:rgba(255,197,49,.25);border:2px solid var(--gold)}.lb .tr{margin-left:auto;font-family:'Lilita One';color:var(--gold)}
.event{background:var(--panel);border:3px solid var(--blue);border-radius:var(--r);padding:10px;box-shadow:0 3px 0 var(--outline)}
.quest{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.15)}.quest:last-child{border-bottom:0}.quest .bar{flex:1}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.day{background:rgba(255,255,255,.1);border:2px solid var(--outline);border-radius:9px;padding:4px 0;text-align:center;font-size:9px;min-width:0}.day .ci{line-height:0;padding:2px 0}.day.done{opacity:.5;border-color:var(--green)}.day.today{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
/* deck */
.deckslots{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.deckslots .card{padding-top:10px}
.warn{color:#FFB3B3;font-weight:700;font-size:11px;margin-top:4px}
.seg{display:flex;background:var(--panel);border:2px solid var(--outline);border-radius:999px;padding:2px;gap:2px}
.seg button{flex:1;border:0;background:none;color:var(--muted);font-family:'Lilita One';font-size:12px;text-transform:uppercase;padding:5px;border-radius:999px;min-height:30px;cursor:pointer}
.seg button.on{background:var(--blue);color:#fff;text-shadow:1px 1px 0 var(--outline)}
.coll{display:grid;grid-template-columns:repeat(10,1fr);gap:10px 7px;margin-top:8px}
/* modal + toast + ad + rotate */
#modal{position:absolute;inset:0;background:rgba(27,18,48,.75);display:none;align-items:center;justify-content:center;z-index:50}
#modal.on{display:flex}
#modal .box{width:520px;max-width:96%;max-height:92%;overflow-y:auto;background:var(--panel-solid);border:3px solid var(--outline);border-radius:var(--r);padding:14px;box-shadow:0 6px 0 var(--outline);animation:up var(--norm) ease-out;color:#fff}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
#toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%) translateY(20px);background:var(--panel-solid);border:2px solid var(--outline);color:#fff;padding:6px 16px;border-radius:999px;font-family:'Lilita One';font-size:13px;opacity:0;transition:all var(--norm);z-index:80;pointer-events:none;white-space:nowrap;box-shadow:0 3px 0 var(--outline)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#adOverlay{position:absolute;inset:0;background:var(--panel-solid);display:none;z-index:70}
#adOverlay.on{display:flex}
.adtop{position:absolute;left:12px;top:8px;font-family:'Lilita One';font-size:12px;color:var(--muted);text-transform:uppercase}
.adbody{flex:1;margin:34px 12px 12px;border-radius:var(--r);border:3px solid var(--outline);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px;position:relative;overflow:hidden;color:#fff}
.adbody .big{line-height:0;animation:bob 1.6s infinite ease-in-out}
.adside{width:240px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:34px 12px 12px 0}
.simlabel{position:absolute;top:8px;right:10px;font-size:9px;font-family:'Lilita One';letter-spacing:1px;background:rgba(0,0,0,.5);padding:2px 8px;border-radius:999px;color:var(--muted)}
#rotate{position:fixed;inset:0;background:var(--sky);display:none;place-items:center;z-index:100;text-align:center;color:#fff}
#rotate.on{display:grid}
#rotate .big{width:64px;height:64px;margin:0 auto 10px;border:8px solid #fff;border-color:#fff transparent;border-radius:50%;animation:spin 2.4s infinite ease-in-out}
/* Viewport-sized interface: the arena can shrink without shrinking its menus. */
#uiRoot{position:fixed;inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);z-index:30;pointer-events:none}
#uiRoot>#menu,#uiRoot>#modal,#uiRoot>#adOverlay{pointer-events:auto}
#uiRoot>#menu{max-width:1100px;margin-inline:auto}
#uiRoot #rail button{min-height:48px;flex-shrink:0}
#uiRoot .btn,#uiRoot .seg button{min-height:48px;min-width:48px}
#uiRoot .btn{font-size:14px;white-space:normal}
#uiRoot .small{font-size:13px;line-height:1.45}
#uiRoot #content{overscroll-behavior:contain;padding-bottom:24px}
#uiRoot #top{flex-wrap:wrap}
#uiRoot #top>.row{flex-wrap:wrap}
#uiRoot .cols>*{min-width:0}
#uiRoot #homeName{overflow-wrap:anywhere}
#uiRoot #modal .box{position:relative;max-height:calc(100% - 24px);padding:16px;overscroll-behavior:contain;overflow-wrap:anywhere;animation:none}
#uiRoot .modal-close{float:inline-end;margin-inline-start:10px;margin-bottom:8px;--pt:6px;--px:6px;position:sticky;top:0;z-index:2}
#uiRoot .quick-guide{padding-inline-start:24px;font-size:14px}
#uiRoot .quick-guide p{margin:4px 0 14px;color:var(--muted)}
#uiRoot details{margin-block:12px}
#uiRoot summary{min-height:48px;padding-block:12px;cursor:pointer;font-weight:700}
#uiRoot .h2{margin-block:0 12px}
#modalBox:focus{outline:none}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #fff;outline-offset:3px}
#uiRoot #toast{max-width:calc(100% - 24px);white-space:normal;text-align:center;font-family:Rubik,system-ui,sans-serif;line-height:1.4;font-size:14px;border-radius:14px}
#passBtn,#buildBtn{min-height:max(48px,var(--arena-tap,48px));min-width:max(48px,var(--arena-tap,48px))}
#endOverlay .result-primary .btn{min-height:48px}
#endOverlay #rematchBtn{min-width:180px}
@media(max-width:760px){
  #uiRoot #s-home>.cols{grid-template-columns:minmax(0,1fr)!important}
  #uiRoot #s-home>.cols>div:last-child{grid-row:1}
  #uiRoot .coll{grid-template-columns:repeat(auto-fit,minmax(68px,1fr))}
  #uiRoot .deckslots{grid-template-columns:repeat(4,minmax(0,1fr))}
  #uiRoot .modes{gap:10px}
}
@media(max-width:600px){
  #uiRoot #rail{inset:auto 0 0;width:auto;height:76px;flex-direction:row;border:0;border-top:2px solid var(--outline);padding:4px;gap:2px}
  #uiRoot #rail button,#uiRoot #rail button.center{width:auto;flex:1;height:58px;font-size:11px;min-width:0}
  #uiRoot #content{inset:0 0 76px;padding:12px}
  #uiRoot #top .pill{font-size:13px}
  #uiRoot #s-cards>.row{flex-wrap:wrap}
  #uiRoot #modal .cols{grid-template-columns:minmax(0,1fr)}
  #uiRoot #s-shop>.cols{grid-template-columns:minmax(0,1fr)}
  #uiRoot #s-shop .cols4{grid-template-columns:repeat(2,minmax(0,1fr))} /* four tiles overflow a 390px phone; two per row keeps the 500-gem exchange on screen */ /* Starter above the daily cards on a phone, so the three cards keep their names */
}
@keyframes spin{0%,20%{transform:rotate(0)}50%,70%{transform:rotate(90deg)}100%{transform:rotate(0)}}
ul.rules{padding-left:18px;line-height:1.6;margin:6px 0;font-size:13px}
.link{background:#1B1230;border:2px dashed var(--muted);border-radius:10px;padding:6px;font-size:11px;direction:ltr;text-align:left;word-break:break-all;font-family:monospace}
/* whose turn: one banner + the whole screen edge glows in the turn's color */
#turnBanner{position:absolute;left:50%;top:88px;transform:translateX(-50%);z-index:3;pointer-events:none;font-family:'Lilita One',sans-serif;font-size:19px;text-transform:uppercase;letter-spacing:.5px;color:#fff;text-shadow:2px 2px 0 var(--outline);padding:5px 20px;border:3px solid var(--outline);border-radius:999px;box-shadow:0 4px 0 var(--outline);white-space:nowrap;display:none}
#roundLbl.me{background:var(--green)}#roundLbl.def{background:var(--blue);animation:pulse .7s infinite}#roundLbl.foe{background:var(--red)}
#windPill,#windPill .wdir{display:inline-flex;align-items:center;gap:5px}#windPill{font-size:12px;pointer-events:auto}
.warrow{width:26px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.warrow.left{transform:scaleX(-1)}
.wpips{display:inline-flex;gap:2px}.wpips i{width:5px;height:10px;border-radius:2px;background:#3A3352;border:1.5px solid var(--outline)}.wpips i.on{background:#6EC6FF}
#windTip{flex-basis:100%;justify-content:center;display:inline-flex;align-items:center;gap:6px;background:#6EC6FF;color:var(--ink);text-shadow:none;animation:pulse 1s infinite}
#windTip .warrow{stroke:var(--ink)}
#aimWind{display:inline-flex;align-items:center;margin-inline-start:6px;vertical-align:middle}#aimWind:empty{display:none}
/* The turn timer rides in the control cluster, so it always sits just left of the buttons however many of them are visible. */
.bctl #timerPill{position:static;transform:none!important;align-self:center;margin:0;padding:2px 10px;font-size:12px}
#turnBanner.me{background:var(--green);animation:pulse 1.1s infinite}#turnBanner.def{background:var(--blue);animation:pulse .8s infinite}#turnBanner.foe{background:var(--red)}
#s-battle::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;transition:box-shadow .25s}
#s-battle.me::after{box-shadow:inset 0 0 0 3px var(--green)}
#s-battle.def::after{box-shadow:inset 0 0 0 3px var(--blue)}
#s-battle.foe::after{box-shadow:inset 0 0 0 3px var(--red)}
#s-battle.def .hand .card.counter:not(.dim){outline:3px solid var(--green)}
.card.weak{opacity:.55}
.card .stop{position:absolute;left:50%;top:-13px;transform:translateX(-50%);background:var(--green);border:2px solid var(--outline);border-radius:999px;font-family:'Lilita One',sans-serif;font-size:9px;color:#fff;padding:0 6px;white-space:nowrap;text-shadow:1px 1px 0 var(--outline);z-index:2}
#clockPill{top:58px;left:12px}
.armed{font-size:10px;font-weight:700;color:#BFE9FF;text-shadow:1px 1px 0 var(--outline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stop.arm{background:#2F8CFF}#clockPill.hot{background:var(--red);animation:pulse .5s infinite}
.castleup{background:var(--panel);border:3px solid var(--gold);border-radius:var(--r);padding:8px 12px;box-shadow:0 3px 0 var(--outline)}
.pips{display:flex;gap:4px;margin:4px 0}.pips i{width:26px;height:8px;border-radius:4px;background:#3A3352;border:1.5px solid var(--outline)}.pips i.on{background:var(--gold)}
.tray .sec{font-family:'Lilita One',sans-serif;font-size:12px;text-transform:uppercase;color:var(--gold);margin-top:2px}
/* shop: arsenal */
.dhero{display:flex;gap:12px;align-items:center;background:linear-gradient(120deg,#3B1F63,#7B2FC4 55%,#FF6A1F);border:3px solid var(--outline);border-radius:var(--r);padding:8px 12px;box-shadow:0 4px 0 var(--outline);position:relative;overflow:hidden}
.dhero canvas{width:180px;height:110px;flex:none}
.newtag{font-family:'Lilita One',sans-serif;font-size:11px;background:var(--red);border:2px solid var(--outline);border-radius:999px;padding:1px 10px;animation:pulse 1.2s infinite}
.arsenal{display:grid;grid-template-columns:repeat(6,1fr);gap:12px 8px}
.arsenal .item{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.arsenal .card{padding-top:12px}
.card.locked{filter:grayscale(.55);opacity:.8}
.price-btn{font-size:12px!important;min-height:30px!important;--pt:2px;--px:6px}
.owned{font-family:'Lilita One',sans-serif;font-size:12px;text-align:center;color:var(--green);text-shadow:1px 1px 0 var(--outline)}
#rail .dot{position:absolute;top:4px;right:8px;background:var(--red);border:2px solid var(--outline);border-radius:999px;font-size:9px;padding:0 5px;font-family:'Lilita One',sans-serif}
#rail button{position:relative}
/* build menu */
#buildBtn{position:absolute;left:12px;bottom:12px;z-index:3}
.tray{max-height:316px;overflow-y:auto;scrollbar-width:thin;position:absolute;left:12px;bottom:60px;display:none;flex-direction:column;gap:5px;z-index:7;background:var(--panel-solid);border:3px solid var(--outline);border-radius:14px;padding:8px;width:270px;box-shadow:0 5px 0 var(--outline)}
.tray.on{display:flex}
.bopt{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.08);border:2px solid var(--outline);border-radius:10px;padding:4px 8px;cursor:pointer;color:#fff;text-align:left;font:inherit;font-size:10px;min-height:48px;width:100%}
.bopt:disabled{opacity:.4;cursor:default}
.bopt .bi{display:flex;flex:none}.bopt b{font-family:'Lilita One',sans-serif;font-size:13px;text-transform:uppercase;display:block;font-weight:400}
.bopt .bc{margin-left:auto;flex:none;background:var(--green);border:2px solid var(--outline);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-family:'Lilita One',sans-serif;font-size:13px}
/* viral + a11y layer */
.cap{position:absolute;left:10px;bottom:112px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;z-index:6;pointer-events:none}
.cap span{background:rgba(27,18,48,.92);border:2px solid #fff;border-radius:8px;padding:2px 8px;font-size:12px;font-family:'Lilita One',sans-serif;color:#fff;letter-spacing:.3px}
.card.coachme{outline:3px solid var(--gold);z-index:3}
.card.coachme::before{content:'';position:absolute;top:-42px;left:50%;width:18px;height:18px;margin-left:-13px;border:solid var(--gold);border-width:0 6px 6px 0;rotate:45deg;filter:drop-shadow(0 0 2px var(--outline));animation:coach 1s infinite ease-in-out;pointer-events:none}
@keyframes coach{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.tog{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.15);min-height:48px;cursor:pointer}
.tog input{width:24px;height:24px;flex:none;accent-color:var(--green)}
.swatches,.flags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.swatch{width:40px;height:40px;border-radius:50%;border:3px solid var(--outline);cursor:pointer;padding:0}
.swatch.on{box-shadow:0 0 0 3px #fff}
.flagopt{display:grid;place-items:center;width:56px;height:56px;overflow:hidden;border-radius:10px;border:2px solid var(--outline);background:rgba(255,255,255,.1);cursor:pointer;padding:0}
.flagopt.on{background:var(--gold)}
.textin{width:100%;min-height:44px;border-radius:10px;border:2px solid var(--outline);padding:6px 10px;font:inherit;font-size:16px;-webkit-user-select:text;user-select:text;margin-top:6px}
.clipv,.storyimg{display:block;margin:8px auto 0;max-height:170px;max-width:100%;border-radius:10px;border:2px solid var(--outline);background:#000}
.endstats{display:flex;gap:6px;justify-content:center}
.endstats span{background:rgba(255,255,255,.12);border:2px solid var(--outline);border-radius:10px;padding:2px 10px;font-family:'Lilita One',sans-serif;font-size:14px}
.btn-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.chalcard{text-align:center}.chalcard .flagbig{display:flex;justify-content:center;line-height:0}
body.rm *,body.rm *::before,body.rm *::after{animation:none!important;transition:none!important}
body.big .small{font-size:13px}body.big .card .nm{font-size:12px}body.big .pill,body.big .strip .msg{font-size:16px}
body.big .btn-xs{min-height:40px;font-size:13px;--px:10px}body.big .btn-sm{min-height:44px}body.big .pausebtn{width:36px;height:36px}body.big .chip.btn2{min-height:40px;min-width:40px;justify-content:center}
body.cb .hside.blue{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 5px,transparent 5px 11px)}
[dir=rtl] .card .cost{left:auto;right:-7px}[dir=rtl] .card .typ{right:auto;left:-5px}[dir=rtl] .tag{left:auto;right:-32px;transform:rotate(35deg)}[dir=rtl] #rail{left:auto;right:0;border-right:0;border-left:3px solid var(--outline)}[dir=rtl] #content{left:0;right:100px}[dir=rtl] .lb .tr{margin-left:0;margin-right:auto}[dir=rtl] .price s{margin-left:0;margin-right:6px}

/* ---- generated icons in place of emoji -------------------------------------------------
   Every data-sprite canvas carries its own pixel size, but CSS decides the laid-out size so
   the icon tracks the text it sits beside. Baseline-aligned, never squashed, and inert to
   pointer and screen reader (the control's aria-label carries the meaning). */
canvas[data-sprite]{width:1.35em;height:1.35em;vertical-align:-0.3em;flex:none;pointer-events:none}
#rail canvas[data-sprite]{width:26px;height:26px;vertical-align:middle}
.pack .ci canvas[data-sprite]{width:34px;height:34px}
#endIco canvas[data-sprite]{width:56px;height:56px}
/* The label beside an icon, so JS can rewrite the words without destroying the canvas. */
.lbl{display:inline-block}
/* chest opening: the strip plays on its own canvas above the reward list */
.chest-stage{display:flex;justify-content:center;margin:-6px 0 2px}
.chest-stage canvas{width:150px;height:150px}
/* arena road modal */
#arenaLbl,#arenaNext{cursor:pointer}
.road{display:grid;gap:8px;max-height:58vh;overflow:auto;padding-right:2px}
.road-row{background:rgba(255,255,255,.06);border-radius:12px;padding:8px 10px;display:grid;gap:6px}
.road-row.cur{outline:2px solid #FFC531}
.road-row.lock{opacity:.55}
.road-cards{display:flex;flex-wrap:wrap;gap:4px}

/* ic() icons: sized by their width attribute (paintIcons locks it) */
canvas.ic[data-sprite],canvas.ic[data-card-art]{width:18px;height:18px;vertical-align:middle;flex:none;margin:0}
canvas.ic[data-card-art]{border-radius:4px}
.h-out canvas.ic,.lil canvas.ic{vertical-align:-0.2em}
.chips span canvas.ic{border-radius:3px}
.quest .muted{white-space:nowrap}

/* buttons: ghost twin of the icon (.lead/.trail) centres the words; the nudge lifts the glyphs, more for Hebrew */
.lead::after,.trail::before{content:"";flex:none;display:inline-block;width:var(--iw,20px);height:1px}
span.lead::after{margin-inline-start:.15em}
.btn.ico{--nudge:0px}
[dir=rtl] .btn{--nudge:2px}[dir=rtl] #s-battle .btn{--nudge:1.5px}