/* 9.2 Gold visible aspect: (598/1024 * 1.6204 * 1.08) / (1490/1536).
   The old CSS included transparent image margins; the canvas normalizes them.
   Restore that aspect without moving desktop controls, rows or symbols. */
body[data-room] .reel>.capsule-shell{
 left:-2.6771377%;right:auto;width:105.3542754%;
}

/* Everything below is phone-only. Desktop layout and scenery are untouched. */
@media(max-width:650px){
 /* Use the visible portrait stage, not Safari's taller layout viewport. */
 .world-scene{height:100svh;inset:0 0 auto}
 .scene-frame .scene-plane{
  inset:0;width:100%;height:100%;transform:none;
  background-size:cover;background-position:var(--phone-focus,50%) center;
 }
 .scene-frame[data-scene=gold]{--phone-focus:50%}
 .scene-frame[data-scene=blue]{--phone-focus:48%}
 .scene-frame[data-scene=red]{--phone-focus:85%}
 .scene-frame[data-scene=abyss]{--phone-focus:50%}
 .scene-frame[data-scene=star]{--phone-focus:52%}

 /* Preserve square symbol canvases, both at rest and throughout the spin. */
 body[data-room] .reels .symbol .symbol-art,
 body[data-room] .reels .symbol.center .symbol-art,
 body[data-room] .reels .strip-cell .symbol-art,
 body[data-room] .duel-instrument .symbol .symbol-art,
 body[data-room] .duel-instrument .strip-cell .symbol-art{
  width:calc(var(--row)*.94);height:calc(var(--row)*.94);
  max-width:82%!important;flex-shrink:0;
 }
 body[data-room] .reels .symbol-art canvas,
 body[data-room] .duel-instrument .symbol-art canvas{
  width:100%;height:100%;object-fit:contain;
 }

 /* One full-width machine per player. Self is first (blue); opponent second (red). */
 body[data-room] .duel-players{
  grid-template-columns:minmax(0,1fr);gap:14px;width:100%;max-width:430px;
 }
 body[data-room] .duel-player{
  display:grid;grid-template-columns:minmax(0,1fr) 78px;
  grid-template-areas:'head head' 'machine console' 'wallet wallet';
  gap:5px 8px;width:100%;min-width:0;padding:0;
 }
 body[data-room] .duel-player-head{grid-area:head;min-height:39px;width:100%;padding:5px 9px;margin:0;gap:4px}
 body[data-room] .duel-player-head h2{font-size:15px;max-width:68%;margin:0}
 body[data-room] .duel-player-head small{font-size:7px}
 body[data-room] .duel-player-head .duel-rounds{font-size:11px}
 body[data-room] .duel-player-head .bot-tag{font-size:6px}
 body[data-room] .duel-instrument{
  --row:clamp(36px,min(calc((min(430px,100vw - 56px) - 106px)/4.486),calc((100svh - 340px)/7.6)),76px);
  --reference-width:4.486;
  grid-area:machine;width:calc(var(--row)*4.486);gap:calc(var(--row)*.13);max-width:100%;
 }
 body[data-room] .duel-console{
  grid-area:console;grid-template-columns:minmax(0,1fr);align-content:center;
  padding:8px 5px;gap:14px;margin:0;min-height:110px;
 }
 body[data-room] .duel-console .duel-score{font-size:20px;text-align:center;overflow-wrap:anywhere}
 body[data-room] .duel-console .duel-score small{font-size:7px}
 body[data-room] .duel-console .platform-primary,
 body[data-room] .duel-console .opponent-status{height:40px;min-height:40px;font-size:11px}
 body[data-room] .platform-panel .duel-wallet{grid-area:wallet;font-size:8px!important;line-height:1.3;margin:0}
 body[data-room] .duel-result{font-size:10px;line-height:1.4;margin:6px 0}
 body[data-room] .duel-match-label{font-size:9px;overflow-wrap:anywhere}
 body[data-room] .duel-match-actions button{min-height:36px}
}