*{box-sizing:border-box}
:root{color-scheme:light;--ink:#30283a;--muted:#877e89;--purple:#725286;--pink:#df758d;--line:#e8e2e8;--paper:#fffcfa;--glass:#fffaf6d6;--glass-line:#ffffffb3;--night:#241a2c;--room-art:url('assets/room.png');--panel-w:400px;--hud-h:64px;--dock-h:150px;--speaker:#8a6a9a}
html,body{height:100%}
body{margin:0;overflow:hidden;color:var(--ink);background:var(--night);font:16px/1.6 "PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body:before{content:'';position:fixed;inset:-48px;background:var(--room-art) center/cover;filter:blur(26px) saturate(1.1) brightness(.72);pointer-events:none}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit}
button:disabled{cursor:default;opacity:.45}
button:focus-visible,a:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #bf81c7;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}

/* Layout: full-bleed stage on the left, frosted operation column on the right. */
.app{position:relative;height:var(--app-h,100dvh);display:grid;grid-template-columns:minmax(0,1fr) var(--panel-w);grid-template-rows:auto minmax(0,1fr)}
.room-wrap{grid-column:1;grid-row:1/-1;position:relative;min-width:0;min-height:0;overflow:hidden}
.room{position:absolute;inset:0;overflow:hidden}
.stage-camera{position:absolute;inset:0;transform-origin:var(--fx,50%) var(--fy,50%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.room:after{content:'';position:absolute;top:0;bottom:0;right:0;width:64px;background:linear-gradient(to right,#241a2c00,#241a2c59);pointer-events:none}
.room.art-ready .stage-camera:before{content:'';position:absolute;inset:0;background:var(--room-art) center 62%/cover}
.camera-focus .stage-camera{transform:scale(1.06)}
.scene-shade{position:absolute;inset:0;background:linear-gradient(#1d14249c 0,#1d142400 20%,#1d142400 50%,#1d1424b8 100%);pointer-events:none}
.table-label{position:absolute;left:50%;top:calc(var(--hud-h)/2 + 50% - var(--dock-h)/2);transform:translate(-50%,-50%);text-align:center;color:#fff8eda0;pointer-events:none;border:1px solid #fff6e330;border-radius:50%;width:110px;height:60px;display:flex;align-items:center;justify-content:center;flex-direction:column;rotate:-5deg}
.table-label span{font-size:22px;letter-spacing:6px}
.table-label small{font-size:8px;letter-spacing:1px}

/* HUD */
.room-top{position:absolute;z-index:8;top:0;left:0;right:0;height:var(--hud-h);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;pointer-events:none}
.room-top>*{pointer-events:auto}
.hud-left{display:flex;align-items:center;gap:8px;min-width:0}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;font-weight:750;letter-spacing:3px;font-size:18px;text-shadow:0 1px 8px #1d1424aa}
.brand-icon{background:var(--purple);color:#fff;border-radius:11px;width:34px;height:34px;display:grid;place-items:center;font-size:26px;line-height:1;box-shadow:0 4px 14px #2b17344d;letter-spacing:0}
.room-label,.round-chip,.tool{height:36px;display:inline-flex;align-items:center;border:1px solid var(--glass-line);background:#fffaf4d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;font-size:13px;color:#4a3550;white-space:nowrap;box-shadow:0 4px 16px #2416281f}
.room-label{gap:7px;padding:0 14px}
.round-chip{padding:0 13px;color:#7a5a83}
.hud-sep{color:#b9a3b9}
.small-dot{height:7px;width:7px;border-radius:50%;background:#b58aa4;flex-shrink:0}
.room-tools{display:flex;gap:6px;flex-shrink:0}
.tool{position:relative;gap:6px;padding:0 12px}
.tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.tool[aria-pressed=true]{background:#f3ddecf0;color:#794d80;border-color:#e6c4dc}
.tool:not(:disabled):hover{background:#fffdf9}
.tool-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--pink);color:#fff;font-size:11px;line-height:18px;text-align:center;padding:0 5px}
#historyBtn{display:none}
#wordBtn{-webkit-touch-callout:none;user-select:none;touch-action:manipulation}
.room-stage-label{position:absolute;z-index:6;top:calc(var(--hud-h) + 2px);left:50%;transform:translateX(-50%);max-width:min(80%,520px);padding:4px 14px;border-radius:999px;background:#2a1d31a6;color:#fff6fb;font-size:13px;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.interaction-hint{position:absolute;z-index:6;left:18px;bottom:calc(var(--dock-h) + 6px);color:#fff7f2d9;font-size:12px;text-shadow:0 1px 6px #1d1424;pointer-events:none}

/* Seats */
.seats{position:absolute;left:0;right:0;top:var(--hud-h);bottom:var(--dock-h);container-type:size;--sprite:clamp(54px,min(32cqh,26cqw),210px)}
.seat{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border:0;background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px;z-index:3;transition:filter .5s,opacity .5s}
.seats.has-focus .seat:not(.active){filter:brightness(.72) saturate(.8)}
.seat.active{z-index:7}
.avatar{display:grid;place-items:center;transition:transform .3s,filter .3s}
.avatar.character-sprite{display:block;width:calc(var(--sprite)*.82);height:var(--sprite);filter:drop-shadow(0 7px 4px #2b182d40)}
.chibi-character{width:100%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:none;user-select:none}
.avatar.name-avatar{width:calc(var(--sprite)*.62);height:calc(var(--sprite)*.72);border-radius:24px 24px 18px 18px;font-size:clamp(16px,calc(var(--sprite)*.2),26px);font-weight:650;color:#6f527f;background:linear-gradient(155deg,#fff8ec,#e2d1e9);margin-top:calc(var(--sprite)*.2);box-shadow:0 8px 18px #2b182d33}
.seat:nth-child(2n) .avatar.name-avatar{background:linear-gradient(145deg,#ffefe8,#e1dce9)}
.seat.active .character-sprite{filter:drop-shadow(0 0 8px #fff3c4) drop-shadow(0 6px 4px #2b182d40);transform:translateY(-6px)}
.seat.active .chibi-character{animation:chibi-breathe 1.6s ease-in-out infinite}
.seat.speaking .chibi-character{animation:chibi-talk .5s ease-in-out infinite alternate}
.seat.can-vote .avatar{filter:drop-shadow(0 0 6px #ffd9ea) drop-shadow(0 7px 4px #2b182d40)}
.seat.can-vote:hover .avatar{transform:translateY(-6px)}
.seat.selected .avatar{filter:drop-shadow(0 0 9px #f07bae) drop-shadow(0 0 3px #ffd0e4);transform:translateY(-6px)}
.seat.eliminated{filter:grayscale(1) brightness(.85)!important;opacity:.55}
.seat-name{padding:2px 12px;background:#2d2034d9;color:#fff;border-radius:12px;font-size:clamp(10px,3.4cqh,13px);white-space:nowrap;box-shadow:0 3px 10px #1d142433}
.seat[aria-pressed=true] .seat-name{background:#b2648f}
.seat.active .seat-name{background:var(--seat-color,#8a5c93)}
.seat.eliminated .seat-name{background:#736a76}
.seat-tag{position:absolute;top:0;right:-6px;font-size:10px;background:#fff8ef;border:1px solid #e9cfc3;border-radius:9px;padding:0 6px;color:#7a5a6a;white-space:nowrap}
.speech-dot,.speech-bubble{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);z-index:5;pointer-events:none;white-space:nowrap}
.speech-dot{font-size:12px;border-radius:12px 12px 12px 3px;background:#fff9f1;color:#6d4f72;padding:2px 10px;box-shadow:0 3px 10px #48374830}
.speech-dot:after{content:'';display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
.speech-bubble{display:flex;gap:3px;align-items:flex-end;height:22px;padding:4px 10px;border-radius:12px 12px 12px 3px;background:#fff9f1;box-shadow:0 3px 10px #48374830}
.speech-bubble i{display:block;width:3px;height:6px;border-radius:2px;background:var(--seat-color,#b17aa6);animation:wave .8s ease-in-out infinite}
.speech-bubble i:nth-child(2){animation-delay:.15s}
.speech-bubble i:nth-child(3){animation-delay:.3s}

/* Dialogue box */
.dialogue-dock{position:absolute;z-index:7;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 22px 18px;pointer-events:none}
.dialogue-dock>*{pointer-events:auto}
.broadcast{position:relative;width:min(920px,100%);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;min-height:108px;padding:16px 20px 16px 16px;color:#fbf3f8;background:linear-gradient(180deg,#2e2236e6,#21182ae8);border:1px solid #ffffff24;border-radius:20px;box-shadow:0 18px 50px #14081a59;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.broadcast:before{content:'';position:absolute;left:22px;right:22px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--speaker),#0000)}
.broadcast.can-skip{cursor:pointer}
.broadcast-icon{width:64px;height:64px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#ffffff1a;border:2px solid var(--speaker);color:#f3d9ea;font-size:26px;flex-shrink:0}
.broadcast-icon img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.7);transform-origin:50% 8%}
.dialogue-body{min-width:0}
.speaker-plate{display:inline-block;background:var(--speaker);color:#fff;font-size:13px;font-weight:650;letter-spacing:1px;padding:2px 12px;border-radius:999px 999px 999px 4px;margin-bottom:5px}
.line-tag{display:inline-block;margin-left:8px;font-size:11px;color:#e6cfe0;border:1px solid #ffffff38;border-radius:8px;padding:0 6px;vertical-align:2px}
#broadcastText{margin:0;font-size:17px;line-height:1.75;min-height:1.75em;color:#fff8fb;overflow-wrap:anywhere;text-wrap:pretty}
.broadcast.is-typing #broadcastText:after{content:'▍';color:var(--speaker);animation:blink 1s steps(2) infinite;margin-left:1px}
.dialogue-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;align-self:stretch;justify-content:space-between}
.next-speaker{font-size:12px;color:#f2deebb3;white-space:nowrap}
.next-speaker.is-you{color:#ffd3e2;font-weight:650;animation:pulse 1.6s ease-in-out infinite}
.dialogue-skip{border:1px solid #ffffff4d;background:#ffffff14;color:#fff;border-radius:999px;padding:4px 12px;font-size:12px;white-space:nowrap}
.dialogue-skip:hover{background:#ffffff2b}
.dialogue-dock .voice-toolbar{width:min(920px,100%);padding:0 4px;color:#fff3f9c7;font-size:12px;gap:6px;text-shadow:0 1px 6px #1d1424}
.dialogue-dock .voice-toolbar>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dialogue-dock .voice-toolbar button{border:1px solid #ffffff42;background:#2a1d31a3;color:#fff;border-radius:999px;padding:4px 11px;font-size:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:none}
.dialogue-dock .voice-toolbar button:disabled{opacity:.4}

/* Operation column */
.control-panel,.history-panel{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);box-shadow:0 20px 60px #1f102638}
.control-panel{grid-column:2;grid-row:1;margin:14px 14px 7px 0;border-radius:22px;padding:22px 24px 14px;display:flex;flex-direction:column;min-width:0;max-height:calc(var(--app-h,100dvh) - 200px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.eyebrow{font-size:12px;font-weight:650;letter-spacing:2px;color:var(--purple)}
.phase-pill{font-size:10px;letter-spacing:1.4px;background:#f0e9f2;color:#9575a2;border-radius:12px;padding:3px 9px}
#controls{flex:1 0 auto;display:flex;flex-direction:column;animation:appear .3s ease}
h2{font-size:22px;line-height:1.45;margin:0 0 10px;letter-spacing:.4px}
.description{color:var(--muted);font-size:14px;line-height:1.85;margin:0 0 18px}
.push-bottom{margin-top:auto;padding-top:16px}
.panel-note{font-size:12px;line-height:1.8;color:#a69ca7;text-align:center;margin-top:14px}
.panel-footer{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;color:#a398a2}
.panel-footer span{flex:1 1 100%}
.panel-footer button{border:0;background:transparent;color:#8f7896;font-size:12px;padding:2px 0}
.primary{width:100%;border:0;border-radius:14px;background:linear-gradient(105deg,#da748d,#78528e);color:#fff;padding:14px 15px;font-size:16px;font-weight:650;box-shadow:0 6px 18px #ad66853a;transition:filter .2s,transform .2s}
.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.primary:disabled{opacity:.58;transform:none}
.primary.is-loading:before{content:'◌';display:inline-block;margin-right:9px;animation:spin 1.2s linear infinite}
.secondary{border:1px solid #e3d8e3;background:#ffffffa6;border-radius:12px;padding:10px 15px;font-size:14px;width:100%;margin-top:10px}
.secondary:hover{background:#fff}
.row-buttons{display:flex;gap:8px}
.row-buttons .secondary{flex:1}
.section-label{display:block;font-size:13px;font-weight:600;margin:0 0 8px}
.group-choices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 18px}
.group-choice{background:#ffffffb8;border:1px solid var(--line);border-radius:14px;text-align:left;padding:12px;color:var(--ink)}
.group-choice strong{display:block;font-size:15px}
.group-choice small{font-size:11px;color:var(--muted)}
.group-choice[aria-pressed=true]{background:#f5edf5;border-color:#b79abc;box-shadow:0 0 0 3px #b79abc26}
.theme-choices{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.choice{padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:#ffffff8c;font-size:13px}
.choice[aria-pressed=true]{background:#f1e8f1;border-color:#b799bf;color:#725286}
.service-note{font-size:12px;line-height:1.8;padding:9px 12px;background:#f4eef4c7;border-radius:10px;margin:4px 0 14px;color:#8c718e}
.quota-note{font-size:12px;color:var(--muted);text-align:center;margin:10px 0 0}
.network-error{border:1px solid #e9c2ca;border-radius:12px;padding:12px;background:#fff4f4;margin-bottom:14px;color:#a34f63;font-size:13px;line-height:1.8}
.network-error .secondary{color:#904f65;background:#fff}
.spectator-note{padding:10px 13px;background:#f0edf6;border-radius:12px;font-size:12px;line-height:1.8;color:#857192;margin:0 0 14px}
.turn-meta{color:var(--muted);font-size:12px;margin:0 0 12px}
.turn-queue{display:flex;gap:6px;margin:6px 0 14px}
.queue-item{flex:1;min-height:30px;border-radius:8px;background:#eee6ef;color:#917a98;font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4px 2px;line-height:1.35}
.queue-item span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.queue-item.current{color:#fff;background:linear-gradient(135deg,#d77897,#9b6aa8)}
.queue-item.done{color:#b8aabb;background:#f4f0f4;text-decoration:line-through}
.typing{font-size:14px;color:#9f83a4;padding:10px 0}
.typing:after{content:' · · ·';animation:pulse 1.4s infinite}
.input-label{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:8px}
#charCount.error{color:#bd5269}
textarea{resize:vertical;min-height:112px;max-height:200px;width:100%;border:1px solid #dcd0dd;background:#fff;border-radius:14px;padding:13px 14px;color:var(--ink);font-size:16px;line-height:1.75}
textarea:focus{outline:2px solid #d5bddb;border-color:transparent}
textarea::placeholder{color:#b0a4b2}
.error-message{font-size:13px;color:#c25372;margin-top:6px;min-height:20px}
.hint-button{width:auto;margin-top:6px;font-size:12px;padding:7px 12px}
.foot-hint{text-align:center;font-size:12px;color:#9d919f;margin:8px 0 0}
.vote-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 14px}
.vote-option{border:1px solid #e7dfe7;border-radius:12px;background:#ffffff9e;padding:10px;display:flex;align-items:center;gap:8px;font-size:14px;min-height:46px}
.vote-option.selected{border-color:#ad7fae;background:#f4eaf4;box-shadow:0 0 0 3px #ad7fae22}
.vote-option .dot-avatar{width:27px;height:27px;border-radius:50%;background:#e5d6e7;display:grid;place-items:center;font-size:12px}
.result-list{margin:8px 0;display:grid;gap:6px}
.result-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;padding:8px 10px;border-radius:9px;background:#f5f0f5c7}
.result-row.highlight{background:#f2dfeb;color:#895280}
.result-row small{color:#9c8a9f}
.result-row .role{font-size:11px;border-radius:6px;padding:0 5px;background:#ffffffaa;margin-left:4px}
.result-medal{font-size:38px;margin-bottom:6px;color:#b3709a}
.result-votes{margin:10px 0 16px}
.result-votes summary{cursor:pointer;font-size:13px}
.vote-bars{display:grid;gap:8px;margin-top:10px}
.vote-bar{display:flex;align-items:center;gap:10px;font-size:13px}
.vote-bar span{min-width:50px}
.vote-bar i{display:block;height:6px;border-radius:8px;background:#b68bc0;min-width:0}

/* Word card: a face-down star card that flips to reveal the secret word. */
.word-card{border:1px solid #e4cee6;background:radial-gradient(ellipse at top,#fff9ed,#f5e7f3);min-height:170px;border-radius:18px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:22px;margin:3px 0 18px;position:relative;overflow:hidden}
.word-card:before{content:'✧';position:absolute;top:9px;right:19px;font-size:30px;color:#d5b7d5}
.word-card small{color:#927b93;font-size:12px;letter-spacing:2px}
.word-card strong{font-size:40px;line-height:1.5;margin:8px 0;color:#644572;letter-spacing:4px;overflow-wrap:anywhere}
.word-warning{color:#997a96;font-size:12px;text-align:center}
.star-card{display:block;width:100%;height:210px;margin:2px 0 16px;padding:0;border:0;background:none;perspective:1100px}
.star-card .card-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.25,.45,1)}
.star-card.flipped .card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;overflow:hidden}
.card-cover{color:#f6e6f3;background:radial-gradient(circle at 30% 22%,#8f68a8 0,#4b3260 45%,#261a33 100%);border:1px solid #c9a6d455;box-shadow:inset 0 0 0 6px #ffffff10,0 14px 30px #2b17343d}
.card-cover:before{content:'';position:absolute;inset:0;background:radial-gradient(1.5px 1.5px at 20% 30%,#fff 50%,#0000),radial-gradient(1px 1px at 70% 20%,#fff 50%,#0000),radial-gradient(1.5px 1.5px at 80% 70%,#fff 50%,#0000),radial-gradient(1px 1px at 35% 80%,#fff 50%,#0000),radial-gradient(1px 1px at 55% 50%,#fffc 50%,#0000);opacity:.8}
.card-cover strong{font-size:44px;line-height:1;color:#ffe9f4;text-shadow:0 0 18px #ffc7e6}
.card-cover small{margin-top:12px;font-size:12px;letter-spacing:3px;color:#e9cfe4}
.card-word{transform:rotateY(180deg);background:radial-gradient(ellipse at top,#fffaf0,#f3e3f2);border:1px solid #e4cee6;box-shadow:0 14px 30px #6c41722b}
.card-word:before{content:'✦';position:absolute;top:12px;right:18px;color:#d3a9cf;font-size:22px}
.card-word small{color:#927b93;font-size:12px;letter-spacing:2px}
.card-word strong{font-size:44px;line-height:1.4;margin:8px 0;color:#5f3f6e;letter-spacing:6px;overflow-wrap:anywhere}
.word-peek{position:absolute;z-index:20;left:50%;top:calc(var(--hud-h) + 24px);transform:translateX(-50%);width:min(280px,80%);padding:18px 20px;border-radius:20px;text-align:center;background:radial-gradient(ellipse at top,#fffaf0f5,#f3e3f2f5);border:1px solid #e4cee6;box-shadow:0 18px 50px #1d142466;animation:peek .25s cubic-bezier(.3,1.4,.5,1)}
.word-peek small{display:block;font-size:11px;letter-spacing:2px;color:#927b93}
.word-peek strong{display:block;font-size:36px;letter-spacing:5px;color:#5f3f6e;line-height:1.5}
.word-peek span{font-size:12px;color:#997a96}

/* Records */
.history-panel{grid-column:2;grid-row:2;margin:7px 14px 14px 0;border-radius:22px;padding:14px 20px;display:flex;flex-direction:column;min-height:0}
.history-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-bottom:10px}
.history-heading h2{font-size:18px;margin:2px 0 0}
.history-heading>span{font-size:12px;color:var(--muted);margin-left:auto}
.sheet-close{display:none;border:0;background:#f1eaf1;border-radius:50%;width:32px;height:32px;font-size:20px;line-height:1;color:#8a6f8f}
.history-list{flex:1;min-height:60px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:8px;overflow-wrap:anywhere}
.history-entry{padding:11px 0;border-bottom:1px solid var(--line)}
.history-entry span{color:#9872a2;font-size:12px}
.history-entry p{margin:3px 0;font-size:14px;line-height:1.8}
.entry-type{margin-left:6px;border:1px solid #e3d3e6;border-radius:6px;padding:0 5px;font-size:11px!important}
.reply-entry{padding-left:12px;border-left:2px solid #ddc8de;background:#faf4f9}
.reply-entry p{color:#896c85;font-size:13px}
.vote-entry{opacity:.78}
.vote-entry p{font-size:12px}
.history-empty{color:var(--muted);font-size:13px;line-height:1.9;padding:14px 0;margin:0}
.new-records{align-self:center;margin-top:8px;border:0;border-radius:999px;background:#7a5389;color:#fff;font-size:12px;padding:6px 14px;box-shadow:0 4px 14px #4a2c5a40}
.sheet-scrim{display:none}

/* Character menus and reactions */
.hover-history{position:absolute;z-index:16;width:220px;padding:10px 12px;border-radius:14px;background:#fffaf6f2;border:1px solid #ead6e3;box-shadow:0 10px 30px #2b172f40;font-size:12px;line-height:1.7;pointer-events:none}
.hover-history strong{display:block;color:#7a5389;margin-bottom:2px}
.hover-history p{margin:4px 0 0;color:#5b4560}
.character-interaction{position:absolute;z-index:15;width:200px;max-height:calc(100% - 16px);overflow:auto;padding:12px;background:#fffcf7f5;border:1px solid #ead6d3;border-radius:18px;box-shadow:0 14px 40px #2f1a3348;color:var(--ink);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overscroll-behavior:contain}
.interaction-heading{display:flex;align-items:center;justify-content:space-between;font-size:14px;padding:0 2px 8px}
.interaction-heading button{border:0;background:none;font-size:22px;line-height:24px;padding:0 4px;color:#9e8794}
.tomato-option{width:100%;display:flex;align-items:center;gap:9px;border:1px solid #efcec2;border-radius:12px;padding:10px;background:#fff0e7;text-align:left;color:#a14e43;min-height:58px}
.tomato-option:hover{background:#ffe3d6}
.tomato-icon{font-size:24px}
.tomato-option strong{display:block;font-size:14px}
.tomato-option small{display:block;font-size:11px;color:#bb8b7d;margin-top:2px}
.interaction-profile,.interaction-vote{border:0;background:none;padding:9px 2px 0;width:100%;font-size:12px;color:#907c97}
.interaction-vote{padding:9px 5px;margin-top:8px;border-radius:9px;background:#efe5f2;color:#795586}
.interaction-records h3{font-size:12px;color:#8f7896;margin:10px 0 2px;font-weight:600}
.interaction-record-list{max-height:180px;overflow:auto;overscroll-behavior:contain}
.interaction-record-list .history-entry p{font-size:12px;line-height:1.7}
.interaction-empty{font-size:12px;color:var(--muted);margin:6px 0}
.reaction-layer{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:hidden}
.flying-tomato{position:absolute;left:0;top:0;width:36px;height:36px;font-size:30px;line-height:36px;filter:drop-shadow(0 5px 4px #5d2a3633)}
.tomato-splat{position:absolute;font-size:44px;transform:translate(-50%,-50%);opacity:.9;animation:pop .4s ease-out}
.reaction-bubble{position:absolute;transform:translate(-50%,-100%);width:max-content;max-width:175px;background:#fff8eef0;color:#744c53;border:1px solid #edc9bd;border-radius:13px 13px 13px 3px;padding:7px 12px;font-size:12px;line-height:1.5;box-shadow:0 4px 12px #5b344320;text-align:center}

/* Dialogs and toast */
dialog{border:1px solid #e5d8e8;border-radius:22px;padding:24px;max-width:550px;width:calc(100% - 32px);max-height:82vh;background:#fffcfa;color:var(--ink);box-shadow:0 20px 100px #27142f55}
dialog::backdrop{background:#24182b88;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.dialog-header h2{margin:0;font-size:21px}
.icon-button{background:transparent;border:1px solid #d7ced8;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:18px;padding:0}
#dialogContent{font-size:14px;line-height:1.9}
#dialogContent ol{padding-left:22px}
#dialogContent li{margin-bottom:10px}
.rules-pause{font-size:12px;color:#8c718e;background:#f4eef4;border-radius:10px;padding:8px 12px}
.muted{color:var(--muted)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0}
.settings-row input[type=range]{width:55%;accent-color:#a577b4}
.feedback-form label{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:13px}
.feedback-form select,.feedback-form textarea{border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff}
.feedback-form small{color:var(--muted);font-size:11px}
.feedback-error{color:#c25372;font-size:13px;min-height:20px}
.toast{position:fixed;z-index:60;left:50%;top:calc(var(--hud-h) + 10px);transform:translate(-50%,-12px);background:#3b2c42f0;color:#fff;border-radius:13px;padding:11px 20px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;width:max-content;max-width:90vw;box-shadow:0 10px 30px #1d142455}
.toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes appear{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{opacity:.4}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{50%{opacity:0}}
@keyframes chibi-breathe{50%{transform:translateY(-3px)}}
@keyframes chibi-talk{from{transform:translateY(0) scale(1)}to{transform:translateY(-3px) scale(1.015)}}
@keyframes wave{50%{height:14px}}
@keyframes dots{0%{content:''}25%{content:'·'}50%{content:'··'}75%{content:'···'}}
@keyframes peek{from{opacity:0;transform:translate(-50%,-8px) scale(.94)}to{opacity:1;transform:translateX(-50%)}}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.3)}to{transform:translate(-50%,-50%) scale(1)}}
@keyframes sheet-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

@media(min-width:1360px){.tool-label{display:inline}}
@media(max-width:1359px){.tool{padding:0;width:36px;justify-content:center}.tool-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(max-width:1100px){:root{--panel-w:350px}.round-chip{display:none}.control-panel{padding:18px 18px 12px}.history-panel{padding:12px 16px}}

/* Drawer mode: records slide out instead of occupying the column. */
@media(max-width:759px),(max-height:560px){
  #historyBtn{display:inline-flex}
  .control-panel{grid-row:1/-1;margin:10px 10px 10px 0;max-height:none}
  .history-panel{position:fixed;z-index:41;top:0;bottom:0;right:0;width:min(380px,92vw);margin:0;border-radius:22px 0 0 22px;background:#fffaf6f7;transform:translateX(105%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s .32s}
  .history-open .history-panel{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  .sheet-close{display:block}
  .history-open .sheet-scrim{display:block;position:fixed;inset:0;z-index:40;background:#1d14246b}
  .interaction-hint{display:none}
}
@media(max-height:560px) and (min-width:760px){:root{--hud-h:54px}.room-top{padding:9px 12px}.broadcast{min-height:0;padding:10px 14px}.broadcast-icon{width:44px;height:44px}#broadcastText{font-size:15px}.dialogue-dock{padding:0 14px 10px}.room-stage-label{display:none}}

/* Phone portrait: stage on top, dialogue on the stage, controls as a bottom sheet. */
@media(max-width:759px){
  :root{--hud-h:54px;--stage-h:58%}
  body[data-phase=lobby]{--stage-h:44%}
  body[data-phase=word]{--stage-h:42%}
  body[data-phase=speaking]{--stage-h:66%}
  body[data-phase=your-turn]{--stage-h:46%}
  body[data-phase=voting]{--stage-h:56%}
  body[data-phase=round_result],body[data-phase=finished]{--stage-h:40%}
  .app{display:flex;flex-direction:column}
  .room-wrap{flex:0 0 var(--stage-h);transition:flex-basis .45s cubic-bezier(.2,.8,.2,1)}
  .room:after{display:none}
  .room.art-ready .stage-camera:before{background-position:50% 64%}
  .seats{--sprite:clamp(46px,min(30cqh,30cqw),150px)}
  .seat{left:var(--mx);top:var(--my)}
  .room-top{padding:9px 10px;gap:6px}
  .brand-name,.hud-sep,#aliveLabel,.round-chip,.room-stage-label{display:none}
  .brand-icon{width:32px;height:32px;font-size:24px}
  .room-label{height:34px;padding:0 11px;font-size:12px}
  .room-tools{gap:4px}
  .tool{width:34px;height:34px}
  .tool svg{width:17px;height:17px}
  .table-label{display:none}
  .dialogue-dock{padding:0 10px 28px;gap:6px}
  .broadcast{grid-template-columns:auto minmax(0,1fr);gap:10px;min-height:0;padding:10px 12px;border-radius:16px}
  .broadcast:before{left:14px;right:14px}
  .broadcast-icon{width:42px;height:42px;font-size:20px;align-self:start}
  .speaker-plate{font-size:12px;padding:1px 10px;margin-bottom:3px}
  #broadcastText{font-size:14.5px;line-height:1.65;max-height:calc(1.65em*3);overflow:auto}
  .dialogue-meta{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:6px;margin-top:-4px}
  .dialogue-meta .next-speaker[hidden]+.dialogue-skip{margin-left:auto}
  .next-speaker{font-size:11px}
  .dialogue-skip{padding:2px 10px;font-size:11px}
  .dialogue-dock .voice-toolbar{font-size:11px;gap:4px;padding:0}
  .dialogue-dock .voice-toolbar button{padding:3px 9px;font-size:11px}
  body[data-phase=lobby] .broadcast{display:none}
  .control-panel{flex:1 1 0;min-height:0;margin:-20px 0 0;position:relative;z-index:9;border-radius:22px 22px 0 0;border-bottom:0;padding:14px 16px calc(10px + env(safe-area-inset-bottom));background:#fffaf6f2;animation:sheet-up .35s ease}
  .control-panel:before{content:'';display:block;width:38px;height:4px;border-radius:2px;background:#dccfdd;margin:-4px auto 10px}
  .panel-top{margin-bottom:10px}
  h2{font-size:19px;margin-bottom:6px}
  .description{font-size:13px;line-height:1.75;margin-bottom:12px}
  body[data-phase=speaking] #controls .description{display:none}
  .panel-note{display:none}
  .push-bottom{position:sticky;bottom:-10px;z-index:2;padding:12px 0 6px;margin-top:auto;background:linear-gradient(#fffaf600,#fffaf6 26%)}
  .secondary{padding:10px 12px;margin-top:8px}
  .primary{padding:13px}
  .group-choices{margin-bottom:14px}
  .theme-choices{margin-bottom:14px}
  .star-card{height:170px;margin-bottom:10px}
  .card-word strong,.card-cover strong{font-size:38px}
  textarea{min-height:88px;font-size:16px}
  .vote-list{margin-bottom:10px}
  .history-panel{top:auto;left:0;width:auto;height:min(72%,560px);border-radius:22px 22px 0 0;transform:translateY(105%);padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .keyboard-open .room-wrap{flex:0 0 auto}
  .keyboard-open .room,.keyboard-open .dialogue-dock .voice-toolbar{display:none}
  .keyboard-open .dialogue-dock{position:static;padding:8px 10px 26px}
  .character-interaction{width:184px;padding:10px}
  .interaction-record-list{max-height:120px}
  .toast{font-size:13px}
}
@media(max-width:360px){.room-label{display:none}.tool{width:32px}}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .camera-focus .stage-camera{transform:none}
}
.speech-dot.you:after{display:none}
.seat-tag{top:auto;bottom:calc(1.6em + 10px)}
body[data-phase=lobby] .history-panel{display:none}
body[data-phase=lobby] .control-panel{grid-row:1/-1;margin-bottom:14px;max-height:none}
body[data-phase=speaking] .room-stage-label{display:none}
/* Desktop: give the input turn the column; records shrink but stay readable. */
@media(min-width:760px) and (min-height:561px){
  body[data-phase=your-turn] .app,body[data-phase=voting] .app{grid-template-rows:minmax(0,1fr) minmax(170px,26%)}
  body[data-phase=your-turn] .control-panel,body[data-phase=voting] .control-panel{max-height:none}
  body[data-phase=your-turn] .control-panel .panel-note,body[data-phase=your-turn] .panel-footer{display:none}
}
@media(min-width:760px) and (min-height:561px){.history-panel{position:relative}}
.new-records{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);margin:0;white-space:nowrap}
/* Phone: the dialogue box belongs to speaking; other phases speak through the sheet. */
@media(max-width:759px){
  body:not([data-phase=speaking]) .broadcast{display:none}
  body:not([data-phase=speaking]) .dialogue-dock{padding-bottom:26px}
}
/* Voting dims the room so the candidates stand out. */
.scene-shade{transition:background-color .6s}
body[data-phase=voting] .scene-shade{background-color:#1d142466}
body[data-phase=voting] .seat.can-vote{filter:brightness(1.08)}
@media(max-height:560px){.brand-name,.hud-sep,#aliveLabel,.round-chip{display:none}.room-label{height:34px;padding:0 11px;font-size:12px}.tool{width:34px;height:34px}.dialogue-dock .voice-toolbar>span{display:none}.dialogue-dock{gap:4px}}

.auth-area{display:inline-flex;align-items:center;gap:6px}.auth-area button{border:1px solid #d7bfdc;border-radius:999px;background:#fff8;padding:6px 10px;color:#725286;font-size:12px}.auth-area .auth-user{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#725286;font-size:12px}.auth-area .auth-logout{padding:4px 8px;color:#987b9b;background:transparent}@media(max-width:759px){.auth-area .auth-user{display:none}.auth-area button{padding:5px 7px;font-size:11px}}