:root{font-family:"Trebuchet MS",system-ui,sans-serif;--bg:#fffdfc;--surface:#fff;--soft:#fff7fb;--hero:#fff0f5;--text:#625563;--muted:#a08d9b;--accent:#a87991;--strong:#80546c;--accent-soft:#f1d8e3;--border:#f0e5ec;--lavender:#f5effa;--shadow:0 8px 28px rgba(120,80,110,.055)}
body.night{--bg:#191a29;--surface:#262638;--soft:#302b40;--hero:#322a43;--text:#f0e8f2;--muted:#b5a9bf;--accent:#e0b2d1;--strong:#f1c7df;--accent-soft:#51405c;--border:#464055;--lavender:#383048;--shadow:0 10px 30px rgba(0,0,0,.13)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}body.modal-open{overflow:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.hidden{display:none!important}
.app{max-width:600px;margin:auto;padding:20px 15px 65px}.topbar,.top-actions,.between,.role-bar{display:flex;justify-content:space-between;align-items:center;gap:10px}.wrap{flex-wrap:wrap}.topbar{margin-bottom:12px}.brand{color:var(--accent);font-size:1.4rem}.topbar small{display:block;color:var(--muted);letter-spacing:.13em;font-size:.6rem}.version{font-size:.75rem;color:var(--muted)}.status-line{margin-bottom:15px}.connection{font-size:.7rem;font-weight:900;padding:5px 9px;border-radius:20px;background:var(--lavender);color:var(--accent);white-space:nowrap}.connection.online{background:#e0f2e4;color:#477b52}.connection.offline{background:#fff0d8;color:#956b37}
.muted{color:var(--muted);font-size:.83rem;line-height:1.5}.card{background:var(--surface);border:1px solid var(--border);border-radius:23px;box-shadow:var(--shadow)}.hero{padding:27px 20px;text-align:center;background:linear-gradient(145deg,var(--hero),var(--surface) 80%)}.eyebrow{color:var(--muted);letter-spacing:.14em;font-size:.7rem;font-weight:900}h1{font-size:clamp(2.2rem,9vw,3.6rem);color:var(--accent);letter-spacing:-.055em;margin:12px 0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}h2{font-size:1.15rem;margin:0 0 9px}h3{font-size:.95rem;margin:23px 0 12px}.progress-label{margin:27px 0 10px;font-size:.78rem;color:var(--muted)}.progress-track{height:16px;border-radius:99px;background:var(--accent-soft);overflow:hidden}#progressFill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#e8b8cc,#bca8e3);transition:width 1s ease}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.stat{padding:15px 10px;border:1px solid var(--border);border-radius:14px;background:var(--soft);min-width:0}.stat small{display:block;color:var(--muted);font-size:.67rem;font-weight:800}.stat strong{display:block;color:var(--accent);font-size:1.1rem;margin-top:8px;overflow-wrap:anywhere}.soft-box{padding:14px;border-radius:14px;background:var(--lavender);margin-top:12px}.soft-box p{margin-bottom:0}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:20px 0}.tab{background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:12px;padding:13px 3px;font-size:.75rem;font-weight:900}.tab.active{background:var(--accent-soft);color:var(--strong)}.role-bar{margin:15px 2px;font-size:.85rem;color:var(--accent)}.panel{padding:21px;margin-bottom:17px}label{display:block;font-weight:800;font-size:.83rem;margin:15px 0 8px}input,textarea,select{display:block;width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--soft);color:var(--text);outline:none}textarea{min-height:85px;resize:vertical}input:focus,textarea:focus,select:focus{border-color:var(--accent)}input[type="range"]{accent-color:var(--accent)}.primary,.secondary{border:0;border-radius:12px;padding:12px 13px;font-size:.82rem;font-weight:900}.primary{background:var(--accent-soft);color:var(--strong);width:100%;margin-top:15px}.secondary{background:var(--lavender);color:var(--accent)}.full{width:100%;margin-top:12px}.message{color:var(--accent);font-size:.8rem;min-height:1em;font-weight:800}
.stack{display:grid;gap:10px;margin-top:12px}.item{border:1px solid var(--border);background:var(--soft);border-radius:15px;padding:14px;min-width:0}.item strong{overflow-wrap:anywhere}.item p{margin:7px 0}.pill{padding:5px 8px;border-radius:20px;font-size:.69rem;font-weight:800;background:#fff0d8;color:#967744;white-space:nowrap}.pill.approved{background:#e1f3e5;color:#4d805a}.pill.rejected{background:#f9e4e9;color:#a46879}.pill.countered{background:#e9e0f9;color:#80649e}.actions,.attach-actions,.studio-actions,.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.actions button,.tools button,.mini-actions button{border:0;border-radius:10px;padding:10px 7px;font-weight:800;font-size:.77rem;background:var(--lavender);color:var(--accent)}.actions .approve{background:#dff2e4;color:#487953}.actions .reject{background:#f9e3e9;color:#a4697a}.mini-actions{display:flex;flex-wrap:wrap;gap:5px}.counter-form{display:flex;gap:8px;margin-top:10px}.counter-form input{min-width:0;flex:1}.counter-form button{flex-shrink:0}
.art-image{display:block;width:100%;height:auto;background:white;border-radius:11px;border:1px solid var(--border);margin:10px 0}.reply-box{background:var(--lavender);border-radius:12px;padding:12px;margin-top:12px}.reply-form{display:grid;gap:9px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.reply-form textarea{min-height:60px}.reply-form .primary{margin-top:0}.filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.history-toggle{display:block;width:100%;text-align:left;border:0;background:none;color:var(--text);padding:0;font-weight:800}.history-details{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}.tiles,.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}.tile{background:var(--soft);border:1px solid var(--border);border-radius:14px;padding:14px 9px;text-align:center}.tile strong{display:block;font-size:.8rem;margin:7px 0}.tile small{display:block;color:var(--muted);font-size:.72rem;line-height:1.4}.tile.locked{opacity:.5}.gallery-card{border:1px solid var(--border);border-radius:14px;padding:9px;background:var(--soft);min-width:0}.gallery-card img{display:block;width:100%;border-radius:9px;background:white}.gallery-card strong{display:block;font-size:.8rem;margin:8px 0 4px;overflow-wrap:anywhere}.gallery-card .mini-actions{margin-top:9px}.gallery-card .mini-actions button{flex:1}
.prediction{font-size:1.4rem;color:var(--accent)}.center{text-align:center}.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:12px;background:rgba(18,14,28,.72)}.modal-card{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:22px;padding:20px;width:100%;max-width:430px;max-height:92dvh;overflow-y:auto}.drawing-modal{max-width:690px}.colour-controls{display:grid;grid-template-columns:95px 1fr;gap:10px;align-items:end}#colourPicker{height:45px;padding:3px;cursor:pointer}#hexInput{font-family:monospace;text-transform:uppercase}.swatches{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.swatch{width:29px;height:29px;border-radius:50%;border:1px solid #aaa}.swatch.selected{outline:2px solid var(--accent);outline-offset:3px}#penSize{padding:0}.tools{grid-template-columns:repeat(4,minmax(0,1fr))}.tools .active{background:var(--accent-soft);color:var(--strong)}.canvas-wrap{background:white;border:2px dashed #e3cbd9;border-radius:14px;overflow:hidden;margin-top:12px}#drawingCanvas{display:block;width:100%;height:auto;background:white;touch-action:none;cursor:crosshair}.studio-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.studio-actions .primary{margin:0}.game-area{margin:15px 0}.game-prompt{background:var(--lavender);border-radius:15px;padding:18px;font-size:1.15rem;font-weight:900;text-align:center;margin:15px 0}.game-image{width:100%;border-radius:12px;background:white}.game-answer{display:grid;gap:10px}.game-answer .primary{margin-top:0}.celebrate-icon{font-size:2.6rem}footer{color:var(--muted);text-align:center;font-size:.72rem;margin-top:25px}
/* v0.9 live broadcasts */
.live-announcement{margin:0 0 15px;padding:17px 18px;border:1px solid #e7b8ce;background:linear-gradient(135deg,var(--hero),var(--surface));overflow-wrap:anywhere}.live-heading{display:flex;align-items:center;gap:7px;font-size:.73rem;letter-spacing:.09em;color:var(--strong)}.live-dot{width:9px;height:9px;border-radius:50%;background:#ee5d83;box-shadow:0 0 0 4px rgba(238,93,131,.12);animation:livePulse 2s infinite}.live-author{margin-left:auto;font-size:.59rem;color:var(--muted)}.live-announcement p{font-size:.94rem;font-weight:700;line-height:1.55;margin:13px 0 9px;white-space:pre-wrap}.live-announcement small{color:var(--muted);font-size:.67rem}.fdn-top{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:.64rem;letter-spacing:.11em;font-weight:900;margin:0 0 13px}.fdn-badge{background:#35253e;color:#ffe5f3;padding:4px 7px;border-radius:6px}.broadcast-admin{margin-top:22px;background:linear-gradient(160deg,var(--surface),var(--soft))}.broadcast-toggle{display:flex;align-items:center;gap:9px;line-height:1.4}.broadcast-toggle input{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}.headline-text{flex:1;min-width:0;overflow-wrap:anywhere;font-size:.8rem}.fdn-ticker{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:stretch;z-index:60;background:#2a2036;color:#fff;box-shadow:0 -4px 22px rgba(0,0,0,.14);height:44px;overflow:hidden}.fdn-breaking{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0 12px;background:#c9577d;font-size:.65rem;font-weight:900;letter-spacing:.04em;z-index:1;white-space:nowrap}.fdn-viewport{flex:1;overflow:hidden;display:flex;align-items:center;min-width:0}.fdn-track{display:flex;align-items:center;white-space:pre;min-width:max-content;animation:fdnScroll 50s linear infinite;font-size:.79rem;font-weight:700;will-change:transform}.fdn-track span{flex-shrink:0;padding-right:30px}.fdn-ticker:hover .fdn-track,.fdn-ticker:focus-within .fdn-track{animation-play-state:paused}body.ticker-visible .app{padding-bottom:100px}@keyframes fdnScroll{to{transform:translateX(-50%)}}@keyframes livePulse{50%{opacity:.45;transform:scale(.85)}}
@media(max-width:390px){.panel{padding:15px}.tab{font-size:.68rem}.tools{grid-template-columns:repeat(2,1fr)}.studio-actions{grid-template-columns:1fr}.fdn-breaking{padding:0 8px;font-size:.58rem}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.fdn-viewport{overflow-x:auto}.fdn-track{white-space:normal;min-width:0}.fdn-track span:last-child{display:none}}