/* Fixed viewport menus. Content is navigated with tabs and discrete pages. */
#game dialog[open]{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;height:min(760px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);overflow:hidden}
#game dialog>*{flex-shrink:0;min-width:0}
#game dialog [hidden]{display:none!important}
#game dialog .window-heading,#game dialog .dialog-heading,#game .shop-header{position:static;flex:none}
#game dialog.rpg-window{padding:0}
#game .rpg-window :is(.character-layout,.bag-layout,.skills-layout),#game .settings-body{flex:1;min-height:0;overflow:hidden;align-content:stretch}
/* Keep the portrait's intrinsic height inside the body, so the content scrollport
   ends above the footer and its final rows remain reachable. */
#game .character-layout{grid-template-rows:minmax(0,1fr)}
#game .character-content{min-height:0;gap:8px}
#game .character-stage{min-height:0}
#game .character-stage .character-art{min-height:0;max-height:35dvh}
#game .status-columns{grid-template-columns:1fr;min-height:0}
#game .character-tabs{gap:4px}
#game .character-tabs button{min-width:0;padding:6px;min-height:38px;font-size:12px}
#game .character-content>.window-panel:first-child{padding:8px 12px}
#game .character-content .window-resource{margin:4px 0}
#game .character-content .attribute-row{min-height:34px}
#game .character-content .window-panel h3{margin-bottom:8px;padding-bottom:6px}
#game .paged-region{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;overflow:hidden;gap:6px}
#game .paged-region:has(>.screen-page-list[hidden]){display:none}
#game .screen-page-list{flex:1;min-height:0!important;max-height:none!important;overflow:hidden!important;align-content:start}
#game .screen-pager{display:flex;flex:none;justify-content:center;align-items:center;gap:12px;min-height:40px;margin:0;padding:2px}
#game .screen-pager button{min-height:36px;padding:5px 12px;font-size:12px}
#game .screen-pager output{font-size:12px;white-space:nowrap;color:#e8cf94}
#game .screen-pager.single-page{visibility:hidden}
#game .pane-tabs,#game .settings-tabs{display:flex;flex:none;gap:4px;flex-wrap:wrap;padding:4px 10px}
#game .pane-tabs button,#game .settings-tabs button{flex:1;min-width:0;font-size:12px;min-height:38px;padding:6px}
#game .pane-tabs{grid-column:1/-1;padding:0}
#game .settings-tabs button[aria-pressed=true],#game .pane-tabs button[aria-pressed=true]{border-color:#e8c784;background:#685429;color:#ffe6ae}
#game .settings-body{padding:12px;display:flex}
#game .settings-body>.language-choice{align-self:stretch}
#game .settings-body .settings-panel{padding:12px}
#game .bag-items{display:flex;flex-direction:column;min-height:0;overflow:hidden}
#game .bag-grid{grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:max-content}
#game .bag-grid .bag-slot{min-height:0;max-height:76px}
#game .item-detail,#game .skill-detail{min-height:0;overflow:hidden}
#game .detail-icon{width:76px;height:76px;margin:0 auto 8px}
#game .window-data-row{min-height:30px}
#game .window-footer{padding:8px 12px;gap:8px}
/* Fit the inventory action into the same compact footer as the status tab. */
#game #bag-dialog .window-footer{padding-block:4px;flex-wrap:nowrap}
#game #bag-dialog .window-footer>span{margin:0;white-space:nowrap}
#game #bag-dialog .window-footer button{min-height:25px;padding:2px 10px;font-size:12px;line-height:19px;flex-shrink:0}
#game .skill-sidebar{min-height:0;overflow:hidden}
#game .skill-tree{gap:8px;padding:4px}
#game .skill-card{min-height:72px;padding:6px}
#game .skill-hint{margin-top:8px;line-height:1.5}
#game #catalog-tabs{flex-wrap:wrap;overflow:hidden;gap:4px}
#game #catalog-tabs button{flex:1;min-width:0;min-height:36px;font-size:12px;padding:4px}
#game #catalog-dialog .catalog-filters{margin:0;flex:none}
#game #catalog-dialog>p,#game #travel-dialog>p{margin:4px 0;font-size:12px}
#game .catalog-entry{padding:10px}
#game .catalog-entry p{font-size:12px;line-height:1.5}
#game .shop-list{display:grid;gap:8px}
#game .shop-row{padding:8px}
#game .help-pages{display:flex;flex-direction:column;gap:10px}
#game .help-topic{padding:10px;border:1px solid #a58b4b55;border-radius:5px;background:#102019}
#game .help-topic dt{color:#e8cf94;margin-bottom:4px}
#game .help-topic dd{margin:0;font-size:13px;line-height:1.5}

