.role-panel {
  display: grid;
  gap: 1rem;
  align-items: start;
  min-inline-size: 0;
  color: var(--ink, #17263a);
  --role-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
}
.role-panel h3,
.role-panel h4,
.role-panel p {
  margin: 0;
}
.role-panel h3 {
  font-size: clamp(1.15rem, 2.8vw, 1.65rem);
  letter-spacing: -0.035em;
}
.role-panel .role-copy {
  max-inline-size: 72ch;
  color: var(--muted, #53636e);
  line-height: 1.45;
}
.role-panel [data-testid='voice-participation'] {
  justify-self: start;
  font-size: 0.84rem;
}
.role-panel button:focus-visible,
.role-panel summary:focus-visible,
.role-panel input:focus-visible {
  outline: none;
}
.role-panel button:focus-visible,
.role-panel summary:focus-visible {
  filter: brightness(1.25);
}
.role-panel .role-foot,
.role-rules {
  font-size: 0.83rem;
  color: var(--muted, #53636e);
}
.role-rules {
  padding-block: 0.6rem 0;
  border-block-start: 1px solid var(--line, #d5d8cd);
}
.role-rules summary {
  inline-size: fit-content;
  cursor: pointer;
  font-weight: 650;
}
.role-rules p {
  margin-block-start: 0.5rem;
  max-inline-size: 75ch;
  line-height: 1.55;
}
.role-fault {
  color: #9b2522;
  font-weight: 600;
}
.role-actions,
.role-form {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.role-field {
  display: grid;
  min-inline-size: 0;
  gap: 0.3rem;
}
.role-field input {
  min-inline-size: 0;
}
.role-panel > button {
  justify-self: start;
}
.role-panel .role-field span {
  font-size: 0.84rem;
  font-weight: 650;
}
.role-panel [data-testid='welle-lock'],
.role-panel [data-testid='welle-clue'],
.role-panel [data-testid='imposter-spoke'],
.role-panel [data-testid='wort-clue'] {
  background: #253c3a;
  color: #fff8e9;
  border-color: #253c3a;
}
.role-panel [data-testid='welle-lock']:hover,
.role-panel [data-testid='welle-clue']:hover,
.role-panel [data-testid='imposter-spoke']:hover,
.role-panel [data-testid='wort-clue']:hover {
  background: #354f50;
}

/* Enamel radio instrument, with a screened face that only exists in a guide's view. */
.wave-cabinet {
  position: relative;
  display: grid;
  justify-items: center;
  isolation: isolate;
  background-color: #132d3c;
  background-image:
    radial-gradient(circle at 12% 23%, #afc8bb 0 0.85px, transparent 1.6px),
    radial-gradient(circle at 44% 61%, #a0bbc0 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 84% 38%, #859ea9 0 0.85px, transparent 1.45px),
    linear-gradient(145deg, #132239, #173943 75%, #233d44);
  background-size:
    83px 76px,
    128px 111px,
    149px 97px,
    100% 100%;
  padding: clamp(0.55rem, 1.8vw, 1rem) clamp(0.5rem, 2vw, 1.25rem) clamp(0.85rem, 2vw, 1.25rem);
  border: 2px solid #223c43;
  border-radius: 1.65rem 1.65rem 0.95rem 0.95rem;
  box-shadow:
    inset 0 0 0 2px #799e941f,
    inset 0 -6px 0 #11282f;
}
.wave-dial {
  display: block;
  inline-size: min(100%, 760px);
  block-size: auto;
}
.wave-poles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 3vw, 2rem);
  width: min(95%, 39rem);
}
.wave-poles strong {
  display: grid;
  place-items: center;
  padding: 0.55rem 0.7rem;
  text-align: center;
  min-width: 0;
  border: 1px solid #93b5a466;
  border-radius: 0.35rem;
  background: #1e3d45;
  font-size: clamp(0.78rem, 1.7vw, 1.05rem);
  color: #fff2d3;
  font-weight: 650;
}
.wave-poles strong:first-child {
  border-inline-start: 4px solid #7ac0b4;
}
.wave-poles strong:last-child {
  border-inline-end: 4px solid #e6a16d;
}
.wave-readout,
.wave-controls output {
  font: 700 0.9rem var(--role-mono);
  letter-spacing: -0.03em;
}
.wave-readout {
  width: fit-content;
  padding: 0.4rem 0.75rem;
  background: #e0efdf;
  border: 1px solid #9bbdaa;
  border-radius: 0.3rem;
  color: #1d473f;
}
.wave-controls {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) auto auto;
  align-items: center;
  gap: clamp(0.65rem, 2vw, 1.2rem);
  color: #244f49;
  background: #e7ecde;
  border: 1px solid #bfcab7;
  padding: 0.85rem 1rem;
  border-radius: 0.7rem;
}
.wave-controls input[type='range'] {
  width: 100%;
  margin: 0;
  min-height: 1.55rem;
  accent-color: #aa4737;
  cursor: pointer;
}

/* Printed dossiers on a gridded briefing mat. Every classification includes a word. */
.word-private {
  font: 650 0.84rem var(--role-mono);
  color: #413a33;
}
.role-roster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.word-team {
  --agency: #8c3d32;
  --folder: #f7e4d3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.5rem;
  align-items: center;
  padding: 0.6rem 0.85rem;
  border-radius: 0.45rem 0.45rem 0.36rem 0.36rem;
  border: 1px solid color-mix(in srgb, var(--agency) 46%, #efdfba);
  border-block-start: 4px solid var(--agency);
  background: var(--folder);
  color: var(--agency);
}
.word-team[data-kind='petrol'] {
  --agency: #255a5a;
  --folder: #dce8de;
}
.word-team strong {
  text-transform: uppercase;
  font: 800 0.84rem var(--role-mono);
  letter-spacing: 0.085em;
}
.word-team span {
  font-size: 0.8rem;
  grid-column: 1;
  line-height: 1.4;
  color: #343f3c;
}
.word-count {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font: 800 1.85rem/0.95 var(--role-mono);
}
.word-stage .role-form {
  padding: 0.7rem 0.85rem;
  border-radius: 0.55rem;
  border: 1px solid #cec7b5;
  background: #ece8dc;
}
.word-stage .role-form label:first-child {
  flex: 1 1 10rem;
}
.word-stage .role-form input {
  border: 1px solid #aaa995;
  border-radius: 0.35rem;
  background: #fffdf4;
  padding: 0.38rem 0.55rem;
}
.word-stage .role-form input[type='number'] {
  max-width: 5rem;
}
.role-board {
  --mat-ink: #394b46;
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.35rem, 1vw, 0.75rem);
  padding: clamp(0.55rem, 1.8vw, 1.15rem);
  background-color: var(--mat-ink);
  background-image:
    linear-gradient(90deg, #b3aa891d 1px, transparent 1px), linear-gradient(#b3aa891d 1px, transparent 1px),
    linear-gradient(135deg, #515a4b, #263b39);
  background-size:
    13px 13px,
    13px 13px,
    100% 100%;
  border: 2px solid #34493c;
  border-radius: 0.7rem;
  box-shadow: inset 0 0 0 3px #cdc29529;
}
.word-stage .role-tile {
  --face: #d7c6a1;
  --strip: #f7edcf;
  --ink: #35342e;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid #a99f88;
  border-radius: 0.38rem;
  overflow: hidden;
  text-align: start;
  color: var(--ink);
  background: var(--face);
  box-shadow: 0 2px 1px #1328238a;
}
.word-stage button.role-tile:hover:enabled {
  box-shadow:
    0 0 0 2px #f7cf82,
    0 3px 2px #10221d;
  transform: translateY(-1px);
}
.word-stage .role-tile[data-kind='petrol'] {
  --face: #598887;
  --strip: #dcf0da;
  --ink: #183a39;
}
.word-stage .role-tile[data-kind='koralle'] {
  --face: #c87c62;
  --strip: #ffe4bc;
  --ink: #572923;
}
.word-stage .role-tile[data-kind='frei'] {
  --face: #a19b83;
  --strip: #e8e3cd;
}
.word-stage .role-tile[data-kind='sperre'] {
  --face: #4c4955;
  --strip: #3e3948;
  --ink: #fff0d2;
}
.word-face {
  display: flex;
  justify-content: end;
  flex: none;
  height: clamp(2.5rem, 6vw, 4.25rem);
  overflow: hidden;
  background:
    repeating-linear-gradient(-32deg, transparent 0 7px, #ffffff23 7px 8px),
    linear-gradient(90deg, #ffffff2e, transparent);
}
.word-face::before {
  content: '';
  position: absolute;
  left: 0.55rem;
  top: 0.55rem;
  width: 20%;
  height: 8px;
  border-top: 2px solid #fffae977;
  border-bottom: 1px solid #fffae955;
}
.word-face .word-print {
  display: block;
  align-self: end;
  flex: none;
  height: 100%;
  width: auto;
}
.word-tab {
  position: relative;
  display: grid;
  gap: 0.1rem;
  flex: 1;
  min-height: 2.15rem;
  align-content: center;
  padding: 0.35rem clamp(0.25rem, 1vw, 0.65rem);
  background: var(--strip);
  border-top: 1px solid #40372647;
}
.word-tab strong {
  font:
    750 clamp(0.75rem, 2vw, 1.13rem)/1.12 Georgia,
    serif;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.word-tab small {
  font: 650 clamp(0.58rem, 1vw, 0.71rem)/1.25 var(--role-mono);
}
.word-stage .role-tile[data-revealed] .word-face::after {
  content: '✓';
  position: absolute;
  top: 0.2rem;
  left: 0.5rem;
  padding: 0.03rem 0.2rem;
  border: 1px solid currentColor;
  color: #242f29;
  background: #f5edce;
  font-size: 0.7rem;
  font-weight: 800;
  transform: rotate(-8deg);
}

/* The sleeve is identical for every role. Only opening your personal card reveals its contents. */
.im-stage {
  --violet: #503e68;
  border: 1px solid #d2c7dd;
  border-radius: 0.9rem;
  background: linear-gradient(130deg, #f6eff9, #e9e2f1 80%, #f1eaf3);
  padding: clamp(0.75rem, 2.1vw, 1.45rem);
  color: #342c40;
}
.im-stage .role-copy {
  color: #51465e;
}
.im-table {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 1rem;
  align-items: start;
}
.im-id {
  background: #f5e9cb;
  border: 1px solid #7a637c;
  border-radius: 0.65rem;
  overflow: hidden;
  box-shadow: 0 3px 0 #503d6229;
  color: #332c39;
  min-width: 0;
}
.im-id summary {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  cursor: pointer;
  align-items: stretch;
  list-style: none;
}
.im-id summary::-webkit-details-marker {
  display: none;
}
.im-id summary:focus-visible {
  outline-offset: -3px;
}
.im-idphoto {
  position: relative;
  background: #665181;
  overflow: hidden;
  border-inline-end: 1px solid #796a7c;
}
.im-idphoto canvas {
  width: 100%;
  height: 100%;
  min-height: 6.65rem;
  display: block;
  object-fit: cover;
}
.im-idphoto .im-seal {
  position: absolute;
  inset: 0;
}
.im-id[open] .im-seal {
  display: none;
}
.im-passname {
  padding: clamp(0.65rem, 2vw, 1rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 0.3rem;
}
.im-passname strong {
  font:
    bold clamp(1.15rem, 2.4vw, 1.65rem)/1.05 Georgia,
    serif;
  overflow-wrap: anywhere;
}
.im-passname small,
.im-passname > span:first-of-type {
  font-size: 0.73rem;
  line-height: 1.3;
  color: #5d4c5a;
}
.im-passname small {
  font: 650 0.65rem var(--role-mono);
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
.im-flip {
  border-block-end: 1px solid #8b7598;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5c3b76;
  margin-top: 0.2rem;
}
.im-flip span:last-child,
.im-id[open] .im-flip span:first-child {
  display: none;
}
.im-id[open] .im-flip span:last-child {
  display: inline;
}
.im-idinside {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
  background: #fff6dc;
  border-block-start: 1px dashed #9e8a85;
  font-size: 0.94rem;
}
.im-group {
  min-width: 0;
}
.im-group h4 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.im-queue,
.im-ballots {
  display: grid;
  gap: 0.36rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.im-queue li,
.im-ballots button {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.3rem 0.6rem 0.3rem 0.35rem;
  background: #faf5f7;
  border: 1px solid #c9bdd1;
  border-radius: 0.35rem;
  font-weight: 650;
  font-size: 0.88rem;
  line-height: 1.2;
  color: #3c3249;
}
.im-queue li[aria-current] {
  border-color: #725783;
  background: #fff7e3;
  box-shadow: inset 3px 0 #725783;
}
.im-queue li small {
  margin-left: auto;
  color: #584a62;
  font-size: 0.71rem;
}
.im-queue .im-portrait,
.im-ballots .im-portrait {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  object-position: center;
  border-radius: 0.25rem;
}
.im-group > button,
.im-group .practice-text {
  margin-top: 0.75rem;
}
.im-votecount {
  margin-block-end: 0.5rem !important;
  font-size: 0.86rem;
}
.im-saved {
  display: block;
  padding: 0.65rem;
  background: #f7f1de;
  border: 1px dashed #947a91;
  border-radius: 0.35rem;
}
.im-ballots button::after {
  content: '';
  margin-left: auto;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid #9988a5;
  border-radius: 0.2rem;
}
.im-ballots button:hover:enabled {
  background: #f7e5c8;
  border-color: #725783;
}
.im-categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
.im-stage .im-ticket {
  padding: 0;
  display: grid;
  overflow: hidden;
  text-align: start;
  border: 1px solid #978799;
  border-radius: 0.4rem;
  color: #382f3c;
  background: #fff5db;
  box-shadow: 0 2px #8d7d8a38;
}
.im-ticket strong {
  padding: 0.45rem 0.65rem;
  font-family: Georgia, serif;
}
.im-place {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 680px) {
  .im-table {
    grid-template-columns: 1fr;
  }
  .im-id {
    width: min(100%, 24rem);
  }
  .im-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wave-controls {
    grid-template-columns: 1fr auto;
  }
  .wave-controls .role-field {
    grid-column: 1/-1;
  }
}
@media (max-width: 540px) {
  .role-roster {
    gap: 0.4rem;
  }
  .word-team {
    padding: 0.4rem 0.5rem;
  }
  .word-team span {
    grid-column: 1/-1;
  }
  .word-count {
    grid-row: 1;
    font-size: 1.3rem;
  }
  .role-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .word-stage button.role-tile:hover:enabled {
    transform: none;
  }
}
@media (forced-colors: active) {
  .role-panel canvas {
    forced-color-adjust: none;
  }
  .role-panel .word-tab,
  .role-panel button,
  .im-id summary,
  .wave-poles strong {
    border: 1px solid ButtonText;
  }
  .im-queue li[aria-current='step'] {
    border: 2px solid Highlight;
  }
}

.word-stage button.role-tile,
.im-stage button.im-ticket,
.im-stage .im-ballots button {
  margin: 0;
}
@media (max-width: 540px) {
  .wave-cabinet {
    min-width: 0;
    overflow: hidden;
  }
  .wave-cabinet .wave-dial {
    width: 135%;
    max-width: none;
    margin-inline: -17.5%;
  }
}

.word-layout {
  display: grid;
  gap: 0.8rem;
  align-items: start;
  min-width: 0;
}
.word-desk {
  display: grid;
  align-items: start;
  justify-items: start;
  gap: 0.8rem;
  padding: 0.8rem;
  border: 1px dashed #b9ad8e;
  border-radius: 0.45rem;
  background: #f7f2e4;
}
.word-desk .role-form {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
}
@media (min-width: 850px) {
  .word-layout {
    grid-template-columns: minmax(0, 1fr) clamp(10rem, 21%, 14rem);
  }
  .word-desk .role-form {
    display: grid;
    grid-template-columns: 1fr;
  }
  .word-desk .role-form button {
    justify-self: start;
  }
  .word-tab strong {
    font-size: clamp(0.8rem, 1.6vw, 1.04rem);
  }
}
@media (max-width: 849px) {
  .word-desk {
    grid-row: 1;
  }
  .word-desk .role-form {
    display: flex;
  }
}

.wave-dial[data-adjustable] {
  cursor: crosshair;
  touch-action: none;
}

.word-tab {
  container-type: inline-size;
}
.word-tab strong {
  font-size: min(1.02rem, calc(112cqw / var(--letters)));
  letter-spacing: 0.012em;
}

/* The room shell supplies the outer heading. Keep gameplay and its primary action together. */
#main[data-screen="room"] .role-panel {min-height:100%;width:100%;padding:clamp(.7rem,1.8dvh,1.5rem) clamp(.8rem,2.2vw,2.5rem);align-content:start;}
#main[data-screen="room"] .wave-stage {background:#f0f2e8;}
#main[data-screen="room"] .word-stage {background:#f3ecdd;}
#main[data-screen="room"] .im-stage {border-radius:0;border:0;align-content:center;}
#main[data-screen="room"] .wave-cabinet {padding-block:.4rem .65rem;}
#main[data-screen="room"] .wave-cabinet .wave-dial {max-height:39dvh;width:auto;max-width:100%;}
@media(min-width:741px) {
 #main[data-screen="room"] .word-stage {gap:.55rem;}
 #main[data-screen="room"] .word-layout {grid-template-columns:minmax(0,1fr) clamp(11rem,21%,21rem);}
 #main[data-screen="room"] .word-desk {grid-row:auto;}
 #main[data-screen="room"] .word-stage .role-board {gap:.45rem; padding:.55rem;}
 #main[data-screen="room"] .word-face {height:clamp(2.2rem,6.5dvh,5rem);}
 #main[data-screen="room"] .word-tab {min-height:1.8rem;padding-block:.25rem;}
}
@media(max-height:800px) and (min-width:741px) {
 #main[data-screen="room"] .role-panel {gap:.5rem;}
 #main[data-screen="room"] .wave-cabinet .wave-dial {max-height:33dvh;}
 #main[data-screen="room"] .im-stage .im-table {max-width:68rem;}
}
@media(max-width:740px) {
 #main[data-screen="room"] .role-panel {gap:.55rem;}
 #main[data-screen="room"] .wave-cabinet .wave-dial {width:130%;max-width:none;max-height:31dvh;}
 #main[data-screen="room"] .word-desk {grid-row:1;}
}

@media (min-width: 681px) and (max-width: 1000px) and (orientation: portrait) {
  #main[data-screen="room"] .im-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}