:root {
  --ink: #f3f4e8;
  --muted: #94a99e;
  --green: #26e0a3;
  --gold: #f2c35c;
  --red: #ff6b78;
  --panel: rgba(10, 42, 33, .78);
  --line: rgba(204, 238, 218, .11);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, #185947 0, transparent 38%),
    linear-gradient(180deg, #071e18 0%, #04130f 72%, #020a08 100%);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .28; animation: drift 9s ease-in-out infinite alternate; }
.orb-one { width: 180px; height: 180px; background: #1dbe86; top: 13%; right: -105px; }
.orb-two { width: 130px; height: 130px; background: #d9a93b; top: 46%; left: -90px; animation-delay: -3s; }
.orb-three { width: 190px; height: 190px; background: #155eab; bottom: 2%; right: -140px; animation-delay: -6s; }
.tile { position: absolute; color: rgba(255,255,255,.045); font-weight: 900; font-family: serif; transform: rotate(15deg); }
.tile-one { font-size: 112px; top: 7%; right: -20px; }
.tile-two { font-size: 86px; top: 56%; left: -14px; transform: rotate(-13deg); }
.tile-three { font-size: 110px; bottom: 5%; right: -15px; }
.shell { position: relative; z-index: 1; width: min(100%, 560px); margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 18px calc(116px + var(--safe-bottom)); }
.hero { padding: 10px 2px 24px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #8cc2ad; font-size: 9px; letter-spacing: 2.1px; font-weight: 700; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: pulse 1.6s infinite; }
.hero-top { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.season { color: var(--gold); font-size: 12px; letter-spacing: 2px; margin: 0 0 4px; }
h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(40px, 12vw, 58px); line-height: .98; letter-spacing: -3px; }
h1 span { color: var(--gold); text-shadow: 0 0 25px rgba(242,195,92,.25); }
.hero-seal { flex: 0 0 66px; height: 76px; border: 1px solid rgba(242,195,92,.55); display: grid; place-content: center; text-align: center; transform: rotate(4deg); background: rgba(16,63,49,.5); box-shadow: inset 0 0 0 3px #08231b, inset 0 0 0 4px rgba(242,195,92,.22), 0 15px 35px rgba(0,0,0,.25); }
.hero-seal b { color: var(--gold); font-family: serif; font-size: 34px; line-height: 1; }
.hero-seal small { color: #a88c4f; font-size: 5px; margin-top: 7px; letter-spacing: 1px; }
.hero-copy { margin: 20px 0 24px; color: #aabcb3; font-family: "Songti SC", serif; font-size: 14px; line-height: 1.75; letter-spacing: 1px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(4,20,15,.55); border: 1px solid var(--line); border-radius: 18px; padding: 15px 4px; box-shadow: 0 18px 45px rgba(0,0,0,.18); }
.hero-stats div { text-align: center; position: relative; }
.hero-stats div + div::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 1px; background: var(--line); }
.hero-stats strong { display: block; color: #e9fff6; font-size: 20px; font-family: Georgia, serif; }
.hero-stats span { display: block; color: #718d80; margin-top: 4px; font-size: 9px; letter-spacing: 1px; }
section { margin-top: 26px; }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.section-title span { color: var(--gold); font-size: 9px; letter-spacing: 2.4px; text-transform: uppercase; }
.section-title h2 { margin: 3px 0 0; font-size: 23px; letter-spacing: 1px; }
.updated { color: #637f72; font-size: 9px; padding-bottom: 3px; }
.champion-card { position: relative; min-height: 146px; display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 13px; padding: 20px 15px 16px; border: 1px solid rgba(242,195,92,.35); border-radius: 24px; background: linear-gradient(135deg, rgba(83,65,21,.55), rgba(10,57,43,.9) 58%, rgba(8,28,23,.92)); overflow: hidden; box-shadow: 0 22px 50px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08); }
.champion-card::after { content: "壹"; position: absolute; right: -8px; bottom: -34px; color: rgba(242,195,92,.055); font-family: serif; font-size: 130px; font-weight: 900; }
.champion-shine { position: absolute; width: 90px; height: 250px; left: -120px; top: -50px; transform: rotate(24deg); background: linear-gradient(90deg, transparent, rgba(255,244,190,.13), transparent); animation: shine 5s ease-in-out infinite; }
.crown { position: absolute; left: 36px; top: 12px; color: var(--gold); font-size: 20px; transform: rotate(-10deg); filter: drop-shadow(0 0 8px rgba(242,195,92,.45)); }
.champion-rank { position: absolute; right: 15px; top: 12px; color: rgba(242,195,92,.8); font-size: 8px; font-weight: 800; letter-spacing: 2px; }
.champion-avatar { width: 66px; height: 66px; display: grid; place-items: center; color: #063528; font-family: "Songti SC", serif; font-size: 30px; font-weight: 900; background: linear-gradient(145deg, #ffe38a, #c78a28); border-radius: 19px; border: 3px solid rgba(255,255,255,.13); box-shadow: 0 10px 25px rgba(0,0,0,.3), 0 0 25px rgba(242,195,92,.15); transform: rotate(-3deg); }
.champion-info { position: relative; z-index: 1; }
.champion-info small { color: #a9b9ad; font-size: 9px; }
.champion-info h3 { margin: 3px 0; font-family: "Songti SC", serif; font-size: 29px; }
.champion-info p { margin: 0; color: #799288; font-size: 9px; }
.champion-score { position: relative; z-index: 1; text-align: right; align-self: end; }
.champion-score span { display: block; color: #819b8e; font-size: 8px; margin-bottom: 3px; }
.champion-score strong { color: var(--gold); font-family: Georgia, serif; font-size: 22px; white-space: nowrap; }
.rank-list { display: grid; gap: 9px; margin-top: 10px; }
.tone-0 { --accent: #71f7c6; --player-color: #71f7c6; }
.tone-1 { --accent: #ffd66b; --player-color: #ffd66b; }
.tone-2 { --accent: #70c9ff; --player-color: #70c9ff; }
.tone-3 { --accent: #ff7b91; --player-color: #ff7b91; }
.tone-4 { --accent: #bda0ff; --player-color: #bda0ff; }
.rank-row { --accent: #82a99a; display: grid; grid-template-columns: 30px 43px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 66px; padding: 10px 13px 10px 10px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(100deg, rgba(15,55,43,.72), rgba(6,29,23,.75)); box-shadow: inset 3px 0 var(--accent); animation: rowIn .5s both; }
.rank-number { color: #678579; font-family: Georgia, serif; font-size: 15px; text-align: center; }
.rank-avatar { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 13px; color: #032d22; font-weight: 900; background: var(--accent); box-shadow: 0 6px 15px rgba(0,0,0,.2); }
.rank-name strong { display: block; font-family: "Songti SC", serif; font-size: 17px; }
.rank-name span { display: block; color: #648075; font-size: 8px; margin-top: 3px; }
.rank-score { text-align: right; }
.rank-score strong { display: block; font-family: Georgia, serif; font-size: 17px; }
.rank-score span { color: #627d71; font-size: 8px; }
.positive { color: var(--gold) !important; }
.negative { color: var(--red) !important; }
.zero { color: #8fa69b !important; }
.add-small { border: 1px solid rgba(38,224,163,.25); border-radius: 999px; color: var(--green); background: rgba(20,86,65,.35); padding: 8px 12px; font-size: 11px; cursor: pointer; }
.history-list { display: grid; gap: 13px; }
.game-card { border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(12,48,38,.9), rgba(4,24,19,.82)); overflow: hidden; box-shadow: 0 14px 35px rgba(0,0,0,.2); }
.game-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 15px 12px; border-bottom: 1px dashed rgba(194,226,210,.1); }
.game-date { display: flex; align-items: center; gap: 10px; }
.date-cube { width: 39px; height: 42px; display: grid; place-items: center; background: #f1ead6; border-radius: 9px; color: #0b4232; box-shadow: inset 0 0 0 2px #d7c9a4, 0 7px 15px rgba(0,0,0,.2); font-family: serif; font-size: 21px; font-weight: 900; }
.game-date small { display: block; color: var(--gold); font-size: 8px; letter-spacing: 1px; }
.game-date strong { display: block; font-size: 16px; margin-top: 2px; }
.winner-pill { color: #8ef0cc; font-size: 9px; border: 1px solid rgba(38,224,163,.2); border-radius: 999px; padding: 6px 9px; background: rgba(38,224,163,.06); }
.game-scores { display: grid; grid-template-columns: repeat(2, 1fr); padding: 6px 12px 13px; gap: 3px 8px; }
.game-player { display: flex; align-items: center; justify-content: space-between; padding: 9px 7px; border-bottom: 1px solid rgba(255,255,255,.04); }
.game-player:nth-last-child(-n+2) { border-bottom: 0; }
.game-player-name { display: flex; align-items: center; gap: 7px; color: #a8bcb2; font-size: 11px; }
.mini-avatar { width: 23px; height: 23px; display: grid; place-items: center; color: #05251c; font-size: 9px; font-weight: 900; border-radius: 7px; background: var(--player-color); }
.game-player strong { font-family: Georgia, serif; font-size: 13px; }
.did-not-play { color: #526b60 !important; font-size: 10px !important; font-family: inherit !important; }
.game-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 15px; background: rgba(0,0,0,.12); color: #4e6c60; font-size: 8px; }
.delete-game { border: 0; background: transparent; color: #5a7569; padding: 4px 0 4px 10px; font-size: 9px; cursor: pointer; }
.empty { padding: 38px 18px; text-align: center; color: #658076; border: 1px dashed var(--line); border-radius: 20px; }
footer { color: #3f5a4f; font-size: 9px; text-align: center; letter-spacing: 1px; padding: 38px 0 0; }
footer span { color: #765f2f; margin: 0 7px; }
.dock { position: fixed; z-index: 20; left: 50%; bottom: calc(12px + var(--safe-bottom)); transform: translateX(-50%); width: min(calc(100% - 30px), 450px); height: 64px; display: grid; grid-template-columns: 1fr 1fr 1.2fr; align-items: center; padding: 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 23px; background: rgba(5,28,21,.9); box-shadow: 0 15px 45px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(20px); }
.dock button { height: 100%; border: 0; border-radius: 18px; color: #668277; background: transparent; display: grid; place-content: center; gap: 2px; cursor: pointer; }
.dock button i { font-style: normal; font-size: 18px; line-height: 1; }
.dock button span { font-size: 8px; }
.dock button.active { color: var(--gold); }
.dock .dock-add { color: #042d22; background: linear-gradient(135deg, #7effd0, #22c992); box-shadow: 0 8px 20px rgba(38,224,163,.18); }
.dock .dock-add i { font-size: 20px; }
.modal { position: fixed; z-index: 50; inset: 0; visibility: hidden; pointer-events: none; }
.modal.open { visibility: visible; pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,8,6,.74); opacity: 0; transition: opacity .25s; backdrop-filter: blur(6px); }
.modal.open .modal-backdrop { opacity: 1; }
.modal-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; padding: 10px 20px calc(25px + var(--safe-bottom)); border-radius: 28px 28px 0 0; background: linear-gradient(180deg, #0e392d, #071e18); border-top: 1px solid rgba(255,255,255,.13); box-shadow: 0 -20px 60px rgba(0,0,0,.45); transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.modal.open .modal-sheet { transform: translateY(0); }
.sheet-handle { width: 36px; height: 4px; margin: 0 auto 15px; border-radius: 99px; background: #48665a; }
.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.modal-heading span { color: var(--gold); font-size: 8px; letter-spacing: 2px; }
.modal-heading h2 { margin: 2px 0 0; font-size: 27px; }
.close-button { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; color: #90a89d; background: rgba(0,0,0,.15); font-size: 24px; line-height: 1; }
.field-label { display: block; color: #a5bbb0; font-size: 10px; margin: 14px 0 7px; }
input { width: 100%; height: 48px; border: 1px solid rgba(204,238,218,.14); border-radius: 14px; outline: none; color: #f3f8f5; background: rgba(2,18,13,.45); padding: 0 14px; appearance: none; }
input:focus { border-color: rgba(38,224,163,.55); box-shadow: 0 0 0 3px rgba(38,224,163,.08); }
.score-heading { display: flex; justify-content: space-between; align-items: center; margin: 19px 0 9px; color: #a5bbb0; font-size: 10px; }
.score-heading small { color: #567268; font-size: 8px; }
.score-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.score-input { position: relative; }
.score-input label { position: absolute; z-index: 1; left: 11px; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #03231a; background: var(--player-color); font-size: 9px; font-weight: 900; }
.score-input input { height: 47px; padding-left: 44px; font-family: Georgia, serif; font-size: 15px; }
.balance { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; padding: 10px 13px; border-radius: 12px; color: #78968a; background: rgba(0,0,0,.14); font-size: 9px; }
.balance strong { font-family: Georgia, serif; font-size: 15px; color: var(--green); }
.balance.invalid strong { color: var(--red); }
.form-error { min-height: 17px; color: #ff8791; font-size: 10px; margin: 8px 2px 0; }
.submit-button { width: 100%; height: 52px; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; border: 0; border-radius: 15px; color: #04251c; background: linear-gradient(135deg, #7effd0, #25d59a); font-weight: 800; box-shadow: 0 12px 28px rgba(38,224,163,.2); }
.submit-button:disabled { opacity: .55; }
.submit-button b { font-size: 21px; }
.toast { position: fixed; z-index: 80; left: 50%; top: max(20px, env(safe-area-inset-top)); transform: translate(-50%, -20px); opacity: 0; color: #073126; background: #93f7d2; border-radius: 999px; padding: 10px 16px; font-size: 11px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: .25s; pointer-events: none; white-space: nowrap; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.reveal { animation: reveal .65s both; }
.ranking-section { animation-delay: .1s; }
.history-section { animation-delay: .2s; }
@keyframes pulse { 50% { opacity: .4; transform: scale(.8); } }
@keyframes drift { to { transform: translate(20px, 35px) scale(1.12); } }
@keyframes shine { 0%, 50% { left: -120px; } 75%, 100% { left: 120%; } }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rowIn { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } }
@media (min-width: 600px) {
  .modal-sheet { left: 50%; right: auto; width: 520px; transform: translate(-50%, 105%); }
  .modal.open .modal-sheet { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}