/* Host presenter layer. Every rule is scoped to .game-card.has-host, which host-controller.js sets only while the
   host is shown; without it the stage keeps its original layout. The layer is decorative: no pointer events, no
   focus stops, drawn under the board and the round numbers so it can never cover them. */

.host-layer{position:absolute;right:0;bottom:0;z-index:0;pointer-events:none;user-select:none;overflow:hidden}
.host-layer .host-canvas,.host-layer .host-static{position:absolute;display:block}
.host-layer .host-canvas{inset:0;width:100%;height:100%;opacity:0;transition:opacity .25s}
.host-layer .host-static{max-width:none;opacity:0;transition:opacity .25s}
.host-layer.is-static .host-static{opacity:1}
.host-layer.is-live .host-canvas{opacity:1}
.host-layer.is-live .host-static{opacity:0;transition:opacity 0s .3s} /* stays under the canvas until it has faded in */
.host-label{position:absolute;right:10px;font-size:10px;line-height:1;color:#8b7d71;background:#ffffffd9;border:1px solid #eee5db;border-radius:6px;padding:5px 7px;letter-spacing:.2px}

/* ---- wide desktop: board left, host right, bank and timer above her head (as in the approved mockup) ----------- */
@media (min-width:1271px){
  .game-card.has-host .game-stage{position:relative;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;gap:0;min-height:584px;padding:0 18px 0 10px}
  /* the board is the main element of the scene, as large as the reference: ~0.9 of the stage height */
  .game-card.has-host .board-wrap{grid-column:1;grid-row:1/3;align-self:center;justify-self:center;position:relative;z-index:2;width:100%;max-width:548px;margin:-6px 0 4px}
  .game-card.has-host .round-summary{grid-column:2;grid-row:1;position:relative;z-index:3;display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:start;gap:2px 14px;padding:2px 2px 0 34px}
  .game-card.has-host .bank-label{grid-column:1;margin:0}
  .game-card.has-host .bank-value{grid-column:1;margin:2px 0 4px}
  .game-card.has-host .timer{grid-column:2;grid-row:1/3;margin:0}
  .game-card.has-host .timer-caption{grid-column:2;grid-row:3;margin:2px 0 0;text-align:center}
  .game-card.has-host .round-stats{grid-column:1;grid-row:3;flex-direction:row;gap:20px;border:0;padding:0;margin:0}
  .game-card.has-host .round-stats>div{gap:7px}
  .game-card.has-host .fair-note{display:none}
  .game-card.has-host .host-layer{top:96px;left:46%;right:26px}
  .game-card.has-host .host-label{top:31%;right:0}
}

/* ---- laptop, tablet and phone: bank and timer on top, board left, host right (as in the mobile mockup) ---------- */
@media (max-width:1270px){
  .game-card.has-host .game-stage{position:relative;display:flex;flex-direction:column-reverse;align-items:flex-start;padding:0 9px;gap:0;min-height:0}
  .game-card.has-host .round-summary{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto;align-items:center;padding:20px 10px 0;width:100%;gap:4px 8px}
  .game-card.has-host .bank-label{margin:0;grid-column:1}
  .game-card.has-host .bank-value{grid-column:1;grid-row:2}
  .game-card.has-host .timer{grid-column:2;grid-row:1/3;margin:0}
  .game-card.has-host .timer-caption{grid-column:2;grid-row:3;text-align:center;margin:2px 0 0}
  .game-card.has-host .round-stats{grid-column:1;grid-row:3;flex-direction:row;border:0;padding:0;margin:0;gap:14px}
  .game-card.has-host .round-stats>div{gap:6px}
  .game-card.has-host .fair-note{display:none}
  /* top margin keeps the tail of a dart stuck in a top sector clear of the bank figures above (≈ 0.15 board width) */
  .game-card.has-host .board-wrap{position:relative;z-index:2;width:58%;max-width:470px;margin:10% 0 -6px 8px}
  .game-card.has-host .host-layer{top:150px;width:76%}
  .game-card.has-host .host-label{top:36%;right:4px}
}
@media (max-width:1000px){
  .game-card.has-host .board-wrap{width:60%;margin:11% 0 -6px}
  .game-card.has-host .host-layer{top:112px;width:74%}
  .game-card.has-host .host-label{top:auto;bottom:12px;right:6px}
}
@media (max-width:760px){
  .game-card.has-host .board-wrap{width:62%}
  .game-card.has-host .host-layer{top:106px;width:72%}
  .game-card.has-host .host-label{font-size:9px;padding:4px 6px}
}
@media (max-width:370px){
  .game-card.has-host .board-wrap{width:64%}
  .game-card.has-host .host-layer{width:68%}
  .game-card.has-host .round-stats{gap:10px}
  .game-card.has-host .round-stats>div{white-space:nowrap;gap:4px}
}