/* K-pop survivors — оболочка интерфейса.
   Канвас рисует игру, DOM — только меню и кнопки поверх него. */

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: #0a0618; color: #e9def8;
  font-family: "Trebuchet MS", "Segoe UI", Tahoma, Arial, sans-serif;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; touch-action: none;
}

#wrap {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background: #0a0618; overflow: hidden;
}

#scr {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: block; background: #0a0618; outline: none;
  image-rendering: pixelated; image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor;
  touch-action: none;
}

/* ------------------------------- экраны ------------------------------- */
.screen {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 10;
  display: none; overflow-y: auto; overflow-x: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(70, 20, 90, .92), rgba(8, 4, 20, .96));
  -webkit-overflow-scrolling: touch;
}
.screen.on { display: block; }
.screen .inner {
  box-sizing: border-box; width: 100%; max-width: 760px;
  margin: 0 auto; padding: 18px 14px 26px; text-align: center;
  min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;
}

.logo {
  font-size: 40px; font-weight: 900; letter-spacing: 4px; line-height: .95;
  color: #ff5fb0; text-shadow: 0 0 22px rgba(255, 60, 150, .55), 0 3px 0 #3a0b28;
}
.logo span { display: block; font-size: 21px; letter-spacing: 8px; color: #7de3ff; text-shadow: 0 0 16px rgba(60, 200, 255, .5); }
.tagline { color: #c0aee0; font-size: 14px; margin: 8px 0 14px; }

h2 { margin: 4px 0 12px; font-size: 24px; letter-spacing: 3px; color: #ffd7f0; text-shadow: 0 0 14px rgba(255, 90, 170, .45); }

p { margin: 5px 0; font-size: 14px; line-height: 1.5; color: #c8bbe2; }
.dim { color: #9a8cbc; }
.tiny { font-size: 12px; }

/* ------------------------------- кнопки ------------------------------- */
button {
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 1px;
  color: #ffe7f7; background: linear-gradient(180deg, #52246e, #33153f);
  border: 2px solid #8e3fb0; border-radius: 10px;
  padding: 11px 18px; margin: 5px; cursor: pointer;
  min-width: 108px; min-height: 44px;
  box-shadow: 0 3px 0 #1d0b28, 0 0 14px rgba(160, 60, 200, .25);
  transition: transform .08s ease, filter .12s ease;
}
button:hover { filter: brightness(1.18); }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 #1d0b28; }
button:disabled { opacity: .45; cursor: default; filter: none; }
button.big {
  font-size: 20px; padding: 15px 44px; min-width: 220px;
  background: linear-gradient(180deg, #ff59a8, #b32167); border-color: #ffa3d2;
}
button.ad { background: linear-gradient(180deg, #2f9d63, #17603c); border-color: #57d99a; }
button.ad::before { content: "▶ "; }
button.back { margin-top: 14px; background: linear-gradient(180deg, #34294a, #221632); border-color: #57406e; }

.menuRow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.menuRow.small button { font-size: 13px; padding: 9px 14px; min-width: 92px; }

.purse { margin: 12px 0 4px; font-size: 18px; color: #ffe08a; font-weight: 800; }
.purse .coin { color: #ffc93c; margin-right: 6px; }

/* --------------------------- кнопки над игрой -------------------------- */
#hudBtns { position: absolute; right: 8px; top: 8px; z-index: 9; display: flex; }
#hudBtns.hidden { display: none; }
.iconBtn {
  min-width: 40px; min-height: 40px; width: 40px; height: 40px;
  padding: 0; margin: 0 0 0 6px; font-size: 15px; border-radius: 9px;
  background: rgba(30, 14, 46, .72); border-color: #6b3a8c; box-shadow: none;
}
.iconBtn.off { color: #7c6a94; border-color: #40304f; }

/* ------------------------------- сетки -------------------------------- */
.grid { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
.tile {
  box-sizing: border-box; width: 210px; margin: 6px; padding: 12px 12px 14px;
  border: 2px solid #6a3a86; border-radius: 12px; background: rgba(30, 14, 46, .78);
  text-align: left; cursor: pointer; position: relative;
}
.tile:hover { border-color: #ff7ec2; background: rgba(52, 22, 74, .85); }
.tile.sel { border-color: #7de3ff; box-shadow: 0 0 16px rgba(80, 210, 255, .35); }
.tile.lock { opacity: .72; }
.tile .n { font-size: 16px; font-weight: 800; color: #ffb3dd; letter-spacing: 1px; }
.tile .r { font-size: 12px; color: #7de3ff; margin: 2px 0 6px; }
.tile .d { font-size: 12.5px; color: #c0b2dc; line-height: 1.4; }
.tile .price { margin-top: 9px; font-size: 14px; font-weight: 800; color: #ffe08a; }
.tile .price.no { color: #ff7c8f; font-size: 13px; }
.tile .pips { margin-top: 8px; letter-spacing: 3px; color: #57d99a; font-size: 13px; }

/* Карточка айдола: аватар — отдельная колонка шапки, поэтому текст
   физически не может под него заехать ни на какой ширине. */
.tile.char .head { display: flex; align-items: center; margin-bottom: 6px; }
.tile.char .av {
  flex: 0 0 auto; width: 36px; height: 50px; margin-right: 9px; object-fit: contain;
  image-rendering: pixelated; image-rendering: -moz-crisp-edges;
}
.tile.char .ttl { min-width: 0; }
.tile.char .ttl .n, .tile.char .ttl .r { overflow-wrap: break-word; }
.tile.char .r { margin: 1px 0 0; }
.tile.prem { border-color: #ffc93c; }
.tile.prem.sel { border-color: #7de3ff; }
.tile .price.iapPrice { color: #ffc93c; display: flex; align-items: center; }
.tile .price.iapPrice img { height: 15px; margin-left: 5px; }

/* карточки улучшений при повышении уровня */
.cards { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
.card {
  box-sizing: border-box; width: 168px; margin: 6px; padding: 10px;
  border: 2px solid #6a3a86; border-radius: 12px; background: rgba(30, 14, 46, .85);
  text-align: left; cursor: pointer; position: relative;
}
.card:hover { border-color: #ff7ec2; background: rgba(56, 24, 80, .9); }
.card .k { position: absolute; right: 8px; top: 6px; color: #6f5a90; font-size: 12px; font-weight: 700; }
/* object-fit, иначе высокие иконки вроде микрофонной стойки сплющивает в квадрат */
.card .ic { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; display: block; margin-bottom: 4px; }
.card .n { font-size: 14px; font-weight: 800; color: #ffb3dd; letter-spacing: .5px; }
.card .l { font-size: 11.5px; color: #57d99a; margin: 2px 0 5px; }
.card .d { font-size: 12px; color: #bdafd8; line-height: 1.35; }

/* ------------------------------ лидерборд ------------------------------ */
.board { width: 100%; max-width: 460px; }
.row {
  display: flex; align-items: center; padding: 8px 10px; margin: 4px 0;
  border-radius: 9px; background: rgba(30, 14, 46, .7); border: 1px solid #4a2b64;
}
.row.me { border-color: #ff7ec2; background: rgba(74, 26, 62, .8); }
.row .rk { width: 38px; font-weight: 800; color: #ffc93c; text-align: left; }
.row .av2 { width: 26px; height: 26px; border-radius: 50%; margin-right: 8px; background: #3a2350; }
.row .nm { flex: 1; text-align: left; font-size: 14px; color: #e9def8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sc { font-weight: 800; color: #7de3ff; font-size: 14px; }

/* ------------------------------ настройки ------------------------------ */
.optRow {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 380px; margin: 5px 0; padding: 6px 4px 6px 12px;
  border-bottom: 1px solid #3a2450; font-size: 15px; color: #d7c9ee;
}
.optRow button { min-width: 96px; margin: 0; }
.optRow.col { flex-direction: column; align-items: stretch; padding-left: 4px; }

.langs { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.langs button {
  min-width: 0; margin: 3px; padding: 8px 12px; font-size: 13px;
  background: linear-gradient(180deg, #3a2450, #251638); border-color: #57406e;
}
.langs button.sel { border-color: #7de3ff; color: #d8f6ff; box-shadow: 0 3px 0 #1d0b28, 0 0 12px rgba(80, 210, 255, .3); }

/* Выбор сложности в меню: та же полоска кнопок, что и у языков, плюс подпись
   под ней — что именно меняется в забеге. Теми же кнопками переключаются
   вкладки рейтинга, поэтому цвета выбранного режима заданы на самой полоске. */
.diffPick { margin: 6px 0 2px; max-width: 420px; }
.diffPick #diffList { margin-top: 3px; }
.diffPick p { margin: 4px 0 0; line-height: 1.45; min-height: 2.2em; }
.langs button.d_norm.sel { border-color: #ffc93c; color: #ffe8a8; box-shadow: 0 3px 0 #1d0b28, 0 0 12px rgba(255, 201, 60, .3); }
.langs button.d_hard.sel { border-color: #ff7c8f; color: #ffd6dd; box-shadow: 0 3px 0 #1d0b28, 0 0 12px rgba(255, 124, 143, .32); }

#boardTabs { margin-bottom: 2px; }
#bMine { margin: 2px 0 6px; color: #ffe08a; }

.stats { margin: 6px 0 10px; }
.stats b { color: #ffd7f0; }
.chips { margin-top: 6px; font-size: 12.5px; color: #a795c8; line-height: 1.7; }
.chips i { font-style: normal; color: #ffb3dd; }

.help { text-align: left; max-width: 520px; font-size: 13.5px; color: #c8bbe2; line-height: 1.6; }
.help h3 { color: #ffb3dd; font-size: 15px; margin: 14px 0 4px; letter-spacing: 1px; }
.help b { color: #ffe7f7; }

/* --------------------------- покупки (IAP) ---------------------------- */
.iap { width: 100%; margin-top: 14px; padding-top: 10px; border-top: 1px solid #3a2450; }
.iap.hidden { display: none; }
.iapItem {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 420px; margin: 6px auto; padding: 8px 12px;
  border: 1px solid #4a2b64; border-radius: 10px; background: rgba(30, 14, 46, .7);
}
.iapItem .t { text-align: left; font-size: 13.5px; color: #e9def8; }
.iapItem .t i { display: block; font-style: normal; font-size: 11.5px; color: #9a8cbc; }
.iapItem button { margin: 0; min-width: 96px; font-size: 13px; padding: 8px 10px; }
.iapItem button img { height: 14px; vertical-align: -2px; margin-left: 4px; }

/* ------------------------- реклама и уведомления ----------------------- */
.adNote {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 40;
  padding: 16px 26px; border-radius: 12px; background: rgba(10, 6, 24, .94);
  border: 2px solid #8e3fb0; font-size: 17px; font-weight: 700; color: #ffe7f7; text-align: center;
}
.adNote.hidden { display: none; }

.toast {
  position: absolute; left: 50%; bottom: 16%; transform: translate(-50%, 0); z-index: 45;
  padding: 10px 18px; border-radius: 10px; background: rgba(10, 6, 24, .94);
  border: 1px solid #8e3fb0; font-size: 14px; color: #ffe7f7;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  max-width: 80%; text-align: center;
}
.toast.on { opacity: 1; }

/* --------------------- «поверни устройство» ---------------------------- */
/* Перекрывает вообще всё, включая экраны меню и паузы: в портретной
   ориентации играть нельзя, поэтому z-index выше любого другого слоя. */
.rotate {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(70, 20, 90, .96), rgba(8, 4, 20, .99));
}
.rotate.on { display: flex; }
.rotateInner { padding: 18px; text-align: center; max-width: 320px; }
.rotate h2 { margin: 14px 0 6px; }
.rotate p { color: #c0b2dc; font-size: 14px; line-height: 1.5; }

/* Схематичный телефон, который поворачивается из портретной в альбомную. */
.phone {
  width: 58px; height: 96px; margin: 0 auto;
  border: 3px solid #ff86bf; border-radius: 10px; background: rgba(255, 134, 191, .10);
  animation: rotPhone 2.4s ease-in-out infinite;
}
.phone i {
  display: block; width: 22px; height: 3px; margin: 6px auto 0;
  border-radius: 2px; background: #ff86bf;
}
@keyframes rotPhone {
  0%, 28%   { transform: rotate(0deg); }
  55%, 100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .phone { animation: none; transform: rotate(-90deg); }
}

.hidden { display: none !important; }

/* ------------------------------ адаптив -------------------------------- */
@media (max-width: 560px) {
  .logo { font-size: 30px; letter-spacing: 2px; }
  .logo span { font-size: 15px; letter-spacing: 5px; }
  h2 { font-size: 19px; }
  button { font-size: 14px; padding: 10px 14px; min-width: 96px; }
  button.big { font-size: 17px; padding: 13px 28px; min-width: 180px; }
  .tile { width: 46%; min-width: 150px; }
  .card { width: 46%; min-width: 140px; }
  .screen .inner { padding: 12px 10px 20px; }
}
@media (max-height: 430px) {
  .logo { font-size: 24px; }
  .logo span { font-size: 12px; }
  .tagline { display: none; }
  h2 { font-size: 17px; margin-bottom: 6px; }
  button { padding: 7px 12px; min-height: 36px; margin: 3px; font-size: 13px; }
  button.big { padding: 9px 22px; font-size: 15px; min-height: 38px; }
  .purse { margin: 6px 0 2px; font-size: 15px; }
  .stats { margin: 3px 0 5px; }
  p { margin: 2px 0; font-size: 12.5px; }
  .card { width: 22%; min-width: 128px; padding: 7px; }
  .card .ic { width: 26px; height: 26px; }
  .card .d { font-size: 11px; }
  .tile { padding: 8px 10px 10px; }
  .tile .d { font-size: 11.5px; }
  .optRow { margin: 2px 0; padding: 3px 4px 3px 10px; font-size: 13px; }
  .optRow button { min-height: 32px; }
  .langs { margin-top: 3px; }
  .langs button { padding: 5px 9px; font-size: 11.5px; margin: 2px; min-height: 28px; }
  .screen .inner { padding: 6px 10px 10px; }
}