@import url('/static/shared/base.css');

/* Penalty King — stadium night palette. */

:root {
  --pk-grass:     #2d5a2d;
  --pk-grass-dk:  #1a3a1a;
  --pk-pitch:     #1b3756;
  --pk-floodlight:#ffd76a;
  --pk-net:       #ffffff;
  --pk-ball:      #f3f3f3;
  --pk-cell-hi:   #ffd76a;
  --pk-cell-bg:   rgba(255, 255, 255, 0.04);
  --pk-cell-border: rgba(255, 255, 255, 0.18);
  --pk-keeper:    #ff2091;
  --pk-goal:      #84ffc4;
  --pk-save:      #ff8aa7;
  --win-green:    #84ff7e;
  --lose-pink:    #ff8aa7;
  --moon-bright:  #ffd76a;
  --moon-yellow:  #fbbf24;
}

body {
  background:
    radial-gradient(ellipse at 30% 15%, rgba(132, 255, 196, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 90%, rgba(255, 215, 106, 0.08) 0%, transparent 55%),
    #050d1a !important;
  color: #e8eaf3 !important;
}

.stage {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  max-width: 1180px !important;
  width: 100%;
  margin: 0 auto;
  padding: 0.6rem 1.2rem 2rem;
  box-sizing: border-box;
}

.stage, .hero, .panel, .muted { color: #e8eaf3; }
.muted { color: #a8aebf !important; }
.brand, .brand-game { color: var(--moon-bright) !important; }
.balance { color: var(--moon-bright) !important; }

.topbar {
  background: rgba(8, 10, 16, 0.88) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px);
}

/* Solo flow: collapse the hero. */
.hero { display: none !important; }
.phase-indicator { display: none !important; }

/* Live-match ticker — small chip in the topbar meta area. */
.live-ticker {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #cdd0d8; padding: 0.3rem 0.6rem;
  border-radius: 999px; background: rgba(132, 255, 126, 0.08);
  border: 1px solid rgba(132, 255, 126, 0.25);
  white-space: nowrap; max-width: 320px; overflow: hidden;
  text-overflow: ellipsis;
}
.live-ticker:empty { display: none; }
.live-ticker .live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #84ff7e; box-shadow: 0 0 8px #84ff7e;
  animation: pk-pulse 1.2s ease-in-out infinite;
}
@keyframes pk-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ---------- Game panel ---------- */

.game-panel {
  background: rgba(13, 27, 42, 0.85);
  border: 2px solid rgba(132, 255, 196, 0.25);
  border-radius: 14px;
  padding: 0.7rem 0.8rem 0.9rem;
}

.hud {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem; margin-bottom: 0.6rem;
}
.hud-cell {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px; padding: 0.5rem 0.5rem; text-align: center;
}
.hud-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #8a92a8; margin-bottom: 0.15rem;
}
.hud-value {
  font-family: 'JetBrains Mono', monospace; font-size: 17px;
  font-weight: 700; color: var(--moon-bright);
  font-variant-numeric: tabular-nums;
}

/* Keeper card */
.keeper-card {
  display: flex; align-items: center; gap: 0.7rem;
  background: rgba(255, 32, 145, 0.06);
  border: 1px solid rgba(255, 32, 145, 0.25);
  border-radius: 10px; padding: 0.5rem 0.8rem; margin-bottom: 0.6rem;
}
.kc-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
  letter-spacing: 0.22em; color: #ff57b0; text-transform: uppercase;
}
.kc-name {
  font-family: 'JetBrains Mono', monospace; font-size: 0.95rem;
  font-weight: 700; color: #fff; text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kc-hint { font-size: 0.78rem; color: #cdd0d8; margin-left: auto; }

/* Canvas */
.canvas-wrap {
  width: 100%; max-width: 720px; margin: 0 auto 0.6rem;
  aspect-ratio: 4 / 3; min-height: 280px; max-height: 56vh;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(132, 255, 196, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.10);
  background: #0a121e; position: relative;
  cursor: crosshair; touch-action: manipulation;
}
#penalty-canvas { width: 100%; height: 100%; display: block; user-select: none; }

/* 3x3 cells inside the goal */
.pk-cell-rect {
  fill: var(--pk-cell-bg);
  stroke: var(--pk-cell-border);
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill 0.12s, stroke 0.12s;
}
.pk-cell-rect:hover {
  fill: rgba(255, 215, 106, 0.10);
  stroke: var(--pk-cell-hi);
}
.pk-cell-rect.is-armed {
  fill: rgba(255, 215, 106, 0.22);
  stroke: var(--pk-cell-hi);
  stroke-width: 2.5;
}
.pk-cell-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 700;
  fill: rgba(255, 215, 106, 0.85);
  pointer-events: none; user-select: none;
}

