:root {
  --bg: #202124;
  --fg: #e8e8eb;
  --dim: #74767d;
  --press: rgba(255, 255, 255, 0.06);
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

body {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}

#stage.pointer {
  cursor: pointer;
}

#stage.drag {
  cursor: grabbing;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--dim);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.25s, background-color 0.25s, transform 0.15s, opacity 0.25s;
}

button svg {
  width: 24px;
  height: 24px;
}

button:active {
  transform: scale(0.94);
}

button:focus-visible {
  outline: 1px solid var(--dim);
  outline-offset: -1px;
}

button:disabled {
  opacity: 0.25;
  cursor: default;
}

@media (hover: hover) {
  button:not(:disabled):hover {
    color: var(--fg);
  }
}

.top {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.top > * {
  pointer-events: auto;
}

.count {
  display: flex;
  align-items: center;
}

.dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
  min-height: 44px;
}

.dot {
  border-radius: 50%;
  flex: none;
  animation: pop 0.3s ease-out;
}

@keyframes pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

#sound .mute {
  display: none;
}

#sound.off .wave {
  display: none;
}

#sound.off .mute {
  display: inline;
}

body.reef {
  background: #1d2226;
}

.reef .dots {
  padding: 0 10px;
}

/* на узком экране кнопки сверху компактнее, чтобы всё влезло в строку */
@media (max-width: 480px) {
  .top button {
    width: 34px;
  }

  .top .stock {
    gap: 0;
  }

  .reef .dots {
    padding: 0 6px;
    gap: 3px;
  }

  .xp {
    padding: 0 6px;
  }
}

#rec.on {
  color: #f08f86;
  background: rgba(240, 143, 134, 0.12);
}

#rec.on .rec-dot {
  animation: pulse 1.2s ease-in-out infinite;
}

.card-actions .share.done {
  color: #9fe6c9;
}

#reset.armed {
  color: #f0a58f;
  background: rgba(240, 165, 143, 0.12);
}

.stock {
  display: flex;
  align-items: center;
  gap: 4px;
}

.reef #food {
  cursor: pointer;
  border-radius: 12px;
}

.xp {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 10px;
  color: #cfe6f0;
  font: 500 13px/1 ui-rounded, system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}

.xp svg {
  width: 16px;
  height: 16px;
}

/* подсказки при наведении */

[data-tip] {
  position: relative;
}

@media (hover: hover) {
  [data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(12, 14, 16, 0.92);
    color: var(--fg);
    font: 12px/1.2 system-ui, -apple-system, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
  }

  .seasons [data-tip]:hover::after {
    top: auto;
    bottom: calc(100% + 6px);
  }

  .card-bars [data-tip]:hover::after {
    left: 0;
    transform: none;
  }
}
/* карточка рыбки */

.card {
  position: fixed;
  top: max(64px, calc(env(safe-area-inset-top) + 52px));
  left: max(12px, env(safe-area-inset-left));
  width: 232px;
  padding: 10px 12px 12px;
  box-sizing: border-box;
  border-radius: 16px;
  background: rgba(24, 28, 31, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: var(--dim);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}

.card.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.portrait {
  width: 80px;
  height: 64px;
}

.card-actions {
  display: flex;
  margin: -6px -8px 0 0;
}

.card-actions button {
  width: 32px;
  height: 36px;
}

.card-actions svg {
  width: 18px;
  height: 18px;
}

.card-name {
  margin-top: 4px;
  padding: 2px 4px;
  margin-left: -4px;
  border-radius: 6px;
  color: var(--fg);
  font: 600 15px/1.3 system-ui, -apple-system, sans-serif;
  outline: none;
  cursor: text;
}

.card-name:focus {
  background: rgba(255, 255, 255, 0.06);
}

.parents {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.parents[hidden] {
  display: none;
}

.parent {
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--dim);
  font: 12px/1.4 system-ui, -apple-system, sans-serif;
}

.parent.alive {
  color: var(--fg);
  cursor: pointer;
}

.card-actions .fav.on {
  color: #f0d79a;
}

.card-actions .fav.on svg {
  fill: currentColor;
}

.card-traits {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  margin: 4px 0 8px;
  color: var(--fg);
}

.card-traits svg {
  width: 18px;
  height: 18px;
}

.swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.shine {
  color: #f3e3b3;
}

.shine[hidden] {
  display: none;
}

.pearl {
  display: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f4efe6;
  box-shadow: 0 0 8px rgba(244, 239, 230, 0.8);
}

.pearl.on {
  display: block;
}

.gen {
  display: flex;
  gap: 3px;
  margin-left: auto;
}

.gen i {
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: var(--dim);
}

.card-bars .row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 20px;
}

