:root {
  --ink: #132223;
  --cream: #f5efdf;
  --orange: #ff5f35;
  --yellow: #ffc72c;
  --sky: #87d8dd;
  --green: #307b56;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }

body {
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  background: #101d1d;
  user-select: none;
  -webkit-user-select: none;
  -webkit-text-size-adjust: 100%;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.game-shell {
  position: relative;
  height: 100dvh;
  min-height: 420px;
  display: grid;
  grid-template-rows: 72px 1fr 46px;
  background: var(--cream);
}

.topbar, .controls {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 0 clamp(12px, 3vw, 44px);
  background: var(--cream);
}

.topbar {
  justify-content: space-between;
  gap: 10px;
  padding-top: var(--safe-top);
  padding-left: calc(clamp(12px, 3vw, 44px) + var(--safe-left));
  padding-right: calc(clamp(12px, 3vw, 44px) + var(--safe-right));
  border-bottom: 3px solid var(--ink);
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 12px/0.9 Inter, sans-serif; letter-spacing: -.04em; }
.brand b { color: var(--orange); }
.brand-mark {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50% 50% 50% 12%;
  transform: rotate(-6deg);
  color: var(--cream); background: var(--ink);
  font: 900 14px Archivo Black, sans-serif;
}

.score-card { display: flex; align-items: center; gap: 14px; min-width: 0; }
.score-block { display: flex; align-items: baseline; gap: 9px; }
.label { font: 800 9px Inter, sans-serif; letter-spacing: .18em; opacity: .6; }
#score { font: 30px/1 Archivo Black, sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.divider { width: 2px; height: 30px; background: var(--ink); opacity: .16; }

.place-chip {
  padding: 4px 8px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--yellow);
  font: 900 11px Inter, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
}
.place-chip.is-lead { background: var(--orange); color: var(--cream); }

.combo-block { display: flex; align-items: center; gap: 9px; }
.combo-body { display: grid; gap: 3px; }
#comboValue { font: 20px/1 Archivo Black, sans-serif; color: var(--orange); transition: transform .12s; }
#comboValue.pop { transform: scale(1.35); }
.combo-bar { width: 74px; height: 6px; border: 2px solid var(--ink); background: #fff; overflow: hidden; }
.combo-bar i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .15s linear; }

.topbar-tools { display: flex; align-items: center; gap: 8px; }

.online-button {
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 11px;
  border: 2px solid var(--ink); border-radius: 3px;
  color: var(--ink); background: var(--cream);
  box-shadow: 3px 3px 0 var(--ink);
  font: 900 10px Inter, sans-serif; letter-spacing: .12em;
  cursor: pointer;
}
.online-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.online-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #b9b1a0; transition: background .25s; }
.online-dot.live { background: #2fb884; box-shadow: 0 0 0 3px rgba(47,184,132,.24); }
.online-count { font: 900 14px Archivo Black, sans-serif; }

.icon-button {
  width: 38px; height: 38px; flex: none;
  border: 2px solid var(--ink); border-radius: 50%;
  color: var(--ink); background: transparent;
  cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
}
.icon-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.sound-icon { font-weight: 900; font-size: 18px; }

/* ---------------- Поле ---------------- */

.game-area {
  position: relative;
  min-height: 0;
  overflow: hidden;
  /* Системный crosshair — тонкий и чёрный: на тёмной воде и на утках он
     пропадает. Свой прицел с кремовой обводкой виден на любом фоне. */
  cursor: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'><g%20fill='none'%20stroke='%23f5efdf'%20stroke-width='5'%20stroke-linecap='round'><circle%20cx='16'%20cy='16'%20r='8'/><path%20d='M16%202v5M16%2025v5M2%2016h5M25%2016h5'/></g><g%20fill='none'%20stroke='%23132223'%20stroke-width='2'%20stroke-linecap='round'><circle%20cx='16'%20cy='16'%20r='8'/><path%20d='M16%202v5M16%2025v5M2%2016h5M25%2016h5'/></g><circle%20cx='16'%20cy='16'%20r='2.2'%20fill='%23ff5f35'/></svg>") 16 16, crosshair;
  touch-action: none;
  background: linear-gradient(#76ccd5 0%, #a1e1df 72%, #e2d894 72%);
}
.game-area.reloading { cursor: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'><g%20fill='none'%20stroke='%23f5efdf'%20stroke-width='5'%20stroke-linecap='round'><circle%20cx='16'%20cy='16'%20r='8'/><path%20d='M16%202v5M16%2025v5M2%2016h5M25%2016h5'/></g><g%20fill='none'%20stroke='%23ef3f36'%20stroke-width='2'%20stroke-linecap='round'><circle%20cx='16'%20cy='16'%20r='8'/><path%20d='M16%202v5M16%2025v5M2%2016h5M25%2016h5'/></g><circle%20cx='16'%20cy='16'%20r='2.2'%20fill='%23ef3f36'/></svg>") 16 16, progress; }

#gameCanvas { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; }

.sun {
  position: absolute; z-index: 1; top: 7%; right: 8%;
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 12px rgba(255,199,44,.16), 0 0 0 24px rgba(255,199,44,.08);
}
.cloud { position: absolute; z-index: 1; width: 150px; height: 38px; background: rgba(245,239,223,.72); border-radius: 50px; }
.cloud::before, .cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 64px; height: 64px; left: 27px; bottom: 0; }
.cloud::after { width: 80px; height: 80px; right: 18px; bottom: 0; }
.cloud-one { top: 16%; left: 6%; transform: scale(.72); opacity: .68; }
.cloud-two { top: 30%; right: 24%; transform: scale(.4); opacity: .45; }

.water { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(rgba(55,128,116,.8), #245f50); border-top: 4px solid rgba(245,239,223,.6); }
.water i { position: absolute; width: 70px; height: 3px; border-radius: 50%; background: rgba(245,239,223,.55); }
.water i:nth-child(1) { left: 13%; top: 30%; }
.water i:nth-child(2) { left: 34%; top: 62%; width: 110px; }
.water i:nth-child(3) { right: 12%; top: 45%; }
.water i:nth-child(4) { right: 36%; top: 18%; width: 45px; }

.reeds { position: absolute; z-index: 4; bottom: 4%; width: 100px; height: 130px; opacity: .85; pointer-events: none; }
.reeds::before { content: '╱│╲  ╱│╲\A  ╲│╱ ╱│'; white-space: pre; position: absolute; bottom: 0; color: #1f5d3f; font: 54px/0.65 serif; }
.reeds-left { left: 0; transform: rotate(-8deg); }
.reeds-right { right: -10px; transform: rotate(9deg) scaleX(-1); }

/* ---------------- Лента событий ---------------- */

.feed {
  position: absolute;
  z-index: 11;
  left: 14px;
  bottom: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column-reverse;
  gap: 5px;
  max-width: min(320px, 55%);
  pointer-events: none;
}
.feed li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-left: 4px solid var(--ink);
  background: rgba(245,239,223,.9);
  font: 700 10px Inter, sans-serif;
  letter-spacing: .02em;
  animation: feed-in .18s ease-out;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed li b { font-weight: 900; }
.feed li span { font-size: 14px; }
@keyframes feed-in { from { opacity: 0; transform: translateX(-12px); } }

/* ---------------- Баннеры ---------------- */

.effect-banner, .bonus-hud {
  position: absolute;
  z-index: 10;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 190px;
  max-width: 44%;
  padding: 7px 10px;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: var(--cream);
  box-shadow: 4px 4px 0 var(--ink);
  pointer-events: none;
}
.effect-banner { left: 14px; border-color: var(--orange); }
.bonus-hud { right: 14px; }
.effect-banner[hidden], .bonus-hud[hidden], .attack-alert[hidden] { display: none !important; }
.effect-banner > span, .bonus-hud > span { font-size: 22px; }
.effect-banner div, .bonus-hud div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.effect-banner small, .bonus-hud small { font-size: 7px; font-weight: 800; letter-spacing: .14em; opacity: .58; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.effect-banner b, .bonus-hud b { font-size: 9px; letter-spacing: .06em; }
.effect-banner > strong, .bonus-hud > strong { color: var(--orange); font: 15px Archivo Black, sans-serif; }

/* ---------------- Лесенка соперников ---------------- */

/* Показываем не «топ-10 недосягаемых», а соседей по таблице: того, кого реально
   обогнать, и разрыв до него. Лидер — одной строкой, для контекста. */
.ladder {
  position: absolute;
  z-index: 9;
  top: 14px; right: 14px;
  margin: 0;
  padding: 3px;
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 134px;
  max-width: 48%;
  border: 2px solid var(--ink);
  background: rgba(245,239,223,.84);
  box-shadow: 3px 3px 0 rgba(19,34,35,.3);
  pointer-events: none;
}
.ladder.is-on { display: flex; }
.ladder li {
  display: grid;
  grid-template-columns: 11px 8px 1fr auto;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  font: 800 10px Inter, sans-serif;
  white-space: nowrap;
}
.ladder li.me { background: var(--yellow); border-radius: 2px; }
.ladder li.gap { display: block; padding: 0 5px; text-align: center; opacity: .4; letter-spacing: .3em; line-height: .8; }
.ladder .lrank { font: 900 9px Archivo Black, sans-serif; opacity: .5; text-align: right; }
.ladder .lchip { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink); }
.ladder .lname { overflow: hidden; text-overflow: ellipsis; }
.ladder .lscore { font: 900 11px Archivo Black, sans-serif; font-variant-numeric: tabular-nums; }
.ladder .ldelta { display: block; font: 900 8px Inter, sans-serif; color: var(--orange); text-align: right; letter-spacing: .02em; }
.ladder .ldelta.lead { color: var(--green); }

.attack-alert {
  position: absolute;
  z-index: 15;
  top: 16%; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 3px solid var(--ink);
  background: #ef3f36;
  color: var(--cream);
  box-shadow: 5px 5px 0 var(--ink);
  font: 900 12px Inter, sans-serif;
  letter-spacing: .08em;
  pointer-events: none;
  animation: alert-in .25s ease-out;
}
.attack-alert span { font-size: 22px; }
@keyframes alert-in { from { opacity: 0; transform: translate(-50%, -14px) scale(.9); } }

/* ---------------- Оверлеи ---------------- */

.intro-card, .podium {
  position: absolute;
  z-index: 14;
  top: 50%; left: 50%;
  width: min(470px, calc(100% - 30px));
  max-height: calc(100% - 24px);
  overflow-y: auto;
  transform: translate(-50%, -50%) rotate(-1deg);
  text-align: center;
  backdrop-filter: blur(4px);
}
.intro-card[hidden], .podium[hidden] { display: none !important; }

/* Подложка — на самом элементе. В ::before с отрицательным inset её срезал
   overflow-y: auto: псевдоэлемент обрезается по padding-box, и фон
   заканчивался ровно по краю текста. */
.intro-card {
  padding: 18px 24px 20px;
  border: 3px solid var(--ink);
  /* Скруглённый прямоугольник вместо эллипса: у эллипса углы уходят внутрь и
     нижние строки оказывались снаружи подложки. */
  border-radius: 26px 32px 24px 30px;
  background: rgba(245,239,223,.96);
  box-shadow: 8px 8px 0 var(--ink);
}

.intro-room {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: #fff;
  font: 800 9px Inter, sans-serif;
  letter-spacing: .16em;
}
.intro-room b { font: 900 12px Archivo Black, sans-serif; }

.title-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 12px 0 0;
}
.title-mark {
  width: 54px; height: 54px; flex: none;
  display: grid; place-items: center;
  border-radius: 50% 50% 50% 14%;
  transform: rotate(-8deg);
  color: var(--cream); background: var(--ink);
  box-shadow: 4px 4px 0 var(--orange);
  font: 900 20px Archivo Black, sans-serif;
}
.title-lockup h1 { margin: 0; text-align: left; line-height: .92; letter-spacing: -.05em; }

.intro-tagline {
  margin: 10px 0 14px;
  font: 800 9px Inter, sans-serif;
  letter-spacing: .14em;
  line-height: 1.6;
  opacity: .62;
}

.intro-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.intro-chips li {
  display: grid;
  gap: 1px;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fff;
  text-align: left;
}
.intro-chips b { font: 900 9px Inter, sans-serif; letter-spacing: .1em; color: var(--orange); }
.intro-chips span { font: 700 9px Inter, sans-serif; opacity: .72; }

/* ---------------- Рекорды всех времён ---------------- */

.alltime {
  margin: 14px 0 0;
  padding: 9px 11px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: rgba(255,255,255,.66);
}
.alltime-title { display: block; margin-bottom: 6px; font: 800 8px Inter, sans-serif; letter-spacing: .18em; opacity: .55; }
.alltime-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.alltime-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  text-align: left;
  font: 800 11px Inter, sans-serif;
}
.alltime-medal { font-size: 13px; text-align: center; }
.alltime-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alltime-score { font: 12px Archivo Black, sans-serif; font-variant-numeric: tabular-nums; }
.alltime-you { margin: 8px 0 0; font: 700 9px Inter, sans-serif; letter-spacing: .06em; opacity: .75; }
.alltime-you b { font: 12px Archivo Black, sans-serif; color: var(--orange); }

/* На подиуме места мало — те же три строки, но в ряд. */
.alltime--compact { margin: 10px 0 0; padding: 7px 9px; }
.alltime--compact .alltime-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 12px; }
.alltime--compact .alltime-row { display: flex; gap: 5px; font-size: 10px; }
.alltime--compact .alltime-medal { font-size: 11px; }
.alltime--compact .alltime-name { max-width: 82px; }
.alltime--compact .alltime-score { font-size: 11px; }

.wide-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  font: 900 10px Inter, sans-serif;
  letter-spacing: .1em;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.wide-button:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.wide-button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.wide-button b { font-size: 14px; color: var(--orange); }

/* ---------------- Зал славы ---------------- */

.hall {
  position: absolute;
  z-index: 19;
  top: 50%; left: 50%;
  width: min(420px, calc(100% - 30px));
  max-height: calc(100% - 24px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  padding: 14px 16px 12px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: rgba(245,239,223,.98);
  box-shadow: 8px 8px 0 var(--ink);
  backdrop-filter: blur(4px);
  text-align: center;
}
.hall[hidden] { display: none !important; }
.hall-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hall-close {
  width: 30px; height: 30px; flex: none;
  border: 2px solid var(--ink); border-radius: 3px;
  background: transparent; color: var(--ink);
  font: 900 17px Inter, sans-serif; cursor: pointer;
}
.hall-close:active { transform: translate(2px, 2px); }

.hall-list {
  margin: 12px 0 10px;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.hall-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-bottom: 1px dashed rgba(19,34,35,.16);
  text-align: left;
}
.hall-row:last-child { border-bottom: 0; }
.hall-row.is-me { background: rgba(255,199,44,.45); border-radius: 3px; }
.hall-row.gold { background: var(--yellow); border-radius: 3px; }
.hall-rank { font: 900 12px Archivo Black, sans-serif; text-align: center; opacity: .55; }
.hall-name { font: 800 13px Inter, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-name small { display: block; font: 700 8px Inter, sans-serif; opacity: .5; letter-spacing: .08em; }
.hall-score { font: 16px Archivo Black, sans-serif; font-variant-numeric: tabular-nums; }
.hall-you { margin: 0 0 6px; font: 800 11px Inter, sans-serif; letter-spacing: .03em; }
.hall-you b { color: var(--orange); }
.hall-stats { margin: 0; font: 800 8px Inter, sans-serif; letter-spacing: .14em; opacity: .5; }

.eyebrow {
  display: inline-block;
  padding: 6px 12px;
  transform: rotate(-2deg);
  color: var(--cream);
  background: var(--orange);
  font: 800 10px Inter, sans-serif;
  letter-spacing: .2em;
}

h1, h2 { margin: 10px 0 6px; font-family: Archivo Black, Impact, sans-serif; text-transform: uppercase; line-height: .9; letter-spacing: -.06em; }
h1 { font-size: clamp(28px, 5.4vw, 56px); line-height: 1.24; }
h1 em { color: var(--orange); font-style: normal; text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
h2 { font-size: clamp(24px, 4vw, 42px); }
.intro-card p { margin: 10px 0 16px; font-size: 12px; font-weight: 700; line-height: 1.5; }

.join-form { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.join-label { font: 800 9px Inter, sans-serif; letter-spacing: .2em; opacity: .6; }
.name-input {
  width: min(280px, 100%); height: 46px; padding: 0 14px;
  border: 3px solid var(--ink); border-radius: 2px;
  background: #fff; box-shadow: 4px 4px 0 var(--ink);
  font: 800 16px Inter, sans-serif; color: var(--ink);
  text-align: center; letter-spacing: .04em;
}
.name-input:focus { outline: none; border-color: var(--orange); }

.primary-button {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 14px 16px 14px 22px;
  border: 3px solid var(--ink); border-radius: 2px;
  color: var(--cream); background: var(--orange);
  box-shadow: 6px 6px 0 var(--ink);
  font: 900 12px Inter, sans-serif; letter-spacing: .08em;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.primary-button b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--orange); background: var(--cream); font-size: 17px; }
.primary-button:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.primary-button:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.primary-button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 6px 6px 0 var(--ink); }


.podium {
  transform: translate(-50%, -50%);

  padding: 16px 20px 18px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: rgba(245,239,223,.97);
  box-shadow: 7px 7px 0 var(--ink);
}

.podium-list { margin: 12px 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.podium-row {
  display: grid;
  grid-template-columns: 30px 12px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  background: #fff;
  text-align: left;
}
.podium-row.gold { background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
.podium-medal { font-size: 17px; text-align: center; }
.podium-chip { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); }
.podium-name { font: 800 13px Inter, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-name small { display: block; font-size: 8px; font-weight: 700; opacity: .55; letter-spacing: .08em; }
.podium-score { font: 17px Archivo Black, sans-serif; }
.podium-you { margin: 0 0 12px; font: 800 12px Inter, sans-serif; letter-spacing: .04em; }
.podium-you[hidden] { display: none !important; }
#startRoundButton { margin: 4px 0 2px; }
#startRoundButton[hidden] { display: none !important; }
.podium-next[hidden] { display: none !important; }
.podium-you b { color: var(--orange); }
.podium-next { margin: 8px 0 0; font: 800 9px Inter, sans-serif; letter-spacing: .16em; opacity: .7; }
.podium-next b { font: 14px Archivo Black, sans-serif; color: var(--orange); }

.toast {
  position: absolute;
  z-index: 16;
  top: 16px; left: 50%;
  transform: translate(-50%, -14px);
  padding: 8px 13px;
  border: 2px solid var(--ink);
  color: var(--cream); background: var(--orange);
  font: 900 11px Inter, sans-serif; letter-spacing: .08em;
  opacity: 0; transition: .2s; pointer-events: none;
  max-width: calc(100% - 28px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.net-status {
  position: absolute; z-index: 17;
  left: 50%; bottom: 12px; transform: translateX(-50%);
  padding: 7px 12px;
  border: 2px solid var(--ink); background: var(--yellow);
  font: 900 9px Inter, sans-serif; letter-spacing: .14em;
  pointer-events: none;
}
.net-status[hidden] { display: none !important; }

/* ---------------- Таблица игроков ---------------- */

.board {
  position: absolute;
  z-index: 18;
  top: calc(72px + var(--safe-top) + 14px);
  right: clamp(10px, 2.5vw, 24px);
  width: 244px;
  max-height: calc(100dvh - 72px - 46px - var(--safe-top) - 50px);
  display: flex;
  flex-direction: column;
  border: 3px solid var(--ink);
  background: rgba(245,239,223,.94);
  box-shadow: 6px 6px 0 var(--ink);
  backdrop-filter: blur(4px);
  overflow: hidden;
}
.board[hidden] { display: none !important; }

.board-head { display: flex; align-items: stretch; border-bottom: 2px solid var(--ink); }
.board-tabs { display: flex; flex: 1; }
.board-tab {
  flex: 1; padding: 9px 6px;
  border: 0; border-right: 2px solid rgba(19,34,35,.15);
  background: transparent; color: var(--ink);
  font: 900 9px Inter, sans-serif; letter-spacing: .12em;
  cursor: pointer; opacity: .5;
}
.board-tab.is-active { opacity: 1; background: var(--yellow); }
.board-close {
  width: 34px; border: 0; border-left: 2px solid rgba(19,34,35,.15);
  background: transparent; color: var(--ink);
  font: 900 18px Inter, sans-serif; cursor: pointer; display: none;
}

.board-list { flex: 1; margin: 0; padding: 5px; list-style: none; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.board-list[hidden] { display: none !important; }

.board-row {
  display: grid;
  grid-template-columns: 16px 10px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border-bottom: 1px dashed rgba(19,34,35,.14);
  font: 700 11px Inter, sans-serif;
}
.board-row:last-child { border-bottom: 0; }
.board-row.is-me { background: rgba(255,199,44,.42); border-radius: 2px; }
.board-rank { font: 900 10px Archivo Black, sans-serif; opacity: .45; text-align: right; }
.board-chip { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); }
.board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-name .streak { color: var(--orange); font-weight: 900; }
.board-score { font: 900 13px Archivo Black, sans-serif; font-variant-numeric: tabular-nums; }
.board-empty { padding: 14px 8px; font: 700 10px Inter, sans-serif; opacity: .5; text-align: center; letter-spacing: .08em; }

.board-foot {
  margin: 0; padding: 7px;
  border-top: 2px solid var(--ink);
  background: rgba(19,34,35,.05);
  font: 800 9px Inter, sans-serif; letter-spacing: .1em;
  text-align: center; opacity: .75;
}
.board-foot b { color: var(--orange); font-size: 11px; }

/* ---------------- Полоса раунда ---------------- */

.controls {
  padding-bottom: var(--safe-bottom);
  padding-left: calc(clamp(12px, 3vw, 44px) + var(--safe-left));
  padding-right: calc(clamp(12px, 3vw, 44px) + var(--safe-right));
  border-top: 3px solid var(--ink);
}
.round-strip { display: flex; align-items: center; gap: 12px; width: 100%; }
.round-label { font: 900 10px Inter, sans-serif; letter-spacing: .16em; white-space: nowrap; }
.round-bar { flex: 1; height: 12px; border: 2px solid var(--ink); background: #fff; overflow: hidden; }
.round-bar i { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(45deg, var(--orange) 0 8px, #ff7a56 8px 16px); transition: width .2s linear; }
.round-bar.is-break i { background: repeating-linear-gradient(45deg, var(--green) 0 8px, #3f9a6d 8px 16px); }
.round-time { font: 17px Archivo Black, sans-serif; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.shake { animation: shake .26s linear; }

/* ---------------- Планшет ---------------- */

@media (max-width: 1080px) {
  .board { width: 212px; }
  .effect-banner, .bonus-hud { max-width: 38%; }
  .feed { max-width: 46%; }
}

/* ---------------- Телефон ---------------- */

@media (max-width: 760px), (max-height: 520px) {
  .game-shell { grid-template-rows: auto 1fr auto; }
  .topbar {
    min-height: 54px;
    gap: 7px;
    padding: 6px calc(14px + var(--safe-right)) 6px calc(14px + var(--safe-left));
    padding-top: calc(6px + var(--safe-top));
  }
  /* Нижняя полоса: 14 px по бокам и 10 px снизу, чтобы шкала и счётчик времени
     не съезжали под скруглённый угол экрана. */
  .controls {
    min-height: 46px;
    padding: 7px calc(16px + var(--safe-right)) 7px calc(16px + var(--safe-left));
    padding-bottom: calc(10px + var(--safe-bottom));
  }
  .round-strip { gap: 9px; }
  .brand-text, .label, .online-word { display: none; }
  .brand-mark { width: 32px; height: 32px; font-size: 12px; }
  .score-card { gap: 8px; }
  #score { font-size: 22px; }
  .divider { display: none; }
  .place-chip { padding: 3px 6px; font-size: 10px; }
  #comboValue { font-size: 16px; }
  .combo-bar { width: 46px; height: 5px; }
  .online-button { height: 34px; padding: 0 8px; }
  .icon-button { width: 34px; height: 34px; }
  .round-label { font-size: 8px; letter-spacing: .1em; }
  .round-time { font-size: 14px; min-width: 26px; }

  .effect-banner, .bonus-hud { top: 8px; min-width: 0; max-width: 42%; padding: 6px 7px; gap: 6px; }
  .effect-banner { left: calc(8px + var(--safe-left)); }
  /* Правый верх на телефоне занят лесенкой соперников, бонус встаёт рядом
     с правилом слева — оба там всего лишь иконки. */
  .bonus-hud { right: auto; left: calc(52px + var(--safe-left)); }
  /* Правила нет — бонусу незачем держать для него место. */
  #effectBanner[hidden] + .bonus-hud { left: calc(8px + var(--safe-left)); }
  .ladder {
    top: 8px;
    right: calc(8px + var(--safe-right));
    min-width: 122px;
    max-width: 52%;
  }
  .ladder li { padding: 4px 5px; font-size: 10px; }
  .ladder .lscore { font-size: 12px; }
  .effect-banner div, .bonus-hud div { display: none; }
  .effect-banner > span, .bonus-hud > span { font-size: 17px; }
  /* ---------------- Лесенка соперников ---------------- */

/* Показываем не «топ-10 недосягаемых», а соседей по таблице: того, кого реально
   обогнать, и разрыв до него. Лидер — одной строкой, для контекста. */
.ladder {
  position: absolute;
  z-index: 9;
  top: 14px; right: 14px;
  margin: 0;
  padding: 3px;
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 134px;
  max-width: 48%;
  border: 2px solid var(--ink);
  background: rgba(245,239,223,.84);
  box-shadow: 3px 3px 0 rgba(19,34,35,.3);
  pointer-events: none;
}
.ladder.is-on { display: flex; }
.ladder li {
  display: grid;
  grid-template-columns: 11px 8px 1fr auto;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  font: 800 10px Inter, sans-serif;
  white-space: nowrap;
}
.ladder li.me { background: var(--yellow); border-radius: 2px; }
.ladder li.gap { display: block; padding: 0 5px; text-align: center; opacity: .4; letter-spacing: .3em; line-height: .8; }
.ladder .lrank { font: 900 9px Archivo Black, sans-serif; opacity: .5; text-align: right; }
.ladder .lchip { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink); }
.ladder .lname { overflow: hidden; text-overflow: ellipsis; }
.ladder .lscore { font: 900 11px Archivo Black, sans-serif; font-variant-numeric: tabular-nums; }
.ladder .ldelta { display: block; font: 900 8px Inter, sans-serif; color: var(--orange); text-align: right; letter-spacing: .02em; }
.ladder .ldelta.lead { color: var(--green); }

.attack-alert { font-size: 10px; padding: 8px 12px; top: 13%; }

  .feed { left: calc(8px + var(--safe-left)); bottom: 8px; max-width: 70%; gap: 3px; }
  .feed li { font-size: 9px; padding: 4px 7px; }

  .sun { width: 50px; height: 50px; }
  .cloud-two { display: none; }
  .reeds-left { transform: rotate(-8deg) scale(.65); }
  .reeds-right { transform: rotate(9deg) scaleX(-1) scale(.65); }
  .toast { top: 52px; font-size: 10px; }

  .intro-card, .podium, .hall { width: calc(100% - 28px); }
  .intro-card { padding: 14px 16px 16px; }
  .title-lockup { gap: 10px; margin-top: 10px; }
  .title-mark { width: 44px; height: 44px; font-size: 16px; }
  .intro-tagline { margin: 8px 0 10px; font-size: 8px; letter-spacing: .1em; }
  .intro-chips { gap: 5px; margin-top: 10px; }
  .intro-chips li { padding: 5px 8px; }
  .alltime { margin-top: 10px; padding: 7px 9px; }
  .alltime-row { font-size: 10px; }
  .wide-button { margin-top: 8px; padding: 9px 11px; }
  .hall { padding: 12px 12px 10px; }
  .hall-name { font-size: 12px; }
  .hall-score { font-size: 14px; }
  .podium { padding: 14px 14px 16px; }
  .intro-card p { font-size: 11px; margin: 8px 0 12px; }
  .podium-name { font-size: 12px; }
  .podium-score { font-size: 15px; }

  /* Таблица уезжает в шторку снизу; z-index выше нижней панели, иначе
     полоса раунда срезала бы ей низ. */
  .board {
    z-index: 22;
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%;
    max-height: min(56dvh, 420px);
    border-width: 3px 0 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 0 rgba(19,34,35,.12);
    padding-bottom: var(--safe-bottom);
    animation: sheet-up .2s ease-out;
  }
  .board-close { display: block; }
  .board-tab { padding: 12px 6px; font-size: 10px; }
  .board-row { padding: 9px 6px; font-size: 12px; }
  .board-score { font-size: 14px; }
}

@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (max-height: 520px) {
  .title-lockup h1 { font-size: 28px; }
  .title-mark { width: 38px; height: 38px; font-size: 14px; }
  .intro-tagline, .intro-chips, #introAllTime { display: none; }
  .name-input { height: 40px; }
  .intro-card { padding: 12px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}