/* Last in the cascade: narrow layouts without changing game coordinates. */
html {-webkit-text-size-adjust:100%;text-size-adjust:100%}
.chart-preview-toggle {display:none}
@media (max-width:900px) {
  html {min-width:0}
  .site-shell {padding:18px 18px 24px;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .main,.page,.workspace,.game-panel,.tool-panel,.page-heading,.topbar-navigation {min-width:0;max-width:100%}
  .sidebar {position:fixed;z-index:70;top:12px;left:12px;bottom:auto;width:calc(100% - 64px);max-width:320px;height:calc(100vh - 24px);height:calc(var(--visible-height,100vh) - 24px);padding:24px 18px;display:flex;flex-direction:column;align-items:stretch;gap:20px;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-120%);visibility:hidden;pointer-events:none;background:rgba(24,57,71,.97)}
  .nav-open .sidebar {transform:translateX(0);visibility:visible;pointer-events:auto}
  .navigation {display:flex;flex-direction:column;align-items:stretch;width:100%;gap:4px;margin:0}
  .navigation>.nav-item {font-size:16px;padding:12px;text-align:left}
  .navigation>.disclosure>svg {margin-left:auto}
  .navigation>.submenu,.navigation>#games-menu,.navigation>#tools-menu {position:static;left:auto;top:auto;right:auto;min-width:0;width:auto;margin:0 0 5px 16px;padding:0 0 0 8px;border:0;border-left:1px solid var(--line);box-shadow:none;background:transparent;backdrop-filter:none}
  .sidebar-bottom {margin-left:0}
  .mobile-menu {display:grid;place-items:center;position:absolute;top:18px;right:18px;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));z-index:72;width:44px;height:44px}
  .nav-open .nav-scrim {position:fixed;inset:0;z-index:65;display:block;background:#0a223a4d;backdrop-filter:blur(5px)}
  .topbar {display:flex;align-items:center;gap:10px;padding:0 54px 0 0;min-height:44px;margin-bottom:20px}
  .topbar-navigation {gap:8px;flex-wrap:wrap}
  .topbar-right {display:flex;gap:8px;flex:none;margin-left:auto}
  .hello-status,.date {display:none}
  .breadcrumb {gap:6px;font-size:12px;flex-wrap:wrap}
  .page-back,.site-search-button {min-height:44px;padding:9px 12px;font-size:14px}
  .page:not(.home-page) {padding-top:24px;min-height:calc(100vh - 160px)}
  .home-page .hero {min-height:0;padding:26px 0 36px;align-items:flex-start}
  .hero h1.personal-title {font-size:clamp(30px,6vw,46px);line-height:1.45;overflow-wrap:anywhere}
  .hero-copy {width:100%;min-width:0}
  .hero-identity {gap:12px}
  .hero-identity .eyebrow {font-size:9px;letter-spacing:1px;overflow-wrap:anywhere}
  .scene-caption {display:none}
  .section-heading {align-items:flex-start;flex-wrap:wrap}
  .hero-description {max-width:100%;font-size:16px}
  .quick-links {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .quick-links .intro-card {padding:22px 18px;min-width:0}
  .page-heading {margin-bottom:24px}
  .page-heading h1,.hub-page .page-heading h1 {font-size:clamp(26px,5vw,34px);line-height:1.4;overflow-wrap:anywhere}
  .page-heading p {font-size:15px}
  .directory-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .directory-card {min-width:0;padding:24px 20px}
  .hub-navigation {gap:10px;align-items:stretch;max-width:100%}
  .hub-navigation>.directory-back {flex:none;padding:10px 12px}
  .route-picker {min-width:0;flex:1}
  .route-trigger {width:100%;min-width:0;gap:8px;padding:10px 12px}
  .route-picker .submenu {left:auto;right:0;min-width:0;width:100%;max-width:100%;max-height:55vh;max-height:calc(var(--visible-height,100vh) * .55);overflow-y:auto;overscroll-behavior:contain}
  .game-panel,.tool-panel {padding:22px 18px}
  .play-layout,.exp-layout,.scratch-layout,.fishing-layout,.coral-layout,.enhanced-grid,.enhanced-editor,.bpm-grid,.diagram-layout,.calendar-layout,.color-layout,.qr-layout,.fruit-layout {grid-template-columns:minmax(0,1fr);gap:22px}
  .play-layout>*,.exp-layout>*,.scratch-layout>*,.fishing-layout>*,.coral-layout>*,.enhanced-grid>*,.enhanced-editor>*,.bpm-grid>*,.diagram-layout>*,.calendar-layout>*,.color-layout>*,.qr-layout>* {min-width:0;max-width:100%}
  .game-guide {border-top:1px solid var(--line);padding-top:18px}
  .score-row {gap:10px;flex-wrap:wrap}
  .score-row>span {max-width:100%;overflow-wrap:anywhere}
  .score-row label {max-width:100%;min-width:0;flex-wrap:wrap}
  .custom-select,.score-row label .custom-select {min-width:0;max-width:100%}
  .score-row label .custom-select {width:auto;flex:1;min-width:100px}
  .select-trigger,.select-popover [role=option] {font-size:16px;min-height:44px}
  .tool-panel input:not([type=range]):not([type=checkbox]):not([type=color]),.tool-panel select,.tool-panel textarea,.studio-toolbar input:not([type=range]):not([type=checkbox]):not([type=color]) {min-width:0;max-width:100%;font-size:16px}
  .tool-panel input:not([type=range]):not([type=checkbox]):not([type=color]):not(.custom-native) {min-height:44px}
  .weather-search>label {flex:1 0 100%;min-width:0;max-width:100%}
  .weather-search>.button,.coordinate-form>.button {flex:1 0 auto;white-space:nowrap;max-width:100%;letter-spacing:0;font-size:14px;padding:12px 14px}
  .game-panel input:not([type=range]):not([type=checkbox]):not([type=color]):not(.custom-native) {font-size:16px;min-height:44px;max-width:100%;min-width:0}
  .direction-button {min-width:44px;min-height:44px}
  .direction-pad {grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,44px)}
  .form-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .form-grid>label {min-width:0}
  .form-grid input:not([type=checkbox]),.form-grid .custom-select {width:100%}
  .studio-toolbar,.calendar-toolbar {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
  .studio-toolbar>label,.calendar-toolbar>label {max-width:100%;min-width:0;width:100%}
  .studio-toolbar input:not([type=checkbox]):not([type=color]),.studio-toolbar .custom-select,.calendar-toolbar input,.calendar-toolbar .custom-select {width:100%;min-width:0}
  .studio-toolbar>.file-button {grid-column:1/-1}
  .studio-toolbar .button,.calendar-toolbar .button,.play-actions .button,.exp-actions .button,.enhanced-actions .button {min-height:44px;white-space:normal}
  .inline-check input,.check-field input {width:16px!important;min-height:0!important;flex:none}
  .contact-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .contact-card {padding:24px 20px;min-width:0}
  .contact-card h2 {font-size:clamp(24px,5vw,30px);overflow-wrap:anywhere}
  .contact-card p,.tool-result,.status-message,.studio-status,.exp-status {overflow-wrap:anywhere}
  .snake-board,.tiles-board,.tic-board,.gomoku-board,.mines-board,.sudoku-board,.tower-board {width:100%;height:auto;aspect-ratio:1 / 1;box-sizing:border-box}
  .mines-scroll,.diagram-scroll {max-width:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .mines-board.hard {min-width:480px}
  #snake-canvas {display:block;width:100%;height:100%}
  #tetris-canvas {display:block;width:100%;max-width:220px;max-width:clamp(160px,32vh,250px);height:auto;margin:auto}
  #flappy-canvas,.fruit-canvas {display:block;width:100%;max-width:300px;max-width:clamp(220px,44vh,360px);height:auto;margin:auto}
  #scratch-canvas,#fishing-canvas,#coral-canvas,#pixel-canvas {display:block;width:100%;height:auto;max-width:100%}
  .garden-tray {gap:4px;padding:10px 5px}
  .garden-slot {min-width:0}
  .calendar-grid,.calendar-week {grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .calendar-day {min-width:0;min-height:66px;padding:7px 2px}
  .calendar-day small {font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .calendar-detail {min-width:0}
  .model-stage {height:300px;height:clamp(240px,75vw,360px)}
  .cad-canvas {height:300px;height:clamp(240px,75vw,360px)}
  #map-canvas {height:320px;height:clamp(240px,55vh,400px);min-height:240px;min-width:0}
  .image-viewport {padding:8px;min-height:160px}
  .image-surface canvas {max-width:100%;max-height:52vh;width:auto;height:auto}
  .image-crop-box button {width:22px;height:22px}
  .video-preview {height:auto;max-height:55vh;min-height:0}
  .video-play-controls {gap:14px}
  .video-play-controls label {min-width:0;width:100%;justify-content:space-between}
  .video-play-controls input[type=range] {min-width:0;width:60%;max-width:220px;padding:0}
  .wave-stage {min-height:150px}
  #audio-wave {height:170px}
  .audio-converter {padding:18px 14px}
  .audio-convert-fields {grid-template-columns:repeat(2,minmax(0,1fr))}
  .bpm-parameter,.bpm-number,.bpm-transport {min-width:0;flex-wrap:wrap;gap:10px}
  .bpm-number input,.bpm-edit-row input {min-width:0;max-width:100%;font-size:16px}
  .bpm-transport>input {width:100%;flex:1 0 100%;min-width:0}
  .bpm-segments-list {grid-template-columns:minmax(0,1fr)}
  #bpm-wave {height:140px}
  .chart-stage {min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .chart-preview-toggle {display:inline-flex;min-height:44px;margin:0 0 12px;padding:9px 14px;font-size:14px}
  .chart-stage.is-expanded>svg {width:1000px;min-width:1000px;max-width:none;height:auto}
  .chart-colors {padding:12px}
  .chart-color-field input[type=color] {min-height:40px}
  .diagram-inspector {grid-template-columns:repeat(2,minmax(0,1fr))}
  .diagram-inspector input {max-width:100%;min-width:0;font-size:16px}
  .pdf-list>div {flex-wrap:wrap}
  .pdf-list span {flex-basis:100%}
  .pdf-preview-wrap {padding:8px}
  .question-card {min-width:0;padding:20px 14px}
  .answer-options[data-options] {grid-template-columns:minmax(0,1fr)}
  .answer-option {min-height:48px;white-space:normal}
  .assessment-evaluation,.support-note {padding:18px 14px}
  dialog {left:12px;right:12px;top:12px;top:calc(var(--visible-top,0px) + 12px);bottom:auto;margin:0 auto;width:calc(100% - 24px);max-width:640px;max-height:calc(100vh - 24px);max-height:calc(var(--visible-height,100vh) - 24px);padding:22px 16px;overflow:auto;box-sizing:border-box;overscroll-behavior:contain}
  .search-dialog {width:calc(100% - 24px);max-width:620px;padding:22px 16px}
  .search-dialog[open] {display:flex;flex-direction:column}
  .search-dialog h2 {padding-right:48px}
  #site-search-close {position:absolute;right:12px;top:12px;min-width:44px;min-height:44px}
  #site-search-input {font-size:16px;min-height:48px;flex:none}
  .search-tabs {flex:none;flex-wrap:wrap}
  .search-results {flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;padding:6px;overscroll-behavior:contain}
  .tower-battle-dialog {inset:auto 12px;top:12px;top:calc(var(--visible-top,0px) + 12px);margin:0 auto;width:calc(100% - 24px);height:auto;max-height:calc(var(--visible-height,100vh) - 24px);padding:22px 14px}
  .tower-battle-dialog .tower-fighter.hero {display:block;min-height:0;padding:0}
  .site-footer {gap:10px;flex-wrap:wrap;padding-top:24px}
  @supports (padding:max(0px)) {
    .sidebar {top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));height:calc(var(--visible-height,100vh) - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))}
    dialog,.search-dialog,.tower-battle-dialog {left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));width:calc(100% - max(12px,env(safe-area-inset-left)) - max(12px,env(safe-area-inset-right)))}
  }
}
@media (max-width:600px) {
  .breadcrumb-kicker,.breadcrumb-divider {display:none}
  .directory-grid,.contact-grid {grid-template-columns:minmax(0,1fr)}
  .home-page .hero {padding-top:20px}
  .game-panel,.tool-panel {padding:20px 14px}
  .directory-card {padding:22px 18px}
  .chart-color-grid {grid-template-columns:minmax(0,1fr)}
  .calendar-day {min-height:60px}
  .calendar-day strong {font-size:16px}
}
@media (max-width:420px) {
  .site-shell {padding-left:12px;padding-right:12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .mobile-menu {right:12px;right:max(12px,env(safe-area-inset-right))}
  .topbar {gap:6px}
  .quick-links,.form-grid,.conversion-row,.audio-convert-fields {grid-template-columns:minmax(0,1fr)}
  .conversion-row>* {grid-column:auto!important;grid-row:auto!important}
  .page-back,.site-search-button {padding:9px 10px}
  .hub-navigation {gap:7px}
  .hub-navigation>.directory-back,.route-trigger {padding:10px;font-size:13px}
  .game-panel,.tool-panel {padding:18px 12px}
  .studio-toolbar,.calendar-toolbar {gap:10px}
  .calendar-day small {font-size:10px}
  .diagram-inspector {grid-template-columns:minmax(0,1fr)}
  .editor-toolbar .button {flex:1 0 40%;min-width:0}
}
@media (max-width:900px) and (max-height:500px) {
  .home-page .hero {padding-top:12px;min-height:0}
  .model-stage,.cad-canvas,#map-canvas {height:240px}
  dialog,.search-dialog,.tower-battle-dialog {padding-top:16px;padding-bottom:16px}
  .sidebar {padding-top:16px;gap:12px}
}