/* ─── Design System ──────────────────────────────────────────────────────────── */
:root {
  --bg:          #070711;
  --surface:     rgba(255,255,255,0.04);
  --surface-2:   rgba(255,255,255,0.08);
  --border:      rgba(255,255,255,0.09);
  --text:        #f0f0ff;
  --text-muted:  #8b8ba7;
  --text-dim:    #55556a;
  --primary:     #6366f1;
  --primary-rgb: 99,102,241;
  --card-radius: 20px;
  --radius:      12px;
  --radius-sm:   8px;
  --trans:       0.2s ease;
  --header-h:    60px;
  --max-w:       1100px;
  --font-head:   'Space Grotesk','Inter',system-ui,sans-serif;
  --font-body:   'Inter',system-ui,-apple-system,sans-serif;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.35);
  --shadow-md:   0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.55);
}

body.light {
  --bg:         #f0f0ff;
  --surface:    #ffffff;
  --surface-2:  #f4f4ff;
  --border:     rgba(0,0,0,.09);
  --text:       #1a1a3e;
  --text-muted: #6b6b8a;
  --text-dim:   #9090b0;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.13);
}

/* ─── Reset & Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(99,102,241,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(236,72,153,.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body.light::before {
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(99,102,241,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(236,72,153,.05) 0%, transparent 60%);
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Header ─────────────────────────────────────────────────────────────────── */
#app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(7,7,17,.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background-color .3s ease;
}
body.light #app-header { background: rgba(240,240,255,.88); }

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem;
  border-radius: var(--radius-sm);
  transition: opacity var(--trans);
}
.brand-btn:hover { opacity: .82; }

.brand-icon { font-size: 1.55rem; line-height: 1; }
.brand-text  { display:flex; flex-direction:column; text-align:left; }
.brand-name  { font-family:var(--font-head); font-size:1.05rem; font-weight:700; color:var(--text); line-height:1.1; }
.brand-by    { font-size:.68rem; color:var(--text-muted); font-weight:500; line-height:1.2; }

.header-actions { display:flex; align-items:center; gap:.5rem; }

.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--trans), transform .1s;
  touch-action: manipulation;
}
.icon-btn:hover  { background: var(--surface-2); transform: scale(1.06); }
.icon-btn:active { transform: scale(.94); }

/* ─── Views ──────────────────────────────────────────────────────────────────── */
#views { flex: 1; }

.view { display: none; animation: fadeSlideIn .32s ease; }
.view.active { display: block; }

@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── Hero ───────────────────────────────────────────────────────────────────── */
.hero {
  min-height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem 2rem;
  position: relative;
  overflow: hidden;
}

.hero-content { text-align:center; position:relative; z-index:2; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(var(--primary-rgb),.15);
  border: 1px solid rgba(var(--primary-rgb),.3);
  color: var(--primary);
  padding: .3rem .9rem;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .5px;
  margin-bottom: 1rem;
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.5rem,8vw,4.5rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 .75rem;
}

.gradient-text {
  background: linear-gradient(135deg,#6366f1,#a855f7,#ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub { font-size:1.05rem; color:var(--text-muted); margin:0; }

.hero-art  { position:absolute; inset:0; pointer-events:none; z-index:1; }
.floating-emoji {
  position: absolute;
  font-size: 2.4rem;
  opacity: .11;
  animation: float 6s ease-in-out infinite;
}
.e1 { top:15%; left:7%;  animation-delay:0s;   }
.e2 { top:22%; right:9%; animation-delay:1s;   }
.e3 { top:60%; left:4%;  animation-delay:2s;   font-size:2rem; }
.e4 { bottom:14%; right:7%; animation-delay:1.5s; }
.e5 { top:44%; right:18%; animation-delay:.5s; font-size:2rem; }

@keyframes float {
  0%,100% { transform:translateY(0) rotate(-5deg); }
  50%      { transform:translateY(-16px) rotate(5deg); }
}

/* ─── Games Section ──────────────────────────────────────────────────────────── */
.games-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

.section-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 1.35rem;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  gap: 1.15rem;
}

/* ─── Game Card ──────────────────────────────────────────────────────────────── */
.game-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 1.65rem;
  cursor: pointer;
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.game-card:hover,.game-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(var(--primary-rgb),.35);
  box-shadow: 0 16px 40px var(--shadow-sm), 0 0 0 1px rgba(var(--primary-rgb),.12);
  outline: none;
}
.game-card:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.card-glow {
  position: absolute;
  top: -40%; right: -20%;
  width: 200px; height: 200px;
  background: radial-gradient(circle,var(--glow) 0%,transparent 70%);
  opacity: .12;
  border-radius: 50%;
  transition: opacity var(--trans), transform var(--trans);
  pointer-events: none;
}
.game-card:hover .card-glow { opacity:.24; transform:scale(1.12); }

