*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;
  background:radial-gradient(130% 90% at 50% 0%,#f6f1e4 0%,#e8e2cf 55%,#d6dcc6 100%);
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#2f3b33;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;border:0;outline:0;color:inherit}
#app{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap,10px);
  padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))}
#app.land{flex-direction:row}
#main{display:flex;flex-direction:column;align-items:center;gap:8px}
#top{display:flex;align-items:center;justify-content:space-between;gap:8px;width:var(--bs,360px)}
.info{flex:1;text-align:center;padding:4px 6px;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid rgba(80,100,80,.15)}
.sl{font-size:11px;font-weight:800;color:#6d8a74;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv{font-size:20px;font-weight:900;line-height:1.15;font-variant-numeric:tabular-nums}
.sv.bad{color:#c4473a}
.ib{width:44px;height:44px;flex:none;border-radius:14px;background:#fff;box-shadow:0 3px 0 #c5c9b4,0 6px 12px rgba(60,70,50,.15);display:flex;align-items:center;justify-content:center}
.ib:active{transform:translateY(2px);box-shadow:0 1px 0 #c5c9b4}
.ib svg{width:22px;height:22px;stroke:#3f5a48;fill:#3f5a48}
#bMenu svg{fill:none}
#bSound .off{display:none}#bSound.muted .on{display:none}#bSound.muted .off{display:inline}
#board{position:relative;width:var(--bs,360px);height:var(--bs,360px);display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);
  background:#fffdf7;border:3px solid #3f5a48;border-radius:12px;overflow:hidden;box-shadow:0 10px 26px rgba(50,60,40,.22)}
.c{position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid #cdd3c2;border-bottom:1px solid #cdd3c2;
  font-size:calc(var(--bs,360px)/9*.58);font-weight:800;color:#2f3b33;cursor:pointer;transition:background .12s}
.c.r2,.c.r5{border-bottom:2.5px solid #3f5a48}.c.r8{border-bottom:0}
.c.c2,.c.c5{border-right:2.5px solid #3f5a48}.c.c8{border-right:0}
.c.given{color:#2f3b33}
.c.user{color:#3b78b5}
.c.err{color:#d2463a;background:#fde3df!important}
.c.peer{background:#eef1e3}
.c.same{background:#d9e8cf}
.c.sel{background:#b9dbb1!important}
.c.hinted{animation:pop .5s}
.c.flash{animation:flash .7s}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes flash{0%{background:#fffdf7}35%{background:#fff1a8}100%{background:#fffdf7}}
.c .n{position:absolute;inset:6%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);pointer-events:none}
.c .n i{font-style:normal;font-size:calc(var(--bs,360px)/9*.25);font-weight:700;color:#6f7f73;display:flex;align-items:center;justify-content:center;line-height:1}
.c .n i.hl{color:#2f7a3c;font-weight:900}
#side{display:flex;flex-direction:column;align-items:center;gap:var(--gap,10px);width:var(--sw,360px)}
#tools{display:flex;gap:8px;width:100%;justify-content:space-between}
.tool{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:14px;background:rgba(255,255,255,.6);font-size:12px;font-weight:800;color:#3f5a48;min-width:0}
.tool span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tool svg{width:26px;height:26px;stroke:#3f5a48;fill:none}
.tool:active{transform:scale(.95)}
.tool.on{background:#3f5a48;color:#fff}.tool.on svg{stroke:#fff}
.tool .tag{position:absolute;top:2px;right:8%;font-size:10px;padding:1px 6px;border-radius:9px;background:#3f5a48;color:#fff}
.tool.on .tag{background:#f3c64b;color:#2f3b33}
.tool .tag.ad{background:#2fbf71}
#pad{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;width:100%}
#app.land #pad{grid-template-columns:repeat(3,1fr)}
.k{position:relative;height:var(--kh,56px);border-radius:14px;background:#fff;box-shadow:0 3px 0 #c5c9b4,0 6px 12px rgba(60,70,50,.12);font-size:calc(var(--kh,56px)*.5);font-weight:900;color:#3b78b5;
  display:flex;align-items:center;justify-content:center}
.k:active{transform:translateY(2px);box-shadow:0 1px 0 #c5c9b4}
.k small{position:absolute;bottom:2px;right:5px;font-size:10px;color:#9aa69a;font-weight:800}
.k.done{opacity:.28;pointer-events:none}
.notes .k{color:#6f7f73}
.hidden{display:none!important}
#toast{position:fixed;left:50%;top:16%;transform:translateX(-50%) translateY(-10px);background:rgba(40,55,45,.94);color:#fff;padding:10px 18px;border-radius:16px;
  font-weight:800;font-size:15px;opacity:0;transition:all .25s;pointer-events:none;z-index:30;text-align:center;max-width:86vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#modal{position:fixed;inset:0;background:rgba(40,50,40,.45);display:flex;align-items:center;justify-content:center;z-index:20;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.card{position:relative;background:linear-gradient(#fffdf7,#f1eedf);border-radius:26px;padding:24px 22px 20px;width:min(360px,90vw);max-height:92vh;overflow:auto;text-align:center;box-shadow:0 20px 50px rgba(30,40,30,.35);animation:cin .25s}
@keyframes cin{from{transform:scale(.9);opacity:0}}
.card h2{margin:4px 30px 10px;font-size:24px;color:#2f4a38}
#mBody{font-size:15px;line-height:1.4;color:#4d5e52;margin-bottom:14px}
#mBtns{display:flex;flex-direction:column;gap:9px}
.btn{height:50px;border-radius:16px;background:linear-gradient(#5f9b6c,#3f7a4e);color:#fff;font-weight:900;font-size:17px;box-shadow:0 4px 0 #2d5a39;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #2d5a39}
.btn.alt{background:#fff;color:#3f5a48;box-shadow:0 4px 0 #c5c9b4}
.btn.ad{background:linear-gradient(#5fe09a,#26b56a);color:#0d3a24;box-shadow:0 4px 0 #168a52}
.btn.gold{background:linear-gradient(#ffd866,#f0b429);color:#4a3500;box-shadow:0 4px 0 #b8851a}
.btn svg{width:22px;height:22px;fill:currentColor}
.btn small{font-weight:700;opacity:.8;font-size:13px}
.close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:rgba(63,90,72,.1);display:flex;align-items:center;justify-content:center}
.close svg{width:18px;height:18px;stroke:#3f5a48}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 4px}
.stats div{background:rgba(255,255,255,.75);border-radius:12px;padding:6px}
.stats b{display:block;font-size:20px;color:#2f4a38}
.stats span{font-size:11px;font-weight:800;color:#6d8a74;text-transform:uppercase}
.streak{font-weight:800;color:#b77d12;margin-top:6px}
#loader{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#f3eedf;transition:opacity .4s}
.lgrid{display:grid;grid-template-columns:repeat(3,22px);gap:5px}
.lgrid i{width:22px;height:22px;border-radius:6px;background:#5f9b6c;animation:lg 1.2s infinite ease-in-out}
.lgrid i:nth-child(2n){animation-delay:.2s;background:#8fbf8a}.lgrid i:nth-child(3n){animation-delay:.4s}
@keyframes lg{50%{transform:scale(.6);opacity:.5}}
.lbig{font-size:30px;font-weight:900;color:#2f4a38}
.bar{width:200px;height:8px;border-radius:4px;background:rgba(63,90,72,.15);overflow:hidden}
.bar i{display:block;height:100%;width:5%;background:#5f9b6c;transition:width .2s}
#tip{position:fixed;left:50%;top:max(6px,env(safe-area-inset-top));transform:translateX(-50%);z-index:15;background:rgba(40,55,45,.94);color:#fff;font-weight:800;font-size:15px;
  padding:10px 16px;border-radius:16px;text-align:center;max-width:min(92vw,520px);width:max-content;pointer-events:none;border:2px solid #f3c64b;animation:cin .3s}