:root {
  --display-gutter: clamp(16px, 2.3vw, 40px);
  --display-gap: clamp(10px, 1.5vw, 24px);
  --rasam-setup-background: none;
  --rasam-lobby-background: none;
  --rasam-intro-background: none;
  --rasam-intro-clean-background: none;
  --rasam-intro-blank-plaque: none;
  --rasam-round-intro-background: none;
  --rasam-drawing-background: none;
  --rasam-drawing-reveal-background: none;
  --rasam-guess-background: none;
  --rasam-vote-background: none;
  --rasam-reveal-background: none;
  --rasam-scoreboard-background: none;
  --rasam-scoreboard-rank-badge: none;
  --rasam-final-background: none;
  --rasam-gallery-background: none;
}

[hidden] { display: none !important; }

html,
body {
  width: 100%;
  min-width: 800px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--fafaa-navy);
  color: var(--text-primary);
  font-family: var(--font-body);
}

button,
select { color: inherit; }

.setup-shell {
  width: 100%;
  min-height: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: #071221;
}

.setup-stage {
  position: relative;
  width: min(100vw, 169.51vh);
  max-width: 1920px;
  aspect-ratio: 1512 / 892;
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
  background: #071221 var(--rasam-setup-background) center / 100% 100% no-repeat;
}

.setup-intro {
  position: absolute;
  top: 7.2%;
  left: 3.4%;
  width: 40.5%;
  height: 43%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff8e8;
  text-align: center;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--fafaa-yellow);
  font-size: .84rem;
  font-weight: 900;
}

.setup-intro .eyebrow {
  width: 78%;
  margin: 0 auto 2.7cqw;
  color: #fffdf7;
  font-size: clamp(.9rem, 1.42cqw, 1.7rem);
  line-height: 4.1cqw;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(41, 20, 71, .35);
}

.setup-intro h1,
.pause-box h2 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.2;
}

.setup-intro h1 {
  max-width: 100%;
  color: #fff8e8;
  font-size: clamp(2rem, 4.35cqw, 5.3rem);
  text-wrap: balance;
  text-shadow: 0 .08em 0 rgba(4, 12, 27, .48);
}

.setup-title-kicker { display: block; }

.pause-box h2 { font-size: clamp(2rem, 4vw, 3.4rem); }

.setup-copy {
  display: none;
  max-width: 34cqw;
  margin: 1.05cqw auto 0;
  color: rgba(255, 248, 232, .78);
  font-size: clamp(.75rem, 1.08cqw, 1.3rem);
  font-weight: 700;
  line-height: 1.7;
}

.setup-tv-note {
  position: absolute;
  top: 55.5%;
  left: 3.2%;
  width: 13%;
  margin: 0;
  color: #fff8e8;
  font-size: clamp(.7rem, 1.1cqw, 1.35rem);
  font-weight: 900;
  line-height: 1.55;
  text-align: center;
  text-shadow: 0 2px 0 rgba(4, 12, 27, .48);
}

.setup-card {
  position: absolute;
  top: 8.1%;
  right: 4.4%;
  width: 43.7%;
  height: 87.2%;
  color: #142630;
  direction: rtl;
}

.setup-steps {
  position: absolute;
  top: 6.8%;
  right: 2.6%;
  left: 2.6%;
  height: 58.5%;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.setup-step {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 4.1cqw minmax(0, 1fr) 3.6cqw;
  grid-template-areas: "icon content state";
  direction: ltr;
  align-items: center;
  gap: .95cqw;
  padding: .35cqw .9cqw;
  border: 0;
  background: transparent;
}

.step-index {
  grid-area: icon;
  width: 3.75cqw;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: #168f98;
  box-shadow: 0 .18cqw .38cqw rgba(8, 67, 76, .22);
}

.step-index img {
  width: 55%;
  height: 55%;
  filter: brightness(0) invert(1);
}

.step-state-icon {
  grid-area: state;
  width: 2.9cqw;
  aspect-ratio: 1;
  justify-self: center;
  background: url("../shared/icons/loader-circle.svg") center / contain no-repeat;
  opacity: .38;
}

.setup-step[data-state="done"] .step-state-icon {
  background-image: url("../shared/icons/circle-check-big.svg");
  filter: invert(55%) sepia(79%) saturate(560%) hue-rotate(91deg) brightness(91%) contrast(87%);
  opacity: 1;
}

.setup-step[data-state="error"] .step-state-icon {
  background-image: url("../shared/icons/x.svg");
  filter: invert(46%) sepia(78%) saturate(1736%) hue-rotate(333deg) brightness(104%) contrast(101%);
  opacity: 1;
}

.step-content {
  grid-area: content;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: .18cqw;
  text-align: right;
  direction: rtl;
}

.setup-step strong,
.setup-step small { display: block; }
.setup-step strong { font-size: clamp(.84rem, 1.35cqw, 1.55rem); line-height: 1.3; }
.setup-step small {
  margin: 0;
  color: #52636a;
  font-size: clamp(.68rem, .98cqw, 1.08rem);
  font-weight: 700;
  line-height: 1.4;
}

.button-row {
  display: flex;
  flex-wrap: nowrap;
  gap: .45cqw;
  margin-top: .18cqw;
}

.button {
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 900;
  transition: opacity var(--motion-fast), border-color var(--motion-fast), background-color var(--motion-fast), transform var(--motion-fast);
}

.button:hover:not(:disabled) { filter: brightness(1.08); }
.button:active:not(:disabled) { opacity: .78; }
.button:disabled { cursor: not-allowed; opacity: .45; }
.button.primary { color: #10161d; background: var(--fafaa-yellow); }
.button.secondary { border-color: var(--border-subtle); background: var(--surface-3); }
.button.secondary[aria-pressed="true"] { border-color: var(--fafaa-cyan); color: var(--fafaa-cyan); }

.setup-card .button {
  min-height: 3cqw;
  padding: .3cqw .8cqw;
  border-width: 1px;
  border-radius: .48cqw;
  font-size: clamp(.68rem, 1cqw, 1.08rem);
  line-height: 1.25;
}

.setup-card .button.secondary {
  border-color: rgba(22, 143, 152, .72);
  background: rgba(255, 253, 246, .82);
  box-shadow: 0 .14cqw .24cqw rgba(26, 41, 45, .12);
  color: #167e86;
}

.setup-card .button.secondary[aria-pressed="true"] {
  border-color: #168f98;
  background: #168f98;
  color: #fff;
}

.button-row .button { flex: 1 1 0; }
#fullscreenButton { justify-self: start; margin-top: .12cqw; }

.setup-actions {
  position: absolute;
  top: 69.6%;
  right: 2.6%;
  bottom: 1.8%;
  left: 2.6%;
}

.preset-field {
  position: absolute;
  top: 2%;
  right: 4%;
  left: 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
}

.field-label {
  margin: 0;
  color: #192b33;
  font-size: clamp(.75rem, 1.12cqw, 1.35rem);
  font-weight: 900;
  white-space: nowrap;
}

.preset-select {
  width: 54%;
  min-height: 3.45cqw;
  padding: .42cqw .9cqw;
  border: 1px solid rgba(83, 82, 73, .46);
  border-radius: .48cqw;
  background: rgba(255, 253, 247, .76);
  box-shadow: 0 .14cqw .28cqw rgba(36, 35, 29, .1);
  color: #24343a;
  font: inherit;
  font-size: clamp(.68rem, .94cqw, 1.12rem);
  font-weight: 900;
}

.create-button {
  position: absolute;
  right: 4%;
  bottom: .5%;
  left: 4%;
  width: 92%;
  height: 42%;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #101d2b !important;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.75cqw, 3.2rem) !important;
  line-height: 1;
  text-shadow: 0 .05em 0 rgba(255, 255, 255, .28);
}

.create-button:hover:not(:disabled) { transform: translateY(-.08cqw) scale(1.01); }

.setup-error {
  position: absolute;
  right: 5%;
  bottom: 40%;
  left: 5%;
  min-height: 1.35em;
  margin: 0;
  color: #bd493b;
  font-size: clamp(.6rem, .72cqw, .88rem);
  font-weight: 900;
  text-align: center;
}

.asset-progress {
  width: 100%;
  height: .65cqw;
  min-height: 5px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  accent-color: #168f98;
  background: rgba(21, 78, 83, .14);
}

.asset-progress::-webkit-progress-bar { border-radius: 999px; background: rgba(21, 78, 83, .14); }
.asset-progress::-webkit-progress-value { border-radius: 999px; background: #168f98; }
.asset-progress::-moz-progress-bar { border-radius: 999px; background: #168f98; }
.asset-retry { min-height: 2.2cqw !important; justify-self: start; padding: .2cqw .7cqw !important; }

.visual-loading-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 64px);
  background:
    radial-gradient(circle at 50% 18%, rgba(247, 192, 44, .16), transparent 34%),
    rgba(5, 9, 11, .96);
}

.visual-loading-card {
  width: min(620px, 100%);
  display: grid;
  gap: 14px;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.visual-loading-card h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.8rem);
}

.visual-loading-card p { margin: 0; color: var(--text-muted); font-weight: 700; }
.visual-loading-card .eyebrow { color: var(--fafaa-yellow); }
.visual-loading-card .asset-retry { justify-self: center; }

#stage {
  height: 100vh;
  display: grid;
  grid-template-rows: clamp(58px, 8vh, 82px) minmax(0, 1fr);
}

#topBar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 10px var(--display-gutter);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--fafaa-navy-2);
}


#tbInfo {
  overflow: hidden;
  color: var(--text-muted);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

#tbRoom {
  color: var(--fafaa-yellow);
  font-size: clamp(1.1rem, 2vw, 1.75rem);
  font-weight: 900;
  letter-spacing: .12em;
  text-align: left;
}

#view {
  min-width: 0;
  min-height: 0;
  display: flex;
  padding: clamp(12px, 2vh, 28px) var(--display-gutter) clamp(16px, 2.5vh, 34px);
  overflow: hidden;
}

.center-view,
.lobby-view,
.gallery-view,
.reveal-view {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--display-gap);
}

.big-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.7vw, 3.5rem);
  line-height: 1.35;
  text-align: center;
}

.sub-title {
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.65vw, 1.45rem);
  text-align: center;
}

.lobby-layout {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr);
  align-items: stretch;
  gap: clamp(18px, 3vw, 46px);
}

.join-card,
.roster-panel {
  min-height: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}

.join-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(7px, 1.1vh, 13px);
  padding: clamp(18px, 2.8vw, 34px);
  text-align: center;
}

.join-label { margin: 0; color: var(--text-muted); font-weight: 700; }
.join-url { max-width: 100%; overflow: hidden; direction: ltr; color: var(--fafaa-cyan); text-overflow: ellipsis; white-space: nowrap; font-size: clamp(1rem, 1.65vw, 1.4rem); font-weight: 900; }
.room-code { direction: ltr; color: var(--fafaa-yellow); font-size: clamp(3.5rem, 7vw, 7.25rem); font-weight: 900; letter-spacing: .15em; line-height: 1; }

.qr-box {
  width: clamp(118px, 17vh, 176px);
  height: clamp(118px, 17vh, 176px);
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: #fff;
}
.qr-box svg { width: 100%; height: 100%; display: block; }

.lobby-meta {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.meta-card {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: clamp(.78rem, 1.2vw, 1rem);
}
.meta-card strong { display: block; color: var(--text-primary); }

.roster-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: clamp(18px, 2.8vw, 32px);
}

.panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.panel-heading h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 2rem); }
.capacity-label { color: var(--text-muted); font-weight: 700; }

.player-grid {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: center;
  gap: clamp(8px, 1.2vw, 14px);
}

.player-card {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: clamp(8px, 1.2vw, 14px) 7px;
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--player-color, var(--fafaa-cyan));
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.player-card.disconnected,
.score-row.disconnected { opacity: .48; filter: grayscale(.7); }
.player-card.done { border-color: var(--success); }
.player-avatar { width: clamp(42px, 5.5vw, 72px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--fafaa-navy); }
.player-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.78rem, 1.35vw, 1.08rem); font-weight: 900; }
.player-state { color: var(--text-muted); font-size: clamp(.68rem, 1vw, .88rem); }
.lobby-help { margin: 0; color: var(--text-muted); text-align: center; }

.phase-layout,
.gallery-body,
.reveal-body {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, .86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(18px, 3vw, 46px);
}

