/* Layout: full-bleed battlefield canvas; walnut-and-brass HUD bars float over it, top and bottom */
:root{
  --walnut:#241a12; --walnut-2:#352719; --walnut-3:#4a3722;
  --brass:#d0a74c; --brass-dim:#8d702f;
  --parch:#f0e4c6; --parch-dim:#bba986;
  --crimson:#b8362b; --steppe:#6d8a3c;
  --p0:#2f6fd0; --p1:#c8392e;
  --food:#e2c25a; --wood:#a8743f; --gold:#f2cf3d;
  --f-display:'Ruslan Display', Georgia, 'Times New Roman', serif;
  --f-ui:'PT Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-num:'PT Sans Narrow', 'PT Sans', system-ui, sans-serif;
  color-scheme:dark;
}
html{height:100%;box-sizing:border-box;background:#17110b}
body{height:100%;margin:0;overflow:hidden;background:#17110b;color:var(--parch);font-family:var(--f-ui);font-size:15px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
#app{position:relative;width:100%;height:100%;overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;background:#2c3a1c}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- HUD ---------- */
#top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:6px;padding:6px 8px;padding-top:calc(6px + env(safe-area-inset-top,0px));background:linear-gradient(var(--walnut),rgba(36,26,18,.92));border-bottom:1px solid var(--brass-dim);z-index:5}
.res{display:flex;align-items:center;gap:4px;font-family:var(--f-num);font-size:16px;font-variant-numeric:tabular-nums;padding:3px 7px;border-radius:4px;background:rgba(0,0,0,.25);min-width:0}
.res svg{width:16px;height:16px;flex:none}
.res.full{color:#ff9d8a}
#top .sp{flex:1}
#bMenu{background:var(--walnut-2);border:1px solid var(--brass-dim);border-radius:4px;padding:5px 10px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
#mini{position:absolute;right:8px;top:calc(50px + env(safe-area-inset-top,0px));width:118px;height:118px;border:2px solid var(--brass-dim);border-radius:4px;background:#2c3a1c;touch-action:none;z-index:4;box-shadow:0 2px 8px rgba(0,0,0,.5)}
#banner{position:absolute;left:50%;transform:translateX(-50%);top:calc(56px + env(safe-area-inset-top,0px));background:rgba(36,26,18,.94);border:1px solid var(--brass);padding:6px 12px;border-radius:4px;font-size:14px;z-index:6;max-width:calc(100% - 160px);text-align:center}
#modeTag{position:absolute;left:8px;top:calc(50px + env(safe-area-inset-top,0px));font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--crimson);color:#fff;padding:3px 8px;border-radius:3px;z-index:4}
#bottom{position:absolute;left:0;right:0;bottom:0;z-index:5;padding-bottom:env(safe-area-inset-bottom,0px);background:linear-gradient(rgba(36,26,18,.9),var(--walnut));border-top:1px solid var(--brass-dim)}
#panel{padding:6px 8px 4px;min-height:74px;max-height:132px;overflow:hidden}
.ptop{display:flex;align-items:baseline;gap:8px;min-width:0}
.ptitle{font-family:var(--f-display);font-size:16px;color:var(--brass);white-space:nowrap}
.hint{color:var(--parch-dim);font-size:13px;line-height:1.3;min-width:0}
.row{display:flex;gap:6px;overflow-x:auto;padding:5px 0 3px;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.act{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:84px;padding:6px 8px;background:var(--walnut-2);border:1px solid var(--walnut-3);border-radius:4px;text-align:left;position:relative}
.act b{font-size:13px;white-space:nowrap}
.act.pic{flex-direction:row;align-items:center;gap:6px;padding:4px 8px 4px 4px}
.act.pic>span.tx{display:flex;flex-direction:column;gap:2px}
.ic{width:40px;height:40px;flex:none;border-radius:3px;background:radial-gradient(circle at 50% 40%,#5a6b3a,#2c3420)}
.chip img{width:24px;height:24px;margin:-3px 0 -3px -5px}
.act:active{background:var(--walnut-3)}
.act[disabled]{opacity:.42}
.act.go{border-color:var(--brass);background:#4a3a1c}
.act.no{border-color:#6b2a24}
.act .q{position:absolute;top:-6px;right:-5px;background:var(--crimson);color:#fff;font-style:normal;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.cost{display:flex;gap:6px;font-family:var(--f-num);font-size:12px;color:var(--parch-dim);font-variant-numeric:tabular-nums}
.c::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:3px;vertical-align:1px}
.c.f::before{background:var(--food)} .c.w::before{background:var(--wood)} .c.g::before{background:var(--gold)}
.c.lack{color:#ff8f7d}
.chip{flex:none;display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:14px;background:var(--walnut-2);border:1px solid var(--walnut-3);font-size:13px;white-space:nowrap}
.chip i{font-style:normal;font-family:var(--f-num);color:var(--brass)}
.bar{height:6px;background:rgba(0,0,0,.45);border-radius:3px;overflow:hidden;flex:1;min-width:60px}
.bar>span{display:block;height:100%;background:var(--steppe)}
.bar.prod>span{background:var(--brass)}
#tools{display:flex;gap:4px;padding:4px 6px 6px;overflow-x:auto;scrollbar-width:none}
#tools::-webkit-scrollbar{display:none}
#tools button{flex:1 1 0;min-width:0;padding:9px 2px;white-space:nowrap;background:var(--walnut-2);border:1px solid var(--walnut-3);border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
#tools #tPeas{flex-grow:1.5}
#tools button.on{background:var(--brass);color:var(--walnut);border-color:var(--brass)}
#tools button.atk.on{background:var(--crimson);color:#fff;border-color:var(--crimson)}
@media (orientation:landscape) and (max-height:520px){
  #panel{min-height:58px;max-height:92px;padding-top:4px}
  #tools button{padding:6px 6px}
  #mini{width:96px;height:96px}
}

/* ---------- Screens ---------- */
.scr{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;overflow-y:auto;background:radial-gradient(ellipse at 50% 35%,rgba(23,17,11,.35),rgba(23,17,11,.9) 70%)}
.scr.solid{background:rgba(20,14,9,.94)}
.card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px}
.logo{font-family:var(--f-display);font-size:clamp(64px,22vw,112px);line-height:.9;color:var(--parch);text-align:center;letter-spacing:.02em;text-shadow:0 3px 0 #5a1d17,0 6px 22px rgba(0,0,0,.7)}
.logo span{color:var(--brass)}
.tag{text-align:center;color:var(--parch-dim);font-size:15px;line-height:1.4;margin:-2px 0 8px;text-wrap:balance}
.lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
input[type=text]{width:100%;padding:11px 12px;border-radius:4px;border:1px solid var(--brass-dim);background:rgba(20,14,9,.85);color:var(--parch);font:inherit;font-size:16px}
.big{width:100%;padding:14px 16px;border-radius:4px;border:1px solid var(--brass);background:linear-gradient(#5b2219,#3d1611);font-family:var(--f-display);font-size:20px;letter-spacing:.03em;color:var(--parch);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.big.alt{background:var(--walnut-2);border-color:var(--brass-dim)}
.big[disabled]{opacity:.45}
.big small{display:block;font-family:var(--f-ui);font-size:12px;color:var(--parch-dim);letter-spacing:0;margin-top:2px}
.seg{display:flex;border:1px solid var(--brass-dim);border-radius:4px;overflow:hidden}
.seg button{flex:1;padding:9px 4px;background:rgba(20,14,9,.85);border:0;border-right:1px solid var(--brass-dim);font-size:14px}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--brass);color:var(--walnut);font-weight:700}
.link{background:none;border:0;color:var(--parch-dim);text-decoration:underline;padding:6px;font-size:14px}
h2{font-family:var(--f-display);font-weight:400;color:var(--brass);font-size:28px;margin:0;text-align:center}
.note{color:var(--parch-dim);font-size:14px;line-height:1.45}
.lobby{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto}
.lobby button{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-radius:4px;border:1px solid var(--brass-dim);background:var(--walnut-2);text-align:left}
.lobby button b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lobby .slot{border-left:5px solid var(--brass)}
.lobby .slot[disabled]{opacity:1;cursor:default}
.lobby .empty{color:var(--parch-dim);font-size:14px;padding:10px;border:1px dashed var(--walnut-3);border-radius:4px;text-align:center}
.code{font-family:var(--f-num);font-size:44px;letter-spacing:.2em;text-align:center;color:var(--brass)}
.joinrow{display:flex;gap:6px}
.joinrow input{flex:1;min-width:0;text-transform:lowercase;letter-spacing:.15em}
.joinrow button{padding:0 16px;border-radius:4px;border:1px solid var(--brass);background:var(--walnut-2);font-weight:700}
.how{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:14px;line-height:1.4}
.how dt{color:var(--brass);font-weight:700;white-space:nowrap}
.how dd{margin:0;color:var(--parch);min-width:0}
.result{font-family:var(--f-display);font-size:clamp(44px,14vw,72px);text-align:center;line-height:1}
.result.win{color:var(--brass)} .result.lose{color:#e0705f}
.stats{display:flex;justify-content:center;gap:24px;font-family:var(--f-num);font-size:18px;font-variant-numeric:tabular-nums}
.stats div{text-align:center} .stats span{display:block;font-family:var(--f-ui);font-size:12px;color:var(--parch-dim);text-transform:uppercase;letter-spacing:.08em}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}