/* Tetramia touch-size layout layer. Loaded AFTER theme and reader rules.
   UI-only: no game routing, values, or classic desktop artwork is changed. */
.tt-mobile-nav-toggle {
  position:absolute; width:1px; height:1px; padding:0; margin:0;
  opacity:0; overflow:hidden;
}
.tt-mobile-nav-label { display:none; }
@media (max-width:800px) {
  html[data-tetramia-theme] body { min-width:0; overflow-x:visible; }
  html[data-tetramia-theme] #wrapper {
    width:100%; max-width:100%; min-width:0; margin:0; overflow:visible;
  }
  html[data-tetramia-theme] #banner {
    width:100%; height:auto; min-height:95px; overflow:hidden;
    box-sizing:border-box;
  }
  html[data-tetramia-theme="legacy-classic"] .tt-topbar {min-height:95px;justify-content:flex-end;padding:12px;}
  html[data-tetramia-theme="legacy-classic"] .tt-top-route {display:none;}
  html[data-tetramia-theme="legacy-classic"] .tt-top-status {background:#0c1f30dd;border:1px solid #426478;border-radius:999px;color:#c9f5e9;padding:8px 12px;font:700 12px/1.3 system-ui,sans-serif;}
  html[data-tetramia-theme="legacy-classic"] #banner {
    background-color:#0c1723; background-position:center top;
    background-size:auto 125px;
  }
  html[data-tetramia-theme] #container {
    display:grid; grid-template-columns:minmax(0,1fr);
    width:100%; max-width:100%; min-width:0; margin:0; overflow:visible;
  }
  html[data-tetramia-theme] .tt-mobile-nav-label {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    min-height:48px; box-sizing:border-box; margin:10px 12px 0;
    padding:11px 15px; border:1px solid #436a78; border-radius:10px;
    background:#123041; color:#e9f8ff; cursor:pointer;
    font:750 15px/1.4 system-ui,sans-serif; letter-spacing:.02em;
    -webkit-tap-highlight-color:transparent; user-select:none;
  }
  html[data-tetramia-theme] .tt-mobile-nav-label .tt-mobile-nav-caret {
    font-size:18px; line-height:1; transition:transform .15s ease;
  }
  html[data-tetramia-theme] .tt-mobile-nav-toggle:focus-visible + .tt-mobile-nav-label {
    outline:3px solid #9ff4ef; outline-offset:3px;
  }
  html[data-tetramia-theme] .tt-mobile-nav-toggle:checked + .tt-mobile-nav-label {
    border-color:#81d8df; background:#1c4655;
  }
  html[data-tetramia-theme] .tt-mobile-nav-toggle:checked + .tt-mobile-nav-label .tt-mobile-nav-caret {
    transform:rotate(180deg);
  }
  html[data-tetramia-theme] #col-1 { display:none!important; }
  html[data-tetramia-theme] .tt-mobile-nav-toggle:checked ~ #col-1 {
    display:flex!important; flex-direction:column; align-items:stretch;
    position:static; float:none; width:auto; min-width:0; max-height:none;
    overflow:visible; box-sizing:border-box; margin:0 12px 4px;
    padding:12px; border:1px solid #335467; border-top:0;
    border-radius:0 0 10px 10px; background:#0e2030;
  }
  html[data-tetramia-theme] #col-1 .NavBox,
  html[data-tetramia-theme] #col-1 .NavHead,
  html[data-tetramia-theme] #col-1 .NavFill,
  html[data-tetramia-theme] #col-1 .NavFooter,
  html[data-tetramia-theme] #col-1 .NavHeadInfo,
  html[data-tetramia-theme] #col-1 .nav-menu {
    float:none; width:auto; max-width:100%; height:auto; margin:0;
    padding:0; overflow:visible; background:none; position:static;
    box-sizing:border-box;
  }
  html[data-tetramia-theme] #col-1 .NavBox { margin:0 0 8px; }
  html[data-tetramia-theme] #col-1 .NavHeadInfo {
    padding:7px 6px; margin:0; color:#9cbccb; text-align:left;
    font:bold 11px/1.4 system-ui,sans-serif; letter-spacing:.08em;
  }
  html[data-tetramia-theme] #col-1 .nav-menu ul {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    list-style:none; margin:0; padding:0; gap:6px;
  }
  html[data-tetramia-theme] #col-1 .nav-menu li { min-width:0; font:500 14px/1.35 system-ui,sans-serif; }
  html[data-tetramia-theme] #col-1 .nav-menu li a {
    display:flex; align-items:center; min-height:45px; height:100%;
    margin:0; padding:10px 11px; border:1px solid #2c5162;
    box-sizing:border-box; border-radius:8px; background:#142c3b;
    color:#e2eff7; text-decoration:none; overflow-wrap:anywhere;
  }
  html[data-tetramia-theme] #col-1 .nav-menu li a:focus-visible {
    outline:2px solid #9ff4ef; outline-offset:2px;
  }
  html[data-tetramia-theme] #col-1 .tt-theme-panel {
    margin:6px 0 0; padding:12px; border:1px solid #315366;
    border-radius:9px; background:#0f2534; color:#cfdee8;
  }
  html[data-tetramia-theme] #col-1 .tt-theme-panel label {font:600 12px system-ui,sans-serif;}
  html[data-tetramia-theme] #col-1 .tt-theme-panel select {
    display:block; width:100%; max-width:100%; min-height:44px;
    box-sizing:border-box; color:#edf9ff; background:#102838; border:1px solid #4a7384;
    border-radius:8px; font-size:16px;
  }
  html[data-tetramia-theme] #col-2 {
    float:none; position:relative; width:100%; max-width:100%;
    min-width:0; box-sizing:border-box; padding:14px 12px 24px;
    overflow:visible; font-size:16px; line-height:1.55;
  }
  html[data-tetramia-theme] #col-2 img {max-width:100%;box-sizing:border-box;}
  html[data-tetramia-theme] #col-2 > img,
  html[data-tetramia-theme] #col-2 > center img,
  html[data-tetramia-theme] #col-2 > p img {height:auto;}
  html[data-tetramia-theme] #col-2 :where(pre,code) {
    max-width:100%; overflow-wrap:anywhere;
    white-space:pre-wrap; box-sizing:border-box;
  }
  html[data-tetramia-theme] #col-2 :where(iframe,video,canvas,form) {
    max-width:100%;box-sizing:border-box;
  }
  html[data-tetramia-theme] #col-2 table {
    display:block; max-width:100%; overflow-x:auto; overflow-y:visible;
    -webkit-overflow-scrolling:touch; box-sizing:border-box;
  }
  html[data-tetramia-theme] #col-2 :where(input,select,textarea,button) {
    box-sizing:border-box; max-width:100%; font-size:16px;
  }
  html[data-tetramia-theme] #col-2 :where(input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), select, button, textarea) {
    min-height:44px;
  }
  html[data-tetramia-theme] #col-2 :where(a,button,input,select,textarea):focus-visible {
    outline:2px solid #96eee6; outline-offset:3px;
  }
  html[data-tetramia-theme] #foot {
    float:none; width:100%; max-width:100%; height:auto;
    min-height:65px; padding:15px 12px; margin:0;
    box-sizing:border-box; overflow:visible;
    background-color:#0b1824;background-image:none;
  }
  html[data-tetramia-theme] #foot-Info-Left {
    float:none; width:auto; height:auto; margin:0; padding:0;
    overflow:visible; font:12px/1.5 system-ui,sans-serif;
    color:#b4cbd9;
  }
  html[data-tetramia-theme] #foot-Info-Right {display:none;}
  html[data-tetramia-theme] .tt-reading-shell {width:100%; min-width:0;}
  html[data-tetramia-theme] .tt-reading-jump a {
    flex:1 1 auto; justify-content:center; min-height:44px; box-sizing:border-box;
  }
  html[data-tetramia-theme] .tt-reading-controls {gap:6px;}
  html[data-tetramia-theme] .tt-reading-controls legend {
    float:none!important; width:100%; line-height:1.4!important; margin:0 0 4px!important;
  }
  html[data-tetramia-theme] .tt-reading-controls label {
    flex:1 1 45px; min-height:44px!important; box-sizing:border-box;
  }
  html[data-tetramia-theme="modern-tactical"] .tt-map-actions {flex-wrap:wrap;}
  html[data-tetramia-theme="modern-tactical"] .tt-map-viewport {max-width:100%;}
  html[data-tetramia-theme="modern-tactical"] .tt-map-viewport--galaxy {
    min-height:320px; height:min(65dvh,620px); touch-action:pan-x pan-y;
  }
}
@media(max-width:380px){
  html[data-tetramia-theme] #col-1 .nav-menu ul {grid-template-columns:1fr;}
  html[data-tetramia-theme] .tt-reading-stats {grid-template-columns:minmax(0,1fr);}
  html[data-tetramia-theme] .tt-reading-intro,
  html[data-tetramia-theme] .tt-reading-card {padding:14px;}
}
@media(prefers-reduced-motion:reduce){
  html[data-tetramia-theme] .tt-mobile-nav-caret {transition:none!important;}
}