:root { --paper:#fbf5e6; --paper2:#fff9ec; --line:#6b4f35; --soft:#d8c8a6; --ink:#2d2418; --accent:#b8762e; --green:#4a9a3c; --wood:#5a3b22; --parch:#f1e4c6; --parch2:#e2cfa5; --gold:#d9a94a; }
@font-face { font-family:'Nunito'; src:url(/client/assets/fonts/Nunito.ttf) format('truetype'); font-weight:200 1000; font-display:swap; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:#0b0f14; overflow:hidden; font-family:'Nunito', "Segoe UI", system-ui, sans-serif; color:var(--ink); user-select:none; }
input, select, button, textarea { font-family:inherit; }
button { font:inherit; cursor:pointer; }
[hidden] { display:none !important; }

/* ------------------------------------------------------------ menu (dark modern, mint accent) */
#menu { position:fixed; inset:0; overflow:hidden; --mint:#4ff0c0; --coral:#ff7a6a; --mtext:#eef3f7; --muted:#8fa3b3; --rule:#2c3d4d; color:var(--mtext); }
.menu-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 70% 30%, #1d2b3a, #0b1118 70%); }
.menu-scene { position:absolute; right:0; top:0; bottom:0; width:55%; background:url(/client/assets/menu-bg.png) center/cover; -webkit-mask-image:linear-gradient(90deg, transparent, #000 40%); mask-image:linear-gradient(90deg, transparent, #000 40%); opacity:.85; }
.menu-col { position:absolute; left:7.3vw; top:50%; transform:translateY(-50%); transform-origin:0 50%; width:520px; overflow:visible; display:flex; flex-direction:column; gap:22px; } /* no scrollbar: main.js scales it down to fit short screens */
.menu-col h1 { margin:0; font-size:72px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.menu-col h1 em { color:var(--mint); font-style:normal; }
.menu-col .tag { color:var(--muted); font-size:16px; margin-top:-8px; }
#screen-home, #screen-room { display:flex; flex-direction:column; gap:22px; }
.u { display:flex; flex-direction:column; gap:4px; flex:1; }
.u span { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.u input, .u select { padding:12px 0; border:none; border-bottom:2px solid var(--rule); background:transparent; color:#fff; font-size:20px; outline:none; border-radius:0; }
.u input:focus, .u select:focus { border-bottom-color:var(--mint); }
.u input::placeholder { color:#4a5c6b; }
.u select option { background:#14202b; color:#fff; }
.row { display:flex; gap:24px; align-items:end; }
.btns { display:flex; gap:12px; align-items:center; margin-top:6px; flex-wrap:wrap; }
#menu button { font:inherit; cursor:pointer; }
#menu button.primary { padding:16px 28px; border-radius:999px; border:none; background:var(--mint); color:#06231a; font-weight:800; font-size:16px; }
#menu button.ghost { padding:16px 28px; border-radius:999px; border:1.5px solid var(--mint); background:transparent; color:var(--mint); font-weight:700; font-size:16px; }
#menu button.ghost.sm { padding:10px 18px; font-size:14px; }
#menu button.ghost.on { background:var(--mint); color:#06231a; }
#menu button.link { background:none; border:none; color:var(--muted); font-weight:600; padding:12px; }
#menu button:disabled { opacity:.35; cursor:default; }
#menu button.primary:not(:disabled):hover { box-shadow:0 0 0 4px rgba(79,240,192,.25); }
.conn { font-size:12px; color:var(--muted); }
.room-head { display:flex; align-items:baseline; gap:14px; }
.room-head .lbl { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.room-head b { font-family:Consolas, monospace; font-size:34px; letter-spacing:.25em; color:var(--mint); }
.hint { font-size:12px; color:var(--muted); }
#slots { display:flex; flex-direction:column; gap:8px; }
.slot { display:flex; align-items:center; gap:12px; padding:12px 14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px; }
.slot.empty { opacity:.45; border-style:dashed; background:transparent; }
.slot.me { border-color:var(--mint); }
.slot .tm { font-size:11px; font-weight:800; letter-spacing:.08em; padding:3px 10px; border-radius:999px; color:#06231a; }
.slot .t0 { background:var(--mint); } .slot .t1 { background:var(--coral); }
.slot .nm { flex:1; font-weight:600; font-size:16px; } .slot .nm em { font-weight:400; color:var(--muted); font-style:normal; }
.slot .st { font-size:12px; color:var(--muted); }
.slot button.sm { padding:6px 12px; font-size:12px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:transparent; color:var(--mtext); margin-left:4px; }
.slot button.danger { border-color:var(--coral); color:var(--coral); }
.error { padding:10px 14px; background:rgba(255,122,106,.15); border:1px solid var(--coral); border-radius:10px; color:#ffb1a6; font-size:13px; }
.help { font-size:11px; color:#6f8290; line-height:1.6; }
/* ------------------------------------------------------------ game */
#game { position:fixed; inset:0; }
canvas#gl { width:100%; height:100%; display:block; }
#vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.22) 100%); }
#overlay, #floaters { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hp { position:absolute; left:0; top:0; height:6px; margin-left:-22px; margin-top:-3px; background:#111a; border:1px solid #000a; border-radius:4px; overflow:hidden; width:44px; }
.hp i { display:block; height:100%; background:var(--green); }
.floater { position:absolute; left:0; top:0; font-weight:700; font-size:14px; color:#fff; text-shadow:0 1px 2px #000, 0 0 6px #000; transform:translate(-50%, -50%); white-space:nowrap; }
.floater.res-wood { color:#e6c48c; } .floater.res-food { color:#ffb1a6; } .floater.res-stone { color:#d5d5d5; } .floater.res-gold { color:#ffd84a; }
#selbox { position:absolute; display:none; border:1px solid #8cff9c; background:rgba(140,255,156,0.12); pointer-events:none; }
.hud { position:absolute; }
.card { background:var(--paper); border:2px solid var(--line); border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.28); color:var(--ink); }

/* top */
#top { top:16px; left:50%; transform:translateX(-50%); display:flex; padding:8px 12px; gap:10px; pointer-events:none; }
.res { display:flex; align-items:center; gap:9px; padding:4px 12px; }
.res .ic { width:34px; height:34px; border-radius:50%; background:#f0e4cc; border:1px solid var(--soft); display:flex; align-items:center; justify-content:center; flex:none; }
.res .ic svg { width:20px; height:20px; }
.res b { font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; }
.res small { display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.55; line-height:1; }
.res .txt { display:flex; flex-direction:column; }
.res.pop.full b { color:#b02010; }
#topright { top:16px; right:16px; display:flex; align-items:center; gap:10px; padding:6px 8px 6px 16px; }
#clock { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; }
.gear { width:34px; height:34px; border-radius:8px; border:1.5px solid var(--soft); background:var(--paper2); font-size:18px; line-height:1; cursor:pointer; color:var(--ink); }
.gear:hover { border-color:var(--accent); }
#settings { position:absolute; top:70px; right:16px; width:320px; padding:18px 20px; display:flex; flex-direction:column; gap:14px; z-index:5; background:rgba(13,20,28,.94); border:1px solid rgba(255,255,255,.12); border-radius:16px; color:#eef3f7; box-shadow:0 20px 50px rgba(0,0,0,.5); backdrop-filter:blur(8px); }
#settings h3 { margin:0; font-size:22px; font-weight:800; }
#settings label { display:flex; flex-direction:column; gap:4px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8fa3b3; }
#settings label.chk { flex-direction:row; align-items:center; gap:10px; font-size:14px; letter-spacing:0; text-transform:none; color:#eef3f7; }
#settings label.chk input { accent-color:#4ff0c0; width:18px; height:18px; }
#settings select { padding:10px 0; border:none; border-bottom:2px solid #2c3d4d; background:transparent; color:#fff; font-size:17px; border-radius:0; outline:none; }
#settings select:focus { border-bottom-color:#4ff0c0; }
#settings select option { background:#14202b; color:#fff; }
#settings .hint { font-size:12px; color:#8fa3b3; }
#settings .diag { font-size:11px; color:#8fa3b3; line-height:1.5; font-family:Consolas, monospace; white-space:pre-wrap; word-break:break-word; }
#settings .diag .warn { color:#ff7a6a; font-family:inherit; display:block; margin-top:4px; }
#settings button { align-self:flex-end; padding:10px 22px; border:1.5px solid #4ff0c0; border-radius:999px; background:transparent; color:#4ff0c0; font-weight:700; cursor:pointer; }
#settings button:hover { background:#4ff0c0; color:#06231a; }

/* bottom */
#bottom { left:0; right:246px; bottom:0; height:180px; display:flex; align-items:flex-end; gap:12px; padding:0 0 16px 16px; pointer-events:none; overflow:hidden; }
#bottom > * { pointer-events:auto; }
@media (max-width:1500px) { #bottom { zoom:0.85; right:290px; } }
@media (max-width:1200px) { #bottom { zoom:0.7; right:350px; } }
#sel { width:430px; height:146px; display:flex; overflow:hidden; flex:none; background:transparent; }
#portrait, #multisel { width:146px; height:142px; flex:none; border-right:2px solid var(--line); background:transparent; }
#selinfo { background:var(--paper); }
#multisel { display:flex; flex-wrap:wrap; align-content:flex-start; gap:4px; padding:10px; overflow:hidden; background:#f0e4cc; }
#multisel .mini { width:36px; height:36px; background:#fff; border:1px solid var(--soft); border-radius:6px; position:relative; color:var(--line); display:flex; align-items:center; justify-content:center; }
#multisel .mini .ico { width:22px; height:22px; }
#multisel .mini b { position:absolute; right:2px; bottom:0; font-size:11px; color:var(--ink); }
#selinfo { flex:1; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:8px 16px; overflow:hidden; min-width:0; }
#selinfo h2 { margin:0; font-size:20px; font-weight:800; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#selinfo .sub { font-size:11px; opacity:.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#selinfo .stats { font-size:11px; opacity:.8; }
#selinfo .desc { font-size:11px; opacity:.7; line-height:1.3; margin-top:1px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bar { height:8px; flex:none; background:#e8dcc4; border-radius:5px; overflow:hidden; border:1px solid var(--soft); }
.bar i { display:block; height:100%; background:linear-gradient(#8fd38a, #4a9a3c); }
.bar.prog i { background:linear-gradient(#ffe27a, #d9a94a); }
#selinfo .hp { position:static; margin:0; height:auto; width:auto; background:none; border:none; font-size:11px; display:flex; justify-content:space-between; gap:8px; white-space:nowrap; }
.queue { display:flex; gap:4px; margin-top:2px; flex-wrap:wrap; align-items:center; }
.qi { width:28px; height:28px; background:#fff; border:1px solid var(--soft); border-radius:6px; position:relative; color:var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; }
.qi .ico { width:20px; height:20px; }
.qi i { position:absolute; left:0; bottom:0; height:4px; background:var(--green); }
.warn { font-size:11px; color:#a02010; }
#actions, #build { height:146px; display:flex; gap:8px; padding:10px; align-items:center; flex:none; }
.btn { width:100px; height:122px; flex:none; border-radius:10px; border:1.5px solid var(--soft); background:var(--paper2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; color:var(--ink); box-shadow:0 2px 4px rgba(0,0,0,.12); }
.btn:hover { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset, 0 4px 10px rgba(184,118,46,.35); }
.btn .ico { width:40px; height:40px; color:var(--line); }
.btn img.ico { width:62px; height:62px; object-fit:contain; margin:-6px 0 -4px; }
.btn .lbl { font-size:14px; font-weight:800; }
.btn .cost { display:flex; gap:5px; align-items:center; font-size:11px; background:var(--line); color:var(--paper); padding:2px 8px; border-radius:999px; height:20px; }
.btn .cost.empty { visibility:hidden; }
.btn .cost .ricon { width:12px; height:12px; }
.btn.poor { opacity:.55; }
.btn.poor .cost { background:#a02010; }
.btn.locked { opacity:.45; filter:grayscale(1); cursor:not-allowed; }
.btn.locked .cost { background:#777; }
.btn .lvl { position:absolute; top:6px; right:8px; font-size:10px; font-weight:800; color:var(--line); opacity:.75; }
.btn { position:relative; }
#mm { position:absolute; right:16px; bottom:16px; width:214px; height:214px; padding:7px; }
#tip { position:absolute; z-index:6; width:260px; padding:12px 14px; background:rgba(13,20,28,.94); border:1px solid rgba(255,255,255,.12); border-radius:12px; color:#eef3f7; font-size:13px; line-height:1.45; box-shadow:0 12px 30px rgba(0,0,0,.4); pointer-events:none; }
#tip b { display:block; font-size:15px; font-weight:800; margin-bottom:2px; }
#tip .c { display:flex; gap:10px; align-items:center; color:#8fa3b3; margin:4px 0 6px; font-size:12px; }
#tip .c .ricon { width:14px; height:14px; margin-right:3px; vertical-align:-2px; }
#tip .k { color:#4ff0c0; font-size:11px; margin-top:6px; letter-spacing:.06em; }
#minimap { width:100%; height:100%; display:block; border-radius:8px; border:1px solid var(--soft); cursor:crosshair; }
.lbl-preview { position:absolute; left:0; top:0; transform:translate(-9999px,-9999px); margin-left:-70px; width:140px; text-align:center; font-weight:800; font-size:15px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6); pointer-events:none; }
#stale { position:fixed; left:50%; bottom:196px; transform:translateX(-50%); z-index:9; background:#ff7a6a; color:#2a0b08; padding:10px 18px; border-radius:999px; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,.35); }
#toasts { position:absolute; left:50%; top:90px; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; }
.toast { background:var(--paper); color:var(--ink); padding:8px 16px; border-radius:8px; border:1.5px solid var(--line); font-size:14px; transition:opacity .3s; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.toast.out { opacity:0; }
#endgame { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center, rgba(11,17,24,.55), rgba(11,17,24,.85)); backdrop-filter:blur(3px); }
.end-card { background:rgba(13,20,28,.94); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:44px 70px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.6); color:#eef3f7; min-width:460px; }
.end-card p { color:#8fa3b3; font-size:16px; margin:6px 0 0; }
.end-card h1 { font-size:52px; font-weight:900; margin:0 0 6px; }
.end-card h1.win { color:#4ff0c0; } .end-card h1.lose { color:#ff7a6a; } .end-card h1.pause { color:#eef3f7; }
#pause { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center, rgba(11,17,24,.55), rgba(11,17,24,.85)); backdrop-filter:blur(3px); z-index:8; }
.pause-btns { display:flex; gap:12px; justify-content:center; margin-top:26px; }
.pause-btns button { margin-top:0; }
.end-card button.danger { background:transparent; border:1.5px solid #ff7a6a; color:#ff7a6a; }
.end-card button.danger:hover { background:#ff7a6a; color:#2a0b08; box-shadow:none; }
.end-card button { margin-top:26px; padding:16px 32px; border:none; border-radius:999px; background:#4ff0c0; color:#06231a; font-weight:800; font-size:16px; }
.end-card button:hover { box-shadow:0 0 0 4px rgba(79,240,192,.25); }

/* ------------------------------------------------------------ HUD theme "H2 · Dark glass" (chosen by Vinchi 2026-09-11): resources left, title centre, navy glass panels, mint accent */
/* H2 · Dark glass — matches the menu: navy glass panels, thin light borders, mint accent, wordmark title with rules */
#top { left:16px; transform:none; gap:2px; padding:6px 8px; }
#title { position:absolute; top:22px; left:50%; transform:translateX(-50%); pointer-events:none; display:flex; align-items:center; gap:16px; color:#eef3f7; font-size:26px; font-weight:900; letter-spacing:.06em; white-space:nowrap; text-shadow:0 2px 8px rgba(0,0,0,.6); }
#title::before, #title::after { content:''; width:70px; height:2px; background:linear-gradient(90deg, transparent, #4ff0c0); } #title::after { background:linear-gradient(90deg, #4ff0c0, transparent); }
#title .t2 { color:#4ff0c0; }
.card { background:rgba(13,20,28,.8); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); border-radius:14px; color:#eef3f7; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.res { padding:4px 12px; } .res .ic { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); }
.res b { color:#fff; } .res small { color:#8fa3b3; opacity:1; } .res.pop.full b { color:#ff7a6a; }
#clock { color:#eef3f7; }
.gear { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#eef3f7; border-radius:10px; } .gear:hover { border-color:#4ff0c0; color:#4ff0c0; }
#selinfo { background:transparent; color:#eef3f7; }
#portrait, #multisel { border-right:1px solid rgba(255,255,255,.14); }
#selinfo h2 { color:#fff; } #selinfo .sub { color:#8fa3b3; opacity:1; } #selinfo .stats, #selinfo .desc { color:#c5d2dc; opacity:1; }
.bar { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.12); } .bar i { background:linear-gradient(#8ff7d4, #2fbf95); }
.btn { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#eef3f7; box-shadow:none; border-radius:12px; }
.btn:hover { border-color:#4ff0c0; box-shadow:0 0 0 1px #4ff0c0 inset, 0 6px 16px rgba(79,240,192,.25); }
.btn .ico { color:#cfe3ea; } .btn .lbl { color:#eef3f7; } .btn .cost { background:#4ff0c0; color:#06231a; font-weight:800; }
.btn.poor .cost { background:#ff7a6a; color:#2a0b08; }
#mm { padding:8px; } #minimap { border:1px solid rgba(255,255,255,.18); border-radius:10px; }
.toast { background:rgba(13,20,28,.92); color:#eef3f7; border-color:rgba(255,255,255,.2); }

#sel { backdrop-filter:none; }
#multisel { background:rgba(255,255,255,.04); } #multisel .mini, .qi { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16); color:#eef3f7; } #multisel .mini b { color:#fff; } .qi i { background:#4ff0c0; } .warn { color:#ff7a6a; }
@media (max-width:1150px) { #title { display:none; } }

/* action bar: buttons shrink instead of being cut off on narrower screens; Rally / Clear rally stack in one slot */
#actions { flex:0 1 auto; min-width:0; }
#actions > .btn, #actions > .stack { flex:0 1 100px; min-width:70px; width:100px; }
.btn { container-type:inline-size; }
.btn .lbl { max-width:94%; text-align:center; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; }
@container (max-width:97px) { .btn .lbl { font-size:12px; } .btn .ico { width:34px; height:34px; } .btn .cost { padding:2px 6px; gap:3px; font-size:10px; } }
.stack { height:122px; display:flex; flex-direction:column; gap:8px; }
.stack > .btn { width:auto; height:auto; flex:1; min-height:0; }
.stack.two > .btn { gap:2px; padding:0 4px; }
.stack.two > .btn .ico { width:22px; height:22px; flex:none; }
.stack.two > .btn .lbl { font-size:11px; line-height:1.3; -webkit-line-clamp:1; }
.stack.two > .btn .cost { display:none; }

#settings .set-btns { display:flex; gap:10px; justify-content:flex-end; align-items:center; }
#settings .set-btns button { align-self:auto; }
#settings button.danger { border-color:#ff7a6a; color:#ff7a6a; } #settings button.danger:hover { background:#ff7a6a; color:#2a0b08; }