@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600&family=DM+Sans:wght@300;400;600&display=swap');

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { overflow:hidden; font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><text y='16' font-size='16'>🌸</text></svg>") 8 8, auto; }
canvas { display:block; cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><text y='16' font-size='16'>🌸</text></svg>") 8 8, crosshair; }

/* ── PINK-ORANGE TINT OVERLAY ─────────────────────────────── */
body::after {
  content:'';
  position:fixed; inset:0; z-index:5; pointer-events:none;
  background: radial-gradient(ellipse at 60% 35%, rgba(255,160,60,0.13) 0%, rgba(255,100,150,0.10) 55%, transparent 100%);
  mix-blend-mode: multiply;
}

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  --bg:#f0b8d8;
  --nav-bg:rgba(255,190,228,0.42);
  --nav-border:rgba(255,160,210,0.18);
  --logo-color:#7a1840;
  --pill-active:rgba(255,190,220,0.38);
  --pill-border:rgba(255,130,180,0.45);
  --pill-text:#7a1840;
  --pill-idle:rgba(140,40,80,0.42);
  --panel-bg:rgba(255,220,242,0.72);
  --panel-border:rgba(255,155,200,0.5);
  --panel-shadow:rgba(170,40,90,0.14);
  --panel-h2:#380f28;
  --panel-sub:#b86088;
  --panel-desc:#6a3050;
  --panel-loc:#c8508a;
  --dot-idle:rgba(210,90,150,0.15);
  --dot-idleb:rgba(225,100,160,0.38);
  --dot-active:rgba(230,50,120,0.88);
  --dot-label:rgba(160,36,90,0.9);
  --hint-bg:rgba(255,228,242,0.88);
  --hint-border:rgba(255,155,200,0.4);
  --hint-text:rgba(150,40,90,0.78);
  --kbd-bg:rgba(240,140,190,0.2);
  --kbd-border:rgba(240,140,190,0.42);
  --kbd-text:#b03870;
  --tip-bg:rgba(255,228,242,0.94);
  --tip-border:rgba(255,155,200,0.42);
  --tip-text:#b03870;
  --player-bg:rgba(255,210,238,0.55);
  --player-border:rgba(255,168,210,0.45);
  --player-track:#3a0f28;
  --player-artist:rgba(120,40,80,0.62);
  --ctrl-color:#c0306a;
  --prog-track:rgba(220,120,170,0.25);
  --prog-fill1:#f05888;
  --prog-fill2:#d02868;
  --time-color:rgba(120,40,80,0.52);
  --pl-bg:rgba(255,232,246,0.97);
  --pl-hdr:#b03070;
  --pl-name:#3a0f28;
  --pl-artist:rgba(120,40,80,0.58);
  --pl-playing:#d02868;
  --pl-hover:rgba(255,180,220,0.18);
  --loader-bg:#fce8f0;
  --loader-text:rgba(160,50,100,0.72);
  --theme-btn-bg:rgba(255,200,228,0.22);
  --theme-btn-c:#a03060;
}

[data-theme="dark"] {
  --bg:#120810;
  --nav-bg:rgba(15,4,14,0.94);
  --nav-border:rgba(255,255,255,0.28);
  --logo-color:#ffffff;
  --pill-active:rgba(255,255,255,0.16);
  --pill-border:rgba(255,255,255,0.50);
  --pill-text:#ffffff;
  --pill-idle:rgba(255,255,255,0.78);
  --panel-bg:rgba(24,8,22,0.78);
  --panel-border:rgba(180,60,140,0.45);
  --panel-shadow:rgba(200,50,120,0.22);
  --panel-h2:#ffccee;
  --panel-sub:#cc88bb;
  --panel-desc:#bb88aa;
  --panel-loc:#ff88cc;
  --dot-idle:rgba(255,255,255,0.25);
  --dot-idleb:rgba(255,255,255,0.55);
  --dot-active:rgba(255,255,255,0.95);
  --dot-label:rgba(255,255,255,0.90);
  --hint-bg:rgba(22,6,18,0.85);
  --hint-border:rgba(200,70,150,0.35);
  --hint-text:rgba(220,130,180,0.82);
  --kbd-bg:rgba(180,50,120,0.2);
  --kbd-border:rgba(200,80,150,0.42);
  --kbd-text:#ff88cc;
  --tip-bg:rgba(22,6,18,0.94);
  --tip-border:rgba(200,70,150,0.38);
  --tip-text:#ff88cc;
  --player-bg:rgba(20,6,18,0.68);
  --player-border:rgba(180,60,140,0.45);
  --player-track:#ffccee;
  --player-artist:rgba(220,140,190,0.68);
  --ctrl-color:#ff88cc;
  --prog-track:rgba(180,60,130,0.28);
  --prog-fill1:#ff66bb;
  --prog-fill2:#cc3388;
  --time-color:rgba(200,120,170,0.58);
  --pl-bg:rgba(18,5,16,0.97);
  --pl-hdr:#ff88cc;
  --pl-name:#ffccee;
  --pl-artist:rgba(220,140,190,0.62);
  --pl-playing:#ff66bb;
  --pl-hover:rgba(180,50,120,0.18);
  --loader-bg:#2a0820;
  --loader-text:rgba(255,140,200,0.72);
  --theme-btn-bg:rgba(255,255,255,0.12);
  --theme-btn-c:#ffffff;
}

/* ── NAV — pill-shaped floating bar ──── */
#nav {
  position:fixed; top:0.8rem; left:50%; transform:translateX(-50%);
  width:calc(100% - 2rem); max-width:900px;
  z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:0.65rem 1.4rem;
  background: rgba(255,185,222,0.70);
  backdrop-filter:blur(32px) saturate(2.2);
  -webkit-backdrop-filter:blur(32px) saturate(2.2);
  border-radius:100px;
  border:1.5px solid rgba(255,160,210,0.35);
  box-shadow: 0 4px 24px rgba(220,80,150,0.12);
  pointer-events:none;
}
#nav .logo {
  font-family:'Shippori Mincho',serif; font-size:0.88rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--logo-color);
  text-decoration:none; pointer-events:auto;
}
#nav .pills { display:flex; gap:0.2rem; pointer-events:auto; }
#nav .pills a {
  padding:0.28rem 0.88rem; border-radius:100px;
  font-size:0.68rem; font-weight:600; letter-spacing:0.05em;
  text-decoration:none; color:var(--pill-idle);
  border:1.5px solid transparent; transition:all 0.22s;
}
#nav .pills a:hover,
#nav .pills a.active {
  color:var(--pill-text);
  border-color:var(--pill-border);
  background:var(--pill-active);
}
#nav .nav-right { display:flex; align-items:center; gap:0.6rem; pointer-events:auto; }
#theme-toggle {
  pointer-events:auto;
  background:var(--theme-btn-bg); border:1.5px solid var(--pill-border);
  color:var(--theme-btn-c); border-radius:100px;
  font-size:0.68rem; font-weight:600; padding:0.26rem 0.82rem;
  cursor:pointer; font-family:'DM Sans',sans-serif; transition:all 0.22s;
  letter-spacing:0.04em;
}
#theme-toggle:hover { background:var(--pill-active); }

