/* Approved Taste direction. Extends existing components and business flows. */
body.taste-app {
  color-scheme: dark;
  --bg: #111713;
  --side: #0c120f;
  --sidebar: #0c120f;
  --card: #19221c;
  --card2: #212c24;
  --card-2: #212c24;
  --line: #34473a;
  --line-soft: #29362d;
  --text: #f2f5ee;
  --muted: #b4c1b6;
  --soft: #91a497;
  --lime: #73e8a7;
  --lime-ink: #0c2818;
  --radius: 16px;
  --taste-display: "Bahnschrift SemiCondensed", "Bahnschrift", "Segoe UI", sans-serif;
  --taste-body: "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--taste-body);
  -webkit-font-smoothing: antialiased;
}
html:has(body.taste-app) { scroll-padding-block: 92px; }
.taste-app :is(h1, h2, h3) { font-family: var(--taste-display); text-wrap: balance; }
.taste-app :is(h1, h2) { font-weight: 650; letter-spacing: -.035em; }
.taste-app p { text-wrap: pretty; }
.taste-app :is(button, input, select, textarea) { font-family: var(--taste-body); }
.taste-app :is(a, button, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
.taste-app :is(a, button) { touch-action: manipulation; }
.taste-app :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}
.taste-app :is(code, .balance-amount, .summary-grid, .room-economics, .duel-metrics) { font-variant-numeric: tabular-nums; }
.taste-app .card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: none; }
.taste-app .pad { padding: 27px; }
.taste-app .eyebrow { font-size: 11px; letter-spacing: .1em; color: var(--lime); line-height: 1.5; }
.taste-app .meta { font-size: 13px; line-height: 1.55; color: var(--muted); }
.taste-app .form-label { font-size: 14px; line-height: 1.5; }
.taste-app :is(.form-help, .hint) { font-size: 13px; line-height: 1.6; }
.taste-app :is(.form-input, .filter-select) {
  min-height: 49px;
  padding: 12px 14px;
  border: 1px solid #4a6050;
  border-radius: 8px;
  background: #101a14;
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
}
.taste-app :is(.form-input, input, textarea)::placeholder { color: #96aa9c; opacity: 1; }
.taste-app .form-input:focus { border-color: var(--lime); }
.taste-app .btn {
  min-height: 48px;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  gap: 11px;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.taste-app .btn.primary { color: var(--lime-ink); background: var(--lime); border-color: var(--lime); box-shadow: none; }
.taste-app .btn.primary:hover:not(:disabled) { background: #91efbb; border-color: #91efbb; }
.taste-app .btn.secondary { color: var(--text); background: transparent; border-color: #4b6051; }
.taste-app .btn.secondary:hover:not(:disabled) { background: #293b2e; border-color: #73977e; }
.taste-app .btn:active:not(:disabled) { transform: translateY(1px); }
.taste-app .btn.small { min-height: 44px; }
.taste-app .text-button { min-height: 44px; font-size: 14px; color: var(--muted); }
.taste-app .text-button:hover { color: var(--lime); }
.taste-app .pill { padding: 4px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.taste-app .pill.subtle { background: #2b3930; color: #c4d0c5; }
.taste-app .pill.lime { background: #23452f; color: #9eecba; }
.taste-app .pill.amber { background: #3c3524; color: #dfc894; }
.taste-app .icon, .taste-app .account-icon { flex-shrink: 0; }
.taste-app .ui-icon { display: block; flex-shrink: 0; width: 22px; height: 22px; fill: currentColor; stroke: none; }
.taste-app .btn .icon { width: 19px; height: 19px; }
.taste-app .btn .ui-icon { width: 19px; height: 19px; }
.taste-app .avatar { border-radius: 10px; background: #29362d; }

/* App shell: consistent rail, header and content width. */
.taste-app .sidebar { width: 212px; padding: 28px 17px 24px; background: var(--side); background-image: none; border-color: var(--line-soft); }
.taste-app .shell { margin-left: 212px; min-width: 0; }
.taste-app .brand { margin: 0 7px 42px; gap: 11px; font-family: var(--taste-display); font-size: 27px; letter-spacing: -.05em; }
.taste-app .brand > span:last-child { display: block; }
.taste-app .brand-symbol { width: 35px; height: 41px; border-radius: 11px 4px 11px 4px; font-size: 31px; transform: none; }
.taste-app .brand small { font-family: var(--taste-body); font-size: 9px; letter-spacing: .16em; color: var(--muted); margin-top: 8px; }
.taste-app .nav-caption { display: block; font-size: 11px; color: #91a497; letter-spacing: .06em; margin: 0 12px 16px; }
.taste-app .sidebar nav { display: grid; gap: 8px; }
.taste-app .nav-item { min-height: 49px; padding: 12px 13px; border: 0; border-radius: 9px; gap: 13px; justify-content: flex-start; flex-direction: row; color: #b0bdb3; font-size: 14px; transition: background 160ms ease, color 160ms ease; }
.taste-app .nav-item > span { display: block; font-size: 14px; }
.taste-app .nav-item > span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 21px; flex: none; }
.taste-app .nav-item :is(.icon, .account-icon, .ui-icon) { width: 21px; height: 21px; }
.taste-app .nav-item.active { background: #223b2b; color: var(--lime); border-color: transparent; box-shadow: none; }
.taste-app .nav-item:hover { background: #1a2b20; color: var(--text); }
.taste-app .sidebar-bottom { display: block; margin-top: auto; padding-top: 44px; }
.taste-app .help-button { padding-inline: 13px; min-height: 44px; font-size: 14px; color: var(--muted); }
.taste-app .demo-side { position: relative; border-color: var(--line-soft); padding: 23px 12px 0; }
.taste-app .demo-side p { max-width: 150px; font-size: 12px; line-height: 1.65; color: #91a497; }
.taste-app .topbar { min-height: 76px; padding: 14px 38px; background: var(--bg); border-color: var(--line-soft); backdrop-filter: none; gap: 20px; }
.taste-app .breadcrumb { gap: 12px; font-size: 14px; }
.taste-app .header-actions { gap: 15px; min-width: 0; }
.taste-app .header-actions > .btn { min-height: 44px; padding: 10px 15px; font-size: 13px; }
.taste-app .header-actions .profile-button { min-height: 44px; font-size: 14px; }
.taste-app .header-actions .avatar { width: 37px; height: 40px; }
.taste-app .header-actions > .meta { color: #91a497; font-size: 12px; }
.taste-app .mobile-brand { display: none; }
.taste-app #screen { width: 100%; max-width: 1340px; margin-inline: auto; padding: 32px 38px 42px; min-height: calc(100dvh - 177px); }
.taste-app .page-footer { border-color: var(--line-soft); padding: 24px 38px; font-size: 12px; color: #91a497; line-height: 1.55; }
.taste-app .page-footer > span:first-child { color: var(--muted); }
.taste-app .footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.taste-app .footer-links .text-button { font-size: 12px; }
.taste-app .toast { left: calc(50% + 106px); background: #23432e; color: #d4f4dd; border-color: #598568; box-shadow: 0 12px 30px #05100a55; }
.taste-app .skip-link { background: var(--lime); color: var(--lime-ink); }

/* Home keeps creation dominant, with the existing invitation form below. */
.taste-home-title { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 0 17px; }
.taste-home-title p { font-size: 14px; color: var(--muted); }
.taste-home-title h1, .taste-home-title h2 { font-size: 26px; margin: 0; }
.taste-home-hero { position: relative; isolation: isolate; min-height: 356px; border: 1px solid #3a5743; border-radius: 16px; overflow: hidden; background: #17241a; }
.taste-home-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: -2; pointer-events: none; }
.taste-home-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #102017f5 0%, #122217d9 36%, #15251a30 66%, #13201710 100%); pointer-events: none; }
.taste-hero-copy { position: relative; max-width: 640px; padding: 38px 38px 29px; }
.taste-hero-copy .eyebrow { margin: 0 0 14px; }
.taste-hero-copy h1 { max-width: 590px; margin: 0; font-size: clamp(40px, 4.25vw, 61px); line-height: 1.03; letter-spacing: -.045em; }
.taste-hero-copy h1 em { font-style: normal; color: var(--lime); }
.taste-hero-copy > p:not(.eyebrow):not(.taste-hero-foot) { max-width: 370px; margin: 20px 0 26px; color: #c5d2c5; font-size: 16px; line-height: 1.55; }
.taste-hero-copy .row, .taste-hero-copy .duel-actions { gap: 12px; border: 0; padding: 0; margin-top: 0; }
.taste-hero-foot { display: flex; align-items: center; gap: 8px; color: #b4cbb9; font-size: 12px; margin-top: 21px; }
.taste-hero-foot .icon { width: 17px; height: 17px; }
.taste-hero-foot .ui-icon { width: 17px; height: 17px; }
.taste-hero-edition { position: absolute; right: 25px; bottom: 25px; color: #bed7c0; font-size: 10px; letter-spacing: .16em; }
.taste-invite-strip { margin-top: 18px; padding: 21px 25px; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: minmax(200px, .75fr) minmax(0, 1.5fr); align-items: center; gap: 30px; background: #18201a; }
.taste-invite-strip h2 { margin: 0; font-size: 20px; }
.taste-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.taste-invite-strip > div { display: flex; align-items: center; gap: 15px; min-width: 0; }
.taste-invite-strip > div > .ui-icon { width: 27px; height: 27px; color: var(--muted); }
.taste-invite-strip p { color: var(--muted); font-size: 13px; line-height: 1.55; margin-top: 5px; }
.taste-invite-strip :is(.join-form, .practical-join-form) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin: 0; }
.taste-invite-strip .form-label { grid-column: 1 / -1; margin: 0; }
.taste-invite-strip .form-input { width: 100%; margin: 0; }
.taste-invite-strip .btn { white-space: nowrap; margin: 0; }
.taste-invite-strip .error-message { grid-column: 1 / -1; margin: 0; }
.taste-activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 25px; }
.taste-activity-grid > * { min-width: 0; }
.taste-activity-grid .card { padding: 22px; }
.taste-wallet-inline { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; padding: 17px 0; border-top: 1px solid var(--line-soft); }
.taste-wallet-inline > div { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; min-width: 0; }
.taste-wallet-inline .icon { color: #91a497; }
.taste-wallet-inline small { display: block; font-size: 12px; color: #91a497; margin-top: 3px; }
.taste-onboard-inline { display: flex; align-items: center; gap: 20px; margin-top: 25px; padding: 8px 0; }
.taste-onboard-inline > .icon { width: 32px; height: 32px; color: #8db69a; }
.taste-onboard-inline > div { flex: 1; min-width: 0; }
.taste-onboard-inline h2 { margin: 0; font-size: 21px; }
.taste-onboard-inline p { margin: 7px 0 0; font-size: 14px; color: var(--muted); }
.taste-app .lobby-queue { margin-top: 26px; }
.taste-app .lobby-empty-activity { border-color: var(--line-soft); border-radius: 12px; background: var(--card); padding: 25px; }
.taste-app .duel-entry { background: var(--card); border-color: var(--line-soft); border-radius: 12px; padding: 22px; }
.taste-app .duel-entry .meta, .taste-app .duel-players small { font-size: 12px; }
.taste-app .duel-players h3 { margin: 0; font-size: 17px; }
.taste-app .duel-metrics { gap: 16px 28px; font-size: 13px; }
.taste-app .duel-metrics small { font-size: 11px; color: #91a497; }
.taste-app .duel-actions { border-color: var(--line-soft); gap: 10px; }
.taste-app .duel-actions .btn { font-size: 13px; }
.taste-app .tabs { gap: 8px; margin-bottom: 7px; }
.taste-app .tab { min-height: 44px; font-size: 13px; background: #1a291f; border-color: #415b49; }
.taste-app .tab.active { background: #223f2c; border-color: #5a9970; color: #b8f2cb; }

/* Existing wizard, room and review states share the same surface vocabulary. */
.taste-app .practical-intro { margin-bottom: 28px; }
.taste-app .practical-intro h1 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.13; letter-spacing: -.035em; }
.taste-app .practical-intro p { font-size: 16px; max-width: 65ch; line-height: 1.55; }
.taste-app .arena-workspace { gap: 25px; grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr); }
.taste-app .duel-composer { padding: 29px; }
.taste-app .duel-composer > .card-top { margin-bottom: 24px; }
.taste-app .duel-composer h2 { font-size: 25px; }
.taste-app .duel-wizard-steps { gap: 14px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.taste-app .duel-wizard-steps li { font-size: 13px; }
.taste-app .duel-wizard-steps li > span { width: 29px; height: 29px; font-weight: 600; border-color: #4e6757; }
.taste-app .wizard-heading { font-size: 23px; }
.taste-app .mode-options > button, .taste-app .stake-options > button { min-height: 48px; background: #1c2b21; border-color: #47604f; font-size: 14px; }
.taste-app .mode-options > button[aria-pressed='true'], .taste-app .stake-options > button.active { background: #25452f; border-color: #699d79; color: #bff0cd; }
.taste-app .duel-summary dt { font-size: 14px; }
.taste-app .duel-summary dd { font-size: 15px; }
.taste-app .duel-wizard-actions { margin-top: 26px; gap: 12px; }
.taste-app .wizard-test-note { font-size: 13px; }
.taste-app .arena-sidebar > .card { padding: 24px; }
.taste-app .arena-sidebar h2 { font-size: 21px; }
.taste-app .arena-sidebar p, .taste-app .step-list li { font-size: 14px; }
.taste-app .match-room { max-width: 1160px; margin-inline: auto; }
.taste-app .room-heading h1 { font-size: clamp(31px, 3.2vw, 42px); }
.taste-app .room-heading { margin-bottom: 27px; }
.taste-app .room-layout { gap: 25px; }
.taste-app .room-play, .taste-app .room-summary { background: var(--card); border-color: var(--line-soft); border-radius: 16px; }
.taste-app .room-participants { padding: 24px; border-color: var(--line); }
.taste-app .room-player { gap: 13px; }
.taste-app .room-player strong { font-size: 16px; }
.taste-app .room-player .avatar { width: 49px; height: 52px; }
.taste-app .room-player .meta { font-size: 12px; }
.taste-app .room-state { padding: 29px; }
.taste-app .room-state h2 { font-size: 29px; letter-spacing: -.025em; }
.taste-app .room-state > p { font-size: 15px; line-height: 1.6; max-width: 55ch; color: var(--muted); }
.taste-app .room-live-status { color: #b3ecc4; background: #223b2b; }
.taste-app .room-live-status > span { background: var(--lime); animation: none; box-shadow: none; }
.taste-app .room-main-action { min-height: 51px; }
.taste-app .room-summary { padding: 27px; }
.taste-app .room-summary h2 { font-size: 23px; }
.taste-app .room-economics dt { font-size: 14px; }
.taste-app .room-economics dd { font-size: 15px; }
.taste-app .room-net { color: #bdf1cc; background: #233e2b; border-color: #44664c; }
.taste-app .room-rules p { font-size: 14px; }
.taste-app .room-result { margin: 0 27px 27px; }
.taste-app .room-result figcaption .meta { font-size: 12px; }
.taste-app .room-issues { margin-inline: 27px; }
.taste-app .review-image { max-height: 420px; border-radius: 9px; }
.taste-app .hint, .taste-app .banner-note, .taste-app .connection-note { background: #1c2c21; border-color: #425d4a; color: #c3d5c8; border-radius: 8px; }
.taste-app .error-message { background: #382820; color: #f4c6ad; border-color: #996649; }

/* Account and evidence dialogs retain the real forms, validation and focus. */
.taste-app dialog { background: var(--card); border: 1px solid #4d6654; border-radius: 17px; box-shadow: 0 24px 80px #04100988; }
.taste-app dialog::backdrop { background: #070f0adb; backdrop-filter: blur(5px); }
.taste-app .dialog-head { padding: 25px 28px 0; gap: 18px; }
.taste-app .dialog-head h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.03em; }
.taste-app .dialog-head p { font-size: 14px; line-height: 1.55; }
.taste-app .dialog-body { padding: 23px 28px 28px; }
.taste-app .dialog-head .icon-only { width: 44px; height: 44px; border-color: #516a59; background: #25382b; border-radius: 8px; }
.taste-app .account-dialog { max-width: calc(100% - 28px); max-height: calc(100dvh - 28px); }
.taste-app .account-dialog:has(.taste-account-layout) { width: min(920px, calc(100% - 32px)); max-width: calc(100% - 32px); }
.taste-account-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr); gap: 28px; align-items: start; }
.taste-account-content { min-width: 0; }
.taste-app #modalContent { position: relative; }
.taste-app .taste-dialog-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; z-index: 2; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--card2); color: var(--text); }
.taste-app #modalContent .dialog-head { padding-right: 58px; }
.taste-app .taste-account-layout .dialog-head { padding-right: 0; }
.taste-app .taste-account-aside { padding-top: 54px; }
.taste-account-aside { min-width: 0; align-self: stretch; border-left: 1px solid var(--line); padding: 21px 0 21px 28px; display: flex; flex-direction: column; justify-content: center; }
.taste-account-aside :is(img, .account-art) { display: block; width: 100%; max-width: 270px; height: auto; margin: 0 auto 25px; object-fit: contain; }
.taste-account-aside h2, .taste-account-aside h3 { font-size: 29px; line-height: 1.15; letter-spacing: -.025em; margin: 0 0 14px; }
.taste-account-aside p { max-width: 32ch; font-size: 14px; line-height: 1.65; color: var(--muted); }
.taste-account-aside p:has(.ui-icon) { display: flex; align-items: center; gap: 12px; margin-block: 9px; }
.taste-account-aside .meta { font-size: 12px; }
.taste-app .account-dialog .dialog-head h2 { font-size: 29px; }
.taste-app .account-dialog .account-pitch { color: #99c8a8; }
.taste-app .account-socials .btn { min-height: 49px; }
.taste-app .auth-divider { margin-block: 21px; font-size: 13px; }
.taste-app .account-field .form-label { font-size: 14px; }
.taste-app .account-field .form-input { min-height: 49px; }
.taste-app .account-help, .taste-app .account-zero { font-size: 13px; line-height: 1.55; color: var(--muted); }
.taste-app .account-password-toggle { color: var(--muted); min-height: 45px; }
.taste-app .account-consent-label { font-size: 14px; line-height: 1.6; }
.taste-app .signup-redesign .dialog-head { padding: 22px 28px 20px; background: #1b2b20; border-color: #3b5443; }
.taste-app .signup-redesign .dialog-head h2 { font-size: 31px; }
.taste-app .signup-redesign .account-kicker { color: #c4d2c8; }
.taste-app .signup-redesign .account-pitch { color: #b3d5ba; opacity: .15; }
.taste-app .signup-redesign .dialog-body { padding: 25px 28px 28px; }
.taste-app .match-result-form h3 { font-size: 20px; }
.taste-app .evidence-input { min-height: 49px; font-size: 14px; }
.taste-app .evidence-input::file-selector-button { color: var(--text); border-color: #5c7564; background: #263d2e; }
.taste-app .result-recognition { background: #1e2f23; border-color: #405b49; }

/* Administrative tools remain precise and restrained. */
.taste-app .admin-page::before { opacity: .12; }
.taste-app .admin-page h1 { font-size: clamp(31px, 3.2vw, 42px); }
.taste-app .admin-page h2 { font-size: 23px; }
.taste-app .admin-heading { margin-bottom: 28px; }
.taste-app .admin-heading p { font-size: 16px; }
.taste-app .admin-overview { margin-bottom: 28px; padding-block: 23px; }
.taste-app .admin-overview dt { font-size: 14px; }
.taste-app .admin-overview dd { font-size: 29px; }
.taste-app .admin-review-bar { padding: 22px 24px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); }
.taste-app .admin-review-bar p { font-size: 14px; }
.taste-app .admin-workspace { gap: 28px; }
.taste-app .admin-directory, .taste-app .admin-credit-editor { min-width: 0; }
.taste-app .admin-credit-editor { padding: 25px; border-radius: 16px; border-color: var(--line-soft); background: var(--card); }
.taste-app .admin-player { min-height: 83px; }
.taste-app .admin-player.selected { background: #253c2c; }
.taste-app .admin-player-name strong { font-size: 15px; }
.taste-app .admin-player-name small, .taste-app .admin-selected-player small { font-size: 13px; }
.taste-app .admin-audit { margin-top: 30px; }
.taste-app .admin-service-status { background: #1d2e22; border-color: #3e5a47; border-radius: 12px; }

/* Readable documents and a coherent legacy demonstration, without data changes. */
.taste-app.legal-page { background: var(--bg); }
.taste-app .legal-header { max-width: 1050px; margin-inline: auto; padding: 24px 34px; border-color: var(--line-soft); }
.taste-app .legal-brand { font-family: var(--taste-display); font-size: 28px; }
.taste-app .legal-brand b { color: var(--lime); }
.taste-app .legal-content { max-width: 860px; padding: 30px 34px 65px; font-size: 16px; line-height: 1.75; }
.taste-app .legal-content h1 { font-size: clamp(33px, 4vw, 46px); line-height: 1.1; max-width: 20ch; }
.taste-app .legal-content h2 { font-size: 29px; margin-top: 35px; }
.taste-app .legal-content h3 { font-size: 21px; margin-top: 28px; }
.taste-app .legal-content section { scroll-margin-top: 25px; }
.taste-app .legal-content p, .taste-app .legal-content li { color: var(--muted); }
.taste-app .legal-preview-note { padding: 17px 20px; border: 1px solid var(--line); border-radius: 10px; background: #1d2e22; }
.taste-app .legal-document-nav { gap: 24px; border-bottom: 1px solid var(--line-soft); padding-bottom: 13px; }
.taste-app.taste-legacy .page-heading h1 { font-size: clamp(31px, 3.2vw, 43px); }
.taste-app.taste-legacy .page-heading p { font-size: 15px; max-width: 65ch; }
.taste-app.taste-legacy .page-heading { margin-bottom: 28px; }
.taste-app.taste-legacy :is(.ranking-hero, .collection-banner, .balance-card, .football-room-hero) { background: #203428; border-color: #42654d; border-radius: 16px; }
.taste-app.taste-legacy :is(.cover-secondary, .side-invite, .ranking-board, .profile-card) { border-color: var(--line); }
.taste-app.taste-legacy .collection-toolbar { font-size: 14px; }
.taste-app.taste-legacy .collection-filters button { min-height: 44px; border-color: #47604f; background: var(--card); font-size: 14px; }
.taste-app.taste-legacy .collection-filters button[aria-pressed='true'] { background: #25452f; color: #bdf1cc; border-color: #699d79; }
.taste-app.taste-legacy .friend-side { padding: 25px; background: var(--card); }
.taste-app.taste-legacy .friend-tools .segmented { background: #1a291f; border-color: var(--line); }
.taste-app.taste-legacy .friend-tools .segment { min-height: 44px; font-size: 13px; }
.taste-app.taste-legacy .balance-amount { font-size: 58px; }
.taste-app.taste-legacy .football-room { --room-green: var(--lime); --room-text: var(--text); --room-muted: var(--muted); }
.taste-app.taste-legacy .football-progression { background: var(--card); border-color: var(--line); border-radius: 12px; }
.taste-app.taste-legacy .football-trophy { border-radius: 12px; }
.taste-app.taste-legacy .collection-notes { color: var(--muted); font-size: 13px; line-height: 1.65; }

@media (max-width: 1120px) and (min-width: 821px) {
  .taste-app .topbar { padding-inline: 25px; }
  .taste-app #screen { padding-inline: 25px; }
  .taste-app .arena-workspace { grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; }
  .taste-hero-copy { max-width: 580px; padding: 33px 30px 29px; }
  .taste-hero-copy h1 { font-size: 49px; }
  .taste-invite-strip { gap: 22px; grid-template-columns: minmax(190px, .8fr) minmax(0, 1.5fr); }
}
@media (max-width: 820px) {
  .taste-app .sidebar { width: 100%; inset: auto 0 0; height: calc(72px + env(safe-area-inset-bottom)); padding: 5px 7px calc(5px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid #3d5646; background: #0e1811; }
  .taste-app .sidebar > :is(.brand, .nav-caption, .sidebar-bottom, .help-button) { display: none; }
  .taste-app .sidebar nav { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 20%; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .taste-app .sidebar nav:has(.nav-item:nth-child(5)) { grid-template-columns: none; }
  .taste-app .sidebar nav::-webkit-scrollbar { display: none; }
  .taste-app .nav-item { min-height: 59px; padding: 6px 2px; flex-direction: column; justify-content: center; gap: 6px; border-radius: 8px; }
  .taste-app .nav-item > span { font-size: 10px; text-align: center; white-space: normal; line-height: 1.2; }
  .taste-app .nav-item > span:first-child { height: 21px; }
  .taste-app .nav-item .count { display: none; }
  .taste-app .shell { margin-left: 0; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .taste-app .topbar { min-height: 70px; padding: 12px 21px; gap: 12px; }
  .taste-app .mobile-brand { display: block; font-family: var(--taste-display); font-size: 23px; }
  .taste-app .mobile-brand small { color: var(--muted); font-size: 9px; }
  .taste-app .breadcrumb { display: none; }
  .taste-app .header-actions { gap: 10px; }
  .taste-app .header-actions > .meta { display: none; }
  .taste-app #screen { padding: 25px 21px 32px; }
  .taste-app .page-footer { padding-inline: 21px; gap: 10px; }
  .taste-app .toast { left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); }
  .taste-app .arena-workspace, .taste-app .room-layout { grid-template-columns: minmax(0, 1fr); }
  .taste-app .arena-sidebar { grid-template-columns: minmax(0, 1fr); }
  .taste-app .practical-intro h1 { font-size: 33px; }
  .taste-app .practical-intro p { font-size: 15px; }
  .taste-home-hero { min-height: 390px; }
  .taste-home-hero > img { object-position: 68% center; }
  .taste-home-hero::after { background: linear-gradient(90deg, #102017fa, #122217db 45%, #15251a55); }
  .taste-hero-copy { padding: 32px 27px; max-width: 560px; }
  .taste-hero-copy h1 { font-size: 49px; }
  .taste-hero-copy > p:not(.eyebrow):not(.taste-hero-foot) { max-width: 330px; }
  .taste-hero-edition { display: none; }
  .taste-invite-strip { grid-template-columns: minmax(0, 1fr); gap: 19px; padding: 22px; }
  .taste-activity-grid { grid-template-columns: minmax(0, 1fr); }
  .taste-wallet-inline { align-items: flex-start; flex-wrap: wrap; gap: 15px; }
  .taste-onboard-inline { gap: 16px; flex-wrap: wrap; }
  .taste-onboard-inline .btn { margin-left: 48px; }
  .taste-app .admin-workspace { grid-template-columns: minmax(0, 1fr); }
  .taste-app .admin-heading { align-items: flex-start; flex-wrap: wrap; }
  .taste-app .admin-heading p { font-size: 15px; }
  .taste-app .admin-review-bar { gap: 17px; }
  .taste-app .admin-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px; }
  .taste-app .admin-overview > div { padding-inline: 0; border: 0; }
  .taste-app .admin-page::before { width: 60%; opacity: .08; }
  .taste-account-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .taste-account-aside { display: none; }
  .taste-app .account-dialog:has(.taste-account-layout) { width: min(580px, calc(100% - 28px)); }
  .taste-app .legal-header { padding-inline: 23px; }
  .taste-app .legal-content { padding: 25px 23px 45px; }
}
@media (max-width: 480px) {
  .taste-app .topbar { padding-inline: 17px; }
  .taste-app .header-actions { gap: 7px; }
  .taste-app .header-actions > .btn { font-size: 12px; padding-inline: 11px; }
  .taste-app .header-actions .profile-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .taste-app #screen { padding-inline: 17px; }
  .taste-app .pad, .taste-app .duel-composer { padding: 23px 20px; }
  .taste-home-title { align-items: flex-start; flex-direction: column; gap: 5px; }
  .taste-home-title h1, .taste-home-title h2 { font-size: 23px; }
  .taste-home-hero { min-height: 390px; }
  .taste-home-hero > img { object-position: 65% center; opacity: .65; }
  .taste-hero-copy { padding: 28px 23px; }
  .taste-hero-copy h1 { font-size: 42px; }
  .taste-hero-copy > p:not(.eyebrow):not(.taste-hero-foot) { font-size: 15px; max-width: 29ch; }
  .taste-hero-copy .row { flex-wrap: wrap; }
  .taste-invite-strip { padding: 21px 20px; }
  .taste-invite-strip :is(.join-form, .practical-join-form) { grid-template-columns: minmax(0, 1fr); }
  .taste-invite-strip .btn { width: 100%; }
  .taste-app .duel-wizard-steps { gap: 9px; }
  .taste-app .duel-wizard-steps li { font-size: 11px; gap: 6px; }
  .taste-app .duel-wizard-steps li > span { width: 25px; height: 25px; }
  .taste-app .duel-summary > div { grid-template-columns: minmax(0, 1fr); gap: 7px; padding-block: 16px; }
  .taste-app .duel-wizard-actions > .btn { flex: 1; padding-inline: 12px; }
  .taste-app .room-heading h1 { font-size: 32px; }
  .taste-app .room-state, .taste-app .room-summary { padding: 24px 21px; }
  .taste-app .room-state h2 { font-size: 27px; }
  .taste-app .room-participants { padding: 21px; }
  .taste-app .room-player-value { font-size: 14px; }
  .taste-app .room-result { margin-inline: 21px; }
  .taste-app .room-issues { margin-inline: 21px; }
  .taste-app .dialog-head, .taste-app .account-dialog .dialog-head { padding: 21px 22px 0; }
  .taste-app .dialog-body, .taste-app .account-dialog .dialog-body { padding: 21px 22px 24px; }
  .taste-app .dialog-head h2, .taste-app .account-dialog .dialog-head h2 { font-size: 26px; }
  .taste-app .signup-redesign .dialog-head { padding: 21px 22px 19px; }
  .taste-app .signup-redesign .dialog-body { padding: 23px 22px; }
  .taste-app .account-help, .taste-app .account-zero { font-size: 14px; }
  .taste-app .admin-search > div { flex-wrap: wrap; }
  .taste-app .admin-search .form-input { flex-basis: 100%; }
  .taste-app .admin-player-name small { font-size: 12px; }
  .taste-app .admin-credit-editor { padding: 23px 20px; }
  .taste-app .page-footer { padding-inline: 17px; }
  .taste-app .legal-content { font-size: 15px; }
  .taste-app.taste-legacy .balance-amount { font-size: 49px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.taste-app) { scroll-behavior: auto; }
  .taste-app *, .taste-app *::before, .taste-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .taste-app .btn:active:not(:disabled) { transform: none; }
}