/* =========================================================================
   JULIES VERDEN – v4  ·  styles.css
   -------------------------------------------------------------------------
   Z-INDEX-PLAN (alt ligger i verdenens ene stacking context, #world)
     1   gulvtæpper, vægpynt, vinduer
     2   møbelkroppe (skab, køleskab, sofaryg, seng, bordben, TV, lampe)
     3   ting inde i skabe (køleskab, køkkenskab, garderobe)
     4   låger
     5   ting i legetøjskassen
     6   siddende og liggende figurer · legetøjskassens forkant
     7   sofapuder og forkant · stolesæde · dyne
     8   borde, komfur, vask (ting man stiller noget PÅ)
     9-13 ting placeret på borde og bordplader
     20-92 frie figurer og genstande (sorteret efter Y)
     130  det man har fat i lige nu
   ========================================================================= */

:root{
  --ink:#403b49;
  --cream:#fff8e8;
  --yellow:#ffd66b;
  --pink:#ff8fb1;
  --pink-deep:#ef599b;
  --mint:#77d8b0;
  --blue:#80c9ef;
  --purple:#a98ce7;
  --wood:#684f61;
  --card:#fff9ec;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;width:100%;height:100%;overflow:hidden;
  background:#f5d57f;
  font-family:"Trebuchet MS",system-ui,sans-serif;
  color:var(--ink);
  touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;overscroll-behavior:none;
}
button{font:inherit;color:inherit;-webkit-touch-callout:none}
img{-webkit-user-drag:none;user-select:none}

