:root {
  --amber: #ffb22e;
  --amber-deep: #e07a10;
  --cream: #fff4dc;
  --ink: #1a0f08;
  --glass: rgba(24, 12, 6, 0.72);
  --pink: #ff3d8b;
  --display: Anton, Impact, 'Arial Black', sans-serif;
  --ui: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --safe-l: max(14px, env(safe-area-inset-left));
  --safe-r: max(14px, env(safe-area-inset-right));
  --safe-t: max(10px, env(safe-area-inset-top));
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #150b06; color: var(--cream);
  font-family: var(--ui);
  touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; top: 0; left: 0; right: 0;
  padding: var(--safe-t) var(--safe-r) 0 var(--safe-l);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}
.hud-left .label { font: 700 11px var(--ui); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
#score { font: 400 clamp(28px, 6vh, 44px)/1 var(--display); color: var(--amber); letter-spacing: 0.02em; }
#combo { font: 800 13px var(--ui); color: var(--pink); min-height: 16px; letter-spacing: 0.04em; }
#combo.hot { animation: pulse 0.6s ease-in-out infinite alternate; }
.hud-center { text-align: center; padding: 6px 16px; background: var(--glass); border-radius: 999px; backdrop-filter: blur(6px); border: 1px solid rgba(255, 178, 46, 0.25); }
#level { font: 400 18px/1.1 var(--display); letter-spacing: 0.06em; }
#speed { font: 700 11px var(--ui); opacity: 0.75; }
.hud-right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
#lives { display: flex; gap: 4px; }
#lives.bump { animation: shake 0.45s; }
.life { width: clamp(26px, 6vh, 36px); color: var(--amber); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); transition: opacity 0.3s, transform 0.3s; }
.life svg { width: 100%; display: block; }
.life.lost { opacity: 0.22; transform: scale(0.8) rotate(-12deg); color: #777; }
#btn-mute, #btn-music {
  pointer-events: auto; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2); background: var(--glass); color: #fff; font-size: 16px;
}
#btn-music.off { opacity: 0.4; text-decoration: line-through; }

/* ---------- drink selector ---------- */
#drinks {
  position: fixed; left: var(--safe-l); bottom: max(10px, env(safe-area-inset-bottom));
  display: flex; gap: 8px; pointer-events: auto;
}
#drinks button {
  position: relative; width: clamp(58px, 15vh, 74px); aspect-ratio: 1; border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.18); background: var(--glass); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  backdrop-filter: blur(6px); transition: transform 0.12s, border-color 0.12s, background 0.12s;
  font: 400 12px var(--display); letter-spacing: 0.06em; padding: 4px;
}
#drinks button img { width: 64%; pointer-events: none; }
#drinks button.on { border-color: var(--amber); background: rgba(90, 50, 10, 0.85); transform: translateY(-4px) scale(1.06); box-shadow: 0 0 18px rgba(255, 178, 46, 0.45); }
#drinks button.new { animation: pulse 0.5s 6 alternate; }
#drinks button i {
  position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: var(--pink); color: #fff; font: 800 13px/22px var(--ui); font-style: normal; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* ---------- pop-ups ---------- */
