.training-controls,.training-duration,.training-allocation { display:contents; }

.activity-details-body>span { display:block; margin-top:7px; font-size:11px; }
.activity-details summary:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }

/* Sidebar layout is owned by sidebar.css; page-content breakpoints remain here. */

/* Height is independent of screen resolution: a 200% laptop typically has
   only 740 CSS pixels below browser chrome. Leave spacious desktops unchanged. */
@media (min-width:851px) and (max-height:1000px) {
 .game-frame .game-topbar:has(.sky-controls) { grid-template-columns:auto auto minmax(0,1fr); min-height:clamp(60px,8vh,68px); padding:clamp(5px,calc(2vh - 9px),10px) 24px; gap:8px 24px; }
 .game-frame .game-topbar:has(.sky-controls)>.sky-controls { grid-column:2; grid-row:1; }
 .game-frame .game-topbar:has(.sky-controls)>.game-top-actions { grid-column:3; grid-row:1; flex-wrap:nowrap; gap:10px; }
 .game-topbar .brand { font-size:10px; gap:10px; }
 .game-topbar .brand b { font-size:24px; }
 .game-topbar .dragonball { width:38px; height:38px; flex-shrink:0; }
 .game-topbar .logout-button { padding:10px 16px; }
 /* The full time window remains in the existing link title and accessible text. */
 .game-topbar .online-count small { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }

 .game-main:not(:has(.arena)):not(:has(.content-editor)) { padding:var(--game-content-top,12px) 24px 65px; }
 .game-main>.section-navigation { flex-direction:row; align-items:center; gap:20px; padding:12px 18px; border-radius:15px; margin-bottom:14px; }
 .section-navigation-heading { flex-shrink:0; }
 .section-navigation-heading>span { display:none; }
 .section-navigation-heading h2 { font-size:18px; }
 .section-navigation nav { flex:1; gap:8px; }
 .section-navigation nav a { min-height:42px; padding:7px 12px; font-size:13px; }
 .section-tab-icon { font-size:19px; }
 .overview-page .character-profile { margin-top:14px; grid-template-columns:minmax(160px,25%) minmax(0,1fr); }
 .overview-page .profile-portrait { min-height:210px; max-height:250px; }
 .overview-page .profile-details { padding:18px 24px; }
 .overview-page .profile-details h2 { font-size:26px; margin:4px 0; }
 .overview-page .profile-details>p { margin:8px 0; }
 .overview-page .ki-display { margin-top:12px; padding-top:10px; }
 .overview-page .ki-display strong { font-size:34px; line-height:1.3; }
 .overview-shortcuts { margin:14px 0; gap:10px; }
 .overview-shortcuts a { padding:12px; }
 .overview-page .stat-grid { margin-top:14px; gap:10px; }
 .overview-page .stat-card { padding:13px; }
 .activity-page .training-balances article { padding:10px 14px; }
 .activity-page .training-balances strong { font-size:22px; }
 .activity-page .surface-explainer { margin-block:10px; padding-block:8px; }
 .activity-page .training-setup { margin-top:10px; }
 .activity-page .training-booking { padding:16px; gap:9px; }
 .activity-page .training-setup h2 { font-size:22px; margin:4px 0 10px; }
 .activity-page .training-booking select { padding:10px 12px; }
 .activity-page .training-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; padding:12px 0; border-block:1px solid var(--theme-line,#d6e7e5); }
 .activity-page .training-duration,.activity-page .training-allocation { display:flex; flex-direction:column; gap:8px; min-width:0; }
 .activity-page .training-duration select { width:100%; min-height:44px; }
 .activity-page .training-allocation input[type="range"] { min-height:44px; }
 .activity-page .training-booking .training-controls p { font-size:12px; }
}

@media (min-width:851px) and (max-width:1100px) and (max-height:1000px) {
 .activity-page .training-controls { grid-template-columns:1fr; }
}

/* Keep training and work in the same compact planning layout on short screens.
   Active/blocked/error states retain their ordinary document flow. */
@media (min-width:1101px) and (max-height:1000px) {
 .activity-page:has(.training-booking):not(:has(.training-notice)) { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); grid-template-rows:auto auto auto 1fr; gap:12px 20px; align-items:start; }
 .activity-page:has(.training-booking):not(:has(.training-notice))>.page-hero { grid-column:1/-1; }
 .activity-page:has(.training-booking):not(:has(.training-notice))>.training-balances { grid-column:1; grid-row:2; gap:8px; }
 .activity-page:has(.training-booking):not(:has(.training-notice))>.surface-explainer { grid-column:1; grid-row:3; margin:0; }
 .activity-page:has(.training-booking):not(:has(.training-notice))>.training-setup { display:contents; }
 .activity-page:has(.training-booking):not(:has(.training-notice))>.training-setup>div { grid-column:1; grid-row:4; min-width:0; }
 .activity-page:has(.training-booking):not(:has(.training-notice)) .training-booking { grid-column:2; grid-row:2/5; }
 .activity-page:has(.training-booking):not(:has(.training-notice))>.training-history { grid-column:1/-1; }
 .activity-page .training-balances article { padding:12px; }
 .activity-page .training-balances strong { font-size:20px; }
 .activity-page .training-balances small { font-size:11px; }
}