/* ── PANEL ─────────────────────────────────────────────────── */
#panel {
  position:fixed; right:1.8rem; top:50%;
  transform:translateY(-50%) translateX(calc(100% + 2.5rem));
  z-index:50; width:282px;
  background:var(--panel-bg); backdrop-filter:blur(28px) saturate(1.8);
  border-radius:24px; padding:1.4rem;
  border:1.5px solid var(--panel-border);
  box-shadow:0 12px 40px var(--panel-shadow);
  transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
  opacity:0; pointer-events:none;
}
#panel.open { transform:translateY(-50%) translateX(0); opacity:1; pointer-events:auto; }
#panel .close-btn {
  position:absolute; top:0.8rem; right:0.8rem;
  width:24px; height:24px; border-radius:50%; border:none;
  background:rgba(255,130,180,0.2); cursor:pointer;
  font-size:11px; color:#b04068;
  display:flex; align-items:center; justify-content:center; transition:background 0.18s;
}
#panel .close-btn:hover { background:rgba(255,130,180,0.38); }
#panel .p-icon { font-size:1.4rem; display:block; margin-bottom:0.4rem; }
#panel .p-loc  { font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--panel-loc); font-weight:700; margin-bottom:0.3rem; }
#panel h2      { font-family:'Shippori Mincho',serif; font-size:1.18rem; font-weight:600; color:var(--panel-h2); line-height:1.32; margin-bottom:0.3rem; white-space:pre-line; }
#panel .p-sub  { font-size:0.7rem; color:var(--panel-sub); margin-bottom:0.7rem; font-style:italic; }
#panel .p-desc { font-size:0.82rem; line-height:1.78; color:var(--panel-desc); margin-bottom:0.8rem; white-space:pre-line; }
#panel .p-tags { display:flex; flex-wrap:wrap; gap:0.3rem; margin-bottom:0.85rem; }
#panel .p-tag  { padding:0.18rem 0.62rem; border-radius:100px; font-size:0.65rem; font-weight:600; }
#panel .p-cta  {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.5rem 1.2rem; border-radius:100px; border:none;
  background:linear-gradient(135deg,#f05888,#cc2860);
  color:#fff; font-size:0.75rem; font-weight:700; cursor:pointer;
  font-family:'DM Sans',sans-serif;
  box-shadow:0 4px 14px rgba(200,40,96,0.32); transition:transform 0.18s;
}
#panel .p-cta:hover { transform:translateY(-1px); }

