/* Penalty League — saha koordinatlarına dokunmayan arayüz katmanı */
:root {
  --pl59-ink: #102938;
  --pl59-muted: #607681;
  --pl59-paper: #dfe7e3;
  --pl59-paper-2: #cbd8d5;
  --pl59-navy: #152f3f;
  --pl59-petrol: #205467;
  --pl59-cyan: #45c5d5;
  --pl59-coral: #e27573;
  --pl59-gold: #e8b857;
}

html,
body {
  background:
    radial-gradient(circle at 16% 0%, rgba(69, 197, 213, .18), transparent 31rem),
    radial-gradient(circle at 88% 18%, rgba(226, 117, 115, .13), transparent 29rem),
    linear-gradient(150deg, #122a39, #1b3a49 52%, #284f59) !important;
  color: #eef5f2 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image: radial-gradient(circle, rgba(255,255,255,.16) 0 1px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: linear-gradient(120deg, #000, transparent 68%);
}

.topbar .team,
.topbar .scorebox {
  background: linear-gradient(145deg, rgba(33, 67, 82, .96), rgba(20, 46, 61, .96)) !important;
  border-color: rgba(181, 211, 213, .24) !important;
  box-shadow: 0 14px 32px rgba(4, 20, 29, .25), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.topbar .teamName,
.topbar .score,
.topbar .phase { color: #f5f3e9 !important; }
.topbar .teamSub { color: #a9c0c5 !important; }
.topbar .role,
.topbar .turnPill {
  background: rgba(69, 197, 213, .12) !important;
  border-color: rgba(69, 197, 213, .23) !important;
  color: #c9f3f5 !important;
}

.sidePanel {
  background: linear-gradient(155deg, rgba(24, 55, 69, .94), rgba(15, 40, 53, .95)) !important;
  border-color: rgba(177, 211, 213, .25) !important;
  box-shadow: 0 18px 42px rgba(3, 17, 25, .28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  color: #eff5f2 !important;
}

.sidePanel .leagueBox,
.sidePanel .mini,
.sidePanel .message,
.sidePanel .historyItem {
  background: rgba(222, 233, 229, .09) !important;
  border-color: rgba(222, 233, 229, .15) !important;
  color: #edf4f1 !important;
}

.sidePanel .panelTitle,
.sidePanel .miniLabel,
.sidePanel .historyTitle { color: #9ec6cc !important; }
.sidePanel .miniValue { color: #f7f2df !important; }

.fieldTools,
.turnBanner {
  background: rgba(21, 51, 66, .86) !important;
  border-color: rgba(188, 220, 218, .20) !important;
  box-shadow: 0 12px 28px rgba(2, 16, 24, .24) !important;
}

.fullscreenBtn,
#v58MobileInfoToggle {
  background: rgba(223, 233, 229, .13) !important;
  color: #f5f3e9 !important;
  border-color: rgba(223, 233, 229, .23) !important;
}

.overlay {
  background: rgba(11, 28, 39, .74) !important;
  backdrop-filter: blur(10px) saturate(.9) !important;
  -webkit-backdrop-filter: blur(10px) saturate(.9) !important;
}

#modeOverlay .modeModal,
#howToOverlay .howToModal,
#endOverlay .modal {
  color: var(--pl59-ink) !important;
  background:
    radial-gradient(circle at 86% 10%, rgba(69, 197, 213, .16), transparent 17rem),
    linear-gradient(145deg, #e7ece8, #cbd9d6) !important;
  border: 1px solid rgba(238, 244, 239, .88) !important;
  box-shadow: 0 30px 90px rgba(3, 17, 25, .38) !important;
}

#modeOverlay .modeModal {
  width: min(860px, calc(100vw - 28px)) !important;
  max-width: 860px !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  grid-template-rows: auto auto auto auto auto !important;
  gap: 12px 24px !important;
  padding: 28px !important;
  text-align: left !important;
  align-items: center !important;
}

#modeOverlay .modeModal > h1,
#modeOverlay .modeModal > p,
#modeOverlay .modeModal > .plLanguageSelect,
#modeOverlay .modeModal > .modeButtons,
#modeOverlay .modeModal > .plHowToBtn,
#modeOverlay .modeModal > .v67GuideBar {
  grid-column: 1 !important;
}

#modeOverlay .modeModal h1 {
  color: #153446 !important;
  font-size: clamp(35px, 5vw, 58px) !important;
  letter-spacing: -.055em !important;
  line-height: .95 !important;
}

#modeOverlay .modeModal p,
.plPaneHeader p,
#howToOverlay .howToModal p { color: var(--pl59-muted) !important; }

.v59-penalty-showcase {
  grid-column: 2 !important;
  grid-row: 1 / span 6 !important;
  align-self: stretch;
  position: relative;
  isolation: isolate;
  min-height: 330px;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(75, 153, 167, .48);
  border-radius: 24px;
  background:
    radial-gradient(circle at 52% 34%, rgba(232,184,87,.24), transparent 27%),
    linear-gradient(155deg, #17384a, #24596a 55%, #33727a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 40px rgba(18,56,71,.22);
}

.v59-penalty-showcase::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 7%;
  height: 24px;
  border-radius: 50%;
  background: rgba(3, 19, 28, .46);
  filter: blur(12px);
}

.v59-penalty-showcase img {
  position: relative;
  z-index: 2;
  width: 110%;
  height: 310px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(2,15,22,.42));
}

.plLanguageSelect,
.v67GuideBar,
.setupInfo,
.mpRoomInfo,
.mpNote,
.singleFormat,
.mpFormat {
  background: rgba(244, 246, 240, .66) !important;
  color: #294555 !important;
  border-color: #adbec0 !important;
}

#modeOverlay button,
#startOverlay button,
#multiOverlay button,
#howToOverlay button,
#endOverlay button {
  border-radius: 12px !important;
}

#modeOverlay .modeButtons button,
#modeOverlay .plHowToBtn,
#startOverlay #startBtn,
#multiOverlay #mpCreateBtn,
#multiOverlay #mpReadyBtn,
#multiOverlay #mpStartBtn,
#howToOverlay .howToCloseBtn,
#endOverlay #restartBtn {
  background: linear-gradient(135deg, #1e7183, #32a9b5) !important;
  color: #fff !important;
  border-color: rgba(20, 102, 119, .28) !important;
  box-shadow: 0 10px 22px rgba(30, 113, 131, .20) !important;
}

#modeOverlay button.secondary,
#startOverlay button.secondary,
#multiOverlay button.secondary,
#endOverlay button.secondary {
  background: #d4dedb !important;
  color: #173547 !important;
  border: 1px solid #a9babc !important;
  box-shadow: none !important;
}

