:root {
  --navy-950: #06121d;
  --navy-900: #0a1d2e;
  --navy-800: #102a40;
  --blue: #1f6fe5;
  --blue-dark: #124ca7;
  --blue-light: #65b8ff;
  --red: #e5484d;
  --red-dark: #a91f2d;
  --green: #48e28b;
  --green-dark: #128a50;
  --amber: #ffc94a;
  --ink: #102235;
  --muted: #66788b;
  --paper: #f4f8fc;
  --white: #ffffff;
  --panel-line: #cbd9e7;
  --shadow: 0 18px 50px rgba(2, 16, 28, .22);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--navy-950);
  color: var(--ink);
  font-family: -apple-system, "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

button {
  font: inherit;
}

button:focus-visible {
  outline: 4px solid var(--amber);
  outline-offset: 3px;
}

button[hidden],
[hidden] {
  display: none !important;
}

button,
.coach p,
.lesson .motto,
.lesson .st,
.resultScreen h2,
#resText,
.motto {
  word-break: keep-all;
  overflow-wrap: normal;
}

.app-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 15%, #174a72 0, #0b253b 36%, #06121d 100%);
  pointer-events: none;
}

.app-bg::before {
  content: "";
  position: absolute;
  inset: -25%;
  opacity: .22;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0 70px,
      rgba(255, 255, 255, .06) 72px 74px
    );
  transform: rotate(-4deg);
}

.app-bg span {
  position: absolute;
  display: block;
  border: 2px solid rgba(101, 184, 255, .13);
  border-radius: 50%;
}

.app-bg span:nth-child(1) {
  width: 520px;
  height: 520px;
  left: -180px;
  bottom: -260px;
}

.app-bg span:nth-child(2) {
  width: 320px;
  height: 320px;
  right: -80px;
  top: -145px;
}

.app-bg span:nth-child(3) {
  width: 36px;
  height: 36px;
  right: 24%;
  bottom: 13%;
  background: rgba(72, 226, 139, .12);
  border-color: rgba(72, 226, 139, .25);
}

