/* Shared soft-game controls, on the existing white exhibition room. */
.game-ui {
  --ui-ink: #263c39;
  --ui-muted: #536b65;
  --ui-accent: #b8ebd7;
  --ui-accent-bottom: #7fcbb0;
  --ui-border: #bdcbc6;
  --ui-focus: #126b51;
  --ui-radius: 16px;
  --ui-height: 44px;
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --copper: #14694f;
  color: var(--ui-ink);
}
.game-ui button, .game-ui select, .game-ui input, .game-ui summary { font-family: "Helvetica Neue", "PingFang SC", sans-serif; }
.game-ui button:focus-visible, .game-ui select:focus-visible, .game-ui input:focus-visible, .game-ui summary:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}
.game-ui .topbar {
  height: 98px;
  padding: 0 32px;
  grid-template-columns: 1fr auto;
  gap: 24px;
  border: 0;
  background: linear-gradient(#fff 55%, #ffffffd9);
  z-index: 12;
}
.game-ui .identity { gap: 7px; }
.game-ui .identity strong {
  display: flex; align-items: center; gap: 10px;
  font: 900 25px/1.2 "Voice Matter Rounded", "PingFang SC", sans-serif;
  letter-spacing: .02em; color: #264e43;
}
.identity-dot { width: 11px; height: 11px; border-radius: 50%; background: #efbea4; box-shadow: inset 0 2px 2px #fff9, 0 2px 0 #cf9983; }
.game-ui .identity small { font: 500 12px/1.3 "PingFang SC", sans-serif; letter-spacing: .06em; color: var(--ui-muted); }
.header-tools { display: flex; align-items: center; gap: 20px; pointer-events: auto; }
.game-ui .counter { display: block; font: 500 12px/1.2 "PingFang SC",sans-serif; letter-spacing: 0; color: var(--ui-muted); }
.game-ui .counter b { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--ui-ink); margin-inline: 3px; }
.game-ui .status { font-size: 12px; letter-spacing: 0; gap: 8px; color: var(--ui-muted); }
.game-ui .status i { background: #7f958a; box-shadow: 0 0 0 4px #e9f0ec; }
.game-ui .status.listening { color: #14694f; }
.game-ui .status.listening i { background: #238265; }
.appearance-tools { position: relative; }
.game-ui .soft-control {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; height: var(--ui-height); min-width: 72px; padding: 0 15px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: linear-gradient(#fff, #f1f6f3); color: var(--ui-ink);
  box-shadow: 0 3px 0 #d8e3dc, inset 0 1px 0 #fff;
  font-size: 13px; font-weight: 650; letter-spacing: 0; cursor: pointer;
  transition: filter 120ms ease-out, transform 100ms ease-out, box-shadow 100ms ease-out;
  text-decoration: none; list-style: none;
}
.appearance-tools summary::-webkit-details-marker { display: none; }
.game-ui .soft-control:hover { filter: brightness(.96); transform: translateY(-1px); color: var(--ui-ink); border-color: var(--ui-border); }
.game-ui .soft-control:active { filter: brightness(.92); transform: translateY(2px) scale(.97); box-shadow: 0 1px 0 #d8e3dc; }
.game-ui button:disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }
.game-ui button[aria-busy="true"] { opacity: .7; cursor: wait; pointer-events: none; }
.game-ui .center-tools {
  position: absolute; top: 58px; right: 0; display: grid; gap: 14px;
  width: 326px; max-width: calc(100vw - 32px); padding: 20px; border-radius: 24px; background: #fff;
  max-height: calc(100vh - 160px); overflow-y: auto;
  box-shadow: 0 12px 40px #34544724, 0 3px 0 #dfeae4;
}
.game-ui .center-tools label { display: grid; gap: 6px; font: 600 12px/1.3 "PingFang SC",sans-serif; color: var(--ui-muted); letter-spacing: 0; }
.game-ui .center-tools select, .game-ui #language-select {
  height: var(--ui-height); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  padding: 0 12px; font: 600 13px/1.2 "PingFang SC",sans-serif;
  color: var(--ui-ink); background: #f7faf8; cursor: pointer; appearance: auto;
}
.game-ui .center-tools select { width: 100%; }
.sound-settings { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid #dbe6df; }
.sound-action-row { display: flex; gap: 8px; }
.game-ui .sound-action-row .soft-control { flex: 1; padding-inline: 8px; font-size: 12px; }
.sound-settings p { margin: 0; color: var(--ui-muted); font: 11px/1.6 "PingFang SC",sans-serif; overflow-wrap: anywhere; }
.game-ui .center-tools .music-volume { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
#music-volume { width: 100%; min-width: 0; height: 30px; accent-color: #32816a; cursor: pointer; }
.game-ui #music-button[aria-pressed="true"] { background: linear-gradient(#e5f7ee,#c5e8d8); }
#combo-hud {
  position: absolute; right: 30px; bottom: 190px; z-index: 9;
  width: 210px; padding: 14px 18px; display: grid; gap: 4px; text-align: center;
  color: #51384f; background: #fffaf2e6; border: 1px solid #fff;
  border-radius: 24px; box-shadow: 0 4px 0 #eadbcf8f, 0 8px 30px #62445112;
  pointer-events: none; --combo-accent: #d59cba; --combo-progress: 1;
}
#combo-hud[hidden] { display: none; }
.combo-caption { font: 600 11px/1.3 "PingFang SC",sans-serif; letter-spacing: .06em; }
#combo-count { font: 900 38px/1.05 "Voice Matter Rounded",sans-serif; font-variant-numeric: tabular-nums; }
#combo-reward { min-height: 17px; font: 650 12px/1.4 "PingFang SC",sans-serif; }
.combo-meter { height: 5px; overflow: hidden; border-radius: 5px; background: #eadfda; margin-top: 5px; }
.combo-meter i { display: block; width: 100%; height: 100%; transform-origin: left center; transform: scaleX(var(--combo-progress)); background: var(--combo-accent); border-radius: inherit; }
.game-ui[data-exhibit="true"] #combo-hud { bottom: 110px; }
.game-ui .controls {
  inset: auto 22px 14px; height: 94px; padding: 10px 20px 16px;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 22px;
  border: 1px solid #fff; border-radius: 28px;
  background: #ffffffed; box-shadow: 0 6px 0 #e3ece8, 0 14px 38px #244c3c12;
  backdrop-filter: blur(16px);
}
.input-tools { display: flex; align-items: end; gap: 16px; min-width: 0; }
.game-ui .input-field { display: grid; gap: 5px; min-width: 0; }
.game-ui .input-field>span { font-size: 11px; font-weight: 600; color: var(--ui-muted); padding-left: 4px; letter-spacing: 0; }
.game-ui #text-form { display: flex; flex: 1; align-items: end; gap: 8px; min-width: 0; }
.game-ui #text-form .input-field { flex: 1; }
.game-ui #text-input {
  width: 100%; min-width: 100px; height: var(--ui-height); padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: #f7faf8;
  color: var(--ui-ink); font-size: 14px;
}
.game-ui #text-input::placeholder { color: var(--ui-muted); }
.game-ui #language-select { width: 108px; }
.game-ui #send-button { min-width: 60px; padding: 0 12px; background: linear-gradient(#e5f7ee,#c5e8d8); border-color: #9abfae; box-shadow: 0 3px 0 #aacbbb; }
.game-ui #mic-button {
  width: 220px; height: 60px; margin-top: 13px; gap: 12px; padding: 0 16px 0 12px;
  border: 1px solid #80b9a3; border-radius: 22px;
  background: linear-gradient(#d8f6e9, var(--ui-accent)); color: #173e36;
  box-shadow: inset 0 2px 1px #fff, 0 5px 0 var(--ui-accent-bottom), 0 10px 20px #366c4826;
  transition: filter 120ms ease-out, transform 100ms ease-out, box-shadow 100ms ease-out;
}
.game-ui #mic-button b { font-size: 15px; letter-spacing: .02em; }
.game-ui #mic-button:hover { filter: brightness(.96); transform: translateY(-1px); }
.game-ui #mic-button:active { filter: brightness(.92); transform: translateY(3px) scale(.97); box-shadow: 0 2px 0 var(--ui-accent-bottom); }
.game-ui #mic-button[aria-pressed="true"] { background: linear-gradient(#ffeadb,#f3bba9); border-color: #cb927d; box-shadow: inset 0 2px 1px #fff,0 5px 0 #d6957f; color: #673924; }
.game-ui .mic-icon { width: 39px; height: 39px; background: #246e59; box-shadow: inset 0 2px 3px #143e3138; }
.game-ui #mic-button[aria-pressed="true"] .mic-icon { background: #91513b; }
.game-ui .actions { gap: 8px; margin-top: 13px; }
.game-ui .actions button { padding: 0 13px; }
.game-ui #stress-button { background: linear-gradient(#ffede3,#f8d5c6); border-color: #d7ae9b; box-shadow: 0 3px 0 #d9b5a4; color: #624333; }
.game-ui #stress-button[aria-pressed="true"] { background: #f3d8e9; color: #633655; border-color: #c79cb8; }
.game-ui #sound-button { min-width: 84px; font-size: 12px; }
#stress-banner {
  position: absolute; z-index: 11; top: 109px; left: 32px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  max-width: calc(100% - 420px); padding: 10px 12px 10px 16px;
  color: #624333; border: 1px solid #edd3c3; border-radius: 18px;
  background: #fff5eced; box-shadow: 0 3px 0 #edddd2;
  font: 600 12px/1.4 "PingFang SC",sans-serif;
}
#stress-banner[hidden] { display: none; }
#stress-performance { color: #67584c; font: 500 11px/1.4 Menlo,monospace; font-variant-numeric: tabular-nums; }
.game-ui #stress-stop { height: 32px; min-width: 70px; padding: 0 10px; font-size: 11px; border-radius: 12px; }
.game-ui[data-exhibit="true"] #stress-banner { top: 24px; left: 190px; }
.game-ui .shortcut { bottom: 2px; right: 40px; font: 500 10px/1.2 "PingFang SC",sans-serif; color: #536b65; letter-spacing: 0; }
.game-ui .utterance { left: 32px; bottom: 130px; gap: 5px; }
.game-ui .utterance small { font: 600 11px/1.3 "PingFang SC",sans-serif; letter-spacing: .06em; color: #536b65; }
.game-ui .utterance span { max-width: min(55vw,760px); font: 600 15px/1.4 "PingFang SC",sans-serif; color: #38554b; padding: 4px 9px; margin-left: -9px; background: #fffffff0; border-radius: 10px; }
.game-ui #exit-exhibit { display: none; position: absolute; left: 26px; top: 24px; z-index: 13; }
.game-ui #exit-exhibit kbd { font: 11px/1.2 inherit; color: #536b65; }
.game-ui[data-exhibit="true"] #exit-exhibit { display: inline-flex; }
.game-ui .horn { filter: drop-shadow(8px 15px 18px #455a5a21); }

@media (max-width: 1200px) {
  .game-ui .controls { gap: 14px; padding-inline: 16px; }
  .game-ui #mic-button { width: 194px; }
  .game-ui .actions button { min-width: 56px; padding-inline: 10px; font-size: 12px; }
  .input-tools { gap: 10px; }
  .game-ui #language-select { width: 92px; }
}
@media (max-width: 1000px) {
  .game-ui .topbar { padding-inline: 22px; }
  .game-ui .header-tools { gap: 12px; }
  .game-ui .status { display: none; }
  .game-ui .controls { height: 142px; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 16px; }
  .game-ui #mic-button { grid-column: 2; grid-row: 1 / 3; margin: 0; width: 205px; }
  .game-ui .actions { grid-column: 1; margin: 0; justify-self: start; }
  .game-ui .actions .soft-control { height: 30px; min-width: 72px; border-radius: 12px; font-size: 11px; }
  .game-ui .input-field>span { font-size: 10px; }
  .game-ui .utterance { bottom: 180px; }
  #combo-hud { bottom: 225px; width: 178px; padding: 10px 12px; right: 18px; }
  #stress-banner { left: 22px; max-width: calc(100% - 320px); font-size: 11px; }
  #stress-performance { width: 100%; }
}
@media (max-width: 650px) {
  .game-ui .identity strong { font-size: 20px; }
  .game-ui .identity small { display: block; font-size: 10px; }
  .game-ui .counter { display: none; }
  .game-ui .topbar { gap: 10px; padding-inline: 16px; }
  .game-ui .controls { left: 10px; right: 10px; grid-template-columns: 1fr; height: 224px; gap: 10px; }
  .game-ui #mic-button { grid-column: 1; grid-row: 2; width: 100%; height: 52px; justify-self: center; }
  .game-ui #mic-button b { font-size: 13px; }
  .game-ui .actions { grid-column: 1; grid-row: 3; justify-self: stretch; gap: 8px; }
  .game-ui .actions .soft-control { flex: 1; min-width: 52px; height: 34px; padding-inline: 7px; }
  .game-ui .utterance { bottom: 258px; left: 18px; }
  #combo-hud { bottom: 290px; width: 156px; right: 14px; }
  #combo-count { font-size: 30px; }
  .game-ui .header-tools { gap: 7px; }
  .game-ui #sound-button { min-width: 60px; padding-inline: 8px; font-size: 11px; }
  .game-ui .appearance-tools summary { min-width: 66px; padding-inline: 8px; font-size: 11px; }
  #stress-banner { top: 173px; left: 12px; max-width: calc(100% - 24px); }
  .game-ui[data-exhibit="true"] #stress-banner { top: 88px; left: 12px; }
  .game-ui .shortcut { display: none; }
}
@media (pointer: coarse) {
  .game-ui #stress-stop, .game-ui .actions .soft-control, .game-ui .vm-ledger__button { min-height: 44px; }
  .game-ui .controls { min-height: 144px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-ui button, .game-ui summary, .game-ui select { transition: none !important; }
  .game-ui button:hover, .game-ui button:active { transform: none !important; }
}