/* Tiny Room Stylist: page styles. Miniature Designs tokens; niche palettes only appear inside the room and on niche cards. */
:root{--wood:#2A1E17;--wood2:#3A2A20;--wood3:#4A3628;--cream:#F4EDE2;--paper:#FBF8F3;--line:#DCD0BE;--ink:#2B2620;--muted:#6B5F52;--clay:#C4744A;--clay-d:#9C5430;--brass:#C9A15A;--brass-d:#8A6A2A;--heart:#B5522B;
  --gutter:16px;--max:1000px;--disp:"Fraunces",Georgia,serif;--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:var(--clay-d)}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px}
[hidden]{display:none!important}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l))}
.narrow{max-width:calc(640px + 2*var(--gutter))}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--ink);padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}
.muted{color:var(--muted)}
.eyebrow{font:700 .76rem/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--clay);margin:0 0 .6rem}
.notice{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--clay);border-radius:10px;padding:.8rem 1rem;margin:1rem 0}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--clay);color:#fff;border:2px solid var(--clay);border-radius:999px;padding:.7rem 1.4rem;font:700 .95rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.14);color:#fff}
.btn.small{min-height:44px;padding:.5rem 1.1rem;font-size:.9rem}
.btn.line{background:transparent;color:var(--clay-d);border-color:var(--clay)}
.btn.line:hover{color:var(--clay-d)}
.btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}

/* header and footer */
.site-header{background:var(--wood);color:var(--cream);border-bottom:1px solid rgba(201,161,90,.3);padding-top:var(--safe-t)}
.bar{display:flex;align-items:center;justify-content:space-between;height:56px;gap:1rem}
.logo{color:var(--cream);text-decoration:none;font:600 1.1rem/1 var(--disp)}
.logo:hover,.back-link:hover{color:var(--brass)}
.back-link{color:var(--cream);opacity:.85;text-decoration:none;font-size:.9rem;padding:.6rem 0}
.site-footer{border-top:1px solid var(--line);padding:1.4rem 0 calc(1.4rem + var(--safe-b));font-size:.88rem;color:var(--muted);text-align:center}
.site-footer p{margin:.2rem 0}
.site-footer a{color:var(--muted)}

