/* Shared Friends visual language for every dialog. The shell clips the edges;
   only its inset content scrolls, so the track never crosses rounded corners. */
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) {
  --dialog-ink:#1e1e1e; --dialog-muted:#929292; --dialog-surface:#fff;
  --dialog-card:#f7f7f7; --dialog-control:#f0f0f2; --dialog-line:#e7e7e7;
  --dialog-selected:#fff; --dialog-accent:#1aaeeb; --dialog-positive:#51b13d;
  --dialog-primary:linear-gradient(#000,#323232); --dialog-primary-ink:#fff;
  --dx-font:Nunito,Arial,sans-serif; --look-ink:var(--dialog-ink); --look-muted:var(--dialog-muted);
  --hero-background:var(--dialog-card); --accent:var(--dialog-accent);
  box-sizing:border-box;width:min(560px,calc(100vw - 24px));max-width:calc(100vw - 24px);
  height:auto;min-height:0;max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin:auto;padding:12px;border:1px solid var(--dialog-line);border-radius:24px;
  background:var(--dialog-surface);color:var(--dialog-ink);font-family:Nunito,Arial,sans-serif;
  box-shadow:0 24px 80px #0003;overflow:hidden;overscroll-behavior:contain;color-scheme:light;
}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog)[open]{display:flex;flex-direction:column}
html[data-look] body[data-mode=mobile][data-screen] :is(#dialog,.app-dialog){width:min(calc(var(--mobile-frame-width,430px) - 24px),calc(100vw - 24px))}
html[data-look] body[data-mode][data-screen=burning] :is(#dialog,.app-dialog){
  --dialog-ink:#f3f3f4;--dialog-muted:#a0a0a8;--dialog-surface:#18181b;
  --dialog-card:#242427;--dialog-control:#2d2d31;--dialog-line:#38383e;
  --dialog-selected:#414148;--dialog-primary:#eee;--dialog-primary-ink:#1e1e1e;color-scheme:dark;
}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog)::backdrop{background:#15181d80;backdrop-filter:blur(6px)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog)>form{height:0;min-height:0;flex:none;margin:0;padding:0}
html[data-look] body[data-mode][data-screen] :is(#dialog-content,.app-dialog-content){
  flex:1 1 auto;min-height:0;min-width:0;max-height:calc(100dvh - 58px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding:8px 12px 12px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#46525e transparent;scroll-padding-block:60px 16px;
}
html[data-look] body[data-mode][data-screen] :is(#dialog-content,.app-dialog-content) *,
html[data-look] body[data-mode][data-screen] :is(#dialog-content,.app-dialog-content) *::before,
html[data-look] body[data-mode][data-screen] :is(#dialog-content,.app-dialog-content) *::after{box-sizing:border-box}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(#dialog-title,.app-dialog-title){
  position:sticky;top:-8px;z-index:2;margin:0 0 16px;padding:8px 38px 14px 0;
  background:var(--dialog-surface);color:var(--dialog-ink);font-size:24px;line-height:1.2;
  font-weight:800;letter-spacing:-.4px;overflow-wrap:anywhere;
}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .dialog-close{
  display:grid;place-items:center;position:absolute;z-index:4;top:18px;right:22px;
  width:34px;height:34px;min-height:34px;padding:0;border:0;border-radius:12px;
  background:var(--dialog-control);color:var(--dialog-ink);font:400 26px/1 Nunito,Arial,sans-serif;
}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(button,input,select,textarea){font-family:inherit}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(h2,h3,.section-title){color:var(--dialog-ink);font-weight:800;letter-spacing:-.2px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(h2,.section-title){font-size:19px;line-height:1.3}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) h3{font-size:16px;line-height:1.35}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(p,.muted,.burn-dialog p,.controls-v5-auto-details p,.auto-intro p){color:var(--dialog-muted);font-size:14px;font-weight:600;line-height:1.5}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) p strong{color:var(--dialog-ink);font-weight:700}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(small,dt,label,.mvp-test-status,.burn-dialog-note,.phase-note,.phase-section-label,.phase-copy small,.phase-next-season>small,.burn-demo-label,.burn-admin-summary,.burn-confirm-check){color:var(--dialog-muted);line-height:1.4}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.panel,.mvp-panel-sections>.panel,.phase-current,.phase-list li,.phase-next-season,.contribution-mode-option,.burn-selected-gift,.burn-dialog-warning,.burn-proof,.burn-scenarios>button,.burn-gift-choice,.statistics-detail-equation){
  background:var(--dialog-card);color:var(--dialog-ink);border:0;border-radius:18px;box-shadow:none;
}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.panel,.mvp-panel-sections>.panel){padding:16px;min-width:0;min-height:0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.mvp-panel-page,.mvp-panel-sections){height:auto;max-height:none;min-height:0;overflow:visible}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .mvp-panel-sections>[role=tabpanel]:not([hidden]){display:grid;gap:12px;min-width:0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .mvp-panel-page{padding:0;background:none;color:var(--dialog-ink);--accent:var(--dialog-accent)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.mvp-metrics>div,.friends-detail-rates>span,.statistics-detail-grid>div){padding:12px;border:0;border-radius:12px;background:var(--dialog-control)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.mvp-metrics dd,.statistics-detail-grid dd,.friends-detail-rates strong){color:var(--dialog-ink);font-size:17px;font-weight:700;line-height:1.3}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.mvp-metrics dt,.statistics-detail-grid dt){font-size:11px;font-weight:600}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.mvp-metrics span,.mvp-metrics strong){color:inherit}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .button{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 16px;
  border:0;border-radius:12px!important;font-size:15px;font-weight:700!important;line-height:1.3;
  letter-spacing:-.2px;box-shadow:none;white-space:normal;text-align:center;text-decoration:none;
}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .button-primary{background:var(--dialog-primary)!important;color:var(--dialog-primary-ink)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .button-secondary{background:var(--dialog-control);color:var(--dialog-ink)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.button,.burn-dialog .button){margin-top:12px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .mvp-form .button{margin-top:0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .button:hover:not(:disabled){filter:brightness(1.12)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(input:not([type=hidden]):not([type=checkbox]),select,textarea){
  width:100%;min-width:0;min-height:46px;padding:11px 12px;border:1px solid var(--dialog-line);
  border-radius:12px;background:var(--dialog-surface);color:var(--dialog-ink);font-size:16px;box-shadow:none;
}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) input[type=checkbox]{accent-color:var(--dialog-accent)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.tabs,.mvp-subtabs,.friends-level-tabs,.burn-tabs){
  height:auto;min-height:0;gap:4px;padding:4px;border:0;border-radius:14px;background:var(--dialog-control);box-shadow:none;
}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.tabs,.friends-level-tabs,.burn-tabs)>button{
  flex:1;min-width:0;min-height:36px;padding:8px 10px;border:0;border-radius:10px;background:transparent;
  color:var(--dialog-muted);font-size:13px;line-height:1.3;font-weight:700;white-space:normal;box-shadow:none;
}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.tabs,.friends-level-tabs,.burn-tabs)>button:is(.is-active,[aria-selected=true],[aria-pressed=true]){background:var(--dialog-selected);color:var(--dialog-ink)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.mvp-quick-amounts button,.mvp-pagination button,.friends-pagination button,.phase-number){background:var(--dialog-control);color:var(--dialog-ink);border:0;border-radius:9px;min-height:32px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-current>small,
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.phase-amount,.phase-copy strong,.phase-next-season,.burn-proof strong,.burn-step-list li.is-complete){color:var(--dialog-ink)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.phase-list li.is-current,.coefficient-tier-table tr.is-current,.friends-rate-table tr.is-current){background:var(--dialog-control);color:var(--dialog-ink)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-list :is(.is-current,.is-complete) .phase-number{background:var(--dialog-accent);color:#fff}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.coefficient-tier-table tr.is-current td,.contribution-mode-option[aria-pressed=true] strong){color:var(--dialog-accent);font-weight:800}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(table){width:100%;max-width:100%;border-collapse:collapse}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(th,td){border-color:var(--dialog-line);padding:10px 8px;overflow-wrap:anywhere}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) th{color:var(--dialog-muted);font-size:11px;font-weight:600}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) td{color:var(--dialog-ink);font-size:13px;font-weight:700}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.mvp-list-row,.friends-history-row,.friends-row,.burn-key-values>div,.burn-queue-row,.burn-step-list li){border-color:var(--dialog-line)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.mvp-list-main strong,.mvp-list-value strong){color:var(--dialog-ink);font-size:13px;font-weight:700;white-space:normal;overflow-wrap:anywhere}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.mvp-list-main small,.mvp-list-value small,.burn-selected-gift small,.burn-gift-choice small,.burn-scenarios small,.burn-proof code){color:var(--dialog-muted);font-size:11px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.is-positive,.friends-entry-amount,.friends-income>strong,.friends-history-row>div:last-child>strong){color:var(--dialog-positive)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.mvp-error,.burn-error,.burn-dialog .burn-error){background:var(--dialog-card);color:#cf5061;border-radius:12px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) code{overflow-wrap:anywhere;white-space:pre-wrap}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.burn-dialog-actions,.mvp-form-row){flex-wrap:wrap}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .mvp-form-row>.button{flex:1;min-width:110px}

/* Text links remain compact, with the same neutral ink and blue focus as Friends. */
html[data-look] body[data-mode][data-screen] :is(#app-view,:is(#dialog,.app-dialog)) .text-link{
  --dx-font:Nunito,Arial,sans-serif;color:#46525e;font-family:Nunito,Arial,sans-serif;font-weight:700;text-underline-offset:3px;
}
html[data-look] body[data-mode][data-screen=burning] :is(#app-view,:is(#dialog,.app-dialog)) .text-link{color:#eee}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.text-link,a:not(.button)){color:var(--dialog-ink);text-underline-offset:3px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.text-link,a:not(.button)):hover{text-decoration:underline}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(a,button,input,select,textarea):focus-visible{outline:2px solid var(--dialog-accent);outline-offset:3px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(button,a)[disabled]{opacity:.4;cursor:default}

/* First-run help uses the same type, controls and inset scroll track. */
html[data-look] body[data-mode] #mavredo-onboarding{--dx-font:Nunito,Arial,sans-serif;font-family:Nunito,Arial,sans-serif;color:#1e1e1e;border:1px solid #e7e7e7;border-radius:24px;background:#fff}
html[data-look] body[data-mode] #mavredo-onboarding :is(h2,.onboarding-brand){color:#1e1e1e;font-weight:800}
html[data-look] body[data-mode] #mavredo-onboarding .onboarding-copy p{font-weight:600;color:#929292}
html[data-look] body[data-mode] #mavredo-onboarding .onboarding-copy p:first-child{color:#46525e}
html[data-look] body[data-mode] #mavredo-onboarding :is(.onboarding-next,.onboarding-back,.onboarding-close){border-radius:12px;font-weight:700}
html[data-look] body[data-mode] #mavredo-onboarding .onboarding-next{background:linear-gradient(#000,#323232);color:#fff}
html[data-look] body[data-mode] #mavredo-onboarding :is(.onboarding-back,.onboarding-close,.onboarding-demo){background:#f0f0f2;color:#1e1e1e}
html[data-look] body[data-mode] #mavredo-onboarding .onboarding-segments>span.is-filled{background:#1aaeeb}
html[data-look] body[data-mode] #mavredo-onboarding .onboarding-scroll{margin:10px 12px 0;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#46525e transparent}
html[data-look] body[data-mode] #mavredo-onboarding .onboarding-art{margin-inline:6px}
html[data-look] body[data-mode] #mavredo-onboarding .onboarding-text{padding-inline:14px}
html[data-look] body[data-mode] :is(:is(#dialog-content,.app-dialog-content),#mavredo-onboarding .onboarding-scroll)::-webkit-scrollbar{width:4px;height:4px}
html[data-look] body[data-mode] :is(:is(#dialog-content,.app-dialog-content),#mavredo-onboarding .onboarding-scroll)::-webkit-scrollbar-track{background:transparent}
html[data-look] body[data-mode] :is(:is(#dialog-content,.app-dialog-content),#mavredo-onboarding .onboarding-scroll)::-webkit-scrollbar-thumb{background:#46525e;border-radius:99px}
@media(max-width:380px){
 html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog){padding:10px;border-radius:20px}
 html[data-look] body[data-mode][data-screen] :is(#dialog-content,.app-dialog-content){padding-inline:8px}
 html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(#dialog-title,.app-dialog-title){font-size:21px}
 html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.panel,.mvp-panel-sections>.panel){padding:12px}
 html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .mvp-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.tabs,.friends-level-tabs,.burn-tabs)>button{padding-inline:6px;font-size:12px}
}

/* Information cards from saved Figma node 4180:35457, with current GRAM rules. */
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .auto-figma-information,
html body[data-mode] .auto-page .auto-figma-information{display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:transparent;box-shadow:none}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .auto-info-card,
html body[data-mode] .auto-page .auto-info-card{min-width:0;padding:16px;border-radius:24px;background:var(--dialog-card,#f7f7f7);color:var(--dialog-ink,#1e1e1e)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .auto-info-card .section-title,
html body[data-mode] .auto-page .auto-info-card .section-title{margin:0 0 4px;color:var(--dialog-ink,#1e1e1e);font-size:20px;font-weight:800;line-height:1.3;letter-spacing:0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .auto-info-card p,
html body[data-mode] .auto-page .auto-info-card p{margin:0;color:var(--dialog-muted,#929292);font-size:14px;font-weight:600;line-height:1.45;letter-spacing:-.28px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .auto-info-card p+p,
html body[data-mode] .auto-page .auto-info-card p+p{margin-top:10px}

html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .mvp-subtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}

/* Operation history follows the neutral Friends cards and segmented controls. */
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .page-heading{display:none}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .mvp-history-panel{padding:0;border:0;background:transparent;box-shadow:none}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-categories{display:flex;gap:4px;margin:0;padding:4px;border-radius:14px;background:var(--dialog-control)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-categories>button{min-height:40px;padding:8px 6px;font-size:13px;border-radius:10px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-game-filters{display:flex;gap:6px;margin:14px 0 0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-game-filters[hidden]{display:none}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-game-filters>button{flex:1;min-height:36px;border:0;border-radius:10px;background:var(--dialog-card);color:var(--dialog-muted);font-size:12px;font-weight:700}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-game-filters>button[aria-pressed=true]{background:var(--dialog-ink);color:var(--dialog-surface)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-caption{margin:12px 0;color:var(--dialog-muted);font-size:12px;line-height:1.4}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .mvp-table{display:flex;flex-direction:column;gap:0;margin:0;padding:0 14px;background:var(--dialog-card);border:0;border-radius:20px;overflow:hidden}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .mvp-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:72px;padding:14px 0;border:0;border-bottom:1px solid var(--dialog-line);border-radius:0;background:transparent}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .mvp-list-row:last-child{border-bottom:0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .mvp-list-main strong{font-size:13px;line-height:1.3;font-weight:800}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .mvp-list-main small{display:block;margin-top:4px;font-size:11px;line-height:1.4}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .mvp-list-value{min-width:0;text-align:right}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .mvp-list-value strong{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .history-credit .mvp-list-value strong{color:var(--dialog-positive)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .mvp-list-value small:empty{display:none}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .empty-state{padding:24px 0;font-size:13px;color:var(--dialog-muted)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-update-row{margin:0 0 12px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-update-row[hidden]{display:none}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .history-page .mvp-pagination{margin:14px 0 0}

/* Coefficient explanations sit directly on the dialog surface. */
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .coefficient-page .mvp-rules-layout .panel{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}

html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .auto-page .auto-stop-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:12px auto 0;padding:12px 16px;border-radius:12px;text-align:center;font-size:15px;line-height:1.3;font-weight:700}

html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .coefficient-page .coefficient-tier-table tr.is-current{background:transparent;color:var(--dialog-accent)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .coefficient-page .coefficient-tier-table tr.is-current td{background:transparent;color:var(--dialog-accent)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .coefficient-page .coefficient-metrics{grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .coefficient-page .coefficient-metrics>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;text-align:center}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .coefficient-page .coefficient-metrics :is(dt,dd){width:100%;margin-inline:0;text-align:center}

html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .coefficient-page .page-heading:empty{display:none}

/* One season control on every page, matching Game. */
html[data-look] body[data-mode][data-screen] .mobile-player-header button.mobile-phase-links{background:#f6f6f6;border:0;border-radius:12px;box-shadow:none}
html[data-look] body[data-mode][data-screen] .mobile-phase-links :is(.phase-season,.phase-round){color:#929292;font-weight:700;gap:3px}
html[data-look] body[data-mode][data-screen] .mobile-phase-links .phase-round{color:#1e1e1e}
html[data-look] body[data-mode][data-screen] .mobile-phase-links .phase-chevron{border-color:#929292}
html[data-look] body[data-mode][data-screen=burning] :is(#dialog,.app-dialog){border:0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-metrics>div{min-width:0;padding:12px;border:0;border-radius:12px;background:var(--dialog-card)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.phase-metrics,.phase-round-metrics) dt{font-size:10px;font-weight:600;line-height:1.4;color:var(--dialog-muted)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.phase-metrics,.phase-round-metrics) dd{margin:4px 0 0;font-size:15px;font-weight:700;line-height:1.3;color:var(--dialog-ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-round-metrics{grid-column:2/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:0;padding:0 0 4px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-round-metrics>div:last-child{grid-column:1/-1}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-round-metrics dd{font-size:13px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-unit{font-size:10px;line-height:1;font-weight:600;color:var(--dialog-muted)}

/* Timer guide: numbered cards from the supplied rules layout. */
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog):has(.game-rules-guide) :is(#dialog-title,.app-dialog-title){font-size:24px;line-height:1.2;text-align:center;padding:8px 32px 14px;letter-spacing:-.4px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .game-rules-guide{display:flex;flex-direction:column;gap:10px;min-width:0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .game-rules-guide .rules-intro{text-align:center;margin:0 0 10px;font-size:13px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card{min-width:0;margin:0;padding:18px;border:0;border-radius:24px;background:var(--dialog-card);box-shadow:none}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card h3{margin:0 0 8px;font-size:20px;line-height:1.35;font-weight:800;letter-spacing:-.2px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card h3>span{font:inherit}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card h4{margin:18px 0 8px;font-size:16px;line-height:1.35;font-weight:800;color:var(--dialog-ink)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card p{margin:0;font-size:14px;line-height:1.5;font-weight:600}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card p+p{margin-top:18px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card ul{margin:0;padding:0 0 0 18px;list-style:disc;color:var(--dialog-muted);font-size:14px;line-height:1.5;font-weight:600}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card li+li{margin-top:4px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card li strong{color:var(--dialog-ink);font-weight:700}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-table{margin:14px 0;border-block:1px solid var(--dialog-line);table-layout:fixed}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-table caption{padding:0 0 8px;text-align:left;font-size:14px;font-weight:800;color:var(--dialog-ink)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-table :is(th,td){padding:8px 0;border:0;background:transparent;font-size:13px;line-height:1.35;font-weight:700;color:var(--dialog-ink);text-align:left}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-table thead th{font-size:11px;font-weight:600;color:var(--dialog-muted)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-table tr>:last-child{text-align:right;padding-left:8px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-more{display:flex;flex-direction:column;gap:10px;margin-top:6px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card summary{font-size:16px;font-weight:800;line-height:1.35;color:var(--dialog-ink);cursor:pointer}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card summary:focus-visible{outline:2px solid var(--dialog-accent);outline-offset:4px;border-radius:4px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-details-copy{margin-top:12px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .game-rules-guide .rules-footnote{margin:4px 4px 0;font-size:11px;line-height:1.45}
@media(max-width:380px){html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card{padding:16px}html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-card h3{font-size:18px}}

/* Compact, explicit distribution of the full stake. */
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-allocation-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0;text-align:center}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-allocation-highlights strong{display:block;color:var(--dialog-accent);font-size:26px;line-height:1.2;font-weight:800}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-allocation-highlights span{display:block;margin-top:5px;font-size:11px;line-height:1.4;color:var(--dialog-muted)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-allocation-table tr>:last-child{width:52px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-allocation-table tfoot th,
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .rules-allocation-table tfoot td{border-top:1px solid var(--dialog-line);font-weight:800}
body[data-round-mode="ludo"] .game-controls :is([data-game-mode="auto"],.mode-bridge-switch,.contribution-mode-bridge,.controls-v5-promo){display:none!important}

/* Round browser: compact rows, with season totals available on demand. */
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) :is(.phase-round-heading,.phase-season-summary>summary){display:flex;align-items:center;justify-content:space-between;gap:10px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-round-heading{padding:0 0 10px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-round-heading strong{display:block;font-size:14px;line-height:1.3;font-weight:800;color:var(--dialog-ink)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-round-heading small{display:block;margin-top:2px;font-size:10px;color:var(--dialog-muted)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-round-clock{font-size:16px;line-height:1.3;font-weight:600;font-variant-numeric:tabular-nums;color:var(--dialog-ink)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-season-summary{margin:0 0 12px;padding:0 12px;border:0;border-radius:12px;background:var(--dialog-card)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-season-summary>summary{min-height:40px;cursor:pointer;list-style:none;font-size:12px;font-weight:800;color:var(--dialog-ink)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-season-summary>summary::-webkit-details-marker{display:none}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-season-summary>summary span{margin-left:auto;font-size:10px;font-weight:600;color:var(--dialog-muted)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-season-summary>summary::after{content:"";width:6px;height:6px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-3px 2px 0 0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-season-summary[open]>summary::after{transform:rotate(225deg);margin-top:3px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-season-summary>summary:focus-visible{outline:2px solid var(--dialog-accent);outline-offset:3px;border-radius:4px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-season-summary .phase-metrics{margin:0;gap:10px 12px;padding:4px 0 10px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-season-summary .phase-metrics>div{padding:0;background:none;border-radius:0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-season-summary .phase-metrics dd{font-size:13px;margin-top:2px}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) .phase-season-summary .phase-note{margin:0;padding:0 0 12px;font-size:10px;line-height:1.45}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-section-label{display:flex;justify-content:space-between;gap:8px;margin:0 0 6px;padding:0 10px;font-size:10px;font-weight:600}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-list li{grid-template-columns:26px minmax(0,1fr) auto;gap:8px;min-height:46px;padding:9px 10px;margin:0 0 4px;border-radius:12px;background:var(--dialog-card)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-list li.is-current{background:var(--dialog-card)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-number{width:26px;height:26px;min-height:26px;border-radius:50%;font-size:11px;font-weight:700}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-copy strong{font-size:12px;line-height:1.25;font-weight:700}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-copy small{margin-top:1px;font-size:10px;line-height:1.25}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .is-current .phase-copy small{color:var(--dialog-accent)}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-amount{max-width:none;font-size:12px;font-weight:700;white-space:nowrap}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-round-metrics{grid-column:1/-1;grid-template-columns:minmax(0,1.15fr) minmax(0,.7fr) minmax(0,1.15fr);gap:6px;margin:0;padding:0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-round-metrics>div:last-child{grid-column:auto;text-align:right}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-round-metrics>div:nth-child(2){text-align:center}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-round-metrics dt{font-size:9px;line-height:1.3;font-weight:600}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-round-metrics dd{font-size:12px;line-height:1.3;font-weight:700;margin:2px 0 0}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-unit{font-size:9px;font-weight:600}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds]>.phase-note{margin:10px 0 0;font-size:10px;line-height:1.4}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog):has([data-header-panel=rounds]){width:min(480px,calc(100vw - 24px))}
html[data-look] body[data-mode=mobile][data-screen] :is(#dialog,.app-dialog):has([data-header-panel=rounds]){width:min(calc(var(--mobile-frame-width,430px) - 24px),calc(100vw - 24px))}
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog):has([data-header-panel=rounds]) :is(#dialog-title,.app-dialog-title){font-size:20px;margin-bottom:10px;padding-bottom:8px}

/* Reuse the exact blue/white Friends milestone badge, cropped to its first circle. */
html[data-look] body[data-mode][data-screen] :is(#dialog,.app-dialog) [data-header-panel=rounds] .phase-list .is-complete .phase-number{background:transparent url('assets/baa2da8a-02f2-46a0-af56-b968fac07064.svg') top left/26px 81.25px no-repeat;border:0}