:root {
  color-scheme: dark;
  --game-bg: #07111f;
  --game-bg-soft: #0a1728;
  --game-card: #0d1b2f;
  --game-card-2: #132640;
  --game-border: #1d3a5f;
  --game-blue: #4d8dff;
  --game-cyan: #6ad8ff;
  --game-text: #e8f1ff;
  --game-muted: #8ea6c4;
  --game-faint: #5e7899;
  --game-danger: #ff9cae;
  --game-shadow: 0 24px 80px rgba(0, 0, 0, .28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--game-bg); overscroll-behavior: none; }
body.game-body { min-height: 100vh; margin: 0; color: var(--game-text); background: radial-gradient(circle at 9% 0%, rgba(57, 126, 215, .19), transparent 30%), radial-gradient(circle at 92% 16%, rgba(50, 197, 235, .11), transparent 24%), linear-gradient(145deg, #07111f 0%, #0a1728 58%, #07111f 100%); overscroll-behavior: none; }
body.game-body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .45; background-image: radial-gradient(circle at 18% 23%, #9fdcff 0 1px, transparent 1.5px), radial-gradient(circle at 78% 38%, #6ad8ff 0 1px, transparent 1.5px), radial-gradient(circle at 55% 8%, #d8efff 0 1px, transparent 1.5px), radial-gradient(circle at 90% 83%, #9fdcff 0 1px, transparent 1.5px); background-size: 240px 210px, 310px 280px, 420px 360px, 520px 440px; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .48; }

.game-app { position: relative; z-index: 1; width: min(1120px, 100%); min-height: 100vh; margin: 0 auto; padding: 18px 18px 104px; background-color: transparent; }
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 56px; }
.game-brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; }
.game-brand__mark { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid rgba(106, 216, 255, .55); border-radius: 13px; color: var(--game-cyan); background: linear-gradient(145deg, rgba(77, 141, 255, .30), rgba(106, 216, 255, .08)); box-shadow: 0 0 28px rgba(77, 141, 255, .24); font-size: 21px; font-weight: 900; letter-spacing: -.08em; }
.game-brand strong { display: block; letter-spacing: .02em; font-size: 15px; }
.game-brand small { display: block; margin-top: 2px; color: var(--game-muted); font-size: 10px; letter-spacing: .1em; }
.game-desktop-nav { display: none; align-items: center; gap: 4px; }
.game-nav__item { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid transparent; border-radius: 11px; color: var(--game-muted); font-size: 13px; transition: .2s ease; }
.game-nav__item:hover, .game-nav__item.is-active { border-color: var(--game-border); color: var(--game-text); background: rgba(19, 38, 64, .72); }
.game-nav__icon { color: var(--game-cyan); font-size: 15px; }
.game-user-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--game-muted); font-size: 12px; }
.game-manager-link { padding: 6px 8px; border: 1px solid rgba(106,216,255,.26); border-radius: 999px; color: var(--game-cyan); font-size: 10px; }
.game-manager-link:hover { border-color: rgba(106,216,255,.58); background: rgba(19,38,64,.72); }
.game-user-pill > a { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 0 5px 5px; color: #c3cfdf; font-size: 11px; line-height: 1; white-space: nowrap; }
.game-user-pill > a:hover { color: var(--game-cyan); }
.game-avatar { display: grid; place-items: center; border: 1px solid rgba(106, 216, 255, .48); color: var(--game-cyan); background: linear-gradient(145deg, #19375b, #0b1c33); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 9px 24px rgba(0,0,0,.20); }
.game-avatar--small { width: 29px; height: 29px; border-radius: 10px; font-size: 12px; }
.game-avatar--large { width: 76px; height: 76px; border-radius: 25px; font-size: 30px; }
.game-avatar-img { display: block; object-fit: cover; overflow: hidden; }

.game-main { padding: 27px 0 30px; background-color: transparent; }
.game-eyebrow { margin: 0 0 9px; color: var(--game-cyan); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.game-hero { display: grid; gap: 24px; min-height: 340px; padding: 29px 25px; border: 1px solid var(--game-border); border-radius: 28px; background: linear-gradient(135deg, rgba(19, 38, 64, .94), rgba(13, 27, 47, .90)); box-shadow: var(--game-shadow); overflow: hidden; }
.game-hero__copy { max-width: 620px; }
.game-hero h1, .game-page-heading h1, .game-profile-hero h1 { margin: 0; color: var(--game-text); font-size: clamp(31px, 8vw, 61px); line-height: 1.08; letter-spacing: -.045em; }
.game-hero p:not(.game-eyebrow), .game-page-heading p:not(.game-eyebrow) { max-width: 590px; margin: 17px 0 0; color: var(--game-muted); font-size: 14px; line-height: 1.85; }
.game-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.game-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 0 17px; border: 1px solid transparent; border-radius: 12px; color: var(--game-text); font-weight: 750; font-size: 13px; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.game-button:hover:not(:disabled) { transform: translateY(-2px); }
.game-button--primary { border-color: rgba(106, 216, 255, .35); background: linear-gradient(120deg, var(--game-blue), #3b72d9); box-shadow: 0 10px 28px rgba(45, 111, 230, .27); }
.game-button--ghost { border-color: var(--game-border); background: rgba(13, 27, 47, .74); color: var(--game-cyan); }
.game-button--small { min-height: 38px; padding: 0 13px; border-radius: 10px; font-size: 12px; }
.game-hero__signal { position: relative; display: grid; width: min(240px, 70vw); height: 170px; margin: 0 auto; place-items: center; color: var(--game-cyan); }
.signal-ring { position: absolute; display: block; border: 1px solid rgba(106, 216, 255, .42); border-radius: 50%; transform: rotate(-18deg) skewX(-10deg); }
.signal-ring--outer { width: 154px; height: 112px; box-shadow: 0 0 45px rgba(77, 141, 255, .18); }
.signal-ring--inner { width: 101px; height: 75px; border-color: rgba(77, 141, 255, .50); }
.signal-seven { position: relative; z-index: 1; color: var(--game-cyan); font-size: 58px; font-weight: 900; letter-spacing: -.13em; text-shadow: 0 0 30px rgba(106, 216, 255, .85); }
.game-hero__signal small { position: absolute; bottom: 4px; color: var(--game-faint); font-size: 9px; letter-spacing: .3em; }

.game-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin: 37px 2px 15px; }
.game-section-heading--compact { margin-top: 42px; }
.game-section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.game-section-note { color: var(--game-faint); font-size: 11px; }
.game-action-grid, .game-dashboard-grid, .game-room-layout, .game-profile-grid { display: grid; gap: 12px; }
.game-panel { padding: 21px; border: 1px solid var(--game-border); border-radius: 19px; background: linear-gradient(145deg, rgba(13, 27, 47, .96), rgba(15, 31, 53, .90)); box-shadow: 0 13px 35px rgba(0,0,0,.13); }
.game-panel--accent { background: radial-gradient(circle at 100% 0%, rgba(77, 141, 255, .20), transparent 40%), linear-gradient(145deg, #102746, #0d1b2f); }
.game-panel--quiet { background: rgba(13, 27, 47, .67); }
.game-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.game-index { color: var(--game-cyan); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.game-status { padding: 5px 8px; border: 1px solid rgba(106, 216, 255, .2); border-radius: 999px; color: var(--game-faint); font-size: 10px; }
.game-status--live { border-color: rgba(106, 216, 255, .45); color: var(--game-cyan); }
.game-panel h2, .game-panel h3 { margin: 18px 0 8px; font-size: 20px; letter-spacing: -.025em; }
.game-panel h3 { font-size: 18px; }
.game-panel p { margin: 0; color: var(--game-muted); font-size: 13px; line-height: 1.8; }
.game-text-link { display: inline-flex; gap: 8px; margin-top: 19px; color: var(--game-cyan); font-size: 12px; font-weight: 750; }
.game-text-link span { transition: transform .2s ease; }
.game-text-link:hover span { transform: translateX(3px); }
.game-join-form { display: flex; gap: 8px; margin-top: 17px; }
.game-join-form input { min-width: 0; flex: 1; }
.game-panel__hint { margin-top: 13px !important; color: var(--game-faint) !important; font-size: 11px !important; }
.game-panel__icon { color: var(--game-cyan); font-size: 23px; }
.game-page-heading { margin: 14px 2px 26px; }
.game-page-heading--with-action { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.game-filter-bar { display: grid; gap: 10px; padding: 15px; border: 1px solid var(--game-border); border-radius: 18px; background: rgba(13, 27, 47, .78); }
.game-filter-bar label, .game-stack-form label, .game-form label { display: grid; gap: 7px; color: var(--game-muted); font-size: 12px; font-weight: 700; }
.game-filter-bar select, .game-stack-form input, .game-join-form input, .game-form input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #284c75; border-radius: 10px; outline: none; color: var(--game-text); background: #09192d; }
.game-filter-bar select:focus, .game-stack-form input:focus, .game-join-form input:focus, .game-form input:focus { border-color: var(--game-cyan); box-shadow: 0 0 0 3px rgba(106,216,255,.12); }
.game-empty-state { display: grid; min-height: 350px; margin-top: 14px; padding: 37px 23px; place-items: center; align-content: center; text-align: center; border: 1px dashed #2a527d; border-radius: 22px; background: radial-gradient(circle at 50% 0, rgba(77, 141, 255, .13), transparent 50%), rgba(13, 27, 47, .66); }
.game-empty-state h2 { margin: 0; font-size: 25px; letter-spacing: -.035em; }
.game-empty-state > p:not(.game-eyebrow) { max-width: 540px; margin: 13px 0 20px; color: var(--game-muted); font-size: 13px; line-height: 1.85; }
.empty-orbit { position: relative; display: grid; width: 100px; height: 100px; margin-bottom: 19px; place-items: center; color: var(--game-cyan); font-size: 24px; }
.empty-orbit i { position: absolute; width: 75px; height: 44px; border: 1px solid rgba(106, 216, 255, .45); border-radius: 50%; transform: rotate(25deg); }
.empty-orbit b { position: absolute; top: 3px; right: 4px; color: var(--game-blue); font-weight: 400; }
.game-room-layout { margin-bottom: 13px; }
.game-stack-form { display: grid; gap: 11px; margin-top: 17px; }
.game-history-panel { margin-top: 13px; }
.game-history-panel h2 { margin: 4px 0 0; }
.game-empty-inline { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 16px; border: 1px dashed #284c75; border-radius: 13px; }
.game-empty-inline > span { color: var(--game-cyan); font-size: 23px; }
.game-empty-inline p { font-size: 12px; }
.game-profile-hero { display: flex; align-items: center; gap: 17px; padding: 20px; border: 1px solid var(--game-border); border-radius: 21px; background: linear-gradient(135deg, rgba(19,38,64,.95), rgba(13,27,47,.85)); }
.game-profile-hero h1 { font-size: clamp(29px, 8vw, 42px); }
.game-profile-username { margin: 7px 0 0; color: var(--game-muted); font-size: 13px; }
.game-detail-list { display: grid; gap: 0; margin: 18px 0 0; }
.game-detail-list div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(29,58,95,.75); }
.game-detail-list dt { color: var(--game-muted); font-size: 12px; }
.game-detail-list dd { margin: 0; color: var(--game-text); font-size: 12px; text-align: right; }
.game-panel__hint--large { min-height: 94px; }
.game-logout-button { display: inline-flex; margin: 22px 2px 0; color: var(--game-danger); font-size: 12px; }
.game-lobby-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; }
.game-lobby-stats > div { display: grid; gap: 3px; padding: 13px 12px; border: 1px solid rgba(29,58,95,.9); border-radius: 15px; background: rgba(13,27,47,.7); }
.game-lobby-stats strong { color: var(--game-cyan); font-size: 21px; line-height: 1; }
.game-lobby-stats span { color: var(--game-faint); font-size: 10px; }
.game-avatar-form { display: grid; gap: 12px; margin-top: 18px; }
.game-avatar-form label { display: grid; gap: 8px; color: var(--game-muted); font-size: 12px; font-weight: 700; }
.game-avatar-form input[type="file"] { width: 100%; padding: 9px; border: 1px dashed #284c75; border-radius: 10px; color: var(--game-muted); background: #09192d; font-size: 11px; }
.game-avatar-form input[type="file"]::file-selector-button { margin-right: 8px; padding: 7px 9px; border: 1px solid rgba(106,216,255,.3); border-radius: 8px; color: var(--game-cyan); background: rgba(19,38,64,.8); cursor: pointer; }
.game-avatar-form .game-button { width: 100%; }
.game-profile-nickname-editor { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(157, 141, 201, .18); }
.game-profile-nickname-editor .game-panel__top { margin-bottom: 8px; }
.game-profile-nickname-editor h3 { margin: 0; color: var(--game-text); font-size: 15px; }
.game-profile-nickname-form { margin-top: 0; }
.game-profile-nickname-form label > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.game-profile-nickname-form label > span small { color: var(--game-faint); font-size: 10px; font-weight: 500; }
.game-profile-nickname-form .game-button { width: 100%; }
[data-profile-nickname-feedback]:not([hidden]) { margin: 10px 0 0; }
.game-manager-grid { display: grid; gap: 13px; }
.game-manager-guide ul { display: grid; gap: 12px; margin: 19px 0 0; padding: 0; list-style: none; }
.game-manager-guide li { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid rgba(29,58,95,.82); border-radius: 12px; background: rgba(7,17,31,.28); }
.game-manager-guide li b { color: var(--game-text); font-size: 12px; }
.game-manager-guide li span { color: var(--game-muted); font-size: 11px; line-height: 1.6; }
.manager-feature-map { display: grid; gap: 7px; margin-top: 14px; }
.manager-feature-map span { padding: 8px 10px; border-left: 2px solid rgba(106,216,255,.5); color: var(--game-muted); background: rgba(7,17,31,.28); font-size: 10px; line-height: 1.55; }
.game-content-form { display: grid; gap: 14px; }
.game-content-form h2 { margin: 5px 0 0; }
.game-form-grid { display: grid; gap: 12px; }
.game-content-form label { display: grid; gap: 7px; color: var(--game-muted); font-size: 12px; font-weight: 700; }
.game-content-form input, .game-content-form select, .game-content-form textarea { width: 100%; padding: 11px 12px; border: 1px solid #284c75; border-radius: 10px; outline: none; color: var(--game-text); background: #09192d; }
.game-content-form input, .game-content-form select { min-height: 43px; }
.game-content-form textarea { min-height: 115px; resize: vertical; line-height: 1.65; }
.game-content-form input:focus, .game-content-form select:focus, .game-content-form textarea:focus { border-color: var(--game-cyan); box-shadow: 0 0 0 3px rgba(106,216,255,.12); }
.script-grid { display: grid; gap: 13px; margin-top: 15px; }
.script-card { overflow: hidden; border: 1px solid var(--game-border); border-radius: 20px; background: linear-gradient(145deg, rgba(13,27,47,.97), rgba(15,31,53,.9)); box-shadow: 0 13px 35px rgba(0,0,0,.13); }
.script-card__link { display: block; color: inherit; }
.script-card__link:hover h3 { color: var(--game-cyan); }
.script-card__cover { position: relative; display: flex; min-height: 118px; align-items: end; justify-content: space-between; padding: 15px; background: radial-gradient(circle at 85% 12%, rgba(106,216,255,.35), transparent 20%), linear-gradient(135deg, #163862, #09192d 72%); }
.script-card__cover::after { position: absolute; inset: 18px 25px auto auto; width: 90px; height: 58px; border: 1px solid rgba(106,216,255,.22); border-radius: 50%; content: ""; transform: rotate(-18deg); }
.script-card__cover b { position: absolute; top: 21px; left: 24px; z-index: 1; color: var(--game-cyan); font-size: 42px; line-height: 1; text-shadow: 0 0 28px rgba(106,216,255,.45); }
.script-card__cover > span { position: relative; z-index: 1; color: var(--game-faint); font-size: 10px; }
.script-card__number { letter-spacing: .15em; }
.script-card__body { padding: 17px; }
.script-card__top, .script-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.script-card__top .game-eyebrow { margin: 0; }
.script-card__status { color: var(--game-faint); font-size: 10px; }
.script-card h3 { margin: 8px 0 7px; font-size: 21px; letter-spacing: -.035em; }
.script-card__body > p { min-height: 42px; color: var(--game-muted); font-size: 12px; line-height: 1.75; }
.script-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.script-card__tags span { padding: 5px 7px; border: 1px solid rgba(106,216,255,.17); border-radius: 999px; color: var(--game-cyan); background: rgba(19,38,64,.6); font-size: 10px; }
.script-card__meta { margin-top: 15px; color: var(--game-faint); font-size: 10px; }
.manager-script-list { display: grid; gap: 8px; }
.manager-script-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; border: 1px solid var(--game-border); border-radius: 13px; background: rgba(13,27,47,.75); }
.manager-script-row > div { display: grid; gap: 4px; min-width: 0; }
.manager-script-row b { overflow: hidden; color: var(--game-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.manager-script-row span:not(.game-status) { color: var(--game-muted); font-size: 10px; }
.manager-script-row--active { border-color: rgba(106,216,255,.7); box-shadow: 0 0 0 3px rgba(106,216,255,.08); }
.manager-script-row__actions { display: flex !important; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; }
.manager-script-row__actions a { color: var(--game-muted); font-size: 11px; }
.manager-script-row__actions a:hover, .manager-script-row__actions .manager-script-row__edit { color: var(--game-cyan); }
.game-manager-cancel { display: inline-flex; margin: 5px 0 15px; }
.manager-repeat-section { display: grid; gap: 11px; padding: 15px; border: 1px solid rgba(65,111,161,.58); border-radius: 16px; background: rgba(7,17,31,.24); }
.manager-repeat-section__head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.manager-repeat-section__head h3 { margin: 3px 0 0; color: var(--game-text); font-size: 18px; }
.manager-repeat-section__head p:not(.game-eyebrow) { margin: 6px 0 0; color: var(--game-muted); font-size: 11px; line-height: 1.65; }
.manager-repeat-list { display: grid; gap: 10px; }
.manager-repeat-card { display: grid; gap: 11px; padding: 13px; border: 1px dashed rgba(82,134,185,.5); border-radius: 13px; background: rgba(13,27,47,.68); }
.manager-repeat-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.manager-repeat-card__head h3 { margin: 3px 0 0; color: var(--game-text); font-size: 15px; }
.manager-repeat-card textarea { min-height: 95px; }
.manager-repeat-card .game-form-grid label:first-child, .manager-repeat-card .game-form-grid label:nth-child(2) { grid-column: auto; }
.script-detail-hero { display: grid; gap: 18px; padding: 24px 21px; border: 1px solid var(--game-border); border-radius: 22px; background: radial-gradient(circle at 92% 10%, rgba(106,216,255,.2), transparent 26%), linear-gradient(145deg, rgba(19,38,64,.96), rgba(13,27,47,.9)); box-shadow: var(--game-shadow); }
.script-detail-hero h1 { margin: 0; color: var(--game-text); font-size: clamp(30px, 8vw, 52px); line-height: 1.1; letter-spacing: -.05em; }
.script-detail-hero > div:first-child > p:not(.game-eyebrow) { margin: 13px 0 0; color: var(--game-muted); font-size: 13px; line-height: 1.8; }
.script-detail-count { display: grid; align-content: center; justify-items: start; padding: 16px; border: 1px solid rgba(106,216,255,.25); border-radius: 16px; background: rgba(7,17,31,.35); }
.script-detail-count strong { color: var(--game-cyan); font-size: 43px; line-height: 1; }
.script-detail-count span { margin-top: 6px; color: var(--game-text); font-size: 12px; }
.script-detail-count small { margin-top: 5px; color: var(--game-faint); font-size: 10px; }
.script-detail-section { margin-top: 14px; padding: 21px; border: 1px solid var(--game-border); border-radius: 19px; background: linear-gradient(145deg, rgba(13,27,47,.96), rgba(15,31,53,.88)); }
.script-detail-section h2 { margin: 5px 0 10px; font-size: 22px; letter-spacing: -.03em; }
.script-detail-section h3 { margin: 19px 0 7px; color: var(--game-cyan); font-size: 13px; }
.script-detail-section > p:not(.game-eyebrow), .script-detail-section li { color: var(--game-muted); font-size: 13px; line-height: 1.85; }
.script-detail-section__head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.script-detail-muted { margin: 0 0 16px; color: var(--game-faint) !important; font-size: 11px !important; }
.script-role-grid { display: grid; gap: 10px; }
.script-role-card { padding: 15px; border: 1px solid rgba(29,58,95,.9); border-radius: 14px; background: rgba(7,17,31,.36); }
.script-role-card__slot { color: var(--game-cyan); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.script-role-card h3 { margin: 8px 0 5px; color: var(--game-text); font-size: 17px; }
.script-role-card > p { margin: 0; color: var(--game-muted); font-size: 12px; line-height: 1.75; }
.script-private { margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(29,58,95,.75); }
.script-private summary { color: var(--game-cyan); cursor: pointer; font-size: 11px; }
.script-private p { margin: 9px 0 0; color: var(--game-danger); font-size: 12px; line-height: 1.75; }
.script-detail-columns { display: grid; gap: 14px; }
.script-chapter-list { display: grid; gap: 7px; margin: 17px 0 0; padding-left: 23px; }
.script-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 2px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.game-mobile-nav { position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px; border: 1px solid rgba(106, 216, 255, .72); border-radius: 18px; color: #fff; background: rgba(7, 17, 31, .90); box-shadow: 0 10px 24px rgba(0,0,0,.40); backdrop-filter: none; -webkit-backdrop-filter: none; }
.game-mobile-nav .game-nav__item { display: grid; gap: 3px; padding: 7px 3px; place-items: center; border-radius: 12px; color: #fff; font-size: 10px; }
.game-mobile-nav .game-nav__icon { color: #fff; font-size: 16px; line-height: 1; }
.game-mobile-nav .game-nav__item.is-active { border-color: rgba(106,216,255,.82); color: #fff; background: rgba(255,255,255,.16); }
.game-icp-footer { position: relative; z-index: 2; padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px)); color: var(--game-faint); font-size: 11px; line-height: 1.4; text-align: center; }
.game-icp-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.game-icp-footer a:hover, .game-icp-footer a:focus-visible { color: var(--game-cyan); }

.game-auth-page { display: grid; min-height: 100vh; place-items: center; padding: 22px 14px; }
.game-auth-shell { position: relative; width: min(100%, 480px); }
.game-auth-card { position: relative; z-index: 1; padding: 29px 22px 24px; border: 1px solid #234a76; border-radius: 26px; background: linear-gradient(145deg, rgba(13,27,47,.97), rgba(8,22,39,.96)); box-shadow: var(--game-shadow); }
.game-auth-card--compact { max-width: 440px; margin: auto; }
.game-auth-orbit { position: absolute; top: -38px; right: -5px; left: -5px; display: flex; justify-content: space-between; padding: 0 26px; color: var(--game-cyan); opacity: .55; font-size: 13px; }
.game-auth-brand { display: inline-flex; align-items: center; gap: 10px; }
.game-auth-brand strong { display: block; font-size: 16px; letter-spacing: .02em; }
.game-auth-brand small { display: block; margin-top: 3px; color: var(--game-muted); font-size: 10px; letter-spacing: .13em; }
.game-auth-card .game-eyebrow { margin-top: 32px; }
.game-auth-card h1 { margin: 0; font-size: clamp(30px, 8vw, 43px); line-height: 1.1; letter-spacing: -.045em; }
.game-auth-lede { margin: 14px 0 0; color: var(--game-muted); font-size: 13px; line-height: 1.8; }
.realm-switch { display: flex; align-items: center; gap: 9px; margin: 18px 0 21px; color: var(--game-cyan); font-size: 11px; }
.realm-switch span { padding: 7px 9px; border: 1px solid rgba(106,216,255,.25); border-radius: 999px; background: rgba(19,38,64,.65); }
.realm-switch i { color: var(--game-faint); font-style: normal; }
.game-form { display: grid; gap: 13px; margin-top: 22px; }
.game-form label small { margin-left: 4px; color: var(--game-faint); font-size: 10px; font-weight: 400; }
.game-form input { min-height: 46px; }
.game-check { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 8px !important; font-weight: 500 !important; }
.game-check input { width: 16px; min-height: 16px; accent-color: var(--game-blue); }
.game-form-error, .game-form-message { margin: 15px 0 -7px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.6; }
.game-form-error { border: 1px solid rgba(255,156,174,.35); color: var(--game-danger); background: rgba(111, 32, 53, .25); }
.game-form-message { border: 1px solid rgba(106,216,255,.3); color: var(--game-cyan); background: rgba(19,74,102,.22); }
.game-auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 13px; margin-top: 19px; }
.game-auth-links a, .game-back-link { color: var(--game-cyan); font-size: 11px; }
.game-auth-links a:hover, .game-back-link:hover { text-decoration: underline; }
.game-auth-note { margin: 21px 0 0; color: var(--game-faint); font-size: 10px; line-height: 1.7; }
.game-back-link { display: inline-block; margin-bottom: 22px; }

@media (min-width: 700px) {
  .game-app { padding: 25px 28px 58px; }
  .game-header { min-height: 62px; }
  .game-desktop-nav { display: flex; }
  .game-mobile-nav { display: none; }
  .game-main { padding-top: 42px; }
  .game-hero { grid-template-columns: minmax(0, 1fr) 260px; align-items: center; min-height: 385px; padding: 49px 55px; }
  .game-hero__signal { width: 260px; height: 220px; }
  .game-action-grid, .game-dashboard-grid, .game-room-layout, .game-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-filter-bar { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; align-items: end; padding: 14px; }
  .game-profile-hero { padding: 31px; }
  .game-auth-card { padding: 37px 38px 29px; }
  .game-manager-grid { grid-template-columns: minmax(220px, .72fr) minmax(0, 1.4fr); align-items: start; }
  .game-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-form-grid label:first-child, .game-form-grid label:nth-child(2) { grid-column: span 2; }
  .script-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .script-detail-hero { grid-template-columns: minmax(0, 1fr) 160px; align-items: stretch; padding: 31px; }
  .script-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .script-detail-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .game-brand small, .game-user-pill > span:last-of-type { display: none; }
  .game-hero { padding: 24px 20px; }
  .game-hero__actions, .game-hero__actions .game-button { width: 100%; }
  .game-section-note { display: none; }
  .game-join-form { flex-wrap: wrap; }
  .game-join-form .game-button { width: 100%; }
  .realm-switch { gap: 5px; }
  .realm-switch span { padding: 6px 7px; font-size: 10px; }
  .game-page-heading--with-action { display: grid; align-items: start; }
  .game-page-heading--with-action .game-button { width: 100%; }
  .game-manager-link { display: none; }
  .script-detail-actions, .script-detail-actions .game-button { width: 100%; }
}

/* Flexible story editor and live room engine */
.story-studio-heading { margin-bottom: 18px; }
.story-studio-heading__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.story-studio-heading h1 { margin: 4px 0 8px; font-size: clamp(29px, 6vw, 43px); letter-spacing: -.045em; }
.story-studio-heading p:not(.game-eyebrow) { max-width: 720px; margin: 0; color: var(--game-muted); font-size: 13px; line-height: 1.8; }
.story-checks { display: grid; gap: 11px; margin: 0 0 18px; padding: 16px 18px; border: 1px solid rgba(106,216,255,.24); border-radius: 17px; background: rgba(12,31,54,.66); }
.story-checks p, .story-checks h2 { margin: 0; }
.story-checks h2 { margin-top: 3px; font-size: 18px; }
.story-checks ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--game-muted); font-size: 12px; line-height: 1.65; }
.story-studio-map { display: grid; gap: 7px; margin: 0 0 18px; }
.story-studio-map div { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 9px 11px; border: 1px solid rgba(65,111,161,.48); border-radius: 11px; color: var(--game-muted); background: rgba(13,27,47,.65); font-size: 11px; line-height: 1.55; }
.story-studio-map strong { color: var(--game-cyan); }
.story-studio { display: grid; gap: 13px; }
.story-studio__tabs { position: sticky; top: 8px; z-index: 4; display: flex; gap: 6px; overflow-x: auto; padding: 8px; border: 1px solid rgba(65,111,161,.7); border-radius: 15px; background: rgba(8,22,39,.94); box-shadow: 0 8px 26px rgba(0,0,0,.18); backdrop-filter: blur(14px); }
.story-studio__tabs button { flex: 0 0 auto; min-height: 36px; padding: 7px 13px; border: 1px solid transparent; border-radius: 10px; color: var(--game-muted); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.story-studio__tabs button.is-active { border-color: rgba(106,216,255,.4); color: var(--game-text); background: rgba(39,82,128,.46); }
.story-studio__canvas { display: grid; gap: 13px; }
.story-editor-panel, .story-editor-card { padding: 18px; border: 1px solid var(--game-border); border-radius: 18px; background: linear-gradient(145deg, rgba(13,27,47,.96), rgba(10,25,44,.9)); }
.story-editor-panel--lead { background: radial-gradient(circle at 92% 8%, rgba(106,216,255,.16), transparent 25%), linear-gradient(145deg, rgba(19,42,71,.97), rgba(10,25,44,.92)); }
.story-editor-panel h2, .story-editor-panel h3, .story-editor-card h3, .story-editor-card h4 { margin: 0; color: var(--game-text); }
.story-editor-panel > p:not(.game-eyebrow) { margin: 9px 0 14px; color: var(--game-muted); font-size: 13px; line-height: 1.8; }
.story-editor-panel__head, .story-editor-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story-editor-card { display: grid; gap: 13px; }
.story-editor-card__head h3 { font-size: 17px; }
.story-editor-grid { display: grid; gap: 10px; }
.story-editor-field { display: grid; gap: 6px; color: var(--game-text); font-size: 12px; font-weight: 700; }
.story-editor-field > span, .story-editor-choice-group > span { color: var(--game-muted); font-size: 11px; }
.story-editor-input { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid #284c75; border-radius: 10px; outline: none; color: var(--game-text); background: #09192d; font: inherit; font-size: 13px; line-height: 1.55; }
.story-editor-input:focus { border-color: var(--game-cyan); box-shadow: 0 0 0 3px rgba(106,216,255,.12); }
.story-editor-input--script { min-height: 155px; resize: vertical; }
.story-editor-button { min-height: 37px; padding: 8px 11px; border: 1px solid rgba(106,216,255,.34); border-radius: 9px; color: var(--game-cyan); background: rgba(19,59,91,.43); font: inherit; font-size: 12px; cursor: pointer; }
.story-editor-button:hover { border-color: var(--game-cyan); background: rgba(37,83,128,.62); }
.story-editor-button--danger { border-color: rgba(255,156,174,.4); color: var(--game-danger); background: rgba(107,35,51,.2); }
.story-editor-icon { width: 29px; min-height: 29px; padding: 3px; border: 1px solid rgba(106,216,255,.28); border-radius: 8px; color: var(--game-muted); background: transparent; font: inherit; cursor: pointer; }
.story-editor-inline-actions { display: flex; align-items: center; gap: 5px; }
.story-editor-flags { display: flex; flex-wrap: wrap; gap: 7px 11px; padding: 11px; border-radius: 11px; background: rgba(7,17,31,.34); }
.story-editor-check { display: inline-flex; align-items: center; gap: 6px; color: var(--game-muted); font-size: 11px; cursor: pointer; }
.story-editor-check input, .story-editor-choices input { width: 15px; height: 15px; margin: 0; accent-color: var(--game-cyan); }
.story-editor-advanced { display: grid; gap: 11px; padding: 11px 0 0; border-top: 1px solid rgba(64,105,149,.45); }
.story-editor-advanced summary { color: var(--game-cyan); font-size: 12px; cursor: pointer; }
.story-editor-choice-group { display: grid; gap: 7px; padding: 10px; border: 1px solid rgba(49,91,137,.47); border-radius: 11px; background: rgba(7,17,31,.25); }
.story-editor-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.story-editor-choices label { display: inline-flex; align-items: center; gap: 5px; color: var(--game-muted); font-size: 11px; }
.story-section-editor-list { display: grid; gap: 10px; }
.story-section-editor { display: grid; gap: 10px; padding: 13px; border: 1px dashed rgba(82,134,185,.46); border-radius: 13px; background: rgba(7,17,31,.27); }
.story-section-editor h4 { font-size: 13px; }
.story-highlighter { display: grid; gap: 8px; }
.story-highlighter__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.story-highlighter__controls select { flex: 1 1 135px; max-width: 190px; }
.story-mark-list { display: flex; flex-wrap: wrap; gap: 6px; }
.story-mark-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 7px; border: 1px solid rgba(106,216,255,.23); border-radius: 999px; color: var(--game-muted); background: rgba(16,49,77,.5); font-size: 10px; }
.story-mark-chip b { color: var(--game-cyan); }
.story-mark-chip i { overflow: hidden; max-width: 150px; text-overflow: ellipsis; white-space: nowrap; font-style: normal; }
.story-phase-editor { border-left: 3px solid rgba(106,216,255,.58); cursor: grab; }
.story-editor-subtabs { display: flex; gap: 7px; }
.story-rule-block { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(49,91,137,.47); border-radius: 12px; background: rgba(7,17,31,.25); }
.story-rule-block h4 { color: var(--game-cyan); font-size: 12px; }
.story-rule-row { display: grid; gap: 7px; padding-bottom: 9px; border-bottom: 1px solid rgba(49,91,137,.28); }
.story-studio__save { position: sticky; bottom: 8px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 10px 12px; border: 1px solid rgba(106,216,255,.35); border-radius: 14px; color: var(--game-muted); background: rgba(8,22,39,.94); box-shadow: 0 10px 28px rgba(0,0,0,.28); backdrop-filter: blur(14px); font-size: 11px; }
.story-studio__save .game-button { flex: 0 0 auto; }

.story-room-entry .game-stack-form { display: grid; gap: 11px; margin-top: 15px; }
.room-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(51,91,135,.42); }
.room-list-row:first-of-type { border-top: 0; }
.room-list-row div { display: grid; gap: 4px; min-width: 0; }
.room-list-row b { color: var(--game-text); font-size: 13px; }
.room-list-row span:not(.game-status) { color: var(--game-muted); font-size: 11px; }
.room-hero, .room-live-hero { display: grid; gap: 18px; margin-bottom: 16px; padding: 22px; border: 1px solid var(--game-border); border-radius: 20px; background: radial-gradient(circle at 87% 12%, rgba(106,216,255,.2), transparent 24%), linear-gradient(145deg, rgba(20,45,74,.95), rgba(9,25,44,.94)); }
.room-hero h1, .room-live-hero h1 { margin: 3px 0 8px; font-size: clamp(28px, 6vw, 43px); letter-spacing: -.045em; }
.room-hero p:not(.game-eyebrow), .room-live-hero p:not(.game-eyebrow) { margin: 0; color: var(--game-muted); font-size: 13px; line-height: 1.75; }
.room-live-hero small { display: block; margin-top: 11px; color: var(--game-cyan); font-size: 11px; }
.room-code-card, .room-progress { display: grid; align-content: center; justify-items: start; min-height: 108px; padding: 15px; border: 1px solid rgba(106,216,255,.25); border-radius: 14px; background: rgba(7,17,31,.38); }
.room-code-card strong, .room-progress strong { color: var(--game-cyan); font-size: 32px; letter-spacing: .08em; }
.room-code-card span, .room-progress span { margin-top: 6px; color: var(--game-muted); font-size: 11px; }
.room-lobby-actions, .room-live-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 13px 0 20px; }
.room-live-actions > span { color: var(--game-muted); font-size: 12px; line-height: 1.6; }
.room-role-grid, .search-area-grid, .story-clue-grid { display: grid; gap: 10px; }
.room-role-card, .search-area-card { display: grid; gap: 7px; padding: 14px; border: 1px solid rgba(48,91,137,.68); border-radius: 14px; background: rgba(8,22,39,.6); }
.room-role-card > span, .search-area-card > span { color: var(--game-cyan); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.room-role-card h3, .search-area-card h3 { margin: 0; color: var(--game-text); font-size: 17px; }
.room-role-card p, .search-area-card p { margin: 0; color: var(--game-muted); font-size: 12px; line-height: 1.7; }
.room-role-card form, .search-area-card form { margin-top: 2px; }
.room-private-role { margin: 13px 0 20px; border-color: rgba(255,173,196,.42); background: linear-gradient(135deg, rgba(49,24,48,.7), rgba(8,22,39,.72)); }
.room-private-role__summary { margin: 0; color: var(--game-muted); font-size: 13px; line-height: 1.8; }
.room-private-role__brief { margin-top: 13px; padding: 13px; border: 1px solid rgba(255,173,196,.28); border-radius: 12px; background: rgba(25,13,29,.42); }
.room-private-role__brief strong { color: #ffd0dc; font-size: 12px; }
.room-private-role__brief p { margin: 8px 0 0; color: var(--game-text); font-size: 13px; line-height: 1.9; }
.room-live-grid, .room-play-grid { display: grid; gap: 13px; margin-top: 13px; }
.room-live-grid > div, .room-live-grid > aside { display: grid; align-content: start; gap: 13px; }
.story-role-panel h2, .room-members h2, .story-vote h2 { margin: 3px 0 15px; font-size: 21px; }
.story-section { margin-top: 10px; padding: 14px; border: 1px solid rgba(58,105,155,.53); border-radius: 13px; background: rgba(6,18,33,.36); }
.story-private-brief { margin-top: 10px; padding: 15px; border: 1px solid rgba(255,173,196,.42); border-radius: 13px; background: linear-gradient(135deg, rgba(55,24,48,.62), rgba(6,18,33,.46)); box-shadow: inset 3px 0 0 #ffadc4; }
.story-private-brief__top { display: flex; align-items: center; justify-content: space-between; gap: 9px; color: #ffbfd0; font-size: 10px; letter-spacing: .08em; }
.story-private-brief__top b { color: var(--game-text); font-size: 12px; letter-spacing: 0; }
.story-private-brief p { margin: 10px 0 0; color: var(--game-text); font-size: 13px; line-height: 1.9; }
.story-section__top, .story-clue__top { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.story-section__top > span, .story-clue__top > span { color: var(--game-cyan); font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.story-section h3 { margin: 0; color: var(--game-text); font-size: 16px; }
.story-section p, .story-clue > p { margin: 10px 0 0; color: var(--game-muted); font-size: 13px; line-height: 1.9; }
.story-mark { position: relative; display: inline; padding: 1px 3px; border-radius: 4px; color: #e8f7ff; background: rgba(106,216,255,.18); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.story-mark__label { display: inline-block; margin: 0 4px 0 1px; padding: 1px 4px; border-radius: 99px; color: #092039; background: var(--game-cyan); font-size: 9px; font-weight: 800; line-height: 1.25; vertical-align: middle; }
.story-mark--important { background: rgba(255,207,112,.18); }
.story-mark--important > .story-mark__label { background: #ffd77a; }
.story-mark--reasoning_key { background: rgba(161,137,255,.23); box-shadow: inset 3px 0 0 #b7a6ff; }
.story-mark--reasoning_key > .story-mark__label { background: #c4b7ff; }
.story-mark--secret { background: rgba(255,133,168,.17); }
.story-mark--secret > .story-mark__label { background: #ffadc4; }
.story-mark--task { background: rgba(104,231,184,.17); }
.story-mark--task > .story-mark__label { background: #9befca; }
.role-name-highlight { display: inline; padding: .08em .32em; border-radius: .38em; color: #dff5ff; background: rgba(77,141,255,.28); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.role-name-tag { display: inline-flex; align-items: center; padding: 2px 7px; color: #092039; background: #8ddcff; font-size: .9em; font-weight: 800; line-height: 1.35; white-space: nowrap; }
.role-player-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; max-width: 100%; vertical-align: middle; }
.role-player-nickname { display: none; color: var(--game-faint); font-size: .86em; font-weight: 500; line-height: 1.35; }
.show-player-nicknames .role-player-nickname { display: inline; }
.role-name-toggle { margin-left: auto; padding: 6px 9px; border: 1px solid rgba(106,216,255,.25); border-radius: 999px; color: var(--game-muted); background: rgba(8,22,39,.45); font-size: 11px; white-space: nowrap; }
.role-name-toggle:hover { border-color: rgba(106,216,255,.52); color: var(--game-text); }
.story-clue { padding: 14px; border: 1px solid rgba(45,91,137,.66); border-radius: 14px; background: rgba(6,18,33,.36); }
.story-clue h3 { margin: 9px 0 0; color: var(--game-text); font-size: 16px; }
.story-clue__top > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.story-clue__top > div span { padding: 3px 5px; border: 1px solid rgba(106,216,255,.2); border-radius: 999px; color: var(--game-muted); font-size: 9px; }
.story-clue__source { color: var(--game-faint) !important; font-size: 10px !important; }
.story-share { margin: -3px 0 12px; padding: 9px 12px; border: 1px solid rgba(53,103,155,.46); border-top: 0; border-radius: 0 0 12px 12px; background: rgba(9,29,49,.56); }
.story-share summary { color: var(--game-cyan); font-size: 11px; cursor: pointer; }
.story-share__options { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; color: var(--game-muted); font-size: 10px; }
.story-target { display: inline-flex; align-items: center; gap: 4px; color: var(--game-muted); font-size: 10px; }
.story-target input { accent-color: var(--game-cyan); }
.room-member-identity { min-width: 0; }
.room-members ul, .room-event-list, .preview-list, .story-vote ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.room-members li, .room-event-list li, .preview-list li, .story-vote li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(52,91,133,.35); color: var(--game-muted); font-size: 11px; }
.room-members li:first-child, .room-event-list li:first-child, .preview-list li:first-child, .story-vote li:first-child { border-top: 0; }
.room-members b, .story-vote b { color: var(--game-cyan); font-size: 11px; }
.puzzle-list { display: grid; gap: 8px; margin-top: 13px; }
.puzzle-row { display: flex; align-items: end; gap: 8px; padding: 11px; border: 1px solid rgba(161,137,255,.35); border-radius: 12px; background: rgba(61,45,104,.16); }
.puzzle-row label { display: grid; flex: 1; gap: 6px; color: var(--game-text); font-size: 11px; }
.puzzle-row input { min-width: 0; padding: 8px; border: 1px solid #4c427e; border-radius: 8px; color: var(--game-text); background: #0a1930; }
.room-message-list { display: grid; gap: 7px; max-height: 320px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.room-message { display: grid; gap: 3px; padding: 9px; border-radius: 10px; background: rgba(8,22,39,.45); }
.room-message--mine { border: 1px solid rgba(106,216,255,.21); background: rgba(19,67,97,.33); }
.room-message b { color: var(--game-cyan); font-size: 10px; }
.room-message__sender { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.room-message__arrow { color: var(--game-faint); font-size: 11px; }
.room-message span { color: var(--game-muted); font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.room-message__sender .role-name-tag { color: #092039; font-size: 10px; }
.room-message__sender .role-player-nickname { font-size: 10px; }
.room-live-actions--preference { justify-content: flex-end; }
.room-live-actions--preference .role-name-toggle { margin-left: 0; }
.room-message-form { display: flex; gap: 7px; margin-top: 10px; }
.room-message-form input, .room-message-form select { min-width: 0; flex: 1; padding: 8px 9px; border: 1px solid #284c75; border-radius: 8px; color: var(--game-text); background: #09192d; font: inherit; font-size: 12px; }
.story-vote form { display: flex; gap: 8px; }
.story-vote select { flex: 1; min-width: 0; padding: 9px; border: 1px solid #284c75; border-radius: 9px; color: var(--game-text); background: #09192d; }
.host-console { margin-top: 13px; border-color: rgba(106,216,255,.38); }
.host-console__grid { display: grid; gap: 10px; margin-top: 14px; }
.host-console__grid form { display: grid; gap: 7px; padding: 10px; border: 1px solid rgba(45,91,137,.52); border-radius: 11px; background: rgba(7,17,31,.28); }
.host-console__grid label { display: grid; gap: 5px; color: var(--game-muted); font-size: 11px; }
.host-console__grid select { width: 100%; padding: 8px; border: 1px solid #284c75; border-radius: 8px; color: var(--game-text); background: #09192d; }
.host-item-grant { display: grid; gap: 9px; margin-top: 13px; }
.host-item-grant h3 { margin: 0; }
.host-item-grant select { width: 100%; padding: 8px; border: 1px solid #284c75; border-radius: 8px; color: var(--game-text); background: #09192d; }
.story-targets { display: flex; flex-wrap: wrap; gap: 5px; }
.room-event-panel { margin-top: 13px; }
.preview-controls { display: grid; gap: 10px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--game-border); border-radius: 16px; background: rgba(13,27,47,.85); }
.preview-controls label { display: grid; gap: 6px; color: var(--game-muted); font-size: 11px; }
.preview-controls select { width: 100%; padding: 9px; border: 1px solid #284c75; border-radius: 9px; color: var(--game-text); background: #09192d; }

@media (min-width: 700px) {
  .story-checks { grid-template-columns: 180px 1fr; align-items: center; }
  .story-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-rule-row { grid-template-columns: minmax(130px, .8fr) minmax(130px, 1fr) minmax(130px, 1fr) 32px; align-items: end; }
  .story-studio-heading__top { align-items: end; }
  .room-hero, .room-live-hero { grid-template-columns: minmax(0, 1fr) 175px; align-items: stretch; }
  .room-role-grid, .search-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-live-grid { grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr); }
  .room-play-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-clue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .host-console__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .story-studio-heading__top { display: grid; }
  .story-studio-heading__top .game-button { width: 100%; }
  .story-studio__save { align-items: stretch; flex-direction: column; }
  .story-studio__save .game-button { width: 100%; }
  .room-live-actions .game-button, .room-lobby-actions .game-button { width: 100%; }
  .puzzle-row, .room-message-form, .story-vote form { flex-wrap: wrap; }
  .puzzle-row .game-button, .room-message-form .game-button, .story-vote .game-button { width: 100%; }
}

.story-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.story-action-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(152, 184, 220, .18);
  border-radius: 16px;
  background: rgba(11, 28, 50, .72);
}

.story-action-card h3,
.story-action-card p {
  margin: 0;
}

.story-action-card p {
  color: var(--game-muted, #9fb2ca);
  white-space: pre-wrap;
}

.story-action-card form {
  margin-top: auto;
}

.story-action-card button[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.preview-play-grid {
  display: grid;
  gap: 12px;
}

.preview-play-grid h3 {
  margin: 0 0 6px;
  color: var(--game-text);
  font-size: 13px;
}

@media (max-width: 720px) {
  .story-action-grid {
    grid-template-columns: 1fr;
  }
}

/* v3 simple story engine */
.simple-flow-card { margin-top: 14px; padding: 20px 22px; border: 1px solid var(--game-border); border-radius: 18px; background: rgba(13,27,47,.78); }
.simple-flow-card h2 { margin: 0; font-size: clamp(17px, 3vw, 24px); line-height: 1.5; }
.simple-flow-card p:last-child { margin-top: 10px; color: var(--game-muted); font-size: 13px; line-height: 1.8; }
.simple-script-grid { margin-top: 14px; }
.simple-script-card .script-card__cover { display: grid; place-items: center; gap: 6px; min-height: 170px; background: radial-gradient(circle at 50% 30%, rgba(106,216,255,.22), transparent 43%), linear-gradient(145deg,#102c50,#0b1728); }
.simple-script-card .script-card__cover img { width: 100%; height: 100%; min-height: 170px; object-fit: cover; }
.simple-cover-mark { color: var(--game-cyan); font-size: 58px; font-weight: 900; text-shadow: 0 0 28px rgba(106,216,255,.55); }
.simple-detail-grid, .simple-lobby-grid, .simple-clue-columns, .simple-room-layout { display: grid; gap: 13px; }
.simple-public-roles { display: grid; gap: 9px; }
.simple-public-role { padding: 13px; border: 1px solid rgba(106,216,255,.15); border-radius: 13px; background: rgba(7,17,31,.36); }
.simple-public-role h3 { margin: 0 0 5px; color: var(--game-cyan); font-size: 15px; }
.simple-round-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.simple-round-list li { display: flex; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid rgba(106,216,255,.14); border-radius: 12px; color: var(--game-muted); font-size: 12px; }
.simple-round-list strong { color: var(--game-text); }
.simple-room-row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(106,216,255,.12); }
.simple-room-row:last-child { border-bottom: 0; }
.simple-room-row span { color: var(--game-muted); font-size: 12px; }
.simple-room-history { margin-top: 13px; }
.room-code-big { color: var(--game-cyan); font-size: 26px; letter-spacing: .12em; }
.simple-lobby-roles { display: grid; gap: 10px; }
.simple-lobby-role { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px; border: 1px solid rgba(106,216,255,.16); border-radius: 15px; background: rgba(7,17,31,.35); }
.simple-lobby-role h3 { margin: 0 0 5px; color: var(--game-cyan); font-size: 17px; }
.simple-lobby-role p { max-width: 600px; }
.simple-lobby-role__action { flex: 0 0 auto; text-align: right; }
.simple-lobby-role__action form { margin: 0; }
.simple-role-owner-line, .simple-role-owner, .simple-role-claimed, .simple-role-hint { color: var(--game-faint); font-size: 11px; }
.simple-role-owner-line { margin-top: 8px !important; color: var(--game-cyan) !important; font-weight: 700; }
.simple-member-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.simple-member { display: flex; align-items: center; gap: 9px; }
.simple-member__avatar { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(106,216,255,.35); border-radius: 9px; color: var(--game-cyan); background: #102746; font-size: 11px; }
.simple-member__mapping { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; min-width: 0; color: var(--game-muted); font-size: 12px; }
.simple-member__mapping strong { color: var(--game-text); font-size: 12px; }
.simple-member__mapping > span:last-child { color: var(--game-cyan); }
.role-player-line { display: inline-flex; align-items: baseline; gap: 6px; }
.role-name-highlight { color: #6ad8ff; font-weight: 800; }
.role-player-nickname { display: none; color: var(--game-muted); font-size: 11px; font-weight: 500; }
.show-player-nicknames .role-player-nickname { display: inline; }
.simple-room-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin: 13px 2px 19px; }
.simple-room-heading h1 { margin: 0; font-size: clamp(27px, 6vw, 44px); letter-spacing: -.04em; }
.simple-room-heading p:not(.game-eyebrow) { max-width: 720px; margin: 11px 0 0; color: var(--game-muted); font-size: 13px; line-height: 1.8; }
.simple-phase-bar { display: flex; gap: 5px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 3px; }
.simple-phase-step { flex: 1 0 auto; padding: 8px 10px; border: 1px solid rgba(106,216,255,.12); border-radius: 9px; color: var(--game-faint); font-size: 10px; white-space: nowrap; }
.simple-phase-step.is-current { border-color: rgba(106,216,255,.55); color: var(--game-cyan); background: rgba(31,79,132,.42); }
.simple-phase-step.is-done { color: #a9c2e1; }
.simple-room-layout main, .simple-room-layout aside { min-width: 0; }
.simple-private-story h2 { margin: 0; font-size: 24px; }
.simple-role-profile { margin: 10px 0 16px !important; white-space: pre-wrap; }
.simple-private-task { margin: 13px 0; padding: 14px; border-left: 3px solid var(--game-cyan); border-radius: 0 12px 12px 0; background: rgba(6,17,31,.45); }
.simple-private-task strong { display: block; margin-bottom: 7px; color: var(--game-cyan); font-size: 11px; letter-spacing: .1em; }
.simple-private-task div, .simple-story-content { color: var(--game-text); font-size: 13px; line-height: 1.95; white-space: normal; }
.simple-story-list { display: grid; gap: 11px; }
.simple-story-card { padding: 15px; border: 1px solid rgba(106,216,255,.17); border-radius: 14px; background: rgba(7,17,31,.42); }
.simple-card-label { margin-bottom: 7px; color: var(--game-cyan); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.reasoning-key-highlight { padding: 1px 3px; border-radius: 4px; color: #07111f; background: #ffd86a; text-decoration: none; }
.simple-ready-action { display: flex; justify-content: flex-end; margin-top: 17px; }
.simple-search-panel, .simple-clue-columns, .simple-chat-panel, .simple-vote-panel, .simple-truth-panel { margin-top: 13px; }
.simple-points { display: flex; align-items: baseline; gap: 6px; color: var(--game-muted); }
.simple-points strong { color: var(--game-cyan); font-size: 31px; }
.simple-points span { font-size: 11px; }
.simple-search-grid { display: grid; gap: 11px; margin-top: 14px; }
.simple-search-category { padding: 15px; border: 1px solid rgba(106,216,255,.16); border-radius: 14px; background: rgba(7,17,31,.35); }
.simple-search-category h3 { margin: 0; font-size: 16px; }
.simple-search-category ul { display: grid; gap: 7px; margin: 11px 0 0; padding: 0; list-style: none; }
.simple-search-clue { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 10px; background: rgba(19,38,64,.65); }
.simple-search-clue strong, .simple-search-clue small { display: block; }
.simple-search-clue strong { font-size: 12px; }
.simple-search-clue small { margin-top: 4px; color: var(--game-faint); font-size: 10px; }
.clue-state { color: var(--game-faint); font-size: 10px; white-space: nowrap; }
.clue-state--mine { color: var(--game-cyan); }
.clue-state--public { color: #b8e99b; }
.simple-clue-content { padding: 14px 0; border-bottom: 1px solid rgba(106,216,255,.13); }
.simple-clue-content:last-child { border-bottom: 0; }
.simple-clue-content h3 { margin: 0; font-size: 15px; }
.simple-clue-content > div:not(.game-panel__top):not(.simple-clue-actions) { margin-top: 8px; color: var(--game-text); font-size: 12px; line-height: 1.85; white-space: normal; }
.simple-clue-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.simple-chat-list { display: grid; gap: 8px; max-height: 420px; margin: 13px 0; padding: 0; overflow: auto; list-style: none; }
.simple-chat-message { padding: 10px 12px; border: 1px solid rgba(106,216,255,.12); border-radius: 12px; background: rgba(7,17,31,.35); }
.simple-chat-message.is-mine { border-color: rgba(106,216,255,.3); background: rgba(24,64,107,.4); }
.simple-chat-message p { margin-top: 5px; color: var(--game-text); white-space: pre-wrap; }
.simple-chat-form { display: flex; gap: 8px; }
.simple-chat-form input { min-width: 0; flex: 1; min-height: 40px; padding: 0 12px; border: 1px solid #284c75; border-radius: 10px; color: var(--game-text); background: #09192d; outline: 0; }
.simple-chat-form input:focus { border-color: var(--game-cyan); }
.simple-events-panel { margin-top: 13px; }
.simple-events-panel ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--game-muted); font-size: 11px; line-height: 1.6; }
.simple-events-panel li { padding-bottom: 8px; border-bottom: 1px solid rgba(106,216,255,.1); }
.simple-vote-options { display: grid; gap: 8px; margin: 15px 0; }
.simple-vote-option { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid rgba(106,216,255,.18); border-radius: 12px; color: var(--game-text); background: rgba(7,17,31,.35); cursor: pointer; }
.simple-vote-option:has(input:checked) { border-color: var(--game-cyan); background: rgba(24,64,107,.55); }
.simple-final-question-checklist { margin: 13px 0; padding: 11px 12px; border: 1px solid rgba(255,216,106,.2); border-radius: 11px; color: var(--game-muted); background: rgba(56,47,39,.32); font-size: 12px; line-height: 1.7; }
.simple-final-question-checklist strong { color: #f1d88f; }
.simple-final-question-checklist ol { margin: 7px 0 0 18px; padding: 0; }
.simple-vote-results { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(106,216,255,.15); }
.simple-vote-results h3 { margin: 0 0 9px; font-size: 14px; }
.simple-vote-results ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.simple-vote-results li { display: flex; justify-content: space-between; color: var(--game-muted); font-size: 12px; }
.simple-vote-results strong { color: var(--game-cyan); }
.simple-truth-panel { border-color: rgba(255,216,106,.35); background: radial-gradient(circle at 100% 0, rgba(255,216,106,.11), transparent 45%), var(--game-card); }
.simple-truth-panel div { color: var(--game-text); font-size: 14px; line-height: 2; white-space: normal; }
.simple-preview-toolbar { display: grid; gap: 10px; margin-bottom: 13px; padding: 13px; border: 1px solid var(--game-border); border-radius: 15px; background: rgba(13,27,47,.76); }
.simple-preview-role-list { display: flex; flex-wrap: wrap; gap: 8px; }
.simple-preview-role { padding: 9px 11px; border: 1px solid var(--game-border); border-radius: 9px; color: var(--game-muted); font-size: 12px; }
.simple-preview-role.is-active { border-color: var(--game-cyan); color: var(--game-cyan); }
.simple-preview-toolbar > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
.simple-manager-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.simple-manager-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border-bottom: 1px solid rgba(106,216,255,.13); }
.simple-manager-row:last-child { border-bottom: 0; }
.simple-manager-row strong, .simple-manager-row span { display: block; }
.simple-manager-row span { margin-top: 5px; color: var(--game-muted); font-size: 11px; }
.simple-manager-row > div:last-child { display: flex; align-items: center; gap: 10px; }
.simple-editor { margin-top: 14px; }
.simple-editor-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 5px; border: 1px solid var(--game-border); border-radius: 14px 14px 0 0; background: #09192d; }
.simple-editor-tabs button, .simple-editor-round-tabs button { flex: 1 0 auto; min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; color: var(--game-muted); background: transparent; cursor: pointer; }
.simple-editor-tabs button.is-active, .simple-editor-round-tabs button.is-active { color: var(--game-text); background: rgba(77,141,255,.35); }
.simple-editor-panel { display: none; padding: 18px; border: 1px solid var(--game-border); border-top: 0; background: rgba(13,27,47,.88); }
.simple-editor-panel.is-active { display: block; }
.simple-editor-intro { margin-bottom: 16px; padding: 13px; border-left: 3px solid var(--game-cyan); border-radius: 0 12px 12px 0; background: rgba(7,17,31,.38); }
.simple-editor-intro p:last-child { color: var(--game-muted); font-size: 12px; line-height: 1.8; }
.simple-search-merge-preview { display: grid; gap: 7px; margin: 0 0 14px; padding: 12px 13px; border: 1px solid rgba(255,216,106,.2); border-radius: 12px; background: rgba(68,52,30,.2); }
.simple-search-merge-preview > p { margin: 0; }
.simple-search-merge-preview__copy { color: var(--game-muted); font-size: 11px; line-height: 1.7; }
.simple-search-merge-preview__list { display: grid; gap: 5px; }
.simple-search-merge-preview__item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 8px; background: rgba(7,17,31,.34); }
.simple-search-merge-preview__item strong { color: #ffe291; font-size: 11px; }
.simple-search-merge-preview__item small { color: #b5a071; font-size: 10px; text-align: right; }
.simple-editor-grid { display: grid; gap: 12px; }
.simple-editor-field { display: grid; gap: 7px; color: var(--game-muted); font-size: 12px; font-weight: 700; }
.simple-editor-label { color: var(--game-muted); }
.simple-editor-field input, .simple-editor-field textarea, .simple-editor-field select { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #284c75; border-radius: 10px; color: var(--game-text); background: #09192d; outline: 0; resize: vertical; }
.simple-editor-field textarea { min-height: 100px; line-height: 1.7; }
.simple-editor-field input:focus, .simple-editor-field textarea:focus, .simple-editor-field select:focus { border-color: var(--game-cyan); box-shadow: 0 0 0 3px rgba(106,216,255,.1); }
.simple-editor-hint { color: var(--game-faint); font-size: 10px; font-weight: 400; line-height: 1.6; }
.simple-role-editor-card, .simple-search-editor-category { margin-top: 14px; padding: 16px; border: 1px solid rgba(106,216,255,.18); border-radius: 15px; background: rgba(7,17,31,.36); }
.simple-editor-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.simple-editor-card-head h2, .simple-editor-card-head h3, .simple-editor-card-head h4 { margin: 0; }
.simple-editor-card-head h2 { font-size: 18px; }.simple-editor-card-head h3 { font-size: 16px; }.simple-editor-card-head h4 { font-size: 13px; }
.simple-role-stories { display: grid; gap: 11px; margin-top: 14px; }
.simple-story-editor { padding-top: 12px; border-top: 1px solid rgba(106,216,255,.12); }
.simple-mark-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 7px; }
.game-loading-overlay { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 22px; background: #07111f; background: rgba(7, 17, 31, .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
.game-loading-overlay.is-visible { display: flex; animation: game-loading-fade-in .16s ease-out both; }
.game-loading-card { display: grid; min-width: min(320px, 88vw); gap: 13px; padding: 24px 25px 20px; border: 1px solid rgba(106,216,255,.32); border-radius: 18px; color: var(--game-text); background: linear-gradient(145deg, rgba(16,43,75,.97), rgba(7,18,34,.97)); box-shadow: 0 18px 70px rgba(0,0,0,.42), 0 0 34px rgba(77,141,255,.14); text-align: center; }
.game-loading-card strong { font-size: 14px; font-weight: 700; }
.game-loading-card small { color: var(--game-faint); font-size: 10px; }
.game-loading-spinner { width: 42px; height: 42px; margin: 0 auto 2px; border: 4px solid rgba(106,216,255,.2); border-top-color: var(--game-cyan); border-right-color: #9b8cff; border-radius: 50%; animation: game-loading-spin .76s linear infinite; }
.game-loading-progress { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(106,216,255,.12); }
.game-loading-progress span { display: block; width: 38%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--game-cyan), #9b8cff); animation: game-loading-progress 1.05s ease-in-out infinite; }
@keyframes game-loading-spin { to { transform: rotate(360deg); } }
@keyframes game-loading-progress { from { transform: translateX(-130%); } to { transform: translateX(290%); } }
@keyframes game-loading-fade-in { from { opacity: 0; } to { opacity: 1; } }
.simple-editor-round-tabs { display: flex; gap: 6px; margin-bottom: 13px; }
.simple-editor-round-heading { margin-bottom: 13px; }
.simple-editor-repeat-list { display: grid; gap: 11px; }
.simple-search-editor-category { margin-top: 0; }
.simple-clue-editor-list { display: grid; gap: 10px; margin: 12px 0; }
.simple-clue-editor-card { padding: 13px; border: 1px solid rgba(106,216,255,.12); border-radius: 12px; background: rgba(19,38,64,.48); }
.game-button--danger { border-color: rgba(255,156,174,.28); color: var(--game-danger); background: rgba(80,28,48,.38); }
.simple-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 13px; border: 1px solid var(--game-border); border-radius: 0 0 14px 14px; background: #09192d; }
.simple-editor-footer > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.simple-status-field { display: flex; align-items: center; gap: 7px; color: var(--game-muted); font-size: 11px; }
.simple-status-field select { min-height: 38px; padding: 0 8px; border: 1px solid #284c75; border-radius: 9px; color: var(--game-text); background: #0d1b2f; }
.simple-publish-checks { margin-top: 13px; }.simple-publish-checks ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: var(--game-muted); font-size: 12px; }.simple-publish-checks li { padding: 8px 10px; border-radius: 8px; background: rgba(7,17,31,.4); }.simple-publish-checks .check-warn { color: #ffd86a; }.simple-publish-checks .check-ok { color: #b8e99b; }

@media (min-width: 700px) {
  .simple-detail-grid, .simple-lobby-grid, .simple-clue-columns { grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); }
  .simple-room-layout { grid-template-columns: minmax(0, 1.45fr) minmax(250px, .7fr); }
  .simple-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .simple-editor-grid > .simple-editor-field:nth-child(2), .simple-editor-grid > .simple-editor-field:nth-child(5) { grid-column: 1 / -1; }
  .simple-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .simple-room-heading, .simple-editor-footer, .simple-lobby-role { align-items: stretch; flex-direction: column; }
  .simple-room-heading__action, .simple-room-heading__action form, .simple-room-heading__action .game-button { width: 100%; }
  .simple-editor-footer > div, .simple-editor-footer .game-button { width: 100%; }
  .simple-editor-footer > div { display: grid; }
  .simple-chat-form { flex-direction: column; }.simple-chat-form .game-button { width: 100%; }
}

/* Contrast and suspect/accusation surfaces: keep text readable even when a
   browser applies an unexpected theme or an editor panel is very dark. */
.simple-editor-panel,
.simple-role-editor-card,
.simple-search-editor-category,
.simple-clue-editor-card,
.simple-suspect-editor-card {
  color: #eaf4ff;
  background: #10233d;
}
.simple-editor-field input,
.simple-editor-field textarea,
.simple-editor-field select,
.simple-status-field select {
  color: #f5f9ff;
  background: #07182d;
  border-color: #4d78a5;
}
.simple-editor-field input::placeholder,
.simple-editor-field textarea::placeholder { color: #9db5d0; opacity: 1; }
.simple-editor-label,
.simple-editor-hint,
.simple-editor-intro p:last-child,
.simple-editor-tabs button { color: #c7d9ee; }
.simple-editor-tabs button.is-active,
.simple-editor-round-tabs button.is-active { color: #ffffff; background: #24558f; }
.simple-editor-checkbox { display: flex; align-items: center; gap: 9px; min-height: 42px; color: #eaf4ff; font-size: 12px; font-weight: 700; }
.simple-editor-checkbox input { width: 18px; height: 18px; accent-color: #6ad8ff; }
.simple-story-preview { margin-top: 11px; padding: 12px 14px; border: 1px solid rgba(106,216,255,.28); border-radius: 11px; color: #e8f4ff; background: #0b1e36; }
.simple-story-preview__title { display: block; margin-bottom: 8px; color: #6ad8ff; font-size: 12px; }
.simple-story-preview__content { min-height: 24px; white-space: pre-wrap; color: #dcecff; font-size: 12px; line-height: 1.85; }
.simple-story-highlight { padding: 1px 3px; border-radius: 4px; color: #061323; background: #6ad8ff; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.simple-story-preview-empty { margin: 0; color: #9fc0df; }
.simple-suspect-editor-section { margin-top: 16px; padding-top: 4px; }
.simple-suspect-editor-section > .simple-editor-card-head h2 { color: #f5f9ff; font-size: 18px; }
.simple-suspect-role-summary { padding: 11px 13px; border: 1px solid rgba(106,216,255,.18); border-radius: 10px; background: #0b1e36; }
.simple-suspect-role-summary h3, .simple-suspect-role-summary p, .simple-suspect-role-summary small { margin: 0; }
.simple-suspect-role-summary h3 { color: #ffffff; font-size: 15px; }
.simple-suspect-role-summary p { margin-top: 4px; color: #d2e1f1; font-size: 12px; line-height: 1.6; }
.simple-suspect-role-summary small { display: block; margin-top: 5px; color: #9fc0df; font-size: 10px; }
.simple-empty-clues { padding: 10px 0; color: #b5cbe4; }
.game-status { color: #d8e9fb; background: #163454; }
.game-form-message { color: #d7ffe9; background: #123f38; border-color: #368b77; }
.game-form-error { color: #ffe3e8; background: #522838; border-color: #b85d76; }
.simple-search-clue strong { color: #f5f9ff; }
.simple-search-clue small { color: #b5cbe4; }
.simple-suspect-panel { margin-top: 13px; }
.simple-script-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.simple-script-facts span { padding: 8px 10px; border: 1px solid rgba(106,216,255,.25); border-radius: 9px; color: #c7d9ee; background: #102b4a; font-size: 11px; }
.simple-script-facts strong { color: #ffffff; font-size: 15px; }
.simple-room-script-list { margin-top: 13px; }
.simple-room-script-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(106,216,255,.16); }
.simple-room-script-card:last-child { border-bottom: 0; }
.simple-room-script-card h3, .simple-room-script-card p { margin: 0; }
.simple-room-script-card h3 { color: #f5f9ff; font-size: 15px; }
.simple-room-script-card p { margin-top: 5px; color: #c7d9ee; font-size: 12px; line-height: 1.7; }
.simple-room-script-card .simple-script-facts { flex: 0 0 auto; margin-top: 0; }
.simple-suspect-grid { display: grid; gap: 9px; }
.simple-suspect-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; border: 1px solid rgba(106,216,255,.22); border-radius: 12px; background: #0b1e36; }
.simple-suspect-card h3, .simple-suspect-card p, .simple-suspect-card small { margin: 0; }
.simple-suspect-card h3 { font-size: 14px; }
.simple-suspect-card p { margin-top: 3px; color: #d2e1f1; font-size: 11px; line-height: 1.55; }
.simple-suspect-card small { display: block; margin-top: 4px; color: #9fc0df; font-size: 10px; }
.simple-suspect-avatar { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; overflow: hidden; border: 1px solid #4d78a5; border-radius: 11px; color: #6ad8ff; background: #173a61; font-weight: 800; }
.simple-suspect-avatar:not(.simple-suspect-avatar--empty) { object-fit: cover; }
.simple-task-list { margin: 13px 0; padding: 13px 15px; border: 1px solid rgba(106,216,255,.24); border-radius: 12px; color: #eaf4ff; background: #102b4a; }
.simple-task-list strong { color: #6ad8ff; font-size: 12px; }
.simple-task-list ol { margin: 8px 0 0 18px; padding: 0; color: #d9e8f6; font-size: 12px; line-height: 1.8; }
.simple-correct-answer { margin-top: 14px; padding: 11px 13px; border-radius: 10px; color: #e8f6ff; background: #173d62; }
.simple-correct-answer strong { color: #6ad8ff; }
.simple-vote-panel h2 { color: #f5f9ff; }

@media (min-width: 700px) {
  .simple-suspect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .simple-room-script-card { align-items: stretch; flex-direction: column; }
  .simple-room-script-card .simple-script-facts { justify-content: flex-start; }
}

/* Compact player room layout and in-page navigation. */
html { scroll-behavior: smooth; }
[id^="room-section-"] { scroll-margin-top: 88px; }
.simple-room-heading { align-items: center; margin: 8px 2px 12px; }
.simple-room-heading h1 { line-height: 1.15; }
.simple-room-heading p:not(.game-eyebrow) { line-height: 1.6; }
.simple-room-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin-top: 8px !important; }
.simple-room-summary strong { flex: 0 0 auto; color: var(--game-text); font-size: 12px; }
.simple-room-phase-description { margin-top: 4px !important; color: var(--game-faint) !important; font-size: 12px !important; }
.simple-room-heading__action { flex: 0 0 auto; }
.simple-room-status-actions, .simple-room-host-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.simple-room-host-actions form, .simple-room-dismiss-form { margin: 0; }
.simple-room-host-actions .game-button { min-height: 36px; }
.simple-room-jump-nav { position: sticky; top: 9px; z-index: 20; display: flex; align-items: center; gap: 5px; max-width: 100%; margin: 0 0 10px; padding: 5px; overflow-x: auto; border: 1px solid rgba(106,216,255,.24); border-radius: 13px; background: rgba(8,22,39,.9); box-shadow: 0 8px 24px rgba(0,0,0,.22); backdrop-filter: blur(14px); }
.simple-room-jump-nav__label { flex: 0 0 auto; padding: 0 6px; color: var(--game-faint); font-size: 10px; white-space: nowrap; }
.simple-room-jump-nav__item { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 4px; min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; color: var(--game-muted); background: transparent; font-size: 11px; white-space: nowrap; cursor: pointer; }
.simple-room-jump-nav__item:hover:not(:disabled), .simple-room-jump-nav__item:focus-visible { border-color: rgba(106,216,255,.35); color: var(--game-text); background: rgba(31,79,132,.45); outline: none; }
.simple-room-jump-nav__item span { color: var(--game-cyan); font-size: 12px; }
.simple-room-jump-nav__item:disabled { color: #526982; background: rgba(7,17,31,.32); cursor: not-allowed; opacity: .62; }
.simple-room-layout { gap: 10px; }
.simple-room-layout .game-panel { padding: 16px; border-radius: 15px; }
.simple-room-layout .game-panel h2 { margin: 12px 0 6px; font-size: 19px; }
.simple-room-layout .game-panel h3 { margin: 10px 0 5px; font-size: 15px; }
.simple-room-layout .game-panel p { line-height: 1.65; }
.simple-room-layout .simple-suspect-panel { margin-top: 0; }
.simple-room-layout .simple-suspect-grid { gap: 7px; }
.simple-room-layout .simple-suspect-card { padding: 8px; border-radius: 10px; }
.simple-room-layout .simple-suspect-card h3 { margin: 0; }
.simple-room-layout .simple-suspect-card p { line-height: 1.5; }
.simple-private-story h2 { font-size: 21px; }
.simple-role-profile { margin: 7px 0 10px !important; line-height: 1.65 !important; }
.simple-task-list { margin: 9px 0; padding: 10px 12px; }
.simple-task-list ol { margin-top: 5px; line-height: 1.55; }
.simple-private-task { margin: 9px 0; padding: 10px 12px; }
.simple-private-task strong { margin-bottom: 4px; }
.simple-private-task div, .simple-story-content { font-size: 13px; line-height: 1.65; }
.simple-story-list { gap: 8px; }
.simple-story-card { padding: 11px 12px; border-radius: 11px; }
.simple-card-label { margin-bottom: 5px; }
.simple-ready-action { margin-top: 11px; }
.simple-room-clue-stack { display: grid; gap: 10px; }
.simple-room-clue-stack .simple-search-panel, .simple-room-clue-stack .simple-clue-columns { margin-top: 0; }
.simple-search-grid { gap: 8px; margin-top: 10px; }
.simple-search-category { padding: 11px; border-radius: 11px; }
.simple-search-category h3 { font-size: 15px; }
.simple-search-category ul { gap: 5px; margin-top: 8px; }
.simple-search-clue { gap: 8px; padding: 8px 9px; border-radius: 8px; }
.simple-search-clue small { margin-top: 2px; }
.simple-clue-columns { gap: 10px; }
.simple-clue-columns > .game-panel { padding: 14px; }
.simple-clue-content { padding: 9px 0; }
.simple-clue-content h3 { font-size: 14px; }
.simple-clue-content > div:not(.game-panel__top):not(.simple-clue-actions) { margin-top: 5px; font-size: 12px; line-height: 1.6; }
.simple-clue-actions { margin-top: 7px; }
.simple-chat-list { gap: 6px; margin: 9px 0; }
.simple-chat-message { padding: 8px 10px; }
.simple-vote-options { gap: 6px; margin: 11px 0; }
.simple-vote-option { padding: 9px 10px; }
.simple-events-panel ul { gap: 5px; line-height: 1.5; }
.simple-events-panel li { padding-bottom: 5px; }
.simple-room-row { align-items: center; padding: 9px 0; }
.simple-room-row > a { display: grid; flex: 1; min-width: 0; gap: 3px; }
.simple-room-row__aside { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.simple-room-row__aside .game-status { white-space: nowrap; }
.simple-room-closed { margin-top: 20px; }

@media (min-width: 700px) {
  .simple-clue-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .simple-room-heading__action, .simple-room-status-actions, .simple-room-host-actions, .simple-room-host-actions form, .simple-room-host-actions .game-button { width: 100%; }
  .simple-room-status-actions { justify-content: flex-start; }
  .simple-room-host-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .simple-room-host-actions .game-button { width: 100%; padding-inline: 8px; }
  .simple-room-row { align-items: flex-start; }
  .simple-room-row__aside { align-items: flex-end; flex-direction: column; }
}

/* Reference-inspired room tabs and evidence cards. Keep the five destinations
   visible together on narrow phones while retaining the accessible nav label. */
.simple-room-jump-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  overflow: visible;
  border-color: rgba(149, 133, 198, .24);
  background: rgba(29, 28, 43, .95);
}
.simple-room-jump-nav__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.simple-room-jump-nav__item {
  min-width: 0;
  min-height: 34px;
  padding: 0 4px;
  gap: 0;
  border-radius: 8px;
  font-size: 11px;
  letter-spacing: -.03em;
}
.simple-room-jump-nav__item span { display: none; }
.simple-room-jump-nav__item.is-current {
  border-color: transparent;
  color: #ffd86a;
  background: rgba(255, 216, 106, .07);
  box-shadow: inset 0 -2px 0 #ffd86a;
}
.simple-room-jump-nav__item.is-current:hover,
.simple-room-jump-nav__item.is-current:focus-visible {
  border-color: transparent;
  color: #ffe7a0;
  background: rgba(255, 216, 106, .12);
}
.simple-room-layout .simple-private-story,
.simple-room-layout .simple-search-panel,
.simple-room-layout .simple-clue-columns > .game-panel,
.simple-room-layout .simple-chat-panel,
.simple-room-layout .simple-vote-panel,
.simple-room-layout .simple-truth-panel {
  border-color: rgba(157, 141, 201, .18);
  background: linear-gradient(145deg, #242331, #1f1e2b);
}
.simple-room-layout .simple-story-card,
.simple-room-layout .simple-search-clue,
.simple-room-layout .simple-clue-content {
  color: #37343b;
  border: 1px solid rgba(117, 103, 76, .25);
  background: #f0ead8;
  box-shadow: 0 5px 14px rgba(4, 5, 12, .13);
}
.simple-room-layout .simple-story-card .simple-card-label { color: #8d774d; }
.simple-room-layout .simple-story-card .simple-story-content,
.simple-room-layout .simple-clue-content > div:not(.game-panel__top):not(.simple-clue-actions) {
  color: #37343b;
}
.simple-room-layout .simple-story-card .role-name-highlight { color: #2d6da6; }
.simple-room-layout .simple-search-category { background: #292735; border-color: rgba(157, 141, 201, .2); }
.simple-room-layout .simple-search-clue strong { color: #37343b; }
.simple-room-layout .simple-search-clue small { color: #8d806d; }
.simple-room-layout .simple-clue-content { margin: 7px 0 0; padding: 10px; border-radius: 10px; }
.simple-room-layout .simple-clue-content:first-child { margin-top: 0; }
.simple-room-layout .simple-clue-content h3 { color: #37343b; }
.simple-room-layout .simple-clue-content .game-status { color: #76684e; background: #ded3b5; border-color: rgba(117, 103, 76, .22); }
.simple-room-layout .simple-clue-content .game-text-link { color: #2d6da6; }
.simple-room-layout .simple-points strong { color: #ffd86a; }

@media (max-width: 620px) {
  .simple-room-jump-nav {
    top: 6px;
    gap: 2px;
    margin-bottom: 8px;
    padding: 3px;
    border-radius: 11px;
  }
  .simple-room-jump-nav__item {
    min-height: 30px;
    padding: 0 2px;
    font-size: clamp(9px, 2.8vw, 10.5px);
  }
  .simple-room-layout .game-panel { padding: 13px; }
  .simple-room-layout .simple-story-card,
  .simple-room-layout .simple-search-clue,
  .simple-room-layout .simple-clue-content { box-shadow: none; }
}

/* Immersive player room.  The active room uses its own compact app shell so
   the old room hall can remain the return destination. */
body.room-screen-body {
  /* Do not make the body a non-scrolling overflow ancestor.  That prevents
     sticky descendants from following the document scroll on mobile Safari
     and Chromium.  `visible` is the fallback for older engines; modern
     engines use `clip` to suppress accidental horizontal overflow without
     creating a new scroll container. */
  overflow-x: visible;
  overflow-x: clip;
  overflow-y: visible;
  overscroll-behavior: none;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
  color: #f6f0e6;
  background: radial-gradient(circle at 8% 0%, rgba(113, 93, 169, .16), transparent 31%), radial-gradient(circle at 93% 12%, rgba(92, 63, 126, .14), transparent 25%), linear-gradient(145deg, #171622 0%, #1c1a28 54%, #15141f 100%);
}
body.room-screen-body::before { opacity: .14; background-image: radial-gradient(circle at 15% 21%, #fff0c1 0 1px, transparent 1.5px), radial-gradient(circle at 79% 35%, #c3a5e8 0 1px, transparent 1.5px), radial-gradient(circle at 55% 8%, #fff7df 0 1px, transparent 1.5px), radial-gradient(circle at 90% 83%, #c3a5e8 0 1px, transparent 1.5px); }
.room-app { position: relative; z-index: 1; width: 100%; min-height: 100vh; padding-bottom: 104px; background-color: transparent; }
.room-screen { width: min(920px, 100%); min-height: 100vh; margin: 0 auto; padding: 12px 12px 30px; }
.room-realtime-status { position: fixed; top: max(8px, env(safe-area-inset-top)); right: 10px; z-index: 80; max-width: 180px; padding: 4px 8px; border: 1px solid rgba(157, 141, 201, .24); border-radius: 999px; color: #b9afc0; background: rgba(30, 28, 43, .9); box-shadow: 0 6px 18px rgba(4, 3, 9, .2); font-size: 9px; line-height: 1.25; opacity: .88; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.room-realtime-status[data-room-connection-state="connected"] { transform: translateY(-5px); opacity: 0; }
.room-realtime-status[data-room-connection-state="disconnected"] { border-color: rgba(255, 137, 153, .38); color: #ffc9d2; background: rgba(82, 40, 56, .94); }
.room-screen-topbar { position: sticky; top: 0; z-index: 70; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; margin: -12px -12px 0; padding: 6px 12px; border-bottom: 1px solid rgba(157, 141, 201, .24); background: rgba(24, 22, 35, .98); box-shadow: 0 8px 22px rgba(6, 4, 13, .24); backdrop-filter: blur(16px); }
.room-screen-back { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 5px 0 1px; color: #c5bdca; font-size: 11px; }
.room-screen-back span:first-child { color: #ffd86a; font-size: 28px; font-weight: 300; line-height: .7; }
.room-screen-back:hover, .room-screen-back:focus-visible { color: #fff0bd; outline: none; }
.room-screen-title { min-width: 0; text-align: center; }
.room-screen-title strong, .room-screen-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-screen-title strong { color: #fff7ea; font-size: 15px; letter-spacing: .02em; }
.room-screen-title small { margin-top: 2px; color: #91899f; font-size: 9px; letter-spacing: .16em; }
.room-screen-user { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; color: #c5bdca; font-size: 11px; }
.room-screen-user .game-avatar { flex: 0 0 auto; border-color: rgba(255, 216, 106, .42); color: #ffd86a; background: linear-gradient(145deg, #45344b, #272335); box-shadow: none; }
.room-screen-user > span:not(.game-avatar) { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-screen-user > a { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 0 5px 5px; color: #c7bdcf; font-size: 11px; line-height: 1; white-space: nowrap; }
.room-screen-user > a:hover, .room-screen-user > a:focus-visible { color: #ffd86a; outline: none; }
.room-screen-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; padding: 10px 12px; border: 1px solid rgba(157, 141, 201, .16); border-radius: 13px; background: rgba(35, 32, 48, .84); box-shadow: 0 10px 28px rgba(6, 4, 13, .15); }
.room-screen-phase { min-width: 0; }
.room-screen-phase > span, .room-screen-phase > small { display: block; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.room-screen-phase > span { color: #ffe8a5; font-size: 12px; font-weight: 800; }
.room-screen-phase > small { max-width: 48em; margin-top: 3px; color: #9890a2; font-size: 10px; line-height: 1.55; }
.room-screen-status { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.room-screen-status > .game-status { flex: 0 0 auto; color: #d9d0dc; background: #383245; border-color: rgba(255, 216, 106, .18); }
.room-screen-status > .game-status--live { color: #ffe48a; border-color: rgba(255, 216, 106, .46); background: rgba(102, 74, 45, .36); }
.room-screen-status .simple-room-host-actions { width: auto; justify-content: flex-end; }
.room-screen-status .simple-room-host-actions .game-button { min-height: 32px; padding: 0 9px; border-radius: 8px; font-size: 10px; }
.room-screen-status .simple-room-host-actions .game-button--ghost { color: #d2c8dd; border-color: rgba(157, 141, 201, .28); background: #2c2939; }
.room-screen-status .simple-room-host-actions .game-button--danger { color: #ffc0c5; border-color: rgba(255, 137, 153, .35); background: rgba(116, 48, 67, .42); }
.room-screen > .game-form-message, .room-screen > .game-form-error { margin: 9px 0; }
.room-round-update { margin: 9px 0 12px; padding: 13px 14px; border: 1px solid rgba(255, 216, 106, .36); border-radius: 13px; color: #e9dfc9; background: linear-gradient(145deg, rgba(80, 61, 39, .74), rgba(50, 43, 43, .84)); box-shadow: 0 9px 24px rgba(6, 4, 13, .2); }
.room-round-update .game-eyebrow { margin: 0 0 4px; color: #ffd86a; }
.room-round-update h3 { margin: 0 0 7px; color: #fff3c9; font-size: 16px; }
.room-round-update__content, .room-round-update__hint { color: #e2d8cb; font-size: 12px; line-height: 1.75; white-space: normal; }
.room-round-update__hint { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid rgba(255, 216, 106, .18); color: #f1d88f; }
.room-screen-tabs-wrap { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 52px); z-index: 34; margin: 10px 0 12px; }
.room-screen-tabs { position: sticky; top: 0; z-index: 34; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 3px; border: 1px solid rgba(195, 165, 232, .72); border-radius: 11px; color: #fff; background: rgba(24, 22, 35, .90); box-shadow: 0 9px 24px rgba(6, 4, 13, .38); backdrop-filter: none; -webkit-backdrop-filter: none; }
.room-screen-tab { position: relative; min-width: 0; min-height: 30px; padding: 0 4px; border: 0; border-radius: 8px; color: #fff; background: transparent; font-size: 12px; letter-spacing: .02em; white-space: nowrap; cursor: pointer; transition: color .2s ease, background .2s ease, box-shadow .2s ease; }
.room-screen-tab:hover:not(:disabled), .room-screen-tab:focus-visible { color: #fff; background: rgba(255, 255, 255, .10); outline: none; }
.room-screen-tab.is-current, .room-screen-tab[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .16); box-shadow: inset 0 -2px 0 rgba(195, 165, 232, .92); }
.room-screen-tab:disabled { color: #655d70; background: rgba(20, 18, 28, .24); }
.room-screen-tab__dot { position: absolute; top: 3px; right: 5px; display: none; min-width: 7px; height: 15px; padding: 0 4px; border: 2px solid #302c3d; border-radius: 999px; color: #fff; background: #ff5e72; box-shadow: 0 0 0 2px rgba(255, 94, 114, .18); font-size: 8px; font-style: normal; font-weight: 700; line-height: 11px; text-align: center; pointer-events: none; }
.room-screen-tab.has-unread-update .room-screen-tab__dot { display: block; }
.room-stage { min-height: 164px; touch-action: pan-y; }
.room-view-panel[hidden], .room-search-clue-panel[hidden] { display: none !important; }
.room-view-panel.is-active { animation: none !important; opacity: 1; transform: none; }
.room-view-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 5px 2px 10px; }
.room-view-heading h2 { margin: 0; color: #fff8ec; font-size: clamp(21px, 5vw, 30px); letter-spacing: -.04em; }
.room-view-badge { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(255, 216, 106, .25); border-radius: 999px; color: #d5bc78; background: rgba(101, 74, 38, .24); font-size: 10px; }
.room-case-card { margin-bottom: 10px; padding: 14px; border: 1px solid rgba(157, 141, 201, .2); border-radius: 14px; background: linear-gradient(145deg, #292634, #23212e); box-shadow: 0 12px 30px rgba(6, 4, 13, .15); }
.room-case-card p:not(.room-case-card__label) { margin: 0; color: #c5bdca; font-size: 13px; line-height: 1.75; }
.room-case-card__label, .room-card-label { margin: 0 0 7px; color: #ffd86a; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.room-case-card .simple-script-facts { margin-top: 11px; }
.room-case-card .simple-script-facts span { padding: 6px 8px; border-color: rgba(157, 141, 201, .2); color: #bdb3c8; background: #332f40; font-size: 10px; }
.room-case-card .simple-script-facts strong { color: #ffe28a; font-size: 13px; }
.room-view-panel .game-panel, .room-view-panel .simple-private-story, .room-view-panel .simple-clue-columns > .game-panel, .room-view-panel .simple-chat-panel, .room-view-panel .simple-vote-panel, .room-view-panel .simple-truth-panel, .room-view-panel .room-role-card, .room-view-panel .room-search-console { border-color: rgba(157, 141, 201, .18); background: linear-gradient(145deg, #272532, #211f2c); box-shadow: 0 12px 28px rgba(6, 4, 13, .14); }
.room-view-panel .game-panel { padding: 15px; border-radius: 14px; }
.room-view-panel .game-panel h2, .room-view-panel .game-panel h3 { color: #fff5e6; }
.room-view-panel .game-panel p { color: #c5bdca; line-height: 1.7; }
.room-view-panel .simple-private-story { margin: 0; }
.room-view-panel .simple-private-story h2 { color: #fff5e6; font-size: 20px; }
.room-view-panel .simple-story-list { gap: 8px; }
.room-view-panel .simple-story-card { padding: 12px; border-color: rgba(117, 103, 76, .24); border-radius: 11px; color: #37343b; background: #f0ead8; box-shadow: 0 6px 16px rgba(6, 4, 13, .12); }
.room-view-panel .simple-story-card .simple-card-label { color: #8d774d; }
.room-view-panel .simple-story-card .simple-story-content { color: #37343b; font-size: 13px; line-height: 1.72; }
.room-view-panel .simple-story-card .role-name-highlight { color: #2d6da6; }
.room-role-card { margin: 0; }
.room-current-role-identity { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; padding: 9px 10px; border: 1px solid rgba(255, 216, 106, .18); border-radius: 11px; background: rgba(62, 49, 65, .62); }
.room-current-role-identity > div { display: grid; gap: 2px; min-width: 0; }
.room-current-role-identity strong { color: #fff0c2; font-size: 14px; }
.room-current-role-identity span { color: #bdb2c5; font-size: 11px; overflow-wrap: anywhere; }
.room-current-role-identity .game-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-color: rgba(255, 216, 106, .38); color: #ffd86a; background: #45344b; }
.room-role-profile { margin: 0 0 10px !important; color: #e2d9e4 !important; white-space: pre-wrap; }
.room-view-panel .simple-private-task { margin: 10px 0 0; padding: 10px 12px; border-left-color: #ffd86a; background: rgba(39, 34, 53, .85); }
.room-view-panel .simple-private-task strong { margin-bottom: 5px; color: #ffd86a; }
.room-view-panel .simple-private-task div { color: #e5dce6; font-size: 12px; line-height: 1.7; white-space: normal; }
.room-view-panel .game-panel__hint { color: #91899f !important; }
.room-stage-placeholder { display: grid; min-height: 250px; place-items: center; align-content: center; gap: 6px; padding: 28px 18px; border: 1px dashed rgba(157, 141, 201, .28); border-radius: 15px; color: #b6adbd; background: rgba(35, 32, 48, .55); text-align: center; }
.room-stage-placeholder strong { color: #f7d879; font-size: 15px; }
.room-stage-placeholder span { color: #91899f; font-size: 11px; }
.room-view-panel .simple-suspect-panel { margin: 0; }
.room-view-panel .simple-suspect-grid { gap: 8px; }
.room-view-panel .simple-suspect-card { padding: 9px; border-color: rgba(157, 141, 201, .22); background: #2d2a3a; }
.room-view-panel .simple-suspect-card h3 { color: #fff3dd; }
.room-view-panel .simple-suspect-card p { color: #c5bdca; }
.room-view-panel .simple-suspect-card small { color: #a39aab; }
.room-log { margin-top: 9px; padding: 0 13px; border: 1px solid rgba(157, 141, 201, .16); border-radius: 13px; background: rgba(35, 32, 48, .72); }
.room-log summary { padding: 11px 0; color: #d4c9d9; font-size: 12px; cursor: pointer; }
.room-log summary::marker { color: #ffd86a; }
.room-log-tools { margin: -2px 0 9px; }
.room-log-tools .role-name-toggle { display: inline-flex; margin-left: 0; border-color: rgba(157, 141, 201, .22); color: #aaa1b1; background: #302d3c; }
.room-log-tools .role-name-toggle:hover { border-color: rgba(255, 216, 106, .38); color: #fff0bd; }
.room-log-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 0 0 12px; }
.room-log-grid section { min-width: 0; }
.room-log-grid h3 { margin: 0 0 6px; color: #ffd86a; font-size: 11px; }
.room-log-grid ul { display: grid; gap: 5px; margin: 0; padding: 0; color: #aaa1b1; font-size: 11px; line-height: 1.55; list-style: none; }
.room-log-grid li { padding-bottom: 5px; border-bottom: 1px solid rgba(157, 141, 201, .1); }
.room-search-console { margin: 0; padding: 13px; border-radius: 15px; }
.room-search-console__head { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.room-search-console__head h2 { margin: 0; color: #fff5e6; font-size: 22px; }
.room-search-console__head p:not(.game-eyebrow) { margin: 4px 0 0; color: #9f96a9; font-size: 11px; line-height: 1.5; }
.room-search-points { display: flex; align-items: baseline; gap: 4px; flex: 0 0 auto; padding: 7px 9px; border: 1px solid rgba(255, 216, 106, .25); border-radius: 10px; color: #bcb2c4; background: rgba(100, 74, 41, .2); }
.room-search-points span { font-size: 10px; }
.room-search-points strong { color: #ffd86a; font-size: 25px; line-height: 1; }
.room-search-points small { color: #91899f; font-size: 10px; }
.room-search-console--all-visible .room-search-points { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.room-search-console--all-visible .simple-share-disabled { flex-basis: 100%; margin-top: 2px; }
.room-search-layout { display: grid; grid-template-columns: minmax(84px, 109px) minmax(0, 1fr); gap: 10px; align-items: start; }
.room-search-area-nav { position: sticky; top: 104px; display: grid; align-content: start; gap: 4px; min-width: 0; padding-right: 8px; border-right: 1px solid rgba(157, 141, 201, .16); }
.room-search-area-tab { position: relative; display: grid; gap: 2px; min-width: 0; padding: 6px 6px; border: 1px solid transparent; border-left: 2px solid transparent; border-radius: 8px; color: #a99faf; background: transparent; text-align: left; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.room-search-area-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.room-search-area-tab small { color: #776e83; font-size: 9px; }
.room-search-area-tab__dot { position: absolute; top: 6px; right: 6px; display: none; min-width: 7px; height: 16px; padding: 0 4px; border: 2px solid #302c3d; border-radius: 999px; color: #fff; background: #ff5e72; box-shadow: 0 0 0 2px rgba(255, 94, 114, .18); font-size: 9px; font-style: normal; font-weight: 700; line-height: 12px; text-align: center; pointer-events: none; }
.room-search-area-tab.has-unread-update .room-search-area-tab__dot { display: block; }
.room-search-area-tab:hover, .room-search-area-tab:focus-visible { color: #fff0bd; background: rgba(255, 216, 106, .06); outline: none; }
.room-search-area-tab.is-active { border-color: rgba(157, 141, 201, .15); border-left-color: #ffd86a; color: #ffe291; background: #302c3d; }
.room-search-area-tab.is-active small { color: #b5a071; }
.room-search-area-tab--locked { border-style: dashed; border-color: rgba(157, 141, 201, .18); color: #aaa1b1; }
.room-search-area-tab--locked small { color: #9f8e68; }
.room-search-clue-stage { min-width: 0; }
.room-search-round-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 10px 0 6px; padding: 0 2px 5px; border-bottom: 1px solid rgba(157, 141, 201, .14); }
.room-search-round-heading:first-child { margin-top: 0; }
.room-search-round-heading span { color: #ffd86a; font-size: 11px; font-weight: 700; }
.room-search-round-heading small { color: #91899f; font-size: 9px; }
.room-search-clue-panel.is-active { animation: room-area-in .24s ease both; }
@keyframes room-area-in { from { opacity: .35; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.room-search-clue-panel__head { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.room-search-clue-panel__head h3 { margin: 0; color: #fff1d6; font-size: 16px; }
.room-search-clue-panel__head .game-eyebrow { margin-bottom: 4px; }
.room-search-clue-panel__head .game-status { color: #b9afc0; background: #342f40; border-color: rgba(157, 141, 201, .22); }
.room-search-clue-list { display: grid; gap: 8px; }
.room-search-clue-card { min-width: 0; padding: 11px; border: 1px solid rgba(117, 103, 76, .25); border-radius: 11px; color: #37343b; background: #f0ead8; box-shadow: 0 6px 14px rgba(6, 4, 13, .12); }
.room-search-clue-card__head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.room-search-clue-card__head > div { min-width: 0; }
.room-search-clue-card__head h4 { margin: 0; overflow: hidden; color: #37343b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.room-search-clue-card__head span:not(.room-search-clue-state) { display: block; margin-top: 4px; color: #8d806d; font-size: 10px; }
.room-search-clue-state { flex: 0 0 auto; padding: 3px 6px; border-radius: 999px; color: #76684e; background: #ded3b5; font-size: 9px; white-space: nowrap; }
.room-search-clue-state--blocked { color: #806536; background: #ead9a8; }
.room-search-clue-state--mine { color: #2d6da6; background: #d4e4ee; }
.room-search-clue-state--public { color: #537c43; background: #d8e6c8; }
.room-search-clue-card__body { margin-top: 9px; color: #37343b; font-size: 12px; line-height: 1.7; white-space: normal; }
.room-search-clue-card__body p { margin: 0; color: inherit; }
.room-search-clue-card__action { display: flex; justify-content: flex-end; margin-top: 9px; }
.room-search-clue-card__action form { margin: 0; }
.room-search-clue-card .game-button { min-height: 32px; padding: 0 11px; border-radius: 8px; font-size: 11px; }
.room-search-clue-card .game-button--primary { color: #fff; }
.room-search-clue-card .game-button--ghost { border-color: rgba(45, 109, 166, .28); color: #2d6da6; background: #e4edf1; }
.room-search-clue-card .game-button--ghost:hover:not(:disabled) { background: #d4e4ee; }
.room-search-category-note { margin: -2px 0 9px; padding: 8px 10px; border: 1px solid rgba(157, 141, 201, .18); border-radius: 9px; color: #a99eaa; background: rgba(157, 141, 201, .07); font-size: 10px; line-height: 1.55; }
.room-action-toast { position: fixed; top: max(64px, calc(env(safe-area-inset-top) + 52px)); left: 50%; z-index: 90; width: min(420px, calc(100% - 28px)); padding: 10px 14px; transform: translate(-50%, -8px); border: 1px solid rgba(255, 137, 153, .48); border-radius: 12px; color: #ffe3e8; background: rgba(82, 40, 56, .97); box-shadow: 0 12px 30px rgba(4, 3, 9, .32); opacity: 0; pointer-events: none; text-align: center; font-size: 12px; line-height: 1.5; transition: opacity .22s ease, transform .22s ease; }
.room-action-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.room-view-panel .simple-clue-columns { gap: 9px; margin: 0; }
.room-view-panel .simple-clue-columns > .game-panel { margin: 0; padding: 13px; }
.room-view-panel .simple-clue-content { margin: 7px 0 0; padding: 10px; border: 1px solid rgba(117, 103, 76, .25); border-radius: 10px; color: #37343b; background: #f0ead8; }
.room-view-panel .simple-clue-content h3 { color: #37343b; }
.room-view-panel .simple-clue-content > div:not(.game-panel__top):not(.simple-clue-actions) { color: #37343b; line-height: 1.7; }
.room-view-panel .simple-clue-content .game-status { color: #76684e; background: #ded3b5; border-color: rgba(117, 103, 76, .22); }
.room-view-panel .simple-clue-content .game-text-link { color: #2d6da6; }
.room-view-panel .simple-chat-list { max-height: 380px; }
.room-view-panel .simple-chat-message { border-color: rgba(157, 141, 201, .15); background: #2d2a3a; }
.room-view-panel .simple-chat-message p { color: #e7dfea; }
.room-view-panel .simple-vote-option { padding: 10px; border-color: rgba(157, 141, 201, .2); color: #eee5ed; background: #2d2a3a; }
.room-view-panel .simple-vote-option:has(input:checked) { border-color: #ffd86a; background: rgba(102, 74, 45, .38); }
.room-view-panel .simple-truth-panel { border-color: rgba(255, 216, 106, .3); }
.room-view-panel .simple-truth-panel div { color: #e9dfeb; line-height: 1.8; }
.room-bottom-dock { position: fixed; left: 50%; bottom: max(9px, env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: min(920px, calc(100% - 18px)); min-height: 58px; padding: 7px 9px; transform: translateX(-50%); border: 1px solid rgba(195, 165, 232, .72); border-radius: 16px; color: #fff; background: rgba(24, 22, 35, .90); box-shadow: 0 10px 26px rgba(4, 3, 9, .38); backdrop-filter: none; -webkit-backdrop-filter: none; }
.room-bottom-dock__links { display: flex; align-items: center; gap: 8px; }
.room-bottom-dock__links button { display: grid; min-width: 48px; min-height: 48px; gap: 2px; padding: 3px 5px; border: 0; border-radius: 9px; color: #fff; background: transparent; cursor: pointer; }
.room-bottom-dock__links button:hover, .room-bottom-dock__links button:focus-visible { color: #fff; background: rgba(255, 255, 255, .10); outline: none; }
.room-bottom-dock__links button span { color: #fff; font-size: 20px; line-height: 1; }
.room-bottom-dock__links button small { font-size: 10px; }
.room-bottom-dock__action { display: flex; flex: 1 1 0; min-width: 0; justify-content: flex-end; }
.room-bottom-dock__action form { display: flex; width: 100%; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px 8px; min-width: 0; margin: 0; }
.room-bottom-dock__action .game-button { width: 100%; max-width: 330px; min-height: 40px; border-radius: 999px; font-size: 12px; }
.room-ready-progress { display: block; flex: 0 0 100%; color: #a79cac; font-size: 10px; line-height: 1.35; text-align: right; }
.room-ready-progress[hidden] { display: none !important; }
.room-bottom-dock__status { padding: 0 7px; color: #fff; font-size: 11px; text-align: right; }
.room-bottom-dock__status-key { color: #ffd86a; font-weight: 800; }
.room-sheet-backdrop { position: fixed; inset: 0; z-index: 55; opacity: 0; background: rgba(7, 5, 13, .62); transition: opacity .26s ease; }
.room-sheet-backdrop.is-open { opacity: 1; }
.room-sheet-backdrop[hidden], .room-info-sheet[hidden] { display: none !important; }
.room-info-sheet { position: fixed; left: 50%; bottom: 0; z-index: 60; width: min(760px, 100%); max-height: min(74vh, 640px); overflow: auto; padding: 9px 16px 24px; transform: translate(-50%, 110%); border: 1px solid rgba(157, 141, 201, .25); border-bottom: 0; border-radius: 20px 20px 0 0; color: #eee4ec; background: #292635; box-shadow: 0 -15px 42px rgba(4, 3, 9, .38); transition: transform .26s cubic-bezier(.22, .72, .22, 1); }
.room-info-sheet.is-open { transform: translate(-50%, 0); }
.room-sheet-handle { width: 42px; height: 4px; margin: 0 auto 10px; border-radius: 999px; background: #6d6478; }
.room-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.room-sheet-head h2 { margin: 0; color: #fff3d9; font-size: 19px; }
.room-sheet-head button { width: 30px; height: 30px; border: 0; border-radius: 50%; color: #c4b9c7; background: #393446; font-size: 22px; line-height: 1; cursor: pointer; }
.room-sheet-head button:hover, .room-sheet-head button:focus-visible { color: #ffd86a; outline: none; }
.room-sheet-copy { margin-top: 12px; }
.room-sheet-copy h2 { margin: 0 0 9px; color: #fff3d9; font-size: 21px; }
.room-sheet-copy > p:not(.game-eyebrow):not(.room-sheet-note) { color: #d3c8d7; font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.room-sheet-copy .room-sheet-note { margin-top: 12px; color: #9c92a4; font-size: 11px; line-height: 1.6; }
.room-sheet-copy .simple-script-facts { gap: 6px; margin-top: 11px; }
.room-sheet-copy .simple-script-facts span { padding: 6px 8px; border-color: rgba(157, 141, 201, .2); color: #bdb2c5; background: #353143; font-size: 10px; }
.room-sheet-copy .simple-script-facts strong { color: #ffe18b; font-size: 13px; }
.room-sheet-copy .simple-private-task { margin-top: 10px; }
.room-role-directory { display: grid; gap: 16px; margin-top: 12px; }
.room-role-directory__section { display: grid; gap: 8px; }
.room-role-directory__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room-role-directory__heading h3 { margin: 0; color: #ffd86a; font-size: 12px; }
.room-role-directory__heading span { color: #93899f; font-size: 10px; }
.room-directory-list { display: grid; gap: 8px; }
.room-directory-card { padding: 10px 11px; border: 1px solid rgba(157, 141, 201, .2); border-radius: 11px; background: #332f40; }
.room-directory-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room-directory-card__head h3 { min-width: 0; margin: 0; font-size: 14px; }
.room-directory-card__head > span { flex: 0 0 auto; color: #9d93a5; font-size: 9px; }
.room-directory-card__identity { display: flex; align-items: center; min-width: 0; gap: 8px; }
.room-directory-card__identity > div { min-width: 0; }
.room-directory-card__identity small { display: block; margin-top: 3px; color: #aaa1b1; font-size: 10px; }
.room-directory-card__identity .game-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-color: rgba(255, 216, 106, .35); color: #ffd86a; background: #45344b; }
.room-directory-card p { margin: 7px 0 0; color: #d3c8d7; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.simple-vote-progress { margin: 10px 0; padding: 8px 10px; border: 1px solid rgba(157, 141, 201, .2); border-radius: 9px; color: #ffd86a !important; background: rgba(102, 74, 45, .22); font-size: 11px; font-weight: 700; }
.room-role-directory__suspects .simple-suspect-grid { gap: 8px; }
.room-role-directory__suspects .simple-suspect-card { padding: 9px; border-color: rgba(157, 141, 201, .2); background: #332f40; }
.room-role-directory__suspects .simple-suspect-card p { color: #d3c8d7; }
.room-role-directory__suspects .simple-suspect-card small { color: #9d93a5; }

@media (min-width: 700px) {
  .room-screen { padding: 19px 20px 36px; }
  .room-screen-topbar { min-height: 52px; margin: -19px -20px 0; padding: 8px 20px; }
  .room-screen-tabs-wrap { top: calc(env(safe-area-inset-top, 0px) + 58px); }
  .room-screen-title strong { font-size: 17px; }
  .room-screen-meta { padding: 11px 14px; }
  .room-view-panel .simple-suspect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-view-panel .simple-clue-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-bottom-dock { min-height: 62px; }
}

@media (max-width: 620px) {
  .room-screen { padding: 8px 8px calc(94px + env(safe-area-inset-bottom)); min-height: 100dvh; }
  .room-screen-topbar { min-height: 48px; margin: -8px -8px 0; padding: max(6px, env(safe-area-inset-top, 0px)) 8px 6px; }
  .room-screen-title strong { font-size: 13px; }
  .room-screen-user > span:not(.game-avatar) { display: none; }
  .room-screen-meta { align-items: start; padding: 9px; }
  .room-screen-phase > small { max-width: none; }
  .room-screen-status { max-width: 48%; }
  .room-screen-status .simple-room-host-actions { display: flex; width: 100%; }
  .room-screen-status .simple-room-host-actions form { width: auto; }
  .room-screen-status .simple-room-host-actions .game-button { width: auto; }
  .room-screen-tabs-wrap { top: calc(env(safe-area-inset-top, 0px) + 52px); margin-top: 8px; scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 108px); }
  .room-screen-tabs-wrap .room-screen-tabs { top: 0; }
  .room-screen-tab { min-height: 34px; font-size: clamp(10px, 2.9vw, 12px); }
  .room-stage { min-height: 144px; }
  .room-search-console { padding: 11px; }
  .room-search-console__head { align-items: start; }
  .room-search-console__head h2 { font-size: 20px; }
  .room-search-console__head p:not(.game-eyebrow) { max-width: 190px; }
  .room-search-points { padding: 6px 7px; }
  .room-search-points strong { font-size: 22px; }
   /* Keep evidence categories in a left rail on phones. The rail scrolls
      vertically while the clue stage remains independently readable on the
      right; the room-level tabs above still switch the five main views. */
   .room-search-layout { display: grid; grid-template-columns: minmax(72px, 22.5vw) minmax(0, 1fr); gap: 8px; align-items: start; }
   .room-search-area-nav { position: sticky; top: 100px; display: grid; align-content: start; gap: 5px; min-width: 0; max-height: calc(100dvh - 192px); margin: 0; padding: 0 6px 0 0; overflow-x: hidden; overflow-y: auto; border: 0; border-right: 1px solid rgba(157, 141, 201, .16); scrollbar-width: thin; overscroll-behavior: auto; touch-action: pan-y; }
   .room-search-area-nav::-webkit-scrollbar { width: 5px; }
   .room-search-area-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(157, 141, 201, .35); }
    .room-search-area-tab { display: grid; width: 100%; min-width: 0; min-height: 34px; padding: 5px 5px; gap: 2px; border: 1px solid transparent; border-left: 2px solid transparent; border-radius: 7px; text-align: left; }
  .room-search-area-tab span { font-size: 10px; }
  .room-search-area-tab small { font-size: 8px; line-height: 1.35; }
   .room-search-area-tab.is-active { border-color: rgba(157, 141, 201, .18); border-left-color: #ffd86a; }
  .room-search-clue-stage { min-width: 0; }
  .simple-search-merge-preview__item { align-items: flex-start; flex-direction: column; gap: 2px; }
  .simple-search-merge-preview__item small { text-align: left; }
  .room-search-clue-card { padding: 9px; }
  .room-search-clue-card__head h4 { font-size: 12px; }
  .room-search-clue-card__head span:not(.room-search-clue-state) { font-size: 9px; }
  .room-search-clue-state { padding: 3px 5px; font-size: 8px; }
  .room-search-clue-card__body { font-size: 11px; }
  .room-bottom-dock { width: calc(100% - 12px); padding: 6px 7px; }
  .room-bottom-dock__links { gap: 4px; }
  .room-bottom-dock__links button { min-width: 48px; min-height: 48px; }
  .room-bottom-dock__action .game-button { max-width: none; padding: 0 13px; font-size: 11px; }
  .room-log-grid { grid-template-columns: 1fr; gap: 9px; }
  .room-info-sheet { padding-inline: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .room-view-panel.is-active, .room-search-clue-panel.is-active { animation: none; }
  .room-screen-tab, .room-search-area-tab, .room-sheet-backdrop, .room-info-sheet { transition: none; }
}

/* Light-blue role/suspect labels need dark ink for contrast. */
.role-name-highlight.role-name-tag { color: #092039; background: #8ddcff; }
.simple-suspect-card h3.role-name-highlight,
.room-view-panel .simple-story-card .role-name-highlight,
.room-view-panel .simple-private-story h2.role-name-highlight { color: #092039; background: #bfeeff; }
.room-search-console .role-name-highlight { color: #092039; background: #bfeeff; }
.role-player-nickname--always { display: inline !important; }

/*
 * Mobile scroll architecture
 * ---------------------------
 * iOS Safari/WebView can still rubber-band the root viewport even when
 * overscroll-behavior is set on html/body.  Keep the game document itself
 * fixed and give each game shell one explicit vertical scroll owner.  The
 * evidence category rail and clue stage are intentional component scrollers.
 * Chat lists and sheets keep their own boundaries so those controls remain
 * isolated.
 */
@media (max-width: 620px) {
  html {
    height: 100%;
    overflow: hidden;
  }

  body.game-body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.game-body > .game-app,
  body.game-body > .room-app,
  body.game-body > .game-auth-shell {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
  }

  /* Auth forms keep their own scroll surface so a small mobile viewport or
     an opened keyboard never clips the password/confirmation fields. */
  body.game-auth-page {
    display: block;
    padding: 0;
  }

  body.game-auth-page > .game-auth-shell {
    display: grid;
    place-items: center;
    align-content: start;
    width: 100%;
    max-width: none;
    padding: 22px 14px max(22px, env(safe-area-inset-bottom, 0px));
  }

  body.game-auth-page > .game-auth-shell > .game-auth-card {
    width: min(100%, 480px);
    margin: auto;
  }
}

/* Compact non-immersive game pages.  The active room keeps its own visual
   system above; these rules only tighten the library, lobby, profile, room
   history, preview, and creator pages. */
body.game-body:not(.room-screen-body) .game-app { width: min(1160px, 100%); padding: 12px 14px 80px; }
body.game-body:not(.room-screen-body) .game-header { position: sticky; top: 0; z-index: 70; min-height: 48px; gap: 10px; margin: -12px -14px 0; padding: max(6px, env(safe-area-inset-top, 0px)) 14px 6px; border-bottom: 1px solid rgba(29, 58, 95, .9); background: rgba(4, 11, 22, .98); box-shadow: 0 8px 22px rgba(0, 0, 0, .28); backdrop-filter: blur(16px); }
body.game-body:not(.room-screen-body) .game-brand { gap: 8px; }
body.game-body:not(.room-screen-body) .game-brand__mark { width: 32px; height: 32px; border-radius: 10px; font-size: 18px; }
body.game-body:not(.room-screen-body) .game-brand strong { font-size: 14px; }
body.game-body:not(.room-screen-body) .game-brand small { font-size: 9px; }
body.game-body:not(.room-screen-body) .game-user-pill { gap: 5px; font-size: 11px; }
body.game-body:not(.room-screen-body) .game-avatar--small { width: 26px; height: 26px; border-radius: 8px; }
body.game-body:not(.room-screen-body) .game-main { padding: 16px 0 20px; }
body.game-body:not(.room-screen-body) .game-page-heading { margin: 5px 1px 13px; }
body.game-body:not(.room-screen-body) .game-page-heading h1,
body.game-body:not(.room-screen-body) .game-profile-hero h1,
body.game-body:not(.room-screen-body) .game-hero h1 { font-size: clamp(25px, 6vw, 43px); line-height: 1.12; }
body.game-body:not(.room-screen-body) .game-page-heading p:not(.game-eyebrow),
body.game-body:not(.room-screen-body) .game-hero p:not(.game-eyebrow) { margin-top: 8px; font-size: 12px; line-height: 1.65; }
body.game-body:not(.room-screen-body) .game-eyebrow { margin-bottom: 6px; font-size: 9px; }
body.game-body:not(.room-screen-body) .game-page-heading--with-action { gap: 9px; }
body.game-body:not(.room-screen-body) .game-hero { min-height: 0; gap: 14px; padding: 20px; border-radius: 19px; }
body.game-body:not(.room-screen-body) .game-hero__actions { gap: 7px; margin-top: 16px; }
body.game-body:not(.room-screen-body) .game-hero__signal { width: min(190px, 62vw); height: 125px; }
body.game-body:not(.room-screen-body) .signal-ring--outer { width: 120px; height: 86px; }
body.game-body:not(.room-screen-body) .signal-ring--inner { width: 79px; height: 58px; }
body.game-body:not(.room-screen-body) .signal-seven { font-size: 48px; }
body.game-body:not(.room-screen-body) .game-button { min-height: 38px; padding: 0 13px; border-radius: 10px; font-size: 12px; }
body.game-body:not(.room-screen-body) .game-button--small { min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 11px; }
body.game-body:not(.room-screen-body) .game-panel { padding: 14px; border-radius: 14px; }
body.game-body:not(.room-screen-body) .game-panel h2,
body.game-body:not(.room-screen-body) .game-panel h3 { margin: 10px 0 6px; font-size: 18px; }
body.game-body:not(.room-screen-body) .game-panel h3 { font-size: 15px; }
body.game-body:not(.room-screen-body) .game-panel p { font-size: 12px; line-height: 1.65; }
body.game-body:not(.room-screen-body) .game-panel__hint { margin-top: 8px !important; font-size: 10px !important; }
body.game-body:not(.room-screen-body) .simple-flow-card { margin-top: 9px; padding: 12px 14px; border-radius: 13px; }
body.game-body:not(.room-screen-body) .simple-flow-card h2 { font-size: 16px; line-height: 1.4; }
body.game-body:not(.room-screen-body) .simple-flow-card p:last-child { margin-top: 7px; font-size: 11px; line-height: 1.6; }
body.game-body:not(.room-screen-body) .game-empty-state { min-height: 220px; margin-top: 9px; padding: 24px 18px; border-radius: 16px; }
body.game-body:not(.room-screen-body) .game-empty-state h2 { font-size: 21px; }
body.game-body:not(.room-screen-body) .game-empty-state > p:not(.game-eyebrow) { margin: 9px 0 14px; font-size: 12px; line-height: 1.65; }
body.game-body:not(.room-screen-body) .game-profile-hero { gap: 11px; padding: 14px; border-radius: 15px; }
body.game-body:not(.room-screen-body) .game-avatar--large { width: 58px; height: 58px; border-radius: 18px; font-size: 24px; }
body.game-body:not(.room-screen-body) .game-profile-username { margin-top: 4px; font-size: 11px; }
body.game-body:not(.room-screen-body) .game-action-grid,
body.game-body:not(.room-screen-body) .game-dashboard-grid,
body.game-body:not(.room-screen-body) .game-room-layout,
body.game-body:not(.room-screen-body) .game-profile-grid,
body.game-body:not(.room-screen-body) .simple-detail-grid,
body.game-body:not(.room-screen-body) .simple-lobby-grid,
body.game-body:not(.room-screen-body) .simple-clue-columns { gap: 9px; }
body.game-body:not(.room-screen-body) .game-detail-list { margin-top: 10px; }
body.game-body:not(.room-screen-body) .game-detail-list div { padding: 8px 0; }
body.game-body:not(.room-screen-body) .game-avatar-form { gap: 8px; margin-top: 10px; }
body.game-body:not(.room-screen-body) .game-avatar-form input[type="file"] { padding: 7px; }
body.game-body:not(.room-screen-body) .game-mobile-nav { right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; padding: 5px; border-radius: 14px; }
body.game-body:not(.room-screen-body) .game-mobile-nav .game-nav__item { padding: 5px 3px; border-radius: 9px; }

/* Script library: filters read like a compact segmented control and cards
   with no cover image collapse to their content instead of reserving media. */
body.game-body:not(.room-screen-body) .simple-script-filter { display: flex; gap: 4px; margin: 0 0 9px; padding: 4px; overflow-x: auto; border: 1px solid var(--game-border); border-radius: 11px; background: rgba(13,27,47,.72); scrollbar-width: none; }
body.game-body:not(.room-screen-body) .simple-script-filter::-webkit-scrollbar { display: none; }
body.game-body:not(.room-screen-body) .simple-script-filter__item { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; min-height: 31px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; color: var(--game-muted); font-size: 11px; white-space: nowrap; }
body.game-body:not(.room-screen-body) .simple-script-filter__item small { min-width: 15px; padding: 2px 4px; border-radius: 999px; color: var(--game-faint); background: rgba(7,17,31,.5); font-size: 9px; line-height: 1; text-align: center; }
body.game-body:not(.room-screen-body) .simple-script-filter__item:hover,
body.game-body:not(.room-screen-body) .simple-script-filter__item.is-active { border-color: rgba(106,216,255,.32); color: var(--game-text); background: rgba(37,83,128,.52); }
body.game-body:not(.room-screen-body) .simple-script-filter__item.is-active small { color: #07111f; background: var(--game-cyan); }
body.game-body:not(.room-screen-body) .script-grid { gap: 9px; margin-top: 9px; }
body.game-body:not(.room-screen-body) .script-card { border-radius: 15px; }
body.game-body:not(.room-screen-body) .simple-script-card .script-card__cover { min-height: 116px; padding: 11px; }
body.game-body:not(.room-screen-body) .simple-script-card .script-card__cover img { min-height: 116px; }
body.game-body:not(.room-screen-body) .simple-script-card .script-card__body { padding: 13px; }
body.game-body:not(.room-screen-body) .simple-script-card--no-cover .script-card__body { padding-top: 12px; }
body.game-body:not(.room-screen-body) .simple-script-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.game-body:not(.room-screen-body) .simple-script-card__top .game-eyebrow { margin: 0; }
body.game-body:not(.room-screen-body) .simple-script-card__top > span { color: var(--game-faint); font-size: 10px; }
body.game-body:not(.room-screen-body) .simple-script-card h3 { margin: 6px 0 5px; font-size: 18px; }
body.game-body:not(.room-screen-body) .simple-script-card .script-card__body > p { min-height: 0; font-size: 11px; line-height: 1.6; }
body.game-body:not(.room-screen-body) .simple-script-card .script-card__meta { margin-top: 9px; }
body.game-body:not(.room-screen-body) .simple-cover-mark { font-size: 46px; }

/* Compact repeated panels used by detail, lobby, rooms, profile, preview,
   and creator pages. */
body.game-body:not(.room-screen-body) .simple-script-facts { gap: 5px; margin-top: 9px; }
body.game-body:not(.room-screen-body) .simple-script-facts span { padding: 6px 8px; border-radius: 8px; font-size: 10px; }
body.game-body:not(.room-screen-body) .simple-script-facts strong { font-size: 13px; }
body.game-body:not(.room-screen-body) .simple-suspect-panel,
body.game-body:not(.room-screen-body) .simple-room-history,
body.game-body:not(.room-screen-body) .simple-room-script-list,
body.game-body:not(.room-screen-body) .simple-search-panel,
body.game-body:not(.room-screen-body) .simple-clue-columns,
body.game-body:not(.room-screen-body) .simple-chat-panel,
body.game-body:not(.room-screen-body) .simple-vote-panel,
body.game-body:not(.room-screen-body) .simple-truth-panel { margin-top: 9px; }
body.game-body:not(.room-screen-body) .simple-suspect-grid { gap: 6px; }
body.game-body:not(.room-screen-body) .simple-suspect-card { gap: 8px; padding: 8px; border-radius: 10px; }
body.game-body:not(.room-screen-body) .simple-suspect-card p { margin-top: 2px; font-size: 10px; line-height: 1.45; }
body.game-body:not(.room-screen-body) .simple-suspect-avatar { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; }
body.game-body:not(.room-screen-body) .simple-public-roles,
body.game-body:not(.room-screen-body) .simple-lobby-roles,
body.game-body:not(.room-screen-body) .simple-member-list { gap: 6px; }
body.game-body:not(.room-screen-body) .simple-public-role { padding: 10px; border-radius: 10px; }
body.game-body:not(.room-screen-body) .simple-public-role h3 { margin-bottom: 3px; font-size: 14px; }
body.game-body:not(.room-screen-body) .simple-round-list { gap: 6px; }
body.game-body:not(.room-screen-body) .simple-round-list li { padding: 9px; border-radius: 9px; font-size: 11px; }
body.game-body:not(.room-screen-body) .simple-room-row { padding: 8px 0; }
body.game-body:not(.room-screen-body) .simple-room-row span { font-size: 10px; }
body.game-body:not(.room-screen-body) .simple-room-row__aside { gap: 5px; }
body.game-body:not(.room-screen-body) .simple-room-script-card { gap: 9px; padding: 9px 0; }
body.game-body:not(.room-screen-body) .simple-room-script-card h3 { font-size: 14px; }
body.game-body:not(.room-screen-body) .simple-room-script-card p { margin-top: 3px; font-size: 11px; line-height: 1.5; }
body.game-body:not(.room-screen-body) .simple-room-script-card .simple-script-facts { gap: 4px; }
body.game-body:not(.room-screen-body) .simple-lobby-role { gap: 9px; padding: 10px; border-radius: 11px; }
body.game-body:not(.room-screen-body) .simple-lobby-role h3 { margin-bottom: 3px; font-size: 15px; }
body.game-body:not(.room-screen-body) .simple-lobby-role p { font-size: 11px; line-height: 1.5; }
body.game-body:not(.room-screen-body) .simple-lobby-role .game-button { flex: 0 0 auto; }
body.game-body:not(.room-screen-body) .simple-preview-toolbar { gap: 7px; margin-bottom: 9px; padding: 10px; border-radius: 12px; }
body.game-body:not(.room-screen-body) .simple-preview-role-list { gap: 5px; }
body.game-body:not(.room-screen-body) .simple-preview-role { padding: 7px 9px; border-radius: 8px; font-size: 11px; }
body.game-body:not(.room-screen-body) .simple-preview-toolbar > div:last-child { gap: 5px; }
body.game-body:not(.room-screen-body) .simple-manager-list { gap: 0; }
body.game-body:not(.room-screen-body) .simple-manager-row { gap: 8px; padding: 10px 0; }
body.game-body:not(.room-screen-body) .simple-manager-row span { margin-top: 3px; font-size: 10px; }
body.game-body:not(.room-screen-body) .simple-manager-row > div:last-child { gap: 7px; }
body.game-body:not(.room-screen-body) .simple-manager-row .game-text-link { margin-top: 0; }
body.game-body:not(.room-screen-body) .simple-publish-checks { margin-top: 9px; }
body.game-body:not(.room-screen-body) .simple-publish-checks ul { gap: 5px; font-size: 11px; }
body.game-body:not(.room-screen-body) .simple-publish-checks li { padding: 6px 8px; }
body.game-body:not(.room-screen-body) .simple-editor { margin-top: 9px; }
body.game-body:not(.room-screen-body) .simple-editor-tabs { gap: 3px; padding: 3px; border-radius: 11px 11px 0 0; }
body.game-body:not(.room-screen-body) .simple-editor-tabs button,
body.game-body:not(.room-screen-body) .simple-editor-round-tabs button { min-height: 34px; padding: 0 10px; border-radius: 8px; font-size: 11px; }
body.game-body:not(.room-screen-body) .simple-editor-panel { padding: 13px; }
body.game-body:not(.room-screen-body) .simple-editor-intro { margin-bottom: 10px; padding: 10px; }
body.game-body:not(.room-screen-body) .simple-editor-intro p:last-child { font-size: 11px; line-height: 1.6; }
body.game-body:not(.room-screen-body) .simple-editor-grid { gap: 8px; }
body.game-body:not(.room-screen-body) .simple-editor-field { gap: 5px; font-size: 11px; }
body.game-body:not(.room-screen-body) .simple-editor-field input,
body.game-body:not(.room-screen-body) .simple-editor-field textarea,
body.game-body:not(.room-screen-body) .simple-editor-field select { min-height: 38px; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
body.game-body:not(.room-screen-body) .simple-editor-field textarea { min-height: 80px; }
body.game-body:not(.room-screen-body) .simple-role-editor-card,
body.game-body:not(.room-screen-body) .simple-search-editor-category { margin-top: 10px; padding: 11px; border-radius: 11px; }
body.game-body:not(.room-screen-body) .simple-editor-card-head { margin-bottom: 9px; }
body.game-body:not(.room-screen-body) .simple-editor-card-head h2 { font-size: 16px; }
body.game-body:not(.room-screen-body) .simple-editor-card-head h3 { font-size: 14px; }
body.game-body:not(.room-screen-body) .simple-role-stories,
body.game-body:not(.room-screen-body) .simple-editor-repeat-list { gap: 8px; margin-top: 9px; }
body.game-body:not(.room-screen-body) .simple-story-editor { padding-top: 9px; }
body.game-body:not(.room-screen-body) .simple-clue-editor-list { gap: 7px; margin: 9px 0; }
body.game-body:not(.room-screen-body) .simple-clue-editor-card { padding: 10px; border-radius: 9px; }
body.game-body:not(.room-screen-body) .simple-editor-footer { gap: 8px; margin-top: 9px; padding: 9px; border-radius: 0 0 11px 11px; }

/* The all-visible state intentionally keeps the disabled action visible as
   a quiet affordance, making it clear why no player can publish again. */
body.game-body:not(.room-screen-body) .simple-clue-columns--all-visible { display: block; }
body.game-body:not(.room-screen-body) .simple-clue-columns--all-visible .game-panel__top { align-items: flex-start; }
body.game-body:not(.room-screen-body) .simple-clue-columns--all-visible .game-panel__hint { max-width: 520px; }
body.game-body:not(.room-screen-body) .simple-share-disabled,
body.game-body:not(.room-screen-body) .simple-share-disabled:disabled { border-color: rgba(142,166,196,.25); color: #7286a0; background: rgba(74,91,113,.28); box-shadow: none; opacity: 1; }
.room-view-panel .simple-share-disabled,
.room-view-panel .simple-share-disabled:disabled { border-color: rgba(190,181,190,.2); color: #9b93a1; background: #3a3743; box-shadow: none; opacity: 1; }

@media (min-width: 700px) {
  body.game-body:not(.room-screen-body) .script-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  body.game-body:not(.room-screen-body) .script-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  body.game-body:not(.room-screen-body) .game-page-heading--with-action { align-items: stretch; }
  body.game-body:not(.room-screen-body) .game-page-heading--with-action .game-button { width: auto; }
  body.game-body:not(.room-screen-body) .simple-clue-columns--all-visible .game-panel__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  body.game-body:not(.room-screen-body) .simple-clue-columns--all-visible .simple-share-disabled { margin-top: 2px; }
}

/* Mobile navigation surfaces: light chrome with dark labels/icons. */
@media (max-width: 620px) {
  /* The compact page rules add 12px of content padding.  The sticky header
     must start at the viewport edge; its safe-area padding remains internal
     to the dark header itself. */
  body.game-body:not(.room-screen-body) > .game-app { padding-top: 0; }
  body.game-body:not(.room-screen-body) .game-header { margin-top: 0; }

  .game-mobile-nav {
    border-color: rgba(106, 216, 255, .72);
    color: #fff;
    background: rgba(7, 17, 31, .90);
    box-shadow: 0 10px 24px rgba(17, 14, 23, .40);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .game-mobile-nav .game-nav__item {
    color: #fff;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: none;
  }
  .game-mobile-nav .game-nav__icon {
    color: #fff;
    font-weight: 800;
    text-shadow: none;
  }
  .game-mobile-nav .game-nav__item:hover,
  .game-mobile-nav .game-nav__item:focus-visible { color: #fff; background: rgba(255, 255, 255, .10); }
  .game-mobile-nav .game-nav__item.is-active {
    border-color: rgba(106, 216, 255, .82);
    color: #fff;
    background: rgba(255, 255, 255, .16);
  }
  .game-mobile-nav .game-nav__item.is-active .game-nav__icon { color: #fff; }

  .room-screen-tabs {
    border-color: rgba(195, 165, 232, .72);
    color: #fff;
    background: rgba(24, 22, 35, .90);
    box-shadow: 0 9px 24px rgba(17, 14, 23, .38);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .room-screen-tab {
    color: #fff;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: none;
  }
  .room-screen-tab:hover:not(:disabled),
  .room-screen-tab:focus-visible { color: #fff; background: rgba(255, 255, 255, .10); }
  .room-screen-tab.is-current,
  .room-screen-tab[aria-selected="true"] {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 -2px 0 rgba(195, 165, 232, .92);
  }
  .room-screen-tab:disabled { color: rgba(255, 255, 255, .48); background: transparent; }

  .room-bottom-dock {
    border-color: rgba(195, 165, 232, .72);
    color: #fff;
    background: rgba(24, 22, 35, .90);
    box-shadow: 0 10px 26px rgba(17, 14, 23, .38);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .room-bottom-dock__links button {
    color: #fff;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: none;
  }
  .room-bottom-dock__links button:hover,
  .room-bottom-dock__links button:focus-visible { color: #fff; background: rgba(255, 255, 255, .10); }
  .room-bottom-dock__links button span { color: #fff; font-weight: 800; text-shadow: none; }
  .room-bottom-dock__status { color: #fff; font-weight: 800; }
}

/* Fixed chrome pass: navigation owns the viewport edges instead of looking
   like a floating card.  The content shell keeps one bottom inset so the
   fixed controls never create a second, oversized blank region. */
body.game-body:not(.room-screen-body) .game-header {
  position: sticky;
  top: 0;
  z-index: 70;
  margin-top: -18px;
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  padding-right: 18px;
  padding-bottom: 8px;
  padding-left: 18px;
  border-bottom: 1px solid rgba(29, 58, 95, .9);
  background: #07111f;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.game-body:not(.room-screen-body) .game-mobile-nav {
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  background: rgba(7, 17, 31, .90);
  padding-bottom: max(5px, env(safe-area-inset-bottom, 0px));
}

.script-detail-create-form,
.simple-room-hide-form,
.simple-room-dismiss-form { display: inline-flex; margin: 0; }

.game-text-button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
  border: 0;
  color: var(--game-muted);
  background: transparent;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
}
.game-text-button:hover,
.game-text-button:focus-visible { color: var(--game-cyan); outline: none; text-decoration: underline; }
.game-text-button--danger { color: var(--game-danger); }
.game-text-button--danger:hover,
.game-text-button--danger:focus-visible { color: #ffc5cf; }

body.room-screen-body {
  --room-topbar-height: 48px;
  --room-bottom-dock-height: 62px;
  --room-scroll-tail: 80px;
}
body.room-screen-body .room-app { padding-bottom: 0; }
body.room-screen-body .room-screen {
  min-height: auto;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
body.room-screen-body .room-screen-topbar {
  display: flex;
  justify-content: flex-start;
  grid-template-columns: none;
  min-height: var(--room-topbar-height);
  margin-top: -12px;
  background: #1d1c2b;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.room-screen-body .room-screen-tabs-wrap {
  top: var(--room-topbar-height);
  margin-top: 0;
  margin-bottom: 8px;
  padding: 0;
  background: #1d1c2b;
}
body.room-screen-body .room-screen-tabs {
  position: static;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  background: #1d1c2b;
}
body.room-screen-body .room-bottom-dock {
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  transform: none;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  background: rgba(24, 22, 35, .30);
  padding-bottom: max(7px, env(safe-area-inset-bottom, 0px));
}
body.room-screen-body .room-screen-status .game-text-button { min-height: 28px; }

@media (min-width: 700px) {
  body.room-screen-body { --room-topbar-height: 52px; }
  body.game-body:not(.room-screen-body) .game-header {
    margin-top: -25px;
    padding-right: 28px;
    padding-left: 28px;
  }
  body.room-screen-body .room-screen-topbar { margin-top: -19px; }
}

@media (max-width: 620px) {
  body.game-body:not(.room-screen-body) .game-header {
    margin-top: -12px;
    padding-right: 14px;
    padding-left: 14px;
  }
  body.room-screen-body .room-screen-topbar { margin-top: -8px; }
  body.room-screen-body .room-screen { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Room navigation/search compact pass.  The five room tabs share the same
   opaque top row as the back link; they are no longer a second sticky/floating
   surface.  The search rail remains the only intentional nested scroller. */
body.room-screen-body .room-screen {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

body.room-screen-body .room-screen-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: var(--room-topbar-height);
  margin-top: -12px;
  padding-inline: 8px;
}

body.room-screen-body .room-screen-topbar .room-screen-tabs-wrap {
  position: static;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

body.room-screen-body .room-screen-topbar .room-screen-tabs {
  position: static;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 2px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
}

body.room-screen-body .room-screen-tab {
  min-height: 32px;
  padding-inline: 3px;
  border-radius: 7px;
  font-size: clamp(10px, 2.7vw, 12px);
}

body.room-screen-body .room-screen-meta {
  display: flex;
  justify-content: flex-end;
  min-height: 0;
  margin: 0 0 6px;
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.room-screen-body .room-screen-phase { display: none; }
body.room-screen-body .room-screen-status { max-width: none; }

body.room-screen-body .room-search-layout {
  grid-template-columns: minmax(92px, 120px) minmax(0, 1fr);
  gap: 10px;
}

body.room-screen-body .room-search-area-nav {
  top: calc(env(safe-area-inset-top, 0px) + var(--room-topbar-height) + 8px);
  max-height: calc(100dvh - 128px);
}

.room-search-clue-stage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  margin: 0 0 8px;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(157, 141, 201, .18);
}

.room-search-clue-stage__head h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff1d6;
  font-size: clamp(17px, 4vw, 22px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-search-clue-stage__head .room-search-points {
  flex: 0 0 auto;
  padding: 5px 7px;
}

.room-search-clue-stage__head .room-search-points strong { font-size: 21px; }

.room-progress-sheet__line {
  margin-top: 8px !important;
  color: #d3c8d7 !important;
  font-size: 12px !important;
}

body.room-screen-body .room-bottom-dock {
  background: rgba(24, 22, 35, .85);
}

@media (max-width: 620px) {
  body.room-screen-body .room-screen-topbar {
    margin-top: -8px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
  }

  body.room-screen-body .room-search-layout {
    grid-template-columns: minmax(79px, 24.75vw) minmax(0, 1fr);
    gap: 8px;
  }

  body.room-screen-body .room-search-area-nav {
    top: calc(env(safe-area-inset-top, 0px) + var(--room-topbar-height) + 6px);
    max-height: calc(100dvh - 112px);
  }

  body.game-body:not(.room-screen-body) .game-mobile-nav {
    background: rgba(7, 17, 31, .85);
  }

  body.room-screen-body .room-bottom-dock {
    background: rgba(24, 22, 35, .85);
  }
}

/* Evidence workspace: the two columns are separate scroll owners.  The
   category rail and clue stage stay aligned below the room navigation while
   scrolling one column no longer moves the other column or the room shell. */
body.room-screen-body .room-search-console {
  overflow: hidden;
}

body.room-screen-body .room-search-layout {
  height: min(70vh, 680px);
  min-height: 320px;
  align-items: stretch;
  overflow: hidden;
}

body.room-screen-body .room-search-area-nav,
body.room-screen-body .room-search-clue-stage {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

body.room-screen-body .room-search-area-nav {
  position: relative;
  top: auto;
  max-height: none;
  align-content: start;
}

body.room-screen-body .room-search-clue-stage {
  padding-right: 4px;
}

body.room-screen-body .room-search-clue-stage__head {
  position: sticky;
  top: 0;
  z-index: 3;
  margin-top: 0;
  padding-top: 4px;
  background: #272532;
}

body.room-screen-body .room-progress-sheet__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 2px;
  padding: 9px 10px;
  border: 1px solid rgba(157, 141, 201, .2);
  border-radius: 11px;
  background: rgba(35, 32, 48, .72);
}

/* Keep the room owner visible in 当前进度.  This is a durable identity
   marker, separate from the host-only controls below, so every player can
   immediately see who is responsible for advancing the room. */
body.room-screen-body .room-progress-sheet__host {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 8px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 216, 106, .62);
  border-radius: 11px;
  color: #fff1bd;
  background: linear-gradient(135deg, rgba(107, 78, 43, .7), rgba(59, 46, 62, .8));
  box-shadow: 0 0 0 1px rgba(255, 216, 106, .08), 0 8px 20px rgba(0, 0, 0, .18);
}

body.room-screen-body .room-progress-sheet__host .game-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-color: rgba(255, 216, 106, .76);
  color: #ffe18b;
  background: #45344b;
  box-shadow: 0 0 0 2px rgba(255, 216, 106, .12);
}

body.room-screen-body .room-progress-sheet__host-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.room-screen-body .room-progress-sheet__host-copy span {
  color: #ffd86a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

body.room-screen-body .room-progress-sheet__host-copy strong {
  overflow-wrap: anywhere;
  color: #fff7d7;
  font-size: 14px;
  line-height: 1.3;
}

body.room-screen-body .room-host-highlight {
  display: inline-block;
  padding: 0 3px;
  border-radius: 4px;
  color: #ffe18b;
  background: rgba(125, 91, 39, .42);
  box-shadow: inset 0 -1px 0 rgba(255, 216, 106, .48);
  font-weight: 800;
  white-space: nowrap;
}

body.room-screen-body .room-progress-sheet__status > .game-status {
  flex: 0 0 auto;
}

body.room-screen-body .room-progress-sheet__status .simple-room-host-actions {
  display: flex;
  width: auto;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

body.room-screen-body .room-progress-sheet__status .simple-room-host-hint {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(255, 216, 106, .28);
  border-radius: 8px;
  color: #f3d98b;
  background: rgba(89, 68, 48, .32);
  font-size: 10px;
  line-height: 1.45;
  text-align: right;
}

body.room-screen-body .room-progress-sheet__status .simple-room-host-actions form {
  margin: 0;
}

body.room-screen-body .room-progress-sheet__status .simple-room-host-actions .game-button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11px;
}

body.room-screen-body .room-progress-sheet__status .simple-room-host-actions .game-text-button {
  min-height: 30px;
}

body.room-screen-body .room-screen-meta[hidden],
body.room-screen-body [data-room-fragment="round-update"][hidden] {
  display: none !important;
}

@media (max-width: 620px) {
  body.room-screen-body .room-search-layout {
    /* Match the other game pages: the evidence workspace ends one scroll
       tail before the viewport, while the fixed dock keeps its own height. */
    height: calc(100dvh - var(--room-topbar-height) - var(--room-scroll-tail) - 22px);
    min-height: 300px;
  }

  body.room-screen-body .room-search-area-nav,
  body.room-screen-body .room-search-clue-stage {
    overscroll-behavior: contain;
  }

  body.room-screen-body .room-search-clue-stage__head {
    padding-top: 3px;
  }

  body.room-screen-body .room-progress-sheet__status {
    align-items: flex-start;
  }

  body.room-screen-body .room-progress-sheet__status .simple-room-host-actions {
    width: 100%;
    justify-content: flex-start;
  }

  body.room-screen-body .room-progress-sheet__status .simple-room-host-hint {
    max-width: 100%;
    text-align: left;
  }
}

/* A direct revisit should not show a historical round-transition banner
   above the sticky room chrome.  The same information remains available in
   the 当前进度 sheet. */
body.room-screen-body .room-progress-sheet__transition {
  margin: 10px 0 0 !important;
  padding: 8px 10px;
  border: 1px solid rgba(255, 216, 106, .24);
  border-radius: 9px;
  color: #f1d88f !important;
  background: rgba(102, 74, 45, .22);
  font-size: 11px !important;
  line-height: 1.6 !important;
  white-space: pre-wrap;
}

/* The dock and the scrollable page tail are separate dimensions.  Keep the
   dock stable even when an action/status message changes length. */
body.room-screen-body .room-bottom-dock {
  height: calc(var(--room-bottom-dock-height) + env(safe-area-inset-bottom, 0px));
  min-height: calc(var(--room-bottom-dock-height) + env(safe-area-inset-bottom, 0px));
  max-height: calc(var(--room-bottom-dock-height) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
body.room-screen-body .room-bottom-dock__links { flex: 0 0 auto; }
body.room-screen-body .room-bottom-dock__links button {
  flex: 0 0 48px;
  height: 48px;
  min-height: 48px;
}
body.room-screen-body .room-bottom-dock__action,
body.room-screen-body .room-bottom-dock__action form {
  min-height: 0;
  overflow: hidden;
}
body.room-screen-body .room-bottom-dock__action form { flex-wrap: nowrap; }
body.room-screen-body .room-bottom-dock__action .game-form-message,
body.room-screen-body .room-bottom-dock__status {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.room-screen-body .room-ready-progress { display: none !important; }

/* This inset belongs to the scrollable page tail, not to the fixed dock. */
body.room-screen-body .room-screen {
  padding-bottom: calc(var(--room-scroll-tail) + env(safe-area-inset-bottom, 0px));
}

/* Keep text controls at the iOS Safari no-zoom threshold on phones.  Labels
   and compact helper text can stay small; controls that accept user text must
   render at least 16px when focused. */
@media (max-width: 620px) {
  body.game-body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]),
  body.game-body select,
  body.game-body textarea {
    font-size: 16px;
  }
}