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

:root {
   --bg-deep: #0a0a1a;
   --bg-mid: #12122a;
   --purple-deep: #2a1450;
   --purple-mid: #6a30a0;
   --purple-light: #b070e0;
   --orange-magma: #ff6a30;
   --orange-hot: #ff9a50;
   --gold: #f0c040;
   --gold-dim: #c09030;
   --ember-glow: rgba(255, 106, 48, 0.5);
   --text-primary: #e0d8c8;
   --text-dim: rgba(224, 216, 200, 0.45);
   --text-bright: #f5f0e8;
}

html {
   min-height: 100vh;
}

body {
   background: var(--bg-deep);
   color: var(--text-primary);
   font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   position: relative;
   background-image:
    radial-gradient(ellipse at 30% 40%, rgba(106, 48, 160, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(255, 106, 48, 0.06) 0%, transparent 50%);
}

/* ===== STARS BACKGROUND ===== */
#stars {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 0;
}

.star {
   position: absolute;
   border-radius: 50%;
   background: var(--text-primary);
   animation: twinkle var(--dur, 3s) var(--delay, 0s) ease-in-out infinite;
   opacity: 0.15;
}

@keyframes twinkle {
   0%, 100% { opacity: 0.08; transform: scale(1); }
   50% { opacity: 0.6; transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
   .star { animation: none; opacity: 0.2; }
}

/* ===== HEADER ===== */
header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   text-align: center;
   padding: 1.5rem;
   z-index: 10;
   pointer-events: none;
}

header h1 {
   font-size: clamp(1.3rem, 4vw, 1.8rem);
   font-weight: 800;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   background: linear-gradient(135deg, var(--purple-light), var(--orange-magma), var(--gold));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

header p {
   font-size: 0.75rem;
   color: var(--text-dim);
   margin-top: 0.25rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

/* ===== MUTE BUTTON ===== */
.mute-btn {
   position: fixed;
   top: 1rem;
   right: 1rem;
   z-index: 20;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   color: var(--text-primary);
   width: 44px;
   height: 44px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   transition: background 0.2s, opacity 0.2s;
}

.mute-btn:hover {
   background: rgba(255, 255, 255, 0.12);
}

.mute-btn:focus-visible {
   outline: 2px solid var(--purple-light);
   outline-offset: 2px;
}

.mute-btn[aria-pressed="true"] {
   opacity: 0.4;
}

/* ===== MAIN STAGE ===== */
.stage {
   position: relative;
   z-index: 5;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
}

/* ===== DRAGON AREA ===== */
.dragon-area {
   position: relative;
   width: clamp(200px, 50vw, 320px);
   height: clamp(240px, 60vw, 380px);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}

.dragon-area:focus-visible {
   outline: 2px solid var(--purple-light);
   outline-offset: 4px;
   border-radius: 20px;
}

/* ===== DRAGON SVG ===== */
.dragon-svg {
   width: 90%;
   height: 90%;
   transition: filter 0.4s, transform 0.3s;
}

.dragon-body {
    fill: var(--purple-deep);
   transition: fill 0.4s, filter 0.4s;
}

.dragon-head {
   fill: var(--purple-deep);
   transition: fill 0.4s;
}

.horn-horn {
   fill: var(--purple-mid);
   stroke: none;
}

.dragon-mouth {
   opacity: 0;
   transition: opacity 0.3s;
}

.wing-left, .wing-right {
   fill: var(--purple-mid);
   opacity: 0.7;
   transition: transform 0.3s, opacity 0.3s;
   transform-origin: center;
}

.dragon-tail {
   fill: none;
   stroke: var(--purple-mid);
   stroke-width: 3;
   stroke-linecap: round;
}

.belly-glow {
    fill: var(--ember-glow);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    filter: blur(8px);
    transform-origin: 200px 230px;
    transform: scale(1);
}

/* ===== IDLE ANIMATION ===== */
.dragon-svg {
   animation: dragonIdle 3s ease-in-out infinite;
}

@keyframes dragonIdle {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-6px); }
}

.wing-left {
   animation: wingFlapL 4s ease-in-out infinite;
   transform-origin: 140px 190px;
}

.wing-right {
   animation: wingFlapR 4s ease-in-out infinite;
   transform-origin: 260px 190px;
}

@keyframes wingFlapL {
   0%, 100% { transform: rotate(0deg); }
   50% { transform: rotate(-8deg); }
}

@keyframes wingFlapR {
   0%, 100% { transform: rotate(0deg); }
   50% { transform: rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
   .dragon-svg { animation: none; transform: none; }
   .wing-left, .wing-right { animation: none; }
}

/* ===== CHARGING STATE ===== */
.dragon-area.charging .dragon-body,
.dragon-area.charging .dragon-head {
   fill: var(--purple-mid);
   filter: drop-shadow(0 0 18px var(--ember-glow));
   animation: none;
}

.dragon-area.charging .dragon-svg {
   animation: dragonCharge 0.6s ease-in-out infinite alternate;
}

@keyframes dragonCharge {
   0% { transform: translateY(-3px) scale(1); }
   100% { transform: translateY(-8px) scale(1.03); }
}

.dragon-area.charging .belly-glow {
   opacity: 1;
   animation: bellyPulse 0.5s ease-in-out infinite alternate;
}

@keyframes bellyPulse {
    0% { opacity: 0.4; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1.2); }
}

