/* places.css – platsernas interiörer (hotell, jobbcentral, telefonkiosk). Alla klasser börjar med .pl- */

.pl-root {
  --pl-ink: #3a2e22;                 /* konturer i illustrationerna är alltid mörka */
  position: absolute; inset: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: var(--paper, #f6ecd6); color: var(--ink, #3a2e22);
  font-family: 'Fraunces', Georgia, serif;
  overflow: hidden; outline: none;
  opacity: 0; transition: opacity .3s;
  -webkit-user-select: none; user-select: none;
  --pl-tint: transparent;
  --pl-dim: #ffffff;                 /* extra mörkläggning i mörkt läge */
}
.pl-root.pl-ready { opacity: 1; }
.pl-root *, .pl-root *::before, .pl-root *::after { box-sizing: border-box; }
.pl-root svg { display: block; }

/* ---------- scenen: en storleksbehållare, en skala (--s = 1 designenhet i px) ---------- */
.pl-stage { container: pl / size; position: relative; min-height: 0; overflow: hidden; border-bottom: 3px solid var(--pl-ink); }
.pl-scale {
  position: absolute; inset: 0;
  --bw: 800; --bh: 480; --fh: 100;
  --s: min(100cqw / var(--bw), 100cqh / var(--bh));
}
.pl-hotel .pl-scale { --fh: 100; }
.pl-jobs .pl-scale { --fh: 112; }
.pl-phone .pl-scale { --fh: 104; }
@container pl (max-aspect-ratio: 1.12) {
  .pl-scale { --bw: 440; --bh: 600; --fh: 76; }
  .pl-phone .pl-scale { --fh: 110; }
  .pl-jobs .pl-scale { --fh: 70; }
}

.pl-wall { position: absolute; inset: 0; background-color: var(--pl-wall, #e3cfae); }
.pl-wall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(40, 24, 8, .22), transparent 30%, transparent 70%, rgba(40, 24, 8, .1)); }
.pl-pat-stripe .pl-wall { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .15) 0 calc(var(--s) * 26), rgba(0, 0, 0, .04) calc(var(--s) * 26) calc(var(--s) * 52)); }
.pl-pat-dots .pl-wall { background-image: radial-gradient(rgba(255, 255, 255, .22) calc(var(--s) * 3), transparent calc(var(--s) * 3.6)); background-size: calc(var(--s) * 34) calc(var(--s) * 34); }
.pl-pat-diamond .pl-wall { background-image: linear-gradient(45deg, rgba(255, 255, 255, .13) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .13) 75%), linear-gradient(45deg, rgba(255, 255, 255, .13) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .13) 75%); background-size: calc(var(--s) * 48) calc(var(--s) * 48); background-position: 0 0, calc(var(--s) * 24) calc(var(--s) * 24); }
.pl-pat-shoji .pl-wall { background-image: linear-gradient(90deg, rgba(60, 40, 20, .18) calc(var(--s) * 2), transparent 0), linear-gradient(rgba(60, 40, 20, .18) calc(var(--s) * 2), transparent 0); background-size: calc(var(--s) * 60) calc(var(--s) * 60); }
.pl-pat-plank .pl-wall { background-image: repeating-linear-gradient(rgba(0, 0, 0, .09) 0 calc(var(--s) * 2), transparent calc(var(--s) * 2) calc(var(--s) * 26)); }

