:root{
  --wood-1:#3c2a1c; --wood-2:#241710; --wood-edge:#5a4028;
  --parch:#f0e7db; --parch-dim:#a89684;
  --teal-1:#19c2b1; --teal-2:#0e9c8e; --teal-glow:#19c2b199;
  --brass-1:#e6b653; --brass-2:#c9922e;
  --bg-1:#1c130c; --bg-2:#080503;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:"Outfit", system-ui, sans-serif; color:var(--parch);
  background:radial-gradient(150% 100% at 50% 0%, var(--bg-1), var(--bg-2));
  background-attachment:fixed;
  min-height:100vh; display:flex; justify-content:center;
  padding:26px 18px 44px; -webkit-font-smoothing:antialiased;
}
.wrap{ width:100%; max-width:520px; }

.hud{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; gap:12px; }
.brand .eyebrow{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--parch-dim); margin-bottom:6px; font-weight:600; }
.brand h1{ font-family:"Fraunces", serif; font-weight:900; font-size:34px; letter-spacing:.01em; line-height:1; text-shadow:0 1px 0 #00000060, 0 3px 10px #00000050; }
.brand h1 .dot{ color:var(--teal-1); text-shadow:0 0 16px var(--teal-glow); }
.scores{ display:flex; gap:10px; }
.stat{ background:linear-gradient(180deg,#2c2114,#181009); border:1px solid #00000060; border-top-color:#5b4a3880; border-radius:12px; padding:9px 15px; text-align:center; box-shadow:0 3px 10px #00000040; min-width:80px; }
.stat .label{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--parch-dim); font-weight:600; margin-bottom:3px; }
.stat .val{ font-family:"Fraunces", serif; font-weight:700; font-size:26px; line-height:1; color:var(--brass-1); font-variant-numeric:tabular-nums; }
.stat.best .val{ color:var(--teal-1); }

.boardwrap{ background:linear-gradient(155deg,var(--wood-edge),var(--wood-1) 34%,var(--wood-2)); border-radius:22px; padding:20px; box-shadow:0 14px 40px #00000070, inset 0 1px 0 #6e4e2e70, inset 0 0 0 1px #00000050; }
.board-inner{ background:radial-gradient(120% 90% at 50% 12%, #34241729, transparent); border-radius:14px; }
svg#board{ display:block; width:100%; height:auto; touch-action:manipulation; }

.hole{ cursor:default; }
.peg{ cursor:pointer; transition:transform .08s ease; }
.peg:active{ transform:scale(.94); }
.peg.selectable{ cursor:pointer; }
.target{ cursor:pointer; }

.hint{ text-align:center; font-size:13px; color:var(--parch-dim); margin:18px 0 16px; letter-spacing:.01em; min-height:18px; }
.hint b{ color:var(--teal-1); font-weight:600; }
.hint.win{ color:var(--teal-1); font-weight:600; }
.hint.dead{ color:var(--brass-1); font-weight:600; }

.controls{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn{ font-family:"Outfit",sans-serif; font-weight:600; font-size:13px; letter-spacing:.04em; color:var(--parch); background:linear-gradient(180deg,#3a2c1c,#221610); border:1px solid #00000060; border-top-color:#5b4a3880; border-radius:10px; padding:11px 18px; cursor:pointer; box-shadow:0 3px 8px #00000040; display:flex; align-items:center; gap:7px; transition:filter .12s ease, transform .06s ease; }
.btn:hover{ filter:brightness(1.12); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.4; cursor:default; filter:none; transform:none; }
.btn.primary{ background:linear-gradient(180deg,var(--brass-1),var(--brass-2)); color:#2a1c06; border-top-color:#ffe6a0; }
.ico{ width:15px; height:15px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

.panel{ margin-top:20px; background:linear-gradient(180deg,#241810c0,#160e08c0); border:1px solid #00000060; border-top-color:#4a3a2860; border-radius:16px; padding:18px 20px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; }
.panel h2{ font-family:"Fraunces",serif; font-weight:700; font-size:17px; margin-bottom:12px; color:var(--parch); }
.panel-head h2{ margin-bottom:14px; }

.styles{ display:flex; gap:9px; }
.stylebtn{ flex:1; font-family:"Outfit",sans-serif; font-weight:600; font-size:12.5px; color:var(--parch-dim); background:#0000002e; border:1px solid #00000050; border-radius:10px; padding:11px 8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; transition:all .14s ease; }
.stylebtn:hover{ color:var(--parch); background:#00000045; }
.stylebtn.active{ color:#04211e; background:linear-gradient(180deg,var(--teal-1),var(--teal-2)); border-top-color:#7ff0e4; }
.swatch{ width:100%; height:20px; border-radius:6px; box-shadow:inset 0 0 0 1px #0000004d; }
.sw-mono{ background:#e6b653; }
.sw-classic{ background:linear-gradient(90deg,#eef2f4 0 25%,#e2611c 25% 50%,#f4b81f 50% 75%,#2f57c4 75% 100%); }
.sw-unique{ background:linear-gradient(90deg,#e34b4b,#f0a032,#f4c81f,#7cc23f,#2bb5a6,#3f74d4,#8a52cf,#d44a9a); }

.steps{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.steps li{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--parch); }
.steps .n{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--teal-2); color:#04211e; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; font-family:"Fraunces",serif; margin-top:1px; }

.verdict{ margin-top:16px; border-top:1px solid #00000050; padding-top:14px; }
.verdict .vlabel{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--parch-dim); font-weight:600; margin-bottom:10px; }
.vgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.vcell{ text-align:center; background:#0000003a; border-radius:9px; padding:9px 6px; }
.vcell .num{ font-family:"Fraunces",serif; font-weight:900; font-size:20px; color:var(--brass-1); line-height:1; }
.vcell .rank{ font-size:10px; color:var(--parch-dim); margin-top:4px; letter-spacing:.02em; }
.vcell.top .num{ color:var(--teal-1); }

.foot{ text-align:center; margin-top:24px; }
.foot .about-studio{ font-family:"Fraunces",serif; font-weight:600; font-size:13px; color:var(--parch); }
.foot .about-meta{ font-size:11px; color:var(--parch-dim); margin-top:2px; }
.foot .about-copy{ font-size:10.5px; color:#6f5f4d; margin-top:8px; }

.overlay{ position:fixed; inset:0; background:#0a0603d0; backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; z-index:20; }
.overlay[hidden]{ display:none; }
.modal{ background:linear-gradient(160deg,#2c2114,#160e08); border:1px solid #00000060; border-top-color:#5b4a3880; border-radius:20px; padding:30px 34px; text-align:center; box-shadow:0 20px 60px #000000a0; max-width:340px; width:100%; animation:pop .22s ease; }
@keyframes pop{ from{ transform:scale(.9); opacity:0; } to{ transform:scale(1); opacity:1; } }
.modal-eyebrow{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--parch-dim); font-weight:600; margin-bottom:10px; }
.modal-verdict{ font-family:"Fraunces",serif; font-weight:900; font-size:40px; line-height:1; color:var(--teal-1); text-shadow:0 0 20px var(--teal-glow); margin-bottom:12px; }
.modal-verdict.mid{ color:var(--brass-1); text-shadow:0 0 18px #e6b65366; }
.modal-sub{ font-size:14px; color:var(--parch); margin-bottom:22px; line-height:1.5; }
.modal-btn{ width:100%; justify-content:center; padding:13px; font-size:15px; }

@media (max-width:420px){
  .brand h1{ font-size:30px; }
  .stat{ min-width:72px; padding:8px 12px; }
  .stat .val{ font-size:23px; }
  .boardwrap{ padding:15px; }
  .btn{ padding:10px 14px; font-size:12.5px; }
}

.btn.active{ background:linear-gradient(180deg,var(--teal-1),var(--teal-2)); color:#04211e; border-top-color:#7ff0e4; }