/* picker */
.hero{background:radial-gradient(ellipse at 50% 0%,var(--wood3) 0%,var(--wood) 72%);color:var(--cream);text-align:center;padding:2.2rem 0 3rem}
.hero h1{font-size:clamp(2.2rem,8vw,3.4rem);color:#FFF8EC;margin-bottom:.35em}
.hero .lede{max-width:34em;margin:0 auto;opacity:.9}
.shelf{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem 1rem;margin:-1.6rem auto 1.6rem;position:relative;box-shadow:0 12px 30px rgba(42,30,23,.1);max-width:520px}
.shelf-label{font:600 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .7rem;text-align:center}
.shelf-boxes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.shelf-boxes li{aspect-ratio:1;border:2px solid var(--line);border-radius:6px;background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);position:relative;overflow:hidden}
.shelf-boxes li.full{border-color:var(--brass)}
.shelf-boxes li span{position:absolute;inset:3px;border-radius:3px}
.pick-title{font-size:clamp(1.5rem,5vw,2rem);text-align:center;margin:.4rem 0 1rem}
.niche-list{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.niche-list{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.niche-list{grid-template-columns:1fr 1fr 1fr}}
.niche-card{width:100%;display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;font:inherit;color:inherit;min-height:96px;transition:transform .15s,box-shadow .15s,border-color .15s}
.niche-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(42,30,23,.1);border-color:var(--brass)}
.swatch{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;width:76px;height:76px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.niche-card h3{font-size:1.25rem;margin:0 0 .15rem}
.niche-card p{margin:0;font-size:.93rem;color:var(--muted);line-height:1.4}
.niche-card .tags{display:flex;gap:6px;margin-top:.4rem;flex-wrap:wrap}
.tag{font:700 .7rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:.3rem .5rem;border-radius:999px;background:var(--cream);color:var(--muted);border:1px solid var(--line)}
.tag-done{background:#EFE3C8;color:var(--brass-d);border-color:var(--brass)}
.how{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;margin:0 0 2rem}
.how summary{cursor:pointer;font:600 1.05rem/1.4 var(--disp);min-height:32px}
.how ol{margin:.6rem 0 0;padding-left:1.2rem}
.how .guide-link{margin:.7rem 0 0}.how .guide-link a{font-weight:600}

/* play: full screen like an app */
.play{position:fixed;inset:0;z-index:60;background:var(--cream);display:flex;flex-direction:column;padding:var(--safe-t) var(--safe-r) 0 var(--safe-l)}
body.playing{overflow:hidden}
.playbar{flex:none;display:flex;align-items:center;gap:8px;height:56px;padding:0 10px;background:var(--wood);color:var(--cream)}
.icon-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--cream);cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.08)}
.playbar-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.play-niche{font:600 1.05rem/1.1 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play-level{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud{display:flex;align-items:center;gap:10px;flex:none}
.hearts{display:flex;gap:2px}
.hearts svg{width:18px;height:18px}
.score b{font:700 1rem/1 var(--sans);color:var(--brass)}
.style-switch{flex:none;display:flex;border:1px solid rgba(244,237,226,.35);border-radius:999px;overflow:hidden}
.style-switch button{border:0;background:transparent;color:var(--cream);font:700 .75rem/1 var(--sans);padding:0 .65rem;min-height:36px;min-width:48px;cursor:pointer}
.style-switch button[aria-pressed="true"]{background:var(--cream);color:var(--wood)}
@media (max-width:380px){.style-switch button{padding:0 .45rem;min-width:44px}.playbar{gap:4px;padding:0 4px}}

.play-body{flex:1;min-height:0;display:flex;flex-direction:column}
.stage{position:relative;flex:0 0 60%;min-height:0;overflow:hidden;background:#EFE7DA}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}
.stage-hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);margin:0;font-size:.78rem;color:var(--muted);background:rgba(251,248,243,.85);padding:.2rem .6rem;border-radius:999px;pointer-events:none;transition:opacity .6s}
.stage-hint.gone{opacity:0}
.toast{position:absolute;left:10px;right:10px;top:10px;z-index:3;margin:0 auto;max-width:440px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.6rem .9rem;font-size:.95rem;line-height:1.4;box-shadow:0 8px 22px rgba(42,30,23,.14);opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:none}
.toast.good{border-left:4px solid #6E8B5E}
.toast.bad{border-left:4px solid var(--heart)}
.toast b{font-family:var(--disp)}

.tray{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--paper);border-top:1px solid var(--line);padding:8px 0 calc(8px + var(--safe-b))}
.tray-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;min-height:44px}
.slot-label{margin:0;font:600 1.05rem/1.2 var(--disp)}
.slot-label small{font:500 .8rem/1 var(--sans);color:var(--muted);letter-spacing:.06em;margin-right:.4rem}
.cards{list-style:none;margin:0;padding:6px 12px 4px;display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;flex:1;align-items:flex-start}
.cards li{flex:none;scroll-snap-align:start}
.card{position:relative;width:104px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 6px 8px;background:#fff;border:2px solid var(--line);border-radius:12px;font:inherit;color:inherit;cursor:grab;touch-action:pan-x;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .15s,border-color .15s,box-shadow .15s,opacity .2s}
.card .thumb{width:88px;height:88px;border-radius:8px;background:var(--cream);display:grid;place-items:center;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;pointer-events:none}
.card .chips{display:grid;grid-template-columns:repeat(2,1fr);width:56px;height:56px;border-radius:8px;overflow:hidden}
.card .name{font:600 .82rem/1.2 var(--sans);text-align:center;min-height:2.4em;display:flex;align-items:center}
.card[aria-pressed="true"]{border-color:var(--clay);box-shadow:0 0 0 3px rgba(196,116,74,.25);transform:translateY(-3px)}
.card.tried{opacity:.45;cursor:default}
.card.tried::after{content:"";position:absolute;inset:0;border-radius:10px;background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(181,82,43,.08) 8px 10px)}
.card.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.card.ghost{position:fixed;z-index:200;pointer-events:none;opacity:.92;box-shadow:0 14px 30px rgba(0,0,0,.25);transform:rotate(-3deg) scale(1.04);margin:0}
.card-placeholder{visibility:hidden}

/* landscape and desktop: tray moves to the side */
@media (orientation:landscape) and (min-width:700px){
  .play-body{flex-direction:row}
  .stage{flex:1 1 auto}
  .tray{flex:0 0 320px;border-top:0;border-left:1px solid var(--line)}
  .cards{flex-wrap:wrap;overflow-x:hidden;overflow-y:auto;align-content:flex-start;justify-content:center}
  .card{touch-action:pan-y}
}