.pl-dado { position: absolute; left: 0; right: 0; bottom: calc(var(--s) * var(--fh) - 2px); height: calc(var(--s) * 74); background: var(--pl-dado, #8a5a3c); border-top: 3px solid var(--pl-ink); box-shadow: inset 0 calc(var(--s) * 5) 0 rgba(255, 255, 255, .15); }
.pl-dado::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .13) 0 2px, transparent 2px calc(var(--s) * 52)); }
.pl-floor { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--s) * var(--fh)); background-color: var(--pl-floor, #a9774a); border-top: 3px solid var(--pl-ink); }
.pl-floor::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .28), transparent 55%); }
.pl-fl-planks .pl-floor { background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px calc(var(--s) * 70)), repeating-linear-gradient(rgba(0, 0, 0, .06) 0 calc(var(--s) * 18), transparent calc(var(--s) * 18) calc(var(--s) * 36)); }
.pl-fl-checker .pl-floor { background-image: conic-gradient(rgba(60, 40, 20, .3) 25%, transparent 0 50%, rgba(60, 40, 20, .3) 0 75%, transparent 0); background-size: calc(var(--s) * 60) calc(var(--s) * 60); }
.pl-fl-tiles .pl-floor { background-image: radial-gradient(circle at 50% 50%, var(--pl-acc) 0 calc(var(--s) * 9), transparent calc(var(--s) * 10)), conic-gradient(rgba(60, 40, 20, .16) 25%, transparent 0 50%, rgba(60, 40, 20, .16) 0 75%, transparent 0); background-size: calc(var(--s) * 56) calc(var(--s) * 56); }
.pl-fl-tiles2 .pl-floor { background-image: linear-gradient(45deg, rgba(60, 40, 20, .2) 25%, transparent 25% 75%, rgba(60, 40, 20, .2) 75%), linear-gradient(45deg, rgba(60, 40, 20, .2) 25%, transparent 25% 75%, rgba(60, 40, 20, .2) 75%); background-size: calc(var(--s) * 50) calc(var(--s) * 50); background-position: 0 0, calc(var(--s) * 25) calc(var(--s) * 25); }
.pl-fl-tatami .pl-floor { background-image: linear-gradient(90deg, rgba(40, 60, 20, .35) calc(var(--s) * 3), transparent 0), linear-gradient(rgba(40, 60, 20, .35) calc(var(--s) * 3), transparent 0); background-size: calc(var(--s) * 120) calc(var(--s) * 60); }

.pl-board { position: absolute; left: calc(50% - var(--s) * var(--bw) / 2); bottom: 0; width: calc(var(--s) * var(--bw)); height: calc(var(--s) * var(--bh)); }
.pl-prop { position: absolute; left: calc(var(--s) * var(--x)); top: calc(var(--s) * var(--y)); width: calc(var(--s) * var(--w)); height: calc(var(--s) * var(--h)); }
.pl-prop > svg { width: 100%; height: 100%; overflow: visible; }
@container pl (max-aspect-ratio: 1.12) {
  .pl-prop { left: calc(var(--s) * var(--tx, var(--x))); top: calc(var(--s) * var(--ty, var(--y))); width: calc(var(--s) * var(--tw, var(--w))); height: calc(var(--s) * var(--th, var(--h))); }
  .pl-prop[data-tall='hide'] { display: none; }
}