.card-icon {
  font-size: 2.3rem;
  line-height: 1;
  margin-bottom: .15rem;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.game-card:hover .card-icon { transform:scale(1.18) rotate(-6deg); }

.card-title { font-family:var(--font-head); font-size:1.15rem; font-weight:700; margin:0; color:var(--text); }
.card-desc  { font-size:.86rem; color:var(--text-muted); line-height:1.5; margin:0; flex:1; }

.card-tags  { display:flex; flex-wrap:wrap; gap:.32rem; margin:.2rem 0; }
.tag {
  font-size: .7rem;
  font-weight: 600;
  padding: .18rem .5rem;
  border-radius: 50px;
  background: rgba(var(--primary-rgb),.1);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb),.2);
  letter-spacing: .3px;
}

.play-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .65rem 1rem;
  background: rgba(var(--primary-rgb),.1);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb),.25);
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--trans), transform .1s;
  margin-top: .2rem;
  font-family: var(--font-body);
  touch-action: manipulation;
  min-height: 44px;
}
.play-btn:hover   { background:rgba(var(--primary-rgb),.2); }
.play-btn:active  { transform:scale(.98); }
.play-arrow       { transition:transform var(--trans); }
.game-card:hover .play-arrow { transform:translateX(5px); }

/* ─── Game View ──────────────────────────────────────────────────────────────── */
.game-view {
  max-width: 540px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 5rem;
}

.gv-header {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}

.back-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: .5rem .85rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
  font-family: var(--font-body);
  min-height: 40px;
  touch-action: manipulation;
}
.back-btn:hover {
  background: rgba(var(--primary-rgb),.1);
  color: var(--primary);
  border-color: rgba(var(--primary-rgb),.3);
}

.gv-title-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 1;
  min-width: 0;
}
.gv-title-row h2 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gv-title-row span { font-size:1.25rem; flex-shrink:0; }

.score-pill {
  background: rgba(var(--accent-rgb,var(--primary-rgb)),.12);
  color: var(--accent,var(--primary));
  border: 1px solid rgba(var(--accent-rgb,var(--primary-rgb)),.25);
  padding: .32rem .85rem;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  margin-left: auto;
}

.gv-body { display:flex; flex-direction:column; gap:.85rem; }

/* ─── Form Controls ──────────────────────────────────────────────────────────── */
.game-select, .game-input {
  display: block;
  width: 100%;
  padding: .82rem 1rem;
  font-size: 1rem;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--trans), box-shadow var(--trans);
  outline: none;
  -moz-appearance: textfield;
}
.game-select:focus, .game-input:focus {
  border-color: var(--accent,var(--primary));
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb,var(--primary-rgb)),.2);
}
.game-input::-webkit-inner-spin-button,
.game-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary {
  padding: .82rem 1.35rem;
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--trans), transform .1s;
  min-height: 48px;
  touch-action: manipulation;
}

.btn-primary {
  background: linear-gradient(135deg,var(--accent,var(--primary)),color-mix(in srgb,var(--accent,var(--primary)) 75%,#fff 25%));
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb,var(--primary-rgb)),.35);
}
.btn-primary:hover:not(:disabled)  { transform:translateY(-1px); box-shadow:0 6px 20px rgba(var(--accent-rgb,var(--primary-rgb)),.45); }
.btn-primary:active:not(:disabled) { transform:scale(.98) translateY(0); }
.btn-primary:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }

