:root{--paper:#fff8ee;--ink:#161616;--stripe:#e8c440;--coffee:#7a4a1f}
  html,body{margin:0;height:100%;overflow:hidden;background:#9fc5e8;font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--ink)}
  canvas{display:block;touch-action:none}
  #hud{position:fixed;top:max(12px,env(safe-area-inset-top));left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:0 16px;pointer-events:none;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45)}
  #dist{font-weight:800;font-size:26px;line-height:1}
  #dist small{font-size:13px;font-weight:700;opacity:.8}
  #dist .m{font-size:13px;font-weight:700;opacity:.75;margin-top:3px}
  #card .tally{margin:10px auto 4px;border-collapse:collapse;font-size:14px;color:#e6ddd0;min-width:230px}
  #card .tally td{padding:3px 8px;text-align:left}
  #card .tally td:last-child{text-align:right;font-weight:700;color:var(--stripe)}
  #combo{font-weight:700;font-size:14px;color:var(--stripe);min-height:18px;margin-top:2px;transition:transform .1s}
  #combo.pop{transform:scale(1.25)}
  #hud .lives span{display:inline-block;width:14px;height:18px;margin-left:5px;background:var(--coffee);border-radius:3px 3px 4px 4px;position:relative;top:2px;box-shadow:0 2px 0 rgba(0,0,0,.4)}
  #hud .lives span.gone{opacity:.25}
  #toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:rgba(22,22,22,.85);color:var(--paper);padding:8px 18px;border-radius:999px;font-weight:600;font-size:15px;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap}
  #toast.on{opacity:1}
  #miss{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%) scale(.6);font-weight:900;font-size:40px;color:var(--stripe);text-shadow:0 3px 0 rgba(0,0,0,.5);opacity:0;pointer-events:none;letter-spacing:-1px}
  #miss.on{animation:miss .7s ease-out}
  @keyframes miss{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
  #zone{position:fixed;left:0;right:0;top:30%;text-align:center;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.5);pointer-events:none;opacity:0}
  #zone .zn{font-weight:900;font-size:38px;letter-spacing:-1px;line-height:1}
  #zone .zt{font-weight:600;font-size:15px;color:var(--stripe);margin-top:6px}
  #zone.on{animation:zone 2.6s ease-out}
  @keyframes zone{0%{opacity:0;transform:translateY(12px)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
  #overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,18,16,.7);color:var(--paper);text-align:center;padding:24px}
  #overlay.hidden{display:none}
  #card{max-width:360px}
  #card h1{font-size:40px;line-height:.95;margin:0 0 6px;letter-spacing:-1.5px}
  #card .logo{display:block;width:min(300px,78vw);max-width:100%;height:auto;margin:0 auto 18px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
  #card .logo.small{width:min(180px,50vw);margin-bottom:10px}
  #card .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  #card button.alt{background:transparent;color:var(--paper);border:2px solid rgba(255,248,238,.5)}
  #card .go-title{font-weight:800;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--stripe);margin:0}
  #card p{margin:8px 0;font-size:16px;line-height:1.4;color:#e6ddd0}
  #card .sub{font-size:14px;color:#b8ad9d}
  #card .big{font-size:58px;font-weight:800;line-height:1;margin:6px 0}
  #card button{margin-top:18px;font:inherit;font-weight:700;font-size:18px;padding:12px 26px;border:0;border-radius:999px;background:var(--stripe);color:var(--ink);cursor:pointer}
  #card button:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
  #mute{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));right:14px;font:inherit;font-size:13px;font-weight:700;background:rgba(22,22,22,.6);color:var(--paper);border:0;border-radius:999px;padding:8px 14px}

  #card .submit{display:flex;gap:8px;justify-content:center;margin-top:14px}
  #card .submit input{font:inherit;font-weight:700;font-size:16px;padding:10px 14px;border-radius:999px;border:2px solid rgba(255,248,238,.4);background:rgba(0,0,0,.35);color:var(--paper);width:150px;text-align:center}
  #card .submit input:focus{outline:none;border-color:var(--stripe)}
  #card .submit button{margin-top:0}
  #card .posted{color:var(--stripe);font-weight:700;margin:6px 0}
  #board{position:fixed;inset:0;display:flex;flex-direction:column;background:rgba(20,18,16,.92);color:var(--paper);padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))}
  #board.hidden{display:none}
  #board .bhead{display:flex;gap:8px;align-items:center;margin-bottom:10px}
  #board .tab{font:inherit;font-weight:700;font-size:15px;padding:8px 16px;border-radius:999px;border:2px solid rgba(255,248,238,.3);background:transparent;color:var(--paper)}
  #board .tab.on{background:var(--stripe);color:var(--ink);border-color:var(--stripe)}
  #board .close{margin-left:auto;font:inherit;font-size:26px;line-height:1;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,248,238,.12);color:var(--paper)}
  #board .rows{overflow:auto;flex:1}
  #board table{width:100%;border-collapse:collapse;font-size:15px}
  #board td{padding:9px 6px;border-bottom:1px solid rgba(255,248,238,.08)}
  #board .rk{width:34px;color:#b8ad9d;font-weight:700}
  #board .nm{font-weight:700}
  #board .zn{color:#b8ad9d;font-size:13px}
  #board .sc{text-align:right;font-weight:800;color:var(--stripe)}
  #board tr.me td{background:rgba(232,196,64,.12)}
  #board tr:nth-child(-n+3) .rk{color:var(--stripe)}

  #card .meet{background:rgba(255,248,238,.06);border:1px solid rgba(255,248,238,.14);border-radius:18px;padding:16px 18px;margin:6px 0 4px;text-align:left}
  #card .meet .who{font-weight:900;font-size:28px;letter-spacing:-.5px;line-height:1.05;color:var(--stripe);margin-bottom:8px}
  #card .meet .bio{margin:0 0 10px;font-size:15px;line-height:1.45;color:#f0e9dd}
  #card .meet .sub{margin:0;text-align:left}

  #card .links button{font-size:14px;padding:9px 16px;margin-top:10px}
  #board .bt{font-weight:900;font-size:22px;letter-spacing:-.5px}
  #board .sub{color:#b8ad9d;font-size:14px}
  #board .tight{margin:0 0 8px}
  #board .shame{background:rgba(255,248,238,.06);border:1px solid rgba(255,248,238,.12);border-radius:14px;padding:12px 14px;margin:8px 0;text-align:left}
  #board .shame .who{font-weight:900;font-size:20px;color:var(--stripe);display:flex;justify-content:space-between;align-items:baseline}
  #board .shame .ct{font-size:14px;color:#b8ad9d;font-weight:700}
  #board .shame .meta{color:#b8ad9d;font-size:12px;margin:2px 0 6px}
  #board .shame .bio{margin:0;font-size:14px;line-height:1.4;color:#f0e9dd}
  #board .shame.locked{opacity:.45}
  #board .shame.locked .who{color:#b8ad9d}
  #board .form label{display:block;margin:10px 0;font-weight:700;font-size:14px}
  #board .form input,#board .form select,#board .form textarea{font:inherit;font-weight:500;width:100%;box-sizing:border-box;margin-top:4px;padding:10px 12px;border-radius:12px;border:2px solid rgba(255,248,238,.25);background:rgba(0,0,0,.35);color:var(--paper)}
  #board .form textarea{resize:vertical;line-height:1.4}
  #board .form input:focus,#board .form select:focus,#board .form textarea:focus{outline:none;border-color:var(--stripe)}
  #board .form .row button{font:inherit;font-weight:700;font-size:16px;padding:11px 22px;border:0;border-radius:999px;background:var(--stripe);color:var(--ink)}
  #board .form .row button.alt{background:transparent;color:var(--paper);border:2px solid rgba(255,248,238,.5)}
  #board .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  #board > .row button{font:inherit;font-weight:700;font-size:15px;padding:10px 18px;border-radius:999px;background:transparent;color:var(--paper);border:2px solid rgba(255,248,238,.5)}