/* Original portrait / chat / 3-by-4 menu / raised status layout, with legible surfaces. */
#game-screen{--rail:calc(208px * var(--s));--dock:calc(168px * var(--s))}
.command-deck{grid-template-columns:calc(103px * var(--s)) minmax(0,1fr) calc(144px * var(--s)) var(--rail)}
.chat-shell{background:#d8ccb1}
.chat-shell>.hud-skin{height:calc(100% - 26px)}
.chat-shell .communications{top:calc(14px * var(--s));right:calc(16px * var(--s));bottom:38px}
#game-screen .communications #chat-log{font-size:clamp(14px,calc(11px * var(--s)),16px);line-height:1.65;color:#292920;padding:1px 5px;scrollbar-color:#837352 #e9dfca}
#game-screen .communications #chat-log .system{color:#37372e}
#game-screen .communications #chat-log .time{color:#615c4f;font-size:12px;font-variant-numeric:tabular-nums}
#game-screen .communications #chat-log>div{margin:0 0 4px}
.original-footer{height:30px;background:#514939;border-top:1px solid #aa9570;gap:1px;padding:2px}
#game-screen .original-footer button{font-size:12px;color:#f9f3e5;background:#544a39;border:1px solid #75664e;padding:4px 8px;width:auto;min-width:58px;font-weight:500}
#game-screen .original-footer #chat-open{font-size:13px;min-width:60px}
#game-screen .original-footer #layout-options{width:30px;min-width:30px}
#game-screen .communications #chat-input{color:#25271f;background:#faf5e8;border:1px solid #81745b;height:28px;font-size:14px}
#game-screen .communications #chat-input::placeholder{color:#666456}
.communications[data-compose=open] .chat{padding-top:26px;padding-bottom:32px}
.communications[data-compose=open] .chat>header{height:23px;width:min(100%,300px)}
.communications #chat-form button{min-height:28px}
.control-bank{padding:calc(9px * var(--s)) calc(8px * var(--s));background:linear-gradient(110deg,#70634c,#4c4537);border-left:1px solid #bdab7f;border-right:1px solid #2e2a22}
.mainnav{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,calc(34px * var(--s)));gap:calc(5px * var(--s));width:100%}
#game-screen .mainnav button{width:100%;height:100%;gap:1px;border:1px solid #b4a27b;border-bottom-color:#403929;background:linear-gradient(#f0e6cc,#c3b18a);box-shadow:inset 0 0 0 1px #ffffff35;border-radius:2px}
#game-screen .mainnav button canvas{width:calc(20px * var(--s));height:calc(20px * var(--s));max-height:calc(100% - 13px);object-fit:contain}
#game-screen .mainnav button span{display:block;font-size:clamp(10px,calc(8.5px * var(--s)),12px);font-weight:650;line-height:1.15;color:#29271e;text-shadow:none;white-space:nowrap}
#game-screen .mainnav button.active{background:linear-gradient(#f7dfa3,#d2ad62);border-color:#ffe6a4;box-shadow:0 0 0 1px #e4c584,inset 0 -3px #836125}
#game-screen .mainnav button:hover{filter:brightness(1.06)}
.vitals{--panel-inset:clamp(14px,calc(12px * var(--s)),18px);height:max(318px,calc(250px * var(--s)));grid-template-rows:calc(34px * var(--s)) minmax(0,1fr);padding:0 var(--panel-inset) 12px}
.vitals .status-body{top:calc(34px * var(--s));height:calc(100% - 34px * var(--s))}
.vitals>header{height:calc(34px * var(--s));margin:0 calc(-1 * var(--panel-inset));display:flex;align-items:center;padding:0 calc(15px * var(--s));background:linear-gradient(#574d39,#332f26);border:2px solid #b49a66;border-bottom:1px solid #d5bf8b;box-shadow:inset 0 0 0 2px #383326;clip-path:polygon(0 10px,10px 0,100% 0,100% 100%,0 100%)}
.vitals>header #status-heading-art{display:none}
#status-heading{color:#faf1d9;font-weight:650;font-size:clamp(16px,calc(14px * var(--s)),20px);letter-spacing:.03em}
.side-pane{padding:22px 8px 0;overflow:hidden}
#game-screen .side-pane .vital{grid-template-columns:calc(22px * var(--s)) minmax(0,1fr);gap:8px;border-bottom:1px solid #aa9d7d70;padding:2px 0;min-width:0}
#game-screen .vital>canvas,#game-screen .vital>button{width:calc(22px * var(--s));height:calc(22px * var(--s))}
#game-screen .vital .metric,#game-screen .side-pane #city-stats .metric{display:flex;flex-direction:column;min-width:0;gap:2px;justify-content:center}
#game-screen .vital .values,#game-screen .side-pane #city-stats .values{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-width:0;gap:6px;line-height:1.25;font-size:clamp(14px,calc(11px * var(--s)),16px);color:#27291f;white-space:nowrap}
#game-screen .vital .stat-name{color:#444536;font-size:clamp(13px,calc(10px * var(--s)),15px);font-weight:500}
#game-screen .vital .values b{font-weight:650;white-space:nowrap;color:#22261e;text-align:right;font-variant-numeric:tabular-nums}
#game-screen .vital .metric-detail{font-size:11px;color:#575445;line-height:1.1;text-align:right}
#game-screen .side-pane .city-card{width:100%;min-width:0;overflow:hidden}
#game-screen .side-pane #city-stats{width:100%;min-width:0}
#game-screen .vital progress,#game-screen .side-pane #city-stats progress{height:3px;min-height:3px;display:block;appearance:none;border:0;background:#b8ad92;order:2}
#game-screen .vital progress::-webkit-progress-bar{background:#c2b89f}
#game-screen .vital progress::-webkit-progress-value{background:#71664a}
#game-screen .vital>button.active{outline:2px solid #947528;outline-offset:0}
#game-screen .side-pane .city-card>header{height:36px;min-height:36px;align-items:center;gap:6px;flex-wrap:nowrap;margin:0 0 5px;padding:0 0 7px;border-bottom:1px solid #b6a98a}
#game-screen .side-pane .city-card h2{font-size:clamp(20px,calc(15px * var(--s)),22px);color:#20271d;font-weight:750;line-height:1.3;white-space:nowrap;letter-spacing:0}
#game-screen .side-pane .city-card header small{color:#454331;font-size:14px;line-height:1.3;font-weight:550;padding-left:6px;border-left:1px solid #aa9c79;white-space:nowrap}
#game-screen .side-pane .city-card #city-stage{display:inline-block;margin-left:auto;font-size:12px;line-height:1.5;color:#4f482e;font-weight:650;white-space:nowrap}
#game-screen .side-pane #city-actions{height:30px;gap:4px;margin-top:7px;flex-wrap:nowrap}
#game-screen .side-pane #city-actions button{font-size:12px;color:#fff5df;min-height:28px;padding:2px 4px;background:#554b37;border:1px solid #807053}
#game-screen .side-pane #city-actions button.primary{background:#64522e}
#game-screen .battle-tools{bottom:calc(94px * var(--s));right:12px;max-width:calc(100% - 24px);background:#302f27f5;border:1px solid #b19a63;padding:9px 11px;gap:8px;flex-wrap:wrap;box-shadow:0 2px 10px #0005}
#game-screen .battle-tools button{font-size:13px;color:#fff3d7;min-height:32px;background:#524b39;border:1px solid #968358;padding:5px 9px}
#game-screen .battle-tools #auto.active{background:#877039;border-color:#edcf88}
#auto-order{color:#eee9d8;font-size:13px;flex-basis:100%;line-height:1.4;max-width:310px}
#auto-order:empty{display:none}
#panel{background:#f0eadb;color:#252820;border:1px solid #b8a67e;box-shadow:0 18px 80px #080b07b0;font-size:14px}
#panel .panel-header{background:linear-gradient(110deg,#494233,#2f3028);border-bottom:2px solid #b99c60;padding:17px 22px}
#panel .panel-header h2{color:#fff7e1;font-size:23px;font-weight:650}
#panel .panel-header .eyebrow{color:#d4c9ad;font-size:12px}
#panel #close-panel{width:34px;height:34px;padding:0;border:1px solid #988767;background:#4f4839;color:#fff4dc}
#panel-content{padding:22px;color:#292c23}
#panel-content h3{font-size:16px;color:#30352a;font-weight:650;margin-bottom:10px}
#panel-content p,#panel-content li,#panel-content .stat-row,#panel-content .stat-row span{color:#424536;font-size:14px;line-height:1.6}
#panel-content .stat-row b,#panel-content .stat-row b span{color:#242b22;font-weight:650;font-variant-numeric:tabular-nums}
#panel-content .stat-row{padding:9px 0;border-bottom:1px solid #d6cfbc;gap:12px}
#panel-content .info-box{background:#faf6eb;border:1px solid #d7ccb2;padding:17px;margin:0}
#panel-content .muted,#panel-content small{color:#62634f}
#panel-content button{color:#fff9e7;background:#575039;border:1px solid #83734e;padding:8px 13px;font-size:14px;font-weight:600}
#panel-content button:disabled{opacity:1;background:#dfdacd;color:#727366;border-color:#c9c3b2}
#panel-content button:disabled small{color:#727366}
#panel-content button:disabled{filter:none}
.general-summary{display:grid;grid-template-columns:1fr 1fr 1.25fr;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #cabd9c;gap:16px}
.general-summary>div{display:grid;gap:5px}
.general-summary span{color:#5e614f;font-size:13px}
.general-summary strong{font-size:21px;color:#313828;font-weight:650;font-variant-numeric:tabular-nums}
.general-summary strong small{font-size:13px;font-weight:400}
.general-details{gap:18px}
#panel-content .general-details .muted{font-size:12px;margin-top:12px;line-height:1.65}
.growth-line{display:flex;justify-content:space-between;gap:15px;font-size:13px;color:#62614e;padding-top:9px}
.growth-line b{font-weight:500;font-variant-numeric:tabular-nums}
.ability-upgrade{display:flex;gap:10px;align-items:center;border-top:1px solid #cfc3a6;border-bottom:1px solid #cfc3a6;padding:18px 0;margin:20px 0}
.ability-upgrade>div{flex:1}
#panel-content .ability-upgrade h3{margin-bottom:3px}
#panel-content .ability-upgrade p{font-size:12px;color:#60614d}
#panel-content .ability-upgrade button{min-width:130px;text-align:left;line-height:1.5}
#panel-content .ability-upgrade button small{display:block;font-size:12px;font-weight:400;color:#e6dcc1}
#panel-content .ability-upgrade button:disabled small{color:#5f6255}
#panel-content .general-reports h3{font-size:14px;margin-bottom:8px}
#panel-content .report-list{list-style:none;padding:0;margin:0;max-height:132px;overflow:auto;scrollbar-width:thin}
#panel-content .report-list li{padding:4px 0;font-size:13px;display:flex;gap:12px;line-height:1.5}
.report-list time{color:#686955;font-size:12px;font-variant-numeric:tabular-nums;flex:none}
#game-tooltip{position:fixed;inset:auto;margin:0;width:max-content;max-width:min(260px,calc(100vw - 20px));padding:8px 10px;border:1px solid #a18d66;border-radius:3px;background:#292d26fa;color:#f8f2df;box-shadow:0 3px 10px #0005;font:400 13px/1.45 var(--font-ui);pointer-events:none;z-index:1000;overflow-wrap:anywhere}
#game-tooltip strong{display:flex;align-items:center;gap:12px;justify-content:space-between;font-size:13px;font-weight:650;color:#ffedbf}
#game-tooltip p{font-size:13px;color:#e9e7da;line-height:1.45;margin:4px 0 0}
#game-tooltip kbd{font:600 12px var(--font-ui);padding:1px 6px;background:#514d3a;border:1px solid #8c7b54;border-radius:2px;color:#fff2cf}
#game-tooltip .tooltip-reason{color:#ffc49e;border-top:1px solid #81704b;padding-top:4px;margin-top:5px}
@media(max-width:900px){#game-screen{--rail:220px}.command-deck{grid-template-columns:103px minmax(0,1fr) 144px var(--rail)}.general-summary{gap:8px}.general-summary strong{font-size:18px}.original-footer button{min-width:49px!important;padding:3px 5px!important}.original-footer #layout-options{min-width:26px!important}.ability-upgrade{flex-wrap:wrap}.ability-upgrade>div{flex-basis:100%}}
/* Action surfaces: original rail and command order, with explicit verbs. */
#game-screen .vitals{height:max(338px,calc(264px * var(--s)))}
#game-screen .side-pane{padding:12px 6px 0}
#game-screen .side-pane .vital{display:grid;grid-template-columns:22px minmax(0,1fr) 46px;gap:6px;align-items:center;width:100%;min-width:0;min-height:0;margin:0;padding:4px 5px;text-align:left;border:1px solid transparent;border-bottom-color:#b0a18275;border-radius:1px;color:#252920;font-family:var(--font-ui);box-sizing:border-box}
#game-screen .side-pane button.vital.action-row{cursor:pointer;background:linear-gradient(180deg,#f7efdb,#e0d3b3);border:1px solid #a5946f;border-bottom-color:#7d7156;box-shadow:inset 0 1px #fff9e7,inset 0 -1px #c2b18a,0 1px 0 #73634a35;transition:background .12s,border-color .12s;appearance:none}
#game-screen .side-pane .vital>canvas{width:22px;height:22px;opacity:.86}
#game-screen .side-pane .vital .metric{display:flex;flex-direction:column;gap:2px;min-width:0;width:100%}
#game-screen .side-pane .vital .values{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:14px;line-height:1.25;min-width:0;text-shadow:none}
#game-screen .side-pane .vital .stat-name{font-size:13px;font-weight:550;white-space:nowrap;color:#363b2d}
#game-screen .side-pane .vital .values b{font-size:14px;font-weight:650;color:#22281e}
#game-screen .side-pane .vital .metric-detail{font-size:11px;line-height:1.15;color:#665d48;text-align:left;white-space:nowrap}
#game-screen .side-pane .vital progress{height:2px;min-height:2px;order:3;background:#c6b999;margin:0;border:0}
#game-screen .side-pane .vital progress::-webkit-progress-bar{background:#c6b999}
#game-screen .side-pane .vital progress::-webkit-progress-value{background:#81744f}
#game-screen .side-pane .vital .row-action{display:flex;align-items:center;justify-content:center;align-self:center;height:27px;min-width:0;border:1px solid #716344;border-top-color:#b6a272;border-bottom-color:#352f23;background:linear-gradient(#675b42,#494334);box-shadow:inset 0 1px #a896694a,0 1px 1px #5b50303d;color:#fff4d6;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;border-radius:2px;text-shadow:0 1px #252319}
#game-screen .side-pane .vital .row-action.passive{visibility:hidden}
#game-screen .side-pane button.vital.action-row:hover:not(:disabled){background:linear-gradient(#fff7e4,#eaddbd);border-color:#7d693d}
#game-screen .side-pane button.vital.action-row:active:not(:disabled){background:#dbcca9;box-shadow:inset 0 2px 3px #5b503044}
#game-screen .side-pane button.vital.action-row:active:not(:disabled) .row-action{box-shadow:inset 0 2px 3px #28251899;transform:translateY(1px)}
#game-screen .side-pane button.vital.action-row.active{background:linear-gradient(#f1dfaf,#e2c98f);border-color:#967638;box-shadow:inset 3px 0 #89682d,inset 0 1px #fff0c8}
#game-screen .side-pane button.vital.active .row-action{background:linear-gradient(#775a30,#533e23);border-color:#ad8a45;color:#fff1c9}
#game-screen .side-pane button.vital.can-advance{border-color:#a18341;background:linear-gradient(#fcf1d1,#e6d4a7)}
#game-screen .side-pane button.vital.can-advance .row-action{background:linear-gradient(#846a36,#5b4927);border-color:#b79954}
#game-screen .side-pane button.vital:disabled{opacity:1;cursor:default;filter:none;background:#e0d8c5;border-color:#b9af97;box-shadow:inset 0 1px #f6efdc80}
#game-screen .side-pane button.vital:disabled .row-action{background:#c9c0aa;border-color:#aaa087;box-shadow:none;color:#655f50;text-shadow:none}
#game-screen .side-pane button.vital:disabled .stat-name,#game-screen .side-pane button.vital:disabled .values b{color:#57594c}
#game-screen .side-pane button.vital:focus-visible,#game-screen .side-pane #skill-grid button:focus-visible{outline:2px solid #594523;outline-offset:2px}
#game-screen .side-pane #city-stats,#game-screen .side-pane #vital-stats{gap:3px;grid-template-rows:repeat(6,minmax(0,1fr))}
#game-screen .side-pane #city-stats .vital{padding-top:2px;padding-bottom:2px}
#game-screen .side-pane #city-stats .row-action{height:25px}
#game-screen .side-pane #city-stats .metric{gap:2px}
#game-screen .side-pane #city-stats .values{font-size:14px;line-height:1.25}
#game-screen .side-pane .commands{height:100%;padding:0;display:grid;grid-template-rows:minmax(0,1fr) 22px;gap:7px}
#game-screen .side-pane .commands.hidden{display:none}
#game-screen .side-pane #skill-grid{width:100%;height:100%;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:5px}
#game-screen .side-pane #skill-grid button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;width:100%;height:100%;min-height:0;padding:12px 2px 5px;border:1px solid #b19a67;border-right-color:#6b6048;border-bottom:2px solid #37382e;border-radius:2px;background:linear-gradient(155deg,#55594a,#303c34);box-shadow:inset 0 1px 0 #d8ca9c45,inset 1px 0 0 #d8ca9c20,0 1px 1px #2c2b2240;cursor:pointer}
#game-screen .side-pane #skill-grid button canvas{display:block;flex:1;min-height:16px;max-height:29px;width:28px;height:28px;object-fit:contain;image-rendering:auto}
#game-screen .side-pane #skill-grid button .skill-name{display:block;flex:none;font:600 14px/1.2 var(--font-ui);letter-spacing:-.02em;color:#f5ecd5;text-shadow:0 1px #101e18;white-space:nowrap}
#game-screen .side-pane #skill-grid kbd{position:absolute;left:4px;top:3px;padding:0;border:0;background:none;font:500 10px/1 var(--font-data);color:#d4c194;text-shadow:none}
#game-screen .side-pane #skill-grid button:hover{background:linear-gradient(155deg,#666b55,#3c4b3f);border-color:#d4bc82}
#game-screen .side-pane #skill-grid button:active{box-shadow:inset 0 2px 5px #10181099;transform:translateY(1px)}
#game-screen .side-pane #skill-grid button.active{background:linear-gradient(#756443,#534b33);border-color:#e6c680;border-bottom-color:#7f622d;box-shadow:inset 0 0 0 1px #d8b569,inset 0 -3px #b08a43}
#game-screen .side-pane #selected-skill{display:block;min-width:0;margin:0;padding:4px 0 0;border-top:1px solid #b8aa8b;font:500 12px/1.2 var(--font-ui);color:#59533f;text-align:center;white-space:nowrap}
@media(max-width:900px){#game-screen .side-pane .vital{grid-template-columns:20px minmax(0,1fr) 43px;gap:4px;padding-left:3px;padding-right:3px}#game-screen .side-pane .vital>canvas{width:20px;height:20px}#game-screen .side-pane .vital .row-action{font-size:12px}#game-screen .side-pane .vital .stat-name{font-size:12px}#game-screen .side-pane .vital .values b{font-size:13px}#game-screen .side-pane .vital .metric-detail{font-size:10px}#game-screen .side-pane #skill-grid{gap:4px}#game-screen .side-pane #skill-grid button .skill-name{font-size:12px}#game-screen .side-pane #skill-grid button canvas{width:25px;max-height:26px}}
#game-screen .side-pane #city-stats .vital>canvas{width:22px;height:22px}
#game-screen .vitals:has(.side-pane[data-pane=battle]){height:max(362px,calc(280px * var(--s)))}
#game-screen .side-pane #skill-grid button{padding-top:8px;padding-bottom:4px}
#game-screen .side-pane #skill-grid button canvas{width:30px;max-height:30px}
@media(max-width:900px){#game-screen .side-pane #city-stats .vital>canvas{width:20px;height:20px}#game-screen .side-pane #skill-grid button canvas{width:27px;max-height:27px}}
#game-screen .side-pane .row-state{font:500 12px/1.2 var(--font-ui);color:#716c5a;text-align:center}
#game-screen .side-pane .vital[data-stat=pexp]{padding-top:1px;padding-bottom:1px}
#game-screen .side-pane .vital[data-stat=pexp] .values{flex-wrap:wrap;row-gap:0}

/* Small patch notice stays above dialog panels without taking keyboard focus. */
#patch-notice{position:fixed;inset:auto 14px 14px auto;margin:0;box-sizing:border-box;width:min(320px,calc(100vw - 28px));padding:14px 16px;background:#292a22;color:#f7edcf;border:1px solid #c0a05f;box-shadow:0 4px 18px #0008;border-radius:3px;z-index:10000;font:14px/1.5 var(--font-ui,sans-serif);text-align:left}
#patch-notice strong{display:block;font-size:15px;font-weight:650;color:#ffe3a0}#patch-notice p{margin:4px 0 10px;color:#eee7d4;font-size:13px}#patch-notice button{padding:3px 10px;background:#554a32;border:1px solid #ac9159;color:#fff1ce;font:inherit;cursor:pointer}#patch-notice button:disabled{opacity:.6;cursor:wait}#patch-notice::backdrop{background:transparent;pointer-events:none}

/* Keep navigation discoverable and battle actions above the measured panel edge. */
#game-screen .map-tools{opacity:1;top:10px;bottom:auto;left:10px;display:flex;flex-wrap:wrap;gap:4px;max-width:calc(100% - 20px);z-index:4}
#game-screen .map-tools button{font:600 13px/1.2 var(--font-ui);min-height:30px;padding:5px 8px;color:#fff5dc;background:#383b2feb;border:1px solid #b09a69}
#game-screen .battle-tools{width:320px;max-width:calc(100% - 24px);z-index:4}
#game-screen .battle-tools #retreat{background:#705d32;border-color:#cfb271;color:#fff9e6}

#game-screen #travel-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;pointer-events:auto;padding:9px 12px}
#travel-bar>span{font-size:14px;line-height:1.4}#travel-bar>progress{grid-column:1/-1;width:100%}#travel-bar [data-turn-back]{font:600 13px/1.2 var(--font-ui);padding:6px 12px;background:#5e5033;border:1px solid #d5b879;color:#fff4d8}
#game-screen[data-chat-position=bottom] #travel-bar{left:calc((100% - var(--rail))/2);max-width:calc(100% - var(--rail) - 28px)}
#game-screen[data-chat-position=right] #travel-bar{left:50%;max-width:calc(100% - 28px)}

.weather-indicator{position:absolute;top:12px;right:16px;z-index:3;pointer-events:none;padding:7px 11px;border:1px solid #bba976;background:#292d28e8;color:#fff4d5;font:600 14px/1.35 "Pretendard Variable",sans-serif;box-shadow:0 2px 6px #0006}.weather-indicator[data-weather="rain"]{background:#253746ed;border-color:#90b4c9;color:#eefaff}.weather-indicator[data-weather="rain"]::before{content:"☂ ";font-size:19px;vertical-align:-1px}@media(max-width:800px){.weather-indicator{top:50px;right:8px;font-size:12px}}

#game-screen #travel-bar,#game-screen[data-chat-position=bottom] #travel-bar,#game-screen[data-chat-position=right] #travel-bar{display:block;left:10px;bottom:38px;transform:none;width:auto;max-width:calc(100% - 24px);padding:0;border:0;background:none;box-shadow:none;text-align:left;pointer-events:none;color:#ffed9c;text-shadow:0 1px 3px #172015,1px 0 2px #172015}#travel-bar>span{font-size:13px;font-weight:600}
