* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background:#18251c; color:#f5f5f0; }
.app { max-width: 1280px; margin: 0 auto; padding: 18px; }
.topbar { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:14px; }
h1 { margin:0; font-size:28px; }
p { line-height:1.35; }
.scoreboard { display:flex; gap:10px; align-items:center; }
.team, .turn { background:#101811; border:2px solid #405843; border-radius:14px; padding:10px 18px; min-width:110px; text-align:center; }
.team strong { display:block; font-size:34px; }
.team small { display:block; opacity:.8; }
.blue { border-color:#4ea1ff; }
.red { border-color:#ff5b5b; }
.turn { min-width:150px; font-weight:800; color:#ffe58f; }
.game-wrap { display:grid; grid-template-columns:minmax(600px, 1fr) 310px; gap:16px; align-items:start; }
.board-stage { width:100%; perspective:1100px; padding:18px 12px 38px; }
canvas { width:100%; height:auto; background:#1f6d38; border:10px solid #0b120d; border-radius:20px; box-shadow:0 18px 0 #0a0f0b, 0 34px 42px rgba(0,0,0,.55); cursor:crosshair; transform:rotateX(12deg); transform-origin:center bottom; }
.panel { background:#101811; border:2px solid #405843; border-radius:18px; padding:16px; }
.panel h2 { margin:14px 0 8px; font-size:18px; }
.panel h2:first-child { margin-top:0; }
button { width:100%; margin:5px 0; padding:10px; border:0; border-radius:10px; font-weight:800; cursor:pointer; background:#e6e0c8; color:#111; }
button:hover { filter:brightness(1.08); }
ul { padding-left:20px; margin-top:6px; }
li { margin:6px 0; font-size:14px; }
.log { margin-top:12px; background:#0b100c; border-radius:10px; min-height:88px; padding:10px; font-size:13px; white-space:pre-wrap; color:#d8e8d4; }
@media (max-width: 980px) { .topbar, .game-wrap { grid-template-columns:1fr; display:block; } .scoreboard { margin-top:12px; } .panel { margin-top:14px; } .board-stage { padding:0; perspective:none; } canvas { transform:none; } }

canvas { touch-action: none; }
button { touch-action: manipulation; }
.hidden { display: none !important; }
.screen-card { max-width: 760px; margin: 42px auto; background:#101811; border:2px solid #405843; border-radius:22px; padding:28px; box-shadow:0 22px 42px rgba(0,0,0,.35); }
.intro-screen { text-align:center; padding:46px 28px; }
.intro-screen h1, .setup-screen h1 { font-size:40px; margin-bottom:10px; }
.primary-btn { width:auto; min-width:190px; padding:12px 24px; background:#ffe58f; margin-top:14px; }
.setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
.setup-box { background:#0b100c; border:1px solid #405843; border-radius:16px; padding:16px; }
.setup-box h2 { margin-top:0; }
label { display:block; margin:10px 0 6px; font-weight:800; color:#d8e8d4; }
select { width:100%; padding:10px; border-radius:10px; border:2px solid #405843; background:#e6e0c8; color:#111; font-weight:800; }
.toggle-row { display:flex; align-items:center; gap:10px; margin:14px 0; }
.toggle-row input { width:20px; height:20px; }
@media (max-width: 700px) { .setup-grid { grid-template-columns:1fr; } }

.color-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width: 700px) { .color-row { grid-template-columns:1fr; } }

body {
  background:
    radial-gradient(circle at 50% 18%, rgba(58, 130, 78, .35), transparent 36%),
    linear-gradient(180deg, #101b14 0%, #061009 100%);
}
canvas {
  box-shadow:
    0 18px 0 #070b08,
    0 34px 42px rgba(0,0,0,.68),
    0 0 55px rgba(39,150,84,.2);
}

.team-select-row { display:grid; grid-template-columns:1fr 72px; gap:10px; align-items:end; }
.flag-preview { height:44px; border:2px solid #405843; border-radius:10px; overflow:hidden; background:#111; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.flag-preview svg, .flag-preview img { width:100%; height:100%; display:block; }
select.color-select { color: transparent; text-shadow: none; background-image: linear-gradient(var(--swatch-color), var(--swatch-color)); background-size: calc(100% - 20px) 18px; background-repeat:no-repeat; background-position:center; }
select.color-select option { color:#111; }

.match-rules-box { margin-top:16px; }
.score-flag { width:52px; height:30px; margin:0 auto 6px; border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,.35); }
.score-flag svg, .score-flag img { width:100%; height:100%; display:block; }
.turn small { display:block; margin-top:4px; font-size:12px; color:#d8e8d4; }

.app { max-width: 1500px; }
.game-wrap { grid-template-columns:minmax(850px, 1fr) 330px; gap:28px; }
.board-stage { padding:10px 6px 34px; }
@media (min-width: 981px) {
  canvas { width: min(100%, 1120px); }
  .panel { margin-left: 10px; }
}

input[type="range"] { width:100%; accent-color:#ffe58f; }

.splash-screen, .title-screen {
  min-height: calc(100vh - 36px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  background:#02040a;
  border-radius:24px;
  overflow:hidden;
}
.brand-logo { max-width:min(78vw, 680px); max-height:70vh; object-fit:contain; animation:logoFade 2.2s ease both; }
.title-art { width:min(100%, 1180px); max-height:78vh; object-fit:contain; border-radius:18px; box-shadow:0 22px 60px rgba(0,0,0,.55); }
.press-start {
  margin-top:18px;
  padding:12px 24px;
  border-radius:999px;
  background:rgba(0,0,0,.65);
  border:2px solid rgba(255,255,255,.35);
  color:#fff6c8;
  font-weight:900;
  letter-spacing:.04em;
  animation:pressPulse 1.1s ease-in-out infinite;
  cursor:pointer;
}
@keyframes logoFade { 0%{opacity:0; transform:scale(.96)} 18%{opacity:1; transform:scale(1)} 82%{opacity:1} 100%{opacity:0} }
@keyframes pressPulse { 0%,100%{opacity:.45; transform:scale(1)} 50%{opacity:1; transform:scale(1.03)} }

.mode-screen {
  min-height: calc(100vh - 36px);
  display:flex;
  align-items:center;
  justify-content:center;
  background: url("assets/images/FlickSoccerMenu.png") center center / cover no-repeat;
  border-radius:24px;
  overflow:hidden;
  position:relative;
  box-shadow:0 22px 60px rgba(0,0,0,.55);
}
.mode-screen::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.22), rgba(0,0,0,.70));
}
.mode-overlay {
  position:relative;
  width:min(92vw, 720px);
  padding:28px;
  border-radius:24px;
  background:rgba(5,10,14,.68);
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 18px 48px rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}
.mode-overlay h1 {
  text-align:center;
  font-size:42px;
  margin-bottom:22px;
  color:#fff6c8;
  text-shadow:0 3px 0 #000;
}
.mode-menu { display:grid; gap:12px; }
.mode-option {
  width:100%;
  padding:15px 20px;
  border-radius:16px;
  border:2px solid rgba(255,255,255,.22);
  background:linear-gradient(90deg, rgba(11,42,83,.92), rgba(122,24,24,.82));
  color:#fff;
  font-size:21px;
  font-weight:900;
  text-align:left;
  letter-spacing:.02em;
}
.mode-option.available:hover {
  transform:translateY(-1px) scale(1.01);
  filter:brightness(1.18);
}
.mode-option.disabled {
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.35);
}
.mode-option span {
  float:right;
  font-size:14px;
  color:#ffe58f;
  margin-top:4px;
}

.setup-screen {
  background:
    linear-gradient(rgba(5,10,14,.78), rgba(5,10,14,.78)),
    url("assets/images/FlickSoccerMenu.png") center center / cover no-repeat;
  max-width: 860px;
}
.secondary-btn {
  width:auto;
  min-width:190px;
  padding:12px 24px;
  background:#e6e0c8;
  margin-top:8px;
}

.title-screen { position:relative; }
.title-bg-art { width:min(100%, 1180px); max-height:82vh; object-fit:contain; }
.title-text-art {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -52%);
  width:min(62vw, 640px);
  max-height:45vh;
  object-fit:contain;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.75));
  animation:titleTextPop .5s ease both;
}
.title-screen .press-start {
  position:absolute;
  bottom:38px;
  left:50%;
  transform:translateX(-50%);
}
@keyframes titleTextPop { from { opacity:0; transform:translate(-50%,-52%) scale(.92); } to { opacity:1; transform:translate(-50%,-52%) scale(1); } }


.volley-hud {
  width: 350px;
  margin: 0 auto 10px auto;
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 16px;
  background: rgba(12, 16, 22, .82);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  text-align: center;
}
.volley-title {
  font-weight: 900;
  color: #fff6c8;
  margin-bottom: 6px;
}
.volley-button {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #e6e0c8;
  color: #111;
}
.volley-button:disabled {
  opacity: .7;
  cursor: not-allowed;
}
.volley-button.ready {
  background: #bfffd4;
}
.volley-button.active {
  background: #ffe58f;
}
.volley-ball-icon {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f7f1df;
  border: 3px solid #1b2230;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.10);
}
.volley-ball-icon span {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #222;
}
.volley-ball-icon span:first-child { width: 8px; height: 8px; left: 12px; top: 10px; }
.volley-ball-icon span:last-child { width: 10px; height: 10px; right: 10px; bottom: 11px; }
@media (max-width: 980px) {
  .volley-hud { width: min(100%, 350px); }
}

.power-hud-row {
  display: flex !important;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin: 0 auto 10px auto;
  flex-wrap: wrap;
  min-height: 112px;
  position: relative;
  z-index: 5;
}
.power-hud-row.hidden { display: flex !important; }
.curve-hud {
  width: 300px;
  min-height: 88px;
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 16px;
  background: rgba(12, 16, 22, .82);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  text-align: center;
}
.curve-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.curve-buttons button {
  margin: 0;
  padding: 9px 6px;
  border-radius: 10px;
}
.curve-buttons button.active {
  background: #ffe58f;
  color: #111;
}
.curve-status {
  margin-top: 7px;
  color: #fff6c8;
  font-size: 13px;
  font-weight: 800;
}
.power-hud-row .volley-hud { margin: 0; }


.coin-toss-screen {
  max-width: 900px;
  text-align: center;
  background:
    linear-gradient(rgba(5,10,14,.82), rgba(5,10,14,.82)),
    url("assets/images/FlickSoccerMenu.png") center center / cover no-repeat;
}
.coin-intro { color: #d8e8d4; margin: 8px auto 20px; }
.coin-match-row {
  display: grid;
  grid-template-columns: 1fr 170px 1fr;
  gap: 18px;
  align-items: center;
  margin: 18px 0;
}
.coin-team-card {
  border: 2px solid #405843;
  border-radius: 18px;
  background: rgba(11,16,12,.88);
  padding: 18px;
  min-height: 138px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.coin-team-card strong { font-size: 26px; color: #fff6c8; }
.coin-team-card span { font-weight: 900; color: #ffe58f; }
.coin-visual {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 58px;
  font-weight: 1000;
  color: #231b05;
  background: radial-gradient(circle at 35% 28%, #fff2aa, #d6a93b 58%, #755014 100%);
  border: 8px solid #ffe58f;
  box-shadow: 0 18px 32px rgba(0,0,0,.45), inset 0 -12px 0 rgba(0,0,0,.18);
  text-shadow: 0 2px 0 rgba(255,255,255,.35);
}
.coin-visual.tossing { animation: coinFlip .16s linear infinite; }
.coin-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px auto;
  max-width: 560px;
}
.coin-choice-row button.active { background: #ffe58f; }
.coin-status {
  min-height: 30px;
  font-size: 18px;
  font-weight: 900;
  color: #fff6c8;
  margin: 10px 0;
}
#coinTossBtn:disabled { opacity: .55; cursor: not-allowed; }
@keyframes coinFlip {
  0% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(90deg) scale(1.08); }
  100% { transform: rotateY(180deg) scale(1); }
}
@media (max-width: 760px) {
  .coin-match-row { grid-template-columns: 1fr; }
  .coin-choice-row { grid-template-columns: 1fr; }
}


.goalie-ai-hud {
  min-width: 230px;
  max-width: 330px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(126, 236, 255, .45);
  background: linear-gradient(180deg, rgba(18, 38, 58, .92), rgba(9, 19, 34, .92));
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  color: #eaffff;
}
.goalie-ai-title {
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  color: #7eecff;
  margin-bottom: 5px;
}
.goalie-ai-status {
  font-size: 13px;
  line-height: 1.3;
  color: #f7fbff;
}
.goalie-ai-hud.hidden { display: none; }

.edit-screen { max-width: 980px; }
.edit-note { color:#dfe8d1; margin-top: -4px; }
.edit-filter-grid { display:grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap:14px; margin:18px 0; }
.edit-filter-grid label, .team-editor-panel label { display:grid; gap:7px; color:#fff6c8; font-weight:900; }
.edit-filter-grid select, .team-editor-panel input, .team-editor-panel select { width:100%; padding:12px 14px; border-radius:10px; border:2px solid #bfd0b4; background:#ece6cf; color:#0b100c; font-weight:800; }
.team-editor-panel { display:grid; gap:16px; padding:14px; background:#101811; border:1px solid #405843; border-radius:14px; margin:18px 0; }
.edit-locked-name { padding:12px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid #405843; }
.edit-locked-name strong { display:block; color:#8ff1ff; font-size:1.1rem; }
.edit-locked-name small { display:block; color:#dfe8d1; opacity:.82; margin-top:4px; }
.edit-color-section h3 { margin:0 0 10px; color:#8ff1ff; }
.edit-color-grid { display:grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap:10px; }
.edit-color-check { display:flex !important; grid-template-columns:none !important; align-items:center; gap:8px !important; padding:9px 10px; border:1px solid #405843; border-radius:10px; background:rgba(0,0,0,.18); color:#f7f3dd !important; font-size:.92rem; }
.edit-color-check input { width:auto; }
.color-swatch { width:24px; height:16px; border:2px solid rgba(255,255,255,.7); border-radius:4px; display:inline-block; }
.edit-default-colors { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.edit-actions { display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width: 900px) { .edit-filter-grid, .edit-color-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); } }
@media (max-width: 640px) { .edit-filter-grid, .edit-color-grid, .edit-default-colors { grid-template-columns:1fr; } }

.team-emblem-img { width:100%; height:100%; display:block; object-fit:contain; background:#101811; }
.edit-emblem-section { display:grid; gap:10px; padding:12px; border:1px solid #405843; border-radius:12px; background:rgba(255,255,255,.035); }
.edit-emblem-section h3 { margin:0; color:#fff6c8; }
.edit-emblem-row { display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; }
.edit-emblem-preview { width:96px; height:96px; border:2px solid #bfd0b4; border-radius:14px; background:#0b100c; overflow:hidden; display:grid; place-items:center; }
.edit-emblem-preview svg, .edit-emblem-preview img { width:100%; height:100%; display:block; object-fit:contain; }
.edit-emblem-controls { display:grid; gap:9px; }
.edit-emblem-controls small { color:#d8e0ce; line-height:1.35; }


.formation-default-info {
  margin-top: 6px;
  color: #ffe58f;
  font-size: 0.88rem;
  font-weight: 700;
}

.edit-default-formation {
  margin-top: 14px;
  display: grid;
  gap: 6px;
}

.edit-default-formation small {
  color: #d8f8d3;
  opacity: 0.88;
}

.edit-field-logo-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #405843;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.edit-field-logo-section h3 { margin: 0; color: #fff6c8; }
.edit-empty-preview { color: #d8e0ce; opacity: .75; font-size: .82rem; text-align: center; padding: 6px; }
#editFieldLogoOpacity { width: 100%; }
#editFieldLogoOpacityLabel { color: #ffe58f; font-weight: 800; }

.team-difficulty-info, .team-difficulty-readout {
  margin-top: 6px;
  color: #ffe58f;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.team-stars {
  color: #ffd34d;
  text-shadow: 0 1px 0 #5d3e00, 0 0 6px rgba(255,211,77,.45);
  white-space: nowrap;
}

/* 29T: Match screen compact full-screen layout polish */
#gameScreen {
  position: relative;
  min-height: calc(100vh - 36px);
}
#gameScreen .topbar {
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 6px;
  min-height: 86px;
  padding-right: 390px;
}
#gameScreen .scoreboard {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
#gameScreen .scoreboard .team,
#gameScreen .scoreboard .turn {
  padding: 8px 16px;
}
#gameScreen .scoreboard .team strong {
  font-size: 32px;
}
#gameScreen .score-flag {
  width: 50px;
  height: 29px;
}
#gameScreen .power-hud-row {
  width: calc(100% - 380px);
  margin: -4px 0 4px 0;
  min-height: 0;
  justify-content: center;
  align-items: stretch;
}
#gameScreen .game-wrap {
  display: block;
  padding-right: 380px;
}
#gameScreen .board-stage {
  width: 100%;
  max-width: 1180px;
  padding: 0 6px 22px;
  margin-top: -2px;
}
#gameScreen canvas {
  width: min(100%, 1180px);
}
#gameScreen .match-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  max-height: calc(100vh - 54px);
  overflow: auto;
  padding: 12px;
}
.match-panel h2 {
  margin: 0 0 8px;
}
.panel-actions button {
  margin: 5px 0;
  padding: 9px 10px;
}
.panel-narration {
  margin-top: 12px;
}
.match-panel .log {
  min-height: 116px;
  max-height: 210px;
  overflow: auto;
}
.rules-toggle {
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 10px;
}
.rules-toggle summary {
  cursor: pointer;
  font-weight: 900;
  color: #ffe58f;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
}
.rules-toggle ul {
  max-height: 220px;
  overflow: auto;
  padding-right: 8px;
}
@media (max-width: 1180px) {
  #gameScreen .topbar,
  #gameScreen .game-wrap {
    padding-right: 0;
  }
  #gameScreen .power-hud-row {
    width: 100%;
    margin: 0 auto 8px;
  }
  #gameScreen .match-panel {
    position: static;
    width: 100%;
    max-height: none;
    margin-top: 14px;
  }
}


.league-screen { max-width: 1080px; }
.league-selected-list { margin-top: 14px; display: grid; gap: 8px; }
.league-team-chip { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; background:#101811; border:1px solid #405843; border-radius:12px; padding:10px; }
.league-team-chip span { color:#d8e8d4; font-size:13px; }
.league-team-chip button { width:auto; min-width:86px; margin:0; padding:8px 10px; }
.league-manager { margin-top:18px; }
.league-fixture { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.12); }
.league-standings { overflow:auto; }
.league-standings table { width:100%; border-collapse:collapse; font-size:14px; }
.league-standings th, .league-standings td { padding:8px; border-bottom:1px solid rgba(255,255,255,.12); text-align:left; }
.league-standings th { color:#ffe58f; }
#leagueReturnBtn { background:#ffe58f; }

/* 30AN: tournament human/COM toggles */
.league-team-chip { cursor: pointer; user-select: none; }
.league-team-chip.human-team-chip { box-shadow: 0 0 0 2px rgba(255, 226, 132, 0.55) inset; }
.league-team-chip.com-team-chip { opacity: 0.96; }


/* World Cup 2026 template visuals */
.wc2026-hero { display:flex; align-items:center; gap:18px; background:linear-gradient(135deg, rgba(12,35,64,.84), rgba(0,92,56,.70)); border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:16px 18px; margin:0 0 18px; box-shadow:0 14px 34px rgba(0,0,0,.28); }
.wc2026-hero img { width:92px; height:92px; object-fit:contain; background:rgba(0,0,0,.18); border-radius:16px; padding:6px; }
.wc2026-hero h2 { margin:0 0 6px; }
.wc2026-hero p { margin:0; color:#dbe8dc; }
.wc-groups-preview { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin-top:10px; }
.wc-group-card, .wc-ranking-card, .wc-bracket-round { background:rgba(3,12,7,.66); border:1px solid #405843; border-radius:14px; padding:10px; }
.wc-group-card h4, .wc-ranking-card h4, .wc-bracket-round h4 { margin:0 0 8px; color:#ffe184; }
.wc-team-badge { display:inline-flex; align-items:center; gap:8px; vertical-align:middle; }
.wc-team-flag { width:32px; height:22px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.20); border-radius:5px; overflow:hidden; background:#111; flex:0 0 auto; }
.wc-team-flag svg, .wc-team-flag img { width:100%; height:100%; object-fit:cover; display:block; }
.wc-team-name { white-space:nowrap; }
.wc-group-team { padding:5px 0; border-top:1px solid rgba(255,255,255,.07); }
.wc-chip-main strong { display:flex; align-items:center; gap:8px; }
.wc-panel { margin:16px 0; }
.wc-ranking-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(285px, 1fr)); gap:12px; }
.wc-ranking-card table { width:100%; border-collapse:collapse; font-size:13px; }
.wc-ranking-card th, .wc-ranking-card td { padding:6px 5px; border-bottom:1px solid rgba(255,255,255,.08); text-align:right; }
.wc-ranking-card th:first-child, .wc-ranking-card td:first-child { text-align:left; }
.wc-ranking-card tr.wc-advance { background:rgba(30,160,80,.15); }
.wc-ranking-card tr.wc-third { background:rgba(255,225,132,.10); }
.wc-bracket-grid { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; }
.wc-bracket-round { min-width:270px; }
.wc-bracket-match { background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:8px; margin:8px 0; }
.wc-score { display:block; text-align:center; font-weight:900; color:#ffe184; padding:4px 0; }
.wc-score.pending { color:#d8e8d4; opacity:.75; }
.wc-fixture-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.league-fancy-table { margin-top: 8px; overflow-x: auto; }
.league-fancy-table table { min-width: 760px; }
.league-manager .edit-actions { flex-wrap: wrap; }

/* PWA install button */
.install-app-btn {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9999;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #18a84f, #0b5f2a);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  cursor: pointer;
}
.install-app-btn:hover { transform: translateY(-1px); }
.install-app-btn.hidden { display: none !important; }
@media (display-mode: standalone) {
  .install-app-btn { display: none !important; }
}

.version-screen { max-width: 860px; }
.version-hero { display:flex; gap:18px; align-items:center; margin: 12px 0 20px; padding:18px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(255,255,255,.06); }
.version-badge { min-width:112px; text-align:center; font-weight:900; font-size:1.35rem; padding:14px 16px; border-radius:16px; background:linear-gradient(135deg,#f6d365,#3cb371); color:#08120a; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.version-box { margin:14px 0; padding:16px 18px; border-radius:16px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12); }
.version-box h3 { margin-top:0; }
.version-box ul { margin-bottom:0; }
.install-menu-option.hidden { display:none !important; }

.version-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}
.import-save-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.danger-btn { border-color: rgba(255,110,110,.55); color: #ffd6d6; }
.danger-btn:hover { background: rgba(255,80,80,.18); }

/* Phase 3A - 1.0.4A Main Menu Modernization */
.modern-menu-screen { background:#06111f; isolation:isolate; }
.modern-menu-screen::before {
  background:linear-gradient(115deg, rgba(2,8,18,.90), rgba(3,25,39,.62), rgba(2,8,18,.88)), url("assets/images/FlickSoccerMenu.png") center center / cover no-repeat;
  animation: menuKenBurns 18s ease-in-out infinite alternate;
  transform-origin:center; z-index:-3;
}
.modern-menu-screen::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 18% 18%, rgba(72,209,255,.16), transparent 30%), radial-gradient(circle at 82% 80%, rgba(255,205,74,.15), transparent 30%), linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.52));
  z-index:-2; pointer-events:none;
}
.menu-bg-glow { position:absolute; width:340px; height:340px; border-radius:999px; filter:blur(42px); opacity:.32; pointer-events:none; z-index:-1; animation: menuGlowFloat 7s ease-in-out infinite alternate; }
.menu-bg-glow-one { left:5%; top:12%; background:#00c8ff; }
.menu-bg-glow-two { right:4%; bottom:8%; background:#ffcc45; animation-delay:-2s; }
.modern-mode-overlay { width:min(94vw,1120px); max-height:calc(100vh - 54px); overflow:auto; padding:clamp(20px,3.2vw,36px); background:linear-gradient(145deg, rgba(7,16,30,.78), rgba(6,20,34,.58)); border:1px solid rgba(255,255,255,.22); box-shadow:0 30px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(13px) saturate(1.15); }
.modern-menu-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.menu-brand-block h1 { text-align:left; margin:8px 0 4px; font-size:clamp(38px,7vw,78px); line-height:.92; letter-spacing:-.045em; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.5), 0 16px 34px rgba(0,0,0,.5); }
.modern-phase-pill { display:inline-flex; width:auto; margin:0; background:linear-gradient(90deg, rgba(0,196,255,.24), rgba(255,201,64,.22)); border:1px solid rgba(255,255,255,.25); color:#eaf8ff; box-shadow:0 10px 28px rgba(0,0,0,.25); }
.mode-subtitle { text-align:left; max-width:620px; color:rgba(255,255,255,.78); font-weight:700; margin:0; }
.menu-status-panel { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; max-width:330px; }
.status-chip { display:inline-flex; align-items:center; min-height:32px; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); color:#fff6c8; font-weight:900; font-size:13px; box-shadow:0 8px 18px rgba(0,0,0,.24); }
.modern-mode-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.modern-mode-card { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; min-height:96px; padding:18px; overflow:hidden; border-radius:22px; border:1px solid rgba(255,255,255,.18); background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06)), linear-gradient(135deg, rgba(12,45,78,.92), rgba(10,19,35,.90)); box-shadow:0 16px 36px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12); color:#fff; text-align:left; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease; cursor:pointer; isolation:isolate; }
.modern-mode-card::before { content:""; position:absolute; inset:-80% -30%; background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.20), transparent 65%); transform:translateX(-40%) rotate(10deg); opacity:0; transition:opacity .18s ease, transform .55s ease; z-index:-1; }
.modern-mode-card:hover, .modern-mode-card:focus-visible { transform:translateY(-4px) scale(1.018); border-color:rgba(255,225,112,.68); box-shadow:0 22px 52px rgba(0,0,0,.48), 0 0 0 3px rgba(255,225,112,.12), inset 0 1px 0 rgba(255,255,255,.20); filter:brightness(1.10); outline:none; }
.modern-mode-card:hover::before, .modern-mode-card:focus-visible::before { opacity:1; transform:translateX(40%) rotate(10deg); }
.modern-mode-card:active { transform:translateY(-1px) scale(.99); }
.primary-mode { background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08)), linear-gradient(135deg, rgba(0,118,164,.96), rgba(10,29,59,.94)); }
.world-mode { background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08)), linear-gradient(135deg, rgba(24,87,55,.96), rgba(87,44,12,.92)); }
.mode-card-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); font-size:31px; box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 10px 20px rgba(0,0,0,.23); }
.mode-card-copy { min-width:0; }
.mode-card-copy strong { display:block; font-size:clamp(19px,2.4vw,25px); line-height:1.05; color:#fff; letter-spacing:-.015em; }
.mode-card-copy small { display:block; margin-top:6px; color:rgba(255,255,255,.72); font-size:14px; font-weight:750; line-height:1.25; }
.mode-card-action { padding:8px 12px; border-radius:999px; background:rgba(255,224,113,.16); border:1px solid rgba(255,224,113,.28); color:#fff6c8; font-size:13px; font-weight:950; white-space:nowrap; }
.modern-menu-footer { display:flex; justify-content:space-between; gap:12px; margin-top:18px; padding-top:15px; border-top:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.66); font-weight:850; font-size:13px; }
@keyframes menuKenBurns { from{transform:scale(1);filter:saturate(1.05);} to{transform:scale(1.065);filter:saturate(1.22);} }
@keyframes menuGlowFloat { from{transform:translate3d(0,0,0) scale(.96);} to{transform:translate3d(24px,-18px,0) scale(1.08);} }
@media (max-width:820px){ .modern-menu-header{flex-direction:column;} .menu-status-panel{justify-content:flex-start;max-width:none;} .modern-mode-menu{grid-template-columns:1fr;} .modern-mode-overlay{max-height:calc(100vh - 28px);} .modern-menu-footer{flex-direction:column;gap:5px;} }
@media (max-width:520px){ .modern-mode-card{grid-template-columns:auto minmax(0,1fr);min-height:88px;} .mode-card-action{grid-column:2;justify-self:start;} .mode-card-icon{width:50px;height:50px;font-size:27px;border-radius:16px;} }

/* Phase 3A - 1.0.4B Match Setup Modernization */
.setup-wizard-screen { max-width: 1180px; padding: 26px; overflow:hidden; }
.setup-wizard-header { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:18px; }
.eyebrow { margin:0 0 6px; color:#7ee7ff; text-transform:uppercase; letter-spacing:.16em; font-weight:900; font-size:12px; }
.setup-wizard-subtitle { margin:8px 0 0; color:#d6e8ee; max-width:720px; }
.setup-wizard-badge { padding:10px 14px; border-radius:999px; background:linear-gradient(135deg, rgba(126,231,255,.18), rgba(255,229,143,.22)); border:1px solid rgba(255,255,255,.22); color:#fff6c8; font-weight:900; white-space:nowrap; }
.setup-stepper { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:18px 0 20px; }
.setup-step { width:100%; min-width:0; margin:0; border-radius:15px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#d8e8ee; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 8px; transition:transform .18s ease, background .18s ease, border-color .18s ease; }
.setup-step span { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,.12); color:#ffe58f; }
.setup-step.active { background:linear-gradient(135deg, rgba(10,132,255,.35), rgba(255,197,66,.20)); border-color:rgba(126,231,255,.7); color:#fff; transform:translateY(-1px); }
.setup-wizard-body { min-height:520px; }
.setup-panel { display:none; animation:setupFade .18s ease both; }
.setup-panel.active { display:block; }
@keyframes setupFade { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
.setup-section-title { margin:0 0 16px; padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.setup-section-title h2 { margin:0 0 4px; font-size:24px; }
.setup-section-title p { margin:0; color:#c9d7dd; }
.modern-team-grid { gap:18px; }
.modern-team-card { position:relative; overflow:hidden; border-color:rgba(255,255,255,.18); box-shadow:0 16px 34px rgba(0,0,0,.26); }
.modern-team-card::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:#7ee7ff; }
.modern-team-card.red-card::before { background:#ff6b6b; }
.team-card-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.team-card-role { display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.10); font-weight:900; color:#ffe58f; text-transform:uppercase; font-size:12px; letter-spacing:.08em; }
.team-card-flag { width:84px; height:48px; }
.competition-card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.competition-card { min-height:160px; padding:18px; border-radius:20px; background:linear-gradient(160deg, rgba(13,42,69,.92), rgba(8,15,20,.92)); border:2px solid rgba(126,231,255,.36); box-shadow:0 16px 35px rgba(0,0,0,.28); }
.competition-card.selected { border-color:#ffe58f; }
.competition-card.muted { opacity:.72; filter:grayscale(.2); }
.competition-card strong { display:block; margin:8px 0; font-size:20px; }
.competition-card small { color:#c9d7dd; }
.competition-icon { font-size:36px; }
.setup-tip-box { margin-top:16px; color:#d6e8ee; }
.setup-preview-layout { display:grid; grid-template-columns:minmax(280px, .9fr) 1.1fr; gap:18px; }
.stadium-preview-card { text-align:center; }
.mini-field-preview { position:relative; min-height:260px; border-radius:22px; background:repeating-linear-gradient(90deg, #1e8a47 0 70px, #1a7a3f 70px 140px); border:9px solid #25170c; box-shadow:inset 0 0 0 3px rgba(255,255,255,.45), 0 18px 30px rgba(0,0,0,.28); overflow:hidden; }
.mini-field-preview::before { content:""; position:absolute; inset:18px; border:3px solid rgba(255,255,255,.64); border-radius:14px; }
.mini-field-center { position:absolute; width:92px; height:92px; border-radius:999px; border:3px solid rgba(255,255,255,.64); left:50%; top:50%; transform:translate(-50%,-50%); }
.mini-field-ball { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:24px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.switch-row { padding:11px 12px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); border-radius:14px; }
.switch-row input { accent-color:#7ee7ff; }
.option-card-list { display:grid; gap:8px; }
.setup-rule-note { padding:14px; border-radius:14px; background:rgba(255,229,143,.09); color:#fff6c8; border:1px solid rgba(255,229,143,.25); }
.review-card { padding:20px; border-radius:22px; background:linear-gradient(160deg, rgba(6,22,33,.96), rgba(16,24,17,.96)); border:2px solid rgba(255,229,143,.35); box-shadow:0 18px 45px rgba(0,0,0,.35); }
.review-matchup { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; text-align:center; font-size:26px; margin-bottom:18px; }
.review-matchup span { color:#ffe58f; font-weight:1000; font-size:18px; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.review-grid div { padding:14px; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.review-grid small { display:block; color:#9fb2bb; font-weight:900; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.review-grid strong { color:#fff; }
.start-match-btn { display:block; margin:22px auto 0; min-width:240px; font-size:18px; }
.setup-wizard-actions { display:flex; justify-content:space-between; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); }
.setup-wizard-actions button { flex:0 1 auto; }
.setup-wizard-actions button:disabled { opacity:.4; cursor:not-allowed; }
@media (max-width: 900px) {
  .setup-wizard-header { flex-direction:column; }
  .setup-stepper { grid-template-columns:repeat(3,1fr); }
  .competition-card-grid, .setup-preview-layout, .review-grid { grid-template-columns:1fr; }
  .review-matchup { grid-template-columns:1fr; gap:8px; font-size:22px; }
}
@media (max-width: 620px) {
  .setup-wizard-screen { padding:18px; margin:18px auto; }
  .setup-stepper { grid-template-columns:repeat(2,1fr); }
  .setup-wizard-actions { flex-direction:column; }
  .setup-wizard-actions button { width:100%; }
}

/* Phase 3A - 1.0.4B refinement: Friendly setup polish */
.setup-stepper-five { grid-template-columns: repeat(5, 1fr); }
.matchup-banner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; margin:0 0 18px; padding:18px; border-radius:24px; background:linear-gradient(135deg, rgba(126,231,255,.13), rgba(255,229,143,.12)); border:1px solid rgba(255,255,255,.18); box-shadow:0 18px 38px rgba(0,0,0,.22); text-align:center; }
.matchup-banner span { color:#fff; font-size:clamp(20px,3vw,34px); font-weight:1000; letter-spacing:-.025em; text-shadow:0 4px 14px rgba(0,0,0,.35); }
.matchup-banner strong { color:#ffe58f; background:rgba(0,0,0,.28); border:1px solid rgba(255,229,143,.28); border-radius:999px; padding:8px 13px; font-weight:1000; }
.fancy-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items:start; }
.fancy-team-card { padding:0; background:linear-gradient(160deg, rgba(9,28,48,.96), rgba(6,13,22,.96)); border-radius:28px; }
.fancy-team-card.blue-card { box-shadow:0 22px 54px rgba(0,93,164,.24), 0 18px 38px rgba(0,0,0,.32); }
.fancy-team-card.red-card { box-shadow:0 22px 54px rgba(164,35,35,.22), 0 18px 38px rgba(0,0,0,.32); }
.team-card-hero { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:20px; background:radial-gradient(circle at top right, rgba(126,231,255,.24), transparent 42%), linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)); border-bottom:1px solid rgba(255,255,255,.12); }
.red-card .team-card-hero { background:radial-gradient(circle at top right, rgba(255,107,107,.22), transparent 42%), linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)); }
.team-card-hero h2 { margin:9px 0 6px; font-size:clamp(25px,3vw,38px); line-height:.95; letter-spacing:-.04em; color:#fff; }
.kit-preview-row { display:flex; align-items:center; gap:10px; padding:14px 20px; background:rgba(255,255,255,.045); border-bottom:1px solid rgba(255,255,255,.08); color:#d8e8ee; font-weight:900; }
.kit-disc { width:28px; height:28px; border-radius:999px; border:2px solid rgba(255,255,255,.82); box-shadow:0 8px 18px rgba(0,0,0,.28); }
.kit-disc.kit-border { outline:2px solid rgba(255,255,255,.22); }
.team-form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; padding:18px 20px 8px; }
.team-form-grid label, .formation-select-label { color:#d8e8ee; font-weight:900; font-size:13px; }
.team-form-grid select, .formation-select-label select { margin-top:6px; }
.formation-select-label { display:block; padding:0 20px; }
.fancy-team-card .formation-default-info { margin:12px 20px 20px; }
.stadium-preview-card { background:linear-gradient(160deg, rgba(7,28,34,.96), rgba(20,22,13,.96)); border-radius:28px; border:1px solid rgba(255,255,255,.18); }
.mini-field-preview { transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, filter .25s ease; }
.mini-field-preview.field-normal { background:repeating-linear-gradient(90deg, #1e8a47 0 70px, #1a7a3f 70px 140px); }
.mini-field-preview.field-gray { background:repeating-linear-gradient(90deg, #8a939a 0 70px, #707a82 70px 140px); }
.mini-field-preview.field-plaid { background:linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.08) 75%), repeating-linear-gradient(90deg, #247c3e 0 55px, #186b36 55px 110px); background-size:42px 42px, auto; }
.mini-field-preview.field-bright { background:repeating-linear-gradient(90deg, #38b85f 0 70px, #2fa453 70px 140px); }
.mini-field-preview.field-wideStripes { background:repeating-linear-gradient(90deg, #237541 0 115px, #1b6235 115px 230px); }
.mini-field-preview.field-thinStripes { background:repeating-linear-gradient(90deg, #207d43 0 36px, #176b37 36px 72px); }
.mini-field-preview.field-white { background:repeating-linear-gradient(90deg, #ececec 0 70px, #d9d9d9 70px 140px); }
.mini-field-preview.field-classicTurf { background:radial-gradient(circle at center, rgba(255,255,255,.10), transparent 40%), repeating-linear-gradient(90deg, #125c30 0 50px, #0e4f29 50px 100px); }
.mini-field-preview.field-targetRings { background:radial-gradient(circle at center, transparent 0 32px, rgba(255,255,255,.16) 33px 36px, transparent 37px 72px, rgba(255,255,255,.12) 73px 77px, transparent 78px), repeating-linear-gradient(90deg, #22743e 0 70px, #185f32 70px 140px); }
.mini-field-preview.board-dark { border-color:#0e1622; }
.mini-field-preview.board-light { border-color:#d7b47c; }
.mini-field-preview.board-metal { border-color:#86919b; }
.mini-field-preview.board-blueRed { border-color:#1d4ed8; box-shadow:inset 0 0 0 3px rgba(255,255,255,.45), 0 18px 30px rgba(0,0,0,.28), 0 0 30px rgba(30,144,255,.28); }
.mini-field-preview.board-green { border-color:#10542f; }
.mini-field-preview.weather-rain { filter:saturate(.9) brightness(.83); }
.mini-field-preview.weather-sunny { filter:saturate(1.25) brightness(1.12); }
.mini-field-preview.weather-snow { filter:saturate(.75) brightness(1.18); }
.mini-field-preview.weather-windy { filter:saturate(1.05) contrast(1.08); }
.mini-field-preview.weather-rain::after, .mini-field-preview.weather-snow::after, .mini-field-preview.weather-windy::after { content:attr(data-weather); position:absolute; top:14px; right:14px; padding:7px 10px; border-radius:999px; background:rgba(0,0,0,.36); color:#fff; font-weight:1000; border:1px solid rgba(255,255,255,.22); }
.mini-field-preview.borders-on { outline:4px solid rgba(255,229,143,.64); outline-offset:-15px; }
.fancy-option-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.feature-toggle-card { position:relative; min-height:150px; padding:18px 16px 16px; border-radius:22px; background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.045)); border:1px solid rgba(255,255,255,.16); box-shadow:0 16px 34px rgba(0,0,0,.24); cursor:pointer; transition:transform .18s ease, border-color .18s ease, background .18s ease; }
.feature-toggle-card:hover { transform:translateY(-3px); border-color:rgba(126,231,255,.52); }
.feature-toggle-card input { position:absolute; top:14px; right:14px; width:22px; height:22px; accent-color:#7ee7ff; }
.feature-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:rgba(126,231,255,.12); border:1px solid rgba(126,231,255,.22); font-size:25px; margin-bottom:12px; }
.feature-toggle-card strong { display:block; color:#fff; font-size:20px; margin-bottom:5px; }
.feature-toggle-card small { display:block; color:#b9cad2; font-weight:750; line-height:1.25; }
.feature-toggle-card:has(input:checked) { background:linear-gradient(160deg, rgba(126,231,255,.20), rgba(255,229,143,.10)); border-color:rgba(126,231,255,.62); box-shadow:0 18px 44px rgba(0,129,191,.22); }
.glass-control-panel, .rule-panel-card { border-radius:24px; background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); border:1px solid rgba(255,255,255,.16); }
.feature-inline-toggle { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff; font-weight:900; }
.feature-inline-toggle input { width:20px; height:20px; accent-color:#7ee7ff; }
.rules-dashboard { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.rule-panel-title { display:flex; align-items:center; gap:10px; margin-bottom:12px; color:#fff; font-size:18px; }
.rule-panel-title span { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:rgba(255,229,143,.12); border:1px solid rgba(255,229,143,.22); }
.game-rules-description { margin-top:14px; padding:14px; border-radius:16px; background:rgba(255,229,143,.08); border:1px solid rgba(255,229,143,.22); color:#fff6c8; }
.game-rules-description ul { margin:10px 0 0 18px; padding:0; color:#e9f4f6; }
.game-rules-description li { margin:6px 0; line-height:1.3; }
@media (max-width: 900px) { .setup-stepper-five, .fancy-team-grid, .fancy-option-grid, .rules-dashboard { grid-template-columns:1fr; } .matchup-banner { grid-template-columns:1fr; } .team-form-grid { grid-template-columns:1fr; } }

/* Phase 3A - 1.0.4C Team Selection Cards */
.pro-matchup-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, rgba(34,154,255,.18), rgba(255,229,143,.12), rgba(255,87,87,.18));
}
.pro-matchup-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.12), transparent 65%);
  transform: translateX(-80%);
  animation: teamMatchupShine 5s ease-in-out infinite;
  pointer-events: none;
}
.pro-team-grid { gap: 20px; }
.pro-team-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.22);
  transform: translateZ(0);
}
.pro-team-card::after {
  content: "";
  position: absolute;
  inset: auto -15% -35% -15%;
  height: 170px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.15), transparent 68%);
  z-index: -1;
}
.pro-team-card-bg {
  position: absolute;
  inset: 0;
  opacity: .34;
  background: radial-gradient(circle at 12% 10%, var(--team-main, #7ee7ff), transparent 32%), radial-gradient(circle at 86% 24%, var(--team-trim, #ffe58f), transparent 30%);
  z-index: -2;
  transition: background .22s ease, opacity .22s ease;
}
.pro-team-hero {
  padding: 22px 22px 16px;
  margin: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.pro-team-hero h2 {
  margin: 8px 0 8px;
  font-size: clamp(28px, 4vw, 45px);
  line-height: .95;
  letter-spacing: -.045em;
  text-shadow: 0 5px 20px rgba(0,0,0,.45);
}
.pro-team-flag {
  width: 118px;
  height: 78px;
  border-radius: 20px;
  box-shadow: 0 18px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.22);
}
.pro-team-showcase {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 14px;
  padding: 18px 20px 14px;
}
.jersey-preview-card, .formation-preview-card {
  min-height: 188px;
  border-radius: 22px;
  padding: 14px;
  background: linear-gradient(160deg, rgba(0,0,0,.26), rgba(255,255,255,.065));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 12px 26px rgba(0,0,0,.18);
}
.mini-label {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  color: #ffe58f;
  background: rgba(255,229,143,.12);
  border: 1px solid rgba(255,229,143,.20);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 11px;
  font-weight: 1000;
}
.jersey-preview {
  position: relative;
  width: 112px;
  height: 118px;
  margin: 12px auto 10px;
  background: linear-gradient(135deg, var(--kit-main, #e3b52d) 0 62%, var(--kit-trim, #123d7a) 62% 100%);
  clip-path: polygon(18% 0, 36% 0, 42% 12%, 58% 12%, 64% 0, 82% 0, 100% 20%, 86% 38%, 78% 31%, 78% 100%, 22% 100%, 22% 31%, 14% 38%, 0 20%);
  box-shadow: 0 18px 32px rgba(0,0,0,.38), inset 0 -18px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.35);
}
.jersey-preview::before {
  content: "";
  position: absolute;
  left: 38%; right: 38%; top: 0; height: 26%;
  background: rgba(255,255,255,.16);
  border-radius: 0 0 999px 999px;
}
.jersey-preview span {
  position: absolute;
  left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--kit-trim, #123d7a);
  border: 3px solid rgba(255,255,255,.38);
  box-shadow: 0 3px 10px rgba(0,0,0,.24);
}
.pro-kit-row {
  justify-content: center;
  margin-top: 4px;
  font-weight: 900;
}
.formation-preview-card strong {
  display: block;
  margin: 10px 0 8px;
  font-size: 22px;
  color: #fff;
}
.formation-mini-field {
  position: relative;
  min-height: 118px;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) 50% 0 / 50% 100%,
    repeating-linear-gradient(90deg, rgba(38,151,80,.88) 0 32px, rgba(31,128,69,.88) 32px 64px);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
}
.formation-mini-field::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 11px;
}
.formation-mini-field::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
}
.formation-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--kit-main, #e3b52d);
  border: 2px solid var(--kit-trim, #123d7a);
  box-shadow: 0 4px 8px rgba(0,0,0,.35);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.formation-dot.gk {
  width: 11px;
  height: 11px;
  background: #fff;
}
.pro-team-controls {
  padding: 0 20px 4px;
  gap: 10px;
}
.pro-team-controls label, .pro-formation-select {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  padding: 9px 10px;
}
.pro-team-controls select, .pro-formation-select select {
  margin-top: 6px;
}
.pro-formation-select {
  display: block;
  margin: 10px 20px 0;
}
.team-card-update-pulse {
  animation: teamCardPulse .32s ease both;
}
@keyframes teamCardPulse { from { transform: scale(.992); filter: brightness(1.15); } to { transform: scale(1); filter: brightness(1); } }
@keyframes teamMatchupShine { 0%, 55% { transform: translateX(-95%); opacity: 0; } 65% { opacity: 1; } 100% { transform: translateX(95%); opacity: 0; } }
@media (max-width: 1040px) { .pro-team-showcase { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .pro-team-hero { align-items: center; } .pro-team-flag { width: 102px; height: 66px; } }
@media (max-width: 560px) { .pro-team-hero { flex-direction: column; text-align: center; } .pro-team-controls { grid-template-columns: 1fr; } .jersey-preview-card, .formation-preview-card { min-height: 160px; } }


/* Phase 3A - 1.0.4C2 Premium Team Setup */
.legacy-color-select,
.legacy-formation-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.pro-team-card {
  border-color: rgba(126,231,255,.24);
  background: linear-gradient(180deg, rgba(11,25,46,.92), rgba(7,18,33,.96));
}
.pro-team-card:hover {
  box-shadow: 0 24px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(126,231,255,.20);
}
.pro-team-controls label:not(.legacy-color-select) {
  background: rgba(5,16,31,.58);
  border: 1px solid rgba(126,231,255,.14);
  border-radius: 18px;
  padding: 10px 12px;
}
.pro-team-controls select {
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 900;
}
.jersey-preview-card {
  cursor: default;
}
.jersey-preview {
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}
.jersey-preview:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.08);
}
.jersey-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.28), transparent 18%, transparent 58%, rgba(255,255,255,.12));
  opacity: .45;
  pointer-events: none;
}
.kit-edit-hint {
  text-align: center;
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-weight: 800;
  margin: 6px 0 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.kit-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 8px;
  border-radius: 16px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
}
.kit-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 14px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.kit-color-swatch:hover { transform: translateY(-2px) scale(1.08); }
.kit-color-swatch.active {
  border-color: #ffe58f;
  box-shadow: 0 0 0 3px rgba(255,229,143,.22), 0 10px 20px rgba(0,0,0,.32);
}
.kit-color-palette[data-target="border"] .kit-color-swatch.active {
  border-color: #7ee7ff;
  box-shadow: 0 0 0 3px rgba(126,231,255,.22), 0 10px 20px rgba(0,0,0,.32);
}
.formation-card-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  max-height: 172px;
  overflow: auto;
  padding-right: 4px;
}
.formation-choice-card {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(0,0,0,.20);
  color: #fff;
  padding: 8px;
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.formation-choice-card:hover {
  transform: translateY(-2px);
  border-color: rgba(126,231,255,.55);
  background: rgba(126,231,255,.10);
}
.formation-choice-card.active {
  border-color: #ffe58f;
  background: linear-gradient(160deg, rgba(255,229,143,.18), rgba(126,231,255,.10));
  box-shadow: 0 0 0 2px rgba(255,229,143,.12);
}
.formation-choice-title {
  font-size: 13px;
  font-weight: 1000;
  margin-bottom: 5px;
}
.formation-choice-desc {
  display:block;
  color: rgba(255,255,255,.67);
  font-size: 10px;
  font-weight: 800;
  margin-top: 5px;
}
.formation-choice-mini {
  position: relative;
  height: 54px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(90deg, #1c8b43, #2fb85a);
  border: 1px solid rgba(255,255,255,.18);
}
.formation-choice-mini .formation-dot {
  width: 5px;
  height: 5px;
}
.formation-choice-mini .formation-dot.gk {
  width: 6px;
  height: 6px;
}
@media (max-width: 820px) {
  .formation-card-strip { grid-template-columns: 1fr; max-height: 220px; }
}

.team-browser-bar {
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  padding: 12px 18px 2px;
}
.team-browser-btn {
  width: 44px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(126,231,255,.25);
  background: linear-gradient(180deg, rgba(126,231,255,.18), rgba(255,255,255,.06));
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 10px 20px rgba(0,0,0,.24);
  cursor:pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.team-browser-btn:hover { transform: translateY(-2px); border-color: rgba(255,229,143,.70); background: rgba(255,229,143,.16); }
.team-browser-label {
  min-width: 150px;
  text-align:center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Phase 3A - 1.0.4C2 Match Setup 2.0 Visual Team Filters */
.setup-hidden-selects,
.setup-hidden-selects label,
#p1TeamLabel,
#p2TeamLabel,
#p1CountryLabel,
#p2CountryLabel {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.team-visual-controls {
  display: grid;
  gap: 12px;
  padding: 4px 20px 12px;
}
.visual-control-block {
  border: 1px solid rgba(126,231,255,.16);
  background: linear-gradient(180deg, rgba(7,22,42,.70), rgba(2,9,19,.56));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.22);
  border-radius: 18px;
  padding: 12px;
}
.visual-control-label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,229,143,.14);
  border: 1px solid rgba(255,229,143,.25);
  color: #ffe58f;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 1000;
  font-size: 11px;
}
.segmented-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.segmented-pill,
.choice-chip {
  min-height: 42px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.84);
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0,0,0,.18);
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.segmented-pill:hover,
.choice-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(126,231,255,.55);
  background: rgba(126,231,255,.10);
}
.segmented-pill.active,
.choice-chip.active {
  border-color: rgba(255,229,143,.78);
  color: #fff;
  background: linear-gradient(160deg, rgba(255,229,143,.20), rgba(126,231,255,.14));
  box-shadow: 0 0 0 2px rgba(255,229,143,.12), 0 12px 22px rgba(0,0,0,.28);
}
.chip-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choice-chip {
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
}
.country-chips {
  max-height: 104px;
  overflow: auto;
  padding-right: 4px;
}
.team-browser-label {
  border-color: rgba(126,231,255,.22);
  background: linear-gradient(180deg, rgba(126,231,255,.13), rgba(255,255,255,.06));
}
@media (max-width: 560px) {
  .team-visual-controls { padding: 2px 14px 10px; }
  .segmented-choice { grid-template-columns: 1fr; }
  .choice-chip { flex: 1 1 calc(50% - 8px); }
}

/* Phase 3A - 1.0.4C3 Compact arrow filters */
.compact-filter-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 16px 4px;
}
.compact-filter-stack .visual-control-block {
  padding: 8px;
  border-radius: 16px;
}
.compact-filter-stack .visual-control-label {
  margin-bottom: 6px;
  padding: 4px 8px;
  font-size: 9px;
}
.selector-arrow-bar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
}
.compact-arrow-btn {
  width: 34px;
  height: 32px;
  font-size: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,.20);
}
.compact-selector-label {
  min-width: 0;
  width: 100%;
  padding: 7px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
@media (max-width: 980px) {
  .compact-filter-stack { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .compact-filter-stack { padding: 6px 12px 2px; }
  .selector-arrow-bar { grid-template-columns: 38px minmax(0, 1fr) 38px; }
  .compact-arrow-btn { width: 38px; height: 34px; }
}

/* Phase 3A - 1.0.4C4 Stadium Modernization */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.stadium-control-panel {
  background: linear-gradient(160deg, rgba(8,28,45,.96), rgba(8,13,22,.96));
  border-radius: 28px;
  border: 1px solid rgba(126,231,255,.20);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
.stadium-selector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.stadium-selector-grid .visual-control-block {
  min-width: 0;
  padding: 11px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
}
.stadium-arrow-selector .compact-selector-label {
  font-size: 11px;
  color: #fff;
  background: linear-gradient(135deg, rgba(126,231,255,.14), rgba(255,229,143,.08));
  border: 1px solid rgba(126,231,255,.24);
}
.mini-field-preview {
  aspect-ratio: 1.65 / 1;
  min-height: 280px;
  background-size: auto;
}
.mini-field-lines { position:absolute; inset:18px; border:3px solid rgba(255,255,255,.72); border-radius:14px; z-index:2; }
.mini-field-lines span { position:absolute; display:block; box-sizing:border-box; }
.mini-midline { left:50%; top:0; bottom:0; width:3px; transform:translateX(-50%); background:rgba(255,255,255,.64); }
.mini-center-circle { width:94px; height:94px; left:50%; top:50%; transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.68); border-radius:999px; }
.mini-left-box, .mini-right-box { width:76px; height:126px; top:50%; transform:translateY(-50%); border:3px solid rgba(255,255,255,.64); }
.mini-left-box { left:-3px; border-left:0; border-radius:0 12px 12px 0; }
.mini-right-box { right:-3px; border-right:0; border-radius:12px 0 0 12px; }
.mini-left-goal, .mini-right-goal { width:18px; height:72px; top:50%; transform:translateY(-50%); border:3px solid rgba(255,255,255,.60); background:rgba(255,255,255,.08); }
.mini-left-goal { left:-21px; border-radius:10px 0 0 10px; }
.mini-right-goal { right:-21px; border-radius:0 10px 10px 0; }
.mini-penalty-dot { width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.82); top:50%; transform:translateY(-50%); }
.mini-penalty-dot.left { left:112px; }
.mini-penalty-dot.right { right:112px; }
.mini-field-preview::before { display:none; }
.mini-field-ball {
  z-index:5;
  width:34px;
  height:34px;
  border-radius:999px;
  font-size:0;
  background:#fff;
  border:2px solid rgba(255,255,255,.85);
  box-shadow: inset -7px -8px 12px rgba(0,0,0,.25), 0 8px 18px rgba(0,0,0,.48);
}
.mini-field-ball span { display:block; width:100%; height:100%; border-radius:inherit; }
.mini-field-ball.ball-classic span { background:radial-gradient(circle at 50% 50%, #111 0 18%, transparent 19%), conic-gradient(from 18deg, #111 0 12%, #fff 12% 24%, #111 24% 36%, #fff 36% 48%, #111 48% 60%, #fff 60% 72%, #111 72% 84%, #fff 84% 100%); }
.mini-field-ball.ball-silverFlow span { background:linear-gradient(135deg,#f8fafc,#94a3b8 45%,#e2e8f0), repeating-linear-gradient(45deg, transparent 0 7px, rgba(20,30,50,.25) 7px 10px); }
.mini-field-ball.ball-monoCurve span { background:radial-gradient(circle at 35% 35%, #fff 0 24%, transparent 25%), repeating-conic-gradient(#111 0 16deg,#f7f7f7 16deg 32deg); }
.mini-field-ball.ball-limeGreen span { background:radial-gradient(circle at 35% 30%, #d9ff99, transparent 30%), linear-gradient(135deg,#a3e635,#16a34a); }
.mini-field-ball.ball-worldCurve span { background:conic-gradient(#2563eb,#22c55e,#facc15,#ef4444,#2563eb); }
.mini-field-ball.ball-starYellow span { background:radial-gradient(circle at center,#fff8a8 0 18%, transparent 19%), linear-gradient(135deg,#fde047,#f59e0b); }
.mini-field-ball.ball-orangeTech span { background:repeating-linear-gradient(45deg,#fb923c 0 8px,#111827 8px 11px,#f97316 11px 19px); }
.mini-field-ball.ball-yellowHex span { background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.35) 0 20%,transparent 21%), linear-gradient(135deg,#fde047,#eab308); }
.mini-field-ball.ball-goldLoop span { background:radial-gradient(circle at 30% 25%,#fff7ad,transparent 32%), conic-gradient(#b45309,#fde68a,#f59e0b,#b45309); }
.mini-weather-layer { position:absolute; inset:0; pointer-events:none; z-index:4; opacity:0; }
.weather-rain .mini-weather-layer { opacity:1; background:repeating-linear-gradient(110deg, rgba(174,221,255,.0) 0 14px, rgba(174,221,255,.45) 14px 17px, rgba(174,221,255,.0) 17px 30px); animation:weatherDrift .9s linear infinite; }
.weather-snow .mini-weather-layer { opacity:1; background:radial-gradient(circle, rgba(255,255,255,.85) 0 2px, transparent 3px), radial-gradient(circle, rgba(255,255,255,.65) 0 1.5px, transparent 2.5px); background-size:34px 34px, 48px 48px; animation:weatherDrift 3s linear infinite; }
.weather-windy .mini-weather-layer { opacity:1; background:repeating-linear-gradient(170deg, transparent 0 22px, rgba(255,255,255,.23) 22px 24px, transparent 24px 46px); animation:weatherDrift 1.3s linear infinite; }
.weather-sunny .mini-weather-layer { opacity:1; background:radial-gradient(circle at 14% 14%, rgba(255,229,143,.46), transparent 26%), linear-gradient(135deg, rgba(255,244,191,.16), transparent 45%); }
@keyframes weatherDrift { from { background-position:0 0, 0 0; } to { background-position:48px 48px, -48px 48px; } }
.mini-field-preview.field-gray { background:repeating-linear-gradient(90deg, #79838a 0 70px, #626d75 70px 140px); }
.mini-field-preview.field-white .mini-field-lines span, .mini-field-preview.field-white .mini-field-lines { border-color:rgba(30,41,59,.55); }
.mini-field-preview.field-white .mini-midline, .mini-field-preview.field-white .mini-penalty-dot { background:rgba(30,41,59,.55); }
.mini-field-preview.field-targetRings .mini-center-circle { box-shadow:0 0 0 24px rgba(255,255,255,.10), 0 0 0 52px rgba(255,255,255,.06); }
@media (max-width: 760px) {
  .stadium-selector-grid { grid-template-columns: 1fr; }
  .mini-field-preview { min-height: 230px; }
  .mini-left-box, .mini-right-box { width:58px; height:104px; }
  .mini-penalty-dot.left { left:82px; }
  .mini-penalty-dot.right { right:82px; }
}

/* Phase 3A - 1.0.4C6 Gameplay and Rules Arrow Modernization */
.gameplay-arrow-panel {
  position: relative;
  overflow: hidden;
}
.gameplay-arrow-panel::before {
  content: '';
  position: absolute;
  inset: -40% -15% auto auto;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, rgba(126,231,255,.14), transparent 66%);
  pointer-events: none;
}
.gameplay-arrow-grid {
  display: grid;
  gap: 10px;
}
.gameplay-arrow-card {
  padding: 10px;
  border-color: rgba(126,231,255,.22);
}
.gameplay-arrow-selector .compact-selector-label {
  font-size: 11px;
  letter-spacing: .02em;
}
.gameplay-arrow-hint {
  margin-top: 8px;
  color: rgba(226,242,255,.70);
  font-size: 11px;
  line-height: 1.35;
}
@media (max-width: 760px) {
  .gameplay-arrow-grid { gap: 8px; }
}

/* Phase 3A - 1.0.4C6 Gameplay and Rules refinement */
.reactive-gk-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.reactive-gk-controls.hidden { display:none; }
.rules-arrow-card { margin:10px 0; padding:10px; border-radius:18px; background:rgba(126,231,255,.055); border:1px solid rgba(126,231,255,.16); }
.rules-arrow-card .compact-selector-label { font-size:11px; letter-spacing:.02em; }
@media (max-width:760px){ .reactive-gk-controls{grid-template-columns:1fr;} }

/* Phase 3A v1.0.4D: Broadcast HUD modernization */
#gameScreen .broadcast-topbar {
  position: relative;
  width: min(1180px, calc(100vw - 24px));
  margin: 10px auto 8px;
  z-index: 6;
}
#gameScreen .broadcast-scoreboard {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(230px, .82fr) minmax(230px, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid rgba(126, 219, 255, .28);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(3, 15, 30, .88), rgba(9, 42, 62, .78));
  box-shadow: 0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
#gameScreen .broadcast-team {
  display: grid;
  grid-template-columns: 50px minmax(0,1fr) 72px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-radius: 18px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
}
#gameScreen .broadcast-team.red-side { grid-template-columns: 72px minmax(0,1fr) 50px; }
#gameScreen .broadcast-team.blue-side { box-shadow: inset 5px 0 0 rgba(80,160,255,.78); }
#gameScreen .broadcast-team.red-side { box-shadow: inset -5px 0 0 rgba(255,80,80,.78); }
#gameScreen .broadcast-flag {
  width: 46px; height: 34px; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,.12); box-shadow: 0 6px 14px rgba(0,0,0,.22);
}
#gameScreen .broadcast-team-copy { display:flex; flex-direction:column; min-width:0; text-align:left; }
#gameScreen .broadcast-team-copy.right { text-align:right; }
#gameScreen .broadcast-team-copy span {
  font-size: clamp(16px, 2.1vw, 24px); font-weight: 950; color:#fff; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
#gameScreen .broadcast-team-copy small { font-size: 10px; color: rgba(212,235,255,.75); letter-spacing:.16em; font-weight:800; }
#gameScreen .broadcast-score {
  font-size: clamp(28px, 3.5vw, 46px); line-height: 1; color:#fff6b0; text-align:center;
  text-shadow: 0 0 16px rgba(255,230,120,.45);
}
#gameScreen .broadcast-center {
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 3px;
  border-radius: 18px; border: 1px solid rgba(126, 219, 255, .22);
  background: radial-gradient(circle at 50% 0%, rgba(255,229,143,.20), transparent 42%), rgba(0,0,0,.20);
  padding: 8px 10px;
}
#gameScreen .broadcast-scoreline { display:flex; align-items:center; gap: 14px; color:#fff; font-weight:950; font-size: 22px; }
#gameScreen .score-ball { filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
#gameScreen .broadcast-turn-label {
  background: transparent !important; border: 0 !important; min-width: 0 !important; padding: 0 !important;
  font-size: clamp(13px, 1.7vw, 17px); color:#ffe58f; font-weight:950; text-transform: uppercase; letter-spacing:.06em;
}
#gameScreen .broadcast-clock, #gameScreen .broadcast-turn-clock { color: rgba(230,246,255,.88); font-weight:800; }
#gameScreen .broadcast-weather { margin-top: 2px; display:flex; gap:6px; align-items:center; color:#dff7ff; font-weight:900; font-size:12px; }
#gameScreen .broadcast-turn-banner {
  width: fit-content; margin: 8px auto 0; padding: 8px 18px; border-radius: 999px;
  color:#07111f; background: linear-gradient(135deg, #ffe58f, #7edbff);
  font-weight: 950; letter-spacing:.08em; text-transform:uppercase;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(-8px) scale(.96); pointer-events:none;
}
#gameScreen .broadcast-turn-banner.pulse { animation: broadcastTurnPulse 900ms ease both; }
@keyframes broadcastTurnPulse { 0%{opacity:0; transform:translateY(-12px) scale(.94)} 18%,78%{opacity:1; transform:translateY(0) scale(1)} 100%{opacity:0; transform:translateY(8px) scale(.98)} }
#gameScreen .broadcast-ability-strip {
  width: min(1180px, calc(100vw - 24px)); margin: 0 auto 8px;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px; z-index:5; position:relative;
}
#gameScreen .broadcast-ability {
  display:flex; align-items:center; gap:9px; min-width:0; padding:8px 12px; border-radius:16px;
  background: linear-gradient(135deg, rgba(7, 33, 52, .82), rgba(4,14,28,.72));
  border: 1px solid rgba(126,219,255,.20); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#gameScreen .broadcast-ability span { font-size:20px; }
#gameScreen .broadcast-ability strong { font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
#gameScreen .broadcast-ability small { margin-left:auto; color:#ffe58f; font-weight:900; white-space:nowrap; }
#gameScreen .broadcast-ability.disabled { opacity:.48; filter: saturate(.65); }
#gameScreen .broadcast-ability.ready { border-color: rgba(255,229,143,.55); box-shadow: 0 0 18px rgba(255,229,143,.10), inset 0 1px 0 rgba(255,255,255,.08); }
#gameScreen .broadcast-overlay {
  position: fixed; left: 50%; top: 44%; transform: translate(-50%, -50%);
  z-index: 60; width: min(580px, calc(100vw - 36px)); padding: 26px 28px; text-align:center;
  border-radius: 28px; border: 1px solid rgba(255,255,255,.22);
  background: radial-gradient(circle at 50% 0%, rgba(255,229,143,.32), transparent 48%), linear-gradient(135deg, rgba(4,16,30,.95), rgba(10,49,66,.92));
  box-shadow: 0 30px 90px rgba(0,0,0,.56), 0 0 0 999px rgba(0,0,0,.18);
  animation: broadcastOverlayIn 2300ms ease both;
}
#gameScreen .broadcast-overlay.hidden { display:none; }
#gameScreen .broadcast-overlay-kicker { color:#7edbff; text-transform:uppercase; letter-spacing:.22em; font-weight:950; font-size:13px; }
#gameScreen .broadcast-overlay-title { color:#fff6b0; font-size: clamp(42px, 9vw, 86px); font-weight:1000; line-height:.98; text-shadow:0 0 24px rgba(255,229,143,.45); }
#gameScreen .broadcast-overlay-sub { color:#fff; font-size: clamp(20px, 4vw, 34px); font-weight:950; margin-top:8px; }
#gameScreen .broadcast-overlay.card-yellow .broadcast-overlay-title { color:#ffd83d; }
#gameScreen .broadcast-overlay.card-red .broadcast-overlay-title { color:#ff5467; }
@keyframes broadcastOverlayIn { 0%{opacity:0; transform:translate(-50%,-42%) scale(.9)} 10%,82%{opacity:1; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(-50%,-55%) scale(.98)} }
#gameScreen.goal-flash .board-stage { animation: goalBoardFlash 800ms ease; }
@keyframes goalBoardFlash { 0%,100%{filter:none} 28%{filter:brightness(1.35) saturate(1.25)} }
@media (max-width: 760px) {
  #gameScreen .broadcast-scoreboard { grid-template-columns:1fr; }
  #gameScreen .broadcast-center { order: -1; }
  #gameScreen .broadcast-ability-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #gameScreen .broadcast-team-copy span { font-size: 18px; }
}

/* Phase 3A v1.0.4D2: Compact Broadcast HUD optimization */
#gameScreen .broadcast-topbar {
  width: min(1220px, calc(100vw - 16px));
  margin: 4px auto 4px;
}
#gameScreen .broadcast-scoreboard {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, .58fr) minmax(260px, 1fr);
  gap: 6px;
  padding: 6px 8px;
  border-radius: 18px;
}
#gameScreen .broadcast-team {
  min-height: 44px;
  grid-template-columns: 38px minmax(0,1fr) 42px;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 14px;
}
#gameScreen .broadcast-team.red-side { grid-template-columns: 42px minmax(0,1fr) 38px; }
#gameScreen .broadcast-flag { width: 34px; height: 24px; border-radius: 7px; }
#gameScreen .broadcast-team-copy span {
  font-size: clamp(16px, 2vw, 22px);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  letter-spacing: .02em;
}
#gameScreen .broadcast-team-copy small { font-size: 8px; letter-spacing: .12em; }
#gameScreen .broadcast-score { font-size: clamp(24px, 3vw, 34px); }
#gameScreen .broadcast-center {
  min-height: 44px;
  gap: 0;
  padding: 4px 8px;
  border-radius: 14px;
}
#gameScreen .broadcast-scoreline { font-size: 20px; gap: 9px; line-height: 1; }
#gameScreen .broadcast-turn-label { font-size: clamp(12px, 1.45vw, 15px); line-height: 1.05; }
#gameScreen .broadcast-clock, #gameScreen .broadcast-turn-clock { font-size: 10px; line-height: 1.05; }
#gameScreen .broadcast-weather { margin-top: 0; font-size: 10px; line-height: 1.05; }
#gameScreen .broadcast-turn-banner { margin-top: 3px; padding: 4px 12px; font-size: 11px; }
#gameScreen .broadcast-ability-strip {
  width: min(880px, calc(100vw - 18px));
  margin: 0 auto 3px;
  gap: 5px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
#gameScreen .broadcast-ability {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 12px;
  gap: 6px;
}
#gameScreen .broadcast-ability span { font-size: 15px; }
#gameScreen .broadcast-ability strong { font-size: 10px; }
#gameScreen .broadcast-ability small { font-size: 10px; }
#gameScreen .power-hud-row {
  width: min(760px, calc(100vw - 18px));
  margin: 0 auto 3px;
  gap: 6px;
}
#gameScreen .curve-hud,
#gameScreen .volley-hud,
#gameScreen .goalie-ai-hud {
  padding: 7px 10px;
  border-radius: 14px;
}
#gameScreen .goalie-ai-hud {
  position: fixed;
  right: 12px;
  bottom: 62px;
  width: min(245px, calc(100vw - 24px));
  z-index: 18;
  opacity: .92;
}
#gameScreen .goalie-ai-title { font-size: 12px; }
#gameScreen .goalie-ai-status { font-size: 11px; }
#gameScreen .board-stage { padding: 0 6px 14px; }
#gameScreen .match-panel { top: 4px; max-height: calc(100vh - 12px); }

@media (max-width: 1180px) {
  #gameScreen .broadcast-scoreboard { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  #gameScreen .broadcast-team-copy span { font-size: clamp(14px, 2.6vw, 20px); }
  #gameScreen .broadcast-team { grid-template-columns: 34px minmax(0,1fr) 34px; padding: 5px 8px; }
  #gameScreen .broadcast-team.red-side { grid-template-columns: 34px minmax(0,1fr) 34px; }
}
@media (max-width: 760px) {
  #gameScreen .broadcast-topbar { width: calc(100vw - 8px); margin: 2px auto; }
  #gameScreen .broadcast-scoreboard {
    grid-template-columns: 1fr;
    padding: 5px;
    gap: 4px;
  }
  #gameScreen .broadcast-center { order: -1; min-height: 34px; }
  #gameScreen .broadcast-team { min-height: 34px; }
  #gameScreen .broadcast-team-copy span {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #gameScreen .broadcast-score { font-size: 23px; }
  #gameScreen .broadcast-flag { width: 30px; height: 20px; }
  #gameScreen .broadcast-ability-strip {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 3px;
    width: calc(100vw - 8px);
  }
  #gameScreen .broadcast-ability { padding: 4px 5px; gap: 3px; }
  #gameScreen .broadcast-ability strong { display:none; }
  #gameScreen .broadcast-ability small { font-size: 9px; }
  #gameScreen .power-hud-row { width: calc(100vw - 8px); }
  #gameScreen .goalie-ai-hud { right: 6px; bottom: 46px; }
  #gameScreen .board-stage { padding-bottom: 8px; }
}

/* Phase 3A v1.0.4D2: Match layout alignment pass */
#gameScreen {
  width: min(1600px, calc(100vw - 24px));
  margin: 0 auto;
}
#gameScreen .broadcast-topbar {
  width: min(1180px, calc(100vw - 410px));
  margin: 4px 0 8px 0;
}
#gameScreen .game-wrap {
  display: grid;
  grid-template-columns: minmax(760px, 1180px) 360px;
  gap: 18px;
  align-items: start;
  padding-right: 0;
}
#gameScreen .game-main-play-area {
  width: 100%;
  min-width: 0;
}
#gameScreen .board-stage {
  width: 100%;
  max-width: 1180px;
  padding: 0 0 8px;
  margin: 0;
}
#gameScreen canvas {
  width: 100%;
  max-width: 1180px;
}
#gameScreen .broadcast-ability-strip {
  width: 100%;
  max-width: 1180px;
  margin: 4px 0 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#gameScreen .match-panel {
  position: static;
  width: 360px;
  max-height: calc(100vh - 18px);
  overflow: auto;
  margin: 0;
}
#gameScreen .side-feature-controls {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
}
#gameScreen .side-power-hud-row {
  width: 100%;
  min-height: 0;
  margin: 0;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 8px;
  justify-content: stretch;
  align-items: stretch;
}
#gameScreen .side-power-hud-row .curve-hud,
#gameScreen .side-power-hud-row .volley-hud,
#gameScreen .side-power-hud-row .goalie-ai-hud {
  width: 100%;
  min-height: auto;
  margin: 0;
  padding: 10px;
  position: static;
  right: auto;
  bottom: auto;
  opacity: 1;
  border-radius: 14px;
}
#gameScreen .side-power-hud-row .goalie-ai-hud.hidden { display: none !important; }
#gameScreen .side-power-hud-row .curve-buttons button { padding: 8px 6px; }
#gameScreen .rules-toggle { display: none; }
#setupScreen .review-rules-toggle {
  display: block;
  margin: 14px 0 0;
  border: 1px solid rgba(126,231,255,.18);
  border-radius: 16px;
  padding: 10px;
  background: rgba(7, 22, 36, .42);
}
#setupScreen .review-rules-toggle summary {
  cursor: pointer;
  font-weight: 950;
  color: #ffe58f;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}
#setupScreen .review-rules-toggle ul {
  max-height: 220px;
  overflow: auto;
  padding-right: 8px;
}
@media (max-width: 1180px) {
  #gameScreen { width: calc(100vw - 10px); }
  #gameScreen .broadcast-topbar { width: 100%; margin-left: 0; }
  #gameScreen .game-wrap { grid-template-columns: 1fr; gap: 10px; }
  #gameScreen .match-panel { width: 100%; max-height: none; }
  #gameScreen .side-power-hud-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #gameScreen .broadcast-ability-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #gameScreen .side-power-hud-row { grid-template-columns: 1fr; }
}

/* Phase 3A v1.0.4D3: Mobile Match Experience
   Desktop keeps the v1.0.4D2 two-column broadcast layout. Mobile gets its
   own gameplay-first interface with compact HUD, drawer controls and
   collapsible actions. */
.mobile-match-toolbar { display: none; }

@media (max-width: 820px) {
  body:has(#gameScreen:not(.hidden)) {
    overflow-x: hidden;
  }
  #gameScreen {
    width: 100vw;
    min-height: 100dvh;
    margin: 0;
    padding: 0 4px 58px;
  }
  #gameScreen .broadcast-topbar {
    position: sticky;
    top: 0;
    z-index: 22;
    width: calc(100vw - 8px);
    margin: 0 auto 3px;
    min-height: 0;
    padding: 3px 0;
    backdrop-filter: blur(12px);
  }
  #gameScreen .broadcast-scoreboard {
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    gap: 3px;
    padding: 4px;
    border-radius: 14px;
  }
  #gameScreen .broadcast-center {
    order: 0;
    min-height: 40px;
    min-width: 82px;
    padding: 4px 6px;
  }
  #gameScreen .broadcast-scoreline { font-size: 18px; gap: 6px; }
  #gameScreen .broadcast-turn-label { font-size: 11px; max-width: 94px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #gameScreen .broadcast-clock, #gameScreen .broadcast-turn-clock, #gameScreen .broadcast-weather { font-size: 8px; }
  #gameScreen .broadcast-team,
  #gameScreen .broadcast-team.red-side {
    grid-template-columns: 24px minmax(0,1fr) 28px;
    min-height: 42px;
    padding: 4px 5px;
    border-radius: 13px;
    gap: 4px;
  }
  #gameScreen .broadcast-team.red-side { grid-template-columns: 28px minmax(0,1fr) 24px; }
  #gameScreen .broadcast-team-copy span { font-size: 12px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #gameScreen .broadcast-team-copy small { display: none; }
  #gameScreen .broadcast-score { font-size: 22px; }
  #gameScreen .broadcast-flag { width: 24px; height: 16px; border-radius: 4px; }
  #gameScreen .broadcast-turn-banner { display: none; }

  #gameScreen .game-wrap {
    display: block;
    padding: 0;
    margin: 0;
  }
  #gameScreen .game-main-play-area {
    width: 100%;
  }
  #gameScreen .board-stage {
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
  }
  #gameScreen canvas {
    width: 100%;
    max-width: none;
    display: block;
    touch-action: none;
    border-radius: 16px;
  }
  #gameScreen .broadcast-ability-strip {
    position: fixed;
    left: 6px;
    right: 6px;
    bottom: 55px;
    z-index: 20;
    width: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    pointer-events: none;
  }
  #gameScreen .broadcast-ability {
    min-height: 28px;
    padding: 3px 4px;
    border-radius: 11px;
    gap: 3px;
    background: rgba(5, 12, 20, .72);
    backdrop-filter: blur(10px);
  }
  #gameScreen .broadcast-ability span { font-size: 13px; }
  #gameScreen .broadcast-ability strong { display: none; }
  #gameScreen .broadcast-ability small { font-size: 9px; }

  .mobile-match-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    position: fixed;
    left: 6px;
    right: 6px;
    bottom: 6px;
    z-index: 35;
    padding: 6px;
    border-radius: 18px;
    background: rgba(4, 10, 18, .88);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 -14px 32px rgba(0,0,0,.35);
    backdrop-filter: blur(14px);
  }
  .mobile-match-toolbar button {
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 8px 6px;
    font-size: 12px;
    border-radius: 13px;
  }

  #gameScreen .match-panel {
    position: fixed;
    left: 6px;
    right: 6px;
    bottom: 58px;
    z-index: 34;
    width: auto;
    max-height: min(62dvh, 410px);
    margin: 0;
    overflow: auto;
    transform: translateY(calc(100% + 74px));
    transition: transform .22s ease;
    border-radius: 20px 20px 16px 16px;
    background: rgba(8, 18, 28, .96);
    box-shadow: 0 -18px 42px rgba(0,0,0,.42);
  }
  #gameScreen.mobile-controls-open .match-panel,
  #gameScreen.mobile-actions-open .match-panel {
    transform: translateY(0);
  }
  #gameScreen .match-panel h2 { font-size: 15px; }
  #gameScreen .panel-actions,
  #gameScreen .panel-narration,
  #gameScreen .side-feature-controls { display: none; }
  #gameScreen.mobile-controls-open .panel-actions,
  #gameScreen.mobile-controls-open .side-feature-controls,
  #gameScreen.mobile-actions-open .panel-narration { display: block; }
  #gameScreen.mobile-controls-open .panel-narration { display: none; }
  #gameScreen.mobile-actions-open .panel-actions,
  #gameScreen.mobile-actions-open .side-feature-controls { display: none; }
  #gameScreen .side-power-hud-row { grid-template-columns: 1fr; }
  #gameScreen .match-panel .log { max-height: 260px; min-height: 150px; }

  #gameScreen.mobile-hud-hidden .broadcast-topbar,
  #gameScreen.mobile-hud-hidden .broadcast-ability-strip {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
  }
  #gameScreen.mobile-hud-hidden .broadcast-ability-strip { transform: translateY(8px); }
}

@media (max-width: 820px) and (orientation: landscape) {
  #gameScreen {
    padding: 0 4px 50px;
    min-height: 100dvh;
  }
  #gameScreen .broadcast-topbar {
    position: fixed;
    left: 6px;
    right: 6px;
    top: 4px;
    width: auto;
    opacity: .93;
  }
  #gameScreen .broadcast-scoreboard {
    grid-template-columns: minmax(0, .8fr) auto minmax(0, .8fr);
    max-width: 620px;
    margin: 0 auto;
  }
  #gameScreen .broadcast-team,
  #gameScreen .broadcast-team.red-side { min-height: 34px; }
  #gameScreen .broadcast-center { min-height: 32px; }
  #gameScreen .broadcast-scoreline { font-size: 15px; }
  #gameScreen .broadcast-score { font-size: 18px; }
  #gameScreen .broadcast-clock, #gameScreen .broadcast-weather { display: none; }
  #gameScreen .board-stage {
    height: calc(100dvh - 54px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #gameScreen canvas {
    width: min(100vw - 8px, calc((100dvh - 54px) * 1.714));
    max-height: calc(100dvh - 54px);
  }
  #gameScreen .broadcast-ability-strip {
    left: auto;
    right: 6px;
    bottom: 55px;
    width: min(240px, 42vw);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #gameScreen .match-panel { max-height: calc(100dvh - 70px); }
}

/* Phase 3A v1.0.4D3 Fix 1: Real-device mobile field overlays.
   Desktop keeps the v1.0.4D2/1.0.4D3 layout. Mobile no longer reserves bottom
   toolbar space; score/features float over the field and can be hidden by an
   empty-field tap. */
.mobile-score-controls-toggle { display: none; }

@media (max-width: 820px) {
  body:has(#gameScreen:not(.hidden)) {
    overflow: hidden;
    height: 100dvh;
  }
  #gameScreen {
    position: relative;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #gameScreen .game-wrap,
  #gameScreen .game-main-play-area,
  #gameScreen .board-stage {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0;
  }
  #gameScreen .board-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    overflow: hidden;
  }
  #gameScreen canvas {
    width: min(100vw, calc(100dvh * 1.7142857));
    height: auto;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    touch-action: none;
  }

  #gameScreen .broadcast-topbar {
    position: fixed;
    left: 50%;
    top: max(4px, env(safe-area-inset-top));
    transform: translateX(-50%);
    z-index: 40;
    width: min(96vw, 680px);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  #gameScreen .broadcast-scoreboard {
    width: 100%;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
    background: rgba(4, 10, 18, .76);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 28px rgba(0,0,0,.34);
    backdrop-filter: blur(12px);
  }
  #gameScreen .broadcast-center { min-width: 88px; padding: 4px 5px; }
  #gameScreen .broadcast-team,
  #gameScreen .broadcast-team.red-side { min-height: 38px; }
  #gameScreen .broadcast-turn-banner { display: none !important; }
  .mobile-score-controls-toggle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 24px;
    margin: 3px auto 0;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(255,229,143,.92);
    color: #07111f;
    border: 0;
  }

  #mobileMatchToolbar { display: none !important; }
  #gameScreen .broadcast-ability-strip {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: max(6px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 38;
    width: min(96vw, 560px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 5px;
    margin: 0;
    pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease;
  }
  #gameScreen .broadcast-ability {
    min-height: 34px;
    justify-content: center;
    gap: 4px;
    padding: 4px 5px;
    border-radius: 12px;
    background: rgba(4, 10, 18, .76);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
    backdrop-filter: blur(12px);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  #gameScreen .broadcast-ability span { font-size: 14px; }
  #gameScreen .broadcast-ability strong { display: none; }
  #gameScreen .broadcast-ability small { margin: 0; font-size: 10px; }
  #gameScreen .broadcast-ability.disabled { cursor: default; }
  #gameScreen .broadcast-ability.ready,
  #gameScreen .broadcast-ability.mobile-active {
    border-color: rgba(255,229,143,.72);
    background: rgba(255,229,143,.88);
    color: #07111f;
    filter: none;
  }
  #gameScreen .broadcast-ability.curve-choice-open {
    grid-column: span 2;
  }
  #gameScreen .mobile-curve-popover {
    position: fixed;
    left: 50%;
    bottom: calc(max(48px, env(safe-area-inset-bottom) + 48px));
    transform: translateX(-50%);
    z-index: 44;
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: min(88vw, 330px);
    padding: 7px;
    border-radius: 16px;
    background: rgba(4, 10, 18, .90);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 12px 32px rgba(0,0,0,.36);
    backdrop-filter: blur(14px);
  }
  #gameScreen.mobile-curve-open .mobile-curve-popover { display: grid; }
  #gameScreen .mobile-curve-popover button {
    min-height: 34px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 12px;
    font-size: 12px;
  }

  #gameScreen .match-panel {
    position: fixed;
    left: 50%;
    top: calc(max(4px, env(safe-area-inset-top)) + 64px);
    bottom: auto;
    transform: translate(-50%, -12px);
    opacity: 0;
    pointer-events: none;
    z-index: 42;
    width: min(94vw, 520px);
    max-height: min(52dvh, 300px);
    overflow: auto;
    margin: 0;
    border-radius: 18px;
    background: rgba(8, 18, 28, .95);
    box-shadow: 0 16px 38px rgba(0,0,0,.44);
    transition: opacity .18s ease, transform .18s ease;
  }
  #gameScreen.mobile-controls-open .match-panel,
  #gameScreen.mobile-actions-open .match-panel {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }
  #gameScreen .panel-actions,
  #gameScreen .panel-narration,
  #gameScreen .side-feature-controls { display: none !important; }
  #gameScreen.mobile-controls-open .panel-actions { display: block !important; }
  #gameScreen.mobile-actions-open .panel-narration { display: block !important; }

  #gameScreen.mobile-hud-hidden .broadcast-topbar {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -10px);
  }
  #gameScreen.mobile-hud-hidden .broadcast-ability-strip {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
  }
  #gameScreen.mobile-hud-hidden .mobile-curve-popover { display: none; }
}

