body { background: radial-gradient(ellipse at 20% 0%, #293346 0%, #101922 60%); }
#room-custom-topic { margin: 20px 0; padding: 16px; border: 1px solid #526480; border-radius: 14px; min-width: 0; }
.custom-question { min-width: 0; margin: 16px 0; padding: 14px; border: 1px solid #526480; border-radius: 12px; background: #172333; }
.custom-question label { display: block; margin: 12px 0 6px; font-size: .85rem; }
.custom-question .custom-remove { margin-top: 14px; }
.custom-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.room-topic-badge { color: #dbf5b8; background: #293d39; border-radius: 12px; padding: 12px 16px; margin-top: 20px; overflow-wrap: anywhere; }
@media (max-width: 400px) { .custom-answer-grid { grid-template-columns: 1fr; } }
#app { max-width: 620px; max-height: none; background: #141e2c; box-shadow: 0 0 100px #0005; }
#screen-menu { padding: 30px 24px; }
.menu-container { gap: 18px; }
#screen-menu .game-title { font-size: 3rem; margin: 0; }
#screen-menu .season-label { color: #b4c3cf; font-size: .68rem; letter-spacing: .18em; margin: -10px 0 0; }
.player-info { background: #202d3d; border: 1px solid #354357; border-radius: 16px; gap: 14px; padding: 12px; }
.party-hero { position: relative; width: 100%; overflow: hidden; padding: 28px; border-radius: 24px; background: linear-gradient(125deg, #294d4a, #183635); border: 1px solid #48756b; }
.eyebrow { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .15em; color: #b8e784; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy h2 { font-size: 2rem; line-height: 1.15; margin: 14px 0; text-align: left; color: #f6f6e9; }
.hero-copy p { font-size: .88rem; color: #c4d4cd; line-height: 1.6; }
.hero-monster { position: absolute; right: -18px; top: 44px; width: 150px; height: 155px; background: #b5dd73; border-radius: 48% 48% 38% 38%; transform: rotate(12deg); box-shadow: inset -15px -12px 0 #93be55, 0 16px 30px #10292260; }
.hero-monster::before, .hero-monster::after { content: ''; position: absolute; top: -18px; width: 35px; height: 50px; border-radius: 8px 80% 0 0; background: #b5dd73; }
.hero-monster::before { left: 17px; transform: rotate(-20deg); }.hero-monster::after { right: 14px; transform: rotate(25deg); }
.hero-monster span { position: absolute; top: 44px; width: 43px; height: 49px; border: 12px solid white; background: #233137; border-radius: 50%; z-index: 1; }
.hero-monster span:first-child { left: 25px; }.hero-monster span:nth-child(2) { left: 80px; }
.hero-monster i { position: absolute; top: 106px; left: 63px; width: 28px; height: 15px; border-bottom: 5px solid #284339; border-radius: 50%; }
.hero-actions { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; margin-top: 26px; z-index: 2; }
.room-primary, .room-secondary { min-width: 0; padding: 15px 18px; border-radius: 12px; font-family: var(--font-body); font-weight: 800; font-size: .96rem; }
.room-primary { background: #caee93; color: #18312b; }.room-secondary { background: #eef3e7; color: #20392e; }
.hero-actions .btn { display: flex; justify-content: space-between; align-items: center; }
.hero-actions [data-room-intent="solo"] { grid-column: 1 / -1; }
.hero-footnote { margin-top: 18px; font-size: .6rem; letter-spacing: .075em; color: #c8d7cf; display: flex; justify-content: space-between; gap: 5px; }
.menu-section-label { display: flex; justify-content: space-between; width: 100%; font-weight: 800; letter-spacing: .1em; font-size: .7rem; margin-top: 6px; color: #c8d7e2; }
.menu-section-label span { font-weight: 400; letter-spacing: 0; color: #a0adbf; }
#screen-menu .menu-buttons { display: grid; grid-template-columns: repeat(3, 1fr); max-width: none; gap: 10px; }
#screen-menu .menu-buttons .btn { min-width: 0; min-height: 65px; background: #243245; color: #e4eaf1; border: 1px solid #3c4b60; border-radius: 14px; padding: 12px 6px; font-family: var(--font-body); font-weight: 800; font-size: .8rem; box-shadow: none; }
#screen-menu .menu-buttons .btn:not(.menu-tile):hover { background: #34465b; border-color: #a5cf7f; }
#screen-menu .menu-buttons .btn-hatch, #screen-menu .menu-buttons .btn-battle { color: #d0edaa; }
#screen-rooms { justify-content: flex-start; overflow-y: auto; padding: 24px; }
.rooms-container { width: 100%; padding-bottom: 28px; }
.rooms-container > h2 { font-size: 1.9rem; margin: 10px 0 8px; }
.room-back { display: block; padding: 10px 0; margin-bottom: 16px; border: 0; background: transparent; color: #c6d3e1; cursor: pointer; font: inherit; }
.room-muted { color: #b4c2d1; font-size: .87rem; line-height: 1.6; margin: 10px 0 18px; }
.room-label { display: block; font-weight: 800; font-size: .85rem; margin: 18px 0 9px; }
.rooms-container input:not([type=radio]):not([type=range]):not([type=checkbox]) { width: 100%; background: #202e40; border: 1px solid #536178; border-radius: 12px; padding: 14px; color: white; font: inherit; }
.room-tabs { display: flex; gap: 6px; background: #0d1622; padding: 5px; border-radius: 12px; margin: 24px 0; }
.room-tabs button { flex: 1; border: 0; background: transparent; color: #b4c2d1; border-radius: 9px; padding: 12px; font: inherit; font-weight: 800; cursor: pointer; }
.room-tabs button[aria-pressed=true] { background: #344838; color: #d3efa9; }
#room-capacity { width: 100%; accent-color: #caee93; }#room-capacity-value { float: right; color: #caee93; }
.rooms-container form > .btn, #room-live > .btn { width: 100%; }
.room-ideas { margin-top: 26px; border-top: 1px solid #3a4859; padding-top: 18px; color: #b7c5d3; font-size: .86rem; line-height: 1.6; }.room-ideas summary { cursor: pointer; }.room-ideas p { margin-top: 12px; }
#room-error:not(:empty) { background: #512c35; color: #ffe1e4; padding: 12px; border-radius: 10px; margin: 14px 0; }
.room-code-card { background: #293d39; border: 1px solid #506747; text-align: center; padding: 22px; border-radius: 18px; margin: 20px 0; }.room-code-card strong { display: block; font-size: 2.6rem; letter-spacing: .2em; color: #dbf5b8; user-select: all; }.room-code-card button { margin: 0 auto; }
.roster-heading, .room-round { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; gap: 10px; }.roster-heading span, .room-round { font-size: .78rem; color: #c1cfde; }
.room-roster { list-style: none; margin-bottom: 20px; }.room-roster li { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid #334257; }.room-roster small { display: block; color: #a1b3c8; font-size: .6rem; letter-spacing: .12em; }.room-roster b { margin-left: auto; font-size: .8rem; color: #caee93; white-space: nowrap; }.player-avatar { background: #354c55; color: #d5efb1; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; }
.room-question { font: 800 1.3rem/1.5 var(--font-body); margin: 24px 0; }.room-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.room-answer { padding: 18px 12px; border: 1px solid #65758b; background: #293a50; color: white; border-radius: 12px; font: 700 1rem var(--font-body); cursor: pointer; }.room-answer:disabled { cursor: default; opacity: .6; }.room-answer.correct { background: #365936; border-color: #caee93; opacity: 1; }.room-finish { text-align: center; margin: 30px 0; line-height: 1.5; }.boss-panel { background: #303348; padding: 16px; border-radius: 12px; }.boss-panel span { float: right; }.boss-panel progress { width: 100%; height: 14px; accent-color: #caee93; margin-top: 12px; }
.rooms-container [hidden] { display: none !important; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #caee93; outline-offset: 3px; }
@media (max-width: 420px) { #screen-menu, #screen-rooms { padding: 22px 16px; }.party-hero { padding: 20px; }.hero-copy h2 { font-size: 1.65rem; }.hero-monster { right: -50px; transform: rotate(12deg) scale(.8); }.hero-copy p { font-size: .76rem; }.hero-footnote { font-size: .52rem; }#screen-menu .menu-buttons { grid-template-columns: repeat(2, 1fr); }.player-info { gap: 10px; }.hero-actions { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Party adventures */
#room-duration { width: 100%; accent-color: #caee93; }#room-duration-value { float: right; color: #caee93; }
#room-match-timer { display: inline-block; margin-left: 12px; font-size: 1.25rem; color: #caee93; font-variant-numeric: tabular-nums; }
.match-length, .stage-outcome { background: #314538; padding: 14px; margin: 14px 0; border-radius: 12px; color: #e0efc8; }
.time-portal { text-align: center; font-size: 5rem; background: radial-gradient(ellipse,#7257ab88,transparent 70%); }.time-portal strong { display: block; font-size: 1.25rem; color: #dfd0ff; }
.era-track { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 18px 0; }.era-track span { padding: 10px; background: #1a263d; border: 1px solid #4f5b73; border-radius: 10px; font-size: .7rem; }.era-track .current-era { background: #514479; border-color: #cab9ff; }
.mode-lava { background: linear-gradient(150deg,#4a2726,#231e30); border-color: #a35b38; }
.lava-scroll { overflow-x: auto; border-radius: 12px; }
.lava-arena { height: 250px; position: relative; overflow: hidden; border-radius: 12px; background: repeating-linear-gradient(0deg,#1d202c 0px,#1d202c 48px,#3e3440 49px,#3e3440 50px); }
.lava-flood { position: absolute; bottom: 0; width: 100%; min-height: 22px; background: linear-gradient(#ffbe46,#fa5728 40%,#ac242e); border-top: 3px solid #ffe7a3; box-shadow: 0 -8px 35px #f8583255; transition: height .7s ease; }.lava-flood > span { position: absolute; bottom: 4px; left: 8px; color: #271d19; font-size: .65rem; font-weight: 900; }
.lava-platform { position: absolute; width: 65px; text-align: center; background: #554943; border-bottom: 5px solid #a69b83; border-radius: 5px; z-index: 1; transition: bottom .5s ease; }.lava-platform > span { display: block; font-size: 1.6rem; margin-top: -28px; }.lava-platform strong { display: block; font-size: .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.lava-platform small { display: block; font-size: .55rem; color: #f4e1c0; }
.mode-board { background: linear-gradient(145deg,#263c45,#1b293d); border: 1px solid #4a6370; border-radius: 18px; padding: 18px; margin: 18px 0; overflow: hidden; }
.mode-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }.mode-title > span { font-size: 2rem; }.mode-title h3 { margin-top: 4px; font-size: 1.2rem; }
.mode-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }.mode-stats > div { flex: 1; min-width: 65px; background: #101e2c99; padding: 10px; border-radius: 10px; }.mode-stats small { display: block; color: #b8cbd5; font-size: .65rem; }.mode-stats strong { display: block; margin-top: 5px; color: #d4efad; font-size: 1.05rem; }
.mode-meter { margin-top: 8px; }.mode-meter span { font-size: .75rem; }.mode-meter progress { display: block; width: 100%; height: 10px; margin-top: 6px; accent-color: #b8e784; }
.arena-monsters { display: grid; grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); gap: 10px; max-height: 250px; overflow-y: auto; }.arena-fighter { text-align: center; padding: 12px; border-radius: 12px; background: #101e2c80; }.arena-fighter > span { font-size: 2.5rem; display: block; }.arena-fighter strong { font-size: .8rem; display: block; overflow-wrap: anywhere; }.arena-fighter small { font-size: .55rem; }.knocked-out { opacity: .5; filter: grayscale(1); }
.race-track { display: grid; gap: 12px; max-height: 260px; overflow-y: auto; }.race-lane > span { font-size: .72rem; }.race-lane small { font-size: .65rem; color: #c5d7d5; }.race-road { position: relative; height: 38px; background: #0c1c2a; border-bottom: 2px dashed #637565; margin: 5px 0; }.race-road > span { position: absolute; top: 0; font-size: 1.6rem; transition: left .6s ease; }.race-road > b { position: absolute; right: 0; top: 0; font-size: 1.4rem; }
.lab-map { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }.lab-map > span { background: #152332; border: 1px solid #526073; border-radius: 8px; text-align: center; padding: 10px 4px; font-size: 1.5rem; }.lab-map .cleared { background: #4a643f; border-color: #caee93; }.lab-map small { display: block; font-size: .65rem; }
.tower-scene { display: grid; text-align: center; gap: 8px; font-size: 4rem; }.tower-scene strong { font-size: 1.8rem; color: #e7d8ff; }.tower-scene span { font-size: .8rem; }
.creature-stage { display: grid; place-items: center; padding: 20px 8px; min-height: 145px; background: radial-gradient(ellipse,#69774655,transparent 70%); }.crafted-monster { filter: drop-shadow(0 8px 14px #0006); }.creature-traits { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }.creature-traits span { background: #132430; padding: 5px 9px; border-radius: 8px; font-size: .75rem; }
.vault-scene { display: flex; align-items: center; gap: 14px; font-size: 3rem; padding: 12px 0; }.vault-scene span { font-size: .95rem; line-height: 1.6; }
.defense-base { text-align: center; }.defense-base > span { display: block; font-size: 4rem; }.defense-base > strong { display: block; font-size: .75rem; letter-spacing: .15em; }.defense-base > div:last-child { font-size: .78rem; margin-top: 16px; line-height: 1.8; }
.hunt-map { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.hunt-map button { border: 1px solid #547064; background: #152b30; color: white; border-radius: 12px; padding: 12px 6px; font: inherit; cursor: pointer; }.hunt-map button[aria-pressed=true] { background: #405a36; border-color: #caee93; }.hunt-map span { display: block; font-size: 1.8rem; }.hunt-map strong { display: block; font-size: .65rem; margin: 8px 0 4px; }.hunt-map small { font-size: .6rem; color: #bdcfc6; }
.mode-actions { padding: 18px; background: #263c32; border: 1px solid #749057; border-radius: 16px; }.mode-actions h3 { font-size: 1rem; margin: 10px 0 16px; }.mode-actions label { font-size: .8rem; display: block; margin-bottom: 8px; }.rooms-container select { width: 100%; background: #1b2a3b; color: #e8f1f4; border: 1px solid #648477; border-radius: 9px; padding: 12px; font: inherit; margin-bottom: 14px; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.action-grid button { text-align: left; font: inherit; background: #1b2c32; border: 1px solid #587460; border-radius: 12px; padding: 14px; color: white; cursor: pointer; }.action-grid button:hover:not(:disabled) { border-color: #d5f3a8; background: #344a38; }.action-grid button:disabled { opacity: .45; cursor: not-allowed; }.action-grid span { display: block; font-size: 1.8rem; margin-bottom: 8px; }.action-grid strong { font-size: .85rem; display: block; }.action-grid small { display: block; font-size: .73rem; line-height: 1.5; color: #c3d1d8; margin-top: 6px; }.action-grid b { display: block; font-size: .7rem; color: #d5f3a8; margin-top: 10px; }
.answer-reveal, .action-wait, .spectator-note { padding: 12px; margin: 14px 0; border-radius: 10px; background: #354b3b; color: #e1f0cf; font-size: .85rem; }.mode-log { max-height: 170px; overflow-y: auto; padding: 14px; background: #1b2838; border: 1px solid #344b5c; border-radius: 12px; margin: 18px 0; }.mode-log summary { cursor: pointer; color: #d1e7bb; font-size: .85rem; }.mode-log p { font-size: .75rem; margin-top: 8px; color: #bdc9d7; }
.mode-mayhem { background: linear-gradient(145deg,#492e41,#202a3c); }.mode-tower { background: linear-gradient(145deg,#3b325b,#202a3c); }.mode-heist { background: linear-gradient(145deg,#4a4128,#202a3c); }
.assembled-creature { width: 130px; height: 120px; position: relative; margin: 16px 0; transform: scale(var(--creature-size)); }.assembled-body { position: absolute; inset: 8px 12px; background: hsl(var(--creature-hue) 48% 65%); border-radius: 48% 45% 35% 32%; box-shadow: inset -10px -12px 0 #0002, 0 10px 22px #0004; }.mechanical .assembled-body { border-radius: 18px; border: 5px solid #99afba; }.assembled-body.armored { border: 8px double #abdeed; border-radius: 25%; }.assembled-eyes { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 22px 7px 0; }.assembled-eyes i { width: 24px; height: 28px; background: #243437; border: 7px solid white; border-radius: 50%; }.assembled-eyes i:nth-child(n+3) { width: 14px; height: 14px; border-width: 4px; }.assembled-mouth { text-align: center; color: #25382c; font-size: 27px; font-weight: 900; line-height: 30px; }.trait-wing { position: absolute; top: 22px; font-size: 46px; }.trait-wing.left { left: -30px; }.trait-wing.right { right: -30px; transform: scaleX(-1); }.trait-horns { position: absolute; top: -15px; left: 45px; font-size: 32px; }.trait-tail { position: absolute; bottom: 0; right: -22px; font-size: 38px; }.trait-feet { position: absolute; bottom: -17px; left: 34px; font-size: 30px; }
.room-round { position: sticky; top: -24px; z-index: 3; background: #141e2cf5; padding: 12px 0; }

/* The same Collection sprite follows each player through every room mode. */
.room-monster-avatar { display: inline-block; position: relative; width: 88px; height: 84px; flex-shrink: 0; vertical-align: middle; }
.room-monster-avatar > .room-sprite-frame { position: absolute; display: block; width: 60px; height: 60px; left: 4px; top: 12px; transform-origin: top left; }
.room-monster-avatar.monster-small { width: 48px; height: 46px; }
.room-monster-avatar.monster-small > .room-sprite-frame { left: 0; top: 2px; transform: scale(.56); }
.room-monster-avatar.monster-large { width: 125px; height: 116px; }
.room-monster-avatar.monster-large > .room-sprite-frame { left: 2px; top: 14px; transform: scale(1.35); }
.room-monster-preview, .mode-companion { display: flex; align-items: center; gap: 14px; margin: 12px 0; padding: 10px 14px; background: #1b2a3b; border-radius: 12px; }
.room-monster-preview > span:last-child { color: #b9cdd1; font-size: .8rem; }.mode-companion strong { color: #d8edbc; }
.arena-fighter > .room-monster-avatar { font-size: inherit; margin: auto; }
.lava-platform > .room-monster-avatar { display: block; font-size: inherit; margin: -43px auto 0; }
.race-road { height: 50px; }.race-road > span { top: -6px; }
.selected-creature-body { position: relative; z-index: 1; }
.selected-creature-body.trait-armor { filter: drop-shadow(0 0 8px #8de4f5); }
.trait-breath { position: absolute; z-index: 2; right: -12px; bottom: 10px; font-size: 28px; }
.assembled-creature .trait-horns, .assembled-creature .trait-feet { z-index: 2; }
.boss-panel > .room-monster-avatar { float: none; }
@media(max-width:380px) { .action-grid { grid-template-columns: 1fr; }.hunt-map { grid-template-columns: 1fr 1fr; } }

/* Ice Mountain: the selected monsters climb above a snowy base camp. */
.mode-ice-mountain { border-color: #8bbdd5; background: linear-gradient(145deg, #203f59, #162b40); }
.ice-scroll { overflow-x: auto; border-radius: 16px; }
.ice-mountain-scene { position: relative; height: 300px; overflow: hidden; background: radial-gradient(circle at 15% 20%, #f1faff 1px, transparent 2px) 0 0 / 47px 59px, linear-gradient(#213651, #77b1d0); }
.ice-peak { position: absolute; inset: 28px 0 0; background: linear-gradient(145deg, #f5fcff 30%, #a1d3e5 31%, #4c819f 65%); clip-path: polygon(0 100%, 20% 45%, 30% 64%, 53% 0, 77% 61%, 87% 40%, 100% 100%); }
.ice-altitude, .ice-base { position: absolute; left: 12px; right: 12px; font-size: .7rem; font-weight: 800; color: #f1fbff; z-index: 2; }
.ice-altitude { top: 12px; }.ice-base { bottom: 8px; border-top: 2px solid #e3faff; padding-top: 6px; }
.ice-climber { position: absolute; width: 80px; transform: translateX(-50%); text-align: center; z-index: 1; border-bottom: 4px solid #dff9ff; border-radius: 5px; background: #183b57d9; }
.ice-climber > .room-monster-avatar { display: block; margin: -36px auto 0; }
.ice-climber strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65rem; }
.ice-climber small { display: block; color: #d8f5ff; font-size: .7rem; }
.achievements-list { display: grid; gap: 12px; margin-top: 24px; }
#screen-achievements { justify-content: flex-start; overflow-y: auto; overscroll-behavior-y: contain; padding: 24px; }
#screen-achievements > .rooms-container { flex-shrink: 0; }
.achievement-card { display: flex; gap: 18px; padding: 20px; border: 1px solid #40516a; border-radius: 16px; background: #1e2d40; }
.achievement-card.earned { border-color: #a8cc7e; background: linear-gradient(120deg, #2f483b, #233440); }
.achievement-icon { font-size: 2rem; }.achievement-card > div { flex: 1; min-width: 0; }
.achievement-card h3 { font: 1.1rem var(--font-display); margin-bottom: 8px; }.achievement-card p { color: #bdcddd; font-size: .85rem; line-height: 1.5; }
.achievement-card progress { width: 100%; height: 10px; margin: 12px 0 6px; accent-color: #b7e88c; }.achievement-card small { display: block; color: #d4edb7; }
.achievement-notice { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 1000; width: min(90vw, 480px); padding: 18px; background: #29463b; color: #e3fbc2; border: 1px solid #c5e59d; border-radius: 14px; box-shadow: 0 12px 30px #0006; pointer-events: none; }
.achievement-notice[hidden] { display: none; }
.mode-horror { background: linear-gradient(135deg, #28223d, #151c2b); border-color: #76638d; }
.horror-mansion { position: relative; height: 260px; overflow: hidden; border-radius: 14px; background: repeating-linear-gradient(90deg, #30273d 0 42px, #392d47 43px 46px); border-bottom: 24px solid #443442; }
.horror-mansion::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px #0009; }
.horror-window { position: absolute; left: 12%; top: 28px; width: 65px; height: 90px; border: 7px solid #564963; border-radius: 40px 40px 0 0; background: #152235; color: #e8deae; font-size: 48px; text-align: center; }
.horror-room-name { position: absolute; top: 18px; right: 20px; color: #e2cda6; font-size: .8rem; letter-spacing: .1em; }
.horror-door { position: absolute; right: 15%; bottom: -6px; font-size: 105px; filter: brightness(.65); }
.horror-player { position: absolute; left: 40%; bottom: 12px; display: grid; justify-items: center; color: #e9e4f1; font-size: .8rem; }
.horror-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 16px 0; }
.horror-map > span { padding: 8px 4px; border: 1px solid #564961; border-radius: 7px; text-align: center; color: #b6aac5; }
.horror-map small { display: block; font-size: .6rem; margin-top: 4px; }.horror-map .current { background: #4e4261; border-color: #d1b2ec; color: white; }
.horror-scare { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; text-align: center; background: #241d38ef; color: #ece1ff; pointer-events: none; animation: mansion-boo 2.4s ease-out forwards; }
.horror-scare > span { display: block; font-size: 100px; line-height: 1.15; }.horror-scare strong { font-size: 1.1rem; }
@keyframes mansion-boo { 0% { opacity: 0; transform: scale(.75); } 12%, 65% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .horror-scare { animation: mansion-boo-still 2.4s linear forwards; } @keyframes mansion-boo-still { 0%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } }

/* =====================================================================
   Rooms: join / host wizard / lobby / in-match HUD / finish podium.
   (Mode boards are styled in the section above and in room-modes.css.)
   ===================================================================== */
#screen-rooms { --rooms-pad: 24px; }
@media (max-width: 420px) { #screen-rooms { --rooms-pad: 22px; } }
@media (min-width: 900px) { #screen-rooms { --rooms-pad: 32px; } }
.rooms-topbar { display: flex; align-items: center; justify-content: space-between; padding-right: 100px; }
.rooms-topbar .room-back { margin-bottom: 6px; }
.mode-card input, .choice-tile input, .choice-chip input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
#room-error:not(:empty)::before { content: ''; display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.24em; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10.3%203.6C11%202.3%2013%202.3%2013.7%203.6L21.4%2018.2C22%2019.5%2021.1%2021%2019.6%2021H4.4C2.9%2021%202%2019.5%202.6%2018.2Z%22%20fill%3D%22%23ffdd00%22%20stroke%3D%22%231d1433%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3Crect%20x%3D%2210.9%22%20y%3D%228.2%22%20width%3D%222.2%22%20height%3D%226.8%22%20rx%3D%221.1%22%20fill%3D%22%231d1433%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217.6%22%20r%3D%221.3%22%20fill%3D%22%231d1433%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; margin-right: .35em; }
#room-error:not(:empty) { font-weight: 700; line-height: 1.5; border: 1px solid #a2505d; }
.room-big { width: 100%; min-height: 60px; font-size: 1.2rem !important; }
.room-primary.room-big, .lobby-start .btn, .finish-card .btn { font-family: var(--font-display); letter-spacing: .02em; }
.btn.is-busy { opacity: .7; cursor: progress; }

/* Intent tabs: three big friendly choices */
.room-intent-tabs { margin: 18px 0 20px; padding: 6px; background: #0d1622; border: 1px solid var(--border); border-radius: 16px; }
.room-intent-tabs button { padding: 14px 8px; font-size: 1rem; border-radius: 12px; transition: background .15s ease, color .15s ease; }
.room-intent-tabs button:hover { color: #e9f6d6; }
.room-intent-tabs button[aria-pressed=true] { background: var(--brand); color: var(--brand-ink); box-shadow: 0 3px 0 #0005; }

/* Join: a big code field shown as six boxes */
.join-card { padding: 22px 18px 18px; border-radius: 20px; background: linear-gradient(150deg, #2c4a44, #1d3131); border: 2px solid #4f7a63; text-align: center; }
.join-label { display: block; font: 1.45rem/1.2 var(--font-display); color: #f3fbe8; margin-bottom: 16px; }
.code-boxes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 300px; margin: 0 auto; cursor: text; }
.code-boxes .code-box { display: grid; place-items: center; height: 66px; border-radius: 14px; background: #122027; border: 2px solid #4b6a60; font: 2rem var(--font-display); color: #fff; box-shadow: inset 0 3px 0 #0004; transition: border-color .15s ease, transform .15s ease; }
.code-boxes .code-box.filled { border-color: var(--brand); color: var(--brand); animation: code-pop .18s ease; }
.code-boxes .code-box.current { border-color: #fff; box-shadow: 0 0 0 3px #caee9355; }
.code-boxes .code-box.current:empty::after { content: ''; width: 3px; height: 30px; background: var(--brand); border-radius: 2px; animation: code-caret 1s steps(1) infinite; }
.code-boxes.complete .code-box { border-color: var(--good); }
.code-boxes:focus-within { outline: 3px solid var(--brand); outline-offset: 6px; border-radius: 16px; }
#room-code-boxes #room-code-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; opacity: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; cursor: text; }
.code-boxes.shake { animation: code-shake .4s ease; }
.code-boxes.shake .code-box { border-color: var(--bad); }
.join-help { margin-top: 14px; color: #c6dccf; font-size: .85rem; }
.join-help b { color: var(--brand); letter-spacing: .1em; }
@keyframes code-pop { from { transform: scale(.85); } to { transform: scale(1); } }
@keyframes code-caret { 50% { opacity: 0; } }
@keyframes code-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (max-width: 380px) { .code-boxes { gap: 5px; } .code-boxes .code-box { height: 56px; font-size: 1.6rem; } }
.room-monster-slot { margin: 16px 0; }
#room-join-submit { margin-top: 4px; }

/* Partner monster card */
.partner-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.partner-card > .room-monster-avatar { background: radial-gradient(circle at 50% 60%, #caee9333, transparent 70%); border-radius: 14px; }
.partner-info { flex: 1; min-width: 0; }
.partner-info strong { display: block; font: 1.2rem var(--font-display); color: #f2f8ea; overflow-wrap: anywhere; }
.partner-info small { color: #aebdcc; font-size: .8rem; }
.partner-change { flex-shrink: 0; padding: 10px 16px; border-radius: 12px; border: 2px solid var(--brand); background: transparent; color: var(--brand); font: 800 .9rem var(--font-body); cursor: pointer; }
.partner-change:hover { background: #caee9322; }
.partner-picker { margin-top: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.partner-picker .room-label { margin-top: 0; }
.partner-picker small { display: block; color: #aebdcc; font-size: .75rem; line-height: 1.5; }
.no-monster-card { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; padding: 18px; border-radius: 18px; background: linear-gradient(150deg, #3b3160, #272544); border: 2px solid #8a78d6; }
.no-monster-card strong { font: 1.15rem var(--font-display); color: #f6f0ff; }
.no-monster-card p { color: #d9d2f0; font-size: .85rem; line-height: 1.5; margin-top: 4px; }
.no-monster-card .btn { grid-column: 1 / -1; width: 100%; min-width: 0; }
.no-monster-egg { font-size: 3rem; animation: egg-wobble 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes egg-wobble { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-5deg); } }

/* Host / Single Player wizard */
#room-host-form fieldset.wizard-step { border: 0; min-width: 0; }
.wizard-progress { display: flex; list-style: none; margin: 0 0 18px; }
.wizard-progress li { flex: 1; position: relative; }
.wizard-progress li + li::before { content: ''; position: absolute; top: 19px; right: 50%; width: 100%; height: 4px; background: var(--border); border-radius: 2px; }
.wizard-progress li.done + li::before, .wizard-progress li.current::before { background: var(--brand); }
.wizard-progress button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; width: 100%; border: 0; background: none; color: #9fb0c2; font: 700 .75rem var(--font-body); cursor: pointer; }
.wizard-progress b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); border: 3px solid var(--border); font: 1.05rem var(--font-display); color: #cfd9e4; }
.wizard-progress .current b { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 5px #caee9333; }
.wizard-progress .done b { background: #3c5a3b; border-color: var(--brand); color: var(--brand); }
.wizard-progress .current span { color: #eaf6d9; }
.step-title { font: 1.45rem var(--font-display); color: #f3f8ea; margin-bottom: 4px; padding: 0; }
.step-title:focus { outline: none; }
.step-help { margin: 4px 0 12px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.chip, .choice-chip span { display: inline-block; padding: 9px 15px; border-radius: 999px; border: 2px solid var(--border); background: var(--surface); color: #d4dee8; font: 800 .85rem var(--font-body); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.chip:hover, .choice-chip:hover span { border-color: #8fae6c; }
.chip[aria-pressed=true], .choice-chip input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.choice-chip { position: relative; }
.choice-chip input:focus-visible + span, .choice-tile:has(input:focus-visible), .mode-card:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }
.grade-row .choice-chip span { min-width: 58px; text-align: center; font-size: 1rem; padding: 11px 12px; }
#room-host-form #room-mode-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: none; overflow: visible; padding: 2px; }
.mode-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-content: start; padding: 12px; background: var(--surface); border: 2px solid var(--border); border-radius: 16px; cursor: pointer; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.mode-card:hover { border-color: #7f9c68; transform: translateY(-2px); }
.mode-card .mode-icon { font-size: 1.9rem; line-height: 1.2; }
.mode-card-text { min-width: 0; }
.mode-card .mode-category { display: block; color: var(--brand); font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mode-card strong { display: block; font-size: .95rem; line-height: 1.25; color: #f1f5f9; }
.mode-goal { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; color: #aebdcc; font-size: .74rem; line-height: 1.4; }
.mode-card-more { display: none; grid-column: 1 / -1; }
.mode-card:has(input:checked) { grid-column: 1 / -1; border-color: var(--brand); background: linear-gradient(150deg, #2d4a3c, #22363a); box-shadow: 0 0 0 4px #caee9322; transform: none; }
.mode-card:has(input:checked) .mode-icon { font-size: 2.6rem; }
.mode-card:has(input:checked) strong { font: 1.25rem var(--font-display); padding-right: 90px; }
.mode-card:has(input:checked) .mode-goal { -webkit-line-clamp: unset; color: #d9ecd0; font-size: .85rem; }
.mode-card:has(input:checked) .mode-card-more { display: block; }
.mode-card:has(input:checked)::after { content: '✓ Selected'; position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: .7rem; font-weight: 800; }
.guide-steps { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.guide-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #0f1b2699; }
.guide-steps li > span { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: #ffffff14; font-size: 1.15rem; }
.guide-steps p { color: #e0e9ef; font-size: .85rem; line-height: 1.4; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 8px 0 16px; }
.choice-tile { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 8px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; text-align: center; transition: border-color .15s ease, transform .15s ease; }
.choice-tile:hover { border-color: #7f9c68; transform: translateY(-2px); }
.choice-tile > span { font-size: 2rem; }
.choice-tile strong { font-size: .95rem; }
.choice-tile:has(input:checked) { border-color: var(--brand); background: linear-gradient(150deg, #2d4a3c, #22363a); box-shadow: 0 0 0 4px #caee9322; }
.wizard-nav { position: sticky; bottom: calc(-1 * var(--rooms-pad)); z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px calc(-1 * var(--rooms-pad)) 0; padding: 12px var(--rooms-pad) calc(12px + var(--rooms-pad)); background: linear-gradient(to top, #141e2c 75%, #141e2c00); }
.wizard-nav .room-back { margin: 0; padding: 12px 4px; }
.wizard-nav .btn { min-width: 0; flex: 0 1 auto; padding: 14px 26px; }
.wizard-pick { min-width: 0; color: #b4c2d1; font-size: .8rem; line-height: 1.3; }
.wizard-pick strong { display: block; color: #e3f5c9; font-size: 1rem; }
.room-footnote { font-size: .75rem; }
#room-duration { margin-top: 4px; }
#room-duration-value, #room-capacity-value { font-weight: 800; }

/* Shared chips describing a room's settings */
.settings-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.settings-chips span { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: #d9e4ee; font-size: .8rem; font-weight: 700; }

/* Lobby */
.lobby-share { text-align: center; padding: 22px 18px; margin: 8px 0 18px; border-radius: 24px; background: radial-gradient(ellipse at 50% 0%, #3d6a4f, #1d3131 70%); border: 2px solid #5f8f6a; box-shadow: 0 12px 30px #0005; }
.lobby-share .eyebrow { color: #cfe8b6; }
.lobby-site { display: block; margin: 4px 0 12px; font: 1.35rem var(--font-display); color: #fff; overflow-wrap: anywhere; }
.lobby-code { display: block; margin: 2px 0 14px; font: clamp(3rem, 15vw, 6.5rem)/1.05 var(--font-display); letter-spacing: .12em; color: var(--brand); text-shadow: 0 5px 0 #0006; user-select: all; }
.lobby-share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lobby-share-actions .btn { min-width: 0; padding: 12px 18px; font-size: .9rem; }
.lobby-share-help { margin-top: 14px; color: #d2e6d4; font-size: .85rem; }
.lobby-joined { text-align: center; padding: 20px; margin: 8px 0 16px; border-radius: 22px; background: linear-gradient(150deg, #2d4a3c, #1f3334); border: 2px solid #5f8f6a; }
.lobby-party { display: block; font-size: 3rem; animation: party-bounce 1.6s ease-in-out infinite; }
.lobby-joined h3 { font: 1.9rem var(--font-display); color: #f3fbe8; margin: 4px 0; }
.lobby-joined p { color: #d2e6d4; }
.lobby-joined small { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: #0f1b26; color: #aebdcc; letter-spacing: .12em; font-weight: 800; }
.dots i { font-style: normal; animation: dot-blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot-blink { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
@keyframes party-bounce { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(6deg); } }
.lobby-grid { display: grid; gap: 16px; }
.lobby-col { min-width: 0; }
.lobby-col > .eyebrow { margin-bottom: 8px; }
.lobby-mode-card { padding: 16px; border-radius: 20px; background: linear-gradient(150deg, #283a52, #1d2a3c); border: 1px solid var(--border); }
.lmc-head { display: flex; gap: 12px; align-items: flex-start; }
.lmc-icon { font-size: 2.8rem; line-height: 1; }
.lmc-head .mode-category { display: block; color: var(--brand); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lmc-head h3 { font: 1.4rem var(--font-display); color: #f3f8ea; }
.lmc-head p { color: #c8d6e2; font-size: .85rem; line-height: 1.45; margin-top: 2px; }
.lobby-partner { margin-top: 12px; }
.lobby-crew .roster-heading { margin-top: 4px; }
.crew-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.crew-grid li { display: grid; justify-items: center; padding: 6px 6px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); text-align: center; min-width: 0; }
.crew-grid li.is-me { border-color: var(--brand); }
.crew-grid strong { font-size: .85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-grid small { color: #9fb0c2; font-size: .68rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-grid li.pop-in { animation: crew-pop .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes crew-pop { 0% { opacity: 0; transform: scale(.3) translateY(20px); } 100% { opacity: 1; transform: none; } }
.crew-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 16px; border-radius: 16px; border: 2px dashed var(--border); color: #aebdcc; text-align: center; }
.crew-empty span { font-size: 2rem; }
.lobby-start { position: sticky; bottom: calc(-1 * var(--rooms-pad)); z-index: 4; margin: 16px calc(-1 * var(--rooms-pad)) 0; padding: 12px var(--rooms-pad) calc(12px + var(--rooms-pad)); background: linear-gradient(to top, #141e2c 75%, #141e2c00); }
.lobby-start .room-muted { margin: 8px 0 0; text-align: center; }
.room-leave-row { margin-top: 18px; }
.room-leave-row .room-back { margin: 0 auto; }

/* In-match HUD: always visible at the top while the page scrolls */
.match-hud { position: sticky; top: calc(-1 * var(--rooms-pad)); z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px 10px; margin: 0 calc(-1 * var(--rooms-pad)) 14px; padding: 10px 108px 10px var(--rooms-pad); background: #141e2cf2; border-bottom: 1px solid var(--border); backdrop-filter: blur(6px); }
.hud-ring { position: relative; display: grid; place-items: center; width: 48px; height: 48px; }
.hud-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hud-ring circle { fill: none; stroke-width: 5; }
.ring-bg { stroke: #ffffff1a; }
.ring-fg { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 0; transition: stroke-dashoffset .2s linear, stroke .3s ease; }
.hud-ring b { position: relative; font: 1.25rem var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.hud-main { min-width: 0; }
.hud-main strong { display: block; font: 1.05rem var(--font-display); color: #f3f8ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-main small { display: block; color: #9fb0c2; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-stat { text-align: right; }
.hud-stat small { display: block; color: #9fb0c2; font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.hud-stat strong { display: block; font: 1.1rem var(--font-display); color: #e7f1f8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-score strong { color: var(--brand); }
.hud-score i { font: 700 .65rem var(--font-body); color: #b9d99a; }
.hud-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #ffffff14; overflow: hidden; }
.hud-bar span { display: block; height: 100%; width: 100%; background: var(--brand); border-radius: 3px; transition: width .2s linear, background .3s ease; }
.match-hud.hurry .ring-fg { stroke: var(--bad); }
.match-hud.hurry .hud-bar span { background: var(--bad); }
.match-hud.hurry .hud-ring b { color: #ffd1d6; animation: hurry-pulse 1s ease-in-out infinite; }
@keyframes hurry-pulse { 50% { transform: scale(1.18); } }
.match-hud.phase-action .hud-main strong { color: #ffd98a; }
.match-hud #room-match-timer, .host-hud #room-match-timer { margin: 0; font-size: inherit; color: inherit; }
@media (max-width: 380px) { .match-hud { padding-right: 100px; gap: 6px; } .hud-main small { display: none; } .hud-stat strong { font-size: .95rem; } }
.match-layout { display: grid; gap: 4px; }
.match-main, .match-side { min-width: 0; }
#room-live .room-question { margin: 6px 0 14px; font-size: 1.35rem; line-height: 1.35; }
.room-status { margin: 12px 0 6px; text-align: center; }
#room-live .room-answer.picked:disabled { opacity: 1; box-shadow: 0 0 0 4px #fff, 0 5px 0 #0004; }
#room-live .room-answer.wrong { opacity: 1 !important; filter: saturate(.55) brightness(.9); }
#room-live .room-answer.wrong::after { content: '✗'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 1.4rem var(--font-display); }
.match-feedback { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 12px; border-radius: 16px; border: 2px solid; animation: fb-in .35s cubic-bezier(.34, 1.56, .64, 1); }
.match-feedback .fb-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; font: 1.5rem var(--font-display); color: #fff; }
.match-feedback strong { display: block; font: 1.3rem var(--font-display); }
.match-feedback small { display: block; font-size: .85rem; line-height: 1.4; color: #e6eef4; }
.match-feedback small b { color: #fff; }
.fb-points { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 999px; background: #ffffff22; font-size: 1rem; animation: points-pop .6s ease .15s both; }
.match-feedback.is-good { background: #1f4a3a; border-color: var(--good); }.match-feedback.is-good .fb-icon { background: var(--good); }.match-feedback.is-good strong { color: #b9f5d9; }
.match-feedback.is-bad { background: #4a2430; border-color: var(--bad); }.match-feedback.is-bad .fb-icon { background: var(--bad); }.match-feedback.is-bad strong { color: #ffd1d6; }
.match-feedback.is-timeout { background: #4a3a1f; border-color: #f7b733; }.match-feedback.is-timeout .fb-icon { background: #f7b733; }.match-feedback.is-timeout strong { color: #ffe6ad; }
.match-feedback.is-out { background: #2b3446; border-color: #6d7d96; }.match-feedback.is-out .fb-icon { background: #6d7d96; }
@keyframes fb-in { from { opacity: 0; transform: scale(.9) translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes points-pop { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 60% { transform: translateY(-3px) scale(1.15); } 100% { opacity: 1; transform: none; } }
.match-main .mode-actions { margin-bottom: 14px; }
.match-main .boss-panel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; margin-bottom: 12px; }
.match-main .boss-panel progress { grid-column: 1 / -1; margin-top: 4px; }
.match-main .boss-panel span:not(.room-monster-avatar) { float: none; font-weight: 800; }
.match-main .action-grid button.picked { border-color: var(--brand); background: #344a38; opacity: 1; }
.match-side > .mode-board:first-child { margin-top: 14px; }
.room-roster li.is-me { background: #caee9314; border-radius: 12px; }
.room-roster .rank { width: 28px; text-align: center; font: 1rem var(--font-display); color: #cfd9e4; flex-shrink: 0; }
#room-live .room-topic-badge { font-size: .8rem; }

/* Finish: podium + placement */
.finish-card { text-align: center; padding: 18px 12px 20px; margin-bottom: 14px; border-radius: 24px; background: radial-gradient(ellipse at 50% 0%, #4a3f7a, #1d2a3c 70%); border: 2px solid #7f6fc9; }
.finish-card .room-finish { margin: 8px 0 12px; font: 1.35rem/1.35 var(--font-display); color: #fff; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 10px 0 6px; }
.podium-spot { display: grid; justify-items: center; flex: 1; max-width: 160px; min-width: 0; animation: podium-rise .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.podium-spot.place-1 { animation-delay: .35s; }.podium-spot.place-3 { animation-delay: .15s; }
.podium-spot strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.podium-spot > span:not(.room-monster-avatar) { color: var(--brand); font-weight: 800; font-size: .85rem; margin-bottom: 6px; }
.podium-block { display: grid; place-items: start center; width: 100%; height: 52px; padding-top: 8px; border-radius: 12px 12px 0 0; background: linear-gradient(#caee93, #8fba5a); box-shadow: inset 0 -6px 0 #0002; font-size: 1.8rem; }
.podium-spot.place-1 .podium-block { height: 96px; background: linear-gradient(#ffe27a, #e0a92b); }
.podium-spot.place-2 .podium-block { height: 70px; background: linear-gradient(#e6edf5, #a7b6c6); }
.podium-spot.place-3 .podium-block { height: 52px; background: linear-gradient(#f0b27d, #b8733f); }
.podium-spot.is-me strong { color: var(--brand); }
@keyframes podium-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.finish-place { margin: 14px 0; font: 1.3rem var(--font-display); color: #f3f8ea; }
.finish-place b { color: var(--brand); }
.finish-card .btn { width: 100%; max-width: 360px; margin: 6px auto 0; }
.finish-wait { margin: 10px 0 0; }
.room-confetti { position: fixed; inset: 0; z-index: 250; pointer-events: none; overflow: hidden; }
.room-confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: confetti-fall 3s cubic-bezier(.25, .6, .45, 1) forwards; }
.room-confetti i:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }
@keyframes confetti-fall { to { transform: translate(var(--drift), 105vh) rotate(var(--spin)); opacity: .9; } }

/* Host projector view */
.host-hud { position: sticky; top: calc(-1 * var(--rooms-pad)); z-index: 5; margin: 0 calc(-1 * var(--rooms-pad)) 16px; padding: 12px 108px 12px var(--rooms-pad); background: #141e2cf2; border-bottom: 1px solid var(--border); backdrop-filter: blur(6px); }
.host-hud-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; }
.host-hud h3 { font: 1.4rem var(--font-display); color: #f3f8ea; }
.host-hud-top small { color: #9fb0c2; font-size: .75rem; }
.host-stat { text-align: center; }
.host-stat small { display: block; color: #9fb0c2; font-size: .6rem; font-weight: 800; letter-spacing: .12em; }
.host-stat strong { display: block; font: 1.7rem var(--font-display); color: var(--brand); font-variant-numeric: tabular-nums; }
.host-progress, .host-answer-bar { height: 8px; margin-top: 10px; border-radius: 4px; background: #ffffff14; overflow: hidden; }
.host-progress span, .host-answer-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8fba5a, var(--brand)); transition: width .3s ease; }
.host-answer-bar span { background: linear-gradient(90deg, #3b82f6, #4d9bff); }
.host-locked { margin-top: 8px; color: #dce7f0; font-weight: 800; font-size: .95rem; }
.host-board { list-style: none; display: grid; gap: 8px; }
.host-board li { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.host-board li.place-1 { background: linear-gradient(90deg, #4a4020, #1f2b3d 70%); border-color: #e0b64a; }
.host-board li.place-2 { border-color: #a7b6c6; }.host-board li.place-3 { border-color: #c98a55; }
.host-board .rank { width: 40px; text-align: center; font: 1.5rem var(--font-display); color: #cfd9e4; flex-shrink: 0; }
.hb-name { flex: 1; min-width: 0; font: 1.2rem var(--font-display); color: #f1f5f9; overflow-wrap: anywhere; }
.hb-name small { display: block; font: 600 .75rem var(--font-body); color: #9fb0c2; }
.hb-lock { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffffff14; color: #9fb0c2; font-weight: 800; flex-shrink: 0; }
.hb-lock.on { background: var(--good); color: #062a1c; }
.host-board b { font: 1.5rem var(--font-display); color: var(--brand); white-space: nowrap; }
.host-board b small { font: 700 .75rem var(--font-body); color: #b9d99a; }

@media (min-width: 900px) {
  .lobby-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
  .lobby-share { padding: 30px; }
  .match-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .match-side > .mode-board:first-child { margin-top: 0; }
  #room-live .room-question { font-size: 1.7rem; }
  #room-host-form #room-mode-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #room-join-form, .room-intent-tabs { max-width: 560px; margin-inline: auto; }
  .host-hud h3 { font-size: 2rem; }
  .host-stat strong { font-size: 2.6rem; }
  .host-locked { font-size: 1.2rem; }
  .host-board { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 12px; }
  .host-board li { padding: 12px 20px 12px 12px; }
  .host-board .rank { font-size: 2rem; width: 52px; }
  .hb-name { font-size: 1.6rem; }
  .host-board b { font-size: 2.2rem; }
  .finish-card .room-finish { font-size: 1.8rem; }
  .podium-spot { max-width: 220px; }
  .podium-spot.place-1 .podium-block { height: 130px; }.podium-spot.place-2 .podium-block { height: 96px; }.podium-spot.place-3 .podium-block { height: 70px; }
}
@media (min-width: 1200px) { #room-host-form #room-mode-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .room-confetti { display: none; } .ring-fg, .hud-bar span { transition: none; } }
.wizard-nav { flex-wrap: wrap; }
.wizard-alert { flex: 1 0 100%; order: -1; font-weight: 700; font-size: .9rem; line-height: 1.4; }
.wizard-alert:not(:empty) { padding: 10px 12px; border-radius: 12px; background: #512c35; color: #ffe1e4; border: 1px solid #a2505d; }
.wizard-alert:not(:empty)::before { content: ''; display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.24em; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10.3%203.6C11%202.3%2013%202.3%2013.7%203.6L21.4%2018.2C22%2019.5%2021.1%2021%2019.6%2021H4.4C2.9%2021%202%2019.5%202.6%2018.2Z%22%20fill%3D%22%23ffdd00%22%20stroke%3D%22%231d1433%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3Crect%20x%3D%2210.9%22%20y%3D%228.2%22%20width%3D%222.2%22%20height%3D%226.8%22%20rx%3D%221.1%22%20fill%3D%22%231d1433%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217.6%22%20r%3D%221.3%22%20fill%3D%22%231d1433%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; margin-right: .35em; }
.wizard-progress { max-width: 560px; margin-inline: auto; }
.finish-card .finish-leave { display: block; margin-top: 10px; }
@media (max-width: 640px) {
  #room-mode-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--rooms-pad)); padding: 2px var(--rooms-pad) 6px; scrollbar-width: none; }
  #room-mode-filters .chip { flex-shrink: 0; }
}
.solo-hero { display: grid; justify-items: center; margin: 6px 0; animation: podium-rise .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.solo-hero strong { font: 2rem var(--font-display); color: var(--brand); }
@media (min-width: 900px) {
  .lobby-grid.lobby-solo { grid-template-columns: minmax(0, 640px); justify-content: center; }
  .lobby-start { max-width: 640px; margin-inline: auto; padding-inline: 0; }
}

/* Topic search (library sets) in the wizard's question step */
.room-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.topic-library { margin: 6px 0 8px; }
.topic-search { position: relative; display: block; }
.topic-search > span[aria-hidden] { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; pointer-events: none; }
#room-topic-search { padding: 16px 16px 16px 50px; border: 2px solid #4f7a63; border-radius: 16px; background: #122027; font-size: 1.05rem; }
#room-topic-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px #caee9333; }
.topic-results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topic-results-head .room-label { margin: 14px 0 8px; }
.topic-results-head .chip { padding: 6px 12px; font-size: .78rem; }
.library-grid { margin-top: 0; }
.lib-tile small { color: #9fb0c2; font-size: .72rem; font-weight: 700; }
.lib-tile:has(input:checked) small { color: #cfe8b6; }
.choice-tile:has(input:checked)::after { content: '✓'; position: absolute; top: 8px; right: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: .8rem; font-weight: 900; }
.topic-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 18px; border-radius: 16px; border: 2px dashed var(--border); text-align: center; color: #c8d6e2; }
.topic-empty > span { font-size: 2rem; }
.topic-empty .btn { min-width: 0; }
.grade-any { margin: 14px 0; padding: 10px 14px; border-radius: 12px; background: #1f4a3a; color: #c9f7df; font-weight: 700; font-size: .9rem; }

/* Between-rounds top-3 podium (3rd → 2nd → drumroll → 1st + confetti) */
.round-podium { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; padding: 16px; background: #0b121cd9; backdrop-filter: blur(4px); animation: rp-fade .35s ease both; }
.rp-card { width: min(640px, 100%); padding: 22px 18px 18px; border-radius: 22px; background: #172334; border: 1px solid var(--border); text-align: center; box-shadow: 0 24px 60px #0008; }
.rp-card h3 { margin: 4px 0 10px; font: 2rem var(--font-display); color: #f3f8ea; }
.rp-stage { display: flex; justify-content: center; align-items: flex-end; gap: 10px; min-height: 250px; }
.rp-spot { position: relative; display: grid; justify-items: center; flex: 1; max-width: 180px; min-width: 0; }
.rp-who { display: grid; justify-items: center; min-width: 0; max-width: 100%; opacity: 0; transform: translateY(30px) scale(.8); }
.rp-who strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.rp-who > span:not(.room-monster-avatar) { color: var(--brand); font-weight: 800; font-size: .85rem; margin-bottom: 6px; }
.rp-spot .podium-block { transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.rp-spot.place-1 .podium-block { height: 110px; background: linear-gradient(#ffe27a, #e0a92b); }
.rp-spot.place-2 .podium-block { height: 80px; background: linear-gradient(#e6edf5, #a7b6c6); }
.rp-spot.place-3 .podium-block { height: 56px; background: linear-gradient(#f0b27d, #b8733f); }
.rp-spot.is-me strong { color: var(--brand); }
.round-podium.show-3 .place-3 .podium-block, .round-podium.show-2 .place-2 .podium-block, .round-podium.drumroll .place-1 .podium-block, .round-podium.show-1 .place-1 .podium-block { transform: none; }
.round-podium.show-3 .place-3 .rp-who, .round-podium.show-2 .place-2 .rp-who, .round-podium.show-1 .place-1 .rp-who { animation: rp-pop .6s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.rp-mystery { position: absolute; bottom: 120px; font: 3.4rem var(--font-display); color: #ffe27a; opacity: 0; }
.round-podium.drumroll .rp-mystery { opacity: 1; animation: rp-shake .12s linear infinite; }
.rp-drum { height: 1.6em; margin: 10px 0 0; font-weight: 800; color: #ffe27a; opacity: 0; }
.round-podium.drumroll .rp-drum { opacity: 1; animation: rp-shake .12s linear infinite; }
.round-podium.show-1 .rp-card { animation: rp-flash .8s ease; }
.rp-note { margin: 6px 0 0; color: #c5d2df; }
@keyframes rp-fade { from { opacity: 0; } }
@keyframes rp-pop { to { opacity: 1; transform: none; } }
@keyframes rp-shake { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-3px) rotate(-3deg); } 75% { transform: translateX(3px) rotate(3deg); } }
@keyframes rp-flash { 30% { box-shadow: 0 0 0 6px #ffe27a, 0 0 80px #ffe27a99; } }
@media (max-width: 480px) { .rp-stage { gap: 6px; min-height: 220px; } .rp-spot.place-1 .podium-block { height: 90px; } .rp-mystery { bottom: 100px; } .rp-card h3 { font-size: 1.6rem; } }
@media (prefers-reduced-motion: reduce) {
  .round-podium, .round-podium * { animation: none !important; transition: none !important; }
  .round-podium .rp-who { opacity: 0; transform: none; }
  .round-podium.show-3 .place-3 .rp-who, .round-podium.show-2 .place-2 .rp-who, .round-podium.show-1 .place-1 .rp-who { opacity: 1; }
}

/* === Self-paced play (Blooket/Gimkit style) === */
/* Big full-screen ✓ / ✗ between questions */
.answer-flash { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; color: #fff; animation: af-in .22s ease-out; cursor: pointer; }
.answer-flash.is-good { background: radial-gradient(circle at 50% 40%, #3fe0a0, #17905f 70%); }
.answer-flash.is-bad { background: radial-gradient(circle at 50% 40%, #ff7a86, #b8283a 70%); }
.answer-flash .af-icon { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .22); border: 5px solid #fff; font: 4rem/1 var(--font-display); animation: af-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.answer-flash strong { font: 2.6rem/1.1 var(--font-display); text-shadow: 0 4px 0 rgba(0, 0, 0, .2); }
.answer-flash .af-points { font: 2rem var(--font-display); color: #fff6b0; animation: af-pop .5s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.answer-flash small { font-size: 1rem; font-weight: 800; opacity: .9; }
.answer-flash .af-answer { max-width: 560px; padding: 10px 18px; border-radius: 14px; background: rgba(0, 0, 0, .22); font: 1.5rem/1.3 var(--font-display); }
.answer-flash .af-question { max-width: 560px; margin: 4px 0 6px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .14); font-size: 1.05rem; }
.host-hud .host-stat #room-match-timer { font: 1.7rem var(--font-display); color: var(--brand); }
.answer-flash em { margin-top: 10px; font-style: normal; font-size: .85rem; font-weight: 700; opacity: .75; }
@keyframes af-in { from { opacity: 0; } }
@keyframes af-pop { from { transform: scale(.3); opacity: 0; } }

/* Hazard countdowns inside mode banners ("in 5s") */
.mm-tick { font-variant-numeric: tabular-nums; font-weight: 800; }
.hud-streak { color: #ffb86b; font-weight: 800; }

/* Knocked out until the next challenge */
.match-out { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px 0; padding: 26px 18px; border-radius: 20px; background: #2b3446; border: 2px dashed #6d7d96; text-align: center; }
.match-out span { font-size: 3rem; animation: out-spin 2.4s linear infinite; }
.match-out strong { font: 1.5rem var(--font-display); color: #fff; }
.match-out small { color: #c8d3de; line-height: 1.4; }
@keyframes out-spin { to { transform: rotate(360deg); } }
.stage-outcome { font-weight: 800; animation: fb-in .35s cubic-bezier(.34, 1.56, .64, 1); }

/* Leaderboard climb arrows */
.rank-up { display: inline-block; margin-left: 6px; color: var(--good); font-style: normal; font-size: .8rem; animation: rank-up 1s ease-out infinite; }
@keyframes rank-up { 50% { transform: translateY(-3px); } }
.host-board li.climbed { animation: climb-glow 1.2s ease-out; }
@keyframes climb-glow { from { box-shadow: 0 0 0 3px var(--good), 0 0 22px rgba(54, 211, 153, .5); } }

/* Live feed of what's happening in the room */
.live-feed { margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: grid; gap: 4px; }
.live-feed .eyebrow { color: #ffd166; font-size: .72rem; }
.live-feed p { font-size: .82rem; line-height: 1.35; color: #c8d3de; }
.live-feed p.newest { color: #fff; font-weight: 700; animation: fb-in .3s ease-out; }
.host-live { display: grid; gap: 12px; }
@media (min-width: 900px) { .host-live { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); align-items: start; } .host-live .live-feed { margin-top: 0; position: sticky; top: 12px; } }
.finish-tally { text-align: center; font-weight: 800; color: #b9f5d9; margin: -4px 0 10px; }

@media (prefers-reduced-motion: reduce) {
  .answer-flash, .answer-flash .af-icon, .answer-flash .af-points, .match-out span, .rank-up, .host-board li.climbed, .live-feed p.newest, .stage-outcome { animation: none; }
}
.host-hud-top { grid-template-columns: minmax(0, 1fr) repeat(3, auto); }
@media (max-width: 560px) { .host-hud-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .host-hud-top > div:first-child { grid-column: 1 / -1; } .host-stat strong { font-size: 1.3rem; } }
/* Wrong-answer wait */
.wait-card { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px 0; padding: 30px 18px; border-radius: 20px; background: #3a2430; border: 2px solid var(--bad); text-align: center; }
.wait-card span { font-size: 2.6rem; animation: out-spin 2s linear infinite; }
.wait-card strong { font: 1.5rem var(--font-display); color: #fff; }
.wait-card strong b, .answer-flash .af-wait b { font-variant-numeric: tabular-nums; color: #ffd166; }
.wait-card small { color: #ffd1d6; }
.answer-flash .af-wait { font-size: 1.1rem; opacity: 1; }
.answer-flash.is-bad { cursor: default; }
.hud-ring.hurry .ring-fg { stroke: var(--bad); }
.hud-ring.hurry b { color: #ffd1d6; animation: hurry-pulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .wait-card span, .hud-ring.hurry b { animation: none; } }

/* === Game mode badge logos (js/data/mode-logos.js) === */
.mode-logo { display: inline-grid; flex: none; width: 1em; height: 1em; border-radius: 26%; overflow: hidden; vertical-align: middle;
  background: radial-gradient(circle at 28% 18%, #ffffff59, transparent 55%), linear-gradient(150deg, var(--a), var(--b));
  box-shadow: inset 0 -3px 0 #00000038, inset 0 0 0 1.5px #ffffff30, 0 3px 8px #00000059; }
.mode-logo svg { width: 100%; height: 100%; display: block; }
.mode-logo.inline { width: 1.35em; height: 1.35em; margin-right: .35em; vertical-align: -.35em; box-shadow: inset 0 -2px 0 #00000038, 0 2px 5px #00000059; }
.mode-card .mode-icon .mode-logo { width: 52px; height: 52px; transition: width .15s ease, height .15s ease; }
.mode-card:has(input:checked) .mode-icon .mode-logo { width: 72px; height: 72px; }
.mode-card:hover .mode-icon .mode-logo { transform: rotate(-4deg) scale(1.05); }
.lmc-icon .mode-logo { width: 76px; height: 76px; }
.mode-title .mode-logo { width: 46px; height: 46px; }
.mode-board.mm .mode-title > span:has(.mode-logo) { background: none; }
.hud-ring .mode-logo { width: 38px; height: 38px; }
@media (prefers-reduced-motion: reduce) { .mode-card:hover .mode-icon .mode-logo { transform: none; } }

/* Custom question builder: a "Right answer" tick under every answer, so any number of them can be right */
.custom-answer label { margin-top: 0; }
.custom-answer > label:first-child { margin-bottom: 6px; }
.custom-question .custom-right { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-weight: 700; font-size: .82rem; color: var(--text-secondary); cursor: pointer; }
.custom-right input { width: 20px; height: 20px; accent-color: var(--good); flex: none; }
.custom-right:has(input:checked) { color: var(--good); }
.custom-answer:has(.custom-right input:checked) > input { border-color: var(--good); box-shadow: 0 0 0 2px #36d39933; }
.custom-right-hint { margin: 10px 0 0; font-size: .8rem; color: var(--text-secondary); }
.custom-question-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.custom-question-actions .custom-remove { margin-top: 0; }

/* "Connection lost. Reconnecting…" banner while a dropped room connection is being restored */
.reconnect-banner { position: fixed; left: 50%; top: 16px; translate: -50% 0; z-index: 10000; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 999px; background: #3a2a10; border: 2px solid #f7b733; color: #fff3d6; font-weight: 700; box-shadow: 0 10px 30px #0008; }
.reconnect-banner strong { color: #f7b733; }
.reconnect-spinner { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 3px solid #f7b73355; border-top-color: #f7b733; animation: reconnect-spin .8s linear infinite; }
@keyframes reconnect-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .reconnect-spinner { animation: none; } }

/* Premium-only room modes */
.mode-premium { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: linear-gradient(135deg, #ffd166, #f59e0b); color: #3b2300; font-size: .56rem; letter-spacing: .08em; vertical-align: 1px; }

/* === Mystery chests (Blooket Gold Quest style): pick 1 of 3 after every right answer === */
.chest-stage { margin: 6px 0 14px; padding: 18px 14px 16px; border-radius: 22px; text-align: center; background: radial-gradient(circle at 50% 0, #6d3fd0 0, #3a1f78 60%, #2a1658 100%); border: 3px solid #a98bff; box-shadow: 0 6px 0 #1a0d3a, 0 14px 30px #0006; }
#room-live.enter .chest-stage { animation: fb-in .3s cubic-bezier(.34, 1.56, .64, 1); }
.chest-stage .eyebrow { color: #b9f5d9; }
.chest-title { margin: 4px 0 12px; font: 2rem/1.1 var(--font-display); color: #fff; text-shadow: 0 3px 0 #0005; }
.chest-stage h4 { margin: 14px 0 10px; font: 1.2rem var(--font-display); color: #ffe27a; }
.chest-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.chest-card { position: relative; display: grid; place-items: center; gap: 4px; min-height: 150px; padding: 14px 6px; border-radius: 18px; border: 3px solid #fff; border-bottom-width: 8px; background: linear-gradient(180deg, #ffd166, #f59e0b); color: #4a2a00; font: inherit; cursor: pointer; box-shadow: 0 8px 18px #0006; animation: chest-bob 1.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .25s); transition: transform .12s ease, filter .12s ease; }
#room-live.enter .chest-card { animation: chest-in .45s cubic-bezier(.34, 1.56, .64, 1) both, chest-bob 1.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .09s), calc(.5s + var(--i, 0) * .25s); }
.chest-card:nth-child(2) { background: linear-gradient(180deg, #7fd6ff, #3a8dff); color: #0a2350; }
.chest-card:nth-child(3) { background: linear-gradient(180deg, #ff9ab0, #ff5d7a); color: #4d0a1c; }
.chest-card .chest-box { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 4px 0 #0003); }
.chest-card > b { font: 1.8rem var(--font-display); }
.chest-card:not(:disabled):hover { transform: translateY(-6px) rotate(-2deg) scale(1.04); filter: brightness(1.08); }
.chest-card:not(:disabled):active { transform: translateY(3px) scale(.97); border-bottom-width: 4px; }
.chest-card:disabled { cursor: default; filter: saturate(.5) brightness(.75); animation: none; }
.chest-card.is-opening { filter: none; animation: chest-shake .4s ease-in-out infinite; }
.chest-row.is-small .chest-card { min-height: 0; padding: 8px 4px; border-bottom-width: 4px; filter: saturate(.4) brightness(.7); animation: none; cursor: default; }
.chest-row.is-small .chest-card .chest-box { font-size: 1.6rem; }
.chest-row.is-small .chest-card > b { font: 800 .74rem/1.25 var(--font-body); }
.chest-row.is-small .chest-card.is-picked { filter: none; transform: scale(1.06); box-shadow: 0 0 0 4px #ffe27a, 0 8px 18px #0006; }
.chest-purse { margin: 12px 0 0; color: #e4dcff; font-weight: 700; }
.chest-purse b { color: #ffe27a; }
.chest-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.chest-target { display: grid; justify-items: center; gap: 2px; padding: 10px 8px; border-radius: 16px; border: 2px solid #fff; border-bottom-width: 6px; background: #fff; color: #2a1658; font: inherit; cursor: pointer; transition: transform .12s ease; }
#room-live.enter .chest-target { animation: crew-pop .35s cubic-bezier(.34, 1.56, .64, 1) both; }
.chest-target strong { font: 1rem var(--font-display); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chest-target small { font-weight: 800; color: #6d3fd0; }
.chest-target:not(:disabled):hover { transform: translateY(-4px) scale(1.03); }
.chest-target:disabled { opacity: .55; cursor: default; }
.chest-target.picked:disabled { opacity: 1; box-shadow: 0 0 0 4px #ffe27a; }
@keyframes chest-in { from { opacity: 0; transform: translateY(40px) scale(.5) rotate(-8deg); } }
@keyframes chest-bob { 50% { transform: translateY(-5px); } }
@keyframes chest-shake { 25% { transform: rotate(-6deg) scale(1.05); } 75% { transform: rotate(6deg) scale(1.05); } }

/* The full-screen reveal of what was inside */
.chest-reveal { position: fixed; inset: 0; z-index: 310; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; color: #fff; background: radial-gradient(circle at 50% 40%, #7a4ee0, #2a1658 72%); animation: af-in .2s ease-out; cursor: pointer; }
.chest-reveal.tone-bad { background: radial-gradient(circle at 50% 40%, #b8445a, #3a1220 72%); }
.chest-reveal.tone-meh { background: radial-gradient(circle at 50% 40%, #56607a, #1d2433 72%); }
.chest-reveal.is-big { background: radial-gradient(circle at 50% 40%, #ffd166, #e07b00 45%, #5a2a00 85%); }
.cr-card { position: relative; display: grid; justify-items: center; gap: 6px; min-width: min(320px, 100%); max-width: 460px; padding: 26px 22px 22px; border-radius: 26px; background: #fff; color: #2a1658; border-bottom: 8px solid #00000033; box-shadow: 0 18px 40px #0007; animation: cr-flip .55s cubic-bezier(.34, 1.56, .64, 1); }
.cr-card .cr-box { position: absolute; top: -34px; font-size: 3rem; animation: cr-lid .6s ease-out both; }
.cr-card .cr-icon { font-size: 4.2rem; line-height: 1; animation: af-pop .5s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
.cr-card strong { font: 2.3rem/1.1 var(--font-display); color: #6d3fd0; }
.chest-reveal.tone-bad .cr-card strong { color: #c42a46; }
.chest-reveal.tone-meh .cr-card strong { color: #56607a; }
.chest-reveal.is-big .cr-card strong { color: #e07b00; font-size: 2.8rem; }
.cr-card p { margin: 0; font-weight: 800; font-size: 1.05rem; color: #3b3355; }
.cr-others { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: 460px; animation: fb-in .3s ease-out .45s both; }
.cr-others small { width: 100%; font-weight: 800; opacity: .8; }
.cr-others span { padding: 6px 12px; border-radius: 999px; background: #ffffff26; font-weight: 800; font-size: .85rem; }
@keyframes cr-flip { from { opacity: 0; transform: perspective(600px) rotateY(90deg) scale(.6); } }
@keyframes cr-lid { from { transform: translateY(40px) scale(.6); opacity: 0; } 60% { transform: translateY(-14px) rotate(-12deg); opacity: 1; } }

/* Another player's chest hit you: "Maya stole 6 candy from you!" */
.chest-alert { position: fixed; left: 50%; top: 18px; z-index: 320; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 14px 20px; border-radius: 20px; translate: -50% 0; background: #fff; color: #2a1658; border: 3px solid #6d3fd0; border-bottom-width: 7px; box-shadow: 0 14px 34px #0008; cursor: pointer; animation: alert-drop .5s cubic-bezier(.34, 1.56, .64, 1); }
.chest-alert span { font-size: 2.2rem; line-height: 1; }
.chest-alert strong { font: 1.15rem/1.25 var(--font-display); }
.chest-alert.tone-bad { border-color: #ff5d6c; animation: alert-drop .5s cubic-bezier(.34, 1.56, .64, 1), alert-shake .4s ease-in-out .5s 2; }
.chest-alert.tone-bad strong { color: #b8283a; }
.chest-alert.tone-good { border-color: #2fc486; }
@keyframes alert-drop { from { opacity: 0; transform: translateY(-80px) scale(.7); } }
@keyframes alert-shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* Frozen by a rival's chest */
.wait-card.is-frozen { background: linear-gradient(180deg, #d9f3ff, #8fd3ff); border-color: #fff; color: #0a2a4a; box-shadow: inset 0 0 0 4px #ffffff99, 0 0 30px #8fd3ff80; }
.wait-card.is-frozen span { animation: frost-spin 3s linear infinite; }
.wait-card.is-frozen strong { color: #0a3a6a; }
.wait-card.is-frozen small { color: #164f80; font-weight: 800; }
.wait-card.is-frozen strong b, .wait-card.is-frozen small b { color: #0a3a6a; }
@keyframes frost-spin { to { transform: rotate(360deg); } }

/* Blooket-style bounce for the in-match question and move cards */
#room-live .match-main > .room-question { padding: 16px 18px; border-radius: 18px; background: #fff; color: #2a1658; text-align: center; border-bottom: 6px solid #0003; box-shadow: 0 10px 24px #0005; }
#room-live.enter .match-main > .room-question { animation: q-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
#room-live.enter .room-answers .room-answer, #room-live.enter .mm-actions .action-grid .mm-action { animation: crew-pop .35s cubic-bezier(.34, 1.56, .64, 1) both; }
#room-live.enter .room-answers .room-answer:nth-child(2), #room-live.enter .action-grid .mm-action:nth-child(2) { animation-delay: .05s; }
#room-live.enter .room-answers .room-answer:nth-child(3), #room-live.enter .action-grid .mm-action:nth-child(3) { animation-delay: .1s; }
#room-live.enter .room-answers .room-answer:nth-child(4), #room-live.enter .action-grid .mm-action:nth-child(4) { animation-delay: .15s; }
.mm-actions .action-grid .mm-action:not(:disabled):hover { transform: translateY(-4px) scale(1.02); }
.match-hud.phase-chest .hud-main strong { color: #c9b6ff; }
@keyframes q-pop { from { opacity: 0; transform: scale(.85) translateY(-10px); } }

@media (max-width: 420px) {
  .chest-row { gap: 8px; }
  .chest-card { min-height: 116px; }
  .chest-card .chest-box { font-size: 2.6rem; }
  .chest-title { font-size: 1.6rem; }
  .cr-card strong { font-size: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  #room-live.enter .chest-stage, .chest-card, #room-live.enter .chest-card, .chest-card.is-opening, #room-live.enter .chest-target, .chest-reveal, .cr-card, .cr-card .cr-box, .cr-card .cr-icon, .cr-others, .chest-alert, .chest-alert.tone-bad, .wait-card.is-frozen span,
  #room-live.enter .match-main > .room-question, #room-live.enter .room-answers .room-answer, #room-live.enter .mm-actions .action-grid .mm-action { animation: none; }
}

/* Host step 2: load a teacher's private question set by code. */
.set-code { margin: 4px 0 18px; padding: 14px; border: 1px dashed #4b6a60; border-radius: 14px; background: #16222c; }
.set-code-row { display: flex; gap: 8px; }
.set-code-row input { flex: 1; min-width: 0; padding: 12px; border: 2px solid #4b6a60; border-radius: 10px; background: #122027; color: #f1f8e6; font: 700 1rem var(--font-body); }
.set-code-row input:focus { outline: none; border-color: #caee93; }
.set-code-row .btn { flex: none; padding: 12px 16px; }
.set-code-status:empty { display: none; }
.set-code-status { margin: 8px 0 0; font-size: .85rem; color: #c8d7cf; }
.set-code-status.found { color: #caee93; font-weight: 800; }

/* Wrong-answer explanation: stays up until the player taps "Got it". */
.answer-flash .af-why { max-width: 34rem; margin: 14px auto 0; padding: 12px 14px; border-radius: 12px; background: #0005; color: #f3f6ee; font-size: 1rem; line-height: 1.5; text-align: left; }
.answer-flash .af-why b { color: #ffd76a; }
.answer-flash .af-continue { margin-top: 16px; min-width: 200px; min-height: 52px; font-size: 1.1rem; pointer-events: auto; }
.answer-flash .af-continue:disabled { opacity: .6; }

/* End game: owner-only, two taps. */
.room-leave-row .room-end { margin-right: 12px; }
.room-leave-row .room-end.confirm { background: #f87171; color: #2a0a0a; }

/* Results: right / wrong / percent. */
.finish-tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
.finish-tally .ft-stat { padding: 10px 6px; border-radius: 12px; background: #0004; text-align: center; }
.finish-tally .ft-stat b { display: block; font: 1.7rem/1.1 var(--font-display); }
.finish-tally .ft-stat small { display: block; margin-top: 2px; font-size: .78rem; color: #c8d7cf; }
.finish-tally .ft-right b { color: #7ee2a8; }
.finish-tally .ft-wrong b { color: #ff9b9b; }
.finish-tally .ft-pct b { color: #ffd76a; }
.finish-tally .ft-note { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; font-size: .9rem; color: #e8f1dc; }

/* Results: the questions you missed, to study. */
.review { margin: 14px 0 6px; text-align: left; border-radius: 14px; background: #0003; border: 1px solid #ffffff1f; }
.review summary { cursor: pointer; padding: 12px 14px; font: 1.05rem var(--font-display); color: #f2f5e9; list-style-position: inside; }
.review summary span { float: right; font: 700 .8rem var(--font-body); color: #c8d7cf; margin-top: 3px; }
.review-list { margin: 0; padding: 0 12px 12px 34px; display: grid; gap: 10px; }
.review-item { padding: 10px 12px; border-radius: 10px; background: #0004; }
.review-item p { margin: 0; line-height: 1.45; }
.review-q { font-weight: 800; color: #f3f6ee; }
.review-times { font-size: .75rem; color: #ff9b9b; font-weight: 800; }
.review-answer { margin-top: 4px !important; color: #7ee2a8; font-weight: 700; }
.review-picked { font-size: .85rem; color: #ffb3b3; }
.review-why { margin-top: 6px !important; font-size: .9rem; color: #e8f1dc; }
.review-why b { color: #ffd76a; }

/* A wrong answer with a long explanation can be taller than a phone screen: let the card scroll. */
.answer-flash { overflow-y: auto; overscroll-behavior: contain; justify-content: safe center; }

/* Lobby warm-up (rooms.js warmupCard): practice questions on the room's topic and cheers while you wait. */
.lobby-warmup { margin: 0 0 16px; padding: 14px; border-radius: 20px; background: linear-gradient(160deg, #22344d, #182536); border: 1px solid var(--border); }
.wu-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wu-head h3 { font: 1.25rem var(--font-display); color: #f3f8ea; margin: 0; }
.wu-head span { padding: 3px 10px; border-radius: 999px; background: #0f1b26; color: var(--brand); font-weight: 800; font-size: .8rem; white-space: nowrap; }
.wu-note { margin: 4px 0 10px; color: #9fb7c9; font-size: .8rem; }
.wu-result { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; font-weight: 700; font-size: .9rem; animation: crew-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
.wu-result.is-good { background: #2f5a3a; color: #d8f7c4; }
.wu-result.is-bad { background: #5a2f3a; color: #ffd9de; }
.wu-why { display: block; margin-top: 6px; font-weight: 500; line-height: 1.45; color: #f3e6e8; }
.wu-why b { color: #ffd76a; }
.wu-question { font: 800 1.1rem/1.45 var(--font-body); color: #fff; margin: 0 0 12px; overflow-wrap: anywhere; }
.lobby-warmup .room-answer { padding: 14px 10px; overflow-wrap: anywhere; }
.lobby-warmup .room-answer.picked { outline: 3px solid var(--brand); opacity: 1; }
.wu-cheers { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.wu-cheers small { width: 100%; text-align: center; color: #9fb7c9; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wu-cheer { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); font-size: 1.35rem; cursor: pointer; transition: transform .1s; }
.wu-cheer:active:not(:disabled) { transform: scale(.88); }
.wu-cheer:disabled { opacity: .45; cursor: default; }
.crew-grid li { position: relative; }
.crew-warm { margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: #0f1b26; color: #bfe9ff; font-size: .7rem; font-weight: 800; }
.crew-cheer { position: absolute; top: -6px; right: 4px; z-index: 2; padding: 2px 6px; border-radius: 12px 12px 12px 3px; background: #fff; font-size: 1.3rem; line-height: 1.2; box-shadow: 0 3px 0 #0005; pointer-events: none; animation: crew-cheer 2.5s ease-out forwards; }
@keyframes crew-cheer { 0% { opacity: 0; transform: scale(.4) translateY(8px); } 12% { opacity: 1; transform: scale(1.15); } 20%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .crew-cheer { animation-name: crew-cheer-fade; } @keyframes crew-cheer-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } }