:root{
  --bg:#0b1220;
  --panel:rgba(255,255,255,.06);
  --text:#e7ebff;
  --muted:rgba(231,235,255,.72);
  --line:rgba(255,255,255,.14);
  --accent:#ff7a18;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
  background:radial-gradient(1100px 760px at 18% -10%, rgba(255,122,24,.12), transparent 60%),
             radial-gradient(1000px 700px at 80% 10%, rgba(61,86,230,.18), transparent 60%),
             var(--bg);
  color:var(--text);
}

.legalBar{
  position:sticky;top:0;z-index:10;
  display:flex;gap:10px;align-items:center;justify-content:center;
  padding:10px 12px;
  background:rgba(0,0,0,.35);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
  font-size:13px;
}
.legalBar a{color:rgba(231,235,255,.9);text-decoration:none}
.legalBar a:hover{text-decoration:underline}
.sep{opacity:.55}

.pcHelp{
  position:fixed;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  z-index:40;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.30);
  backdrop-filter:blur(10px);
  color:rgba(231,235,255,.86);
  font-size:12px;
  line-height:1.2;
  max-width:calc(100vw - 22px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}
@media (hover: none) and (pointer: coarse) { .pcHelp{display:none} }

.app{
  position:fixed;
  left:0;right:0;
  top:var(--legalbar-h, 0px);
  bottom:0;
  display:flex;
  flex-direction:column;
}

.hud{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.topHud{
  position:absolute;
  left:14px;
  top:14px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.minimap{
  width:120px;
  height:120px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  box-shadow:0 18px 52px rgba(0,0,0,.30);
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.14);
  font-size:13px;
  color:rgba(231,235,255,.92);
}
.pill b{font-weight:900}
.centerHud{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  color:rgba(231,235,255,.85);
  font-size:18px;
  letter-spacing:.2px;
  text-shadow:0 10px 30px rgba(0,0,0,.6);
}
.floatPoints{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.floatPoints .pt{
  position:absolute;
  left:0;
  top:0;
  font-weight:1000;
  letter-spacing:.2px;
  font-size:16px;
  color:rgba(255,210,160,.98);
  text-shadow:0 10px 26px rgba(0,0,0,.65);
  transform:translate(-50%,-50%);
  opacity:1;
  will-change:transform,opacity;
}
.floatPoints .pt.neg{
  color:rgba(255,120,120,.98);
}
.crosshair{
  width:12px;height:12px;
  border-radius:999px;
  border:2px solid rgba(231,235,255,.65);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}

.overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:radial-gradient(900px 620px at 50% 30%, rgba(0,0,0,.35), rgba(0,0,0,.70));
}
.winOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  background:transparent;
  pointer-events:none;
  z-index:30;
}
.winBar{
  width:min(920px, 96vw);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  pointer-events:auto;
}
.winMeta{display:flex;flex-direction:column;gap:6px;min-width:160px}
.winScore{font-size:15px;color:rgba(231,235,255,.9)}
.winScore b{font-weight:1000}
.winGlasses{display:flex;flex-wrap:wrap;gap:6px;max-width:min(420px, 62vw)}
.winGlasses .miniGlass{width:16px;height:16px;opacity:.95}
.winGlasses .more{font-size:12px;color:rgba(231,235,255,.72);padding-left:4px}
.card{
  width:min(860px, 95vw);
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(0,0,0,.30);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  padding:16px;
}
.title{
  font-weight:1000;
  letter-spacing:.4px;
  font-size:34px;
  line-height:1.05;
}
.subtitle{
  margin-top:6px;
  font-size:16px;
  color:rgba(231,235,255,.78);
}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.space{justify-content:space-between}
.btn{
  border:1px solid rgba(255,122,24,.45);
  background:rgba(255,122,24,.18);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:950;
  letter-spacing:.3px;
}
.btn:hover{background:rgba(255,122,24,.24)}
.btn.ghost{
  background:rgba(0,0,0,.18);
  border-color:rgba(255,255,255,.14);
  font-weight:850;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.muted{color:var(--muted)}
.muted.small{font-size:13px}

canvas{display:block;width:100%;height:100%}

/* Touch controls */
.touchControls{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:20;
}
.touchControls.on{pointer-events:auto}
.touchControls .left{
  position:absolute;
  left:12px;
  bottom:12px;
  display:flex;
  gap:10px;
  align-items:flex-end;
  pointer-events:none;
}
.touchControls .right{
  position:absolute;
  right:12px;
  bottom:12px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  pointer-events:none;
}
.touchControls .aimPad{
  position:absolute;
  inset:0;
  left:50%;
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  background:transparent;
  border:0;
  box-shadow:none;
  opacity:0;
}
.touchControls .aimPad:active{background:transparent}
.touchControls .stick{
  width:min(190px, 42vw);
  aspect-ratio:1/1;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.10);
  box-shadow:0 16px 36px rgba(0,0,0,.22);
  position:relative;
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.touchControls .nub{
  position:absolute;
  left:50%;
  top:50%;
  width:46px;
  height:46px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:rgba(143,179,255,.18);
  border:1px solid rgba(143,179,255,.32);
  box-shadow:0 12px 26px rgba(0,0,0,.18);
  pointer-events:none;
}
.touchControls .fireBtn{
  width:min(190px, 42vw);
  height:auto;
  aspect-ratio:1/1;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,122,24,.18);
  box-shadow:0 16px 36px rgba(0,0,0,.24);
  color:rgba(231,235,255,.95);
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.touchControls .fireBtn svg{width:38px;height:38px}
.touchControls .fireBtn:active{background:rgba(255,122,24,.28)}
.touchControls .lookPad{
  width:min(260px, 52vw);
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
  box-shadow:0 16px 36px rgba(0,0,0,.18);
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.touchControls .lookPad:active{background:rgba(0,0,0,.16)}