/* Utforska (explore.js): ljudknapp, pratbubblor i vinterbilden, tomtens släde, dagens nisse,
   nissesamlingen och Min rallybil. Animationer stängs av med "Rörelse av" och "minska rörelse". */

/* Ljudknappen står bredvid rörelseknappen. */
.studio-header .motion-toggle.sound-toggle{margin-left:0}
#doors.x-pointing{cursor:pointer}

/* Meddelande längst ner */
.x-toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2147483000;width:max-content;max-width:min(460px,calc(100vw - 24px));background:#153d32;color:#fff8df;border:2px solid var(--gold);border-radius:18px;padding:10px 18px;font:700 15px/1.45 Arial,sans-serif;text-align:center;box-shadow:0 8px 24px #0006;pointer-events:none}
.x-toast.show{animation:x-rise .3s ease-out}

/* Pratbubblor ovanför luckorna. Spetsen pekar på det man tryckte på. */
.x-bubble{position:absolute;z-index:8;transform:translate(-50%,-100%);transform-origin:0 0;display:flex;align-items:center;gap:6px;width:max-content;max-width:min(230px,70vw);background:#fffdf5;color:var(--ink);border:2px solid var(--ink);border-radius:16px;padding:6px 12px;font:700 15px/1.25 Arial,sans-serif;text-align:center;pointer-events:none;box-shadow:0 5px 14px #0004;animation:x-bubble 2.6s ease-out forwards}
.x-bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:-8px;border:8px solid transparent;border-top-color:var(--ink)}
.x-bubble.x-notes{color:#284b90;font-size:17px}
.x-mitten{width:24px;height:28px;flex-shrink:0;transform-origin:50% 100%;animation:x-wave .35s ease-in-out 6 alternate}

/* Effekter i vinterbilden (under luckorna, skalas med bilden) */
.village-map b{position:absolute;display:block;pointer-events:none}
.x-flake{width:calc(var(--r) * 2px * var(--s));height:calc(var(--r) * 2px * var(--s));min-width:3px;min-height:3px;translate:-50% -50%;border-radius:50%;background:#fff;box-shadow:0 0 2px #59748066;opacity:0;animation:x-fall 1.7s ease-in var(--d) forwards}
.x-spark{width:calc(30px * var(--s));height:calc(30px * var(--s));min-width:10px;min-height:10px;translate:-50% -50%;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);background:radial-gradient(circle,#fff 0 30%,#fff2b8 60%,#ffd76a);opacity:0;animation:x-spark 1.1s ease-out var(--d) forwards}
.x-shoot{width:calc(170px * var(--s));height:calc(5px * var(--s));min-height:2px;translate:-50% -50%;border-radius:3px;background:linear-gradient(90deg,transparent,#fff8d8 70%,#fff);box-shadow:0 0 6px #fff;opacity:0;animation:x-shoot 1.4s ease-out forwards}

/* Tomtens släde */
.x-sky{position:absolute;left:0;right:0;height:112px;overflow:hidden;pointer-events:none;z-index:9}
.x-sleigh{position:absolute;left:0;top:34px;width:160px;height:58px;padding:0;margin:0;border:0;background:none;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:x-fly 13s linear forwards}
.x-sleigh-bob{display:block;width:100%;height:100%;animation:x-bob 1.3s ease-in-out infinite alternate}
.x-sleigh-bob svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 3px #0d241f55)}
.x-sleigh .x-deer{transform-box:fill-box;transform-origin:50% 50%;animation:x-gallop .32s ease-in-out infinite alternate}
.x-sleigh:focus-visible{outline:3px solid #bd8e25;outline-offset:2px}
.x-sleigh-say{position:absolute;left:0;bottom:100%;margin-bottom:-6px;width:max-content;background:#fffdf5;color:var(--red);border:2px solid var(--red);border-radius:14px;padding:3px 10px;font:700 14px/1.2 Arial,sans-serif;animation:x-rise .3s ease-out}
.x-gift{position:absolute;z-index:9;width:18px;height:16px;border-radius:2px;background:linear-gradient(90deg,transparent 40%,#f1ca32 40% 60%,transparent 60%),linear-gradient(transparent 40%,#f1ca32 40% 60%,transparent 60%),#3088c7;box-shadow:0 0 0 1px #1d3f6a;pointer-events:none;animation:x-drop 2.1s ease-in forwards}

/* Dagens nisse */
.x-nisse-host{position:relative}
.x-nisse{position:absolute;z-index:12;width:32px;height:38px;padding:0;margin:0;border:0;background:none;color:inherit;transform:translate(-50%,-100%) rotate(var(--tilt,0deg));transform-origin:50% 100%;cursor:pointer;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 2px 1.5px #0006)}
.x-nisse::before{content:"";position:absolute;inset:-8px}
.x-nisse svg{display:block;width:100%;height:100%;transform-origin:50% 100%;animation:x-peek 6s ease-in-out infinite}
.x-nisse:hover svg{animation-duration:1.6s}
.x-nisse:focus-visible{outline:3px solid #bd8e25;outline-offset:3px;border-radius:4px}
.x-nisse.caught{pointer-events:none}
.x-nisse.caught svg{animation:x-caught .85s ease-in forwards}
.x-at-wordmark{width:26px;height:31px}
.x-at-help,.x-at-studio,.x-at-garage{width:30px;height:36px}

/* Ledtråden under kalendern */
.discovery-nisse svg{width:22px;height:26px}
.x-hint{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:10px;width:min(330px,calc(100% - 16px));background:#fff9ecf8;border:1px solid #b5bca8;border-bottom:4px solid #d1b66e;border-radius:8px;padding:10px 14px;box-shadow:0 7px 24px #153a2d40}
.x-hint.show{animation:x-rise .25s ease-out}
.x-hint svg{width:38px;height:46px;flex-shrink:0}
.x-hint p{margin:0;font:700 14px/1.45 Arial,sans-serif;color:var(--ink)}

/* Mitt garage: Mina nissar och Min rallybil */
.x-garage-fun{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:14px;margin:0 0 14px}
.x-card{border:1px solid var(--line);background:var(--white);border-radius:6px;padding:12px 14px;min-width:0}
.x-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.x-card h3{margin:0;font:400 22px Impact,'Arial Narrow',Arial,sans-serif;text-transform:uppercase}
.x-count{margin:0;font-weight:700;color:var(--red);font-size:14px}
.x-status,.x-next{margin:6px 0 0;font:13px/1.5 Arial,sans-serif;color:var(--muted)}
.x-status{color:var(--ink);font-weight:700}
.x-nisse-row{display:flex;flex-wrap:wrap;gap:5px;list-style:none;padding:0;margin:10px 0 2px}
.x-nisse-row li{width:30px;height:36px;border:2px dashed #c9cbbb;border-radius:50% 50% 8px 8px}
.x-nisse-row li.got{border:0}
.x-nisse-row svg{display:block;width:100%;height:100%}
.x-car-preview{position:relative;display:block;width:100%;max-width:320px;margin:6px auto 0;padding:6px 10px 2px;border:0;border-radius:8px;background:linear-gradient(#e5eef1,#f6f8f4 62%,#d7ded4 62.5%,#eef1ea);cursor:pointer}
.x-car-preview svg{display:block;width:100%;height:auto}
.x-car-preview:focus-visible{outline:3px solid #bd8e25;outline-offset:2px}
.x-car-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.x-car-actions .action{flex:2 1 160px;width:auto;margin:0;min-height:44px;font-size:13px;justify-content:center}
.x-car-actions .tool{flex:1 1 90px;margin:0;min-height:44px;font-size:13px;font-weight:700}

/* Bilen på Rallyresan */
.rally-road .road-car.x-mine{width:calc(var(--car) * 1.3);margin-left:calc(var(--car) * -.65);height:28px;top:15px;cursor:pointer;overflow:visible}
.x-hop{animation:x-hop .6s ease-out}
.rally-road.is-done .road-car.x-hop{animation:x-hop .6s ease-out}
b.x-spray{position:absolute;left:14%;bottom:4px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #b9c9cf;opacity:0;pointer-events:none;animation:x-spray .75s ease-out var(--d) forwards}

/* Målarverkstaden för bilen */
.x-car-dialog{max-width:660px;width:calc(100% - 24px);padding:18px 22px 22px;border-top-color:var(--green)}
.x-car-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.x-car-top .kicker{margin:0}
.x-car-top h2{margin:2px 0 0}
.x-car-top .action{width:auto;margin:0;min-height:48px;padding:0 20px;font-size:15px;flex-shrink:0}
.x-car-stage{margin-top:12px;border-radius:10px;padding:8px 10px 4px;background:linear-gradient(#dfeaee,#f3f6f1 64%,#d3dbcf 64.5%,#e9ede4)}
.x-car-big{display:block;width:100%;height:auto;max-height:38svh;margin:auto}
.x-car-big [data-part]{cursor:pointer;outline:none}
.x-car-big [data-part]:hover{filter:brightness(1.12)}
.x-car-big [data-part]:focus-visible{filter:drop-shadow(0 0 2.5px #bd8e25) drop-shadow(0 0 2px #bd8e25)}
.x-car .x-hit{fill:transparent;stroke:none}
.x-car .x-dab{transform-box:fill-box;transform-origin:50% 50%;animation:x-dab .35s ease-out}
.x-car-tip{margin:8px 0 0!important;min-height:1.5em;font:700 14px/1.5 Arial,sans-serif!important;color:var(--ink);text-align:center}
.x-car-palette{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px;margin:10px 0 0}
.x-swatch{aspect-ratio:1;min-height:34px;max-height:46px;width:100%;padding:0;border:3px solid #fffdf5;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px #8f9585}
.x-swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--ink);transform:scale(1.08)}
.x-car-stickers{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.x-label{font:700 13px Arial,sans-serif;margin-right:2px}
.x-sticker{min-height:40px;padding:0 12px;font-size:13px;font-weight:700;border-radius:20px}
.x-sticker[aria-pressed=true]{background:var(--green);border-color:var(--green);color:var(--paper)}
.x-car-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.x-number{display:flex;align-items:center;gap:8px;font:700 13px Arial,sans-serif;margin-right:auto}
.x-number input{width:76px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:4px;background:#fff;font:700 18px Arial,sans-serif;text-align:center}
.x-car-tools .tool{min-height:44px;padding:0 14px;font-size:13px;font-weight:700}

/* Så såg den ut på riktigt */
.x-photo-dialog{max-width:980px;width:calc(100% - 24px);padding:18px 22px 20px;border-top-color:var(--green)}
.x-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.x-photo-pair.x-solo{grid-template-columns:minmax(0,640px);justify-content:center}
.x-photo-figure{margin:0;min-width:0}
.x-photo-frame{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3}
.x-photo-frame img{display:block;width:100%;height:100%;object-fit:contain}
.x-photo-figure figcaption{margin-top:6px;font-weight:700;text-align:center}
.x-photo-figure figcaption small{font-weight:400;color:var(--muted,#5d625d)}
.x-photo-dialog .x-car-tip{margin:12px 0 0}
.x-photo-button{min-height:40px}
@media(max-width:560px){
 .x-photo-dialog{padding:14px 14px 16px;width:calc(100% - 12px)}
 .x-photo-pair{grid-template-columns:1fr;gap:10px}
 .x-photo-frame{aspect-ratio:auto;max-height:34svh}
 .x-photo-frame img{height:auto;max-height:34svh}

 .x-car-dialog{padding:14px 14px 16px;width:calc(100% - 12px)}
 .x-car-top h2{font-size:28px}
 .x-car-palette{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
 .x-swatch{min-height:40px}
 .x-number{flex:1 1 100%}
 .x-car-tools .tool{flex:1 1 0}
 .x-bubble{font-size:13px;padding:5px 10px}
 .x-sleigh{width:124px;height:45px}
 .x-toast{font-size:14px}
}
@media(max-height:560px) and (orientation:landscape){.x-photo-frame{aspect-ratio:auto;height:52svh}.x-photo-dialog .x-car-tip{display:none}.x-car-big{max-height:30svh}.x-car-palette{grid-template-columns:repeat(18,minmax(0,1fr));gap:4px}.x-swatch{min-height:28px}}

@keyframes x-rise{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes x-bubble{0%{opacity:0;scale:.5}10%{opacity:1;scale:1.08}16%{scale:1}82%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -14px}}
@keyframes x-wave{from{rotate:-24deg}to{rotate:22deg}}
@keyframes x-fall{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(calc(var(--drift) * 1px * var(--s)),calc(var(--fall) * 1px * var(--s)))}}
@keyframes x-spark{0%{opacity:1;transform:translate(0,0) scale(.3)}100%{opacity:0;transform:translate(calc(var(--dx) * 1px * var(--s)),calc(var(--dy) * 1px * var(--s))) scale(1) rotate(90deg)}}
@keyframes x-shoot{0%{opacity:0;transform:rotate(16deg) translateX(0)}15%{opacity:1}100%{opacity:0;transform:rotate(16deg) translateX(calc(380px * var(--s)))}}
@keyframes x-fly{from{transform:translateX(-180px)}to{transform:translateX(var(--w,1200px))}}
@keyframes x-bob{from{transform:translateY(-4px) rotate(-1.5deg)}to{transform:translateY(5px) rotate(1.5deg)}}
@keyframes x-gallop{from{transform:translateY(-1.5px)}to{transform:translateY(1.5px)}}
@keyframes x-drop{0%{opacity:1;transform:translateY(0) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translateY(240px) rotate(50deg)}}
@keyframes x-peek{0%,74%,100%{rotate:0deg;translate:0 0}78%{rotate:-9deg;translate:0 -2px}83%{rotate:8deg}88%{rotate:-4deg;translate:0 0}92%{rotate:0deg}}
@keyframes x-caught{0%{transform:scale(1)}30%{transform:translateY(-12px) scale(1.4)}100%{transform:translateY(-46px) scale(0) rotate(300deg);opacity:0}}
@keyframes x-hop{0%,100%{translate:0 0}30%{translate:0 -10px}55%{translate:0 0}72%{translate:0 -4px}}
@keyframes x-spray{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.7)}}
@keyframes x-dab{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}

/* Rörelse av, eller "minska rörelse" i enheten */
.quiet-motion .x-nisse svg,.quiet-motion .x-bubble,.quiet-motion .x-mitten,.quiet-motion .x-toast,.quiet-motion .x-hint,.quiet-motion .x-hop,.quiet-motion .x-car .x-dab,.quiet-motion .x-sleigh-say{animation:none!important}
@media(prefers-reduced-motion:reduce){.x-nisse svg,.x-bubble,.x-mitten,.x-toast,.x-hint,.x-hop,.x-car .x-dab,.x-sleigh-say{animation:none!important}.x-swatch[aria-pressed=true]{transform:none}}
:root:has(dialog[open]) .calendar-board .x-nisse svg{animation-play-state:paused}
@media(max-width:560px){.x-photo-helper .x-photo-label{display:none}}