/* Supersede the old two-row touch header without shrinking labels. */
#game-shell#game-shell#game-shell .topbar{flex-wrap:nowrap!important;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-inline:max(6px,env(safe-area-inset-left,0px)) max(6px,env(safe-area-inset-right,0px));gap:4px!important}
#game-shell#game-shell#game-shell .topbar .hud-actions{flex:0 0 auto;flex-wrap:nowrap!important;min-width:0;gap:4px;margin-left:auto;justify-content:flex-end}
#game-shell#game-shell#game-shell .topbar .top-actions{width:auto!important;height:30px;flex:0 0 auto;flex-wrap:nowrap!important;gap:4px}
#game-shell#game-shell#game-shell .topbar .top-actions:empty{display:none!important}
#game-shell#game-shell#game-shell .topbar button,#game-shell#game-shell#game-shell .topbar summary{flex:0 0 auto;width:auto;min-width:0;max-width:none;height:30px;min-height:30px;margin:0;padding:0 7px;font-size:14px;line-height:28px;white-space:nowrap!important;word-break:keep-all;overflow-wrap:normal;letter-spacing:normal}
#game-shell#game-shell#game-shell .topbar button>div{display:flex;flex-wrap:nowrap;align-items:center;gap:3px;white-space:nowrap;line-height:28px;font-size:inherit}
#game-shell#game-shell#game-shell .topbar #auto-skills-state{font-size:12px;white-space:nowrap}
#game-shell#game-shell#game-shell .topbar [hidden]{display:none!important}
#game-shell#game-shell#game-shell .topbar[data-compact=true] .battle-brand{display:none!important}
#game-shell#game-shell#game-shell .topbar[data-compact=true] .hud-actions{margin-left:0;flex:1 0 auto;justify-content:space-evenly}
#game-shell#game-shell#game-shell .topbar #header-more{position:relative;flex:none;z-index:100}
#game-shell#game-shell#game-shell .topbar #header-more>div{width:230px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 52px - env(safe-area-inset-top,0px));overflow:auto;overscroll-behavior:contain;box-sizing:border-box;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;box-shadow:0 8px 20px #0008}
#game-shell#game-shell#game-shell .topbar #header-more button{display:block;position:relative;min-width:0;width:100%;height:38px;min-height:38px;padding:0 5px;line-height:36px;background:#182d3a;border:1px solid #3d586a;color:#d7e8ef}
#game-shell#game-shell#game-shell .topbar #header-more button>div{justify-content:center;line-height:36px}
#game-shell#game-shell#game-shell .topbar #header-more svg,#game-shell#game-shell#game-shell .topbar #header-more img,#game-shell#game-shell#game-shell .topbar #header-more small{display:none!important}
#game-shell#game-shell#game-shell .topbar #header-more #session-playtime{display:block;text-align:center;font-size:12px;white-space:nowrap}
.topbar summary:focus-visible{outline:2px solid #85e7db;outline-offset:2px}

/* Each quantity and its unit stay in the same text run. */
#skills-dialog .fragment-wallet{display:grid!important;grid-template-columns:minmax(0,1fr);gap:6px;font-size:14px!important;min-width:0}
#skills-dialog .fragment-wallet .fragment-label{display:flex;align-items:center;gap:7px;font-size:14px;color:#87ddd5}
#skills-dialog .fragment-wallet .fragment-label img{width:26px;height:26px;flex:none}
#skills-dialog .fragment-wallet .fragment-owned{display:block;font-size:18px;font-weight:700;white-space:nowrap;color:#effbf7}
#skills-dialog .fragment-wallet .fragment-cost{display:block;font-size:14px;line-height:1.6;word-break:keep-all;overflow-wrap:normal}
#skills-dialog .fragment-wallet .fragment-shortage{color:#ffafb3;white-space:nowrap}
#skills-dialog .fragment-wallet .fragment-ready{color:#81dfc4;white-space:nowrap}
#skills-dialog .fragment-summary{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}

/* A wider left detail panel; both sides retain independent scrolling. */
#skills-dialog[data-skills-tab=active][data-skill-detail=true] #skill-detail-sheet{width:min(500px,46vw);container-type:inline-size}
:root[data-side-panel=skills-dialog][data-skill-detail=true]{--occupied-width:calc(min(420px,38vw) + min(500px,46vw) + 8px)}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog#skills-dialog #skill-detail-sheet .trait-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-items:stretch}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog#skills-dialog #skill-detail-sheet .core-trait-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-items:stretch}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog#skills-dialog #skill-detail-sheet .trait-entry{min-width:0;display:flex;flex-direction:column}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog#skills-dialog #skill-detail-sheet :is(.trait-option,.core-option){width:100%;min-width:0;align-items:stretch;padding:8px;flex:1}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog#skills-dialog #skill-detail-sheet :is(.trait-option,.core-option) strong{font-size:14px;line-height:1.4;word-break:keep-all}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog#skills-dialog #skill-detail-sheet :is(.trait-option,.core-option) small{font-size:13px;line-height:1.55;word-break:keep-all;overflow-wrap:break-word}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog#skills-dialog #skill-detail-sheet .compact-trait-heading{flex-wrap:wrap;gap:4px}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog#skills-dialog #skill-detail-sheet .trait-state{max-width:100%;font-size:12px;white-space:normal;word-break:keep-all}
@container (min-width:450px){#skills-dialog#skills-dialog#skills-dialog#skills-dialog#skills-dialog #skill-detail-sheet .core-trait-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:280px){#skills-dialog#skills-dialog#skills-dialog#skills-dialog#skills-dialog #skill-detail-sheet .trait-list,#skills-dialog#skills-dialog#skills-dialog#skills-dialog#skills-dialog #skill-detail-sheet .core-trait-list{grid-template-columns:minmax(0,1fr)}}