/* ============================================================
   RESPONSIVE EXPERIENCE — loaded last on purpose.
   Every era remains usable while the browser is resized and on
   phones/tablets in both portrait and landscape orientations.
   ============================================================ */

:root{
  --sml-vw:100vw;
  --sml-vh:100dvh;
  --sml-safe-top:env(safe-area-inset-top, 0px);
  --sml-safe-right:env(safe-area-inset-right, 0px);
  --sml-safe-bottom:env(safe-area-inset-bottom, 0px);
  --sml-safe-left:env(safe-area-inset-left, 0px);
}

html{
  min-width:0;
  min-height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{ min-width:0; min-height:100%; }
button,select,input,textarea{ max-width:100%; }

.stage,
.cobol,
.w95,
.modern,
.finale,
#cobolStory,
#cobolIntroVideo{
  height:var(--sml-vh, 100dvh);
  max-height:var(--sml-vh, 100dvh);
}

/* Initial terminal and project archive */
.stage{ height:var(--sml-vh, 100dvh); }
.projects{
  padding:
    max(4px,var(--sml-safe-top))
    max(4px,var(--sml-safe-right))
    max(4px,var(--sml-safe-bottom))
    max(4px,var(--sml-safe-left));
}
.shell{ min-width:0; min-height:0; }
.node-space-wrap,.node-space,.wolf-view,.racer-view{ max-width:100%; max-height:100%; }
.world-chat:not(.active){ display:none; }
.overlay{ height:var(--sml-vh, 100dvh); overflow:auto; }
.overlay .panel{ max-height:calc(var(--sml-vh, 100dvh) - 24px); overflow:auto; }

/* Fixed-era roots follow browser chrome and not the layout viewport. */
.cobol,.w95,.modern,.finale,#cobolStory,#cobolIntroVideo{
  width:var(--sml-vw, 100vw);
  max-width:var(--sml-vw, 100vw);
}

/* Windows 98 */
.w95-desktop{ min-width:0; min-height:0; }
.w95-window{
  max-width:calc(100% - 8px) !important;
  max-height:calc(100% - 8px) !important;
}
.w95-app{ min-width:min(260px, calc(100% - 8px)); }
.w95-taskitem{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.w95-startmenu{ max-height:calc(var(--sml-vh, 100dvh) - 36px); overflow-y:auto; }
.w95-startmenu .sm-flyout{ max-height:calc(var(--sml-vh, 100dvh) - 38px); overflow-y:auto; }
.w95-console{ max-width:calc(100% - 12px) !important; max-height:calc(100% - 12px) !important; }

/* Modern Mac and every window on it */
.modern-menubar{
  top:0;
  min-width:0;
  padding-left:max(8px,var(--sml-safe-left));
  padding-right:max(8px,var(--sml-safe-right));
}
.modern-menubar .mb-set{ min-width:0; }
.modern-desktop{ bottom:var(--sml-safe-bottom); min-width:0; min-height:0; }
.mac-desktop{ min-width:0; min-height:0; overflow:hidden; }
.kwa-window,.mac-win{
  max-width:calc(100% - 16px) !important;
  max-height:calc(100% - 16px) !important;
}
.kwa-topbar{ min-width:0; overflow-x:auto; scrollbar-width:none; }
.kwa-topbar::-webkit-scrollbar{ display:none; }
.kwa-body,.kwa-left,.kwa-right{ min-width:0; }
.kwa-right{ overscroll-behavior:contain; }
.modern-dock{ max-width:calc(100% - 16px); overflow:visible; }
.mac-finder-shell,.list-shell{ min-width:0; }

/* COBOL room */
.cobol{ overflow:hidden; }
.cbl-topbar,.cbl-fbar{
  margin-left:max(8px,var(--sml-safe-left));
  margin-right:max(8px,var(--sml-safe-right));
}
.cbl-main{
  padding-left:max(8px,var(--sml-safe-left));
  padding-right:max(8px,var(--sml-safe-right));
  padding-bottom:var(--sml-safe-bottom);
}

/* Finale and story screens */
.fin-stage{
  padding:max(20px,var(--sml-safe-top)) max(20px,var(--sml-safe-right))
          max(20px,var(--sml-safe-bottom)) max(20px,var(--sml-safe-left));
  overflow:auto;
}
#cobolStory{
  padding:max(18px,var(--sml-safe-top)) max(16px,var(--sml-safe-right))
          max(18px,var(--sml-safe-bottom)) max(16px,var(--sml-safe-left));
  overflow:auto;
}

