*{box-sizing:border-box;margin:0;padding:0}:root{--cell-face: linear-gradient(155deg, #ece3d4 0%, #d7cbbb 52%, #c6b9a7 100%);--cell-face-hover: linear-gradient(155deg, #f3ecdf 0%, #ddd2c2 52%, #ccbfad 100%);--cell-edge-hi: rgba(255, 253, 246, .85);--cell-edge-lo: rgba(120, 100, 78, .38);--cell-drop: 0 2px 3px rgba(90, 72, 52, .22);--open-bg: #efe8dc;--open-inset: inset 0 2px 4px rgba(120, 98, 74, .22), inset 0 0 0 1px rgba(150, 130, 106, .14);--board-face: linear-gradient(160deg, #c7b8a9 0%, #b3a494 100%);--board-inset: inset 0 2px 5px rgba(70, 54, 38, .28), inset 0 -1px 0 rgba(255,255,255,.25);--mine-bg: radial-gradient(circle at 38% 34%, #ff8a80 0%, #ef5350 55%, #d84343 100%);--n1: #1976d2;--n2: #388e3c;--n3: #d32f2f;--n4: #1a237e;--n5: #7b1e1e;--n6: #00838f;--n7: #212121;--n8: #616161;--num-shadow: none;--flag-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.5 21h9' stroke='%234a3d30' stroke-width='2.2' stroke-linecap='round'/><path d='M11 3.5v17.5' stroke='%234a3d30' stroke-width='2.2' stroke-linecap='round'/><path d='M11 4l9.2 3.1L11 10.2z' fill='%23e53935'/><path d='M11 4l9.2 3.1L11 10.2z' fill='%23ffffff' fill-opacity='.14'/></svg>");--mine-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g stroke='%23181410' stroke-width='2.1' stroke-linecap='round'><path d='M12 2.6v18.8M2.6 12h18.8M5.7 5.7l12.6 12.6M18.3 5.7L5.7 18.3'/></g><circle cx='12' cy='12' r='5.6' fill='%23181410'/><circle cx='9.9' cy='9.9' r='1.7' fill='%23ffffff' fill-opacity='.9'/></svg>")}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--cell-face: linear-gradient(155deg, #6f6355 0%, #5b5045 52%, #4d4337 100%);--cell-face-hover: linear-gradient(155deg, #7a6d5d 0%, #64584c 52%, #55493c 100%);--cell-edge-hi: rgba(255, 240, 216, .16);--cell-edge-lo: rgba(0, 0, 0, .42);--cell-drop: 0 2px 4px rgba(0, 0, 0, .4);--open-bg: #2b2620;--open-inset: inset 0 2px 4px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 240, 216, .06);--board-face: linear-gradient(160deg, #52473c 0%, #40372d 100%);--board-inset: inset 0 2px 6px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(255, 240, 216, .06);--mine-bg: radial-gradient(circle at 38% 34%, #d96a63 0%, #b23b3b 58%, #8f2f2f 100%);--n1: #64b5f6;--n2: #81c784;--n3: #ef5350;--n4: #7c8bd8;--n5: #d0917a;--n6: #4dd0e1;--n7: #e9eef2;--n8: #b0bec5;--num-shadow: 0 1px 1px rgba(0, 0, 0, .35);--flag-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.5 21h9' stroke='%23dccdb8' stroke-width='2.2' stroke-linecap='round'/><path d='M11 3.5v17.5' stroke='%23dccdb8' stroke-width='2.2' stroke-linecap='round'/><path d='M11 4l9.2 3.1L11 10.2z' fill='%23ef5350'/><path d='M11 4l9.2 3.1L11 10.2z' fill='%23ffffff' fill-opacity='.16'/></svg>")}}:root[data-theme=dark]{--cell-face: linear-gradient(155deg, #6f6355 0%, #5b5045 52%, #4d4337 100%);--cell-face-hover: linear-gradient(155deg, #7a6d5d 0%, #64584c 52%, #55493c 100%);--cell-edge-hi: rgba(255, 240, 216, .16);--cell-edge-lo: rgba(0, 0, 0, .42);--cell-drop: 0 2px 4px rgba(0, 0, 0, .4);--open-bg: #2b2620;--open-inset: inset 0 2px 4px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 240, 216, .06);--board-face: linear-gradient(160deg, #52473c 0%, #40372d 100%);--board-inset: inset 0 2px 6px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(255, 240, 216, .06);--mine-bg: radial-gradient(circle at 38% 34%, #d96a63 0%, #b23b3b 58%, #8f2f2f 100%);--n1: #64b5f6;--n2: #81c784;--n3: #ef5350;--n4: #7c8bd8;--n5: #d0917a;--n6: #4dd0e1;--n7: #e9eef2;--n8: #b0bec5;--num-shadow: 0 1px 1px rgba(0, 0, 0, .35);--flag-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.5 21h9' stroke='%23dccdb8' stroke-width='2.2' stroke-linecap='round'/><path d='M11 3.5v17.5' stroke='%23dccdb8' stroke-width='2.2' stroke-linecap='round'/><path d='M11 4l9.2 3.1L11 10.2z' fill='%23ef5350'/><path d='M11 4l9.2 3.1L11 10.2z' fill='%23ffffff' fill-opacity='.16'/></svg>")}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;overscroll-behavior:none;touch-action:manipulation}#app{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:16px}.game{width:min(94vw,560px);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:12px}.title{font-size:clamp(30px,8.5vw,44px);font-weight:800;line-height:1;letter-spacing:-1px}.diffs{display:flex;gap:8px}.diff{flex:1;background:var(--surface);color:var(--text);border:2px solid var(--line);border-radius:8px;padding:8px 6px;font-size:13px;font-weight:700;cursor:pointer;transition:border-color .14s ease,background .14s ease,transform 80ms ease,box-shadow .14s ease}.diff:hover{border-color:var(--accent);transform:translateY(-1px)}.diff:active{transform:translateY(0)}.diff.active{background:var(--accent);color:var(--accent-text);border-color:var(--accent);box-shadow:0 3px 10px #78644e47}.stats{display:flex;gap:8px}.stat{flex:1;background:var(--board-face);color:var(--accent-text);border-radius:8px;padding:6px 10px;text-align:center;box-shadow:var(--board-inset)}.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;font-variant-numeric:tabular-nums}.board-wrap{position:relative;border-radius:14px}.board-scroll{overflow:auto;border-radius:14px;-webkit-overflow-scrolling:touch;display:flex;justify-content:safe center}.board{display:grid;grid-template-columns:repeat(var(--cols),var(--cell, 30px));gap:3px;padding:7px;background:var(--board-face);border-radius:14px;box-shadow:var(--board-inset),0 6px 18px #3c2e202e;touch-action:pan-x pan-y}.cell{width:var(--cell, 30px);height:var(--cell, 30px);background:var(--cell-face);border:none;border-radius:5px;font-size:calc(var(--cell, 30px) * .52);font-weight:800;line-height:1;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center;padding:0;user-select:none;-webkit-user-select:none;box-shadow:inset 0 1px 0 var(--cell-edge-hi),inset 0 -2px 3px var(--cell-edge-lo),var(--cell-drop);transition:background .12s ease,transform 70ms ease,box-shadow .12s ease,filter .12s ease}.cell.cursor{outline:3px solid var(--accent);outline-offset:-3px;position:relative;z-index:4}.cell:not(.open):hover{background:var(--cell-face-hover)}.cell:not(.open):active{transform:translateY(1px) scale(.97);box-shadow:inset 0 1px 2px var(--cell-edge-lo)}.cell.open{background:var(--open-bg);cursor:default;box-shadow:var(--open-inset);transform:none;animation:cellReveal .15s cubic-bezier(.34,1.4,.64,1)}@keyframes cellReveal{0%{transform:scale(.82);opacity:.45}60%{transform:scale(1.04);opacity:1}to{transform:scale(1);opacity:1}}.cell.n1,.cell.n2,.cell.n3,.cell.n4,.cell.n5,.cell.n6,.cell.n7,.cell.n8{text-shadow:var(--num-shadow)}.cell.n1{color:var(--n1)}.cell.n2{color:var(--n2)}.cell.n3{color:var(--n3)}.cell.n4{color:var(--n4)}.cell.n5{color:var(--n5)}.cell.n6{color:var(--n6)}.cell.n7{color:var(--n7)}.cell.n8{color:var(--n8)}.cell.flag{color:transparent;font-size:0;background-image:var(--flag-img),var(--cell-face);background-repeat:no-repeat;background-position:center,center;background-size:66%,cover;animation:flagPop .18s cubic-bezier(.34,1.56,.64,1)}@keyframes flagPop{0%{transform:scale(.55) rotate(-8deg)}60%{transform:scale(1.12) rotate(2deg)}to{transform:scale(1) rotate(0)}}.cell.mine{color:transparent;font-size:0;background-image:var(--mine-img),var(--mine-bg);background-repeat:no-repeat;background-position:center,center;background-size:60%,cover;box-shadow:var(--open-inset),0 0 0 1px #b4322866;animation:mineFlash .52s ease}@keyframes mineFlash{0%{filter:brightness(2.1) saturate(1.4)}25%{filter:brightness(1.3)}to{filter:brightness(1)}}.cell.wrong{color:#fff;background:var(--mine-bg);font-size:calc(var(--cell, 30px) * .5);text-shadow:0 1px 2px rgba(0,0,0,.4)}.btn{background:var(--accent);color:var(--accent-text);border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px #78644e38;transition:filter .12s ease,transform 80ms ease,box-shadow .12s ease}.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}.btn:active{filter:brightness(.95);transform:translateY(0);box-shadow:0 1px 4px #78644e33}.overlay{position:absolute;inset:0;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;background:var(--overlay-bg);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10;opacity:0;pointer-events:none;transition:opacity .22s ease}.overlay.show{opacity:1;pointer-events:auto}.overlay.over:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at center,#e539358c,#e5393500 70%);animation:boomFlash .64s ease-out;pointer-events:none}@keyframes boomFlash{0%{opacity:0;transform:scale(.6)}30%{opacity:1}to{opacity:0;transform:scale(1.15)}}.overlay.win{box-shadow:inset 0 0 60px #43a04759;animation:winGlow 1.2s ease-in-out}@keyframes winGlow{0%{box-shadow:inset 0 0 #43a04700}40%{box-shadow:inset 0 0 70px #43a04780}to{box-shadow:inset 0 0 60px #43a04759}}.overlay .msg{font-size:clamp(28px,9vw,44px);font-weight:800}.overlay.over .msg{color:#ef6a4b;text-shadow:0 2px 14px rgba(239,106,75,.4)}.overlay.win .msg{color:#43a047;text-shadow:0 2px 16px rgba(67,160,71,.45)}.overlay .sub{font-size:15px;color:var(--text);opacity:.9}.overlay .actions{display:flex;gap:10px;margin-top:8px}.how{font-size:13px;opacity:.85;line-height:1.5}.how b{font-weight:700}@media(prefers-reduced-motion:reduce){.cell,.cell.open,.cell.flag,.cell.mine,.overlay,.overlay.over:before,.overlay.win{animation:none!important}}