.screen {
  display: none;
  position: fixed;
  inset: 0;
  padding: 28px 38px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.screen.show {
  display: flex;
}

button {
  min-height: 56px;
  padding: 10px 22px;
  border: 2px solid #bfcedd;
  border-radius: 16px;
  background: linear-gradient(#fff, #edf4fa);
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  box-shadow:
    0 5px 0 #aebfce,
    0 10px 20px rgba(9, 29, 46, .16);
  cursor: pointer;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    filter .12s ease;
}

button:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 #aebfce,
    0 4px 9px rgba(9, 29, 46, .18);
}

button.big {
  min-height: 84px;
  border-color: #124ca7;
  background: linear-gradient(145deg, #2c82f2, #175bc4);
  color: #fff;
  font-size: 28px;
  box-shadow:
    0 6px 0 #0a3d8b,
    0 14px 28px rgba(14, 69, 145, .3);
}

button.big:active {
  box-shadow:
    0 2px 0 #0a3d8b,
    0 5px 12px rgba(14, 69, 145, .28);
}

button.big.alt {
  border-color: #7fa4c9;
  background: linear-gradient(#fff, #e8f2fb);
  color: #175bbd;
  box-shadow:
    0 6px 0 #9eb5ca,
    0 14px 28px rgba(9, 29, 46, .18);
}

button.big.shoot {
  border-color: #cf6a0e;
  background: linear-gradient(145deg, #ffbf35, #f07816);
  color: #251300;
  box-shadow:
    0 6px 0 #a64b08,
    0 14px 28px rgba(217, 102, 16, .3);
}

button small {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  opacity: .78;
}

.menu {
  display: flex;
  gap: 24px;
  align-items: stretch;
  justify-content: center;
}

.menu .big {
  min-width: 260px;
}

.back {
  position: absolute;
  z-index: 3;
  left: 24px;
  top: 20px;
  min-height: 52px;
  padding: 8px 18px;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(6, 18, 29, .72);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
  backdrop-filter: blur(8px);
}

.back span {
  font-size: 28px;
  line-height: 0;
  vertical-align: -2px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #9bd3ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
}

.eyebrow b {
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--green);
  color: #052516;
  font-size: 11px;
  letter-spacing: .12em;
  transform: skew(-7deg);
}

.sectionHead {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}

.sectionHead h2 {
  margin: 7px 0 5px;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: .03em;
  text-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}

.sectionHead p {
  margin: 0;
  color: #c9dbea;
  font-size: 20px;
  font-weight: 700;
}

.sectionHead.compact h2 {
  font-size: 38px;
}

h2 {
  margin: 0;
}

.titleScreen {
  color: #fff;
}

.titleScreen::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 760px;
  height: 300px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.title {
  position: relative;
  z-index: 1;
  margin: 4px 0 0;
  color: #fff;
  font-size: 76px;
  line-height: 1;
  text-align: center;
  letter-spacing: -.055em;
  text-shadow:
    0 7px 0 rgba(5, 23, 38, .75),
    0 18px 35px rgba(0, 0, 0, .34);
}

.title small {
  display: block;
  margin-top: 16px;
  color: #cfe9ff;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: .2em;
  text-shadow: none;
}

.lead {
  position: relative;
  z-index: 1;
  margin: 0 0 7px;
  color: #c7dcec;
  font-size: 20px;
  font-weight: 700;
}

.titleMenu {
  position: relative;
  z-index: 1;
}

.modeButton {
  display: flex;
  width: 330px;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  text-align: left;
}

.modeButton .buttonIcon {
  display: grid;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  font-size: 26px;
}

.modeButton.alt .buttonIcon {
  border-color: #75a8d7;
  background: #dceeff;
  color: #1555ac;
}

.titleHint {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
  color: #c9dbe9;
  font-size: 15px;
  font-weight: 800;
}

.laneKey {
  width: 44px;
  height: 0;
  margin-left: 8px;
  border-top: 5px solid var(--green);
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(72, 226, 139, .5);
}

.laneKey.blocked {
  border-top-color: #ff6469;
  border-top-style: dashed;
  box-shadow: none;
}

.selectScreen {
  color: #fff;
}

.choiceMenu {
  margin-top: 12px;
}

.choiceButton {
  display: flex;
  width: 330px;
  min-height: 126px !important;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  text-align: left;
}

.choiceIcon {
  display: grid;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, .15);
  font-size: 38px;
}

.choiceButton.alt .choiceIcon {
  background: #dceeff;
}

.choiceButton.attack {
  border-color: #a91f2d;
  background: linear-gradient(145deg, #f06342, #ca2939);
  box-shadow:
    0 6px 0 #881724,
    0 14px 28px rgba(143, 24, 37, .28);
}

.choiceButton.defend {
  color: #165cae;
}

.lessonsScreen {
  justify-content: flex-start;
  padding-top: 24px;
  gap: 10px;
}

.lessons {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100% - 80px));
  max-height: 690px;
  padding: 8px 12px 14px;
  overflow: auto;
  scrollbar-width: none;
}

.lessons::-webkit-scrollbar {
  display: none;
}

.lessons h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  color: #fff;
  font-size: 20px;
  letter-spacing: .04em;
}

.lessons h3::before {
  content: "";
  width: 9px;
  height: 24px;
  border-radius: 4px;
  background: var(--blue-light);
  box-shadow: 0 0 12px rgba(101, 184, 255, .45);
}

.lessons h3:nth-of-type(2)::before {
  background: var(--green);
  box-shadow: 0 0 12px rgba(72, 226, 139, .45);
}

.lessonRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
}

