/* Vibehuset: the floor stage, the elevator and the people. Builds on app.css. */
.etage-stage { cursor: default; }
.etage-stage .backdrop { inset: -25% 0 0 0; transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1); }
.skakt { position: absolute; inset: 0; }
.taarn { position: absolute; left: 0; top: 0; width: 1024px; transform-origin: 0 0; }
.taarn.korer { transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1); }
.etage { position: absolute; left: 0; width: 1024px; height: 1024px; transition: opacity 600ms ease, filter 600ms ease; }
.etage { pointer-events: none; } /* the stage takes the clicks (walking), only the neighbour labels are buttons */
.etage.naer { filter: saturate(0.7) brightness(0.96); z-index: 3; }
.etage.fjern { visibility: hidden; }
.ramme { position: absolute; left: 0; top: 0; width: 1024px; height: 1024px; }
.etage-skilt { position: absolute; left: 230px; top: 820px; z-index: 2; padding: 8px 18px; border: 1px solid var(--edge); border-radius: 12px; background: rgb(242 241 236 / 0.9);
  font: 300 30px/1 var(--display); color: var(--ink); cursor: pointer; transform: skewY(-17deg); opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
.etage.naer .etage-skilt { opacity: 1; pointer-events: auto; }
.etage.under .etage-skilt { top: 175px; left: 560px; }
.etage.nu .etage-skilt { opacity: 0; }
.etage.naer:has(.etage-skilt:hover) { filter: none; }
.etage-img { position: absolute; inset: 0; width: 1024px; height: 1024px; user-select: none; -webkit-user-drag: none; }
.lag, .folk { position: absolute; inset: 0; pointer-events: none; }
.dybde { position: absolute; pointer-events: none; }
.walk-tip { position: absolute; z-index: 5; left: 50%; top: 18px; transform: translateX(-50%); margin: 0; padding: 10px 16px; border-radius: 14px; background: rgb(242 241 236 / 0.78); border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 400 11px/1.3 var(--mono); color: var(--ink-2); white-space: nowrap; pointer-events: none; }

/* Live text on blank screens and boards in the art */
.skaerm { position: absolute; transform: translate(-50%, -50%); max-width: 150px; padding: 4px 7px; border-radius: 4px; background: rgb(242 241 236 / 0.92);
  font: 400 9px/1.25 var(--mono); color: var(--ink); text-align: center; white-space: pre-line; overflow: hidden; }
.skaerm.plint { transform: translate(-50%, -100%); max-width: 110px; font-size: 10px; box-shadow: 0 4px 10px -6px rgb(30 36 43 / 0.5); }
/* Text painted onto a screen or board that faces the corridor: same slant as the art (front edge slope 0.31). */
.skaerm.skraa { transform: translate(-50%, -50%) skewY(-17deg); background: none; padding: 0; color: var(--ink-2); }
.skaerm.tavle { width: 270px; max-width: none; text-align: left; font-size: 12px; line-height: 1.6; }
.skaerm.stor { width: 230px; max-width: none; font: 300 22px/1.15 var(--display); color: var(--ink); }

/* People */
.person { position: absolute; left: 0; top: 0; display: grid; justify-items: center; }
.koerper { position: absolute; left: 0; top: 0; width: 0; height: 0; } /* pivots on the feet: gestures move this, never the sprite */
.person img { position: absolute; left: 0; top: 0; display: block; transform: translate(-50%, -100%); }
.person img.spejl { transform: translate(-50%, -100%) scaleX(-1); }
.folk .navn { position: absolute; left: 0; top: 0; z-index: 9000; padding: 2px 7px; border-radius: 6px; background: rgb(242 241 236 / 0.88); font: 400 10px/1.3 var(--mono); white-space: nowrap; }
.folk .navn.mig { background: var(--ink); color: var(--paper); }
.person.gaar img { animation: bob 0.5s steps(2) infinite; }

/* Chat bubbles and gesture icons above the head. --bub counter-scales them when the house is scaled down. */
.over { position: absolute; left: 0; top: 0; z-index: 9100; width: max-content; max-width: 200px; display: grid; justify-items: center; gap: 4px; pointer-events: none; transform-origin: 0 0; }
.snak-box { display: grid; justify-items: center; gap: 3px; }
.snak { max-width: 190px; padding: 4px 10px; border-radius: 10px; background: rgb(242 241 236 / 0.95); border: 1px solid var(--edge); box-shadow: 0 6px 14px -9px rgb(30 36 43 / 0.55);
  font: 400 12px/1.35 var(--sans); color: var(--ink); overflow-wrap: anywhere; animation: snak-ind 180ms ease-out; }
.snak.mig { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gest-ikon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); border: 1px solid var(--edge); color: var(--ink); box-shadow: 0 6px 14px -9px rgb(30 36 43 / 0.55); animation: snak-ind 180ms ease-out; }
@keyframes snak-ind { from { opacity: 0; transform: translateY(4px) scale(0.92); } }

