/* Sea Hunter Mini App shell -- built directly on the shared hypercasual
   tokens (see ../hypercasual.css), not a new visual system. Matches the
   bright/chunky/candy look sea-hunter-cards/style.css's #main-menu already
   adopted (README-hypercasual-style.md's "one coherent screen per pass"
   approach) rather than the dark cyber-UI the in-game board still uses. */
@import url("../hypercasual.css");

* { box-sizing: border-box; }

html {
  /* Same ~1.9x base-size approach as sea-hunter-cards/style.css so the
     --hc-text-* rem ladder reads as big/chunky here too (owner's #1
     readability ask), not the browser's cramped 16px default. */
  font-size: 30px;
  line-height: 1.45;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: linear-gradient(180deg, var(--hc-bg) 0%, #ffe4c4 100%);
  color: var(--hc-ink);
  font-family: var(--hc-font-body);
}

.hidden { display: none !important; }

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.view {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- Shared building blocks ------------------------------------------ */

.card {
  background: var(--hc-bg-card);
  border: 2px solid var(--hc-border);
  border-radius: var(--hc-radius-lg);
  box-shadow: var(--hc-shadow-card);
  padding: 18px;
}

.section-title {
  font-family: var(--hc-font-display);
  font-weight: 800;
  font-size: var(--hc-text-lg);
  margin: 0 0 8px;
  color: var(--hc-ink);
}

.section-body {
  font-size: var(--hc-text-sm);
  color: var(--hc-ink-dim);
  margin: 0 0 14px;
}

.btn-full {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.badge {
  font-family: var(--hc-font-display);
  font-weight: 800;
  font-size: var(--hc-text-xs);
  border-radius: var(--hc-radius-pill);
  padding: 4px 12px;
  letter-spacing: 0.04em;
}
.badge-soon { background: var(--hc-candy-purple); color: #fff; }
.badge-test { background: var(--hc-candy-yellow); color: var(--hc-ink); }

/* ---- Hero (showcase) --------------------------------------------------- */

.hero {
  text-align: center;
  padding: 12px 0 4px;
}
.hero-emoji {
  font-size: var(--hc-text-xxl);
  animation: hero-bob 1.8s ease-in-out infinite;
}
@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero-title {
  font-family: var(--hc-font-display);
  font-weight: 800;
  font-size: var(--hc-text-xxl);
  margin: 6px 0 2px;
  color: var(--hc-ink);
}
.hero-sub {
  font-size: var(--hc-text-md);
  font-weight: 700;
  color: var(--hc-ink-dim);
  margin: 0;
}

/* ---- Video rules player ------------------------------------------------ */

.rules-video {
  width: 100%;
  border-radius: var(--hc-radius-md);
  background: #000;
  display: block;
  aspect-ratio: 16 / 9;
}
.rules-playlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.clip-btn {
  font-family: var(--hc-font-body);
  font-weight: 700;
  font-size: var(--hc-text-xs);
  background: var(--hc-bg-panel);
  color: var(--hc-ink-dim);
  border: 2px solid var(--hc-border);
  border-radius: var(--hc-radius-pill);
  padding: 6px 14px;
  cursor: pointer;
}
.clip-btn.active {
  background: var(--hc-candy-blue);
  color: #fff;
  border-color: var(--hc-candy-blue);
}
.media-missing-note {
  font-size: var(--hc-text-xs);
  color: var(--hc-ink-dim);
  font-style: italic;
  margin: 10px 0 0;
}

/* ---- Locked teasers ----------------------------------------------------- */

.teasers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.teaser-card {
  background: rgba(255, 255, 255, 0.55);
  border: 2px dashed var(--hc-border);
  border-radius: var(--hc-radius-md);
  padding: 16px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
}
.teaser-icon { font-size: var(--hc-text-xl); }
.teaser-title {
  font-family: var(--hc-font-display);
  font-weight: 800;
  font-size: var(--hc-text-sm);
  color: var(--hc-ink);
}
.teaser-hint {
  font-size: var(--hc-text-xs);
  color: var(--hc-ink-dim);
}

.login-cta { text-align: center; }
.login-hint {
  font-size: var(--hc-text-xs);
  color: var(--hc-ink-dim);
  min-height: 1.4em;
  margin: 8px 0 0;
}

/* ---- Account chip (user view) ------------------------------------------ */

.account-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--hc-bg-panel);
  border: 2px solid var(--hc-border);
  border-radius: var(--hc-radius-lg);
  box-shadow: var(--hc-shadow-card);
  padding: 14px 16px;
}
.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hc-candy-teal);
  font-size: 1.6rem;
}
.account-name {
  font-family: var(--hc-font-display);
  font-weight: 800;
  font-size: var(--hc-text-md);
  color: var(--hc-ink);
}
.account-role {
  font-size: var(--hc-text-xs);
  color: var(--hc-ink-dim);
}

/* ---- Launch grid (user view) -------------------------------------------- */

.launch-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.launch-card {
  text-align: center;
  text-decoration: none;
}

/* ---- Stub grid (user view) ---------------------------------------------- */

.stub-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stub-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 2px dashed var(--hc-border);
  border-radius: var(--hc-radius-md);
  padding: 12px 14px;
  opacity: 0.85;
}
.stub-icon { font-size: var(--hc-text-lg); }
.stub-title {
  flex: 1;
  font-family: var(--hc-font-display);
  font-weight: 700;
  font-size: var(--hc-text-sm);
  color: var(--hc-ink);
}

.settings-row { text-align: center; }
.settings-hint {
  font-size: var(--hc-text-xs);
  color: var(--hc-ink-dim);
  margin: 8px 0 0;
}