.btn-secondary {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--accent,var(--primary));
  color: var(--accent,var(--primary));
  background: rgba(var(--accent-rgb,var(--primary-rgb)),.08);
}
.btn-secondary:active { transform:scale(.98); }

.btn-row { display:flex; gap:.55rem; }
.btn-row .btn-primary   { flex:2; }
.btn-row .btn-secondary { flex:1; }

.ghost-row {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: center;
}

.ghost-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: .45rem .85rem;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--trans);
  min-height: 40px;
  touch-action: manipulation;
}
.ghost-btn:hover { background:var(--surface-2); color:var(--text); }

.mt { margin-top: .5rem; }

/* ─── Feedback ───────────────────────────────────────────────────────────────── */
.range-hint {
  font-size: .88rem;
  color: var(--text-muted);
  text-align: center;
  padding: .6rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0;
}

.feedback {
  font-size: 1.03rem;
  font-weight: 600;
  text-align: center;
  min-height: 1.5rem;
  padding: .5rem;
  border-radius: var(--radius-sm);
  transition: all var(--trans);
}
.feedback:empty { padding:0; min-height:0; }

.feedback.win      { color:#22c55e; background:rgba(34,197,94,.1); }
.feedback.too-low  { color:#3b82f6; background:rgba(59,130,246,.1); }
.feedback.too-high { color:#f97316; background:rgba(249,115,22,.1); }
.feedback.error    { color:#ef4444; background:rgba(239,68,68,.1); }

.hint-msg {
  font-size: .88rem;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.2rem;
}

/* ─── Stats Box ──────────────────────────────────────────────────────────────── */
.stats-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  font-size: .86rem;
  color: var(--text-muted);
  line-height: 1.75;
}
.stats-box:empty { display:none; }

/* ─── History ────────────────────────────────────────────────────────────────── */
.history-details { font-size:.85rem; }
.history-details summary {
  cursor: pointer;
  color: var(--accent,var(--primary));
  font-weight: 600;
  padding: .3rem 0;
  user-select: none;
}
.history-list { margin-top:.5rem; max-height:140px; overflow-y:auto; }
.history-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .32rem 0;
  border-bottom: 1px solid var(--border);
  gap: .5rem;
  flex-wrap: wrap;
}
.history-entry:last-child { border-bottom:none; }

/* ─── Confetti ───────────────────────────────────────────────────────────────── */
.win-celebration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
}
.confetti-piece {
  position: absolute;
  top: -10px;
  animation: confetti-fall linear forwards;
  border-radius: 2px;
}
@keyframes confetti-fall {
  0%   { transform:translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateY(100vh) rotate(720deg); opacity:0; }
}

/* ─── Toast ──────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: .65rem 1.5rem;
  border-radius: 50px;
  font-size: .88rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  transition: transform .3s ease, opacity .3s ease;
  opacity: 0;
  z-index: 1000;
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
  pointer-events: none;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ─── Rock Paper Scissors ────────────────────────────────────────────────────── */
.rps-arena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--surface);
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
}
.rps-side { display:flex; flex-direction:column; align-items:center; gap:.45rem; }

