/* Machete - Cuban Clicker Game Styles */
:root {
  --bg: #0f0f0f;
  --bg-card: #1a1a2e;
  --bg-card-hover: #222240;
  --text: #e4e4e7;
  --text-muted: #9ca3af;
  --primary: #f59e0b;
  --primary-dark: #d97706;
  --accent: #dc2626;
  --green: #22c55e;
  --green-dark: #16a34a;
  --blue: #3b82f6;
  --border: #2a2a4a;
  --hp-bar: #ef4444;
  --hp-bg: #3f3f46;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Screens */
.game-screen { display: none; min-height: 100vh; padding-bottom: 80px; }
.game-screen:first-of-type { display: flex; }

/* ===== LOGIN SCREEN ===== */
#screen-login {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px 20px 100px; text-align: center;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f0f 70%);
}
.login-logo { font-size: 72px; margin-bottom: 12px; }
.login-title {
  font-size: 48px; font-weight: 800; letter-spacing: -2px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 8px;
}
.login-subtitle { color: var(--text-muted); font-size: 16px; margin-bottom: 40px; }
.btn-login-google {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 32px; border-radius: var(--radius); border: none;
  background: #fff; color: #333; font-size: 16px; font-weight: 600;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.btn-login-google:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,158,11,.3); }
.btn-login-google svg { width: 20px; height: 20px; }
.btn-guest-login {
  margin-top: 16px; padding: 12px 24px; border-radius: var(--radius);
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  font-size: 14px; cursor: pointer; transition: border-color .2s;
}
.btn-guest-login:hover { border-color: var(--primary); color: var(--text); }

/* ===== MAIN HUB ===== */
.hub-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15,15,15,.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
}
.hub-pesos { font-size: 24px; font-weight: 800; color: var(--primary); }
.hub-pesos-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.hub-stats { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted); }
.hub-profile { display: flex; align-items: center; gap: 4px; cursor: pointer; flex-shrink: 0; }
.profile-avatar-circle {
  width: 36px; height: 36px; border-radius: 50%; background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--bg); overflow: hidden;
}
.profile-img { width: 100%; height: 100%; object-fit: cover; }

.hub-level { padding: 0 16px; margin-top: 8px; }
#level-display { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.xp-bar { height: 4px; background: var(--hp-bg); border-radius: 2px; overflow: hidden; }
.xp-bar-fill { height: 100%; background: var(--primary); border-radius: 2px; transition: width .3s; width: 0; }

/* ===== CANE FIELD SCENE ===== */
.cane-field {
  position: relative; width: 100%; height: 360px; cursor: pointer;
  overflow: hidden; border-radius: 0; margin: 0;
  border-bottom: 3px solid #3d2b1f;
}
.cane-field:active { transform: none; }
.cane-sky {
  position: absolute; inset: 0;
  transition: background 2s ease;
}

/* Sun */
.sky-sun {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, #fff700 0%, #ffaa00 60%, transparent 70%);
  box-shadow: 0 0 30px 10px rgba(255,200,0,.4), 0 0 60px 20px rgba(255,150,0,.15);
  z-index: 1; transition: left 2s, bottom 2s, opacity 1s;
  pointer-events: none;
}
/* Moon */
.sky-moon {
  position: absolute; width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8e8f0 0%, #c0c0d0 100%);
  box-shadow: 0 0 20px 6px rgba(200,200,255,.3), 0 0 40px 12px rgba(150,150,220,.1);
  z-index: 1; transition: left 2s, bottom 2s, opacity 1s;
  pointer-events: none;
}
.sky-moon::after {
  content: ''; position: absolute; top: 4px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.15);
}
/* Clouds */
.sky-cloud {
  position: absolute; z-index: 1; pointer-events: none; opacity: .6;
}
.sky-cloud::before, .sky-cloud::after { content: ''; position: absolute; border-radius: 50%; }
.sky-cloud::before {
  width: 50px; height: 20px; background: rgba(255,255,255,.35);
  top: 5px; left: 0; border-radius: 10px;
}
.sky-cloud::after {
  width: 30px; height: 16px; background: rgba(255,255,255,.25);
  top: 0; left: 15px; border-radius: 10px;
}
@keyframes cloud-drift {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(calc(100vw + 80px)); }
}
.sky-cloud { animation: cloud-drift var(--cloud-speed, 40s) linear infinite; }
.sky-cloud:nth-child(2) { top: 15%; animation-delay: -15s; --cloud-speed: 50s; opacity: .4; }
.sky-cloud:nth-child(3) { top: 8%; animation-delay: -30s; --cloud-speed: 35s; opacity: .5; }
/* Night clouds darker */
.cane-sky.night .sky-cloud::before { background: rgba(100,100,140,.25); }
.cane-sky.night .sky-cloud::after { background: rgba(80,80,120,.2); }

/* Stars for night */
.sky-star {
  position: absolute; width: 2px; height: 2px; background: #fff;
  border-radius: 50%; z-index: 0; pointer-events: none;
  animation: star-twinkle 2s ease-in-out infinite alternate;
}
@keyframes star-twinkle { 0% { opacity: .3; } 100% { opacity: 1; } }

/* Whip lash from click point */
.whip-lash {
  position: absolute; z-index: 15; pointer-events: none;
  width: 3px; height: 0;
  background: linear-gradient(180deg, #fbbf24, #fff, #fbbf24);
  border-radius: 2px;
  transform-origin: top center;
  animation: whip-lash-anim .25s ease-out forwards;
  box-shadow: 0 0 8px 2px rgba(251,191,36,.5);
}
@keyframes whip-lash-anim {
  0% { height: 0; opacity: 1; }
  40% { height: 120px; opacity: 1; }
  70% { height: 120px; opacity: .6; }
  100% { height: 0; opacity: 0; }
}
.whip-lash::after {
  content: ''; position: absolute; bottom: -4px; left: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.8);
  box-shadow: 0 0 10px 3px rgba(251,191,36,.6);
}
.cane-ground {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40px;
  background: linear-gradient(180deg, #3d2b1f, #2a1a0e);
  z-index: 3;
}
/* Cane stalks - detailed with segments, nodes, multiple leaves */
.cane-stalks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cane-stalk {
  position: absolute; bottom: 30px; width: 6px;
  height: 200px; transform-origin: bottom center;
  background:
    repeating-linear-gradient(180deg,
      #15803d 0px, #15803d 28px,
      #0d5c2a 28px, #0d5c2a 32px,
      #1a8a42 32px, #1a8a42 60px,
      #0d5c2a 60px, #0d5c2a 64px
    );
  border-radius: 3px 3px 0 0;
  box-shadow: 1px 0 0 rgba(0,0,0,.15);
}
/* Leaf 1 - left side, top */
.cane-stalk::before {
  content: ''; position: absolute; top: 8px; left: -12px;
  width: 22px; height: 4px;
  background: linear-gradient(90deg, transparent, #22c55e 30%, #16a34a);
  border-radius: 2px; transform: rotate(-25deg);
  box-shadow:
    0px 35px 0 #1a9a3e,
    -2px 75px 0 #22c55e,
    1px 115px 0 #16a34a,
    -1px 155px 0 #1a9a3e;
}
/* Leaf 2 - right side */
.cane-stalk::after {
  content: ''; position: absolute; top: 22px; right: -12px;
  width: 20px; height: 4px;
  background: linear-gradient(270deg, transparent, #16a34a 30%, #22c55e);
  border-radius: 2px; transform: rotate(20deg);
  box-shadow:
    0px 40px 0 #22c55e,
    2px 80px 0 #1a9a3e,
    -1px 120px 0 #16a34a;
}
@keyframes cane-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}
.cane-stalk { animation: cane-sway 3s ease-in-out infinite; }
.cane-stalk:nth-child(odd) { animation-delay: -1.5s; height: 180px; }
.cane-stalk:nth-child(even) { animation-delay: -0.8s; width: 7px; }
.cane-stalk:nth-child(3n) { height: 220px; opacity: .75; width: 5px; }
.cane-stalk:nth-child(4n) { height: 190px; animation-delay: -2.2s; }
.cane-stalk:nth-child(5n) { height: 210px; width: 8px; opacity: .6; }

/* Cane hit shake - violent shake when whipped */
@keyframes cane-hit {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(-12deg); }
  30% { transform: rotate(8deg); }
  45% { transform: rotate(-5deg); }
  60% { transform: rotate(3deg); }
  75% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}
.cane-stalk.hit { animation: cane-hit .5s ease-out !important; }

/* Cane cut and fall */
@keyframes cane-fall-left {
  0% { transform: rotate(0deg); opacity: 1; }
  100% { transform: rotate(-80deg) translateY(20px); opacity: 0; }
}
@keyframes cane-fall-right {
  0% { transform: rotate(0deg); opacity: 1; }
  100% { transform: rotate(70deg) translateY(20px); opacity: 0; }
}
.cane-stalk.cut-left { animation: cane-fall-left .6s ease-in forwards !important; }
.cane-stalk.cut-right { animation: cane-fall-right .6s ease-in forwards !important; }

/* Demons */
.demons-row {
  position: absolute; bottom: 8px; left: 0; right: 0;
  z-index: 5; display: flex; justify-content: center; gap: 4px;
  align-items: flex-end; padding: 0 20px;
}
.demon-slot { transition: transform .1s; flex-shrink: 0; position: relative; }
.demon-slot.flinch { transform: translateX(6px) scaleX(-1); }

/* Demon pain state */
.demon-slot.in-pain .demon-canvas-instance { filter: saturate(3) brightness(0.6) sepia(1) hue-rotate(-30deg); }
.demon-slot.in-pain { animation: pain-shake .15s ease infinite; }
@keyframes pain-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-2deg); }
  75% { transform: translateX(4px) rotate(2deg); }
}

