/* PATIO Toon — one menu system. The live Canvas remains the home backdrop.
   The match HUD retains its geometry; shared controls use the same visual tokens. */
:root {
  --toon-ink: #102f29;
  --toon-deep: #123e32;
  --toon-green: #28644c;
  --toon-paper: #fff5dc;
  --toon-yellow: #ffcf48;
  --toon-gold: #b87820;
  --toon-mint: #b3e9b0;
  --toon-coral: #ff9a77;
  --toon-display: 'Lilita One', 'Arial Black', sans-serif;
  --font: 'Trebuchet MS', 'Segoe UI', sans-serif;
  --paper: var(--toon-paper);
  --radius: 18px;
}
button, input, select, textarea { font-family: var(--font); }
button { transition: background .15s, box-shadow .15s, transform .15s, color .15s; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #f8be32; outline-offset: 4px;
}
button:disabled { opacity: .5; }
button:not(:disabled):active { transform: translateY(3px); }
button svg { stroke-width: 2.3; flex-shrink: 0; }
.primary, .panel .primary, #lobbyView .quick-match-strip .primary {
  min-height: 50px; padding: 12px 20px; border: 3px solid var(--toon-ink); border-radius: 12px;
  background: var(--toon-yellow); color: var(--toon-ink); box-shadow: inset 0 3px #fff5b27a, 0 5px 0 var(--toon-ink);
  font-family: var(--toon-display); font-size: 21px; font-weight: 400; letter-spacing: .15px;
}
.primary:hover:not(:disabled), .panel .primary:hover { background: #ffdf75; transform: translateY(-2px); }
.primary:active:not(:disabled), .panel .primary:active { transform: translateY(3px); box-shadow: inset 0 3px #fff5b27a, 0 2px 0 var(--toon-ink); }
.secondary, .panel .secondary, .outline-button {
  min-height: 46px; border: 2px solid var(--toon-ink); border-radius: 10px; font-size: 14px; font-weight: 800;
  background: #e8eedb; color: var(--toon-ink); box-shadow: 0 3px 0 var(--toon-ink); padding: 11px 16px;
}
.secondary:hover, .panel .secondary:hover { background: #fffaf0; }
.topbar { border-bottom: 3px solid var(--toon-ink); }
.icon-button, .is-home .header-right .icon-button {
  width: 44px; height: 44px; border: 2px solid #0c2d26; border-radius: 12px;
  color: #f4f1d8; background: #2b5d49; box-shadow: inset 0 2px #75a78045, 0 3px #0d2c24;
}
.icon-button:hover { background: #3d785c; }
.icon-button svg, .is-home .header-right .icon-button svg { width: 21px; height: 21px; }
.wordmark { font: 400 38px/.9 var(--toon-display); letter-spacing: 0; transform: rotate(-3deg); text-shadow: 2px 3px #092920; }
.brand-mark { background: var(--toon-yellow); color: var(--toon-ink); border: 3px solid #0c2d26; box-shadow: 0 3px #061f19; width: 42px; height: 42px; }
.brand-mark:before { border-color: #244837; }
.brand-sub { font-size: 9px; letter-spacing: 1.1px; color: #c3d8bf; padding-top: 7px; }
.is-home #app { grid-template-rows: 80px minmax(0,1fr) 0; }
.is-home .topbar { background: #153e32; backdrop-filter: none; padding: 0 28px; border-bottom: 3px solid #0b3025; gap: 28px; }
.is-home .hub-nav { margin: 0 0 0 28px; gap: 8px; }
.hub-nav button { font: 400 21px var(--toon-display); color: #b8d4bd; padding: 11px 24px; min-height: 46px; border: 2px solid transparent; border-radius: 10px; }
.hub-nav button.selected { color: var(--toon-ink); background: var(--toon-yellow); border-color: var(--toon-ink); box-shadow: 0 4px #091f19, inset 0 2px #ffeeb9; transform: rotate(-2deg); }
.hub-nav button.selected:after { display: none; }
.hub-nav button:hover:not(.selected) { background: #285841; color: #fff5dc; }
.is-home .header-right { gap: 9px; }
.is-home #fpsBadge { font-size: 10px; opacity: .6; margin-right: 6px; }

/* Home: an unobstructed playing field between club identity and the play dock. */
.is-home #menuShade {
  background: linear-gradient(90deg,#0a3327c9 0%,#123d2d68 25%,transparent 47%),linear-gradient(0deg,#12392e9c,transparent 43%);
}
#home.hub-home {
  display: grid; grid-template-columns: minmax(250px,310px) minmax(30px,1fr) minmax(290px,350px);
  grid-template-rows: minmax(280px,1fr) auto; gap: 20px 24px;
  padding: 28px 32px 32px; overflow-y: auto; scrollbar-gutter: stable;
}
#home .hero-copy { grid-column: 1; grid-row: 1; align-self: start; width: 100%; max-width: none; padding: 0; }
.home-kicker, .menu-kicker { display: block; font-size: 11px; font-weight: 900; letter-spacing: 1.7px; color: #52806a; margin-bottom: 8px; }
.home-kicker { display: inline-block; background: var(--toon-coral); color: #263f30; padding: 6px 11px; border: 2px solid var(--toon-ink); border-radius: 5px; transform: rotate(-3deg); box-shadow: 2px 3px var(--toon-ink); margin: 0 0 15px 3px; }
#home #homeTitle {
  font: 400 clamp(48px,4.4vw,67px)/.96 var(--toon-display); letter-spacing: -.6px; text-transform: uppercase;
  margin: 0 0 10px; color: #fff8df; text-wrap: nowrap; transform: rotate(-3deg);
  -webkit-text-stroke: 5px var(--toon-ink); paint-order: stroke fill; text-shadow: 1px 5px 0 var(--toon-ink);
}
#homeTitle>span, #homeTitle>em { display: block; font-style: normal; }
#home #homeTitle em { color: var(--toon-yellow); }
#home .hero-description { color: #e0edcd; font-size: 15px; font-weight: 700; line-height: 1.4; margin: 14px 0 20px; text-shadow: 0 2px #153d2c; }
.home-identity { margin-top: 22px; }
#home .home-club-link {
  background: var(--toon-paper); color: var(--toon-ink); border: 3px solid var(--toon-ink); border-radius: 14px;
  box-shadow: 0 5px var(--toon-ink), inset 0 3px #fffdf0; gap: 13px; padding: 13px 14px; min-height: 96px; transform: rotate(-1deg);
}
#home .home-club-link:hover { transform: rotate(0) translateY(-2px); background: #fffdf0; }
#home .home-club-link .crest-art { width: 50px; height: 57px; filter: drop-shadow(0 3px 0 #17372e30); }
#home .home-club-link small { font: 800 9px var(--font); letter-spacing: .8px; color: #647763; }
#home .home-club-link strong { font: 400 26px var(--toon-display); letter-spacing: 0; margin: 2px 0; }
#home .home-club-link em { font-size: 12px; color: #476650; font-weight: 700; }
#home .hero-utility { display: grid; grid-template-columns: 1fr 1fr 48px; gap: 9px; margin: 16px 0 0; }
#home .hero-utility button { min-height: 79px; background: #194934ed; border: 2px solid var(--toon-ink); border-radius: 12px; box-shadow: inset 0 2px #77a5803b,0 4px #092e24; padding: 10px 5px; color: #fff2d2; display: grid; justify-items: center; gap: 4px; text-decoration: none; }
#home .hero-utility button:hover { background: #337a51; transform: translateY(-2px); }
#home .hero-utility svg { width: 27px; height: 27px; color: var(--toon-yellow); fill: #ffd45c2b; }
#home .hero-utility span { font-size: 12px; font-weight: 800; white-space: nowrap; }
#home .hero-utility small { display: none; }
#home #homeHelpBtn span { display: none; }
#home #homeHelpBtn { align-self: center; min-height: 48px; }
#home #homeHelpBtn svg { width: 24px; height: 24px; color: #e8edd7; fill: none; }
#home .demo-broadcast {
  grid-column: 3; grid-row: 1; align-self: start; position: static; width: 100%;
  background: #173e32eb; border: 3px solid var(--toon-ink); border-radius: 14px; box-shadow: 0 5px var(--toon-ink); backdrop-filter: none;
}
#home .demo-caption { font: 800 10px var(--font); letter-spacing: 1.2px; color: #bad9bf; padding: 10px 14px; border-color: #a9caa226; }
#home .demo-caption .status-dot { background: #b0e782; box-shadow: 0 0 0 3px #b0e78220; width: 6px; height: 6px; }
#home .demo-caption>span:last-child { font: 800 12px var(--mono); }
#home .demo-fixture { gap: 12px; padding: 9px 12px; }
#home .demo-fixture b { font: 400 34px var(--toon-display); letter-spacing: 1px; color: #fff4cf; }
#home .demo-fixture strong { font-size: 12px; color: #e3edcf; }
#home .demo-fixture .crest-art { width: 28px; height: 32px; }
#home .demo-bottom { padding: 0 12px 4px; font-size: 10px; color: #bcd0b4; border: 0; }
#home .demo-bottom button { min-height: 36px; color: var(--toon-yellow); font-size: 12px; font-weight: 800; }
#home .demo-bottom button svg { width: 13px; height: 13px; fill: currentColor; }
#home .demo-goal { background: var(--toon-yellow); color: var(--toon-ink); font: 400 18px var(--toon-display); border-top: 2px solid var(--toon-ink); }
.home-play-card { grid-column: 3; grid-row: 2; align-self: end; padding: 13px 15px 16px; background: #163f32ef; border: 3px solid var(--toon-ink); border-radius: 17px; box-shadow: 0 6px var(--toon-ink), inset 0 2px #67936655; }
.play-card-heading { display: flex; align-items: center; justify-content: space-between; color: #c0d6b5; font-size: 10px; font-weight: 900; letter-spacing: 1.6px; margin-bottom: 4px; }
.play-card-heading svg { width: 17px; height: 17px; color: var(--toon-yellow); fill: var(--toon-yellow); }
#home .hero-configuration { display: flex; margin: 0 0 11px; padding: 7px 0 10px; border-bottom: 1px solid #8db3913b; gap: 10px; align-items: center; color: #fff1cf; min-height: 51px; }
.hero-configuration>span { text-align: left; }
.hero-configuration strong { display: block; font: 400 20px var(--toon-display); }
.hero-configuration small { display: block; color: #b6cfb5; font: 700 11px var(--font); margin-top: 3px; }
#home .hero-configuration svg { width: 23px; height: 23px; color: var(--toon-mint); }
#home .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
#home .hero-primary { min-width: 0; width: 100%; min-height: 81px; padding: 7px 22px; justify-content: center; gap: 22px; border-radius: 12px; border-width: 3px; transform: rotate(-1deg); }
#home .hero-primary>span { font: 400 39px/.98 var(--toon-display); text-transform: uppercase; letter-spacing: -.2px; }
#home .hero-primary small { display: block; text-transform: none; font: 800 12px var(--font); letter-spacing: 0; margin-top: 5px; }
#home .hero-primary svg { width: 28px; height: 28px; fill: var(--toon-ink); }
#home .hero-primary:hover { transform: rotate(0) translateY(-2px); }
.home-other-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
#home .hero-secondary { min-height: 43px; padding: 10px 8px; background: #2b6248; border: 2px solid #102e26; border-radius: 9px; color: #f3efd8; box-shadow: 0 3px #0b2d24,inset 0 2px #5d8c5b60; justify-content: center; font-size: 13px; font-weight: 800; }
#home .hero-secondary:hover { background: #3d8057; }
#home .hero-secondary svg { width: 16px; height: 16px; }
#homeVenueMount { grid-column: 1; grid-row: 2; align-self: end; margin: 0; width: 100%; max-width: none; position: relative; z-index: 3; }
#home #venuePicker { border: 3px solid var(--toon-ink); border-radius: 13px; background: #183d30f2; padding: 10px 12px; box-shadow: 0 5px var(--toon-ink),inset 0 2px #678e624d; position: relative; }
#home .hub-venues .venue-head { display: flex; justify-content: space-between; align-items: center; color: #b4cba7; font: 800 10px var(--font); letter-spacing: 1.1px; margin: 0; }
#allVenuesBtn { display: flex; align-items: center; gap: 6px; min-height: 30px; font: 700 11px var(--font); background: none; color: #e7eacb; padding: 0 0 0 8px; }
#allVenuesBtn>svg { width: 13px; height: 13px; transition: transform .15s; }
#allVenuesBtn[aria-expanded=true]>svg { transform: rotate(180deg); }
#venueCount { display: none; }
#home .hub-venues .venue-title { margin: 1px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#home .hub-venues .venue-title h2 { font: 400 25px var(--toon-display); letter-spacing: 0; margin: 0; }
#home .hub-venues .venue-title p { display: none; }
#home .hub-venues .venue-title button { width: 40px; height: 40px; padding: 0; border: 2px solid #2e5941; border-radius: 8px; background: #214e39; color: #f9edce; font-size: 28px; }
.venue-gallery { position: absolute; left: -3px; bottom: calc(100% + 14px); width: max(100%,360px); padding: 14px; background: #173e2e; border: 3px solid var(--toon-ink); border-radius: 14px; box-shadow: 0 5px var(--toon-ink); }
#home .hub-venues .venue-thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
#home .hub-venues .venue-thumbs button { opacity: 1; border: 2px solid #406e4e; border-radius: 8px; color: #d6e1c9; padding: 3px; background: #1c4a35; }
#home .hub-venues .venue-thumbs button.active { border-color: var(--toon-yellow); background: #43603b; }
#home .hub-venues .venue-thumbs span { font-size: 10px; padding: 6px 0 3px; }
#home .hub-venues .venue-bottom { display: flex; padding: 4px 0 0; gap: 12px; margin-top: 8px; color: #bed2b2; font: 800 9px var(--font); }
#home .hub-venues .venue-bottom button { font-size: 12px; min-height: 36px; color: var(--toon-yellow); }
#home .hub-home-bottom { display: none; }
.watch-back { border: 3px solid var(--toon-ink); border-radius: 13px; min-height: 48px; background: var(--toon-yellow); color: var(--toon-ink); font: 400 20px var(--toon-display); box-shadow: 0 4px var(--toon-ink); }
.is-watching #home .hero-copy, .is-watching #home .home-play-card, .is-watching #homeVenueMount { display: none; }
.is-watching #home .demo-broadcast { position: absolute; top: 20px; right: 50%; transform: translateX(50%); width: 330px; }

/* Shared sheets, native controls and selection states. */
.modal-shade { position: fixed; inset: 0; background: #0a2c238c; backdrop-filter: blur(5px); padding: clamp(12px,3vh,28px); }
.panel { border: 3px solid var(--toon-ink); border-radius: 20px; box-shadow: 0 8px 0 #092b24,0 24px 70px #061e235c; background: var(--toon-paper); padding: 28px; scrollbar-width: thin; scrollbar-color: #81947c #e8ebd3; overscroll-behavior: contain; }
.panel h2, .panel .setup-heading h2 { font: 400 35px/1.05 var(--toon-display); letter-spacing: -.3px; padding-right: 26px; margin-bottom: 12px; }
.panel h3 { font: 400 22px/1.15 var(--toon-display); letter-spacing: 0; }
.panel .subline { color: #536a54; font-size: 14px; line-height: 1.55; }
.panel>.menu-kicker, .setup-heading>.menu-kicker { margin-right: 35px; }
.panel .close-button { width: 42px; height: 42px; top: 16px; right: 16px; border: 2px solid var(--toon-ink); border-radius: 11px; background: #f7a481; color: var(--toon-ink); box-shadow: 0 3px var(--toon-ink); z-index: 2; }
.close-button svg { width: 21px; height: 21px; }
.panel input[type=text], .panel select, .hub-view input:not([type=color]):not([type=range]), .hub-view select, .net-panel input {
  border: 2px solid #749178; border-radius: 9px; padding: 11px 30px 11px 12px; min-height: 44px; background-color: #fffbed; color: #173e30; font-size: 14px;
}
.panel input[type=text] { padding-right: 12px; }
.form-row { font-size: 15px; gap: 24px; border-color: #b9c9ad; padding: 17px 0; font-weight: 700; }
.form-row small { font-size: 12px; max-width: 360px; color: #62775e; font-weight: 400; line-height: 1.5; }
.toggle { width: 57px; height: 33px; border: 2px solid #506f58; border-radius: 10px; background: #b9c7ab; box-shadow: inset 0 2px #193e2526; }
.toggle:after { width: 25px; height: 23px; top: 3px; left: 3px; border-radius: 6px; background: #fff9e5; border: 1px solid #648463; box-shadow: 0 2px #4266474a; }
.toggle[aria-pressed=true] { background: #65b574; border-color: #245839; }
.toggle[aria-pressed=true]:after { left: 25px; }
.toggle:before { content: '−'; position: absolute; right: 6px; top: 3px; font: 900 16px var(--font); color: #536748; }
.toggle[aria-pressed=true]:before { content: '✓'; right: auto; left: 5px; color: #173e2b; }
input[type=range] { accent-color: #337957; min-height: 32px; cursor: pointer; }
.segments, .format-switch, .club-side-select { border: 2px solid #a7ba96; background: #e2e8cf; padding: 4px; border-radius: 11px; }
.segments button, .format-switch button, .club-side-select button { min-height: 40px; border-radius: 7px; font-size: 14px; font-weight: 800; }
.segments button.active, .format-switch button.active, .club-side-select button[aria-pressed=true] { background: var(--toon-green); color: #fff8dd; box-shadow: 0 2px #153f2c; }
.option-label { color: #526b4f; font-size: 12px; font-weight: 800; }
.format-switch strong { font-family: var(--toon-display); font-weight: 400; font-size: 30px; }
.format-switch small { font-size: 12px; }
.format-switch strong i { font: 700 14px var(--font); opacity: .75; margin: 0 5px; }
.setup-panel { width: min(540px,100%); }
.setup-panel .home-options { align-items: flex-end; gap: 15px; }
.setup-panel .home-options>div { flex: 1; }
.setup-panel .segments button { padding: 9px 13px; }
.setup-panel .home-options select { font-size: 14px; min-height: 48px; }
.setup-panel .format-line { font: 800 11px var(--font); color: #50694f; }
.setup-panel .club-picker-button { border: 2px solid #608068; background: #e5ebd4; border-radius: 12px; padding: 14px; }
.setup-panel .club-preview-side strong { font-family: var(--toon-display); font-weight: 400; font-size: 22px; }
.setup-panel .club-edit { font-size: 11px; }
.setup-panel .home-secondary .secondary, .setup-panel .home-extra .secondary { font-size: 14px; min-height: 49px; }
.setup-panel .home-extra small { font-size: 10px; }
.setup-panel .online-button { font-size: 15px; padding: 14px 4px; min-height: 48px; }
.setup-panel .online-button small { font-size: 10px; }
.setup-panel .menu-xp { margin-top: 18px; font-size: 12px; }
.panel .text-button, .graphics-reset { color: #375f42; font-size: 13px; min-height: 44px; text-underline-offset: 4px; }
.pause-score { font: 400 64px var(--toon-display); background: #e4eacc; border: 2px solid #afc09a; border-radius: 13px; padding: 14px; margin: 18px 0; }
.pause-stat { font: 800 12px var(--font); color: #5b7454; }
.pause-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.pause-secondary .secondary { margin: 0; }
#quitBtn { background: transparent; color: #864b39; box-shadow: none; border-color: #c9bfa1; font-size: 13px; }
.help-list { gap: 16px 18px; }
.help-list p, .help-precision p { font-size: 15px; }
.help-list p small, .help-precision small { font-size: 12px; line-height: 1.45; }
.help-list kbd, .help-precision kbd { font-size: 12px; min-height: 29px; padding: 2px 7px; border-radius: 6px; border-width: 2px; border-bottom-width: 4px; }
.tip-box { font-size: 13px; color: #4d6646; border-radius: 8px; background: #e4eacb; }

/* Settings: persistent category navigation, one scrollable content area. */
#settingsModal .settings-panel { padding: 0; width: min(870px,100%); height: min(680px,100%); display: flex; flex-direction: column; overflow: hidden; }
.menu-heading { position: relative; padding: 23px 28px 17px; background: #dbe8c6; border-bottom: 2px solid #b6c89e; flex-shrink: 0; }
.menu-heading .menu-kicker { margin-bottom: 5px; color: #577653; }
.menu-heading h2 { margin: 0; }
.settings-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 170px minmax(0,1fr); }
.settings-tabs { background: #e9edd7; border-right: 2px solid #c9d5b4; padding: 20px 12px; display: flex; flex-direction: column; gap: 10px; }
.settings-tabs button { text-align: left; display: flex; align-items: center; gap: 9px; background: transparent; color: #57704e; min-height: 51px; padding: 12px 10px; border: 2px solid transparent; border-radius: 9px; font: 400 19px var(--toon-display); }
.settings-tabs button>span { font: 800 10px var(--font); opacity: .6; }
.settings-tabs button[aria-selected=true] { background: var(--toon-yellow); color: var(--toon-ink); border-color: var(--toon-ink); box-shadow: 0 3px var(--toon-ink); }
.settings-tabs button:hover:not([aria-selected=true]) { background: #d5e2bc; }
.settings-pages { min-height: 0; overflow-y: auto; padding: 25px 28px; scrollbar-width: thin; scrollbar-color: #9aaf88 transparent; overscroll-behavior: contain; }
.settings-page { outline-offset: 0; }
.settings-page h3 { margin: 0 0 7px; font-size: 25px; }
.settings-intro { font-size: 13px; color: #63785b; margin: 0 0 24px; line-height: 1.6; }
.settings-page .form-row { padding: 16px 0; }
.settings-page .form-row>span:first-child, .settings-page .form-row>label, .settings-page .form-row>div { flex: 1; min-width: 0; }
.settings-page .form-row select { width: 190px; max-width: 46%; flex-shrink: 0; }
.settings-page .form-row input[type=text] { width: 170px; max-width: 48%; }
.settings-page .form-row input[type=range] { width: 145px; max-width: 50%; }
.settings-page .form-row .perf-slider { max-width: 47%; }
.settings-page .perf-slider input[type=range] { max-width: 100%; width: 110px; }
.settings-details { border: 2px solid #b9c9a4; border-radius: 10px; background: #eaf0d9; margin: 15px 0; padding: 0 14px; }
.settings-details summary { cursor: pointer; padding: 14px 0; font-size: 14px; font-weight: 800; color: #42643e; }
.settings-details .form-row { gap: 12px; }
.settings-details .slider-row { padding: 12px 0; margin: 0; font-size: 14px; }
.settings-details .slider-row input { width: 100%; }
.settings-details .slider-row small { font-size: 12px; }
.settings-details .graphics-status, .settings-details .perf-status { font: 12px/1.6 var(--mono); color: #546d4b; overflow-wrap: anywhere; }
.settings-note { background: #e1e9ce; padding: 14px; border-radius: 9px; font-size: 13px; line-height: 1.6; color: #52684c; }
.settings-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 18px; gap: 18px; background: #f2f0d9; border-top: 2px solid #c6d4b1; flex-shrink: 0; }
.settings-footer #settingsStorage { margin: 0; font-size: 12px; line-height: 1.5; max-width: 250px; }
.settings-footer .primary { margin: 0; width: auto; min-width: 170px; }
.settings-page .anime-preview { margin: 14px 0; border: 2px solid #9eaf8a; border-radius: 10px; background: #e8ecd5; }
.settings-page .anime-preview summary { font-size: 14px; padding: 13px; }
.settings-page .anime-preview-description, .settings-page .anime-preview-status { font-size: 12px; line-height: 1.6; }
.settings-page .anime-preview-options button { font-size: 12px; min-height: 40px; padding: 8px; }

/* Social spaces and club workshop: the same football palette and tactile tabs. */
.hub-view { background-color: #143f32; background-image: radial-gradient(#73ac7c12 1.5px,transparent 1.5px); background-size: 13px 13px; backdrop-filter: none; }
.hub-view h1, #lobbyView h1 { font: 400 clamp(32px,3.1vw,45px)/1.05 var(--toon-display); letter-spacing: -.4px; text-shadow: 0 3px #0b3025; }
.hub-view h1 em { color: var(--toon-yellow); }
.hub-view-heading p, #lobbyView .hub-view-heading p { color: #b9d5b6; font-size: 14px; line-height: 1.55; }
#lobbyView .lobby-layout { height: calc(100dvh - 213px); min-height: 400px; }
#lobbyView .quick-match-strip { background: #326a47; border: 3px solid #0c3025; border-radius: 14px; padding: 18px; box-shadow: 0 4px #0b2e24,inset 0 2px #8fc98640; margin-bottom: 24px; }
#lobbyView .quick-match-strip:before { display: none; }
#lobbyView .quick-symbol { fill: var(--toon-yellow); stroke: #122f26; stroke-width: 2; }
#lobbyView .quick-match-strip strong { font: 400 25px var(--toon-display); color: #ffefc3; }
#lobbyView .quick-match-strip p { color: #d4e5c2; font-size: 13px; }
#lobbyView .quick-match-strip .primary { font-size: 18px; padding: 10px 16px; min-width: 160px; }
#lobbyView .room-toolbar h2, #lobbyView .chat-heading h2 { font: 400 26px var(--toon-display); }
#lobbyView .room-toolbar .primary { background: var(--toon-yellow); color: var(--toon-ink); border: 3px solid var(--toon-ink); box-shadow: 0 4px #08291f; font: 400 18px var(--toon-display); padding: 10px 16px; }
#lobbyView .room-toolbar p, #lobbyView .room-empty p { font-size: 13px; color: #b5cfae; }
#lobbyView .room-empty { background: #1b4837; border: 2px dashed #5a8b61; border-radius: 14px; }
#lobbyView .room-empty strong { font: 400 26px var(--toon-display); color: #eaf0ce; }
#lobbyView .room-row { background: #1d4e3b; border: 2px solid #406e4d; border-radius: 12px; margin-bottom: 10px; padding: 15px; }
#lobbyView .room-row .room-info strong { font-size: 16px; }
#lobbyView .room-row>button { min-height: 44px; border: 2px solid var(--toon-ink); border-radius: 8px; box-shadow: 0 3px #102e22; background: #b7de96; font-size: 14px; font-weight: 800; color: #1d442d; }
#lobbyView .room-filters input, #lobbyView .room-filters select { font-size: 13px; }
#lobbyView .lobby-alt button { font-size: 14px; min-height: 44px; color: #ffdc75; }
#lobbyView .lobby-alt>span { font-size: 11px; }
#lobbyView .lobby-chat { border: 3px solid #0c3025; border-radius: 16px; background: #194633; box-shadow: 0 5px #0b2d24; }
#lobbyView .chat-heading { background: #2b6044; padding: 18px 18px 8px; }
#lobbyView .chat-heading h2 { color: #fff0cf; }
#lobbyView .chat-scope { font-size: 12px; color: #b0cfa7; margin-top: 10px; }
#lobbyView .chat-identity { font-size: 12px; padding: 10px 14px; background: #153c2c; }
#lobbyView .chat-identity input { min-height: 38px; font-size: 13px; border-radius: 7px; padding: 8px; }
#lobbyView .chat-identity button { font-size: 12px; min-height: 40px; }
#lobbyView .chat-form { background: #eff2d8; border: 2px solid #0e3024; }
#lobbyView .chat-form input { border: 0; background: transparent; min-height: 40px; font-size: 14px; color: #234832; }
#lobbyView .chat-form button { background: var(--toon-yellow); color: #163b28; border-radius: 6px; font-size: 12px; border: 1px solid #bea13b; min-height: 38px; }
#lobbyView .chat-status { font-size: 11px; line-height: 1.5; }
#lobbyView .chat-message header, #lobbyView .chat-message p { font-size: 14px; }
#lobbyView .chat-message .mute-author { font-size: 11px; }
#lobbyView .chat-empty { font-size: 14px; color: #b4cfad; }
.presence-person strong { font-size: 12px; }
.presence-person small { font-size: 10px; }
.presence-avatar { width: 30px; height: 32px; font-size: 11px; }
.presence-person { grid-template-columns: 30px 1fr; }
.lobby-presence summary { font-size: 12px; }
.outline-button, #lobbyView .lobby-connection-tools .outline-button { font-size: 12px; min-height: 40px; background: #295d41; color: #eaf0d4; border: 2px solid #0e3125; box-shadow: 0 3px #0d2d24; }
.active-room-banner { border: 2px solid #f0c14a; border-radius: 10px; background: #3c5f39; padding: 14px; font-size: 14px; color: #fff3cb; }
.active-room-banner button { min-height: 42px; font-size: 13px; }
.studio-tabs, .career-tabs, .report-tabs { display: flex; gap: 6px; padding: 5px; border: 2px solid #0e3125; border-radius: 12px; background: #103526; }
.studio-tabs button, .career-tabs button, .report-tabs button { flex: 1; padding: 11px 10px; min-height: 45px; font: 400 18px var(--toon-display); border: 0; border-radius: 7px; color: #b5cdaa; white-space: nowrap; }
.studio-tabs button span { font: 400 18px var(--toon-display); }
.studio-tabs button:after, .career-tabs button:after, .report-tabs button:after { display: none; }
.studio-tabs button[aria-selected=true], .career-tabs button[aria-selected=true], .report-tabs button[aria-selected=true] { background: var(--toon-yellow); color: var(--toon-ink); border: 0; box-shadow: 0 2px #b58525; }
.studio-tabs button[aria-selected=true] span { color: var(--toon-ink); }
.studio-tabs button { font: 700 11px var(--font); gap: 7px; }
.studio-tab-body h2 { font: 400 28px var(--toon-display); color: #f2ebcb; }
.studio-field { font-size: 13px; color: #c1d8b4; }
.studio-field input, .studio-field select { font-size: 15px; }
.studio-note { font-size: 13px; line-height: 1.6; color: #b3cda9; }
.studio-library label { font-size: 12px; }
.studio-library select { max-width: 190px; }
.studio-save { border-color: #7397685e; }
.studio-save .primary { font-size: 20px; }
.studio-save>span { font-size: 12px; }
.club-showcase { background: #e5ebca; color: #224631; border: 3px solid #0b3025; border-radius: 18px; box-shadow: 0 7px #0b2e24; }
.showcase-top { color: #60794f; font-size: 11px; }
.club-showcase>h2 { font: 400 36px var(--toon-display); color: #214632; }
.club-showcase>p { color: #617951; font-size: 13px; }
.showcase-mark { filter: drop-shadow(0 5px #142e2433); }
.showcase-player>span { color: #5a754d; font-size: 10px; }
.kit-pattern-grid button { min-height: 80px; font-size: 13px; border: 2px solid #5e865a; background: #24573b; border-radius: 11px; }
.kit-pattern-grid button[aria-pressed=true] { border-color: var(--toon-yellow); background: #3f703f; }
.studio-colors label, .drawing-tools label { font-size: 12px; }
.studio-colors input[type=color] { width: 44px; height: 44px; border: 2px solid #123b2a; border-radius: 9px; }
.drawing-tools button, .studio-transfer button { min-height: 44px; font-size: 13px; }
.net-panel { width: min(780px,100%); }
.net-heading { padding-right: 56px; }
.team-rosters { grid-template-columns: repeat(2,minmax(0,1fr)); }
.team-rosters>div { min-width: 0; }
.roster-slot small { overflow-wrap: anywhere; }
.net-panel .net-status, .net-panel .net-privacy { font-size: 13px; line-height: 1.5; }
.net-tabs button, .net-panel .segments button { min-height: 44px; font-size: 14px; }
.net-panel label { font-size: 14px; }
.net-panel .room-meta select { font-size: 13px; }
.roster-slot { border-width: 2px; border-radius: 10px; min-height: 64px; }
.roster-slot strong { font-size: 14px; }
.net-advanced { background: #e4eace; border: 2px solid #b0c299; border-radius: 10px; padding: 12px; margin-top: 20px; }
.net-advanced summary { font-size: 14px; min-height: 25px; cursor: pointer; }
.net-advanced p, .net-privacy { font-size: 12px; }
.room-chat-area { border: 2px solid #b4c69f; border-radius: 12px; padding: 12px; background: #e7ebd2; }
.room-chat-area h3 { font-size: 20px; }
.room-chat-area p { font-size: 12px; }
.room-chat-area input { font-size: 14px; }
.create-panel label { font-size: 14px; color: #4b6848; }
.create-panel .studio-field input, .create-panel .studio-field select { width: 100%; }
.create-panel .subline { font-size: 13px; }
.club-grid { gap: 12px; }
.club-card { border: 2px solid #b0c29c; border-radius: 12px; background: #e7eccf; height: auto; min-height: 155px; padding: 12px 8px; }
.club-card.selected { border-color: #27553c; background: #d1e5b0; box-shadow: 0 3px #28573c; }
.club-card strong { font: 400 22px var(--toon-display); }
.club-card small { font-size: 12px; line-height: 1.4; min-height: 34px; }
.career-panel { width: min(790px,100%); }
.career-summary { background: #e3eacc; border: 2px solid #bbcba0; border-radius: 12px; padding: 16px; }
.career-tabs { margin: 19px 0; }
.career-content { padding: 4px 0; }
.career-level-line strong { font: 400 26px var(--toon-display); }
.career-level-line small { font-size: 12px; }
.career-summary .career-level-line strong, .career-summary .career-counts strong { color: #244d33; }
.career-summary .career-level-line small, .career-summary .career-counts { color: #5f7950; }
.career-counts { font-size: 12px; }
.career-counts strong { font: 400 22px var(--toon-display); }
.skin-item { border: 2px solid #b6c7a0; background: #e6eccf; border-radius: 12px; }
.skin-item.equipped { border: 3px solid #3a7750; background: #daebbe; }
.skin-item strong { font: 400 20px var(--toon-display); }
.skin-item small { font-size: 11px; }
.badge-tile strong { font-size: 15px; }
.badge-tile p { font-size: 12px; }
.career-transfer { font-size: 12px; flex-wrap: wrap; }
.career-transfer button { font-size: 13px; min-height: 40px; }
.career-privacy { font-size: 12px; }
.career-panel :is(.division-card,.tournament-card,.season-history-card) { background: #e4eacb; color: #456140; border: 2px solid #b6c8a0; box-shadow: none; border-radius: 12px; padding: 16px; }
.career-panel :is(.division-card,.tournament-card,.season-history-card) h3 { color: #284f34; font-size: 23px; margin: 9px 0; letter-spacing: 0; text-transform: none; }
.career-panel :is(.division-card,.tournament-card,.season-history-card) p { color: #56704b; font-size: 13px; line-height: 1.6; }
.career-panel :is(.division-card,.tournament-card,.season-history-card) :is(strong,small,span) { color: #42623e; }
.career-panel .tournament-pill { background: #cadbab; color: #32512d; border-color: #a1bb82; font-size: 12px; }
.career-panel .next-opponent, .career-panel .league-result-note { color: #365433; }
.career-panel .table-form b { color: #365433; background: #d5e1ba; }
.career-panel .tournament-card.locked { opacity: .72; }
.result-panel { border-radius: 20px; }
.result-hero { background: #193f30; }
.result-headline h2 { font: 400 34px var(--toon-display); color: #fff3d1; }
#resultModal h2 { font: 400 34px var(--toon-display); }
#resultSubtitle { font-size: 13px; }
#mvpName { font: 400 26px var(--toon-display); }
#mvpDetail, #mvpTeam { font-size: 12px; }
.mvp-feature .mvp-label { font-size: 10px; letter-spacing: 1px; }
.result-outcome { font-size: 11px; color: #f5cb5f; }
.result-headline p { font-size: 13px; }
.result-score { font: 400 62px var(--toon-display); }
.result-score small { font: 800 11px var(--font); }
.result-club strong { font: 400 24px var(--toon-display); }
.result-club small { font-size: 11px; }
.result-panel .report-tabs { margin: 16px 0; flex-shrink: 0; }
.report-tabs button { font-size: 18px; }
.report-section-title h3, .comparison-heading strong { font-family: var(--toon-display); font-weight: 400; font-size: 22px; }
.report-note { font-size: 12px; line-height: 1.55; }
.result-table { font-size: 13px; }
.result-table th { font-size: 10px; }
.result-table td { padding: 12px 8px; }
.result-bottom { background: var(--toon-paper); }
.result-actions .primary { font-size: 22px; }
#resultModal .result-actions .primary { font-size: 22px!important; min-height: 48px; }
.result-actions .secondary { font-size: 14px; }
.result-record { font-size: 11px; }
#resultModal .result-record { font-size: 11px; }
#resultModal .comparison-row { font-size: 13px; }
#resultModal .comparison-row>div:first-child, #resultModal .comparison-row b { font-size: 13px; }
#resultModal .possession-line { font-size: 12px; }
#resultModal .report-note { font-size: 12px!important; }
#resultModal .personal-summary small { font-size: 10px; }
#resultModal .personal-summary span { font-size: 12px; }
#resultModal .match-progress .league-highlight { color: #365433; font-size: 13px; }
.toast { border: 2px solid var(--toon-ink); border-radius: 12px; background: #ffe6a7; color: #214b33; font-size: 14px; font-weight: 800; box-shadow: 0 3px var(--toon-ink); }

/* Laptop and tablet: preserve the field, keep play within the first screen. */
@media (min-width:761px) and (max-height:760px) {
  #home.hub-home { padding: 20px 26px 26px; gap: 16px 20px; grid-template-columns: 285px minmax(20px,1fr) 325px; grid-template-rows: minmax(275px,1fr) auto; }
  #home #homeTitle { font-size: 54px; }
  #home .hero-description { margin: 10px 0 14px; font-size: 14px; }
  .home-kicker { margin-bottom: 10px; font-size: 9px; }
  .home-identity { margin-top: 16px; }
  #home .home-club-link { padding: 10px 12px; min-height: 83px; }
  #home .home-club-link .crest-art { width: 43px; height: 49px; }
  #home .hero-utility { margin-top: 12px; }
  #home .hero-utility button { min-height: 68px; padding: 8px 4px; }
  #home .hero-utility svg { width: 24px; height: 24px; }
  .home-play-card { padding: 10px 12px 13px; }
  #home .hero-primary { min-height: 70px; }
  #home .hero-primary>span { font-size: 34px; }
  #home .hero-configuration { min-height: 46px; margin-bottom: 8px; }
}
@media (min-width:761px) and (max-width:1050px) {
  .is-home .hub-nav { margin-left: 0; }
  .hub-nav button { font-size: 18px; padding-inline: 17px; }
  .is-home .topbar { gap: 16px; padding-inline: 20px; }
  #home.hub-home { grid-template-columns: 260px minmax(10px,1fr) 295px; padding-inline: 23px; gap: 18px; }
  #home #homeTitle { font-size: 48px; }
  .brand-sub { display: none; }
  .is-home #fpsBadge { display: none; }
  .hero-configuration strong { font-size: 19px; }
  .studio-layout { grid-template-columns: minmax(0,1fr) 300px; }
}
@media (max-width:760px) {
  .is-home #app { grid-template-rows: 114px minmax(0,1fr) 0; }
  .is-home .topbar { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 57px 53px; gap: 0 12px; padding: 0 15px 4px; }
  .is-home .topbar .brand { grid-column: 1; grid-row: 1; gap: 8px; justify-self: start; }
  .is-home .brand-mark { display: grid; width: 30px; height: 30px; border-width: 2px; }
  .is-home .brand-mark svg { width: 18px; height: 18px; }
  .is-home .wordmark { font-size: 30px; }
  .is-home .brand-sub { display: none; }
  .is-home .header-right { grid-column: 2; grid-row: 1; margin: 0; gap: 7px; }
  .is-home .header-right .icon-button { width: 40px; height: 40px; }
  .is-home #fpsBadge { display: none; }
  .is-home #fullscreenBtn { display: none; }
  .is-home .hub-nav { grid-column: 1/-1; grid-row: 2; margin: 0; display: flex; gap: 8px; width: 100%; }
  .hub-nav button { flex: 1; min-height: 41px; font-size: 19px; padding: 8px 12px; }
  .is-home #menuShade { background: linear-gradient(0deg,#13392ddd,transparent 63%),linear-gradient(180deg,#103e3475,transparent 35%); }
  #home.hub-home { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(115px,1fr) auto auto auto; gap: 13px 12px; padding: 16px 15px 20px; }
  #home .hero-copy { display: contents; }
  #home .home-kicker, #home .hero-description { display: none; }
  #home #homeTitle { grid-column: 1; grid-row: 1; margin: 0; font-size: clamp(29px,7.8vw,48px); align-self: start; text-wrap: nowrap; padding-top: 7px; -webkit-text-stroke-width: 3px; text-shadow: 1px 3px var(--toon-ink); }
  #home .demo-broadcast { grid-column: 2; grid-row: 1; width: 100%; left: auto; right: auto; top: auto; min-width: 0; border-width: 2px; border-radius: 10px; }
  #home .demo-caption { padding: 6px 8px; font-size: 8px; letter-spacing: .5px; gap: 5px; }
  #home .demo-caption>span:last-child { font-size: 10px; }
  #home .demo-fixture { padding: 5px 7px; gap: 7px; }
  #home .demo-fixture strong { display: none; }
  #home .demo-fixture b { font-size: 26px; }
  #home .demo-fixture .crest-art { width: 22px; height: 26px; }
  #home .demo-bottom { padding: 0 7px; justify-content: center; }
  #home .demo-bottom>span { display: none; }
  #home .demo-bottom button { font-size: 11px; min-height: 29px; }
  #home .demo-goal { font-size: 13px; padding: 6px; }
  .home-identity { grid-column: 1/-1; grid-row: 3; margin: 0; display: flex; align-items: center; gap: 10px; }
  #home .home-club-link { flex: 1; width: auto; min-width: 0; min-height: 72px; padding: 9px; gap: 9px; border-width: 2px; border-radius: 11px; }
  #home .home-club-link .crest-art { width: 31px; height: 37px; }
  #home .home-club-link small { display: none; }
  #home .home-club-link strong { font-size: 22px; margin: 0 0 3px; }
  #home .home-club-link em { font-size: 10px; }
  #home .home-club-link>svg { display: none; }
  #home .hero-utility { grid-template-columns: 65px 65px 39px; gap: 6px; margin: 0; }
  #home .hero-utility button { min-height: 67px; padding: 8px 3px; gap: 6px; }
  #home .hero-utility span { font-size: 10px; white-space: normal; line-height: 1.1; }
  #home .hero-utility svg { width: 25px; height: 25px; }
  #home #homeHelpBtn { min-height: 43px; padding: 8px 3px; }
  .home-play-card { grid-column: 1/-1; grid-row: 4; padding: 10px 12px 12px; border-radius: 14px; border-width: 2px; }
  .play-card-heading { display: none; }
  #home .hero-configuration { margin-bottom: 9px; min-height: 43px; padding: 3px 0 9px; }
  .hero-configuration strong { font-size: 19px; }
  .hero-configuration small { font-size: 11px; }
  #home .hero-actions { gap: 10px; }
  #home .hero-primary { min-height: 67px; padding: 6px 18px; }
  #home .hero-primary>span { font-size: 33px; }
  #home .hero-primary small { font-size: 11px; }
  #home .hero-secondary { min-height: 42px; padding: 9px 10px; font-size: 13px; }
  #homeVenueMount { grid-column: 1/-1; grid-row: 5; width: 100%; max-width: none; margin: 0; }
  #home #venuePicker { padding: 6px 11px; border-width: 2px; }
  #home .hub-venues .venue-head { font-size: 9px; }
  #home .hub-venues .venue-title h2 { font-size: 22px; }
  #home .hub-venues .venue-title button { height: 34px; width: 38px; }
  .venue-gallery { width: calc(100% + 4px); left: -2px; bottom: calc(100% + 10px); padding: 12px; }
  .is-watching #home { display: block; }
  .is-watching #home #homeTitle, .is-watching #home .home-identity { display: none; }
  .is-watching #home .demo-broadcast { position: absolute; width: 250px; left: 50%; right: auto; transform: translateX(-50%); }
  .is-watching #home .demo-fixture strong { display: block; font-size: 11px; }
  .modal-shade { padding: 10px; }
  .panel { border-radius: 16px; padding: 24px 20px; max-height: 100%; }
  .panel h2, .panel .setup-heading h2 { font-size: 30px; }
  .panel .close-button { width: 38px; height: 38px; top: 13px; right: 13px; }
  .menu-kicker { font-size: 10px; letter-spacing: 1.2px; }
  .panel .subline { font-size: 13px; }
  .form-row { font-size: 14px; }
  .form-row small { font-size: 12px; }
  #settingsModal .settings-panel { height: 100%; max-height: 720px; }
  .menu-heading { padding: 20px 18px 16px; }
  .menu-heading h2 { margin: 0; }
  .settings-layout { display: flex; flex-direction: column; }
  .settings-tabs { border-right: 0; border-bottom: 2px solid #c0ceab; flex-direction: row; flex-shrink: 0; padding: 10px; gap: 5px; }
  .settings-tabs button { justify-content: center; flex: 1; min-height: 44px; font-size: 16px; padding: 8px 4px; }
  .settings-tabs button>span { display: none; }
  .settings-pages { padding: 22px 18px; flex: 1; }
  .settings-page h3 { font-size: 24px; }
  .settings-intro { font-size: 12px; margin-bottom: 18px; }
  .settings-page .form-row { gap: 14px; }
  .settings-page .form-row select { font-size: 12px; width: 145px; padding-left: 8px; }
  .settings-page .form-row input[type=text] { max-width: 48%; font-size: 13px; }
  .settings-page .form-row small { font-size: 11px; }
  .settings-footer { padding: 12px 15px 16px; gap: 12px; }
  .settings-footer #settingsStorage { font-size: 10px; }
  .settings-footer .primary { min-width: 160px; padding-inline: 12px; font-size: 18px; white-space: nowrap; }
  .help-list { gap: 14px 10px; }
  .help-list .keys { flex-wrap: wrap; gap: 3px; }
  .help-list kbd { font-size: 10px; }
  .help-list p { font-size: 14px; }
  .help-list p small { font-size: 11px; }
  #lobbyView { padding: 22px 16px 18px; }
  .net-heading { padding-right: 37px; }
  .net-panel .room-options { grid-template-columns: 1fr 1fr; }
  .net-panel .room-options label:nth-child(2) { grid-column: 1/-1; grid-row: 2; }
  .roster-slot strong { font-size: 12px; white-space: normal; line-height: 1.3; }
  .roster-slot small { font-size: 9px; line-height: 1.4; }
  #lobbyView h1 { font-size: 32px; }
  #lobbyView .hub-view-heading { display: grid; gap: 10px; }
  #lobbyView .lobby-connection-tools { flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; }
  #lobbyView .connection-status { margin: 0; }
  #lobbyView .connection-status.online + #reconnectLobbyBtn { display: none; }
  #lobbyView .hub-view-heading p { font-size: 12px; }
  #lobbyView .lobby-layout { height: auto; min-height: 0; }
  .lobby-tabs { border: 2px solid #0c2e22; border-radius: 10px; background: #0f3225; }
  .lobby-tabs button { font: 400 16px var(--toon-display); white-space: normal; min-height: 44px; }
  .lobby-tabs button[aria-selected=true] { background: var(--toon-yellow); color: var(--toon-ink); }
  #lobbyView .quick-match-strip { padding: 15px; }
  #lobbyView .quick-match-strip .primary { min-width: 120px; font-size: 18px; }
  #lobbyView .room-toolbar h2 { font-size: 23px; }
  #lobbyView .room-toolbar .primary { font-size: 17px; padding: 10px; }
  #lobbyView .room-filters select { width: 128px; font-size: 12px; }
  #lobbyView .room-filters input { font-size: 12px; }
  #lobbyView .room-empty strong { font-size: 24px; }
  .studio-tabs { gap: 4px; padding: 5px; }
  .studio-tabs button { padding: 10px 8px; }
  .studio-tabs button span { font-size: 16px; }
  .studio-layout { gap: 22px; }
  .studio-tab-body h2 { font-size: 26px; }
  .studio-save { background: #183e2ef5; padding: 16px; bottom: -25px; }
  .studio-save .primary { font-size: 18px; }
  .studio-save>span { font-size: 11px; }
  .studio-colors { flex-wrap: wrap; gap: 12px; }
  .studio-colors label { font-size: 12px; }
  #clubStudio .studio-tab-body { order: 2; }
  #clubStudio .club-showcase { order: 1; min-height: 0; padding: 12px; display: grid; grid-template-columns: 74px minmax(0,1fr) 86px; grid-template-rows: auto auto auto; gap: 4px 10px; align-items: center; }
  #clubStudio .showcase-top { grid-column: 1/-1; margin: 0 0 7px; font-size: 9px; }
  #clubStudio .showcase-mark { grid-column: 1; grid-row: 2/4; width: 69px; height: 76px; margin: 0; }
  #clubStudio .club-showcase>h2 { grid-column: 2; grid-row: 2; font-size: 22px; margin: 0; align-self: end; }
  #clubStudio .club-showcase>p { grid-column: 2; grid-row: 3; font-size: 10px; margin: 0; align-self: start; line-height: 1.4; }
  #clubStudio .showcase-kit { grid-column: 3; grid-row: 2/4; margin: 0; display: block; }
  #clubStudio #jerseyPreview, #clubStudio .showcase-player>span, #clubStudio .showcase-colors, #clubStudio .club-showcase>p:last-child { display: none; }
  #clubStudio .showcase-player { width: 86px; }
  #clubStudio #clubPlayerPreview { width: 86px; height: 85px; object-fit: contain; }
  #clubStudio:has([data-studio-tab=crest][aria-selected=true]) .club-showcase { grid-template-columns: 130px minmax(0,1fr) 60px; }
  #clubStudio:has([data-studio-tab=crest][aria-selected=true]) .showcase-mark { width: 126px; height: 139px; }
  #clubStudio:has([data-studio-tab=crest][aria-selected=true]) .showcase-player, #clubStudio:has([data-studio-tab=crest][aria-selected=true]) #clubPlayerPreview { width: 60px; }
  .career-tabs, .report-tabs { overflow-x: auto; flex-shrink: 0; }
  .career-tabs button, .report-tabs button { flex: 0 0 auto; font-size: 16px; min-height: 44px; padding: 9px 12px; }
  .result-headline h2 { font-size: 27px; }
  #resultModal h2 { font-size: 27px; }
  #resultModal .result-actions .primary { font-size: 20px!important; min-height: 48px; }
  #resultModal .result-actions .secondary { font-size: 13px; }
  #resultModal .result-fixture { grid-template-columns: 1fr 100px 1fr; }
  #resultModal .result-club small, #resultMatchMeta { font-size: 10px; letter-spacing: 0; }
  #resultModal .summary-grid { grid-template-columns: 1fr; }
  #resultModal .mvp-feature { display: grid; grid-template-columns: 85px 1fr; grid-template-rows: auto auto auto auto; padding: 13px; align-items: center; text-align: left; }
  #resultModal .mvp-feature canvas { grid-column: 1; grid-row: 1/5; width: 80px; height: 80px; }
  #resultModal .mvp-feature :is(span,strong,small) { grid-column: 2; }
  #resultModal .mvp-label { font-size: 10px; }
  #mvpName { font-size: 23px; }
  #mvpDetail, #mvpTeam { font-size: 11px; }
  #resultModal .comparison-heading>strong { font-size: 22px; }
  #resultModal .comparison-heading button { min-height: 36px; font-size: 12px; }
  .result-score { font-size: 49px; }
  .result-club strong { font-size: 19px; }
  .result-actions .primary { font-size: 20px; }
  .result-actions .secondary { font-size: 13px; }
}
/* Small landscape: compact edge panels, scrolling sheets, no hidden actions. */
@media (max-height:500px) and (orientation:landscape) {
  .is-home #app { grid-template-rows: 60px minmax(0,1fr) 0; }
  .is-home .topbar { display: flex; gap: 20px; padding: 0 18px; }
  .is-home .topbar .brand { display: flex; }
  .is-home .brand-mark { display: none; }
  .is-home .wordmark { font-size: 29px; }
  .is-home .hub-nav { width: auto; gap: 5px; margin: 0; }
  .hub-nav button { font-size: 17px; min-height: 39px; padding: 7px 16px; }
  .is-home .header-right { margin-left: auto; }
  .is-home .header-right .icon-button { width: 36px; height: 36px; }
  .is-home #fpsBadge { display: none; }
  #home.hub-home { padding: 14px 20px 20px; display: grid; grid-template-columns: 228px minmax(20px,1fr) 245px; grid-template-rows: minmax(100px,1fr) auto; gap: 10px 18px; }
  #home .hero-copy { display: block; grid-row: 1/3; grid-column: 1; width: 100%; max-width: none; padding: 0; }
  #home .home-kicker, #home .hero-description { display: none; }
  #home #homeTitle { font-size: 39px; margin: 0 0 12px; }
  .home-identity { display: block; margin: 12px 0 0; }
  #home .home-club-link { min-height: 61px; padding: 7px 10px; gap: 10px; }
  #home .home-club-link .crest-art { width: 29px; height: 36px; }
  #home .home-club-link strong { font-size: 23px; }
  #home .home-club-link small { display: none; }
  #home .home-club-link em { font-size: 11px; }
  #home .hero-utility { display: grid; grid-template-columns: 1fr 1fr 39px; gap: 7px; margin-top: 11px; }
  #home .hero-utility button { min-height: 54px; padding: 5px; gap: 4px; }
  #home .hero-utility svg { width: 20px; height: 20px; }
  #home .hero-utility span { font-size: 9px; }
  #home .demo-broadcast { grid-column: 3; grid-row: 1; position: static; width: 100%; border-width: 2px; }
  #home .demo-caption { padding: 5px 10px; font-size: 8px; }
  #home .demo-fixture { padding: 3px 10px; gap: 10px; }
  #home .demo-fixture strong { display: block; font-size: 10px; }
  #home .demo-fixture b { font-size: 25px; }
  #home .demo-fixture .crest-art { width: 20px; height: 24px; }
  #home .demo-bottom { padding: 0 8px; }
  #home .demo-bottom>span { display: none; }
  #home .demo-bottom button { min-height: 25px; font-size: 10px; margin-left: auto; }
  .home-play-card { grid-row: 2; grid-column: 3; padding: 8px 10px 10px; border-width: 2px; }
  .play-card-heading { display: none; }
  #home .hero-configuration { min-height: 36px; padding: 0 0 6px; margin-bottom: 6px; }
  .hero-configuration strong { font-size: 16px; }
  .hero-configuration small { font-size: 9px; }
  #home .hero-actions { gap: 8px; }
  #home .hero-primary { min-height: 52px; padding: 5px 12px; gap: 15px; }
  #home .hero-primary>span { font-size: 26px; }
  #home .hero-primary small { font-size: 9px; margin-top: 2px; }
  #home .hero-primary svg { width: 21px; height: 21px; }
  #home .hero-secondary { min-height: 32px; font-size: 11px; padding: 6px; }
  #homeVenueMount { grid-column: 2; grid-row: 2; max-width: none; width: 100%; margin: 0; min-width: 0; }
  #home #venuePicker { padding: 6px; border-width: 2px; }
  #home .hub-venues .venue-head { justify-content: center; }
  #home .hub-venues .venue-head>span { display: none; }
  #allVenuesBtn { padding: 0; font-size: 10px; }
  #home .hub-venues .venue-title { gap: 4px; }
  #home .hub-venues .venue-title h2 { font-size: 15px; text-align: center; }
  #home .hub-venues .venue-title button { width: 24px; height: 30px; flex-shrink: 0; font-size: 23px; }
  .venue-gallery { width: 330px; left: 50%; transform: translateX(-50%); }
  .is-home #menuShade { background: linear-gradient(90deg,#123b2ab8,transparent 48%),linear-gradient(0deg,#173c2b5c,transparent 65%); }
  .modal-shade { padding: 9px 18px; }
  .settings-layout { display: grid; grid-template-columns: 142px 1fr; }
  .settings-tabs { flex-direction: column; border-right: 2px solid #c6d2ad; padding: 10px; gap: 6px; }
  .settings-tabs button { flex: 0; min-height: 38px; font-size: 16px; justify-content: flex-start; }
  .menu-heading { padding: 12px 22px; }
  .menu-heading .menu-kicker { display: none; }
  .menu-heading h2 { font-size: 28px; }
  .settings-pages { padding: 17px 22px; }
  .settings-footer { padding: 9px 16px 13px; }
  .settings-footer .primary { min-height: 39px; font-size: 17px; padding: 7px 14px; }
  .panel .close-button { top: 10px; width: 34px; height: 34px; }
  .setup-panel { display: block!important; width: min(540px,100%); }
  #lobbyView .lobby-layout { height: auto; min-height: 420px; }
  #lobbyView { overflow-y: auto; }
  .hub-view-heading, #lobbyView .hub-view-heading { margin-bottom: 18px; }
  .career-tabs button { font-size: 16px; }
  .replay-card { left: 16px; bottom: 14px; width: 210px; }
  .replay-card-cap { padding: 5px 8px; }
  .replay-card-body { padding: 6px 10px; }
  .replay-card-body strong { font-size: 18px; }
  .replay-card-body span, .replay-card-body small { display: none; }
  .replay-bar { bottom: 14px; }
}
@media (prefers-reduced-motion:reduce) {
  button, .toggle:after, #allVenuesBtn>svg { transition: none!important; }
}
html[data-ui-motion=off] button, html[data-ui-motion=off] .toggle:after { transition: none!important; }