* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0d12; color: #e6e1d3; font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 14px; overflow: hidden; }
#app { width: 100%; height: 100%; }
.hidden { display: none !important; }
.dim { color: #9a957f; }
.small { font-size: 12px; padding: 3px 8px; }
button { background: linear-gradient(#5a4a2a, #3a2e18); color: #f0e6c8; border: 1px solid #8a7040; border-radius: 3px; padding: 6px 14px; cursor: pointer; font-family: inherit; font-size: 14px; }
button:hover { background: linear-gradient(#7a6438, #4a3a20); }
button.big { font-size: 17px; padding: 10px 24px; min-width: 220px; margin: 4px; }
button.danger { border-color: #a04040; }
input, select { background: #171a22; color: #f0e6c8; border: 1px solid #5a5040; border-radius: 3px; padding: 4px 6px; font-family: inherit; font-size: 13px; }
h1, h2, h3, h4 { margin: 8px 0; color: #f0d890; letter-spacing: 1px; }
h3 { font-size: 15px; }
.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #1c2230 0%, #0b0d12 70%); overflow: auto; }
.panel { background: rgba(20, 22, 30, 0.95); border: 2px solid #6a5a3a; border-radius: 6px; padding: 20px 28px; box-shadow: 0 0 40px #000; max-height: 96vh; overflow: auto; }
.panel.center { text-align: center; }
.panel.wide { width: 900px; max-width: 96vw; }
.logo { font-size: 64px; letter-spacing: 10px; margin: 0; color: #f0d060; text-shadow: 0 0 20px #a06020, 3px 3px 0 #402000; }
.tagline { color: #b0a888; letter-spacing: 3px; margin-bottom: 10px; }
#titleart { image-rendering: pixelated; margin: 6px 0; }
.menubtns { display: flex; flex-direction: column; align-items: center; margin: 14px 0; }
.hdr { display: flex; align-items: center; gap: 14px; }
.hdr h2 { margin: 0; }
.cols { display: flex; gap: 20px; margin-top: 10px; }
.col-left { width: 260px; }
.col-right { flex: 1; }
.racetabs { display: flex; gap: 6px; margin: 10px 0 6px; }
.racetab.active { background: linear-gradient(#a08040, #6a5028); color: #fff; }
.mission { padding: 8px 10px; margin: 4px 0; border: 1px solid #3a3528; border-radius: 3px; cursor: pointer; background: #14161e; }
.mission:hover { border-color: #8a7040; }
.mission.sel { background: #2a2416; border-color: #d0a040; }
.mission.locked { color: #6a6555; cursor: default; }
.mission .num { display: inline-block; width: 20px; color: #f0d060; }
.mission .check { color: #60e060; float: right; }
.mission .lock { float: right; }
#briefing { background: #101218; border: 1px solid #3a3528; padding: 6px 16px; min-height: 240px; margin-bottom: 10px; line-height: 1.5; }
.form { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; align-items: center; }
.form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #b0a888; }
.row { display: flex; gap: 10px; align-items: center; padding: 6px 8px; margin: 3px 0; background: #14161e; border: 1px solid #2a2820; border-radius: 3px; }
.row > span:first-child { min-width: 120px; }
.list { max-height: 260px; overflow: auto; }
.actions { margin-top: 14px; text-align: center; }
.chat { height: 120px; overflow: auto; background: #0e1015; border: 1px solid #2a2820; padding: 6px; font-size: 13px; margin: 8px 0 4px; }
#mp-chatinput { width: 100%; }
.slot .slotname { min-width: 140px; font-weight: bold; }
.ready { color: #c06060; font-size: 12px; }
.ready.yes { color: #60d060; }
.help p, .help li { line-height: 1.5; }
.help .cols > div { flex: 1; }
ul.left { text-align: left; }

/* ---------- GAME ---------- */
#game { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; }
#topbar { height: 30px; background: linear-gradient(#2a2418, #1a160e); border-bottom: 2px solid #5a4a2a; display: flex; align-items: center; gap: 22px; padding: 0 12px; font-size: 14px; font-weight: bold; }
#topbar .res { display: flex; align-items: center; gap: 5px; }
#res-food.over { color: #ff6060; }
.ic { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.ic.gold { background: #f0c020; box-shadow: inset -2px -2px 0 #a07000; border-radius: 50%; }
.ic.lumber { background: #8a5a2a; box-shadow: inset 0 -3px 0 #5a3a18; }
.ic.food { background: #d0a060; border-radius: 50% 50% 4px 4px; }
#clock { margin-left: auto; }
#waiting { color: #ffd040; }
#btn-menu { margin-left: 10px; }
#view { flex: 1; width: 100%; display: block; image-rendering: pixelated; cursor: default; }
#hud { height: 190px; background: linear-gradient(#2a2418, #14100a); border-top: 2px solid #5a4a2a; display: flex; gap: 8px; padding: 5px; }
#mmwrap { width: 180px; height: 180px; border: 1px solid #5a4a2a; background: #000; }
#minimap { display: block; width: 178px; height: 178px; cursor: crosshair; }
#selpanel { flex: 1; display: flex; gap: 12px; padding: 6px; background: #101218; border: 1px solid #3a3528; border-radius: 3px; overflow: hidden; }
#selpanel .hint { margin: auto; color: #8a8570; text-align: center; }
.portrait canvas { width: 80px; height: 80px; image-rendering: pixelated; border: 1px solid #6a5a3a; background: #20242c; }
.info { flex: 1; font-size: 13px; line-height: 1.4; }
.info .name { font-size: 17px; font-weight: bold; color: #f0d890; }
.info .owner { font-size: 12px; }
.hpbar { position: relative; height: 12px; background: #2a1010; border: 1px solid #000; margin: 3px 0; width: 220px; }
.hpbar > div { height: 100%; background: #40e040; }
.hpbar.mana > div { background: #4080ff; }
.hpbar.prog > div { background: #40c0ff; }
.hpbar span { position: absolute; left: 0; top: -1px; width: 100%; text-align: center; font-size: 10px; color: #fff; text-shadow: 1px 1px 0 #000; }
.stats { font-size: 12px; }
.queue { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.qitem { background: #1a1e28; border: 1px solid #5a5040; padding: 2px 6px; font-size: 12px; cursor: pointer; }
.qitem:hover { border-color: #ff6060; }
.qitem .hpbar { width: 120px; height: 6px; }
.multi { display: grid; grid-template-columns: repeat(6, 44px); gap: 4px; }
.mcell { width: 44px; cursor: pointer; }
.mcell canvas { width: 40px; height: 40px; image-rendering: pixelated; border: 1px solid #5a5040; display: block; }
.mbar { height: 3px; background: #300; margin-top: 1px; width: 40px; }
.mbar > div { height: 100%; }
#cmdcard { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); gap: 4px; }
.cmd { position: relative; width: 56px; height: 56px; border: 1px solid #6a5a3a; background: #20242c; cursor: pointer; overflow: hidden; }
.cmd.empty { border-color: #2a2820; background: #14161c; cursor: default; }
.cmd canvas { width: 54px; height: 54px; image-rendering: pixelated; display: block; }
.cmd:hover:not(.empty) { border-color: #f0d060; }
.cmd.disabled { opacity: 0.35; }
.cmd.poor canvas { filter: sepia(1) hue-rotate(-40deg) saturate(2) brightness(0.7); }
.cmd .hk { position: absolute; right: 2px; bottom: 1px; font-size: 10px; color: #f0d060; text-shadow: 1px 1px 0 #000; font-weight: bold; }
#msgs { position: absolute; left: 12px; top: 40px; pointer-events: none; max-width: 50%; }
.msg { background: rgba(0, 0, 0, 0.55); padding: 3px 8px; margin: 2px 0; font-size: 13px; color: #e8e8d8; border-left: 3px solid #8a7040; transition: opacity 1s; }
.msg.warn { color: #ffd060; border-color: #d0a040; }
.msg.alert { color: #ff7070; border-color: #d04040; }
.msg.chat { color: #a0e0ff; border-color: #4080c0; }
.msg.title { color: #f0d060; font-size: 16px; font-weight: bold; }
.msg.fade { opacity: 0; }
#objectives { position: absolute; right: 12px; top: 40px; background: rgba(0, 0, 0, 0.55); padding: 6px 10px; font-size: 13px; border-right: 3px solid #8a7040; pointer-events: none; }
#objectives .otitle { font-weight: bold; color: #f0d060; margin-bottom: 3px; }
#objectives .obj.done { color: #80e080; }
#tooltip { position: absolute; background: rgba(10, 12, 16, 0.96); border: 1px solid #8a7040; padding: 6px 10px; font-size: 12px; white-space: pre-line; max-width: 320px; z-index: 20; pointer-events: none; line-height: 1.4; }
#chatbox { position: absolute; left: 12px; bottom: 200px; }
#chatbox input { width: 400px; }
.overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay .panel button { display: block; margin: 8px auto; }
.volrow { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 8px; }
#endtitle.win { color: #80f080; text-shadow: 0 0 20px #208020; }
#endtitle.lose { color: #f06060; text-shadow: 0 0 20px #802020; }
#endstats table { margin: 10px auto; border-collapse: collapse; }
#endstats td, #endstats th { padding: 3px 10px; border-bottom: 1px solid #333; }
#endstats tr.dead td { opacity: 0.5; }
#endscreen .actions button { display: inline-block; }