/* Whip warning overlay */
.whip-warning {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 25; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
.whip-warning.active { opacity: 1; }
.whip-warning__text {
  font-size: 18px; font-weight: 800; color: #ff2222;
  text-shadow: 0 0 10px rgba(255,0,0,.5), 0 2px 4px rgba(0,0,0,.8);
  animation: warning-pulse .5s ease infinite;
}
.whip-warning__sub { font-size: 12px; color: #ff8888; margin-top: 4px; }
@keyframes warning-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Cooldown bar */
.whip-cooldown-bar {
  width: 120px; height: 6px; background: #333; border-radius: 3px;
  margin: 8px auto 0; overflow: hidden;
}
.whip-cooldown-fill {
  height: 100%; background: #ef4444; border-radius: 3px;
  transition: width .1s linear;
}

/* Capataz display - same row as demons */
.capataces-row {
  position: absolute; bottom: 8px; right: 8px; z-index: 4;
  display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-end;
  max-width: 45%;
}
.capataz-figure {
  width: 96px; height: 160px; image-rendering: pixelated;
  animation: capataz-idle 2s ease-in-out infinite;
}
@keyframes capataz-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-2px) rotate(0.5deg); }
  60% { transform: translateY(1px) rotate(-0.3deg); }
}
.capataz-figure:nth-child(odd) { animation-delay: -1s; }
.capataz-figure.whipping { animation: capataz-whip .4s ease !important; }
@keyframes capataz-whip {
  0% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-20deg) scale(1.05) translateX(5px); }
  50% { transform: rotate(15deg) scale(1.1); }
  75% { transform: rotate(-5deg) scale(1); }
  100% { transform: rotate(0) scale(1); }
}

/* Buy capataz bar */
.buy-capataz-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 4px 16px; flex-wrap: wrap;
}
.btn-buy-capataz {
  padding: 6px 14px; border-radius: 8px; border: 1px solid var(--green);
  background: rgba(34,197,94,.1); color: var(--green); font-size: 12px;
  font-weight: 600; cursor: pointer; transition: all .2s;
}
.btn-buy-capataz:hover { background: rgba(34,197,94,.25); }
.btn-buy-capataz:disabled { opacity: .4; cursor: not-allowed; }
.capataz-count { font-size: 11px; color: var(--text-muted); }
.demon-canvas-instance { image-rendering: pixelated; width: 96px; height: 160px; }

/* Buy demon bar */
.buy-demon-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 16px; margin-top: 4px;
}
.btn-buy-demon {
  padding: 8px 20px; border-radius: 8px; border: 2px solid var(--accent);
  background: rgba(220,38,38,.15); color: var(--accent); font-size: 14px;
  font-weight: 700; cursor: pointer; transition: all .2s;
}
.btn-buy-demon:hover { background: rgba(220,38,38,.3); }
.btn-buy-demon:disabled { opacity: .4; cursor: not-allowed; }
.demon-count-badge {
  background: var(--accent); color: #fff; padding: 4px 10px;
  border-radius: 12px; font-size: 13px; font-weight: 700;
}

/* Whip crack effect */
.whip-crack {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  opacity: 0;
}
.whip-crack.active {
  opacity: 1; animation: whip-flash .3s ease-out forwards;
}
.whip-crack.active::before {
  content: ''; position: absolute;
  top: 20%; left: 10%; width: 70%; height: 4px;
  background: linear-gradient(90deg, transparent 0%, #fff 20%, #fbbf24 50%, #fff 80%, transparent 100%);
  transform: rotate(-20deg); border-radius: 2px;
  box-shadow: 0 0 12px 3px rgba(255,255,255,.6), 0 0 24px 6px rgba(251,191,36,.3);
  animation: whip-line .3s ease-out forwards;
}
@keyframes whip-flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes whip-line {
  0% { transform: rotate(-20deg) scaleX(0); transform-origin: left; }
  40% { transform: rotate(-20deg) scaleX(1.1); }
  100% { transform: rotate(-20deg) scaleX(1); opacity: 0; }
}

/* Cut cane piece - flies off when demon cuts */
.cane-piece {
  position: absolute; pointer-events: none; z-index: 8;
  width: 6px; height: 20px; border-radius: 2px;
  animation: cane-fly .8s ease-out forwards;
}
.cane-piece.green { background: #22c55e; }
.cane-piece.brown { background: #78350f; }
@keyframes cane-fly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
}

/* Field stats badges */
.field-stats {
  display: flex; justify-content: center; gap: 12px; padding: 6px 16px;
}
.field-badge {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--text-muted);
}
/* Buy pesos button */
.btn-buy-pesos {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--green); background: rgba(34,197,94,.15);
  color: var(--green); font-size: 10px; font-weight: 700;
  cursor: pointer; margin-left: 6px; vertical-align: middle;
}
.btn-buy-pesos:hover { background: rgba(34,197,94,.3); }

