:root{
  /* Panathinaikos-inspired palette */
  --pao-green:#0b6b3a;
  --pao-green-2:#0f8a4a;
  --pao-cream:#f2f1e6;
  --ink:#0b1b12;
  --card:#0f2a1d;
  --card-2:#0e2419;
  --line:rgba(242,241,230,.18);
  --shadow:rgba(0,0,0,.25);

  --rma-gold: #d4af37;
  --rma-navy: #0b2a5b;

  --radius:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--pao-cream);
  background:#07150f;
  overflow-x:hidden;
}

/* Theme tokens (default: Panathinaikos / training) */
body{
  --bg-1: rgba(15,138,74,.35);
  --bg-2: rgba(11,42,91,.25);
  --bg-3: rgba(212,175,55,.18);
  --bg-base-1:#06130d;
  --bg-base-2:#071a12;
  --accent: var(--pao-green-2);
  --accent-2: var(--pao-green);
  --chip: rgba(15,138,74,.24);
}

body.theme-study{
  /* Real Madrid inspired: navy + white + gold */
  --bg-1: rgba(11,42,91,.36);
  --bg-2: rgba(212,175,55,.18);
  --bg-3: rgba(242,241,230,.14);
  --bg-base-1:#061120;
  --bg-base-2:#0a1730;
  --accent: var(--rma-gold);
  --accent-2: var(--rma-navy);
  --chip: rgba(11,42,91,.22);
}

body.theme-play{
  /* PlayStation-ish: deep blue + neon */
  --bg-1: rgba(0,120,255,.25);
  --bg-2: rgba(0,255,198,.10);
  --bg-3: rgba(130,80,255,.10);
  --bg-base-1:#050a16;
  --bg-base-2:#07122a;
  --accent: rgba(0,120,255,.95);
  --accent-2: rgba(0,255,198,.55);
  --chip: rgba(0,120,255,.22);
}

/* Animated wallpaper */
.wallpaper{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background: radial-gradient(1200px 700px at 20% 10%, var(--bg-1), transparent 60%),
              radial-gradient(900px 600px at 85% 20%, var(--bg-2), transparent 55%),
              radial-gradient(900px 700px at 65% 85%, var(--bg-3), transparent 60%),
              linear-gradient(180deg, var(--bg-base-1), var(--bg-base-2));
}
.layer{
  position:absolute;
  inset:-20%;
  opacity:.55;
  filter: blur(.2px);
  transform: translateZ(0);
}
.layer-stars{
  opacity:.30;
  background-image:
    radial-gradient(circle at 10px 10px, rgba(212,175,55,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 30px 40px, rgba(242,241,230,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 80px 60px, rgba(212,175,55,.65) 0 1px, transparent 2px);
  background-size: 120px 120px;
  animation: drift 22s linear infinite;
}
.layer-balls{
  opacity:.35;
  background-image:
    radial-gradient(circle, rgba(242,241,230,.22) 0 12px, transparent 13px),
    radial-gradient(circle, rgba(242,241,230,.16) 0 8px, transparent 9px),
    radial-gradient(circle, rgba(242,241,230,.12) 0 6px, transparent 7px);
  background-size: 220px 220px, 160px 160px, 120px 120px;
  background-position: 0 0, 40px 80px, 90px 20px;
  animation: drift2 18s linear infinite;
}
.layer-stripes{
  opacity:.22;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0) 0 15%, color-mix(in srgb, var(--accent-2) 55%, transparent) 15% 18%, rgba(0,0,0,0) 18% 35%),
    linear-gradient(90deg, rgba(0,0,0,0) 0 55%, color-mix(in srgb, var(--accent) 45%, transparent) 55% 58%, rgba(0,0,0,0) 58% 100%);
  background-size: 260px 260px;
  animation: drift3 26s linear infinite;
}
@keyframes drift { from{ transform: translate3d(0,0,0);} to{ transform: translate3d(-180px, 120px, 0);} }
@keyframes drift2 { from{ transform: translate3d(0,0,0);} to{ transform: translate3d(140px, -160px, 0);} }
@keyframes drift3 { from{ transform: translate3d(0,0,0);} to{ transform: translate3d(-120px, -80px, 0);} }

/* Top bar */
.topbar{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background: linear-gradient(180deg, rgba(7,21,15,.92), rgba(7,21,15,.68));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(242,241,230,.12);
}

