.stage .bubble-wrap { --object-width:min(17vw,170px); --object-tilt:12deg; left:72%; top:73%; }
/* In the room the sheet is ray-traced onto the photographed desk (scripts/room-bubble.py): real domes in the room camera's perspective, so no CSS tilt. */
.room-view .stage .bubble-wrap { position:absolute; left:28.646%; top:52.734%; width:13.542%!important; height:7.031%!important; aspect-ratio:auto; transform:none!important; padding:0; border:0; background:url('../../assets/room/bubble-wrap-desk.png') center/100% 100% no-repeat; filter:none; z-index:6; transition:filter .18s; }
.room-view .stage .bubble-wrap:is(:hover,:focus-visible) { filter:brightness(1.08); }
.room-view .stage .bubble-wrap .object-photo { display:none; }
/* The wrap itself is the surface; the room remains visible around it. */
.object-dialog[data-room="bubble"] { width:min(880px,calc(100vw - 32px)); max-height:calc(100dvh - 24px); border:0; border-radius:0; background:transparent; color:#fff9ee; box-shadow:none; }
[data-room="bubble"] .dialog-inner { padding:0; }
[data-room="bubble"] .dialog-head { display:none; }
#bubble-room { font:13px/1.4 'Courier New',monospace; }
.bubble-top { display:flex; align-items:center; justify-content:flex-end; gap:8px; height:48px; margin-bottom:4px; }
#bubble-room button { font:inherit; color:inherit; cursor:pointer; }
#bubble-close { border:0; background:none; font-size:24px!important; width:44px; height:44px; }
.bubble-layout { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:24px; align-items:start; }
.bubble-sheet { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); padding:0; background:transparent; touch-action:none; user-select:none; -webkit-user-select:none; overflow:hidden; border-radius:2px; box-shadow:0 12px 32px #0004; }
#bubble-room .bubble-cell { position:relative; display:block; border:0; padding:0; min-height:0; width:100%; aspect-ratio:1; background:url('../../assets/bubble/cells.webp') 0 0/200% 100%; touch-action:none; border-radius:0; -webkit-tap-highlight-color:transparent; }
.bubble-cell::after { content:''; position:absolute; inset:0; background:url('../../assets/bubble/popped-variants.webp') var(--pop-x,0%) var(--pop-y,0%)/200% 200%; opacity:0; pointer-events:none; }
.bubble-cell.popped::after { opacity:1; }
.bubble-cell.popped { cursor:default!important; }
.bubble-cell:focus-visible { outline:2px solid #775a32; outline-offset:-4px; z-index:2; }
.bubble-controls { display:flex; align-items:center; gap:8px; }
.bubble-controls button,#bubble-board-retry { border:0; padding:8px; background:none; width:44px; height:44px; }
.bubble-records { padding:8px 0 0; text-shadow:0 1px 3px #0008; }
.bubble-records h3 { font:inherit; font-weight:bold; letter-spacing:.12em; margin:3px 0 2px; }

#bubble-scores { padding:0; margin:0; list-style:none; counter-reset:rank; }
#bubble-scores li { counter-increment:rank; display:flex; gap:8px; padding:9px 0; border-bottom:1px dotted #fff7; font-size:13px; }
#bubble-scores li::before { content:counter(rank) '.'; opacity:.5; }
#bubble-scores span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#bubble-scores b { margin-left:auto; font-weight:normal; white-space:nowrap; }
.bubble-flavor-clock { position:relative; width:min(100%,190px); aspect-ratio:2/3; margin:10px auto 0; container-type:inline-size; }
.bubble-flavor-clock img { display:block; width:100%; height:100%; object-fit:contain; }
.bubble-clock-hand { position:absolute; left:50.4%; top:74.7%; width:0; height:0; rotate:var(--seconds-turn,0deg); }
.bubble-clock-hand::before { content:''; position:absolute; left:-1.1cqw; bottom:0; width:2.2cqw; height:18cqw; border-radius:70% 70% 2px 2px; background:linear-gradient(90deg,#930e13,#f7473c 45%,#ab171b); box-shadow:0 0 2px #f33,1px 1px 2px #000b; }
.bubble-clock-hand::after { content:''; position:absolute; left:-1.6cqw; top:-1.6cqw; width:3.2cqw; height:3.2cqw; border-radius:50%; background:#ed322e; box-shadow:0 0 0 1px #361716,0 1px 2px #000a; }
#bubble-save { margin-top:20px; }

#bubble-save div { display:flex; gap:5px; }
#bubble-name { width:100%; min-width:0; color:#fff9ee; background:#ffffff12; border:1px solid #fff6; padding:8px 5px; font:inherit; }
#bubble-save button { border:1px solid #fff6; background:#ffffff12; padding:5px 7px; }
#bubble-status,#bubble-board-status { font-size:12px; line-height:1.6; }
#bubble-status { margin-top:18px; }
#bubble-room [hidden] { display:none!important; }
@media(max-width:600px) {
 .bubble-layout { grid-template-columns:1fr; gap:20px; }
 .bubble-records { padding:0 4px; }
 #bubble-scores { display:grid; grid-template-columns:1fr 1fr; column-gap:20px; }
 .bubble-flavor-clock { width:min(48vw,180px); }
 #bubble-status { margin-bottom:0; }
 .stage .bubble-wrap { --object-width:25vw; left:72%; top:80%; }
}
@media(min-width:601px) {
 .object-dialog[data-room="bubble"] { width:min(880px,calc(100vw - 32px),calc((100dvh - 88px)*1.2 + 214px)); }
}
@media(max-height:500px) and (min-width:601px) {
 .bubble-top { height:44px; margin-bottom:0; }
 .bubble-records { padding-top:0; }
 #bubble-scores li { padding:5px 0; }
 #bubble-save { margin-top:10px; }
 #bubble-time { margin-top:12px; font-size:20px; }
}
@media(max-height:720px) and (min-width:601px) { .bubble-flavor-clock { width:140px; } }

.bubble-controls svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.bubble-sound-slash { display:none; }
#bubble-mute[aria-pressed="true"] .bubble-sound-slash { display:block; }
#bubble-mute[aria-pressed="true"] .bubble-sound-waves { display:none; }
.bubble-records h3 { margin-bottom:14px; }
#bubble-time { display:block; margin-top:20px; font:24px/1 'Courier New',monospace; }
#bubble-status:empty,#bubble-board-status:empty { display:none; }
.bubble-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

#bubble-name::placeholder { color:#fff9ee99; }