/* Store packages */
.store-package {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; margin-bottom: 6px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; transition: border-color .2s, transform .15s;
}
.store-package:hover { border-color: var(--green); transform: translateY(-1px); }
.store-package__icon { font-size: 24px; flex-shrink: 0; width: 32px; text-align: center; }
.store-package__info { flex: 1; min-width: 0; }
.store-package__label { font-weight: 700; font-size: 14px; }
.store-package__desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-package__price {
  font-size: 14px; font-weight: 800; color: var(--green);
  white-space: nowrap; background: rgba(34,197,94,.1); padding: 4px 10px;
  border-radius: 6px; flex-shrink: 0;
}
.store-package.premium { border-color: #a855f7; }
.store-package.premium:hover { border-color: #c084fc; box-shadow: 0 0 12px rgba(168,85,247,.3); }
.store-package.premium .store-package__price { color: #a855f7; background: rgba(168,85,247,.1); }
.store-package.elite { border-color: #fbbf24; border-width: 2px; background: rgba(251,191,36,.05); }
.store-package.elite:hover { border-color: #f59e0b; box-shadow: 0 0 16px rgba(251,191,36,.3); }
.store-package.elite .store-package__price { color: #fbbf24; background: rgba(251,191,36,.15); font-size: 18px; }

/* Store modal - fullscreen on mobile, centered on desktop */
.store-overlay { padding: 0; }
.store-modal {
  background: var(--bg); width: 100%; height: 100%;
  display: flex; flex-direction: column;
}
.store-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg-card); flex-shrink: 0;
}
.store-header h3 { font-size: 20px; }
.store-close {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: transparent; color: var(--text); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.store-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.store-body {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.store-footer {
  padding: 12px 20px; border-top: 1px solid var(--border);
  text-align: center; flex-shrink: 0;
}
.store-footer p { font-size: 11px; color: var(--text-muted); }

@media (min-width: 768px) {
  .store-overlay { padding: 40px; }
  .store-modal {
    max-width: 420px; max-height: 80vh; margin: auto;
    border-radius: 16px; border: 1px solid var(--border);
    height: auto; box-shadow: 0 16px 48px rgba(0,0,0,.5);
  }
  .store-body { max-height: 55vh; }
}

/* Lives badge */
.lives-badge { color: #ef4444 !important; border-color: #991b1b !important; cursor: pointer; }
.boost-badge {
  color: #fbbf24 !important; border-color: #b45309 !important;
  background: rgba(251,191,36,.1) !important;
  animation: boost-glow 1s ease infinite;
}
@keyframes boost-glow {
  0%,100% { box-shadow: 0 0 4px rgba(251,191,36,.3); }
  50% { box-shadow: 0 0 12px rgba(251,191,36,.5); }
}

.click-helper { margin-top: 4px; font-size: 13px; color: var(--text-muted); text-align: center; padding: 0 16px; }

/* Demon scream text - speech bubble from mouth */
.demon-scream {
  position: absolute; font-size: 13px; font-weight: 800; pointer-events: none;
  color: #fff; z-index: 20;
  background: rgba(200,0,0,.85); padding: 2px 8px; border-radius: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  animation: scream-float .8s ease-out forwards;
  font-style: italic; white-space: nowrap;
}
.demon-scream::after {
  content: ''; position: absolute; bottom: -4px; left: 8px;
  width: 0; height: 0; border-left: 5px solid transparent;
  border-right: 5px solid transparent; border-top: 5px solid rgba(200,0,0,.85);
}
@keyframes scream-float {
  0% { opacity: 1; transform: translateY(0) scale(0.8); }
  15% { transform: translateY(-5px) scale(1.1); }
  30% { transform: translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateY(-45px) scale(0.7); }
}

/* Floating text */
.floating-text {
  position: absolute; font-size: 22px; font-weight: 800; pointer-events: none;
  animation: float-up .8s ease-out forwards; z-index: 20;
  text-shadow: 0 2px 4px rgba(0,0,0,.8);
}
@keyframes float-up {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-80px); }
}

/* Combo display */
#combo-display {
  font-size: 18px; font-weight: 700; color: var(--primary);
  margin-top: 8px; display: none; animation: pulse-combo .5s ease infinite;
}
.combo-active { display: block !important; }
@keyframes pulse-combo { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* ===== BOTTOM NAV ===== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: rgba(26,26,46,.98); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-around; padding: 8px 0 env(safe-area-inset-bottom, 8px);
}
.nav-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 12px; border: none; background: none; color: var(--text-muted);
  font-size: 10px; cursor: pointer; transition: color .2s;
}
.nav-tab-icon { font-size: 22px; }
.nav-tab.active { color: var(--primary); }

/* ===== SHOP ===== */
.shop-tabs {
  display: flex; overflow-x: auto; gap: 4px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab {
  padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 13px;
  cursor: pointer; white-space: nowrap; transition: all .2s;
}
.shop-tab.active { background: var(--primary); color: var(--bg); border-color: var(--primary); }
.shop-panel { display: none; padding: 12px 16px; }
.shop-panel.active { display: block; }

.shop-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; margin-bottom: 8px; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--border);
  transition: border-color .2s;
}
.shop-item.affordable { border-color: var(--green-dark); }
.shop-item.equipped { border-color: var(--primary); background: rgba(245,158,11,.08); }
.shop-item.locked { opacity: .5; border-color: #333; }
.shop-item__lock { font-size: 11px; color: #ef4444; margin-top: 2px; }
.locked-badge {
  display: inline-block; padding: 6px 12px; border-radius: var(--radius-sm);
  background: #333; color: #888; font-size: 12px; font-weight: 700;
}
.btn-buy-now {
  display: inline-block; margin-top: 4px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--green); background: rgba(34,197,94,.1);
  color: var(--green); font-size: 10px; font-weight: 700; cursor: pointer;
}
.btn-buy-now:hover { background: rgba(34,197,94,.25); }
.shop-item__icon { font-size: 32px; flex-shrink: 0; width: 40px; text-align: center; }
.shop-item__info { flex: 1; min-width: 0; }
.shop-item__name { font-weight: 600; font-size: 15px; }
.shop-item__desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.shop-item__owned, .shop-item__stat { font-size: 12px; color: var(--blue); margin-top: 2px; }
.shop-item__action { text-align: right; flex-shrink: 0; }
.shop-item__cost { font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.btn-buy, .btn-equip {
  padding: 8px 16px; border-radius: var(--radius-sm); border: none;
  background: var(--green); color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .2s;
}
.btn-buy:hover { background: var(--green-dark); }
.btn-buy:disabled { background: #3f3f46; color: #6b7280; cursor: not-allowed; }
.btn-equip { background: var(--blue); }
.equipped-badge, .equipped-badge-sm {
  display: inline-block; padding: 6px 12px; border-radius: var(--radius-sm);
  background: var(--primary); color: var(--bg); font-size: 12px; font-weight: 700;
}

/* Skin grid */
.skin-category { color: var(--text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 8px; }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.skin-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; border-radius: var(--radius-sm); background: var(--bg-card);
  border: 1px solid var(--border); text-align: center;
}
.skin-item.equipped { border-color: var(--primary); }
.skin-item__name { font-size: 11px; color: var(--text-muted); }
.btn-buy-sm {
  padding: 4px 8px; border-radius: 6px; border: none;
  background: var(--green); color: #fff; font-size: 11px; cursor: pointer;
}
.btn-buy-sm:disabled { background: #3f3f46; color: #6b7280; cursor: not-allowed; }

/* ===== AVATAR SCREEN ===== */
#screen-avatar { padding: 20px 16px; }
.avatar-preview-large { display: flex; justify-content: center; margin: 20px 0; }
.avatar-preview-large canvas { image-rendering: pixelated; width: 192px; height: 288px; }

/* ===== DUEL LOBBY ===== */
#screen-duel-lobby { padding: 20px 16px; }
.duel-lobby-title { font-size: 24px; font-weight: 800; text-align: center; margin-bottom: 24px; }
.duel-actions { display: flex; flex-direction: column; gap: 12px; max-width: 400px; margin: 0 auto; }
.btn-duel-action {
  padding: 16px; border-radius: var(--radius); border: none;
  font-size: 16px; font-weight: 700; cursor: pointer; transition: transform .15s;
}
.btn-duel-action:hover { transform: translateY(-2px); }
.btn-duel-action.practice { background: linear-gradient(135deg, #0d9488, #0891b2); color: #fff; }
.btn-duel-action.primary { background: var(--accent); color: #fff; }
.btn-duel-action.secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }
.join-row { display: flex; gap: 8px; }
.join-input {
  flex: 1; padding: 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: 16px; text-align: center;
  text-transform: uppercase; letter-spacing: 4px; font-weight: 700;
}
.join-input::placeholder { letter-spacing: 0; font-weight: 400; color: var(--text-muted); }

/* ===== DUEL WAITING ===== */
#screen-duel-waiting { padding: 20px 16px; text-align: center; }
.waiting-code { font-size: 40px; font-weight: 800; letter-spacing: 8px; color: var(--primary); margin: 20px 0 8px; }
.waiting-players { display: flex; justify-content: center; gap: 40px; margin: 32px 0; align-items: center; }
.waiting-player {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px; border-radius: var(--radius); background: var(--bg-card);
  border: 1px solid var(--border); min-width: 120px;
}
.waiting-vs { font-size: 24px; font-weight: 800; color: var(--accent); }
.btn-copy-code {
  padding: 8px 20px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 13px; cursor: pointer;
}
.btn-duel-start-big {
  padding: 16px 40px; border-radius: var(--radius); border: none;
  background: var(--green); color: #fff; font-size: 18px; font-weight: 700;
  cursor: pointer; margin-top: 20px;
}
.btn-duel-leave {
  margin-top: 12px; padding: 10px 24px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 14px; cursor: pointer;
}

/* ===== DUEL ARENA (Split Screen) ===== */
#screen-duel-arena { padding: 0; display: none; }

.arena-fighters {
  position: relative; width: 100%; height: 280px; overflow: hidden;
  border-bottom: 2px solid #3d2b1f;
}

/* Arena sky */
.arena-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #1a3a5c 0%, #4a7a9c 30%, #8ab8d4 55%, #c4a060 72%, #5a3a1a 80%, #3a2210 100%);
  z-index: 0;
}

/* Arena pixel art background canvas */
.arena-bg-canvas {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  image-rendering: pixelated; pointer-events: none;
}

/* Arena trees (background) */
.arena-tree {
  position: absolute; z-index: 1; bottom: 65px; pointer-events: none;
}
.arena-tree::before {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 12px; height: 50px; background: #3d2210; border-radius: 3px;
}
.arena-tree::after {
  content: ''; position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 45px; background: radial-gradient(ellipse, #2d6b1e 30%, #1a5010 70%, transparent 100%);
  border-radius: 50%;
}
.arena-tree:nth-child(1) { left: 15%; }
.arena-tree:nth-child(2) { left: 40%; }
.arena-tree:nth-child(2)::after { width: 40px; height: 35px; bottom: 30px; }
.arena-tree:nth-child(3) { right: 15%; }
.arena-tree:nth-child(4) { right: 35%; }
.arena-tree:nth-child(4)::before { height: 35px; }
.arena-tree:nth-child(4)::after { width: 35px; height: 30px; bottom: 25px; }

/* Arena sun */
.arena-sun {
  position: absolute; top: 12px; right: 18%; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle, #fff8a0 0%, #ffcc00 50%, transparent 70%);
  box-shadow: 0 0 20px 8px rgba(255,200,0,.3), 0 0 50px 15px rgba(255,150,0,.1);
}

/* Arena clouds */
.arena-cloud {
  position: absolute; z-index: 1; pointer-events: none;
}
.arena-cloud::before {
  content: ''; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.5); width: 40px; height: 16px; border-radius: 10px;
}
.arena-cloud::after {
  content: ''; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.35); width: 28px; height: 12px; top: -5px; left: 10px; border-radius: 8px;
}
@keyframes arena-cloud-drift {
  0% { transform: translateX(-60px); }
  100% { transform: translateX(calc(100vw + 60px)); }
}
.arena-cloud { animation: arena-cloud-drift var(--speed, 45s) linear infinite; }
.arena-cloud:nth-child(1) { top: 8%; --speed: 50s; }
.arena-cloud:nth-child(2) { top: 15%; --speed: 38s; animation-delay: -18s; }
.arena-cloud:nth-child(3) { top: 5%; --speed: 55s; animation-delay: -30s; }

/* Arena grass tufts on ground */
.arena-grass {
  position: absolute; z-index: 3; pointer-events: none; bottom: 55px;
}
.arena-grass::before {
  content: ''; position: absolute; bottom: 0;
  width: 3px; height: 10px; background: #4a7a20; border-radius: 2px 2px 0 0;
  transform: rotate(-10deg);
}
.arena-grass::after {
  content: ''; position: absolute; bottom: 0; left: 5px;
  width: 3px; height: 8px; background: #3a6a15; border-radius: 2px 2px 0 0;
  transform: rotate(8deg);
}

/* Arena rocks */
.arena-rock {
  position: absolute; z-index: 3; pointer-events: none; bottom: 55px;
  width: 10px; height: 6px; background: #5a5045; border-radius: 40% 50% 45% 55%;
}
.arena-rock.small { width: 6px; height: 4px; background: #6a6055; }

/* Arena birds */
.arena-bird {
  position: absolute; z-index: 1; pointer-events: none;
  font-size: 8px; color: #333; animation: bird-fly 12s linear infinite;
}
@keyframes bird-fly {
  0% { transform: translate(0, 0); }
  25% { transform: translate(50px, -8px); }
  50% { transform: translate(100px, 2px); }
  75% { transform: translate(150px, -5px); }
  100% { transform: translate(200px, 0); opacity: 0; }
}

/* Arena dust particles */
.arena-dust {
  position: absolute; z-index: 3; pointer-events: none; bottom: 60px;
  width: 2px; height: 2px; background: rgba(180,150,100,.3); border-radius: 50%;
  animation: dust-float 4s ease-in-out infinite;
}
@keyframes dust-float {
  0%, 100% { transform: translateY(0) translateX(0); opacity: .3; }
  50% { transform: translateY(-15px) translateX(8px); opacity: .1; }
}

/* Pixel art animated sprites (cars, people, pigeons) */
.arena-sprite-anim {
  position: absolute; z-index: 3; pointer-events: none;
  image-rendering: pixelated;
}
.arena-sprite-anim[data-type="chevy"],
.arena-sprite-anim[data-type="lada"] { bottom: 68px; z-index: 1; }
.arena-sprite-anim[data-type="person"] { bottom: 64px; z-index: 1; }
.arena-sprite-anim[data-type="pigeon"] { bottom: 54px; z-index: 3; }
/* Hide cars in nature themes */
.arena-theme-provincia .arena-sprite-anim[data-type="chevy"],
.arena-theme-provincia .arena-sprite-anim[data-type="lada"],
.arena-theme-region .arena-sprite-anim[data-type="chevy"],
.arena-theme-region .arena-sprite-anim[data-type="lada"] { display: none; }
.arena-theme-provincia .arena-sprite-anim[data-type="person"],
.arena-theme-region .arena-sprite-anim[data-type="person"] { opacity: 0.3; }

/* Arena dirt ground */
.arena-ground {
  position: absolute; bottom: 0; left: 0; right: 0; height: 65px; z-index: 2;
  background: linear-gradient(180deg, #6b4423 0%, #4a2e14 30%, #3a2210 100%);
}
.arena-ground::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.2) 20%, rgba(0,0,0,.15) 80%, transparent);
}

/* ===== ARENA THEMES (per story sector) ===== */

/* Sector 1: El Barrio - atardecer naranja, calle residencial */
.arena-theme-barrio .arena-sky {
  background: linear-gradient(180deg, #2d1b4e 0%, #8b3a62 25%, #d4724a 50%, #e8a050 68%, #6b5040 80%, #4a3828 100%);
}
.arena-theme-barrio .arena-sun { background: radial-gradient(circle, #ffcc66 0%, #ff8833 50%, transparent 70%); box-shadow: 0 0 20px 8px rgba(255,120,30,.4); }
.arena-theme-barrio .arena-ground { background: linear-gradient(180deg, #7a7068 0%, #5a524a 30%, #484038 100%); }
.arena-theme-barrio .arena-tree::before { background: #555; width: 6px; height: 60px; border-radius: 1px; }
.arena-theme-barrio .arena-tree::after { background: none; width: 0; height: 0; }
.arena-theme-barrio .arena-grass::before, .arena-theme-barrio .arena-grass::after { background: #6a6258; height: 3px; width: 12px; border-radius: 0; transform: none; }
.arena-theme-barrio .arena-cloud::before { background: rgba(200,150,100,.3); }
.arena-theme-barrio .arena-cloud::after { background: rgba(200,150,100,.2); }
.arena-theme-barrio .arena-dust { background: rgba(200,180,140,.4); }

/* Sector 2: El Sector - gris nublado, urbano denso */
.arena-theme-sector .arena-sky {
  background: linear-gradient(180deg, #2a2a30 0%, #4a4a55 25%, #6a6a72 50%, #5a5550 70%, #3a3530 85%, #2a2520 100%);
}
.arena-theme-sector .arena-sun { opacity: 0.2; background: radial-gradient(circle, #ccc 0%, #888 50%, transparent 70%); box-shadow: none; }
.arena-theme-sector .arena-ground { background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 30%, #1a1a1a 100%); }
.arena-theme-sector .arena-tree::before { background: #4a4040; width: 20px; height: 55px; border-radius: 2px; }
.arena-theme-sector .arena-tree::after { background: #3a3535; width: 45px; height: 50px; border-radius: 3px; }
.arena-theme-sector .arena-grass::before, .arena-theme-sector .arena-grass::after { background: #555; }
.arena-theme-sector .arena-cloud::before { background: rgba(100,100,110,.5); }
.arena-theme-sector .arena-cloud::after { background: rgba(100,100,110,.4); }
.arena-theme-sector .arena-bird { color: #666; }

/* Sector 3: El Municipio - azul claro, plaza formal */
.arena-theme-municipio .arena-sky {
  background: linear-gradient(180deg, #1a5a8c 0%, #3a8abd 30%, #6ab4e0 55%, #a0cce0 70%, #c4b8a0 80%, #8a7a60 100%);
}
.arena-theme-municipio .arena-sun { top: 8px; background: radial-gradient(circle, #fff 0%, #ffe066 40%, transparent 70%); box-shadow: 0 0 25px 10px rgba(255,220,80,.3); }
.arena-theme-municipio .arena-ground { background: linear-gradient(180deg, #b0a898 0%, #8a8070 30%, #6a6050 100%); }
.arena-theme-municipio .arena-tree::before { background: #d4c8b0; width: 16px; height: 55px; border-radius: 2px; }
.arena-theme-municipio .arena-tree::after { background: radial-gradient(ellipse, #c4b8a0 30%, #a09080 70%, transparent 100%); width: 10px; height: 55px; border-radius: 2px; bottom: 40px; }
.arena-theme-municipio .arena-grass::before, .arena-theme-municipio .arena-grass::after { display: none; }
.arena-theme-municipio .arena-rock { background: #a09888; }

/* Sector 4: La Provincia - nocturno verde, militar */
.arena-theme-provincia .arena-sky {
  background: linear-gradient(180deg, #0a1a10 0%, #1a2a18 25%, #2a3a20 50%, #3a4a2a 68%, #2a3018 80%, #1a2010 100%);
}
.arena-theme-provincia .arena-sun { opacity: 0.15; background: radial-gradient(circle, #aaffaa 0%, #446644 50%, transparent 70%); box-shadow: 0 0 15px 5px rgba(80,120,80,.2); }
.arena-theme-provincia .arena-ground { background: linear-gradient(180deg, #2a3a1a 0%, #1a2a10 30%, #0a1a08 100%); }
.arena-theme-provincia .arena-tree::before { background: #1a1a10; width: 8px; height: 50px; }
.arena-theme-provincia .arena-tree::after { background: radial-gradient(ellipse, #2a4a1a 30%, #1a3010 70%, transparent 100%); }
.arena-theme-provincia .arena-grass::before { background: #3a5a20; }
.arena-theme-provincia .arena-grass::after { background: #2a4a15; }
.arena-theme-provincia .arena-cloud::before, .arena-theme-provincia .arena-cloud::after { background: rgba(40,60,30,.3); }
.arena-theme-provincia .arena-bird { color: #1a3a10; }
.arena-theme-provincia .arena-dust { background: rgba(40,60,20,.3); }

/* Sector 5: La Region - selva tropical, Sierra Maestra */
.arena-theme-region .arena-sky {
  background: linear-gradient(180deg, #0a3a2a 0%, #1a5a3a 20%, #2a7a4a 45%, #4a9a5a 60%, #3a6a30 75%, #2a4a1a 100%);
}
.arena-theme-region .arena-sun { opacity: 0.4; top: 5px; background: radial-gradient(circle, #aaffbb 0%, #44aa55 50%, transparent 70%); box-shadow: 0 0 20px 8px rgba(60,160,80,.2); }
.arena-theme-region .arena-ground { background: linear-gradient(180deg, #3a5a20 0%, #2a4a15 30%, #1a3a0a 100%); }
.arena-theme-region .arena-tree::before { background: #3a2a10; width: 10px; height: 60px; }
.arena-theme-region .arena-tree::after { background: radial-gradient(ellipse, #2a8a2a 20%, #1a6a1a 50%, #0a4a0a 80%, transparent 100%); width: 60px; height: 55px; }
.arena-theme-region .arena-grass::before { background: #3a8a20; height: 14px; }
.arena-theme-region .arena-grass::after { background: #2a7a15; height: 12px; }
.arena-theme-region .arena-cloud::before { background: rgba(100,180,100,.2); }
.arena-theme-region .arena-cloud::after { background: rgba(100,180,100,.15); }
.arena-theme-region .arena-dust { background: rgba(60,120,40,.3); }

/* Sector 6: La Habana Final - cielo dramatico rojo/negro, Malecon */
.arena-theme-habana .arena-sky {
  background: linear-gradient(180deg, #0a0a0a 0%, #2a0a0a 15%, #5a1a1a 35%, #8a2a1a 50%, #aa3a2a 60%, #4a3a3a 75%, #2a2a30 100%);
}
.arena-theme-habana .arena-sun { background: radial-gradient(circle, #ff4444 0%, #aa0000 50%, transparent 70%); box-shadow: 0 0 30px 12px rgba(200,0,0,.4), 0 0 60px 20px rgba(150,0,0,.15); }
.arena-theme-habana .arena-ground { background: linear-gradient(180deg, #5a5560 0%, #3a3540 30%, #2a2530 100%); }
.arena-theme-habana .arena-tree::before { background: #2a2025; width: 14px; height: 50px; }
.arena-theme-habana .arena-tree::after { background: radial-gradient(ellipse, #3a2a2a 30%, #2a1a1a 70%, transparent 100%); }
.arena-theme-habana .arena-grass::before, .arena-theme-habana .arena-grass::after { background: #4a4045; }
.arena-theme-habana .arena-cloud::before { background: rgba(150,50,30,.3); }
.arena-theme-habana .arena-cloud::after { background: rgba(150,50,30,.2); }
.arena-theme-habana .arena-bird { color: #5a2a1a; }
.arena-theme-habana .arena-dust { background: rgba(180,60,30,.3); }
/* Ground texture dots */
.arena-ground::after {
  content: ''; position: absolute; top: 10px; left: 10%; right: 10%; height: 2px;
  background: repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(0,0,0,.08) 12px, rgba(0,0,0,.08) 14px);
}

/* Fighters positioned on the ground */
.arena-fighter {
  position: absolute; bottom: -20px; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.arena-fighter--left { left: 8%; }
.arena-fighter--right { right: 8%; }
.arena-avatar {
  image-rendering: pixelated; width: 80px; height: 120px;
}
.arena-fighter__info { text-align: center; width: 100px; }

/* VS badge floating in center */
.arena-center {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6;
}
.arena-vs-badge {
  font-size: 18px; font-weight: 800; color: #fff;
  background: var(--accent); padding: 4px 14px; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(220,38,38,.4);
}
.combat-zone {
  position: absolute; inset: 0; pointer-events: none; z-index: 10;
}

.arena-player-name { font-size: 12px; font-weight: 700; margin-bottom: 2px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.arena-player-stats { font-size: 9px; color: #ccc; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.hp-bar-container { height: 12px; background: var(--hp-bg); border-radius: 6px; margin-top: 4px; overflow: hidden; }
.hp-bar-fill { height: 100%; background: var(--hp-bar); border-radius: 6px; transition: width .5s; }
.hp-bar-fill.healthy { background: var(--green); }
.hp-text { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.arena-vs { display: flex; align-items: center; padding: 0 12px; font-size: 20px; font-weight: 800; color: var(--accent); }

/* Timer */
.duel-timer { padding: 0 16px; margin-top: 12px; }
.timer-bar-container { height: 6px; background: var(--hp-bg); border-radius: 3px; overflow: hidden; }
#duel-timer-bar { height: 100%; width: 100%; background: var(--green); border-radius: 3px; transition: width .1s linear; }
#duel-timer-text { text-align: center; font-size: 14px; font-weight: 700; margin-top: 4px; color: var(--text-muted); }

/* Question */
.duel-question { padding: 20px 16px; text-align: center; }
#duel-question-num { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
#duel-question-cat { font-size: 13px; color: var(--primary); margin: 4px 0 12px; }
#duel-question-text { font-size: 18px; font-weight: 700; line-height: 1.4; margin-bottom: 16px; word-wrap: break-word; padding: 0 8px; }

/* Options */
#duel-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px; }
.duel-option {
  padding: 14px; border-radius: var(--radius); border: 2px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all .2s; text-align: center;
}
.duel-option:hover:not(:disabled) { border-color: var(--primary); background: var(--bg-card-hover); }
.duel-option.selected { border-color: var(--blue); background: rgba(59,130,246,.15); }
.duel-option.correct { border-color: var(--green); background: rgba(34,197,94,.15); color: var(--green); }
.duel-option.wrong { border-color: var(--accent); background: rgba(220,38,38,.1); color: var(--accent); opacity: .6; }
.duel-option.hidden-option { opacity: .2; text-decoration: line-through; }
.duel-option:disabled { cursor: not-allowed; }

/* Wildcards in duel */
#duel-wildcards { display: flex; gap: 8px; padding: 12px 16px; flex-wrap: wrap; justify-content: center; }
.btn-wildcard {
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--primary);
  background: rgba(245,158,11,.1); color: var(--primary); font-size: 12px;
  cursor: pointer; transition: all .2s;
}
.btn-wildcard:hover { background: rgba(245,158,11,.2); }
.btn-wildcard.used { opacity: .4; border-color: var(--border); color: var(--text-muted); }
.no-wildcards { font-size: 12px; color: var(--text-muted); }

#duel-answer-status { text-align: center; padding: 12px; font-size: 16px; font-weight: 700; }

/* ===== DUEL RESULTS MODAL ===== */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.8); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 20px;
}
.modal-content {
  background: var(--bg-card); border-radius: var(--radius); padding: 32px;
  max-width: 400px; width: 100%; text-align: center; border: 1px solid var(--border);
}
.duel-result-title { font-size: 36px; font-weight: 800; margin-bottom: 8px; }
.duel-result-title.win { color: var(--green); }
.duel-result-title.lose { color: var(--accent); }
.duel-result-title.draw { color: var(--primary); }
#duel-result-reward { font-size: 20px; font-weight: 700; color: var(--primary); margin: 12px 0 20px; }
.recap-round { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.recap-round .correct { color: var(--green); }
.recap-round .wrong { color: var(--accent); }
.modal-buttons { display: flex; gap: 8px; margin-top: 20px; justify-content: center; }
.btn-modal {
  padding: 12px 24px; border-radius: var(--radius-sm); border: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn-modal.primary { background: var(--green); color: #fff; }
.btn-modal.secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }

/* ===== LEADERBOARD ===== */
#screen-leaderboard { padding: 16px; }
.lb-sort-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.lb-sort-tab {
  flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 13px; cursor: pointer; text-align: center;
}
.lb-sort-tab.active { background: var(--primary); color: var(--bg); border-color: var(--primary); }
.lb-row {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: var(--radius-sm); margin-bottom: 4px; background: var(--bg-card);
}
.lb-me { border: 1px solid var(--primary); }
.lb-rank { font-size: 18px; width: 40px; text-align: center; }
.lb-name { flex: 1; font-weight: 600; }
.lb-value { font-weight: 700; color: var(--primary); }
.lb-empty { text-align: center; color: var(--text-muted); padding: 40px; }
#my-rank { text-align: center; color: var(--text-muted); font-size: 14px; margin-top: 12px; }

/* Achievements */
.ach-section-title { font-size: 18px; font-weight: 700; margin: 24px 0 12px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.ach-item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border);
  opacity: .5;
}
.ach-item.unlocked { opacity: 1; border-color: var(--primary); }
.ach-icon { font-size: 28px; flex-shrink: 0; }
.ach-name { font-weight: 600; font-size: 14px; }
.ach-desc { font-size: 12px; color: var(--text-muted); }

/* ===== POPUPS ===== */
.achievement-popup {
  position: fixed; top: 20px; right: -400px; z-index: 300;
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  background: var(--bg-card); border: 2px solid var(--primary); border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.5); transition: right .4s ease;
}
.achievement-popup.show { right: 20px; }
.achievement-popup__icon { font-size: 36px; }
.achievement-popup__title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); }
.achievement-popup__name { font-weight: 700; font-size: 15px; }
.achievement-popup__desc { font-size: 12px; color: var(--text-muted); }

.levelup-popup {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5);
  z-index: 300; text-align: center; padding: 32px;
  background: radial-gradient(circle, var(--bg-card) 0%, transparent 70%);
  opacity: 0; transition: all .4s ease;
}
.levelup-popup.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.levelup-icon { font-size: 64px; }
.levelup-text { font-size: 14px; color: var(--primary); text-transform: uppercase; letter-spacing: 2px; }
.levelup-name { font-size: 28px; font-weight: 800; }

/* ===== SETTINGS MODAL ===== */
#modal-settings .modal-content { text-align: left; }
.settings-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.settings-item button {
  padding: 10px 20px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: transparent; color: var(--text); font-size: 14px; cursor: pointer; width: 100%;
}
.settings-item button:hover { background: var(--bg-card-hover); }
.settings-item .danger { color: var(--accent); border-color: var(--accent); }

/* ===== SECTION TITLES ===== */
.screen-title {
  font-size: 22px; font-weight: 800; padding: 16px 16px 8px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ===== VISUAL EFFECTS ANIMATIONS ===== */

/* Screen shake effect */
@keyframes screen-shake {
  0%, 100% { transform: translateX(0) translateY(0); }
  10% { transform: translateX(-8px) translateY(-8px); }
  20% { transform: translateX(8px) translateY(8px); }
  30% { transform: translateX(-8px) translateY(8px); }
  40% { transform: translateX(8px) translateY(-8px); }
  50% { transform: translateX(-6px) translateY(-6px); }
  60% { transform: translateX(6px) translateY(6px); }
  70% { transform: translateX(-4px) translateY(4px); }
  80% { transform: translateX(4px) translateY(-4px); }
  90% { transform: translateX(-2px) translateY(-2px); }
}
#screen-duel-arena.screen-shake { animation: screen-shake 0.4s ease-in-out; }

/* Slash attack animation */
@keyframes slash-attack {
  0% { transform: translateX(-100%) translateY(-100%) rotate(-45deg) scaleX(0); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translateX(100%) translateY(100%) rotate(-45deg) scaleX(1); opacity: 0; }
}
.slash-effect {
  position: fixed; width: 200%; height: 12px;
  background: linear-gradient(90deg, transparent, #f59e0b, transparent);
  top: 50%; left: 50%; z-index: 100; pointer-events: none;
  animation: slash-attack 0.6s ease-out forwards;
}

/* HP bar pulse when damaged */
@keyframes hp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.hp-bar-fill.damage-pulse { animation: hp-pulse 0.6s ease-out; }

/* Particle burst effect */
@keyframes particle-burst {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}
.particle {
  position: fixed; width: 8px; height: 8px; border-radius: 50%;
  pointer-events: none; animation: particle-burst 0.8s ease-out forwards;
}
.particle.gold { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.particle.green { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.particle.red { background: #ef4444; box-shadow: 0 0 6px #ef4444; }

/* Critical hit flash */
@keyframes critical-flash {
  0%, 100% { background: rgba(245, 158, 11, 0); }
  50% { background: rgba(245, 158, 11, 0.4); }
}
.critical-flash {
  position: fixed; inset: 0; z-index: 110; pointer-events: none;
  animation: critical-flash 0.4s ease-in-out forwards;
}

/* Victory/defeat overlays */
.victory-overlay, .defeat-overlay {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  animation: overlay-fade 0.5s ease-out forwards;
}
.victory-overlay { background: rgba(34, 197, 94, 0.25); }
.defeat-overlay { background: rgba(220, 38, 38, 0.25); }
@keyframes overlay-fade { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* Blood pixel particles */
@keyframes blood-spray {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  70% { opacity: .8; }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.3); }
}
@keyframes blood-drip {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(var(--drip, 40px)); }
}
.blood-particle {
  position: fixed; pointer-events: none; z-index: 200;
  animation: blood-spray 0.6s ease-out forwards;
}
.blood-particle.drip { animation: blood-drip 1s ease-in forwards; }

/* Speed label */
.speed-label {
  position: fixed; pointer-events: none; z-index: 201;
  font-weight: 800; font-size: 14px; animation: float-up-scale .8s ease-out forwards;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.speed-label.critico { color: #fbbf24; font-size: 18px; }
.speed-label.rapido { color: #60a5fa; }
.speed-label.debilidad { color: #a855f7; font-size: 18px; }

/* Arena combo counter */
.arena-combo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 8; font-size: 22px; font-weight: 800; color: var(--primary);
  text-shadow: 0 2px 6px rgba(0,0,0,.8); pointer-events: none;
  display: none;
}
.arena-combo.active { display: block; animation: pulse-combo .5s ease infinite; }
.arena-combo.ultra { color: #ef4444; font-size: 28px; animation: ultra-pulse .3s ease infinite; }
@keyframes ultra-pulse { 0%,100%{transform:translate(-50%,-50%) scale(1);} 50%{transform:translate(-50%,-50%) scale(1.2);} }

/* Ability buttons */
.abilities-bar {
  display: flex; justify-content: center; gap: 8px; padding: 8px 16px;
}
.btn-ability {
  padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: 12px;
  cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 4px;
}
.btn-ability:hover:not(:disabled) { border-color: var(--primary); background: rgba(245,158,11,.1); }
.btn-ability:disabled { opacity: .3; cursor: not-allowed; }
.btn-ability.used { opacity: .2; text-decoration: line-through; }
.btn-ability .ability-icon { font-size: 16px; }

/* Weakness hint */
.weakness-hint {
  font-size: 10px; color: #a855f7; text-align: center; margin-top: 2px;
}

/* Miss text */
.miss-text {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
  font-size: 28px; font-weight: 800; color: #666;
  animation: float-up .8s ease-out forwards; pointer-events: none; z-index: 15;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}

/* Fighter idle breathing animation - constant movement */
.arena-fighter--left canvas { animation: idle-bounce-left 1.5s ease-in-out infinite; }
.arena-fighter--right canvas { animation: idle-bounce-right 1.5s ease-in-out infinite; animation-delay: -0.75s; }
@keyframes idle-bounce-left {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-3px) rotate(0.5deg); }
  60% { transform: translateY(1px) rotate(-0.3deg); }
}
@keyframes idle-bounce-right {
  0%, 100% { transform: translateY(0) rotate(0deg) scaleX(-1); }
  30% { transform: translateY(-3px) rotate(-0.5deg) scaleX(-1); }
  60% { transform: translateY(1px) rotate(0.3deg) scaleX(-1); }
}

/* Fighter attack - lunge forward, swing, come back */
.arena-fighter--left.attacking { animation: attack-right .5s ease-out; }
.arena-fighter--right.attacking { animation: attack-left .5s ease-out; }
.arena-fighter--left.attacking canvas { animation: swing-right .5s ease-out !important; }
.arena-fighter--right.attacking canvas { animation: swing-left .5s ease-out !important; }

@keyframes attack-right {
  0% { transform: translateX(0); }
  25% { transform: translateX(40px) translateY(-8px); }
  40% { transform: translateX(50px) translateY(-5px); }
  70% { transform: translateX(30px); }
  100% { transform: translateX(0); }
}
@keyframes attack-left {
  0% { transform: translateX(0); }
  25% { transform: translateX(-40px) translateY(-8px); }
  40% { transform: translateX(-50px) translateY(-5px); }
  70% { transform: translateX(-30px); }
  100% { transform: translateX(0); }
}
@keyframes swing-right {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-15deg) scale(1.05); }
  40% { transform: rotate(20deg) scale(1.1); }
  60% { transform: rotate(5deg) scale(1); }
  100% { transform: rotate(0deg); }
}
@keyframes swing-left {
  0% { transform: scaleX(-1) rotate(0deg); }
  20% { transform: scaleX(-1) rotate(15deg) scale(1.05); }
  40% { transform: scaleX(-1) rotate(-20deg) scale(1.1); }
  60% { transform: scaleX(-1) rotate(-5deg) scale(1); }
  100% { transform: scaleX(-1) rotate(0deg); }
}

/* Fighter hit recoil - knocked back */
.arena-fighter--left.hit { animation: recoil-left .4s ease-out; }
.arena-fighter--right.hit { animation: recoil-right .4s ease-out; }
.arena-fighter.hit canvas { filter: brightness(2) !important; }
@keyframes recoil-left {
  0% { transform: translateX(0); }
  30% { transform: translateX(-15px) translateY(-5px); }
  50% { filter: brightness(2); }
  100% { transform: translateX(0); filter: brightness(1); }
}
@keyframes recoil-right {
  0% { transform: translateX(0); }
  30% { transform: translateX(15px) translateY(-5px); }
  50% { filter: brightness(2); }
  100% { transform: translateX(0); filter: brightness(1); }
}

/* Death animation - sprite falls to ground */
.arena-fighter.dead canvas { animation: fighter-death 1s ease-in forwards !important; }
@keyframes fighter-death {
  0% { transform: translateY(0) rotate(0deg); filter: brightness(1); }
  15% { transform: translateY(-15px) rotate(5deg); filter: brightness(2.5); }
  30% { filter: brightness(0.5) saturate(0); }
  100% { transform: translateY(30px) rotate(85deg); filter: brightness(0.3) saturate(0); opacity: 0.4; }
}
.arena-fighter.dead .arena-fighter__info { animation: fade-out .5s ease forwards; }
@keyframes fade-out { to { opacity: 0; } }

/* Enhanced floating text with scaling */
@keyframes float-up-scale {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-40px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.8); }
}

/* Damage number animation */
.damage-number {
  position: fixed; font-weight: 800; font-size: 28px; pointer-events: none;
  animation: float-up-scale 1s ease-out forwards;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); z-index: 200;
}
.damage-number.critical { font-size: 32px; color: #f59e0b; }
.damage-number.normal { color: #ef4444; }

/* Block/shield animation */
@keyframes shield-flash {
  0% { transform: scale(0.5); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}
.shield-effect {
  position: fixed; font-size: 48px; pointer-events: none;
  animation: shield-flash 0.6s ease-out forwards; z-index: 120;
}

/* Glowing pulse for click button on combo */
@keyframes glow-pulse-intense {
  0% { box-shadow: 0 0 20px rgba(245,158,11,.3), inset 0 0 10px rgba(245,158,11,.1); }
  50% { box-shadow: 0 0 60px rgba(245,158,11,.7), inset 0 0 20px rgba(245,158,11,.3); }
  100% { box-shadow: 0 0 20px rgba(245,158,11,.3), inset 0 0 10px rgba(245,158,11,.1); }
}
#click-area.glow-intense { animation: glow-pulse-intense 0.6s ease-in-out infinite; }

/* Sparkle trail animation */
@keyframes sparkle-fade {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.2); }
}
.sparkle {
  position: fixed; width: 6px; height: 6px; background: #fbbf24;
  border-radius: 50%; pointer-events: none;
  animation: sparkle-fade 0.6s ease-out forwards; box-shadow: 0 0 3px #f59e0b;
}

/* Screen pulse on high combo */
@keyframes screen-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
body.combo-pulse { animation: screen-pulse 0.4s ease-out; }

/* ===== DUEL CHAT ===== */
.duel-chat {
  position: fixed; bottom: 70px; right: 12px; z-index: 90;
  width: 260px; max-height: 300px; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.duel-chat.collapsed { max-height: 40px; }
.duel-chat__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.duel-chat__messages {
  flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px;
  max-height: 200px; font-size: 12px;
}
.chat-msg { padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.05); word-break: break-word; }
.chat-msg.me { background: rgba(245,158,11,.15); text-align: right; }
.chat-msg .chat-name { font-weight: 700; color: var(--primary); font-size: 11px; }
.duel-chat__input {
  display: flex; gap: 4px; padding: 6px;
  border-top: 1px solid var(--border);
}
.duel-chat__input input {
  flex: 1; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 12px;
}
.duel-chat__input button {
  padding: 6px 12px; border-radius: 6px; border: none;
  background: var(--primary); color: var(--bg); font-size: 12px; font-weight: 700; cursor: pointer;
}
.chat-quick-btns { display: flex; gap: 4px; padding: 4px 6px; flex-wrap: wrap; }
.chat-quick-btn {
  padding: 3px 8px; border-radius: 12px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 11px; cursor: pointer;
}
.chat-quick-btn:hover { border-color: var(--primary); color: var(--text); }

/* ===== TOURNAMENT ===== */
.tournament-banner {
  margin: 12px 16px; padding: 16px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(220,38,38,.1));
  border: 1px solid rgba(245,158,11,.3); text-align: center;
}
.tournament-banner__title { font-size: 16px; font-weight: 800; color: var(--primary); }
.tournament-banner__timer { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.tournament-banner__prize { font-size: 14px; font-weight: 700; color: var(--green); margin-top: 4px; }
.tournament-lb { padding: 0 16px; }
.tournament-lb-title { font-size: 16px; font-weight: 700; margin: 16px 0 8px; }

/* ===== STORY MODE ===== */
.story-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px; padding: 12px 16px;
}
.story-level {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 6px; border-radius: var(--radius-sm);
  background: var(--bg-card); border: 2px solid var(--border);
  text-align: center; cursor: pointer; transition: all .2s; position: relative;
}
.story-level.locked {
  opacity: .4; cursor: not-allowed; border-color: #222;
}
.story-level.available {
  border-color: var(--green); box-shadow: 0 0 8px rgba(34,197,94,.3);
  animation: level-pulse 2s ease infinite;
}
@keyframes level-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(34,197,94,.3); }
  50% { box-shadow: 0 0 16px rgba(34,197,94,.5); }
}
.story-level.completed { border-color: var(--primary); }
.story-level.boss { border-width: 3px; }
.story-level.boss.available { border-color: var(--accent); box-shadow: 0 0 12px rgba(220,38,38,.4); }
.story-level.boss.completed { border-color: #fbbf24; }
.story-level:hover:not(.locked) { transform: translateY(-2px); }
.story-level__num { font-size: 20px; font-weight: 800; }
.story-level__name { font-size: 9px; color: var(--text-muted); line-height: 1.2; }
.story-level__star { position: absolute; top: -6px; right: -6px; font-size: 14px; }

/* Boss dialogue modal */
.story-boss-modal { text-align: center; max-width: 340px; }
.story-boss-level { font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; }
.story-boss-icon { font-size: 64px; margin: 12px 0; }
.story-boss-name { font-size: 24px; font-weight: 800; }
.story-boss-phrase {
  font-size: 14px; color: var(--text-muted); font-style: italic; margin-top: 8px;
  padding: 8px; background: rgba(255,255,255,.05); border-radius: 8px;
}

/* RPG Dialogue box */
.dialogue-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.7);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; cursor: pointer;
}
.dialogue-box {
  width: 100%; max-width: 600px; background: var(--bg-card);
  border: 2px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 20px; position: relative;
}
.dialogue-speaker {
  position: absolute; top: -14px; left: 16px;
  background: var(--primary); color: var(--bg); padding: 2px 12px;
  border-radius: 8px; font-size: 12px; font-weight: 700;
}
.dialogue-speaker.enemy { background: var(--accent); }
.dialogue-text {
  font-size: 16px; line-height: 1.5; color: var(--text); min-height: 48px;
  padding-top: 8px;
}
/* Dialogue portrait */
.dialogue-portrait {
  position: absolute; top: -50px; left: 16px;
  image-rendering: pixelated; width: 48px; height: 72px;
  border: 2px solid var(--primary); border-radius: 8px;
  background: var(--bg-card);
}
.dialogue-portrait.enemy-portrait {
  left: auto; right: 16px;
  border-color: var(--accent);
}
.dialogue-box.has-portrait { margin-top: 40px; }

.dialogue-next {
  text-align: right; font-size: 11px; color: var(--text-muted);
  margin-top: 8px; animation: blink-next 1s ease infinite;
}
@keyframes blink-next { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

/* Dialogue choice buttons */
.dialogue-choices {
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
}
.dialogue-choice-btn {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  border: 2px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,.05); color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.dialogue-choice-btn:active { transform: scale(0.97); }
.dialogue-choice-btn.choice-good { border-color: #22c55e; }
.dialogue-choice-btn.choice-good:hover { background: rgba(34,197,94,.15); }
.dialogue-choice-btn.choice-neutral { border-color: #6b7280; }
.dialogue-choice-btn.choice-neutral:hover { background: rgba(107,114,128,.15); }
.dialogue-choice-btn.choice-bad { border-color: #cc4433; }
.dialogue-choice-btn.choice-bad:hover { background: rgba(204,68,51,.15); }
.dialogue-choice-btn.choice-special { border-color: #d4a017; color: #d4a017; }
.dialogue-choice-btn.choice-special:hover { background: rgba(212,160,23,.15); }
.dialogue-choice-btn.choice-locked {
  opacity: .4; color: var(--text-muted); border-color: #444;
  cursor: not-allowed; pointer-events: none;
}
.dialogue-choice-btn .choice-lvl { font-size: 11px; color: #d4a017; margin-right: 4px; }
.dialogue-choice-btn .choice-lock { font-size: 11px; color: #888; margin-right: 4px; }

/* Dialogue outcome flash */
.dialogue-outcome {
  text-align: center; padding: 12px; margin-top: 8px;
  border-radius: 8px; font-weight: 700; font-size: 14px;
  animation: outcome-flash .5s ease;
}
.dialogue-outcome.good { background: rgba(34,197,94,.15); color: #22c55e; border: 1px solid #22c55e; }
.dialogue-outcome.neutral { background: rgba(150,150,150,.1); color: #999; border: 1px solid #555; }
.dialogue-outcome.bad { background: rgba(220,50,50,.15); color: #ef4444; border: 1px solid #ef4444; }
.dialogue-outcome.special { background: rgba(212,160,23,.15); color: #d4a017; border: 1px solid #d4a017; }
@keyframes outcome-flash { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Story button in lobby */
.btn-duel-action.story {
  background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
}

/* ===== RESPONSIVE ===== */
@media (min-width: 768px) {
  .game-screen { max-width: 900px; margin: 0 auto; }
  .cane-field { height: 420px; }
  .demon-canvas-instance { width: 120px; height: 160px; }
  .arena-fighters { height: 350px; }
  .arena-avatar { width: 100px; height: 150px; }
  .arena-fighter--left { left: 12%; }
  .arena-fighter--right { right: 12%; }
  #duel-options { grid-template-columns: 1fr 1fr; gap: 12px; }
  .waiting-players { gap: 60px; }
}
@media (min-width: 1024px) {
  .game-screen { max-width: 100%; }
  #screen-main, #screen-duel-arena { max-width: 100%; }
  .cane-field { height: 500px; }
  .cane-stalk { height: 280px; }
  .cane-stalk:nth-child(odd) { height: 250px; }
  .cane-stalk:nth-child(3n) { height: 300px; }
  .demon-canvas-instance { width: 140px; height: 180px; }
  .demons-row { gap: 12px; }
  .arena-fighters { height: 420px; }
  .arena-avatar { width: 120px; height: 180px; }
  .arena-fighter--left { left: 15%; }
  .arena-fighter--right { right: 15%; }
  .arena-vs-badge { font-size: 24px; padding: 6px 20px; }
  .arena-tree::after { width: 70px; height: 60px; }
  .arena-tree::before { height: 70px; }
  .arena-ground { height: 80px; }
  .arena-sun { width: 50px; height: 50px; }
  .hp-bar-container { height: 16px; }
  .arena-player-name { font-size: 16px; }
  #duel-question-text { font-size: 24px; }
  #duel-options { grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 40px; }
  .duel-option { padding: 18px; font-size: 17px; }
}
@media (min-width: 1400px) {
  .cane-field { height: 580px; }
  .cane-stalk { height: 340px; }
  .cane-stalk:nth-child(odd) { height: 300px; }
  .cane-stalk:nth-child(3n) { height: 360px; }
  .arena-fighters { height: 500px; }
  .arena-avatar { width: 140px; height: 210px; }
  .arena-fighter--left { left: 18%; }
  .arena-fighter--right { right: 18%; }
  .arena-tree::after { width: 90px; height: 75px; }
  .arena-tree::before { height: 85px; width: 16px; }
  .arena-ground { height: 100px; }
  .arena-sun { width: 60px; height: 60px; top: 15px; }
  #duel-options { padding: 0 80px; }
}
@media (max-width: 380px) {
  .hub-pesos { font-size: 22px; }
  .cane-field { height: 260px; }
  .demon-canvas-instance { width: 72px; height: 96px; }
  #duel-options { grid-template-columns: 1fr; }
  .duel-option { padding: 12px; font-size: 14px; }
  .login-title { font-size: 36px; }
}

/* ===== BOSS PHASE 2 TRANSITION ===== */
.phase2-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  animation: phase2-appear 0.5s ease-out;
}
.phase2-overlay.phase2-fade {
  animation: phase2-disappear 0.5s ease-in forwards;
}
@keyframes phase2-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes phase2-disappear {
  from { opacity: 1; }
  to { opacity: 0; }
}

.phase2-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 200vw; height: 200vh;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,100,0,0.3) 10deg,
    transparent 20deg, rgba(255,50,0,0.2) 30deg,
    transparent 40deg, rgba(255,200,0,0.3) 50deg,
    transparent 60deg, rgba(255,80,0,0.25) 70deg,
    transparent 80deg, rgba(255,150,0,0.3) 90deg,
    transparent 100deg, rgba(255,50,0,0.2) 110deg,
    transparent 120deg, rgba(255,200,0,0.3) 130deg,
    transparent 140deg, rgba(255,80,0,0.25) 150deg,
    transparent 160deg, rgba(255,100,0,0.3) 170deg,
    transparent 180deg, rgba(255,50,0,0.2) 190deg,
    transparent 200deg, rgba(255,200,0,0.3) 210deg,
    transparent 220deg, rgba(255,80,0,0.25) 230deg,
    transparent 240deg, rgba(255,150,0,0.3) 250deg,
    transparent 260deg, rgba(255,50,0,0.2) 270deg,
    transparent 280deg, rgba(255,200,0,0.3) 290deg,
    transparent 300deg, rgba(255,80,0,0.25) 310deg,
    transparent 320deg, rgba(255,100,0,0.3) 330deg,
    transparent 340deg, rgba(255,50,0,0.2) 350deg,
    transparent 360deg
  );
  animation: phase2-rays-spin 3s linear infinite;
}
@keyframes phase2-rays-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.phase2-message {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 24px 32px;
  max-width: 90vw;
  animation: phase2-msg-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes phase2-msg-pop {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.phase2-title {
  font-size: 48px;
  font-weight: 900;
  color: #ff4444;
  text-shadow:
    0 0 20px #ff0000,
    0 0 40px #ff6600,
    0 0 60px #ff0000,
    2px 2px 0 #000;
  letter-spacing: 8px;
  margin-bottom: 16px;
  animation: phase2-title-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes phase2-title-pulse {
  from { text-shadow: 0 0 20px #ff0000, 0 0 40px #ff6600, 0 0 60px #ff0000, 2px 2px 0 #000; transform: scale(1); }
  to { text-shadow: 0 0 30px #ff0000, 0 0 60px #ff6600, 0 0 80px #ff0000, 2px 2px 0 #000; transform: scale(1.05); }
}

.phase2-text {
  font-size: 18px;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(255,100,0,0.8), 1px 1px 0 #000;
  font-weight: 700;
  line-height: 1.4;
  max-width: 400px;
  margin: 0 auto;
}