/* Gesture motion on the figure: transform properties only, from the feet */
.g-vink .koerper { animation: g-vink 0.5s ease-in-out 3; transform-origin: 0 0; }
.g-klap .koerper { animation: g-klap 0.32s ease-in-out 6; transform-origin: 0 0; }
.g-tommel .koerper { animation: g-tommel 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 2; }
.g-hjerte .koerper { animation: g-hjerte 0.9s ease-in-out 2; transform-origin: 0 0; }
.g-grin .koerper { animation: g-grin 0.22s ease-in-out 8; transform-origin: 0 0; }
.g-dans .koerper { animation: g-dans 0.5s ease-in-out 8; transform-origin: 0 0; }
@keyframes g-vink { 0%, 100% { rotate: 0deg; } 25% { rotate: -7deg; } 75% { rotate: 7deg; } }
@keyframes g-klap { 0%, 100% { scale: 1 1; } 50% { scale: 1.05 0.95; } }
@keyframes g-tommel { 0%, 100% { translate: 0 0; } 45% { translate: 0 -12px; } }
@keyframes g-hjerte { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
@keyframes g-grin { 0%, 100% { rotate: 0deg; } 25% { rotate: -3deg; } 75% { rotate: 3deg; } }
@keyframes g-dans { 0%, 100% { translate: -6px 0; rotate: -6deg; } 50% { translate: 6px -6px; rotate: 6deg; } }

/* The chat bar at the bottom of the stage (logged-in members), and the «+N flere her» chip */
.snakbar { position: absolute; z-index: 6; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(560px, calc(100% - 28px)); display: flex; gap: 8px; align-items: center;
  padding: 6px; border-radius: 16px; background: rgb(242 241 236 / 0.86); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: default; }
.snakbar[hidden], .gestus-raekke[hidden], .snak-fejl[hidden], .mere-chip[hidden] { display: none; }
.snak-knap { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 11px; background: transparent; color: var(--ink); cursor: pointer; transition: background 160ms ease, transform 120ms ease; }
.snak-knap:hover { background: rgb(242 241 236 / 0.9); }
.snak-knap:active { transform: scale(0.96); }
.snak-knap.send { background: var(--ink); color: var(--paper); }
.snak-knap.send:hover { background: var(--ink-2); }
.snak-knap[aria-expanded="true"] { background: var(--paper); box-shadow: inset 0 0 0 1px var(--edge); }
.snakbar input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: 11px; background: rgb(242 241 236 / 0.7); font: 400 16px/1 var(--sans); color: var(--ink);
  user-select: text; -webkit-user-select: text; cursor: text; }