.brand{ display:flex; align-items:center; gap:12px; }
.crest{
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent-2) 65%, transparent));
  border:1px solid rgba(242,241,230,.18);
  box-shadow: 0 10px 24px var(--shadow);
  font-size:22px;
}
.brand-text .title{ font-weight:800; letter-spacing:.2px; }
.brand-text .subtitle{ font-size:12px; opacity:.85; }

.week-controls{ display:flex; align-items:center; gap:10px; }
.week-label{ text-align:center; min-width:220px; }
.week-range{ font-weight:800; }
.week-hint{ font-size:11px; opacity:.8; }

.actions{ display:flex; gap:10px; }

/* Buttons */
.btn{
  border:1px solid rgba(242,241,230,.18);
  background: rgba(15,42,29,.55);
  color:var(--pao-cream);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:700;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:hover{ background: rgba(15,42,29,.75); border-color: rgba(242,241,230,.28); }
.btn:active{ transform: translateY(1px); }
.btn-ghost{ background: rgba(15,42,29,.25); }
.btn-danger{ background: rgba(130,36,36,.40); border-color: rgba(255,255,255,.18); }
.btn-danger:hover{ background: rgba(130,36,36,.56); }
.btn-pack{
  background: linear-gradient(135deg, rgba(212,175,55,.30), rgba(15,138,74,.55));
}
.btn-pack:hover{
  background: linear-gradient(135deg, rgba(212,175,55,.42), rgba(15,138,74,.72));
}

/* Layout */
.layout{
  display:grid;
  grid-template-columns: 1.6fr .9fr;
  gap:16px;
  padding:16px;
  align-items:start;
}
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .week-label{ min-width: 180px; }
}

