@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Cinzel:wght@400;600;700&display=swap');
:root{color-scheme:dark;--bg:#101619;--panel:#182024;--gold:#d9b76d;--muted:#92a0a4;--line:#303b3f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#e6e8e5;font:14px 'Noto Sans Thai',sans-serif}button,select{font:inherit}button{cursor:pointer;transition:.2s}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible{outline:2px solid #f5d38b;outline-offset:4px}header{height:90px;padding:0 3.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#11191d}.brand{font-family:Cinzel,Georgia,serif;line-height:1.12;color:#e8ce92;text-decoration:none;display:flex;align-items:center;gap:13px;letter-spacing:1px;font-size:18px}.brand b{font-size:21px}.brand small{font-size:9px}.crest{font-size:58px;font-weight:normal}nav{display:flex;gap:35px;height:100%}.nav{background:none;border:0;color:#aeb9bb;padding:0 10px}.nav.active{color:var(--gold);border-bottom:2px solid var(--gold)}.version{font-size:10px;letter-spacing:2px;color:#809094}.version i{color:var(--gold);margin:0 10px}main{max-width:1600px;margin:auto;padding:24px 3.5% 0}.hero{height:225px;position:relative;overflow:hidden;border:1px solid #6c6046;background-image:linear-gradient(90deg,#101719 2%,#101719e8 30%,#10171910 72%,#10171960),url('assets/realm-reference.png');background-size:cover,125% auto;background-position:center,right top;display:flex;align-items:center;justify-content:space-between;padding:30px 36px}.eyebrow{font:10px Cinzel,Georgia,serif;letter-spacing:2px;color:var(--gold)}h1{font-size:34px;font-weight:600;margin:9px 0}p{color:#acb8ba;line-height:1.8}h2{font-size:23px;margin:5px 0 0;font-weight:500}h3{font-size:15px;margin:5px 0 12px;font-weight:500}.hero p{margin:0 0 20px}.hero-quote{font-size:18px;color:#ead5a5;font-style:italic;text-align:right;align-self:end;text-shadow:0 2px 5px #000}.outline{border:1px solid #62604e;background:#151c20;color:#d6c291;padding:8px 15px;border-radius:3px}.outline:hover{background:#32332a}.gold{border:1px solid #f3d595;background:linear-gradient(135deg,#e2c17d,#af8847);color:#221c11;border-radius:3px;padding:13px 25px;font-weight:700}.gold:hover{filter:brightness(1.12)}.gold span{margin-left:25px}.game-top{display:flex;gap:10px;align-items:center;margin:26px 0 20px}.game-top>div:first-child{margin-right:auto}.mode{display:flex;flex-direction:column;margin-right:10px;gap:3px}.mode label{font-size:10px;color:var(--muted)}select{padding:6px 10px;background:#1c2529;border:1px solid #41484a;border-radius:3px}.arena{display:grid;grid-template-columns:225px minmax(0,1fr) 215px;gap:16px}.panel{background:linear-gradient(135deg,#1e282d,#151d21);border:1px solid var(--line);padding:18px;margin-bottom:14px;border-radius:4px}.lord{display:flex;align-items:center;gap:11px;margin:15px 0}.lord h3{margin:0;font-size:13px}.lord small{font-size:10px;color:var(--muted)}.avatar{display:grid;place-items:center;width:40px;height:47px;background:#234453;border:1px solid #6291a4;border-radius:5px;font-size:28px;color:#d9c794}.avatar.red{background:#502c2d;border-color:#8e5552}.score-row{display:flex;justify-content:space-between;margin:9px 0;color:#a8b4b8;font-size:12px}.score-row b{color:#e6cc8f}.meter{height:4px;background:#303d43;border-radius:3px;overflow:hidden}.meter span{display:block;height:100%;background:#d4b271}.objective p{font-size:12px}.objective b{color:#e8cf91}.objective-line{border-top:1px solid var(--line);padding-top:15px;display:flex;gap:12px;color:#d9bd80}.objective-line small{color:var(--muted);font-size:10px}.selected p{font-size:12px;min-height:55px}.selected .outline{font-size:11px;width:100%}.battle{min-width:0;background:#141b1e;border:1px solid #46504b;border-radius:4px;align-self:start;overflow:hidden}.board-bar{display:flex;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line);font-size:11px;color:#b0bcbf}.board-bar b{color:#dfc286}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#cdb171;margin-right:6px}.board-wrap{padding:14px;background:radial-gradient(ellipse,#51655745,#172123 75%)}.board{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;aspect-ratio:1.38}.tile{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(140deg,#34483e,#23342e);border:1px solid #50634f;border-radius:6px;color:#9eaf9b;padding:3px;font-size:11px}.tile.forest{background:linear-gradient(145deg,#2a4638,#192e26)}.tile.mountain{background:linear-gradient(145deg,#4b4c54,#292e35)}.tile.lake{background:linear-gradient(145deg,#295461,#1c3548)}.tile.city,.tile.castle{background:linear-gradient(145deg,#615744,#393c33)}.tile.lair{background:linear-gradient(145deg,#5b3631,#352322)}.tile .terrain{font-size:25px;opacity:.65}.tile .coord{position:absolute;left:4px;top:3px;font-size:8px;color:#b7c1b28f}.tile.owner0{box-shadow:inset 0 -4px #5b9cad}.tile.owner1{box-shadow:inset 0 -4px #b6665d}.tile.legal{border:1px solid #e5c273;box-shadow:0 0 8px #e8bd6650,inset 0 0 18px #d5b75c1f;cursor:pointer}.tile.chosen{outline:2px solid #fff1b8}.unit{font-size:28px;line-height:1;filter:drop-shadow(0 2px 3px #000)}.unit.blue{color:#a8dcff}.unit.red{color:#ff9a81}.unit-name{font-size:8px;white-space:nowrap;color:#eee3ca}.unit-stats{font-size:9px;color:#f4d9a0;white-space:nowrap}.spent{opacity:.5}.legend{display:flex;justify-content:center;gap:16px;font-size:9px;color:#97a7aa;padding:9px}.status{border-top:1px solid #35403d;padding:13px;text-align:center;color:#dec48a;font-size:12px;min-height:45px}.log{min-height:315px}.log h3{margin-top:8px}#log{font-size:11px;color:#a5b2b5;line-height:1.7}#log p{border-bottom:1px solid #2b363a;padding:8px 0;margin:0}#log p:first-child{color:#daca9f}.hand-section{border-top:1px solid #3a423d;margin-top:24px;padding-top:20px}.hand-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.hand-heading h3{margin:5px 0}.hand-heading small{color:var(--muted);margin-left:8px;font-size:11px}.resources{display:flex;gap:25px;color:#c4cdce}.resources b{font-size:21px;margin-left:5px;color:#efd297}.hand{display:flex;gap:12px;overflow-x:auto;padding:5px 3px 16px;min-height:222px}.card{flex:0 0 163px;text-align:left;position:relative;border:1px solid #736344;border-radius:7px;background:linear-gradient(#2c3435,#171e23);padding:5px;color:#e8e5d9;overflow:hidden}.card:hover{transform:translateY(-4px);border-color:#f4d283}.card.picked{outline:2px solid #ebce82;transform:translateY(-4px)}.card .art{height:111px;background-image:url('assets/realm-reference.png');background-size:900px 1350px;border-radius:3px}.card .cost{position:absolute;top:8px;left:8px;background:#1d4a65;border:1px solid #e4c578;width:28px;height:31px;text-align:center;padding:4px;font-weight:bold;border-radius:6px}.card .name{display:block;font-size:12px;text-align:center;margin-top:8px;color:#ecd8a9}.card .type{font-size:8px;letter-spacing:1px;display:block;text-align:center;color:#939f9d;margin:2px 0 7px}.card .desc{display:block;min-height:32px;font-size:10px;padding:0 5px;color:#b1bdbd}.card .stats{display:flex;justify-content:space-between;border-top:1px solid #3d453f;padding:6px 5px 1px;font-size:11px;color:#d7b77f}.card.unaffordable{filter:saturate(.4);opacity:.62}footer{display:flex;justify-content:space-between;padding:17px 0 22px;border-top:1px solid var(--line);color:#758387;font-size:10px}dialog{max-width:750px;width:calc(100% - 32px);max-height:85vh;border:1px solid #9b8251;border-radius:6px;background:#172125;color:#e5e7e1;padding:30px}dialog::backdrop{background:#050a0dd9;backdrop-filter:blur(5px)}dialog h2{color:#e3c17b;margin:0 0 20px}dialog li{margin:12px 0;color:#bbc7c9;line-height:1.7}.close{position:absolute;right:10px;top:6px;font-size:27px;border:0;background:none;color:#cbbd99}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.collection-grid .card{width:100%}.result{text-align:center;padding:25px}.result .crest{color:var(--gold)}@media(min-width:1450px){.board{aspect-ratio:1.55}.tile .terrain{font-size:33px}.unit{font-size:34px}}@media(max-width:1150px){.arena{grid-template-columns:185px minmax(0,1fr)}.right{display:none}.hero-quote{display:none}.version{display:none}.panel{padding:13px}.board{aspect-ratio:1.4}}@media(max-width:750px){header{height:72px;padding:0 16px}.brand{font-size:12px}.brand b{font-size:14px}.crest{font-size:38px}nav{gap:5px}.nav{font-size:11px;padding:0 5px}main{padding:14px 12px 0}.hero{height:200px;padding:20px;background-size:cover,160% auto}.hero h1{font-size:26px}.hero p{font-size:11px;max-width:235px}.eyebrow{font-size:8px}.game-top{flex-wrap:wrap;margin:20px 0 14px}.game-top>div:first-child{width:100%}h2{font-size:20px}.mode{margin-right:auto}.arena{display:block}.left{display:none}.board-wrap{padding:7px}.board{gap:3px;aspect-ratio:1.1}.tile .terrain{font-size:21px}.unit{font-size:23px}.unit-name{font-size:7px}.unit-stats{font-size:8px}.board-bar{padding:12px;font-size:10px}.legend{gap:10px;font-size:8px}.resources{gap:10px;font-size:11px}.resources b{font-size:16px}.hand-heading{flex-wrap:wrap;gap:12px}.hand-heading>div:first-child{margin-right:auto}.hand-heading .gold{width:100%;padding:10px}.hand-section{margin-top:17px}.card{flex-basis:150px}.collection-grid{grid-template-columns:repeat(2,1fr)}footer{font-size:8px;gap:15px}.status{font-size:11px}}
.card{padding:0;flex-basis:174px;border-color:#8b7346}.original-card{width:100%;aspect-ratio:180/247;background-image:url('assets/realm-reference.png');background-size:568.889% 621.862%;background-repeat:no-repeat}.original-0{background-position:3.08% 52.366%}.original-1{background-position:26.90% 52.366%}.original-2{background-position:50.474% 52.366%}.original-3{background-position:73.577% 52.366%}.original-4{background-position:97.275% 52.366%}.card .desc{padding:9px 10px 5px;min-height:48px;font-size:10px}.card .stats{padding:7px 10px}.spell-art{aspect-ratio:180/247;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#754f88,#292440 55%,#121e28);border:5px double #bb965a;border-radius:5px}.spell-art>span{font-size:90px;color:#e2c58f;text-shadow:0 0 25px #d1aaf3}.spell-art b{color:#e8c889;font-weight:500}.spell-art small{font:9px Cinzel,serif;letter-spacing:3px;margin-top:10px}.hand{min-height:300px}.collection-grid .card{cursor:default}.collection-grid .card:hover{transform:none}
/* Illustrated battlefield: the map remains continuous beneath the tactical grid. */
.board-wrap{padding:12px;background:#171b18;border-top:1px solid #8f79434a;border-bottom:1px solid #8f79434a}
.board{position:relative;isolation:isolate;aspect-ratio:13/11;gap:0;background:#354333 url('assets/battlefield-map-v7-city-cell-aligned.png') center/100% 100% no-repeat;border:1px solid #b49a65;border-radius:3px;overflow:hidden;box-shadow:0 0 0 3px #181e18,0 0 0 4px #81704770}
.board .tile{background:linear-gradient(0deg,#0b151d45,transparent 38%);border:1px solid #e0d6b22e;border-radius:0;padding:4px;color:#f1e9d1;justify-content:flex-end;transition:background .18s,box-shadow .18s}
.board .tile:hover{background-color:#f5da9525;border-color:#f0d694a0;z-index:1}
.board .tile .coord{left:4px;top:3px;color:#fff4d3c9;text-shadow:0 1px 3px #000;font-size:8px}
.board .tile .terrain{font-size:13px;opacity:1;position:absolute;left:4px;bottom:5px;color:#f3d795;text-shadow:0 1px 4px #000}
.board .tile>.terrain+span{font-size:8px;line-height:1.25;padding:2px 4px;background:#101a1dbd;border:1px solid #dec99330;border-radius:3px;max-width:100%;text-shadow:0 1px 2px #000}
.board .tile.owner0{box-shadow:inset 0 -4px #6dc8ee,inset 0 0 20px #279ddb25}
.board .tile.owner1{box-shadow:inset 0 -4px #e17763,inset 0 0 20px #d5524625}
.board .tile.legal{border:2px solid #ffe4a0;background-color:#eac47725;box-shadow:inset 0 0 22px #ffe09a55,0 0 8px #f1c777aa;z-index:2}
.board .tile.chosen{outline:2px solid #fff3b6;outline-offset:-3px;background-color:#fff0b527;z-index:3}
.board .tile:has(.unit-token){justify-content:center;background-image:radial-gradient(ellipse,#0a1723ba 15%,#111a2270 46%,transparent 75%)}
.board .unit-token{display:block;width:72%;max-width:52px;aspect-ratio:1;border-radius:5px;overflow:hidden;border:2px solid #8aa8b8;box-shadow:0 2px 6px #000a,inset 0 0 0 1px #0006;flex-shrink:0;background:#0d171d}
.board .unit-token .illustration{display:block;width:100%;height:100%;aspect-ratio:auto;min-height:0;border:0;border-radius:0}
.board .unit-token .unit-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.board .unit-token .unit-icon{display:grid;place-items:center;width:100%;height:100%;font-size:22px;line-height:1;text-shadow:0 1px 3px #000}
.board .unit-name,.board .unit-stats{background:#0b161de6;border-radius:2px;padding:1px 4px;line-height:1.4;text-shadow:0 1px 2px #000}
.board .unit-name{margin-top:2px}.board .spent{opacity:.65}.board .unit-token.blue{border-color:#7ec8e8;box-shadow:0 0 0 1px #7ec8e866,0 2px 6px #000a}.board .unit-token.red{border-color:#e8a080;box-shadow:0 0 0 1px #e8a08066,0 2px 6px #000a}
@media(max-width:750px){.board-wrap{padding:7px}.board{aspect-ratio:7/5;gap:0}.board .tile{padding:2px}.board .unit-token{max-width:36px;width:78%}.board .unit-name{font-size:6px;letter-spacing:-.2px;padding:1px 2px}.board .unit-stats{font-size:8px;padding:0 2px}.board .tile>.terrain+span{font-size:7px;padding:1px 3px}.board .tile .terrain{display:none}.board .tile .coord{font-size:6px;left:3px;top:2px}}
/* Arcane skills, collection and free card packs. */
.rarity-common{--rarity:#9cadac}.rarity-rare{--rarity:#6cbbf2}.rarity-epic{--rarity:#bd8ded}.rarity-legendary{--rarity:#f2c86a}
.card{border-color:var(--rarity,#8b7346)}.rarity-label{display:block;background:#111c23;padding:5px 8px;font-size:9px;color:var(--rarity);letter-spacing:1px;text-align:center}.card.locked{filter:grayscale(.95);opacity:.55}.card.locked:hover{opacity:.9}.new-face{position:relative;aspect-ratio:180/247;border:4px double #c5a661;border-radius:4px;overflow:hidden;background:linear-gradient(#283344,#101a1d);text-align:center}.portrait{height:65%;background-image:url('assets/extra-card-portraits.png');background-size:500% 200%;background-repeat:no-repeat}.portrait-0{background-position:0 0}.portrait-1{background-position:25% 0}.portrait-2{background-position:50% 0}.portrait-3{background-position:75% 0}.portrait-4{background-position:100% 0}.portrait-5{background-position:0 100%}.portrait-6{background-position:25% 100%}.portrait-7{background-position:50% 100%}.portrait-8{background-position:75% 100%}.portrait-9{background-position:100% 100%}.new-face>b{display:block;font-size:12px;padding:5px 1px 0;border-top:1px solid #cfb276;color:#f4e4bb}.new-face>small{font-size:7px;color:var(--rarity);letter-spacing:1px}.face-cost{position:absolute;top:5px;left:5px;width:24px;height:28px;display:grid;place-items:center;border:2px solid #d7b970;background:#193e5a;border-radius:6px;color:white;font-size:17px}.face-flavor{font-size:9px;color:#c4cdc7;padding:4px 1px}.face-stats{position:absolute;bottom:3px;left:4px;right:4px;text-align:left;font-size:13px;color:#edd49b}.face-stats span{float:right;color:#fab7a7}.spell-freeze{background:radial-gradient(circle,#668cac,#21394e 60%,#111d26)}.spell-shield{background:radial-gradient(circle,#a39353,#38422b 60%,#131f24)}.spell-lightning{background:radial-gradient(circle,#9d81bf,#36305a 60%,#171d2a)}
.skill-bar[hidden]{display:none}.panel.selected .skill-bar{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:12px 0;padding:10px;background:linear-gradient(100deg,#253446,#211e32);border:1px solid #927bc46b;border-radius:4px}.skill-bar b{font-size:12px;color:#e3d3f7}.skill-bar small{display:block;font-size:10px;color:#aeb9c9;margin-top:4px}.skill-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px}.skill-actions>small{width:100%;text-align:left}.skill-actions button{font-size:10px;padding:7px 9px}.skill-button{border:1px solid #b193e1;background:#493262;color:#f3e3ff;border-radius:3px;padding:9px 12px}.skill-button span{color:#99dbf4;margin-left:7px}.selected-action{outline:1px solid #f2d593;outline-offset:2px}.collection-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px}.collection-controls label{font-size:12px}.collection-grid .card{min-width:0}.inspect-layout{display:grid;grid-template-columns:210px 1fr;gap:25px;margin-top:24px}.inspect-face{min-width:0}.pack-wallet{display:flex;gap:15px;align-items:center;flex-wrap:wrap;border-block:1px solid #c6a56050;padding:16px 0;margin:10px 0}.pack-wallet b{color:#f2cf82;font-size:27px}.pack-wallet small{margin-left:auto;color:#9faeae}.drop-rates{display:flex;gap:10px;flex-wrap:wrap}.drop-rates>span{flex:1;min-width:100px;color:var(--rarity);border:1px solid var(--rarity);padding:8px;font-size:11px;border-radius:3px}.drop-rates b{float:right}.odds-note{display:block;color:#97a6ac;margin-top:9px;font-size:10px}.pack-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.pack-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.pack-reveal{animation:reveal .45s ease-out both;animation-delay:var(--delay)}.pack-reveal .card{width:100%}.pack-tag{display:block;text-align:center;padding:7px;font-size:11px;color:#afb9ba}.pack-tag.fresh{color:#eecb7b}.pack-empty{padding:25px;text-align:center;border:1px solid #72634970;background:radial-gradient(ellipse,#48395560,transparent 70%)}.pack-empty>span{font-size:70px;color:#e6c98a}.pack-empty h3{font-size:18px}.pack-empty p{font-size:12px}#packMessage{color:#e9cd8e;margin-bottom:12px}.reward{color:#eacc83;font-size:20px}.reward small{font-size:13px}@keyframes reveal{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.pack-reveal{animation:none}}
@media(max-width:750px){nav{gap:1px}.nav{font-size:10px;padding:0 4px}.brand b{font-size:12px}.brand .crest{display:none}.brand{font-size:10px}.skill-bar:not([hidden]){display:flex;padding:9px}.skill-actions{justify-content:flex-start;margin-top:9px}.skill-actions>small{text-align:left}.pack-results{grid-template-columns:repeat(2,minmax(0,1fr))}.inspect-layout{grid-template-columns:1fr}.inspect-face{width:180px;margin:auto}.pack-wallet small{margin:0;width:100%}.new-face>b{font-size:10px}.face-flavor{font-size:8px}.pack-actions .gold{width:100%}}
/* Crop portrait cells without stretching the painted faces. */
.portrait{background-size:500% auto}.portrait-5{background-position:0 71.16%}.portrait-6{background-position:25% 71.16%}.portrait-7{background-position:50% 71.16%}.portrait-8{background-position:75% 71.16%}.portrait-9{background-position:100% 71.16%}
/* Complete illustrated cards: real art and readable live rules on every face. */
.hand{gap:16px;align-items:stretch;padding:7px 4px 20px}.hand .card{flex-basis:220px}.card{border-radius:8px;background:#111b20;border-color:var(--rarity);overflow:hidden}.card .rarity-label{padding:7px 8px;font-size:10px}.card .desc{min-height:53px;line-height:1.6;font-size:11px;padding:10px 12px 7px}.card .stats{font-size:11px;padding:8px 12px}.complete-face{position:relative;aspect-ratio:220/345;border:4px double #d0ad62;border-radius:5px;margin:2px;overflow:hidden;isolation:isolate;background:#141c22;display:grid;grid-template-rows:57% 14% 20% 9%;box-shadow:inset 0 0 18px #000}
.illustration{background-repeat:no-repeat;background-size:500% auto;min-height:0;width:100%;border-bottom:1px solid #dbc080}.illustration-extra{background-image:url('assets/extra-card-portraits.png')}.illustration-core{background-image:url('assets/core-and-spells.png')}.art-slot-0{background-position:0 0}.art-slot-1{background-position:25% 0}.art-slot-2{background-position:50% 0}.art-slot-3{background-position:75% 0}.art-slot-4{background-position:100% 0}.art-slot-5{background-position:0 72%}.art-slot-6{background-position:25% 72%}.art-slot-7{background-position:50% 72%}.art-slot-8{background-position:75% 72%}.art-slot-9{background-position:100% 72%}.complete-cost{position:absolute;left:6px;top:7px;display:flex;align-items:center;justify-content:center;gap:3px;width:35px;height:40px;background:#173e56;border:2px solid #d9c180;box-shadow:0 2px 8px #000;border-radius:8px 8px 13px 13px;font-size:24px;font-family:Georgia,serif;color:#fff5d4}.complete-cost small{font-size:9px;color:#dfba6c}.complete-spell .complete-cost{background:#4e2e66}.complete-title{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(90deg,#101f27,#273a43,#101f27);border-bottom:1px solid #a08a5370;text-align:center;padding:3px}.complete-title b{font-size:clamp(11px,1vw,14px);line-height:1.4;color:#faeccb}.complete-title small{font-size:9px;color:var(--rarity,#d5b676);line-height:1.4}.complete-rule{display:flex;flex-direction:column;justify-content:center;gap:5px;text-align:center;padding:6px 8px;background:linear-gradient(#13232b,#111a20)}.complete-rule strong{font-size:10px;font-weight:500;color:#e8c880}.complete-rule>span{font-size:10px;line-height:1.55;color:#d0d9d5}.complete-bottom{border-top:1px solid #9a814a80;display:flex;align-items:center;justify-content:space-between;padding:0 6px;color:#e9ca7e;font-size:10px}.complete-bottom .attack-value,.complete-bottom .hp-value{font:700 19px Georgia,serif}.complete-bottom .hp-value{color:#ffb0a5}.complete-bottom small{color:#a7b8b9;font-size:8px}.inspect-face{width:240px}.inspect-layout{grid-template-columns:240px 1fr}.inspect-face .complete-title b{font-size:15px}.inspect-face .complete-rule>span{font-size:12px}.collection-grid .card{min-width:0}.card.locked{filter:none;opacity:.8}.card.locked .rarity-label{background:#2a2521}.card.unaffordable{filter:none;opacity:.78}.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pack-results .card .complete-rule>span{font-size:9px}@media(max-width:750px){.hand .card{flex-basis:205px}.complete-title b{font-size:12px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.collection-grid .complete-title b,.pack-results .complete-title b{font-size:10px}.collection-grid .complete-rule,.pack-results .complete-rule{padding:3px 4px;gap:2px}.collection-grid .complete-rule strong,.pack-results .complete-rule strong{font-size:8px}.collection-grid .complete-rule>span,.pack-results .complete-rule>span{font-size:8px}.collection-grid .complete-cost,.pack-results .complete-cost{font-size:18px;width:27px;height:32px}.complete-bottom small{font-size:7px}.inspect-layout{grid-template-columns:1fr}.inspect-face{width:230px}.complete-rule>span{font-size:10px}}
/* Show every illustration in full: no cropped characters or stretched spell art. */
.complete-face{aspect-ratio:auto;grid-template-rows:auto 48px 70px 34px}.illustration{aspect-ratio:2/3;background-size:500% 200%}.art-slot-5{background-position:0 100%}.art-slot-6{background-position:25% 100%}.art-slot-7{background-position:50% 100%}.art-slot-8{background-position:75% 100%}.art-slot-9{background-position:100% 100%}
@media(max-width:750px){.collection-grid .complete-face,.pack-results .complete-face{grid-template-rows:auto 44px 66px 30px}}
/* The Hundred Legends: four sheets with 20 exclusive illustrations each. */
.illustration-kingdoms{background-image:url('assets/expansion-kingdoms.png')}.illustration-wilds{background-image:url('assets/expansion-wilds.png')}.illustration-shadows{background-image:url('assets/expansion-shadows.png')}.illustration-ancients{background-image:url('assets/expansion-ancients.png')}.expansion-art{background-size:500% 400%}.expansion-slot-0{background-position:0 0}.expansion-slot-1{background-position:25% 0}.expansion-slot-2{background-position:50% 0}.expansion-slot-3{background-position:75% 0}.expansion-slot-4{background-position:100% 0}.expansion-slot-5{background-position:0 33.333333%}.expansion-slot-6{background-position:25% 33.333333%}.expansion-slot-7{background-position:50% 33.333333%}.expansion-slot-8{background-position:75% 33.333333%}.expansion-slot-9{background-position:100% 33.333333%}.expansion-slot-10{background-position:0 66.666667%}.expansion-slot-11{background-position:25% 66.666667%}.expansion-slot-12{background-position:50% 66.666667%}.expansion-slot-13{background-position:75% 66.666667%}.expansion-slot-14{background-position:100% 66.666667%}.expansion-slot-15{background-position:0 100%}.expansion-slot-16{background-position:25% 100%}.expansion-slot-17{background-position:50% 100%}.expansion-slot-18{background-position:75% 100%}.expansion-slot-19{background-position:100% 100%}
.collection-search{display:flex;gap:8px;margin:18px 0}.collection-search input{min-width:0;flex:1;padding:10px 12px;background:#0f1b22;color:#e7e4d9;border:1px solid #536161;border-radius:4px;font:inherit}.collection-search input:focus-visible{outline:2px solid #d0b574;outline-offset:2px}.collection-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;color:#aebdbc;font-size:11px}.collection-pagination>div{display:flex;gap:6px}.collection-pagination button{font-size:11px;padding:6px 10px}.bottom-pages{margin-top:24px}.complete-rule{overflow:hidden}.complete-rule>span{font-size:10px}.complete-title b{font-size:12px}.complete-title{padding-inline:4px}.complete-title small{font-size:8px}@media(max-width:750px){.collection-controls{gap:10px}.collection-search{flex-wrap:wrap}.collection-search input{flex-basis:60%}.collection-pagination{flex-wrap:wrap}.collection-grid .complete-title b{font-size:10px;line-height:1.35}}
.card-number{float:left;font:9px Georgia,serif;color:#c7b583;letter-spacing:.5px;padding-top:2px}.card .rarity-label{min-height:29px}
/* Longer names and expansion rules remain visible rather than being clipped. */
.complete-face{grid-template-rows:auto minmax(48px,auto) minmax(86px,auto) 34px}.complete-rule{overflow:visible}.complete-title b{overflow-wrap:anywhere}
@media(max-width:750px){.collection-grid .complete-face,.pack-results .complete-face{grid-template-rows:auto minmax(44px,auto) minmax(86px,auto) 30px}}

/* Align Kingdoms cards with the actual painted row boundaries. */
.illustration-kingdoms.expansion-slot-0,.illustration-kingdoms.expansion-slot-1,.illustration-kingdoms.expansion-slot-2,.illustration-kingdoms.expansion-slot-3,.illustration-kingdoms.expansion-slot-4{background-size:500% 408.9285714%;background-position-y:0.0963391%;}
.illustration-kingdoms.expansion-slot-5,.illustration-kingdoms.expansion-slot-6,.illustration-kingdoms.expansion-slot-7,.illustration-kingdoms.expansion-slot-8,.illustration-kingdoms.expansion-slot-9{background-size:500% 407.7151335%;background-position-y:32.6904532%;}
.illustration-kingdoms.expansion-slot-10,.illustration-kingdoms.expansion-slot-11,.illustration-kingdoms.expansion-slot-12,.illustration-kingdoms.expansion-slot-13,.illustration-kingdoms.expansion-slot-14{background-size:500% 413.8554217%;background-position-y:65.0671785%;}
.illustration-kingdoms.expansion-slot-15,.illustration-kingdoms.expansion-slot-16,.illustration-kingdoms.expansion-slot-17,.illustration-kingdoms.expansion-slot-18,.illustration-kingdoms.expansion-slot-19{background-size:500% 381.6666667%;background-position-y:99.9013807%;}
/* Grand campaign: 99 cells, larger tactical space and adjustable tile size. */
main{max-width:1800px}.arena{grid-template-columns:240px minmax(0,1fr);align-items:start;column-gap:20px}.battle{grid-column:2;grid-row:1/3;width:100%}.left{grid-column:1;grid-row:1}.right{grid-column:1;grid-row:2}.board{grid-template-columns:repeat(var(--board-cols,11),minmax(0,1fr));aspect-ratio:var(--board-ratio,11/9);min-width:calc(var(--board-cols,11)*var(--tile-size,80px));width:100%}.board-wrap{max-height:78vh;overflow:auto;overscroll-behavior:contain;scrollbar-color:#a58b52 #182124;scrollbar-width:thin;padding:10px}.board-wrap:focus-visible{outline:2px solid #d7bc7e;outline-offset:-3px}.board-wrap.fit-view{max-height:none}.board-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 15px;background:#1b2528;border-bottom:1px solid #465044}.board-tools label{display:flex;gap:10px;align-items:center;font-size:11px;color:#d7c38e}.board-tools input{width:125px;accent-color:#d9b86d}.board-tools output{min-width:43px;color:#9faeae;font-size:10px}.board-tools>div{margin-left:auto;display:flex;gap:7px}.board-tools button{font-size:10px;padding:6px 10px}.board-tools>small{width:100%;color:#8a9d9f;font-size:10px}.board .unit-token{max-width:56px}.board .unit-name{font-size:10px}.board .unit-stats{font-size:10px}.board .tile>.terrain+span{font-size:10px}.board .tile .coord{font-size:9px}.board .tile .terrain{font-size:15px}.skill-bar{position:relative;z-index:5}
@media(max-width:1150px){.arena{grid-template-columns:195px minmax(0,1fr);gap:14px}.right{display:block}.panel{padding:12px}}
@media(max-width:900px){.arena{display:flex;flex-direction:column;gap:12px}.left{display:contents}.left .panel.commander,.left .panel.objective{display:none}.left .panel.selected{display:block;order:2}.right{display:none}.battle{order:1}.board{aspect-ratio:var(--board-ratio,11/9);min-width:calc(var(--board-cols,11)*var(--tile-size,80px))}.board-wrap{max-height:70vh}.board-tools>div{margin-left:0}.board-tools label{width:100%}.board-tools input{flex:1}.board .unit-token{max-width:44px}.board .unit-name{font-size:9px}.board .unit-stats{font-size:10px}.board .tile>.terrain+span{font-size:9px}.board .tile .terrain{display:block}.board .tile .coord{font-size:8px}.board-tools button{padding:8px 12px}}
/* Transform camera: the viewport never grows or gains map scrollbars. */
#boardViewport{position:relative;height:clamp(300px,62dvh,760px);min-height:0;max-height:none;overflow:hidden;overflow:clip;padding:0;touch-action:none;user-select:none;overscroll-behavior:none;background:radial-gradient(ellipse,#253733,#0d161a 80%);contain:layout paint}
#boardViewport #board{position:absolute;left:0;top:0;min-width:0;max-width:none;aspect-ratio:auto;transform-origin:0 0;will-change:transform;margin:0;box-shadow:0 0 0 2px #ad925b,0 10px 45px #0009}
#boardViewport .tile{touch-action:none}#boardViewport.can-pan{cursor:grab}#boardViewport.is-panning,#boardViewport.is-panning .tile{cursor:grabbing}.board-tools #zoomIn,.board-tools #zoomOut{font-size:19px;line-height:1;width:32px;padding:5px}.board-tools label{gap:8px}.board-tools input{min-width:70px}.board-tools>small{line-height:1.5}.battle:fullscreen{background:#10181c;display:flex;flex-direction:column;width:100vw;height:100dvh;max-width:none;border:0;padding:10px;overflow:hidden}.battle:fullscreen #boardViewport{flex:1;height:auto;min-height:0}.battle:fullscreen .board-bar,.battle:fullscreen .board-tools,.battle:fullscreen .legend,.battle:fullscreen .board-insight,.battle:fullscreen .status{flex-shrink:0}
@media(max-width:750px){#boardViewport{height:clamp(300px,58dvh,600px)}.board-tools>div{flex-wrap:wrap}.board-tools button{padding:7px 9px}.board-tools{gap:8px;padding:9px}.battle:fullscreen{padding:4px}.battle:fullscreen .board-tools>small{display:none}}
/* Two capitals: permanent battle objective. */
.capital-duel{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;background:#10191e}.capital-card{display:grid;grid-template-columns:1fr auto;gap:8px;padding:14px;border:1px solid #639fbd;border-radius:6px;background:linear-gradient(95deg,#142a3bee,#152331e6),url('assets/battlefield-map-v7-city-cell-aligned.png') center bottom/cover}.capital-card.capital-1{border-color:#bd695f;background:linear-gradient(95deg,#3b1a1bee,#291c21df),url('assets/battlefield-map-v7-city-cell-aligned.png') center top/cover}.capital-card b{font-size:16px;color:#f5dfaa}.capital-card span{display:block;font-size:13px;color:#c1cbd0}.capital-card strong{font-size:23px;align-self:center}.capital-card small{font-size:12px;font-weight:400}.capital-card meter{grid-column:1/-1;width:100%;height:12px;accent-color:#6bbdde}.capital-1 meter{accent-color:#e68272}.tile.stronghold{border:2px solid #e5bf69;box-shadow:inset 0 0 18px #e6b95455;background-color:#152a3fbb}.tile.stronghold.owner1{background-color:#482125bb}.city-banner{position:absolute;top:3px;left:3px;right:3px;background:#171c22ed;color:#ffe4a1;font-size:12px;font-weight:700;z-index:2;border-bottom:1px solid #cba251}.stronghold .coord{display:none}.stronghold .unit-token{margin-top:14px;max-width:48px}.stronghold .terrain{font-size:36px;color:#f4ce80}.stronghold .unit-name{font-size:10px}@media(max-width:600px){.capital-duel{gap:6px;padding:8px}.capital-card{padding:9px;gap:4px}.capital-card b{font-size:14px}.capital-card strong{font-size:18px}.capital-card span{font-size:12px}.capital-card small{display:block}}
/* Keep the playable hand with the board, including native fullscreen. */
.battle>.hand-section{margin:0;padding:14px;border-top:1px solid #45504d;min-width:0}.battle .hand-heading{flex-wrap:wrap;gap:10px}.battle .hand{margin-bottom:0}.arena{align-items:start}.battle:fullscreen{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto;gap:0 12px;padding:10px}.battle:fullscreen>.board-bar{grid-column:1;grid-row:1}.battle:fullscreen>.capital-duel{grid-column:1;grid-row:2;padding:6px;gap:8px}.battle:fullscreen .capital-card{padding:7px 10px;gap:2px}.battle:fullscreen .capital-card span{display:none}.battle:fullscreen>.board-tools{grid-column:1;grid-row:3;padding:6px 10px}.battle:fullscreen .board-tools>small{display:none}.battle:fullscreen>#boardViewport{grid-column:1;grid-row:4;width:100%;height:100%;min-height:0}.battle:fullscreen>.legend{grid-column:1;grid-row:5;padding:5px}.battle:fullscreen>.board-insight{grid-column:1;grid-row:6;padding:8px 10px}
.battle:fullscreen>.status{grid-column:1;grid-row:7;padding:7px;min-height:0}.battle:fullscreen>.hand-section{grid-column:2;grid-row:1/-1;display:flex;flex-direction:column;min-height:0;padding:10px;border:1px solid #45504d;background:#101b21;overflow:hidden}.battle:fullscreen .hand-heading{flex:none;display:flex;align-items:center;margin:0 0 8px;gap:8px}.battle:fullscreen .hand-heading .eyebrow{display:none}.battle:fullscreen .hand-heading h3{font-size:16px}.battle:fullscreen .hand-heading .resources{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;margin:0}.battle:fullscreen #endTurn{width:100%;padding:10px;font-size:14px}.battle:fullscreen .hand{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px;gap:10px;align-items:stretch}.battle:fullscreen .hand .card{flex:0 0 auto;width:100%;min-width:0;display:grid;grid-template-columns:84px minmax(0,1fr);text-align:left}.battle:fullscreen .hand .rarity-label{grid-column:1/-1;font-size:11px;min-height:0;padding:4px 7px}.battle:fullscreen .hand .complete-face{grid-column:1;grid-row:2/4;display:block;margin:3px;border-width:2px;align-self:start}.battle:fullscreen .hand .illustration{aspect-ratio:2/3}.battle:fullscreen .hand .complete-title,.battle:fullscreen .hand .complete-rule,.battle:fullscreen .hand .complete-bottom{display:none}.battle:fullscreen .hand .complete-cost{width:25px;height:29px;font-size:18px;left:2px;top:2px}.battle:fullscreen .hand .desc{grid-column:2;grid-row:2;font-size:13px;min-height:0;padding:8px;line-height:1.5}.battle:fullscreen .hand .stats{grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;padding:6px 8px;font-size:12px;align-self:end}.battle:fullscreen .hand .card.picked{outline:2px solid #ffdb7c;transform:none}.battle:fullscreen .hand .card:hover{transform:none}
@media(max-width:750px){.battle:fullscreen{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto auto 190px;gap:0;padding:4px}.battle:fullscreen>.hand-section{grid-column:1;grid-row:9;padding:5px;display:grid;grid-template-columns:115px minmax(0,1fr);gap:7px}.battle:fullscreen .hand-heading{display:flex;flex-direction:column;justify-content:center;align-items:stretch;margin:0}.battle:fullscreen .hand-heading h3{font-size:14px}.battle:fullscreen .hand-heading small{font-size:11px;display:block}.battle:fullscreen .hand-heading .resources{font-size:12px;gap:3px}.battle:fullscreen .hand{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:8px}.battle:fullscreen .hand .card{width:210px;flex:0 0 210px;grid-template-columns:72px minmax(0,1fr)}.battle:fullscreen .hand .desc{font-size:12px;padding:5px}.battle:fullscreen .capital-card b{font-size:13px}.battle:fullscreen .capital-card strong{font-size:15px}.battle:fullscreen .capital-card small{display:inline}.battle:fullscreen .board-tools{gap:4px}.battle:fullscreen .board-tools label{width:auto;flex:1}.battle:fullscreen .board-tools input{width:70px}.battle:fullscreen .board-tools button{font-size:11px;padding:5px}.battle:fullscreen .board-tools #focusHome,.battle:fullscreen .legend{display:none}}
@media(max-height:520px) and (min-width:751px){.battle:fullscreen{grid-template-columns:minmax(0,1fr) 260px}.battle:fullscreen .capital-card meter{height:7px}.battle:fullscreen .legend{display:none}}
.compact-card-name{display:none}.battle:fullscreen .hand .compact-card-name{display:block;color:#f5dda6;font-size:14px;line-height:1.4;margin-bottom:5px}

/* Painted city pieces make every city readable as part of the battlefield. */
.board .city-art{position:absolute;inset:9% 7% 12%;z-index:0;display:block;background-image:url('assets/city-fort-atlas-v2.png');background-size:200% 200%;background-repeat:no-repeat;filter:drop-shadow(0 3px 3px #000b) drop-shadow(0 0 4px #f5ca6c66);pointer-events:none;opacity:.9;transition:opacity .2s,filter .2s,transform .2s}
.board .city-art.city-light.city-capital{background-position:0 0}.board .city-art.city-light.city-secondary{background-position:100% 0}.board .city-art.city-shadow.city-capital{background-position:0 100%;filter:drop-shadow(0 3px 3px #000c) drop-shadow(0 0 5px #a85cff88)}.board .city-art.city-shadow.city-secondary{background-position:100% 100%;filter:drop-shadow(0 3px 3px #000c) drop-shadow(0 0 4px #8c49d677)}
.board .tile .city-art.city-capital{inset:1% 0 3%}.board .tile .city-art.city-secondary{inset:13% 10% 14%}
.board .tile.city,.board .tile.castle,.board .tile.stronghold{overflow:hidden;background-color:#231f1840}
.board .tile.castle .city-art,.board .tile.stronghold .city-art{inset:4% 2% 6%;transform:scale(1.06);opacity:.96}
.board .tile.stronghold .city-art.city-capital{inset:1% 0 3%;transform:scale(1.08)}.board .tile.stronghold .city-art.city-secondary{inset:13% 10% 14%;transform:scale(.96)}
.board .tile:has(.unit-token) .city-art{opacity:.3;filter:grayscale(.2) brightness(.7) drop-shadow(0 2px 2px #000)}
.board .tile.fort-destroyed .city-art{opacity:.25;filter:grayscale(1) brightness(.35);transform:scale(.92) rotate(-3deg)}
.board .tile .city-banner,.board .tile .unit-token,.board .tile .unit-name,.board .tile .unit-stats{position:relative;z-index:2}
.board .tile.city>.terrain,.board .tile.castle>.terrain,.board .tile.stronghold>.terrain,.board .tile.city>span:last-child,.board .tile.castle>span:last-child,.board .tile.stronghold>span:last-child{z-index:2}
@media(max-width:750px){.board .city-art{inset:7% 2% 8%;opacity:.95}.board .tile.city>span:last-child,.board .tile.castle>span:last-child,.board .tile.stronghold>span:last-child{font-size:6px}}

/* Elemental affinity: cards and matching terrain share one readable color language. */
.element-fire{--element:#ff754f}.element-water{--element:#59c7f5}.element-earth{--element:#d5ae68}.element-nature{--element:#72d784}.element-wind{--element:#d8f4ef}.element-arcane{--element:#c58cff}
.element-badge{position:absolute;z-index:5;right:6px;top:7px;padding:4px 7px;border:1px solid color-mix(in srgb,var(--element) 75%,#fff 25%);border-radius:12px;background:#0d151de8;color:var(--element);font-size:10px;font-weight:700;line-height:1;box-shadow:0 2px 7px #000b}
.complete-face[class*="element-"]{box-shadow:inset 0 0 18px #000,0 0 0 1px color-mix(in srgb,var(--element) 55%,transparent)}
.terrain-element{position:absolute;z-index:4;right:4px;top:4px;display:grid;place-items:center;box-sizing:border-box;width:14px;height:14px;border:1px solid color-mix(in srgb,var(--element) 58%,#fff 12%);border-radius:50%;background:#0a1319d9;color:var(--element);font-size:8px;line-height:1;text-shadow:0 1px 2px #000;box-shadow:0 1px 3px #0008}
.board .tile.stronghold .terrain-element{top:23px}
.board .tile.element-terrain-fire{box-shadow:inset 0 0 14px #ff542738}.board .tile.element-terrain-water{box-shadow:inset 0 0 14px #3bc5ff35}.board .tile.element-terrain-earth{box-shadow:inset 0 0 12px #d7aa6235}.board .tile.element-terrain-nature{box-shadow:inset 0 0 12px #4cd76a30}.board .tile.element-terrain-wind{box-shadow:inset 0 0 10px #d9fff025}.board .tile.element-terrain-arcane{box-shadow:inset 0 0 14px #b568ff38}
.board .unit-token.element-active{border-color:var(--element);box-shadow:0 0 0 2px color-mix(in srgb,var(--element) 80%,transparent),0 0 13px var(--element),0 2px 6px #000a}
@media(max-width:750px){.element-badge{right:3px;top:4px;padding:3px 5px;font-size:8px}.terrain-element{right:3px;top:3px;width:12px;height:12px;font-size:7px}.board .tile.stronghold .terrain-element{top:20px}}

/* Login gate + header identity (Task 7) */
.login-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:#050a0de8;backdrop-filter:blur(6px)}
.login-overlay[hidden]{display:none}
.login-panel{width:min(420px,100%);padding:32px 28px;border:1px solid #9b8251;border-radius:6px;background:linear-gradient(160deg,#1e282d,#141b1f);box-shadow:0 18px 50px #000a;text-align:center}
.login-panel h2{color:#e3c17b;margin:10px 0 12px}
.login-panel>p{margin:0 0 18px;font-size:13px}
.login-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.login-actions .gold,.login-actions .outline{width:100%}
.login-warn{margin:0 0 12px;font-size:11px;color:#c4a46a;line-height:1.6}
.login-error{min-height:1.4em;margin:0;font-size:12px;color:#e89286}
.user-bar{display:flex;align-items:center;gap:10px;margin-left:auto;margin-right:18px;font-size:12px;color:#d7c38e}
.user-bar[hidden]{display:none}
.user-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8ce92;font-weight:600}
.user-coins{color:#f2cf82;letter-spacing:.3px}
.user-rank{padding:2px 8px;border:1px solid #6c6046;border-radius:99px;color:#c4cdce;font-size:11px;white-space:nowrap}
.user-rank.tier-bronze{color:#c48a62;border-color:#8a5a3a}
.user-rank.tier-silver{color:#d5dde2;border-color:#8d989e}
.user-rank.tier-gold{color:#f2cf82;border-color:#a8883e}
.user-rank.tier-platinum{color:#9fd0c4;border-color:#4f8f84}
.user-rank.tier-diamond{color:#8ec7ff;border-color:#4d7eae}
.user-rank.tier-legend{color:#e7b4ff;border-color:#8a5aa8}
.rank-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px}
.rank-table th,.rank-table td{padding:6px 8px;border-bottom:1px solid #303b3f;text-align:left}
.rank-table th{color:#c4a46a;font-size:11px;font-weight:600}
.user-bar .outline{padding:6px 10px;font-size:11px}
body:not(.authed) .version{opacity:.55}
@media(max-width:1150px){.user-bar{margin-right:8px;gap:6px}.user-name{max-width:90px}.version{display:none}}
@media(max-width:750px){.login-panel{padding:24px 18px}.user-bar{margin-right:0;flex-wrap:wrap;justify-content:flex-end;max-width:48%}.user-bar .outline{padding:5px 8px;font-size:10px}.user-coins{font-size:11px}}

/* Online lobby (Task 8) */
.online-lobby{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:0 0 18px;padding:16px 18px;border:1px solid #6c6046;border-radius:4px;background:linear-gradient(120deg,#1a2428,#141c20)}
.online-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.join-row{display:flex;gap:8px;align-items:center}
#joinCode{width:7.5em;padding:8px 10px;background:#0f1b22;color:#e8ce92;border:1px solid #536161;border-radius:3px;font:600 14px Cinzel,Georgia,serif;letter-spacing:2px;text-transform:uppercase}
#joinCode:focus-visible{outline:2px solid #d0b574;outline-offset:2px}
.room-code-block{display:flex;align-items:center;gap:12px;margin-left:auto}
.room-code-block .eyebrow{margin:0}
#roomCode{font:700 28px Cinzel,Georgia,serif;color:#f2cf82;letter-spacing:4px;min-width:4.5em}
.room-status{margin:0;flex-basis:100%;font-size:12px;color:#c4cdce;min-height:1.4em}
#startOnline[hidden]{display:none}
#startOnline{padding:10px 18px}
.room-chat{position:fixed;right:16px;bottom:16px;z-index:40;width:min(320px,calc(100vw - 24px));display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid #6c6046;border-radius:6px;background:#121a1ee6;box-shadow:0 12px 40px #000a}
.room-chat-head{justify-content:space-between}.room-chat-hide{border:0;background:transparent;color:#d7dedf;font-size:22px;line-height:1;cursor:pointer;padding:0 3px}.room-chat-hide:hover{color:#f2cf82}.room-chat-show{position:fixed;right:16px;bottom:16px;z-index:40;padding:8px 12px;background:#121a1ef5;box-shadow:0 8px 24px #000a}.room-chat-show[hidden]{display:none}
.room-chat[hidden]{display:none}
.room-chat-head{display:flex;align-items:baseline;gap:8px}
.room-chat-head b{color:#f2cf82;font-size:13px}
.chat-log{height:168px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:8px;background:#0c1418;border:1px solid #303b3f;border-radius:4px}
.chat-line{margin:0;font-size:12px;color:#d7dedf;line-height:1.35}
.chat-line b{color:#9fd0c4;font-weight:600}
.chat-line.mine b{color:#f2cf82}
.chat-line time{margin-right:6px;color:#7f8d90;font-size:10px}
.chat-line span{display:block}
.chat-form{display:flex;gap:6px}
#chatInput{flex:1;min-width:0;padding:8px 10px;background:#0f1b22;color:#e7e4d9;border:1px solid #536161;border-radius:3px;font:inherit}
#chatNote{margin:0;min-height:1em;font-size:11px;color:#e8a080}
@media(max-width:750px){.room-chat{right:8px;bottom:8px;width:min(280px,calc(100vw - 16px))}.chat-log{height:120px}}
.social-toggle{margin-left:8px}
.social-panel{position:fixed;right:16px;top:72px;z-index:45;width:min(430px,calc(100vw - 24px));max-height:calc(100vh - 96px);overflow:auto;padding:14px;border:1px solid #6c6046;border-radius:6px;background:#121a1ef5;box-shadow:0 12px 40px #000a;color:#d7dedf}
.social-panel[hidden]{display:none}.social-head{display:flex;justify-content:space-between;align-items:center;color:#f2cf82}.social-head button{background:none;border:0;color:#d7dedf;font-size:22px;cursor:pointer}.social-tabs{display:flex;gap:6px;margin:12px 0}.social-tabs button{font-size:12px}.social-panel h3{font-size:14px;margin:8px 0}.social-log{height:220px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:8px;background:#0c1418;border:1px solid #303b3f;border-radius:4px}.social-line{margin:0;font-size:12px}.social-line b{color:#f2cf82;margin-right:6px}.social-line span{color:#d7dedf}.social-friends{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.social-friends button{padding:5px 8px;background:#1a292d;color:#d7dedf;border:1px solid #536161;border-radius:3px;cursor:pointer}.social-friends small,.social-panel #socialNote{color:#e8a080;font-size:11px}.social-panel form{display:flex;gap:6px;margin-top:8px}.social-panel input{flex:1;min-width:0;padding:8px 10px;background:#0f1b22;color:#e7e4d9;border:1px solid #536161;border-radius:3px;font:inherit}.social-rank{width:100%;border-collapse:collapse;font-size:11px}.social-rank th,.social-rank td{padding:6px 4px;border-bottom:1px solid #303b3f;text-align:left}.social-rank th{color:#c4a46a}
@media(max-width:750px){.online-lobby{padding:12px}.room-code-block{margin-left:0;width:100%}#roomCode{font-size:22px}.join-row{width:100%}#joinCode{flex:1}#startOnline{width:100%}}

/* Equal fixed cells: placing a unit must not grow a row and shift the grid. */
.board{
  grid-template-rows:repeat(var(--board-rows,9),minmax(0,1fr));
  align-content:stretch;
}
.board .tile{
  min-height:0;
  height:100%;
  width:100%;
  overflow:hidden;
  padding:2px;
  gap:0;
  justify-content:center;
}
.board .unit-token{
  width:70%;
  max-width:48px;
  max-height:52%;
  aspect-ratio:1;
  overflow:hidden;
}
.board .unit-name,
.board .unit-stats{
  font-size:8px;
  padding:0 3px;
  line-height:1.15;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Mobile-first controls: larger touch targets, compact header, and no
   horizontal page overflow. The battlefield itself remains pinch/drag
   zoomable inside its fixed viewport. */
@media(max-width:600px){
  body{font-size:13px;overflow-x:hidden}
  button,.outline,.gold,select{min-height:42px}
  header{min-height:64px;height:auto;padding:8px 10px;flex-wrap:wrap;gap:6px;align-items:center}
  .brand{font-size:10px;letter-spacing:.5px;gap:5px;max-width:45vw}
  .brand b{font-size:12px}
  .user-bar{order:2;margin-left:auto;max-width:48vw;gap:4px;font-size:10px}
  .user-name{max-width:72px}.user-rank{font-size:9px;padding:2px 5px}.user-coins{font-size:10px}
  .user-bar .outline{min-height:36px;padding:4px 7px;font-size:10px}
  .social-toggle{order:2;margin-left:0;min-height:36px;padding:4px 8px;font-size:10px}
  nav{order:3;width:100%;height:42px;overflow-x:auto;justify-content:flex-start;gap:2px;border-top:1px solid var(--line)}
  .nav{flex:0 0 auto;min-height:40px;font-size:11px;padding:0 10px}
  main{padding:10px 8px 0}
  .hero{height:170px;padding:16px;background-size:cover,210% auto;background-position:center,right top}
  .hero h1{font-size:22px;line-height:1.25}.hero p{font-size:11px;line-height:1.5;margin-bottom:12px}
  .hero .outline{min-height:44px;padding:8px 12px}
  .game-top{gap:7px;margin:14px 0 10px}.game-top>div:first-child{width:100%}.game-top>button{flex:1;font-size:11px;padding:7px 8px}
  .mode{width:100%;margin:0}.mode select{width:100%;min-height:42px}
  .online-lobby{display:block;margin-bottom:10px;padding:10px}.online-actions{display:grid;grid-template-columns:1fr;gap:7px}.join-row{width:100%}.join-row button{min-width:74px}.room-code-block{justify-content:space-between;margin-top:9px}.room-status{font-size:11px}
  .board-bar{gap:4px;padding:9px 8px;font-size:9px}.board-bar span{white-space:nowrap}.board-bar span:nth-child(3){overflow:hidden;text-overflow:ellipsis}
  #boardViewport{height:clamp(280px,52dvh,500px)}.board-tools{padding:7px;gap:6px}.board-tools label{width:100%}.board-tools>div{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.board-tools button{min-height:40px;padding:5px;font-size:10px}.board-tools>small{font-size:9px}
  .capital-duel{grid-template-columns:1fr 1fr;gap:4px;padding:5px}.capital-card{padding:7px 5px}.capital-card b{font-size:11px}.capital-card span{font-size:10px}.capital-card strong{font-size:15px}.capital-card meter{height:8px}
  .legend{gap:5px;flex-wrap:wrap;padding:6px;font-size:8px}.board-insight{padding:8px 9px}.board-insight b{font-size:13px}.board-insight p{font-size:10px}
  .selected{margin-bottom:8px}.selected .outline{min-height:42px}
  .hand-section{padding:10px 2px 0}.hand-heading{gap:7px;margin-bottom:8px}.hand-heading h3{font-size:14px}.resources{width:100%;justify-content:space-between;font-size:10px}.hand-heading .gold{min-height:44px}.hand{gap:8px;padding:4px 2px 12px;min-height:0}.hand .card{flex-basis:158px}.card .desc{font-size:10px;line-height:1.4;padding:7px 9px}.card .stats{padding:6px 9px;font-size:10px}
  footer{display:none}
  .social-panel{right:6px;left:6px;top:auto;bottom:6px;width:auto;max-height:78vh;padding:10px}.social-log{height:180px}.social-tabs{display:grid;grid-template-columns:1fr 1fr 1fr}.social-tabs button{min-height:40px;padding:5px 4px;font-size:10px}.social-rank{font-size:10px}.social-rank th,.social-rank td{padding:6px 3px}.social-panel form{gap:5px}.social-panel input{min-height:42px}
  .room-chat{right:6px;left:6px;bottom:6px;width:auto}.chat-form input{min-height:42px}.chat-form button{min-width:58px}
}
.board .unit-name{margin-top:1px}
.city-banner{
  top:2px;
  left:2px;
  right:auto;
  font-size:9px;
  padding:1px 4px;
  line-height:1.2;
  border:1px solid #cba251;
  border-radius:2px;
}
.stronghold .unit-token{margin-top:0;max-width:42px}
.stronghold .terrain{font-size:18px}
.board .tile .terrain{font-size:12px}
.board .tile>.terrain+span{
  font-size:8px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:900px){
  .board .unit-token{max-width:40px}
  .board .unit-name,.board .unit-stats{font-size:7px}
}

.deck-counts{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 16px;font-size:13px;color:#c4cdce}
.deck-counts b{color:#f2cf82}.deck-counts b.over{color:#e68272}
.deck-builder.collection-grid{max-height:min(58vh,560px);overflow:auto;padding:8px;border:1px solid #45504d;border-radius:4px;background:#0f171b;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-items:start}
.deck-builder .card{cursor:pointer;position:relative;margin:0;width:100%;flex-basis:auto}
.deck-builder .card.deck-picked{outline:2px solid #f2cf82;outline-offset:2px;box-shadow:0 0 0 1px #f2cf8244,inset 0 0 20px #d9b76d22}
.deck-builder .card:disabled{opacity:.45;cursor:not-allowed}
.deck-pick-badge{display:block;text-align:center;padding:6px 8px;font-size:10px;color:#d7c38e;background:#152028;border-top:1px solid #45504d}
.deck-builder .card.deck-picked .deck-pick-badge{color:#101619;background:#d9b76d;font-weight:700}
@media(max-width:750px){.deck-builder.collection-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}}

.board-insight{margin:0;padding:10px 14px;min-height:3.6em;background:linear-gradient(100deg,#1a242c,#152028);border:1px solid #6c6046;border-radius:4px}
.board-insight b{display:block;font-size:15px;color:#f2cf82;margin-bottom:4px}
.board-insight p{margin:0;font-size:12px;color:#d5dde0;line-height:1.45}
.panel.selected .eyebrow{margin-bottom:8px}
.social-friend-help{font-size:11px;color:#9aa9aa;margin-bottom:6px}

/* Keep the battlefield clean: coordinates remain in each tile's accessible
   label, but are hidden from the visual board. */
.board .tile .coord{display:none}

/* Remove the decorative terrain glyphs (♠, ▲, ♨, etc.) from the lower-left
   of each tile while keeping the terrain name and interactive tile intact. */
.board .tile>.terrain{display:none!important}

/* Do not leave red/green territory tabs on empty tiles after a unit moves
   away; occupied tiles and strongholds still retain their faction cue. */
.board .tile.owner0:not(:has(.unit-token)):not(.stronghold),
.board .tile.owner1:not(:has(.unit-token)):not(.stronghold){box-shadow:none!important}

/* Scale the city artwork to the tile scene instead of filling the whole
   cell; capitals stay slightly larger than side cities in both biomes. */
.board .tile .city-art.city-capital{inset:7% 6% 9%;transform:none;opacity:.84}
.board .tile .city-art.city-secondary{inset:15% 12% 17%;transform:none;opacity:.82}
.board .tile.stronghold .city-art.city-capital{inset:7% 5% 9%;transform:none;opacity:.9}
.board .tile.stronghold .city-art.city-secondary{inset:15% 12% 17%;transform:none;opacity:.86}
.board .tile .city-banner{left:6%;right:6%;top:4%;font-size:clamp(8px,1.05vw,11px);padding:1px 2px}

/* The social panel has display rules on its flex/grid children; keep the
   native hidden state authoritative when switching chat modes. */
.social-panel [hidden]{display:none!important}
.deck-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0}.deck-actions .gold{padding:10px 14px}.deck-actions .collection-search{flex:1;min-width:260px}.deck-order-note{margin:4px 0 10px;color:#d9bd80;font-size:11px}
.room-list{margin-top:14px;padding-top:12px;border-top:1px solid #3b4747}.room-list-title{display:block;color:#e7ca85;font-size:12px;margin-bottom:8px}.room-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;margin:6px 0;border:1px solid #405052;border-radius:4px;background:#101a1e}.room-entry span{display:flex;flex-direction:column;gap:2px}.room-entry small,.room-list-empty{color:#91a1a4;font-size:10px}.room-entry button{padding:6px 11px;font-size:11px}

/* Keep the in-battle hand visually balanced on wide screens. The collection
   and pack views keep their larger card treatment for inspection. */
@media(min-width:751px){
  .battle:not(:fullscreen)>.hand-section{padding:12px 14px 10px}
  .battle:not(:fullscreen) .hand-heading{margin-bottom:10px}
  .battle:not(:fullscreen) .hand{gap:10px;padding:4px 2px 10px;min-height:0}
  .battle:not(:fullscreen) .hand .card{flex-basis:190px}
  .battle:not(:fullscreen) .complete-title b{font-size:11px}
  .battle:not(:fullscreen) .complete-rule{padding:5px 6px;gap:3px}
  .battle:not(:fullscreen) .complete-rule>span{font-size:9px;line-height:1.4}
  .battle:not(:fullscreen) .card .desc{min-height:44px;font-size:10px;padding:7px 9px 5px;line-height:1.45}
  .battle:not(:fullscreen) .card .stats{padding:6px 9px;font-size:10px}
}
@media(min-width:751px) and (max-width:1200px){
  .battle:not(:fullscreen) .hand .card{flex-basis:175px}
}

/* Play-focused battlefield controls: one tap to enlarge the map and larger targets. */
#playZoom{
  min-width:82px;
  color:#101619;
  background:linear-gradient(180deg,#f0d48b,#c49a4d);
  border-color:#f0d48b;
  font-weight:700;
  box-shadow:0 2px 0 #806331,0 0 12px #d8b86a33;
}
#playZoom:hover{background:linear-gradient(180deg,#ffe3a0,#d3ab5d)}
#boardViewport{touch-action:none;-webkit-tap-highlight-color:transparent}
@media(max-width:900px){
  #boardViewport{height:clamp(380px,68dvh,680px)}
  .board-tools button{min-height:44px;padding:7px 10px}
  .board-tools>div{gap:7px}
}
@media(max-width:600px){
  #boardViewport{height:clamp(360px,62dvh,560px);min-height:360px}
  .board-tools>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .board-tools #zoomOut,.board-tools #zoomIn{font-size:18px;font-weight:700}
  .board-tools #playZoom{grid-column:span 2;min-height:46px;font-size:12px}
  #boardZoom{height:34px;min-width:0}
}
.tile > span.terrain + span { display: none; }

/* Combat feedback: briefly lunge the attacker and shake/flash the target. */
.board .tile.attack-source .unit-token{animation:attackLunge .38s cubic-bezier(.2,.8,.3,1) both;z-index:4}
.board .tile.attack-target{z-index:5;animation:attackHit .46s ease-out both}
.board .tile.attack-target::after{content:'✦';position:absolute;inset:12%;display:grid;place-items:center;color:#ffe6a1;font-size:clamp(18px,3vw,42px);text-shadow:0 0 8px #fff,0 0 18px #e28b36;pointer-events:none;animation:attackSpark .46s ease-out both;z-index:6}
@keyframes attackLunge{0%{transform:translate(0,0) scale(1)}38%{transform:translate(var(--attack-x),var(--attack-y)) scale(1.12)}100%{transform:translate(0,0) scale(1)}}
@keyframes attackHit{0%,100%{filter:none}18%{filter:brightness(1.9) saturate(1.45);transform:translate(0,0)}35%{transform:translate(-4px,0)}52%{transform:translate(4px,0)}69%{transform:translate(-2px,0)}}
@keyframes attackSpark{0%{opacity:0;transform:scale(.35) rotate(-20deg)}28%{opacity:1;transform:scale(1.25) rotate(10deg)}100%{opacity:0;transform:scale(1.8) rotate(35deg)}}
@media(prefers-reduced-motion:reduce){.board .tile.attack-source .unit-token,.board .tile.attack-target,.board .tile.attack-target::after{animation:none}.board .tile.attack-target::after{display:none}}
.room-password{display:flex;align-items:center;gap:8px;color:#c4cdce;font-size:11px}.room-password input{width:170px;padding:8px 10px;background:#0f1b22;color:#e8ce92;border:1px solid #536161;border-radius:3px;font:inherit}.room-password input:focus-visible{outline:2px solid #d0b574;outline-offset:2px}.room-entry .room-lock{color:#e7ca85;font-size:12px}.room-entry .outline{white-space:nowrap}
.turn-timer{margin-left:auto;min-width:54px;text-align:right;color:#9fc9d4;font:700 11px Cinzel,Georgia,serif;letter-spacing:.4px}.turn-timer.warning{color:#ff9d7f;animation:timerPulse 1s ease-in-out infinite}@keyframes timerPulse{50%{opacity:.5}}@media(max-width:600px){.turn-timer{min-width:45px;font-size:10px}}