@font-face{font-family:'MT EB Garamond';src:url(../../../assets/fonts/EBGaramond-var.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'MT Lato';src:url(../../../assets/fonts/Lato-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'MT Lato';src:url(../../../assets/fonts/Lato-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
:root{--g:#0f3d2e;--g2:#14503c;--gold:#c9a24a;--cream:#f4efe2;--blue:#2463b3}
*{box-sizing:border-box}
body{margin:0;background:#0b2e23;color:var(--cream);font:400 16px/1.5 'MT Lato',Arial,sans-serif}
.dem-page{max-width:1180px;margin:0 auto;padding:28px 16px 40px}
.dem-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.dem-badge{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 2px var(--gold)}
.dem-word{margin:0;font:700 clamp(32px,5vw,52px)/1 'MT Lato',Arial,sans-serif;letter-spacing:.06em;color:#fff}
.dem-flag{height:.62em;width:.3em;vertical-align:.32em;margin:0 .14em 0 .1em}
.dem-tag{margin:6px 0 0;font:italic 400 19px 'MT EB Garamond',Georgia,serif;color:var(--gold)}
.dem{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(201,162,74,.5),0 18px 40px rgba(0,0,0,.35);background:var(--g)}
.dem-bar{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(0,0,0,.25);font:700 13px 'MT Lato',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.dem-bar b{color:var(--gold)}
.dem-tabs{display:flex;gap:6px}
.dem-tabs button,.dem-btn{appearance:none;border:0;border-radius:999px;padding:8px 14px;font:700 13px 'MT Lato',Arial,sans-serif;letter-spacing:.04em;cursor:pointer;background:rgba(255,255,255,.1);color:var(--cream)}
.dem-tabs button[aria-pressed=true]{background:var(--gold);color:#1c1608}
.dem-btn{background:var(--blue);color:#fff}
.dem-btn:focus-visible,.dem-tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dem-c{display:block;width:100%;aspect-ratio:16/10;touch-action:pan-y;cursor:crosshair}
.dem-tip{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;background:rgba(244,239,226,.95);color:#1d2a24;font-size:15px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.dem-tip:empty{display:none}
.dem-tip strong{color:var(--g)}
.dem-tip .bad{color:#b42318}
.dem-ex{display:none;position:absolute;right:12px;top:52px;font:700 10px ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,226,.6)}
.dem-note{font-size:14px;color:#c9d3cc;margin:14px 0 4px}
.dem-back a{color:#9cc0f0}
@media (max-width:640px){.dem-c{aspect-ratio:1/1}.dem-head{gap:12px}.dem-badge{width:48px;height:48px}.dem-tip{font-size:14px;position:static;margin:0;border-radius:0}}
/* v2 */
.dem-view{position:relative}
.dem-dots{display:flex;gap:6px}.dem-dots i{width:9px;height:9px;border-radius:50%;background:rgba(244,239,226,.2)}.dem-dots i.on{background:var(--gold)}.dem-dots i.done{background:rgba(201,162,74,.5)}
.dem-hud{flex:1}
.dem-mute{appearance:none;border:1px solid rgba(244,239,226,.3);background:transparent;color:var(--cream);border-radius:999px;padding:5px 12px;font:700 11px 'MT Lato',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.dem-mute[aria-pressed=true]{opacity:.6}
.dem-tip{position:static;margin:0;border-radius:0;min-height:52px}
.dem-tip:empty{display:flex}
.dem-end{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,43,33,.82);padding:16px;overflow:auto}
.dem-end[hidden]{display:none}
.dem-card{background:var(--cream);color:#1d2a24;border-radius:14px;padding:20px 22px;max-width:860px;width:100%;box-shadow:0 0 0 1px var(--gold),0 20px 40px rgba(0,0,0,.35)}
.dem-k{margin:0 0 10px;font:700 12px ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.dem-card table{width:100%;border-collapse:collapse;font-size:14px}
.dem-card th{text-align:left;font:700 11px 'MT Lato',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#5b6a61;border-bottom:2px solid var(--g);padding:6px 8px}
.dem-card td{padding:8px;border-bottom:1px solid rgba(15,61,46,.18);vertical-align:top}
.dem-card tr.hk td:first-child b{color:#b42318}.dem-card tr.pr td:first-child b{color:var(--g)}
.dem-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.dem-btn{text-decoration:none;display:inline-block}
.dem-btn.ghost{background:transparent;color:var(--g);box-shadow:inset 0 0 0 1.5px var(--g)}
@media (max-width:640px){.dem-card{padding:14px}.dem-card table,.dem-card tbody,.dem-card tr,.dem-card td{display:block}.dem-card thead{display:none}.dem-card tr{padding:8px 0;border-bottom:1px solid rgba(15,61,46,.2)}.dem-card td{border:0;padding:2px 0}.dem-end{place-items:start center}}
@media (max-width:640px){.dem.ended .dem-c{display:none}.dem-end{position:static;background:transparent}}
.dem-card td.sc span{display:none}@media (max-width:640px){.dem-card td.sc span{display:inline}.dem-card td.sc{font-weight:700;color:#0f3d2e}}
@media (max-width:420px){.dem-hud .hx{display:none}.dem-bar{flex-wrap:nowrap;gap:8px}.dem-hud{white-space:nowrap;font-size:12px}}
@media (max-width:420px){.dem-mute{white-space:nowrap;padding:5px 9px;font-size:10px}.dem-dots{gap:4px}}
/* v2.6: putting-green branding + scorecard HUD */
body{background:#0a2a20 repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 90px,rgba(0,0,0,0) 90px 180px)}
.dem-head{position:relative;gap:18px;padding:18px 20px;margin-bottom:18px;border-radius:16px;background:radial-gradient(120% 140% at 0% 0%,#1d6a4e 0%,#0f3d2e 55%,#0a2b21 100%);box-shadow:inset 0 0 0 1px rgba(226,194,111,.45),0 12px 30px rgba(0,0,0,.3);overflow:hidden}
.dem-head::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 46px,rgba(255,255,255,0) 46px 92px);pointer-events:none}
.dem-lock{position:relative;z-index:1;min-width:0}
.dem-badge{position:relative;z-index:1;flex:none;box-shadow:0 0 0 2px #e2c26f,0 0 0 5px rgba(226,194,111,.18)}
.dem-kick{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:700 11px 'MT Lato',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#e2c26f;white-space:nowrap}
.dem-kd{width:22px;height:1px;background:rgba(226,194,111,.7)}
.dem-word{font-weight:700;letter-spacing:.08em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);white-space:nowrap}
.dem-tag{margin-top:8px;color:#e9dcae}
.dem-bar{gap:10px 14px;padding:9px 12px;background:linear-gradient(180deg,#0d3528,#0a2b21);border-bottom:1px solid rgba(226,194,111,.35)}
.dem-hud{display:flex;align-items:center;gap:10px;min-width:0;text-transform:none;letter-spacing:0}
.dem-hud .hn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:42px;height:42px;border-radius:9px;background:#e2c26f;color:#13261d;font:700 22px/1 'MT Lato',Arial,sans-serif}
.dem-hud .hn small{font-size:8px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1px}
.dem-hud .hx{flex:1;min-width:0;font:700 14px 'MT Lato',Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dem-hud .hx em{font-style:normal;margin-left:10px;padding:2px 8px;border-radius:999px;font-size:10px;letter-spacing:.14em;background:rgba(255,255,255,.12);color:#e9dcae;vertical-align:2px}
.dem-hud .hc{display:inline-flex;align-items:baseline;gap:6px;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(226,194,111,.3);font:700 10px 'MT Lato',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#cfdcd3;white-space:nowrap}
.dem-hud .hc b{font-size:17px;letter-spacing:0;color:#fff}
.dem-hud .hc.st b{color:#e2c26f}
.dem-dots{order:2}.dem-mute{order:3}
.dem-dots i.on{background:#e2c26f;box-shadow:0 0 0 3px rgba(226,194,111,.25)}
@media (max-width:640px){.dem-head{padding:14px;gap:12px;border-radius:12px}.dem-kick{font-size:9px;letter-spacing:.16em;gap:7px}.dem-kd{width:12px}.dem-word{font-size:34px;letter-spacing:.05em}.dem-tag{font-size:16px;margin-top:4px}}
@media (max-width:420px){.dem-page{padding:16px 10px 30px}.dem-bar{padding:7px 8px;gap:6px}.dem-hud{gap:6px;font-size:inherit}.dem-hud .hx{display:none}.dem-hud .hn{min-width:34px;height:34px;font-size:18px}.dem-hud .hn small{font-size:7px}.dem-hud .hc{padding:5px 7px;letter-spacing:.08em;font-size:9px;gap:4px}.dem-hud .hc b{font-size:15px}.dem-word{font-size:30px}.dem-badge{width:44px;height:44px}.dem-kick span:last-child,.dem-kd{display:none}}
@media (max-width:370px){.dem-word{font-size:27px}}
/* v2.7: phone HUD second line (hole name + HACK/PRO) */
.dem-hud .hx em i{display:none;font-style:normal}
@media (max-width:420px){.dem-hud{flex-wrap:wrap;row-gap:4px}.dem-hud .hx{display:block;order:9;flex:0 0 100%;font-size:11px;letter-spacing:.1em;line-height:1.3}.dem-hud .hx em{margin:0;padding:0;background:none;font-size:11px;letter-spacing:.1em;color:#e2c26f;vertical-align:0}.dem-hud .hx em i{display:inline;color:#cfdcd3}}
/* v2.8: short hole name on phones */
.dem-hud .hs{display:none}
@media (max-width:420px){.dem-hud .hl{display:none}.dem-hud .hs{display:inline}.dem-hud .hx,.dem-hud .hx em{letter-spacing:.04em}}