/* 2D card version (E-WEBGL) */
.plan{position:absolute;inset:10px 12px 30px;margin:auto;max-width:520px;aspect-ratio:5/4;max-height:calc(100% - 40px);background:#E6DCCB;border:6px solid var(--wood2);border-left-width:10px;border-top-width:10px;border-radius:4px}
.plan-note{position:absolute;left:8px;right:8px;bottom:6px;z-index:2;margin:0;font-size:.75rem;color:var(--muted);text-align:center}
.plan-slot{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px dashed rgba(42,30,23,.25);border-radius:6px;background:rgba(251,248,243,.5);font:600 .7rem/1.15 var(--sans);color:var(--muted);text-align:center;padding:2px;cursor:pointer;overflow:hidden}
.plan-slot.active{border:2px solid var(--clay);background:rgba(196,116,74,.14);color:var(--ink);animation:glow 1.6s ease-in-out infinite}
.plan-slot.filled{border-style:solid;border-color:rgba(42,30,23,.35);color:var(--ink)}
.plan-slot .strip{display:flex;width:80%;height:8px;border-radius:2px;overflow:hidden}
.plan-slot .strip i{flex:1}
.plan-slot.rug{justify-content:flex-end;padding-bottom:6px}
@keyframes glow{50%{box-shadow:0 0 0 6px rgba(196,116,74,.18)}}

/* finished */
.done{padding:2rem 0 2.4rem}
.done h2{font-size:clamp(1.9rem,7vw,2.6rem)}
#done-title:focus{outline:none}   /* focused by script for screen readers; no ring needed */
.done-score{font:600 1.25rem/1.3 var(--disp)}
.done-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 1em}
.done-row .perfect{margin:0}
.perfect{display:inline-block;background:#EFE3C8;color:var(--brass-d);border:1px solid var(--brass);border-radius:999px;padding:.35rem .9rem;font-weight:700;font-size:.92rem}
.rewards{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1rem;margin:1.2rem 0}
.reward{border-top:1px solid var(--line);padding:.9rem 0}
.reward:first-of-type{border-top:0;padding-top:.2rem}
.reward h4{font-size:1.1rem;margin:0 0 .2rem}
.reward p{margin:0 0 .6rem;color:var(--muted);font-size:.95rem}
.copy-row{display:flex;gap:8px;margin-bottom:.5rem}
.copy-row input{flex:1;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:0 .7rem;font:500 .85rem/1 var(--sans);background:#fff;color:var(--ink)}
.reward-msg{min-height:1.4em;margin:.4rem 0 0;font-size:.92rem;color:var(--clay-d)}
.done-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.2rem}

/* v2: game chooser */
.mode-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:640px;margin:0 auto 1.6rem}
.mode-btn{display:flex;flex-direction:column;text-align:left;background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:0;overflow:hidden;font:inherit;color:inherit;cursor:pointer;min-height:96px;transition:border-color .15s,box-shadow .15s,transform .15s}
.mode-btn b{font:600 1.1rem/1.2 var(--disp)}
.mode-btn .txt{display:flex;flex-direction:column;gap:.25rem;padding:.7rem .9rem .8rem}
.mode-btn .txt>span{font-size:.86rem;line-height:1.35;color:var(--muted)}
.mode-btn[aria-checked="true"]{border-color:var(--clay);box-shadow:0 0 0 3px rgba(196,116,74,.18);background:#fff}

/* v3: room chooser */
.room-list{list-style:none;margin:0 auto 1.6rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-width:820px}
.room-btn{width:100%;height:100%;display:flex;flex-direction:column;text-align:left;background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:0;overflow:hidden;font:inherit;color:inherit;cursor:pointer;min-height:88px;transition:border-color .15s,box-shadow .15s,transform .15s}
.room-btn b{font:600 1.05rem/1.2 var(--disp)}
.room-btn .txt{display:flex;flex-direction:column;gap:.2rem;padding:.6rem .8rem .75rem}
.room-btn .txt>span{font-size:.82rem;line-height:1.35;color:var(--muted)}
.room-btn em{font-style:normal;font:700 .7rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--brass-d);margin-top:.2rem}
.room-btn[aria-checked="true"]{border-color:var(--clay);box-shadow:0 0 0 3px rgba(196,116,74,.18);background:#fff}
@media (max-width:420px){.room-list{grid-template-columns:1fr 1fr}}
/* picture tiles on the game and room choices: rendered from the game's own rooms (img/mode-*.webp, img/room-*.webp) */
.mode-btn .thumb,.room-btn .thumb{display:block;background:#F2ECE3;border-bottom:1px solid var(--line);overflow:hidden}
.mode-btn .thumb{aspect-ratio:16/10}
.room-btn .thumb{aspect-ratio:4/3}
.mode-btn .thumb img,.room-btn .thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease,filter .2s}
.mode-btn[aria-checked="false"] .thumb img,.room-btn[aria-checked="false"] .thumb img{filter:saturate(.8)}
@media (hover:hover){.mode-btn:hover .thumb img,.room-btn:hover .thumb img{transform:scale(1.05);filter:none}.mode-btn:hover,.room-btn:hover{border-color:#D9A07E}}
.mode-btn:focus-visible,.room-btn:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mode-btn .thumb img,.room-btn .thumb img{transition:none}.mode-btn:hover .thumb img,.room-btn:hover .thumb img{transform:none}}

/* v2: shelf boxes show the finished room */
.shelf-boxes li img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:cover;border-radius:3px}

/* v2: room tools, hint, streak */
.stage-tools{position:absolute;right:8px;bottom:8px;z-index:2;display:flex;gap:6px}
.tool-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(251,248,243,.92);color:var(--wood);cursor:pointer;box-shadow:0 4px 12px rgba(42,30,23,.12)}
.tool-btn:hover{border-color:var(--brass)}
#btn-time[aria-pressed="true"]{background:var(--wood2);color:#F2D79B;border-color:var(--wood3)}
#btn-sound .ic-on{display:none}
#btn-sound[aria-pressed="true"] .ic-on{display:inline}
#btn-sound[aria-pressed="true"] .ic-off{display:none}
.stage.night{background:#2A1E17}
.stage.night .stage-hint{background:rgba(42,30,23,.8);color:#E8DCC8}
.tray-actions{display:flex;gap:6px;align-items:center}
#btn-hint small{font-weight:500;opacity:.75;margin-left:.25rem}
.flow{position:absolute;left:10px;bottom:10px;z-index:2;margin:0;padding:.35rem .8rem;border-radius:999px;background:#EFE3C8;color:var(--brass-d);border:1px solid var(--brass);font:700 .78rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;pointer-events:none;box-shadow:0 0 0 0 rgba(201,161,90,.45)}
.flow.on{opacity:1;transform:none;animation:flowglow 2.4s ease-in-out infinite}
@keyframes flowglow{50%{box-shadow:0 0 0 8px rgba(201,161,90,0)}}

/* v2: side-by-side after a wrong pick */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:.5rem}
.vs figure{margin:0;text-align:center;font-size:.75rem;line-height:1.25;color:var(--muted)}
.vs .vs-img{display:grid;place-items:center;height:72px;border-radius:8px;background:var(--cream);overflow:hidden;margin-bottom:.25rem}
.vs .vs-img img{height:72px;width:auto;max-width:100%;object-fit:contain}
.vs .vs-img .chips{display:grid;grid-template-columns:1fr 1fr;width:44px;height:44px;border-radius:6px;overflow:hidden}
.vs figcaption b{display:block;color:var(--ink);font-size:.8rem}
.vs .no b{color:var(--heart)}
.vs .yes b{color:#55704A}

/* v2: photo mode */
.photo-panel{flex:1;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;background:var(--paper);border-top:1px solid var(--line);padding:16px 20px calc(18px + var(--safe-b))}
.photo-panel .slot-label{margin-bottom:12px}
.ph-row{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:14px;min-height:48px;margin-bottom:8px;font-size:.9rem}
.ph-row input[type=range]{width:100%;accent-color:var(--clay);min-height:32px}
.ph-frames{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.ph-frames button{flex:1 1 0;min-width:56px;min-height:40px;padding:0 .5rem;border-radius:999px;border:1px solid var(--line);background:#fff;font:600 .82rem/1 var(--sans);color:var(--ink);cursor:pointer}
.ph-frames button[aria-checked="true"]{border-color:var(--clay);background:#F6E6DA}
.ph-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
body.photo .tray,body.photo .stage-tools .tool-btn#btn-sound,body.photo #flow,body.photo .stage-hint{display:none}
@media (orientation:landscape) and (min-width:700px){.photo-panel{flex:0 0 352px;border-top:0;border-left:1px solid var(--line)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* five rooms in two columns: the last card takes the full row, picture beside the text */
@media (max-width:420px){
  .room-list li:last-child:nth-child(odd){grid-column:1/-1}
  .room-list li:last-child:nth-child(odd) .room-btn{flex-direction:row;align-items:stretch}
  .room-list li:last-child:nth-child(odd) .thumb{width:50%;flex:none;border-bottom:0;border-right:1px solid var(--line)}
  .room-list li:last-child:nth-child(odd) .txt{justify-content:center}
}

/* wrong pick / wrong tap card: a clear game moment, centred on the room, never over the cards */
.fault{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:12px;pointer-events:none}
.fault[hidden]{display:none}
.fault-card{pointer-events:auto;width:100%;max-width:340px;background:var(--paper);border:2px solid var(--heart);border-radius:16px;box-shadow:0 14px 34px rgba(42,30,23,.28);overflow:hidden;text-align:center;opacity:0;transform:scale(.86) translateY(8px);transition:opacity .18s ease,transform .26s cubic-bezier(.2,1.4,.4,1)}
.fault.show .fault-card{opacity:1;transform:none}
.fault-head{display:flex;align-items:center;gap:.5rem;background:var(--heart);color:#fff;padding:.55rem .8rem}
.fault-x{display:grid;place-items:center;width:30px;height:30px;border:0;padding:0;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;cursor:pointer;flex:none}
.fault-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fault-title{font:600 1.15rem/1.2 var(--disp);text-align:left;flex:1}
.fault-cost{display:inline-flex;align-items:center;gap:.2rem;background:#fff;color:var(--heart);border-radius:999px;padding:.15rem .55rem .15rem .6rem;font:800 .95rem/1 var(--sans)}
.fault-cost svg{width:16px;height:16px}
.fault-cost svg path{fill:var(--heart);stroke:var(--heart)}
.fault-hearts{display:flex;justify-content:center;gap:.4rem;padding:.7rem 0 .1rem}
.fault-hearts .fh svg{width:28px;height:28px;display:block}
.fault-hearts .fh:not(.full) svg path{fill:none;stroke:#C9BBA8}
.fault-hearts .fh.breaking svg path{fill:var(--heart);stroke:var(--heart)}
.fault.show .fault-hearts .fh.breaking{animation:heartBreak .9s .15s ease-in forwards}
@keyframes heartBreak{0%{transform:scale(1)}25%{transform:scale(1.3) rotate(-8deg)}55%{transform:scale(1.1) rotate(10deg);opacity:1}100%{transform:scale(.6) translateY(10px) rotate(24deg);opacity:.25}}
.fault-left{margin:.35rem .9rem 0;font-size:.95rem;line-height:1.35;color:var(--ink)}
.fault-left b{color:var(--heart)}
.fault-line{margin:.45rem .9rem 0;font-size:.86rem;line-height:1.4;color:var(--muted)}
.fault-after{margin:.45rem .9rem 0;font-size:.86rem;line-height:1.4;color:var(--ink)}
.fault-card .vs{margin:.55rem .8rem 0}
.fault-ok{margin:.7rem auto .8rem;min-height:40px;padding:.45rem 1.4rem;border:0;border-radius:999px;background:var(--wood);color:var(--cream);font:700 .9rem/1 var(--sans);cursor:pointer}
.fault-ok:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
.fault-card.over .fault-head{background:var(--wood)}
.fault-card.over{border-color:var(--wood)}
.fault-card.over .fault-ok{background:var(--clay)}
/* the top-bar hearts give a little knock when one is lost */
.hearts.hit{animation:heartsHit .5s ease}
@keyframes heartsHit{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.fault-card{transition:none;transform:none}.fault.show .fault-hearts .fh.breaking{animation:none;opacity:.35}.hearts.hit{animation:none}}
@media (max-height:640px){.fault-card .vs .vs-img,.fault-card .vs .vs-img img{height:56px}.fault-hearts .fh svg{width:22px;height:22px}}

/* the party when the room is complete (js/celebrate.js): confetti canvas over the page, banner over the room, pieces in the tray */
.confetti{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:150;pointer-events:none}
.cele{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;justify-content:center;align-items:flex-start;padding:40px 12px 12px}
.cele-shine{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(255,244,214,0) 52%,rgba(201,161,90,.3) 100%);opacity:0;transition:opacity 1.2s}
.cele.on .cele-shine{opacity:1}
.cele.out .cele-shine{opacity:0;transition-duration:.4s}
.cele-burst{position:relative;width:min(272px,100%);opacity:0;transform:translateY(-16px) scale(.55)}
.cele.on .cele-burst{animation:celeIn .75s cubic-bezier(.2,1.45,.4,1) forwards}
.cele.on.pop .cele-burst{animation:celePop .6s ease-out forwards}
.cele.on.out .cele-burst{animation:celeOut .38s ease-in forwards}
@keyframes celeIn{0%{opacity:0;transform:translateY(-16px) scale(.55)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes celePop{0%{opacity:1;transform:none}35%{opacity:1;transform:scale(1.09)}100%{opacity:1;transform:none}}
@keyframes celeOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-26px) scale(.9)}}
.cele-rays{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:repeating-conic-gradient(rgba(232,207,142,.55) 0 8deg,rgba(232,207,142,0) 8deg 22.5deg);-webkit-mask:radial-gradient(circle,#000 22%,transparent 68%);mask:radial-gradient(circle,#000 22%,transparent 68%);animation:celeSpin 16s linear infinite}
@keyframes celeSpin{to{transform:rotate(360deg)}}
.cele-card{position:relative;text-align:center;background:rgba(251,248,243,.95);border:1.5px solid var(--brass);border-radius:18px;padding:0 14px 10px;box-shadow:0 16px 36px rgba(42,30,23,.24),0 0 0 5px rgba(201,161,90,.16)}
.cele-rosette{display:block;width:56px;height:63px;margin:-32px auto 0;filter:drop-shadow(0 3px 4px rgba(42,30,23,.22));transform-origin:50% 40%;animation:celeWobble 2.8s ease-in-out .8s infinite}
@keyframes celeWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.cele-eyebrow{margin:2px 0 1px;font:700 .68rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.cele-title{margin:0 0 2px;font:600 clamp(1.35rem,5.6vw,1.75rem)/1.1 var(--disp);color:var(--ink)}
.cele-score{margin:0;font:600 .95rem/1.3 var(--sans);color:var(--muted)}
.cele-score b{font:700 1.4rem/1 var(--disp);color:var(--ink);font-variant-numeric:tabular-nums;margin-left:.2em}
.cele-perfect{display:inline-block;margin:7px 0 0;background:#EFE3C8;color:var(--brass-d);border:1px solid var(--brass);border-radius:999px;padding:.22rem .75rem;font:700 .74rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:scale(.4);animation:celeBadge .55s cubic-bezier(.2,1.6,.4,1) 1.9s forwards}
@keyframes celeBadge{to{opacity:1;transform:none}}
.cele .tw{position:absolute;width:16px;height:16px;background:#E8CF8E;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:twinkle 1.7s ease-in-out infinite}
.cele .t1{left:-12px;top:6px;animation-delay:.6s}.cele .t2{right:-10px;top:-6px;width:12px;height:12px;animation-delay:1s}
.cele .t3{right:-16px;bottom:16px;animation-delay:1.4s}.cele .t4{left:-6px;bottom:-10px;width:11px;height:11px;animation-delay:1.9s}
.cele .t5{left:22%;top:-26px;width:10px;height:10px;background:#FFF4D6;animation-delay:.9s}.cele .t6{right:24%;bottom:-16px;width:13px;height:13px;animation-delay:2.3s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
.cele-tray .cele-piece{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:104px;min-height:66px;padding:8px 6px;background:#fff;border:1px solid var(--brass);border-radius:12px;font-size:.78rem;line-height:1.25;text-align:center;box-shadow:0 4px 12px rgba(42,30,23,.08);opacity:0;transform:translateY(16px) scale(.75);animation:celePiece .5s cubic-bezier(.2,1.5,.4,1) forwards;animation-delay:calc(.4s + var(--i) * .17s)}
.cards.cele-tray{flex-wrap:wrap;justify-content:center;align-content:flex-start;overflow:hidden}
.cards.cele-tray .cele-piece{width:calc((100% - 20px) / 3);max-width:120px}
.tray:has(.cele-tray) .tray-actions{visibility:hidden}
.cele-piece .strip{display:flex;width:70%;height:8px;border-radius:2px;overflow:hidden}
.cele-piece .strip i{flex:1}
@keyframes celePiece{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cele .cele-burst,.cele.on .cele-burst,.cele.on.pop .cele-burst{animation:none;opacity:1;transform:none;transition:opacity .3s}.cele.on.out .cele-burst{animation:none;opacity:0}.cele-rays,.cele-rosette{animation:none}.cele .tw{display:none}.cele-perfect{animation:none;opacity:1;transform:none}.cele-tray .cele-piece{animation:none;opacity:1;transform:none}}