/* tid på dygnet: tonad överlagring ovanpå rummet, under lampor och pratbubblor */
.pl-tint { position: absolute; inset: 0; pointer-events: none; z-index: 10; mix-blend-mode: multiply; background: linear-gradient(var(--pl-tint), var(--pl-tint)), linear-gradient(var(--pl-dim), var(--pl-dim)); transition: background .8s; }
.pl-root[data-slot='0'] { --pl-tint: rgba(255, 232, 180, .14); }
.pl-root[data-slot='1'] { --pl-tint: transparent; }
.pl-root[data-slot='2'] { --pl-tint: rgba(255, 150, 90, .34); }
.pl-root[data-slot='3'] { --pl-tint: rgba(40, 50, 140, .58); }
.pl-phone[data-slot='2'] { --pl-tint: rgba(255, 150, 90, .12); }
.pl-phone[data-slot='3'] { --pl-tint: rgba(40, 50, 140, .22); }
.pl-grain { position: absolute; inset: 0; pointer-events: none; z-index: 40; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  .pl-root { --pl-dim: #b4aebf; }
  .pl-grain { opacity: .35; }
}

/* ---------- karaktärer ---------- */
.pl-ch { width: 100%; height: 100%; overflow: visible; }
.pl-char { cursor: pointer; }
.pl-body { animation: pl-breathe 4.4s ease-in-out infinite; transform-origin: 140px 258px; }
@keyframes pl-breathe { 50% { transform: translateY(-1.8px) scale(1.004); } }
.pl-head { transform-origin: 140px 152px; animation: pl-sway 7s ease-in-out infinite; }
@keyframes pl-sway { 0%, 100% { transform: rotate(-.9deg); } 50% { transform: rotate(1deg) translateY(-.6px); } }
.pl-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: pl-blink 5.4s infinite; transition: transform .15s; }
@keyframes pl-blink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
.pl-look { animation: pl-look 9s ease-in-out infinite; }
@keyframes pl-look { 0%, 35%, 100% { transform: translateX(0); } 42%, 58% { transform: translateX(2.6px); } 68%, 86% { transform: translateX(-2.6px); } }
.pl-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform .35s; }
.pl-brows { transition: transform .25s; }
.pl-mouth { }
.pl-m-open { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; }
.pl-talking .pl-m-closed { opacity: 0; }
.pl-talking .pl-m-open { opacity: 1; animation: pl-talk .36s steps(1, end) infinite; }
@keyframes pl-talk { 0% { transform: scaleY(.4); } 25% { transform: scaleY(1); } 50% { transform: scaleY(.55); } 75% { transform: scaleY(.9); } }
/* gester: armen höjs när personen pratar */
.pl-arm { transition: transform .45s cubic-bezier(.3, 1.2, .5, 1); }
.pl-fore { transition: transform .45s cubic-bezier(.3, 1.2, .5, 1); }
.pl-talking .pl-arm { transform: rotate(-34deg); }
.pl-talking .pl-fore { transform: rotate(-112deg); }
.pl-talking .pl-hand { animation: pl-wave .9s ease-in-out infinite; }
@keyframes pl-wave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }
.pl-talking .pl-head { animation: pl-talkhead 1.3s ease-in-out infinite; }
@keyframes pl-talkhead { 0%, 100% { transform: rotate(-1.2deg); } 40% { transform: rotate(1.6deg) translateY(-1px); } 70% { transform: rotate(-.2deg) translateY(1px); } }
.pl-nod .pl-head { animation: pl-nod .55s ease-out; }
@keyframes pl-nod { 0% { transform: translateY(0); } 30% { transform: translateY(5px) rotate(1deg); } 60% { transform: translateY(-1px); } 100% { transform: translateY(0); } }
/* sover / vaknar */
.pl-zz { opacity: 0; transition: opacity .3s; }
.pl-zz text { animation: pl-zz 2.8s ease-in-out infinite; }
.pl-zz text:nth-child(2) { animation-delay: .5s; } .pl-zz text:nth-child(3) { animation-delay: 1s; }
@keyframes pl-zz { 0% { opacity: 0; transform: translateY(8px); } 40%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.pl-sleepy .pl-zz { opacity: 1; }
.pl-sleepy .pl-lid { transform: scaleY(1); }
.pl-sleepy .pl-eyes { animation: none; }
.pl-sleepy .pl-head { animation: pl-doze 3.6s ease-in-out infinite; }
@keyframes pl-doze { 0%, 100% { transform: rotate(-8deg) translateY(2px); } 50% { transform: rotate(-4deg) translateY(6px); } }
.pl-bang { opacity: 0; }
.pl-wake .pl-bang { animation: pl-bang .9s ease-out; }
@keyframes pl-bang { 0% { opacity: 0; transform: scale(.6); } 20%, 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.pl-wake .pl-head { animation: pl-startle .75s ease-out; }
@keyframes pl-startle { 0% { transform: rotate(-8deg) translateY(4px); } 25% { transform: rotate(2deg) translateY(-8px) scale(1.04); } 60% { transform: rotate(-1deg) translateY(-2px); } 100% { transform: rotate(0); } }
.pl-wake .pl-eyes { animation: none; transform: scale(1.35); }
.pl-wake .pl-brows { transform: translateY(-5px); }
.pl-wake .pl-lid { transform: scaleY(0); }
.pl-hm .pl-brows { animation: pl-hm .8s; }
@keyframes pl-hm { 30%, 60% { transform: translateY(-4px) rotate(-3deg); } }
.pl-hm .pl-head { animation: pl-hmhead .8s; }
@keyframes pl-hmhead { 30%, 60% { transform: rotate(5deg); } }

/* ---------- pratbubbla ---------- */
.pl-bubble {
  --bc: var(--pl-ink);
  position: absolute; z-index: 20;
  left: calc(var(--s) * var(--bx)); bottom: calc(var(--s) * (var(--bh) - var(--bb))); width: calc(var(--s) * var(--bwid));
  background: var(--paper, #f6ecd6); color: var(--ink, #3a2e22);
  border: 2.5px solid var(--bc); border-radius: 24px 28px 22px 26px / 26px 22px 28px 24px;
  box-shadow: 3px 5px 0 rgba(30, 20, 8, .28);
  padding: .5em .8em .55em; cursor: pointer;
  font-family: 'Caveat', 'Comic Sans MS', cursive; font-weight: 700; font-size: max(18px, calc(var(--s) * 23)); line-height: 1.12;
  transform-origin: var(--tlx) 100%;
  transition: opacity .2s, transform .2s;
}
.pl-bubble.pl-good { --bc: var(--good, #3f7d3a); color: var(--good, #3f7d3a); }
.pl-bubble.pl-bad { --bc: var(--bad, #a62f2f); color: var(--bad, #a62f2f); }
.pl-bubble.pl-off { opacity: 0; transform: scale(.9) translateY(6px); pointer-events: none; visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s; }
.pl-bubble.pl-pop { animation: pl-pop .32s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pl-pop { 0% { transform: scale(.8) translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pl-bt { max-height: calc(var(--s) * (var(--bb) - 30)); overflow-y: auto; overflow-wrap: anywhere; scrollbar-width: thin; }
.pl-hid { visibility: hidden; }
.pl-who { position: absolute; left: .8em; top: -.95em; font: 700 max(11px, calc(var(--s) * 13)) 'Fraunces', Georgia, serif; background: var(--pl-acc, #c8452b); color: #fff7e8; border: 2px solid var(--pl-ink); border-radius: 99px; padding: .05em .7em; transform: rotate(-2deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); white-space: nowrap; }
.pl-who:empty { display: none; }
.pl-tl { position: absolute; display: none; width: 15px; height: 15px; background: var(--paper, #f6ecd6); transform: rotate(45deg); }
.pl-tl-down { display: block; bottom: -9px; left: calc(var(--tlx) - 7px); border-right: 2.5px solid var(--bc); border-bottom: 2.5px solid var(--bc); border-radius: 0 0 6px 0; }
.pl-tl-left { left: -9px; top: calc(var(--tly) - 7px); border-left: 2.5px solid var(--bc); border-bottom: 2.5px solid var(--bc); border-radius: 0 0 0 6px; }
.pl-tl-up { top: -9px; left: calc(var(--ttlx) - 7px); border-left: 2.5px solid var(--bc); border-top: 2.5px solid var(--bc); border-radius: 6px 0 0 0; }
.pl-tl-think { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--bc); transform: none; }
.pl-bubble[data-tail='left'] .pl-tl-down { display: none; }
.pl-bubble[data-tail='left'] .pl-tl-left { display: block; }
.pl-bubble.pl-thoughtb { border-radius: 40px 44px 38px 42px / 34px 30px 36px 32px; font-weight: 500; font-style: italic; }
.pl-bubble.pl-thoughtb .pl-tl-down, .pl-bubble.pl-thoughtb .pl-tl-left, .pl-bubble.pl-thoughtb .pl-tl-up { display: none; }
.pl-bubble.pl-thoughtb .pl-tl-think { display: block; left: 18%; bottom: -17px; }
.pl-bubble.pl-thoughtb .pl-tl-think::after { content: ''; position: absolute; left: -9px; bottom: -11px; width: 7px; height: 7px; border-radius: 50%; border: 2.5px solid var(--bc); background: var(--paper, #f6ecd6); }
@container pl (max-aspect-ratio: 1.12) {
  .pl-bubble { left: calc(var(--s) * var(--tbx)); bottom: calc(var(--s) * (var(--bh) - var(--tbb))); width: calc(var(--s) * var(--tbwid)); }
  .pl-bubble[data-ttail='up'] .pl-tl-down, .pl-bubble[data-ttail='up'] .pl-tl-left { display: none; }
  .pl-bubble[data-ttail='up'] .pl-tl-up { display: block; }
  .pl-bubble[data-ttail='up'] { transform-origin: var(--ttlx) 0; }
  .pl-bubble.pl-thoughtb[data-ttail='up'] .pl-tl-up { display: none; }
  .pl-bt { max-height: calc(var(--s) * (var(--tbb) - 40)); }
}

/* ---------- knappraden ---------- */
.pl-bar { background: var(--wood, #d9bf8a); background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 46px); padding: .6rem .7rem calc(.65rem + env(safe-area-inset-bottom, 0px)); position: relative; z-index: 2; }
.pl-bar-in { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; max-width: 900px; margin: 0 auto; }
.pl-root .pl-btn {
  appearance: none; font: 600 1rem/1.2 'Fraunces', Georgia, serif; color: var(--ink, #3a2e22);
  background: var(--paper-2, #efe0bd); border: 2.5px solid var(--pl-ink); border-radius: 12px 15px 11px 16px / 15px 11px 16px 12px;
  padding: .5rem 1.05rem; min-height: 44px; cursor: pointer; text-align: center; position: relative;
  box-shadow: 0 3px 0 rgba(30, 20, 8, .35); transition: transform .08s, background .15s, filter .15s, opacity .15s;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.pl-root .pl-btn:hover:not(:disabled) { background: var(--land, #e9c98a); transform: translateY(-2px); box-shadow: 0 5px 0 rgba(30, 20, 8, .35); }
.pl-root .pl-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
.pl-root .pl-btn.primary { background: var(--accent, #c8452b); color: var(--on-accent, #fff7e8); }
.pl-root .pl-btn.primary:hover:not(:disabled) { background: var(--accent, #c8452b); filter: brightness(1.1); }
.pl-root .pl-btn.ghost { background: transparent; border-style: dashed; box-shadow: none; }
.pl-root .pl-btn.ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .25); box-shadow: none; }
.pl-root .pl-btn.pl-weak { filter: grayscale(.75) brightness(.95); opacity: .8; }
.pl-root .pl-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; border-style: dashed; }
.pl-root .pl-btn small { display: block; font: 400 .72rem/1.15 'Fraunces', Georgia, serif; opacity: .9; margin-top: .1rem; }
.pl-root :focus-visible { outline: 3px solid var(--accent-2, #2f6f6a); outline-offset: 2px; }
@media (max-width: 560px) {
  .pl-bar { padding: .45rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
  .pl-bar-in { gap: .4rem; }
  .pl-root .pl-btn { flex: 1 1 calc(50% - .4rem); font-size: .92rem; padding: .35rem .5rem; }
  .pl-root .pl-btn:only-child { flex: 0 1 60%; }
  .pl-root .pl-btn.primary:first-child:not(:only-child) { flex-basis: 100%; }
}
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hotell ---------- */
.pl-bell { all: unset; display: block; width: 100%; height: 100%; cursor: pointer; position: relative; }
.pl-root .pl-bell:hover:not(:disabled), .pl-root .pl-bell:active:not(:disabled) { background: none; box-shadow: none; transform: none; }
.pl-bell:focus-visible { outline: 3px solid var(--accent-2, #2f6f6a); outline-offset: 3px; border-radius: 8px; }
.pl-bell:hover .pl-bell-g { transform: translateY(-2px); }
.pl-bell-g { transition: transform .1s; }
.pl-bell:active .pl-bell-knob { transform: translateY(3px); }
.pl-bell-knob { transition: transform .08s; }
.pl-ding { opacity: 0; }
.pl-bellring .pl-ding { animation: pl-ding .7s ease-out; }
.pl-bellring .pl-bell-g { animation: pl-bellshake .5s ease-out; transform-origin: 28px 40px; }
@keyframes pl-ding { 0% { opacity: 0; } 15%, 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pl-bellshake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
.pl-hint { position: absolute; left: 50%; top: -1.4em; transform: translateX(-30%) rotate(-6deg); font: 700 max(17px, calc(var(--s) * 22)) 'Caveat', cursive; color: var(--pl-acc, #c8452b); white-space: nowrap; pointer-events: none; animation: pl-hintbob 1s ease-in-out infinite, pl-hintfade 9s forwards; text-shadow: 0 0 4px var(--paper, #f6ecd6); }
.pl-hint::after { content: '↓'; display: block; text-align: center; margin-left: -1em; line-height: .6; }
@keyframes pl-hintbob { 50% { translate: 0 -4px; } }
@keyframes pl-hintfade { 0%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.pl-key { animation: pl-keysway 5.5s ease-in-out infinite; }
@keyframes pl-keysway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.pl-lampglow, .pl-lampglow2 { opacity: 0; transition: opacity .8s; mix-blend-mode: screen; pointer-events: none; }
.pl-root[data-slot='2'] .pl-lampglow { opacity: .55; } .pl-root[data-slot='3'] .pl-lampglow { opacity: .8; }
.pl-root[data-slot='2'] .pl-lampglow2 { opacity: .6; } .pl-root[data-slot='3'] .pl-lampglow2 { opacity: .85; }
.pl-lamp, .pl-hanger, .pl-lampostp { }
.pl-lampp, .pl-hanger, .pl-lampostp { z-index: 12 !important; }
.pl-hanger.pl-hw { z-index: 1 !important; }
.pl-window { z-index: 12 !important; }
.pl-swing { animation: pl-swing 5.5s ease-in-out infinite; }
@keyframes pl-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.pl-fan { animation: pl-spin 6s linear infinite; }
@keyframes pl-spin { to { transform: rotate(360deg); } }
.pl-sway-slow { animation: pl-plant 6s ease-in-out infinite; transform-origin: 35px 95px; }
@keyframes pl-plant { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } }
.pl-cat { animation: pl-catbreath 3.4s ease-in-out infinite; transform-origin: 70px 100px; }
@keyframes pl-catbreath { 50% { transform: scaleY(1.04) translateY(-1px); } }
.pl-cloud { animation: pl-drift 60s linear infinite; }
@keyframes pl-drift { from { transform: translateX(-60px); } to { transform: translateX(220px); } }
.pl-star { animation: pl-twinkle 3s ease-in-out infinite; }
@keyframes pl-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pl-lit { animation: pl-flick 5s steps(1) infinite; }
@keyframes pl-flick { 0%, 96% { opacity: 1; } 97% { opacity: .5; } }

/* ---------- jobbcentralen ---------- */
.pl-cork { z-index: 4; background-color: #c99a62; background-image: radial-gradient(rgba(90, 55, 25, .38) 1px, transparent 1.6px), radial-gradient(rgba(255, 232, 190, .3) 1px, transparent 1.6px), radial-gradient(rgba(90, 55, 25, .2) 2px, transparent 2.6px); background-size: 9px 9px, 13px 13px, 21px 21px; background-position: 0 0, 4px 6px, 8px 3px; border-radius: 4px; box-shadow: 0 0 0 calc(var(--s) * 9) #9a6a3e, 0 0 0 calc(var(--s) * 12) var(--pl-ink), inset 0 0 calc(var(--s) * 18) rgba(60, 30, 10, .35), 4px 8px 0 calc(var(--s) * 12) rgba(30, 20, 8, .25); }
.pl-cork-in { position: absolute; inset: 0; }
.pl-cork-tag { position: absolute; left: 4%; top: calc(var(--s) * -22); z-index: 3; font: 700 max(17px, calc(var(--s) * 23)) 'Caveat', cursive; background: #fffaf0; color: #3a2e22; border: 2px solid var(--pl-ink); padding: 0 .6em; border-radius: 3px; transform: rotate(-2deg); box-shadow: 2px 3px 0 rgba(0, 0, 0, .25); }
.pl-cards { position: absolute; inset: calc(var(--s) * 20) calc(var(--s) * 8) calc(var(--s) * 8); display: flex; flex-wrap: wrap; gap: .75em; justify-content: center; align-content: center; font-size: max(11.5px, calc(var(--s) * 14)); }
.pl-cards[data-n='4'], .pl-cards[data-n='5'] { font-size: max(9px, calc(var(--s) * 10.2)); gap: .5em; }
.pl-nojobs { font: 700 1.6em 'Caveat', cursive; color: #3a2e22; }
.pl-root .pl-card {
  appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: .18em;
  width: 8.6em; min-height: 12.4em; padding: 1.2em .45em .5em;
  background: #fffaf0; color: #3a2e22; font: 500 1em/1.15 'Fraunces', Georgia, serif; text-align: center;
  border: 2px solid var(--pl-ink); border-radius: 3px 6px 3px 5px; box-shadow: .16em .26em 0 rgba(30, 20, 8, .3);
  transform: rotate(var(--rot, 0deg)); transform-origin: 50% .5em;
  animation: pl-dangle var(--d, 4s) ease-in-out var(--dl, 0s) infinite; cursor: pointer; touch-action: manipulation;
  transition: transform .15s, box-shadow .15s, background .15s;
}
@keyframes pl-dangle { 0%, 100% { transform: rotate(var(--rot)); } 50% { transform: rotate(calc(var(--rot) * -.6)); } }
.pl-root .pl-card:hover, .pl-root .pl-card:focus-visible { animation: none; transform: rotate(0deg) scale(1.07) translateY(-.2em); z-index: 3; box-shadow: .22em .5em 0 rgba(30, 20, 8, .3); background: #fffdf5; }
.pl-root .pl-card:active { transform: rotate(0deg) scale(1.02); box-shadow: .16em .26em 0 rgba(30, 20, 8, .3); }
.pl-pin { position: absolute; top: -.4em; left: 50%; width: 1em; height: 1em; margin-left: -.5em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff9 0 14%, var(--pl-acc, #c8452b) 20%); border: 1.5px solid var(--pl-ink); box-shadow: .1em .18em 0 rgba(0, 0, 0, .3); }
.pl-card-ico svg { width: 3.4em; height: 3.4em; display: block; }
.pl-card-title { font-weight: 700; font-size: .86em; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.2em; }
.pl-card-cat { font: 700 .7em 'Fraunces', Georgia, serif; text-transform: uppercase; letter-spacing: .08em; color: #6b5a46; }
.pl-card-pay { font: 700 1.3em/1 'Caveat', cursive; color: #c8452b; margin-top: auto; white-space: nowrap; }
.pl-card-pay em { font: 500 .52em 'Fraunces', serif; color: #6b5a46; font-style: normal; }
.pl-stamps { display: flex; gap: .3em; margin-top: .1em; }
.pl-stamps i { width: 1.2em; height: 1.2em; border: 2px dashed rgba(58, 46, 34, .45); border-radius: 50%; display: block; }
.pl-stamps i.on { border: 2px solid #c8452b; background: radial-gradient(circle, #c8452b 0 34%, transparent 38%); transform: rotate(-10deg); animation: pl-stampin .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes pl-stampin { from { transform: scale(2) rotate(-30deg); opacity: 0; } }
.pl-card-prog { font-size: .62em; line-height: 1.1; color: #6b5a46; }
.pl-card-sat { font-size: .6em; line-height: 1.1; color: #a3361f; }
.pl-card-sat:empty { display: none; }
.pl-seal { position: absolute; right: -.7em; top: -.9em; width: 2.7em; height: 2.7em; transform: rotate(14deg); filter: drop-shadow(.08em .12em 0 rgba(0, 0, 0, .3)); }
.pl-seal svg { width: 100%; height: 100%; }
.pl-root .pl-card.is-cert { background: #fff4cf; border-color: #8a6a1f; }
.pl-root .pl-card.is-cert::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .5em; background: repeating-linear-gradient(135deg, #d9a02f 0 .4em, #fff4cf .4em .8em); border-bottom: 2px solid var(--pl-ink); }
.pl-root .pl-card.pl-stamp { animation: pl-thud .5s ease-out; }
@keyframes pl-thud { 0% { transform: rotate(0) scale(1.12); } 30% { transform: rotate(0) scale(.94); } 100% { transform: rotate(0) scale(1); } }
.pl-root .pl-card.pl-nope { animation: pl-nope .4s; }
@keyframes pl-nope { 20%, 60% { transform: translateX(-.3em) rotate(-2deg); } 40%, 80% { transform: translateX(.3em) rotate(2deg); } }
.pl-closedsign { display: none; position: absolute; right: 4%; top: calc(var(--s) * -8); width: 26%; z-index: 6; transform-origin: 50% 0; animation: pl-swing 4s ease-in-out infinite; pointer-events: none; }
.pl-closed .pl-closedsign { display: block; }
.pl-closed .pl-card { filter: grayscale(1) brightness(.88); opacity: .8; cursor: not-allowed; }
.pl-closed .pl-card:hover { transform: rotate(var(--rot)) scale(1); }
.pl-shelfcap { position: absolute; left: calc(var(--s) * var(--x)); top: calc(var(--s) * var(--y)); width: calc(var(--s) * var(--w)); text-align: center; z-index: 3; font: 700 max(14px, calc(var(--s) * 17)) 'Caveat', cursive; pointer-events: none; }
.pl-shelfcap span { display: inline-block; background: #e8c46a; color: #3a2e22; border: 2px solid var(--pl-ink); border-radius: 4px; padding: 0 .5em; box-shadow: 1px 2px 0 rgba(0, 0, 0, .25); line-height: 1.2; }
@container pl (max-aspect-ratio: 1.12) { .pl-cork-tag { display: none; }
  .pl-shelfcap { left: calc(var(--s) * var(--tx)); top: calc(var(--s) * var(--ty)); width: calc(var(--s) * var(--tw)); } }
.pl-book .pl-book-on { display: none; }
.pl-book.is-on .pl-book-on { display: block; animation: pl-bookin .5s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: 50% 100%; }
.pl-book.is-on .pl-book-off { display: none; }
@keyframes pl-bookin { from { transform: translateY(-14px) rotate(-12deg); opacity: 0; } }

/* ---------- telefonkiosken ---------- */
.pl-phone .pl-wall, .pl-phone .pl-dado { display: none; }
.pl-bgwrap { position: absolute; inset: 0; overflow: hidden; }
.pl-skyart { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-skyline { position: absolute; left: 0; right: 0; bottom: calc(var(--s) * var(--fh) - 3px); width: 100%; height: calc(var(--s) * 270); }
.pl-phone .pl-floor { background-color: #b9b0a0; background-image: linear-gradient(90deg, rgba(0, 0, 0, .12) 2px, transparent 0), linear-gradient(rgba(0, 0, 0, .1) 2px, transparent 0); background-size: calc(var(--s) * 64) calc(var(--s) * 34); box-shadow: inset 0 calc(var(--s) * 12) 0 #a39a8a; }
.pl-phone .pl-floor::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--s) * -3); height: calc(var(--s) * 10); background: #d8d0c0; border-top: 3px solid var(--pl-ink); border-bottom: 3px solid var(--pl-ink); }
.pl-glow-in { opacity: 0; transition: opacity .8s; mix-blend-mode: soft-light; }
.pl-root[data-slot='2'] .pl-glow-in { opacity: .35; } .pl-root[data-slot='3'] .pl-glow-in { opacity: .65; }
.pl-handset { transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.pl-offhook .pl-handset { transform: translate(14px, -46px) rotate(-8deg); }
.pl-cord { transition: opacity .3s; }
.pl-cord-off { opacity: 0; }
.pl-offhook .pl-cord-on { opacity: 0; }
.pl-offhook .pl-cord-off { opacity: 1; }
.pl-rings { opacity: 0; }
.pl-ringing .pl-rings { opacity: 1; animation: pl-rings .5s steps(2) infinite; }
@keyframes pl-rings { 50% { opacity: .35; } }
.pl-dialing .pl-dial { animation: pl-dial 1.3s ease-in-out .35s both; }
@keyframes pl-dial { 0% { transform: rotate(0); } 20% { transform: rotate(-215deg); } 38% { transform: rotate(0); } 55% { transform: rotate(-170deg); } 72% { transform: rotate(0); } 85% { transform: rotate(-120deg); } 100% { transform: rotate(0); } }
.pl-ringing .pl-phone { animation: pl-shake .14s linear infinite; transform-origin: 160px 330px; }
@keyframes pl-shake { 0%, 100% { transform: rotate(-.7deg); } 50% { transform: rotate(.7deg); } }
.pl-coin { opacity: 0; }
.pl-coining .pl-coin { animation: pl-coin 1s ease-in; }
@keyframes pl-coin { 0% { opacity: 1; transform: translateY(-34px); } 55% { opacity: 1; transform: translateY(6px); } 70%, 100% { opacity: 0; transform: translateY(28px); } }
.pl-pigeonp { animation: pl-pwalk 16s ease-in-out infinite alternate; }
@keyframes pl-pwalk { from { transform: translateX(0); } to { transform: translateX(calc(var(--s) * 60)); } }
.pl-pigeon { animation: pl-peck 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes pl-peck { 0%, 40%, 100% { transform: rotate(0); } 48% { transform: rotate(12deg) translateY(2px); } 56% { transform: rotate(0); } 64% { transform: rotate(12deg) translateY(2px); } 72% { transform: rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  .pl-root *, .pl-root *::before, .pl-root *::after { animation: none !important; transition: none !important; }
  .pl-hint { animation: none !important; }
}

/* ---------- mobil i liggande läge: knappraden blir en kolumn till höger (issue #4) ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .pl-root { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) auto; }
  .pl-stage { border-bottom: 0; }
  .pl-bar { display: flex; align-items: center; padding: .4rem calc(.5rem + env(safe-area-inset-right, 0px)) .4rem .5rem; border-left: 3px solid var(--pl-ink); overflow-y: auto; max-width: 34vw; }
  .pl-bar-in { flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: .4rem; margin: 0; width: 100%; }
  .pl-root .pl-btn { flex: 0 0 auto; width: 100%; font-size: .9rem; padding: .3rem .6rem; }
  .pl-root .pl-btn.primary:first-child:not(:only-child) { flex-basis: auto; }
  .pl-root .pl-btn small { font-size: .66rem; }
  .pl-bubble { font-size: max(14px, calc(var(--s) * 23)); padding: .35em .7em .4em; }
  .pl-cards { align-content: flex-start; overflow-y: auto; overscroll-behavior: contain; font-size: max(10px, calc(var(--s) * 13)); gap: .5em; inset: calc(var(--s) * 28) calc(var(--s) * 8) calc(var(--s) * 8); padding: .4em .2em .6em; }
  .pl-cards[data-n='4'], .pl-cards[data-n='5'] { font-size: max(9px, calc(var(--s) * 11)); }
  .pl-cards { font-size: max(10.5px, calc(var(--s) * 13)); }
  .pl-cards[data-n='1'], .pl-cards[data-n='2'], .pl-cards[data-n='3'] { flex-wrap: nowrap; align-content: center; }
  .pl-root .pl-card { min-height: 10.4em; padding-top: 1em; width: 7.6em; }
  .pl-card-ico svg { width: 2.6em; height: 2.6em; }
  .pl-card-prog { display: none; }
  .pl-bt { max-height: calc(var(--s) * (var(--bb) - 36)); }
}