/* The game screen: a ship terminal in the site's lilac and pink. */
.game-stage { padding: 12px; }
.game-notice {
  max-width: 720px;
  margin: 0 auto 8px;
  padding: 4px 10px;
  border: 1px dashed #ff9cc5;
  border-radius: 6px;
  background: var(--pink-pale);
  color: var(--pink-deep);
  font-weight: 700;
  text-align: center;
}
#game {
  --g-bg: #2c2750;
  --g-line: #6f64a8;
  --g-text: #f3effc;
  --g-soft: #b9afdf;
  --g-pink: #ff9cc5;
  --g-blue: #9fc4f5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  padding: 10px;
  border: 4px solid #4b3f72;
  border-radius: 8px;
  background: var(--g-bg);
  color: var(--g-text);
  font-size: 14px;
  line-height: 1.75;
}
.g-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.g-pov[data-pov="taeo"] { color: var(--g-blue); }
.g-pov[data-pov="yuri"] { color: var(--g-pink); }
.g-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; font-size: 12px; }
.g-meter { display: flex; align-items: center; gap: 6px; }
.g-meter-name { flex: none; width: 2.6em; color: var(--g-soft); }
.g-meter-track { flex: 1; height: 8px; border: 1px solid var(--g-line); background: #1d1a38; }
.g-meter-fill { display: block; height: 100%; background: var(--g-blue); transition: width .3s; }
.g-meter-value { flex: none; width: 2em; text-align: right; }
.g-meter.low .g-meter-fill { background: #ff6f91; }
.g-meter.low .g-meter-value,
.g-meter.low .g-meter-name { color: #ff9cb0; font-weight: 700; }
.g-log {
  height: 340px;
  padding: 10px 12px;
  overflow-y: auto;
  border: 1px solid var(--g-line);
  background: #1d1a38;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.g-line { margin: 0 0 8px; }
.g-who { display: block; font-size: 12px; font-weight: 700; color: var(--g-soft); }
.g-speech[data-who="태오"] .g-who { color: var(--g-blue); }
.g-speech[data-who="유리"] .g-who { color: var(--g-pink); }
.g-note { margin: 0 0 8px; color: var(--g-soft); font-size: 12px; }
.g-note-day { color: #ffe08a; font-weight: 700; }
.g-note-picked { color: var(--g-pink); }
.g-note-record { color: #ffe08a; font-weight: 700; }
.g-note-recordbody { padding: 4px 8px; border-left: 2px solid #ffe08a; color: var(--g-text); }
.g-note-end { color: var(--g-pink); font-size: 16px; font-weight: 700; }
.g-panel { display: flex; flex-direction: column; gap: 5px; min-height: 42px; }
#game button { font: inherit; color: inherit; }
.g-choice,
.g-next,
.g-confirm,
.g-giveup,
.g-tool {
  padding: 6px 10px;
  border: 1px solid var(--g-line);
  border-radius: 4px;
  background: #3b3468;
  text-align: left;
}
.g-next { align-self: flex-end; min-width: 90px; text-align: center; }
.g-choice:hover,
.g-next:hover,
.g-confirm:hover,
.g-tool:hover,
.g-switch:hover,
.g-number:hover { background: #57499a; }
#game button:focus-visible { outline: 2px solid var(--g-pink); outline-offset: 1px; }
.g-ap { margin: 0; color: var(--g-soft); font-size: 12px; }
.g-puzzle { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--g-line); }
.g-puzzle-title { margin: 0; font-weight: 700; color: #ffe08a; }
.g-puzzle-help,
.g-puzzle-state { margin: 0; font-size: 12px; color: var(--g-soft); }
.g-puzzle-state { color: var(--g-text); font-weight: 700; }
.g-switches,
.g-numbers { display: flex; flex-wrap: wrap; gap: 5px; }
.g-switch,
.g-number {
  min-width: 42px;
  height: 42px;
  border: 1px solid var(--g-line);
  border-radius: 4px;
  background: #3b3468;
  font-weight: 700;
}
.g-switch[aria-pressed="true"] { background: #7fb7f0; color: #1d1a38; }
.g-number[aria-pressed="true"] { background: var(--g-pink); color: #1d1a38; }
.g-confirm { align-self: flex-start; background: #57499a; }
.g-giveup { align-self: flex-start; background: transparent; color: var(--g-soft) !important; font-size: 12px; }
.g-history { margin: 0; padding-left: 20px; font-size: 12px; color: var(--g-soft); }
.g-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; font-size: 12px; }
.g-tool { padding: 2px 8px; background: transparent; color: var(--g-soft) !important; }
.game-loading { text-align: center; }
@media (max-width: 720px) {
  .game-stage { padding: 6px; }
  #game { padding: 8px; font-size: 13px; }
  .g-log { height: 300px; }
}