/* Keeper sprite (an SVG circle + label) */
.pk-keeper-body {
  fill: var(--pk-keeper);
  filter: url(#pk-glow);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ball flying toward the goal — animated by JS via transform */
.pk-ball {
  fill: var(--pk-ball);
  stroke: #0a121e;
  stroke-width: 2;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stuck shot marker */
.pk-shot-marker {
  fill: var(--pk-goal);
  stroke: #fff; stroke-width: 1;
  opacity: 0.85;
}
.pk-shot-marker.save { fill: var(--pk-save); }

/* Power pills */
.power-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.power-pill {
  padding: 0.5rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px; color: #cdd0d8;
  font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;
  font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.power-pill:hover { border-color: var(--moon-yellow); color: #fff; }
.power-pill.is-selected {
  background: rgba(132, 255, 196, 0.16);
  border-color: var(--pk-goal); color: #fff;
  box-shadow: 0 0 14px rgba(132, 255, 196, 0.35);
}

/* Stake pills */
.stake-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.stake-pill {
  min-width: 0; padding: 0.55rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px; color: #cdd0d8;
  font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;
  font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.stake-pill:hover:not(.is-locked) { border-color: var(--moon-yellow); color: #fff; }
.stake-pill.is-selected {
  background: rgba(251, 191, 36, 0.16);
  border-color: var(--moon-bright); color: #fff;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.35);
}
.stake-pill.is-locked { opacity: 0.5; cursor: not-allowed; }

/* Action button */
.action-btn {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; padding: 0.9rem 1rem; border: none; border-radius: 10px;
  font-family: inherit; cursor: pointer; transition: all 0.15s;
  min-height: 72px; margin-bottom: 0.4rem;
}
.act-top {
  font-family: 'JetBrains Mono', monospace; font-size: 0.95rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.act-bot { font-size: 0.78rem; opacity: 0.85; margin-top: 0.25rem; }
.act-drop { background: linear-gradient(135deg, #84ffc4, #3a8e6a); color: #07301d; }
.act-cashout { background: linear-gradient(135deg, #84ffc4, #3a8e6a); color: #07301d; }
.act-done { background: rgba(132, 255, 196, 0.16); color: var(--pk-goal); border: 1px solid var(--pk-goal); }
.act-idle { background: rgba(255, 255, 255, 0.04); color: #8a92a8; border: 1px solid rgba(255, 255, 255, 0.08); }

.game-status {
  font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
  text-align: center; color: #cdd0d8; min-height: 1em;
}

/* Reveal panel */
.reveal-panel {
  background: rgba(13, 27, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px; padding: 1.2rem 1rem; text-align: center;
}
.reveal-banner {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1rem, 2.6vw, 1.3rem); letter-spacing: 0.18em;
  text-transform: uppercase; color: #cdd0d8; margin-bottom: 0.5rem;
}
.reveal-banner.win  { color: var(--win-green); }
.reveal-banner.lose { color: var(--lose-pink); }
.reveal-payout {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 6vw, 3.2rem); font-weight: 700; margin: 0.2rem 0;
}
.reveal-sub { font-size: 0.85rem; margin-top: 0.3rem; }
.reveal-panel .secondary {
  margin-top: 0.8rem; background: transparent;
  border: 1px solid var(--moon-yellow); color: var(--moon-bright);
  padding: 0.5rem 1rem; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer;
}

.game-nav { text-align: center; margin-top: 0.6rem; }
.game-nav a {
  color: #cdd0d8; font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; text-decoration: none; opacity: 0.7;
}
.game-nav a:hover { opacity: 1; color: var(--moon-bright); }

.footer { text-align: center; padding: 1rem; font-size: 0.7rem; opacity: 0.6; }

@media (max-width: 640px) {
  .canvas-wrap { max-height: 48vh; min-height: 260px; }
  .hud-value { font-size: 14px; }
  .keeper-card { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .kc-hint { margin-left: 0; font-size: 0.72rem; }
}