:root{font-family:'Avenir Next',Avenir,Trebuchet MS,sans-serif;color:#4a3037;background:#eee2d0;--paper:#fff7eb;--ink:#4a3037;--shelf:#e7a080;--atlas-x:0%;--atlas-y:0%;--cell:48px;--gap:3px;--tile:#df7867}*{box-sizing:border-box}body{margin:0}button,a,select{font:inherit}button,a.primary{cursor:pointer;touch-action:manipulation}button{border:1px solid #b99b86;border-radius:16px;background:var(--paper);color:var(--ink);min-height:44px;padding:9px 16px}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #4a3037;outline-offset:3px}button:disabled{opacity:.45;cursor:default}button.primary,a.primary{background:var(--ink);color:var(--paper);border:0;padding:14px 20px;border-radius:18px;display:inline-block;text-align:center;text-decoration:none}h1,h2{font-family:Georgia,serif;font-weight:400}h2{font-size:30px;margin:12px 0}p{line-height:1.5}[hidden]{display:none!important}.welcome{min-height:100svh;max-width:640px;margin:auto;padding:36px 24px;text-align:left}.welcome-cat{max-width:100%;width:320px;display:block;margin:38px auto 0}.welcome h1{font-size:40px}.wordmark{font:40px/1 Georgia,serif;letter-spacing:-1px}.wordmark span{display:block;font:10px/2 'Avenir Next',sans-serif;letter-spacing:2px}.room{position:relative;isolation:isolate;overflow:hidden;border-radius:0 0 25px 25px;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;min-height:78px}.room-art{position:absolute;z-index:-2;inset:0;background-image:url('assets/rooms.jpg');background-size:200% 200%;background-position:var(--atlas-x) var(--atlas-y);opacity:.7}.room-cat{position:absolute;z-index:-1;width:160px;right:60px;bottom:-14px}.room .wordmark{background:#fff7ebeb;border-radius:16px;padding:6px 12px}.round{border-radius:50%;width:44px;padding:0;flex-shrink:0;font-size:28px}#game{height:100dvh;height:100svh;padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));max-width:820px;margin:auto;display:grid;grid-template-rows:78px 40px minmax(95px,1fr) 42px 122px 64px 32px;gap:6px;overflow:hidden}.tray-heading{display:flex;align-items:center;gap:10px;padding:0 8px;min-width:0}.tray-heading h1{font-size:22px;line-height:1.1;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tray-heading #count{margin-left:auto;font-size:19px;white-space:nowrap}#board-area{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;touch-action:none}#board-frame{position:relative;padding:18px;border:4px solid #ad7851;border-radius:30px;background:#563628;box-shadow:inset 0 0 0 5px #8b5839,0 10px 22px #4a30372b}#board{display:grid;gap:var(--gap);position:relative}.spot{width:var(--cell);height:var(--cell);min-height:0;border-radius:9px;border:1.5px solid #ad7851;background:#563628;padding:0;position:relative}.spot.blocked{background:transparent;border:none;pointer-events:none}.tile{display:grid;place-items:center;width:100%;height:100%;color:#40282e;background:linear-gradient(135deg,#ffffff50,transparent 70%),var(--tile);border:1.5px solid #fff0d8a0;border-radius:8px;box-shadow:inset 0 1px 2px #fff6,0 3px 3px #24141744;font-size:calc(var(--cell)*.43);font-weight:600;position:relative;user-select:none;touch-action:none}.tile:before{content:'';position:absolute;left:16%;top:12%;width:42%;height:4%;min-height:2px;transform:rotate(-12deg);background:#fff6;border-radius:5px}.spot:has(.tile){border:none}#ghost{position:absolute;left:18px;top:18px;pointer-events:none;opacity:.68}.ghost-cell{position:absolute;width:var(--cell);height:var(--cell);background:#b9daba;border:2px solid #4a3037;border-radius:7px}.ghost-cell.bad{background:#e5a291}#status{font-size:14px;margin:0;align-self:center;text-align:center;line-height:1.25;overflow:auto;max-height:42px;padding:0 5px}#shelf{background:var(--shelf);border-radius:24px;padding:8px 10px;overflow:hidden}.shelf-label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1.5px}.shelf-row{height:88px;display:flex;align-items:center;gap:8px}#pieces{display:flex;justify-content:space-evenly;align-items:center;gap:10px;flex:1;min-width:0}.piece{background:#fff7eb88;border:2px solid transparent;padding:4px;min-height:72px;min-width:75px;border-radius:16px;display:flex;align-items:center;justify-content:center;touch-action:none}.piece.selected{border-color:var(--ink);background:#fff7eb}.piece-grid{display:grid;gap:2px;--cell:15px}.piece-grid .tile{width:15px;height:15px;font-size:9px;border-radius:4px}.tools{display:flex;gap:6px}.tools button{font-size:25px;line-height:1;padding:5px;flex:1;border-color:#e0c4aa}.tools button span{display:block;font-size:12px;line-height:1.6}.tools button:nth-child(1){background:#f4b89b}.tools button:nth-child(2){background:#cbd7b0}.tools button:nth-child(3){background:#b5d5e6}.tools button:nth-child(4){background:#f8e4c4}.tools button:nth-child(5){background:#f6d584}footer{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px}footer button{min-height:30px;border:0;background:transparent;padding:0 8px;text-decoration:underline;font-size:12px}dialog{background:var(--paper);color:var(--ink);border:1px solid #b99b86;border-radius:28px;width:min(94vw,520px);max-height:90svh;overflow:auto;padding:26px;box-shadow:0 15px 60px #24141744}dialog::backdrop{background:#24141766}dialog button{margin:5px 0}dialog label{display:block;margin:12px 0}select{background:#fffdf6;color:#4a3037;border:1px solid #b99b86;border-radius:8px;padding:8px;width:100%;min-height:44px}.finish-cat{width:180px;display:block;margin:auto}textarea{width:100%;min-height:110px;font:13px monospace}#saved.warning{color:#873c2d;font-weight:bold}.completed #shelf-title{font-weight:bold}.completed #pieces{font:20px Georgia,serif}.completed #pieces button{width:100%}
@media (min-width:700px) and (min-height:700px){#game{grid-template-rows:105px 45px minmax(100px,1fr) 42px 145px 68px 32px}.room{min-height:105px}.room-cat{width:220px}.shelf-row{height:110px}.piece-grid{--cell:20px}.piece-grid .tile{width:20px;height:20px;font-size:12px}}
@media (max-height:680px) and (orientation:portrait){#game{grid-template-rows:58px 32px minmax(90px,1fr) 34px 106px 54px 28px;gap:3px}.room{min-height:58px;padding:4px 12px}.wordmark{font-size:29px}.wordmark span{font-size:8px}.tray-heading h1{font-size:19px}.shelf-row{height:76px}#status{max-height:34px;font-size:12px}.tools button{font-size:20px}}
@media (orientation:landscape) and (max-height:650px){#game{max-width:1100px;grid-template-columns:minmax(220px,1fr) minmax(230px,.7fr);grid-template-rows:52px 34px minmax(110px,1fr) 56px 28px;gap:6px}.room{grid-column:1/3;min-height:52px;padding:3px 12px}.room-cat{width:110px;bottom:-20px}.wordmark{font-size:27px}.wordmark span{font-size:8px}.tray-heading{grid-column:1;grid-row:2}#board-area{grid-column:1;grid-row:3/6}#status{grid-column:2;grid-row:2;font-size:12px}#shelf{grid-column:2;grid-row:3;align-self:center;height:118px}.tools{grid-column:2;grid-row:4}footer{grid-column:2;grid-row:5}.tools button{font-size:21px}.tools button span{font-size:11px}}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s,box-shadow .15s}button:active{box-shadow:inset 0 2px 4px #4a30372b}}

.piece{flex-direction:column;gap:3px}.piece-letter{font-size:12px;line-height:1}.piece-grid .tile{width:var(--cell);height:var(--cell)}