.tabletop-page { overflow-x: hidden; }
.tabletop-page.room-active { height: 100vh; min-height: 0; overflow: hidden; }
.tabletop-page .ember-glow { background: radial-gradient(circle,rgba(181,37,21,.16) 0,rgba(181,37,21,.08) 38%,transparent 72%); filter: none; }
.tabletop-topbar .brand-mark { transform: rotate(45deg); }
.tabletop-topbar .mobile-panel-tabs { display: none; }
.room-presence { display: inline-flex; align-items: center; color: var(--muted); font-size: .76rem; }
.room-presence i { width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #746f66; }
.room-presence.connected i { background: #7fa374; box-shadow: 0 0 10px rgba(127,163,116,.6); }
.chat-heading-actions button { min-height: 36px; padding: 0 12px; border: 1px solid #514b41; color: #d8d2c6; background: #22211e; cursor: pointer; }
.chat-heading-actions button:hover { border-color: var(--gold); color: #fff0c8; }
.tabletop-layout { grid-template-columns: minmax(220px,260px) minmax(460px,1fr) minmax(390px,460px); width: min(1600px,calc(100% - 28px)); padding-bottom: 15px; }
.tabletop-page .left-rail { max-height: calc(100vh - 136px); }

.chat-card { display: grid; grid-template-rows: auto minmax(320px,1fr) auto; height: calc(100vh - 136px); min-height: 650px; padding: 0; overflow: hidden; color: #2b2622; }
.chat-card::before { z-index: 0; }
.chat-card > * { position: relative; z-index: 1; }
.chat-card .reader-rule { display: none; }
.chat-heading { display: grid; grid-template-columns: minmax(160px,auto) minmax(120px,1fr) auto; align-items: center; gap: 10px 16px; padding: 20px 30px 14px; border-bottom: 1px solid rgba(92,72,56,.28); }
.chat-heading p { margin: 0 0 4px; color: #9d392c; font-size: .62rem; font-weight: 700; letter-spacing: .17em; }
.chat-heading h1 { margin: 0; color: #25201c; font: 600 1.55rem/1.25 var(--serif); letter-spacing: .07em; }
.chat-heading-actions { display: flex; gap: 7px; }
.chat-heading-actions button { min-height: 34px; border-color: rgba(72,56,44,.34); color: #6d5846; background: rgba(255,255,255,.28); font-size: .7rem; white-space: nowrap; }
.chat-heading-actions button:hover { border-color: #9d392c; color: #76291f; background: rgba(255,255,255,.5); }
.chat-heading-actions #toggle-log.paused { border-color: rgba(157,48,38,.5); color: #983c32; background: rgba(157,48,38,.08); }
.participant-strip { display: flex; box-sizing: border-box; width: 100%; height: 28px; min-height: 28px; max-height: 28px; gap: 6px; align-items: center; padding: 1px 0; overflow-x: auto; overflow-y: hidden; border: 0; scrollbar-width: thin; }
.participant-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 3px 7px; border: 1px solid rgba(82,66,53,.22); color: #655d55; background: rgba(255,255,255,.24); font-size: .65rem; }
.participant-chip::before { width: 6px; height: 6px; border-radius: 50%; background: #77906e; content: ""; }
.participant-chip.kp { color: #7b382f; }
.participant-chip.kp::after { padding: 1px 4px; color: #fff7e5; background: #9d392c; content: "KP"; font-size: .52rem; letter-spacing: .08em; }
.remove-participant { display: grid; width: 18px; height: 18px; margin: -3px -5px -3px 1px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #9a554c; background: transparent; cursor: pointer; font: 700 .8rem/1 sans-serif; }
.remove-participant:hover, .remove-participant:focus-visible { color: white; background: #9d392c; }
.remove-participant:disabled { opacity: .45; cursor: wait; }

.message-feed { display: flex; flex-direction: column; gap: 13px; padding: 22px 30px 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(82,66,53,.35) transparent; }
.load-older-messages { overflow-anchor: none; }
.message-empty { margin: auto; color: #8a8075; text-align: center; }
.message-empty strong, .message-empty span { display: block; }
.message-empty strong { margin-bottom: 8px; font: 600 1rem/1.4 var(--serif); }
.message-empty span { font-size: .72rem; }
.load-older-messages { align-self: center; min-height: 32px; padding: 5px 13px; border: 1px solid rgba(82,66,53,.24); border-radius: 18px; color: #746556; background: rgba(255,255,255,.28); cursor: pointer; font: 600 .66rem/1.2 var(--serif); }
.load-older-messages:hover, .load-older-messages:focus-visible { border-color: rgba(157,48,38,.45); color: #8f2f27; background: rgba(255,255,255,.48); }
.load-older-messages:disabled { opacity: .55; cursor: wait; }
.message { display: flex; flex-direction: column; align-items: flex-start; align-self: start; min-width: 0; max-width: 86%; }
.message.own { align-items: flex-end; align-self: end; }
.message.has-avatar { position: relative; box-sizing: border-box; padding-left: 42px; }
.message.has-avatar.own { padding-right: 42px; padding-left: 0; }
.message-avatar { position: absolute; top: 1px; left: 0; display: block; width: 34px; height: 34px; padding: 0; overflow: hidden; border: 1px solid rgba(80,62,48,.32); border-radius: 50%; background-color: #c9bda9; box-shadow: 0 3px 10px rgba(60,43,31,.14); }
.profile-avatar-button { cursor: pointer; }
.profile-avatar-button:hover, .profile-avatar-button:focus-visible { border-color: #9b6d3d; box-shadow: 0 0 0 2px rgba(166,113,60,.2),0 3px 10px rgba(60,43,31,.14); outline: none; }
.message-avatar-placeholder { display: grid; place-items: center; color: #736756; background: #d7cdbd; font: 700 .82rem/1 var(--serif); }
.message.own .message-avatar { right: 0; left: auto; }
.message-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.message-avatar-atlas { background-image: url("../assets/character-portraits/default-investigators-lite.webp?v=20260929-architecture1"); background-repeat: no-repeat; background-size: 400% 200%; }
.message-avatar.message-avatar-atlas { background-size: 440% 220%; }
.message-avatar-atlas.extra { background-image: url("../assets/character-portraits/default-investigators-extra-lite.webp?v=20260929-architecture1"); }
.message-avatar-atlas.diverse { background-image: url("../assets/character-portraits/default-investigators-diverse-lite.webp?v=20260929-architecture1"); }
.message-avatar-atlas.longhair { background-image: url("../assets/character-portraits/default-investigators-longhair-lite.webp?v=20260929-architecture1"); }
.message-avatar-atlas.men { background-image: url("../assets/character-portraits/default-investigators-men-lite.webp?v=20260929-architecture1"); }
.message-avatar-atlas.chinese-women { background-image: url("../assets/character-portraits/default-investigators-chinese-women-lite.webp"); }
.message-avatar-atlas.chinese-men { background-image: url("../assets/character-portraits/default-investigators-chinese-men-lite.webp"); }
.message.system-message { align-self: center; width: min(92%,520px); max-width: none; }
.message-head { display: flex; align-items: baseline; gap: 7px; margin: 0 2px 4px; }
.message-head strong { color: #54483e; font: 600 .74rem/1.2 var(--serif); }
.message-head span { color: #9b9289; font-size: .58rem; }
.message-bubble { align-self: flex-start; width: fit-content; min-width: 0; max-width: 100%; padding: 11px 14px; border: 1px solid rgba(75,59,47,.18); border-radius: 4px 15px 15px; color: #302a25; background: rgba(255,255,255,.58); box-shadow: 0 5px 18px rgba(67,48,34,.07); font-size: .82rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.own .message-bubble { align-self: flex-end; }
.message.own .message-bubble { border-color: rgba(137,67,52,.22); border-radius: 15px 4px 15px 15px; background: rgba(177,75,50,.1); }
.message.roll-message .message-bubble { border-left: 3px solid #9d392c; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }
.message.system-message .message-bubble { width: 100%; border: 1px dashed rgba(126,92,49,.36); color: #705b3a; background: rgba(203,166,92,.09); text-align: center; }
.message-clue-content { margin: 9px 0 0; padding-top: 9px; border-top: 1px solid rgba(126,92,49,.24); color: #55452f; font: .82rem/1.7 var(--serif); text-align: left; white-space: pre-wrap; }
.message-clue-image-button { display: block; width: fit-content; margin: 10px auto 0; padding: 0; overflow: hidden; border: 1px solid rgba(126,92,49,.35); background: transparent; cursor: zoom-in; }
.message-clue-image { display: block; width: auto; max-width: min(260px,70vw); max-height: 180px; object-fit: contain; }
.message.narrator-message { align-self: center; width: min(96%,760px); max-width: none; margin: 5px auto; text-align: center; }
.message.narrator-message .message-head { justify-content: center; }
.message.narrator-message .message-head strong { color: #866f59; font-size: .68rem; letter-spacing: .14em; }
.message.narrator-message .message-bubble { position: relative; width: 100%; min-width: 0; padding: 13px 8px; border: 0; border-radius: 0; color: #554a40; background: transparent; box-shadow: none; font-family: var(--serif); font-size: .88rem; }
.message-actions { display: flex; align-self: flex-end; justify-content: flex-end; gap: 6px; margin: 4px 3px 0; opacity: 0; transition: opacity 120ms ease; }
.message.narrator-message .message-actions { justify-content: center; }
.message.unlogged-message { opacity: .62; }
.message.unlogged-message .message-bubble { border-color: rgba(91,86,80,.24); color: #68645f; background: rgba(160,156,150,.12); box-shadow: none; }
.message.unlogged-message .message-avatar img, .message.unlogged-message .message-sticker, .message.unlogged-message .message-clue-image { filter: grayscale(1); }
.message.pending-message { opacity: .56; }
.message.pending-message .message-bubble { border-style: dashed; }
.message.retracting-message { max-height: 0; margin: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height 120ms ease, opacity 100ms ease, margin 120ms ease; }
.message:hover .message-actions, .message:focus-within .message-actions { opacity: 1; }
.message-actions button { padding: 4px 5px; border: 0; color: #8b7c6c; background: transparent; cursor: pointer; font-size: .62rem; }
.message-actions button:hover { color: #8f2b22; }
.message-composer { position: relative; display: grid; grid-template-columns: minmax(112px,160px) minmax(0,1fr) auto; gap: 8px; align-items: end; padding: 14px 18px 18px; border-top: 1px solid rgba(92,72,56,.28); background: rgba(222,213,196,.96); }
.message-composer > label { display: grid; gap: 5px; }
.message-composer label > span { color: #7f7469; font-size: .6rem; }
.message-composer textarea, .message-composer select { border-color: rgba(73,58,47,.36); color: #2f2924; background: rgba(255,255,255,.58); }
.message-composer textarea { min-height: 68px; max-height: 150px; resize: vertical; }
.message-composer button { align-self: center; min-width: 58px; min-height: 44px; padding: 0 14px; border: 0; color: #fff; background: #9d3026; cursor: pointer; }
.message-composer.pl-message-composer { grid-template-columns: minmax(0,1fr) auto; }
.speaker-picker { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
.speaker-picker select { min-width: 0; }
.speaker-picker #send-speaker-portrait { min-width: auto; min-height: 38px; padding: 0 9px; border: 1px solid rgba(73,58,47,.36); color: #715544; background: rgba(255,255,255,.42); font-size: .64rem; white-space: nowrap; }
.speaker-picker #send-speaker-portrait:disabled { opacity: .45; cursor: not-allowed; }
.portrait-message .message-bubble { min-width: min(280px,70vw); text-align: center; }
.message-shared-portrait { position: relative; top: auto; left: auto; width: min(240px,62vw); height: min(300px,75vw); margin: 9px auto 0; border-radius: 3px; background-color: #c9bda9; box-shadow: none; }
.message-shared-portrait img { width: 100%; height: 100%; object-fit: contain; background: #171512; }
.sticker-message .message-bubble { padding: 0; border: 0; background: transparent; box-shadow: none; }
.message-sticker { display: block; width: min(170px,42vw); height: auto; max-height: 170px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(52,39,30,.12)); }
.message-composer button:disabled { opacity: .5; cursor: wait; }
.speaker-field[hidden] { display: none; }
.speaker-picker #temporary-speaker-name { grid-column: 1 / -1; box-sizing: border-box; width: 100%; height: 36px; border: 1px solid rgba(73,58,47,.36); color: #2f2924; background: rgba(255,255,255,.58); }
.speaker-picker #temporary-speaker-name[hidden] { display: none; }
.composer-actions { display: flex; align-items: center; gap: 7px; }
.message-composer .composer-icon-button { display: grid; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; place-items: center; border: 1px solid rgba(73,58,47,.32); border-radius: 50%; color: #715544; background: rgba(255,255,255,.38); }
.message-composer .composer-icon-button[hidden] { display: none !important; }
.message-composer .composer-icon-button:hover, .message-composer .composer-icon-button[aria-expanded="true"] { border-color: rgba(157,48,38,.58); color: #982f27; background: rgba(255,255,255,.68); }
.composer-icon-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.message-composer .send-message-button { min-width: 58px; }
.mention-picker { position: absolute; bottom: calc(100% + 7px); left: 18px; z-index: 21; box-sizing: border-box; width: min(330px,calc(100vw - 28px)); max-height: min(280px,42vh); padding: 6px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(76,58,45,.3); border-radius: 10px; background: #e7e0d1; box-shadow: 0 12px 32px rgba(30,22,16,.25); }
.mention-picker[hidden] { display: none; }
.message-composer .mention-option { display: grid; width: 100%; min-width: 0; min-height: 42px; padding: 6px 9px; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 0; border-radius: 7px; color: #40362e; background: transparent; text-align: left; }
.message-composer .mention-option:hover, .message-composer .mention-option[aria-selected="true"] { color: #7f271f; background: rgba(255,255,255,.66); }
.mention-option strong { overflow: hidden; font: 600 .76rem/1.25 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.mention-option small { flex: 0 0 auto; color: #89796b; font-size: .58rem; }
.mention-avatar { display: grid; width: 28px; height: 28px; overflow: hidden; place-items: center; border: 1px solid rgba(80,62,48,.25); border-radius: 50%; color: #75695c; background-color: #d1c5b2; font: 700 .68rem/1 var(--serif); }
.mention-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mention-avatar.message-avatar-atlas { background-size: 440% 220%; }
.sticker-picker { position: absolute; right: 18px; bottom: calc(100% + 7px); z-index: 20; box-sizing: border-box; width: min(390px,calc(100vw - 28px)); max-height: min(430px,52vh); padding: 11px; overflow: hidden; border: 1px solid rgba(76,58,45,.28); border-radius: 12px; background: #e7e0d1; box-shadow: 0 14px 38px rgba(30,22,16,.28); }
.sticker-picker[hidden] { display: none; }
.sticker-picker-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; color: #56463a; font: 600 .78rem/1.3 var(--serif); }
.sticker-picker-title { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.sticker-picker-title small { color: #8b7c6e; font: 400 .62rem/1.35 var(--serif); white-space: nowrap; }
.message-composer .sticker-picker-heading button { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; color: #78695d; background: transparent; font: 400 1.15rem/1 sans-serif; }
.sticker-grid { display: grid; max-height: min(370px,44vh); grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; overflow-y: auto; overscroll-behavior: contain; }
.sticker-tile { position: relative; min-width: 0; aspect-ratio: 1; }
.message-composer .sticker-option { display: grid; min-width: 0; min-height: 0; aspect-ratio: 1; padding: 3px; place-items: center; overflow: hidden; border: 1px solid transparent; border-radius: 9px; background: transparent; }
.message-composer .sticker-option:hover, .message-composer .sticker-option:focus-visible { border-color: rgba(157,48,38,.35); background: rgba(255,255,255,.78); }
.sticker-option img { display: block; width: 100%; height: 100%; object-fit: contain; }
.message-composer .sticker-favorite { position: absolute; top: 3px; right: 3px; z-index: 1; display: grid; width: 27px; min-width: 27px; height: 27px; min-height: 27px; padding: 0; place-items: center; border: 0; border-radius: 0; color: #756758; background: transparent; box-shadow: none; text-shadow: 0 1px 2px rgba(255,255,255,.9),0 1px 4px rgba(48,35,25,.24); font: 400 1.12rem/1 sans-serif; }
.message-composer .sticker-favorite[aria-pressed="true"] { color: #e0a615; background: transparent; }
.message-composer .sticker-favorite:hover, .message-composer .sticker-favorite:focus-visible { color: #c58b0d; background: transparent; outline: 1px solid rgba(157,48,38,.28); outline-offset: 1px; }

.effect-picker { position: absolute; right: 18px; bottom: calc(100% + 7px); z-index: 31; box-sizing: border-box; width: min(520px,calc(100vw - 28px)); max-height: min(610px,72vh); padding: 12px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(76,58,45,.3); border-radius: 12px; color: #4c4036; background: #e7e0d1; box-shadow: 0 14px 38px rgba(30,22,16,.28); }
.effect-picker[hidden] { display: none; }
.effect-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 8px; }
.effect-picker-heading strong { font: 600 .8rem/1.35 var(--serif); }
.message-composer .effect-picker-heading button { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; color: #78695d; background: transparent; font: 400 1.15rem/1 sans-serif; }
.effect-picker fieldset { display: grid; margin: 0; padding: 8px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; border: 1px solid rgba(95,76,59,.2); }
.effect-picker fieldset + fieldset { margin-top: 8px; }
.effect-picker legend { padding: 0 5px; color: #8f3027; font: 700 .66rem/1.3 var(--serif); letter-spacing: .08em; }
.effect-picker label { display: grid; min-width: 0; padding: 7px 8px; grid-template-columns: 17px minmax(0,1fr); gap: 7px; align-items: start; border-radius: 6px; cursor: pointer; }
.effect-picker label:hover { background: rgba(255,255,255,.58); }
.effect-picker input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: #9d3026; }
.effect-picker label span,.effect-picker label small { display: block; }
.effect-picker label span { color: #4d4036; font: 600 .7rem/1.4 var(--serif); }
.effect-picker label small { margin-top: 2px; color: #87796e; font: 400 .59rem/1.45 var(--sans); }
.effect-picker > p { margin: 9px 2px 0; color: #83766a; font: .59rem/1.55 var(--sans); }

.chat-card > .chat-effect-layer { position: absolute; z-index: 4; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.chat-effect-layer,.chat-effect-layer * { pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; touch-action: none; }
.blood-effect-layer { background: linear-gradient(90deg,rgba(64,0,1,.48),transparent 10% 90%,rgba(64,0,1,.42)); filter: contrast(1.08) saturate(1.1) drop-shadow(0 0 8px rgba(44,0,0,.5)); }
.blood-effect-art { position: absolute; display: block; background-position: center; background-repeat: no-repeat; background-size: contain; opacity: .82; }
.blood-effect-art.main { top: -23%; left: -13%; width: min(57%,560px); aspect-ratio: 688 / 554; background-image: url("effects/blood-splatter.webp"); transform: rotate(-7deg); }
.blood-effect-art.hand { top: 2%; right: -2%; width: min(28%,260px); aspect-ratio: 1; background-image: url("effects/blood-handprint.webp"); transform: rotate(8deg); opacity: .74; }
.blood-effect-art.small { right: -10%; bottom: -14%; width: min(39%,390px); aspect-ratio: 344 / 277; background-image: url("effects/blood-small.webp"); transform: rotate(17deg); opacity: .8; }
.mist-effect-layer { background: radial-gradient(ellipse at 20% 80%,rgba(151,175,170,.15),transparent 46%),radial-gradient(ellipse at 85% 25%,rgba(93,120,124,.12),transparent 42%); filter: blur(18px); transform: scale(1.16); }
.dawn-effect-layer { background: linear-gradient(116deg,rgba(255,232,184,.33),transparent 34%),radial-gradient(circle at 78% 8%,rgba(255,244,211,.72),rgba(235,169,85,.19) 16%,transparent 34%),linear-gradient(180deg,transparent 58%,rgba(69,38,19,.34)); mix-blend-mode: screen; }
.dawn-effect-layer::after { position: absolute; inset: -20%; background: conic-gradient(from 200deg at 80% 5%,transparent 0 7deg,rgba(255,224,167,.16) 8deg 11deg,transparent 12deg 22deg,rgba(255,218,146,.12) 23deg 29deg,transparent 30deg); filter: blur(5px); animation: tabletop-dawn-breathe 5s ease-in-out infinite alternate; content: ""; }
.ember-effect-layer i { position: absolute; bottom: -5%; width: 3px; height: 3px; border-radius: 50%; background: #ffd69a; box-shadow: 0 0 8px #e98435; opacity: 0; animation: tabletop-ember-rise 5.2s linear infinite; }
.ember-effect-layer i:nth-child(1) { left: 15%; animation-delay: .3s; }.ember-effect-layer i:nth-child(2) { left: 31%; animation-delay: 2.4s; }.ember-effect-layer i:nth-child(3) { left: 56%; animation-delay: 1.1s; }.ember-effect-layer i:nth-child(4) { left: 76%; animation-delay: 3.4s; }.ember-effect-layer i:nth-child(5) { left: 88%; animation-delay: 1.9s; }
.flashlight-effect-layer { background: radial-gradient(circle 125px at var(--effect-light-x,50%) var(--effect-light-y,50%),transparent 0,rgba(0,0,0,.08) 45%,rgba(0,0,0,.91) 100%); }
.shadow-effect-layer { background: rgba(207,214,211,.1); backdrop-filter: grayscale(1) brightness(.76); }
.shadow-effect-layer { visibility: hidden; }
.shadow-effect-art { position: absolute; display: none; top: 0; left: 0; width: min(72vw,720px); height: 100%; background: url("effects/ink-ghost.webp") center / contain no-repeat; filter: contrast(1.3) brightness(.78) drop-shadow(0 0 18px rgba(215,226,224,.34)); }
.storm-effect-layer { background: radial-gradient(ellipse at 75% 4%,rgba(180,207,218,.14),transparent 29%),linear-gradient(112deg,rgba(64,91,104,.17),transparent 46%); }
.storm-effect-layer::before { position: absolute; inset: -25%; background: radial-gradient(ellipse at 22% 30%,rgba(11,20,26,.78),transparent 32%),radial-gradient(ellipse at 58% 47%,rgba(31,48,57,.68),transparent 40%),radial-gradient(ellipse at 84% 25%,rgba(9,17,22,.72),transparent 31%); filter: blur(24px); animation: tabletop-cloud-drift 12s ease-in-out infinite alternate; content: ""; }
.storm-effect-layer::after { position: absolute; inset: 0; background: rgba(213,231,238,.32); opacity: 0; animation: tabletop-distant-lightning 7.4s steps(1,end) infinite; content: ""; }
.vignette-effect-layer { background: radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.22) 59%,rgba(0,0,0,.9) 100%); }
.grain-effect-layer { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.flash-effect-layer { z-index: 8 !important; }

.chat-card.room-effect-blood { border-color: #4b0808; background: #000; box-shadow: 0 35px 110px #000,0 0 60px rgba(110,0,0,.16); }
.room-effect-blood .chat-heading,.room-effect-blood .message-composer { border-color: #251010; background: #050303; }
.room-effect-blood .message-feed { color: #aa9d91; background: #000; }
.room-effect-blood .chat-heading h1 { color: #b8aca2; }
.room-effect-blood .message-composer select,.room-effect-blood .message-composer textarea { border-color: rgba(185,54,47,.62); color: #ffe9e3; background: rgba(38,8,8,.96); caret-color: #ff5145; }
.room-effect-blood .message-composer textarea::placeholder { color: #c28d87; opacity: 1; }
.room-effect-blood .message-bubble { border-color: rgba(110,18,18,.42); color: #a99d92; background: rgba(18,8,8,.86); box-shadow: none; }
.room-effect-blood .narrator-message .message-bubble { color: #746560; background: transparent; }
.room-effect-blood .effect-target-message .message-bubble { color: #f13b2f; text-shadow: 0 0 14px rgba(220,18,10,.4); }
.room-effect-blood .blood-effect-layer,.room-effect-blood .vignette-effect-layer { opacity: 1; }

.chat-card.room-effect-horror { border-color: #344143; box-shadow: 0 30px 100px #000,0 0 65px rgba(53,94,91,.15); }
.room-effect-horror .chat-heading,.room-effect-horror .message-composer { border-color: rgba(97,124,117,.2); background: rgba(13,18,17,.96); }
.room-effect-horror .message-feed { background: radial-gradient(circle at 47% 15%,#65706b,#222b29 53%,#070b0b 100%); }
.room-effect-horror .chat-heading h1,.room-effect-horror .message-composer select,.room-effect-horror .message-composer textarea { color: #c0cbc6; }
.room-effect-horror .message-bubble { border-color: rgba(137,169,160,.16); color: #b9c3bd; background: rgba(3,10,9,.63); box-shadow: 0 9px 25px rgba(0,0,0,.2); }
.room-effect-horror .narrator-message .message-bubble { border: 0; color: #a8b5af; background: transparent; box-shadow: none; }
.room-effect-horror .vignette-effect-layer,.room-effect-horror .mist-effect-layer,.room-effect-horror .grain-effect-layer { opacity: 1; }
.room-effect-horror .mist-effect-layer { animation: tabletop-mist 7s ease-in-out infinite alternate; }

.chat-card.room-effect-aftermath { border-color: #8a6d47; box-shadow: 0 35px 120px rgba(48,29,9,.72),0 0 70px rgba(226,167,84,.12); }
.room-effect-aftermath .chat-heading,.room-effect-aftermath .message-composer { border-color: rgba(120,74,39,.26); background: rgba(225,198,155,.97); }
.room-effect-aftermath .message-feed { background: linear-gradient(145deg,#f6e5c5 0,#c9a77d 54%,#765039 100%); }
.room-effect-aftermath .message-bubble { border-color: rgba(106,75,40,.2); color: #433528; background: rgba(255,246,224,.58); }
.room-effect-aftermath .narrator-message .message-bubble { color: #503d2e; background: transparent; }
.room-effect-aftermath .dawn-effect-layer,.room-effect-aftermath .ember-effect-layer,.room-effect-aftermath .grain-effect-layer { opacity: 1; }
.room-effect-aftermath .grain-effect-layer { opacity: .18; }

.room-effect-glitch .grain-effect-layer,.room-effect-glitch .vignette-effect-layer { opacity: .34; }
.room-effect-glitch .effect-target-message .message-bubble { position: relative; color: #2b161a; letter-spacing: .015em; text-shadow: 1px 0 rgba(160,0,0,.58),-1px 0 rgba(41,104,112,.5); }
.room-effect-glitch.effect-animate .effect-target-message .message-bubble { animation: tabletop-corrupt-text 1.05s steps(2,end) 1; }
.room-effect-glitch.effect-animate .effect-target-message .message-bubble::before,.room-effect-glitch.effect-animate .effect-target-message .message-bubble::after { position: absolute; inset: 12px 5px; pointer-events: none; content: attr(data-effect-text); }
.room-effect-glitch.effect-animate .effect-target-message .message-bubble::before { color: #a72c26; opacity: 0; clip-path: inset(18% 0 57% 0); animation: tabletop-glitch-left 1.05s steps(2,end) 1; }
.room-effect-glitch.effect-animate .effect-target-message .message-bubble::after { color: #254c54; opacity: 0; clip-path: inset(65% 0 17% 0); animation: tabletop-glitch-right 1.05s steps(2,end) 1; }

.room-effect-glitch-heavy .grain-effect-layer,.room-effect-glitch-heavy .vignette-effect-layer { opacity: .58; }
.room-effect-glitch-heavy .effect-target-message .message-bubble { position: relative; color: #1d0d13; letter-spacing: .065em; transform: skewX(-1.4deg); text-shadow: 4px 0 rgba(170,0,17,.7),-4px -1px rgba(0,94,108,.64),1px 3px rgba(18,0,8,.55); }
.room-effect-glitch-heavy.effect-animate .effect-target-message .message-bubble { animation: tabletop-corrupt-text-heavy 1.05s steps(2,end) 1; }
.room-effect-glitch-heavy.effect-animate .effect-target-message .message-bubble::before,.room-effect-glitch-heavy.effect-animate .effect-target-message .message-bubble::after { position: absolute; inset: 10px 3px; z-index: 1; pointer-events: none; content: attr(data-effect-text); }
.room-effect-glitch-heavy.effect-animate .effect-target-message .message-bubble::before { color: #a00013; opacity: 0; clip-path: polygon(0 8%,100% 2%,100% 31%,0 39%,0 66%,100% 58%,100% 76%,0 86%); animation: tabletop-glitch-heavy-left 1.05s steps(2,end) 1; }
.room-effect-glitch-heavy.effect-animate .effect-target-message .message-bubble::after { color: #005869; opacity: 0; clip-path: polygon(0 24%,100% 18%,100% 48%,0 57%,0 79%,100% 71%,100% 94%,0 100%); animation: tabletop-glitch-heavy-right 1.05s steps(2,end) 1; }

.chat-card.room-effect-storm { border-color: #33444f; box-shadow: 0 35px 110px #000,0 0 80px rgba(65,94,111,.14); }
.room-effect-storm .chat-heading,.room-effect-storm .message-composer { border-color: rgba(139,167,179,.2); background: rgba(30,39,43,.97); }
.room-effect-storm .message-feed { background: linear-gradient(150deg,#77848a,#303c42 58%,#11181c); }
.room-effect-storm .chat-heading h1,.room-effect-storm .message-composer select,.room-effect-storm .message-composer textarea { color: #d4dde0; }
.room-effect-storm .message-bubble { color: #d0d8da; background: rgba(23,32,36,.7); border-color: rgba(168,192,201,.2); }
.room-effect-storm .narrator-message .message-bubble { color: #d7dee0; background: transparent; }
.room-effect-storm .storm-effect-layer,.room-effect-storm .vignette-effect-layer,.room-effect-storm .grain-effect-layer { opacity: 1; }
.room-effect-storm .grain-effect-layer { opacity: .2; }

.chat-card.room-effect-flashlight .flashlight-effect-layer { opacity: 1; }
.chat-card.effect-shadow .shadow-effect-layer { visibility: visible; opacity: 1; animation: tabletop-shadow-fade .1s linear 1 both; }
.chat-card.effect-shadow .shadow-effect-art { display: block; animation: tabletop-shadow-pass .1s linear 1 both; }
.chat-card.effect-wake > :not(.chat-effect-layer) { animation: tabletop-wake-focus 1.85s cubic-bezier(.2,.72,.2,1) 1 both; transform-origin: 50% 45%; }
.chat-card.effect-flash .flash-effect-layer { animation: tabletop-invert-flash 1.65s steps(1,end) 1; }

@keyframes tabletop-invert-flash { 0%,100%{opacity:0;backdrop-filter:none;background:transparent}10%,22%,38%{opacity:1;backdrop-filter:invert(1) contrast(1.45);background:rgba(255,255,255,.08)}16%,29%,46%{opacity:.12;backdrop-filter:invert(.1);background:rgba(255,255,255,.02)} }
@keyframes tabletop-shadow-fade { 0%,100%{opacity:0}10%,88%{opacity:1} }
@keyframes tabletop-shadow-pass { 0%{transform:translateX(-105%) scale(.96);opacity:0}10%{opacity:.98}50%{transform:translateX(0) scale(1.02);opacity:1}88%{opacity:.96}100%{transform:translateX(105%) scale(.98);opacity:0} }
@keyframes tabletop-wake-focus { 0%{filter:blur(18px) brightness(.48) saturate(.3);transform:scale(1.075);opacity:.58}18%{filter:blur(14px) brightness(.58) saturate(.45);opacity:.72}58%{filter:blur(5px) brightness(.86) saturate(.78);transform:scale(1.018);opacity:.94}100%{filter:none;transform:scale(1);opacity:1} }
@keyframes tabletop-mist { from{transform:translate3d(-3%,1%,0) scale(1.14)}to{transform:translate3d(3%,-1%,0) scale(1.22)} }
@keyframes tabletop-dawn-breathe { from{opacity:.72;transform:rotate(-1deg) scale(1)}to{opacity:1;transform:rotate(1deg) scale(1.04)} }
@keyframes tabletop-ember-rise { 0%{opacity:0;transform:translate3d(0,0,0) scale(.7)}15%{opacity:.8}70%{opacity:.28}100%{opacity:0;transform:translate3d(22px,-620px,0) scale(1.5)} }
@keyframes tabletop-cloud-drift { from{transform:translate3d(-4%,1%,0) scale(1.02)}to{transform:translate3d(5%,-2%,0) scale(1.1)} }
@keyframes tabletop-distant-lightning { 0%,82%,87%,100%{opacity:0}83%,85%{opacity:.48}84%{opacity:.08} }
@keyframes tabletop-corrupt-text { 0%,100%{transform:translate(0);letter-spacing:.015em;filter:none}8%{transform:translate(-1px,1px) skewX(-1.5deg);letter-spacing:.045em}13%{transform:translate(2px,-1px)}19%{transform:translate(-1px);filter:blur(.2px)}31%{transform:translate(1px,1px) skewX(1.5deg);letter-spacing:0}37%,54%{transform:translate(0)}61%{transform:translate(-2px,-1px);letter-spacing:.04em}67%{transform:translate(2px,1px) skewX(-1deg)}74%{transform:translate(-1px);filter:blur(.25px)}82%,100%{transform:translate(0);filter:none} }
@keyframes tabletop-glitch-left { 0%,5%,22%,42%,58%,79%,100%{opacity:0;transform:translateX(0)}8%,18%,46%,55%,63%,74%{opacity:.58;transform:translateX(-2px)}12%,50%,69%{opacity:.28;transform:translateX(2px)} }
@keyframes tabletop-glitch-right { 0%,12%,29%,49%,66%,88%,100%{opacity:0;transform:translateX(0)}15%,25%,52%,62%,72%,84%{opacity:.52;transform:translateX(2px)}20%,57%,78%{opacity:.25;transform:translateX(-2px)} }
@keyframes tabletop-corrupt-text-heavy { 0%,100%{transform:skewX(-1.4deg);letter-spacing:.065em;filter:none}7%{transform:translate(-7px,3px) skewX(-6deg);letter-spacing:.13em}14%{transform:translate(9px,-4px) skewX(5deg)}23%{transform:translate(-5px,-2px) scaleX(1.035);filter:blur(.5px)}34%{transform:translate(8px,2px) skewX(-4deg);letter-spacing:.02em}47%{transform:translate(-9px,1px) scaleX(.97)}59%{transform:translate(6px,-3px) skewX(6deg);filter:blur(.35px)}72%{transform:translate(-5px,4px) skewX(-3deg);letter-spacing:.12em}84%{transform:translate(7px,-1px) scaleX(1.025)}92%{transform:translate(-3px,1px) skewX(2deg)} }
@keyframes tabletop-glitch-heavy-left { 0%,100%{opacity:0;transform:translate(0)}8%,27%,53%,76%{opacity:.78;transform:translate(-10px,-2px) skewX(-8deg)}16%,38%,64%,88%{opacity:.46;transform:translate(7px,3px) skewX(5deg)} }
@keyframes tabletop-glitch-heavy-right { 0%,100%{opacity:0;transform:translate(0)}12%,33%,58%,81%{opacity:.72;transform:translate(11px,2px) skewX(7deg)}21%,45%,69%,91%{opacity:.42;transform:translate(-8px,-3px) skewX(-5deg)} }

.dicebot-help { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: .64rem; }
.dicebot-help h3 { margin: 0 0 8px; color: var(--gold); font: 600 .72rem/1.3 var(--serif); letter-spacing: .08em; }
.dicebot-help dl { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 7px 16px; margin: 0; }
.dicebot-help dl > div { display: contents; }
.dicebot-help dt, .dicebot-help dd { margin: 0; }
.dicebot-help dt { white-space: nowrap; }
.dicebot-help dd { line-height: 1.45; }
.dicebot-help p { margin: 12px 0 0; line-height: 1.7; }
.dicebot-help code { color: #dfb96f; }

.clue-editor { display: grid; gap: 9px; margin-top: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.clue-editor[hidden] { display: none !important; }
.clue-editor label { display: grid; gap: 5px; color: var(--muted); font-size: .67rem; }
.clue-editor input { height: 34px; }
.clue-editor textarea { min-height: 76px; }
.clue-editor button, .clue-delivery button, .clue-management button { min-height: 34px; border: 1px solid #6e4b3c; color: #f1ddd0; background: rgba(180,31,39,.22); cursor: pointer; font-size: .68rem; }
.clue-form-actions { display: flex; gap: 6px; }
.clue-form-actions button { flex: 1; }
.clue-form-actions button[hidden] { display: none; }
.clue-version-editor { display: grid; gap: 7px; padding: 9px; border: 1px solid #403c35; background: rgba(255,255,255,.02); }
.clue-version-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.clue-version-heading span { color: #bbb4a8; font: 600 .69rem/1.3 var(--serif); }
.clue-version-heading button { flex: 0 0 auto; min-height: 28px; padding: 0 9px; color: #cbb788; background: transparent; white-space: nowrap; }
.clue-version-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.clue-version-tab { display: flex; }
.clue-version-tab button { min-height: 28px; max-width: 150px; padding: 0 9px; overflow: hidden; border-color: #504b42; color: #aaa397; background: #181714; text-overflow: ellipsis; white-space: nowrap; }
.clue-version-tab button[aria-pressed="true"] { border-color: #a48a55; color: #ead9ae; background: rgba(164,138,85,.16); }
.clue-version-tab button.remove-version { width: 28px; padding: 0; border-left: 0; color: #c78379; }
.clue-version-editor small { color: #77736b; font-size: .6rem; line-height: 1.5; }
.clue-image-field input { height: auto; padding: 7px; }
.clue-image-preview { display: grid; gap: 7px; }
.clue-image-preview[hidden] { display: none; }
#clue-image-preview-list, .clue-card-gallery, .pl-clue-gallery { display: flex; flex-wrap: wrap; gap: 7px; }
.clue-image-preview img { display: block; width: 112px; height: 90px; object-fit: contain; border: 1px solid #4a453d; background: #0d0d0c; }
.clue-card-image, .pl-clue-images img { display: block; width: auto; max-width: 140px; height: 96px; object-fit: cover; border: 1px solid #4a453d; background: #0d0d0c; }
.clue-image-button { display: block; width: fit-content; margin-top: 8px; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.clue-image-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.clue-image-preview button { justify-self: start; min-height: 32px; padding: 0 10px; border-color: #713c37; color: #df8c80; background: transparent; }
.clue-list { display: grid; gap: 8px; margin: 12px 16px 16px; }
.clue-list[hidden], .clues-content[hidden], #clue-count[hidden] { display: none !important; }
.clue-card { padding: 10px; border: 1px solid #454139; background: #1d1c19; }
.clue-card header { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.clue-card h3 { margin: 0; color: #ddd5c7; font: 600 .78rem/1.4 var(--serif); }
.clue-card header span { flex: 0 0 auto; color: #827d73; font-size: .56rem; }
.clue-card header span.sent { color: #91b288; }
.clue-card p { margin: 7px 0 0; color: var(--muted); font-size: .69rem; line-height: 1.6; white-space: pre-wrap; }
.clue-version-preview-list { display: grid; gap: 7px; margin-top: 8px; }
.clue-version-preview { padding: 8px; border: 1px solid #37342e; background: #191815; }
.clue-version-preview > strong { color: #bda66f; font: 600 .65rem/1.3 var(--serif); }
.clue-version-preview > small { display: block; margin-top: 5px; color: #68645c; font-size: .6rem; }
.clue-management { display: flex; justify-content: flex-end; gap: 5px; margin-top: 8px; }
.clue-management button { min-height: 28px; padding: 0 9px; background: transparent; }
.clue-management button.danger { border-color: #713c37; color: #df8c80; }
.clue-delivery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-top: 9px; }
.clue-delivery select { min-height: 34px; font-size: .65rem; }
.clue-delivery-actions { display: flex; grid-column: 1 / -1; gap: 5px; }
.clue-delivery-actions button { flex: 1; min-width: 48px; padding-inline: 8px; }
.clue-delivery-actions button.danger { border-color: #713c37; color: #df8c80; background: transparent; }
.clue-empty { padding: 16px 2px; color: #77736b; font-size: .7rem; line-height: 1.6; }
.pl-clue-list { margin-top: 15px; }
.pl-clue-list .clue-card { padding: 12px; border-color: #5b5040; background: rgba(203,166,92,.07); }
.pl-clue-list .clue-card h3 { color: var(--gold); }
.pl-clue-list .clue-card p { color: #bbb4a8; }
.pl-clue-images { display: grid; gap: 10px; margin-top: 10px; }
.pl-clue-images:empty { display: none; }
.pl-clue-card { padding: 10px; border: 1px solid #37342e; background: #191815; }
.pl-clue-card > strong { color: var(--gold); font: 600 .72rem/1.4 var(--serif); }
.pl-clue-card > p { margin: 7px 0 0; color: #bbb4a8; font-size: .69rem; line-height: 1.6; white-space: pre-wrap; }
.pl-clue-gallery { margin-top: 8px; }
.pl-clue-images .clue-image-button { margin-top: 0; }

.tabletop-character-panel { padding-bottom: 16px; }
.character-panel-heading { margin-bottom: 10px; }
.character-panel-heading[hidden] { display: none !important; }
.character-toolbar, .entity-save-actions, .review-actions { display: flex; gap: 6px; margin-top: 8px; }
.character-toolbar[hidden], .kp-character-tools[hidden], .entity-save-actions[hidden], .review-actions[hidden], .character-profile-card[hidden], .kp-card-empty[hidden] { display: none !important; }
.character-toolbar button, .entity-save-actions button, .review-actions button { flex: 1; min-height: 34px; padding: 0 8px; border: 1px solid #554d40; color: #d2c9ba; background: #23221f; cursor: pointer; font-size: .66rem; }
.character-toolbar .primary, .entity-save-actions .primary, .review-actions .approve { border-color: #6b5a35; color: #f1dca8; background: rgba(203,166,92,.1); }
.entity-save-actions .danger, .review-actions .reject, .review-actions .danger { border-color: #713c37; color: #df8c80; }
.kp-card-selectors { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 8px; }
.kp-card-selectors label { display: grid; gap: 4px; min-width: 0; color: #858077; font-size: .58rem; }
.kp-card-selectors select { width: 100%; min-width: 0; min-height: 34px; padding: 0 6px; font-size: .62rem; text-overflow: ellipsis; }
.kp-card-empty { margin: 10px 0 0; padding: 10px; border: 1px dashed #403d36; color: #77736b; font-size: .66rem; line-height: 1.55; }
.review-feedback { margin: 7px 0 0; padding: 8px 9px; border-left: 2px solid #6b5a35; color: #bdb4a5; background: rgba(203,166,92,.06); font-size: .64rem; line-height: 1.5; }
.review-feedback[data-state="returned"] { border-left-color: #a95e50; color: #df9b8e; background: rgba(157,48,38,.08); }
.review-feedback[data-state="torn"] { border-left-color: #6f6f6f; color: #aaa; background: rgba(110,110,110,.09); }
.character-profile-card { display: grid; grid-template-columns: minmax(0,1fr) 92px; gap: 11px; margin-top: 10px; padding: 10px; border: 1px solid #49443a; background: linear-gradient(135deg,rgba(203,166,92,.09),rgba(18,18,16,.82) 58%); }
.character-profile-card.torn-character-card { filter: grayscale(1); opacity: .62; }
.character-profile-card.card-content-scrolled { display: none; }
.character-profile-portrait-column { position: relative; display: grid; min-width: 0; align-self: start; align-content: start; gap: 7px; }
.character-profile-portrait-column > .profile-visibility-toggle { position: absolute; right: 5px; bottom: 5px; z-index: 1; }
.character-profile-portrait { width: 100%; aspect-ratio: 4/5; overflow: hidden; border: 1px solid #554c3e; border-radius: 4px; background-color: #28251f; background-repeat: no-repeat; background-size: cover; background-position: center; }
.character-profile-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.character-profile-portrait.message-avatar-atlas { background-size: 510% 204%; }
.character-profile-portrait-empty { display: grid; place-items: center; padding: 6px; color: #787166; font-size: .58rem; text-align: center; }
.character-profile-details { min-width: 0; }
.character-profile-title { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 31px; padding-bottom: 7px; border-bottom: 1px solid #443e34; }
.character-profile-title > strong { overflow: hidden; color: #ead8aa; font: 600 .9rem/1.3 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.character-profile-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px 10px; padding-top: 5px; }
.character-profile-field { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 5px; align-items: center; min-height: 29px; border-bottom: 1px solid rgba(75,68,57,.52); }
.character-profile-field > span { color: #817a6f; font-size: .56rem; }
.character-profile-field > strong { overflow: hidden; color: #d8d0c2; font: 600 .66rem/1.25 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.profile-visibility-toggle { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; color: #5f5a51; cursor: pointer; }
.profile-visibility-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.profile-visibility-toggle span { display: grid; width: 15px; height: 15px; place-items: center; border: 1px solid #575044; border-radius: 3px; color: transparent; background: #191816; font: 700 .62rem/1 sans-serif; }
.profile-visibility-toggle input:checked + span { border-color: #927747; color: #f0d894; background: #342d20; }
.profile-visibility-toggle input:focus-visible + span { outline: 2px solid #a26e41; outline-offset: 1px; }
.profile-visibility-toggle input:disabled + span { opacity: .5; }
.character-profile-hint { grid-column: 1/-1; margin: -1px 0 0; color: #777168; font-size: .55rem; line-height: 1.45; }
.vital-control { display: block; min-width: 0; }
.vital-control input { box-sizing: border-box; width: 100%; min-width: 0; height: 28px; padding: 0 5px; border: 1px solid #403d36; color: #ddd5c7; background: #191916; text-align: center; font-size: .76rem; appearance: textfield; }
.vital-control input::-webkit-inner-spin-button { appearance: none; }
.character-frame-wrap { position: relative; display: flex; min-width: 0; margin-top: 10px; overflow: hidden; flex-direction: column; border: 1px solid #3f3b34; background: #0c0c0c; }
.character-frame-wrap iframe { display: block; width: 100%; height: calc(100vh - 265px); min-height: 520px; flex: 1 1 auto; border: 0; background: #0c0c0c; }
.character-lock-banner { position: sticky; z-index: 2; top: 0; margin: 0; padding: 8px 10px; border-bottom: 1px solid #695a38; color: #efdcae; background: #282318; font-size: .64rem; line-height: 1.45; }

.entry-dialog, .entity-dialog, .message-edit-dialog, .character-profile-dialog { max-width: none; padding: 0; border: 1px solid #504a40; border-top: 2px solid var(--ember); color: var(--ink); background: #171715; box-shadow: 0 30px 120px rgba(0,0,0,.8); }
.entry-dialog::backdrop, .entity-dialog::backdrop, .message-edit-dialog::backdrop, .character-profile-dialog::backdrop { background: rgba(0,0,0,.86); backdrop-filter: blur(5px); }
.character-profile-dialog { width: min(520px,calc(100vw - 26px)); }
.character-profile-dialog-shell { padding: 18px; }
.character-profile-dialog-shell > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.character-profile-dialog-shell h2 { margin: 0; color: #ead8aa; font: 600 1rem/1.35 var(--serif); }
.character-profile-dialog-shell header button { min-height: 32px; padding: 0 10px; border: 1px solid #514b41; color: #cfc4b4; background: #24231f; cursor: pointer; }
#character-profile-dialog-content { display: grid; grid-template-columns: minmax(0,1fr) 128px; gap: 16px; }
.entry-dialog { width: min(520px,calc(100vw - 26px)); }
.tabletop-page #entry-dialog[open], .tabletop-page #tabletop-account-dialog[open] { position: fixed; z-index: 15; top: calc(var(--tabletop-viewport-top,0px) + var(--tabletop-header-height,76px) + 10px); right: 13px; bottom: auto; left: 13px; max-height: calc(var(--tabletop-viewport-height,100dvh) - var(--tabletop-header-height,76px) - 20px); margin: 0 auto; overflow-x: hidden; overflow-y: auto; }
.tabletop-page #tabletop-account-dialog[open] { z-index: 16; }
.entry-card { padding: 28px; }
.entry-card h2, .entity-dialog h2, .message-edit-dialog h2 { margin: 8px 0; font: 600 1.35rem/1.35 var(--serif); }
.entry-card > p:not(.dialog-error) { margin: 0 0 18px; color: var(--muted); font-size: .76rem; line-height: 1.65; }
.entry-account { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -2px 0 16px; padding: 10px 11px; border: 1px solid #403d36; background: #1d1c19; }
.entry-account > div { display: grid; min-width: 0; gap: 2px; }
.entry-account span, .entry-account small { color: #7f7a71; font-size: .58rem; }
.entry-account strong { overflow: hidden; color: #e3d8c6; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.entry-account small.syncing { color: #c9a55f; }
.entry-account small.synced { color: #83a37c; }
.entry-account button { flex: 0 0 auto; min-height: 34px; padding: 0 10px; border: 1px solid #5a554b; color: #e0c98f; background: #29261f; cursor: pointer; font-size: .64rem; }
.role-switch { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; border: 1px solid #423f38; }
.role-switch button { min-height: 42px; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.role-switch button[aria-selected="true"] { color: #f4dfb0; background: var(--ember-dim); box-shadow: inset 0 -2px var(--ember-bright); }
.entry-form { display: grid; gap: 11px; }
.entry-form[hidden] { display: none; }
.entry-form label, .entity-dialog label { display: grid; gap: 6px; color: var(--muted); font-size: .7rem; }
.entry-submit { min-height: 44px; margin-top: 3px; border: 0; color: white; background: var(--ember); cursor: pointer; }
.dialog-error { min-height: 20px; margin: 9px 0 0; color: #e47c6c; font-size: .7rem; }
.recent-rooms { margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.recent-rooms > header, .settings-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.entry-room-disclosure > summary { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; border: 1px solid #403d36; color: #ded6c9; background: #1d1c19; cursor: pointer; list-style: none; }
.entry-room-disclosure > summary::-webkit-details-marker { display: none; }
.entry-room-disclosure > summary strong, .recent-rooms header strong { font-size: .72rem; }
.recent-rooms header span { color: #77736b; font-size: .62rem; }
.entry-room-chevron { width: 9px; height: 9px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg); transition: transform .2s ease; }
.entry-room-disclosure[open] .entry-room-chevron { transform: rotate(225deg); }
.entry-room-disclosure[open] > summary { border-color: #5b5040; }
.room-list-empty { padding: 12px 0 0; color: #77736b; font-size: .68rem; }
.saved-room { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; margin-top: 7px; padding: 8px; border: 1px solid #3e3b35; background: #1d1c19; }
.saved-room strong, .saved-room small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-room strong { font-size: .7rem; }
.saved-room small { margin-top: 3px; color: #77736b; font-size: .58rem; }
.saved-room button, .settings-action { min-height: 32px; padding: 0 8px; border: 1px solid #504a40; color: #d2c7b7; background: #24231f; cursor: pointer; font-size: .64rem; }
.saved-room .delete-saved-room { border-color: #653d38; color: #d8867a; }
.saved-room-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.settings-toast { position: absolute; z-index: 20; right: 16px; bottom: 16px; max-width: calc(100% - 32px); padding: 10px 14px; border-left: 3px solid var(--ember-bright); color: var(--ink); background: #2a2824; box-shadow: 0 10px 32px rgba(0,0,0,.42); opacity: 0; transform: translateY(7px); pointer-events: none; transition: 160ms ease; font-size: .72rem; }
.tabletop-page .toast { z-index: 1000; }
.settings-toast.show { opacity: 1; transform: none; }
.current-identity { margin-bottom: 9px; color: var(--muted); font-size: .73rem; line-height: 1.6; }
.settings-room-list .saved-room { margin-top: 8px; }
.house-rules-form { display: grid; gap: 9px; }
.house-rule-number-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.house-rule-number-grid label, .house-rule-notes { display: grid; gap: 5px; color: var(--muted); font-size: .64rem; line-height: 1.4; }
.house-rule-number-grid input { width: 100%; min-height: 36px; }
.house-rule-check { display: flex; align-items: center; gap: 8px; color: #c4bdb1; font-size: .68rem; }
.house-rule-check input { width: 16px; height: 16px; accent-color: var(--ember); }
.house-rule-notes textarea { width: 100%; min-height: 82px; resize: vertical; }
.house-rules-form > button { justify-self: start; min-width: 110px; }
#house-rules-readonly { margin: 0; color: #817d74; font-size: .62rem; }

.entity-dialog, .message-edit-dialog { width: min(450px,calc(100vw - 26px)); }
.entity-dialog form, .message-edit-dialog form { display: grid; gap: 13px; padding: 24px; }
.entity-dialog form > div:first-child { display: block; }
.entity-dialog form > div:first-child p { margin: 7px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.entity-dialog form > div, .message-edit-dialog form > div { display: flex; justify-content: flex-end; gap: 7px; }
.entity-dialog form button, .message-edit-dialog form button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); color: var(--ink); background: #24231f; cursor: pointer; }
.entity-dialog form button.primary, .message-edit-dialog form button.primary { border-color: #77433c; color: white; background: var(--ember); }
.message-edit-dialog textarea { min-height: 130px; }
.clue-image-dialog { max-width: none; padding: 42px 14px 14px; border: 1px solid #504a40; background: #11110f; box-shadow: 0 30px 120px rgba(0,0,0,.85); }
.clue-image-dialog::backdrop { background: rgba(0,0,0,.88); backdrop-filter: blur(4px); }
.clue-image-dialog > button { position: absolute; top: 8px; right: 8px; min-height: 28px; padding: 0 9px; border: 1px solid #5a554c; color: #d3ccc0; background: #24231f; cursor: pointer; }
.clue-image-dialog img { display: block; max-width: min(90vw,1100px); max-height: calc(90vh - 58px); object-fit: contain; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@media (min-width:901px) {
  .chat-heading { grid-template-columns: minmax(0,1fr) auto; gap: 4px 16px; }
  .chat-heading-actions { grid-column: 2; grid-row: 1; }
  .participant-strip { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width:1221px) {
  .chat-card { min-height: min(650px,calc(100vh - 136px)); }
  .tabletop-character-panel { display: flex; box-sizing: border-box; height: calc(100vh - 136px); min-height: min(650px,calc(100vh - 136px)); max-height: none; flex-direction: column; overflow: hidden; }
  .tabletop-character-panel > * { flex: 0 0 auto; }
  .tabletop-character-panel .character-frame-wrap { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
  .tabletop-character-panel .character-frame-wrap iframe { height: 100%; min-height: 0; }
}
@media (min-width:1500px) {
  .tabletop-layout { grid-template-columns: minmax(230px,260px) minmax(560px,1fr) minmax(390px,440px); width: min(1840px,calc(100% - 28px)); }
  .dicebot-help dl { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .dicebot-help dt { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width:1220px) {
  .tabletop-topbar { grid-template-columns: minmax(0,1fr) 42px; grid-template-rows: auto auto; }
  .tabletop-topbar .topbar-actions { display: contents; }
  .tabletop-topbar .room-presence { display: none; }
  .tabletop-topbar .mobile-panel-tabs { grid-column: 1 / -1; grid-row: 2; display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: visible; }
  .tabletop-topbar .mobile-panel-tabs button { display: inline-flex; width: 100%; min-width: 0; align-items: center; justify-content: center; }
  .settings-button { grid-column: 2; grid-row: 1; width: 42px; min-width: 42px; min-height: 42px; }
  .tabletop-page.room-active { position: fixed; top: var(--tabletop-viewport-top,0px); right: 0; bottom: auto; left: 0; display: flex; width: 100%; height: var(--tabletop-viewport-height,100dvh); min-height: 0; flex-direction: column; overflow: hidden; }
  .tabletop-page.room-active .tabletop-topbar { position: relative; z-index: 100; top: auto; flex: 0 0 auto; width: 100%; }
  .tabletop-layout { position: relative; display: block; box-sizing: border-box; width: min(calc(100% - 24px),900px); height: auto; min-height: 0; margin: 0 auto; padding: 5px 0 max(5px,env(safe-area-inset-bottom)); flex: 1 1 0; }
  .tabletop-page .left-rail { position: static; display: block; max-height: none; overflow: visible; }
  .chat-card { grid-template-rows: auto minmax(0,1fr) auto; height: 100%; min-height: 0; max-height: 100%; }
  .tabletop-page .left-rail .dice-panel, .tabletop-page .left-rail .clues-panel, .tabletop-page .tools-panel { position: fixed; z-index: 90; top: calc(var(--tabletop-header-height,106px) + var(--tabletop-viewport-top,0px)); bottom: auto; box-sizing: border-box; height: calc(var(--tabletop-viewport-height,100dvh) - var(--tabletop-header-height,106px)); max-height: none; padding-top: 0; overflow-x: hidden; overflow-y: auto; contain: layout paint; transition: transform 140ms ease; }
  .tabletop-page .left-rail .dice-panel, .tabletop-page .left-rail .clues-panel { left: 0; width: min(430px,calc(100vw - 32px)); border-right: 1px solid var(--line); transform: translateX(-105%); }
  .tabletop-page .tools-panel { right: 0; left: auto; display: flex; width: min(600px,calc(100vw - 32px)); max-width: none; flex-direction: column; overflow: hidden; border-right: 0; border-left: 1px solid var(--line); transform: translateX(105%); }
  .tabletop-page .left-rail .dice-panel.open, .tabletop-page .left-rail .clues-panel.open, .tabletop-page .tools-panel.open { transform: none; }
  .tabletop-page .tools-panel > * { flex: 0 0 auto; }
  .tabletop-page .tools-panel .character-frame-wrap { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
  .character-frame-wrap iframe { height: 100%; min-height: 0; }
  .tabletop-page .scrim { z-index: 70; background: rgba(0,0,0,.26); }
}
@media (max-width:900px) {
  .tabletop-layout { position: relative; top: auto; right: auto; bottom: auto; left: auto; box-sizing: border-box; width: min(calc(100% - 18px),700px); height: auto; min-height: 0; margin: 0 auto; padding: 5px 0 max(5px,env(safe-area-inset-bottom)); flex: 1 1 0; }
  .chat-card { grid-template-rows: auto minmax(0,1fr) auto; height: 100%; min-height: 0; max-height: 100%; }
  .tabletop-page.message-input-active .chat-card { grid-template-rows: minmax(0,1fr) auto; }
  .tabletop-page.message-input-active .chat-heading { display: none; }
  .tabletop-page.message-input-active .message-feed { min-height: 72px; padding-top: 10px; }
  .chat-heading { grid-template-columns: minmax(0,1fr) auto; gap: 8px 10px; padding: 14px 20px 10px; }
  .chat-heading h1 { font-size: 1.25rem; }
  .chat-heading-actions { grid-column: 2; grid-row: 1; flex-flow: row wrap; justify-content: flex-end; }
  .chat-heading-actions button { min-height: 28px; padding: 0 7px; font-size: .58rem; }
  .participant-strip { grid-column: 1 / -1; grid-row: 2; height: 28px; min-height: 28px; max-height: 28px; padding: 1px 0; }
  .message-feed { padding: 17px 18px 20px; }
  .message { max-width: 94%; }
  .message-actions { opacity: 1; }
  .message-composer { grid-template-columns: minmax(0,1fr) auto; padding: 10px 12px max(10px,env(safe-area-inset-bottom)); }
  .message-composer textarea { min-height: 52px; max-height: 96px; resize: none; }
  .message-composer .speaker-field { grid-column: 1 / -1; }
  .message-composer button { padding: 0 13px; }
  .composer-actions { gap: 5px; }
  .message-composer .composer-icon-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; }
  .sticker-picker { right: 8px; bottom: calc(100% + 5px); max-height: min(380px,50vh); }
  .effect-picker { right: 8px; bottom: calc(100% + 5px); width: min(520px,calc(100vw - 16px)); max-height: min(560px,65dvh); }
  .effect-picker fieldset { grid-template-columns: 1fr; }
  .mention-picker { right: 8px; bottom: calc(100% + 5px); left: 8px; width: auto; }
  .sticker-grid { max-height: min(320px,41vh); grid-template-columns: repeat(4,minmax(0,1fr)); }
  .blood-effect-art.main { top: -8%; left: -31%; width: 122%; }
  .blood-effect-art.hand { top: 4%; right: -19%; width: 59%; transform: rotate(7deg); opacity: .78; }
  .blood-effect-art.small { right: -18%; bottom: -7%; width: 84%; transform: rotate(12deg); opacity: .92; }
  .tabletop-page .left-rail .dice-panel, .tabletop-page .left-rail .clues-panel, .tabletop-page .tools-panel { width: min(430px,92vw); }
  .tabletop-page .tools-panel { right: 0; left: auto; display: flex; box-sizing: border-box; width: min(430px,92vw); max-width: none; flex-direction: column; overflow: hidden; border-right: 0; border-left: 1px solid var(--line); }
  .tabletop-page .tools-panel > * { flex: 0 0 auto; }
  .tabletop-page .tools-panel .character-frame-wrap { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
  .character-frame-wrap iframe { height: 100%; min-height: 0; }
  .kp-card-selectors { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
  .kp-card-selectors select { padding-inline: 3px; font-size: .56rem; }
  .tabletop-page .scrim { z-index: 70; background: rgba(0,0,0,.26); }
  .tabletop-page .toast { top: auto; right: max(12px,env(safe-area-inset-right)); bottom: calc(108px + env(safe-area-inset-bottom)); max-width: calc(100vw - max(24px,env(safe-area-inset-left) + env(safe-area-inset-right) + 16px)); }
  .tabletop-page .settings-dialog { top: calc(var(--tabletop-viewport-top,0px) + 8px + env(safe-area-inset-top)); height: calc(var(--tabletop-viewport-height,100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) {
  .chat-card.effect-shadow .shadow-effect-layer,.chat-card.effect-shadow .shadow-effect-art,.chat-card.effect-wake > :not(.chat-effect-layer),.chat-card.effect-flash .flash-effect-layer,.room-effect-glitch.effect-animate .effect-target-message .message-bubble,.room-effect-glitch.effect-animate .effect-target-message .message-bubble::before,.room-effect-glitch.effect-animate .effect-target-message .message-bubble::after,.room-effect-glitch-heavy.effect-animate .effect-target-message .message-bubble,.room-effect-glitch-heavy.effect-animate .effect-target-message .message-bubble::before,.room-effect-glitch-heavy.effect-animate .effect-target-message .message-bubble::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
@media (max-width:540px) {
  .character-profile-card { grid-template-columns: minmax(0,1fr) 78px; gap: 8px; padding: 8px; }
  #character-profile-dialog-content { grid-template-columns: minmax(0,1fr) 92px; gap: 10px; }
  .entry-card { padding: 23px 18px 20px; }
  .chat-heading { align-items: start; }
  .chat-heading-actions button:first-child { display: none; }
  .saved-room { align-items: start; }
  .saved-room-actions { max-width: 150px; }
  .message-composer textarea { font-size: 16px; }
  .tabletop-page .tools-panel { width: min(430px,calc(100vw - 24px)); }
  .kp-card-selectors { gap: 3px; }
  .kp-card-selectors label > span { font-size: .54rem; }
  .kp-card-selectors select { min-height: 32px; padding-inline: 2px; font-size: .52rem; }
  .house-rule-number-grid { grid-template-columns: 1fr; }
}
@media (max-width:430px) {
  .tabletop-page .tools-panel { width: min(360px,calc(100vw - 42px)); }
}