:root{--spot-on-bg: #faf6ee;--spot-on-ink: #3a2f28;--spot-on-paper: rgba(255, 252, 245, .92);--spot-on-shadow: rgba(58, 47, 40, .12);--spot-on-shadow-strong: rgba(58, 47, 40, .24);--spot-on-radius: 12px;--spot-on-glow: rgba(255, 210, 120, .4);--spot-on-highlight: rgba(255, 248, 220, .6)}body.spot-on{background:var(--spot-on-bg);color:var(--spot-on-ink);font-family:system-ui,-apple-system,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}.spot-on-panel--start{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:2rem 1.5rem;text-align:center}.spot-on-start-body{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin-top:2rem}.spot-on-title{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:700;line-height:1.2;margin:0;color:var(--spot-on-ink)}.spot-on-title--small{font-size:clamp(1.1rem,3vw,1.5rem)}.spot-on-subtitle{font-size:clamp(1rem,2.5vw,1.2rem);font-weight:400;line-height:1.5;max-width:24em;color:var(--spot-on-ink);opacity:.8}.spot-on-primary-btn{background:var(--spot-on-ink);color:var(--spot-on-bg);border:none;border-radius:var(--spot-on-radius);font-size:1.1rem;font-weight:600;padding:.75rem 2.5rem;cursor:pointer;min-height:48px;min-width:48px;transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 2px 8px var(--spot-on-shadow)}.spot-on-primary-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--spot-on-shadow)}.spot-on-primary-btn:active{transform:translateY(0);box-shadow:0 1px 4px var(--spot-on-shadow)}.spot-on-panel--game{display:flex;flex-direction:column;min-height:100dvh;min-height:100vh;padding:0}.spot-on-header{flex-shrink:0}.room-scene{position:relative;overflow:visible;flex:1 1 0;min-height:65vh;-webkit-touch-callout:none;user-select:none;touch-action:manipulation;--spot-on-room-wall: #c5d5e4;--spot-on-room-floor: #d4a76a;background:var(--spot-on-room-wall);border-radius:var(--spot-on-radius);margin:.5rem;box-shadow:inset 0 -40px 60px -20px var(--spot-on-room-floor);transition:background .32s ease,box-shadow .32s ease,opacity .3s ease}.room-scene:after{content:"";position:absolute;bottom:0;left:0;right:0;height:38%;background:linear-gradient(to bottom,transparent,var(--spot-on-room-floor));pointer-events:none;z-index:0}.room-decor{position:absolute;pointer-events:none;z-index:1}.room-decor--headboard{top:2%;left:50%;transform:translate(-50%);width:28%;height:8%;background:#8b73551f;border-radius:30% 30% 0 0;border:2px solid rgba(139,115,85,.15);border-bottom:none}.room-decor--window-frame{top:5%;right:6%;width:14%;height:10%;border:3px solid rgba(135,160,190,.25);border-radius:4px;background:#b4d2eb26;box-shadow:inset 0 0 8px #b4d2eb33}.room-decor--window-frame:after{content:"";position:absolute;top:0;left:50%;width:2px;height:100%;background:#87a0be33;transform:translate(-50%)}.room-decor--counter-edge{bottom:38%;left:8%;width:84%;height:3%;background:#8b73551a;border-top:2px solid rgba(139,115,85,.15);border-radius:2px}.room-decor--stove-outline{top:12%;left:10%;width:18%;height:12%;border:2px solid rgba(139,115,85,.12);border-radius:4px;background:#8b73550d}.room-decor--stove-outline:before{content:"";position:absolute;top:30%;left:20%;width:25%;height:25%;border-radius:50%;border:1.5px solid rgba(139,115,85,.15)}.room-decor--stove-outline:after{content:"";position:absolute;top:30%;right:20%;width:25%;height:25%;border-radius:50%;border:1.5px solid rgba(139,115,85,.15)}.room-decor--desk-lamp{top:3%;right:12%;width:8%;height:10%}.room-decor--desk-lamp:before{content:"";position:absolute;bottom:0;left:45%;width:10%;height:60%;background:#8b735526}.room-decor--desk-lamp:after{content:"";position:absolute;top:0;left:10%;width:80%;height:35%;background:#8b73551a;border-radius:0 0 50% 50%;box-shadow:3px 3px 6px #ffd27826}.room-decor--book-end{top:8%;left:6%;width:5%;height:8%;background:#8b73551f;border:1px solid rgba(139,115,85,.1);border-radius:2px;box-shadow:2px 0 #8b735514}.room-decor--crayon-basket{top:6%;left:8%;width:10%;height:8%;border:2px solid rgba(200,170,80,.2);border-top:none;border-radius:0 0 30% 30%;background:#c8aa500f}.room-decor--crayon-basket:before{content:"";position:absolute;top:-6%;left:15%;width:4px;height:35%;background:#ff646433;border-radius:2px 2px 0 0;transform:rotate(-5deg)}.room-decor--crayon-basket:after{content:"";position:absolute;top:-7%;left:45%;width:4px;height:38%;background:#64b4ff33;border-radius:2px 2px 0 0;transform:rotate(3deg)}.room-decor--mirror-frame{top:3%;left:50%;transform:translate(-50%);width:16%;height:12%;border:3px solid rgba(180,200,210,.25);border-radius:50% 50% 4px 4px;background:#dcebf51a;box-shadow:inset 0 0 12px #dcebf526}.room-decor--towel-bar{top:20%;right:6%;width:12%;height:6%;border:2px solid rgba(180,200,210,.2);border-radius:3px;background:repeating-linear-gradient(to bottom,rgba(180,200,210,.08),rgba(180,200,210,.08) 3px,transparent 3px,transparent 5px)}.room-item{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:44px;min-height:44px;font-size:1.5rem;line-height:1;background:var(--spot-on-paper);border:2px solid transparent;border-radius:10px;cursor:pointer;box-shadow:0 2px 6px var(--spot-on-shadow);z-index:5;margin-left:-24px;margin-top:-24px;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.room-item:hover{transform:translateY(-2px);box-shadow:0 4px 10px var(--spot-on-shadow)}.room-item:active{transform:translateY(0)}.room-item:focus-visible{outline:2px dashed var(--spot-on-ink);outline-offset:2px}.room-item--carried{border-color:var(--spot-on-ink);transform:scale(1.1);box-shadow:0 6px 16px var(--spot-on-shadow-strong);z-index:20;animation:spot-on-pulse .8s infinite ease-in-out}.room-item--anim-pickup{transform:scale(1.1);box-shadow:0 6px 16px var(--spot-on-shadow-strong)}.room-item--anim-place{animation:spot-on-place-bounce .2s ease-out}.room-surface{position:absolute;display:flex;flex-direction:column;z-index:2;border-radius:8px;background:#fffcf526;box-sizing:border-box;overflow:visible}.room-surface__label{flex-shrink:0;font-size:.75rem;line-height:1;text-align:center;padding:2px 4px;opacity:.65;pointer-events:none;color:var(--spot-on-ink)}.room-surface__grid{flex:1;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);gap:8px;min-height:0}.room-surface--storage{border-top:3px solid rgba(139,115,85,.3);background:linear-gradient(to bottom,#8b735514,#fffcf526)}.room-surface--furniture{border:2px solid rgba(139,115,85,.2);background:repeating-linear-gradient(to bottom,transparent,transparent 40%,rgba(139,115,85,.08) 40%,rgba(139,115,85,.08) 42%,transparent 42%,transparent 100%),#fffcf51f}.room-surface--fixture{background:#c8c8c81a;border-bottom:2px dashed rgba(139,115,85,.3);border-radius:50% 50% 8px 8px}.room-surface--fixture:after{content:"";position:absolute;top:4px;left:50%;transform:translate(-50%);width:8px;height:8px;border-radius:50% 50% 0 0;background:#8b735533}.room-surface--ledge{border-top:2px solid rgba(255,255,255,.5);box-shadow:0 -2px 4px #ffffff26;background:linear-gradient(to bottom,#fff3,#fffcf51a)}.room-surface--container{border:2px dashed rgba(139,115,85,.2);background:#fffcf514}.room-surface--container:after{content:"";position:absolute;bottom:2px;left:20%;width:60%;height:1px;background:#8b73551f;border-radius:50%}.room-surface--play{border:2px dotted rgba(139,115,85,.25);background:#fffcf51a}.room-surface--decor{border:1px solid rgba(139,115,85,.1);background:radial-gradient(circle at 30% 40%,rgba(139,115,85,.05) 2px,transparent 2px),#fffcf514}.room-surface--surface{border:1px solid rgba(139,115,85,.15);background:#fffcf51a;box-shadow:inset 0 1px 3px #8b73550f}.room-cell{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:1.2rem;line-height:1;border:2px dashed rgba(58,47,40,.2);border-radius:6px;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .12s ease,box-shadow .16s ease;background:#fffcf533}.room-cell:hover{border-color:#3a2f2866;background:#fffcf566}.room-cell:focus-visible{outline:2px dashed var(--spot-on-ink);outline-offset:2px}.room-cell--occupied{border-style:solid;border-color:#3a2f2826;background:#fffcf559;cursor:pointer;font-size:1.5rem}.room-cell--occupied:hover{background:#fffcf58c;border-color:#3a2f284d}.room-scene--carrying .room-cell:not(.room-cell--occupied){border-color:#3a2f2866;background:var(--spot-on-highlight);animation:spot-on-cell-highlight 1.2s infinite ease-in-out}.room-cell--highlight{border-color:#3a2f2880;border-style:solid;background:#fff8dc99}.room-scene--complete{box-shadow:inset 0 0 40px #ffd27833}.completion-msg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;background:var(--spot-on-paper);color:var(--spot-on-ink);font-size:clamp(1.4rem,4vw,2rem);font-weight:700;text-align:center;padding:1rem 2rem;border-radius:var(--spot-on-radius);box-shadow:0 4px 20px var(--spot-on-shadow-strong);pointer-events:none;transition:opacity .4s ease}.completion-msg--hidden{opacity:0;visibility:hidden}.completion-msg--visible{opacity:1;visibility:visible}.completion-msg--animating{opacity:0;visibility:visible;transition:opacity .4s ease}.room-scene--fading-out{opacity:0;transition:opacity .3s ease}.room-scene--fading-in{opacity:1;transition:opacity .3s ease}.room-status{font-size:.9rem;font-weight:500;text-align:center;padding:.4rem .75rem;color:var(--spot-on-ink);opacity:.75;flex-shrink:0}.spot-on-new-room-btn{display:block;margin:.5rem auto .75rem;padding:.6rem 1.6rem;font-size:.95rem;font-weight:600;background:var(--spot-on-ink);color:var(--spot-on-bg);border:none;border-radius:var(--spot-on-radius);cursor:pointer;min-height:44px;box-shadow:0 2px 6px var(--spot-on-shadow);transition:transform .12s ease,box-shadow .12s ease;flex-shrink:0}.spot-on-new-room-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px var(--spot-on-shadow)}.spot-on-new-room-btn:active{transform:translateY(0)}.spot-on-new-room-btn:focus-visible{outline:2px solid var(--spot-on-ink);outline-offset:2px}.spot-on-menu-btn{font-size:.9rem;font-weight:600;padding:.4rem 1rem;background:transparent;border:2px solid var(--spot-on-ink);border-radius:8px;color:var(--spot-on-ink);cursor:pointer;min-height:44px;min-width:44px;transition:background .12s ease,color .12s ease}.spot-on-menu-btn:hover{background:var(--spot-on-ink);color:var(--spot-on-bg)}.spot-on-noscript{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:2rem;text-align:center}.spot-on-noscript p{font-size:1.1rem;max-width:30em;line-height:1.6}@keyframes spot-on-pulse{0%,to{transform:scale(1.1);border-color:var(--spot-on-ink)}50%{transform:scale(1.16);border-color:#3a2f2880}}@keyframes spot-on-place-bounce{0%{transform:translateY(0)}40%{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes spot-on-cell-highlight{0%,to{border-color:#3a2f2866;background:#fff8dc99}50%{border-color:#3a2f288c;background:#fff8dcd9}}@media(prefers-reduced-motion:reduce),(data-reduce-motion:reduce){.room-item,.room-cell,.room-surface,.room-decor,.spot-on-primary-btn,.spot-on-new-room-btn,.spot-on-menu-btn,.completion-msg,.room-scene{transition:none}.room-item--carried{animation:none;transform:scale(1.1);border-color:var(--spot-on-ink)}.room-item--anim-pickup{transition:none}.room-item--anim-place{animation:none}.room-scene--fading-out,.room-scene--fading-in{transition:none}.room-scene--carrying .room-cell:not(.room-cell--occupied){animation:none;border-color:#3a2f2866;background:#fff8dcb3}.completion-msg,.completion-msg--animating,.room-cell--highlight,.room-scene--complete{transition:none}}@media(max-width:420px)and (orientation:portrait){.spot-on-panel--start{padding:1.5rem 1rem}.spot-on-panel--game{min-height:100dvh;min-height:100vh}.spot-on-header{padding:.25rem .5rem}.spot-on-title--small{font-size:1rem}.room-scene{min-height:65vh;flex:1 1 0;margin:.15rem .1rem}.room-status{padding:.25rem .5rem;font-size:.8rem}.spot-on-new-room-btn{padding:.4rem 1.2rem;margin:.25rem auto .4rem;font-size:.85rem}.spot-on-menu-btn{padding:.3rem .7rem;font-size:.8rem;min-height:38px;min-width:38px}.room-item{min-width:44px;min-height:44px;width:44px;height:44px;font-size:1.35rem;margin-left:-22px;margin-top:-22px}.room-cell{min-width:44px;min-height:44px;font-size:1.1rem}.room-surface__grid{gap:8px}.room-cell--occupied{font-size:1.35rem}.room-surface__label{font-size:.65rem;padding:1px 3px}.completion-msg{padding:.75rem 1.5rem;font-size:clamp(1.2rem,3.5vw,1.6rem)}.spot-on-subtitle{font-size:.95rem}.spot-on-title{font-size:clamp(1.5rem,4.5vw,2.2rem)}}@media(orientation:landscape)and (max-height:500px){.spot-on-panel--game{flex-direction:row;flex-wrap:wrap;min-height:100vh;min-height:100dvh}.room-scene{min-height:50%;flex:1 1 60%}.room-status{flex:0 0 auto}.spot-on-new-room-btn{flex:0 0 auto;margin:.25rem auto}.spot-on-title{font-size:1.2rem}.room-item{width:44px;height:44px;margin-left:-22px;margin-top:-22px}.room-cell{min-width:44px;min-height:44px}}