@media(max-width:750px),(max-height:600px){
  #game dialog[open]{height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px);gap:4px}
  #game .rpg-window :is(.bag-layout,.skills-layout){display:flex;flex-direction:column;padding:8px;gap:6px}
  #game .skills-layout>.window-panel{min-height:0;overflow:hidden}
  #game .skill-sidebar{display:none}
  #game .skills-layout .skill-tree{flex-direction:row}
  #game .skill-hint{display:none}
  #game .character-layout{grid-template-columns:1fr;padding:8px;gap:6px}
  #game .character-layout:not([data-tab=equipment]) .character-stage{display:none}
  #game .character-layout[data-tab=equipment] .character-stage{height:110px}
  #game .character-stage .character-art{height:100px}
  #game .bag-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  #game .bag-tools{margin-bottom:6px;gap:4px}
  #game .bag-tools input{padding:6px;min-height:36px}
  #game .bag-filters button{min-height:36px}
  #game .window-footer small{display:none}
  #game .window-footer{font-size:11px}
  #game #bag-dialog .window-footer{flex-wrap:wrap}
  #game #bag-dialog .window-footer button{min-height:36px}
  #game .screen-pager{min-height:36px}
  #game .screen-pager button{min-height:36px}
  #game .settings-tabs button{flex:1 0 25%}
  #game .settings-row{min-height:38px;padding:5px 0}
  #game .shop-row{grid-template-columns:32px 1fr auto;gap:6px}
  #game .shop-row button{grid-column:auto;font-size:11px;padding:6px;max-width:100px}

}
@media(max-height:500px){
  #game .window-heading{padding:4px 10px}
  #game .window-nav button{min-height:32px;padding:4px}
  #game .character-content .window-resource{margin:2px 0}
  #game .character-content .attribute-row{min-height:24px}
  #game .rpg-window .attribute-plus{min-height:24px;height:24px}
  #game .character-content .points-badge{padding:4px;margin-bottom:4px}
  #game .character-content>.window-panel:first-child{display:none}
  #game .stat-actions>span,#game .character-content>small{display:none}
  #game .window-panel{padding:6px}
  #game .character-content .window-panel h3{display:none}
}
#game .window-resource>strong{white-space:nowrap;font-size:13px}
#game .window-resource{grid-template-columns:36px minmax(0,1fr) 85px}
#game .full-screen{overflow:hidden;padding:16px}
#game #class-screen .screen-content{display:flex;flex-direction:column;height:100%;max-height:900px;min-height:0;width:min(1100px,100%)}
#game #class-screen .screen-content>*{flex-shrink:0}
#game #class-screen .screen-content>.paged-region{flex-shrink:1}
#game #class-cards{margin:8px 0;grid-template-columns:repeat(5,minmax(0,1fr));min-height:0}
#game #class-screen .raja-logo{height:72px;width:144px;object-fit:contain;margin:0 auto}
#game #class-screen h2{margin:4px 0}
#game #class-screen .class-start{margin:0}
#game #class-screen .class-choice{min-height:0;gap:6px}
#game #class-screen .class-card ol{margin:8px 0;padding:0 10px;list-style:none;font-size:11px}
#game #class-screen .class-card li{margin:4px 0}
@media(max-width:750px){
  #game #class-cards{grid-template-columns:1fr}
  #game #class-screen .class-card{max-width:360px;width:100%;justify-self:center}
  #game #class-screen .screen-content>p{font-size:11px;margin:4px 0}
}
@media(max-height:500px){
  #game #class-screen .raja-logo,#game #class-screen .screen-content>.eyebrow,#game #class-screen .screen-content>p{display:none}
  #game #class-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  #game #class-screen .class-choice canvas{height:65px}
  #game #class-screen .class-card ol,#game #class-screen .class-choice small{display:none}
  #game #class-screen .class-choice span{font-size:10px}
  #game .account-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:6px 0}
  #game .account-actions{margin:4px 0;gap:4px}
  #game .account-actions button{font-size:11px;padding:4px;min-height:32px}
}
@media(max-width:750px),(max-height:600px){
  #game .rpg-window .character-layout{grid-template-columns:minmax(0,1fr)}
  #game .rpg-window .skill-card{min-height:60px;grid-template-columns:44px minmax(0,1fr)}
}
@media(max-height:500px){
  #game .character-layout[data-tab=attributes] .status-columns>.window-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  #game .character-layout[data-tab=attributes] .points-badge{grid-column:1/-1}
  #game .character-content .status-columns{flex-shrink:0}
  #game #class-screen .class-choice{padding:3px;gap:3px}
  #game #class-screen .class-choice canvas{height:48px}
  #game #class-screen .class-card{padding:4px}
}
#game #class-screen .class-card:last-child{grid-column:auto}
#game #npc-dialog #npc-line{min-height:0;margin:4px 0;font-size:14px;line-height:1.5}
#game #npc-dialog #npc-advance,#game #npc-dialog #npc-error{margin:4px 0}
#game .mastery-weapon{margin-bottom:8px}