.spectator-page{min-height:100dvh}
.spectator-page .site-header{gap:14px}.watch-heading{font-size:clamp(16px,2vw,24px);margin:0}.watch-home{font-size:13px;color:#2d4864;white-space:nowrap}
.watch-audio-tools{margin-left:auto;gap:12px}.watch-audio-settings{position:relative;font:13px 'Yu Gothic',sans-serif;color:#2d4864}.watch-audio-settings summary{cursor:pointer;white-space:nowrap;padding:8px 0}.watch-audio-panel{position:absolute;z-index:30;right:0;top:100%;width:290px;max-width:calc(100vw - 32px);padding:10px 16px 16px;background:#fffaf1;border:1px solid #d8b88f;border-radius:12px;box-shadow:0 8px 24px #53371b30}.watch-audio-panel .volume-setting{flex-wrap:wrap}.watch-audio-panel label{flex-basis:100%}.watch-audio-panel input{min-width:0}.spectator-page .site-header{flex-wrap:wrap}
.watch-setup{width:min(940px,calc(100% - 32px));margin:30px auto;padding:28px;background:#fffaf1;border:1px solid #d8b88f;border-radius:22px;box-shadow:0 12px 35px #53371b20}
.watch-setup h1{margin:0 0 10px}.watch-card-label,.watch-matchup{display:flex;align-items:center;justify-content:center;gap:14px;max-width:100%;font-weight:800;text-align:center}
.watch-card-label{font-size:clamp(19px,2.2vw,30px);margin:22px 0}
.watch-match-name{white-space:nowrap;letter-spacing:.04em}
.watch-versus{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid #bb9870;border-radius:7px;background:linear-gradient(145deg,#fffaf0,#edddc2);color:#93473f;font-size:.8em;line-height:1;box-shadow:0 2px 6px #78532c14}
.watch-fullscreen{min-width:110px;white-space:nowrap}
.watch-record-list{max-height:min(46dvh,420px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-color:#baa999 #f5f0e8;scrollbar-width:thin;padding:0 5px 0 0;border-radius:10px}
.watch-record-list:focus-visible{outline:2px solid #bf4253;outline-offset:2px}
.watch-record-row>span{min-width:0;flex:1}.watch-record-row small{display:block;margin-top:4px}
.watch-record-row strong{max-width:40%;font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.watch-pickers{display:grid;grid-template-columns:1fr 1fr;gap:25px}.watch-pickers label,.watch-extras label{display:flex;flex-direction:column;gap:9px;font-weight:700}
.watch-pickers select,.watch-extras select,.watch-speed select{font:inherit;color:#243e5c;border:1px solid #bca487;border-radius:9px;padding:10px;background:white;max-width:100%}
.watch-extras{display:flex;gap:22px;flex-wrap:wrap;margin:22px 0}.watch-setup-actions{display:flex;gap:12px;flex-wrap:wrap}.watch-records{margin-top:28px;border-top:1px solid #e0c8ac;padding-top:15px}
.watch-record-row{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;text-align:left;margin:8px 0;padding:12px;border-radius:10px;border:1px solid #dcc6a7;background:white;color:#2b4560;font:inherit}.watch-import{display:block;font-size:14px;margin:18px 0}.watch-import input{display:block;max-width:100%;margin-top:8px}
.watch-setup-layout{width:100%;max-width:1370px;min-height:calc(100dvh - 62px);margin:0 auto;padding:26px 30px;display:grid;grid-template-columns:minmax(0,800px) minmax(300px,1fr);gap:35px;align-items:start;background:transparent;border:0;border-radius:0;box-shadow:none}
.watch-config{max-height:none;overflow:visible}
.watch-config h1{font-size:clamp(26px,2vw,32px);line-height:1.5;letter-spacing:.04em}
.watch-config .watch-note{margin:10px 0 20px}
.watch-config .watch-pickers{border-top:1px solid #e8ded1;padding-top:18px}
.watch-config .watch-extras{border-top:1px solid #e8ded1;padding-top:18px;gap:24px}
.watch-config .watch-setup-actions{border-top:1px solid #e8ded1;padding-top:17px}
.watch-seat .watch-bubble.lower{white-space:pre-line}
.watch-seat .watch-bubble-text{display:block;height:100%;min-height:0;max-height:100%;overflow:hidden;overflow-wrap:anywhere;white-space:pre-line}
.watch-seat .watch-bubble.lower.luna-latest,.watch-seat .watch-bubble.lower.luna-latest::after{background:#fff0d3}
.watch-seat .watch-bubble.lower.luna-empty{visibility:hidden}
.watch-setup-layout>.watch-records{margin:0;padding:22px 24px;background:rgba(255,253,249,.96);border:1px solid rgba(183,151,115,.38);border-radius:22px;box-shadow:0 15px 46px rgba(67,45,26,.13);min-width:0}
.watch-records h2{font-size:22px;letter-spacing:.06em;margin:0 0 14px}
.watch-records .watch-import{margin:14px 0 10px}
.watch-records .watch-record-row{flex-direction:column;align-items:flex-start;gap:4px;font-size:15px}
.watch-records .watch-record-row strong{max-width:100%}
@media(max-width:1199px){.watch-setup-layout{max-width:940px;grid-template-columns:1fr;gap:20px}.watch-config{padding:22px 24px}}
/* Preparation uses the normal game's option buttons on desktop and mobile. */
.watch-seat-settings{min-width:0}.watch-seat-settings>[hidden]{display:none}
.watch-config .watch-setup-actions{align-items:center}.watch-config .watch-setup-actions>[data-watch=start]{margin-left:auto}
.watch-config .watch-home{text-decoration:none;text-align:center}
.watch-config .watch-pickers{gap:18px;border-top:0;padding-top:0}
.watch-config .watch-option-group{min-width:0;margin:0;padding:12px 0;border-top:1px solid #e8ded1}
.watch-config .watch-option-group legend{float:none;margin:0;padding:0 0 7px;font-size:15px;line-height:1.5;white-space:normal;letter-spacing:0}
.watch-config .option-grid{padding-top:0;gap:8px}
.watch-config .option-grid.watch-b-options,.watch-config .option-grid.watch-w-options,.watch-config .option-grid.watch-bThink-options,.watch-config .option-grid.watch-wThink-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.watch-config .option-grid.watch-clock-options{grid-template-columns:repeat(4,minmax(0,1fr))}
.watch-config .option{position:relative;display:block;min-width:0}
.watch-config .option-face{height:100%;min-height:48px;padding:9px 7px}
.watch-config .option-face strong{line-height:1.5;overflow-wrap:anywhere}
.watch-config .watch-extras{display:grid;grid-template-columns:1fr;gap:0;border-top:0;padding-top:0;margin:6px 0 10px}
@media(max-width:1100px){
 .mobile-setup-scene .watch-config .watch-pickers{gap:8px;margin:4px 0}
 .mobile-setup-scene .watch-option-group{padding:7px 0}
 .mobile-setup-scene .watch-option-group legend{font-size:13px;padding-bottom:5px}
 .mobile-setup-scene .watch-config .option-grid{gap:6px}
 .mobile-setup-scene .watch-config .option-face{min-height:40px;padding:5px 4px}
 .mobile-setup-scene .watch-config .option-face strong{font-size:13px;line-height:1.4}
 .mobile-setup-scene .watch-config .watch-extras{gap:0;margin:3px 0}
}
@media(max-width:599px){
 .mobile-setup-scene .watch-config .option-grid.watch-b-options,.mobile-setup-scene .watch-config .option-grid.watch-w-options{grid-template-columns:1fr}
}
/* Use the normal game's .game-layout, board, portrait and speech styles.
   Reserve stable conversation space inside the normal-sized manager card. */
.watch-layout{
  --normal-column-height:calc(100dvh - 124px);
  --board-stack-height:calc(var(--board-size) + 136px);
  --board-bottom-space:max(0px,calc((var(--normal-column-height) - var(--board-stack-height)) / 2));
  --speech-font-size:clamp(15px,1.15vw,21px);
  --speech-line-height:1.6;
  --speech-lines:3;
  --speech-stack-top:14px;
  --speech-stack-gap:16px;
  --normal-speech-height:calc(var(--speech-font-size) * 9.6 + 88px);
  --speech-slot-height:calc(var(--speech-font-size) * var(--speech-line-height) * var(--speech-lines) + 28px);
  --speech-reserved-height:var(--normal-speech-height);
  --seat-height:var(--normal-column-height);
  --record-width:148px;--watch-gap:12px;--hand-height:45px;--frame-extra:36px;--board-gap:5px;
  height:auto;gap:0;padding-top:0;max-width:1900px;padding-left:12px;padding-right:12px;padding-bottom:22px;
}
.watch-summary{display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center;height:72px;flex:none;margin:0;padding:3px 0 5px}
.watch-summary h1{font-size:clamp(22px,1.55vw,30px);line-height:36px;margin:0;white-space:nowrap}
.watch-summary p{margin:0;font:14px/20px 'Yu Gothic',sans-serif;white-space:nowrap}
.watch-feedback{height:44px;flex:none;display:flex;gap:12px;align-items:center;justify-content:center;overflow:auto}
.watch-summary .watch-result{display:flex;align-items:center;justify-content:center;gap:10px;max-width:100%;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:22px;line-height:28px;font-weight:800;letter-spacing:.04em;color:#843c31;text-align:center;margin:0;text-shadow:0 1px #fffaf1}
.watch-result-reason{display:inline-block;font-family:'Yu Gothic',sans-serif;font-size:13px;font-weight:700;line-height:20px;letter-spacing:0;color:#624b39;background:rgba(255,251,243,.94);border:1px solid #d2b691;border-radius:20px;padding:1px 10px;white-space:nowrap}
.watch-error{margin:0;padding:7px 12px;background:#fff0ed;border:1px solid #c77563;color:#8e302a;border-radius:9px;font:13px/1.4 'Yu Gothic',sans-serif}
.watch-columns{display:grid;grid-template-columns:minmax(0,1fr) var(--record-width) calc(var(--board-size) + 44px) var(--record-width) minmax(0,1fr);gap:var(--watch-gap);min-height:var(--seat-height);flex:none;align-items:start}
.watch-seat{height:var(--seat-height);min-height:0;max-height:none;width:100%;max-width:372px}
.watch-seat[data-seat=b]{justify-self:end}.watch-seat[data-seat=w]{justify-self:start}
.watch-seat .manager-stage{flex:1;min-height:0}
.watch-seat .watch-speech-stack{
  height:var(--speech-reserved-height);min-height:var(--speech-reserved-height);flex:none;
  gap:var(--speech-stack-gap);
  padding:var(--speech-stack-top) 5px calc(var(--speech-reserved-height) - var(--speech-slot-height) * 2 - var(--speech-stack-top) - var(--speech-stack-gap));
}
/* A wider text area fits three lines at the normal font size without taking
   height from the portrait. Text and font metrics remain shared with normal play. */
.watch-seat .watch-bubble{height:var(--speech-slot-height);padding-left:6px;padding-right:6px;flex:none}
.watch-right .manager-stage .watch-bubble{transform:rotate(2deg)}
.watch-right .manager-stage .watch-bubble.lower{transform:rotate(1.5deg)}
.watch-right .manager-stage .watch-bubble::after{left:22px;right:auto}
/* Match the normal portrait's container-unit sizing for SVG as well as IMG.
   The waiting SVG still restores the unmirrored name tag. */
.watch-seat .manager-stage .watch-portrait svg{
  width:calc(min(100cqw * var(--portrait-scale),100cqh * 1246 / 1262) * var(--portrait-width-factor));
  height:calc(min(100cqw * var(--portrait-scale) * 1262 / 1246,100cqh) * var(--portrait-height-factor));
  flex-shrink:0;display:block;overflow:hidden;
}
.watch-seat .manager-stage .watch-portrait .mirrored{transform:scaleX(-1)}
.watch-seat .manager-info{height:108px;min-height:108px}
.watch-seat-info strong,.watch-seat-info span{white-space:nowrap}
.watch-seat-info time{font-variant-numeric:tabular-nums;margin-left:8px}
/* Center the board in the same column height as a normal game. */
.watch-board-area{height:auto;align-self:start;justify-content:flex-start;gap:0}
.watch-board-stack{height:var(--normal-column-height);width:100%;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.watch-hand .hand-content{flex:1;min-width:0;flex-wrap:nowrap}
.watch-clock{flex-shrink:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.watch-controls{display:flex;align-items:center;gap:5px;width:max-content;max-width:calc(100% + var(--record-width) * 2 + var(--watch-gap) * 4 - 8px);margin:calc(8px - var(--board-bottom-space)) 0 0;flex:none;overflow-x:auto}
.watch-controls button{width:86px;height:36px;flex:0 0 auto;padding:7px 4px;border:1px solid #a3b6c5;border-radius:9px;background:#fff;color:#27415f;font:700 13px 'Yu Gothic',sans-serif;white-space:nowrap}
.watch-controls button[data-watch=pause],.watch-controls button[data-watch=resume]{width:76px}
.watch-controls button[data-watch=step]{width:128px}
.watch-controls button[data-watch=first]{width:94px}
.watch-controls button[data-watch=live]{width:120px}
.watch-controls button[data-watch=exit]{width:78px}
.watch-controls button:disabled{opacity:.45}
.watch-speed{display:flex;align-items:center;justify-content:center;gap:4px;width:136px;height:36px;flex:none;font:12px 'Yu Gothic',sans-serif;white-space:nowrap}
.watch-speed select{padding:4px;min-width:0}
.watch-speed-label-short{display:none}
.watch-record-panel{height:calc(var(--board-size) + var(--frame-extra));min-height:0;max-height:none;width:100%;margin:calc(var(--board-bottom-space) + var(--hand-height) + var(--board-gap)) 0 0;padding:10px 6px;border-radius:13px;flex:none;overflow:hidden}
.watch-record-heading{height:42px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding-bottom:8px}
.watch-record-panel h2{margin:0;font-size:14px;letter-spacing:.05em;white-space:nowrap}
.watch-record-heading .history-count{font-size:11px}
.watch-history{position:relative;min-height:0;max-height:none;display:block;scrollbar-gutter:stable;overflow-anchor:none}
.watch-history .history-empty{height:100%;border:0;background:transparent;padding:4px}
.watch-history .history-empty strong{font-size:12px;line-height:1.8}
.watch-history .history-row{grid-template-columns:1fr;grid-template-rows:14px 26px;height:52px;min-height:52px;padding:5px 6px;gap:0;font-size:15px;white-space:nowrap}
.watch-history .history-number{display:block;line-height:14px;text-align:left;font-size:11px;font-variant-numeric:tabular-nums}
.watch-history .history-row.current-preview{padding-left:6px;border-left:0;box-shadow:inset 2px 0 #a76d55}
.watch-history .history-row.current-preview .history-number::before{content:none}
.watch-history .history-move{padding:1px 0;height:26px;width:100%;display:flex;align-items:center;justify-content:center;min-width:0;white-space:nowrap;line-height:1.65}
.watch-history .move-notation{white-space:nowrap;overflow-wrap:normal}
.watch-history .history-move[aria-current=true]{background:#e6eef3;box-shadow:inset 0 0 0 1px #355675;border-radius:5px}
.watch-history .history-move[aria-current=true] .move-notation{font-weight:800}
.watch-move-placeholder{height:26px}
.watch-note{font:13px/1.7 'Yu Gothic',sans-serif;color:#526577}.watch-record-state{text-align:center;font-size:13px;color:#486079}
@media(max-width:1499px){
  .watch-layout{--board-stack-height:calc(var(--board-size) + 126px);--record-width:108px;--watch-gap:8px;--hand-height:40px}
  .watch-seat .watch-speech-stack{padding-left:2px;padding-right:2px}
  .watch-seat .watch-bubble{padding-left:2px;padding-right:2px}
  .watch-record-panel{padding:8px 4px}
  .watch-history .history-row{grid-template-columns:1fr;font-size:13px}
  .watch-controls{gap:3px}
  .watch-controls button{width:76px;font-size:12px}
  .watch-controls button[data-watch=pause],.watch-controls button[data-watch=resume]{width:66px}
  .watch-controls button[data-watch=step]{width:118px}
  .watch-controls button[data-watch=first]{width:84px}
  .watch-controls button[data-watch=live]{width:108px}
  .watch-controls button[data-watch=exit]{width:68px}
  .watch-speed{width:104px}
  .watch-speed select{width:76px}
  .watch-speed-label-full{display:none}
  .watch-speed-label-short{display:inline}
}
@media(max-height:800px){
  .watch-layout{
    --normal-column-height:calc(100dvh - 105px);--hand-height:37px;--board-gap:4px;--frame-extra:33px;
    --board-stack-height:calc(var(--board-size) + 115px);
    --speech-font-size:14px;--speech-line-height:1.55;
    --speech-stack-top:13px;--speech-stack-gap:12px;
    --normal-speech-height:calc(var(--speech-font-size) * 9.6 + 76px);
    --speech-slot-height:calc(var(--speech-font-size) * var(--speech-line-height) * var(--speech-lines) + 24px);
  }
  .watch-seat .manager-info{height:92px;min-height:92px}
  .watch-board-stack{gap:4px}
  .watch-summary{height:60px;gap:0}.watch-summary h1{font-size:22px;line-height:30px}.watch-summary p{font-size:13px;line-height:20px}.watch-summary .watch-result{font-size:19px;line-height:24px}
  .watch-record-panel{padding-top:9px;padding-bottom:9px}
}
/* On narrower screens, move the seats to a second row rather than squeeze
   the board. The two equal record rails still flank the board on tablets. */
@media(min-width:1500px) and (max-width:1799px){.watch-layout{--record-width:120px;--watch-gap:8px}}
@media(max-width:1340px){
  .watch-layout{--record-width:90px}
  .watch-history .history-row{padding-left:2px;padding-right:2px}
  .watch-history .history-row.current-preview{padding-left:2px}
}
/* Four text lines fit inside the same conversation reservation on small,
   tall PC viewports. The portrait, card and board dimensions stay fixed. */
@media(min-width:1200px) and (max-width:1340px) and (min-height:801px){
  .watch-layout{--speech-stack-top:8px;--speech-stack-gap:6px;--speech-slot-height:calc(var(--speech-font-size) * var(--speech-line-height) * 4 + 12px)}
  .watch-seat .watch-bubble{padding-top:4px;padding-bottom:4px}
}
@media(max-width:1199px){
  html:has(#spectator-app:not([hidden]) .spectator-page),body:has(#spectator-app:not([hidden]) .spectator-page){min-width:0}
  .watch-layout{--board-size:min(58vh,560px,calc(100vw - 292px));padding:12px 16px 22px}
  .watch-columns{height:auto;grid-template-columns:var(--record-width) minmax(0,1fr) var(--record-width);gap:20px 12px}
  .watch-board-area{grid-column:2;grid-row:1}
  .watch-board-stack{height:auto}
  .watch-record-panel{margin-top:calc(var(--hand-height) + var(--board-gap))}
  .watch-record-panel[data-record-side=b]{grid-column:1;grid-row:1}
  .watch-record-panel[data-record-side=w]{grid-column:3;grid-row:1}
  .watch-seat{height:max(700px,var(--seat-height));min-width:0;max-width:min(372px,calc((100vw - 52px) / 2))}
  .watch-seat[data-seat=b]{grid-column:1/3;grid-row:2;justify-self:start}
  .watch-seat[data-seat=w]{grid-column:2/4;grid-row:2;justify-self:end}
  .watch-controls{margin-top:8px;max-width:calc(100% + var(--record-width) * 2 + 16px)}
  .watch-summary{height:76px;flex-direction:column;gap:4px}
  .watch-summary h1{font-size:24px}
}
@media(max-width:759px){
  .watch-layout{--board-size:min(58vh,560px,calc(100vw - 76px))}
  .watch-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .watch-board-area{grid-column:1/-1;grid-row:1}
  .watch-controls{max-width:100%}
  .watch-record-panel{margin:0;height:260px}
  .watch-record-panel[data-record-side=b]{grid-column:1;grid-row:2}
  .watch-record-panel[data-record-side=w]{grid-column:2;grid-row:2}
  .watch-seat[data-seat=b]{grid-column:1/-1;grid-row:3;justify-self:center}
  .watch-seat[data-seat=w]{grid-column:1/-1;grid-row:4;justify-self:center}
  .watch-seat{width:min(100%,380px);max-width:372px}
  .watch-pickers{gap:12px}.watch-setup{padding:22px 16px}.watch-heading{font-size:15px}
  .spectator-page .site-header{height:auto;min-height:62px;padding:10px 16px}
  .watch-summary{height:84px}.watch-summary h1{font-size:18px;line-height:30px;gap:7px}.watch-summary p{font-size:12px}
  .watch-versus{width:27px;height:27px}
  .watch-card-label{font-size:18px;gap:7px}
  .watch-record-row{flex-direction:column;align-items:flex-start;gap:4px}.watch-record-row strong{max-width:100%}
  .watch-record-list{max-height:360px}
  .watch-pickers,.watch-extras{gap:12px}.watch-extras label{max-width:100%}
  .watch-audio-tools{flex-wrap:wrap;justify-content:flex-end;gap:9px}
  .watch-heading{margin-left:auto}
  .watch-summary .watch-result{font-size:17px;line-height:22px;white-space:normal;max-width:100%;flex-wrap:wrap;gap:3px 8px}
  .watch-result-reason{font-size:12px;line-height:18px;padding:0 8px}
}
/* Keep the normal game's column start (47px / 35px below the header).
   Lower only the matchup/result into the space above the upper hand tray. */
@media(min-width:1200px){
  .watch-summary{height:47px;gap:0;padding:0;position:relative;top:24px}
  .watch-summary h1{font-size:24px;line-height:26px}
  .watch-summary p{line-height:21px}
  .watch-summary .watch-result{font-size:19px;line-height:21px}
  .watch-result-reason{font-size:12px;line-height:17px;padding:0 9px}
}
@media(min-width:1200px) and (max-height:800px){
  .watch-summary{height:35px;top:6px}
  .watch-summary h1{font-size:20px;line-height:19px}
  .watch-summary .watch-versus{width:22px;height:22px;border-radius:5px}
  .watch-summary p{line-height:16px}
  .watch-summary .watch-result{font-size:16px;line-height:16px}
  .watch-result-reason{font-size:10px;line-height:12px}
}