/* Portrait layouts are an additional layer. Desktop rules above 1100px stay intact. */
.pwa-orientation{display:none}
.pwa-update-banner{position:sticky;top:0;z-index:90;display:flex;align-items:center;justify-content:center;gap:12px 24px;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));background:#fff2d3;color:#49391f;border-bottom:2px solid #b68a42;box-shadow:0 3px 12px #50351420;font:700 14px/1.6 Meiryo,sans-serif}
.pwa-update-banner[hidden]{display:none}.pwa-update-banner p{margin:0;max-width:720px}.pwa-update-banner button{flex:none;min-height:44px;padding:9px 18px;border:1px solid #8e2639;border-radius:9px;background:#aa3046;color:#fff;font:700 14px/1.5 Meiryo,sans-serif;cursor:pointer}.pwa-update-banner button:disabled{background:#eee2ca;border-color:#c6b593;color:#6b604c;cursor:default}
@media(max-width:600px){.pwa-update-banner{flex-wrap:wrap;gap:8px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));font-size:13px}.pwa-update-banner p{flex-basis:100%}.pwa-update-banner button{width:100%}}
@media(max-width:1100px){
  .header-fullscreen,.watch-fullscreen{display:none!important}
  .game-scene .game-topbar>div:first-child{margin-left:0;min-width:0;flex:1 1 100%}
  .manager-stage .manager-portrait{overflow:hidden}
  .manager-stage .manager-portrait img,.watch-seat .manager-stage .watch-portrait img{object-fit:cover!important}
  .watch-seat .manager-stage .watch-portrait svg{width:auto!important;min-width:100%;max-width:none;aspect-ratio:1;flex-shrink:0}
}
.pwa-tools{font:13px/1.6 Meiryo,sans-serif;text-align:center;background:#fffaf1;color:#314a62;padding:6px 12px;padding-bottom:max(6px,env(safe-area-inset-bottom));border-top:1px solid #ddc6a5}
.pwa-tools:empty{display:none}.pwa-tools button{font:inherit;color:#29445e;background:#fff;border:1px solid #c5b69f;border-radius:8px;min-height:40px;padding:6px 12px;margin:3px 5px}
.pwa-message{margin:4px auto;max-width:760px}.pwa-install-help{max-width:620px;margin:8px auto;text-align:left}.pwa-tools details>summary{cursor:pointer}
@media(max-width:1100px){
  html,body,#app{min-width:0;height:auto;min-height:100%}
  body{overflow-x:clip}button,a,input,select{touch-action:manipulation}input,select,textarea{font-size:16px}
  button,input,select{max-width:100%}button:not(.square):not(.history-move){min-height:44px}
  .scene{overflow:clip;min-height:100dvh}.scene-background,.game-scene .scene-background{background-size:cover;background-position:center top}
  .site-header,.game-scene .site-header,.spectator-page .site-header{height:auto;min-height:62px;padding:calc(8px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));gap:8px;flex-wrap:wrap}
  .brand{gap:7px}.brand-name{font-size:20px}.brand-sub,.game-scene .brand-sub,.brand-divider,.game-scene .brand-divider{display:none}
  .header-status{position:static;transform:none;order:3;flex-basis:100%;text-align:center;font-size:12px;padding:5px}
  .header-actions{margin-left:auto;gap:6px}.header-settings{padding:6px 10px;font-size:12px}.icon-button{min-width:44px;width:44px;height:44px}
  .welcome-layout{min-height:0;padding:22px 14px 0;display:flex;flex-direction:column;gap:20px}
  .welcome-card{width:100%;max-width:620px;padding:25px 22px;backdrop-filter:none}.welcome-card h1{font-size:clamp(34px,7vw,52px);margin:18px 0}
  .welcome-lead{font-size:16px;line-height:1.8}.eyebrow{font-size:11px;letter-spacing:.06em;gap:8px}.welcome-actions{gap:8px}.welcome-actions .primary-button{font-size:16px;padding:12px 18px}
  .welcome-character{position:relative;inset:auto;width:260px;height:270px;flex:none}.welcome-speech{top:0;left:-12%;font-size:14px;padding:10px 16px}.vertical-copy{display:none}
  .setup-layout,.watch-setup-layout{display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:18px 12px;min-height:0;max-width:800px}
  .setup-card,.watch-config{max-height:none;overflow:visible;padding:22px 16px;width:100%}.setup-card h1,.watch-config h1{font-size:25px}
  .setup-aside{height:220px;flex:none}.setup-aside img{height:90%;max-width:220px}.setup-aside-bubble{left:55%;right:0;top:8%;font-size:13px;padding:10px}
  .option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.option-face{min-height:52px}.option-face strong{font-size:15px}.option-face small{font-size:11px}
  .setup-footer,.setup-footer-right{flex-wrap:wrap;gap:8px}.volume-setting{flex-wrap:wrap;gap:8px}.volume-setting input{min-width:80px;min-height:44px}
  .game-layout{--board-size:min(650px,calc(100vw - 52px - env(safe-area-inset-left) - env(safe-area-inset-right)));height:auto;max-width:800px;padding:12px max(10px,env(safe-area-inset-right)) 20px max(10px,env(safe-area-inset-left))}
  .game-topbar{height:auto;min-height:44px;flex-wrap:wrap;gap:8px;padding-bottom:10px}.game-topbar>div{gap:12px;flex-wrap:wrap}.game-top-title{font-size:15px}.game-top-note{font-size:12px}
  .game-columns{height:auto;display:flex;flex-direction:column;gap:16px;align-items:stretch}
  .manager-panel{--speech-font-size:16px;max-height:none;min-height:0;border-radius:18px;flex:none}
  .manager-stage{min-height:200px;display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center}
  .manager-stage::after{inset:5px;border-radius:13px}.manager-stage .speech-stack{grid-column:2;grid-row:1;min-height:0;height:auto;padding:12px 12px 18px 4px;gap:14px}
  .manager-stage .speech-bubble,.manager-stage .speech-bubble.second{font-size:16px;line-height:1.6;padding:10px 12px;border-radius:17px;transform:none;letter-spacing:.015em;box-shadow:3px 4px 0 #dcebf0}
  .manager-stage .manager-portrait{grid-column:1;grid-row:1;width:112px;height:190px;padding:0;align-self:end}
  .manager-stage .manager-portrait img,.watch-seat .manager-stage .watch-portrait svg{width:100%;height:100%;object-fit:contain;object-position:center bottom;flex:none}
  .manager-panel .manager-info{padding:9px 13px;gap:3px;min-height:0;height:auto}.manager-panel .manager-info small{font-size:11px}.manager-panel .manager-info strong{font-size:16px}.manager-panel .manager-info span{font-size:12px;white-space:normal}
  .board-column{min-height:0;gap:8px;justify-content:flex-start;width:100%}.board-frame{flex:none;max-width:100%}.piece{font-size:clamp(19px,5vw,36px)}
  .board-grid .square{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
  .hand-strip{width:100%;height:auto;min-height:54px;gap:6px;padding:5px 7px;flex-wrap:wrap}.hand-owner{font-size:11px;padding:5px 7px}.hand-content{flex-wrap:wrap;overflow:visible;min-width:0;flex:1 1 140px;white-space:normal;gap:5px}
  .hand-piece{min-width:40px;min-height:44px;padding:6px;font-size:21px}.hand-piece small{font-size:12px}.clock-chip{padding:6px;font-size:12px}
  .side-panel{gap:12px;display:flex}.info-card,.history-card,.action-card{padding:14px;border-radius:15px}.side-panel h2{font-size:20px}.info-row{font-size:14px}
  .history-card{min-height:180px}.history-list{max-height:320px;min-height:100px;flex:auto}.history-row{min-height:46px;font-size:14px}.history-move{min-height:36px}.game-actions button{min-height:48px;font-size:15px}
  .replay-controls{flex-wrap:wrap}.replay-controls button,.result-actions button,.retry-button,.exit-replay{min-height:44px;font-size:14px;padding:8px}.result-actions{gap:8px;font-size:14px}
  .game-modal{position:fixed;z-index:80;padding:env(safe-area-inset-top) 10px env(safe-area-inset-bottom)}.game-modal>div{max-height:85dvh;overflow:auto}.game-modal button{min-height:48px;font-size:17px}
  .game-toast{position:fixed;max-width:calc(100vw - 24px);bottom:max(18px,env(safe-area-inset-bottom));font-size:14px;white-space:normal}
  .review-layout,.full-review-layout{padding:18px 12px;min-height:0;gap:16px}.review-heading{gap:8px;min-width:0}.review-heading h1,.full-review-layout .review-heading h1{font-size:24px}.review-heading img{max-width:90px}.review-cards{grid-template-columns:1fr}.review-footer{flex-wrap:wrap}.review-variation-dialog{max-width:calc(100vw - 20px);max-height:90dvh;overflow:auto}
  .watch-heading{font-size:16px}.watch-audio-tools{gap:8px;flex-wrap:wrap}.watch-home{font-size:12px}.watch-fullscreen{min-width:85px}.watch-setup-layout>.watch-records{padding:20px 16px}.watch-record-list{max-height:360px}.watch-config .watch-pickers{gap:12px}.watch-pickers select{width:100%;font-size:16px}.watch-record-row{font-size:14px}
  .watch-layout{--seat-height:auto;--normal-column-height:auto;--board-bottom-space:0px;--speech-slot-height:108px;--speech-reserved-height:auto;--record-width:0px;max-width:800px;padding-top:10px}
  .watch-summary{position:static;top:auto;height:auto;min-height:76px;gap:5px;padding:0 0 12px}.watch-summary h1{font-size:clamp(17px,3.5vw,25px);line-height:1.6;white-space:normal;gap:6px}.watch-summary p{font-size:12px;white-space:normal;text-align:center}.watch-versus{width:26px;height:28px}
  .watch-columns{height:auto;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;width:100%}
  .watch-seat,.watch-seat[data-seat=b],.watch-seat[data-seat=w]{width:100%;max-width:none;height:auto;min-height:0;justify-self:stretch;grid-row:1}
  .watch-seat[data-seat=b]{grid-column:1}.watch-seat[data-seat=w]{grid-column:2}
  .watch-seat .manager-stage{display:flex;flex-direction:column;min-height:0}.watch-seat .watch-speech-stack{width:100%;height:auto;min-height:0;padding:8px 6px 14px;gap:12px}
  .watch-seat .manager-stage .watch-bubble{width:100%;height:108px;min-height:108px;padding:8px;font-size:15px;line-height:1.55;transform:none;border-radius:15px;letter-spacing:0}
  .watch-seat .manager-stage .watch-portrait{width:100%;height:155px;min-height:155px;flex:none}.watch-seat .manager-stage .watch-portrait img,.watch-seat .manager-stage .watch-portrait svg{width:100%;height:100%;object-fit:contain;object-position:bottom}
  .watch-seat .manager-info{padding:8px 10px;min-height:84px;height:auto}.watch-seat-info strong{font-size:14px;white-space:normal}.watch-seat-info span{font-size:11px}
  .watch-board-area{grid-column:1/-1;grid-row:2;width:100%;height:auto}.watch-board-stack{height:auto;gap:8px}.watch-hand .hand-content{flex-wrap:wrap;white-space:normal}
  .watch-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:100%;overflow:visible;margin:12px 0 0;gap:8px}
  .watch-controls button,.watch-controls button[data-watch]{width:auto;min-width:0;height:44px;font-size:13px;padding:7px}.watch-speed{width:auto;height:auto;min-height:44px;gap:6px;grid-column:1/-1;justify-content:flex-start}.watch-speed select{min-height:44px;width:auto;flex:1;font-size:16px}.watch-speed-label-short{display:none}.watch-speed-label-full{display:inline}
  .watch-record-panel{margin:0;height:290px;padding:10px 6px;width:100%}.watch-record-panel[data-record-side=b]{grid-column:1;grid-row:3}.watch-record-panel[data-record-side=w]{grid-column:2;grid-row:3}.watch-history{max-height:none}.watch-history .history-row{font-size:15px;height:52px;min-height:52px}.watch-history .history-move{min-height:26px}
  .watch-feedback{height:auto;min-height:0;padding-top:10px}.watch-feedback:empty{display:none}.watch-summary .watch-result{font-size:18px;line-height:1.5;flex-wrap:wrap;gap:4px 8px}.watch-result-reason{font-size:12px}
  .site-footer{padding-bottom:max(14px,env(safe-area-inset-bottom))}
}
@media(min-width:600px) and (max-width:1100px){
  .manager-stage{grid-template-columns:170px minmax(0,1fr);min-height:230px}.manager-stage .manager-portrait{width:170px;height:225px}.manager-stage .speech-bubble{font-size:18px}
  .watch-seat .manager-stage{display:grid;grid-template-columns:85px minmax(0,1fr)}.watch-seat .watch-speech-stack{grid-column:2;grid-row:1}.watch-seat .manager-stage .watch-portrait{grid-column:1;grid-row:1;width:85px;height:230px}.watch-seat .manager-info{min-height:80px}
  .side-panel{display:grid;grid-template-columns:1fr 1fr}.side-panel .history-card{grid-column:2;grid-row:1/3}.watch-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.watch-speed{grid-column:auto}
}
@media(max-width:599px){
  /* Give both speakers a readable full-width card; keep the board first. */
  .watch-board-area{grid-row:1}
  .watch-seat[data-seat=b]{grid-column:1/-1;grid-row:2}.watch-seat[data-seat=w]{grid-column:1/-1;grid-row:3}
  .watch-seat .manager-stage{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center}
  .watch-seat .watch-speech-stack{grid-column:2;grid-row:1;padding:12px 9px 18px 2px;gap:14px}
  .watch-seat .manager-stage .watch-bubble{font-size:16px;height:100px;min-height:100px;padding:9px}
  .watch-seat .manager-stage .watch-bubble.lower{height:160px;min-height:160px}
  .watch-seat .manager-stage .watch-portrait{grid-column:1;grid-row:1;width:80px;height:200px;min-height:200px}
  .watch-seat .manager-info{min-height:0;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 10px}
  .watch-record-panel[data-record-side=b],.watch-record-panel[data-record-side=w]{grid-row:4}
}
/* Device identity includes desktop-UA iPads; narrow PC windows stay usable. */
@media(orientation:landscape){
  .mobile-input-guard .pwa-orientation{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:#fff6e9f5 url('/assets/shop-background.png') center/cover;color:#243f5d;font:700 18px/1.6 'Yu Gothic',sans-serif;backdrop-filter:blur(8px)}
  .pwa-orientation-card{width:min(640px,100%);max-height:100%;padding:12px 24px 14px;background:#fffaf1f2;border:1px solid #c8ad82;border-radius:20px;box-shadow:0 8px 35px #4c351533;overflow:auto}
  .pwa-orientation-brand{font:800 23px/1.3 'Yu Mincho',serif;letter-spacing:.1em}.pwa-orientation-brand span{display:inline-grid;place-items:center;background:#b73249;color:#fff;width:26px;height:31px;font-size:17px;clip-path:polygon(50% 0,100% 18%,93% 100%,7% 100%,0 18%)}
  .pwa-orientation-welcome{display:grid;grid-template-columns:clamp(90px,25vh,200px) minmax(0,1fr);align-items:center;gap:15px;margin:4px 0 8px}
  .pwa-orientation-welcome img{display:block;width:100%;height:min(45dvh,220px);object-fit:contain}.pwa-orientation-welcome p{position:relative;margin:0;padding:17px 20px;background:#fff;border:2px solid #325977;border-radius:18px;color:#234c6a;font-size:clamp(16px,3.8vh,24px);line-height:1.6;text-align:left;box-shadow:0 4px 0 #d5e4e6}
  .pwa-orientation-card small{display:block;text-align:center;font-size:12px;font-weight:400}
}
@media(max-width:374px){
  .manager-stage{grid-template-columns:76px minmax(0,1fr)}.manager-stage .manager-portrait{width:76px;height:150px}
  .manager-stage .speech-bubble{font-size:14px;line-height:1.5;padding:8px}.manager-panel .manager-info{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px}
  .watch-seat .manager-stage{grid-template-columns:65px minmax(0,1fr)}.watch-seat .manager-stage .watch-portrait{width:65px;height:180px;min-height:180px}
}