/* Weather Charm landing — 살구빛 클레이 톤 (앱과 같은 팔레트) */
:root{
  color-scheme: light;
  --bg:#FFF3E8; --bg2:#FFE9D6; --butter:#FFF1C9; --sky:#DDEBFA;
  --card:#FFFCF8; --ink:#4A2917; --text:#6B5145; --muted:#9A8174;
  --accent:#E8894A; --accent-strong:#A84F1F; --line:rgba(168,79,31,.12);
  --shadow:0 18px 40px -18px rgba(168,79,31,.35), 0 2px 6px rgba(168,79,31,.06);
  --r:28px; --wrap:1120px;
  --font-head: system-ui, sans-serif; --font-body: system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-family:var(--font-body); font-size:17px; line-height:1.7;
  background:
    radial-gradient(900px 600px at 85% -10%, var(--butter) 0%, transparent 60%),
    radial-gradient(800px 700px at -10% 30%, var(--sky) 0%, transparent 55%),
    radial-gradient(900px 700px at 110% 80%, var(--bg2) 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent-strong)}
h1,h2,h3{font-family:var(--font-head); color:var(--ink); line-height:1.25; margin:0 0 .5em; font-weight:600; letter-spacing:-.01em}
.lang-ko h1,.lang-ko h2,.lang-ko h3{font-weight:400}
.lang-ja h1,.lang-ja h2,.lang-ja h3{font-weight:800}
h1{font-size:clamp(34px,6vw,60px)}
h2{font-size:clamp(26px,3.6vw,38px)}
h3{font-size:clamp(21px,2.4vw,26px)}
p{margin:0 0 1em}
main{max-width:var(--wrap); margin:0 auto; padding:0 20px}
section{margin:96px 0}
.card{background:var(--card); border-radius:var(--r); box-shadow:var(--shadow), inset 0 1px 0 #fff; border:1px solid var(--line)}

/* utilities: elements styled with display:flex/grid must still disappear when [hidden] */
[hidden]{display:none!important}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* header */
.top{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  max-width:var(--wrap); margin:0 auto; padding:14px 20px; backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); background:rgba(255,243,232,.72)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--font-head); font-size:21px}
.brand img{border-radius:11px; box-shadow:0 4px 10px rgba(168,79,31,.25)}
.nav{display:flex; align-items:center; gap:18px}
.nav>a{color:var(--text); text-decoration:none; font-weight:600; font-size:15px}
.nav>a:hover{color:var(--accent-strong)}
.langs{position:relative}
.langs summary{list-style:none; cursor:pointer; padding:7px 14px; border-radius:999px; background:var(--card);
  border:1px solid var(--line); font-size:14px; font-weight:600; color:var(--ink)}
.langs summary::-webkit-details-marker{display:none}
.langs summary::after{content:" ▾"; color:var(--muted)}
.langs div{position:absolute; right:0; top:calc(100% + 8px); background:var(--card); border-radius:18px; padding:8px;
  box-shadow:var(--shadow); border:1px solid var(--line); display:flex; flex-direction:column; min-width:140px}
.langs div a{padding:8px 12px; border-radius:12px; text-decoration:none; color:var(--text); font-size:15px}
.langs div a:hover,.langs div a[aria-current]{background:var(--bg2); color:var(--ink)}

/* hero */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; margin-top:40px}
.kicker{display:inline-block; font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--accent-strong);
  background:#fff; border:1px solid var(--line); padding:6px 14px; border-radius:999px; margin-bottom:20px}
.lead{font-size:clamp(17px,1.8vw,20px); max-width:34em}

.cta-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:28px}
.cta-row.center{justify-content:center}
.cta{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px; background:#1d1410; color:#fff;
  text-decoration:none; font-weight:700; font-size:17px; box-shadow:0 12px 24px -10px rgba(29,20,16,.55); transition:transform .15s}