.lesson {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-template-rows: 1fr auto;
  min-height: 88px;
  padding: 10px 14px 10px 10px;
  overflow: hidden;
  border: 2px solid #c9d9e8;
  border-radius: 15px;
  background: linear-gradient(135deg, #fff, #eaf2f9);
  text-align: left;
  box-shadow:
    0 4px 0 #aabccc,
    0 9px 18px rgba(0, 0, 0, .18);
}

.lesson::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -34px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(31, 111, 229, .07);
}

.lesson .no {
  grid-row: 1 / span 2;
  align-self: center;
  display: grid;
  width: 46px;
  height: 56px;
  place-items: center;
  border-radius: 12px;
  background: #dbeaff;
  color: #175cb9;
  font-size: 28px;
  font-weight: 900;
}

.lesson .motto {
  align-self: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.22;
}

.lesson .st {
  color: #a56d00;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}

.lesson.atk .no {
  background: #d9f8e7;
  color: #087947;
}

.lesson.atk::after {
  background: rgba(72, 226, 139, .09);
}

.lesson.locked {
  border-color: rgba(190, 205, 219, .65);
  filter: saturate(.25);
  opacity: .52;
  box-shadow: 0 3px 0 rgba(158, 177, 193, .72);
}

.lesson.locked .st {
  color: #697887;
}

.lesson:not(.locked):active {
  transform: translateY(3px);
}

#scrPlay.show {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 354px;
  gap: 14px;
  padding: 12px;
  align-items: stretch;
  background: #071827;
}

.field {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 2px solid #31516b;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 45%, #153a58, #081827 76%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 12px 32px rgba(0, 0, 0, .28);
}

#court {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.courtLabel {
  position: absolute;
  z-index: 2;
  left: 18px;
  top: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .64);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  pointer-events: none;
}

.courtLabel b {
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 5px;
  color: rgba(255, 255, 255, .86);
}

.courtLegend {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 13px;
  display: flex;
  gap: 18px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  background: rgba(3, 15, 25, .68);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(7px);
}

.courtLegend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.courtLegend i {
  width: 30px;
  border-top: 4px solid var(--green);
  border-radius: 4px;
}

.courtLegend i.blocked {
  border-top-color: #ff5a62;
  border-top-style: dashed;
}

.panel {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 2px solid #c9d8e6;
  border-radius: 22px;
  background: linear-gradient(165deg, #f9fcff, #e7f0f7);
  box-shadow: var(--shadow);
}

.status {
  display: flex;
  min-height: 47px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 13px;
  background: #0c2a42;
  color: #fff;
  flex-wrap: nowrap;
  font-size: 17px;
  font-weight: 900;
}

#playTitle {
  flex: 0 0 auto;
  color: #a9d9ff;
  white-space: nowrap;
}

#playInfo {
  min-width: 0;
  color: #fff;
  font-size: 16px;
  text-align: right;
  white-space: nowrap;
}

.coach {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  min-height: 214px;
  padding: 16px 14px;
  border: 2px solid #cbd9e7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(13, 43, 67, .1);
}

.coach::after {
  content: "";
  position: absolute;
  left: 87px;
  top: 29px;
  width: 14px;
  height: 14px;
  border-left: 2px solid #d3dfeb;
  border-bottom: 2px solid #d3dfeb;
  background: #f6f9fc;
  transform: rotate(45deg);
}

.coach p {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 11px 10px 10px 15px;
  border: 2px solid #d3dfeb;
  border-radius: 14px;
  background: #f6f9fc;
  color: #142d42;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.62;
}

.face {
  position: relative;
  z-index: 2;
  width: 76px;
  height: 76px;
  margin-top: 5px;
  border: 4px solid #d79455;
  border-radius: 50%;
  background: #ffd1a0;
  box-shadow:
    inset 0 -7px 0 rgba(194, 110, 49, .13),
    0 5px 0 #b97135;
  transition:
    background .2s,
    border-color .2s;
}

