/* ===== asobi.kids Design System ===== */
/* Based on: moodboard-03 (kawaii mochi characters) + moodboard-04 (soft vivid UI) */
/* Keywords: soft, kawaii, white-base, flat colors, no gradients */

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colors - Primary (moodboard-04 pastel palette) */
  --color-coral: #F29CB2;
  --color-mint: #B5DDC9;
  --color-sky: #A5C9E8;
  --color-honey: #FBE9A0;
  --color-sakura: #FBD4DC;
  --color-lavender: #C5B8E0;

  /* Colors - Neutral */
  --color-white: #FFFFFF;
  --color-cream: #FBF9F6;
  --color-mist: #F0EDEA;
  --color-ash: #C4BDB6;
  --color-stone: #8A8480;
  --color-ink: #5A3A3A;

  /* Semantic */
  --color-success: #B5DDC9;
  --color-warning: #FBE9A0;
  --color-error: #F29CB2;
  --color-info: #A5C9E8;

  /* Typography */
  --font-family: 'Zen Maru Gothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  --text-xs: 0.625rem;
  --text-sm: 0.75rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --font-normal: 400;
  --font-bold: 700;
  --font-black: 900;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(90, 58, 58, .06);
  --shadow-md: 0 2px 8px rgba(90, 58, 58, .08);
  --shadow-lg: 0 4px 16px rgba(90, 58, 58, .10);

  /* Legacy aliases (for gradual migration of game-specific CSS) */
  --bg: var(--color-cream);
  --surface: var(--color-white);
  --surface2: var(--color-mist);
  --primary: var(--color-coral);
  --secondary: var(--color-sky);
  --accent-cyan: var(--color-sky);
  --accent-yellow: var(--color-honey);
  --accent-green: var(--color-mint);
  --text: var(--color-ink);
  --text-muted: var(--color-stone);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-md);
  --shadow-hover: var(--shadow-lg);
  --gradient-btn: var(--color-coral);
  --gradient-header: var(--color-coral);
}

body {
  font-family: var(--font-family);
  background: var(--color-white);
  color: var(--color-ink);
  min-height: 100vh;
  line-height: 1.6;
  font-size: var(--text-base);
}

a { color: inherit; text-decoration: none; }

/* ===== Header ===== */
.site-header {
  background: var(--color-white);
  border-bottom: 3px solid var(--color-coral);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  color: var(--color-ink);
}
.site-header h1 {
  font-size: var(--text-xl);
  font-weight: var(--font-black);
  letter-spacing: .05em;
  color: var(--color-coral);
}
.site-header .subtitle {
  color: var(--color-stone);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}
.site-header a { display: inline-block; }

/* ===== Game Grid (legacy games.html card layout) ===== */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  max-width: 1100px;
  margin: var(--space-6) auto;
  padding: 0 var(--space-4);
}

.game-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
}
.game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-coral);
}
.game-card .card-icon {
  font-size: 3.5rem;
  text-align: center;
  padding: var(--space-4) 0 var(--space-2);
}
.game-card .card-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  flex: 1;
}
.game-card .card-body h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
  font-weight: var(--font-bold);
}
.game-card .card-body p {
  color: var(--color-stone);
  font-size: var(--text-sm);
}
.game-card .card-footer {
  background: var(--color-cream);
  padding: var(--space-2) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-stone);
}

.badge {
  display: inline-block;
  background: var(--color-coral);
  color: var(--color-ink);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}
.badge.coming { background: var(--color-ash); }

/* ===== Game Page Layout ===== */
.game-container {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4);
  overflow-x: hidden;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  font-family: inherit;
}
.btn:active { transform: scale(.96); }

.btn-primary {
  background: var(--color-coral);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: #e08aa1;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-ink);
  border: 2px solid var(--color-mist);
}
.btn-secondary:hover { border-color: var(--color-coral); }

.btn-ghost {
  background: transparent;
  color: var(--color-stone);
}
.btn-ghost:hover { background: var(--color-cream); }

.btn-small { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn-large { padding: var(--space-3) var(--space-8); font-size: var(--text-lg); border-radius: var(--radius-xl); }

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.btn-bounce { animation: bounce .4s ease; }

/* ===== Form Elements ===== */
input[type="text"], input[type="number"], input[type="password"], input[type="date"], select {
  background: var(--color-white);
  color: var(--color-ink);
  border: 2px solid var(--color-mist);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-md);
  font-family: inherit;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  max-width: 100%;
  min-width: 0;
}
input:focus, select:focus {
  border-color: var(--color-sky);
  box-shadow: 0 0 0 3px rgba(165, 201, 232, .2);
}