.snakbar input::placeholder { color: var(--ink-3); }
.gestus-raekke { position: absolute; left: 0; bottom: calc(100% + 8px); display: flex; gap: 4px; padding: 6px; border-radius: 16px; background: rgb(242 241 236 / 0.92); border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.snak-fejl { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 6px); margin: 0; padding: 6px 12px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 400 12px/1.35 var(--sans); }
.gestus-raekke:not([hidden]) ~ .snak-fejl { bottom: calc(100% + 72px); }
.mere-chip { position: absolute; z-index: 5; left: 14px; top: 14px; margin: 0; padding: 7px 12px; border-radius: 999px; background: rgb(242 241 236 / 0.86); border: 1px solid var(--edge); font: 400 11px/1 var(--mono); color: var(--ink-2); pointer-events: none; }

/* «Samtalen her» in the aside */
.samtale { margin-bottom: 16px; padding: 18px 20px; }
.samtale summary { cursor: pointer; font: 400 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.samtale[open] summary { margin-bottom: 12px; }
.samtale-log { list-style: none; margin: 0 0 8px; padding: 0; max-height: 260px; overflow-y: auto; display: grid; gap: 6px; }
.samtale-log li { padding: 6px 10px; border-radius: 10px; background: rgb(242 241 236 / 0.45); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.samtale-log b { font-weight: 500; }
.samtale-log .akt { display: flex; gap: 12px; margin-top: 2px; }
.samtale-log .akt .link { font-size: 12px; color: var(--ink-3); }
.samtale-log .akt .link:disabled { text-decoration: none; cursor: default; }

/* Elevator */
.elevator { padding: 20px 16px; margin-bottom: 16px; }
.elevator ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.etage-knap { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; padding: 8px 12px; border-radius: 10px; text-decoration: none; transition: background 160ms ease; }
.etage-knap:hover { background: rgb(242 241 236 / 0.55); }
.etage-knap[aria-current] { background: var(--paper); box-shadow: 0 8px 22px -14px rgb(30 36 43 / 0.55); }
.etage-knap b { font-weight: 500; }
.etage-knap span { font: 400 10px/1.3 var(--mono); color: var(--ink-3); text-align: right; }
.etage-info { margin-bottom: 16px; }
.etage-info h3 { margin-top: 20px; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.liste li { display: grid; padding: 8px 12px; border-radius: 10px; background: rgb(242 241 236 / 0.45); }
.liste a, .liste b { font-weight: 500; text-decoration: none; }
.liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.liste small { color: var(--ink-3); font-size: 12px; }

.talent summary { display: grid; cursor: pointer; list-style: none; }
.talent summary::-webkit-details-marker { display: none; }
.talent p { margin: 8px 0 0; font-size: 14px; }
.beviser { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.liste .beviser li { display: list-item; padding: 2px 0; background: none; border-radius: 0; }

/* Avatar picker */
.figurer { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; margin-bottom: 12px; }
.figur { padding: 4px; border: 1px solid var(--edge); border-radius: 12px; background: rgb(242 241 236 / 0.35); cursor: pointer; }
.figur img { display: block; width: 100%; height: auto; border-radius: 8px; }
.figur[aria-checked="true"] { background: var(--paper); box-shadow: 0 0 0 2px var(--ink); }
.figur:active { transform: scale(0.97); }

@media (max-width: 900px) {
  .elevator ol { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .etage-knap { grid-template-columns: auto; white-space: nowrap; }
  .etage-knap span { display: none; }
  .snakbar { bottom: 10px; }
  .gestus-raekke { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .etage, .taarn.korer { transition: none; }
  .person.gaar img { animation: none; }
  .person .koerper, .snak, .gest-ikon { animation: none !important; } /* gestures: icon only, no figure motion */
}

/* ---------- Crowd rule: more than 15 figures drawn, name tags only for you, recent talkers and the hovered or focused figure ---------- */
.folk.mange .navn:not(.mig):not(.nylig):not(.peg) { display: none; }
.folk.mange .person img { pointer-events: auto; }
.person img:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.folk .navn.peg { z-index: 9500; }

/* ---------- Inkubatorhallen: the scene, the world, the camera controls ---------- */
.scene { position: absolute; inset: 0; overflow: hidden; outline: none; cursor: default; }
.scene[hidden], .skakt[hidden] { display: none; }
.scene:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.stage.i-hal, .hal-scene { cursor: grab; touch-action: none; }  /* one finger moves the hall, only inside the stage: the aside below still scrolls the page */
.stage.i-hal.drager, .stage.i-hal.drager .scene { cursor: grabbing; }
.hal { position: absolute; inset: 0; overflow: hidden; }
.hal-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.hal-world[hidden], .hal-ov[hidden] { display: none; }
.hal-world .folk { position: absolute; left: 0; top: 0; inset: auto; width: 0; height: 0; pointer-events: none; } /* no stacking context: people sort with the rooms by z-index */
.hal-world .folk .navn { z-index: 900000; }
.hal-world .over { z-index: 900100; }
.hal-ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

/* the floor art is drawn on the hall's axes already: laid flat, clipped to the hall (hal.js), tinted per area */
.hal-floor, .hal-blvd, .hal-plads { position: absolute; pointer-events: none; background-size: 1024px 1024px; }
.hal-floor { z-index: 1; background-color: #c4cbd3; background-image: var(--hal-floor, none); }
.hal-blvd { z-index: 2; background-color: #d3c8a6; background-image: var(--hal-blvd, none); }
.hal-plads { z-index: 3; background-color: #cbbd95; background-image: var(--hal-plads, none); }
.hal-plads.entrance { background-color: #bcc6d0; background-image: var(--hal-entre, none); }
.hal-elev { position: absolute; transform-origin: 0 0; transform: matrix(1, -0.341, 1, 0.894, 0, 0); pointer-events: none; z-index: 4; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(180deg, #aab6c1, #8695a3); box-shadow: inset 0 0 0 6px #6f7d8a, inset 0 0 0 9px #c7d0d8; }
.hal-elev span { font: 500 22px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #f2f1ec; }

/* a room: its 1024 frame in frame px. Every child carries its own z-index in the world's one depth scale (hal.js) */
.rum-ram { position: absolute; width: 1024px; height: 1024px; pointer-events: none; }
.rum-ram > * { transition: opacity 240ms ease; }
.rum-ram > img { position: absolute; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.rum-ram.faded > * { opacity: 0.3; }
.rum-ram.inde > .rum-front { opacity: 0.28; }
.rum-plint { position: absolute; left: 184px; top: 902px; width: 847px; height: 250px; transform-origin: 0 0; transform: matrix(1, -0.341, 1, 0.894, 0, 0) translate(-20px, -226px); border-radius: 14px; background: rgb(30 36 43 / 0.11); }   /* a flat footing: a blurred shadow per room is far too dear to repaint */
.rum-plade { position: absolute; left: 600px; top: 850px; display: grid; gap: 1px; padding: 6px 13px; border-radius: 8px; background: rgb(242 241 236 / 0.93); border: 1px solid var(--edge); white-space: nowrap; box-shadow: 0 8px 18px -10px rgb(30 36 43 / 0.55);
  transform: translate(-50%, -50%) skewY(-18.8deg) scale(var(--bub, 1)); font: 400 13px/1.2 var(--sans); color: var(--ink); }
.rum-plade b { font-weight: 500; }
.rum-plade small { font: 400 10px/1.2 var(--mono); color: var(--ink-3); letter-spacing: 0.03em; }
.rum-ram.mit .rum-plade { box-shadow: 0 0 0 2px var(--amber), 0 8px 18px -10px rgb(30 36 43 / 0.55); }
.rum-mere { position: absolute; left: 330px; top: 760px; padding: 4px 10px; border-radius: 999px; background: rgb(242 241 236 / 0.92); border: 1px solid var(--edge); font: 400 11px/1.2 var(--mono); color: var(--ink-2); white-space: nowrap; transform: scale(var(--bub, 1)); transform-origin: 0 100%; }
.rum-ram.fundet > .rum-front, .rum-ram.fundet > .rum-inde { animation: fundet 1.1s ease-in-out 6; }
@keyframes fundet { 0%, 100% { filter: drop-shadow(0 0 0 rgb(232 160 60 / 0)); } 50% { filter: drop-shadow(0 0 4px var(--amber)) drop-shadow(0 0 34px rgb(232 160 60 / 0.85)); } }
.hal-prop { position: absolute; height: auto; transform: translate(-50%, -100%); pointer-events: none; user-select: none; -webkit-user-drag: none; }
.hal-world .mobel { position: absolute; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mobel.mistet { opacity: 0.4; filter: grayscale(0.6); }
.agent-tag { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 1px; max-width: 200px; padding: 5px 10px; border-radius: 10px; background: rgb(242 241 236 / 0.93);
  border: 1px solid var(--edge); box-shadow: 0 8px 18px -10px rgb(30 36 43 / 0.55); text-align: center; pointer-events: none; transform-origin: 0 0; font: 400 11px/1.25 var(--mono); color: var(--ink); }
.agent-tag b { font-weight: 500; }
.agent-tag small { font-size: 10px; color: var(--ink-2); }
.agent-tag em { font-style: normal; font: 400 11px/1.3 var(--sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agent-tag[data-s="venter"] { border-color: var(--amber); box-shadow: 0 0 20px -4px rgb(232 160 60 / 0.75); }
.agent-tag[data-s="mistet"] small { color: var(--ink-3); }
.eget-rum .folk .person:not(.mig) img { cursor: pointer; pointer-events: auto; }
.person-menu { position: absolute; z-index: 8; transform: translate(-50%, calc(-100% - 12px)); display: grid; gap: 8px; justify-items: center; padding: 12px 14px; border-radius: 14px; background: rgb(242 241 236 / 0.95);
  border: 1px solid var(--edge); box-shadow: 0 16px 36px -18px rgb(30 36 43 / 0.7); font-size: 14px; }
.person-menu .link { font-size: 12px; }
.btn-lille { min-height: 44px; padding: 0 16px; border: 0; border-radius: 11px; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--sans); cursor: pointer; }
.btn-lille:active { transform: scale(0.98); }
.stage-toast { position: absolute; z-index: 7; left: 50%; top: 14px; transform: translateX(-50%); margin: 0; padding: 10px 18px; border-radius: 12px; background: var(--ink); color: var(--paper);
  font: 400 14px/1.35 var(--sans); max-width: min(520px, calc(100% - 28px)); text-align: center; box-shadow: 0 14px 30px -16px rgb(30 36 43 / 0.7); }
.stage-toast[hidden] { display: none; }

/* camera buttons on the stage, and the minimap in the aside */
.hal-ctl { position: absolute; z-index: 6; right: 14px; bottom: 14px; display: grid; gap: 6px; }
.hal-knap { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--edge); border-radius: 12px; background: rgb(242 241 236 / 0.9); color: var(--ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: background 160ms ease, transform 120ms ease; }
.hal-knap:hover { background: var(--paper); }
.hal-knap:active:not(:disabled) { transform: scale(0.96); }
.hal-knap:disabled { opacity: 0.45; cursor: default; }
.hal-kort { margin-bottom: 16px; padding: 18px 20px; }
.hal-kort[hidden] { display: none; }
.hal-kort .kicker { margin-bottom: 10px; }
.hal-kort-lag { display: block; width: 100%; height: 120px; border-radius: 12px; background: #c3c8cb; cursor: crosshair; touch-action: none; }
.hal-kort .hint { margin: 10px 0 0; }

/* the Gangene picker under Inkubatoren in the elevator */
.gange { display: grid; gap: 10px; margin: 6px 4px 10px 10px; padding: 12px; border-radius: 14px; background: rgb(242 241 236 / 0.4); }
.gange .kicker { margin: 0; }
.gang-tal { display: flex; flex-wrap: wrap; gap: 6px; }
.gang-nr { position: relative; display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 6px; border: 1px solid var(--edge); border-radius: 11px; background: rgb(242 241 236 / 0.5);
  font: inherit; color: var(--ink); cursor: pointer; transition: background 160ms ease, transform 120ms ease; }
.gang-nr b { font-weight: 500; line-height: 1; }
.gang-nr small { position: absolute; right: 3px; top: 2px; min-width: 16px; padding: 1px 4px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 400 9px/1.3 var(--mono); text-align: center; }
.gang-nr:hover { background: var(--paper); }
.gang-nr:active { transform: scale(0.96); }
.gang-nr[aria-current="true"] { background: var(--paper); box-shadow: 0 0 0 2px var(--ink); }
.gange-knap { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--sans); cursor: pointer; }
.gange-knap[hidden] { display: none; }
.gange-knap:active { transform: scale(0.98); }
.find { display: flex; gap: 6px; align-items: center; }
.find input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 11px; background: rgb(242 241 236 / 0.7); font: 400 16px/1 var(--sans); color: var(--ink); }
.find input::placeholder { color: var(--ink-3); }
.find .snak-knap { background: var(--paper); box-shadow: inset 0 0 0 1px var(--edge); }
.find-svar { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.find-svar[hidden] { display: none; }
.find-svar .hint { margin: 0; padding: 4px 2px; }
.find-raekke, .dor-raekke { display: grid; width: 100%; padding: 8px 12px; border: 0; border-radius: 10px; background: rgb(242 241 236 / 0.55); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.find-raekke:hover, .dor-raekke:hover { background: var(--paper); }
.find-raekke b, .dor-raekke b { font-weight: 500; }
.find-raekke small, .dor-raekke small { color: var(--ink-3); font-size: 12px; }
.dor-raekke.lukket { background: rgb(242 241 236 / 0.3); }
.gange-box { margin-bottom: 16px; padding: 12px; }
.gange-box .gange { margin: 0; }

/* Dit rum in the aside (the old /gangen panel) */
.dit-rum { margin-bottom: 16px; }
.dit-rum[hidden] { display: none; }
.dit-rum .kicker { margin-bottom: 4px; }
.dit-rum .btn { margin-top: 18px; }
.agent-bild { object-fit: contain; border-radius: 10px !important; background: rgb(242 241 236 / 0.7) !important; }
.h-gaester { margin-top: 20px; }
.gaester .gaest { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 12px; }
.gaester .gaest .link { min-height: 32px; }

@media (max-width: 900px) {
  .gange { margin: 0; }
  .stage-toast { top: 10px; }
  .hal-ctl { top: 64px; bottom: auto; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rum-ram > * { transition: none; }
  .rum-ram.fundet > .rum-front, .rum-ram.fundet > .rum-inde { animation: none; filter: drop-shadow(0 0 4px var(--amber)) drop-shadow(0 0 24px rgb(232 160 60 / 0.7)); }
}

/* ---------- Byggesten, Butikken and Indret (butik.js) ---------- */
:root { --ok: oklch(0.6 0.13 155); --nej: oklch(0.56 0.17 28); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.byggesten, .butik { margin-bottom: 16px; padding: 20px 20px 18px; }
.byg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.byg-top .kicker { margin: 0; }
.byg-saldo { margin: 0; color: var(--ink-3); font: 400 12px/1 var(--mono); }
.byg-saldo b { font: 300 38px/1 var(--display); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.byg-aerlig { margin: 10px 0 12px; }
.byg-del { border-top: 1px solid var(--edge); padding: 10px 0 2px; }
.byg-del summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font: 400 11px/1.4 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.byg-tjen, .byg-log { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.byg-tjen li { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px solid rgb(242 241 236 / 0.5); }
.byg-tjen b { font: 400 12px/1.5 var(--mono); color: var(--ink-2); text-align: right; white-space: nowrap; }
.byg-log li { display: grid; grid-template-columns: 46px 1fr auto; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid rgb(242 241 236 / 0.5); }
.byg-log b { font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.byg-log b.minus { color: var(--ink-3); }
.byg-log time { font: 400 11px/1 var(--mono); color: var(--ink-3); }

.butik .btn-lille { margin: 4px 0 14px; width: 100%; }
.butik .btn-lille[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.faner { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.faner button { min-height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 11px; background: rgb(242 241 236 / 0.35); font: 500 13px/1 var(--sans); color: var(--ink-2); cursor: pointer; }
.faner button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
#butik-note { min-height: 20px; margin: 0 0 8px; }
.varer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.vare { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; padding: 8px; border-radius: 12px; background: rgb(242 241 236 / 0.45); }
.vare-bil { display: grid; place-items: center; height: 84px; border-radius: 8px; background: rgb(242 241 236 / 0.6); overflow: hidden; }
.vare-bil img { max-width: 100%; max-height: 76px; object-fit: contain; }
.vare-bil.k-tema img { max-height: none; width: 190%; max-width: none; object-fit: cover; margin-top: 16%; }
.vare-tekst { display: grid; gap: 1px; align-content: start; }
.vare-tekst b { font-weight: 500; font-size: 14px; line-height: 1.25; }
.vare-tekst small { color: var(--ink-3); font-size: 12px; line-height: 1.3; }
.koeb { min-height: 44px; border: 0; border-radius: 10px; background: var(--ink); color: var(--paper); font: 500 13px/1 var(--sans); cursor: pointer; }
.koeb:active:not(:disabled) { transform: scale(0.98); }
.koeb:disabled { background: rgb(242 241 236 / 0.7); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--edge); cursor: default; }
.koeb.brug:not(:disabled) { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }

/* Agent look and desk pickers inside «Dine agenter» */
.agents .udseende { grid-column: 1 / -1; }
.udseende summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font: 400 12px/1.3 var(--mono); color: var(--ink-2); }
.valg-raekke { display: grid; gap: 4px; margin: 4px 0 8px; }
.valg-raekke small { color: var(--ink-3); font-size: 12px; }
.valg-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.valg-knap { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--edge); border-radius: 10px; background: rgb(242 241 236 / 0.6); cursor: pointer; }
.valg-knap img { max-width: 36px; max-height: 36px; object-fit: contain; }
.valg-knap[aria-pressed="true"] { background: var(--paper); box-shadow: 0 0 0 2px var(--ink); }

/* Furniture in the room */
.ting.spejl { transform: scaleX(-1); }
.ting.ghost { opacity: 0.8; pointer-events: none; }
.ting.ghost[data-ok="0"] { opacity: 0.55; }
.indret-lag { position: absolute; left: 0; top: 0; width: 1024px; height: 1024px; pointer-events: none; overflow: visible; }
.indret-lag.net { z-index: 2; }
.indret-lag.top { z-index: 9001; }
.indret-net polygon { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 1; }
.indret-diamant { fill: oklch(0.6 0.13 155 / 0.38); stroke: var(--ok); stroke-width: 2.5; stroke-linejoin: round; }
.indret-diamant[data-ok="0"] { fill: oklch(0.56 0.17 28 / 0.38); stroke: var(--nej); }
.indret-aktiv .ting:not(.ghost) { pointer-events: auto; cursor: pointer; }
.indret-aktiv .ting:not(.ghost):hover { filter: drop-shadow(0 0 5px var(--amber)); }
.indret-aktiv .ting:focus-visible { outline: none; filter: drop-shadow(0 0 3px var(--ink)) drop-shadow(0 0 8px var(--amber)); }
.indret-aktiv .scene { cursor: crosshair; }
.eget-rum .rum-flere { top: 64px; }
.indret-aktiv .walk-tip { display: none; }
.indret-aktiv .stage-toast { top: auto; bottom: 14px; }
.indret-aktiv .snakbar { display: none; }                 /* the chat bar would cover the front of the floor while you furnish */

/* The Indret bar on the stage: inventory, mirror, put back, undo, save */
.indret-knap { position: absolute; z-index: 5; right: 14px; top: 14px; min-height: 44px; padding: 0 18px; border: 1px solid var(--edge); border-radius: 999px; background: rgb(242 241 236 / 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 14px/1 var(--sans); color: var(--ink); cursor: pointer; }
.indret-knap:active { transform: scale(0.98); }
.indret-bar { position: absolute; z-index: 6; left: 14px; top: 14px; width: min(420px, calc(100% - 140px)); display: grid; gap: 8px; padding: 10px; border-radius: 16px;
  background: rgb(242 241 236 / 0.92); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: default; }
.indret-bar.i-gang { width: min(560px, calc(100% - 28px)); }
.indret-bar[hidden] { display: none; }
.indret-status { margin: 0; min-height: 18px; font: 400 12px/1.4 var(--mono); color: var(--ink-2); }
.indret-lager { list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: 6px; overflow-x: auto; }
.indret-lager .hint { margin: 0; padding: 6px 4px; }
.lager-vare { display: grid; grid-template-columns: 44px auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 124px; min-height: 52px; padding: 4px 10px 4px 4px; border: 1px solid var(--edge); border-radius: 12px;
  background: rgb(242 241 236 / 0.7); font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.lager-vare img { grid-row: span 2; width: 44px; height: 44px; object-fit: contain; }
.lager-vare span { font-size: 13px; line-height: 1.2; white-space: nowrap; }
.lager-vare b { font: 400 11px/1 var(--mono); color: var(--ink-3); }
.lager-vare[aria-pressed="true"] { background: var(--paper); box-shadow: 0 0 0 2px var(--ink); }
.indret-knapper { display: flex; flex-wrap: wrap; gap: 6px; }
.ik { min-height: 44px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 11px; background: rgb(242 241 236 / 0.7); font: 500 14px/1 var(--sans); color: var(--ink); cursor: pointer; }
.ik.gem { background: var(--ink); color: var(--paper); border-color: var(--ink); margin-left: auto; }
.ik:disabled { opacity: 0.45; cursor: default; }
.ik:active:not(:disabled) { transform: scale(0.98); }
.ik-pil { display: none; gap: 6px; align-items: center; }
.ik-pil button:not(.ik) { width: 44px; height: 44px; border: 1px solid var(--edge); border-radius: 11px; background: rgb(242 241 236 / 0.7); font: 500 18px/1 var(--sans); color: var(--ink); cursor: pointer; }
@media (hover: none), (max-width: 900px) { .ik-pil { display: flex; flex-wrap: wrap; } }
@media (max-width: 900px) { .byggesten, .butik { padding: 18px 16px 16px; } .ik.gem { margin-left: 0; } }
.byg-del summary::after, .udseende summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 4px 0 auto; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform 160ms ease; }
.byg-del[open] > summary::after, .udseende[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.byg-del summary::-webkit-details-marker, .udseende summary::-webkit-details-marker { display: none; }
@media (max-width: 900px) { .stage.indret-aktiv { height: calc(100dvh - var(--top)); } .indret-bar { padding: 8px; gap: 6px; } .indret-status { min-height: 0; } }

/* The hall is drawn every frame while people walk: no live blur behind the controls on the stage, and each figure is isolated */
.i-hal .snakbar, .i-hal .walk-tip, .i-hal .mere-chip, .i-hal .indret-bar, .i-hal .indret-knap, .i-hal .gestus-raekke, .hal-knap { -webkit-backdrop-filter: none; backdrop-filter: none; }
.i-hal .snakbar, .i-hal .indret-bar { background: rgb(242 241 236 / 0.95); }
.i-hal .walk-tip, .i-hal .mere-chip, .hal-knap, .i-hal .indret-knap, .i-hal .gestus-raekke { background: rgb(242 241 236 / 0.94); }
.hal-world .person { contain: style; }
.i-hal .walk-tip { white-space: normal; max-width: min(420px, calc(100% - 84px)); text-align: center; }