:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: #140546;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #ffffff;
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  font: inherit;
}

.camp-game {
  --violet: #652ad4;
  --logo-violet: #3c1f87;
  --deep: #402074;
  --night: #320972;
  --abyss: #140546;
  --gold: #f2d46b;
  --moon: #f5f4ff;
  --pink: #ff75bd;
  --cyan: #65ddff;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  overscroll-behavior: none;
  padding: max(12px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 18% 12%, rgba(242, 212, 107, 0.2), transparent 25%),
    radial-gradient(circle at 80% 8%, rgba(101, 42, 212, 0.32), transparent 30%),
    linear-gradient(160deg, var(--night), var(--abyss));
}

body.camp-playing {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  touch-action: none;
}

.camp-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.58;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(242,212,107,0.76) 0 1.2px, transparent 2px),
    radial-gradient(circle, rgba(101,221,255,0.7) 0 1px, transparent 1.8px);
  background-size: 86px 104px, 132px 156px, 210px 190px;
  background-position: 8px 12px, 66px 42px, 24px 96px;
}

.camp-shell {
  width: min(100%, 560px);
  margin: 0 auto;
}

.camp-topbar,
.camp-audio,
.action-row,
.play-actions,
.hud {
  display: flex;
  align-items: center;
  gap: 8px;
}

.camp-topbar {
  justify-content: space-between;
  margin-bottom: 12px;
}

.camp-back,
.camp-audio button,
.secondary-btn {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 10px 13px;
  color: var(--moon);
  background: rgba(255,255,255,0.1);
  text-decoration: none;
  font-weight: 850;
  font-size: 13px;
}

.camp-audio button {
  min-height: 38px;
  padding: 8px 10px;
  cursor: pointer;
}

.screen {
  display: none;
  min-height: calc(100svh - 72px);
  align-content: center;
  gap: 14px;
  padding: 18px 0;
}

.screen-active {
  display: grid;
}

.hero-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  min-height: 220px;
}

.hero-wishka,
.hero-suitcase,
.final-wishka {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(7,0,35,0.34));
}

.hero-suitcase {
  transform: translateX(-10px);
}

.kicker,
h1,
h2,
p {
  margin: 0;
}

.kicker {
  color: rgba(245,244,255,0.78);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  font-weight: 950;
}

h1,
h2 {
  line-height: 1.04;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(36px, 11vw, 56px);
}

h2 {
  font-size: clamp(30px, 8vw, 44px);
}

.lead {
  max-width: 510px;
  color: var(--moon);
  font-size: 19px;
  font-weight: 750;
}

.soft-copy,
.rules-list,
.result-screen p,
.final-screen p {
  color: rgba(245,244,255,0.82);
  font-size: 16px;
  line-height: 1.5;
}

.rules-list {
  display: grid;
  gap: 10px;
  padding-left: 24px;
}

.action-row {
  flex-wrap: wrap;
}

.primary-btn,
.link-btn {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--gold), #fff1a5);
  color: #2a145c;
  font-weight: 950;
  text-decoration: none;
  box-shadow: 0 14px 24px rgba(242,212,107,0.22);
  cursor: pointer;
}

.secondary-btn {
  cursor: pointer;
}

.preview-screen {
  align-content: start;
}

.timer-pill,
.hud span,
.result-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  width: fit-content;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.1);
  color: var(--moon);
  font-weight: 900;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: min(58svh, 520px);
  overflow: auto;
  padding: 2px 2px 86px;
  overscroll-behavior: contain;
}

.preview-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 9px;
  min-height: 84px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  padding: 8px;
  background: rgba(255,255,255,0.11);
}

.preview-card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.preview-card span {
  color: var(--moon);
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;
}

.sticky-btn {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 20;
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 520px);
}

.play-screen {
  align-content: start;
  padding-top: 0;
}

body.camp-playing .camp-game {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: max(8px, env(safe-area-inset-top));
}

body.camp-playing .camp-topbar {
  display: none;
}

.hud {
  flex-wrap: wrap;
  position: sticky;
  top: max(6px, env(safe-area-inset-top));
  z-index: 10;
  padding: 6px 0 8px;
  backdrop-filter: blur(14px);
}

.hud span {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 12px;
}

.wishka-talk {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 82px;
}

.wishka-talk img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.wishka-talk p {
  border-radius: 18px;
  padding: 11px 13px;
  background: rgba(255,255,255,0.12);
  color: var(--moon);
  font-weight: 850;
  line-height: 1.32;
}

.play-layout {
  display: grid;
  position: relative;
  min-height: var(--camp-play-height, min(70svh, 660px));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 22%, rgba(242,212,107,0.13), transparent 28%),
    radial-gradient(circle at 84% 70%, rgba(101,221,255,0.12), transparent 28%),
    rgba(255,255,255,0.08);
  touch-action: none;
  overscroll-behavior: contain;
}

.items-field {
  position: relative;
  width: 100%;
  height: var(--camp-play-height, min(70svh, 660px));
  min-height: 440px;
  overflow: hidden;
  touch-action: none;
}

