html { height: 100%; background: #080d0a; }
body { min-height: 0; height: 100vh; height: 100dvh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 20%, #263629, #080d0a 70%); }
.app-shell { position: relative; display: block; width: min(100vw, 56.25vh, 480px); width: min(100vw, 56.25dvh, 480px); height: min(100vh, 177.7778vw, 853.3333px); height: min(100dvh, 177.7778vw, 853.3333px); min-height: 0; overflow: hidden; background: #101411; box-shadow: 0 28px 100px #0008; border: 1px solid #34412f; border-radius: 22px; }
.sidebar { display: contents; position: static; height: auto; padding: 0; border: 0; }
.brand, .sidebar-caption, .sidebar-bottom, .breadcrumb, .page-footer { display: none; }
.game-badge { position: absolute; left: 13px; top: calc(9px + env(safe-area-inset-top, 0px)); z-index: 6; display: flex; align-items: center; gap: 8px; min-height: 36px; color: var(--accent); font-size: 13px; }
.game-badge > span { font-size: 20px; }
.navigation { position: absolute; inset: auto 0 0; height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 6px 8px max(6px, env(safe-area-inset-bottom, 0px)); z-index: 8; display: flex; gap: 4px; justify-content: space-around; background: #162018f5; border-top: 1px solid #34432f; backdrop-filter: blur(12px); }
.nav-button { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 5px 0; border-radius: 10px; font-size: 10px; }
.nav-button .icon { width: 19px; height: 19px; }
.nav-button[aria-current="page"]::after { display: none; }
.main-shell { display: flex; flex-direction: column; height: 100%; width: 100%; min-width: 0; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.topbar { height: calc(54px + env(safe-area-inset-top, 0px)); min-height: calc(54px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 13px 0 124px; justify-content: flex-end; gap: 6px; }
.topbar-actions { width: 100%; gap: 8px; justify-content: flex-end; }
.day-chip { font-size: 10px; white-space: nowrap; }
#quick-rest { display: none; }
.mobile-storage { display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; }
.content { flex: 1; min-height: 0; width: 100%; max-width: none; padding: 22px 16px; margin: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #4e6240 transparent; -webkit-overflow-scrolling: touch; }
.content.has-arena { padding: 8px 10px; display: flex; flex-direction: column; overflow: hidden; }
.page-heading { align-items: flex-start; margin-bottom: 19px; gap: 10px; }
.page-heading h1 { font-size: 25px; letter-spacing: -1px; }
.page-heading p { font-size: 11px; margin-top: 7px; }
.page-heading .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
.page-heading > .badge { align-self: center; }
.button { font-size: 12px; min-height: 44px; padding: 11px 16px; }
.button.small { min-height: 38px; font-size: 11px; padding: 8px 12px; }
.panel { padding: 20px; border-radius: 14px; }
.panel-title { margin-bottom: 18px; }
.overview-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
.hero { min-height: 220px; padding: 24px; }
.hero-copy { max-width: 80%; }
.hero h2 { font-size: 26px; }
.hero p { font-size: 11px; margin-bottom: 18px; }
.hero-art { width: 245px; right: -30px; opacity: .58; }
.mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 15px 0; }
.metric { padding: 16px; }
.metric-label { font-size: 10px; }
.metric > strong { font-size: 24px; }
.metric > small { font-size: 9px; }
.profile-header h2 { font-size: 16px; }
.profile-header .avatar { width: 42px; height: 42px; font-size: 21px; }
.training-grid, .event-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.training-card { padding: 22px; }
.training-number { margin-bottom: 14px; }
.training-card p { margin-bottom: 19px; font-size: 11px; }
.training-value { font-size: 27px; top: 22px; }
.rest-panel { flex-wrap: wrap; gap: 12px; }
.rest-panel > .icon { display: none; }
.rest-panel .button { margin-left: 0; }
.event-card { padding: 0; }
.event-visual { min-height: 94px; padding: 17px 21px; }
.event-body { padding: 21px; }
.event-details { gap: 10px 14px; font-size: 10px; }
.notice { padding: 14px 16px; font-size: 11px; }
.ranking-summary { gap: 20px; }
.ranking-summary > strong { font-size: 38px; }
.ranking-table th, .ranking-table td { padding-inline: 7px; font-size: 10px; }
.welcome { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 25px; padding: 3px 0 10px; }
.welcome h1 { font-size: 37px; letter-spacing: -2px; }
.welcome-copy > p { font-size: 12px; margin-top: 13px; }
.welcome-art { display: none; }
.welcome-steps { margin-top: 21px; gap: 22px; font-size: 11px; }
.setup-panel { padding: 24px; }
.setup-note { font-size: 9px; }
.match-grid { grid-template-columns: minmax(0, 1fr); }
.match-side { display: grid; grid-template-columns: 1fr; }
.match-panel { padding: 0; }
.tactic-list { grid-template-columns: 1fr 1fr; }
.score-row { grid-template-columns: minmax(64px, 1fr) 30px 40px 48px; gap: 6px; }
.bracket { padding: 15px; }
.bracket-grid { gap: 8px; }
.bracket-pair { padding: 7px; font-size: 9px; }
.bracket-pair small { font-size: 8px; }
.warning-banner { flex-shrink: 0; margin: 5px 12px 0; font-size: 10px; padding: 7px 10px; max-height: 64px; overflow: auto; }
.toast { position: fixed; left: 50%; bottom: max(80px, calc((100dvh - 853px) / 2 + 80px)); width: max-content; max-width: min(420px, calc(100vw - 32px)); font-size: 11px; padding: 12px 16px; }
dialog { max-width: 430px; width: calc(100vw - 24px); max-height: calc(100dvh - 32px); padding: 23px; }
.turn-match-title, .online-match-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; flex-shrink: 0; font-size: 11px; padding: 0 2px 7px; }
.turn-match-title small { color: var(--muted); font-size: 9px; }
#career-arena, .online-arena-slot { flex: 1; min-height: 0; }
.turn-arena { height: 100%; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid #46523a; background: #18221a; }
.arena-score { display: flex; align-items: center; justify-content: space-between; gap: 5px; flex-shrink: 0; min-height: 52px; padding: 7px 10px; background: #213124; border-bottom: 1px solid #405038; }
.arena-player { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; }
.arena-player .avatar { width: 29px; height: 32px; border-radius: 8px; font-size: 14px; }
.arena-player .away-avatar { background: #5c392c; color: #e8be9e; border-color: #916248; }
.arena-player > div { flex: 1; min-width: 0; }
.arena-player strong { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-player small { display: block; font-size: 8px; color: #a6b899; margin-top: 3px; white-space: nowrap; }
.arena-player b { font-size: 23px; color: #e5f5b3; font-variant-numeric: tabular-nums; }
.arena-player.away { text-align: right; }
.arena-versus { font-size: 9px; color: #91a37c; margin: 0 5px; }
.arena-phase { min-height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 5px 11px; background: #18231b; color: #d7e8b4; font-size: 10px; }
.arena-phase [data-clock] { color: #9eb58e; font-size: 9px; }
.arena-court { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #151e15; }
#turn-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.arena-hud { position: absolute; top: 9px; right: 8px; pointer-events: none; display: grid; gap: 4px; padding: 8px 9px; border: 1px solid #d7efb233; background: #102016de; border-radius: 8px; min-width: 91px; }
.arena-hud span { display: flex; justify-content: space-between; gap: 10px; font-size: 8px; color: #bdcba5; }
.arena-hud b { font-weight: 600; font-size: 9px; color: #eef8c1; font-variant-numeric: tabular-nums; }
.arena-hud span:nth-child(2) b { color: #f0b79b; }
.arena-bottom { flex-shrink: 0; padding: 9px 11px 7px; border-top: 1px solid #3c4d32; background: #1c2a1e; }
.arena-values { display: flex; justify-content: space-between; gap: 6px; font-size: 9px; color: #99ae89; }
.arena-values b { color: #d3e5b2; font-weight: 500; }
.arena-help { margin: 6px 0 8px; font-size: 9px; color: #b3c89f; line-height: 1.7; min-height: 30px; max-height: 45px; overflow: auto; }
.arena-commit { width: 100%; min-height: 39px; padding: 8px; font-size: 12px; }
.arena-tools { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 17px; padding-top: 5px; font-size: 8px; color: #869d78; }
.arena-tools button { background: transparent; padding: 0 4px; color: #d8ed8b; font-size: 9px; }
.arena-replay { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 7px 11px; background: #142015e8; border: 1px solid #c9e19166; border-radius: 20px; color: #e3efb7; font-size: 9px; white-space: nowrap; pointer-events: none; }
.arena-result { position: absolute; inset: 0; padding: 22px; background: #0e1a11db; backdrop-filter: blur(6px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; z-index: 2; }
.arena-result .eyebrow { font-size: 9px; margin: 0; }
.arena-result h2 { font-size: 23px; color: var(--accent); }
.arena-result p { font-size: 11px; color: #c4d5b4; }
.arena-result .button { margin-top: 7px; }
#online-root { width: 100%; }
#online-root.online-playing { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.online-match-title .text-button { padding: 0 0 4px; font-size: 10px; }
.online-intro { text-align: left; }
.online-intro > p { font-size: 11px; color: var(--muted); margin: 10px 0 22px; }
.online-intro .button { width: 100%; margin-top: 17px; }
.online-orbit { display: grid; place-items: center; width: 61px; height: 61px; background: #d8ed8b15; border: 1px solid #789b4b66; border-radius: 18px; margin-bottom: 23px; font-size: 30px; }
.online-profile { margin-bottom: 16px; }
.online-profile .profile-header { margin-bottom: 19px; }
.online-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.online-stats > span { color: #96ac8d; font-size: 10px; text-align: center; }
.online-stats b { display: block; font-size: 20px; color: #dae9bc; margin-top: 7px; font-weight: 500; }
.create-room-button { width: 100%; margin-bottom: 16px; }
.join-card { margin-bottom: 16px; }
.join-row { display: flex; align-items: center; gap: 10px; }
.join-row input { min-width: 0; letter-spacing: 3px; text-transform: uppercase; font-size: 15px; }
.join-row .button { flex-shrink: 0; }
.online-training { margin-bottom: 16px; }
.online-training h2 { font-size: 15px; }
.online-training .rules-note { margin-top: 8px; }
.online-training-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 17px; }
.online-training .text-button { min-height: 40px; margin-top: 7px; }
.online-rank-row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 12px; }
.online-rank-row b { color: var(--accent); }
.online-message { color: #dfc693; font-size: 11px; margin-top: 16px; line-height: 1.8; }
.room-code-card { text-align: center; padding: 23px; background: radial-gradient(ellipse at center, #33472a, #1a241b); }
.room-code { display: block; font-size: 36px; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 6px; margin: 16px 0; user-select: all; -webkit-user-select: all; }
.room-members { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.room-member { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 20px 10px; text-align: center; min-width: 0; }
.room-member strong { font-size: 12px; max-width: 100%; overflow-wrap: anywhere; }
.room-member small { font-size: 9px; color: var(--muted); }
.room-member .badge { font-size: 10px; }
.room-actions { display: flex; gap: 10px; margin-top: 20px; }
.room-actions .primary { flex: 1; }
@media (max-width: 500px) { .app-shell { border: 0; border-radius: 0; } }
@media (max-height: 650px) {
  .topbar { min-height: 48px; height: 48px; padding-top: 0; }
  .game-badge { top: 6px; }
  .day-chip { font-size: 9px; }
  .topbar { padding-left: 124px; }
  .navigation { height: 59px; padding-bottom: 5px; }
  .main-shell { padding-bottom: 59px; }
  .content { padding: 18px 13px; }
  .content.has-arena { padding: 6px 8px; }
  .arena-score { min-height: 47px; padding: 5px 8px; }
  .arena-player { gap: 5px; }
  .arena-player .avatar { width: 25px; height: 28px; font-size: 12px; }
  .arena-player strong { font-size: 10px; }
  .arena-player b { font-size: 20px; }
  .arena-bottom { padding: 7px 9px 5px; }
  .arena-help { font-size: 8px; min-height: 26px; max-height: 28px; margin: 5px 0 6px; }
  .arena-commit { min-height: 36px; padding: 7px; }
  .arena-hud { min-width: 85px; top: 7px; right: 6px; padding: 6px 7px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.content { padding: 24px 20px; }
.page-heading { align-items: center; margin-bottom: 24px; }
.page-heading h1 { font-size: 24px; letter-spacing: 0; }
.button { font-size: 14px; min-height: 48px; border-radius: 12px; }
.button.small { min-height: 44px; font-size: 12px; }
.text-button { min-height: 44px; font-size: 12px; }
.content input { min-height: 48px; font-size: 16px; }
.profile-header { margin-bottom: 20px; gap: 12px; }
.profile-name { flex: 1; min-width: 0; }
.profile-name h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; }
.profile-name small { display: block; color: var(--muted); font-size: 11px; margin-top: 5px; }
.vital-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vital-grid .meter-block + .meter-block { margin: 0; }
.vital-grid .meter-label { font-size: 10px; gap: 5px; }
.vital-grid .meter { height: 4px; }
.home-court { display: grid; place-items: center; height: 180px; margin: 10px 0; }
.home-court .hero-art { position: static; width: 180px; max-width: 100%; opacity: 1; }
.battle-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }
.battle-actions .button { min-height: 52px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; text-align: center; }
.stat-grid > span { font-size: 11px; color: var(--muted); }
.stat-grid b { display: block; font-size: 22px; font-weight: 500; color: #e5eddf; margin-top: 9px; font-variant-numeric: tabular-nums; }
.record-strip { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: var(--muted); margin: 28px 0 8px; }
.record-strip b { font-weight: 500; color: #e0e7db; }
.disclosure { border-top: 1px solid var(--line); margin-top: 18px; }
.disclosure summary { min-height: 48px; display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; font-size: 12px; color: #b9c6b5; touch-action: manipulation; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after { content: '+'; margin-left: auto; color: #748570; font-size: 17px; font-weight: 400; }
.disclosure[open] > summary::after { content: '−'; }
.disclosure summary > span { margin-left: auto; color: var(--muted); font-size: 11px; }
.online-player > summary::after { margin-left: 0; }
.disclosure p { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.8; }
.disclosure .journal { margin-top: 0; }
.disclosure .journal p { font-size: 11px; }
.minimal-welcome { max-width: 300px; margin: 24px auto; text-align: center; }
.minimal-welcome .home-court { height: 180px; margin-bottom: 25px; }
.minimal-welcome h1 { font-size: 30px; font-weight: 600; margin-bottom: 28px; }
.minimal-welcome form { display: grid; gap: 14px; }
.minimal-welcome .text-button { margin-top: 20px; }
.quiet-note { font-size: 11px; color: var(--muted); margin: 14px 0; line-height: 1.7; }
.quiet-row { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.growth-strip { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; }
.growth-strip > span { font-size: 20px; color: var(--accent); }
.growth-strip .meter-block { flex: 1; min-width: 0; }
.training-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.training-tile { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 19px; min-height: 114px; background: #19211a; border: 1px solid #303c2f; border-radius: 14px; text-align: left; }
.training-tile > span { grid-column: 1 / -1; color: #aabb9e; font-size: 13px; }
.training-tile strong { color: #eef3e8; font-size: 30px; font-weight: 500; line-height: 1; }
.training-tile b { color: var(--accent); font-size: 16px; font-weight: 500; align-self: end; }
.rest-action { width: 100%; margin-top: 10px; }
.compact-notice { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px 0 20px; font-size: 12px; color: #dec49b; }
.event-list { margin-bottom: 26px; }
.event-row { display: flex; align-items: center; gap: 12px; min-height: 90px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.event-symbol { display: grid; place-items: center; width: 36px; height: 40px; flex-shrink: 0; color: var(--accent); }
.event-symbol.blue { color: #91b8d3; }
.event-symbol.purple { color: #b6a2d0; }
.event-symbol.gold { color: var(--gold); }
.event-name { flex: 1; min-width: 0; }
.event-name h2 { font-size: 14px; font-weight: 500; }
.event-name small { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; }
.event-row .button { min-width: 62px; padding-inline: 11px; flex-shrink: 0; }
.event-row.locked .event-name, .event-row.locked .event-symbol { opacity: .55; }
.rank-position { display: flex; align-items: baseline; gap: 14px; margin-bottom: 25px; }
.rank-position strong { font-size: 38px; color: var(--accent); font-weight: 500; }
.rank-position span { font-size: 12px; color: var(--muted); }
.ranking-table th, .ranking-table td { font-size: 12px; padding: 15px 8px; }
.ranking-table th { font-size: 11px; }
.legacy-result { display: flex; align-items: center; flex-direction: column; gap: 20px; padding: 36px 0; text-align: center; }
.legacy-result > .icon { width: 52px; height: 52px; color: var(--accent); }
.legacy-result h1 { font-size: 30px; }
.legacy-result > p { color: var(--muted); font-size: 15px; }
.legacy-result .button { min-width: 160px; }
.reward-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; color: var(--accent); font-size: 12px; }
.online-intro { margin: 38px 0 26px; }
.online-intro .online-orbit { margin: 0 auto 30px; }
.online-intro .quiet-note { text-align: center; }
.online-profile { margin: 6px 0 34px; }
.online-profile .profile-header { margin: 0; }
.create-room-button { min-height: 54px; margin-bottom: 14px; }
.online-player { margin-top: 34px; }
.online-player .stat-grid { margin: 16px 0 22px; }
.online-training-buttons { margin: 18px 0 12px; }
.room-code-card { padding: 12px 0 24px; background: none; }
.room-code { font-size: 38px; letter-spacing: 5px; margin: 13px 0 1px; }
.room-members { gap: 18px; margin-top: 0; }
.room-member { border-top: 1px solid var(--line); padding: 24px 5px 18px; gap: 10px; }
.room-member strong { font-size: 13px; }
.room-member small { font-size: 11px; }
.room-actions { margin-top: 22px; }
.online-match-title .text-button { min-height: 32px; }
.arena-help { min-height: 17px; max-height: 42px; font-size: 10px; margin: 8px 0; }
.arena-values { justify-content: center; gap: 30px; font-size: 10px; padding-bottom: 5px; }
.arena-commit { min-height: 44px; font-size: 14px; }
.arena-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 5px; }
.arena-switches button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border: 1px solid #415139; border-radius: 9px; background: transparent; color: #a7bc95; font-size: 11px; }
.arena-switches button::before { content: ''; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.arena-switches button[aria-pressed="true"] { background: #d8ed8b18; color: var(--accent); border-color: #899f59; }
.arena-switches button[aria-pressed="true"]::before { background: currentColor; }
.arena-tools { padding-top: 0; }
.arena-tools button { min-height: 38px; font-size: 11px; }
.arena-hud span, .arena-hud b { font-size: 10px; }
.dialog-actions { margin: 22px 0 14px; }
.control-guide { display: grid; grid-template-columns: auto 1fr; gap: 14px 22px; font-size: 12px; margin: 8px 0 20px; }
.control-guide dt { color: #d9e5cc; }
.control-guide dd { margin: 0; color: var(--muted); }
.disclosure .danger-zone { margin: 0 0 18px; padding-top: 8px; border: 0; }
@media (max-height: 650px) {
  .content { padding: 18px 16px; }
  .content.has-arena { padding: 6px 8px; }
  .home-court { height: 135px; margin: 8px 0; }
  .home-court .hero-art { width: 145px; }
  .minimal-welcome { margin-top: 0; }
  .minimal-welcome .home-court { height: 135px; margin-bottom: 12px; }
  .battle-actions { margin-bottom: 22px; }
  .record-strip { margin-top: 22px; }
  .training-tile { min-height: 100px; padding: 16px; }
  .event-row { min-height: 80px; }
}