.face::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 29px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #273847;
  box-shadow:
    28px 0 0 #273847,
    -8px -26px 0 6px #173047,
    8px -31px 0 9px #173047,
    25px -29px 0 8px #173047,
    39px -23px 0 6px #173047;
}

.face::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 48px;
  width: 20px;
  height: 9px;
  border-bottom: 4px solid #783f2f;
  border-radius: 0 0 18px 18px;
}

.face.good {
  border-color: #20a961;
  background: #c9f4d7;
  box-shadow:
    inset 0 -7px 0 rgba(21, 137, 75, .12),
    0 5px 0 #168149;
}

.face.good::after {
  height: 13px;
  border-bottom-width: 5px;
}

.face.soso {
  border-color: #d5a116;
  background: #fff0ad;
  box-shadow:
    inset 0 -7px 0 rgba(184, 137, 20, .12),
    0 5px 0 #ac7d0c;
}

.face.soso::after {
  left: 26px;
  top: 54px;
  width: 18px;
  height: 0;
  border-radius: 0;
}

.face.bad {
  border-color: #c63842;
  background: #ffd0d2;
  box-shadow:
    inset 0 -7px 0 rgba(176, 41, 52, .12),
    0 5px 0 #9b2832;
}

.face.bad::after {
  top: 55px;
  border-top: 4px solid #783f2f;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.whistle {
  position: absolute;
  right: -9px;
  bottom: -3px;
  width: 20px;
  height: 15px;
  border: 3px solid #eef6fb;
  border-radius: 4px 9px 9px 4px;
  background: #64798c;
  transform: rotate(-18deg);
  box-shadow: 0 2px 0 #324555;
}

.whistle::before {
  content: "";
  position: absolute;
  right: -8px;
  top: 2px;
  width: 8px;
  height: 5px;
  border-radius: 0 4px 4px 0;
  background: #64798c;
}

.whistle::after {
  content: "";
  position: absolute;
  left: -17px;
  top: 2px;
  width: 14px;
  border-top: 2px solid #42586b;
  transform: rotate(-32deg);
  transform-origin: right;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.actions button {
  width: 100%;
}

.actions .big,
#btnKeep,
#btnRetry {
  grid-column: 1 / -1;
}

.actions button:not(.big) {
  min-height: 58px;
}

.panelBack {
  position: static;
  align-self: flex-end;
  margin-top: auto;
  min-height: 48px;
  padding: 7px 15px;
  border-color: #b8c9d8;
  background: #e8eff5;
  color: #526779;
  box-shadow: 0 3px 0 #aebdca;
  backdrop-filter: none;
}

.panelBack span {
  font-size: 20px;
}

.banner {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 46%;
  min-width: 420px;
  padding: 23px 38px;
  border: 3px solid rgba(255, 255, 255, .78);
  border-radius: 18px;
  background:
    linear-gradient(
      105deg,
      rgba(10, 29, 46, .97),
      rgba(24, 78, 118, .97)
    );
  color: #fff;
  font-size: 38px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  letter-spacing: .04em;
  transform: translate(-50%, -50%) skew(-3deg);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, .4),
    inset 8px 0 0 var(--green);
  animation: bannerIn .26s cubic-bezier(.2, .9, .25, 1.25);
}

@keyframes bannerIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.78) skew(-3deg);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) skew(-3deg);
  }
}

/* SVGコート */
.court-shadow {
  fill: #030d15;
  opacity: .68;
}

.turf {
  fill: #173f6b;
}

.floor-board {
  fill: #fff;
  opacity: .023;
}

.floor-board.even {
  opacity: .055;
}