.rps-emoji {
  font-size: 3.4rem;
  width: 88px; height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: 50%;
  border: 2px solid var(--border);
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.rps-emoji.bounce { animation:emojiBounce .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes emojiBounce {
  0%  { transform:scale(1); }
  50% { transform:scale(1.3); }
  100%{ transform:scale(1); }
}
.rps-label { font-size:.78rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.rps-vs    { font-family:var(--font-head); font-size:1.45rem; font-weight:800; color:var(--text-dim); }

.rps-result {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  min-height: 1.5rem;
  padding: .45rem;
  border-radius: var(--radius-sm);
}
.rps-result.win  { color:#22c55e; background:rgba(34,197,94,.1); }
.rps-result.lose { color:#ef4444; background:rgba(239,68,68,.1); }
.rps-result.draw { color:#f59e0b; background:rgba(245,158,11,.1); }

.rps-choices { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.rps-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .95rem 1.15rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--card-radius);
  font-size: 1.95rem;
  cursor: pointer;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  min-width: 78px;
  font-family: var(--font-body);
  touch-action: manipulation;
}
.rps-btn span { font-size:.72rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.rps-btn:hover {
  border-color: var(--accent,var(--primary));
  transform: translateY(-5px) scale(1.06);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb,var(--primary-rgb)),.22);
}
.rps-btn:active { transform:scale(.94); }

/* ─── Tic-Tac-Toe ────────────────────────────────────────────────────────────── */
.mode-switcher {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .22rem;
  gap: .22rem;
}
.mode-btn {
  flex: 1;
  padding: .58rem 1rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--trans);
  font-family: var(--font-body);
}
.mode-btn.active { background:var(--accent,var(--primary)); color:#fff; }

.ttt-status {
  text-align: center;
  font-size: .98rem;
  font-weight: 600;
  color: var(--text-muted);
  min-height: 1.5rem;
}

.ttt-board {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .6rem;
  max-width: 300px;
  margin: 0 auto;
}
.ttt-cell {
  aspect-ratio: 1;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 2.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--trans);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  touch-action: manipulation;
}
.ttt-cell:hover:not(.taken) { background:var(--surface-2); border-color:var(--accent,var(--primary)); transform:scale(1.04); }
.ttt-cell.x { color:#3b82f6; }
.ttt-cell.o { color:#ef4444; }
.ttt-cell.winning {
  background: rgba(var(--accent-rgb,var(--primary-rgb)),.15);
  border-color: var(--accent,var(--primary));
  animation: winPulse .4s ease;
}
@keyframes winPulse {
  0%  { transform:scale(1); }
  50% { transform:scale(1.09); }
  100%{ transform:scale(1); }
}
.ttt-cell.taken { cursor:default; }

/* ─── Memory Match ───────────────────────────────────────────────────────────── */
.mem-bar {
  display: flex;
  justify-content: space-between;
  padding: .65rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--text-muted);
}
.mem-bar strong { color:var(--text); }

.mem-board {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: .55rem;
}
.mem-card { aspect-ratio:1; cursor:pointer; perspective:600px; touch-action:manipulation; }
.mem-card-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.4,0,.2,1);
  border-radius: var(--radius);
}
.mem-card.flipped .mem-card-inner,
.mem-card.matched .mem-card-inner { transform:rotateY(180deg); }

.mem-card-front, .mem-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  border: 2px solid var(--border);
}
.mem-card-front {
  background: var(--surface);
  color: var(--text-dim);
  font-size: 1.2rem;
  font-weight: 700;
  transition: border-color var(--trans);
}
.mem-card-front:hover { border-color:var(--accent,var(--primary)); }
.mem-card-back {
  background: var(--surface-2);
  border-color: var(--accent,var(--primary));
  transform: rotateY(180deg);
}
.mem-card.matched .mem-card-back {
  background: rgba(var(--accent-rgb,var(--primary-rgb)),.15);
  animation: matchPulse .4s ease;
}
@keyframes matchPulse {
  0%  { transform:rotateY(180deg) scale(1); }
  50% { transform:rotateY(180deg) scale(1.07); }
  100%{ transform:rotateY(180deg) scale(1); }
}

/* ─── Simon Says ─────────────────────────────────────────────────────────────── */
.simon-info { text-align:center; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.simon-level-badge {
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 700;
  padding: .32rem 1rem;
  border-radius: 50px;
  background: rgba(var(--accent-rgb,var(--primary-rgb)),.12);
  color: var(--accent,var(--primary));
  border: 1px solid rgba(var(--accent-rgb,var(--primary-rgb)),.25);
}
.simon-status { font-size:.98rem; color:var(--text-muted); margin:0; min-height:1.5rem; font-weight:500; }

.simon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  max-width: 300px;
  margin: 0 auto;
}
.simon-btn {
  aspect-ratio: 1;
  border: none;
  border-radius: var(--card-radius);
  cursor: pointer;
  transition: all .15s ease;
  opacity: .55;
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
}
.simon-btn:nth-child(1) { background:#ef4444; }
.simon-btn:nth-child(2) { background:#3b82f6; }
.simon-btn:nth-child(3) { background:#22c55e; }
.simon-btn:nth-child(4) { background:#eab308; }

.simon-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.35);
  opacity: 0;
  transition: opacity .1s;
}
.simon-btn.active       { opacity:1; transform:scale(.94); }
.simon-btn.active::after{ opacity:1; }
.simon-btn:hover:not(:disabled) { opacity:.78; transform:scale(1.03); }
.simon-btn:disabled { cursor:not-allowed; }

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
#app-footer {
  border-top: 1px solid var(--border);
  padding: 1.4rem 1.25rem;
  text-align: center;
  margin-top: auto;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: var(--max-w);
  margin: 0 auto;
  font-size: .84rem;
  color: var(--text-muted);
}
.footer-credit strong { color:var(--text); }

/* ─── Reduced Motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

/* ─── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Layout */
  .hero             { padding:1.75rem 1rem 1.25rem; min-height:200px; }
  .hero-title       { font-size:clamp(2rem,10vw,3rem); }
  .games-section    { padding:0 .85rem 2.5rem; }
  .game-grid        { grid-template-columns:1fr; gap:.85rem; }
  .game-card        { padding:1.15rem; }

  /* Game view header — stack on very narrow screens */
  .gv-header        { gap:.5rem; }
  .gv-title-row h2  { font-size:1rem; }
  .score-pill       { font-size:.72rem; padding:.25rem .6rem; }

  /* Form controls */
  .game-select,
  .game-input       { font-size:.95rem; padding:.75rem .9rem; }
  .btn-primary,
  .btn-secondary    { font-size:.95rem; padding:.78rem 1rem; }
  .ghost-btn        { padding:.5rem .8rem; font-size:.78rem; }

  /* Tic-Tac-Toe */
  .ttt-board        { gap:.45rem; max-width:290px; }
  .ttt-cell         { font-size:1.9rem; }

  /* Memory */
  .mem-board        { gap:.4rem; }
  .mem-bar          { font-size:.78rem; padding:.55rem .75rem; flex-wrap:wrap; gap:.35rem; }
  .mem-card-front,
  .mem-card-back    { font-size:1.4rem; }

  /* RPS */
  .rps-arena        { gap:1rem; padding:1.15rem .75rem; }
  .rps-btn          { padding:.8rem 1rem; min-width:72px; font-size:1.8rem; }
  .rps-emoji        { width:72px; height:72px; font-size:2.8rem; }
  .rps-choices      { gap:.55rem; }

  /* Simon */
  .simon-grid       { gap:.5rem; max-width:270px; }
}

@media (max-width: 420px) {
  /* Header gets very tight — allow score pill to wrap to second row */
  .gv-header        { flex-wrap:wrap; }
  .score-pill       { margin-left:0; width:100%; text-align:center; font-size:.75rem; }
  .gv-title-row     { min-width:0; }

  /* RPS extra small */
  .rps-choices      { gap:.4rem; }
  .rps-btn          { min-width:62px; padding:.65rem .75rem; font-size:1.55rem; }
  .rps-emoji        { width:60px; height:60px; font-size:2.3rem; }

  /* Memory */
  .mem-board        { gap:.3rem; }
  .mem-card-front,
  .mem-card-back    { font-size:1.15rem; }

  /* Simon */
  .simon-grid       { max-width:240px; gap:.4rem; }
}

/* ─── Safe-area insets (iPhone notch / Dynamic Island) ───────────────────────── */
@supports (padding: max(0px)) {
  #app-header    { padding-left:  max(0px, env(safe-area-inset-left));
                   padding-right: max(0px, env(safe-area-inset-right)); }
  #app-footer    { padding-bottom:max(1.4rem, calc(1.4rem + env(safe-area-inset-bottom))); }
  .game-view     { padding-left:  max(1.25rem, calc(1.25rem + env(safe-area-inset-left)));
                   padding-right: max(1.25rem, calc(1.25rem + env(safe-area-inset-right))); }
  .toast         { bottom:        max(1.5rem, calc(1.5rem + env(safe-area-inset-bottom))); }
}