.floating-item {
  position: absolute;
  width: 84px;
  height: 96px;
  border: 0;
  border-radius: 18px;
  padding: 3px;
  background: rgba(255,255,255,0.12);
  color: var(--moon);
  filter: drop-shadow(0 12px 18px rgba(7,0,35,0.22));
  touch-action: none;
  user-select: none;
  cursor: grab;
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--r));
  transition: box-shadow 160ms ease, background 160ms ease, opacity 160ms ease;
}

.floating-item img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  pointer-events: none;
}

.floating-item span {
  display: block;
  overflow: hidden;
  color: rgba(245,244,255,0.92);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.floating-item.dragging {
  z-index: 50;
  background: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 3px rgba(242,212,107,0.5);
  cursor: grabbing;
}

.floating-item.hint {
  animation: hintPulse 0.45s ease-in-out 4;
}

.floating-item.packed {
  opacity: 0;
  pointer-events: none;
}

.suitcase-zone {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  display: grid;
  align-content: center;
  justify-items: center;
  width: min(34%, 320px);
  height: calc(100% - 28px);
  min-height: 250px;
  border: 2px dashed rgba(242,212,107,0.56);
  border-radius: 22px;
  padding: 8px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}

.suitcase-zone img {
  width: min(92%, 300px);
  max-height: min(72%, 410px);
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(7,0,35,0.3));
  pointer-events: none;
}

.suitcase-zone.hot {
  border-color: var(--gold);
  box-shadow: 0 0 28px rgba(242,212,107,0.34), inset 0 0 24px rgba(101,42,212,0.28);
}

.suitcase-zone.bounce {
  animation: suitcaseBounce 420ms ease;
}

.drop-hint {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(20,5,70,0.68);
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
}

.packed-strip {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 34px;
}

.packed-strip img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.play-actions {
  justify-content: center;
  flex-wrap: wrap;
}

.result-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stars-line {
  color: var(--gold);
  font-size: 44px;
  letter-spacing: 4px;
  text-shadow: 0 10px 24px rgba(242,212,107,0.24);
}

.final-wishka {
  width: min(70%, 260px);
  justify-self: center;
}

.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(20,5,70,0.72);
  backdrop-filter: blur(10px);
}

.feedback-modal[hidden] {
  display: none !important;
}

.modal-card {
  display: grid;
  gap: 12px;
  width: min(100%, 460px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(160deg, rgba(60,31,135,0.98), rgba(20,5,70,0.98));
  box-shadow: 0 22px 50px rgba(7,0,35,0.44);
}

.modal-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: 25px;
}

.modal-card p {
  color: rgba(245,244,255,0.86);
  line-height: 1.45;
}

.question,
.answer {
  font-weight: 850;
}

.hidden {
  display: none !important;
}

@keyframes hintPulse {
  50% {
    box-shadow: 0 0 0 5px rgba(242,212,107,0.72), 0 0 28px rgba(242,212,107,0.62);
    transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(1.08);
  }
}

@keyframes suitcaseBounce {
  35% {
    transform: scale(1.03);
  }
  70% {
    transform: scale(0.985);
  }
}

@media (min-width: 760px) {
  .camp-shell {
    width: min(100%, 1040px);
  }

  .screen {
    min-height: calc(100svh - 70px);
  }

  .hero-scene {
    width: min(560px, 100%);
    justify-self: center;
  }

  .play-layout {
    min-height: min(72svh, 680px);
  }

  .items-field {
    height: min(72svh, 680px);
  }

  .preview-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-height: min(64svh, 560px);
  }

  .preview-card {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 126px;
    text-align: center;
  }
}

@media (max-width: 759px) {
  .camp-game {
    padding-inline: 8px;
  }

  body.camp-playing .screen {
    min-height: auto;
  }

  body.camp-playing .play-screen {
    gap: 8px;
  }

  body.camp-playing .hud {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 0;
  }

  body.camp-playing .hud span {
    justify-content: center;
    min-height: 30px;
    padding: 5px 6px;
    font-size: 11px;
  }

  body.camp-playing .wishka-talk {
    grid-template-columns: 42px 1fr;
    min-height: 48px;
    gap: 7px;
  }

  body.camp-playing .wishka-talk img {
    width: 42px;
    height: 42px;
  }

  body.camp-playing .wishka-talk p {
    padding: 8px 10px;
    font-size: 12px;
  }

  .play-layout {
    min-height: var(--camp-play-height, calc(100svh - 178px));
    border-radius: 20px;
  }

  .items-field {
    height: var(--camp-play-height, calc(100svh - 178px));
    min-height: 450px;
  }

  .suitcase-zone {
    top: 8px;
    right: 8px;
    width: min(46%, 188px);
    height: 168px;
    min-height: 0;
    border-radius: 18px;
    padding: 6px;
  }

  .suitcase-zone img {
    width: min(88%, 150px);
    max-height: 116px;
  }

  .drop-hint {
    top: 7px;
    padding: 5px 8px;
    font-size: 10px;
  }

  .packed-strip {
    min-height: 26px;
  }

  .packed-strip img {
    width: 24px;
    height: 24px;
  }

  .play-actions {
    gap: 6px;
  }

  .play-actions .secondary-btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .camp-audio {
    display: none;
  }

  .floating-item {
    width: 72px;
    height: 86px;
  }

  .floating-item img {
    width: 62px;
    height: 62px;
  }

  .preview-grid {
    grid-template-columns: 1fr;
  }
}