/* Public first run. Evening by default; the room is always the biggest thing on screen. */
@font-face{font-family:'Cormorant SC';src:url('fonts/cormorantsc.ttf') format('truetype');font-weight:400 600;font-display:swap}
:root{--night:#2a2b5c;--night-2:#3a3a72;--paper:#fff8ec;--paper-2:#f3eadb;--ink:#292c56;--ink-2:#57516d;--amber:#e3a35f;--line:#c9bfdc;--hand-max:1040px;--hand-h:216px}
body{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;background:linear-gradient(180deg,#232452 0%,var(--night) 46%,#35335f 100%);color:var(--ink);--alive:0}
body[data-look=classic]{--night:#e6e2f7;--night-2:#d9d3f1;background:linear-gradient(180deg,#ece8fa,#e2ddf4)}
body[data-look=watercolour]{--night:#ecd2b6;--night-2:#e5c6a5;background:linear-gradient(180deg,#f1dcc4,#e8cbab)}

/* top line: name, the four steps, units and mood */
.top{display:flex;align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-left)) 6px;color:#efe6ff;min-width:0}
body:not([data-look=evening]) .top{color:var(--ink)}
.brand{font:600 21px/1 'Cormorant SC',Georgia,serif;letter-spacing:.04em}
.path{display:flex;align-items:center;gap:4px;margin:0 auto;min-width:0}
.path button{min-height:34px;padding:4px 8px;background:transparent;border:0;border-radius:999px;color:inherit;opacity:.62;font-size:13px;font-weight:600;letter-spacing:.02em;gap:5px}
.path button:hover{background:#ffffff14;opacity:.9}
.path button[aria-current=step]{opacity:1;background:#ffffff1f}
body:not([data-look=evening]) .path button[aria-current=step]{background:#292c5614}
.path .n{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid currentColor;font-size:10.5px}
.path [aria-current=step] .n{background:currentColor}.path [aria-current=step] .n{color:inherit}
.path [aria-current=step] .n{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.path .sep{width:10px;height:1px;background:currentColor;opacity:.35}
.tools{display:flex;align-items:center;gap:8px}
.tools .small{min-height:32px;min-width:40px;padding:2px 8px;border-radius:999px;background:transparent;border:1px solid currentColor;color:inherit;font-size:13px}
.look{display:flex;gap:5px}
.look button{min-height:0;width:20px;height:20px;padding:0;border-radius:50%;border:1.5px solid #efe6ff99}
body:not([data-look=evening]) .look button{border-color:#292c5655}
.look button[aria-pressed=true]{outline:2px solid var(--amber);outline-offset:2px}
.look .look-evening{background:linear-gradient(135deg,#2a2b5c 50%,#e3a35f 50%)}
.look .look-classic{background:linear-gradient(135deg,#b1a7d5 50%,#efc66f 50%)}
.look .look-watercolour{background:linear-gradient(135deg,#ecd2b6 50%,#286b68 50%)}

/* the room */
.play{position:relative;min-height:0}
#stage{position:absolute;inset:34px 2% 16px;touch-action:none}
#stage>svg{width:100%;height:100%;overflow:visible;display:block}
.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(48% 46% at 50% 58%,#f2b56b 0%,#f2b56b00 70%);opacity:calc(.04 + var(--alive) * .2);transition:opacity .9s ease}
body:not([data-look=evening]) .glow{background:radial-gradient(48% 46% at 50% 58%,#fff6dc 0%,#fff6dc00 70%);opacity:calc(.1 + var(--alive) * .5)}
.say{position:absolute;top:2px;left:16px;right:16px;margin:0;text-align:center;color:#efe6ff;font-size:15px;line-height:1.3;font-weight:600;letter-spacing:.01em;text-wrap:balance;pointer-events:none}
body:not([data-look=evening]) .say{color:var(--ink)}
.grip{outline:none}.grip .dot{transition:r .15s}
.grip:focus-visible .dot{stroke:#e3a35f;stroke-width:3}
.grip.tag.unmoved .dot{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{fill:#ffe9c4}}
@media (prefers-reduced-motion:reduce){.grip.tag.unmoved .dot{animation:none}.glow{transition:none}}

/* the hand of cards */
.hand{position:relative;z-index:2;width:min(100%,var(--hand-max));margin:0 auto;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border:1px solid var(--ink);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -14px 40px -24px #0008;height:var(--hand-h,216px);overflow:auto;overscroll-behavior:contain}
.hand-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.hand-head h2{font:600 22px/1 'Cormorant SC',Georgia,serif;letter-spacing:.03em}
.hand-head p{color:var(--ink-2);font-size:13.5px}
.cards{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.card{flex:0 0 auto;scroll-snap-align:start;display:grid;grid-template-rows:66px auto auto;align-content:start;justify-items:start;gap:2px;width:112px;min-height:124px;padding:7px 9px 8px;background:#fffdf7;border:1.5px solid var(--ink);border-radius:12px;text-align:left;font-weight:600;transition:transform .22s var(--ease-pop),box-shadow .22s}
.card:hover{background:#fffdf7;transform:translateY(-3px);box-shadow:0 10px 18px -12px #292c5680}
.card .art{display:grid;place-items:center;width:100%;height:66px}
.card .art svg{max-width:92%;max-height:62px}
.card b{font-size:13.5px;line-height:1.15}
.card small{font-size:11.5px;color:var(--ink-2);font-weight:500}
.card.chosen,.card[aria-pressed=true]{box-shadow:0 0 0 2.5px var(--amber)}
.card.lifted{transform:translateY(-6px);box-shadow:0 0 0 2.5px var(--amber),0 14px 22px -14px #292c5690}
/* face-down: a card already played into the room */
.card.back{background:var(--ink);color:#efe6ff;border-color:var(--ink)}
.card.back:hover{background:#33366a}
.card.back small{color:#cfc6e6}
.card.back .art{border:1px solid #efe6ff55;border-radius:7px;background:repeating-linear-gradient(45deg,#ffffff08 0 6px,#ffffff00 6px 12px)}
.card.back .mark{font:600 15px 'Cormorant SC',Georgia,serif;letter-spacing:.12em;color:#efe6ff}
.card.shape{grid-template-rows:42px auto auto;min-height:0}.card.shape .art{height:42px}.card.shape .art svg{max-height:38px}
.card.product{width:150px;grid-template-rows:66px auto auto auto auto auto}
.card.product .facts{display:flex;justify-content:space-between;width:100%;font-size:12px;margin-top:3px}
.card.product .facts strong{font-size:14px}
.card.product .delta{font-size:11px}
.card.product .tag{margin-top:4px;font-size:10px;font-weight:600;letter-spacing:.04em;color:#7a6f93;border:1px dashed #9b94b1;border-radius:4px;padding:1px 5px}

.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 6px}
.chip{min-height:34px;padding:4px 11px;border-radius:999px;font-size:13px;border:1px solid #9b94b1;background:#fff;font-weight:600}
.chip[aria-pressed=true]{background:var(--ink);color:#fff8ec;border-color:var(--ink)}
.swatches{gap:5px}.swatches .lbl{font-size:12.5px;color:var(--ink-2);margin-right:3px}
.swatch{min-height:0;width:28px;height:28px;padding:0;border-radius:50%;background:var(--c);border:1.5px solid #292c5666}
.swatch:hover{background:var(--c)}
.swatch[aria-pressed=true]{outline:2.5px solid var(--ink);outline-offset:2px}
.actions{justify-content:flex-end;gap:8px}
.primary{background:var(--ink);color:#fff8ec;border-color:var(--ink);border-radius:999px;padding:8px 18px}
.primary:hover{background:#34376b}
.quiet{background:transparent;border-color:transparent;color:var(--ink-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.quiet:hover{background:#292c560d}
.small{min-height:34px;padding:4px 12px;font-size:13px;border-radius:999px}
.icon{min-height:32px;width:32px;padding:0;border-radius:50%;border-color:#9b94b1}
.hand-foot{position:sticky;bottom:-10px;display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:4px;margin-left:auto;padding:6px 0 2px;background:var(--paper)}
.foot-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.foot-row .exact{margin:0}
.exact{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 6px;font-size:13px;color:var(--ink-2)}
.exact label{display:flex;align-items:center;gap:6px}
.exact input{width:92px;min-height:36px;padding:4px 10px;border:1px solid #9b94b1;border-radius:8px;background:#fff;font-weight:700;color:var(--ink);font-size:15px}
.exact .unit{font-weight:600}
.trying{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.trying .card{cursor:default}
.shop-link{font-size:13px;color:#8a83a3;text-decoration:line-through dotted;margin-right:auto}
.empty{color:var(--ink-2);padding:6px 0}
.lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 18px}
.lists h3{font:600 15px 'Cormorant SC',Georgia,serif;letter-spacing:.08em;margin:2px 0 4px}
.lists ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.lists li{display:flex;gap:10px;align-items:center}
.lists .mini{display:grid;place-items:center;width:40px;height:32px}.lists .mini svg{max-width:40px;max-height:30px}
.lists li b{display:block;font-size:13.5px}.lists li small{color:var(--ink-2);font-size:12px}

.piece-head .small{margin-left:auto}

@media (max-width:640px){
 .brand{display:none}
 .top{padding-top:8px;gap:6px}
 .path{margin:0}.path .w{display:none}.path [aria-current=step] .w{display:inline}
 .path button{padding:4px 6px}
 .tools{margin-left:auto}
 #stage{inset:44px 1% 14px}
 .say{font-size:14px}
 .hand{--hand-h:min(44dvh,330px);padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;border-left:0;border-right:0}
 .hand-head{margin-bottom:6px}.hand-head h2{font-size:20px}.hand-head p{font-size:12.5px}
 .card{width:100px;min-height:124px;grid-template-rows:64px auto auto}.card .art{height:64px}.card .art svg{max-height:60px}
 .card.product{width:138px;grid-template-rows:64px auto auto auto auto auto}
 .trying{grid-template-columns:1fr}.trying>.card{display:none}
 .exact input{width:82px}
}
@media (max-width:370px){.look button{width:18px;height:18px}.tools{gap:6px}}
/* Compact visual guidance; labels remain available to assistive technology. */
.brand{font-size:0}.brand::before{content:'●';font-size:12px}.path .w{display:none}.path [aria-current=step] .w{display:inline}body[data-intro=on] .path .w,body[data-intro=on] .room-title,body[data-sheet=on] .path .w,body[data-trial=on] .path .w,body[data-step=real] .path .w{display:none}
.exact label>span{font-size:0}.exact label>span::after{font-size:0}#saved-mark{opacity:0;font-size:15px}#saved-mark.stamp{animation:stamp 1.4s ease-out}@keyframes stamp{10%,65%{opacity:1}100%{opacity:0}}
.shake{animation:shake .4s ease-in-out}.floor-flash{animation:flash .5s ease-in-out}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes flash{50%{filter:drop-shadow(0 0 8px #f4c375)}}
body[data-trial=on][data-step=real] .hand-head h2{display:none}.collision-wobble{transform-box:fill-box;transform-origin:center;animation:collision-wobble .45s ease-in-out}@keyframes collision-wobble{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.shake,.floor-flash,.collision-wobble,#saved-mark.stamp{animation:none}}
body[data-message=error] .hand-head,body[data-message=error] .path .w{display:none}
.card.back ~ .card.back .mark{font-size:0}body[data-step=mine][data-owned=on] .path .w,body[data-trial=on] .hand-head h2{display:none}
.clearance{transform-box:fill-box;transform-origin:center;animation:gap-pop .22s ease-out}.bounce-back{transform-box:fill-box;transform-origin:center;animation:bounce-back .35s ease-out}.floor-edge-flash{animation:floor-edge .65s ease-out forwards}@keyframes gap-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes bounce-back{30%{transform:translateX(3px)}70%{transform:translateX(-2px)}}@keyframes floor-edge{0%,100%{opacity:0}35%{opacity:1}}
@media(prefers-reduced-motion:reduce){.clearance,.bounce-back,.floor-edge-flash{animation:none}}
/* Room openings: the names are visible, while each window keeps its own draggable marker. */
body[data-step=room] .path .w,body[data-step=room] .room-title{display:none}.window-controls{display:flex;align-items:center;gap:6px;font-size:13px}.window-controls .small{min-width:32px;padding:3px 8px}.window-controls output{min-width:14px;text-align:center}
body[data-step=room] #stage .furniture:is([data-id=door],[data-id^=window]){cursor:grab}body[data-step=room] #stage .furniture:is([data-id=door],[data-id^=window]):active{cursor:grabbing}