.card{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,42,29,.78), rgba(14,36,25,.70));
  border:1px solid rgba(242,241,230,.14);
  box-shadow: 0 12px 30px var(--shadow);
  overflow:hidden;
}
.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px 14px;
  border-bottom: 1px solid rgba(242,241,230,.10);
}
.card-header h2{ margin:0; font-size:16px; letter-spacing:.2px; }
.legend{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.pill{
  appearance:none;
  border:none;
  cursor:pointer;
  font-size:12px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(242,241,230,.16);
  background: rgba(0,0,0,.15);
  color: var(--pao-cream);
  font-weight:800;
  transition: transform .08s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.pill-training{ background: rgba(15,138,74,.24); }
.pill-study{ background: rgba(11,42,91,.22); }
.pill-play{ background: rgba(212,175,55,.20); }

.pill:hover{ border-color: rgba(242,241,230,.28); }
.pill:active{ transform: translateY(1px); }
.pill.is-active{
  box-shadow: 0 0 0 2px rgba(242,241,230,.08), 0 10px 22px rgba(0,0,0,.25);
  border-color: rgba(242,241,230,.35);
}

/* Theme-aware pill backgrounds */
body.theme-training .pill-training{ background: var(--chip); }
body.theme-study .pill-study{ background: var(--chip); }
body.theme-play .pill-play{ background: var(--chip); }

.table-wrap{
  max-height: 62vh;
  overflow:auto;
  border-top: 1px solid rgba(242,241,230,.06);
}

/* Planner table with locked row/col */
.planner{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 880px;
}
.planner th, .planner td{
  border-right: 1px solid rgba(242,241,230,.10);
  border-bottom: 1px solid rgba(242,241,230,.10);
  padding:8px 10px;
  vertical-align: top;
  background: rgba(0,0,0,.12);
}
.planner th{
  text-align:center;
  font-size:12px;
  letter-spacing:.3px;
  text-transform: uppercase;
  background: rgba(0,0,0,.22);
}
.time-col{
  width:86px;
  text-transform:none !important;
  font-size:12px;
}
.sticky-head{
  position: sticky;
  top: 0;
  z-index: 3;
}
.sticky-col{
  position: sticky;
  left: 0;
  z-index: 2;
  background: rgba(0,0,0,.26) !important;
}
.sticky-col.sticky-head{
  z-index: 4;
  background: rgba(0,0,0,.36) !important;
}

/* Fixed cell height to prevent “breaking columns” */
.planner td{
  height: 56px;
  min-height: 56px;
  font-size:13px;
  line-height:1.2;
}
.cell{
  outline:none;
  width:100%;
  height:100%;
  white-space: pre-wrap;
  word-break: break-word;
}
.cell:focus{
  box-shadow: inset 0 0 0 2px rgba(212,175,55,.35);
  border-radius: 10px;
  background: rgba(0,0,0,.18);
}

/* Inline quick highlight (JS adds these classes) */
.cell.training{ background: rgba(15,138,74,.14); }
.cell.study{ background: rgba(11,42,91,.14); }
.cell.play{ background: rgba(212,175,55,.13); }

.tips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 14px 14px 14px;
  opacity:.92;
}
.tip{ font-size:12px; }

/* Side card */
.card-side .card-header{ align-items:flex-start; }
.coins{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  opacity:.95;
}
.coin-dot{
  color: var(--rma-gold);
  text-shadow: 0 0 14px rgba(212,175,55,.35);
}

.pack-area{
  display:grid;
  gap:10px;
  padding:14px;
  border-bottom: 1px solid rgba(242,241,230,.10);
}
.pack-box{
  height:120px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing: 2px;
  border: 1px solid rgba(242,241,230,.16);
  background:
    radial-gradient(120px 80px at 30% 25%, rgba(212,175,55,.25), transparent 60%),
    radial-gradient(140px 90px at 70% 70%, rgba(11,42,91,.20), transparent 60%),
    linear-gradient(135deg, rgba(15,138,74,.50), rgba(11,107,58,.25));
  box-shadow: 0 10px 24px var(--shadow);
  position:relative;
  overflow:hidden;
}
.pack-box::after{
  content:"";
  position:absolute; inset:-40%;
  background: linear-gradient(90deg, transparent, rgba(242,241,230,.22), transparent);
  transform: rotate(20deg);
  animation: shine 2.4s ease-in-out infinite;
}
@keyframes shine{
  0%{ transform: translateX(-40%) rotate(20deg); opacity:.0;}
  35%{ opacity:.6;}
  100%{ transform: translateX(60%) rotate(20deg); opacity:.0;}
}

.card-reveal{
  padding:14px;
}
.pack-hint{
  font-size:12px;
  opacity:.85;
}

.card-face{
  border-radius: 18px;
  border:1px solid rgba(242,241,230,.16);
  background:
    radial-gradient(140px 100px at 20% 20%, rgba(212,175,55,.28), transparent 60%),
    radial-gradient(180px 120px at 85% 35%, rgba(11,42,91,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.28));
  padding:12px 12px 10px 12px;
  box-shadow: 0 12px 26px var(--shadow);
  transform: translateY(4px);
  animation: pop .18s ease-out;
}
@keyframes pop{
  from{ transform: translateY(10px) scale(.98); opacity:0; }
  to{ transform: translateY(4px) scale(1); opacity:1; }
}
.hidden{ display:none; }

.card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.rating{
  font-weight:900;
  font-size:28px;
  color: var(--rma-gold);
  text-shadow: 0 0 18px rgba(212,175,55,.22);
}
.pos{
  font-weight:900;
  letter-spacing:.5px;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(11,42,91,.32);
  border:1px solid rgba(242,241,230,.12);
}
.card-mid{ padding:10px 0 8px 0; }
.player-name{ font-weight:900; font-size:16px; letter-spacing:.2px; }
.clubs{ display:flex; gap:8px; margin-top:8px; }
.tag{
  font-size:11px;
  padding:5px 9px;
  border-radius: 999px;
  border:1px solid rgba(242,241,230,.14);
}
.tag-pao{ background: rgba(15,138,74,.22); }
.tag-rma{ background: rgba(11,42,91,.24); }

.card-bottom{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-end;
  opacity:.92;
}
.rarity{ font-weight:900; }
.tiny{ font-size:11px; opacity:.85; }

.history{
  padding: 0 14px 14px 14px;
}
.history h3{
  margin: 12px 0 8px 0;
  font-size: 13px;
}
.history-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}
.history-list li{
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid rgba(242,241,230,.12);
  background: rgba(0,0,0,.14);
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.history-list .mini{
  opacity:.85;
  font-size:11px;
}

.footer{
  padding: 14px 16px 24px 16px;
  opacity:.8;
  font-size:12px;
  text-align:center;
}