#startOverlay .plSplitModal,
#multiOverlay .plSplitModal {
  background: transparent !important;
  box-shadow: none !important;
}

#startOverlay .plTeamPane,
#multiOverlay .plTeamPane,
#startOverlay .plSettingsPane,
#multiOverlay .plRoomPane {
  color: var(--pl59-ink) !important;
  background:
    radial-gradient(circle at 86% 3%, rgba(69, 197, 213, .12), transparent 18rem),
    linear-gradient(145deg, rgba(230, 236, 232, .98), rgba(201, 216, 213, .98)) !important;
  border: 1px solid rgba(236, 242, 237, .84) !important;
  box-shadow: 0 22px 56px rgba(4, 20, 29, .28) !important;
}

#startOverlay .plSettingsPane::before,
#multiOverlay .plRoomPane::before {
  content: "";
  display: block;
  flex: 0 0 118px;
  width: 100%;
  border: 1px solid rgba(70, 153, 167, .30);
  border-radius: 17px;
  background:
    url("./webp/penalty-league-3d.webp") center / contain no-repeat,
    linear-gradient(135deg, #17384a, #2e6873);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(18,56,71,.16);
}

.plPaneHeader h1 { color: #163648 !important; letter-spacing: -.035em !important; }

#startOverlay input,
#multiOverlay input,
#startOverlay select,
#multiOverlay select {
  background: rgba(246, 247, 242, .94) !important;
  color: #163648 !important;
  border-color: #aabbbd !important;
}

#startOverlay .setupTab,
#multiOverlay .setupTab,
#startOverlay .teamPick,
#multiOverlay .teamPick {
  background: rgba(242, 245, 240, .82) !important;
  color: #17384a !important;
  border-color: #b1c1c2 !important;
  box-shadow: 0 5px 12px rgba(20,50,65,.06) !important;
}

#startOverlay .setupTab.active,
#multiOverlay .setupTab.active,
#startOverlay .teamPick.active,
#multiOverlay .teamPick.active {
  background: linear-gradient(135deg, #205d70, #2b8f9d) !important;
  color: #fff !important;
  border-color: #256f7e !important;
  box-shadow: 0 9px 20px rgba(28, 102, 118, .20) !important;
}

#howToOverlay .howToStep {
  background: rgba(245, 247, 242, .74) !important;
  color: #233f4f !important;
  border-color: #b6c5c5 !important;
}

#endOverlay .v58-final-card,
#endOverlay .weekReview,
#endOverlay .v58-end-note {
  background: rgba(244, 246, 241, .72) !important;
  color: #173547 !important;
  border-color: #b4c4c5 !important;
}

@media (max-height: 780px) and (min-width: 981px) {
  #startOverlay .plSettingsPane::before,
  #multiOverlay .plRoomPane::before { display: none; }
}

@media (max-width: 980px) {
  #modeOverlay .modeModal {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
    gap: 10px !important;
  }
  #modeOverlay .modeModal > * { grid-column: 1 !important; }
  .v59-penalty-showcase {
    grid-row: auto !important;
    min-height: 142px;
    order: -1;
  }
  .v59-penalty-showcase img { height: 138px; width: 100%; }
  #startOverlay .plSettingsPane::before,
  #multiOverlay .plRoomPane::before { display: none; }
}

@media (max-width: 560px) {
  #modeOverlay .modeModal { padding: 13px !important; border-radius: 18px !important; }
  #modeOverlay .modeModal h1 { font-size: 34px !important; }
  .v59-penalty-showcase { min-height: 112px; border-radius: 16px; }
  .v59-penalty-showcase img { height: 108px; }
}