/* OTBALL FOOTBALL 6.0 — match interface: calm, readable and thumb-friendly */
#football-game.football-match {
  --football-lime: #d9ff55;
  --football-ink: #06110d;
  --football-card: #071810e8;
  --football-edge: #80e5b5;
  --football-red: #ff715f;
  background: #020806;
  isolation: isolate;
}

#football-game.football-match #footballCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  background: #03110b;
}

.football-scoreboard {
  z-index: 8;
  top: calc(10px + var(--safe-top));
  min-width: min(465px, calc(100vw - 138px));
  min-height: 52px;
  border: 1px solid #a1f0c955;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 28px #000a, 0 0 0 1px #03110b;
  backdrop-filter: blur(9px);
}

.football-scoreboard > div {
  min-width: 0;
  padding: 8px 13px;
  background: #071810e8;
}

.football-scoreboard > div span {
  overflow: hidden;
  color: #eafff4;
  font: 800 8px/1 system-ui, sans-serif;
  letter-spacing: .8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.football-scoreboard > div b {
  color: var(--football-lime);
  font-size: 28px;
  line-height: .85;
  text-shadow: 2px 2px 0 #254615;
}

.football-scoreboard > section {
  display: grid;
  place-content: center;
  padding: 4px 11px;
  border-inline: 1px solid #a1f0c936;
  background: #0f3423;
}

.football-scoreboard section small {
  color: #91eac2;
  font: 800 7px/1.2 system-ui, sans-serif;
  letter-spacing: 1px;
}

.football-scoreboard section b {
  margin-top: 3px;
  color: #fff;
  font-size: 17px;
  line-height: 1;
}

.football-match-tools {
  position: absolute;
  z-index: 9;
  top: calc(10px + var(--safe-top));
  right: calc(12px + var(--safe-right));
  display: flex;
  gap: 7px;
}

.football-match-tools button {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 1px solid #9ae8c566;
  border-radius: 4px;
  background: #071810e8;
  box-shadow: 0 5px 16px #000a;
  color: #eafff4;
}

.football-match-tools button:active { transform: translateY(1px) scale(.96); }
.football-match-tools button:focus-visible,
.football-actions button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.football-camera-btn { grid-template-columns: 16px auto; gap: 3px; width: 54px !important; }
.football-camera-btn b { color: var(--football-lime); font-size: 9px; }
.camera-mark { position: relative; width: 15px; height: 11px; border: 2px solid currentColor; }
.camera-mark::after { content: ''; position: absolute; left: 3px; top: -5px; width: 5px; height: 3px; border: 2px solid currentColor; border-bottom: 0; }
.football-pause-btn i { width: 12px; height: 15px; border-inline: 3px solid var(--football-lime); }
.football-fullscreen-btn i { width: 15px; height: 15px; border: 2px solid #dffff0; box-shadow: inset 0 0 0 2px #071810; }

.football-moment {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: calc(78px + var(--safe-top));
  width: min(490px, calc(100vw - 44px));
  padding: 11px 18px 12px;
  border: 1px solid #b5f4cf75;
  border-radius: 4px;
  background: linear-gradient(90deg, #06170eea, #0a2c1be8);
  box-shadow: 0 10px 25px #0009;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -8px);
  transition: opacity .22s ease, transform .22s ease;
}

.football-moment.show { opacity: 1; transform: translate(-50%, 0); }
.football-moment > * { display: block; margin: 0; }
.football-moment-kicker { color: var(--football-lime); font: 800 7px/1.2 system-ui, sans-serif; letter-spacing: 2.3px; }
.football-moment-title { margin-top: 4px !important; color: #fff; font: 900 clamp(16px, 2.6vw, 24px)/1 "Arial Black", system-ui, sans-serif; letter-spacing: .2px; }
.football-moment-detail { margin-top: 4px !important; color: #c3e6d4; font: 650 10px/1.35 system-ui, sans-serif; }

.football-rule-card {
  position: absolute;
  z-index: 8;
  top: calc(68px + var(--safe-top));
  right: calc(14px + var(--safe-right));
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(305px, calc(100vw - 30px));
  padding: 11px 13px;
  border: 1px solid #ffdd8a;
  border-left-width: 4px;
  border-radius: 4px;
  background: #1c2118ef;
  box-shadow: 0 10px 25px #000a;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
}

.football-rule-card.show { opacity: 1; transform: translateY(0); }
.football-rule-card div { min-width: 0; }
.football-rule-card small,
.football-rule-card b,
.football-rule-card p { display: block; margin: 0; }
.football-rule-card small { color: #ffd66b; font: 800 7px/1 system-ui, sans-serif; letter-spacing: 1.7px; }
.football-rule-card b { margin-top: 3px; color: #fff9e7; font-size: 12px; }
.football-rule-card p { margin-top: 3px; color: #d9dfd0; font: 650 10px/1.35 system-ui, sans-serif; }

.football-rule-icon {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 2px solid #ffd66b;
  border-radius: 50%;
}

.football-rule-icon::before,
.football-rule-icon::after { content: ''; position: absolute; display: block; }
.football-rule-icon.throw-in::before { left: 6px; top: 13px; width: 14px; border-top: 2px solid #ffd66b; }
.football-rule-icon.throw-in::after { right: 5px; top: 9px; width: 7px; height: 7px; border-top: 2px solid #ffd66b; border-right: 2px solid #ffd66b; transform: rotate(45deg); }
.football-rule-icon.corner::before { left: 7px; top: 7px; width: 14px; height: 14px; border-left: 2px solid #ffd66b; border-top: 2px solid #ffd66b; }
.football-rule-icon.corner::after { left: 10px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: #ffd66b; }
.football-rule-icon.goal-kick::before { left: 6px; top: 8px; width: 16px; height: 13px; border: 2px solid #ffd66b; }
.football-rule-icon.goal-kick::after { left: 11px; top: 13px; width: 9px; border-top: 2px solid #ffd66b; }
.football-rule-icon.foul::before { left: 13px; top: 4px; height: 18px; border-left: 2px solid #ffd66b; transform: rotate(35deg); }
.football-rule-icon.foul::after { left: 8px; top: 18px; width: 14px; border-top: 2px solid #ffd66b; }
.football-rule-icon.penalty::before { inset: 8px; border: 2px solid #ffd66b; border-radius: 50%; }
.football-rule-icon.penalty::after { left: 7px; right: 7px; top: 14px; border-top: 2px solid #ffd66b; }
.football-rule-icon.kickoff::before { left: 7px; top: 7px; width: 12px; height: 12px; border: 2px solid #ffd66b; border-radius: 50%; }
.football-rule-icon.kickoff::after { left: 4px; right: 4px; top: 14px; border-top: 2px solid #ffd66b; }

.football-call {
  z-index: 7;
  top: auto;
  bottom: calc(149px + var(--safe-bottom));
  min-width: 190px;
  padding: 8px 13px;
  border: 1px solid #a2edc16b;
  border-left: 3px solid var(--football-lime);
  border-radius: 3px;
  background: #071810df;
  box-shadow: 0 7px 18px #0009;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity .18s ease, transform .18s ease;
}

.football-call.show { opacity: 1; transform: translate(-50%, 0); }
.football-call small { color: #91eac2; font: 800 7px/1 system-ui, sans-serif; letter-spacing: 1.6px; }
.football-call b { margin-top: 3px; color: #f4fff8; font-size: 11px; }

.football-status {
  position: absolute;
  z-index: 7;
  left: calc(16px + var(--safe-left));
  bottom: calc(155px + var(--safe-bottom));
  padding: 7px 10px;
  border-left: 3px solid var(--football-lime);
  background: #06170ed9;
  box-shadow: 0 6px 17px #0009;
}

.football-status > * { display: block; }
.football-status small { color: #91eac2; font: 800 6px/1 system-ui, sans-serif; letter-spacing: 1.6px; }
.football-status b { margin-top: 3px; color: #effff5; font-size: 10px; }

.football-energy {
  z-index: 7;
  left: calc(16px + var(--safe-left));
  bottom: calc(132px + var(--safe-bottom));
  width: 150px;
  padding: 6px 8px;
  border: 1px solid #83dcb96e;
  border-radius: 3px;
  background: #06170ed9;
  box-shadow: 0 6px 17px #0009;
}

.football-energy small { color: #c9f7dd; font: 800 6px/1 system-ui, sans-serif; letter-spacing: 1.3px; }
.football-energy i { height: 7px; margin-top: 5px; overflow: hidden; border-radius: 2px; background: #294437; }
.football-energy i b { border-radius: 2px; background: linear-gradient(90deg, #83f4c7, var(--football-lime)); transition: width .16s linear; }

.football-controls {
  z-index: 9;
  left: calc(16px + var(--safe-left));
  right: calc(16px + var(--safe-right));
  bottom: calc(12px + var(--safe-bottom));
  align-items: end;
}

.football-p2-controls { display: none; }

#football-game[data-local="true"] .football-controls {
  right: auto;
  width: calc(50% - 10px);
}

#football-game[data-local="true"] .football-p2-controls {
  position: absolute;
  z-index: 9;
  right: calc(16px + var(--safe-right));
  bottom: calc(12px + var(--safe-bottom));
  display: flex;
  align-items: end;
  justify-content: space-between;
  width: calc(50% - 10px);
  pointer-events: none;
}

#football-game[data-local="true"] .football-p2-controls > * { pointer-events: auto; }
#football-game[data-local="true"] .football-actions { gap: 7px; }
#football-game[data-local="true"] .football-actions button { width: 59px; height: 59px; }
#football-game[data-local="true"] .football-actions .football-shoot { width: 76px; height: 76px; }
#football-game[data-local="true"] .football-p2-actions button { border-color: #ffb4a5; background: radial-gradient(circle at 35% 25%, #8b453d, #31151a 67%); }
#football-game[data-local="true"] .football-p2-actions .football-shoot { border-color: #ffe2da; background: radial-gradient(circle at 35% 25%, #ffb19f, #e25e4b 68%); box-shadow: 0 0 0 5px #ff715f30, 0 9px 24px #000c, inset 0 0 0 3px #8d3026; color: #2b0b0a; }
#football-game[data-local="true"] .football-p2-controls .football-stick { order: 2; }

.football-stick {
  width: 122px;
  height: 122px;
  border: 2px solid #b8ffe142;
  background: radial-gradient(circle, #b3fdd71c 0 24%, #07180fd9 67%);
  box-shadow: inset 0 0 0 1px #0008, 0 8px 20px #0008;
}

.football-stick::after { content: ''; position: absolute; inset: 27px; border: 1px solid #bcffdf33; border-radius: 50%; }
.football-stick i { width: 43px; height: 43px; margin: -22px; border: 2px solid #f2fff8; background: radial-gradient(circle at 35% 30%, #fbfff8, #a4e9c5); box-shadow: 0 3px 10px #0008; }

.football-actions { gap: 9px; }
.football-actions button {
  position: relative;
  display: grid;
  place-content: center;
  gap: 5px;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 2px solid #c7ffe27a;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #2b7551, #0a2117 67%);
  box-shadow: 0 7px 20px #000b, inset 0 0 0 3px #06130d;
  color: #eafff2;
  transition: transform .12s ease, filter .12s ease;
}

.football-actions .football-shoot {
  width: 103px;
  height: 103px;
  border-color: #efffc4;
  background: radial-gradient(circle at 35% 25%, #efff9a, #b9e741 68%);
  box-shadow: 0 0 0 5px #d9ff5530, 0 9px 24px #000c, inset 0 0 0 3px #5d8520;
  color: #10200e;
}

.football-actions button.pressed { transform: scale(.91); filter: brightness(.9); }
.football-actions b { font-size: 8px; letter-spacing: .5px; }
.football-action-icon { position: relative; display: block; width: 21px; height: 17px; }
.action-pass::before { content: ''; position: absolute; left: 1px; top: 7px; width: 17px; border-top: 3px solid currentColor; }
.action-pass::after { content: ''; position: absolute; right: 1px; top: 3px; width: 8px; height: 8px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(45deg); }
.action-shoot { width: 19px; height: 19px; border: 3px solid currentColor; border-radius: 50%; }
.action-shoot::after { content: ''; position: absolute; inset: 4px; border: 2px solid currentColor; border-radius: 50%; }
.action-skill::before { content: ''; position: absolute; left: 8px; top: 0; width: 4px; height: 17px; background: currentColor; transform: skewX(-29deg); }
.action-skill::after { content: ''; position: absolute; left: 2px; top: 6px; width: 18px; border-top: 3px solid currentColor; transform: rotate(-30deg); }

.football-pc-guide {
  z-index: 8;
  bottom: calc(10px + var(--safe-bottom));
  gap: 7px;
  max-width: min(610px, calc(100vw - 350px));
  padding: 7px 10px;
  border: 1px solid #7ee4ba4d;
  border-radius: 3px;
  background: #05140edb;
  box-shadow: 0 5px 18px #0009;
  color: #b9d9c8;
  font: 800 7px/1.2 system-ui, sans-serif;
  letter-spacing: .45px;
}

.football-pc-guide b { color: var(--football-lime); }
.football-pc-guide kbd { padding: 1px 3px; border: 1px solid #9fe3c279; border-radius: 2px; color: #f3fff8; font: inherit; }
#football-game.football-guide-hidden .football-pc-guide { display: none; }

.football-orientation { z-index: 20; }
.orientation-mark { position: relative; width: 48px; height: 28px; margin: auto auto 14px; border: 3px solid var(--football-lime); border-radius: 4px; transform: rotate(-90deg); }
.orientation-mark::after { content: ''; position: absolute; right: -14px; top: 9px; width: 9px; height: 9px; border-top: 3px solid var(--football-lime); border-right: 3px solid var(--football-lime); transform: rotate(45deg); }

#football-game[data-camera="first"] .football-status { border-left-color: #ffd66b; }
#football-game[data-camera="first"] .football-energy i b { background: linear-gradient(90deg, #ffd66b, #ff9d5e); }

#football-game[data-calm="true"] .football-moment,
#football-game[data-calm="true"] .football-rule-card,
#football-game[data-calm="true"] .football-call,
#football-game[data-calm="true"] .football-actions button,
#football-game[data-calm="true"] .football-energy i b { transition-duration: 0s; }

@media (hover: none), (pointer: coarse) {
  .football-pc-guide { display: none; }
}

@media (max-width: 650px) and (orientation: portrait) {
  .football-scoreboard,
  .football-match-tools,
  .football-moment,
  .football-rule-card,
  .football-call,
  .football-status,
  .football-energy,
  .football-controls,
  .football-p2-controls,
  .football-pc-guide { display: none; }

  .football-orientation {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 30px;
    background: #03110bf2;
    text-align: center;
  }

  .football-orientation b { color: var(--football-lime); font: 900 25px/1 "Arial Black", system-ui, sans-serif; }
  .football-orientation span { max-width: 265px; color: #d1eadc; font: 650 12px/1.45 system-ui, sans-serif; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .football-scoreboard { top: calc(5px + var(--safe-top)); min-height: 43px; min-width: min(388px, calc(100vw - 155px)); }
  .football-scoreboard > div { padding: 6px 9px; }
  .football-scoreboard > div b { font-size: 22px; }
  .football-scoreboard > section { padding: 4px 8px; }
  .football-scoreboard section b { font-size: 14px; }
  .football-match-tools { top: calc(5px + var(--safe-top)); }
  .football-match-tools button { width: 36px; height: 36px; }
  .football-camera-btn { width: 46px !important; }
  .football-moment { top: calc(53px + var(--safe-top)); padding: 7px 13px; }
  .football-moment-title { font-size: 16px; }
  .football-moment-detail { font-size: 8px; }
  .football-rule-card { top: calc(48px + var(--safe-top)); width: min(275px, calc(100vw - 26px)); padding: 8px 10px; }
  .football-rule-card p { font-size: 8px; }
  .football-rule-icon { flex-basis: 26px; width: 26px; height: 26px; transform: scale(.85); }
  .football-call { bottom: calc(113px + var(--safe-bottom)); padding: 6px 10px; }
  .football-status { left: calc(12px + var(--safe-left)); bottom: calc(116px + var(--safe-bottom)); padding: 5px 8px; }
  .football-energy { left: calc(12px + var(--safe-left)); bottom: calc(95px + var(--safe-bottom)); width: 122px; padding: 5px 7px; }
  .football-controls { left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right)); bottom: calc(8px + var(--safe-bottom)); }
  #football-game[data-local="true"] .football-controls { width: calc(50% - 8px); right: auto; }
  #football-game[data-local="true"] .football-p2-controls { right: calc(12px + var(--safe-right)); bottom: calc(8px + var(--safe-bottom)); width: calc(50% - 8px); }
  .football-stick { width: 98px; height: 98px; }
  .football-stick::after { inset: 22px; }
  .football-stick i { width: 37px; height: 37px; margin: -20px; }
  .football-actions { gap: 7px; }
  .football-actions button { width: 60px; height: 60px; }
  .football-actions .football-shoot { width: 83px; height: 83px; }
  .football-actions b { font-size: 7px; }
  .football-pc-guide { bottom: calc(5px + var(--safe-bottom)); padding: 5px 7px; font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .football-moment,
  .football-rule-card,
  .football-call,
  .football-actions button,
  .football-energy i b { transition: none !important; }
}