@media (max-width: 820px) and (orientation: landscape) {
  #gameScreen canvas {
    width: min(100vw, calc(100dvh * 1.7142857));
    max-height: 100dvh;
  }
  #gameScreen .broadcast-topbar {
    width: min(94vw, 620px);
  }
  #gameScreen .broadcast-scoreboard { padding: 3px; }
  #gameScreen .broadcast-team,
  #gameScreen .broadcast-team.red-side {
    min-height: 30px;
    padding: 3px 5px;
  }
  #gameScreen .broadcast-center {
    min-height: 28px;
    min-width: 80px;
    padding: 2px 5px;
  }
  #gameScreen .broadcast-scoreline { font-size: 14px; }
  #gameScreen .broadcast-score { font-size: 17px; }
  #gameScreen .broadcast-team-copy span { font-size: 10px; }
  #gameScreen .broadcast-flag { width: 20px; height: 13px; }
  #gameScreen .broadcast-clock,
  #gameScreen .broadcast-turn-clock,
  #gameScreen .broadcast-weather { display: none !important; }
  .mobile-score-controls-toggle { min-height: 20px; padding: 2px 8px; font-size: 9px; }
  #gameScreen .broadcast-ability-strip {
    width: min(70vw, 420px);
    bottom: max(4px, env(safe-area-inset-bottom));
  }
  #gameScreen .broadcast-ability {
    min-height: 28px;
    padding: 3px 4px;
  }
  #gameScreen .broadcast-ability span { font-size: 12px; }
  #gameScreen .broadcast-ability small { font-size: 9px; }
  #gameScreen .match-panel {
    top: calc(max(4px, env(safe-area-inset-top)) + 46px);
    max-height: calc(100dvh - 92px);
    width: min(78vw, 520px);
  }
}


