:root {
  --gold:         #f5c842;
  --purple:       #7c5cbf;
  --teal:         #00c9a7;
  --hint:         #e84393;
  --red:          #e94560;
  --dark:         #07061a;
  --card-dark:    #0e0c2e;
  --glass:        rgba(255,255,255,0.06);
  --glass-bd:     rgba(255,255,255,0.11);
  --r-sm:         8px;
  --r-md:         14px;
  --r-lg:         22px;
  --font-title:   'Cinzel Decorative', serif;
  --font-ui:      'Rajdhani', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


html, body {
  height: 100%;
  overflow: hidden;        
}

body {
  font-family: var(--font-ui);
  color: #fff;
  background: var(--dark);
  background-image:
    url('background.png'),
    radial-gradient(ellipse at 15% 20%, rgba(124,92,191,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(0,201,167,.14) 0%, transparent 55%);
  background-size: cover, auto, auto;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 6px 36px;       
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background: rgba(7,6,26,.80);
  z-index: -2;
}


.particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: .5; }
  90%  { opacity: .25; }
  100% { transform: translateY(-8vh) scale(1.4); opacity: 0; }
}

.game-wrapper {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 6px;
  height: calc(100vh - 36px);
}

.game-header { line-height: 1; }

h1.title {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 3.8vw, 2.4rem);
  letter-spacing: 8px;
}
.title span {
  display: inline-block;
  animation: letterDrop .55s both, letterGlow 2.5s ease-in-out infinite alternate;
}
.title span:nth-child(1){animation-delay:0.0s,0.0s}
.title span:nth-child(2){animation-delay:0.1s,0.3s}
.title span:nth-child(3){animation-delay:0.2s,0.6s}
.title span:nth-child(4){animation-delay:0.3s,0.9s}
.title span:nth-child(5){animation-delay:0.4s,1.2s}
.title span:nth-child(6){animation-delay:0.5s,1.5s}
@keyframes letterDrop {
  0%   { transform: translateY(-50px) rotate(-12deg) scale(.7); opacity: 0; }
  65%  { transform: translateY(6px) rotate(2deg) scale(1.04); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes letterGlow {
  from { color: #ddd6ff; text-shadow: 0 0 10px rgba(124,92,191,.5); }
  to   { color: var(--gold); text-shadow: 0 0 22px rgba(245,200,66,.65); }
}

.legend {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.legend-item {
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  letter-spacing: .3px;
}
.joker-legend   { background: rgba(124,92,191,.22); border: 1px solid rgba(124,92,191,.55); }
.hint-legend    { background: rgba(232,67,147,.18);  border: 1px solid rgba(232,67,147,.55); }
.shuffle-legend { background: rgba(58,134,255,.16);  border: 1px solid rgba(58,134,255,.5);  }

.difficulty-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.diff-btn {
  padding: 5px 16px;
  border: 1px solid var(--glass-bd);
  border-radius: 50px;
  background: var(--glass);
  color: rgba(255,255,255,.8);
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(8px);
}
.diff-btn:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.diff-btn.active {
  background: linear-gradient(135deg,rgba(124,92,191,.55),rgba(74,53,128,.65));
  border-color: var(--purple);
  box-shadow: 0 0 16px rgba(124,92,191,.4);
  color: #fff;
}

.hud-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}
.stat-pill {
  font-size: .8rem;
  font-weight: 700;
  padding: 4px 10px;
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  border-radius: 50px;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.stat-pill.gold { border-color: rgba(245,200,66,.35); }

.hud-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

#reset-btn, #music-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--glass-bd);
  border-radius: 50%;
  background: var(--glass);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .15s, background .15s;
  display: flex; align-items: center; justify-content: center;
}
#reset-btn:hover { background: rgba(233,69,96,.35); transform: scale(1.1); }
#music-btn:hover { background: rgba(0,184,148,.3);  transform: scale(1.1); }
#music-btn.muted { background: rgba(80,80,80,.4); }



.special-notif {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: 9px 24px;
  border-radius: 50px;
  font-family: var(--font-ui);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 6px 28px rgba(0,0,0,.5);
  animation: notifPop .35s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
}
.special-notif.hidden { display: none; }
.special-notif.joker   { background: linear-gradient(135deg,#6c3483,#9b59b6); border: 1px solid rgba(215,189,226,.4); }
.special-notif.hint    { background: linear-gradient(135deg,#9b0e5a,#e84393); border: 1px solid rgba(255,160,220,.4); }
.special-notif.shuffle { background: linear-gradient(135deg,#1a4f8a,#2980b9); border: 1px solid rgba(174,214,241,.4); }
@keyframes notifPop {
  from { transform: translateX(-50%) scale(.65) translateY(-8px); opacity: 0; }
  to   { transform: translateX(-50%) scale(1) translateY(0);      opacity: 1; }
}

#game-board {
  display: grid;
  gap: 7px;
  justify-content: center;
  align-content: center;
  flex: 1;
  width: 100%;
  padding: 6px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-lg);
}

#game-board.easy   { grid-template-columns: repeat(4, min(76px, 18vw)); }
#game-board.medium { grid-template-columns: repeat(5, min(72px, 16vw)); }
#game-board.hard   { grid-template-columns: repeat(6, min(68px, 13.5vw)); }
.card {
  aspect-ratio: 1;
  perspective: 900px;
  cursor: pointer;
}
.card-inner {
  width: 100%; height: 100%;
  position: relative;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  transform-style: preserve-3d;
}
.card:hover:not(.matched) .card-inner { transform: scale(1.07); }
.card.flip .card-inner { transform: rotateY(180deg); }
.card.flip:hover:not(.matched) .card-inner { transform: rotateY(180deg) scale(1.07); }
.card.matched .card-inner {
  transform: rotateY(180deg);
  animation: matchPulse .4s ease;
}
@keyframes matchPulse {
  0%  { transform: rotateY(180deg) scale(1); }
  45% { transform: rotateY(180deg) scale(1.13); }
  100%{ transform: rotateY(180deg) scale(1); }
}

.card-front, .card-back {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: var(--r-sm);
  backface-visibility: hidden;
}

.card-front {
  background: linear-gradient(145deg,#1c1845,#0b0928);
  border: 1px solid rgba(124,92,191,.28);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.card-front::before {
  content: '✦';
  font-size: clamp(1rem, 3vw, 1.6rem);
  color: rgba(124,92,191,.32);
}
.card-front::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 5px;
}

.card-back {
  transform: rotateY(180deg);
  display: flex; align-items: center; justify-content: center;
  background: var(--card-dark);
  border: 1px solid rgba(255,255,255,.07);
}
.card-back img {
  width: 100%; height: 100%;
  border-radius: var(--r-sm);
  object-fit: cover;
}
.card.matched .card-back {
  border: 2px solid var(--teal);
  box-shadow: 0 0 14px rgba(0,201,167,.45);
}

.card.special .card-front { background: linear-gradient(145deg,#1c1845,#0b0928); }

.card.special.joker .card-back {
  background: radial-gradient(circle at 40% 40%,#8e44ad,#4a2070);
  border: 2px solid rgba(215,189,226,.45);
  box-shadow: 0 0 18px rgba(142,68,173,.55);
  font-size: clamp(1.4rem,4vw,2.2rem);
}
.card.special.hint .card-back {
  background: radial-gradient(circle at 40% 40%,#e84393,#7a0040);
  border: 2px solid rgba(255,160,220,.45);
  box-shadow: 0 0 18px rgba(232,67,147,.55);
  font-size: clamp(1.4rem,4vw,2.2rem);
}
.card.special.shuffle .card-back {
  background: radial-gradient(circle at 40% 40%,#2980b9,#0d3d6b);
  border: 2px solid rgba(174,214,241,.45);
  box-shadow: 0 0 18px rgba(41,128,185,.55);
  font-size: clamp(1.4rem,4vw,2.2rem);
}

.card.special-used .card-inner { animation: specialFlash .5s ease; }
@keyframes specialFlash {
  0%  { filter: brightness(1); }
  40% { filter: brightness(2.4) saturate(1.4); transform: rotateY(180deg) scale(1.12); }
  100%{ filter: brightness(1); transform: rotateY(180deg) scale(1); }
}

.win-screen {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,6,26,.88);
  backdrop-filter: blur(10px);
}
.win-screen.hidden { display: none; }

.win-card {
  background: linear-gradient(155deg,#13113a,#0a0825);
  border: 1px solid rgba(245,200,66,.4);
  border-radius: var(--r-lg);
  padding: 32px 44px;
  text-align: center;
  box-shadow: 0 28px 80px rgba(0,0,0,.8), 0 0 50px rgba(245,200,66,.1);
  animation: winPop .5s cubic-bezier(.34,1.56,.64,1);
  position: relative; overflow: hidden;
}
.win-card::before {
  content: '';
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: conic-gradient(transparent 0deg,rgba(245,200,66,.04) 60deg,transparent 120deg);
  animation: rotateSlow 8s linear infinite;
}
@keyframes rotateSlow { to { transform: rotate(360deg); } }
@keyframes winPop {
  0%  { transform: scale(.4) rotate(-5deg); opacity: 0; }
  70% { transform: scale(1.04) rotate(1deg); opacity: 1; }
  100%{ transform: scale(1) rotate(0deg); opacity: 1; }
}
.win-stars {
  font-size: 1.5rem; color: var(--gold); letter-spacing: 8px;
  text-shadow: 0 0 18px rgba(245,200,66,.55);
  animation: starPulse 1.5s ease-in-out infinite;
}
@keyframes starPulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.7; transform:scale(1.07); }
}
.win-emoji { font-size: 3rem; display:block; animation: bounce .9s ease-in-out infinite; }
@keyframes bounce {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-14px); }
}
.win-card h2 {
  font-family: var(--font-title);
  font-size: 1.5rem;
  color: var(--gold);
  margin: 8px 0 16px;
  text-shadow: 0 0 18px rgba(245,200,66,.35);
}
.win-stats {
  display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.win-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-md);
  padding: 9px 16px; min-width: 74px;
}
.win-stat span { font-size: 1.1rem; }
.win-stat small { font-size: .6rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.4); }
.win-stat strong { font-size: 1rem; font-weight: 700; }

.reset-btn-win {
  font-family: var(--font-ui);
  font-size: .9rem; font-weight: 700; letter-spacing: .8px;
  padding: 10px 28px;
  background: linear-gradient(135deg,var(--red),#a01530);
  color: #fff; border: none; border-radius: 50px; cursor: pointer;
  box-shadow: 0 5px 18px rgba(233,69,96,.45);
  transition: transform .15s, box-shadow .15s;
  position: relative;
}
.reset-btn-win:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 9px 26px rgba(233,69,96,.65); }

footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: rgba(7,6,26,.92);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: .75rem; font-weight: 600; letter-spacing: .4px;
  color: rgba(255,255,255,.4);
  text-align: center;
  height: 36px;
  backdrop-filter: blur(10px);
}
.footer-name { color: rgba(255,255,255,.65); }
footer a { color: var(--gold); text-decoration: none; }
footer a:hover { opacity: .75; }

@media (max-width: 500px) {
  h1.title { font-size: 1.35rem; letter-spacing: 5px; }
  .legend-item { font-size: .62rem; padding: 2px 7px; }
  .diff-btn { padding: 4px 11px; font-size: .75rem; }
  .stat-pill { font-size: .72rem; padding: 3px 8px; }
  #game-board.easy   { grid-template-columns: repeat(4, min(68px,20vw)); gap:5px; }
  #game-board.medium { grid-template-columns: repeat(5, min(60px,17vw)); gap:4px; }
  #game-board.hard   { grid-template-columns: repeat(6, min(52px,14vw)); gap:3px; }
  .win-card { padding: 22px 16px; }
}