@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap";:root{font-family:DM Sans,system-ui,sans-serif;color:#25342d;background:#f6f2e9;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #25342d;--muted: #718077;--green: #2e604b;--cream: #f6f2e9;--paper: #fffdf8;--line: #d9d5c9}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 12% 18%,rgb(219 231 213 / .7),transparent 28rem),radial-gradient(circle at 90% 75%,rgb(239 219 203 / .75),transparent 32rem),var(--cream)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible+.toggle{outline:3px solid #4d8c70;outline-offset:3px}.page-shell{width:min(100%,1160px);min-height:100vh;margin:0 auto;padding:0 clamp(18px,5vw,68px);display:flex;flex-direction:column}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgb(46 96 75 / .15)}.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-family:Fraunces,Georgia,serif;font-size:20px;font-weight:700;letter-spacing:-.025em}.brand-mark{width:37px;height:37px;display:grid;place-items:center;border-radius:11px 11px 15px 15px;color:#fffdf8;background:var(--green);font-family:Georgia,serif;font-size:23px;line-height:1;box-shadow:0 5px 14px #1f4a382e}.header-actions{display:flex;gap:9px}.icon-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgb(46 96 75 / .19);border-radius:50%;background:#fffdf899;color:var(--green);cursor:pointer;transition:transform .15s ease,background .15s ease}.icon-button:hover{transform:translateY(-2px);background:var(--paper)}.icon-button svg{width:18px;fill:currentColor}.icon-button span{font-weight:700;font-size:17px}.game-layout{flex:1;width:min(100%,580px);margin:0 auto;padding:clamp(46px,8vw,78px) 0 42px}.intro{text-align:center;margin-bottom:29px}.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px;color:#51715f;font-size:11px;line-height:1;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.eyebrow span{width:7px;height:7px;border-radius:50%;background:#d68f72}.intro h1,.modal h2{margin:0;font-family:Fraunces,Georgia,serif;font-size:clamp(38px,7vw,54px);line-height:1.08;letter-spacing:-.045em}.intro p{max-width:480px;margin:14px auto 0;color:#657269;font-size:15px;line-height:1.55}.game-card{padding:clamp(17px,4vw,28px);border:1px solid rgb(55 78 65 / .13);border-radius:26px;background:#fffdf8d1;box-shadow:0 30px 75px #40402a17,0 2px 8px #40402a0a;backdrop-filter:blur(12px)}.game-meta{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}.game-meta>div{display:grid;gap:2px}.meta-label{color:#879087;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.game-meta strong,.timer{font-size:14px;font-weight:700}.timer-wrap{text-align:right}.timer{padding:0;border:0;color:var(--ink);background:transparent;font-variant-numeric:tabular-nums;cursor:pointer}.timer:after{content:" Ⅱ";color:#829087;font-size:10px;letter-spacing:-2px}.timer.paused:after{content:" ▶";letter-spacing:0}.size-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:14px;padding:4px;border:1px solid #dedcd2;border-radius:14px;background:#efeee7}.size-switch button{display:grid;gap:1px;padding:8px 5px 7px;border:0;border-radius:10px;color:#758078;background:transparent;cursor:pointer}.size-switch button strong{font-size:11px;font-weight:700}.size-switch button span{font-size:9px;font-variant-numeric:tabular-nums}.size-switch button.selected{color:#294b3b;background:#fffdf8;box-shadow:0 2px 8px #2e42371c}.status{min-height:38px;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;padding:8px 13px;border-radius:12px;color:#65736a;background:#f1f1e9;font-size:12px;font-weight:600;text-align:center;transition:color .2s,background .2s}.status-dot{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:#7da48d}.status.error{color:#9c4f43;background:#fae7e2}.status.error .status-dot{background:#cf6d5f}.status.complete{color:#286047;background:#e3f0e6}.board-wrap{position:relative}.board{--size: 8;display:grid;grid-template-columns:repeat(var(--size),1fr);aspect-ratio:1;overflow:hidden;border:2px solid #36463d;border-radius:7px;background:#36463d;box-shadow:0 8px 22px #3441391f;user-select:none;-webkit-user-select:none;touch-action:none}.cell{position:relative;min-width:0;padding:0;border:0;border-right:1px solid rgb(47 64 55 / .16);border-bottom:1px solid rgb(47 64 55 / .16);color:#25342d;cursor:pointer;transition:transform .12s}.cell:active{transform:scale(.94)}.cell.region-top{border-top:2px solid #36463d}.cell.region-left{border-left:2px solid #36463d}.cell.region-right{border-right:2px solid #36463d}.cell.region-bottom{border-bottom:2px solid #36463d}.queen-mark{position:absolute;inset:7%;display:none;place-items:center;animation:crown-in .18s cubic-bezier(.2,.9,.3,1.3)}.cell.has-queen .queen-mark{display:grid}.queen-mark svg{width:89%;height:89%;overflow:visible;transform:rotate(-4deg);filter:drop-shadow(0 2px 1px rgb(30 50 40 / .2))}.crown-body{fill:#294b3b;stroke:#1f3a2e;stroke-width:1.2;stroke-linejoin:round}.crown-cut{fill:#f7e78e;opacity:.92}.crown-base{fill:none;stroke:#1f3a2e;stroke-width:3.4;stroke-linecap:round}.x-mark{display:none}.cell.has-x .x-mark{display:block}.x-mark:before,.x-mark:after{content:"";position:absolute;top:50%;left:50%;width:38%;height:4px;border-radius:2px;background:#203027d1}.x-mark:before{transform:translate(-50%,-50%) rotate(45deg)}.x-mark:after{transform:translate(-50%,-50%) rotate(-45deg)}.cell.conflict:after{content:"";position:absolute;inset:4px;border:3px solid #c95143;border-radius:50%;animation:conflict .7s ease-in-out infinite alternate}.cell.hint-pulse{z-index:5;animation:hint-pulse .8s ease-in-out 2}.paused-panel{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:7px;color:var(--green);background:#f7f4ebf0;backdrop-filter:blur(8px)}.paused-panel[hidden]{display:none}.paused-panel>span{font-size:46px}.paused-panel strong{font-family:Fraunces,serif;font-size:22px}.text-button{padding:5px;border:0;color:var(--green);background:transparent;font-weight:700;text-decoration:underline;cursor:pointer}.controls{display:grid;grid-template-columns:repeat(3,1fr);margin:21px 0 18px}.control{display:flex;flex-direction:column;align-items:center;gap:5px;padding:3px 8px;border:0;border-right:1px solid #dfddd4;color:#56655c;background:transparent;font-size:11px;font-weight:600;cursor:pointer}.control:last-child{border-right:0}.control:disabled{opacity:.32;cursor:default}.control:not(:disabled):hover{color:var(--green)}.control svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.auto-x-row{display:flex;align-items:center;gap:12px;padding:14px 15px;border:1px solid #e0ded4;border-radius:14px;background:#f6f4edbf}.auto-x-row>span:last-child{display:grid;gap:1px}.auto-x-row strong{font-size:12px}.auto-x-row small{color:#7b857e;font-size:10px}.auto-x-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;color:var(--green);background:#dde9df;font-size:20px;line-height:1}.gesture-note{margin:16px 0 0;color:#7a847d;font-size:10px;text-align:center}.gesture-note strong{color:#54685b}footer{display:flex;justify-content:space-between;padding:22px 0 30px;border-top:1px solid rgb(46 96 75 / .13);color:#8a918b;font-size:11px}footer a{color:#63776a;text-decoration:none}footer a:hover{text-decoration:underline}.modal{width:min(92vw,440px);padding:0;border:0;border-radius:24px;color:var(--ink);background:transparent;overflow:visible}.modal::backdrop{background:#1a27208c;backdrop-filter:blur(5px)}.modal-card{position:relative;padding:36px;border-radius:24px;background:var(--paper);box-shadow:0 28px 90px #0d1d1540;text-align:center}.modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;color:#68746d;background:#f0efe9;font-size:22px;cursor:pointer}.modal-icon,.complete-crown{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 17px;border-radius:19px;color:#fff;background:var(--green);font-family:Georgia,serif;font-size:35px;box-shadow:0 8px 20px #2e604b38}.modal .eyebrow{margin-bottom:8px}.modal h2{font-size:31px}.rule-list{display:grid;gap:15px;margin:27px 0;text-align:left}.rule-list>div{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}.rule-list span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--green);background:#e8efe8;font-size:11px;font-weight:700}.rule-list p{margin:2px 0 0;color:#66736b;font-size:12px;line-height:1.5}.primary-button,.secondary-button{width:100%;min-height:48px;border-radius:13px;font-weight:700;cursor:pointer}.primary-button{border:0;color:#fff;background:var(--green);box-shadow:0 7px 18px #2e604b33}.primary-button:hover{background:#244f3d}.secondary-button{border:1px solid #d9dbd4;color:var(--green);background:transparent}.complete-copy{margin:15px 0 24px;color:#6e7972;font-size:13px}.complete-actions{display:grid;gap:9px}.complete-crown{animation:crown-float 1.8s ease-in-out infinite alternate}.confetti{position:absolute;inset:0;overflow:hidden;border-radius:24px;pointer-events:none}.confetti i{position:absolute;width:7px;height:15px;top:-20px;background:#d68f72;animation:confetti 2.6s ease-in infinite}.confetti i:nth-child(1){left:10%;animation-delay:.1s;transform:rotate(20deg)}.confetti i:nth-child(2){left:26%;animation-delay:1.1s;background:#7caa91}.confetti i:nth-child(3){left:43%;animation-delay:.5s;background:#e3bd65}.confetti i:nth-child(4){left:60%;animation-delay:1.5s;background:#9ab9db}.confetti i:nth-child(5){left:78%;animation-delay:.8s;background:#bd9ad2}.confetti i:nth-child(6){left:91%;animation-delay:1.9s}.toast{position:fixed;left:50%;bottom:26px;z-index:100;max-width:min(90vw,440px);padding:12px 17px;border-radius:12px;color:#fff;background:#263c31;box-shadow:0 9px 26px #0f201740;font-size:12px;font-weight:600;text-align:center;opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .18s,transform .18s}.toast.visible{opacity:1;transform:translate(-50%)}.modal-toast{position:absolute;left:50%;bottom:-52px;z-index:2;width:max-content;max-width:min(88vw,390px);padding:11px 16px;border:1px solid rgb(255 255 255 / .16);border-radius:999px;color:#fff;background:#263c31;box-shadow:0 9px 26px #0f20174d;font-size:12px;font-weight:600;text-align:center;opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:opacity .18s,transform .18s}.modal-toast.visible{opacity:1;transform:translate(-50%)}@keyframes crown-in{0%{opacity:0;transform:scale(.4) rotate(-12deg)}}@keyframes conflict{to{transform:scale(1.07);opacity:.65}}@keyframes hint-pulse{50%{filter:brightness(1.2);box-shadow:inset 0 0 0 5px #fff8b8}}@keyframes crown-float{to{transform:translateY(-6px) rotate(2deg)}}@keyframes confetti{to{top:110%;transform:rotate(420deg)}}@media(max-width:520px){.page-shell{padding:0 12px}.topbar{height:68px;padding:0 5px}.brand{font-size:18px}.brand-mark{width:34px;height:34px}.game-layout{padding-top:37px}.intro h1{font-size:38px}.intro p{padding:0 15px;font-size:13px}.game-card{padding:14px;border-radius:20px}.queen-mark{font-size:min(7vw,30px)}footer{margin:0 6px}.modal-card{padding:32px 24px 25px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
