*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;touch-action:manipulation}#app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}.game{width:min(92vw,calc(100dvh - 200px),460px);display:flex;flex-direction:column;gap:12px}.crumb{font-size:14px}.crumb a{color:var(--accent);text-decoration:none;font-weight:700}.crumb a:hover{text-decoration:underline}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.title{font-size:clamp(28px,8vw,44px);font-weight:800;line-height:1;letter-spacing:-1px;background:linear-gradient(180deg,var(--text),color-mix(in srgb,var(--text) 62%,var(--accent)));-webkit-background-clip:text;background-clip:text;color:transparent}.level{background:var(--surface);color:var(--text);border:2px solid var(--line);border-radius:8px;padding:8px 10px;font-size:14px;font-weight:700;cursor:pointer;transition:border-color .14s ease,filter .14s ease}.level:hover{border-color:var(--accent)}.level:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stats{display:flex;gap:8px}.stat{flex:1;background:linear-gradient(160deg,#ffffff1a,#0000000f),var(--board-bg);color:var(--accent-text);border-radius:10px;padding:7px 10px;text-align:center;box-shadow:inset 0 1px #ffffff24,0 2px 6px #00000024}.stat .label{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.85;font-weight:700}.stat .value{font-size:22px;font-weight:800;line-height:1.1}.status{font-size:16px;font-weight:700;text-align:center;min-height:22px;letter-spacing:.2px}.board-wrap{position:relative;width:100%}.board{display:grid;grid-template-columns:repeat(8,1fr);width:100%;aspect-ratio:1 / 1;padding:3.1%;border-radius:14px;background:linear-gradient(150deg,#6f5033,#543a24 55%,#422c1a);box-shadow:0 14px 34px #0000004d,0 2px 6px #00000038,inset 0 0 0 1.5px #ffffff14,inset 0 0 22px #00000061;overflow:hidden}.sq{position:relative;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;transition:filter .14s ease,box-shadow .16s ease}.sq.light{--sheen: linear-gradient(135deg, rgba(255,255,255,.18), rgba(120,80,40,.05) 60%, rgba(90,60,30,.1));background-color:#ecd3a7;background-image:var(--sheen)}.sq.dark{--sheen: linear-gradient(135deg, rgba(255,235,205,.14), rgba(60,38,20,.05) 55%, rgba(35,22,12,.2));background-color:#a9794e;background-image:var(--sheen)}.sq.dark:hover,.sq.light:hover{filter:brightness(1.06)}.sq:before,.sq:after{position:absolute;font-size:clamp(8px,1.9vw,11px);font-weight:800;line-height:1;letter-spacing:.3px;pointer-events:none;opacity:.72}.sq:before{top:3px;left:4px}.sq:after{bottom:2px;right:4px}.sq.light:before,.sq.light:after{color:#8a5a2c}.sq.dark:before,.sq.dark:after{color:#f2ddbd}.board .sq:nth-child(1):before{content:"8"}.board .sq:nth-child(9):before{content:"7"}.board .sq:nth-child(17):before{content:"6"}.board .sq:nth-child(25):before{content:"5"}.board .sq:nth-child(33):before{content:"4"}.board .sq:nth-child(41):before{content:"3"}.board .sq:nth-child(49):before{content:"2"}.board .sq:nth-child(57):before{content:"1"}.board .sq:nth-child(57):after{content:"a"}.board .sq:nth-child(58):after{content:"b"}.board .sq:nth-child(59):after{content:"c"}.board .sq:nth-child(60):after{content:"d"}.board .sq:nth-child(61):after{content:"e"}.board .sq:nth-child(62):after{content:"f"}.board .sq:nth-child(63):after{content:"g"}.board .sq:nth-child(64):after{content:"h"}.piece{font-size:clamp(20px,8.4vw,44px);line-height:1;cursor:pointer;user-select:none;-webkit-user-select:none;transition:transform 90ms ease}.piece.filled.white{color:#f8f4ea;text-shadow:0 0 1px rgba(48,34,20,.95),0 1px 0 rgba(60,42,24,.55);filter:drop-shadow(0 2px 2.5px rgba(0,0,0,.42))}.piece.filled.black{color:#241f1b;text-shadow:0 0 1px rgba(0,0,0,.55),0 1px 0 rgba(255,250,240,.2);filter:drop-shadow(0 2px 2.5px rgba(0,0,0,.42))}.piece.filled:active{transform:scale(.9)}.sq.sel{box-shadow:inset 0 0 0 4px #f4c650f2,inset 0 0 16px #f4c65066}.sq.cursor{outline:3px solid #4aa3ff;outline-offset:-3px;border-radius:3px;z-index:4}.sq.target{background-image:radial-gradient(circle at center,rgba(28,18,8,.34) 0 15%,transparent 16%),var(--sheen)}.sq.capture{background-image:radial-gradient(circle at center,transparent 0 34%,rgba(206,58,42,.85) 37% 45%,transparent 47%),var(--sheen)}.sq.target:hover,.sq.capture:hover{filter:brightness(1.08)}.sq.check{box-shadow:inset 0 0 0 3px #e0453af2,inset 0 0 20px #e0453a80;animation:check-pulse 1.15s ease-in-out infinite}@keyframes check-pulse{0%,to{box-shadow:inset 0 0 0 3px #e0453af2,inset 0 0 12px #e0453a61}50%{box-shadow:inset 0 0 0 3px #e0453af2,inset 0 0 24px #e0453a9e}}@media(prefers-reduced-motion:reduce){.sq.check{animation:none}}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--overlay-bg);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:14px;z-index:10}.overlay[hidden]{display:none}.overlay-card{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;padding:22px 26px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px #00000047}.overlay-msg{font-size:clamp(20px,6vw,30px);font-weight:800;color:var(--text)}.promo-row{display:flex;gap:8px}.promo-btn{width:clamp(48px,14vw,64px);height:clamp(48px,14vw,64px);font-size:clamp(28px,9vw,40px);line-height:1;background:linear-gradient(160deg,#ecd3a7,#d8b98a);color:#241f1b;border:2px solid var(--line);border-radius:10px;cursor:pointer;text-shadow:0 1px 0 rgba(255,250,240,.35);filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));transition:filter .14s ease,transform 90ms ease,border-color .14s ease}.promo-btn:hover{filter:brightness(1.06);border-color:var(--accent)}.promo-btn:active{transform:scale(.94)}.controls{display:flex;align-items:center;justify-content:space-between;gap:10px}.how{font-size:13px;opacity:.85;flex:1}.how b{font-weight:700}.btn{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff 12%),var(--accent));color:var(--accent-text);border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 2px 6px #00000029,inset 0 1px #ffffff2e;transition:filter .14s ease,transform 90ms ease}.btn:hover{filter:brightness(1.06)}.btn:active{filter:brightness(.95);transform:translateY(1px)}@media(max-width:375px){.how{font-size:12px}}