:root {
  color-scheme:dark;
  --bg:#070d12;
  --line:rgba(173,154,110,.23);
  --text:#eae8df;
  --muted:#939ea5;
  --gold:#c8aa70;
  --gold-light:#ead6ab;
  --cyan:#7ed3dc;
  --serif:"Cinzel",Georgia,serif;
  --sans:"Barlow",Arial,sans-serif;
  font:16px var(--sans);
  background:var(--bg);
  color:var(--text)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0;
  min-width:0;
  background:var(--bg);
  line-height:1.5
}

body:has(dialog[open]) {
  overflow:hidden
}

button,input,select {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer;
  color:inherit
}

button:disabled {
  cursor:not-allowed;
  opacity:.45
}

a {
  color:inherit
}

svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linejoin:round;
  stroke-linecap:round
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--gold-light);
  outline-offset:5px
}

h1:focus,h2:focus {
  outline:none
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:500
}

em {
  font-style:normal;
  color:var(--gold)
}

.hidden {
  display:none!important
}

.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.icon {
  width:22px;
  height:22px;
  flex:none
}

.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  padding:10px 18px;
  background:var(--gold);
  color:#080d10;
  z-index:100;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:translateY(0)
}

.particles {
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.7
}

.grain {
  position:fixed;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")
}

.topbar {
  height:92px;
  padding:0 5%;
  display:flex;
  align-items:center;
  gap:38px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:5;
  background:#070d12ed
}

.brand {
  display:flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
  color:var(--gold-light);
  font:600 22px var(--serif);
  letter-spacing:.075em;
  flex:none
}

.brand-mark {
  width:56px;
  height:56px;
  object-fit:contain;
  flex:none
}

.brand-wordmark {
  white-space:nowrap;
  line-height:1.2
}

.brand-wordmark>span {
  color:#acd9df
}

.brand small {
  font:500 8px/1.8 var(--sans);
  letter-spacing:.23em;
  display:block;
  color:#859097
}

.topnav {
  display:flex;
  align-items:center;
  gap:32px;
  margin-left:auto
}

.nav-link {
  background:none;
  border:0;
  font-size:13px;
  color:#c5c8c9;
  padding:12px 0;
  white-space:nowrap
}

.nav-link .nav-arrow {
  color:var(--gold);
  margin-left:12px
}

.nav-label-short {
  display:none
}

.nav-link:hover {
  color:var(--gold-light)
}

.nav-divider {
  width:1px;
  height:20px;
  background:var(--line)
}

.edition {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.15em
}

.edition i,.connection-label::before {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 9px #7ed3dc77
}

.motion-button {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  border:1px solid var(--line);
  background:transparent;
  padding:6px 10px;
  font-size:11px;
  color:var(--gold)
}

.motion-button .icon {
  width:15px;
  height:15px
}

.motion-button[aria-pressed=false] {
  color:#78828a
}

.screen {
  position:relative;
  isolation:isolate
}

.screen.entering {
  animation:screen-in .7s ease both
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.22em;
  line-height:1.7;
  color:var(--gold)
}

.diamond {
  width:6px;
  height:6px;
  border:1px solid var(--gold);
  transform:rotate(45deg);
  flex:none
}

.hero {
  position:relative;
  isolation:isolate;
  min-height:max(660px,calc(100svh - 200px));
  overflow:hidden;
  padding:0 7%
}

.hero-art {
  position:absolute;
  inset:-2%;
  background:url("/assets/art/shaco.jpg") 65% top/cover no-repeat;
  z-index:-4;
  animation:art-in 1.8s ease-out both;
  transform:translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0) scale(1.025);
  transition:transform 1.8s ease-out
}

.hero-vignette {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#070d12 0%,#070d12e8 17%,#070d1266 47%,transparent 74%),linear-gradient(0deg,#070d12, #070d1233 18%,transparent 60%,#070d1244);
  z-index:-2
}

.hero-content {
  padding:73px 0 110px;
  position:relative;
  z-index:1;
  width:64%;
  max-width:790px
}

.hero-content>.eyebrow {
  animation:rise-in .8s .1s both
}

.hero h1 {
  font-size:clamp(54px,6.15vw,96px);
  line-height:1.08;
  letter-spacing:-.045em;
  margin:23px 0 22px;
  animation:rise-in .9s .2s both;
  text-shadow:0 3px 40px #0006
}