#popups { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.popup {
  position: absolute; transform: translate(-50%, -50%);
  font: 400 26px var(--display); color: var(--amber); white-space: nowrap;
  text-shadow: 0 3px 0 var(--ink), 0 0 14px rgba(255, 170, 40, 0.6);
  animation: rise 1.3s cubic-bezier(.2, .8, .3, 1) forwards;
}
.popup.big { font-size: 34px; }
.popup.bad { color: #ff5a4a; text-shadow: 0 3px 0 var(--ink), 0 0 14px rgba(255, 60, 40, 0.6); }
.popup.say {
  font: 800 15px var(--ui); color: var(--ink); background: var(--cream);
  padding: 5px 11px; border-radius: 14px; text-shadow: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.popup.say.angry { background: #ff4a3a; color: #fff; }
.popup.say.happy { background: #fff1b8; }
.popup.pow {
  font: 400 34px var(--display); color: #ffe14a; letter-spacing: 0.04em;
  -webkit-text-stroke: 2px #b3121e; text-shadow: 0 4px 0 #1a0f08;
  animation: pow 0.9s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
.verdict { font: 700 clamp(13px, 3vh, 16px) var(--ui); margin: -1.5vh 0 2.2vh; opacity: 0.9; text-shadow: 0 2px 4px #000; }

#toast {
  position: fixed; left: 50%; top: 32%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; opacity: 0;
}
#toast b { display: block; font: 400 clamp(40px, 11vh, 76px)/1 var(--display); color: var(--amber); letter-spacing: 0.04em; text-shadow: 0 4px 0 var(--ink), 0 0 30px rgba(255, 150, 30, 0.7); }
#toast span { font: 800 16px var(--ui); letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 2px 6px #000; }
#toast.go { animation: toast 1.8s ease-out forwards; }

#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; }
#flash.go { animation: flash 0.5s ease-out; }

/* ---------- phone call twist ---------- */
#phone {
  position: fixed; right: 24%; top: 50%; width: min(44vh, 230px); padding: 22px 16px 18px;
  transform: translateY(-50%); border-radius: 30px; text-align: center;
  background: linear-gradient(180deg, rgba(40, 44, 60, 0.96), rgba(15, 16, 24, 0.97));
  border: 2px solid rgba(255, 255, 255, 0.15); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  animation: phoneIn 0.35s cubic-bezier(.2, 1.4, .4, 1), ring 1.4s ease-in-out 0.35s infinite;
  z-index: 20; touch-action: none;
}
#phone.answered { animation: none; }
.ph-top { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ph-icon { font-size: 40px; width: 64px; height: 64px; line-height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); margin-bottom: 6px; }
.ph-name { font: 400 26px var(--display); letter-spacing: 0.04em; }
.ph-sub { font: 600 13px var(--ui); opacity: 0.7; }
.ph-msg { margin: 14px 0 4px; padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: #2f6bff; color: #fff; font: 700 15px var(--ui); text-align: left; }
.ph-btns { display: flex; justify-content: space-around; margin-top: 18px; }
.ph-btns button {
  width: 58px; height: 58px; border-radius: 50%; border: 0; color: #fff; font-size: 24px; position: relative;
  display: grid; place-items: center; cursor: pointer;
}
.ph-btns span { position: absolute; top: 62px; font: 700 12px var(--ui); color: var(--cream); }
.ph-no { background: #ff3b30; }
.ph-yes { background: #34c759; animation: pulse 0.6s infinite alternate; }
@keyframes phoneIn { from { transform: translateY(60%) scale(0.6); opacity: 0; } to { transform: translateY(-50%); opacity: 1; } }
@keyframes ring { 0%, 60%, 100% { transform: translateY(-50%) rotate(0); } 65% { transform: translateY(-50%) rotate(-4deg); } 70% { transform: translateY(-50%) rotate(4deg); } 75% { transform: translateY(-50%) rotate(-4deg); } 80% { transform: translateY(-50%) rotate(3deg); } }

/* ---------- drag hint ---------- */
#hint { position: fixed; left: 50%; bottom: 3vh; transform: translateX(-50%); text-align: center; pointer-events: none; }
#hint p { margin: 0; font: 800 15px var(--ui); background: var(--glass); padding: 8px 16px; border-radius: 14px; text-shadow: 0 1px 2px #000; }
#hint small { font-weight: 600; opacity: 0.75; }
.finger {
  width: 34px; height: 34px; margin: 0 auto 10px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 200, 100, 0.7);
  animation: swipe 1.6s ease-in-out infinite;
}

/* ---------- screens ---------- */
.screen {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 12px var(--safe-r) 12px var(--safe-l);
  background: radial-gradient(ellipse at center, rgba(20, 10, 4, 0.35), rgba(10, 5, 2, 0.8));
}
.card { text-align: center; max-width: 720px; width: 100%; }
h1 {
  margin: 0; font: 400 clamp(56px, 17vh, 120px)/0.9 var(--display); color: var(--amber);
  letter-spacing: 0.02em;
  text-shadow: 0 5px 0 var(--amber-deep), 0 10px 0 var(--ink), 0 0 50px rgba(255, 140, 20, 0.5);
}
h1 span { display: block; font-size: 0.32em; color: var(--cream); letter-spacing: 0.3em; margin-top: 0.3em; text-shadow: 0 3px 0 var(--ink); }
h2 { margin: 0; font: 400 clamp(40px, 12vh, 80px)/1 var(--display); color: var(--amber); text-shadow: 0 4px 0 var(--ink), 0 0 30px rgba(255, 140, 20, 0.5); }
.tag { margin: 1.4vh 0 2vh; font: 700 clamp(13px, 3vh, 17px) var(--ui); opacity: 0.9; text-shadow: 0 2px 4px #000; }

#roster { display: flex; justify-content: center; gap: clamp(6px, 1.6vw, 14px); margin-bottom: 2.4vh; flex-wrap: wrap; }
#roster figure { margin: 0; width: clamp(50px, 12vh, 78px); }
#roster img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  background: var(--shirt); border: 3px solid var(--amber); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}
#roster.many { gap: clamp(4px, 1vw, 10px); max-width: 640px; margin-inline: auto; }
#roster.many figure { width: clamp(38px, 9vh, 58px); }
#roster.many figcaption { font-size: clamp(9px, 2.2vh, 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#roster figcaption { font: 400 clamp(12px, 2.8vh, 16px) var(--display); letter-spacing: 0.06em; margin-top: 4px; text-transform: uppercase; text-shadow: 0 2px 3px #000; }

button.big {
  font: 400 clamp(20px, 5vh, 28px) var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: linear-gradient(180deg, #ffd36b, var(--amber) 55%, var(--amber-deep));
  border: 0; border-radius: 999px; padding: 0.55em 1.8em;
  box-shadow: 0 6px 0 #8a4508, 0 12px 26px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer; transition: transform 0.08s;
}
button.big:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a4508, 0 6px 14px rgba(0, 0, 0, 0.5); }
button.big:disabled { filter: grayscale(0.8); opacity: 0.6; }
#loading { font: 600 13px var(--ui); opacity: 0.7; }
.best { font: 700 14px var(--ui); color: var(--amber); min-height: 1em; margin: 1.5vh 0 0; }

/* ---------- name + leaderboard ---------- */
.start-row { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
#player-name {
  font: 700 clamp(16px, 4.2vh, 20px) var(--ui); color: var(--cream); background: rgba(20, 10, 4, 0.8);
  border: 2px solid rgba(255, 178, 46, 0.5); border-radius: 999px; padding: 0.55em 1.1em; width: min(260px, 60vw);
  text-align: center; outline: none; -webkit-user-select: text; user-select: text;
}
#player-name:focus { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 178, 46, 0.25); }
#player-name.ask { animation: shake 0.45s; border-color: var(--pink); }
#roster figure { cursor: pointer; }
#roster figure.me img { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink), 0 6px 14px rgba(0, 0, 0, 0.5); }
.top3 { margin-top: 1.4vh; font: 700 clamp(12px, 3vh, 14px) var(--ui); display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; text-shadow: 0 2px 4px #000; min-height: 1em; }
.top3 .medal { color: var(--amber); }
.top3 button, button.link { font: 700 13px var(--ui); color: var(--amber); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 4px; }

.board { list-style: none; margin: 0; padding: 0; text-align: left; }
.board li {
  display: grid; grid-template-columns: 2.2em 34px 1fr auto; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 10px; font: 700 14px var(--ui);
}
.board li:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
.board li.me { background: rgba(255, 61, 139, 0.28); outline: 1px solid var(--pink); }
.board li.gap { background: none; justify-content: center; display: block; text-align: center; opacity: 0.5; padding: 0; }
.board .pos { font: 400 18px var(--display); color: var(--amber); text-align: right; }
.board li:nth-child(1) .pos { color: #ffd700; } .board li:nth-child(2) .pos { color: #d8d8e0; } .board li:nth-child(3) .pos { color: #e3a066; }
.board img, .board .noface { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #0005; border: 2px solid rgba(255, 178, 46, 0.5); }
.board .noface { display: grid; place-items: center; font: 400 14px var(--display); color: var(--amber); }
.board .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .sc { font: 400 18px var(--display); letter-spacing: 0.03em; }
.board .empty { opacity: 0.6; text-align: center; display: block; }

.over-card { max-width: 940px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: center; }
.over-board { background: var(--glass); border: 1px solid rgba(255, 178, 46, 0.2); border-radius: 16px; padding: 10px 8px; max-height: 86vh; overflow: auto; }
.over-board h3 { margin: 2px 0 6px; font: 400 20px var(--display); letter-spacing: 0.05em; color: var(--amber); text-align: center; }
.rank { font: 800 clamp(14px, 3.4vh, 17px) var(--ui); color: var(--cream); margin: 0.5vh 0 1.2vh; }
.rank b { color: var(--amber); }
.over-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.board-card { max-width: 520px; }
.board-card .board { max-height: 62vh; overflow: auto; margin: 1.5vh 0 2vh; background: var(--glass); border-radius: 14px; padding: 8px; }
@media (max-height: 460px) {
  .over-card h2 { font-size: 34px; }
  .over-card .final span { font-size: 48px; }
  .over-card .stats { margin: 0.5vh 0 1vh; }
  .over-card .stats div { padding: 5px 8px; min-width: 64px; }
  .over-card .stats b { font-size: 20px; }
  .over-card button.big { font-size: 18px; }
  .verdict { margin: 0 0 1vh; font-size: 12px; }
  h1 { font-size: 15vh; }
  .tag { margin: 0.6vh 0 1.2vh; }
}
@media (max-width: 640px) { .over-card { grid-template-columns: 1fr; } }

.final { margin: 1vh 0; }
.final span { display: block; font: 400 clamp(52px, 16vh, 100px)/1 var(--display); color: var(--cream); text-shadow: 0 5px 0 var(--ink); }
.final small, .stats small { font: 700 11px var(--ui); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
.stats { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(8px, 2vw, 20px); margin: 1vh 0 3vh; }
.stats div { display: flex; flex-direction: column; min-width: 78px; padding: 10px 14px; background: var(--glass); border-radius: 14px; border: 1px solid rgba(255, 178, 46, 0.2); }
.stats b { font: 400 clamp(24px, 6vh, 34px) var(--display); color: var(--amber); }
.badge { display: inline-block; margin-top: 8px; padding: 4px 14px; border-radius: 999px; background: var(--pink); font: 800 12px var(--ui); letter-spacing: 0.14em; text-transform: uppercase; animation: pulse 0.7s infinite alternate; }

/* ---------- portrait warning ---------- */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #150b06; font: 800 18px var(--ui); text-align: center;
  }
  .phone { width: 46px; height: 80px; border: 4px solid var(--amber); border-radius: 10px; animation: turn 1.8s ease-in-out infinite; margin-bottom: 22px; }
}

@keyframes rise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -180%) scale(1); } }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%); } }
@keyframes pow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-20deg); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.25) rotate(8deg); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%) scale(1) rotate(-4deg); } }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-4deg); } 40% { transform: translateX(6px) rotate(4deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes swipe { 0% { transform: translate(-70px, 20px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(70px, -24px); opacity: 1; } 100% { transform: translate(70px, -24px); opacity: 0; } }
@keyframes turn { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }