/* Stone and bronze battlefield. Rules and card-sheet geometry stay in their own layers. */
:root{--bg:#171917;--panel:#262a27;--panel2:#34382f;--line:#726046;--ink:#f3e8cd;--dim:#c0b49b;--gold:#dfb66d;--me:#a8c7cb;--foe:#e2a292}
body{background:#101310;font-family:Georgia,serif}
#app{max-width:1120px;padding:0 20px;overflow-y:auto;background:linear-gradient(90deg,#1a1d19,#30352c 50%,#1a1d19);border-inline:1px solid #68573c;box-shadow:0 20px 80px #0009}
.bar{position:relative;flex-shrink:0;padding:10px 14px;gap:8px;background:linear-gradient(#373a32,#242822);border-bottom:1px solid #9a7c4b;min-height:60px;font-family:Arial,sans-serif}
.bar .who{display:flex;align-items:center;gap:8px;font:700 16px Cinzel,Georgia,serif;min-width:120px}
.commander-emblem{width:42px;height:42px;object-fit:contain}
.bar .hq{font:700 22px Cinzel,Georgia,serif;color:#f5d6bb;white-space:nowrap}
.bar .pill{border-radius:3px;padding:5px 9px;background:#171c18;border-color:#635e4c;font-size:12px}
.bar .pill small{display:block;font:9px Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:3px}
.obj i{width:10px;height:10px;border-radius:2px;transform:rotate(45deg);margin:3px 4px}
#oppbar{border-top:3px solid #8e5141}
#mybar{border-top:3px solid #698c89;border-bottom:0}
.row{padding:5px 16px;min-height:76px;gap:8px;background:#1b201bcc;border-bottom:1px solid #5b5845}
.row .lbl{width:76px;font:700 11px Cinzel,Georgia,serif;color:#d6c29c;letter-spacing:.04em}
.row .lbl img{display:block;width:28px;height:28px;object-fit:contain;margin-bottom:3px}
.row.far{min-height:68px}
.row.locked{min-height:25px;font:10px Arial,sans-serif;letter-spacing:.04em;color:#c0b49b;background:#1b201b}
#lanes{gap:12px;padding:12px 14px;min-height:230px;position:relative}
.lane{border:2px solid #79674c;border-radius:3px;background:linear-gradient(#3c342a66,#343b2b99 49.5%,#343b2b99 50%,#26372e99);box-shadow:inset 0 0 24px #0007}
.lane .name{font:700 11px Cinzel,Georgia,serif;letter-spacing:.14em;padding:6px;background:#24271ed9;color:#dccaab;min-height:24px}
.lane .name.me{color:#c6e1db;background:#30443c}
.lane .name.foe{color:#ffd2bd;background:#4c3329}
.lane .half{padding:6px 3px;gap:5px;position:relative}
.lane .half.opp{border-bottom:2px solid #a78d56}
.lane .units{min-height:80px;gap:7px}
.slot{width:68px;height:80px;border:1px dashed #b8a78355;border-radius:3px;background:#0c120d26}
.u{width:68px;height:80px;border-radius:4px;border-width:2px;box-shadow:0 3px 5px #0006;padding:3px}
.u .nm{font:10px/1.1 Georgia,serif;max-height:23px}
.u .st{font-size:15px;background:#191b17b3;border-radius:2px}
.u .kw{font-size:9px;background:#191b17ca;padding:1px 3px}
.u.can{box-shadow:0 0 0 1px #e9c77d,0 4px 8px #0008}
.fort{font-size:11px;border-radius:2px;padding:3px 8px;background:#504535;color:#f4e3c5}
#actbar{min-height:54px;padding:7px 14px;border-top:1px solid #575744;border-bottom:2px solid #9b7b47;background:#1c241e}
#actbar button,#mybar button{min-height:38px;border-radius:3px!important;font-family:Arial,sans-serif;font-size:12px;cursor:pointer}
#endBtn{min-width:130px;background:linear-gradient(#a47a3c,#674820)!important;border-color:#e8c27c!important;color:#fff0cf!important;text-transform:uppercase;letter-spacing:.08em}
#hand{min-height:146px;gap:10px;padding:12px 16px calc(12px + var(--safe-b));background:linear-gradient(#332e23,#171b16);border-top:1px solid #6a5b40;align-items:center;scrollbar-color:#a48552 #1c211b;scrollbar-width:thin}
.hc{width:92px;height:120px;padding:5px;border-radius:5px;box-shadow:0 5px 8px #0007;transition:transform .16s ease-out}
.hc .nm{font-size:12px;margin-top:8px}
.hc .cost{width:25px;height:25px;font-size:15px;background:#223b50;border-color:#b4bfd0}
.hc .zn{font:8px Arial,sans-serif;padding:4px}
.hc .st{font-size:16px;background:#171b16b8;width:100%;text-align:center}
.hc.play{box-shadow:0 0 0 1px #e4c27f,0 5px 8px #0009}
.hc:hover{transform:translateY(-5px)}
#sheet{background:#252c24;border-color:#c5a168;box-shadow:0 -12px 40px #0009;max-width:600px;margin:auto;z-index:8}
#menu{background:linear-gradient(140deg,#141b17f5,#373329fa);gap:22px}
#menu h1{font:900 36px Cinzel,Georgia,serif;color:#e8c991}
#menu p{font:14px/1.6 Arial,sans-serif;color:#d2c6ae}
.team{border-radius:4px;background:#252d23;padding:20px 12px;border-color:#73634a;box-shadow:0 8px 18px #0004}
.team.on{border-color:#dfb66d;background:#423d2c}
.team .em img{width:70px;height:70px;object-fit:contain}
.team b{font-family:Cinzel,Georgia,serif}
.big{border-radius:3px;background:linear-gradient(#9b753d,#634a29);color:#fff1d3;min-width:200px;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid #f7df9e;outline-offset:3px}
.u:focus-visible,.hc:focus-visible{outline:3px solid #fff0bc;outline-offset:2px}
@media(min-width:760px) and (min-height:780px){.u,.slot{width:82px;height:98px}.lane .units{min-height:98px}.u .nm{font-size:11px}.row{min-height:102px}.row.far{min-height:100px}.row.locked{min-height:28px}}
@media(max-width:600px){#app{padding:0;border:0}.bar{padding:5px 8px;gap:5px;min-height:50px}.bar .who{font-size:12px;min-width:86px;gap:4px}.commander-emblem{width:30px;height:30px}.bar .hq{font-size:18px}.bar .pill{padding:3px 5px;font-size:10px}.bar .pill small{font-size:8px}.row{padding:3px 7px;min-height:64px;gap:5px}.row .lbl{width:43px;font-size:9px}.row .lbl img{width:23px;height:23px}.row.far{min-height:60px}.row.locked{min-height:22px;font-size:9px}#lanes{gap:5px;padding:6px;min-height:218px}.lane .name{font-size:9px;padding:5px 1px;letter-spacing:.06em;min-height:20px}.lane .units{gap:3px;min-height:70px}.u,.slot{width:46px;height:66px}.u .nm{font-size:8px;max-height:18px}.u .st{font-size:12px}.u .kw{font-size:7px}.lane .half{padding:4px 1px}.fort{font-size:9px;padding:2px 4px}#actbar{padding:5px 8px;min-height:48px}#endBtn{min-width:100px}#hand{min-height:124px;gap:7px;padding:9px 9px calc(9px + var(--safe-b))}.hc{width:78px;height:102px}.hc .nm{font-size:10px}.hc .st{font-size:14px}#menu h1{font-size:28px}}
@media(max-height:720px){.row.locked{min-height:18px}.row,.row.far{min-height:52px}.row .u{height:48px;width:44px}.row .u .nm{display:none}#hand{min-height:104px;padding-block:7px}.hc{height:90px;width:70px}#lanes{min-height:190px}.bar{min-height:44px}.lane .units{min-height:58px}.lane .u,.slot{height:56px}.lane .u .nm{font-size:8px}.lane .name{min-height:18px;padding:3px}.bar .pill small{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}