.game{position:relative;width:100%;height:100%;overflow:hidden;
  background:linear-gradient(#9bdcf8 0 17%,#f9e8b5 17% 100%)}

/* ---------------------------------------------------------------- TOPBAR */
.topbar{position:absolute;top:max(10px,env(safe-area-inset-top));
  left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
  z-index:40;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;background:#fffaf0;border:4px solid #fff;
  padding:9px 16px 9px 11px;border-radius:22px;box-shadow:0 5px 0 rgba(89,69,61,.16);
  font-weight:900;font-size:clamp(17px,2.4vw,26px);letter-spacing:-.5px;pointer-events:auto}
.brand-sun{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;
  background:linear-gradient(145deg,#ffdb6b,#ff9ec4);font-size:23px;transform:rotate(12deg)}
.toolbar{display:flex;gap:8px;pointer-events:auto}
.round-btn{width:52px;height:52px;border:4px solid #fff;background:#fff8e9;border-radius:50%;
  box-shadow:0 5px 0 rgba(89,69,61,.16);font-weight:900;font-size:25px;cursor:pointer;
  transition:transform .15s ease,filter .15s ease}
.round-btn:active{transform:translateY(3px) scale(.96);box-shadow:0 2px 0 rgba(89,69,61,.16)}

/* -------------------------------------------------------------- VIEWPORT */
.viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}
.viewport.panning{cursor:grabbing}
.world{position:absolute;width:2400px;height:850px;left:0;top:0;transform-origin:0 0;
  will-change:transform;
  background:linear-gradient(#9fddfa 0 18%,#ffeab4 18% 25%,#e6c17f 25% 100%);
  border-bottom:30px solid #c98c5d}
.world-floor-shadow{position:absolute;left:0;right:0;bottom:65px;height:30px;
  background:rgba(88,53,44,.14);filter:blur(10px);pointer-events:none;z-index:1}
.cloud{position:absolute;width:130px;height:45px;background:#fff;border-radius:50px;top:70px;opacity:.9}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud:before{width:65px;height:65px;left:20px;top:-28px}
.cloud:after{width:52px;height:52px;right:18px;top:-18px}
.cloud.c1{left:440px}
.cloud.c2{left:1840px;width:104px;height:36px}

/* ------------------------------------------------------------------ RUM */
.room{position:absolute;top:150px;height:610px;border:8px solid #6a5262;
  border-bottom-width:16px;overflow:visible;box-shadow:inset 0 0 0 6px rgba(255,255,255,.28)}
.room:before{content:"";position:absolute;left:0;right:0;bottom:0;height:126px;
  background:repeating-linear-gradient(90deg,#d29b67 0 78px,#bf8559 78px 83px);
  border-top:6px solid #735769}
.room-label{position:absolute;left:24px;top:18px;background:#fff8e9;border:4px solid rgba(255,255,255,.9);
  padding:8px 14px;border-radius:18px;font-weight:900;font-size:18px;z-index:1;
  box-shadow:0 4px 0 rgba(82,55,66,.14)}
.living-room{left:80px;width:760px;
  background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,0)),
    repeating-linear-gradient(0deg,#f5b6c7 0 86px,#ef9fb7 86px 91px)}
.kitchen{left:832px;width:760px;
  background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,0)),
    repeating-linear-gradient(0deg,#a4dfcf 0 84px,#8cd2bf 84px 90px)}
.bedroom{left:1584px;width:736px;
  background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,0)),
    repeating-linear-gradient(0deg,#bcb2ef 0 84px,#a89de1 84px 90px)}

.window{position:absolute;width:180px;height:145px;border:9px solid #fff7e2;border-radius:14px;
  background:#8fd7f5;overflow:hidden;isolation:isolate;z-index:1;box-shadow:0 5px 0 rgba(70,56,70,.16)}
.window:before,.window:after{content:"";position:absolute;background:#fff7e2;z-index:5}
.window:before{width:8px;top:0;bottom:0;left:50%;transform:translateX(-50%)}
.window:after{height:8px;left:0;right:0;top:50%;transform:translateY(-50%)}
.window-living{right:45px;top:60px}
.window-kitchen{left:285px;top:52px}
.window-bed{right:44px;top:52px;background:#544a89}
.window-hill{position:absolute;border-radius:50% 50% 0 0;bottom:0}
.window-hill.h1{left:-20px;width:130px;height:62px;background:#7dc988}
.window-hill.h2{right:-24px;width:130px;height:82px;background:#58ad75}
.window-sun{position:absolute;width:45px;height:45px;border-radius:50%;background:#ffd35f;right:24px;top:18px}
.window-cloud{position:absolute;width:70px;height:24px;border-radius:30px;background:#fff;left:28px;top:28px;
  box-shadow:22px -10px 0 -3px #fff}
.window-stars{position:absolute;color:#fff0a0;font-size:36px;left:18px;top:12px}
.window-moon{position:absolute;width:48px;height:48px;border-radius:50%;background:#ffe89d;right:28px;top:24px;
  box-shadow:-15px 0 0 #544a89}

.furniture{position:absolute}
.interactive{border:0;background:none;padding:0;position:absolute;cursor:pointer;touch-action:none}

/* ---------------------------------------------------------------- STUE */
.lamp{left:54px;bottom:118px;width:95px;height:250px;z-index:2}
.lamp-shade{position:absolute;left:8px;top:13px;width:78px;height:58px;border:6px solid #684d62;
  border-radius:45% 45% 22% 22%;background:#ffd666;z-index:2}
.lamp-stand{position:absolute;width:13px;height:158px;background:#7b5f70;left:41px;top:67px;border-radius:8px}
.lamp-stand:after{content:"";position:absolute;width:72px;height:18px;background:#795c6f;left:-29px;bottom:-5px;border-radius:50%}
.lamp-glow{position:absolute;left:-30px;top:-35px;width:155px;height:135px;border-radius:50%;
  background:radial-gradient(circle,#fff2a5 0,rgba(255,233,119,.55) 42%,transparent 72%);opacity:0;transition:.25s}
.lamp.on .lamp-glow{opacity:1;animation:lampFlicker 4s ease-in-out infinite}
.lamp.on .lamp-shade{background:#fff18d}

.rug{position:absolute;border:6px solid #715262;border-radius:50%;z-index:1}
.rug-living{left:160px;bottom:24px;width:410px;height:125px;
  background:repeating-linear-gradient(90deg,#ffd86c 0 35px,#fff1aa 35px 70px)}

.sofa{left:205px;bottom:116px;width:320px;height:205px;z-index:2}
.sofa-back{position:absolute;inset:0;background:#f28caf;border:7px solid var(--wood);
  border-radius:45px 45px 24px 24px}
.sofa:before,.sofa:after{content:"";position:absolute;bottom:-24px;width:28px;height:35px;
  background:#704d47;border-radius:5px;z-index:1}
.sofa:before{left:35px}
.sofa:after{right:35px}
.sofa-cushion{position:absolute;top:58px;width:132px;height:86px;border:5px solid #6a5062;
  background:#ffacc4;border-radius:28px;z-index:7}
.sofa-cushion.left{left:19px;transform:rotate(-2deg)}
.sofa-cushion.right{right:19px;transform:rotate(2deg)}
.sofa-front{position:absolute;left:6px;right:6px;bottom:0;height:62px;background:#f79fbc;
  border:6px solid var(--wood);border-radius:16px 16px 22px 22px;z-index:7}

.coffee-table{left:342px;bottom:43px;width:180px;height:90px;z-index:8}
.table-top{position:absolute;inset:0;background:#f0b06d;border:6px solid #6b4f5f;border-radius:50%}
.coffee-table:after{content:"";position:absolute;width:18px;height:72px;background:#6e5260;left:78px;top:52px;border-radius:5px}

.tv-set{position:absolute;right:45px;bottom:122px;width:180px;height:158px;z-index:2}
.tv-screen-btn{position:absolute;left:0;right:0;top:0;height:126px;border:0;background:none;padding:0;cursor:pointer}
.tv-screen{position:absolute;inset:0;border:7px solid #664e62;border-radius:22px;background:#3c4470;
  overflow:hidden;isolation:isolate}
.tv-screen .ch{position:absolute;inset:0;opacity:0;transition:opacity .22s}
.tv-set:not(.off)[data-channel="0"] .ch0,
.tv-set:not(.off)[data-channel="1"] .ch1,
.tv-set:not(.off)[data-channel="2"] .ch2{opacity:1}
.tv-set.off .tv-screen{background:#262635}
.tv-off-face{position:absolute;inset:0;display:grid;place-items:center;color:#3d3a49;
  font-size:44px;font-weight:900;opacity:0}
.tv-set.off .tv-off-face{opacity:1}
.ch0{background:radial-gradient(circle at 50% 120%,#5a5fa8,#2c3160)}
.ch0 .star{position:absolute;color:#ffe76a;font-size:19px;font-style:normal;animation:twinkle 1.8s ease-in-out infinite}
.ch0 .s1{left:18px;top:16px}.ch0 .s2{right:22px;top:34px;animation-delay:-.6s}.ch0 .s3{left:60px;bottom:16px;animation-delay:-1.1s}
.ch0 .rocket{position:absolute;left:50%;color:#ffd0e4;font-size:30px;font-style:normal;
  transform:translateX(-50%);animation:rocketFly 3.4s linear infinite}
.ch1{background:linear-gradient(#ff9ec9,#ffd980)}
.ch1 .note{position:absolute;color:#7b3d68;font-size:24px;font-style:normal;animation:noteFloat 2.6s ease-in-out infinite}
.ch1 .n1{left:20px;bottom:8px}.ch1 .n2{left:70px;bottom:8px;animation-delay:-.9s}.ch1 .n3{right:24px;bottom:8px;animation-delay:-1.7s}
.ch1 .eq{position:absolute;left:12px;right:12px;bottom:0;height:16px;
  background:repeating-linear-gradient(90deg,#fff6c9 0 8px,transparent 8px 15px);animation:eqPulse 1.1s ease-in-out infinite}
.ch2{background:linear-gradient(#8ce0d1,#66c3e8)}
.ch2 .blob{position:absolute;width:34px;height:34px;border-radius:50%;border:4px solid #4a6a86}
.ch2 .b1{background:#ffe07a;left:16px;top:24px;animation:blobMove 3s ease-in-out infinite}
.ch2 .b2{background:#ff9ec1;left:62px;top:52px;animation:blobMove 3s ease-in-out infinite -1s}
.ch2 .b3{background:#fff;right:18px;top:28px;animation:blobMove 3s ease-in-out infinite -2s}
.tv-power{left:50%;bottom:12px;width:44px;height:28px;margin-left:-22px;border-radius:12px;
  background:#7a5f70;border:4px solid #5c4557;display:grid;place-items:center}
.tv-power span{width:12px;height:12px;border-radius:50%;background:#3f3a49;transition:.2s}
.tv-set:not(.off) .tv-power span{background:#8fe08a;box-shadow:0 0 9px #8fe08a}
.tv-leg{position:absolute;width:35px;height:12px;background:#62495c;bottom:-4px;border-radius:8px}
.tv-leg.l{left:32px;transform:rotate(-12deg)}
.tv-leg.r{right:32px;transform:rotate(12deg)}

.shelf{right:258px;top:72px;width:135px;height:185px;background:#e5976b;border:6px solid var(--wood);
  border-radius:14px;z-index:2}
.shelf-row{height:50%;border-bottom:6px solid var(--wood);display:flex;align-items:end;justify-content:center;gap:8px;padding:10px}
.shelf-row:last-child{border-bottom:0}
.book{display:inline-block;width:16px;border:3px solid #5f4b5b;border-bottom:0;border-radius:4px 4px 0 0}
.book.b1{height:50px;background:#ffdb6c}.book.b2{height:40px;background:#78cdb7}.book.b3{height:47px;background:#9d8ddd}
.plant{position:relative;width:52px;height:35px;background:#f5c37b;border:4px solid #654c5e;border-radius:6px 6px 16px 16px}
.plant i,.plant:before,.plant:after{content:"";position:absolute;width:26px;height:40px;background:#61b879;
  border:4px solid #654c5e;border-radius:50% 50% 40% 40%;bottom:24px}
.plant i{left:8px}.plant:before{left:-6px;transform:rotate(-25deg)}.plant:after{right:-6px;transform:rotate(25deg)}

/* -------------------------------------------------------------- KØKKEN */
.fridge{left:34px;bottom:116px;width:180px;height:365px;z-index:2}
.fridge-body{position:absolute;inset:0;border:7px solid #654f61;border-radius:24px;background:#f5f0de;
  box-shadow:inset 0 -90px 0 #e7dcc3}
.fridge-body .cold{position:absolute;left:62px;top:24px;font-size:40px;color:#8bd8f2;font-style:normal;opacity:0;transition:.25s}
.fridge.open .fridge-body .cold{opacity:1;animation:coldFloat 1.8s ease-in-out infinite}
.fridge-shelf{position:absolute;left:14px;right:14px;height:7px;background:#ded2b8;border-radius:4px;z-index:2}
.fridge-shelf.s1{top:121px}
.fridge-shelf.s2{top:206px}
.fridge-door{position:absolute;left:0;top:0;width:100%;height:100%;border:7px solid #654f61;border-radius:24px;
  background:linear-gradient(#fffdf5,#e8ddc8);transform-origin:left center;transition:transform .3s ease;z-index:4}
.fridge.open .fridge-door{transform:perspective(700px) rotateY(-74deg)}
.fridge-door:before{content:"";position:absolute;left:24px;right:24px;top:56px;height:6px;background:#6c5363}
.fridge-door i{position:absolute;right:16px;top:80px;width:12px;height:92px;background:#8a737b;border-radius:8px}

.cabinet{right:35px;top:72px;width:210px;height:150px;z-index:2}
.cabinet-inside{position:absolute;inset:0;border:6px solid #654f61;border-radius:14px;background:#c98f5a;
  box-shadow:inset 0 6px 0 rgba(0,0,0,.12)}
.cabinet-doors{position:absolute;inset:0;border:0;background:none;padding:0;z-index:4}
.cabinet-left,.cabinet-right{position:absolute;top:0;bottom:0;width:50%;background:#f6c27b;
  border:4px solid #654f61;transition:transform .26s ease}
.cabinet-left{left:0;transform-origin:left}
.cabinet-right{right:0;transform-origin:right}
.cabinet.open .cabinet-left{transform:perspective(350px) rotateY(-68deg)}
.cabinet.open .cabinet-right{transform:perspective(350px) rotateY(68deg)}

.counter{left:245px;right:30px;bottom:116px;height:185px;background:#efb46e;border:7px solid #654f61;
  border-radius:16px 16px 8px 8px;z-index:2}
.counter-top{position:absolute;left:-12px;right:-12px;top:-23px;height:34px;background:#f8deac;
  border:7px solid #654f61;border-radius:13px;z-index:7}
.sink{left:20px;top:-20px;width:140px;height:48px;z-index:8}
.basin{position:absolute;inset:0;border:6px solid #695064;background:#9cced7;border-radius:10px 10px 35px 35px}
.faucet{position:absolute;width:36px;height:44px;border:8px solid #6d5967;border-bottom:0;border-radius:20px 20px 0 0;left:52px;top:-42px}
.sink .water{position:absolute;top:6px;width:10px;height:20px;border-radius:50% 50% 60% 60%;
  background:#55bde8;opacity:0;font-style:normal;z-index:2}
.sink .w1{left:66px}.sink .w2{left:82px}.sink .w3{left:74px}
.sink.on .water{opacity:1;animation:waterFall .62s linear infinite}
.sink.on .w2{animation-delay:-.2s}
.sink.on .w3{animation-delay:-.4s}

.stove{position:absolute;right:16px;top:-20px;width:130px;height:52px;border:6px solid #654f61;
  border-radius:12px;background:#4d4a59;z-index:8}
.burner{position:absolute;width:40px;height:30px;border:5px solid #2f2d38;border-radius:50%;top:5px;background:#3a3843}
.burner.b1{left:16px}
.burner.b2{right:16px}
.burner.on{border-color:#ff5d44;background:#5d3730;animation:burnerGlow 1.2s ease-in-out infinite alternate}
.stove.hot:after{content:"";position:absolute;inset:-6px;border-radius:16px;
  box-shadow:0 0 22px rgba(255,140,70,.55);pointer-events:none}

.kitchen-rug{left:280px;bottom:25px;width:390px;height:92px;
  background:repeating-linear-gradient(90deg,#81cde7 0 48px,#fff0bc 48px 96px);
  border:6px solid var(--wood);border-radius:50%;z-index:1}
.dining-table{left:270px;bottom:15px;width:260px;height:120px;background:#f5ca7d;border:6px solid #654f61;
  border-radius:50%;z-index:8}
.dining-table:after{content:"";position:absolute;width:22px;height:70px;background:#684f61;left:113px;top:90px}
.plate{position:absolute;left:96px;top:22px;width:62px;height:38px;border:5px solid #8d7ca2;border-radius:50%;background:#fff5e1}
.chair{position:absolute;width:92px;height:138px;border:7px solid #674e60;background:#df8b66;
  border-radius:42px 42px 15px 15px;bottom:40px;z-index:2}
.chair:before,.chair:after{content:"";position:absolute;width:13px;height:52px;background:#674e60;bottom:-50px}
.chair:before{left:13px}.chair:after{right:13px}
.chair.ch1{left:196px}
.chair.ch2{right:76px}
.chair-front{position:absolute;left:-4px;right:-4px;bottom:-6px;height:44px;background:#e79a76;
  border:6px solid #674e60;border-radius:12px;z-index:7}

/* --------------------------------------------------------- SOVEVÆRELSE */
.rug-bed{left:85px;bottom:28px;width:430px;height:105px;
  background:repeating-radial-gradient(circle,#ffd36f 0 14px,#f39ab8 15px 29px,#9e8ee2 30px 43px)}
.bed{left:55px;bottom:115px;width:400px;height:195px;z-index:2}
.bed-head{position:absolute;left:0;top:-65px;width:90px;height:190px;background:#f0a76d;
  border:7px solid #634e60;border-radius:35px 35px 12px 12px;z-index:2}
.bed-mattress{position:absolute;left:35px;right:0;top:35px;height:120px;background:#fff7dc;
  border:7px solid #634e60;border-radius:28px;z-index:1}
.bed-duvet{position:absolute;right:18px;top:52px;width:210px;height:96px;
  background:repeating-linear-gradient(45deg,#7dcbb4 0 24px,#a8e1cf 24px 48px);
  border:5px solid #684f61;border-radius:25px;z-index:7}

.wardrobe{right:45px;bottom:116px;width:205px;height:355px;z-index:2}
.wardrobe-inside{position:absolute;inset:0;background:#c98f5a;border:7px solid #654f61;border-radius:20px;
  display:grid;place-items:center;font-size:34px;color:#f3d9a5}
.wardrobe-doors{position:absolute;inset:0;border:0;background:none;padding:0;z-index:4}
.wardrobe-left,.wardrobe-right{position:absolute;top:0;bottom:0;width:50%;background:#f6c17b;
  border:5px solid #654f61;transition:transform .28s ease}
.wardrobe-left{left:0;transform-origin:left;border-radius:20px 0 0 20px}
.wardrobe-right{right:0;transform-origin:right;border-radius:0 20px 20px 0}
.wardrobe.open .wardrobe-left{transform:perspective(600px) rotateY(-72deg)}
.wardrobe.open .wardrobe-right{transform:perspective(600px) rotateY(72deg)}

.toy-box{right:290px;bottom:116px;width:165px;height:118px;z-index:2}
.toy-box-back{position:absolute;inset:0;background:#78cdb3;border:7px solid #654f61;border-radius:18px 18px 30px 30px}
.toy-box-front{position:absolute;left:-6px;right:-6px;bottom:-4px;height:66px;background:#88dac2;
  border:7px solid #654f61;border-radius:14px 14px 26px 26px;z-index:6;display:grid;place-items:end center;padding-bottom:8px}
.toy-box-front i{background:#fff3c5;border:4px solid #654f61;border-radius:12px;padding:2px 10px;
  font-size:13px;font-weight:900;font-style:normal}

.wall-art{position:absolute;left:300px;top:65px;display:flex;gap:18px;z-index:1}
.wall-art span{width:70px;height:70px;display:grid;place-items:center;background:#fff4d5;
  border:6px solid #654f61;border-radius:16px;font-size:32px}
.wall-art span:nth-child(1){color:#ef769d;transform:rotate(-5deg)}
.wall-art span:nth-child(2){color:#f7b33c;transform:rotate(4deg)}
.wall-art span:nth-child(3){color:#806bc6;transform:rotate(-2deg)}

/* Dropzone-markering: diskret, men tydelig for et barn. */
.zone-hot{filter:drop-shadow(0 0 0 #fff)}
.zone-hot:before,.zone-hot .sofa-back,.zone-hot .table-top,.zone-hot .fridge-body,
.zone-hot .cabinet-inside,.zone-hot .wardrobe-inside,.zone-hot .toy-box-back,
.zone-hot .bed-mattress,.zone-hot .counter-top,.zone-hot .basin{box-shadow:0 0 0 5px rgba(255,236,140,.95),0 0 24px rgba(255,204,80,.85)}
.zone-hot{animation:zonePulse 1s ease-in-out infinite}

/* --------------------------------------------------------------- FIGURER */
.character{position:absolute;width:154px;height:270px;z-index:24;touch-action:none;cursor:grab;
  will-change:left,top;outline:none}
.character.is-hidden{display:none!important}
.char-shadow{position:absolute;left:29px;bottom:7px;width:96px;height:19px;border-radius:50%;
  background:rgba(82,50,62,.17);filter:blur(2px);animation:shadowPulse 3.4s ease-in-out infinite;pointer-events:none}
.char-body{position:absolute;inset:0;transform-origin:50% 92%;
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.char-lift{position:absolute;inset:0}
.char-anim{position:absolute;inset:0;transform-origin:50% 92%;animation:breath 3.4s ease-in-out infinite}
.sprite{position:absolute;left:50%;bottom:12px;width:auto;object-fit:contain;
  transform:translateX(-50%);pointer-events:none}
.blink{position:absolute;height:6px;border-bottom:3px solid #2a2027;border-radius:0 0 14px 14px;
  opacity:0;pointer-events:none;animation:blink 6.6s infinite;z-index:2}
.emote{position:absolute;left:50%;top:-16px;min-width:44px;min-height:44px;padding:5px 8px;
  display:grid;place-items:center;background:#fffaf0;border:4px solid #fff;border-radius:50% 50% 50% 16%;
  box-shadow:0 5px 0 rgba(74,45,60,.15);color:var(--pink-deep);font-size:22px;font-weight:900;
  opacity:0;transform:translate(-50%,12px) scale(.5) rotate(-8deg);pointer-events:none;z-index:5}
.emote.show{animation:emotePop .95s cubic-bezier(.2,.8,.2,1) forwards}
.zzz{position:absolute;left:64%;top:-4px;display:none;z-index:5}
.zzz i{position:absolute;font-style:normal;font-weight:900;font-size:22px;color:#fff;
  text-shadow:0 3px 0 rgba(90,60,80,.35);animation:zzzFloat 2.6s ease-in-out infinite}
.zzz i:nth-child(2){animation-delay:-.85s;font-size:18px}
.zzz i:nth-child(3){animation-delay:-1.7s;font-size:15px}
.character.asleep .zzz{display:block}
.character.asleep .char-anim{animation:breathSleep 4.4s ease-in-out infinite}
.character.asleep .blink{opacity:.95;animation:none}

.character.tilt .char-lift{animation:headTilt 1.5s ease-in-out}
.character.react .char-lift{animation:reactHop .56s cubic-bezier(.17,.84,.44,1)}
.character.landed .char-lift{animation:landBounce .42s cubic-bezier(.2,.8,.2,1)}
.character.dragging{z-index:130!important;cursor:grabbing}
.character.dragging .char-anim{animation:none}
.character.dragging .char-lift{animation:none;transform:translateY(-10px) scale(1.035) rotate(1.2deg)}
.character.dragging .char-shadow{transform:scale(1.16);opacity:.13;animation:none}
.character.dragging .sprite{filter:drop-shadow(0 14px 10px rgba(58,37,50,.3))}

/* Positurer – transformen ligger på .char-body, så hånd- og hovedslots
   stadig kan regnes ud fra figurens uroterede boks. */
.character[data-pose="sit"] .char-body{transform:translateY(30px) scale(.94)}
.character[data-pose="sit"] .char-shadow{bottom:2px;width:104px;left:25px;opacity:.5}
.character[data-pose="lie"] .char-body{transform:translate(50px,10px) rotate(-90deg) scale(.78);transform-origin:50% 76%}
.character[data-pose="lie"] .char-shadow{opacity:0}
.character[data-pose="lie"] .emote,.character[data-pose="lie"] .zzz{transform:none}
.character[data-pose="lie"] .emote{left:34%;top:-8px}

/* ------------------------------------------------------------ GENSTANDE */
.item{position:absolute;z-index:22;touch-action:none;cursor:grab;outline:none}
.item.in-closed{visibility:hidden;pointer-events:none}
.item.dragging{z-index:130!important;cursor:grabbing}
.art{position:relative;display:block;transform-origin:50% 92%;
  filter:drop-shadow(0 5px 0 rgba(74,51,62,.15));transition:transform .18s ease}
.item.dragging .art{transform:translateY(-8px) scale(1.08)!important;
  filter:drop-shadow(0 13px 9px rgba(60,42,52,.3))}
.item.landed .art{animation:itemLand .4s cubic-bezier(.2,.8,.2,1)}
.item.refused .art{animation:itemRefuse .48s ease-in-out}
.item.held .art{filter:drop-shadow(0 4px 0 rgba(74,51,62,.16))}
.item.rolling .art{animation:ballSpin .5s linear infinite}

.apple{width:58px;height:62px;border:5px solid #5d4858;border-radius:50% 50% 44% 44%;background:#ef665f}
.apple .stalk{position:absolute;width:9px;height:19px;background:#61484a;left:24px;top:-15px;transform:rotate(11deg)}
.apple .leaf{position:absolute;width:25px;height:14px;background:#67b871;border:4px solid #5d4858;
  border-radius:50%;left:29px;top:-11px;transform:rotate(-25deg)}
.apple .core-shape{display:none}
.apple.bite-1{-webkit-mask-image:radial-gradient(circle 19px at 100% 26%,transparent 97%,#000 100%);
  mask-image:radial-gradient(circle 19px at 100% 26%,transparent 97%,#000 100%)}
.apple.bite-2{-webkit-mask-image:radial-gradient(circle 27px at 100% 34%,transparent 97%,#000 100%);
  mask-image:radial-gradient(circle 27px at 100% 34%,transparent 97%,#000 100%);transform:scale(.94)}
.apple.eaten{width:28px;background:#f8eed6;border-radius:36% 36% 44% 44%;-webkit-mask-image:none;mask-image:none}
.apple.eaten .leaf{display:none}
.apple.eaten .stalk{left:9px}

.banana{width:80px;height:54px;border:8px solid #efc33d;border-top-color:transparent;
  border-radius:0 0 55px 55px;transform:rotate(-18deg)}
.banana:before,.banana:after{content:"";position:absolute;width:11px;height:14px;background:#684f51;border-radius:5px;top:18px}
.banana:before{left:-6px}.banana:after{right:-6px}
.banana .peel{display:none;position:absolute;left:6px;right:6px;top:-4px;height:22px;
  border:7px solid #f3d98c;border-bottom:0;border-radius:40px 40px 0 0}
.banana.bite-1{width:64px}
.banana.bite-2{width:48px;border-color:#e9bf46;border-top-color:transparent}
.banana.eaten{width:70px;border-color:#f0dda2;border-top-color:transparent;transform:rotate(150deg)}
.banana.eaten .peel{display:block}

.cookie{width:61px;height:61px;border:5px solid #5f4957;background:#d89b5d;border-radius:50%;
  display:grid;place-items:center}
.cookie .chips{font-size:21px;letter-spacing:3px;color:#66443f;transform:rotate(18deg)}
.cookie .crumbs{display:none;font-size:16px;letter-spacing:3px;color:#66443f}
.cookie.bite-1{-webkit-mask-image:radial-gradient(circle 18px at 100% 20%,transparent 97%,#000 100%);
  mask-image:radial-gradient(circle 18px at 100% 20%,transparent 97%,#000 100%)}
.cookie.bite-2{-webkit-mask-image:radial-gradient(circle 26px at 96% 30%,transparent 97%,#000 100%);
  mask-image:radial-gradient(circle 26px at 96% 30%,transparent 97%,#000 100%);transform:scale(.92)}
.cookie.eaten{width:38px;height:30px;border-radius:44%;-webkit-mask-image:none;mask-image:none}
.cookie.eaten .chips{display:none}
.cookie.eaten .crumbs{display:block}

.cup{width:58px;height:64px;border:5px solid #5e495a;background:#eaf6fb;border-radius:8px 8px 18px 18px;
  overflow:hidden;isolation:isolate}
.cup:after{content:"";position:absolute;right:-25px;top:12px;width:29px;height:30px;border:7px solid #5e495a;
  border-left:0;border-radius:0 18px 18px 0}
.cup .liquid{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(#7fd0ef,#4fb4e0);
  transition:height .45s ease;z-index:1}
.cup .shine{position:absolute;left:9px;top:9px;width:22px;height:15px;border-bottom:4px solid rgba(255,255,255,.85);
  border-radius:50%;z-index:2}
.cup.filled .liquid{height:66%}
.cup.filling .liquid{height:66%;transition:height 1.05s linear}
.cup.drinking{animation:cupTip .6s ease-in-out}

.pan{width:75px;height:48px;border:7px solid #5e495a;background:#454853;border-radius:50%}
.pan:after{content:"";position:absolute;width:70px;height:17px;background:#5e495a;right:-61px;top:8px;border-radius:0 12px 12px 0}
.pan .pan-inner{position:absolute;inset:7px;border:3px solid #7a7c88;border-radius:50%}
.pan .steam{position:absolute;left:50%;top:-6px;width:11px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.75);opacity:0}
.pan .steam.s2{margin-left:-16px}
.pan .steam.s3{margin-left:15px}
.pan.cooking .steam{animation:steamRise 1.9s ease-out infinite}
.pan.cooking .steam.s2{animation-delay:-.6s}
.pan.cooking .steam.s3{animation-delay:-1.2s}
.pan.cooking{box-shadow:0 6px 16px rgba(255,120,60,.5)}

.art.cooked{filter:saturate(1.3) brightness(1.07) drop-shadow(0 0 8px rgba(255,150,60,.65))}

.teddy{width:82px;height:95px}
.teddy .ear{position:absolute;top:0;width:28px;height:28px;background:#d8935d;border:5px solid #5f4858;border-radius:50%}
.teddy .ear.l{left:5px}.teddy .ear.r{right:5px}
.teddy .face{position:absolute;left:14px;top:10px;width:55px;height:55px;background:#dca16c;
  border:5px solid #5f4858;border-radius:50%;z-index:2}
.teddy .face:before{content:"•   •";position:absolute;left:11px;top:10px;font-weight:900}
.teddy .face:after{content:"▽";position:absolute;left:17px;top:23px;font-size:22px}
.teddy .body{position:absolute;left:10px;top:48px;width:62px;height:47px;background:#d8955f;
  border:5px solid #5f4858;border-radius:45% 45% 35% 35%}

.ball{width:68px;height:68px;border:6px solid #5e495a;border-radius:50%;
  background:conic-gradient(#f3748f 0 25%,#ffd55f 0 50%,#6fc4d8 0 75%,#7fca91 0)}
.ball span{position:absolute;inset:13px;border:4px solid rgba(94,73,90,.55);border-radius:50%}

.book-item{width:64px;height:78px;border:6px solid #5e495a;border-radius:6px;background:#8e7bd1;
  display:grid;place-items:center}
.book-item .spine{position:absolute;left:8px;top:0;bottom:0;width:5px;background:#67527b}
.book-item .title{font-size:18px;color:#fff2a4;font-weight:900;transform:rotate(-5deg)}

.pillow-item{width:90px;height:62px;border:6px solid #5e495a;background:#f2a7c1;border-radius:28px}
.pillow-item span{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;color:#fff8db}

.headphones{width:82px;height:72px;border:10px solid #5d4858;border-bottom:0;border-radius:45px 45px 0 0}
.headphones .pad{position:absolute;width:22px;height:38px;background:#70c5d9;border:5px solid #5d4858;
  border-radius:10px;top:35px}
.headphones .pad.l{left:-14px}.headphones .pad.r{right:-14px}

/* Reaktioner ved korte tryk */
.art.tap-bounce{animation:itemTapBounce .62s cubic-bezier(.2,.8,.2,1)}
.art.tap-hug{animation:itemTapHug .58s cubic-bezier(.2,.8,.2,1)}
.art.tap-flip{animation:itemTapFlip .62s cubic-bezier(.2,.8,.2,1)}
.art.tap-squish{animation:itemTapSquish .55s cubic-bezier(.2,.8,.2,1)}
.art.tap-wiggle{animation:itemTapWiggle .52s ease-in-out}
.art.tap-pulse{animation:itemTapPulse .62s cubic-bezier(.2,.8,.2,1)}
.art.tap-pop-item{animation:itemTapPop .48s cubic-bezier(.2,.8,.2,1)}
.art.bite-anim{animation:biteShake .5s ease-in-out}
.art.respawn{animation:itemRespawn .46s cubic-bezier(.2,.8,.2,1)}
.tap-pop{animation:interactiveTap .38s cubic-bezier(.2,.8,.2,1)}
.interactive.pressed{filter:brightness(.94)}

/* ------------------------------------------------------------------ DOCK */
.character-dock{position:absolute;z-index:50;left:50%;bottom:max(10px,env(safe-area-inset-bottom));
  transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:rgba(255,249,235,.96);
  border:5px solid #fff;border-radius:30px;padding:8px 12px;box-shadow:0 7px 0 rgba(80,58,64,.17);
  max-width:calc(100% - 24px)}
.dock-char{display:flex;align-items:center;gap:6px;border:0;background:#f8e5c2;padding:3px 9px 3px 4px;
  border-radius:18px;font-weight:900;cursor:pointer;min-width:72px;height:58px;overflow:hidden;
  transition:transform .15s ease,opacity .15s ease,background .15s ease}
.dock-char img{width:40px;height:50px;object-fit:contain;object-position:center bottom;pointer-events:none}
.dock-char small{font-size:12px}
.dock-char.inactive{opacity:.5;background:#e9e0d7}
.dock-char.inactive:after{content:"+";font-weight:900;font-size:17px;color:var(--pink-deep)}
.dock-char:active{transform:translateY(2px) scale(.97)}
.dock-tip{font-size:14px;font-weight:800;white-space:nowrap;padding:0 8px}
.reset-btn{position:relative;overflow:hidden;border:0;background:#f0d9d9;padding:10px 13px;
  border-radius:16px;font-size:12px;font-weight:900;white-space:nowrap}
.reset-btn span{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(239,104,111,.35);pointer-events:none}
.reset-btn>*{pointer-events:none}

/* ------------------------------------------------------------- FIGURVÆLGER */
.character-picker{position:absolute;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.24) 0 8%,transparent 8.5%),
    radial-gradient(circle at 85% 75%,rgba(255,255,255,.18) 0 10%,transparent 10.5%),
    linear-gradient(145deg,#ff9ac9,#f36fae);
  opacity:0;pointer-events:none;transition:opacity .2s ease}
.character-picker.open{display:flex;opacity:1;pointer-events:auto}
.picker-card{position:relative;width:min(1000px,96vw);max-height:94vh;overflow:auto;padding:22px 28px 24px;
  text-align:center;background:rgba(255,249,238,.97);border:6px solid #fff;border-radius:36px;
  box-shadow:0 15px 0 rgba(98,39,72,.18),0 25px 50px rgba(76,30,57,.18);
  transform:translateY(12px) scale(.98);animation:pickerCardIn .32s cubic-bezier(.2,.8,.2,1) forwards}
.picker-close{position:absolute;right:16px;top:14px;width:48px;height:48px;border:0;border-radius:50%;
  background:#f4dfd8;font-size:29px;font-weight:900;cursor:pointer}
.picker-kicker{display:inline-block;padding:6px 12px;border-radius:999px;background:#ffe070;color:#7a3c5e;
  font-size:12px;font-weight:900;letter-spacing:1.7px}
.picker-card h1{margin:8px 0 14px;font-size:clamp(29px,4.2vw,50px);line-height:1;color:#4a2e41;letter-spacing:-1.5px}
.picker-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:14px}
.picker-character{position:relative;min-height:290px;padding:10px 8px 12px;border:5px solid transparent;
  border-radius:26px;background:#f8e9d6;cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.pc-stage{display:flex;align-items:flex-end;justify-content:center;height:232px;overflow:hidden;
  border-radius:20px;background:linear-gradient(#ffe5f1,#fce7c8)}
.picker-character img{height:222px;max-width:100%;object-fit:contain;object-position:center bottom;
  filter:saturate(.85);transition:transform .18s ease,filter .18s ease;
  animation:pickerIdle 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
.picker-character strong{display:block;margin-top:8px;font-size:19px;color:#4b3042}
.picker-character:after{content:"";position:absolute;right:12px;top:12px;width:32px;height:32px;
  display:grid;place-items:center;border-radius:50%;background:#fff;border:3px solid #d9c7cf;color:#fff;font-weight:900}
.picker-character.selected{border-color:var(--pink-deep);background:#fff1f7;
  box-shadow:0 6px 0 rgba(219,80,141,.16);transform:translateY(-4px)}
.picker-character.selected:after{content:"✓";background:var(--pink-deep);border-color:var(--pink-deep)}
.picker-character.selected img{filter:none}
.start-game{min-width:250px;margin-top:18px;padding:15px 26px;border:0;border-radius:20px;
  background:linear-gradient(#ff75b3,#e84c95);color:#fff;box-shadow:0 6px 0 #bd3c78;
  font-size:20px;font-weight:900;cursor:pointer}
.start-game:active{transform:translateY(4px);box-shadow:0 2px 0 #bd3c78}
.start-game:disabled{background:#cfc3c9;box-shadow:0 6px 0 #a99da3;cursor:not-allowed}
.picker-version{margin-top:10px;font-size:11px;font-weight:800;color:#c3a8b6;letter-spacing:1px}

/* ------------------------------------------------------------------ TOAST */
.toast{position:absolute;z-index:70;left:50%;top:92px;transform:translate(-50%,-14px);background:#453745;
  color:#fff;border:4px solid rgba(255,255,255,.7);padding:10px 18px;border-radius:18px;font-weight:800;
  opacity:0;transition:.2s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

.rotate-hint{display:none;position:fixed;inset:0;background:#f7d56e;z-index:999;place-items:center}
.rotate-card{background:#fff8e9;border:6px solid #fff;border-radius:28px;padding:28px;text-align:center;
  box-shadow:0 8px 0 rgba(80,58,64,.18);display:flex;flex-direction:column;gap:8px;max-width:280px}
.rotate-icon{font-size:54px}
.rotate-card strong{font-size:24px}

/* ------------------------------------------------------------ ANIMATIONER */
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.008,1.014) translateY(-3px)}}
@keyframes breathSleep{0%,100%{transform:scale(1)}50%{transform:scale(1.014,1.02)}}
@keyframes shadowPulse{0%,100%{transform:scale(1);opacity:.17}50%{transform:scale(.94);opacity:.12}}
@keyframes blink{0%,45.5%,47.5%,100%{opacity:0;transform:scaleY(.2)}46%,47%{opacity:.96;transform:scaleY(1)}}
@keyframes headTilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-2.4deg) translateY(-2px)}62%{transform:rotate(1.8deg)}}
@keyframes reactHop{0%,100%{transform:translateY(0) rotate(0)}32%{transform:translateY(-16px) rotate(-3deg) scale(1.03)}
  62%{transform:translateY(-4px) rotate(2.5deg)}}
@keyframes landBounce{0%{transform:translateY(-12px) scale(1.04)}55%{transform:translateY(3px) scale(.98,1.04)}
  100%{transform:translateY(0) scale(1)}}
@keyframes emotePop{0%{opacity:0;transform:translate(-50%,12px) scale(.5) rotate(-8deg)}
  25%{opacity:1;transform:translate(-50%,-5px) scale(1.12) rotate(4deg)}
  70%{opacity:1;transform:translate(-50%,-12px) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-28px) scale(.75)}}
@keyframes zzzFloat{0%{opacity:0;transform:translate(0,6px) scale(.7)}
  30%{opacity:1}100%{opacity:0;transform:translate(16px,-34px) scale(1.1)}}
@keyframes pickerIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pickerCardIn{to{transform:translateY(0) scale(1)}}

@keyframes itemLand{0%{transform:translateY(-9px) scale(1.06)}55%{transform:translateY(3px) scale(.96,1.05)}
  100%{transform:translateY(0) scale(1)}}
@keyframes itemRefuse{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px) rotate(-4deg)}
  60%{transform:translateX(6px) rotate(3deg)}}
@keyframes itemRespawn{0%{opacity:.2;transform:scale(.3)}65%{opacity:1;transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes itemTapBounce{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-42px) rotate(16deg)}
  68%{transform:translateY(-8px) rotate(-7deg)}}
@keyframes itemTapHug{0%,100%{transform:scale(1) rotate(0)}35%{transform:scale(1.16) rotate(-7deg)}
  70%{transform:scale(1.06) rotate(6deg)}}
@keyframes itemTapFlip{0%,100%{transform:perspective(220px) rotateY(0)}50%{transform:perspective(220px) rotateY(180deg) scale(1.08)}}
@keyframes itemTapSquish{0%,100%{transform:scale(1)}38%{transform:scaleX(1.18) scaleY(.72)}68%{transform:scaleX(.92) scaleY(1.12)}}
@keyframes itemTapWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-13deg)}42%{transform:rotate(12deg)}
  65%{transform:rotate(-8deg)}82%{transform:rotate(5deg)}}
@keyframes itemTapPulse{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}70%{transform:scale(.94)}}
@keyframes itemTapPop{0%,100%{transform:scale(1)}42%{transform:translateY(-12px) scale(1.12)}72%{transform:translateY(1px) scale(.96)}}
@keyframes biteShake{0%,100%{transform:rotate(0) scale(1)}30%{transform:rotate(-9deg) scale(1.1)}65%{transform:rotate(7deg) scale(.97)}}
@keyframes ballSpin{to{transform:rotate(360deg)}}
@keyframes cupTip{0%,100%{transform:rotate(0)}45%{transform:rotate(-32deg) translateY(-6px)}}

@keyframes interactiveTap{0%,100%{transform:scale(1)}45%{transform:scale(.95) rotate(-1deg)}70%{transform:scale(1.03) rotate(1deg)}}
@keyframes zonePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.09)}}
@keyframes waterFall{0%{transform:translateY(-6px) scale(.7);opacity:0}25%{opacity:1}
  100%{transform:translateY(38px) scale(1);opacity:0}}
@keyframes burnerGlow{from{box-shadow:0 0 10px #ff7a4a inset,0 0 7px #ff7a4a}
  to{box-shadow:0 0 24px #ffb34c inset,0 0 18px #ff7a4a}}
@keyframes steamRise{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:.85}
  100%{opacity:0;transform:translateY(-34px) scale(1.5)}}
@keyframes coldFloat{0%,100%{transform:translateY(3px);opacity:.75}50%{transform:translateY(-5px);opacity:1}}
@keyframes lampFlicker{0%,100%{opacity:1}50%{opacity:.88}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.2)}}
@keyframes rocketFly{0%{bottom:-24px;opacity:0}20%{opacity:1}100%{bottom:120px;opacity:0}}
@keyframes noteFloat{0%{transform:translateY(0);opacity:.4}50%{transform:translateY(-46px);opacity:1}
  100%{transform:translateY(-86px);opacity:0}}
@keyframes eqPulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.9)}}
@keyframes blobMove{0%,100%{transform:translate(0,0)}33%{transform:translate(24px,18px)}66%{transform:translate(-14px,26px)}}

/* -------------------------------------------------------------- RESPONSIV */
@media (orientation:portrait) and (max-width:900px){.rotate-hint{display:grid}}
@media (max-height:700px){
  .picker-card{padding-top:16px;padding-bottom:16px}
  .picker-card h1{font-size:30px;margin-bottom:10px}
  .picker-character{min-height:224px}
  .pc-stage{height:176px}
  .picker-character img{height:170px}
  .start-game{margin-top:12px;padding:11px 22px;font-size:18px}
}
@media (max-width:900px){
  .picker-grid{grid-template-columns:repeat(4,minmax(112px,1fr));gap:8px}
  .picker-character{min-height:246px;padding:7px 5px}
  .pc-stage{height:196px}
  .picker-character img{height:190px}
  .dock-char{min-width:58px;padding-right:5px}
  .dock-char small{display:none}
  .dock-tip{display:none}
  .brand{font-size:18px;padding-right:10px}
  .round-btn{width:46px;height:46px;font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .char-anim,.char-shadow,.blink{animation:none!important}
}