/* ============================================================
   KENZOMIYA DUAL THEME
   ⚡ Pokémon (Kenzo) · 🎀 My Melody (Miya)
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Nunito:wght@400;600;700;800&family=Ma+Shan+Zheng&family=Press+Start+2P&family=Quicksand:wght@400;600;700&display=swap');

/* ── KENZO — Pokémon ─────────────────────────────────────── */
:root {
  /* Pokémon palette */
  --pk-navy:        #0f1a35;
  --pk-navy2:       #1a2744;
  --pk-navy3:       #243a6b;
  --pk-red:         #e63946;
  --pk-red2:        #ff4d5a;
  --pk-yellow:      #f8c300;
  --pk-yellow2:     #ffd84d;
  --pk-white:       #f8f9fa;
  --pk-cream:       #fff9e6;
  --pk-hp-green:    #5dbf5d;
  --pk-hp-yellow:   #f0c030;
  --pk-hp-red:      #e63946;
  --pk-exp:         #4090d8;
  --pk-font-title:  'Press Start 2P', monospace;
  --pk-font-body:   'Nunito', sans-serif;

  /* My Melody palette */
  --mm-bg:          #fff0f5;
  --mm-bg2:         #ffe4ef;
  --mm-bg3:         #ffd0e5;
  --mm-pink:        #f06292;
  --mm-pink2:       #e91e8c;
  --mm-rose:        #cc1155;
  --mm-dark:        #ad1457;
  --mm-light:       #fce4ec;
  --mm-ribbon:      #e91e8c;
  --mm-heart:       #ff4081;
  --mm-cream:       #fff8fb;
  --mm-border:      #f8bbd0;
  --mm-font-title:  'Quicksand', sans-serif;
  --mm-font-body:   'Nunito', sans-serif;
  --mm-font-cn:     'Ma Shan Zheng', serif;

  /* Shared */
  --font-cn:        'Ma Shan Zheng', serif;
}

/* ── KENZO COMPONENT STYLES ────────────────────────────────── */

/* Stars background */
.k-stars-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 40%, #1a2744 0%, #0d1525 50%, #050a14 100%);
}
.k-star {
  position: absolute; border-radius: 50%; background: white;
  animation: k-twinkle var(--d,3s) ease-in-out infinite var(--delay,0s);
}
@keyframes k-twinkle { 0%,100%{opacity:.15} 50%{opacity:.9} }

/* Pokéball decoration */
.pokeball-deco {
  width: var(--sz,80px); height: var(--sz,80px); border-radius: 50%;
  position: relative; overflow: hidden;
  border: calc(var(--sz,80px) * .06) solid #1a1a2e;
  box-shadow: 0 0 20px rgba(230,57,70,.4), 0 0 40px rgba(230,57,70,.15);
  animation: pk-float 3s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pk-float { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-8px) rotate(5deg)} }
