/* ================================================================ the room
   A blueprint floor plan pinned to the board. Furniture is white line art,
   people are polaroids on pushpins, speech is sticky notes. */

.stage { padding: 8px 6px 0; flex: none; }
.room {
  position: relative; isolation: isolate; /* keep avatar z-indexes inside the room, under sheets */
  margin: 0 auto; aspect-ratio: 3 / 2;
  width: min(100%, calc(50dvh * 1.5));
  overflow: hidden; cursor: crosshair; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background-color: #1d4f91;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(0,0,0,.25), transparent 60%);
  background-size: 2.5% 3.75%, 2.5% 3.75%, 12.5% 18.75%, 12.5% 18.75%, 100% 100%, 100% 100%;
  border: 7px solid #f1ece0; border-bottom-width: 9px;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 14px 30px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.85), inset 0 0 0 6px #1d4f91, inset 0 0 0 7px rgba(255,255,255,.5);
  transform: rotate(-.3deg);
}
.room .wall {
  position: absolute; left: 0; right: 0; top: 0; height: 17.5%;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 1.5px, transparent 1.5px 9px);
  border-bottom: 3px solid rgba(255,255,255,.85);
}
.room .rug {
  position: absolute; left: 30%; top: 46%; width: 40%; height: 34%; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.45);
}
.room .rug::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.25); }
.room .door { position: absolute; left: 44%; bottom: 0; width: 8.4%; height: 12.5%; overflow: visible; }
.room .door path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.room .door path.solid { stroke-dasharray: none; stroke-width: 2.5; stroke: rgba(255,255,255,.8); }
.title-block {
  position: absolute; right: 13%; bottom: 2.2%; display: grid; gap: 1px; padding: 3px 6px;
  border: 1.5px solid rgba(255,255,255,.6); font: 8px/1.2 var(--typewriter); letter-spacing: .1em; color: rgba(255,255,255,.7);
  pointer-events: none;
}
.room .dim { position: absolute; inset: 0; background: #040a17; opacity: 0; pointer-events: none; transition: opacity .6s; z-index: 2000; }
.room.dark .dim { opacity: .66; }
.room.frozen { cursor: default; }
.room.frozen::after {
  content: "FROZEN"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 2100;
  font: clamp(30px, 8vw, 64px)/1 var(--stamp); letter-spacing: .14em; color: rgba(255,255,255,.75);
  border: 5px solid rgba(255,255,255,.75); padding: 6px 16px 2px; pointer-events: none;
}

/* furniture: positioned by its center point */
.obj {
  position: absolute; transform: translate(-50%, -50%); border: 0; padding: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.obj .plan { width: 100%; height: 100%; overflow: visible; }
.obj .plan * { fill: none; stroke: rgba(255,255,255,.92); stroke-width: 2; vector-effect: non-scaling-stroke; }
.obj .plan .fill { fill: rgba(255,255,255,.92); }
.obj .plan text { fill: rgba(255,255,255,.95); stroke: none; font: 700 16px var(--type); }
.obj:hover .plan * { stroke: #ffe36b; }
.obj:hover .label { color: #ffe36b; }
.obj:focus-visible { outline: 2px dashed #ffe36b; outline-offset: 4px; }
.obj .label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) rotate(-3deg); margin-top: 1px; white-space: nowrap;
  font: 12px/1 var(--hand); color: rgba(255,255,255,.85); pointer-events: none;
}
.obj .caption {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) rotate(2deg); margin-bottom: 4px; white-space: nowrap;
  font: 12px/1.15 var(--hand); color: var(--ink); background: var(--sticky); padding: 3px 7px 2px; box-shadow: 0 2px 4px rgba(0,0,0,.35);
  pointer-events: none;
}
.obj .caption:empty { display: none; }
.obj-radio .caption { bottom: auto; top: calc(100% + 15px); }
.obj-darts .caption { bottom: auto; top: calc(100% + 15px); }
.obj-radio .notes { position: absolute; top: -12px; right: -10px; font: 16px/1 var(--type); color: #ffe36b; opacity: 0; pointer-events: none; }
.obj-radio.playing .notes { animation: notes 1.6s ease-in-out infinite; }
@keyframes notes { 0% { opacity: 0; transform: translateY(4px) rotate(-10deg); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px) rotate(12deg); } }
.obj-lights .label { margin-top: 3px; }
.obj-lights.off .plan circle { stroke: #ff6b6b; }
.obj-lights.off .label { color: #ff8b8b; }
.obj-lights.off .label::after { content: " (off)"; }
.obj-whiteboard {
  background: #fbfaf5; border-radius: 1px; box-shadow: 0 3px 8px rgba(0,0,0,.45);
  align-items: stretch; justify-content: flex-start; padding: 4px 9px; overflow: visible; transform: translate(-50%, -50%) rotate(-1deg);
}
.obj-whiteboard::before { /* tape */
  content: ""; position: absolute; top: -8px; left: 50%; width: 56px; height: 16px; transform: translateX(-50%) rotate(3deg);
  background: rgba(236,226,196,.85); box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.board-lines { display: flex; flex-direction: column; justify-content: center; width: 100%; gap: 0; overflow: hidden; }
.board-line { font: 700 13px/1.15 var(--marker); color: #2c3e66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.board-empty { font: 13px/1 var(--hand); color: #9aa1ad; text-align: center; }
.obj-snacks .food { position: absolute; left: 50%; transform: translate(-50%, 0); font-size: clamp(11px, 1.7vw, 18px); line-height: 1; pointer-events: none; }
.obj-plant .leaves { transform-origin: 30px 30px; transform: scale(var(--grow, 1)); transition: transform .4s; }
.obj-plant.drowning .plan * { stroke: #8fd3ff; }

/* avatars: polaroids on pushpins, positioned by their bottom edge */
.avatars { position: absolute; inset: 0; pointer-events: none; }
.av {
  position: absolute; width: max(34px, 7%); transform: translate(-50%, -92%);
  display: flex; flex-direction: column; align-items: center; border: 0; padding: 0; background: none;
  pointer-events: auto; cursor: pointer; color: inherit; font: inherit;
}
.av-body {
  position: relative; width: 100%; display: block; background: #fdfbf6; padding: 9% 9% 26%;
  box-shadow: 0 1px 1px rgba(0,0,0,.25), 3px 6px 8px rgba(0,0,0,.4);
  transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 8%;
}
.av-photo {
  display: grid; place-items: center; aspect-ratio: 1; width: 100%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, white), var(--c) 70%);
  box-shadow: inset 0 0 6px rgba(0,0,0,.25);
}
.pin {
  position: absolute; top: -5px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #fff8d6, #e8c24a 45%, #9c7a14);
  box-shadow: 1px 2px 2px rgba(0,0,0,.45);
}
.av.me .pin { background: radial-gradient(circle at 35% 30%, #ffd6d6, #e0303c 45%, #7d0d16); }
.av.crew .pin { background: radial-gradient(circle at 35% 30%, #d8ffe5, #35a865 45%, #145a30); }
.av-face { font-size: 18px; line-height: 1; display: inline-block; }
.av-hold { position: absolute; right: -32%; bottom: 2%; font-size: 14px; transform: rotate(12deg); }
.av-hold:empty { display: none; }
.av-name {
  margin-top: 4px; font: 700 9px/1 var(--type); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; color: #f6f2e8; background: #22201c; padding: 3px 5px 2px; border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.av.me .av-name { background: var(--red); }
.av.crew .av-name { background: var(--green); }
.av.walking .av-body { animation: swing .5s ease-in-out infinite; }
@keyframes swing {
  0%, 100% { transform: rotate(calc(var(--tilt, 0deg) - 5deg)); }
  50% { transform: rotate(calc(var(--tilt, 0deg) + 5deg)) translateY(-5%); }
}
.av.left .av-face { transform: scaleX(-1); }
.av.sitting { transform: translate(-50%, -80%) scale(.92); }
.av.poof { animation: drop .7s ease-in forwards; }
@keyframes drop { 30% { transform: translate(-50%, -92%) rotate(-12deg); } 100% { opacity: 0; transform: translate(-50%, 10%) rotate(35deg); } }

/* speech: sticky notes */
.av-bubble {
  position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%) rotate(-3deg) scale(.5); opacity: 0;
  width: max-content; max-width: 150px; background: var(--sticky); color: var(--ink); font: 14px/1.15 var(--hand);
  padding: 6px 8px 5px; box-shadow: 0 3px 8px rgba(0,0,0,.4); pointer-events: none;
  transition: opacity .15s, transform .18s cubic-bezier(.2,1.4,.4,1); overflow-wrap: anywhere; text-align: left;
}
.av:nth-child(3n) .av-bubble { background: #ffb3c7; transform: translateX(-50%) rotate(2deg) scale(.5); }
.av:nth-child(3n+1) .av-bubble { background: #b8f0c9; }
.av.talking .av-bubble { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1); }
.av.talking:nth-child(3n) .av-bubble { transform: translateX(-50%) rotate(2deg) scale(1); }
.av.talking { z-index: 2500 !important; }
.av-emote { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 24px; opacity: 0; pointer-events: none; }
.av-emote.pop { animation: emote 1.8s ease-out; }
@keyframes emote {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.4); }
  15% { opacity: 1; transform: translate(-50%, -6px) scale(1.3); }
  70% { opacity: 1; transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -28px); }
}

.tap-marker {
  position: absolute; transform: translate(-50%, -55%); font: 28px/1 var(--marker); color: #ff5560; opacity: 0; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.tap-marker.show { animation: tap .9s ease-out; }
@keyframes tap { 0% { opacity: 1; transform: translate(-50%, -55%) scale(1.5) rotate(-10deg); } 25% { transform: translate(-50%, -55%) scale(1) rotate(0); } 100% { opacity: 0; } }

.room-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 4px; flex: none; }
.emotes { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.emote-btn {
  border: 0; background: var(--paper); border-radius: 50%; width: 34px; height: 34px; font-size: 17px; cursor: pointer; line-height: 1;
  box-shadow: 0 2px 3px rgba(0,0,0,.35); flex: none;
}
.emote-btn:nth-child(odd) { background: #f8e9a8; }
.emote-btn:active { transform: scale(.9) rotate(-8deg); }
#room-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f1e6d2; font: 15px/1 var(--hand); }

/* lists use the same polaroid look */
.avatar.emoji-av { font-size: 17px; color: inherit; }
.reveal-card .big-avatar.emoji-av { font-size: 64px; }
.vote-btn .avatar.emoji-av { font-size: 32px; }

.small-card { max-width: 420px; display: grid; gap: 12px; }
.small-card h2, .small-card p { margin: 0; }
.small-card h2 { font-size: 26px; }

@media (min-width: 981px) {
  .av-face { font-size: clamp(18px, 1.5vw, 26px); }
}
@media (max-width: 980px) {
  .stage { padding: 6px 2px 0; }
  .room { width: min(100%, calc(42dvh * 1.5)); border-width: 5px; border-bottom-width: 7px; transform: none; }
  .room-bar { padding: 6px 4px 2px; }
  #room-hint { display: none; }
  .av { width: max(30px, 8.4%); }
  .av-name { font-size: 8px; max-width: 74px; padding: 2px 4px 1px; }
  .av-face { font-size: 16px; }
  .pin { width: 8px; height: 8px; margin-left: -4px; top: -4px; }
  .av-bubble { font-size: 12px; max-width: 118px; padding: 4px 6px 3px; }
  .obj .label { font-size: 10px; }
  .obj .caption { font-size: 10px; }
  .board-line, .board-empty { font-size: 10px; }
  .title-block { display: none; }
  .emote-btn { width: 32px; height: 32px; font-size: 16px; }
}