/* ════════════════════════════════════════════════════════════════
   PITCH LEGENDS v2 — Styles (Football Action Update)
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&display=swap');

:root {
  --primary: #00d4ff; --accent: #ffd700; --bg: #0a0a18;
  --surface: rgba(14,14,30,0.92); --success: #00ff88;
  --danger: #ff2255; --warn: #ffaa00; --radius: 10px;
}
*,*::before,*::after { margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent; }
body { font-family:'Rajdhani',sans-serif; background:var(--bg); color:#e8e8ff; overflow:hidden; height:100dvh; touch-action:none; }
h1,h2,h3 { font-family:'Orbitron',sans-serif; text-transform:uppercase; letter-spacing:2px; }

/* ── Rotate Prompt ─────────────────────────────────────────── */
#rotate-prompt {
  display:none; position:fixed; inset:0; z-index:9999; background:#0a0a18;
  flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center;
}
#rotate-prompt .rot-icon { font-size:4rem; animation:spin90 1.5s ease-in-out infinite alternate; }
@keyframes spin90 { from{transform:rotate(0)} to{transform:rotate(90deg)} }
#rotate-prompt p { font-family:'Orbitron',sans-serif; font-size:.8rem; letter-spacing:2px; }

/* ── Screens ───────────────────────────────────────────────── */
.screen { position:fixed; inset:0; display:none; flex-direction:column; background:var(--bg); overflow:hidden; }
.screen.active { display:flex; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(0,212,255,.1); border:2px solid var(--primary); color:#e8e8ff;
  padding:12px 20px; font-family:'Orbitron',sans-serif; font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1.5px; cursor:pointer; border-radius:var(--radius);
  transition:all .2s; width:100%;
}
.btn:active { transform:scale(.96); }
.btn:disabled { opacity:.35; cursor:not-allowed; }
.btn-primary { background:linear-gradient(135deg,var(--primary),#0099cc); border:none; box-shadow:0 0 16px rgba(0,212,255,.3); }
.btn-lg { padding:16px 24px; font-size:.8rem; }

/* ── Title Screen ──────────────────────────────────────────── */
.title-content {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  background: radial-gradient(ellipse at 50% 40%,rgba(0,212,255,.08) 0%,transparent 60%),
              radial-gradient(ellipse at 30% 70%,rgba(255,215,0,.05) 0%,transparent 50%);
}
.title-logo { text-align:center; animation:floatY 3s ease-in-out infinite; }
.title-main { font-size:2.4rem; color:var(--primary); text-shadow:0 0 30px rgba(0,212,255,.5); }
.title-accent { font-size:3.2rem; color:var(--accent); text-shadow:0 0 30px rgba(255,215,0,.5); margin-top:-8px; }
.title-sub { font-size:.75rem; letter-spacing:4px; opacity:.5; margin-top:4px; }
.title-content .btn { max-width:280px; }
.version-text { font-size:.6rem; opacity:.3; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ── Setup Screen ──────────────────────────────────────────── */
.setup-scroll { flex:1; overflow-y:auto; padding:12px 16px; -webkit-overflow-scrolling:touch; }
.setup-title { font-size:.9rem; color:var(--primary); text-align:center; margin-bottom:12px; }
.setup-section { margin-bottom:14px; }
.section-label { font-size:.65rem; letter-spacing:2px; opacity:.6; margin-bottom:8px; }
.setup-row { display:flex; gap:10px; }
.input-group { flex:1; }
.input-group label { display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:1px; opacity:.6; margin-bottom:4px; }
.input-group input {
  width:100%; background:rgba(0,0,0,.5); border:2px solid rgba(0,212,255,.3); color:#e8e8ff;
  padding:10px 12px; border-radius:8px; font-family:'Orbitron',sans-serif; font-size:.75rem;
  text-transform:uppercase; outline:none; transition:border-color .2s;
}
.input-group input:focus { border-color:var(--primary); }
.input-sm { max-width:80px; }
.input-sm input { text-align:center; }

.power-grid { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.power-card {
  flex:0 0 auto; width:130px; padding:10px 8px; border-radius:var(--radius);
  border:2px solid rgba(255,255,255,.12); background:rgba(0,0,0,.3);
  text-align:center; cursor:pointer; transition:all .2s; font-size:.68rem;
}
.power-card:active { transform:scale(.96); }
.power-card.selected { border-color:var(--accent); background:rgba(255,215,0,.08); box-shadow:0 0 12px rgba(255,215,0,.2); }
.power-card .pw-icon { font-size:1.6rem; margin-bottom:4px; }
.power-card .pw-name { font-weight:700; text-transform:uppercase; font-size:.65rem; }
.power-card .pw-desc { opacity:.6; font-size:.58rem; margin-top:3px; line-height:1.3; }

.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.team-card {
  padding:10px 6px; border-radius:var(--radius); border:2px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.3); text-align:center; cursor:pointer; transition:all .2s;
}
.team-card:active { transform:scale(.96); }
.team-card.selected { border-color:var(--primary); box-shadow:0 0 12px rgba(0,212,255,.3); }
.team-card .tc-badge { width:32px; height:32px; border-radius:50%; margin:0 auto 6px; border:2px solid rgba(255,255,255,.2); }
.team-card .tc-name { font-size:.6rem; font-weight:700; text-transform:uppercase; }
.team-card .tc-style { font-size:.5rem; opacity:.5; }

.diff-row { display:flex; gap:8px; }
.diff-btn {
  flex:1; padding:10px; border-radius:8px; border:2px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.3); color:#e8e8ff; font-family:' Rajdhani',sans-serif;
  font-size:.65rem; font-weight:700; cursor:pointer; transition:all .2s; text-align:center;
}
.diff-btn.selected { border-color:var(--primary); background:rgba(0,212,255,.1); box-shadow:0 0 10px rgba(0,212,255,.3); }

/* ── Bracket Screen ────────────────────────────────────────── */
.bracket-title { text-align:center; font-size:.85rem; color:var(--primary); padding:12px 0 8px; }
.bracket-container { flex:1; overflow-y:auto; padding:8px 16px; }
.bracket-round { margin-bottom:12px; }
.bracket-round-label { font-size:.6rem; text-transform:uppercase; letter-spacing:2px; opacity:.5; margin-bottom:6px; text-align:center; }
.bracket-match {
  display:flex; align-items:center; gap:8px; padding:8px 12px; margin-bottom:6px;
  background:var(--surface); border:1px solid rgba(255,255,255,.1); border-radius:8px;
}
.bracket-match.current { border-color:var(--primary); box-shadow:0 0 10px rgba(0,212,255,.2); }
.bracket-match.done { opacity:.6; }
.bm-team { flex:1; font-size:.72rem; font-weight:600; display:flex; align-items:center; gap:6px; }
.bm-vs { font-size:.6rem; opacity:.4; flex-shrink:0; }
.bm-score { font-family:'Orbitron',sans-serif; font-size:.7rem; color:var(--accent); }
.bm-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ── Match Screen ──────────────────────────────────────────── */
#screen-match { padding:0; background:#071a10; }
#match-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

.match-hud {
  position:absolute; top:0; left:0; right:0; z-index:10; pointer-events:none;
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 12px;
}
.hud-team { display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.6); padding:5px 10px; border-radius:6px; }
.hud-color { width:12px; height:12px; border-radius:50%; border:1px solid rgba(255,255,255,.3); }
.hud-name { font-size:.65rem; font-weight:700; letter-spacing:1px; }
.hud-score { font-family:'Orbitron',sans-serif; font-size:1.2rem; font-weight:900; }
.card-icons { display:flex; gap:2px; }
.card-icon { width:8px; height:12px; border-radius:2px; display:inline-block; }
.card-yellow { background:var(--warn); border:1px solid rgba(0,0,0,.5); }
.card-red { background:var(--danger); border:1px solid rgba(0,0,0,.5); }

.hud-center { text-align:center; background:rgba(0,0,0,.6); padding:4px 14px; border-radius:6px; }
.hud-timer { font-family:'Orbitron',sans-serif; font-size:1rem; font-weight:700; }
.hud-half { font-size:.55rem; opacity:.6; text-transform:uppercase; letter-spacing:1px; }
.mentality-badge {
  display:inline-block; font-size:.6rem; font-weight:800; padding:2px 6px; border-radius:4px;
  background:rgba(0,255,136,.2); color:#00ff88; border:1px solid rgba(0,255,136,.3);
  margin-top:4px; cursor:pointer; letter-spacing:1px; pointer-events:auto;
}
.mentality-badge.defensive { background:rgba(0,136,255,.2); color:#0088ff; border-color:rgba(0,136,255,.3); }
.mentality-badge.attacking { background:rgba(255,34,85,.2); color:#ff2255; border-color:rgba(255,34,85,.3); animation:pulseGlow 1.5s infinite; }
@keyframes pulseGlow { 0%,100%{opacity:1} 50%{opacity:0.6} }

.star-power-hud {
  position:absolute; top:46px; left:12px; z-index:10;
  display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.6);
  padding:4px 8px; border-radius:6px; cursor:pointer; pointer-events:auto;
  border:1px solid rgba(255,215,0,.2); transition:all .2s;
}
.star-power-hud.ready { border-color:var(--accent); box-shadow:0 0 10px rgba(255,215,0,.4); animation:spPulse 1s infinite; }
.star-power-hud.active-power { border-color:var(--success); box-shadow:0 0 14px rgba(0,255,136,.4); }
@keyframes spPulse { 0%,100%{opacity:1} 50%{opacity:.7} }
.sp-icon { font-size:1rem; }
.sp-bar-wrap { width:50px; height:6px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; }
.sp-bar { height:100%; background:var(--accent); border-radius:3px; width:0%; transition:width .3s; }

.stamina-hud {
  position:absolute; top:48px; left:16px; z-index:20;
  display:flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.5); padding:4px 8px; border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
}
.st-icon { font-size:.8rem; }
.st-bar-wrap { width:40px; height:4px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.st-bar { height:100%; background:#00ff88; width:100%; transition:width .2s, background .3s; }

.center-msg {
  position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); z-index:20;
  font-family:'Orbitron',sans-serif; font-size:1.2rem; font-weight:700; color:#fff;
  text-shadow:0 0 20px rgba(0,0,0,.8),0 0 40px rgba(0,212,255,.4);
  letter-spacing:3px; pointer-events:none; opacity:0; transition:opacity .3s;
  text-align:center;
}
.center-msg.show { opacity:1; }

.match-ticker {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:10;
  background:rgba(0,0,0,.6); padding:4px 12px; border-radius:12px;
  font-size:.65rem; color:#fff; font-weight:600; text-transform:uppercase;
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.match-ticker.show { opacity:1; }

/* Virtual Joystick */
.joystick-zone {
  position:absolute; left:0; top:0; bottom:0; width:45%; z-index:15;
  pointer-events:auto; touch-action:none;
}
.joystick-base {
  display:none; position:absolute; width:100px; height:100px;
  border:2px solid rgba(255,255,255,.15); border-radius:50%;
  background:rgba(0,0,0,.2); pointer-events:none;
}
.joystick-thumb {
  position:absolute; width:40px; height:40px; border-radius:50%;
  background:rgba(0,212,255,.35); border:2px solid rgba(0,212,255,.5);
  left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none;
}

/* Action Buttons */
.action-buttons {
  position:absolute; bottom:16px; right:16px; z-index:15;
  display:flex; gap:12px; align-items:flex-end; pointer-events:auto;
}
.action-btn {
  border:none; border-radius:50%; cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-family:'Orbitron',sans-serif;
  font-weight:700; text-transform:uppercase; color:#fff; transition:transform .1s;
  touch-action:none; -webkit-user-select:none; user-select:none;
}
.action-btn:active { transform:scale(.9); }
.act-a { width:72px; height:72px; background:radial-gradient(circle,#0088ff,#0055cc); box-shadow:0 0 16px rgba(0,100,255,.4); font-size:.7rem; }
.act-b { width:60px; height:60px; background:radial-gradient(circle,#00cc66,#008844); box-shadow:0 0 12px rgba(0,200,100,.3); font-size:.6rem; }
.act-label { pointer-events:none; }

/* ── Result Screen ─────────────────────────────────────────── */
.result-content {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:20px;
  background:radial-gradient(ellipse at 50% 40%,rgba(0,212,255,.06) 0%,transparent 60%);
}
.result-badge { font-size:3rem; animation:floatY 2s ease-in-out infinite; }
.result-title { font-family:'Orbitron',sans-serif; font-size:1.6rem; font-weight:900; letter-spacing:3px; }
.result-score-line { font-family:'Orbitron',sans-serif; font-size:2.8rem; font-weight:900; }
.result-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:300px; width:100%;
  margin:8px 0; font-size:.72rem;
}
.rs-item { display:flex; justify-content:space-between; padding:4px 8px; background:rgba(255,255,255,.04); border-radius:4px; }
.match-xp-box { background:rgba(0,255,136,.1); border:1px solid var(--success); padding:8px 16px; border-radius:8px; margin-bottom:8px; text-align:center; }
.mxp-title { font-size:.65rem; color:var(--success); letter-spacing:1px; margin-bottom:4px; text-transform:uppercase; }
.mxp-val { font-family:'Orbitron',sans-serif; font-size:1.2rem; font-weight:700; }
.result-content .btn { max-width:280px; }

/* ── Champion Screen ───────────────────────────────────────── */
.champion-content {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:20px;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,215,0,.1) 0%,transparent 60%);
}
.trophy-anim { font-size:5rem; animation:trophyBounce 1.5s ease-in-out infinite; }
@keyframes trophyBounce { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-12px) scale(1.1)} }
.champion-title { font-size:2rem; color:var(--accent); text-shadow:0 0 30px rgba(255,215,0,.5); }
.champion-team { font-size:1rem; opacity:.7; }
.champion-stats { font-size:.75rem; text-align:center; line-height:1.8; opacity:.6; }
.champion-content .btn { max-width:280px; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:2px; }

/* ── Small screens ─────────────────────────────────────────── */
@media (max-height:360px) {
  .match-hud { padding:3px 8px; }
  .hud-score { font-size:1rem; }
  .hud-timer { font-size:.85rem; }
  .action-btn.act-a { width:60px; height:60px; font-size:.6rem; }
  .action-btn.act-b { width:50px; height:50px; font-size:.55rem; }
}

/* ── Economy & Shop UI ─────────────────────────────────────── */
.coin-display-global {
  position:absolute; top:12px; right:16px; z-index:100;
  background:rgba(0,0,0,.6); padding:6px 12px; border-radius:20px;
  border:1px solid rgba(255,215,0,.3); color:var(--accent);
  font-family:'Orbitron',sans-serif; font-size:.8rem; font-weight:700;
  display:flex; align-items:center; gap:6px; pointer-events:none;
}
.main-title-coins { top:16px; right:16px; }
.coin-display-setup { position:static; align-self:center; margin-bottom:12px; width:fit-content; margin:0 auto 12px; }

.bracket-actions { display:flex; gap:10px; padding:12px 16px; }

/* Shop Screen */
#screen-shop { background:radial-gradient(circle at 50% 10%, #1a1a2e 0%, #0a0a18 100%); }
.shop-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; background:rgba(0,0,0,.4); border-bottom:1px solid rgba(255,255,255,.05);
}
.shop-title { font-size:1rem; color:var(--accent); text-shadow:0 0 15px rgba(255,215,0,.3); margin:0; }
.back-btn {
  background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer;
  padding:8px; line-height:1;
}

.shop-container {
  flex:1; overflow-y:auto; padding:16px;
  display:grid; grid-template-columns:1fr; gap:12px;
}
.shop-item {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:14px; display:flex; align-items:center; gap:12px;
}
.si-icon {
  width:44px; height:44px; background:rgba(0,212,255,.1); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0;
}
.si-info { flex:1; }
.si-name { font-family:'Orbitron',sans-serif; font-size:.7rem; font-weight:700; margin-bottom:2px; }
.si-desc { font-size:.55rem; opacity:.5; line-height:1.2; }
.si-lv { font-size:.5rem; color:var(--primary); margin-top:2px; font-weight:700; }

.si-buy {
  background:rgba(255,215,0,.1); border:1px solid var(--accent);
  color:var(--accent); padding:6px 10px; border-radius:8px;
  font-family:'Orbitron',sans-serif; font-size:.6rem; font-weight:700;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; min-width:65px;
}
.si-buy:active { transform:scale(.95); }
.si-buy:disabled { opacity:.2; filter:grayscale(1); cursor:not-allowed; }
.si-cost { font-size:.5rem; opacity:.8; margin-top:1px; }

.shop-footer { padding:12px; text-align:center; border-top:1px solid rgba(255,255,255,.05); }
.shop-tip { font-size:.55rem; opacity:.4; font-style:italic; }

@media (min-width: 600px) {
  .shop-container { grid-template-columns: 1fr 1fr; }
}
.coin-display-shop {
  background:rgba(0,0,0,.4); padding:4px 10px; border-radius:15px;
  border:1px solid var(--accent); color:var(--accent);
  font-family:'Orbitron',sans-serif; font-size:.7rem; font-weight:700;
  display:flex; align-items:center; gap:4px;
}

/* ── Modal & Setup Lists ───────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(4px);
}
.modal-overlay.active { display:flex; }
.modal-content {
  background:var(--surface); border:2px solid var(--primary); border-radius:16px;
  width:100%; max-width:500px; display:flex; flex-direction:column;
  box-shadow:0 0 40px rgba(0,0,0,1); animation:modalSlide .3s ease-out;
}
@keyframes modalSlide { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

.modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid rgba(255,255,255,0.1); }
.modal-title { font-size:.9rem; color:var(--primary); margin:0; }
.modal-close { background:none; border:none; color:#fff; font-size:1.2rem; cursor:pointer; opacity:.5; }

.sub-columns { display:flex; gap:16px; padding:16px; flex:1; }
.sub-col { flex:1; display:flex; flex-direction:column; gap:8px; }
.col-label { font-size:.6rem; opacity:.5; letter-spacing:1.5px; margin-bottom:4px; text-align:center; }

.sub-list { display:flex; flex-direction:column; gap:8px; }
.sub-item {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  padding:10px; border-radius:8px; cursor:pointer; transition:all .2s;
  display:flex; justify-content:space-between; align-items:center;
}
.sub-item:active { transform:scale(.97); }
.sub-item.selected { border-color:var(--accent); background:rgba(255,215,0,0.1); box-shadow:0 0 10px rgba(255,215,0,0.2); }
.sub-item-info { display:flex; flex-direction:column; }
.si-name { font-size:.72rem; font-weight:700; }
.si-role { font-size:.55rem; opacity:.5; }
.si-stamina { width:40px; height:4px; background:rgba(255,255,255,0.1); border-radius:2px; margin-top:4px; overflow:hidden; }
.si-stamina-bar { height:100%; }

.modal-footer { padding:16px; border-top:1px solid rgba(255,255,255,0.1); text-align:center; }
.sub-hint { font-size:.55rem; opacity:.4; font-style:italic; margin-bottom:12px; }

@media (max-width: 480px) {
  .sub-columns { flex-direction:column; overflow-y:auto; max-height:300px; }
}