/* ===== Slot Machine ===== */
.slot-area {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
  margin: var(--space-6) 0;
}
.slot-box {
  width: 140px;
  height: 140px;
  background: var(--color-white);
  border: 2px solid var(--color-mist);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: var(--font-black);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-md);
}
.slot-box .slot-label {
  position: absolute;
  top: var(--space-1);
  left: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-stone);
  font-weight: var(--font-normal);
}
.slot-box .slot-value {
  transition: transform .05s;
}
.slot-box.spinning .slot-value {
  animation: slotSlide .1s ease-in-out infinite;
}
@keyframes slotSlide {
  0% { transform: translateY(-100%); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* ===== Player & Score ===== */
.player-setup {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-md);
}
.player-setup h3 { margin-bottom: var(--space-2); }
.player-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.player-tag {
  background: var(--color-cream);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-bold);
}
.player-tag .remove {
  cursor: pointer;
  color: var(--color-coral);
  font-weight: var(--font-black);
}

.scoreboard {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-md);
}
.scoreboard h3 { margin-bottom: var(--space-2); }
.score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-mist);
}
.score-row:last-child { border-bottom: none; }
.score-row .name { font-weight: var(--font-bold); }
.score-row .pts { color: var(--color-coral); font-weight: var(--font-bold); }

/* ===== Answer Log ===== */
.answer-log {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-md);
}
.answer-log h3 { margin-bottom: var(--space-2); }
.log-entry {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-mist);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-base);
  flex-wrap: wrap;
}
.log-entry:last-child { border-bottom: none; }
.log-entry .valid { color: var(--color-mint); }
.log-entry .invalid { color: var(--color-coral); }
.log-entry .reason { font-size: var(--text-sm); color: var(--color-stone); }

/* ===== Global Mobile Helpers ===== */
.input-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.input-row input { flex: 1; min-width: 0; }
.input-row .btn { flex-shrink: 0; }

/* ===== Particles ===== */
@keyframes particle-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { opacity: 0; }
}
.particle-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}
.particle {
  position: absolute;
  font-size: 1.5rem;
  animation: particle-fly .8s ease-out forwards;
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  z-index: 2000;
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .slot-area { gap: var(--space-2); }
  .slot-box { width: 100px; height: 100px; font-size: 2rem; }
  .game-grid { grid-template-columns: 1fr; padding: 0 var(--space-3); }
  .game-container { padding: var(--space-3); }
  .site-header { padding: var(--space-3) var(--space-3); }
  .site-header h1 { font-size: var(--text-lg); }
  .btn-large { padding: var(--space-2) var(--space-5); font-size: var(--text-md); }
  .player-setup, .scoreboard, .answer-log { padding: var(--space-3); }
  .score-row { font-size: var(--text-base); }
}

/* ===== Coming Soon Overlay ===== */
.game-card.coming-soon { opacity: .55; pointer-events: none; }
.game-card.coming-soon .card-icon { filter: grayscale(.4); }

/* ===== Utility: Theme Color Tint Backgrounds ===== */
.bg-coral-tint { background: rgba(242, 156, 178, .1); }
.bg-mint-tint { background: rgba(181, 221, 201, .1); }
.bg-sky-tint { background: rgba(165, 201, 232, .1); }
.bg-honey-tint { background: rgba(251, 233, 160, .1); }
.bg-sakura-tint { background: rgba(251, 212, 220, .1); }
.bg-lavender-tint { background: rgba(197, 184, 224, .1); }

/* ===== Score Mascot (peeking from scoreboard top-right) ===== */
.score-section { position: relative; }
.score-section .score-mascot {
  position: absolute !important;
  top: -14px !important;
  right: 10px !important;
  left: auto !important;
  width: 56px !important;
  margin: 0 !important;
  pointer-events: none;
  z-index: 2;
}

/* ===== Help modal cheer message (under modal mascot) ===== */
.modal-box .cheer-msg {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #5A3A3A;
  margin: 0 auto .8rem;
  padding: 0;
}