/* Phase 3A v1.0.4D3 Fix 2: mobile landscape overlay correction.
   Keeps desktop unchanged, hides the mobile curve popover by default, broadens
   real-device landscape detection, and brings portrait feature controls closer
   to the field. */
.mobile-curve-popover { display: none; }

@media (max-width: 820px) and (orientation: portrait) {
  #gameScreen .board-stage {
    align-items: flex-start;
    padding-top: max(52px, calc(env(safe-area-inset-top) + 48px));
    box-sizing: border-box;
  }
  #gameScreen canvas {
    width: min(100vw, calc((100dvh - 102px) * 1.7142857));
    max-height: calc(100dvh - 102px);
  }
  #gameScreen .broadcast-ability-strip {
    top: calc(max(52px, env(safe-area-inset-top) + 48px) + min(58.333vw, calc(100dvh - 102px)) + 6px);
    bottom: auto;
  }
  #gameScreen .mobile-curve-popover {
    top: calc(max(52px, env(safe-area-inset-top) + 48px) + min(58.333vw, calc(100dvh - 102px)) + 48px);
    bottom: auto;
  }
  #gameScreen.mobile-hud-hidden .broadcast-ability-strip {
    transform: translate(-50%, 8px);
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape),
       (max-width: 1180px) and (max-height: 640px) and (orientation: landscape) {
  body:has(#gameScreen:not(.hidden)) {
    overflow: hidden;
    height: 100dvh;
  }
  #gameScreen {
    position: relative;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
  }
  #gameScreen .game-wrap,
  #gameScreen .game-main-play-area,
  #gameScreen .board-stage {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0 !important;
  }
  #gameScreen .game-wrap { display: block; }
  #gameScreen .game-main-play-area { position: relative; }
  #gameScreen .board-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    overflow: hidden;
  }
  #gameScreen canvas {
    width: min(100vw, calc(100dvh * 1.7142857)) !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: block;
    touch-action: none;
  }
  #gameScreen .broadcast-topbar {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: max(4px, env(safe-area-inset-top)) !important;
    transform: translateX(-50%) !important;
    z-index: 50;
    width: min(94vw, 620px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transition: opacity .18s ease, transform .18s ease;
  }
  #gameScreen .broadcast-scoreboard {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
    gap: 3px;
    padding: 3px;
    border-radius: 14px;
    background: rgba(4, 10, 18, .76);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 28px rgba(0,0,0,.34);
    backdrop-filter: blur(12px);
  }
  #gameScreen .broadcast-team,
  #gameScreen .broadcast-team.red-side {
    min-height: 30px;
    padding: 3px 5px;
  }
  #gameScreen .broadcast-center {
    min-height: 28px;
    min-width: 80px;
    padding: 2px 5px;
  }
  #gameScreen .broadcast-turn-banner { display: none !important; }
  #gameScreen .broadcast-scoreline { font-size: 14px; }
  #gameScreen .broadcast-score { font-size: 17px; }
  #gameScreen .broadcast-team-copy span { font-size: 10px; }
  #gameScreen .broadcast-flag { width: 20px; height: 13px; }
  #gameScreen .broadcast-clock,
  #gameScreen .broadcast-turn-clock,
  #gameScreen .broadcast-weather { display: none !important; }
  #mobileMatchToolbar { display: none !important; }
  .mobile-score-controls-toggle {
    display: inline-flex;
    min-height: 20px;
    padding: 2px 8px;
    font-size: 9px;
  }
  #gameScreen .broadcast-ability-strip {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    z-index: 48;
    width: min(70vw, 420px) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px;
    margin: 0 !important;
    pointer-events: auto !important;
  }
  #gameScreen .broadcast-ability {
    min-height: 28px;
    padding: 3px 4px;
    border-radius: 11px;
    background: rgba(4, 10, 18, .76);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
    backdrop-filter: blur(12px);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto !important;
  }
  #gameScreen .broadcast-ability span { font-size: 12px; }
  #gameScreen .broadcast-ability strong { display: none; }
  #gameScreen .broadcast-ability small { font-size: 9px; }
  #gameScreen .broadcast-ability.ready,
  #gameScreen .broadcast-ability.mobile-active {
    border-color: rgba(255,229,143,.72);
    background: rgba(255,229,143,.88);
    color: #07111f;
    filter: none;
  }
  #gameScreen .mobile-curve-popover {
    position: fixed;
    left: 50%;
    bottom: calc(max(42px, env(safe-area-inset-bottom) + 42px));
    top: auto;
    transform: translateX(-50%);
    z-index: 54;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: min(88vw, 330px);
    padding: 7px;
    border-radius: 16px;
    background: rgba(4, 10, 18, .90);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 12px 32px rgba(0,0,0,.36);
    backdrop-filter: blur(14px);
  }
  #gameScreen.mobile-curve-open .mobile-curve-popover { display: grid; }
  #gameScreen .mobile-curve-popover button {
    min-height: 34px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 12px;
    font-size: 12px;
  }
  #gameScreen .match-panel {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: calc(max(4px, env(safe-area-inset-top)) + 46px) !important;
    bottom: auto !important;
    transform: translate(-50%, -12px) !important;
    opacity: 0;
    pointer-events: none;
    z-index: 52;
    width: min(78vw, 520px) !important;
    max-height: calc(100dvh - 92px) !important;
    overflow: auto;
    margin: 0 !important;
    border-radius: 18px;
    background: rgba(8, 18, 28, .95);
    box-shadow: 0 16px 38px rgba(0,0,0,.44);
    transition: opacity .18s ease, transform .18s ease;
  }
  #gameScreen.mobile-controls-open .match-panel,
  #gameScreen.mobile-actions-open .match-panel {
    transform: translate(-50%, 0) !important;
    opacity: 1;
    pointer-events: auto;
  }
  #gameScreen .panel-actions,
  #gameScreen .panel-narration,
  #gameScreen .side-feature-controls { display: none !important; }
  #gameScreen.mobile-controls-open .panel-actions { display: block !important; }
  #gameScreen.mobile-actions-open .panel-narration { display: block !important; }
  #gameScreen.mobile-hud-hidden .broadcast-topbar {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -10px) !important;
  }
  #gameScreen.mobile-hud-hidden .broadcast-ability-strip {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, 10px) !important;
  }
  #gameScreen.mobile-hud-hidden .mobile-curve-popover { display: none !important; }
}

