/* Tactile cartoon clubhouse. Court controls retain their own positioning. */
:root {
  --club-ink: #153e36;
  --club-muted: #68766e;
  --club-paper: #f8faf8;
  --club-surface: #ffffff;
  --club-line: #c6d2c9;
  --club-green: #32866b;
  --club-gold: #ffd66b;
  --club-texture: url("assets/cartoon-v1/club-paper-white-v2.png");
  --muted: var(--club-muted);
  font-family: var(--game-body-font);
  color: var(--club-ink);
}
html { background: #1c493d; }
body { font-family: var(--game-body-font); background-color: #315e4a; background-image: repeating-linear-gradient(0deg,#183e261a 0 2px,transparent 2px 6px),var(--club-texture); background-size: auto,560px; background-blend-mode: multiply,multiply; }
.app-shell { border: 3px solid #193f32; border-radius: 28px; background: var(--club-paper); box-shadow: 0 8px 0 #102f27,0 28px 65px #062d3670; }
.topbar { background-color: #235747; background-image: linear-gradient(#2e705340,#12453340),var(--club-texture); background-size: auto,550px; background-blend-mode: normal,multiply; }
.topbar { border: 0; box-shadow: inset 0 2px #ffffff24; padding-inline: 14px; }
.game-badge { color: #fff2bf; letter-spacing: .2px; font-family: var(--game-display-font); }
.game-badge strong { font-family: var(--game-display-font); font-size: 16px; line-height: 1.05; text-shadow: 0 2px #102f27; }
.game-badge > img { width: 39px; height: 39px; filter: drop-shadow(0 2px 1px #08281980); }
.topbar-login-name { color: #f8e8bb; font-weight: 600; }
.topbar .language-control.language-icon, .topbar-exit { color: #fff3c7; border: 2px solid #163c30; background: linear-gradient(#548b68,#36694e); border-radius: 14px; box-shadow: inset 0 2px #ffffff29,0 3px #143a2d; }
.topbar .language-icon:hover, .topbar-exit:hover { background: #588565; }
.topbar .language-icon:focus-within, .topbar-exit:focus-visible { outline-color: var(--club-gold); }
.career-resources { padding: 8px 14px 11px; min-height: 46px; border: 0; border-bottom: 3px solid #c8d8d9; gap: 8px; background: linear-gradient(#edf5f7cc,#f5fafbd9),var(--club-texture) 0 0 / 550px; box-shadow: inset 0 1px #ffffff,0 2px #ffffff; }
.career-resources > span { border: 1px solid #bdced0; background: linear-gradient(#ffffff,#f8fbfb); padding: 5px 9px; border-radius: 10px; color: #536e70; font-size: 12px; gap: 5px; box-shadow: inset 0 1px #ffffff,0 2px #b9cbcc; }
.career-resources strong { color: #244b50; font-size: 14px; }
.career-resources .resource-coins strong { color: #88601f; }
.career-resources .resource-energy { border-color: #b8cfbe; background: linear-gradient(#fcfffc,#edf6ee); color: #496e51; box-shadow: inset 0 1px #ffffff,0 2px #adc4b2; }
.career-resources .resource-energy strong { color: #306140; }
.resource-energy svg { fill: #7cba62; stroke: #4b8142; stroke-width: 1; }
.content:not(.has-arena):not([data-page="welcome"]) { background: var(--club-paper) var(--club-texture) repeat 0 0 / 510px; padding: 17px 16px 28px; scrollbar-color: #b4a273 transparent; }
.content:not(.has-arena) :is(h1,h2,h3), .club-section-heading, .button, .nav-button, .training-tile b, .training-tile strong, dialog h2 { font-family: var(--game-display-font); letter-spacing: 0; }
html[lang="zh-CN"] .content:not(.has-arena) :is(h1,h2,h3), html[lang="zh-CN"] :is(.button,.nav-button,.game-badge strong) { font-weight: 400; }
.content:not(.has-arena) h2 { font-weight: 800; }
.content:not(.has-arena) .button, dialog .button { min-height: 43px; border-radius: 14px; font-size: 14px; font-weight: 800; line-height: 1.25; text-shadow: 0 1px #ffffff50; transition: transform .16s ease,box-shadow .16s ease; }
.content:not(.has-arena) .button.primary, dialog .button.primary { background: linear-gradient(#69bb83,#358e67); color: #fffce8; border: 2px solid #28634a; box-shadow: inset 0 2px #c7f2bda8,0 3px #20513b,0 5px 6px #3b522d26; text-shadow: 0 1px #246247; }
.content:not(.has-arena) .button.secondary, dialog .button.secondary { background: linear-gradient(#ffefba,#f4d584); color: #705028; border: 2px solid #bb9553; box-shadow: inset 0 2px #fff9da,0 3px #98723c; }
.content:not(.has-arena) .button:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 1px #ffffff50; }
.content:not(.has-arena) .button:disabled { opacity: 1; color: #938669; background: linear-gradient(#ebe6d3,#ded7be); border: 2px solid #c4b999; box-shadow: inset 0 1px #fff7df,0 2px #b5a986; filter: none; text-shadow: none; }
.content:not(.has-arena) :is(.button,.training-tile):focus-visible { outline: 3px solid #d47828; outline-offset: 4px; }
.game-logo-banner, .page-hero { border: 3px solid #6d532d; border-radius: 21px; margin-bottom: 19px; box-shadow: 0 4px #bea372,0 8px 14px #70542026; background: #153e36; }
.game-logo-banner::after, .page-hero::after { inset: 4px; border: 1px solid #fff0b680; border-radius: 14px; }
.page-hero-art { aspect-ratio: 2.5 / 1; object-position: 50% 38%; }
.page-hero-caption { padding: 26px 15px 12px; background: linear-gradient(transparent,#092b25e8); }
.page-hero-caption h1 { font-size: 29px; font-weight: 800; color: #fff4c5; letter-spacing: .3px; text-shadow: 0 2px #254435,1px 0 #254435; }
.page-hero-caption::after { content: '✦'; color: #ffdc7c; font-size: 26px; line-height: 1; text-shadow: 0 2px #79622c; }
.club-section-heading { margin: 20px 0 12px; gap: 8px; }
.club-section-heading h2 { color: #5f492b; font-size: 20px; font-weight: 800; }
.club-section-heading > span { font-family: var(--game-body-font); font-size: 12px; color: #84704a; }
.content:not(.has-arena) :is(.player-card,.profile-section,.task-card,.item-card,.skill-card,.training-overview,.player-records,.roster-player) { background: linear-gradient(#ffffffd9,#fbfdfbe6),var(--club-texture) 20% 30% / 440px; border: 2px solid var(--club-line); border-radius: 20px 17px 20px 17px; box-shadow: inset 0 2px #ffffff,0 3px #c4cec6,0 6px 11px #33544316; }
.player-card::before, .training-overview::before { display: none; }
.player-card { padding: 18px 16px; }
.profile-header { gap: 12px; }
.profile-header .avatar { width: 58px; height: 58px; border: 2px solid #ae7c3e; border-radius: 18px; padding: 3px; background: linear-gradient(#ffeaa6,#e5b660); box-shadow: inset 0 2px #fff5c4,0 3px #ae7c3e; transform: rotate(-3deg); }
.profile-header .avatar .character-art { border-radius: 12px; }
.profile-name h2 { color: #275944; font-size: 23px; letter-spacing: -.3px; }
.profile-name small { color: #797048; font-weight: 700; font-size: 12px; }
.profile-card .roster-type, .roster-type { border-radius: 8px; }
.content .player-manage { min-height: 39px; }
.vital-grid { gap: 16px; margin-top: 17px; }
.content:not(.has-arena) .meter { height: 11px; border: 1px solid #a99d72; box-shadow: inset 0 2px 2px #73633433; background: #e5d9b2; border-radius: 8px; }
.content:not(.has-arena) .meter > span { border: 0; box-shadow: inset 0 2px #aee8bd; background: linear-gradient(#6bbd87,#398d64); border-radius: 7px; }
.content:not(.has-arena) .energy-meter > span { background: linear-gradient(#c0db68,#84ab46); box-shadow: inset 0 2px #e2f397; }
.meter-label { font-size: 12px; color: #786846; }
.profile-records { margin-top: 17px; border-top: 1px dashed #c8b47f; border-bottom: 1px dashed #c8b47f; padding-block: 12px; }
.profile-records dt { color: #897349; font-size: 11px; }
.profile-records dd { color: #32644b; font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; }
.profile-records > div:last-child dd { color: #b87826; }
.journal-carousel { border: 1px dashed #b8c9bc; border-radius: 13px; background: #f0f5f0; box-shadow: inset 0 2px 4px #78918112; padding: 12px 14px; }
.journal-carousel-heading { color: #8b673a; }
.journal-message { color: #586341; }
.journal-time { color: #9a8153; }
.shop-categories { margin: 17px 0; padding: 5px; gap: 4px; border: 2px solid #bdcdc0; background: #eef4ee var(--club-texture) 50% 0 / 480px; background-blend-mode: multiply; border-radius: 17px; box-shadow: inset 0 2px 4px #46675116,0 1px #ffffff; }
.content:not(.has-arena) .shop-categories .button { min-height: 40px; padding: 8px 3px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #63766a; box-shadow: none; white-space: nowrap; font-size: 14px; }
.content:not(.has-arena) .shop-categories .button[aria-pressed="true"] { background: linear-gradient(#ffffff,#f5faf4); border: 1px solid #a7c0ac; color: #315c44; box-shadow: inset 0 2px #ffffff,0 2px #9fb3a3; }
.shop-categories select { min-height: 40px; background: #fcfefb; color: #476752; border: 1px solid #b8ccbc; border-radius: 10px; font-family: var(--game-body-font); font-size: 13px; }
.shop-match-notice { display: flex; align-items: center; gap: 9px; padding: 11px 12px; margin: 14px 0; border: 2px solid #d4ad5f; border-radius: 15px; background: #ffefbe; color: #79591e; }
.shop-match-notice > .icon { width: 18px; height: 18px; }
.shop-match-notice > span { flex: 1; min-width: 0; font-size: 12px; line-height: 1.5; }
.content .shop-match-notice .button { flex-shrink: 0; font-size: 12px; min-height: 36px; padding: 7px 9px; }
.item-list { display: grid; gap: 15px; }
.content .shop-item-card { padding: 15px; margin: 0; }
.shop-item-card .task-heading { justify-content: start; gap: 12px; margin-bottom: 10px; }
.shop-item-card .task-heading h3 { flex: 1; font-size: 18px; line-height: 1.2; color: #3d5d41; }
.supply-art { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 53px; border: 2px solid #a6bc7c; border-radius: 17px 14px 17px 14px; color: #288575; background: radial-gradient(at 35% 20%,#f4ffd8,#d7e8ac); box-shadow: inset 0 2px #fff9d6,0 3px #9eaf70; transform: rotate(-4deg); }
.supply-art .icon { width: 37px; height: 37px; stroke-width: 1.5; filter: drop-shadow(0 2px 0 #82652930); transform: rotate(4deg); }
[data-item="ticket"] .supply-art { border-color: #d1aa66; background: radial-gradient(at 35% 20%,#fff5bd,#f4d38b); box-shadow: inset 0 2px #fff9d6,0 3px #c69c57; }
[data-item="focus"] .supply-art { border-color: #a9a3c6; background: radial-gradient(at 35% 20%,#fbebff,#d9caed); box-shadow: inset 0 2px #ffefff,0 3px #a199bc; }
[data-item="tonic"] .supply-art { border-color: #d8a07a; background: radial-gradient(at 35% 20%,#fff0c8,#f7c19a); box-shadow: inset 0 2px #fff6d9,0 3px #c58c66; }
.owned-count { font-size: 13px; font-weight: 700; color: #8c784a; font-variant-numeric: tabular-nums; }
.shop-item-description { font-size: 14px; line-height: 1.55; color: #7f7153; }
.shop-item-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #d8c79b; }
.shop-item-footer > small { font-size: 11px; color: #9b855b; }
.shop-item-footer .button { min-width: 124px; padding-inline: 13px; }
.restock-time { font-variant-numeric: tabular-nums; background: #eaf1e9; padding: 5px 8px; border-radius: 8px; }
.equipment-shop-list { display: grid; gap: 15px; }
.content .equipment-card { padding: 16px; border-left-width: 4px; }
.equipment-shop-list .equipment-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; }
.shop-gear-heading { display: flex; align-items: center; gap: 10px; }
.shop-gear-art { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; border: 2px solid #c8b77f; color: var(--gear-quality,#567060); background: radial-gradient(at 35% 20%,#fffbe8,#ebdcad); box-shadow: inset 0 2px #fffdf2,0 3px #bca875; transform: rotate(-4deg); }
.shop-gear-art .icon { width: 34px; height: 34px; transform: rotate(4deg); }
.shop-gear-slot { margin-left: auto; color: #8f8059; font-size: 12px; }
.shop-gear-heading .quality-badge { background: transparent; border: 0; font-size: 12px; padding: 0; }
.equipment-card-copy h3 { margin-bottom: 7px; font-size: 19px; line-height: 1.3; }
.equipment-card-copy .equipment-stat-list { gap: 5px 12px; font-size: 12px; }
.equipment-card .equipment-actions { margin-top: 4px; padding-top: 12px; border-top: 1px dashed #d8c79b; }
.equipment-card.is-sold { background: #edf1ed; }
.equipment-card.is-sold .shop-gear-art { opacity: .6; }
.equipment-room { border: 3px solid #957041; border-radius: 18px; box-shadow: inset 0 0 20px #061c2677,0 3px #b6a079; background: radial-gradient(ellipse at 50% 40%,#528e5a55,transparent 70%),var(--club-texture) 0 0 / 520px,#24533d; background-blend-mode: normal,multiply,normal; }
.equipment-slot { border-radius: 12px; box-shadow: inset 0 2px #ffffff22,0 2px #163623; }
.training-pad { gap: 15px; }
.content .training-pad .training-tile { padding: 15px; min-height: 112px; grid-template-columns: 60px minmax(0,1fr); gap: 5px 13px; border: 2px solid #c6d2c9; background: linear-gradient(#ffffffd9,#fbfdfbe6),var(--club-texture) 0 0 / 480px; border-radius: 19px; box-shadow: inset 0 2px #ffffff,0 3px #c4cec6,0 5px 8px #33544316; }
.content .training-pad .training-tile .training-art { width: 60px; height: 64px; padding: 3px; border: 1px solid #d7b66c; border-radius: 17px; box-shadow: inset 0 2px #fff4cb,0 3px #c2a261; transform: rotate(-4deg); filter: none; background: linear-gradient(#fff2bf,#e9cf83); }
.content .training-pad .training-tile:nth-child(2) .training-art { background: linear-gradient(#f4e5fa,#cab7e3); border-color: #b6a3ce; box-shadow: inset 0 2px #fff0ff,0 3px #ab98c2; }
.content .training-pad .training-tile:nth-child(3) .training-art { background: linear-gradient(#e2f5d3,#b3d6ac); border-color: #9eba91; box-shadow: inset 0 2px #f3ffde,0 3px #8ea57f; }
.content .training-pad .training-tile:nth-child(4) .training-art { background: linear-gradient(#e3f5fc,#aacbd9); border-color: #9bb5c3; box-shadow: inset 0 2px #f3fcff,0 3px #8cabb9; }
.training-pad .training-tile strong { color: #3c8763; text-shadow: 0 1px #ffffee; font-size: 14px; }
.training-pad .training-tile small { color: #8c7953; }
.training-pad .training-tile:disabled { opacity: .65; }
.skill-card .ultimate-emblem { border-radius: 15px; box-shadow: inset 0 2px #ffffff55,0 3px #b89455; }
.content .task-card { margin-bottom: 15px; padding: 16px; }
.content .task-card .task-heading h3 { font-size: 18px; }
.content .task-card .coin-reward { border: 1px solid #d3a64c; border-radius: 10px; background: linear-gradient(#ffedab,#f3d174); color: #8b6025; box-shadow: inset 0 2px #fff7d1,0 2px #c7a052; padding: 5px 8px; }
.content .task-card.claimed { background: #edf2ed; }
.content:not(.has-arena) .task-card.daily-ad-task { color: #fff0ba; border: 2px solid #285d44; background: linear-gradient(110deg,#346f5590,#1e594080),var(--club-texture) 40% 40% / 450px,#397751; background-blend-mode: normal,multiply,normal; box-shadow: inset 0 2px #8bb38670,0 3px #244c38,0 6px 9px #46633b33; }
.daily-ad-task .task-heading h3 { color: #fff2b5; }
.daily-ad-task p { font-size: 13px; color: #dde9c3; }
.content .daily-ad-task .coin-reward { color: #ffe8a0; border-color: #7e9654; background: #214e34a8; box-shadow: inset 0 2px #174129; }
.content .daily-ad-task .button.primary:not(:disabled) { background: linear-gradient(#ffe99b,#f3bf51); color: #704b23; border-color: #aa7c30; box-shadow: inset 0 2px #fff7c5,0 3px #8b622d; text-shadow: 0 1px #fff1b7; }
.content .daily-ad-task .task-footer { justify-content: stretch; }
.daily-ad-task .task-footer .button { width: 100%; }
.event-list { gap: 17px; }
.event-row { border: 2px solid #c6d2c9; background: #fdfefc; box-shadow: inset 0 2px #ffffff,0 3px #c4cec6; border-radius: 20px 17px 20px 17px; padding: 7px; }
.event-illustration { border-radius: 12px; overflow: hidden; }
.event-name { padding: 6px 3px; }
.event-name h2 { color: #37573d; }
.event-name small { color: #8c7953; line-height: 1.6; }
.event-row.locked { opacity: 1; }
.event-row.locked .event-illustration img { filter: saturate(.55); }
.event-number { color: #fff1b2; background: linear-gradient(#598665,#2e6044); border: 2px solid #bda060; border-radius: 10px; box-shadow: inset 0 2px #c4d5a13d,0 2px #244331; }
.event-detail-hint { background: #214e37e8; color: #fff1b8; }
.tournament-summary { border: 2px solid #c0d0c1; background: #eef5ed; border-radius: 17px; box-shadow: 0 3px #becdbf; }
.tournament-summary h2 { color: #52673b; }
.bracket-pair, .tournament-bracket { box-shadow: none; }
.content .quiet-note { color: #687a6b; background: #f0f5f0; border: 1px dashed #bacbbb; padding: 14px; border-radius: 13px; font-size: 13px; }
.navigation { height: calc(87px + env(safe-area-inset-bottom,0px)); align-items: center; padding: 8px 10px calc(9px + env(safe-area-inset-bottom,0px)); gap: 7px; border-top: 3px solid #bdcdbf; background: #fcfefb var(--club-texture) 50% 70% / 540px; background-blend-mode: multiply; box-shadow: inset 0 2px #ffffff,0 -5px 16px #33544316; }
.main-shell { padding-bottom: calc(87px + env(safe-area-inset-bottom,0px)); }
.nav-button { height: 59px; gap: 1px; border: 1px solid transparent; border-radius: 15px; box-shadow: none; text-shadow: 0 1px #ffffff; background: transparent; color: #687a66; font-size: 13px; }
.nav-button .nav-art { width: 33px; height: 32px; filter: drop-shadow(0 2px 0 #8e69233b); }
.nav-button .nav-symbol .icon { width: 29px; height: 29px; }
.nav-button[aria-current="page"] { background: linear-gradient(#f7fff4,#dcecd7); border: 1px solid #a6bea1; color: #3d633b; box-shadow: inset 0 2px #ffffff,0 3px #92aa8f; text-shadow: 0 1px #ffffff; transform: none; }
.nav-button[aria-current="page"] .nav-art { transform: translateY(-2px) rotate(-7deg) scale(1.06); filter: drop-shadow(0 3px 1px #94702540); }
.nav-button[aria-current="page"]::after { display: none; }
.navigation .nav-button[data-value="events"] { height: 68px; border: 2px solid #a8792e; border-radius: 19px; background: linear-gradient(#ffe799,#f3bd4a); color: #77501f; box-shadow: inset 0 3px #fff5c6,0 4px #996e30; font-size: 16px; text-shadow: 0 1px #fff1b8; }
.navigation .nav-button[data-value="events"] .nav-art { width: 36px; height: 34px; filter: drop-shadow(0 2px 0 #a37d3c40); }
.navigation .nav-button[data-value="events"][aria-current="page"] { background: linear-gradient(#ffd880,#edaf35); color: #67431d; box-shadow: inset 0 3px #ffefa7,0 3px #8f642c; border-color: #a8792e; text-shadow: 0 1px #fff1b8; }
.navigation .nav-button[data-value="events"]::after { display: none; }
.toast { border: 2px solid #a2b277; border-radius: 16px; background: #204a39f5; color: #fff1c7; box-shadow: 0 3px #143529,0 7px 18px #12372640; bottom: calc(103px + env(safe-area-inset-bottom,0px)); }
dialog { font-family: var(--game-body-font); border: 3px solid #b6c9ba; border-radius: 24px; background: #fdfefc var(--club-texture) 0 0 / 530px; box-shadow: inset 0 2px #ffffff,0 5px #8fa796,0 20px 60px #062b3555; }
dialog::backdrop { background: #123e35a3; }
html[lang="en"] .nav-button { font-size: 12px; }
html[lang="en"] .content:not(.has-arena) .shop-category-tabs .button { font-size: 13px; white-space: nowrap; }
html[lang="en"] .content:not(.has-arena) .task-categories .button { font-size: 12px; padding-inline: 1px; }
@media (max-width: 600px) { .app-shell { width: 100%; height: 100vh; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; } }
@container game (max-width: 350px) {
  .content:not(.has-arena):not([data-page="welcome"]) { padding-inline: 12px; }
  .topbar { padding-inline: 10px; }
  .game-badge strong { font-size: 14px; }
  .career-resources { padding-inline: 10px; }
  .career-resources > span { padding-inline: 6px; font-size: 11px; }
  .content .shop-match-notice { gap: 6px; padding: 9px; }
  .shop-match-notice > .icon { display: none; }
  .shop-match-notice > span { font-size: 11px; }
  .shop-item-card .task-heading { gap: 9px; }
  .content .shop-item-card .task-heading h3 { font-size: 17px; }
  .navigation { padding-inline: 7px; gap: 4px; }
  html[lang="en"] .nav-button { font-size: 11px; }
  html[lang="en"] .content:not(.has-arena) .shop-category-tabs .button { font-size: 12px; }
  html[lang="en"] .content:not(.has-arena) .task-categories .button { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .content:not(.has-arena) .button, .nav-button .nav-art { transition: none; } }