.card-bars svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.track {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.fill {
  height: 100%;
  background: var(--fg);
  opacity: 0.7;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.4s;
}

.motif {
  display: flex;
  gap: 10px;
  height: 24px;
  margin-top: 8px;
  padding-left: 24px;
}

.motif i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg);
  opacity: 0.8;
}

/* сезоны */

.seasons {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

/* панель улучшения места */

.panel {
  position: fixed;
  top: max(64px, calc(env(safe-area-inset-top) + 52px));
  right: max(12px, env(safe-area-inset-right));
  width: 208px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 16px;
  background: rgba(24, 28, 31, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: var(--dim);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}

.panel.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--fg);
  font: 500 14px/1 system-ui, -apple-system, sans-serif;
}

.panel-head button {
  width: 36px;
  height: 36px;
  margin: -8px -8px -8px 0;
}

.panel-head button svg {
  width: 18px;
  height: 18px;
}

.levels {
  display: flex;
  gap: 6px;
  margin: 14px 0;
}

.levels i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.4s;
}

.levels i.on {
  background: #cfe6f0;
}

.upgrade {
  width: 100%;
  height: 40px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: rgba(207, 230, 240, 0.1);
  color: #cfe6f0;
  font: 500 13px/1 system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}

.upgrade svg {
  width: 16px;
  height: 16px;
}

@media (hover: hover) {
  .upgrade:not(:disabled):hover {
    background: rgba(207, 230, 240, 0.18);
    color: #fff;
  }
}

.upgrade.max {
  display: none;
}

/* концерт */

.seasons .concert {
  width: 36px;
  height: 36px;
  margin-right: 4px;
  align-self: center;
}

.seasons .concert svg {
  width: 20px;
  height: 20px;
}

.concert.ready {
  color: #f0d79a;
  animation: pulse 1.8s ease-in-out infinite;
}

.concert.on {
  color: #f0d79a;
  background: rgba(240, 215, 154, 0.15);
}

/* цели */

.goals {
  width: 260px;
}

.goal-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.goal-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: var(--fg);
  font: 13px/1.3 system-ui, -apple-system, sans-serif;
}

.goal-reward {
  color: #cfe6f0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.goal .fill {
  background: #cfe6f0;
}

.goal.done .goal-row {
  color: #9fe6c9;
}

.goal.done .fill {
  background: #9fe6c9;
}

.tide {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tide-btn {
  width: 100%;
  height: 40px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: rgba(159, 216, 232, 0.08);
  color: #9fd8e8;
  font: 500 13px/1 system-ui, -apple-system, sans-serif;
}

.tide-btn svg {
  width: 18px;
  height: 18px;
}

.tide-btn .tide-mul {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.tide-btn.armed {
  color: #f0d79a;
  background: rgba(240, 215, 154, 0.14);
}

#goals.fresh::before {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9fe6c9;
  box-shadow: 0 0 8px rgba(159, 230, 201, 0.8);
  animation: pulse 1.6s ease-in-out infinite;
}

/* меню построек */

.build-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.build-list .option {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
  font: 13px/1 system-ui, -apple-system, sans-serif;
}

.build-list .option svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.build-list .option .name {
  flex: 1;
  text-align: left;
}

.build-list .option .cost {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #cfe6f0;
  font-variant-numeric: tabular-nums;
}

.build-list .option .cost svg {
  width: 14px;
  height: 14px;
}

@media (hover: hover) {
  .build-list .option:not(:disabled):hover {
    background: rgba(207, 230, 240, 0.1);
  }
}

/* бестиарий */

.dex {
  width: 272px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}

.dex-total {
  margin-left: 6px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.dex section {
  margin-top: 14px;
}

.dex-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font: 12px/1 system-ui, -apple-system, sans-serif;
}

.dex-count {
  font-variant-numeric: tabular-nums;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.tile {
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: var(--fg);
}

.tile:not(.on) {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1.5px, transparent 2px);
}

.tile.on {
  background-color: rgba(255, 255, 255, 0.05);
}

.tile svg {
  width: 20px;
  height: 20px;
}

.tiles.dots .tile {
  height: 26px;
  border-radius: 50%;
  width: 26px;
  justify-self: center;
}

#dex.fresh::before {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f0d79a;
  box-shadow: 0 0 8px rgba(240, 215, 154, 0.8);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}

