.game { padding: 34px 0 0; }
.game .game-heading { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; text-transform: uppercase; color: #15391f; text-align: center; margin-bottom: 30px; }

/* setup */
.game .setup-screen { max-width: 720px; margin: 0 auto; }
.game .setup-block { margin-bottom: 32px; }
.game .setup-label { font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: #15391f; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; }
.game .setup-label::after { content: ""; flex: 1; height: 1px; background: rgba(21, 57, 31, 0.18); }
.game .formation-options, .game .difficulty-options, .game .ratings-options { display: flex; flex-wrap: wrap; gap: 8px; }
.game .formation-option { padding: 10px 16px; border: 1px solid #15391f; border-radius: 2px; font-size: 14px; font-weight: 700; color: #15391f; background: #faf3e3; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.game .formation-option:hover { border-color: #c8401a; color: #c8401a; }
.game .formation-option.selected { background: #15391f; border-color: #15391f; color: #f3e9d2; }
.game .formation-note { font-size: 14px; color: #63654c; margin-top: 10px; }
.game .difficulty-option, .game .ratings-option { flex: 1 1 150px; padding: 14px 16px; border: 1px solid #15391f; border-radius: 2px; background: #faf3e3; cursor: pointer; transition: background 0.15s ease; }
.game .difficulty-option:hover, .game .ratings-option:hover { border-color: #c8401a; }
.game .difficulty-option.selected, .game .ratings-option.selected { background: #15391f; border-color: #15391f; }
.game .difficulty-option .option-name, .game .ratings-option .option-name { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #15391f; }
.game .difficulty-option .option-note, .game .ratings-option .option-note { font-size: 12px; color: #63654c; margin-top: 3px; }
.game .difficulty-option.selected .option-name, .game .ratings-option.selected .option-name { color: #f3e9d2; }
.game .difficulty-option.selected .option-note, .game .ratings-option.selected .option-note { color: #d9c9a3; }
.game .setup-actions { text-align: center; margin-top: 38px; }

/* pitch */
.game .pitch { position: relative; width: 100%; background: #3a7a4d; border: 2px solid #15391f; border-radius: 2px; overflow: hidden; }
.game .pitch::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.5); }
.game .pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; }
.game .setup-pitch { height: 320px; margin-top: 18px; max-width: 420px; }
.game .draft-pitch { height: 420px; }
.game .result-pitch { height: 440px; max-width: 460px; margin: 28px auto 0; }
.game .pitch .pitch-box-top { position: absolute; left: 25%; top: 0; width: 50%; height: 14%; border: 1px solid rgba(255, 255, 255, 0.5); border-top: none; }
.game .pitch .pitch-box-bottom { position: absolute; left: 25%; bottom: 0; width: 50%; height: 14%; border: 1px solid rgba(255, 255, 255, 0.5); border-bottom: none; }
.game .pitch .pitch-slot { position: absolute; transform: translate(-50%, -50%); width: 76px; text-align: center; cursor: default; }
.game .pitch .pitch-slot .slot-token { margin: 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); background: rgba(21, 57, 31, 0.35); color: #ffffff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s ease, background 0.15s ease; }
.game .pitch .pitch-slot .slot-name { margin-top: 4px; font-size: 11px; font-weight: 700; line-height: 1.25; color: #15391f; background: #f3e9d2; border-radius: 2px; padding: 2px 4px; display: none; }
.game .pitch .pitch-slot.filled .slot-token { border-color: #f3e9d2; background: #c8401a; color: #f3e9d2; }
.game .pitch .pitch-slot.filled .slot-name { display: block; }
.game .pitch .pitch-slot.eligible { cursor: pointer; }
.game .pitch .pitch-slot.eligible .slot-token { border-color: #ffffff; background: #e3a72f; color: #15391f; animation: slot-pulse 1.2s ease infinite; }
@keyframes slot-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

/* draft */
.game .draft-layout { display: grid; grid-template-columns: 1fr; gap: 28px; }
.game .draft-wheel-column { text-align: center; }
.game .wheel-shell { position: relative; width: 300px; height: 300px; margin: 0 auto; }
.game .wheel-shell .wheel-canvas { width: 100%; height: 100%; }
.game .wheel-shell .wheel-pointer { position: absolute; top: -6px; left: 50%; margin-left: -10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 16px solid #c8401a; z-index: 2; }
.game .wheel-shell .wheel-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: #f3e9d2; border: 2px solid #15391f; display: flex; align-items: center; justify-content: center; }
.game .wheel-shell .wheel-hub-count { font-size: 16px; font-weight: 800; color: #15391f; }
.game .wheel-readout { margin-top: 18px; min-height: 52px; }
.game .wheel-readout .wheel-readout-club { font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.5px; color: #15391f; }
.game .wheel-readout .wheel-readout-season { font-size: 14px; color: #c8401a; margin-top: 2px; }
.game .wheel-actions { margin-top: 16px; display: flex; justify-content: center; gap: 10px; }
.game .draft-progress { margin-top: 14px; font-size: 13px; color: #63654c; text-align: center; }

/* squad panel */
.game .squad-panel { margin-top: 32px; border: 2px solid #15391f; border-radius: 2px; background: #faf3e3; padding: 22px; }
.game .squad-panel .squad-panel-head { border-bottom: 1px solid rgba(21, 57, 31, 0.18); padding-bottom: 12px; margin-bottom: 14px; }
.game .squad-panel .squad-panel-title { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.5px; color: #15391f; }
.game .squad-panel .squad-panel-sub { font-size: 14px; color: #63654c; margin-top: 3px; }
.game .squad-panel .squad-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.game .squad-panel .squad-player { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(21, 57, 31, 0.12); font-size: 14px; color: #a8a48c; }
.game .squad-panel .squad-player .player-pos { flex-shrink: 0; width: 34px; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #a8a48c; }
.game .squad-panel .squad-player .player-name { flex: 1; font-weight: 600; }
.game .squad-panel .squad-player .player-rating { flex-shrink: 0; font-size: 13px; font-weight: 800; color: #a8a48c; }
.game .squad-panel .squad-player.pickable { color: #15391f; cursor: pointer; transition: background 0.12s ease; }
.game .squad-panel .squad-player.pickable .player-pos { color: #2a6fb0; }
.game .squad-panel .squad-player.pickable .player-rating { color: #c8401a; }
.game .squad-panel .squad-player.pickable:hover { background: rgba(21, 57, 31, 0.07); }
.game .squad-panel .squad-player.taken { text-decoration: line-through; }

/* season */
.game .season-screen { max-width: 640px; margin: 0 auto; }
.game .season-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 3px solid #15391f; padding-bottom: 10px; }
.game .season-head .season-heading { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; text-transform: uppercase; color: #15391f; }
.game .season-head .season-team-rating { font-size: 14px; color: #63654c; }
.game .season-record { font-size: 34px; font-weight: 800; letter-spacing: -1px; color: #c8401a; margin: 16px 0 6px; }
.game .season-stage-title { font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: #c8401a; margin: 20px 0 10px; }
.game .fixtures-list { display: grid; gap: 0; }
.game .fixtures-list .fixture-stage-heading { font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: #c8401a; padding: 22px 0 8px; border-bottom: 2px solid #15391f; }
.game .fixtures-list .fixture-stage-heading:first-child { padding-top: 4px; }
.game .fixtures-list .fixture-row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(21, 57, 31, 0.15); padding: 11px 4px; font-size: 14px; color: #3d4a39; }
.game .fixtures-list .fixture-row .fixture-venue { flex-shrink: 0; width: 18px; font-size: 11px; font-weight: 800; color: #a8a48c; }
.game .fixtures-list .fixture-row .fixture-opponent { flex: 1; font-weight: 600; }
.game .fixtures-list .fixture-row .fixture-score { flex-shrink: 0; font-size: 14px; font-weight: 800; color: #63654c; }
.game .fixtures-list .fixture-row.fixture-won .fixture-score { color: #1c7a3d; }
.game .fixtures-list .fixture-row.fixture-drawn .fixture-score { color: #b07a00; }
.game .fixtures-list .fixture-row.fixture-lost .fixture-score { color: #c8401a; }
.game .fixtures-list .fixture-row.fixture-note { font-size: 13px; color: #63654c; }
.game .season-actions { margin-top: 24px; display: flex; gap: 10px; }

/* result */
.game .result-screen { max-width: 640px; margin: 0 auto; text-align: center; }
.game .result-banner { background: #15391f; border-radius: 2px; padding: 40px 24px; }
.game .result-banner .result-headline { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; text-transform: uppercase; color: #f3e9d2; }
.game .result-banner .result-record { font-size: 56px; font-weight: 800; letter-spacing: -2px; color: #e3a72f; margin-top: 6px; }
.game .result-banner .result-summary { font-size: 15px; color: #d9c9a3; margin-top: 10px; }
.game .result-actions { margin-top: 26px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.game .result-history { margin-top: 36px; text-align: left; }
.game .result-history .history-heading { font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: #15391f; margin-bottom: 8px; border-bottom: 3px solid #15391f; padding-bottom: 8px; }
.game .result-history .history-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid rgba(21, 57, 31, 0.15); font-size: 13px; color: #3d4a39; }
.game .result-history .history-row .history-outcome { color: #c8401a; font-weight: 700; }

@media (min-width: 768px) {
  .game { padding-top: 44px; }
  .game .game-heading { font-size: 30px; }
  .game .draft-layout { grid-template-columns: 360px 1fr; align-items: start; }
  .game .wheel-shell { width: 340px; height: 340px; }
  .game .draft-pitch { height: 480px; }
  .game .squad-panel .squad-list { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}