/* Phone controls stay outside the original 4:3 picture. No browser fullscreen is required. */
.touch-device .touch-controls.ready{display:block}
.touch-controls .touch-heading,.touch-controls .touch-panel-label,.touch-controls .touch-hint{font-size:11px;color:var(--muted)}
.touch-controls .touch-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.touch-controls .touch-heading strong{font-weight:500;color:var(--ink)}
.touch-controls .touch-panel-label{display:block;text-align:center;margin:0 0 8px;font-size:9px;letter-spacing:.06em}
.touch-controls .touch-main{align-items:flex-start;justify-content:space-between;gap:12px}
.touch-controls .dpad{grid-template:repeat(3,48px)/repeat(3,48px);gap:3px}
.touch-controls .facepad{grid-template:repeat(3,52px)/repeat(3,57px);gap:3px}
.touch-controls button{min-height:44px;min-width:44px;-webkit-touch-callout:none;box-shadow:0 2px 0 #0005}
.touch-controls button.held,.touch-controls button.pressed,.touch-controls button:active{background:#536247;border-color:#b2c49e;color:#fff;box-shadow:inset 0 2px 4px #0004}
.touch-controls .facepad button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;line-height:1;padding:3px}
.touch-controls .facepad button>span{font-size:24px;line-height:22px}
.touch-controls .facepad small{font-size:9px;font-weight:500;line-height:1.1;letter-spacing:0}
.touch-controls .facepad .cross{background:#2d3541;border-color:#60738c}
.touch-controls .facepad .circle{background:#3b2924;border-color:#78574b}
.touch-controls .facepad .cross.held{background:#536784}
.touch-controls .facepad .circle.held{background:#8a5c4a}
.touch-controls .touch-utility{display:flex;justify-content:space-between;gap:18px;margin-top:12px}
.touch-controls .touch-utility-left,.touch-controls .touch-utility-right{display:flex;flex:1;gap:8px}
.touch-controls .touch-utility button{flex:1;font-size:11px;padding:9px 8px}
.touch-controls .touch-hint{margin:13px 0 0;line-height:1.6;font-size:10px;text-align:center}
.touch-controls .touch-hint strong{font-weight:500;color:#c4ceba}
/* Hybrid laptops can have a mouse and touch screen at the same time. */
@media(any-pointer:coarse){.touch-controls.ready{display:block}.control-dock{display:none}#app,#app:fullscreen{padding-bottom:env(safe-area-inset-bottom,0px)}}
.touch-device .control-dock{display:none}
.touch-device#app,.touch-device #app{padding-bottom:env(safe-area-inset-bottom,0px)}
@media(max-width:900px),(any-pointer:coarse){
  html{scroll-padding-bottom:env(safe-area-inset-bottom,0px)}
  body{min-width:320px;overscroll-behavior-y:contain}
  #app{padding:0 max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .control-dock{display:none}
  .topbar,.is-playing .topbar{min-height:62px;gap:8px}
  .wordmark{font-size:11px;gap:7px;letter-spacing:.07em}
  .wordmark small{font-size:5px;letter-spacing:.04em;max-width:130px}
  .seal{width:27px;height:34px;font-size:23px}
  .tools{gap:0}
  .tool{min-width:44px;min-height:44px;padding:8px;justify-content:center}
  .tool span:not(.tool-icon){display:none}
  .tool[aria-pressed=true]::after{display:none}
  #filter{display:none}
  #fullscreen.fullscreen-button{min-width:48px;padding:7px;border-color:transparent}
  #fullscreen.fullscreen-button .fullscreen-label{display:none}
  .tool-icon{font-size:22px}
  .arena,.is-playing .arena{margin-top:10px;max-width:680px}
  .modebar{gap:7px;padding-bottom:8px;flex-wrap:wrap;min-height:40px}
  .dojo-mode{gap:8px}
  .dojo-mode>.eyebrow,.opponent-picker>span{display:none}
  .modebar select,.opponent-picker select{font-size:16px;min-height:44px;padding:7px 8px;max-width:180px;border:1px solid var(--line);background:var(--panel);border-radius:3px}
  .round-actions{gap:12px;margin-left:auto}
  .round-actions .subtle-button{min-height:40px;font-size:10px;padding:8px 0}
  .round-actions .subtle-button span{margin-left:3px}
  .sparring-settings{padding:7px 9px;margin-bottom:8px;gap:5px;min-height:30px;flex-direction:row;align-items:center}
  .sparring-title{display:none}
  .sparring-settings p{font-size:9px;max-width:none}
  #gameContainer,#app[data-mode=versus] #gameContainer,.is-playing #gameContainer{max-width:100%;width:100%;margin-inline:auto;aspect-ratio:4/3}
  #boot{padding:10px 14px;overflow:auto;justify-content:safe center}
  #boot::before,#boot::after{top:12px;bottom:12px}
  #boot::before{left:9px}#boot::after{right:9px}
  .boot-ornament{display:none}
  .boot-ornament+.eyebrow{font-size:6px;letter-spacing:.13em;margin:0 0 9px}
  #boot h1{font-size:clamp(29px,8.2vw,54px);line-height:.94}
  .boot-copy{font-size:9px;line-height:1.5;margin:9px 0}
  .play-button{min-height:44px;min-width:165px;font-size:12px;padding:11px 16px}
  #bootStatus{font-size:9px;line-height:1.35;margin:7px 0 0;min-height:12px;max-width:280px}
  #progressTrack{margin-top:6px}
  .boot-footnote{position:static;margin-top:8px;font-size:5px;letter-spacing:.06em}
  #error{font-size:10px;line-height:1.4}
  #error button{min-height:44px}
  .touch-controls.ready{display:block;max-width:440px;margin:13px auto 5px;padding:12px 8px 10px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(150deg,#262d23,#1b211a)}
  .touch-controls:not(.ready){display:none}
  .touch-controls .rotate-hint{font-size:9px;color:#a9b59c}
  .music-strip,.is-playing .music-strip,#app[data-mode=versus] .music-strip{max-width:100%;padding:13px 0;gap:10px}
  .track-info{gap:8px;flex:1 1 130px}
  .track-info strong{font-size:11px}
  .track-info p>span{font-size:8px}
  .music-settings{display:flex;flex:1 1 220px;gap:8px;justify-content:flex-end}
  .music-toggle{min-height:44px;padding:9px 10px;font-size:10px}
  .music-settings label{gap:4px;font-size:8px;flex-direction:column;align-items:flex-start}
  .music-settings input{width:72px;height:28px;margin:0}
  .game-footbar,.is-playing .game-footbar{max-width:100%;padding:10px 0 5px}
  .game-footbar p:first-child{font-size:0}
  .game-footbar p:first-child::after{content:"Touch controls · gamepad also supported";font-size:9px}
  .game-footbar .hint-divider,.game-footbar kbd{display:none}
  .game-footbar p:last-child{display:none}
  .page-footer{margin-top:12px;padding:13px 0 16px;font-size:9px;gap:10px}
  .page-footer p span{display:none}
  .page-footer a{display:flex;align-items:center;min-height:44px;font-size:9px}
  .help-panel{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .help-dialog{padding:22px 15px}
  .close-help{width:44px;height:44px;flex:none}
  .help-heading h2{font-size:24px}
  .help-intro{font-size:12px}
  .controls-table{font-size:10px}
  .mode-notes{grid-template-columns:1fr}
  #roundPause h2{font-size:27px;margin:10px 0 18px}
  #roundPause .subtle-button{min-height:44px;margin:8px auto 0}
  #app.expanded-game,#app:fullscreen{padding:0 max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:auto}
  #app.expanded-game .arena,#app:fullscreen .arena{max-width:680px;margin-top:8px}
  #app.expanded-game #gameContainer,#app:fullscreen #gameContainer,#app.expanded-game .music-strip,#app:fullscreen .music-strip,#app.expanded-game .game-footbar,#app:fullscreen .game-footbar{max-width:100%}
}
@media(max-width:370px){
  .wordmark{font-size:10px}.wordmark small{font-size:4.5px;max-width:116px}.seal{display:none}
  .modebar select,.opponent-picker select{font-size:16px;max-width:155px}
  .round-actions{gap:9px}.round-actions .subtle-button{font-size:9px}
  .touch-controls.ready{padding-inline:6px}
  .touch-controls .dpad{grid-template:repeat(3,44px)/repeat(3,44px);gap:2px}
  .touch-controls .facepad{grid-template:repeat(3,48px)/repeat(3,44px);gap:2px}
  .touch-controls .facepad small{font-size:8px}
  .touch-controls .touch-main{gap:6px}
  .touch-controls .touch-utility{gap:12px}
  .touch-controls .touch-utility-left,.touch-controls .touch-utility-right{gap:6px}
  .touch-controls .touch-hint{font-size:9px}
}
/* Side-mounted thumb controls fit the game and hands together in landscape. */
@media(orientation:landscape) and (max-height:600px) and (max-width:1200px){
  #app.touch-device.is-playing,#app.touch-device.is-playing.expanded-game,#app.touch-device.is-playing:fullscreen{max-width:none;width:100%;min-height:100svh;padding:0 max(8px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .touch-device.is-playing .topbar,.touch-device.is-playing.expanded-game .topbar,.touch-device.is-playing:fullscreen .topbar{min-height:42px;height:42px;gap:10px;position:relative;z-index:5}
  .touch-device.is-playing .wordmark{font-size:10px}.touch-device.is-playing .wordmark small{display:none}.touch-device.is-playing .seal{width:25px;height:27px;font-size:20px}
  .touch-device.is-playing .tools .tool{min-height:40px;height:40px;padding:6px 10px}
  .touch-device.is-playing #fullscreen.fullscreen-button .fullscreen-label{display:inline;font-size:9px}
  .touch-device.is-playing #fullscreen.fullscreen-button{min-width:90px;gap:4px}
  .touch-device.is-playing .arena,.touch-device.is-playing.expanded-game .arena,.touch-device.is-playing:fullscreen .arena{max-width:none;margin:0;position:relative;padding-top:34px}
  .touch-device.is-playing .modebar{position:absolute;inset:0 0 auto;z-index:3;min-height:32px;height:32px;padding:0;gap:9px;flex-wrap:nowrap}
  .touch-device.is-playing .modebar select{font-size:16px;min-height:30px;height:30px;padding:2px 8px}
  .touch-device.is-playing .round-actions .subtle-button{font-size:10px;min-height:30px;padding:5px}
  .touch-device.is-playing .sparring-settings,.touch-device.is-playing .music-strip,.touch-device.is-playing .game-footbar,.touch-device.is-playing .page-footer{display:none}
  .touch-device.is-playing #gameContainer,#app.touch-device.is-playing.expanded-game #gameContainer,#app.touch-device.is-playing:fullscreen #gameContainer{width:min(calc(100% - 304px),calc((100svh - 83px - env(safe-area-inset-bottom))*4/3));max-width:none;margin:0 auto;aspect-ratio:4/3;min-height:0}
  .touch-device.is-playing .touch-controls.ready{display:block;position:absolute;inset:34px 0 0;max-width:none;margin:0;border:0;background:none;padding:0;pointer-events:none;border-radius:0}
  .touch-device.is-playing .touch-heading,.touch-device.is-playing .touch-hint{display:none}
  .touch-device.is-playing .touch-main{display:block;position:absolute;inset:0}
  .touch-device.is-playing .touch-movement,.touch-device.is-playing .touch-actions{position:absolute;top:calc(50% - 100px);width:146px}
  .touch-device.is-playing .touch-movement{left:0}.touch-device.is-playing .touch-actions{right:0}
  .touch-device.is-playing .touch-panel-label{font-size:8px;margin-bottom:5px}
  .touch-device.is-playing .touch-controls .dpad{grid-template:repeat(3,46px)/repeat(3,46px);gap:3px;justify-content:center}
  .touch-device.is-playing .touch-controls .facepad{grid-template:repeat(3,46px)/repeat(3,46px);gap:3px;justify-content:center}
  .touch-device.is-playing .touch-controls button{min-width:44px;min-height:44px;pointer-events:auto}
  .touch-device.is-playing .touch-controls .facepad button>span{font-size:22px;line-height:20px}
  .touch-device.is-playing .touch-controls .facepad small{font-size:8px}
  .touch-device.is-playing .touch-controls .touch-utility{position:absolute;inset:0;margin:0;display:block;pointer-events:none}
  .touch-device.is-playing .touch-utility-left,.touch-device.is-playing .touch-utility-right{position:absolute;bottom:4px;width:146px;gap:6px}
  .touch-device.is-playing .touch-utility-left{left:0}.touch-device.is-playing .touch-utility-right{right:0}
  .touch-device.is-playing .touch-utility button{font-size:10px;padding:6px;pointer-events:auto}
  .touch-device.is-playing .control-dock{display:none}
}
@media(orientation:landscape) and (max-height:350px) and (max-width:1200px){
  .touch-device.is-playing .topbar,.touch-device.is-playing.expanded-game .topbar,.touch-device.is-playing:fullscreen .topbar{height:38px;min-height:38px}
  .touch-device.is-playing .arena,.touch-device.is-playing.expanded-game .arena,.touch-device.is-playing:fullscreen .arena{padding-top:30px}
  .touch-device.is-playing .modebar{min-height:28px;height:28px}
  .touch-device.is-playing .touch-controls.ready{top:30px}
  .touch-device.is-playing #gameContainer,#app.touch-device.is-playing.expanded-game #gameContainer,#app.touch-device.is-playing:fullscreen #gameContainer{width:min(calc(100% - 290px),calc((100svh - 74px - env(safe-area-inset-bottom))*4/3))}
  .touch-device.is-playing .touch-movement,.touch-device.is-playing .touch-actions{top:0;width:140px}
  .touch-device.is-playing .touch-controls .dpad,.touch-device.is-playing .touch-controls .facepad{grid-template:repeat(3,44px)/repeat(3,44px);gap:2px}
  .touch-device.is-playing .touch-utility-left,.touch-device.is-playing .touch-utility-right{width:140px;bottom:0}
}

@media(orientation:landscape) and (max-height:600px) and (max-width:1200px){.touch-device.is-playing .touch-controls .dpad{pointer-events:auto}}
/* Starting in landscape should not bury Enter dojo below the fold. */
@media(orientation:landscape) and (max-height:600px) and (max-width:1200px){
  .touch-device:not(.is-playing) .topbar{min-height:42px}
  .touch-device:not(.is-playing) .arena{margin-top:5px}
  .touch-device:not(.is-playing) .sparring-settings{display:none}
  .touch-device:not(.is-playing) #gameContainer{max-width:min(100%,calc((100svh - 120px)*4/3))}
  .touch-device:not(.is-playing) #boot h1{font-size:clamp(25px,5vw,42px)}
  .touch-device:not(.is-playing) .boot-copy,.touch-device:not(.is-playing) .boot-footnote{display:none}
}
/* Small round modifiers sit directly beneath the action they complement. */
.touch-controls .facepad{grid-template-rows:52px 52px 52px 44px;row-gap:4px}
.touch-controls .facepad .round-run{grid-area:3/1}
.touch-controls .facepad .round-crouch{grid-area:3/3}
.touch-controls .facepad .round-hop{grid-area:4/2}
.touch-controls .facepad button.touch-round{position:relative;isolation:isolate;place-self:center;width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px;padding:0;border:0;border-radius:50%;background:transparent!important;box-shadow:none!important;font-size:9px;line-height:1;color:#dce5d6}
.touch-controls .facepad button.touch-round::before{content:"";position:absolute;inset:3px;z-index:-1;border-radius:50%;border:1px solid #65735b;background:#2c3628;box-shadow:0 2px 3px #0005}
.touch-controls .facepad button.round-hop::before{border-color:#697f9a;background:#293746}
.touch-controls .facepad button.round-crouch::before{border-color:#927361;background:#3c2e27}
.touch-controls .facepad button.touch-round.held::before,.touch-controls .facepad button.touch-round:active::before{background:#607654;border-color:#d1dfc9;box-shadow:inset 0 2px 3px #0004}
.touch-controls .touch-utility-left{flex:none;min-width:110px}
@media(max-width:370px){.touch-controls .facepad{grid-template-rows:48px 48px 48px 44px}}
/* The wider presentation stays inside the available phone width. */
@media(max-width:900px),(any-pointer:coarse){
  #app.is-playing #gameContainer{aspect-ratio:116/75}
  #app.is-playing #game{width:86.2068965517%!important;transform:scaleX(1.16);transform-origin:left center}
  #app.is-playing #game canvas{width:100%!important;height:100%!important;object-fit:fill}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1200px){
  .touch-device.is-playing .touch-controls .facepad{grid-template-rows:46px 46px 46px 44px;row-gap:3px}
  .touch-device.is-playing #gameContainer,#app.touch-device.is-playing.expanded-game #gameContainer,#app.touch-device.is-playing:fullscreen #gameContainer{width:min(calc(100% - 304px),calc((100svh - 83px - env(safe-area-inset-bottom))*116/75));aspect-ratio:116/75}
  .touch-device.is-playing #game{width:86.2068965517%!important;transform:scaleX(1.16);transform-origin:left center}
  .touch-device.is-playing #game canvas{width:100%!important;height:100%!important;object-fit:fill}
}
@media(orientation:landscape) and (max-height:350px) and (max-width:1200px){
  .touch-device.is-playing .touch-controls .facepad{grid-template-rows:44px 44px 44px 44px}
  .touch-device.is-playing #gameContainer,#app.touch-device.is-playing.expanded-game #gameContainer,#app.touch-device.is-playing:fullscreen #gameContainer{width:min(calc(100% - 290px),calc((100svh - 74px - env(safe-area-inset-bottom))*116/75));aspect-ratio:116/75}
}