/* Isolated room UI: no backdrop filters, looping particles or frame callbacks. */
#start-screen .menu-cta { display: grid !important; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
#start-screen .menu-cta #start-button { min-width: 0; width: 100%; }
#start-screen .menu-cta #start-button .arcade-play-label { font-size: clamp(23px, 5.6vw, 34px); }
#start-screen .menu-cta .form-note { grid-column: 1 / -1; }
#classroom-open { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 7px 5px; border: 1px solid #a3a5ff; border-radius: 16px; background: linear-gradient(145deg, #38386d, #171c3d); color: #fff; font: 800 16px Assistant, Arial, sans-serif; cursor: pointer; box-shadow: inset 0 1px #b8baff66, 0 3px 0 #080c21; }
#classroom-open small { color: #e1dbff; font-size: 12px; }
#classroom-open .ui-icon { width: 23px; height: 23px; }
.save-status-notice { position: fixed; z-index: 60000; inset: auto 12px 12px; max-width: 560px; margin: 0 auto; padding: 12px 16px; border: 1px solid #ffd86a; border-radius: 12px; background: #302411; color: #fff3cc; font: 700 16px Assistant, Arial, sans-serif; text-align: center; }
.save-status-notice[hidden], #classroom-dialog[hidden], #classroom-clock[hidden], #classroom-dialog [hidden] { display: none !important; }
#classroom-dialog { position: fixed; z-index: 50000; inset: 0; overflow: auto; overscroll-behavior: contain; background: #060c19; color: #f3f7ff; font: 600 17px/1.5 Assistant, Arial, sans-serif; padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); box-sizing: border-box; direction: rtl; touch-action: pan-y; }
#classroom-dialog *, #classroom-dialog *::before, #classroom-dialog *::after { box-sizing: border-box; }
.classroom-wrap { width: min(100%, 720px); margin: 0 auto; }
.classroom-header { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #293957; }
.classroom-header .ui-icon { width: 34px; height: 34px; color: #ffda69; }
.classroom-header h1 { margin: 0; font: 800 26px/1.15 Assistant, Arial, sans-serif; }
.classroom-eyebrow { margin: 0 0 4px; font-size: 12px; letter-spacing: .08em; color: #acb9e7; }
.classroom-header button { margin-inline-start: auto; }
#classroom-dialog button { font: inherit; cursor: pointer; min-height: 48px; border: 1px solid #546b94; border-radius: 12px; padding: 10px 16px; background: #182541; color: #fff; }
#classroom-dialog button:disabled { opacity: .5; cursor: default; }
#classroom-dialog button:focus-visible, #classroom-dialog input:focus-visible, #classroom-dialog select:focus-visible, #classroom-open:focus-visible { outline: 3px solid #8aedff; outline-offset: 3px; }
#classroom-dialog .classroom-primary { background: linear-gradient(#ffe799, #efb938); color: #271a02; border-color: #ffe8a0; font-weight: 800; }
#classroom-dialog .classroom-danger { color: #ffc9d0; border-color: #9d5264; }
.classroom-intro { margin: 24px 0; }
.classroom-intro h2 { font-size: clamp(26px, 6vw, 34px); line-height: 1.2; margin: 0 0 10px; }
.classroom-muted { color: #bfcee6; font-size: 15px; }
.classroom-tabs { display: flex; gap: 8px; margin: 18px 0; }
.classroom-tabs button { flex: 1; }
#classroom-dialog .classroom-tabs button[aria-pressed="true"] { border-color: #9da7ff; background: #323e70; }
.classroom-card { margin: 16px 0; padding: 20px; border: 1px solid #354563; border-radius: 18px; background: #101b30; }
.classroom-card h2 { margin: 0 0 12px; font-size: 23px; }
.classroom-fields { display: grid; gap: 16px; }
.classroom-fields label { display: grid; gap: 6px; }
#classroom-dialog input, #classroom-dialog select { width: 100%; min-height: 50px; border-radius: 10px; border: 1px solid #66799b; background: #071122; color: #fff; padding: 10px 12px; font: inherit; }
#classroom-dialog input::placeholder { color: #a2b0c8; }
#classroom-join-code { direction: ltr; text-align: center; font: 700 23px monospace; letter-spacing: .12em; text-transform: uppercase; }
.classroom-rules { margin: 12px 0; padding-inline-start: 20px; font-size: 15px; color: #ccd9ed; }
.classroom-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.classroom-actions > button { flex: 1; }
#classroom-status { min-height: 24px; font-size: 15px; color: #c5f6ff; }
#classroom-status[data-error="true"] { color: #ffbdc6; }
.classroom-code { display: block; direction: ltr; text-align: center; font: 800 clamp(28px, 7vw, 44px)/1.5 monospace; letter-spacing: .14em; color: #ffe59d; padding: 12px 0; user-select: all; }
.classroom-status-line { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.classroom-status-line strong { color: #ffdf8c; }
.classroom-roster { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.classroom-roster li { display: flex; gap: 8px; align-items: center; padding: 10px; background: #17253e; border-radius: 10px; }
.classroom-roster img { width: 34px; height: 34px; object-fit: contain; }
.classroom-roster .classroom-member-state { margin-inline-start: auto; color: #aee7d0; font-size: 13px; }
#classroom-dialog .classroom-roster button { padding: 7px 10px; font-size: 13px; }
.classroom-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.classroom-stats div { background: #1a2944; border-radius: 12px; padding: 12px 6px; text-align: center; }
.classroom-stats strong { display: block; color: #ffe198; font-size: 28px; }
.classroom-stats span { color: #c4d3ea; font-size: 13px; }
.classroom-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 28px 0 12px; }
.classroom-podium > div { flex: 1; max-width: 160px; min-width: 0; text-align: center; padding: 12px 5px; border-radius: 16px 16px 8px 8px; border: 1px solid #627492; background: #25324c; }
.classroom-podium > div:first-child { order: 2; padding-top: 28px; background: #47391e; border-color: #dcb854; }
.classroom-podium > div:nth-child(2) { order: 1; }
.classroom-podium > div:nth-child(3) { order: 3; background: #392b2c; }
.classroom-podium img { width: min(64px, 100%); height: 64px; object-fit: contain; }
.classroom-podium strong, .classroom-podium span { display: block; overflow-wrap: anywhere; }
.classroom-podium em { display: block; font: 800 28px Assistant, Arial, sans-serif; color: #ffe29a; }
.classroom-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 16px; }
.classroom-table caption { text-align: right; font-weight: 800; padding: 8px 0; }
.classroom-table th, .classroom-table td { text-align: start; padding: 10px 6px; border-bottom: 1px solid #354461; }
.classroom-table th { color: #c2cff1; }
.classroom-table td:nth-child(2) { overflow-wrap: anywhere; max-width: 170px; }
.classroom-table tr[data-me="true"] { background: #273656; }
#classroom-clock { position: fixed; z-index: 900; inset: auto 12px max(12px, env(safe-area-inset-bottom)) auto; padding: 7px 12px; border: 1px solid #7e90ca; border-radius: 12px; background: #0d1830; color: #ffdf8f; font: 800 15px Assistant, Arial, sans-serif; pointer-events: none; }
@media (min-width: 700px) { .classroom-fields { grid-template-columns: 1fr 1fr; } .classroom-fields > :first-child { grid-column: 1 / -1; } }
@media (max-width: 370px) { #classroom-dialog { padding-inline: 10px; } .classroom-card { padding: 14px; } #classroom-open { font-size: 14px; } .classroom-header h1 { font-size: 23px; } }