@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #01040e; color: #eaf7ff; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; overflow-x: hidden; }
.holo-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 20% 45%, rgba(0, 242, 254, .09), transparent 28%), radial-gradient(circle at 82% 35%, rgba(139, 92, 246, .09), transparent 30%), radial-gradient(circle, rgba(0, 242, 254, .04), transparent 80%); perspective: 1000px; }.holo-bg::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle, rgba(0, 242, 254, .13) 0 1px, transparent 2px); background-size: 92px 92px; opacity: .45; animation: drift-particles 13s linear infinite; }.holo-item { position: absolute; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 42px; opacity: .96; filter: drop-shadow(0 0 8px rgba(0, 242, 254, .8)); text-shadow: 0 0 14px #00f2fe, 0 0 28px rgba(0, 242, 254, .7); animation: float-holo linear infinite; }.holo-item.purple { filter: drop-shadow(0 0 8px rgba(139, 92, 246, .85)); text-shadow: 0 0 14px #8b5cf6, 0 0 28px rgba(139, 92, 246, .7); }.holo-item.gold { filter: drop-shadow(0 0 8px rgba(250, 204, 21, .85)); text-shadow: 0 0 14px #facc15, 0 0 28px rgba(250, 204, 21, .7); }.c1 { left: 10%; animation-duration: 10s; animation-delay: -2s; }.c2 { left: 85%; animation-duration: 12s; animation-delay: -7s; }.c3 { left: 35%; animation-duration: 9s; animation-delay: -1s; }.c4 { left: 65%; animation-duration: 13s; animation-delay: -9s; }.c5 { left: 20%; animation-duration: 11s; animation-delay: -4s; }.c6 { left: 75%; animation-duration: 10.5s; animation-delay: -6s; }
.page-shell { position: relative; z-index: 1; width: 100%; min-height: 100vh; padding: 0 0 48px; }
.site { width: min(484px, 100%); min-height: 505px; overflow: hidden; background-color: rgba(2, 8, 20, .76); background-image: linear-gradient(rgba(19, 59, 81, .24) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 59, 81, .24) 1px, transparent 1px), radial-gradient(circle at 79% 24%, rgba(76, 44, 173, .34), transparent 56px), radial-gradient(circle at 21% 78%, rgba(5, 174, 198, .18), transparent 105px); background-size: 10px 10px, 10px 10px, auto, auto; border-top: 1px solid #0b2331; box-shadow: inset 0 0 64px #000a1b; }
.top-line { height: 7px; background: linear-gradient(90deg, transparent 0 3%, #20cce0 3% 3.5%, transparent 3.5% 96%, #a061ff 96% 96.5%, transparent 96.5%); opacity: .9; }
.hero { padding: 8px 10px 0; }
.eyebrow { margin: 0; font-size: 7px; color: #80e8e4; letter-spacing: 2px; }
.hero-row { display: flex; justify-content: space-between; align-items: end; gap: 6px; margin-top: 3px; }
h1 { font-size: 15px; line-height: 1.2; margin: 0; letter-spacing: .2px; text-shadow: 0 0 10px #3bd9ed; }
.hero-actions { display: flex; align-items: center; gap: 7px; }.player-count { color: #49dcac; font-size: 7px; white-space: nowrap; }.pulse-dot { display: inline-block; width: 6px; height: 6px; margin-right: 2px; border-radius: 50%; background: #38e6ac; animation: blink 1s infinite; }.qq-community { display: inline-flex; align-items: center; gap: 2px; color: #bff9ff; font-size: 6px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color .2s, transform .2s; }.qq-community:hover { color: #39edf1; transform: translateY(-1px); }.qq-community img { width: 12px; height: 12px; object-fit: contain; }
.ticker { position: relative; height: 28px; margin-top: 11px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; border-left: 3px solid #00f2fe; border-right: 3px solid #8b5cf6; border-radius: 6px; background: rgba(10, 15, 30, .8); color: #38bdf8; }.ticker::before, .ticker::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 34px; pointer-events: none; }.ticker::before { left: 0; background: linear-gradient(90deg, #0a0f1e, transparent); }.ticker::after { right: 0; background: linear-gradient(-90deg, #0a0f1e, transparent); }.ticker-track { display: flex; align-items: center; gap: 0; width: max-content; animation: scroll-forever 11s linear infinite; }.ticker-item { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 10px; font-weight: 700; }.ticker .flags { height: 12px; overflow: hidden; font-style: normal; font-size: 12px; line-height: 1; letter-spacing: -1px; }.ticker b { color: #000; text-align: center; background: #facc15; padding: 0 5px; font-weight: 900; font-size: 11px; line-height: 16px; height: 16px; transform: skewX(-12deg); border-radius: 3px; box-shadow: 0 0 8px rgba(250, 204, 21, .5); }
.support-channels { display: flex; justify-content: center; gap: 10px; height: 0; position: relative; z-index: 4; }.support-channel { position: relative; top: 7px; min-width: 106px; height: 31px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 9px; color: #e8faff; background: linear-gradient(145deg, rgba(15, 55, 70, .95), rgba(5, 16, 29, .98)); border: 1px solid rgba(20, 222, 231, .55); border-radius: 5px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(124, 255, 255, .19), 0 3px 10px rgba(0, 0, 0, .4); transition: .3s; }.support-channel:hover { transform: translateY(-2px); border-color: #50fcf1; box-shadow: 0 0 12px rgba(0, 242, 254, .3); }.support-channel img { width: 21px; height: 21px; object-fit: contain; border-radius: 50%; }.support-channel span { display: grid; text-align: left; line-height: 1.05; }.support-channel b { font-size: 8px; }.support-channel small { margin-top: 2px; color: #62dfe8; font-size: 6px; }
.categories { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; padding: 9px 10px 14px; }
.categories a { min-height: 40px; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(16, 215, 231, .58); border-radius: 6px; background: linear-gradient(135deg, rgba(18, 90, 100, .73), rgba(7, 22, 37, .95) 48%, rgba(3, 11, 23, .98)); box-shadow: inset 0 1px 0 rgba(122, 249, 255, .25), inset 0 -12px 22px rgba(0, 0, 0, .34), 0 0 0 1px rgba(4, 73, 90, .65), 0 4px 11px rgba(0, 0, 0, .55); display: grid; place-content: center; text-align: center; gap: 3px; color: #e8faff; text-decoration: none; font-size: 8px; transition: .3s; }.categories a::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(112deg, rgba(103, 243, 255, .16), transparent 34%, transparent 62%, rgba(0, 162, 203, .1)), repeating-linear-gradient(90deg, transparent 0 13px, rgba(91, 224, 239, .045) 13px 14px); }.categories a::after { content: ""; position: absolute; left: 6px; right: 6px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #79fbff, transparent); opacity: .78; }.categories a:hover { transform: translateY(-3px); background: rgba(0, 242, 254, .2); box-shadow: inset 0 1px 0 rgba(159, 255, 255, .42), inset 0 -12px 22px rgba(0, 0, 0, .2), 0 0 14px rgba(1, 227, 238, .37); }.categories i { font-style: normal; font-size: 12px; filter: drop-shadow(0 0 3px #c435d4); }
.notice { margin: 0 10px 9px; border: 1px solid #355a70; height: 31px; display: grid; place-content: center; text-align: center; font-size: 7px; line-height: 1.15; color: #f7fbff; background: #020813; }.notice span { display: flex; align-items: center; justify-content: center; gap: 2px; }.notice img { width: 10px; height: 10px; object-fit: contain; border-radius: 50%; }.notice b { color: #b9faff; }.notice strong { color: #42d7ff; }
.mowang-notice { position: relative; display: flex; align-items: center; gap: 7px; min-height: 48px; margin: 0 10px 9px; padding: 6px 10px; overflow: hidden; border: 1px solid rgba(48, 227, 196, .55); border-radius: 6px; color: #eafcff; background: linear-gradient(100deg, rgba(2, 34, 46, .94), rgba(3, 11, 26, .98)); box-shadow: inset 0 1px 0 rgba(147, 255, 242, .18), 0 0 14px rgba(0, 242, 200, .08); }.mowang-notice::before { content: "置顶客服"; position: absolute; top: 0; right: 0; padding: 2px 6px; border-radius: 0 0 0 5px; color: #07211f; background: #38e8c5; font-size: 6px; font-weight: 900; letter-spacing: 1px; }.mowang-notice > img { flex: 0 0 auto; width: 29px; height: 29px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(40, 235, 190, .45)); }.mowang-copy { min-width: 0; text-align: left; font-size: 6px; line-height: 1.5; }.mowang-copy p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.mowang-copy b { color: #70fae4; }.mowang-copy strong { color: #fff; }.mowang-copy a { color: #3eeaff; font-weight: 900; text-decoration: underline; text-underline-offset: 2px; }.mowang-slogan { display: none; margin: 0; text-align: center; color: #d9f9ff; font-weight: 700; }.mowang-slogan strong { color: #15e8ee; text-shadow: 0 0 8px rgba(0, 242, 254, .65); }
.cards { padding: 0 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card { height: 160px; position: relative; z-index: 1; border: 1px solid rgba(148, 163, 184, .15); border-radius: 12px; overflow: visible; padding: 15px 14px 13px; text-align: center; background: linear-gradient(145deg, rgba(15, 23, 42, .8), rgba(5, 9, 20, .9)); box-shadow: 0 8px 20px rgba(0, 0, 0, .6); transition: transform .3s, border-color .3s, box-shadow .3s; }.card:hover { z-index: 5; transform: translateY(-6px); border-color: rgba(0, 242, 254, .4); box-shadow: 0 12px 28px rgba(0, 0, 0, .7), 0 0 16px rgba(0, 242, 254, .1); }.card:hover .logo img { transform: scale(1.025); }.card:hover .corner-dot { box-shadow: 0 0 10px 3px #2fc6ba; }.card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(104, 239, 245, .055), transparent 31%, transparent 66%, rgba(0, 92, 134, .06)); }.card::after { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(122, 255, 255, .28), transparent); }.corner-dot { position: absolute; right: 10px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #20d7a7; box-shadow: 0 0 7px 2px #2fc6ba; transition: box-shadow .3s; }.corner-dot::after { content: ""; position: absolute; inset: -4px; border: 1px solid rgba(87, 253, 234, .18); border-radius: 50%; }.card-token { position: absolute; z-index: 2; bottom: 22px; left: 25px; color: rgba(141, 188, 201, .18); font-size: 30px; filter: grayscale(1); transform: rotate(-18deg); pointer-events: none; }.card-token.cards { left: auto; right: -18px; top: 50px; bottom: auto; transform: rotate(23deg); }.logo { height: 62px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 3; margin-top: 2px; background: radial-gradient(ellipse, rgba(5, 19, 34, .36), transparent 69%); }.logo img { display: block; width: 100%; max-width: 95%; max-height: 54px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.58)); transition: transform .3s; }
.heroine-card { grid-row: span 2; overflow: hidden; padding: 0; isolation: isolate; border-color: rgba(255, 191, 71, .48); background: #190d10; box-shadow: inset 0 0 0 1px rgba(255, 215, 115, .14), 0 8px 24px rgba(0, 0, 0, .7), 0 0 17px rgba(255, 145, 45, .16); }.heroine-card::before { z-index: 2; background: linear-gradient(180deg, rgba(5, 9, 20, .08), transparent 36%, rgba(2, 7, 17, .55)); }.heroine-card::after { z-index: 5; left: 14px; right: 14px; background: linear-gradient(90deg, transparent, rgba(255, 239, 184, .75), transparent); }.heroine-card:hover { border-color: rgba(255, 213, 98, .92); box-shadow: inset 0 0 0 1px rgba(255, 226, 138, .3), 0 14px 32px rgba(0, 0, 0, .75), 0 0 26px rgba(255, 149, 44, .35); }.heroine-photo { position: absolute; inset: -5%; z-index: 1; background: url("assets/football-star.png") center 24% / cover no-repeat; transform-origin: 50% 42%; animation: heroine-breathe 8s ease-in-out infinite alternate; }.heroine-glint { position: absolute; z-index: 3; top: -20%; bottom: -20%; left: -55%; width: 30%; pointer-events: none; opacity: .58; background: linear-gradient(105deg, transparent, rgba(255, 244, 201, .7), transparent); transform: rotate(8deg); animation: heroine-glint 5s ease-in-out infinite; }.heroine-spark { position: absolute; z-index: 4; color: #ffdd83; font-size: 15px; font-style: normal; text-shadow: 0 0 8px #ff9e27, 0 0 16px rgba(255, 220, 121, .8); animation: heroine-spark 2.8s ease-in-out infinite; }.heroine-spark.s1 { top: 16%; left: 14%; }.heroine-spark.s2 { top: 43%; right: 12%; animation-delay: -1.1s; }.heroine-spark.s3 { bottom: 13%; left: 22%; font-size: 11px; animation-delay: -2s; }
.heroine-card { height: auto; align-self: stretch; }
.card-spacer { visibility: hidden; pointer-events: none; }
.sk .logo img, .od .logo img { filter: brightness(5.2) contrast(1.12) drop-shadow(0 0 7px rgba(81, 179, 255, .42)); }
.mowang-qq { margin-top: 1px; color: #d6fbff; }
.mowang-copy .mowang-qq { gap: 3px; color: #eafcff; font-size: 8px; font-weight: 900; text-decoration: none; }.mowang-copy .mowang-qq img { width: 14px; height: 14px; }.mowang-copy .mowang-qq span { color: #bdfaff; }
.mowang-copy > p:nth-child(-n+3) { transform: translateY(-2px); }.mowang-copy > p:last-child { transform: translateY(5px); }
.mowang-icons { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }.mowang-icons > img { width: 29px; height: 29px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(40, 235, 190, .45)); }.mowang-icons .mowang-qq { margin: 0; gap: 1px; font-size: 6px; }.mowang-icons .mowang-qq img { width: 14px; height: 14px; }
.mowang-icons { flex-direction: column; justify-content: center; gap: 3px; }.mowang-qq-icon { display: flex; width: 29px; height: 29px; }.mowang-qq-icon img { width: 100%; height: 100%; object-fit: contain; }
.stars { position: relative; z-index: 1; color: #1eeaff; letter-spacing: 2px; font-size: 10px; text-shadow: 0 0 7px #15b7e9; margin-top: 4px; }.card p { position: relative; z-index: 1; height: 22px; margin: 8px auto 8px; max-width: 92%; overflow: hidden; white-space: nowrap; color: #b6c1d2; font-size: 7px; border-left: 3px solid #9c5fff; padding: 5px 5px 0; background: rgba(0, 0, 0, .72); border-radius: 3px; }.card button, .card-link { position: relative; z-index: 1; appearance: none; display: grid; place-items: center; width: 100%; height: 31px; background: linear-gradient(180deg, rgba(15, 53, 70, .98), rgba(8, 24, 37, .98)); border: 1px solid #10b6c8; border-radius: 5px; color: #12e8ef; font-size: 10px; font-weight: 700; letter-spacing: 1px; cursor: pointer; text-decoration: none; box-shadow: inset 0 1px 0 rgba(121, 248, 255, .2); }.card button:hover, .card-link:hover { box-shadow: inset 0 1px 0 rgba(180, 255, 255, .4), 0 0 10px #2ee5e3; }
footer { color: #34404f; text-align: center; padding: 10px 8px 3px; font-size: 7px; }footer p { margin: 0 0 6px; letter-spacing: 4px; }footer div { display: flex; justify-content: space-around; }footer b { display: block; margin: 7px auto 0; transform: rotate(45deg); color: #c6d7da; font-size: 14px; text-shadow: 0 0 9px #86f7f4; }
.local-note { width: min(484px,100%); margin: 12px 0 0; padding: 0 10px; color: #687482; font-size: 11px; }

@keyframes float-holo { 0% { top: 110vh; transform: rotateX(10deg) rotateY(-15deg) rotateZ(0deg) scale(.9); opacity: 0; } 8%, 92% { opacity: .96; } 100% { top: -10vh; transform: rotateX(-10deg) rotateY(15deg) rotateZ(360deg) scale(1.08); opacity: 0; } }
@keyframes drift-particles { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-92px, -92px, 0); } }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes scroll-forever { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes heroine-breathe { from { transform: scale(1) translate3d(-1%, -1%, 0); filter: saturate(1.02) contrast(1.02); } to { transform: scale(1.09) translate3d(1%, 1.5%, 0); filter: saturate(1.17) contrast(1.08); } }
@keyframes heroine-glint { 0%, 20% { transform: translateX(0) rotate(8deg); opacity: 0; } 35% { opacity: .62; } 58%, 100% { transform: translateX(590%) rotate(8deg); opacity: 0; } }
@keyframes heroine-spark { 0%, 100% { transform: translateY(4px) scale(.7); opacity: .15; } 50% { transform: translateY(-5px) scale(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

/* 桌面端按原始画布等比放大，保留窄版落地页的构图而不显得过小。 */
@media (min-width: 700px) {
  /* 原版以 1280px 视口为基准：1000px 外容器，960px 内容区。 */
  .page-shell { padding: 0 0 48px; }
  .site { width: 1000px; min-height: 1002px; margin: 0 auto; zoom: 1; }
  .top-line { height: 10px; }
  .hero { height: 107px; padding: 20px 20px 0; }
  .eyebrow { font-family: monospace; font-size: 12px; font-weight: 900; letter-spacing: 4px; }
  h1 { font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 900; letter-spacing: 2px; line-height: normal; }
  .player-count { font-size: 12px; font-weight: 700; }
  .hero-actions { gap: 14px; }
  .qq-community { gap: 5px; font-size: 11px; }
  .qq-community img { width: 20px; height: 20px; }
  .ticker { height: 38px; margin-top: 15px; }
  .ticker::before, .ticker::after { width: 50px; }
  .ticker-track { gap: 0; }
  .ticker-item { gap: 12px; padding: 0 20px; font-size: 14px; }
  .ticker .flags { width: 97.1px; height: 16px; font-size: 16px; letter-spacing: -1px; }
  .ticker b { height: 22px; padding: 0 8px; font-size: 15px; line-height: 18px; }
  .support-channels { gap: 18px; }
  .support-channel { top: 14px; min-width: 168px; height: 45px; gap: 9px; border-radius: 8px; padding: 5px 13px; }
  .support-channel img { width: 31px; height: 31px; }
  .support-channel b { font-size: 13px; }
  .support-channel small { margin-top: 4px; font-size: 9px; }
  .categories { padding: 62px 20px 0; gap: 12px; }
  .categories a { min-height: 78.5px; border-radius: 12px; gap: 7px; font-size: 16px; }
  .categories i { font-size: 25px; }
  .notice { height: 40px; margin: 0 20px 0; font-size: 13px; }
  .notice img { width: 17px; height: 17px; }
  .mowang-notice { min-height: 69px; gap: 13px; margin: 0 20px 0; padding: 10px 17px; border-radius: 9px; }
  .mowang-notice::before { padding: 4px 10px; border-radius: 0 0 0 8px; font-size: 10px; letter-spacing: 2px; }
  .mowang-notice > img { width: 45px; height: 45px; }
  .mowang-icons { gap: 7px; }
  .mowang-icons > img { width: 45px; height: 45px; }
  .mowang-qq-icon { width: 45px; height: 45px; }
  .mowang-icons .mowang-qq { gap: 3px; font-size: 10px; }
  .mowang-icons .mowang-qq img { width: 19px; height: 19px; }
  .mowang-copy { font-size: 11px; line-height: 1.55; }
  .mowang-copy .mowang-qq { gap: 5px; font-size: 14px; text-decoration: none; }.mowang-copy .mowang-qq img { width: 20px; height: 20px; }
  .mowang-copy > p:nth-child(-n+3) { transform: translateY(-4px); }.mowang-copy > p:last-child { transform: translateY(8px); }
  .mowang-slogan { display: block; flex: 1; padding: 0 26px 0 20px; font-size: 13px; line-height: 1.45; white-space: nowrap; }
  .cards { padding: 0 20px; grid-template-columns: repeat(3, 1fr); justify-content: stretch; gap: 20px; }
  .card { height: 266.5px; border-radius: 12px; padding: 20px 14px; }
  .heroine-card { height: auto; padding: 0; }
  .corner-dot { right: 15px; top: 15px; width: 8px; height: 8px; }
  .logo { height: 90px; margin-top: 0; }
  .logo img { max-height: 72px; }
  .card-token { bottom: 44px; left: 35px; font-size: 48px; }
  .card-token.cards { right: 35px; top: 72px; }
  .stars { font-size: 18px; letter-spacing: 4px; margin-top: 9px; }
  .card p { height: 30.5px; margin: 14px auto 20px; max-width: 78%; font-size: 12px; border-left-width: 5px; padding: 8px 8px 0; }
  .card button, .card-link { height: 47px; border-radius: 9px; font-size: 17px; letter-spacing: 2px; }
  footer { padding: 20px 20px 3px; font-size: 11px; }
  footer p { margin-bottom: 11px; }
  .local-note { width: 1000px; margin: 20px auto 0; padding: 0 20px; font-size: 14px; }
}