*{box-sizing:border-box}
:root{font-family:Inter,system-ui,-apple-system,sans-serif;color:#f4f1e6}
body{margin:0;overflow:hidden;background:#9bbd83}
#game{position:fixed;inset:0}
canvas{display:block;width:100%;height:100%;outline:none}
.topbar{position:fixed;top:0;left:0;right:0;height:72px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#14231ddd,transparent);pointer-events:none}
.brand{font-size:18px;letter-spacing:3px;font-weight:900}
.brand span{color:#d8b977}
.phase,.players{font-size:10px;letter-spacing:2px;color:#e4e7d9}
.players b{font-size:16px;color:white;margin-left:8px}
.mission{position:fixed;top:105px;left:28px;max-width:340px;text-shadow:0 2px 12px #15271988;pointer-events:none}
.eyebrow{font-size:10px;letter-spacing:3px;color:#e7cf91;font-weight:800}
h1{font-size:clamp(25px,4vw,42px);line-height:1.05;margin:12px 0;font-weight:800;letter-spacing:-1.5px}
.mission p{font-size:13px;line-height:1.6;color:#f1f2e6}
.controls{position:fixed;bottom:25px;left:28px;right:28px;display:flex;align-items:end;justify-content:space-between;pointer-events:none}
.hint{font-size:10px;letter-spacing:1.4px;color:#fff;background:#17251dcc;padding:14px 17px;border:1px solid #ffffff26;border-radius:10px}
.hint span{margin-left:20px;color:#e4c987}
#interact{pointer-events:auto;background:#f0d69a;color:#273124;border:0;border-radius:9px;padding:15px 20px;font-weight:900;letter-spacing:1px;cursor:pointer;box-shadow:0 6px 20px #0003}
kbd{border:1px solid #27312466;border-radius:4px;padding:2px 5px;margin-left:8px}
#joystick{display:none;width:116px;height:116px;border:1px solid #ffffff66;background:#17251d55;border-radius:50%;position:relative;pointer-events:auto;touch-action:none}
#stick{position:absolute;left:35px;top:35px;width:44px;height:44px;border-radius:50%;background:#f0d69add;border:2px solid #fff9}
#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);padding:12px 18px;border-radius:8px;background:#17251de8;border:1px solid #ffffff22;font-size:12px;opacity:0;transition:opacity .25s;pointer-events:none;text-align:center;max-width:90vw}
#toast.show{opacity:1}
.crosshair{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff9;font-size:20px;pointer-events:none}
@media(max-width:700px){
 .topbar{height:58px;padding:0 15px}.brand{font-size:14px;letter-spacing:2px}.phase{font-size:8px;letter-spacing:1px}.players{font-size:8px}
 .mission{top:80px;left:16px;max-width:250px}h1{font-size:29px}.mission p{font-size:12px}
 .controls{left:15px;right:15px;bottom:18px;align-items:end}
 #joystick{display:block}.desktop-hint{display:none}#interact{padding:14px 12px;font-size:10px}
 #toast{bottom:145px}
}

.voting-panel{position:fixed;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(420px,calc(100vw - 32px));max-height:75vh;overflow:auto;
  padding:22px;background:#17251df2;border:1px solid #f0d69a88;border-radius:16px;
  box-shadow:0 18px 60px #0008;color:#f4e8c6}
.voting-panel[hidden]{display:none}
.voting-panel h2{font-size:24px;margin:10px 0}
.voting-panel p{font-size:13px;line-height:1.5;color:#d7dfd0}
.voting-candidates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.vote-button{padding:13px 10px;border:1px solid #ffffff30;border-radius:9px;
  background:#344b38;color:white;font-weight:700;cursor:pointer}
.vote-button:disabled{opacity:.5;cursor:default}
.vote-button.selected{background:#d8b977;color:#17251d;border-color:#f0d69a}
@media(max-width:700px){.voting-panel{padding:18px}.voting-panel h2{font-size:20px}}


.phase-timer {
  position: fixed;
  top: 62px;
  right: 16px;
  z-index: 10;
  padding: 8px 13px;
  border: 1px solid #f0d69a88;
  border-radius: 10px;
  background: #17251df2;
  color: #f4e8c6;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  pointer-events: none;
}

.phase-timer.urgent {
  color: #ff8d78;
  border-color: #ff8d78;
}

@media (max-width: 700px) {
  .phase-timer {
    top: 58px;
    right: 10px;
    font-size: 16px;
    padding: 6px 10px;
  }
}