.phase-copy { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--display-gap); }

.big-timer {
  min-width: 2.5ch;
  color: var(--fafaa-yellow);
  font-size: clamp(3.2rem, 7vw, 7rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}
.big-timer.urgent { color: var(--fafaa-coral); }
.progress-big { color: var(--text-muted); font-size: clamp(1rem, 1.7vw, 1.5rem); font-weight: 900; }

.drawing-frame {
  width: min(52vh, 45vw);
  max-width: 100%;
  aspect-ratio: 1;
  padding: clamp(6px, .8vw, 11px);
  border-radius: var(--radius-md);
  background: #fdf9f0;
  box-shadow: var(--shadow-card);
}
.drawing-frame.small { width: min(42vh, 35vw); }
.drawing-frame canvas { width: 100%; height: 100%; display: block; border-radius: calc(var(--radius-md) - 5px); }

.choices-grid {
  width: 100%;
  max-height: 62vh;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.1vw, 13px);
  overflow: hidden;
}

.choice-card {
  min-width: 0;
  display: grid;
  align-items: center;
  padding: clamp(10px, 1.4vw, 17px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: clamp(.95rem, 1.6vw, 1.35rem);
  font-weight: 900;
  overflow-wrap: anywhere;
}


.reveal-steps { min-width: 0; min-height: 0; display: flex; flex-direction: column-reverse; justify-content: center; gap: 10px; overflow: hidden; }
.reveal-card { padding: clamp(10px, 1.4vw, 17px); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); }
.reveal-card.truth { border-color: var(--success); }
.reveal-title { font-size: clamp(1rem, 1.7vw, 1.45rem); font-weight: 900; }
.reveal-meta { margin-top: 5px; color: var(--text-muted); font-size: clamp(.75rem, 1.15vw, 1rem); }
.score-pop { color: var(--success); font-weight: 900; }

.score-list { width: min(920px, 100%); min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(7px, 1.1vh, 12px); }
.score-row { min-width: 0; display: grid; grid-template-columns: 32px 46px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: clamp(7px, 1.1vh, 12px) 14px; border-inline-start: 5px solid var(--player-color, var(--fafaa-cyan)); border-radius: var(--radius-md); background: var(--surface-2); }
.score-row img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.score-rank { color: var(--text-muted); font-weight: 900; }
.score-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.score-delta { color: var(--success); font-weight: 900; }
.score-total { color: var(--fafaa-yellow); font-size: 1.18rem; font-weight: 900; }

.podium { width: min(780px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; }
.podium-card { min-width: 0; display: grid; justify-items: center; gap: 6px; padding: 16px; border-top: 5px solid var(--player-color, var(--fafaa-cyan)); border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--surface-2); }
.podium-card.place-1 { min-height: 210px; border-color: var(--fafaa-yellow); }
.podium-card.place-2 { min-height: 170px; }
.podium-card.place-3 { min-height: 145px; }
.podium-card img { width: clamp(54px, 7vw, 90px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.podium-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.podium-score { color: var(--fafaa-yellow); font-size: 1.4rem; font-weight: 900; }

.awards-row { width: min(980px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.award-card { min-width: 0; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); text-align: center; }
.award-title { color: var(--fafaa-yellow); font-weight: 900; }
.award-player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.award-desc { color: var(--text-muted); font-size: .84rem; }

.gallery-info { min-width: 0; display: grid; gap: 12px; }
.gallery-prompt { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.8rem); font-weight: 900; overflow-wrap: anywhere; }
.gallery-meta { color: var(--text-muted); font-size: clamp(.9rem, 1.4vw, 1.2rem); }
.gallery-counter { color: var(--fafaa-cyan); font-weight: 900; }

.pause-overlay { position: fixed; z-index: var(--z-overlay); inset: 0; display: grid; place-items: center; padding: 32px; background: rgba(5, 10, 15, .92); backdrop-filter: blur(8px); }
.pause-box { width: min(640px, 100%); padding: clamp(28px, 5vw, 56px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-card); text-align: center; }
.pause-box p:last-child { color: var(--text-muted); font-size: 1.1rem; }

.connection-banner { position: fixed; z-index: var(--z-toast); inset-inline: 20px; bottom: 18px; width: fit-content; max-width: calc(100% - 40px); margin-inline: auto; padding: 10px 18px; border: 1px solid var(--fafaa-coral); border-radius: 999px; background: var(--surface-1); box-shadow: var(--shadow-card); font-weight: 900; }
.display-session-reset {
  position: fixed;
  z-index: var(--z-toast);
  inset-inline-start: 18px;
  inset-block-end: 18px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--fafaa-coral), transparent 35%);
  border-radius: 999px;
  padding: 9px 16px;
  background: color-mix(in srgb, var(--fafaa-navy-2), transparent 12%);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
  font: inherit;
  font-size: clamp(.76rem, 1vw, .95rem);
  font-weight: 900;
  opacity: .72;
}
.display-session-reset:hover:not(:disabled),
.display-session-reset:focus-visible { opacity: 1; }
.display-session-reset:disabled { cursor: wait; opacity: .45; }

@media (max-height: 780px) {
  .setup-copy { display: none; }
  .setup-intro h1 { font-size: clamp(1.9rem, 4.15cqw, 4.9rem); }
  .setup-tv-note { top: 54.5%; }
}
@media (max-width: 1100px), (max-height: 780px) {
  :root { --display-gutter: 18px; --display-gap: 10px; }
  #stage { grid-template-rows: 58px minmax(0, 1fr); }
  #view { padding-block: 10px 16px; }
  .lobby-layout { grid-template-columns: minmax(280px, .74fr) minmax(0, 1.26fr); gap: 16px; }
  .join-card, .roster-panel { padding: 15px; }
  .player-grid { gap: 7px; }
  .room-code { font-size: clamp(3rem, 6vw, 5rem); }
  .qr-box { width: 118px; height: 118px; }
  .drawing-frame { width: min(50vh, 41vw); }
  .score-row { grid-template-columns: 25px 36px minmax(0, 1fr) auto auto; padding-block: 6px; }
  .score-row img { width: 34px; height: 34px; }
}

@media (max-height: 650px) {
  .qr-box { width: 92px; height: 92px; }
  .join-card { gap: 5px; }
  .player-avatar { width: 38px; }
  .podium-card.place-1 { min-height: 150px; }
  .podium-card.place-2 { min-height: 130px; }
  .podium-card.place-3 { min-height: 115px; }
  .awards-row { display: none; }
}

/* Main lobby: clean live UI over a text-free paper-craft stage. */
body:has(.lobby-canvas) {
  background: #120918;
}

body:has(.lobby-canvas) #stage {
  grid-template-rows: minmax(0, 1fr);
}

body:has(.lobby-canvas) #topBar {
  display: none;
}

body:has(.lobby-canvas) #view {
  display: grid;
  place-items: center;
  padding: 0;
  background: #120918;
}

.lobby-view:has(.lobby-canvas) {
  width: 100%;
  height: 100%;
  gap: 0;
  overflow: hidden;
}

.lobby-canvas {
  position: relative;
  width: min(100vw, 177.68vh);
  max-width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background-color: #120918;
  background-image: var(--rasam-lobby-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.lobby-join-card,
.lobby-roster-card,
.lobby-guide-card {
  position: absolute;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.lobby-join-card {
  left: 5%;
  top: 6.8%;
  width: 38.7%;
  height: 85.8%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 1.4vw, 24px);
  padding: clamp(18px, 2vw, 34px) clamp(20px, 2.35vw, 40px);
  color: #25152b;
  text-align: center;
}

.lobby-panel-heading h1 {
  margin: 0;
  color: #32163c;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.75vw, 3.25rem);
  line-height: 1.2;
}

.lobby-phone-prompt {
  width: fit-content;
  min-height: clamp(34px, 3.2vw, 52px);
  margin: clamp(7px, .65vw, 12px) auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, .65vw, 11px);
  padding: clamp(5px, .45vw, 8px) clamp(12px, 1.1vw, 19px);
  border: clamp(2px, .15vw, 3px) solid #a97312;
  border-radius: 999px;
  background: #f4c438;
  color: #32163c;
  font-size: clamp(.8rem, 1.08vw, 1.25rem);
  line-height: 1.2;
  box-shadow: 0 clamp(3px, .3vw, 5px) 0 rgba(74, 41, 75, .24);
}

.lobby-phone-icon {
  width: clamp(22px, 2vw, 34px);
  height: clamp(22px, 2vw, 34px);
  flex: 0 0 auto;
}

.lobby-panel-heading p {
  max-width: 31rem;
  margin: clamp(4px, .5vw, 9px) auto 0;
  color: #604963;
  font-size: clamp(.78rem, 1.15vw, 1.35rem);
  font-weight: 800;
  line-height: 1.5;
}

.lobby-join-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(110px, 10.5vw, 176px);
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px);
  direction: ltr;
}

.lobby-code-block {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: clamp(7px, .75vw, 13px);
  direction: rtl;
}

.lobby-code-block .join-label {
  margin: 0;
  color: #6e536e;
  font-size: clamp(.8rem, 1.05vw, 1.2rem);
  font-weight: 900;
}

.room-code-cells {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, .75vw, 13px);
  direction: ltr;
}

.room-code-cell {
  min-width: 0;
  height: clamp(55px, 6vw, 88px);
  display: grid;
  place-items: center;
  border: clamp(2px, .18vw, 3px) solid #44234c;
  border-radius: clamp(8px, .85vw, 15px);
  background: #32163c;
  color: #ffd24a;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 4.1rem);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 clamp(3px, .35vw, 6px) 0 rgba(55, 29, 58, .25);
}

