:root{
  --ink:#172b18;
  --grass-top:#84b963;
  --grass-mid:#6ca44c;
  --grass-bottom:#4f8337;
  --paper:#f0ecdc;
  --yellow:#e7bd43;
  --red:#c45142;
  --line:#172b18;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#789661;color:var(--ink)}
body{overflow:hidden}
button,input{font:inherit}
.field{position:relative;width:100vw;height:100vh;overflow:hidden;background:var(--grass-mid)}
.field canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.land{z-index:1;pointer-events:none}
.worms{z-index:20;pointer-events:none}

.hero{position:absolute;z-index:5;left:50%;top:44%;transform:translate(-50%,-50%);width:min(780px,86%);text-align:center;pointer-events:none}
.hero h1{margin:0;font-size:clamp(70px,9.4vw,145px);line-height:.86;letter-spacing:-.066em;font-weight:780}
.hero p{max-width:530px;margin:25px auto 0;font-size:14px;line-height:1.55;font-weight:600}

.utility{position:absolute;z-index:7;background:rgba(240,236,220,.76);backdrop-filter:blur(6px);border:2px solid var(--line);box-shadow:4px 4px 0 var(--line);padding:10px 11px}
.top-left{left:18px;top:18px;min-width:128px}
.top-right{right:18px;top:18px;text-align:right}
.bottom-left{left:18px;bottom:18px}
.bottom-right{right:18px;bottom:18px;width:238px}
.utility-label{font-size:10px;opacity:.65;margin-bottom:3px}
.utility-value{font-size:25px;font-weight:800;letter-spacing:-.045em}
.utility-sub{font-size:10px;opacity:.58;margin-top:3px}
.worm-key{display:flex;gap:10px;justify-content:flex-end;margin-top:7px;font-size:10px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;border:1px solid var(--line);margin-right:4px;vertical-align:-1px}
.dot.normal{background:#df8c61}.dot.big{background:#9b67c7}.dot.gold{background:#f1c842}.dot.decoy{background:#c45142}
.score-row{display:flex;gap:20px;align-items:flex-end}.score-row>div{min-width:64px}.score-row strong{display:block;font-size:34px;letter-spacing:-.055em}
.name-row{display:flex;gap:6px;margin-top:8px}.name-row input,.name-row button{border:2px solid var(--line);background:var(--paper);color:var(--ink);padding:7px 8px}.name-row input{width:136px}.name-row button{background:var(--yellow);font-weight:700;cursor:pointer;box-shadow:2px 2px 0 var(--line)}.name-row button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--line)}
.rank-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:5px;padding:3px 0;font-size:10px}.rank-row span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-row b{font-variant-numeric:tabular-nums}
.activity{position:absolute;z-index:7;left:50%;top:18px;transform:translateX(-50%);max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;background:rgba(240,236,220,.58);border:1px solid rgba(23,43,24,.32);padding:5px 7px}
.sound{position:absolute;z-index:9;left:50%;bottom:18px;transform:translateX(-50%);border:2px solid var(--line);background:var(--paper);padding:7px 9px;box-shadow:3px 3px 0 var(--line);cursor:pointer}
.toast{position:absolute;z-index:30;transform:translate(-50%,-50%);padding:6px 8px;border:2px solid var(--line);background:var(--yellow);box-shadow:3px 3px 0 var(--line);font-size:11px;font-weight:800;opacity:0;pointer-events:none}.toast.bad{background:var(--red);color:#fff}.toast.show{animation:toast .65s ease}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-50%) translateY(9px)}22%,68%{opacity:1;transform:translate(-50%,-50%) translateY(0)}100%{opacity:0;transform:translate(-50%,-50%) translateY(-9px)}}
@media(max-width:720px){.hero{top:39%;width:92%}.hero h1{font-size:clamp(58px,17vw,100px);line-height:.9}.hero p{font-size:12px;max-width:85%;margin-top:18px}.top-right{top:70px}.bottom-left{bottom:155px}.bottom-right{left:18px;right:auto;width:220px}.activity{top:128px;max-width:70%}.sound{left:auto;right:18px;transform:none}}


/* v2 interaction polish */
.field.worm-hover{cursor:pointer}
.sound{min-width:78px}
@media (prefers-reduced-motion: reduce){
  .toast.show{animation-duration:.01ms}
}