:root{--panel:#2b2620e6;--edge:#000;--gold:#f6c343;--green:#5fd16b;--red:#e8503a;--txt:#fff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#4c9631;color:#fff;user-select:none;-webkit-user-select:none;
  font-family:"Lilita One","Trebuchet MS",system-ui,sans-serif;letter-spacing:.3px;text-shadow:0 2px 0 #000}
#c{position:fixed;inset:0;width:100%;height:100%;touch-action:none;display:block}
button{font:inherit;color:#fff;text-shadow:0 2px 0 #000;cursor:pointer;border:none;letter-spacing:inherit}
.hide{display:none!important}

/* top bar */
#top{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:max(8px,env(safe-area-inset-top)) 8px 0;pointer-events:none;gap:6px}
.tl,.tr{display:flex;flex-direction:column;gap:6px;pointer-events:auto}
.tr{align-items:flex-end}
.badge{display:flex;gap:8px;align-items:center;background:var(--panel);border:3px solid #000;border-radius:14px;padding:5px 10px 5px 6px;font-size:16px;max-width:52vw}
.badge .sub{font-size:12px;opacity:.95;color:var(--gold)}
#clubName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guernsey{flex:none;width:30px;height:34px;border-radius:7px 7px 9px 9px;border:2px solid #000;box-shadow:inset 0 -4px 0 #0003}
.pill{background:var(--panel);border:3px solid #000;border-radius:12px;padding:3px 10px;font-size:14px;align-self:flex-start}
.res{position:relative;width:min(42vw,170px);height:28px;background:#1c1915e6;border:3px solid #000;border-radius:10px;overflow:visible;display:flex;align-items:center;justify-content:flex-end;padding-right:34px}
.res .fill{position:absolute;left:0;top:0;bottom:0;border-radius:7px;width:0;transition:width .3s}
.res .v{position:relative;font-size:16px}
.res .cap{position:absolute;left:6px;top:-13px;font-size:10px;opacity:.9}
.res i{position:absolute;right:-8px;top:50%;transform:translateY(-50%);font-style:normal;font-size:26px;filter:drop-shadow(0 2px 0 #000)}
.res.medals{width:auto;min-width:80px;padding-left:10px}

/* home buttons */
#homeBtns{position:fixed;left:0;right:0;bottom:0;padding:0 10px max(10px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:10px;pointer-events:none}
#homeBtns>*{pointer-events:auto}
.round{width:78px;height:78px;border-radius:20px;border:3px solid #000;background:linear-gradient(#7b6a52,#4a3c2b);box-shadow:0 5px 0 #000,inset 0 3px 0 #ffffff33;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:15px;padding:0}
.round b{font-size:30px;line-height:1;font-weight:400;filter:drop-shadow(0 2px 0 #0008)}
.round.attack{width:96px;height:96px;border-radius:24px;background:linear-gradient(#ffb547,#d9631a);font-size:18px}
.round.attack b{font-size:40px}
.round.shop{margin-left:auto;background:linear-gradient(#ffd34d,#d9a114)}
.round:active,.btn:active,.cardbtn:active{transform:translateY(3px);box-shadow:0 2px 0 #000}


/* panels & buttons */
.btn{border:3px solid #000;border-radius:14px;padding:8px 14px;font-size:16px;background:linear-gradient(#7b6a52,#4a3c2b);box-shadow:0 4px 0 #000,inset 0 2px 0 #ffffff40;min-width:56px;line-height:1.1}
.btn small{display:block;font-size:12px;opacity:.95}
.btn.green{background:linear-gradient(#8be36b,#3fa83a)}
.btn.red{background:linear-gradient(#ff7a62,#c8321e)}
.btn.gold{background:linear-gradient(#ffe07a,#e2a21e)}
.btn.blue{background:linear-gradient(#7fd3ff,#2a86d6)}
.btn[disabled]{filter:grayscale(.9) brightness(.8)}
#selPanel{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(112px + env(safe-area-inset-bottom));display:none;flex-direction:column;align-items:center;gap:6px;width:min(96vw,460px)}
#selPanel .title{background:var(--panel);border:3px solid #000;border-radius:12px;padding:4px 14px;font-size:17px}
#selPanel .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#placePanel{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(112px + env(safe-area-inset-bottom));display:none;gap:12px;align-items:center}
#placePanel span{background:var(--panel);border:3px solid #000;border-radius:12px;padding:6px 12px}
#placePanel .btn{width:58px;height:52px;font-size:22px}

/* battle */
#battleTop{position:fixed;left:0;right:0;top:calc(max(8px,env(safe-area-inset-top)) + 0px);display:none;justify-content:space-between;padding:0 8px;pointer-events:none}
.panel{background:var(--panel);border:3px solid #000;border-radius:14px;padding:6px 12px;font-size:17px}
.panel .sub{font-size:13px;color:var(--gold)}
.br{text-align:right}
#bStars{font-size:26px;color:var(--gold);letter-spacing:2px;line-height:1}
#battleHint{position:fixed;left:50%;top:24%;white-space:nowrap;transform:translateX(-50%);text-align:center;font-size:20px;display:none;pointer-events:none;animation:pulse 1.4s infinite}
#battleHint small{font-size:13px;color:#ffd0c8}
@keyframes pulse{50%{opacity:.6}}
#battleBottom{position:fixed;left:0;right:0;bottom:0;display:none;flex-direction:column;gap:6px;padding:0 8px max(8px,env(safe-area-inset-bottom))}
#battleBottom .row{display:flex;justify-content:space-between;align-items:flex-end}
#cards{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}
.cardbtn{flex:none;width:70px;height:84px;border-radius:12px;border:3px solid #000;background:linear-gradient(#5d7fb8,#2f4d86);box-shadow:0 4px 0 #000;position:relative;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden}
.cardbtn img{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:62px;height:62px}
.cardbtn .n{position:absolute;top:2px;left:4px;font-size:15px}
.cardbtn .l{position:relative;font-size:11px;background:#0008;width:100%;padding:2px 0}
.cardbtn.spell{background:linear-gradient(#b27ad6,#6c3a99)}
.cardbtn.hero{background:linear-gradient(#ffd34d,#c48a12)}
.cardbtn.sel{outline:4px solid #fff;transform:translateY(-4px)}
.cardbtn.empty{filter:grayscale(1) brightness(.6)}

/* modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#000a;padding:10px;z-index:10}
.modal.show{display:flex}
.card{position:relative;background:linear-gradient(#efe2c6,#d9c7a2);color:#3a2a18;text-shadow:none;border:4px solid #000;border-radius:18px;width:min(96vw,560px);max-height:88vh;overflow:auto;padding:14px;box-shadow:0 8px 0 #000}
.card h2{padding:0 34px;margin:0 0 8px;font-weight:400;font-size:24px;color:#fff;text-shadow:0 2px 0 #000,0 0 3px #000;text-align:center}
.card h3{margin:12px 0 6px;font-weight:400;font-size:18px}
.card .x{position:absolute;right:8px;top:8px;width:36px;height:36px;border-radius:10px;border:3px solid #000;background:linear-gradient(#ff7a62,#c8321e);font-size:16px;z-index:2}
.tabs{display:flex;gap:6px;margin:4px 0 10px;flex-wrap:wrap}
.tabs button{flex:1;border:3px solid #000;border-radius:10px;padding:6px;background:#a08b67;font-size:15px}
.tabs button.on{background:linear-gradient(#ffe07a,#e2a21e)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.item{background:#fff8;border:3px solid #00000088;border-radius:14px;padding:6px;text-align:center;position:relative;cursor:pointer}
.item canvas,.item img{width:110px;height:110px;display:block;margin:-14px auto -14px}
.item .nm{font-size:15px;color:#3a2a18}
.item .meta{font-size:12px;color:#6b5434}
.item .cost{margin-top:4px;display:inline-block;background:#3a2a18;color:#fff;border-radius:8px;padding:2px 8px;font-size:14px;text-shadow:0 1px 0 #000}
.item .cost.bad{color:#ff8a7a}
.item.off{opacity:.55;filter:grayscale(.6)}
.item .lock{position:absolute;inset:auto 0 30px;font-size:13px;color:#b8321e}
.clubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.clubs button{display:flex;align-items:center;gap:8px;padding:8px;border:3px solid #000;border-radius:12px;background:#fff8;color:#3a2a18;text-shadow:none;text-align:left;font-size:14px}
.clubs small{display:block;color:#6b5434;font-size:11px}
.bar{height:16px;border:3px solid #000;border-radius:9px;background:#3a2a18;overflow:hidden;margin:4px 0}
.bar>div{height:100%;background:linear-gradient(#8be36b,#3fa83a)}
.queue{display:flex;gap:4px;flex-wrap:wrap;min-height:44px;background:#0001;border-radius:10px;padding:4px}
.queue .q{position:relative;width:44px;height:44px;border-radius:8px;border:2px solid #000;background:#5d7fb8;overflow:hidden;cursor:pointer}
.queue .q img{width:44px;height:44px}
.queue .q span{position:absolute;bottom:0;left:0;right:0;font-size:10px;background:#0009;color:#fff;text-align:center}
.armyrow{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:4px;background:#3a2a18;color:#fff;border-radius:10px;padding:2px 8px 2px 2px;font-size:14px}
.chip img{width:32px;height:32px}
.fixture{display:flex;flex-direction:column;gap:6px}
.fx{display:flex;align-items:center;gap:8px;background:#fff8;border:3px solid #00000066;border-radius:12px;padding:6px 8px}
.fx .rd{width:44px;font-size:13px;color:#6b5434}
.fx .nm{flex:1;font-size:15px}
.fx .st{color:#e2a21e;font-size:18px;text-shadow:0 1px 0 #000}
.fx.locked{opacity:.5}
.result{text-align:center}
.result .stars{font-size:36px;color:var(--gold);text-shadow:0 3px 0 #000;letter-spacing:4px}
.stat{display:flex;gap:12px;justify-content:space-between;border-bottom:2px dashed #0002;padding:4px 0}
#toast{position:fixed;left:50%;top:22%;transform:translateX(-50%);background:var(--panel);border:3px solid #000;border-radius:12px;padding:8px 14px;opacity:0;transition:opacity .25s;pointer-events:none;text-align:center;z-index:20;max-width:90vw}
#toast.show{opacity:1}

.badgeimg{width:40px;height:40px;flex:none;filter:drop-shadow(0 2px 0 #0006)}
.badgeimg.sm{width:30px;height:30px}
.row2{display:flex;gap:6px}
.shield{background:#1f4f8acc}
#side{position:fixed;right:max(8px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)) + 128px);display:flex;flex-direction:column;gap:8px}
.sidebtn{position:relative;width:56px;height:56px;border-radius:14px;border:3px solid #000;background:linear-gradient(#6a5a45,#3e3226);box-shadow:0 4px 0 #000,inset 0 2px 0 #ffffff33;font-size:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;line-height:1}
.sidebtn span{font-size:11px;margin-top:2px}
.dot{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;border-radius:11px;background:#e8503a;border:2px solid #000;font-style:normal;font-size:13px;display:flex;align-items:center;justify-content:center;padding:0 4px}
#eventBanner{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(118px + env(safe-area-inset-bottom));background:linear-gradient(#7b3fbf,#4f2490);border:3px solid #000;border-radius:12px;padding:4px 12px;font-size:13px;white-space:nowrap;pointer-events:none}
.bl{display:flex;gap:8px;align-items:center}
#bStars .dim,.stars .dim,.st .dim{color:#0005;text-shadow:none}
#abilities{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#replayBar{position:fixed;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));display:none;gap:10px;justify-content:center;align-items:center}
.cardbtn.air{background:linear-gradient(#6fc7e8,#2c7fa6)}
.center{text-align:center}.tiny{font-size:12px;color:#6b5434}.bad{color:#b8321e}
.tag{display:inline-block;background:#e8503a;color:#fff;border-radius:6px;padding:0 5px;font-size:11px;text-shadow:none;vertical-align:middle}
.btn.big{font-size:20px}
.grow{flex:1;min-width:0}.col{display:flex;flex-direction:column;gap:6px}
.herocard{display:flex;gap:12px;align-items:center;background:#fff8;border:3px solid #00000055;border-radius:14px;padding:8px;margin-bottom:8px}
.herocard img{width:96px;height:96px;border:3px solid #000;border-radius:14px;flex:none}
.herocard .btn{margin-top:6px;font-size:14px}
.pack{width:96px;height:120px;margin:0 auto 6px;border-radius:12px;border:3px solid #000;background:linear-gradient(135deg,var(--pc),#000a);display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;box-shadow:0 4px 0 #000}
.pack b{position:absolute;bottom:4px;right:8px;font-size:18px;color:#fff;text-shadow:0 2px 0 #000;font-weight:400}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.sheet{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.sheet .pcard{width:96px}
.pcard{position:relative;border-radius:10px;cursor:pointer;aspect-ratio:3/4;max-width:100%}
.pcard img{width:100%;height:100%;display:block;border-radius:8px}
.pcard.locked img{filter:grayscale(1) brightness(.35)}
.pcard.inteam{outline:4px solid #5fd16b;outline-offset:1px}
.pcard.empty{border:3px dashed #0005;display:flex;align-items:center;justify-content:center;font-size:32px;color:#0005;width:96px}
.pcard .lv{position:absolute;top:4px;right:4px;background:#000c;color:#fff;border-radius:6px;padding:0 5px;font-size:12px}
.pcard .tick{position:absolute;top:2px;left:6px;color:#5fd16b;font-size:20px;text-shadow:0 2px 0 #000}
.cbar{position:absolute;left:6px;right:6px;bottom:-6px;height:14px;background:#3a2a18;border:2px solid #000;border-radius:7px;overflow:hidden}
.cbar div{height:100%;background:linear-gradient(#8be36b,#3fa83a)}
.cbar span{position:absolute;inset:0;font-size:10px;color:#fff;text-align:center;line-height:10px}
.clubh{display:flex;align-items:center;gap:6px}
.reveal{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:8px 0 14px}
.flip{position:relative;width:110px;animation:flip .6s both;transform-style:preserve-3d}
.flip .newtag{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);background:#e8503a;color:#fff;border:2px solid #000;border-radius:8px;padding:0 6px;font-size:12px;text-shadow:0 1px 0 #000}
@keyframes flip{0%{transform:rotateY(90deg) scale(.6);opacity:0}100%{transform:rotateY(0) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.flip{animation:none}}
.task{display:flex;gap:10px;align-items:center;background:#fff8;border:3px solid #00000044;border-radius:12px;padding:8px;margin-bottom:8px}
.stat.today{background:#ffe07a55;border-radius:6px}
.raid{display:flex;gap:8px;align-items:center;background:#fff8;border:3px solid #00000044;border-left:8px solid #5fd16b;border-radius:12px;padding:8px;margin-bottom:8px}
.raid.lost{border-left-color:#e8503a}
.raid .stars{color:#e2a21e}
.raid .btn{font-size:13px;padding:6px 10px}
.clubs .badgeimg{width:36px;height:36px}
.fx small{color:#6b5434}

.stat b{text-align:right}

.tut{position:fixed;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));z-index:30;display:flex;gap:10px;align-items:flex-end;max-width:520px;margin:0 auto;pointer-events:none}
.tut.atBottom{bottom:calc(128px + env(safe-area-inset-bottom))}
.tut.atTop{top:calc(110px + env(safe-area-inset-top))}
.tut.atMid{top:30%}
.tut img{width:72px;height:72px;flex:none;filter:drop-shadow(0 3px 0 #0008)}
.tut .tb{flex:1;background:#fffaf0;color:#3a2a18;text-shadow:none;border:3px solid #000;border-radius:16px 16px 16px 4px;padding:10px 12px;font-size:16px;box-shadow:0 5px 0 #000;pointer-events:auto;animation:pop .25s}
.tbtns{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}
.tbtns .btn{padding:6px 16px}
.lnk{background:none;color:#8a6d45;text-shadow:none;font-size:13px;text-decoration:underline;padding:4px;margin-left:auto}
@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
#tutHand{position:fixed;z-index:31;font-size:46px;pointer-events:none;transform:translate(-35%,6px);animation:poke .8s infinite;filter:drop-shadow(0 3px 0 #000)}
@keyframes poke{50%{transform:translate(-35%,18px)}}
@media (prefers-reduced-motion:reduce){#tutHand{animation:none}}
.choice{display:flex;flex-direction:column;gap:10px;align-items:stretch;max-width:340px;margin:10px auto 0}
.map{display:grid;grid-template-columns:1fr auto 1.3fr;gap:3px 8px;align-items:center;font-size:14px}
.map .from{color:#7a6448}.map .arrow{color:#b08a52}.map .to{color:#3a2a18}
.diffs{margin:0 0 12px;padding-left:20px;font-size:14px;line-height:1.4}
.diffs li{margin-bottom:6px}

#bScore{font-size:14px;line-height:1.25;text-align:right;white-space:nowrap}
#bScore div{opacity:.75}#bScore .lead{opacity:1;color:var(--gold)}
#bStars{font-size:14px;color:var(--gold)}
.board{display:flex;flex-direction:column;gap:4px;margin:10px auto;max-width:300px}
.board div{display:flex;align-items:center;gap:8px;background:#2b2620;color:#fff;text-shadow:0 2px 0 #000;border:3px solid #000;border-radius:10px;padding:4px 10px;font-size:18px}
.board div span{flex:1;text-align:left}.board div b{font-weight:400;font-variant-numeric:tabular-nums}
.board .won{background:linear-gradient(#3fa83a,#2b7a28)}
.note{background:#ffe07a;border:3px solid #000;border-radius:10px;padding:6px;margin:6px 0}
.seasonbar{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;font-size:14px;margin-bottom:8px}
.fx.next{background:#fff;border-color:#000}
.fx .wl{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 1px 0 #000;border:2px solid #000}
.wl.W{background:#3fa83a}.wl.L{background:#c8321e}.wl.D{background:#888}
.ladwrap{overflow-x:auto}
.ladder{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.ladder th{font-weight:400;color:#6b5434;text-align:left;padding:2px 4px}
.ladder td{padding:3px 4px;border-bottom:1px solid #0001}
.ladder tr.me td{background:#ffe07a}
.ladder tr.cut td{border-bottom:3px solid #3a2a18}
.badgeimg.xs{width:22px;height:22px}

/* Stadium presentation */
:root{--panel:#15232be8;--edge:#10161b;--gold:#ffd465}
html,body{background:#141d33;text-shadow:0 2px 0 #16212a}
button{text-shadow:0 2px 0 #14202a}
.badge,.pill,.panel{border-color:#151a20;box-shadow:inset 0 1px 0 #f1e5c746,0 3px 0 #11192066}
.badge{background:linear-gradient(#344451f2,#14202cf5)}
.res{border-color:#22221e;background:#141d22;box-shadow:inset 0 1px 2px #000c,0 2px 0 #121d2390}
.res .fill{box-shadow:inset 0 2px 0 #fff6,inset 0 -3px 0 #43251640}
.res .hud-icon{width:30px;height:30px}
.hud-icon{display:block;width:1.08em;height:1.08em;object-fit:contain}
.round{border-color:#292019;background:linear-gradient(#aa8354,#69503e 60%,#483628);box-shadow:0 4px 0 #211a14, inset 0 2px 0 #fff7,inset 0 -5px 0 #422c285e}
.round.attack{background:linear-gradient(#ffd97d,#f4a52e 45%,#cf631d)}
.round.shop{background:linear-gradient(#ffe28c,#f8bd39 55%,#bc8117)}
.sidebtn{background:linear-gradient(#5d6073,#363e50 55%,#28303b);border-color:#1a1f27;box-shadow:0 4px 0 #12191f,inset 0 2px 0 #fff4}
.btn{border-color:#28201e;background:linear-gradient(#a38360,#694d37);box-shadow:0 4px 0 #252023,inset 0 2px 0 #fff7,inset 0 -4px 0 #0002}
.btn.green{background:linear-gradient(#a3e970,#52aa3f 55%,#368438)}
.btn.red{background:linear-gradient(#ff8472,#e23a2d 55%,#a9291b)}
.btn.gold{background:linear-gradient(#ffe88c,#edb436 55%,#c98815)}
.btn.blue{background:linear-gradient(#90ddff,#3798d8 55%,#226bad)}
.card{background:linear-gradient(145deg,#fff1d5,#dbc398);border-color:#3d2e24;box-shadow:0 6px 0 #1c1c1d,inset 0 0 0 2px #fff6}
.card h2{color:#3e2e20;text-shadow:0 1px 0 #fff7}
.tabs button.on{color:#302414;text-shadow:0 1px 0 #fff8}
.item{background:#fff5d6c9;border-color:#af9b78;box-shadow:inset 0 1px 0 #fff9}
#battleTop .panel{background:linear-gradient(#364557e8,#151d26f2)}
.battleClock{position:absolute;left:50%;top:64px;transform:translateX(-50%);text-align:center;color:#fff4d9;line-height:1;white-space:nowrap;text-shadow:0 2px 0 #151717,0 0 5px #0c1517}
.battleClock small{display:block;font-size:12px}
#bTime{font-size:28px}
#battleBottom{background:linear-gradient(transparent,#10171c66 56%,#0e151dd9)}
.cardbtn{border-color:#141c2b;background:linear-gradient(#73caff,#2d6fa8 48%,#1b344e);box-shadow:0 4px 0 #121a21,inset 0 2px 0 #e5f5ffb3}
.cardbtn img{width:66px;height:66px;top:3px;filter:drop-shadow(0 2px 2px #10203099)}
.cardbtn .n{top:1px;left:auto;right:4px;color:#fff;text-shadow:0 2px 0 #0b1422,0 0 4px #061020}
.cardbtn .l{background:#17253fe8}
.cardbtn.spell{background:linear-gradient(#b999ff,#7345c0 56%,#45336f)}
.cardbtn.hero{background:linear-gradient(#ffeaa0,#bf8434 56%,#735323)}
.cardbtn.sel{outline:2px solid #b4f1ff;box-shadow:0 0 8px #89dfff,0 4px 0 #121a21}
@media (min-width:680px){
  .battleClock{top:2px}
  .battleClock small{font-size:15px}
  #bTime{font-size:40px}
  #cards{margin-inline:auto;max-width:100%}
}
@media (max-height:530px){
  .battleClock{top:2px}
  #battleHint{top:21%}
}
.res .cap{top:1px;font-size:8px;left:5px;background:#141d228f;border-radius:3px;padding:0 2px;line-height:1.15}
@media (min-width:1080px) and (min-height:620px){
  #battleBottom{gap:9px;padding-inline:18px}
  .cardbtn{width:84px;height:102px}
  .cardbtn img{width:81px;height:81px}
  .cardbtn .n{font-size:19px;right:5px}
  .cardbtn .l{font-size:12px}
  #bEnd{font-size:20px}
}

#battleTop .br{min-width:0;flex:0 1 auto}

#installPrompt{position:fixed;inset:0;z-index:50;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
#installPrompt.hide{display:none}
.ipcard{background:linear-gradient(#efe2c6,#d9c7a2);color:#3a2a18;text-shadow:none;border:4px solid #000;border-radius:18px;box-shadow:0 8px 0 #000;padding:16px;max-width:380px;width:100%;text-align:center}
.ipcard img{width:84px;height:84px;border-radius:20px;border:3px solid #000;margin-top:-50px;box-shadow:0 4px 0 #000}
.ipcard h2{margin:6px 0;color:#fff;text-shadow:0 2px 0 #000,0 0 3px #000;font-weight:400}
.ipcard ol{text-align:left;padding-left:22px;margin:6px 0;line-height:1.45}
.ipbtns{display:flex;gap:10px;justify-content:center;margin-top:10px}
.ios-share{display:inline-block;border:2px solid #2a6fdb;color:#2a6fdb;border-radius:4px;padding:0 4px;font-size:13px}

.acct{display:flex;flex-direction:column;gap:8px;max-width:360px;margin:6px auto}
.acct label{display:flex;flex-direction:column;gap:3px;font-size:14px;text-align:left}
.acct label small{color:#6b5434;font-size:11px}
.acct input{font:inherit;font-size:16px;padding:9px 10px;border:3px solid #00000066;border-radius:10px;background:#fffdf6;color:#3a2a18;text-shadow:none;letter-spacing:0}
.acct.row{flex-direction:row;max-width:none}.acct.row input{flex:1;min-width:0}
.err{color:#b8321e;min-height:1em;text-align:center;font-size:14px}
.code{font-family:ui-monospace,Menlo,monospace;font-size:20px;letter-spacing:1px;background:#fff;border:3px dashed #3a2a18;border-radius:10px;padding:10px;text-align:center;margin:8px 0;user-select:all;-webkit-user-select:all;word-break:break-all;text-shadow:none}
.banner{background:#fff8;border:3px solid #00000044;border-radius:12px;padding:8px;display:flex;gap:8px;align-items:center;justify-content:space-between;margin:6px 0;font-size:14px}
.tag.bot{background:#5d6073}.tag.fr{background:#3fa83a}
.sqhead{display:flex;align-items:center;gap:8px;margin-bottom:6px}.sqhead b{flex:1}
.chat{height:200px;overflow-y:auto;background:#fffdf6;border:3px solid #00000044;border-radius:12px;padding:6px 8px;display:flex;flex-direction:column;gap:4px;font-size:14px;text-shadow:none}
.chat .msg{max-width:85%;background:#efe2c6;border-radius:10px;padding:4px 8px;align-self:flex-start;color:#3a2a18}
.chat .msg.mine{align-self:flex-end;background:#cdeec0}
.chat .msg.sys{align-self:center;background:none;color:#8a6d45;font-size:12px}
.packimg{width:110px;height:146px;display:block;margin:0 auto 4px;filter:drop-shadow(0 4px 0 #0006)}
.packmini{width:22px;height:29px;vertical-align:middle}
#cardsIco{display:block}

.item img.packimg{width:110px;height:146px;margin:4px auto 6px}
.item .ibtn{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:2px solid #000;background:linear-gradient(#7fd3ff,#2a86d6);font-size:15px;line-height:1;padding:0;z-index:2;font-style:italic}
.item .clash{font-size:11px;color:#8a6d45;margin-top:-2px}
p.clash{color:#8a6d45;font-size:13px;margin:-4px 0 6px}
.thumbbig{width:140px;height:140px}

.pill{white-space:nowrap}
#seasonCd{font-variant-numeric:tabular-nums;min-width:0}
.row2{flex-wrap:nowrap}

#eventBanner{pointer-events:auto;cursor:pointer;background:linear-gradient(#e2731e,#b8441a)}
.item .cost.free{background:#2f8a2a}

.vguide{display:flex;flex-direction:column;gap:4px}
.vrow{display:grid;grid-template-columns:minmax(0,1fr) auto 44px minmax(0,1.2fr);gap:8px;align-items:center;background:#fff6;border-radius:10px;padding:3px 6px;font-size:14px}
.vrow img,.vrow .noimg{width:44px;height:44px;object-fit:contain}
.vclash{color:#7a6448;text-decoration:none}.vclash[href]{color:#2a6fb0}
.vours{color:#3a2a18}
.modes{display:flex;flex-direction:column;gap:8px;margin:8px auto;max-width:340px}
.starbonus{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:14px;margin-top:6px}
.starbonus .bar{margin:0}

.vrow{grid-template-columns:40px minmax(0,1fr) auto 44px minmax(0,1.2fr)}
.cpic{width:40px;height:40px;object-fit:contain;display:inline-block}
.cmp{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 8px;text-align:center}
.cmp .cpic{width:96px;height:96px}.cmp small{display:block;font-size:12px;color:#6b5434}

.nmrow{display:flex;align-items:center;gap:6px;min-width:0}
.lvl{flex:none;min-width:24px;height:24px;padding:0 5px;border-radius:12px;background:radial-gradient(#7fd3ff,#2a6fd6);border:2px solid #000;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.albumbar{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:15px}
.packrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}
.clubtabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px;margin:6px 0}
.clubtabs button{display:flex;flex-direction:column;align-items:center;padding:3px;border:2px solid #0004;border-radius:8px;background:#fff6;color:#3a2a18;text-shadow:none;font-size:10px}
.clubtabs button.on{background:#ffe07a;border-color:#000}
.clubtabs small{font-size:10px}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.acard{position:relative;aspect-ratio:180/252;border-radius:8px;cursor:pointer}
.acard img{width:100%;height:100%;display:block;border-radius:8px;box-shadow:0 3px 0 #0005}
.acard.empty{border:2px dashed #0003;background:#0000000d;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#8a6d45;text-shadow:none;padding:4px}
.acard.empty span{font-size:14px}.acard.empty small{font-size:10px;opacity:.7}
.acard.t-s img{box-shadow:0 0 8px #cfe3ff,0 3px 0 #0005}.acard.t-g img{box-shadow:0 0 10px #ffd34d,0 3px 0 #0005}.acard.t-p img{box-shadow:0 0 12px #f2c9ff,0 3px 0 #0005}
.acard .dup{position:absolute;top:4px;right:4px;background:#e8503a;color:#fff;border:2px solid #000;border-radius:8px;font-size:11px;padding:0 4px}
.cardview{display:flex;flex-direction:column;align-items:center}
.flipcard{width:200px;aspect-ratio:180/252;position:relative;perspective:900px;cursor:pointer}
.flipcard .ff,.flipcard .fb{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s}
.flipcard .ff img{width:100%;height:100%;border-radius:10px}
.flipcard .fb{transform:rotateY(180deg)}
.flipcard.flipped .ff{transform:rotateY(180deg)}.flipcard.flipped .fb{transform:rotateY(360deg)}
.cardback{height:100%;box-sizing:border-box;border-radius:10px;border:6px solid var(--ca);background:#fffdf6;color:#222;text-shadow:none;padding:6px;font-size:11px;display:flex;flex-direction:column;gap:3px}
.cbh{display:flex;align-items:center;gap:4px;font-size:13px}.cbh span{margin-left:auto}
.cbm{font-size:10px;color:#555}
.cardback table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.cardback th{background:var(--ca);color:#fff;font-weight:400;padding:2px}
.cardback td{padding:2px 3px;border-bottom:1px solid #0001;text-align:right}.cardback td:first-child{text-align:left}
.reveal .flip img{width:100%;border-radius:8px}
.reveal .flip.spec{filter:drop-shadow(0 0 8px #ffd34d)}
.newtag.dupe{background:#5d6073}
.reveal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.reveal .flip{width:auto}

.orebar{display:flex;gap:12px;justify-content:center;font-size:15px;margin:0 0 6px}
.gear{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.gpiece{display:flex;gap:8px;align-items:center;background:#fff8;border:3px solid #0003;border-radius:12px;padding:6px 8px}
.gpiece.on{border-color:#3fa83a;background:#e9f9e2}.gpiece.off{opacity:.55}
.gpiece .gi{font-size:28px;width:36px;text-align:center}
.gpiece .btn{font-size:12px;padding:4px 8px}
.tag.epic{background:#8e44ad}

/* ---------- Footy Card Collectors album (matches docs/card-style-reference.png) ---------- */
.card.albummode{background:radial-gradient(ellipse at 50% 0%,#4a3420 0%,#2a1c10 55%,#170f08 100%);border-color:#0b0704;color:#e9e3cf;padding:10px 8px 12px;box-shadow:0 6px 0 #000,inset 0 0 0 2px #ffffff10}
.fcc{display:flex;flex-direction:column;gap:9px;text-shadow:0 2px 0 #000}
/* wooden banner with metal corner brackets */
.fccbanner{position:relative;display:flex;align-items:center;gap:8px;padding:8px 12px 9px;margin:0 46px 0 0;border:3px solid #120b05;border-radius:10px;
  background:repeating-linear-gradient(90deg,#00000000 0 60px,#0000001f 60px 62px),repeating-linear-gradient(0deg,#ffffff08 0 3px,#00000010 3px 7px),linear-gradient(#6b4626,#4a2f18 55%,#3a2412);
  box-shadow:inset 0 2px 0 #ffffff2e,inset 0 -3px 0 #0006,0 4px 0 #000}
.fccbanner::before,.fccbanner::after{content:"";position:absolute;top:-3px;width:16px;height:16px;border:3px solid #0d0d0d;background:radial-gradient(circle at 50% 50%,#d7dde3 2px,#0000 3px),linear-gradient(135deg,#c3c9d0,#6d747c);}
.fccbanner::before{left:-3px;border-radius:8px 2px 2px 2px}.fccbanner::after{right:-3px;border-radius:2px 8px 2px 2px}
.fccbanner .emblem{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:radial-gradient(circle at 40% 35%,#2f6fd6,#0b2a7a);border:3px solid #fff;box-shadow:0 0 0 3px #c8102e,0 3px 0 3px #000}
.fccbanner div{display:flex;flex-direction:column;min-width:0}
.fccbanner b{font-size:clamp(20px,6.4vw,32px);line-height:1;text-transform:uppercase;letter-spacing:.5px;color:#f6e8c8;text-shadow:2px 0 0 #2a180a,-2px 0 0 #2a180a,0 2px 0 #2a180a,0 -2px 0 #2a180a,0 4px 0 #000}
.fccbanner small{color:#ffcf4a;font-size:clamp(11px,3.4vw,15px);margin-top:2px}
/* side tabs from the picture, laid out across the top on a phone */
.atabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.atab{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px 5px;border-radius:12px;border:3px solid #0b0b0d;color:#f0ead8;font-size:13px;
  background:linear-gradient(#3a3f4a,#22262e);box-shadow:inset 0 2px 0 #ffffff1c,0 3px 0 #000;text-shadow:0 2px 0 #000}
.atab b{font-size:22px;line-height:1.1}
.atab.on{background:linear-gradient(#6b4a22,#3e2a12);border-color:#ffcf4a;box-shadow:0 0 12px #ffcf4a88,inset 0 2px 0 #ffffff33,0 3px 0 #000}
.atab.soon{opacity:.75}
.soontag{position:absolute;top:-7px;right:-4px;font-style:normal;font-size:9px;background:#5d6073;border:2px solid #000;border-radius:6px;padding:0 4px}
.atab .bang,.openpack .bang{position:absolute;top:-8px;right:-6px;width:22px;height:22px;border-radius:50%;background:#e8503a;border:2px solid #000;color:#fff;font-size:14px;line-height:18px;font-style:normal;text-align:center}
.pagehead{display:flex;align-items:center;gap:8px;padding:0 4px}
.pagehead span{display:flex;flex-direction:column;font-size:19px;line-height:1.05}.pagehead small{font-size:12px;color:#cbbf9f}
.spstar{font-size:22px}
/* leather binder: stitched edge, two dark pages, chrome rings */
.binder{position:relative;display:grid;grid-template-columns:1fr 22px 1fr;gap:0;padding:10px 8px;border-radius:14px;border:4px solid #0a0705;
  background:radial-gradient(ellipse at 30% 20%,#3b2c22,#21170f 70%);box-shadow:inset 0 0 0 2px #ffffff12,0 6px 0 #000,0 10px 18px #0009}
.binder::before{content:"";position:absolute;inset:5px;border:2px dashed #8a6a4866;border-radius:10px;pointer-events:none}
.bpage{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:8px;border-radius:8px;align-content:start;
  background:linear-gradient(160deg,#2c303a,#191b21);box-shadow:inset 0 0 12px #000c,inset 0 0 0 1px #ffffff10}
.rings{display:flex;flex-direction:column;justify-content:space-around;align-items:center;z-index:2;margin:0 -9px}
.rings i{width:34px;height:15px;border-radius:9px;border:4px solid #d9dee4;border-left-color:#9aa3ad;border-bottom-color:#7e8792;background:transparent;box-shadow:0 2px 3px #000,inset 0 1px 1px #000a}
.aslot{aspect-ratio:240/336;border-radius:8px}
.aslot.blank{background:#ffffff06;border:2px dashed #ffffff10}
.aslot.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4px;cursor:pointer;color:#a99f86;border:2px dashed #ffffff26;
  background:radial-gradient(circle at 50% 42%,#ffffff12 0 18%,#0000 19%),#1b1d24;text-shadow:none}
.aslot.empty span{font-size:14px;color:#d6caa8}.aslot.empty small{font-size:10px;opacity:.8}
.aslot img{width:100%;height:100%;display:block;border-radius:8px}
.acard{position:relative;cursor:pointer}
.acard.sel img{outline:3px solid #fff;outline-offset:1px}
.acard.t-c img{box-shadow:0 3px 0 #0008}.acard.t-s img{box-shadow:0 0 10px #5fb2ff,0 3px 0 #0008}.acard.t-g img{box-shadow:0 0 11px #ff5a5a,0 3px 0 #0008}.acard.t-p img{box-shadow:0 0 14px #ffd34d,0 3px 0 #0008}
.acard .dup{position:absolute;top:4px;right:4px;background:#e8503a;color:#fff;border:2px solid #000;border-radius:8px;font-size:11px;padding:0 4px}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;font-size:15px}
.pg{width:40px;height:34px;border-radius:10px;border:3px solid #000;background:linear-gradient(#ffd96a,#e0a10e);color:#3a2408;font-size:24px;line-height:1;text-shadow:none;box-shadow:0 3px 0 #000}
.pg:disabled{filter:grayscale(1) brightness(.6)}
/* card stats panel: dark slate with a steel rim */
.statpanel{display:grid;grid-template-columns:116px 1fr;gap:10px;padding:10px;border-radius:14px;border:3px solid #0b0b0d;color:#e9e3cf;text-shadow:none;
  background:linear-gradient(#2a2e37,#16181e);box-shadow:inset 0 0 0 2px #5d646e,inset 0 2px 0 3px #ffffff14,0 4px 0 #000}
.statpanel.emptyp{display:block;text-align:center;color:#cbbf9f}
.spcard{cursor:pointer;text-align:center}.spcard img{width:100%;display:block;border-radius:8px;box-shadow:0 0 12px #000}.spcard small{font-size:10px;opacity:.7}
.spinfo h4{margin:0 0 6px;color:#ffcf4a;text-transform:uppercase;font-size:16px;text-shadow:0 2px 0 #000}
.sbar{display:grid;grid-template-columns:86px 1fr 24px;align-items:center;gap:5px;font-size:12px;margin:4px 0}
.sbar .si{font-style:normal;margin-right:3px}
.sbar i:not(.si){height:10px;border-radius:5px;background:#0009;overflow:hidden;border:1px solid #000;box-shadow:inset 0 1px 2px #000}.sbar i b{display:block;height:100%;border-radius:5px;box-shadow:inset 0 2px 0 #ffffff44}
.sbar em{font-style:normal;text-align:right;font-size:13px}
.spblurb{margin-top:8px;padding:6px 8px;border-radius:8px;border:2px solid #4b515b;background:#0c0d11;display:flex;flex-direction:column}
.spblurb b{color:#ffcf4a;font-size:15px}.spblurb span{font-size:12px}
.spinfo.wide{width:min(100%,320px);padding:10px;border-radius:12px;background:linear-gradient(#262a33,#15171d);color:#e9e3cf;text-shadow:none;margin:6px 0}
/* wooden bottom bar: club badges, sets, open pack */
.woodbar{display:flex;align-items:center;gap:6px;padding:6px;border-radius:12px;border:3px solid #120b05;
  background:repeating-linear-gradient(0deg,#ffffff08 0 3px,#00000012 3px 7px),linear-gradient(#5e3d20,#3b2512);box-shadow:inset 0 2px 0 #ffffff26,0 4px 0 #000}
.clubstrip{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px}
.clubstrip::-webkit-scrollbar{display:none}
.clubstrip button{flex:none;width:46px;height:46px;display:grid;place-items:center;padding:2px;border:3px solid #0b0b0d;border-radius:9px;background:linear-gradient(#3a3f4a,#20232a);box-shadow:inset 0 2px 0 #ffffff1c}
.clubstrip button.on{border-color:#ffcf4a;box-shadow:0 0 10px #ffcf4a}
.clubstrip button.done{background:linear-gradient(#2f6b2a,#1d4219)}
.stripnext{flex:none;width:34px;height:46px;border-radius:9px;border:3px solid #0b0b0d;background:linear-gradient(#4a4f5a,#2a2d34);color:#f0ead8;font-size:26px;line-height:1}
.fccfoot{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.sets{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:8px;border-radius:12px;border:3px solid #0b0b0d;background:linear-gradient(#2a2e37,#16181e);box-shadow:inset 0 0 0 2px #5d646e,0 4px 0 #000}
.sets .setsicon{width:34px;height:34px;display:grid;place-items:center;font-size:20px;border-radius:8px;border:2px solid #000;background:linear-gradient(#e7b23a,#9c6a08)}
.sets div{display:flex;flex-direction:column;gap:4px;font-size:16px}
.sets i{display:block;height:10px;border-radius:5px;background:#0009;overflow:hidden;border:1px solid #000}.sets i b{display:block;height:100%;background:linear-gradient(#8fe56a,#3fae2e)}
.sets em{font-style:normal;font-size:15px}
.openpack{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;padding:6px 8px}
.openpack .packicon{font-size:24px;line-height:1}
.setlist{display:flex;flex-direction:column;gap:6px}
.setrow{display:grid;grid-template-columns:auto 1fr 90px 40px;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;border:3px solid #0b0b0d;background:linear-gradient(#2a2e37,#16181e);color:#e9e3cf;font-size:14px;text-align:left}
.setrow i{height:9px;border-radius:5px;background:#0009;overflow:hidden}.setrow i b{display:block;height:100%;background:#5fd16b}.setrow em{font-style:normal;text-align:right}
.setrow.done{box-shadow:inset 0 0 0 2px #5fd16b}
.rewards{display:flex;flex-direction:column;gap:8px}
.rwd{padding:8px 10px;border-radius:12px;border:3px solid #0b0b0d;background:linear-gradient(#2a2e37,#16181e);display:flex;flex-direction:column;gap:2px}
.rwd b{color:#ffcf4a;font-size:17px}.rwd span{font-size:13px;text-shadow:none;color:#d8d0bb}
/* pack opening: slide to tear */
.tearwrap{display:flex;justify-content:center;padding:70px 0 18px;touch-action:none;user-select:none;-webkit-user-select:none}
.packbody{position:relative;width:min(62vw,240px);aspect-ratio:3/4;cursor:grab}
.packbody img{-webkit-user-drag:none;pointer-events:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px #0008)}
.packbody .ptop{z-index:3;clip-path:inset(0 0 87% 0);transform-origin:90% 20%;transition:transform .1s}
.packbody .pbot{z-index:2;clip-path:inset(13% 0 0 0)}
.tearline{z-index:4;position:absolute;left:4%;right:4%;top:12%;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,#fff 0 8px,#0000 8px 14px);opacity:.9}
.tearline b{display:block;height:100%;width:0;background:#ffd34d;border-radius:3px;box-shadow:0 0 8px #ffd34d}
.tearhand{z-index:5;position:absolute;top:6%;left:8%;font-size:30px;animation:tearhint 1.6s ease-in-out infinite;pointer-events:none}
.tearwrap.tearing .tearhand,.tearwrap.torn .tearhand{display:none}
.tearwrap.torn .ptop{transition:transform .6s ease-in,opacity .6s;transform:translate(60%,-140%) rotate(35deg)!important;opacity:0}
.tearwrap.torn .pbot{animation:packshake .5s}
@keyframes tearhint{0%{transform:translateX(0)}60%{transform:translateX(min(46vw,170px))}100%{transform:translateX(min(46vw,170px));opacity:0}}
@keyframes packshake{0%,100%{transform:none}30%{transform:translateY(6px) scale(1.03)}60%{transform:translateY(-3px)}}
.reveal .flip{cursor:pointer}
.peek{position:absolute;left:16%;right:16%;top:16%;height:50%;z-index:1}
.peek i{position:absolute;inset:0;border-radius:10px;border:3px solid #000;background:repeating-linear-gradient(45deg,#1b2a6b 0 10px,#22357f 10px 20px);box-shadow:inset 0 0 0 4px #ffd34d;transition:transform .5s ease-out}
.tearwrap.torn .peek i:nth-child(1){transform:translateY(-36%) rotate(-7deg)}
.tearwrap.torn .peek i:nth-child(2){transform:translateY(-46%);transition-delay:.08s}
.tearwrap.torn .peek i:nth-child(3){transform:translateY(-36%) rotate(7deg);transition-delay:.16s}
@media (prefers-reduced-motion:reduce){.tearhand{animation:none}}
.cicon{position:relative;display:inline-block;width:30px;height:30px}
.cicon i{position:absolute;top:2px;width:18px;height:25px;border:2px solid #111;border-radius:4px;background:linear-gradient(160deg,#fffdf4,#d9d1bb);box-shadow:1px 2px 0 #0006}
.cicon i:first-child{left:2px;transform:rotate(-12deg)}.cicon i:last-child{left:10px;transform:rotate(9deg);background:linear-gradient(160deg,#fff4c8,#e7b23a)}
.sets .setsicon .cicon{transform:scale(.9)}
.openpack .packicon .cicon{transform:scale(1.1)}

/* ---------- landscape phones: side buttons go along the bottom, album goes side by side ---------- */
@media (orientation:landscape) and (max-height:600px){
  #side{top:auto;bottom:max(10px,env(safe-area-inset-bottom));right:calc(max(8px,env(safe-area-inset-right)) + 128px);flex-direction:row}
  .card.albummode{width:min(96vw,980px);max-height:94vh}
  .fcc{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:8px 10px;align-items:start}
  .fcc>*{min-width:0}
  .fcc>*{grid-column:1}
  .fcc>.fccbanner{margin:0;padding:5px 10px}
  .fccbanner b{font-size:24px}.fccbanner .emblem{width:34px;height:34px;font-size:18px}
  .fcc>.atabs{grid-column:2;grid-row:1;margin-right:46px}
  .atab{padding:3px 2px;font-size:11px}.atab b{font-size:17px}
  .fcc>.statpanel,.fcc>.setlist,.fcc>.rewards{grid-column:2;grid-row:2 / span 3}
  .fcc>.woodbar{grid-column:1}
  .fcc .statpanel{grid-template-columns:96px 1fr;gap:8px;padding:8px}
  .fcc .sbar{grid-template-columns:auto minmax(46px,1fr) 22px;font-size:11px;gap:4px}
  .fcc>.fccfoot{grid-column:2}
}
.fradd{display:flex;gap:6px;margin:4px 0}
.fradd input{flex:1;min-width:0;font:inherit;font-size:16px;padding:8px 10px;border-radius:10px;border:3px solid #3a2a18;background:#fffdf6;color:#222;text-shadow:none}
/* keep the resource bars on screen: the left side shrinks and wraps its pills instead of pushing them off */
#top .tl{flex:1 1 auto;min-width:0}
#top .tr{flex:none}
#top .row2{flex-wrap:wrap}
#top #clubName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#top .badge>div,#top .nmrow{min-width:0}
#top .nmrow{display:flex;align-items:center}
@media (orientation:portrait) and (max-height:700px){
  #side{gap:5px;top:calc(max(8px,env(safe-area-inset-top)) + 118px)}
  .sidebtn{width:46px;height:46px;font-size:19px;border-radius:12px}
  .sidebtn span{font-size:9px}
  .sidebtn img{width:22px;height:22px}
}
#eventBanner{max-width:calc(100vw - 16px);white-space:normal;text-align:center}
/* cheer squad chat: dark panel, name above each bubble, time underneath */
.chat{height:min(46vh,340px);background:linear-gradient(#262a33,#15171d);border:3px solid #0b0b0d;box-shadow:inset 0 0 0 2px #4b515b;padding:10px;gap:6px;font-size:15px}
.chat .msg{display:flex;flex-direction:column;max-width:80%;background:#3a3f4a;color:#f0ead8;border-radius:14px 14px 14px 4px;padding:5px 10px 4px;line-height:1.25;word-break:break-word}
.chat .msg b{font-size:12px;letter-spacing:.2px}
.chat .msg i{font-style:normal;font-size:10px;opacity:.55;align-self:flex-end;margin-top:1px}
.chat .msg.mine{background:linear-gradient(#3f9a37,#2e7a28);color:#fff;border-radius:14px 14px 4px 14px}
.chat .msg.sys{background:#0004;color:#cbbf9f;font-size:12px;border-radius:10px;padding:2px 10px;max-width:none}
.chatform{display:flex;gap:6px;margin:6px 0 10px}
.chatform input{flex:1;min-width:0;font:inherit;font-size:16px;padding:9px 12px;border-radius:22px;border:3px solid #0b0b0d;background:#fffdf6;color:#222;text-shadow:none}
.chatform .btn{width:52px;border-radius:50%;font-size:20px;padding:0}
/* pack reveal with the painted card back: each card starts face down and flips over */
.flip.flipb{animation:none}
.flip.flipb .cbk,.flip.flipb .cfr{display:block;width:100%;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip.flipb .cbk{position:absolute;inset:0;height:100%;object-fit:cover;animation:cardbackout .7s var(--d,0s) both}
.flip.flipb .cfr{animation:cardfrontin .7s var(--d,0s) both}
@keyframes cardbackout{0%{transform:rotateY(0)}50%,100%{transform:rotateY(90deg);opacity:0}}
@keyframes cardfrontin{0%,50%{transform:rotateY(-90deg)}100%{transform:rotateY(0)}}
@media (prefers-reduced-motion:reduce){.flip.flipb .cbk{display:none}.flip.flipb .cfr{animation:none}}
.flip.flipb .newtag{animation:tagin .25s calc(var(--d,0s) + .5s) both}
@keyframes tagin{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.acard .newrib{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);background:#e8503a;color:#fff;border:2px solid #000;border-radius:7px;font-size:10px;padding:0 5px;text-shadow:none}
.acard.isnew img{box-shadow:0 0 10px #fff,0 0 4px #ffd34d}
.clubstrip button{position:relative}
.clubstrip .ndot{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:#e8503a;border:2px solid #000}
.binder{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)}
.bpage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.aslot.empty{overflow:hidden}

/* ---------- Clash-style hubs and new menus (placeholder look; Codex supplies art/ui/*) ---------- */
.uia{font-style:normal;display:inline-block;line-height:1}.uia img{width:1.4em;height:1.4em;object-fit:contain;vertical-align:middle}
.uibg{background-size:cover!important;background-position:center!important}
.hubbar{display:flex;flex-direction:column;gap:6px;margin:-4px -4px 10px;padding:8px;border-radius:14px;background:linear-gradient(#3a3f4a,#22262e);border:3px solid #0b0b0d;box-shadow:0 3px 0 #000}
.hubtitle{font-size:22px;color:#ffd34d;text-align:center;text-shadow:0 2px 0 #000;margin-right:40px}
.hubtabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.hubtabs button{position:relative;display:flex;flex-direction:column;align-items:center;padding:5px 2px;border-radius:10px;border:3px solid #000;background:linear-gradient(#5d6073,#363e50);font-size:13px}
.hubtabs button .uia{font-size:20px}
.hubtabs button.on{background:linear-gradient(#ffd96a,#e0a10e);color:#3a2408;text-shadow:none}
.hubtabs .dot,.badge .dot{top:-6px;right:-6px}
.badge{position:relative;cursor:pointer}
#builders{cursor:pointer;pointer-events:auto}
.res .plus{position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:linear-gradient(#7fe36a,#2f9a24);border:2px solid #000;font-size:18px;line-height:18px;padding:0}
.round .dot{top:-6px;right:-6px}
.bthumb{width:46px;height:46px;flex:none}
.bjob,.bsug{cursor:pointer}
.profhead{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:linear-gradient(#344451,#14202c);color:#fff;margin-bottom:8px}
.profhead .badgeimg{width:52px;height:52px}.profhead b{font-size:20px;display:block}.profhead small{color:#ffd34d}
.xpbar{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin:8px 0;font-size:14px}
.xpbar i{display:block;height:12px;border-radius:6px;background:#0004;overflow:hidden;border:2px solid #000}.xpbar i b{display:block;height:100%;background:linear-gradient(#8fd3ff,#2a7fd6)}
.profgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.profgrid div{background:#fff8;border:2px solid #0004;border-radius:10px;padding:6px;text-align:center;display:flex;flex-direction:column}
.profgrid b{font-size:17px}.profgrid small{font-size:11px;opacity:.8}
.achlist{display:flex;flex-direction:column;gap:6px}
.ach{display:flex;gap:8px;align-items:center;background:#fff8;border:2px solid #0004;border-radius:10px;padding:6px}
.ach b{display:block}.ach small{font-size:11px;display:block}
.achstars{display:flex;flex-direction:column;font-size:14px;line-height:1}.achstars i{font-style:normal;color:#0003}.achstars i.on{color:#e0a10e}.achstars i.ready{color:#5fd16b}
.ach .bar{height:8px;border-radius:4px;background:#0002;overflow:hidden;margin:3px 0}.ach .bar div{height:100%;background:#5fd16b}
.rkarmy{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:8px 0}.rkarmy span{display:flex;align-items:center;font-size:13px}.rkarmy img{width:30px;height:30px;border-radius:6px}
.recipe .rkarmy{justify-content:flex-start}
.ladder tr.cutdn td{border-bottom:3px solid #e8503a}
.passhead{padding:10px;border-radius:12px;background:linear-gradient(#ffd96a,#c8860b);color:#3a2408;text-shadow:none;text-align:center;margin-bottom:6px}
.passhead b{font-size:22px;display:block}
.passtrack{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.ptier{background:#0001;border:2px solid #0003;border-radius:10px;padding:5px;text-align:center;display:flex;flex-direction:column;gap:2px;opacity:.6}
.ptier.open{opacity:1;background:#fff8;border-color:#e0a10e}.ptier.got{opacity:.55}
.ptier small{font-size:10px}.ptier b{font-size:13px}.ptier .btn{font-size:12px;padding:3px 6px}
.evcard{display:flex;gap:10px;align-items:center;background:#fff8;border:2px solid #0004;border-radius:12px;padding:8px;margin-bottom:6px}
.evcard>.uia{font-size:30px}.evcard b{display:block}.evcard small{font-size:12px}
.soonrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.soon{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:10px;background:#0002;border:2px dashed #0004;opacity:.75;text-align:center}
.soon .uia{font-size:24px}.soon small{font-size:10px}
#rotateMsg{position:fixed;inset:0;z-index:999;background:#141d33;display:flex;align-items:center;justify-content:center;text-align:center;font-size:60px}
#rotateMsg b{display:block;font-size:22px;margin-top:10px}
#rotateMsg.hide{display:none}
/* a free groundskeeper: the 👷 pill glows so you put them to work (like Clash's idle builder) */
#builders.free{border-color:#7fe36a;box-shadow:0 0 0 2px #2f9a24,0 0 10px #7fe36a;animation:bpulse 1.6s ease-in-out infinite}
@keyframes bpulse{50%{box-shadow:0 0 0 2px #2f9a24,0 0 18px #b9ff9e}}
@media (prefers-reduced-motion:reduce){#builders.free{animation:none}}