/* Shared play uses a separate layout so individual chat remains intact. */
:root { --room-accent: #c3d3b5; --room-accent-ink: #19231a; }
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.room-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; border: 1px solid #3b4148; border-radius: 8px; padding: 9px 14px; background: transparent; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.4; }
.room-btn:hover { background: #2b3035; border-color: #677063; }
.room-btn-primary { color: var(--room-accent-ink); background: var(--room-accent); border-color: var(--room-accent); }
.room-btn-primary:hover { background: #d6e3ca; border-color: #d6e3ca; }
.room-btn:disabled { cursor: default; opacity: .4; }
.room-btn:focus-visible { outline-color: var(--room-accent); }
.room-wide { width: 100%; }
.room-link { padding: 6px 0; border: 0; background: transparent; color: #aebba6; cursor: pointer; font-size: 12px; }
.room-link:hover { color: #ecf4e7; text-decoration: underline; }
.room-link:disabled { opacity: .4; cursor: default; }
.room-note { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 8px 0; }
.room-scenario-picker { display: grid; gap: 8px; }
.room-scenario-preview { border: 1px solid #384139; border-radius: 8px; padding: 10px 12px; color: var(--muted); font-size: 12px; }
.room-scenario-preview summary { cursor: pointer; color: var(--text); }
.room-scenario-preview p { max-height: 160px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; margin: 10px 0 0; }
.home-play-entry { display: flex; justify-content: space-between; align-items: center; gap: 28px; border: 1px solid #384139; background: #1c231f; padding: 24px 28px; border-radius: 12px; margin-bottom: 24px; }
.home-play-label { color: var(--room-accent); font-size: 12px; font-weight: 600; }
.home-play-entry h2 { font-size: 21px; margin: 7px 0; letter-spacing: -.6px; }
.home-play-entry p { font-size: 13px; color: #aeb7ae; margin: 0; line-height: 1.6; }
.home-play-entry .room-btn { flex-shrink: 0; }
.solo-invite-btn { flex-shrink: 0; font-size: 12px; min-height: 34px; padding: 6px 10px; color: var(--room-accent); border-color: #475341; }
.rooms-screen { background: #131719; }
.room-topbar { background: #181d20; justify-content: flex-start; }
.room-heading { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.room-heading strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-heading > span { font-size: 11px; color: #8e989b; }
.room-connection { margin-left: auto; font-size: 11px; color: #95a490; flex-shrink: 0; }
.room-connection.is-offline { color: #e3b98d; }
.rooms-hub { overflow-y: auto; padding: 54px clamp(24px, 5vw, 76px) 110px; }
.room-hub-intro, .room-entry-grid, .room-list-section, #roomsHubError { max-width: 940px; margin-left: auto; margin-right: auto; }
.room-eyebrow { color: #b4c1aa; font-size: 12px; font-weight: 600; }
.room-hub-intro h1 { font-size: clamp(27px, 3vw, 40px); font-weight: 650; letter-spacing: -1.4px; line-height: 1.2; margin: 18px 0; }
.room-hub-intro p { color: #a7b0b3; line-height: 1.8; font-size: 14px; margin: 0; }
.room-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.room-entry-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; text-align: left; border: 1px solid #39413b; border-radius: 12px; padding: 24px; background: #202722; color: var(--text); cursor: pointer; }
.room-entry-card:nth-child(2) { background: #1a2024; border-color: #343e43; }
.room-entry-card:hover { border-color: #8b9e80; }
.room-entry-card strong { font-size: 17px; margin-top: 16px; }
.room-entry-card > span:not(.room-entry-icon):not(.room-entry-arrow) { color: #a9b2ad; font-size: 12px; line-height: 1.6; }
.room-entry-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #4a5749; border-radius: 10px; color: #c7d7bd; font-size: 27px; font-weight: 300; }
.room-entry-arrow { position: absolute; right: 24px; top: 30px; color: #b4c1aa; font-size: 21px; }
.room-list-section { margin-top: 48px; }
.room-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.room-section-heading h2 { font-size: 17px; margin: 0; }
.room-section-heading h3 { font-size: 12px; font-weight: 600; margin: 0; }
.room-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.room-empty { color: #859195; padding: 30px 20px; border: 1px dashed #343e42; border-radius: 10px; text-align: center; font-size: 13px; line-height: 1.8; }
.room-list-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 18px 20px; border: 1px solid #343d41; border-radius: 10px; color: var(--text); text-align: left; background: #1c2225; cursor: pointer; }
.room-list-item:hover { border-color: #7c8a74; }
.room-list-item strong { font-size: 14px; display: block; overflow-wrap: anywhere; }
.room-list-item small { display: block; color: #939ea1; font-size: 12px; margin-top: 8px; }
.room-list-item > span { color: #acbea2; font-size: 12px; white-space: nowrap; }
.room-session { flex: 1; display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 0; overflow: hidden; }
.room-details { background: #191f21; border-right: 1px solid #30383b; padding: 26px 22px; overflow-y: auto; }
.room-detail-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.room-status-tag { display: inline-block; color: #c9d9bc; background: #2c372b; font-size: 10px; padding: 5px 7px; border-radius: 5px; }
.room-details h2 { font-size: 20px; letter-spacing: -.5px; line-height: 1.4; overflow-wrap: anywhere; margin: 17px 0 3px; }
.room-details > .room-section-heading { margin-top: 30px; }
.room-members { list-style: none; padding: 0; margin: 8px 0 24px; display: flex; flex-direction: column; gap: 5px; }
.room-member { display: flex; align-items: center; gap: 9px; padding: 9px 0; min-width: 0; }
.room-member-avatar { width: 30px; height: 30px; border: 1px solid #424d4c; border-radius: 50%; color: #bdcdc7; background: #26312e; display: grid; place-items: center; flex-shrink: 0; font-size: 12px; }
.room-member-name { font-size: 13px; overflow-wrap: anywhere; flex: 1; }
.room-member small { color: #94a18e; font-size: 10px; white-space: nowrap; }
.room-member.is-current .room-member-avatar { border-color: #becfae; box-shadow: 0 0 0 2px #36442f; }
.room-member.is-empty { color: #747f81; font-size: 12px; }
.room-member.is-empty .room-member-avatar { background: transparent; border-style: dashed; color: #717e76; }
.room-invite { border-top: 1px solid #323a3c; padding-top: 20px; margin-bottom: 23px; }
.room-invite-code { margin-top: 8px; display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid #3a4842; border-radius: 7px; background: #131b18; }
.room-invite-code code { font-size: 16px; letter-spacing: 1.8px; color: #e0e9d8; }
.room-invite .room-note { font-size: 10px; }
.room-host-tools { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.room-leave { margin-top: 28px; color: #a39793; }
.room-play { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.room-play-status { display: flex; align-items: center; gap: 9px; padding: 18px 26px; border-bottom: 1px solid #2e373a; background: #191f22; }
.room-play-status strong { font-size: 12px; font-weight: 500; line-height: 1.6; }
.room-turn-dot { width: 6px; height: 6px; border-radius: 50%; background: #bacaa9; flex-shrink: 0; }
.room-ai-notice { margin: 0; padding: 12px 26px; color: #b9b4a1; background: #29281f; font-size: 12px; line-height: 1.7; }
.room-transcript { flex: 1; overflow-y: auto; padding: 28px clamp(18px, 3vw, 48px); overscroll-behavior: contain; }
.room-transcript-empty { min-height: 240px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #8b9897; gap: 12px; line-height: 1.8; }
.room-transcript-empty strong { color: #c6d1c8; font-size: 18px; font-weight: 500; }
.room-transcript-empty p { max-width: 330px; margin: 0; font-size: 13px; }
.room-message { max-width: 740px; margin: 0 auto 25px; }
.room-message-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.room-message-head strong { color: #b8c6af; font-size: 12px; font-weight: 600; }
.room-message-head time { font-size: 10px; color: #748080; }
.room-message-content { font-size: 14px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; color: #d4dcd9; }
.room-message.is-model { border-left: 2px solid #65725b; padding-left: 17px; }
.room-message.is-model .room-message-head strong { color: #d8dfc9; }
.room-message.is-mine .room-message-head strong { color: #aebecf; }
.room-message.is-system { color: #89958d; text-align: center; margin-bottom: 20px; }
.room-message.is-system .room-message-content { font-size: 11px; color: #89958d; }
.room-generating { padding: 5px 26px 14px; font-size: 12px; color: #b7c8ac; }
.room-composer { margin: 0 24px 24px; border: 1px solid #445247; border-radius: 11px; background: #1c2521; padding: 14px; }
.room-composer:focus-within { border-color: #a3b797; }
.room-composer textarea { width: 100%; min-height: 54px; max-height: 160px; padding: 0; border: 0; outline: none; resize: vertical; color: #e5ebe4; background: transparent; font-size: 14px; line-height: 1.7; }
.room-composer textarea::placeholder { color: #7a8980; }
.room-composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.room-composer-bottom > span { color: #8d9b91; font-size: 10px; line-height: 1.5; }
.room-composer-bottom .room-btn { min-height: 34px; padding: 6px 14px; flex-shrink: 0; }
.room-feedback { border: 1px solid #725648; background: #362921; color: #f1c7af; border-radius: 8px; padding: 12px 14px; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.room-play > .room-feedback { margin: 10px 20px 0; }
.room-dialog { width: min(520px, calc(100vw - 28px)); max-height: calc(100dvh - 48px); margin: auto; border: 1px solid #424c44; border-radius: 16px; padding: 24px 28px; background: #1b2220; color: #e6ece5; box-shadow: 0 24px 80px #0008; overflow-y: auto; }
.room-dialog::backdrop { background: #070b0acc; backdrop-filter: blur(3px); }
.room-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.room-dialog h2 { font-size: 21px; margin: 0; letter-spacing: -.6px; }
.room-dialog-head .icon-btn { width: 32px; height: 32px; font-size: 25px; }
.room-dialog-tabs { display: flex; gap: 22px; margin-top: 20px; border-bottom: 1px solid #3b433e; }
.room-dialog-tabs button { background: transparent; color: #929e96; border: 0; border-bottom: 2px solid transparent; padding: 10px 0; font-size: 13px; cursor: pointer; }
.room-dialog-tabs button[aria-pressed="true"] { color: #d3e0c9; border-color: #b9cba8; }
.room-setup-form { display: flex; flex-direction: column; gap: 20px; padding-top: 14px; }
.room-setup-form > .room-note { margin: 0; font-size: 11px; }
.room-field { display: flex; flex-direction: column; gap: 9px; position: relative; font-size: 12px; font-weight: 500; }
.room-field input, .room-field select, .room-field textarea { width: 100%; border: 1px solid #424e45; border-radius: 7px; background: #141c18; color: #e4ede1; padding: 11px 12px; font-size: 13px; line-height: 1.5; outline: none; }
.room-field input:focus, .room-field select:focus, .room-field textarea:focus { border-color: #b5caa7; box-shadow: 0 0 0 2px #b5caa718; }
.room-field input::placeholder, .room-field textarea::placeholder { color: #748377; }
.room-field textarea { resize: vertical; min-height: 90px; }
.room-optional { position: absolute; right: 0; top: 0; color: #96a28f; font-size: 10px; }
.room-fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.room-fieldset legend { font-size: 12px; margin-bottom: 10px; padding: 0; }
.room-fieldset legend span { color: #899687; margin-left: 8px; font-size: 10px; }
.room-capacity-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.room-capacity-options label, .room-mode-options label { position: relative; cursor: pointer; }
.room-capacity-options input, .room-mode-options input { position: absolute; opacity: 0; }
.room-capacity-options label > span { display: block; text-align: center; border: 1px solid #424e45; border-radius: 7px; padding: 11px; color: #a6b1a1; font-size: 13px; }
.room-capacity-options input:checked + span, .room-mode-options input:checked + span { background: #303e2d; border-color: #a3b68e; color: #dfebd4; }
.room-capacity-options input:focus-visible + span, .room-mode-options input:focus-visible + span { outline: 2px solid #c3d3b5; outline-offset: 3px; }
.room-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.room-mode-options label > span { display: flex; flex-direction: column; gap: 8px; padding: 13px; border: 1px solid #424e45; border-radius: 8px; height: 100%; }
.room-mode-options b { font-size: 13px; font-weight: 600; }
.room-mode-options small { font-size: 11px; line-height: 1.65; color: #a0ad9a; }
.room-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; text-transform: uppercase; letter-spacing: 2px; }
.room-confirm-dialog { width: min(410px, calc(100vw - 28px)); padding: 28px; }
.room-confirm-dialog p { font-size: 13px; color: #b4beb0; line-height: 1.8; margin: 18px 0 24px; }
.room-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.room-toast { position: fixed; z-index: 120; left: 50%; bottom: 28px; transform: translateX(-50%); color: #e7edde; background: #343e2e; padding: 12px 22px; border: 1px solid #65755c; border-radius: 9px; box-shadow: 0 5px 20px #0005; font-size: 13px; max-width: calc(100vw - 30px); text-align: center; }
@media (max-width: 1000px) { .room-session { grid-template-columns: 235px minmax(0, 1fr); } .room-details { padding: 20px 16px; } .room-invite-code code { font-size: 14px; letter-spacing: 1px; } }
@media (max-width: 700px) {
  .home-play-entry { padding: 19px; margin-bottom: 16px; display: block; }
  .home-play-entry h2 { font-size: 18px; }
  .home-play-entry p { font-size: 12px; }
  .home-play-entry .room-btn { margin-top: 16px; width: 100%; }
  .solo-invite-btn { padding: 5px 8px; font-size: 11px; }
  .chat-top { gap: 6px; }
  .chat-title { min-width: 0; }
  .room-topbar { padding: 8px 10px; gap: 5px; }
  .room-heading > span { font-size: 10px; }
  .room-connection { font-size: 10px; }
  .rooms-hub { padding: 30px 20px 105px; }
  .room-hub-intro h1 { font-size: 29px; }
  .room-hub-intro p { font-size: 12px; }
  .room-entry-grid { gap: 10px; margin-top: 26px; }
  .room-entry-card { padding: 17px 14px; }
  .room-entry-card strong { font-size: 14px; margin-top: 12px; }
  .room-entry-card > span:not(.room-entry-icon):not(.room-entry-arrow) { font-size: 11px; }
  .room-entry-arrow { right: 14px; top: 22px; font-size: 18px; }
  .room-list-section { margin-top: 32px; }
  .room-session { display: flex; flex-direction: column; overflow-y: auto; }
  .room-details { flex-shrink: 0; padding: 17px 18px; border-right: 0; border-bottom: 1px solid #333c3b; overflow-y: visible; }
  .room-details h2 { font-size: 19px; margin-top: 10px; }
  .room-details > .room-section-heading { margin-top: 16px; }
  .room-members { display: grid; grid-template-columns: 1fr 1fr; margin: 7px 0 16px; }
  .room-invite { margin-bottom: 15px; padding-top: 13px; }
  .room-invite-code code { font-size: 17px; letter-spacing: 2px; }
  .room-invite .room-wide { margin-top: 3px; }
  .room-leave { margin-top: 9px; }
  .room-play { flex: 1 0 380px; min-height: 380px; overflow: visible; }
  .room-play-status { padding: 13px 18px; }
  .room-transcript { overflow: visible; padding: 22px 18px; }
  .room-transcript-empty { min-height: 180px; }
  .room-ai-notice { padding: 10px 18px; font-size: 11px; }
  .room-composer { margin: 0 12px calc(12px + env(safe-area-inset-bottom)); padding: 12px; }
  .room-composer textarea, .room-field input, .room-field select, .room-field textarea { font-size: 16px; }
  .room-dialog { padding: 20px; max-height: calc(100dvh - 28px); }
  .room-dialog h2 { font-size: 20px; }
  .room-toast { bottom: 83px; }
  body.rooms-play-active .bottom-nav { display: none; }
  .room-session.is-playing .room-details { display: grid; grid-template-columns: 1fr auto; gap: 5px 15px; }
  .room-session.is-playing .room-detail-top { grid-column: 1 / -1; }
  .room-session.is-playing .room-details h2 { grid-column: 1; margin-top: 4px; }
  .room-session.is-playing #roomCharacter { grid-column: 1; margin: 0; }
  .room-session.is-playing .room-details > .room-section-heading { grid-column: 1 / -1; margin-top: 9px; }
  .room-session.is-playing .room-members { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: 5px 14px; }
  .room-session.is-playing .room-member { padding: 5px 0; gap: 6px; }
  .room-session.is-playing .room-member-avatar { width: 23px; height: 23px; font-size: 10px; }
  .room-session.is-playing .room-member-name { font-size: 11px; }
  .room-session.is-playing .room-member.is-empty { display: none; }
  .room-session.is-playing .room-invite { grid-column: 1 / -1; margin: 4px 0; }
  .room-session.is-playing .room-invite .room-note { display: none; }
  .room-session.is-playing .room-invite .room-wide { min-height: 32px; font-size: 11px; margin-top: 6px; }
  .room-session.is-playing #roomGuestInvite, .room-session.is-playing #roomStartHint { display: none; }
  .room-session.is-playing .room-host-tools { grid-column: 1 / -1; flex-direction: row; margin-top: 8px; }
  .room-session.is-playing .room-host-tools .room-btn { min-height: 33px; font-size: 11px; }
  .room-session.is-playing .room-leave { grid-column: 2; grid-row: 2 / 4; margin: 0; }
}

/* Dialog controls stay visible while the form fields scroll. */
#roomSetupDialog { padding: 0; overflow: hidden; }
#roomSetupDialog[open] { display: flex; flex-direction: column; }
#roomSetupDialog .room-dialog-head { padding: 24px 28px 0; flex-shrink: 0; }
#roomSetupDialog .room-dialog-tabs { margin: 14px 28px 0; flex-shrink: 0; }
#roomSetupDialog .room-setup-form { overflow-y: auto; min-height: 0; padding: 18px 28px 24px; overscroll-behavior: contain; }
.room-dialog-footer { padding: 16px 28px 24px; border-top: 1px solid #3b433e; background: #1b2220; flex-shrink: 0; }
.room-dialog-footer .room-feedback { margin: 0 0 12px; }
@media (max-width: 700px) {
  #roomSetupDialog .room-dialog-head { padding: 20px 20px 0; }
  #roomSetupDialog .room-dialog-tabs { margin-inline: 20px; }
  #roomSetupDialog .room-setup-form { padding: 16px 20px 24px; }
  .room-dialog-footer { padding: 14px 20px 20px; }
  .room-session.is-playing { overflow: hidden; }
  .room-session.is-playing .room-details { max-height: min(250px, 30dvh); overflow-y: auto; overscroll-behavior: contain; }
  .room-session.is-playing .room-play { flex: 1; min-height: 0; overflow: hidden; }
  .room-session.is-playing .room-play-status,
  .room-session.is-playing .room-ai-notice,
  .room-session.is-playing .room-generating,
  .room-session.is-playing .room-composer { flex-shrink: 0; }
  .room-session.is-playing .room-transcript { min-height: 0; overflow-y: auto; }
  .room-session.is-playing .room-composer textarea { resize: none; }
}

/* Table tools stay folded until needed; the conversation owns its own scroll. */
#roomSession .room-state-panel, #roomSession .room-sheet-panel { grid-column: 1 / -1; padding: 13px 0; border-top: 1px solid var(--border, #343640); margin: 3px 0; }
.room-state-panel > summary, .room-sheet-panel > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); padding: 4px 0; }
#roomPublicState, .room-public-state { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px 12px; margin: 14px 0 4px; font-size: 13px; line-height: 1.55; }
#roomPublicState dt, .room-public-state dt { color: var(--muted); overflow-wrap: anywhere; }
#roomPublicState dd, .room-public-state dd { margin: 0; color: var(--text); text-align: right; overflow-wrap: anywhere; white-space: pre-wrap; }
.room-sheet-form { display: flex; flex-direction: column; gap: 13px; margin: 15px 0 2px; }
.room-sheet-form .room-field { font-size: 12px; gap: 7px; }
.room-sheet-form .room-field textarea { min-height: 64px; }
.room-sheet-form .room-field input, .room-sheet-form .room-field textarea { padding: 9px 10px; }
#roomSession .room-members { display: flex; flex-direction: column; gap: 4px; }
#roomSession .room-member { flex-wrap: wrap; width: 100%; gap: 8px; }
.room-member-sheet, .room-member-actions { font-size: 12px; color: var(--muted); }
.room-member-sheet > summary, .room-member-actions > summary { cursor: pointer; padding: 5px 0; }
.room-member-sheet[open], .room-member-actions[open] { flex-basis: 100%; order: 5; }
.room-member-actions .room-link { display: inline-block; padding: 8px 12px 8px 0; color: var(--muted); }
.room-member-actions .room-link:last-child { color: #e6ab9f; }
.room-member.is-blocked { border-top: 1px dashed var(--border, #343640); padding-top: 10px; }
.room-sheet-content { padding: 11px 12px; border: 1px solid var(--border, #343640); border-radius: 8px; background: var(--panel, #17191e); }
.room-sheet-content > strong { display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.room-sheet-content > p { font-size: 13px; line-height: 1.65; margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.room-sheet-content > p:last-child { margin-bottom: 0; }
.room-record-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px 18px; border-top: 1px solid var(--border, #343640); padding-top: 12px; margin-top: 18px; }
#roomClose { color: #e6ab9f; }
#roomSession .room-dice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex-shrink: 0; padding: 9px 24px; margin: 0; }
.room-dice > label { font-size: 12px; color: var(--muted); }
.room-dice > input { width: 115px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border, #41434e); border-radius: 7px; background: var(--panel, #17191e); color: var(--text); font: 14px ui-monospace, monospace; }
.room-dice .room-btn { min-height: 35px; font-size: 12px; padding: 6px 12px; }
.room-dice .room-note { margin: 0; font-size: 12px; }
.room-dice-result { font-size: 20px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.room-message.is-dice { padding: 13px 16px; border: 1px solid var(--border, #343640); border-radius: 9px; background: var(--panel, #17191e); }
.room-message.is-dice .room-note { margin-bottom: 0; }
.room-message.is-sheet .room-message-content { font-size: 12px; color: var(--muted); }
.room-sheet-record { margin-top: 8px; font-size: 12px; color: var(--muted); }
.room-sheet-record > summary { cursor: pointer; padding: 6px 0; }
.room-transcript > .room-history-note { display: block; margin: 0 auto 24px; }
@media (max-width: 700px) {
  #roomSession .room-dice { padding: 8px 12px; gap: 6px; }
  .room-dice > input { font-size: 16px; padding: 6px 8px; width: 104px; }
  .room-dice .room-note { flex-basis: 100%; font-size: 11px; }
  #roomSession .room-record-tools { margin-top: 8px; }
  #roomSession .room-members { margin-bottom: 6px; }
  .room-sheet-form .room-field input, .room-sheet-form .room-field textarea { font-size: 16px; }
}