/* ── SECTION DOTS ─────────────────────────────────────────── */
#dots { position:fixed; left:1.5rem; top:50%; transform:translateY(-50%); z-index:50; display:flex; flex-direction:column; gap:0.85rem; }
.dot  { display:flex; align-items:center; gap:0.55rem; cursor:pointer; }
.dot-circle { width:7px; height:7px; border-radius:50%; background:var(--dot-idle); border:1.5px solid var(--dot-idleb); transition:all 0.28s; flex-shrink:0; }
.dot.active .dot-circle { background:var(--dot-active); transform:scale(1.5); border-color:var(--dot-active); }
.dot-label { font-size:0.65rem; font-weight:600; letter-spacing:0.07em; color:transparent; transition:color 0.2s; white-space:nowrap; }
.dot:hover .dot-label, .dot.active .dot-label { color:var(--dot-label); }

/* ── HINT BAR ─────────────────────────────────────────────── */
#hint {
  position:fixed; bottom:7.5rem; left:50%; transform:translateX(-50%);
  z-index:50; display:flex; align-items:center; gap:0.7rem;
  background:var(--hint-bg); backdrop-filter:blur(20px) saturate(1.6);
  border:1.5px solid var(--hint-border); border-radius:100px;
  padding:0.45rem 1.3rem; font-size:0.7rem; color:var(--hint-text);
  letter-spacing:0.04em; font-style:italic;
  font-family:'Shippori Mincho',serif; pointer-events:none;
}
.kbd {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:3px;
  background:var(--kbd-bg); border:1.5px solid var(--kbd-border);
  font-size:9px; font-weight:700; color:var(--kbd-text);
  font-style:normal; font-family:sans-serif;
}

/* ── TOOLTIP ──────────────────────────────────────────────── */
#tooltip {
  position:fixed; z-index:49;
  background:var(--tip-bg); backdrop-filter:blur(6px);
  border:1.5px solid var(--tip-border); border-radius:100px;
  padding:0.25rem 0.8rem; font-size:0.67rem; color:var(--tip-text);
  font-style:italic; pointer-events:none; display:none;
  white-space:nowrap; transform:translate(-50%,-145%);
}

/* ── FLASH ────────────────────────────────────────────────── */
#flash { position:fixed; inset:0; z-index:200; background:#fff; opacity:0; pointer-events:none; }

