:root {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  color: #f5ede0;
  background: #11110f;
  --black: #131311;
  --panel: #1c1b19;
  --panel-light: #272521;
  --gold: #cfad72;
  --gold-bright: #e8c98e;
  --ivory: #f5ede0;
  --muted: #b2a79a;
  --border: #62513a;
  --olive: #6b7156;
  --rust: #a66e55;
  --wine: #744f56;
  --row-size: 64px;
  --row-gap: 9px;
  --viewport-height: 100dvh;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { height: var(--viewport-height); padding: clamp(7px, 1.6vh, 17px) clamp(0px, 1vh, 11px); background: radial-gradient(ellipse at 50% 0, #29241f 0%, #151513 55%, #0d0d0c 100%); }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 2px; }
button:disabled { cursor: wait; opacity: .6; }
.shell {
  width: min(100%, 950px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 25%, #24221e, #171615 64%, #141412);
  border: 1px solid #67553a;
  box-shadow: 0 15px 65px #0009;
  border-radius: 15px;
}
.shell::before {
  content: "";
  flex: 0 0 5px;
  background: linear-gradient(90deg, var(--wine) 0 28%, var(--gold) 28% 60%, var(--rust) 60% 78%, var(--olive) 78% 100%);
}
.masthead {
  position: relative;
  text-align: center;
  padding: clamp(9px, 1.6vh, 17px) clamp(12px, 2.5vw, 22px) clamp(9px, 1.5vh, 15px);
  border-bottom: 1px solid #554937;
  flex: 0 0 auto;
  min-height: 0;
}
.masthead-brand { margin: 0 auto; width: min(100%, 500px); padding: 0 62px; }
.monogram { color: var(--gold); font-size: clamp(12px, 2vh, 19px); display: inline-block; margin-bottom: 2px; }
.masthead-title { color: var(--ivory); font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(22px, 3.3vw, 33px); line-height: 1.08; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.masthead-date { margin-top: 4px; color: var(--gold); font-size: clamp(9px, 1.12vw, 11px); letter-spacing: .2em; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.fullscreen-button {
  position: static;
  top: auto; transform: none;
  display: inline-flex; gap: 7px; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 11px;
  border-radius: 8px; border: 1px solid #6f603e;
  background: #2a271f; color: var(--gold-bright); font-size: 12px; font-weight: 700;
}
.header-controls { position: absolute; right: clamp(10px, 2vw, 22px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: clamp(7px, 1.4vw, 16px); }
.board-status { width: 23px; height: 23px; display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; border: 1px solid #5c5447; border-radius: 50%; background: #1b1a17; }
.board-status-light { width: 10px; height: 10px; display: block; border-radius: 50%; background: #847e72; box-shadow: 0 0 0 2px #35302a; }
.board-status.queued .board-status-light, .board-status.sending .board-status-light { background: #e5b85c; box-shadow: 0 0 7px #c89a4b66; }
.board-status.sent .board-status-light { background: #82b68b; box-shadow: 0 0 8px #82b68b88; }
.board-status.error .board-status-light, .board-status.off .board-status-light { background: #d77f76; box-shadow: 0 0 8px #d77f766e; }
.fullscreen-button:hover { background: #3a3126; }
.fullscreen-button span:first-child { font-size: 20px; line-height: 1; }
.content { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; padding: clamp(15px, 3vh, 34px) clamp(12px, 4vw, 42px); }
.screen { height: 100%; min-height: 0; width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; animation: appear .2s ease-out; }
@keyframes appear { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.screen--welcome { justify-content: center; align-items: center; }
.hero-symbol { text-align: center; color: var(--gold); font-size: clamp(26px, 5vh, 49px); line-height: 1.1; margin: 0 0 clamp(6px, 1vh, 12px); }
.kicker { text-align: center; color: var(--gold); font-size: clamp(10px, 1.4vh, 12px); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin: 0; }
.hero-title, .question-title, .result-name { font-family: Georgia, "Times New Roman", serif; font-weight: 400; text-align: center; color: var(--ivory); }
.hero-title { font-size: clamp(36px, min(8vw, 9vh), 74px); line-height: 1.08; margin: clamp(9px, 1.5vh, 16px) 0; }
.subtitle { font-size: clamp(13px, min(1.7vw, 2.5vh), 17px); line-height: 1.4; color: #c7bbac; text-align: center; margin: 7px auto 0; max-width: 550px; }
.primary { background: linear-gradient(160deg, #e1bf7f, #ba9057); color: #19140e; border: 1px solid #f2d49e; border-radius: 9px; padding: 12px 18px; min-height: 48px; font-size: clamp(15px, 1.8vw, 18px); font-weight: 800; box-shadow: 0 3px 0 #75603c; }
.primary:hover { filter: brightness(1.09); }
.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #75603c; }
.start-btn { margin-top: clamp(19px, 5vh, 37px); width: min(100%, 320px); }
.step-count { text-align: center; font-size: 11px; letter-spacing: .18em; color: var(--rust); font-weight: 800; margin: 0 0 4px; }
.question-head { flex: 0 0 auto; }
.question-title { margin: 0 auto; max-width: 680px; font-size: clamp(23px, min(4.3vw, 5vh), 43px); line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.question-head .subtitle { margin: 6px auto 0; }
.listing { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; margin: 8px auto 0; }
.listing-inner { display: flex; flex-direction: column; align-items: stretch; justify-content: center; width: 100%; max-width: 600px; max-height: 100%; min-height: 0; }
.choices, .names { display: grid; grid-template-columns: 1fr; gap: var(--row-gap); width: 100%; min-height: 0; }
.choice { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: var(--row-size); min-height: 0; padding: 6px clamp(12px, 2vw, 20px); border: 1px solid #6d5940; border-left: 4px solid var(--olive); border-radius: 9px; background: #292621; color: var(--ivory); text-align: left; font-size: clamp(13px, min(2vw, 2.6vh), 18px); font-weight: 640; }
.choice:nth-child(3n + 2) { border-left-color: var(--rust); }
.choice:nth-child(3n) { border-left-color: var(--wine); }
.choice:hover { background: #393127; border-color: var(--gold); }
.choice:active { transform: scale(.994); }
.choice-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.18; min-width: 0; }
.arrow { color: var(--gold); font-size: 27px; line-height: 1; font-weight: 400; flex: 0 0 auto; }
.pager { display: flex; align-items: center; justify-content: center; gap: clamp(9px, 3vw, 22px); height: 37px; margin-top: 6px; flex: 0 0 auto; }
.pager-btn { color: var(--gold-bright); background: #30281f; border: 1px solid #736245; border-radius: 7px; padding: 5px 12px; min-height: 34px; min-width: 84px; font-size: 13px; font-weight: 700; }
.pager-btn:disabled { color: #867c6d; opacity: .55; }
.pager-label { font-size: 12px; color: var(--muted); letter-spacing: .07em; white-space: nowrap; }
.navigator { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: clamp(7px, 1.7vh, 16px); }
.nav-btn { min-height: 37px; background: none; border: 0; color: var(--gold); font-size: clamp(12px, 1.5vw, 15px); font-weight: 700; padding: 6px 8px; }
.nav-btn:hover { text-decoration: underline; }
.screen--names .question-title { font-size: clamp(25px, 4.2vh, 36px); }
.search { display: block; width: min(100%, 600px); min-height: 42px; height: 44px; margin: clamp(8px, 1.5vh, 13px) auto 0; padding: 8px 14px; border-radius: 8px; background: #24231f; border: 1px solid #847153; color: var(--ivory); font-size: 16px; }
.search::placeholder { color: #a69885; }
.name-count { text-align: center; margin: 5px 0 0; color: #b9a78e; font-size: 12px; }
.names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.names .choice { font-size: clamp(12px, 1.65vw, 16px); }
.empty { text-align: center; color: #c7bba9; padding: 14px; font-size: 15px; }
.screen--result { align-items: center; gap: clamp(3px, .65vh, 7px); }
.screen--result .kicker { flex: 0 0 auto; }
.result-name { font-size: clamp(25px, min(5vw, 5vh), 45px); line-height: 1.1; margin: 0; flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-label { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .25em; margin: 2px 0 0; }
.table-number { font-family: Georgia, "Times New Roman", serif; font-size: clamp(43px, 9vh, 85px); color: var(--gold-bright); line-height: 1; margin: 0; }
.custom-message { max-width: 540px; text-align: center; font-size: clamp(12px, 2vh, 16px); color: #cbb7a0; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.result-preview { flex: 1 1 auto; min-height: 0; width: 100%; max-height: 213px; display: flex; align-items: stretch; justify-content: center; margin: 3px 0; }
.board-wrap { background: #0b0b0a; border: 1px solid #806d49; border-radius: 12px; padding: clamp(5px, 1vh, 10px); box-shadow: 0 6px 22px #0005; width: min(100%, 555px); height: 100%; display: flex; flex-direction: column; min-height: 0; }
.board-tag { text-transform: uppercase; text-align: center; letter-spacing: .18em; font-size: 10px; font-weight: 800; color: var(--gold); margin: 0; padding: 0 0 6px; flex: 0 0 auto; }
.board { flex: 1 1 auto; min-height: 0; padding: 5px; border-radius: 4px; display: grid; grid-template-rows: repeat(6, minmax(0,1fr)); gap: 2px; background: #050606; }
.board-row { display: grid; grid-template-columns: repeat(22, minmax(0,1fr)); gap: 2px; min-height: 0; }
.tile { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; border-radius: 2px; background: linear-gradient(#363634 0 47%, #101110 48% 52%, #2f302f 53%); color: #f8f3e8; font-family: ui-monospace, Menlo, Monaco, Consolas, monospace; font-size: clamp(6px, 1.45vw, 13px); font-weight: 800; line-height: 1; }
.display-status { display: flex; gap: 7px; justify-content: center; align-items: center; text-align: center; min-height: 19px; color: #c5b6a1; font-size: clamp(10px, 1.3vw, 13px); flex: 0 0 auto; }
.status-dot { width: 7px; height: 7px; background: #bca169; border-radius: 50%; flex: 0 0 auto; }
.status-dot.success { background: #849772; }
.status-dot.error { background: #bb766f; }
.result-buttons { display: flex; justify-content: center; align-items: center; gap: clamp(7px, 2vw, 16px); flex: 0 0 auto; }
.result-buttons .primary { min-width: 185px; min-height: 42px; font-size: 15px; padding: 8px 13px; }
.error { border: 1px solid #a77470; background: #3c2728; color: #ffdbd6; border-radius: 9px; padding: 10px 14px; text-align: center; max-width: 550px; margin: 7px auto; }
.loading { text-align: center; color: var(--gold); margin: auto; }
.footer[hidden] { display: none !important; }
.footer { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; gap: 15px; border-top: 1px solid #4d4031; color: #9e8e7e; padding: clamp(7px, 1vh, 11px); font-size: 10px; font-weight: 800; letter-spacing: .22em; }
.footer-decoration { color: var(--rust); }
.help-overlay { position: fixed; inset: 0; z-index: 100; background: #000c; display: flex; justify-content: center; align-items: center; padding: 18px; }
.help-card { width: min(100%, 450px); max-height: 95%; overflow: hidden; border: 1px solid var(--gold); border-radius: 12px; background: #24211d; box-shadow: 0 15px 45px #000c; padding: clamp(14px, 3vh, 26px); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.help-card h2 { margin: 0; color: var(--gold-bright); font: 28px Georgia, serif; }
.help-card p { margin: 0; color: var(--ivory); font-size: 15px; line-height: 1.4; }
.help-card .primary { min-width: 150px; }
@media (max-width: 650px) {
  body { padding: clamp(5px, 1.1vh, 12px) 0; }
  .shell { border-radius: 0; border-left: 0; border-right: 0; }
  .fullscreen-word { display: none; }
  .fullscreen-button { padding: 6px 10px; min-width: 42px; }
  .masthead-brand { padding: 0 48px; }
  .names { grid-template-columns: 1fr; }
  .board-row { gap: 1px; }
  .board { gap: 1px; }
  .tile { border-radius: 1px; font-size: clamp(5px, 1.9vw, 9px); }
}
@media (max-height: 700px) {
  :root { --row-size: 53px; --row-gap: 7px; }
  .content { padding-top: 13px; padding-bottom: 13px; }
  .hero-title { margin: 7px 0; }
  .result-preview { max-height: 160px; }
  .result-name { font-size: clamp(25px, 4vh, 38px); }
  .table-number { font-size: clamp(42px, 8vh, 70px); }
  .footer { padding: 5px; }
}
@media (max-height: 540px) {
  :root { --row-size: 44px; --row-gap: 5px; }
  .masthead { padding-top: 4px; padding-bottom: 5px; }
  .content { padding-top: 7px; padding-bottom: 7px; }
  .monogram, .footer, .screen--question .subtitle, .screen--names .subtitle { display: none; }
  .masthead-title { font-size: 23px; }
  .masthead-date { margin-top: 2px; }
  .question-title { font-size: clamp(20px, 5vh, 28px); }
  .choice { font-size: 13px; }
  .navigator { margin-top: 2px; }
  .screen--result { gap: 3px; }
  .result-preview { max-height: 110px; }
  .result-buttons .primary { min-height: 34px; font-size: 13px; }
  .nav-btn { min-height: 32px; }
  .search { height: 36px; min-height: 36px; margin-top: 4px; }
}
@media (max-height: 390px) {
  .masthead-date, .hero-symbol, .result-preview, .screen--result .custom-message { display: none; }
  .masthead { padding-top: 3px; padding-bottom: 4px; }
  .masthead-title { font-size: 20px; }
  .content { padding-top: 5px; padding-bottom: 5px; }
  .step-count { margin: 0; font-size: 9px; }
  .question-title { font-size: 19px; }
  .table-number { font-size: 46px; }
  .result-name { font-size: 27px; }
  .result-buttons { margin-top: auto; }
  .start-btn { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }
/* Keep empty page controls out of layout and center the final result. */
.pager[hidden] { display: none; }
.screen--result { justify-content: center; }

/* v3: compact party results and one shared, distraction-free welcome. */
.choice-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-width: 0; }
.choice-secondary { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(10px, 1.45vw, 12px); color: #c4b49f; max-width: 100%; font-weight: 400; }
.search-open-button { display: block; align-self: center; width: min(100%, 600px); margin-top: clamp(5px, 1vh, 12px); padding: 9px 13px; min-height: 40px; background: #24221e; color: var(--gold-bright); border-radius: 8px; border: 1px solid #766244; text-align: left; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-open-button:hover { background: #353026; }
.footer-search { border: 0; background: none; color: #baa17d; padding: 7px 15px; font-size: clamp(12px, 1.6vw, 14px); font-weight: 500; text-decoration: underline; text-decoration-color: #756248; text-underline-offset: 4px; letter-spacing: normal; }
.footer-search:hover { color: var(--gold-bright); }
.screen--result { align-items: center; justify-content: center; gap: clamp(11px, 2.3vh, 23px); }
.result-greeting { font-family: Georgia, "Times New Roman", serif; color: var(--ivory); font-size: clamp(28px, min(5.5vw, 6vh), 54px); line-height: 1.16; max-width: 94%; margin: 0; text-align: center; overflow-wrap: anywhere; max-height: 31vh; overflow: hidden; }
.result-message { font-size: clamp(15px, min(2.3vw, 2.7vh), 21px); line-height: 1.4; max-width: 650px; max-height: 17vh; overflow: hidden; -webkit-line-clamp: 3; }
.board-direction { color: var(--gold-bright); font-family: Georgia, serif; font-size: clamp(19px, min(3vw, 3.7vh), 30px); line-height: 1.25; text-align: center; max-width: 550px; margin: 12px auto 0; }
.result-restart { min-width: min(100%, 300px); padding: 14px 25px; min-height: 58px; font-size: clamp(17px, 2.6vh, 20px); margin-top: clamp(5px, 1vh, 12px); }
.screen--result .display-status { min-height: 26px; max-width: min(600px, 100%); line-height: 1.3; }
.search-overlay { position: fixed; inset: 0; z-index: 150; background: #000c; display: flex; justify-content: center; align-items: flex-start; padding: max(20px, env(safe-area-inset-top)) 15px 20px; overscroll-behavior: none; touch-action: manipulation; }
.search-card { width: min(100%, 600px); padding: clamp(14px, 3vw, 25px); border: 1px solid #ad8954; border-radius: 14px; background: #24211c; box-shadow: 0 20px 70px #000b; display: flex; flex-direction: column; gap: 11px; }
.search-label { display: block; color: var(--gold-bright); font: clamp(22px, 4vw, 32px) Georgia, serif; text-align: center; }
.search-modal-input { width: 100%; height: 52px; flex: 0 0 auto; border-radius: 9px; border: 1px solid var(--gold); background: #171612; color: var(--ivory); padding: 10px 14px; font-size: 18px; }
.search-modal-input::placeholder { color: #ac9d8b; }
.search-hint { margin: 0; font-size: 12px; text-align: center; color: #c2b29b; }
.search-actions { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.search-submit { min-height: 45px; padding: 8px 20px; }
body.search-open { overflow: hidden; }
@media (max-height: 540px) {
  .screen--result { gap: 6px; }
  .result-greeting { font-size: clamp(21px, 5.4vh, 30px); max-height: 24vh; }
  .board-direction { margin: 3px 0 0; font-size: 18px; }
  .result-restart { min-height: 40px; padding: 8px 20px; font-size: 15px; }
  .result-message { font-size: 13px; }
  .search-card { gap: 6px; padding: 10px 14px; }
  .search-modal-input { height: 42px; }
}
@media (max-height: 390px) {
  .screen--result .result-message { display: block; }
  .board-direction { font-size: 15px; }

}
@media (max-height: 540px) {
  /* Keep the fallback search available even in short landscape viewports. */
  .footer:not([hidden]) { display: flex; padding: 2px 4px; min-height: 27px; }
  .footer-search { padding: 2px 10px; }
}

/* v3.2: keep the welcome centered and comfortably spaced without overflow. */
.screen--result { gap: clamp(13px, 2.6vh, 26px); }
.board-direction { margin: clamp(7px, 1.5vh, 17px) auto 0; }
@media (max-height: 540px) {
  .screen--result { gap: 7px; }
  .board-direction { margin-top: 2px; }
  body { padding-top: 3px; padding-bottom: 3px; }
}

/* v3.3 — more breathing room, discreet controls, rate-limit progress. */
body { padding-top: clamp(12px, 2.3vh, 25px); padding-bottom: clamp(12px, 2.3vh, 25px); }
.content { padding-top: clamp(30px, 5vh, 55px); padding-bottom: clamp(30px, 5vh, 55px); }
.rotation-button {
  width: 27px; height: 27px; min-width: 27px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #544939; background: #211e19; color: #c6ad82;
  opacity: .78; font-size: 17px; line-height: 1; border-radius: 7px;
}
.rotation-button.paused { color: #a8997f; opacity: .7; }
.rotation-button:hover, .rotation-button:focus-visible { opacity: 1; border-color: var(--gold); }
.board-progress[hidden] { display: none !important; }
.board-progress {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  width: min(90%, 370px); gap: 7px; margin-top: 5px;
}
.board-progress-track {
  width: 100%; height: 7px; border-radius: 99px;
  overflow: hidden; border: 1px solid #7f6d50; background: #302b24;
}
.board-progress-fill {
  width: 0; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #857956, #d5b375, #ebcd94);
  box-shadow: 0 0 12px #cfad7270;
}
.board-progress-caption { margin: 0; color: #bca788; font-size: 12px; letter-spacing: .03em; text-align: center; }
.rotation-overlay {
  position: fixed; inset: 0; z-index: 210;
  display: flex; justify-content: center; align-items: center;
  background: #000d; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}
.rotation-card {
  width: min(100%, 440px); max-height: 95%; overflow: hidden; display: flex;
  flex-direction: column; align-items: stretch; gap: clamp(7px, 1.2vh, 13px);
  padding: clamp(12px, 2.2vw, 24px); border-radius: 13px;
  background: #24211d; border: 1px solid #ad8954; box-shadow: 0 20px 60px #000b;
}
.rotation-eyebrow { color: #bca173; letter-spacing: .17em; text-align: center; font-size: 10px; }
.rotation-card h2 { color: var(--ivory); text-align: center; font: 30px Georgia, serif; margin: 0; }
.rotation-subtitle { color: #cfc0ac; font-size: 13px; line-height: 1.38; text-align: center; margin: 0; }
.rotation-current { color: var(--gold-bright); font-weight: 700; font-size: 12px; margin: 0; text-align: center; }
.rotation-options { display: flex; min-height: 0; flex-direction: column; gap: 7px; }
.rotation-option { background: #2b2822; color: var(--ivory); border: 1px solid #67573d; border-radius: 8px;
  text-align: left; padding: clamp(8px, 1.2vh, 13px); font-size: 15px; font-weight: 700; }
.rotation-option.selected { border-color: #d3b57b; background: #443827; }
.rotation-option-desc { display: block; font-size: 11px; color: #bfb09e; line-height: 1.3; font-weight: 400; margin-top: 3px; }
.rotation-error { color: #ef9b92; font-size: 12px; margin: 0; text-align: center; }
.rotation-pin { width: 100%; height: 40px; min-height: 0; background: #161512; border: 1px solid #846f4d;
  color: var(--ivory); border-radius: 8px; padding: 7px 12px; }
.rotation-close { align-self: center; }
@media (max-width: 650px) {
  body { padding: clamp(8px, 1.4vh, 13px) 0; }
  .content { padding-top: clamp(23px, 4vh, 38px); padding-bottom: clamp(23px, 4vh, 38px); }
  .header-controls { right: 9px; gap: 7px; }
  .rotation-button { width: 23px; height: 23px; min-width: 23px; font-size: 14px; }
  .masthead-brand { padding: 0 72px; }
}
@media (max-height: 700px) {
  .content { padding-top: 17px; padding-bottom: 17px; }
  body { padding-top: 6px; padding-bottom: 6px; }
  .screen--result { gap: clamp(7px, 1.5vh, 12px); }
}
@media (max-height: 540px) {
  .content { padding-top: 10px; padding-bottom: 10px; }
  body { padding-top: 3px; padding-bottom: 3px; }
  .board-progress { margin-top: 1px; gap: 3px; }
  .board-progress-caption { font-size: 10px; }
  .board-progress-track { height: 5px; }
  .rotation-card { gap: 5px; }
  .rotation-card h2 { font-size: 21px; }
  .rotation-option { padding: 5px 8px; font-size: 13px; }
  .rotation-option-desc { font-size: 10px; }
  .rotation-subtitle { font-size: 11px; }
}
@media (max-height: 390px) {
  .content { padding-top: 5px; padding-bottom: 5px; }
  .board-progress-caption { font-size: 9px; }
}

/* V3.4: final guest heading and staff-only designer (modal can scroll; kiosk does not). */
.result-welcome-line, .result-name-line {display:block;}
.result-name-line { color:var(--gold-bright); margin-top:clamp(3px,1vh,10px); }
.staff-overlay { position:fixed; inset:0; z-index:230; display:flex; justify-content:center; align-items:center; background:#000d; padding: min(3vh,18px) 10px; }
.staff-panel { width:min(97vw,830px); max-height:94dvh; min-height:160px; background:#211e19; border:1px solid #ad8954; border-radius:13px; box-shadow:0 16px 70px #000d; display:flex; flex-direction:column; overflow:hidden; }
.staff-toolbar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #53452f; flex:none; }
.staff-title { color:#e2c58f; font-size:clamp(11px,1.5vw,14px); font-weight:700; letter-spacing:.12em; }
.staff-close { color:#eee1ce; background:transparent; border:0; font-size:28px; width:34px; height:34px; }
.staff-content { padding:15px 17px 20px; overflow-y:auto; overscroll-behavior:contain; color:#eee5d5; display:flex; flex-direction:column; gap:12px; }
.staff-login {max-width:350px; width:100%; margin:15px auto; display:flex; align-items:stretch; flex-direction:column; gap:15px;}
.staff-passcode {font-size:24px; letter-spacing:.3em; text-align:center;}
.staff-lead { color:#d2c2ac; font-size:13px; line-height:1.5; margin:0 0 8px; }
.staff-error { color:#ffb1a6; font-size:13px; min-height:17px; margin:0; }
.staff-tabs { display:flex; flex:none; gap:8px; }
.staff-tab {flex:1; color:#ccbb9d; background:#2a2823; border:1px solid #4a4236; border-radius:7px; padding:9px 7px; font-size:clamp(12px,1.5vw,15px);}
.staff-tab.active {border-color:#cdae7e; background:#4a3d2b; color:#ffebc9;}
.staff-tab-content { display:flex; flex-direction:column; gap:12px; min-width:0; }
.staff-input { border:1px solid #8d7956; border-radius:7px; background:#151411; color:#f3ebdc; padding:9px 11px; font-size:15px; min-height:40px; flex:1; min-width:0; }
.staff-menu-button { border:1px solid #69583f; background:#302b25; color:#ece3d2; border-radius:8px; padding:13px; text-align:left; font-size:15px; }
.staff-menu-button.selected {border-color:#debe85; background:#514331;}
.staff-note { color:#bcae96; font-size:12px; line-height:1.5; margin:4px 0; }
.staff-field-label {font-size:13px; font-weight:700; color:#d8bd91;}
.staff-row {display:flex; gap:10px; flex-wrap:wrap; align-items:stretch;}
.staff-row-number {flex:0 0 95px;}
.staff-row select.staff-input {max-width:340px;}
.staff-section-label {color:#e9cc95; font-size:12px; letter-spacing:.08em; font-weight:700; margin:0;}
.staff-palette {display:flex; flex-wrap:wrap; gap:4px; max-height:150px; overflow:auto; border:1px solid #4b4031; border-radius:7px; padding:6px;}
.staff-brush {min-width:34px; display:flex; align-items:center; flex-direction:column; background:#2b2822; border:1px solid #63553e; border-radius:5px; padding:4px; gap:2px; color:#eee6d8; font-size:9px; }
.staff-brush.active {background:#594b32; border:2px solid #e4bb72;}
.vb-tile {display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; width:100%; height:100%; color:#f7f0e5; background:#292927; font-family:ui-monospace,monospace; font-weight:700; line-height:1;}
.staff-brush .vb-tile {width:24px; height:24px; font-size:16px;}
.vb-tile.red {background:#c51e28;}.vb-tile.orange {background:#e87325;}.vb-tile.yellow {background:#f1bd27;}.vb-tile.green {background:#218c51;}.vb-tile.blue {background:#2772ad;}.vb-tile.violet {background:#8b45af;}.vb-tile.white {background:#f5f5ed;}.vb-tile.black {background:#101010;}.vb-tile.filled {background:#fafafa;}
.vb-grid {display:grid; width:100%; grid-template-columns:repeat(22,minmax(0,1fr)); aspect-ratio:22 / 6; background:#100f0e; border:2px solid #7e6a4a; gap:1px; padding:3px; border-radius:4px;}
.vb-cell {background:#262626; border:0; padding:0; min-width:0; min-height:0; cursor:pointer; font-size:clamp(7px,1.5vw,16px); aspect-ratio:1 / 1; }
.vb-cell:hover,.vb-cell:focus-visible {outline:2px solid #e6ba68; outline-offset:-1px;}
.staff-primary,.staff-secondary,.staff-danger {border-radius:7px; min-height:43px; padding:9px 17px; font-weight:700;}
.staff-primary {background:#c9a46e; color:#1b1710; border:1px solid #ebcd97;}
.staff-secondary {background:#3b3328;color:#f4e2c5;border:1px solid #92774d;}
.staff-danger {background:#452e29;color:#f0b4a9;border:1px solid #865447;}
.staff-fieldset {border:1px solid #64533a; padding:10px 12px; display:flex; flex-direction:column; gap:9px; border-radius:8px;}
.staff-fieldset legend {font-size:13px;color:#e9c995;padding:0 7px;}
.staff-checkbox {display:flex; align-items:center; gap:8px; font-size:14px; line-height:1.4;}
.staff-checkbox input {width:19px;height:19px;accent-color:#d5aa68;}
.staff-actions {gap:9px;}
@media(max-width:520px){.staff-panel{width:100%;}.staff-content{padding:12px 9px;}.staff-row{gap:6px;}.staff-row-number{flex-basis:82px;}.staff-input{font-size:13px;}.vb-grid{gap:0;padding:1px;}.vb-cell{font-size:7px;}}

.staff-multiline {min-height:68px; width:100%; flex:none; resize:vertical; font-family:ui-monospace,monospace;}

/* V3.5 admin workspace: preview saved boards and edit multiple named time slots. */
.staff-tabs {flex-wrap:wrap;gap:6px;}
.staff-tab {flex:1 1 95px;white-space:nowrap;}
.staff-panel {width:min(97vw,1040px);}
.staff-gallery {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:13px;}
.staff-display-card,.staff-slot-card {border:1px solid #685437;border-radius:10px;padding:12px;background:#26221c;min-width:0;display:flex;flex-direction:column;gap:11px;}
.staff-display-header,.staff-slot-heading {display:flex;justify-content:space-between;align-items:center;gap:8px;}
.staff-display-header strong,.staff-slot-heading strong {font-size:15px;color:#f0d6a8;overflow-wrap:anywhere;}
.staff-small-button {border:1px solid #816d4e;border-radius:6px;padding:6px 11px;background:#393126;color:#f4ddbc;font-size:12px;white-space:nowrap;}
.staff-small-button.danger {color:#ffc5bf;border-color:#89524c;}
.vb-mini-preview {display:grid;grid-template-columns:repeat(22,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:1px;background:#111;border:2px solid #6c593d;padding:3px;aspect-ratio:22/6;}
.vb-mini-cell {min-width:0;min-height:0;}
.vb-mini-cell .vb-tile {font-size:clamp(5px,0.67vw,9px);}
.staff-display-tags {display:flex;flex-wrap:wrap;gap:5px;}
.staff-chip {background:#50402a;border:1px solid #8b7049;color:#f4d9b0;border-radius:99px;padding:3px 8px;font-size:11px;}
.staff-chip.muted {background:#302d29;color:#ada092;border-color:#51473b;}
.staff-slots {display:flex;flex-direction:column;gap:14px;}
.staff-slot-card {margin:0;}
.staff-range {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.staff-stacked-label {display:flex;flex-direction:column;gap:6px;min-width:0;color:#d8c3a0;font-size:13px;}
.staff-stacked-label > .staff-input {width:100%;flex:auto;}
.staff-display-choices {display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:7px;}
.staff-compact-check {display:flex;gap:7px;align-items:center;padding:8px;background:#312b22;border:1px solid #564832;border-radius:6px;font-size:12px;line-height:1.3;}
.staff-compact-check input {accent-color:#d5aa68;width:18px;height:18px;flex:none;}
@media(max-width:650px) {.staff-range {grid-template-columns:1fr;} .staff-tabs {gap:4px;} .staff-tab {flex:1 1 70px;font-size:11px;} .staff-display-choices {grid-template-columns:1fr;} }