/* Games share the home page's paper, ink, serif type and small line illustrations. */
.stop-dialog:has(.game-panel:not([hidden])) { width: min(920px,calc(100vw - 36px)); }
.stop-dialog[data-stop='fit']:has(.game-panel:not([hidden])) { width: min(760px,calc(100vw - 36px)); }
.stop-dialog .game-panel { padding: 30px 36px 36px; }
.game-heading { display: flex; align-items: center; gap: 22px; padding-bottom: 21px; margin-bottom: 18px; border-bottom: 3px double #a68b646b; }
.game-heading > div { min-width: 0; }
.game-illustration { width: 66px; height: 76px; flex: none; fill: none; stroke: #302d25; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.game-heading .eyebrow { margin: 0 0 8px; font-size: .6875rem; letter-spacing: .19em; }
.stop-dialog .game-heading h3, .stop-dialog #fit .game-heading h3 { margin: 0; font-size: clamp(1.8rem,4vw,2.5rem); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; }
.game-panel > p { max-width: 680px; }
.game-panel .player-field { max-width: 380px; margin: 23px 0; font: .9375rem/1.45 var(--serif); color: #5c594b; }
.game-panel .player-field input { border: 0; border-bottom: 1px solid #9e8059; border-radius: 0; background: #fff9eb80; font: 1.125rem/1.4 var(--serif); color: var(--ink); padding: 11px 10px; }
.game-panel .player-field input::placeholder { color: #91826c; font-style: italic; }
.game-panel .primary, .game-panel .secondary, .game-panel .move-button { font-family: var(--serif); min-height: 48px; border-radius: 1px; letter-spacing: .015em; }
.game-panel .primary { box-shadow: inset 0 0 0 3px var(--burgundy),inset 0 0 0 4px #f9ecd14d; padding-inline: 23px; }
.game-panel .primary:not(:disabled):hover { background: #6b2433; }
.game-panel .secondary { color: #645337; background: #fff7e8; border-color: #a88d62; }
.game-panel .game-stats { flex-wrap: wrap; gap: 12px 20px; padding: 13px 0; margin: 16px 0; border-top: 3px double #a68b646b; border-bottom: 1px solid #a68b646b; font-family: var(--serif); }
.game-panel .game-stats > strong { color: var(--burgundy); font-size: 1.2rem; font-weight: 400; }
.game-panel .game-stats > span { color: #6f6552; font-style: italic; }
.game-panel .coach-toggle { min-height: 40px; border-radius: 1px; font-family: var(--serif); border-color: #ad9571; background: #fff7e6; color: #5d5141; }
.game-panel .gym-scene { border: 5px solid #fff7e6; border-radius: 0; outline: 1px solid #a68b64; outline-offset: 0; box-shadow: 0 4px 0 #a68b641c; }
.game-panel .coach-speech { background: #fff8eaf5 url('assets/paper-grain.svg'); color: #403b2e; border: 3px double #9d8058; border-radius: 0; padding: 12px; font: italic .9375rem/1.4 var(--serif); box-shadow: 2px 3px 0 #46321b17; }
.game-panel .coach-name { font: .625rem/1.3 var(--serif); letter-spacing: .16em; color: var(--burgundy); margin-bottom: 7px; }
.game-panel .workout-label { background: #344c3eed; border: 1px solid #e9dab994; font-family: var(--serif); letter-spacing: .14em; color: #fff5df; }
.game-panel .move-prompt { margin-top: 12px; padding: 17px 0; }
.game-panel .move-prompt span { font-family: var(--serif); letter-spacing: .12em; }
.game-panel .move-prompt strong { font-size: 1.9rem; }
.game-panel .move-button { background: #fff9ec; border: 3px double #ad9673; color: #5a5140; font-weight: 400; font-size: 1.1rem; }
.game-panel .move-button:not(:disabled):hover, .game-panel .move-button:not(:disabled):active { background: #e8e6d4; border-color: var(--green); color: #304c3b; }
.game-panel .game-actions { gap: 12px; margin-top: 22px; }
.game-panel .game-result { border: 3px double #6476538a; border-radius: 0; background: #eae9d980 url('assets/paper-grain.svg'); font: 1.0625rem/1.55 var(--serif); color: #39503d; padding: 17px; }
.game-panel .game-result[data-result='lose'] { background-color: #f1e4d5; border-color: #ad6a5680; color: #773c31; }
.game-panel .leaderboard { margin-top: 32px; padding-top: 23px; border-top: 3px double #a68b6480; }
.game-panel .leaderboard h4 { font-weight: 400; font-style: italic; font-size: 1.5rem; color: #3b4938; }
.game-panel .leaderboard-status { color: #84745c; font-style: italic; }
.game-panel .leaderboard-list { border-top: 1px solid #a68b6440; }
.game-panel .leaderboard-list li { padding: 13px 10px; border-bottom-color: #a68b6440; font-family: var(--serif); }
.game-panel .leaderboard-list li:first-child:not(.leader-empty) { background: #e7dec880; border-radius: 0; }
.game-panel .leaderboard-list strong { font-weight: 400; font-size: 1.1rem; }
.game-panel .leader-rank { color: #9a7441; font-style: italic; }
.game-panel .leader-empty { font-style: italic; }

/* Piano lanes read like music stationery, with burgundy notes and ivory keys. */
.stop-dialog #guitar .prize-note { border: 0; border-block: 1px solid #ad946b66; background: #ece2ca66; color: #773341; font-weight: 400; font-style: italic; padding: 14px 16px; }
.stop-dialog .game-panel .hero-game { gap: 24px; margin-top: 24px; }
.piano-game { min-width: 0; }
.game-panel .music-scorebar { color: #695d49; font-family: var(--serif); padding-bottom: 9px; border-bottom: 3px double #a68b646b; margin-bottom: 15px; }
.game-panel .music-scorebar strong { color: var(--burgundy); font-size: 1rem; font-weight: 400; }
.game-panel .music-scorebar > span { font-style: italic; }
.game-panel .note-highway { height: 320px; border: 1px solid #a68b64; border-bottom: 0; border-radius: 0; background-color: #f2e8d3; background-image: repeating-linear-gradient(0deg,transparent 0,transparent 23px,#b69c6f20 23px,#b69c6f20 24px),url('assets/paper-grain.svg'); box-shadow: inset 0 9px 20px #96836318; }
.game-panel .note-highway .lane { border-right: 1px solid #a68b6440; background: transparent; }
.game-panel .note-highway .lane:last-of-type { border-right: 0; }
.game-panel .note-highway .hit-zone { height: 3px; background: #802c3c; box-shadow: 0 -5px 0 #802c3c15; }
.game-panel .piano-note { background: #802c3c; color: #fff6e2; border: 1px solid #5c2630; border-radius: 50% 50% 45% 45%; height: 32px; box-shadow: 1px 2px 0 #53302225; font: 1rem var(--serif); }
.game-panel .piano-keyboard { gap: 2px; padding: 0 3px 5px; border: 1px solid #524a3c; background: #35372f; border-radius: 0; }
.game-panel .piano-key { height: 104px; background: linear-gradient(#fff9ec,#f1e6cc); border-color: #bfa67f; border-bottom: 5px solid #af9872; border-radius: 0; color: #453c2f; }
.game-panel .piano-key:active, .game-panel .piano-key.pressed { background: #d8bd81; border-bottom-width: 2px; color: #5b3029; }
.game-panel .piano-key:focus-visible { outline-color: var(--burgundy); }
.game-panel .key-note { font-weight: 400; }
.game-panel .piano-key kbd { font-family: var(--serif); color: #78664c; }
.game-panel .guitar-controls { align-content: start; gap: 16px; padding: 16px; border: 3px double #a68b647a; background: #fff8e940; }
.game-panel .guitar-controls .primary, .game-panel .guitar-controls .secondary { width: 100%; }
.game-panel .video-frame { min-width: 200px; background: #e9dfc9; border: 1px solid #a68b646b; }
.game-panel .video-frame iframe { border-radius: 0; }
.game-panel .music-status { font-style: italic; }
.game-panel .game-fineprint { font-size: .8125rem; color: #7a6d56; }

/* An illustrated vintage shop catalogue on the same ivory paper. */
.game-panel .thrift-target { grid-template-columns: 1fr 1.3fr; border: 3px double #a68b6480; border-radius: 0; padding: 22px; gap: 24px; background: #efe6d166 url('assets/paper-grain.svg'); }
.game-panel .thrift-target h4 { color: #3c5948; font-style: italic; font-size: 1.75rem; }
.game-panel .target-piece { font-family: var(--serif); font-size: .8125rem; color: #665b46; }
.game-panel .target-piece .item-art { width: 82px; max-width: 100%; margin: auto; }
.game-panel .wardrobe { gap: 24px; }
.game-panel .wardrobe legend { font: italic 1.2rem var(--serif); color: #4b533e; padding-bottom: 9px; }
.game-panel .wardrobe-options { gap: 14px; }
.game-panel .outfit-tile { position: relative; grid-template-columns: 1fr; justify-items: center; padding: 12px 10px 15px; gap: 8px; text-align: center; background: #fff9ed; border: 1px solid #aa906a80; border-radius: 0; box-shadow: inset 0 0 0 4px #fff9ed,inset 0 0 0 5px #aa906a25; }
.game-panel .outfit-tile .item-art { width: 100%; max-width: 112px; }
.game-panel .outfit-tile .item-name { font: 1rem/1.35 var(--serif); color: #5f503b; overflow-wrap: normal; }
.game-panel .outfit-option input:checked + .outfit-tile { background: #e8eadc; border-color: #3c5948; box-shadow: inset 0 0 0 4px #e8eadc,inset 0 0 0 5px #3c594870; }
.game-panel .outfit-option input:checked + .outfit-tile::after { content: '✓'; position: absolute; top: 6px; right: 7px; width: 22px; height: 22px; background: #3c5948; color: #fff6e2; border-radius: 50%; display: grid; place-items: center; font: .875rem var(--serif); }
.game-panel .outfit-option:hover .outfit-tile { border-color: #3c5948; }
.game-panel .thrift-status { font-family: var(--serif); font-style: italic; }
@media(max-width:760px) {
  .stop-dialog .game-panel { padding: 25px 24px 28px; }
  .stop-dialog .game-panel .hero-game { grid-template-columns: 1fr; }
  .game-panel .guitar-controls { grid-template-columns: 1fr; }
  .game-panel .video-frame { width: 100%; max-width: 420px; }
}
@media(max-width:640px) {
  .stop-dialog:has(.game-panel:not([hidden])), .stop-dialog[data-stop='fit']:has(.game-panel:not([hidden])) { width: calc(100vw - 16px); }
  .stop-dialog .game-panel { padding: 22px 17px 28px; }
  .game-heading { gap: 13px; padding-bottom: 19px; }
  .game-illustration { width: 42px; height: 59px; }
  .stop-dialog .game-heading h3, .stop-dialog #fit .game-heading h3 { font-size: 1.7rem; line-height: 1.22; }
  .game-heading .eyebrow { font-size: .625rem; letter-spacing: .12em; }
  .game-panel .coach-speech { max-width: 51%; padding: 7px; font-size: .75rem; }
  .game-panel .coach-name { font-size: .5625rem; margin-bottom: 4px; }
  .game-panel .game-stats { gap: 10px; }
  .game-panel .coach-toggle { padding: 7px; font-size: .75rem; }
  .game-panel .move-prompt strong { font-size: 1.5rem; }
  .game-panel .move-button { font-size: 1rem; padding-inline: 6px; }
  .game-panel .note-highway { height: 270px; }
  .game-panel .thrift-target { grid-template-columns: 1fr; padding: 16px 12px; gap: 13px; }
  .game-panel .target-pieces { width: 100%; max-width: 300px; }
  .game-panel .target-piece .item-art { width: 70px; }
  .game-panel .wardrobe-options { gap: 8px; }
  .game-panel .outfit-tile { padding: 10px 5px 12px; }
  .game-panel .outfit-tile .item-art { max-width: 80px; }
  .game-panel .outfit-tile .item-name { font-size: .8125rem; }
  .game-panel .leaderboard h4 { font-size: 1.25rem; }
}