.room-code-cell:nth-child(2) { background: #0d6c71; }
.room-code-cell:nth-child(3) { background: #bd4c3e; }
.room-code-cell:nth-child(4) { background: #4f7738; }

.lobby-domain {
  margin: 0;
  overflow: hidden;
  direction: ltr;
  color: #0b6f77;
  font-size: clamp(.72rem, 1vw, 1.15rem);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-qr-card {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: clamp(4px, .45vw, 8px);
  color: #4b344f;
  font-size: clamp(.68rem, .85vw, 1rem);
  font-weight: 900;
  direction: rtl;
}

.lobby-qr-card .qr-box {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: clamp(6px, .55vw, 10px);
  border: clamp(3px, .22vw, 4px) solid #efb528;
  border-radius: clamp(10px, 1vw, 18px);
  background: #fff;
  box-shadow: 0 clamp(4px, .45vw, 8px) 0 rgba(81, 42, 52, .19);
}

.lobby-status-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, .65vw, 11px);
}

.lobby-status-row .meta-card {
  min-width: 0;
  padding: clamp(6px, .65vw, 11px);
  border: 1px solid rgba(74, 41, 75, .18);
  border-radius: clamp(8px, .7vw, 12px);
  background: rgba(255, 255, 255, .5);
  color: #735b73;
  font-size: clamp(.55rem, .72vw, .84rem);
}

.lobby-status-row .meta-card strong {
  overflow: hidden;
  color: #322139;
  font-size: clamp(.66rem, .88vw, 1rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-roster-card {
  left: 48.1%;
  top: 6.5%;
  width: 48.1%;
  height: 56.7%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(6px, .75vw, 13px);
  padding: clamp(18px, 1.7vw, 29px) clamp(22px, 2vw, 34px);
  color: #fff5df;
  text-align: center;
}

.lobby-roster-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.lobby-roster-heading h2 {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  margin: 0;
  color: #fff2d1;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.1vw, 2.45rem);
}

.lobby-player-grid {
  min-height: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-content: stretch;
  gap: clamp(5px, .65vw, 11px);
}

.lobby-player-card {
  min-width: 0;
  min-height: 0;
  align-content: center;
  gap: clamp(2px, .25vw, 4px);
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lobby-player-card .player-avatar {
  width: clamp(42px, 5vw, 76px);
  border: clamp(2px, .18vw, 3px) solid var(--player-color, #f4bd2d);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
}

.lobby-player-card .player-name {
  color: #fff7e8;
  font-size: clamp(.62rem, .84vw, .98rem);
  line-height: 1.15;
}

.lobby-player-card .player-state {
  color: #d7cbb8;
  font-size: clamp(.5rem, .62vw, .72rem);
  line-height: 1.05;
}

.lobby-player-card.host .player-state {
  color: #ffd34b;
}

.empty-avatar {
  border-style: dashed !important;
  background: rgba(255, 255, 255, .055) !important;
}

.empty-seat .player-name {
  display: none;
}

.lobby-player-count {
  margin: 0;
  color: #d8d0c0;
  font-size: clamp(.6rem, .78vw, .9rem);
  font-weight: 900;
}

.lobby-guide-card {
  left: 48.2%;
  top: 67.6%;
  width: 47.7%;
  height: 26.8%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(4px, .45vw, 8px);
  padding: clamp(10px, .9vw, 16px) clamp(21px, 2vw, 34px) clamp(12px, 1.1vw, 19px);
  color: #302037;
  text-align: center;
}

.lobby-guide-card h2 {
  margin: 0;
  color: #3b2142;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.45vw, 1.7rem);
  line-height: 1.1;
}

.lobby-step-list {
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  list-style: none;
  direction: rtl;
}

.lobby-step {
  min-width: 0;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(2px, .25vw, 4px);
  padding: 0 clamp(6px, .7vw, 12px);
}

.lobby-step-number {
  width: clamp(22px, 2vw, 34px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #5b2d65;
  color: #fff2d8;
  font-size: clamp(.65rem, .85vw, .95rem);
  font-weight: 900;
  box-shadow: 0 2px 0 rgba(43, 24, 46, .24);
}

.lobby-step strong {
  color: #39283f;
  font-size: clamp(.82rem, 1.05vw, 1.15rem);
  line-height: 1.35;
}

.lobby-start-status {
  width: min(94%, 650px);
  min-height: clamp(34px, 3.3vw, 49px);
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, .65vw, 11px);
  padding: clamp(4px, .4vw, 7px) clamp(10px, 1vw, 17px);
  border: 2px solid #6b3555;
  border-radius: 999px;
  background: #6b3555;
  color: #fff4e3;
  font-size: clamp(.76rem, 1vw, 1.15rem);
  box-shadow: 0 3px 0 rgba(59, 33, 52, .24);
}

.lobby-start-status.ready {
  border-color: #315e38;
  background: #4d7d43;
  color: #fff9dd;
}

.lobby-start-icon {
  width: clamp(16px, 1.55vw, 25px);
  height: clamp(16px, 1.55vw, 25px);
  filter: brightness(0) invert(1);
}

@media (max-width: 1100px), (max-height: 650px) {
  .lobby-join-card {
    gap: 7px;
    padding: 12px 19px;
  }

  .lobby-panel-heading p {
    line-height: 1.3;
  }

  .lobby-phone-prompt {
    min-height: 28px;
    margin-top: 4px;
    padding: 3px 10px;
  }

  .lobby-join-row {
    grid-template-columns: minmax(0, 1fr) clamp(84px, 10vw, 116px);
    gap: 10px;
  }

  .lobby-status-row .meta-card {
    padding: 4px;
  }

  .lobby-roster-card {
    gap: 4px;
    padding: 12px 18px;
  }

  .lobby-player-card .player-state {
    display: none;
  }

  .lobby-guide-card {
    gap: 2px;
    padding: 7px 18px 9px;
  }

  .lobby-step strong {
    line-height: 1.2;
  }
}
/* Shared شخابيط gameplay stage: carries the lobby's chalkboard language into play. */
body:is([data-phase="drawing"], [data-phase="vote"], [data-phase="scoreboard"]) {
  background: #03080b;
}

body:is([data-phase="drawing"], [data-phase="vote"], [data-phase="scoreboard"]) #stage {
  grid-template-rows: clamp(58px, 7.6vh, 78px) minmax(0, 1fr);
  background-color: #03080b;
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body:is([data-phase="drawing"], [data-phase="vote"], [data-phase="scoreboard"]) #topBar {
  grid-template-columns: minmax(140px, 1fr) minmax(220px, 2fr) minmax(140px, 1fr);
  padding-inline: clamp(62px, 7vw, 132px);
  border-bottom: 2px dashed rgba(255, 255, 255, .32);
  background: rgba(3, 10, 14, .9);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .28);
}


body:is([data-phase="drawing"], [data-phase="vote"], [data-phase="scoreboard"]) #tbInfo {
  color: #f7f3e9;
}

body:is([data-phase="drawing"], [data-phase="vote"], [data-phase="scoreboard"]) #tbRoom {
  color: #42d5ef;
}

body:is([data-phase="drawing"], [data-phase="vote"], [data-phase="scoreboard"]) #view {
  padding: clamp(8px, 1.3vh, 16px) clamp(58px, 6.7vw, 126px) clamp(14px, 2.2vh, 28px);
}

.game-stage {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 1.5vh, 18px);
  padding: clamp(12px, 1.5vw, 24px);
  overflow: hidden;
  border: clamp(2px, .18vw, 4px) dashed #33cbe9;
  border-radius: clamp(20px, 2.1vw, 36px);
  background: rgba(4, 12, 16, .94);
  box-shadow: inset 0 0 30px rgba(51, 203, 233, .08), 0 12px 32px rgba(0, 0, 0, .4);
}

.game-stage-heading {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 1px;
  text-align: center;
}

.game-stage-kicker {
  margin: 0;
  color: #ffc928;
  font-size: clamp(.72rem, 1vw, 1rem);
  font-weight: 900;
}

.game-stage .big-title {
  color: #43d2f1;
  font-size: clamp(1.7rem, 3vw, 3.25rem);
  text-shadow: 0 3px 0 rgba(78, 34, 111, .8);
}

.game-stage .sub-title {
  color: #f4efe4;
  font-size: clamp(.82rem, 1.25vw, 1.18rem);
  font-weight: 700;
}

.drawing-stage-content {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(210px, .32fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(12px, 1.6vw, 24px);
}

.chalk-status-card,
.drawing-roster-board,
.vote-options-panel {
  min-width: 0;
  min-height: 0;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: clamp(14px, 1.35vw, 24px);
  background: rgba(18, 29, 36, .94);
}

.drawing-status-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(6px, 1vh, 12px);
  padding: clamp(14px, 2vw, 28px);
  border-color: #ffc928;
  text-align: center;
  box-shadow: 0 6px 0 rgba(91, 36, 134, .68);
}

.status-card-label {
  margin: 0;
  color: #f7f3e9;
  font-size: clamp(.8rem, 1.2vw, 1.12rem);
  font-weight: 900;
}

.drawing-status-card .big-timer {
  color: #ffc928;
  font-size: clamp(4rem, 7.2vw, 7.8rem);
}

.drawing-status-card .progress-big {
  color: #43d2f1;
  font-size: clamp(1.65rem, 3vw, 3.25rem);
}

.chalk-divider {
  width: 74%;
  border-top: 2px dashed rgba(255, 255, 255, .35);
}

.status-card-note {
  max-width: 26ch;
  margin: 0;
  color: #c9d0d3;
  font-size: clamp(.66rem, .9vw, .9rem);
  line-height: 1.65;
}

.drawing-roster-board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 1.2vh, 14px);
  padding: clamp(12px, 1.5vw, 22px);
  border-color: rgba(67, 210, 241, .68);
}

.roster-board-title,
.options-title {
  margin: 0;
  color: #ffc928;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.45vw, 1.55rem);
  text-align: center;
}

.drawing-player-grid {
  min-height: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-content: stretch;
  gap: clamp(7px, 1vw, 14px);
}

.drawing-player-grid .player-card {
  min-height: 0;
  align-content: center;
  padding: clamp(7px, .9vw, 13px) 5px;
  border: 2px solid rgba(255, 255, 255, .34);
  border-top: 5px solid var(--player-color, #43d2f1);
  border-radius: clamp(12px, 1vw, 18px);
  background: #17242d;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .4);
}

.drawing-player-grid .player-card.done {
  border-color: #65d391;
  background: #19372f;
}

.drawing-player-grid .player-avatar {
  width: clamp(42px, 5vw, 72px);
  border: 2px solid rgba(255, 255, 255, .75);
}

.drawing-player-grid .player-name {
  color: #fff9ef;
  font-size: clamp(.72rem, 1.05vw, 1rem);
}

.drawing-player-grid .player-state {
  font-size: clamp(.6rem, .78vw, .78rem);
}

.vote-stage-content {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, .42fr) minmax(0, .58fr);
  align-items: stretch;
  gap: clamp(14px, 2vw, 30px);
}

.vote-art-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: clamp(8px, 1.2vh, 14px);
}

.vote-art-panel .drawing-frame {
  width: min(49vh, 34vw);
  max-height: 100%;
  padding: clamp(8px, .75vw, 12px);
  border: clamp(5px, .5vw, 9px) solid #f1dfb7;
  border-radius: clamp(13px, 1.2vw, 22px);
  background: #fdf9f0;
  box-shadow: 0 8px 0 #824cad, 0 15px 28px rgba(0, 0, 0, .42);
}

