/* Light and touch belong to the room; dice and scores remain above the scene. */
.table-stage #scene-video{z-index:1;transition:opacity .18s;pointer-events:none}
/* Only the characters' performance is composited; the game renders every scored die. */
.table-stage[data-scene="lina"] #scene-video,.table-stage[data-scene="amor"] #scene-video{mask-image:linear-gradient(to bottom,#000 57%,transparent 65%)}
.room-details{position:absolute;inset:0 auto auto 0;width:100%;aspect-ratio:16/9;z-index:2;pointer-events:none}
.room-hotspot{position:absolute;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;pointer-events:auto;transform:translate(-50%,-50%);color:#fff2bf}
.room-hotspot:hover,.room-hotspot:active{transform:translate(-50%,-50%);background:transparent;box-shadow:none}
.room-hotspot:focus-visible{outline:3px solid #2f797b;outline-offset:3px;background:#fffbf233}
.candle-left{left:6%;top:54.5%}.candle-right{left:94.6%;top:55.3%}
.candle-flame{position:absolute;width:12px;height:28px;left:50%;top:50%;transform-origin:50% 100%;translate:-50% -70%;animation:flame-breathe 1.8s ease-in-out infinite}
.candle-right .candle-flame{animation-duration:2.3s;animation-delay:-.7s}
.candle-aura{position:absolute;inset:-17px;border-radius:50%;background:radial-gradient(ellipse,#ffe7a477,#ffd46b22 40%,transparent 72%);mix-blend-mode:screen;animation:room-candle-light 2.9s ease-in-out infinite}
.candle-right .candle-aura{animation-delay:-1.4s}
.room-hotspot.dancing .candle-flame{animation:flame-dance .95s ease-out both}
.room-hotspot.dancing .candle-aura{animation:light-response .95s ease-out both}
.window-hello{left:82%;top:12%;width:44px;height:44px}
.window-hello svg{width:19px;height:19px;fill:#fff0bd;stroke:#5c587f;stroke-width:1;opacity:.9}
.window-hello:hover svg,.window-hello:focus-visible svg{fill:#fffdf2;opacity:1}
.window-sky{position:absolute;left:71%;top:0;width:25%;height:26%;overflow:hidden;pointer-events:none}
.shooting-star{position:absolute;width:58%;height:25%;left:-58%;top:8%;opacity:0;fill:#fff5c9;stroke:#ffedb0;stroke-width:1.5}
.window-sky.wishing .shooting-star{animation:window-wish 1.25s ease-out both}
.table-stage .round{z-index:3}.table-stage .dice-tray{z-index:4}
.room-discoveries{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px 0}
.room-discoveries p{font-size:12px;line-height:1.5;margin:0;color:#653f47;flex:1}
.room-discoveries button{min-height:44px;max-width:220px;padding:10px 13px;font-size:12px;color:#653f22;background:#fff3d8;line-height:1.4}
.room-discoveries button .ui-icon{width:18px;height:18px}
.room-sleeping .room-details *{animation-play-state:paused!important}
.paused .room-details *{animation:none!important}
@keyframes flame-breathe{0%,100%{transform:rotate(-3deg) scaleY(.97)}24%{transform:rotate(2deg) scaleY(1.06)}60%{transform:rotate(-1deg) scaleY(.93)}82%{transform:rotate(3deg) scaleY(1.03)}}
@keyframes room-candle-light{0%,100%{opacity:.55;transform:scale(.95)}28%{opacity:.85;transform:scale(1.04)}58%{opacity:.65;transform:scale(.99)}80%{opacity:.95;transform:scale(1.08)}}
@keyframes flame-dance{0%,100%{transform:rotate(0) scaleY(1)}20%{transform:rotate(-13deg) scaleY(.9)}42%{transform:rotate(10deg) scaleY(1.12)}65%{transform:rotate(-6deg) scaleY(.97)}80%{transform:rotate(3deg) scaleY(1.04)}}
@keyframes light-response{0%,100%{opacity:.6;transform:scale(1)}40%{opacity:1;transform:scale(1.45)}}
@keyframes window-wish{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(280%,120%)}}
@media(max-width:600px){.room-discoveries{align-items:start}.room-discoveries button{max-width:160px}.candle-flame{width:8px;height:18px}.candle-aura{inset:-6px}.window-hello{top:14%}.room-discoveries p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.room-details *{animation:none!important}.table-stage #scene-video{transition:none}}
/* The name has its own clear paper strip on small screens. */
@media(max-width:650px){
  #results{overflow-x:hidden}
  #results h2{padding-top:20px}
  .winner-film{aspect-ratio:auto}
  .winner-film .winner-room{height:auto;aspect-ratio:16/9}
  .winner-film #winner-video{inset:0 auto auto 0;height:auto;aspect-ratio:16/9}
  .winner-film .winner-ribbon{position:relative;inset:auto;padding:12px 14px;border-radius:0;box-shadow:none;animation:none}
  #publish-scores>div{flex-direction:column;align-items:stretch;gap:10px}
  #publish-scores label{min-width:0}
  #publish-scores input{min-width:0;box-sizing:border-box}
  #publish-scores button{width:100%}
}