/* ==========================================================================
   World Cup Betting - Pixel-Perfect CSS
   Design matched to original Vue.js app.09b42a3c.css
   Base: 37.5px = 1rem (750px design / 2 for retina)
   ========================================================================== */


/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box !important;
  word-wrap: break-word;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  font-size: 37.5px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.15;
}

body {
  height: 100%;
  margin: 0;
  font-family: "SourceHanSansCN-Medium", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #0f0e11;
  background: linear-gradient(180deg, #328728, #468f3d);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  vertical-align: middle;
  border-style: none;
}

button {
  border: none;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input,
textarea {
  color: inherit;
  font: inherit;
  outline: none;
}

ul, li, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

main {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

.lang-Chinese {
  font-family: "SourceHanSansCN-Medium", "Microsoft YaHei", "PingFang SC", sans-serif;
}

[class*="van-"]:focus,
a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 0;
}

/* ===== APP LAYOUT ===== */
#app {
  position: relative;
  height: 100%;
  width: 100%;
}

.app-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.app-wrapper::-webkit-scrollbar {
  display: none;
}

.world-cup-home {
  min-height: 100vh;
  background: linear-gradient(180deg, #328728, #468f3d);
  color: #fff;
  font-family: "Source Han Sans CN", "SourceHanSansCN-Medium", "Microsoft YaHei", "PingFang SC", sans-serif;
  position: relative;
}

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  width: 100%;
  margin-bottom: 1.33333rem;
}

.hero__bg {
  width: 100%;
  display: block;
  margin-top: -1px;
}

.hero__title {
  position: absolute;
  top: 1.57333rem;
  left: 50%;
  transform: translateX(-50%);
  width: 7.04rem;
  z-index: 2;
}

.hero__time {
  position: absolute;
  top: 3.73333rem;
  left: 50%;
  transform: translateX(-50%);
  height: .98667rem;
  z-index: 2;
  color: #285655;
  text-align: center;
  font-family: DIN, DINBold, sans-serif;
  font-size: .4rem;
  font-weight: 500;
  line-height: normal;
}

/* Rules button - top right */
.hero__rule {
  cursor: pointer;
  font-size: .32rem;
  font-weight: 500;
  color: #0f0e11;
  position: absolute;
  top: 1.57333rem;
  right: 0;
  z-index: 10;
  display: flex;
  width: 1.14667rem;
  height: .53333rem;
  padding: 2px .14667rem 2px .16rem;
  justify-content: space-between;
  align-items: center;
  border-radius: .13333rem 0 0 .13333rem;
  background: linear-gradient(90deg, #ffd64d, #ea953e);
}

.hero__rule img {
  width: .10667rem;
  margin-left: auto;
}

/* ===== MASCOT BAR ===== */
.hero__mascot-wrap {
  width: calc(100% - .53333rem);
  padding: 0 .26667rem;
  position: absolute;
  bottom: -.82667rem;
  left: 50%;
  transform: translateX(-50%);
  height: 1.56rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.33333rem;
  background: linear-gradient(90deg, #cbf225, #3cadad);
  z-index: 5;
}

.hero__mascot {
  width: 1.6rem;
  align-self: end;
  flex-shrink: 0;
}

.hero__mascot-text {
  font-size: .18667rem;
  flex: 1;
  text-align: center;
}

.hero__mascot-text-line1 {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .05rem;
  font-size: .32rem;
  font-weight: 700;
  color: #fff;
}

.hero__mascot-text-line1 span {
  font-size: .4rem;
  color: #115150;
  font-weight: 700;
}

.hero__mascot-text-line1 img {
  height: .53333rem;
  flex-shrink: 0;
}

.hero__mascot-text-line2 {
  font-size: .32rem;
  color: #115150;
  font-weight: 500;
  margin-top: .05333rem;
}

.hero__mascot-text-line2 span {
  color: #f7fe76;
  font-weight: 700;
}

.hero__mascot-btn {
  font-size: .32rem;
  font-weight: 700;
  color: #fff;
  background: #115150;
  border-radius: 1.33333rem;
  width: auto;
  min-width: 2.13333rem;
  padding: 0 .4rem;
  height: .8rem;
  line-height: .8rem;
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}

/* ===== MAIN CONTENT ===== */
.main {
  padding: 0 .32rem;
  position: relative;
  z-index: 1;
}

/* ===== PREDICT CARD ===== */
.predict-card {
  margin-top: .10667rem;
  border-radius: .4rem;
  background: #034b30;
  box-shadow: 0 .10667rem .42667rem rgba(0, 0, 0, .35);
  overflow: hidden;
}

.predict-card__title {
  background-color: #044132;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .16rem;
  height: 1.2rem;
  border-radius: .4rem .4rem 0 0;
  padding: 0 .3rem;
}

.predict-card__title img {
  width: .16rem;
  height: auto;
}

.predict-card__title .predict-card__title-img {
  width: 4.42667rem;
  height: auto;
}

.predict-card__content {
  padding: .6rem .33333rem .26667rem;
  background: #004d2c;
  border-radius: 0 0 .4rem .4rem;
}

.predict-card__note {
  margin-top: .26667rem;
  font-size: .29333rem;
  color: #fff1b6;
  text-align: center;
  opacity: .95;
}

/* ===== PICK ROW ===== */
.pick-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: .66667rem;
}

/* ===== PICK SLOT ===== */
.pick-slot {
  flex: 1;
  z-index: 1;
  border-radius: .2rem;
  transition: border-color .2s, box-shadow .2s;
  height: 2.4rem;
  border: 1.5px solid #2aa095;
  background: #01453a;
  box-shadow: 0 0 1px .5px #2aa095;
  position: relative;
}

.pick-slot.is-active {
  box-shadow: 0 0 .13333rem 2px rgba(42, 160, 149, .55);
}

.pick-slot__tab-img {
  position: absolute;
  left: -1.5px;
  bottom: -1.5px;
  display: block;
  pointer-events: none;
  width: .85333rem;
  z-index: 3;
}

.pick-slot__tab-img--champion {
  width: .90667rem;
}

.pick-slot__tab-img--runner {
  width: .85333rem;
}

.pick-slot__reset {
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 5;
  width: 1.06667rem;
  height: .4rem;
  line-height: .4rem;
  border-radius: 0 .2rem;
  border: 1px solid #2aa095;
  background: linear-gradient(180deg, #65e3c5, #0fa4c4);
  color: #115150;
  text-align: center;
  font-size: .29333rem;
  font-weight: 500;
  cursor: pointer;
  display: none;
}

.pick-slot__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pick-slot__hint {
  font-size: .32rem;
  color: #fff1b6;
  font-weight: 500;
  position: absolute;
  line-height: 1.3;
  margin-bottom: .06667rem;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.pick-slot__plus-img {
  width: .8rem;
  height: auto;
  margin-top: -.26667rem;
  cursor: pointer;
}

.pick-slot__flag {
  display: block;
  height: 1.46667rem;
  border: 1px solid #fff;
  object-fit: cover;
  margin-top: -.26667rem;
}

.pick-slot__name {
  font-size: .32rem;
  color: #fff1b6;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: .06667rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ===== VS DIVIDER ===== */
.pick-vs {
  align-self: center;
  flex-shrink: 0;
  pointer-events: none;
  font-size: .48rem;
  font-weight: 900;
  font-style: italic;
  color: #f8e31b;
  text-shadow: 0 2px 0 #5a4a00, 0 .05333rem .10667rem rgba(0, 0, 0, .4);
  padding: 0 .05333rem;
}

.pick-vs img {
  width: 1.70667rem;
  display: block;
  pointer-events: none;
}

/* ===== GROUP GRID ===== */
.group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: .26667rem;
  row-gap: .32rem;
  align-items: start;
}

.group-block {
  background: transparent;
}

.group-block__head {
  text-align: left;
  font-size: .24rem;
  font-weight: 500;
  color: #fff1b6;
  letter-spacing: 1px;
  padding: 0 .05333rem .26667rem;
  line-height: 1.2;
}

.group-block__head span {
  font-size: .32rem;
  font-weight: 700;
}

/* ===== TEAM ROW ===== */
.team-row {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background: #fff;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
  margin-bottom: .29333rem;
  padding-right: .13333rem;
  min-height: .90667rem;
}

.team-row:last-child {
  margin-bottom: 0;
}

.team-row:active:not(.is-champion):not(.is-runner) {
  background: #f5f5f5;
}

.team-row.is-champion,
.team-row.is-runner {
  box-shadow: 0 0 0 2px #ff395f;
}

/* Check icon overlay inside the radio circle when team is selected as champion or runner-up */
.team-row__radio::after {
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .22rem;
  font-weight: 700;
  color: #ff395f;
  display: none;
}
.team-row.is-champion .team-row__radio::after,
.team-row.is-runner .team-row__radio::after {
  display: block;
}

.team-row__flag {
  position: relative;
  z-index: 2;
  display: block;
  width: .74667rem;
  height: .45333rem;
  flex-shrink: 0;
  margin-right: .13333rem;
  object-fit: cover;
}

.team-row__name {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  font-size: .26667rem;
  font-weight: 500;
  color: #0f0e11;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 0;
  word-break: break-all;
}

.team-row__radio {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: .26667rem;
  height: .26667rem;
  margin-left: auto;
  border-radius: 50%;
  border: 1px solid #0f0e11;
  box-sizing: border-box;
}

.team-row.is-champion .team-row__radio,
.team-row.is-runner .team-row__radio {
  border-color: #ff395f;
  border-width: 2px;
}

/* ===== RANK CARD ===== */
.rank-card {
  margin-top: .66667rem;
  padding: 0 0 .32rem;
  border-radius: .4rem;
  overflow: hidden;
}

.rank-card__title {
  height: 1.2rem;
  display: flex;
  align-items: stretch;
  justify-content: center;
  border-radius: .4rem .4rem 0 0;
  background-color: #033d30;
  position: relative;
  overflow: hidden;
}

.rank-tab-bg {
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.rank-tab-bg--left { left: 0; }
.rank-tab-bg--right { right: 0; left: auto; }

.rank-tab-hit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  z-index: 2;
}

.rank-tab-text {
  width: 2.45333rem;
  height: auto;
  display: block;
  pointer-events: none;
  z-index: 2;
  opacity: 0.5;
  transition: opacity .2s;
}
.rank-tab-hit.active .rank-tab-text {
  opacity: 1;
}

.rank-list {
  list-style: none;
}

.rank-list .rank-empty {
  height: 2.66667rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #034b30;
  font-size: .34667rem;
  color: #fff1b6;
  font-weight: 500;
}

.rank-row {
  height: 1.2rem;
  line-height: 1.2rem;
  padding: 0 .53333rem;
  margin-top: -.5px;
  display: flex;
  align-items: center;
  background-color: #034b30;
  font-size: .34667rem;
}

.rank-row:nth-of-type(2n) {
  background-color: #034531;
}

.rank-row:last-child {
  border-bottom: none;
}

.rank-num-wrap {
  width: .74667rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-num {
  width: 100%;
  text-align: center;
  font-weight: 500;
  font-size: .4rem;
  color: #fff1b6;
}

.rank-num--1 { color: #ffd700; }
.rank-num--2 { color: #c0c0c0; }
.rank-num--3 { color: #cd7f32; }

.rank-flag {
  display: block;
  width: 1.09333rem;
  height: auto;
  flex-shrink: 0;
  margin: 0 .26667rem 0 .73333rem;
  object-fit: cover;
}

.rank-name {
  flex: 1;
  color: #fff1b6;
  font-weight: 500;
  word-break: break-all;
}

.rank-votes {
  font-size: .34667rem;
  color: #fff1b6;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.rank-card__note {
  font-size: .26667rem;
  color: #fff1b6;
  background-color: #034b30;
  border-radius: 0 0 .4rem .4rem;
  height: .8rem;
  line-height: .8rem;
  text-align: center;
  margin-top: -.5px;
}

/* ===== BOTTOM SPACER ===== */
.bottom-spacer {
  height: 2.66667rem;
}

/* ===== FIX BAR ===== */
.fix-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: .26667rem;
  padding-bottom: .21333rem;
  z-index: 100;
  transition: background .2s ease;
}

.fix-bar__btns {
  display: flex;
  gap: .26667rem;
}

.fix-bar__btn {
  flex: 1;
  border: none;
  border-radius: .64rem;
  font-size: .42667rem;
  font-weight: 700;
  cursor: pointer;
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
}

.fix-bar__btn--ghost {
  background: #fff;
  color: #0f0e11;
  box-shadow: 0 .05333rem .16rem rgba(0, 0, 0, .15);
}

.fix-bar__btn--primary {
  flex: 1.5;
  color: #0f0e11;
  background: linear-gradient(90deg, #ffd844, #ffa600);
}

.fix-bar__legal {
  margin-top: .26667rem;
  text-align: center;
  font-size: .26667rem;
  color: #fff1b6;
  line-height: 1.4;
}

/* ===== OVERLAY ===== */
.van-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  z-index: 200;
}

/* ===== TOAST ===== */
.van-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
}

.van-toast--text {
  max-width: 100% !important;
  width: max-content !important;
}

.van-toast .van-toast__text {
  background: rgba(0, 0, 0, .85);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  max-width: 82%;
  text-align: center;
  font-size: .32rem;
  line-height: 1.4;
}

/* ===== VAN POPUP (BASE) ===== */
.van-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 201;
  background: #fff;
  border-radius: .26667rem;
  width: 85%;
  max-width: 8.8rem;
  overflow: hidden;
}

/* ===== MY VOTE POPUP ===== */
.my-vote-popup {
  width: 8.8rem;
  box-sizing: border-box;
}

.my-vote-dialog {
  width: 100%;
  max-width: 8.72rem;
  background: #fff;
  border-radius: .26667rem;
  padding: .53333rem .42667rem .48rem;
  box-sizing: border-box;
}

.my-vote-dialog__title {
  margin: 0 0 .50667rem;
  text-align: center;
  font-size: .4rem;
  font-weight: 700;
  color: #0f0e11;
}

.my-vote-dialog__row {
  display: flex;
  gap: .85333rem;
  margin-bottom: .54667rem;
}

.my-vote-card {
  flex: 1;
  position: relative;
  height: 2.4rem;
  border-radius: .2rem;
  background: #01453a;
  padding: .26667rem .13333rem .69333rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1.5px solid #2aa095;
  box-shadow: inset 0 0 2px 1px #2aa095;
}

.my-vote-card .pick-slot__tab-img {
  position: absolute;
  left: -1.5px;
  bottom: -1.5px;
  display: block;
  pointer-events: none;
  width: .85333rem;
}

.my-vote-card__flag {
  display: block;
  height: 1.46667rem;
  border: 1px solid #fff;
  object-fit: cover;
  margin-top: .10667rem;
}

.my-vote-card__name {
  position: absolute;
  bottom: 0;
  left: 50%;
  line-height: 1.3;
  margin-bottom: .06667rem;
  transform: translateX(-50%);
  font-size: .32rem;
  color: #fff1b6;
  font-weight: 500;
  white-space: nowrap;
}

.my-vote-dialog__confirm {
  display: block;
  width: 100%;
  margin: 0 auto;
  height: 1.2rem;
  border: none;
  border-radius: .64rem;
  background: linear-gradient(90deg, #ffd844, #ffa600);
  font-size: .42667rem;
  font-weight: 700;
  color: #0f0e11;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ===== VOTE FORM POPUP ===== */
.vote-form-popup {
  width: 8.8rem;
  box-sizing: border-box;
}

.vote-form-dialog {
  padding: .53333rem .42667rem .48rem;
  text-align: center;
}

.vote-form-dialog__title {
  margin: 0 0 .50667rem;
  text-align: center;
  font-size: .4rem;
  font-weight: 700;
  color: #0f0e11;
}

.vote-form-dialog__input-row {
  margin-bottom: .54667rem;
}

.vote-form-input {
  width: 100%;
  padding: 12px 16px;
  font-size: .4rem;
  background: #f2f3f5;
  border: none;
  border-radius: .26667rem;
  outline: none;
  text-align: center;
  font-weight: 500;
  color: #000;
}

.vote-form-input::placeholder {
  color: #999;
}

.vote-form-dialog__btns {
  display: flex;
  gap: .32rem;
}

.vote-form-btn {
  flex: 1;
  height: 1.2rem;
  border-radius: .64rem;
  font-size: .42667rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.vote-form-btn--cancel {
  background: #f0f0f0;
  color: #666;
}

.vote-form-btn--confirm {
  background: linear-gradient(90deg, #ffd844, #ffa600);
  color: #0f0e11;
}

/* ===== RULES POPUP ===== */
.rules-popup {
  width: 8.8rem;
  max-height: 78vh;
  overflow: hidden;
  box-sizing: border-box;
}

.rules-dialog {
  padding: .53333rem .42667rem .48rem;
}

.rules-dialog__title {
  font-size: .4rem;
  font-weight: 700;
  color: #0f0e11;
  margin-bottom: .4rem;
  text-align: center;
}

.rules-dialog__content {
  font-size: .32rem;
  line-height: 1.7;
  color: #333;
  max-height: 52vh;
  overflow-y: auto;
  margin-bottom: .48rem;
  white-space: pre-line;
  -webkit-overflow-scrolling: touch;
}

.rules-dialog__confirm {
  display: block;
  width: 100%;
  height: 1.2rem;
  border-radius: .64rem;
  background: linear-gradient(90deg, #ffd844, #ffa600);
  font-size: .42667rem;
  font-weight: 700;
  color: #0f0e11;
  border: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ===== RULES CONTENT STYLES ===== */
.rules-sheet__p {
  font-size: .32rem;
  color: #000;
  line-height: 1.7;
  text-align: left;
}

.rules-sheet__p:last-child {
  margin-bottom: 0;
}

.rules-sheet__section-title {
  font-size: .37333rem;
  font-weight: 700;
  color: #0f0e11;
  margin: .4rem 0 .26667rem;
  line-height: 1.4;
}

/* ===== RULES VIP TABLE ===== */
.rules-vip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .29333rem;
  color: #333;
  margin: .26667rem 0;
}

.rules-vip-table thead tr {
  background: #f5f5f5;
}

.rules-vip-table th {
  padding: .21333rem .26667rem;
  text-align: center;
  font-weight: 700;
  color: #0f0e11;
  border: 1px solid #e5e5e5;
}

.rules-vip-table td {
  padding: .21333rem .26667rem;
  text-align: center;
  border: 1px solid #e5e5e5;
}

.rules-vip-table tbody tr:nth-child(even) {
  background: #fafafa;
}

/* ===== RULES CONTENT ADDITIONAL STYLES ===== */
.rules-sheet__intro {
  font-size: .32rem;
  color: #333;
  line-height: 1.7;
  text-align: left;
  margin-bottom: .26667rem;
}

.rules-sheet__bullet-wrap {
  text-align: left;
  padding-left: .26667rem;
  margin: .13333rem 0;
}

.rules-sheet__bullet {
  font-size: .32rem;
  color: #333;
  line-height: 1.7;
  position: relative;
  padding-left: .4rem;
  margin-bottom: .13333rem;
}

.rules-sheet__bullet::before {
  content: "";
  position: absolute;
  left: .13333rem;
  top: .36rem;
  width: .10667rem;
  height: .10667rem;
  border-radius: 50%;
  background: #328728;
}

.rules-sheet__highlight {
  color: #e74c3c;
  font-weight: 700;
}

.rules-sheet__divider {
  height: 1px;
  background: #eee;
  margin: .4rem 0;
}

.rules-sheet__title-main {
  font-size: .48rem;
  font-weight: 700;
  color: #0f0e11;
  text-align: center;
  line-height: 1.4;
  margin-bottom: .32rem;
}

/* ===== LOADING OVERLAY ===== */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

.van-loading--spinner {
  width: .8rem;
  height: .8rem;
}

.van-loading__spinner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.van-loading__spinner i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.van-loading__spinner i::before {
  content: "";
  display: block;
  width: 2px;
  height: 25%;
  margin: 0 auto;
  background-color: #c8c9cc;
  border-radius: 40%;
}

.van-loading__spinner--spinner i:nth-child(1)  { transform: rotate(30deg);  animation: van-spinner 1.2s linear infinite; animation-delay: -1.1s; }
.van-loading__spinner--spinner i:nth-child(2)  { transform: rotate(60deg);  animation: van-spinner 1.2s linear infinite; animation-delay: -1.0s; }
.van-loading__spinner--spinner i:nth-child(3)  { transform: rotate(90deg);  animation: van-spinner 1.2s linear infinite; animation-delay: -.9s;  }
.van-loading__spinner--spinner i:nth-child(4)  { transform: rotate(120deg); animation: van-spinner 1.2s linear infinite; animation-delay: -.8s;  }
.van-loading__spinner--spinner i:nth-child(5)  { transform: rotate(150deg); animation: van-spinner 1.2s linear infinite; animation-delay: -.7s;  }
.van-loading__spinner--spinner i:nth-child(6)  { transform: rotate(180deg); animation: van-spinner 1.2s linear infinite; animation-delay: -.6s;  }
.van-loading__spinner--spinner i:nth-child(7)  { transform: rotate(210deg); animation: van-spinner 1.2s linear infinite; animation-delay: -.5s;  }
.van-loading__spinner--spinner i:nth-child(8)  { transform: rotate(240deg); animation: van-spinner 1.2s linear infinite; animation-delay: -.4s;  }
.van-loading__spinner--spinner i:nth-child(9)  { transform: rotate(270deg); animation: van-spinner 1.2s linear infinite; animation-delay: -.3s;  }
.van-loading__spinner--spinner i:nth-child(10) { transform: rotate(300deg); animation: van-spinner 1.2s linear infinite; animation-delay: -.2s;  }
.van-loading__spinner--spinner i:nth-child(11) { transform: rotate(330deg); animation: van-spinner 1.2s linear infinite; animation-delay: -.1s;  }
.van-loading__spinner--spinner i:nth-child(12) { transform: rotate(360deg); animation: van-spinner 1.2s linear infinite; animation-delay: 0s;    }

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes van-spinner {
  0%   { opacity: 1; }
  100% { opacity: .15; }
}

@keyframes van-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes van-fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes van-slide-up-enter {
  0%   { transform: translate3d(0, 100%, 0); }
}

@keyframes van-slide-up-leave {
  100% { transform: translate3d(0, 100%, 0); }
}

@keyframes van-slide-down-enter {
  0%   { transform: translate3d(0, -100%, 0); }
}

@keyframes van-slide-down-leave {
  100% { transform: translate3d(0, -100%, 0); }
}

@keyframes van-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== TOUCH TARGET ACCESSIBILITY ===== */
/* Ensure minimum 44px touch targets for mobile usability */
.hero__rule { min-height: 44px; min-width: 44px; }
.pick-slot__reset { min-height: 44px; min-width: 44px; line-height: 44px; }
.team-row { min-height: 44px; }

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media screen and (max-width: 360px) {
  html { font-size: 32px; }
  .hero__mascot-text-line1 span { font-size: .36rem; }
  .hero__mascot-text-line2 { font-size: .28rem; }
  .hero__mascot-btn { width: 1.8rem; font-size: .28rem; }
  .predict-card__content { padding: .5rem .26667rem .26667rem; }
}

@media screen and (max-width: 319px) {
  html { font-size: 30px; }
}

@media screen and (min-width: 375px) and (max-width: 413px) {
  html { font-size: 37.5px; }
}

@media screen and (min-width: 414px) {
  html { font-size: 40px; }
}

@media screen and (min-width: 750px) {
  html { font-size: 50px; }

  #app {
    max-width: 10rem;
    margin: 0 auto;
  }

  .app-wrapper {
    max-width: 10rem;
    margin: 0 auto;
  }

  .fix-bar {
    left: 50%;
    transform: translateX(-50%);
    max-width: 10rem;
  }
}

@media print {
  .fix-bar,
  .van-overlay,
  .van-toast {
    display: none !important;
  }
}