:root{--cream:#fff7df;--paper:#fffdf5;--ink:#3d362f;--muted:#887d70;--orange:#ff8f5a;--orange-dark:#e76e38;--mint:#69c9ae;--blue:#78b9e6;--line:#6e6256;--cell:min(7.4vw,34px);--clue:min(16vw,72px);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--ink);background:#f6dcae}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 5%,#fff9e8 0 8%,transparent 9%),linear-gradient(#f9e7bd,#f2d19a)}button{font:inherit;color:inherit}.app{width:min(100%,600px);min-height:100vh;margin:auto;background:var(--cream);box-shadow:0 0 40px #76552c33;overflow:hidden}.screen{display:none;min-height:100vh;padding:18px}.screen.active{display:block}.title-screen{text-align:center;padding-top:max(48px,8vh);background:radial-gradient(circle at 50% 20%,#fff 0 4%,transparent 4.5%),var(--cream)}.hero-mark{width:86px;height:86px;margin:auto;display:grid;place-items:center;border-radius:28px;background:var(--orange);color:white;font-size:54px;transform:rotate(-4deg);box-shadow:0 7px 0 #d96d3c}.eyebrow{margin:28px 0 8px;color:var(--orange-dark);font-weight:800;letter-spacing:.18em}.title-screen h1{font-size:clamp(38px,12vw,60px);line-height:1.08;margin:0;letter-spacing:.06em}.lead{color:var(--muted);font-weight:700;margin:20px auto 34px}.stack{display:grid;gap:13px;max-width:350px;margin:auto}button{min-height:44px;border:0;border-radius:15px;background:#fff;box-shadow:0 3px 0 #d7c6a5;font-weight:800;cursor:pointer}button:focus-visible{outline:4px solid #2d79bd;outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}.primary{background:var(--orange);color:#fff;box-shadow:0 5px 0 var(--orange-dark)}.big{font-size:22px;min-height:58px}.secondary{border:2px solid #e7c99e}.text-button{background:transparent;box-shadow:none;color:var(--muted)}.page-header{height:62px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;text-align:center;gap:8px}.page-header h2{font-size:21px;margin:0}.icon-button{width:44px;padding:0;font-size:26px;background:#fff8}.puzzle-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:18px 0}.puzzle-card{padding:10px;text-align:left;background:#fff;border:3px solid transparent}.puzzle-card.cleared{border-color:var(--mint)}.puzzle-art{aspect-ratio:1;border-radius:13px;background:#f4e6c8;display:grid;place-items:center;font-size:58px;overflow:hidden}.puzzle-art img{width:100%;height:100%;object-fit:cover}.puzzle-meta{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:13px}.puzzle-name{font-size:17px;margin:4px 0}.badge{color:#27836b}.game-screen{padding:10px 10px 22px}.game-header{height:55px}.game-header h2{font-size:18px}.stage-label{font-size:11px;color:var(--orange-dark);margin:0;font-weight:800}.status-row{display:flex;justify-content:space-between;min-height:28px;padding:3px 8px;color:var(--muted);font-size:13px;font-weight:700}.board-wrap{display:grid;grid-template-columns:var(--clue) calc(var(--cell)*10);grid-template-rows:var(--clue) calc(var(--cell)*10);justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none}.corner{grid-area:1/1;background:#f2dfb9;border-radius:9px 0 0 0}.column-clues{grid-area:1/2;display:grid;grid-template-columns:repeat(10,var(--cell))}.row-clues{grid-area:2/1;display:grid;grid-template-rows:repeat(10,var(--cell))}.clue{display:flex;align-items:center;justify-content:center;font-size:clamp(9px,2.7vw,13px);font-weight:800;line-height:1.05;background:#f2dfb9}.column-clues .clue{flex-direction:column;border-right:1px solid #c9b693}.row-clues .clue{gap:4px;border-bottom:1px solid #c9b693;padding-right:5px;justify-content:flex-end}.clue.done{color:#a99c88;text-decoration:line-through}.board{grid-area:2/2;display:grid;grid-template-columns:repeat(10,var(--cell));grid-template-rows:repeat(10,var(--cell));border:2px solid var(--line);background:#fff}.cell{width:var(--cell);height:var(--cell);min-height:0;border:0;border-right:1px solid #c9c0b5;border-bottom:1px solid #c9c0b5;border-radius:0;box-shadow:none;padding:0;background:#fff;position:relative}.cell:nth-child(5n){border-right:2px solid var(--line)}.cell:nth-child(n+41):nth-child(-n+50){border-bottom:2px solid var(--line)}.cell.filled{background:var(--orange)}.cell.cross::before,.cell.cross::after{content:"";position:absolute;left:22%;top:48%;width:56%;height:2px;background:#718399;border-radius:3px;transform:rotate(45deg)}.cell.cross::after{transform:rotate(-45deg)}.cell.mistake{animation:shake .28s}.toast{height:25px;margin:4px;text-align:center;color:var(--orange-dark);font-weight:900}.mode-group{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:420px;margin:auto}.mode{border:2px solid #ead3ad}.mode.active{background:var(--ink);color:#fff;box-shadow:0 3px 0 #17130f}.tool-group{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:420px;margin:12px auto}.tool-group button{display:grid;place-items:center;font-size:21px;padding:7px}.tool-group span{font-size:11px}.modal-backdrop{position:fixed;inset:0;background:#2c231db8;z-index:20;display:grid;place-items:center;padding:20px}.modal-backdrop[hidden],.start-overlay[hidden]{display:none}.modal{width:min(100%,390px);max-height:90vh;overflow:auto;background:var(--paper);border-radius:25px;padding:24px;text-align:center;box-shadow:0 12px 45px #0005}.modal h2{font-size:27px;margin:0 0 12px}.modal p{color:var(--muted)}.modal-actions{display:grid;gap:10px;margin-top:20px}.sound-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e7dcc8}.toggle[aria-pressed="true"]{background:var(--mint);color:#fff}.complete-art{width:180px;aspect-ratio:1;margin:10px auto;border-radius:28px;background:#f2dfb9;display:grid;place-items:center;font-size:90px}.complete-art img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.start-overlay{position:fixed;inset:0;z-index:15;display:grid;place-items:center;pointer-events:none;background:#fff6}.start-overlay strong{font-size:40px;color:var(--orange-dark);animation:pop .55s}.confetti{position:fixed;inset:0;pointer-events:none;z-index:19;overflow:hidden}.confetti i{position:absolute;top:-20px;width:10px;height:18px;animation:fall 1.6s linear forwards}.board.flash{animation:flash .7s}.save-warning{color:#b24c35!important}@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}@keyframes pop{50%{transform:scale(1.2)}}@keyframes fall{to{transform:translateY(105vh) rotate(540deg)}}@keyframes flash{50%{filter:brightness(1.25);transform:scale(1.02)}}
@media(max-width:370px){:root{--clue:55px}.screen{padding-left:6px;padding-right:6px}.clue{font-size:9px}.mode-group,.tool-group{gap:5px}}
@media(orientation:landscape) and (max-height:600px){.app{max-width:900px}.game-screen{display:none}.game-screen.active{display:grid;grid-template-columns:1fr 290px;grid-template-rows:auto auto 1fr;column-gap:14px}.game-header,.status-row{grid-column:1/-1}.board-wrap{grid-column:1;grid-row:3}.game-screen>.toast,.game-screen>.mode-group,.game-screen>.tool-group{grid-column:2}.mode-group{width:100%;align-self:end}.tool-group{width:100%;align-self:start}.toast{align-self:end}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}