:root{--wood: #3b2c1c;--wood-dark: #251a10;--wood-light: #5a4329;--brass: #b8964a;--brass-dark: #7a6230;--parch: #e8dcbc;--ink: #1e170e;--text: #efe3c2;--muted: #b5a684;--bad: #e0634c;--good: #9fd36a;--font: Georgia, "Palatino Linotype", "Book Antiqua", "Times New Roman", serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b0d08;color:var(--text);font:13px/1.35 var(--font);overflow:hidden;user-select:none}.hidden{display:none!important}button{font:inherit}#app,.screen{position:absolute;inset:0}.panel{background:linear-gradient(#3e2f1e,#2c2014);border:2px solid var(--brass-dark);box-shadow:inset 0 0 0 1px #000,inset 0 1px 0 1px #ffe6aa26,0 2px 6px #0009}.btn{display:inline-block;padding:4px 12px;color:var(--text);cursor:pointer;background:linear-gradient(#6a5133,#45331f);border:1px solid #1a120a;box-shadow:inset 0 1px #ffebbe59,inset 0 -1px #00000080;text-shadow:0 1px 0 #000}.btn:hover{background:linear-gradient(#7d6040,#533e26)}.btn:active{background:linear-gradient(#45331f,#5a4329)}.btn:disabled{color:#8a7d62;cursor:default;background:#3a2c1c}.btn.primary{border-color:var(--brass)}input[type=text],textarea,select{font:12px/1.3 Consolas,Courier New,monospace;color:var(--ink);background:var(--parch);border:1px solid #1a120a;padding:3px 5px}textarea{width:100%;resize:vertical}select,input[type=text]{font-family:var(--font);font-size:13px}h1,h2,h3{font-weight:400;margin:0 0 6px;color:#f5e7b8;text-shadow:0 1px 0 #000}a{color:#e8c86a}#screen-menu{display:flex;align-items:center;justify-content:center;background:#10120c}#menu-bg{position:absolute;inset:0;width:100%;height:100%}.menu-box{position:relative;width:min(620px,94vw);max-height:94vh;overflow:auto;padding:18px 22px}.menu-box.wide{width:min(800px,96vw)}.menu-box h1{font-size:30px;letter-spacing:1px;text-align:center;margin-bottom:0}.menu-box .sub{text-align:center;color:var(--muted);font-style:italic;margin-bottom:14px}.menu-col{display:flex;flex-direction:column;gap:6px;max-width:320px;margin:0 auto}.menu-col .btn{padding:7px 12px;font-size:15px}.row{display:flex;gap:8px;align-items:center;margin:5px 0;flex-wrap:wrap}.row label{min-width:120px;color:var(--muted)}.note{color:var(--muted);font-size:12px}.err{color:var(--bad)}.ok{color:var(--good)}.code-box{font-size:11px;height:90px;word-break:break-all}.code-panel{text-align:center;margin:6px 0 10px;padding:8px;border:1px solid #7a5c36;background:#00000040}.game-code{font:700 34px/1.2 ui-monospace,Consolas,monospace;letter-spacing:6px;color:#ffe9a8;margin:4px 0 6px;user-select:all}.code-input{font:700 20px ui-monospace,Consolas,monospace;letter-spacing:3px;width:9em;text-transform:uppercase}.btn.small{padding:1px 6px;min-width:0;font-size:11px}.lobby-table tr.seat-open td,.lobby-table tr.seat-closed td{opacity:.85}.text p{margin:6px 0}.text ul{margin:4px 0;padding-left:20px}.lobby-table{width:100%;border-collapse:collapse;margin:8px 0}.lobby-table select,.lobby-table input[type=text]{max-width:150px}.lobby-table td,.lobby-table th{border-bottom:1px solid #5a4329;padding:4px;text-align:left}.swatch{display:inline-block;width:14px;height:14px;border:1px solid #000;vertical-align:middle}#view{position:absolute;inset:0;display:block;cursor:default}#topbar{position:absolute;top:0;left:0;right:0;height:28px;display:flex;align-items:center;gap:2px;padding:0 6px;background:linear-gradient(#4a3824,#2a1e12);border-bottom:2px solid var(--brass-dark);box-shadow:0 2px 4px #0009;white-space:nowrap;overflow:hidden}.res{display:flex;align-items:center;gap:3px;padding:0 7px;border-right:1px solid #1a120a;box-shadow:1px 0 #ffe6aa1a;height:22px;cursor:help}.res img{width:18px;height:18px}.res b{font-weight:400;min-width:30px;color:#fff3cf}.res.low b{color:var(--bad)}.res:has(small.cap) b{min-width:0}.res small.cap{color:#a89878;font-size:10px;margin-left:-2px;min-width:32px}.res.near b{color:#ffc050}.res.full b,.res.full small.cap{color:var(--bad)}.res.goal{min-width:140px}.bar{position:relative;width:70px;height:8px;background:#1a120a;border:1px solid #000}.bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#e8c86a,#a07a2a)}.bar.enemy i{background:linear-gradient(#e07060,#8a2a20)}#topbar .spacer{flex:1}.resources,.top-actions{display:flex;align-items:center;gap:2px;min-width:0}.resources{flex:1;overflow:hidden}.top-actions{flex:none}.hud-toggle,#touch-controls{display:none}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.cmd{color:var(--text);padding:0}#topbar .btn{padding:1px 8px;font-size:12px}#clock{color:var(--muted);padding:0 8px;font-variant-numeric:tabular-nums}#bottom{position:absolute;left:0;right:0;bottom:0;height:150px;display:flex;gap:3px;padding:3px;background:linear-gradient(#2a1e12,#1a120a);border-top:2px solid var(--brass-dark)}#mini-wrap{width:248px;flex:none;display:flex;align-items:center;justify-content:center;padding:2px}#minimap{width:236px;height:118px;cursor:crosshair;image-rendering:auto}#selinfo{flex:1;min-width:200px;padding:6px 8px;display:flex;gap:10px;overflow:hidden}#cmdcard{width:246px;flex:none;display:grid;grid-template-columns:repeat(4,56px);grid-template-rows:repeat(3,44px);gap:3px;padding:4px;justify-content:center;align-content:center}.portrait{width:68px;height:68px;flex:none;border:2px solid var(--brass-dark);background:#2a2216;image-rendering:auto}.selmain{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.selmain .name{font-size:15px;color:#f5e7b8}.selmain .stat{color:var(--muted);font-size:12px}.hp{width:140px;height:9px;background:#1a120a;border:1px solid #000;position:relative}.hp i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#8fd060,#4a8a2a)}.hp.mid i{background:linear-gradient(#e8c050,#a07a20)}.hp.low i{background:linear-gradient(#e86a50,#902a20)}.queue{display:flex;gap:3px;margin-top:3px}.queue .q{width:34px;height:34px;border:1px solid var(--brass-dark);position:relative;background:#2a2216;cursor:pointer}.queue .q img{width:32px;height:32px}.queue .q .p{position:absolute;left:0;bottom:0;height:3px;background:var(--good)}.multi{display:flex;flex-wrap:wrap;gap:3px;align-content:flex-start;overflow:hidden}.multi .m{width:34px;height:38px;border:1px solid #5a4329;background:#2a2216;position:relative;cursor:pointer}.multi .m img{width:32px;height:32px}.multi .m .h{position:absolute;left:1px;right:1px;bottom:1px;height:3px;background:#1a120a}.multi .m .h i{display:block;height:100%;background:var(--good)}.cmd{position:relative;width:56px;height:44px;border:1px solid #1a120a;cursor:pointer;background:linear-gradient(#5a4329,#3a2a1a);box-shadow:inset 0 1px #ffebbe4d;overflow:hidden}.cmd img{position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%)}.cmd .k{position:absolute;right:2px;top:0;font-size:11px;color:#f5e7b8;text-shadow:0 0 2px #000,0 0 2px #000}.cmd .lbl{position:absolute;left:0;right:0;bottom:0;font-size:10px;text-align:center;background:#0000008c;line-height:12px;white-space:nowrap;overflow:hidden}.cmd .compact{display:none}.cmd:hover{border-color:var(--brass)}.cmd.na{filter:grayscale(.9) brightness(.6)}.cmd.poor:after{content:"";position:absolute;inset:0;background:#a01e1452}.cmd.on{border-color:var(--good);box-shadow:inset 0 0 0 2px var(--good)}.cmd .glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:#f5e7b8;text-shadow:0 1px 0 #000}#tooltip{position:absolute;z-index:30;max-width:320px;padding:6px 8px;background:#efe2c0;color:var(--ink);border:2px solid #5a4329;box-shadow:2px 3px 8px #0009;font-size:12px;pointer-events:none}#tooltip h4{margin:0 0 3px;font-size:14px;font-weight:700}#tooltip .c-bad{color:#a8281a;font-weight:700}#tooltip .row2{margin:2px 0}#msglog{position:absolute;left:8px;bottom:160px;width:min(560px,60vw);display:flex;flex-direction:column;gap:2px;pointer-events:none}#msglog div{color:#fff3cf;text-shadow:0 1px 2px #000,0 0 3px #000;font-size:13px;transition:opacity 1s}#msglog .err{color:#ff9a80}#msglog .alert{color:#ffd060}#msglog .good{color:#c8f090}#tutorial{position:absolute;right:8px;top:36px;width:270px;padding:8px 10px;font-size:12px}#tutorial h3{font-size:14px;display:flex;justify-content:space-between;align-items:center}#tutorial ol{margin:4px 0;padding-left:18px}#tutorial li{margin:3px 0;color:var(--muted)}#tutorial li.cur{color:#fff3cf}#tutorial li.done{color:var(--good);text-decoration:line-through}#dialog{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#00000073}#dialog .panel{width:min(560px,94vw);max-height:88vh;overflow:auto;padding:14px 18px}#dialog table{border-collapse:collapse;width:100%}#dialog td{padding:2px 6px;border-bottom:1px solid #4a3824;vertical-align:top}#dialog .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}#perf{position:absolute;right:8px;top:34px;font:11px Consolas,monospace;color:#cfe;background:#0009;padding:3px 6px;pointer-events:none}@media(max-width:820px){#mini-wrap{width:170px}#minimap{width:160px;height:80px}#cmdcard{width:200px;grid-template-columns:repeat(4,46px)}.cmd{width:46px}}.faction-card{display:flex;gap:8px;align-items:flex-start;margin:4px 0 8px;padding:6px;background:#00000040;border:1px solid #5a4329}.faction-card img{width:64px;height:64px;border:1px solid var(--brass-dark);flex:none}.faction-card ul{margin:4px 0 0;padding-left:18px;font-size:12px}.faction-card i{color:#e8c86a}.map-card{margin:4px 0 8px;padding:6px;background:#00000040;border:1px solid #5a4329}#terrainhint{position:absolute;z-index:25;pointer-events:none;padding:2px 6px;font-size:11px;color:#efe3c2;background:#140e089e;border:1px solid rgba(184,150,74,.35);border-radius:2px;white-space:nowrap;text-shadow:0 1px 0 #000;animation:hintIn .25s ease-out}@keyframes hintIn{0%{opacity:0}to{opacity:1}}#topbar .res.idle{cursor:pointer}#topbar .res.idle.alert b{color:#ffd060}#topbar .res[data-r=brarup]{cursor:pointer}html,body,#app{overscroll-behavior:none}#app{height:100dvh}#view,#minimap{touch-action:none;-webkit-touch-callout:none}button{touch-action:manipulation}.menu-box,#dialog .panel{max-height:90dvh;overscroll-behavior:contain}.menu-box{-webkit-overflow-scrolling:touch}input,textarea{user-select:text}@media(pointer:coarse),(max-width:820px){:root{--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--hud-height: 178px;--touch-height: 68px;--top-height: calc(78px + var(--safe-top))}body{font-size:14px}.btn,.btn.small{min-height:44px;min-width:44px;padding:7px 10px;font-size:14px}input[type=text],textarea,select{font-size:16px;min-height:44px;max-width:100%}input[type=checkbox],input[type=radio]{width:20px;height:20px;vertical-align:middle}.row label{min-width:0}.row{gap:6px}.menu-box{width:calc(100% - 16px - var(--safe-left) - var(--safe-right));padding:14px;max-height:calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom))}.menu-box.wide{width:calc(100% - 16px - var(--safe-left) - var(--safe-right));max-width:800px}.menu-box h1{font-size:clamp(23px,6vw,30px)}.menu-box .row{align-items:stretch}.menu-box .row>label:first-child:not(:last-child){flex:0 0 100%}.menu-box .row>select,.menu-box .row>input[type=text]{min-width:0;width:100%}.menu-box .menu-col{max-width:360px}.lobby-table{display:block;overflow-x:auto}.lobby-table input[type=text],.lobby-table select{width:120px}.code-box{min-height:100px}#topbar{height:var(--top-height);padding:var(--safe-top) var(--safe-right) 0 var(--safe-left);display:grid;grid-template-rows:32px 44px;gap:0;overflow:visible}.resources{overflow-x:auto;height:32px;scrollbar-width:none;overscroll-behavior:contain}.resources::-webkit-scrollbar{display:none}.res{flex:none;height:30px;padding:0 5px}.res b{min-width:0;font-variant-numeric:tabular-nums}.res.goal{min-width:0}.res.goal .bar{display:none}.res small.cap{font-size:10px;min-width:0}.top-actions{justify-content:flex-end;padding:0 4px;gap:3px}#topbar .btn{min-height:44px;padding:4px 7px;font-size:13px}#topbar [data-act=tut],#topbar [data-act=mute]{display:none}#clock{margin-right:auto;padding:0 4px}#netinfo{max-width:75px;overflow:hidden;font-size:10px}.hud-toggle{display:inline-block}#bottom{height:calc(var(--hud-height) + var(--safe-bottom));padding:3px calc(3px + var(--safe-right)) calc(3px + var(--safe-bottom)) calc(3px + var(--safe-left));display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:58px 1fr;gap:3px}#mini-wrap{width:auto;padding:2px;min-width:0}#minimap{width:96px;height:48px;max-width:100%}#selinfo{min-width:0;padding:4px;gap:5px;overflow:auto;overscroll-behavior:contain}.portrait{width:44px;height:44px}.selmain .name{font-size:14px}.selmain .stat{font-size:11px}.hp{width:min(140px,100%);min-height:5px}.multi{overflow:auto}.multi .m,.queue .q{width:44px;min-height:44px}#cmdcard{grid-column:1 / -1;width:auto;min-width:0;padding:3px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(44px,1fr));gap:3px}.cmd{width:100%;height:100%;min-height:44px}.cmd .k{display:none}.cmd .lbl{font-size:10px;line-height:12px;white-space:normal;overflow-wrap:anywhere;max-height:24px}.cmd .full{display:none}.cmd .compact{display:inline}.cmd img{width:32px;height:32px;top:34%}.cmd{-webkit-touch-callout:none}#touch-controls{position:absolute;display:flex;flex-direction:column;justify-content:center;left:0;right:0;bottom:calc(var(--hud-height) + var(--safe-bottom));height:var(--touch-height);padding:3px calc(4px + var(--safe-right)) 2px calc(4px + var(--safe-left));background:#251a10;border-top:1px solid var(--brass-dark)}.touch-buttons{display:flex;gap:3px}.touch-buttons .btn{flex:1;padding:4px 2px;min-width:44px}.touch-buttons .btn[aria-pressed=true]{border-color:var(--good);box-shadow:inset 0 0 0 1px var(--good);color:#d6f3b7}#touch-hint{font-size:10px;color:var(--muted);line-height:16px;text-align:center;white-space:nowrap;overflow:hidden}.hud-collapsed #bottom{display:none}.hud-collapsed #touch-controls{bottom:0;height:calc(var(--touch-height) + var(--safe-bottom));padding-bottom:calc(2px + var(--safe-bottom))}#msglog{bottom:calc(var(--hud-height) + var(--touch-height) + var(--safe-bottom) + 6px);left:calc(6px + var(--safe-left));width:calc(100% - 12px - var(--safe-left) - var(--safe-right));max-height:68px;overflow:hidden}#msglog div{font-size:11px}.hud-collapsed #msglog{bottom:calc(var(--touch-height) + var(--safe-bottom) + 6px)}#tutorial{top:calc(var(--top-height) + 5px);right:calc(5px + var(--safe-right));width:min(270px,calc(100% - 10px));max-height:min(180px,35dvh);overflow:auto;padding:5px 8px}#tutorial h3{margin:0}#tutorial .btn{padding:3px}#tooltip{max-width:calc(100vw - 12px);max-height:45dvh;overflow:auto;pointer-events:auto}#dialog{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}#dialog .panel{padding:12px;max-height:calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom))}#dialog .menu-col{width:100%}#perf{top:calc(var(--top-height) + 4px);max-width:80vw}}@media(orientation:landscape)and (pointer:coarse),(orientation:landscape)and (max-width:820px){:root{--hud-height: 106px;--top-height: calc(66px + var(--safe-top))}#topbar{grid-template-rows:22px 42px}.resources,.res{height:22px}#bottom{grid-template-columns:100px minmax(80px,1fr) minmax(288px,46%);grid-template-rows:1fr}#cmdcard{grid-column:auto}#tutorial{max-height:110px}.menu-box:not(.wide){max-width:620px}.menu-box .row>label:first-child:not(:last-child){flex:0 0 120px}.menu-box .row>select,.menu-box .row>input[type=text]{flex:1;width:auto}}@media(orientation:portrait)and (max-width:359px){:root{--hud-height: 166px}#bottom{grid-template-columns:86px minmax(0,1fr)}#minimap{width:80px;height:40px}#cmdcard{gap:2px}}