/* Phase 3B v1.0.5: League Modernization Part 1 */
.league-modern-screen {
  max-width: 1180px;
}
.league-modern-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(19, 39, 71, .92), rgba(14, 88, 68, .82));
  box-shadow: 0 16px 40px rgba(0,0,0,.24);
}
.league-modern-hero h1 { margin: 2px 0 4px; }
.league-modern-subtitle { margin: 0; color: rgba(255,255,255,.78); max-width: 760px; }
.league-modern-badge {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  font-weight: 800;
}
.league-modern-screen > .setup-box,
.league-modern-manager {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7, 18, 33, .78);
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
}
.league-modern-screen .edit-filter-grid label,
.league-modern-screen .toggle-row {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.055);
}
.league-modern-screen select,
.league-modern-screen input[type="range"] {
  margin-top: 7px;
}
.league-selected-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.league-team-chip {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  padding: 12px;
}
.league-team-chip button { margin-top: 8px; }
.human-team-chip { box-shadow: inset 3px 0 0 rgba(88, 211, 143, .95); }
.com-team-chip { box-shadow: inset 3px 0 0 rgba(119, 178, 255, .85); }
.league-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 18px;
}
.league-overview-card {
  min-height: 92px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.league-overview-card.primary {
  background: linear-gradient(135deg, rgba(41, 151, 255, .28), rgba(50, 214, 135, .18));
}
.league-overview-card.wide { grid-column: span 1; }
.league-overview-card span { color: rgba(255,255,255,.68); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.league-overview-card strong { font-size: clamp(1.05rem, 2vw, 1.42rem); line-height: 1.15; }
.league-overview-card small { color: rgba(255,255,255,.66); }
.league-fixture-cards,
.league-result-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.league-modern-fixture-card,
.league-result-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 13px;
  background: rgba(255,255,255,.065);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.league-modern-fixture-card.is-next {
  border-color: rgba(105, 220, 140, .66);
  box-shadow: 0 0 0 1px rgba(105, 220, 140, .18), 0 14px 30px rgba(0,0,0,.20);
}
.league-card-topline,
.league-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(255,255,255,.68);
  font-size: .78rem;
}
.league-card-topline strong {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
}
.league-card-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 13px 0;
}
.league-card-team {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.league-card-team:last-child { text-align: right; align-items: flex-end; }
.league-card-badge { font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.league-card-team small { color: rgba(255,255,255,.55); }
.league-card-score {
  min-width: 58px;
  text-align: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.24);
  font-weight: 900;
  font-size: 1.05rem;
}
.league-card-action { width: 100%; margin-top: 12px; }
.league-result-card { display: flex; flex-direction: column; gap: 5px; }
.league-result-card span { color: rgba(255,255,255,.62); font-size: .78rem; text-transform: uppercase; }
.league-result-card small { color: rgba(255,255,255,.62); }
.league-modern-standings table { width: 100%; border-collapse: collapse; }
.league-modern-standings th,
.league-modern-standings td { padding: 8px 9px; text-align: center; }
.league-modern-standings th:nth-child(2),
.league-modern-standings td:nth-child(2) { text-align: left; }
.league-form-cell { min-width: 98px; }
.form-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 1px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  background: rgba(255,255,255,.12);
}
.form-w { background: rgba(72, 214, 121, .32); }
.form-d { background: rgba(255, 212, 89, .28); }
.form-l { background: rgba(255, 96, 96, .30); }
@media (max-width: 800px) {
  .league-modern-hero { align-items: flex-start; flex-direction: column; }
  .league-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .league-fixture-cards,
  .league-result-cards { grid-template-columns: 1fr; }
  .league-modern-standings { overflow-x: auto; }
  .league-modern-standings table { min-width: 760px; }
}
@media (max-width: 520px) {
  .league-overview-grid { grid-template-columns: 1fr; }
  .league-card-matchup { grid-template-columns: 1fr; }
  .league-card-score { width: 100%; }
  .league-card-team:last-child { text-align: left; align-items: flex-start; }
}

