/* R18: shared mobile/tablet layout. Desktop branding and animations stay intact. */
:root { --app-height: 100vh; --app-top: 0px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }
@supports (height:100dvh) { :root { --app-height:100dvh; } }
button,a,input,textarea,select,summary,[role="button"] { -webkit-tap-highlight-color:rgba(254,207,13,.16); }
button,a,summary,[role="button"] { touch-action:manipulation; }
input,textarea,select { font-size: max(16px,1rem); }
#game canvas { touch-action:none; }
.overlay-body,.dialogue,.doc-body,.creator-card,.table-wrap { overscroll-behavior:contain; }
.overlay,.screen { top:var(--app-top); bottom:auto; height:var(--app-height); padding: max(12px,var(--safe-top)) max(12px,var(--safe-right)) max(12px,var(--safe-bottom)) max(12px,var(--safe-left)); }
.overlay-card,.creator-card { max-height:calc(var(--app-height) - 32px - var(--safe-top) - var(--safe-bottom)); }
.overlay-head { flex-shrink:0; }
.overlay-body { min-height:0; }
.hud-close { width:44px; height:44px; flex:none; font-size:24px; }
.doc-toggle { min-height:44px; }
.doc-body { overflow-x:auto; }
.doc table { min-width:340px; }
.dlg-head { flex-wrap:wrap; }
#dlg-close { margin-left:auto; width:44px; height:44px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--panel-2); font-size:24px; cursor:pointer; }
.dlg-keys .key-chip { min-height:44px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; }
.write textarea,.msgfield input,.msgfield select,#creator-name { font-size:16px; }
.write textarea[rows="8"] { max-height:none; }
.shop-catalog,.wardrobe-catalog,.character-layout,.shop-layout { min-width:0; }
.shop-catalog>*,.wardrobe-catalog>*,.shop-layout>*,.character-layout>* { min-width:0; }
#touch-controls,#touch-fullscreen,#quest-toggle,.classroom-mobile-toggle,.touch-help { display:none; }
.touch-device .touch-help { display:grid; }
.touch-device #touch-controls { display:block; }
.touch-device #touch-fullscreen:not([hidden]) { display:block; }
.touch-pad { position:absolute; bottom:calc(12px + var(--safe-bottom)); left:calc(12px + var(--safe-left)); display:grid; grid-template-columns:repeat(3,48px); grid-template-rows:repeat(3,48px); gap:3px; pointer-events:none; }
.touch-pad button,.touch-actions button { pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none; color:var(--ink); background:rgba(17,28,38,.94); border:1px solid #647987; border-radius:12px; font:700 20px "Atkinson Hyperlegible",sans-serif; min-width:44px; min-height:44px; }
.touch-pad [data-hold="ArrowUp"] { grid-column:2; grid-row:1; }
.touch-pad [data-hold="ArrowLeft"] { grid-column:1; grid-row:2; }
.touch-pad [data-hold="ArrowDown"] { grid-column:2; grid-row:3; }
.touch-pad [data-hold="ArrowRight"] { grid-column:3; grid-row:2; }
.touch-actions { position:absolute; right:calc(12px + var(--safe-right)); bottom:calc(84px + var(--safe-bottom)); display:flex; gap:8px; }
.touch-actions button { padding:8px; font-size:14px; height:56px; }
#touch-talk { min-width:92px; border-color:var(--yellow); color:var(--yellow); }
.touch-pad .is-held,.touch-actions .is-held { background:var(--yellow); color:var(--charcoal); border-color:var(--yellow); }
#touch-fullscreen { position:absolute; right:calc(12px + var(--safe-right)); bottom:calc(154px + var(--safe-bottom)); min-height:44px; padding:8px; font-size:12px; }
.touch-device .hud-controls { display:none; }
.touch-device #music-toggle { top:auto; bottom:calc(174px + var(--safe-bottom)); left:calc(12px + var(--safe-left)); min-height:44px; }
.touch-device .classroom-bar { bottom:calc(230px + var(--safe-bottom)); }
body:has(.dialogue.is-open) #touch-controls,body:has(.dialogue.is-open) #touch-fullscreen,body:has(.dialogue.is-open) #music-toggle,
body:has(.overlay:not(.hidden)) #touch-controls,body:has(.overlay:not(.hidden)) #touch-fullscreen { display:none; }

/* Compact game layout works in portrait and landscape without locking orientation. */
.compact-game .hud-player { top:calc(8px + var(--safe-top)); left:calc(8px + var(--safe-left)); min-width:0; width:350px; max-width:calc(100vw - 32px - var(--safe-left) - var(--safe-right)); padding:8px; gap:8px; }
.compact-game .hud-player canvas { width:42px; height:42px; flex:none; }
.compact-game .hud-stats { min-width:0; gap:3px; }
.compact-game .hud-row { gap:6px; }
.compact-game #hud-name { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compact-game .hud-level { font-size:12px; max-width:190px; }
.compact-game .hud-rep-label { display:none; }
.compact-game .hud-xp-text { font-size:11px; }
.compact-game #cloud-status { position:static; padding:0; color:#bdccd6; font-size:10px; background:transparent; max-width:100%; }
.compact-game #cloud-account { display:none; }
.compact-game #pixel-minimap { display:none; }
.compact-game .hud-right { top:calc(8px + var(--safe-top)); right:calc(8px + var(--safe-right)); width:280px; gap:4px; }
.compact-game .hud-zone { padding:5px 8px; font-size:12px; }
.compact-game .hud-quest { position:relative; padding:10px; max-height:min(260px,calc(var(--app-height) - 180px)); overflow:auto; }
.compact-game .quest-head { padding-right:44px; font-size:13px; }
.compact-game #hud-quest-text { font-size:12px; }
.compact-game .hud-quest:not(.is-expanded) #hud-quest-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.compact-game .hud-quest:not(.is-expanded) #hud-quest-tasks,.compact-game .hud-quest:not(.is-expanded) #hud-quest-more { display:none; }
.compact-game #quest-toggle { display:block; position:absolute; top:2px; right:2px; width:44px; height:44px; border:0; border-radius:8px; background:transparent; color:var(--yellow); font-weight:700; font-size:22px; font-family:inherit; }
.compact-game .hud-actions { right:calc(8px + var(--safe-right)); bottom:calc(8px + var(--safe-bottom)); gap:4px; }
.compact-game .action { width:52px; min-height:58px; padding:7px 3px; font-size:10px; }
.compact-game #pixel-view-controls { bottom:auto; top:calc(100px + var(--safe-top)); left:calc(8px + var(--safe-left)); transform:none; gap:4px; padding:4px; }
.compact-game #pixel-view-controls>span { display:none; }
.compact-game #pixel-view-controls button { min-width:44px; min-height:44px; padding:6px; }
.compact-game .prompt { bottom:calc(172px + var(--safe-bottom)); max-width:calc(100vw - 32px); white-space:normal; text-align:center; font-size:12px; }
.compact-game .prompt kbd { display:none; }
.compact-game #toasts { top:calc(98px + var(--safe-top)); width:calc(100vw - 32px); }
.compact-game .toast { min-width:0; max-width:100%; font-size:13px; }
.compact-game .dialogue { top:calc(var(--app-top) + 8px + var(--safe-top)); bottom:auto; width:calc(100vw - 16px - var(--safe-left) - var(--safe-right)); max-height:calc(var(--app-height) - 16px - var(--safe-top) - var(--safe-bottom)); padding:12px; gap:10px; }
.compact-game .dlg-portrait { width:56px; }
.compact-game .dlg-portrait canvas { width:56px; height:56px; }
.compact-game .dlg-text { font-size:17px; }
.compact-game .dlg-fr,.compact-game .dlg-task { font-size:15px; }
.compact-game .choice { min-height:48px; }
.compact-game .dlg-keys { justify-content:flex-start; gap:6px; }
.compact-game .dlg-keys kbd { display:none; }
.compact-game #docpanel { position:relative; top:auto; left:auto; transform:none; min-width:0; min-height:0; width:100%; max-height:none; margin:12px 0; border-width:2px; animation:fade .15s ease; }
.compact-game .doc-body { max-height:min(240px,calc(var(--app-height) * .3)); padding:10px; }
.compact-game .docpanel header { padding:4px 8px; flex-wrap:wrap; }
.compact-game .doc-toggle kbd { display:none; }
.compact-game .classroom-bar { left:calc(8px + var(--safe-left)); right:auto; bottom:calc(224px + var(--safe-bottom)); max-width:calc(100vw - 16px - var(--safe-left) - var(--safe-right)); padding:4px; max-height:180px; overflow:auto; }
.compact-game .classroom-mobile-toggle { display:block; min-height:44px; }
.compact-game .classroom-bar:not(.is-expanded)>:not(.classroom-mobile-toggle) { display:none; }
.compact-game .classroom-bar.is-expanded { right:calc(8px + var(--safe-right)); padding:8px; }
.compact-game .classroom-bar select { width:100%; max-width:100%; min-width:0; font-size:16px; }
.compact-game .classroom-note { display:none; }
.compact-game .shop-layout,.compact-game .character-layout { grid-template-columns:minmax(0,1fr); }
.compact-game .shop-room { position:static; }
.compact-game .shop-filters .btn,.compact-game .shop-item .btn,.compact-game .character-swatches .btn,.compact-game .swatch,.compact-game .tab,.compact-game .seg-btn,.compact-game .toggle,.compact-game .chip { min-height:44px; min-width:44px; }
.compact-game .shop-catalog,.compact-game .wardrobe-catalog { grid-template-columns:repeat(3,minmax(0,1fr)); }
.compact-game .reward-shop,.compact-game .character-card { width:100%; }
.compact-game .shop-preview { touch-action:manipulation; }
.compact-game .overlay-head { flex-wrap:wrap; gap:8px; padding:10px 12px; }
.compact-game .overlay-head h2 { font-size:20px; }
.compact-game .overlay-head .hud-close { margin-left:auto; }
.compact-game .overlay-body { padding:12px; }
.compact-game .map-legend { order:3; width:100%; flex-wrap:wrap; font-size:11px; }
.compact-game .map-body { grid-template-columns:minmax(0,1fr); }
.compact-game .map-list { max-height:none; }
.compact-game .tabs { flex-wrap:wrap; }
.compact-game .howto-list li { grid-template-columns:90px minmax(0,1fr); }
.compact-game .screen { overflow:auto; align-items:flex-start; }
.compact-game .title-card { margin:auto; padding:24px 0 58px; }
.compact-game .title-actions .btn { min-width:0; width:100%; }
.compact-game .title-footer { display:none; }
.compact-game .creator-card { padding:16px; }
.compact-game .creator-grid { grid-template-columns:120px minmax(0,1fr); gap:16px; }
.compact-game .creator-preview { min-height:180px; align-items:center; }
.compact-game #creator-canvas { width:80px; height:160px; }
.compact-game .creator-foot { position:sticky; bottom:-16px; background:#111c26; padding:12px 0; z-index:1; gap:8px; }
.compact-game .creator-foot .btn { min-width:0; padding:12px; }
.compact-game .badge { white-space:normal; }
.compact-game .level-roadmap { overflow-x:auto; }
.compact-game .level-roadmap table { min-width:420px; }
.compact-game .challenge-row,.compact-game .store-row,.compact-game .mission-top,.compact-game .answer-top { flex-wrap:wrap; }
@media(max-width:650px) {
  .compact-game .hud-player { width:calc(100vw - 16px - var(--safe-left) - var(--safe-right)); max-width:none; }
  .compact-game .hud-right { top:calc(88px + var(--safe-top)); left:calc(8px + var(--safe-left)); right:calc(8px + var(--safe-right)); width:auto; }
  .compact-game .hud-zone { display:none; }
  .compact-game #pixel-view-controls { display:none; }
  .compact-game .dlg-portrait { display:none; }
  .touch-device.compact-game .prompt { display:none; }
  .touch-device #touch-talk { font-size:12px; }
  .compact-game .creator-grid { grid-template-columns:minmax(0,1fr); }
  .compact-game .creator-preview { min-height:160px; }
  .compact-game .shop-catalog,.compact-game .wardrobe-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compact-game .shop-item { padding:8px; }
  .compact-game .menu-row { grid-template-columns:minmax(0,1fr); }
  .compact-game .howto-list li { grid-template-columns:minmax(0,1fr); gap:4px; }
  .touch-pad { left:calc(8px + var(--safe-left)); bottom:calc(8px + var(--safe-bottom)); grid-template-columns:repeat(3,44px); grid-template-rows:repeat(3,44px); gap:2px; }
  .touch-actions { right:calc(8px + var(--safe-right)); bottom:calc(76px + var(--safe-bottom)); }
  .touch-device #music-toggle { bottom:calc(164px + var(--safe-bottom)); left:calc(8px + var(--safe-left)); font-size:11px; }
  #touch-fullscreen { right:calc(8px + var(--safe-right)); }
}
@media(max-height:500px) and (min-width:651px) {
  .compact-game .hud-player { width:280px; }
  .compact-game .hud-right { width:260px; }
  .compact-game .hud-zone { display:none; }
  .compact-game .hud-quest:not(.is-expanded) #hud-quest-text { -webkit-line-clamp:1; }
  .compact-game #pixel-view-controls { display:none; }
  .compact-game .classroom-bar { bottom:calc(192px + var(--safe-bottom)); max-height:calc(var(--app-height) - 220px); }
  .compact-game .classroom-bar.is-expanded { top:8px; bottom:auto; max-height:calc(var(--app-height) - 16px); z-index:18; }
  .compact-game .prompt { bottom:calc(80px + var(--safe-bottom)); }
}

/* CFP portal: navigation scrolls inside its row; the page never requires horizontal scrolling. */
.portal-page { height:auto; min-height:100%; overflow-y:auto; overflow-x:hidden; }
body.portal { min-height:var(--app-height); overflow-x:hidden; }
.portal #portal-main,.portal .surface,.portal .split>*,.portal .mission-layout>*,.portal .student-welcome>* { min-width:0; }
.portal h1,.portal h2,.portal h3,.portal p,.portal .badge,.portal .student-tile strong { overflow-wrap:anywhere; }
.portal input,.portal select,.portal textarea { font-size:16px; max-width:100%; }
.portal .portal-nav { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; flex-wrap:nowrap; }
.portal-nav button { flex:none; min-height:44px; white-space:nowrap; }
.portal .btn,.portal summary { min-height:44px; }
.portal .tile-grid { grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); }
.portal .table-wrap { width:100%; max-width:100%; overflow:auto; }
.portal .table-wrap table { min-width:560px; }
.portal .flexline>* { max-width:100%; min-width:0; }
.portal #account-actions>* { min-width:0; overflow-wrap:anywhere; }
.portal .detail-tabs input,.portal .detail-tabs select { flex:1 1 180px; min-width:0; }
.portal dialog { max-height:calc(var(--app-height) - 32px); max-width:calc(100vw - 24px - var(--safe-left) - var(--safe-right)); }
.dialog-close-bar { position:sticky; top:-30px; z-index:2; display:flex; justify-content:flex-end; background:#111f29; padding:6px 0; }
.dialog-close-bar .close-dialog { margin:0; }
@media(max-width:1100px),(max-height:600px) {
  .portal .portal-top { height:auto; min-height:72px; padding:12px max(12px,var(--safe-right)) 12px max(12px,var(--safe-left)); gap:16px; flex-wrap:wrap; }
  .portal #account-actions { gap:6px; font-size:12px; }
  .portal #portal-main { padding:24px 16px calc(32px + var(--safe-bottom)); }
  .portal .portal-nav { gap:4px; margin-bottom:20px; }
  .portal .auth-layout { gap:28px; }
  .portal .surface,.portal .auth-box { padding:20px; }
  .portal dialog { position:fixed; top:calc(var(--app-top) + 12px + var(--safe-top)); left:0; right:0; bottom:auto; margin:0 auto; padding:18px; max-height:calc(var(--app-height) - 24px - var(--safe-top) - var(--safe-bottom)); width:min(1000px,calc(100vw - 24px)); }
  .portal .dialog-close-bar { top:-18px; }
  .portal #password-dialog { width:min(440px,calc(100vw - 24px)); }
  .portal .mission-layout { grid-template-columns:minmax(0,1fr); }
  .portal .mission-assigned { position:static; max-height:none; }
  .portal .toolbar { gap:8px; }
  .portal .toolbar input,.portal .toolbar select { flex:1 1 180px; min-width:0; }
  body.has-intro #portal-main { align-items:flex-start; justify-content:center; padding:clamp(60px,calc(var(--intro-ground, 45vh) - 140px),200px) 16px 32px; min-height:0; }
  body.has-intro .intro-card { width:min(460px,100%); }
  .intro-skip { min-height:44px; left:calc(8px + var(--safe-left)); bottom:calc(8px + var(--safe-bottom)); z-index:1; }
}
@media(max-width:600px) {
  .portal .top-context { display:none!important; }
  .portal .brand-lockup { flex:none; }
  .portal #account-actions { margin-left:0; flex:1; justify-content:flex-end; min-width:0; }
  .portal-top #account-actions .btn { font-size:12px; padding:8px; }
  .portal .auth-layout,.portal .split,.portal .student-welcome,.portal .form-grid { grid-template-columns:minmax(0,1fr); }
  .portal .auth-hero h1 { font-size:36px; }
  .portal .surface,.portal .auth-box,.portal .group-item,.portal .license-item,.portal .user-item,.portal .production,.portal .assignment,.portal .mission-step { padding:16px; }
  .portal .toolbar>* { width:100%; flex-basis:100%; }
  .portal .toolbar .push { margin-left:0; }
  .portal .detail-tabs { gap:8px; }
  .portal .detail-tabs input,.portal .detail-tabs select { flex-basis:100%; }
  .portal .student-tile { padding:18px; }
  .portal .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal .metric { padding:12px; }
  .portal .empty { padding:24px 16px; }
  .portal .badge { white-space:normal; }
  .portal .statusline { left:12px; right:12px; bottom:calc(12px + var(--safe-bottom)); max-width:none; padding:12px; }
  .portal .mission-heading { display:block; }
  .portal .performance-card,.portal .performance-section { padding:14px; }
}
@media(max-height:500px) { body.has-intro #portal-main { padding-top:28px; } }