.court-glow {
  fill: url(#courtGlow);
}

.line {
  fill: none;
  stroke: rgba(255, 255, 255, .98);
  stroke-width: .15;
}

.line.boundary {
  stroke-width: .19;
}

.halfway {
  stroke: rgba(255, 255, 255, .18);
  stroke-width: .08;
  stroke-dasharray: .25 .28;
}

.spot {
  fill: #fff;
}

.spot.subtle {
  opacity: .65;
}

.net {
  fill: rgba(222, 238, 249, .24);
  stroke: rgba(255, 255, 255, .82);
  stroke-width: .1;
}

.net-line {
  stroke: rgba(255, 255, 255, .48);
  stroke-width: .045;
}

.goal-post {
  stroke: #fff;
  stroke-width: .24;
}

.goal-post-cap {
  fill: #fff;
}

.goalhit,
.hit {
  fill: transparent;
}

.goal.tappable .net {
  fill: rgba(255, 201, 74, .48);
  stroke: var(--amber);
  stroke-width: .22;
  animation: goalPulse .8s ease-in-out infinite alternate;
}

.goal.tappable .goal-post {
  stroke: var(--amber);
  stroke-width: .34;
}

@keyframes goalPulse {
  to {
    filter: drop-shadow(0 0 .45px #ffc94a);
  }
}

.piece {
  cursor: default;
}

.piece-visual {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform .12s ease,
    filter .12s ease;
  filter: url(#pieceShadow);
}

.piece-shadow {
  fill: rgba(2, 12, 20, .42);
}

.select-ring {
  fill: none;
  stroke: transparent;
  stroke-width: .15;
}

.body {
  stroke-width: .14;
}

.shirt {
  stroke-width: .09;
}

.collar {
  fill: none;
  stroke-width: .11;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.teamA .body {
  fill: #f5fbff;
  stroke: #fff;
}

.teamA .shirt {
  fill: #1e6fe3;
  stroke: #0b469d;
}

.teamA .collar {
  stroke: #fff;
}

.teamB .body {
  fill: #171d24;
  stroke: #05080b;
}

.teamB .shirt {
  fill: #e5484d;
  stroke: #871723;
}

.teamB .collar {
  stroke: #111820;
}

.num {
  fill: #fff;
  font-size: .86px;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .24);
  stroke-width: .055;
  pointer-events: none;
}

.teamB .num {
  fill: #111820;
  stroke: rgba(255, 255, 255, .16);
}

.role {
  display: none;
  fill: #fff;
  font-size: .38px;
  font-weight: 900;
  letter-spacing: .04em;
  paint-order: stroke;
  stroke: #0b2236;
  stroke-width: .055;
  pointer-events: none;
}

.gk .role {
  display: block;
}

.teamA.gk .body {
  fill: #092d50;
  stroke: #7bd5ff;
}

.teamA.gk .shirt {
  fill: #21a9d8;
  stroke: #d9f8ff;
}

.teamB.gk .body {
  fill: #2d2529;
  stroke: #ff8a8e;
}

.teamB.gk .shirt {
  fill: #5c2630;
  stroke: #ff7278;
}

.gk .collar {
  stroke: var(--amber);
}

.piece.draggable .select-ring,
.piece.tappable .select-ring {
  stroke: var(--amber);
  stroke-width: .18;
  stroke-dasharray: .26 .16;
  animation: selectPulse .75s ease-in-out infinite alternate;
}

.piece.draggable .piece-visual {
  cursor: grab;
}

.piece.dragging .piece-visual {
  transform: scale(1.16);
  filter:
    url(#pieceShadow)
    drop-shadow(0 0 .42px #ffc94a);
  cursor: grabbing;
}

.piece.moving .piece-visual {
  transform: scale(1.05);
}

@keyframes selectPulse {
  from {
    opacity: .58;
    transform: scale(.96);
  }

  to {
    opacity: 1;
    transform: scale(1.12);
  }
}

.ball-wrap {
  filter: url(#ballShadow);
  pointer-events: none;
}

.ball-wrap.flying {
  filter:
    url(#ballShadow)
    drop-shadow(0 0 .25px #fff);
}

.ball-rim {
  fill: #fff;
  stroke: #14202c;
  stroke-width: .08;
}

.ball-panel {
  fill: #1c2834;
}

.ball-shine {
  fill: #fff;
  opacity: .9;
}

.ball-trail {
  opacity: 0;
  stroke: #fff;
  stroke-width: .23;
  stroke-linecap: round;
  pointer-events: none;
}

.ball-trail.show {
  opacity: .65;
  stroke-dasharray: .3 .23;
  animation: trailDash .34s linear infinite;
}

.ball-trail.shot {
  stroke: var(--amber);
  stroke-width: .3;
}

@keyframes trailDash {
  to {
    stroke-dashoffset: -.53;
  }
}

.range {
  fill: rgba(101, 184, 255, .1);
  stroke: rgba(188, 225, 255, .72);
  stroke-width: .1;
  stroke-dasharray: .34 .27;
  pointer-events: none;
  animation: rangeFlow 1.6s linear infinite;
}

.range-center {
  fill: rgba(255, 255, 255, .7);
  pointer-events: none;
}

@keyframes rangeFlow {
  to {
    stroke-dashoffset: -1.22;
  }
}

.zone {
  fill: rgba(255, 201, 74, .22);
  stroke: rgba(255, 218, 113, .58);
  stroke-width: .09;
  stroke-dasharray: .28 .2;
  pointer-events: none;
}

.lane,
.lane-halo,
.guide,
.lane-cross {
  pointer-events: none;
}

.lane-halo {
  stroke: rgba(4, 16, 25, .62);
  stroke-width: .62;
  stroke-linecap: round;
}

.lane {
  stroke-width: .34;
  stroke-linecap: round;
}

.lane.open {
  stroke: #43f28c;
  filter: drop-shadow(0 0 .16px #3ee584);
}

.lane.blocked {
  stroke: #ff555d;
  stroke-dasharray: .52 .34;
  filter: drop-shadow(0 0 .12px #ff555d);
}

.lane-cross {
  fill: none;
  stroke: #fff;
  stroke-width: .16;
  stroke-linecap: round;
  paint-order: stroke;
  filter: drop-shadow(0 0 .11px #e31c29);
}

.guide-halo {
  stroke: rgba(4, 16, 25, .55);
  stroke-width: .42;
}

.guide {
  stroke: var(--amber);
  stroke-width: .17;
  stroke-dasharray: .25 .22;
  pointer-events: none;
}

.ghost {
  pointer-events: none;
}

.ghost-ring {
  fill: rgba(255, 201, 74, .12);
  stroke: var(--amber);
  stroke-width: .12;
  stroke-dasharray: .2 .16;
}

.ghost-body {
  fill: rgba(255, 255, 255, .28);
  stroke: rgba(255, 255, 255, .8);
  stroke-width: .1;
}

.ghost.teamA .ghost-body {
  fill: rgba(31, 111, 229, .35);
}

.ghost.teamB .ghost-body {
  fill: rgba(229, 72, 77, .35);
}

.ghost-check {
  fill: none;
  stroke: #fff;
  stroke-width: .16;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flash {
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

.flash-card {
  fill: rgba(5, 20, 32, .93);
  stroke: #fff;
  stroke-width: .16;
}

.flash-text {
  fill: #fff;
  stroke: #071827;
  stroke-width: .13;
  paint-order: stroke;
  font-size: 2.55px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .04em;
}

.flash.show {
  opacity: 1;
  animation: flashPop 1.05s cubic-bezier(.2, .85, .2, 1);
}

.flash.goal .flash-card,
.flash.good .flash-card {
  fill: rgba(13, 126, 72, .95);
  stroke: #65f3a3;
}

.flash.cut .flash-card,
.flash.steal .flash-card {
  fill: rgba(174, 28, 40, .95);
  stroke: #ff8a8f;
}

.flash.save .flash-card {
  fill: rgba(21, 91, 171, .95);
  stroke: #8fd2ff;
}

.flash.miss .flash-card,
.flash.time .flash-card {
  fill: rgba(179, 112, 10, .96);
  stroke: #ffe08a;
}

@keyframes flashPop {
  0% {
    opacity: 0;
    transform: scale(.55) rotate(-4deg);
  }

  16% {
    opacity: 1;
    transform: scale(1.08) rotate(1deg);
  }

  28%,
  76% {
    transform: scale(1) rotate(0);
  }

  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

.resultScreen {
  color: #fff;
}

.resultScreen::before {
  content: "";
  position: absolute;
  width: 570px;
  height: 570px;
  border: 2px solid rgba(101, 184, 255, .13);
  border-radius: 50%;
  box-shadow:
    0 0 0 40px rgba(101, 184, 255, .035),
    0 0 0 90px rgba(101, 184, 255, .025);
}

.resultScreen > * {
  position: relative;
  z-index: 1;
}

.resultBadge {
  padding: 6px 15px;
  border-radius: 20px;
  background: var(--green);
  color: #062518;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
}

.resultScreen h2 {
  font-size: 46px;
  text-shadow: 0 5px 16px rgba(0, 0, 0, .3);
}

.stars {
  min-height: 72px;
  color: var(--amber);
  font-size: 68px;
  line-height: 1;
  letter-spacing: 7px;
  text-shadow:
    0 5px 0 #9a6509,
    0 10px 20px rgba(0, 0, 0, .3);
}

#resText {
  margin: -2px 0 0;
  color: #d9ebf8;
  font-size: 23px;
  font-weight: 800;
}

.mottoBox {
  min-width: 620px;
  padding: 10px 18px 17px;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  text-align: center;
  box-shadow: 0 13px 30px rgba(0, 0, 0, .24);
}

.mottoLabel {
  margin: 0 0 7px;
  color: #617588;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
}

.motto {
  color: #155bb8;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.25;
}

.resultMenu .big {
  min-height: 70px;
}

.modal {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 10, 17, .72);
  backdrop-filter: blur(8px);
}

.modal .box {
  min-width: 500px;
  padding: 30px 36px 34px;
  border: 3px solid #d6e2ec;
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.modalIcon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: -58px auto 12px;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--amber);
  color: #332100;
  font-size: 34px;
  font-weight: 900;
  box-shadow: 0 5px 0 #ad7711;
}

.modal .box p {
  margin: 12px 0 24px;
  font-size: 26px;
  font-weight: 900;
}

.modal .menu button {
  min-width: 170px;
}

.modal .menu .big {
  min-height: 64px;
}

.rotate {
  display: none;
}

@media (orientation: portrait) {
  .rotate {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background:
      radial-gradient(circle at 50% 40%, #174a72, #06121d 70%);
    color: #fff;
    text-align: center;
  }

  .rotateIcon {
    display: grid;
    width: 110px;
    height: 110px;
    place-items: center;
    border: 4px solid #74c4ff;
    border-radius: 28px;
    color: var(--green);
    font-size: 72px;
    line-height: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    animation: rotateHint 1.8s ease-in-out infinite;
  }

  .rotate strong {
    font-size: 36px;
  }

  .rotate small {
    color: #bfd9eb;
    font-size: 19px;
  }

  @keyframes rotateHint {
    0%,
    100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(90deg);
    }
  }
}

@media (max-height: 720px) and (orientation: landscape) {
  .screen {
    padding-top: 18px;
    padding-bottom: 18px;
    gap: 12px;
  }

  .title {
    font-size: 62px;
  }

  .title small {
    margin-top: 10px;
  }

  .choiceButton {
    min-height: 108px !important;
  }

  .coach {
    min-height: 184px;
  }

  .coach p {
    font-size: 19px;
  }

  .lesson {
    min-height: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}