:root { --yellow:#fff200; --ink:#080808; font-family:Arial,Helvetica,sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; }
a,a:visited { color:#000; }
button,textarea,input { font:inherit; }
.board { position:relative; width:100%; height:100dvh; min-height:500px; display:flex; flex-direction:column; background:#fff; overflow:hidden; }
.board-head { height:auto; border-bottom:clamp(9px,1vw,16px) solid var(--yellow); display:flex; align-items:flex-end; gap:10px; padding:3px clamp(12px,5.5vw,90px) 0; white-space:nowrap; overflow:hidden; flex-shrink:0; }
.board-head strong { font-size:clamp(36px,5.2vw,80px); line-height:.76; margin-bottom:-.03em; 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; z-index:3; 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-tail { position:absolute; left:-40px; top:-40px; fill:var(--yellow); overflow:visible; 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 { 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:77%; font-size:clamp(17px,5vw,22px); padding:12px 15px; max-height:34%; border-radius:19px; }
 .qr-image { width:min(225px,var(--available-qr,225px)); }
 .board.revealed .qr-block { display:none; }
 .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(235px,calc(100% - 16px)); min-width:72px; min-height:39px; max-height:min(225px,calc(100% - 16px)); padding:8px; }
 .bubble-text { max-height:205px; }
 .board-foot { height:34px; padding:0 15px; }
}
.board.adaptive-layout { overflow:hidden; }

.board.preview .bubble { background:#d5d5d5; }
.board.preview .bubble-tail { fill:#d5d5d5; }
.board.exporting, .board.exporting * { transition:none !important; animation:none !important; }
.easter-flight { position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
.easter-student-flight { position:fixed; z-index:1; }
.easter-icon { position:absolute; width:var(--easter-size,128px); height:var(--easter-size,128px); opacity:0; animation:easter-rise var(--easter-duration,12s) cubic-bezier(.28,.06,.72,.86) forwards; }
.easter-icon img { display:block; width:100%; height:100%; object-fit:contain; animation:easter-sway var(--wobble-duration,1.2s) ease-in-out infinite alternate; }
@keyframes easter-rise { 0% { transform:translateY(0) scale(.7);opacity:0; } 4% { opacity:1; } 92% { opacity:1; } 100% { transform:translateY(var(--rise)) scale(var(--grow,1.1));opacity:0; } }
@keyframes easter-sway { from { transform:translateX(-9px) rotate(var(--spin-from,-7deg)); } to { transform:translateX(11px) rotate(var(--spin-to,8deg)); } }
@media (prefers-reduced-motion:reduce) { .easter-icon { animation-timing-function:linear; } .easter-icon img { animation:none; } }