.dragon-area.charging .dragon-mouth {
   opacity: 1;
}

.dragon-area.charging .wing-left {
   animation: wingChargeL 0.4s ease-in-out infinite alternate;
}

.dragon-area.charging .wing-right {
   animation: wingChargeR 0.4s ease-in-out infinite alternate;
}

@keyframes wingChargeL {
   0% { transform: rotate(-5deg); }
   100% { transform: rotate(-15deg); }
}

@keyframes wingChargeR {
   0% { transform: rotate(5deg); }
   100% { transform: rotate(15deg); }
}

@media (prefers-reduced-motion: reduce) {
   .dragon-area.charging .dragon-svg { animation: none; transform: scale(1.03); }
   .dragon-area.charging .belly-glow { animation: none; opacity: 1; }
   .dragon-area.charging .wing-left,
   .dragon-area.charging .wing-right { animation: none; }
}

/* ===== BREATHING STATE ===== */
.dragon-area.breathing .dragon-body,
.dragon-area.breathing .dragon-head {
   fill: var(--orange-magma);
   filter: drop-shadow(0 0 25px rgba(255, 106, 48, 0.7));
   animation: dragonRecoil 0.3s ease-out;
}

@keyframes dragonRecoil {
   0% { transform: scale(1.05); }
   30% { transform: scale(0.96) translateY(4px); }
   100% { transform: scale(1) translateY(0); }
}

.dragon-area.breathing .belly-glow {
   opacity: 1;
   fill: var(--orange-hot);
}

.dragon-area.breathing .dragon-mouth {
   opacity: 1;
}

/* ===== COOLDOWN STATE ===== */
.dragon-area.cooldown .dragon-body,
.dragon-area.cooldown .dragon-head {
   fill: var(--purple-deep);
   opacity: 0.6;
   transition: opacity 0.5s, fill 0.5s;
}

.dragon-area.cooldown .dragon-svg {
   animation: none;
}

.dragon-area.cooldown .wing-left,
.dragon-area.cooldown .wing-right {
   animation: wingTired 1.2s ease-in-out infinite alternate;
}

@keyframes wingTired {
   0% { transform: rotate(-2deg); }
   100% { transform: rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
   .dragon-area.cooldown .wing-left,
   .dragon-area.cooldown .wing-right { animation: none; }
}

/* ===== PARTICLE CANVAS ===== */
#particleCanvas {
   position: absolute;
   inset: -60%;
   width: 220%;
   height: 220%;
   pointer-events: none;
   z-index: 15;
}

/* ===== CHARGE METER ===== */
.charge-meter {
   width: clamp(120px, 30vw, 200px);
   height: 6px;
   background: rgba(255, 255, 255, 0.06);
   border-radius: 3px;
   overflow: hidden;
   margin-top: 1rem;
   opacity: 0;
   transition: opacity 0.3s;
}

.dragon-area.charging ~ .charge-meter,
.charge-meter.visible {
   opacity: 1;
}

.charge-fill {
   height: 100%;
   width: 0%;
   background: linear-gradient(90deg, var(--purple-mid), var(--orange-magma), var(--gold));
   border-radius: 3px;
   transition: width 0.05s linear;
}

/* ===== STATUS TEXT ===== */
.status-text {
   font-size: 0.85rem;
   color: var(--text-dim);
   text-align: center;
   min-height: 1.5em;
   letter-spacing: 0.04em;
   margin-top: 0.75rem;
   transition: color 0.3s, opacity 0.3s;
}

.status-text.glow {
   color: var(--gold);
   opacity: 1;
}

.status-text.cooldown-text {
   color: var(--purple-light);
}

/* ===== FOOTER ===== */
footer {
   position: fixed;
   bottom: 0.75rem;
   font-size: 0.6rem;
   opacity: 0.2;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
   header { padding: 1rem; }
   header h1 { font-size: clamp(1rem, 5vw, 1.3rem); }

   .dragon-area {
    width: 180px !important;
    height: 220px !important;
   }

   .charge-meter { width: 100px; }
   .status-text { font-size: 0.75rem; }
}

@media (min-width: 1200px) {
   .dragon-area {
    width: 380px;
    height: 450px;
   }
}

/* ===== HIGHLIGHT GLOW (during full charge) ===== */
.dragon-area.charging .dragon-svg.full-charge {
   filter: drop-shadow(0 0 30px var(--orange-magma)) drop-shadow(0 0 60px rgba(240, 192, 64, 0.4));
}