:root{font-family:system-ui,-apple-system,sans-serif;color:#555;background:#f5f4f0;font-size:16px}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{height:100vh;height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}main{height:100%;max-width:400px;margin:auto;display:grid;grid-template-rows:auto 38px 24px minmax(0,1fr) 104px 44px 20px;gap:4px;overflow:hidden}p,h1{margin:0}h1{font-size:26px;line-height:1.2;letter-spacing:.08em}.eyebrow{font-size:11px;color:#777}.intro{font-size:13px;line-height:1.5}.account-info{font-size:12px;line-height:18px;overflow:hidden}.stats{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-variant-numeric:tabular-nums}.play-area{min-height:0;min-width:0;display:grid;place-items:center;container-type:size}.board-stage{position:relative;width:min(100%,max(0px,calc(100vh - 380px - env(safe-area-inset-top) - env(safe-area-inset-bottom))));width:min(100cqw,100cqh,360px);aspect-ratio:1;min-width:0;min-height:0}.board{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;background:#ddd9ce;padding:8px;border-radius:16px;touch-action:none;user-select:none;-webkit-user-select:none}.tile{min-height:0;border-radius:12px;border:2px solid #d5b98b;background:#f2dbb3;color:#604c33;font-size:clamp(18px,7vmin,32px);font-weight:600;box-shadow:0 2px 0 #b99e76;cursor:pointer}.tile:disabled{opacity:1;cursor:default}.tile.legal{border-color:#8b6c3d;background:#ffe8bf}.tile.empty,.tile.placeholder{background:#e8e4da;border:2px dashed #cbc6ba;box-shadow:none}.tile:focus-visible,button:focus-visible{outline:3px solid #426d80;outline-offset:-3px}button{font:inherit;min-height:40px;padding:8px 10px;border:1px solid #ccc;border-radius:10px;background:#fff;color:#555;cursor:pointer;touch-action:manipulation}button.primary{background:#666;color:#fff;border-color:#666}button:disabled{opacity:.55;cursor:wait}#board button{margin:0;padding:0;width:auto}#start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:94%;box-shadow:0 3px 12px #5554;z-index:1}.feedback{font-size:12px;line-height:17px;overflow:hidden}#message{min-height:34px}#round-times{font-variant-numeric:tabular-nums}#result{font-weight:600}#storage-warning{color:#8b5014}.actions{display:flex;gap:6px;min-height:0}.actions button{flex:1;min-width:0;font-size:13px}.rules{font-size:11px;line-height:20px;text-align:center;color:#777;white-space:nowrap}.board.complete{background:#bed7bd}.board.complete .tile{border-color:#789d67}[hidden]{display:none!important}@media(max-height:580px){main{grid-template-rows:auto 32px 20px minmax(0,1fr) 96px 40px 18px;gap:2px}.eyebrow{display:none}h1{font-size:21px}.account-info{font-size:11px;line-height:16px}.feedback{font-size:11px;line-height:15px}#message{min-height:30px}.rules{font-size:10px;line-height:18px}.board-stage{width:min(100%,max(0px,calc(100vh - 330px - env(safe-area-inset-top) - env(safe-area-inset-bottom))));width:min(100cqw,100cqh,360px)}.board{gap:4px;padding:6px}}@media(prefers-reduced-motion:no-preference){.tile{transition:background .12s}}

/* Cardboard parcels and a dog helper, drawn entirely with CSS and inline SVG. */
:root{color:#655344;background:#faf5ea;background:radial-gradient(ellipse at 15% 0%,#fff9e8 0%,transparent 65%),linear-gradient(155deg,#f8f1e3,#f2e8d6)}h1{color:#604633;letter-spacing:.04em;font-weight:800}.eyebrow{color:#a3825e;letter-spacing:.15em}.intro{color:#89705a}.account-info{color:#907357}.stats{color:#82664b;font-weight:600}.board{background:linear-gradient(145deg,#dec7a5,#ccb38f);border:1px solid #c2a680;box-shadow:inset 0 2px 5px #73533222,0 5px 12px #76553013}.tile{position:relative;isolation:isolate;overflow:hidden;border-radius:8px;background:linear-gradient(90deg,transparent 40%,#f5d6a38c 40%,#f5d6a38c 59%,transparent 59%),repeating-linear-gradient(0deg,#9f6c2810 0 1px,transparent 1px 4px),linear-gradient(145deg,#e9c489,#cd9b5a);border-color:#b58247;color:#70441e;box-shadow:inset 0 1px 0 #fff6,inset 0 -3px 0 #9f6e3233,0 2px 0 #a07442;text-shadow:0 1px #fff8;font-weight:800}.tile.legal{background:linear-gradient(90deg,transparent 40%,#ffe1acb3 40%,#ffe1acb3 59%,transparent 59%),repeating-linear-gradient(0deg,#9f6c2810 0 1px,transparent 1px 4px),linear-gradient(145deg,#f7d59e,#dbad71);border-color:#966634}.tile.placeholder{background:#b4967022;border:1px solid #a6886022;box-shadow:inset 0 1px 4px #73533216}.tile.helper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:radial-gradient(circle at 50% 38%,#fffdf4,#e9e1c8);border:2px solid #b4bba0;border-radius:14px;box-shadow:inset 0 1px 0 #fff,0 2px 0 #9aab86;text-shadow:none;padding:3px!important}.tile.helper svg{display:block;width:70%;height:70%;max-height:72px;flex-shrink:1;min-height:0;pointer-events:none}.helper-label{font-size:clamp(8px,2.4vmin,11px);font-weight:650;line-height:1.1;color:#7a6547;pointer-events:none}button{border-color:#d5c1a7;color:#795c42;background:#fffaf1}button.primary{color:#fff9ed;background:linear-gradient(135deg,#997548,#74512f);border-color:#795735;font-weight:650}#start{box-shadow:0 5px 16px #6b4a3240;min-height:48px;padding:12px 20px}.rules{color:#a0876b}.board.complete{background:linear-gradient(145deg,#cbdcba,#b4caa3)}#round-times{color:#668252}#result{color:#775331}

.tile.helper{cursor:grab;touch-action:none}.tile.helper.dragging{cursor:grabbing;box-shadow:0 0 0 3px #78966c,inset 0 0 14px #fff9;z-index:2}.tile.helper svg{pointer-events:none}.tile.helper .helper-label{pointer-events:none}
.drag-avatar{position:absolute;z-index:4;pointer-events:none;transform:translate(-50%,-50%) scale(1.08);display:grid;place-items:center;filter:drop-shadow(0 5px 5px #61452755)}.drag-avatar svg{width:80%;height:80%}.tile.helper.dragging svg,.tile.helper.dragging .helper-label{opacity:.25}

/* Kamigo sticker proportions: long white profile, pointed ears, long tail. */
.tile.helper svg{width:96%;height:72%;overflow:visible}.drag-avatar svg{width:100%;height:100%}
#next,#leave{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;min-height:48px;max-width:94%;white-space:nowrap;padding:12px 20px;box-shadow:0 5px 16px #6b4a3240}
#tutorial{position:absolute;inset:4%;z-index:1;background:#fffaf3f5;border:1px solid #ddc9a8;border-radius:14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 8px 52px;pointer-events:none}
#tutorial-title{font-size:15px;line-height:1.3;color:#65503a}#tutorial-copy{font-size:11px;line-height:1.35}#start.with-tutorial{top:auto;bottom:7%;transform:translateX(-50%);font-size:13px;min-height:40px;padding:8px 14px}
.tutorial-visuals{flex:1;min-height:0;width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px;container-type:size}.tutorial-demo{position:relative;width:100%;height:100%;min-height:0;max-height:76px;display:flex;align-items:center;justify-content:center}.tutorial-demo img{width:70%;height:100%;object-fit:contain}.tutorial-finger{position:absolute;left:35%;top:58%;width:15px;height:15px;border:3px solid #688b9b;background:#d7eff8a0;border-radius:50%}.tutorial-box{display:none;background:#ecd2a6;border:2px solid #b28d57;border-radius:5px;padding:3px 7px;color:#75532f;font-size:12px}.tutorial-demo img,.tutorial-finger{will-change:transform}#tutorial[data-step="1"] .tutorial-box{display:block}
.goal-sample{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:0;height:100%}.goal-sample figcaption{font-size:10px;line-height:12px;color:#95795c}.goal-grid{width:64px;width:min(82px,43cqw,max(0px,calc(100cqh - 14px)));aspect-ratio:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:2px}.goal-grid>span{display:grid;place-items:center;background:#efdcba;border:1px solid #d6b98f;border-radius:3px;color:#61411f;font-size:clamp(9px,4cqw,14px);font-weight:700;min-width:0;min-height:0}.goal-grid>.goal-dog{background:transparent;border:0}.goal-dog img{width:100%;height:100%;object-fit:contain}
@media(prefers-reduced-motion:no-preference){#tutorial[data-step="1"] .tutorial-demo img,#tutorial[data-step="1"] .tutorial-finger{animation:work-drag 2.2s infinite}#tutorial[data-step="1"] .tutorial-box{animation:work-box 2.2s infinite}@keyframes work-drag{0%,15%{transform:translateX(-8px)}65%,100%{transform:translateX(10px)}}@keyframes work-box{0%,30%{transform:translateX(0)}70%,100%{transform:translateX(-18px)}}}
@media(max-height:580px){#tutorial{gap:2px;padding:6px 5px 46px}#tutorial-title{font-size:12px}#tutorial-copy{font-size:10px}.tutorial-demo{max-height:48px}#start.with-tutorial{font-size:11px}.tutorial-box{padding:2px 4px;font-size:10px}}

/* Keep the full cell touch target while the parcel floats above visible floor. */
.tile:not(.helper):not(.placeholder){background:transparent;border:0;box-shadow:none;overflow:visible;border-radius:8px;color:#503016;text-shadow:0 1px 0 #fff8;font-size:clamp(22px,8vmin,36px);font-weight:850;padding-bottom:7%!important}
.tile:not(.helper):not(.placeholder)::before{content:"";position:absolute;inset:9% 10% 15%;z-index:-1;border:1px solid #ac7740;border-radius:5px;background:linear-gradient(90deg,transparent 40%,#f8e0af 40%,#f8e0af 59%,transparent 59%),linear-gradient(165deg,#f3d29a,#ddb071);box-shadow:inset 0 2px 0 #fff7,inset 2px 0 0 #fff3,0 5px 0 #b77d43,0 7px 0 #956337,0 11px 8px -3px #65452360}
.tile.legal:not(.helper):not(.placeholder)::before{border-color:#916030;background:linear-gradient(90deg,transparent 40%,#ffecc6 40%,#ffecc6 59%,transparent 59%),linear-gradient(165deg,#ffe0ab,#e6bc80)}
.board.complete .tile:not(.helper):not(.placeholder){border:0}

/* The helper is a freestanding character, never a framed floor tile. */
.tile.helper,.tile.helper.dragging{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;padding:0!important}.tile.helper .helper-label{display:none}.tile.helper svg{width:100%;height:100%;max-height:none;transform:scaleX(var(--dog-facing,1));transform-origin:center}.drag-avatar{transform:translate(-50%,-50%) scale(1.5)}.drag-avatar svg{transform:scaleX(var(--dog-facing,1));transform-origin:center}.board.complete .tile.helper{border:0}