/* A page opened over the bedroom (room-view.js, Room chat, 31 October night): the page itself in a frame over the room, and
   under it a cover over everything else, so no touch reaches the room while it is open. One colour scheme. */
.roomview-cover { position: fixed; inset: 0; z-index: 42; background: #1a0d10b3; cursor: pointer; touch-action: none; }
.roomview-cover[hidden] { display: none; }
.roomview { position: fixed; z-index: 43; inset: 0; margin: auto;
  width: min(1000px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); height: min(820px, calc(100dvh - 32px));
  background: #3a2a22; border: 3px solid #c9a24b; border-radius: 6px; box-shadow: 0 10px 30px #000c, inset 0 0 0 1px #6e4b12; overflow: hidden; }
.roomview[hidden] { display: none; }
.roomview.grown { animation: roomview-grow .45s cubic-bezier(.2, .8, .3, 1); }
@keyframes roomview-grow { from { transform: scale(.15); opacity: 0; } to { transform: none; opacity: 1; } }
.roomview iframe { display: block; width: 100%; height: 100%; border: 0; background: #3a2a22; }
.roomview iframe[hidden] { display: none; }
.roomview .fold { position: absolute; right: 10px; top: 10px; z-index: 2; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  font: 30px / 1 Georgia, serif; color: #f3d98c; background: #2a0a14; border: 2px solid #c9a24b; cursor: pointer; touch-action: manipulation; }
.roomview .fold:hover, .roomview .fold:focus-visible { background: #4e1230; box-shadow: 0 0 0 3px #4fb3a9; outline: none; }
/* a polaroid in the hand (her walk, 31 October night): no gilt box, the page is clear, so the polaroid lies over the room itself */
.roomview.bare { width: 100vw; height: 100vh; height: 100dvh; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.roomview.bare iframe { background: transparent; }
.roomview.bare .fold { display: none; }
/* the corkboard: the whole screen, so its cards can be read (her walk, 31 October night: it opened "very small") */
.roomview.wide { width: 100vw; height: 100vh; height: 100dvh; border-width: 0; border-radius: 0; }
@media (max-width: 640px) { .roomview { width: 100vw; height: 100vh; height: 100dvh; border-width: 0; border-radius: 0; } }
@media (min-width: 1800px) { .roomview:not(.bare):not(.wide) { width: min(1400px, calc(100vw - 64px)); height: min(1100px, calc(100vh - 64px)); }
  .roomview .fold { width: 64px; height: 64px; font-size: 40px; } }
@media (prefers-reduced-motion: reduce) { .roomview.grown { animation: none; } }
/* with a card or polaroid lying over the room, the room's purse stays in front of it (her word, 31 October night): the
   purse and what it opens above the cover and the clear page; the card's own purse is hidden inside it (room-view.js) */
body:has(.roomview.bare:not([hidden])) :is(#coinpurse, #coinpurse-in) { z-index: 44; }

/* WHAT CAN BE TOUCHED (her pick, 31 October night: "I like a twinkle"; her next passes: "much too big"; then twinkle, not
   blink, never in groups, on the frames and toward the edges rather than over the art, three or four per thing, smaller).
   room-view.js gives every thing in view that opens something three or four tiny stars of its own, set along the edge of
   its touch shape (on a picture, its frame), each softly flickering all the time on its own rhythm and at its own moment.
   The glow is drawn into the star, and only opacity and size move, so they cost the room nothing to draw. The door's handle
   keeps its own glint, and the tarot deck shimmers instead (below), so the two read apart. */
.hots { --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffe08a' stop-opacity='.85'/%3E%3Cstop offset='.45' stop-color='%23ffc21a' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23ffb000' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle r='50' fill='url(%23g)'/%3E%3Cpath d='M0-30C2.5-7 7-2.5 30 0C7 2.5 2.5 7 0 30C-2.5 7-7 2.5-30 0C-7-2.5-2.5-7 0-30Z' fill='%23fffbea'/%3E%3Ccircle r='5' fill='%23fff'/%3E%3C/svg%3E"); }
.hots .spark { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; pointer-events: none; background: var(--star) center / contain no-repeat;
  opacity: .2; will-change: opacity, transform; animation: flicker var(--d, 2.6s) ease-in-out var(--w, 0s) infinite; }
.hots .spark.s { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
@keyframes flicker { 0%, 100% { opacity: .15; transform: scale(.65); } 35% { opacity: 1; transform: scale(1); } 52% { opacity: .5; transform: scale(.8); } 68% { opacity: .9; transform: scale(.95); } }
/* the tarot deck shimmers: a slow light slides across the cards now and then, never a star (on the flat deck laid over the
   room, room-view.js, so it moves with the cards exactly) */
.flames .flatdeck { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; }
.flames .flatdeck[hidden] { display: none; }
.flames .flatdeck img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
.flames .flatdeck::after { content: ""; position: absolute; inset: 0;
  -webkit-mask: url(art/tarot/deck.png?v=1) center / 100% 100% no-repeat; mask: url(art/tarot/deck.png?v=1) center / 100% 100% no-repeat;   /* only on the cards */
  background: linear-gradient(115deg, #fff0 38%, #fff6d8cc 50%, #fff0 62%) no-repeat; background-size: 260% 100%; background-position: 130% 0;
  mix-blend-mode: screen; animation: shimmer 5.5s ease-in-out infinite 1s; }
@keyframes shimmer { 0%, 62% { background-position: 130% 0; } 92%, 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .hots .spark { animation: none; opacity: .6; } .flames .flatdeck::after { animation: none; opacity: 0; } }

/* the tarot deck lying on the vanity (31 October night): a thing drawn into the room, so it shows, unlike the other spots */
[data-skin="marble"] .spot.deck { visibility: visible; }
.spot.deck img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.spot.deck.flat img { visibility: hidden; }   /* the flat one over the room is the one seen */

/* the door's handle, in its own shape (room-view.js cuts it to the traced outline): no oval ring; the glint fills the lever
   and its plate, in the colour of the place it leads to (purse.js --paint), now and then as before (frames.js) */
[data-skin="marble"] .spot.exit.shaped { border-radius: 0; box-shadow: none !important; background: transparent; }
[data-skin="marble"] .spot.exit.shaped.glint { animation: handle-glint .96s ease-in-out 1; }
@keyframes handle-glint { 0%, 100% { background: #fff3c400; } 40% { background: #fff3c4c0; } }
@media (prefers-reduced-motion: reduce) { [data-skin="marble"] .spot.exit.shaped { animation: none; background: #fff3c455; } }

/* the candles' flames (room-view.js lays each one between its wick's two marks on the wall): small and soft, a white heart
   in a gold teardrop with a faint warm halo, each flickering on its own rhythm; only its shape and glow move */
.flames { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.flame { position: absolute; display: block; transform-origin: 50% 100%; }
.flame[hidden] { display: none; }
.flame::before { content: ""; position: absolute; left: -110%; right: -110%; top: -40%; bottom: -55%; border-radius: 50%;
  background: radial-gradient(closest-side, #ffcf6a66, #ffb34722 55%, #ffa03a00); animation: halo var(--d, 1.1s) ease-in-out infinite alternate; }
.flame > i { position: absolute; inset: 0; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 52% 46% at 50% 74%, #fffef6 0 22%, #fff0b0 38%, #ffc54a 62%, #ff8a2a00 82%);
  will-change: transform; animation: flame var(--d, 1.1s) ease-in-out infinite; }
@keyframes flame { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 22% { transform: scale(.94, 1.07) skewX(2.5deg); } 47% { transform: scale(1.05, .93) skewX(-2deg); }
  71% { transform: scale(.97, 1.04) skewX(1.5deg); } 86% { transform: scale(1.02, .97) skewX(-1deg); } }
@keyframes halo { from { opacity: .75; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .flame > i, .flame::before { animation: none; } }
.face b.wick, .face b.wick-up { position: absolute; width: 0; height: 0; pointer-events: none; }   /* the wicks' marks on the wall */

/* the polaroids by the mirror on a phone (Ship's find, 31 October night): each is only about 13 by 16 px there, so each gets a
   pad at least 44 px square round its middle; where pads overlap, room-view.js opens the polaroid nearest the touch. The
   glass in the middle of the mirror stays out of reach of every pad. */
@media (max-width: 760px), (pointer: coarse) {
  .hots .hot.pol { clip-path: none !important; }
  .hots .hot.pol::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}