/* Keep the ordinary laptop single-column. Compact secondary copy and spacing
   before spending content width on a second column. Live links never select a mode. */

/* Shorter windows need the two-column fallback, including room for all admin
   links and both temporary destinations. The ordinary desktop remains spacious. */

@media (min-width:851px) and (max-height:730px) {
 .game-main>.section-navigation { gap:12px; }
 .section-navigation-heading { display:none; }
}

@media (min-width:851px) and (max-width:1100px) and (max-height:1000px) {
 .game-frame .game-topbar:has(.sky-controls) { gap:10px; padding-inline:16px; }
 .game-topbar .online-count { display:none; }
 .game-main>.section-navigation { gap:12px; }
 .section-navigation-heading>h2 { font-size:15px; }
}

/* Keep the short desktop header in one row at its narrow edge. Let the name
   yield inside the character control instead of pushing theme/sound over the
   clock. The complete name stays in the picker and its accessible label. */
@media(min-width:851px) and (max-width:1000px) and (max-height:1000px){
 .game-frame .game-topbar :is(.character-switcher,.character-picker){min-width:0}
 .game-frame .game-topbar .character-picker summary>.picker-avatar+span{min-width:0}
 .game-frame .game-topbar .character-switcher>form,
 .game-frame .game-topbar .character-picker summary>.picker-chevron{flex:none}
 .game-frame .game-topbar .logout-button{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;flex-shrink:0}
 .game-frame .game-topbar .logout-label{display:none}
 .game-frame .game-topbar .logout-icon{display:block;width:20px;height:20px}
}

/* Decoration should not push the first action below the fold on phones either. */
@media (max-width:850px) {

 .game-main>.section-navigation { padding:12px; gap:8px; }
 .section-navigation nav a { min-height:44px; flex-direction:row; gap:6px; }
 .section-navigation-heading>span { display:none; }
}

@media (max-width:600px) {
 .game-main>.section-navigation .section-navigation-heading { display:none; }
}

/* Explicit mobile slots: theme and logout are separate forms, never share a cell. */
.logout-icon { display:none; }
@media(max-width:550px) {
 .game-frame .game-topbar:has(.character-switcher) { grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 40px 40px;gap:12px 8px; }
 .game-frame .game-topbar:has(.character-switcher)>.brand { grid-column:1/3;grid-row:1; }
 .game-frame .game-topbar:has(.character-switcher) .online-count { grid-column:3;grid-row:1;min-width:0;font-size:9px; }
 .game-frame .game-topbar:has(.character-switcher) .game-top-actions { display:contents; }
 .game-frame .game-topbar:has(.character-switcher) .game-top-actions>.theme-picker { grid-column:4;grid-row:1;justify-self:end; }
 .game-frame .game-topbar:has(.character-switcher) .game-top-actions>.game-logout { grid-column:5;grid-row:1;justify-self:end; }
 .game-frame .game-topbar:has(.character-switcher) .sky-controls { grid-column:2/5;grid-row:2;justify-self:center;width:auto;max-width:100%; }
 .game-frame .game-topbar:has(.character-switcher) .game-top-actions>.character-switcher { grid-column:5;grid-row:2;margin:0;justify-self:center; }
 .game-frame .game-topbar .logout-button { display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%; }
 .game-topbar .logout-label { display:none; }
 .game-topbar .logout-icon { display:block;width:20px;height:20px; }
}

/* On narrow phones the wordmark needs more than half of the flexible tracks.
   Size the online track to its compact content, leaving the rest to the brand.
   Sound, day display and character picker keep their existing second-row slots. */
@media(max-width:380px){
 .game-frame .game-topbar:has(.character-switcher){grid-template-columns:40px minmax(0,1fr) max-content 40px 40px}
 .game-frame .game-topbar:has(.character-switcher) .online-count{flex-wrap:nowrap;gap:3px;white-space:nowrap;justify-self:center}
 .game-frame .game-topbar .online-count :is(.online-count-label,small){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}

/* Absolute values stay prominent; give their labels a little more reading room. */
.overview-page .stat-card div>span{font-size:11px}

/* Shared mobile entry for inventory, shop and market. */
@media(max-width:600px){
}

/* Only the mobile game header is optional; navigation always remains reachable. */

@media(max-width:850px){
 html[data-mobile-header="hidden"] .game-frame>.game-topbar{display:none}

}