*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}body{color:#73558d;background:#fff9f0 url('/assets/tic-tac-toe/paper.webp?v=2') center/100% 100%;font-family:Georgia,serif}.game{height:100vh;height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;max-width:1300px;margin:auto}.back{align-self:flex-start;color:inherit;text-decoration:none;font-size:clamp(16px,2vw,26px);padding:5px}.back:focus-visible,button:focus-visible{outline:3px solid #73558d;outline-offset:4px}header{text-align:center;flex:none}h1{font-weight:500;font-size:clamp(26px,5.5vh,58px);margin:0}header p{font-size:clamp(14px,2.6vh,26px);margin:4px 0}.pencils{height:clamp(32px,7vh,70px);width:auto}.play{display:flex;align-items:stretch;justify-content:center;gap:clamp(10px,3vw,40px);min-height:0;width:100%;flex:1;padding:5px 0}.board-wrap{aspect-ratio:1;position:relative;height:100%;max-width:62%;align-self:center}.board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;border:7px solid #bcabd0a8;border-radius:10px;background:#fffaf45c;box-shadow:0 0 4px #b8a0cc66}.cell{padding:10%;border:0;border-right:6px solid #baa5cba6;border-bottom:6px solid #baa5cba6;background:transparent;min-width:0;min-height:0;touch-action:none;border-radius:2px}.cell:nth-child(3n){border-right:0}.cell:nth-child(n+7){border-bottom:0}.cell img{width:100%;height:100%;object-fit:contain;pointer-events:none}.cell.over{background:#dcc9ed77}.tray{border-radius:26px;padding:clamp(8px,2vw,22px);width:clamp(70px,17vw,210px);display:flex;flex-direction:column;background:linear-gradient(125deg,#f5c4cb66,#efd1da44);border:1px solid #edc6d360;transition:box-shadow .2s}.tray.o{background:linear-gradient(125deg,#c9b9e266,#e0d1eb55);border-color:#cdbbdd60}.tray.active{box-shadow:0 0 0 3px #b69bc566,0 0 22px #d1b5d077}h2{font-size:clamp(14px,2.5vw,29px);text-align:center;margin:0 0 5px;font-weight:500;white-space:nowrap}.pieces{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:space-around;min-height:0}.piece{border:0;background:none;padding:3px;width:100%;max-height:29%;aspect-ratio:1;touch-action:none;cursor:grab}.piece img{width:100%;height:100%;object-fit:contain;pointer-events:none}.piece:disabled{opacity:.5;cursor:default}.piece.selected{border-radius:15px;background:#ffffff70;outline:2px dashed #9776ae}.ghost{position:fixed;pointer-events:none;width:90px;height:90px;z-index:10;transform:translate(-50%,-50%);opacity:.9}.winning{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#win-line{stroke:#d98195;stroke-width:9;stroke-linecap:round;opacity:.85;display:none;stroke-dasharray:400;stroke-dashoffset:400}#win-line.shown{display:block;animation:draw .55s ease forwards}@keyframes draw{to{stroke-dashoffset:0}}footer{flex:none;text-align:center}#status{margin:0 0 5px;font-size:clamp(22px,3.8vh,38px)}#reset{font:inherit;font-size:clamp(18px,2.7vh,28px);color:#fffaf5;border:1px solid #ac90c6;border-radius:40px;padding:8px 40px;background:linear-gradient(130deg,#c4acd9,#a98bc6);box-shadow:inset 0 0 10px #eee0f2,0 2px 4px #b8a5c244;cursor:pointer}small,.hint{display:block;margin-top:5px;font-size:clamp(11px,1.7vh,16px)}.hint{opacity:.8}@media(orientation:portrait){.play{flex:none;height:min(48vh,62vw);margin:auto 0}.board-wrap{max-width:64%}.tray{width:17%;padding:8px 4px}.game{gap:10px}h2{font-size:clamp(12px,3vw,22px)}header{padding-top:10px}.pencils{height:7vh}header p{font-size:clamp(14px,3.5vw,24px)}}@media(max-height:500px) and (orientation:landscape){.game{gap:2px}.back{position:absolute;top:8px;left:12px;font-size:15px}.pencils{display:none}h1{font-size:26px}header p{font-size:14px}.play{padding:3px 0}.hint,small{display:none}#status{font-size:20px}#reset{font-size:16px;padding:5px 28px}.board{border-width:4px}.cell{border-width:4px}}@media(prefers-reduced-motion:reduce){#win-line.shown{animation:none;stroke-dashoffset:0}}
@media(orientation:portrait){.play{height:min(45vh,57vw);gap:2vw}.board-wrap{max-width:none}.tray{width:16vw;flex-shrink:0}}

.game{position:relative;z-index:1}.storybook-stars{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.storybook-stars img{position:absolute;width:clamp(18px,3vw,38px);height:auto;opacity:.8}.storybook-stars img:nth-child(1){left:7%;top:13%;transform:rotate(-15deg)}.storybook-stars img:nth-child(2){left:26%;top:6%;width:24px}.storybook-stars img:nth-child(3){right:25%;top:7%;transform:rotate(12deg)}.storybook-stars img:nth-child(4){right:7%;top:14%}.storybook-stars img:nth-child(5){left:2%;top:39%;width:25px}.storybook-stars img:nth-child(6){right:2%;top:42%;transform:rotate(18deg)}.storybook-stars img:nth-child(7){left:4%;bottom:22%;width:22px}.storybook-stars img:nth-child(8){right:5%;bottom:20%;width:27px}.storybook-stars img:nth-child(9){left:14%;bottom:5%;transform:rotate(14deg)}.storybook-stars img:nth-child(10){right:14%;bottom:5%;transform:rotate(-18deg)}.storybook-stars img:nth-child(11){left:35%;bottom:12%;width:18px}.storybook-stars img:nth-child(12){right:34%;bottom:12%;width:19px}@media(max-width:500px){.storybook-stars img:nth-child(2),.storybook-stars img:nth-child(3){top:10%}.storybook-stars img:nth-child(11),.storybook-stars img:nth-child(12){display:none}}
/* Complete, larger watercolor stars with room around every point. */
.storybook-stars{inset:8px}.storybook-stars img{width:clamp(34px,4vw,54px);opacity:.95;object-fit:contain}.storybook-stars img:nth-child(2){width:34px}.storybook-stars img:nth-child(5){width:36px;left:1%}.storybook-stars img:nth-child(6){right:1%}.storybook-stars img:nth-child(7){width:32px;left:2%}.storybook-stars img:nth-child(8){width:38px;right:2%}.storybook-stars img:nth-child(11),.storybook-stars img:nth-child(12){width:30px}@media(orientation:portrait){.storybook-stars img:nth-child(5){top:25%;left:8%}.storybook-stars img:nth-child(6){top:26%;right:8%}.storybook-stars img:nth-child(7){bottom:20%;left:6%}.storybook-stars img:nth-child(8){bottom:19%;right:6%}}@media(max-width:500px){.storybook-stars img{width:34px}.storybook-stars img:nth-child(2),.storybook-stars img:nth-child(3){width:28px}.storybook-stars img:nth-child(7),.storybook-stars img:nth-child(8){width:30px}}