*{box-sizing:border-box}body{margin:0;background:radial-gradient(#3b2c1f,#140e09);color:#f3e6cf;font-family:Georgia,serif;user-select:none}
.hidden{display:none!important}button{font:inherit;background:#6b4423;color:#fff4dc;border:2px solid #c99a4b;border-radius:8px;padding:6px 12px;cursor:pointer}
button:hover{background:#8a5a2e}button:disabled{opacity:.45;cursor:default}button.big{font-size:22px;padding:10px 30px;background:#7a2a1a}
.screen{text-align:center;padding-top:80px}h1{font-size:56px;color:#ffcf6b;text-shadow:3px 3px #000;margin:0}
#heroPick{display:flex;gap:20px;justify-content:center;margin-top:30px}.heroCard{width:200px;padding:18px;background:#4a3020;border:3px solid #c99a4b;border-radius:14px;cursor:pointer}.heroCard:hover{transform:scale(1.05)}
#game{display:flex;height:100vh}#sidebar{width:220px;background:#00000055;padding:10px;overflow:auto;font-size:14px}
#players{list-style:none;padding:0;margin:0}#players li{padding:4px 6px;margin:2px 0;border-radius:6px;background:#ffffff10;display:flex;justify-content:space-between}
#players li.me{background:#c99a4b55}#players li.dead{opacity:.35;text-decoration:line-through}#players li.opp{outline:2px solid #e44}
#log{margin-top:10px;font-size:12px;color:#d8c7a8}
#main{flex:1;display:flex;flex-direction:column;padding:8px 16px;gap:6px;overflow:auto}
#topbar{display:flex;gap:24px;font-size:20px;align-items:center}#goldInfo{color:#ffd54a}#msg{color:#ff8a7a;font-size:16px}
.label{font-size:13px;color:#c9b089;margin:2px 0}.row{display:flex;gap:10px;min-height:160px;padding:8px;border-radius:12px;background:#00000033;align-items:center;justify-content:center;flex-wrap:nowrap}
.dropzone.over{background:#c99a4b33}#shopRow .row{background:#2a3b4a66}#shopBtns{display:flex;gap:8px;margin-top:6px;justify-content:center}
#bottom{display:flex;gap:12px;justify-content:center;margin-top:4px}
.card{position:relative;width:110px;height:146px;border-radius:12px;border:3px solid #888;background:linear-gradient(160deg,#5c5c5c,#2c2c2c);
  box-shadow:0 4px 8px #000a;cursor:grab;transition:transform .25s,left .25s;font-size:11px;overflow:visible;flex:0 0 auto}
.card:hover{transform:translateY(-4px)}.card .nm{position:absolute;top:56px;left:0;right:0;text-align:center;font-weight:bold;font-size:12px;padding:0 3px;text-shadow:1px 1px #000}
.card .art{position:absolute;top:6px;left:14px;width:76px;height:50px;border-radius:40px/26px;background:#ffffff22;display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden}
.card .art img{width:100%;height:100%;object-fit:cover}
.card .tx{position:absolute;top:78px;left:4px;right:4px;font-size:9.5px;text-align:center;line-height:1.15;color:#eee}
.card .tr{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:9px;color:#ccc;font-style:italic}
.card .at,.card .hp{position:absolute;bottom:-8px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:16px;border:2px solid #000;text-shadow:1px 1px #000}
.card .at{left:-8px;background:#d89a1a}.card .hp{right:-8px;background:#c22}.card .ti{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;background:#234;border:2px solid #9cf;display:flex;align-items:center;justify-content:center;font-weight:bold}
.card.gear{background:linear-gradient(160deg,#4f6d7a,#1e2f38);border-color:#9cc8d8}.card.fang{background:linear-gradient(160deg,#6b5a2a,#2f2410);border-color:#d8b56a}
.card.brine{background:linear-gradient(160deg,#2a6b5a,#0f2f28);border-color:#6ad8b5}.card.none{background:linear-gradient(160deg,#6a4a6a,#2a1a2a);border-color:#c8a0c8}
.card.golden{border-color:#ffd700;box-shadow:0 0 14px #ffd700}.card.guard{border-width:6px;border-style:double;border-radius:6px 6px 24px 24px}
.card.dying{opacity:0;transform:scale(.4) rotate(15deg);transition:all .3s}.card.frozen{filter:hue-rotate(160deg) brightness(1.2);border-color:#aef}
.dmg{position:absolute;top:40px;left:30px;font-size:30px;font-weight:bold;color:#fff;background:#d22;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;z-index:5;animation:pop .7s forwards;pointer-events:none}
.dmg.shield{background:#cc9;color:#000;font-size:16px}@keyframes pop{0%{transform:scale(.3)}30%{transform:scale(1.2)}100%{transform:scale(1);opacity:0}}
#overlay{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:20}#overlayBox{background:#3a2616;border:3px solid #c99a4b;border-radius:16px;padding:24px;text-align:center;min-width:360px}
#overlayBox .row{background:none;min-height:0}#tip{position:fixed;z-index:30;background:#000d;padding:6px 10px;border-radius:6px;font-size:13px;max-width:240px;pointer-events:none}

.card .frame,.card .kwo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.card .at,.card .hp,.card .ti,.card .nm,.card .tx,.card .tr{z-index:3}
.card.guard-ok{border-style:solid;border-width:3px}
.ico{width:22px;height:22px;vertical-align:middle}.tri{width:12px;height:12px;vertical-align:middle;margin-right:2px}.tierb{height:22px;vertical-align:middle}

/* v3 readability */
.card{width:130px;height:174px;font-size:12px}.card .art{left:17px;width:90px;height:62px}
.card .nm{top:68px;font-size:13.5px}.card .tx{top:90px;font-size:11.5px;line-height:1.2}.card .tr{font-size:10.5px}
.card .at,.card .hp{width:34px;height:34px;font-size:18px}.row{min-height:190px;gap:14px}
#handRow .row:empty{min-height:60px}#handRow .row:empty::before{content:'Hand is empty';color:#a89878;font-style:italic}
.label{font-size:15px;color:#f0dcb4;margin:4px 0}#topbar{flex-wrap:wrap;row-gap:4px}
#shopBtns{gap:12px;flex-wrap:wrap;align-items:center}button{padding:8px 16px;min-height:38px}
button:disabled{opacity:.35;filter:grayscale(1);border-style:dashed}
#btnHero{max-width:420px;white-space:normal;font-size:14px}
#enemyRow{margin-bottom:6px}

#btnOptions{margin-left:auto}
#options{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:40}
#optBox{background:#3a2616;border:3px solid #c99a4b;border-radius:16px;padding:20px 28px;min-width:340px;display:flex;flex-direction:column;gap:12px;font-size:17px}
#optBox h2{margin:0 0 4px}#optBox input[type=range]{width:100%}.optBtns{display:flex;gap:12px;justify-content:space-between;margin-top:8px}
button.danger{background:#7a1a1a;border-color:#e88}#leaveConfirm{border-top:1px solid #c99a4b;padding-top:10px;text-align:center}

/* v4: home / lobby */
#modeBtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:20px 0}
.modeBtn{font-size:22px;padding:16px 22px;min-width:170px;display:flex;flex-direction:column;align-items:center;gap:4px}.modeBtn small{font-size:12px;opacity:.8}
.dim{color:#bba98a}#lobby{max-width:560px;margin:20px auto;background:#00000055;border:2px solid #c99a4b;border-radius:16px;padding:16px 24px;display:flex;flex-direction:column;gap:10px;align-items:center}
#partyMembers{list-style:none;padding:0;margin:0;min-width:260px}#partyMembers li{background:#ffffff14;margin:4px 0;padding:6px 10px;border-radius:8px}
#leaderCtrls{display:flex;flex-direction:column;gap:10px;align-items:center}input{font:inherit;padding:6px 8px;border-radius:6px;border:1px solid #c99a4b;background:#1c120b;color:#f3e6cf}
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:60}.toast{background:#3a2616;border:2px solid #c99a4b;border-radius:10px;padding:10px 14px;max-width:320px}
#turnTimer{color:#9fe}
/* v4: 10-slot boards — cards scale with the viewport so 10 fit */
:root{--cw:min(130px,calc((100vw - 280px) / 10.8))}
.card{width:var(--cw);height:calc(var(--cw) * 1.34);font-size:calc(var(--cw) * .092)}
.card .art{left:13%;width:74%;height:36%}.card .nm{top:40%;font-size:calc(var(--cw) * .1)}.card .tx{top:52%;font-size:calc(var(--cw) * .085);line-height:1.15}
.card .tr{font-size:calc(var(--cw) * .08)}.card .at,.card .hp{width:calc(var(--cw) * .26);height:calc(var(--cw) * .26);font-size:calc(var(--cw) * .14)}
.row{gap:calc(var(--cw) * .08);min-height:calc(var(--cw) * 1.45);padding:6px}
@media (max-height:800px){#main{gap:2px}.label{font-size:13px;margin:1px 0}button{padding:5px 12px;min-height:32px}button.big{font-size:18px;padding:6px 22px}}

/* v4: overlapping hand + hover enlarge (shop / board / hand) */
#hand{gap:0;justify-content:center}
.card{transition:transform .15s,margin .15s}
.card.z-shop,.card.z-board,.card.z-hand,.card.z-discover{transform-origin:50% 50%}
.card.z-shop{transform-origin:50% 0}.card.z-hand{transform-origin:50% 100%}
.card.z-shop:hover,.card.z-board:hover,.card.z-hand:hover,.card.z-discover:hover{transform:scale(1.55);z-index:30;box-shadow:0 10px 30px #000}
.card.z-combat:hover{transform:none}
#shopRow,#boardRow,#handRow{position:relative}#handRow{z-index:3}#shopRow{z-index:4}

/* v5: auth, profile, avatars, socials */
#auth,#profile{max-width:760px;margin:20px auto;background:#00000055;border:2px solid #c99a4b;border-radius:16px;padding:16px 24px}
#authMsg{color:#ffb4a0;min-height:1.2em}code{background:#0006;padding:1px 5px;border-radius:4px}
.avSmall{width:34px;height:34px;border-radius:50%;vertical-align:middle;object-fit:cover}.avBig{width:72px;height:72px;border-radius:50%;vertical-align:middle}
.avFallback{display:inline-flex;align-items:center;justify-content:center;background:#ffffff22}
.avPick{padding:3px;margin:2px;min-height:0}.avPick.sel{outline:3px solid #ffd54a}
.profMode{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;border-top:1px solid #c99a4b55;padding:8px 0;text-align:left}.profMode h3{width:100%;margin:0}
.profMode table{border-collapse:collapse;font-size:14px}.profMode td{padding:2px 8px}.profMode td:nth-child(odd){color:#bba98a}
.bestBox{display:flex;flex-direction:column;align-items:center;gap:6px}.card.z-profile{--cw:120px}
.avHover{cursor:help}#playerCard{position:fixed;z-index:70;pointer-events:none}#playerCard .card{--cw:200px;width:200px;height:268px;font-size:14px}
#playerCard .card .tx{font-size:12px}#playerCard .card .nm{font-size:17px}
#socials{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:45}
#socBox{background:#3a2616;border:3px solid #c99a4b;border-radius:16px;padding:16px 20px;width:min(560px,94vw);max-height:88vh;overflow:auto;display:flex;flex-direction:column;gap:8px;text-align:left}
.socHead{display:flex;justify-content:space-between;align-items:center}.socHead h2{margin:0}
#friendList{list-style:none;padding:0;margin:0}.friend{padding:6px;border-radius:8px;background:#ffffff10;margin:4px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.fbtns{margin-left:auto}
.fbtns button{padding:4px 10px;min-height:0;font-size:13px}.st{width:10px;height:10px;border-radius:50%;display:inline-block;background:#777}.st.online{background:#4c4}.st.in-lobby{background:#4af}.st.in-game{background:#fa4}
.badge{background:#d33;color:#fff;border-radius:10px;padding:0 7px;font-size:12px;font-weight:bold}
#chatLog{height:180px;overflow:auto;background:#0005;border-radius:8px;padding:6px;font-size:14px}.cm.mine{color:#ffe7a8}#chatText{width:75%}
#playerCard .card .tx{top:50%;font-size:12.5px;background:#0008;border-radius:6px;padding:3px}
/* ===== v6 cards (geometry from card_layout.js; only colours/shapes here) ===== */
:root{--cw:min(130px,calc((100vw - 280px) / 10.8),calc((100vh - 330px) / 4.4))}
.card.v6{width:var(--cw);height:calc(var(--cw) * var(--ar));border:none;background:none;box-shadow:0 3px 8px #0009;font-size:calc(var(--cw) * .06);overflow:visible;color:#111;text-shadow:none}
.card.v6 .ly,.card.v6 .lyimg,.card.v6 .cc,.card.v6 .kwo{position:absolute;box-sizing:border-box;pointer-events:none}
.card.v6 .lyimg{left:0;top:0;width:100%;height:100%}
.card.v6 .ly{background:var(--fbc);border:max(1px,calc(var(--cw) * .007)) solid #111}
.card.v6 .ly.ok{visibility:hidden}
.card.v6 .fb-name{border-radius:999px}.card.v6 .fb-cost{border-radius:50%}
.card.v6 .fb-attack{clip-path:polygon(50% 0,100% 38%,81% 100%,19% 100%,0 38%);border:none}
.card.v6 .fb-health{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);border:none}
.card.v6 .cc{display:flex;align-items:center;justify-content:center;font-size:var(--f);line-height:1.15;z-index:3;overflow:hidden}
.card.v6 .c-art{overflow:hidden;z-index:1}.card.v6 .c-art img{width:100%;height:100%;object-fit:cover}
.card.v6 .c-art .artfb{font-size:calc(var(--cw) * .25)}
.card.v6 .c-name{justify-content:flex-start;font-weight:bold;color:#fff;text-shadow:1px 1px 1px #000;white-space:nowrap;text-overflow:ellipsis}
.card.v6 .c-cost{color:#fff;font-weight:bold;text-shadow:1px 1px 1px #000}
.card.v6 .c-type{font-weight:bold;white-space:nowrap;gap:.3em}.card.v6 .c-type .tri{height:1.1em}.card.v6 .tierpip{background:#0005;color:#fff;border-radius:4px;padding:0 .25em}
.card.v6 .c-text{align-items:flex-start;text-align:center}
.card.v6 .c-atk,.card.v6 .c-hp{color:#fff;font-weight:900;text-shadow:0 0 2px #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;padding-top:.1em}
.card.v6 .kwo{left:0;top:0;width:100%;height:100%;z-index:4}
.card.v6.golden{box-shadow:0 0 calc(var(--cw) * .12) #ffd700}
.card.v6.kw-guard:not(.guard-ok){outline:calc(var(--cw) * .04) double #ccc;outline-offset:1px}
.card.v6.compact:not(:hover) .cc{font-size:var(--kf,var(--f))}
.card.v6.compact:not(:hover) .c-text,.card.v6.compact:not(:hover) .lyr-text{display:none}
.card.v6.compact:not(:hover) .c-name{justify-content:center;padding-right:12%}
.card.v6.z-shop:hover,.card.v6.z-board:hover,.card.v6.z-hand:hover{transform:scale(var(--hs))}
.card.v6.z-discover{--cw:170px}.card.v6.z-discover:hover{transform:scale(1.08)}
.card.v6.z-profile{--cw:150px}
#playerCard .card.v6{--cw:220px;width:var(--cw);height:calc(var(--cw) * var(--ar));font-size:inherit}
#playerCard .card.v6 .c-text{background:none;padding:0;font-size:var(--f);top:auto}
/* ===== v7 screen layout (rects come from screen_layout.js; this is only styling) ===== */
.logo h1{font-size:96px;letter-spacing:.12em;margin:10px 0 0;color:#ffd54a;text-shadow:0 4px 0 #6b4423,0 0 24px #000}
.logoSub{font-size:24px;letter-spacing:.3em;text-transform:uppercase;color:#f0dcb4;margin-bottom:6px}
@media (max-height:800px){.logo h1{font-size:64px;margin:4px 0 0}.logoSub{font-size:18px}}
#game{display:block;position:fixed;inset:0;overflow:hidden}
#game .region{position:absolute;box-sizing:border-box;padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:0}
#game .region.off{display:none}
#game .panel{background:#00000066;border:2px solid #c99a4b88;border-radius:12px}
#game .region>button{width:92%;height:88%;font-size:clamp(13px,1.3vw,20px)}
#game .row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;width:100%;flex:1;min-height:0;padding:2px;box-sizing:border-box;gap:calc(var(--cw) * .06)}
#rShop .row{background:#2a3b4a66;border-radius:12px}
#game .rowLabel{position:absolute;left:8px;top:0;font-size:12px;margin:0;opacity:.85;pointer-events:none;z-index:1}
#rBoard .row,#rEnemy .row{background:#00000033;border-radius:12px}
#rHand .row:empty::before{content:'Hand is empty';color:#a89878;font-style:italic}
#rStatus{flex-direction:row;flex-wrap:wrap;gap:4px 16px;font-size:clamp(12px,1.1vw,16px);justify-content:center;overflow:hidden}
.phase-combat #rStatus{flex-direction:column;font-size:11px;align-items:flex-start}
#roundInfo{color:#f0dcb4}#msg{color:#ff8a7a}#goldInfo{color:#ffd54a;font-size:clamp(18px,1.9vw,30px);font-weight:bold}
#rTier #tierInfo{font-size:clamp(12px,1.1vw,16px);text-align:center}#rTier .tierb{height:clamp(40px,7vh,80px)}
#rMenu{flex-direction:row;flex-wrap:wrap}#rMenu button{flex:1 1 40%;padding:2px 4px;min-height:0;font-size:12px}
#rHero{justify-content:space-between}#heroPortrait,#enemyHero .hp-port{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;font-size:40px}
#heroPortrait img,#enemyHero img{max-width:100%;max-height:100%;border-radius:50%;border:3px solid #c99a4b;object-fit:cover;aspect-ratio:1}
#heroName{font-size:12px;text-align:center}#heroHp{font-size:clamp(18px,1.8vw,28px);font-weight:bold;color:#ff7a7a}
#btnHero{width:96%;font-size:12px;padding:3px;min-height:0}
#enemyHero{display:flex;align-items:center;gap:6px;width:100%;height:100%}#enemyHero .ehInfo{font-size:11px;line-height:1.25}
#enemyHand{display:flex;align-items:center;justify-content:center;height:100%;width:100%}
.cardback{height:86%;aspect-ratio:300/420;margin-left:-2.5%;border-radius:10%/7%;border:2px solid #111;box-sizing:border-box;overflow:hidden;
  background:repeating-linear-gradient(45deg,#2a3f8a 0 6px,#1d2d66 6px 12px);box-shadow:0 2px 6px #000}
.cardback img{width:100%;height:100%;object-fit:cover;display:block}
.ehCount{margin-left:14px;font-size:18px;font-weight:bold;color:#f0dcb4}
#game .pop{position:absolute;left:13.5vw;top:1vh;width:240px;max-height:60vh;overflow:auto;z-index:50;background:#2a1a10ee;border:2px solid #c99a4b;border-radius:12px;padding:8px;font-size:14px}
#game .pop h3{margin:0 0 6px}
.card.v6.z-hand{transform-origin:50% 100%}.card.v6.z-shop{transform-origin:50% 0}
.logo .logoImg{display:none;width:min(560px,80vw);max-height:22vh;object-fit:contain;margin:6px auto 0}
.logo.img-ok .logoImg{display:block}.logo.img-ok h1,.logo.img-ok .logoSub{display:none}
#game #hand{gap:0}#game .row>.card{flex-shrink:0}
#game #rMenu{flex-direction:row;flex-wrap:wrap;align-content:center}#rMenu #btnOptions{flex-basis:100%}#rMenu button{flex:1 1 40%;font-size:12px;padding:2px;min-height:0;height:auto}
#game #btnHero{height:auto;flex:none;white-space:normal}
#rHero #heroPortrait{max-height:60%}
#title:has(#profile:not(.hidden)) .logo,#title:has(#profile:not(.hidden))>p{display:none}
#game #rMenu button{height:26px;line-height:1;padding:0 4px;font-size:12px}#game #rMenu{gap:3px;padding:2px}
/* v7 Assassin aura */
.card.v6.buffed .c-atk{color:#7dff8a}.card.v6.lending .c-atk{color:#bbb}
.card.v6 .lendBadge,.card.v6 .lendLink{position:absolute;z-index:6;pointer-events:none;display:flex;justify-content:center;font-weight:900;font-size:calc(var(--cw) * .085)}
.card.v6 .lendBadge{transform:translate(55%,-70%);color:#fff;text-shadow:0 0 3px #000}.card.v6 .lendBadge{background:none}
.card.v6 .lendBadge::before{content:'';position:absolute;inset:15% 25%;background:#1d8f3a;border-radius:8px;z-index:-1}
.card.v6 .lendLink{transform:translate(45%,-75%);font-size:calc(var(--cw) * .11)}
.lendTip{color:#9fe}
/* v7 card inspection overlay */
#inspect{position:fixed;inset:0;z-index:80;background:#000b;display:flex;align-items:center;justify-content:center}
#inspBox{position:relative;display:flex;gap:24px;align-items:center;max-width:96vw;max-height:92vh}
#inspClose{position:absolute;top:-6px;right:-6px;z-index:2;min-height:0;padding:4px 10px}
#inspMods,#inspText{width:min(300px,26vw);max-height:min(560px,80vh);overflow:auto;background:#2a1a10ee;border:2px solid #c99a4b;border-radius:12px;padding:10px 12px;box-sizing:border-box;font-size:14px;text-align:left}
#inspMods h3,#inspText h3{margin:0 0 6px}#inspMods ul{list-style:none;margin:0;padding:0}#inspMods li{padding:3px 0;border-bottom:1px solid #c99a4b33}
#inspMods li.aura{color:#9fe}#inspMods li.combat{color:#ffb4a0}#inspMods li.total{color:#ffd54a;border:none}#inspText p{margin:6px 0}
#inspCard .card.v6{--cw:min(300px,30vw,calc(80vh / 1.4));cursor:default}#inspCard .card.v6:hover{transform:none}
.discOpt{display:flex;flex-direction:column;align-items:center;gap:6px}.pickBtn{min-height:0;padding:4px 18px}
.card.v6 .lendBadge{transform:none;align-items:center;background:#1d8f3a;border:1px solid #fff;border-radius:999px;font-size:calc(var(--cw) * .07)}.card.v6 .lendBadge::before{display:none}
.phase-combat #tribeInfo{display:none}
/* v8: sell = drag a board card onto the shop */
#rShop .sellLabel{display:none;position:absolute;inset:0;z-index:5;pointer-events:none;align-items:center;justify-content:center;font-size:clamp(20px,2.4vw,34px);font-weight:900;color:#ffd54a;text-shadow:0 2px 4px #000}
#rShop.sellmode .sellLabel{display:flex}
#rShop.sellmode #shop{box-shadow:0 0 0 4px #ffd54a,0 0 30px 8px #ffd54acc inset;background:#5a420f99}
#rShop.sellmode #shop .card{opacity:.35}
/* v9: shop countdown (above Shop level) + Hero Power in the old End Turn spot */
#shopTimer{font-size:clamp(20px,2.3vw,34px);font-weight:900;color:#ffe9b0;text-shadow:0 2px 3px #000;letter-spacing:.04em}
#shopTimer.warn{color:#ff5a4a;animation:tpulse .5s ease-in-out infinite alternate}@keyframes tpulse{to{transform:scale(1.12)}}
#game #rTier .tierb{height:clamp(30px,5vh,60px)}#rTier .label{margin:0;font-size:12px}
#game #rPower #btnHero{width:92%;height:88%;font-size:clamp(13px,1.3vw,20px);white-space:normal}

/* v9 dev panel (dev accounts only) */
#devPanel{position:fixed;right:8px;top:8px;z-index:60;max-height:calc(100vh - 16px);width:340px;overflow:auto;background:#1b2233;border:2px solid #f0a020;border-radius:10px;padding:8px;color:#fff;font-size:13px}
#devPanel h3{margin:0 0 4px;display:flex;justify-content:space-between}#devPanel .devRow{display:flex;gap:4px;margin:4px 0;flex-wrap:wrap;align-items:center}
#devPanel input,#devPanel select{min-width:0}#devList{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:2px}
#devList button{text-align:left;padding:2px 6px}#game .card.devSel{outline:3px dashed #f0a020}#btnDev{border-color:#f0a020}

/* v10 stat colours: green = above base (golden base doubled), red = damaged below max; damaged red wins over green */
.card.v6 .c-atk.stat-up,.card.v6 .c-hp.stat-up{color:#5dff6a}.card.v6 .c-hp.stat-hurt{color:#ff5a5a}
.card.v6 .c-kws{color:#fff;font-weight:800;text-align:center;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-shadow:0 0 2px #000,1px 1px 0 #000;pointer-events:none}
#feedback{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:60}
#fbBox{background:#3a2616;border:3px solid #c99a4b;border-radius:16px;padding:18px 24px;width:min(560px,92vw);display:flex;flex-direction:column;gap:10px;font-size:16px}
#fbBox h2{margin:0;display:flex;justify-content:space-between}#fbText{width:100%;box-sizing:border-box;font:inherit;resize:vertical}
.fbRow{display:flex;justify-content:space-between;gap:10px;font-size:14px}#fbCount.over{color:#ff5a5a}#fbMsg.err{color:#ff7a7a}
#devReports{max-height:40vh;overflow:auto}.devReport{border:1px solid #c99a4b55;border-radius:8px;padding:6px 8px;margin:6px 0}.devReport.resolved{opacity:.6}
.rpText{white-space:pre-wrap;word-break:break-word;margin:4px 0}.rpHead{font-weight:bold;font-size:13px}.rpInfo{font-size:12px;word-break:break-all}