:root{--ink:#27252a;--paper:#fffdf2;--yellow:#ffdc53;--pink:#ff6b91;--blue:#5cc8e8;--green:#72c95d;--purple:#b48cff;--sky-top:#8fd9ec;--sky-bottom:#ffe8c9;--w:clamp(300px,min(94vw,calc((100svh - 270px) * 1.579)),1180px)}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:#8fd9ec;font-family:'Baloo 2',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
button{border:0;color:inherit;cursor:pointer;font:inherit;background:none}
button:focus-visible,[tabindex]:focus-visible{outline:3px dashed var(--ink);outline-offset:3px}
[hidden]{display:none!important}

/* ---------- Himinn ---------- */
.world{position:relative;display:flex;flex-direction:column;align-items:center;min-height:100svh;padding-bottom:16px;overflow-x:clip;isolation:isolate;background:linear-gradient(var(--sky-top),var(--sky-bottom))}
.world[data-time=day]{--sky-top:#6fcbee;--sky-bottom:#d9f2e8}
.world[data-time=evening]{--sky-top:#f59882;--sky-bottom:#ffd797}
.world[data-time=night]{--sky-top:#18243b;--sky-bottom:#43516b}
.world:not([data-time=night])[data-weather=storm]{--sky-top:#536474;--sky-bottom:#8b9893}
.world:not([data-time=night])[data-weather=snow]{--sky-top:#b9d3de;--sky-bottom:#eef4f5}
.sky{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
.frame-sky .sun{width:110px;top:34%}.frame-sky .moon{width:72px}
.world[data-indoor=true] .frame-sky{display:none}
.sun{position:absolute;width:132px;aspect-ratio:1;left:6%;top:30%;border:6px solid var(--ink);border-radius:50%;background:var(--yellow);box-shadow:0 0 0 13px #ffef9ab3,0 0 65px #ffdc53bf;transition:left 1.4s ease,top 1.4s ease,opacity .8s ease,transform 1.4s ease,background .8s}
.sun:before{content:'';position:absolute;inset:-34px;border:5px dashed #ffdc53b0;border-radius:50%;animation:spin 40s linear infinite}
.world[data-time=day] .sun{left:calc(50% - 66px);top:4%}
.world[data-time=evening] .sun{left:80%;top:42%;transform:scale(.82);background:#ff9d53}
.world[data-time=night] .sun{left:86%;top:70%;opacity:0;transform:scale(.45)}
.world[data-weather=cloudy] .sun{opacity:.4}.world[data-weather=storm] .sun,.world[data-weather=snow] .sun{opacity:.12}
.moon{position:absolute;right:9%;top:10%;width:92px;aspect-ratio:1;border-radius:50%;box-shadow:inset -24px 10px 0 0 #fff4c4;opacity:0;transform:rotate(-20deg) translateY(30px);transition:opacity 1s,transform 1.4s}
.world[data-time=night] .moon{opacity:1;transform:rotate(-20deg)}
.stars{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.stars:before,.stars:after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:#fff8b5;box-shadow:7vw 12vh #fff,18vw 6vh #fff8b5,29vw 17vh #fff,40vw 9vh #fff8b5,51vw 22vh #fff,63vw 7vh #fff,74vw 18vh #fff8b5,86vw 10vh #fff,95vw 25vh #fff;animation:twinkle-star 3s ease-in-out infinite}
.stars:after{top:22vh;left:4vw;transform:scale(.65);animation-delay:-1.5s}
.world[data-time=night] .stars{opacity:1}
.birds{position:absolute;inset:0;transition:opacity 1s}
.world[data-time=night] .birds,.world[data-weather=storm] .birds,.world[data-weather=snow] .birds{opacity:0}
.birds i{position:absolute;left:-60px;top:14%;width:40px;height:14px;animation:birds 28s linear infinite}
.birds i:nth-child(2){top:19%;animation-delay:-4s;scale:.7}.birds i:nth-child(3){top:11%;animation-delay:-9s;scale:.55}
.birds i:before,.birds i:after{content:'';position:absolute;top:0;width:21px;height:14px;border-top:4px solid var(--ink);border-radius:50% 50% 0 0;animation:flap .5s ease-in-out infinite alternate}
.birds i:before{left:0;transform-origin:right}.birds i:after{left:18px;transform-origin:left;animation-direction:alternate-reverse}
.weather{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.world[data-weather=cloudy] .weather-clouds,.world[data-weather=storm] .weather-storm,.world[data-weather=snow] .weather-clouds{opacity:1}
.cloud,.storm-cloud{position:absolute;width:160px;height:55px;border:5px solid var(--ink);border-radius:50px;background:#f4f4ed;box-shadow:55px -28px 0 2px #f4f4ed,52px -28px 0 7px var(--ink),104px -10px 0 #f4f4ed,104px -10px 0 5px var(--ink);animation:drift 18s linear infinite alternate}
.cloud-a{left:4%;top:20%}.cloud-b{right:18%;top:14%;transform:scale(.72);animation-duration:23s}.cloud-c{right:3%;top:36%;transform:scale(.5);animation-duration:14s}
.storm-cloud{left:12%;top:10%;width:55%;max-width:620px;background:#596572;box-shadow:100px -42px 0 10px #596572,96px -42px 0 15px var(--ink),235px -18px 0 18px #596572,235px -18px 0 23px var(--ink);animation-duration:7s}
.lightning{position:absolute;left:70%;top:17%;width:30px;height:120px;background:var(--yellow);clip-path:polygon(55% 0,100% 0,65% 40%,100% 40%,0 100%,30% 53%,0 53%);animation:flash 5s steps(1) infinite}
.precip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.precip i{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.rain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='100'%3E%3Cpath d='M12 0l-5 24M52 44l-5 24M76 12l-5 24M32 70l-5 24' stroke='%23d9f4ff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");animation:rain .45s linear infinite}
.snow{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%23fff'%3E%3Ccircle cx='14' cy='20' r='4'/%3E%3Ccircle cx='70' cy='60' r='5'/%3E%3Ccircle cx='100' cy='12' r='3'/%3E%3Ccircle cx='40' cy='96' r='4'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' fill='%23fff'%3E%3Ccircle cx='40' cy='60' r='7'/%3E%3Ccircle cx='150' cy='140' r='6'/%3E%3C/svg%3E");animation:snow 7s linear infinite}
.world[data-weather=storm] .rain,.world[data-weather=snow] .snow{opacity:1}
.world[data-indoor=true] .fx-weather{display:none}
.world[data-weather=storm] .fx-weather:after{content:'';position:absolute;inset:0;background:#fff;opacity:0;animation:flash-bg 5s steps(1) infinite}

/* ---------- Toppstika ---------- */
.topbar{position:relative;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;width:var(--w);padding:16px 0 0}
.logo{padding:0;font-size:clamp(2.5rem,5.5vw,4.4rem);font-weight:800;line-height:1;text-shadow:5px 5px 0 #fff;transform:rotate(-4deg);transition:transform .2s}
.logo:hover{transform:rotate(3deg) scale(1.05)}.logo span{color:var(--pink)}
.status{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:560px}
.status>*{min-height:40px;padding:7px 13px;border:3px solid var(--ink);border-radius:7px;color:var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);font-weight:700;white-space:nowrap}
.status .day-count{background:var(--yellow)}
.weather-badge{transform:rotate(1deg);transition:transform .15s}.weather-badge:hover{transform:rotate(-2deg) scale(1.05)}
.time-badge{background:var(--blue)!important;transform:rotate(-1deg)}

/* ---------- Sviðið ---------- */
.stage{position:relative;width:var(--w);margin-top:6px;perspective:1400px}
.page-back{position:absolute;inset:10px -10px -10px 10px;z-index:-1;border:5px solid var(--ink);background:var(--paper);transform:rotate(1deg)}
.scene-frame{position:relative;overflow:hidden;isolation:isolate;width:100%;aspect-ratio:1200/760;border:5px solid var(--ink);border-radius:6px;background:linear-gradient(var(--sky-top),var(--sky-bottom));box-shadow:10px 12px 0 #27252abf;transform-origin:left center}
.landscape{position:absolute;inset:0;display:block;width:100%;height:100%;transition:filter 1s ease}
.world[data-time=evening] .landscape{filter:saturate(1.1) sepia(.12)}
.world[data-time=night] .landscape{filter:brightness(.62) saturate(.8)}
.indoor-shade{display:none;position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 80px 100px #32233c1f}
.world[data-indoor=true] .indoor-shade{display:block}
.chapter{position:absolute;z-index:6;top:-16px;left:50%;padding:3px 14px;border:3px solid var(--ink);border-radius:5px;background:var(--yellow);font-weight:800;white-space:nowrap;transform:translateX(-50%) rotate(1deg)}
.speech{position:absolute;z-index:5;top:26px;left:50%;width:min(620px,80%);padding:12px 22px;border:4px solid var(--ink);border-radius:8px;background:#fff;box-shadow:6px 6px 0 var(--ink);font-size:clamp(1rem,1.9vw,1.45rem);line-height:1.25;text-align:center;transform:translateX(-50%) rotate(-1deg)}
.speech:after{content:'';position:absolute;left:32%;bottom:-21px;border:11px solid transparent;border-top-color:var(--ink)}
.hint{position:absolute;z-index:4;pointer-events:none;left:14px;bottom:14px;padding:4px 10px;border:2px solid var(--ink);background:#ffffffe6;font-size:.9rem;font-weight:700;transform:rotate(-1deg)}
.choice{position:absolute;z-index:8;left:50%;bottom:16px;width:min(560px,92%);padding:16px 18px 12px;border:4px solid var(--ink);border-radius:10px;background:var(--paper);box-shadow:7px 7px 0 var(--ink);transform:translateX(-50%);animation:rise .35s cubic-bezier(.2,1.4,.4,1)}
.choice-prompt{margin:0 0 12px;font-size:1.2rem;font-weight:700;line-height:1.25}
.choice-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice-options button{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:8px 12px;border:3px solid var(--ink);border-radius:8px;background:var(--yellow);box-shadow:4px 4px 0 var(--ink);font-weight:800;line-height:1.15;transition:transform .12s,box-shadow .12s}
.choice-options button:nth-child(2){background:var(--blue)}
.choice-options button:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.choice-options button:disabled{cursor:not-allowed;background:#e8e4d8;opacity:.8}
.choice-options small{margin-top:3px;font-size:.78rem;font-weight:500}
.choice-later{display:block;margin:8px auto 0;font-size:.9rem;text-decoration:underline}

/* ---------- Teikningin ---------- */
:where(.landscape,.web,.icon) :where(path,circle,rect,ellipse){stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.landscape text{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800}
.layer{transform:translate(calc(var(--px,0) * var(--d,0) * 2px),calc(var(--py,0) * var(--d,0) * 1px));transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.ln{fill:none}.thin{stroke-width:4}
.ico :is(path,circle,rect,ellipse){stroke-width:4}
.mountain{fill:#b7d7de}.snowcap{fill:#fff;stroke-width:5}
.hill{fill:#a6d879}.ground{fill:#75c95d}.ground-line{stroke-width:5;opacity:.5}
.landscape .trunk{stroke:#6c4937;stroke-width:18}.leaf{fill:#6ac35b}
.sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite}
.smoke circle{fill:#f4f4ed;stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center;animation:smoke 4.5s ease-out infinite}
.smoke circle:nth-child(2){animation-delay:1.5s}.smoke circle:nth-child(3){animation-delay:3s}
.chimney{fill:#d77f55}.house{fill:#ff986e}.landscape .roof{stroke-width:18}
.win{fill:#fff0a3;transition:fill 1s}
.world:is([data-time=evening],[data-time=night]) .lit{fill:#ffe45c}
.door{fill:#6bc4b5}.knob{fill:var(--ink)}
.door-open{fill:#3b3348}.door-light{fill:#fff3a6;stroke:none!important;opacity:.85}
.note{fill:#fff;stroke-width:4}.heart{fill:var(--pink);stroke-width:4}
.post{stroke-width:9}.mailbox{fill:var(--blue)}.flag{fill:var(--pink);stroke-width:5}
.face{stroke-width:5}
.wall{fill:#ffd66e}.window-sky{fill:var(--sky-top);transition:fill 1.2s}.sill{stroke-width:9}
.clock{fill:#fff}.hands{transform-origin:1010px 110px}
.board{fill:#3f6b52}.landscape .chalk-line{stroke:#fff6cb;stroke-width:5}
.board-text{fill:#fff6cb;font-size:150px}.ledge{stroke-width:10}
.floor{fill:#e29c70}.floor-line{stroke-width:4;opacity:.35}.desk{fill:#d77f55}
.globe{transform-box:fill-box;transform-origin:center}.globe-ball{fill:var(--blue)}
.backpack{fill:var(--pink)}
.slide-bed{stroke:var(--pink)!important;stroke-width:34!important}
.swing-frame{stroke-width:9}.chain{stroke-width:5}.seat{fill:var(--yellow)}
.swing{transform-origin:870px 330px;animation:swing 3.4s ease-in-out infinite}
.swing.high{animation-name:swing-high;animation-duration:2.6s}
.sand{fill:#f4d093}.castle{fill:#e8b96d;stroke-width:5}
.dance-wall{fill:#a7e1d6}.mirror{fill:#d8f3f5}.landscape .shine{stroke:#fff;stroke-width:12;opacity:.85}
.landscape .barre{stroke:#b07a4f;stroke-width:12}
.disco{transform-box:fill-box;transform-origin:center;animation:spin 9s linear infinite}.disco-ball{fill:#d6d9e6}
.thump{transform-box:fill-box;transform-origin:50% 100%;animation:thump .62s ease-in-out infinite}
.speaker{fill:#565269}.cone{fill:var(--pink)}
.dance-floor{fill:#edba7c}
.floor-light{stroke:none!important;opacity:.55;animation:disco-light 2.4s steps(1) infinite}.l2{animation-delay:-1.2s}
.spot{fill:#fff7c2;stroke:none!important;opacity:.55}.spot-floor{fill:#fff7c2;stroke:none!important;opacity:.85}
.shop-wall{fill:#f9d8dd}.landscape .stripe{stroke:#fff;stroke-width:22;opacity:.7}
.shop-sign{fill:#fff}.sign-text{fill:var(--pink);font-size:50px}
.shelf{fill:#fff1ae}.box{fill:#ffb27f}.box-blue{fill:var(--blue)}.box-pale{fill:#c8ebee}.can{fill:#ff805e}
.nog{fill:#ffc400;font-size:36px;filter:drop-shadow(0 0 8px #ffdc53)}
.counter{fill:#6bc4b5}.reg{fill:#44434d}.reg-screen{fill:#9dfca0}
.coin{fill:var(--yellow);transform-box:fill-box;transform-origin:center;animation:coin 1.6s ease-in-out infinite}
.balloon{transform-box:fill-box;transform-origin:50% 100%;animation:balloon 4s ease-in-out infinite}
.balloon-skin{fill:#ff5a5a}.string{stroke-width:3}.landscape .shine-line{stroke:#fff;stroke-width:6}
.tipjar{fill:#c8ebee}
.skyline{fill:#c3cbd7;stroke-width:5}
.bld{fill:#ef886e}.bld-2{fill:#ffb27f}.bld-3{fill:#f7a3b5}.bld-4{fill:#e98870}
.alley{fill:#4a4458}.alley-door{fill:var(--yellow)}.alley-glow{fill:#ffe98a;stroke:none!important;opacity:.8}
.street-sign{fill:var(--yellow)}.pole{stroke-width:9}
.sidewalk{fill:#d0ccaf}.road{fill:#5c6170}.landscape .road-line{stroke:#fff1a5;stroke-width:10}
.zebra{fill:var(--paper);stroke-width:4}
.light-box{fill:#44434d}
.lamp-r,.lamp-y,.lamp-g{fill:#6e6a78;stroke-width:4}
.lamp-r.on{fill:#ff5a5a}.lamp-r.pink{fill:var(--pink)}.lamp-g.on{fill:#72e05d}
.bench{fill:#d77f55}.lamp-post{stroke-width:12}.lamp-bulb{fill:#fff0a3}
.world:is([data-time=evening],[data-time=night]) .lamp-bulb{filter:drop-shadow(0 0 16px #ffe45c)}
.hedge{fill:#4fa851}.glow-path{fill:#fff3a6;stroke:none!important;opacity:.8}
.landscape .gate{stroke-width:9}.gate-door{fill:#c99a6a}
.trunk-fill{fill:#8a5a3e}.tree-door{fill:#5a3a28}.tree-door.open{fill:#2e2233}
.pathway{fill:#f4d093}.soil{fill:#8a5a3e}
.landscape .stem{stroke:#3f8f3a;stroke-width:6}
.grow{transform-box:fill-box;transform-origin:50% 100%;animation:grow 1.2s cubic-bezier(.3,1.6,.5,1) both}
.bloom{transform-box:fill-box;transform-origin:50% 100%;animation:grow .9s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * .12s)}
.butterfly{animation:flutter 7s ease-in-out infinite;animation-delay:calc(var(--i) * -3s)}
.butterfly path{stroke-width:4;transform-box:fill-box;transform-origin:center;animation:wing .22s ease-in-out infinite alternate}
.float-note{animation:note-float 5s ease-in-out infinite;animation-delay:calc(var(--i) * -2.5s)}
.person{transform-box:fill-box;transform-origin:50% 100%}
.bob{animation:bob 2.2s ease-in-out infinite}
.wave{animation:wave 2.6s ease-in-out infinite}
.dance{animation:dance .7s ease-in-out infinite alternate}.d1{animation-delay:-.25s}.d2{animation-delay:-.5s}
.world[data-beat=true] #sceneArt{transform-origin:600px 760px;animation:beat 1.1s ease-in-out infinite}

/* ---------- Gagnvirkt ---------- */
.hotspot,.toy,.moment{cursor:pointer;outline:none}
.hotspot,.toy{transform-box:fill-box;transform-origin:center;transition:transform .2s,filter .2s}
.hotspot:is(:hover,:focus-visible){filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 6px var(--yellow));transform:scale(1.07)}
.toy:is(:hover,:focus-visible),.moment:is(:hover,:focus-visible){filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 6px var(--yellow))}
.halo{fill:#fff;fill-opacity:0;stroke:none!important}
.extras{pointer-events:none}
.item-art{transform-box:fill-box;transform-origin:center}
.float .item-art{animation:bob 2.6s ease-in-out infinite}
.sparkle{fill:#fff;stroke-width:3!important;transform-box:fill-box;transform-origin:center;animation:twinkle 2.2s ease-in-out infinite}
.item.taken{pointer-events:none;animation:taken .45s ease-in forwards}

.marker .ring{fill:var(--yellow);stroke-width:5;transform-box:fill-box;transform-origin:center;animation:pulse 1.5s ease-in-out infinite}
.marker text{fill:var(--ink);font-size:44px}
.toy.play{animation:jiggle .6s ease}
.toy.play .globe,.toy.play .disco{animation:spin .9s cubic-bezier(.2,.8,.3,1)}
.toy.play .hands{animation:spin .9s ease-in-out}
.toy.play .zebra{fill:var(--yellow)}
.blink{animation:blink-win 4s steps(1) infinite}
.reveal :is(.hotspot,.toy,.moment){filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 14px var(--yellow))}
.reveal .item .item-art{animation:hop .5s ease 2}
.fx-wiggle .scene-frame{animation:wiggle .5s ease}
.fx-gust :is(.sway,.cloud){animation-duration:.7s}
.fx-bounce :is(.item-art,.toy,.person){animation:hop .5s ease}
.fx-hue .landscape{filter:hue-rotate(70deg) saturate(1.3)}
.shift .landscape{animation:shift .8s ease}
.world[data-weather=snow][data-indoor=false] :is(.ground,.hill){fill:#eef5f3}
.world[data-weather=snow][data-indoor=false] :is(.leaf,.hedge){fill:#cfe6d3}
.world[data-weather=snow][data-indoor=false] .mountain{fill:#e3eef2}

/* ---------- Takkar ---------- */
.controls{display:flex;gap:12px;justify-content:center;margin-top:22px}
.big-button{min-width:132px;min-height:52px;padding:10px 18px;border:4px solid var(--ink);border-radius:7px;box-shadow:5px 5px 0 var(--ink);font-size:1.15rem;font-weight:800;transition:transform .12s ease,box-shadow .12s ease}
.big-button:hover{transform:translate(-1px,-2px);box-shadow:6px 7px 0 var(--ink)}
.big-button:active{box-shadow:1px 1px 0 var(--ink);transform:translate(4px,4px)}
.look{background:var(--pink)}.fiddle{background:var(--blue)}.forward{background:var(--yellow)}

/* ---------- Taskan ---------- */
.bag{display:flex;align-items:center;gap:14px;width:var(--w);margin-top:16px;padding:10px 14px;border:4px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:5px 5px 0 var(--ink)}
.bag-title{font-size:1.2rem;font-weight:800;transform:rotate(-3deg)}
.bag-slots{display:grid;flex:1;grid-template-columns:repeat(14,minmax(0,46px));gap:6px}
.slot{display:grid;place-items:center;width:100%;aspect-ratio:1;padding:4px;border:3px dashed #27252a55;border-radius:8px;background:#fff8}
.slot.filled{border:3px solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink);transition:transform .15s}
.slot.filled:hover{transform:translateY(-3px) rotate(-4deg)}
.slot.pop{animation:slot-pop .5s cubic-bezier(.2,1.8,.4,1)}
.slot .icon{width:100%;height:100%}
.bag-side{display:flex;gap:10px;align-items:center}
.thread-button{padding:6px 12px;border:3px solid var(--ink);border-radius:7px;background:var(--purple);box-shadow:3px 3px 0 var(--ink);font-weight:800;white-space:nowrap}
.thread-button.pulse{animation:slot-pop .5s ease 3}
.quiet-button{text-decoration:underline}
.quiet .world{filter:saturate(.5)}.quiet .precip{opacity:.15}

.card{position:fixed;z-index:30;left:50%;bottom:120px;width:min(340px,92vw);padding:18px;border:4px solid var(--ink);border-radius:10px;background:var(--paper);box-shadow:7px 7px 0 var(--ink);text-align:center;transform:translateX(-50%);animation:rise .3s cubic-bezier(.2,1.4,.4,1)}
.card h3{margin:4px 0 2px;font-size:1.5rem;line-height:1}.card p{margin:6px 0;line-height:1.3}
.card-icon{width:84px;height:84px;margin:0 auto;padding:8px;border:3px solid var(--ink);border-radius:50%;background:#fff}
.card-close{position:absolute;top:6px;right:10px;font-size:1.6rem;line-height:1}
.chips{display:flex;gap:6px;justify-content:center}
.chips span{padding:1px 10px;border:2px solid var(--ink);border-radius:20px;background:var(--c);font-size:.85rem;font-weight:700}
.card-threads{font-size:.9rem;opacity:.85}

.toast{position:fixed;z-index:40;top:16px;left:50%;display:flex;align-items:center;gap:12px;padding:8px 16px;border:4px solid var(--ink);border-radius:10px;background:var(--yellow);box-shadow:5px 5px 0 var(--ink);transform:translate(-50%,-160%);transition:transform .45s cubic-bezier(.2,1.4,.4,1);pointer-events:none}
.toast.show{transform:translate(-50%,0)}
.toast small{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.toast b{display:block;font-size:1.15rem;line-height:1.1}
.toast-icons{display:flex;align-items:center}.toast-icons .icon{width:38px;height:38px}
.toast-icons i{width:18px;border-top:4px dotted var(--ink)}
.toast-mark{font-size:1.8rem}
.flyer{position:fixed;z-index:50;width:60px;height:60px;padding:6px;border:3px solid var(--ink);border-radius:50%;background:#fff;box-shadow:3px 3px 0 var(--ink);pointer-events:none}
.flyer .icon{width:100%;height:100%}

/* ---------- Sögubókin ---------- */
.book{position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:16px;background:#27252a99;overflow:auto}
.book-page{position:relative;width:min(1000px,100%);max-height:calc(100svh - 32px);overflow:auto;padding:28px 34px;border:5px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:12px 12px 0 var(--ink);animation:book-open .6s cubic-bezier(.2,.9,.3,1)}
.book-close{position:absolute;top:8px;right:14px;font-size:2rem;line-height:1}
.kicker{margin:0;font-size:.85rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6b6570}
.book h2{margin:0 0 8px;font-size:clamp(1.9rem,4vw,3rem);line-height:1}
.lede{max-width:60ch;margin:0 0 12px}
.book-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center}
.web{width:100%;max-width:440px;margin:0 auto;overflow:visible}
.web-line{fill:none;stroke-width:4;opacity:.8;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s ease forwards;animation-delay:calc(var(--k) * 30ms)}
.web-thread{fill:none;stroke:var(--ink);stroke-width:6;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s ease forwards;animation-delay:calc(.4s + var(--k) * 30ms)}
.web-node circle{fill:#fff;stroke-width:4}
.web-node{animation:pop-in .4s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--k) * 40ms);transform-box:fill-box;transform-origin:center}
.web-empty circle{fill:#fff8;stroke-width:3;stroke-dasharray:6 6;stroke:#27252a66}
.web-empty text{fill:#27252a66;font-size:26px;font-weight:800}
.web-hub circle{stroke-width:4;transition:r .6s}
.web-hub.top circle{stroke-width:7}
.web-hub text{font-size:15px;font-weight:800;fill:var(--ink)}
.web-hub.top text{font-size:18px}
.story p{margin:0 0 12px;font-size:1.12rem;line-height:1.45}
.story p:first-child{font-size:1.3rem;font-weight:700;line-height:1.3}
.story em{font-style:normal;font-weight:800;background:linear-gradient(transparent 55%,#ffdc5399 55%)}
.thread-list{display:grid;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.thread-list li{display:flex;align-items:center;gap:6px;padding:4px 10px;border:2px dashed #27252a55;border-radius:8px;opacity:.7}
.thread-list li.found{border:3px solid var(--ink);background:#fff;opacity:1;font-weight:800}
.thread-list .icon{width:28px;height:28px}
.thread-list i{display:grid;place-items:center;width:28px;height:28px;font-style:normal;font-weight:800}
.bars{display:grid;gap:6px;margin:18px 0 6px}
.bar{display:grid;grid-template-columns:90px 1fr 28px;gap:10px;align-items:center;font-weight:700}
.bar i{height:16px;border:3px solid var(--ink);border-radius:10px;background:linear-gradient(90deg,var(--c) calc(var(--v) * 100%),#fff calc(var(--v) * 100%))}
.stats{margin:10px 0 0;font-weight:700;text-align:center}
.book-actions{display:flex;justify-content:center;margin-top:14px}

/* ---------- Hreyfingar ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:.95}100%{opacity:0;transform:translate(34px,-160px) scale(1.9)}}
@keyframes swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes swing-high{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
@keyframes thump{0%,100%{transform:scale(1)}50%{transform:scale(1.03,.98)}}
@keyframes disco-light{0%{fill:#ff6b91}33%{fill:#5cc8e8}66%{fill:#ffdc53}}
@keyframes coin{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(-10px) scaleX(.3)}}
@keyframes balloon{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes grow{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes flutter{0%,100%{transform:translate(0,0)}25%{transform:translate(60px,-40px)}50%{transform:translate(120px,10px)}75%{transform:translate(50px,40px)}}
@keyframes wing{to{transform:scaleY(.35)}}
@keyframes note-float{0%,100%{transform:translate(0,0) rotate(-6deg);opacity:.9}50%{transform:translate(20px,-30px) rotate(6deg);opacity:.6}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes wave{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes dance{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-14px) rotate(8deg)}}
@keyframes beat{0%,100%{transform:scale(1)}10%{transform:scale(1.006)}}
@keyframes twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.2}50%{transform:scale(1.1) rotate(45deg);opacity:1}}
@keyframes twinkle-star{50%{opacity:.4}}
@keyframes taken{to{transform:scale(1.5);opacity:0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes jiggle{25%{transform:rotate(-6deg) scale(1.06)}50%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}}
@keyframes hop{50%{transform:translateY(-16px)}}
@keyframes blink-win{0%,90%{fill:#fff0a3}91%,95%{fill:#44434d}}
@keyframes shift{0%{filter:brightness(1.5)}100%{filter:none}}
@keyframes page-turn{0%{opacity:.2;transform:rotateY(-38deg) translateX(5%)}to{opacity:1;transform:rotateY(0) translateX(0)}}
.page-turn .scene-frame{animation:page-turn .75s cubic-bezier(.2,.75,.25,1)}
@keyframes pop{50%{transform:translateX(-50%) rotate(1deg) scale(1.05)}}
.pop{animation:pop .38s ease}
@keyframes wiggle{25%{transform:rotate(-1deg)}60%{transform:rotate(1deg)}}
@keyframes drift{to{translate:70px 12px}}
@keyframes birds{from{transform:translateX(0)}to{transform:translateX(110vw)}}
@keyframes flap{to{transform:rotate(-18deg)}}
@keyframes rain{to{background-position:-18px 100px}}
@keyframes snow{to{background-position:30px 120px,-40px 200px}}
@keyframes flash{0%,8%,12%,to{opacity:0}9%,11%{opacity:1}}
@keyframes flash-bg{0%,8.5%,11%,to{opacity:0}9%,10%{opacity:.35}}
@keyframes rise{from{opacity:0;translate:0 24px}}
@keyframes slot-pop{0%{transform:scale(.4)}60%{transform:scale(1.2) rotate(-6deg)}100%{transform:scale(1)}}
@keyframes book-open{from{opacity:0;transform:rotateX(18deg) translateY(40px)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop-in{from{transform:scale(0)}}

/* ---------- Sími ---------- */
@media (max-width:700px){
  :root{--w:100vw}
  .topbar{align-items:center;padding:10px 12px 0}
  .logo{font-size:2.5rem}
  .status{gap:4px;max-width:220px}
  .status>*{min-height:28px;padding:2px 7px;border-width:2px;box-shadow:2px 2px 0 var(--ink);font-size:.72rem}
  .stage{margin-top:14px}
  .page-back{display:none}
  .scene-frame{aspect-ratio:10/9;border-width:4px;border-right:0;border-left:0;border-radius:0;box-shadow:none}
  .speech{top:22px;width:90%;padding:8px 12px;font-size:.95rem}
  .chapter{top:-14px;font-size:.82rem}
  .hint{left:8px;bottom:8px;font-size:.72rem}
  .choice{position:relative;left:auto;bottom:auto;width:calc(100% - 20px);margin:12px auto 0;padding:12px;transform:none}
  .choice-prompt{font-size:1rem}
  .choice-options{grid-template-columns:1fr}
  .choice-options button{min-height:44px}
  .controls{gap:7px;width:100%;margin-top:12px;padding:0 10px}
  .big-button{flex:1;min-width:0;min-height:48px;padding:8px 6px;border-width:3px;font-size:.95rem}
  .bag{flex-wrap:wrap;width:calc(100vw - 20px);gap:8px;margin-top:12px;padding:8px 10px}
  .bag-title{width:100%;font-size:1rem}
  .bag-slots{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:100%}
  .slot{width:auto;height:auto;aspect-ratio:1}
  .bag-side{width:100%;justify-content:space-between}
  .book-page{padding:22px 16px}
  .book-grid{grid-template-columns:1fr;gap:10px}
  .card{bottom:24px}
  .sun{width:85px}.world[data-time=day] .sun{left:calc(50% - 42px)}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .layer{transform:none}
}