:root{color-scheme:dark;--gold:#f5c36b;--cream:#f7e5c7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#4c3444,transparent 65%),#171720;color:var(--cream);font:16px/1.5 system-ui,sans-serif}main{max-width:950px;padding:24px;margin:auto}a{color:#f8ce7b;text-underline-offset:4px}.eyebrow{font-size:.72rem;letter-spacing:.18em;color:#d2aa78;margin-top:35px}h1{font-size:clamp(2.6rem,6.5vw,4.6rem);line-height:1.05;letter-spacing:-.05em;margin:12px 0}h1 em{font-style:normal;color:var(--gold)}header>p:last-child{color:#d4c1b3}.workshop{position:relative;margin:25px 0;background:#24212a;border:1px solid #85613f;border-radius:30px;overflow:hidden;box-shadow:0 30px 70px #0005}.topline{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 22px;background:#302631}.topline span{font-size:.85rem;color:#f4c577}#story{margin:14px 22px;color:#d8c6b2}.board-wrap{padding:14px 35px 25px;background:repeating-linear-gradient(2deg,#392c28 0 18px,#3e3029 19px 36px)}.board{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;max-width:630px;margin:auto;padding:10px;background:#241c21;border-radius:12px;box-shadow:0 10px 0 #19151a}.tile{position:relative;aspect-ratio:1;border:1px solid #967154;border-radius:10px;background:linear-gradient(140deg,#886448,#674c3c);padding:0;min-height:0;overflow:visible}.tile:nth-child(3n){background:linear-gradient(140deg,#7b5a51,#604747)}.tile.blank{background:#30282c;border-color:#493a36}.tile svg{display:block;width:100%;height:100%}.tile.pin:after{content:'●';position:absolute;right:6%;top:0;font-size:14px;color:#efc272}.tile.entry{box-shadow:inset 0 0 0 3px #e9bb6d}.tile.entry:before{content:'→';position:absolute;left:3%;top:0;font-weight:900;color:#ffe9ae;font-size:16px}.tile.exit:before{content:'□';position:absolute;right:3%;bottom:0;color:#ffe9ae;font-size:20px}.tile.selected{outline:3px solid #ffe6ae;outline-offset:1px;z-index:1}.tile.hinted{box-shadow:0 0 0 4px #ab9bdb}.tile .yarn{stroke:#f5c36b;stroke-width:10;stroke-linecap:round;fill:none}.tile .glow{stroke:#fff1bd;stroke-width:3;stroke-dasharray:4 7;animation:flow 1s linear infinite;fill:none}.still .glow{animation:none}@keyframes flow{to{stroke-dashoffset:-22}}button{font:inherit;min-height:44px;padding:10px 14px;border:1px solid #9a7447;border-radius:12px;background:#3c3031;color:#ffe0a4;cursor:pointer}button:hover:not(:disabled){filter:brightness(1.14)}button:disabled{opacity:.55;cursor:default}.tile:disabled{opacity:1}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #fff0af;outline-offset:3px}#status{margin:0;padding:16px 22px;min-height:76px;background:#2a2530;color:#ffe1ad}nav{display:flex;gap:8px;flex-wrap:wrap;padding:16px 22px}.options{display:flex;justify-content:space-between;padding:0 22px 20px;font-size:.8rem;color:#c6b5aa}.overlay{position:absolute;inset:0;z-index:3;background:#211d2af7;padding:28px;overflow:auto}.overlay[hidden]{display:none}.overlay h2{color:var(--gold);font-size:2rem;line-height:1.1}#room-list{display:grid;gap:10px;margin:22px 0}#room-list button{text-align:left}.menu-actions{display:flex;gap:9px;flex-wrap:wrap}#share-url{margin-top:18px;width:100%;padding:12px;background:#14121b;color:white;border:1px solid #f2c273;border-radius:8px}.instructions{padding:15px 12px 25px}.instructions li{padding-bottom:10px}.instructions p,footer{color:#c7b6aa;font-size:.9rem}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;color:#edc78e}footer{border-top:1px solid #594232;padding:20px 0}footer a{margin-left:18px}@media(max-width:560px){main{padding:12px}.board-wrap{padding:10px 8px 20px}.board{gap:3px;padding:6px}.tile{border-radius:7px}.topline{padding:14px}.topline strong{width:100%}#story{font-size:.85rem;margin:12px 14px}#status{padding:12px 14px;font-size:.9rem}nav{padding:12px;gap:6px}nav button{font-size:.85rem;padding:8px 10px}.overlay{padding:18px}.overlay h2{font-size:1.6rem}.options{padding:0 14px 16px}}@media(prefers-reduced-motion:reduce){.glow{animation:none!important}}

.mascot{width:130px;float:right;margin:15px 10px 5px 15px}@media(max-width:560px){.mascot{width:85px;margin:20px 0 0 5px}}
/* Put route controls beside the quilt instead of below an oversized board. */
.workshop{scroll-margin-top:8px}
@media(min-width:800px) and (min-height:580px){
 .workshop{display:grid;grid-template-columns:minmax(0,1fr) 205px}
 .topline,#story,#status,.options{grid-column:1 / -1}
 .topline{grid-row:1}#story{grid-row:2;margin:10px 18px}
 .board-wrap{grid-column:1;grid-row:3;padding:12px}
 .board{width:100%;max-width:min(100%,max(320px,calc(100dvh - 300px)))}
 nav{grid-column:2;grid-row:3;flex-direction:column;justify-content:center;flex-wrap:nowrap;padding:16px;gap:10px}
 nav button{min-height:44px;width:100%}
 #status{grid-row:4;min-height:64px}.options{grid-row:5;padding-bottom:14px}
}

/* A hidden menu stays hidden even when its normal layout is grid or flex. */
[hidden]{display:none!important}

.challenge-choice{display:block;margin:12px 0;font-weight:700}.challenge-choice select{font:inherit;padding:10px;max-width:100%;color:#292334;background:#fff0d4;border:2px solid #b59067;border-radius:8px}.challenge-note{font-size:.9rem;line-height:1.5;max-width:58ch;margin:10px auto}