:root {
  color-scheme: light;
  color: #293d43;
  background: #bfe3d9;
  font-family: "YouYuan", "Yuanti SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --panel: #fff9e9;
  --line: #cfccb0;
  --muted: #63726d;
  --accent: #216b67;
  --gold: #9c641b;
  --ink: #304e50;
}
.coin-chip { border: 1px solid #bf9850; border-radius: 16px; background: #fff0bb; color: #79551d; padding: 7px 9px; font: inherit; font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.level-chip { color: #426352; background: #e9edce; border: 1px solid #b5c6a8; border-radius: 16px; padding: 7px 9px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.wallet-banner { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0; padding: 16px; border: 1px solid #cbaa61; border-radius: 18px; background: linear-gradient(130deg, #fff0bb, #fff8de); }
.wallet-banner > div { display: grid; gap: 5px; }
.wallet-banner span { font-size: 11px; color: #886524; }
.wallet-banner strong { font-size: 25px; color: #79501a; overflow-wrap: anywhere; }
.service-links { display: flex; gap: 7px; margin: 12px 0; flex-wrap: wrap; }
.service-links .button { flex: 1; min-width: 70px; }
.boost-notice { color: #526835; background: #e8efce; border-radius: 12px; padding: 12px; font-size: 12px; line-height: 1.6; }
.task-card { background: #fffbee; border: 1px solid #d0c6a7; border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.task-card.claimed { background: #ecf0dd; }
.task-heading, .task-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.task-heading h3 { font-size: 14px; margin: 0; }
.shop-item-card .task-heading h3, .shop-item-description { font-size: 14px; }
.shop-item-description { line-height: 1.6; }
.coin-reward { color: #90611c; font-size: 13px; font-weight: 800; white-space: nowrap; }
.task-footer { margin: 12px 0 0; }
.task-footer small { font-size: 10px; color: #6c7860; max-width: 55%; }
.task-footer .button { flex-shrink: 0; }
.equipment-reward { color: #995515; font-size: 12px; text-align: right; max-width: 52%; }
.loot-history ul { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.loot-history li { padding: 8px; border-radius: 8px; background: #fff9e8; }
.loot-history strong, .loot-history small { display: block; }
.loot-history small { color: #66765d; font-size: 11px; margin-top: 4px; }
.item-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.item-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 12px; align-items: start; background: #fffdf7; border: 1px solid #dedfce; border-radius: 18px; padding: 16px; min-width: 0; }
.item-emblem, .ultimate-emblem { font-size: 32px; background: #eee8cd; border-radius: 14px; padding: 8px; line-height: 1.2; }
.item-card .item-emblem { grid-column: 1; grid-row: 1 / 3; width: 48px; height: 48px; padding: 8px; font-size: 26px; text-align: center; background: #f4eedc; }
.item-card h3 { grid-column: 2; font-size: 15px; margin: 2px 0 0; }
.item-card p { grid-column: 2; font-size: 12px; line-height: 1.65; color: #63726d; margin: 0; }
.item-card small { grid-column: 1 / -1; color: #738065; font-size: 11px; }
.item-card .button { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
.ultimate-card .skill-card-heading { flex-wrap: wrap; }
.ultimate-card .badge { margin-left: auto; }
.ultimate-smash { background: #ffe2b0; }
.ultimate-curve { background: #d9eaf6; }
.ultimate-footwork { background: #d9eddb; }
.ultimate-block { background: #e8dff5; }
.ledger-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #d9d8bd; font-size: 12px; }
.ledger-row small { display: block; margin-top: 4px; color: #738065; }
.arena-specials { padding: 5px 0; }
.charge-row { display: flex; align-items: center; gap: 6px; color: #87601d; font-size: 10px; }
.charge-row > small { font-size: 9px; max-width: 40%; }
.charge-meter { flex: 1; min-width: 20px; height: 6px; border-radius: 5px; background: #ddd7b8; overflow: hidden; }
.charge-meter i { display: block; height: 100%; background: #e9ad41; }
.ultimate-buttons { display: flex; gap: 6px; margin-top: 5px; }
.ultimate-buttons > button { flex: 1; min-width: 0; min-height: 38px; border: 1px solid #be9148; border-radius: 9px; color: #78531c; background: #ffecb3; padding: 5px; cursor: pointer; }
.ultimate-buttons strong { display: block; font-size: 11px; }
.ultimate-buttons span, .ultimate-buttons small { font-size: 9px; }
.ultimate-buttons > small { font-size: 10px; color: #6a755e; }
.combat-items { display: flex; gap: 6px; margin-top: 5px; }
.combat-items button { flex: 1; min-width: 0; min-height: 30px; padding: 4px; border: 1px solid #a8b98f; border-radius: 8px; background: #e8eed1; color: #43604e; font-size: 10px; cursor: pointer; }
.combat-items small { display: block; font-size: 8px; }
.arena-specials button:disabled { opacity: .5; cursor: default; }
.combat-item-drawer summary { font-size: 10px; color: #536951; padding: 6px 0 2px; cursor: pointer; }
.with-specials .arena-switches { margin-top: 5px; }
.with-specials .arena-switches button { min-height: 30px; }
.with-specials .arena-help { margin: 3px 0; font-size: 9px; }
.with-specials .arena-commit { min-height: 40px; }
.app-shell { container-type: inline-size; container-name: game; }
@container game (max-width: 360px) { .topbar-actions .day-chip { display: none; } }
.ultimate-burst { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 5; padding: 8px 20px; background: #fff0bdeb; color: #8a4a12; border: 2px solid #d7a451; border-radius: 20px; font-size: 16px; font-weight: 900; white-space: nowrap; pointer-events: none; box-shadow: 0 0 24px #ffc956; }
.arena-court.ultimate-active { box-shadow: inset 0 0 26px #f5c458; }
.arena-specials[hidden], .ultimate-burst[hidden], .coin-chip[hidden], .level-chip[hidden] { display: none; }
@media (max-width: 380px) { .topbar-actions { gap: 4px; } .coin-chip { max-width: 80px; padding: 6px; } .day-chip { max-width: 68px; overflow: hidden; text-overflow: ellipsis; } .item-card { padding: 10px; } }
@media (max-height: 700px) { .arena-specials { padding: 3px 0; } .arena-switches { margin-top: 4px; } .arena-specials .ultimate-buttons > button { min-height: 32px; } }
.training-tabs { display: flex; gap: 10px; margin: 16px 0; }
.training-tabs a { flex: 1; text-align: center; padding: 12px 8px; border-radius: 12px; background: #e5edcf; color: #305b50; text-decoration: none; font-weight: 700; font-size: 13px; }
.training-section-title { font-size: 18px; margin: 18px 0 8px; }
.training-tile small { font-size: 11px; color: #63726d; }
#basic-training, #skill-training { scroll-margin-top: 12px; }
#skill-training { margin-top: 24px; }
.skill-loadout { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.skill-loadout span { background: #dfebcb; color: #305b50; border-radius: 9px; padding: 9px; font-size: 12px; }
.skill-list { display: grid; gap: 12px; }
.skill-card { padding: 14px; border: 1px solid #d4ccb0; background: #fffbed; border-radius: 18px; }
.skill-card.equipped { border: 2px solid #779b75; padding: 13px; }
.skill-card-heading { display: flex; align-items: center; gap: 10px; }
.skill-art { width: 52px; height: 52px; object-fit: contain; }
.skill-card h3, .training-summary h3 { margin: 0; font-size: 16px; color: #305b50; }
.skill-card-heading span { font-size: 11px; color: #63726d; }
.skill-card p, .training-summary p { font-size: 12px; line-height: 1.7; margin: 9px 0; }
.skill-effect { color: #216b67; font-weight: 700; }
.skill-actions { display: flex; gap: 8px; margin-top: 12px; }
.skill-actions .button { flex: 1; min-height: 44px; }
.training-summary { background: #eaf0d9; border-radius: 15px; padding: 14px; margin-top: 14px; }
.training-summary small { color: #63726d; font-size: 11px; line-height: 1.8; display: block; }
.event-friends { margin-bottom: 24px; background: #e7eed6; border: 1px solid #b4c9a9; border-radius: 18px; overflow: hidden; }
.event-friends .friends-art { width: 100%; height: 110px; object-fit: cover; }
.event-friends > div { padding: 12px 14px; }
.event-friends h2 { font-size: 18px; margin: 0; }
.event-friends p { font-size: 12px; color: #63726d; margin: 7px 0 12px; }
.event-back { flex-shrink: 0; margin-bottom: 8px; }
html { background: #bfe3d9; }
body { background: radial-gradient(ellipse at 20% 10%, #fff4cd, transparent 60%), radial-gradient(ellipse at 85% 90%, #82c7b6, transparent 60%), #bce0da; }
.app-shell { background: #fff7e5; border: 2px solid var(--ink); border-radius: 26px; box-shadow: 0 12px 0 #304e5018, 0 25px 65px #264e4833; }
.main-shell { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); background: #fff7e5; border-bottom: 0; padding-inline: 12px; }
.topbar-actions { width: auto; max-width: 100%; justify-self: end; justify-content: flex-end; gap: 6px; flex-shrink: 1; min-width: 0; }
.topbar-login-name { min-width: 0; max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; color: #385a45; }
.topbar-exit { display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; min-height: 40px; padding: 8px; border: 1px solid #b5c6a8; border-radius: 10px; background: #e9edce; color: #426352; font: inherit; font-size: 12px; cursor: pointer; }
.topbar-exit:hover { background: #dfe7c8; }
.topbar-exit:focus-visible { outline: 2px solid #426352; outline-offset: 2px; }
.game-badge { position: static; gap: 5px; min-width: 0; color: var(--ink); font-size: 17px; font-weight: 900; letter-spacing: 1px; white-space: nowrap; }
.topbar .coin-chip { max-width: none; }
.game-badge > img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.day-chip { color: #5d6f61; background: #e9edce; border: 1px solid #b5c6a8; border-radius: 20px; padding: 5px 9px; }
.mobile-storage { width: 44px; height: 44px; border: 0; color: var(--ink); background: transparent; }
@container game (max-width: 320px) { .topbar { padding-inline: 8px; } .game-badge { font-size: 14px; letter-spacing: 0; } .game-badge > img { width: 24px; height: 24px; } .topbar-actions { gap: 4px; } .level-chip, .topbar .coin-chip { font-size: 10px; padding: 6px; } }
.content { padding: 12px 18px 18px; background: radial-gradient(ellipse at 90% 0%, #f4e9bf88, transparent 60%); scrollbar-color: #9bbdab transparent; }
.game-image { display: block; max-width: 100%; user-select: none; pointer-events: none; object-fit: contain; }
.character-art { border-radius: 50%; }
.athlete-portrait { display: inline-block; aspect-ratio: 1; flex-shrink: 0; background-image: url('assets/cartoon-v1/players-portraits-v1.png'); background-size: 800% 400%; background-repeat: no-repeat; background-color: #fff5dc; }
.portrait-tone-1 { filter: hue-rotate(35deg); }
.portrait-tone-2 { filter: hue-rotate(-75deg); }
.portrait-tone-3 { filter: hue-rotate(130deg); }
.portrait-tone-4 { filter: hue-rotate(180deg); }
.navigation { height: calc(90px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-items: end; gap: 4px; padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff9eafc; border-top: 2px solid var(--ink); backdrop-filter: none; }
.nav-button { position: relative; grid-column: auto; grid-row: 1; height: 52px; min-height: 44px; gap: 0; padding: 0 2px 2px; font-weight: 800; color: #5c746c; font-size: 11px; background: transparent; border: 0; border-radius: 11px; }
.nav-button .nav-art { width: 28px; height: 26px; transition: transform .16s ease; }
.nav-button[aria-current="page"] { color: #2e5149; background: #f7d76c; box-shadow: inset 0 2px #fff5c2; }
.nav-button[aria-current="page"] .nav-art { transform: translateY(-4px) rotate(-6deg) scale(1.12); }
.nav-button:disabled { opacity: .48; }
.needs-player button:disabled { cursor: default; }
.needs-player .nav-button:disabled, .is-new-player button:disabled { transform: none; }
.new-player-create { width: 100%; margin: 16px 0 4px; }
.is-new-player .equipment-room { filter: saturate(.4); }
.is-new-player .equipment-mannequin { opacity: .4; }
.nav-symbol { width: 28px; height: 26px; display: grid; place-items: center; }
.nav-symbol .icon { width: 23px; height: 23px; stroke-width: 1.8; }
.nav-tasks { color: #547d55; }
.nav-shop { color: #ae7034; }
.shop-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0; }
.shop-categories .button[aria-pressed="true"] { background: #f7d76c; }
.page-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: #f1eed7; border: 1px dashed #b8bca0; border-radius: 20px; padding: 32px 20px; margin: 20px 0; }
.page-empty > .icon { width: 45px; height: 45px; color: #b08332; }
.page-empty h2 { margin: 0; font-size: 19px; }
.page-empty p { margin: 0; font-size: 12px; line-height: 1.8; color: #667261; }
.page-heading { margin: 4px 0 16px; }
.page-heading h1 { font-size: 26px; font-weight: 900; color: var(--ink); }
.badge { background: #e2efd5; color: #365d45; border: 1px solid #adc29a; padding: 5px 9px; border-radius: 12px; font-weight: 700; }
.button { border: 2px solid var(--ink); border-radius: 15px; font-weight: 800; box-shadow: 0 4px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; }
.button.primary { color: #443c2a; background: linear-gradient(#ffe69a, #ffcc55); }
.button.secondary { color: #254e54; background: linear-gradient(#e0f4ed, #aad9ca); }
.button:hover:not(:disabled) { filter: brightness(1.04); }
.button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.button:disabled { opacity: .58; box-shadow: 0 2px 0 #84928a; }
.text-button { color: #326b66; font-weight: 700; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #187e9b; outline-offset: 3px; }
.content input, dialog input, dialog select { background: #fffef8; border: 2px solid #94aea0; color: #293d43; border-radius: 14px; }
input::placeholder { color: #718074; }
.profile-header { gap: 10px; margin-bottom: 12px; }
.profile-header .avatar { width: 52px; height: 50px; padding: 1px; border: 2px solid var(--ink); border-radius: 17px; background: #abd9d0; box-shadow: 0 3px 0 #304e5020; }
.avatar .character-art { width: 100%; height: 100%; object-fit: contain; }
.profile-name h2 { font-size: 18px; font-weight: 900; color: var(--ink); }
.profile-name small { margin-top: 2px; font-size: 10px; }
.profile-header > .badge { background: #ffd369; border-color: #d4a544; transform: rotate(3deg); font-size: 13px; }
.vital-grid { gap: 14px; }
.meter-label { color: #54675d; }
.meter-label strong { color: #43564e; font-weight: 700; }
.vital-grid .meter { height: 8px; border: 1px solid #90a58c; background: #e5e7c8; }
.meter { background: #e7e7ce; }
.meter > span { background: linear-gradient(#63c4c5, #469da6); }
.energy-meter > span { background: linear-gradient(#b5d667, #83b250); }
.home-court { position: relative; display: block; height: auto; aspect-ratio: 900 / 680; margin: 16px -8px 14px; border: 2px solid var(--ink); border-radius: 28px 28px 35px 35px; overflow: hidden; background: #8fcaa0; box-shadow: 0 5px 0 #b6c696; }
.home-court .hero-art { position: static; display: block; width: 100%; height: 100%; max-width: none; opacity: 1; object-fit: cover; transform: none; }
.court-label { position: absolute; left: 12px; top: 11px; padding: 5px 11px; border: 1px solid #526a48; border-radius: 20px; background: #fff9dfeb; color: #405939; font-size: 10px; font-weight: 800; transform: rotate(-4deg); }
.battle-actions { gap: 12px; margin: 18px 0 20px; }
.battle-actions .button { min-height: 55px; font-size: 19px; }
.battle-actions .button .game-image { width: 36px; height: 31px; }
.stat-grid { gap: 8px; padding: 0; }
.stat-grid > span { min-width: 0; display: grid; justify-items: center; font-size: 10px; color: #5a6b60; }
.stat-grid .stat-art { width: 38px; height: 31px; margin-bottom: 3px; }
.stat-grid b { color: #304e50; font-size: 20px; font-weight: 900; margin-top: 2px; max-width: 100%; overflow-wrap: anywhere; }
.record-strip { margin: 20px 0 0; padding: 10px 0; border-top: 1px dashed #c6ccb0; color: #65725d; }
.record-strip b { color: #47674f; }
.disclosure { margin-top: 10px; border-color: #d6d5b8; }
.disclosure summary { color: #526a5d; }
.disclosure summary::after { color: #698577; }
.minimal-welcome { max-width: none; margin: 0; padding-top: 0; }
.minimal-welcome .home-court { height: auto; margin: 9px -8px 20px; }
.minimal-welcome h1 { font-size: 36px; margin-bottom: 19px; color: var(--ink); font-weight: 900; letter-spacing: 3px; text-shadow: 2px 3px #f8d878; }
.minimal-welcome form { gap: 12px; }
.minimal-welcome .text-button { margin-top: 20px; }
.content[data-page="overview"] { padding: 12px 14px 18px; background: #fff6df; }
.club-banner { overflow: hidden; border: 1px solid #b3c9aa; border-radius: 22px; background: #fffbe9; box-shadow: 0 4px 0 #304e5014; }
.club-banner-art { width: 100%; aspect-ratio: 30 / 13; object-fit: cover; }
.club-banner-copy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 3px 8px; padding: 9px 12px; }
.club-banner-copy h1 { font-size: 19px; font-weight: 900; letter-spacing: 0; color: #31574e; }
.club-banner-copy p { font-size: 10px; color: #6a7c62; }
.club-shortcuts, .player-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 14px 0 19px; }
.club-shortcuts .button, .player-actions .button { min-height: 46px; padding: 10px; font-size: 14px; }
.club-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.club-section-heading h2, .club-intro h2, .player-attributes h2 { color: #365a4b; font-size: 15px; font-weight: 800; }
.club-section-heading > span { font-size: 10px; color: #7a8769; }
.club-news-item { display: grid; grid-template-columns: 43px minmax(0, 1fr) 16px; align-items: center; gap: 10px; width: 100%; min-height: 78px; margin-bottom: 8px; padding: 10px; text-align: left; border: 1px solid #e0dcbf; border-radius: 16px; background: #fffcf0; color: #3e6050; }
.club-news-item:hover { background: #fff2cb; }
.club-news-item:active { background: #f4e6bd; }
.news-art { width: 43px; height: 47px; }
.news-copy { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.news-copy small { font-size: 9px; color: #ae7437; font-weight: 800; }
.news-copy strong { font-size: 13px; line-height: 1.4; }
.news-copy > span { font-size: 10px; line-height: 1.6; color: #76816b; }
.club-news-item > .icon { width: 16px; height: 16px; color: #8aa58b; }
.club-intro { padding: 13px; margin-top: 15px; border: 1px solid #ccdcc0; border-radius: 17px; background: #eaf2df; }
.club-intro > p { margin-top: 5px; font-size: 11px; line-height: 1.9; color: #607358; }
.club-intro .disclosure { margin-top: 8px; padding-top: 8px; border-color: #c3d3b5; }
.club-intro .disclosure summary { font-size: 11px; }
.club-intro ol { padding-left: 18px; margin: 10px 0 0; font-size: 11px; line-height: 1.9; color: #597150; }
.player-card { padding: 16px; border: 1px solid #b4ceb1; border-radius: 22px; background: linear-gradient(135deg, #eaf3d8, #fff8df); box-shadow: 0 4px 0 #36554a13; }
.player-card .profile-header .avatar { width: 61px; height: 61px; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 50%; }
.player-card .profile-name { display: flex; align-items: baseline; gap: 6px; }
.player-card .profile-name h2 { min-width: 0; margin: 0; font-size: 16px; line-height: 1.4; }
.player-card .profile-name small { flex-shrink: 0; margin: 0; font-size: 10px; line-height: 1.4; white-space: nowrap; }
.player-card .profile-name .roster-type { flex-shrink: 0; white-space: nowrap; }
.player-card .vital-grid { gap: 13px; }
.player-card .meter-label { font-size: 10px; }
.player-attributes { margin-top: 20px; }
.profile-skills { margin: 16px 0; padding: 14px; background: #f0ecd5; border: 1px solid #c9c6a5; border-radius: 18px; }
.profile-skills .club-section-heading { gap: 8px; flex-wrap: wrap; }
.profile-skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.profile-skill { min-width: 0; padding: 10px; background: #fffbed; border: 1px solid #d4ccb0; border-radius: 12px; }
.profile-skill.equipped { border-color: #82a67a; background: #e7efda; }
.profile-skill > div, .profile-skill p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; }
.profile-skill strong { font-size: 12px; }
.profile-skill b { font-size: 11px; color: #956829; }
.profile-skill p { margin: 8px 0 0; font-size: 10px; color: #627359; }
.profile-skill small { font-size: 10px; }
.profile-skills .skill-actions { margin-top: 12px; }
.player-records { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #e5d29f; border-radius: 18px; background: #fff0c9; }
.player-trophy { width: 43px; height: 53px; flex-shrink: 0; }
.player-records .record-strip { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; gap: 5px; }
.player-records .record-strip > span { min-width: 0; }
.player-records .record-strip b { overflow-wrap: anywhere; }
.profile-resume { width: 100%; margin-top: 14px; }
.content[data-page="welcome"] { padding: 0; background: #fff6df; }
.welcome-stage { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 390px; margin: 0; padding: 22px 20px 13px; overflow: hidden; }
.welcome-stage > .home-court { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #cee4bb; }
.welcome-stage .home-court .hero-art { width: 100%; height: 100%; object-fit: cover; object-position: center 36%; }
.welcome-stage::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, #fff5df55, transparent 26%, transparent 57%, #fff3d957 72%, #fff0ccef 100%); }
.welcome-actions, .welcome-stage > h1 { position: relative; z-index: 2; }
.welcome-caption { margin-bottom: 8px; font-size: 12px; font-weight: 700; color: #476549; }
.welcome-stage > h1 { margin: 0; font-size: 40px; line-height: 1.25; letter-spacing: 5px; color: #31574e; text-shadow: 2px 3px #fff8df; }
.welcome-actions { margin-top: auto; padding-top: 24px; }
.welcome-actions form { display: grid; gap: 11px; }
.welcome-actions input { background: #fffdf2f5; box-shadow: 0 2px 9px #3157491a; }
.welcome-actions .button { min-height: 50px; font-size: 18px; border-radius: 17px; }
.welcome-stage .text-button { justify-content: center; margin-top: 11px; color: #365b4b; }
.growth-strip { gap: 15px; margin-bottom: 16px; padding: 0 2px; }
.growth-strip > span { color: #7d5a2e; font-weight: 900; background: #ffe7a3; padding: 7px 10px; border-radius: 12px; }
.training-pad { gap: 15px; margin: 16px 0; }
.training-tile { position: relative; grid-template-columns: 1fr auto; gap: 2px 7px; min-height: 184px; padding: 12px 14px 13px; border: 2px solid var(--ink); border-radius: 25px; background: #ffe0a4; box-shadow: 0 4px 0 #304e50; }
.training-tile:nth-child(2) { background: #e0d3f2; }
.training-tile:nth-child(3) { background: #c2e8e6; }
.training-tile:nth-child(4) { background: #d8e5b5; }
.training-tile > .training-art { grid-column: 1 / -1; height: 89px; width: 100%; filter: drop-shadow(0 4px 0 #304e5018); }
.training-tile > span { color: #435755; font-size: 13px; grid-column: 1; }
.training-tile strong { font-size: 29px; color: #2e494d; font-weight: 900; grid-column: 1; max-width: calc(100% - 30px); overflow-wrap: anywhere; }
.training-tile b { position: absolute; right: 10px; bottom: 16px; align-self: auto; color: #395d4d; background: #fffff3b3; border-radius: 9px; padding: 3px 6px; font-size: 14px; }
.training-tile:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.rest-action { margin: 10px 0; }
.quiet-note { color: #677669; }
.compact-notice { color: #8e541b; background: #ffe7b5; padding: 9px 12px; border-radius: 13px; }
.event-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin: 17px 0 22px; }
.event-row { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0 0 12px; min-height: 0; background: #fffbee; border: 2px solid var(--ink); border-radius: 21px; box-shadow: 0 4px 0 #aaba91; overflow: hidden; }
.event-illustration { position: relative; height: 105px; overflow: hidden; background: #8eccbe; border-bottom: 2px solid var(--ink); }
.venue-art { width: 100%; height: 100%; object-fit: cover; }
.event-number { position: absolute; left: 7px; top: 7px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 9px; background: #ffe594; font-size: 11px; font-weight: 900; color: #485848; }
.event-row.locked .venue-art { filter: saturate(.5); }
.event-name { padding: 0 10px; }
.event-name h2 { font-size: 13px; color: #304e50; font-weight: 800; }
.event-name small { font-size: 10px; margin-top: 4px; color: #667566; }
.event-row .button { margin: 2px 10px 0; min-width: 0; padding-inline: 5px; font-size: 12px; min-height: 44px; border-radius: 11px; }
.event-row.locked .event-name { opacity: 1; }
.rank-position { margin-bottom: 8px; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.rank-position > strong, .rank-position > span { font: inherit; color: inherit; }
.rank-position .rank-player-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rank-position > strong, .rank-position .rank-player-points { flex-shrink: 0; }
.rank-position .rank-player-points { white-space: nowrap; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 7px; padding: 14px 0 0; margin-bottom: 17px; border-bottom: 3px solid var(--ink); }
.podium-player { position: relative; width: 32%; min-width: 0; text-align: center; }
.podium-player:nth-child(1) { order: 2; }
.podium-player:nth-child(2) { order: 1; }
.podium-player:nth-child(3) { order: 3; }
.podium-player .character-art { width: 100%; height: 83px; object-fit: contain; margin-bottom: -6px; }
.podium-player > strong { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff7e5; border-radius: 9px 9px 0 0; padding: 4px 2px; font-size: 11px; }
.podium-step { display: grid; align-content: center; justify-items: center; gap: 4px; height: 66px; background: #bddad8; border: 2px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0; color: #415f64; }
.podium-player:first-child .podium-step { height: 90px; background: #ffda72; }
.podium-player:last-child .podium-step { height: 53px; background: #ecc4a0; }
.podium-step b { font-size: 25px; line-height: 1; }
.podium-step small { font-size: 10px; }
.podium-crown { position: absolute; width: 31px; height: 31px; top: -19px; left: calc(50% - 15px); transform: rotate(-12deg); }
.ranking-list { padding: 0; margin: 0; list-style: none; }
.home-rankings { padding: 16px; margin: 20px 0; }
.home-rankings .club-section-heading { margin-top: 0; }
.home-rankings .rank-position { margin-top: 8px; }
.home-rankings .disclosure { margin-bottom: 0; }
.home-rankings .podium-preview { width: 100%; border: 0; padding: 0; color: inherit; font: inherit; text-align: center; background: transparent; box-shadow: none; cursor: pointer; }
.home-rankings .podium-preview:focus-visible { outline: 3px solid #b18b48; outline-offset: 5px; border-radius: 12px; }
.ranking-detail-list { margin-bottom: 0; }
.ranking-detail-list { display: grid; gap: 6px; }
.ranking-detail-list li { display: grid; gap: 5px; padding: 9px; border: 1px solid #e4dfc0; border-radius: 7px; background: #fffdf1; font-size: 12px; }
.ranking-detail-list .ranking-name { min-width: 0; overflow-wrap: anywhere; }
.ranking-detail-list small { color: #78805d; }
.ranking-pagination { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ranking-pagination > span { font-size: 12px; white-space: nowrap; }
#profile-detail-footer .quiet-note { margin: 0 0 8px; }
.ranking-detail-list .ranking-runner > b { flex-shrink: 0; text-align: right; }
.ranking-detail-list .ranking-runner > b small { display: block; font-size: 10px; font-weight: 400; }
.ranking-runner { display: flex; align-items: center; gap: 9px; min-height: 61px; margin: 7px 0; padding: 5px 10px; border-radius: 14px; background: #edeed7; }
.ranking-runner.own-row { background: #ffe5a1; outline: 1px solid #cfaa52; }
.ranking-place { width: 22px; font-size: 12px; font-weight: 800; color: #71816c; }
.ranking-runner .character-art { width: 43px; height: 42px; }
.ranking-runner strong { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-runner > b { color: #386c60; font-size: 13px; }
.ranking-character { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; }
button.ranking-character { cursor: pointer; }
button.ranking-character:focus-visible { outline: 3px solid #c78921; outline-offset: 3px; }
button.ranking-character:hover { background: #fff6cc66; }
.podium-player .ranking-character { display: block; width: 100%; }
.podium-player .ranking-character > strong { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff7e5; border-radius: 9px 9px 0 0; padding: 4px 2px; font-size: 11px; }
.ranking-runner .ranking-character { flex: 1; display: flex; align-items: center; gap: 9px; text-align: left; }
.online-intro { margin: 0 0 18px; }
.online-hero { height: auto; aspect-ratio: 30 / 13; width: 100%; object-fit: cover; border: 2px solid var(--ink); border-radius: 24px; margin-bottom: 22px; }
.online-profile { margin: 3px 0 17px; }
.lobby-art { width: 100%; height: auto; aspect-ratio: 30 / 13; object-fit: cover; border: 2px solid var(--ink); border-radius: 24px; margin: 0 0 20px; }
.create-room-button { margin-bottom: 19px; }
.online-player { margin-top: 19px; }
.room-code-card { position: relative; padding: 10px 12px 15px; border: 2px dashed #90b2a1; border-radius: 20px; background: #f0f2d7; }
.room-code { color: #315856; font-weight: 900; margin-top: 5px; font-size: 35px; }
.room-code-card .text-button { min-height: 44px; }
.room-members { gap: 13px; margin-top: 20px; }
.room-member { border: 2px solid var(--ink); border-radius: 25px; padding: 15px 7px; background: #d7e9cf; box-shadow: 0 4px 0 #afc9a9; }
.room-member:nth-child(2) { background: #cde8eb; }
.room-member .avatar { display: grid; place-items: center; width: 100%; height: 102px; background: none; border: 0; border-radius: 0; font-size: 42px; color: #648d82; }
.room-member .character-art { width: 100%; height: 100%; }
.room-member strong { color: #304e50; }
.room-actions { margin: 22px 0 15px; }
.online-status { background: #fff0c9; color: #7d541f; border-color: #d8b886; border-radius: 13px; }
.online-message { color: #8a4f22; padding: 10px 12px; background: #ffe8ba; border: 1px solid #d9b579; border-radius: 13px; }
.online-training-buttons .button { font-size: 11px; }
.content.has-arena { padding: 4px 8px 8px; background: #c8dfca; }
.turn-match-title, .online-match-title { color: #435f4f; }
.turn-match-title small { color: #5d7261; }
.turn-arena { border: 2px solid var(--ink); border-radius: 19px; background: #f8f4d8; }
.arena-score { min-height: 55px; padding: 5px 8px; background: #fff4cd; border-bottom: 2px solid #758f74; }
.arena-player { gap: 5px; }
.arena-player .avatar { width: 37px; height: 38px; background: #c7e3d0; border: 1px solid #7d9e83; border-radius: 13px; }
.arena-player .away-avatar { background: #c2e4e5; border-color: #71979b; }
.arena-player strong { color: #304e50; font-size: 11px; }
.arena-player small { color: #687755; font-size: 8px; }
.arena-player b { color: #b85c2c; font-size: 25px; font-weight: 900; }
.arena-versus { color: #798d72; font-weight: 900; margin: 0 3px; }
.arena-phase { background: #dfebcf; color: #41634d; padding: 4px 9px; }
.arena-phase [data-clock] { color: #61765c; }
.arena-hud { top: 7px; right: 6px; min-width: 82px; gap: 4px; padding: 7px 8px; border: 1px solid #556f4e; background: #fffbeaeF; border-radius: 12px; box-shadow: 0 2px 0 #243e292b; }
.arena-hud span { color: #5a6b57; font-size: 9px; }
.arena-hud b { color: #376651; font-size: 10px; font-weight: 800; }
.arena-hud span:nth-child(2) b { color: #aa542f; }
.arena-bottom { background: #fff6dc; border-top: 2px solid #647e61; padding: 7px 10px 6px; }
.arena-values { color: #5e715a; padding-bottom: 0; }
.arena-values b { color: #305b50; }
.arena-help { color: #536955; margin: 5px 0; font-size: 10px; }
.arena-commit { min-height: 44px; border-radius: 12px; font-size: 16px; }
.arena-switches { margin-top: 9px; gap: 7px; }
.arena-switches button { min-height: 44px; border: 1px solid #a1b28c; border-radius: 11px; background: #f2efd5; color: #5a6b54; font-size: 11px; font-weight: 700; }
.arena-switches button[aria-pressed="true"] { color: #214e43; border-color: #648b6f; background: #c0dfa9; box-shadow: inset 0 2px 0 #ffffff66; }
.arena-tools button { color: #426b58; }
.arena-replay { background: #ffe1a1ee; border-color: #976f38; color: #6b502c; }
.arena-result { padding: 13px; gap: 7px; background: #fff4dbeE; color: #3b5547; overflow-y: auto; }
.result-art { width: 95px; height: 105px; flex-shrink: 0; filter: drop-shadow(0 5px 0 #bd985033); }
.arena-result h2 { color: #9b6526; font-size: 30px; font-weight: 900; text-shadow: 1px 2px #ffd771; }
.arena-result p { color: #5c6c57; font-size: 10px; line-height: 1.6; }
.arena-result .button { margin-top: 3px; flex-shrink: 0; }
.legacy-result { padding: 27px 0; }
.legacy-result .result-art { width: 145px; height: 155px; }
.legacy-result h1 { font-weight: 900; color: #956321; }
.panel, .bracket, .setup-panel { background: #fff8e4; border-color: #c7cfb2; color: #3d584b; }
.button.subtle { color: #345849; background: #e5ebd2; }
.journal p { color: #586e5c; }
.journal time { color: #6a7e60; }
.journal-carousel { display: grid; gap: 6px; width: 100%; margin: 12px 0 20px; padding: 12px 14px; text-align: left; color: #365748; background: #eef0da; border: 1px solid #b8c2a5; border-radius: 12px; cursor: pointer; box-shadow: 0 1px 0 #fffced inset; }
.journal-carousel-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.journal-carousel-heading > strong { font-size: 12px; }
.journal-carousel-heading > span { font-size: 10px; color: #78876a; }
.journal-message { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 36px; font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.journal-time { font-size: 10px; color: #78876a; }
.journal-carousel:focus-visible { outline: 2px solid #8d6a2e; outline-offset: 3px; }
.journal-full { list-style: none; padding: 0; margin: 0; }
.journal-full li { display: block; padding: 12px 0; border-bottom: 1px solid #dbdfca; }
.journal-full li:last-child { border-bottom: 0; }
.journal-full time { display: block; font-size: 10px; }
.journal-full p { margin: 5px 0 0; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.notice { background: #eef0d3; border-color: #b5c7a3; color: #4f694c; }
.bracket-pair { background: #edf1d9; border-color: #c6d3b0; }
.bracket-player.winner, .bracket-round h3 { color: #326756; }
.warning-banner { background: #ffe4bd; color: #7c4921; border-color: #b9884b; }
.toast { background: #304e50; color: #fff9e5; border: 2px solid #f0d785; border-radius: 15px; bottom: max(calc(128px + env(safe-area-inset-bottom, 0px)), calc((100dvh - 853px) / 2 + 128px)); }
dialog { color: #304e50; background: #fff7e5; border: 2px solid var(--ink); border-radius: 23px; box-shadow: 0 15px 60px #14363055; }
dialog::backdrop { background: #1d413f99; }
.dialog-header h2, .control-guide dt { color: #304e50; }
.dialog-close { background: #e0e8cb; color: #365447; }
.danger-zone { border-color: #dcbf9b; }
.danger-zone .button, .button.danger { background: #f9d6bf; color: #87432e; }
@media (max-height: 700px) {
  .content { padding: 9px 13px 14px; }
  .profile-header { margin-bottom: 7px; }
  .profile-header .avatar { width: 43px; height: 42px; }
  .home-court { margin-top: 12px; margin-bottom: 10px; }
  .battle-actions { margin-top: 14px; margin-bottom: 16px; }
  .battle-actions .button { min-height: 48px; font-size: 17px; }
  .training-tile { min-height: 157px; padding: 9px 11px 12px; }
  .training-tile > .training-art { height: 67px; }
  .event-illustration { height: 83px; }
  .arena-score { min-height: 47px; padding-block: 4px; }
  .arena-player .avatar { width: 29px; height: 31px; }
  .arena-player b { font-size: 22px; }
  .arena-help { font-size: 9px; }
  .arena-result { justify-content: flex-start; }
  .result-art { width: 62px; height: 67px; }
  .arena-result h2 { font-size: 23px; }
}
@media (max-width: 500px) {
  .app-shell { border-radius: 0; border: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .nav-button .nav-art { transition: none; }
}

/* Shared page rhythm and compact progression cards. */
:root { font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
.content:not(.has-arena):not([data-page="welcome"]) { padding: 18px 16px 24px; background: #f7f6ed; }
.topbar { border-bottom: 1px solid #dfdfcf; }
.page-heading { align-items: center; gap: 10px; margin: 2px 0 20px; }
.page-heading > div { flex: 1; min-width: 0; }
.page-heading h1 { font-size: 24px; letter-spacing: 0; line-height: 1.35; }
.page-heading p { margin: 6px 0 0; font-size: 11px; line-height: 1.6; color: #718078; }
.page-heading > .button { flex-shrink: 0; min-height: 36px; padding: 8px 10px; }
.button { border-radius: 12px; box-shadow: none; font-weight: 700; }
.button.primary { color: #fffdf4; background: #2c6856; border: 1px solid #2c6856; box-shadow: 0 2px 0 #184c3b; }
.button.secondary { color: #365b4c; background: #edf2e8; border: 1px solid #cedbc9; box-shadow: none; }
.button:disabled { opacity: .48; box-shadow: none; }
.button:focus-visible, .training-tile:focus-visible, .nav-button:focus-visible { outline: 3px solid #c78921; outline-offset: 3px; }
.club-section-heading h2, .training-section-title { font-size: 16px; font-weight: 800; }
.club-section-heading > span { font-size: 11px; color: #748176; }
.quiet-note { margin: 10px 0 14px; font-size: 12px; line-height: 1.7; }
.shop-categories { padding: 4px; gap: 4px; background: #e7ebdf; border: 0; border-radius: 14px; margin: 18px 0; }
.shop-categories .button { border: 0; background: transparent; box-shadow: none; min-width: 0; min-height: 38px; padding: 9px 8px; border-radius: 10px; white-space: nowrap; }
.shop-categories .button[aria-pressed="true"] { color: #244d3d; background: #fffdf6; box-shadow: 0 2px 5px #354f3510; }
.stamina-status { padding: 14px; background: #eaf1e5; border: 1px solid #d4e0cb; border-radius: 14px; margin: 12px 0; }
.stamina-status .quiet-note { font-size: 11px; margin: 7px 0 0; }
.training-overview { padding: 16px; background: #fffdf7; border: 1px solid #dfdfcf; border-radius: 18px; }
.training-overview .stamina-status { padding: 0; margin: 0 0 14px; background: none; border: 0; }
.training-overview .meter { height: 7px; border: 0; }
.training-pad { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 12px 0 18px; }
.training-pad .training-tile { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 5px 12px; min-height: 108px; padding: 14px; border: 1px solid #d9ddcb; border-radius: 16px; background: #fffdf7; box-shadow: none; }
.training-pad .training-tile > .training-art { grid-column: 1; grid-row: 1 / 4; width: 52px; height: 60px; align-self: center; filter: none; background: #f5edd7; border-radius: 14px; padding: 3px; }
.training-pad .training-tile:nth-child(2) .training-art { background: #ebe2f2; }
.training-pad .training-tile:nth-child(3) .training-art { background: #deefec; }
.training-pad .training-tile:nth-child(4) .training-art { background: #e7efd8; }
.training-pad .training-tile:nth-child(5) .training-art { background: #f7e4dc; }
.training-pad .training-tile > span { grid-column: 2; font-size: 14px; font-weight: 700; color: #304f43; }
.training-pad .training-tile strong { grid-column: 2; max-width: none; font-size: 12px; line-height: 1.5; font-weight: 500; color: #78816e; }
.training-pad .training-tile b { position: static; grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 19px; font-weight: 800; color: #32654e; background: #eaf2df; border-radius: 10px; padding: 7px; }
.training-pad .training-tile small { grid-column: 2 / 4; color: #876c35; font-size: 11px; }
.training-pad .training-tile:active:not(:disabled) { transform: translateY(1px); background: #f1f5e9; }
.skill-card { padding: 16px; border-color: #dcdccc; background: #fffdf7; }
.skill-card-heading { gap: 10px; }
.skill-card-heading > div { flex: 1; min-width: 0; }
.skill-card-heading .ultimate-emblem { width: 48px; height: 48px; display: grid; place-items: center; font-size: 27px; padding: 6px; flex-shrink: 0; }
.skill-card-heading .badge { font-size: 10px; background: #eef1e7; border: 0; padding: 6px 8px; }
.skill-card h3 { font-size: 15px; margin-bottom: 4px; }
.skill-card > p { color: #677268; margin: 14px 0; }
.skill-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-actions .button { flex: 1; min-width: 100px; }
.skill-rules { margin-top: 14px; font-size: 12px; }
.task-card { background: #fffdf7; padding: 16px; border-color: #dcdccc; border-radius: 16px; }
.task-card .meter { height: 6px; border: 0; }
.task-card .coin-reward { background: #fcf0cf; color: #8b6725; border-radius: 9px; padding: 6px 8px; font-size: 12px; }
.task-card.claimed { background: #eff2e8; }
.profile-skills { padding: 16px; background: #fffdf7; border-color: #dcdccc; }
.profile-skill { background: #f7f8f0; border-color: #e3e5d8; padding: 12px; }
.profile-skill-symbol { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 10px; border-radius: 10px; font-size: 22px; }
.event-row { border: 1px solid #d6dccc; box-shadow: none; border-radius: 16px; }
.event-illustration { border-bottom: 1px solid #d6dccc; }
.event-name h2 { font-weight: 700; }
.navigation { border-top: 1px solid #d8decf; background: #fffdf5; }
.nav-button[aria-current="page"] { background: #e5eedb; color: #2c6047; box-shadow: none; }
.ultimate-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ultimate-buttons > small { grid-column: 1 / -1; }
@container game (max-width: 320px) {
  .content:not(.has-arena):not([data-page="welcome"]) { padding-inline: 12px; }
  .page-heading h1 { font-size: 22px; }
  .skill-card, .task-card, .profile-skills, .training-overview { padding: 12px; }
  .skill-card-heading .badge { margin-left: 58px; }
  .training-pad .training-tile { padding: 12px; gap: 5px 9px; }
}

/* Directional light, molded surfaces and a CSS 3D club scene. */
.coin-mark { display: inline-block; position: relative; width: 13px; height: 13px; vertical-align: -2px; border: 1px solid #a57c34; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff5b9, #e2bb61 60%, #c5953e); box-shadow: 1px 1px 0 #916d32, 0 1px 0 #fff2ac inset; }
.coin-mark::after { content: ''; position: absolute; inset: 2px 4px; border-left: 1px solid #a8843c; border-right: 1px solid #fff2aa; }
:root { --ink: #263e3c; --muted: #68746b; --accent: #28655c; --panel: #f4efdf; --line: #b5b7a3; }
html { background: #52645f; }
body { background: radial-gradient(ellipse at 30% 10%, #c8d4c1, transparent 65%), linear-gradient(145deg, #81968b, #344d48); }
.app-shell { background: #dfdfcb; border: 1px solid #c5ccba; border-radius: 28px; box-shadow: 0 2px 0 #f6f5de inset, 0 -3px 0 #788b7c inset, 0 10px 0 #314d48, 0 22px 36px #112f355c, 0 48px 100px #172d3547; }
.topbar { position: relative; z-index: 9; background: linear-gradient(165deg, #fbf8e8, #dadcc8); border-bottom: 1px solid #a9b4a0; box-shadow: 0 2px 0 #faf8e7 inset, 0 -3px 0 #c6ccba inset, 0 3px 7px #2a45341c; }
.game-badge { color: #2d4c44; text-shadow: 0 1px 0 #fffef0; font-size: 16px; }
.game-badge > img { filter: drop-shadow(1px 3px 2px #24483c45); }
.coin-chip, .level-chip { border-radius: 9px; border: 1px solid #aaa98b; box-shadow: 0 2px 3px #68694726 inset, 0 1px 0 #fffdeb; }
.coin-chip { background: linear-gradient(#d7ba6c, #f5e3a5); color: #604416; }
.level-chip { background: linear-gradient(#bfcec0, #e3ecda); color: #385a45; }
.content:not(.has-arena):not([data-page="welcome"]) { background: radial-gradient(ellipse at 0 0, #fff7df80, transparent 65%), repeating-linear-gradient(0deg, #4d695205 0 1px, transparent 1px 4px), #d9dfcf; padding-bottom: 28px; }
.page-heading { margin: 3px 0 21px; align-items: center; }
.page-heading h1 { font-size: 23px; line-height: 1.3; letter-spacing: 1px; text-shadow: 0 1px 0 #ffffe7; }
.page-heading h1::before { content: ''; display: inline-block; width: 5px; height: 19px; margin-right: 9px; vertical-align: -2px; border-radius: 2px; background: linear-gradient(90deg, #244d45, #628d73); box-shadow: 1px 1px 0 #ffffdb, -1px -1px 1px #4b685f3b; }
.button { transition: transform .12s ease, box-shadow .12s ease; text-shadow: 0 1px 1px #ffffff5c; border-radius: 12px; }
.button.primary { color: #fffce7; background: linear-gradient(155deg, #74a08b 0%, #3d7b65 42%, #2d6857 100%); border: 1px solid #2b6151; text-shadow: 0 -1px 0 #164a3b; box-shadow: 0 2px 0 #c1d7b68c inset, 0 -2px 3px #184d4240 inset, 0 4px 0 #234c42, 0 6px 7px #304a4130; }
.button.secondary { color: #495444; background: linear-gradient(155deg, #fffce8, #e2ddbd); border: 1px solid #b1b297; box-shadow: 0 2px 0 #ffffef inset, 0 -2px 2px #a7ae8230 inset, 0 3px 0 #a1ab8d, 0 5px 6px #43543b24; }
.button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #718272, 0 2px 4px #203b3326 inset; }
.button:disabled { opacity: .55; transform: none; filter: saturate(.55); box-shadow: 0 1px 0 #9ba38a; }
.training-overview, .player-card, .profile-section, .task-card, .item-card, .skill-card, .club-intro, .player-records { position: relative; background: linear-gradient(145deg, #fffdf0, #eee9d5 80%); border: 1px solid #b3b7a0; border-radius: 18px; box-shadow: 0 2px 0 #fffff3 inset, 0 -2px 0 #d2d0b9 inset, 0 4px 0 #a8b198, 0 7px 10px #3a55422b; }
.task-card, .item-card, .skill-card { margin-bottom: 5px; }
.skill-list, .item-grid { gap: 16px; }
.training-overview::before, .player-card::before { content: ''; position: absolute; inset: 7px; border: 1px solid #949f7e33; border-radius: 12px; pointer-events: none; }
.training-overview { padding: 20px; }
.stamina-status { background: linear-gradient(#ced8bd, #e0e7cf); border-color: #aab897; box-shadow: 0 2px 4px #5263441f inset, 0 1px 0 #fffcea; }
.training-overview .stamina-status { background: none; border: 0; box-shadow: none; }
.meter, .training-overview .meter, .task-card .meter { height: 9px; border-radius: 5px; border: 1px solid #a6af92; background: #b8c1aa; box-shadow: 0 2px 3px #47573f40 inset, 0 1px 0 #fffbe3; }
.meter > span { border-top: 1px solid #a7d7bd; border-radius: 4px; background: linear-gradient(#64a39a, #32746a); box-shadow: 0 1px 3px #23483a50; }
.energy-meter > span { border-top: 1px solid #e4ef9a; background: linear-gradient(#b5cb69, #799844); }
.shop-categories { background: linear-gradient(#a9b79f, #bfccb1); border: 1px solid #98a68f; border-radius: 13px; padding: 5px; box-shadow: 0 3px 5px #314a3433 inset, 0 1px 0 #faffdf; }
.shop-categories .button { box-shadow: none; background: none; color: #4f634f; }
.shop-categories .button[aria-pressed="true"] { color: #3f5243; background: linear-gradient(150deg, #fffdea, #e5e5c9); border: 1px solid #dfe1c4; box-shadow: 0 1px 0 #fffff3 inset, 0 2px 0 #7d9279, 0 3px 5px #4b644545; }
.training-pad { gap: 15px; }
.training-pad .training-tile { border: 1px solid #aab7a0; background: linear-gradient(135deg, #fbf9e9, #e2e6cf); box-shadow: 0 2px 0 #fffff1 inset, 0 4px 0 #a0ac91, 0 6px 9px #35524229; padding: 15px; grid-template-columns: 61px minmax(0, 1fr) auto; }
.training-pad .training-tile > .training-art { width: 59px; height: 65px; border: 1px solid #b9b297; border-radius: 15px; background: linear-gradient(145deg, #fff2be, #d4b779); box-shadow: 0 2px 0 #fffde4 inset, 0 -3px 0 #98875a4f inset, 0 5px 6px #5b66453d; filter: drop-shadow(0 1px 1px #ffffff9c); padding: 6px; transform: rotate(-7deg); }
.training-pad .training-tile:nth-child(2) .training-art { background: linear-gradient(145deg, #e8ddf7, #a9a0c4); }
.training-pad .training-tile:nth-child(3) .training-art { background: linear-gradient(145deg, #d2ede7, #83afa5); }
.training-pad .training-tile:nth-child(4) .training-art { background: linear-gradient(145deg, #e3edc4, #a6b780); }
.training-pad .training-tile:nth-child(5) .training-art { background: linear-gradient(145deg, #f5dfc7, #c7997d); }
.training-pad .training-tile b { font-size: 18px; background: linear-gradient(#355f4c, #54785a); color: #e0efb5; border: 1px solid #294e3b; border-radius: 8px; box-shadow: 0 2px 3px #213e3360 inset, 0 1px 0 #ffffdc; text-shadow: 0 0 6px #e3f08d35; }
.training-pad .training-tile:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #98a98b, 0 2px 5px #37503f29 inset; }
.training-tile strong { text-shadow: 0 1px 0 #ffffe9; }
.training-pad .training-tile.is-cooling:disabled { opacity: .55; cursor: default; }
.training-pad .training-tile > .training-cooldown { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; margin-top: 5px; font-size: 11px; font-weight: 500; color: #526b55; }
.training-pad .training-tile > .training-cooldown[hidden] { display: none; }
.training-cooldown-track { flex: 1; height: 6px; overflow: hidden; border-radius: 4px; background: #cbd5bd; box-shadow: inset 0 1px 2px #40543c33; }
.training-cooldown-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #567c5a, #94b568); transition: width 1s linear; }
.training-cooldown [data-training-cooldown] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-card .coin-reward { border: 1px solid #c4aa69; color: #785619; background: linear-gradient(150deg, #fff1b8, #dbc078); box-shadow: 0 1px 0 #fffadc inset, 0 2px 0 #b49c65; }
.task-card.claimed { background: linear-gradient(135deg, #e2e8d5, #cdd7bd); box-shadow: 0 1px 0 #f0f4e5 inset, 0 2px 0 #9daa90; }
.profile-skill { background: linear-gradient(135deg, #e9e7d3, #d5dac4); border: 1px solid #bfc3aa; box-shadow: 0 2px 4px #5c694324 inset, 0 1px 0 #ffffe8; }
.skill-card-heading .ultimate-emblem, .profile-skill-symbol { color: #63572f; border: 1px solid #ac995f; border-radius: 50%; background: radial-gradient(circle at 28% 22%, #fff9d4, #dbbf78 65%, #b89b5a); box-shadow: 0 2px 0 #fff8ca inset, 0 -3px 0 #9f854466 inset, 0 4px 0 #918152, 0 6px 6px #4c503033; transform: rotate(-8deg); }
.ultimate-emblem .icon, .profile-skill-symbol .icon { width: 28px; height: 28px; stroke-width: 1.8; filter: drop-shadow(0 1px 0 #fff5c1); }
.profile-skill-symbol .icon { width: 22px; height: 22px; }
.skill-card-heading .ultimate-curve, .profile-skill-symbol.ultimate-curve { color: #415773; border-color: #8f9eae; background: radial-gradient(circle at 28% 22%, #f0f6ff, #a5b6cd 65%, #8198b4); box-shadow: 0 2px 0 #eff6ff inset, 0 -3px 0 #6f8caa66 inset, 0 4px 0 #687f97, 0 6px 6px #33465133; }
.skill-card-heading .ultimate-footwork, .profile-skill-symbol.ultimate-footwork { color: #3e6351; border-color: #92ab88; background: radial-gradient(circle at 28% 22%, #eff7d9, #aac396 65%, #7f9e78); box-shadow: 0 2px 0 #eefbd8 inset, 0 -3px 0 #63835a66 inset, 0 4px 0 #698660, 0 6px 6px #33465133; }
.skill-card-heading .ultimate-block, .profile-skill-symbol.ultimate-block { color: #6a5270; border-color: #aa92ad; background: radial-gradient(circle at 28% 22%, #f9e9f7, #c5a9c9 65%, #a28aaa); box-shadow: 0 2px 0 #fff1ff inset, 0 -3px 0 #86658b66 inset, 0 4px 0 #876e8d, 0 6px 6px #47335133; }
.item-card { grid-template-columns: 67px minmax(0, 1fr); gap: 10px 14px; padding: 18px; }
.item-card .item-emblem { display: grid; place-items: center; width: 66px; height: 78px; border: 1px solid #c6c6aa; border-radius: 13px; background: radial-gradient(ellipse at 50% 85%, #65754b35, transparent 45%), linear-gradient(145deg, #e6e8cf, #f4f1dc); box-shadow: 0 2px 5px #68745220 inset, 0 1px 0 #ffffeb; padding: 0; }
.item-card .button { margin-top: 4px; }
.item-card h3 { margin-top: 3px; }
.item-object { position: relative; display: block; transform: rotate(-12deg); }
.object-drink { width: 29px; height: 46px; margin-top: 8px; border: 1px solid #759e81; border-radius: 8px 8px 7px 7px; background: linear-gradient(90deg, #558c71, #d6efd8 27%, #8fbfa0 62%, #43775d); box-shadow: 3px 4px 3px #48614c35, 0 -2px 1px #2f65474d inset; }
.object-drink::before { content: ''; position: absolute; width: 19px; height: 9px; top: -8px; left: 4px; border-radius: 3px 3px 1px 1px; border: 1px solid #ded3ac; background: repeating-linear-gradient(90deg, #f8edd0 0 2px, #ccc29e 2px 3px); box-shadow: 0 2px 1px #42715540; }
.object-drink::after { content: '+'; position: absolute; inset: 13px 0 9px; color: #4c8360; font-size: 22px; font-weight: 900; line-height: 21px; text-align: center; background: linear-gradient(90deg, #d4d9b2, #fffbdc 35%, #deddb8); }
.object-ticket { width: 47px; height: 30px; border: 1px solid #b5944e; border-radius: 3px; background: linear-gradient(135deg, #fff5c3, #d1ad61); box-shadow: 2px 3px 0 #b19b67, 4px 6px 4px #625d3a40; }
.object-ticket::before { content: '特训'; position: absolute; inset: 4px; border: 1px solid #b0914c; font-size: 12px; font-weight: 800; color: #8b6a2b; line-height: 20px; text-align: center; text-shadow: 0 1px #fff1bb; }
.object-ticket::after { content: ''; position: absolute; inset: 0 8px 0 auto; border-left: 1px dashed #a18442; }
.object-focus { width: 40px; height: 40px; border: 1px solid #a58a70; border-radius: 50%; background: radial-gradient(ellipse, #708b7955 0 21%, #9a8667 23% 30%, #fff3ce 32% 37%, #e1c49c 39% 62%, #f4e1ba 65% 73%, #b29673 77%); box-shadow: 2px 5px 0 #a99070, 3px 8px 5px #62553e3b; transform: rotate(-15deg) scaleY(.82); }
.object-focus::after { content: ''; position: absolute; width: 17px; height: 20px; left: 26px; top: 28px; transform: skewY(16deg); background: linear-gradient(90deg, #dbc5a0, #f2dfba); border: 1px solid #b99a74; border-top: 0; box-shadow: 2px 3px 2px #62553e26; }
.object-tonic { width: 29px; height: 48px; border: 1px solid #b08648; border-radius: 5px 5px 6px 6px; background: linear-gradient(90deg, #b77a2d, #ffde89 28%, #e5b256 65%, #b77c34); box-shadow: 3px 5px 4px #62553e3b; }
.object-tonic::before, .object-tonic::after { content: ''; position: absolute; left: -1px; right: -1px; height: 5px; border: 1px solid #b5bca7; border-radius: 50%; background: linear-gradient(#f9f8dc, #a5ac95); }
.object-tonic::before { top: -2px; } .object-tonic::after { bottom: -2px; }
.object-tonic > .icon { width: 20px; height: 27px; color: #fff6c9; fill: #fff6c9; margin-top: 10px; filter: drop-shadow(1px 1px 0 #a66c28); }
.club-news-item { border: 1px solid #b5bca4; background: linear-gradient(145deg, #f8f5e3, #e3e6ce); box-shadow: 0 1px 0 #ffffee inset, 0 3px 0 #adb99b, 0 5px 6px #3a55421a; margin-bottom: 12px; }
.club-news-item .news-art { filter: drop-shadow(2px 4px 2px #44573633); }
.event-row { border-color: #9fab95; box-shadow: 0 2px 0 #ffffe9 inset, 0 4px 0 #96a58b, 0 8px 10px #3a55422b; background: linear-gradient(135deg, #fbf6e3, #dfe4cb); }
.event-illustration { border: 5px solid #efe9d2; border-bottom-width: 4px; box-shadow: 0 2px 2px #56724b24; }
.navigation { background: linear-gradient(#d9dfc9, #c3ceb6); border-top: 1px solid #9eaf95; box-shadow: 0 2px 0 #f7f5dc inset, 0 -6px 14px #2f4a3824; gap: 4px; padding-inline: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.nav-button { border: 1px solid #b0bda1; border-radius: 10px; background: linear-gradient(145deg, #f7f5e1, #d7dec3); box-shadow: 0 1px 0 #ffffe8 inset, 0 3px 0 #98a888, 0 4px 4px #3750331f; color: #63775b; text-shadow: 0 1px #ffffe1; }
.nav-button[aria-current="page"] { color: #fffde2; background: linear-gradient(150deg, #7ba182, #4d775f); border-color: #52765c; box-shadow: 0 2px 3px #37513d40 inset, 0 1px 0 #ecf1d7; text-shadow: 0 -1px #395b43; transform: translateY(2px); }
.nav-button[aria-current="page"] .nav-art { transform: translateY(-3px) rotate(-8deg); filter: drop-shadow(1px 3px 2px #233f3859); }
.nav-button .nav-symbol { background: none; }
.navigation .nav-button[data-value="events"] { height: 70px; font-size: 17px; font-weight: 900; color: #654819; text-shadow: 0 1px #fff3bb; border-color: #b5954d; border-radius: 13px; background: linear-gradient(145deg, #fff0b1, #e0b859 72%, #c7a044); box-shadow: 0 2px 0 #fff8d4 inset, 0 -2px 0 #c19a493d inset, 0 4px 0 #947638, 0 6px 8px #5b552e38; }
.navigation .nav-button[data-value="events"] .nav-art { width: 38px; height: 36px; filter: drop-shadow(1px 3px 2px #81621f55); }
.navigation .nav-button[data-value="events"][aria-current="page"] { color: #fff9dd; text-shadow: 0 -1px #745021; border-color: #9e7936; background: linear-gradient(145deg, #d4ad50, #a27a31); box-shadow: 0 2px 4px #6a4a244d inset, 0 1px 0 #fff2bc, 0 2px 0 #896a32; }
.club-banner { border: 1px solid #739a84; border-radius: 18px; box-shadow: 0 2px 0 #d4e8ce inset, 0 5px 0 #788f73, 0 10px 12px #3652422e; background: #c3d8bd; }
.club-banner-copy { position: relative; z-index: 2; padding: 13px 16px; background: linear-gradient(#f7f4df, #e1e3c8); border-top: 1px solid #c9d3b7; box-shadow: 0 2px 0 #fffeea inset; }
.club-banner-copy h1 { font-size: 20px; color: #365547; text-shadow: 0 1px #ffffea; }
.club-banner-copy p { font-size: 11px; letter-spacing: 2px; color: #738266; }
@container game (max-width: 320px) { .item-card { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 14px; } .item-card .item-emblem { width: 57px; } .training-pad .training-tile { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 12px; gap: 6px 10px; } .training-pad .training-tile > .training-art { width: 50px; height: 58px; } }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }
.arena-help:empty { display: none; }
.ultimate-buttons > button { min-height: 38px; padding: 5px; line-height: 1.2; }
.ultimate-buttons strong { line-height: 1.3; }
.ultimate-buttons span { font-size: 10px; line-height: 1.3; }
@container game (max-width: 360px) {
  .ultimate-buttons { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 112px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #a3b28c #e8e5c9; padding: 0 1px 5px; }
  .ultimate-buttons > small { grid-column: auto; }
  .arena-specials .ultimate-buttons > button { min-height: 36px; }
  .arena-result { overflow-y: auto; }
}
@container game (max-width: 320px) {
  .arena-score { min-height: 35px; padding: 3px 7px; }
  .arena-score .avatar { display: none; }
  .arena-player b { font-size: 22px; }
  .arena-phase { min-height: 18px; padding: 2px 6px; font-size: 9px; }
  .arena-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 7px; padding: 5px 7px 7px; }
  .arena-values, .arena-specials, .arena-help { grid-column: 1 / -1; }
  .with-specials .arena-help { min-height: 12px; line-height: 1.3; margin: 1px 0; }
  .with-specials .arena-commit { min-height: 42px; padding: 5px; font-size: 13px; align-self: stretch; }
  .with-specials .arena-switches { grid-template-columns: 1fr; margin: 0; gap: 3px; }
  .with-specials .arena-switches button { min-height: 21px; padding: 3px; font-size: 9px; line-height: 1.25; }
}

.attribute-list { margin: 10px 0 0; padding: 0; }
.attribute-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid #a9b59d70; }
.attribute-list > div:last-child { border-bottom: 0; }
.attribute-list dt { color: #52654f; font-size: 13px; }
.attribute-list dd { margin: 0; color: #2c4d40; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }

.profile-section { margin: 16px 0; padding: 16px; }
.profile-section .club-section-heading { margin-bottom: 4px; }
.profile-section .club-section-heading h2 { margin: 0; font-size: 16px; }
.profile-section .attribute-list { margin-top: 4px; }
.profile-section .attribute-list > div { align-items: center; }
.skill-collection dt { display: flex; align-items: center; gap: 12px; }
.skill-collection dt small { display: block; margin-top: 4px; font-size: 11px; color: #748068; }
.skill-collection .profile-skill-symbol { width: 30px; height: 30px; margin: 0; flex-shrink: 0; }
.skill-collection .profile-skill-symbol .icon { width: 19px; height: 19px; }
.skill-collection dd { flex-shrink: 0; }
span.coin-chip { cursor: default; }
.profile-records { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 0; padding: 13px 0 2px; border-top: 1px solid #b6bba16b; }
.profile-records > div { min-width: 0; text-align: center; }
.profile-records > div + div { border-left: 1px solid #b6bba16b; }
.profile-records dt { color: #68765d; font-size: 11px; }
.profile-records dd { margin: 5px 0 0; padding-inline: 4px; color: #305747; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.content[data-page="online"].has-arena > .page-heading,
.content[data-page="online"].has-arena > .page-hero,
.content[data-page="online"].has-arena > .shop-categories { display: none; }

/* Illustrated page headers share the game's green and gold material frame. */
.game-logo-banner, .page-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 22px; border: 1px solid #536f54; border-radius: 18px; background: #17392e; box-shadow: 0 4px 0 #829574, 0 8px 14px #29453038; }
.game-logo-banner::after, .page-hero::after { content: ''; position: absolute; z-index: 2; inset: 5px; border: 1px solid #ffeab33b; border-radius: 13px; pointer-events: none; }
.game-logo-art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.page-hero-art { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 35%; }
.page-hero-profile .page-hero-art { object-position: 50% 25%; }
.page-hero-caption { position: absolute; z-index: 1; inset: auto 0 0; display: flex; align-items: end; justify-content: space-between; padding: 28px 17px 14px; background: linear-gradient(transparent, #092b25d9); }
.page-hero-caption h1 { margin: 0; color: #fff4d1; font-size: 24px; font-weight: 900; letter-spacing: 2px; text-shadow: 0 2px 0 #18392b, 0 3px 8px #071d1b; }

.shop-categories.home-profile-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.personal-attributes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid #b6bba16b; }
.personal-attributes > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; line-height: 22px; }
.personal-attributes dt { font-size: 12px; }
.personal-attributes dd { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-categories.shop-category-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shop-category-tabs > .button { padding-inline: 4px; }
html[lang=en] .shop-category-tabs > .button { white-space: nowrap; }
.equipment-room { margin: 18px 0; padding: 15px 12px 12px; border: 1px solid #557866; border-radius: 18px; background: radial-gradient(ellipse at 50% 42%, #76978275, transparent 60%), repeating-linear-gradient(0deg, transparent 0 27px, #c3d7b809 27px 28px), linear-gradient(140deg, #304f43, #142f28); box-shadow: 0 2px 0 #96ae8559 inset, 0 4px 0 #8a9e7e, 0 8px 13px #2c463432; color: #f1e6be; }
.equipment-room-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 3px 10px; }
.equipment-room-heading h2 { margin: 0; color: #f5ecc9; font-size: 17px; }
.equipment-room-heading > span { font-size: 11px; color: #b7ccb0; }
.equipment-doll { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, 1.2fr) minmax(0, 1fr); grid-template-rows: repeat(3, 96px); gap: 10px 8px; align-items: stretch; }
.equipment-mannequin { grid-column: 2; grid-row: 1 / 4; width: 160%; height: 100%; max-width: none; justify-self: center; align-self: end; pointer-events: none; filter: drop-shadow(5px 6px 4px #071c1aaa); }
.equipment-slot { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 3px; border: 1px solid #678672; border-radius: 11px; color: #9db6a1; background: linear-gradient(145deg, #33574b, #1d3c33); box-shadow: 0 1px 0 #b6c6a326 inset, 0 3px 0 #112d27; }
.equipment-slot small { font-size: 10px; color: #b8cbb0; }
.equipment-slot strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 500; }
.equipment-slot .equipment-icon { width: 40px; height: 42px; opacity: .48; }
.equipment-slot.is-worn { color: #c49f51; }
.equipment-slot.is-worn .equipment-icon { opacity: 1; }
.equipment-slot.is-worn strong { color: #f3e4b7; }
.equipment-slot[aria-pressed="true"] { border-color: #e5c97f; outline: 1px solid #e5c97f55; background: linear-gradient(145deg, #627855, #334e3e); box-shadow: 0 1px 0 #fff0b24d inset, 0 3px 0 #203b2d, 0 0 12px #e7cc7c20; }
.equipment-slot:focus-visible { outline: 3px solid #ffe4a0; outline-offset: 2px; }
.slot-headband { grid-column: 1; grid-row: 1; } .slot-racket { grid-column: 1; grid-row: 2; } .slot-wristband { grid-column: 1; grid-row: 3; }
.slot-shirt { grid-column: 3; grid-row: 1; } .slot-shorts { grid-column: 3; grid-row: 2; } .slot-shoes { grid-column: 3; grid-row: 3; }
.equipment-room-hint { margin: 13px 0 0; text-align: center; color: #aec2a6; font-size: 10px; }
.equipment-card { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 10px 12px; }
.equipment-card .button { grid-column: 1 / -1; width: 100%; margin-top: 2px; }
.equipment-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.equipment-actions .button { grid-column: auto; width: 100%; margin-top: 2px; padding-inline: 8px; }
.equipment-card-copy .equipment-next { color: #8a6a35; }
.shop-categories.task-categories { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.task-categories .button { min-width: 0; padding: 9px 2px; font-size: 12px; }
.equipment-emblem { display: grid; place-items: center; width: 60px; height: 66px; border: 1px solid #a8b096; border-radius: 12px; color: #528371; background: radial-gradient(ellipse at 30% 20%, #eef0cf, #bdc9ac); box-shadow: 0 2px 0 #ffffe4 inset, 0 3px 0 #94a285, 0 5px 6px #50614020; }
.equipment-icon { width: 50px; height: 50px; filter: drop-shadow(2px 3px 1px #29433455); }
.gear-racket { color: #b85d49; } .gear-pro { color: #b18b3e; border-color: #b5a064; background: radial-gradient(ellipse at 30% 20%, #fff4c5, #d4c086); }
.equipment-card-copy { min-width: 0; }
.equipment-divider { height: 0; margin: 20px 0; border: 0; border-top: 1px solid #98a58b; box-shadow: 0 1px 0 #fffdf0; }
.equipment-current > .equipment-card, .equipment-reserve > .equipment-card { margin: 12px 0; }
.equipment-card > .equipment-card-copy:first-child { grid-column: 1 / -1; }
.equipment-shop-list .equipment-card { grid-template-columns: minmax(0, 1fr); }
.equipment-shop-list .equipment-actions, .shop-item-card .equipment-actions { grid-template-columns: minmax(0, 1fr); }
.equipment-card-copy h3 { margin: 4px 0; color: #31594d; font-size: 15px; }
.equipment-card-copy small { color: #829075; font-size: 10px; }
.equipment-card-copy .equipment-requirement-unmet { color: #b3261e; font-weight: 700; }
.equipment-card-copy p { margin: 4px 0 0; color: #547362; font-size: 11px; line-height: 1.6; }
.equipment-card-copy h3:first-child { margin-top: 0; }
.equipment-card-copy .equipment-stat-list { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 7px; }
.equipment-stat { color: #8c651c; font-weight: 600; }
.stat-power, .stat-drawback { color: #a33d32; }
.stat-spin { color: #74469a; }
.stat-agility { color: #287348; }
.stat-defense { color: #2c6395; }
.stat-stamina { color: #946014; }
.stat-lifesteal { color: #187675; }
.stat-poison { color: #65741d; }
.stat-serveAce { color: #9b5426; }
.stat-receiveRead { color: #42658d; }
.stat-thirdBall { color: #a04766; }
.stat-spinBite { color: #794781; }
.stat-changeLine { color: #3d7277; }
.stat-rallyFocus { color: #476e44; }
.stat-counterDrive { color: #915139; }
.stat-softTouch { color: #537331; }
.stat-heavySmash { color: #9d443c; }
.stat-clutch { color: #865a90; }
.stat-spiritGuard { color: #3c6889; }
.stat-skill { color: #906117; }
.equipment-empty { padding: 20px 16px; border: 1px dashed #a6b597; border-radius: 13px; color: #687f62; font-size: 12px; line-height: 1.8; }
.attribute-gear-bonus { display: block; margin-top: 4px; color: #68794e; font-size: 10px; font-weight: 500; }
.profile-detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.profile-detail-actions button { display: grid; gap: 7px; min-width: 0; padding: 12px; text-align: left; color: #31594d; background: linear-gradient(145deg, #fffbed, #e4e4c9); border: 1px solid #b6b99c; border-radius: 12px; box-shadow: 0 1px 0 #fffef1 inset, 0 2px 0 #a0ad90; }
.profile-detail-actions button > span { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.profile-detail-actions strong { font-size: 15px; overflow-wrap: anywhere; }
.profile-detail-actions small { color: #65744f; font-size: 10px; }
.profile-detail-actions .icon { width: 18px; height: 18px; }
.profile-detail-actions button:focus-visible { outline: 3px solid #8a682d; outline-offset: 3px; }
#profile-detail-dialog { position: fixed; inset: 0; margin: auto; transform: none; width: min(430px, calc(min(100vw, 56.25dvh, 480px) - 24px)); max-width: calc(100vw - 24px); height: fit-content; max-height: calc(min(100dvh, 177.7778vw, 853.3333px) - 32px); overflow: hidden; background: linear-gradient(145deg, #fffdf0, #eee9d5); padding: 16px; }
#profile-detail-dialog[open] { display: flex; flex-direction: column; }
#profile-detail-dialog .dialog-header { flex: 0 0 auto; align-items: center; margin-bottom: 12px; }
#profile-detail-content { min-height: 0; overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; scrollbar-gutter: stable; }
#profile-detail-content .ledger-row > span { min-width: 0; }
#profile-detail-content .ledger-row > strong { flex-shrink: 0; }
#profile-detail-dialog .icon-button { min-width: 40px; min-height: 40px; color: #31594d; background: #e2e6cb; border: 1px solid #a8b797; }
#profile-detail-dialog .history-row strong small { display: block; margin-top: 5px; color: #718064; font-size: 10px; font-weight: 400; }
.wallet-overview { padding: 14px; border-radius: 12px; background: #e6e6c8; color: #31594d; }
.wallet-overview > span { font-size: 12px; }
.wallet-overview > strong { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 26px; overflow-wrap: anywhere; }
.wallet-overview p, .profile-detail-summary { font-size: 12px; line-height: 1.7; }
.event-row button.event-illustration { display: block; width: 100%; padding: 0; border-radius: 12px 12px 0 0; cursor: pointer; }
.event-illustration:focus-visible { outline: 3px solid #aa7a28; outline-offset: -4px; }
.event-detail-hint { position: absolute; right: 7px; bottom: 7px; padding: 4px 7px; border-radius: 7px; background: #122e2ad9; color: #fff2cc; font-size: 10px; }
.event-detail-art { position: relative; overflow: hidden; border-radius: 12px; background: #173c35; }
.event-detail-art img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.event-detail-art span { position: absolute; inset: auto 0 0; padding: 22px 12px 10px; background: linear-gradient(transparent, #102923d9); color: #fff2c9; font-size: 16px; font-weight: 800; }
.event-location { margin: 12px 0 6px; color: #7f663b; font-size: 11px; }
.event-introduction { margin: 0; font-size: 12px; line-height: 1.85; color: #4d6256; }
.event-format { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.event-format span { padding: 5px 9px; border-radius: 6px; background: #e2e6d2; color: #375647; font-size: 10px; }
.event-entry-facts { margin: 0; border-block: 1px solid #d3d6c1; }
.event-entry-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; }
.event-entry-facts > div + div { border-top: 1px solid #e0dfce; }
.event-entry-facts dt { font-size: 12px; color: #67745e; }
.event-entry-facts dd { margin: 0; text-align: right; font-size: 14px; font-weight: 800; }
.event-entry-facts small { display: block; margin-top: 3px; font-size: 10px; font-weight: 400; color: #76806b; }
.event-prize { padding: 14px 0 0; }
.event-prize h3 { margin: 0 0 8px; color: #8a5b1c; font-size: 13px; }
.event-prize table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.event-prize th, .event-prize td { padding: 9px 6px; text-align: right; border-bottom: 1px solid #dedec9; }
.event-prize th:first-child { text-align: left; }
.event-prize thead th { color: #7d846c; font-size: 10px; font-weight: 400; }
.event-prize tbody tr:first-child { color: #92631f; background: #ebdca53b; }
.event-prize td { font-weight: 700; }
.event-prize p { margin: 9px 0 0; color: #78826c; font-size: 10px; line-height: 1.7; }
.event-fee-note { font-size: 10px; color: #78826c; line-height: 1.7; }
.event-register { width: 100%; min-height: 44px; margin: 5px 0; }
#profile-detail-footer { flex: 0 0 auto; border-top: 1px solid #d3d6c1; padding-top: 8px; margin-top: 10px; }

/* Tournament route and the complete eight-player draw. */
.tournament-toolbar { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 0 0 12px; }
.tournament-toolbar > span { font-size: 11px; color: #627c65; }
.tournament-summary { margin: 0 0 22px; padding: 18px; border: 1px solid #a9ad86; border-radius: 15px; background: linear-gradient(135deg, #fff3cb, #e5ddbb); box-shadow: 0 2px 0 #fffbe6 inset, 0 4px 0 #a3aa88, 0 7px 10px #3a554224; }
.tournament-summary > small { color: #80612e; font-size: 11px; }
.tournament-summary h2 { margin: 7px 0; font-size: 21px; color: #365746; }
.tournament-summary p { font-size: 12px; line-height: 1.8; }
.tournament-summary > .button { width: 100%; margin-top: 8px; white-space: normal; }
.tournament-summary .stamina-warning { color: #8a5129; }
.tournament-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 18px 0 12px; list-style: none; }
.tournament-path li { position: relative; display: grid; gap: 5px; padding: 11px 4px; text-align: center; border: 1px solid #a5b497; border-radius: 10px; background: linear-gradient(#eff0d7, #ced8ba); box-shadow: 0 2px 0 #ffffe5 inset, 0 3px 0 #a0ae8d; }
.tournament-path li:not(:last-child)::after { content: '›'; position: absolute; right: -11px; top: 25px; font-size: 20px; color: #6e865e; }
.tournament-path small, .tournament-path span { font-size: 10px; color: #647b5b; }
.tournament-path strong { font-size: 14px; color: #385a45; }
.tournament-schedule { margin: 24px 0; }
.tournament-schedule h2 { font-size: 18px; }
.tournament-controls { margin-top: 16px; }
.tournament-controls .button { width: 100%; }
.tournament-controls p { font-size: 12px; line-height: 1.6; }
.tournament-controls .stamina-warning { color: #8a5129; }
.tournament-result { margin: 0 0 18px; padding: 18px 8px 12px; text-align: center; color: #375849; }
.tournament-result > strong { display: block; font-size: 34px; font-weight: 900; line-height: 1.25; color: #8d6227; text-shadow: 0 2px 0 #fff7d9; }
.tournament-result > .result-art { display: block; margin: 0 auto 12px; }
.tournament-result > p { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 12px 0 0; font-size: 20px; font-weight: 800; line-height: 1.5; font-variant-numeric: tabular-nums; }
.tournament-result > p span { white-space: nowrap; }
.event-history { margin-top: 30px; padding-top: 18px; border-top: 1px solid #aab99b; }
.event-history summary { font-size: 16px; cursor: pointer; }
.event-history-count { margin-left: 6px; color: #6e8164; font-size: 12px; font-weight: 400; }
.event-history ol { list-style: none; margin: 0; padding: 0; }
.event-history button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 17px 4px; border: 0; border-bottom: 1px solid #afba9e; color: #365746; background: transparent; text-align: left; }
.event-history button > span:first-child { display: grid; flex: 1; gap: 6px; min-width: 0; }
.event-history strong { font-size: 14px; }
.event-history small { font-size: 10px; color: #6e8164; }
.event-history b { color: #8a692e; font-size: 13px; }
.event-history button:hover { background: #faf3d44d; }
.event-history button:focus-visible { outline: 2px solid #ac853f; outline-offset: -2px; }
.tournament-schedule ol { list-style: none; margin: 0; padding: 0; }
.tournament-schedule li { display: grid; grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr); align-items: center; gap: 8px; padding: 16px 5px; border-bottom: 1px solid #aeb99c; }
.schedule-player > b { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; color: #5b7455; background: #c5d1b4; border: 1px solid #9cab8d; font-size: 12px; }
.schedule-player { display: flex; align-items: center; gap: 7px; min-width: 0; }
.schedule-copy { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.tournament-schedule .match-set-score { display: block; width: 100%; text-align: center; font-size: 30px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; color: #365746; text-shadow: 0 1px 0 #fffbea; }
.history-game-score { grid-column: 1 / -1; text-align: center; }
.content[data-page="event-history"] > .button { justify-self: start; }
.tournament-schedule li > em { text-align: right; }
.tournament-schedule strong { font-size: 14px; }
.tournament-schedule span, .tournament-schedule em { font-size: 11px; color: #61775c; font-style: normal; }
.tournament-schedule small { display: block; margin-top: 4px; }
.tournament-schedule .replay-entry, .tournament-schedule .replay-unavailable { grid-column: 1 / -1; justify-self: end; }
#match-replay-root { flex: 1; min-height: 0; }
.replay-table { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.match-replay .turn-match-title > span { min-width: 0; overflow-wrap: anywhere; }
.match-replay .replay-controls { position: static; flex: 0 0 auto; display: grid; gap: 8px; padding: 10px; border-top: 1px solid #a6bb8870; background: #203d30; }
.match-replay .replay-controls > * { grid-column: 1 / -1; }
.match-replay .replay-buttons .button { color: #233c2f; text-shadow: none; }
.replay-controls > p { margin: 0; color: #fff3d0; font-size: 12px; min-height: 18px; }
.replay-progress { display: grid; gap: 7px; color: #e2e8c9; font-size: 11px; }
.replay-progress input { display: block; width: 100%; margin: 0; accent-color: #e6c775; cursor: pointer; }
.replay-buttons { display: grid; grid-template-columns: 1fr 1.2fr 1fr .7fr 32px 32px; gap: 4px; }
.replay-buttons .button { min-width: 0; min-height: 38px; padding: 5px 2px; font-size: 11px; }
.replay-cut-in { position: absolute; inset: 0; z-index: 5; background: #102e2c; }
.replay-cut-in canvas { width: 100%; height: 100%; }
.replay-cut-in > strong { position: absolute; bottom: 12px; left: 0; right: 0; color: #fff0bd; text-align: center; font-size: 26px; text-shadow: 0 2px 5px #000; }
.match-replay > .replay-controls { position: relative; z-index: 6; }
.match-replay > .replay-cut-in > strong { bottom: calc(var(--replay-control-height, 0px) + 12px); }
.tournament-schedule .is-current .schedule-player > b { background: #e6c775; color: #6e5123; border-color: #b79a50; }
.tournament-schedule .is-current em { color: #85602c; font-weight: 800; }
.match-route-actions { display: flex; flex-shrink: 0; gap: 6px; }
.match-route-actions .button { min-height: 36px; padding: 5px 8px; font-size: 11px; }
.turn-match-title { min-height: 47px; }
.turn-arena { position: relative; }
.arena-court > .court-webgl { position: absolute; inset: 0; display: block; pointer-events: none; }
.arena-court > canvas[data-view-hover="true"] { cursor: grab; }
.arena-court > canvas[data-view-dragging="true"] { cursor: grabbing; }
.arena-court > canvas[data-ball-dragging="true"] { cursor: grabbing; }
.arena-court[data-renderer="3d"] > #turn-canvas, .arena-court[data-renderer="3d"] > .replay-table { z-index: 1; background: transparent; }
.immersive-arena .arena-switches .court-renderer-toggle { flex: 0 0 48px; }
.immersive-arena .arena-court { position: relative; flex: 1; min-height: 0; }
.immersive-arena .turn-match-title, .immersive-arena .online-match-title { position: relative; z-index: 8; flex: 0 0 auto; justify-content: flex-start; min-height: 42px; padding: 4px 8px; margin: 0; color: #375849; background: #f0eed8; font-size: 11px; }
.immersive-arena .turn-match-title .match-route-actions { order: -1; }
.immersive-arena .turn-match-title .button { min-height: 32px; padding: 5px 12px; }
.immersive-arena .online-match-title [data-arena="exit"] { order: -1; min-height: 32px; padding: 5px 12px; font-size: 11px; }
.online-match-title { justify-content: flex-start; }
.online-match-title [data-online="leave"] { order: -1; }
.immersive-arena .arena-phase { position: static; grid-column: 1 / -1; padding: 0; min-height: 18px; background: transparent; color: #fff9de; text-shadow: 0 1px 3px #13241b; }
.immersive-arena .arena-phase [data-clock] { color: #fff0bc; }
.immersive-arena .arena-score { --games-column: 40px; --points-column: 64px; position: relative; display: block; flex: 0 0 auto; min-height: 0; padding: 0; border: 0; border-bottom: 2px solid #c7a663; background: #122d28; color: #fff6db; }
.immersive-arena .arena-score-labels { display: grid; grid-template-columns: minmax(0, 1fr) var(--games-column) var(--points-column); height: 19px; align-items: center; background: #0c211f; color: #a8beb1; font-size: 9px; text-align: center; }
.immersive-arena .arena-score-labels > :first-child { padding-left: 10px; text-align: left; }
.immersive-arena .arena-player { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px var(--games-column) var(--points-column); align-items: center; gap: 0; height: 37px; text-align: left; background: linear-gradient(90deg, #234a3c, #15342d); }
.immersive-arena .arena-player + .arena-player { border-top: 1px solid #436051; }
.immersive-arena .arena-player .avatar { display: block; width: 25px; height: 27px; margin-left: 6px; border-radius: 7px; }
.immersive-arena .arena-player > div { min-width: 0; padding-left: 5px; }
.immersive-arena .arena-player strong { color: #fff4d5; font-size: 12px; }
.match-player-line { display: flex; align-items: center; gap: 5px; min-width: 0; color: #c6d8c8; font-size: 9px; line-height: 18px; white-space: nowrap; }
.match-player-line > span { flex: 0 0 auto; }
.immersive-arena .match-player-line strong { flex: 1 1 auto; min-width: 16px; font-size: 11px; }
.match-player-type { color: #ebd5a2; }
.match-player-skills { display: flex; align-items: center; gap: 4px; min-width: 0; height: 21px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.match-player-skills::-webkit-scrollbar { display: none; }
.match-player-skill { flex: 0 0 auto; padding: 1px 5px; border: 1px solid #a6c18b55; border-radius: 4px; color: #e4e9c8; background: #0d2b2266; font-size: 9px; line-height: 15px; white-space: nowrap; }
.match-no-skills { color: #9db5a5; font-size: 10px; }
.immersive-arena .arena-server { font-size: 9px; color: #f7d887; text-align: center; }
.immersive-arena .arena-server[hidden] { display: block; visibility: hidden; }
.immersive-arena .arena-player b { display: grid; place-items: center; align-self: stretch; line-height: 1; font-variant-numeric: tabular-nums; }
.immersive-arena .arena-player [data-set] { grid-column: 4; grid-row: 1; color: #f5e9c5; background: #0c231f66; border-left: 1px solid #ffffff12; font-size: 20px; }
.immersive-arena .arena-player [data-score] { grid-column: 5; grid-row: 1; color: #142f28; background: #ebcf87; font-size: 28px; }
.immersive-arena .arena-hud { z-index: 6; right: auto; min-width: 0; width: max-content; display: flex; gap: 8px; padding: 6px 8px; border-color: #fff1b480; background: #16382aeb; border-radius: 9px; box-shadow: 0 3px 12px #10261c55; }
.immersive-arena .arena-hud[hidden] { display: none; }
.immersive-arena .arena-hud span { display: grid; gap: 1px; text-align: center; color: #daebc9; font-size: 8px; }
.immersive-arena .arena-hud b { color: #ffe399; font-size: 10px; }
.immersive-arena .arena-hud span:nth-child(2) b { color: #ffae8b; }
.immersive-arena .arena-bottom { position: absolute; inset: 8px 8px auto; z-index: 7; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; padding: 0; border: 0; background: none; box-shadow: none; pointer-events: none; }
.immersive-arena .arena-values, .immersive-arena .arena-specials, .immersive-arena .arena-help { grid-column: 1 / -1; }
.immersive-arena .arena-values { display: none; }
.immersive-arena .arena-values b { color: #ffe199; }
.immersive-arena .arena-specials { padding: 0; min-width: 0; }
.immersive-arena .charge-row { color: #ffdd8d; font-size: 9px; }
.immersive-arena .charge-row > small { font-size: 8px; }
.immersive-arena .charge-meter { background: #193a22; }
.immersive-arena .ultimate-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; gap: 4px; margin-top: 6px; padding: 0; }
.immersive-arena .ultimate-buttons > button { min-height: 44px; padding: 5px 2px; background: linear-gradient(#fff0c2eb, #d5b46be8); border-color: #f4d18a; }
.immersive-arena .ultimate-buttons strong { font-size: 10px; }
.immersive-arena .ultimate-buttons strong small { display: none; }
.immersive-arena .ultimate-buttons > small { grid-column: 1 / -1; color: #e0edc4; }
.immersive-arena .combat-item-drawer { position: relative; }
.immersive-arena .combat-item-drawer summary { min-height: 30px; padding: 7px 0 2px; color: #f6e3b6; font-size: 10px; }
.immersive-arena .combat-item-drawer[open] .combat-items { position: absolute; bottom: 100%; left: 0; right: 0; z-index: 10; padding: 8px; background: #183a2bf5; border: 1px solid #ddc58e; border-radius: 12px; }
.immersive-arena .arena-specials { position: absolute; inset: auto 10px 12px; z-index: 8; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; pointer-events: none; }
.immersive-arena .arena-specials[hidden] { display: none; }
.immersive-arena .arena-specials .ultimate-buttons, .immersive-arena .arena-specials .combat-items { display: flex; flex-wrap: nowrap; gap: 5px; width: auto; margin: 0; padding: 0; overflow: visible; }
.immersive-arena .arena-specials .ultimate-buttons { max-width: calc(100% - 105px); overflow-x: auto; padding: 3px 1px 5px; scrollbar-width: thin; pointer-events: auto; }
.immersive-arena .arena-specials .combat-items { flex-shrink: 0; padding-bottom: 5px; }
.immersive-arena .combat-icon[data-id^="gear-"] { border-color: #f3b45c; color: #ffca75; background: linear-gradient(140deg,#78471f,#30291e); }
.immersive-arena .arena-specials .combat-icon { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: clamp(32px, 9cqw, 42px); height: clamp(36px, 10cqw, 46px); min-height: 0; padding: 5px 5px 10px; border: 1px solid #e5c57d; border-radius: 9px; color: #ffe6a3; background: linear-gradient(145deg, #415343, #142b25); box-shadow: inset 0 1px #fff6c440, 0 3px 0 #071b17, 0 4px 8px #071b1755; pointer-events: auto; cursor: pointer; }
.immersive-arena .combat-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.immersive-arena .combat-icon .combat-badge { position: absolute; bottom: 1px; right: 4px; font-size: 9px; line-height: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.immersive-arena .combat-icon.skill-curve { color: #b6e4ff; border-color: #7dacc4; }
.immersive-arena .combat-icon.skill-footwork { color: #cdf2b4; border-color: #99bd88; }
.immersive-arena .combat-icon.skill-block { color: #dacdff; border-color: #b0a3cc; }
.immersive-arena .combat-icon.item-focus, .immersive-arena .combat-icon.item-tonic { color: #c1eaf0; border-color: #84b8bd; }
.immersive-arena .combat-icon:disabled { opacity: .55; filter: saturate(.45); cursor: default; }
.immersive-arena .combat-icon[data-active="true"] { opacity: 1; filter: none; border-color: #fff1a5; box-shadow: 0 0 10px #ffc95388, inset 0 0 8px #ffdf8c55; }
.immersive-arena .combat-icon:focus-visible { outline: 2px solid #fff5ba; outline-offset: 3px; }
.immersive-arena .paddle-charge { position: absolute; z-index: 5; display: block; pointer-events: none; text-align: center; }
.immersive-arena .paddle-charge[hidden] { display: none; }
.immersive-arena .paddle-charge .charge-meter { width: 100%; height: 6px; min-width: 0; margin: 0; border: 1px solid #fce2a38c; border-radius: 4px; background: #13281de6; box-shadow: 0 1px 3px #081b19; overflow: hidden; }
.immersive-arena .paddle-charge .charge-meter i { display: block; height: 100%; background: linear-gradient(#fff2a5, #eeb747); }
.immersive-arena .paddle-shot-row { position: relative; margin-top: 5px; }
.immersive-arena .paddle-spirit-row { margin-top: 0; }
.immersive-arena .paddle-shot-row small, .immersive-arena .paddle-shot-row b { position: absolute; top: -3px; font-size: 9px; line-height: 12px; font-weight: 700; white-space: nowrap; color: #fff1ce; text-shadow: 0 1px 2px #061d15; }
.immersive-arena .paddle-shot-row small { right: calc(100% + 5px); }
.immersive-arena .paddle-shot-row b { left: calc(100% + 5px); font-variant-numeric: tabular-nums; }
.immersive-arena .paddle-charge .power-meter i { background: linear-gradient(#ffd19a, #e88542); }
.immersive-arena .paddle-charge .spin-meter { position: relative; border-color: #b8e5f2aa; }
.immersive-arena .paddle-charge .spin-meter i { position: absolute; top: 0; background: linear-gradient(#c0f4ff, #58b7d5); }
.immersive-arena .paddle-charge .spin-meter::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #effcff; transform: translateX(-50%); }
.immersive-arena .ultimate-drawer, .immersive-arena .combat-item-drawer { position: static; display: inline-block; width: 50%; vertical-align: top; }
.immersive-arena .ultimate-drawer summary, .immersive-arena .combat-item-drawer summary { min-height: 34px; padding: 10px 2px 4px; color: #f6e3b6; font-size: 10px; cursor: pointer; }
.immersive-arena .ultimate-drawer[open] .ultimate-buttons { position: absolute; bottom: 100%; left: 0; right: 0; z-index: 10; padding: 8px; border: 1px solid #ddc58e; border-radius: 12px; background: #183a2bf5; }
.immersive-arena .combat-items button { min-height: 44px; }
.immersive-arena .arena-help { min-height: 0; max-height: 28px; margin: 0; color: #edf3d8; font-size: 9px; line-height: 1.4; text-align: center; }
.immersive-arena .arena-commit { min-height: 44px; align-self: stretch; font-size: 16px; padding: 7px; }
.immersive-arena .landing-confirm { position: absolute; z-index: 9; display: grid; place-items: center; width: 26px; height: 26px; min-height: 26px; padding: 4px; border-radius: 50%; border: 1px solid #fff0ae; background: linear-gradient(145deg, #75ab79, #285d48); color: #fff8d8; box-shadow: 0 1px 5px #0b261b77; touch-action: none; transition: none; }
.immersive-arena .landing-confirm[hidden] { display: none; }
.immersive-arena .landing-confirm svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.immersive-arena .landing-confirm:hover, .immersive-arena .landing-confirm:active { transform: none; }
.immersive-arena .arena-hud, .immersive-arena .arena-hud * { pointer-events: none; user-select: none; }
.immersive-arena .landing-confirm:focus-visible { outline: 3px solid #fff5ba; outline-offset: 3px; }
.immersive-arena .arena-switches { grid-column: 1 / -1; }
.immersive-arena > .arena-switches { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) 44px 48px; margin: 0; padding: 8px 10px; gap: 8px; border-top: 1px solid #a1b28c; background: #e1e7d1; }
.arena-switches .court-renderer-toggle::before { display: none; }
.match-sound-toggle { display: inline-flex; align-items: center; justify-content: center; }
.match-sound-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.match-sound-toggle[aria-pressed="false"] { opacity: .7; }
.immersive-arena .arena-bottom .arena-tools { pointer-events: auto; }
.immersive-arena .arena-switches button { min-height: 44px; padding: 6px; font-size: 12px; background: #18392ccc; color: #e6eac6; border-color: #c1cc9d6b; }
.immersive-arena .arena-switches button[aria-pressed="true"] { color: #203c2c; background: #e0c274; }
.immersive-arena .arena-tools { grid-column: 1 / -1; }
.immersive-arena .arena-tools button { color: #fff1c6; }
.immersive-arena .arena-result { z-index: 15; }
.immersive-arena .arena-replay { bottom: auto; top: 74px; z-index: 4; }
@container game (max-width: 350px) {
  .immersive-arena .arena-score { --games-column: 32px; --points-column: 55px; }
  .immersive-arena .arena-player strong { font-size: 11px; }
  .match-player-line { gap: 3px; font-size: 8px; }
  .immersive-arena .arena-bottom { inset-inline: 5px; padding: 0; gap: 4px; }
}
.ultimate-cinematic { position: absolute; inset: 0; z-index: 30; overflow: hidden; border-radius: inherit; background: #091d21; isolation: isolate; }
.ultimate-cinematic[hidden] { display: none; }
.match-ending { position: absolute; inset: 0; z-index: 40; overflow: hidden; display: grid; place-items: center; isolation: isolate; border-radius: inherit; background: radial-gradient(ellipse at 50% 38%, #647048, #132e29 62%, #071b1d); color: #fff0bc; animation: ending-reveal .3s ease-out both; }
.match-ending[hidden] { display: none; }
.ending-light { position: absolute; inset: -40%; opacity: .42; background: repeating-conic-gradient(from 0deg, transparent 0deg 19deg, #ffdd852d 21deg 29deg, transparent 31deg 45deg); animation: ending-rays 14s linear infinite; }
.ending-content { position: relative; z-index: 2; width: 100%; padding: 22px; text-align: center; animation: ending-title .65s cubic-bezier(.15,.8,.25,1) both; }
.ending-emblem { position: relative; height: clamp(85px, 23cqw, 140px); margin: 0 auto 18px; perspective: 650px; }
.ending-emblem img { height: 100%; width: auto; filter: drop-shadow(0 10px 3px #03191388) drop-shadow(0 0 28px #f7d27488); animation: ending-trophy 2.8s ease-in-out both; }
.ending-kicker { display: block; margin-bottom: 10px; letter-spacing: 3px; font-size: 11px; color: #d9d9ad; }
.ending-content h2 { margin: 0; color: #ffe4a1; font-size: clamp(32px, 11cqw, 52px); font-weight: 900; letter-spacing: 5px; text-shadow: 0 2px #ac7628, 0 4px #775126, 0 8px 18px #071c20; }
.ending-score { display: block; margin: 18px 0 8px; font-size: clamp(35px, 12cqw, 60px); font-variant-numeric: tabular-nums; letter-spacing: 4px; color: #fff7dd; }
.ending-detail { margin: 0; font-size: 12px; line-height: 1.8; color: #c0d0ba; }
.ending-skip { position: absolute; z-index: 3; right: 12px; top: 12px; min-width: 54px; min-height: 40px; padding: 7px 12px; border: 1px solid #d1c8a075; border-radius: 10px; background: #102b25b3; color: #fff1c9; font-size: 12px; }
.ending-skip:focus-visible { outline: 2px solid #fff2b3; outline-offset: 2px; }
.ending-particles { position: absolute; inset: 0; pointer-events: none; }
.ending-particles i { position: absolute; left: var(--x); top: -10%; width: 6px; height: 13px; background: #f7d27c; filter: hue-rotate(calc(var(--hue) * 30deg)); animation: ending-confetti 2.6s var(--delay) linear infinite; }
.match-ending[data-kind="champion"] { background: radial-gradient(ellipse at 50% 34%, #8a692a, #363827 50%, #081c20); }
.match-ending[data-kind="eliminated"], .match-ending[data-kind="defeat"] { background: radial-gradient(ellipse at 50% 28%, #4d6170, #1d2d38 52%, #0b161f); }
.match-ending[data-kind="eliminated"] .ending-light, .match-ending[data-kind="defeat"] .ending-light { background: linear-gradient(90deg, transparent 38%, #b8d6e540 50%, transparent 62%); animation: ending-dim 2.4s ease-out both; }
.match-ending[data-kind="eliminated"] h2, .match-ending[data-kind="defeat"] h2 { color: #d3e1e9; text-shadow: 0 2px #748692, 0 4px #425563, 0 8px 18px #081119; }
.ending-ball { display: block; position: absolute; width: 52px; height: 52px; left: calc(50% - 26px); bottom: 8px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffffee, #e4e6de 45%, #929d9a); box-shadow: 9px 14px 25px #0005; animation: ending-bounce 1.5s both; }
.ending-emblem > i { position: absolute; left: calc(50% - 48px); bottom: -1px; width: 96px; height: 8px; border-radius: 50%; background: #07151ba8; filter: blur(3px); }
@keyframes ending-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes ending-title { from { opacity: 0; transform: translateY(20px) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes ending-trophy { 0% { transform: rotateY(-45deg) scale(.5) translateY(25px); } 28% { transform: rotateY(12deg) scale(1.06); } 60% { transform: rotateY(-8deg) translateY(-6px); } 100% { transform: none; } }
@keyframes ending-rays { to { transform: rotate(90deg); } }
@keyframes ending-confetti { from { transform: translateY(0) rotate(var(--turn)); } to { transform: translate(var(--drift), 700px) rotate(calc(var(--turn) + 540deg)); } }
@keyframes ending-dim { from { opacity: .7; } to { opacity: .15; } }
@keyframes ending-bounce { 0% { transform: translateY(-100px); } 35% { transform: translateY(0) scaleY(.9); } 55% { transform: translateY(-30px); } 72% { transform: translateY(0); } 85% { transform: translateY(-9px); } 100% { transform: none; } }
.ending-reduced, .ending-reduced * { animation: none !important; }
.ending-reduced .ending-particles { display: none; }
@media (prefers-reduced-motion: reduce) { .match-ending, .match-ending * { animation: none !important; } .ending-particles { display: none; } }
.ultimate-cinematic canvas { display: block; width: 100%; height: 100%; }
.cinematic-caption { position: absolute; left: 12px; right: 12px; bottom: 6%; display: grid; justify-items: center; gap: 10px; color: #fff4d8; text-align: center; pointer-events: none; }
.cinematic-caption span { font-size: 11px; letter-spacing: 7px; color: var(--cinematic-color); }
.cinematic-caption strong { font-size: clamp(28px, 8vw, 40px); font-weight: 900; letter-spacing: 4px; text-shadow: 0 3px 0 #06131b, 0 0 22px var(--cinematic-color); }
.cinematic-caption i { width: 88px; height: 2px; background: linear-gradient(90deg, transparent, var(--cinematic-color), transparent); }
.cinematic-skip { position: absolute; right: 14px; top: 14px; min-width: 56px; min-height: 40px; border: 1px solid #c7dace66; border-radius: 9px; background: #09201bd9; color: #fff3d5; font-size: 12px; }
.cinematic-skip:focus-visible { outline: 2px solid var(--cinematic-color); outline-offset: 3px; }
.cinematic-voice { position: absolute; left: 14px; top: 14px; min-height: 40px; padding: 7px 12px; border: 1px solid #c7dace66; border-radius: 9px; background: #09201bd9; color: #fff3d5; font-size: 12px; }
.cinematic-voice[hidden] { display: none; }
.cinematic-voice:focus-visible { outline: 2px solid var(--cinematic-color); outline-offset: 3px; }
.tournament-bracket { padding: 15px 12px; }
.tournament-bracket .panel-title { gap: 8px; }
.tournament-bracket .panel-title h2 { font-size: 18px; }
.bracket-scroll { overflow-x: auto; padding: 0 2px 10px; scrollbar-color: #829b73 #dce3c9; }
.tournament-bracket .bracket-grid { width: 568px; grid-template-columns: repeat(3, 168px); gap: 32px; }
.tournament-bracket .bracket-round { --branch: 60px; }
.tournament-bracket .bracket-round:nth-child(2) { --branch: 120px; }
.tournament-bracket .bracket-round h3 { margin: 7px 0 10px; font-size: 12px; }
.bracket-matches { display: grid; grid-template-rows: repeat(8, 60px); align-items: center; }
.tournament-bracket .bracket-pair { position: relative; grid-row: span 2; margin: 0; padding: 8px; min-height: 100px; border-radius: 9px; box-shadow: 0 1px 0 #ffffec inset, 0 3px 0 #b4c09b; font-size: 11px; }
.tournament-bracket .bracket-round:nth-child(2) .bracket-pair { grid-row: span 4; }
.tournament-bracket .bracket-round:nth-child(3) .bracket-pair { grid-row: span 8; }
.tournament-bracket .bracket-pair header { color: #718369; font-size: 9px; margin-bottom: 3px; }
.tournament-bracket .bracket-pair header { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.tournament-bracket .bracket-replay { min-height: 24px; padding: 2px 7px; border-radius: 6px; font-size: 10px; box-shadow: none; }
.tournament-bracket .bracket-action { margin-top: 5px; }
.tournament-bracket .bracket-action .button { width: 100%; min-height: 26px; padding: 3px 7px; border-radius: 6px; font-size: 11px; box-shadow: none; }
.tournament-bracket .bracket-player { gap: 3px; }
.tournament-bracket .bracket-player.winner { font-weight: 800; }
.tournament-bracket .bracket-pair.is-own { background: linear-gradient(135deg, #fff2c1, #e7d7a2); border-color: #bba162; box-shadow: 0 1px 0 #fffbe5 inset, 0 3px 0 #b09b65; }
.tournament-bracket .bracket-round:not(:last-child) .bracket-pair::after { content: ''; position: absolute; right: -17px; top: 50%; width: 16px; height: var(--branch); border-top: 1px solid #91a27e; border-right: 1px solid #91a27e; pointer-events: none; }
.tournament-bracket .bracket-round:not(:last-child) .bracket-pair:nth-child(even)::after { top: calc(50% - var(--branch)); border-top: 0; border-bottom: 1px solid #91a27e; }
.tournament-bracket .bracket-round:not(:first-child) .bracket-pair::before { content: ''; position: absolute; left: -17px; top: 50%; width: 16px; border-top: 1px solid #91a27e; pointer-events: none; }

.quality-white { --gear-quality: #8a968d; }
.quality-green { --gear-quality: #408256; }
.quality-blue { --gear-quality: #397cac; }
.quality-purple { --gear-quality: #ad8518; }
.quality-orange { --gear-quality: #92713a; }
.equipment-card[class*="quality-"], .equipment-slot[class*="quality-"] { border-color: var(--gear-quality); }
.equipment-card[class*="quality-"] { border-left: 3px solid var(--gear-quality); }
.equipment-card[class*="quality-"] h3, .equipment-slot[class*="quality-"] strong, .quality-badge { color: var(--gear-quality); }
.equipment-special { color: #985916; border-top: 1px solid #c48a3d55; padding-top: 6px; }
.equipment-special small { display: block; margin-top: 3px; font-size: 10px; }
.equipment-filters { display: flex; gap: 8px; margin: 12px 0; }
.equipment-filters select { flex: 1; min-width: 0; padding: 8px; border: 1px solid #a4b19a; border-radius: 8px; background: #f3efdc; color: #36523e; }
.equipment-passive { color: #577947; }
.equipment-passive small { display: block; font-size: 10px; }
.equipment-set-label { color: #287d47; font-weight: 700; }
.equipment-set-label small { display: block; margin-top: 4px; font-size: 10px; font-weight: 400; line-height: 1.5; }
.equipment-set-progress article { padding: 10px 0; border-bottom: 1px solid #8aab7e44; }
.equipment-set-progress h3 { color: #287d47; margin: 0 0 5px; font-size: 14px; }
.equipment-set-progress ul { list-style: none; padding: 0; line-height: 1.8; font-size: 11px; color: #919786; }
.equipment-set-progress .set-active { color: #287d47; font-weight: 700; }
.immersive-arena .arena-player { height: auto; min-height: 49px; }
.immersive-arena .arena-player > div { padding-block: 4px; }
.immersive-arena .arena-help { position: absolute; bottom: 62px; left: 8px; right: 8px; z-index: 7; pointer-events: none; }
.immersive-arena .arena-help:not(:empty) { background: #122d28dc; padding: 3px 6px; border-radius: 5px; max-height: none; font-size: 10px; }

.equipment-roller { margin-top: 14px; }
.roller-controls { display: flex; gap: 8px; margin: 10px 0; }
.roller-controls select { flex: 1; min-width: 0; padding: 8px; border: 1px solid #a4b19a; border-radius: 8px; background: #f3efdc; color: #36523e; }
.roller-demo { background: #f7f4e4; border: 1px solid #d8d2ae; border-radius: 9px; padding: 10px 12px; }
.roller-demo > p:first-child { margin: 0 0 8px; }
.roller-demo > p:first-child small { display: block; color: #8a9168; font-size: 10px; margin-top: 2px; }
.roller-result { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.roller-result li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; font-size: 12px; padding: 5px 8px; border-radius: 7px; background: #fffdf1; border: 1px solid #e4dfc0; }
.roller-result li b { color: #36523e; }
.roller-result li small { color: #8a9168; font-size: 10px; }
.roller-result li span { color: #985916; font-weight: 800; }
.roller-prefix { border-left: 3px solid #397cac; }
.roller-suffix { border-left: 3px solid #8b5ca8; }
.compact-details { min-width: 0; margin: 6px 0; color: #677669; font-size: 12px; }
.compact-details > summary { padding: 7px 0; cursor: pointer; }
.compact-details > p { margin: 4px 0 8px; line-height: 1.6; }
.task-conditions { margin: 10px 0; color: #677669; font-size: 12px; line-height: 1.6; }
.task-conditions p { margin: 4px 0; }
.task-footer > .button { margin-left: auto; flex-shrink: 0; }
.shop-categories select { flex: 1; min-width: 0; padding: 8px; border: 1px solid #a4b19a; border-radius: 8px; background: #f3efdc; color: #36523e; }
.player-manage { flex-shrink: 0; margin-left: auto; }
.content[data-page="players"] { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; align-content: start; }
.player-roster,.player-create { min-width: 0; }
.roster-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.player-roster .roster-heading h2 { margin: 0; }
.roster-heading>.button { flex-shrink: 0; }
.player-roster h2,.player-create h2 { margin: 0 0 14px; font-size: 20px; }
.player-roster h2 small { font-size: 12px; font-weight: 400; color: #6e7966; }
.player-roster-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(155px,1fr)); gap: 14px; }
.roster-player { --race-color:#9a6540; --race-wash:#edddc3; display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 14px; border: 1px solid #afb89f; border-radius: 18px; background: linear-gradient(155deg,#fffdf0,#eae7d1); box-shadow: 0 5px 0 #64775529,0 8px 18px #475c3510; }
.roster-player.type-penhold, .roster-type.type-penhold { --race-color:#43816d; --race-wash:#d1e5d5; }
.roster-player.type-chopper, .roster-type.type-chopper { --race-color:#4f7896; --race-wash:#d7e4eb; }
.roster-player.active { border: 2px solid #4f8062; padding: 13px; box-shadow: 0 5px 0 #52764e35,0 0 0 3px #dce8c861; }
.roster-card-top { display: flex; justify-content: space-between; align-items: center; gap: 5px; }
.roster-type { color: var(--race-color, #9a6540); background: var(--race-wash, #edddc3); padding: 4px 9px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.roster-level { font-size: 12px; color: #6e7966; font-weight: 700; }
.roster-portrait { display: grid; place-items: center; width: 108px; height: 108px; max-width: 100%; margin: 16px auto 12px; border-radius: 50%; background: var(--race-wash); box-shadow: 0 0 0 5px #fff8,0 5px 12px #4e653323; }
.roster-portrait .character-art { width: 100%; height: 100%; object-fit: contain; }
.roster-player h3 { margin: 0 0 8px; text-align: center; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.roster-record { display: flex; justify-content: center; gap: 10px; color: #7b836e; font-size: 11px; margin: auto 0 16px; }
.roster-player>.button { width: 100%; margin-top: 0; }
.roster-player.active h3 { color: #3f784e; }
.roster-empty { grid-column: 1/-1; text-align: center; padding: 70px 20px; border: 1px dashed #a4b195; border-radius: 18px; color: #78836a; }
#player-create-dialog { position: fixed; inset: 0; margin: auto; transform: none; width: min(430px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); box-sizing: border-box; padding: 22px; background: linear-gradient(145deg,#fffdf0,#eee9d5); }
#player-create-dialog .dialog-header { align-items: center; margin-bottom: 16px; }
#player-create-dialog .dialog-header h2 { margin: 0; font-size: 20px; }
#player-create-dialog .icon-button { min-width: 34px; min-height: 34px; color: #31594d; }
.player-create .name-input { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #a4b19a; border-radius: 8px; background: #f3efdc; color: #36523e; font: inherit; }
.player-type-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; border: 0; padding: 0; margin: 18px 0 12px; }
.player-type-options legend { margin-bottom: 10px; font-size: 13px; color: #61715d; }
.player-portrait-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; border:0; padding:0; margin:14px 0; min-width:0; }
.player-portrait-options legend { margin-bottom:8px; font-size:13px; color:#61715d; }
.player-portrait-option { position:relative; display:block; cursor:pointer; min-width:0; }
.player-portrait-option input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.player-portrait-option .athlete-portrait { display:block; width:100%; aspect-ratio:1; box-sizing:border-box; border:2px solid transparent; background-clip:padding-box; }
.player-portrait-option input:checked + .athlete-portrait { border-color:#34745c; box-shadow:0 0 0 2px #34745c55; }
.player-portrait-option input:focus-visible + .athlete-portrait { outline:2px solid #a87c28; outline-offset:3px; }
.player-gender-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.player-type-option { position: relative; min-width: 0; display: grid; gap: 7px; padding: 13px 4px; border: 1px solid #aab69e; border-radius: 10px; text-align: center; cursor: pointer; background: #f4f0df; }
.player-type-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.player-type-option.selected { background: #e1ecd9; border-color: #568250; box-shadow: inset 0 0 0 1px #568250; }
.player-type-option:focus-within { outline: 2px solid #528147; outline-offset: 3px; }
.player-type-option strong { font-size: 18px; }
.player-type-option small { color: #6b795f; font-size: 11px; white-space: nowrap; }
.player-growth-preview { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 20px; margin: 18px 0; }
.player-growth-preview>div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.player-growth-preview dt { font-size: 13px; }
.player-growth-preview dd { margin: 0; font-weight: 700; }
.player-growth-preview small { display: block; margin-top: 3px; color: #7b856a; font-size: 11px; font-weight: 400; }
.player-create>.button { width: 100%; }
@media(max-width:450px){.player-manage{padding:7px 9px;font-size:11px;}.player-roster-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.roster-player{padding:12px;}.roster-player.active{padding:11px;}.roster-heading>.button{font-size:12px;padding:9px 12px;}#player-create-dialog{padding:18px;}}

/* Shared resource summary stays visible while page content scrolls. */
.career-resources { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 16px; min-height: 34px; border-bottom: 1px solid #b4c0a5; background: #e8edd9; color: #3e5945; font-size: 12px; }
.career-resources[hidden] { display: none; }
.career-resources > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.career-resources strong { color: #2d4434; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.career-resources .coin-mark { flex-shrink: 0; }
.resource-energy svg { width: 13px; height: 17px; flex-shrink: 0; fill: #81994e; stroke: #567035; stroke-width: 1; }
.resource-energy strong { white-space: nowrap; }

/* Native hosts reserve system bars and keyboard insets; fill their WebView. */
html:is(.android-app, .ios-app) { width: 100%; height: 100%; }
html:is(.android-app, .ios-app) body { display: block; width: 100%; min-width: 0; height: 100vh; height: 100dvh; }
html:is(.android-app, .ios-app) .app-shell { width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
html:is(.android-app, .ios-app) #profile-detail-dialog { width: min(430px, calc(100vw - 24px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
html:is(.android-app, .ios-app) .toast { bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }