:root { --yellow:#fff200; --ink:#080808; font-family:Arial,Helvetica,sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; }
button,textarea,input { font:inherit; }
.board { width:100%; height:100dvh; min-height:500px; display:flex; flex-direction:column; background:#fff; overflow:hidden; }
.board-head { height:82px; border-bottom:16px solid var(--yellow); display:flex; align-items:flex-end; gap:10px; padding:0 clamp(20px,5.5vw,90px); white-space:nowrap; overflow:hidden; flex-shrink:0; }
.board-head strong { font-size:clamp(36px,5.2vw,80px); line-height:.76; margin-bottom:-.015em; letter-spacing:-.055em; font-weight:900; text-transform:uppercase; }
.board-head span { font-size:clamp(16px,1.65vw,27px); font-variant:small-caps; line-height:.8; margin-bottom:0; }
.board-stage { position:relative; flex:1; min-height:0; isolation:isolate; }
.question-card { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); width:min(760px,60%); max-height:46%; overflow:auto; padding:27px 38px; background:#000; color:#fff; border-radius:26px; text-align:center; font-size:clamp(23px,2.4vw,39px); font-weight:400; white-space:pre-wrap; line-height:1.35; overflow-wrap:anywhere; }
.qr-block { position:absolute; z-index:4; left:50%; top:var(--qr-top,calc(50% + 100px)); transform:translateX(-50%); display:flex; align-items:center; flex-direction:column; gap:8px; max-width:calc(100% - 24px); transition:top .55s,left .55s,right .55s,bottom .55s,transform .55s; }
.qr-image { width:min(clamp(210px,24vw,350px),var(--available-qr,350px)); aspect-ratio:1; padding:0; border:0; background:#fff; transition:width .4s; }
.qr-image svg { display:block; width:100%; height:100%; shape-rendering:crispEdges; }
.board-url { color:#000; font-size:clamp(17px,2.4vw,36px); text-decoration:none; white-space:normal; max-width:600px; overflow-wrap:anywhere; text-align:center; transition:font-size .55s; }
.board.revealed .qr-block { left:auto; top:auto; right:clamp(16px,3vw,45px); bottom:8px; transform:none; }
.board.revealed .qr-image { width:clamp(140px,14vw,220px); }
.board.revealed .board-url { max-width:280px; font-size:clamp(13px,1.65vw,26px); }
.is-admin .bubble { touch-action:none; cursor:grab; }
.is-admin .bubble.dragging { cursor:grabbing; }
.question-card strong { font-weight:750; }
.answer-count { position:absolute; z-index:5; display:grid; place-items:center; min-width:42px; height:42px; padding:0 7px; border:2px solid #111; border-radius:24px; background:var(--yellow); color:#111; font-size:16px; font-weight:700; line-height:1; box-shadow:0 2px 5px #0002; }
.answer-count[hidden] { display:none; }
.answer-count.private-count { background:#d5d5d5; }
.board-bubbles { position:absolute; inset:0; z-index:2; }
.bubble { position:absolute; display:grid; place-items:center; max-width:min(450px,calc(100% - 16px)); min-width:130px; width:max-content; min-height:68px; max-height:min(330px,calc(100% - 16px)); padding:16px 17px; background:var(--yellow); border-radius:8px; text-align:center; font-size:var(--fitted-bubble-size,var(--bubble-size,25px)); font-weight:400; line-height:1.32; white-space:pre-wrap; overflow-wrap:anywhere; outline:none; cursor:default; transform-origin:center; transition:transform .18s,box-shadow .18s; }
.bubble:focus-visible { outline:3px solid #2357a5; outline-offset:3px; }
.bubble-text { min-width:0; min-height:0; max-height:298px; overflow:auto; position:relative; z-index:1; }
.bubble-text strong { font-weight:700; }
.bubble-text em { font-style:italic; }
.bubble-text a,.bubble-text a:visited { color:#000; text-decoration:underline; text-underline-offset:3px; }
.bubble-text a:focus-visible { outline:3px solid #2357a5; outline-offset:2px; }
.bubble:hover,.bubble:focus-visible,.bubble.selected { transform:scale(1.09); box-shadow:0 10px 30px #0004; z-index:6; }
.bubble.dragging { transition:none; transform:scale(1.05); z-index:8; }
.bubble::after { content:""; position:absolute; left:var(--tip-x,50%); top:var(--tip-y,100%); width:48px; height:36px; background:var(--yellow); clip-path:polygon(0 0,100% 50%,0 100%); transform:translate(-50%,-50%) rotate(var(--tip-angle,1.57rad)); pointer-events:none; z-index:0; }
.bubble-tools { position:absolute; top:-23px; right:-18px; display:none; gap:4px; z-index:10; white-space:nowrap; }
.is-admin .bubble:hover .bubble-tools,.is-admin .bubble:focus-visible .bubble-tools,.is-admin .bubble.selected .bubble-tools { display:flex; }
.bubble-tools button { cursor:pointer; border:1px solid #111; border-radius:50%; background:#fff; width:44px; height:44px; padding:0; font-size:24px; line-height:1; color:#111; box-shadow:0 3px 8px #0003; }
.board-foot { height:40px; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; padding:0 clamp(20px,5.5vw,90px); font-size:16px; }
.board-status { color:#777; font-size:13px; }
@media (max-width:700px) {
 .board-head { height:78px; border-bottom-width:12px; padding:8px 16px 0; gap:7px; }
 .board-head strong { font-size:clamp(26px,6vw,37px); line-height:.76; }
 .board-head span { font-size:clamp(11px,2.6vw,16px); line-height:.8; }
 .question-card { width:85%; font-size:25px; padding:20px; max-height:38%; }
 .qr-image { width:min(225px,var(--available-qr,225px)); }
 .board.revealed .qr-image { width:125px; }
 .board.revealed .qr-block { right:9px; bottom:0; }
 .board.revealed .board-url { max-width:280px; font-size:12px; max-width:180px; white-space:normal; overflow-wrap:anywhere; text-align:center; }
 .bubble { max-width:min(278px,calc(100% - 16px)); min-width:80px; min-height:45px; max-height:min(225px,calc(100% - 16px)); padding:10px; }
 .bubble-text { max-height:205px; }
 .board-foot { height:34px; padding:0 15px; }
}

.board.preview .bubble,.board.preview .bubble::after { background:#d5d5d5; }
.board.exporting, .board.exporting * { transition:none !important; animation:none !important; }