/* Phase 3B - 1.0.5A Competition setup alignment */
.league-competition-setup { overflow:hidden; }
.competition-tabs {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin:16px 0 18px;
  padding:8px;
  border-radius:22px;
  background:rgba(3,12,28,.58);
  border:1px solid rgba(126,231,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
.competition-tab {
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:11px 10px;
  cursor:pointer;
  color:#d8f9ff;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  font-weight:900;
  letter-spacing:.02em;
  min-height:42px;
}
.competition-tab.active {
  color:#05222c;
  border-color:rgba(126,231,255,.82);
  background:linear-gradient(135deg, #7ee7ff, #a6ffce);
  box-shadow:0 10px 24px rgba(126,231,255,.20);
}
.league-tab-panel { display:none; animation: leaguePanelIn .18s ease-out; }
.league-tab-panel.active { display:block; }
@keyframes leaguePanelIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.league-arrow-grid select.league-native-hidden {
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.league-arrow-shell {
  display:grid;
  gap:7px;
  padding:11px;
  border-radius:18px;
  min-height:96px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(126,231,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.league-arrow-title {
  font-size:11px;
  color:#9bdff2;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:900;
}
.league-arrow-control {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  gap:8px;
  align-items:center;
}
.league-arrow-btn {
  width:42px;
  min-height:40px;
  border-radius:14px;
  border:1px solid rgba(126,231,255,.22);
  background:rgba(3,12,28,.72);
  color:#e8fbff;
  font-size:20px;
  font-weight:1000;
  cursor:pointer;
}
.league-arrow-btn:active { transform:scale(.96); }
.league-arrow-value {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 10px;
  border-radius:14px;
  text-align:center;
  color:#fff;
  font-weight:900;
  background:linear-gradient(180deg, rgba(126,231,255,.16), rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.10);
}
.league-setup-review-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin-top:12px;
}
.league-review-card {
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(126,231,255,.16);
}
.league-review-card span { display:block; font-size:11px; color:#9bdff2; text-transform:uppercase; letter-spacing:.06em; font-weight:900; margin-bottom:5px; }
.league-review-card strong { display:block; color:#fff; font-size:16px; }
.league-setup-nav { justify-content:space-between; flex-wrap:wrap; }
.league-setup-nav::before { content:'League setup uses section tabs and arrow selectors like Friendly Match.'; color:#9bdff2; font-size:12px; align-self:center; }
@media (max-width:720px) {
  .competition-tabs { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .competition-tab { padding:10px 8px; font-size:13px; }
  .league-arrow-control { grid-template-columns:38px minmax(0,1fr) 38px; }
  .league-arrow-btn { width:38px; min-height:38px; }
}

/* Phase 3B - 1.0.5B League Friendly-Match alignment */
.league-feature-card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:14px;
}
.league-feature-card {
  min-height:150px;
  margin:0;
  cursor:pointer;
}
.league-feature-card input {
  position:absolute;
  top:12px;
  right:12px;
  width:20px;
  height:20px;
}
.league-feature-card small {
  color:rgba(235,245,255,.72);
}
.league-prematch-kits {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
  margin:14px 0 8px;
}
.league-kit-card {
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border-radius:18px;
  padding:14px;
  box-shadow:0 14px 30px rgba(0,0,0,.25);
}
.league-kit-title {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.league-kit-title span {
  color:rgba(235,245,255,.65);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  font-weight:900;
}
.league-kit-title strong {
  color:#fff0a8;
  text-align:right;
}
.league-prematch-kits .kit-disc { cursor:pointer; }
.league-prematch-kits .kit-color-palette { margin-top:10px; }
@media (max-width:720px) {
  .league-feature-card-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .league-feature-card { min-height:138px; padding:14px; }
  .league-feature-card .feature-icon { width:42px; height:42px; font-size:22px; }
}

/* Phase 3B - v1.0.6 Cup Modernization */
.cup-modern-screen .league-modern-hero { margin-bottom: 18px; }
.cup-modern-screen .wc2026-hero { margin-bottom: 16px; }
.cup-modern-screen .cup-competition-setup { border-color: rgba(255,229,143,.22); }
.cup-modern-screen .cup-tab-panel { display: none; }
.cup-modern-screen .cup-tab-panel.active { display: block; }
.cup-modern-screen .cup-feature-card-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cup-modern-manager .league-modern-fixture-card.next-fixture-card,
.cup-modern-manager .league-modern-fixture-card.is-next { border-color: rgba(105,220,140,.66); box-shadow: 0 0 0 1px rgba(105,220,140,.18), 0 14px 30px rgba(0,0,0,.20); }
.league-modern-result-card { border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 13px; background: rgba(255,255,255,.065); box-shadow: 0 10px 24px rgba(0,0,0,.16); display:flex; flex-direction:column; gap:6px; }
.league-fixture-main, .league-fixture-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.league-fixture-meta { color: rgba(255,255,255,.68); font-size:.82rem; }
.champion-card { border-color: rgba(255,229,143,.55); background: linear-gradient(135deg, rgba(255,229,143,.18), rgba(126,231,255,.10)); }

/* Phase 3B - v1.0.7 World Cup Modernization */
.world-cup-hub {
  display:grid;
  grid-template-columns: 1.35fr repeat(3, minmax(150px, .75fr));
  gap:12px;
  margin:14px 0 16px;
}
.world-cup-hub.hidden { display:none !important; }
.world-cup-hub-card {
  border:1px solid rgba(255,229,143,.18);
  border-radius:20px;
  padding:14px;
  background:linear-gradient(145deg, rgba(255,229,143,.10), rgba(126,231,255,.055));
  box-shadow:0 14px 32px rgba(0,0,0,.20);
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.world-cup-hub-card.primary { background:linear-gradient(135deg, rgba(25,94,166,.40), rgba(8,123,73,.26)); border-color:rgba(126,231,255,.24); }
.world-cup-hub-card span { color:#9bdff2; text-transform:uppercase; letter-spacing:.07em; font-size:11px; font-weight:900; }
.world-cup-hub-card strong { color:#fff0a8; font-size:clamp(1.05rem, 2vw, 1.45rem); line-height:1.12; }
.world-cup-hub-card small { color:rgba(235,245,255,.72); }
.world-cup-manager-tabs { grid-template-columns:repeat(4, minmax(0,1fr)); }
.world-cup-modern-group-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(285px, 1fr)); gap:12px; }
.world-cup-modern-group-card {
  border:1px solid rgba(126,231,255,.15);
  border-radius:20px;
  padding:13px;
  background:rgba(255,255,255,.055);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.world-cup-modern-group-card h4 { display:flex; justify-content:space-between; align-items:center; margin:0 0 10px; color:#ffe184; }
.world-cup-modern-group-card h4 span { color:rgba(235,245,255,.62); font-size:12px; }
.world-cup-group-row {
  display:grid;
  grid-template-columns: minmax(0,1fr) 36px 42px 46px;
  align-items:center;
  gap:8px;
  padding:8px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  margin:6px 0;
  background:rgba(0,0,0,.14);
}
.world-cup-group-row.qualify { background:rgba(72,214,121,.16); border-color:rgba(72,214,121,.23); }
.world-cup-group-row.third { background:rgba(255,225,132,.105); border-color:rgba(255,225,132,.18); }
.world-cup-group-row span:not(.wc-team-badge):not(.wc-team-flag):not(.wc-team-name) { text-align:center; color:rgba(235,245,255,.76); font-weight:850; }
.world-cup-bracket-grid { display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; }
.world-cup-bracket-round { min-width:290px; border:1px solid rgba(255,229,143,.17); border-radius:20px; padding:12px; background:rgba(255,255,255,.05); }
.world-cup-bracket-round h4 { margin:0 0 10px; color:#ffe184; }
.world-cup-bracket-match { border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:10px; margin:9px 0; background:rgba(0,0,0,.18); }
.world-cup-bracket-match.winner-known { border-color:rgba(72,214,121,.23); }
.world-cup-bracket-team { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:4px 0; }
.world-cup-bracket-team.is-winner { color:#fff0a8; font-weight:1000; }
.world-cup-scoreline { text-align:center; color:#ffe184; font-weight:1000; padding:6px 0; }
.world-cup-scoreline.pending { color:rgba(235,245,255,.65); }
.cup-modern-manager.world-cup-active [data-wc-manager-panel].wc-manager-hidden { display:none !important; }
@media (max-width:900px) { .world-cup-hub { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px) { .world-cup-hub { grid-template-columns:1fr; } .world-cup-manager-tabs { grid-template-columns:repeat(2, minmax(0,1fr)); } .world-cup-group-row { grid-template-columns:minmax(0,1fr) 32px 38px 42px; font-size:12px; } }

.competition-formation-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 12px 0 10px;
}
.compact-arrow-selector {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.compact-arrow-selector button {
  min-height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff7b5;
  font-weight: 900;
  font-size: 20px;
}
.compact-arrow-selector span {
  text-align: center;
  font-weight: 900;
  color: #fff7b5;
}
.wc-third-ranking-card {
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
}
.wc-third-table .league-table-row {
  grid-template-columns: 40px 1.6fr .7fr .7fr .7fr .9fr;
}
.qualified-row {
  background: rgba(57, 211, 83, .13);
  border-left: 4px solid #48d46b;
}
@media (max-width: 760px) {
  .competition-formation-panel { grid-template-columns: 1fr; }
}

/* Phase 3B v1.0.7F: mobile menu touch confirmation + match-end decision visibility. */
@media (hover: none) and (pointer: coarse), (max-width: 820px) {
  .modern-mode-card {
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
  }
  .modern-mode-card:hover,
  .modern-mode-card:focus-visible {
    transform: none;
    filter: none;
  }
  .modern-mode-card .mode-card-action {
    min-height: 44px;
    min-width: 78px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,224,113,.24);
    border-color: rgba(255,224,113,.52);
    box-shadow: 0 8px 18px rgba(0,0,0,.24);
    touch-action: manipulation;
    cursor: pointer;
  }
  .modern-mode-card .mode-card-copy,
  .modern-mode-card .mode-card-icon {
    pointer-events: none;
  }
  .modern-mode-card .mode-card-action {
    pointer-events: auto;
  }
}

@media (hover: none) and (pointer: coarse), (max-width: 820px), (max-width: 1180px) and (max-height: 640px) {
  #gameScreen.match-ended .broadcast-topbar,
  #gameScreen.match-ended .broadcast-ability-strip {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) !important;
  }
  #gameScreen.match-ended .match-panel {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  #gameScreen.match-ended .panel-actions {
    display: block !important;
  }
}


/* Phase 3C - v1.0.8A Team Editor workflow polish */
.team-editor-workflow-card { display:grid; grid-template-columns: minmax(220px, 1fr) minmax(240px, 360px); gap:14px; align-items:center; padding:16px; margin:16px 0 18px; border-radius:20px; background:linear-gradient(135deg, rgba(143,241,255,.16), rgba(255,246,200,.07)); border:1px solid rgba(143,241,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.team-editor-workflow-card strong { display:block; color:#fff6c8; font-size:1.25rem; margin:4px 0; }
.team-editor-workflow-card small { color:#dfe8d1; line-height:1.35; }
.team-editor-workflow-card .workflow-arrow { min-height:54px; }
.team-editor-workflow-card .compact-selector-label { font-size:1rem; }
@media (max-width: 700px) { .team-editor-workflow-card { grid-template-columns:1fr; } }

/* Phase 3C - v1.0.8 Team Editor Modernization */
.modern-team-editor { max-width: 1120px; }
.team-editor-hero { margin-bottom: 18px; }
.team-editor-shell { border-color: rgba(143,241,255,.35); box-shadow: 0 18px 55px rgba(0,0,0,.28); }
.modern-edit-filter-grid { grid-template-columns: repeat(4, minmax(170px, 1fr)); align-items:end; }
.native-edit-select { position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; overflow:hidden !important; }
.team-editor-arrow-control { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px; border-radius:15px; background:linear-gradient(180deg, rgba(143,241,255,.12), rgba(255,255,255,.04)); border:1px solid rgba(143,241,255,.24); }
.team-editor-arrow-control .compact-selector-label { flex:1; text-align:center; font-size:.92rem; color:#f7f3dd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-editor-arrow-control .compact-arrow-btn { min-width:40px; height:36px; }
.team-editor-browser-card { display:grid; grid-template-columns:112px 1fr; gap:18px; align-items:center; padding:18px; border-radius:22px; background:linear-gradient(135deg, rgba(18,32,21,.96), rgba(25,57,39,.82)); border:1px solid rgba(143,241,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.team-editor-crest { width:104px; height:104px; display:grid; place-items:center; border-radius:22px; background:#0b100c; border:2px solid rgba(255,246,200,.45); overflow:hidden; }
.team-editor-crest svg, .team-editor-crest img { width:100%; height:100%; object-fit:contain; }
.team-editor-browser-copy { display:grid; gap:7px; }
.team-editor-browser-copy strong { font-size:1.65rem; color:#fff6c8; line-height:1.05; }
.team-editor-browser-copy small { color:#dfe8d1; line-height:1.35; }
.team-editor-type-chip, .team-editor-kicker { color:#8ff1ff; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.team-editor-mini-kits { display:flex; align-items:center; gap:8px; margin-top:4px; }
.team-editor-mini-kits span { width:32px; height:20px; border-radius:6px; border:2px solid rgba(255,255,255,.65); }
.team-editor-mini-kits em { font-style:normal; padding:3px 8px; border-radius:999px; background:rgba(255,246,200,.12); color:#fff6c8; font-weight:900; }
.team-editor-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:8px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10); border-radius:18px; }
.team-editor-tab { border:0; cursor:pointer; border-radius:999px; padding:10px 14px; color:#dfe8d1; background:rgba(255,255,255,.06); font-weight:900; letter-spacing:.02em; }
.team-editor-tab.active { color:#0b100c; background:linear-gradient(135deg, #8ff1ff, #fff6c8); box-shadow:0 8px 18px rgba(143,241,255,.18); }
.team-editor-tab-panel { display:none; }
.team-editor-tab-panel.active { display:block; }
.team-editor-section-card { display:grid; gap:16px; padding:18px; border-radius:20px; background:rgba(11,16,12,.72); border:1px solid rgba(143,241,255,.20); }
.team-editor-section-card h3, .team-editor-section-card h4 { margin:0; color:#fff6c8; }
.premium-emblem-row { grid-template-columns:120px 1fr; }
.premium-emblem-row .edit-emblem-preview { width:120px; height:120px; border-radius:22px; }
.team-editor-kit-preview { display:flex; align-items:center; gap:14px; padding:14px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.kit-preview-token { width:72px; height:72px; border-radius:50%; background:var(--kit-body); border:8px solid var(--kit-trim); box-shadow: inset 0 -12px 0 rgba(0,0,0,.18), 0 0 0 3px rgba(255,255,255,.12); display:grid; place-items:center; }
.kit-preview-token span { width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.45); }
.team-editor-kit-preview strong { display:block; color:#fff6c8; font-size:1.1rem; }
.team-editor-kit-preview small { display:block; color:#dfe8d1; }
.team-editor-color-control-grid { display:grid; grid-template-columns:repeat(2, minmax(220px,1fr)); gap:14px; }
.team-editor-control-card { display:grid; gap:12px; padding:14px; border-radius:18px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); }
.team-editor-control-card strong { color:#fff6c8; }
.editor-color-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.editor-color-swatch { width:34px; height:28px; border-radius:9px; border:2px solid rgba(255,255,255,.45); cursor:pointer; }
.editor-color-swatch.active { outline:3px solid #8ff1ff; transform:translateY(-1px); }
.editor-formation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(115px,1fr)); gap:10px; }
.editor-formation-card, .editor-difficulty-card { cursor:pointer; border-radius:16px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#f7f3dd; padding:12px; font-weight:900; }
.editor-formation-card.active, .editor-difficulty-card.active { border-color:#8ff1ff; background:linear-gradient(135deg, rgba(143,241,255,.22), rgba(255,246,200,.12)); box-shadow:0 0 0 2px rgba(143,241,255,.16); }
.mini-formation-lines { display:flex; justify-content:center; gap:4px; margin-top:8px; }
.mini-formation-lines em { font-style:normal; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:rgba(143,241,255,.16); color:#8ff1ff; font-size:.72rem; }
.editor-difficulty-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px; margin-top:12px; }
.editor-difficulty-card { display:grid; gap:4px; text-align:left; }
.editor-difficulty-card span { color:#ffe58f; }
.team-editor-board-summary { display:grid; gap:4px; padding:14px; border-radius:18px; background:linear-gradient(135deg, rgba(48,92,54,.5), rgba(20,33,25,.72)); border:1px solid rgba(255,255,255,.12); }
.team-editor-board-summary strong { color:#fff6c8; }
.team-editor-board-summary span { color:#8ff1ff; font-weight:900; }
.team-editor-review-grid { display:grid; grid-template-columns:repeat(3, minmax(150px,1fr)); gap:12px; }
.team-editor-review-grid div { display:grid; gap:4px; padding:12px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11); }
.team-editor-review-grid span { color:#8ff1ff; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; font-weight:900; }
.team-editor-review-grid strong { color:#fff6c8; }
@media (max-width: 900px) { .modern-edit-filter-grid, .team-editor-color-control-grid, .team-editor-review-grid { grid-template-columns:1fr 1fr; } .team-editor-browser-card { grid-template-columns:88px 1fr; } .team-editor-crest { width:84px; height:84px; } }
@media (max-width: 640px) { .modern-edit-filter-grid, .team-editor-color-control-grid, .team-editor-review-grid { grid-template-columns:1fr; } .team-editor-browser-card { grid-template-columns:1fr; text-align:center; } .team-editor-crest { margin:auto; } .team-editor-mini-kits { justify-content:center; } .premium-emblem-row { grid-template-columns:1fr; } .premium-emblem-row .edit-emblem-preview { margin:auto; } }

/* Phase 3C - v1.0.8B Team Editor live preview polish */
.team-editor-studio-layout { display:grid; grid-template-columns: 280px minmax(0, 1fr); gap:18px; align-items:start; margin-top:16px; }
.team-editor-workspace { display:grid; gap:16px; min-width:0; }
.team-editor-live-preview { position:sticky; top:14px; display:grid; gap:13px; padding:18px; border-radius:24px; background:linear-gradient(180deg, rgba(18,32,21,.97), rgba(8,12,10,.92)); border:1px solid rgba(143,241,255,.32); box-shadow:0 18px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); }
.team-editor-live-preview .live-preview-crest { width:124px; height:124px; margin:0 auto; display:grid; place-items:center; border-radius:28px; background:#0b100c; border:2px solid rgba(255,246,200,.45); overflow:hidden; }
.team-editor-live-preview .live-preview-crest svg, .team-editor-live-preview .live-preview-crest img { width:100%; height:100%; object-fit:contain; }
.team-editor-live-preview > strong { text-align:center; color:#fff6c8; font-size:1.35rem; line-height:1.05; }
.team-editor-live-preview > small { text-align:center; color:#8ff1ff; text-transform:uppercase; letter-spacing:.09em; font-weight:900; }
.live-preview-kit-row { display:flex; align-items:center; gap:12px; padding:12px; border-radius:18px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11); }
.live-preview-token { width:66px; height:66px; flex:0 0 auto; border-radius:50%; background:var(--kit-body); border:8px solid var(--kit-trim); box-shadow: inset 0 -12px 0 rgba(0,0,0,.20), 0 0 0 3px rgba(255,255,255,.12); display:grid; place-items:center; transition:background .18s ease, border-color .18s ease; }
.live-preview-token span { width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.45); }
.live-preview-colors { display:grid; gap:4px; min-width:0; }
.live-preview-colors span { color:#f7f3dd; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-preview-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.live-preview-stats div { display:grid; gap:3px; padding:10px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }
.live-preview-stats span { color:#8ff1ff; font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; font-weight:900; }
.live-preview-stats strong { color:#fff6c8; font-size:.9rem; line-height:1.1; }
.team-editor-live-preview p { margin:0; color:#dfe8d1; font-size:.86rem; line-height:1.35; text-align:center; }
@media (max-width: 980px) { .team-editor-studio-layout { grid-template-columns:1fr; } .team-editor-live-preview { position:relative; top:auto; } .live-preview-stats { grid-template-columns:repeat(4, 1fr); } }
@media (max-width: 640px) { .live-preview-stats { grid-template-columns:1fr 1fr; } .live-preview-kit-row { justify-content:center; } }

/* Phase 3C - v1.0.8C11 Team Editor section modernization */
.team-editor-sectioned-layout .team-editor-section-nav {
  position: sticky;
  top: 10px;
  z-index: 6;
  backdrop-filter: blur(10px);
}
.team-editor-sectioned-layout .team-editor-tab {
  min-width: 104px;
}
.save-confirmation-card {
  border-color: rgba(255,246,200,.34);
  background: linear-gradient(180deg, rgba(35,46,24,.82), rgba(11,16,12,.74));
}
.save-confirmation-actions {
  justify-content: flex-start;
  margin-top: 2px;
}
.compact-review-grid {
  grid-template-columns: repeat(3, minmax(130px, 1fr));
}
@media (max-width: 720px) {
  .team-editor-sectioned-layout .team-editor-section-nav {
    top: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .team-editor-sectioned-layout .team-editor-tab {
    flex: 0 0 auto;
    min-width: 112px;
  }
  .compact-review-grid {
    grid-template-columns: 1fr;
  }
}

/* Phase 3C - v1.0.8D Team Browser + Arrow Selector Polish */
.console-team-browser-card {
  grid-template-columns: auto 112px 1fr auto;
  position: relative;
}
.team-editor-browser-nav {
  min-width: 44px;
  min-height: 52px;
  align-self: stretch;
  touch-action: manipulation;
}
.editor-section-arrow-control {
  margin: 10px 0 14px;
  max-width: 420px;
}
.editor-section-arrow-control .team-browser-label {
  min-width: 170px;
  text-align: center;
}
.team-editor-section-card .native-edit-select {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 900px) {
  .console-team-browser-card { grid-template-columns: auto 88px 1fr auto; }
  .team-editor-browser-nav { min-width: 40px; }
}
@media (max-width: 640px) {
  .console-team-browser-card {
    grid-template-columns: 1fr 1fr;
    text-align: center;
  }
  .console-team-browser-card .team-editor-crest,
  .console-team-browser-card .team-editor-browser-copy {
    grid-column: 1 / -1;
  }
  .console-team-browser-card .team-editor-browser-nav {
    order: 3;
    justify-content: center;
  }
  .editor-section-arrow-control .team-browser-label { min-width: 140px; }
}

/* Phase 3C - v1.0.8E: Team Editor logo and color editor polish */
.team-color-studio-card,
.team-logo-studio-card,
.field-logo-live-card {
  display:grid;
  gap:14px;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  box-shadow:0 16px 36px rgba(0,0,0,.18);
}
.team-color-studio-main { display:flex; gap:16px; align-items:center; }
.team-color-studio-main h4 { margin:2px 0 4px; color:#fff6c8; }
.team-color-studio-token {
  width:104px; height:104px; border-radius:999px;
  background:var(--kit-body); border:14px solid var(--kit-trim);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.18), 0 12px 30px rgba(0,0,0,.35);
  display:grid; place-items:center; flex:0 0 auto;
}
.team-color-studio-token span { width:36px; height:36px; border-radius:999px; background:rgba(255,255,255,.18); }
.team-color-selected-row { display:grid; grid-template-columns:repeat(2,minmax(120px,1fr)); gap:10px; }
.team-color-selected-row div { padding:12px; border-radius:16px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.10); }
.team-color-selected-row span { display:block; color:#dfe8d1; font-size:.8rem; }
.team-color-selected-row strong { color:#fff6c8; }
.team-color-action-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.team-color-chip-groups { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.team-color-chip-groups strong { color:#fff6c8; display:block; margin-bottom:8px; }
.large-swatches { gap:10px; }
.editor-color-swatch.large { width:auto; min-width:74px; height:42px; padding:0 10px; display:flex; align-items:center; justify-content:center; border-radius:14px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.9); font-size:.72rem; font-weight:800; }
.editor-color-swatch.large span { pointer-events:none; }
.hidden-native-color-selectors { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.allowed-color-studio { margin-top:14px; }
.logo-studio-section-card { overflow:hidden; }
.team-logo-studio-card { grid-template-columns:minmax(190px,260px) 1fr; align-items:start; }
.team-logo-stage { display:grid; gap:10px; justify-items:center; text-align:center; padding:14px; border-radius:20px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12); }
.team-logo-badge { padding:6px 10px; border-radius:999px; font-size:.75rem; font-weight:800; color:#10180f; background:#e8e1ac; }
.team-logo-badge.ready { background:#9ff0c4; }
.team-logo-badge.empty { background:#d7d7d7; }
.team-logo-large-preview { width:148px; height:148px; border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.22)); border:2px solid rgba(255,246,200,.55); display:grid; place-items:center; overflow:hidden; box-shadow:0 16px 34px rgba(0,0,0,.28); }
.team-logo-large-preview img,.team-logo-large-preview svg { width:100%; height:100%; object-fit:contain; display:block; }
.team-logo-stage strong { color:#fff6c8; }
.team-logo-stage small,.team-logo-controls-panel small { color:#dfe8d1; }
.team-logo-controls-panel { display:grid; gap:14px; }
.premium-upload-button { display:grid; place-items:center; min-height:58px; padding:14px 16px; border-radius:18px; border:1px dashed rgba(255,246,200,.65); background:rgba(255,246,200,.08); color:#fff6c8; font-weight:900; cursor:pointer; text-align:center; }
.premium-upload-button input { display:none; }
.field-logo-live-card { grid-column:1 / -1; }
.field-logo-mini-field { position:relative; min-height:190px; border-radius:24px; overflow:hidden; background:radial-gradient(circle at center, rgba(255,255,255,.10) 0 18%, transparent 19%), linear-gradient(90deg, rgba(255,255,255,.04) 50%, rgba(0,0,0,.08) 50%), #24843f; border:8px solid #6b4425; }
.field-logo-center-line { position:absolute; left:50%; top:0; bottom:0; width:2px; background:rgba(255,255,255,.7); transform:translateX(-50%); }
.field-logo-center-circle { position:absolute; width:92px; height:92px; border:2px solid rgba(255,255,255,.75); border-radius:999px; left:50%; top:50%; transform:translate(-50%,-50%); }
.field-logo-preview-mark { position:absolute; left:50%; top:calc(50% + (var(--logo-y) * 100%)); width:calc(92px * var(--logo-size)); height:calc(92px * var(--logo-size)); opacity:var(--logo-opacity); transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:999px; overflow:hidden; }
.field-logo-preview-mark img,.field-logo-preview-mark svg { width:100%; height:100%; object-fit:contain; }
.field-logo-preview-mark span { color:#fff; font-weight:800; opacity:.75; }
@media (max-width: 760px) {
  .team-color-studio-main { flex-direction:column; text-align:center; }
  .team-color-chip-groups, .team-logo-studio-card { grid-template-columns:1fr; }
  .team-logo-large-preview { width:132px; height:132px; }
}


/* Phase 3D - v1.0.9 Board Editor Studio */
.board-editor-workflow .team-editor-hero h1::after{content:" • Board Studio";font-size:.55em;opacity:.72}
.board-mode-hidden{display:none!important}
.board-studio-live-card{display:grid;grid-template-columns:minmax(260px,1.4fr) minmax(190px,.7fr);gap:18px;align-items:center;padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(3,12,24,.58);margin:14px 0 20px}
.board-studio-live-card>div:last-child{display:grid;gap:6px}.board-studio-live-card strong{font-size:1.05rem}.board-studio-live-card small{opacity:.78;line-height:1.45}
.board-studio-preview{position:relative;aspect-ratio:16/9;border:14px solid var(--board-outer,#6b4425);border-radius:16px;background:var(--board-inner,#875a31);box-shadow:inset 0 0 0 4px var(--board-rim,#0b120d),0 14px 34px rgba(0,0,0,.3);overflow:hidden;padding:10px}
.board-studio-pitch{position:relative;width:100%;height:100%;background:var(--field-color,#238b45);border:3px solid var(--line-color,#fff);overflow:hidden}
.board-studio-field-image{position:absolute;inset:24px;background-image:var(--field-image);background-size:cover;background-position:center;opacity:var(--field-image-opacity,.3);z-index:1;pointer-events:none}
.board-studio-pitch>*{position:absolute;border-color:var(--line-color,#fff);z-index:2}.board-studio-pitch .half-line{left:50%;top:0;height:100%;border-left:2px solid var(--line-color,#fff)}
.board-studio-pitch .center-circle{left:50%;top:50%;width:24%;aspect-ratio:1;border:2px solid var(--center-color,var(--line-color,#fff));border-radius:50%;transform:translate(-50%,-50%)}
.board-studio-pitch .left-box,.board-studio-pitch .right-box{top:24%;width:18%;height:52%;border:2px solid var(--goal-color,var(--line-color,#fff))}.board-studio-pitch .left-box{left:-2px}.board-studio-pitch .right-box{right:-2px}
.board-studio-pitch .left-goal,.board-studio-pitch .right-goal{top:37%;width:4%;height:26%;border:3px double var(--net-color,#fff)}.board-studio-pitch .left-goal{left:0}.board-studio-pitch .right-goal{right:0}
@media(max-width:760px){.board-studio-live-card{grid-template-columns:1fr}.board-studio-preview{border-width:10px}.board-editor-workflow .team-editor-hero h1::after{display:block;margin-top:4px}}

/* v1.0.9A editor polish */
.modern-edit-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.modern-edit-filter-grid>label{min-width:0}
.modern-edit-filter-grid .team-editor-arrow-control{width:100%;min-width:0}
.modern-edit-filter-grid .compact-selector-label{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-color-grid,.edit-grid.compact{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.board-color-grid label,.edit-grid.compact label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(143,241,255,.22);border-radius:15px;background:linear-gradient(180deg,rgba(143,241,255,.09),rgba(255,255,255,.035));font-weight:700}
.board-color-grid input[type=color],.edit-grid.compact input[type=color]{width:54px;height:42px;padding:3px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(0,0,0,.25);cursor:pointer}
.board-studio-preview[data-board-style="dark"]{box-shadow:inset 0 0 0 5px #151923,0 14px 34px rgba(0,0,0,.45)}
.board-studio-preview[data-board-style="metal"]{box-shadow:inset 0 0 0 5px #9aa4b2,0 14px 34px rgba(0,0,0,.4)}
.board-studio-preview[data-board-style="blueRed"]{box-shadow:inset 0 0 0 4px #28b6ff,0 0 22px rgba(255,45,85,.45)}
.board-studio-preview[data-field-type="plaid"] .board-studio-pitch{background-image:linear-gradient(90deg,rgba(255,255,255,.07) 50%,transparent 50%),linear-gradient(rgba(255,255,255,.05) 50%,transparent 50%);background-size:34px 34px}
.board-studio-preview[data-field-type="wideStripes"] .board-studio-pitch{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 52px,transparent 52px 104px)}
.board-studio-preview[data-field-type="thinStripes"] .board-studio-pitch{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 20px,transparent 20px 40px)}
.board-studio-preview[data-field-type="targetRings"] .board-studio-pitch{background-image:radial-gradient(circle at center,transparent 0 16%,rgba(255,255,255,.08) 16% 18%,transparent 18% 31%,rgba(255,255,255,.08) 31% 33%,transparent 33%)}