/* Touch keyboard replacement for the live game areas. */
.sml-touch-controls{
  position:fixed;
  left:max(10px,var(--sml-safe-left));
  right:max(10px,var(--sml-safe-right));
  bottom:max(42px,calc(var(--sml-safe-bottom) + 8px));
  z-index:21000;
  display:none;
  align-items:flex-end;
  justify-content:space-between;
  pointer-events:none;
  font-family:ui-monospace,Menlo,monospace;
}
.sml-touch-controls.show{ display:flex; }
.sml-touch-pad{
  width:132px;
  height:96px;
  display:grid;
  grid-template:repeat(2,44px) / repeat(3,40px);
  gap:4px;
  grid-template-areas:'. up .' 'left down right';
}
.sml-touch-pad button:nth-child(1){ grid-area:up; }
.sml-touch-pad button:nth-child(2){ grid-area:left; }
.sml-touch-pad button:nth-child(3){ grid-area:down; }
.sml-touch-pad button:nth-child(4){ grid-area:right; }
.sml-touch-actions{ display:flex; align-items:flex-end; gap:7px; }
.sml-touch-controls button{
  min-width:40px;
  min-height:40px;
  padding:0 10px;
  border:1px solid rgba(148,255,189,.55);
  border-radius:10px;
  color:#d8ffe7;
  background:rgba(0,16,8,.74);
  box-shadow:0 4px 16px rgba(0,0,0,.4),inset 0 0 16px rgba(46,228,101,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  font:700 10px ui-monospace,Menlo,monospace;
  letter-spacing:.04em;
}
.sml-touch-controls button.primary{ min-width:54px; color:#fff; border-color:#2ee465; }
.sml-touch-controls button.pressed{ background:rgba(46,228,101,.32); transform:translateY(1px); }

/* Portrait gate for the mobile COBOL game. It sits over the real, still-live
   screen so an orientation flip never navigates away or rebuilds game state. */
.sml-cobol-rotate{
  position:fixed; inset:0; z-index:22000; display:none; place-items:center;
  padding:max(24px,var(--sml-safe-top)) max(24px,var(--sml-safe-right))
          max(24px,var(--sml-safe-bottom)) max(24px,var(--sml-safe-left));
  color:#f5fff8; background:rgba(0,7,3,.96);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  text-align:center; touch-action:none; overscroll-behavior:none;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.sml-cobol-rotate.show{ display:grid; }
.sml-cobol-rotate-card{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  max-width:320px; padding:26px 28px 24px;
  border:1px solid rgba(184,255,207,.32); border-radius:24px;
  background:rgba(7,25,14,.72); box-shadow:0 22px 70px rgba(0,0,0,.55),inset 0 0 30px rgba(46,228,101,.05);
}
.sml-cobol-rotate-icon{
  width:92px; height:92px; margin-bottom:2px; fill:none; stroke:currentColor;
  stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(46,228,101,.28));
}
.sml-cobol-rotate strong{ font-size:18px; line-height:1.2; letter-spacing:.08em; }
.sml-cobol-rotate span{ color:#a9cbb4; font-size:13px; line-height:1.45; }
body.sml-cobol-portrait-lock{ overflow:hidden !important; overscroll-behavior:none; }

/* ============================================================
   TABLETS AND NARROW DESKTOP WINDOWS
   ============================================================ */
@media (max-width:1024px){
  .terminal{ padding:clamp(12px,3vw,28px); }
  .computer{ width:min(88vw, 78vh); }

  .shell{ gap:7px; padding:10px; }
  .head{ padding-bottom:5px; }
  .head h1{ font-size:clamp(24px,5vw,40px); }
  .head-copyline{ display:none; }
  .node-interface{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  .node-viewport{ grid-row:2; }
  .node-space{ width:100%; height:100%; min-height:210px; }
  .left-hud{ grid-row:1; }
  .right-hud{ grid-row:3; }
  .left-hud,.right-hud{ position:relative; inset:auto; width:auto; }
  .world-chat.active{ min-height:clamp(120px,22vh,180px); max-height:180px; }

  .modern-menubar{ font-size:12px; }
  .modern-menubar .status{ font-size:10px; }
  .mb-menu-trigger{ padding-inline:6px; }
  .kwa-window{
    width:calc(100% - 20px);
    height:calc(100% - 20px);
    top:50%;
  }
  .kwa-left{ width:clamp(250px,34vw,320px); flex-basis:clamp(250px,34vw,320px); }
  .kwa-vm-main{ flex-basis:clamp(260px,42vh,340px); min-height:240px; }
  .kwa-vm-row{ flex-basis:160px; }
  .mac-list .list-side{ flex-basis:176px; }

  .cbl-left{ display:none; }
  .cbl-right{ min-width:0; }
}

/* ============================================================
   PHONE PORTRAIT — the complete experience scrolls vertically.
   No rotate wall: every control and content area stays reachable.
   ============================================================ */
@media (max-width:600px) and (orientation:portrait){
  .trip{ height:360vh; }
  .computer{ width:min(96vw, 70vh); }
  .terminal{ padding:10px; }
  .terminal-shell::before{ font-size:8px; }
  .term-head{ padding:12px 8px 6px; font-size:8px; }
  .term-head span:last-child{ display:none; }

  .projects{ padding:4px; }
  .shell{ padding:7px; gap:5px; }
  .head{ flex-direction:row; align-items:center; }
  .head .kicker,.head-copyline,#travelStatus{ display:none; }
  .head h1{ margin:0; font-size:24px; }
  .head-meta{ margin:0; }
  .proposal-link{ min-height:24px; padding:4px 8px; font-size:8px; }
  .node-interface{ grid-template-rows:40px minmax(0,1fr) 40px; gap:4px; }
  .left-hud,.right-hud{ max-height:40px; padding:7px 9px; border-radius:8px; }
  .left-hud.open,.right-hud.open{ max-height:154px; }
  .node-space{ min-height:180px; }
  .node{ width:min(150px,42vw); padding:9px; }
  .node h3{ font-size:19px; }
  .node p{ font-size:9px; }
  .world-chat.active{ min-height:132px; max-height:34vh; }
  .world-chat-header{ padding:6px 8px; font-size:8px; }
  .world-chat-log{ min-height:54px; font-size:9px; }
  .world-chat-input-row{ padding:5px; }
  .world-chat-send{ min-width:60px; padding:0 8px; }
  .overlay{ place-items:start center; padding:8px; }
  .overlay .panel{
    width:100%; min-height:calc(var(--sml-vh,100dvh) - 16px); max-height:none;
    padding:22px 16px; border-radius:18px;
  }
  .panel h2{ font-size:clamp(42px,16vw,72px); }
  .panel p{ font-size:15px; }
  .detail-log{ min-height:150px; }
  .actions{ flex-wrap:wrap; }

  .modern-menubar{ height:30px; gap:0; font-size:11px; }
  .modern-menubar .mb-set{
    flex:1 1 210px;
    max-width:calc(100% - 122px);
    overflow-x:auto;
    scrollbar-width:none;
  }
  .modern-menubar .mb-set::-webkit-scrollbar{ display:none; }
  .modern-menubar .mb-bridge{ display:none; }
  .modern-menubar .spacer{ display:none; }
  .modern-menubar .mb-clock{ flex:0 0 auto; margin-left:4px; font-size:9px; white-space:nowrap; }
  .modern-menubar .mb-share{ margin-left:3px; padding-inline:6px; }
  .modern-menubar .mb-list-status{ flex-basis:27px; width:27px; height:19px; margin-left:3px; }
  .modern-desktop{ inset:30px 0 var(--sml-safe-bottom); }
  .kwa-window{
    left:8px; top:8px; transform:none !important;
    width:calc(100% - 16px); height:calc(100% - 16px);
    border-radius:9px;
  }
  .kwa-window.minimized{ transform:translateY(110vh) scale(.06) !important; }
  .kwa-macbar{ padding:6px 8px; }
  .kwa-macbar .u{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .kwa-return-98{ flex:0 0 auto; min-width:94px; min-height:40px; padding:0 9px; font-size:9px; }
  .kwa-topbar{ gap:6px; padding:6px 8px; }
  .kwa-brand{ max-width:76px; font-size:12px; line-height:1.05; }
  .kwa-logo{ flex:0 0 18px; width:18px; height:18px; }
  .kwa-btn{ padding-inline:9px; }
  .kwa-os-switch,#kwaShowOs{ min-height:40px; }
  .kwa-topbar .spacer{ flex:0 0 0; }
  .kwa-body{ display:block; overflow:auto; }
  .kwa-left{
    width:100%; height:auto; padding:8px; overflow:visible;
    border-right:0; border-bottom:1px solid #e6e9ef;
  }
  .kwa-right{ width:100%; padding:8px; overflow:visible; }
  .kwa-transcript{ height:120px; }
  .kwa-vm-main{ height:280px; min-height:280px; flex-basis:auto; }
  .kwa-vm-row{ height:150px; flex-basis:auto; }
  .kwa-charts{ flex-direction:column; }
  .kwa-exgrid{ overflow-x:auto; }
  .kwa-exportrow{ flex-wrap:wrap; }
  .vm-win95{ inset:24px 8px 28px; }
  .modern-dock{ bottom:max(5px,var(--sml-safe-bottom)); gap:8px; padding:5px 10px; }
  .modern-dock .d{ font-size:23px; }
  .glass-weather{ left:4%; top:5%; width:145px; padding:10px 12px; }
  .gw-temp{ font-size:34px; }
  .glass-photo{ left:4%; top:34%; width:180px; }
  .gp-img{ height:104px; }
  .mac-file{ width:66px; transform:scale(.88); transform-origin:top center; }
  .mac-file b{ font-size:9px; }
  .mac-win{
    left:6px !important; top:6px !important; transform:none !important;
    width:calc(100% - 12px) !important; height:calc(100% - 12px) !important;
    border-radius:9px;
  }
  .mac-finder-shell aside{ flex-basis:106px; padding-inline:5px; }
  .mac-folder-grid{ grid-template-columns:repeat(2,minmax(72px,1fr)); padding:18px 10px; gap:22px 8px; }
  .mac-list .list-side{ flex-basis:108px; padding-inline:5px; }
  .list-logo{ font-size:13px; }
  .list-nav span{ padding:5px 4px; font-size:10px; }
  .list-main{ padding:12px 10px; }
  .list-real-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 0; }
  .list-real-stats span:nth-child(4){ border-left:0; }
  .list-day-grid{ grid-template-columns:1fr; gap:12px; }
  .list-insights{ padding:10px 0 0; border-left:0; border-top:1px solid #213044; }
  .list-real-cards{ overflow-x:auto; }

  .w95-desktop{ inset:0 0 calc(46px + var(--sml-safe-bottom)) 0; }
  .w95-icons{ gap:9px; width:70px; }
  .w95-icon{ width:70px; }
  .w95-window{
    left:4px !important; top:4px !important; transform:none !important;
    width:calc(100% - 8px) !important; height:calc(100% - 8px) !important;
  }
  .w95-taskbar{ height:calc(46px + var(--sml-safe-bottom)); padding:3px 4px var(--sml-safe-bottom); }
  .w95-start{ flex:0 0 auto; min-height:38px; padding-right:8px; }
  .w95-taskitem{ flex:1 1 72px; padding-inline:4px; font-size:10px; }
  .w95-tray{ padding-inline:4px; gap:3px; }
  .w95-mac{ min-width:72px; height:38px; padding-inline:10px; touch-action:manipulation; }
  .w95-exec,.w95-since{ display:none; }
  .w95-hint{ bottom:54px; max-width:70%; text-align:center; }
  .w95-startmenu{ bottom:calc(47px + var(--sml-safe-bottom)); min-width:210px; }
  .w95-startmenu .sm-flyout{ position:fixed; left:12px; top:12px; right:12px; width:auto; }

  .cbl-topbar{
    gap:14px; margin-top:max(5px,var(--sml-safe-top));
    overflow-x:auto; scrollbar-width:none; justify-content:flex-start;
  }
  .cbl-topbar::-webkit-scrollbar,.cbl-fbar::-webkit-scrollbar{ display:none; }
  .cbl-topbar .cbl-spacer{ display:none; }
  .cbl-main{ padding-inline:max(5px,var(--sml-safe-left)); gap:5px; }
  .cbl-right{ gap:5px; overflow:hidden; }
  .cbl-location{ padding:6px 8px; }
  .cbl-viewport{ min-height:180px; }
  .cbl-dialog{ max-height:42vh; padding:8px; }
  .cbl-dialog-top{ flex-direction:row; gap:7px; }
  .cbl-portrait{ display:none; }
  .cbl-dialog-text{ font-size:11px; max-height:86px; }
  .cbl-dialog-menu{ flex-basis:110px; }
  .cbl-opt{ padding:5px 6px; font-size:10px; }
  .cbl-chatbar{ padding:6px 8px; }
  .cbl-fbar{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    white-space:nowrap; margin-bottom:max(5px,var(--sml-safe-bottom));
  }
  .cbl-fbar .cbl-spacer{ display:none; }
  .cbl-map-frame{ max-width:94%; }
  .cbl-map-canvas{ width:min(560px,90vw); }

  #cobolStory{ gap:12px; }
  .cst-head{ max-width:100%; font-size:9px; letter-spacing:1.5px; }
  .cst-frame{ width:100%; min-height:0; padding:18px 14px; gap:10px; }
  .cst-body{ min-height:0; font-size:13px; line-height:1.55; }
  .cst-foot{ gap:10px; font-size:10px; }

  .fin-stage{ justify-content:flex-start; gap:18px; }
  .fin-mini{ width:170px; height:58px; }
  .fin-desk{ width:240px; }
  .fin-caption{ font-size:13px; }
  .fin-telemetry{ gap:10px 18px; }
  .fin-type{ font-size:13px; letter-spacing:1.5px; }
  .fin-prompt{ width:100%; font-size:14px; }
  .fin-input{ min-width:0; width:100%; font-size:16px; }

  #megaRole{
    height:var(--sml-vh,100dvh);
    justify-content:flex-start;
    padding:max(20px,var(--sml-safe-top)) 10px max(16px,var(--sml-safe-bottom));
    overflow-y:auto;
  }
  .mr-head{ gap:7px; font-size:clamp(18px,6vw,25px); letter-spacing:2px; }
  .mr-bar{ width:28px; height:4px; box-shadow:0 6px 0 #2ee465,0 -6px 0 #2ee465; }
  .mr-sub{ margin:7px 0 12px; font-size:9px; }
  .mr-grid{ width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 4px; }
  .mr-tile{ gap:3px; padding:8px 4px 5px; }
  .mr-tv{ width:88px; height:88px; padding:6px; border-width:3px; }
  .mr-tv canvas{ width:72px; height:72px; }
  .mr-name{ font-size:12px; letter-spacing:1px; }
  .mr-tag{ min-height:17px; font-size:7px; }
  .mr-foot{ margin-top:10px; padding-bottom:8px; font-size:8px; }

  .sml-touch-controls{ bottom:max(48px,calc(var(--sml-safe-bottom) + 42px)); }
  .sml-touch-controls.cobol-controls{ bottom:max(46px,calc(var(--sml-safe-bottom) + 40px)); }
  .sml-touch-pad{ transform:scale(.88); transform-origin:left bottom; }
  .sml-touch-actions{ transform:scale(.88); transform-origin:right bottom; }
}

/* ============================================================
   PHONE LANDSCAPE — compact chrome, wide two-column workspace.
   ============================================================ */
@media (max-height:540px) and (orientation:landscape){
  .computer{ width:min(66vw, 90vh); }
  .terminal{ padding:10px; }
  .term-head{ padding:11px 8px 5px; font-size:8px; }
  .scroll-hint{ display:none; }

  .shell{ padding:5px 8px; gap:4px; }
  .head{ align-items:center; padding:0 0 3px; }
  .head .kicker,.head-copyline{ display:none; }
  .head h1{ margin:0; font-size:22px; }
  .head-meta{ flex-direction:row; align-items:center; gap:8px; }
  .proposal-link{ min-height:22px; padding:3px 7px; }
  .node-interface{ grid-template-rows:34px minmax(0,1fr) 34px; gap:3px; }
  .left-hud,.right-hud{ max-height:34px; padding:5px 8px; }
  .left-hud.open,.right-hud.open{ max-height:128px; }
  .node-space{ min-height:0; }
  .world-chat.active{ position:absolute; left:12%; right:12%; bottom:3px; min-height:112px; max-height:42vh; }

  .modern-menubar{ height:24px; font-size:10px; }
  .modern-menubar .mb-bridge{ display:none; }
  .modern-menubar .mb-clock{ margin-left:5px; font-size:9px; }
  .modern-menubar .mb-list-status{ flex-basis:25px; width:25px; height:18px; margin-left:3px; }
  .mb-menu,.modern-menubar .mb-menu-trigger{ height:22px; }
  .mb-menu-trigger{ padding-inline:5px; }
  .modern-desktop{ inset:24px 0 var(--sml-safe-bottom); }
  .kwa-window{ width:calc(100% - 12px); height:calc(100% - 10px); }
  .kwa-macbar{ padding:4px 8px; }
  .kwa-topbar{ gap:5px; padding:4px 7px; }
  .kwa-logo{ width:18px; height:18px; flex:0 0 18px; }
  .kwa-brand{ font-size:12px; }
  .kwa-btn,.kwa-select{ height:24px; font-size:10px; padding-inline:7px; }
  .kwa-topbar .lbl{ display:none; }
  .kwa-left{ width:34%; flex-basis:34%; padding:6px; gap:6px; }
  .kwa-card{ padding:7px; }
  .kwa-right{ padding:6px; gap:6px; }
  .kwa-vm-main{ flex-basis:210px; min-height:210px; }
  .kwa-vm-row{ flex-basis:116px; gap:6px; }
  .kwa-transcript{ height:82px; }
  .kwa-hintbox,.kwa-inputbox{ line-height:1.25; padding:6px; }
  .kwa-ask > div[style]{ height:5px !important; }
  .modern-dock{ bottom:max(3px,var(--sml-safe-bottom)); padding:3px 9px; gap:8px; }
  .modern-dock .d{ font-size:21px; }
  .mac-win{
    max-width:calc(100% - 10px) !important;
    max-height:calc(100% - 10px) !important;
  }
  .mac-list .list-side{ flex-basis:154px; }
  .list-main{ padding:10px 12px; }
  .list-day-grid{ gap:12px; }

  .w95-desktop{ inset:0 0 calc(28px + var(--sml-safe-bottom)) 0; }
  .w95-taskbar{ height:calc(28px + var(--sml-safe-bottom)); padding-bottom:var(--sml-safe-bottom); }
  .w95-taskitem{ flex:1 1 90px; max-width:150px; padding-inline:4px; font-size:10px; }
  .w95-tray{ padding-inline:4px; }
  .w95-since{ display:none; }
  .w95-startmenu{ bottom:calc(30px + var(--sml-safe-bottom)); }
  .w95-hint{ bottom:34px; }

  .cbl-topbar{ display:none; }
  .cbl-main{ padding:4px max(6px,var(--sml-safe-right)) 0 max(6px,var(--sml-safe-left)); }
  .cbl-right{ gap:4px; overflow:hidden; }
  .cbl-location{ padding:5px 8px; font-size:10px; }
  .cbl-viewport{ min-height:130px; }
  .cbl-dialog{ position:absolute; z-index:30; left:9%; right:9%; bottom:34px; max-height:48vh; padding:7px; }
  .cbl-dialog-top{ gap:7px; }
  .cbl-portrait canvas{ max-height:64px; width:auto !important; }
  .cbl-dialog-text{ max-height:68px; font-size:10px; }
  .cbl-dialog-menu{ flex-basis:140px; }
  .cbl-opt{ padding:3px 6px; font-size:9px; }
  .cbl-chatbar{ padding:5px 8px; }
  .cbl-fbar{
    margin:3px max(6px,var(--sml-safe-right)) max(3px,var(--sml-safe-bottom)) max(6px,var(--sml-safe-left));
    padding:4px 7px; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; white-space:nowrap;
  }
  .cbl-fbar .cbl-spacer{ display:none; }

  #cobolStory{ gap:8px; padding-block:max(7px,var(--sml-safe-top)); }
  .cst-head{ font-size:8px; }
  .cst-frame{ width:min(760px,88vw); min-height:0; padding:12px 18px; gap:7px; }
  .cst-title{ font-size:13px; }
  .cst-body{ min-height:0; font-size:11px; line-height:1.4; }
  .cst-foot{ font-size:9px; }

  .fin-stage{ gap:10px; padding-block:max(10px,var(--sml-safe-top)); }
  .fin-mini{ width:132px; height:44px; }
  .fin-desk{ width:190px; height:6px; }
  .fin-caption{ font-size:11px; line-height:1.35; }
  .fin-line1{ font-size:15px; }
  .fin-telemetry{ margin-top:6px; font-size:9px; }
  .fin-continue{ padding:5px 14px; font-size:10px; }

  #megaRole{
    height:var(--sml-vh,100dvh);
    padding:max(6px,var(--sml-safe-top)) max(12px,var(--sml-safe-right)) max(5px,var(--sml-safe-bottom)) max(12px,var(--sml-safe-left));
    overflow-y:auto;
  }
  .mr-head{ gap:8px; font-size:18px; letter-spacing:3px; }
  .mr-bar{ width:50px; height:4px; box-shadow:0 6px 0 #2ee465,0 -6px 0 #2ee465; }
  .mr-sub{ margin:3px 0 4px; font-size:8px; }
  .mr-grid{ grid-template-columns:repeat(3,1fr); gap:2px 16px; }
  .mr-tile{ gap:2px; padding:5px 5px 2px; }
  .mr-tv{ width:72px; height:72px; padding:5px; border-width:3px; }
  .mr-tv canvas{ width:58px; height:58px; }
  .mr-name{ font-size:11px; letter-spacing:1px; }
  .mr-tag{ min-height:10px; font-size:6px; }
  .mr-foot{ margin-top:4px; font-size:7px; }

  .sml-touch-controls{ bottom:max(34px,calc(var(--sml-safe-bottom) + 30px)); }
  .sml-touch-controls.cobol-controls{ bottom:max(30px,calc(var(--sml-safe-bottom) + 27px)); }
  .sml-touch-pad{ transform:scale(.72); transform-origin:left bottom; }
  .sml-touch-actions{ transform:scale(.76); transform-origin:right bottom; }
}

@media (prefers-reduced-motion:reduce){
  .sml-touch-controls *,#cobolStory,.modern.revealing .modern-desktop{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}