:root{--game-font:SRWUI,'Noto Sans',Arial,sans-serif;--rom-text:#e0e1df}
html,body{font-family:var(--game-font);-webkit-text-size-adjust:100%;text-size-adjust:100%}
#app,#app button,#app input,#app select,#app textarea{font-family:var(--game-font);letter-spacing:0}
#app,#app *{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
#app{user-select:none;-webkit-user-select:none}
#app input,#app textarea{user-select:text;-webkit-user-select:text}
#dialogue{cursor:pointer;touch-action:manipulation}
.dialogtext{font-size:clamp(15px,2.45vh,23px);line-height:1.4;letter-spacing:0;color:#e0e1df;overflow:hidden}
.speaker{font-size:clamp(14px,2.25vh,21px);font-weight:700;color:#d8d6b9;margin-bottom:4px}
.dialoghint{font-size:clamp(11px,1.7vh,15px)}
#chapter{font-size:clamp(12px,1.8vh,16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chapter-title{letter-spacing:.04em}.chapter-title strong{font-weight:400;letter-spacing:0}
.rom-number{font-variant-numeric:tabular-nums}.rom-window,#dialogue,#panel{line-height:1.3}
#orientation-prompt{display:none}
.deployment-board{top:8px;left:50%;transform:translateX(-50%);width:min(96%,1050px);max-height:calc(100% - 16px);padding:3px;font-size:clamp(13px,2.7vh,21px)}
.deployment-header{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3px;margin-bottom:5px;align-items:stretch}
.deployment-header>span{padding:4px 5px;border:2px solid #55576d;text-align:center;white-space:nowrap}
.deployment-units{display:grid;grid-template-columns:1fr;gap:0}
.deployment-units .deployment-row{display:grid;grid-template-columns:10px minmax(0,1.05fr) minmax(0,1.1fr) 55px;align-items:center;gap:7px;min-height:29px;padding:3px 5px;line-height:1.25;font-size:inherit}
.deployment-row>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deployment-row>span:last-child{text-align:right}
.deployment-mark{width:8px;height:8px;background:#751d26}.deployment-mark.picked{background:#e99523}
.deployment-confirm{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;pointer-events:auto;background:#07081433}
.deployment-confirm>.rom-window:first-child{padding:12px 20px;font-size:clamp(15px,3vh,23px)}
.deployment-answer{margin-top:90px;margin-left:-50px;width:110px;font-size:clamp(15px,3vh,23px)}
#battle .battleframe{width:100%;height:calc(100% - 34px);align-self:flex-start;grid-template-rows:clamp(60px,17cqh,100px) minmax(64px,1fr) clamp(78px,22cqh,152px)}
.combat-hud{padding:0;justify-content:space-between;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:#101021}
.combat-card{padding:3px clamp(6px,3vw,55px);border-width:6px;border-image-width:6px}
.combat-card .rom-resources{font-size:clamp(14px,4.2cqh,28px);width:100%;line-height:1.1}
.combat-card .rom-resource{grid-template-columns:28px 1fr;gap:2px 6px}.combat-card .rom-resource.en{grid-template-columns:28px auto 1fr;gap:2px 6px}
.combat-dialog{padding:5px 9px;gap:12px;align-items:center;border-width:6px;border-image-width:6px}
.combat-dialog .combat-portrait{width:clamp(44px,17cqh,120px);height:clamp(44px,17cqh,120px);flex:0 0 auto;image-rendering:pixelated}
.combat-dialog>div{flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.combat-dialog strong{font-size:clamp(13px,3.2cqh,23px);font-weight:700;margin-bottom:2px}
.combat-dialog .combat-quote{font-size:clamp(15px,3.8cqh,27px);line-height:1.3;margin:0;min-height:1.3em;color:#e0e1df}
.combat-status{font-size:clamp(11px,2.8cqh,19px);line-height:1.2}
.combat-status:empty{display:none}
.battlecontrols{left:0;right:0;bottom:0;height:34px;gap:6px;align-items:center;justify-content:flex-end;background:#101021;padding:2px 8px}
.battlecontrols button{font-size:13px;min-height:28px;padding:3px 12px}
@media(max-height:380px){.deployment-board{top:4px;max-height:calc(100% - 8px)}.deployment-header{margin-bottom:2px}.deployment-header>span{padding:2px 4px}.deployment-units .deployment-row{min-height:25px;padding:2px 4px}.combat-dialog{gap:8px}.combat-dialog .combat-quote{font-size:14px}.combat-dialog strong{font-size:12px}}
@media(orientation:portrait){#orientation-prompt{position:fixed;inset:0;z-index:100;background:#101021;color:#e0e1df;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font:18px/1.5 var(--game-font)}#app>:not(#orientation-prompt){visibility:hidden}}
/* One shared row, outside every scene. The full area above belongs to play. */
#bottom-bar{display:flex;flex:0 0 auto;align-items:center;gap:6px;min-height:42px;padding:4px 9px;background:#101021;border-top:2px solid #756746;z-index:10;white-space:nowrap}
#bottom-bar #home{font-size:20px;min-width:32px;min-height:30px;padding:2px 6px}
#bottom-bar #chapter{max-width:20vw;flex:0 1 auto}
#bottom-bar #commands{flex:1;min-width:0;border:0;background:none;padding:0;min-height:30px;gap:5px;flex-wrap:nowrap}
#bottom-bar #commands[hidden]{display:none!important}
#bottom-bar .tools{gap:5px;flex:0 0 auto;margin-left:auto}
#bottom-bar button{min-height:32px;padding:4px 9px;font-size:13px;border-radius:0}
#bottom-bar .tools button{padding:4px 8px}
#bottom-bar #commands .spacer{flex:1}
#battle .battleframe{width:100%;height:100%;grid-template-rows:clamp(60px,17cqh,100px) minmax(64px,1fr) clamp(78px,22cqh,152px)}
#bottom-bar .battlecontrols{position:static;background:none;padding:0;height:auto;display:flex;gap:5px}
.resource-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(ellipse at center,#1f3650,#080d18 75%);color:#e0e1df}
.resource-loading strong{font-size:clamp(26px,5vw,54px);color:#dab66a;letter-spacing:.12em}
.resource-loading p{font-size:16px;margin:0}.resource-loading span{font-size:14px;font-variant-numeric:tabular-nums}
.resource-loading progress{appearance:none;width:min(420px,65vw);height:7px;border:0;background:#263545;color:#dab66a}
.resource-loading progress::-webkit-progress-bar{background:#263545}.resource-loading progress::-webkit-progress-value{background:#dab66a}
.resource-loading progress::-moz-progress-bar{background:#dab66a}
@media(max-width:900px){#bottom-bar #chapter{display:none}#bottom-bar{gap:4px;padding:3px 5px;min-height:38px}#bottom-bar button,#bottom-bar .tools button{font-size:12px;min-height:30px;padding:3px 6px}#bottom-bar .tools button span{display:none}#bottom-bar #commands{gap:3px}#bottom-bar .tools{gap:3px}#bottom-bar #home{min-width:30px}#bottom-bar #commands button{min-width:28px}}
@media(max-width:620px){#bottom-bar #commands button{padding:3px 5px}#bottom-bar .tools button{padding:3px 5px}}
/* Size windows from their contents and the available play area, not screen height. */
#surface{container-type:size}
#panel.board{width:min(calc(100% - 20px),1060px);height:min(calc(100% - 20px),640px);font-size:clamp(14px,2.5cqh,20px)}
.unit-board{grid-template-columns:35% 12% 37% 16%;grid-template-rows:minmax(28px,.8fr) minmax(28px,.8fr) minmax(42px,1.3fr) minmax(70px,auto) minmax(28px,1.1fr) minmax(25px,auto)}
.unit-resources{padding:5px 8px!important}.unit-resources .rom-resources{font-size:inherit;line-height:1.15}
.rom-resource{grid-template-columns:2em minmax(0,1fr)}.rom-resource.en{grid-template-columns:2em auto minmax(14px,1fr)}
.rom-resource .rom-bar{min-height:5px}.unit-exp,.pilot-exp{font-size:.85em}
.original-forecast{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(calc(100% - 20px),1060px);max-height:calc(100% - 16px);padding:0;justify-content:center;font-size:clamp(14px,2.7cqh,21px)}
.forecast-pair{flex:0 0 auto}.forecast-menu{align-self:center;max-width:none;min-width:180px;margin-top:clamp(10px,3cqh,30px)}
.forecast-resources .rom-resources{font-size:inherit;line-height:1.12}.forecast-description p{line-height:1.2}
.deployment-board{top:50%;transform:translate(-50%,-50%)}
#modal.end-turn-modal{display:flex;align-items:center;justify-content:center}
.end-turn-modal .modalbox{position:static;width:min(90%,640px)}
#bottom-bar #commands{overflow-x:auto;scrollbar-width:none}#bottom-bar #commands::-webkit-scrollbar{display:none}
#bottom-bar #commands button{flex-shrink:0}
@media(max-height:500px){
 #panel.board{width:min(calc(100% - 12px),900px);height:calc(100% - 10px);font-size:13px;gap:2px}
 .unit-board{grid-template-rows:26px 26px minmax(35px,1fr) 60px minmax(22px,.65fr) 22px}
 .unit-board .rom-resources{font-size:13px}.unit-board .rom-number{letter-spacing:0}
 .original-forecast{font-size:14px;width:min(calc(100% - 16px),880px);gap:4px}
 .forecast-description{padding:4px 7px}.forecast-description h2{font-size:15px;margin:0 0 3px}
 .forecast-description p{font-size:13px;margin:0 0 2px}.forecast-hit{margin-top:2px}
 .forecast-menu{display:grid;grid-template-columns:repeat(2,minmax(115px,1fr));width:auto;min-width:250px}
 .forecast-menu .rom-option{min-height:28px;padding:4px 8px}
 .deployment-board{top:50%;max-height:calc(100% - 8px)}
}

#panel.spirit-board{height:auto;max-height:calc(100% - 16px);overflow:auto;padding:10px;gap:8px}.spirit-heading{display:flex;justify-content:space-between;gap:16px}.spirit-heading strong{font-weight:400}.spirit-pilots{display:flex;border-bottom:1px solid #66768b}.spirit-pilots .rom-option{width:auto;flex:1;text-align:center}.spirit-commands{display:grid;grid-template-columns:1fr 1fr;gap:6px}.spirit-command{border:1px solid #54566b;background:#101021;text-align:left;padding:8px;border-radius:0;min-height:70px}.spirit-command>span{display:flex;justify-content:space-between;gap:10px}.spirit-command b,.spirit-command strong{font-weight:400}.spirit-command small{display:block;font-size:13px;line-height:1.4;margin-top:4px}.spirit-command em{display:block;font-size:12px;color:#dac38b;font-style:normal}.spirit-command:disabled{opacity:.5}.spirit-unknown{padding:8px;color:#9197a7;border:1px solid #343848}.spirit-description{margin:3px 0;font-size:14px}.spirit-targets{overflow:auto;min-height:0}.spirit-active{font-size:14px;color:#a8d7ab;min-height:0}.spirit-active:empty{display:none}
@media(max-height:500px){#panel.spirit-board{padding:6px;gap:4px}.spirit-command{min-height:53px;padding:5px}.spirit-command small{font-size:12px;margin-top:2px;line-height:1.2}.spirit-pilots .rom-option{min-height:27px;padding:3px 6px}}
.character-board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1060px,calc(100% - 24px));max-height:calc(100% - 20px);padding:16px;overflow:auto;font-size:16px;pointer-events:auto}
.character-board h2{font-size:22px;font-weight:400;margin:0 0 12px;text-align:center}.character-columns{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px}.character-fields{display:grid;gap:12px;min-width:0}
.character-board label{display:flex;flex-direction:column;gap:5px;min-width:0}.character-names{display:grid;grid-template-columns:1fr 1fr;gap:10px}.character-board input,.character-board select{width:100%;min-width:0;min-height:34px;padding:5px 7px;border:1px solid #727789;background:#161b2b;color:#e0e1df;border-radius:0;font-size:15px}
.character-faces{border:1px solid #727789;display:flex;gap:12px;padding:8px}.character-faces legend{font-size:14px;padding:0 5px}.character-faces label{width:25%;align-items:center;padding:4px;border:2px solid transparent;cursor:pointer;position:relative}.character-faces img{width:64px;max-width:100%;aspect-ratio:1;image-rendering:pixelated}.character-faces input,.character-types input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}.character-board .picked{background:#123e23;border-color:#8da48c}.character-faces label:focus-within,.character-types label:focus-within{outline:2px solid #e3bf77}
.character-date{display:grid;grid-template-columns:1fr 1fr;gap:10px}.character-date span{display:flex;align-items:center;gap:6px}.character-model{display:flex;flex-direction:column;align-items:center;min-width:0;background:#143a32;border:1px solid #727789;padding:10px}.character-types{display:flex;gap:5px;width:100%}.character-types label{flex:1;position:relative;display:block;text-align:center;border:1px solid #727789;padding:8px 4px;background:#101021;cursor:pointer}.character-robot{width:180px;max-height:210px;flex:1;min-height:0;object-fit:contain;image-rendering:pixelated}.character-model h3{margin:3px 0;font-size:19px;font-weight:400}.character-model-stats{display:flex;gap:15px;font-size:14px}.character-model p{font-size:14px;margin:6px 0}.character-model b{font-weight:400}.character-note{font-size:13px;line-height:1.4;color:#b8bdc7;margin:10px 0}.character-actions{display:flex;justify-content:center;gap:12px}.character-actions button{min-width:140px;border-radius:0}
@media(max-height:500px){.character-board{padding:7px;max-height:calc(100% - 10px);font-size:13px}.character-board h2{font-size:17px;margin-bottom:5px}.character-columns{gap:8px}.character-fields{gap:5px}.character-names{gap:7px}.character-board label{gap:2px}.character-board input,.character-board select{min-height:28px;font-size:13px;padding:3px 5px}.character-faces{padding:3px 5px;gap:8px;margin:0}.character-faces legend{font-size:12px}.character-faces img{width:38px}.character-faces label{padding:1px}.character-robot{max-height:116px;width:132px}.character-model{padding:5px}.character-types label{padding:5px 2px}.character-model h3{font-size:15px}.character-model-stats,.character-model p{font-size:12px;gap:8px}.character-note{font-size:11px;margin:5px 0;line-height:1.25}.character-actions button{min-height:28px;padding:4px 8px;font-size:13px}.character-date{gap:7px}}

/* The scene extends behind display cutouts; only interactive content is inset. */
#app{padding:0;width:100%;height:100dvh}
#app:fullscreen,#app:-webkit-full-screen{padding:0;width:100%;height:100%}
#bottom-bar{padding-left:max(5px,env(safe-area-inset-left));padding-right:max(5px,env(safe-area-inset-right));padding-bottom:max(3px,env(safe-area-inset-bottom))}
#modal{padding: max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
#modal .modalbox{max-width:100%}
#panel.board,.original-forecast,.deployment-board,.character-board{max-width:calc(100% - max(env(safe-area-inset-left),env(safe-area-inset-right)) - max(env(safe-area-inset-left),env(safe-area-inset-right)) - 20px)}
#dialogue{left:max(3%,env(safe-area-inset-left));right:max(3%,env(safe-area-inset-right));width:auto}
.combat-hud{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-top:env(safe-area-inset-top)}
.combat-dialog{padding-left:max(9px,env(safe-area-inset-left));padding-right:max(9px,env(safe-area-inset-right))}
.storytop,.hudhint{left:max(12px,env(safe-area-inset-left))}

#panel.system-panel{left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top))}.system-status{right:max(8px,env(safe-area-inset-right))}


/* r69 — vùng chạm trên cảm ứng. PHẢI nằm CUỐI file này.
   Lỗi đã đo: style.css có @media(pointer:coarse) nâng nút lên 38-44px, nhưng landscape-ui.css nạp
   SAU nó và @media(max-width:900px) ở dòng 59 ép #bottom-bar button về min-height:30px với cùng độ
   đặc hiệu. File sau thắng, nên đúng trên điện thoại - nơi cần vùng chạm lớn nhất - nút lại nhỏ
   nhất. Đo trên 667x375: 23/23 nút dưới 44px, "−" và "+" chỉ 28x30, 8 mục menu 145x28.
   Khối này đặt sau khối max-width nên nó thắng lại, và chỉ áp dụng khi con trỏ là cảm ứng. */
@media(pointer:coarse){
  #bottom-bar{min-height:52px}
  #bottom-bar button,#bottom-bar .tools button{min-height:44px;padding:4px 10px}
  #bottom-bar #home{min-width:44px;min-height:44px}
  #bottom-bar #commands{min-height:44px}
  #bottom-bar #commands button{min-height:44px;min-width:44px}
  #bottom-bar .tools button{min-width:44px}
  /* Phải khớp ĐỘ ĐẶC HIỆU của original-ui.css:36, nơi @media(max-height:500px) đặt
     `#panel.system-panel .rom-option{min-height:28px}` = (0,1,3). Viết `#panel .rom-option` = (0,1,1)
     thì thua bất kể thứ tự file, vì đặc hiệu cao hơn luôn thắng. Đã đo: mục menu vẫn 145x28. */
  #panel.system-panel .rom-option,#panel.command-panel .rom-option{min-height:44px}
  /* 8 mục x 44px vượt chiều cao màn ngang thấp, nên panel phải cuộn được thay vì cắt mất mục. */
  #panel.system-panel{max-height:calc(100% - 16px);overflow-y:auto;overscroll-behavior:contain}
}