.cta:hover{transform:translateY(-2px)}
.cta.soon{background:var(--ink); opacity:.85; cursor:default}
/* CTA variants (cta() markup unchanged, extra classes only) */
.cta.sm{padding:11px 20px; font-size:15px}
.cta.on-dark{background:#fff; color:#1d1410; box-shadow:none}
.note{font-size:14px; color:var(--muted); font-weight:600}

/* "Try it here ↓" (after the hero CTA row) */
.try-link{display:inline-flex; align-items:center; min-height:44px; margin-top:12px; padding:0 14px; border-radius:999px;
  background:rgba(255,252,248,.85); border:1px solid var(--line); color:var(--accent-strong); font-weight:700; font-size:15px;
  line-height:1.3; text-decoration:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.try-link:hover{background:#fff}
.try-link:focus-visible{outline:3px solid var(--accent-strong); outline-offset:3px}

/* features */
.features>h2,.gallery>h2,.premium>h2,.privacy>h2{text-align:center; margin-bottom:48px}
.feat{display:grid; grid-template-columns:380px 1fr; gap:56px; align-items:center; margin:0 auto 72px; max-width:960px}
.feat.rev{grid-template-columns:1fr 380px}
.feat.rev .shot{order:2}
.shot img{border-radius:32px; box-shadow:var(--shadow)}
.num{font-family:var(--font-head); font-size:15px; color:var(--accent); font-weight:700; letter-spacing:.08em}
.feat p{font-size:18px}

/* room */

/* gallery */
.strip{list-style:none; margin:0 -20px; padding:8px 20px 24px; display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory}
.strip li{flex:0 0 230px; scroll-snap-align:start}
.strip img{border-radius:22px; box-shadow:var(--shadow)}

/* premium / privacy */
.premium .sub{text-align:center; max-width:40em; margin:-28px auto 40px}
.grid{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px}
.grid.three{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid li{background:var(--card); border-radius:24px; padding:22px 24px; border:1px solid var(--line); box-shadow:var(--shadow)}
.grid strong{display:block; color:var(--ink); font-family:var(--font-head); font-size:19px; margin-bottom:4px; font-weight:600}
.lang-ko .grid strong{font-weight:400}
.grid span{font-size:15.5px}

/* teaser */
.teaser{text-align:center; padding:48px 24px}
.btn{display:inline-block; padding:12px 24px; border-radius:999px; background:var(--bg2); color:var(--accent-strong);
  font-weight:700; text-decoration:none; border:1px solid var(--line)}
.btn:hover{background:#FFDDC0}

/* faq */
.faq{max-width:820px}
.faq>h1{margin-top:48px; font-size:clamp(32px,5vw,48px)}
.qas{margin:36px 0 64px}
.qa{background:var(--card); border-radius:22px; border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:14px; padding:0 24px}
.qa summary{cursor:pointer; list-style:none; padding:20px 32px 20px 0; position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; position:absolute; right:0; top:14px; font-size:26px; color:var(--accent)}
.qa[open] summary::after{content:"–"}
.qa h2{font-size:19px; margin:0; font-family:var(--font-body); font-weight:700}
.qa p{padding-bottom:20px; margin:0}

/* footer */
.foot{max-width:var(--wrap); margin:40px auto 0; padding:40px 20px 56px; border-top:1px solid var(--line); text-align:center; font-size:14px; color:var(--muted)}
.foot nav{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin-bottom:16px}
.foot nav a{color:var(--text); text-decoration:none; font-weight:600}
.foot .biz{margin:0 0 6px; line-height:1.6}

/* root picker */
.root{display:grid; place-items:center; min-height:100vh}
.pick{padding:40px 48px; text-align:center}
.pick img{margin:0 auto 16px; border-radius:18px}
.pick ul{list-style:none; padding:0; margin:0}
.pick a{display:block; padding:8px; font-weight:700; text-decoration:none}

/* painted sky behind hero */
.sky{position:absolute; left:0; right:0; top:0; height:760px; z-index:-1;
  background:url(/assets/art/paint_sky.webp) center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(#000 35%, transparent); mask-image:linear-gradient(#000 35%, transparent); opacity:.85}
body{position:relative}
.hero-art{position:relative; max-width:400px; margin:0 auto}
.hero-phone{border-radius:40px; box-shadow:var(--shadow); transform:rotate(1.5deg)}
.fl{position:absolute; filter:drop-shadow(0 10px 14px rgba(74,41,23,.18)); animation:bob 6s ease-in-out infinite}
.f1{top:-40px; left:-56px; width:120px}
.f2{bottom:40px; left:-70px; width:130px; animation-delay:-2s}
.f3{top:120px; right:-54px; width:104px; animation-delay:-4s}
.f4{bottom:-36px; right:-40px; width:150px; animation-delay:-1s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}

/* ===== weather → charm chips + Charm Finder (#try) ===== */
.charms{text-align:center}
.charms .sub{max-width:38em; margin:0 auto 40px}
.try-hint{display:block; width:-webkit-fit-content; width:-moz-fit-content; width:fit-content; max-width:100%; margin:-16px auto 24px; padding:6px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--accent-strong); font-weight:700; font-size:15px; line-height:1.4;
  letter-spacing:.04em; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}
.sky-fs{border:0; padding:0; margin:0; min-width:0}
.chips{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.chips li{display:block; min-width:0}
/* chips scroll-margin top = tallest sticky header + 16px: the header is 68px, or 92px when the language links wrap (en/de at 320px, ja up to 390px) */
.chips label{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; scroll-margin:108px 0 16px}
.bubble{width:100%; aspect-ratio:1; border-radius:32px; background:var(--chip); display:grid; place-items:center;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8), var(--shadow); border:1px solid rgba(255,255,255,.7)}
.bubble img{width:66%; filter:drop-shadow(0 8px 10px rgba(74,41,23,.15)); transition:transform .25s}
.chips li:hover .bubble img{transform:translateY(-6px) scale(1.05)}
.chips b{font-family:var(--font-head); color:var(--ink); font-weight:600; font-size:17px;
  max-width:100%; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}
.lang-ko .chips b{font-weight:400}
/* selection only once JS has taken over (.on) — no chip looks picked without JS */
.sky-fs.on .bubble{transition:transform .2s, box-shadow .2s}
.sky-fs.on input:checked + .bubble{box-shadow:0 0 0 3px var(--accent-strong), inset 0 2px 0 rgba(255,255,255,.8), var(--shadow); transform:translateY(-4px)}
.sky-fs.on input:checked ~ b{color:var(--accent-strong)}
.sky-fs input:focus-visible + .bubble{outline:3px solid var(--accent-strong); outline-offset:3px}

.demo{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:28px; min-width:0}

/* demo card: height is fixed by .wx + .mood (+min-height), so the overlay never changes it */
.demo-card{position:relative; isolation:isolate; width:min(100%,420px); min-height:480px; padding:14px;
  display:flex; flex-direction:column; gap:14px; text-align:center;
  background:var(--card); border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--shadow), inset 0 1px 0 #fff}
.wx{position:relative; isolation:isolate; flex:none; height:180px; border-radius:20px; overflow:hidden;
  background-color:var(--chipbg, var(--butter))}
.wx-paint{position:absolute; inset:0; z-index:0; background:var(--paint) center 60%/cover no-repeat; transition:opacity .25s}
.demo-card[data-sky=storm] .wx-paint::after{content:""; position:absolute; inset:0; background:rgba(30,34,52,.32)}
.demo-card[data-sky=sun] .wx::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.45) 50%, transparent 68%);
  transform:translateX(120%); animation:wc-sheen 1.4s ease-out 1}
.wx-charm{position:absolute; z-index:2; left:16px; bottom:12px; width:84px; height:auto;
  filter:drop-shadow(0 8px 10px rgba(74,41,23,.15)); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
.wx-pill{position:absolute; z-index:2; top:12px; right:12px; margin:0; max-width:calc(100% - 24px); padding:6px 14px; border-radius:16px;
  background:rgba(255,252,248,.95); color:var(--ink); text-align:left; line-height:1.2}
.wx-pill small{display:block; font-size:12px; font-weight:800; color:var(--accent-strong)}
.wx-pill strong{display:block; font-family:var(--font-head); font-size:20px; font-weight:600; color:var(--ink); overflow-wrap:break-word}
.lang-ko .wx-pill strong{font-weight:400}

/* weather effects (fixed positions from the page data, build.py FX; app.js sets them as --x/--y %, --s px, --d/--t s, --dx px).
   WCAG 2.2.2: every ambient loop is finite and settles on its base (end) state within 5s */
.fx{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; border-radius:inherit}
.fx>*{position:absolute; left:var(--x,50%); top:var(--y,10%); pointer-events:none}
.fx .g{width:var(--s,12px); height:var(--s,12px); filter:drop-shadow(0 0 2px rgba(232,137,74,.55));
  animation:wc-twinkle 2.4s ease-in-out 1.5; animation-delay:var(--d,0s)}
.fx .g::before{content:""; position:absolute; inset:0; background:#fff;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.fx .b{width:var(--s,6px); height:var(--s,6px); border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0 20%, rgba(255,255,255,.45) 35%, rgba(160,190,220,.28) 65%, rgba(255,255,255,.6) 100%);
  box-shadow:0 1px 1px rgba(74,41,23,.18)}
.fx .r{width:6px; height:9px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; opacity:0;
  background:radial-gradient(circle at 35% 30%, #fff 0 25%, rgba(255,255,255,.55) 45%, rgba(160,190,220,.4) 100%);
  box-shadow:0 1px 1px rgba(74,41,23,.18);
  animation:wc-run var(--t,3s) cubic-bezier(.55,0,.85,.6) 1; animation-delay:var(--d,0s)}
.fx .f{width:var(--s,5px); height:var(--s,5px); border-radius:50%; background:#fff; opacity:0;
  box-shadow:0 0 2px rgba(110,140,180,.55);
  animation:wc-fall var(--t,6s) linear 1; animation-delay:var(--d,0s)}
/* snow pile on the card's top edge: base = full pile, it grows in from scaleY(0) */
.pile{display:none; position:absolute; top:-9px; left:16px; right:16px; height:18px; z-index:3; pointer-events:none;
  background:
    radial-gradient(circle at 50% 12px, #fff 9px, transparent 9.6px) 0 0/20px 18px repeat-x,
    radial-gradient(circle at 50% 13px, #fff 10.5px, transparent 11.1px) 7px 0/31px 18px repeat-x,
    linear-gradient(#fff,#fff) 0 100%/100% 8px no-repeat;
  filter:drop-shadow(0 2px 2px rgba(74,41,23,.12)); transform-origin:50% 100%}
.demo-card[data-sky=snow] .pile{display:block; animation:wc-pile 4s ease-out}

/* mood stamps */
.mood{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px}
.mood-q{font-size:20px; margin:0}
.stamps-row{display:flex; justify-content:center; gap:10px}
.stamp{position:relative; z-index:0; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:84px; min-height:44px;
  padding:6px 8px 8px; border-radius:20px; border:0; background:transparent; color:var(--ink);
  font:700 15px/1.25 var(--font-body); white-space:normal; cursor:pointer; transition:opacity .2s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none}
.stamp img{width:72px; height:72px; object-fit:contain; transition:transform .2s; pointer-events:none; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none}
.stamp[aria-pressed=true]::before{content:""; position:absolute; z-index:-1; top:3px; left:50%; width:78px; height:78px;
  margin-left:-39px; border-radius:50%; background:rgba(255,241,201,.75); box-shadow:0 0 0 3px var(--accent)}
.stamps-row.has-pick .stamp[aria-pressed=false]{opacity:.45}
.stamp.thunk img{animation:wc-thunk .26s ease-out}
.stamp:focus-visible{outline:3px solid var(--accent-strong); outline-offset:2px}
@media (hover:hover){.stamp:not([aria-pressed=true]):hover img{transform:translateY(-3px)}}
.saved{margin:0; min-height:1.6em; line-height:1.6; visibility:hidden; font-weight:700; font-size:14px; color:var(--accent-strong)}
.saved.on{visibility:visible}

/* reveal overlay (copies CharmDiscoveryView): dark scrim, clearing silhouette */
.rv{position:absolute; inset:0; z-index:5; border-radius:inherit; background:rgba(29,20,16,.94); color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 18px;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; animation:wc-fade .2s ease-out}
/* auto margins centre the column but fall back to top-aligned when it overflows (safe centring) */
.rv-found{margin:auto 0 0; font-weight:800; font-size:13px; line-height:1.3; letter-spacing:.12em}
/* small tint text: tint mixed with white keeps >= 4.5:1 over the brightest glow (pill, dots and glow keep the pure tint) */
.rv-found,.rv-how small{color:color-mix(in srgb, var(--tint) 50%, #fff)}
.rv-wait,.rv-done{margin-bottom:auto}
.rv-glow{position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at 50% 34%, var(--tint), transparent 62%);
  opacity:calc(.12 + .22*var(--p,0)); transition:opacity .25s}
.rv.is-open .rv-glow{opacity:.34}
.rv-orb{position:relative; isolation:isolate; flex:none; width:170px; height:170px; padding:0; border:0; border-radius:50%;
  background:transparent; color:inherit; display:grid; place-items:center; cursor:pointer; transition:transform .12s;
  touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent}
.rv-orb::before{content:""; position:absolute; inset:18%; z-index:-1; border-radius:50%; opacity:.55;
  background:radial-gradient(circle, var(--tint) 0 38%, transparent 72%)}
.rv-orb.bump{transform:scale(1.1)}
.rv-orb:disabled{cursor:default}
.rv-img{width:112px; height:auto; pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  filter:brightness(0) saturate(0) blur(calc(14px*(1 - var(--p,0)) + 2px));
  opacity:calc(.55 + .45*var(--p,0)); transform:scale(.8); transition:filter .25s, opacity .25s, transform .25s}
/* same function list + drop-shadow so the filter interpolates instead of jumping */
.rv.is-open .rv-img{filter:brightness(1) saturate(1) blur(0) drop-shadow(0 0 22px var(--tint)); opacity:1; transform:none;
  animation:wc-pop .4s ease-out}
.rv-ripple,.rv-burst{position:absolute; inset:0; margin:auto; width:120px; height:120px; border-radius:50%;
  border:1.5px solid var(--tint); opacity:0; pointer-events:none}
.rv-ripple{animation:wc-ripple 2.4s ease-out 2}
.rv.is-open .rv-ripple{animation:none}
.rv-burst.go{animation:wc-burst .6s ease-out}
.rv-sweep{position:absolute; inset:0; margin:auto; width:112px; height:112px; border-radius:50%; overflow:hidden; pointer-events:none}
.rv-sweep::before{content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%)}
.rv.is-open .rv-sweep::before{animation:wc-sweep .6s ease-out}
.rv-spark{position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
  background:var(--tint); opacity:0; pointer-events:none}
.rv.is-open .rv-spark{animation:wc-spark .7s ease-out}
.rv-dots{display:flex; justify-content:center; gap:8px}
.rv-dots i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45); transition:background .2s, transform .2s}
.rv-dots i.on{background:var(--tint); transform:scale(1.15)}
.rv-pill{display:inline-block; padding:3px 12px; border-radius:999px; background:var(--tint); color:#2E1A0F;
  font-weight:800; font-size:13px; line-height:1.3}
.rv-wait{display:flex; flex-direction:column; align-items:center; gap:10px}
.rv-hint{margin:0; color:rgba(255,255,255,.82); font-size:15px; line-height:1.4}
.rv-now{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.92);
  font:700 15px/1.2 var(--font-body); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.rv-now:hover{background:rgba(255,255,255,.22)}
.rv-done{display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; animation:wc-fade .3s ease-out}
.rv-name{margin:0; color:#fff; font-size:24px; line-height:1.25; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto}
.rv-how{margin:0; max-width:30em; color:rgba(255,255,255,.85); font-size:15px; line-height:1.45;
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}
.rv-how small{display:block; margin-bottom:2px; font-weight:800; font-size:12px; line-height:1.4; letter-spacing:.06em}
.rv-links{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px}
.rv-room,.rv-again{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0; border:0; background:none;
  color:#fff; font:700 15px/1.25 var(--font-body); text-align:center; text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.rv-room:hover,.rv-again:hover{text-decoration-thickness:2px}
.rv :focus-visible{outline:3px solid #fff; outline-offset:3px}
/* the result heading only receives focus programmatically (it is not a control) */
.rv-name:focus{outline:none}
/* behind the open scrim (app.js sets inert): hide the stamps, "Saved ✓" and pill text so they don't ghost through
   under the result; hidden after the .2s fade-in, layout unchanged. .saved needs its own line: .saved.on sets
   visibility:visible, which beats the inherited hidden */
.demo-card .mood[inert],.demo-card .mood[inert] .saved,.demo-card .wx[inert] .wx-pill{visibility:hidden; transition:visibility 0s .2s}
/* result state: the orb box shrinks (the charm keeps its size) so name, how-to, CTA and links fit the fixed card */
.rv:has(> .rv-done:not([hidden])) .rv-orb{width:120px; height:120px}
/* ...and tall charms (Photosynthesis, Wistful Raindrop) stay inside it instead of covering the rarity pill */
.rv:has(> .rv-done:not([hidden])) .rv-img{max-height:120px; object-fit:contain}

.demo-note{margin:0; max-width:30em; font-size:13.5px; line-height:1.5; color:var(--text); text-align:center;
  hyphens:auto; -webkit-hyphens:auto}

/* decorative charms under feature text */
.stamps{display:flex; gap:12px; align-items:flex-end; margin-top:18px}
.feat:not(.rev) .stamps{justify-content:flex-start}
.stamps img{height:auto; filter:drop-shadow(0 8px 10px rgba(74,41,23,.15))}

/* ===== room scene built from app assets (#room) ===== */
.room{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding:0; background:none; box-shadow:none; border:0}
.scene-wrap{min-width:0}
.scene{position:relative; isolation:isolate; aspect-ratio:4/3.1; border-radius:36px; overflow:hidden; box-shadow:var(--shadow);
  background:url(/assets/art/room_wall.webp) center/cover}
.scene::after{content:""; position:absolute; left:0; right:0; bottom:0; height:22%; background:linear-gradient(#d9b48f,#c99d74); box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
.scene > img{position:absolute; z-index:1}
.scene img{filter:drop-shadow(0 10px 12px rgba(74,41,23,.22))}
/* painted sky behind the window panes (pane opening of room_window.webp + ~0.5% bleed under the frame) */
.win-sky{position:absolute; z-index:0; left:27.2%; top:12.4%; width:45.6%; height:23.9%;
  background-color:#cfe3f5; background-size:cover; background-position:center}
.scene .win{top:9%; left:50%; transform:translateX(-50%); width:52%; filter:none}
.scene .on-win{top:24%; left:36%; width:11%}
.scene .on-win2{top:24.5%; left:55%; width:10%}
.scene .lamp{bottom:18%; right:6%; width:21%}
.scene .plant{bottom:17%; left:5%; width:17%}
.scene .sofa{bottom:13%; left:50%; transform:translateX(-50%); width:46%}
.scene .on-sofa{bottom:29%; left:36%; width:14%; z-index:2}
.scene .on-sofa2{bottom:29%; left:53%; width:11%; z-index:2}
.scene .floor{bottom:4%; left:21%; width:12%; z-index:2}
/* light by time of day: above furniture (z1-2), below charms (z4); no blend modes, no filters */
.tint{position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .4s}
.scene[data-time=sunset] .tint{opacity:1;
  background:radial-gradient(circle at 83% 60%, rgba(255,205,140,.28) 0, rgba(255,150,90,.16) 26%, rgba(255,130,80,.16) 100%)}
.scene[data-time=night] .tint{opacity:1;
  background:radial-gradient(circle at 83% 60%, rgba(255,200,130,.32) 0, rgba(28,30,72,0) 16%, rgba(28,30,72,.42) 34%)}

/* charm buttons (JS wraps each img[data-charm]; the position class moves to the button) */
.rc{padding:0; border:0; background:none; border-radius:50%; color:inherit; font:inherit; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.scene > .rc{position:absolute; z-index:4}
.scene > .rc.talk{z-index:6}
.rc img{position:static; width:100%; height:auto; transform-origin:50% 100%; pointer-events:none;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
.rc::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%;
  width:max(44px, calc(100% + 12px)); height:max(44px, calc(100% + 12px))}
.rc:focus-visible{outline:3px solid var(--accent-strong); outline-offset:2px; box-shadow:0 0 0 2px #fff}
.scene[data-time=night] .rc img{filter:drop-shadow(0 10px 12px rgba(74,41,23,.22)) brightness(.86)}
.zz{display:none; position:absolute; right:-14%; top:-18%; font:600 15px/1 var(--font-head); letter-spacing:.06em;
  white-space:nowrap; color:rgba(74,41,23,.6); pointer-events:none}
.scene[data-time=night] .zz{color:#fff; text-shadow:0 0 2px #1c1e48, 0 0 4px #1c1e48, 0 1px 2px #1c1e48}
.rc.asleep .zz{display:block; animation:wc-zz 3s ease-in-out 1.6}
.bub{position:absolute; z-index:2; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); width:max-content; max-width:14em;
  padding:4px 10px; border-radius:12px; background:var(--card); color:var(--ink); font:700 13px/1.3 var(--font-body);
  text-align:center; white-space:normal; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; pointer-events:none; opacity:0;
  box-shadow:0 6px 14px -6px rgba(74,41,23,.4), 0 1px 2px rgba(74,41,23,.12)}
.bub::after{content:""; position:absolute; top:100%; left:50%; margin-left:-5px; border:5px solid transparent; border-top-color:var(--card)}
.rc.talk .bub{opacity:1; animation:wc-bub .2s ease-out}
/* awake idle moments (transform only; low specificity so one-shots below always win).
   Finite (WCAG 2.2.2): each plays once when it starts to apply, then rests on its base state */
:where(.rc[data-charm=wm_crescent]:not(.asleep)) img{animation:wc-bob 4.8s ease-in-out 1}
:where(.rc[data-charm=wm_raindrop]:not(.asleep)) img{animation:wc-sway 4s ease-in-out 1}
:where(.scene[data-time=night] .rc[data-charm=ts_night_owl]:not(.asleep)) img{animation:wc-owl 3s ease-in-out 1}
.rc[data-charm=ts_rainy_snail]:not(.asleep){animation:wc-crawl 2.4s ease-in-out 2 alternate}
.scene[data-time=night] .rc[data-charm=pr_dawn_star]:not(.asleep)::after{content:""; position:absolute; z-index:-1; inset:-22%;
  border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(194,158,245,.55) 0, rgba(194,158,245,0) 70%);
  animation:wc-glow 2.6s ease-in-out 1.5}
.rc.asleep img{animation:wc-breathe 3s ease-in-out 1}
/* one-shot classes (added and removed by app.js timers) */
.rc.drop img{animation:wc-drop .6s ease-in}
.rc.hop img{animation:wc-hop .45s ease-out}
.rc.hop2 img{animation:wc-hop2 .9s ease-out}
.rc.boing img{animation:wc-boing .65s ease-out}
.rc.wobble img{animation:wc-wobble .4s ease-in-out}
.rc.ring::after{content:""; position:absolute; left:50%; top:50%; width:150%; aspect-ratio:1; margin:-75% 0 0 -75%;
  border-radius:50%; pointer-events:none; opacity:0;
  background:repeating-conic-gradient(#ffd27a 0 7deg, transparent 7deg 30deg);
  -webkit-mask:radial-gradient(circle closest-side, transparent 70%, #000 74% 88%, transparent 92%);
  mask:radial-gradient(circle closest-side, transparent 70%, #000 74% 88%, transparent 92%);
  animation:wc-ring .9s ease-out}
.rc.nudge::before{animation:wc-nudge 1.6s ease-out 3}

/* the charm you just found lands here */
.slot{position:absolute; z-index:4; left:58%; bottom:3%; width:13%; aspect-ratio:1; pointer-events:none}
.slot > .rc{position:relative; display:block; width:100%; pointer-events:auto}
.room-news{position:absolute; z-index:7; top:4%; left:50%; transform:translateX(-50%); margin:0; display:flex; align-items:center; gap:8px;
  width:max-content; max-width:88%; padding:6px 14px 6px 8px; border-radius:999px; background:rgba(255,252,248,.95);
  color:var(--ink); font:700 14px/1.3 var(--font-body); text-align:left; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto;
  box-shadow:0 8px 18px -8px rgba(74,41,23,.4), 0 1px 2px rgba(74,41,23,.1); pointer-events:none; animation:wc-news .3s ease-out}
.room-news:empty{display:none}
.room-news img{width:24px; height:24px; flex:none; object-fit:contain; filter:none}

/* room controls */
.room-ctl{margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.room-row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px}
.tod{margin:0; padding:4px; min-width:0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px;
  background:var(--card); border:1px solid var(--line); border-radius:999px}
.tod label{position:relative}
.tod span{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border-radius:999px;
  font-weight:700; font-size:15px; line-height:1.2; color:var(--ink); cursor:pointer; white-space:nowrap;
  -webkit-tap-highlight-color:transparent; transition:background .15s, box-shadow .15s}
.tod span:hover{background:rgba(255,233,214,.6)}
.tod input:checked + span{background:var(--bg2); box-shadow:inset 0 0 0 2px var(--accent-strong)}
.tod input:focus-visible + span{outline:3px solid var(--accent-strong); outline-offset:2px}
.now{font-style:normal; font-weight:800; font-size:11px; line-height:1.4; padding:1px 7px; border-radius:999px;
  background:var(--accent-strong); color:#fff; letter-spacing:.02em}
.shake{display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 18px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); color:var(--accent-strong); font:700 15px/1.2 var(--font-body);
  box-shadow:var(--shadow); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.shake:hover{background:#fff}
.shake:active{transform:scale(.97)}
.shake svg{flex:none}
.shake:focus-visible{outline:3px solid var(--accent-strong); outline-offset:3px}
.room-cap{margin:0; min-height:3.2em; max-width:30em; font-size:15px; line-height:1.5; color:var(--text);
  hyphens:auto; -webkit-hyphens:auto}
.room-hint{margin:0; font-size:14px; line-height:1.5; color:var(--text)}
.room-txt p{font-size:18px}

/* ===== grow ===== */
.grow{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:48px}
.grow-stage{min-width:0}
.grow-art{display:flex; align-items:center; justify-content:center; gap:14px}
.grow-art figure{text-align:center}
.grow-art img{margin:0 auto; filter:drop-shadow(0 12px 14px rgba(74,41,23,.18))}
.grow-art figcaption{margin-top:8px; font-weight:700; color:var(--accent-strong); font-size:15px}
.arrow{width:70px; height:14px; border-radius:99px; flex:none;
  background:linear-gradient(90deg,#ff9aa8,#ffd27a,#9ee6a8,#8fc9ff,#b9a3ff); position:relative}
.arrow::after{content:""; position:absolute; right:-10px; top:-9px; border:16px solid transparent; border-left:20px solid #b9a3ff; border-right:0}
.g1,.g3{position:relative}
.g1 img{transform:scale(var(--gs,1)); transform-origin:50% 100%; transition:transform .3s, filter .2s}
.g1.big{--gs:1.08}
.g1.hop img{animation:wc-ghop .45s ease-out}
.g1.flash img{filter:drop-shadow(0 12px 14px rgba(74,41,23,.18)) brightness(1.6)}
.g-heart{position:absolute; left:50%; top:8%; transform:translate(-50%,0); color:var(--accent); font-size:20px; line-height:1;
  opacity:0; pointer-events:none}
.g-heart.go{animation:wc-heart .8s ease-out}
.g3.locked img{filter:brightness(0); opacity:.22}
.g3.locked::after{content:"?"; content:"?" / ""; position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  font:600 44px/1 var(--font-head); color:var(--accent-strong); pointer-events:none}
.g3.unlock img{animation:wc-gpop .5s ease-out}
/* prism ring: a square centred on the stage-3 art (not the caption), so the ring stays round */
.g3.unlock::before{content:""; position:absolute; z-index:1; left:50%; top:0; width:120%; aspect-ratio:1; margin:-10% 0 0 -60%;
  border-radius:50%; pointer-events:none; opacity:0;
  background:conic-gradient(#ff9aa8,#ffd27a,#9ee6a8,#8fc9ff,#b9a3ff,#ff9aa8);
  -webkit-mask:radial-gradient(circle, transparent 58%, #000 60% 66%, transparent 68%);
  mask:radial-gradient(circle, transparent 58%, #000 60% 66%, transparent 68%);
  animation:wc-gring .7s ease-out}
.grow-ctl{margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.pill.prism{display:inline-block; padding:3px 12px; border-radius:999px; border:1px solid var(--line);
  background:linear-gradient(90deg,#ffd6de,#ffe9b8,#d4f5da,#d5e9ff,#e6dcff); color:var(--ink); font-weight:800; font-size:13px; line-height:1.4}
.pips{display:flex; gap:8px}
.pips i{width:10px; height:10px; border-radius:50%; background:transparent; box-shadow:inset 0 0 0 1.5px var(--accent-strong); transition:background .2s}
.pips i.on{background:var(--accent-strong)}
.grow-btn{display:inline-flex; align-items:center; justify-content:center; max-width:100%; min-height:48px;
  font:700 16px/1.3 var(--font-body); white-space:normal; text-wrap:balance; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.grow-btn:focus-visible{outline:3px solid var(--accent-strong); outline-offset:3px}
.grow-status{margin:0; min-height:4.5em; max-width:24em; font-size:15px; line-height:1.5; color:var(--text);
  hyphens:auto; -webkit-hyphens:auto}

/* premium banner */
.banner{height:170px; border-radius:32px; background-size:cover; background-position:center; margin-bottom:40px;
  display:flex; align-items:flex-end; justify-content:center; box-shadow:var(--shadow)}
.banner img{width:140px; margin-bottom:-36px; filter:drop-shadow(0 12px 14px rgba(74,41,23,.25))}

/* teaser over painted meadow */
.teaser.meadow{background-size:cover; background-position:center; border-radius:36px; padding:64px 20px; box-shadow:var(--shadow)}
.teaser .inner{max-width:560px; margin:0 auto; padding:40px 24px; text-align:center; background:rgba(255,252,248,.92)}
.appicon{border-radius:22px; margin:0 auto 16px; box-shadow:0 10px 20px rgba(74,41,23,.2)}

/* ===== app dock: shown only while no other download button is in view (no backdrop-filter) ===== */
.dock{position:fixed; z-index:20; left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px; padding:10px 8px 10px 12px;
  background:rgba(255,252,248,.98); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  transition:transform .22s, opacity .22s}
.dock.out{transform:translateY(calc(100% + 24px)); opacity:0}
.dock img{flex:none; width:40px; height:40px; border-radius:10px}
.dock p{flex:1; min-width:0; margin:0; line-height:1.3}
.dock strong{display:block; color:var(--ink); font-family:var(--font-head); font-size:16px; font-weight:600}
.lang-ko .dock strong{font-weight:400}
.dock p span{display:block; font-size:13px; color:var(--text); overflow-wrap:break-word}
.dock-get{flex:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px;
  border-radius:999px; background:#1d1410; color:#fff; font-weight:700; font-size:15px; line-height:1.2; text-decoration:none;
  white-space:nowrap; touch-action:manipulation}
.dock-x{flex:none; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--text); font-size:22px; line-height:1; cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent}
.dock-x:hover{background:var(--bg2)}
.dock-get:focus-visible,.dock-x:focus-visible{outline:3px solid var(--accent-strong); outline-offset:2px}

/* closing the dock may move focus to the footer (tabindex=-1); no ring on the landmark itself */
.foot[tabindex="-1"]:focus{outline:none}
/* sticky header clearance for in-page links */
#try,#room{scroll-margin-top:84px}
/* offscreen sections: every animation inside pauses (app.js toggles .is-live) */
.anim-scope:not(.is-live) *,.anim-scope:not(.is-live) *::before,.anim-scope:not(.is-live) *::after{animation-play-state:paused!important}

/* ===== keyframes — RULE: an element's base style is always the END state
   (vanishing effects rest at opacity 0, persisting states animate FROM their start),
   so the global reduced-motion rule (animation:none) always leaves a complete, static state. ===== */
@keyframes wc-sheen{from{transform:translateX(-120%)}}
@keyframes wc-twinkle{0%,100%{opacity:.4; transform:scale(.4)}50%{opacity:1; transform:scale(1)}}
@keyframes wc-run{0%{opacity:0; transform:translateY(0)}12%,78%{opacity:1}100%{opacity:0; transform:translateY(160px)}}
@keyframes wc-fall{0%{opacity:0; transform:translate(0,-10px)}10%,85%{opacity:1}100%{opacity:0; transform:translate(var(--dx,0px),190px)}}
@keyframes wc-pile{from{transform:scaleY(0)}}
@keyframes wc-thunk{0%{transform:scale(1.18)}60%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes wc-fade{from{opacity:0}}
@keyframes wc-pop{from{transform:scale(1.08)}}
@keyframes wc-ripple{0%{opacity:.6; transform:scale(.75)}100%{opacity:0; transform:scale(2.1)}}
@keyframes wc-burst{0%{opacity:.9; transform:scale(.9)}100%{opacity:0; transform:scale(2.2)}}
@keyframes wc-sweep{0%{opacity:1; transform:translateY(-100%)}100%{opacity:1; transform:translateY(100%)}}
@keyframes wc-spark{0%{opacity:1; transform:translate(0,0) scale(1)}100%{opacity:0; transform:translate(var(--dx,0px),var(--dy,0px)) scale(.6)}}
@keyframes wc-zz{0%{opacity:0; transform:translate(-3px,6px) scale(.85)}25%,70%{opacity:1; transform:none}100%{opacity:0; transform:translate(3px,-6px)}}
@keyframes wc-breathe{50%{transform:scale(1.03)}}
@keyframes wc-bub{from{opacity:0; transform:translateX(-50%) scale(.7)}}
@keyframes wc-bob{25%{transform:translateY(-5px)}75%{transform:translateY(5px)}}
@keyframes wc-sway{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes wc-crawl{from{transform:none}to{transform:translateX(16%)}}
@keyframes wc-owl{0%,72%,100%{transform:none}82%{transform:translateY(-10px)}92%{transform:scale(1.05,.95)}}
@keyframes wc-glow{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes wc-drop{0%{transform:translateY(-160%)}70%{transform:scale(1.1,.85)}100%{transform:none}}
@keyframes wc-hop{0%,100%{transform:none}40%{transform:translateY(-18px)}75%{transform:scale(1.06,.94)}}
@keyframes wc-hop2{0%,50%,100%{transform:none}20%,70%{transform:translateY(-18px)}}
@keyframes wc-boing{0%,100%{transform:none}15%{transform:scale(1.12,.86)}35%{transform:translateY(-14px) scale(.94,1.06)}
  55%{transform:scale(1.08,.92)}75%{transform:translateY(-6px)}}
@keyframes wc-wobble{0%,100%{transform:none}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes wc-ring{0%{opacity:1; transform:scale(.6) rotate(0)}100%{opacity:0; transform:scale(1.4) rotate(40deg)}}
@keyframes wc-nudge{0%{box-shadow:0 0 0 0 rgba(232,137,74,.7)}100%{box-shadow:0 0 0 14px rgba(232,137,74,0)}}
@keyframes wc-news{from{opacity:0; transform:translate(-50%,-8px)}}
@keyframes wc-ghop{40%{transform:translateY(-14px) scale(var(--gs,1))}}
@keyframes wc-heart{0%{opacity:1; transform:translate(-50%,0) scale(.6)}100%{opacity:0; transform:translate(-50%,-36px) scale(1)}}
@keyframes wc-gpop{0%{transform:scale(.85)}60%{transform:scale(1.06)}100%{transform:none}}
@keyframes wc-gring{0%{opacity:1; transform:scale(.6)}100%{opacity:0; transform:scale(1.5)}}

@media (min-width:861px){
  .try{display:grid; grid-template-columns:minmax(0,520px) minmax(0,420px); gap:40px; justify-content:center; align-items:center}
  .try .chips{grid-template-columns:repeat(3,1fr)}
  .demo{margin-top:0}
  .wx{height:200px}
  .rv-img{width:128px}
  .rv:has(> .rv-done:not([hidden])) .rv-orb{width:132px; height:132px}
  .rv:has(> .rv-done:not([hidden])) .rv-img{max-height:132px}
  .dock{left:auto; right:24px; width:380px}
}

@media (max-width:860px){
  .chips{grid-template-columns:repeat(3,1fr)}
  .room,.grow{grid-template-columns:minmax(0,1fr); text-align:center}
  .grow{padding:32px 20px}
  /* grow overflow fix: two figures + arrow fit 295px (375) and 240px (320) */
  .grow-art{gap:8px}
  .grow-art figure{min-width:0; flex:0 1 auto}
  .grow-art img{width:min(104px,28vw); max-width:none}
  .arrow{width:min(40px,9vw)}
  .grow-art figcaption{font-size:14px; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere}
  .stamps,.feat:not(.rev) .stamps{justify-content:center}
  .stamps img{max-width:70px}
  /* the floating hero charms poke past the screen edge: clip them without making main a scroll container */
  main{overflow-x:clip}
  .hero-art{max-width:280px}
  .f1{width:84px; left:-36px} .f2{width:90px; left:-44px} .f3{width:74px; right:-34px} .f4{width:104px; right:-28px}
  .sky{height:560px}

  body{font-size:16px}
  section{margin:72px 0}
  .hero{grid-template-columns:1fr; gap:32px; text-align:center; margin-top:24px}
  .hero .lead{margin:0 auto}
  .hero .cta-row{justify-content:center}
  .hero-img{max-width:340px; margin:0 auto}
  .feat,.feat.rev{grid-template-columns:1fr; gap:24px; text-align:center}
  .feat.rev .shot{order:0}
  .shot{max-width:300px; margin:0 auto}
  .nav{gap:12px}
  .brand span{font-size:18px}
}

/* phones: a tighter result state so German name + how-to + CTA + wrapped links fit the fixed card */
@media (max-width:480px){
  .rv{gap:8px; padding:14px 12px}
  .rv-done{gap:6px}
  .rv-links{gap:0 14px}
  .rv:has(> .rv-done:not([hidden])) .rv-orb{width:100px; height:100px}
  .rv:has(> .rv-done:not([hidden])) .rv-img{width:96px; max-height:100px}
}
/* small phones (iPhone SE 1st gen and other 320px screens) */
@media (max-width:359px){
  /* a little extra reserved height (same in every state) so the longest German result fits */
  .demo-card{min-height:500px}
  .stamps-row{gap:6px}
  .stamp{min-width:0; flex:1 1 0; padding:6px 4px 8px}
  .stamp img{width:64px; height:64px}
  .stamp[aria-pressed=true]::before{width:70px; height:70px; margin-left:-35px}
}
/* short landscape screens: the news pill sits just above the floor slot so it is on screen with the drop */
@media (max-height:520px){.room-news{top:auto; bottom:26%}}
/* 320px: keep the dock slim (one-line name, smaller icon and gaps) */
@media (max-width:359px){
  .dock{gap:6px; padding-left:10px}
  .dock img{width:32px; height:32px}
  .dock-get{padding:0 12px}
  .dock strong{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}
figure{margin:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important; animation:none!important; scroll-behavior:auto!important}}