.hero h1 em {
  color:var(--gold-light);
  background:linear-gradient(120deg,#f0dfb9,#b39158);
  background-clip:text;
  -webkit-text-fill-color:transparent
}

.hero-content>p {
  font-size:16px;
  line-height:1.8;
  color:#a4aeb2;
  animation:rise-in .9s .3s both
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
  animation:rise-in .9s .4s both
}

.button {
  min-height:52px;
  border:1px solid transparent;
  padding:14px 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:700;
  position:relative;
  text-decoration:none;
  transition:background .25s,border-color .25s,box-shadow .25s,transform .25s;
  overflow:hidden
}

.button::after {
  content:"";
  position:absolute;
  inset:-100% -50%;
  background:linear-gradient(110deg,transparent 40%,#ffffff30 50%,transparent 60%);
  transform:translateX(-65%);
  transition:transform .65s
}

.button:hover::after {
  transform:translateX(65%)
}

.button:not(:disabled):hover {
  transform:translateY(-2px)
}

.button .icon {
  width:18px;
  height:18px
}

.button-gold {
  color:#111615;
  background:linear-gradient(110deg,#cfb67e,#b99a60);
  border-color:#e5c990;
  box-shadow:inset 0 0 0 3px #15161320,0 6px 24px #ac89511a
}

.button-gold:not(:disabled):hover {
  background:#e3c992;
  box-shadow:0 0 28px #c8aa7033
}

.button-ghost {
  color:#d9d9d2;
  background:#0a11177a;
  border-color:#a08a575c
}

.button-ghost:hover {
  border-color:var(--gold);
  background:#b3955620
}

.button-cyan {
  color:#091820;
  background:linear-gradient(110deg,#a0dce3,#66b2bf);
  border-color:#abedf2
}

.hero-meta {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:31px;
  font-size:11px;
  color:#8e969a;
  animation:rise-in .9s .5s both
}

.hero-meta strong {
  font-weight:500;
  color:#c6cccb
}

.meta-dot {
  margin:0 9px;
  color:#8f794e
}

.mini-team {
  display:flex;
  padding-left:4px
}

.mini-team span {
  width:24px;
  height:28px;
  background:#101d25;
  border:1px solid #344047;
  display:grid;
  place-items:center;
  color:#657d86;
  font-size:10px;
  margin-left:-4px;
  transform:skewY(-5deg)
}

.mini-team .suspect {
  color:#d2b579;
  border-color:#9a814c;
  background:#26241e
}

.hero-orbit {
  position:absolute;
  right:7%;
  top:7%;
  width:430px;
  aspect-ratio:1;
  border:1px solid #dbc37b13;
  border-radius:50%;
  z-index:-1;
  animation:orbit 100s linear infinite
}

.hero-orbit::before,.hero-orbit::after {
  content:"";
  position:absolute;
  inset:-16px;
  border:1px dashed #d0bb8320;
  border-radius:50%
}

.hero-orbit::after {
  inset:38px;
  border-style:solid
}

.hero-orbit span {
  position:absolute;
  top:50%;
  left:-3px;
  width:6px;
  height:6px;
  background:#c9ae72;
  transform:rotate(45deg);
  box-shadow:0 0 25px #e1be73
}

.hero-art-caption {
  position:absolute;
  right:11%;
  bottom:116px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:9px;
  letter-spacing:.22em;
  color:#dbd1b6;
  text-shadow:0 1px 10px #000
}

.hero-art-caption i {
  height:1px;
  width:120px;
  background:linear-gradient(90deg,transparent,#c5ab71,transparent)
}

.hero-art-caption small {
  color:#b0aba1;
  font-size:7px;
  letter-spacing:.22em
}

.hero-bottom {
  position:absolute;
  bottom:23px;
  left:7%;
  right:7%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.2em;
  color:#64727b
}

.hero-bottom>span::before {
  content:"";
  display:inline-block;
  width:25px;
  height:1px;
  background:#88754e;
  vertical-align:middle;
  margin-right:12px
}

.scroll-hint {
  text-decoration:none;
  color:#a59b84;
  display:flex;
  align-items:center;
  gap:18px
}

.scroll-hint span {
  font-size:20px;
  animation:nudge 3s ease-in-out infinite
}

.how-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:0 7%;
  border-block:1px solid var(--line);
  background:#0b1217
}

.how-strip article {
  display:flex;
  align-items:center;
  gap:18px;
  padding:30px 28px 30px 0
}

.how-strip article+article {
  border-left:1px solid var(--line);
  padding-left:30px
}

.step-number {
  font:400 28px var(--serif);
  color:#8e794f
}

.how-strip h2 {
  font-size:12px;
  font-weight:600;
  letter-spacing:.025em;
  margin-bottom:6px
}

.how-strip p {
  font-size:11px;
  color:#8c969c
}

.how-strip .icon {
  margin-left:auto;
  color:#8e794f;
  width:25px;
  height:25px
}

.sides-section {
  padding:80px 7% 85px;
  max-width:1600px;
  margin:auto
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:32px
}

.section-heading h2 {
  font-size:28px;
  margin-top:14px;
  letter-spacing:-.025em
}

.section-heading>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.7
}

.sides-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}

.side-card {
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  padding:33px 36px;
  background:radial-gradient(ellipse at 100% 80%,#202228,#0a131b);
  transition:border-color .3s,transform .3s
}

.side-card:hover {
  border-color:#bfa46666;
  transform:translateY(-4px)
}

.side-card .eyebrow {
  font-size:8px
}

.side-card h3 {
  font-size:29px;
  margin:14px 0 12px
}

.side-card p {
  font-size:14px;
  color:#9da5ad;
  max-width:360px;
  position:relative;
  line-height:1.7
}

.side-note {
  display:block;
  font-size:8px;
  letter-spacing:.18em;
  margin-top:25px;
  color:#9c8356
}

.side-sigil {
  position:absolute;
  width:140px;
  height:140px;
  right:15px;
  bottom:15px;
  color:#ae885b;
  opacity:.12;
  transform:rotate(-12deg);
  stroke-width:.65
}

.side-light .side-sigil {
  color:#80cad5
}

.side-light {
  background:radial-gradient(ellipse at 100% 80%,#102e39,#0a131b)
}

.side-light .eyebrow,.side-light .side-note {
  color:#7bb9c4
}

.footer {
  position:relative;
  z-index:2;
  min-height:78px;
  border-top:1px solid var(--line);
  padding:20px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:8px;
  letter-spacing:.14em;
  color:#708089;
  background:#070d12
}

.footer-brand {
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--serif);
  color:#9c926f;
  font-size:11px;
  letter-spacing:.15em
}

.footer-brand img {
  width:32px;
  height:32px;
  object-fit:contain
}

/* Summoning lobby */
.lobby-view {
  min-height:calc(100svh - 170px);
  overflow:hidden
}

.lobby-backdrop {
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(#070d12c9,#070d12 86%),url("/assets/art/shaco.jpg") center 35%/cover;
  opacity:.65
}

.page-wrap {
  max-width:1420px;
  margin:auto;
  padding:34px 6% 45px
}

.room-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px
}

.text-button {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:4px 0;
  min-height:30px;
  border:0;
  background:transparent;
  font-size:12px;
  color:#aaaeb0;
  transition:color .2s
}

.text-button:hover {
  color:var(--gold-light)
}

.text-button .icon {
  width:16px;
  height:16px
}

.connection-label {
  display:flex;
  align-items:center;
  gap:8px;
  color:#86abb0;
  font-size:11px
}

.connection-label::before {
  content:"";
  display:block
}

.connection-label.offline {
  color:#d5a078
}

.connection-label.offline::before {
  background:#d5a078
}

.room-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-bottom:42px
}

.room-head h1 {
  font-size:clamp(30px,3.5vw,52px);
  letter-spacing:-.045em;
  line-height:1.2;
  margin:14px 0 12px
}

.room-head p {
  font-size:14px;
  color:var(--muted)
}

.code-panel {
  border-left:1px solid var(--line);
  padding-left:33px;
  flex:none
}

.micro-label {
  font-size:9px;
  font-weight:600;
  letter-spacing:.17em;
  color:var(--gold);
  display:block
}

.code-panel>div {
  display:flex;
  align-items:center;
  gap:20px;
  margin:6px 0
}

.code-panel strong {
  font-family:var(--serif);
  font-size:27px;
  letter-spacing:.21em;
  color:var(--gold-light)
}

.code-help {
  font-size:10px;
  color:#7e8b92
}

.icon-button {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  color:var(--gold);
  background:#b6a17108;
  border:1px solid var(--line);
  transition:background .2s
}

.icon-button:hover {
  background:#c8aa701a
}

.roster-heading {
  display:flex;
  justify-content:space-between;
  margin-bottom:14px;
  font-size:9px;
  font-weight:600;
  letter-spacing:.18em;
  color:#9c9c90
}

.roster-heading>span:last-child {
  color:#748a92
}

.players-list {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:13px;
  margin:0;
  padding:0
}

.player-card {
  position:relative;
  min-height:238px;
  padding:26px 14px 21px;
  display:flex;
  flex-direction:column;
  align-items:center;
  border:1px solid #34404a;
  background:linear-gradient(170deg,#213a4744,#0a141ded);
  animation:rise-in .55s backwards;
  animation-delay:calc(var(--slot)*.06s);
  overflow:hidden
}

.player-card::before {
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid #a69b7910;
  pointer-events:none
}

.player-card::after {
  content:"";
  position:absolute;
  top:-1px;
  left:30%;
  right:30%;
  height:2px;
  background:#80704f
}

.player-card.is-me {
  border-color:#588494;
  background:radial-gradient(ellipse at 50% 30%,#20556570,#0b1721 80%)
}

.player-card.is-me::after {
  background:#8dcad3;
  box-shadow:0 0 18px #7ed3dca0
}

.player-number {
  position:absolute;
  left:15px;
  top:12px;
  color:#667781;
  font-size:10px;
  font-family:var(--serif)
}

.player-crown {
  position:absolute;
  right:12px;
  top:12px;
  color:var(--gold);
  width:16px;
  height:16px
}

.player-avatar {
  width:67px;
  height:78px;
  display:grid;
  place-items:center;
  margin:16px 0 20px;
  color:#dcc391;
  font-family:var(--serif);
  font-size:25px;
  position:relative;
  flex:none;
  background:linear-gradient(145deg,#314454,#111c27);
  clip-path:polygon(50% 0,95% 22%,95% 72%,50% 100%,5% 72%,5% 22%)
}

.player-avatar::before {
  content:"";
  position:absolute;
  inset:3px;
  background:linear-gradient(155deg,#24333e,#0b1720);
  clip-path:inherit;
  z-index:-1
}

.player-card.is-me .player-avatar {
  color:#a5e2e5;
  background:linear-gradient(135deg,#568f9f,#1b4957)
}

.player-name {
  font-family:var(--serif);
  font-size:14px;
  text-align:center;
  overflow-wrap:anywhere;
  max-width:100%;
  line-height:1.4
}

.player-tags {
  display:flex;
  gap:7px;
  justify-content:center;
  flex-wrap:wrap;
  min-height:21px;
  margin:9px 0 8px
}

.player-tag {
  font-size:7px;
  letter-spacing:.1em;
  color:var(--gold);
  border:1px solid #907e503d;
  padding:2px 6px
}

.player-tag.you {
  color:#93c9d2;
  border-color:#427b8c66
}

.player-ready {
  display:flex;
  align-items:center;
  gap:5px;
  color:#789799;
  font-size:8px;
  letter-spacing:.1em;
  margin-top:auto
}

.player-ready .icon {
  width:11px;
  height:11px
}

.player-slot {
  border:1px dashed #32404a;
  background:#0b161c55;
  justify-content:center;
  min-height:238px
}

.player-slot::after {
  display:none
}

.empty-avatar {
  width:51px;
  height:62px;
  border:1px solid #53647433;
  display:grid;
  place-items:center;
  margin-bottom:19px;
  color:#4c6270;
  font-size:25px;
  flex:none
}

.player-slot .player-name {
  font-family:var(--sans);
  font-size:11px;
  color:#677882
}

.player-slot small {
  font-size:8px;
  margin-top:6px;
  color:#495c67
}

.lobby-console {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border:1px solid var(--line);
  background:#0e1a22a1;
  margin-top:25px;
  padding:25px 29px
}

.champion-setting {
  display:flex;
  gap:18px;
  align-items:center
}

.champion-setting>.icon {
  width:34px;
  height:34px;
  color:var(--gold);
  opacity:.6
}

.champion-setting label {
  display:block;
  font-size:8px;
  letter-spacing:.15em;
  color:#91a2aa;
  margin-bottom:6px
}

.champion-setting select {
  width:255px;
  margin:0;
  min-height:36px;
  font-size:13px;
  background:#0a121a;
  border-color:#334854
}

.champion-setting p {
  font-size:10px;
  color:#697d89;
  margin-top:7px
}

.start-zone {
  text-align:right
}

.start-zone p {
  font-size:12px;
  color:#98a5ac;
  margin-bottom:10px
}

.start-zone .button {
  min-width:290px;
  min-height:45px
}

.privacy-note {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:10px;
  color:#72838c;
  margin-top:23px
}

.privacy-note .icon {
  width:12px;
  height:12px
}

.waiting-dots {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  margin:15px 0;
  color:#9cb1b9
}

.waiting-dots i {
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--gold);
  animation:breathe 1.5s infinite
}

.waiting-dots i:nth-child(2) {
  animation-delay:.2s
}

.waiting-dots i:nth-child(3) {
  animation-delay:.4s
}

.waiting-dots span {
  font-size:9px;
  letter-spacing:.12em;
  margin-left:7px
}

/* The sealed view has the same appearance for every role. */
.reveal-view {
  min-height:calc(100svh - 170px);
  display:grid;
  place-items:center;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 35%,#14334280,transparent 55%)
}

.reveal-content {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  flex-direction:column;
  text-align:center;
  padding:45px 20px 55px;
  width:100%
}

.reveal-content>.eyebrow {
  font-size:9px
}

.sealed-card {
  width:162px;
  height:217px;
  margin:35px 0 29px;
  perspective:800px;
  animation:levitate 6s ease-in-out infinite
}

.seal-frame {
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:19px;
  background:linear-gradient(145deg,#192b36,#0a161f);
  border:1px solid #b19460;
  box-shadow:0 0 60px #83c2cd12,inset 0 0 30px #081118;
  transform:rotate(-4deg)
}

.seal-frame::before {
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid #b2955d4d
}

.seal-frame::after {
  content:"";
  position:absolute;
  inset:15px;
  border:1px solid #b2955d16
}

.seal-frame>.seal-logo {
  width:96px;
  height:96px;
  color:var(--gold-light);
  stroke-width:.8;
  filter:drop-shadow(0 0 12px #c6a76d66)
}

.seal-frame>span {
  font-size:6px;
  letter-spacing:.17em;
  color:#aa966e
}

.seal-frame>i {
  position:absolute;
  bottom:18px;
  font:normal 13px var(--serif);
  color:#927f57
}

.seal-orbit {
  position:absolute;
  width:95px;
  height:95px;
  border:1px solid #af956433;
  border-radius:50%;
  top:37px;
  animation:orbit 25s linear infinite
}

.seal-orbit::before {
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:3px;
  height:3px;
  background:#cbb679
}

.reveal-content h1 {
  font-size:clamp(30px,3.1vw,45px);
  letter-spacing:-.035em;
  margin-bottom:13px
}

.reveal-content>p {
  font-size:14px;
  color:var(--muted);
  line-height:1.8
}

.reveal-content>.button {
  margin-top:25px;
  min-width:290px
}

.secret-footnote {
  display:flex;
  align-items:center;
  gap:7px;
  color:#687c86;
  letter-spacing:.15em;
  font-size:7px;
  margin-top:22px
}

.secret-footnote .icon {
  width:11px;
  height:11px
}

.reveal-rings {
  position:absolute;
  width:min(85vw,710px);
  aspect-ratio:1;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none
}

.reveal-rings i {
  position:absolute;
  inset:0;
  border:1px solid #8f8a6812;
  border-radius:50%;
  animation:orbit 100s linear infinite
}

.reveal-rings i:nth-child(2) {
  inset:9%;
  border-style:dashed;
  animation-direction:reverse
}

.reveal-rings i:nth-child(3) {
  inset:22%
}

.reveal-status {
  font-size:11px;
  letter-spacing:.08em;
  color:var(--gold-light)
}

.reveal-status:not(:empty) {
  margin-top:15px
}

.reveal-view.is-revealing .sealed-card {
  animation:seal-break 1.25s ease-in both
}

.reveal-view.is-revealing .seal-frame {
  animation:seal-charge 1.25s ease-in both
}

.reveal-flash {
  position:fixed;
  inset:0;
  z-index:40;
  pointer-events:none;
  background:#dbc897;
  opacity:0
}

.reveal-flash.active {
  animation:flash .85s ease-out both
}

/* Separate impostor and teammate pages */
.role-screen {
  min-height:calc(100svh - 170px);
  overflow:hidden;
  --role-accent:#ee9c86;
  --role-line:#a05b4945
}

.role-art,.role-wash,.role-glow {
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none
}

.impostor-art {
  background:url("/assets/art/shaco.jpg") 70% top/cover no-repeat;
  filter:brightness(.85)
}

.impostor-view .role-wash {
  z-index:-2;
  background:linear-gradient(90deg,#100b10f5,#100b10bc 31%,#100b1020 75%),linear-gradient(0deg,#100b10 6%,#100b10a1 40%,#100b1022 78%)
}

.role-glow {
  z-index:-1;
  opacity:.4;
  animation:breathe 6s ease-in-out infinite;
  background:radial-gradient(ellipse at 78% 27%,#ae342827,transparent 45%)
}

.role-page-wrap {
  max-width:1500px;
  margin:auto;
  padding:27px 6% 29px;
  position:relative
}

.role-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:35px
}

.role-private {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:8px;
  letter-spacing:.16em;
  color:#9b8b83
}

.role-private .icon {
  width:12px;
  height:12px
}

.role-room-code {
  padding-left:10px;
  border-left:1px solid var(--role-line);
  color:#a59483
}

.role-topline .text-button {
  font-size:11px;
  position:relative;
  z-index:1
}

.role-kicker {
  font-size:9px;
  color:var(--role-accent);
  font-weight:600;
  letter-spacing:.21em;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:23px
}

.role-kicker>span {
  width:22px;
  height:1px;
  background:var(--role-accent)
}

.role-you {
  font-size:11px;
  letter-spacing:.32em;
  color:#b5a39a;
  display:block
}

.impostor-intro {
  padding-top:18px;
  position:relative
}

.impostor-intro h1 {
  font-size:clamp(56px,8.4vw,127px);
  letter-spacing:-.055em;
  color:#f0d3c0;
  line-height:1.2;
  text-shadow:0 0 50px #93291855;
  animation:title-reveal 1.2s cubic-bezier(.2,.7,.2,1) both
}

.impostor-intro>p {
  font-family:var(--serif);
  font-size:23px;
  line-height:1.55;
  margin-top:9px;
  color:#cebab0
}

.impostor-intro>p em {
  color:#e7a18b
}

.role-objective {
  display:flex;
  gap:14px;
  align-items:center;
  font-size:12px;
  line-height:1.7;
  color:#b5a19b;
  margin-top:24px
}

.role-objective .icon {
  width:31px;
  height:31px;
  color:#c9816a
}

.role-objective strong {
  font-weight:500;
  color:#d1b6a7
}

.mission-panel {
  margin-top:36px;
  padding:23px 25px 20px;
  border:1px solid var(--role-line);
  background:linear-gradient(115deg,#1d1416f0,#120f13dc);
  backdrop-filter:blur(12px);
  position:relative;
  animation:rise-in .8s .2s both
}

.mission-panel::before {
  content:"";
  position:absolute;
  top:-1px;
  left:25px;
  width:50px;
  height:2px;
  background:#c78465
}

.mission-heading {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:21px
}

.mission-heading .micro-label {
  font-size:8px;
  color:#c58e78
}

.mission-heading h2 {
  font-size:21px;
  letter-spacing:-.015em;
  margin-top:6px;
  color:#edd6c3
}

.mode-tag {
  font-size:8px;
  letter-spacing:.1em;
  color:#bc9f90;
  padding:6px 9px;
  border:1px solid var(--role-line)
}

.item-grid {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  padding:0;
  margin:0
}

.mission-item {
  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  border:1px solid #a86e5235;
  background:#090e1280;
  padding:17px 10px 14px;
  transition:border-color .25s,transform .25s,background .25s
}

.mission-item:hover {
  transform:translateY(-4px);
  border-color:#bc987080;
  background:#261a1c
}

.item-number {
  position:absolute;
  top:8px;
  left:9px;
  font-family:var(--serif);
  font-size:8px;
  color:#8d7263
}

.item-image-wrap {
  width:57px;
  height:57px;
  position:relative;
  box-shadow:0 4px 15px #0008;
  flex:none
}

.item-image-wrap::after {
  content:"";
  position:absolute;
  inset:-3px;
  border:1px solid #ab8a594d;
  pointer-events:none
}

.mission-item img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}

.mission-item strong {
  font-family:var(--serif);
  font-weight:500;
  display:block;
  font-size:11px;
  line-height:1.45;
  color:#e4d2b9;
  overflow-wrap:anywhere
}

.item-info {
  min-width:0
}

.mission-item .item-caption {
  display:block;
  font-size:8px;
  color:#927e73;
  margin-top:4px;
  letter-spacing:.04em
}

.mission-instruction {
  display:flex;
  gap:8px;
  font-size:12px;
  line-height:1.6;
  color:#c6b2a3;
  border-top:1px solid #af785c22;
  margin-top:17px;
  padding-top:15px
}

.mission-instruction::before {
  content:"◇";
  color:#d5a27b;
  font-size:14px;
  flex:none
}

.item-grid.single-item {
  grid-template-columns:1fr;
  max-width:480px
}

.single-item .mission-item {
  flex-direction:row;
  text-align:left;
  padding:14px 20px;
  gap:21px
}

.single-item .item-number {
  display:none
}

.single-item .mission-item strong {
  font-size:17px
}

.single-item .item-caption {
  font-size:10px;
  margin-top:6px
}

.role-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:23px
}

.role-bottom>span {
  font-size:8px;
  letter-spacing:.19em;
  color:#a77969;
  display:flex;
  align-items:center;
  gap:9px
}

.role-bottom>span i {
  display:block;
  width:4px;
  height:4px;
  transform:rotate(45deg);
  background:#bf856d
}

.role-bottom .text-button {
  font-size:11px;
  color:#d8b399
}

.teammate-view {
  --role-accent:#86d4df;
  --role-line:#5aadb63d
}

.teammate-art {
  background:url("/assets/art/braum.jpg") 70% 40%/cover no-repeat;
  transform:scaleX(-1);
  opacity:.82
}

.teammate-view .role-wash {
  z-index:-2;
  background:linear-gradient(90deg,#07121c22,#07121c33 29%,#07121cd9 50%,#07121cf5 90%),linear-gradient(0deg,#07121c,transparent 45%)
}

.teammate-view .role-glow {
  background:radial-gradient(ellipse at 25% 40%,#70d0d530,transparent 46%)
}

.teammate-view .role-private {
  color:#7fa1b0
}

.teammate-view .role-room-code {
  color:#95aeb7
}

.teammate-layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:65px;
  min-height:630px;
  align-items:center
}

.guardian-display {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:end;
  align-items:center;
  padding-bottom:30px
}

.guardian-crest {
  width:68px;
  height:78px;
  display:grid;
  place-items:center;
  color:#cfba88;
  filter:drop-shadow(0 0 22px #3fbbcf80);
  margin-bottom:16px
}

.guardian-crest svg {
  width:100%;
  height:100%;
  stroke-width:.8
}

.guardian-display>span {
  font-size:9px;
  text-align:center;
  line-height:2;
  letter-spacing:.16em;
  color:#c5c4b2;
  text-shadow:0 2px 10px #000
}

.teammate-brief {
  padding:13px 0 28px
}

.teammate-brief .role-kicker {
  margin-bottom:26px;
  font-size:8px
}

.teammate-brief .role-you {
  color:#8da9b7;
  font-size:10px
}

.teammate-brief h1 {
  font-size:clamp(43px,5.5vw,84px);
  line-height:1.25;
  letter-spacing:-.045em;
  color:#dbeced;
  text-shadow:0 0 45px #62c3dd33;
  animation:title-reveal 1.2s cubic-bezier(.2,.7,.2,1) both
}

.teammate-description {
  font-size:14px;
  line-height:1.8;
  color:#a5b8c3;
  margin-top:12px
}

.teammate-missions {
  margin-top:27px;
  display:grid;
  gap:14px
}

.cover-item-panel {
  padding:18px 20px;
  border:1px solid var(--role-line);
  background:#0e2631ba;
  position:relative
}

.cover-item-panel>.micro-label,.malus-panel>.micro-label {
  font-size:8px;
  color:#7cbac7;
  display:flex;
  gap:11px;
  align-items:center
}

.cover-item-panel>.micro-label>span:first-child,.malus-panel>.micro-label>span {
  font-family:var(--serif);
  color:#638d9b;
  border-right:1px solid #598d9955;
  padding-right:10px
}

.cover-item-panel .item-grid {
  display:block;
  margin-top:15px
}

.cover-item-panel .mission-item {
  flex-direction:row;
  border:0;
  background:none;
  gap:17px;
  padding:0;
  text-align:left
}

.cover-item-panel .mission-item:hover {
  transform:none
}

.cover-item-panel .mission-item strong {
  font-size:17px;
  color:#d2e8e9
}

.cover-item-panel .item-caption {
  font-size:10px;
  color:#9eabb3
}

.cover-item-panel .item-image-wrap {
  width:46px;
  height:46px
}

.cover-item-panel .item-number {
  display:none
}

.cover-item-panel>p {
  font-size:10px;
  color:#839daa;
  margin:7px 0 0 63px
}

.malus-panel {
  padding:21px 23px 25px;
  border:1px solid #bd9d5659;
  background:linear-gradient(115deg,#202724e8,#10232cd9);
  position:relative;
  overflow:hidden
}

.malus-panel::before {
  content:"";
  position:absolute;
  top:-1px;
  left:23px;
  width:38px;
  height:2px;
  background:var(--gold)
}

.impostor-malus {
  margin-top:18px;
  border-color:var(--role-line);
  background:linear-gradient(115deg,#2b1b20ed,#180f16ed)
}

.malus-panel>.micro-label {
  color:#c1ab7d
}

.malus-panel>.micro-label>span {
  color:#b19c77;
  border-color:#b19c773b
}

.malus-panel h2 {
  font-size:24px;
  color:#e1d3b4;
  margin:14px 0 9px;
  position:relative;
  z-index:1
}

.malus-panel p {
  font-size:14px;
  color:#c2cbc7;
  line-height:1.7;
  position:relative;
  z-index:1;
  max-width:95%
}

.malus-watermark {
  position:absolute;
  bottom:-38px;
  right:0;
  font:170px var(--serif);
  color:#b8a37809;
  pointer-events:none
}

.teammate-hint {
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:11px;
  color:#8fa6b2;
  line-height:1.65;
  margin:17px 0 23px
}

.teammate-hint .icon {
  width:18px;
  height:18px;
  color:#8bb5c0;
  margin-top:2px
}

.teammate-brief>.button {
  width:100%;
  min-height:48px;
  font-size:10px
}

/* Native dialogs contain keyboard focus and support Escape. */
dialog {
  color:var(--text);
  background:#0c151d;
  border:1px solid #ae945c70;
  padding:0;
  box-shadow:0 35px 150px #000d;
  max-height:calc(100svh - 40px)
}

dialog[open] {
  animation:dialog-in .3s ease-out both
}

dialog::backdrop {
  background:#03090dd6;
  backdrop-filter:blur(9px)
}

.entry-dialog {
  width:860px;
  max-width:calc(100vw - 36px);
  overflow:auto
}

.dialog-inner {
  display:grid;
  grid-template-columns:29% 71%
}

.dialog-aside {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:end;
  padding:30px 24px;
  isolation:isolate;
  min-height:100%;
  border-right:1px solid var(--line);
  overflow:hidden
}

.dialog-aside::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(0deg,#080e13,#081118aa 45%,#08111833),url("/assets/art/shaco.jpg") 73% center/auto 100%
}

.dialog-sigil {
  position:absolute;
  width:112px;
  height:112px;
  top:60px;
  left:calc(50% - 56px);
  color:#cdb880;
  stroke-width:.8;
  filter:drop-shadow(0 0 30px #58b0c666)
}

.dialog-aside>span {
  font-family:var(--serif);
  font-size:23px;
  line-height:1.55;
  letter-spacing:-.025em
}

.dialog-aside em {
  color:var(--gold-light)
}

.dialog-aside small {
  font-size:7px;
  letter-spacing:.16em;
  margin-top:20px;
  color:#ad9c78
}

.dialog-content {
  position:relative;
  padding:25px 37px 30px
}

.dialog-close {
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  width:29px;
  height:29px;
  border:0;
  background:none;
  color:#97a2a8
}

.dialog-close .icon {
  width:17px;
  height:17px
}

.entry-tabs {
  display:flex;
  gap:25px;
  border-bottom:1px solid var(--line);
  margin:0 36px 25px 0
}

.entry-tabs button {
  background:none;
  border:0;
  border-bottom:1px solid transparent;
  padding:10px 0 14px;
  color:#778a96;
  font-size:11px
}

.entry-tabs button[aria-selected=true] {
  color:var(--gold-light);
  border-color:var(--gold)
}

.dialog-eyebrow {
  font-size:7px
}

.dialog-content>h2 {
  font-size:26px;
  letter-spacing:-.03em;
  margin:8px 0
}

.dialog-content>p {
  color:#8e9fa9;
  font-size:12px;
  margin-bottom:24px
}

form label,form legend {
  display:block;
  color:#a4afb3;
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  margin-bottom:7px
}

input,select {
  width:100%;
  min-height:43px;
  padding:10px 12px;
  background:#080f16;
  border:1px solid #30434f;
  border-radius:0;
  color:#e2e5df;
  margin-bottom:17px;
  font-size:13px;
  transition:border-color .2s,box-shadow .2s
}

input::placeholder {
  color:#566d7b
}

input:focus,select:focus {
  border-color:#af9868;
  box-shadow:0 0 0 2px #b5a16c16
}

select {
  cursor:pointer
}

select option {
  color:#e4e5df;
  background:#0c1a25
}

.mode-picker {
  border:0;
  padding:0;
  margin:1px 0 20px
}

.mode-option {
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;
  border:1px solid #2e404c;
  cursor:pointer;
  letter-spacing:0;
  margin:0 0 8px;
  background:#0a131b;
  transition:background .2s,border-color .2s
}

.mode-option:has(input:checked) {
  border-color:#c4a46980;
  background:linear-gradient(110deg,#27261e,#142028)
}

.mode-option input {
  width:13px;
  min-height:13px;
  height:13px;
  margin:0;
  accent-color:var(--gold);
  flex:none;
  box-shadow:none
}

.mode-option>span {
  flex:1
}

.mode-option strong {
  display:block;
  font-size:12px;
  font-weight:500;
  color:#dbd5c5
}

.mode-option small {
  display:block;
  font-size:12px;
  line-height:1.5;
  font-weight:400;
  color:#a7b5bc;
  margin-top:3px
}

.mode-option .icon {
  color:#ae9869;
  width:24px;
  height:24px
}

form>.button {
  width:100%;
  justify-content:space-between;
  min-height:46px
}

#join-code {
  letter-spacing:.25em;
  font-family:var(--serif);
  font-size:21px;
  min-height:51px;
  text-transform:uppercase
}

.form-note {
  display:flex;
  gap:9px;
  align-items:center;
  color:#8599a6;
  font-size:11px;
  line-height:1.6;
  margin:5px 0 27px
}

.form-note .icon {
  width:15px;
  height:15px
}

.rules-dialog {
  width:590px;
  max-width:calc(100vw - 30px);
  padding:40px;
  overflow:auto
}

.rules-dialog>.eyebrow {
  font-size:8px
}

.rules-dialog>h2 {
  font-size:30px;
  line-height:1.35;
  margin:12px 0 30px
}

.rules-list {
  list-style:none;
  padding:0;
  margin:0 0 28px;
  display:grid;
  gap:22px
}

.rules-list li {
  display:flex;
  gap:18px
}

.rules-list li>span {
  font:20px/1.4 var(--serif);
  color:#a0885c
}

.rules-list h3 {
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  margin-bottom:5px
}

.rules-list p {
  font-size:12px;
  line-height:1.7;
  color:#93a4af
}

.rules-dialog>.button {
  width:100%
}

.toast {
  position:fixed;
  z-index:100;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100vw - 36px);
  padding:15px 24px;
  background:#152832;
  border:1px solid #8ca8a87a;
  border-left:3px solid var(--gold);
  box-shadow:0 12px 50px #0009;
  color:#e4ddc9;
  font-size:13px;
  text-align:center;
  animation:toast-in .25s ease-out
}

@keyframes rise-in {
  from {
    opacity:0;
    transform:translateY(22px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes screen-in {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}

@keyframes art-in {
  from {
    opacity:0;
    scale:1.05
  }
  to {
    opacity:1;
    scale:1
  }
}

@keyframes orbit {
  to {
    transform:rotate(360deg)
  }
}

@keyframes nudge {
  0%,100% {
    transform:translateY(-3px)
  }
  50% {
    transform:translateY(3px)
  }
}

@keyframes breathe {
  0%,100% {
    opacity:.4
  }
  50% {
    opacity:.85
  }
}

@keyframes levitate {
  0%,100% {
    transform:translateY(0) rotate(1deg)
  }
  50% {
    transform:translateY(-9px) rotate(-1deg)
  }
}

@keyframes seal-charge {
  0% {
    box-shadow:0 0 30px #c8ac7311
  }
  55% {
    box-shadow:0 0 90px #d6b87588;
    border-color:#ffefd0
  }
  100% {
    box-shadow:0 0 140px #ecce97;
    transform:rotateY(150deg) scale(1.35);
    opacity:0
  }
}

@keyframes seal-break {
  0% {
    transform:translateY(0)
  }
  40% {
    transform:translateY(-9px) scale(.97)
  }
  100% {
    transform:translateY(-12px) scale(1.25)
  }
}

@keyframes flash {
  0% {
    opacity:.65
  }
  100% {
    opacity:0
  }
}

@keyframes title-reveal {
  from {
    opacity:0;
    filter:blur(8px);
    transform:translateY(13px);
    letter-spacing:.02em
  }
  to {
    opacity:1;
    filter:blur(0);
    transform:translateY(0)
  }
}

@keyframes dialog-in {
  from {
    opacity:0;
    transform:translateY(15px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes toast-in {
  from {
    opacity:0;
    translate:0 8px
  }
  to {
    opacity:1;
    translate:0 0
  }
}

@media(min-width:1600px) {
  .hero-content {
    padding-top:100px
  }
  .hero {
    padding-left:max(7%,calc((100vw - 1380px)/2))
  }
  .hero h1 {
    font-size:108px
  }
  .hero-art {
    background-position:70% top
  }
}

@media(max-width:1100px) {
  .topbar {
    gap:22px;
    padding-inline:4%
  }
  .topnav {
    gap:20px
  }
  .hero {
    padding-inline:6%;
    min-height:640px
  }
  .hero-content {
    width:68%;
    padding-top:70px
  }
  .hero h1 {
    font-size:clamp(53px,6.4vw,75px)
  }
  .hero-art {
    background-position:60% 50%
  }
  .hero-art-caption {
    right:6%;
    font-size:7px
  }
  .hero-meta {
    font-size:10px
  }
  .how-strip {
    padding:0 5%
  }
  .how-strip article {
    gap:13px
  }
  .how-strip article+article {
    padding-left:20px
  }
  .how-strip .icon {
    display:none
  }
  .how-strip h2 {
    font-size:11px
  }
  .how-strip p {
    font-size:10px
  }
  .section-heading h2 {
    font-size:24px
  }
  .section-heading>p {
    font-size:11px
  }
  .side-card {
    padding:27px
  }
  .side-card p {
    font-size:13px
  }
  .page-wrap {
    padding-inline:5%
  }
  .player-card,.player-slot {
    min-height:215px
  }
  .player-name {
    font-size:12px
  }
  .player-avatar {
    width:57px;
    height:68px
  }
  .players-list {
    gap:8px
  }
  .room-head {
    gap:20px
  }
  .room-head h1 {
    font-size:36px
  }
  .role-page-wrap {
    padding-inline:5%
  }
  .impostor-intro h1 {
    font-size:10vw
  }
  .mission-item {
    padding:16px 8px 12px
  }
  .mission-item strong {
    font-size:12px
  }
  .item-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .teammate-layout {
    grid-template-columns:.75fr 1.25fr;
    gap:35px;
    min-height:650px
  }
  .teammate-brief h1 {
    font-size:7vw
  }
  .teammate-art {
    background-position:70% center
  }
  .teammate-view .role-wash {
    background:linear-gradient(90deg,#07121c33,#07121c55 20%,#07121ce5 50%,#07121cf5),linear-gradient(0deg,#07121c,transparent)
  }
  .guardian-display>span {
    font-size:7px
  }
}

@media(max-width:760px) {
  .topbar {
    height:76px;
    padding:0 5%;
    gap:12px
  }
  .brand {
    font-size:18px;
    gap:8px
  }
  .brand-mark {
    width:44px;
    height:44px
  }
  .brand small {
    font-size:6px
  }
  .topnav {
    gap:0
  }
  .nav-divider,.edition {
    display:none
  }
  .nav-link {
    font-size:11px
  }
  .nav-link .nav-arrow {
    margin-left:5px
  }
  .motion-button {
    padding:6px;
    width:36px;
    min-height:44px;
    border:0;
    justify-content:center;
    flex:none
  }
  .motion-button>span {
    display:none
  }
  .hero {
    min-height:690px;
    padding:0 6%;
    background:#070d12
  }
  .hero-art {
    inset:0;
    background-position:73% 0;
    background-size:auto 82%;
    opacity:.72
  }
  .hero-vignette {
    background:linear-gradient(0deg,#070d12,#070d12fa 23%,#070d12a6 49%,#070d1277 76%,transparent),linear-gradient(90deg,#070d12bb,transparent 80%)
  }
  .hero-content {
    padding:60px 0 100px;
    width:100%;
    max-width:none
  }
  .hero-content>.eyebrow {
    font-size:8px;
    max-width:90%;
    letter-spacing:.15em
  }
  .hero h1 {
    font-size:clamp(37px,12vw,69px);
    margin:35px 0 29px;
    line-height:1.12;
    letter-spacing:-.055em
  }
  .hero-content>p {
    font-size:14px;
    max-width:330px;
    line-height:1.85
  }
  .hero-actions {
    margin-top:28px;
    gap:10px
  }
  .hero-actions .button {
    padding:14px 17px;
    font-size:10px;
    gap:16px
  }
  .hero-meta {
    margin-top:26px;
    gap:11px;
    font-size:10px;
    flex-wrap:wrap
  }
  .hero-art-caption {
    display:none
  }
  .hero-orbit {
    width:330px;
    right:-150px;
    top:55px;
    opacity:.5
  }
  .hero-bottom {
    left:6%;
    right:6%;
    font-size:7px;
    letter-spacing:.12em;
    bottom:23px
  }
  .hero-bottom>span {
    max-width:200px
  }
  .scroll-hint {
    font-size:7px;
    gap:10px
  }
  .how-strip {
    padding:0 6%;
    grid-template-columns:1fr
  }
  .how-strip article,.how-strip article+article {
    padding:21px 0;
    border-left:0;
    gap:20px
  }
  .how-strip article+article {
    border-top:1px solid var(--line)
  }
  .how-strip h2 {
    font-size:12px
  }
  .how-strip p {
    font-size:11px
  }
  .how-strip .icon {
    display:block;
    margin-right:5px
  }
  .step-number {
    font-size:24px
  }
  .sides-section {
    padding:45px 6% 50px
  }
  .section-heading {
    display:block;
    margin-bottom:24px
  }
  .section-heading h2 {
    font-size:26px;
    max-width:330px
  }
  .section-heading>p {
    font-size:12px;
    margin-top:18px
  }
  .sides-grid {
    grid-template-columns:1fr;
    gap:15px
  }
  .side-card {
    padding:28px
  }
  .side-card h3 {
    font-size:27px
  }
  .side-card p {
    max-width:320px
  }
  .side-sigil {
    opacity:.1
  }
  .footer {
    flex-wrap:wrap;
    padding:20px 6%;
    justify-content:center;
    gap:13px;
    text-align:center;
    font-size:7px
  }
  .footer>span:nth-child(2) {
    display:none
  }
  .page-wrap {
    padding:24px 5% 32px
  }
  .room-topline {
    margin-bottom:25px
  }
  .room-head {
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:27px;
    gap:22px
  }
  .room-head h1 {
    font-size:32px
  }
  .room-head .eyebrow {
    font-size:8px
  }
  .room-head p {
    font-size:12px
  }
  .code-panel {
    padding:15px 20px;
    border:1px solid var(--line);
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    column-gap:15px;
    background:#0c1a24aa
  }
  .code-panel>div {
    grid-column:2;
    grid-row:1/3;
    margin:0;
    gap:15px
  }
  .code-panel strong {
    font-size:23px;
    letter-spacing:.15em
  }
  .code-panel .micro-label {
    font-size:7px
  }
  .code-help {
    font-size:9px
  }
  .code-panel .icon-button {
    width:31px;
    height:31px
  }
  .players-list {
    grid-template-columns:1fr;
    gap:8px
  }
  .player-card,.player-slot {
    min-height:75px;
    display:grid;
    grid-template-columns:18px 36px minmax(0,1fr);
    padding:12px 17px;
    column-gap:12px;
    row-gap:6px;
    animation-delay:0s
  }
  .player-card::after {
    top:20%;
    bottom:20%;
    left:0;
    right:auto;
    width:2px;
    height:auto
  }
  .player-card::before {
    inset:4px
  }
  .player-number {
    position:static;
    font-size:10px;
    grid-column:1;
    grid-row:1 / 3
  }
  .player-avatar {
    width:36px;
    height:43px;
    font-size:16px;
    margin:0;
    grid-column:2;
    grid-row:1 / 3
  }
  .player-name {
    font-size:13px;
    text-align:left;
    min-width:0;
    grid-column:3;
    align-self:end
  }
  .player-crown {
    top:8px;
    right:9px;
    width:12px;
    height:12px
  }
  .player-tags {
    margin:0;
    grid-column:3;
    justify-content:flex-start;
    align-self:start;
    min-height:0;
    gap:4px
  }
  .player-ready {
    display:none
  }
  .player-slot {
    min-height:57px;
    justify-content:flex-start;
    column-gap:12px
  }
  .empty-avatar {
    width:36px;
    height:32px;
    font-size:16px;
    margin:0;
    border:0;
    grid-column:2;
    grid-row:1 / 3
  }
  .player-slot small {
    margin:0;
    font-size:8px;
    grid-column:3
  }
  .player-slot .player-name {
    font-size:10px
  }
  .lobby-console {
    padding:22px;
    flex-direction:column;
    align-items:stretch;
    gap:24px;
    margin-top:20px
  }
  .champion-setting {
    justify-content:flex-start
  }
  .champion-setting>div {
    flex:1
  }
  .champion-setting select {
    width:100%
  }
  .start-zone {
    text-align:left;
    border-top:1px solid var(--line);
    padding-top:19px
  }
  .start-zone .button {
    width:100%;
    min-width:0
  }
  .start-zone p {
    font-size:11px
  }
  .privacy-note {
    font-size:9px;
    text-align:center;
    line-height:1.6;
    align-items:flex-start
  }
  .privacy-note .icon {
    margin-top:3px
  }
  .waiting-dots {
    justify-content:center;
    margin-bottom:0
  }
  .reveal-view {
    min-height:calc(100svh - 148px)
  }
  .reveal-content {
    padding:40px 20px 45px
  }
  .sealed-card {
    width:145px;
    height:193px;
    margin:32px 0 30px
  }
  .seal-frame>.seal-logo {
    width:82px;
    height:82px
  }
  .seal-frame>span {
    font-size:5.5px
  }
  .seal-frame>i {
    bottom:15px
  }
  .seal-orbit {
    width:87px;
    height:87px;
    top:30px
  }
  .reveal-content>p {
    font-size:12px
  }
  .reveal-content>.eyebrow {
    font-size:8px;
    letter-spacing:.15em
  }
  .reveal-content h1 {
    font-size:29px
  }
  .reveal-content>.button {
    min-width:270px
  }
  .role-page-wrap {
    padding:20px 5% 28px
  }
  .role-topline {
    gap:12px;
    margin-bottom:35px
  }
  .role-private {
    font-size:7px;
    letter-spacing:.08em;
    gap:5px
  }
  .role-private .icon {
    width:11px;
    height:11px
  }
  .role-room-code {
    padding-left:6px
  }
  .role-topline .text-button {
    font-size:10px;
    gap:6px
  }
  .impostor-art {
    background-position:66% 0;
    background-size:auto 620px
  }
  .impostor-view .role-wash {
    background:linear-gradient(0deg,#100b10 10%,#100b10 35%,#100b1033 85%),linear-gradient(90deg,#100b10de,#100b1033)
  }
  .impostor-intro {
    padding-top:10px;
    min-height:300px
  }
  .role-kicker {
    font-size:7px;
    letter-spacing:.14em;
    margin-bottom:24px
  }
  .role-you {
    font-size:8px;
    letter-spacing:.25em
  }
  .impostor-intro h1 {
    font-size:clamp(40px,10.5vw,70px);
    letter-spacing:-.05em;
    margin-top:5px
  }
  .impostor-intro>p {
    font-size:19px;
    margin-top:15px
  }
  .role-objective {
    font-size:11px;
    margin-top:24px;
    max-width:250px;
    gap:10px
  }
  .role-objective .icon {
    width:23px;
    height:23px
  }
  .mission-panel {
    margin-top:22px;
    padding:20px 17px
  }
  .mission-heading {
    gap:10px;
    align-items:flex-start;
    margin-bottom:20px
  }
  .mission-heading h2 {
    font-size:18px
  }
  .mission-heading .micro-label {
    font-size:7px;
    letter-spacing:.1em
  }
  .mode-tag {
    font-size:7px;
    padding:4px 7px;
    white-space:nowrap
  }
  .item-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px
  }
  .mission-item {
    padding:17px 6px 13px;
    gap:10px
  }
  .item-image-wrap {
    width:47px;
    height:47px
  }
  .mission-item strong {
    font-size:11px;
    line-height:1.45
  }
  .mission-item .item-caption {
    font-size:7px
  }
  .item-number {
    font-size:7px;
    top:5px;
    left:5px
  }
  .mission-instruction {
    font-size:11px;
    margin-top:17px;
    padding-top:13px
  }
  .single-item .mission-item {
    padding:12px 10px;
    gap:16px
  }
  .single-item .mission-item strong {
    font-size:14px
  }
  .role-bottom {
    flex-direction:column;
    gap:12px;
    align-items:center
  }
  .role-bottom>.text-button {
    font-size:11px
  }
  .teammate-layout {
    display:block;
    min-height:0
  }
  .guardian-display {
    display:none
  }
  .teammate-art {
    background-position:75% 0;
    background-size:auto 550px;
    opacity:.45
  }
  .teammate-view .role-wash {
    background:linear-gradient(0deg,#07121c 15%,#07121ce6 48%,#07121c40),linear-gradient(90deg,#07121c55,#07121c88)
  }
  .teammate-brief {
    padding:7px 0 8px
  }
  .teammate-brief .role-kicker {
    font-size:7px;
    letter-spacing:.14em;
    margin-bottom:28px
  }
  .teammate-brief h1 {
    font-size:16vw;
    max-width:100%;
    line-height:1.25
  }
  .teammate-description {
    font-size:12px;
    margin-top:18px;
    max-width:320px
  }
  .teammate-missions {
    margin-top:30px
  }
  .cover-item-panel {
    padding:18px
  }
  .cover-item-panel .mission-item strong {
    font-size:16px
  }
  .malus-panel {
    padding:21px
  }
  .malus-panel h2 {
    font-size:24px
  }
  .malus-panel p {
    font-size:13px
  }
  .teammate-hint {
    font-size:10px;
    margin:17px 0 23px
  }
  .teammate-brief>.button {
    font-size:9px;
    gap:13px
  }
  .entry-dialog {
    width:520px;
    max-width:calc(100vw - 24px);
    max-height:calc(100svh - 24px)
  }
  .dialog-inner {
    display:block
  }
  .dialog-aside {
    display:none
  }
  .dialog-content {
    padding:22px 20px 27px
  }
  .dialog-content>h2 {
    font-size:24px
  }
  .dialog-content>p {
    font-size:11px;
    margin-bottom:24px
  }
  .entry-tabs {
    margin-bottom:25px;
    gap:22px;
    padding-right:24px
  }
  .entry-tabs button {
    font-size:11px
  }
  .rules-dialog {
    padding:33px 26px
  }
  .rules-dialog>h2 {
    font-size:27px
  }
  .rules-list {
    gap:20px
  }
  .rules-list p {
    font-size:12px
  }
  input,select,.champion-setting select {
    font-size:16px
  }
}

@media(max-width:480px) {
  .topbar {
    padding-inline:4%;
    gap:8px
  }
  .brand {
    font-size:16px;
    gap:5px;
    letter-spacing:.04em
  }
  .brand-mark {
    width:40px;
    height:40px
  }
  .brand small {
    display:none
  }
  .nav-label-full,.nav-arrow {
    display:none
  }
  .nav-label-short {
    display:inline
  }
  .nav-link {
    min-height:44px;
    padding-inline:4px
  }
  .code-panel {
    grid-template-columns:minmax(0,1fr)
  }
  .code-panel>div {
    grid-column:1;
    grid-row:2;
    justify-content:space-between;
    margin:7px 0
  }
  .code-panel strong {
    font-size:28px
  }
  .code-help {
    font-size:11px
  }
  .item-grid:not(.single-item) {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:380px) {
  .brand {
    font-size:16px
  }
  .brand small {
    display:none
  }
  .topbar {
    gap:6px
  }
  .hero h1 {
    font-size:clamp(37px,12vw,45px)
  }
  .hero-actions .button {
    font-size:9px;
    padding-inline:14px;
    gap:10px
  }
  .hero-meta {
    gap:9px;
    font-size:9px
  }
  .hero-bottom>span {
    max-width:160px
  }
  .code-panel {
    padding:14px
  }
  .code-panel strong {
    font-size:28px
  }
  .code-panel>div {
    gap:10px
  }
  .role-private {
    letter-spacing:0
  }
  .role-room-code {
    display:none
  }
  .item-grid {
    gap:6px
  }
  .mission-item strong {
    font-size:11px
  }
  .mission-heading h2 {
    font-size:16px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-delay:0s!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important
  }
  .particles,.reveal-flash {
    display:none
  }
  .hero-art {
    transform:none!important
  }
}

body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after {
  animation-duration:.01ms!important;
  animation-delay:0s!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important;
  transition-delay:0s!important;
  scroll-behavior:auto!important
}

body.reduced-motion .particles,body.reduced-motion .reveal-flash {
  display:none
}

body.reduced-motion .hero-art {
  transform:none!important
}

body.page-paused *,body.page-paused *::before,body.page-paused *::after {
  animation-play-state:paused!important
}

/* Champion search, private match controls and the post-game tribunal. */
.champion-picker { display:grid; gap:8px; min-width:0; width:100%; }
.champion-picker label { margin:0; font-size:10px; letter-spacing:1.4px; color:var(--muted); }
.champion-picker input:not([type=hidden]) { width:100%; min-width:0; margin:0; padding:13px 42px 13px 14px; border:1px solid var(--line); border-radius:3px; background:#0c151d; color:var(--text); font-size:16px; }
.champion-picker input::placeholder { color:#86939d; }
.champion-combobox { position:relative; min-width:0; }
.champion-search-mark { position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--gold); font-size:25px; line-height:1; }
.champion-picker.has-selection input:not([type=hidden]) { border-color:#7ed3dc77; }
.champion-options { position:absolute; z-index:20; top:calc(100% + 5px); left:0; right:0; max-height:min(250px,40svh); overflow:auto; overscroll-behavior:contain; border:1px solid #b99c64; border-radius:4px; background:#0d1822; box-shadow:0 16px 36px #000a; scrollbar-width:thin; scrollbar-color:#576575 #0d1822; }
.champion-options[hidden] { display:none; }
.champion-option { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 14px; border-bottom:1px solid #ffffff09; cursor:pointer; color:#e5eaf0; font-size:16px; }
.champion-option:last-child { border-bottom:0; }
.champion-option:hover,.champion-option.is-active { background:#c8aa7026; color:var(--gold-light); }
.champion-option[aria-selected=true] { color:var(--cyan); background:#7ed3dc0c; }
.champion-option-check { color:var(--gold); opacity:0; font-size:14px; }
.champion-option:hover .champion-option-check,.champion-option.is-active .champion-option-check,.champion-option[aria-selected=true] .champion-option-check { opacity:1; }
.champion-empty { padding:16px; color:var(--muted); font-size:14px; }
.champion-count { min-height:18px; color:var(--muted); font-size:12px; }
.champion-setting { flex:1; max-width:420px; }
.champion-setting>div { width:100%; min-width:0; }
.match-controls { position:relative; z-index:3; display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:16px max(24px,calc((100vw - 1220px)/2)); background:#11171d; border-bottom:1px solid var(--line); }
.match-controls>span { font-size:11px; letter-spacing:1.6px; color:var(--gold); }
.match-controls p { color:var(--muted); font-size:14px; flex:1; }
.match-controls .button { min-height:44px; padding:12px 18px; font-size:11px; }
.impostor-meme { float:right; width:clamp(220px,30vw,350px); margin:24px 0 32px 40px; padding:8px; border:1px solid rgba(222,112,85,.5); background:#100d10; box-shadow:0 24px 70px #0008; transform:rotate(2deg); }
.impostor-meme img { display:block; width:100%; height:auto; }
.impostor-meme figcaption { padding:12px 4px 6px; color:#e9b6a1; text-align:center; font-size:13px; }
.impostor-mission { clear:both; }
.voting-view,.results-view { position:relative; isolation:isolate; min-height:calc(100svh - 80px); overflow:hidden; background:radial-gradient(ellipse at 50% 0%,#42262388,transparent 65%),#080f16; }
.voting-view::before,.results-view::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.1; background:linear-gradient(#070d1280,#070d12),url('/assets/art/shaco.jpg') center top/cover; pointer-events:none; }
.verdict-wrap { position:relative; max-width:1180px; margin:auto; padding:72px 36px 80px; text-align:center; }
.verdict-wrap h1 { max-width:1000px; margin:18px auto; font-size:clamp(30px,4.6vw,58px); line-height:1.15; letter-spacing:-1.5px; text-wrap:balance; }
.verdict-lead { color:#c7c0b8; font-size:20px; line-height:1.6; }
.tribunal-mark { display:block; font-size:58px; color:var(--gold-light); margin:24px 0 8px; filter:drop-shadow(0 0 22px #bc665877); }
.tribunal-orbit { position:absolute; width:min(80vw,750px); aspect-ratio:1; left:50%; top:-380px; transform:translateX(-50%); border:1px solid #c8aa703b; border-radius:50%; box-shadow:0 0 0 60px #c8aa7008,0 0 0 120px #c8aa7005; pointer-events:none; }
.voting-view.entering .tribunal-mark { animation:tribunal-slam .9s cubic-bezier(.16,1,.3,1) both; }
.voting-view.entering h1 { animation:tribunal-title 1s ease both; }
@keyframes tribunal-slam { from{opacity:0;transform:scale(3) rotate(-25deg);filter:blur(12px)} to{opacity:1;transform:scale(1) rotate(0);filter:blur(0)} }
@keyframes tribunal-title { from{opacity:0;letter-spacing:10px;transform:translateY(20px)} to{opacity:1;letter-spacing:-1.5px;transform:translateY(0)} }
.vote-rules { max-width:620px; margin:14px auto 32px; color:var(--muted); line-height:1.7; }
#vote-candidates { padding:0; border:0; margin:0 0 26px; min-width:0; }
#vote-candidates legend { width:100%; margin-bottom:18px; font-size:12px; color:var(--gold); text-transform:uppercase; letter-spacing:2px; }
.vote-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; max-width:960px; margin:auto; }
.vote-options:has(>.vote-option:only-child) { grid-template-columns:minmax(0,300px); justify-content:center; }
.vote-option { position:relative; display:block; min-width:0; cursor:pointer; }
.vote-option input { position:absolute; top:18px; right:18px; accent-color:var(--gold); z-index:1; width:18px; height:18px; }
.suspect-card { display:flex; flex-direction:column; align-items:center; height:100%; min-height:240px; padding:28px 16px 18px; gap:10px; border:1px solid #4a4240; background:linear-gradient(150deg,#201c20ee,#0b131bec); border-radius:4px; transition:border-color .2s,background .2s,transform .2s; }
.suspect-avatar { display:grid; place-items:center; width:68px; height:68px; margin:4px 0 6px; border:1px solid #76644b; border-radius:50%; font:30px var(--serif); color:var(--gold-light); background:#c8aa7010; }
.suspect-card strong { font:600 20px var(--sans); overflow-wrap:anywhere; }
.suspect-champion { color:var(--muted); font-size:14px; }
.suspect-choice { margin-top:auto; padding-top:12px; color:var(--gold); font-size:10px; letter-spacing:2px; }
.vote-option input:checked+.suspect-card { border-color:var(--gold-light); background:linear-gradient(150deg,#50372899,#111c24); box-shadow:inset 0 0 0 1px #c8aa7040; }
.vote-option input:focus-visible+.suspect-card { outline:2px solid var(--gold-light); outline-offset:4px; }
#vote-candidates:not(:disabled) .vote-option:hover .suspect-card { transform:translateY(-4px); border-color:var(--gold); }
#vote-candidates:disabled .vote-option { cursor:default; }
.vote-confirmation { margin:24px auto; color:var(--gold-light); background:#c8aa7010; border:1px solid var(--line); padding:18px; border-radius:4px; max-width:700px; }
.vote-progress { margin:40px auto 0; padding-top:28px; border-top:1px solid var(--line); max-width:760px; }
#vote-progress-text { color:var(--gold-light); font-size:14px; }
.vote-voters { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:16px; }
.voter-chip { border:1px solid #ffffff18; border-radius:20px; padding:6px 14px; font-size:13px; color:var(--muted); overflow-wrap:anywhere; max-width:100%; }
.voter-chip.has-voted { color:var(--cyan); background:#7ed3dc0c; border-color:#7ed3dc44; }
.vote-footnote { max-width:600px; margin:24px auto 0; color:var(--muted); font-size:13px; }
.revealed-name { color:#f2ba9e; font:600 clamp(22px,3vw,36px) var(--sans); margin:26px auto 12px; overflow-wrap:anywhere; }
.results-view.impostor-caught { background:radial-gradient(ellipse at 50% 0%,#123f4e88,transparent 65%),#080f16; }
.impostor-caught .revealed-name { color:var(--cyan); }
.results-heading { margin:54px 0 24px; text-align:left; }
.results-heading h2 { font-size:24px; margin-bottom:8px; }
.results-heading p { color:var(--muted); }
.results-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; text-align:left; }
.result-card { min-width:0; border:1px solid #7ed3dc2a; border-radius:5px; padding:26px; background:#0c1821e8; }
.result-card.is-impostor { border-color:#d9816277; background:linear-gradient(150deg,#372020eb,#101922); }
.result-card-head { display:flex; gap:12px; justify-content:space-between; }
.result-card-head>div { min-width:0; }
.result-card-head h3 { margin:8px 0 4px; font:600 24px var(--sans); overflow-wrap:anywhere; }
.result-card-head p { color:var(--muted); }
.result-card .micro-label { color:var(--cyan); }
.result-card.is-impostor .micro-label { color:#eea88e; }
.result-vote-count { align-self:flex-start; white-space:nowrap; border:1px solid var(--line); padding:6px 10px; font-size:12px; color:var(--gold-light); }
.result-ballot { margin:16px 0 22px; padding:12px 0; border-top:1px solid #ffffff10; border-bottom:1px solid #ffffff10; color:#b4c3cb; font-size:14px; overflow-wrap:anywhere; }
.result-card h4 { margin:0 0 10px; font-size:16px; font-weight:600; }
.result-items { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.result-items li { display:flex; align-items:center; gap:10px; min-width:0; font-size:13px; line-height:1.4; }
.result-items img { flex-shrink:0; border:1px solid var(--line); border-radius:3px; }
.result-items span { overflow-wrap:anywhere; }
.result-no-item { font-size:14px; color:var(--muted); }
.result-gage { margin-top:24px; padding:18px; background:#0003; border-left:2px solid #c8aa7055; }
.result-gage h4 { margin:8px 0; }
.result-gage p { color:#c2c8ca; font-size:15px; line-height:1.65; }
.replay-panel { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:32px; padding:28px; border:1px solid var(--line); background:#c8aa7009; text-align:left; }
.replay-panel h2 { font-size:24px; margin-bottom:10px; }
.replay-panel p { color:var(--muted); max-width:580px; }
.replay-panel .button { flex-shrink:0; }
@media(max-width:760px) {
  .champion-setting { max-width:none; }
  .match-controls { padding:14px 20px; gap:10px; }
  .match-controls>span { width:100%; }
  .match-controls .button { width:100%; }
  .impostor-meme { float:none; width:min(100%,300px); margin:12px auto 38px; transform:rotate(1deg); }
  .verdict-wrap { padding:42px 20px 52px; }
  .verdict-lead { font-size:17px; }
  .vote-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .suspect-card { min-height:214px; padding:28px 12px 14px; }
  .suspect-card strong { font-size:17px; }
  .suspect-avatar { width:54px; height:54px; font-size:24px; }
  .vote-option input { top:12px; right:12px; }
  .results-list { grid-template-columns:1fr; }
  .result-card { padding:20px; }
  .replay-panel { flex-direction:column; align-items:stretch; padding:22px; }
  .replay-panel .button { white-space:normal; }
}
@media(max-width:380px) {
  .verdict-wrap { padding-inline:14px; }
  .result-items { grid-template-columns:1fr; }
}