/* ── LOADER ───────────────────────────────────────────────── */
#loader {
  position:fixed; inset:0; z-index:300; background:var(--loader-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
  transition:opacity 0.65s;
}
#loader-hearts { display:flex; flex-direction:column; align-items:center; gap:5px; }
.hrow { display:flex; gap:5px; }
.hslot { position:relative; width:28px; height:28px; }
.hbg, .hfill {
  position:absolute; inset:0;
  clip-path:polygon(25% 0%,50% 0%,50% 25%,75% 0%,100% 0%,100% 50%,75% 75%,50% 100%,25% 75%,0% 50%,0% 0%,25% 0%);
}
.hbg   { background:#d0789a; border:2px solid #fff; }
.hfill { background:#ff3366; border:2px solid #fff; transform:scaleX(0); transform-origin:left; transition:transform 0.18s ease-in; }
.hfill.lit { transform:scaleX(1); }
.hshine { position:absolute; top:4px; left:5px; width:5px; height:4px; background:rgba(255,220,235,0.8); }
#loader p { font-family:'Shippori Mincho',serif; font-size:0.82rem; color:var(--loader-text); letter-spacing:0.22em; transition: opacity 0.32s; }

/* ── CSS PETALS ───────────────────────────────────────────── */
#petals { position:fixed; inset:0; z-index:10; pointer-events:none; overflow:hidden; }
.petal  { position:absolute; top:-15px; border-radius:50% 0 50% 0; opacity:0; animation:pfloat linear infinite; }
@keyframes pfloat {
  0%   { opacity:0;    transform:translateY(0)     rotate(0deg)   translateX(0); }
  6%   { opacity:0.85; }
  88%  { opacity:0.6;  }
  100% { opacity:0;    transform:translateY(108vh) rotate(640deg) translateX(65px); }
}

/* ── MUSIC PLAYER ─────────────────────────────────────────── */
#player {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  z-index:60; width:min(520px,94vw);
  background:var(--player-bg); backdrop-filter:blur(36px) saturate(2.0);
  border:1px solid var(--player-border); border-bottom:none;
  border-radius:24px 24px 0 0; padding:10px 18px 12px;
  display:grid;
  grid-template-columns:44px 1fr auto auto auto;
  grid-template-rows:auto auto;
  column-gap:12px; row-gap:4px; align-items:center;
  box-shadow:0 -4px 30px rgba(200,60,120,0.1);
}
.player-art {
  grid-row:1/3; grid-column:1;
  width:44px; height:44px; border-radius:8px;
  background:linear-gradient(135deg,#ffb0cc,#f070a0);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
  box-shadow:0 2px 8px rgba(180,40,100,0.2);
}
.art-placeholder { font-size:20px; color:rgba(255,255,255,0.85); }
.player-info { grid-row:1; grid-column:2; min-width:0; }
.player-track  { font-size:0.8rem; font-weight:600; color:var(--player-track); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-artist { font-size:0.68rem; color:var(--player-artist); margin-top:1px; }
.player-controls { grid-row:1; grid-column:3; display:flex; align-items:center; gap:2px; }
.ctrl-btn {
  width:32px; height:32px; border-radius:50%; border:none;
  background:transparent; cursor:pointer; color:var(--ctrl-color);
  display:flex; align-items:center; justify-content:center;
  transition:background 0.15s, transform 0.12s;
}
.ctrl-btn:hover  { background:rgba(240,100,160,0.14); }
.ctrl-btn:active { transform:scale(0.92); }
.play-btn {
  width:38px !important; height:38px !important;
  background:linear-gradient(135deg,var(--prog-fill1),var(--prog-fill2)) !important;
  color:white !important; box-shadow:0 3px 10px rgba(200,40,90,0.35);
}
.player-vol { grid-row:1; grid-column:4; display:flex; align-items:center; gap:5px; }
.player-vol input[type=range] {
  -webkit-appearance:none; width:62px; height:3px;
  background:var(--prog-track); border-radius:2px; outline:none; cursor:pointer;
}
.player-vol input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px;
  border-radius:50%; background:var(--prog-fill2); cursor:pointer;
}
.playlist-toggle {
  grid-row:1; grid-column:5;
  width:30px; height:30px; border-radius:8px; border:none;
  background:var(--theme-btn-bg); cursor:pointer; color:var(--ctrl-color);
  display:flex; align-items:center; justify-content:center; transition:background 0.15s;
}
.playlist-toggle:hover { background:var(--pill-active); }
.player-timeline { grid-row:2; grid-column:2/6; display:flex; align-items:center; gap:8px; }
.time-cur, .time-total { font-size:0.6rem; color:var(--time-color); white-space:nowrap; min-width:26px; }
.time-total { text-align:right; }
.progress-track { flex:1; height:3px; background:var(--prog-track); border-radius:2px; position:relative; cursor:pointer; }
.progress-fill  { height:100%; background:linear-gradient(to right,var(--prog-fill1),var(--prog-fill2)); border-radius:2px; width:0%; pointer-events:none; }
.progress-thumb { position:absolute; top:50%; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%; background:var(--prog-fill2); left:0%; opacity:0; transition:opacity 0.15s; pointer-events:none; }
.progress-track:hover .progress-thumb { opacity:1; }

/* ── PLAYLIST ─────────────────────────────────────────────── */
#playlist {
  position:fixed; bottom:-100%; left:50%; transform:translateX(-50%);
  z-index:59; width:min(520px,94vw);
  background:var(--pl-bg); backdrop-filter:blur(36px) saturate(2.0);
  border:1px solid var(--player-border); border-bottom:none;
  border-radius:24px 24px 0 0;
  transition:bottom 0.42s cubic-bezier(0.34,1.3,0.64,1);
  box-shadow:0 -4px 30px rgba(200,60,120,0.12);
  max-height:52vh; display:flex; flex-direction:column; overflow:hidden;
}
#playlist.open { bottom:62px; }
.playlist-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 18px 8px; font-size:0.72rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--pl-hdr);
  border-bottom:1px solid var(--panel-border); flex-shrink:0;
}
#playlist-close {
  background:none; border:none; cursor:pointer; font-size:13px;
  color:var(--pl-hdr); width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:background 0.15s;
}
#playlist-close:hover { background:var(--pl-hover); }
.playlist-list { overflow-y:auto; flex:1; }
.playlist-list::-webkit-scrollbar { width:4px; }
.playlist-list::-webkit-scrollbar-thumb { background:rgba(220,130,180,0.38); border-radius:2px; }
.pl-item {
  display:grid; grid-template-columns:22px 36px 1fr auto;
  align-items:center; gap:10px; padding:7px 18px;
  cursor:pointer; transition:background 0.15s;
  border-bottom:1px solid var(--panel-border);
}
.pl-item:hover     { background:var(--pl-hover); }
.pl-item.playing   { background:var(--pl-hover); }
.pl-num            { font-size:0.65rem; color:var(--pl-artist); text-align:right; }
.pl-item.playing .pl-num { color:var(--pl-playing); font-weight:700; }
.pl-thumb {
  width:36px; height:36px; border-radius:6px;
  background:linear-gradient(135deg,#ffb0cc,#f070a0);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:rgba(255,255,255,0.85); overflow:hidden; flex-shrink:0;
}
.pl-info  { min-width:0; }
.pl-name  { font-size:0.78rem; font-weight:600; color:var(--pl-name); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-item.playing .pl-name { color:var(--pl-playing); }
.pl-artist-text { font-size:0.65rem; color:var(--pl-artist); margin-top:1px; }
.pl-dur   { font-size:0.65rem; color:var(--pl-artist); white-space:nowrap; }
.pl-eq    { display:none; align-items:flex-end; gap:2px; height:14px; }
.pl-item.playing .pl-eq { display:flex; }
.pl-item.playing .pl-num-val { display:none; }
.bar-anim { width:3px; border-radius:1px; background:var(--pl-playing); animation:barBounce 0.7s ease-in-out infinite; }
.bar-anim:nth-child(2) { animation-delay:0.15s; }
.bar-anim:nth-child(3) { animation-delay:0.3s; }
@keyframes barBounce { 0%,100% { height:4px; } 50% { height:12px; } }

/* ── CONTACT FORM ─────────────────────────────────────────── */
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:0.5rem; }
.cf-input {
  width:100%; padding:0.5rem 0.75rem; border-radius:10px;
  border:1.5px solid var(--panel-border);
  background:rgba(255,255,255,0.5); font-family:'DM Sans',sans-serif;
  font-size:0.75rem; color:var(--panel-h2); outline:none;
  transition:border-color 0.2s; resize:none; margin-bottom:0.5rem;
}
.cf-input:focus { border-color:var(--prog-fill1); }
.cf-input::placeholder { color:rgba(140,60,100,0.38); }
.cf-full { display:block; }
textarea.cf-input { min-height:70px; }
.cf-send { margin-top:0.2rem; width:100%; justify-content:center; }
[data-theme="dark"] .cf-input { background:rgba(40,10,35,0.5); color:var(--panel-h2); }

/* ── TOUCH D-PAD ──────────────────────────────────────────── */
#dpad {
  display:none;
  position:fixed; bottom:7.5rem; right:1.4rem; z-index:55; pointer-events:none;
}
.dpad-ring {
  width:108px; height:108px; border-radius:50%;
  background:rgba(255,200,228,0.2); backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,150,200,0.38);
  position:relative; pointer-events:auto; touch-action:none;
}
.dpad-knob {
  width:40px; height:40px; border-radius:50%;
  background:rgba(240,88,136,0.72);
  border:2px solid rgba(255,255,255,0.38);
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); pointer-events:none;
}
.dpad-arrows { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.dpad-arrows svg { opacity:0.32; }

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width:640px) {
  #nav { padding:0.55rem 1rem; top:0.5rem; width:calc(100% - 1rem); }
  #nav .pills { display:none; }
  #panel { right:0.6rem; left:0.6rem; width:auto; top:auto; bottom:6.5rem;
    transform:none; transition:opacity 0.3s; }
  #panel.open { opacity:1; transform:none; }
  #dots { display:none; }
  #player, #playlist { width:100%; border-radius:14px 14px 0 0; }
  .player-vol { display:none; }
  #hint { font-size:0.62rem; padding:0.38rem 0.9rem; bottom:8rem; }
}