.vote-meta-strip {
  width: min(440px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vote-timer,
.vote-progress {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 6px 10px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 12px;
  background: #14222b;
}

.vote-timer { border-color: #ffc928; }
.vote-progress { border-color: #43d2f1; }
.vote-meta-label { color: #f4efe4; font-size: clamp(.65rem, .85vw, .82rem); font-weight: 900; }
.vote-meta-strip .big-timer { color: #ffc928; font-size: clamp(1.7rem, 2.6vw, 2.8rem); }
.vote-meta-strip .progress-big { color: #43d2f1; font-size: clamp(1.25rem, 2vw, 2rem); }

.vote-options-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 1.2vh, 14px);
  padding: clamp(12px, 1.5vw, 22px);
  border-color: rgba(255, 201, 40, .68);
}

.chalk-choices-grid {
  max-height: none;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(7px, .85vw, 12px);
}

.chalk-choice-card {
  grid-template-columns: clamp(26px, 2.4vw, 38px) minmax(0, 1fr);
  gap: clamp(7px, .8vw, 12px);
  padding: clamp(7px, .9vw, 13px);
  border: 3px solid rgba(255, 255, 255, .82);
  border-radius: clamp(11px, 1vw, 17px);
  background: #70d7f2;
  color: #111820;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .36);
  font-size: clamp(.74rem, 1.18vw, 1.14rem);
  line-height: 1.45;
}

.chalk-choice-card:nth-child(4n + 2) { background: #bce98b; }
.chalk-choice-card:nth-child(4n + 3) { background: #b88bea; }
.chalk-choice-card:nth-child(4n + 4) { background: #ff91ae; }

.choice-number {
  width: clamp(26px, 2.4vw, 38px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid rgba(17, 24, 32, .55);
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  font-weight: 900;
}

.choice-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.scoreboard-game-stage {
  border-color: #ffc928;
}

.scoreboard-game-stage .big-title {
  color: #ffc928;
}

.chalk-score-list {
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: clamp(7px, 1vh, 12px) clamp(12px, 1.5vw, 22px);
}

.chalk-score-row {
  grid-template-columns: clamp(30px, 2.7vw, 42px) clamp(38px, 3.8vw, 58px) minmax(0, 1fr) auto minmax(62px, auto);
  gap: clamp(7px, .8vw, 12px);
  padding: clamp(6px, .9vh, 11px) clamp(10px, 1.1vw, 17px);
  border: 2px solid rgba(255, 255, 255, .34);
  border-inline-start: 6px solid var(--player-color, #43d2f1);
  border-radius: clamp(12px, 1vw, 18px);
  background: #17242d;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .36);
}

.chalk-score-row.place-1 { border-color: #ffc928; background: #302a17; }
.chalk-score-row.place-2 { border-color: #43d2f1; }
.chalk-score-row.place-3 { border-color: #ff91ae; }

.chalk-score-row img {
  width: clamp(38px, 3.8vw, 58px);
  height: clamp(38px, 3.8vw, 58px);
  border: 2px solid rgba(255, 255, 255, .76);
  border-radius: 50%;
}

.chalk-score-rank {
  width: clamp(30px, 2.7vw, 42px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: #43d2f1;
  font-size: clamp(.85rem, 1.2vw, 1.2rem);
}

.chalk-score-row.place-1 .chalk-score-rank { color: #ffc928; }
.chalk-score-row.place-3 .chalk-score-rank { color: #ff91ae; }
.chalk-score-row .score-name { color: #fff9ef; font-size: clamp(.8rem, 1.15vw, 1.12rem); }
.chalk-score-row .score-delta { font-size: clamp(.7rem, 1vw, 1rem); }

.chalk-score-row .score-total {
  display: grid;
  justify-items: end;
  color: #ffc928;
  line-height: 1.05;
}

.chalk-score-row .score-total strong { font-size: clamp(1rem, 1.45vw, 1.5rem); }
.chalk-score-row .score-total small { color: #c9d0d3; font-size: clamp(.52rem, .68vw, .7rem); }

@media (max-width: 1100px), (max-height: 780px) {
  body:is([data-phase="drawing"], [data-phase="vote"], [data-phase="scoreboard"]) #topBar {
    padding-inline: clamp(58px, 6.4vw, 76px);
  }

  body:is([data-phase="drawing"], [data-phase="vote"], [data-phase="scoreboard"]) #view {
    padding: 8px clamp(52px, 6vw, 70px) 14px;
  }

  .game-stage { gap: 8px; padding: 12px 15px; }
  .drawing-stage-content { grid-template-columns: minmax(200px, .3fr) minmax(0, 1fr); gap: 12px; }
  .drawing-roster-board, .vote-options-panel { padding: 10px 12px; }
  .vote-stage-content { grid-template-columns: minmax(260px, .4fr) minmax(0, .6fr); gap: 14px; }
  .vote-art-panel .drawing-frame { width: min(45vh, 32vw); }
  .chalk-score-row { padding-block: 5px; }
}

@media (max-height: 650px) {
  .game-stage-heading .sub-title { display: none; }
  .game-stage { padding-block: 9px; }
  .drawing-status-card { padding-block: 9px; }
  .status-card-note { display: none; }
  .drawing-player-grid .player-state { display: none; }
  .vote-options-panel { gap: 5px; }
  .chalk-choice-card { padding-block: 5px; }
}

/* Drawing phase: live UI layered over the selected paper-collage background. */
body[data-phase="drawing"] {
  background: #071431;
}

body[data-phase="drawing"] #stage {
  grid-template-rows: minmax(0, 1fr);
  background-color: #071431;
  background-image: none;
}

body[data-phase="drawing"] #topBar {
  display: none;
}

body[data-phase="drawing"] #view {
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: #071431;
}

.paper-drawing-stage {
  position: relative;
  width: min(100vw, 177.68vh);
  max-width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  direction: rtl;
  background-color: #1756ee;
  background-image: var(--rasam-drawing-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  isolation: isolate;
}

.paper-timer-panel,
.paper-progress-panel,
.paper-privacy-panel,
.paper-drawing-instruction,
.paper-player-grid {
  position: absolute;
  z-index: 1;
}

.paper-timer-panel {
  left: 8.55%;
  top: 4.25%;
  width: 26.75%;
  height: 21%;
  display: grid;
  place-items: center;
  direction: ltr;
}

.paper-timer-value {
  color: #fbf2dd;
  font-family: var(--font-body);
  font-size: clamp(4rem, 10.2vw, 11.8rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.08em;
  text-shadow: 0 .035em 0 rgba(0, 0, 0, .28);
}

.paper-timer-value.urgent {
  color: #ff6574;
}

.paper-progress-panel {
  left: 10.85%;
  top: 26.4%;
  width: 23.25%;
  height: 8.6%;
  display: grid;
  place-items: center;
  direction: rtl;
}

.paper-progress-value {
  color: #fff7ec;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.65vw, 3rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 .08em 0 rgba(92, 25, 55, .22);
  white-space: nowrap;
}

.paper-privacy-panel {
  left: 11.45%;
  top: 36.95%;
  width: 21%;
  height: 8.1%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, .65vw, 12px);
  direction: rtl;
  color: #fff8e9;
  font-family: var(--font-body);
  font-size: clamp(.9rem, 1.85vw, 2.1rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.paper-privacy-panel img {
  width: clamp(20px, 2vw, 38px);
  height: auto;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
}

.paper-drawing-instruction {
  left: 39.2%;
  top: 32.8%;
  width: 57.2%;
  height: 49.2%;
  margin: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .08em;
  padding: 3.3% 4.2% 3.9%;
  color: #07152e;
  font-family: var(--font-body);
  font-size: clamp(2rem, 5vw, 6rem);
  font-weight: 900;
  line-height: 1.34;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 .025em 0 rgba(7, 21, 46, .12);
}

.paper-drawing-instruction span {
  display: block;
  white-space: nowrap;
}

.paper-player-grid {
  left: 9.75%;
  top: 45.2%;
  width: 24.7%;
  height: 51.3%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: center;
  justify-items: center;
  gap: 0 4%;
  direction: rtl;
}

.paper-player-token {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}

.paper-player-token.disconnected {
  opacity: .48;
  filter: grayscale(.6);
}

.paper-player-avatar {
  width: clamp(46px, 6.25vw, 112px);
  height: clamp(46px, 6.25vw, 112px);
  display: block;
  border: clamp(2px, .18vw, 4px) solid #fffaf0;
  outline: clamp(2px, .2vw, 4px) solid var(--player-color, #1eb9bd);
  border-radius: 50%;
  object-fit: cover;
  background: #fffaf0;
  box-shadow: 0 clamp(2px, .25vw, 5px) 0 rgba(9, 23, 40, .28);
}

.paper-player-marker {
  position: absolute;
  right: 4%;
  bottom: 2%;
  width: clamp(20px, 2.35vw, 42px);
  height: clamp(20px, 2.35vw, 42px);
  display: grid;
  place-items: center;
  border: clamp(2px, .18vw, 4px) solid var(--player-color, #1eb9bd);
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 2px 0 rgba(9, 23, 40, .2);
}

.paper-player-marker img {
  width: 76%;
  height: 76%;
  display: block;
  color: #07152e;
}

.paper-player-marker.waiting {
  background: rgba(255, 250, 240, .78);
}

@media (max-width: 700px), (max-height: 520px) {
  .paper-drawing-instruction {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
  }

  .paper-privacy-panel {
    gap: 4px;
  }
}
/* Guess replay substage: a live stroke replay on the selected theatre-stage artwork. */
body[data-phase="guess"][data-entry-stage="replay"] {
  background: #12073d;
}

body[data-phase="guess"][data-entry-stage="replay"] #stage {
  grid-template-rows: minmax(0, 1fr);
  background-color: #12073d;
  background-image: none;
}

body[data-phase="guess"][data-entry-stage="replay"] #topBar {
  display: none;
}

body[data-phase="guess"][data-entry-stage="replay"] #view {
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: #12073d;
}

.spotlight-reveal-stage {
  position: relative;
  width: min(100vw, 177.58vh);
  max-width: 100%;
  aspect-ratio: 1671 / 941;
  overflow: hidden;
  direction: rtl;
  background-color: #132874;
  background-image: var(--rasam-drawing-reveal-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  isolation: isolate;
}

.spotlight-reveal-counter,
.spotlight-drawing-frame {
  position: absolute;
  z-index: 1;
}

.spotlight-reveal-counter {
  left: 5%;
  top: 5.15%;
  width: 17.5%;
  height: 11.9%;
  display: grid;
  place-items: center;
  color: #fff8e9;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.65vw, 3rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 .08em 0 rgba(92, 25, 55, .22);
  white-space: nowrap;
}

.spotlight-drawing-frame {
  left: 33.85%;
  top: 26.75%;
  width: 32.25%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(-.25deg);
  animation: spotlight-paper-arrive 420ms cubic-bezier(.2, .8, .2, 1) both;
}

.spotlight-drawing-frame canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  background: transparent;
}

@keyframes spotlight-paper-arrive {
  from {
    opacity: 0;
    transform: translateY(2.4%) rotate(-.25deg) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(-.25deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-drawing-frame {
    animation: none;
  }
}
/* Guessing phase: live canvas and player progress on the selected evidence wall. */
body[data-phase="guess"] {
  background: #031d29;
}

body[data-phase="guess"] #stage {
  grid-template-rows: minmax(0, 1fr);
  background-color: #031d29;
  background-image: none;
}

body[data-phase="guess"] #topBar {
  display: none;
}

body[data-phase="guess"] #view {
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: #031d29;
}

.evidence-guess-stage {
  position: relative;
  width: min(100vw, 177.68vh);
  max-width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  direction: rtl;
  background-color: #063b45;
  background-image: var(--rasam-guess-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  isolation: isolate;
}

.evidence-timer-value,
.evidence-progress-value,
.evidence-guess-roster,
.evidence-drawing-frame {
  position: absolute;
  z-index: 1;
}

.evidence-timer-value {
  left: 10.35%;
  top: 25.55%;
  width: 11.9%;
  height: 17.4%;
  display: grid;
  place-items: center;
  min-width: 0;
  color: #073d40;
  font-family: var(--font-body);
  font-size: clamp(3rem, 6.2vw, 7rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: .9;
  letter-spacing: -.07em;
  text-align: center;
  text-shadow: 0 .025em 0 rgba(255, 255, 255, .28);
}

.evidence-timer-value.urgent {
  color: #d72f3e;
}

.evidence-progress-value {
  left: 4%;
  top: 44.45%;
  width: 24%;
  height: 7.8%;
  display: grid;
  place-items: center;
  color: #fff8e9;
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.45vw, 2.85rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 .08em 0 rgba(92, 25, 55, .22);
  white-space: nowrap;
}

.evidence-guess-roster {
  inset: 0;
  pointer-events: none;
}

.evidence-player-token {
  position: absolute;
  width: 4.35%;
  aspect-ratio: 1;
}

.evidence-player-token:nth-child(1) { left: 4.15%; top: 54.55%; }
.evidence-player-token:nth-child(2) { left: 10.45%; top: 54.55%; }
.evidence-player-token:nth-child(3) { left: 16.7%; top: 54.55%; }
.evidence-player-token:nth-child(4) { left: 23%; top: 54.55%; }
.evidence-player-token:nth-child(5) { left: 2.35%; top: 68.15%; }
.evidence-player-token:nth-child(6) { left: 8.25%; top: 68.15%; }
.evidence-player-token:nth-child(7) { left: 14%; top: 68.15%; }
.evidence-player-token:nth-child(8) { left: 19.55%; top: 68.15%; }
.evidence-player-token:nth-child(9) { left: 25.1%; top: 68.15%; }

.evidence-player-avatar {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background: transparent;
}

.evidence-player-token.waiting .evidence-player-avatar {
  opacity: .42;
  filter: grayscale(.28) saturate(.72);
}

.evidence-player-token.disconnected {
  opacity: .3;
}

.evidence-player-marker {
  position: absolute;
  right: -12%;
  bottom: -10%;
  width: 45%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.evidence-player-marker img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 2px rgba(3, 25, 33, .32));
}

.evidence-drawing-frame {
  left: 43.25%;
  top: 11.75%;
  width: 40.25%;
  max-width: none;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(-.2deg);
  animation: evidence-drawing-arrive 380ms cubic-bezier(.2, .8, .2, 1) both;
}

.evidence-drawing-frame canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  background: transparent;
}

@keyframes evidence-drawing-arrive {
  from {
    opacity: 0;
    transform: translateY(1.6%) rotate(-.2deg) scale(.975);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(-.2deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .evidence-drawing-frame {
    animation: none;
  }
}
/* Voting phase: live drawing, choices, countdown, and player progress on the selected choice arena. */
body[data-phase="vote"] {
  background: #1c0d20;
}

body[data-phase="vote"] #stage {
  grid-template-rows: minmax(0, 1fr);
  background-color: #1c0d20;
  background-image: none;
}

body[data-phase="vote"] #topBar {
  display: none;
}

body[data-phase="vote"] #view {
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: #1c0d20;
}

.choice-arena-stage {
  position: relative;
  width: min(100vw, 177.68vh);
  max-width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  direction: rtl;
  background-color: #1c0d20;
  background-image: var(--rasam-vote-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  isolation: isolate;
}

.choice-timer-value,
.choice-arena-options,
.choice-arena-drawing-frame,
.choice-progress-value,
.choice-arena-roster {
  position: absolute;
  z-index: 1;
}

.choice-timer-value {
  left: 82.7%;
  top: 8.1%;
  width: 12.1%;
  height: 18.2%;
  display: grid;
  place-items: center;
  min-width: 0;
  color: #241426;
  font-family: var(--font-body);
  font-size: clamp(3rem, 5.2vw, 6rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: .9;
  letter-spacing: -.07em;
  text-align: center;
  text-shadow: 0 .025em 0 rgba(255, 255, 255, .25);
}

.choice-timer-value.urgent {
  color: #c93332;
}

.choice-arena-options {
  inset: 0;
  direction: ltr;
  pointer-events: none;
}

.choice-arena-option {
  position: absolute;
  width: 21.9%;
  height: 7.5%;
  color: #161117;
  font-family: var(--font-body);
  font-weight: 900;
}

.choice-arena-option:nth-child(1) { left: 3.25%; top: 30.2%; }
.choice-arena-option:nth-child(2) { left: 3.25%; top: 40.55%; }
.choice-arena-option:nth-child(3) { left: 3.25%; top: 50.9%; }
.choice-arena-option:nth-child(4) { left: 3.25%; top: 61.2%; }
.choice-arena-option:nth-child(5) { left: 3.25%; top: 71.6%; }
.choice-arena-option:nth-child(6) { left: 73.15%; top: 30.75%; }
.choice-arena-option:nth-child(7) { left: 73.15%; top: 41.1%; }
.choice-arena-option:nth-child(8) { left: 73.15%; top: 51.5%; }
.choice-arena-option:nth-child(9) { left: 73.15%; top: 61.85%; }
.choice-arena-option:nth-child(10) { left: 73.15%; top: 72.15%; }

.choice-arena-text {
  position: absolute;
  top: 8%;
  height: 84%;
  display: grid;
  place-items: center;
}

.choice-arena-text {
  left: 24%;
  width: 63.5%;
  direction: rtl;
  overflow: hidden;
  color: #161117;
  font-size: clamp(.68rem, 1.24vw, 1.42rem);
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.choice-arena-drawing-frame {
  left: 37.85%;
  top: 34.1%;
  width: 24.6%;
  max-width: none;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(.15deg);
  animation: choice-arena-drawing-arrive 380ms cubic-bezier(.2, .8, .2, 1) both;
}

.choice-arena-drawing-frame canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  background: transparent;
}

.choice-progress-value {
  left: 38.15%;
  top: 79.05%;
  width: 23.7%;
  height: 5.6%;
  display: grid;
  place-items: center;
  min-width: 0;
  color: #f5e6be;
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.05vw, 2.35rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 .06em 0 rgba(0, 0, 0, .45);
  white-space: nowrap;
}

.choice-arena-roster {
  left: 28.15%;
  top: 86.05%;
  width: 43.7%;
  height: 10.4%;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  align-items: start;
  gap: .7%;
  direction: ltr;
  pointer-events: none;
}

.choice-player-token {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 5%;
  border-radius: 50%;
  background: #edd7aa;
  box-shadow: 0 .17em .08em rgba(11, 6, 14, .38);
}

.choice-player-avatar {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.choice-player-token.waiting .choice-player-avatar {
  opacity: .28;
  filter: grayscale(.7) saturate(.5);
}

.choice-player-token.disconnected {
  opacity: .3;
}

.choice-player-marker {
  position: absolute;
  right: -7%;
  bottom: -7%;
  width: 42%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.choice-player-marker img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 2px rgba(11, 6, 14, .38));
}

@keyframes choice-arena-drawing-arrive {
  from {
    opacity: 0;
    transform: translateY(1.6%) rotate(.15deg) scale(.975);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(.15deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .choice-arena-drawing-frame {
    animation: none;
  }
}
/* Reveal phase: one dominant drawing and one live answer panel on a unique paper background. */
body[data-phase="reveal"] {
  background: #07172e;
}

body[data-phase="reveal"] #stage {
  grid-template-rows: minmax(0, 1fr);
  background-color: #07172e;
  background-image: none;
}

body[data-phase="reveal"] #topBar {
  display: none;
}

body[data-phase="reveal"] #view {
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: #07172e;
}

.quiet-reveal-stage {
  position: relative;
  width: min(100vw, 177.68vh);
  max-width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  direction: rtl;
  isolation: isolate;
  background-color: #07172e;
  background-image: var(--rasam-reveal-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.quiet-reveal-phase,
.quiet-reveal-progress,
.quiet-reveal-drawing-frame,
.quiet-reveal-panel {
  position: absolute;
  z-index: 1;
  margin: 0;
}


.quiet-reveal-phase {
  left: 41%;
  top: 4.8%;
  width: 18%;
  color: #f5bc28;
  font-family: var(--font-body);
  font-size: clamp(.9rem, 1.75vw, 2rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.quiet-reveal-progress {
  right: 4.7%;
  top: 5.1%;
  min-width: 15%;
  color: #fff4dc;
  font-family: var(--font-body);
  font-size: clamp(.88rem, 1.55vw, 1.8rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.quiet-reveal-drawing-frame {
  left: 13.2%;
  top: 17.4%;
  width: 42%;
  max-width: none;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.quiet-reveal-drawing-frame canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  background: transparent;
}

.quiet-reveal-panel {
  left: 66.7%;
  top: 17.2%;
  width: 29%;
  height: 68.2%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  padding: 2.5%;
  color: #0c203e;
  text-align: center;
  opacity: 0;
  transform: translateY(1.2%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.quiet-reveal-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.quiet-reveal-panel.is-suspense .quiet-reveal-title {
  letter-spacing: .18em;
  animation: reveal-suspense-pulse 520ms ease-in-out infinite alternate;
}

.quiet-reveal-panel.is-suspense .quiet-reveal-meta {
  visibility: hidden;
}

@keyframes reveal-suspense-pulse {
  from { opacity: .42; transform: scale(.96); }
  to { opacity: 1; transform: scale(1.04); }
}

.quiet-reveal-kind,
.quiet-reveal-author,
.quiet-reveal-voters,
.quiet-reveal-stats {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 900;
  line-height: 1.2;
}

.quiet-reveal-kind {
  color: #172f4b;
  font-size: clamp(.8rem, 1.45vw, 1.72rem);
}

.quiet-reveal-title {
  margin: 0;
  align-self: center;
  color: #fff4dc;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.75vw, 3.3rem);
  font-weight: 900;
  line-height: 1.1;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
  white-space: nowrap;
}

.quiet-reveal-title.long {
  font-size: clamp(1.125rem, 1.8vw, 2.15rem);
  line-height: 1.16;
  white-space: normal;
}

.quiet-reveal-author,
.quiet-reveal-voters {
  padding-top: 3.5%;
  border-top: 2px solid rgba(12, 32, 62, .72);
  font-size: clamp(.78rem, 1.48vw, 1.68rem);
  overflow-wrap: anywhere;
}

.quiet-reveal-voters {
  color: #172f4b;
}

.quiet-reveal-stats {
  padding-top: 4.5%;
  border-top: 2px solid rgba(12, 32, 62, .72);
  color: #fff4dc;
  font-size: clamp(.76rem, 1.38vw, 1.62rem);
}

.quiet-reveal-panel.truth .quiet-reveal-kind,
.quiet-reveal-panel.truth .quiet-reveal-stats {
  color: #173d32;
}

.quiet-reveal-panel.truth .quiet-reveal-title {
  color: #102d4e;
}

@media (max-aspect-ratio: 1/1) {
  .quiet-reveal-title { font-size: clamp(1.28rem, 3.2vw, 2.35rem); }
  .quiet-reveal-author,
  .quiet-reveal-voters,
  .quiet-reveal-stats { font-size: clamp(.58rem, 1.28vw, .9rem); }
}

@media (prefers-reduced-motion: reduce) {
  .quiet-reveal-panel {
    transition: none;
  }

  .quiet-reveal-panel.is-suspense .quiet-reveal-title {
    animation: none;
  }
}
/* Scoreboard phase: one dominant leader and a single, scan-friendly ranking sheet. */
body[data-phase="scoreboard"] {
  background: #071a4c;
}

body[data-phase="scoreboard"] #stage {
  grid-template-rows: minmax(0, 1fr);
  background-color: #071a4c;
  background-image: none;
}

body[data-phase="scoreboard"] #topBar {
  display: none;
}

body[data-phase="scoreboard"] #view {
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: #071a4c;
}

.scoreboard-spotlight-stage {
  position: relative;
  width: min(100vw, 177.68vh);
  max-width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  direction: rtl;
  isolation: isolate;
  background-color: #071a4c;
  background-image: var(--rasam-scoreboard-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.scoreboard-spotlight-title,
.scoreboard-spotlight-winner,
.scoreboard-ranking-title,
.scoreboard-ranking-list {
  position: absolute;
  z-index: 1;
}

.scoreboard-spotlight-title {
  left: 15.2%;
  top: 7.7%;
  width: 31.2%;
  margin: 0;
  color: #fff3d9;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 4.7rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 .07em 0 #071a4c, 0 .1em 0 rgba(7, 26, 76, .35);
  white-space: nowrap;
}

.scoreboard-spotlight-winner {
  inset: 0;
  pointer-events: none;
}

.scoreboard-winner-avatar,
.scoreboard-winner-place,
.scoreboard-winner-name,
.scoreboard-winner-score,
.scoreboard-winner-delta {
  position: absolute;
  margin: 0;
}

.scoreboard-winner-avatar {
  left: 21.55%;
  top: 26.25%;
  width: 19.35%;
  height: auto;
  aspect-ratio: 1;
  border: clamp(3px, .36vw, 7px) solid #fff3d9;
  border-radius: 50%;
  object-fit: cover;
  background: #0d8f98;
  box-shadow: 0 .45vw 0 rgba(7, 26, 76, .28);
}

.scoreboard-winner-place,
.scoreboard-winner-name {
  left: 17.55%;
  width: 24.55%;
  display: grid;
  place-items: center;
  color: #fff3d9;
  font-family: var(--font-body);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 .06em 0 rgba(7, 26, 76, .28);
  white-space: nowrap;
}

.scoreboard-winner-place {
  top: 59.5%;
  height: 6.9%;
  font-size: clamp(1rem, 2.35vw, 2.8rem);
}

.scoreboard-winner-name {
  top: 68.2%;
  height: 7.2%;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.8vw, 3.3rem);
}

.scoreboard-winner-score {
  left: 19.2%;
  top: 76.4%;
  width: 21.4%;
  color: #fff3d9;
  font-family: var(--font-display);
  font-size: clamp(2.45rem, 5.6vw, 6.7rem);
  font-weight: 900;
  line-height: .95;
  text-align: center;
  text-shadow: 0 .07em 0 #071a4c;
  white-space: nowrap;
}

.scoreboard-winner-delta {
  left: 25.05%;
  top: 88.1%;
  min-width: 9.8%;
  padding: .25% 1.25% .55%;
  border-radius: .15em;
  background: #0d929d;
  color: #fff3d9;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.25vw, 2.7rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: 0 .24vw 0 rgba(7, 26, 76, .42);
  white-space: nowrap;
}

.scoreboard-spotlight-winner.is-empty .scoreboard-winner-name {
  top: 47%;
}

.scoreboard-ranking-title {
  left: 61.25%;
  top: 6.25%;
  width: 22.2%;
  height: 6.5%;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff3d9;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.15vw, 2.55rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 .06em 0 rgba(7, 26, 76, .35);
  white-space: nowrap;
}

.scoreboard-ranking-list {
  left: 54.15%;
  top: 14.1%;
  width: 36.85%;
  height: 76.15%;
  display: grid;
  grid-template-rows: repeat(9, minmax(0, 1fr));
  padding: 0 1.1%;
  direction: ltr;
}

.scoreboard-ranking-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 9.5% 11.5% minmax(0, 1fr) 23% 16%;
  align-items: center;
  gap: 1.8%;
  border-bottom: max(1px, .12vw) solid rgba(92, 42, 126, .72);
  color: #101726;
}

.scoreboard-ranking-row:last-child {
  border-bottom: 0;
}

.scoreboard-ranking-row.disconnected {
  opacity: .5;
  filter: grayscale(.3);
}

.scoreboard-rank-badge {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding-bottom: 5%;
  background-image: var(--rasam-scoreboard-rank-badge);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #fff3d9;
  font-family: var(--font-display);
  font-size: clamp(.72rem, 1.45vw, 1.72rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 .06em 0 rgba(7, 26, 76, .45);
}

.scoreboard-row-avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: clamp(2px, .18vw, 4px) solid #fff3d9;
  border-radius: 50%;
  object-fit: cover;
  background: var(--player-color, #0d929d);
  box-shadow: 0 .15vw 0 rgba(92, 42, 126, .35);
}

.scoreboard-row-name,
.scoreboard-row-total,
.scoreboard-row-delta {
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.scoreboard-row-name {
  direction: rtl;
  overflow: hidden;
  color: #101726;
  font-size: clamp(.7rem, 1.55vw, 1.8rem);
  text-overflow: ellipsis;
}

.scoreboard-row-total {
  color: #101726;
  font-family: var(--font-display);
  font-size: clamp(.85rem, 1.9vw, 2.25rem);
  text-align: center;
}

.scoreboard-row-delta {
  padding: 9% 5% 13%;
  border-radius: .2em;
  background: var(--player-color, #0d929d);
  color: #fff3d9;
  font-family: var(--font-display);
  font-size: clamp(.62rem, 1.2vw, 1.42rem);
  text-align: center;
  text-shadow: 0 .05em 0 rgba(7, 26, 76, .28);
  box-shadow: 0 .12vw 0 rgba(92, 42, 126, .38);
}

@media (max-aspect-ratio: 1/1) {
  .scoreboard-spotlight-title { font-size: clamp(1.35rem, 4vw, 2.8rem); }
  .scoreboard-ranking-title { font-size: clamp(.8rem, 2.15vw, 1.55rem); }
  .scoreboard-row-name { font-size: clamp(.56rem, 1.55vw, 1.08rem); }
  .scoreboard-row-total { font-size: clamp(.65rem, 1.9vw, 1.35rem); }
  .scoreboard-row-delta { font-size: clamp(.5rem, 1.2vw, .9rem); }
}
/* FINAL SCRAPBOOK WALL: one champion poster, two runner-up tickets, and three awards. */
body[data-phase="final"] { background: #f4ddae; }
body[data-phase="final"] #stage { grid-template-rows: minmax(0, 1fr); background-color: #f4ddae; background-image: none; }
body[data-phase="final"] #topBar { display: none; }
body[data-phase="final"] #view { display: grid; place-items: center; padding: 0; overflow: hidden; background: #f4ddae; }
.final-scrapbook-stage { position: relative; width: min(100vw, 177.68vh); max-width: 100%; aspect-ratio: 1672 / 941; overflow: hidden; direction: rtl; isolation: isolate; background: #f4ddae var(--rasam-final-background) center / 100% 100% no-repeat; }
.final-title-banner-art, .final-scrapbook-title, .final-champion, .final-runner, .final-awards-board, .final-host-note { position: absolute; z-index: 1; }
.final-title-banner-art { left: 25.4%; top: 1.4%; width: 49.2%; height: 14.8%; object-fit: fill; pointer-events: none; }
.final-scrapbook-title { left: 31%; top: 4.15%; width: 38%; margin: 0; color: #071a4c; font-family: var(--font-display); font-size: clamp(1.55rem, 4.15vw, 4.85rem); font-weight: 900; line-height: 1; text-align: center; text-shadow: 0 .035em 0 rgba(255,255,255,.5); white-space: nowrap; }
.final-champion {
  --champion-ribbon-center: 27%;
  --champion-panel-center: 28.5%;
  inset: 0;
  pointer-events: none;
}
.final-champion-avatar { position: absolute; left: 15.25%; top: 28.4%; width: 22.2%; height: auto; aspect-ratio: 1; border: .38vw solid #fff3d9; border-radius: 50%; object-fit: cover; background: var(--player-color, #13b7b2); box-shadow: 0 .5vw 0 rgba(113,35,46,.22); }
.final-champion-place, .final-champion-name, .final-champion-score { position: absolute; margin: 0; text-align: center; }
.final-champion-place { left: calc(var(--champion-ribbon-center) - 15.1%); top: 59.8%; width: 30.2%; color: #fff3d9; font-family: var(--font-display); font-size: clamp(.95rem, 2.3vw, 2.7rem); font-weight: 900; line-height: 1; text-shadow: 0 .06em 0 rgba(7,26,76,.3); }
.final-champion-name { left: calc(var(--champion-panel-center) - 12.6%); top: 68%; width: 25.2%; max-height: 2.1em; display: -webkit-box; overflow: hidden; color: #071a4c; font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 3.5rem); font-weight: 900; line-height: 1.05; overflow-wrap: anywhere; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.final-champion-score { left: calc(var(--champion-panel-center) - 11.5%); top: 81%; width: 23%; color: #cd3857; font-family: var(--font-display); font-size: clamp(.82rem, 1.75vw, 2.05rem); font-weight: 900; line-height: 1; white-space: nowrap; }
.final-runner { --runner-content-offset: 9.6%; inset: 0; pointer-events: none; }
.final-runner-second { --runner-left: 49.4%; }
.final-runner-third { --runner-left: 70.8%; }
.final-runner-avatar { position: absolute; left: calc(var(--runner-left) + var(--runner-content-offset) - 4.7%); top: 18.2%; width: 9.4%; height: auto; aspect-ratio: 1; border: .3vw solid #fff3d9; border-radius: 50%; object-fit: cover; background: var(--player-color, #13b7b2); box-shadow: 0 .3vw 0 rgba(7,26,76,.25); }
.final-runner-rank, .final-runner-place, .final-runner-name, .final-runner-score { position: absolute; margin: 0; text-align: center; }
.final-runner-rank { left: var(--runner-left); top: 16.1%; width: 6.4%; color: #fff3d9; font-family: var(--font-display); font-size: clamp(.95rem, 2.35vw, 2.75rem); font-weight: 900; line-height: 1; transform: rotate(-6deg); text-shadow: 0 .06em 0 rgba(7,26,76,.35); }
.final-runner-place { left: calc(var(--runner-left) + var(--runner-content-offset) - 8.7%); top: 35.7%; width: 17.4%; color: #fff3d9; font-family: var(--font-display); font-size: clamp(.62rem, 1.35vw, 1.58rem); font-weight: 900; line-height: 1; white-space: nowrap; }
.final-runner-name { left: calc(var(--runner-left) + var(--runner-content-offset) - 8.25%); top: 40.6%; width: 16.5%; overflow: hidden; color: #071a4c; font-family: var(--font-display); font-size: clamp(20px, 1.65vw, 1.95rem); font-weight: 900; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.final-runner-score { left: calc(var(--runner-left) + var(--runner-content-offset) - 7.9%); top: 45.7%; width: 15.8%; color: #cd3857; font-family: var(--font-display); font-size: clamp(.58rem, 1.1vw, 1.3rem); font-weight: 900; line-height: 1; white-space: nowrap; }
.final-awards-board { left: 49.5%; top: 49.1%; width: 43%; height: 39.2%; }
.final-awards-heading { position: absolute; left: 23%; top: 7.4%; width: 53%; margin: 0; color: #071a4c; font-family: var(--font-display); font-size: clamp(.95rem, 2.35vw, 2.75rem); font-weight: 900; line-height: 1; text-align: center; white-space: nowrap; }
.final-awards-list { position: absolute; inset: 23% 5.5% 4.5%; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.final-award-row { display: grid; grid-template-columns: 15% 12% minmax(0, 1fr); align-items: center; gap: 2.2%; min-height: 0; direction: ltr; }
.final-award-avatar { justify-self: center; width: 72%; height: auto; aspect-ratio: 1; border: .2vw solid #fff3d9; border-radius: 50%; object-fit: cover; background: var(--player-color, #13b7b2); }
.final-award-medal { width: 100%; height: auto; object-fit: contain; }
.final-award-copy { min-width: 0; direction: rtl; line-height: 1; }
.final-award-title, .final-award-player { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.final-award-title { color: #fff3d9; font-family: var(--font-display); font-size: clamp(18px, 1.38vw, 1.62rem); font-weight: 900; }
.final-award-player { margin-top: 2.2%; color: #13b7b2; font-family: var(--font-body); font-size: clamp(18px, .92vw, 1.08rem); font-weight: 900; }
.final-host-note { left: 17.5%; bottom: 2.1%; width: 65%; margin: 0; color: #071a4c; font-family: var(--font-body); font-size: clamp(18px, 1.05vw, 1.25rem); font-weight: 900; line-height: 1; text-align: center; white-space: nowrap; }
@media (max-aspect-ratio: 1/1) { .final-scrapbook-title { font-size: clamp(1.05rem, 4.15vw, 2.65rem); } .final-champion-place { font-size: clamp(.62rem, 2.3vw, 1.5rem); } .final-champion-name { font-size: clamp(.78rem, 3vw, 1.9rem); } .final-runner-place { font-size: clamp(.42rem, 1.35vw, .86rem); } .final-runner-name { font-size: clamp(.5rem, 1.65vw, 1.05rem); } .final-awards-heading { font-size: clamp(.62rem, 2.35vw, 1.5rem); } .final-award-title { font-size: clamp(.45rem, 1.38vw, .88rem); } }
/* INTRO PAPER LAUNCH: layered paper-craft game-name reveal. */
body[data-phase="intro"] { background: #071a4c; }
body[data-phase="intro"] #stage { grid-template-rows: minmax(0, 1fr); background-color: #071a4c; background-image: none; }
body[data-phase="intro"] #topBar { display: none; }
body[data-phase="intro"] #view { display: grid; place-items: center; padding: 0; overflow: hidden; background: #071a4c; }
.intro-paper-launch {
  position: relative;
  width: min(100vw, 177.68vh);
  max-width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  direction: ltr;
  isolation: isolate;
  background: #071a4c var(--rasam-intro-background) center / 100% 100% no-repeat;
}
.intro-paper-launch--animated { background: #071a4c; }
.intro-paper-launch-art,
.intro-paper-layer,
.intro-paper-launch-scribble,
.intro-paper-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.intro-paper-launch-art { overflow: hidden; transform-origin: 50% 51%; }
.intro-paper-layer {
  pointer-events: none;
  background: transparent var(--rasam-intro-background) center / 100% 100% no-repeat;
  will-change: transform, opacity;
}
.intro-paper-launch-burst {
  z-index: 0;
  background-image: var(--rasam-intro-clean-background);
  animation: intro-paper-burst-in 940ms cubic-bezier(.16, .82, .22, 1) 260ms both;
}
.intro-paper-launch-scribble {
  z-index: 1;
  overflow: visible;
  fill: none;
  stroke: #13b7b2;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 0 rgba(7, 26, 76, .26));
  pointer-events: none;
}
.intro-paper-launch-scribble path {
  stroke-dasharray: 1120;
  stroke-dashoffset: 1120;
  animation: intro-scribble-draw 560ms cubic-bezier(.2, .72, .22, 1) 80ms both;
}
.intro-paper-prop {
  z-index: 2;
  opacity: 0;
}
.intro-paper-prop--pencil-left {
  clip-path: polygon(5.5% 48%, 10.4% 45%, 29.2% 100%, 18.2% 100%);
  transform-origin: 17% 76%;
  animation: intro-prop-left-in 690ms cubic-bezier(.15, .78, .18, 1) 940ms both;
}
.intro-paper-prop--pencil-right {
  clip-path: polygon(81% 46%, 86.8% 48%, 100% 100%, 88.4% 100%);
  transform-origin: 91% 76%;
  animation: intro-prop-right-in 690ms cubic-bezier(.15, .78, .18, 1) 1020ms both;
}
.intro-paper-prop--crayon-red {
  clip-path: polygon(45.9% 79.4%, 48.5% 100%, 38.5% 100%);
  transform-origin: 44% 100%;
  animation: intro-prop-red-in 590ms cubic-bezier(.15, .82, .2, 1) 1110ms both;
}
.intro-paper-prop--crayon-blue {
  clip-path: polygon(58.3% 79%, 66.8% 100%, 57% 100%);
  transform-origin: 62% 100%;
  animation: intro-prop-blue-in 590ms cubic-bezier(.15, .82, .2, 1) 1180ms both;
}
.intro-paper-confetti { z-index: 3; pointer-events: none; }
.intro-paper-confetti-piece {
  --tx: 0;
  --ty: 0;
  --rot: 0deg;
  --delay: 700ms;
  position: absolute;
  width: 1.45%;
  aspect-ratio: 1;
  opacity: 0;
  background: #13b7b2;
  box-shadow: 0 .22vw .22vw rgba(7, 26, 76, .2);
  animation: intro-confetti-arrive 620ms cubic-bezier(.16, .78, .2, 1) var(--delay) both;
}
.intro-paper-confetti-piece:nth-child(3n + 1) { clip-path: polygon(50% 0, 100% 100%, 0 78%); }
.intro-paper-confetti-piece:nth-child(3n + 2) { border-radius: 18% 2% 20% 5%; }
.intro-paper-confetti-piece--1 { top: 11%; left: 25%; --tx: 20vw; --ty: 22vh; --rot: 28deg; --delay: 700ms; }
.intro-paper-confetti-piece--2 { top: 9%; left: 70%; --tx: -18vw; --ty: 24vh; --rot: -18deg; --delay: 770ms; background: #6e42a8; }
.intro-paper-confetti-piece--3 { top: 34%; left: 9%; --tx: 40vw; --ty: 8vh; --rot: 72deg; --delay: 840ms; background: #f05b4f; }
.intro-paper-confetti-piece--4 { top: 29%; left: 87%; --tx: -37vw; --ty: 11vh; --rot: 18deg; --delay: 900ms; background: #fff0cf; }
.intro-paper-confetti-piece--5 { top: 61%; left: 24%; --tx: 25vw; --ty: -8vh; --rot: -48deg; --delay: 940ms; }
.intro-paper-confetti-piece--6 { top: 59%; left: 76%; --tx: -25vw; --ty: -7vh; --rot: 52deg; --delay: 980ms; background: #6e42a8; }
.intro-paper-confetti-piece--7 { top: 76%; left: 51%; --tx: -2vw; --ty: -23vh; --rot: 22deg; --delay: 1030ms; background: #f05b4f; }
.intro-paper-confetti-piece--8 { top: 77%; left: 82%; --tx: -31vw; --ty: -22vh; --rot: -36deg; --delay: 1080ms; }
.intro-paper-confetti-piece--9 { top: 46%; left: 15%; --tx: 34vw; --ty: 2vh; --rot: 66deg; --delay: 1120ms; background: #fff0cf; }
.intro-paper-confetti-piece--10 { top: 42%; left: 90%; --tx: -40vw; --ty: 3vh; --rot: 34deg; --delay: 1160ms; background: #13b7b2; }
.intro-paper-launch-logo {
  z-index: 4;
  clip-path: polygon(24.6% 12.2%, 76.3% 11.6%, 79.8% 16.8%, 80.6% 39.8%, 74.2% 51.4%, 28.1% 52.2%, 22.6% 44.5%, 21.5% 23%);
  transform-origin: 51% 32%;
  background-image: none;
  animation: intro-logo-land 700ms cubic-bezier(.16, .82, .18, 1) 1500ms both;
}
.intro-logo-blank,
.intro-logo-ink {
  position: absolute;
  inset: 0;
  background: transparent var(--rasam-intro-blank-plaque) center / 100% 100% no-repeat;
}
.intro-logo-ink {
  background-image: var(--rasam-intro-background);
  animation: intro-logo-reveal 860ms cubic-bezier(.46, 0, .2, 1) 2240ms both;
}
.intro-paper-launch::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: -22%;
  pointer-events: none;
  background: #071a4c;
  transform: translateX(130%) rotate(-7deg);
}
.intro-paper-launch.is-exiting .intro-paper-launch-art {
  animation: intro-paper-stage-exit 520ms cubic-bezier(.48, 0, .82, .24) both;
}
.intro-paper-launch.is-exiting::after {
  animation: intro-paper-wipe-out 520ms cubic-bezier(.48, 0, .82, .24) both;
}
@keyframes intro-scribble-draw {
  0% { opacity: 0; stroke-dashoffset: 1120; }
  12% { opacity: 1; }
  82% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes intro-paper-burst-in {
  0% { opacity: 0; clip-path: circle(1% at 50% 51%); transform: scale(.7) rotate(-2.4deg); }
  72% { opacity: 1; clip-path: circle(82% at 50% 51%); transform: scale(1.035) rotate(.35deg); }
  100% { opacity: 1; clip-path: circle(82% at 50% 51%); transform: scale(1) rotate(0); }
}
@keyframes intro-prop-left-in {
  0% { opacity: 0; transform: translate(-20%, 24%) rotate(-16deg) scale(.88); }
  74% { opacity: 1; transform: translate(1.2%, -1%) rotate(1.4deg) scale(1.025); }
  100% { opacity: 1; transform: translate(0) rotate(0) scale(1); }
}
@keyframes intro-prop-right-in {
  0% { opacity: 0; transform: translate(20%, 24%) rotate(16deg) scale(.88); }
  74% { opacity: 1; transform: translate(-1.2%, -1%) rotate(-1.4deg) scale(1.025); }
  100% { opacity: 1; transform: translate(0) rotate(0) scale(1); }
}
@keyframes intro-prop-red-in {
  0% { opacity: 0; transform: translate(-5%, 25%) rotate(-9deg) scale(.86); }
  76% { opacity: 1; transform: translate(.4%, -1%) rotate(1deg) scale(1.02); }
  100% { opacity: 1; transform: translate(0) rotate(0) scale(1); }
}
@keyframes intro-prop-blue-in {
  0% { opacity: 0; transform: translate(5%, 25%) rotate(9deg) scale(.86); }
  76% { opacity: 1; transform: translate(-.4%, -1%) rotate(-1deg) scale(1.02); }
  100% { opacity: 1; transform: translate(0) rotate(0) scale(1); }
}
@keyframes intro-confetti-arrive {
  0% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(-130deg) scale(.24); }
  72% { opacity: 1; transform: translate(-.2vw, .2vh) rotate(var(--rot)) scale(1.12); }
  100% { opacity: 1; transform: translate(0) rotate(var(--rot)) scale(1); }
}
@keyframes intro-logo-land {
  0% { opacity: 0; transform: translateY(-27%) rotate(-5deg) scale(.7); }
  70% { opacity: 1; transform: translateY(2%) rotate(1.1deg) scale(1.045); }
  86% { opacity: 1; transform: translateY(-.6%) rotate(-.35deg) scale(.992); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes intro-logo-reveal {
  0%, 10% { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes intro-paper-stage-exit {
  0% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.055) rotate(.45deg); }
}
@keyframes intro-paper-wipe-out {
  0% { transform: translateX(130%) rotate(-7deg); }
  100% { transform: translateX(-4%) rotate(-7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-paper-launch--animated { background: #071a4c var(--rasam-intro-background) center / 100% 100% no-repeat; }
  .intro-paper-launch--animated .intro-paper-launch-art,
  .intro-paper-launch--animated::after { display: none; }
}
/* ROUND INTRO PAPER ROCKET: live round number and optional multiplier on the approved paper plate. */
body[data-phase="round_intro"] { background: #071a4c; }
body[data-phase="round_intro"] #stage { grid-template-rows: minmax(0, 1fr); background-color: #071a4c; background-image: none; }
body[data-phase="round_intro"] #topBar { display: none; }
body[data-phase="round_intro"] #view { display: grid; place-items: center; padding: 0; overflow: hidden; background: #071a4c; }
.round-rocket-stage { position: relative; width: min(100vw, 177.68vh); max-width: 100%; aspect-ratio: 1672 / 941; overflow: hidden; direction: rtl; isolation: isolate; background: #071a4c var(--rasam-round-intro-background) center / 100% 100% no-repeat; }
.round-rocket-number, .round-rocket-label, .round-rocket-instruction { position: absolute; z-index: 1; margin: 0; font-family: var(--font-display); font-weight: 900; line-height: 1; text-align: center; }
.round-rocket-number { left: 33%; top: 6.5%; width: 34%; color: #fff0cf; font-size: clamp(10rem, 29.5vw, 34rem); letter-spacing: -.08em; line-height: .9; transform: scaleX(1.16) rotate(-2deg); -webkit-text-stroke: .018em #f4ddb1; paint-order: stroke fill; text-shadow: .018em .018em 0 #d8bc89, .04em .045em 0 #aa895f, .075em .085em 0 rgba(6, 20, 58, .64); }
.round-rocket-label { left: 23.5%; top: 65.8%; width: 53%; color: #071a4c; font-size: clamp(2.8rem, 8vw, 9.2rem); white-space: nowrap; }
.round-rocket-instruction { left: 35.2%; top: 87.6%; width: 29.6%; color: #071a4c; font-size: clamp(1.15rem, 3.2vw, 3.7rem); white-space: nowrap; }
.round-rocket-instruction.bonus { top: 88.1%; font-size: clamp(.95rem, 2.3vw, 2.7rem); }
@media (max-aspect-ratio: 1/1) {
  .round-rocket-number { font-size: clamp(6.5rem, 29.5vw, 18.5rem); }
  .round-rocket-label { font-size: clamp(1.8rem, 8vw, 5rem); }
  .round-rocket-instruction { font-size: clamp(.78rem, 3.2vw, 2rem); }
  .round-rocket-instruction.bonus { font-size: clamp(.64rem, 2.3vw, 1.45rem); }
}

/* GALLERY SPOTLIGHT SALON: selected easel-and-exhibit concept with live album content. */
body[data-phase="gallery"] { background: #071a4c; }
body[data-phase="gallery"] #stage { grid-template-rows: minmax(0, 1fr); background-color: #071a4c; background-image: none; }
body[data-phase="gallery"] #topBar { display: none; }
body[data-phase="gallery"] #view { display: grid; place-items: center; padding: 0; overflow: hidden; background: #071a4c; }
.gallery-salon-stage { position: relative; width: min(100vw, 177.68vh); max-width: 100%; aspect-ratio: 1672 / 941; overflow: hidden; direction: rtl; isolation: isolate; background: #071a4c var(--rasam-gallery-background) center / 100% 100% no-repeat; }
.gallery-salon-title, .gallery-salon-drawing-frame, .gallery-salon-prompt, .gallery-salon-avatar, .gallery-salon-artist, .gallery-salon-round, .gallery-salon-counter, .gallery-salon-best-lie, .gallery-salon-empty { position: absolute; z-index: 1; }
.gallery-salon-title, .gallery-salon-prompt, .gallery-salon-artist, .gallery-salon-round, .gallery-salon-counter, .gallery-salon-best-lie-label, .gallery-salon-best-lie-text, .gallery-salon-empty { margin: 0; font-weight: 900; text-align: center; }
.gallery-salon-title { left: 23.2%; top: 5.9%; width: 34%; height: 10.2%; display: grid; place-items: center; color: #071a4c; font-family: var(--font-display); font-size: clamp(1.8rem, 4.1vw, 4.8rem); line-height: 1.15; white-space: nowrap; }
.gallery-salon-drawing-frame { left: 21.55%; top: 22.75%; width: 29.45%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.gallery-salon-drawing-frame canvas { width: 100%; height: 100%; display: block; border-radius: 0; background: transparent; }
.gallery-salon-prompt { left: 69.9%; top: 22.55%; width: 23.7%; height: 8%; min-width: 0; display: grid; place-items: center; padding: 0 2.5%; overflow: visible; box-sizing: border-box; color: #fff3d9; font-family: var(--font-display); font-size: clamp(1.05rem, 2.05vw, 2.4rem); line-height: 1.12; white-space: normal; text-shadow: 0 .055em 0 rgba(7, 26, 76, .35); }
.gallery-salon-prompt.is-long { font-size: clamp(.95rem, 1.55vw, 1.8rem); }
.gallery-salon-avatar { left: 76.55%; top: 37.25%; width: 8.95%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: #071a4c; }
.gallery-salon-artist, .gallery-salon-round, .gallery-salon-counter { height: 4.6%; display: grid; place-items: center; color: #fff3d9; font-family: var(--font-display); line-height: 1.15; white-space: nowrap; text-shadow: 0 .05em 0 rgba(7, 26, 76, .34); }
.gallery-salon-artist { left: 72.75%; top: 32.25%; width: 16.5%; overflow: visible; font-size: clamp(.875rem, 1.25vw, 1.5rem); }
.gallery-salon-artist.is-long { font-size: clamp(.875rem, 1.1vw, 1.3rem); }
.gallery-salon-round { left: 73.5%; top: 52.65%; width: 14.8%; font-size: clamp(.875rem, 1.4vw, 1.65rem); }
.gallery-salon-counter { left: 73.45%; top: 59.15%; width: 14.9%; font-family: var(--font-body); font-size: clamp(.95rem, 1.65vw, 1.95rem); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.gallery-salon-counter-value { direction: ltr; unicode-bidi: isolate; }
.gallery-salon-best-lie { left: 69.75%; top: 68.3%; width: 24.4%; height: 15.1%; color: #071a4c; }
.gallery-salon-best-lie-label { position: absolute; left: 19%; top: 0; width: 62%; height: 25%; display: grid; place-items: center; color: #071a4c; font-family: var(--font-display); font-size: clamp(.82rem, 1.55vw, 1.8rem); line-height: 1.15; white-space: nowrap; }
.gallery-salon-best-lie-text { position: absolute; inset: 35% 5.8% 3%; display: -webkit-box; overflow: hidden; color: #071a4c; font-family: var(--font-body); font-size: clamp(.875rem, 1.15vw, 1.35rem); line-height: 1.48; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gallery-salon-best-lie.is-long .gallery-salon-best-lie-text { font-size: clamp(.875rem, 1.08vw, 1.25rem); }
.gallery-salon-best-lie.is-empty .gallery-salon-best-lie-label, .gallery-salon-best-lie.is-empty .gallery-salon-best-lie-text { opacity: 0; }
.gallery-salon-empty { left: 22%; top: 47%; width: 29%; color: #071a4c; font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 3.5rem); line-height: 1.25; }
@media (max-aspect-ratio: 1/1) {
  .gallery-salon-title { font-size: clamp(1.35rem, 4.1vw, 2.6rem); }
  .gallery-salon-prompt { font-size: clamp(.9rem, 2.25vw, 1.45rem); }
  .gallery-salon-artist, .gallery-salon-round { font-size: clamp(.78rem, 1.75vw, 1.12rem); }
  .gallery-salon-counter { font-size: clamp(.9rem, 1.85vw, 1.2rem); }
  .gallery-salon-best-lie-label { font-size: clamp(.72rem, 1.55vw, 1rem); }
  .gallery-salon-best-lie-text, .gallery-salon-best-lie.is-long .gallery-salon-best-lie-text { font-size: clamp(.875rem, 1.22vw, 1rem); line-height: 1.35; }
}

/* 2026-07-28 release-candidate stress polish. */

.choice-arena-text {
  top: 4%;
  height: 92%;
  display: grid;
  align-items: center;
  padding: 0 2.5%;
  overflow: hidden;
  box-sizing: border-box;
  transform: none;
  white-space: normal;
}

.choice-arena-text-label {
  width: 100%;
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  direction: rtl;
  color: #161117;
  font-size: clamp(0.68rem, 1.08vw, 1.22rem);
  font-weight: 900;
  line-height: 1.18;
  text-align: right;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.choice-arena-drawing-frame {
  isolation: isolate;
}

.choice-arena-drawing-frame canvas {
  position: relative;
  z-index: 1;
}

.choice-arena-drawing-snapshot {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.quiet-reveal-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.quiet-reveal-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.quiet-reveal-title.long {
  max-height: 4.64em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.quiet-reveal-meta {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, auto));
  align-content: end;
}

.quiet-reveal-author,
.quiet-reveal-voters,
.quiet-reveal-stats {
  min-height: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.quiet-reveal-stats {
  -webkit-line-clamp: 1;
}

.scoreboard-ranking-row {
  grid-template-columns: 10% 12.5% minmax(0, 1fr) 17.5% 13%;
  gap: 1.2%;
}

@media (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .lobby-player-card .player-state {
    width: 9px;
    height: 9px;
    display: block;
    justify-self: center;
    padding: 0;
    border-radius: 50%;
    background: #40d79b;
    font-size: 0;
    line-height: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  }

  .lobby-player-card.disconnected .player-state {
    background: #d25b62;
  }

  .final-runner-place,
  .final-runner-score {
    font-size: 14px;
  }

  .final-runner-name {
    font-size: 20px;
  }

  .final-award-title,
  .final-award-player,
  .final-host-note {
    font-size: 18px;
  }

  .final-host-note {
    bottom: 1.8%;
  }

  .quiet-reveal-title.long {
    font-size: 18px;
    line-height: 1.12;
    max-height: 4.48em;
  }

  .gallery-salon-best-lie-text,
  .gallery-salon-best-lie.is-long .gallery-salon-best-lie-text {
    inset: 34% 3% 1%;
    font-size: 15px;
    line-height: 1.15;
    -webkit-line-clamp: 3;
  }
}

/* Vote focus pass: open answer lanes, larger art, quieter supporting UI. */
.choice-timer-value {
  font-size: clamp(2.7rem, 4.6vw, 5.2rem);
}

.choice-arena-option {
  width: 22.6%;
  height: 8.4%;
  color: #f5e6be;
}

.choice-arena-option:nth-child(1) { left: 3.4%; top: 31.1%; }
.choice-arena-option:nth-child(2) { left: 3.4%; top: 41.3%; }
.choice-arena-option:nth-child(3) { left: 3.4%; top: 51.5%; }
.choice-arena-option:nth-child(4) { left: 3.4%; top: 61.7%; }
.choice-arena-option:nth-child(5) { left: 3.4%; top: 71.9%; }
.choice-arena-option:nth-child(6) { left: 74%; top: 31.1%; }
.choice-arena-option:nth-child(7) { left: 74%; top: 41.3%; }
.choice-arena-option:nth-child(8) { left: 74%; top: 51.5%; }
.choice-arena-option:nth-child(9) { left: 74%; top: 61.7%; }
.choice-arena-option:nth-child(10) { left: 74%; top: 71.9%; }

.choice-arena-text {
  inset: 0;
  width: auto;
  height: auto;
  padding: 0 4%;
  color: #f5e6be;
  font-size: clamp(.82rem, 1.42vw, 1.55rem);
  line-height: 1.22;
  text-align: right;
  text-shadow: 0 .08em .12em rgba(0, 0, 0, .82);
}

.choice-arena-text-label {
  color: #f5e6be;
  font-size: clamp(.82rem, 1.42vw, 1.55rem);
  line-height: 1.22;
}

.choice-arena-drawing-frame {
  left: 35.5%;
  top: 32.5%;
  width: 29%;
}

.choice-progress-value {
  left: 34%;
  top: 87.05%;
  width: 32%;
  height: 5.2%;
  font-size: clamp(.9rem, 1.7vw, 1.9rem);
}

.choice-arena-roster {
  left: 31%;
  top: 92.4%;
  width: 38%;
  height: 7%;
  gap: .8%;
}

/* Balanced vote layout: alternating RTL lanes, colored answer cards, centered timer. */
.choice-timer-value {
  left: 85.9%;
  top: 22.9%;
  width: 7.15%;
  height: 13%;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  direction: ltr;
  color: #201426;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.25vw, 3.65rem);
  line-height: 1;
  letter-spacing: -.03em;
  unicode-bidi: isolate;
}

.choice-arena-options .choice-arena-option {
  top: var(--choice-top);
  width: 25.4%;
  height: 8.7%;
  display: flex;
  align-items: center;
  gap: 3.4%;
  padding: .7% 1.15%;
  overflow: hidden;
  box-sizing: border-box;
  direction: rtl;
  color: #14223a;
  border: clamp(2px, .18vw, 3px) solid rgba(20, 34, 58, .82);
  border-radius: clamp(7px, .65vw, 12px);
  background: var(--choice-card, #f4c84d);
  box-shadow: 0 clamp(4px, .42vw, 8px) 0 rgba(8, 5, 18, .52), 0 .7vw 1.4vw rgba(8, 5, 18, .24);
}

.choice-arena-options .choice-arena-option.side-left {
  left: 2.8%;
}

.choice-arena-options .choice-arena-option.side-right {
  left: 71.8%;
}

.choice-arena-option:nth-child(5n + 1) { --choice-card: #f4c84d; --choice-badge: #9d5e12; }
.choice-arena-option:nth-child(5n + 2) { --choice-card: #68cfc5; --choice-badge: #126b70; }
.choice-arena-option:nth-child(5n + 3) { --choice-card: #ef8375; --choice-badge: #973947; }
.choice-arena-option:nth-child(5n + 4) { --choice-card: #acd77e; --choice-badge: #47782f; }
.choice-arena-option:nth-child(5n + 5) { --choice-card: #c4a0e2; --choice-badge: #65438d; }

.choice-arena-number {
  position: static;
  flex: 0 0 clamp(25px, 2.6vw, 43px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff7df;
  background: var(--choice-badge, #9d5e12);
  font-family: var(--font-display);
  font-size: clamp(.78rem, 1.28vw, 1.45rem);
  line-height: 1;
  box-shadow: inset 0 -.14em 0 rgba(0, 0, 0, .18);
}

.choice-arena-options .choice-arena-text {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 0;
  color: #14223a;
  text-align: center;
  text-shadow: none;
}

.choice-arena-options .choice-arena-text-label {
  color: #14223a;
  font-size: clamp(.9rem, 1.42vw, 1.58rem);
  line-height: 1.14;
  text-align: center;
}

/* Mobile visitors can still use the display page after this compact orientation notice. */
html.mobile-display-notice-active,
body.mobile-display-notice-active {
  min-width: 0;
}

.mobile-display-notice[hidden] {
  display: none !important;
}

.mobile-display-notice {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 12px;
  box-sizing: border-box;
  direction: rtl;
  pointer-events: none;
}

.mobile-display-notice__card {
  width: 100%;
  max-width: 520px;
  padding: 18px;
  box-sizing: border-box;
  border: 2px solid rgba(255, 211, 74, .88);
  border-radius: 24px;
  color: #fff8e8;
  background:
    radial-gradient(circle at 12% 0, rgba(35, 183, 190, .22), transparent 38%),
    linear-gradient(155deg, rgba(18, 38, 59, .98), rgba(11, 20, 40, .98));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .12);
  pointer-events: auto;
  animation: mobile-display-notice-rise 240ms ease-out both;
}

.mobile-display-notice__main {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.mobile-display-notice__visual {
  position: relative;
  width: 104px;
  height: 82px;
}

.mobile-display-notice__monitor,
.mobile-display-notice__phone {
  position: absolute;
  display: block;
  border: 3px solid #fff8e8;
  background: #153b55;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .18);
}

.mobile-display-notice__monitor {
  top: 3px;
  right: 0;
  width: 82px;
  height: 51px;
  padding: 5px;
  border-radius: 10px;
}

.mobile-display-notice__monitor::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: -13px;
  width: 28px;
  height: 10px;
  border-bottom: 3px solid #fff8e8;
  border-radius: 0 0 8px 8px;
}

.mobile-display-notice__monitor span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--fafaa-yellow), #f4815a 58%, #cd5d8c);
}

.mobile-display-notice__phone {
  left: 0;
  bottom: 0;
  width: 29px;
  height: 53px;
  padding: 5px 3px;
  border-radius: 9px;
  background: #132037;
}

.mobile-display-notice__phone span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, #24b9bd, #127484);
}

.mobile-display-notice__badge {
  position: absolute;
  right: 71px;
  bottom: 1px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 3px solid #102039;
  border-radius: 50%;
  color: #111a28;
  background: var(--fafaa-yellow);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.mobile-display-notice__copy { min-width: 0; }

.mobile-display-notice__eyebrow {
  margin: 0 0 4px;
  color: var(--fafaa-yellow);
  font-size: 12px;
  font-weight: 900;
}

.mobile-display-notice__copy h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 6vw, 1.7rem);
  line-height: 1.3;
}

.mobile-display-notice__copy > p:last-child {
  margin: 6px 0 0;
  color: rgba(255, 248, 232, .82);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
}

.mobile-display-notice__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 15px;
}

.mobile-display-notice__join,
.mobile-display-notice__continue {
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 9px 12px;
  border: 2px solid transparent;
  border-radius: 13px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.mobile-display-notice__join {
  color: #111a28;
  background: var(--fafaa-yellow);
  box-shadow: 0 4px 0 #b96f21;
}

.mobile-display-notice__continue {
  color: #fff8e8;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
}

.mobile-display-notice__join:focus-visible,
.mobile-display-notice__continue:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@keyframes mobile-display-notice-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 390px) {
  .mobile-display-notice__card { padding: 15px; }
  .mobile-display-notice__main { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
  .mobile-display-notice__visual { width: 88px; transform: scale(.84); transform-origin: right center; }
  .mobile-display-notice__copy > p:last-child { font-size: 13px; }
  .mobile-display-notice__join,
  .mobile-display-notice__continue { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-display-notice__card { animation: none; }
}