.card-traits .rare svg {
  color: #f0d79a;
}

.card-traits .rare[hidden] {
  display: none;
}

.season {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  opacity: 0.45;
  transition: opacity 1s, color 1s;
}

.season.now {
  color: var(--fg);
  opacity: 1;
}

.season svg {
  width: 18px;
  height: 18px;
}

.season .track {
  width: 44px;
  flex: none;
  height: 2px;
}

.season .fill {
  transition: transform 1s linear;
}

.bar {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.bar button svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.1;
}

.bar button.on {
  color: var(--fg);
  background: var(--press);
}

/* звучание: находки, меняющие музыку */

.seasons .tuner {
  width: 36px;
  height: 36px;
  margin-left: 4px;
  align-self: center;
}

.seasons .tuner svg {
  width: 20px;
  height: 20px;
}

#tuner.fresh {
  color: #f0d79a;
}

#tuner.fresh::before {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0d79a;
  box-shadow: 0 0 8px rgba(240, 215, 154, 0.8);
  animation: pulse 1.6s ease-in-out infinite;
}

.relic-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.relic-slots .slot {
  width: auto;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: var(--fg);
}

.relic-slots .slot:not(.full):not(.locked) {
  box-shadow: inset 0 0 0 1px rgba(240, 215, 154, 0.25);
}

.relic-slots .slot.full {
  background: rgba(240, 215, 154, 0.12);
  box-shadow: inset 0 0 0 1px rgba(240, 215, 154, 0.35);
  color: #f0d79a;
}

.relic-slots .slot.locked {
  color: var(--dim);
  opacity: 0.5;
}

.relic-slots .slot svg {
  width: 20px;
  height: 20px;
}

.relic-slots .slot.locked svg {
  width: 14px;
  height: 14px;
}

.relic-info {
  min-height: 34px;
  margin-top: 12px;
  color: var(--dim);
  font: 12px/1.4 system-ui, -apple-system, sans-serif;
}

.relic-info b {
  display: block;
  color: var(--fg);
  font-weight: 500;
}

.relics button.tile {
  width: auto;
}

.relics .tile.worn {
  color: #f0d79a;
  background-color: rgba(240, 215, 154, 0.12);
  box-shadow: inset 0 0 0 1px rgba(240, 215, 154, 0.35);
}

.relics .tile.picked:not(.worn) {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

@media (hover: hover) {
  .relics button.tile:hover,
  .relic-slots button.slot:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .relics .tile:hover::after,
  .relic-slots .slot:hover::after {
    width: max-content;
    max-width: 150px;
    white-space: normal;
    text-align: center;
  }

  /* у правых плиток подсказка прижата к правому краю, чтобы не вылезать за экран */
  .relics .tiles > :nth-child(6n + 4):hover::after,
  .relics .tiles > :nth-child(6n + 5):hover::after,
  .relics .tiles > :nth-child(6n):hover::after,
  .relic-slots > :nth-child(n + 4):hover::after {
    left: auto;
    right: 0;
    transform: none;
    text-align: right;
  }
}