/* Only loaded on Concerto. Keep game geometry, input and audio untouched. */
#game-instruction { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:51; width:max-content; max-width:calc(100vw - 40px); margin:0; color:var(--color-primary); font:400 18px/1.5 var(--font-body); text-align:center; text-shadow:0 1px 8px rgba(0,0,0,.55); pointer-events:none; opacity:0; transition:opacity .4s ease; }
#game-instruction.visible { opacity:1; }
@media(prefers-reduced-motion:reduce) { #game-instruction { transition:none; } }
#game-hud { display:flex; max-height:calc(100dvh - 90px); overflow-y:auto; }
#game-hud:not(.active) #hud-game-state { display:none; }
.score-feedback, .score-board-status { font-family:var(--font-label, sans-serif); font-size:12px; line-height:1.5; letter-spacing:0; color:var(--color-primary); overflow-wrap:anywhere; }
.score-feedback:empty, .score-board-status:empty { display:none; }
.score-feedback { margin-top:10px; }
.score-feedback.error { color:#F2C4BE; }
.score-retry { margin:8px 0; padding:6px 10px; border:1px solid var(--color-border); background:none; color:var(--color-primary); cursor:pointer; font-family:var(--font-label, sans-serif); font-size:12px; }
.score-retry[hidden] { display:none!important; }
.score-empty { font-family:var(--font-body, sans-serif); font-size:12px; color:var(--color-secondary); }
.concerto-score-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:16px; padding:10px 0; border-bottom:1px solid var(--color-border); align-items:center; }
.concerto-score-row .hud-name { text-align:left; overflow-wrap:anywhere; }
.concerto-score-row .hud-pts { color:var(--color-accent); }
.own-score { background:var(--color-accent-soft); outline:1px solid var(--color-border); }
#hud-name-input { box-sizing:border-box; max-width:100%; }
#hud-submit:disabled { opacity:.5; cursor:wait; }
#hud-scores, #hud-name-entry.visible { pointer-events:auto; }
#game-hud:has(#hud-name-entry.visible) > #hud-feedback { display:none; }
@media(max-width:768px) {
  /* The full top 10 is always available in the existing game section; don't
     cover the mobile playing field with a ten-row fixed panel. */
  #hud-scores { display:none; }
  #game-hud { right:16px; width:min(200px,calc(100vw - 32px)); }
  #hud-name-entry.visible { overflow-y:auto; justify-content:safe center; box-sizing:border-box; }
  #hud-form-feedback { text-align:center; }
}
