/* Game-family treatment. Opt-in only: no homepage, policy or engine changes. */
.page-game {
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 0, #182039 0, #070e1c 65%, #010a13 100%);
}

.page-game::before { background: none; }

@media (min-width: 601px) {
  .page-game::before {
    inset: -2px;
    background:
      linear-gradient(180deg, rgba(2, 6, 16, .22), rgba(2, 6, 16, .38)),
      url("/static/img/game-bg-fantasy-arena-v1.webp") center / cover no-repeat;
    filter: blur(1px);
  }
}

.page-game .topbar { padding: 8px 24px; }
.page-game .topbar a { text-shadow: 0 2px 5px #000; }
.page-game .topbar-link { color: #e2cca0; }
.page-game .card {
  padding: 20px 28px 22px;
  border-color: rgba(200, 170, 110, .72);
  background: linear-gradient(160deg, #181d35, #101329 65%, #0b1122);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(242, 222, 175, .1);
}
.page-game .card-title {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .025em;
  text-shadow: 0 2px 6px #000;
}
.page-game .card-rule {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2em;
}
.page-game .card-sub { color: #b9b0a0; }
.page-game .shot { margin: 18px auto 12px; }
.page-game .shot img {
  border: 3px solid #c9ad74;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 0 18px rgba(200, 170, 110, .09);
}
.page-game .guess-label {
  font-weight: 900;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: .035em;
  color: #65be8d;
  text-shadow: 0 1px 4px #000;
}
.page-game .guess-row {
  gap: 4px;
  padding: 5px;
  background: linear-gradient(180deg, #2e2e32, #232428);
  border-color: #827551;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .25);
}
.page-game .guess-row:focus-within {
  border-color: #ebd297;
  box-shadow: 0 0 0 2px rgba(122, 208, 255, .3);
}
.page-game .guess-row input { padding: 0 10px; }
.page-game .guess-row input::placeholder { color: #b1afb5; }
.page-game .btn {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  border-radius: 9px;
  white-space: normal;
}
.page-game .btn--gold {
  background: linear-gradient(160deg, #f3e5bd, #d0b37a 65%, #ba9553);
  border-color: #f0dca7;
  box-shadow: inset 0 1px 0 #fff1ce, 0 2px 8px rgba(0, 0, 0, .25);
  color: #211a0e;
}
.page-game .guess-row .btn { min-width: 84px; text-transform: uppercase; }
.page-game .btn--gold:hover { background: linear-gradient(160deg, #fff1ce, #e0c48b); }
.page-game .btn--ghost { background: rgba(255, 255, 255, .035); }
.page-game .btn--ghost:hover { background: rgba(200, 170, 110, .1); }
.page-game .btn--hint {
  gap: 5px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-color: #94d7ff;
  background: rgba(4, 18, 36, .65);
  box-shadow: inset 0 0 14px rgba(122, 208, 255, .04);
}
.page-game .btn--hint span { font-family: var(--sans); font-size: 12px; }
.page-game .suggest {
  background: #141a2b;
  border-color: #ae925e;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .7);
}
.page-game .suggest li { overflow-wrap: anywhere; }
.page-game .suggest li[aria-selected="true"],
.page-game .suggest li:hover { background: #343526; }
.page-game .feedback { margin: 6px 0; }
.page-game .feedback.is-info, .page-game .rule-note { color: #c2b9a7; }
.page-game .clock { font-weight: 900; font-size: 34px; line-height: 1.3; }
.page-game .clock-row { margin-top: 10px; }
.page-game .clock-delta { text-shadow: 0 1px 4px #000; }
.page-game .card-foot { margin-top: 20px; }
.page-game .end-btn { font-weight: 900; font-size: 23px; color: #ff8d5d; }
.page-game .end-btn:hover { color: #ffb591; }
.page-game .score { font-weight: 900; font-size: 24px; line-height: 1.3; }
.page-game .result-title { font-weight: 900; }
.page-game .result-score { font-weight: 900; }
.page-game .result-miss { overflow-wrap: anywhere; }
.page-game .result-reason, .page-game .share-note { color: #c2b9a7; }
.page-game .reveal-frame { overflow: hidden; border-radius: 12px; }
.page-game .board {
  padding: 16px 12px;
  border: 1px solid rgba(200, 170, 110, .3);
  background: linear-gradient(180deg, #2a2a32, #171d2c);
}
.page-game .board-submit input { min-width: 0; width: min(100%, 240px); }
.page-game .board-tabs button { min-height: 44px; padding: 0 12px; }
.page-game .board-tabs button[aria-pressed="true"] {
  border-color: #d5ba81;
  background: #d5ba81;
  color: #17130b;
}
.page-game .board-table { table-layout: fixed; }
.page-game .board-table th, .page-game .board-table td { padding: 8px 4px; overflow-wrap: anywhere; }
.page-game .board-table th:nth-child(1) { width: 15%; }
.page-game .board-table th:nth-child(2) { width: 36%; }
.page-game .board-table th:nth-child(3) { width: 18%; }
.page-game .board-table th:nth-child(4) { width: 31%; }
.page-game .board-table td:nth-child(4) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.page-game .mode-help {
  max-width: 500px;
  margin-top: 16px;
  padding: 12px 18px;
  border: 1px solid rgba(200, 170, 110, .35);
  border-radius: 16px;
  background: rgba(8, 15, 28, .94);
  color: #c2b9a7;
}
.page-game .mode-help summary { min-height: 28px; color: #e2cca0; }
.page-game .sitefoot {
  margin-top: 24px;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(3, 10, 21, .85);
}

@media (max-width: 520px) {
  .page-game .topbar { padding: 8px 16px; }
  .page-game .card { padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); }
  .page-game .card-title { font-size: 23px; }
  .page-game .guess-label { font-size: 18px; }
  .page-game .guess-row input { font-size: 16px; padding: 0 8px; }
  .page-game .guess-row .btn { min-width: 72px; padding: 8px 10px; }
  .page-game .btn--hint { max-width: 100%; }
  .page-game .board { padding: 14px 8px; }
  .page-game .board-table { font-size: 13px; }
  .page-game .board-table th { font-size: 11px; letter-spacing: .02em; }
  .page-game .board-table td:nth-child(4) { font-size: 12px; }
  .page-game .mode-help { padding: 12px 14px; }
}