/* A wide stage, with an unscaled coordinate system for the country itself. */
body { --u: 1vw; }
.campaign-label { color:#d6ba80; font-size:12px; margin:6px 0 4px; }
#campaign-choice { min-height:36px; width:100%; background:#432a15; border:1px solid #97713a; color:#f5e0b0; font-size:13px; border-radius:4px; padding:5px; }
#campaign-description { font-size:11px; color:#bfa980; line-height:1.35; margin:6px 0 10px; }
.community-shortcuts { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:8px; flex:none; }
.community-shortcuts button { border:1px solid #806135; background:#34220f; padding:7px 2px; border-radius:4px; font-size:12px; }
.community-shortcuts button:hover { background:#60441d; }
.report-reasons button,.community-shortcuts button,#campaign-choice { min-height:40px; }
#players .player-card { min-width:0; flex:1 1 var(--player-width,33.33%); width:var(--player-width,33.33%); overflow:visible; }
.answer-results { display:grid; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column; }
.answer-result { width:100%; min-width:0; }
#main { height: 100dvh; min-height: 0; overflow: hidden; }
#stage {
  --u: min(1cqw, 1.2cqh);
  container-type: size;
  width: min(100%, calc(100dvh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 0;
  flex: none;
}
#board { inset: 0; width: 100%; height: 100%; }
#board > .game-map { width: 100%; height: 100%; }
.mode-card { width: 14%; padding: 2% 1% 1%; }
.mode-buttons { gap: 2%; }
#mode-caption { font-size: calc(4.8 * var(--u)); }
#players { left: 13%; right: 13%; }
.stage-tools { left: 1.5%; bottom: 2%; }
.stage-tools button { min-width: 36px; min-height: 36px; }
#phase { width: 38%; }
#turn-banner { width: 43%; }
#question-layer { inset: 20% 9% auto; min-height: 57%; height: auto; }
.question-title { min-height: calc(10 * var(--u)); padding: calc(2.2 * var(--u)) 6%; }
.question-body { min-height: 0; }
.numeric-entry { padding: calc(2.4 * var(--u)) 0; }
.answer-options { gap: calc(1.2 * var(--u)); }
.answer-option { min-height: calc(6 * var(--u)); }
.question-footer { padding: calc(.7 * var(--u)) calc(2 * var(--u)); }
#action-bar { left: 13%; right: 13%; }
#tutorial { left: 13%; right: 13%; }
#tutorial p { font-size: calc(3 * var(--u)); }
body:not([data-skin=classic]) #players { left: 1%; width: 54%; }
body:not([data-skin=classic]) #main-menu .mode-buttons { padding-top: 9%; }
body:not([data-skin=classic]) #phase { left: 2%; width: 24%; top: 14%; }
body:not([data-skin=classic]) #turn-banner { left: 2%; width: 24%; top: 27%; }
body:not([data-skin=classic]) #question-layer { inset: 19% 25% auto; min-height: 50%; }
body:not([data-skin=classic]) .question-title { min-height: calc(8 * var(--u)); }
body:not([data-skin=classic]) #action-bar { bottom: 4%; }
body:not([data-skin=classic]) #tutorial { bottom: 2%; }
.player-indicator { display:flex; justify-content:space-between; gap:4px; padding:2px 8px; color:#e5d5a9; background:#24150deb; font:12px/1.3 Georgia,serif; position:absolute; left:0; right:0; top:100%; }
.player-card { position:relative; }
.player-badges { position:absolute; display:flex; gap:3px; left:3px; top:2px; font:12px Georgia,serif; line-height:1; text-shadow:0 1px 2px #000; pointer-events:none; }
.player-badges:empty { display:none; }
.player-card.is-acting { outline:2px solid #ffe88a; box-shadow:0 0 10px #ffd56c; }
#players { bottom:4%; }
body:not([data-skin=classic]) .player-indicator { color:#643f1d; background:#f6e6bd; }
.question-meta { display:flex; justify-content:space-between; gap:8px; padding:5px 10px; color:#e8cda1; background:#30190f; font:12px/1.3 Georgia,serif; }
.question-meta button { margin:-3px 0; border:1px solid #aa864c; background:#7b4c20; min-width:30px; color:#ffe9b7; font-weight:bold; }
.report-reasons { display:grid; gap:10px; }
.helper-bar { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin:8px 0 0; }
.helper { position:relative; display:flex; align-items:center; gap:6px; min-height:36px; padding:5px 9px; border:1px solid #b58d43; border-radius:5px; background:linear-gradient(#6d4929,#302016); color:#fbe7ba; font:13px Georgia,serif; }
.helper b { font:bold 21px Georgia,serif; }
.helper.used { opacity:.65; }
.helper i { font-style:normal; color:#bfe495; }
.helper:disabled { opacity:.45; }
.help-result { margin:8px 0; display:flex; flex-direction:column; gap:6px; font-size:15px; text-align:center; color:#ffe5a3; }
.crowd-bars { display:flex; gap:10px; justify-content:center; }
.crowd-bars span { display:flex; align-items:center; gap:4px; }
.crowd-bars b { min-width:46px; padding:4px; background:linear-gradient(90deg,#9c772b var(--percent),#291b0e var(--percent)); }
.answer-option.removed { opacity:.25; }
#map-helpers { position:absolute; bottom:4%; right:1.5%; width:21%; z-index:4; }
#map-helpers .helper { flex:1 1 44%; justify-content:center; }
#territory-info { position:absolute; left:1.5%; bottom:24%; max-width:25%; z-index:3; padding:8px 11px; border-left:3px solid #d0a34c; background:#29170ddc; color:#ffedc6; pointer-events:none; font:13px/1.4 Georgia,serif; }
#territory-info strong,#territory-info span { display:block; }
body:not([data-skin=classic]) #territory-info { color:#4d310c; background:#f4e4b7ed; }
body:not([data-skin=classic]) .helper { background:linear-gradient(#f4e5bd,#d0ad77); color:#5e3812; border:3px double #8a602c; }
body:not([data-skin=classic]) .question-meta { color:#f6e8bc; background:#684324; }
#helper-form button { margin-top:16px; }

/* The desktop backdrop must not enlarge a scrollable phone question panel. */
@media (max-width: 800px) {
  #question-layer:before { display: none; }
}

/* Portrait phones use the available height rather than shrinking a wide board. */
@media (max-width: 800px) and (orientation: portrait) {
  #main { height: calc(100dvh - 56px); }
  #stage { --u: min(1cqw,5px); width: 100%; height: 100%; aspect-ratio: auto; min-height: 0; }
  #board { inset: 8% 0 14%; height: 78%; }
  #players { left: 1.5%; right: 1.5%; height: 12%; bottom: 6%; }
  #phase { width: 100%; }
  #turn-banner { width: 66%; }
  .mode-buttons { gap: 2.5%; }
  .mode-card { width: 28%; padding: 4% 1% 1%; }
  #mode-caption { font-size: calc(6.6 * var(--u)); }
  #question-layer { inset: 24% 1.5% auto; min-height: 40%; max-height: 66%; overflow: auto; }
  #territory-info { bottom:23%; left:2%; max-width:52%; font-size:12px; }
  #map-helpers { right:2%; bottom:24%; width:42%; }
  .helper { min-height:44px; padding:4px 7px; font-size:12px; }
  .question-meta { font-size:11px; }
  .question-meta span:last-child { max-width:60%; text-align:right; }
  .player-indicator { font-size:10px; padding:2px 4px; }
  .question-title { min-height: calc(20 * var(--u)); padding: calc(3 * var(--u)); }
  .question-body { padding: calc(3 * var(--u)) calc(2 * var(--u)); }
  .numeric-entry { padding: calc(4 * var(--u)) 0; }
  .answer-options { gap: calc(2 * var(--u)); }
  .answer-option { min-height: 44px; }
  .question-footer { padding: calc(2 * var(--u)); }
  #action-bar { left: 4%; right: 4%; bottom: 20%; }
  #tutorial { left: 2%; right: 2%; bottom: 4%; }
  #tutorial p { font-size: calc(4.9 * var(--u)); }
  .stage-tools { bottom: max(1%, env(safe-area-inset-bottom)); }
  .stage-tools button { min-width: 44px; min-height: 40px; }
  body:not([data-skin=classic]) #players { width: 98%; left: .5%; height: 9%; }
  body:not([data-skin=classic]) #main-menu .mode-buttons { padding-top: 20%; }
  body:not([data-skin=classic]) #phase { top: 13%; left: 3%; width: 45%; }
  body:not([data-skin=classic]) #turn-banner { top: 21%; left: 3%; width: 45%; }
  body:not([data-skin=classic]) #question-layer { inset: 28% 2% auto; min-height: 40%; max-height: 64%; }
  body:not([data-skin=classic]) .question-title { min-height: calc(16 * var(--u)); }
  body:not([data-skin=classic]) #action-bar { bottom: 9%; }
  body:not([data-skin=classic]) #tutorial { bottom: 3%; }
}

/* A landscape phone keeps the wide board and opens navigation as a drawer. */
@media (max-width: 800px) and (orientation: landscape) {
  .mobile-header { height: 42px; }
  .mobile-header button { min-height: 40px; }
  #sidebar { top: 42px; height: calc(100dvh - 42px); }
  #main { height: calc(100dvh - 42px); align-items: center; justify-content: center; }
  #stage { --u: min(1cqw,1.2cqh); width: min(100%,calc((100dvh - 42px)*16/9)); height: auto; aspect-ratio: 16/9; min-height: 0; }
  #board { inset: 0; height: 100%; }
  .mode-card { width: 15%; padding: 2% 1% 1%; }
  .mode-card span { font-size: calc(1.8 * var(--u))!important; }
  #main-menu .mode-buttons { padding-top: 1%; }
  #mode-caption { margin-top: 1%; font-size: calc(4.8 * var(--u)); }
  #phase-title { font-size: calc(5 * var(--u)); }
  #progress i { height: calc(1.2 * var(--u)); width: calc(4 * var(--u)); }
  #turn-banner { width: 43%; height: 13%; top: 3%; }
  #turn-icon { width: calc(9 * var(--u)); height: calc(9 * var(--u)); font-size: calc(7 * var(--u)); }
  #turn-text { font-size: calc(3 * var(--u)); }
  #clock { width: calc(10 * var(--u)); height: calc(10 * var(--u)); font-size: calc(5 * var(--u)); }
  #players { height: 17%; bottom: 0; }
  .player-name,.mine .player-name { font-size: calc(3.3 * var(--u)); }
  .player-score,.player-card:not(.mine) .player-score { font-size: calc(4.5 * var(--u)); }
  #question-layer { inset: 19% 9% auto; max-height: 76%; overflow: auto; }
  .question-title,.question-title.long { font-size: calc(3.2 * var(--u)); min-height: 0; padding: calc(2 * var(--u)); }
  .numeric-entry { padding: calc(1 * var(--u)) 0; }
  .numeric-entry input { min-height: 36px; font-size: calc(4.5 * var(--u)); }
  .numeric-entry .gold-button { min-height: 36px; font-size: calc(3 * var(--u)); }
  .answer-options { grid-template-columns: 1fr 1fr; gap: 5px; }
  .answer-option { min-height: 36px; font-size: calc(2.8 * var(--u)); }
  .question-footer { font-size: calc(2.5 * var(--u)); min-height: 0; }
  #tutorial { bottom: 1%; }
  #tutorial p { font-size: calc(3 * var(--u)); }
  body:not([data-skin=classic]) #players { width: 54%; height: 10%; }
  body:not([data-skin=classic]) #main-menu .mode-buttons { padding-top: 7%; }
  body:not([data-skin=classic]) #phase { top: 13%; width: 23%; }
  body:not([data-skin=classic]) #phase-title { font-size: calc(3 * var(--u)); }
  body:not([data-skin=classic]) #turn-banner { top: 26%; width: 23%; }
  body:not([data-skin=classic]) #turn-text { font-size: calc(2.4 * var(--u)); }
  body:not([data-skin=classic]) #question-layer { inset: 17% 24% auto; max-height: 81%; }
  body:not([data-skin=classic]) .answer-options { grid-template-columns: 1fr 1fr; }
  body:not([data-skin=classic]) .keypad { display: none; }
  body:not([data-skin=classic]) .question-title { font-size: calc(2.8 * var(--u)); min-height: 0; padding: calc(1.5 * var(--u)); }
  body:not([data-skin=classic]) .answer-option { font-size: calc(2.5 * var(--u)); min-height: 36px; }
  body:not([data-skin=classic]) .numeric-entry input { min-height: 36px; }
  body:not([data-skin=classic]) .numeric-entry .gold-button { min-height: 36px; font-size: calc(3 * var(--u)); }
  body:not([data-skin=classic]) .question-footer { font-size: calc(2.2 * var(--u)); }
}

.access-shortcut { min-height:40px; margin-top:8px; padding:7px; border:1px solid #b88d43; background:#493015; color:#ffedc0; font:13px Georgia,serif; border-radius:4px; flex:none; }
#access-reminder { position:fixed; z-index:70; left:50%; bottom:10px; transform:translateX(-50%); max-width:calc(100% - 24px); padding:12px 18px; border:2px solid #f5d475; border-radius:5px; background:#4b2b0c; color:#fff2bd; box-shadow:0 3px 15px #0009; font:bold 15px Georgia,serif; }
#access-reminder[hidden] { display:none; }