/* Compact game-screen composition. Game and radio behavior remains in app.js. */
body { background: radial-gradient(circle at 50% 0, #f4faf8 0, transparent 24rem), var(--paper); }
.game-topbar { width:min(1240px, calc(100% - 32px)); height:58px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.game-topbar .brand img { width:154px; height:44px; max-height:none; object-fit:contain; object-position:left center; mix-blend-mode:multiply; }
.game-topbar .text-button { font-size:.78rem; padding:.42rem .55rem; }
.intro { max-width:1240px; margin:0 auto 8px; padding:0; text-align:left; display:flex; flex-wrap:wrap; align-items:baseline; gap:.18rem .65rem; }
.intro .eyebrow { order:3; flex-basis:100%; margin:0; color:#718190; font-size:.59rem; }
.intro h1 { font-size:1rem; line-height:1.2; letter-spacing:-.015em; margin:0; font-family:inherit; font-weight:780; }
.intro > p:last-child { margin:0; font-size:.82rem; color:var(--muted); }
.game-layout { width:min(1240px, calc(100% - 32px)); margin:0 auto; gap:16px; position:relative; }
.game-card { padding:16px; }
.game-meta { margin-bottom:7px; }
.message { height:18px; font-size:.76rem; }
.grid { gap:6px; }
.keyboard { margin-top:16px; gap:5px; }
.key { height:45px; }
.legend { margin-top:13px; }
.radio-card { padding:17px; top:72px; }
.radio-copy { margin:7px 0 11px; }
.station-genre { margin:.4rem 0 10px; }
.radio-status { min-height:2.4em; margin:9px 0 0; }

@media (min-width:1100px) {
  .game-layout { display:grid; grid-template-columns:minmax(330px,min(380px,33vw)) minmax(390px,1fr) minmax(270px,300px); grid-template-rows:auto auto; gap:12px 16px; align-items:stretch; }
  .game-card { display:contents; }
  .game-meta { grid-column:1 / -1; grid-row:1; margin:0; min-height:25px; padding:0; }
  .game-meta > div { gap:.4rem; }
  .message { grid-column:2; grid-row:2; position:absolute; align-self:start; justify-self:center; z-index:1; margin-top:4px; pointer-events:none; }
  .grid { grid-column:2; grid-row:2; width:390px; max-width:100%; margin:0 auto; padding:15px; background:#fff; border:1px solid rgba(17,45,72,.09); border-radius:18px; box-shadow:var(--shadow); align-self:start; }
  .tile { font-size:2rem; }
  #keyboard { grid-column:1; grid-row:2; align-self:center; width:min(100%,380px); min-height:0; margin:0; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; gap:5px; }
  .key { height:46px; border:1px solid #b8cad6; border-bottom-color:#9eb2c0; border-radius:7px; background:#e7eff4; box-shadow:0 2px 0 rgba(17,45,72,.13); font-size:.8rem; line-height:1; transition:background .12s ease,border-color .12s ease,box-shadow .12s ease,transform .08s ease; }
  .key:hover { background:#f0f6f8; border-color:#8ba8b9; filter:none; }
  .key:active { transform:translateY(1px); box-shadow:0 1px 0 rgba(17,45,72,.13); }
  .key.correct { border-color:var(--teal); border-bottom-color:#1b7776; box-shadow:0 2px 0 rgba(17,45,72,.18); }
  .key.present { border-color:var(--gold); border-bottom-color:#c88c31; box-shadow:0 2px 0 rgba(17,45,72,.18); }
  .key.absent { border-color:var(--slate); border-bottom-color:#586a79; box-shadow:0 2px 0 rgba(17,45,72,.18); }
  #keyboard .key-row { width:100%; min-width:0; gap:5px; justify-self:center; }
  #keyboard .key-row:nth-child(2) { width:90%; }
  #keyboard .key.wide { flex:1.6; min-width:0; font-size:.7rem; letter-spacing:-.015em; white-space:nowrap; }
  .legend { display:none; }
  .radio-card { grid-column:3; grid-row:2; min-height:224px; position:static; padding:18px; }
  .radio-heading h2 { font-size:1.28rem; }
  .radio-count { font-size:.59rem; }
}

@media (max-width:1099px) {
  .game-layout { margin-top:4px; }
  .intro { width:min(760px, calc(100% - 32px)); }
}

@media (min-width:801px) and (max-width:1099px) {
  #keyboard { width:min(100%, 490px); margin-left:auto; margin-right:auto; }
  #keyboard .key-row { width:100%; }
}

@media (max-width:800px) {
  .game-topbar { height:52px; width:calc(100% - 20px); }
  .game-topbar .brand img { width:140px; height:40px; max-height:none; }
  .intro { width:calc(100% - 20px); margin-bottom:9px; padding:0; }
  .intro h1 { font-size:.9rem; }
  .intro > p:last-child { font-size:.77rem; }
  .intro .eyebrow { font-size:.56rem; }
  .game-card { padding:14px 10px 16px; }
  .radio-card { padding:16px; }
}

@media (max-width:520px) {
  .game-topbar { height:48px; }
  .game-topbar .brand img { width:126px; height:36px; max-height:none; }
  .game-topbar .text-button { font-size:.72rem; }
  .intro { gap:.12rem .45rem; }
  .game-meta { margin-bottom:5px; }
  .key { height:43px; }
}

.key { display:grid; place-items:center; padding:0; text-align:center; }
.key.wide { padding:0 3px; line-height:1; white-space:nowrap; }

@media (min-width:1100px) {
  html[data-theme="dark"] #keyboard { background:transparent; border:0; box-shadow:none; }
  html[data-theme="dark"] .key { background:#29465e; border-color:#5b7890; border-bottom-color:#486a83; box-shadow:0 2px 0 rgba(0,0,0,.28); color:#f5f9fc; }
  html[data-theme="dark"] .key:hover { background:#35566e; border-color:#7799af; }
  html[data-theme="dark"] .key:active { box-shadow:0 1px 0 rgba(0,0,0,.28); }
  html[data-theme="dark"] .key.correct { background:#248f8d; border-color:#56c6bd; color:#fff; }
  html[data-theme="dark"] .key.present { background:#eab24e; border-color:#f5cc78; color:#142131; }
  html[data-theme="dark"] .key.absent { background:#526d84; border-color:#7894a8; color:#fff; }
}