.pokeball-top { position:absolute;top:0;left:0;right:0;height:50%;background:#e63946; }
.pokeball-bot { position:absolute;bottom:0;left:0;right:0;height:50%;background:#f8f9fa; }
.pokeball-belt { position:absolute;top:50%;left:0;right:0;height:8%;background:#1a1a2e;transform:translateY(-50%); }
.pokeball-btn {
  position:absolute;top:50%;left:50%;width:28%;height:28%;
  background:#f8f9fa;border:calc(var(--sz,80px)*.04) solid #1a1a2e;
  border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 6px rgba(255,255,255,.6);
}

/* HP / EXP bars */
.hp-bar-wrap { margin: 4px 0; }
.hp-bar-label { font-size: 10px; font-weight: 700; color: var(--pk-yellow); letter-spacing: .5px; margin-bottom: 2px; font-family: var(--pk-font-body); }
.hp-bar-track { height: 7px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.hp-bar-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }
.hp-fill-green  { background: linear-gradient(to right,#2eb82e,#5dbf5d); }
.hp-fill-yellow { background: linear-gradient(to right,#d4a000,#f0c030); }
.hp-fill-red    { background: linear-gradient(to right,#b00,#e63946); }
.hp-fill-blue   { background: linear-gradient(to right,#1a6abf,#4090d8); }

/* Type badges */
.type-badge {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 10px; text-transform: uppercase;
}
.type-fire     { background:#ff9c54; color:#5c1a00; }
.type-water    { background:#4d90d5; color:#001230; }
.type-grass    { background:#5dbe62; color:#0d2e10; }
.type-electric { background:#f3d23b; color:#3d2a00; }
.type-psychic  { background:#fa7179; color:#3d0008; }
.type-dragon   { background:#7038f8; color:#f0e8ff; }
.type-normal   { background:#a8a878; color:#1a1a0a; }

/* Kenzo nav */
.k-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 2rem; padding-top: calc(.8rem + env(safe-area-inset-top));
  background: rgba(8,13,28,.96);
  border-bottom: 2px solid var(--pk-yellow);
  box-shadow: 0 2px 20px rgba(248,195,0,.15);
}
.k-nav-logo {
  font-family: var(--pk-font-title); font-size: .65rem;
  color: var(--pk-yellow); letter-spacing: 1px; text-decoration: none;
  text-shadow: 0 0 10px rgba(248,195,0,.4);
}
.k-nav-links { display: flex; gap: 1rem; list-style: none; }
.k-nav-links a {
  color: rgba(248,249,250,.6); text-decoration: none; font-size: .8rem;
  font-weight: 700; font-family: var(--pk-font-body); transition: color .2s;
}
.k-nav-links a:hover, .k-nav-links a.active { color: var(--pk-yellow); }

/* Kenzo page body */
.k-page { background: var(--pk-navy); color: var(--pk-white); min-height: 100vh; font-family: var(--pk-font-body); overflow-x: hidden; }

/* Kenzo cards */
.k-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(248,195,0,.2);
  border-radius: 16px; padding: 1rem 1.25rem;
}
.k-card:hover { border-color: rgba(248,195,0,.5); }

/* Kenzo buttons */
.k-btn {
  background: var(--pk-yellow); color: var(--pk-navy);
  border: none; border-radius: 8px; padding: 8px 18px;
  font-size: 13px; font-weight: 800; cursor: pointer;
  font-family: var(--pk-font-body); letter-spacing: .3px;
  transition: all .15s;
  box-shadow: 0 2px 8px rgba(248,195,0,.3);
}
.k-btn:hover { background: var(--pk-yellow2); transform: translateY(-1px); }
.k-btn-red { background: var(--pk-red); color: white; box-shadow: 0 2px 8px rgba(230,57,70,.3); }
.k-btn-red:hover { background: var(--pk-red2); }

/* Kenzo section title */
.k-section-title {
  font-family: var(--pk-font-title); font-size: .55rem;
  color: var(--pk-yellow); letter-spacing: 1px;
  margin-bottom: .75rem; text-shadow: 0 0 8px rgba(248,195,0,.3);
}
/* Kenzo form inputs */
.k-input {
  width: 100%; padding: 8px 11px;
  border: 1px solid rgba(248,195,0,.2);
  border-radius: 10px; background: rgba(255,255,255,.06);
  color: var(--pk-white); font-size: 13px; font-family: var(--pk-font-body);
}
.k-input:focus { outline: none; border-color: var(--pk-yellow); }
.k-input::placeholder { color: rgba(248,249,250,.25); }
select.k-input option { background: var(--pk-navy); }

/* ── MY MELODY COMPONENT STYLES ────────────────────────────── */

/* My Melody background */
.m-bg-page {
  background: var(--mm-bg);
  min-height: 100vh; font-family: var(--mm-font-body); overflow-x: hidden;
  color: var(--mm-dark);
}
/* Floating hearts */
.m-hearts-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.m-heart-float {
  position: absolute; color: var(--mm-heart); font-size: var(--s,14px);
  opacity: 0; animation: m-rise var(--d,8s) ease-in-out infinite var(--delay,0s);
}
@keyframes m-rise {
  0%   { transform: translateY(100vh) scale(.8) rotate(-10deg); opacity: 0; }
  10%  { opacity: .35; }
  90%  { opacity: .2; }
  100% { transform: translateY(-60px) scale(1.1) rotate(10deg); opacity: 0; }
}
/* Clouds */
.m-cloud-deco {
  position: absolute; background: white; border-radius: 40px;
  opacity: .65; box-shadow: 0 2px 12px rgba(255,100,150,.08);
}

/* My Melody nav */
.m-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 2rem; padding-top: calc(.8rem + env(safe-area-inset-top));
  background: rgba(255,240,248,.97);
  border-bottom: 2px solid var(--mm-border);
  box-shadow: 0 2px 20px rgba(240,98,146,.1);
}
.m-nav-logo {
  font-family: var(--mm-font-title); font-size: 1rem; font-weight: 700;
  color: var(--mm-rose); text-decoration: none; letter-spacing: .5px;
}
.m-nav-links { display: flex; gap: 1rem; list-style: none; }
.m-nav-links a {
  color: var(--mm-pink); text-decoration: none; font-size: .82rem;
  font-weight: 700; transition: color .2s;
}
.m-nav-links a:hover, .m-nav-links a.active { color: var(--mm-rose); }

/* MM cards */
.m-card {
  background: white; border: 1.5px solid var(--mm-border);
  border-radius: 20px; padding: 1rem 1.25rem;
  box-shadow: 0 4px 20px rgba(240,98,146,.08);
}
/* MM ribbon decoration */
.m-ribbon-deco {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--mm-rose);
  letter-spacing: .3px;
}
.m-ribbon-deco::before, .m-ribbon-deco::after {
  content: '🎀'; font-size: 10px;
}
/* MM buttons */
.m-btn {
  background: var(--mm-ribbon); color: white;
  border: none; border-radius: 20px; padding: 8px 20px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: var(--mm-font-body); letter-spacing: .3px;
  transition: all .15s;
  box-shadow: 0 3px 12px rgba(233,30,140,.25);
}
.m-btn:hover { background: var(--mm-rose); transform: translateY(-1px); }
.m-btn-soft {
  background: var(--mm-light); color: var(--mm-rose);
  border: 1.5px solid var(--mm-border);
  box-shadow: none;
}
.m-btn-soft:hover { background: var(--mm-bg2); }

/* MM section title */
.m-section-title {
  font-family: var(--mm-font-title); font-size: 12px; font-weight: 700;
  color: var(--mm-rose); letter-spacing: .5px; margin-bottom: .75rem;
  display: flex; align-items: center; gap: 5px;
}
.m-section-title::after { content: '✦'; font-size: 10px; color: var(--mm-pink); }

/* MM inputs */
.m-input {
  width: 100%; padding: 8px 12px;
  border: 1.5px solid var(--mm-border);
  border-radius: 12px; background: white;
  color: var(--mm-dark); font-size: 13px; font-family: var(--mm-font-body);
}
.m-input:focus { outline: none; border-color: var(--mm-pink); box-shadow: 0 0 0 3px rgba(240,98,146,.1); }
.m-input::placeholder { color: #f0a0c0; }
select.m-input option { background: white; color: var(--mm-dark); }

/* MM stars rating */
.m-star-rating { display: flex; gap: 2px; }
.m-star { font-size: 14px; color: var(--mm-border); }
.m-star.filled { color: var(--mm-heart); }

/* MM badge */
.m-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  background: var(--mm-light); color: var(--mm-rose);
  border: 1px solid var(--mm-border);
}
/* MM points badge */
.m-pts-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700;
  background: linear-gradient(135deg,#ffd6e8,#ffb3d1);
  color: var(--mm-rose); padding: 4px 14px; border-radius: 20px;
  border: 1.5px solid var(--mm-border);
  box-shadow: 0 2px 8px rgba(240,98,146,.2);
}

/* ── SHARED CHILD SWITCHER ──────────────────────────────────── */
.dual-switcher {
  display: flex; margin-bottom: 1.25rem;
  border-radius: 16px; overflow: hidden;
  border: 2px solid transparent;
}
.dual-btn-k {
  flex: 1; padding: 12px 8px; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(248,195,0,.08); font-family: var(--pk-font-body);
  transition: background .2s; border-right: 1px solid rgba(248,195,0,.2);
}
.dual-btn-k.active { background: rgba(248,195,0,.18); }
.dual-btn-m {
  flex: 1; padding: 12px 8px; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(240,98,146,.06); font-family: var(--mm-font-body);
  transition: background .2s;
}
.dual-btn-m.active { background: rgba(240,98,146,.14); }
.dual-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.dual-av-k { background: rgba(248,195,0,.15); border: 2px solid rgba(248,195,0,.4); }
.dual-av-m { background: rgba(240,98,146,.1); border: 2px solid rgba(240,98,146,.3); }
.dual-name-k { font-size: 12px; font-weight: 700; color: var(--pk-yellow); }
.dual-name-m { font-size: 12px; font-weight: 700; color: var(--mm-rose); }
.dual-age   { font-size: 10px; color: rgba(255,255,255,.4); }
.dual-age-m { font-size: 10px; color: var(--mm-pink); }

/* ── MOBILE HAMBURGER ───────────────────────────────────────── */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  background: none; border: none; padding: 4px; z-index: 200;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px; border-radius: 2px; transition: all .25s;
}
.k-hamburger span { background: var(--pk-yellow); }
.m-hamburger span { background: var(--mm-rose); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menus */
.k-mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 150;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(8,13,28,.98); backdrop-filter: blur(12px);
}
.k-mobile-menu.open { display: flex; }
.k-mobile-menu a {
  font-family: var(--pk-font-title); font-size: .7rem;
  color: rgba(248,249,250,.6); text-decoration: none;
  padding: 1rem 2rem; width: 100%; text-align: center;
  border-bottom: 1px solid rgba(248,195,0,.1); transition: color .2s;
  letter-spacing: 1px;
}
.k-mobile-menu a:hover, .k-mobile-menu a.active { color: var(--pk-yellow); }

.m-mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 150;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,240,248,.99); backdrop-filter: blur(12px);
}
.m-mobile-menu.open { display: flex; }
.m-mobile-menu a {
  font-family: var(--mm-font-title); font-size: 1rem; font-weight: 700;
  color: var(--mm-pink); text-decoration: none;
  padding: 1rem 2rem; width: 100%; text-align: center;
  border-bottom: 1px solid var(--mm-border); transition: color .2s;
}
.m-mobile-menu a:hover, .m-mobile-menu a.active { color: var(--mm-rose); }
.menu-close-btn {
  position: absolute; top: 1.25rem; right: 1.5rem;
  background: none; border: none; font-size: 1.8rem; cursor: pointer; line-height: 1;
}
.k-menu-close { color: var(--pk-yellow); }
.m-menu-close { color: var(--mm-rose); }

/* ── PIN SCREEN THEMES ──────────────────────────────────────── */
.k-pin-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,20,.98); backdrop-filter: blur(10px); padding: 1rem;
}
.m-pin-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,235,245,.98); backdrop-filter: blur(10px); padding: 1rem;
}
.k-pin-box {
  background: rgba(255,255,255,.04); border: 1px solid rgba(248,195,0,.3);
  border-radius: 24px; padding: 2.5rem 2rem; text-align: center; max-width: 320px; width: 100%;
}
.m-pin-box {
  background: white; border: 2px solid var(--mm-border);
  border-radius: 28px; padding: 2.5rem 2rem; text-align: center; max-width: 320px; width: 100%;
  box-shadow: 0 8px 32px rgba(240,98,146,.15);
}
.k-pin-title { font-family: var(--pk-font-title); font-size: .7rem; color: var(--pk-yellow); margin-bottom: .3rem; }
.m-pin-title { font-family: var(--mm-font-title); font-size: 1.1rem; font-weight: 700; color: var(--mm-rose); margin-bottom: .3rem; }
.k-pin-sub { font-size: .78rem; color: rgba(248,249,250,.45); margin-bottom: 1.5rem; line-height: 1.5; }
.m-pin-sub { font-size: .8rem; color: var(--mm-pink); margin-bottom: 1.5rem; line-height: 1.5; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin-bottom: 1.5rem; }
.k-pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(248,195,0,.4); background: transparent; transition: all .15s; }
.k-pin-dot.filled { background: var(--pk-yellow); border-color: var(--pk-yellow); box-shadow: 0 0 8px rgba(248,195,0,.5); }
.m-pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--mm-border); background: transparent; transition: all .15s; }
.m-pin-dot.filled { background: var(--mm-ribbon); border-color: var(--mm-ribbon); box-shadow: 0 0 8px rgba(233,30,140,.3); }
.pin-keypad { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; max-width: 240px; margin: 0 auto; }
.k-pin-key {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 14px; font-size: 1.2rem; font-weight: 700;
  color: var(--pk-white); cursor: pointer; font-family: var(--pk-font-body);
  transition: all .12s;
}
.k-pin-key:hover { background: rgba(248,195,0,.15); border-color: rgba(248,195,0,.4); }
.k-pin-key:active { transform: scale(.93); }
.m-pin-key {
  background: var(--mm-light); border: 1.5px solid var(--mm-border);
  border-radius: 14px; padding: 14px; font-size: 1.2rem; font-weight: 700;
  color: var(--mm-dark); cursor: pointer; font-family: var(--mm-font-body);
  transition: all .12s;
}
.m-pin-key:hover { background: var(--mm-bg2); border-color: var(--mm-pink); }
.m-pin-key:active { transform: scale(.93); }
.k-pin-error { color: #ff7070; font-size: .75rem; margin-top: .75rem; min-height: 1.2em; }
.m-pin-error { color: var(--mm-rose); font-size: .75rem; margin-top: .75rem; min-height: 1.2em; }

/* ── MODAL THEMES ───────────────────────────────────────────── */
.k-modal-overlay, .m-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  align-items: center; justify-content: center; padding: 1rem;
}
.k-modal-overlay { background: rgba(3,6,18,.9); }
.m-modal-overlay { background: rgba(255,200,220,.6); backdrop-filter: blur(4px); }
.k-modal-overlay.open, .m-modal-overlay.open { display: flex; }
.k-modal-box {
  background: #0d1830; border: 1px solid rgba(248,195,0,.25);
  border-radius: 20px; padding: 1.75rem; max-width: 440px; width: 100%;
  max-height: 92vh; overflow-y: auto;
}
.m-modal-box {
  background: white; border: 2px solid var(--mm-border);
  border-radius: 28px; padding: 1.75rem; max-width: 440px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(240,98,146,.2);
}
.k-modal-title { font-family: var(--pk-font-title); font-size: .6rem; color: var(--pk-yellow); margin-bottom: 1.25rem; letter-spacing: 1px; }
.m-modal-title { font-family: var(--mm-font-title); font-size: 1rem; font-weight: 700; color: var(--mm-rose); margin-bottom: 1.25rem; }

/* ── SAVE INDICATOR ─────────────────────────────────────────── */
.k-save-ind {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 500;
  font-size: 11px; padding: 5px 14px; border-radius: 20px;
  background: rgba(248,195,0,.15); color: var(--pk-yellow);
  border: 1px solid rgba(248,195,0,.3); font-family: var(--pk-font-body);
  transition: opacity .3s; font-weight: 700;
}
.m-save-ind {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 500;
  font-size: 11px; padding: 5px 14px; border-radius: 20px;
  background: var(--mm-light); color: var(--mm-rose);
  border: 1.5px solid var(--mm-border); font-family: var(--mm-font-body);
  transition: opacity .3s; font-weight: 700;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  .k-nav-links, .m-nav-links, .lang-toggle { display: none !important; }
  .nav-hamburger { display: flex; }
  .k-nav, .m-nav { padding: .75rem 1rem; padding-top: calc(.75rem + env(safe-area-inset-top)); }
  .k-nav-logo { font-size: .55rem; }
  .m-nav-logo { font-size: .9rem; }
  .main { padding: 5rem 1rem 3rem !important; }
  .page-header h1 { font-size: 1.2rem !important; }
  .dual-av { width: 34px !important; height: 34px !important; font-size: 17px !important; }
  .dual-name-k, .dual-name-m { font-size: 11px; }
  .prize-grid { grid-template-columns: repeat(2,1fr) !important; }
  .gallery-grid { columns: 2 140px !important; }
  .art-grid { grid-template-columns: repeat(2,1fr) !important; }
  .stats-row { grid-template-columns: repeat(3,1fr); gap: 6px; }
  .week-table { font-size: 10px; }
  .week-table th, .week-table td { padding: 4px 2px; }
}
@media (max-width: 380px) {
  .art-grid, .gallery-grid { grid-template-columns: 1fr !important; }
}