:root {
  --night-base: #0b121e;
  --night-panel: #111e2d;
  --night-border: #354b62;
  --team-blue: #92d7ff;
  --team-amber: #f6c284;
}
body { background: var(--night-base); }
.top { background: #0d1623; }
.top-nav { display: flex; }
.top-nav button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; }
.top-nav [data-icon] { width: 17px; height: 17px; color: #97b2d0; }
.hero { --role-tone: var(--team-amber); background: #101a2a; border-color: #354963; }
.hero[data-role=police] { --role-tone: var(--team-blue); }
.hero-art,.hero-portrait { position: absolute; inset: 0; z-index: -3; height: auto; }
.hero-portrait { z-index: -2; inset-inline-start: 26%; pointer-events: none; opacity: 0; }
.hero-portrait.stage-active { opacity: 1; }
.hero-portrait canvas,.stage-surface canvas { display: block; width: 100%; height: 100%; }
.hero::after {
  background: linear-gradient(90deg,#101a2a 2%,#101a2a 24%,#101a2ae8 37%,#101a2a58 59%,transparent 78%),
              linear-gradient(0deg,#0c1529c4,transparent 40%);
}
[dir=rtl] .hero-art { inset: 0; }
.hero-copy { position: relative; padding-block: 46px; }
.hero h1 { font-size: clamp(54px,6.8vw,99px); }
[dir=rtl] .hero h1 { letter-spacing: 0; line-height: 1; }
.hero h1 strong,.eyebrow { color: var(--role-tone); }
.hero .pulse { background: var(--role-tone); box-shadow: 0 0 0 4px color-mix(in srgb,var(--role-tone) 18%,transparent); }
.hero-index { color: #a8b8ce; font-family: ui-monospace,monospace; }
.role-picker { display: flex; gap: 7px; margin-block: 0 16px; }
.role-pick {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 11px;
  color: #d6e0ef; background: #132337e8; border: 1px solid #405977; border-radius: 8px;
  font-size: 12px; font-weight: 750;
}
.role-pick.police { --pick: var(--team-blue); }
.role-pick.robber { --pick: var(--team-amber); }
.role-pick [data-icon] { color: var(--pick); width: 16px; height: 16px; }
.role-pick[aria-pressed=true] { color: var(--pick); border-color: var(--pick); }
.hero .hero-play { min-width: 166px; min-height: 51px; background: var(--role-tone); color: #101a2a; box-shadow: 0 4px 0 #07111e; font-size: 15px; }
.hero .hero-play:hover { background: color-mix(in srgb,var(--role-tone) 80%,white); }
.art-label { inset: auto; inset-block-end: 16px; inset-inline-end: 16px; text-align: start; }
.art-label .plate-index { color: #f5cf9a; background: #302e2b; }
.art-label .art-arrow { padding: 0; background: none; color: #d1dfed; width: 15px; height: 15px; }
[dir=rtl] .art-arrow { transform: scaleX(-1); }
.dialog::backdrop { background: #070d18d9; backdrop-filter: none; }
.dialog[data-screen=room],.dialog[data-screen=queue] { width: min(690px,calc(100vw - 28px)); background: var(--night-panel); }
.dialog h2 { margin: 5px 0 10px; margin-inline-end: 35px; }
.party-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-inline-end: 41px; }
.party-head h2 { margin-inline-end: 0; }
.party-head .room-code { font-size: clamp(16px,3vw,24px); letter-spacing: .08em; color: var(--team-blue); vertical-align: middle; }
.party-head .btn { min-height: 36px; padding-inline: 8px; }
.party-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #cbdced; font-size: 12px; margin-block: 8px 10px; }
.party-meta > span:not([data-icon]) { padding: 2px 7px; background: #273b51; border-radius: 4px; color: #ebf5ff; }
.party-meta [data-icon] { width: 14px; height: 14px; color: var(--team-blue); }
.party-stage { position: relative; height: clamp(105px,31dvh,230px); overflow: hidden; border: 1px solid var(--night-border); border-radius: 12px; background: radial-gradient(ellipse at bottom,#21344a,#0e1827 74%); }
.party-stage-label { position: absolute; inset-inline-start: 10px; inset-block-end: 8px; color: #b3c8dd; font-size: 10px; font-weight: 750; }
.party-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-block: 8px 0; }
.party-member { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; min-height: 52px; padding: 7px 8px; background: #152539; border: 1px solid #364d65; border-radius: 8px; }
.party-member > [data-icon] { color: #b3c8df; }
.party-member.police > [data-icon] { color: var(--team-blue); }
.party-member.robber > [data-icon] { color: var(--team-amber); }
.party-member div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.party-member strong,.party-member small { display: block; font-size: 12px; }
.party-member small { margin-top: 2px; color: #b6cadc; font-size: 10px; }
.party-ready { color: #dbb6a2; font-size: 10px; font-weight: 800; }
.party-ready[data-ready=true] { color: #a3e8c3; }
.party-roster { margin-block: 9px; font-size: 12px; }
.party-roster summary,.debrief-details summary { cursor: pointer; }
.clock-big { color: var(--team-blue); font-size: 30px; }
#match-priority { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
#match-priority .partner-card { position: static; min-width: 0; }
.hud-loot { display: inline-flex; align-items: center; gap: 5px; color: #f6d193; font: 800 15px ui-monospace,monospace; white-space: nowrap; direction: ltr; }
.hud-loot [data-icon] { width: 17px; height: 17px; }
.partner-name { min-width: 0; }
#partner-name { display: block; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
#partner-status { flex: none; }
#match-settings { min-width: 38px; min-height: 38px; }
.match-header .score { direction: ltr; }
.flagship-game .ability small:not(:empty) { border-radius: 4px 4px 0 0; padding-block: 2px; background: #102235; }
.debrief {
  --win-tone: var(--team-amber); --win-dark: #37261c;
  position: fixed; z-index: 4; inset: 0; overflow: auto; overscroll-behavior: contain;
  background: radial-gradient(ellipse at 80% 45%,var(--win-dark),transparent 60%),#0b1422;
}
.debrief[data-winner=police] { --win-tone: var(--team-blue); --win-dark: #1e3651; }
.debrief-wrap { width: min(1240px,calc(100% - 48px)); min-height: 100%; margin-inline: auto; display: flex; flex-direction: column; }
.debrief-top { display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding-block-start: env(safe-area-inset-top); border-block-end: 1px solid #49607879; color: #c2d2e5; font-size: 12px; font-weight: 750; }
.debrief-top > span { display: flex; align-items: center; gap: 9px; }
.debrief-top i { width: 5px; height: 5px; border-radius: 50%; background: var(--win-tone); }
.debrief-grid { flex: 1; display: grid; grid-template-columns: minmax(255px,.86fr) minmax(0,1.14fr); align-items: center; gap: clamp(10px,4vw,60px); padding-block: 21px max(21px,env(safe-area-inset-bottom)); }
.debrief-copy { animation: debrief-enter .25s ease-out both; min-width: 0; }
@keyframes debrief-enter { from { opacity: .45; transform: translateY(7px); } }
.debrief-tag { display: inline-flex; align-items: center; gap: 7px; color: var(--win-tone); border: 1px solid color-mix(in srgb,var(--win-tone) 47%,transparent); background: #111d2d; border-radius: 30px; padding: 5px 11px; font-size: 12px; font-weight: 800; }
.debrief-tag [data-icon] { width: 15px; height: 15px; }
.debrief h1 { margin-block: 10px 0; font-size: clamp(32px,5.55vw,76px); line-height: .99; letter-spacing: -.055em; color: #f3f7fc; }
[dir=rtl] .debrief h1 { letter-spacing: 0; line-height: 1.16; }
.debrief-copy > p { color: #c5d3e4; font-size: clamp(12px,1.3vw,17px); margin-block: 12px 15px; }
.featured-play { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #3a536b; border-inline-start: 3px solid var(--win-tone); background: #121f30; border-radius: 9px; }
.featured-play [data-icon] { width: 24px; height: 24px; color: var(--win-tone); }
.featured-play > div { flex: 1; min-width: 0; }
.featured-play div > * { display: block; }
.featured-play small { color: var(--win-tone); font-size: 10px; font-weight: 800; }
.featured-play strong { margin-block: 2px; font-size: clamp(12px,1.4vw,16px); }
.featured-play div > span,.featured-play time { color: #c4d1e1; font-size: 11px; }
.debrief-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-block: 14px 10px; }
.debrief-actions .primary { background: var(--win-tone); color: #101827; box-shadow: 0 4px 0 #080f1c; }
.debrief-actions .primary:hover { background: color-mix(in srgb,var(--win-tone) 80%,white); }
.debrief-details { color: #c2d1e4; font-size: 12px; }
.debrief-details summary { padding-block: 5px; }
.debrief .result-metrics { margin-block: 6px; }
.winner-stage { position: relative; min-width: 0; height: min(65dvh,560px); border: 1px solid #526880; border-radius: 17px; overflow: hidden; background: radial-gradient(ellipse at 50% 75%,var(--win-dark),#0c1726 72%); }
.winner-stage canvas { opacity: 0; }
.winner-stage.stage-active canvas { opacity: 1; }
.winner-line { position: absolute; inset-inline: 10px; inset-block-end: 54px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); justify-items: center; gap: 6px; pointer-events: none; direction: ltr; }
.winner-line > span:only-child { grid-column: 1 / -1; }
.winner-line > span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid #62728a; border-radius: 6px; background: #101b2be8; color: #eef5fc; font-size: 11px; font-weight: 760; }
.winner-line [data-icon] { width: 13px; height: 13px; color: var(--win-tone); }
.celebration-controls { position: absolute; inset-inline-end: 8px; inset-block-end: 8px; }
.celebration-controls .btn { min-height: 35px; padding-inline: 9px; font-size: 11px; }
@media (max-width:810px) {
  .top-nav { gap: 8px; }
  .hero-copy { max-width: 60%; }
  .hero h1 { font-size: clamp(42px,8vw,68px); }
}
@media (max-width:540px) {
  .top-inner { flex-wrap: wrap; height: auto; min-height: 52px; gap: 0 5px; padding-block: 7px 3px; }
  .top-nav { order: 3; width: 100%; justify-content: space-around; gap: 6px; font-size: 12px; }
  .top-nav button { min-height: 38px; padding-inline: 3px; }
  .hero { padding-top: 148px; }
  .hero-art,.hero-portrait,[dir=rtl] .hero-art { inset: 0 0 auto; height: 226px; }
  .hero::after,[dir=rtl] .hero::after { background: linear-gradient(0deg,#101a2a 0%,#101a2a 54%,#101a2a9c 67%,transparent 87%); transform: none; }
  .hero-copy { max-width: none; padding-block: 16px; }
  .hero h1 { font-size: clamp(38px,11vw,58px); }
  .art-label { inset-block: 8px auto; inset-inline-end: 8px; }
  .art-label strong { font-size: 11px; }
  .debrief-wrap { width: calc(100% - 24px); }
}
@media (max-width:590px) and (orientation:portrait) {
  .debrief-grid { grid-template-columns: 1fr; align-content: start; }
  .winner-stage { height: min(45dvh,390px); }
}
@media (max-height:450px) and (orientation:landscape) {
  .top-inner { height: 47px; }
  .landing { padding-top: 11px; }
  .hero { min-height: 286px; }
  .hero-copy { padding-block: 16px; }
  .hero p { margin-block-end: 10px; line-height: 1.4; }
  .hero h1 { margin-block-end: 12px; font-size: clamp(37px,7.9vw,63px); }
  .eyebrow { margin-block-end: 9px; }
  .role-picker { margin-block-end: 9px; }
  .role-pick { min-height: 34px; }
  .hero .hero-play { min-height: 40px; }
  .hero-note { margin-top: 8px; }
  .dialog[data-screen=room] .dialog-inner,.dialog[data-screen=queue] .dialog-inner { padding: 13px; }
  .party-head h2 { font-size: 22px; }
  .party-stage { height: 100px; }
  .party-member { min-height: 40px; }
  .dialog[data-screen=room] .dialog-actions { margin-top: 8px; }
  .dialog[data-screen=room] .dialog-actions .btn { min-height: 34px; padding-inline: 8px; font-size: 11px; }
  .debrief-wrap { width: calc(100% - 28px); }
  .debrief-top { min-height: 44px; }
  .debrief-grid { gap: 12px; padding-block: 9px; }
  .winner-stage { height: min(74dvh,280px); }
  .debrief h1 { font-size: clamp(29px,5vw,47px); margin-block-start: 6px; }
  .debrief-copy > p { margin-block: 7px; }
  .debrief-tag { padding-block: 3px; }
  .debrief-actions { margin-block: 7px 3px; }
  .debrief-actions .btn { min-height: 40px; }
  .featured-play { padding: 6px 8px; }
  #match-priority .partner-card { padding: 3px 5px; gap: 4px; }
  #match-priority .partner-card small { letter-spacing: 0; }
  #partner-name { max-width: 13ch; }
  .movement-note { display: none; }
  .match-tools .chip { min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .debrief-copy,.btn,.mode-card,.map-card { animation: none; transition: none; }
}

body { background: radial-gradient(ellipse at 85% 0,#241938 0,transparent 57rem),var(--night-base); }
.top { background: linear-gradient(105deg,#101a36,#1b1731 70%,#291b36); border-color: #45416b; }
.hero { border-color: color-mix(in srgb,var(--role-tone) 43%,#30284e); }
.hero::after {
  background: linear-gradient(90deg,#171b37 2%,#171b37 24%,#171b37e8 37%,#171b3761 59%,transparent 78%),
              linear-gradient(0deg,#24183db0,transparent 44%);
}
.role-pick[aria-pressed=true] { background: color-mix(in srgb,var(--pick) 20%,#171c33); }
.mode-card,.map-card { --card-tone: #87dfff; }
.mode-card.amber,.map-card[data-map^=bank] { --card-tone: #ffc47c; }
.mode-card.violet,.map-card[data-map^=museum] { --card-tone: #d0a8ff; }
.mode-card.green,.map-card[data-map=harbor] { --card-tone: #85f1bc; }
.map-card[data-map=central],.map-card[data-map=hotel] { --card-tone: #ffd192; }
.map-card[data-map^=mall] { --card-tone: #ff9cca; }
.mode-card,.map-card,.map-card.flagship {
  border-color: color-mix(in srgb,var(--card-tone) 35%,#272747);
  background: linear-gradient(135deg,color-mix(in srgb,var(--card-tone) 18%,#14192e),#131a30 79%);
}
.mode-card:hover,.map-card:hover { border-color: var(--card-tone); }
.mode-card .mode-icon { color: var(--card-tone); background: color-mix(in srgb,var(--card-tone) 20%,#14192f); }
.mode-card .mode-arrow,.map-text > [data-icon],.map-thumb b { color: var(--card-tone); }
.dialog,.dialog[data-screen=room],.dialog[data-screen=queue] { background: linear-gradient(145deg,#211f3d,#111e32 65%); border-color: #635e90; }
.party-member.police { background: linear-gradient(135deg,#223a60,#15243d); border-color: #4e7eaa; }
.party-member.robber { background: linear-gradient(135deg,#492942,#241e38); border-color: #9a627c; }
.match-header,.match-foot,.flagship-game .match-header,.flagship-game .match-foot { background: linear-gradient(115deg,#131e3a,#211a38); border-color: #504b74; }
.flagship-game .ability { background: linear-gradient(145deg,#253b65,#201d42); border-color: #7c88bc; }
.flagship-game .ability.act { background: linear-gradient(145deg,#edff92,#83e6b6); border-color: #d6ffc5; }
.flagship-game .ability.act.in-range { background: linear-gradient(145deg,#f3ffa2,#8fefbd); }
.debrief { --win-dark: #563038; background: radial-gradient(ellipse at 80% 45%,var(--win-dark),transparent 68%),#10142c; }
.debrief[data-winner=police] { --win-dark: #1e3d67; }
.debrief[data-play=pressuredHandoff] .featured-play,.debrief[data-pressured=true] .featured-play { --win-tone: #d5b5ff; background: #272042; }
#game .arena .match-banner {
  --notice: #8ae9ff;
  position: absolute; inset-inline: 0; inset-block-start: clamp(9px,2vh,19px);
  margin-inline: auto; transform: none; width: max-content; max-width: min(54%,520px);
  z-index: 3; pointer-events: none;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 15px 10px 11px; border: 1px solid color-mix(in srgb,var(--notice) 73%,#232548);
  border-block-start: 3px solid var(--notice); border-radius: 12px;
  background: linear-gradient(130deg,color-mix(in srgb,var(--notice) 22%,#141731),#13192ef5 80%);
  color: #fbfaff; text-align: start;
  box-shadow: 0 6px 20px #070a1c85,0 0 18px color-mix(in srgb,var(--notice) 17%,transparent);
}
#game .arena .match-banner[data-tone=route] { --notice: #81e9ff; }
#game .arena .match-banner[data-tone=success] { --notice: #96f7ba; }
#game .arena .match-banner[data-tone=warning] { --notice: #ffcb80; }
#game .arena .match-banner[data-tone=team] { --notice: #d6b1ff; }
.match-banner > div { min-width: 0; }
.match-banner strong,.match-banner small { display: block; overflow-wrap: anywhere; }
.match-banner strong { font-size: clamp(17px,2.05vw,25px); line-height: 1.11; font-weight: 880; }
.match-banner small { color: #f0e8ff; font-size: clamp(12px,1.2vw,15px); line-height: 1.24; margin-block-start: 3px; }
.match-banner .notice-icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px;
  border-radius: 8px; background: color-mix(in srgb,var(--notice) 26%,#151930); color: var(--notice);
}
.match-banner .notice-icon svg { width: 22px; height: 22px; }
#toast { font-size: 16px; padding: 12px 16px; background: #29214b; border-color: #a58bd6; color: #faf3ff; }
@media (max-width:540px) {
  .hero::after,[dir=rtl] .hero::after { background: linear-gradient(0deg,#171b37 0%,#171b37 54%,#171b379c 67%,transparent 87%); }
}
@media (max-height: 440px) and (orientation: landscape) {
  #game .arena .match-banner { max-width: 53%; inset-block-start: 6px; gap: 6px; padding: 6px 8px; border-radius: 8px; }
  .match-banner strong { font-size: clamp(15px,2.5vw,19px); }
  .match-banner small { font-size: 11px; }
  .match-banner .notice-icon { width: 24px; height: 24px; }
  .match-banner .notice-icon svg { width: 16px; height: 16px; }
}
@media (max-width: 650px) and (max-height: 440px) and (orientation: landscape) {
  #game .arena .match-banner {
    inset-inline: clamp(136px,27.5vw,179px) clamp(90px,20vw,112px);
    width: auto; max-width: none;
  }
}
@media (max-width:680px) and (max-height:400px) and (orientation:landscape) {
  .top-inner { height: 43px; min-height: 43px; padding-block: 0; flex-wrap: nowrap; gap: 8px; }
  .top-nav { order: 0; width: auto; gap: 5px; }
  .top-nav button { gap: 3px; min-height: 32px; padding-inline: 2px; font-size: 10px; }
  .top-nav [data-icon] { width: 13px; height: 13px; }
  .top-actions { gap: 5px; }
  .top-actions .btn, .top-actions .language { min-height: 31px; height: 31px; padding-inline: 6px; }
  .landing { padding-block-start: 8px; }
  .hero { display: flex; align-items: center; min-height: 0; height: max(226px, calc(100dvh - 58px)); padding: 0; }
  .hero-art, [dir=rtl] .hero-art { inset: 0; height: auto; }
  .hero-portrait { inset: 0; inset-inline-start: 45%; height: auto; }
  .hero::after {
    background: linear-gradient(90deg,#101a2a 3%,#101a2a 24%,#101a2ae9 40%,transparent 64%);
    transform: none;
  }
  [dir=rtl] .hero::after {
    background: linear-gradient(270deg,#101a2a 3%,#101a2a 24%,#101a2ae9 40%,transparent 64%);
    transform: none;
  }
  .hero-copy { z-index: 1; width: 54%; max-width: 54%; margin: 0; margin-inline-start: 15px; padding: 10px 0; }
  .hero h1 { font-size: clamp(25px,6.5vw,43px); margin-block-end: 6px; }
  .hero .eyebrow { font-size: 8px; margin-block-end: 5px; }
  .hero p { font-size: 11px; line-height: 1.3; margin-block: 0 6px; }
  .hero .role-picker { gap: 4px; margin-block-end: 6px; }
  .hero .role-pick { min-height: 28px; padding-inline: 6px; font-size: 10px; }
  .hero .role-pick [data-icon] { width: 12px; height: 12px; }
  .hero .hero-play { min-width: 99px; min-height: 34px; font-size: 12px; }
  .hero-note { margin-block-start: 6px; font-size: 9px; }
  .hero .art-label, [dir=rtl] .hero .art-label { inset: auto; inset-block-end: 7px; inset-inline-end: 7px; padding: 4px; font-size: 10px; }
  .hero .art-label strong { font-size: 10px; }
  .hero .art-label small, .hero .art-label .art-arrow { display: none; }
}