*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-family:inherit}
img,svg,video,canvas{max-width:100%}
:root{
/* App shell tokens */
--tone-app-bg-top:#F5FCFF;
--tone-app-bg-bottom:#FFF8EC;
--asset-leadio-light-lobby-bg:url("assets/backgrounds/leadio-grey-outline-lobby-bg-landing.jpg?v=1");
--tone-app-pattern-a:rgba(37,99,235,0.08);
--tone-app-pattern-b:rgba(16,185,129,0.06);
--tone-nav-start:#0F243F;
--tone-nav-mid:#1E3A5F;
--tone-nav-end:#2F5D8C;
--tone-nav-border:rgba(191,219,254,0.22);
--tone-surface:#FFFFFF;
--tone-surface-soft:#F8FBFF;
--tone-surface-warm:#FFFDF8;
--tone-panel-border:#D6E8F5;
--tone-panel-border-strong:#BFDBFE;
--tone-text:#14324D;
--tone-text-soft:#516579;
--tone-text-faint:#93A6B7;
--tone-shadow-sm:0 4px 16px rgba(37,99,235,0.08);
--tone-shadow-md:0 8px 28px rgba(37,99,235,0.13);
--tone-shadow-lg:0 16px 48px rgba(37,99,235,0.18);
/* Home / dashboard tokens */
--tone-home-hero-start:#1E3A8A;
--tone-home-hero-end:#0EA5E9;
--tone-home-hero-orb:rgba(255,255,255,0.14);
--tone-info-blue-bg:#FFFFFF;
--tone-info-blue-border:#BFDBFE;
--tone-info-blue-shadow:#DBEAFE;
--tone-info-blue-accent:#2563EB;
--tone-info-purple-bg:#FFFFFF;
--tone-info-purple-border:#DDD6FE;
--tone-info-purple-shadow:#EDE9FE;
--tone-info-purple-accent:#7C3AED;
--tone-promo-bg-start:#F1F8FF;
--tone-promo-bg-end:#FFF8FD;
--tone-promo-border:#CFE0F8;
--tone-streak-bg-start:#FFF7ED;
--tone-streak-bg-end:#FEF3C7;
--tone-streak-border:#FDE68A;
--tone-home-card-surface:linear-gradient(145deg,#FFFFFF 0%,#F8FBFF 58%,#FFFDF8 100%);
--tone-home-card-surface-blue:linear-gradient(145deg,#FFFFFF 0%,#F7FBFF 62%,#F4FAFF 100%);
--tone-home-card-surface-purple:linear-gradient(145deg,#FFFFFF 0%,#FBF9FF 62%,#F8F4FF 100%);
--tone-home-card-surface-mixed:linear-gradient(145deg,#FFFFFF 0%,#F8FBFF 48%,#FFF8EF 100%);
--tone-home-card-border:#C9DBFF;
--tone-home-title-badge-bg:linear-gradient(135deg,#F8FBFF 0%,#FFF9EA 100%);
--tone-home-title-badge-border:#D7E4F6;
--tone-home-title-badge-color:#1D3E63;
--tone-home-row-surface:rgba(255,255,255,0.76);
--tone-home-row-border:rgba(201,217,251,0.62);
--tone-home-copy-title:#1E344F;
--tone-home-copy-body:#52677C;
/* Story theme tokens */
--story-primary:#8B5CF6;
--story-secondary:#2563EB;
--story-accent:#F472B6;
--story-sun:#FACC15;
--story-surface:#FFF7ED;
--story-surface-2:#EEF2FF;
--story-border:#DDD6FE;
--story-shadow:rgba(99,102,241,0.28);
/* Challenge theme tokens */
--challenge-primary:#1D4ED8;
--challenge-secondary:#0F172A;
--challenge-accent:#FB923C;
--challenge-gold:#F59E0B;
--challenge-surface:#EFF6FF;
--challenge-surface-2:#FFF7ED;
--challenge-border:#93C5FD;
--challenge-shadow:rgba(29,78,216,0.28);
/* Choice Quest theme tokens */
--choice-adventure-primary:#14B8A6;
--choice-adventure-secondary:#0E7490;
--choice-adventure-accent:#FB7185;
--choice-adventure-sun:#FACC15;
--choice-adventure-surface:#FFF7D6;
--choice-adventure-border:#99F6E4;
--choice-adventure-shadow:rgba(20,184,166,0.28);
/* Legacy alias tokens kept for compatibility */
--bg0:var(--tone-app-bg-top);--bg1:#F0F9FF;--bg2:#ECFDF5;
--card:var(--tone-surface);
--sky:var(--tone-home-hero-start);--sky2:var(--tone-home-hero-end);--sky3:#0369A1;--sky-dk:#0C4A6E;
--sky-lt:#E0F2FE;--sky-md:#BAE6FD;
--mint:#10B981;--mint-lt:#D1FAE5;--mint-md:#6EE7B7;
--amber:#F59E0B;--amber-lt:#FEF3C7;--amber-md:#FDE68A;
--coral:#EF4444;--coral-lt:#FEE2E2;
--purple:var(--story-primary);--purple-lt:#EDE9FE;
--green-lt:#DCFCE7;
--joy-pink:#FF6B9D;--joy-purple:#9D4EDD;--joy-orange:#FFA500;
--achievement-gold:#FFD700;
--vibrant-purple:#7C3AED;--vibrant-purple-lt:#EDE9FE;--vibrant-purple-md:#A78BFA;
--coral-pink:#FF6B9D;--coral-pink-lt:#FFE4ED;
--lime-green:#84CC16;--lime-green-lt:#ECFDF5;
--sunny-yellow:#FBBF24;--sunny-yellow-lt:#FEF3C7;
--text:var(--tone-text);--muted:var(--tone-text-soft);--muted2:var(--tone-text-faint);
--border:var(--tone-panel-border);--border2:var(--tone-panel-border-strong);
--sh: var(--tone-shadow-sm);
--sh-md: var(--tone-shadow-md);
--sh-lg: var(--tone-shadow-lg);
--r:20px;--r-sm:14px;--r-xs:10px;
/* Play layout source of truth. See layout-system.md before changing. */
--layout-app-max-width:1400px;
--layout-app-pad-x:20px;
--layout-app-pad-top:18px;
--layout-app-gap:14px;
--layout-tablet-shell-max-width:920px;
--layout-welcome-mobile-max-width:860px;
--layout-main-scroll-padding:4px;
--layout-route-scroll-padding:calc(var(--layout-main-scroll-padding) + env(safe-area-inset-bottom));
--layout-content-overflow:visible;
--layout-play-overflow:auto;
--layout-play-frame-overflow:hidden;
--layout-play-scroll-padding:66px;
--layout-play-scroll-padding-tablet:72px;
--layout-nav-min-height:72px;
--layout-nav-padding:14px 24px;
--layout-nav-padding-compact:12px 18px;
--layout-nav-gap:20px;
--layout-nav-gap-compact:10px;
--layout-nav-grid-gap-x:8px;
--layout-nav-grid-gap-y:10px;
--layout-nav-mobile-min-height:116px;
--layout-nav-logo-icon-size:44px;
--layout-nav-logo-icon-size-compact:38px;
--layout-nav-logo-icon-size-mobile:34px;
--layout-nav-logo-min-width:178px;
--layout-nav-logo-min-width-compact:168px;
--layout-nav-logo-min-width-mobile:210px;
--layout-nav-logo-max-width-tablet:220px;
--layout-nav-logo-max-width-compact:230px;
--layout-nav-logo-max-width-mobile:230px;
--layout-nav-button-padding:8px 16px;
--layout-nav-button-padding-compact:7px 12px;
--layout-nav-button-padding-mobile:7px 6px;
--layout-nav-button-min-height:42px;
--layout-nav-button-min-height-compact:40px;
--layout-nav-button-icon-size:22px;
--layout-nav-button-icon-size-mobile:20px;
--layout-nav-landscape-padding:10px 12px;
--layout-nav-logo-max-width-landscape:clamp(var(--layout-nav-logo-min-width-compact),18.5vw,220px);
--layout-nav-logo-icon-size-landscape:36px;
--layout-nav-button-min-height-landscape:40px;
--layout-hud-padding:10px 18px;
--layout-hud-gap:8px;
--layout-hud-chip-gap:7px;
--layout-hud-chip-padding:6px 14px;
--layout-hud-icon-size:22px;
--layout-welcome-shell-width:1040px;
--layout-welcome-shell-width-book:1280px;
/* Tablet welcome reference: 1366 x 1024 uses a 1040 x 800 two-page book.
Keep that visual ratio adaptive without adding device-specific rules. */
--layout-welcome-shell-width-tablet-shared:clamp(744px,76.135vw,1040px);
--layout-welcome-shell-width-compact-landscape:clamp(744px,94vw,920px);
--layout-welcome-shell-gap:18px;
--layout-welcome-shell-gap-tablet-shared:10px;
--layout-welcome-shell-gap-compact-landscape:8px;
--layout-welcome-shell-gap-mobile:12px;
--layout-welcome-splash-padding:24px;
--layout-welcome-splash-padding-book:clamp(18px,4vh,38px) 24px;
--layout-welcome-splash-padding-tablet-shared:4px 12px;
--layout-welcome-splash-padding-compact-landscape:4px 8px;
--layout-welcome-splash-padding-mobile:18px 12px calc(22px + env(safe-area-inset-bottom));
--layout-welcome-panel-height:min(800px,calc(100dvh - 48px));
--layout-welcome-panel-min-height:min(800px,calc(100dvh - 76px));
--layout-welcome-panel-height-tablet-shared:clamp(600px,78.125dvh,800px);
--layout-welcome-panel-height-compact-landscape:calc(100dvh - 8px);
--layout-welcome-panel-radius:28px;
--layout-welcome-panel-radius-mobile:22px;
--layout-welcome-book-radius-left:32px 20px 20px 32px;
--layout-welcome-book-radius-right:20px 32px 32px 20px;
--layout-welcome-book-radius-stacked:28px;
--layout-welcome-brand-padding:28px 26px 24px;
--layout-welcome-auth-padding:18px 18px 14px;
--layout-welcome-panel-padding-tablet-shared:14px 16px;
--layout-welcome-panel-padding-compact-landscape:8px 10px;
--layout-welcome-panel-padding-mobile:16px 14px;
--layout-welcome-panel-padding-phone:14px 12px;
--layout-welcome-mascot-width:300px;
--layout-welcome-mascot-width-tablet-shared:196px;
--layout-welcome-mascot-width-compact-landscape:118px;
--layout-welcome-mode-gap:10px;
--layout-welcome-mode-gap-tablet-shared:6px;
--layout-welcome-mode-gap-compact-landscape:5px;
--layout-welcome-mode-gap-mobile:8px;
--layout-welcome-mode-card-padding:14px 12px 12px;
--layout-welcome-mode-card-padding-tablet-shared:9px;
--layout-welcome-mode-card-padding-compact-landscape:5px 6px;
--layout-welcome-mode-card-min-height:118px;
--layout-welcome-mode-card-min-height-tablet-shared:70px;
--layout-welcome-mode-card-min-height-compact-landscape:48px;
--layout-welcome-input-padding:10px 13px;
--layout-welcome-input-padding-compact-landscape:5px 8px;
--layout-welcome-field-gap:8px;
--layout-welcome-field-gap-compact-landscape:4px;
--layout-welcome-button-padding:11px 14px;
--layout-welcome-button-padding-compact-landscape:6px 10px;
--layout-home-dashboard-columns:minmax(0,2fr) minmax(300px,360px);
--layout-home-dashboard-gap:18px;
--layout-home-dashboard-side-width-landscape:360px;
--layout-home-dashboard-side-width-compact-landscape:clamp(176px,26.5vw,226px);
--layout-home-dashboard-columns-landscape:minmax(0,1fr) var(--layout-home-dashboard-side-width-landscape);
--layout-home-dashboard-columns-compact-landscape:minmax(0,1fr) var(--layout-home-dashboard-side-width-compact-landscape);
--layout-home-dashboard-gap-compact-landscape:8px;
--layout-home-section-gap:14px;
--layout-home-section-gap-mobile:12px;
--layout-home-hero-padding:16px 18px;
--layout-home-hero-padding-desktop:28px 28px;
--layout-home-hero-padding-mobile:16px 14px 70px;
--layout-home-hero-padding-phone:14px 12px 64px;
--layout-home-hero-pad-right:320px;
--layout-home-hero-pad-right-mobile:14px;
--layout-home-hero-min-height:110px;
--layout-home-hero-min-height-desktop:220px;
--layout-home-hero-height-landscape:clamp(258px,34dvh,358px);
--layout-home-hero-mascot-bottom:10px;
--layout-home-hero-mascot-visual-baseline-offset:12px;
--layout-home-hero-mascot-width:300px;
--layout-home-hero-mascot-height:168px;
--layout-home-hero-mascot-width-fluid:clamp(160px,22vw,250px);
--layout-home-hero-mascot-width-mobile:132px;
--layout-home-hero-mascot-width-phone:116px;
--layout-home-guest-note-width:252px;
--layout-home-guest-note-width-mobile:250px;
--layout-home-guest-note-width-phone:226px;
--layout-home-guest-note-width-landscape:228px;
--layout-home-guest-note-width-phone-landscape:212px;
--layout-home-guest-note-reserve-landscape:243px;
--layout-home-guest-note-reserve-phone-landscape:245px;
--layout-home-guest-note-gap:6px;
--layout-home-guest-note-padding:7px 9px;
--layout-home-guest-note-padding-compact:6px 8px;
--layout-home-guest-note-button-min-width:76px;
--layout-home-guest-note-button-min-height:32px;
--layout-home-chip-gap:5px;
--layout-home-chip-gap-desktop:8px;
--layout-home-chip-gap-mobile:6px;
--layout-home-chip-padding:8px 12px;
--layout-home-chip-padding-desktop:5px 12px;
--layout-home-chip-padding-mobile:7px 8px;
--layout-home-chip-padding-notebook:5px 12px;
--layout-home-chip-min-width-notebook:96px;
--layout-home-chip-icon-size-notebook:52px;
--layout-home-chip-value-font-notebook:.82rem;
--layout-home-chip-label-font-notebook:.64rem;
--layout-home-chip-icon-size-landscape:clamp(42px,4.8vw,52px);
--layout-home-chip-icon-size-compact-landscape:clamp(20px,4.1vw,30px);
--layout-home-mode-columns:repeat(3,1fr);
--layout-home-mode-gap:12px;
--layout-home-mode-gap-mobile:10px;
--layout-home-mode-row-height:210px;
--layout-home-mode-row-min-height-desktop:148px;
--layout-home-mode-row-height-tablet:210px;
--layout-home-mode-row-height-tablet-compact:172px;
--layout-home-mode-row-height-landscape:clamp(220px,22vw,290px);
--layout-home-mode-row-height-compact-landscape:clamp(118px,31dvh,134px);
--layout-home-mode-row-height-tablet-landscape-fit:clamp(236px,29dvh,254px);
--layout-home-tall-portrait-dashboard-height:calc(100dvh - 158px);
--layout-home-tall-portrait-hero-height:clamp(360px,28dvh,390px);
--layout-home-tall-portrait-mode-height:clamp(320px,25dvh,350px);
--layout-home-tall-portrait-info-height:clamp(300px,23dvh,330px);
--layout-home-tall-portrait-hero-padding:clamp(24px,2.4vw,28px) clamp(180px,22vw,228px) clamp(22px,2.2vw,26px) clamp(24px,2.4vw,28px);
--layout-home-tall-portrait-mascot-width:clamp(190px,22vw,220px);
--layout-home-mode-row-height-notebook:278px;
--layout-home-mode-row-height-desktop-fit:clamp(232px,31dvh,278px);
--layout-home-card-padding:20px;
--layout-home-card-padding-mobile:14px;
--layout-home-card-content-padding:10px;
--layout-home-card-content-justify:flex-start;
--layout-home-card-content-justify-tablet-fit:center;
--layout-home-card-content-justify-tablet-landscape-fit:var(--layout-home-card-content-justify-tablet-fit);
--layout-home-card-text-flex-tablet-fit:0 0 auto;
--layout-home-card-text-flex-tablet-landscape-fit:var(--layout-home-card-text-flex-tablet-fit);
--layout-home-card-content-gap-mobile:12px;
--layout-home-card-icon-width:62px;
--layout-home-card-icon-height:66px;
--layout-home-card-icon-box-width-notebook:94px;
--layout-home-card-icon-box-height-notebook:94px;
--layout-home-card-icon-size-desktop-fit:clamp(78px,4.5vw,84px);
--layout-home-card-icon-size-mobile:52px;
--layout-home-card-icon-size-landscape:clamp(74px,6.4vw,86px);
--layout-home-card-icon-size-compact-landscape:clamp(32px,6vw,42px);
--layout-home-card-icon-size-tablet-landscape-fit:clamp(66px,6vw,72px);
--layout-home-card-title-font-landscape:clamp(.9rem,1.35vw,1rem);
--layout-home-card-sub-font-landscape:clamp(.64rem,1vw,.78rem);
--layout-home-card-progress-font-landscape:clamp(.52rem,.78vw,.58rem);
--layout-home-card-text-block-height-landscape:clamp(118px,16dvh,150px);
--layout-home-card-button-padding-landscape:5px 16px;
--layout-home-card-button-font-landscape:clamp(.66rem,1vw,.88rem);
--layout-home-card-button-min-height-landscape:clamp(28px,3.2vw,33px);
--layout-home-card-title-font-compact-landscape:clamp(.68rem,1.35vw,.8rem);
--layout-home-card-sub-font-compact-landscape:clamp(.48rem,.9vw,.56rem);
--layout-home-card-button-font-compact-landscape:clamp(.54rem,.9vw,.64rem);
--layout-home-card-button-min-height-compact-landscape:22px;
--layout-home-card-button-padding:8px 26px;
--layout-home-card-button-padding-mobile:6px 12px;
--layout-home-card-button-min-width:118px;
--layout-home-card-button-min-width-mobile:98px;
--layout-home-card-button-gap-tablet-fit:clamp(11px,1.15vw,15px);
--layout-home-card-button-gap-tablet-landscape-fit:var(--layout-home-card-button-gap-tablet-fit);
--layout-home-card-button-align:center;
--layout-home-info-gap:10px;
--layout-home-info-margin:12px 0 6px;
--layout-home-info-card-padding:12px 13px;
--layout-home-info-card-content-align:flex-start;
--layout-home-info-row-align:stretch;
--layout-home-info-row-flex:0 0 auto;
--layout-home-info-row-size:auto;
--layout-home-info-row-min-size:0px;
--layout-home-info-card-align:stretch;
--layout-home-info-card-size:auto;
--layout-home-info-card-min-size:0px;
--layout-home-info-card-template:auto repeat(3,minmax(0,1fr));
--layout-home-info-card-row-gap:3px;
--layout-home-info-card-hdr-font-compact:var(--layout-home-section-title-font);
--layout-home-info-card-title-font-compact:.68rem;
--layout-home-info-card-desc-font-compact:.56rem;
--layout-home-info-card-hdr-padding-compact:3px 8px;
--layout-home-info-item-gap-compact:5px;
--layout-home-info-item-margin-bottom-compact:3px;
--layout-home-info-item-padding-compact:2px 5px;
--layout-home-info-badge-size-compact:24px;
--layout-home-info-badge-radius-compact:7px;
--layout-home-info-badge-font-compact:.68rem;
--layout-home-info-title-line-height-compact:1.1;
--layout-home-info-desc-line-height-compact:1.12;
--layout-home-info-row-top-inset:5px;
--layout-home-info-hdr-margin-bottom:4px;
--layout-home-info-card-padding-tablet:10px 11px;
--layout-home-info-card-padding-mobile:12px;
--layout-device-note-display:none;
--layout-device-note-margin:0;
--layout-device-note-padding:0;
--layout-device-note-border:0;
--layout-device-note-radius:0;
--layout-device-note-bg:transparent;
--layout-device-note-color:var(--tone-home-title-badge-color);
--layout-device-note-shadow:none;
--layout-device-note-font-size:.8rem;
--layout-device-note-font-weight:800;
--layout-device-note-line-height:1.35;
--layout-device-note-display-mobile-shared:flex;
--layout-device-note-margin-mobile-shared:var(--layout-home-section-gap-mobile) 0 0;
--layout-device-note-padding-mobile-shared:9px 12px;
--layout-device-note-border-mobile-shared:1px solid rgba(147,197,253,.72);
--layout-device-note-radius-mobile-shared:16px;
--layout-device-note-bg-mobile-shared:linear-gradient(135deg,rgba(239,246,255,.92),rgba(255,251,235,.9));
--layout-device-note-shadow-mobile-shared:0 10px 24px rgba(59,130,246,.1);
--layout-device-note-font-size-mobile-shared:clamp(.72rem,3.2vw,.84rem);
--layout-home-dash-card-radius:18px;
--layout-home-dash-card-border-width:2px;
--layout-home-dash-title-font:.78rem;
--layout-home-section-title-font:.88rem;
--layout-home-dash-title-letter-spacing:.05em;
--layout-home-dash-title-gap:6px;
--layout-home-dash-title-icon-size:24px;
--layout-home-dash-title-padding:4px 10px;
--right-panel-title-size:var(--layout-home-section-title-font);
--right-panel-label-size:.72rem;
--right-panel-value-size:.74rem;
--right-panel-caption-size:.58rem;
--right-panel-role-name-size:.72rem;
--right-panel-line-height:1.08;
--right-panel-letter-spacing:.05em;
--right-panel-radius:18px;
--right-panel-row-radius:14px;
--right-panel-soft-shadow:0 8px 22px rgba(37,99,235,0.09), inset 0 1px 0 rgba(255,255,255,0.9);
--right-panel-role-journey-min-height:104px;
--right-panel-promo-stat-row-height:47px;
--right-panel-stat-icon-size:var(--layout-home-dash-icon-size);
--right-panel-stat-icon-radius:var(--layout-home-dash-icon-radius);
--right-panel-stat-row-gap:var(--layout-home-dash-row-gap);
--right-panel-stat-row-padding:var(--layout-home-dash-row-padding);
--right-panel-stat-label-size:var(--layout-home-dash-title-text-font);
--right-panel-stat-value-size:.74rem;
--right-panel-stat-bar-height:var(--layout-home-dash-bar-height);
--layout-home-dash-row-gap:8px;
--layout-home-dash-row-padding:6px 9px;
--layout-home-dash-info-row-padding:3px 6px;
--layout-home-dash-row-radius:14px;
--layout-home-dash-row-border-width:1.5px;
--layout-home-dash-icon-size:30px;
--layout-home-dash-icon-radius:9px;
--layout-home-dash-icon-font:.86rem;
--layout-home-dash-title-text-font:.72rem;
--layout-home-dash-body-font:.6rem;
--layout-home-dash-body-line-height:1.24;
--layout-home-dash-bar-height:5px;
--layout-home-info-row-height-landscape:clamp(124px,16dvh,164px);
--layout-home-info-badge-size-landscape:clamp(24px,2.9vw,30px);
--layout-home-info-badge-size-compact-landscape:clamp(20px,3.5vw,24px);
--layout-home-rail-role-icon-size-landscape:clamp(48px,5vw,58px);
--layout-home-rail-role-icon-size-compact-landscape:clamp(42px,5.8vw,48px);
--layout-home-rail-progress-icon-size-landscape:clamp(18px,1.7vw,22px);
--layout-home-rail-progress-icon-size-compact-landscape:16px;
--layout-home-rail-arrow-size-compact-landscape:clamp(30px,5vw,34px);
--layout-home-promo-height-landscape:clamp(320px,31.5vw,426px);
--layout-home-promo-height-compact-landscape:clamp(320px,86dvh,340px);
--layout-home-daily-gap:var(--layout-home-dash-row-gap);
--layout-home-daily-item-padding:var(--layout-home-dash-row-padding);
--layout-home-daily-item-gap:5px;
--layout-home-daily-bar-height:var(--layout-home-dash-bar-height);
--layout-home-daily-min-height-landscape:clamp(176px,19.5dvh,204px);
--layout-home-daily-min-height-compact-landscape:clamp(156px,20dvh,176px);
--layout-home-streak-height-landscape:clamp(76px,7.4vw,99px);
--layout-home-story-progress-height-landscape:clamp(104px,10vw,134px);
--layout-home-challenge-progress-height-landscape:clamp(90px,8.5vw,114px);
--layout-home-streak-fire-size-landscape:1.5rem;
--layout-home-streak-title-font-landscape:.66rem;
--layout-home-streak-count-font-landscape:.95rem;
--layout-home-compact-shell-gap:var(--layout-home-dashboard-gap);
--layout-home-compact-side-gap:5px;
--layout-home-compact-hero-height:clamp(214px,29dvh,246px);
--layout-home-compact-mode-height:clamp(176px,24dvh,206px);
--layout-home-compact-promo-height:clamp(228px,27dvh,252px);
--layout-home-compact-info-height:clamp(154px,20dvh,174px);
--layout-home-compact-daily-height:clamp(154px,20dvh,174px);
--layout-home-compact-hero-pad:clamp(18px,2.15vw,24px) clamp(18px,2.25vw,24px) clamp(8px,1.25vw,14px);
--layout-home-compact-hero-pad-right:clamp(212px,22vw,260px);
--layout-home-compact-hero-copy-width:clamp(300px,39vw,470px);
--layout-home-compact-chip-width:clamp(300px,39vw,430px);
--layout-home-compact-card-pad:clamp(12px,1.45vw,16px);
--layout-home-compact-card-inner-pad:clamp(5px,.8vw,8px);
--layout-home-compact-nav-padding:var(--layout-nav-landscape-padding);
--layout-home-compact-nav-gap:8px;
--layout-home-compact-nav-logo-width:clamp(var(--layout-nav-logo-min-width-compact),18.5vw,210px);
--layout-home-compact-nav-logo-font:clamp(.88rem,.96vw,.95rem);
--layout-home-compact-nav-btn-width:clamp(96px,12vw,132px);
--layout-home-compact-nav-btn-wide-width:clamp(126px,15vw,154px);
--layout-home-compact-nav-btn-font:clamp(.64rem,.78vw,.72rem);
--layout-home-compact-nav-profile-width:clamp(72px,10vw,88px);
--layout-home-compact-nav-profile-min-height:38px;
--layout-home-compact-nav-profile-padding:4px 7px 4px 5px;
--layout-home-compact-nav-profile-gap:6px;
--layout-home-compact-hero-title-font:clamp(1.72rem,2.55vw,2rem);
--layout-home-compact-hero-sub-font:clamp(.72rem,1.05vw,.84rem);
--layout-home-compact-chip-label-font:.48rem;
--layout-home-compact-card-title-font:var(--layout-home-card-title-font-landscape);
--layout-home-compact-card-sub-font:var(--layout-home-card-sub-font-landscape);
--layout-home-compact-card-progress-font:var(--layout-home-card-progress-font-landscape);
--layout-home-compact-card-button-font:var(--layout-home-card-button-font-landscape);
--layout-home-compact-info-head-font:clamp(.64rem,.9vw,.76rem);
--layout-home-compact-info-title-font:clamp(.58rem,.84vw,.68rem);
--layout-home-compact-info-desc-font:clamp(.49rem,.72vw,.58rem);
--layout-home-compact-promo-journey-padding:6px 8px;
--layout-home-compact-promo-journey-gap:5px;
--layout-home-compact-promo-row-padding:1px 3px;
--layout-home-compact-promo-row-gap:4px;
--layout-home-compact-promo-stat-font:.56rem;
--layout-home-compact-promo-pnums-min-width:56px;
--layout-home-compact-daily-row-padding:6px 8px;
--layout-home-compact-daily-label-font:.68rem;
--layout-home-compact-daily-info-font:.52rem;
--layout-rewards-shell-gap:12px;
--layout-rewards-shell-gap-mobile:10px;
--layout-rewards-hero-gap:12px;
--layout-rewards-hero-gap-compact:10px;
--layout-rewards-hero-padding:16px 18px;
--layout-rewards-hero-padding-compact:14px 15px;
--layout-rewards-hero-padding-mobile:13px 14px;
--layout-rewards-hero-radius:22px;
--layout-rewards-hero-radius-mobile:18px;
--layout-rewards-balance-gap:8px;
--layout-rewards-balance-gap-mobile:6px;
--layout-rewards-balance-min-width:320px;
--layout-rewards-balance-max-width:360px;
--layout-rewards-balance-min-width-compact:260px;
--layout-rewards-balance-card-padding:10px 12px;
--layout-rewards-balance-card-padding-mobile:9px 10px;
--layout-rewards-balance-card-radius:16px;
--layout-rewards-balance-card-radius-mobile:14px;
--layout-rewards-balance-icon-size:28px;
--layout-rewards-grid-gap:12px;
--layout-rewards-grid-gap-mobile:10px;
--layout-rewards-shop-card-padding:14px 14px 13px;
--layout-rewards-shop-card-padding-compact:12px;
--layout-rewards-shop-card-padding-mobile:11px;
--layout-rewards-shop-card-radius:20px;
--layout-rewards-shop-card-radius-mobile:16px;
--layout-rewards-shop-top-gap:8px;
--layout-rewards-shop-top-gap-mobile:6px;
--layout-rewards-shop-button-padding:10px 12px;
--layout-rewards-shop-button-padding-compact:9px 10px;
--layout-rewards-shop-button-padding-mobile:8px 10px;
--layout-rewards-shop-button-radius:14px;
--layout-rewards-shop-button-radius-mobile:12px;
/* Shared interface token baselines:
- notebook: 1920 x 929
- tablet-shared: 1024 x 768
- mobile-shared: 430 x 932 */
--layout-rewards-shell-gap-note-shared:12px;
--layout-rewards-hero-gap-note-shared:12px;
--layout-rewards-hero-padding-note-shared:16px 18px;
--layout-rewards-hero-radius-note-shared:22px;
--layout-rewards-balance-gap-note-shared:8px;
--layout-rewards-balance-min-width-note-shared:320px;
--layout-rewards-balance-max-width-note-shared:360px;
--layout-rewards-balance-card-padding-note-shared:10px 12px;
--layout-rewards-balance-card-radius-note-shared:16px;
--layout-rewards-balance-icon-size-note-shared:28px;
--layout-rewards-grid-gap-note-shared:12px;
--layout-rewards-shop-card-padding-note-shared:14px 14px 13px;
--layout-rewards-shop-card-radius-note-shared:20px;
--layout-rewards-shop-top-gap-note-shared:8px;
--layout-rewards-shop-button-padding-note-shared:10px 12px;
--layout-rewards-shop-button-radius-note-shared:14px;
--layout-rewards-shell-gap-tablet-shared:10px;
--layout-rewards-hero-gap-tablet-shared:10px;
--layout-rewards-hero-padding-tablet-shared:14px 15px;
--layout-rewards-hero-radius-tablet-shared:18px;
--layout-rewards-balance-gap-tablet-shared:6px;
--layout-rewards-balance-min-width-tablet-shared:260px;
--layout-rewards-balance-max-width-tablet-shared:none;
--layout-rewards-balance-card-padding-tablet-shared:9px 10px;
--layout-rewards-balance-card-radius-tablet-shared:14px;
--layout-rewards-balance-icon-size-tablet-shared:26px;
--layout-rewards-grid-gap-tablet-shared:10px;
--layout-rewards-shop-card-padding-tablet-shared:12px;
--layout-rewards-shop-card-radius-tablet-shared:16px;
--layout-rewards-shop-top-gap-tablet-shared:6px;
--layout-rewards-shop-button-padding-tablet-shared:9px 10px;
--layout-rewards-shop-button-radius-tablet-shared:12px;
--layout-rewards-shell-gap-mobile-shared:10px;
--layout-rewards-hero-gap-mobile-shared:10px;
--layout-rewards-hero-padding-mobile-shared:13px 14px;
--layout-rewards-hero-radius-mobile-shared:18px;
--layout-rewards-balance-gap-mobile-shared:6px;
--layout-rewards-balance-min-width-mobile-shared:0;
--layout-rewards-balance-max-width-mobile-shared:none;
--layout-rewards-balance-card-padding-mobile-shared:9px 10px;
--layout-rewards-balance-card-radius-mobile-shared:14px;
--layout-rewards-balance-icon-size-mobile-shared:24px;
--layout-rewards-grid-gap-mobile-shared:10px;
--layout-rewards-shop-card-padding-mobile-shared:11px;
--layout-rewards-shop-card-radius-mobile-shared:16px;
--layout-rewards-shop-top-gap-mobile-shared:6px;
--layout-rewards-shop-button-padding-mobile-shared:8px 10px;
--layout-rewards-shop-button-radius-mobile-shared:12px;
--layout-insights-shell-gap:14px;
--layout-insights-shell-gap-mobile:12px;
--layout-insights-card-radius:24px;
--layout-insights-card-radius-mobile:20px;
--layout-insights-hero-columns:minmax(0,1.2fr) 220px;
--layout-insights-hero-gap:18px;
--layout-insights-hero-gap-mobile:14px;
--layout-insights-hero-padding:18px 20px;
--layout-insights-hero-padding-mobile:16px;
--layout-insights-hero-padding-phone:14px;
--layout-insights-takeaway-columns:repeat(4,minmax(0,1fr));
--layout-insights-takeaway-gap:10px;
--layout-insights-takeaway-margin-top:14px;
--layout-insights-takeaway-card-padding:12px 13px;
--layout-insights-section-padding:16px 18px;
--layout-insights-section-padding-mobile:14px;
--layout-insights-section-head-gap:12px;
--layout-insights-section-head-margin:12px;
--layout-insights-section-tip-max-width:260px;
--layout-insights-skill-grid-gap:12px;
--layout-insights-skill-card-padding:14px 14px 12px;
--layout-insights-skill-icon-size:48px;
--layout-insights-skill-icon-frame-extra:28px;
--layout-insights-mode-icon-size:58px;
--layout-insights-radar-size:150px;
--layout-insights-radar-icon-size:36px;
--layout-insights-radar-size-mobile:126px;
--layout-insights-overall-padding:12px 15px;
--layout-insights-overall-max-width-mobile:220px;
--layout-insights-trend-gap:10px;
--layout-insights-trend-card-padding:14px;
--layout-insights-mode-gap:10px;
--layout-insights-mode-margin-top:12px;
--layout-insights-mode-card-padding:13px 14px;
--layout-insights-bottom-gap:12px;
--layout-insights-highlight-padding:16px 18px;
--layout-insights-shell-gap-note-shared:14px;
--layout-insights-card-radius-note-shared:24px;
--layout-insights-hero-columns-note-shared:minmax(0,1.2fr) 220px;
--layout-insights-hero-gap-note-shared:18px;
--layout-insights-hero-padding-note-shared:18px 20px;
--layout-insights-takeaway-columns-note-shared:repeat(4,minmax(0,1fr));
--layout-insights-takeaway-gap-note-shared:10px;
--layout-insights-takeaway-margin-top-note-shared:14px;
--layout-insights-takeaway-card-padding-note-shared:12px 13px;
--layout-insights-section-padding-note-shared:16px 18px;
--layout-insights-section-head-gap-note-shared:12px;
--layout-insights-section-head-margin-note-shared:12px;
--layout-insights-section-tip-max-width-note-shared:260px;
--layout-insights-skill-grid-gap-note-shared:12px;
--layout-insights-skill-card-padding-note-shared:14px 14px 12px;
--layout-insights-skill-icon-size-note-shared:48px;
--layout-insights-skill-icon-frame-extra-note-shared:28px;
--layout-insights-mode-icon-size-note-shared:58px;
--layout-insights-radar-size-note-shared:150px;
--layout-insights-radar-icon-size-note-shared:36px;
--layout-insights-overall-padding-note-shared:12px 15px;
--layout-insights-trend-gap-note-shared:10px;
--layout-insights-trend-card-padding-note-shared:14px;
--layout-insights-mode-gap-note-shared:10px;
--layout-insights-mode-margin-top-note-shared:12px;
--layout-insights-mode-card-padding-note-shared:13px 14px;
--layout-insights-bottom-gap-note-shared:12px;
--layout-insights-highlight-padding-note-shared:16px 18px;
--layout-insights-shell-gap-tablet-shared:12px;
--layout-insights-card-radius-tablet-shared:20px;
--layout-insights-hero-columns-tablet-shared:minmax(0,1.08fr) 190px;
--layout-insights-hero-gap-tablet-shared:14px;
--layout-insights-hero-padding-tablet-shared:14px 16px;
--layout-insights-takeaway-columns-tablet-shared:repeat(2,minmax(0,1fr));
--layout-insights-takeaway-gap-tablet-shared:8px;
--layout-insights-takeaway-margin-top-tablet-shared:12px;
--layout-insights-takeaway-card-padding-tablet-shared:10px 11px;
--layout-insights-section-padding-tablet-shared:13px 14px;
--layout-insights-section-head-gap-tablet-shared:10px;
--layout-insights-section-head-margin-tablet-shared:10px;
--layout-insights-section-tip-max-width-tablet-shared:220px;
--layout-insights-skill-grid-gap-tablet-shared:10px;
--layout-insights-skill-card-padding-tablet-shared:12px 12px 10px;
--layout-insights-skill-icon-size-tablet-shared:46px;
--layout-insights-skill-icon-frame-extra-tablet-shared:28px;
--layout-insights-mode-icon-size-tablet-shared:56px;
--layout-insights-radar-size-tablet-shared:136px;
--layout-insights-radar-icon-size-tablet-shared:34px;
--layout-insights-overall-padding-tablet-shared:10px 12px;
--layout-insights-trend-gap-tablet-shared:8px;
--layout-insights-trend-card-padding-tablet-shared:12px;
--layout-insights-mode-gap-tablet-shared:8px;
--layout-insights-mode-margin-top-tablet-shared:10px;
--layout-insights-mode-card-padding-tablet-shared:11px 12px;
--layout-insights-bottom-gap-tablet-shared:10px;
--layout-insights-highlight-padding-tablet-shared:13px 14px;
--layout-insights-shell-gap-mobile-shared:12px;
--layout-insights-card-radius-mobile-shared:20px;
--layout-insights-hero-columns-mobile-shared:1fr;
--layout-insights-hero-gap-mobile-shared:14px;
--layout-insights-hero-padding-mobile-shared:16px;
--layout-insights-takeaway-columns-mobile-shared:1fr;
--layout-insights-takeaway-gap-mobile-shared:8px;
--layout-insights-takeaway-margin-top-mobile-shared:12px;
--layout-insights-takeaway-card-padding-mobile-shared:10px 11px;
--layout-insights-section-padding-mobile-shared:14px;
--layout-insights-section-head-gap-mobile-shared:8px;
--layout-insights-section-head-margin-mobile-shared:10px;
--layout-insights-section-tip-max-width-mobile-shared:none;
--layout-insights-skill-grid-gap-mobile-shared:10px;
--layout-insights-skill-card-padding-mobile-shared:12px 12px 10px;
--layout-insights-skill-icon-size-mobile-shared:42px;
--layout-insights-skill-icon-frame-extra-mobile-shared:24px;
--layout-insights-mode-icon-size-mobile-shared:52px;
--layout-insights-radar-size-mobile-shared:126px;
--layout-insights-radar-icon-size-mobile-shared:32px;
--layout-insights-overall-padding-mobile-shared:10px 12px;
--layout-insights-overall-max-width-mobile-shared:220px;
--layout-insights-trend-gap-mobile-shared:8px;
--layout-insights-trend-card-padding-mobile-shared:12px;
--layout-insights-mode-gap-mobile-shared:8px;
--layout-insights-mode-margin-top-mobile-shared:10px;
--layout-insights-mode-card-padding-mobile-shared:11px 12px;
--layout-insights-bottom-gap-mobile-shared:10px;
--layout-insights-highlight-padding-mobile-shared:14px;
--layout-play-gap:10px;
--layout-play-tight-gap:6px;
--layout-play-tight-padding-x:8px;
--layout-play-sidebar-width:196px;
--layout-play-card-radius:16px;
--layout-play-main-padding:16px;
--layout-play-main-padding-compact:14px;
--layout-question-padding:14px;
--layout-question-gap:7px;
--layout-answer-gap:7px;
--layout-choice-gap:9px;
--layout-choice-padding:11px 13px;
--layout-cta-padding:13px;
--layout-story-shell-max-width:1080px;
--layout-story-solo-max-width:920px;
--layout-story-content-max-width:860px;
--layout-story-title-max-width:760px;
--layout-story-body-max-width:680px;
--layout-story-wide-solo-max-width:var(--layout-story-shell-max-width);
--layout-story-wide-solo-padding:clamp(12px,1.35vw,18px);
--layout-story-cta-min-height:42px;
--layout-story-secondary-action-min-height:34px;
--layout-quest-card-shadow:0 16px 30px rgba(59,130,246,0.13),0 4px 10px rgba(15,23,42,0.06);
--layout-quest-card-shadow-strong:0 18px 34px rgba(37,99,235,0.18),0 8px 18px rgba(15,23,42,0.08);
--layout-quest-inset:inset 0 1px 0 rgba(255,255,255,0.9);
--tone-quest-panel:linear-gradient(180deg,#FFF9ED 0%,#F8FCFF 58%,#FFFFFF 100%);
--tone-quest-card-blue:linear-gradient(180deg,#EAF4FF 0%,#FFFFFF 100%);
--tone-quest-card-green:linear-gradient(180deg,#E9FFF6 0%,#FFFFFF 100%);
--tone-quest-card-orange:linear-gradient(180deg,#FFF1DC 0%,#FFFFFF 100%);
--tone-quest-card-gold:linear-gradient(180deg,#FFF8E3 0%,#FFFFFF 100%);
--layout-lobby-gap:12px;
--layout-lobby-shell-radius:26px;
--layout-lobby-banner-padding:14px 20px;
--layout-lobby-banner-gap:14px;
--layout-lobby-banner-radius:18px;
--layout-lobby-card-gap:12px;
--layout-lobby-card-radius:18px;
--layout-lobby-card-padding:20px;
--layout-lobby-action-padding:24px 20px;
--layout-lobby-action-gap:14px;
--layout-challenge-max-width:860px;
--layout-challenge-gap:8px;
--layout-challenge-padding:12px 16px;
--layout-challenge-standalone-min-height:calc(100dvh - 80px);
--layout-challenge-shell-max-height:calc(100dvh - 100px);
--layout-challenge-card-radius:16px;
--layout-challenge-question-padding:12px 14px;
--layout-challenge-choice-gap:7px;
--layout-challenge-topbar-gap:10px;
--layout-challenge-round-info-size:0.82rem;
--layout-challenge-round-strong-size:0.95rem;
--layout-challenge-vs-padding:8px 16px;
--layout-challenge-avatar-size:54px;
--layout-challenge-name-size:0.78rem;
--layout-challenge-score-size:1.5rem;
--layout-challenge-vs-badge-size:38px;
--layout-challenge-vs-badge-margin:0 10px;
--layout-challenge-question-icon-size:var(--layout-play-category-icon-size);
--layout-challenge-question-title-size:1.16rem;
--layout-challenge-question-title-line-height:1.18;
--layout-challenge-question-title-gap:12px;
--layout-challenge-question-body-size:1.04rem;
--layout-challenge-question-body-line-height:1.32;
--layout-challenge-choice-min-height:56px;
--layout-challenge-choice-padding:10px 12px;
--layout-challenge-choice-copy-size:0.92rem;
--layout-challenge-choice-copy-line-height:1.26;
--layout-result-max-width:760px;
--layout-result-inner-max-width:680px;
--layout-story-result-shell-max-width:calc(var(--layout-result-inner-max-width) + 32px);
--layout-play-category-icon-size:clamp(72px,6.4vw,92px);
--layout-play-category-icon-size-compact:clamp(62px,5.4vw,76px);
--layout-play-category-icon-art-scale:.92;
--layout-result-padding:16px 14px;
--layout-result-compact-padding:14px 14px 12px;
--layout-result-mobile-padding:14px 12px;
--layout-result-icon-size:136px;
--layout-choice-adventure-gap:12px;
--layout-choice-adventure-banner-padding:12px 16px;
--layout-choice-adventure-banner-gap:12px;
--layout-choice-adventure-banner-radius:22px;
--layout-choice-adventure-card-gap:12px;
--layout-choice-adventure-card-padding:16px;
--layout-choice-adventure-card-radius:22px;
--layout-choice-adventure-result-max-width:920px;
--layout-choice-adventure-decision-padding:12px;
--layout-choice-adventure-decision-padding-compact:10px;
--layout-choice-adventure-choice-gap:10px;
--layout-choice-adventure-choice-padding:12px 10px;
--layout-choice-adventure-button-padding:11px 12px;
--layout-choice-adventure-fit-gap:5px;
--layout-choice-adventure-fit-banner-padding:6px 10px;
--layout-choice-adventure-fit-card-padding:10px 11px;
--layout-choice-adventure-fit-card-gap:8px;
--layout-choice-adventure-fit-button-padding:8px 10px;
--layout-choice-adventure-story-question-min-height:clamp(132px,18dvh,176px);
--layout-choice-adventure-result-stack-gap:10px;
--layout-choice-adventure-result-section-padding:12px 13px;
--layout-choice-adventure-result-step-gap:8px;
--layout-choice-adventure-result-story-gap:7px;
--layout-choice-adventure-result-chip-padding:7px 9px;
--layout-match-gap:8px;
--layout-match-playfield-gap:10px;
--layout-match-card-gap:7px;
--layout-match-target-padding:10px 11px;
--layout-match-target-radius:16px;
--layout-match-slot-min-height:40px;
--layout-match-slot-padding:8px 10px;
--layout-match-choice-padding:10px 11px;
--layout-sequence-grid-gap:6px;
--layout-sequence-card-padding:7px 8px;
--layout-sequence-action-gap:6px;
--layout-sequence-tight-gap:4px;
--layout-profile-max-height:calc(100dvh - 122px);
--layout-profile-help-min-height:calc(100dvh - 122px);
--layout-profile-card-radius:20px;
--layout-profile-card-padding:14px 16px 16px;
--layout-profile-card-margin-bottom:16px;
--layout-profile-tabs-gap:8px;
--layout-profile-tabs-bottom-gap:12px;
--layout-profile-hero-gap:10px;
--layout-profile-hero-body-gap:16px;
--layout-profile-left-width:232px;
--layout-profile-left-width-tablet:195px;
--layout-profile-left-min-width-tablet:170px;
--layout-profile-left-padding:18px;
--layout-profile-right-padding:14px 14px 12px;
--layout-profile-right-offset:248px;
--layout-profile-mini-gap:10px;
--layout-profile-mini-card-padding:14px 8px;
--layout-profile-fit-shell-max-height:calc(100dvh - 114px);
--layout-profile-fit-main-height:calc(100dvh - 96px);
--layout-profile-fit-screen-padding:10px 12px;
--layout-profile-fit-hero-padding:8px 10px;
--layout-profile-fit-avatar-size:48px;
--layout-profile-fit-avatar-preview-size:54px;
--layout-profile-fit-button-min-height:34px;
--layout-profile-avatar-grid-columns:repeat(7,minmax(0,1fr));
--layout-profile-avatar-grid-gap:8px;
--layout-profile-tall-portrait-shell-height:calc(100dvh - 122px);
--layout-profile-max-height-note-shared:calc(100dvh - 122px);
--layout-profile-help-min-height-note-shared:calc(100dvh - 122px);
--layout-profile-card-radius-note-shared:20px;
--layout-profile-card-padding-note-shared:14px 16px 16px;
--layout-profile-card-margin-bottom-note-shared:16px;
--layout-profile-tabs-gap-note-shared:8px;
--layout-profile-tabs-bottom-gap-note-shared:12px;
--layout-profile-hero-gap-note-shared:10px;
--layout-profile-hero-body-gap-note-shared:16px;
--layout-profile-left-width-note-shared:232px;
--layout-profile-left-min-width-note-shared:232px;
--layout-profile-left-padding-note-shared:18px;
--layout-profile-right-padding-note-shared:14px 14px 12px;
--layout-profile-right-offset-note-shared:248px;
--layout-profile-mini-gap-note-shared:10px;
--layout-profile-mini-card-padding-note-shared:14px 8px;
--layout-profile-max-height-tablet-shared:none;
--layout-profile-help-min-height-tablet-shared:0;
--layout-profile-card-radius-tablet-shared:18px;
--layout-profile-card-padding-tablet-shared:12px 14px 14px;
--layout-profile-card-margin-bottom-tablet-shared:14px;
--layout-profile-tabs-gap-tablet-shared:7px;
--layout-profile-tabs-bottom-gap-tablet-shared:10px;
--layout-profile-hero-gap-tablet-shared:8px;
--layout-profile-hero-body-gap-tablet-shared:12px;
--layout-profile-left-width-tablet-shared:195px;
--layout-profile-left-min-width-tablet-shared:170px;
--layout-profile-left-padding-tablet-shared:14px;
--layout-profile-right-padding-tablet-shared:12px 12px 10px;
--layout-profile-right-offset-tablet-shared:215px;
--layout-profile-mini-gap-tablet-shared:8px;
--layout-profile-mini-card-padding-tablet-shared:12px 8px;
--layout-profile-max-height-mobile-shared:none;
--layout-profile-help-min-height-mobile-shared:0;
--layout-profile-card-radius-mobile-shared:16px;
--layout-profile-card-padding-mobile-shared:12px 12px 14px;
--layout-profile-card-margin-bottom-mobile-shared:12px;
--layout-profile-tabs-gap-mobile-shared:6px;
--layout-profile-tabs-bottom-gap-mobile-shared:10px;
--layout-profile-hero-gap-mobile-shared:8px;
--layout-profile-hero-body-gap-mobile-shared:10px;
--layout-profile-left-width-mobile-shared:100%;
--layout-profile-left-min-width-mobile-shared:0;
--layout-profile-left-padding-mobile-shared:12px 14px;
--layout-profile-right-padding-mobile-shared:12px;
--layout-profile-right-offset-mobile-shared:0;
--layout-profile-mini-gap-mobile-shared:8px;
--layout-profile-mini-card-padding-mobile-shared:12px 8px;
--layout-insights-overall-max-width:260px;
--layout-membership-hero-padding:22px 18px 18px;
--layout-membership-hero-padding-compact:14px 16px 14px;
--layout-membership-hero-margin:12px;
--layout-membership-hero-margin-compact:8px;
--layout-profile-content-inline-icon-size:34px;
--layout-profile-content-inline-icon-size-note-shared:34px;
--layout-profile-content-inline-icon-size-tablet-shared:32px;
--layout-profile-content-inline-icon-size-mobile-shared:30px;
--layout-profile-content-icon-art-scale:1.22;
--layout-membership-crown-icon-art-scale:1.42;
--layout-membership-perk-icon-art-scale:1.24;
--layout-membership-crown-icon-size:76px;
--layout-membership-crown-icon-size-compact:64px;
--layout-membership-perk-icon-size:60px;
--layout-membership-perk-icon-size-compact:56px;
--layout-membership-locked-icon-size:54px;
--layout-membership-locked-icon-size-compact:50px;
--layout-membership-detail-padding:14px 16px;
--layout-membership-detail-padding-compact:8px 14px;
--layout-membership-trial-padding:20px 18px;
--layout-membership-trial-padding-compact:12px 16px;
--layout-membership-card-radius:16px;
--layout-membership-card-radius-small:12px;
--layout-membership-gap:12px;
--layout-membership-gap-compact:8px;
--layout-membership-cancel-padding:14px 16px;
--layout-membership-cancel-padding-compact:10px 14px;
--layout-membership-button-padding:10px;
--layout-membership-button-padding-compact:7px;
--layout-membership-plan-gap:10px;
--layout-membership-gap-tight:8px;
--layout-membership-plan-gap-compact:8px;
--layout-membership-plan-padding:16px 12px;
--layout-membership-plan-padding-compact:10px 10px;
--layout-membership-plan-top-padding:20px;
--layout-membership-plan-top-padding-compact:16px;
--layout-membership-plan-button-padding:9px;
--layout-membership-plan-button-padding-compact:6px;
--layout-membership-scroll-pad-right:12px;
--layout-membership-fit-route-padding:0px;
--layout-membership-fit-profile-edge-adjust:4px;
--layout-membership-fit-profile-bottom-padding:14px;
--layout-membership-hero-padding-note-shared:22px 18px 18px;
--layout-membership-hero-margin-note-shared:12px;
--layout-membership-crown-icon-size-note-shared:76px;
--layout-membership-perk-icon-size-note-shared:60px;
--layout-membership-locked-icon-size-note-shared:54px;
--layout-membership-detail-padding-note-shared:14px 16px;
--layout-membership-trial-padding-note-shared:20px 18px;
--layout-membership-card-radius-note-shared:16px;
--layout-membership-card-radius-small-note-shared:12px;
--layout-membership-gap-note-shared:12px;
--layout-membership-gap-tight-note-shared:8px;
--layout-membership-cancel-padding-note-shared:14px 16px;
--layout-membership-button-padding-note-shared:10px;
--layout-membership-plan-gap-note-shared:10px;
--layout-membership-plan-padding-note-shared:16px 12px;
--layout-membership-plan-top-padding-note-shared:20px;
--layout-membership-plan-button-padding-note-shared:9px;
--layout-membership-scroll-pad-right-note-shared:12px;
--layout-membership-fit-profile-bottom-padding-note-shared:14px;
--layout-membership-hero-padding-tablet-shared:14px 16px 14px;
--layout-membership-hero-margin-tablet-shared:8px;
--layout-membership-crown-icon-size-tablet-shared:68px;
--layout-membership-perk-icon-size-tablet-shared:56px;
--layout-membership-locked-icon-size-tablet-shared:52px;
--layout-membership-detail-padding-tablet-shared:8px 14px;
--layout-membership-trial-padding-tablet-shared:12px 16px;
--layout-membership-card-radius-tablet-shared:16px;
--layout-membership-card-radius-small-tablet-shared:12px;
--layout-membership-gap-tablet-shared:8px;
--layout-membership-cancel-padding-tablet-shared:10px 14px;
--layout-membership-button-padding-tablet-shared:7px;
--layout-membership-plan-gap-tablet-shared:8px;
--layout-membership-plan-padding-tablet-shared:10px 10px;
--layout-membership-plan-top-padding-tablet-shared:16px;
--layout-membership-plan-button-padding-tablet-shared:6px;
--layout-membership-scroll-pad-right-tablet-shared:12px;
--layout-membership-fit-profile-bottom-padding-tablet-shared:12px;
--layout-membership-hero-padding-mobile-shared:12px 14px 12px;
--layout-membership-hero-margin-mobile-shared:8px;
--layout-membership-crown-icon-size-mobile-shared:58px;
--layout-membership-perk-icon-size-mobile-shared:52px;
--layout-membership-locked-icon-size-mobile-shared:48px;
--layout-membership-detail-padding-mobile-shared:10px 12px;
--layout-membership-trial-padding-mobile-shared:12px 14px;
--layout-membership-card-radius-mobile-shared:14px;
--layout-membership-card-radius-small-mobile-shared:11px;
--layout-membership-gap-mobile-shared:8px;
--layout-membership-cancel-padding-mobile-shared:10px 12px;
--layout-membership-button-padding-mobile-shared:8px;
--layout-membership-plan-gap-mobile-shared:8px;
--layout-membership-plan-padding-mobile-shared:12px 10px;
--layout-membership-plan-top-padding-mobile-shared:18px;
--layout-membership-plan-button-padding-mobile-shared:7px;
--layout-membership-scroll-pad-right-mobile-shared:8px;
--layout-help-gap:10px;
--layout-help-gap-tablet:12px;
--layout-help-gap-compact:8px;
--layout-help-gap-secondary:8px;
--layout-help-gap-tight:7px;
--layout-help-shell-min-height:calc(100dvh - 255px);
--layout-help-shell-min-height-short:calc(100dvh - 235px);
--layout-help-desktop-columns:minmax(0,1.02fr) minmax(320px,.98fr);
--layout-help-desktop-columns-short:minmax(0,1.08fr) minmax(300px,.92fr);
--layout-help-hero-padding:14px 16px;
--layout-help-hero-padding-compact:12px 14px;
--layout-help-hero-padding-secondary:12px 14px;
--layout-help-hero-padding-tight:10px 12px;
--layout-help-hero-radius:20px;
--layout-help-hero-radius-compact:18px;
--layout-help-hero-radius-secondary:18px;
--layout-help-grid-gap:10px;
--layout-help-grid-gap-compact:8px;
--layout-help-grid-gap-secondary:8px;
--layout-help-grid-gap-tight:7px;
--layout-help-card-padding:12px 13px;
--layout-help-card-padding-compact:10px 11px;
--layout-help-card-padding-secondary:10px 11px;
--layout-help-card-padding-tight:8px 9px;
--layout-help-card-radius:16px;
--layout-help-card-radius-compact:14px;
--layout-help-card-radius-secondary:14px;
--layout-help-card-radius-tight:13px;
--layout-help-form-gap:8px;
--layout-help-form-gap-compact:7px;
--layout-help-form-gap-secondary:7px;
--layout-help-form-gap-tight:6px;
--layout-help-field-gap:5px;
--layout-help-control-padding:9px 10px;
--layout-help-control-padding-compact:7px 9px;
--layout-help-control-padding-secondary:7px 9px;
--layout-help-control-padding-tight:6px 8px;
--layout-help-control-radius:12px;
--layout-help-control-radius-compact:10px;
--layout-help-control-radius-secondary:10px;
--layout-help-textarea-min-height:156px;
--layout-help-textarea-min-height-desktop:184px;
--layout-help-textarea-min-height-tablet:168px;
--layout-help-textarea-min-height-mobile:152px;
--layout-help-textarea-min-height-compact:136px;
--layout-help-textarea-min-height-secondary:136px;
--layout-help-textarea-min-height-tight:118px;
--layout-help-contact-button-min-width:200px;
--layout-help-contact-button-min-width-compact:168px;
--layout-help-contact-button-min-width-secondary:168px;
--layout-help-contact-button-min-width-tablet:220px;
--layout-help-contact-mini-max-width:280px;
--layout-help-contact-mini-max-width-compact:220px;
--layout-help-contact-mini-max-width-secondary:220px;
--layout-help-contact-mini-max-width-tight:200px;
--layout-help-contact-icon-size:76px;
--layout-help-contact-icon-size-note-shared:76px;
--layout-help-contact-icon-size-tablet-shared:70px;
--layout-help-contact-icon-size-mobile-shared:64px;
--layout-help-fun-icon-size:68px;
--layout-help-fun-icon-size-note-shared:68px;
--layout-help-fun-icon-size-tablet-shared:62px;
--layout-help-fun-icon-size-mobile-shared:56px;
--layout-help-fun-icon-size-tight:var(--layout-profile-content-inline-icon-size);
--layout-help-fun-icon-size-short:var(--layout-profile-content-inline-icon-size);
--layout-help-icon-art-scale:1.22;
--layout-insights-icon-art-scale:1.22;
--layout-help-gap-note-shared:10px;
--layout-help-gap-tablet-note-shared:12px;
--layout-help-gap-secondary-note-shared:8px;
--layout-help-gap-tight-note-shared:7px;
--layout-help-shell-min-height-note-shared:calc(100dvh - 255px);
--layout-help-shell-min-height-short-note-shared:calc(100dvh - 235px);
--layout-help-desktop-columns-note-shared:minmax(0,1.02fr) minmax(320px,.98fr);
--layout-help-desktop-columns-short-note-shared:minmax(0,1.08fr) minmax(300px,.92fr);
--layout-help-hero-padding-note-shared:14px 16px;
--layout-help-hero-radius-note-shared:20px;
--layout-help-grid-gap-note-shared:10px;
--layout-help-card-padding-note-shared:12px 13px;
--layout-help-card-radius-note-shared:16px;
--layout-help-form-gap-note-shared:8px;
--layout-help-control-padding-note-shared:9px 10px;
--layout-help-control-radius-note-shared:12px;
--layout-help-textarea-min-height-note-shared:184px;
--layout-help-contact-button-min-width-note-shared:200px;
--layout-help-contact-mini-max-width-note-shared:280px;
--layout-help-gap-tablet-shared:8px;
--layout-help-gap-tablet-wide-shared:12px;
--layout-help-gap-tight-tablet-shared:7px;
--layout-help-shell-min-height-tablet-shared:calc(100dvh - 220px);
--layout-help-shell-min-height-short-tablet-shared:calc(100dvh - 210px);
--layout-help-desktop-columns-tablet-shared:minmax(0,1.04fr) minmax(280px,.96fr);
--layout-help-desktop-columns-short-tablet-shared:minmax(0,1.08fr) minmax(260px,.92fr);
--layout-help-hero-padding-tablet-shared:12px 14px;
--layout-help-hero-radius-tablet-shared:18px;
--layout-help-grid-gap-tablet-shared:8px;
--layout-help-card-padding-tablet-shared:10px 11px;
--layout-help-card-radius-tablet-shared:14px;
--layout-help-form-gap-tablet-shared:7px;
--layout-help-control-padding-tablet-shared:7px 9px;
--layout-help-control-radius-tablet-shared:10px;
--layout-help-textarea-min-height-tablet-shared:156px;
--layout-help-contact-button-min-width-tablet-shared:168px;
--layout-help-contact-mini-max-width-tablet-shared:220px;
--layout-help-gap-mobile-shared:8px;
--layout-help-gap-tablet-mobile-shared:8px;
--layout-help-gap-tight-mobile-shared:6px;
--layout-help-shell-min-height-mobile-shared:0;
--layout-help-shell-min-height-short-mobile-shared:0;
--layout-help-desktop-columns-mobile-shared:1fr;
--layout-help-desktop-columns-short-mobile-shared:1fr;
--layout-help-hero-padding-mobile-shared:16px 15px;
--layout-help-hero-radius-mobile-shared:16px;
--layout-help-grid-gap-mobile-shared:10px;
--layout-help-card-padding-mobile-shared:14px 13px;
--layout-help-card-radius-mobile-shared:16px;
--layout-help-form-gap-mobile-shared:8px;
--layout-help-control-padding-mobile-shared:9px 10px;
--layout-help-control-radius-mobile-shared:12px;
--layout-help-textarea-min-height-mobile-shared:152px;
--layout-help-contact-button-min-width-mobile-shared:0;
--layout-help-contact-mini-max-width-mobile-shared:none;
--layout-overlay-padding:18px;
--layout-overlay-padding-mobile:14px;
--layout-modal-box-max-width:310px;
--layout-modal-box-padding:26px 20px;
--layout-modal-icon-size:2.8rem;
--layout-modal-button-padding:11px;
--layout-legal-box-max-width:680px;
--layout-legal-box-max-height:calc(100dvh - 36px);
--layout-legal-box-padding:18px 18px 14px;
--layout-legal-box-radius:22px;
--layout-legal-close-size:32px;
--layout-legal-section-padding:11px 12px;
--layout-legal-section-radius:14px;
--layout-legal-body-gap:10px;
--layout-legal-button-padding:10px 12px;
--layout-paywall-max-width:420px;
--layout-paywall-max-width-tablet:560px;
--layout-paywall-padding:28px 20px 24px;
--layout-paywall-padding-mobile:20px 12px 18px;
--layout-paywall-plan-gap:12px;
--layout-paywall-plan-gap-tablet:10px;
--layout-paywall-plan-padding:20px 14px 16px;
--layout-paywall-plan-padding-mobile:18px 12px 14px;
--layout-paywall-plan-radius:16px;
--layout-paywall-button-padding:10px;
--layout-paywall-button-radius:10px;
--layout-daywrap-box-width:430px;
--layout-daywrap-box-padding:18px;
--layout-daywrap-box-radius:30px;
--layout-daywrap-hero-padding:14px 14px 12px;
--layout-daywrap-hero-radius:24px;
--layout-daywrap-hero-gap:12px;
--layout-daywrap-badge-padding:8px 12px;
--layout-daywrap-icon-size:58px;
--layout-daywrap-icon-radius:18px;
--layout-daywrap-mini-gap:8px;
--layout-daywrap-forecast-gap:10px;
--layout-daywrap-stat-gap:10px;
--layout-daywrap-stat-padding:14px 13px 13px;
--layout-daywrap-stat-radius:22px;
--layout-daywrap-stat-icon-size:52px;
--layout-daywrap-stat-icon-radius:16px;
--layout-daywrap-tip-padding:12px 13px;
--layout-daywrap-tip-radius:16px;
--layout-daywrap-button-padding:13px 16px;
--layout-challenge-round-result-max-width:760px;
--layout-challenge-round-result-padding:18px;
--layout-challenge-round-grid-gap:10px;
--layout-challenge-round-card-padding:12px;
--layout-challenge-round-avatar-size:38px;
--layout-challenge-round-score-padding:12px;
--layout-challenge-round-next-margin:8px;
--layout-challenge-timer-gap:8px;
--layout-challenge-timer-margin:4px 0 6px;
--layout-challenge-timer-padding:4px 8px;
--layout-challenge-timer-radius:12px;
--layout-challenge-timer-size:36px;
--layout-challenge-winner-max-width:760px;
--layout-challenge-winner-padding:20px 24px 22px;
--layout-challenge-finish-max-width:760px;
--layout-challenge-finish-padding:20px 20px 16px;
--layout-challenge-finish-radius:24px;
--layout-challenge-finish-top-gap:12px;
--layout-challenge-finish-stamp-size:82px;
--layout-challenge-finish-stamp-radius:24px;
--layout-challenge-finish-kicker-padding:8px 14px;
--layout-challenge-finish-scoreboard-gap:10px;
--layout-challenge-finish-scoreboard-padding:12px;
--layout-challenge-finish-scoreboard-radius:20px;
--layout-challenge-finish-score-side-padding:12px 10px;
--layout-challenge-finish-score-avatar-size:108px;
--layout-challenge-finish-summary-padding:16px 18px;
--layout-challenge-finish-summary-radius:22px;
--layout-challenge-finish-mini-gap:10px;
--layout-challenge-finish-mini-padding:14px 12px;
--layout-challenge-finish-mini-radius:18px;
--layout-challenge-finish-actions-gap:8px;
--layout-challenge-finish-actions-margin:12px;
--layout-choice-adventure-home-card-content-gap:6px;
--layout-choice-adventure-home-icon-width:54px;
--layout-choice-adventure-home-icon-height:58px;
--layout-choice-adventure-locked-badge-padding:5px 12px;
--layout-choice-adventure-locked-badge-gap:5px;
--layout-choice-adventure-banner-icon-size:72px;
--layout-choice-adventure-banner-icon-radius:24px;
--layout-choice-adventure-banner-icon-art-size:92%;
--layout-choice-adventure-flow-icon-art-size:82%;
--layout-choice-adventure-action-icon-art-size:86%;
--layout-choice-adventure-banner-meta-gap:8px;
--layout-choice-adventure-banner-stat-padding:6px 11px;
--layout-choice-adventure-flow-step-radius:18px;
--layout-route-main-mobile-padding:calc(88px + env(safe-area-inset-bottom));
--layout-route-result-mobile-padding:calc(84px + env(safe-area-inset-bottom));
--layout-route-app-mobile-padding:calc(20px + env(safe-area-inset-bottom));
--layout-route-play-hud-padding:6px 14px;
--layout-route-play-hud-gap:8px;
--layout-route-play-hud-radius:18px;
--layout-route-play-hud-chip-padding:4px 10px;
--layout-route-play-hud-chip-gap:6px;
--layout-route-play-hud-icon-size:38px;
--layout-route-play-hud-pos-padding:5px 10px;
--layout-route-play-hud-pos-gap:6px;
--layout-route-play-hud-pos-max-width:170px;
--layout-route-play-avatar-size:30px;
--layout-route-play-hpt-icon-size:28px;
}
/* Leadio mobile Home: product-led app layout. */
.leadio-mobile-home{
display:none;
}
@media (max-width:767px){
body.route-fit-view:has(#main.main-fit-view .leadio-mobile-home) #app{
width:100%;
max-width:430px;
padding:0 !important;
gap:0 !important;
background:#F8FBFD;
}
body.route-fit-view:has(#main.main-fit-view .leadio-mobile-home) #nav{
display:none !important;
}
body.route-fit-view #main.main-fit-view:has(.leadio-mobile-home){
padding:0 !important;
background:#F8FBFD;
overflow:hidden;
}
#main.main-fit-view .home-dashboard:has(.leadio-mobile-home){
display:block !important;
width:100%;
min-height:100%;
padding:0 !important;
background:#F8FBFD;
}
#main.main-fit-view .home-dashboard:has(.leadio-mobile-home) > .home-main,
#main.main-fit-view .home-dashboard:has(.leadio-mobile-home) > .home-side{
display:none !important;
}
.leadio-mobile-home{
min-height:100dvh;
height:100dvh;
max-height:100dvh;
display:flex;
flex-direction:column;
overflow:hidden;
color:#14365A;
background:#F8FBFD;
position:relative;
}
.leadio-mobile-home::after{
content:"";
position:absolute;
z-index:19;
left:0;
right:0;
bottom:0;
height:calc(90px + env(safe-area-inset-bottom));
background:linear-gradient(180deg,rgba(248,251,253,0),#F8FBFD 28%,#F8FBFD 100%);
pointer-events:none;
}
.lmh-topbar{
position:relative;
z-index:3;
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:10px 15px 8px;
color:#FFFFFF;
background:#0D547D;
}
.lmh-brand{
display:inline-flex;
align-items:center;
gap:8px;
min-width:0;
font-size:.9rem;
font-weight:950;
letter-spacing:0;
text-shadow:0 1px 1px rgba(2,20,38,.2);
}
.lmh-brand-mark{
width:28px;
height:28px;
flex:0 0 28px;
border-radius:50%;
background:url("assets/icons/app/leadio-favicon-192.png") center/contain no-repeat;
box-shadow:0 0 0 2px rgba(255,255,255,.16),0 8px 18px rgba(7,47,84,.24);
}
.lmh-avatar{
width:34px;
height:34px;
border:2px solid #8EC5FF;
border-radius:50%;
padding:1px;
background:#FFFFFF;
overflow:hidden;
box-shadow:0 8px 18px rgba(7,47,84,.24);
}
.lmh-avatar img,
.lmh-avatar svg{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.lmh-feed{
position:relative;
z-index:1;
flex:1 1 auto;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
padding:0 14px calc(86px + env(safe-area-inset-bottom));
}
.lmh-feed::-webkit-scrollbar{
display:none;
}
.lmh-hero-band{
margin:-1px -14px 0;
padding:1px 14px 15px;
border-radius:0 0 20px 20px;
background:#0D547D;
}
.lmh-hero{
position:relative;
z-index:1;
min-height:156px;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(118px,34%);
align-items:center;
gap:8px;
padding:15px 13px 14px;
border-radius:20px;
border:1px solid rgba(211,224,236,.95);
background:
radial-gradient(circle at 96% 12%,rgba(252,211,77,.28),transparent 34%),
linear-gradient(135deg,#FFFFFF 0%,#F7FBFF 58%,#FFF7DF 100%);
box-shadow:
0 4px 0 rgba(211,225,238,.76),
0 18px 32px rgba(15,42,75,.16);
}
.lmh-hero-copy{
min-width:0;
}
.lmh-eyebrow{
display:inline-flex;
align-items:center;
width:max-content;
max-width:100%;
margin-bottom:7px;
padding:5px 8px;
border-radius:999px;
background:#F3F8FC;
color:#1368BD;
font-size:.58rem;
font-weight:950;
line-height:1;
text-transform:uppercase;
letter-spacing:.08em;
}
.lmh-hero h1{
margin:0 0 6px;
color:#123A63;
font-size:1.54rem;
line-height:1.02;
font-weight:950;
}
.lmh-hero p{
margin:0 0 12px;
max-width:210px;
color:#5B718A;
font-size:.74rem;
line-height:1.28;
font-weight:760;
}
.lmh-primary{
position:relative;
isolation:isolate;
min-height:40px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
border:0;
border-radius:999px;
padding:0 15px;
background:linear-gradient(135deg,#1374D3,#20A8EA);
color:#FFFFFF;
font-family:inherit;
font-size:.76rem;
font-weight:950;
box-shadow:0 4px 0 #0B5FAE,0 14px 22px rgba(19,116,211,.24);
}
.lmh-primary b{
font-size:1rem;
line-height:1;
}
.lmh-demo-note{
margin-top:8px;
color:#5B718A;
font-size:.58rem;
font-weight:760;
line-height:1.15;
}
.lmh-hero-art{
width:100%;
height:116px;
overflow:visible;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
}
.lmh-hero-art img{
width:clamp(132px,36vw,154px);
max-width:none;
height:auto;
object-fit:contain;
display:block;
filter:drop-shadow(0 12px 18px rgba(15,42,75,.16));
}
.lmh-section{
margin-top:13px;
}
.lmh-section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
margin:0 2px 8px;
}
.lmh-section-head span{
color:#173A62;
font-size:.78rem;
font-weight:950;
line-height:1;
}
.lmh-section-head em{
color:#6C8198;
font-size:.56rem;
font-weight:760;
line-height:1.1;
text-align:right;
font-style:normal;
}
.lmh-demo-journey-panel{
display:flex;
flex-direction:column;
gap:10px;
padding:8px;
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(237,247,255,.72) 100%);
box-shadow:inset 0 0 0 1px #DCEAF5;
}
.lmh-demo-journey-panel .lmh-growth-card{
margin:0;
}
.lmh-demo-journey-panel .lmh-mode-card{
box-shadow:0 2px 0 rgba(203,213,225,.58),0 8px 14px rgba(15,42,75,.04);
}
.lmh-demo-journey-panel .lmh-mode-card.is-featured{
box-shadow:0 3px 0 #D4E8F7,0 10px 18px rgba(37,99,235,.055);
}
.lmh-demo-journey-panel .lmh-mode-card.is-recommended:not(.is-featured){
box-shadow:0 2px 0 #D7ECF8,0 9px 16px rgba(37,99,235,.055);
}
.lmh-mode-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.lmh-mode-card{
position:relative;
overflow:visible;
min-height:86px;
display:grid;
grid-template-columns:36px minmax(0,1fr);
grid-template-rows:auto auto;
gap:7px 8px;
align-items:center;
border:1px solid #D8E4EF;
border-radius:16px;
padding:10px;
background:#FFFFFF;
color:#16304F;
font-family:inherit;
text-align:left;
box-shadow:0 3px 0 rgba(203,213,225,.72),0 11px 18px rgba(15,42,75,.055);
}
.lmh-mode-card.is-featured{
grid-column:1 / -1;
min-height:78px;
grid-template-columns:44px minmax(0,1fr) 74px;
grid-template-rows:auto;
border-color:#B6D7F2;
background:linear-gradient(135deg,#FFFFFF 0%,#F8FCFE 100%);
box-shadow:0 4px 0 #D4E8F7,0 14px 24px rgba(37,99,235,.07);
}
.lmh-mode-card.is-recommended:not(.is-featured){
border-color:#AEDCF4;
background:linear-gradient(135deg,#FFFFFF 0%,#F8FCFE 100%);
box-shadow:0 3px 0 #D7ECF8,0 12px 20px rgba(37,99,235,.07);
}
.lmh-primary.is-guided::after,
.lmh-mode-card.is-recommended::after,
.lmh-growth-card.is-guided::after{
content:"";
position:absolute;
inset:-5px;
border:2px solid rgba(56,189,248,.28);
border-radius:inherit;
box-shadow:0 0 0 0 rgba(56,189,248,.08),0 0 14px rgba(56,189,248,.12);
pointer-events:none;
animation:lmhGuideBreath 3.1s ease-in-out infinite;
}
.lmh-primary.is-guided::after{
inset:-6px;
border-radius:999px;
}
.lmh-guide-pill{
position:absolute;
top:-8px;
right:12px;
z-index:2;
min-height:18px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
padding:0 8px;
background:#1479D6;
color:#FFFFFF;
border:1px solid rgba(255,255,255,.9);
box-shadow:0 8px 14px rgba(20,121,214,.22);
font-size:.5rem;
font-weight:950;
line-height:1;
letter-spacing:.04em;
text-transform:uppercase;
}
@keyframes lmhGuideBreath{
0%,100%{
opacity:.4;
transform:scale(1);
box-shadow:0 0 0 0 rgba(56,189,248,.05),0 0 12px rgba(56,189,248,.12);
}
50%{
opacity:1;
transform:scale(1.018);
box-shadow:0 0 0 6px rgba(56,189,248,.07),0 0 22px rgba(56,189,248,.22);
}
}
@media (prefers-reduced-motion:reduce){
.lmh-primary.is-guided::after,
.lmh-mode-card.is-recommended::after,
.lmh-growth-card.is-guided::after{
animation:none;
opacity:.7;
}
}
.lmh-mode-icon{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
}
.lmh-mode-card.is-featured .lmh-mode-icon{
width:44px;
height:44px;
}
.lmh-mode-icon img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
.lmh-mode-copy{
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
}
.lmh-mode-copy strong{
font-size:.78rem;
font-weight:950;
line-height:1.08;
color:#122D4C;
}
.lmh-mode-copy em{
color:#536B84;
font-size:.56rem;
font-weight:760;
line-height:1.16;
font-style:normal;
}
.lmh-mode-progress{
grid-column:1 / -1;
display:flex;
align-items:center;
gap:6px;
}
.lmh-mode-card.is-featured .lmh-mode-progress{
grid-column:auto;
flex-direction:column;
align-items:flex-end;
gap:5px;
}
.lmh-mode-progress b{
color:#1368BD;
font-size:.58rem;
font-weight:950;
line-height:1;
white-space:nowrap;
}
.lmh-mode-progress i{
flex:1 1 auto;
width:100%;
height:6px;
border-radius:999px;
background:#E5EDF6;
overflow:hidden;
border:1px solid #DDE7F0;
}
.lmh-mode-progress i span{
display:block;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#68D3F4,#1479D6);
}
.lmh-stat-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.lmh-growth-section .lmh-section-head span{
color:#4E6A83;
font-weight:900;
}
.lmh-growth-section{
margin-top:12px;
}
.lmh-growth-section .lmh-section-head em{
color:#8A9CAF;
font-weight:700;
}
.lmh-growth-section--empty .lmh-section-head span{
color:#667C91;
}
.lmh-growth-section--empty .lmh-section-head em{
color:#9AAABA;
}
.lmh-stat-chip{
min-height:72px;
display:grid;
grid-template-columns:48px minmax(0,1fr);
align-items:center;
gap:9px;
border:1px solid #E5ECF3;
border-radius:16px;
padding:9px 11px;
background:#FFFFFF;
box-shadow:0 2px 0 rgba(218,226,235,.62),0 8px 14px rgba(15,23,42,.028);
}
.lmh-stat-chip--trust{border-color:#F8E4B0;background:#FFFCF3}
.lmh-stat-chip--team{border-color:#CBEFDF;background:#F8FFFB}
.lmh-stat-chip--think{border-color:#E3DAFF;background:#FCFAFF}
.lmh-stat-chip--boss{border-color:#FFD9B5;background:#FFF9F3}
.lmh-stat-chip.is-empty{
border-color:#E3ECF4;
background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFD 100%);
box-shadow:0 2px 0 rgba(226,235,244,.72),0 8px 14px rgba(15,23,42,.02);
opacity:.78;
}
.lmh-stat-icon{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
}
.lmh-stat-icon svg,
.lmh-stat-icon img{
max-width:46px !important;
max-height:46px !important;
display:block;
}
.lmh-stat-chip span:last-child{
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
}
.lmh-stat-chip b{
color:#2E5573;
font-size:1.22rem;
font-weight:900;
line-height:1;
}
.lmh-stat-chip.is-empty b{
color:#8BA0B4;
font-size:1.06rem;
letter-spacing:0;
}
.lmh-stat-chip em{
color:#74879B;
font-size:.58rem;
font-weight:820;
line-height:1.08;
font-style:normal;
}
.lmh-stat-chip.is-empty em{
color:#8799AA;
}
.lmh-growth-card{
position:relative;
overflow:visible;
margin:10px 0 13px;
display:grid;
grid-template-columns:minmax(0,1fr) 84px;
align-items:center;
gap:10px;
border:1px solid #F3C96F;
border-radius:20px;
padding:13px;
background:
radial-gradient(circle at 96% 16%,rgba(245,158,11,.2),transparent 32%),
linear-gradient(135deg,#FFFFFF 0%,#FFFDF5 52%,#FFF2D7 100%);
box-shadow:0 4px 0 rgba(253,211,128,.82),0 14px 24px rgba(146,64,14,.08);
cursor:pointer;
}
.lmh-growth-card + .lmh-section{
margin-top:0;
}
.lmh-growth-copy{
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
}
.lmh-growth-copy span{
width:max-content;
max-width:100%;
color:#B76A11;
font-size:.56rem;
font-weight:950;
line-height:1;
text-transform:uppercase;
letter-spacing:.09em;
}
.lmh-growth-copy strong{
color:#123A63;
font-size:.9rem;
font-weight:950;
line-height:1.08;
}
.lmh-growth-copy em{
color:#536B84;
font-size:.62rem;
font-weight:720;
line-height:1.24;
font-style:normal;
}
.lmh-growth-side{
min-width:0;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
}
.lmh-growth-badge{
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:#FFF8E8;
border:1px solid #F6D681;
box-shadow:0 6px 12px rgba(146,64,14,.08);
}
.lmh-growth-badge-icon{
width:21px;
height:21px;
object-fit:contain;
display:block;
}
.lmh-growth-meter{
width:84px;
min-width:0;
display:flex;
align-items:center;
justify-content:flex-end;
gap:7px;
}
.lmh-growth-meter i{
flex:1 1 auto;
height:8px;
border-radius:999px;
background:#E5EDF6;
overflow:hidden;
border:1px solid #DDE7F0;
}
.lmh-growth-meter i span{
display:block;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#68D3F4,#1479D6);
}
.lmh-growth-meter b{
color:#1368BD;
font-size:.7rem;
font-weight:950;
line-height:1;
}
.lmh-bottom-nav{
position:fixed;
left:50%;
right:auto;
bottom:calc(10px + env(safe-area-inset-bottom));
z-index:20;
width:calc(100% - 24px);
max-width:406px;
transform:translateX(-50%);
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:2px;
padding:7px;
border:1px solid rgba(211,224,236,.95);
border-radius:22px;
background:rgba(255,255,255,.95);
box-shadow:0 16px 36px rgba(15,42,75,.14),0 4px 0 rgba(211,225,238,.66);
backdrop-filter:blur(16px);
}
.lmh-bottom-nav button{
min-height:50px;
border:0;
border-radius:16px;
background:transparent;
color:#6B7C93;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
font-family:inherit;
font-size:.58rem;
font-weight:950;
}
.lmh-bottom-nav button.is-active{
color:#1479D6;
background:#EEF7FD;
}
.lmh-bottom-icon,
.lmh-bottom-avatar,
.lmh-bottom-outline-icon{
width:21px;
height:21px;
display:block;
}
.lmh-bottom-outline-icon{
fill:none;
stroke:currentColor;
stroke-width:2.05;
stroke-linecap:round;
stroke-linejoin:round;
}
.lmh-bottom-avatar{
border-radius:50%;
overflow:hidden;
background:#F1F7FB;
}
.lmh-bottom-avatar img,
.lmh-bottom-avatar svg{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
}
@media (max-width:374px) and (orientation:portrait){
.lmh-topbar{min-height:48px;padding-left:12px;padding-right:12px}
.lmh-brand{font-size:.82rem}
.lmh-feed{padding-left:10px;padding-right:10px;padding-bottom:82px}
.lmh-hero{grid-template-columns:minmax(0,1fr) 104px;min-height:144px;padding:13px 12px;border-radius:18px}
.lmh-hero h1{font-size:1.34rem}
.lmh-hero p{font-size:.66rem;max-width:178px}
.lmh-primary{min-height:38px;font-size:.68rem;padding:0 13px}
.lmh-demo-note{margin-top:6px;font-size:.52rem}
.lmh-hero-art{height:104px}
.lmh-hero-art img{width:126px;max-width:none}
.lmh-mode-card{min-height:78px;padding:9px;border-radius:14px}
.lmh-mode-card.is-featured{min-height:72px;grid-template-columns:40px minmax(0,1fr) 64px}
.lmh-mode-icon{width:32px;height:32px}
.lmh-mode-card.is-featured .lmh-mode-icon{width:40px;height:40px}
.lmh-mode-copy strong{font-size:.7rem}
.lmh-mode-copy em{font-size:.5rem}
.lmh-stat-chip{min-height:66px;grid-template-columns:42px minmax(0,1fr);padding:8px 9px;border-radius:14px}
.lmh-stat-icon{width:42px;height:42px}
.lmh-stat-icon svg,.lmh-stat-icon img{max-width:40px !important;max-height:40px !important}
.lmh-stat-chip b{font-size:1.08rem}
.lmh-stat-chip em{font-size:.52rem}
.lmh-growth-card{grid-template-columns:minmax(0,1fr) 72px;border-radius:17px;padding:11px}
.lmh-growth-badge{width:28px;height:28px;border-radius:11px}
.lmh-growth-badge-icon{width:19px;height:19px}
.lmh-growth-meter{width:72px;gap:5px}
.lmh-bottom-nav{width:calc(100% - 20px);border-radius:19px;padding:6px}
.lmh-bottom-nav button{min-height:46px;border-radius:14px;font-size:.52rem}
}
@media (min-width:768px){
#main.main-fit-view .hero-wrap .hero-mascot{
bottom:var(--home-hero-mascot-bottom,var(--layout-home-hero-mascot-bottom)) !important;
}
}
html,body{height:100%;min-height:100%;overflow:hidden;background:linear-gradient(135deg,var(--tone-app-bg-top) 0%,var(--tone-app-bg-bottom) 100%)}
body{
font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
color:var(--text);
background:linear-gradient(135deg,var(--tone-app-bg-top) 0%,var(--tone-app-bg-bottom) 100%);
background-attachment:fixed;
width:100%;
max-width:100vw;
height:100%;
min-height:100vh;
min-height:100svh;
min-height:100dvh;
overflow:hidden;
position:relative;
}
body::before{
content:'';
position:fixed;
inset:0;
background-image:
linear-gradient(135deg,rgba(255,255,255,.76) 0%,rgba(248,250,252,.70) 100%),
var(--asset-leadio-light-lobby-bg);
background-size:cover,cover;
background-position:center,center;
background-repeat:no-repeat,no-repeat;
pointer-events:none;
z-index:0;
}
body > * {position:relative;z-index:1;}
@media (hover:none) and (pointer:coarse){
body{background-attachment:scroll}
}
body.app-booting #app{visibility:hidden;pointer-events:none}
#app{width:100%;max-width:var(--layout-app-max-width);margin:0 auto;padding:var(--layout-app-pad-top) var(--layout-app-pad-x) 0;min-height:100vh;min-height:100svh;min-height:100dvh;height:100dvh;display:flex;flex-direction:column;gap:var(--layout-app-gap);overflow:hidden}
#main{flex:1;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:var(--layout-main-scroll-padding);-webkit-overflow-scrolling:touch}
#main::-webkit-scrollbar{display:none}
/* During play (sc-grid present), #main has no scrollable content — lock it */
#main:has(.sc-grid){overflow:hidden;padding-bottom:0}
/* ── WELCOME SPLASH ── */
#welcome-splash{position:fixed;inset:0;z-index:99998;background:
linear-gradient(135deg,rgba(255,255,255,.78) 0%,rgba(248,250,252,.72) 100%),
var(--asset-leadio-light-lobby-bg),
linear-gradient(135deg,var(--tone-app-bg-top) 0%,var(--tone-app-bg-bottom) 100%);
background-size:cover,cover,auto;background-position:center,center,center;background-repeat:no-repeat,no-repeat,no-repeat;
display:flex;align-items:center;justify-content:center;padding:var(--layout-welcome-splash-padding);overflow-y:auto;min-height:100vh;min-height:100svh;min-height:100dvh;isolation:isolate}
#welcome-splash.gone{display:none}
.ws-shell{width:min(var(--layout-welcome-shell-width),100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-welcome-shell-gap);align-items:stretch;position:relative;z-index:1}
.ws-brand-panel,.ws-auth-card{border-radius:var(--layout-welcome-panel-radius);box-shadow:0 22px 60px rgba(15,23,42,.12);animation:bounceIn .5s cubic-bezier(.3,1.5,.5,1)}
.ws-brand-panel{background:linear-gradient(145deg,#22343A 0%,#3D5F63 52%,#7C8B67 100%);padding:var(--layout-welcome-brand-padding);color:#fff;display:flex;flex-direction:column;justify-content:space-between;height:var(--layout-welcome-panel-height);position:relative;overflow:hidden;isolation:isolate}
.ws-brand-panel::before{content:'';position:absolute;inset:0;background:
radial-gradient(circle at 76% 16%,rgba(255,255,255,.15),transparent 22%),
radial-gradient(circle at 14% 82%,rgba(255,244,214,.12),transparent 20%);
pointer-events:none}
.ws-auth-card{background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(248,251,255,.97) 100%);backdrop-filter:blur(12px);padding:var(--layout-welcome-auth-padding);height:var(--layout-welcome-panel-height);overflow:hidden;border:1px solid rgba(255,255,255,.68);display:flex;flex-direction:column;position:relative;isolation:isolate}
.ws-brand-panel > *,.ws-auth-card > *{position:relative;z-index:1}
.ws-shell::before{
content:'';
position:absolute;
top:46px;
bottom:46px;
left:50%;
width:34px;
transform:translateX(-50%);
border-radius:999px;
background:
linear-gradient(90deg,rgba(255,247,214,.18),rgba(255,251,235,.94) 36%,rgba(248,210,122,.9) 50%,rgba(183,126,34,.46) 64%,rgba(255,247,214,.18)),
repeating-radial-gradient(ellipse 14px 7px at 50% 16px,transparent 0 8px,rgba(255,251,235,.98) 8.5px 11px,rgba(217,166,58,.9) 11.5px 13px,transparent 13.5px 29px);
box-shadow:
-10px 0 18px rgba(15,37,87,.1),
10px 0 18px rgba(15,23,42,.08),
inset 0 0 0 1px rgba(255,247,214,.62),
inset 0 0 10px rgba(146,64,14,.1);
z-index:3;
pointer-events:none;
}
.ws-shell::after{
content:'';
position:absolute;
top:28px;
bottom:28px;
left:50%;
width:46px;
transform:translateX(-50%);
border-radius:999px;
background:
linear-gradient(90deg,rgba(146,64,14,.16),rgba(255,247,214,.12) 22%,rgba(255,255,255,.08) 50%,rgba(15,37,87,.08) 78%,rgba(146,64,14,.13)),
repeating-linear-gradient(to bottom,transparent 0 31px,rgba(146,64,14,.13) 31px 35px,transparent 35px 62px);
z-index:2;
pointer-events:none;
}
.ws-finance-layer{position:absolute;inset:0;pointer-events:none;z-index:0}
.ws-fin-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:.18;filter:saturate(.95)}
.ws-fin-icon svg{width:100%;height:100%}
.ws-finance-layer--splash{display:none;overflow:hidden}
.ws-finance-layer--splash .ws-fin-icon{opacity:.2;filter:saturate(.95)}
.ws-kicker{font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:14px}
.ws-mascot{width:min(var(--layout-welcome-mascot-width),82%);margin:0 0 12px}
.ws-mascot img{width:100%;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(15,23,42,.22))}
.ws-title{font-size:2rem;font-weight:900;color:#fff;line-height:1.02;margin-bottom:10px;letter-spacing:-.03em}
.ws-sub{font-size:.96rem;color:rgba(255,255,255,.88);line-height:1.58;max-width:520px;margin-bottom:18px}
.ws-age-pill{display:inline-flex;align-items:center;width:max-content;max-width:100%;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);color:#FFF7D6;font-size:.72rem;font-weight:900;letter-spacing:.02em;line-height:1.25;padding:8px 12px;margin:0 0 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.ws-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--layout-welcome-mode-gap);margin-bottom:18px}
.ws-mode-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:var(--layout-welcome-mode-card-padding);display:flex;flex-direction:column;gap:5px;min-height:var(--layout-welcome-mode-card-min-height)}
.ws-mode-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.ws-mode-icon svg{width:100%;height:100%;display:block}
.ws-mode-icon img{width:100%;height:100%;display:block;object-fit:contain}
.ws-mode-card strong{font-size:.78rem;font-weight:900;color:#fff;line-height:1.2}
.ws-mode-card small{font-size:.68rem;color:rgba(255,255,255,.74);line-height:1.42;font-weight:600}
.ws-brand-note{margin-top:auto;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:15px 16px 14px}
.ws-brand-note-title{font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#FDE68A;margin-bottom:6px}
.ws-brand-note-copy{font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.88);font-weight:600}
.ws-auth-top{margin-bottom:8px}
.ws-auth-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);border:1px solid #BFDBFE;border-radius:999px;padding:6px 11px;font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--sky3);margin-bottom:8px}
.ws-auth-title{font-size:1.58rem;font-weight:900;letter-spacing:-.03em;color:var(--text);line-height:1.05;margin-bottom:6px}
.ws-auth-copy{font-size:.76rem;line-height:1.42;color:var(--muted);max-width:390px}
.ws-label{font-size:0.72rem;font-weight:800;color:var(--sky3);margin-bottom:4px;display:block}
.ws-input{width:100%;padding:var(--layout-welcome-input-padding);border:1.5px solid #D7E7F6;border-radius:14px;font-size:0.9rem;font-family:inherit;color:var(--text);outline:none;transition:border-color .15s, box-shadow .15s, transform .15s;margin-bottom:8px;background:#fff}
.ws-input:focus{border-color:var(--sky);box-shadow:0 0 0 4px rgba(14,165,233,.12)}
.ws-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--layout-welcome-field-gap)}
.ws-field-grid-password{gap:var(--layout-welcome-field-gap)}
.ws-field-cell .ws-input{margin-bottom:6px}
.ws-consent{display:flex;align-items:flex-start;gap:7px;background:#F8FBFF;border:1.5px solid var(--border);border-radius:14px;padding:8px 10px;margin-bottom:9px;font-size:0.68rem;line-height:1.38;color:var(--muted);cursor:pointer}
.ws-consent input{margin-top:2px;flex-shrink:0}
.ws-link-btn{display:inline;padding:0;border:none;background:none;color:var(--sky3);font-size:inherit;font-weight:800;cursor:pointer;text-decoration:underline}
.ws-link-btn:hover{color:var(--sky2)}
.legal-ov{position:fixed;inset:0;z-index:99999;background:rgba(12,74,110,0.56);display:flex;align-items:center;justify-content:center;padding:var(--layout-overlay-padding);backdrop-filter:blur(4px)}
.legal-box{position:relative;background:#fff;border-radius:var(--layout-legal-box-radius);padding:var(--layout-legal-box-padding);max-width:var(--layout-legal-box-max-width);width:100%;max-height:var(--layout-legal-box-max-height);overflow-y:auto;box-shadow:0 24px 60px rgba(14,165,233,0.24);border:1px solid var(--border)}
.legal-close{position:absolute;top:12px;right:12px;width:var(--layout-legal-close-size);height:var(--layout-legal-close-size);border:none;border-radius:50%;background:#EFF6FF;color:var(--sky3);font-size:0.9rem;font-weight:900;cursor:pointer}
.legal-kicker{display:inline-flex;align-items:center;gap:6px;background:#EFF6FF;color:var(--sky3);border-radius:999px;padding:5px 10px;font-size:0.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.6px;margin-bottom:9px}
.legal-title{font-size:1.28rem;font-weight:900;color:var(--sky-dk);line-height:1.1;margin-bottom:4px}
.legal-updated{font-size:0.72rem;color:var(--muted2);margin-bottom:12px}
.legal-body{display:flex;flex-direction:column;gap:var(--layout-legal-body-gap);margin-bottom:14px}
.legal-section{background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border:1px solid #DCEEFF;border-radius:var(--layout-legal-section-radius);padding:var(--layout-legal-section-padding)}
.legal-section-title{font-size:0.82rem;font-weight:900;color:var(--text);margin-bottom:4px}
.legal-section-body{font-size:0.74rem;line-height:1.55;color:var(--muted)}
.legal-ok{width:100%;padding:var(--layout-legal-button-padding);border:none;border-radius:var(--layout-legal-section-radius);background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;font-size:0.84rem;font-weight:800;cursor:pointer}
.ws-start{width:100%;padding:var(--layout-welcome-button-padding);background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;border:none;border-radius:16px;font-size:0.93rem;font-weight:800;cursor:pointer;box-shadow:0 10px 24px rgba(14,165,233,0.26);transition:transform .13s,box-shadow .13s;margin-bottom:0}
.ws-start:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(14,165,233,0.45)}
.ws-guest-adventure-btn{position:relative;width:100%;min-height:112px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:18px 16px 16px;margin:7px 0 9px;border:2px solid #FB923C;border-radius:18px;background:radial-gradient(circle at 12% 14%,rgba(255,255,255,.7),transparent 32%),linear-gradient(135deg,#FFF7ED 0%,#FFEDD5 48%,#FFFFFF 100%);color:#172554;box-shadow:0 18px 38px rgba(249,115,22,.32),0 0 34px rgba(251,191,36,.36),inset 0 1px 0 rgba(255,255,255,.94);font-family:inherit;text-align:left;cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s;animation:wsGuestGlow 2.25s ease-in-out infinite}
.ws-guest-adventure-btn::before{content:"";position:absolute;inset:-4px;border-radius:22px;border:2px solid rgba(249,115,22,.26);box-shadow:0 0 0 4px rgba(249,115,22,.1),0 0 26px rgba(251,191,36,.34);pointer-events:none;animation:wsGuestRing 2.25s ease-in-out infinite}
.ws-guest-adventure-btn:hover{transform:translateY(-2px);border-color:#F97316;box-shadow:0 22px 48px rgba(249,115,22,.44),0 0 52px rgba(251,191,36,.54),inset 0 1px 0 rgba(255,255,255,.98)}
.ws-guest-adventure-btn:focus-visible{outline:3px solid rgba(14,165,233,.28);outline-offset:3px}
.ws-guest-ribbon{position:absolute;top:-11px;right:14px;display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:0 10px;border-radius:999px;background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;border:2px solid #fff;font-size:.55rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 9px 18px rgba(37,99,235,.24);white-space:nowrap}
.ws-guest-icon{width:56px;height:56px;border-radius:17px;display:flex;align-items:center;justify-content:center;background:#FFFFFF;border:1px solid rgba(251,191,36,.72);box-shadow:0 9px 20px rgba(180,83,9,.2),0 0 20px rgba(251,191,36,.38);flex:0 0 auto;animation:wsGuestIconGlow 2.25s ease-in-out infinite}
.ws-guest-icon img{width:45px;height:45px;object-fit:contain;display:block}
.ws-guest-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.ws-guest-eyebrow{display:inline-flex;width:max-content;max-width:100%;padding:4px 8px;border-radius:999px;background:#DBEAFE;color:#1D4ED8;font-size:.58rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.ws-guest-title{font-size:1.08rem;font-weight:950;line-height:1.02;color:#172554}
.ws-guest-desc{font-size:.69rem;font-weight:850;line-height:1.22;color:#475569}
.ws-guest-action{align-self:center;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;background:linear-gradient(135deg,#F59E0B,#F97316);color:#fff;padding:0 18px;font-size:.76rem;font-weight:950;line-height:1.12;text-align:center;box-shadow:0 10px 22px rgba(249,115,22,.36),0 0 22px rgba(251,191,36,.34);white-space:normal}
.ws-guest-points{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;margin:0 0 7px}
.ws-guest-points span{display:inline-flex;align-items:center;justify-content:center;min-height:22px;border-radius:999px;background:#EFF6FF;border:1px solid #BFDBFE;color:#1D4ED8;padding:0 9px;font-size:.58rem;font-weight:950;line-height:1;white-space:nowrap}
.ws-guest-note{margin:0 0 8px;padding:7px 10px;border:1px solid #FED7AA;border-radius:12px;background:#FFF7ED;color:#9A3412;font-size:.64rem;font-weight:800;line-height:1.32;text-align:center}
.ws-guest-note strong{font-weight:950;color:#7C2D12}
.ws-copy-desktop{display:inline}
.ws-copy-mobile,.ws-guest-instant{display:none}
.ws-account-overlay-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:38px;margin-top:6px;border:1.5px solid #DCEEFF;border-radius:999px;background:#FFFFFF;color:#0B74B8;font-family:inherit;font-size:.72rem;font-weight:950;line-height:1;letter-spacing:.02em;cursor:pointer;box-shadow:0 8px 18px rgba(15,23,42,.06);transition:transform .13s,border-color .13s,box-shadow .13s}
.ws-account-overlay-btn:hover{transform:translateY(-1px);border-color:#7DD3FC;box-shadow:0 10px 22px rgba(14,116,184,.12)}
.ws-auth-overlay{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:0;overflow-x:hidden;overflow-y:auto;isolation:isolate;background:#102026}
.ws-auth-overlay.is-open{display:flex}
.ws-auth-overlay-backdrop{position:absolute;inset:0;border:0;background:#102026;cursor:pointer}
.ws-auth-overlay .ws-email-auth-panel{position:relative;z-index:1;display:flex;flex-direction:column;width:min(390px,100%);min-height:100dvh;max-height:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:88px 32px 28px;border-radius:0;background:#102026;border:0;box-shadow:none;color:#F8FAFC}
.ws-auth-overlay-close{position:absolute;top:24px;right:24px;width:32px;height:32px;border:0;background:transparent;color:#647B88;font-family:inherit;font-size:1.85rem;font-weight:800;line-height:1;cursor:pointer}
body.ws-auth-overlay-open{overflow:hidden}
@keyframes wsGuestGlow{0%,100%{box-shadow:0 14px 34px rgba(249,115,22,.28),0 0 20px rgba(251,191,36,.24),inset 0 1px 0 rgba(255,255,255,.9)}50%{box-shadow:0 20px 46px rgba(249,115,22,.42),0 0 54px rgba(251,191,36,.62),inset 0 1px 0 rgba(255,255,255,.96)}}
@keyframes wsGuestRing{0%,100%{border-color:rgba(249,115,22,.24);box-shadow:0 0 0 3px rgba(249,115,22,.08),0 0 18px rgba(251,191,36,.22)}50%{border-color:rgba(249,115,22,.62);box-shadow:0 0 0 8px rgba(249,115,22,.14),0 0 42px rgba(251,191,36,.52)}}
@keyframes wsGuestIconGlow{0%,100%{box-shadow:0 8px 18px rgba(180,83,9,.18),0 0 16px rgba(251,191,36,.28)}50%{box-shadow:0 10px 22px rgba(180,83,9,.24),0 0 28px rgba(251,191,36,.58)}}
@media (prefers-reduced-motion:reduce){
.ws-guest-adventure-btn,.ws-guest-adventure-btn::before,.ws-guest-icon,.nav-btn.guest-growth-locked,.guest-signup-btn--growth{animation:none}
}
@media(max-width:540px){
.ws-guest-adventure-btn{min-height:0;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:11px}
.ws-guest-ribbon{top:-10px;right:10px;min-height:21px;padding:0 9px;font-size:.5rem}
.ws-guest-icon{width:42px;height:42px;border-radius:14px}
.ws-guest-icon img{width:34px;height:34px}
.ws-guest-title{font-size:.94rem}
.ws-guest-action{grid-column:1/-1;min-height:34px}
}
.ws-skip{display:block;text-align:center;font-size:0.7rem;color:var(--muted2);margin-top:7px;margin-bottom:7px;cursor:pointer;text-decoration:underline;background:none;border:none;padding:0;width:100%}
.ws-error{font-size:0.73rem;color:#DC2626;background:#FEF2F2;border:1px solid #FECACA;border-radius:10px;padding:6px 10px;margin-bottom:8px;display:none;text-align:center;line-height:1.35}
.ws-error.show{display:block}
.ws-panel-head{margin-bottom:7px}
.ws-panel-title{font-size:1rem;font-weight:900;color:var(--text);line-height:1.15;margin-bottom:4px}
.ws-panel-copy{font-size:.68rem;line-height:1.36;color:var(--muted);font-weight:600}
.ws-trial-note{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:linear-gradient(135deg,#FFF7D6,#FDE68A);border:1px solid #FACC15;border-radius:999px;padding:5px 10px;font-size:.66rem;font-weight:900;color:#8A4B00;margin-bottom:8px}
#ws-panel-signin,#ws-panel-signup{display:flex;flex-direction:column;flex:1;min-height:0}
#ws-panel-signup[style*="display:none"]{display:none !important}
.ws-auth-footer{margin-top:8px;padding-top:8px;border-top:1px solid #E5EEF8;font-size:.64rem;color:var(--muted2);line-height:1.35;text-align:center}
.ws-auth-overlay .ws-error{margin:0 0 14px;border-color:rgba(248,113,113,.35);background:rgba(127,29,29,.28);color:#FECACA}
.ws-auth-overlay .ws-panel-head{margin:0 0 28px;text-align:center}
.ws-auth-overlay .ws-panel-title{font-size:1.36rem;line-height:1.1;color:#F8FAFC;font-weight:950;margin:0}
.ws-auth-overlay .ws-panel-copy{margin:8px auto 0;max-width:260px;color:#8EA3AD;font-size:.78rem;line-height:1.35;text-align:center}
.ws-auth-overlay .ws-auth-field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ws-auth-overlay .ws-input{height:48px;margin:0 0 12px;padding:0 15px;border:2px solid #3D5660;border-radius:12px;background:#1C3038;color:#F8FAFC;font-size:1rem;font-weight:750;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.ws-auth-overlay .ws-input::placeholder{color:#D3DEE4;opacity:.98}
.ws-auth-overlay .ws-input:focus{border-color:#5ABCEB;box-shadow:0 0 0 3px rgba(90,188,235,.14),inset 0 1px 0 rgba(255,255,255,.04)}
.ws-password-wrap{position:relative;margin:0}
.ws-password-wrap .ws-input{padding-right:92px}
.ws-forgot-inline{position:absolute;right:13px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#728893;font-family:inherit;font-size:.68rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.ws-auth-overlay .ws-start{height:48px;margin:13px 0 20px;border-radius:12px;background:#45BCEB;color:#05151C;font-size:.78rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 5px 0 #1B97C8,0 16px 28px rgba(69,188,235,.17)}
.ws-auth-overlay .ws-start:hover{transform:translateY(-1px);box-shadow:0 6px 0 #1B97C8,0 18px 30px rgba(69,188,235,.2)}
.ws-divider--auth{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:11px;margin:0 0 20px;color:#5F7580;font-size:.75rem;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.ws-divider--auth::before,.ws-divider--auth::after{content:"";height:2px;background:#2C424A;border-radius:999px}
.ws-auth-overlay .ws-google-btn{min-height:50px;border:2px solid #3D5660;border-radius:13px;background:transparent;color:#7EA4FF;font-size:.78rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;box-shadow:none}
.ws-auth-overlay .ws-google-btn:hover{background:#132A32;box-shadow:none}
.ws-auth-switch{margin-top:28px;text-align:center;color:#FFFFFF;font-size:.82rem;font-weight:900}
.ws-auth-switch button{border:0;background:transparent;color:#3CC7FF;font-family:inherit;font-size:inherit;font-weight:950;letter-spacing:.03em;text-transform:uppercase;cursor:pointer}
.ws-auth-overlay .ws-auth-footer{margin-top:28px;padding:0;border:0;color:#6F8792;font-size:.69rem;line-height:1.55}
.ws-auth-overlay .ws-link-btn{color:#8EA3AD;text-decoration:none;font-weight:950}
.ws-auth-overlay #ws-panel-signin,.ws-auth-overlay #ws-panel-signup{flex:0 0 auto;min-height:0}
.ws-auth-overlay #ws-panel-signup .ws-start{margin-top:4px}
.ws-auth-overlay .ws-trial-note{background:#203B32;border-color:#3E7A5C;color:#A7F3D0}
.ws-auth-overlay .ws-consent{border-color:#3D5660;background:#172A31;color:#9DB0B8}
.ws-auth-overlay .ws-consent input{accent-color:#45BCEB}
@media (min-width:768px){
.ws-auth-overlay{
align-items:center !important;
justify-content:center !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:100vw !important;
height:100dvh !important;
min-height:100vh !important;
transform:translate(-50%,-50%) !important;
padding:24px !important;
background:rgba(15,35,66,.42) !important;
backdrop-filter:blur(7px) !important;
-webkit-backdrop-filter:blur(7px) !important;
}
.ws-auth-overlay-backdrop{
background:rgba(15,35,66,.32) !important;
}
.ws-auth-overlay .ws-email-auth-panel{
width:min(462px,calc(100vw - 48px)) !important;
min-height:0 !important;
max-height:calc(100dvh - 48px) !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
padding:28px 30px 24px !important;
border-radius:24px !important;
background:
radial-gradient(circle at 92% 8%,rgba(125,211,252,.22),transparent 26%),
linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%) !important;
border:1.5px solid #D8E7F4 !important;
box-shadow:0 28px 80px rgba(15,35,66,.24),0 0 0 1px rgba(255,255,255,.72) inset !important;
color:#102A43 !important;
}
.ws-auth-overlay .ws-email-auth-panel:has(#ws-panel-signup:not([style*="display:none"])){
width:min(660px,calc(100vw - 48px)) !important;
}
.ws-auth-overlay-close{
top:14px !important;
right:14px !important;
width:38px !important;
height:38px !important;
border:1px solid #D8E7F4 !important;
border-radius:50% !important;
background:#FFFFFF !important;
color:#61758A !important;
font-size:1.35rem !important;
box-shadow:0 8px 18px rgba(15,35,66,.08) !important;
}
.ws-auth-overlay .ws-error{
margin:0 0 14px !important;
border-color:#FECACA !important;
background:#FEF2F2 !important;
color:#B91C1C !important;
}
.ws-auth-overlay .ws-panel-head{
margin:0 42px 18px 0 !important;
text-align:left !important;
}
.ws-auth-overlay .ws-panel-title{
color:#0F2F52 !important;
font-size:1.34rem !important;
line-height:1.05 !important;
letter-spacing:0 !important;
}
.ws-auth-overlay .ws-panel-copy{
margin:7px 0 0 !important;
max-width:420px !important;
color:#536B84 !important;
font-size:.78rem !important;
line-height:1.42 !important;
text-align:left !important;
}
.ws-auth-overlay .ws-auth-field-label{
position:static !important;
width:auto !important;
height:auto !important;
overflow:visible !important;
clip:auto !important;
white-space:normal !important;
margin-bottom:5px !important;
color:#1E4D78 !important;
font-size:.7rem !important;
font-weight:900 !important;
}
.ws-auth-overlay .ws-input{
height:48px !important;
margin:0 0 12px !important;
padding:0 14px !important;
border:1.5px solid #CFE0EF !important;
border-radius:14px !important;
background:#FFFFFF !important;
color:#102A43 !important;
font-size:.9rem !important;
font-weight:750 !important;
box-shadow:0 6px 14px rgba(15,35,66,.035),inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.ws-auth-overlay .ws-input::placeholder{
color:#8AA0B5 !important;
}
.ws-auth-overlay .ws-input:focus{
border-color:#38BDF8 !important;
box-shadow:0 0 0 4px rgba(56,189,248,.13),0 8px 16px rgba(15,35,66,.055) !important;
}
.ws-auth-overlay .ws-password-wrap .ws-input{
padding-right:82px !important;
}
.ws-auth-overlay .ws-forgot-inline{
color:#0B74B8 !important;
font-size:.64rem !important;
letter-spacing:.04em !important;
}
.ws-auth-overlay .ws-start{
height:48px !important;
margin:10px 0 15px !important;
border-radius:14px !important;
background:linear-gradient(180deg,#1FA5F7 0%,#0B7FE8 100%) !important;
color:#FFFFFF !important;
font-size:.82rem !important;
font-weight:950 !important;
letter-spacing:.02em !important;
text-transform:none !important;
box-shadow:0 5px 0 #075CB7,0 16px 28px rgba(14,116,184,.18) !important;
}
.ws-auth-overlay .ws-start:hover{
transform:translateY(-1px) !important;
box-shadow:0 6px 0 #075CB7,0 18px 32px rgba(14,116,184,.22) !important;
}
.ws-auth-overlay .ws-divider{
color:#7F92A5 !important;
font-size:.7rem !important;
font-weight:850 !important;
letter-spacing:.03em !important;
text-transform:none !important;
}
.ws-auth-overlay .ws-divider::before,
.ws-auth-overlay .ws-divider::after{
background:#DCE8F3 !important;
}
.ws-auth-overlay .ws-google-btn{
min-height:46px !important;
border:1.5px solid #D8E7F4 !important;
border-radius:14px !important;
background:#FFFFFF !important;
color:#173B5C !important;
font-size:.78rem !important;
font-weight:900 !important;
letter-spacing:0 !important;
text-transform:none !important;
box-shadow:0 8px 18px rgba(15,35,66,.055) !important;
}
.ws-auth-overlay .ws-google-btn:hover{
background:#F8FBFF !important;
box-shadow:0 10px 22px rgba(14,116,184,.11) !important;
}
.ws-auth-overlay .ws-auth-switch{
margin-top:16px !important;
color:#536B84 !important;
font-size:.8rem !important;
font-weight:800 !important;
}
.ws-auth-overlay .ws-auth-switch button{
color:#0B74B8 !important;
letter-spacing:0 !important;
text-transform:none !important;
}
.ws-auth-overlay .ws-auth-footer{
margin-top:18px !important;
padding-top:14px !important;
border-top:1px solid #E5EEF8 !important;
color:#7F92A5 !important;
font-size:.66rem !important;
line-height:1.45 !important;
}
.ws-auth-overlay .ws-link-btn{
color:#0B74B8 !important;
text-decoration:underline !important;
}
.ws-auth-overlay .ws-trial-note{
background:linear-gradient(135deg,#ECFDF5,#D1FAE5) !important;
border:1px solid #A7F3D0 !important;
color:#047857 !important;
}
.ws-auth-overlay .ws-consent{
border-color:#D8E7F4 !important;
background:#F8FBFF !important;
color:#536B84 !important;
}
.ws-auth-overlay .ws-consent input{
accent-color:#0EA5E9 !important;
}
}
.device-optimized-note{
display:none !important;
align-items:center;
justify-content:center;
margin:var(--layout-device-note-margin);
padding:var(--layout-device-note-padding);
border:var(--layout-device-note-border);
border-radius:var(--layout-device-note-radius);
background:var(--layout-device-note-bg);
color:var(--layout-device-note-color);
box-shadow:var(--layout-device-note-shadow);
font-size:var(--layout-device-note-font-size);
font-weight:var(--layout-device-note-font-weight);
line-height:var(--layout-device-note-line-height);
text-align:center;
text-wrap:balance;
}
.device-optimized-note--splash{
position:fixed;
left:12px;
right:12px;
bottom:calc(12px + env(safe-area-inset-bottom));
z-index:4;
margin:0 auto;
max-width:min(520px,calc(100vw - 24px));
}
.device-optimized-note--app{
flex:0 0 auto;
width:100%;
}
@media (max-width:767px){
body:has(#main .home-dashboard) .device-optimized-note--app{
display:none !important;
}
}
/* ── Trial countdown banner ──────────────────────────────────────────────── */
/* ── Trial banner (compact, app-blended) ─────────────────────────────────── */
.trial-banner{display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:0.78rem;font-weight:600;border-bottom:1.5px solid transparent;flex-shrink:0}
.trial-banner--info{background:rgba(14,165,233,0.1);border-bottom-color:rgba(14,165,233,0.25);color:#0C4A6E}
.trial-banner--warn{background:rgba(245,158,11,0.1);border-bottom-color:rgba(245,158,11,0.3);color:#92400E}
.trial-banner--urgent{background:rgba(239,68,68,0.1);border-bottom-color:rgba(239,68,68,0.3);color:#991B1B;animation:urgentPulse 2s ease-in-out infinite}
@keyframes urgentPulse{0%,100%{background:rgba(239,68,68,0.1)}50%{background:rgba(239,68,68,0.18)}}
.tb-ico{font-size:1rem;flex-shrink:0;line-height:1}
.tb-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:0.78rem}
.tb-dots{display:flex;gap:4px;align-items:center;flex-shrink:0}
.tb-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.tb-dot--on{background:currentColor;opacity:0.9}
.tb-dot--off{background:currentColor;opacity:0.25}
.tb-btn{background:var(--sky);color:#fff;border:none;border-radius:20px;padding:4px 12px;font-size:0.72rem;font-weight:700;cursor:pointer;flex-shrink:0;white-space:nowrap}
.nav-trial-banner{
display:inline-flex;
align-items:center;
gap:8px;
border:1px solid transparent;
border-radius:999px;
padding:7px 12px;
font:inherit;
font-size:0.72rem;
font-weight:800;
cursor:pointer;
white-space:nowrap;
max-width:250px;
transition:transform 0.13s ease,opacity 0.13s ease,box-shadow 0.13s ease,background 0.13s ease;
box-shadow:0 1px 0 rgba(255,255,255,0.08) inset;
}
.nav-trial-banner:hover{transform:translateY(-1px);opacity:1}
.nav-trial-banner .tb-ico{font-size:0.95rem}
.nav-trial-banner .tb-label{min-width:0;max-width:140px;font-size:0.72rem;color:inherit}
.nav-trial-banner .tb-dots{gap:3px}
.nav-trial-banner .tb-dot{width:7px;height:7px}
.nav-trial-banner.trial-banner--info{
background:linear-gradient(135deg,#0EA5E9,#0284C7);
border-color:#7DD3FC;
color:#F0F9FF;
}
.nav-trial-banner.trial-banner--warn{
background:linear-gradient(135deg,#F59E0B,#D97706);
border-color:#FDE68A;
color:#FFF7ED;
}
.nav-trial-banner.trial-banner--urgent{
background:linear-gradient(135deg,#EF4444,#DC2626);
border-color:#FCA5A5;
color:#FEF2F2;
animation:urgentPulse 2s ease-in-out infinite;
}
#nav-trial-slot{display:flex;align-items:center;min-width:0;flex-shrink:0}
@media(max-width:767px){
body.route-home-nav #nav-trial-slot{
display:none !important;
}
}
/* ── Subscription tab (gamified) ─────────────────────────────────────────── */
/* Pro hero card */
.sub-hero-card{background:linear-gradient(135deg,#0f766e 0%,#155e75 48%,#1d4ed8 100%);border-radius:18px;padding:var(--layout-membership-hero-padding);text-align:center;color:#fff;margin-bottom:var(--layout-membership-hero-margin);position:relative;overflow:visible;display:flex;flex-direction:column;box-shadow:0 10px 28px rgba(14,116,144,0.18)}
.sub-hero-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(255,255,255,0.15),transparent 60%);pointer-events:none}
.sub-hero-sparkles{display:flex;align-items:center;justify-content:center;margin-bottom:6px;animation:sparkle 2.5s ease-in-out infinite}
.sub-hero-crown-icon{display:block;width:var(--layout-membership-crown-icon-size);height:var(--layout-membership-crown-icon-size);object-fit:contain;filter:drop-shadow(0 8px 12px rgba(15,23,42,0.18));transform:scale(var(--layout-membership-crown-icon-art-scale));transform-origin:center}
@keyframes sparkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.8;transform:scale(1.06)}}
.sub-hero-title{font-size:1.35rem;font-weight:900;letter-spacing:-0.5px;margin-bottom:4px}
.sub-hero-sub{font-size:0.8rem;opacity:0.85;margin-bottom:10px}
.sub-hero-badge{display:inline-block;background:rgba(255,255,255,0.2);border:1.5px solid rgba(255,255,255,0.5);border-radius:20px;padding:3px 14px;font-size:0.7rem;font-weight:800;letter-spacing:1px;margin-bottom:16px}
.sub-hero-perks{text-align:left;border-top:1px solid rgba(255,255,255,0.2);padding-top:12px;padding-bottom:4px;display:flex;flex-direction:column;align-items:stretch;flex:0 0 auto}
.sub-perk-row{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:0.82rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.1);min-height:calc(var(--layout-membership-perk-icon-size) + 4px);flex:0 0 auto}
.sub-perk-row:last-child{border-bottom:none}
.sub-perk-ico{font-size:1rem;width:var(--layout-membership-perk-icon-size);height:var(--layout-membership-perk-icon-size);text-align:center;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sub-generated-icon{display:block;width:100%;height:100%;object-fit:contain;transform:scale(var(--layout-membership-perk-icon-art-scale));transform-origin:center}
.sub-perk-txt{flex:1}
.sub-perk-check{color:rgba(255,255,255,0.9);font-weight:900;font-size:0.9rem}
/* Pro detail card */
.sub-detail-card{background:linear-gradient(135deg,#F8FBFF,#EEF6FF);border:1.5px solid var(--sky-md);border-radius:var(--layout-membership-card-radius-small);padding:var(--layout-membership-detail-padding);margin-bottom:var(--layout-membership-gap)}
.sub-detail-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f1f5f9;font-size:0.82rem}
.sub-detail-row:last-child{border-bottom:none}
.sub-detail-lbl{color:var(--muted);font-weight:500}
.sub-detail-val{font-weight:700;color:#1e293b;text-align:right}
/* Trial card */
.sub-trial-card{border-radius:var(--layout-membership-card-radius);padding:var(--layout-membership-trial-padding);text-align:center;color:#fff;margin-bottom:var(--layout-membership-gap)}
.sub-trial-card--active{background:linear-gradient(135deg,#0f766e 0%,#155e75 48%,#1d4ed8 100%)}
.sub-trial-card--warn{background:linear-gradient(135deg,#0f766e 0%,#1d4ed8 100%)}
.sub-trial-card--urgent{background:linear-gradient(135deg,#0f766e 0%,#2563eb 100%);animation:urgentPulse 1.8s ease-in-out infinite}
.sub-trial-card--expired{background:linear-gradient(135deg,#155e75,#1d4ed8)}
.sub-trial-ico{font-size:2.2rem;margin-bottom:6px;display:flex;align-items:center;justify-content:center}
.sub-trial-img{display:block;width:var(--layout-membership-crown-icon-size);height:var(--layout-membership-crown-icon-size);object-fit:contain;filter:drop-shadow(0 8px 12px rgba(15,23,42,0.16));transform:scale(var(--layout-membership-crown-icon-art-scale));transform-origin:center}
.sub-trial-title{font-size:1.1rem;font-weight:800;margin-bottom:4px}
.sub-trial-msg{font-size:0.8rem;opacity:0.9;margin-bottom:14px;line-height:1.4}
.sub-trial-track{height:8px;background:rgba(255,255,255,0.25);border-radius:6px;overflow:hidden;margin-bottom:8px}
.sub-trial-fill{height:100%;background:#fff;border-radius:6px;transition:width 0.4s ease}
.sub-trial-pips{display:flex;justify-content:center;gap:8px;margin-bottom:14px}
.sub-trial-pip{font-size:0.68rem;font-weight:700;padding:3px 10px;border-radius:20px}
.sub-trial-locked{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.26);border-radius:14px;padding:var(--layout-membership-gap);text-align:left;margin-top:var(--layout-membership-gap-tight);backdrop-filter:blur(8px)}
.sub-trial-locked-lbl{font-size:0.73rem;font-weight:800;opacity:0.96;margin-bottom:9px;text-transform:uppercase;letter-spacing:0.6px}
.sub-locked-row{display:flex;align-items:center;gap:11px;font-size:0.79rem;padding:5px 0;opacity:0.98;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.12);min-height:calc(var(--layout-membership-locked-icon-size) + 4px)}
.sub-locked-row:last-child{border-bottom:none}
.sub-locked-ico{width:var(--layout-membership-locked-icon-size);height:var(--layout-membership-locked-icon-size);text-align:center;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sub-locked-txt{flex:1}
.sub-locked-badge{font-size:0.62rem;font-weight:800;letter-spacing:0.7px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,0.22);border:1px solid rgba(255,255,255,0.38);color:#fff;flex-shrink:0}
/* Cancel / manage box */
.sub-cancel-box{background:linear-gradient(135deg,#F8FBFF,#EEF6FF);border:1.5px solid var(--sky-md);border-radius:var(--layout-membership-card-radius-small);padding:var(--layout-membership-cancel-padding);margin-bottom:10px}
.sub-cancel-ttl{font-size:0.85rem;font-weight:700;color:#64748b;margin-bottom:6px}
.sub-cancel-body{font-size:0.78rem;color:#475569;line-height:1.5}
.sub-cancel-body p{margin:0 0 4px}
.sub-manage-btn{width:100%;border:none;border-radius:20px;padding:var(--layout-membership-button-padding);font-size:0.82rem;font-weight:700;cursor:pointer;background:linear-gradient(135deg,#0f766e,#1d4ed8);color:#fff;margin-top:var(--layout-membership-gap-tight)}
/* Plan section */
.sub-section-hdr{font-size:0.85rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px;text-align:center}
.sub-plans{display:grid;grid-template-columns:1fr 1fr;gap:var(--layout-membership-plan-gap);margin-bottom:6px}
.sub-plan{border-radius:14px;padding:var(--layout-membership-plan-padding);text-align:center;border:2px solid transparent;position:relative;padding-top:calc(var(--layout-membership-plan-top-padding) + 14px)}
.sub-plan--year{border-color:var(--sky);background:linear-gradient(160deg,#ecfeff,#dbeafe)}
.sub-plan--month{border-color:var(--sky-md);background:linear-gradient(160deg,#F8FBFF,#EEF6FF)}
.sub-plan-badge{position:absolute;top:7px;right:9px;left:auto;transform:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;line-height:1;background:linear-gradient(135deg,#0f766e,#1d4ed8);color:#fff;font-size:0.6rem;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap}
.sub-plan-badge .sub-inline-icon{width:1.15em;height:1.15em;vertical-align:0}
.sub-plan-name{font-size:0.82rem;font-weight:800;color:#1e293b;margin-bottom:4px}
.sub-plan-price{font-size:1.6rem;font-weight:900;color:#1e293b;line-height:1.1}
.sub-plan-price span{font-size:0.72rem;font-weight:500;color:var(--muted)}
.sub-plan-hint{font-size:0.65rem;color:var(--muted2);margin:4px 0 8px}
.sub-plan-feats{list-style:none;padding:0;margin:0 0 10px;text-align:left;font-size:0.72rem;color:#475569;font-weight:600;line-height:1.9}
.sub-plan-btn{width:100%;border:none;border-radius:20px;padding:var(--layout-membership-plan-button-padding);font-size:0.78rem;font-weight:700;cursor:pointer}
.sub-secure-note{text-align:center;font-size:0.72rem;color:var(--muted2);margin-top:var(--layout-membership-gap-tight)}
.sub-plan-btn--primary{background:linear-gradient(135deg,#0f766e,#1d4ed8);color:#fff}
.sub-plan-btn--secondary{background:#e2e8f0;color:#1e293b}
/* ── Paywall ──────────────────────────────────────────────────────────────── */
.paywall-wrap{padding:var(--layout-paywall-padding);text-align:center;max-width:var(--layout-paywall-max-width);margin:0 auto}
.paywall-ico{font-size:3.5rem;margin-bottom:12px}
.paywall-ttl{font-size:1.35rem;font-weight:800;color:var(--sky-dk);margin-bottom:8px;letter-spacing:-0.3px}
.paywall-sub{font-size:0.88rem;color:var(--muted);line-height:1.6;margin-bottom:24px}
.paywall-plans{display:grid;grid-template-columns:1fr 1fr;gap:var(--layout-paywall-plan-gap);margin-bottom:16px}
.paywall-plan{border-radius:var(--layout-paywall-plan-radius);padding:var(--layout-paywall-plan-padding);text-align:center;position:relative;border:2px solid var(--border2)}
.paywall-plan--year{border-color:var(--sky);background:linear-gradient(145deg,#F0F9FF,#DBEAFE)}
.paywall-plan--month{background:#F9FAFB}
.paywall-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--sky);color:#fff;font-size:0.6rem;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap;letter-spacing:0.5px}
.paywall-plan-name{font-size:0.8rem;font-weight:700;color:var(--muted);margin-bottom:6px;margin-top:6px}
.paywall-plan-price{font-size:1.9rem;font-weight:800;color:var(--sky-dk);line-height:1}
.paywall-plan-price span{font-size:0.8rem;font-weight:500;color:var(--muted)}
.paywall-plan-hint{font-size:0.68rem;color:var(--muted);margin:4px 0 14px}
.paywall-btn{width:100%;padding:var(--layout-paywall-button-padding);border:none;border-radius:var(--layout-paywall-button-radius);font-size:0.88rem;font-weight:700;cursor:pointer;font-family:inherit;transition:transform 0.13s}
.paywall-btn--primary{background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;box-shadow:0 4px 14px rgba(14,165,233,0.35)}
.paywall-btn--secondary{background:var(--border2);color:var(--text)}
.paywall-btn:hover{transform:translateY(-1px)}
.paywall-lock{font-size:0.72rem;color:var(--muted2)}
.ws-google-btn{background:rgba(255,255,255,.7);color:#475569;border:1px solid #D7DEE8}
.ws-google-full{width:100%;padding:8px 12px;border-radius:14px;font-size:.72rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .13s;font-family:inherit}
.ws-google-full:hover{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,0.08)}
.ws-google-btn:hover{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,0.08)}
.ws-google-panel-btn{width:100%;min-height:36px;padding:8px 12px;border-radius:14px;font-size:.72rem;font-weight:850;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .13s;font-family:inherit;margin:0 0 8px}
.ws-google-panel-btn svg{width:18px;height:18px;flex:0 0 18px}
.ws-google-panel-btn span{min-width:0}
.ws-divider{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--muted2);font-size:0.72rem;font-weight:600}
.ws-divider::before,.ws-divider::after{content:'';flex:1;height:1px;background:var(--border2)}
.ws-divider--compact{margin:6px 0 8px;font-size:.66rem}
/* ── STATS EMPTY STATE ── */
.stats-empty-state{text-align:center;padding:40px 20px}
.ses-icon{font-size:3rem;margin-bottom:12px}
.ses-title{font-size:1.2rem;font-weight:800;color:var(--sky-dk);margin-bottom:8px}
.ses-text{font-size:0.88rem;color:var(--muted);line-height:1.6;max-width:280px;margin:0 auto}
/* ── NPS PROMPT ── */
.nps-wrap{background:linear-gradient(135deg,var(--sky-lt),var(--mint-lt));border:1.5px solid var(--border2);border-radius:var(--r);padding:18px;text-align:center;margin-bottom:14px}
.nps-title{font-size:1rem;font-weight:800;color:var(--sky-dk);margin-bottom:4px}
.nps-sub{font-size:0.8rem;color:var(--muted);margin-bottom:13px}
.nps-row{display:flex;gap:8px;justify-content:center}
.nps-btn{flex:1;max-width:110px;padding:10px 6px;border:1.5px solid var(--border2);border-radius:var(--r-sm);background:#fff;font-size:1.3rem;cursor:pointer;transition:all 0.13s;display:flex;flex-direction:column;align-items:center;gap:3px}
.nps-btn span{font-size:0.65rem;font-weight:700;color:var(--muted)}
.nps-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.nps-btn.sel{border-color:var(--sky);background:var(--sky-lt)}
#start-anim{position:fixed;inset:0;z-index:99999;background:linear-gradient(135deg,rgba(15,23,42,0.94) 0%,rgba(30,64,175,0.92) 55%,rgba(14,165,233,0.9) 100%);display:flex;align-items:center;justify-content:center;pointer-events:all;padding:24px}
#start-anim.fading{animation:startFade 0.4s ease forwards}
#start-anim.gone{display:none}
.start-loader-card{width:min(420px,92vw);background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);box-shadow:0 18px 44px rgba(15,23,42,0.28);backdrop-filter:blur(12px);border-radius:24px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px}
.start-loader-kicker{font-size:.68rem;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:rgba(255,255,255,.72)}
.start-loader-title{font-size:1.7rem;line-height:1.1;font-weight:900;color:#fff;letter-spacing:-.03em}
.start-loader-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.18);margin-top:2px}
.start-loader-fill{height:100%;width:38%;border-radius:999px;background:linear-gradient(90deg,#FDE68A 0%,#F59E0B 35%,#38BDF8 100%);animation:appLoaderSweep 1.25s ease-in-out infinite}
.start-loader-note{font-size:.84rem;line-height:1.45;color:rgba(255,255,255,.82)}
@keyframes startFade{0%{opacity:1}100%{opacity:0;pointer-events:none}}
@keyframes appLoaderSweep{
0%{transform:translateX(-65%) scaleX(.9)}
50%{transform:translateX(90%) scaleX(1.08)}
100%{transform:translateX(215%) scaleX(.95)}
}
/* ── READY-GO OVERLAY ── */
.ready-go-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(30,90,200,0.95) 0%,rgba(50,200,150,0.95) 100%);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(2px)}
.ready-go-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.ready-go-text{position:absolute;font-size:clamp(60px,20vw,200px);font-weight:900;letter-spacing:8px;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,0.3);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;opacity:0;transform:scale(0.8);pointer-events:none;will-change:transform,opacity}
.ready-go-ready{animation:readyPop 0.72s cubic-bezier(0.34,1.56,0.64,1) forwards}
.ready-go-go{animation:goPop 0.46s cubic-bezier(0.34,1.56,0.64,1) 1s forwards}
@keyframes readyPop{0%{opacity:0;transform:scale(0.5)}50%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@keyframes goPop{0%{opacity:0;transform:scale(0.5)}50%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@media(max-width:480px){.ready-go-text{font-size:clamp(40px,18vw,120px);letter-spacing:4px}}
/* ── NAV ── REVAMPED */
#nav{
display:flex !important;
background:linear-gradient(135deg,var(--tone-nav-start) 0%,var(--tone-nav-mid) 54%,var(--tone-nav-end) 100%);
border-radius:0;
padding:var(--layout-nav-padding);
box-shadow:0 12px 34px rgba(15,36,63,0.24);
border:none;
border-bottom:1px solid var(--tone-nav-border);
backdrop-filter:blur(14px) saturate(1.12);
-webkit-backdrop-filter:blur(14px) saturate(1.12);
align-items:center;
justify-content:space-between;
gap:var(--layout-nav-gap);
position:relative;
z-index:10020;
isolation:isolate;
overflow:visible !important;
margin:0;
}
#nav::before{
content:none;
}
#nav.show{display:flex !important}
.nav-left{
display:flex;
align-items:center;
gap:var(--layout-nav-gap);
z-index:2;
flex:1;
min-width:0;
flex-wrap:wrap;
}
.nav-logo{
font-size:1.1rem;
font-weight:800;
color:#F8FBFF;
letter-spacing:-0.5px;
display:flex;
align-items:center;
gap:var(--layout-nav-gap-compact);
white-space:nowrap;
min-width:var(--layout-nav-logo-min-width);
flex:0 1 auto;
}
.nav-logo-text{
display:block;
flex:0 0 auto;
min-width:0;
overflow:visible;
text-overflow:clip;
line-height:1;
white-space:nowrap;
}
.nav-logo::before{
content:'';
width:var(--layout-nav-logo-icon-size);
height:var(--layout-nav-logo-icon-size);
flex:0 0 var(--layout-nav-logo-icon-size);
display:inline-block;
margin-right:2px;
background:url('assets/icons/app/leadio-favicon-192.png') center/84% no-repeat;
filter:drop-shadow(0 6px 14px rgba(255,184,61,0.4));
}
.nav-title{
font-size:1.02rem;
font-weight:800;
color:#F8FBFF;
letter-spacing:-0.3px;
display:none;
}
.nav-btn{
font-size:0.82rem;
font-weight:600;
color:#F8FBFF;
background:linear-gradient(180deg,rgba(255,255,255,0.18),rgba(255,255,255,0.08));
border:1.5px solid rgba(219,234,254,0.30);
border-radius:50px;
padding:var(--layout-nav-button-padding);
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
transition:all 0.2s ease;
white-space:normal;
z-index:2;
min-height:var(--layout-nav-button-min-height);
flex:0 0 auto;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 18px rgba(8,20,38,0.18);
}
.nav-btn-ico{
width:var(--layout-nav-button-icon-size);
height:var(--layout-nav-button-icon-size);
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 var(--layout-nav-button-icon-size);
font-size:0.98rem;
line-height:1;
}
.nav-btn-ico img{
width:100%;
height:100%;
display:block;
object-fit:contain;
}
.nav-btn-text{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:0;
overflow:visible;
text-overflow:clip;
white-space:normal;
text-align:center;
line-height:1;
}
.nav-btn:hover{
background:linear-gradient(180deg,rgba(255,255,255,0.28),rgba(255,255,255,0.13));
color:#FFFFFF;
border-color:rgba(219,234,254,0.48);
}
.nav-btn.active{
background:linear-gradient(135deg,rgba(255,255,255,0.30),rgba(219,234,254,0.15));
color:#FFFFFF;
border-color:rgba(255,255,255,0.52);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.32), 0 10px 22px rgba(8,20,38,0.20);
}
.nav-right{
display:flex;
align-items:center;
gap:12px;
position:relative;
z-index:10021;
margin-left:auto;
flex:0 0 auto;
}
.icon-btn{
width:40px;
height:40px;
border-radius:50%;
background:rgba(255,255,255,0.16);
border:1.5px solid rgba(219,234,254,0.30);
color:#F8FBFF;
font-size:1.2rem;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.2s ease;
}
.icon-btn:hover{
background:rgba(255,255,255,0.26);
border-color:rgba(219,234,254,0.48);
transform:scale(1.08);
}
/* ── PROFILE SECTION ── */
.nav-profile-wrapper{
position:relative;
z-index:10022;
flex-shrink:0;
}
.nav-profile{
display:flex;
align-items:center;
gap:10px;
padding:8px 12px 8px 8px;
background:linear-gradient(180deg,rgba(255,255,255,0.20),rgba(255,255,255,0.09));
border:1.5px solid rgba(219,234,254,0.34);
border-radius:50px;
cursor:pointer;
transition:background 0.12s ease,border-color 0.12s ease;
white-space:nowrap;
min-height:46px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.24), 0 8px 18px rgba(8,20,38,0.18);
}
.nav-profile:hover{
background:linear-gradient(180deg,rgba(255,255,255,0.30),rgba(255,255,255,0.14));
border-color:rgba(219,234,254,0.50);
transform:none;
}
.nav-av{
width:38px;
height:38px;
border-radius:50%;
overflow:hidden;
background:rgba(255,255,255,0.18);
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border:2px solid rgba(219,234,254,0.38);
}
.nav-av svg,.nav-av img{width:100%;height:100%;display:block;object-fit:cover;}
.nav-profile-info{
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
justify-content:center;
}
.nav-name{
font-size:0.88rem;
font-weight:600;
color:#FFFFFF;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100%;
}
.nav-role{
font-size:0.7rem;
font-weight:500;
color:#D7E7FF;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100%;
}
.nav-dropdown-icon{
width:16px;
height:16px;
display:flex;
align-items:center;
justify-content:center;
color:rgba(255,255,255,0.7);
font-size:0.9rem;
margin-left:4px;
}
/* ── PROFILE DROPDOWN MENU ── */
.profile-dropdown{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
background:linear-gradient(180deg,#39547F,#31496F);
border-radius:8px;
min-width:160px !important;
box-shadow:0 14px 32px rgba(20,34,58,0.24);
z-index:10023 !important;
overflow:hidden !important;
display:none !important;
flex-direction:column;
opacity:0;
transform:none;
transform-origin:top right !important;
transition:none;
pointer-events:none !important;
width:auto !important;
flex-grow:0 !important;
flex-shrink:0 !important;
flex-basis:auto !important;
}
.profile-dropdown.show{
display:flex !important;
flex-direction:column;
opacity:1;
transform:none;
pointer-events:auto !important;
}
.dropdown-item{
width:100% !important;
padding:10px 14px;
background:none;
border:none;
color:#fff;
font-size:0.85rem;
font-weight:500;
text-align:left;
cursor:pointer;
transition:background 0.12s ease,color 0.12s ease;
border-bottom:1px solid rgba(255,255,255,0.1);
white-space:nowrap;
display:flex !important;
align-items:center;
gap:8px;
margin:0;
}
.dropdown-icon{
width:22px;
height:22px;
display:block;
object-fit:contain;
flex:0 0 22px;
}
.dropdown-item:last-child{
border-bottom:none;
}
.dropdown-item:hover{
background:rgba(255,255,255,0.12);
padding-left:14px;
}
.dropdown-item.logout{
color:#FF6B9D;
background:rgba(255,107,157,0.1);
border-top:1px solid rgba(255,107,157,0.2);
}
.dropdown-item.logout:hover{
background:rgba(255,107,157,0.2);
}
/* ── SOUND BUTTON ── */
.sound-btn{
width:44px;
height:44px;
background:linear-gradient(180deg,rgba(255,255,255,0.14),rgba(255,255,255,0.08));
border:1.5px solid rgba(255,255,255,0.24);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all 0.2s ease;
flex-shrink:0;
color:#fff;
font-size:1.2rem;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 16px rgba(20,34,58,0.10);
}
.sound-btn:hover{
background:linear-gradient(180deg,rgba(255,255,255,0.19),rgba(255,255,255,0.11));
border-color:rgba(255,255,255,0.34);
transform:scale(1.05);
}
.sound-icon{
display:inline-block;
transition:opacity 0.2s;
}
.sound-btn.muted .sound-icon{
opacity:0.5;
}
/* ── TEXT-TO-SPEECH BUTTON ── */
.tts-btn{
width:44px;
height:44px;
background:linear-gradient(180deg,rgba(255,255,255,0.14),rgba(255,255,255,0.08));
border:1.5px solid rgba(255,255,255,0.24);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all 0.2s ease;
flex-shrink:0;
color:#fff;
font-size:1.2rem;
padding:0;
font-family:inherit;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 16px rgba(20,34,58,0.10);
}
.tts-btn:hover{
background:linear-gradient(180deg,rgba(255,255,255,0.19),rgba(255,255,255,0.11));
border-color:rgba(255,255,255,0.34);
transform:scale(1.05);
}
.tts-btn.tts-playing{
background:rgba(255,200,0,0.25);
border-color:rgba(255,200,0,0.5);
animation:pulse-tts 0.6s infinite;
}
@keyframes pulse-tts{
0%, 100%{transform:scale(1);}
50%{transform:scale(1.08);}
}
/* ── EMBEDDED TTS BUTTON IN QUESTION CARD ── */
.sc-tts-btn{
position:absolute;
top:20px;
right:20px;
width:48px;
height:48px;
background:rgba(255,255,255,0.15);
border:2px solid rgba(255,255,255,0.3);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all 0.2s ease;
color:#fff;
font-size:1.4rem;
padding:0;
font-family:inherit;
z-index:10;
}
.sc-tts-btn:hover{
background:rgba(255,255,255,0.25);
border-color:rgba(255,255,255,0.45);
transform:scale(1.08);
}
.sc-tts-btn.sc-tts-playing{
background:rgba(255,200,0,0.3);
border-color:rgba(255,200,0,0.6);
animation:pulse-tts 0.6s infinite;
}
.sc-top{
position:relative;
}
/* ── GAMIFIED QUESTION BOX (Scenario & Challenge play) ── */
.sc-q-glass,
.ch-q-glass{
background:#FFFFFF;
border:1.5px solid #D6EAFB;
border-radius:16px;
padding:10px 12px;
margin-top:6px;
box-shadow:
0 10px 24px rgba(15,23,42,0.08),
0 2px 8px rgba(14,165,233,0.08);
position:relative;
animation:qCardIn 0.32s cubic-bezier(.3,1.4,.5,1) both;
}
@keyframes qCardIn{
0%{transform:scale(0.97) translateY(4px);opacity:0}
100%{transform:scale(1) translateY(0);opacity:1}
}
/* Bolder text inside for readability */
.sc-q-glass .sc-name{font-weight:900;font-size:1.3rem;text-align:left;color:#0F172A}
.sc-q-glass .sc-body{font-weight:600;color:#334155;text-align:left;font-size:1.1rem}
.ch-q-glass .ch-q-title{font-weight:900;text-align:left;color:#0F172A;font-size:1.3rem}
.ch-q-glass .ch-q-body{font-weight:600;color:#334155;text-align:left;font-size:1.1rem}
/* ── HUD ── ENHANCED */
#hud{
display:none;
background:var(--card);
border-radius:var(--r);
padding:var(--layout-hud-padding);
box-shadow:0 6px 20px rgba(14,165,233,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
border:1px solid var(--border);
align-items:center;
flex-wrap:nowrap;
gap:var(--layout-hud-gap);
justify-content:space-between;
margin-bottom:0;
padding:var(--layout-hud-padding);
}
#hud.show{display:flex}
body.route-story-play #hud,
body.route-story-play #hud.show{
display:none !important;
}
.hs{
display:flex;
align-items:center;
gap:var(--layout-hud-chip-gap);
padding:var(--layout-hud-chip-padding);
border-radius:50px;
font-weight:700;
font-size:0.82rem;
transition:all 0.15s;
flex-shrink:0;
cursor:pointer;
position:relative;
overflow:visible;
}
.hs img{display:block;align-self:center;flex-shrink:0}
.hs-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;line-height:1}
.hs-info>span:not(.hs-lbl){line-height:1.1}
.hs-lbl{font-size:0.54rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:0.68;white-space:nowrap;line-height:1.1;margin-top:1px}
.hs:active{transform:scale(0.95)}
.hs:hover{transform:translateY(-1px)}
.hs.co{
background:linear-gradient(135deg,var(--amber-lt),#FCD34D);
color:#92400E;
border:1.5px solid var(--amber-md);
box-shadow:0 2px 8px rgba(245,158,11,0.15);
}
.hs.cu{
background:linear-gradient(135deg,var(--sky-lt),#BAE6FD);
color:var(--sky3);
border:1.5px solid var(--sky-md);
box-shadow:0 2px 8px rgba(14,165,233,0.15);
}
.hs.ha{
background:linear-gradient(135deg,var(--purple-lt),#DDD6FE);
color:#5B21B6;
border:1.5px solid #DDD6FE;
box-shadow:0 2px 8px rgba(139,92,246,0.15);
}
.hs.bp{
background:linear-gradient(135deg,#FFF3CD,#FFE8A8);
color:#B8860B;
border:1.5px solid #FFE8A8;
box-shadow:0 2px 8px rgba(184,134,11,0.15);
}
.hs.pr{
background:linear-gradient(135deg,var(--mint-lt),#6EE7B7);
color:#065F46;
border:1.5px solid var(--mint-md);
font-size:0.76rem;
box-shadow:0 2px 8px rgba(16,185,129,0.15);
}
.hud-icon{width:var(--layout-hud-icon-size);height:var(--layout-hud-icon-size);display:inline-block;object-fit:contain;vertical-align:middle}
.hud-pos{
font-size:0.76rem;
font-weight:700;
background:linear-gradient(135deg,var(--sky),var(--sky2));
color:#fff;
padding:8px 14px;
border-radius:50px;
display:flex;
align-items:center;
gap:7px;
max-width:200px;
overflow:hidden;
box-shadow:0 2px 12px rgba(14,165,233,0.2);
margin-left:auto;
}
.hud-av-ring{
width:36px;
height:36px;
border-radius:50%;
overflow:hidden;
background:rgba(255,255,255,0.28);
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
}
.hud-av-ring svg,.hud-av-ring img{width:100%;height:100%;display:block;object-fit:cover;}
.f-up{animation:fUp 0.45s ease}
.f-dn{animation:fDn 0.45s ease}
.f-pop{animation:fPop 0.52s cubic-bezier(.25,1.4,.45,1)}
@keyframes fUp{0%,100%{background:inherit}50%{background:#D1FAE5}}
@keyframes fDn{0%,100%{background:inherit}50%{background:#FEE2E2}}
@keyframes fPop{
0%{transform:translateY(0) scale(1)}
35%{transform:translateY(-3px) scale(1.06)}
100%{transform:translateY(0) scale(1)}
}
.hs-pop{
position:absolute;
top:-12px;
right:6px;
min-width:24px;
padding:3px 7px;
border-radius:999px;
background:linear-gradient(135deg,#22C55E,#16A34A);
color:#fff;
font-size:0.72rem;
font-weight:900;
line-height:1;
box-shadow:0 8px 16px rgba(22,163,74,0.24);
pointer-events:none;
animation:hsPopRise 0.9s ease forwards;
}
@keyframes hsPopRise{
0%{opacity:0;transform:translateY(6px) scale(0.85)}
20%{opacity:1;transform:translateY(0) scale(1)}
100%{opacity:0;transform:translateY(-18px) scale(1.02)}
}
/* ── GENERIC CARD ── ENHANCED */
.card{
background:var(--card);
border-radius:var(--r);
padding:20px 18px 16px;
box-shadow:0 6px 24px rgba(14,165,233,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
border:1px solid var(--border);
transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
position:relative;
overflow:hidden;
}
.card::after{
content:'';
position:absolute;
top:-50px;
right:-50px;
width:130px;
height:130px;
border-radius:50%;
background:radial-gradient(circle,rgba(14,165,233,0.08),transparent 70%);
pointer-events:none;
}
.card:hover{
transform:translateY(-4px);
box-shadow:0 12px 36px rgba(14,165,233,0.15), 0 0 20px rgba(14,165,233,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
}
.screen{animation:slideUp 0.28s ease both;min-width:0;position:relative}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(0.65)}to{opacity:1;transform:scale(1)}}
@keyframes bounceIn{0%{transform:scale(0.4)}60%{transform:scale(1.18)}80%{transform:scale(0.94)}100%{transform:scale(1)}}
@keyframes spinIn{from{transform:rotate(-180deg) scale(0);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}
@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(780deg);opacity:0}}
@keyframes floatBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes celebrate{0%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.15) rotate(5deg)}100%{transform:scale(1) rotate(-5deg)}}
@keyframes achieve{0%{opacity:0;transform:scale(0.5) translateY(20px)}50%{transform:scale(1.08)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 0 rgba(14,165,233,0.7)}50%{box-shadow:0 0 0 10px rgba(14,165,233,0)}}
@keyframes progressFill{0%{width:0}100%{width:100%}}
/* ── SECTION OUTLINES ── */
.outline-primary{box-shadow:inset 0 0 0 2px var(--sky);border-radius:16px}
.profile-screen{
overflow-y:auto;
overflow-x:hidden;
max-height:var(--layout-profile-max-height);
scrollbar-width:thin;
}
.profile-screen--subscription{
padding-bottom:20px;
}
.profile-screen--help{
overflow:visible;
max-height:none;
min-height:var(--layout-profile-help-min-height);
height:fit-content;
padding-bottom:10px;
}
.profile-screen:hover{
transform:none;
box-shadow:inset 0 0 0 2px var(--sky), 0 6px 24px rgba(14,165,233,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}
.profile-screen--profile:hover,
.profile-screen--statistics:hover,
.profile-screen--subscription:hover{
transform:none;
box-shadow:inset 0 0 0 2px var(--sky), 0 6px 24px rgba(14,165,233,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}
.outline-challenge{box-shadow:inset 0 0 0 2px #F97316;border-radius:16px}
.outline-success{box-shadow:inset 0 0 0 2px var(--mint);border-radius:16px}
.outline-featured{box-shadow:inset 0 0 0 2px var(--amber);border-radius:16px}
.outline-danger{box-shadow:inset 0 0 0 2px var(--coral);border-radius:16px}
/* ── HERO BANNER ── ENHANCED */
.hero-wrap{
padding-right:var(--layout-home-hero-pad-right);
background:
radial-gradient(circle at 82% 22%,rgba(245,158,11,0.10),transparent 18%),
radial-gradient(circle at 92% 88%,rgba(59,130,246,0.08),transparent 13%),
linear-gradient(135deg,#FFFCF5 0%,#FFF7EA 42%,#F4FAFF 100%),
url('data:image/svg+xml,');
background-size:100%, 100%, 100%, 200px 200px;
background-position:0 0, 0 0, 0 0, 5px 10px;
border-radius:var(--r);
padding:var(--layout-home-hero-padding);
position:relative;
overflow:hidden;
min-height:var(--layout-home-hero-min-height);
border:2px solid rgba(227,219,198,0.92);
box-shadow:0 6px 0 rgba(231,223,208,0.95),0 18px 36px rgba(148,163,184,0.14);
}
.hero-wrap,.hero-mascot,.hero-chips,.mode-row,.info-cards-row,.mcard,.mcard-content,.mcard-text-block,.info-card,.panel,.sidebar,.prof-hero,.prof-hero-body,.prof-hero-left,.prof-hero-center,.prof-hero-right,.paywall-wrap,.paywall-plan,.ca-lobby-horiz,.ch-lobby-horiz,.ch-lobby-cards{min-width:0}
.hero-wrap::before{
content:'';
position:absolute;
right:-25px;
top:-25px;
width:100px;
height:100px;
border-radius:50%;
background:rgba(250,204,21,0.16);
z-index:2;
}
.hero-wrap::after{
content:'';
position:absolute;
right:25px;
bottom:-18px;
width:60px;
height:60px;
border-radius:50%;
background:rgba(14,165,233,0.10);
z-index:2;
}
.hero-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#FFF8E6,#FFFFFF);color:#7C4A03;border-radius:50px;padding:3px 10px;font-size:0.73rem;font-weight:800;margin-bottom:4px;border:1px solid #F6D68D;box-shadow:0 4px 12px rgba(245,158,11,0.08)}
.hero-badge img,.hero-badge svg{filter:drop-shadow(0 0 6px rgba(255,230,100,0.9)) drop-shadow(0 0 14px rgba(255,200,50,0.7));animation:heroIconGlow 2.2s ease-in-out infinite}
@keyframes heroIconGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,230,100,0.9)) drop-shadow(0 0 14px rgba(255,200,50,0.7))}50%{filter:drop-shadow(0 0 10px rgba(255,240,120,1)) drop-shadow(0 0 22px rgba(255,210,60,0.9))}}
.hero-title{font-size:2rem;font-weight:900;color:#183B60;line-height:1;margin-bottom:6px;letter-spacing:-0.5px}
.hero-sub{font-size:0.84rem;color:#5D7184;max-width:100%;line-height:1.5;margin-bottom:11px}
.hero-mascot{position:absolute;right:12px;bottom:var(--layout-home-hero-mascot-bottom);width:var(--layout-home-hero-mascot-width);height:var(--layout-home-hero-mascot-height);display:flex;align-items:flex-end;justify-content:center;animation:none;z-index:2}
.hero-mascot img{width:100%;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,0.22))}
.hero-mascot{pointer-events:none}
@media(max-width:540px){.hero-mascot{width:150px;height:84px;right:10px;bottom:8px}.hero-wrap{padding-right:160px}}
.hero-chips{display:flex;gap:var(--layout-home-chip-gap);flex-wrap:wrap}
.hchip{background:linear-gradient(180deg,#FFFFFF,#F6FBFF);backdrop-filter:blur(8px);color:#153956;border-radius:16px;padding:var(--layout-home-chip-padding);font-size:0.88rem;font-weight:800;display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;border:1.5px solid #D8E9F7;transition:all 0.2s ease;position:relative;box-shadow:0 8px 18px rgba(37,99,235,0.08)}
.hchip.hchip-met{background:rgba(52,211,153,0.25);border-color:rgba(52,211,153,0.7);box-shadow:0 0 12px rgba(52,211,153,0.35)}
.hchip-lbl{font-size:0.58rem;font-weight:700;color:#6C8398;text-transform:uppercase;letter-spacing:.4px;margin-top:1px}
.hero-chips .hchip:nth-child(1){background:linear-gradient(180deg,#FFFBEA,#FFFFFF);border-color:#FDE68A}
.hero-chips .hchip:nth-child(2){background:linear-gradient(180deg,#EEFDF7,#FFFFFF);border-color:#A7F3D0}
.hero-chips .hchip:nth-child(3){background:linear-gradient(180deg,#F6F0FF,#FFFFFF);border-color:#DDD6FE}
.hero-chips .hchip:nth-child(4){background:linear-gradient(180deg,#FFF3FB,#FFFFFF);border-color:#FBCFE8}
/* ── TYPE SCALE ── */
:root{--fs-h1:1.5rem;--fs-h2:1.1rem;--fs-body:0.875rem;--fs-sm:0.75rem;--fs-xs:0.68rem}
/* ── MODE CARDS ── CLEAN REBUILD */
.mode-row{display:grid;grid-template-columns:var(--layout-home-mode-columns);gap:var(--layout-home-mode-gap);max-width:100%;grid-auto-rows:var(--layout-home-mode-row-height)}
.home-save-note{font-size:0.62rem;color:var(--muted2);text-align:center;padding:5px 0 0}
/* ── INFO CARDS ROW (How It Works + Learning Skills) ── */
.info-cards-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--layout-home-info-gap);margin:var(--layout-home-info-margin)}
.info-card{border-radius:var(--layout-home-dash-card-radius);padding:var(--layout-home-info-card-padding);position:relative;overflow:hidden;backdrop-filter:blur(8px);display:flex;flex-direction:column;justify-content:var(--layout-home-info-card-content-align)}
.info-card::before{content:'';position:absolute;top:4px;right:4px;width:42px;height:42px;opacity:0.10;pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:contain}
.info-card-hiw{background:var(--tone-home-card-surface-blue);border:var(--layout-home-dash-card-border-width) solid var(--tone-info-blue-border);box-shadow:0 4px 0 var(--tone-info-blue-shadow),0 8px 20px rgba(37,99,235,0.10),inset 0 1px 0 rgba(255,255,255,0.9)}
.info-card-hiw::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232563EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='10' width='32' height='44' rx='8'/%3E%3Cpath d='M24 22h16M24 32h16M24 42h10'/%3E%3Cpath d='M20 22l2 2 4-4M20 32l2 2 4-4'/%3E%3C/svg%3E")}
.info-card-skills{background:var(--tone-home-card-surface-purple);border:var(--layout-home-dash-card-border-width) solid var(--tone-info-purple-border);box-shadow:0 4px 0 var(--tone-info-purple-shadow),0 8px 20px rgba(124,58,237,0.10),inset 0 1px 0 rgba(255,255,255,0.9)}
.info-card-skills::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%237C3AED' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 46l12-12 8 8 14-18'/%3E%3Cpath d='M42 24h8v8'/%3E%3Ccircle cx='20' cy='46' r='4' fill='%237C3AED' fill-opacity='.12'/%3E%3Ccircle cx='28' cy='34' r='4' fill='%237C3AED' fill-opacity='.12'/%3E%3Ccircle cx='36' cy='42' r='4' fill='%237C3AED' fill-opacity='.12'/%3E%3C/svg%3E")}
.info-card-hdr{font-size:var(--layout-home-info-card-hdr-font-compact);font-weight:900;text-transform:uppercase;letter-spacing:var(--layout-home-dash-title-letter-spacing);margin-bottom:var(--layout-home-info-hdr-margin-bottom);display:inline-flex;align-items:center;align-self:flex-start;gap:var(--layout-home-dash-title-gap);line-height:1;padding:var(--layout-home-info-card-hdr-padding-compact);border-radius:999px;background:var(--tone-home-title-badge-bg);border:1px solid var(--tone-home-title-badge-border);color:var(--tone-home-title-badge-color);box-shadow:0 5px 14px rgba(37,99,235,0.06)}
.home-title-icon{display:block;width:var(--layout-home-dash-title-icon-size);height:var(--layout-home-dash-title-icon-size);object-fit:contain;flex:0 0 var(--layout-home-dash-title-icon-size);margin:-2px 0}
.info-card-hiw .info-card-hdr,.info-card-skills .info-card-hdr{color:var(--tone-home-title-badge-color);text-shadow:none}
.hiw-item{display:flex;align-items:center;gap:var(--layout-home-info-item-gap-compact);margin-bottom:var(--layout-home-info-item-margin-bottom-compact);padding:var(--layout-home-info-item-padding-compact);border-radius:calc(var(--layout-home-dash-row-radius) - 4px);background:rgba(255,255,255,0.54);border:1px solid rgba(214,232,245,0.5)}
.hiw-item:last-child{margin-bottom:0}
.hiw-badge{width:var(--layout-home-info-badge-size-compact);height:var(--layout-home-info-badge-size-compact);border-radius:var(--layout-home-info-badge-radius-compact);display:flex;align-items:center;justify-content:center;font-size:var(--layout-home-info-badge-font-compact);flex-shrink:0;margin-top:0;box-shadow:0 2px 6px rgba(0,0,0,0.18)}
.hiw-badge-blue{background:linear-gradient(135deg,#60A5FA,#3B82F6)}
.hiw-badge-green{background:linear-gradient(135deg,#34D399,#10B981)}
.hiw-badge-gold{background:linear-gradient(135deg,#FCD34D,#F59E0B)}
.hiw-badge-violet{background:linear-gradient(135deg,#C084FC,#A855F7)}
.hiw-badge-teal{background:linear-gradient(135deg,#2DD4BF,#0D9488)}
.hiw-badge-rose{background:linear-gradient(135deg,#FB7185,#F43F5E)}
.hiw-item-body{min-width:0}
.hiw-item-title{font-size:var(--layout-home-info-card-title-font-compact);font-weight:900;color:var(--tone-home-copy-title);line-height:var(--layout-home-info-title-line-height-compact);text-shadow:none}
.hiw-item-desc{font-size:var(--layout-home-info-card-desc-font-compact);color:var(--tone-home-copy-body);line-height:var(--layout-home-info-desc-line-height-compact);margin-top:2px}
.mcard-text-block{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;width:100%;flex:1 1 auto;min-height:0}
/* Coming Soon locked card */
.mcard.coming-soon{opacity:0.45;filter:grayscale(0.7)}
.cs-lock-icon{font-size:2.6rem;line-height:1;display:flex;align-items:center;justify-content:center;width:80px;height:85px;margin:2px 0;flex-shrink:0}
.cs-unlock-bar{width:85%;height:8px;background:rgba(255,255,255,0.25);border-radius:4px;overflow:hidden;margin:4px 0;border:1px solid rgba(255,255,255,0.3)}
.cs-unlock-fill{height:100%;background:linear-gradient(90deg,rgba(255,255,255,0.7),rgba(255,255,255,0.95));border-radius:4px;transition:width 0.8s ease}
.mcard{
position:relative;
border-radius:var(--r-sm);
padding:var(--layout-home-card-padding);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
cursor:pointer;
overflow:hidden;
border:3px solid rgba(255,255,255,0.88);
box-shadow:0 7px 0 rgba(15,23,42,0.22),0 14px 30px rgba(15,23,42,0.18);
transition:all 0.3s ease;
}
.mcard:hover{
transform:translateY(-6px);
box-shadow:0 7px 0 rgba(15,23,42,0.22),0 18px 36px rgba(15,23,42,0.24);
}
.mcard:active{
transform:translateY(1px) scale(0.99);
transition-duration:0.05s;
}
.mcard.is-click-busy{
transform:translateY(1px) scale(0.99);
filter:saturate(1.08) brightness(1.03);
pointer-events:none;
}
.mcard .mcard-start-btn{min-width:var(--layout-home-card-button-min-width)}
.mcard::before{
content:'';
position:absolute;
inset:0;
background-image:radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size:60px 60px;
opacity:0.2;
pointer-events:none;
z-index:1;
}
.mcard::after{
content:'';
position:absolute;
bottom:-25px;
right:-25px;
width:160px;
height:160px;
background-image:url('data:image/svg+xml,');
background-size:100%;
opacity:0.5;
pointer-events:none;
z-index:1;
}
/* Scenario Play card */
.mcard.active{
background:
radial-gradient(circle at 20% 18%,rgba(255,255,255,0.18),transparent 16%),
linear-gradient(145deg,var(--story-primary),var(--story-secondary));
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px var(--story-shadow);
}
.mcard.active:hover{
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 16px 36px rgba(99,102,241,0.40);
}
.mcard.active::after{
background-image:url('data:image/svg+xml,');
}
/* Business Challenge card */
.mcard.challenge{
background:
radial-gradient(circle at 82% 18%,rgba(251,146,60,0.18),transparent 14%),
linear-gradient(145deg,var(--challenge-secondary),var(--challenge-primary));
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px var(--challenge-shadow);
}
.mcard.challenge:hover{
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 16px 36px rgba(29,78,216,0.40);
}
.mcard.challenge::after{
background-image:url('data:image/svg+xml,');
}
/* Coming Soon card */
.mcard.coming-soon{
background:#7C3AED;
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px rgba(124,58,237,0.35);
cursor:not-allowed;
pointer-events:none;
}
.mcard.coming-soon:hover{
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px rgba(124,58,237,0.35);
transform:none;
}
.mcard.coming-soon::after{
background-image:url('data:image/svg+xml,');
}
.mcard-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:var(--layout-home-card-content-justify);
width:100%;
height:100%;
gap:0;
text-align:center;
padding:var(--layout-home-card-content-padding);
}
.mcard-icon{
width:var(--layout-home-card-icon-width);
height:var(--layout-home-card-icon-height);
display:flex;
align-items:center;
justify-content:center;
margin:0;
flex-shrink:0;
}
.mcard-icon-img{display:block;object-fit:contain;padding:0 !important}
.mcard.active .mcard-icon{
width:65px;
height:66px;
}
.mcard.active .mcard-icon,
.mcard.challenge .mcard-icon,
.mcard.choice-adventure .mcard-icon{
padding:8px;
border-radius:18px;
backdrop-filter:none;
}
.mcard.active .mcard-icon{
background:transparent;
box-shadow:none;
}
.mcard.challenge .mcard-icon{
background:transparent;
box-shadow:none;
}
.mcard.choice-adventure .mcard-icon{
background:transparent;
box-shadow:none;
}
.mcard-title{
font-size:1.05rem;
font-weight:800;
color:#fff;
margin:2px 0;
padding:0;
letter-spacing:0.3px;
text-shadow:0 2px 4px rgba(0,0,0,0.15);
line-height:1.15;
}
.mcard-title-row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;min-width:0}
.mcard-start-here-badge,.mcard-mobile-demo-cue,.mcard-btn-mobile{display:none}
.mcard-btn-default{display:inline-flex;align-items:center;justify-content:center}
.mcard-sub{
font-size:0.7rem;
color:rgba(255,255,255,0.92);
line-height:1.25;
text-shadow:0 1px 3px rgba(0,0,0,0.1);
margin:1px 0;
}
.mcard-progress-copy{
font-size:0.58rem;
font-weight:700;
color:rgba(255,255,255,0.78);
letter-spacing:0.02em;
margin:4px 0 0;
text-shadow:none;
opacity:0.9;
}
.mcard .prog-bar{
width:85%;
height:7px;
background:rgba(255,255,255,0.28);
border:1px solid rgba(255,255,255,0.38);
border-radius:5px;
overflow:hidden;
margin:2px 0;
display:block;
flex-shrink:0;
box-shadow:0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}
.mcard .prog-fill{
height:100%;
background:linear-gradient(90deg, rgba(255,244,180,1), rgba(255,255,255,0.92));
border-radius:3px;
box-shadow:inset 0 1px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,0.2);
}
.mcard.active .prog-bar{
background:rgba(255,255,255,0.20);
border-color:rgba(255,244,255,0.34);
}
.mcard.active .prog-fill{
background:linear-gradient(90deg,#FFD6F1,#FFF2AE);
box-shadow:0 0 10px rgba(244,114,182,0.36);
}
.mcard.challenge .prog-bar{
background:rgba(255,255,255,0.16);
border-color:rgba(255,220,166,0.32);
}
.mcard.challenge .prog-fill{
background:linear-gradient(90deg,#FFD86A,#FF9F43);
box-shadow:0 0 10px rgba(251,146,60,0.34);
}
.mcard.choice-adventure .prog-bar{
background:rgba(255,255,255,0.18);
border-color:rgba(255,250,208,0.34);
}
.mcard.choice-adventure .prog-fill{
background:linear-gradient(90deg,#FFE680,#7CF5D8);
box-shadow:0 0 10px rgba(20,184,166,0.34);
}
.progress-badge{
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.25);
color:#fff;
border-radius:50px;
padding:3px 10px;
font-size:0.65rem;
font-weight:700;
margin:1px 0;
text-align:center;
white-space:nowrap;
}
.prog-bar{
width:100%;
height:10px;
background:rgba(0,0,0,0.1);
border-radius:6px;
overflow:hidden;
margin-top:6px;
border:1px solid rgba(0,0,0,0.08);
}
.prog-fill{
height:100%;
background:linear-gradient(90deg,#0EA5E9,#38BDF8);
border-radius:6px;
transition:width 0.8s cubic-bezier(.4,0,.2,1);
box-shadow:0 1px 4px rgba(14,165,233,0.4);
}
.mcard-start-btn{
display:inline-flex;
align-items:center;
justify-content:center;
align-self:var(--layout-home-card-button-align);
background:linear-gradient(135deg,#FFE780,#FFC93A);
color:#4A3200;
border:none;
padding:var(--layout-home-card-button-padding);
border-radius:50px;
font-weight:800;
font-size:0.88rem;
cursor:pointer;
margin-top:auto;
margin-bottom:0;
transition:all 0.2s ease;
box-shadow:0 4px 0 rgba(126,84,0,0.28),0 8px 18px rgba(255,185,59,0.28);
text-decoration:none;
letter-spacing:0.2px;
}
.mcard-start-btn:hover{
background:linear-gradient(135deg,#FFF0A3,#FFD24D);
transform:translateY(-2px);
box-shadow:0 6px 0 rgba(126,84,0,0.28),0 12px 22px rgba(255,185,59,0.32);
}
.mcard-start-btn:active{
transform:translateY(2px);
box-shadow:0 2px 0 rgba(126,84,0,0.28);
}
.mcard.active .mcard-start-btn{
background:linear-gradient(135deg,#FFE091,#FF9ED8);
color:#5B2250;
box-shadow:0 4px 0 rgba(123,58,97,0.25),0 10px 22px rgba(244,114,182,0.26);
}
.mcard.active .mcard-start-btn:hover{
background:linear-gradient(135deg,#FFE8A9,#FFB6E1);
box-shadow:0 6px 0 rgba(123,58,97,0.25),0 14px 26px rgba(244,114,182,0.32);
}
.mcard.challenge .mcard-start-btn{
background:linear-gradient(135deg,#FFE17A,#FFB347);
color:#563105;
box-shadow:0 4px 0 rgba(114,73,8,0.26),0 10px 22px rgba(245,158,11,0.28);
}
.mcard.challenge .mcard-start-btn:hover{
background:linear-gradient(135deg,#FFE998,#FFC15C);
box-shadow:0 6px 0 rgba(114,73,8,0.26),0 14px 26px rgba(245,158,11,0.34);
}
.mcard.choice-adventure .mcard-start-btn{
background:linear-gradient(135deg,#FFE37D,#FF9F6B);
color:#71430A;
box-shadow:0 4px 0 rgba(126,84,0,0.26),0 10px 22px rgba(251,113,133,0.24);
}
.mcard.choice-adventure .mcard-start-btn:hover{
background:linear-gradient(135deg,#FFEB9A,#FFB27D);
box-shadow:0 6px 0 rgba(126,84,0,0.26),0 14px 26px rgba(251,113,133,0.30);
}
/* ── DAILY MISSION STRIP ── */
.daily-mission-strip{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#FFFBEB,#FEF3C7);border:1.5px solid #FCD34D;border-radius:16px;padding:14px 16px;margin-bottom:12px}
.dm-icon{font-size:1.8rem;flex-shrink:0;line-height:1}
.dm-body{flex:1;min-width:0}
.dm-title{font-size:0.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.7px;color:#92400E;margin-bottom:2px}
.dm-focus{font-size:0.9rem;font-weight:700;color:#78350F;line-height:1.4}
.dm-badge{flex-shrink:0;background:#FCD34D;color:#78350F;font-size:0.68rem;font-weight:800;border-radius:50px;padding:4px 10px;white-space:nowrap}
/* ── DAILY PROG ── */
.prog-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.prog-lbl{font-size:0.95rem;font-weight:700;color:var(--text)}
.prog-num{font-size:0.78rem;font-weight:700;color:var(--sky3)}
.home-progress-note{
font-size:0.66rem;
color:var(--muted2);
margin-top:5px;
line-height:1.35;
}
.prog-bar{height:8px;background:rgba(255,255,255,0.3);border-radius:4px;overflow:hidden;opacity:1;transition:opacity 0.3s ease;margin:8px 0;display:block}
.mcard:hover .prog-bar{opacity:1}
.prog-fill{height:100%;background:rgba(255,255,255,0.6);border-radius:4px;transition:width 0.6s ease;box-shadow:0 0 8px rgba(255,255,255,0.4)}
/* ── BIG PLAY BUTTON ── */
.big-play{width:100%;padding:15px;background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;border:none;border-radius:var(--r-sm);font-size:1.08rem;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(14,165,233,0.35);transition:transform 0.13s,box-shadow 0.13s}
.big-play:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(14,165,233,0.45)}
.big-play:active{transform:scale(0.97)}
.big-play:disabled{background:linear-gradient(135deg,#94A3B8,#64748B);box-shadow:none;cursor:not-allowed;transform:none}
.is-click-busy{cursor:progress !important}
.big-play.is-click-busy,
.ca-btn.is-click-busy,
.rw-buy-btn.is-click-busy,
.rewards-shop-btn.is-click-busy{
opacity:.82;
transform:translateY(1px) scale(.99);
box-shadow:none;
}
/* ── SCENARIO LAYOUT ── */
.sc-grid{display:grid;grid-template-columns:1fr var(--layout-play-sidebar-width);gap:var(--layout-play-gap);align-items:stretch;height:100%;overflow:hidden}
.sc-main{min-width:0;padding:var(--layout-play-main-padding);background:var(--card);border-radius:var(--layout-play-card-radius);box-shadow:inset 0 0 0 2px var(--sky);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;display:flex;flex-direction:column}
.sc-main::-webkit-scrollbar{display:none}
.sc-main--compact{overflow:hidden;padding:var(--layout-play-main-padding-compact)}
.sc-main--compact .sc-top{padding:10px 12px;margin-bottom:5px}
.sc-main--compact .sc-icon-ring{width:var(--layout-play-category-icon-size-compact);height:var(--layout-play-category-icon-size-compact);font-size:2.5rem;margin:0 auto 6px}
.sc-main--compact .sc-name{font-size:0.94rem;margin-bottom:2px}
.sc-main--compact .sc-body{font-size:0.9rem;line-height:1.42}
.sc-main--compact .sc-mode-note,
.sc-main--compact .sc-fill-card,
.sc-main--compact .sc-sequence-card,
.sc-main--compact .sc-quote-card{padding:8px 10px;margin:2px 0 6px}
.sc-main--compact .choices{gap:5px}
.sc-main--compact .cho-btn{padding:9px 11px;font-size:0.81rem}
.sc-main--compact .go-btn{margin-top:6px;padding:10px}
.sc-top{background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);border-radius:var(--r);padding:var(--layout-question-padding);margin-bottom:var(--layout-question-gap);text-align:center;position:relative;overflow:hidden;flex:1;display:flex;flex-direction:column;justify-content:center;border:1.5px solid #CFE5F8;box-shadow:0 12px 28px rgba(15,23,42,0.08)}
.sc-top::before{content:'';position:absolute;right:-18px;top:-18px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,0.12),rgba(14,165,233,0.02) 65%,transparent 70%)}
.local-question-watermark{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;width:max-content;padding:4px 9px;border-radius:999px;background:linear-gradient(135deg,#FFF7CC,#FEF3C7);border:1px solid rgba(245,158,11,0.28);color:#92400E;font-size:0.58rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 12px rgba(245,158,11,0.14);pointer-events:none}
.local-question-watermark::before{content:'●';color:#F59E0B;font-size:0.62rem;line-height:1}
.sc-icon-ring{width:var(--layout-play-category-icon-size);height:var(--layout-play-category-icon-size);border-radius:50%;background:linear-gradient(180deg,#E0F2FE,#F0F9FF);display:flex;align-items:center;justify-content:center;font-size:3.3rem;margin:0 auto 10px;animation:popIn 0.3s cubic-bezier(.3,1.5,.5,1);box-shadow:inset 0 0 0 1.5px #BAE6FD}
.scenario-icon-img{display:block;object-fit:contain}
.sc-icon-ring .scenario-icon-img{width:calc(100% * var(--layout-play-category-icon-art-scale));height:calc(100% * var(--layout-play-category-icon-art-scale))}
.sc-cat{font-size:0.66rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#2563EB;margin-bottom:4px}
.sc-subcat{font-size:0.58rem;font-weight:600;color:#7C3AED;opacity:0.85;letter-spacing:0.4px}
.sc-name{font-size:1.05rem;font-weight:900;color:#0F172A;margin-bottom:4px;line-height:1.3;text-align:left;width:100%}
.sc-diff{display:inline-block;border-radius:50px;padding:2px 9px;font-size:0.66rem;font-weight:700;margin-bottom:5px}
.d-easy{background:rgba(16,185,129,0.28);color:#D1FAE5}
.d-medium{background:rgba(245,158,11,0.28);color:#FEF3C7}
.d-hard{background:rgba(239,68,68,0.28);color:#FEE2E2}
.d-expert{background:rgba(139,92,246,0.28);color:#EDE9FE}
.sc-body{font-size:1rem;color:#334155;line-height:1.6;text-align:left}
.choices{display:flex;flex-direction:column;gap:var(--layout-answer-gap)}
.cho-btn{display:flex;align-items:center;gap:var(--layout-choice-gap);background:var(--card);border:1.5px solid var(--border2);border-radius:var(--r-sm);padding:var(--layout-choice-padding);cursor:pointer;text-align:left;font-size:0.88rem;font-weight:600;color:var(--text);transition:all 0.14s;line-height:1.4;width:100%}
.cho-btn:hover{border-color:var(--sky);background:var(--sky-lt);transform:translateX(3px)}
.cho-btn:active{transform:scale(0.98)}
.cho-btn:disabled{opacity:0.45;cursor:not-allowed;transform:none}
.cho-copy{display:block;flex:1}
.sc-mode-note,.sc-fill-card,.sc-sequence-card,.sc-quote-card{
border:2px solid #CFE5F8;
background:linear-gradient(180deg,#FFFFFF 0%,#F6FBFF 100%);
border-radius:18px;
padding:13px 15px;
margin:5px 0 11px;
color:#334155;
box-shadow:0 6px 16px rgba(14,165,233,0.08);
}
.sc-mode-note{
font-size:0.92rem;
font-weight:900;
color:#0F172A;
line-height:1.35;
border-color:#BFE1FA;
background:linear-gradient(180deg,#F0F9FF 0%,#FFFFFF 100%);
}
.sc-fill-label,.sc-sequence-label,.sc-quote-label{
display:inline-flex;
align-items:center;
min-height:24px;
padding:3px 9px;
border-radius:999px;
font-size:0.67rem;
font-weight:900;
letter-spacing:0.05em;
text-transform:uppercase;
color:#0F4C81;
background:#E0F2FE;
margin-bottom:7px;
}
.sc-fill-sentence{
font-size:0.98rem;
font-weight:900;
color:#0F172A;
line-height:1.45;
}
.sc-fill-help,.sc-sequence-help,.sc-quote-copy{
font-size:0.86rem;
font-weight:800;
color:#334155;
margin-top:6px;
line-height:1.35;
}
.sc-quote-card{
border-color:#F7D7A8;
background:linear-gradient(180deg,#FFF9F1 0%,#FFFFFF 100%);
}
.sc-quote-label{
background:#FEF3C7;
color:#9A3412;
}
.sc-quote-copy{
color:#7C2D12;
}
.sc-fill-card{
border-color:#C7E0FF;
background:linear-gradient(180deg,#F4F9FF 0%,#FFFFFF 100%);
}
.sc-fill-label{
background:#DBEAFE;
color:#1D4ED8;
}
.sc-sequence-card{
border-color:#BFDBFE;
background:linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%);
}
.sc-sequence-label{
background:#DBEAFE;
color:#1D4ED8;
}
.sc-main--sequence .sc-sequence-card,
.sc-main--match > .sc-sequence-card.sc-main--match{
position:relative;
isolation:isolate;
overflow:hidden;
border-color:rgba(251,191,36,0.5);
background:
linear-gradient(90deg,rgba(37,99,235,0.05) 1px,transparent 1px),
linear-gradient(0deg,rgba(37,99,235,0.04) 1px,transparent 1px),
var(--tone-quest-panel);
background-size:18px 18px,18px 18px,auto;
box-shadow:var(--layout-quest-card-shadow);
}
.sc-main--sequence .sc-sequence-card::before,
.sc-main--match > .sc-sequence-card.sc-main--match::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
background:
linear-gradient(90deg,rgba(96,165,250,0.18),rgba(52,211,153,0.15),rgba(251,146,60,0.16));
height:5px;
}
.sc-main--sequence .sc-sequence-label,
.sc-main--match .sc-sequence-label{
color:#7C2D12;
background:linear-gradient(135deg,#FDE68A,#FFFBEB);
border:1.5px solid rgba(245,158,11,0.36);
box-shadow:0 8px 16px rgba(245,158,11,0.16),var(--layout-quest-inset);
}
.sc-main--sequence .sc-match-section-label,
.sc-main--match .sc-match-section-label{
padding:4px 10px;
border-radius:999px;
color:#075985;
background:linear-gradient(135deg,#FFFFFF,#E0F2FE);
border:1.5px solid rgba(14,165,233,0.28);
box-shadow:0 6px 12px rgba(14,165,233,0.1),var(--layout-quest-inset);
}
.sc-body + .sc-fill-card,.sc-body + .sc-sequence-card,.sc-body + .sc-quote-card,.sc-body + .sc-mode-note{margin-top:10px}
.sc-sequence-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-sequence-grid-gap);margin-top:8px}
.sc-sequence-picked{display:flex;align-items:flex-start;gap:var(--layout-sequence-grid-gap);background:#FFFFFF;border:1.5px solid #BFE1FA;border-radius:12px;padding:var(--layout-sequence-card-padding);min-width:0}
.sc-sequence-picked-badge{flex-shrink:0;background:#DBEAFE;color:#1D4ED8;border-radius:999px;padding:3px 8px;font-size:0.64rem;font-weight:900}
.sc-sequence-picked-copy{font-size:0.78rem;font-weight:700;color:#0F172A;line-height:1.25;min-width:0}
.sc-sequence-empty{margin-top:8px;padding:8px 9px;border-radius:12px;background:#F8FAFC;border:1.5px dashed #BFDBFE;color:#475569;font-size:0.76rem;font-weight:700}
.sc-sequence-actions{display:flex;gap:var(--layout-sequence-action-gap);flex-wrap:wrap;margin-top:8px}
.sc-sequence-reset,.sc-sequence-submit{border:none;border-radius:999px;padding:7px 10px;font-size:0.7rem;font-weight:800;cursor:pointer}
.sc-sequence-reset{background:#E2E8F0;color:#334155}
.sc-sequence-submit{background:#BFDBFE;color:#1E3A8A}
.sc-sequence-submit.is-ready{background:linear-gradient(135deg,#0EA5E9,#2563EB);color:#fff}
.sc-sequence-submit:disabled{opacity:0.55;cursor:not-allowed}
.choices--dialogue .cho-btn--dialogue{
background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);
border-radius:18px;
padding:12px 14px;
align-items:flex-start;
}
.choices--mistake .cho-btn--mistake{
background:linear-gradient(180deg,#FFFDF8 0%,#FFF7ED 100%);
border-color:#F5D7B2;
}
.choices--chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px}
.cho-btn--chip{
justify-content:center;
text-align:center;
border-radius:999px;
padding:10px 12px;
font-weight:800;
background:linear-gradient(180deg,#FFFFFF 0%,#F1F5F9 100%);
}
.choices--sequence{gap:8px}
.cho-btn--sequence-pick{
align-items:flex-start;
border-radius:16px;
padding:10px 12px;
background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);
}
.cho-btn--sequence-pick .cho-copy{font-weight:800;color:#0F3F6E;font-size:0.8rem;line-height:1.28}
.cho-ltr{width:25px;height:25px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.76rem;font-weight:700;color:#fff;flex-shrink:0}
.l-a{background:var(--sky)}.l-b{background:var(--mint)}.l-c{background:var(--amber)}
/* ── SIDEBAR ── ENHANCED */
.sidebar{display:flex;flex-direction:column;gap:12px;overflow:hidden}
/* ── SIDEBAR COMPACT: inside scenario/challenge play ── */
.sc-grid .sidebar{gap:8px;height:100%}
.sc-grid .sidebar .panel{padding:10px 12px}
.sc-grid .sidebar .panel:first-child{flex:0 0 auto}
.sc-grid .sidebar .panel:last-child{flex:0 0 auto;display:flex;flex-direction:column;overflow:visible}
.sc-grid .sidebar .panel:last-child .rw-list{flex:none;display:flex;flex-direction:column;gap:5px;justify-content:flex-start}
.sc-grid .sidebar .panel-h{font-size:0.82rem;margin-bottom:5px;padding-bottom:5px}
.sc-grid .sidebar .cur-pos-box{padding:6px 10px;margin-bottom:6px;font-size:0.82rem}
.sc-grid .sidebar .cur-pos-lbl{font-size:0.64rem}
.sc-grid .sidebar .prow{padding:2px 0;margin-bottom:2px;display:flex;align-items:center;gap:6px}
.sc-grid .sidebar .plbl{font-size:0.74rem;min-width:70px}
.sc-grid .sidebar .pnums{font-size:0.72rem;min-width:48px;text-align:right}
.sc-grid .sidebar .pbar{height:6px;flex:1}
/* Gamified reward rows — mini power-up cards, fill height equally */
.sc-grid .sidebar .rw-row2{
flex:0 0 auto;
min-height:0;
padding:6px 8px;
border-radius:9px;
background:var(--bg2);
border:1px solid var(--border);
border-left:3px solid var(--sky);
border-bottom:1px solid var(--border);
gap:7px;
align-items:center;
}
.sc-grid .sidebar .rw-row2:nth-child(1){border-left-color:#F59E0B}
.sc-grid .sidebar .rw-row2:nth-child(2){border-left-color:var(--sky)}
.sc-grid .sidebar .rw-row2:nth-child(3){border-left-color:#10B981}
.sc-grid .sidebar .rw-left{min-width:0}
.sc-grid .sidebar .rw-title{font-size:0.68rem;font-weight:800;margin-bottom:1px;color:var(--text);line-height:1.12}
.sc-grid .sidebar .rw-meta{font-size:0.56rem;gap:2px;color:var(--muted2);line-height:1.1;flex-wrap:wrap}
.sc-grid .sidebar .rw-buy-btn{padding:4px 9px;font-size:0.64rem;font-weight:700;border-radius:8px}
.panel{
background:linear-gradient(180deg,var(--tone-surface) 0%,var(--tone-surface-soft) 100%);
border-radius:var(--r);
padding:16px;
box-shadow:0 6px 18px rgba(37,99,235,0.08), inset 0 1px 0 rgba(255,255,255,0.86);
border:1px solid var(--tone-panel-border);
transition:all 0.25s ease;
}
.panel:hover{box-shadow:0 10px 26px rgba(37,99,235,0.12), inset 0 1px 0 rgba(255,255,255,0.86);}
/* Hide player profile card from home sidebar - Option 1 */
.home-side > div:first-child,
.home-side > .card:first-child,
.sidebar > .card:first-of-type{
display:none !important;
}
.home-side .panel,.home-progress-card,.home-side .card{border:var(--layout-home-dash-card-border-width) solid var(--tone-panel-border-strong);background:linear-gradient(180deg,var(--tone-surface) 0%,var(--tone-surface-soft) 100%);border-radius:var(--layout-home-dash-card-radius)}
.home-promo-card,
.home-progress-card--story,
.home-progress-card--challenge,
.home-progress-card--combined,
.home-streak-card{
position:relative;
overflow:hidden;
}
.home-promo-card::before,
.home-progress-card--story::before,
.home-progress-card--challenge::before,
.home-progress-card--combined::before,
.home-streak-card::before{
content:'';
position:absolute;
top:6px;
right:6px;
width:44px;
height:44px;
opacity:.10;
pointer-events:none;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
.home-promo-card{
background:linear-gradient(180deg,rgba(248,251,255,0.98) 0%,rgba(244,249,255,0.94) 54%,rgba(255,251,242,0.9) 100%);
border-color:var(--tone-home-card-border);
border-radius:var(--right-panel-radius);
box-shadow:var(--right-panel-soft-shadow);
}
.home-promo-card::after,
.home-daily-card::after{
display:none;
}
.home-promo-card::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2320466B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 46h36'/%3E%3Cpath d='M18 44V24l14-8 14 8v20'/%3E%3Cpath d='M24 36l8-8 8 8'/%3E%3Cpath d='M32 28v16'/%3E%3C/svg%3E")}
.home-progress-card--story{
background:linear-gradient(135deg,#FFF8FF 0%,#F7F4FF 60%,#FFFDF0 100%);
border-color:#DCCEF9;
box-shadow:0 10px 24px rgba(139,92,246,0.10), inset 0 1px 0 rgba(255,255,255,0.88);
}
.home-progress-card--story::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%236D28D9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18c0-3 2-5 5-5h11c4 0 7 1 10 4 3-3 6-4 10-4h1c3 0 5 2 5 5v28c0 3-2 5-5 5H40c-4 0-7 1-10 4-3-3-6-4-10-4H19c-3 0-5-2-5-5V18Z'/%3E%3Cpath d='M32 17v34'/%3E%3C/svg%3E")}
.home-progress-card--challenge{
background:linear-gradient(135deg,#F8FBFF 0%,#EEF5FF 52%,#FFF8EC 100%);
border-color:#BFD8FF;
box-shadow:0 10px 24px rgba(37,99,235,0.12), inset 0 1px 0 rgba(255,255,255,0.88);
}
.home-progress-card--challenge::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23174D96' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14h24v10c0 8-5 14-12 17-7-3-12-9-12-17V14Z'/%3E%3Cpath d='M20 20H12c0 7 3 10 8 10M44 20h8c0 7-3 10-8 10'/%3E%3Cpath d='M26 50h12M24 54h16'/%3E%3C/svg%3E")}
.home-progress-card--combined{
background:linear-gradient(135deg,#FFF8FF 0%,#F6F7FF 48%,#FFF8EC 100%);
border-color:#C9D9FB;
box-shadow:0 10px 24px rgba(99,102,241,0.11), inset 0 1px 0 rgba(255,255,255,0.88);
}
.home-progress-card--combined::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%233B4CA8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18c0-3 2-5 5-5h10c4 0 7 1 9 4 2-3 5-4 9-4h2c3 0 5 2 5 5v28c0 3-2 5-5 5H39c-4 0-7 1-10 4-3-3-6-4-10-4h0c-3 0-5-2-5-5V18Z'/%3E%3Cpath d='M32 17v34'/%3E%3Cpath d='M24 27h4M42 27h6M24 36h4M42 36h6'/%3E%3C/svg%3E")}
.home-daily-card{
position:relative;
overflow:hidden;
background:linear-gradient(180deg,rgba(248,251,255,0.98),rgba(255,255,255,0.92));
border-color:var(--tone-home-card-border);
border-radius:var(--right-panel-radius);
box-shadow:var(--right-panel-soft-shadow);
}
.home-daily-card::before{
content:'';
position:absolute;
top:6px;
right:6px;
width:44px;
height:44px;
opacity:.10;
pointer-events:none;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%233B4CA8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18c0-3 2-5 5-5h10c4 0 7 1 9 4 2-3 5-4 9-4h2c3 0 5 2 5 5v28c0 3-2 5-5 5H39c-4 0-7 1-10 4-3-3-6-4-10-4h0c-3 0-5-2-5-5V18Z'/%3E%3Cpath d='M32 17v34'/%3E%3Cpath d='M24 27h4M42 27h6M24 36h4M42 36h6'/%3E%3C/svg%3E");
}
.home-daily-list{
display:grid;
gap:var(--layout-home-daily-gap);
}
.home-daily-item{
display:flex;
flex-direction:column;
gap:var(--layout-home-daily-item-gap);
padding:var(--layout-home-daily-item-padding);
border-radius:var(--layout-home-dash-row-radius);
border:var(--layout-home-dash-row-border-width) solid var(--tone-home-row-border);
background:var(--tone-home-row-surface);
}
.home-daily-item-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:8px;
}
.home-daily-head{
display:flex;
align-items:flex-start;
gap:var(--layout-home-dash-row-gap);
min-width:0;
}
.home-daily-copy{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.home-daily-icon{
width:var(--layout-home-dash-icon-size);
height:var(--layout-home-dash-icon-size);
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:var(--layout-home-dash-icon-radius);
background:rgba(255,255,255,0.92);
box-shadow:0 4px 10px rgba(148,163,184,0.12);
font-size:var(--layout-home-dash-icon-font);
line-height:1;
}
.home-daily-label{
font-size:var(--layout-home-dash-title-text-font);
font-weight:800;
line-height:1.1;
}
.home-daily-note{
font-size:var(--layout-home-dash-body-font);
font-weight:700;
line-height:var(--layout-home-dash-body-line-height);
color:#6B7280;
}
.home-daily-metrics{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:2px;
flex-shrink:0;
}
.home-daily-value{
font-size:.82rem;
font-weight:800;
color:#203A57;
line-height:1.05;
white-space:nowrap;
letter-spacing:-0.01em;
}
.home-daily-meta{
font-size:.56rem;
font-weight:800;
line-height:1;
text-transform:uppercase;
letter-spacing:.08em;
color:#7A8EA8;
}
.home-daily-bar-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:8px;
}
.home-daily-track{
position:relative;
height:var(--layout-home-dash-bar-height);
border-radius:999px;
overflow:hidden;
border:1px solid rgba(201,217,251,0.9);
background:linear-gradient(180deg,rgba(255,255,255,0.96),rgba(229,238,252,0.98));
box-shadow:inset 0 1px 2px rgba(148,163,184,0.16);
}
.home-daily-percent{
font-size:.6rem;
font-weight:800;
line-height:1;
color:#6B7F98;
min-width:32px;
text-align:right;
}
.home-daily-track.has-progress .home-daily-fill{
min-width:18px;
}
.home-daily-track.is-empty::before{
content:"";
position:absolute;
left:4px;
top:50%;
width:20px;
height:7px;
border-radius:999px;
transform:translateY(-50%);
box-shadow:0 0 0 2px rgba(255,255,255,0.78);
}
.home-daily-fill{
height:100%;
border-radius:999px;
min-width:0;
}
.home-daily-bonus{
display:inline-flex;
align-items:center;
gap:6px;
align-self:flex-start;
min-height:24px;
padding:4px 9px;
border-radius:999px;
border:1px solid #A7F3D0;
background:linear-gradient(135deg,#E0F2FE,#D1FAE5);
color:#047857;
font-size:.68rem;
font-weight:800;
line-height:1;
}
.home-daily-bonus-ico{
font-size:.9rem;
line-height:1;
}
.home-daily-bonus-text{
font-size:.68rem;
line-height:1;
}
.home-daily-badge{
display:inline-flex;
align-items:center;
gap:6px;
align-self:flex-start;
min-height:24px;
padding:4px 9px;
border-radius:999px;
border:1px solid #BFDBFE;
background:linear-gradient(135deg,#EFF6FF,#DBEAFE);
color:#1D4ED8;
font-size:.68rem;
font-weight:800;
line-height:1;
}
.home-daily-badge-ico{
font-size:.9rem;
line-height:1;
}
.home-daily-badge-text{
font-size:.68rem;
line-height:1;
}
.home-daily-badge--challenge{
border-color:#BFDBFE;
background:linear-gradient(135deg,#EFF6FF,#DBEAFE);
color:#1D4ED8;
}
.home-daily-item--story{
border-color:#DDC7FF;
background:linear-gradient(180deg,rgba(247,244,255,0.95),rgba(255,255,255,0.9));
}
.home-daily-item--story .home-daily-label{color:#6D28D9}
.home-daily-item--story .home-daily-icon{background:linear-gradient(135deg,#F3E8FF,#FDF4FF);color:#7C3AED}
.home-daily-item--story .home-daily-track{background:#F2E8FF;border-color:#DDC7FF}
.home-daily-item--story .home-daily-track.is-empty::before{background:#C084FC}
.home-daily-item--story .home-daily-fill{background:linear-gradient(90deg,#A855F7,#F472B6);box-shadow:0 1px 6px rgba(168,85,247,0.28)}
.home-daily-item--story .home-daily-percent{color:#7C3AED}
.home-daily-item--choice-adventure{
border-color:#A9EAC5;
background:linear-gradient(180deg,rgba(231,248,239,0.95),rgba(255,255,255,0.9));
}
.home-daily-item--choice-adventure .home-daily-label{color:#047857}
.home-daily-item--choice-adventure .home-daily-icon{background:linear-gradient(135deg,#ECFDF5,#F0FDF4);color:#059669}
.home-daily-item--choice-adventure .home-daily-track{background:#E7F8EF;border-color:#A9EAC5}
.home-daily-item--choice-adventure .home-daily-track.is-empty::before{background:#34D399}
.home-daily-item--choice-adventure .home-daily-fill{background:linear-gradient(90deg,#10B981,#FBBF24);box-shadow:0 1px 6px rgba(16,185,129,0.24)}
.home-daily-item--choice-adventure .home-daily-percent{color:#059669}
.home-daily-item--challenge{
border-color:#C9DBFF;
background:linear-gradient(180deg,rgba(231,240,255,0.95),rgba(255,255,255,0.9));
}
.home-daily-item--challenge .home-daily-label{color:#174D96}
.home-daily-item--challenge .home-daily-note{color:#4F74B8}
.home-daily-item--challenge .home-daily-icon{background:linear-gradient(135deg,#DBEAFE,#EFF6FF);color:#2563EB}
.home-daily-item--challenge .home-daily-track{background:#E7F0FF;border-color:#C9DBFF}
.home-daily-item--challenge .home-daily-track.is-empty::before{background:#60A5FA}
.home-daily-item--challenge .home-daily-fill{background:linear-gradient(90deg,#2563EB,#F59E0B);box-shadow:0 1px 6px rgba(37,99,235,0.25)}
.home-daily-item--challenge .home-daily-percent{color:#2563EB}
.home-daily-item--streak{
border-color:#FAD58A;
background:linear-gradient(180deg,rgba(255,244,214,0.98),rgba(255,255,255,0.9));
}
.home-daily-item--streak .home-daily-label{color:#B45309}
.home-daily-item--streak .home-daily-note{color:#C26B14}
.home-daily-item--streak .home-daily-icon{background:linear-gradient(135deg,#FEF3C7,#FFF7ED);color:#D97706}
.home-daily-item--streak .home-daily-track{background:#FFF4D6;border-color:#FAD58A}
.home-daily-item--streak .home-daily-track.is-empty::before{background:#F59E0B}
.home-daily-item--streak .home-daily-fill{background:linear-gradient(90deg,#F59E0B,#FACC15);box-shadow:0 1px 6px rgba(245,158,11,0.28)}
.home-daily-item--streak .home-daily-percent{color:#D97706}
.home-fresh-progress-card{
position:relative;
overflow:hidden;
}
.home-fresh-progress-card .panel-h{
margin-bottom:var(--layout-home-dash-row-gap);
padding-bottom:0;
border-bottom:none;
}
.home-fresh-progress-title-badge{
display:inline-flex;
align-items:center;
gap:var(--layout-home-dash-title-gap);
padding:var(--layout-home-dash-title-padding);
border-radius:999px;
background:var(--tone-home-title-badge-bg);
border:1px solid var(--tone-home-title-badge-border);
color:var(--tone-home-title-badge-color);
font-size:var(--layout-home-dash-title-font);
font-weight:900;
text-transform:uppercase;
letter-spacing:var(--layout-home-dash-title-letter-spacing);
line-height:1;
box-shadow:0 5px 14px rgba(37,99,235,0.06);
}
.home-promo-card,
.home-fresh-progress-card{
transition:none !important;
}
.right-panel-title{
font-size:var(--right-panel-title-size);
font-weight:900;
line-height:1;
letter-spacing:var(--right-panel-letter-spacing);
text-transform:uppercase;
}
.right-panel-label{
font-size:var(--right-panel-label-size);
font-weight:900;
line-height:var(--right-panel-line-height);
}
.right-panel-value{
font-size:var(--right-panel-value-size);
font-weight:900;
line-height:1;
text-align:right;
white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.right-panel-caption{
font-size:var(--right-panel-caption-size);
font-weight:800;
line-height:1.05;
letter-spacing:.02em;
}
.right-panel-role-name{
font-size:var(--right-panel-role-name-size);
font-weight:900;
line-height:1.12;
text-align:center;
}
.guest-hero-note{position:absolute;right:18px;top:14px;z-index:4;width:min(var(--layout-home-guest-note-width),calc(100% - 36px));max-width:var(--layout-home-guest-note-width);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--layout-home-guest-note-gap);padding:var(--layout-home-guest-note-padding);border:1px solid #FED7AA;border-radius:14px;background:rgba(255,247,237,.96);box-shadow:0 10px 22px rgba(180,83,9,.15),0 0 22px rgba(251,191,36,.2);color:#9A3412;text-align:left;pointer-events:auto}
.guest-hero-note-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.guest-hero-note strong{font-size:.62rem;font-weight:950;text-transform:uppercase;letter-spacing:.06em;line-height:1.05;color:#9A3412}
.guest-hero-note-copy span{font-size:.59rem;font-weight:850;line-height:1.24;color:#7C2D12;white-space:normal}
.guest-hero-signup-cta{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:var(--layout-home-guest-note-button-min-width);min-height:var(--layout-home-guest-note-button-min-height);padding:6px 8px;border:0;border-radius:12px;background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;font-family:inherit;font-size:.56rem;font-weight:950;box-shadow:0 9px 18px rgba(37,99,235,.26),0 0 18px rgba(14,165,233,.28);cursor:pointer;white-space:nowrap}
.guest-hero-signup-cta:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.34),0 0 28px rgba(14,165,233,.4)}
.guest-hero-signup-cta:focus-visible{outline:3px solid rgba(14,165,233,.28);outline-offset:2px}
.guest-hero-signup-cta span{color:#fff!important}
.guest-hero-signup-icon{width:18px;height:18px;border-radius:999px;background:rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center;color:#fff!important;font-size:.78rem!important;font-weight:950!important;line-height:1!important}
.guest-demo-journey{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid #BFDBFE;border-radius:18px;background:linear-gradient(135deg,#EFF6FF,#FFFFFF);box-shadow:0 12px 28px rgba(37,99,235,.1);overflow:hidden}
.guest-demo-journey-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.guest-demo-journey-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.guest-demo-journey-copy span{font-size:.62rem;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:#1D4ED8}
.guest-demo-journey-copy strong{font-size:.82rem;line-height:1.16;color:#172554;font-weight:950}
.guest-demo-journey-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;min-width:0}
.guest-demo-journey-step,.guest-demo-journey-growth,.guest-demo-journey-save{min-height:38px;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 8px;border-radius:12px;border:1px solid #D7DEE8;background:#FFFFFF;color:#475569;font-family:inherit;font-size:.66rem;font-weight:950;text-align:center;line-height:1.08;white-space:normal}
.guest-demo-journey-arrow{display:inline-flex;align-items:center;justify-content:center;width:14px;color:#2563EB;font-size:.82rem;font-weight:950;line-height:1;opacity:.72}
.guest-demo-journey-step b{width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#E0F2FE;color:#0369A1;font-size:.6rem;flex:0 0 auto}
.guest-demo-journey-step span{display:flex;flex-direction:column;gap:2px;min-width:0}
.guest-demo-journey-step em{font-style:normal;font-size:.56rem;font-weight:950;color:inherit;opacity:.78}
.guest-demo-journey-step.is-current{border-color:#FDBA74;background:#FFF7ED;color:#9A3412;box-shadow:0 0 0 3px rgba(251,146,60,.13)}
.guest-demo-journey-step.is-current b{background:#FED7AA;color:#9A3412}
.guest-demo-journey-step.is-done{border-color:#86EFAC;background:#F0FDF4;color:#166534}
.guest-demo-journey-step.is-done b{background:#BBF7D0;color:#166534}
.guest-demo-journey-growth{cursor:pointer;background:#F8FAFC}
.guest-demo-journey-growth.is-unlocked{border-color:#BFDBFE;background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;box-shadow:0 10px 22px rgba(37,99,235,.22)}
.guest-demo-journey-save{cursor:pointer;min-width:132px;border-color:#BFDBFE;background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;box-shadow:0 9px 18px rgba(37,99,235,.26),0 0 18px rgba(14,165,233,.28)}
.guest-demo-journey-save:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.34),0 0 28px rgba(14,165,233,.4)}
.guest-demo-journey-save:focus-visible{outline:3px solid rgba(14,165,233,.28);outline-offset:2px}
.guest-demo-journey-save span{color:#fff}
.guest-signup-ov{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.46);backdrop-filter:blur(5px)}
.guest-signup-box{width:min(430px,100%);border-radius:22px;background:#fff;padding:22px;box-shadow:0 24px 70px rgba(15,23,42,.22);border:1px solid #FED7AA;text-align:left}
.guest-signup-kicker{display:inline-flex;border-radius:999px;background:#FFF7ED;color:#C2410C;border:1px solid #FED7AA;padding:6px 10px;font-size:.68rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.guest-signup-title{font-size:1.35rem;line-height:1.08;font-weight:950;color:#172554;margin-bottom:8px}
.guest-signup-copy{font-size:.86rem;line-height:1.48;color:#334155;font-weight:750;margin-bottom:10px}
.guest-signup-note{border-radius:14px;background:#F8FAFC;border:1px solid #E2E8F0;padding:10px 11px;font-size:.72rem;line-height:1.42;color:#64748B;font-weight:750;margin-bottom:14px}
.guest-signup-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.guest-signup-actions--with-growth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.guest-signup-btn{flex:1;border:0;border-radius:14px;padding:11px 12px;font-family:inherit;font-size:.82rem;font-weight:950;cursor:pointer}
.guest-signup-btn--google{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;border:1px solid rgba(255,255,255,.55);box-shadow:0 12px 26px rgba(37,99,235,.28),0 0 24px rgba(14,165,233,.24)}
.guest-signup-btn--google:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(37,99,235,.34),0 0 34px rgba(14,165,233,.32)}
.guest-signup-google-mark{width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#4285F4;font-weight:950;background:#fff}
.guest-signup-btn--primary{background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE}
.guest-signup-btn--secondary{background:#F1F5F9;color:#334155}
.guest-signup-actions--with-growth .guest-signup-btn--secondary{grid-column:1/-1}
.guest-signup-btn--growth{position:relative;overflow:hidden;background:linear-gradient(135deg,#F59E0B,#F97316);color:#fff;box-shadow:0 10px 24px rgba(249,115,22,.28),0 0 22px rgba(251,191,36,.32);animation:guestSignupGrowthGlow 2.15s ease-in-out infinite}
.guest-signup-btn--growth::before{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid rgba(251,191,36,.4);box-shadow:0 0 0 4px rgba(251,191,36,.1),0 0 24px rgba(251,191,36,.38);pointer-events:none}
.guest-signup-btn--growth:hover{box-shadow:0 13px 30px rgba(249,115,22,.36),0 0 40px rgba(251,191,36,.58);transform:translateY(-1px)}
@keyframes guestSignupGrowthGlow{0%,100%{box-shadow:0 10px 24px rgba(249,115,22,.28),0 0 20px rgba(251,191,36,.3)}50%{box-shadow:0 15px 34px rgba(249,115,22,.42),0 0 48px rgba(251,191,36,.66)}}
.guest-growth-locked{position:relative;opacity:.78;filter:grayscale(.12)}
.nav-btn.guest-growth-locked{opacity:1;filter:none;border-color:rgba(251,191,36,.88);background:linear-gradient(180deg,rgba(255,247,237,.34),rgba(255,255,255,.15));box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 10px 22px rgba(8,20,38,.2),0 0 34px rgba(251,191,36,.42),0 0 10px rgba(249,115,22,.22);animation:guestGrowthNavGlow 2.25s ease-in-out infinite}
.nav-btn.guest-growth-locked:hover{border-color:rgba(251,191,36,1);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 12px 26px rgba(8,20,38,.22),0 0 48px rgba(251,191,36,.58),0 0 18px rgba(249,115,22,.32)}
.nav-btn.guest-growth-locked::after,.tab-btn.guest-growth-locked::after{content:"3 plays";position:static;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:4px;border-radius:999px;background:#FFF7ED;border:1px solid #FED7AA;color:#9A3412;padding:3px 6px;font-size:.48rem;font-weight:950;letter-spacing:.05em;text-transform:uppercase;line-height:1;pointer-events:none;white-space:nowrap}
.tab-btn.guest-growth-locked::after{margin-left:auto}
.dropdown-item.guest-growth-locked::after{content:"3 plays";margin-left:auto;border-radius:999px;background:#FFF7ED;border:1px solid #FED7AA;color:#9A3412;padding:3px 6px;font-size:.52rem;font-weight:950;letter-spacing:.05em;text-transform:uppercase;line-height:1}
@keyframes guestGrowthNavGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 10px 22px rgba(8,20,38,.2),0 0 28px rgba(251,191,36,.36),0 0 8px rgba(249,115,22,.18)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 14px 30px rgba(8,20,38,.24),0 0 56px rgba(251,191,36,.72),0 0 20px rgba(249,115,22,.38)}}
.guest-growth-lock-ov{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.46);backdrop-filter:blur(5px)}
.guest-growth-lock-box{width:min(470px,100%);border-radius:22px;background:#fff;padding:22px;box-shadow:0 24px 70px rgba(15,23,42,.22);border:1px solid #BFDBFE;text-align:left}
.guest-growth-lock-kicker{display:inline-flex;border-radius:999px;background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE;padding:6px 10px;font-size:.68rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.guest-growth-lock-title{font-size:1.3rem;line-height:1.1;font-weight:950;color:#172554;margin-bottom:8px}
.guest-growth-lock-copyline{font-size:.82rem;line-height:1.5;color:#475569;font-weight:750;margin-bottom:13px}
.guest-growth-lock-list{display:grid;gap:9px;margin-bottom:15px}
.guest-growth-lock-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border-radius:16px;background:#F8FAFC;border:1px solid #E2E8F0}
.guest-growth-lock-row.is-complete{background:#F0FDF4;border-color:#BBF7D0}
.guest-growth-lock-icon{width:38px;height:38px;border-radius:13px;background:#fff;border:1px solid rgba(148,163,184,.2);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(15,23,42,.05)}
.guest-growth-lock-icon-img{width:32px;height:32px;object-fit:contain;display:block}
.guest-growth-lock-copy{min-width:0}
.guest-growth-lock-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.guest-growth-lock-top strong{font-size:.82rem;font-weight:950;color:#172554}
.guest-growth-lock-top span{font-size:.72rem;font-weight:950;color:#2563EB}
.guest-growth-lock-bar{height:8px;border-radius:999px;background:#E2E8F0;overflow:hidden}
.guest-growth-lock-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38BDF8,#2563EB)}
.guest-growth-lock-row.is-complete .guest-growth-lock-bar span{background:linear-gradient(90deg,#34D399,#059669)}
.guest-growth-lock-status{border-radius:999px;background:#FFEDD5;color:#9A3412;padding:5px 8px;font-size:.58rem;font-weight:950;text-transform:uppercase;letter-spacing:.05em}
.guest-growth-lock-row.is-complete .guest-growth-lock-status{background:#DCFCE7;color:#166534}
.guest-growth-lock-actions{display:flex;gap:10px}
.guest-growth-lock-btn{flex:1;border:0;border-radius:14px;padding:11px 12px;font-family:inherit;font-size:.82rem;font-weight:950;cursor:pointer}
.guest-growth-lock-btn--primary{background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;box-shadow:0 10px 20px rgba(14,165,233,.22)}
.guest-growth-lock-btn--secondary{background:#F1F5F9;color:#334155}
@media (max-width:900px){
.guest-demo-journey-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.guest-demo-journey-arrow{display:none}
}
@media (max-width:540px){
.guest-demo-journey{gap:9px;padding:11px;margin-bottom:12px}
.guest-demo-journey-head{grid-template-columns:1fr;gap:8px}
.guest-demo-journey-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.guest-demo-journey-arrow{display:none}
.guest-demo-journey-save{width:100%;min-width:0}
.guest-demo-journey-copy strong{font-size:.78rem}
.guest-demo-journey-step,.guest-demo-journey-growth,.guest-demo-journey-save{min-height:34px;font-size:.6rem}
.guest-growth-lock-box{padding:18px;border-radius:20px}
.guest-growth-lock-title{font-size:1.1rem}
.guest-growth-lock-copyline{font-size:.76rem}
.guest-growth-lock-row{grid-template-columns:auto minmax(0,1fr);align-items:start}
.guest-growth-lock-status{grid-column:2;justify-self:start}
.guest-growth-lock-actions{flex-direction:column}
}
.guest-disabled-card{padding:22px;border:1px solid #FED7AA;border-radius:20px;background:linear-gradient(135deg,#FFF7ED,#FFFFFF);box-shadow:0 12px 34px rgba(180,83,9,.1)}
.guest-disabled-kicker{display:inline-flex;border-radius:999px;background:#FFEDD5;color:#C2410C;padding:6px 10px;font-size:.68rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.guest-disabled-title{font-size:1.18rem;font-weight:950;color:#172554;margin-bottom:8px;line-height:1.15}
.guest-disabled-copy{font-size:.82rem;line-height:1.55;color:#475569;font-weight:750;max-width:680px;margin-bottom:14px}
.guest-disabled-btn,.guest-demo-save-btn{border:0;border-radius:999px;background:linear-gradient(135deg,#F59E0B,#F97316);color:#fff;font-size:.78rem;font-weight:950;padding:10px 14px;box-shadow:0 10px 20px rgba(249,115,22,.22);cursor:pointer}
.guest-demo-disclaimer{margin:12px 0;padding:10px 12px;border-radius:14px;background:#FFF7ED;border:1px solid #FED7AA;color:#9A3412;font-size:.76rem;font-weight:850;line-height:1.42}
.guest-demo-insights .guest-demo-parent-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.guest-demo-parent-card{background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);border-color:rgba(37,99,235,.14)}
.guest-demo-insight-card .pi-skill-insight{font-size:.78rem;line-height:1.48;color:#475569;font-weight:750;margin-top:10px}
.guest-demo-locked-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.guest-demo-locked-card{position:relative;min-height:92px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:14px;border-radius:18px;border:1px dashed #CBD5E1;background:linear-gradient(135deg,#F8FAFC,#EEF2F7);filter:grayscale(.25);opacity:.7}
.guest-demo-locked-card::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(255,255,255,.42);backdrop-filter:blur(.7px);pointer-events:none}
.guest-demo-locked-card span,.guest-demo-locked-card strong,.guest-demo-locked-card em{position:relative;z-index:1}
.guest-demo-locked-card span{font-size:.6rem;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:#64748B}
.guest-demo-locked-card strong{font-size:.86rem;line-height:1.16;font-weight:950;color:#334155}
.guest-demo-locked-card em{font-style:normal;font-size:.66rem;line-height:1.32;font-weight:800;color:#64748B}
.guest-preview-locked{position:relative;overflow:hidden;filter:grayscale(.28);opacity:.72}
.guest-preview-locked::after{content:"Preview only";position:absolute;right:12px;top:12px;z-index:3;border-radius:999px;border:1px solid rgba(148,163,184,.34);background:rgba(255,255,255,.82);color:#64748B;padding:5px 9px;font-size:.58rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 18px rgba(15,23,42,.08);pointer-events:none}
.guest-preview-blur::before{content:"";position:absolute;inset:0;z-index:2;background:rgba(248,250,252,.34);backdrop-filter:blur(.45px);pointer-events:none}
.guest-preview-blur>*{filter:blur(1.35px) grayscale(.18);pointer-events:none;user-select:none}
.guest-preview-blur .guest-preview-locked::after{display:none}
.guest-demo-insights .guest-subskill-preview-toggle{position:relative;display:inline-flex;align-items:center;max-width:100%;margin-top:10px;padding:8px 11px;border-radius:999px;border:1px solid rgba(148,163,184,.3);background:#F8FAFC;color:#64748B;box-shadow:0 6px 14px rgba(15,23,42,.04);filter:blur(.75px) grayscale(.22);opacity:.62;cursor:not-allowed;pointer-events:none;user-select:none}
.guest-demo-insights .guest-subskill-preview-toggle::after{content:"Preview only";margin-left:8px;border-radius:999px;background:#E2E8F0;color:#64748B;padding:3px 7px;font-size:.55rem;font-weight:950;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
@media (max-width:780px){
.guest-hero-note{
top:auto;
right:auto;
left:12px;
bottom:14px;
width:auto;
max-width:min(var(--layout-home-guest-note-width-mobile),calc(100% - 150px));
padding:7px 10px;
}
.guest-demo-insights .guest-demo-parent-grid,.guest-demo-locked-grid{grid-template-columns:1fr}
}
@media (max-width:540px){
.guest-hero-note{
right:auto;
left:10px;
bottom:12px;
width:auto;
max-width:min(var(--layout-home-guest-note-width-phone),calc(100% - 142px));
padding:var(--layout-home-guest-note-padding-compact);
}
.guest-hero-note strong{font-size:.58rem}
.guest-hero-note-copy span{font-size:.56rem}
.guest-hero-signup-cta{min-height:30px;padding:6px 8px;font-size:.62rem}
.guest-hero-signup-icon{width:16px;height:16px}
}
@media (orientation:landscape) and (max-height:540px){
.guest-hero-note{
top:10px;
right:10px;
left:auto;
bottom:auto;
width:min(var(--layout-home-guest-note-width-landscape),calc(100% - 150px));
max-width:min(var(--layout-home-guest-note-width-landscape),calc(100% - 150px));
padding:var(--layout-home-guest-note-padding-compact);
}
.hero-wrap:has(.guest-hero-note) .hero-title,
.hero-wrap:has(.guest-hero-note) .hero-sub{
max-width:calc(100% - var(--layout-home-guest-note-reserve-landscape)) !important;
}
}
.home-promo-card:hover{
transform:none !important;
box-shadow:0 8px 24px rgba(148,163,184,0.12), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
.home-fresh-progress-card:hover{
transform:none !important;
box-shadow:0 6px 24px rgba(14,165,233,0.1), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
.home-fresh-progress-list{
display:grid;
gap:var(--layout-home-dash-row-gap);
align-content:start;
}
.home-fresh-progress-row{
display:grid;
gap:4px;
padding:var(--layout-home-dash-row-padding);
border-radius:var(--right-panel-row-radius);
border:var(--layout-home-dash-row-border-width) solid var(--tone-home-row-border);
background:var(--tone-home-row-surface);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.76),0 3px 8px rgba(37,99,235,0.035);
}
.home-fresh-progress-head{
display:flex;
gap:var(--layout-home-dash-row-gap);
align-items:flex-start;
}
.home-fresh-progress-icon{
width:var(--layout-home-dash-icon-size);
height:var(--layout-home-dash-icon-size);
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:var(--layout-home-dash-icon-radius);
background:rgba(255,255,255,0.92);
box-shadow:0 3px 8px rgba(148,163,184,0.10);
font-size:var(--layout-home-dash-icon-font);
line-height:1;
}
.home-fresh-progress-icon-img,
.streak-icon-img{
width:100%;
height:100%;
display:block;
object-fit:contain;
flex:0 0 auto;
}
.home-fresh-progress-icon-img{
padding:1px;
}
.streak-icon-img--daily{
width:108%;
height:108%;
}
.streak-icon-img--hero{
width:78%;
height:78%;
}
.streak-icon-img--stat{
width:82%;
height:82%;
}
.home-fresh-progress-copy{
flex:1 1 auto;
min-width:0;
display:grid;
gap:1px;
}
.home-fresh-progress-title-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.home-fresh-progress-label{
min-width:0;
}
.home-fresh-progress-count{
flex-shrink:0;
letter-spacing:-0.02em;
color:#1F3652;
}
.home-fresh-progress-info{
color:#6B7280;
}
.home-fresh-progress-bar{
position:relative;
height:var(--layout-home-dash-bar-height);
border-radius:999px;
overflow:hidden;
border:1px solid rgba(201,217,251,0.68);
background:linear-gradient(180deg,#FDFEFF,#E7F0FB);
box-shadow:inset 0 1px 3px rgba(148,163,184,0.14);
}
.home-fresh-progress-bar-fill{
height:100%;
border-radius:999px;
transition:width .45s ease;
position:relative;
overflow:hidden;
}
.home-fresh-progress-bar-fill::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(255,255,255,0.32),rgba(255,255,255,0));
opacity:.75;
}
.home-fresh-progress-bar.has-progress .home-fresh-progress-bar-fill{
min-width:16px;
}
.home-fresh-progress-bar.is-empty::before{
content:"";
position:absolute;
left:4px;
top:50%;
width:12px;
height:4px;
transform:translateY(-50%);
border-radius:999px;
box-shadow:0 0 0 2px rgba(255,255,255,0.9);
}
.home-fresh-progress-row--story{
border-color:rgba(221,199,255,0.62);
background:linear-gradient(180deg,rgba(247,244,255,0.58),rgba(255,255,255,0.84));
}
.home-fresh-progress-row--story .home-fresh-progress-label{color:#6D28D9}
.home-fresh-progress-row--story .home-fresh-progress-icon{background:linear-gradient(135deg,#F3E8FF,#FDF4FF);color:#7C3AED}
.home-fresh-progress-row--story .home-fresh-progress-count{color:#7C3AED}
.home-fresh-progress-row--story .home-fresh-progress-bar{border-color:rgba(221,199,255,0.68);background:#F6F1FF}
.home-fresh-progress-row--story .home-fresh-progress-bar-fill{background:linear-gradient(90deg,#A855F7,#E879F9);box-shadow:none}
.home-fresh-progress-row--story .home-fresh-progress-bar.is-empty::before{background:#C084FC}
.home-fresh-progress-row--choice-adventure{
border-color:rgba(169,234,197,0.62);
background:linear-gradient(180deg,rgba(236,253,245,0.58),rgba(255,255,255,0.84));
}
.home-fresh-progress-row--choice-adventure .home-fresh-progress-label{color:#047857}
.home-fresh-progress-row--choice-adventure .home-fresh-progress-icon{background:linear-gradient(135deg,#ECFDF5,#F0FDF4);color:#059669}
.home-fresh-progress-row--choice-adventure .home-fresh-progress-count{color:#059669}
.home-fresh-progress-row--choice-adventure .home-fresh-progress-bar{border-color:rgba(169,234,197,0.68);background:#EEF9F3}
.home-fresh-progress-row--choice-adventure .home-fresh-progress-bar-fill{background:linear-gradient(90deg,#10B981,#34D399);box-shadow:none}
.home-fresh-progress-row--choice-adventure .home-fresh-progress-bar.is-empty::before{background:#34D399}
.home-fresh-progress-row--challenge{
border-color:rgba(201,219,255,0.62);
background:linear-gradient(180deg,rgba(239,246,255,0.58),rgba(255,255,255,0.84));
}
.home-fresh-progress-row--challenge .home-fresh-progress-label{color:#174D96}
.home-fresh-progress-row--challenge .home-fresh-progress-info{color:#4F74B8}
.home-fresh-progress-row--challenge .home-fresh-progress-icon{background:linear-gradient(135deg,#DBEAFE,#EFF6FF);color:#2563EB}
.home-fresh-progress-row--challenge .home-fresh-progress-count{color:#2563EB}
.home-fresh-progress-row--challenge .home-fresh-progress-bar{border-color:rgba(201,219,255,0.68);background:#EEF4FF}
.home-fresh-progress-row--challenge .home-fresh-progress-bar-fill{background:linear-gradient(90deg,#2563EB,#60A5FA);box-shadow:none}
.home-fresh-progress-row--challenge .home-fresh-progress-bar.is-empty::before{background:#60A5FA}
.home-fresh-progress-row--streak{
border-color:rgba(251,191,36,0.62);
background:linear-gradient(180deg,rgba(255,247,237,0.88),rgba(255,255,255,0.86));
}
.home-fresh-progress-row--streak .home-fresh-progress-label{color:#B45309}
.home-fresh-progress-row--streak .home-fresh-progress-info{color:#C26B14}
.home-fresh-progress-row--streak .home-fresh-progress-icon{background:radial-gradient(circle at 40% 35%,#FFF7ED 0%,#FDE68A 48%,#FB923C 100%);color:#D97706;filter:drop-shadow(0 3px 7px rgba(245,158,11,0.25))}
.home-fresh-progress-row--streak .home-fresh-progress-count{color:#D97706}
.home-fresh-progress-row--streak .home-fresh-progress-bar{border-color:rgba(250,213,138,0.68);background:#FFF6DF}
.home-fresh-progress-row--streak .home-fresh-progress-bar-fill{background:linear-gradient(90deg,#F97316,#F59E0B,#FACC15);box-shadow:none}
.home-fresh-progress-row--streak .home-fresh-progress-bar.is-empty::before{background:#F59E0B}
.home-fresh-progress-row.is-complete{
border-color:rgba(16,185,129,0.28);
background:linear-gradient(180deg,rgba(236,253,245,0.76),rgba(255,255,255,0.9));
}
.home-fresh-progress-row.is-complete .home-fresh-progress-info::after{
content:" ✓";
color:#059669;
}
.home-progress-combo-row{
position:relative;
padding:7px 0 8px;
}
.home-progress-combo-row + .home-progress-combo-row{
border-top:1px solid rgba(148,163,184,0.24);
}
.home-progress-combo-row .prog-row{
margin-bottom:6px;
}
.home-progress-card--combined .home-progress-note{
display:none;
}
.home-progress-card--combined .streak-inline{
display:flex;
align-items:center;
justify-content:flex-start;
gap:5px;
margin-top:4px;
}
.home-progress-card--combined .streak-inline--wins{
justify-content:flex-start;
}
.home-progress-card--combined .streak-chip{
min-height:22px;
padding:3px 7px;
font-size:.58rem;
line-height:1;
}
.home-progress-card--combined .streak-chip--reward{
background:linear-gradient(135deg,#E0F2FE,#D1FAE5);
border-color:#A7F3D0;
color:#047857;
}
.home-progress-card--combined .streak-sub{
display:none;
}
.home-progress-card--combined .prog-row{
margin-bottom:4px;
}
.home-progress-card--combined .prog-lbl{
font-size:.78rem;
}
.home-progress-card--combined .prog-num{
font-size:.66rem;
}
.home-progress-card--combined .prog-bar{
height:7px;
margin:4px 0;
}
.home-progress-combo-row--story .prog-lbl{
color:#6D28D9;
}
.home-progress-combo-row--story .prog-bar{
background:#F2E8FF;
border:1px solid #DDC7FF;
}
.home-progress-combo-row--story .prog-fill{
background:linear-gradient(90deg,#A855F7,#F472B6);
box-shadow:0 1px 6px rgba(168,85,247,0.28);
}
.home-progress-combo-row--choice-adventure .prog-lbl{
color:#047857;
}
.home-progress-combo-row--choice-adventure .prog-bar{
background:#E7F8EF;
border:1px solid #A9EAC5;
}
.home-progress-combo-row--choice-adventure .prog-fill{
background:linear-gradient(90deg,#10B981,#FBBF24);
box-shadow:0 1px 6px rgba(16,185,129,0.24);
}
.home-progress-combo-row--streak .prog-lbl{
color:#B45309;
}
.home-progress-combo-row--streak .prog-bar{
background:#FFF4D6;
border:1px solid #FAD58A;
}
.home-progress-combo-row--streak .prog-fill{
background:linear-gradient(90deg,#F59E0B,#FACC15);
box-shadow:0 1px 6px rgba(245,158,11,0.28);
}
.home-progress-combo-row--challenge .prog-lbl{
color:#174D96;
}
.home-progress-combo-row--challenge .prog-bar{
background:#E7F0FF;
border:1px solid #C9DBFF;
}
.home-progress-combo-row--challenge .prog-fill{
background:linear-gradient(90deg,#2563EB,#F59E0B);
box-shadow:0 1px 6px rgba(37,99,235,0.25);
}
.feature-card,.tips-card,.side-guide-card{border:2px solid var(--tone-panel-border-strong)}
.panel-h{font-size:0.82rem;font-weight:700;color:var(--text);margin-bottom:9px;display:flex;align-items:center;gap:4px;padding-bottom:9px;border-bottom:1px solid var(--border)}
/* Role journey box */
.role-journey-box{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;justify-content:center;gap:12px;min-height:var(--right-panel-role-journey-min-height);overflow:hidden;background:linear-gradient(135deg,rgba(255,251,235,0.9),rgba(239,246,255,0.92));border:var(--layout-home-dash-row-border-width) solid rgba(191,219,254,0.86);border-radius:var(--right-panel-radius);padding:14px 14px 12px;margin-bottom:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.75),0 10px 22px rgba(148,163,184,0.10)}
.role-journey-item{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.role-journey-item.role-journey-target .role-journey-name{color:#1D4ED8}
.role-journey-item.role-journey-target img,.role-journey-item.role-journey-target svg{opacity:0.78;filter:saturate(.86)}
.role-journey-lbl{font-size:var(--right-panel-caption-size);font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#7A8EA8}
.role-journey-name{color:#1F3652;margin-top:1px}
.role-journey-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:84px}
.role-journey-arrow{position:relative;font-size:1.15rem;color:#0F5A8A;flex-shrink:0;font-weight:900;width:40px;height:40px;border-radius:999px;background:linear-gradient(135deg,#DBEAFE,#FEF3C7);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(59,130,246,0.12),inset 0 1px 0 rgba(255,255,255,0.86)}
.role-journey-arrow-mark{line-height:1;transform:translateY(-1px)}
.role-journey-cue,
.role-journey-hook{
position:static;
width:100%;
max-width:112px;
transform:none;
text-align:center;
color:#0B4F79;
white-space:nowrap;
pointer-events:none;
letter-spacing:.02em;
font-weight:1000;
line-height:1.05;
text-shadow:0 1px 0 rgba(255,255,255,0.88);
}
.role-journey-cue{
font-size:.68rem;
color:#075985;
}
.role-journey-hook{
display:inline-flex;
justify-content:center;
align-items:center;
align-self:center;
width:auto;
max-width:none;
padding:3px 7px;
border-radius:999px;
background:linear-gradient(135deg,#FFF7ED,#FEF3C7);
border:1px solid rgba(245,158,11,0.28);
color:#9A3412;
font-size:.6rem;
box-shadow:0 3px 8px rgba(180,83,9,0.08);
}
.role-journey-glow{display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;animation:currentRoleGlow 2.2s ease-in-out infinite alternate;background:transparent}
@keyframes currentRoleGlow{0%{filter:drop-shadow(0 0 8px rgba(255,213,74,0.62)) drop-shadow(0 0 16px rgba(245,158,11,0.30)) drop-shadow(0 5px 11px rgba(15,23,42,0.12));transform:scale(1)}100%{filter:drop-shadow(0 0 14px rgba(255,213,74,0.86)) drop-shadow(0 0 28px rgba(245,158,11,0.46)) drop-shadow(0 7px 16px rgba(15,23,42,0.16));transform:scale(1.045)}}
/* Streak card */
.home-streak-card{background:linear-gradient(135deg,var(--tone-streak-bg-start),var(--tone-streak-bg-end));border:2px solid var(--tone-streak-border);box-shadow:0 10px 24px rgba(245,158,11,0.12), inset 0 1px 0 rgba(255,255,255,0.8)}
.home-streak-card::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23B45309' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M35 12c2 9-7 11-4 19 1 3 4 5 8 5 7 0 11-6 11-13 0-8-6-14-13-17'/%3E%3Cpath d='M28 28c-7 4-12 10-12 17 0 8 7 14 16 14s16-6 16-14c0-4-2-8-5-11'/%3E%3Cpath d='M28 45c0 3 2 5 4 5s4-2 4-5c0-4-4-5-4-9-3 2-4 5-4 9Z'/%3E%3C/svg%3E")}
.streak-card-top{display:flex;align-items:center;gap:10px}
.streak-fire-icon{font-size:2rem;line-height:1;flex-shrink:0}
.streak-card-body{flex:1;min-width:0}
.streak-card-title{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#92400E;margin-bottom:1px}
.streak-card-count{font-size:1.1rem;font-weight:900;color:#B45309}
/* Hero chips label */
.hero-chips-label{font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#7A5A25;margin-bottom:5px;margin-top:36px}
.cur-pos-box{background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;border-radius:var(--r-xs);padding:7px 9px;text-align:center;font-weight:700;font-size:0.78rem;line-height:1.4;margin-bottom:9px}
.cur-pos-lbl{font-size:0.62rem;opacity:0.8;margin-bottom:1px}
.prow{display:flex;align-items:center;gap:var(--layout-home-dash-row-gap);padding:var(--layout-home-dash-row-padding);margin-bottom:var(--layout-home-dash-row-gap);border-radius:var(--layout-home-dash-row-radius);transition:background 0.2s;border:1px solid var(--tone-home-row-border);background:var(--tone-home-row-surface)}
.home-promo-card .prow:nth-of-type(2){background:linear-gradient(135deg,rgba(255,251,235,0.58),rgba(255,255,255,0.82))}
.home-promo-card .prow:nth-of-type(3){background:linear-gradient(135deg,rgba(236,253,245,0.54),rgba(255,255,255,0.82))}
.home-promo-card .prow:nth-of-type(4){background:linear-gradient(135deg,rgba(245,243,255,0.58),rgba(255,255,255,0.82))}
.home-promo-card .prow:nth-of-type(5){background:linear-gradient(135deg,rgba(253,242,248,0.58),rgba(255,255,255,0.82))}
.prow.row-met{background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.2)}
.pem{font-size:var(--layout-home-dash-icon-font);width:var(--layout-home-dash-icon-size);height:var(--layout-home-dash-icon-size);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--layout-home-dash-icon-radius);background:#fff;box-shadow:0 4px 10px rgba(148,163,184,0.10)}
.plbl{font-size:var(--layout-home-dash-title-text-font);color:var(--tone-home-copy-body);min-width:56px;font-weight:800}
.plbl.plbl-met{color:var(--mint);font-weight:700}
.pbar{flex:1;height:var(--layout-home-dash-bar-height);min-width:0;background:var(--sky-lt);border-radius:999px;overflow:hidden}
.pbar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--sky),var(--mint));transition:width 0.48s ease;box-shadow:0 0 6px rgba(16,185,129,0.5)}
.pnums{font-size:0.7rem;font-weight:800;white-space:nowrap;min-width:56px;text-align:right;flex-shrink:0}
.pnums.met{color:var(--mint)}.pnums.unmet{color:var(--coral)}
.home-promo-card .home-promo-stat-row{
display:grid;
grid-template-columns:var(--right-panel-stat-icon-size) minmax(0,1fr);
align-items:center;
gap:var(--right-panel-stat-row-gap);
padding:var(--right-panel-stat-row-padding);
border-width:var(--layout-home-dash-row-border-width);
background:var(--tone-home-row-surface);
border-radius:var(--right-panel-row-radius);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.72),0 4px 10px rgba(37,99,235,0.035);
box-sizing:border-box;
height:var(--right-panel-promo-stat-row-height);
min-height:var(--right-panel-promo-stat-row-height);
margin-bottom:0;
}
.home-promo-card .home-promo-stat-row.row-met{
background:linear-gradient(135deg,rgba(236,253,245,0.58),rgba(255,255,255,0.82));
border-color:rgba(16,185,129,0.18);
}
.home-promo-card .promo-stat-copy{
display:grid;
gap:4px;
min-width:0;
}
.home-promo-card .promo-stat-title-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-width:0;
}
.home-promo-card .pem{
width:var(--right-panel-stat-icon-size);
height:var(--right-panel-stat-icon-size);
border-radius:var(--right-panel-stat-icon-radius);
background:transparent;
box-shadow:none;
}
.home-promo-card .plbl{
min-width:0;
font-size:var(--right-panel-stat-label-size);
color:var(--tone-home-copy-title);
}
.home-promo-card .pnums{
min-width:0;
font-size:var(--right-panel-stat-value-size);
text-align:right;
padding-left:0;
letter-spacing:-.02em;
}
.home-promo-card .pbar{
width:100%;
height:var(--right-panel-stat-bar-height);
background:linear-gradient(180deg,#FDFEFF,#E7F0FB);
border:1px solid rgba(201,217,251,0.68);
border-radius:999px;
box-shadow:inset 0 1px 3px rgba(148,163,184,0.14);
}
.home-promo-card .pbar-fill{
transition:none;
position:relative;
overflow:hidden;
}
.home-promo-card .pbar-fill::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(255,255,255,0.32),rgba(255,255,255,0));
}
.home-promo-stat-row--coins{border-color:rgba(253,230,138,0.62);background:linear-gradient(180deg,rgba(255,251,235,0.62),rgba(255,255,255,0.84))}
.home-promo-stat-row--team-skills{border-color:rgba(169,234,197,0.62);background:linear-gradient(180deg,rgba(236,253,245,0.58),rgba(255,255,255,0.84))}
.home-promo-stat-row--thinking-skills{border-color:rgba(221,199,255,0.62);background:linear-gradient(180deg,rgba(245,243,255,0.58),rgba(255,255,255,0.84))}
.home-promo-stat-row--bossPoints{border-color:rgba(251,207,232,0.62);background:linear-gradient(180deg,rgba(253,242,248,0.58),rgba(255,255,255,0.84))}
.home-promo-stat-row--coins .plbl,.home-promo-stat-row--coins .pnums{color:#B45309}
.home-promo-stat-row--team-skills .plbl,.home-promo-stat-row--team-skills .pnums{color:#047857}
.home-promo-stat-row--thinking-skills .plbl,.home-promo-stat-row--thinking-skills .pnums{color:#6D28D9}
.home-promo-stat-row--bossPoints .plbl,.home-promo-stat-row--bossPoints .pnums{color:#BE185D}
.promo-ready-banner{background:linear-gradient(135deg,#065F46,#047857);color:#fff;border-radius:10px;padding:8px 12px;text-align:center;font-size:0.78rem;font-weight:800;margin-top:10px;animation:pulseBanner 1.5s ease-in-out infinite alternate;letter-spacing:0.3px}
@keyframes pulseBanner{0%{box-shadow:0 0 8px rgba(52,211,153,0.4)}100%{box-shadow:0 0 18px rgba(52,211,153,0.75)}}
.rw-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border)}
.rw-row:last-child{border:none}
.rw-info{flex:1}
.rw-name{font-size:0.76rem;font-weight:700;color:var(--text)}
.rw-sub{font-size:0.65rem;color:var(--muted2)}
.rw-btn{background:var(--sky-lt);color:var(--sky3);border:1.5px solid var(--sky-md);border-radius:50px;padding:4px 9px;font-size:0.7rem;font-weight:700;cursor:pointer;transition:all 0.12s;white-space:nowrap}
.rw-btn:hover{background:var(--sky);color:#fff}
.rw-btn:disabled{opacity:0.4;cursor:not-allowed;background:var(--border);border-color:var(--border);color:var(--muted2)}
.safety-active{background:var(--mint-lt);color:#065F46;border:1.5px solid var(--mint-md);border-radius:var(--r-xs);padding:5px 7px;font-size:0.7rem;font-weight:700;text-align:center;margin-top:4px}
/* Compact 3-column reward grid */
.rw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:2px 0}
.rw-card{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;padding:6px 4px;text-align:center}
.rw-card-icon{font-size:1.1rem;line-height:1}
.rw-card-name{font-size:0.6rem;font-weight:700;color:var(--text);line-height:1.2}
.rw-card-effect{font-size:0.55rem;color:var(--muted2);line-height:1.2}
.rw-card-cost{font-size:0.6rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:2px;justify-content:center}
.rw-card-btn{background:var(--sky-lt);color:var(--sky3);border:1.5px solid var(--sky-md);border-radius:50px;padding:2px 8px;font-size:0.6rem;font-weight:700;cursor:pointer;transition:all 0.12s;margin-top:2px;width:100%}
.rw-card-btn:hover{background:var(--sky);color:#fff}
.rw-card-btn:disabled{opacity:0.4;cursor:not-allowed;background:var(--border);border-color:var(--border);color:var(--muted2)}
/* Vertical reward rows */
.rw-list{display:flex;flex-direction:column;gap:4px}
.rw-row2{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
.rw-row2:last-child{border-bottom:none}
.rw-left{flex:1;min-width:0}
.rw-title{font-size:0.88rem;font-weight:700;color:var(--text);margin-bottom:3px}
.rw-meta{font-size:0.74rem;color:var(--muted2);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rw-buy-btn{background:var(--sky-lt);color:var(--sky3);border:1.5px solid var(--sky-md);border-radius:50px;padding:5px 14px;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.12s;white-space:nowrap;flex-shrink:0}
.rw-buy-btn:hover{background:var(--sky);color:#fff}
.rw-buy-btn:disabled{opacity:0.4;cursor:not-allowed;background:var(--border);border-color:var(--border);color:var(--muted2)}
.rewards-screen{max-width:100%;width:100%}
.rewards-shell{display:flex;flex-direction:column;gap:var(--layout-rewards-shell-gap);width:100%}
.rewards-hero{display:flex;align-items:stretch;justify-content:space-between;gap:var(--layout-rewards-hero-gap);background:linear-gradient(135deg,#0f766e 0%,#155e75 48%,#1d4ed8 100%);border-radius:var(--layout-rewards-hero-radius);padding:var(--layout-rewards-hero-padding);box-shadow:0 10px 28px rgba(14,116,144,0.18);position:relative;overflow:hidden}
.rewards-hero::before{content:'✦ ✧ ★';position:absolute;top:10px;right:16px;font-size:.72rem;letter-spacing:6px;color:rgba(255,255,255,.24)}
.rewards-hero::after{content:'';position:absolute;bottom:-32px;right:-18px;width:118px;height:118px;border-radius:50%;background:rgba(255,255,255,.08)}
.rewards-hero-copy{position:relative;z-index:1;flex:1;min-width:0}
.rewards-hero-kicker{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:4px 10px;font-size:.66rem;font-weight:800;color:#ECFEFF;text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px}
.rewards-hero-title{font-size:1.28rem;font-weight:900;color:#fff;line-height:1.05;margin-bottom:4px}
.rewards-hero-sub{font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.88);max-width:440px}
.rewards-balance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-rewards-balance-gap);min-width:var(--layout-rewards-balance-min-width);max-width:var(--layout-rewards-balance-max-width);position:relative;z-index:1}
.rewards-balance-card{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.18);border-radius:var(--layout-rewards-balance-card-radius);padding:var(--layout-rewards-balance-card-padding);color:#fff;backdrop-filter:blur(4px);min-width:0}
.rewards-balance-icon{width:var(--layout-rewards-balance-icon-size);height:var(--layout-rewards-balance-icon-size);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.15rem}
.rewards-balance-label{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:rgba(255,255,255,.72)}
.rewards-balance-value{font-size:1.06rem;font-weight:900;color:#fff;line-height:1.05}
.rewards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-rewards-grid-gap)}
.rewards-shop-card{background:#fff;border-radius:var(--layout-rewards-shop-card-radius);padding:var(--layout-rewards-shop-card-padding);border:2px solid #E5E7EB;box-shadow:0 8px 22px rgba(15,23,42,.08);display:flex;flex-direction:column;gap:8px;min-width:0;position:relative;overflow:hidden}
.rewards-shop-card::before{content:'';position:absolute;top:-30px;right:-24px;width:96px;height:96px;border-radius:50%;opacity:.14}
.rewards-shop-card--spin{border-color:#FCD34D;box-shadow:0 8px 22px rgba(245,158,11,.12)}
.rewards-shop-card--spin::before{background:#F59E0B}
.rewards-shop-card--boss{border-color:#C4B5FD;box-shadow:0 8px 22px rgba(124,58,237,.12)}
.rewards-shop-card--boss::before{background:#7C3AED}
.rewards-shop-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--layout-rewards-shop-top-gap);position:relative;z-index:1}
.rewards-shop-badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;background:#F8FAFC;color:#475569}
.rewards-shop-cost{display:block;max-width:138px;font-size:.7rem;font-weight:800;color:var(--text);line-height:1.35;text-align:right}
.rewards-shop-icon{font-size:2rem;line-height:1;position:relative;z-index:1;width:1.25em;height:1.25em;display:flex;align-items:center;justify-content:center}
.rewards-shop-icon img{width:100%;height:100%;object-fit:contain;display:block}
.rewards-shop-title{font-size:1rem;font-weight:900;color:var(--text);line-height:1.1;position:relative;z-index:1}
.rewards-shop-desc{font-size:.72rem;color:var(--muted2);line-height:1.5;position:relative;z-index:1}
.rewards-shop-pool{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.rewards-pill{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:999px;background:#F8FAFC;border:1px solid #E2E8F0;font-size:.62rem;font-weight:700;color:#475569;line-height:1.2}
.rewards-progress-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.68rem;font-weight:800;color:var(--text);position:relative;z-index:1}
.rewards-progress-label{color:var(--muted2);text-transform:uppercase;letter-spacing:.6px}
.rewards-progress-value{color:#6D28D9}
.rewards-progress-bar{height:8px;border-radius:999px;background:#EDE9FE;overflow:hidden;position:relative;z-index:1}
.rewards-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#8B5CF6,#C084FC);transition:width .3s ease}
.rewards-shop-btn{margin-top:auto;background:linear-gradient(135deg,#0EA5E9,#2563EB);color:#fff;border:none;border-radius:var(--layout-rewards-shop-button-radius);padding:var(--layout-rewards-shop-button-padding);font-size:.78rem;font-weight:800;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;box-shadow:0 8px 18px rgba(37,99,235,.18);position:relative;z-index:1}
.rewards-shop-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(37,99,235,.24)}
.rewards-shop-btn--boss{background:linear-gradient(135deg,#7C3AED,#A855F7);box-shadow:0 8px 18px rgba(124,58,237,.18)}
.rewards-shop-btn--boss:hover{box-shadow:0 10px 20px rgba(124,58,237,.24)}
.rewards-shop-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.rewards-footnote{font-size:.68rem;color:var(--muted2);text-align:center;padding:0 6px}
.lucky-spin-ov{position:fixed;inset:0;z-index:10020;background:rgba(15,23,42,.58);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px}
.lucky-spin-box{width:min(100%,420px);background:linear-gradient(135deg,#0f766e 0%,#155e75 48%,#1d4ed8 100%);border-radius:24px;padding:16px;box-shadow:0 18px 42px rgba(15,23,42,.32);color:#fff;position:relative;overflow:hidden}
.lucky-spin-box::before{content:'✦ ✧ ★';position:absolute;top:12px;right:16px;font-size:.72rem;letter-spacing:6px;color:rgba(255,255,255,.26)}
.lucky-spin-top{position:relative;z-index:1;margin-bottom:12px}
.lucky-spin-kicker{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:4px 10px;font-size:.64rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;margin-bottom:8px}
.lucky-spin-title{font-size:1.12rem;font-weight:900;line-height:1.1}
.lucky-spin-reel-wrap{position:relative;z-index:1;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.18);border-radius:18px;padding:14px 12px 12px;margin-bottom:12px}
.lucky-spin-pointer{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:.9rem;color:#FDE68A}
.lucky-spin-reel{min-height:96px;display:flex;align-items:center;justify-content:center}
.lucky-spin-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;animation:luckySpinPulse .18s ease}
.lucky-spin-card-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.lucky-spin-card-name{font-size:.74rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.84)}
.lucky-spin-card-value{font-size:1.1rem;font-weight:900;color:#fff}
.lucky-spin-result{position:relative;z-index:1;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.2);border-radius:18px;padding:12px 12px 10px;text-align:center;margin-bottom:12px;animation:slideUp .28s ease}
.lucky-spin-result-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px}
.lucky-spin-result-label{font-size:.68rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:3px}
.lucky-spin-result-title{font-size:1.05rem;font-weight:900;color:#fff;margin-bottom:3px}
.lucky-spin-result-amount{font-size:1.18rem;font-weight:900;color:#FDE68A;margin-bottom:4px}
.lucky-spin-result-detail{font-size:.72rem;line-height:1.45;color:rgba(255,255,255,.84)}
.lucky-spin-btn{width:100%;border:none;border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.18);color:#fff;font-size:.8rem;font-weight:800;cursor:pointer;position:relative;z-index:1;transition:transform .12s ease,opacity .12s ease}
.lucky-spin-btn:disabled{opacity:.7;cursor:wait}
.lucky-spin-btn:not(:disabled):hover{transform:translateY(-1px);background:rgba(255,255,255,.28)}
.lucky-spin-done .lucky-spin-reel-wrap{box-shadow:0 0 0 2px rgba(253,230,138,.35)}
.lucky-spin-claiming .lucky-spin-box{animation:luckySpinClaimExit .42s ease forwards}
.lucky-spin-claiming .lucky-spin-result{animation:luckySpinClaimPop .28s ease}
.lucky-spin-claiming .lucky-spin-btn{background:rgba(255,255,255,.3);transform:translateY(-1px) scale(1.01)}
@keyframes luckySpinPulse{0%{transform:scale(.92);opacity:.45}100%{transform:scale(1);opacity:1}}
@keyframes luckySpinClaimPop{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes luckySpinClaimExit{0%{transform:scale(1);opacity:1}100%{transform:scale(.96);opacity:0}}
.boss-boost-reward-pop{position:fixed;inset:0;z-index:10025;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:18px}
.boss-boost-reward-card{min-width:min(100%,320px);max-width:360px;background:linear-gradient(135deg,rgba(76,29,149,.96),rgba(124,58,237,.94) 54%,rgba(37,99,235,.94));border:1.5px solid rgba(255,255,255,.22);border-radius:22px;padding:16px 18px 15px;color:#fff;text-align:center;box-shadow:0 22px 48px rgba(15,23,42,.34);animation:bossBoostRewardIn .28s cubic-bezier(.3,1.35,.5,1) forwards}
.boss-boost-reward-icon{width:50px;height:50px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.boss-boost-reward-kicker{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:4px}
.boss-boost-reward-title{font-size:1.18rem;font-weight:900;color:#FDE68A;line-height:1.05;margin-bottom:4px}
.boss-boost-reward-copy{font-size:.76rem;font-weight:700;line-height:1.35;color:rgba(255,255,255,.9)}
.boss-boost-reward-pop--closing .boss-boost-reward-card{animation:bossBoostRewardOut .26s ease forwards}
@keyframes bossBoostRewardIn{0%{transform:translateY(12px) scale(.94);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes bossBoostRewardOut{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-8px) scale(.97);opacity:0}}
/* ── RESULT ── */
.res-center{text-align:center}
.res-icon{font-size:3.2rem;display:block;margin:0 auto 9px;animation:bounceIn 0.5s cubic-bezier(.3,1.5,.5,1)}
.res-title{font-size:1.25rem;font-weight:800;margin-bottom:5px;color:var(--sky-dk)}
.res-text{font-size:0.87rem;color:var(--muted);line-height:1.65;margin-bottom:14px}
.chips{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:13px}
.chip{border-radius:50px;padding:5px 12px;font-weight:700;font-size:0.8rem;display:flex;align-items:center;gap:4px}
.chip.pos{background:var(--green-lt);color:#166534}
.chip.neg{background:var(--coral-lt);color:#991B1B}
.chip.neu{background:var(--border);color:var(--muted)}
.stat-now{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}
.sn{border-radius:14px;padding:16px 12px;text-align:center;border:2px solid rgba(255,255,255,0.3);min-height:100px;display:flex;flex-direction:column;justify-content:center}
.sn.c{background:var(--amber-lt)}.sn.u{background:var(--sky-lt)}.sn.h{background:var(--purple-lt)}.sn.bp{background:#FFF3CD}
.sn-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%}
.sn-desc{font-size:0.9rem;font-weight:600;color:var(--text);text-align:center;line-height:1.4;display:flex;align-items:center;justify-content:center}
.sn-val{font-size:1.4rem;font-weight:900;line-height:1}
.sn-change-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:20px;font-weight:700;font-size:0.8rem}
.sn-change-emoji{font-size:1rem;display:inline-block}
.sn-change-amt{min-width:22px;text-align:center}
.sn-change-badge.pos{background:#D1FAE5;color:#059669}
.sn-change-badge.neg{background:#FEE2E2;color:#DC2626}
.sn-change-badge.neu{background:#E2E8F0;color:#64748B;animation:steadyPulse 2s ease-in-out infinite}
@keyframes steadyPulse{0%,100%{transform:scale(1);opacity:0.8}50%{transform:scale(1.05);opacity:1}}
.sn-lbl{font-size:0.7rem;font-weight:600;color:var(--muted)}
.sn.c .sn-val{color:#92400E}.sn.c .sn-lbl{color:#B45309}
.sn.u .sn-val{color:var(--sky3)}.sn.u .sn-lbl{color:var(--sky2)}
.sn.h .sn-val{color:#5B21B6}.sn.h .sn-lbl{color:#7C3AED}
.sn.bp .sn-val{color:#B8860B}.sn.bp .sn-lbl{color:#DAA520}
/* ── GAMIFIED RESULT REWARD CARDS ── */
.res-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;margin:0 auto 12px;animation:resBounce 0.6s cubic-bezier(.3,1.5,.5,1);box-sizing:border-box;border:4px solid transparent}
.res-header-win{background:linear-gradient(135deg,#D1FAE5,#A7F3D0);border-color:#10B981;box-shadow:0 0 28px rgba(16,185,129,0.4)}
.res-header-loss{background:linear-gradient(135deg,#FEE2E2,#FECACA);border-color:#EF4444;box-shadow:0 0 28px rgba(239,68,68,0.25)}
.res-icon-big{font-size:2.6rem;line-height:1}
.res-icon-wrap .scenario-icon-img{width:68%;height:68%}
@keyframes resBounce{0%{transform:scale(0) rotate(-15deg);opacity:0}60%{transform:scale(1.2) rotate(5deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.res-bonus{background:var(--mint-lt);color:#065F46;border-radius:50px;padding:4px 14px;font-size:0.75rem;font-weight:700;display:inline-block;margin-bottom:12px;animation:slideUp 0.4s ease 0.3s both}
.rw-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.rw-card{border-radius:18px;padding:16px 12px;text-align:center;position:relative;overflow:hidden;opacity:0;animation:rwCardIn 0.5s cubic-bezier(.3,1.5,.5,1) both}
.rw-card.gain{background:linear-gradient(135deg,#DCFCE7,#BBF7D0);border:2px solid #22C55E;box-shadow:0 4px 16px rgba(34,197,94,0.25)}
.rw-card.loss{background:linear-gradient(135deg,#FEE2E2,#FECACA);border:2px solid #F87171;box-shadow:0 4px 16px rgba(248,113,113,0.2);animation:rwCardIn 0.5s cubic-bezier(.3,1.5,.5,1) both,rwShake 0.5s ease 0.6s both}
.rw-card.neutral{background:linear-gradient(135deg,#F1F5F9,#E2E8F0);border:2px solid #CBD5E1}
@keyframes rwCardIn{0%{opacity:0;transform:scale(0.6) translateY(20px)}70%{transform:scale(1.06) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes rwShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.rw-card-icon{font-size:1.8rem;margin-bottom:4px}
.rw-card-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:4px}
.rw-card-val{font-size:1.6rem;font-weight:900;color:var(--text);line-height:1;margin-bottom:6px}
.rw-card-change{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-weight:800;font-size:0.9rem}
.rw-card.gain .rw-card-change{background:#16A34A;color:#fff}
.rw-card.loss .rw-card-change{background:#DC2626;color:#fff}
.rw-card.neutral .rw-card-change{background:#94A3B8;color:#fff}
.rw-arrow{font-size:0.85rem}
.rw-arrow.arrow-up{animation:arrowBounce 0.8s ease 0.5s both}
@keyframes arrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.rw-burst{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.9);transform:translate(-50%,-50%) scale(0);animation:burstOut 0.6s ease 0.2s both}
@keyframes burstOut{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(-50%,-50%) scale(12);opacity:0}}
.res-continue-btn{margin-top:4px;animation:slideUp 0.4s ease 0.7s both}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
/* ── UNIFIED LESSON CARD ── */
.lesson-card{position:relative;border-radius:18px;margin-bottom:10px;overflow:hidden;animation:slideUp 0.4s ease 0.4s both;box-shadow:0 10px 28px rgba(15,23,42,0.12);text-align:left}
.lesson-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at top right,rgba(255,255,255,0.34),transparent 34%)}
.lesson-card-header{display:flex;align-items:center;gap:10px;padding:11px 13px}
.lesson-card.correct .lesson-card-header{background:linear-gradient(135deg,#D9F99D,#86EFAC 58%,#A7F3D0);border:none;border-radius:18px 18px 0 0}
.lesson-card.wrong .lesson-card-header{background:linear-gradient(135deg,#FECACA,#FDA4AF 58%,#FECDD3);border:none;border-radius:18px 18px 0 0}
.lc-verdict-ico{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1;flex-shrink:0;background:rgba(255,255,255,0.78);box-shadow:0 6px 14px rgba(15,23,42,0.12)}
.lc-header-text{flex:1;min-width:0}
.lc-verdict-text{font-size:0.92rem;font-weight:900;line-height:1.1;margin-bottom:2px}
.lesson-card.correct .lc-verdict-text{color:#065F46}
.lesson-card.wrong .lc-verdict-text{color:#991B1B}
.lc-badge{display:inline-flex;align-items:center;gap:5px;font-size:0.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#334155;background:rgba(255,255,255,0.7);padding:3px 7px;border-radius:999px}
.lesson-card-body{padding:11px 12px;border:none;border-radius:0 0 18px 18px}
.lesson-card.correct .lesson-card-body{background:linear-gradient(180deg,#F0FDF4 0%,#ECFDF5 100%)}
.lesson-card.wrong .lesson-card-body{background:linear-gradient(180deg,#FFF8F7 0%,#FFF1F2 100%)}
.lc-section{background:rgba(255,255,255,0.85);border:1px solid rgba(255,255,255,0.8);border-radius:14px;padding:8px 10px;box-shadow:0 4px 12px rgba(148,163,184,0.12)}
.lc-section + .lc-section{margin-top:6px}
.lc-section-label{font-size:0.55rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.lc-section-copy{font-size:0.79rem;font-weight:800;line-height:1.26}
.lc-step-list{display:grid;gap:5px}
.lc-step-item{display:flex;align-items:flex-start;gap:7px}
.lc-step-num{flex-shrink:0;width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:0.62rem;font-weight:900;background:#DBEAFE;color:#1D4ED8;box-shadow:inset 0 -1px 0 rgba(255,255,255,0.55)}
.lc-step-text{font-size:0.76rem;font-weight:800;line-height:1.2;color:#0F172A}
.lesson-card.correct .lc-step-text{color:#166534}
.lesson-card.wrong .lc-section--wrong .lc-step-num{background:#FECDD3;color:#B91C1C}
.lesson-card.wrong .lc-section--wrong .lc-step-text{color:#7F1D1D}
.lesson-card.wrong .lc-section--best .lc-step-num{background:#DCFCE7;color:#166534}
.lesson-card.wrong .lc-section--best .lc-step-text{color:#166534}
.lesson-card--sequence .lesson-card-body{display:grid;gap:6px}
.lesson-card--sequence .lc-section + .lc-section{margin-top:0}
.lesson-card--sequence .lc-section-label{margin-bottom:5px}
.lesson-card.correct .lc-section{background:rgba(255,255,255,0.92)}
.lesson-card.correct .lc-section--best{background:linear-gradient(135deg,#ECFCCB,#FFFFFF);box-shadow:0 8px 18px rgba(74,222,128,0.15)}
.lesson-card.wrong .lc-section--wrong{background:linear-gradient(135deg,#FFF1F2,#FFFFFF)}
.lesson-card.wrong .lc-section--best{background:linear-gradient(135deg,#FEE2E2,#FFFFFF)}
.lesson-card.correct .lc-section-label,.lesson-card.correct .lc-section-copy{color:#065F46}
.lesson-card.wrong .lc-section--wrong .lc-section-label{color:#B91C1C}
.lesson-card.wrong .lc-section--wrong .lc-section-copy{color:#7F1D1D}
.lesson-card.wrong .lc-section--best{background:linear-gradient(135deg,#ECFCCB,#FFFFFF)}
.lesson-card.wrong .lc-section--best .lc-section-label{color:#166534}
.lesson-card.wrong .lc-section--best .lc-section-copy{color:#166534}
.lesson-card .lc-section--why .lc-section-label{color:#475569}
.lesson-card.correct .lc-section--why .lc-section-copy{color:#166534}
.lesson-card.wrong .lc-section--why{background:linear-gradient(135deg,#F0FDF4,#FFFFFF)}
.lesson-card.wrong .lc-section--why .lc-section-label{color:#166534}
.lesson-card.wrong .lc-section--why .lc-section-copy{color:#166534}
/* ── PLAY RESULT SCREEN: COMPACT LAYOUT ── */
.play-result{
border:2px solid #60A5FA;
box-shadow:0 18px 34px rgba(37,99,235,0.14), inset 0 0 0 1px rgba(255,255,255,0.8);
background:
radial-gradient(circle at top right,rgba(191,219,254,0.45),transparent 28%),
radial-gradient(circle at bottom left,rgba(125,211,252,0.2),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#F3F9FF 100%);
}
.play-result.play-result--compact{max-width:var(--layout-result-max-width);margin:0 auto;padding:var(--layout-result-compact-padding);display:flex;align-items:center;justify-content:center}
.play-result.play-result--compact .res-center{width:100%;max-width:var(--layout-result-inner-max-width)}
.play-result.play-result--compact .res-title{margin-bottom:4px}
.play-result.play-result--compact .challenge-finish-points--result{margin-bottom:8px}
.result-points-pill{display:inline-flex;align-items:center;gap:3px;padding:7px 9px;border-radius:999px;background:#fff;border:1.5px solid #CFE5FB;font-size:.8rem;font-weight:800;color:#0F4C81}
.result-points-pill svg,
.result-points-pill img{width:30px !important;height:30px !important;min-width:30px !important;flex:0 0 30px !important}
/* On mobile: keep 2-col reward grid but compact padding */
.play-result .rw-card{border-radius:12px;padding:10px 8px}
.play-result .rw-card-icon{font-size:1.4rem;margin-bottom:2px}
.play-result .rw-card-label{font-size:0.62rem;margin-bottom:2px}
.play-result .rw-card-val{font-size:1.2rem;margin-bottom:4px}
.play-result .rw-card-change{padding:2px 8px;font-size:0.95rem}
.play-result .res-icon-wrap{width:54px;height:54px;margin-bottom:6px}
.play-result .res-icon-big{font-size:1.8rem}
.play-result .res-title{font-size:1rem;margin-bottom:3px}
.play-result .rw-cards-grid{gap:8px;margin-bottom:10px}
.play-result .lesson-card{margin-bottom:8px}
.play-result .lesson-card-body{padding:9px 10px}
.play-result .lc-section{padding:6px 8px}
.play-result .lc-section-label{font-size:0.54rem}
.play-result .lc-section-copy{font-size:0.74rem;line-height:1.22}
.play-result .lc-step-list{gap:4px}
.play-result .lc-step-item{gap:6px}
.play-result .lc-step-num{width:18px;height:18px;font-size:0.56rem}
.play-result .lc-step-text{font-size:0.72rem;line-height:1.18}
.go-btn.go-btn--submit{background:linear-gradient(135deg,#22C55E,#16A34A);box-shadow:0 8px 18px rgba(34,197,94,0.24)}
.go-btn.go-btn--submit:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(34,197,94,0.28)}
.go-btn.go-btn--submit:disabled{background:linear-gradient(135deg,#94A3B8,#64748B);box-shadow:none}
/* On desktop: 4-col horizontal strip for reward cards */
@media(min-width:600px){
.play-result .rw-cards-grid{grid-template-columns:repeat(4,1fr)}
}
/* Challenge round result: adaptive */
.challenge-round-result{
max-width:var(--layout-challenge-round-result-max-width);
margin:0 auto;
padding:var(--layout-challenge-round-result-padding);
max-height:none;
overflow:hidden;
border:2px solid #60A5FA;
box-shadow:0 18px 34px rgba(37,99,235,0.14), inset 0 0 0 1px rgba(255,255,255,0.8);
background:
radial-gradient(circle at top right,rgba(191,219,254,0.45),transparent 28%),
radial-gradient(circle at bottom left,rgba(253,230,138,0.18),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#F4FAFF 100%);
}
.challenge-round-result--compact{display:flex;flex-direction:column;justify-content:flex-start}
.challenge-round-result .result-grid{gap:var(--layout-challenge-round-grid-gap);margin-bottom:12px}
.challenge-round-result .result-card{padding:var(--layout-challenge-round-card-padding)}
.challenge-round-result .result-avatar{width:var(--layout-challenge-round-avatar-size);height:var(--layout-challenge-round-avatar-size);margin-bottom:6px}
.challenge-round-result .result-score-summary{padding:var(--layout-challenge-round-score-padding);margin-bottom:12px}
.challenge-round-result .result-header{margin-bottom:8px;font-size:1rem;text-align:center}
.challenge-finish-scoreboard--round{margin-bottom:8px;padding:var(--layout-challenge-round-score-padding)}
.challenge-finish-scoreboard--round .challenge-finish-score-num{font-size:2rem;margin-bottom:0}
.challenge-finish-scoreboard--round .challenge-finish-score-side{padding:10px 8px}
.challenge-finish-scoreboard--round .challenge-finish-score-avatar{width:36px;height:36px;margin-bottom:4px}
.challenge-finish-scoreboard--round .challenge-finish-score-side--you{background:linear-gradient(180deg,#FFFFFF,#F0F9FF)}
.challenge-finish-scoreboard--round .challenge-finish-score-side--boss{background:linear-gradient(180deg,#FFFFFF,#FFF7ED)}
.challenge-finish-score-avatar--round{width:50px !important;height:50px !important;box-shadow:0 10px 20px rgba(15,76,129,0.12)}
.challenge-finish-score-avatar--you{border:2px solid #38BDF8;background:linear-gradient(135deg,#E0F2FE,#FFFFFF)}
.challenge-finish-score-avatar--boss{border:2px solid #F97316;background:linear-gradient(135deg,#FFEDD5,#FFFFFF)}
.challenge-finish-vs--round{align-self:center;padding:9px 11px;background:linear-gradient(135deg,#F97316,#FB923C);color:#fff;box-shadow:0 10px 20px rgba(249,115,22,0.22)}
.challenge-round-badge{display:inline-flex;align-items:center;justify-content:center;margin-top:6px;padding:5px 9px;border-radius:999px;font-size:.66rem;font-weight:900;letter-spacing:.04em}
.challenge-round-badge--you{background:linear-gradient(135deg,#DBEAFE,#E0F2FE);color:#0F4C81;border:1px solid #93C5FD}
.challenge-round-badge--boss{background:linear-gradient(135deg,#FFEDD5,#FFF7ED);color:#C2410C;border:1px solid #FDBA74}
.challenge-round-result .lesson-card{margin-bottom:8px}
.challenge-round-result .lesson-card-header{padding:9px 12px}
.challenge-round-result .lesson-card-body{padding:10px 12px}
.challenge-round-result .lc-verdict-text{font-size:0.88rem}
.challenge-round-result .lc-lesson{font-size:0.84rem;line-height:1.45}
.challenge-round-result .lc-best{padding:8px 10px;margin-top:8px}
.challenge-round-result .lc-best-choice{font-size:0.8rem}
.challenge-round-result .lc-best-why{font-size:0.76rem}
.challenge-round-next-btn{
margin-top:var(--layout-challenge-round-next-margin);
color:#fff;
border:none;
box-shadow:0 12px 24px rgba(37,99,235,0.22);
}
.challenge-round-next-btn--next{
background:linear-gradient(135deg,#2563EB 0%,#0EA5E9 58%,#14B8A6 100%);
}
.challenge-round-next-btn--finish{
background:linear-gradient(135deg,#F97316 0%,#F59E0B 56%,#FACC15 100%);
box-shadow:0 12px 24px rgba(249,115,22,0.24);
}
.challenge-round-next-btn:hover{
transform:translateY(-1px);
box-shadow:0 15px 28px rgba(37,99,235,0.28);
}
.challenge-round-next-btn--finish:hover{
box-shadow:0 15px 28px rgba(249,115,22,0.30);
}
/* ── CHALLENGE SPEED TIMER ── */
.challenge-timer-row{display:flex;align-items:center;justify-content:center;gap:var(--layout-challenge-timer-gap);margin:var(--layout-challenge-timer-margin);padding:var(--layout-challenge-timer-padding);background:#1E293B;border-radius:var(--layout-challenge-timer-radius);border:2px solid #F97316}
.challenge-timer-label{font-size:0.68rem;font-weight:700;color:#FB923C;text-transform:uppercase;letter-spacing:.5px}
.challenge-timer{display:inline-flex;align-items:center;justify-content:center;min-width:var(--layout-challenge-timer-size);height:var(--layout-challenge-timer-size);border-radius:50%;font-size:1.16rem;font-weight:900;color:#fff;background:#334155;border:2px solid #64748B;transition:background 0.3s,border-color 0.3s,transform 0.1s;font-variant-numeric:tabular-nums}
.challenge-timer.warning{background:#B45309;border-color:#FBBF24;color:#fff}
.challenge-timer.danger{background:#DC2626;border-color:#FCA5A5;color:#fff;animation:timerPulse 0.4s ease infinite alternate}
@keyframes timerPulse{from{transform:scale(1)}to{transform:scale(1.18)}}
.go-btn{width:100%;padding:var(--layout-cta-padding);background:linear-gradient(135deg,#9CA3AF,#6B7280);color:#fff;border:none;border-radius:var(--r-sm);font-size:0.98rem;font-weight:700;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,0.15);transition:transform 0.12s}
.go-btn:hover{transform:translateY(-2px)}.go-btn:active{transform:scale(0.97)}
.go-btn.challenge-round-next-btn--next{
background:linear-gradient(135deg,#2563EB 0%,#0EA5E9 58%,#14B8A6 100%);
box-shadow:0 12px 24px rgba(37,99,235,0.22);
}
.go-btn.challenge-round-next-btn--finish{
background:linear-gradient(135deg,#F97316 0%,#F59E0B 56%,#FACC15 100%);
box-shadow:0 12px 24px rgba(249,115,22,0.24);
}
.go-btn.challenge-round-next-btn--next:hover{
box-shadow:0 15px 28px rgba(37,99,235,0.28);
}
.go-btn.challenge-round-next-btn--finish:hover{
box-shadow:0 15px 28px rgba(249,115,22,0.30);
}
/* ── UPGRADE ── */
.upg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:9px;margin-bottom:13px}
.upg-card{background:var(--bg0);border:1.5px solid var(--border2);border-radius:var(--r-sm);padding:15px 11px;text-align:center;transition:all 0.17s}
.upg-card:hover{border-color:var(--sky);box-shadow:var(--sh-md);transform:translateY(-3px)}
.upg-card.bought{background:var(--sky-lt);border-color:var(--sky)}
.upg-ico{font-size:1.9rem;display:block;margin-bottom:6px}
.upg-nm{font-size:0.83rem;font-weight:700;margin-bottom:3px;color:var(--text)}
.upg-ds{font-size:0.7rem;color:var(--muted);margin-bottom:7px;line-height:1.5}
.upg-ef{font-size:0.7rem;color:var(--mint);font-weight:700;margin-bottom:9px}
.buy-btn{width:100%;padding:7px;background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;border:none;border-radius:var(--r-xs);font-size:0.75rem;font-weight:700;cursor:pointer;transition:transform 0.11s}
.buy-btn:hover{transform:scale(1.04)}.buy-btn:disabled{background:#CBD5E1;cursor:not-allowed;transform:none;opacity:0.6}
.skip-lnk{background:none;border:1.5px solid var(--border2);border-radius:50px;padding:9px 22px;cursor:pointer;font-size:0.85rem;font-weight:600;color:var(--muted);transition:all 0.12s}
.skip-lnk:hover{border-color:var(--sky3);color:var(--sky3)}
/* ── PROMOTION ── */
.promotion-screen-card,
.promotion-screen-card:hover{
transform:none;
box-shadow:inset 0 0 0 2px var(--amber),0 6px 24px rgba(245,158,11,0.12),inset 0 1px 0 rgba(255,255,255,0.8);
}
.promo-wrap{text-align:center}
.promo-ico{font-size:4rem;display:block;animation:spinIn 0.6s cubic-bezier(.3,1.5,.5,1);margin-bottom:7px}
.promo-ttl{font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,var(--amber),var(--coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}
.promo-box{display:inline-block;background:var(--sky-lt);border:1.5px solid var(--sky-md);border-radius:var(--r-xs);padding:9px 18px;font-size:1.05rem;font-weight:800;color:var(--sky-dk);margin:8px 0 13px}
.promo-rews{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-bottom:15px}
.promo-rews .chip{display:inline-flex;align-items:center;gap:7px;padding:8px 10px}
.promo-rews .chip svg,
.promo-rews .chip img{width:30px !important;height:30px !important;display:block;flex:0 0 30px;object-fit:contain}
/* ── DAY COMPLETE / GAMEOVER / WIN ── */
.day-ttl{font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,var(--sky),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:5px}
.lock-note{background:var(--sky-lt);border:1.5px solid var(--sky-md);border-radius:var(--r-sm);padding:11px 14px;font-size:0.83rem;font-weight:600;color:var(--sky3);margin:11px 0;line-height:1.6}
.go-ttl{font-size:1.55rem;font-weight:800;color:var(--coral);margin-bottom:7px}
.win-ttl{font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,var(--amber),var(--coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:7px}
/* ── PROFILE ── */
.av-big{width:78px;height:78px;margin:0 auto 9px;animation:popIn 0.35s ease}
.av-big svg{width:100%;height:100%}
.av-grid{display:grid;grid-template-columns:var(--layout-profile-avatar-grid-columns);gap:var(--layout-profile-avatar-grid-gap);margin-bottom:13px}
.av-category-hdr{font-size:0.72rem;font-weight:800;color:var(--sky-dk);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:5px}
.av-opt{aspect-ratio:1;background:#fff;border:2px solid var(--border2);border-radius:14px;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all 0.15s;box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.av-opt svg,.av-opt img{width:100%;height:100%;display:block;object-fit:cover;}
.av-opt:hover{border-color:var(--sky);background:var(--sky-lt);transform:scale(1.08);box-shadow:0 4px 12px rgba(14,165,233,0.25)}
.av-opt.sel{border-color:var(--sky);background:var(--sky-lt);box-shadow:0 0 0 4px rgba(14,165,233,0.3),0 4px 14px rgba(14,165,233,0.2)}
.p-input{width:100%;border:1.5px solid var(--border2);border-radius:var(--r-xs);padding:9px 13px;font-size:0.93rem;font-weight:600;background:var(--card);color:var(--text);outline:none;transition:border-color 0.14s}
.p-input:focus{border-color:var(--sky)}
.p-save{width:100%;padding:14px;background:linear-gradient(135deg,#0EA5E9,#7C3AED);color:#fff;border:none;border-radius:var(--r-sm);font-size:1rem;font-weight:800;cursor:pointer;box-shadow:0 6px 20px rgba(14,165,233,0.35);transition:all 0.2s;margin-top:11px;letter-spacing:.3px}
.p-save:hover{transform:scale(1.03) translateY(-2px);box-shadow:0 10px 28px rgba(14,165,233,0.4)}
.p-save:active{transform:scale(0.98)}
.sbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:13px}
.sbox{background:var(--bg0);border:1px solid var(--border2);border-radius:var(--r-sm);padding:11px;text-align:center}
.sbox-v{font-size:1.65rem;font-weight:800;color:var(--sky3)}
.sbox-l{font-size:0.7rem;font-weight:600;color:var(--muted2);margin-top:2px}
.tog-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid var(--border)}
.tog-lbl{font-size:0.86rem;font-weight:600;color:var(--muted)}
.sect-h{font-size:1.25rem;font-weight:800;margin-bottom:11px;display:flex;align-items:center;gap:7px;color:var(--sky-dk)}
.sect-sub{font-size:0.82rem;color:var(--muted);margin-bottom:13px}
.sep{border:none;border-top:1px solid var(--border);margin:13px 0}
/* ── TOAST ── */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(65px);background:var(--sky-dk);color:#fff;border-radius:50px;padding:8px 18px;z-index:9999;max-width:calc(100vw - 36px);text-align:center;font-size:0.84rem;font-weight:700;transition:transform 0.28s cubic-bezier(.3,1.5,.5,1),opacity 0.28s;opacity:0;white-space:normal}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.confetti-p{position:fixed;pointer-events:none;z-index:9998;border-radius:2px;animation:confettiFall linear forwards}
/* ── MODAL ── */
.modal-ov{position:fixed;inset:0;background:rgba(12,74,110,0.52);z-index:99999;display:flex;align-items:center;justify-content:center;padding:var(--layout-overlay-padding)}
.modal-bx{background:var(--card);border-radius:var(--r);padding:var(--layout-modal-box-padding);max-width:var(--layout-modal-box-max-width);width:100%;text-align:center;box-shadow:0 20px 60px rgba(14,165,233,0.22);animation:popIn 0.22s cubic-bezier(.3,1.5,.5,1)}
.modal-ico{font-size:var(--layout-modal-icon-size);margin-bottom:9px;display:block}
.modal-ttl{font-size:1.25rem;font-weight:800;color:var(--sky-dk);margin-bottom:5px}
.modal-txt{font-size:0.85rem;color:var(--muted);line-height:1.6;margin-bottom:17px}
.modal-ok{width:100%;padding:var(--layout-modal-button-padding);background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;border:none;border-radius:var(--r-sm);font-size:0.93rem;font-weight:700;cursor:pointer}
.day-wrap-ov{position:fixed;inset:0;background:rgba(10,30,70,0.5);z-index:9992;display:flex;align-items:center;justify-content:center;padding:var(--layout-overlay-padding);backdrop-filter:blur(4px)}
.day-wrap-box{width:min(100%,var(--layout-daywrap-box-width));background:linear-gradient(180deg,#fefefe 0%,#f4fbff 100%);border:2px solid rgba(30,159,255,0.22);border-radius:var(--layout-daywrap-box-radius);padding:var(--layout-daywrap-box-padding);box-shadow:0 28px 80px rgba(8,47,73,0.2);position:relative;overflow:hidden;animation:popIn 0.22s cubic-bezier(.3,1.5,.5,1)}
.day-wrap-box:before{content:"";position:absolute;right:-35px;top:-35px;width:120px;height:120px;border-radius:999px;background:radial-gradient(circle,rgba(59,130,246,0.2) 0%,rgba(59,130,246,0) 72%)}
.day-wrap-box:after{content:"";position:absolute;left:-24px;bottom:-30px;width:110px;height:110px;border-radius:999px;background:radial-gradient(circle,rgba(16,185,129,0.18) 0%,rgba(16,185,129,0) 72%)}
.day-wrap-hero{position:relative;z-index:1;background:linear-gradient(135deg,rgba(14,165,233,0.12),rgba(37,99,235,0.08));border:1px solid rgba(96,165,250,0.18);border-radius:var(--layout-daywrap-hero-radius);padding:var(--layout-daywrap-hero-padding);margin-bottom:14px}
.day-wrap-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,196,0,0.16);color:#b45309;font-size:0.8rem;font-weight:900;letter-spacing:.08em;border-radius:999px;padding:var(--layout-daywrap-badge-padding);margin-bottom:12px}
.day-wrap-kicker{display:inline-flex;align-items:center;gap:6px;background:rgba(255,196,0,0.16);color:#b45309;font-size:0.78rem;font-weight:900;letter-spacing:.08em;border-radius:999px;padding:var(--layout-daywrap-badge-padding);margin-bottom:12px;position:relative;z-index:1}
.day-wrap-hero-main{display:flex;align-items:center;gap:var(--layout-daywrap-hero-gap)}
.day-wrap-hero-icon{width:var(--layout-daywrap-icon-size);height:var(--layout-daywrap-icon-size);border-radius:var(--layout-daywrap-icon-radius);display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:linear-gradient(135deg,#fff8cc,#dbeafe);box-shadow:0 12px 24px rgba(37,99,235,0.12);flex-shrink:0}
.day-wrap-hero-icon-fire{background:linear-gradient(135deg,#fff7d1,#ffe4b5)}
.day-wrap-hero-icon-fire .streak-fire-icon{font-size:2.18rem}
.day-wrap-hero-icon-reward{background:linear-gradient(135deg,#fff7d1,#dbeafe);font-size:2rem}
.day-wrap-hero-icon-reminder{background:linear-gradient(135deg,#e0f2fe,#dbeafe);font-size:1.92rem}
.day-wrap-hero-copy{min-width:0;flex:1}
.day-wrap-minirow{display:flex;flex-wrap:wrap;gap:var(--layout-daywrap-mini-gap);margin-top:10px}
.day-mini-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,0.76);border:1px solid rgba(96,165,250,0.18);font-size:0.76rem;font-weight:800;color:#365a7a}
.day-wrap-title{font-size:1.7rem;line-height:1.08;font-weight:900;color:#0f3d69;margin-bottom:8px;position:relative;z-index:1}
.day-wrap-copy{font-size:0.96rem;line-height:1.5;color:#47637d;position:relative;z-index:1}
.day-wrap-forecast{display:grid;grid-template-columns:1fr 1fr;gap:var(--layout-daywrap-forecast-gap);margin-bottom:14px;position:relative;z-index:1}
.day-wrap-stat{display:flex;align-items:flex-start;gap:var(--layout-daywrap-stat-gap);background:#fff;border:1.5px solid rgba(96,165,250,0.2);border-radius:var(--layout-daywrap-stat-radius);padding:var(--layout-daywrap-stat-padding);box-shadow:0 14px 32px rgba(14,165,233,0.08);position:relative;overflow:hidden}
.day-wrap-stat:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;background:linear-gradient(90deg,rgba(251,191,36,0.9),rgba(59,130,246,0.65))}
.day-wrap-stat-ico{width:var(--layout-daywrap-stat-icon-size);height:var(--layout-daywrap-stat-icon-size);border-radius:var(--layout-daywrap-stat-icon-radius);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fef3c7,#dbeafe);font-size:1.58rem;line-height:1;flex-shrink:0;box-shadow:0 10px 20px rgba(37,99,235,0.12)}
.day-wrap-stat-ico-fire{background:linear-gradient(135deg,#fff7cc,#fde68a)}
.day-wrap-stat-ico-fire .streak-fire-icon{font-size:2rem;line-height:1}
.day-wrap-stat-ico-coin{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.day-wrap-stat-ico-coin svg{width:36px;height:36px;display:block}
.day-wrap-stat strong{display:block;font-size:1.08rem;color:#0f3d69;line-height:1.15}
.day-wrap-stat span{display:block;font-size:0.78rem;color:#6b7f95;line-height:1.35;margin-top:4px}
.day-wrap-tip{font-size:0.84rem;color:#1d4ed8;background:linear-gradient(135deg,rgba(219,234,254,0.9),rgba(224,242,254,0.88));border-radius:var(--layout-daywrap-tip-radius);padding:var(--layout-daywrap-tip-padding);margin-bottom:14px;position:relative;z-index:1;font-weight:700}
.day-wrap-btn{width:100%;border:none;border-radius:999px;padding:var(--layout-daywrap-button-padding);font-size:1rem;font-weight:900;color:#fff;background:linear-gradient(135deg,#14b8a6,#2563eb);box-shadow:0 12px 24px rgba(37,99,235,0.24);cursor:pointer;position:relative;z-index:1}
.day-wrap-btn:hover{transform:translateY(-1px)}
.day-wrap-btn:active{transform:translateY(0)}
.tomorrow-streak-card{background:linear-gradient(180deg,#fffdf4 0%,#fff7d1 100%);border-color:rgba(245,158,11,0.28)}
.tomorrow-streak-card .day-wrap-stat-ico{background:linear-gradient(135deg,#fff7cc,#fde68a)}
.tomorrow-prize-card{background:linear-gradient(180deg,#f5fbff 0%,#dff3ff 100%);border-color:rgba(56,189,248,0.26)}
.tomorrow-prize-card .day-wrap-stat-ico{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.streak-reward-box{background:
radial-gradient(circle at 14% 18%,rgba(255,214,10,0.18) 0,rgba(255,214,10,0) 18%),
radial-gradient(circle at 86% 16%,rgba(59,130,246,0.16) 0,rgba(59,130,246,0) 18%),
linear-gradient(180deg,#fffdf7 0%,#eef9ff 100%)}
.streak-reward-box .day-wrap-kicker{background:linear-gradient(135deg,rgba(255,215,0,0.18),rgba(251,146,60,0.14));color:#c2410c;box-shadow:inset 0 0 0 1px rgba(251,146,60,0.08)}
.streak-reward-box .day-wrap-title{font-size:1.72rem}
.streak-reward-box .day-wrap-copy{font-size:0.98rem;color:#35597b}
.streak-reward-box .day-wrap-forecast{gap:12px}
.streak-reward-box .day-wrap-stat{min-height:124px;align-items:center}
.streak-reward-box .day-wrap-stat-ico{width:52px;height:52px;border-radius:16px;font-size:1.62rem;box-shadow:0 10px 20px rgba(37,99,235,0.12)}
.streak-reward-box .day-wrap-stat strong{font-size:1.12rem;line-height:1.15}
.streak-reward-box .day-wrap-stat span{font-size:0.8rem;line-height:1.38}
.streak-power-card{background:linear-gradient(180deg,#fffdf4 0%,#fff8da 100%);border-color:rgba(245,158,11,0.28)}
.streak-power-card .day-wrap-stat-ico{background:linear-gradient(135deg,#fff7cc,#fde68a)}
.streak-prize-card{background:linear-gradient(180deg,#f7fbff 0%,#e0f2fe 100%);border-color:rgba(59,130,246,0.24)}
.streak-prize-card .day-wrap-stat-ico{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.streak-reward-box .day-wrap-stat-ico-coin svg,
.tomorrow-prize-card .day-wrap-stat-ico-coin svg{
width:38px;
height:38px;
}
.streak-reward-box .day-wrap-tip{background:linear-gradient(135deg,rgba(219,234,254,0.92),rgba(224,242,254,0.92));font-size:0.87rem;color:#1e40af;padding:11px 13px}
.streak-reward-box .day-wrap-btn{background:linear-gradient(135deg,#0fb9b1,#2563eb 58%,#1d4ed8 100%);font-size:1.04rem;letter-spacing:.01em}
/* ── CONFIRM ── */
#conf-ov{display:none;position:fixed;inset:0;background:rgba(12,74,110,0.52);z-index:99999;align-items:center;justify-content:center;padding:18px}
#conf-ov.show{display:flex}
#conf-bx{background:var(--card);border-radius:var(--r);padding:24px 20px;max-width:300px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.2);animation:popIn 0.22s cubic-bezier(.3,1.5,.5,1)}
#conf-bx .ct{font-size:1.05rem;font-weight:800;margin-bottom:6px;color:var(--text)}
#conf-bx .cm{font-size:0.84rem;color:var(--muted);margin-bottom:17px;line-height:1.5}
#conf-bx .cbtns{display:flex;gap:7px}
#conf-bx .cok{flex:1;padding:10px;border:none;border-radius:50px;background:linear-gradient(135deg,var(--coral),#DC2626);color:#fff;font-size:0.87rem;font-weight:700;cursor:pointer}
#conf-bx .cno{flex:1;padding:10px;border:1.5px solid var(--border2);border-radius:50px;background:var(--card);color:var(--muted);font-size:0.87rem;font-weight:600;cursor:pointer}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE BREAKPOINT MAP
This app responds to viewport width + height, not device names.
Structural ranges are fixed:
- Mobile: 0px-767px
- Tablet / Compact: 768px-1199px
- Desktop / Notebook: 1200px+
Height and orientation may adjust fitting inside a range, but they do not
create a separate structural layout family.
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
HYBRID / DESKTOP RANGE LAYOUTS
═══════════════════════════════════════════════════════════════ */
@media(min-width:1200px){
:root{
--layout-welcome-shell-width-book:clamp(1040px,66.667vw,1280px);
--layout-rewards-shell-gap:var(--layout-rewards-shell-gap-note-shared);
--layout-rewards-hero-gap:var(--layout-rewards-hero-gap-note-shared);
--layout-rewards-hero-padding:var(--layout-rewards-hero-padding-note-shared);
--layout-rewards-hero-radius:var(--layout-rewards-hero-radius-note-shared);
--layout-rewards-balance-gap:var(--layout-rewards-balance-gap-note-shared);
--layout-rewards-balance-min-width:var(--layout-rewards-balance-min-width-note-shared);
--layout-rewards-balance-max-width:var(--layout-rewards-balance-max-width-note-shared);
--layout-rewards-balance-card-padding:var(--layout-rewards-balance-card-padding-note-shared);
--layout-rewards-balance-card-radius:var(--layout-rewards-balance-card-radius-note-shared);
--layout-rewards-balance-icon-size:var(--layout-rewards-balance-icon-size-note-shared);
--layout-rewards-grid-gap:var(--layout-rewards-grid-gap-note-shared);
--layout-rewards-shop-card-padding:var(--layout-rewards-shop-card-padding-note-shared);
--layout-rewards-shop-card-radius:var(--layout-rewards-shop-card-radius-note-shared);
--layout-rewards-shop-top-gap:var(--layout-rewards-shop-top-gap-note-shared);
--layout-rewards-shop-button-padding:var(--layout-rewards-shop-button-padding-note-shared);
--layout-rewards-shop-button-radius:var(--layout-rewards-shop-button-radius-note-shared);
--layout-insights-shell-gap:var(--layout-insights-shell-gap-note-shared);
--layout-insights-card-radius:var(--layout-insights-card-radius-note-shared);
--layout-insights-hero-columns:var(--layout-insights-hero-columns-note-shared);
--layout-insights-hero-gap:var(--layout-insights-hero-gap-note-shared);
--layout-insights-hero-padding:var(--layout-insights-hero-padding-note-shared);
--layout-insights-takeaway-columns:var(--layout-insights-takeaway-columns-note-shared);
--layout-insights-takeaway-gap:var(--layout-insights-takeaway-gap-note-shared);
--layout-insights-takeaway-margin-top:var(--layout-insights-takeaway-margin-top-note-shared);
--layout-insights-takeaway-card-padding:var(--layout-insights-takeaway-card-padding-note-shared);
--layout-insights-section-padding:var(--layout-insights-section-padding-note-shared);
--layout-insights-section-head-gap:var(--layout-insights-section-head-gap-note-shared);
--layout-insights-section-head-margin:var(--layout-insights-section-head-margin-note-shared);
--layout-insights-section-tip-max-width:var(--layout-insights-section-tip-max-width-note-shared);
--layout-insights-skill-grid-gap:var(--layout-insights-skill-grid-gap-note-shared);
--layout-insights-skill-card-padding:var(--layout-insights-skill-card-padding-note-shared);
--layout-insights-skill-icon-size:var(--layout-insights-skill-icon-size-note-shared);
--layout-insights-skill-icon-frame-extra:var(--layout-insights-skill-icon-frame-extra-note-shared);
--layout-insights-mode-icon-size:var(--layout-insights-mode-icon-size-note-shared);
--layout-insights-radar-size:var(--layout-insights-radar-size-note-shared);
--layout-insights-radar-icon-size:var(--layout-insights-radar-icon-size-note-shared);
--layout-insights-overall-padding:var(--layout-insights-overall-padding-note-shared);
--layout-insights-trend-gap:var(--layout-insights-trend-gap-note-shared);
--layout-insights-trend-card-padding:var(--layout-insights-trend-card-padding-note-shared);
--layout-insights-mode-gap:var(--layout-insights-mode-gap-note-shared);
--layout-insights-mode-margin-top:var(--layout-insights-mode-margin-top-note-shared);
--layout-insights-mode-card-padding:var(--layout-insights-mode-card-padding-note-shared);
--layout-insights-bottom-gap:var(--layout-insights-bottom-gap-note-shared);
--layout-insights-highlight-padding:var(--layout-insights-highlight-padding-note-shared);
--layout-insights-overall-max-width:260px;
--layout-profile-max-height:var(--layout-profile-max-height-note-shared);
--layout-profile-help-min-height:var(--layout-profile-help-min-height-note-shared);
--layout-profile-card-radius:var(--layout-profile-card-radius-note-shared);
--layout-profile-card-padding:var(--layout-profile-card-padding-note-shared);
--layout-profile-card-margin-bottom:var(--layout-profile-card-margin-bottom-note-shared);
--layout-profile-tabs-gap:var(--layout-profile-tabs-gap-note-shared);
--layout-profile-tabs-bottom-gap:var(--layout-profile-tabs-bottom-gap-note-shared);
--layout-profile-hero-gap:var(--layout-profile-hero-gap-note-shared);
--layout-profile-hero-body-gap:var(--layout-profile-hero-body-gap-note-shared);
--layout-profile-left-width:var(--layout-profile-left-width-note-shared);
--layout-profile-left-width-tablet:var(--layout-profile-left-width-note-shared);
--layout-profile-left-min-width-tablet:var(--layout-profile-left-min-width-note-shared);
--layout-profile-left-padding:var(--layout-profile-left-padding-note-shared);
--layout-profile-right-padding:var(--layout-profile-right-padding-note-shared);
--layout-profile-right-offset:var(--layout-profile-right-offset-note-shared);
--layout-profile-mini-gap:var(--layout-profile-mini-gap-note-shared);
--layout-profile-mini-card-padding:var(--layout-profile-mini-card-padding-note-shared);
--layout-profile-content-inline-icon-size:var(--layout-profile-content-inline-icon-size-note-shared);
--layout-membership-hero-padding:var(--layout-membership-hero-padding-note-shared);
--layout-membership-hero-margin:var(--layout-membership-hero-margin-note-shared);
--layout-membership-crown-icon-size:var(--layout-membership-crown-icon-size-note-shared);
--layout-membership-perk-icon-size:var(--layout-membership-perk-icon-size-note-shared);
--layout-membership-locked-icon-size:var(--layout-membership-locked-icon-size-note-shared);
--layout-membership-detail-padding:var(--layout-membership-detail-padding-note-shared);
--layout-membership-trial-padding:var(--layout-membership-trial-padding-note-shared);
--layout-membership-card-radius:var(--layout-membership-card-radius-note-shared);
--layout-membership-card-radius-small:var(--layout-membership-card-radius-small-note-shared);
--layout-membership-gap:var(--layout-membership-gap-note-shared);
--layout-membership-gap-compact:var(--layout-membership-gap-tight-note-shared);
--layout-membership-gap-tight:var(--layout-membership-gap-tight-note-shared);
--layout-membership-cancel-padding:var(--layout-membership-cancel-padding-note-shared);
--layout-membership-button-padding:var(--layout-membership-button-padding-note-shared);
--layout-membership-plan-gap:var(--layout-membership-plan-gap-note-shared);
--layout-membership-plan-gap-compact:var(--layout-membership-gap-tight-note-shared);
--layout-membership-plan-padding:var(--layout-membership-plan-padding-note-shared);
--layout-membership-plan-top-padding:var(--layout-membership-plan-top-padding-note-shared);
--layout-membership-plan-button-padding:var(--layout-membership-plan-button-padding-note-shared);
--layout-membership-scroll-pad-right:var(--layout-membership-scroll-pad-right-note-shared);
--layout-membership-fit-profile-bottom-padding:var(--layout-membership-fit-profile-bottom-padding-note-shared);
--layout-help-gap:var(--layout-help-gap-note-shared);
--layout-help-gap-tablet:var(--layout-help-gap-tablet-note-shared);
--layout-help-gap-compact:var(--layout-help-gap-secondary-note-shared);
--layout-help-gap-secondary:var(--layout-help-gap-secondary-note-shared);
--layout-help-gap-tight:var(--layout-help-gap-tight-note-shared);
--layout-help-shell-min-height:var(--layout-help-shell-min-height-note-shared);
--layout-help-shell-min-height-short:var(--layout-help-shell-min-height-short-note-shared);
--layout-help-desktop-columns:var(--layout-help-desktop-columns-note-shared);
--layout-help-desktop-columns-short:var(--layout-help-desktop-columns-short-note-shared);
--layout-help-hero-padding:var(--layout-help-hero-padding-note-shared);
--layout-help-hero-padding-secondary:12px 14px;
--layout-help-hero-radius:var(--layout-help-hero-radius-note-shared);
--layout-help-hero-radius-secondary:18px;
--layout-help-grid-gap:var(--layout-help-grid-gap-note-shared);
--layout-help-grid-gap-secondary:8px;
--layout-help-card-padding:var(--layout-help-card-padding-note-shared);
--layout-help-card-padding-secondary:10px 11px;
--layout-help-card-radius:var(--layout-help-card-radius-note-shared);
--layout-help-card-radius-secondary:14px;
--layout-help-form-gap:var(--layout-help-form-gap-note-shared);
--layout-help-form-gap-secondary:7px;
--layout-help-control-padding:var(--layout-help-control-padding-note-shared);
--layout-help-control-padding-secondary:7px 9px;
--layout-help-control-radius:var(--layout-help-control-radius-note-shared);
--layout-help-control-radius-secondary:10px;
--layout-help-textarea-min-height-desktop:var(--layout-help-textarea-min-height-note-shared);
--layout-help-textarea-min-height-secondary:156px;
--layout-help-contact-button-min-width:var(--layout-help-contact-button-min-width-note-shared);
--layout-help-contact-button-min-width-secondary:168px;
--layout-help-contact-mini-max-width:var(--layout-help-contact-mini-max-width-note-shared);
--layout-help-contact-mini-max-width-secondary:220px;
--layout-help-contact-icon-size:var(--layout-help-contact-icon-size-note-shared);
--layout-help-fun-icon-size:var(--layout-help-fun-icon-size-note-shared);
}
}
@media(min-width:768px) and (max-width:1199px){
:root{
--layout-welcome-shell-width-book:var(--layout-welcome-shell-width-tablet-shared);
--layout-welcome-shell-gap:var(--layout-welcome-shell-gap-tablet-shared);
--layout-welcome-splash-padding-book:var(--layout-welcome-splash-padding-tablet-shared);
--layout-welcome-panel-height:var(--layout-welcome-panel-height-tablet-shared);
--layout-welcome-panel-min-height:var(--layout-welcome-panel-height-tablet-shared);
--layout-welcome-brand-padding:var(--layout-welcome-panel-padding-tablet-shared);
--layout-welcome-auth-padding:var(--layout-welcome-panel-padding-tablet-shared);
--layout-welcome-mascot-width:var(--layout-welcome-mascot-width-tablet-shared);
--layout-welcome-mode-gap:var(--layout-welcome-mode-gap-tablet-shared);
--layout-welcome-mode-card-padding:var(--layout-welcome-mode-card-padding-tablet-shared);
--layout-welcome-mode-card-min-height:var(--layout-welcome-mode-card-min-height-tablet-shared);
--layout-rewards-shell-gap:var(--layout-rewards-shell-gap-tablet-shared);
--layout-rewards-hero-gap:var(--layout-rewards-hero-gap-tablet-shared);
--layout-rewards-hero-padding:var(--layout-rewards-hero-padding-tablet-shared);
--layout-rewards-hero-radius:var(--layout-rewards-hero-radius-tablet-shared);
--layout-rewards-balance-gap:var(--layout-rewards-balance-gap-tablet-shared);
--layout-rewards-balance-min-width:var(--layout-rewards-balance-min-width-tablet-shared);
--layout-rewards-balance-max-width:var(--layout-rewards-balance-max-width-tablet-shared);
--layout-rewards-balance-card-padding:var(--layout-rewards-balance-card-padding-tablet-shared);
--layout-rewards-balance-card-radius:var(--layout-rewards-balance-card-radius-tablet-shared);
--layout-rewards-balance-icon-size:var(--layout-rewards-balance-icon-size-tablet-shared);
--layout-rewards-grid-gap:var(--layout-rewards-grid-gap-tablet-shared);
--layout-rewards-shop-card-padding:var(--layout-rewards-shop-card-padding-tablet-shared);
--layout-rewards-shop-card-radius:var(--layout-rewards-shop-card-radius-tablet-shared);
--layout-rewards-shop-top-gap:var(--layout-rewards-shop-top-gap-tablet-shared);
--layout-rewards-shop-button-padding:var(--layout-rewards-shop-button-padding-tablet-shared);
--layout-rewards-shop-button-radius:var(--layout-rewards-shop-button-radius-tablet-shared);
--layout-insights-shell-gap:var(--layout-insights-shell-gap-tablet-shared);
--layout-insights-card-radius:var(--layout-insights-card-radius-tablet-shared);
--layout-insights-hero-columns:var(--layout-insights-hero-columns-tablet-shared);
--layout-insights-hero-gap:var(--layout-insights-hero-gap-tablet-shared);
--layout-insights-hero-padding:var(--layout-insights-hero-padding-tablet-shared);
--layout-insights-takeaway-columns:var(--layout-insights-takeaway-columns-tablet-shared);
--layout-insights-takeaway-gap:var(--layout-insights-takeaway-gap-tablet-shared);
--layout-insights-takeaway-margin-top:var(--layout-insights-takeaway-margin-top-tablet-shared);
--layout-insights-takeaway-card-padding:var(--layout-insights-takeaway-card-padding-tablet-shared);
--layout-insights-section-padding:var(--layout-insights-section-padding-tablet-shared);
--layout-insights-section-head-gap:var(--layout-insights-section-head-gap-tablet-shared);
--layout-insights-section-head-margin:var(--layout-insights-section-head-margin-tablet-shared);
--layout-insights-section-tip-max-width:var(--layout-insights-section-tip-max-width-tablet-shared);
--layout-insights-skill-grid-gap:var(--layout-insights-skill-grid-gap-tablet-shared);
--layout-insights-skill-card-padding:var(--layout-insights-skill-card-padding-tablet-shared);
--layout-insights-skill-icon-size:var(--layout-insights-skill-icon-size-tablet-shared);
--layout-insights-skill-icon-frame-extra:var(--layout-insights-skill-icon-frame-extra-tablet-shared);
--layout-insights-mode-icon-size:var(--layout-insights-mode-icon-size-tablet-shared);
--layout-insights-radar-size:var(--layout-insights-radar-size-tablet-shared);
--layout-insights-radar-icon-size:var(--layout-insights-radar-icon-size-tablet-shared);
--layout-insights-overall-padding:var(--layout-insights-overall-padding-tablet-shared);
--layout-insights-trend-gap:var(--layout-insights-trend-gap-tablet-shared);
--layout-insights-trend-card-padding:var(--layout-insights-trend-card-padding-tablet-shared);
--layout-insights-mode-gap:var(--layout-insights-mode-gap-tablet-shared);
--layout-insights-mode-margin-top:var(--layout-insights-mode-margin-top-tablet-shared);
--layout-insights-mode-card-padding:var(--layout-insights-mode-card-padding-tablet-shared);
--layout-insights-bottom-gap:var(--layout-insights-bottom-gap-tablet-shared);
--layout-insights-highlight-padding:var(--layout-insights-highlight-padding-tablet-shared);
--layout-insights-overall-max-width:240px;
--layout-profile-max-height:var(--layout-profile-max-height-tablet-shared);
--layout-profile-help-min-height:var(--layout-profile-help-min-height-tablet-shared);
--layout-profile-card-radius:var(--layout-profile-card-radius-tablet-shared);
--layout-profile-card-padding:var(--layout-profile-card-padding-tablet-shared);
--layout-profile-card-margin-bottom:var(--layout-profile-card-margin-bottom-tablet-shared);
--layout-profile-tabs-gap:var(--layout-profile-tabs-gap-tablet-shared);
--layout-profile-tabs-bottom-gap:var(--layout-profile-tabs-bottom-gap-tablet-shared);
--layout-profile-hero-gap:var(--layout-profile-hero-gap-tablet-shared);
--layout-profile-hero-body-gap:var(--layout-profile-hero-body-gap-tablet-shared);
--layout-profile-left-width:var(--layout-profile-left-width-tablet-shared);
--layout-profile-left-width-tablet:var(--layout-profile-left-width-tablet-shared);
--layout-profile-left-min-width-tablet:var(--layout-profile-left-min-width-tablet-shared);
--layout-profile-left-padding:var(--layout-profile-left-padding-tablet-shared);
--layout-profile-right-padding:var(--layout-profile-right-padding-tablet-shared);
--layout-profile-right-offset:var(--layout-profile-right-offset-tablet-shared);
--layout-profile-mini-gap:var(--layout-profile-mini-gap-tablet-shared);
--layout-profile-mini-card-padding:var(--layout-profile-mini-card-padding-tablet-shared);
--layout-profile-content-inline-icon-size:var(--layout-profile-content-inline-icon-size-tablet-shared);
--layout-membership-hero-padding:var(--layout-membership-hero-padding-tablet-shared);
--layout-membership-hero-margin:var(--layout-membership-hero-margin-tablet-shared);
--layout-membership-crown-icon-size:var(--layout-membership-crown-icon-size-tablet-shared);
--layout-membership-perk-icon-size:var(--layout-membership-perk-icon-size-tablet-shared);
--layout-membership-locked-icon-size:var(--layout-membership-locked-icon-size-tablet-shared);
--layout-membership-detail-padding:var(--layout-membership-detail-padding-tablet-shared);
--layout-membership-trial-padding:var(--layout-membership-trial-padding-tablet-shared);
--layout-membership-card-radius:var(--layout-membership-card-radius-tablet-shared);
--layout-membership-card-radius-small:var(--layout-membership-card-radius-small-tablet-shared);
--layout-membership-gap:var(--layout-membership-gap-tablet-shared);
--layout-membership-gap-compact:var(--layout-membership-gap-tablet-shared);
--layout-membership-gap-tight:var(--layout-membership-gap-tablet-shared);
--layout-membership-cancel-padding:var(--layout-membership-cancel-padding-tablet-shared);
--layout-membership-button-padding:var(--layout-membership-button-padding-tablet-shared);
--layout-membership-plan-gap:var(--layout-membership-plan-gap-tablet-shared);
--layout-membership-plan-gap-compact:var(--layout-membership-plan-gap-tablet-shared);
--layout-membership-plan-padding:var(--layout-membership-plan-padding-tablet-shared);
--layout-membership-plan-top-padding:var(--layout-membership-plan-top-padding-tablet-shared);
--layout-membership-plan-button-padding:var(--layout-membership-plan-button-padding-tablet-shared);
--layout-membership-scroll-pad-right:var(--layout-membership-scroll-pad-right-tablet-shared);
--layout-membership-fit-profile-bottom-padding:var(--layout-membership-fit-profile-bottom-padding-tablet-shared);
--layout-help-gap:var(--layout-help-gap-tablet-shared);
--layout-help-gap-tablet:var(--layout-help-gap-tablet-wide-shared);
--layout-help-gap-compact:var(--layout-help-gap-tablet-shared);
--layout-help-gap-secondary:var(--layout-help-gap-tablet-shared);
--layout-help-gap-tight:var(--layout-help-gap-tight-tablet-shared);
--layout-help-shell-min-height:var(--layout-help-shell-min-height-tablet-shared);
--layout-help-shell-min-height-short:var(--layout-help-shell-min-height-short-tablet-shared);
--layout-help-desktop-columns:var(--layout-help-desktop-columns-tablet-shared);
--layout-help-desktop-columns-short:var(--layout-help-desktop-columns-short-tablet-shared);
--layout-help-hero-padding:var(--layout-help-hero-padding-tablet-shared);
--layout-help-hero-padding-secondary:var(--layout-help-hero-padding-tablet-shared);
--layout-help-hero-radius:var(--layout-help-hero-radius-tablet-shared);
--layout-help-hero-radius-secondary:var(--layout-help-hero-radius-tablet-shared);
--layout-help-grid-gap:var(--layout-help-grid-gap-tablet-shared);
--layout-help-grid-gap-secondary:var(--layout-help-grid-gap-tablet-shared);
--layout-help-card-padding:var(--layout-help-card-padding-tablet-shared);
--layout-help-card-padding-secondary:var(--layout-help-card-padding-tablet-shared);
--layout-help-card-radius:var(--layout-help-card-radius-tablet-shared);
--layout-help-card-radius-secondary:var(--layout-help-card-radius-tablet-shared);
--layout-help-form-gap:var(--layout-help-form-gap-tablet-shared);
--layout-help-form-gap-secondary:var(--layout-help-form-gap-tablet-shared);
--layout-help-control-padding:var(--layout-help-control-padding-tablet-shared);
--layout-help-control-padding-secondary:var(--layout-help-control-padding-tablet-shared);
--layout-help-control-radius:var(--layout-help-control-radius-tablet-shared);
--layout-help-control-radius-secondary:var(--layout-help-control-radius-tablet-shared);
--layout-help-textarea-min-height-desktop:var(--layout-help-textarea-min-height-tablet-shared);
--layout-help-textarea-min-height-tablet:var(--layout-help-textarea-min-height-tablet-shared);
--layout-help-textarea-min-height-secondary:var(--layout-help-textarea-min-height-tablet-shared);
--layout-help-contact-button-min-width:var(--layout-help-contact-button-min-width-tablet-shared);
--layout-help-contact-button-min-width-tablet:var(--layout-help-contact-button-min-width-tablet-shared);
--layout-help-contact-button-min-width-secondary:var(--layout-help-contact-button-min-width-tablet-shared);
--layout-help-contact-mini-max-width:var(--layout-help-contact-mini-max-width-tablet-shared);
--layout-help-contact-mini-max-width-secondary:var(--layout-help-contact-mini-max-width-tablet-shared);
--layout-help-contact-icon-size:var(--layout-help-contact-icon-size-tablet-shared);
--layout-help-fun-icon-size:var(--layout-help-fun-icon-size-tablet-shared);
}
}
@media(max-width:767px){
:root{
--layout-rewards-shell-gap:var(--layout-rewards-shell-gap-mobile-shared);
--layout-rewards-hero-gap:var(--layout-rewards-hero-gap-mobile-shared);
--layout-rewards-hero-padding:var(--layout-rewards-hero-padding-mobile-shared);
--layout-rewards-hero-radius:var(--layout-rewards-hero-radius-mobile-shared);
--layout-rewards-balance-gap:var(--layout-rewards-balance-gap-mobile-shared);
--layout-rewards-balance-min-width:var(--layout-rewards-balance-min-width-mobile-shared);
--layout-rewards-balance-max-width:var(--layout-rewards-balance-max-width-mobile-shared);
--layout-rewards-balance-card-padding:var(--layout-rewards-balance-card-padding-mobile-shared);
--layout-rewards-balance-card-radius:var(--layout-rewards-balance-card-radius-mobile-shared);
--layout-rewards-balance-icon-size:var(--layout-rewards-balance-icon-size-mobile-shared);
--layout-rewards-grid-gap:var(--layout-rewards-grid-gap-mobile-shared);
--layout-rewards-shop-card-padding:var(--layout-rewards-shop-card-padding-mobile-shared);
--layout-rewards-shop-card-radius:var(--layout-rewards-shop-card-radius-mobile-shared);
--layout-rewards-shop-top-gap:var(--layout-rewards-shop-top-gap-mobile-shared);
--layout-rewards-shop-button-padding:var(--layout-rewards-shop-button-padding-mobile-shared);
--layout-rewards-shop-button-radius:var(--layout-rewards-shop-button-radius-mobile-shared);
--layout-insights-shell-gap:var(--layout-insights-shell-gap-mobile-shared);
--layout-insights-card-radius:var(--layout-insights-card-radius-mobile-shared);
--layout-insights-hero-columns:var(--layout-insights-hero-columns-mobile-shared);
--layout-insights-hero-gap:var(--layout-insights-hero-gap-mobile-shared);
--layout-insights-hero-padding:var(--layout-insights-hero-padding-mobile-shared);
--layout-insights-takeaway-columns:var(--layout-insights-takeaway-columns-mobile-shared);
--layout-insights-takeaway-gap:var(--layout-insights-takeaway-gap-mobile-shared);
--layout-insights-takeaway-margin-top:var(--layout-insights-takeaway-margin-top-mobile-shared);
--layout-insights-takeaway-card-padding:var(--layout-insights-takeaway-card-padding-mobile-shared);
--layout-insights-section-padding:var(--layout-insights-section-padding-mobile-shared);
--layout-insights-section-head-gap:var(--layout-insights-section-head-gap-mobile-shared);
--layout-insights-section-head-margin:var(--layout-insights-section-head-margin-mobile-shared);
--layout-insights-section-tip-max-width:var(--layout-insights-section-tip-max-width-mobile-shared);
--layout-insights-skill-grid-gap:var(--layout-insights-skill-grid-gap-mobile-shared);
--layout-insights-skill-card-padding:var(--layout-insights-skill-card-padding-mobile-shared);
--layout-insights-skill-icon-size:var(--layout-insights-skill-icon-size-mobile-shared);
--layout-insights-skill-icon-frame-extra:var(--layout-insights-skill-icon-frame-extra-mobile-shared);
--layout-insights-mode-icon-size:var(--layout-insights-mode-icon-size-mobile-shared);
--layout-insights-radar-size:var(--layout-insights-radar-size-mobile-shared);
--layout-insights-radar-icon-size:var(--layout-insights-radar-icon-size-mobile-shared);
--layout-insights-overall-padding:var(--layout-insights-overall-padding-mobile-shared);
--layout-insights-overall-max-width:var(--layout-insights-overall-max-width-mobile-shared);
--layout-insights-overall-max-width-mobile:var(--layout-insights-overall-max-width-mobile-shared);
--layout-insights-trend-gap:var(--layout-insights-trend-gap-mobile-shared);
--layout-insights-trend-card-padding:var(--layout-insights-trend-card-padding-mobile-shared);
--layout-insights-mode-gap:var(--layout-insights-mode-gap-mobile-shared);
--layout-insights-mode-margin-top:var(--layout-insights-mode-margin-top-mobile-shared);
--layout-insights-mode-card-padding:var(--layout-insights-mode-card-padding-mobile-shared);
--layout-insights-bottom-gap:var(--layout-insights-bottom-gap-mobile-shared);
--layout-insights-highlight-padding:var(--layout-insights-highlight-padding-mobile-shared);
--layout-profile-max-height:var(--layout-profile-max-height-mobile-shared);
--layout-profile-help-min-height:var(--layout-profile-help-min-height-mobile-shared);
--layout-profile-card-radius:var(--layout-profile-card-radius-mobile-shared);
--layout-profile-card-padding:var(--layout-profile-card-padding-mobile-shared);
--layout-profile-card-margin-bottom:var(--layout-profile-card-margin-bottom-mobile-shared);
--layout-profile-tabs-gap:var(--layout-profile-tabs-gap-mobile-shared);
--layout-profile-tabs-bottom-gap:var(--layout-profile-tabs-bottom-gap-mobile-shared);
--layout-profile-hero-gap:var(--layout-profile-hero-gap-mobile-shared);
--layout-profile-hero-body-gap:var(--layout-profile-hero-body-gap-mobile-shared);
--layout-profile-left-width:var(--layout-profile-left-width-mobile-shared);
--layout-profile-left-width-tablet:var(--layout-profile-left-width-mobile-shared);
--layout-profile-left-min-width-tablet:var(--layout-profile-left-min-width-mobile-shared);
--layout-profile-left-padding:var(--layout-profile-left-padding-mobile-shared);
--layout-profile-right-padding:var(--layout-profile-right-padding-mobile-shared);
--layout-profile-right-offset:var(--layout-profile-right-offset-mobile-shared);
--layout-profile-mini-gap:var(--layout-profile-mini-gap-mobile-shared);
--layout-profile-mini-card-padding:var(--layout-profile-mini-card-padding-mobile-shared);
--layout-profile-content-inline-icon-size:var(--layout-profile-content-inline-icon-size-mobile-shared);
--layout-membership-hero-padding:var(--layout-membership-hero-padding-mobile-shared);
--layout-membership-hero-margin:var(--layout-membership-hero-margin-mobile-shared);
--layout-membership-crown-icon-size:var(--layout-membership-crown-icon-size-mobile-shared);
--layout-membership-perk-icon-size:var(--layout-membership-perk-icon-size-mobile-shared);
--layout-membership-locked-icon-size:var(--layout-membership-locked-icon-size-mobile-shared);
--layout-membership-detail-padding:var(--layout-membership-detail-padding-mobile-shared);
--layout-membership-trial-padding:var(--layout-membership-trial-padding-mobile-shared);
--layout-membership-card-radius:var(--layout-membership-card-radius-mobile-shared);
--layout-membership-card-radius-small:var(--layout-membership-card-radius-small-mobile-shared);
--layout-membership-gap:var(--layout-membership-gap-mobile-shared);
--layout-membership-gap-compact:var(--layout-membership-gap-mobile-shared);
--layout-membership-gap-tight:var(--layout-membership-gap-mobile-shared);
--layout-membership-cancel-padding:var(--layout-membership-cancel-padding-mobile-shared);
--layout-membership-button-padding:var(--layout-membership-button-padding-mobile-shared);
--layout-membership-plan-gap:var(--layout-membership-plan-gap-mobile-shared);
--layout-membership-plan-gap-compact:var(--layout-membership-plan-gap-mobile-shared);
--layout-membership-plan-padding:var(--layout-membership-plan-padding-mobile-shared);
--layout-membership-plan-top-padding:var(--layout-membership-plan-top-padding-mobile-shared);
--layout-membership-plan-button-padding:var(--layout-membership-plan-button-padding-mobile-shared);
--layout-membership-scroll-pad-right:var(--layout-membership-scroll-pad-right-mobile-shared);
--layout-help-gap:var(--layout-help-gap-mobile-shared);
--layout-help-gap-tablet:var(--layout-help-gap-tablet-mobile-shared);
--layout-help-gap-compact:var(--layout-help-gap-mobile-shared);
--layout-help-gap-secondary:var(--layout-help-gap-mobile-shared);
--layout-help-gap-tight:var(--layout-help-gap-tight-mobile-shared);
--layout-help-shell-min-height:var(--layout-help-shell-min-height-mobile-shared);
--layout-help-shell-min-height-short:var(--layout-help-shell-min-height-short-mobile-shared);
--layout-help-desktop-columns:var(--layout-help-desktop-columns-mobile-shared);
--layout-help-desktop-columns-short:var(--layout-help-desktop-columns-short-mobile-shared);
--layout-help-hero-padding:var(--layout-help-hero-padding-mobile-shared);
--layout-help-hero-padding-secondary:var(--layout-help-hero-padding-mobile-shared);
--layout-help-hero-radius:var(--layout-help-hero-radius-mobile-shared);
--layout-help-hero-radius-secondary:var(--layout-help-hero-radius-mobile-shared);
--layout-help-grid-gap:var(--layout-help-grid-gap-mobile-shared);
--layout-help-grid-gap-secondary:var(--layout-help-grid-gap-mobile-shared);
--layout-help-card-padding:var(--layout-help-card-padding-mobile-shared);
--layout-help-card-padding-secondary:var(--layout-help-card-padding-mobile-shared);
--layout-help-card-radius:var(--layout-help-card-radius-mobile-shared);
--layout-help-card-radius-secondary:var(--layout-help-card-radius-mobile-shared);
--layout-help-form-gap:var(--layout-help-form-gap-mobile-shared);
--layout-help-form-gap-secondary:var(--layout-help-form-gap-mobile-shared);
--layout-help-control-padding:var(--layout-help-control-padding-mobile-shared);
--layout-help-control-padding-secondary:var(--layout-help-control-padding-mobile-shared);
--layout-help-control-radius:var(--layout-help-control-radius-mobile-shared);
--layout-help-control-radius-secondary:var(--layout-help-control-radius-mobile-shared);
--layout-help-textarea-min-height:var(--layout-help-textarea-min-height-mobile-shared);
--layout-help-textarea-min-height-secondary:var(--layout-help-textarea-min-height-mobile-shared);
--layout-help-textarea-min-height-mobile:var(--layout-help-textarea-min-height-mobile-shared);
--layout-help-contact-button-min-width:var(--layout-help-contact-button-min-width-mobile-shared);
--layout-help-contact-button-min-width-tablet:var(--layout-help-contact-button-min-width-mobile-shared);
--layout-help-contact-button-min-width-secondary:var(--layout-help-contact-button-min-width-mobile-shared);
--layout-help-contact-mini-max-width:var(--layout-help-contact-mini-max-width-mobile-shared);
--layout-help-contact-mini-max-width-secondary:var(--layout-help-contact-mini-max-width-mobile-shared);
--layout-help-contact-icon-size:var(--layout-help-contact-icon-size-mobile-shared);
--layout-help-fun-icon-size:var(--layout-help-fun-icon-size-mobile-shared);
--layout-device-note-display:var(--layout-device-note-display-mobile-shared);
--layout-device-note-margin:var(--layout-device-note-margin-mobile-shared);
--layout-device-note-padding:var(--layout-device-note-padding-mobile-shared);
--layout-device-note-border:var(--layout-device-note-border-mobile-shared);
--layout-device-note-radius:var(--layout-device-note-radius-mobile-shared);
--layout-device-note-bg:var(--layout-device-note-bg-mobile-shared);
--layout-device-note-shadow:var(--layout-device-note-shadow-mobile-shared);
--layout-device-note-font-size:var(--layout-device-note-font-size-mobile-shared);
}
}
/* ── LARGE VIEWPORT DASHBOARD ── */
@media(min-width:1200px) and (min-height:700px){
.home-dashboard{display:grid;grid-template-columns:var(--layout-home-dashboard-columns);gap:var(--layout-home-dashboard-gap);align-items:stretch}
.home-main{display:flex;flex-direction:column;gap:0;min-width:0;height:100%}
.home-side{display:flex;flex-direction:column;gap:var(--layout-home-section-gap);min-width:0}
.home-side .card{height:fit-content}
.hero-wrap{flex:1}
.mode-row{flex:1;grid-auto-rows:1fr;margin-top:8px}
.mcard{height:100%}
.home-side .panel{padding:16px}
.home-split{display:grid;grid-template-columns:1fr;gap:var(--layout-home-section-gap)}
.desktop-only{display:block}
.home-progress-card{padding:14px 16px}
.home-progress-card .prog-row{margin-bottom:6px}
.home-progress-card .prog-bar{height:9px}
.home-progress-card .prog-num{font-size:0.86rem}
.home-progress-card .prog-lbl{font-size:0.88rem}
.home-progress-card .home-progress-note{font-size:0.62rem;margin-top:4px}
.home-progress-card .streak-inline{margin-top:8px;gap:8px}
.home-progress-card .streak-chip{padding:6px 10px;font-size:0.72rem}
.home-progress-card .streak-sub{font-size:0.64rem;line-height:1.3}
.home-cta-row{display:grid;grid-template-columns:1fr;gap:var(--layout-home-section-gap)}
.big-play{min-height:64px}
.mode-row{gap:var(--layout-home-mode-gap)}
.mcard{min-height:var(--layout-home-mode-row-min-height-desktop);display:flex;flex-direction:column;justify-content:center}
.mcard-title{font-size:1rem}
.mcard-sub{font-size:0.78rem}
.hero-wrap{min-height:var(--layout-home-hero-min-height-desktop);padding:var(--layout-home-hero-padding-desktop);padding-right:var(--layout-home-hero-pad-right)}
.hero-title{font-size:3rem}
.hero-sub{font-size:0.98rem;max-width:100%}
.hero-mascot{width:var(--layout-home-hero-mascot-width);height:var(--layout-home-hero-mascot-height);right:14px;bottom:10px}
.hero-chips{gap:var(--layout-home-chip-gap-desktop)}
.hchip{font-size:0.82rem;padding:var(--layout-home-chip-padding-desktop)}
.sc-grid{gap:18px}
.panel-h{font-size:0.9rem}
.cur-pos-box{padding:10px 12px;font-size:0.9rem}
.prow{padding:4px 0}
.plbl,.pnums{font-size:0.74rem}
.rw-name{font-size:0.84rem}
.rw-sub{font-size:0.72rem}
}
@media(min-width:1200px) and (min-height:700px){
#app{padding:16px 24px 0}
#nav,#hud{max-width:none}
.screen{width:100%}
.sc-grid{grid-template-columns:minmax(0,2fr) minmax(320px,380px)}
.sc-name{font-size:1.3rem}
.sc-body{font-size:0.95rem}
}
/* ── Trial banner large-viewport sizing ─────────────────────────────────── */
@media(min-width:1200px) and (min-height:700px){
.trial-banner{padding:6px 20px;font-size:0.77rem}
.tb-btn{padding:3px 12px;font-size:0.7rem}
/* Subscription tab — compact card internals reused by the fitted membership shell */
.sub-trial-locked{display:block}
.sub-hero-perks{
max-height:none;
overflow:visible;
padding-bottom:6px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:18px;
row-gap:0;
align-items:start;
}
.sub-hero-card{padding:var(--layout-membership-hero-padding);margin-bottom:var(--layout-membership-hero-margin)}
.sub-hero-sparkles{margin-bottom:2px}
.sub-hero-title{font-size:1.05rem;margin-bottom:2px}
.sub-hero-sub{font-size:0.72rem;margin-bottom:6px}
.sub-hero-badge{font-size:0.6rem;padding:2px 10px;margin-bottom:10px}
.sub-perk-row{padding:5px 0;font-size:0.74rem;min-height:calc(var(--layout-membership-perk-icon-size-compact) + 2px);flex:0 0 auto}
.sub-perk-row:nth-last-child(-n+2){border-bottom:none}
.sub-perk-check{margin-left:auto}
.sub-detail-card{padding:var(--layout-membership-detail-padding);margin-bottom:var(--layout-membership-gap-tight)}
.sub-detail-row{padding:3px 0;font-size:0.76rem}
.sub-cancel-box{padding:var(--layout-membership-cancel-padding);margin-bottom:var(--layout-membership-gap-tight)}
.sub-cancel-ttl{font-size:0.78rem;margin-bottom:4px}
.sub-cancel-body{font-size:0.7rem}
.sub-cancel-body p{margin:0 0 2px}
.sub-manage-btn{padding:var(--layout-membership-button-padding);font-size:0.75rem;margin-top:6px}
.sub-trial-card{padding:var(--layout-membership-trial-padding);margin-bottom:10px}
.sub-trial-ico{font-size:1.5rem;margin-bottom:2px}
.sub-trial-title{font-size:0.92rem;margin-bottom:2px}
.sub-trial-msg{font-size:0.72rem;margin-bottom:8px}
.sub-trial-track{margin-bottom:5px}
.sub-trial-pips{margin-bottom:8px}
.sub-trial-locked{padding:10px 12px;margin-top:6px}
.sub-trial-locked-lbl{font-size:0.66rem;margin-bottom:6px}
.sub-locked-row{font-size:0.7rem;padding:5px 0;min-height:calc(var(--layout-membership-locked-icon-size-compact) + 2px)}
.sub-locked-badge{font-size:0.56rem;padding:2px 6px}
.sub-section-hdr{margin-bottom:8px;font-size:0.78rem}
.sub-plans{gap:var(--layout-membership-plan-gap);margin-bottom:4px}
.sub-plan{padding:var(--layout-membership-plan-padding);padding-top:calc(var(--layout-membership-plan-top-padding) + 12px)}
.sub-plan-badge{top:6px;right:8px;font-size:0.56rem;padding:2px 9px}
.sub-plan-name{font-size:0.74rem;margin-bottom:2px}
.sub-plan-price{font-size:1.25rem}
.sub-plan-hint{font-size:0.6rem;margin:2px 0 5px}
.sub-plan-feats{font-size:0.64rem;line-height:1.6;margin-bottom:6px}
.sub-plan-btn{padding:var(--layout-membership-plan-button-padding);font-size:0.72rem}
.profile-screen--subscription{
overflow-y:auto;
padding-right:var(--layout-membership-scroll-pad-right);
}
}
/* ── DESKTOP HEIGHT FIT: notebook width with 900px-ish height ── */
@media(min-width:1200px) and (min-height:821px) and (max-height:920px){
#app{padding:10px 22px 14px;gap:10px}
.home-main,.home-side{gap:11px}
.hero-wrap{min-height:0;padding:18px 24px;padding-right:255px}
.hero-title{font-size:2.4rem}
.hero-sub{font-size:0.84rem;margin-bottom:9px;max-width:100%}
.hero-mascot{width:235px;height:132px}
.hchip{padding:5px 11px}
.info-card{padding:var(--layout-home-info-card-padding-tablet)}
.hiw-item{margin-bottom:calc(var(--layout-home-dash-row-gap) - 2px)}
.mcard{min-height:120px}
.mcard-icon{width:52px;height:56px}
.home-side .card{padding:14px 16px}
.role-journey-box{padding:10px 12px;margin-bottom:9px}
.role-journey-glow img,.role-journey-glow svg,.role-journey-item img,.role-journey-item svg{width:58px!important;height:58px!important}
.prow{padding:var(--layout-home-compact-promo-row-padding);margin-bottom:2px}
.prog-row{margin-bottom:6px}
}
/* ── DESKTOP HEIGHT FIT: notebook width with 800px-ish height ── */
@media(min-width:1200px) and (min-height:501px) and (max-height:820px){
#app{padding:5px 20px 8px;gap:6px}
.home-main,.home-side{gap:8px}
.hero-wrap{min-height:0;padding:13px 20px;padding-right:205px}
.hero-title{font-size:2rem}
.hero-sub{font-size:0.74rem;line-height:1.4;margin-bottom:7px;max-width:100%}
.hero-chips-label{margin:16px 0 3px;font-size:0.58rem}
.hchip{padding:4px 9px;font-size:0.76rem;min-width:50px}
.hero-mascot{width:180px;height:102px;right:12px;bottom:6px}
.info-card{padding:var(--layout-home-info-card-padding-tablet)}
.info-card-hdr{font-size:var(--layout-home-compact-info-head-font);margin-bottom:3px}
.hiw-item{margin-bottom:calc(var(--layout-home-dash-row-gap) - 3px)}
.hiw-badge{width:var(--layout-home-info-badge-size-landscape);height:var(--layout-home-info-badge-size-landscape);font-size:var(--layout-home-dash-icon-font)}
.hiw-item-title{font-size:var(--layout-home-compact-info-title-font)}
.hiw-item-desc{font-size:var(--layout-home-compact-info-desc-font)}
.mcard{min-height:105px}
.mcard-icon{width:46px;height:50px}
.mcard-title{font-size:0.88rem}
.mcard-sub{font-size:0.64rem}
.mcard-start-btn{padding:4px 12px;font-size:0.7rem;margin-top:3px}
.home-side .card{padding:12px 14px}
.role-journey-box{padding:8px 10px;margin-bottom:8px;gap:10px}
.role-journey-glow img,.role-journey-glow svg,.role-journey-item img,.role-journey-item svg{width:50px!important;height:50px!important}
.role-journey-name{font-size:0.64rem}
.prow{padding:var(--layout-home-compact-promo-row-padding);margin-bottom:1px}
.plbl,.pnums{font-size:0.68rem}
.promo-ready-banner{padding:6px 10px;font-size:0.7rem;margin-top:6px}
.streak-fire-icon{font-size:1.5rem}
.streak-card-count{font-size:0.95rem}
.streak-card-title{font-size:0.66rem}
.prog-row{margin-bottom:5px}
.prog-lbl{font-size:0.8rem}
.prog-num{font-size:0.7rem}
/* ── Challenge & lobby: keep compact sizing, but allow the page to extend
and scroll when short browser chrome reduces usable height ── */
#app{
height:auto !important;
min-height:100dvh !important;
overflow:visible !important;
}
#main{
flex:1 !important;
min-height:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding-bottom:84px;
}
/* Lobby: auto-height inside locked #main; compact to fit */
.ch-lobby-horiz{height:auto !important;min-height:0 !important;overflow:visible !important;gap:6px}
.ch-lobby-banner{padding:8px 16px;gap:12px}
.ch-lobby-banner .lobby-banner-icon{font-size:1.6rem}
.ch-lobby-banner .lobby-banner-title{font-size:1.1rem}
.ch-lobby-banner .lobby-banner-sub{font-size:0.68rem;line-height:1.35}
.ch-info-card{padding:10px 14px}
.ch-action-card{padding:10px 14px;gap:8px}
.ch-action-vs{font-size:1.8rem;margin-bottom:0}
.ch-action-title{font-size:1rem}
.ch-action-sub{font-size:0.72rem}
.speed-mode-banner{padding:8px 12px;margin-bottom:6px}
.smb-title{font-size:0.82rem}
.smb-sub{font-size:0.72rem}
/* Challenge play: parent chain determines height, not dvh calc */
.sc-grid:has(.ch-fullscreen){height:auto !important}
.sc-grid .ch-fullscreen{max-height:none !important;height:auto !important;overflow:visible !important}
/* Compact VS bar: reduce avatar, tighten padding */
.ch-vs-bar{padding:8px 16px}
.ch-av-ring{width:52px !important;height:52px !important}
.ch-pts{font-size:1.1rem}
.ch-vs-badge{width:36px !important;height:36px !important;font-size:1.1rem}
/* Compact timer row */
.challenge-timer-row{padding:6px 14px;margin:4px 0 6px}
.challenge-timer{min-width:36px !important;height:36px !important;font-size:1.05rem}
/* Compact question card */
.ch-question-card{padding:10px 14px}
.ch-q-title{font-size:1rem}
.ch-q-body{font-size:0.88rem;line-height:1.42}
/* Compact choices */
.ch-choices{gap:6px}
.ch-choices .cho-btn{padding:10px 13px;font-size:0.86rem;min-height:44px !important}
.rewards-hero{padding:var(--layout-rewards-hero-padding);gap:var(--layout-rewards-hero-gap)}
.rewards-hero-title{font-size:1.1rem}
.rewards-hero-sub{font-size:.72rem}
.rewards-balance{min-width:var(--layout-rewards-balance-min-width);max-width:var(--layout-rewards-balance-max-width)}
.rewards-shop-card{padding:var(--layout-rewards-shop-card-padding)}
.rewards-shop-icon{font-size:1.75rem}
.rewards-shop-title{font-size:.92rem}
.rewards-shop-desc{font-size:.68rem}
.rewards-shop-btn{padding:var(--layout-rewards-shop-button-padding);font-size:.74rem}
}
.home-bottom-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
/* ── PATTERN INTEGRATION ── */
.feature-card,.tips-card,.side-guide-card{
border-radius:var(--r);
padding:18px;
box-shadow:0 6px 24px rgba(14,165,233,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
position:relative;
overflow:hidden;
}
.feature-card{
background:linear-gradient(135deg,#FFFFFF 0%,#ECFDF5 100%),
radial-gradient(circle at 20% 50%, rgba(16,185,129,0.04) 1px, transparent 1px);
background-size:100%, 80px 80px;
border:2px solid var(--mint);
border-left:4px solid var(--mint);
}
.tips-card{
background:linear-gradient(135deg,#FFFFFF 0%,#F5F3FF 100%),
radial-gradient(circle at 30% 40%, rgba(124,58,237,0.04) 1.5px, transparent 1.5px);
background-size:100%, 90px 90px;
border:2px solid var(--vibrant-purple);
border-left:4px solid var(--vibrant-purple);
}
.side-guide-card{
background:var(--card);
border:2px solid #D1D5DB;
}
.feature-card::after,.tips-card::after,.side-guide-card::after{
content:'';
position:absolute;
top:-35px;
right:-35px;
width:100px;
height:100px;
border-radius:50%;
background:radial-gradient(circle,rgba(16,185,129,0.08),transparent 70%);
pointer-events:none;
}
.fc-title,.tc-title,.sg-title{font-size:1rem;font-weight:800;color:var(--sky-dk);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.feature-mission{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.mini-stat{background:var(--bg0);border:1px solid var(--border2);border-radius:var(--r-sm);padding:12px 10px;text-align:center}
.mini-stat .msv{font-size:1.1rem;font-weight:800;color:var(--sky3)}
.mini-stat .msl{font-size:0.7rem;font-weight:700;color:var(--muted2);margin-top:2px}
.goal-pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.goal-pill{background:var(--sky-lt);color:var(--sky3);border:1px solid var(--sky-md);border-radius:999px;padding:6px 10px;font-size:0.72rem;font-weight:700}
.tip-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tip-item{display:flex;flex-direction:column;gap:7px;align-items:flex-start;background:#F8FBFF;border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 12px}
.tip-ico{width:32px;height:32px;border-radius:10px;background:var(--mint-lt);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem}
.tip-copy{font-size:0.78rem;line-height:1.5;color:var(--muted)}
.tip-copy strong{display:block;color:var(--text);font-size:0.82rem;margin-bottom:3px}
.tc-footer{font-size:0.68rem;color:var(--muted2);text-align:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
@media(max-width:600px){.tip-list{grid-template-columns:1fr}}
.guide-list{display:grid;gap:9px}
.guide-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
.guide-row:last-child{border-bottom:none}
.guide-lbl{font-size:0.76rem;font-weight:700;color:var(--text)}
.guide-sub{font-size:0.68rem;color:var(--muted2);margin-top:2px}
.guide-val{font-size:0.76rem;font-weight:800;color:var(--sky3);white-space:nowrap}
@media(max-width:960px){.home-bottom-grid{grid-template-columns:1fr}}
/* ═══════════════════════════════════════════════════════════════
PHONE LAYOUTS
480px and below = compact phone rules
481px - 700px = larger phone / phablet bridge rules
═══════════════════════════════════════════════════════════════ */
/* ── MOBILE HUD FIX ── */
@media(max-width:480px){
/* ── HUD: compact chips so nothing overflows ── */
#hud{padding:7px 8px;gap:4px;flex-wrap:nowrap}
.hs{font-size:0.72rem;padding:4px 6px;gap:4px;flex-shrink:1;min-width:0}
.hs-lbl{display:none} /* hide stat labels to save width */
.hs img{width:16px;height:16px}
.hud-pos{font-size:0.64rem;padding:3px 7px;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-av-ring{width:26px;height:26px;flex-shrink:0}
/* ── Hero card: chips in 2×2 grid instead of vertical stack ── */
.hero-wrap{padding:14px;min-height:0}
.hero-mascot{width:112px;height:64px;right:6px;bottom:6px}
.hero-title,.hero-sub,.hero-chips-label,.hero-chips{max-width:calc(100% - 122px)}
.hero-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.hchip{min-width:0;padding:6px 8px;font-size:0.8rem;border-radius:10px}
.hero-title{font-size:1.5rem;margin-bottom:4px}
.hero-sub{font-size:0.76rem;margin-bottom:8px}
.hero-chips-label{margin-top:16px;margin-bottom:3px}
/* ── Play mode cards: horizontal rows ── */
.mode-row{grid-template-columns:1fr !important;grid-auto-rows:auto !important;gap:10px}
.mcard{min-height:80px !important;max-height:none !important;flex-direction:row;padding:14px 16px;gap:0;align-items:center}
.mcard-content{flex-direction:row;text-align:left;padding:0;gap:12px;height:auto;align-items:center;justify-content:flex-start}
.mcard-icon{width:52px;height:52px;margin:0;flex-shrink:0}
.mcard-text-block{flex:1;min-width:0}
.mcard-title{font-size:0.95rem;margin:0 0 2px}
.mcard-sub{font-size:0.7rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard-progress-copy{font-size:0.56rem;margin:3px 0 0;color:rgba(255,255,255,0.74)}
.mcard-content > .prog-bar,.mcard .prog-bar{width:100%;margin:4px 0}
.mcard-start-btn{padding:5px 14px;font-size:0.74rem;margin-top:4px;white-space:nowrap}
.mcard.choice-adventure .mcard-content{gap:8px}
.mcard.choice-adventure .mcard-icon{width:44px;height:44px}
.progress-badge{padding:2px 8px;font-size:0.6rem;margin:2px 0}
/* ── Choice buttons: ensure good tap size ── */
.cho-btn{padding:13px 14px;font-size:0.9rem;min-height:52px}
/* ── Profile tabs: prevent overflow ── */
.prof-tabs{gap:4px}
.tab-btn{font-size:0.72rem;padding:6px 8px}
/* ── Nav bar: compact for mobile ── */
#nav{gap:8px;padding:10px;flex-wrap:wrap}
.nav-left{gap:8px;flex-shrink:1;min-width:0}
.nav-logo{font-size:0.9rem;gap:4px;flex-shrink:0;min-width:var(--layout-nav-logo-min-width-mobile);overflow:visible;text-overflow:clip;white-space:nowrap;max-width:var(--layout-nav-logo-max-width-mobile)}
.nav-btn{padding:6px 10px;font-size:0.75rem;gap:4px;flex-shrink:0}
.nav-btn .nav-btn-text{display:inline-flex;white-space:normal;text-align:center;line-height:1.05}
.nav-right{gap:6px;flex-shrink:0;margin-left:auto;justify-content:flex-end}
.nav-profile{padding:5px 8px 5px 5px;gap:6px}
.nav-profile-info{display:none} /* hide name+role text, show avatar only */
.nav-av{width:30px;height:30px}
.sound-btn,.icon-btn{width:34px;height:34px;font-size:1rem}
.paywall-wrap{padding:var(--layout-paywall-padding-mobile)}
.paywall-plans{grid-template-columns:1fr}
.paywall-plan{padding:var(--layout-paywall-plan-padding-mobile)}
.ws-box{padding:16px 14px 12px}
.ws-shell{grid-template-columns:1fr;gap:14px}
.ws-brand-panel,.ws-auth-card{padding:20px 18px}
.ws-mascot{width:min(260px,76%)}
.ws-title{font-size:2rem}
.ws-sub{font-size:0.98rem}
.ws-field-grid{grid-template-columns:1fr}
}
@media(min-width:481px) and (max-width:700px){
.paywall-plans{grid-template-columns:1fr}
}
/* ═══════════════════════════════════════════════════════════════
SHARED RESPONSIVE LAYOUTS
These are component safety rules. Route-level layout bands must still
consider both viewport width and height before locking a fit-screen layout.
═══════════════════════════════════════════════════════════════ */
/* ── RESPONSIVE ── */
@media(max-width:960px){
.ws-shell{grid-template-columns:1fr;max-width:760px}
.ws-brand-panel{min-height:auto}
.home-dashboard{grid-template-columns:1fr;gap:12px}
.sc-grid{grid-template-columns:1fr;height:auto !important;overflow:visible}
.sc-main{overflow:visible;height:auto}
.sidebar{overflow:visible;height:auto}
.sc-top{flex:none;min-height:160px}
.upg-grid{grid-template-columns:1fr}
#app{padding:10px 12px 0;max-width:none}
#main{padding-bottom:var(--layout-play-scroll-padding)}
#main:has(.sc-grid){overflow:auto;padding-bottom:var(--layout-play-scroll-padding)}
.card{padding:15px 13px 13px}
.hs{font-size:0.74rem;padding:4px 8px}
#hud{gap:4px}
.hero-title{font-size:2rem}
.hero-wrap{padding-right:220px}
.hero-mascot{width:200px;height:112px;right:10px;bottom:10px}
.hero-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hchip{min-width:0}
.mode-row{gap:8px;margin-top:10px;grid-auto-rows:210px}
.mcard{min-height:210px;max-height:210px}
}
/* Between small tablet and mobile — use 2×2 chip grid */
@media(max-width:600px){
.hero-chips{grid-template-columns:repeat(2,1fr) !important}
}
@media(min-width:1200px) and (min-height:700px){.sc-grid{grid-template-columns:minmax(0,2fr) minmax(320px,380px)}}
/* STREAK UNDER DAILY PROGRESS */
.streak-inline{
margin-top:10px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.streak-chip{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 12px;
border-radius:999px;
background:var(--amber-lt);
border:1.5px solid var(--amber-md);
color:#B45309;
font-size:0.8rem;
font-weight:800;
}
.home-progress-card--challenge .streak-chip,
.home-progress-combo-row--challenge .streak-chip{
background:linear-gradient(135deg,#FFF8D9,#FFE7B0);
border-color:#F9C66B;
color:#A15C05;
box-shadow:0 4px 12px rgba(245,158,11,0.14);
}
.streak-chip-label{
white-space:nowrap;
}
.streak-chip-value{
min-width:20px;
text-align:center;
font-weight:900;
}
.streak-sub{
font-size:0.72rem;
color:var(--muted2);
text-align:right;
}
.home-promo-card .prog-lbl{
display:inline-flex;
align-items:center;
gap:var(--layout-home-dash-title-gap);
padding:var(--layout-home-dash-title-padding);
border-radius:999px;
background:var(--tone-home-title-badge-bg);
border:1px solid var(--tone-home-title-badge-border);
color:var(--tone-home-title-badge-color);
font-size:var(--layout-home-dash-title-font);
font-weight:900;
text-transform:uppercase;
letter-spacing:var(--layout-home-dash-title-letter-spacing);
line-height:1;
box-shadow:0 5px 14px rgba(37,99,235,0.06);
}
.home-progress-card--story .panel-h,
.home-progress-card--story .prog-lbl{color:#6D28D9}
.home-progress-card--story .prog-bar{
background:#F2E8FF;
border:1px solid #DDC7FF;
}
.home-progress-card--story .prog-fill{
background:linear-gradient(90deg,#A855F7,#F472B6);
box-shadow:0 1px 6px rgba(168,85,247,0.28);
}
.home-progress-card--story .home-progress-note{color:#7C6A97}
.home-progress-card--challenge .prog-lbl{color:#174D96}
.home-progress-card--challenge .prog-bar{
background:#E7F0FF;
border:1px solid #C9DBFF;
}
.home-progress-card--challenge .prog-fill{
background:linear-gradient(90deg,#2563EB,#F59E0B);
box-shadow:0 1px 6px rgba(37,99,235,0.25);
}
.home-progress-card--challenge .streak-sub{color:#64748B}
@media (max-width: 768px) {
.sc-top{
max-width:100%;
padding:20px;
min-height:unset;
}
.sc-name{
font-size:24px;
max-width:100%;
}
.sc-body{
font-size:18px;
max-width:100%;
}
}
@media(max-width:960px){
.streak-inline{flex-direction:column;align-items:flex-start}
.streak-sub{text-align:left}
}
@media(min-width:769px) and (max-width:960px){
#app{padding:12px 14px 0;max-width:none;gap:12px}
#main{padding-bottom:var(--layout-play-scroll-padding-tablet)}
#main:has(.sc-grid){overflow:auto;padding-bottom:var(--layout-play-scroll-padding-tablet)}
#nav{padding:12px 14px;gap:10px}
.nav-left{gap:10px;min-width:0}
.nav-logo{min-width:var(--layout-nav-logo-min-width-mobile);max-width:var(--layout-nav-logo-max-width-mobile);overflow:visible;text-overflow:clip}
.nav-right{gap:8px;min-width:0}
.nav-btn{padding:7px 12px}
#hud{padding:10px 12px;gap:6px;flex-wrap:wrap}
.hs{padding:6px 10px;min-width:0}
.hud-pos{max-width:100%;margin-left:0}
.hero-wrap{padding:18px;display:flex;flex-direction:column;gap:12px}
.hero-title{font-size:2.1rem}
.hero-sub{max-width:70%;font-size:0.82rem}
.hero-mascot{width:190px;height:108px;right:10px;bottom:10px}
.hero-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:70%}
.hchip{min-width:0}
.rewards-grid{grid-template-columns:1fr}
.rewards-hero{flex-direction:column;align-items:stretch}
.rewards-balance{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;max-width:none}
.mode-row{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(180px,1fr);gap:10px}
.mcard{min-height:180px;max-height:none}
.info-cards-row{grid-template-columns:1fr}
.paywall-wrap{max-width:var(--layout-paywall-max-width-tablet)}
.paywall-plans{grid-template-columns:1fr;gap:var(--layout-paywall-plan-gap-tablet)}
.sc-grid{grid-template-columns:minmax(0,1fr);height:auto !important;overflow:visible}
.sc-main,.sidebar{overflow:visible;height:auto}
.sc-top{flex:none;min-height:0;padding:18px 20px}
.sc-q-glass{max-width:none}
.choices{gap:10px}
.prof-hero-body{flex-direction:column;align-items:stretch}
.prof-hero-left,.prof-hero-center,.prof-hero-right{width:100%;min-width:0;max-width:100%}
.ca-lobby-horiz,.ch-lobby-horiz{height:auto;overflow:visible}
#main:has(.ca-lobby-horiz),#main:has(.ch-lobby-horiz){overflow:auto;padding-bottom:var(--layout-play-scroll-padding-tablet)}
.ch-lobby-horiz{max-width:var(--layout-tablet-shell-max-width);margin:0 auto;gap:14px}
.ch-lobby-banner{padding:12px 16px;gap:12px}
.ch-lobby-cards{grid-template-columns:minmax(0,1.1fr) minmax(280px,0.9fr) !important;display:grid;height:auto;overflow:visible;align-items:stretch}
.ch-info-card,.ch-action-card{min-height:0}
.ch-action-card{padding:22px 18px}
.ch-action-vs{font-size:3rem}
.sc-grid:has(.ch-fullscreen){max-width:var(--layout-tablet-shell-max-width);margin:0 auto;grid-template-columns:minmax(0,1fr) !important}
.sc-grid:has(.ch-fullscreen) .sidebar{display:none}
.sc-grid:has(.ch-fullscreen) .ch-fullscreen{padding:14px 16px;max-width:none}
.sc-grid:has(.ch-fullscreen) .ch-topbar{flex-wrap:nowrap;justify-content:space-between}
.sc-grid:has(.ch-fullscreen) .ch-dots{flex-wrap:wrap;justify-content:flex-end;max-width:220px}
.sc-grid:has(.ch-fullscreen) .ch-vs-bar{padding:12px 14px}
.sc-grid:has(.ch-fullscreen) .ch-av-ring{width:60px;height:60px}
.sc-grid:has(.ch-fullscreen) .ch-name{font-size:0.74rem;max-width:84px}
.sc-grid:has(.ch-fullscreen) .ch-pts{font-size:1.28rem}
.sc-grid:has(.ch-fullscreen) .challenge-timer-row{margin:4px 0 6px;padding:4px 8px}
.sc-grid:has(.ch-fullscreen) .challenge-timer{min-width:36px;height:36px;font-size:1.12rem}
.sc-grid:has(.ch-fullscreen) .ch-question-card{padding:12px 14px}
.sc-grid:has(.ch-fullscreen) .ch-q-title{font-size:1.02rem}
.sc-grid:has(.ch-fullscreen) .ch-q-body{font-size:0.9rem;line-height:1.3}
.sc-grid:has(.ch-fullscreen) .ch-choices{gap:8px}
.sc-grid:has(.ch-fullscreen) .cho-btn{padding:12px 13px;font-size:0.88rem}
}
.icon-btn {
background: var(--sky-lt);
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.icon-btn:hover {
transform: scale(1.1);
background: var(--sky-md);
}
/* ── CHALLENGE ROUND HEADER ── */
.challenge-header{background:linear-gradient(135deg,#F3F4F6 0%,#E5E7EB 100%);border-radius:12px;padding:16px 18px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,0.08);border:1px solid #D1D5DB}
.challenge-round-title{text-align:center;font-size:0.9rem;font-weight:700;color:var(--muted);margin-bottom:8px;letter-spacing:0.5px}
.round-number{color:var(--sky);font-size:1.05rem;font-weight:800}
.challenge-round-indicators{display:flex;justify-content:center;gap:4px;margin-bottom:12px}
.round-dot{width:8px;height:8px;border-radius:50%;background:#D1D5DB;transition:all 0.3s ease}
.round-dot.active{background:var(--mint)}
.round-dot.current{width:12px;height:12px;background:var(--sky);box-shadow:0 0 0 2px rgba(14,165,233,0.2)}
.challenge-scores{display:flex;gap:12px;justify-content:center}
.score-box{padding:10px 16px;border-radius:8px;text-align:center;min-width:110px;transition:transform 0.2s ease}
.score-box:hover{transform:translateY(-2px)}
.player-score{background:linear-gradient(135deg,rgba(14,165,233,0.1),rgba(2,132,199,0.1));border:1.5px solid var(--sky-md);box-shadow:inset 0 0 0 2px var(--sky);border-radius:12px}
.mini-boss-score{background:linear-gradient(135deg,rgba(249,115,22,0.1),rgba(234,88,12,0.1));border:1.5px solid #FB923C}
.score-label{font-size:0.8rem;font-weight:700;color:var(--muted);margin-bottom:4px;letter-spacing:0.3px}
.player-score .score-label{color:var(--sky-dk)}
.mini-boss-score .score-label{color:#B45309}
.score-value{font-size:1.4rem;font-weight:800;color:var(--text);margin-bottom:2px}
.player-score .score-value{color:var(--sky)}
.mini-boss-score .score-value{color:#F97316}
.score-unit{font-size:0.65rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
/* ── CHALLENGE HEADER AVATARS ── */
.player-avatar-section,.miniboss-avatar-section{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}
.player-avatar-circle,.miniboss-avatar-circle{width:40px;height:40px;border-radius:50%;overflow:hidden;background:rgba(14,165,233,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:6px;border:2px solid}
.player-avatar-circle{border-color:var(--sky)}
.miniboss-avatar-circle{border-color:#F97316}
.player-avatar-circle svg,.miniboss-avatar-circle svg{width:100%;height:100%}
.player-name-label,.miniboss-label{font-size:0.75rem;font-weight:700;color:var(--text);text-align:center;max-width:80px;word-break:break-word}
.miniboss-label{color:#B45309}
/* ── RESULTS SCREEN STYLING ── */
.result-header{text-align:center;font-size:1.3rem;font-weight:800;color:var(--text);margin-bottom:25px;letter-spacing:0.5px}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:25px}
.result-card{border-radius:12px;padding:20px;text-align:center;border:2px solid;transition:transform 0.2s ease}
.result-card:hover{transform:translateY(-4px)}
.result-your-choice{background:linear-gradient(135deg,rgba(14,165,233,0.08),rgba(2,132,199,0.08));border-color:var(--sky)}
.result-miniboss-choice{background:linear-gradient(135deg,rgba(249,115,22,0.08),rgba(234,88,12,0.08));border-color:#FB923C}
.result-avatar{width:50px;height:50px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;border:2px solid}
.result-your-choice .result-avatar{border-color:var(--sky)}
.result-miniboss-choice .result-avatar{border-color:#F97316}
.result-avatar svg{width:100%;height:100%}
.result-label{font-size:0.85rem;font-weight:700;color:var(--muted);margin-bottom:8px;letter-spacing:0.3px;text-transform:uppercase}
.result-choice-text{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:12px;line-height:1.4}
.result-status{font-size:0.95rem;font-weight:700;padding:8px;border-radius:6px}
.result-status.correct{color:#059669;background:rgba(5,150,105,0.1)}
.result-status.incorrect{color:#DC2626;background:rgba(220,38,38,0.1)}
.result-score-summary{display:flex;align-items:center;justify-content:center;gap:20px;padding:20px;background:linear-gradient(135deg,#F3F4F6 0%,#E5E7EB 100%);border-radius:12px;margin-bottom:20px}
.result-score-you,.result-score-miniboss{font-size:2rem;font-weight:800;text-align:center}
.result-score-you{color:var(--sky);flex:1}
.result-score-miniboss{color:#F97316;flex:1}
.result-score-vs{font-size:0.9rem;font-weight:700;color:var(--muted);text-transform:uppercase}
.result-best-choice{text-align:center;font-size:0.9rem;color:var(--muted);padding:15px;background:var(--muted-lt);border-radius:8px;line-height:1.5}
/* ── SPEED MODE LOBBY BANNER ── */
.speed-mode-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#1E293B 0%,#0F172A 100%);border-radius:14px;padding:14px 18px;margin-bottom:20px;border:2px solid #F97316;text-align:left}
.smb-icon{font-size:2.4rem;flex-shrink:0;animation:smb-pulse 1.2s ease-in-out infinite alternate}
@keyframes smb-pulse{from{transform:scale(1)}to{transform:scale(1.2)}}
.smb-title{font-size:1rem;font-weight:900;color:#FB923C;letter-spacing:.5px;margin-bottom:3px}
.smb-sub{font-size:0.82rem;color:#94A3B8;line-height:1.5}
.smb-sub strong{color:#FBBF24}
/* ── CHALLENGE FULL-SCREEN NO-SCROLL LAYOUT ── */
.ch-fullscreen{display:flex;flex-direction:column;gap:var(--layout-challenge-gap);min-height:0;padding:var(--layout-challenge-padding);max-width:var(--layout-challenge-max-width);margin:0 auto;box-sizing:border-box}
.sc-grid .ch-fullscreen{max-width:none;margin:0;width:100%;min-height:0;height:auto;max-height:none;overflow:visible;background:var(--card);border-radius:var(--layout-challenge-card-radius);box-shadow:inset 0 0 0 2px var(--sky)}
.sc-grid .ch-fullscreen .ch-choices{flex:0 0 auto;justify-content:flex-start}
.sc-grid .ch-fullscreen .ch-choices .cho-btn{flex:none}
.ch-topbar{display:flex;align-items:center;gap:var(--layout-challenge-topbar-gap);justify-content:space-between}
.ch-back-btn{background:rgba(255,255,255,0.15);border:1.5px solid rgba(255,255,255,0.25);border-radius:50px;padding:5px 14px;font-size:0.78rem;font-weight:700;color:var(--text);cursor:pointer;white-space:nowrap;transition:background 0.15s}
.ch-back-btn:hover{background:var(--sky-lt)}
.ch-round-info{font-size:var(--layout-challenge-round-info-size);font-weight:700;color:var(--muted);white-space:nowrap}
.ch-round-info strong{color:var(--sky);font-size:var(--layout-challenge-round-strong-size)}
.sc-grid.sc-grid--challenge .ch-round-info{
color:#E2E8F0;
font-weight:800;
text-shadow:0 2px 10px rgba(15,23,42,0.28);
}
.sc-grid.sc-grid--challenge .ch-round-info strong{
color:#FDE68A;
font-weight:900;
}
.sc-grid.sc-grid--challenge .round-dot{
background:rgba(255,255,255,0.30);
}
.sc-grid.sc-grid--challenge .round-dot.active{
background:#93C5FD;
}
.sc-grid.sc-grid--challenge .round-dot.current{
background:#FDE68A;
box-shadow:0 0 0 2px rgba(253,230,138,0.22);
}
.ch-dots{display:flex;gap:3px;align-items:center}
/* ── VS BAR ── */
.ch-vs-bar{display:flex;align-items:center;justify-content:center;gap:0;background:linear-gradient(135deg,rgba(14,165,233,0.08) 0%,rgba(249,115,22,0.08) 100%);border-radius:18px;padding:var(--layout-challenge-vs-padding);border:1.5px solid var(--border2)}
.ch-combatant{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1}
.ch-av-ring{width:var(--layout-challenge-avatar-size);height:var(--layout-challenge-avatar-size);border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.12);flex-shrink:0}
.ch-av-ring svg,.ch-av-ring img{width:100%;height:100%;object-fit:cover;display:block;}
.player-ring{border:3px solid var(--sky);background:rgba(14,165,233,0.1);box-shadow:0 0 0 4px rgba(14,165,233,0.15),0 4px 16px rgba(14,165,233,0.2)}
.boss-ring{border:3px solid #F97316;background:rgba(249,115,22,0.1);box-shadow:0 0 0 4px rgba(249,115,22,0.15),0 4px 16px rgba(249,115,22,0.2)}
.ch-name{font-size:var(--layout-challenge-name-size);font-weight:800;max-width:90px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-color{color:var(--sky3)}
.boss-color{color:#C2410C}
.ch-pts{font-size:var(--layout-challenge-score-size);font-weight:900;line-height:1}
.ch-pts-lbl{font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:0.7}
.ch-vs-badge{font-size:1.3rem;font-weight:900;color:#fff;background:linear-gradient(135deg,#F97316,#DC2626);border-radius:50%;width:var(--layout-challenge-vs-badge-size);height:var(--layout-challenge-vs-badge-size);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:var(--layout-challenge-vs-badge-margin);box-shadow:0 4px 14px rgba(220,38,38,0.4);letter-spacing:-1px;animation:vsPulse 2s ease-in-out infinite}
@keyframes vsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* ── CHALLENGE QUESTION CARD ── */
.ch-question-card{background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);border-radius:var(--layout-challenge-card-radius);padding:var(--layout-challenge-question-padding);color:var(--text);border:1.5px solid #CFE5F8;box-shadow:0 12px 28px rgba(15,23,42,0.08);position:relative}
.sc-top .local-question-watermark{margin:0 0 8px}
.ch-question-card .local-question-watermark{display:flex;margin:0 0 4px auto}
.choiceadventure-story-card .local-question-watermark{margin:0 0 2px}
.ch-q-icon-ring{width:var(--layout-challenge-question-icon-size);height:var(--layout-challenge-question-icon-size);margin:2px auto 6px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;box-shadow:none}
.ch-q-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;min-height:24px;padding:0 42px}
.ch-q-cat{font-size:0.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#2563EB;flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}
.ch-q-cat-text{min-width:0}
.ch-q-cat-icon{width:calc(var(--layout-challenge-question-icon-size) * var(--layout-play-category-icon-art-scale));height:calc(var(--layout-challenge-question-icon-size) * var(--layout-play-category-icon-art-scale));object-fit:contain;flex:0 0 auto;display:inline-block;vertical-align:middle}
.ch-q-cat-icon--emoji{display:inline-flex;align-items:center;justify-content:center;font-size:calc(var(--layout-challenge-question-icon-size) * .72);line-height:1}
.ch-q-title{font-size:var(--layout-challenge-question-title-size);font-weight:800;margin-bottom:var(--layout-challenge-question-title-gap);line-height:var(--layout-challenge-question-title-line-height);color:#0F172A}
.ch-q-diff{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;justify-content:center;width:max-content;max-width:calc(100% - 20px);margin:0;padding:4px 10px;border-radius:999px;background:linear-gradient(135deg,#DBEAFE,#EDE9FE);border:1.5px solid #C4B5FD;color:#4338CA;font-size:.68rem;font-weight:900;line-height:1;text-transform:none;white-space:nowrap;z-index:2}
.ch-q-body{font-size:var(--layout-challenge-question-body-size);line-height:var(--layout-challenge-question-body-line-height);color:#334155;text-align:center}
.ch-choices{display:flex;flex-direction:column;gap:var(--layout-challenge-choice-gap)}
/* ── CHALLENGE WINNER SCREEN ── */
.challenge-winner-card{max-width:var(--layout-challenge-winner-max-width);margin:0 auto;padding:var(--layout-challenge-winner-padding);text-align:center}
.challenge-winner-emoji{font-size:3.2rem;margin-bottom:8px}
.challenge-winner-title{font-size:1.22rem;font-weight:700;margin-bottom:6px}
.challenge-finish-card{max-width:var(--layout-challenge-finish-max-width);margin:0 auto;padding:var(--layout-challenge-finish-padding);border-radius:var(--layout-challenge-finish-radius);position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);border:1.5px solid #DCEEFE;box-shadow:0 22px 48px rgba(14,76,129,0.12)}
.challenge-finish-card::before{content:'';position:absolute;inset:0;background:
radial-gradient(circle at top left,rgba(56,189,248,0.16),transparent 34%),
radial-gradient(circle at top right,rgba(167,139,250,0.16),transparent 30%),
radial-gradient(circle at bottom center,rgba(253,230,138,0.18),transparent 36%);
pointer-events:none}
.challenge-finish--win{
border:2px solid #60A5FA;
background:
radial-gradient(circle at top right,rgba(134,239,172,0.28),transparent 28%),
radial-gradient(circle at bottom left,rgba(191,219,254,0.35),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#F2FFF8 100%);
box-shadow:0 22px 48px rgba(37,99,235,0.14);
}
.challenge-finish--loss{
border:2px solid #60A5FA;
background:
radial-gradient(circle at top right,rgba(191,219,254,0.42),transparent 28%),
radial-gradient(circle at bottom left,rgba(253,186,116,0.18),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#F4F9FF 100%);
box-shadow:0 22px 48px rgba(37,99,235,0.14);
}
.challenge-finish--draw{
border:2px solid #60A5FA;
background:
radial-gradient(circle at top right,rgba(253,224,71,0.2),transparent 28%),
radial-gradient(circle at bottom left,rgba(191,219,254,0.32),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#FFFDF5 100%);
box-shadow:0 22px 48px rgba(37,99,235,0.14);
}
.challenge-finish--day{border-color:#BAE6FD}
.challenge-finish--day{
border:2px solid #60A5FA;
background:
radial-gradient(circle at top right,rgba(191,219,254,0.42),transparent 28%),
radial-gradient(circle at bottom left,rgba(110,231,183,0.18),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#F2FBFF 100%);
box-shadow:0 20px 40px rgba(37,99,235,0.14);
}
.challenge-finish-top,.challenge-finish-scoreboard,.challenge-finish-summary,.challenge-finish-mini-grid,.challenge-finish-trail-wrap,.challenge-loot-wrap,.challenge-loot-cards,.challenge-finish-actions{position:relative;z-index:1}
.challenge-finish-top{text-align:center;margin-bottom:var(--layout-challenge-finish-top-gap)}
.challenge-finish-stamp{width:var(--layout-challenge-finish-stamp-size);height:var(--layout-challenge-finish-stamp-size);margin:0 auto 10px;border-radius:var(--layout-challenge-finish-stamp-radius);display:flex;align-items:center;justify-content:center;font-size:2.7rem;background:linear-gradient(135deg,#E0F2FE,#EDE9FE);box-shadow:0 16px 30px rgba(59,130,246,0.16);animation:floatBounce 3.2s ease-in-out infinite}
.challenge-finish-kicker{display:inline-flex;align-items:center;gap:8px;padding:var(--layout-challenge-finish-kicker-padding);border-radius:999px;background:#EFF6FF;color:#0F4C81;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.challenge-finish-title{font-size:1.65rem;font-weight:900;color:#0F4C81;letter-spacing:-.03em;margin-bottom:6px}
.challenge-finish-msg{font-size:.9rem;font-weight:700;max-width:560px;margin:0 auto;line-height:1.42}
.challenge-finish-outcome{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;padding:6px 12px;border-radius:999px;background:linear-gradient(135deg,#FFF7DB,#FEF3C7);border:1.5px solid #FCD34D;font-size:.74rem;font-weight:900;color:#92400E}
.challenge-finish-scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--layout-challenge-finish-scoreboard-gap);align-items:center;margin:0 auto 10px;padding:var(--layout-challenge-finish-scoreboard-padding);border-radius:var(--layout-challenge-finish-scoreboard-radius);background:linear-gradient(135deg,#F8FDFF,#EEF6FF);border:1.5px solid #D8EEFF}
.challenge-finish-score-side{border-radius:18px;padding:var(--layout-challenge-finish-score-side-padding);background:#fff;box-shadow:0 10px 24px rgba(15,76,129,0.08)}
.challenge-finish-score-side--you{border:1.5px solid #93C5FD}
.challenge-finish-score-side--boss{border:1.5px solid #FDBA74}
.challenge-finish-score-avatar{width:var(--layout-challenge-finish-score-avatar-size);height:var(--layout-challenge-finish-score-avatar-size);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,#E0F2FE,#F8FAFC);box-shadow:0 10px 22px rgba(15,76,129,0.12);overflow:hidden}
.challenge-finish-score-avatar svg,.challenge-finish-score-avatar img{width:100%;height:100%;display:block}
.challenge-finish-score-side--you .challenge-finish-score-avatar{border:3px solid #38BDF8;box-shadow:0 0 0 5px rgba(56,189,248,0.16),0 10px 22px rgba(14,165,233,0.18);background:linear-gradient(135deg,#E0F2FE,#FFFFFF)}
.challenge-finish-score-side--boss .challenge-finish-score-avatar{border:3px solid #F97316;box-shadow:0 0 0 5px rgba(249,115,22,0.16),0 10px 22px rgba(234,88,12,0.18);background:linear-gradient(135deg,#FFEDD5,#FFFFFF)}
.challenge-finish-score-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748B;margin-bottom:6px}
.challenge-finish-score-num{font-size:2.2rem;font-weight:900;line-height:1;color:#0F4C81;margin-bottom:8px}
.challenge-finish-vs{font-size:.92rem;font-weight:900;color:#fff;background:linear-gradient(135deg,#F97316,#FB923C);border-radius:999px;padding:8px 11px;letter-spacing:.08em;box-shadow:0 10px 20px rgba(249,115,22,0.22)}
.challenge-finish-score-bar{height:10px;border-radius:999px;background:#E5EEF8;overflow:hidden}
.challenge-finish-score-fill{height:100%;border-radius:999px}
.challenge-finish-score-fill--you{background:linear-gradient(90deg,#38BDF8,#2563EB)}
.challenge-finish-score-fill--boss{background:linear-gradient(90deg,#FB923C,#F97316)}
.challenge-finish-summary{padding:var(--layout-challenge-finish-summary-padding);border-radius:var(--layout-challenge-finish-summary-radius);background:linear-gradient(135deg,#FEF3C7,#FFF7DB);border:1.5px solid #FCD34D;margin-bottom:14px;text-align:center}
.challenge-finish-summary--compact{margin-bottom:12px}
.challenge-finish-summary--day{background:linear-gradient(135deg,#E0F2FE,#F0F9FF);border-color:#7DD3FC}
.challenge-finish-summary-title{font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#92400E;margin-bottom:6px}
.challenge-finish-summary-copy{font-size:1rem;line-height:1.5;color:#7C2D12}
.challenge-finish-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--layout-challenge-finish-mini-gap);margin-bottom:14px}
.challenge-finish-mini-grid--compact{margin-bottom:10px}
.challenge-finish-mini-card{padding:var(--layout-challenge-finish-mini-padding);border-radius:var(--layout-challenge-finish-mini-radius);background:linear-gradient(135deg,#F8FAFC,#EEF6FF);border:1.5px solid #DCEEFE;text-align:center}
.challenge-finish-mini-label{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748B;margin-bottom:6px}
.challenge-finish-mini-val{font-size:1rem;font-weight:900;color:#0F4C81;line-height:1.35}
.challenge-finish-points{padding:10px 12px;border-radius:18px;background:linear-gradient(135deg,#EFF6FF,#F8FBFF);border:1.5px solid #D8EEFF;margin-bottom:10px;text-align:center}
.challenge-finish-points-title{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#0F4C81;margin-bottom:6px}
.challenge-finish-points-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.challenge-finish-points-pill{display:inline-flex;align-items:center;gap:3px;padding:7px 10px;border-radius:999px;background:#fff;border:1.5px solid #CFE5FB;font-size:.8rem;font-weight:800;color:#0F4C81}
.challenge-finish-points-pill svg,
.challenge-finish-points-pill img,
.result-points-pill svg,
.result-points-pill img,
.choiceadventure-reward-chip svg,
.choiceadventure-reward-chip img{margin:0 !important}
.challenge-finish-points-copy,
.result-points-copy{display:inline-flex;align-items:center;line-height:1.05}
.challenge-finish-points-empty{font-size:.9rem;font-weight:800;color:#475569}
.challenge-finish-points-empty--story{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
flex-wrap:wrap;
padding:9px 13px;
border-radius:18px;
background:linear-gradient(135deg,#FEF3C7 0%,#E0F2FE 100%);
border:1.5px solid #FBBF24;
color:#0F4C81;
box-shadow:0 10px 22px rgba(251,191,36,0.16);
}
.challenge-finish-points-empty--story .empty-points-icon{font-size:1.15rem;line-height:1}
.challenge-finish-points-empty--story em{font-style:normal;font-size:.72rem;font-weight:800;color:#64748B}
.challenge-finish--compact{max-width:740px;padding:18px 18px 14px}
.challenge-finish-card .challenge-finish-points-pill{
gap:3px;
padding:6px 11px 6px 8px;
font-size:.86rem;
}
.challenge-finish-card .challenge-finish-points-pill svg,
.challenge-finish-card .challenge-finish-points-pill img{
width:36px !important;
height:36px !important;
min-width:36px !important;
flex:0 0 36px !important;
margin:0 !important;
}
.challenge-finish--compact .challenge-finish-top{margin-bottom:10px}
.challenge-finish--compact .challenge-finish-scoreboard{margin-bottom:8px}
.challenge-finish--compact .challenge-finish-actions{margin-top:8px}
.challenge-finish-trail-wrap{padding:16px;border-radius:22px;background:linear-gradient(135deg,#EFF6FF,#F8FAFC);border:1.5px solid #D8EEFF;margin-bottom:14px}
.challenge-finish-trail-wrap--day{background:linear-gradient(135deg,#F8FDFF,#EEF9FF)}
.challenge-finish-trail-title{font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#0F4C81;margin-bottom:10px}
.challenge-finish-statnow{margin-bottom:0}
.challenge-finish-trail{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.challenge-finish-dot{border-radius:16px;padding:10px 6px;text-align:center;background:#fff;border:1.5px solid #E2E8F0}
.challenge-finish-dot span{display:block;font-size:.6rem;font-weight:800;letter-spacing:.08em;color:#94A3B8;text-transform:uppercase;margin-bottom:4px}
.challenge-finish-dot strong{font-size:.92rem;font-weight:900;color:#475569}
.challenge-finish-dot.win{background:linear-gradient(135deg,#DCFCE7,#BBF7D0);border-color:#6EE7B7}
.challenge-finish-dot.win strong{color:#166534}
.challenge-finish-dot.loss{background:linear-gradient(135deg,#DBEAFE,#E0E7FF);border-color:#93C5FD}
.challenge-finish-dot.loss strong{color:#1D4ED8}
.challenge-finish-dot.empty{background:#F8FAFC}
.challenge-finish-actions{display:grid;grid-template-columns:1fr auto;gap:var(--layout-challenge-finish-actions-gap);align-items:center;margin-top:var(--layout-challenge-finish-actions-margin)}
.challenge-finish-actions--single{grid-template-columns:minmax(220px,420px);justify-content:center}
.challenge-finish-primary{margin:0}
.challenge-finish-secondary{margin:0;padding:12px 16px;border-radius:999px}
.challenge-loot-wrap--day{background:linear-gradient(145deg,#ECFEFF 0%,#E0F2FE 100%);border-color:#7DD3FC}
.challenge-loot-wrap--day .challenge-loot-title{color:#0F4C81}
.challenge-loot-wrap--day .challenge-loot-sub{color:#0369A1}
.challenge-loot-wrap--day .challenge-loot-list{background:rgba(255,255,255,0.78);border-color:rgba(14,116,144,0.12)}
.challenge-loot-wrap--day .challenge-loot-row{color:#0F4C81}
.challenge-loot-wrap--day .challenge-loot-row strong{color:#075985}
.challenge-loot-wrap{max-width:700px;margin:8px auto 10px;padding:12px 14px;border-radius:18px;text-align:left;background:linear-gradient(145deg,#FFF8E1 0%,#FFECC0 100%);border:1.5px solid #F4B942;box-shadow:0 10px 22px rgba(180,128,20,0.12)}
.challenge-loot-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.challenge-loot-copy{flex:1;min-width:0}
.challenge-loot-title{font-size:.95rem;font-weight:900;color:#7C2D12;line-height:1.15}
.challenge-loot-sub{font-size:.72rem;color:#B45309;margin-top:2px}
.challenge-loot-list{padding:8px 10px;border-radius:14px;background:rgba(255,251,235,0.82);border:1px solid rgba(180,83,9,0.12)}
.challenge-loot-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed rgba(146,64,14,0.12);font-size:.95rem;color:#0F4C81}
.challenge-loot-row strong{font-size:1rem;color:#0B4F7A}
.challenge-loot-row-last{border-bottom:none;padding-bottom:2px}
.challenge-loot-cards{margin:10px 0 8px;grid-template-columns:repeat(4,1fr);gap:8px}
.challenge-loot-cards .rw-card{border-radius:18px;padding:10px 8px;background:
radial-gradient(circle at top,rgba(255,255,255,0.75),rgba(255,255,255,0) 42%),
linear-gradient(150deg,#D1FAE5,#A7F3D0);
border:2px solid #22C55E;box-shadow:0 6px 14px rgba(34,197,94,0.14)}
.challenge-loot-cards .rw-card-icon{font-size:1.18rem;margin-bottom:4px}
.challenge-loot-cards .rw-card-label{font-size:.62rem;letter-spacing:.08em;color:#166534;margin-bottom:3px}
.challenge-loot-cards .rw-card-change{font-size:.92rem;padding:4px 10px}
.play-result:hover,
.challenge-round-result:hover,
.challenge-winner-card:hover,
.challenge-finish-card:hover,
.play-result .result-card:hover,
.challenge-round-result .result-card:hover{
transform:none;
box-shadow:inherit;
}
/* ═══════════════════════════════════════════════════════════════
CHALLENGE / RESULT RESPONSIVE RULES
These cover Business Challenge play, results, and winner screens.
═══════════════════════════════════════════════════════════════ */
@media(max-width:960px){
.challenge-header{padding:14px 14px;margin-bottom:12px}
.challenge-scores{gap:10px;flex-wrap:wrap}
.score-box{min-width:96px;padding:9px 12px}
.result-grid{gap:12px}
.result-card{padding:16px}
.result-score-summary{gap:14px;padding:16px}
.ch-topbar{flex-wrap:wrap;justify-content:center}
.ch-vs-bar{padding:12px 16px}
.ch-question-card{padding:12px 14px}
.play-result{padding:var(--layout-result-padding)}
.play-result.play-result--compact{min-height:auto;padding:16px 14px}
.lesson-card-header,.lesson-card-body{padding-left:14px;padding-right:14px}
.rw-cards-grid{gap:10px}
}
@media(max-width:768px){
.challenge-round-result{padding:14px}
.challenge-round-result--compact{min-height:auto !important}
.challenge-header{padding:12px}
.challenge-round-title{font-size:0.82rem}
.challenge-scores{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.score-box{min-width:0;padding:8px 10px}
.score-label{font-size:0.72rem}
.score-value{font-size:1.15rem}
.score-unit{font-size:0.58rem}
.result-header{font-size:1.1rem;margin-bottom:16px}
.result-grid{grid-template-columns:1fr;gap:10px;margin-bottom:14px}
.result-card{padding:14px}
.result-choice-text{font-size:0.92rem}
.result-status{font-size:0.86rem;padding:7px}
.result-score-summary{gap:10px;padding:12px;margin-bottom:14px}
.result-points-pill{justify-content:center}
.result-score-you,.result-score-miniboss{font-size:1.5rem}
.result-score-vs{font-size:0.75rem}
.speed-mode-banner{padding:12px 14px;gap:10px}
.smb-icon{font-size:2rem}
.smb-title{font-size:0.92rem}
.smb-sub{font-size:0.76rem}
.ch-fullscreen{padding:10px 12px;min-height:auto}
.sc-grid .ch-fullscreen{max-height:none;overflow:visible}
.ch-topbar{display:grid;grid-template-columns:1fr;justify-items:center;gap:8px}
.ch-back-btn,.ch-round-info{white-space:normal;text-align:center}
.ch-dots{flex-wrap:wrap;justify-content:center}
.ch-vs-bar{padding:10px 12px;gap:10px}
.ch-av-ring{width:56px;height:56px}
.ch-name{font-size:0.72rem;max-width:74px}
.ch-pts{font-size:1.18rem}
.ch-vs-badge{width:38px;height:38px;font-size:1rem;margin:0 6px}
.challenge-timer-row{gap:6px;padding:4px 8px;margin:4px 0 6px}
.challenge-timer-label{font-size:0.68rem}
.challenge-timer{min-width:34px;height:34px;font-size:1.08rem}
.ch-question-card{padding:10px 12px}
.ch-q-meta{align-items:flex-start;flex-wrap:wrap}
.ch-q-cat{font-size:0.72rem}
.ch-q-title{font-size:1.05rem}
.ch-q-body{font-size:0.9rem;line-height:1.28}
.ch-choices{gap:8px}
.challenge-winner-card{padding:14px 14px 16px}
.challenge-winner-emoji{font-size:2.5rem}
.challenge-winner-title{font-size:1.02rem}
.challenge-winner-msg{font-size:0.88rem;margin-bottom:10px}
.challenge-winner-score{padding:10px;margin-bottom:10px}
.challenge-winner-score-line{font-size:1.15rem}
.challenge-winner-score-sub{font-size:0.8rem}
.challenge-winner-reward{font-size:0.84rem;padding:10px 12px;margin-bottom:10px}
.challenge-winner-reward-amt{font-size:0.96rem}
.challenge-finish-card{padding:22px 14px 18px;border-radius:24px}
.challenge-finish-stamp{width:70px !important;height:70px !important;font-size:2.3rem}
.challenge-finish-title{font-size:1.55rem}
.challenge-finish-msg{font-size:0.92rem}
.challenge-finish-outcome{font-size:0.74rem;padding:7px 11px}
.challenge-finish-scoreboard{grid-template-columns:1fr !important;gap:10px;padding:14px}
.challenge-finish-vs{justify-self:center}
.challenge-finish-score-avatar{width:40px !important;height:40px !important;margin-bottom:6px}
.challenge-finish-mini-grid{grid-template-columns:1fr !important}
.challenge-finish-points-row{flex-direction:column}
.challenge-finish-points-pill{justify-content:center}
.challenge-finish-trail{grid-template-columns:repeat(5,1fr) !important}
.challenge-finish-dot{padding:8px 4px;border-radius:12px}
.challenge-finish-dot span{font-size:0.54rem}
.challenge-finish-dot strong{font-size:0.82rem}
.challenge-finish-actions{grid-template-columns:1fr !important}
.challenge-loot-wrap{padding:10px 10px 8px;margin:8px auto}
.challenge-loot-title{font-size:0.88rem}
.challenge-loot-sub{font-size:0.68rem}
.challenge-loot-list{padding:7px 9px}
.challenge-loot-row{font-size:0.88rem;padding:5px 0}
.challenge-loot-row strong{font-size:0.94rem}
.challenge-loot-cards{grid-template-columns:1fr 1fr !important;gap:7px;margin:8px 0 8px}
.challenge-loot-cards .rw-card{padding:9px 7px}
.challenge-loot-cards .rw-card-icon{font-size:1rem}
.challenge-loot-cards .rw-card-label{font-size:0.56rem}
.challenge-loot-cards .rw-card-change{font-size:0.8rem;padding:3px 8px}
.play-result{padding:var(--layout-result-mobile-padding)}
.play-result .rw-cards-grid{grid-template-columns:1fr 1fr;gap:8px}
.play-result .rw-card{padding:10px 8px}
.play-result .rw-card-label{font-size:0.58rem}
.play-result .rw-card-change{font-size:0.85rem}
.lesson-card{margin-bottom:10px}
.lesson-card-header{padding:10px 12px;gap:8px}
.lesson-card-body{padding:11px 12px}
.lc-verdict-text{font-size:0.92rem}
.lc-badge{font-size:0.62rem}
.lc-lesson,.lc-best-choice,.lc-best-why{font-size:0.8rem}
.stat-now{grid-template-columns:1fr 1fr;gap:8px}
.big-play{font-size:0.96rem;padding:13px 12px}
}
@media(max-width:430px){
.challenge-scores{grid-template-columns:1fr}
.ch-vs-bar{flex-direction:column;padding:12px 10px}
.ch-combatant{width:100%}
.ch-name{max-width:none}
.ch-vs-badge{margin:2px 0}
.ch-question-card .sc-tts-btn{margin-left:auto}
.result-avatar{width:42px;height:42px;margin-bottom:8px}
.play-result .rw-cards-grid{grid-template-columns:1fr}
.stat-now{grid-template-columns:1fr}
.go-btn,.big-play{font-size:0.92rem}
}
@media(max-height:760px){
.challenge-round-result{max-height:none}
.ch-fullscreen{gap:6px}
.ch-vs-bar{padding:10px 14px}
.challenge-timer-row{margin:3px 0 5px}
.ch-question-card{padding:10px 12px}
}
/* ── RESULT CARD UPDATE: exact numbers only, no arrows ── */
.rw-card-change{display:inline-flex;align-items:center;justify-content:center;padding:4px 14px;border-radius:20px;font-weight:900;font-size:1.2rem}
.rw-card.gain .rw-card-change{background:#16A34A;color:#fff}
.rw-card.loss .rw-card-change{background:#DC2626;color:#fff}
.rw-card-val{display:none}
.rw-no-change{text-align:center;padding:18px;color:var(--muted);font-size:0.9rem;font-weight:600;background:var(--sky-lt);border-radius:14px;width:100%;grid-column:1/-1}
/* ── PROFILE GAMIFIED LAYOUT ── */
.prof-hero{display:flex;flex-direction:column;gap:var(--layout-profile-hero-gap);padding:var(--layout-profile-card-padding);background:linear-gradient(135deg,#0f766e 0%,#155e75 48%,#1d4ed8 100%);border-radius:var(--layout-profile-card-radius);margin-bottom:var(--layout-profile-card-margin-bottom);border:none;position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(14,116,144,0.18)}
.prof-hero::before{content:'✦ ✧ ★ ✦ ✧ ★';position:absolute;top:8px;right:10px;font-size:0.68rem;color:rgba(255,255,255,0.25);letter-spacing:5px;pointer-events:none}
.prof-hero::after{content:'';position:absolute;bottom:-20px;left:-20px;width:100px;height:100px;background:rgba(255,255,255,0.05);border-radius:50%;pointer-events:none}
.prof-wm{position:absolute;top:0;left:0;right:0;bottom:0;font-size:1.05rem;letter-spacing:10px;line-height:2.4;opacity:0.07;overflow:hidden;pointer-events:none;word-break:break-all;padding:6px 8px;user-select:none;z-index:0}
.prof-av-wrap{width:86px;height:86px;border-radius:50%;overflow:hidden;flex-shrink:0;border:3px solid rgba(255,255,255,0.9);box-shadow:0 0 0 5px rgba(255,255,255,0.2);background:rgba(255,255,255,0.15);animation:avatarPulse 2.5s ease-in-out infinite}
@keyframes avatarPulse{0%,100%{box-shadow:0 0 0 5px rgba(255,255,255,0.2),0 0 16px rgba(255,255,255,0.1)}50%{box-shadow:0 0 0 9px rgba(255,255,255,0.1),0 0 32px rgba(255,255,255,0.3)}}
.prof-av-wrap svg,.prof-av-wrap img{width:100%;height:100%;display:block;object-fit:cover;}
.prof-hero-info{flex:1;min-width:0}
.prof-hero-name-lbl{font-size:0.68rem;font-weight:700;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.p-input-hero{background:rgba(255,255,255,0.18);border:1.5px solid rgba(255,255,255,0.4);color:#fff}
.p-input-hero::placeholder{color:rgba(255,255,255,0.5)}
.save-name-btn{padding:7px 13px;background:rgba(255,255,255,0.22);color:#fff;border:1.5px solid rgba(255,255,255,0.5);border-radius:10px;font-size:0.78rem;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all 0.15s}
.save-name-btn:hover{background:rgba(255,255,255,0.38)}
.prof-name-edit-fields{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.prof-name-limit-note{font-size:0.68rem;font-weight:700;color:rgba(255,255,255,0.78);line-height:1.1;text-align:left}
.prof-position-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,0.2);color:#fff;border:1.5px solid rgba(255,255,255,0.4);border-radius:50px;padding:5px 12px;font-size:0.8rem;font-weight:700;margin-top:4px}
.prof-hero-meta{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:8px;width:100%}
.prof-lv-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);border-radius:999px;padding:5px 10px;font-size:0.68rem;color:rgba(255,255,255,0.84);font-weight:800;letter-spacing:.3px}
/* Leadio Academy Card — unified hero */
.prof-card-title-bar{font-size:0.66rem;font-weight:800;color:rgba(255,255,255,0.76);text-transform:uppercase;letter-spacing:.85px;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.prof-card-title-bar::before{content:'';width:4px;height:12px;background:rgba(255,255,255,0.78);border-radius:3px;display:inline-block}
.prof-hero-sub{font-size:0.8rem;line-height:1.45;color:rgba(255,255,255,0.78);max-width:620px}
.prof-hero-body{display:flex;align-items:stretch;gap:var(--layout-profile-hero-body-gap);width:100%;margin-top:4px}
.prof-hero-left{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--layout-profile-hero-gap);flex-shrink:0;width:var(--layout-profile-left-width);min-width:var(--layout-profile-left-width);padding:var(--layout-profile-left-padding);background:linear-gradient(180deg,rgba(255,255,255,0.14) 0%,rgba(255,255,255,0.08) 100%);border-radius:18px;border:1px solid rgba(255,255,255,0.18);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)}
.prof-hero-center{min-width:0;text-align:center;width:100%}
/* Name: collapsed display row */
.prof-name-display-row{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:2px}
.prof-name-text{font-size:1.45rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:-0.35px}
.prof-edit-btn{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.26);border-radius:999px;color:#fff;font-size:0.68rem;font-weight:700;padding:4px 10px;cursor:pointer;flex-shrink:0;white-space:nowrap;transition:background 0.15s,border-color 0.15s,transform 0.15s}
.prof-edit-btn:hover{background:rgba(255,255,255,0.22);border-color:rgba(255,255,255,0.4);transform:translateY(-1px)}
/* Name: edit row */
.prof-name-row{display:flex;gap:6px;align-items:center;margin-bottom:4px}
/* Position panel — large and obvious */
.prof-hero-tagline{font-size:0.76rem;line-height:1.38;color:rgba(255,255,255,0.78);max-width:180px;text-align:center}
.prof-hero-right{display:flex;flex-direction:column;align-items:center;gap:var(--layout-profile-hero-gap);flex:1;min-width:0;max-width:calc(100% - var(--layout-profile-right-offset));background:linear-gradient(180deg,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0.1) 100%);border-radius:18px;padding:var(--layout-profile-right-padding);border:1px solid rgba(255,255,255,0.2);position:relative;z-index:1}
.prof-pos-col{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.prof-pos-lbl{font-size:0.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.55px;color:rgba(255,255,255,0.62)}
.prof-pos-icon-lg{display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 3px 8px rgba(0,0,0,0.3))}
.prof-pos-name{font-size:0.76rem;font-weight:800;color:rgba(255,255,255,0.96);max-width:88px;line-height:1.3;text-align:center}
.prof-pos-divider{font-size:1.5rem;color:rgba(255,255,255,0.3);font-weight:300;padding:0 2px;margin-top:20px}
/* Integrated rank section inside hero card */
.prof-hero-rank{margin-top:2px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.18);position:relative;z-index:1;width:100%}
.prof-rank-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:8px}
.prof-rank-copy{min-width:0}
.prof-rank-kicker{font-size:0.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.55px;color:rgba(255,255,255,0.64);margin-bottom:2px}
.prof-rank-title{font-size:1.12rem;font-weight:900;color:#fff;line-height:1.15}
.prof-rank-note{font-size:0.78rem;line-height:1.4;color:rgba(255,255,255,0.78);margin-top:4px}
.prof-rank-score{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.prof-rank-score strong{font-size:1.5rem;line-height:1;color:#FBBF24;font-weight:900}
.prof-rank-score span{font-size:0.66rem;font-weight:800;letter-spacing:.45px;text-transform:uppercase;color:rgba(255,255,255,0.68)}
.prof-rank-overall-bar{height:10px;background:rgba(255,255,255,0.15);border-radius:999px;overflow:hidden;margin-bottom:10px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2)}
.prof-rank-overall-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,#818CF8,#A855F7,#EC4899);transition:width 1s cubic-bezier(.4,0,.2,1)}
.prof-rank-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.prof-rank-toggle,.view-ranks-btn--quiet{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.22);color:#fff;border-radius:999px;padding:8px 12px;font-size:0.74rem;font-weight:800;cursor:pointer}
.prof-rank-toggle:hover,.view-ranks-btn--quiet:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.22);transform:none}
.view-ranks-btn--quiet{margin-left:auto}
.prof-rank-details{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.14)}
/* Hero progress rows — bigger icons and text */
.hero-prow{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.hero-pico{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.hero-pico svg,.hero-pico img{width:100%;height:100%}
.hero-plbl{font-size:0.72rem;font-weight:700;color:rgba(255,255,255,0.86);width:74px;flex-shrink:0}
.hero-pbar{flex:1;height:8px;background:rgba(255,255,255,0.15);border-radius:4px;overflow:hidden}
.hero-pbar-fill{height:100%;border-radius:6px;transition:width 0.8s cubic-bezier(.4,0,.2,1)}
.hero-pbar-fill.met{background:linear-gradient(90deg,#34D399,#6EE7B7)}
.hero-pnum{font-size:0.72rem;font-weight:700;color:rgba(255,255,255,0.82);white-space:nowrap;flex-shrink:0;min-width:58px;text-align:right}
.hero-pnum.met{color:#6EE7B7;font-weight:800}
.hero-rank-ready{background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.32);border-radius:12px;padding:9px 12px;text-align:center;font-size:0.8rem;font-weight:800;color:#fff;margin-bottom:10px}
/* Section headers between profile cards */
.prof-section-hdr{font-size:0.72rem;font-weight:800;color:var(--sky3);text-transform:uppercase;letter-spacing:.6px;margin:16px 0 10px;display:flex;align-items:center;gap:8px}
.prof-section-hdr::before{content:'';width:3px;height:14px;background:linear-gradient(180deg,var(--sky),var(--mint));border-radius:2px;display:inline-block;flex-shrink:0}
/* Avatar section without its own sub-header now */
.prof-av-section{margin-bottom:14px;background:linear-gradient(135deg,#EFF6FF,#EDE9FE);border-radius:16px;padding:14px;border:1.5px solid var(--border2)}
/* Mini stats strip */
.prof-mini-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--layout-profile-mini-gap);margin-bottom:14px}
.prof-mini-card{border-radius:16px;padding:var(--layout-profile-mini-card-padding);text-align:center;border:1.5px solid transparent;animation:rwCardIn 0.4s cubic-bezier(.3,1.5,.5,1) both}
.prof-mini-card.rnd{background:linear-gradient(135deg,#D1FAE5,#A7F3D0);border-color:var(--mint-md)}
.prof-mini-card.str{background:linear-gradient(135deg,#FEF3C7,#FDE68A);border-color:#FCD34D}
.prof-mini-card.chs{background:linear-gradient(135deg,#EDE9FE,#DDD6FE);border-color:#C4B5FD}
.prof-stat-icon{font-size:1.6rem;margin-bottom:3px}
.prof-stat-val{font-size:1.8rem;font-weight:900;color:var(--text);line-height:1}
.prof-stat-lbl{font-size:0.6rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
.prof-av-section{margin-bottom:14px;background:linear-gradient(135deg,#EFF6FF,#EDE9FE);border-radius:16px;padding:14px;border:1.5px solid var(--border2)}
.prof-av-sect-hdr{font-size:0.78rem;font-weight:800;color:var(--sky-dk);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.av-opt{position:relative}
.av-opt-check{position:absolute;bottom:2px;right:2px;background:var(--sky);color:#fff;border-radius:50%;width:18px;height:18px;font-size:0.65rem;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 6px rgba(14,165,233,0.4)}
/* ── ROLE PROGRESS CARD ── */
.role-progress-card{background:linear-gradient(135deg,var(--sky-lt) 0%,var(--purple-lt) 100%);border-radius:18px;padding:16px 18px;margin-bottom:16px;border:1.5px solid var(--sky-md)}
/* Journey header: Now → % → Next */
.role-journey-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:8px}
.role-journey-from,.role-journey-to{flex:1;text-align:center}
.rj-label{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);margin-bottom:4px}
.rj-role{font-size:1.4rem;line-height:1.2;font-weight:800}
.rj-role span{font-size:0.72rem;font-weight:700;color:var(--muted);display:block;margin-top:2px}
.rj-next{color:var(--sky3)}
.role-journey-middle{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.rj-pct-lbl{font-size:0.6rem;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.4px}
/* Donut chart */
.role-donut{width:58px;height:58px;flex-shrink:0}
.role-donut-bg{fill:none;stroke:var(--border2);stroke-width:3.8}
.role-donut-fill{fill:none;stroke:var(--sky);stroke-width:3.8;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.role-donut-pct{font-size:8px;font-weight:900;fill:var(--sky-dk);text-anchor:middle;font-family:inherit}
/* Progress rows */
.role-prow{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.role-pico{font-size:1rem;flex-shrink:0;width:32px;display:flex;align-items:center;justify-content:center}
.role-plbl{font-size:0.72rem;font-weight:700;color:var(--muted);width:62px;flex-shrink:0}
.role-pbar{flex:1;height:12px;background:rgba(14,165,233,0.12);border-radius:6px;overflow:hidden}
.role-pbar-fill{height:100%;border-radius:6px;transition:width 0.8s cubic-bezier(.4,0,.2,1);animation:pbarSlide 0.8s cubic-bezier(.4,0,.2,1) both}
@keyframes pbarSlide{from{width:0!important}to{}}
.pbar-c{background:linear-gradient(90deg,var(--amber),#FBBF24)}
.pbar-u{background:linear-gradient(90deg,var(--sky),#38BDF8)}
.pbar-h{background:linear-gradient(90deg,var(--purple),#A78BFA)}
.pbar-bp{background:linear-gradient(90deg,#F97316,#FB923C)}
.pbar-c.met,.pbar-u.met,.pbar-h.met,.pbar-bp.met{background:linear-gradient(90deg,var(--mint),#34D399)}
.role-pnum{font-size:0.65rem;font-weight:700;color:var(--muted);background:var(--bg0);border:1px solid var(--border2);border-radius:50px;padding:2px 7px;flex-shrink:0;white-space:nowrap}
.role-pmet{color:var(--mint);font-weight:800;background:var(--mint-lt);border-color:var(--mint-md)}
.role-pcheck{color:var(--mint);font-size:0.85rem;font-weight:900;flex-shrink:0}
.role-ready-banner{background:linear-gradient(135deg,var(--mint-lt),var(--green-lt));color:#065F46;border:1.5px solid var(--mint-md);border-radius:12px;padding:10px;text-align:center;font-size:0.85rem;font-weight:700;margin-top:10px;animation:readyGlow 1.5s ease-in-out infinite alternate}
@keyframes readyGlow{from{box-shadow:0 0 6px rgba(16,185,129,0.2)}to{box-shadow:0 0 18px rgba(16,185,129,0.45)}}
/* ── BACKGROUND FINANCE ICONS ── */
.bg-icons{display:none;position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-icon{position:fixed;width:60px;height:60px;opacity:0.2;display:flex;align-items:center;justify-content:center;animation:none;transform:none}
.bg-icon svg{width:100%;height:100%}
@keyframes floatBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.bg-icon:nth-child(1){animation:none}
.bg-icon:nth-child(2){animation:none}
.bg-icon:nth-child(3){animation:none}
.bg-icon:nth-child(4){animation:none}
.bg-icon:nth-child(5){animation:none}
.bg-icon:nth-child(6){animation:none}
.bg-icon:nth-child(7){animation:none}
.bg-icon:nth-child(8){animation:none}
.bg-icon:nth-child(9){animation:none}
.bg-icon:nth-child(10){animation:none}
.bg-icon:nth-child(11){animation:none}
.bg-icon:nth-child(12){animation:none}
.bg-icon:nth-child(13){animation:none}
.bg-icon:nth-child(14){animation:none}
.bg-icon:nth-child(15){animation:none}
.bg-icon:nth-child(16){animation:none}
.screen.home-dashboard{position:relative;z-index:1}
.home-main,.home-side{position:relative;z-index:1}
body:has(#main .home-dashboard)::before{
background-image:
linear-gradient(135deg,rgba(255,255,255,.76) 0%,rgba(248,250,252,.70) 100%),
var(--asset-leadio-light-lobby-bg);
background-size:cover,cover;
background-position:center,center;
background-repeat:no-repeat,no-repeat;
opacity:1;
}
body:has(#main .home-dashboard) .bg-icons{display:none}
/* Profile Tabs */
.profile-tabs{display:flex;gap:var(--layout-profile-tabs-gap);border-bottom:2px solid var(--sky-lt);padding-bottom:8px;margin-bottom:var(--layout-profile-tabs-bottom-gap)}
.tab-btn{background:none;border:none;padding:8px 12px;font-weight:600;font-size:0.9rem;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;transition:all 0.2s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tab-btn.active{color:var(--sky-dark);border-bottom-color:var(--sky)}
.tab-btn:hover:not(.active){color:var(--sky);opacity:0.8}
.tab-icon-img{
width:20px;
height:20px;
display:block;
object-fit:contain;
flex:0 0 20px;
}
.sect-icon-img{
width:28px;
height:28px;
display:block;
object-fit:contain;
flex:0 0 28px;
}
.profile-page-icon,
.tab-icon-img,
.sect-icon-img{
object-fit:contain;
}
.profile-inline-icon,
.sub-inline-icon,
.help-inline-icon,
.help-kicker-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:1.35em;
height:1.35em;
vertical-align:-0.25em;
flex:0 0 auto;
}
.sub-inline-icon,
.help-inline-icon,
.help-kicker-icon{
width:var(--layout-profile-content-inline-icon-size);
height:var(--layout-profile-content-inline-icon-size);
}
.profile-inline-icon-img,
.sub-inline-icon-img,
.help-inline-icon-img,
.help-kicker-icon-img{
display:block;
width:100%;
height:100%;
object-fit:contain;
transform:scale(var(--layout-profile-content-icon-art-scale));
transform-origin:center;
}
/* Parent Insights */
.pi-shell{display:flex;flex-direction:column;gap:var(--layout-insights-shell-gap)}
.pi-section,.pi-hero,.pi-highlight-card,.pi-focus-card{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);border:1px solid rgba(26,58,93,0.1);border-radius:var(--layout-insights-card-radius);box-shadow:0 14px 36px rgba(20,50,77,0.08)}
.pi-hero{display:grid;grid-template-columns:var(--layout-insights-hero-columns);gap:var(--layout-insights-hero-gap);padding:var(--layout-insights-hero-padding);position:relative;overflow:hidden}
.pi-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(37,99,235,0.14),transparent 34%),radial-gradient(circle at bottom left,rgba(16,185,129,0.09),transparent 30%);pointer-events:none}
.pi-hero-copy,.pi-hero-visual,.pi-section-head,.pi-skill-grid,.pi-trend-grid,.pi-mode-grid,.pi-bottom-grid,.pi-focus-card{position:relative;z-index:1}
.pi-kicker,.pi-section-kicker{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:900;letter-spacing:.9px;text-transform:uppercase;color:#2563EB}
.pi-hero-title{font-size:1.35rem;line-height:1.05;font-weight:900;color:#16324f;margin-top:8px}
.pi-hero-summary{margin-top:10px;font-size:.9rem;line-height:1.55;color:#516579;max-width:640px}
.pi-hero-summary strong{color:#16324f}
.pi-takeaway-grid{display:grid;grid-template-columns:var(--layout-insights-takeaway-columns);gap:var(--layout-insights-takeaway-gap);margin-top:var(--layout-insights-takeaway-margin-top)}
.pi-takeaway-card{display:flex;flex-direction:column;align-items:flex-start;padding:var(--layout-insights-takeaway-card-padding);border-radius:18px;border:1px solid rgba(37,99,235,.12);box-shadow:0 8px 20px rgba(20,50,77,.05)}
.pi-takeaway-card--strength{background:linear-gradient(180deg,#F7FFFB 0%,#ECFDF5 100%);border-color:rgba(16,185,129,.18)}
.pi-takeaway-card--detail{background:linear-gradient(180deg,#FAF7FF 0%,#F4EEFF 100%);border-color:rgba(124,58,237,.16)}
.pi-takeaway-card--focus{background:linear-gradient(180deg,#FFF9F0 0%,#FFF3E2 100%);border-color:rgba(245,158,11,.18)}
.pi-takeaway-card--signal{background:radial-gradient(circle at 12% 0%,rgba(20,184,166,.18),transparent 34%),linear-gradient(160deg,#F7FAFF 0%,#EAF7FF 55%,#E0F2FE 100%);border-color:rgba(14,165,233,.22);box-shadow:0 14px 30px rgba(14,116,144,.11)}
.pi-takeaway-label{font-size:.62rem;font-weight:900;letter-spacing:.75px;text-transform:uppercase}
.pi-takeaway-card--strength .pi-takeaway-label{color:#0F766E}
.pi-takeaway-card--detail .pi-takeaway-label{color:#6D28D9}
.pi-takeaway-card--focus .pi-takeaway-label{color:#B45309}
.pi-takeaway-card--signal .pi-takeaway-label{color:#0369A1}
.pi-takeaway-value{--pi-dot-glow:rgba(59,130,246,.55);display:inline-flex;align-items:flex-start;gap:6px;max-width:100%;margin-top:8px;padding:7px 10px;border-radius:14px;font-size:.9rem;font-weight:950;line-height:1.22;color:#16324f;background:rgba(255,255,255,.72);border:1px solid rgba(148,163,184,.15);box-shadow:0 8px 18px rgba(15,23,42,.05);white-space:normal;overflow-wrap:anywhere}
.pi-takeaway-value::before{content:"";width:8px;height:8px;flex:0 0 8px;margin-top:.32em;border-radius:50%;background:#3B82F6;box-shadow:0 0 0 4px rgba(59,130,246,.12);animation:piDotGlow 1.8s ease-in-out infinite;will-change:filter,transform}
.pi-takeaway-card--strength .pi-takeaway-value{--pi-dot-glow:rgba(16,185,129,.62);color:#14532D;background:#DFFBF0;border-color:rgba(16,185,129,.18)}
.pi-takeaway-card--strength .pi-takeaway-value::before{background:#10B981;box-shadow:0 0 0 4px rgba(16,185,129,.16)}
.pi-takeaway-card--detail .pi-takeaway-value{--pi-dot-glow:rgba(139,92,246,.62);color:#5B21B6;background:#F0E7FF;border-color:rgba(124,58,237,.17)}
.pi-takeaway-card--detail .pi-takeaway-value::before{background:#8B5CF6;box-shadow:0 0 0 4px rgba(139,92,246,.15)}
.pi-takeaway-card--focus .pi-takeaway-value{--pi-dot-glow:rgba(245,158,11,.65);color:#92400E;background:#FFF2CC;border-color:rgba(245,158,11,.18)}
.pi-takeaway-card--focus .pi-takeaway-value::before{background:#F59E0B;box-shadow:0 0 0 4px rgba(245,158,11,.16)}
.pi-takeaway-card--signal .pi-takeaway-value{--pi-dot-glow:rgba(14,165,233,.62);color:#075985;background:#E0F2FE;border-color:rgba(14,165,233,.18)}
.pi-takeaway-card--signal .pi-takeaway-value::before{background:#0EA5E9;box-shadow:0 0 0 4px rgba(14,165,233,.16)}
.pi-takeaway-details{display:grid;gap:3px;margin-top:7px}
.pi-takeaway-detail{font-size:.71rem;font-weight:800;line-height:1.35;color:#314963}
.pi-takeaway-note{margin-top:9px;font-size:.71rem;line-height:1.45;color:#55697d}
.pi-growth-snapshot{margin-top:8px;padding:10px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.pi-growth-snapshot--compact{padding:0;border:none;background:transparent;box-shadow:none}
.pi-growth-status-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pi-growth-status{--pi-dot-glow:rgba(59,130,246,.55);display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:.74rem;font-weight:950;letter-spacing:.01em;color:#16324f;background:#EEF5FF}
.pi-growth-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#3B82F6;box-shadow:0 0 0 4px rgba(59,130,246,.12);animation:piDotGlow 1.8s ease-in-out infinite;will-change:filter,transform}
@keyframes piDotGlow{0%,100%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}50%{filter:drop-shadow(0 0 7px var(--pi-dot-glow)) drop-shadow(0 0 13px var(--pi-dot-glow));transform:scale(1.08)}}
.pi-growth-skill{font-size:.7rem;font-weight:950;color:#314963;background:rgba(255,255,255,.82);border:1px solid rgba(148,163,184,.18);border-radius:999px;padding:5px 9px}
.pi-growth-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}
.pi-growth-metric{padding:8px;border-radius:13px;background:#fff;border:1px solid rgba(148,163,184,.16);box-shadow:0 6px 14px rgba(15,23,42,.04)}
.pi-growth-metric-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pi-growth-metric-top span{font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:#6B7F92;white-space:nowrap}
.pi-growth-metric-top strong{font-size:.9rem;font-weight:950;color:#16324f;white-space:nowrap}
.pi-growth-bar{height:7px;margin-top:7px;border-radius:999px;background:#EAF1F7;overflow:hidden}
.pi-growth-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38BDF8,#2563EB)}
.pi-growth-percent{margin-top:4px;font-size:.64rem;font-weight:850;color:#6B7F92;text-align:right}
.pi-takeaway-card .pi-growth-metric-grid{grid-template-columns:1fr}
.pi-growth-snapshot--strong{background:linear-gradient(160deg,rgba(236,253,245,.96),rgba(209,250,229,.88));border-color:rgba(16,185,129,.24)}
.pi-growth-snapshot--strong .pi-growth-status{--pi-dot-glow:rgba(16,185,129,.62);color:#065F46;background:#D1FAE5}
.pi-growth-snapshot--strong .pi-growth-status::before{background:#10B981;box-shadow:0 0 0 4px rgba(16,185,129,.16)}
.pi-growth-snapshot--strong .pi-growth-bar span{background:linear-gradient(90deg,#34D399,#059669)}
.pi-growth-snapshot--steady{background:linear-gradient(160deg,rgba(239,246,255,.96),rgba(219,234,254,.9));border-color:rgba(37,99,235,.22)}
.pi-growth-snapshot--steady .pi-growth-status{--pi-dot-glow:rgba(14,165,233,.62);color:#075985;background:#E0F2FE}
.pi-growth-snapshot--steady .pi-growth-status::before{background:#0EA5E9;box-shadow:0 0 0 4px rgba(14,165,233,.16)}
.pi-growth-snapshot--needs{background:linear-gradient(160deg,rgba(255,251,235,.98),rgba(254,243,199,.9));border-color:rgba(245,158,11,.28)}
.pi-growth-snapshot--needs .pi-growth-status{--pi-dot-glow:rgba(245,158,11,.65);color:#92400E;background:#FEF3C7}
.pi-growth-snapshot--needs .pi-growth-status::before{background:#F59E0B;box-shadow:0 0 0 4px rgba(245,158,11,.18)}
.pi-growth-snapshot--needs .pi-growth-bar span{background:linear-gradient(90deg,#FBBF24,#F59E0B)}
.pi-growth-snapshot--empty{background:linear-gradient(160deg,#F8FAFC,#EEF2F7)}
.pi-growth-snapshot--empty .pi-growth-status{--pi-dot-glow:rgba(148,163,184,.6);color:#475569;background:#E2E8F0}
.pi-growth-snapshot--empty .pi-growth-status::before{background:#94A3B8;box-shadow:0 0 0 4px rgba(148,163,184,.16)}
.pi-growth-snapshot--activity{background:linear-gradient(160deg,rgba(240,253,250,.96),rgba(204,251,241,.84));border-color:rgba(20,184,166,.24)}
.pi-growth-snapshot--activity .pi-growth-status{--pi-dot-glow:rgba(20,184,166,.62);color:#115E59;background:#CCFBF1}
.pi-growth-snapshot--activity .pi-growth-status::before{background:#14B8A6;box-shadow:0 0 0 4px rgba(20,184,166,.16)}
.pi-growth-snapshot--activity .pi-growth-bar span{background:linear-gradient(90deg,#2DD4BF,#0D9488)}
.pi-takeaway-card--signal .pi-growth-snapshot--compact{padding:0;border:none;background:transparent;box-shadow:none}
.pi-takeaway-card--signal .pi-growth-status{font-size:.92rem;padding:7px 10px;border-radius:14px}
.pi-takeaway-card--signal .pi-growth-snapshot--strong .pi-growth-status{--pi-dot-glow:rgba(14,165,233,.62);color:#075985;background:#E0F2FE}
.pi-takeaway-card--signal .pi-growth-snapshot--strong .pi-growth-status::before{background:#0EA5E9;box-shadow:0 0 0 4px rgba(14,165,233,.16)}
.pi-takeaway-card--signal .pi-growth-snapshot--compact .pi-growth-status{box-shadow:0 8px 18px rgba(14,165,233,.1)}
.pi-hero-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.pi-radar{width:var(--layout-insights-radar-size);height:var(--layout-insights-radar-size);overflow:visible}
.pi-radar-ring{fill:none;stroke:rgba(148,163,184,.22);stroke-width:1}
.pi-radar-axis{stroke:rgba(37,99,235,.15);stroke-width:1}
.pi-radar-shape{fill:rgba(37,99,235,.18);stroke:#2563EB;stroke-width:2}
.pi-radar-point{fill:#0EA5E9;stroke:#fff;stroke-width:2}
.pi-radar-icon{filter:drop-shadow(0 2px 4px rgba(15,23,42,.12))}
.pi-overall-score{display:flex;flex-direction:column;align-items:center;gap:3px;padding:var(--layout-insights-overall-padding);border-radius:20px;background:linear-gradient(180deg,#F7FAFF 0%,#EAF3FF 100%);border:1px solid rgba(37,99,235,.16);box-shadow:0 10px 24px rgba(37,99,235,.10)}
.pi-overall-score span{font-size:.68rem;font-weight:800;color:#1D4ED8;text-transform:uppercase;letter-spacing:.7px}
.pi-overall-score strong{font-size:1.32rem;color:#163B78}
.pi-overall-score small{font-size:.67rem;font-weight:700;color:#5C7394;line-height:1.35;text-align:center}
.pi-section{padding:var(--layout-insights-section-padding)}
.pi-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--layout-insights-section-head-gap);margin-bottom:var(--layout-insights-section-head-margin)}
.pi-section-head h3{font-size:1rem;font-weight:900;color:#16324f;margin-top:3px}
.pi-section-tip{font-size:.72rem;line-height:1.45;color:#6b7d8f;max-width:var(--layout-insights-section-tip-max-width);text-align:right}
.pi-skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-insights-skill-grid-gap)}
.pi-skill-card{padding:var(--layout-insights-skill-card-padding);border-radius:20px;border:1px solid rgba(148,163,184,.2);background:#fff;box-shadow:0 6px 18px rgba(20,50,77,.05);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pi-skill-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,50,77,.08);border-color:rgba(37,99,235,.24)}
.pi-skill-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pi-skill-title-wrap{display:flex;align-items:center;gap:10px;min-width:0}
.pi-skill-icon{width:calc(var(--layout-insights-skill-icon-size) + var(--layout-insights-skill-icon-frame-extra));height:calc(var(--layout-insights-skill-icon-size) + var(--layout-insights-skill-icon-frame-extra));border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#EFF6FF,#FEFCE8);font-size:1.2rem;flex-shrink:0}
.pi-generated-icon{display:block;width:94%;height:94%;object-fit:contain;transform:scale(var(--layout-insights-icon-art-scale));transform-origin:center}
.pi-skill-name{font-size:.9rem;font-weight:900;color:#16324f;line-height:1.1}
.pi-skill-percent{font-size:1.1rem;font-weight:900;color:#2563EB;margin-top:2px}
.pi-status{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:.66rem;font-weight:900;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap}
.pi-status--strong{background:#DCFCE7;color:#166534}
.pi-status--growing{background:#DBEAFE;color:#1D4ED8}
.pi-status--needs{background:#FEF3C7;color:#B45309}
.pi-status--neutral{background:#E5E7EB;color:#4B5563}
.pi-bar{margin-top:10px;height:10px;border-radius:999px;background:#EAF1F7;overflow:hidden}
.pi-bar-fill,.pi-mini-bar-fill{display:block;height:100%;border-radius:inherit;transform-origin:left center;animation:none}
.pi-bar-fill--strong,.pi-mini-bar-fill--strong{background:linear-gradient(90deg,#34D399,#10B981)}
.pi-bar-fill--growing,.pi-mini-bar-fill--growing{background:linear-gradient(90deg,#60A5FA,#2563EB)}
.pi-bar-fill--needs,.pi-mini-bar-fill--needs{background:linear-gradient(90deg,#FBBF24,#F97316)}
.pi-bar-fill--neutral,.pi-mini-bar-fill--neutral{background:linear-gradient(90deg,#CBD5E1,#94A3B8)}
.pi-skill-mid{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.pi-skill-spark-wrap{flex:1;min-width:0}
.pi-sparkline{width:100%;height:30px}
.pi-sparkline-area{fill:rgba(59,130,246,.08)}
.pi-sparkline-line{fill:none;stroke:#2563EB;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pi-sparkline-dot{fill:#0EA5E9;stroke:#fff;stroke-width:1.8}
.pi-skill-trend{font-size:.68rem;font-weight:800;color:#516579;white-space:nowrap}
.pi-skill-note{margin-top:8px;font-size:.76rem;line-height:1.45;color:#516579}
.pi-subtoggle{margin-top:10px;padding:0;border:none;background:none;font-size:.74rem;font-weight:900;color:#2563EB;cursor:pointer}
.pi-skill-expand{max-height:0;overflow:hidden;opacity:0;transition:max-height .32s ease,opacity .22s ease,margin-top .22s ease;margin-top:0}
.pi-skill-card.is-open .pi-skill-expand{max-height:420px;opacity:1;margin-top:12px}
.pi-subskill-list{display:flex;flex-direction:column;gap:10px;padding-top:2px}
.pi-subskill-row{padding:10px 12px;border-radius:16px;background:#F8FBFF;border:1px solid rgba(148,163,184,.16)}
.pi-subskill-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.pi-subskill-name{font-size:.76rem;font-weight:900;color:#16324f}
.pi-subskill-flag{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:.58rem;font-weight:900;text-transform:uppercase;letter-spacing:.45px}
.pi-subskill-flag--strong{background:#DCFCE7;color:#166534}
.pi-subskill-flag--needs{background:#FEF3C7;color:#B45309}
.pi-mini-bar{height:8px;border-radius:999px;background:#EAF1F7;overflow:hidden}
.pi-subskill-note,.pi-subskill-empty{margin-top:7px;font-size:.69rem;line-height:1.45;color:#617587}
.pi-toggle-group{display:inline-flex;align-items:center;padding:4px;background:#EFF4F8;border-radius:999px;border:1px solid rgba(148,163,184,.2)}
.pi-toggle-btn{padding:7px 12px;border:none;background:transparent;border-radius:999px;font-size:.72rem;font-weight:800;color:#688093;cursor:pointer;transition:background .18s ease,color .18s ease}
.pi-toggle-btn.active{background:#fff;color:#16324f;box-shadow:0 4px 14px rgba(20,50,77,.08)}
.pi-trend-panel{display:none}
.pi-trend-panel.is-active{display:block}
.pi-trend-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--layout-insights-trend-gap);align-items:stretch}
.pi-trend-card{height:100%;min-height:206px;display:flex;flex-direction:column;padding:var(--layout-insights-trend-card-padding);border-radius:18px;border:1px solid rgba(148,163,184,.16);background:#fff;box-shadow:0 8px 20px rgba(20,50,77,.04)}
.pi-trend-card--growth{position:relative;overflow:hidden;background:radial-gradient(circle at 16% 0%,rgba(96,165,250,.16),transparent 34%),linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);border-color:rgba(37,99,235,.16);box-shadow:0 14px 30px rgba(37,99,235,.09)}
.pi-trend-card--growth::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#38BDF8,#2563EB,#8B5CF6)}
.pi-trend-card--mover{background:radial-gradient(circle at 100% 0%,rgba(251,191,36,.18),transparent 34%),linear-gradient(180deg,#FFFFFF 0%,#FFFBEB 100%);border-color:rgba(245,158,11,.18);box-shadow:0 14px 30px rgba(245,158,11,.09)}
.pi-trend-card--mover::before{background:linear-gradient(90deg,#FBBF24,#F59E0B,#38BDF8)}
.pi-trend-card--activity{background:radial-gradient(circle at 100% 0%,rgba(45,212,191,.18),transparent 34%),linear-gradient(180deg,#FFFFFF 0%,#F0FDFA 100%);border-color:rgba(20,184,166,.2);box-shadow:0 14px 30px rgba(20,184,166,.08)}
.pi-trend-card--activity::before{background:linear-gradient(90deg,#14B8A6,#2DD4BF,#38BDF8)}
.pi-trend-label{font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.7px;color:#7a8da1}
.pi-trend-value{margin-top:6px;font-size:1rem;font-weight:900;color:#16324f;line-height:1.15}
.pi-trend-value--focus{display:inline-flex;margin-top:7px;padding:6px 10px;border-radius:999px;background:#FFF7D6;border:1px solid rgba(245,158,11,.18);color:#92400E;font-size:.82rem;box-shadow:0 7px 16px rgba(245,158,11,.08)}
.pi-trend-details{display:grid;gap:3px;margin-top:8px}
.pi-trend-detail{font-size:.74rem;font-weight:800;line-height:1.35;color:#314963}
.pi-trend-note{margin-top:auto;font-size:.72rem;line-height:1.45;color:#5e7284}
.pi-trend-card--growth .pi-trend-note{margin-top:auto;padding:7px 9px;border-radius:12px;background:rgba(255,255,255,.68);border:1px solid rgba(148,163,184,.14);font-weight:850;color:#314963}
.pi-stack-bar{display:flex;align-items:center;width:100%;height:18px;border-radius:999px;background:#EAF1F7;overflow:hidden;border:1px solid rgba(148,163,184,.16)}
.pi-stack-seg{display:block;height:100%;transition:opacity .18s ease}
.pi-stack-seg:hover{opacity:.82}
.pi-stack-seg--story{background:linear-gradient(90deg,#8B5CF6,#A78BFA)}
.pi-stack-seg--challenge{background:linear-gradient(90deg,#1D4ED8,#60A5FA)}
.pi-stack-seg--choice-adventure{background:linear-gradient(90deg,#14B8A6,#2DD4BF)}
.pi-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--layout-insights-mode-gap);margin-top:var(--layout-insights-mode-margin-top)}
.pi-mode-card{padding:var(--layout-insights-mode-card-padding);border-radius:18px;border:1px solid rgba(148,163,184,.16);background:#fff}
.pi-mode-top{display:flex;align-items:center;gap:8px}
.pi-mode-icon{width:var(--layout-insights-mode-icon-size);height:var(--layout-insights-mode-icon-size);display:flex;align-items:center;justify-content:center;flex:0 0 var(--layout-insights-mode-icon-size)}
.pi-mode-icon .pi-generated-icon{width:100%;height:100%}
.pi-mode-name{font-size:.83rem;font-weight:900;color:#16324f;flex:1}
.pi-mode-pct{font-size:.92rem;font-weight:900;color:#2563EB}
.pi-mode-meta{margin-top:5px;font-size:.67rem;font-weight:800;color:#72869a;text-transform:uppercase;letter-spacing:.6px}
.pi-mode-note{margin-top:7px;font-size:.73rem;line-height:1.45;color:#5e7284}
.pi-bottom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-insights-bottom-gap)}
.pi-highlight-card,.pi-focus-card{padding:var(--layout-insights-highlight-padding)}
.pi-highlight-card h3,.pi-focus-card h3{font-size:.98rem;font-weight:900;color:#16324f;margin-top:4px}
.pi-highlight-card p,.pi-focus-card p,.pi-mini-note,.pi-empty-copy{margin-top:8px;font-size:.82rem;line-height:1.55;color:#55697d}
.pi-highlight-card--business{background:linear-gradient(180deg,#fffaf0 0%,#fff 100%)}
.pi-highlight-card--behaviour{background:linear-gradient(180deg,#f8fbff 0%,#fff 100%)}
.pi-mini-note+.pi-mini-note{margin-top:6px}
.pi-focus-card{background:linear-gradient(135deg,#16324f 0%,#244a6c 100%);border-color:transparent;color:#fff}
.pi-focus-card .pi-section-kicker,.pi-focus-card h3{color:#fff}
.pi-focus-card p{color:rgba(255,255,255,.92)}
@keyframes piBarGrow{from{transform:scaleX(.12)}to{transform:scaleX(1)}}
@media (max-width:1150px){
.pi-mode-grid{grid-template-columns:1fr}
.pi-takeaway-grid{grid-template-columns:1fr}
}
@media (max-width:980px){
.pi-hero{grid-template-columns:1fr}
.pi-hero-visual{align-items:flex-start}
.pi-skill-grid,.pi-bottom-grid,.pi-trend-grid{grid-template-columns:1fr}
.pi-section-head{flex-direction:column;align-items:flex-start}
.pi-section-tip{text-align:left;max-width:none}
}
@media (max-width:680px){
.profile-tabs{flex-wrap:wrap}
.pi-hero{padding:var(--layout-insights-hero-padding)}
.pi-section,.pi-highlight-card,.pi-focus-card{padding:var(--layout-insights-section-padding)}
.pi-skill-grid{grid-template-columns:1fr}
.pi-hero-title{font-size:1.18rem}
.pi-hero-summary{font-size:.82rem}
.pi-takeaway-grid{grid-template-columns:1fr}
}
/* ── Tier badges */
.tier-badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:0.68rem;font-weight:800;letter-spacing:0.4px}
.tier-bronze{background:linear-gradient(90deg,#CD7F32,#A0522D);color:#fff;box-shadow:0 2px 8px rgba(160,82,45,0.45)}
.tier-silver{background:linear-gradient(90deg,#A8A9AD,#C4C4C4);color:#1a1a2e;box-shadow:0 2px 8px rgba(168,169,173,0.4)}
.tier-gold{background:linear-gradient(90deg,#FFD700,#FFA500);color:#1a1a2e;box-shadow:0 2px 8px rgba(255,215,0,0.45)}
.tier-diamond{background:linear-gradient(90deg,#6EC6CA,#B9F2FF);color:#0c4a6e;box-shadow:0 2px 8px rgba(110,198,202,0.45)}
.tier-elite{background:linear-gradient(90deg,#a855f7,#ec4899);color:#fff;box-shadow:0 2px 8px rgba(168,85,247,0.45)}
.tier-legend{background:linear-gradient(135deg,#FFD700,#FF6B6B,#a855f7);color:#fff;box-shadow:0 2px 10px rgba(255,107,107,0.5)}
/* ── Position panel rework */
.prof-pos-cols{display:flex;align-items:flex-start;justify-content:center;gap:10px}
.prof-pos-glow img,.prof-pos-glow svg{animation:iconGlow 2s ease-in-out infinite}
.prof-pos-glow{filter:drop-shadow(0 0 10px #FFD700) drop-shadow(0 0 5px #FFA500) drop-shadow(0 3px 8px rgba(0,0,0,0.35))}
.prof-pos-locked{opacity:0.42;filter:grayscale(0.55) drop-shadow(0 3px 8px rgba(0,0,0,0.3))}
@keyframes iconGlow{0%,100%{filter:drop-shadow(0 0 8px #FFD700) drop-shadow(0 0 4px #FFA500) drop-shadow(0 3px 8px rgba(0,0,0,0.3))}50%{filter:drop-shadow(0 0 18px #FFD700) drop-shadow(0 0 10px rgba(255,165,0,0.8)) drop-shadow(0 3px 14px rgba(0,0,0,0.45))}}
.tier-tagline{font-size:0.62rem;color:rgba(255,255,255,0.72);text-align:center;font-style:italic;line-height:1.35;max-width:165px;padding:0 2px}
/* ── View ranks button */
.view-ranks-btn{width:100%;margin-top:6px;padding:8px 12px;background:rgba(255,255,255,0.95);border:none;border-radius:12px;color:#1e3a5f;font-size:0.72rem;font-weight:800;cursor:pointer;letter-spacing:0.2px;box-shadow:0 3px 12px rgba(0,0,0,0.25)}
.view-ranks-btn:hover,.view-ranks-btn:active{background:rgba(255,255,255,0.95);box-shadow:0 3px 12px rgba(0,0,0,0.25);transform:none}
/* Help & Contact */
.help-shell{display:flex;flex-direction:column;gap:var(--layout-help-gap)}
.help-hero{background:linear-gradient(135deg,#0f766e 0%,#2563eb 100%);border-radius:var(--layout-help-hero-radius);padding:var(--layout-help-hero-padding);color:#fff;box-shadow:0 12px 26px rgba(37,99,235,0.15)}
.help-hero-kicker{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,0.14);font-size:0.62rem;font-weight:800;letter-spacing:.4px;margin-bottom:7px}
.help-hero-title{font-size:1.18rem;font-weight:900;line-height:1.05;margin-bottom:4px}
.help-hero-sub{font-size:0.74rem;line-height:1.45;max-width:560px;color:rgba(255,255,255,0.92)}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-help-grid-gap)}
.help-section-title{font-size:0.82rem;font-weight:900;color:var(--sky3);margin-top:0}
.help-card,.help-contact-box{background:#fff;border:1.5px solid rgba(37,99,235,0.12);border-radius:var(--layout-help-card-radius);padding:var(--layout-help-card-padding);box-shadow:0 8px 20px rgba(15,23,42,0.05)}
.help-card--link{cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease}
.help-card--link:hover,.help-card--link:focus-visible{transform:translateY(-2px);border-color:rgba(37,99,235,0.28);box-shadow:0 12px 24px rgba(37,99,235,0.1);background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);outline:none}
.help-card{position:relative;overflow:hidden}
.help-card::before{
content:'';
position:absolute;
right:10px;
bottom:8px;
width:46px;
height:46px;
background:url("assets/icons/generated/profile-pages/help/support-headset.png?t=20260429contenticons") center/contain no-repeat;
opacity:.12;
pointer-events:none;
z-index:0;
filter:drop-shadow(0 6px 16px rgba(15,23,42,.08));
}
.help-card--rewards::before{background-image:url("assets/icons/generated/profile-pages/help/reward-shop.png?t=20260429contenticons")}
.help-card--subscription::before{background-image:url("assets/icons/generated/profile-pages/help/membership-help.png?t=20260429contenticons")}
.help-card-top{position:relative;z-index:1;margin-bottom:10px}
.help-card-kicker{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}
.help-card-top--play .help-card-kicker{color:#2563EB}
.help-card-top--powers .help-card-kicker{color:#7C3AED}
.help-card-top--rewards .help-card-kicker{color:#D97706}
.help-card-top--subscription .help-card-kicker{color:#1D4ED8}
.help-card-ico{width:var(--layout-help-contact-icon-size);height:var(--layout-help-contact-icon-size);margin-bottom:5px;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 var(--layout-help-contact-icon-size)}
.help-contact-img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(var(--layout-help-icon-art-scale));transform-origin:center}
.help-card-title{font-size:1rem;font-weight:900;color:var(--text);margin-bottom:0;line-height:1.12;position:relative;z-index:1}
.help-card-body{font-size:0.76rem;line-height:1.46;color:var(--muted);position:relative;z-index:1}
.help-fun-list{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.help-fun-row{display:flex;align-items:flex-start;gap:8px}
.help-fun-ico{width:var(--layout-profile-content-inline-icon-size);height:var(--layout-profile-content-inline-icon-size);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem;box-shadow:0 4px 10px rgba(15,23,42,.08)}
.help-fun-img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(var(--layout-profile-content-icon-art-scale));transform-origin:center}
.help-card-top--play + .help-fun-list .help-fun-ico{background:linear-gradient(135deg,#DBEAFE,#BFDBFE)}
.help-card-top--powers + .help-fun-list .help-fun-ico{background:linear-gradient(135deg,#F3E8FF,#E9D5FF)}
.help-fun-copy{min-width:0}
.help-fun-title{font-size:.82rem;font-weight:900;color:var(--text);line-height:1.1;margin-bottom:2px}
.help-fun-body{font-size:.72rem;line-height:1.38;color:var(--muted)}
.help-card-cta{margin-top:8px;font-size:.74rem;font-weight:800;color:var(--sky3);position:relative;z-index:1}
.help-contact-box{display:flex;flex-direction:column;gap:var(--layout-help-gap);justify-content:flex-start;border-color:rgba(15,118,110,0.16);background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)}
.help-contact-top{display:flex;align-items:flex-start;gap:var(--layout-help-gap)}
.help-contact-main{display:flex;flex-direction:column;gap:var(--layout-help-gap);flex:1;justify-content:space-evenly}
.help-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-help-form-gap)}
.help-form-field{display:flex;flex-direction:column;gap:var(--layout-help-field-gap);min-width:0}
.help-form-field--issue{position:relative;z-index:20;overflow:visible}
.help-form-field--message{gap:6px}
.help-form-label{font-size:.62rem;font-weight:900;color:var(--sky3);text-transform:uppercase;letter-spacing:.5px}
.help-form-control{width:100%;border:1.5px solid #D7E6FF;border-radius:var(--layout-help-control-radius);padding:var(--layout-help-control-padding);background:#fff;font-size:.72rem;color:var(--text);outline:none;transition:border-color .15s ease, box-shadow .15s ease}
.help-form-control:focus{border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,0.12)}
.help-issue-select{position:relative;z-index:30;overflow:visible}
.help-issue-button{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;line-height:1.15}
.help-issue-button span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.help-issue-caret{width:9px;height:9px;border-right:2px solid #155E75;border-bottom:2px solid #155E75;transform:rotate(45deg) translateY(-2px);flex:0 0 auto}
.help-issue-select.is-open .help-issue-caret{transform:rotate(225deg) translate(-2px,-1px)}
.help-issue-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;display:none;flex-direction:column;gap:3px;padding:5px;background:#fff;border:1.5px solid #BFD7FF;border-radius:var(--layout-help-control-radius);box-shadow:0 16px 36px rgba(15,23,42,.18);max-height:min(192px,calc(100vh - 24px));overflow-y:auto}
.help-issue-select.is-open .help-issue-menu{display:flex}
.help-issue-select.is-drop-up .help-issue-menu{top:auto;bottom:calc(100% + 6px)}
.help-issue-option{width:100%;border:0;border-radius:calc(var(--layout-help-control-radius) - 3px);background:#fff;color:var(--text);font-size:.72rem;font-weight:800;text-align:left;padding:9px 10px;cursor:pointer}
.help-issue-option:hover,.help-issue-option:focus-visible{background:#EFF6FF;outline:none}
.help-issue-option.is-selected{background:linear-gradient(90deg,#E0F2FE,#EEF2FF);color:#1D4ED8}
.help-form-textarea{min-height:var(--layout-help-textarea-min-height);max-height:none;resize:vertical;line-height:1.45}
.help-form-hint{font-size:.68rem;line-height:1.4;color:#155e75;background:rgba(14,165,233,0.08);border:1px solid rgba(14,165,233,0.12);border-radius:var(--layout-help-control-radius);padding:8px 10px}
.help-contact-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--layout-help-gap);flex-wrap:wrap}
.help-contact-btn{margin-top:12px;width:100%;padding:9px 11px;border:none;border-radius:var(--layout-help-control-radius);background:linear-gradient(90deg,#0ea5e9,#2563eb);color:#fff;font-size:0.74rem;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(37,99,235,0.18)}
.help-contact-btn:hover,.help-contact-btn:active{transform:translateY(-1px)}
.help-contact-actions .help-contact-btn{margin-top:0;width:auto;min-width:var(--layout-help-contact-button-min-width)}
.help-contact-mini{font-size:.64rem;line-height:1.4;color:var(--muted);max-width:var(--layout-help-contact-mini-max-width)}
.help-footnote{font-size:0.66rem;color:var(--muted);text-align:center}
.help-footnote a{color:var(--sky3);font-weight:800;text-decoration:none}
@media (min-width:900px){
.help-shell{
display:grid;
grid-template-columns:var(--layout-help-desktop-columns);
grid-template-areas:
"hero hero"
"faq contact"
"foot foot";
grid-template-rows:auto 1fr auto;
min-height:var(--layout-help-shell-min-height);
gap:var(--layout-help-gap-secondary) var(--layout-help-gap)
}
.help-shell > .help-hero{grid-area:hero}
.help-shell > .help-grid{grid-area:faq;height:100%}
.help-shell > .help-section-title{display:none}
.help-shell > .help-contact-box{grid-area:contact;align-self:stretch}
.help-shell > .help-footnote{grid-area:foot}
.help-grid{height:100%;grid-auto-rows:minmax(0,1fr)}
.help-card{height:100%;display:flex;flex-direction:column;justify-content:flex-start}
.help-contact-box{height:100%}
.help-contact-main{height:100%}
.help-form-field--message{flex:1}
.help-form-textarea{height:100%;min-height:var(--layout-help-textarea-min-height-desktop)}
.help-contact-actions{margin-top:auto;align-items:flex-end}
.help-hero{padding:var(--layout-help-hero-padding);border-radius:var(--layout-help-hero-radius)}
.help-hero-kicker{font-size:.58rem;padding:4px 9px;margin-bottom:5px}
.help-hero-title{font-size:1.02rem}
.help-hero-sub{font-size:.67rem;line-height:1.32;max-width:500px}
.help-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-help-grid-gap);align-content:start}
.help-section-title{font-size:.76rem}
.help-card,.help-contact-box{padding:var(--layout-help-card-padding);border-radius:var(--layout-help-card-radius)}
.help-card-ico{margin-bottom:4px}
.help-card-kicker{font-size:.64rem;margin-bottom:5px}
.help-card-title{font-size:.88rem}
.help-card-body{font-size:.7rem;line-height:1.36}
.help-card::before{width:40px;height:40px;right:8px;bottom:7px}
.help-fun-list{gap:7px}
.help-fun-row{gap:7px}
.help-fun-ico{font-size:.86rem;border-radius:10px}
.help-fun-title{font-size:.74rem}
.help-fun-body{font-size:.66rem;line-height:1.32}
.help-contact-box{gap:var(--layout-help-gap-secondary)}
.help-contact-top{gap:var(--layout-help-gap-secondary)}
.help-form-grid{gap:var(--layout-help-form-gap)}
.help-form-label{font-size:.56rem}
.help-form-control{padding:var(--layout-help-control-padding);font-size:.66rem;border-radius:var(--layout-help-control-radius)}
.help-form-textarea{min-height:var(--layout-help-textarea-min-height-desktop);max-height:none}
.help-form-hint{font-size:.61rem;line-height:1.32;padding:7px 8px;border-radius:var(--layout-help-control-radius)}
.help-contact-actions{gap:var(--layout-help-gap-secondary)}
.help-contact-actions .help-contact-btn{min-width:var(--layout-help-contact-button-min-width)}
.help-contact-btn{padding:8px 10px;font-size:.68rem;border-radius:11px}
.help-contact-mini{font-size:.57rem;line-height:1.28;max-width:var(--layout-help-contact-mini-max-width)}
.help-footnote{font-size:.58rem}
}
@media (min-width:820px) and (max-width:1199px){
.profile-screen{
max-height:none !important;
overflow:visible !important;
}
.profile-tabs{
flex-wrap:wrap;
row-gap:10px;
}
.help-shell{
display:flex !important;
flex-direction:column;
gap:var(--layout-help-gap-tablet);
min-height:0 !important;
}
.help-hero{
padding:var(--layout-help-hero-padding);
border-radius:var(--layout-help-hero-radius-secondary);
}
.help-hero-title{
font-size:1.08rem;
}
.help-hero-sub{
font-size:.76rem;
line-height:1.42;
max-width:none !important;
}
.help-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:var(--layout-help-grid-gap);
height:auto !important;
align-content:stretch;
}
.help-card,
.help-contact-box{
padding:var(--layout-help-card-padding);
border-radius:var(--layout-help-card-radius);
height:auto !important;
}
.help-card{
min-height:0 !important;
}
.help-contact-box{
width:100%;
}
.help-contact-main{
height:auto !important;
}
.help-form-grid{
grid-template-columns:1fr 1fr !important;
gap:var(--layout-help-form-gap);
}
.help-form-field--message{
grid-column:1 / -1;
}
.help-form-textarea{
min-height:var(--layout-help-textarea-min-height-tablet) !important;
}
.help-contact-actions{
margin-top:var(--layout-help-gap-secondary);
align-items:center;
}
.help-contact-actions .help-contact-btn{
min-width:var(--layout-help-contact-button-min-width-tablet) !important;
}
}
@media (min-width:900px) and (max-height:900px){
.help-shell{gap:var(--layout-help-gap-tight)}
.help-hero{padding:11px 13px}
.help-card,.help-contact-box{padding:9px 10px}
.help-card-body{font-size:.6rem}
.help-card-kicker{font-size:.6rem}
.help-card-title{font-size:.82rem}
.help-fun-ico{width:var(--layout-profile-content-inline-icon-size);height:var(--layout-profile-content-inline-icon-size);font-size:.8rem}
.help-fun-title{font-size:.7rem}
.help-fun-body{font-size:.62rem}
.help-card::before{width:36px;height:36px}
.help-form-textarea{min-height:var(--layout-help-textarea-min-height-secondary)}
.help-contact-mini{font-size:.56rem}
}
@media (min-width:900px) and (max-height:780px){
.help-shell{
grid-template-columns:var(--layout-help-desktop-columns-short);
min-height:var(--layout-help-shell-min-height-short);
gap:var(--layout-help-gap-tight) var(--layout-help-gap-secondary)
}
.help-hero{padding:var(--layout-help-hero-padding-tight)}
.help-hero-title{font-size:.96rem}
.help-hero-sub{font-size:.63rem;line-height:1.26}
.help-grid{gap:var(--layout-help-grid-gap-tight)}
.help-card,.help-contact-box{padding:var(--layout-help-card-padding-tight);border-radius:var(--layout-help-card-radius-tight)}
.help-card-kicker{font-size:.56rem}
.help-card-title{font-size:.78rem}
.help-card-body{font-size:.64rem;line-height:1.28}
.help-card::before{width:32px;height:32px;right:7px;bottom:6px}
.help-fun-row{gap:6px}
.help-fun-ico{width:var(--layout-profile-content-inline-icon-size);height:var(--layout-profile-content-inline-icon-size);font-size:.72rem;border-radius:10px}
.help-fun-title{font-size:.66rem}
.help-fun-body{font-size:.58rem;line-height:1.24}
.help-contact-top{gap:7px}
.help-form-grid{gap:var(--layout-help-form-gap-tight)}
.help-form-control{padding:var(--layout-help-control-padding-tight);font-size:.62rem}
.help-form-textarea{min-height:var(--layout-help-textarea-min-height-tight)}
.help-form-hint{font-size:.57rem;padding:6px 7px}
.help-contact-btn{padding:7px 9px;font-size:.64rem}
.help-contact-mini{font-size:.54rem;max-width:var(--layout-help-contact-mini-max-width-tight)}
.help-footnote{font-size:.54rem}
}
/* ── Rank Ladder page */
.rank-ladder-screen,
.rank-ladder-screen:hover{
transform:none;
box-shadow:inset 0 0 0 2px var(--sky), 0 6px 24px rgba(14,165,233,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}
.rank-ladder-screen .p-save:hover,
.rank-ladder-screen .p-save:active{
transform:none;
box-shadow:0 6px 20px rgba(14,165,233,0.35);
}
.rl-sub{font-size:0.72rem;color:var(--muted);text-align:center;margin:-4px 0 10px;line-height:1.4}
.rl-list{display:flex;flex-direction:column;gap:7px;max-height:62vh;overflow-y:auto;padding-right:2px;margin-bottom:4px}
.rl-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;border:1.5px solid var(--border2);background:var(--card);transition:opacity 0.2s}
.rl-row.rl-cur{background:linear-gradient(135deg,#1e3a5f,#0f2744);border-color:#FFD700;box-shadow:0 0 0 2.5px rgba(255,215,0,0.25),0 4px 16px rgba(0,0,0,0.15)}
.rl-row.rl-done{background:#f0fdf4;border-color:#6EE7B7}
.rl-row.rl-locked{opacity:0.52;filter:grayscale(0.25)}
.rl-num{width:22px;text-align:center;font-size:0.65rem;font-weight:800;color:var(--muted);flex-shrink:0}
.rl-row.rl-cur .rl-num{color:#FFD700;font-size:0.9rem}
.rl-row.rl-done .rl-num{color:#10B981;font-size:0.85rem}
.rl-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rl-row.rl-cur .rl-icon{filter:drop-shadow(0 0 8px #FFD700)}
.rl-info{flex:1;min-width:0}
.rl-name-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.rl-name{font-size:0.78rem;font-weight:800;color:var(--text)}
.rl-row.rl-cur .rl-name{color:#fff}
.rl-row.rl-done .rl-name{color:#065F46}
.rl-tier{font-size:0.58rem;font-weight:800;padding:2px 8px;border-radius:10px}
.rl-reqs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rl-req{display:flex;align-items:center;gap:3px;font-size:0.62rem;font-weight:700;color:var(--muted)}
.rl-starter{font-size:0.62rem;color:var(--muted);font-style:italic}
/* ═══════════════════════════════════════════════════════════════
PROFILE / HUD / NARROW-SCREEN CLEANUP
Extra small-screen fixes that do not belong to a single page.
═══════════════════════════════════════════════════════════════ */
/* Profile hero card — stack vertically on small screens */
@media(max-width:600px){
.prof-hero-body{flex-direction:column;align-items:stretch;gap:var(--layout-profile-hero-body-gap)}
.prof-hero-left{width:100%;min-width:0;align-items:center;padding:var(--layout-profile-left-padding)}
.prof-hero-right{max-width:100%}
.prof-hero-center{width:100%;min-width:0;text-align:center}
.prof-rank-summary{flex-direction:column;align-items:flex-start;gap:8px}
.prof-rank-score{align-items:flex-start}
.prof-rank-actions{flex-direction:column;align-items:stretch}
.view-ranks-btn--quiet{margin-left:0}
.rewards-screen{max-width:100%}
.rewards-shell{gap:var(--layout-rewards-shell-gap)}
.rewards-hero{padding:var(--layout-rewards-hero-padding);border-radius:var(--layout-rewards-hero-radius)}
.rewards-hero-title{font-size:1rem}
.rewards-hero-sub{font-size:.7rem;max-width:100%}
.rewards-balance{grid-template-columns:1fr 1fr;gap:var(--layout-rewards-balance-gap)}
.rewards-balance-card{padding:var(--layout-rewards-balance-card-padding);border-radius:var(--layout-rewards-balance-card-radius)}
.rewards-balance-value{font-size:.95rem}
.rewards-grid{gap:var(--layout-rewards-grid-gap)}
.rewards-shop-card{border-radius:var(--layout-rewards-shop-card-radius);padding:var(--layout-rewards-shop-card-padding)}
.rewards-shop-top{gap:var(--layout-rewards-shop-top-gap)}
.rewards-shop-badge,.rewards-pill{font-size:.58rem}
.rewards-shop-cost{font-size:.66rem;max-width:112px}
.rewards-shop-icon{font-size:1.6rem}
.rewards-shop-title{font-size:.86rem}
.rewards-shop-desc{font-size:.66rem;line-height:1.4}
.rewards-progress-row{font-size:.64rem}
.rewards-shop-btn{padding:var(--layout-rewards-shop-button-padding);font-size:.72rem;border-radius:var(--layout-rewards-shop-button-radius)}
.rewards-footnote{font-size:.62rem}
.lucky-spin-ov{padding:14px}
.lucky-spin-box{padding:14px;border-radius:20px}
.lucky-spin-title{font-size:1rem}
.lucky-spin-reel-wrap{padding:12px 10px 10px}
.lucky-spin-reel{min-height:88px}
.lucky-spin-card-value{font-size:1rem}
.lucky-spin-result{padding:11px 10px 9px}
.lucky-spin-result-title{font-size:.96rem}
.lucky-spin-result-amount{font-size:1.05rem}
.lucky-spin-result-detail{font-size:.68rem}
.lucky-spin-btn{padding:9px 10px;font-size:.76rem}
.help-hero{padding:var(--layout-help-hero-padding);border-radius:var(--layout-help-hero-radius)}
.help-hero-title{font-size:1.15rem}
.help-hero-sub{font-size:.72rem}
.help-grid,.help-form-grid{grid-template-columns:1fr}
.help-card,.help-contact-box{padding:var(--layout-help-card-padding);border-radius:var(--layout-help-card-radius)}
.help-contact-top{gap:10px}
.help-form-control{padding:var(--layout-help-control-padding);font-size:.74rem}
.help-form-textarea{min-height:var(--layout-help-textarea-min-height)}
.help-contact-actions{align-items:stretch}
.help-contact-actions .help-contact-btn{width:100%;min-width:0}
.help-contact-mini{max-width:none}
.help-contact-btn{padding:9px 10px;font-size:.74rem}
}
@media (max-height:820px){
.help-shell{gap:var(--layout-help-gap-secondary)}
.help-hero{padding:var(--layout-help-hero-padding-secondary);border-radius:var(--layout-help-hero-radius-secondary)}
.help-hero-kicker{margin-bottom:5px}
.help-hero-title{font-size:1.04rem}
.help-hero-sub{font-size:.68rem;line-height:1.35}
.help-grid{gap:var(--layout-help-grid-gap-secondary)}
.help-card,.help-contact-box{padding:var(--layout-help-card-padding-secondary);border-radius:var(--layout-help-card-radius-secondary)}
.help-card-ico{font-size:1.15rem;margin-bottom:4px}
.help-card-title{font-size:.76rem;margin-bottom:3px}
.help-card-body{font-size:.64rem;line-height:1.34}
.help-form-grid{gap:var(--layout-help-form-gap-secondary)}
.help-form-label{font-size:.58rem}
.help-form-control{padding:8px 9px;font-size:.68rem}
.help-form-textarea{min-height:var(--layout-help-textarea-min-height-secondary);max-height:none}
.help-form-hint{font-size:.63rem;padding:7px 9px}
.help-contact-btn{padding:8px 10px;font-size:.7rem}
.help-contact-mini,.help-footnote{font-size:.6rem}
}
@media (max-height:820px) and (orientation:landscape){
.help-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.help-contact-top{align-items:center}
.help-contact-box{gap:var(--layout-help-gap-secondary)}
.help-form-grid{grid-template-columns:1fr 1fr}
.help-contact-actions{gap:var(--layout-help-gap-secondary)}
}
/* Profile hero — tablet portrait: reduce left card footprint */
@media(min-width:601px) and (max-width:860px){
.prof-hero-left{width:var(--layout-profile-left-width-tablet);min-width:var(--layout-profile-left-min-width-tablet)}
.prof-hero-right{max-width:calc(100% - (var(--layout-profile-left-width-tablet) + 20px))}
}
/* Mode cards — 2 columns on mid-small screens */
@media(min-width:481px) and (max-width:700px){
.mode-row{grid-template-columns:1fr 1fr !important;grid-auto-rows:auto !important;gap:10px}
.mcard{min-height:180px !important;max-height:none !important}
}
/* HUD at mid-small range — prevent overflow / crowding */
@media(min-width:481px) and (max-width:700px){
.hs{font-size:0.7rem;padding:4px 7px;gap:5px}
#hud{gap:4px 5px}
}
/* Mobile — compact stats, rank ladder, challenge dots */
@media(max-width:480px){
.ch-dot{width:24px;height:24px;font-size:0.55rem}
.stat-wr-ring{width:70px;height:70px}
.stat-ch-wrap{gap:10px}
.rl-row{padding:7px 10px;gap:7px}
.rl-icon{width:36px;height:36px}
.mission-goal{font-size:0.76rem}
}
/* Very small screens (≤360px) — 2-col grids */
@media(max-width:360px){
}
/* Mid-small screens (481–700px) — hero title + HUD scale down */
@media(min-width:481px) and (max-width:700px){
.hero-title{font-size:1.6rem}
.hero-sub{font-size:0.78rem}
}
/* ═══════════════════════════════════════
EVERYDAY CHOICE ADVENTURES MODE
═══════════════════════════════════════ */
/* Mode Card – teal/cyan */
.mcard.choice-adventure{
background:
repeating-linear-gradient(90deg,rgba(255,255,255,0.08) 0 14px,transparent 14px 28px),
linear-gradient(145deg,var(--choice-adventure-primary),var(--choice-adventure-secondary));
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 10px 28px var(--choice-adventure-shadow);
}
.mcard.choice-adventure:hover{
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 16px 36px rgba(20,184,166,0.34);
}
.mcard.choice-adventure::after{
background-image:url('data:image/svg+xml,');
}
.mcard.active .mcard-title{color:#FFF7FF;text-shadow:0 3px 10px rgba(79,70,229,0.32)}
.mcard.challenge .mcard-title{color:#FFFFFF;text-shadow:0 3px 10px rgba(15,23,42,0.4)}
.mcard.choice-adventure .mcard-title{color:#FFFDF4;text-shadow:0 3px 10px rgba(14,116,144,0.32)}
.mcard.active .mcard-sub{color:rgba(255,244,255,0.92)}
.mcard.challenge .mcard-sub{color:rgba(240,248,255,0.9)}
.mcard.choice-adventure .mcard-sub{color:rgba(255,249,234,0.92)}
.mcard.active .mcard-progress-copy{color:rgba(245,238,255,0.85)}
.mcard.challenge .mcard-progress-copy{color:rgba(226,239,255,0.82)}
.mcard.choice-adventure .mcard-progress-copy{color:rgba(255,248,223,0.84)}
/* Choice Quest — locked/coming-soon state */
.mcard.choice-adventure.mcard-locked{
opacity:1;
cursor:pointer;
}
.mcard.choice-adventure.mcard-locked:hover{
box-shadow:0 7px 0 rgba(0,0,0,0.28),0 16px 36px rgba(20,184,166,0.34);
transform:translateY(-6px);
}
.mcard.choice-adventure .mcard-content{
gap:var(--layout-choice-adventure-home-card-content-gap);
}
.mcard.choice-adventure .mcard-icon{
width:var(--layout-choice-adventure-home-icon-width);
height:var(--layout-choice-adventure-home-icon-height);
}
.mcard-locked-badge{
display:inline-flex;
align-items:center;
gap:var(--layout-choice-adventure-locked-badge-gap);
background:linear-gradient(135deg,rgba(255,255,255,0.2),rgba(255,255,255,0.1));
border:1px solid rgba(255,255,255,0.34);
border-radius:999px;
padding:var(--layout-choice-adventure-locked-badge-padding);
font-size:0.66rem;
font-weight:800;
color:#fff;
letter-spacing:.18px;
margin-top:5px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 4px 10px rgba(0,0,0,0.12);
backdrop-filter:blur(6px);
}
/* ═══════════════════════════════════════
STORY PLAY NEW BANK SUPPORT
═══════════════════════════════════════ */
.sc-main--match{
display:flex;
flex-direction:column;
gap:var(--layout-match-gap);
}
.sc-match-playfield{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--layout-match-playfield-gap);
margin-top:8px;
}
.sc-match-column{
min-width:0;
}
.sc-match-section-label{
margin-bottom:6px;
font-size:.66rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--sky3);
}
.sc-match-card-head .sc-match-section-label{
flex:0 0 auto;
margin:0 0 0 auto;
}
.sc-match-stack{
display:grid;
grid-template-columns:1fr;
gap:var(--layout-match-card-gap);
}
.sc-match-target{
display:flex;
align-items:flex-start;
gap:var(--layout-match-playfield-gap);
width:100%;
text-align:left;
padding:var(--layout-match-target-padding);
border-radius:var(--layout-match-target-radius);
border:2px dashed rgba(96,165,250,0.68);
background:linear-gradient(180deg,#F8FBFF 0%,#FFFFFF 100%);
box-shadow:
0 8px 16px rgba(59,130,246,0.08),
inset 0 1px 0 rgba(255,255,255,0.86);
transition:transform .14s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
user-select:none;
-webkit-user-select:none;
}
.sc-match-target::before{
content:"";
flex:0 0 5px;
align-self:stretch;
border-radius:999px;
background:linear-gradient(180deg,#60A5FA,#2563EB);
box-shadow:0 6px 12px rgba(37,99,235,0.16);
}
.sc-match-stack .sc-match-target:nth-child(1){
border-color:rgba(96,165,250,0.78);
background:var(--tone-quest-card-blue);
}
.sc-match-stack .sc-match-target:nth-child(2){
border-color:rgba(52,211,153,0.78);
background:var(--tone-quest-card-green);
}
.sc-match-stack .sc-match-target:nth-child(3){
border-color:rgba(251,146,60,0.78);
background:var(--tone-quest-card-orange);
}
.sc-match-stack .sc-match-target:nth-child(2)::before{
background:linear-gradient(180deg,#34D399,#059669);
box-shadow:0 6px 12px rgba(5,150,105,0.16);
}
.sc-match-stack .sc-match-target:nth-child(3)::before{
background:linear-gradient(180deg,#FDBA74,#F97316);
box-shadow:0 6px 12px rgba(249,115,22,0.16);
}
.sc-match-problem-num{
flex:0 0 auto;
width:24px;
height:24px;
border-radius:999px;
display:grid;
place-items:center;
background:linear-gradient(135deg,#60A5FA,#2563EB);
color:#fff;
font-size:.72rem;
font-weight:900;
box-shadow:0 7px 14px rgba(15,23,42,0.12);
}
.sc-match-stack .sc-match-target:nth-child(1) .sc-match-problem-num{
background:linear-gradient(135deg,#60A5FA,#2563EB);
}
.sc-match-stack .sc-match-target:nth-child(2) .sc-match-problem-num{
background:linear-gradient(135deg,#34D399,#059669);
}
.sc-match-stack .sc-match-target:nth-child(3) .sc-match-problem-num{
background:linear-gradient(135deg,#FDBA74,#F97316);
}
.sc-match-target-copy{
flex:1;
min-width:0;
}
.sc-match-problem-text{
font-size:.8rem;
font-weight:900;
line-height:1.25;
color:var(--text);
}
.sc-match-slot{
margin-top:7px;
min-height:var(--layout-match-slot-min-height);
border-radius:12px;
padding:var(--layout-match-slot-padding);
border:1.5px dashed rgba(71,85,105,0.32);
background:rgba(255,255,255,0.78);
box-shadow:var(--layout-quest-inset);
display:flex;
align-items:center;
transition:border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sc-match-slot-placeholder,
.sc-match-slot-card{
font-size:.72rem;
font-weight:800;
line-height:1.25;
}
.sc-match-slot-placeholder{
color:#64748B;
}
.sc-match-slot-card{
color:#0F3F6E;
display:inline-flex;
align-items:center;
max-width:100%;
min-height:24px;
padding:4px 9px;
border-radius:999px;
background:linear-gradient(135deg,#FFFFFF,#EAF4FF);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
box-shadow:
0 5px 12px rgba(37,99,235,0.12),
inset 0 0 0 1px rgba(191,219,254,0.7);
}
.sc-match-target.is-ready{
border-color:#93C5FD;
background:linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%);
box-shadow:
0 10px 20px rgba(37,99,235,0.12),
0 0 0 3px rgba(147,197,253,0.16);
}
.sc-match-target.is-ready .sc-match-slot{
background:linear-gradient(180deg,#FFFFFF 0%,#EFF6FF 100%);
}
.sc-match-target.is-filled .sc-match-slot{
border-style:solid;
border-color:#93C5FD;
background:linear-gradient(180deg,#FFFFFF 0%,#EAF4FF 100%);
box-shadow:0 0 0 3px rgba(147,197,253,0.15),var(--layout-quest-inset);
}
.sc-match-target.is-drop-hover{
border-color:#F59E0B;
background:linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 100%);
box-shadow:0 10px 24px rgba(245,158,11,0.18);
transform:translateY(-1px);
}
.sc-match-target.is-drop-hover .sc-match-slot{
border-style:solid;
border-color:#FBBF24;
background:linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 100%);
box-shadow:0 0 0 3px rgba(251,191,36,0.15);
}
.choices--match{
display:grid !important;
grid-template-columns:1fr;
gap:var(--layout-match-card-gap);
}
.cho-btn--match-option{
justify-content:flex-start;
text-align:left;
gap:var(--layout-match-gap);
padding:var(--layout-match-choice-padding);
border:2px solid rgba(245,158,11,0.36);
background:var(--tone-quest-card-gold);
box-shadow:0 12px 22px rgba(180,138,63,0.1),var(--layout-quest-inset);
cursor:pointer;
touch-action:manipulation;
user-select:none;
-webkit-user-select:none;
transition:transform .14s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}
.choices--match .cho-btn--match-option:nth-child(1){
border-color:#93C5FD;
background:var(--tone-quest-card-blue);
}
.choices--match .cho-btn--match-option:nth-child(2){
border-color:#86EFAC;
background:var(--tone-quest-card-green);
}
.choices--match .cho-btn--match-option:nth-child(3){
border-color:#FDBA74;
background:var(--tone-quest-card-orange);
}
.cho-btn--match-option:hover{
transform:translateY(-1px);
border-color:#8B5CF6;
box-shadow:0 14px 24px rgba(99,102,241,0.16);
}
.cho-btn--match-option:not(.is-used):active,
.cho-btn--match-option.is-armed:not(.is-used){
cursor:grabbing;
transform:translateY(-1px);
border-color:#8B5CF6;
box-shadow:0 14px 24px rgba(99,102,241,0.16);
}
.sc-match-card-emoji{
flex:0 0 auto;
width:24px;
height:24px;
border-radius:999px;
display:grid;
place-items:center;
background:linear-gradient(135deg,#FFF7DC,#FFFFFF);
color:#A16207;
font-size:.86rem;
box-shadow:inset 0 0 0 1px rgba(245,158,11,0.2),0 5px 10px rgba(245,158,11,0.14);
}
.cho-btn--match-option.is-ready:not(.is-used){
border-color:#8B5CF6;
box-shadow:0 14px 24px rgba(99,102,241,0.16);
}
.cho-btn--match-option.is-used{
opacity:.55;
transform:none;
}
.cho-btn--match-option.is-dragging{
opacity:.18;
transform:scale(.98);
}
.sc-match-progress{
font-size:.7rem;
font-weight:800;
color:var(--muted);
}
.sc-match-progress-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:42px;
padding:3px 8px;
margin-right:6px;
border-radius:999px;
background:linear-gradient(135deg,#DBEAFE,#F0FDF4);
color:#1D4ED8;
border:1px solid rgba(96,165,250,0.28);
box-shadow:0 6px 14px rgba(37,99,235,0.14),var(--layout-quest-inset);
}
.match-drag-ghost{
position:fixed;
left:0;
top:0;
z-index:9999;
pointer-events:none;
max-width:min(260px,70vw);
padding:10px 12px;
border-radius:16px;
border:2px solid #F59E0B;
background:linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 100%);
color:#9A3412;
font-size:.8rem;
font-weight:900;
line-height:1.2;
box-shadow:0 18px 30px rgba(245,158,11,0.24);
transform:translate(-50%,-50%) rotate(-2deg);
}
body.match-dragging .sc-main--match{
cursor:grabbing;
}
@media (max-width:700px){
.sc-match-playfield{
grid-template-columns:1fr;
}
}
/* Action buttons */
.ca-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
}
.ca-btn{
padding:13px 10px;
border-radius:13px;
border:none;
font-size:.84rem;
font-weight:800;
cursor:pointer;
font-family:inherit;
transition:all .18s;
}
.ca-btn:hover{transform:translateY(-2px)}
.ca-btn:active{transform:translateY(1px)}
.ca-btn.primary{
background:linear-gradient(135deg,#0ea5e9,#0284c7);
color:#fff;
box-shadow:0 3px 0 rgba(2,132,199,.5);
}
.ca-btn.secondary{
background:var(--bg1);
border:2px solid var(--border2);
color:var(--text);
}
/* ═══════════════════════════════════════════════════════════════
EVERYDAY CHOICE ADVENTURES / BUSINESS CHALLENGE LOBBY LAYOUTS
Full-screen lobby and setup layouts, plus their breakpoint rules.
═══════════════════════════════════════════════════════════════ */
/* Lock #main overflow */
#main:has(.ca-lobby-horiz),
#main:has(.ch-lobby-horiz){overflow:hidden;padding-bottom:0}
/* ── Shared horizontal lobby shell (flex column) ── */
.ca-lobby-horiz,
.ch-lobby-horiz{
display:flex;
flex-direction:column;
height:100%;
gap:var(--layout-lobby-gap);
overflow:hidden;
position:relative;
isolation:isolate;
}
.ca-lobby-horiz::before,
.ch-lobby-horiz::before{
content:'';
position:absolute;
inset:-8px;
border-radius:var(--layout-lobby-shell-radius);
background:linear-gradient(180deg,rgba(255,255,255,0.34),rgba(255,255,255,0.18));
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35);
pointer-events:none;
z-index:0;
}
.ca-lobby-horiz > *,
.ch-lobby-horiz > *{
position:relative;
z-index:1;
}
/* ── Compact hero banner — teal (Choice Quest) ── */
.ca-lobby-banner{
background:linear-gradient(135deg,#0891b2 0%,#0e7490 60%,#0c6478 100%);
border-radius:var(--layout-lobby-banner-radius);
padding:var(--layout-lobby-banner-padding);
color:#fff;
display:flex;
align-items:center;
gap:var(--layout-lobby-banner-gap);
flex-shrink:0;
border:2px solid rgba(255,255,255,0.25);
box-shadow:0 5px 0 rgba(0,0,0,0.18),0 8px 20px rgba(8,145,178,0.25);
position:relative;
overflow:hidden;
}
/* ── Compact hero banner — amber (Business Challenge) ── */
.ch-lobby-banner{
background:linear-gradient(135deg,#0F172A 0%,#1D4ED8 62%,#2563EB 100%);
border-radius:var(--layout-lobby-banner-radius);
padding:var(--layout-lobby-banner-padding);
color:#fff;
display:flex;
align-items:center;
gap:var(--layout-lobby-banner-gap);
flex-shrink:0;
border:2px solid rgba(255,255,255,0.25);
box-shadow:0 5px 0 rgba(0,0,0,0.18),0 8px 20px rgba(29,78,216,0.28);
position:relative;
overflow:hidden;
}
.ca-lobby-banner::before,
.ch-lobby-banner::before{
content:'';
position:absolute;
inset:0;
background-image:radial-gradient(circle at 85% 50%,rgba(255,255,255,0.07) 1px,transparent 1px);
background-size:48px 48px;
pointer-events:none;
}
.lobby-banner-icon{font-size:2.7rem;flex-shrink:0;animation:floatBounce 3s ease-in-out infinite;position:relative;z-index:1}
.lobby-banner-body{flex:1;min-width:0;position:relative;z-index:1}
.lobby-banner-title{font-size:1.62rem;font-weight:900;letter-spacing:-0.5px;margin-bottom:2px;color:#fff;line-height:1.05}
.lobby-banner-sub{font-size:0.78rem;color:rgba(255,255,255,0.88);line-height:1.26}
.lobby-banner-meta{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.lobby-banner-stat{background:rgba(255,255,255,0.18);border:1.5px solid rgba(255,255,255,0.28);border-radius:50px;padding:3px 10px;font-size:0.68rem;font-weight:700;color:#fff}
.lobby-png-icon{
display:block;
width:100%;
height:100%;
object-fit:contain;
pointer-events:none;
}
.lobby-banner-icon--png{
width:var(--layout-lobby-banner-icon-size,clamp(84px,6vw,104px));
height:var(--layout-lobby-banner-icon-size,clamp(84px,6vw,104px));
display:flex;
align-items:center;
justify-content:center;
font-size:0;
}
.lobby-banner-stat{
display:inline-flex;
align-items:center;
gap:6px;
}
.lobby-png-icon--stat{
width:1.42em;
height:1.42em;
flex:0 0 1.42em;
}
.story-type-chip .story-type-chip-icon{
font-size:0;
}
.story-type-chip .lobby-png-icon--chip{
width:100%;
height:100%;
}
.story-action-icon--png{
font-size:0;
}
.story-action-stickers span,
.choiceadventure-mission-top span:first-child{
display:inline-flex;
align-items:center;
gap:6px;
}
.choiceadventure-flow-icon .lobby-png-icon--flow{
width:100%;
height:100%;
}
.ch-action-vs--png{
width:clamp(74px,5.8vw,92px);
height:clamp(74px,5.8vw,92px);
display:flex;
align-items:center;
justify-content:center;
font-size:0;
text-shadow:none;
}
/* ── BUSINESS CHALLENGE: 2 cards (info + action) in a row ── */
.ch-lobby-cards{
flex:1;
display:grid;
grid-template-columns:1fr 1fr;
gap:var(--layout-lobby-card-gap);
min-height:0;
}
.ch-info-card{
background:var(--card);
border:2px solid var(--border);
border-radius:var(--layout-lobby-card-radius);
padding:var(--layout-lobby-card-padding);
display:flex;
flex-direction:column;
gap:var(--layout-lobby-card-gap);
overflow:hidden;
box-shadow:var(--sh);
}
.ch-action-card{
background:var(--card);
border:2px solid var(--border);
border-radius:var(--layout-lobby-card-radius);
padding:var(--layout-lobby-action-padding);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:var(--layout-lobby-action-gap);
overflow:hidden;
box-shadow:var(--sh);
}
.ch-action-matchup{display:flex;align-items:center;justify-content:center;gap:14px}
.ch-action-avatar{
width:86px;
height:86px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:linear-gradient(135deg,#F8FBFF,#E0F2FE);
box-shadow:0 10px 22px rgba(15,76,129,0.12);
}
.ch-action-avatar svg,.ch-action-avatar img{width:100%;height:100%;display:block}
.ch-action-avatar--player{border:2px solid #7DD3FC}
.ch-action-avatar--boss{border:2px solid #FBBF24}
.ch-action-vs{font-size:2.75rem;animation:floatBounce 2.5s ease-in-out infinite}
.ch-action-title{font-size:1.15rem;font-weight:900;color:var(--text)}
.ch-action-sub{font-size:0.78rem;color:var(--muted);text-align:center}
/* ── STORY PLAY landing variants ── */
.story-lobby-banner{
background:linear-gradient(135deg,var(--story-primary) 0%,#6366F1 58%,var(--story-secondary) 100%);
box-shadow:0 5px 0 rgba(0,0,0,0.18),0 8px 20px var(--story-shadow);
}
.story-lobby-horiz{
height:auto;
min-height:0;
overflow:visible;
}
.story-lobby-cards{
flex:0 1 auto;
align-items:start;
}
.story-info-card{
border-color:var(--story-border);
background:linear-gradient(180deg,var(--story-surface) 0%,#FFFFFF 100%);
padding:16px;
gap:10px;
min-height:0;
}
.story-progress-card{
border:1.5px solid var(--story-border);
background:linear-gradient(180deg,var(--story-surface-2) 0%,#FFFFFF 100%);
border-radius:16px;
padding:12px 13px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.72),0 8px 18px rgba(139,92,246,0.08);
}
.story-progress-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.story-progress-kicker{
font-size:0.72rem;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#5B21B6;
}
.story-progress-copy{
font-size:0.82rem;
font-weight:900;
color:#4338CA;
}
.story-progress-bar{
width:100%;
height:10px;
background:var(--story-border);
border-radius:999px;
overflow:hidden;
box-shadow:inset 0 1px 2px rgba(99,102,241,0.12);
}
.story-progress-fill{
height:100%;
border-radius:999px;
background:linear-gradient(135deg,var(--story-primary),var(--story-secondary));
}
.story-progress-note{
margin-top:10px;
font-size:0.77rem;
line-height:1.45;
font-weight:700;
color:#4C1D95;
}
.story-type-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.story-type-chip{
display:flex;
align-items:center;
gap:8px;
min-width:0;
padding:9px 10px;
border-radius:14px;
background:linear-gradient(180deg,#FFFFFF 0%,var(--story-surface) 100%);
border:1.5px solid color-mix(in srgb, var(--story-sun) 70%, white);
box-shadow:0 6px 16px rgba(249,115,22,0.08);
}
.story-type-chip span{
width:36px;
height:36px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--story-sun),color-mix(in srgb, var(--story-accent) 55%, white));
font-size:1rem;
flex-shrink:0;
}
.story-type-chip strong{
font-size:0.78rem;
line-height:1.2;
color:#5B21B6;
}
.story-action-card{
border-color:color-mix(in srgb, var(--story-accent) 35%, white);
background:linear-gradient(180deg,#FFF1F7 0%,#FFFFFF 100%);
padding:18px 16px;
justify-content:flex-start;
gap:12px;
min-height:0;
}
.story-action-matchup{gap:12px}
.story-action-avatar{
border-color:#4ADE80;
background:linear-gradient(135deg,#FFFFFF,#DCFCE7);
}
.story-action-icon{
width:clamp(104px,8vw,122px);
height:clamp(104px,8vw,122px);
border-radius:28px;
display:flex;
align-items:center;
justify-content:center;
font-size:2.7rem;
background:linear-gradient(135deg,var(--story-sun),color-mix(in srgb, var(--story-accent) 55%, white));
color:var(--story-primary);
box-shadow:0 12px 24px rgba(236,72,153,0.15);
}
.story-action-stickers{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:6px;
}
.story-action-stickers span{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:999px;
background:linear-gradient(135deg,#EEF2FF,#FFF7ED);
border:1.5px solid var(--story-border);
font-size:.72rem;
font-weight:800;
color:#5B21B6;
}
.story-big-play{
background:linear-gradient(135deg,var(--story-primary),var(--story-secondary));
box-shadow:0 6px 20px rgba(79,70,229,0.28);
}
.story-big-play:hover{
box-shadow:0 10px 28px rgba(79,70,229,0.34);
}
.challenge-lobby-horiz{
height:auto;
min-height:0;
overflow:visible;
}
.challenge-lobby-horiz .ch-lobby-cards{
flex:0 1 auto;
align-items:start;
}
.challenge-lobby-horiz .ch-info-card{
border-color:var(--challenge-border);
background:linear-gradient(180deg,var(--challenge-surface) 0%,#FFFFFF 100%);
padding:16px;
gap:10px;
min-height:0;
}
.challenge-lobby-horiz .challenge-action-card{
border-color:color-mix(in srgb, var(--challenge-accent) 45%, white);
background:linear-gradient(180deg,var(--challenge-surface-2) 0%,#FFFFFF 100%);
padding:18px 16px;
justify-content:center;
gap:12px;
min-height:0;
}
.challenge-rules-card{
padding:15px 15px 14px;
border-radius:20px;
background:linear-gradient(160deg,var(--challenge-secondary),#1E3A8A);
border:2px solid color-mix(in srgb, var(--challenge-primary) 55%, white);
box-shadow:0 16px 28px rgba(29,78,216,0.20);
color:#fff;
}
.challenge-rules-kicker{
font-size:.8rem;
font-weight:900;
letter-spacing:.1em;
text-transform:uppercase;
color:color-mix(in srgb, var(--challenge-gold) 82%, white);
margin-bottom:12px;
}
.challenge-rule-row{
display:flex;
gap:10px;
align-items:flex-start;
padding:10px 11px;
border-radius:18px;
background:linear-gradient(135deg,rgba(255,255,255,0.13),rgba(255,255,255,0.05));
border:1px solid rgba(255,255,255,0.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}
.challenge-rule-row + .challenge-rule-row{
margin-top:10px;
}
.challenge-rule-badge{
width:50px;
height:50px;
border-radius:12px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
flex-shrink:0;
background:linear-gradient(135deg,var(--challenge-accent),var(--challenge-gold));
color:#7C2D12;
font-weight:900;
border:1px solid rgba(255,255,255,0.35);
box-shadow:0 10px 18px rgba(251,146,60,0.26);
line-height:1;
}
.challenge-rule-badge em{
display:block;
width:100%;
font-style:normal;
text-align:center;
font-size:.78rem;
font-weight:900;
letter-spacing:.01em;
line-height:1;
color:rgba(124,45,18,0.92);
margin-bottom:1px;
}
.challenge-rule-badge strong{
display:block;
width:100%;
text-align:center;
font-size:1.12rem;
line-height:1;
color:#7C2D12;
}
.challenge-rule-row strong{
display:block;
font-size:.94rem;
color:#fff;
margin-bottom:3px;
}
.challenge-rule-row span{
display:block;
font-size:.8rem;
line-height:1.35;
color:rgba(255,255,255,0.92);
}
.challenge-info-note{
padding:10px 12px;
border-radius:16px;
background:linear-gradient(135deg,#FFFFFF,var(--challenge-surface));
border:1.5px solid color-mix(in srgb, var(--challenge-primary) 28%, white);
font-size:.75rem;
font-weight:700;
line-height:1.42;
color:#1E3A8A;
}
.challenge-lobby-horiz .ch-action-avatar{
width:76px;
height:76px;
}
.challenge-action-stars{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
}
.challenge-action-stars span{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:999px;
background:linear-gradient(135deg,#DBEAFE,var(--challenge-surface-2));
border:1.5px solid color-mix(in srgb, var(--challenge-primary) 28%, white);
font-size:.72rem;
font-weight:800;
color:#1E3A8A;
}
.challenge-lobby-horiz .ch-action-avatar--player{
border-color:#38BDF8;
background:linear-gradient(135deg,#E0F2FE,#FFFFFF);
}
.challenge-lobby-horiz .ch-action-avatar--boss{
border-color:var(--challenge-accent);
background:linear-gradient(135deg,#FFEDD5,#FFFFFF);
}
.challenge-lobby-horiz .ch-action-vs{
color:#fff;
font-size:2.3rem;
text-shadow:0 6px 18px rgba(249,115,22,0.34);
}
.challenge-lobby-horiz .ch-action-vs--png{
color:inherit;
font-size:0;
text-shadow:none;
}
.challenge-lobby-horiz .ch-action-title{
color:#0F172A;
font-size:1.05rem;
}
.challenge-lobby-horiz .ch-action-sub{
color:#334155;
font-size:.75rem;
line-height:1.35;
max-width:30ch;
}
.challenge-big-play{
background:linear-gradient(135deg,var(--challenge-accent),var(--challenge-gold));
box-shadow:0 10px 20px rgba(249,115,22,0.25);
}
/* ── Choice Quest landing variants ── */
.choiceadventure-banner{
background:linear-gradient(135deg,var(--choice-adventure-primary) 0%,var(--choice-adventure-secondary) 45%,#155e75 100%);
box-shadow:0 5px 0 rgba(0,0,0,0.18),0 10px 24px var(--choice-adventure-shadow);
}
.choiceadventure-shell{
gap:var(--layout-choice-adventure-gap);
}
.choiceadventure-lobby-screen,
.choiceadventure-round-screen{
height:auto;
min-height:0;
overflow:visible;
}
.choiceadventure-shell .ca-lobby-banner{
padding:var(--layout-choice-adventure-banner-padding);
gap:var(--layout-choice-adventure-banner-gap);
border-radius:var(--layout-choice-adventure-banner-radius);
}
.choiceadventure-shell .lobby-banner-icon{
font-size:2.6rem;
}
.choiceadventure-shell .lobby-banner-title{
font-size:1.68rem;
margin-bottom:2px;
}
.choiceadventure-shell .lobby-banner-sub{
font-size:.86rem;
line-height:1.38;
}
.choiceadventure-shell .lobby-banner-meta{
gap:6px;
margin-top:6px;
}
.choiceadventure-shell .lobby-banner-stat{
padding:4px 10px;
font-size:.7rem;
}
.choiceadventure-cards{
grid-template-columns:minmax(0,1.08fr) minmax(300px,0.92fr) !important;
gap:var(--layout-choice-adventure-card-gap);
}
.choiceadventure-lobby-screen .choiceadventure-cards{
grid-template-columns:minmax(280px,0.88fr) minmax(0,1.12fr) !important;
flex:0 1 auto;
align-items:start;
}
.choiceadventure-round-screen .choiceadventure-cards{
grid-template-columns:minmax(228px,0.68fr) minmax(0,1.32fr) !important;
flex:0 1 auto;
align-items:start;
}
.choiceadventure-result-screen .choiceadventure-cards{
grid-template-columns:minmax(0,1fr) !important;
max-width:var(--layout-choice-adventure-result-max-width);
margin:0 auto;
}
.choiceadventure-shell .ch-info-card,
.choiceadventure-shell .ch-action-card{
padding:var(--layout-choice-adventure-card-padding);
gap:var(--layout-choice-adventure-card-gap);
border-radius:var(--layout-choice-adventure-card-radius);
}
.choiceadventure-round-screen .ch-info-card{
justify-content:flex-start;
min-height:0;
}
.choiceadventure-round-screen .ch-action-card{
justify-content:flex-start;
min-height:0;
}
.choiceadventure-shell .story-progress-card,
.choiceadventure-shell .choiceadventure-brief-card,
.choiceadventure-shell .choiceadventure-mission-card{
padding:12px 13px;
border-radius:15px;
}
.choiceadventure-shell .story-progress-top,
.choiceadventure-shell .choiceadventure-brief-top,
.choiceadventure-shell .choiceadventure-mission-top{
margin-bottom:7px;
}
.choiceadventure-shell .story-progress-note,
.choiceadventure-shell .choiceadventure-brief-copy,
.choiceadventure-shell .choiceadventure-mission-scene{
font-size:.86rem;
line-height:1.46;
}
.choiceadventure-story-card{
border-radius:18px;
border:1.5px solid #99F6E4;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.65),transparent 42%),
linear-gradient(180deg,#FFFFFF 0%,#F0FDFA 100%);
padding:14px 15px;
box-shadow:0 10px 24px rgba(13,148,136,0.10);
display:grid;
gap:8px;
align-content:start;
}
.choiceadventure-lobby-screen .ch-info-card,
.choiceadventure-lobby-screen .ch-action-card{
padding:16px;
gap:10px;
min-height:0;
}
.choiceadventure-lobby-screen .ca-lobby-banner{
padding:16px 18px;
gap:12px;
}
.choiceadventure-lobby-screen .choiceadventure-action-card{
justify-content:flex-start;
}
.choiceadventure-lobby-screen .choiceadventure-action-icon{
width:92px;
height:92px;
border-radius:24px;
font-size:2.5rem;
}
.choiceadventure-lobby-screen .story-progress-card,
.choiceadventure-lobby-screen .choiceadventure-mission-card,
.choiceadventure-lobby-screen .choiceadventure-reward-explain{
padding:11px 12px;
}
.choiceadventure-lobby-screen .choiceadventure-reward-list{
gap:6px;
}
.choiceadventure-lobby-screen .choiceadventure-reward-chip{
padding:5px 8px;
font-size:.64rem;
}
.choiceadventure-story-top{
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
margin-bottom:8px;
}
.choiceadventure-tts-btn{
position:relative !important;
top:auto !important;
right:auto !important;
flex-shrink:0;
}
.choiceadventure-story-kicker{
font-size:.72rem;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#0F766E;
}
.choiceadventure-story-pill{
display:inline-flex;
align-items:center;
padding:4px 9px;
border-radius:999px;
background:linear-gradient(135deg,#E0F2FE,#ECFDF5);
border:1px solid #BAE6FD;
color:#155E75;
font-size:.7rem;
font-weight:900;
}
.choiceadventure-story-scene{
display:flex;
align-items:flex-start;
gap:10px;
margin-bottom:10px;
}
.choiceadventure-story-emoji{
width:48px;
height:48px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:1.7rem;
background:linear-gradient(135deg,#CCFBF1,#A5F3FC);
box-shadow:0 10px 20px rgba(8,145,178,0.12);
}
.choiceadventure-story-scene-copy{
display:flex;
flex-direction:column;
gap:1px;
min-width:0;
flex:1;
}
.choiceadventure-story-scene-copy strong{
font-size:1.04rem;
color:#164E63;
font-weight:900;
}
.choiceadventure-story-scene-copy span{
font-size:.8rem;
color:#0F766E;
font-weight:800;
}
.choiceadventure-story-label{
display:inline-flex;
align-items:center;
padding:4px 10px;
border-radius:999px;
background:linear-gradient(135deg,#DCFCE7,#CCFBF1);
color:#0F766E;
font-size:.74rem;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
margin-bottom:10px;
}
.choiceadventure-story-text{
display:grid;
gap:8px;
font-size:1.42rem;
line-height:1.46;
color:#164E63;
font-weight:900;
margin-top:0;
}
.choiceadventure-story-text p{
margin:0;
}
.choiceadventure-story-text .choiceadventure-story-prompt{
margin-top:2px;
padding-top:8px;
border-top:1.5px solid rgba(20,184,166,0.24);
color:#0F766E;
font-weight:inherit;
}
.choiceadventure-story-question{
padding:10px 12px;
border-radius:16px;
background:linear-gradient(180deg,#FFFFFF 0%,#FFF7ED 100%);
border:1.5px solid #FCD34D;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.75);
margin-bottom:10px;
}
.choiceadventure-story-tipline{
margin-top:0;
padding:9px 11px;
border-radius:12px;
background:linear-gradient(135deg,#EFF6FF 0%,#F0FDFA 100%);
border:1.5px solid #BFDBFE;
color:#155E75;
font-size:.88rem;
line-height:1.42;
font-weight:700;
}
.choiceadventure-story-tipline strong{
color:#0F766E;
font-weight:900;
}
.choiceadventure-shell .ca-actions{
gap:8px;
}
.choiceadventure-shell .ca-btn{
padding:10px 10px;
font-size:.8rem;
}
.choiceadventure-shell .ch-action-title{
font-size:1.02rem;
}
.choiceadventure-shell .ch-action-sub{
font-size:.74rem;
}
.choiceadventure-shell .ca-action-hero{
gap:6px;
}
.ca-info-card{
border-color:#A5F3FC;
background:linear-gradient(180deg,#F3FEFF 0%,#FFFFFF 100%);
}
.choiceadventure-info-card{
border-color:#99F6E4;
background:linear-gradient(180deg,#F0FDFA 0%,#FFFFFF 100%);
}
.ca-sim-progress-card{
border-color:#99F6E4;
background:linear-gradient(180deg,#ECFDF5 0%,#FFFFFF 100%);
}
.ca-sim-progress-card .story-progress-kicker,
.ca-sim-progress-card .story-progress-copy{
color:#0F766E;
}
.ca-sim-progress-card .story-progress-note{
color:#155E75;
}
.choiceadventure-progress-fill{
background:linear-gradient(135deg,#14B8A6,#0F766E);
}
.choiceadventure-flow-list{
display:grid;
gap:10px;
}
.choiceadventure-lobby-screen .choiceadventure-flow-list{
gap:8px;
}
.choiceadventure-flow-step{
display:flex;
align-items:flex-start;
gap:12px;
padding:13px 14px;
border-radius:16px;
border:1.5px solid #BAE6FD;
background:linear-gradient(180deg,#FFFFFF 0%,#F0FDFF 100%);
box-shadow:0 8px 18px rgba(8,145,178,0.08);
}
.choiceadventure-lobby-screen .choiceadventure-flow-step{
padding:10px 11px;
}
.choiceadventure-flow-icon{
width:40px;
height:40px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:1.1rem;
background:linear-gradient(135deg,#CFFAFE,#A5F3FC);
}
.choiceadventure-lobby-screen .choiceadventure-flow-icon{
width:42px;
height:42px;
border-radius:12px;
font-size:1rem;
}
.choiceadventure-flow-copy{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.choiceadventure-flow-copy strong{
font-size:.92rem;
font-weight:900;
color:#164E63;
}
.choiceadventure-lobby-screen .choiceadventure-flow-copy strong{
font-size:.86rem;
}
.choiceadventure-flow-copy span{
font-size:.82rem;
line-height:1.42;
color:#155E75;
font-weight:700;
}
.choiceadventure-lobby-screen .choiceadventure-flow-copy span{
font-size:.76rem;
line-height:1.3;
}
.ca-info-feature{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px 15px;
border-radius:16px;
border:1.5px solid #BAE6FD;
background:linear-gradient(180deg,#ECFEFF 0%,#FFFFFF 100%);
}
.ca-info-feature-icon{
width:42px;
height:42px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.35rem;
background:#CFFAFE;
flex-shrink:0;
}
.ca-info-feature-title{
font-size:0.92rem;
font-weight:900;
color:#164E63;
margin-bottom:4px;
}
.ca-info-feature-copy{
font-size:0.77rem;
line-height:1.5;
font-weight:700;
color:#155E75;
}
.ca-lobby-stat-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.ca-lobby-stat-card{
border-radius:15px;
padding:13px 12px;
background:linear-gradient(180deg,#FFFFFF 0%,#F0FDFF 100%);
border:1.5px solid #CFFAFE;
box-shadow:0 6px 16px rgba(8,145,178,0.08);
}
.ca-lobby-stat-label{
display:block;
font-size:0.68rem;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#0F766E;
margin-bottom:6px;
}
.ca-lobby-stat-value{
display:block;
font-size:1.35rem;
font-weight:900;
color:#0F172A;
}
.ca-info-tip-list{
display:grid;
gap:8px;
}
.ca-info-tip{
display:flex;
align-items:flex-start;
gap:8px;
padding:10px 12px;
border-radius:14px;
background:#FFFFFF;
border:1.5px solid #E0F7FA;
color:#164E63;
font-size:0.76rem;
font-weight:700;
line-height:1.4;
}
.ca-info-tip span{flex-shrink:0}
.ca-action-card{
align-items:stretch;
justify-content:flex-start;
border-color:#67E8F9;
background:linear-gradient(180deg,#ECFEFF 0%,#FFFFFF 100%);
}
.choiceadventure-action-card{
border-color:#67E8F9;
background:linear-gradient(180deg,#ECFEFF 0%,#FFFFFF 100%);
}
.ca-action-hero{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
text-align:center;
}
.choiceadventure-action-matchup{gap:12px}
.choiceadventure-action-icon{
background:linear-gradient(135deg,#CCFBF1,#A5F3FC);
color:#115E59;
box-shadow:0 12px 24px rgba(13,148,136,0.15);
}
.choiceadventure-action-weather{
width:70px;
height:70px;
border-radius:24px;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
background:linear-gradient(135deg,#FEF3C7,#FDE68A);
color:#92400E;
box-shadow:0 12px 24px rgba(245,158,11,0.16);
}
.choiceadventure-action-list{
margin-top:2px;
}
.choiceadventure-callout{
margin-top:auto;
}
.choiceadventure-brief-card{
border-radius:18px;
border:1.5px solid #BAE6FD;
background:linear-gradient(180deg,#FFFFFF 0%,#F0FDFF 100%);
padding:14px 15px;
box-shadow:0 8px 20px rgba(8,145,178,0.08);
}
.choiceadventure-brief-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-size:.76rem;
font-weight:900;
color:#155E75;
margin-bottom:8px;
}
.choiceadventure-brief-copy{
font-size:.84rem;
line-height:1.55;
color:#164E63;
}
.choiceadventure-mission-card{
border-radius:18px;
border:1.5px solid #99F6E4;
background:linear-gradient(180deg,#FFFFFF 0%,#ECFEFF 100%);
padding:15px 16px;
box-shadow:0 10px 22px rgba(8,145,178,0.10);
}
.choiceadventure-mission-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
font-size:.75rem;
font-weight:900;
color:#0F766E;
}
.choiceadventure-mission-scene{
font-size:.92rem;
line-height:1.5;
color:#164E63;
font-weight:700;
}
.choiceadventure-mission-prompt{
margin-top:12px;
padding:11px 12px;
border-radius:14px;
background:linear-gradient(135deg,#ECFDF5 0%,#F0FDFA 100%);
border:1px solid #A7F3D0;
color:#166534;
font-size:.86rem;
font-weight:900;
}
.choiceadventure-mission-badges{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:10px;
}
.choiceadventure-mission-badges span{
display:inline-flex;
align-items:center;
padding:6px 9px;
border-radius:999px;
background:linear-gradient(135deg,#E0F2FE,#ECFDF5);
border:1px solid #BAE6FD;
color:#155E75;
font-size:.68rem;
font-weight:900;
}
.choiceadventure-reward-explain{
border-radius:16px;
border:1.5px solid #BAE6FD;
background:linear-gradient(180deg,#FFFFFF 0%,#F0FDFF 100%);
padding:12px 13px;
box-shadow:0 8px 18px rgba(8,145,178,0.08);
}
.choiceadventure-reward-explain-title{
font-size:.78rem;
font-weight:900;
color:#164E63;
margin-bottom:4px;
}
.choiceadventure-reward-explain-copy{
font-size:.8rem;
line-height:1.42;
color:#155E75;
font-weight:700;
}
.choiceadventure-reward-list{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:10px;
}
.choiceadventure-reward-chip{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 9px;
border-radius:999px;
background:linear-gradient(135deg,#EFF6FF,#ECFDF5);
border:1px solid #BFDBFE;
color:#164E63;
font-size:.67rem;
font-weight:900;
}
.choiceadventure-limit-note{
padding:10px 12px;
border-radius:14px;
background:linear-gradient(135deg,#FFF7ED 0%,#FEFCE8 100%);
border:1px solid #FCD34D;
color:#92400E;
font-size:.74rem;
line-height:1.4;
font-weight:800;
}
.choiceadventure-lobby-screen .choiceadventure-mission-prompt{
margin-top:10px;
padding:9px 10px;
font-size:.74rem;
}
.choiceadventure-decision-block{
display:flex;
flex-direction:column;
gap:8px;
}
.choiceadventure-round-screen .choiceadventure-decision-block{
gap:6px;
}
.choiceadventure-decision-title{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-size:.78rem;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#0F766E;
}
.choiceadventure-round-screen .choiceadventure-decision-title{
font-size:.72rem;
}
.choiceadventure-decision-title strong{
font-size:.86rem;
letter-spacing:0;
text-transform:none;
color:#164E63;
}
.choiceadventure-round-screen .choiceadventure-decision-title strong{
font-size:.8rem;
}
.choiceadventure-selected-note{
margin-top:-2px;
padding:10px 12px;
border-radius:14px;
background:linear-gradient(135deg,#ECFDF5 0%,#F0FDFA 100%);
border:1px solid #A7F3D0;
color:#166534;
font-size:.78rem;
font-weight:700;
}
.choiceadventure-round-screen .choiceadventure-selected-note{
padding:8px 10px;
font-size:.72rem;
}
.choiceadventure-plan-progress{
margin:2px 0 4px;
padding:12px 14px;
border-radius:16px;
background:linear-gradient(135deg,#EFF6FF 0%,#F0FDFA 100%);
border:1px solid #BFDBFE;
color:#155E75;
font-size:.8rem;
font-weight:800;
}
.choiceadventure-round-screen .choiceadventure-plan-progress{
padding:10px 12px;
font-size:.75rem;
}
.choiceadventure-choice-stack{
display:grid;
gap:10px;
width:100%;
}
.choiceadventure-round-screen .choiceadventure-choice-stack{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.choiceadventure-choice-btn{
width:100%;
display:flex;
align-items:flex-start;
gap:12px;
padding:14px;
border-radius:18px;
border:2px solid #BAE6FD;
background:linear-gradient(180deg,#FFFFFF 0%,#F8FEFF 100%);
color:var(--text);
font-family:inherit;
text-align:left;
cursor:pointer;
transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
box-shadow:0 10px 22px rgba(8,145,178,0.08);
}
.choiceadventure-round-screen .choiceadventure-choice-btn{
gap:8px;
padding:10px 10px;
border-radius:14px;
}
.choiceadventure-choice-btn:hover{
transform:translateY(-2px);
border-color:#22D3EE;
background:linear-gradient(180deg,#ECFEFF 0%,#FFFFFF 100%);
box-shadow:0 14px 28px rgba(8,145,178,0.14);
}
.choiceadventure-choice-btn.is-selected{
border-color:#14B8A6;
background:linear-gradient(180deg,#ECFDF5 0%,#FFFBEB 100%);
box-shadow:0 14px 28px rgba(16,185,129,0.16);
}
.choiceadventure-choice-btn.is-selected .choiceadventure-choice-num{
background:linear-gradient(135deg,#F59E0B,#14B8A6);
color:#fff;
}
.choiceadventure-choice-num{
width:32px;
height:32px;
border-radius:12px;
display:grid;
place-items:center;
background:linear-gradient(135deg,#CFFAFE,#A5F3FC);
color:#0F172A;
font-size:.82rem;
font-weight:900;
flex-shrink:0;
}
.choiceadventure-round-screen .choiceadventure-choice-num{
width:26px;
height:26px;
border-radius:10px;
font-size:.74rem;
}
.choiceadventure-choice-copy{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.choiceadventure-choice-copy strong{
font-size:.84rem;
line-height:1.4;
color:#164E63;
}
.choiceadventure-round-screen .choiceadventure-choice-copy strong{
font-size:.75rem;
line-height:1.22;
}
.choiceadventure-choice-copy em{
font-style:normal;
font-size:.74rem;
line-height:1.4;
color:#475569;
font-weight:700;
}
.choiceadventure-round-screen .choiceadventure-choice-copy em{
font-size:.66rem;
line-height:1.2;
}
.choiceadventure-submit-note{
margin-top:2px;
font-size:.76rem;
line-height:1.45;
font-weight:700;
color:#155E75;
}
.choiceadventure-round-screen .choiceadventure-submit-note{
font-size:.71rem;
line-height:1.3;
}
.choiceadventure-result-choice-list{
display:grid;
gap:8px;
}
.choiceadventure-result-screen .choiceadventure-result-choice-list{
gap:8px;
}
.choiceadventure-result-choice{
display:flex;
flex-direction:row;
align-items:flex-start;
gap:10px;
padding:9px 10px;
border-radius:16px;
background:#FFFFFF;
border:1.5px solid #E0F7FA;
}
.choiceadventure-result-choice-medal{
width:34px;
height:34px;
border-radius:12px;
flex:0 0 34px;
display:flex;
align-items:center;
justify-content:center;
font-size:1rem;
background:linear-gradient(135deg,#FFF7ED,#FFFFFF);
box-shadow:0 8px 14px rgba(251,146,60,0.10);
}
.choiceadventure-result-choice-body{
min-width:0;
display:flex;
flex-direction:column;
gap:4px;
flex:1;
}
.choiceadventure-result-screen .choiceadventure-result-choice{
padding:10px 11px;
}
.choiceadventure-result-choice-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}
.choiceadventure-result-choice-badge{
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
padding:5px 9px;
border-radius:999px;
font-size:.6rem;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
}
.choiceadventure-result-choice strong{
font-size:.75rem;
font-weight:900;
color:#0F172A;
letter-spacing:.01em;
text-transform:none;
}
.choiceadventure-result-choice span{
font-size:.82rem;
line-height:1.38;
color:#164E63;
font-weight:700;
}
.choiceadventure-result-screen .choiceadventure-result-choice span{
font-size:.8rem;
line-height:1.34;
}
.choiceadventure-result-choice em{
font-style:normal;
font-size:.72rem;
line-height:1.34;
color:#475569;
font-weight:700;
}
.choiceadventure-result-choice.is-best{
border-color:#86EFAC;
background:linear-gradient(180deg,#F0FDF4 0%,#FFFFFF 100%);
}
.choiceadventure-result-choice.is-best .choiceadventure-result-choice-badge{
background:#DCFCE7;
color:#166534;
border:1px solid #86EFAC;
}
.choiceadventure-result-choice.is-not-best{
border-color:#FBCFE8;
background:linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 100%);
}
.choiceadventure-result-choice.is-not-best .choiceadventure-result-choice-badge{
background:#FFE4E6;
color:#9F1239;
border:1px solid #FDA4AF;
}
.choiceadventure-result-list{
margin:0;
padding-left:18px;
display:flex;
flex-direction:column;
gap:7px;
font-size:.8rem;
line-height:1.45;
color:#164E63;
font-weight:700;
}
.choiceadventure-result-screen .choiceadventure-result-list{
gap:6px;
font-size:.76rem;
line-height:1.32;
}
.choiceadventure-result-screen .ca-info-tip-list{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.choiceadventure-result-screen .story-progress-card{
background:linear-gradient(180deg,#FFFBEB 0%,#FFFFFF 100%);
border-color:#FDE68A;
}
/* Choice Quest refresh: playful fairground theme */
.choiceadventure-banner{
background:
radial-gradient(circle at 18% 18%,rgba(255,255,255,0.28),transparent 16%),
radial-gradient(circle at 82% 22%,rgba(255,255,255,0.22),transparent 14%),
linear-gradient(135deg,#38BDF8 0%,#14B8A6 38%,#F59E0B 72%,#FB7185 100%);
border:2px solid rgba(255,255,255,0.34);
box-shadow:0 6px 0 rgba(14,116,144,0.28),0 16px 32px rgba(14,116,144,0.24);
}
.choiceadventure-shell{
position:relative;
gap:var(--layout-choice-adventure-gap);
}
.choiceadventure-shell::after{
content:"";
position:absolute;
inset:86px 8px 6px;
pointer-events:none;
z-index:0;
opacity:.92;
background:
radial-gradient(circle at 10% 24%,rgba(251,191,36,0.16),transparent 18%),
radial-gradient(circle at 87% 20%,rgba(251,113,133,0.12),transparent 18%),
radial-gradient(circle at 18% 74%,rgba(45,212,191,0.12),transparent 18%);
}
.choiceadventure-shell > *{
position:relative;
z-index:1;
}
.choiceadventure-shell .ca-lobby-banner{
padding:var(--layout-choice-adventure-banner-padding);
gap:var(--layout-choice-adventure-banner-gap);
border-radius:var(--layout-choice-adventure-banner-radius);
}
.choiceadventure-shell .lobby-banner-icon{
width:var(--layout-choice-adventure-banner-icon-size);
height:var(--layout-choice-adventure-banner-icon-size);
border-radius:var(--layout-choice-adventure-banner-icon-radius);
display:grid;
place-items:center;
font-size:2rem;
background:linear-gradient(135deg,rgba(255,255,255,0.3),rgba(255,255,255,0.08));
box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 10px 22px rgba(15,118,110,0.18);
}
.choiceadventure-lobby-screen .lobby-png-icon--banner{
width:var(--layout-choice-adventure-banner-icon-art-size);
height:var(--layout-choice-adventure-banner-icon-art-size);
}
.choiceadventure-shell .lobby-banner-title{
font-size:1.5rem;
font-weight:1000;
letter-spacing:-.02em;
line-height:1.04;
}
.choiceadventure-shell .lobby-banner-sub{
font-size:.76rem;
line-height:1.24;
max-width:64ch;
}
.choiceadventure-shell .lobby-banner-meta{
gap:var(--layout-choice-adventure-banner-meta-gap);
margin-top:5px;
}
.choiceadventure-shell .lobby-banner-stat{
padding:var(--layout-choice-adventure-banner-stat-padding);
border-radius:999px;
border:1.5px solid rgba(255,255,255,0.35);
background:linear-gradient(135deg,rgba(255,255,255,0.24),rgba(255,255,255,0.10));
font-size:.72rem;
font-weight:900;
letter-spacing:.01em;
}
.choiceadventure-cards{
gap:var(--layout-choice-adventure-card-gap);
}
.choiceadventure-shell .ch-info-card,
.choiceadventure-shell .ch-action-card{
padding:var(--layout-choice-adventure-card-padding);
gap:var(--layout-choice-adventure-card-gap);
border-radius:var(--layout-choice-adventure-card-radius);
border:2px solid #C7F9F1;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.82),transparent 36%),
linear-gradient(180deg,rgba(255,255,255,0.96) 0%,rgba(254,252,232,0.9) 100%);
box-shadow:0 14px 34px rgba(14,116,144,0.10);
}
.choiceadventure-info-card{
border-color:#99F6E4;
background:
radial-gradient(circle at top left,rgba(167,243,208,0.26),transparent 28%),
linear-gradient(180deg,#F0FDFA 0%,#FFFEF8 100%);
}
.choiceadventure-action-card{
border-color:#BAE6FD;
background:
radial-gradient(circle at top right,rgba(253,224,71,0.22),transparent 30%),
linear-gradient(180deg,#ECFEFF 0%,#FFF7ED 100%);
}
.ca-sim-progress-card{
border:2px solid #86EFAC;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.78),transparent 34%),
linear-gradient(180deg,#ECFDF5 0%,#FEFCE8 100%);
box-shadow:0 10px 22px rgba(34,197,94,0.10);
}
.ca-sim-progress-card .story-progress-top{
margin-bottom:10px;
}
.ca-sim-progress-card .story-progress-kicker{
font-size:.7rem;
letter-spacing:.1em;
}
.ca-sim-progress-card .story-progress-copy{
font-size:.98rem;
font-weight:1000;
}
.choiceadventure-progress-fill{
background:linear-gradient(90deg,#22C55E 0%,#14B8A6 55%,#F59E0B 100%);
box-shadow:0 0 16px rgba(34,197,94,0.22);
}
.choiceadventure-flow-step{
border:2px solid #BFDBFE;
border-radius:var(--layout-choice-adventure-flow-step-radius);
background:linear-gradient(180deg,#FFFFFF 0%,#F8FDFF 100%);
box-shadow:0 12px 22px rgba(56,189,248,0.10);
}
.choiceadventure-lobby-screen .choiceadventure-flow-step:nth-child(1){
border-color:#7DD3FC;
background:linear-gradient(180deg,#E0F2FE 0%,#FFFFFF 100%);
}
.choiceadventure-lobby-screen .choiceadventure-flow-step:nth-child(2){
border-color:#FCD34D;
background:linear-gradient(180deg,#FEF3C7 0%,#FFFFFF 100%);
}
.choiceadventure-lobby-screen .choiceadventure-flow-step:nth-child(3){
border-color:#F9A8D4;
background:linear-gradient(180deg,#FCE7F3 0%,#FFFFFF 100%);
}
.choiceadventure-flow-icon{
width:42px;
height:42px;
border-radius:16px;
font-size:1.15rem;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
}
.choiceadventure-lobby-screen .choiceadventure-flow-icon .lobby-png-icon--flow{
width:var(--layout-choice-adventure-flow-icon-art-size);
height:var(--layout-choice-adventure-flow-icon-art-size);
}
.choiceadventure-lobby-screen .choiceadventure-flow-step:nth-child(1) .choiceadventure-flow-icon{
background:linear-gradient(135deg,#93C5FD,#38BDF8);
}
.choiceadventure-lobby-screen .choiceadventure-flow-step:nth-child(2) .choiceadventure-flow-icon{
background:linear-gradient(135deg,#FDE68A,#F59E0B);
}
.choiceadventure-lobby-screen .choiceadventure-flow-step:nth-child(3) .choiceadventure-flow-icon{
background:linear-gradient(135deg,#FBCFE8,#FB7185);
}
.choiceadventure-flow-copy strong{
font-size:.86rem;
color:#0F172A;
}
.choiceadventure-flow-copy span{
color:#1F4962;
}
.story-action-icon.choiceadventure-action-icon,
.choiceadventure-action-icon{
width:84px;
height:84px;
border-radius:28px;
font-size:2.35rem;
background:
radial-gradient(circle at 30% 28%,rgba(255,255,255,0.75),transparent 24%),
linear-gradient(135deg,#FDE68A 0%,#FB7185 48%,#38BDF8 100%);
color:#fff;
border:2px solid rgba(255,255,255,0.55);
box-shadow:0 16px 30px rgba(251,113,133,0.24);
}
.choiceadventure-lobby-screen .choiceadventure-action-icon .lobby-png-icon--action{
width:var(--layout-choice-adventure-action-icon-art-size);
height:var(--layout-choice-adventure-action-icon-art-size);
}
.choiceadventure-mission-card{
border:2px solid #FCD34D;
border-radius:20px;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.72),transparent 30%),
linear-gradient(180deg,#FFFDF4 0%,#FFF7ED 100%);
box-shadow:0 12px 24px rgba(245,158,11,0.12);
}
.choiceadventure-mission-top{
color:#9A3412;
}
.choiceadventure-mission-top span:last-child{
display:inline-flex;
align-items:center;
padding:5px 10px;
border-radius:999px;
background:linear-gradient(135deg,#FDE68A,#FDBA74);
color:#7C2D12;
font-size:.66rem;
font-weight:1000;
letter-spacing:.05em;
text-transform:uppercase;
}
.choiceadventure-mission-scene{
font-size:.88rem;
line-height:1.56;
color:#7C2D12;
font-weight:800;
}
.choiceadventure-mission-prompt{
background:linear-gradient(135deg,#FCE7F3 0%,#FFF7ED 100%);
border:1.5px solid #F9A8D4;
color:#9D174D;
font-size:.8rem;
box-shadow:0 8px 18px rgba(244,114,182,0.10);
}
.choiceadventure-reward-explain{
border:2px solid #C4B5FD;
border-radius:18px;
background:
radial-gradient(circle at top left,rgba(221,214,254,0.34),transparent 26%),
linear-gradient(180deg,#F5F3FF 0%,#FFFFFF 100%);
box-shadow:0 10px 22px rgba(139,92,246,0.10);
}
.choiceadventure-reward-explain-title{
font-size:.82rem;
color:#5B21B6;
}
.choiceadventure-reward-explain-copy{
font-size:.75rem;
line-height:1.48;
color:#5B3A8B;
}
.choiceadventure-reward-chip{
display:inline-flex;
align-items:center;
gap:4px;
padding:7px 10px;
border-radius:999px;
border:1.5px solid #DDD6FE;
background:linear-gradient(135deg,#FFFFFF,#F5F3FF);
color:#4C1D95;
font-size:.68rem;
box-shadow:0 6px 14px rgba(139,92,246,0.08);
}
.choiceadventure-reward-chip svg,
.choiceadventure-reward-chip img{
flex-shrink:0;
margin:0 !important;
}
.choiceadventure-story-card{
border:2px solid #FCD34D;
border-radius:22px;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.72),transparent 34%),
linear-gradient(180deg,#FFFDF1 0%,#FFFFFF 100%);
box-shadow:0 14px 30px rgba(245,158,11,0.12);
}
.choiceadventure-story-kicker{
color:#B45309;
}
.choiceadventure-story-pill{
border:1.5px solid #FDE68A;
background:linear-gradient(135deg,#FEF3C7,#FDE68A);
color:#92400E;
box-shadow:0 6px 12px rgba(245,158,11,0.10);
}
.choiceadventure-story-emoji{
width:56px;
height:56px;
border-radius:18px;
font-size:2rem;
background:
radial-gradient(circle at 30% 28%,rgba(255,255,255,0.72),transparent 24%),
linear-gradient(135deg,#FDE68A 0%,#F59E0B 40%,#FB7185 100%);
color:#fff;
box-shadow:0 14px 24px rgba(245,158,11,0.16);
}
.choiceadventure-story-scene-copy strong{
font-size:1rem;
color:#7C2D12;
}
.choiceadventure-story-scene-copy span{
color:#B45309;
}
.choiceadventure-story-label{
background:linear-gradient(135deg,#FDE68A,#FDBA74);
color:#7C2D12;
box-shadow:0 6px 12px rgba(245,158,11,0.10);
}
.choiceadventure-story-text{
font-size:1.2rem;
line-height:1.48;
color:#164E63;
font-weight:750;
text-wrap:balance;
}
.choiceadventure-story-tipline{
border:1.5px solid #C4B5FD;
border-radius:14px;
background:linear-gradient(135deg,#F5F3FF 0%,#EFF6FF 100%);
color:#4C1D95;
font-size:.82rem;
box-shadow:0 8px 18px rgba(139,92,246,0.08);
}
.choiceadventure-story-tipline strong{
color:#6D28D9;
}
.ca-action-stall{
width:74px;
height:74px;
border-radius:24px;
background:
radial-gradient(circle at 32% 28%,rgba(255,255,255,0.76),transparent 24%),
linear-gradient(135deg,#A7F3D0 0%,#38BDF8 52%,#818CF8 100%);
color:#fff;
border:2px solid rgba(255,255,255,0.62);
box-shadow:0 14px 26px rgba(56,189,248,0.18);
}
.choiceadventure-shell .ch-action-title{
font-size:1.18rem;
color:#0F172A;
}
.choiceadventure-shell .ch-action-sub{
font-size:.84rem;
line-height:1.44;
color:#375468;
max-width:32ch;
}
.choiceadventure-plan-progress{
border:2px solid #93C5FD;
border-radius:18px;
background:linear-gradient(135deg,#E0F2FE 0%,#FFFFFF 100%);
color:#1D4ED8;
font-size:.9rem;
box-shadow:0 10px 20px rgba(96,165,250,0.10);
}
.choiceadventure-round-screen .ch-action-card{
padding:10px;
gap:7px;
}
.choiceadventure-round-screen .ca-action-hero{
gap:5px;
}
.choiceadventure-round-screen .ch-action-sub{
font-size:.76rem;
line-height:1.32;
}
.choiceadventure-round-screen .choiceadventure-story-card{
padding:12px;
gap:6px;
}
.choiceadventure-round-screen .choiceadventure-story-top{
margin-bottom:6px;
}
.choiceadventure-round-screen .choiceadventure-story-scene{
gap:8px;
margin-bottom:8px;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy strong{
font-size:.96rem;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy span{
font-size:.74rem;
}
.choiceadventure-round-screen .choiceadventure-story-text{
font-size:1.16rem;
line-height:1.34;
}
.choiceadventure-round-screen .choiceadventure-story-question{
padding:8px 10px;
margin-bottom:8px;
}
.choiceadventure-round-screen .choiceadventure-story-tipline{
padding:6px 8px;
font-size:.76rem;
line-height:1.28;
}
.choiceadventure-decision-block{
padding:var(--layout-choice-adventure-decision-padding);
border-radius:18px;
border:2px solid #E0F2FE;
background:linear-gradient(180deg,#FFFFFF 0%,#F9FEFF 100%);
box-shadow:0 10px 20px rgba(56,189,248,0.06);
}
.choiceadventure-round-screen .choiceadventure-decision-block{
padding:6px;
}
.choiceadventure-round-screen .choiceadventure-decision-block:nth-child(1){
border-color:#BFDBFE;
background:linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%);
}
.choiceadventure-round-screen .choiceadventure-decision-block:nth-child(2){
border-color:#FDE68A;
background:linear-gradient(180deg,#FEFCE8 0%,#FFFFFF 100%);
}
.choiceadventure-round-screen .choiceadventure-decision-block:nth-child(3){
border-color:#FBCFE8;
background:linear-gradient(180deg,#FDF2F8 0%,#FFFFFF 100%);
}
.choiceadventure-decision-title{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px 8px;
color:#2563EB;
}
.choiceadventure-decision-title strong{
color:#0F172A;
font-size:.96rem;
}
.choiceadventure-selected-chip{
display:inline-flex;
align-items:center;
padding:4px 8px;
border-radius:999px;
background:linear-gradient(135deg,#ECFDF5 0%,#FEFCE8 100%);
border:1.5px solid #86EFAC;
color:#166534;
font-size:.67rem;
font-style:normal;
font-weight:900;
line-height:1.1;
box-shadow:0 6px 12px rgba(34,197,94,0.08);
}
.choiceadventure-choice-btn{
border:2px solid #D9F4FB;
border-radius:18px;
background:linear-gradient(180deg,#FFFFFF 0%,#FCFEFF 100%);
box-shadow:0 12px 24px rgba(56,189,248,0.08);
}
.choiceadventure-round-screen .choiceadventure-choice-stack{
gap:var(--layout-choice-adventure-choice-gap);
}
.choiceadventure-round-screen .choiceadventure-choice-btn{
border-radius:16px;
padding:7px 8px;
}
.choiceadventure-round-screen .choiceadventure-choice-copy strong{
font-size:.86rem;
line-height:1.22;
}
.choiceadventure-round-screen .choiceadventure-choice-copy em{
font-size:.72rem;
line-height:1.24;
}
.choiceadventure-round-screen .choiceadventure-choice-btn:nth-child(1){
border-color:#BFDBFE;
background:linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%);
}
.choiceadventure-round-screen .choiceadventure-choice-btn:nth-child(2){
border-color:#FDE68A;
background:linear-gradient(180deg,#FEFCE8 0%,#FFFFFF 100%);
}
.choiceadventure-round-screen .choiceadventure-choice-btn:nth-child(3){
border-color:#FBCFE8;
background:linear-gradient(180deg,#FDF2F8 0%,#FFFFFF 100%);
}
.choiceadventure-choice-btn:hover{
transform:translateY(-3px) rotate(-0.4deg);
box-shadow:0 16px 30px rgba(14,116,144,0.12);
}
.choiceadventure-choice-btn.is-selected{
border-color:#FB7185;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.72),transparent 28%),
linear-gradient(180deg,#FFF7ED 0%,#FEF2F2 100%);
box-shadow:0 16px 30px rgba(251,113,133,0.16);
}
.choiceadventure-choice-btn.is-selected .choiceadventure-choice-num{
background:linear-gradient(135deg,#F59E0B,#FB7185,#8B5CF6);
transform:scale(1.03);
}
.choiceadventure-choice-num{
width:34px;
height:34px;
border-radius:14px;
background:linear-gradient(135deg,#38BDF8,#818CF8);
color:#fff;
box-shadow:0 8px 16px rgba(59,130,246,0.18);
}
.choiceadventure-choice-copy strong{
font-size:.94rem;
line-height:1.32;
color:#0F172A;
}
.choiceadventure-choice-copy em{
font-size:.8rem;
line-height:1.36;
color:#475569;
}
.choiceadventure-submit-note{
padding:10px 12px;
border-radius:14px;
background:linear-gradient(135deg,#FFF7ED 0%,#FFF1F2 100%);
border:1.5px solid #FDBA74;
color:#9A3412;
font-weight:800;
}
.choiceadventure-shell .ca-btn{
border:none;
border-radius:16px;
padding:var(--layout-choice-adventure-button-padding);
font-size:.82rem;
font-weight:900;
letter-spacing:.01em;
min-width:0;
white-space:normal;
line-height:1.18;
text-align:center;
}
.choiceadventure-round-screen .ca-btn{
padding:10px 12px;
font-size:.8rem;
}
.choiceadventure-round-screen .ca-actions{
grid-template-columns:1fr;
gap:6px;
margin-top:8px;
}
.choiceadventure-shell .ca-btn.primary{
color:#fff;
background:linear-gradient(135deg,#F97316 0%,#FB7185 52%,#8B5CF6 100%);
box-shadow:0 14px 26px rgba(251,113,133,0.24);
}
.choiceadventure-shell .ca-btn.primary.is-waiting,
.choiceadventure-shell .ca-btn.primary:disabled{
color:#475569;
background:linear-gradient(135deg,#F8FAFC 0%,#E0F2FE 100%);
border:2px dashed #93C5FD;
box-shadow:0 10px 18px rgba(59,130,246,0.10);
cursor:not-allowed;
opacity:1;
}
.choiceadventure-shell .ca-btn.primary:hover:not(:disabled){
transform:translateY(-2px);
box-shadow:0 18px 32px rgba(251,113,133,0.28);
}
.choiceadventure-shell .ca-btn.secondary{
color:#0F766E;
background:linear-gradient(135deg,#FFFFFF,#F0FDFA);
border:2px solid #99F6E4;
box-shadow:0 10px 18px rgba(20,184,166,0.08);
}
.choiceadventure-round-screen .ca-btn{
width:100%;
min-width:0;
}
.choiceadventure-result-screen .story-progress-card{
border:2px solid #F9A8D4;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.82),transparent 34%),
linear-gradient(180deg,#FFF1F2 0%,#FFFFFF 100%);
box-shadow:0 12px 24px rgba(251,113,133,0.10);
}
.choiceadventure-result-screen .choiceadventure-result-spotlight{
padding:6px 8px;
border-radius:16px;
border-width:1.5px;
}
.choiceadventure-result-screen .story-progress-top{
margin-bottom:2px;
}
.choiceadventure-result-screen .story-progress-copy{
font-size:.62rem;
}
.choiceadventure-result-spotlight-row{
display:flex;
align-items:center;
gap:6px;
}
.choiceadventure-result-spotlight-emoji{
width:32px;
height:32px;
border-radius:11px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:1.12rem;
background:linear-gradient(135deg,#FFF7ED,#FFFFFF);
box-shadow:0 10px 18px rgba(251,146,60,0.12);
}
.choiceadventure-result-spotlight-copy{
display:flex;
flex-direction:column;
gap:1px;
}
.choiceadventure-result-spotlight-copy strong{
font-size:.82rem;
line-height:1.04;
color:#0F172A;
letter-spacing:-0.02em;
}
.choiceadventure-result-spotlight-copy span{
font-size:.58rem;
line-height:1.12;
color:#475569;
font-weight:800;
}
.choiceadventure-achieve-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:nowrap;
margin-top:2px;
}
.choiceadventure-achieve-badge{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-width:82px;
padding:9px 11px;
border-radius:18px;
background:linear-gradient(135deg,#FFFFFF,#F8FAFC);
border:2px solid #BFDBFE;
box-shadow:0 8px 18px rgba(59,130,246,0.08);
}
.choiceadventure-achieve-badge strong{
font-size:1.12rem;
line-height:1;
color:#0F172A;
letter-spacing:-0.03em;
}
.choiceadventure-achieve-badge span{
font-size:.62rem;
line-height:1.1;
color:#475569;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}
.choiceadventure-result-summary-line{
display:flex;
align-items:center;
min-height:48px;
padding:10px 12px;
border-radius:18px;
border:2px solid #DBEAFE;
background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);
color:#334155;
font-size:.74rem;
line-height:1.22;
font-weight:800;
flex:1;
}
.choiceadventure-result-screen .choiceadventure-result-main-card{
gap:var(--layout-choice-adventure-result-stack-gap);
}
.choiceadventure-result-body{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:var(--layout-choice-adventure-result-stack-gap);
min-width:0;
align-items:start;
}
.choiceadventure-result-column{
display:contents;
gap:var(--layout-choice-adventure-result-stack-gap);
min-width:0;
}
.choiceadventure-result-column--story{
display:contents;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight,
.choiceadventure-result-screen .choiceadventure-brief-card{
padding:var(--layout-choice-adventure-result-section-padding);
}
.choiceadventure-result-step-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--layout-choice-adventure-result-step-gap);
}
.choiceadventure-result-step-card{
padding:10px 10px 11px;
border-radius:18px;
border:2px solid #DBEAFE;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.82),transparent 34%),
linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);
display:flex;
flex-direction:column;
gap:6px;
min-width:0;
box-shadow:0 10px 18px rgba(59,130,246,0.08);
}
.choiceadventure-result-step-card.is-best{
border-color:#86EFAC;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.82),transparent 34%),
linear-gradient(180deg,#F0FDF4 0%,#FFFFFF 100%);
}
.choiceadventure-result-step-card.is-not-best{
border-color:#FBCFE8;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.82),transparent 34%),
linear-gradient(180deg,#FFF1F2 0%,#FFFFFF 100%);
}
.choiceadventure-result-step-top{
display:flex;
align-items:center;
gap:8px;
}
.choiceadventure-result-step-kicker{
font-size:.74rem;
font-weight:900;
color:#475569;
text-transform:uppercase;
letter-spacing:.05em;
}
.choiceadventure-result-step-pick{
font-size:.86rem;
line-height:1.22;
font-weight:900;
color:#0F172A;
min-height:2em;
}
.choiceadventure-result-step-note{
display:inline-flex;
align-items:center;
justify-content:center;
padding:5px 7px;
border-radius:999px;
font-size:.68rem;
line-height:1.1;
font-weight:900;
letter-spacing:.01em;
}
.choiceadventure-reward-mini-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--layout-choice-adventure-result-step-gap);
}
.choiceadventure-reward-mini{
display:flex;
align-items:center;
gap:8px;
padding:9px 10px;
border-radius:18px;
border:2px solid #DBEAFE;
background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);
box-shadow:0 8px 16px rgba(59,130,246,0.08);
}
.choiceadventure-reward-mini--gold{
border-color:#FDE68A;
background:linear-gradient(180deg,#FFFDF3 0%,#FFFFFF 100%);
}
.choiceadventure-reward-mini--blue{
border-color:#BFDBFE;
background:linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%);
}
.choiceadventure-reward-mini--pink{
border-color:#FBCFE8;
background:linear-gradient(180deg,#FDF2F8 0%,#FFFFFF 100%);
}
.choiceadventure-reward-mini--purple{
border-color:#C4B5FD;
background:linear-gradient(180deg,#F5F3FF 0%,#FFFFFF 100%);
}
.choiceadventure-reward-mini-icon{
width:36px;
height:36px;
flex:0 0 36px;
display:flex;
align-items:center;
justify-content:center;
}
.choiceadventure-reward-mini-icon svg,
.choiceadventure-reward-mini-icon img{
width:28px;
height:28px;
}
.choiceadventure-reward-mini-copy{
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}
.choiceadventure-reward-mini-copy strong{
font-size:1.08rem;
line-height:1;
color:#0F172A;
}
.choiceadventure-reward-mini-copy span{
font-size:.64rem;
line-height:1.14;
text-transform:uppercase;
letter-spacing:.04em;
color:#475569;
font-weight:900;
}
.choiceadventure-result-step-note.is-best{
background:#DCFCE7;
color:#166534;
border:1px solid #86EFAC;
}
.choiceadventure-result-step-note.is-not-best{
background:#FFE4E6;
color:#9F1239;
border:1px solid #FDA4AF;
}
.choiceadventure-result-storybeats{
display:grid;
gap:var(--layout-choice-adventure-result-story-gap);
}
.choiceadventure-story-chip{
padding:var(--layout-choice-adventure-result-chip-padding);
border-radius:16px;
background:linear-gradient(180deg,#FFFFFF 0%,#FFFDF3 100%);
border:1.5px solid #FDE68A;
color:#334155;
font-size:.8rem;
line-height:1.32;
font-weight:800;
display:flex;
align-items:flex-start;
gap:8px;
}
.choiceadventure-story-beat-num{
width:22px;
height:22px;
border-radius:999px;
flex:0 0 22px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#FDE68A,#FFFFFF);
color:#B45309;
font-size:.68rem;
font-weight:900;
}
.choiceadventure-story-beat-copy{
flex:1;
}
.choiceadventure-result-screen--strong .choiceadventure-result-spotlight{
border-color:#86EFAC;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.86),transparent 34%),
linear-gradient(180deg,#F0FDF4 0%,#FFFFFF 100%);
}
.choiceadventure-result-screen--okay .choiceadventure-result-spotlight{
border-color:#FDE68A;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.86),transparent 34%),
linear-gradient(180deg,#FFFDF3 0%,#FFFFFF 100%);
}
.choiceadventure-result-screen--weak .choiceadventure-result-spotlight{
border-color:#FBCFE8;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.86),transparent 34%),
linear-gradient(180deg,#FFF1F2 0%,#FFFFFF 100%);
}
.choiceadventure-result-screen--strong .choiceadventure-result-spotlight-emoji{
background:linear-gradient(135deg,#DCFCE7,#FFFFFF);
}
.choiceadventure-result-screen--okay .choiceadventure-result-spotlight-emoji{
background:linear-gradient(135deg,#FEF3C7,#FFFFFF);
}
.choiceadventure-result-screen--weak .choiceadventure-result-spotlight-emoji{
background:linear-gradient(135deg,#FFE4E6,#FFFFFF);
}
.choiceadventure-result-screen--strong .choiceadventure-achieve-badge{
border-color:#86EFAC;
background:linear-gradient(135deg,#F0FDF4,#FFFFFF);
}
.choiceadventure-result-screen--strong .choiceadventure-result-choice-medal{
background:linear-gradient(135deg,#DCFCE7,#FFFFFF);
}
.choiceadventure-result-screen--okay .choiceadventure-achieve-badge{
border-color:#FDE68A;
background:linear-gradient(135deg,#FFFBEB,#FFFFFF);
}
.choiceadventure-result-screen--okay .choiceadventure-result-choice-medal{
background:linear-gradient(135deg,#FEF3C7,#FFFFFF);
}
.choiceadventure-result-screen--weak .choiceadventure-achieve-badge{
border-color:#FBCFE8;
background:linear-gradient(135deg,#FFF1F2,#FFFFFF);
}
.choiceadventure-result-screen--weak .choiceadventure-result-choice-medal{
background:linear-gradient(135deg,#FFE4E6,#FFFFFF);
}
.choiceadventure-result-screen .ca-actions{
grid-template-columns:1fr 1fr;
gap:8px;
position:static;
padding-top:0;
padding-bottom:0;
background:none;
}
.choiceadventure-result-column--story .ca-actions{
align-self:stretch;
}
.choiceadventure-result-screen .ca-actions.ca-actions--single{
grid-template-columns:minmax(220px,420px);
justify-content:center;
}
.choiceadventure-result-screen .ca-actions .ca-btn{
min-height:46px;
}
.choiceadventure-story-tipline{
margin-top:6px;
padding:7px 9px;
border-radius:14px;
background:linear-gradient(135deg,#EFF6FF,#FFFFFF);
border:1.5px solid #BFDBFE;
color:#1E3A8A;
font-size:.8rem;
line-height:1.28;
font-weight:800;
}
.choiceadventure-brief-card{
border:2px solid #BFDBFE;
border-radius:20px;
background:
radial-gradient(circle at top right,rgba(255,255,255,0.72),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#F8FDFF 100%);
box-shadow:0 10px 22px rgba(56,189,248,0.08);
}
.choiceadventure-result-choice{
border:1.5px solid #DBEAFE;
border-radius:14px;
background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);
}
.choiceadventure-result-choice-top{
gap:10px;
}
.choiceadventure-result-choice strong{
color:#2563EB;
}
.choiceadventure-result-choice em{
margin-top:2px;
}
.choiceadventure-result-list{
padding-left:20px;
color:#334155;
}
.choiceadventure-result-list li::marker{
color:#FB7185;
}
@media (max-width: 1120px){
.choiceadventure-achieve-row{
flex-wrap:wrap;
}
.choiceadventure-result-summary-line{
min-height:0;
width:100%;
}
.choiceadventure-result-step-grid{
grid-template-columns:1fr;
}
.choiceadventure-reward-mini-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:900px){
.choiceadventure-result-body{
grid-template-columns:1fr;
}
.choiceadventure-result-column--story{
grid-template-rows:auto;
}
.choiceadventure-round-screen .ca-actions{
grid-template-columns:1fr;
}
.choiceadventure-result-screen .ca-actions{
grid-template-columns:1fr;
}
}
@media (min-width:1200px) and (min-height:501px) and (max-height:900px){
.choiceadventure-shell{
gap:8px;
}
#main:has(.choiceadventure-result-screen){
overflow:hidden !important;
padding-bottom:0;
}
.choiceadventure-shell .ca-lobby-banner{
padding:12px 18px;
}
.choiceadventure-shell .lobby-banner-icon{
font-size:2.3rem;
}
.choiceadventure-shell .lobby-banner-title{
font-size:1.4rem;
}
.choiceadventure-shell .ch-info-card,
.choiceadventure-shell .ch-action-card{
padding:12px;
gap:8px;
}
.choiceadventure-round-screen .choiceadventure-cards{
grid-template-columns:minmax(224px,.74fr) minmax(0,1.26fr) !important;
gap:10px;
}
.choiceadventure-round-screen .choiceadventure-story-card{
padding:11px 12px;
border-radius:18px;
gap:8px;
}
.choiceadventure-round-screen .choiceadventure-story-top{
margin-bottom:6px;
gap:6px;
flex-wrap:nowrap;
}
.choiceadventure-round-screen .choiceadventure-tts-btn{
width:32px !important;
height:32px !important;
font-size:.94rem;
}
.choiceadventure-round-screen .choiceadventure-story-emoji{
width:42px !important;
height:42px !important;
font-size:1.54rem;
}
.choiceadventure-round-screen .choiceadventure-story-scene{
gap:8px;
margin-bottom:7px;
align-items:center;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy strong{
font-size:.92rem;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy span{
font-size:.72rem;
}
.choiceadventure-round-screen .choiceadventure-story-label{
margin-bottom:7px;
font-size:.66rem;
padding:3px 7px;
}
.choiceadventure-round-screen .choiceadventure-story-text{
font-size:1.08rem;
line-height:1.34;
margin-top:0;
}
.choiceadventure-round-screen .choiceadventure-story-question{
padding:8px 9px;
border-radius:14px;
margin-bottom:7px;
}
.choiceadventure-round-screen .choiceadventure-story-tipline{
margin-top:0;
padding:5px 7px;
font-size:.72rem;
line-height:1.22;
}
.choiceadventure-round-screen .choiceadventure-action-card{
padding:10px;
}
.choiceadventure-round-screen .ca-action-hero{
gap:5px;
}
.choiceadventure-round-screen .ca-action-stall{
width:64px !important;
height:64px !important;
border-radius:20px;
font-size:1.9rem;
}
.choiceadventure-round-screen .ch-action-title{
font-size:1.04rem;
}
.choiceadventure-round-screen .ch-action-sub{
font-size:.76rem;
line-height:1.28;
}
.choiceadventure-round-screen .choiceadventure-plan-progress{
margin:0 0 2px;
padding:7px 9px;
font-size:.76rem;
}
.choiceadventure-round-screen .choiceadventure-decision-block{
padding:7px;
gap:4px;
border-radius:16px;
}
.choiceadventure-round-screen .choiceadventure-decision-title{
gap:5px 7px;
font-size:.72rem;
}
.choiceadventure-round-screen .choiceadventure-decision-title strong{
font-size:.82rem;
}
.choiceadventure-round-screen .choiceadventure-selected-chip{
padding:3px 6px;
font-size:.6rem;
}
.choiceadventure-round-screen .choiceadventure-choice-stack{
gap:6px;
}
.choiceadventure-round-screen .choiceadventure-choice-copy em{
display:none;
}
.choiceadventure-round-screen .choiceadventure-choice-btn{
align-items:center;
padding:8px 8px;
border-radius:14px;
min-height:48px !important;
}
.choiceadventure-round-screen .choiceadventure-choice-num{
width:24px !important;
height:24px !important;
border-radius:9px;
font-size:.68rem;
}
.choiceadventure-round-screen .choiceadventure-choice-copy strong{
font-size:.74rem;
line-height:1.16;
}
.choiceadventure-round-screen .ca-actions{
grid-template-columns:minmax(0,1.25fr) minmax(92px,.75fr) !important;
gap:6px;
margin-top:4px;
align-items:stretch;
}
.choiceadventure-round-screen .ca-btn{
min-height:38px !important;
padding:8px 10px;
font-size:.76rem;
}
.choiceadventure-result-screen{
height:100% !important;
max-height:none !important;
overflow:hidden !important;
gap:6px;
}
.choiceadventure-result-screen .ca-lobby-banner{
padding:5px 8px;
}
.choiceadventure-result-screen .lobby-banner-title{
font-size:.94rem;
}
.choiceadventure-result-screen .lobby-banner-sub{
font-size:.58rem;
line-height:1.12;
}
.choiceadventure-result-screen .choiceadventure-cards{
height:100% !important;
max-height:none !important;
overflow:hidden !important;
}
.choiceadventure-result-screen .choiceadventure-result-main-card{
display:flex !important;
flex-direction:column;
height:100% !important;
max-height:none !important;
overflow:hidden !important;
gap:6px;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight{
padding:5px 7px;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-copy strong{
font-size:.78rem;
}
.choiceadventure-result-screen .choiceadventure-brief-card{
padding:9px 10px;
}
.choiceadventure-result-screen .choiceadventure-brief-top{
margin-bottom:5px;
font-size:.76rem;
}
.choiceadventure-result-screen .choiceadventure-result-step-grid{
gap:5px;
}
.choiceadventure-result-screen .choiceadventure-result-step-card{
padding:8px 8px 9px;
gap:5px;
}
.choiceadventure-result-screen .choiceadventure-result-step-kicker{
font-size:.66rem;
}
.choiceadventure-result-screen .choiceadventure-result-step-pick{
font-size:.8rem;
line-height:1.16;
min-height:1.8em !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-note{
font-size:.62rem;
padding:5px 6px;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:5px;
}
.choiceadventure-result-screen .choiceadventure-reward-mini{
padding:5px 7px;
gap:5px;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon{
width:24px !important;
height:24px !important;
flex:0 0 24px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon svg,
.choiceadventure-result-screen .choiceadventure-reward-mini-icon img{
width:18px !important;
height:18px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-copy strong{
font-size:1rem;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-copy span{
font-size:.6rem;
}
.choiceadventure-result-screen .choiceadventure-result-storybeats{
gap:4px;
}
.choiceadventure-result-screen .choiceadventure-story-chip{
padding:5px 7px;
font-size:.68rem;
line-height:1.14;
}
.choiceadventure-result-screen .choiceadventure-story-tipline{
margin-top:3px;
padding:5px 7px;
font-size:.68rem;
line-height:1.16;
}
.choiceadventure-result-screen .ca-actions{
margin-top:2px;
padding-top:0;
align-self:stretch;
}
.choiceadventure-result-screen .ca-actions.ca-actions--single{
grid-template-columns:minmax(210px,390px) !important;
justify-content:center;
}
.choiceadventure-result-screen .ca-actions .ca-btn{
min-height:42px !important;
padding:9px 10px;
font-size:.82rem;
}
}
@media (min-width:1200px) and (min-height:501px) and (max-height:820px){
.choiceadventure-round-screen .choiceadventure-story-card{
gap:5px;
}
.choiceadventure-round-screen .choiceadventure-story-scene{
gap:7px;
}
.choiceadventure-round-screen .choiceadventure-story-text{
font-size:1rem;
line-height:1.28;
}
.choiceadventure-round-screen .choiceadventure-story-question{
padding:7px 8px;
}
.choiceadventure-round-screen .choiceadventure-story-tipline{
margin-top:0;
padding:4px 6px;
font-size:.66rem;
line-height:1.14;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy strong{
font-size:.86rem;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy span{
font-size:.68rem;
}
.choiceadventure-round-screen .choiceadventure-action-card{
padding:9px;
}
.choiceadventure-round-screen .ca-action-stall{
width:58px !important;
height:58px !important;
font-size:1.72rem;
}
.choiceadventure-round-screen .ch-action-title{
font-size:.98rem;
}
.choiceadventure-round-screen .ch-action-sub{
font-size:.72rem;
line-height:1.2;
}
.choiceadventure-round-screen .choiceadventure-plan-progress{
padding:6px 8px;
font-size:.72rem;
}
.choiceadventure-round-screen .choiceadventure-decision-block{
padding:6px;
gap:4px;
}
.choiceadventure-round-screen .choiceadventure-decision-title{
font-size:.68rem;
}
.choiceadventure-round-screen .choiceadventure-decision-title strong{
font-size:.78rem;
}
.choiceadventure-round-screen .choiceadventure-choice-stack{
gap:5px;
}
.choiceadventure-round-screen .choiceadventure-choice-btn{
min-height:44px !important;
padding:7px 7px;
}
.choiceadventure-round-screen .choiceadventure-choice-copy strong{
font-size:.7rem;
line-height:1.12;
}
.choiceadventure-round-screen .ca-actions{
gap:5px;
margin-top:3px;
}
.choiceadventure-round-screen .ca-btn{
min-height:36px !important;
padding:7px 9px;
font-size:.72rem;
}
.choiceadventure-lobby-screen .choiceadventure-flow-step{
padding:8px 10px;
}
.choiceadventure-lobby-screen .choiceadventure-mission-prompt{
margin-top:8px;
padding:8px 9px;
}
.choiceadventure-result-screen .choiceadventure-result-list{
font-size:.72rem;
}
.choiceadventure-result-screen .choiceadventure-result-main-card{
gap:5px;
}
.choiceadventure-result-screen .choiceadventure-result-step-pick{
font-size:.72rem;
line-height:1.08;
min-height:1.5em !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-note{
font-size:.58rem;
padding:3px 5px;
}
.choiceadventure-result-screen .choiceadventure-reward-mini{
padding:6px 7px;
gap:5px;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-grid{
gap:4px;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-copy strong{
font-size:.86rem;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-copy span{
font-size:.54rem;
}
.choiceadventure-result-screen .choiceadventure-story-chip{
padding:3px 5px;
font-size:.62rem;
line-height:1.08;
}
.choiceadventure-result-screen .choiceadventure-result-storybeats{
gap:3px;
}
.choiceadventure-result-screen .choiceadventure-story-beat-num{
width:18px !important;
height:18px !important;
flex:0 0 18px !important;
font-size:.54rem;
}
.choiceadventure-result-screen .choiceadventure-story-tipline{
font-size:.6rem;
padding:3px 5px;
}
.choiceadventure-result-screen .ca-actions .ca-btn{
min-height:36px !important;
padding:7px 9px;
}
}
.ca-action-stall{
width:84px;
height:84px;
border-radius:26px;
display:flex;
align-items:center;
justify-content:center;
font-size:2.5rem;
background:linear-gradient(135deg,#CFFAFE,#A5F3FC);
box-shadow:0 14px 28px rgba(8,145,178,0.14);
}
.choiceadventure-category-icon{
display:block;
width:100%;
height:100%;
object-fit:contain;
pointer-events:none;
}
.ca-action-stall--png{
font-size:0;
padding:8px;
overflow:hidden;
}
.choiceadventure-category-banner-icon{
font-size:0;
}
.choiceadventure-category-icon--banner{
width:100%;
height:100%;
}
.choiceadventure-category-inline{
display:inline-flex;
align-items:center;
gap:5px;
min-width:0;
}
.choiceadventure-category-icon--inline{
width:1.45em;
height:1.45em;
flex:0 0 1.45em;
}
@media(min-width:769px) and (max-width:1100px){
.ca-lobby-banner,.ch-lobby-banner{padding:12px 16px;gap:12px}
.lobby-banner-icon{font-size:2.3rem}
.lobby-banner-title{font-size:1.38rem;line-height:1.04}
.lobby-banner-sub{font-size:0.72rem;line-height:1.2}
.ch-lobby-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(min-width:768px) and (max-width:1199px) and (min-height:600px){
.sc-grid:has(.ch-fullscreen){grid-template-columns:minmax(0,1fr) 280px;gap:12px}
.sc-grid:has(.ch-fullscreen) .ch-fullscreen{padding:12px 14px}
.sc-grid:has(.ch-fullscreen) .ch-vs-bar{padding:12px 14px}
.sc-grid:has(.ch-fullscreen) .ch-av-ring{width:60px;height:60px}
.sc-grid:has(.ch-fullscreen) .ch-name{font-size:0.74rem}
.sc-grid:has(.ch-fullscreen) .ch-pts{font-size:1.3rem}
.sc-grid:has(.ch-fullscreen) .ch-question-card{padding:12px 14px}
.ch-lobby-horiz{max-width:1040px;margin:0 auto}
.ch-lobby-cards{grid-template-columns:minmax(0,1fr) minmax(320px,0.9fr)}
}
@media(min-width:1200px) and (min-height:700px){
.sc-grid:has(.ch-fullscreen) .sidebar{gap:8px}
.sc-grid:has(.ch-fullscreen) .sidebar .panel{padding:9px 11px}
.sc-grid:has(.ch-fullscreen) .sidebar .panel:last-child{flex:0 0 auto !important;overflow:visible !important}
.sc-grid:has(.ch-fullscreen) .sidebar .panel:last-child .rw-list{flex:none !important;gap:5px}
.sc-grid:has(.ch-fullscreen) .sidebar .panel-h{margin-bottom:5px;padding-bottom:5px}
.sc-grid:has(.ch-fullscreen) .sidebar .rw-row2{
flex:0 0 auto !important;
min-height:0 !important;
padding:6px 8px;
gap:7px;
align-items:center;
}
.sc-grid:has(.ch-fullscreen) .sidebar .rw-title{font-size:0.68rem;line-height:1.14}
.sc-grid:has(.ch-fullscreen) .sidebar .rw-meta{font-size:0.56rem;line-height:1.12}
.sc-grid:has(.ch-fullscreen) .sidebar .rw-buy-btn{padding:4px 9px;font-size:0.64rem}
}
@media(orientation:landscape) and (min-width:961px) and (max-width:1180px) and (max-height:900px){
.sc-grid{grid-template-columns:minmax(0,1fr) 276px !important;gap:10px}
.sc-grid .sidebar{gap:6px}
.sc-grid .sidebar .panel{padding:8px 10px}
.sc-grid .sidebar .panel:first-child{flex:0 0 auto !important}
.sc-grid .sidebar .panel:last-child{flex:1 1 auto !important}
.sc-grid .sidebar .panel-h{font-size:0.76rem;margin-bottom:4px;padding-bottom:4px}
.sc-grid .sidebar .cur-pos-box{padding:4px 7px;margin-bottom:4px;font-size:0.72rem;line-height:1.25}
.sc-grid .sidebar .cur-pos-box img,
.sc-grid .sidebar .cur-pos-box svg{width:42px !important;height:42px !important}
.sc-grid .sidebar .cur-pos-lbl{font-size:0.54rem}
.sc-grid .sidebar .prow{padding:0;margin-bottom:0}
.sc-grid .sidebar .pem{width:20px !important;height:20px !important}
.sc-grid .sidebar .plbl{font-size:0.62rem;min-width:52px !important}
.sc-grid .sidebar .pnums{font-size:0.62rem;min-width:38px !important}
.sc-grid .sidebar .pbar{height:5px !important}
.sc-grid .sidebar .rw-list{gap:4px}
.sc-grid .sidebar .rw-row2{
flex:0 0 auto !important;
min-height:44px !important;
padding:4px 6px;
gap:5px;
align-items:flex-start;
}
.sc-grid .sidebar .rw-title{font-size:0.56rem;line-height:1.05;margin-bottom:1px}
.sc-grid .sidebar .rw-meta{font-size:0.48rem;line-height:1.02}
.sc-grid .sidebar .rw-buy-btn{
padding:3px 7px;
font-size:0.56rem;
align-self:center;
white-space:nowrap;
}
.sc-grid .sidebar .safety-active{font-size:0.56rem;padding:3px 5px;margin-top:3px}
}
@media(max-height:820px){
.ca-lobby-banner,.ch-lobby-banner{padding:10px 14px}
.ch-info-card,.ch-action-card{padding:18px 16px}
}
@media(max-width:900px),(max-height:720px){
.ca-lobby-horiz,.ch-lobby-horiz{height:auto;overflow:visible}
#main:has(.ca-lobby-horiz),#main:has(.ch-lobby-horiz){overflow:auto;padding-bottom:66px}
.ch-lobby-cards{grid-template-columns:1fr}
}
/* ── Mobile fallback ── */
@media(max-width:768px){
.ca-lobby-horiz,.ch-lobby-horiz{display:flex;flex-direction:column;height:auto;overflow:visible}
#main:has(.ca-lobby-horiz),#main:has(.ch-lobby-horiz){overflow:auto;padding-bottom:66px}
.ch-lobby-cards{grid-template-columns:1fr}
}
/* Story play: unified responsive system */
.sc-grid.sc-grid--solo:not(.sc-grid--challenge){
--story-shell-pad:clamp(10px,1.5vw,16px);
--story-panel-pad:clamp(10px,1.3vw,14px);
--story-card-pad:clamp(10px,1.4vw,16px);
--story-gap:clamp(6px,0.9vw,10px);
--story-title-size:clamp(1.12rem,1.32vw,1.28rem);
--story-question-size:clamp(1.04rem,1.18vw,1.16rem);
--story-choice-size:clamp(1.04rem,1.08vw,1.08rem);
--story-meta-size:clamp(0.56rem,0.65vw,0.66rem);
--story-choice-min:clamp(64px,7.8vh,72px);
--story-variant-label-size:calc(var(--story-meta-size) + 0.04rem);
--story-variant-help-size:calc(var(--story-meta-size) + 0.10rem);
--story-variant-copy-size:calc(var(--story-choice-size) - 0.08rem);
--story-variant-slot-size:calc(var(--story-choice-size) - 0.14rem);
--story-variant-slot-height:clamp(42px,5.8vh,52px);
--story-variant-option-height:clamp(48px,7vh,60px);
--story-variant-target-gap:max(4px,calc(var(--story-gap) - 2px));
--story-variant-column-gap:max(4px,calc(var(--story-gap) - 3px));
--story-variant-action-gap:max(5px,calc(var(--story-gap) - 2px));
--story-variant-target-pad:6px 8px;
--story-variant-slot-min:24px;
--story-variant-slot-pad:3px 6px;
--story-variant-choice-height:clamp(38px,5.2vh,44px);
--story-variant-choice-pad:6px 8px;
--story-variant-choice-icon:24px;
position:relative;
width:min(100%,var(--layout-story-shell-max-width)) !important;
max-width:var(--layout-story-shell-max-width) !important;
margin-left:auto;
margin-right:auto;
grid-template-columns:minmax(0,1fr) !important;
padding:var(--story-shell-pad);
border-radius:30px;
background:
radial-gradient(circle at 10% 10%,rgba(253,230,138,0.28),transparent 22%),
radial-gradient(circle at 88% 16%,rgba(249,168,212,0.26),transparent 24%),
radial-gradient(circle at 82% 88%,rgba(147,197,253,0.24),transparent 26%),
linear-gradient(180deg,#F8FAFF 0%,#FFF7ED 100%);
border:2px solid #DDD6FE;
box-shadow:0 18px 40px rgba(99,102,241,0.12);
height:auto !important;
max-height:none !important;
min-height:0 !important;
align-items:start;
overflow:visible !important;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sidebar{
display:none !important;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge)::before{
content:'';
position:absolute;
inset:0;
background-image:
radial-gradient(circle at 24px 20px,rgba(255,255,255,0.72) 0 2px,transparent 3px),
radial-gradient(circle at 80px 60px,rgba(255,255,255,0.56) 0 1.5px,transparent 2.5px);
background-size:120px 100px;
pointer-events:none;
opacity:.72;
}
.sc-grid.sc-grid--challenge{
--story-card-pad:clamp(10px,1.4vw,16px);
--story-title-size:clamp(1.12rem,1.32vw,1.28rem);
--story-question-size:clamp(1.04rem,1.18vw,1.16rem);
--story-meta-size:clamp(0.56rem,0.65vw,0.66rem);
}
#main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge){
height:auto !important;
max-height:none !important;
min-height:0 !important;
align-self:center;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main{
position:relative;
min-height:0 !important;
height:auto !important;
max-height:none !important;
padding:var(--story-panel-pad);
gap:var(--story-gap);
overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,0.72),rgba(255,255,255,0.94));
border-radius:28px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.84);
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--compact{
height:auto !important;
justify-content:flex-start;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-top{
flex:0 0 auto;
min-height:0;
padding:calc(var(--story-panel-pad) - 1px) var(--story-panel-pad);
margin-bottom:0;
border-radius:24px;
background:linear-gradient(145deg,#EEF2FF,#FFF7ED);
border:2px solid #DDD6FE;
box-shadow:0 12px 24px rgba(139,92,246,0.10);
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-icon-ring{
width:var(--layout-play-category-icon-size) !important;
height:var(--layout-play-category-icon-size) !important;
margin:0 auto 4px;
background:linear-gradient(135deg,#FDE68A,#F9A8D4);
box-shadow:0 12px 22px rgba(236,72,153,0.14);
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-cat{
font-size:var(--story-meta-size);
margin-bottom:4px;
color:#7C3AED;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-subcat{
font-size:calc(var(--story-meta-size) - 0.02rem);
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-diff{
padding:4px 10px;
margin:3px auto 4px;
font-size:var(--story-meta-size);
background:linear-gradient(135deg,#DBEAFE,#EDE9FE);
color:#4338CA;
border:1.5px solid #C4B5FD;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass{
width:100% !important;
max-width:none !important;
margin-left:auto;
margin-right:auto;
margin-top:4px;
padding:var(--story-card-pad);
text-align:center;
background:linear-gradient(180deg,#FFFFFF,#FFF7ED);
border:1.5px solid #FDE68A;
box-shadow:0 10px 20px rgba(251,146,60,0.08);
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass .sc-name{
margin-bottom:4px;
font-size:var(--story-title-size);
line-height:1.16;
text-align:center;
color:#4C1D95;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass .sc-body{
font-size:var(--story-question-size);
line-height:1.34;
text-align:center;
color:#334155;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-mode-note,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-fill-card,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-sequence-card,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-quote-card{
margin:0;
padding:var(--story-panel-pad);
border-radius:20px;
background:linear-gradient(180deg,#EEF2FF,#FFFFFF);
border:1.5px solid #DDD6FE;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main > .go-btn{
margin-top:0;
padding:10px 12px;
min-height:var(--layout-story-cta-min-height);
background:linear-gradient(135deg,#8B5CF6,#2563EB);
box-shadow:0 10px 18px rgba(79,70,229,0.22);
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match){
display:grid !important;
grid-template-rows:repeat(3,minmax(0,1fr));
gap:var(--story-gap);
flex:none !important;
align-content:start;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .cho-btn{
min-height:var(--story-choice-min);
padding:13px 14px;
align-items:center;
border-radius:22px;
border:2px solid #DDD6FE;
background:linear-gradient(180deg,#FFFFFF,#EEF2FF);
box-shadow:0 10px 18px rgba(99,102,241,0.08);
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match) > .cho-btn:nth-child(1){
border-color:#93C5FD;
background:linear-gradient(180deg,#FFFFFF,#EFF6FF);
box-shadow:0 10px 18px rgba(59,130,246,0.10);
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match) > .cho-btn:nth-child(2){
border-color:#86EFAC;
background:linear-gradient(180deg,#FFFFFF,#ECFDF5);
box-shadow:0 10px 18px rgba(34,197,94,0.10);
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match) > .cho-btn:nth-child(3){
border-color:#FDBA74;
background:linear-gradient(180deg,#FFFFFF,#FFF7ED);
box-shadow:0 10px 18px rgba(249,115,22,0.10);
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .cho-btn:hover{
transform:translateY(-2px);
box-shadow:0 14px 22px rgba(99,102,241,0.10);
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .cho-copy{
font-size:var(--story-choice-size);
line-height:1.2;
font-weight:800;
color:#334155;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .cho-ltr{
width:31px;
height:31px;
border-radius:10px;
font-size:.88rem;
}
.play-result.play-result--story,
.play-result.play-result--sequence,
.play-result.play-result--match{
display:block !important;
width:min(100%,var(--layout-story-result-shell-max-width)) !important;
max-width:var(--layout-story-result-shell-max-width) !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
align-self:flex-start;
margin-top:0 !important;
margin-left:auto !important;
margin-right:auto !important;
overflow:visible !important;
padding:clamp(12px,1.6vw,16px);
}
#main.main-play-view .play-result.play-result--story,
#main.main-play-view .play-result.play-result--sequence,
#main.main-play-view .play-result.play-result--match{
min-height:0 !important;
max-height:none !important;
}
.play-result.play-result--story{
background:
radial-gradient(circle at 12% 10%,rgba(253,230,138,0.24),transparent 20%),
radial-gradient(circle at 90% 16%,rgba(249,168,212,0.24),transparent 24%),
linear-gradient(180deg,#F8FAFF 0%,#FFF7ED 100%);
border:2px solid #DDD6FE;
border-radius:30px;
box-shadow:0 18px 40px rgba(99,102,241,0.12);
}
.play-result.play-result--story .res-icon-wrap{
background:linear-gradient(135deg,#FDE68A,#F9A8D4);
box-shadow:0 12px 22px rgba(236,72,153,0.14);
}
.play-result.play-result--story .lesson-card,
.play-result.play-result--sequence .lesson-card,
.play-result.play-result--match .lesson-card{
margin-bottom:2px;
border-radius:24px;
box-shadow:0 12px 20px rgba(99,102,241,0.08);
}
.play-result.play-result--story .lesson-card{
border:1.5px solid #DDD6FE;
background:linear-gradient(180deg,#FFFFFF,#FFF7ED);
}
.play-result.play-result--story .res-center,
.play-result.play-result--sequence .res-center,
.play-result.play-result--match .res-center{
display:flex !important;
flex-direction:column;
gap:var(--story-gap);
width:100%;
max-width:var(--layout-result-inner-max-width);
margin-left:auto;
margin-right:auto;
min-height:0 !important;
overflow:visible !important;
}
.play-result.play-result--story .res-icon-wrap,
.play-result.play-result--sequence .res-icon-wrap,
.play-result.play-result--match .res-icon-wrap{
width:clamp(50px,4.6vw,58px) !important;
height:clamp(50px,4.6vw,58px) !important;
margin-bottom:2px;
}
.play-result.play-result--story .res-title,
.play-result.play-result--sequence .res-title,
.play-result.play-result--match .res-title{
margin-bottom:0;
font-size:clamp(1rem,1.2vw,1.12rem);
line-height:1.08;
}
.play-result.play-result--story .res-bonus,
.play-result.play-result--sequence .res-bonus,
.play-result.play-result--match .res-bonus{
margin-bottom:2px;
padding:4px 10px;
font-size:0.7rem;
}
.play-result.play-result--story .lesson-card-header,
.play-result.play-result--sequence .lesson-card-header,
.play-result.play-result--match .lesson-card-header{
padding:10px 12px;
}
.play-result.play-result--story .lc-verdict-ico,
.play-result.play-result--sequence .lc-verdict-ico,
.play-result.play-result--match .lc-verdict-ico{
width:34px !important;
height:34px !important;
font-size:1rem;
}
.play-result.play-result--story .lc-verdict-text,
.play-result.play-result--sequence .lc-verdict-text,
.play-result.play-result--match .lc-verdict-text{
font-size:1rem;
}
.play-result.play-result--story .lc-badge,
.play-result.play-result--sequence .lc-badge,
.play-result.play-result--match .lc-badge{
font-size:0.56rem;
padding:3px 7px;
}
.play-result.play-result--story .lesson-card-body,
.play-result.play-result--sequence .lesson-card-body,
.play-result.play-result--match .lesson-card-body{
padding:9px 10px;
gap:5px;
}
.play-result.play-result--story .lc-section,
.play-result.play-result--sequence .lc-section,
.play-result.play-result--match .lc-section{
padding:6px 8px;
}
.play-result.play-result--story .lc-section-label,
.play-result.play-result--sequence .lc-section-label,
.play-result.play-result--match .lc-section-label{
font-size:0.54rem;
margin-bottom:3px;
}
.play-result.play-result--story .lc-section-copy,
.play-result.play-result--sequence .lc-section-copy,
.play-result.play-result--match .lc-section-copy,
.play-result.play-result--story .lc-step-text,
.play-result.play-result--sequence .lc-step-text,
.play-result.play-result--match .lc-step-text{
font-size:0.76rem;
line-height:1.18;
}
.play-result.play-result--story .lc-step-list,
.play-result.play-result--sequence .lc-step-list,
.play-result.play-result--match .lc-step-list{
gap:3px;
}
.play-result.play-result--story .lc-step-item,
.play-result.play-result--sequence .lc-step-item,
.play-result.play-result--match .lc-step-item{
gap:6px;
}
.play-result.play-result--story .lc-step-num,
.play-result.play-result--sequence .lc-step-num,
.play-result.play-result--match .lc-step-num{
width:18px !important;
height:18px !important;
font-size:0.56rem;
}
.play-result.play-result--story .challenge-finish-points--result,
.play-result.play-result--sequence .challenge-finish-points--result,
.play-result.play-result--match .challenge-finish-points--result{
padding:7px 8px;
margin-bottom:2px;
}
.play-result.play-result--story .challenge-finish-points-title,
.play-result.play-result--sequence .challenge-finish-points-title,
.play-result.play-result--match .challenge-finish-points-title{
font-size:0.64rem;
margin-bottom:4px;
}
.play-result.play-result--story .challenge-finish-points-row,
.play-result.play-result--sequence .challenge-finish-points-row,
.play-result.play-result--match .challenge-finish-points-row{
gap:4px;
}
.play-result.play-result--story .result-points-pill,
.play-result.play-result--sequence .result-points-pill,
.play-result.play-result--match .result-points-pill{
padding:4px 7px;
gap:5px;
font-size:0.68rem;
}
.play-result.play-result--story .res-continue-btn,
.play-result.play-result--sequence .res-continue-btn,
.play-result.play-result--match .res-continue-btn{
margin-top:0;
padding:9px 12px;
font-size:0.82rem;
background:linear-gradient(135deg,#8B5CF6 0%,#3B82F6 58%,#0EA5E9 100%);
color:#FFFFFF;
border:0;
box-shadow:
0 12px 24px rgba(59,130,246,0.24),
inset 0 1px 0 rgba(255,255,255,0.24);
}
.play-result.play-result--story .res-continue-btn:hover,
.play-result.play-result--sequence .res-continue-btn:hover,
.play-result.play-result--match .res-continue-btn:hover{
transform:translateY(-2px);
box-shadow:
0 15px 28px rgba(59,130,246,0.30),
inset 0 1px 0 rgba(255,255,255,0.28);
}
.sc-grid.sc-grid--challenge{
position:relative;
display:block;
width:min(100%,1080px) !important;
max-width:1080px !important;
margin-left:auto;
margin-right:auto;
grid-template-columns:minmax(0,1fr) !important;
align-self:start;
height:fit-content !important;
min-height:0 !important;
padding:10px 12px 12px;
border-radius:30px;
background:
radial-gradient(circle at 12% 8%,rgba(56,189,248,0.18),transparent 18%),
radial-gradient(circle at 88% 14%,rgba(251,146,60,0.18),transparent 20%),
linear-gradient(180deg,#0F172A 0%,#172554 100%);
border:2px solid #60A5FA;
box-shadow:0 18px 40px rgba(15,23,42,0.28);
}
.sc-grid.sc-grid--challenge::before{
content:'';
position:absolute;
inset:0;
background-image:
radial-gradient(circle at 30px 30px,rgba(255,255,255,0.08) 0 1.5px,transparent 2px),
radial-gradient(circle at 88px 72px,rgba(255,255,255,0.06) 0 1px,transparent 2px);
background-size:120px 110px;
pointer-events:none;
}
.sc-grid.sc-grid--challenge .ch-fullscreen{
position:relative;
background:transparent;
box-shadow:none;
width:100%;
padding:0;
}
.sc-grid.sc-grid--challenge .ch-round-info{
color:#E0F2FE;
font-weight:900;
}
.sc-grid.sc-grid--challenge .round-dot{
background:rgba(255,255,255,0.18);
}
.sc-grid.sc-grid--challenge .round-dot.active{
background:#FB923C;
}
.sc-grid.sc-grid--challenge .round-dot.current{
box-shadow:0 0 0 3px rgba(59,130,246,0.30);
}
.sc-grid.sc-grid--challenge .ch-vs-bar{
border-radius:24px;
background:linear-gradient(135deg,rgba(14,165,233,0.18),rgba(251,146,60,0.18));
border:2px solid rgba(125,211,252,0.34);
}
.sc-grid.sc-grid--challenge .player-ring{
box-shadow:0 0 0 4px rgba(56,189,248,0.22);
}
.sc-grid.sc-grid--challenge .boss-ring{
box-shadow:0 0 0 4px rgba(251,146,60,0.22);
}
.sc-grid.sc-grid--challenge .ch-name{
color:#fff;
}
.sc-grid.sc-grid--challenge .ch-pts{
color:#FDE68A;
}
.sc-grid.sc-grid--challenge .ch-vs-badge{
background:linear-gradient(135deg,#FB923C,#FACC15);
color:#7C2D12;
box-shadow:0 10px 20px rgba(249,115,22,0.22);
}
.sc-grid.sc-grid--challenge .challenge-timer-row{
border-radius:14px;
background:linear-gradient(135deg,#FFF7ED,#FFEDD5);
border:1.5px solid #FDBA74;
margin:4px 0 6px;
padding:4px 8px;
}
.sc-grid.sc-grid--challenge .challenge-timer{
background:linear-gradient(135deg,#FB923C,#F59E0B);
color:#fff;
box-shadow:0 8px 16px rgba(249,115,22,0.24);
}
.sc-grid.sc-grid--challenge .ch-question-card{
border-radius:20px;
background:linear-gradient(145deg,#EEF2FF,#FFF7ED);
border:2px solid #DDD6FE;
box-shadow:0 12px 24px rgba(139,92,246,0.10);
padding:var(--layout-challenge-question-padding);
}
.sc-grid.sc-grid--challenge .ch-q-meta{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:8px;
min-height:24px;
padding:0 42px;
}
.sc-grid.sc-grid--challenge .ch-q-cat{
flex:1;
text-align:center;
color:#1E3A8A;
}
.sc-grid.sc-grid--challenge .ch-q-meta .sc-tts-btn{
position:absolute !important;
top:8px !important;
right:10px !important;
flex:0 0 auto;
margin-left:0;
}
.sc-grid.sc-grid--challenge .ch-q-glass{
display:flex !important;
flex-direction:column;
align-items:center;
width:100% !important;
max-width:none !important;
margin:4px auto 0;
padding:var(--story-card-pad);
text-align:center;
background:linear-gradient(180deg,#FFFFFF,#FFF7ED);
border:1.5px solid #FDE68A;
box-shadow:0 10px 20px rgba(251,146,60,0.08);
}
.sc-grid.sc-grid--challenge .ch-q-title,
.sc-grid.sc-grid--challenge .ch-q-glass .ch-q-title{
width:min(100%,var(--layout-story-title-max-width)) !important;
margin-left:auto;
margin-right:auto;
color:#4C1D95;
text-align:center !important;
text-wrap:balance;
margin-bottom:clamp(24px,3.2vh,34px) !important;
}
.sc-grid.sc-grid--challenge .ch-q-diff{
position:absolute !important;
top:max(7px,calc(var(--story-card-pad) * .58)) !important;
left:max(9px,calc(var(--story-card-pad) * .78)) !important;
margin:0 !important;
font-size:var(--story-meta-size);
pointer-events:none;
}
.sc-grid.sc-grid--challenge .ch-q-body,
.sc-grid.sc-grid--challenge .ch-q-glass .ch-q-body{
width:min(100%,var(--layout-story-body-max-width)) !important;
max-width:var(--layout-story-body-max-width) !important;
margin-left:auto;
margin-right:auto;
color:#334155;
line-height:1.34;
text-align:center !important;
text-wrap:balance;
}
.sc-grid.sc-grid--challenge .ch-choices .cho-btn{
border-radius:22px;
border:2px solid rgba(125,211,252,0.5);
background:linear-gradient(180deg,#FFFFFF,#DBEAFE);
box-shadow:0 10px 18px rgba(15,23,42,0.10);
min-height:var(--layout-challenge-choice-min-height);
padding:var(--layout-challenge-choice-padding);
}
.sc-grid.sc-grid--challenge .ch-choices .cho-btn:nth-child(1){
background:linear-gradient(180deg,#FFFFFF,#DBEAFE);
border-color:#93C5FD;
}
.sc-grid.sc-grid--challenge .ch-choices .cho-btn:nth-child(2){
background:linear-gradient(180deg,#FFFFFF,#ECFDF5);
border-color:#86EFAC;
}
.sc-grid.sc-grid--challenge .ch-choices .cho-btn:nth-child(3){
background:linear-gradient(180deg,#FFFFFF,#FFEDD5);
border-color:#FDBA74;
}
.sc-grid.sc-grid--challenge .ch-choices .cho-btn:nth-child(1):hover{
border-color:#60A5FA;
background:linear-gradient(180deg,#FFFFFF,#BFDBFE);
}
.sc-grid.sc-grid--challenge .ch-choices .cho-btn:nth-child(2):hover{
border-color:#4ADE80;
background:linear-gradient(180deg,#FFFFFF,#D1FAE5);
}
.sc-grid.sc-grid--challenge .ch-choices .cho-btn:nth-child(3):hover{
border-color:#FB923C;
background:linear-gradient(180deg,#FFFFFF,#FED7AA);
}
.sc-grid.sc-grid--challenge .ch-choices .cho-copy{
color:#1E293B;
font-size:var(--layout-challenge-choice-copy-size);
line-height:var(--layout-challenge-choice-copy-line-height);
font-weight:800;
}
.challenge-round-result{
background:
radial-gradient(circle at 12% 10%,rgba(56,189,248,0.18),transparent 18%),
radial-gradient(circle at 88% 12%,rgba(251,146,60,0.16),transparent 18%),
linear-gradient(180deg,#F8FBFF 0%,#FFF7ED 100%);
border:2px solid #BFDBFE;
border-radius:30px;
box-shadow:0 18px 40px rgba(30,58,138,0.12);
}
.challenge-round-result .result-header{
color:#1E3A8A;
font-weight:900;
}
.challenge-round-result .lesson-card{
border-radius:24px;
border:1.5px solid #BFDBFE;
background:linear-gradient(180deg,#FFFFFF,#EFF6FF);
}
@media(max-width:960px){
#main:has(.sc-grid--solo){
overflow:auto !important;
padding-bottom:68px;
}
.sc-grid.sc-grid--solo{
height:auto !important;
overflow:visible !important;
}
.sc-grid.sc-grid--solo .sc-main,
.sc-grid.sc-grid--challenge .ch-fullscreen{
height:auto !important;
overflow:visible !important;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices,
.sc-grid.sc-grid--challenge .ch-choices{
display:flex !important;
flex-direction:column;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .cho-btn,
.sc-grid.sc-grid--challenge .ch-choices .cho-btn{
min-height:58px !important;
height:auto !important;
align-items:flex-start;
font-size:0.92rem;
}
.sc-grid.sc-grid--solo .sc-q-glass .sc-name,
.sc-grid.sc-grid--challenge .ch-q-title,
.sc-grid.sc-grid--challenge .ch-q-glass .ch-q-title{
font-size:1.1rem;
}
.sc-grid.sc-grid--solo .sc-q-glass .sc-body,
.sc-grid.sc-grid--challenge .ch-q-body,
.sc-grid.sc-grid--challenge .ch-q-glass .ch-q-body{
font-size:1.04rem;
}
}
/* Story play: sequence + match use the same compact responsive rhythm */
.ch-back-btn,
.ch-bottom-home-btn{
display:none !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match{
display:grid !important;
gap:var(--story-gap);
padding:var(--story-panel-pad);
align-content:start;
overflow:hidden !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence{
grid-template-rows:auto auto auto;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match{
grid-template-rows:auto auto auto;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-top{
padding:calc(var(--story-panel-pad) - 1px) var(--story-panel-pad);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-icon-ring{
width:var(--layout-play-category-icon-size) !important;
height:var(--layout-play-category-icon-size) !important;
margin:0 auto 4px;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-q-glass{
width:100% !important;
max-width:none !important;
margin-left:auto;
margin-right:auto;
margin-top:4px;
padding:var(--story-card-pad);
text-align:center;
background:linear-gradient(180deg,#FFFFFF,#FFF7ED);
border:1.5px solid #FDE68A;
box-shadow:0 10px 20px rgba(251,146,60,0.08);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-q-glass .sc-name{
font-size:var(--story-title-size);
line-height:1.16;
text-align:center;
color:#4C1D95;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-q-glass .sc-body{
font-size:var(--story-question-size);
line-height:1.34;
text-align:center;
color:#334155;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-playfield,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-playfield{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--story-gap);
margin-top:0;
min-height:0;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-column,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-column{
min-width:0;
min-height:0;
display:flex;
flex-direction:column;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-column--choices,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-column--answers{
gap:var(--story-gap);
align-items:stretch;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-card,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .sc-sequence-card.sc-main--match{
display:grid;
gap:var(--story-gap);
min-height:0;
margin:0;
padding:calc(var(--story-panel-pad) - 2px) calc(var(--story-panel-pad) - 1px) calc(var(--story-panel-pad) - 2px);
border:2px solid rgba(255,255,255,0.85);
box-shadow:
0 14px 26px rgba(99,102,241,0.12),
inset 0 0 0 1px rgba(255,255,255,0.7);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-label,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-sequence-label,
.sc-grid.sc-grid--solo .sc-main--sequence .sc-match-section-label,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-section-label{
display:inline-flex;
align-items:center;
width:max-content;
padding:4px 10px;
border-radius:999px;
font-size:var(--story-variant-label-size);
font-weight:900;
letter-spacing:.08em;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-label,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-sequence-label{
color:#1E1B4B;
background:linear-gradient(135deg,#FDE68A,#FFF7ED);
border:1.5px solid rgba(245,158,11,0.35);
box-shadow:0 8px 16px rgba(245,158,11,0.14);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-match-section-label,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-section-label{
background:linear-gradient(135deg,#FFFFFF,#F8FAFC);
border:1.5px solid #CFE5FB;
box-shadow:0 6px 12px rgba(59,130,246,0.08);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-help,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-sequence-help{
margin-top:0;
font-size:var(--story-variant-help-size);
line-height:1.2;
color:#475569;
font-weight:800;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-grid{
display:grid !important;
gap:var(--story-gap);
margin-top:2px;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot{
position:relative;
overflow:hidden;
height:var(--story-variant-slot-height);
min-height:var(--story-variant-slot-height);
max-height:var(--story-variant-slot-height);
padding:var(--story-variant-target-pad);
padding-left:calc(var(--story-variant-target-gap) + 18px);
border-radius:14px;
border:2px dashed rgba(96,165,250,0.72);
background:
linear-gradient(180deg,rgba(239,246,255,0.92),rgba(255,255,255,0.96));
box-shadow:
0 8px 16px rgba(59,130,246,0.09),
inset 0 1px 0 rgba(255,255,255,0.86);
transition:transform .14s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot::before{
content:"";
position:absolute;
left:10px;
top:9px;
bottom:9px;
width:5px;
border-radius:999px;
background:linear-gradient(180deg,#60A5FA,#2563EB);
box-shadow:0 6px 12px rgba(37,99,235,0.16);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-grid .sc-sequence-slot:nth-child(1){
border-color:rgba(96,165,250,0.78);
background:var(--tone-quest-card-blue);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-grid .sc-sequence-slot:nth-child(2){
border-color:rgba(52,211,153,0.78);
background:var(--tone-quest-card-green);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-grid .sc-sequence-slot:nth-child(3){
border-color:rgba(251,146,60,0.78);
background:var(--tone-quest-card-orange);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-grid .sc-sequence-slot:nth-child(2)::before{
background:linear-gradient(180deg,#34D399,#059669);
box-shadow:0 6px 12px rgba(5,150,105,0.16);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-grid .sc-sequence-slot:nth-child(3)::before{
background:linear-gradient(180deg,#FDBA74,#F97316);
box-shadow:0 6px 12px rgba(249,115,22,0.16);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot.is-filled{
border-style:solid;
background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);
box-shadow:
0 10px 20px rgba(37,99,235,0.12),
inset 0 0 0 1px rgba(255,255,255,0.8);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot.is-drop-hover{
transform:translateY(-1px);
border-style:solid;
border-color:#F59E0B;
background:linear-gradient(180deg,#FFFBEB 0%,#FFFFFF 100%);
box-shadow:
0 14px 24px rgba(245,158,11,0.2),
0 0 0 4px rgba(251,191,36,0.18);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-label{
font-size:0.58rem;
color:#1E293B;
letter-spacing:.08em;
font-weight:900;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-badge{
width:22px;
height:22px;
border-radius:999px;
display:inline-grid;
place-items:center;
margin-right:6px;
color:#FFFFFF;
font-size:0.68rem;
font-weight:900;
box-shadow:0 7px 14px rgba(15,23,42,0.12);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-grid .sc-sequence-slot:nth-child(1) .sc-sequence-slot-badge{
background:linear-gradient(135deg,#60A5FA,#2563EB);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-grid .sc-sequence-slot:nth-child(2) .sc-sequence-slot-badge{
background:linear-gradient(135deg,#34D399,#059669);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-grid .sc-sequence-slot:nth-child(3) .sc-sequence-slot-badge{
background:linear-gradient(135deg,#FDBA74,#F97316);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-picked-copy{
color:#0F3F6E;
background:rgba(255,255,255,0.84);
border-radius:10px;
padding:2px 6px;
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
box-shadow:inset 0 0 0 1px rgba(203,213,225,0.34);
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-picked-copy,
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-placeholder{
font-size:var(--story-variant-slot-size);
line-height:1.12;
min-width:0;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-placeholder{
color:#64748B;
font-weight:800;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.sc-grid.sc-grid--solo .sc-main--sequence .choices--sequence{
display:grid !important;
grid-template-columns:1fr !important;
gap:var(--story-gap);
min-height:0;
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick{
min-height:var(--story-variant-option-height) !important;
height:var(--story-variant-option-height) !important;
padding:var(--story-variant-choice-pad);
align-items:center;
overflow:hidden;
border-radius:18px;
border-width:2px;
border-color:#C7D2FE;
background:var(--tone-quest-card-gold);
box-shadow:0 12px 22px rgba(59,130,246,0.1),var(--layout-quest-inset);
transition:transform .14s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}
.sc-grid.sc-grid--solo .sc-main--sequence .choices--sequence .cho-btn--sequence-pick:nth-child(1){
border-color:#93C5FD;
background:var(--tone-quest-card-blue);
}
.sc-grid.sc-grid--solo .sc-main--sequence .choices--sequence .cho-btn--sequence-pick:nth-child(2){
border-color:#86EFAC;
background:var(--tone-quest-card-green);
}
.sc-grid.sc-grid--solo .sc-main--sequence .choices--sequence .cho-btn--sequence-pick:nth-child(3){
border-color:#FDBA74;
background:var(--tone-quest-card-orange);
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick:not(.is-used):hover,
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick:not(.is-used):active,
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick.is-armed:not(.is-used){
transform:translateY(-1px);
border-color:#8B5CF6;
box-shadow:0 14px 24px rgba(99,102,241,0.16);
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick.is-dragging{
opacity:.28;
transform:scale(.98);
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick.is-used{
opacity:.55;
transform:none;
}
.sc-grid.sc-grid--solo .sc-main--sequence .cho-btn--sequence-pick .cho-copy{
font-size:var(--story-variant-copy-size);
line-height:1.16;
color:#1E293B;
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:2 !important;
overflow:hidden !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-actions,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-sequence-actions{
margin-top:auto;
display:flex !important;
align-items:flex-end;
justify-content:flex-end;
gap:var(--story-variant-action-gap);
width:100% !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-reset,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-sequence-reset{
border-radius:999px;
min-height:var(--layout-story-secondary-action-min-height);
font-size:0.68rem;
font-weight:900;
background:linear-gradient(135deg,#F59E0B,#F97316);
color:#FFF7ED;
box-shadow:0 10px 18px rgba(249,115,22,0.18);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-stack,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .choices--match{
gap:var(--story-variant-column-gap);
}
/* Match Quest only: make the pairing activity feel like a mission board. */
.sc-main.screen.sc-main--match > .sc-sequence-card.sc-main--match{
border-color:rgba(251,191,36,0.58) !important;
background:
linear-gradient(90deg,rgba(99,102,241,0.045) 1px,transparent 1px),
linear-gradient(0deg,rgba(99,102,241,0.04) 1px,transparent 1px),
linear-gradient(180deg,#FFFBEB 0%,#FFFFFF 100%) !important;
background-size:18px 18px,18px 18px,auto !important;
box-shadow:0 16px 30px rgba(99,102,241,0.12), inset 0 0 0 1px rgba(255,255,255,0.74) !important;
}
.sc-main.screen.sc-main--match .sc-match-card-head .sc-sequence-help--inline{
color:#334155 !important;
font-size:.82rem !important;
font-weight:850 !important;
}
.sc-main.screen.sc-main--match .sc-match-target{
border-style:solid !important;
border-radius:16px !important;
padding:8px 10px !important;
box-shadow:0 10px 18px rgba(59,130,246,0.08), inset 0 1px 0 rgba(255,255,255,0.88) !important;
}
.sc-main.screen.sc-main--match .sc-match-target::before{
display:none !important;
}
.sc-main.screen.sc-main--match .sc-match-problem-num{
width:25px !important;
height:25px !important;
margin-top:1px;
}
.sc-main.screen.sc-main--match .sc-match-problem-text{
font-size:.82rem !important;
line-height:1.18 !important;
}
.sc-main.screen.sc-main--match .sc-match-slot{
min-height:30px !important;
margin-top:6px !important;
border-radius:11px !important;
border:1.5px dashed rgba(148,163,184,0.55) !important;
background:rgba(255,255,255,0.62) !important;
}
.sc-main.screen.sc-main--match .sc-match-slot-placeholder{
color:#64748B !important;
font-size:.74rem !important;
font-weight:850 !important;
}
.sc-main.screen.sc-main--match .sc-match-slot-card{
width:100%;
justify-content:flex-start;
border-radius:10px !important;
padding:6px 9px !important;
color:#0F172A !important;
background:rgba(255,255,255,0.94) !important;
font-size:.78rem !important;
font-weight:900 !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
}
.sc-main.screen.sc-main--match .cho-btn--match-option{
min-height:46px !important;
border-radius:18px !important;
box-shadow:0 12px 22px rgba(59,130,246,0.10), inset 0 1px 0 rgba(255,255,255,0.78) !important;
}
.sc-main.screen.sc-main--match .sc-match-card-emoji{
background:linear-gradient(135deg,#FFFFFF,#FEF3C7) !important;
color:#B45309 !important;
}
.sc-main.screen.sc-main--match.has-active-match .sc-match-target.is-ready:not(.is-filled){
transform:translateY(-1px);
border-color:#A78BFA !important;
box-shadow:0 14px 24px rgba(124,58,237,0.15), 0 0 0 3px rgba(167,139,250,0.16) !important;
}
.sc-main.screen.sc-main--match .sc-match-target.is-filled{
border-style:solid !important;
box-shadow:0 12px 24px rgba(34,197,94,0.12), inset 0 1px 0 rgba(255,255,255,0.88) !important;
}
.sc-main.screen.sc-main--match .sc-match-target.is-filled .sc-match-slot{
border-style:solid !important;
border-color:rgba(34,197,94,0.34) !important;
background:linear-gradient(180deg,#FFFFFF 0%,#F0FDF4 100%) !important;
}
.sc-main.screen.sc-main--match .cho-btn--match-option.is-ready:not(.is-used){
transform:translateY(-1px);
border-color:#8B5CF6 !important;
box-shadow:0 14px 24px rgba(99,102,241,0.18),0 0 0 3px rgba(167,139,250,0.16) !important;
}
.sc-main.screen.sc-main--match .cho-btn--match-option.is-used{
opacity:.46 !important;
filter:saturate(.85);
}
.sc-main.screen.sc-main--match .sc-sequence-actions{
align-items:center !important;
}
.sc-main.screen.sc-main--match .sc-match-progress{
display:inline-flex;
align-items:center;
font-size:.72rem !important;
font-weight:900 !important;
color:#475569 !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-target{
padding:var(--story-variant-target-pad);
gap:var(--story-variant-target-gap);
border-width:2px;
box-shadow:0 10px 20px rgba(148,163,184,0.1);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-target:hover,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-target:focus-visible,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-target:active{
transform:none;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-problem-text{
font-size:var(--story-variant-copy-size);
line-height:1.12;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-slot{
height:var(--story-variant-slot-min);
min-height:var(--story-variant-slot-min);
max-height:var(--story-variant-slot-min);
margin-top:2px;
padding:var(--story-variant-slot-pad);
overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.85);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-slot-placeholder,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-slot-card{
font-size:var(--story-variant-slot-size);
line-height:1.1;
min-height:0;
max-height:100%;
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-slot-card{
height:100%;
padding:0 6px;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .cho-btn--match-option{
min-height:var(--story-variant-choice-height) !important;
height:var(--story-variant-choice-height) !important;
padding:var(--story-variant-choice-pad);
display:grid !important;
grid-template-columns:var(--story-variant-choice-icon) minmax(0,1fr) !important;
align-items:center;
border-width:2px;
border-color:#EEE3BF;
background:linear-gradient(180deg,#FFFEFA 0%,#FFFFFF 100%);
box-shadow:0 10px 18px rgba(180,138,63,0.08);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .cho-btn--match-option:not(.is-used):hover,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .cho-btn--match-option:not(.is-used):focus-visible,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .cho-btn--match-option:not(.is-used):active,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .cho-btn--match-option.is-ready:not(.is-used),
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .cho-btn--match-option.is-armed:not(.is-used){
transform:translateY(-1px);
border-color:#8B5CF6;
box-shadow:0 14px 24px rgba(99,102,241,0.16);
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .cho-btn--match-option.is-used{
opacity:.55;
transform:none;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-card-emoji{
width:var(--story-variant-choice-icon);
height:var(--story-variant-choice-icon);
font-size:.96rem;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .cho-btn--match-option .cho-copy{
font-size:var(--story-variant-copy-size);
line-height:1.08;
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:2 !important;
overflow:hidden !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-progress{
font-size:var(--story-variant-help-size);
text-align:right;
}
.sc-main.screen.sc-main--match .sc-match-answer-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-width:0;
margin:0 0 6px;
}
.sc-main.screen.sc-main--match .sc-match-answer-head .sc-match-section-label{
flex:0 1 auto;
min-width:0;
margin:0 !important;
}
.sc-main.screen.sc-main--match .sc-match-progress--top{
flex:0 0 auto;
justify-self:end;
align-self:center;
margin:0 0 0 auto;
padding:5px 8px;
border-radius:999px;
border:1px solid rgba(147,197,253,0.48);
background:linear-gradient(135deg,#EFF6FF,#FFFFFF);
color:#1E3A8A !important;
box-shadow:0 8px 16px rgba(37,99,235,0.08);
}
.sc-main.screen.sc-main--match .sc-sequence-actions--match{
justify-content:flex-start !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence > .go-btn,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .go-btn{
margin-top:0;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .go-btn{
padding:8px 10px;
font-size:0.76rem;
}
@media (max-width:700px){
.sc-grid.sc-grid--solo:not(.sc-grid--challenge){
--story-shell-pad:10px;
--story-panel-pad:10px;
--story-card-pad:10px;
--story-gap:6px;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-playfield,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-playfield{
grid-template-columns:1fr !important;
}
}
@media (max-height:820px){
.sc-grid.sc-grid--solo:not(.sc-grid--challenge){
--story-shell-pad:9px;
--story-panel-pad:9px;
--story-card-pad:9px;
--story-gap:5px;
--story-title-size:1.08rem;
--story-question-size:1rem;
--story-choice-size:0.8rem;
--story-choice-min:46px;
}
.play-result.play-result--story,
.play-result.play-result--sequence,
.play-result.play-result--match{
padding:10px;
}
}
@media (min-width:768px) and (max-width:1199px) and (min-height:700px){
.sc-grid.sc-grid--solo:not(.sc-grid--challenge){
--story-shell-pad:8px;
--story-panel-pad:8px;
--story-card-pad:8px;
--story-gap:5px;
--story-choice-min:44px;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-top{
padding:7px 8px;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-icon-ring{
width:var(--layout-play-category-icon-size-compact) !important;
height:var(--layout-play-category-icon-size-compact) !important;
margin-bottom:2px;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass{
padding:8px 10px;
margin-top:2px;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-target{
padding:6px 7px;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-match-slot{
min-height:24px !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .cho-btn--match-option{
min-height:38px !important;
height:38px !important;
}
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match > .go-btn{
padding:7px 10px;
}
}
.sequence-drag-ghost{
position:fixed;
left:0;
top:0;
z-index:9999;
pointer-events:none;
max-width:min(260px,70vw);
padding:10px 12px;
border-radius:16px;
border:2px solid #F59E0B;
background:linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 100%);
color:#9A3412;
font-size:.8rem;
font-weight:900;
line-height:1.2;
box-shadow:0 18px 30px rgba(245,158,11,0.24);
transform:translate(-50%,-50%) rotate(-2deg);
}
body.sequence-dragging .sc-main--sequence{
cursor:grabbing;
}
/* ═══════════════════════════════════════════════════════════════
GLOBAL RESPONSIVE SHELL FIXES
Unlock scroll and remove viewport-height clipping on tablet/mobile.
Desktop keeps the current fit-to-screen shell.
═══════════════════════════════════════════════════════════════ */
@media (max-width:1199px){
html,body{
height:auto;
min-height:100%;
overflow-x:hidden;
overflow-y:auto;
}
body{
min-height:100vh;
min-height:100svh;
min-height:100dvh;
overflow-x:hidden;
overflow-y:auto;
background-attachment:scroll;
}
body::before{
position:absolute;
min-height:100%;
}
#app{
max-width:none;
min-height:100vh;
min-height:100svh;
min-height:100dvh;
height:auto !important;
overflow:visible !important;
padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
#main{
flex:1 1 auto;
min-height:0;
overflow-x:hidden !important;
overflow-y:visible !important;
overscroll-behavior:auto;
padding-bottom:var(--layout-route-main-mobile-padding);
}
#main:has(.sc-grid),
#main:has(.ca-lobby-horiz),
#main:has(.ch-lobby-horiz),
#main:has(.choiceadventure-result-screen){
overflow-x:hidden !important;
overflow-y:visible !important;
padding-bottom:var(--layout-route-main-mobile-padding);
}
#welcome-splash{
align-items:flex-start;
padding:var(--layout-welcome-splash-padding-mobile);
}
.ws-shell{
grid-template-columns:1fr;
width:100% !important;
max-width:var(--layout-welcome-mobile-max-width);
align-items:start;
}
.ws-brand-panel,
.ws-auth-card{
width:100%;
max-width:100%;
height:auto !important;
min-height:0;
overflow:visible;
}
.legal-ov{
align-items:flex-start;
overflow-y:auto;
}
.legal-box{
max-height:none;
}
.screen,
.card,
.panel,
.sc-grid,
.ca-lobby-horiz,
.ch-lobby-horiz,
.choiceadventure-shell,
.choiceadventure-round-screen,
.choiceadventure-result-screen,
.sc-main,
.sc-main--compact,
.sc-main--sequence,
.sidebar,
.play-result,
.play-result--story,
.play-result--sequence,
.challenge-round-result,
.challenge-winner-card,
.challenge-finish-card,
.sc-grid .ch-fullscreen{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
}
/* Play routes keep the Home black bar, but use a slimmer stat strip
so Story/Challenge questions get more vertical room. */
body.route-play-view #hud.show{
padding:var(--layout-route-play-hud-padding);
gap:var(--layout-route-play-hud-gap);
min-height:0 !important;
border-radius:var(--layout-route-play-hud-radius);
align-items:center;
}
body.route-play-view #hud .hs{
padding:var(--layout-route-play-hud-chip-padding);
gap:var(--layout-route-play-hud-chip-gap);
min-height:0 !important;
font-size:0.78rem;
}
body.route-play-view #hud .hs img{
width:var(--layout-route-play-hud-icon-size) !important;
height:var(--layout-route-play-hud-icon-size) !important;
}
body.route-play-view #hud .hs-lbl{
font-size:0.5rem;
line-height:1;
margin-top:0;
}
body.route-play-view #hud .hud-pos{
padding:var(--layout-route-play-hud-pos-padding);
gap:var(--layout-route-play-hud-pos-gap);
font-size:0.7rem;
max-width:var(--layout-route-play-hud-pos-max-width) !important;
}
body.route-play-view #hud .hud-av-ring{
width:var(--layout-route-play-avatar-size) !important;
height:var(--layout-route-play-avatar-size) !important;
}
body.route-play-view #hud #hpt img{
width:var(--layout-route-play-hpt-icon-size) !important;
height:var(--layout-route-play-hpt-icon-size) !important;
}
@media (max-width:768px){
#app{
padding:8px 10px 0;
gap:10px;
}
#nav{
padding:10px;
gap:8px;
}
#hud{
padding:8px 10px;
gap:6px;
flex-wrap:wrap;
}
.ws-brand-panel,
.ws-auth-card{
padding:18px 14px;
border-radius:22px;
}
.ws-auth-card{
order:-1;
}
.ws-auth-title{
font-size:1.36rem;
line-height:1.08;
overflow-wrap:anywhere;
}
.ws-auth-copy{
font-size:.72rem;
line-height:1.36;
}
.ws-guest-adventure-btn{
grid-template-columns:auto minmax(0,1fr);
padding:12px 10px 10px;
}
.ws-guest-action{
grid-column:1/-1;
min-height:38px;
width:100%;
}
.ws-guest-title{
font-size:1rem;
}
.ws-account-overlay-btn{
min-height:36px;
font-size:.68rem;
}
.ws-field-grid,
.ws-field-grid-password{
grid-template-columns:1fr;
}
.ws-auth-footer{
font-size:.66rem;
}
}
/* ── Responsive safety net: short-height screens expand instead of clipping ── */
@media (max-height:900px){
html,body{
height:auto !important;
min-height:100% !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
body{
min-height:100vh;
min-height:100svh;
min-height:100dvh;
overflow-x:hidden !important;
overflow-y:auto !important;
background-attachment:scroll;
}
#app{
height:auto !important;
min-height:100vh;
min-height:100svh;
min-height:100dvh;
overflow:visible !important;
padding-bottom:var(--layout-route-app-mobile-padding);
}
#main,
#main:has(.sc-grid),
#main:has(.ca-lobby-horiz),
#main:has(.ch-lobby-horiz),
#main:has(.choiceadventure-result-screen),
#main:has(.play-result),
#main:has(.challenge-round-result),
#main:has(.challenge-winner-card),
#main:has(.challenge-finish-card){
overflow-x:hidden !important;
overflow-y:visible !important;
padding-bottom:var(--layout-route-result-mobile-padding);
}
#welcome-splash{
align-items:flex-start;
overflow-y:auto !important;
padding-bottom:calc(var(--layout-route-app-mobile-padding) + 2px);
}
.ws-shell{
min-height:0 !important;
align-items:start;
}
.ws-brand-panel,
.ws-auth-card,
.legal-box,
.screen,
.card,
.panel,
.home-dashboard,
.home-main,
.home-side,
.sc-grid,
.ca-lobby-horiz,
.ch-lobby-horiz,
.choiceadventure-shell,
.choiceadventure-round-screen,
.choiceadventure-result-screen,
.sc-main,
.sc-main--compact,
.sc-main--sequence,
.sidebar,
.play-result,
.play-result--story,
.play-result--sequence,
.challenge-round-result,
.challenge-winner-card,
.challenge-finish-card,
.ch-fullscreen,
.sc-grid .ch-fullscreen{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
}
/* Compact landscape override: any width with very short height must scroll instead of clipping. */
@media (max-height:500px){
html,
body{
height:auto !important;
min-height:100% !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
body{
min-height:100dvh;
background-attachment:scroll;
}
#app{
height:auto !important;
min-height:100dvh;
max-height:none !important;
overflow:visible !important;
padding:6px 10px calc(12px + env(safe-area-inset-bottom));
gap:6px;
}
#nav,
#hud{
min-height:0 !important;
padding:6px 8px;
gap:6px;
}
#main,
#main:has(.sc-grid),
#main:has(.ca-lobby-horiz),
#main:has(.ch-lobby-horiz),
#main:has(.choiceadventure-result-screen),
#main:has(.play-result),
#main:has(.challenge-round-result),
#main:has(.challenge-winner-card),
#main:has(.challenge-finish-card){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding-bottom:calc(28px + env(safe-area-inset-bottom));
}
.screen,
.card,
.panel,
.home-dashboard,
.sc-grid,
.ca-lobby-horiz,
.ch-lobby-horiz,
.choiceadventure-lobby-screen,
.choiceadventure-round-screen,
.choiceadventure-result-screen,
.play-result,
.challenge-round-result,
.challenge-winner-card,
.challenge-finish-card{
height:auto !important;
min-height:0 !important;
max-height:none !important;
}
.day-wrap-ov{
align-items:flex-start !important;
justify-content:center !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding:8px 10px calc(10px + env(safe-area-inset-bottom)) !important;
}
.day-wrap-box{
width:min(100%,720px) !important;
max-width:720px !important;
max-height:none !important;
overflow:visible !important;
padding:10px !important;
border-radius:22px !important;
margin:0 auto !important;
}
.day-wrap-hero{
padding:10px !important;
margin-bottom:8px !important;
border-radius:18px !important;
}
.day-wrap-hero-main{
gap:10px !important;
align-items:center !important;
}
.day-wrap-hero-icon{
width:44px !important;
height:44px !important;
border-radius:14px !important;
font-size:1.38rem !important;
}
.day-wrap-title,
.streak-reward-box .day-wrap-title{
font-size:1.22rem !important;
line-height:1.06 !important;
margin-bottom:2px !important;
}
.day-wrap-copy,
.streak-reward-box .day-wrap-copy{
font-size:.76rem !important;
line-height:1.28 !important;
}
.day-wrap-kicker,
.day-wrap-badge{
font-size:.62rem !important;
padding:5px 9px !important;
margin-bottom:7px !important;
}
.day-wrap-minirow{
gap:6px !important;
margin-top:7px !important;
}
.day-mini-pill{
font-size:.62rem !important;
padding:4px 8px !important;
}
.day-wrap-forecast,
.streak-reward-box .day-wrap-forecast{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
margin-bottom:8px !important;
}
.day-wrap-stat,
.streak-reward-box .day-wrap-stat{
min-height:76px !important;
padding:8px 9px !important;
border-radius:16px !important;
gap:8px !important;
}
.day-wrap-stat-ico,
.streak-reward-box .day-wrap-stat-ico{
width:38px !important;
height:38px !important;
border-radius:12px !important;
}
.day-wrap-stat strong,
.streak-reward-box .day-wrap-stat strong{
font-size:.86rem !important;
line-height:1.1 !important;
}
.day-wrap-stat span,
.streak-reward-box .day-wrap-stat span{
font-size:.64rem !important;
line-height:1.22 !important;
margin-top:2px !important;
}
.day-wrap-tip,
.streak-reward-box .day-wrap-tip{
font-size:.68rem !important;
line-height:1.22 !important;
padding:7px 9px !important;
margin-bottom:8px !important;
}
.day-wrap-btn,
.streak-reward-box .day-wrap-btn{
min-height:38px !important;
padding:8px 12px !important;
font-size:.78rem !important;
}
}
/* ── UI placement: nav alignment + mascot positioning ──────────── */
#nav{
min-height:var(--layout-nav-min-height);
}
.nav-left{
row-gap:var(--layout-nav-grid-gap-y);
column-gap:12px;
}
.nav-logo{
align-self:center;
}
.nav-btn,
.sound-btn,
.tts-btn,
.nav-profile{
align-self:center;
}
.nav-profile-info{
text-align:left;
}
.hero-wrap{
overflow:hidden;
}
.hero-mascot{
right:16px;
bottom:12px;
width:var(--layout-home-hero-mascot-width-fluid);
height:auto;
justify-content:flex-end;
}
@media (max-width:1199px){
#nav{
align-items:center;
}
.nav-left{
flex:1 1 auto;
}
.nav-logo{
max-width:var(--layout-nav-logo-max-width-tablet);
}
}
@media (max-width:768px){
#nav{
gap:var(--layout-nav-gap-compact);
align-items:flex-start;
}
.nav-left{
flex:1 1 auto;
align-items:center;
gap:var(--layout-nav-grid-gap-x);
}
.nav-logo{
max-width:var(--layout-nav-logo-max-width-mobile);
min-height:34px;
}
.nav-logo::before{
width:var(--layout-nav-logo-icon-size-mobile);
height:var(--layout-nav-logo-icon-size-mobile);
flex-basis:var(--layout-nav-logo-icon-size-mobile);
}
.nav-btn{
min-height:36px;
padding:6px 10px;
justify-content:center;
}
.nav-btn .nav-btn-text{
display:inline-flex !important;
align-items:center;
min-width:0;
font-size:0.68rem;
line-height:1.05;
white-space:normal;
text-align:center;
}
.nav-btn-ico{
width:var(--layout-nav-button-icon-size-mobile);
height:var(--layout-nav-button-icon-size-mobile);
flex-basis:var(--layout-nav-button-icon-size-mobile);
margin:0;
}
.nav-right{
gap:6px;
align-items:center;
}
.nav-profile{
min-height:36px;
}
.hero-wrap{
padding-right:var(--layout-home-hero-pad-right-mobile);
padding-bottom:96px;
}
.hero-mascot{
width:var(--layout-home-hero-mascot-width-mobile) !important;
right:12px !important;
bottom:12px !important;
}
}
@media (max-width:540px){
#nav{
gap:var(--layout-nav-grid-gap-x);
align-items:flex-start;
}
.nav-left{
display:contents;
}
.nav-logo{
order:1;
flex:1 1 calc(100% - 112px);
max-width:none !important;
min-height:34px;
}
.nav-right{
order:2;
flex:0 0 auto;
width:auto;
margin-left:auto;
}
.nav-btn{
order:3;
flex:1 1 calc(33.333% - 6px);
min-width:0;
min-height:42px;
padding:7px 8px;
border-radius:14px;
}
.nav-btn .nav-btn-text{
font-size:0.62rem;
line-height:1.05;
}
.hero-wrap{
padding-right:12px;
padding-bottom:92px;
}
.hero-mascot{
width:var(--layout-home-hero-mascot-width-phone) !important;
right:10px !important;
bottom:14px !important;
}
}
/* ── MOBILE-FIRST CLEANUP PASS ─────────────────────────────────────────────
Phones should prefer stacked cards, visible content, and normal scrolling.
This block intentionally prefers scrolling over cramped fit-to-screen rules.
───────────────────────────────────────────────────────────────────────── */
@media (max-width:768px){
.screen,
.card,
.panel{
max-width:100%;
box-sizing:border-box;
}
.profile-screen{
max-height:none !important;
min-height:0 !important;
overflow:visible !important;
padding-bottom:18px;
}
.home-dashboard{
display:flex !important;
flex-direction:column;
gap:var(--layout-home-section-gap-mobile);
}
.home-main,
.home-side{
display:flex !important;
flex-direction:column;
gap:var(--layout-home-section-gap-mobile);
width:100%;
}
.home-main{order:1}
.home-side{order:2}
.hero-wrap{
min-height:0 !important;
padding:var(--layout-home-hero-padding-mobile);
}
.hero-title{
font-size:1.48rem;
line-height:1.02;
}
.hero-sub{
font-size:.78rem;
line-height:1.45;
margin-bottom:10px;
}
.hero-chips{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:var(--layout-home-chip-gap-mobile);
}
.hchip{
min-width:0 !important;
width:100%;
padding:var(--layout-home-chip-padding-mobile);
}
.mode-row{
grid-template-columns:1fr !important;
grid-auto-rows:auto !important;
gap:var(--layout-home-mode-gap-mobile);
margin-top:8px;
}
.mcard{
min-height:0 !important;
max-height:none !important;
padding:var(--layout-home-card-padding-mobile);
border-radius:18px;
}
.mcard-content{
flex-direction:row;
align-items:center;
justify-content:flex-start;
gap:var(--layout-home-card-content-gap-mobile);
text-align:left;
height:auto !important;
padding:0;
}
.mcard-icon{
width:var(--layout-home-card-icon-size-mobile) !important;
height:var(--layout-home-card-icon-size-mobile) !important;
margin:0;
flex-shrink:0;
}
.mcard.active .mcard-icon,
.mcard.challenge .mcard-icon,
.mcard.choice-adventure .mcard-icon{
width:var(--layout-home-card-icon-size-mobile) !important;
height:var(--layout-home-card-icon-size-mobile) !important;
padding:6px;
border-radius:16px;
}
.mcard-text-block{
align-items:flex-start;
text-align:left;
gap:3px;
flex:1;
}
.mcard-title{
font-size:.94rem;
margin:0;
}
.mcard-sub{
font-size:.7rem;
line-height:1.34;
margin:0;
}
.mcard-progress-copy{
font-size:.58rem;
}
.mcard-start-btn{
min-width:var(--layout-home-card-button-min-width-mobile) !important;
padding:var(--layout-home-card-button-padding-mobile);
font-size:.72rem;
margin-top:6px;
}
.info-cards-row{
grid-template-columns:1fr !important;
gap:var(--layout-home-info-gap);
}
.info-card{
padding:var(--layout-home-info-card-padding-mobile);
}
.profile-tabs{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--layout-profile-tabs-gap);
border-bottom:none;
padding-bottom:0;
}
.tab-btn{
min-height:44px;
border:1.5px solid var(--sky-md);
border-bottom-width:1.5px !important;
border-radius:14px;
background:#fff;
padding:9px 10px;
font-size:.76rem;
line-height:1.15;
text-align:center;
}
.tab-btn.active{
background:var(--sky-lt);
}
.prof-hero{
padding:14px 12px 12px;
gap:var(--layout-profile-hero-gap);
border-radius:var(--layout-profile-card-radius);
}
.prof-hero-body{
flex-direction:column;
gap:var(--layout-profile-hero-gap);
}
.prof-hero-left,
.prof-hero-center,
.prof-hero-right{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
}
.prof-hero-left,
.prof-hero-right{
padding:12px;
}
.prof-pos-cols{
flex-wrap:wrap;
gap:8px;
}
.prof-pos-divider{
display:none;
}
.av-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:8px;
}
.sbox-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.pi-shell{
gap:var(--layout-insights-shell-gap);
}
.pi-hero{
grid-template-columns:1fr !important;
padding:var(--layout-insights-hero-padding-phone);
gap:var(--layout-insights-hero-gap);
}
.pi-hero-copy{
min-width:0;
}
.pi-hero-title{
font-size:1.12rem;
}
.pi-hero-summary{
font-size:.8rem;
line-height:1.5;
}
.pi-hero-visual{
align-items:center;
justify-content:center;
}
.pi-radar{
width:var(--layout-insights-radar-size) !important;
height:var(--layout-insights-radar-size) !important;
}
.pi-overall-score{
width:100%;
max-width:var(--layout-insights-overall-max-width);
}
.pi-takeaway-grid,
.pi-skill-grid,
.pi-trend-grid,
.pi-mode-grid,
.pi-bottom-grid{
grid-template-columns:1fr !important;
}
.pi-section,
.pi-highlight-card,
.pi-focus-card{
padding:var(--layout-insights-section-padding);
border-radius:var(--layout-insights-card-radius);
}
.pi-section-head{
flex-direction:column;
align-items:flex-start;
gap:8px;
}
.pi-section-tip{
max-width:none !important;
text-align:left;
}
.rewards-hero{
flex-direction:column;
align-items:stretch;
gap:var(--layout-rewards-hero-gap);
padding:var(--layout-rewards-hero-padding);
}
.rewards-balance{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
min-width:0 !important;
max-width:none !important;
width:100%;
}
.rewards-grid{
grid-template-columns:1fr !important;
gap:var(--layout-rewards-grid-gap);
}
.help-grid,
.help-form-grid{
grid-template-columns:1fr !important;
}
.help-contact-actions{
flex-direction:column;
align-items:stretch;
}
.help-contact-actions .help-contact-btn{
width:100%;
min-width:0;
}
.ws-shell{
width:100% !important;
gap:var(--layout-welcome-shell-gap-mobile);
}
.ws-brand-panel,
.ws-auth-card{
padding:var(--layout-welcome-panel-padding-mobile);
border-radius:var(--layout-welcome-panel-radius-mobile);
}
.ws-title{
font-size:1.7rem;
}
.ws-sub{
font-size:.84rem;
line-height:1.46;
margin-bottom:9px;
}
.ws-age-pill{
width:100% !important;
justify-content:center;
text-align:center;
font-size:.68rem;
padding:7px 10px;
margin-bottom:10px;
}
.ws-auth-top{
gap:4px;
}
.ws-panel-head{
margin-bottom:8px;
}
}
@media (max-width:540px){
#app{
padding:8px 8px 0;
}
#main{
padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
.hero-wrap{
padding:var(--layout-home-hero-padding-phone);
}
.hero-title{
font-size:1.34rem;
}
.hero-sub{
font-size:.74rem;
}
.hero-chips{
grid-template-columns:1fr 1fr !important;
}
.hchip{
border-radius:14px;
padding:6px 7px;
}
.profile-tabs{
grid-template-columns:1fr !important;
}
.av-grid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.sbox-grid{
grid-template-columns:1fr !important;
}
.rewards-balance{
grid-template-columns:1fr !important;
}
body.route-scroll-view .rewards-hero .rewards-balance,
body.route-fit-view .rewards-hero .rewards-balance{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:7px !important;
width:100% !important;
}
body.route-scroll-view .rewards-hero .rewards-balance-card,
body.route-fit-view .rewards-hero .rewards-balance-card{
display:grid !important;
grid-template-columns:30px minmax(0,1fr) !important;
align-items:center !important;
gap:7px !important;
min-height:58px !important;
padding:8px 9px !important;
}
body.route-scroll-view .rewards-hero .rewards-balance-card > div,
body.route-fit-view .rewards-hero .rewards-balance-card > div{
min-width:0 !important;
}
body.route-scroll-view .rewards-hero .rewards-balance-icon,
body.route-fit-view .rewards-hero .rewards-balance-icon{
width:30px !important;
height:30px !important;
}
body.route-scroll-view .rewards-hero .rewards-balance-label,
body.route-fit-view .rewards-hero .rewards-balance-label{
font-size:.52rem !important;
line-height:1.08 !important;
letter-spacing:.52px !important;
}
body.route-scroll-view .rewards-hero .rewards-balance-value,
body.route-fit-view .rewards-hero .rewards-balance-value{
font-size:.92rem !important;
margin-top:2px !important;
}
.ws-brand-panel,
.ws-auth-card{
padding:var(--layout-welcome-panel-padding-phone);
}
.ws-title{
font-size:1.52rem;
}
.ws-sub{
font-size:.8rem;
}
.ws-panel-copy,
.ws-auth-copy,
.ws-auth-footer{
font-size:.68rem;
line-height:1.4;
}
}
/* ── MOBILE QA HARDENING PASS ──────────────────────────────────────────────
Keep phone/tablet routes scroll-friendly and prevent decorative layers from
being reported as clipped content. Real content gets more breathing room. */
@media (max-width:1199px){
.hero-wrap,
.mcard,
.rewards-hero,
.prof-hero{
overflow:hidden !important;
}
.mcard-content,
.mcard-text-block,
.rewards-hero-copy,
.prof-hero-body,
.prof-hero-left,
.prof-hero-right{
min-width:0 !important;
}
.mcard{
min-height:auto !important;
}
.mcard-sub,
.mcard-progress-copy,
.rewards-hero-sub,
.prof-hero-sub,
.prof-hero-tagline{
overflow:visible !important;
}
.day-wrap-ov{
align-items:flex-start;
overflow-y:auto !important;
padding:var(--layout-overlay-padding-mobile);
padding-bottom:calc(18px + env(safe-area-inset-bottom));
}
.day-wrap-box{
width:min(100%,460px) !important;
max-height:none !important;
overflow:hidden !important;
margin:auto 0;
}
}
@media (max-width:768px){
.bg-icons{
display:none !important;
}
.hero-wrap{
padding-bottom:104px;
}
.mcard-content{
align-items:flex-start;
}
.mcard-start-btn{
align-self:flex-start;
}
.rewards-hero{
min-height:0 !important;
}
.rewards-hero-sub{
max-width:none !important;
}
.day-wrap-ov{
align-items:flex-start !important;
justify-content:center !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding:10px max(8px,env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right)) !important;
}
.day-wrap-box{
width:100% !important;
max-width:min(430px,calc(100vw - 16px)) !important;
max-height:none !important;
overflow:visible !important;
border-radius:22px;
padding:12px;
margin:0 auto !important;
}
.day-wrap-hero{
border-radius:20px;
padding:12px;
margin-bottom:10px;
}
.day-wrap-hero-main{
align-items:flex-start;
gap:10px;
min-width:0;
}
.day-wrap-hero-copy{
min-width:0;
max-width:100%;
overflow-wrap:anywhere;
}
.day-wrap-hero-icon{
width:48px !important;
height:48px !important;
border-radius:16px;
font-size:1.45rem;
}
.day-wrap-title,
.streak-reward-box .day-wrap-title{
font-size:1.34rem;
line-height:1.12;
margin-bottom:5px;
}
.day-wrap-copy,
.streak-reward-box .day-wrap-copy{
font-size:.82rem;
line-height:1.42;
overflow-wrap:anywhere;
}
.day-wrap-kicker,
.day-wrap-badge{
font-size:.64rem;
padding:6px 9px;
margin-bottom:9px;
max-width:100%;
white-space:normal;
line-height:1.18;
}
.day-wrap-minirow{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:8px;
}
.day-mini-pill{
font-size:.64rem;
padding:5px 8px;
min-width:0;
max-width:100%;
white-space:normal;
}
.day-wrap-forecast,
.streak-reward-box .day-wrap-forecast{
grid-template-columns:1fr !important;
gap:8px;
margin-bottom:10px;
}
.day-wrap-stat,
.streak-reward-box .day-wrap-stat{
min-height:0 !important;
align-items:center;
padding:10px 11px;
border-radius:18px;
}
.day-wrap-stat-ico,
.streak-reward-box .day-wrap-stat-ico{
width:44px !important;
height:44px !important;
border-radius:13px;
font-size:1.4rem;
}
.day-wrap-stat-ico-fire .streak-fire-icon,
.streak-reward-box .day-wrap-stat-ico-fire .streak-fire-icon{
font-size:1.72rem;
}
.day-wrap-stat-ico-coin svg,
.streak-reward-box .day-wrap-stat-ico-coin svg,
.tomorrow-prize-card .day-wrap-stat-ico-coin svg{
width:32px !important;
height:32px !important;
}
.day-wrap-stat strong,
.streak-reward-box .day-wrap-stat strong{
font-size:.92rem;
line-height:1.16;
}
.day-wrap-stat span,
.streak-reward-box .day-wrap-stat span{
font-size:.72rem;
line-height:1.32;
margin-top:2px;
}
.day-wrap-tip,
.streak-reward-box .day-wrap-tip{
font-size:.74rem;
line-height:1.35;
padding:9px 10px;
margin-bottom:10px;
overflow-wrap:anywhere;
}
.day-wrap-btn,
.streak-reward-box .day-wrap-btn{
min-height:44px !important;
padding:11px 14px;
font-size:.88rem;
}
}
@media (max-width:390px){
.mcard{
padding:12px;
}
.mcard-content{
gap:10px;
}
.mcard-icon,
.mcard.active .mcard-icon,
.mcard.challenge .mcard-icon,
.mcard.choice-adventure .mcard-icon{
width:46px !important;
height:46px !important;
}
.mcard-title{
font-size:.86rem;
}
.mcard-sub{
font-size:.66rem;
line-height:1.28;
}
.mcard-progress-copy{
font-size:.54rem;
}
}
/* ── Mobile/tablet nav placement ─────────────────────────────────
Keep navigation grouped instead of leaving one CTA stranded on a new row.
Mobile and tablet/compact use the same structural band below notebook. */
@media (max-width:1199px){
#nav{
display:flex !important;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
row-gap:var(--layout-nav-grid-gap-y);
}
#nav .nav-left{
display:contents !important;
}
#nav .nav-logo{
order:1 !important;
flex:1 1 auto !important;
max-width:none !important;
}
#nav .nav-right{
order:2 !important;
flex:0 0 auto !important;
margin-left:auto;
}
#nav .nav-btn{
order:3 !important;
flex:1 1 calc(33.333% - var(--layout-nav-grid-gap-x)) !important;
min-width:0 !important;
justify-content:center;
}
}
@media (max-width:540px){
#nav .nav-btn{
min-height:var(--layout-nav-button-min-height) !important;
padding:var(--layout-nav-button-padding-mobile);
}
#nav .nav-btn .nav-btn-text{
display:inline-flex !important;
font-size:.58rem;
line-height:1.05;
white-space:normal;
text-align:center;
}
#nav .nav-logo{
font-size:.9rem;
}
}
@media (min-width:1200px) and (max-width:1399px){
#nav{
padding:var(--layout-nav-padding-compact);
gap:var(--layout-nav-gap-compact);
min-height:68px !important;
}
#nav .nav-left{
flex-wrap:nowrap;
gap:var(--layout-nav-gap-compact);
}
#nav .nav-logo{
max-width:var(--layout-nav-logo-max-width-compact) !important;
font-size:.98rem;
}
#nav .nav-logo::before{
width:var(--layout-nav-logo-icon-size-compact) !important;
height:var(--layout-nav-logo-icon-size-compact) !important;
flex-basis:var(--layout-nav-logo-icon-size-compact) !important;
}
#nav .nav-btn{
padding:var(--layout-nav-button-padding-compact);
font-size:.74rem;
min-height:var(--layout-nav-button-min-height-compact) !important;
}
#nav .nav-btn-text{
white-space:nowrap;
}
#nav .nav-right{
gap:8px;
}
#nav .nav-profile{
min-height:42px !important;
padding:6px 10px 6px 6px;
gap:8px;
}
#nav .nav-profile-info{
max-width:126px !important;
}
#nav .nav-name,
#nav .nav-role{
overflow:hidden !important;
text-overflow:ellipsis;
}
}
@media (max-width:1199px){
#nav{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
align-items:center;
column-gap:var(--layout-nav-grid-gap-x);
row-gap:var(--layout-nav-grid-gap-y);
min-height:var(--layout-nav-mobile-min-height) !important;
align-content:center;
}
#nav .nav-left{
display:contents !important;
}
#nav .nav-logo{
grid-column:1 / 3 !important;
grid-row:1 !important;
min-width:var(--layout-nav-logo-min-width-mobile) !important;
max-width:none !important;
}
#nav .nav-right{
grid-column:3 !important;
grid-row:1 !important;
justify-self:end;
width:auto !important;
margin-left:0;
}
#nb-play,
#nb-rewards,
#nb-insights{
grid-row:2 !important;
width:100% !important;
flex:none !important;
}
#nb-play{grid-column:1 !important}
#nb-rewards{grid-column:2 !important}
#nb-insights{grid-column:3 !important}
}
/* Keep the two auth panels visually paired on the notebook split-screen. */
@media (min-width:1200px){
#welcome-splash .ws-shell{
align-items:stretch;
}
#welcome-splash .ws-brand-panel,
#welcome-splash .ws-auth-card{
height:auto !important;
align-self:stretch;
}
}
/* Auth workbook layout: keep the two panels centered and visually connected. */
#welcome-splash:not(.gone){
align-items:center;
justify-content:center;
padding:var(--layout-welcome-splash-padding-book);
}
@media (min-width:768px){
html:has(body #welcome-splash:not(.gone)),
body:has(#welcome-splash:not(.gone)){
height:100dvh !important;
min-height:100dvh !important;
overflow:hidden !important;
}
body:has(#welcome-splash:not(.gone)) #app{
height:100dvh !important;
min-height:100dvh !important;
overflow:hidden !important;
padding-bottom:0 !important;
}
#welcome-splash:not(.gone){
overflow:hidden !important;
}
}
#welcome-splash:not(.gone) .ws-shell{
margin:auto;
width:min(var(--layout-welcome-shell-width-book),100%) !important;
align-items:stretch;
padding:0;
border:none;
border-radius:0;
background:transparent;
box-shadow:none;
filter:drop-shadow(0 28px 70px rgba(45,66,85,0.16));
}
#welcome-splash:not(.gone) .ws-brand-panel,
#welcome-splash:not(.gone) .ws-auth-card{
box-sizing:border-box !important;
border:3px solid rgba(124,92,46,0.32);
box-shadow:
0 18px 48px rgba(15,23,42,0.12),
inset 0 0 0 1px rgba(255,255,255,0.42);
}
#welcome-splash:not(.gone) .ws-brand-panel{
border-radius:var(--layout-welcome-book-radius-left);
border-right-color:rgba(124,92,46,0.18);
}
#welcome-splash:not(.gone) .ws-auth-card{
border-radius:var(--layout-welcome-book-radius-right);
border-left-color:rgba(124,92,46,0.18);
}
@media (min-width:1200px) and (min-height:760px){
#welcome-splash:not(.gone) .ws-shell{
min-height:var(--layout-welcome-panel-min-height) !important;
align-items:stretch !important;
}
#welcome-splash:not(.gone) .ws-brand-panel,
#welcome-splash:not(.gone) .ws-auth-card{
height:auto !important;
min-height:100% !important;
}
}
@media (max-width:960px){
#welcome-splash:not(.gone){
align-items:flex-start;
padding:var(--layout-welcome-splash-padding-mobile);
}
#welcome-splash:not(.gone) .ws-shell::before,
#welcome-splash:not(.gone) .ws-shell::after{
display:none;
}
#welcome-splash:not(.gone) .ws-shell{
padding:0;
filter:drop-shadow(0 18px 42px rgba(45,66,85,0.13));
}
#welcome-splash:not(.gone) .ws-brand-panel,
#welcome-splash:not(.gone) .ws-auth-card{
border-radius:var(--layout-welcome-book-radius-stacked);
border-color:rgba(124,92,46,0.26);
}
}
@media (min-width:961px) and (max-width:1199px) and (orientation:portrait){
#welcome-splash:not(.gone){
align-items:flex-start;
padding:var(--layout-welcome-splash-padding-mobile);
}
#welcome-splash:not(.gone) .ws-shell{
grid-template-columns:1fr;
width:min(var(--layout-welcome-mobile-max-width),100%) !important;
max-width:var(--layout-welcome-mobile-max-width);
margin:auto;
filter:drop-shadow(0 18px 42px rgba(45,66,85,0.13));
}
#welcome-splash:not(.gone) .ws-shell::before,
#welcome-splash:not(.gone) .ws-shell::after{
display:none;
}
#welcome-splash:not(.gone) .ws-brand-panel,
#welcome-splash:not(.gone) .ws-auth-card{
height:auto !important;
min-height:0 !important;
overflow:visible;
border-radius:var(--layout-welcome-book-radius-stacked);
border-color:rgba(124,92,46,0.26);
}
}
@media (min-width:961px) and (max-width:1199px) and (orientation:landscape){
#welcome-splash:not(.gone){
align-items:center;
padding:clamp(14px,3dvh,24px) clamp(16px,2.4vw,24px);
}
#welcome-splash:not(.gone) .ws-shell{
grid-template-columns:repeat(2,minmax(0,1fr));
width:min(var(--layout-welcome-shell-width-book),100%) !important;
max-width:min(1060px,calc(100vw - 32px));
gap:var(--layout-welcome-shell-gap);
align-items:stretch;
margin:auto;
}
#welcome-splash:not(.gone) .ws-brand-panel,
#welcome-splash:not(.gone) .ws-auth-card{
height:auto !important;
min-height:min(620px,calc(100dvh - 48px)) !important;
overflow:hidden;
}
#welcome-splash:not(.gone) .ws-brand-panel{
border-radius:var(--layout-welcome-book-radius-left);
}
#welcome-splash:not(.gone) .ws-auth-card{
border-radius:var(--layout-welcome-book-radius-right);
}
}
/* Tablet shared rule: sign-up follows the notebook book layout reference,
scaled through tablet tokens so the two-page design remains fitted. */
@media (min-width:768px) and (max-width:1199px){
#welcome-splash:not(.gone){
align-items:center !important;
padding:var(--layout-welcome-splash-padding-book) !important;
overflow:hidden !important;
}
#welcome-splash:not(.gone) .ws-shell{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
width:min(var(--layout-welcome-shell-width-book),calc(100vw - 8px)) !important;
max-width:var(--layout-welcome-shell-width-book) !important;
height:min(var(--layout-welcome-panel-height),calc(100dvh - 8px)) !important;
min-height:0 !important;
max-height:min(var(--layout-welcome-panel-height),calc(100dvh - 8px)) !important;
gap:var(--layout-welcome-shell-gap) !important;
align-items:stretch !important;
margin:auto !important;
}
#welcome-splash:not(.gone) .ws-brand-panel,
#welcome-splash:not(.gone) .ws-auth-card{
height:100% !important;
min-height:0 !important;
max-height:100% !important;
overflow:hidden !important;
padding:var(--layout-welcome-panel-padding-tablet-shared) !important;
}
#welcome-splash:not(.gone) .ws-shell::before,
#welcome-splash:not(.gone) .ws-shell::after{
display:block !important;
transform:translateX(-50%) scaleX(.72) !important;
}
#welcome-splash:not(.gone) .ws-brand-panel{
border-radius:var(--layout-welcome-book-radius-left) !important;
}
#welcome-splash:not(.gone) .ws-auth-card{
border-radius:var(--layout-welcome-book-radius-right) !important;
}
#welcome-splash:not(.gone) .ws-kicker{
font-size:.62rem;
margin-bottom:5px;
}
#welcome-splash:not(.gone) .ws-mascot{
width:min(var(--layout-welcome-mascot-width),34%);
margin:0 0 4px;
}
#welcome-splash:not(.gone) .ws-title{
font-size:1.58rem;
margin-bottom:5px;
}
#welcome-splash:not(.gone) .ws-sub{
font-size:.8rem;
line-height:1.32;
margin-bottom:7px;
max-width:none;
}
#welcome-splash:not(.gone) .ws-age-pill{
font-size:.62rem;
padding:5px 9px;
margin-bottom:7px;
}
#welcome-splash:not(.gone) .ws-mode-grid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:var(--layout-welcome-mode-gap) !important;
margin-bottom:7px;
}
#welcome-splash:not(.gone) .ws-mode-card{
min-height:var(--layout-welcome-mode-card-min-height) !important;
padding:var(--layout-welcome-mode-card-padding) !important;
gap:3px;
border-radius:14px;
}
#welcome-splash:not(.gone) .ws-mode-icon{
width:34px;
height:34px;
margin-bottom:0;
}
#welcome-splash:not(.gone) .ws-mode-card strong{
font-size:.68rem;
}
#welcome-splash:not(.gone) .ws-mode-card small{
font-size:.56rem;
line-height:1.25;
}
#welcome-splash:not(.gone) .ws-brand-note{
margin-top:0;
padding:8px 10px;
border-radius:14px;
}
#welcome-splash:not(.gone) .ws-brand-note-title{
font-size:.6rem;
margin-bottom:3px;
}
#welcome-splash:not(.gone) .ws-brand-note-copy{
font-size:.67rem;
line-height:1.32;
}
#welcome-splash:not(.gone) .ws-auth-top{
margin-bottom:6px;
}
#welcome-splash:not(.gone) .ws-auth-badge{
font-size:.6rem;
padding:5px 9px;
margin-bottom:5px;
}
#welcome-splash:not(.gone) .ws-auth-title{
font-size:1.26rem;
margin-bottom:3px;
}
#welcome-splash:not(.gone) .ws-auth-copy{
font-size:.67rem;
line-height:1.32;
}
#welcome-splash:not(.gone) .ws-guest-adventure-btn{
min-height:94px;
padding:12px 10px 10px;
gap:9px;
border-radius:15px;
}
#welcome-splash:not(.gone) .ws-guest-ribbon{
top:-9px;
right:10px;
min-height:20px;
padding:0 8px;
font-size:.48rem;
}
#welcome-splash:not(.gone) .ws-guest-icon{
width:40px;
height:40px;
border-radius:13px;
}
#welcome-splash:not(.gone) .ws-guest-icon img{
width:32px;
height:32px;
}
#welcome-splash:not(.gone) .ws-guest-title{
font-size:.9rem;
}
#welcome-splash:not(.gone) .ws-guest-desc{
font-size:.62rem;
}
#welcome-splash:not(.gone) .ws-guest-note{
padding:6px 8px;
margin-bottom:6px;
}
#welcome-splash:not(.gone) .ws-guest-points{
gap:4px;
margin-bottom:6px;
}
#welcome-splash:not(.gone) .ws-guest-points span{
min-height:20px;
padding:0 7px;
font-size:.5rem;
}
#welcome-splash:not(.gone) .ws-google-btn{
padding:8px 11px;
font-size:.76rem;
}
#welcome-splash:not(.gone) .ws-skip{
margin-top:4px;
margin-bottom:4px;
font-size:.66rem;
}
#welcome-splash:not(.gone) .ws-divider{
margin:3px 0 6px;
font-size:.62rem;
}
#welcome-splash:not(.gone) .ws-panel-head{
margin-bottom:4px;
}
#welcome-splash:not(.gone) .ws-panel-title{
font-size:.94rem;
margin-bottom:2px;
}
#welcome-splash:not(.gone) .ws-panel-copy,
#welcome-splash:not(.gone) .ws-label{
font-size:.64rem;
}
#welcome-splash:not(.gone) .ws-input{
padding:8px 10px;
margin-bottom:5px;
font-size:.82rem;
border-radius:11px;
}
#welcome-splash:not(.gone) .ws-field-grid,
#welcome-splash:not(.gone) .ws-field-grid-password{
gap:6px;
}
#welcome-splash:not(.gone) .ws-trial-note{
padding:5px 9px;
margin-bottom:5px;
font-size:.62rem;
}
#welcome-splash:not(.gone) .ws-consent{
padding:7px 9px;
margin-bottom:6px;
font-size:.62rem;
}
#welcome-splash:not(.gone) .ws-start{
padding:9px 12px;
font-size:.84rem;
border-radius:13px;
}
#welcome-splash:not(.gone) .ws-auth-footer{
margin-top:5px;
padding-top:5px;
font-size:.6rem;
line-height:1.28;
}
}
/* Compact landscape welcome rule: keeps auth/sign-up fitted for short tablet
landscape and small-laptop browser heights such as 932 x 430. */
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (max-height:500px){
:root{
--layout-welcome-shell-width-book:var(--layout-welcome-shell-width-compact-landscape);
--layout-welcome-shell-gap:var(--layout-welcome-shell-gap-compact-landscape);
--layout-welcome-splash-padding-book:var(--layout-welcome-splash-padding-compact-landscape);
--layout-welcome-panel-height:var(--layout-welcome-panel-height-compact-landscape);
--layout-welcome-panel-min-height:var(--layout-welcome-panel-height-compact-landscape);
--layout-welcome-brand-padding:var(--layout-welcome-panel-padding-compact-landscape);
--layout-welcome-auth-padding:var(--layout-welcome-panel-padding-compact-landscape);
--layout-welcome-mascot-width:var(--layout-welcome-mascot-width-compact-landscape);
--layout-welcome-mode-gap:var(--layout-welcome-mode-gap-compact-landscape);
--layout-welcome-mode-card-padding:var(--layout-welcome-mode-card-padding-compact-landscape);
--layout-welcome-mode-card-min-height:var(--layout-welcome-mode-card-min-height-compact-landscape);
--layout-welcome-input-padding:var(--layout-welcome-input-padding-compact-landscape);
--layout-welcome-field-gap:var(--layout-welcome-field-gap-compact-landscape);
--layout-welcome-button-padding:var(--layout-welcome-button-padding-compact-landscape);
}
#welcome-splash:not(.gone){
padding:var(--layout-welcome-splash-padding-book) !important;
align-items:center !important;
overflow:hidden !important;
}
#welcome-splash:not(.gone) .ws-shell{
width:min(var(--layout-welcome-shell-width-book),calc(100vw - 16px)) !important;
height:var(--layout-welcome-panel-height) !important;
min-height:0 !important;
max-height:var(--layout-welcome-panel-height) !important;
gap:var(--layout-welcome-shell-gap) !important;
}
#welcome-splash:not(.gone) .ws-brand-panel,
#welcome-splash:not(.gone) .ws-auth-card{
height:100% !important;
min-height:0 !important;
max-height:100% !important;
padding:var(--layout-welcome-panel-padding-compact-landscape) !important;
}
#welcome-splash:not(.gone) .ws-brand-panel{
justify-content:center;
}
#welcome-splash:not(.gone) .ws-kicker{
font-size:.5rem;
line-height:1;
margin-bottom:3px;
}
#welcome-splash:not(.gone) .ws-mascot{
width:min(var(--layout-welcome-mascot-width),29%);
margin:0 0 2px;
}
#welcome-splash:not(.gone) .ws-title{
font-size:1.22rem;
line-height:1;
margin-bottom:2px;
}
#welcome-splash:not(.gone) .ws-sub{
font-size:.58rem;
line-height:1.16;
margin-bottom:4px;
}
#welcome-splash:not(.gone) .ws-age-pill{
font-size:.5rem;
line-height:1.05;
padding:3px 7px;
margin-bottom:4px;
}
#welcome-splash:not(.gone) .ws-mode-grid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:var(--layout-welcome-mode-gap) !important;
margin-bottom:4px;
}
#welcome-splash:not(.gone) .ws-mode-card{
min-height:var(--layout-welcome-mode-card-min-height) !important;
padding:var(--layout-welcome-mode-card-padding) !important;
gap:1px;
border-radius:11px;
}
#welcome-splash:not(.gone) .ws-mode-icon{
width:24px;
height:24px;
margin-bottom:0;
}
#welcome-splash:not(.gone) .ws-mode-card strong{
font-size:.48rem;
line-height:1.08;
}
#welcome-splash:not(.gone) .ws-mode-card small{
font-size:.42rem;
line-height:1.08;
}
#welcome-splash:not(.gone) .ws-brand-note{
margin-top:0;
padding:5px 7px;
border-radius:11px;
}
#welcome-splash:not(.gone) .ws-brand-note-title{
font-size:.45rem;
margin-bottom:1px;
}
#welcome-splash:not(.gone) .ws-brand-note-copy{
font-size:.46rem;
line-height:1.1;
}
#welcome-splash:not(.gone) .ws-auth-card{
gap:0;
justify-content:center;
}
#welcome-splash:not(.gone) #ws-panel-signin,
#welcome-splash:not(.gone) #ws-panel-signup{
flex:0 0 auto;
}
#welcome-splash:not(.gone) .ws-auth-top{
margin-bottom:3px;
}
#welcome-splash:not(.gone) .ws-auth-badge{
display:none;
}
#welcome-splash:not(.gone) .ws-auth-title{
font-size:1.04rem;
line-height:1;
margin-bottom:2px;
}
#welcome-splash:not(.gone) .ws-auth-copy{
font-size:.57rem;
line-height:1.12;
}
#welcome-splash:not(.gone) .ws-guest-adventure-btn{
min-height:0;
padding:7px;
gap:7px;
margin-bottom:3px;
border-radius:12px;
}
#welcome-splash:not(.gone) .ws-guest-ribbon{
display:none;
}
#welcome-splash:not(.gone) .ws-guest-icon{
width:30px;
height:30px;
border-radius:10px;
}
#welcome-splash:not(.gone) .ws-guest-icon img{
width:24px;
height:24px;
}
#welcome-splash:not(.gone) .ws-guest-eyebrow,
#welcome-splash:not(.gone) .ws-guest-desc,
#welcome-splash:not(.gone) .ws-guest-points,
#welcome-splash:not(.gone) .ws-guest-note{
display:none;
}
#welcome-splash:not(.gone) .ws-guest-title{
font-size:.72rem;
}
#welcome-splash:not(.gone) .ws-guest-action{
border-radius:9px;
min-height:28px;
padding:0 7px;
font-size:.56rem;
}
#welcome-splash:not(.gone) .ws-google-btn{
padding:6px 10px;
font-size:.68rem;
border-radius:10px;
}
#welcome-splash:not(.gone) .ws-skip{
margin-top:2px;
margin-bottom:2px;
font-size:.56rem;
line-height:1.1;
}
#welcome-splash:not(.gone) .ws-divider{
margin:2px 0 4px;
font-size:.52rem;
line-height:1;
}
#welcome-splash:not(.gone) .ws-panel-head{
margin-bottom:3px;
}
#welcome-splash:not(.gone) .ws-panel-title{
font-size:.78rem;
line-height:1.04;
margin-bottom:1px;
}
#welcome-splash:not(.gone) .ws-panel-copy{
display:none;
}
#welcome-splash:not(.gone) .ws-label{
font-size:.54rem;
line-height:1.05;
margin-bottom:2px;
}
#welcome-splash:not(.gone) .ws-input{
padding:var(--layout-welcome-input-padding) !important;
margin-bottom:3px;
font-size:.68rem;
line-height:1.15;
border-radius:9px;
}
#welcome-splash:not(.gone) .ws-field-grid,
#welcome-splash:not(.gone) .ws-field-grid-password{
gap:var(--layout-welcome-field-gap) !important;
}
#welcome-splash:not(.gone) .ws-trial-note{
display:none;
}
#welcome-splash:not(.gone) .ws-consent{
padding:4px 6px;
margin-bottom:4px;
font-size:.52rem;
line-height:1.14;
border-radius:9px;
}
#welcome-splash:not(.gone) .ws-start{
min-height:30px;
padding:var(--layout-welcome-button-padding) !important;
font-size:.7rem;
line-height:1.05;
border-radius:10px;
}
}
/* Route-level scroll modes.
Fit-view routes like Home, Help, and Reward Shop should not feel scrollable
on full-size tablet/desktop screens. Small/mobile screens still scroll when
stacked content genuinely needs more vertical room. */
@media (min-width:769px) and (min-height:700px){
body.route-play-view,
body.route-play-view #app{
height:100vh !important;
height:100svh !important;
height:100dvh !important;
min-height:100vh !important;
min-height:100svh !important;
min-height:100dvh !important;
overflow:hidden !important;
}
#main.main-play-view{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
overflow:hidden !important;
overscroll-behavior:none !important;
padding-bottom:0;
}
body.route-fit-view,
body.route-fit-view #app{
height:100vh !important;
height:100svh !important;
height:100dvh !important;
min-height:100vh !important;
min-height:100svh !important;
min-height:100dvh !important;
overflow:hidden !important;
}
#main.main-fit-view,
#main.main-fit-view:has(.home-dashboard),
#main.main-fit-view:has(.profile-screen--help),
#main.main-fit-view:has(.rewards-screen){
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
overflow:hidden !important;
overscroll-behavior:none !important;
padding-bottom:0;
}
#main.main-fit-view .home-dashboard,
#main.main-fit-view .rewards-screen,
#main.main-fit-view .profile-screen--help{
height:calc(100% - 2px) !important;
max-height:calc(100% - 2px) !important;
overflow:hidden !important;
}
}
/* MCQ and Cause Effect: use a narrower, aligned question/answer column. */
.sc-grid.sc-grid--solo:not(.sc-grid--challenge):has(.sc-main--type-mcq),
.sc-grid.sc-grid--solo:not(.sc-grid--challenge):has(.sc-main--type-cause-effect){
width:min(100%,var(--layout-story-solo-max-width)) !important;
max-width:var(--layout-story-solo-max-width) !important;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-mcq .sc-top,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-cause-effect .sc-top,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-mcq > .choices--dialogue,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-cause-effect > .choices--dialogue{
max-width:var(--layout-story-content-max-width) !important;
width:100% !important;
margin-left:auto;
margin-right:auto;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-mcq .sc-q-glass,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-cause-effect .sc-q-glass{
display:flex !important;
flex-direction:column;
align-items:center;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-mcq .sc-q-glass .sc-name,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-cause-effect .sc-q-glass .sc-name{
width:min(100%,var(--layout-story-title-max-width)) !important;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-mcq .sc-q-glass .sc-body,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-cause-effect .sc-q-glass .sc-body{
width:min(100%,var(--layout-story-body-max-width)) !important;
max-width:var(--layout-story-body-max-width) !important;
margin-left:auto;
margin-right:auto;
text-align:center;
text-wrap:balance;
}
/* Match Quest and Step Quest: center and balance the question wording too. */
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-sequence .sc-top,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-match .sc-top{
max-width:var(--layout-story-content-max-width) !important;
width:100% !important;
margin-left:auto;
margin-right:auto;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-sequence .sc-q-glass,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-match .sc-q-glass,
body.route-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main.screen.sc-main--match.sc-main--type-match .sc-q-glass{
display:flex !important;
flex-direction:column;
align-items:center;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-sequence .sc-q-glass .sc-name,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-match .sc-q-glass .sc-name,
body.route-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main.screen.sc-main--match.sc-main--type-match .sc-q-glass .sc-name{
width:min(100%,var(--layout-story-title-max-width)) !important;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-sequence .sc-q-glass .sc-body,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main--type-match .sc-q-glass .sc-body,
body.route-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-main.screen.sc-main--match.sc-main--type-match .sc-q-glass .sc-body{
width:min(100%,var(--layout-story-body-max-width)) !important;
max-width:var(--layout-story-body-max-width) !important;
margin-left:auto;
margin-right:auto;
text-align:center;
text-wrap:balance;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass > .sc-diff{
position:absolute;
top:max(7px,calc(var(--story-card-pad) * .58));
z-index:2;
margin:0 !important;
line-height:1;
white-space:nowrap;
pointer-events:none;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass > .sc-diff{
left:max(9px,calc(var(--story-card-pad) * .78));
text-transform:none;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass > .sc-mode-pill{
left:auto;
right:max(9px,calc(var(--story-card-pad) * .78));
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass .sc-name{
margin-bottom:clamp(24px,3.2vh,34px);
}
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-match-column--answers{
gap:var(--story-variant-column-gap);
justify-content:flex-start;
}
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-match-column--answers .choices--match{
gap:var(--story-variant-action-gap);
margin-top:0;
}
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-match-column--answers .sc-sequence-actions{
margin-top:0;
gap:var(--story-variant-action-gap);
}
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-match-progress{
line-height:1;
}
/* Story feedback card icon and reward stat icons: large, unconditional override. */
.play-result.play-result--story .lc-verdict-ico,
.play-result.play-result--sequence .lc-verdict-ico,
.play-result.play-result--match .lc-verdict-ico{
width:102px !important;
height:102px !important;
min-width:102px !important;
border-radius:0;
font-size:3rem;
background:transparent;
box-shadow:none;
}
.play-result.play-result--story .lesson-card-header,
.play-result.play-result--sequence .lesson-card-header,
.play-result.play-result--match .lesson-card-header{
gap:14px;
align-items:center;
}
.play-result.play-result--story .result-points-pill svg,
.play-result.play-result--story .result-points-pill img,
.play-result.play-result--sequence .result-points-pill svg,
.play-result.play-result--sequence .result-points-pill img,
.play-result.play-result--match .result-points-pill svg,
.play-result.play-result--match .result-points-pill img{
width:44px !important;
height:44px !important;
min-width:44px !important;
object-fit:contain;
}
.play-result.play-result--story .result-points-pill,
.play-result.play-result--sequence .result-points-pill,
.play-result.play-result--match .result-points-pill{
gap:8px;
min-height:52px !important;
}
/* Story feedback icons: visible transparent artwork. */
.card.screen.play-result.play-result--story .res-icon-wrap,
.card.screen.play-result.play-result--sequence .res-icon-wrap,
.card.screen.play-result.play-result--match .res-icon-wrap{
width:var(--layout-result-icon-size) !important;
height:var(--layout-result-icon-size) !important;
min-width:var(--layout-result-icon-size) !important;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
}
.card.screen.play-result.play-result--story .res-icon-wrap .scenario-icon-img,
.card.screen.play-result.play-result--sequence .res-icon-wrap .scenario-icon-img,
.card.screen.play-result.play-result--match .res-icon-wrap .scenario-icon-img{
width:var(--layout-result-icon-size) !important;
height:var(--layout-result-icon-size) !important;
max-width:none !important;
max-height:none !important;
object-fit:contain;
}
.card.screen.play-result.play-result--story .lc-verdict-ico,
.card.screen.play-result.play-result--sequence .lc-verdict-ico,
.card.screen.play-result.play-result--match .lc-verdict-ico{
width:var(--layout-result-icon-size) !important;
height:var(--layout-result-icon-size) !important;
min-width:var(--layout-result-icon-size) !important;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
font-size:4rem;
}
/* Result title spacing: keep "Try Again" away from the feedback lesson card. */
.card.screen.play-result.play-result--story .res-title,
.card.screen.play-result.play-result--sequence .res-title,
.card.screen.play-result.play-result--match .res-title{
margin-bottom:10px;
}
/* Story play category icons: let the transparent PNG artwork stand on its own. */
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-icon-ring{
background:transparent;
box-shadow:none;
border:0;
}
/* Choice Quest lobby/result: compact fit-view screens with no page scroll. */
@media (min-width:769px) and (min-height:700px){
body:has(#main .choiceadventure-lobby-screen),
body:has(#main .choiceadventure-lobby-screen) #app,
body:has(#main .choiceadventure-result-screen),
body:has(#main .choiceadventure-result-screen) #app{
height:100vh !important;
height:100svh !important;
height:100dvh !important;
min-height:100vh !important;
min-height:100svh !important;
min-height:100dvh !important;
overflow:hidden !important;
}
#main:has(.choiceadventure-lobby-screen),
#main:has(.choiceadventure-result-screen){
overflow:hidden !important;
padding-bottom:0;
}
.choiceadventure-lobby-screen,
.choiceadventure-result-screen{
height:auto !important;
max-height:none !important;
min-height:0 !important;
overflow:visible !important;
gap:var(--layout-choice-adventure-fit-gap);
}
.choiceadventure-lobby-screen .ca-lobby-banner,
.choiceadventure-result-screen .ca-lobby-banner{
padding:var(--layout-choice-adventure-fit-banner-padding);
min-height:0 !important;
}
.choiceadventure-lobby-screen .lobby-banner-title,
.choiceadventure-result-screen .lobby-banner-title{
font-size:clamp(1.08rem,1.7vw,1.35rem);
line-height:1.05;
}
.choiceadventure-lobby-screen .lobby-banner-sub,
.choiceadventure-result-screen .lobby-banner-sub{
font-size:.7rem;
line-height:1.18;
}
.choiceadventure-lobby-screen .lobby-banner-icon,
.choiceadventure-result-screen .lobby-banner-icon{
font-size:2.1rem;
}
.choiceadventure-result-screen .ca-lobby-banner{
padding:5px 8px;
gap:7px;
}
.choiceadventure-result-screen .lobby-banner-title{
font-size:.9rem;
line-height:1.02;
}
.choiceadventure-result-screen .lobby-banner-sub{
font-size:.56rem;
line-height:1.1;
}
.choiceadventure-result-screen .lobby-banner-icon{
font-size:1.28rem;
width:32px;
height:32px;
flex-basis:32px;
border-radius:10px;
}
.choiceadventure-lobby-screen .choiceadventure-cards,
.choiceadventure-result-screen .choiceadventure-cards{
flex:0 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:visible !important;
}
.choiceadventure-lobby-screen .choiceadventure-cards{
gap:var(--layout-choice-adventure-fit-card-gap);
}
.choiceadventure-result-screen .choiceadventure-cards{
flex:0 0 auto !important;
height:auto !important;
max-height:none !important;
align-self:center;
width:100% !important;
}
.choiceadventure-lobby-screen .ch-info-card,
.choiceadventure-lobby-screen .ch-action-card{
min-height:0 !important;
overflow:visible !important;
padding:var(--layout-choice-adventure-fit-card-padding);
gap:var(--layout-choice-adventure-fit-card-gap);
}
.choiceadventure-lobby-screen .story-progress-card,
.choiceadventure-lobby-screen .choiceadventure-brief-card,
.choiceadventure-lobby-screen .choiceadventure-mission-card{
padding:8px 9px;
}
.choiceadventure-lobby-screen .choiceadventure-flow-list{
gap:6px;
}
.choiceadventure-lobby-screen .choiceadventure-flow-step{
padding:7px 8px;
gap:8px;
}
.choiceadventure-lobby-screen .choiceadventure-flow-icon{
width:42px !important;
height:42px !important;
flex:0 0 42px !important;
font-size:1.2rem;
}
.choiceadventure-lobby-screen .choiceadventure-flow-copy strong,
.choiceadventure-lobby-screen .choiceadventure-mission-scene strong{
font-size:.82rem;
line-height:1.12;
}
.choiceadventure-lobby-screen .choiceadventure-flow-copy span,
.choiceadventure-lobby-screen .choiceadventure-brief-copy,
.choiceadventure-lobby-screen .choiceadventure-mission-scene span{
font-size:.66rem;
line-height:1.16;
}
.choiceadventure-lobby-screen .ca-actions .ca-btn{
min-height:38px !important;
padding:var(--layout-choice-adventure-fit-button-padding);
}
.choiceadventure-result-screen .choiceadventure-result-main-card{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
gap:var(--layout-choice-adventure-fit-gap);
padding:8px 10px;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight,
.choiceadventure-result-screen .choiceadventure-brief-card{
padding:7px 9px;
}
.choiceadventure-result-screen .choiceadventure-result-step-grid{
gap:4px;
}
.choiceadventure-result-screen .choiceadventure-result-step-card{
padding:6px 7px;
gap:3px;
}
.choiceadventure-result-screen .choiceadventure-result-storybeats{
gap:4px;
}
.choiceadventure-result-screen .choiceadventure-story-chip,
.choiceadventure-result-screen .choiceadventure-story-tipline{
padding:4px 6px;
font-size:.66rem;
line-height:1.14;
}
.choiceadventure-result-screen .ca-actions .ca-btn{
min-height:38px !important;
padding:8px 10px;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-grid{
gap:5px;
}
.choiceadventure-result-screen .choiceadventure-reward-mini{
gap:5px;
padding:4px 6px;
border-radius:14px;
min-height:0 !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon{
width:24px !important;
height:24px !important;
flex:0 0 24px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon svg,
.choiceadventure-result-screen .choiceadventure-reward-mini-icon img{
width:18px !important;
height:18px !important;
min-width:18px !important;
min-height:18px !important;
}
}
@media (max-width: 700px){
.choiceadventure-result-screen .choiceadventure-reward-mini{
flex-direction:column;
text-align:center;
}
}
/* Match Quest: shrink outer and inner shells to the CTA instead of filling the viewport. */
body.route-play-view:has(#main.main-play-view .sc-main--match) #main.main-play-view .sc-grid.sc-grid--solo:has(.sc-main--match){
height:auto !important;
max-height:none !important;
align-self:center;
}
body.route-play-view:has(#main.main-play-view .sc-main--match) #main.main-play-view .sc-grid.sc-grid--solo .sc-main.screen.sc-main--match{
height:auto !important;
max-height:none !important;
grid-template-rows:auto auto auto !important;
align-content:start;
padding-bottom:var(--layout-play-tight-gap);
}
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match > .sc-sequence-card.sc-main--match{
height:auto !important;
max-height:none !important;
grid-template-rows:auto auto !important;
gap:var(--layout-play-tight-gap);
padding-bottom:4px;
}
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-match-card-head{
display:flex !important;
align-items:center;
gap:var(--layout-match-gap);
min-width:0 !important;
}
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-match-card-head .sc-sequence-label{
flex:0 0 auto !important;
margin-bottom:0;
}
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-match-card-head .sc-match-section-label{
flex:0 0 auto !important;
margin:0 0 0 auto !important;
white-space:nowrap;
}
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-sequence-help--inline{
flex:1 1 auto !important;
min-width:0 !important;
margin:0;
line-height:1.1;
white-space:nowrap;
overflow:hidden !important;
text-overflow:ellipsis;
text-align:left;
}
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-match-playfield{
height:auto !important;
max-height:none !important;
min-height:0 !important;
gap:var(--story-variant-column-gap);
}
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match > .go-btn{
margin-top:1px;
}
@media (max-width: 520px){
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-match-card-head{
align-items:flex-start;
gap:6px;
}
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-sequence-help--inline{
white-space:normal;
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
}
}
/* Step + Match Quest: let the top question panel use the full inner shell width. */
body.route-play-view:has(#main.main-play-view .sc-main--match) #main.main-play-view .sc-grid.sc-grid--solo:has(.sc-main--match){
width:min(100%,var(--layout-story-wide-solo-max-width)) !important;
max-width:var(--layout-story-wide-solo-max-width) !important;
margin-left:auto;
margin-right:auto;
padding:var(--layout-story-wide-solo-padding);
}
body.route-play-view:has(#main.main-play-view .sc-main--sequence) .sc-main.screen.sc-main--sequence,
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match{
padding-left:var(--layout-play-tight-padding-x);
padding-right:var(--layout-play-tight-padding-x);
}
/* Step + Match Quest visual skin: shared richer game board treatment. */
body.route-play-view:has(#main.main-play-view .sc-main--sequence) #main.main-play-view .sc-main--sequence .sc-sequence-card,
body.route-play-view:has(#main.main-play-view .sc-main--match) #main.main-play-view .sc-main--match > .sc-sequence-card.sc-main--match{
border-color:rgba(251,191,36,0.55) !important;
background:
linear-gradient(90deg,rgba(37,99,235,0.05) 1px,transparent 1px),
linear-gradient(0deg,rgba(37,99,235,0.04) 1px,transparent 1px),
var(--tone-quest-panel) !important;
background-size:18px 18px,18px 18px,auto !important;
box-shadow:var(--layout-quest-card-shadow) !important;
}
body.route-play-view:has(#main.main-play-view .sc-main--sequence) #main.main-play-view .sc-main--sequence .sc-sequence-label,
body.route-play-view:has(#main.main-play-view .sc-main--match) #main.main-play-view .sc-main--match .sc-sequence-label{
color:#7C2D12 !important;
background:linear-gradient(135deg,#FDE68A,#FFFBEB) !important;
border-color:rgba(245,158,11,0.36) !important;
}
body.route-play-view:has(#main.main-play-view .sc-main--sequence) #main.main-play-view .sc-main--sequence .sc-match-section-label,
body.route-play-view:has(#main.main-play-view .sc-main--match) #main.main-play-view .sc-main--match .sc-match-section-label{
color:#075985 !important;
background:linear-gradient(135deg,#FFFFFF,#E0F2FE) !important;
border-color:rgba(14,165,233,0.28) !important;
}
body.route-play-view:has(#main.main-play-view .sc-main--sequence) #main.main-play-view .sc-main--sequence .sc-sequence-slot:nth-child(1),
body.route-play-view:has(#main.main-play-view .sc-main--match) #main.main-play-view .sc-main--match .sc-match-target:nth-child(1){
background:var(--tone-quest-card-blue) !important;
}
body.route-play-view:has(#main.main-play-view .sc-main--sequence) #main.main-play-view .sc-main--sequence .sc-sequence-slot:nth-child(2),
body.route-play-view:has(#main.main-play-view .sc-main--match) #main.main-play-view .sc-main--match .sc-match-target:nth-child(2){
background:var(--tone-quest-card-green) !important;
}
body.route-play-view:has(#main.main-play-view .sc-main--sequence) #main.main-play-view .sc-main--sequence .sc-sequence-slot:nth-child(3),
body.route-play-view:has(#main.main-play-view .sc-main--match) #main.main-play-view .sc-main--match .sc-match-target:nth-child(3){
background:var(--tone-quest-card-orange) !important;
}
body.route-play-view:has(#main.main-play-view .sc-main--sequence) .sc-main.screen.sc-main--sequence{
padding-bottom:4px;
}
body.route-play-view:has(#main.main-play-view .sc-main--sequence) .sc-main.screen.sc-main--sequence .sc-top,
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-top{
width:100% !important;
max-width:none !important;
align-self:stretch;
box-sizing:border-box !important;
padding-left:var(--layout-play-tight-padding-x);
padding-right:var(--layout-play-tight-padding-x);
}
body.route-play-view:has(#main.main-play-view .sc-main--sequence) .sc-main.screen.sc-main--sequence .sc-q-glass,
body.route-play-view:has(#main.main-play-view .sc-main--match) .sc-main.screen.sc-main--match .sc-q-glass{
width:100% !important;
max-width:none !important;
box-sizing:border-box !important;
}
/* Story feedback: shrink the outer shell to end near the Next Story CTA. */
body.route-play-view:has(#main.main-play-view .play-result.play-result--story) #main.main-play-view,
body.route-play-view:has(#main.main-play-view .play-result.play-result--sequence) #main.main-play-view,
body.route-play-view:has(#main.main-play-view .play-result.play-result--match) #main.main-play-view{
display:flex !important;
align-items:flex-start !important;
justify-content:center;
overflow:hidden !important;
padding-bottom:0;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match{
height:auto !important;
min-height:0 !important;
max-height:none !important;
align-self:flex-start !important;
justify-content:flex-start;
padding:10px 12px 8px;
margin-top:0;
margin-left:auto !important;
margin-right:auto !important;
margin-bottom:0;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .res-center,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .res-center,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .res-center{
min-height:0 !important;
height:auto !important;
max-height:none !important;
margin-left:auto !important;
margin-right:auto !important;
gap:5px;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .res-continue-btn,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .res-continue-btn,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .res-continue-btn{
margin-top:2px;
margin-bottom:0;
}
/* Story feedback: final fit-screen sizing so the full box is visible without scroll. */
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match{
max-height:calc(100dvh - 104px) !important;
overflow:hidden !important;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .res-center,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .res-center,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .res-center{
gap:4px;
overflow:hidden !important;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .res-icon-wrap,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .res-icon-wrap,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .res-icon-wrap,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .res-icon-wrap .scenario-icon-img,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .res-icon-wrap .scenario-icon-img,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .res-icon-wrap .scenario-icon-img{
width:clamp(78px,12dvh,112px) !important;
height:clamp(78px,12dvh,112px) !important;
min-width:clamp(78px,12dvh,112px) !important;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .res-title,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .res-title,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .res-title{
margin-bottom:4px;
font-size:clamp(.92rem,2dvh,1.08rem);
line-height:1.05;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .lesson-card,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .lesson-card,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .lesson-card{
margin-bottom:0;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .lesson-card-header,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .lesson-card-header,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .lesson-card-header{
padding:7px 9px;
gap:8px;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .lc-verdict-ico,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .lc-verdict-ico,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .lc-verdict-ico{
width:clamp(58px,8dvh,88px) !important;
height:clamp(58px,8dvh,88px) !important;
min-width:clamp(58px,8dvh,88px) !important;
font-size:clamp(1.8rem,4dvh,3rem);
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .lesson-card-body,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .lesson-card-body,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .lesson-card-body{
padding:7px 8px;
gap:4px;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .lc-section,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .lc-section,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .lc-section{
padding:5px 7px;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .lc-section-copy,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .lc-section-copy,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .lc-section-copy,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .lc-step-text,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .lc-step-text,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .lc-step-text{
font-size:clamp(.68rem,1.55dvh,.76rem);
line-height:1.12;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .challenge-finish-points--result,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .challenge-finish-points--result,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .challenge-finish-points--result{
padding:5px 7px;
margin-bottom:0;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .result-points-pill,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .result-points-pill,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .result-points-pill{
min-height:38px !important;
padding:3px 7px 3px 5px;
gap:3px !important;
font-size:.64rem;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .result-points-pill svg,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .result-points-pill img,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .result-points-pill svg,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .result-points-pill img,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .result-points-pill svg,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .result-points-pill img{
width:40px !important;
height:40px !important;
min-width:40px !important;
flex:0 0 40px !important;
margin:0 !important;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .res-continue-btn,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .res-continue-btn,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .res-continue-btn{
min-height:36px !important;
padding:7px 10px;
font-size:.78rem;
}
@media (max-height: 680px){
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match{
padding:7px 9px 6px;
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .res-icon-wrap,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .res-icon-wrap,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .res-icon-wrap,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .res-icon-wrap .scenario-icon-img,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .res-icon-wrap .scenario-icon-img,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .res-icon-wrap .scenario-icon-img{
width:72px !important;
height:72px !important;
min-width:72px !important;
}
}
/* Mobile and short-height routes scroll instead of clipping CTAs. */
@media (max-width:768px), (max-height:699px){
body.route-play-view,
body.route-play-view #app,
body:has(#main .choiceadventure-lobby-screen),
body:has(#main .choiceadventure-lobby-screen) #app,
body:has(#main .choiceadventure-round-screen),
body:has(#main .choiceadventure-round-screen) #app,
body:has(#main .choiceadventure-result-screen),
body:has(#main .choiceadventure-result-screen) #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
#main.main-play-view,
body.route-play-view:has(#main.main-play-view .sc-main--sequence) #main.main-play-view,
body.route-play-view:has(#main.main-play-view .sc-main--match) #main.main-play-view,
body.route-play-view:has(#main.main-play-view .play-result.play-result--story) #main.main-play-view,
body.route-play-view:has(#main.main-play-view .play-result.play-result--sequence) #main.main-play-view,
body.route-play-view:has(#main.main-play-view .play-result.play-result--match) #main.main-play-view,
#main:has(.choiceadventure-lobby-screen),
#main:has(.choiceadventure-round-screen),
#main:has(.choiceadventure-result-screen){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:visible !important;
padding-bottom:var(--layout-route-main-mobile-padding);
}
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--story .res-center,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--sequence .res-center,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--match .res-center{
max-height:none !important;
overflow:visible !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo,
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo .sc-main,
body.route-play-view #main.main-play-view .sc-main--sequence,
body.route-play-view #main.main-play-view .sc-main--match,
body.route-play-view #main.main-play-view .sc-sequence-card,
body.route-play-view #main.main-play-view .sc-sequence-playfield,
body.route-play-view #main.main-play-view .sc-match-playfield,
body.route-play-view #main.main-play-view .play-result,
.choiceadventure-lobby-screen,
.choiceadventure-result-screen,
.choiceadventure-lobby-screen .choiceadventure-cards,
.choiceadventure-result-screen .choiceadventure-cards,
.choiceadventure-lobby-screen .ch-info-card,
.choiceadventure-lobby-screen .ch-action-card,
.choiceadventure-result-screen .choiceadventure-result-main-card{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
.choiceadventure-lobby-screen .choiceadventure-mission-top{
flex-wrap:wrap;
justify-content:flex-start;
}
.choiceadventure-lobby-screen .choiceadventure-mission-top span{
min-width:0;
max-width:100%;
}
.choiceadventure-lobby-screen .choiceadventure-reward-list{
display:grid !important;
grid-template-columns:1fr;
width:100%;
}
.choiceadventure-lobby-screen .choiceadventure-reward-chip{
width:100%;
min-width:0;
justify-content:flex-start;
}
}
/* Canonical responsive polish: viewport bands use width + height + orientation.
Named devices are test targets only; these rules keep tablet/mobile shells aligned. */
@media (max-width:1199px), (max-height:699px){
html,
body{
min-height:100%;
overflow-x:hidden !important;
overflow-y:auto !important;
}
body{
min-height:100dvh;
background-attachment:scroll;
}
#app{
min-height:100dvh;
height:auto !important;
max-height:none !important;
overflow:visible !important;
padding-bottom:calc(18px + env(safe-area-inset-bottom));
}
#main{
min-height:0;
max-width:100%;
overflow-x:hidden !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch;
}
.screen.home-dashboard,
.hero-wrap,
.mcard{
overflow:hidden !important;
}
.hero-wrap::before{
right:0;
}
.hero-wrap::after{
right:12px;
}
.mcard::after{
right:0;
bottom:0;
}
}
@media (min-width:769px) and (min-height:700px){
html:has(body.route-play-view #main.main-play-view .sc-main--sequence),
html:has(body.route-play-view #main.main-play-view .sc-main--match),
body.route-play-view:has(#main.main-play-view .sc-main--sequence),
body.route-play-view:has(#main.main-play-view .sc-main--match),
body.route-play-view:has(#main.main-play-view .sc-main--sequence) #app,
body.route-play-view:has(#main.main-play-view .sc-main--match) #app{
height:100vh !important;
height:100svh !important;
height:100dvh !important;
min-height:100vh !important;
min-height:100svh !important;
min-height:100dvh !important;
max-height:100vh !important;
max-height:100svh !important;
max-height:100dvh !important;
overflow:hidden !important;
padding-bottom:0 !important;
}
body.route-play-view:has(#main.main-play-view .sc-main--sequence) #main.main-play-view,
body.route-play-view:has(#main.main-play-view .sc-main--match) #main.main-play-view{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:hidden !important;
padding-bottom:0 !important;
overscroll-behavior:none !important;
}
}
@media (max-width:767px){
.home-dashboard{
display:block !important;
}
.mode-row{
grid-template-columns:1fr !important;
grid-auto-rows:auto !important;
gap:var(--layout-home-mode-gap-mobile) !important;
}
.mcard{
width:100%;
min-height:88px !important;
max-height:none !important;
height:auto !important;
flex-direction:row;
align-items:center;
justify-content:flex-start;
padding:var(--layout-home-card-padding-mobile);
}
.mcard-content{
flex-direction:row;
align-items:center;
justify-content:flex-start;
text-align:left;
gap:var(--layout-home-card-content-gap-mobile);
padding:0;
min-width:0;
}
.mcard-icon{
width:var(--layout-home-card-icon-size-mobile) !important;
height:var(--layout-home-card-icon-size-mobile) !important;
flex:0 0 var(--layout-home-card-icon-size-mobile);
margin:0;
}
.mcard-text-block{
align-items:flex-start;
text-align:left;
min-width:0;
}
.mcard-title,
.mcard-sub,
.mcard-progress-copy{
text-align:left;
}
.mcard .mcard-start-btn{
min-width:var(--layout-home-card-button-min-width-mobile);
padding:var(--layout-home-card-button-padding-mobile);
}
.mcard::after{
display:none;
}
.choiceadventure-lobby-screen .choiceadventure-cards,
.choiceadventure-round-screen .choiceadventure-cards,
.choiceadventure-result-screen .choiceadventure-cards{
grid-template-columns:1fr !important;
}
.choiceadventure-shell .ch-info-card,
.choiceadventure-shell .ch-action-card{
width:100%;
min-width:0 !important;
}
.choiceadventure-shell .ca-actions{
grid-template-columns:1fr !important;
}
.local-question-watermark{
max-width:calc(100% - 20px);
}
}
@media (min-width:520px) and (max-width:767px) and (orientation:landscape),
(min-width:768px) and (max-width:1199px) and (orientation:landscape) and (max-height:500px){
:root{
--layout-device-note-display:var(--layout-device-note-display-mobile-shared);
--layout-device-note-margin:6px 0 0;
--layout-device-note-padding:6px 9px;
--layout-device-note-border:var(--layout-device-note-border-mobile-shared);
--layout-device-note-radius:12px;
--layout-device-note-bg:var(--layout-device-note-bg-mobile-shared);
--layout-device-note-shadow:var(--layout-device-note-shadow-mobile-shared);
--layout-device-note-font-size:clamp(.58rem,1.2vw,.68rem);
}
#app{
padding:8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
gap:8px !important;
}
#nav{
display:flex !important;
grid-template-columns:none !important;
flex-wrap:nowrap !important;
align-items:center !important;
padding:8px 12px !important;
gap:8px !important;
min-height:0 !important;
}
#nav .nav-left{
display:flex !important;
flex-wrap:nowrap !important;
gap:8px !important;
flex:1 1 auto !important;
min-width:0 !important;
}
#nav .nav-logo{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:0 1 136px !important;
max-width:150px !important;
font-size:.9rem !important;
}
#nav .nav-logo::before{
width:var(--layout-nav-logo-icon-size-mobile) !important;
height:var(--layout-nav-logo-icon-size-mobile) !important;
flex-basis:var(--layout-nav-logo-icon-size-mobile) !important;
}
#nav .nav-btn{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
width:auto !important;
flex:0 1 auto !important;
min-height:36px !important;
padding:var(--layout-nav-button-padding-mobile) !important;
font-size:.7rem !important;
}
#nav .nav-btn .nav-btn-text{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
white-space:normal !important;
text-align:center !important;
line-height:1.05 !important;
}
#nav .nav-right{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
justify-self:auto !important;
width:auto !important;
margin-left:auto !important;
gap:6px !important;
}
.icon-btn{
width:34px !important;
height:34px !important;
}
.nav-profile{
min-height:36px !important;
padding:4px 7px 4px 5px !important;
}
#nav .nav-profile-info{
display:none !important;
}
.nav-av{
width:28px !important;
height:28px !important;
}
.home-dashboard{
display:grid !important;
grid-template-columns:var(--layout-home-dashboard-columns-compact-landscape) !important;
gap:var(--layout-home-dashboard-gap-compact-landscape) !important;
align-items:start !important;
}
.hero-wrap{
min-height:0 !important;
padding:10px clamp(108px,18vw,132px) 9px 12px !important;
}
.hero-title{
font-size:clamp(1.28rem,2.5vw,1.6rem) !important;
margin-bottom:4px !important;
}
.hero-sub{
font-size:clamp(.55rem,1vw,.68rem) !important;
line-height:1.28 !important;
margin-bottom:6px !important;
}
.hero-chips-label{
margin:9px 0 3px !important;
font-size:clamp(.46rem,.82vw,.52rem) !important;
}
.hero-title,
.hero-sub,
.hero-chips-label{
width:auto !important;
max-width:calc(100% - clamp(104px,17vw,128px)) !important;
}
.hero-chips{
max-width:calc(100% - clamp(104px,17vw,128px)) !important;
}
.hero-chips{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:4px !important;
}
.hchip{
padding:3px 5px !important;
font-size:clamp(.52rem,.9vw,.66rem) !important;
border-radius:10px !important;
}
.hchip svg,
.hchip img{
width:var(--layout-home-chip-icon-size-compact-landscape) !important;
height:var(--layout-home-chip-icon-size-compact-landscape) !important;
}
.hchip-lbl{
font-size:clamp(.38rem,.68vw,.46rem) !important;
line-height:1.05 !important;
white-space:nowrap !important;
}
.hero-mascot{
width:clamp(104px,17vw,128px) !important;
height:auto !important;
right:8px !important;
bottom:6px !important;
}
.mode-row{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
grid-auto-rows:minmax(var(--layout-home-mode-row-height-compact-landscape),auto) !important;
gap:6px !important;
margin-top:6px !important;
}
.mcard{
min-height:var(--layout-home-mode-row-height-compact-landscape) !important;
height:auto !important;
flex-direction:column !important;
justify-content:center !important;
padding:7px !important;
}
.mcard-content{
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
gap:3px !important;
}
.mcard-text-block{
align-items:center !important;
text-align:center !important;
}
.mcard-title,
.mcard-sub,
.mcard-progress-copy{
text-align:center !important;
}
.mcard.active .mcard-icon,
.mcard.challenge .mcard-icon,
.mcard.choice-adventure .mcard-icon{
width:var(--layout-home-card-icon-size-compact-landscape) !important;
height:var(--layout-home-card-icon-size-compact-landscape) !important;
margin:0 !important;
padding:5px !important;
}
.mcard-title{
font-size:var(--layout-home-card-title-font-compact-landscape) !important;
}
.mcard-sub{
font-size:var(--layout-home-card-sub-font-compact-landscape) !important;
line-height:1.14 !important;
}
.mcard .prog-bar{
height:5px !important;
margin:1px 0 !important;
}
.mcard-progress-copy{
font-size:clamp(.38rem,.68vw,.47rem) !important;
}
.mcard .mcard-start-btn{
min-width:74px !important;
padding:4px 8px !important;
min-height:var(--layout-home-card-button-min-height-compact-landscape) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:var(--layout-home-card-button-font-compact-landscape) !important;
line-height:1 !important;
margin-top:3px !important;
}
.info-cards-row,
.home-side{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:var(--layout-home-info-gap) !important;
}
.info-cards-row{
height:clamp(140px,38dvh,156px) !important;
margin:6px 0 0 !important;
}
.info-card{
height:100% !important;
padding:6px 7px !important;
border-radius:14px !important;
}
.info-card-hdr{
font-size:.58rem !important;
margin-bottom:2px !important;
padding-bottom:5px !important;
}
.hiw-item{
gap:4px !important;
margin-bottom:3px !important;
}
.hiw-badge{
width:var(--layout-home-info-badge-size-compact-landscape) !important;
height:var(--layout-home-info-badge-size-compact-landscape) !important;
border-radius:7px !important;
font-size:.62rem !important;
}
.hiw-item-title{
font-size:clamp(.52rem,.85vw,.58rem) !important;
line-height:1.1 !important;
}
.hiw-item-desc{
font-size:clamp(.43rem,.68vw,.5rem) !important;
line-height:1.1 !important;
}
.home-side{
display:flex !important;
flex-direction:column !important;
gap:6px !important;
margin-top:0 !important;
min-width:0 !important;
}
.home-side .card,
.home-side .panel{
padding:7px 8px !important;
border-radius:14px !important;
}
.home-daily-card{
min-height:var(--layout-home-daily-min-height-compact-landscape) !important;
padding:8px 9px !important;
}
.home-daily-list{
gap:5px !important;
}
.home-daily-item{
padding:6px 7px !important;
border-radius:12px !important;
gap:4px !important;
}
.home-daily-head{
gap:6px !important;
}
.home-daily-note{
font-size:.54rem !important;
}
.home-daily-icon{
width:22px !important;
height:22px !important;
border-radius:8px !important;
font-size:.76rem !important;
}
.home-daily-label{
font-size:.64rem !important;
}
.home-daily-value{
font-size:.58rem !important;
padding:2px 6px !important;
}
.home-daily-track{
height:6px !important;
}
.home-daily-bonus{
min-height:20px !important;
padding:3px 6px !important;
font-size:.56rem !important;
}
.home-daily-badge{
min-height:20px !important;
padding:3px 6px !important;
gap:5px !important;
font-size:.56rem !important;
}
.home-daily-bonus-ico{
font-size:.78rem !important;
}
.home-daily-bonus-text{
font-size:.58rem !important;
}
.home-daily-badge-ico{
font-size:.76rem !important;
}
.home-daily-badge-text{
font-size:.58rem !important;
}
.home-promo-card{
flex:0 0 var(--layout-home-promo-height-compact-landscape) !important;
min-height:var(--layout-home-promo-height-compact-landscape) !important;
}
.home-promo-card .prog-lbl{
font-size:.52rem !important;
padding:2px 6px !important;
}
.role-journey-box{
padding:6px 7px !important;
margin-bottom:3px !important;
gap:5px !important;
min-height:clamp(112px,30dvh,122px) !important;
}
.role-journey-glow img,
.role-journey-glow svg,
.role-journey-item img,
.role-journey-item svg{
width:var(--layout-home-rail-role-icon-size-compact-landscape) !important;
height:var(--layout-home-rail-role-icon-size-compact-landscape) !important;
}
.role-journey-arrow{
width:var(--layout-home-rail-arrow-size-compact-landscape) !important;
height:var(--layout-home-rail-arrow-size-compact-landscape) !important;
font-size:clamp(1rem,2.8vw,1.16rem) !important;
}
.role-journey-name,
.plbl,
.pnums{
font-size:.5rem !important;
}
.prow{
padding:1px 2px !important;
gap:3px !important;
}
.pem,
.pem img,
.pem svg{
width:var(--layout-home-rail-progress-icon-size-compact-landscape) !important;
height:var(--layout-home-rail-progress-icon-size-compact-landscape) !important;
}
.home-progress-card .streak-inline{
margin-top:5px !important;
gap:4px !important;
}
.home-progress-card .streak-chip{
padding:4px 7px !important;
font-size:.58rem !important;
}
.home-progress-card .streak-sub{
font-size:.5rem !important;
line-height:1.1 !important;
}
}
@media (min-width:700px) and (max-width:767px) and (orientation:portrait) and (min-height:900px),
(min-width:768px) and (max-width:1199px) and (orientation:portrait) and (min-height:600px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--right-panel-role-journey-min-height:90px;
--right-panel-promo-stat-row-height:42px;
}
.home-dashboard{
display:block !important;
}
.home-main,
.home-side{
height:auto !important;
}
.home-main{
gap:8px !important;
}
.hero-wrap{
min-height:0 !important;
padding:10px 16px !important;
padding-right:176px !important;
}
.hero-title{
font-size:1.76rem !important;
margin-bottom:3px !important;
}
.hero-sub{
font-size:.72rem !important;
line-height:1.35 !important;
margin-bottom:7px !important;
}
.hero-chips-label{
margin:8px 0 3px !important;
font-size:.58rem !important;
}
.hero-chips{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:6px !important;
max-width:calc(100% - 180px) !important;
}
.hchip{
min-width:50px !important;
padding:5px 8px !important;
font-size:.74rem !important;
border-radius:14px !important;
}
.hchip svg,
.hchip img{
width:28px !important;
height:28px !important;
}
.hero-title,
.hero-sub,
.hero-chips-label{
max-width:calc(100% - 180px) !important;
}
.hchip-lbl{
font-size:.48rem !important;
letter-spacing:.28px !important;
}
.hero-mascot{
width:166px !important;
height:auto !important;
right:12px !important;
bottom:0 !important;
}
.mode-row{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
grid-auto-rows:minmax(150px,auto) !important;
gap:8px !important;
margin:0 !important;
}
.mcard{
min-height:150px !important;
max-height:none !important;
height:auto !important;
flex-direction:column;
justify-content:center;
padding:10px !important;
}
.mcard-content{
flex-direction:column;
text-align:center;
align-items:center;
justify-content:center;
gap:5px !important;
padding:4px !important;
}
.mcard-text-block{
align-items:center;
text-align:center;
gap:2px !important;
}
.mcard.active .mcard-icon,
.mcard.challenge .mcard-icon,
.mcard.choice-adventure .mcard-icon{
width:50px !important;
height:50px !important;
padding:5px !important;
border-radius:16px !important;
}
.mcard-title{
font-size:.84rem !important;
line-height:1.12 !important;
margin:0 !important;
}
.mcard-sub{
font-size:.58rem !important;
line-height:1.25 !important;
margin:0 !important;
}
.mcard .prog-bar{
width:88% !important;
height:6px !important;
margin:2px 0 !important;
}
.mcard-progress-copy{
font-size:.52rem !important;
margin:1px 0 0 !important;
}
.mcard .mcard-start-btn{
min-width:88px !important;
padding:5px 10px !important;
font-size:.64rem !important;
margin-top:4px !important;
}
.info-cards-row{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 !important;
}
.info-card{
padding:var(--layout-home-info-card-padding-tablet) !important;
border-radius:16px !important;
}
.info-card-hdr{
font-size:.7rem !important;
margin-bottom:3px !important;
}
.hiw-item{
gap:7px !important;
margin-bottom:5px !important;
}
.hiw-badge{
width:var(--layout-home-info-badge-size-landscape) !important;
height:var(--layout-home-info-badge-size-landscape) !important;
border-radius:8px !important;
font-size:.82rem !important;
}
.hiw-item-title{
font-size:.65rem !important;
line-height:1.15 !important;
}
.hiw-item-desc{
font-size:.55rem !important;
line-height:1.24 !important;
margin-top:1px !important;
}
.home-side{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
margin-top:8px !important;
}
.home-side > *{
min-width:0 !important;
}
.home-side .card,
.home-side .panel{
padding:9px 10px !important;
border-radius:16px !important;
}
.home-promo-card{
grid-row:span 2;
}
.role-journey-box{
padding:7px 9px !important;
margin-bottom:6px !important;
gap:8px !important;
}
.role-journey-glow img,
.role-journey-glow svg,
.role-journey-item img,
.role-journey-item svg{
width:var(--layout-home-rail-role-icon-size-landscape) !important;
height:var(--layout-home-rail-role-icon-size-landscape) !important;
}
.role-journey-name{
font-size:.62rem !important;
}
.prow{
padding:1px 4px !important;
margin-bottom:1px !important;
gap:5px !important;
}
.pem,
.pem img,
.pem svg{
width:var(--layout-home-rail-progress-icon-size-landscape) !important;
height:var(--layout-home-rail-progress-icon-size-landscape) !important;
}
.plbl,
.pnums{
font-size:.62rem !important;
}
.home-progress-card,
.home-streak-card{
min-height:0 !important;
}
.home-progress-card .prog-row{
margin-bottom:5px !important;
}
.home-streak-card .streak-fire-icon{
font-size:var(--layout-home-streak-fire-size-landscape) !important;
}
.home-streak-card .streak-card-title{
font-size:var(--layout-home-streak-title-font-landscape) !important;
}
.home-streak-card .streak-card-count{
font-size:var(--layout-home-streak-count-font-landscape) !important;
}
.home-progress-note,
.home-progress-card .streak-sub{
font-size:.58rem !important;
line-height:1.25 !important;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (min-height:501px){
.home-dashboard{
display:grid !important;
grid-template-columns:var(--layout-home-dashboard-columns-landscape) !important;
gap:var(--layout-home-dashboard-gap) !important;
align-items:stretch !important;
}
.home-main,
.home-side{
height:auto !important;
}
.home-side{
display:flex !important;
flex-direction:column !important;
gap:7px !important;
margin-top:0 !important;
}
.home-side .card{
height:auto;
padding:10px 12px !important;
}
.home-daily-card{
min-height:0 !important;
height:auto !important;
}
.home-daily-list{
gap:6px !important;
}
.home-daily-item{
padding:7px 9px !important;
}
.home-daily-head{
gap:7px !important;
}
.home-daily-icon{
width:24px !important;
height:24px !important;
font-size:.84rem !important;
}
.home-daily-label{
font-size:.68rem !important;
}
.home-daily-note{
font-size:.58rem !important;
}
.home-daily-value{
font-size:.62rem !important;
padding:3px 7px !important;
}
.home-daily-bonus{
font-size:.58rem !important;
}
.home-daily-badge{
font-size:.58rem !important;
}
.home-daily-bonus-ico{
font-size:.82rem !important;
}
.home-daily-bonus-text{
font-size:.62rem !important;
}
.home-daily-badge-ico{
font-size:.8rem !important;
}
.home-daily-badge-text{
font-size:.62rem !important;
}
.home-promo-card{
flex:0 0 var(--layout-home-promo-height-landscape) !important;
min-height:var(--layout-home-promo-height-landscape) !important;
}
.home-streak-card{
flex:0 0 var(--layout-home-streak-height-landscape) !important;
min-height:var(--layout-home-streak-height-landscape) !important;
}
.home-progress-card--story{
flex:0 0 var(--layout-home-story-progress-height-landscape) !important;
min-height:var(--layout-home-story-progress-height-landscape) !important;
}
.home-progress-card--challenge{
flex:0 0 var(--layout-home-challenge-progress-height-landscape) !important;
min-height:var(--layout-home-challenge-progress-height-landscape) !important;
}
.home-promo-card .prog-lbl{
font-size:.66rem !important;
padding:3px 8px !important;
}
.role-journey-box{
padding:8px 10px !important;
margin-bottom:7px !important;
}
.role-journey-glow img,
.role-journey-glow svg,
.role-journey-item img,
.role-journey-item svg{
width:var(--layout-home-rail-role-icon-size-landscape) !important;
height:var(--layout-home-rail-role-icon-size-landscape) !important;
}
.prow{
padding:2px 4px !important;
margin-bottom:1px !important;
}
.pem,
.pem img,
.pem svg{
width:var(--layout-home-rail-progress-icon-size-landscape) !important;
height:var(--layout-home-rail-progress-icon-size-landscape) !important;
}
.home-streak-card .streak-fire-icon{
font-size:var(--layout-home-streak-fire-size-landscape) !important;
}
.home-streak-card .streak-card-title{
font-size:var(--layout-home-streak-title-font-landscape) !important;
}
.home-streak-card .streak-card-count{
font-size:var(--layout-home-streak-count-font-landscape) !important;
}
.plbl,
.pnums{
font-size:.64rem !important;
}
.home-progress-card .streak-inline{
margin-top:5px !important;
gap:6px !important;
}
.home-progress-card .streak-chip{
padding:4px 9px !important;
font-size:.66rem !important;
}
.home-progress-card .streak-sub{
font-size:.56rem !important;
line-height:1.2 !important;
}
.hero-wrap{
flex:.85 1 0 !important;
min-height:0 !important;
padding:20px 24px 8px;
padding-right:260px;
}
.hero-title{
font-size:clamp(1.72rem,2vw,1.82rem);
}
.hero-sub{
font-size:.78rem;
line-height:1.36;
margin-bottom:8px;
}
.hero-chips-label{
margin:16px 0 3px !important;
font-size:.58rem !important;
}
.hero-chips{
display:grid !important;
grid-template-columns:repeat(4,92px) !important;
width:max-content !important;
max-width:100% !important;
gap:5px !important;
}
.hchip{
width:92px !important;
min-width:92px !important;
padding:4px 8px !important;
font-size:.68rem !important;
border-radius:12px !important;
}
.hchip svg,
.hchip img{
width:var(--layout-home-chip-icon-size-landscape) !important;
height:var(--layout-home-chip-icon-size-landscape) !important;
}
.hchip-lbl{
font-size:.48rem !important;
line-height:1.05 !important;
letter-spacing:.2px !important;
white-space:nowrap !important;
}
.hero-mascot{
width:clamp(200px,18vw,220px);
height:auto;
bottom:0 !important;
}
.mode-row{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:var(--layout-home-mode-gap) !important;
}
.mcard{
padding:clamp(14px,1.45vw,20px) !important;
}
.mcard-content{
justify-content:center !important;
gap:clamp(3px,.45vw,5px) !important;
padding:clamp(6px,.85vw,10px) !important;
}
.mcard-text-block{
height:auto !important;
justify-content:center !important;
gap:2px !important;
}
.mcard.active .mcard-icon,
.mcard.challenge .mcard-icon,
.mcard.choice-adventure .mcard-icon{
width:var(--layout-home-card-icon-size-landscape) !important;
height:var(--layout-home-card-icon-size-landscape) !important;
padding:6px !important;
}
.mcard-title{
font-size:var(--layout-home-card-title-font-landscape) !important;
white-space:nowrap !important;
}
.mcard-sub{
font-size:var(--layout-home-card-sub-font-landscape) !important;
line-height:1.22 !important;
min-height:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.mcard .prog-bar{
height:6px !important;
margin:1px 0 !important;
}
.mcard-progress-copy{
font-size:var(--layout-home-card-progress-font-landscape) !important;
min-height:1.15em !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:1px 0 0 !important;
}
.mcard .mcard-start-btn{
padding:var(--layout-home-card-button-padding-landscape) !important;
min-height:var(--layout-home-card-button-min-height-landscape) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:var(--layout-home-card-button-font-landscape) !important;
line-height:1 !important;
margin-top:3px !important;
}
.info-card{
padding:10px 11px !important;
}
.info-card-hdr{
font-size:clamp(.68rem,.9vw,.82rem) !important;
margin-bottom:3px !important;
}
.hiw-item{
gap:6px !important;
margin-bottom:4px !important;
}
.hiw-badge{
width:var(--layout-home-info-badge-size-landscape) !important;
height:var(--layout-home-info-badge-size-landscape) !important;
font-size:.72rem !important;
}
.hiw-item-title{
font-size:clamp(.62rem,.84vw,.73rem) !important;
}
.hiw-item-desc{
font-size:clamp(.52rem,.72vw,.62rem) !important;
line-height:1.18 !important;
}
.sc-grid{
height:auto !important;
max-height:none !important;
overflow:visible !important;
}
.sc-grid.sc-grid--solo,
.sc-grid:has(.ch-fullscreen){
max-width:1120px;
margin-left:auto;
margin-right:auto;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (min-height:501px){
#app{
padding:8px 20px calc(8px + env(safe-area-inset-bottom)) !important;
gap:8px !important;
}
#nav{
display:flex !important;
grid-template-columns:none !important;
min-height:0 !important;
padding:var(--layout-nav-landscape-padding) !important;
gap:8px !important;
flex-wrap:nowrap !important;
align-items:center !important;
}
#nav .nav-left{
display:flex !important;
flex-wrap:nowrap !important;
gap:8px !important;
flex:1 1 auto !important;
min-width:0 !important;
}
#nav .nav-logo{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:0 0 var(--layout-nav-logo-max-width-landscape) !important;
min-width:var(--layout-nav-logo-max-width-landscape) !important;
max-width:var(--layout-nav-logo-max-width-landscape) !important;
font-size:clamp(.92rem,1.1vw,.98rem) !important;
}
#nav .nav-logo::before{
width:var(--layout-nav-logo-icon-size-landscape) !important;
height:var(--layout-nav-logo-icon-size-landscape) !important;
flex-basis:var(--layout-nav-logo-icon-size-landscape) !important;
}
#nav .nav-btn{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
width:auto !important;
flex:1 1 0 !important;
min-width:0 !important;
min-height:var(--layout-nav-button-min-height-landscape) !important;
padding:6px 8px !important;
font-size:.74rem !important;
justify-content:center !important;
}
#nav .nav-right{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
justify-self:auto !important;
width:auto !important;
margin-left:auto !important;
gap:6px !important;
}
.icon-btn{
width:40px !important;
height:40px !important;
font-size:1rem !important;
}
.nav-profile{
min-height:42px !important;
padding:6px 9px 6px 6px !important;
gap:6px !important;
}
.nav-av{
width:32px !important;
height:32px !important;
}
.nav-name{
font-size:.78rem !important;
}
.nav-role{
font-size:.6rem !important;
}
.home-dashboard{
gap:var(--layout-home-dashboard-gap) !important;
grid-template-columns:var(--layout-home-dashboard-columns-landscape) !important;
}
.hero-wrap{
padding:clamp(18px,2.15vw,24px) clamp(18px,2.25vw,24px) clamp(8px,1.25vw,14px) clamp(18px,2.25vw,24px) !important;
padding-right:clamp(212px,22vw,260px) !important;
min-height:var(--layout-home-hero-height-landscape) !important;
}
.hero-title{
font-size:clamp(1.72rem,2.55vw,2rem) !important;
margin-bottom:6px !important;
}
.hero-sub{
font-size:clamp(.72rem,1.05vw,.84rem) !important;
line-height:1.4 !important;
margin-bottom:8px !important;
}
.hero-title,
.hero-sub,
.hero-chips-label{
width:clamp(300px,39vw,470px) !important;
max-width:none !important;
}
.hero-chips{
max-width:clamp(300px,39vw,430px) !important;
}
.hero-chips-label{
margin:16px 0 3px !important;
font-size:.54rem !important;
}
.hero-chips{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:clamp(5px,.7vw,8px) !important;
width:clamp(300px,39vw,430px) !important;
max-width:clamp(300px,39vw,430px) !important;
}
.hchip{
width:auto !important;
min-width:0 !important;
padding:4px 8px !important;
font-size:.68rem !important;
border-radius:12px !important;
}
.hchip svg,
.hchip img{
width:var(--layout-home-chip-icon-size-landscape) !important;
height:var(--layout-home-chip-icon-size-landscape) !important;
}
.hchip-lbl{
font-size:.48rem !important;
letter-spacing:.2px !important;
line-height:1.05 !important;
white-space:nowrap !important;
}
.hero-mascot{
width:clamp(200px,22vw,260px) !important;
right:10px !important;
bottom:10px !important;
}
.mode-row{
gap:clamp(8px,1.2vw,12px) !important;
}
.mcard{
padding:clamp(12px,1.45vw,16px) !important;
}
.mcard-content{
justify-content:center !important;
gap:clamp(3px,.45vw,5px) !important;
padding:clamp(5px,.8vw,8px) !important;
}
.mcard-text-block{
height:auto !important;
justify-content:center !important;
gap:2px !important;
}
.mcard.active .mcard-icon,
.mcard.challenge .mcard-icon,
.mcard.choice-adventure .mcard-icon{
width:var(--layout-home-card-icon-size-landscape) !important;
height:var(--layout-home-card-icon-size-landscape) !important;
padding:5px !important;
}
.mcard-title{
font-size:var(--layout-home-card-title-font-landscape) !important;
white-space:nowrap !important;
}
.mcard-sub{
font-size:var(--layout-home-card-sub-font-landscape) !important;
line-height:1.16 !important;
min-height:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.mcard .prog-bar{
height:5px !important;
}
.mcard-progress-copy{
font-size:var(--layout-home-card-progress-font-landscape) !important;
min-height:1.15em !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.mcard .mcard-start-btn{
padding:var(--layout-home-card-button-padding-landscape) !important;
min-height:var(--layout-home-card-button-min-height-landscape) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:var(--layout-home-card-button-font-landscape) !important;
line-height:1 !important;
}
.info-card{
padding:9px 10px !important;
}
.info-card-hdr{
font-size:clamp(.64rem,.9vw,.76rem) !important;
}
.hiw-item{
gap:5px !important;
margin-bottom:3px !important;
}
.hiw-badge{
width:var(--layout-home-info-badge-size-landscape) !important;
height:var(--layout-home-info-badge-size-landscape) !important;
font-size:.66rem !important;
}
.hiw-item-title{
font-size:clamp(.58rem,.84vw,.68rem) !important;
}
.hiw-item-desc{
font-size:clamp(.49rem,.72vw,.58rem) !important;
line-height:1.14 !important;
}
.home-side{
gap:5px !important;
}
.home-side .card{
padding:9px 10px !important;
}
.home-promo-card .prog-lbl{
font-size:.6rem !important;
}
.role-journey-box{
padding:6px 8px !important;
margin-bottom:5px !important;
}
.role-journey-glow img,
.role-journey-glow svg,
.role-journey-item img,
.role-journey-item svg{
width:var(--layout-home-rail-role-icon-size-landscape) !important;
height:var(--layout-home-rail-role-icon-size-landscape) !important;
}
.role-journey-name,
.plbl,
.pnums{
font-size:.56rem !important;
}
.prow{
padding:1px 3px !important;
gap:4px !important;
}
.pem,
.pem img,
.pem svg{
width:var(--layout-home-rail-progress-icon-size-landscape) !important;
height:var(--layout-home-rail-progress-icon-size-landscape) !important;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (min-height:501px){
#nav{
display:flex !important;
grid-template-columns:none !important;
min-height:0 !important;
padding:var(--layout-nav-landscape-padding) !important;
gap:8px !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:space-between !important;
}
#nav .nav-left{
display:flex !important;
flex:1 1 auto !important;
flex-wrap:nowrap !important;
gap:8px !important;
min-width:0 !important;
}
#nav .nav-logo{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:0 0 var(--layout-nav-logo-max-width-landscape) !important;
min-width:var(--layout-nav-logo-max-width-landscape) !important;
max-width:var(--layout-nav-logo-max-width-landscape) !important;
font-size:clamp(.92rem,1.1vw,.98rem) !important;
}
#nav .nav-logo::before{
width:var(--layout-nav-logo-icon-size-landscape) !important;
height:var(--layout-nav-logo-icon-size-landscape) !important;
flex-basis:var(--layout-nav-logo-icon-size-landscape) !important;
}
#nav .nav-btn{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:0 1 clamp(108px,13vw,148px) !important;
width:auto !important;
min-width:0 !important;
min-height:var(--layout-nav-button-min-height-landscape) !important;
padding:6px 10px !important;
font-size:clamp(.66rem,.82vw,.74rem) !important;
justify-content:center !important;
}
#nav .nav-btn .nav-btn-text{
display:inline-flex !important;
min-width:0 !important;
overflow:visible !important;
text-overflow:clip !important;
white-space:normal !important;
text-align:center !important;
line-height:1.05 !important;
}
#nav .nav-right{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
justify-self:auto !important;
width:auto !important;
margin-left:auto !important;
gap:6px !important;
flex:0 0 auto !important;
}
}
@media (min-width:768px) and (max-width:1199px){
body.route-fit-view:has(#main .home-dashboard),
body.route-fit-view:has(#main .home-dashboard) #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
box-sizing:border-box !important;
padding-bottom:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
#main.main-fit-view:has(.home-dashboard){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
padding-bottom:0 !important;
}
#main.main-fit-view .home-dashboard{
height:auto !important;
max-height:none !important;
overflow:visible !important;
}
html:has(body.route-fit-view #main .profile-screen--help),
body.route-fit-view:has(#main .profile-screen--help),
body.route-fit-view:has(#main .profile-screen--help) #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
#main.main-fit-view:has(.profile-screen--help){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important;
}
#main.main-fit-view .profile-screen--help{
height:auto !important;
max-height:none !important;
overflow:visible !important;
}
body:has(#main .choiceadventure-round-screen),
body:has(#main .choiceadventure-round-screen) #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
#main:has(.choiceadventure-round-screen){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.choiceadventure-round-screen,
.choiceadventure-round-screen .choiceadventure-cards{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
body:has(#main .choiceadventure-result-screen),
body:has(#main .choiceadventure-result-screen) #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
#main:has(.choiceadventure-result-screen){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding-bottom:calc(28px + env(safe-area-inset-bottom));
}
.choiceadventure-result-screen,
.choiceadventure-result-screen .choiceadventure-cards,
.choiceadventure-result-screen .choiceadventure-result-main-card{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
.choiceadventure-result-screen .choiceadventure-result-main-card{
align-self:stretch;
}
.choiceadventure-result-screen .ca-actions{
position:relative;
z-index:2;
}
}
@media (min-width:1200px) and (min-height:760px){
body.route-fit-view:has(#main .home-dashboard),
body.route-fit-view:has(#main .home-dashboard) #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
box-sizing:border-box !important;
padding-bottom:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
#main.main-fit-view:has(.home-dashboard){
display:flex !important;
flex-direction:column !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
padding-bottom:0 !important;
}
#main.main-fit-view .home-dashboard{
flex:0 0 auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
#main.main-fit-view .home-main,
#main.main-fit-view .home-side{
height:auto !important;
min-height:0 !important;
overflow:visible !important;
}
body.route-fit-view:has(#main .profile-screen--help),
body.route-fit-view:has(#main .profile-screen--help) #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
#main.main-fit-view:has(.profile-screen--help){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important;
}
#main.main-fit-view .profile-screen--help{
height:auto !important;
max-height:none !important;
overflow:visible !important;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (min-height:501px){
body.route-fit-view:has(#main .home-dashboard) #app{
padding-bottom:4px !important;
}
#main.main-fit-view:has(.home-dashboard){
display:flex !important;
flex-direction:column !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding-bottom:calc(4px + env(safe-area-inset-bottom)) !important;
}
#main.main-fit-view .home-dashboard{
flex:0 0 auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
#main.main-fit-view .home-main{
display:flex !important;
flex-direction:column !important;
height:auto !important;
min-height:0 !important;
gap:0 !important;
}
#main.main-fit-view .home-side{
height:auto !important;
min-height:0 !important;
overflow:visible !important;
}
#main.main-fit-view .hero-wrap{
flex:0 0 var(--layout-home-hero-height-landscape) !important;
}
#main.main-fit-view .info-cards-row{
flex:0 0 calc(var(--layout-home-info-row-height-landscape) - var(--layout-home-info-row-top-inset)) !important;
min-height:0 !important;
height:calc(var(--layout-home-info-row-height-landscape) - var(--layout-home-info-row-top-inset)) !important;
}
#main.main-fit-view .mode-row{
flex:0 0 var(--layout-home-mode-row-height-landscape) !important;
min-height:0 !important;
grid-auto-rows:1fr !important;
margin-top:8px !important;
}
#main.main-fit-view .mcard{
height:100% !important;
min-height:0 !important;
max-height:none !important;
}
#main.main-fit-view .info-cards-row{
margin:var(--layout-home-info-row-top-inset) 0 0 !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:var(--layout-home-info-gap) !important;
}
#main.main-fit-view .info-card-hiw{
grid-column:auto !important;
}
#main.main-fit-view .info-card-skills{
grid-column:auto !important;
}
#main.main-fit-view .info-card{
height:100% !important;
display:flex !important;
flex-direction:column !important;
}
#main.main-fit-view .info-card .hiw-item{
flex:0 0 auto !important;
align-items:flex-start !important;
margin-bottom:5px !important;
}
#main.main-fit-view .info-card-skills .hiw-item{
align-items:flex-start !important;
}
#main.main-fit-view .info-card-skills .hiw-badge{
width:var(--layout-home-info-badge-size-landscape) !important;
height:var(--layout-home-info-badge-size-landscape) !important;
font-size:.6rem !important;
}
#main.main-fit-view .info-card-skills .hiw-item-title{
font-size:.55rem !important;
}
#main.main-fit-view .info-card-skills .hiw-item-desc{
font-size:.45rem !important;
line-height:1.1 !important;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (min-height:501px){
#main.main-fit-view .info-cards-row{
flex:0 0 calc(clamp(138px,18dvh,152px) - var(--layout-home-info-row-top-inset)) !important;
height:calc(clamp(138px,18dvh,152px) - var(--layout-home-info-row-top-inset)) !important;
}
#main.main-fit-view .info-card{
padding:6px 10px !important;
}
#main.main-fit-view .info-card-hdr{
font-size:.86rem !important;
margin-bottom:3px !important;
}
#main.main-fit-view .hiw-item{
gap:5px !important;
margin-bottom:3px !important;
}
#main.main-fit-view .info-card .hiw-item,
#main.main-fit-view .info-card-skills .hiw-item{
margin-bottom:3px !important;
}
#main.main-fit-view .hiw-badge,
#main.main-fit-view .info-card-skills .hiw-badge{
width:28px !important;
height:28px !important;
border-radius:7px !important;
font-size:.84rem !important;
}
#main.main-fit-view .hiw-item-title,
#main.main-fit-view .info-card-skills .hiw-item-title{
font-size:.8rem !important;
line-height:1.12 !important;
}
#main.main-fit-view .hiw-item-desc,
#main.main-fit-view .info-card-skills .hiw-item-desc{
font-size:.66rem !important;
line-height:1.12 !important;
margin-top:1px !important;
display:-webkit-box !important;
-webkit-line-clamp:1 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
}
}
@media (min-width:1200px) and (min-height:700px){
.info-cards-row{
display:grid !important;
flex:0 0 calc(clamp(176px,19.5dvh,204px) - var(--layout-home-info-row-top-inset)) !important;
height:calc(clamp(176px,19.5dvh,204px) - var(--layout-home-info-row-top-inset)) !important;
margin:0 !important;
}
.home-main{
height:100% !important;
justify-content:stretch !important;
gap:0 !important;
}
.hero-wrap{
flex:1 1 auto !important;
padding-bottom:8px !important;
}
.mode-row{
flex:0 0 var(--layout-home-mode-row-height-notebook) !important;
grid-auto-rows:1fr !important;
min-height:var(--layout-home-mode-row-height-notebook) !important;
margin:8px 0 0 !important;
}
.info-cards-row{
margin:calc(8px + var(--layout-home-info-row-top-inset)) 0 0 !important;
}
.mcard-content,
.mcard.choice-adventure .mcard-content{
justify-content:center !important;
gap:4px !important;
}
.mcard-text-block{
height:auto !important;
justify-content:center !important;
gap:2px !important;
}
.mcard.active .mcard-icon,
.mcard.challenge .mcard-icon,
.mcard.choice-adventure .mcard-icon{
width:var(--layout-home-card-icon-box-width-notebook) !important;
height:var(--layout-home-card-icon-box-height-notebook) !important;
padding:7px !important;
}
.mcard-title{
margin:0 !important;
}
.mcard-sub{
min-height:0 !important;
margin:0 !important;
}
.info-card{
height:100% !important;
padding:6px 10px !important;
}
.info-card-hdr{
font-size:.86rem !important;
margin-bottom:3px !important;
}
.hiw-item{
gap:5px !important;
margin-bottom:3px !important;
}
.hiw-badge{
width:28px !important;
height:28px !important;
border-radius:7px !important;
font-size:.84rem !important;
}
.hiw-item-title{
font-size:.8rem !important;
line-height:1.12 !important;
}
.hiw-item-desc{
font-size:.66rem !important;
line-height:1.12 !important;
margin-top:1px !important;
display:-webkit-box !important;
-webkit-line-clamp:1 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
}
.hero-mascot{
bottom:8px !important;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (min-height:501px){
#main.main-fit-view .hero-wrap{
min-height:clamp(304px,38dvh,332px) !important;
padding-bottom:16px !important;
}
#main.main-fit-view .mode-row{
flex:0 0 var(--layout-home-mode-row-height-notebook) !important;
min-height:var(--layout-home-mode-row-height-notebook) !important;
}
#main.main-fit-view .hero-chips-label{
position:absolute !important;
left:clamp(18px,2.25vw,24px) !important;
bottom:116px !important;
margin:0 !important;
width:auto !important;
max-width:calc(100% - 286px) !important;
z-index:4 !important;
padding:0 !important;
border-radius:0 !important;
background:transparent !important;
color:#5C3A00 !important;
line-height:1 !important;
box-shadow:none !important;
text-shadow:0 1px 0 rgba(255,255,255,0.74) !important;
}
#main.main-fit-view .hero-chips{
position:absolute !important;
left:clamp(18px,2.25vw,24px) !important;
bottom:16px !important;
width:clamp(300px,39vw,430px) !important;
max-width:calc(100% - 286px) !important;
z-index:3 !important;
}
#main.main-fit-view .hero-mascot{
bottom:7px !important;
z-index:3 !important;
}
#main.main-fit-view .home-promo-card{
flex:0 0 var(--layout-home-promo-height-landscape) !important;
min-height:var(--layout-home-promo-height-landscape) !important;
display:block !important;
}
#main.main-fit-view .home-promo-card .role-journey-box{
flex:0 0 auto !important;
min-height:var(--right-panel-role-journey-min-height) !important;
margin-bottom:7px !important;
}
#main.main-fit-view .home-daily-card{
min-height:0 !important;
height:auto !important;
padding:10px 12px !important;
}
#main.main-fit-view .home-daily-item{
padding:6px 8px !important;
gap:4px !important;
}
#main.main-fit-view .home-daily-label{
font-size:.66rem !important;
}
#main.main-fit-view .home-daily-value{
font-size:.6rem !important;
}
#main.main-fit-view .home-daily-track{
height:6px !important;
}
#main.main-fit-view .home-daily-bonus{
min-height:20px !important;
padding:3px 6px !important;
font-size:.56rem !important;
}
#main.main-fit-view .home-progress-card--combined{
flex:0 1 auto !important;
height:auto !important;
min-height:0 !important;
padding:10px 12px !important;
}
#main.main-fit-view .home-progress-card--combined .panel-h{
font-size:.82rem !important;
margin-bottom:3px !important;
padding-bottom:5px !important;
line-height:1 !important;
}
#main.main-fit-view .home-progress-combo-row{
padding:4px 0 5px !important;
}
#main.main-fit-view .home-progress-card--combined .prog-row{
margin-bottom:4px !important;
}
#main.main-fit-view .home-progress-card--combined .prog-lbl{
font-size:.7rem !important;
line-height:1.05 !important;
}
#main.main-fit-view .home-progress-card--combined .prog-num{
font-size:.68rem !important;
line-height:1.05 !important;
}
#main.main-fit-view .home-progress-card--combined .prog-bar{
height:6px !important;
margin:3px 0 !important;
}
#main.main-fit-view .home-progress-card--combined .streak-inline{
margin-top:3px !important;
}
#main.main-fit-view .home-progress-card--combined .streak-chip{
min-height:20px !important;
padding:3px 6px !important;
font-size:.62rem !important;
}
#main.main-fit-view .home-promo-card .prog-lbl{
font-size:.66rem !important;
}
#main.main-fit-view .role-journey-name,
#main.main-fit-view .plbl,
#main.main-fit-view .pnums{
font-size:.62rem !important;
}
}
@media (min-width:1200px) and (min-height:700px){
#main.main-fit-view:has(.home-dashboard){
--layout-home-hero-height-notebook:288px;
--layout-home-hero-padding-notebook:20px 292px 16px 22px;
--layout-home-hero-copy-max-notebook:520px;
--layout-home-chips-label-left-notebook:22px;
--layout-home-chips-label-bottom-notebook:126px;
--layout-home-chips-row-bottom-notebook:16px;
--layout-home-chips-max-width-notebook:calc(100% - 330px);
--layout-home-chips-gap-notebook:8px;
--layout-home-chip-min-width-notebook-local:94px;
--layout-home-chip-padding-notebook:5px 10px;
--layout-home-chip-font-notebook:0.94rem;
--layout-home-chip-label-font-notebook-local:0.64rem;
--layout-home-mascot-width-notebook:260px;
--layout-home-mascot-right-notebook:12px;
--layout-home-mascot-bottom-notebook:7px;
--layout-home-mode-height-notebook:278px;
--layout-home-section-gap-notebook:8px;
--layout-home-promo-flex-basis-notebook:auto;
--layout-home-promo-min-height-notebook:0px;
--layout-home-promo-padding-bottom-notebook:10px;
--layout-home-promo-journey-gap-notebook:10px;
--layout-home-bottom-band-height-notebook:184px;
--layout-home-daily-band-height-notebook:302px;
--layout-home-bottom-band-margin-top-notebook:8px;
--layout-home-daily-card-padding-notebook:12px 13px 6px;
--layout-home-daily-panel-gap-notebook:6px;
--layout-home-daily-list-gap-notebook:6px;
--layout-home-info-card-padding-notebook:8px 10px 3px;
--layout-home-info-hdr-font-notebook:.86rem;
--layout-home-info-hdr-margin-bottom-notebook:5px;
--layout-home-info-item-gap-notebook:5px;
--layout-home-info-item-margin-bottom-notebook:3px;
--layout-home-info-badge-size-notebook:28px;
--layout-home-info-badge-radius-notebook:7px;
--layout-home-info-badge-font-notebook:.84rem;
--layout-home-info-title-font-notebook:.8rem;
--layout-home-info-title-line-height-notebook:1.12;
--layout-home-info-desc-font-notebook:.66rem;
--layout-home-info-desc-line-height-notebook:1.12;
--layout-home-info-desc-margin-top-notebook:1px;
--layout-home-info-desc-line-clamp-notebook:1;
--layout-home-fresh-row-gap-notebook:4px;
--layout-home-fresh-row-padding-notebook:5px 8px;
--layout-home-fresh-row-radius-notebook:12px;
--layout-home-fresh-icon-size-notebook:30px;
--layout-home-fresh-icon-radius-notebook:9px;
--layout-home-fresh-icon-font-notebook:.86rem;
--layout-home-fresh-label-font-notebook:.72rem;
--layout-home-fresh-count-font-notebook:.72rem;
--layout-home-fresh-info-font-notebook:.56rem;
--layout-home-fresh-bar-height-notebook:5px;
--right-panel-promo-stat-row-height:47px;
--layout-home-fresh-fill-min-notebook:16px;
--layout-home-fresh-empty-left-notebook:4px;
--layout-home-fresh-empty-width-notebook:12px;
--layout-home-fresh-empty-height-notebook:4px;
--right-panel-stat-icon-size:var(--layout-home-fresh-icon-size-notebook);
--right-panel-stat-icon-radius:var(--layout-home-fresh-icon-radius-notebook);
--right-panel-stat-row-gap:var(--layout-home-fresh-row-gap-notebook);
--right-panel-stat-row-padding:var(--layout-home-fresh-row-padding-notebook);
--right-panel-stat-label-size:var(--layout-home-fresh-label-font-notebook);
--right-panel-stat-value-size:var(--layout-home-fresh-count-font-notebook);
--right-panel-stat-bar-height:var(--layout-home-fresh-bar-height-notebook);
}
#main.main-fit-view .home-dashboard{
grid-template-columns:minmax(0,1fr) 360px !important;
gap:18px !important;
align-items:start !important;
}
#main.main-fit-view .home-main{
gap:0 !important;
}
#main.main-fit-view .hero-wrap{
flex:0 0 var(--layout-home-hero-height-notebook) !important;
min-height:0 !important;
padding:var(--layout-home-hero-padding-notebook) !important;
}
#main.main-fit-view .hero-title{
font-size:1.92rem !important;
margin-bottom:6px !important;
}
#main.main-fit-view .hero-sub{
font-size:.8rem !important;
line-height:1.38 !important;
margin-bottom:18px !important;
max-width:var(--layout-home-hero-copy-max-notebook) !important;
}
#main.main-fit-view .hero-chips-label{
position:absolute !important;
left:var(--layout-home-chips-label-left-notebook) !important;
bottom:var(--layout-home-chips-label-bottom-notebook) !important;
margin:0 !important;
width:auto !important;
max-width:var(--layout-home-chips-max-width-notebook) !important;
font-size:.66rem !important;
z-index:4 !important;
padding:0 !important;
border-radius:0 !important;
background:transparent !important;
color:#5C3A00 !important;
line-height:1 !important;
box-shadow:none !important;
text-shadow:0 1px 0 rgba(255,255,255,0.74) !important;
}
#main.main-fit-view .hero-chips{
position:absolute !important;
left:var(--layout-home-chips-label-left-notebook) !important;
bottom:var(--layout-home-chips-row-bottom-notebook) !important;
display:flex !important;
flex-wrap:nowrap !important;
width:auto !important;
max-width:var(--layout-home-chips-max-width-notebook) !important;
gap:var(--layout-home-chips-gap-notebook) !important;
z-index:3 !important;
}
#main.main-fit-view .hchip{
min-width:var(--layout-home-chip-min-width-notebook-local) !important;
padding:var(--layout-home-chip-padding-notebook) !important;
font-size:var(--layout-home-chip-font-notebook) !important;
}
#main.main-fit-view .hchip-lbl{
font-size:var(--layout-home-chip-label-font-notebook-local) !important;
}
#main.main-fit-view .hero-mascot{
width:var(--layout-home-mascot-width-notebook) !important;
right:var(--layout-home-mascot-right-notebook) !important;
bottom:var(--layout-home-mascot-bottom-notebook) !important;
z-index:3 !important;
}
#main.main-fit-view .mode-row{
flex:0 0 var(--layout-home-mode-height-notebook) !important;
min-height:var(--layout-home-mode-height-notebook) !important;
margin:8px 0 0 !important;
}
#main.main-fit-view .home-side{
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:var(--layout-home-section-gap-notebook) !important;
align-self:stretch !important;
}
#main.main-fit-view .home-promo-card{
flex:0 0 var(--layout-home-promo-flex-basis-notebook) !important;
min-height:var(--layout-home-promo-min-height-notebook) !important;
display:grid !important;
grid-template-rows:auto auto repeat(4,auto) !important;
align-content:start !important;
padding-bottom:var(--layout-home-promo-padding-bottom-notebook) !important;
}
#main.main-fit-view .home-promo-card + .home-progress-card--combined{
margin-top:0 !important;
}
#main.main-fit-view .home-promo-card .role-journey-box{
flex:0 0 auto !important;
min-height:var(--right-panel-role-journey-min-height) !important;
margin-bottom:var(--layout-home-promo-journey-gap-notebook) !important;
}
#main.main-fit-view .home-daily-card{
margin-top:0 !important;
flex:0 0 var(--layout-home-daily-band-height-notebook) !important;
min-height:var(--layout-home-daily-band-height-notebook) !important;
max-height:none !important;
height:var(--layout-home-daily-band-height-notebook) !important;
display:flex !important;
flex-direction:column !important;
padding:var(--layout-home-daily-card-padding-notebook) !important;
align-self:stretch !important;
}
#main.main-fit-view .home-daily-card .panel-h{
margin-bottom:var(--layout-home-daily-panel-gap-notebook) !important;
padding-bottom:var(--layout-home-daily-panel-gap-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-list{
gap:var(--layout-home-daily-list-gap-notebook) !important;
align-content:start !important;
}
#main.main-fit-view .home-fresh-progress-card{
flex:0 1 auto !important;
min-height:0 !important;
padding:10px 11px 6px !important;
align-self:stretch !important;
}
#main.main-fit-view .home-progress-card.home-daily-card.home-fresh-progress-card{
flex:0 0 var(--layout-home-daily-band-height-notebook) !important;
min-height:var(--layout-home-daily-band-height-notebook) !important;
height:var(--layout-home-daily-band-height-notebook) !important;
}
#main.main-fit-view .info-cards-row{
flex:0 0 calc(var(--layout-home-bottom-band-height-notebook) - var(--layout-home-info-row-top-inset)) !important;
height:calc(var(--layout-home-bottom-band-height-notebook) - var(--layout-home-info-row-top-inset)) !important;
min-height:calc(var(--layout-home-bottom-band-height-notebook) - var(--layout-home-info-row-top-inset)) !important;
margin:calc(var(--layout-home-bottom-band-margin-top-notebook) + var(--layout-home-info-row-top-inset)) 0 0 !important;
align-items:stretch !important;
}
#main.main-fit-view .info-card{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
justify-content:var(--layout-home-info-card-content-align) !important;
padding:var(--layout-home-info-card-padding-notebook) !important;
}
#main.main-fit-view .info-card-hdr{
font-size:var(--layout-home-info-hdr-font-notebook) !important;
margin-bottom:var(--layout-home-info-hdr-margin-bottom-notebook) !important;
}
#main.main-fit-view .hiw-item{
gap:var(--layout-home-info-item-gap-notebook) !important;
margin-bottom:var(--layout-home-info-item-margin-bottom-notebook) !important;
}
#main.main-fit-view .hiw-badge{
width:var(--layout-home-info-badge-size-notebook) !important;
height:var(--layout-home-info-badge-size-notebook) !important;
border-radius:var(--layout-home-info-badge-radius-notebook) !important;
font-size:var(--layout-home-info-badge-font-notebook) !important;
}
#main.main-fit-view .hiw-item-title{
font-size:var(--layout-home-info-title-font-notebook) !important;
line-height:var(--layout-home-info-title-line-height-notebook) !important;
}
#main.main-fit-view .hiw-item-desc{
font-size:var(--layout-home-info-desc-font-notebook) !important;
line-height:var(--layout-home-info-desc-line-height-notebook) !important;
margin-top:var(--layout-home-info-desc-margin-top-notebook) !important;
display:-webkit-box !important;
-webkit-line-clamp:var(--layout-home-info-desc-line-clamp-notebook) !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
}
#main.main-fit-view .info-card .hiw-item:last-child,
#main.main-fit-view .info-card-skills .hiw-item:last-child{
margin-bottom:0 !important;
}
#main.main-fit-view .home-fresh-progress-card .panel-h{
margin-bottom:5px !important;
padding-bottom:4px !important;
}
#main.main-fit-view .home-fresh-progress-row{
gap:var(--layout-home-fresh-row-gap-notebook) !important;
padding:var(--layout-home-fresh-row-padding-notebook) !important;
border-radius:var(--layout-home-fresh-row-radius-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-icon{
width:var(--layout-home-fresh-icon-size-notebook) !important;
height:var(--layout-home-fresh-icon-size-notebook) !important;
border-radius:var(--layout-home-fresh-icon-radius-notebook) !important;
font-size:var(--layout-home-fresh-icon-font-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-label{
font-size:var(--layout-home-fresh-label-font-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-count{
font-size:var(--layout-home-fresh-count-font-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-info{
font-size:var(--layout-home-fresh-info-font-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-bar{
height:var(--layout-home-fresh-bar-height-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-bar.has-progress .home-fresh-progress-bar-fill{
min-width:var(--layout-home-fresh-fill-min-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-bar.is-empty::before{
width:var(--layout-home-fresh-empty-width-notebook) !important;
height:var(--layout-home-fresh-empty-height-notebook) !important;
left:var(--layout-home-fresh-empty-left-notebook) !important;
}
#main.main-fit-view .home-daily-list{
display:flex !important;
flex-direction:column !important;
gap:11px !important;
flex:0 1 auto !important;
min-height:0 !important;
}
#main.main-fit-view .home-daily-item{
padding:12px 13px !important;
min-height:0 !important;
flex:0 1 auto !important;
justify-content:var(--layout-home-info-card-content-align) !important;
border-radius:16px !important;
border-width:2px !important;
box-shadow:0 8px 18px rgba(148,163,184,0.12) !important;
}
#main.main-fit-view .home-daily-item-top{
flex-direction:row !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:10px !important;
}
#main.main-fit-view .home-daily-head{
gap:8px !important;
width:auto !important;
align-items:flex-start !important;
}
#main.main-fit-view .home-daily-icon{
width:28px !important;
height:28px !important;
border-radius:10px !important;
font-size:.92rem !important;
}
#main.main-fit-view .home-daily-label{
font-size:.74rem !important;
line-height:1.08 !important;
max-width:100% !important;
}
#main.main-fit-view .home-daily-note{
font-size:.6rem !important;
}
#main.main-fit-view .home-daily-metrics{
gap:3px !important;
}
#main.main-fit-view .home-daily-value{
font-size:.88rem !important;
align-self:auto !important;
max-width:100% !important;
}
#main.main-fit-view .home-daily-meta{
font-size:.56rem !important;
}
#main.main-fit-view .home-daily-bar-row{
gap:10px !important;
}
#main.main-fit-view .home-daily-track{
height:20px !important;
margin-top:9px !important;
border-width:2px !important;
background:linear-gradient(180deg,#FDFEFF,#D7E7FB) !important;
box-shadow:inset 0 1px 5px rgba(148,163,184,0.24) !important;
}
#main.main-fit-view .home-daily-track.has-progress .home-daily-fill{
min-width:44px !important;
box-shadow:inset 0 -1px 0 rgba(255,255,255,0.28), 0 2px 8px rgba(99,102,241,0.2) !important;
}
#main.main-fit-view .home-daily-track.is-empty::before{
left:6px !important;
width:46px !important;
height:10px !important;
box-shadow:0 0 0 2px rgba(255,255,255,0.9) !important, 0 1px 10px rgba(255,255,255,0.32) !important;
}
#main.main-fit-view .home-daily-percent{
font-size:.64rem !important;
min-width:36px !important;
}
#main.main-fit-view .home-daily-bonus{
margin-top:4px !important;
min-height:24px !important;
padding:4px 8px !important;
gap:4px !important;
}
#main.main-fit-view .home-daily-badge{
margin-top:4px !important;
min-height:24px !important;
padding:4px 8px !important;
gap:4px !important;
}
#main.main-fit-view .home-daily-bonus-ico{
font-size:.84rem !important;
}
#main.main-fit-view .home-daily-bonus-text{
font-size:.62rem !important;
}
#main.main-fit-view .home-daily-badge-ico{
font-size:.84rem !important;
}
#main.main-fit-view .home-daily-badge-text{
font-size:.62rem !important;
}
#main.main-fit-view .home-promo-card .prow{
gap:var(--right-panel-stat-row-gap) !important;
padding:var(--right-panel-stat-row-padding) !important;
min-height:var(--right-panel-promo-stat-row-height) !important;
height:var(--right-panel-promo-stat-row-height) !important;
align-items:center !important;
}
#main.main-fit-view .home-promo-card .prow:last-of-type{
margin-bottom:0 !important;
}
#main.main-fit-view .home-promo-card .pem,
#main.main-fit-view .home-promo-card .pem img,
#main.main-fit-view .home-promo-card .pem svg{
width:var(--right-panel-stat-icon-size) !important;
height:var(--right-panel-stat-icon-size) !important;
background:transparent !important;
box-shadow:none !important;
border-radius:var(--right-panel-stat-icon-radius) !important;
}
#main.main-fit-view .home-promo-card .plbl{
min-width:50px !important;
font-size:var(--right-panel-stat-label-size) !important;
}
#main.main-fit-view .home-promo-card .pnums{
min-width:74px !important;
font-size:var(--right-panel-stat-value-size) !important;
text-align:left !important;
padding-left:4px !important;
}
#main.main-fit-view .home-promo-card .pbar{
min-width:0 !important;
}
#main.main-fit-view .home-progress-card--combined{
flex:0 1 auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
align-self:stretch !important;
display:block !important;
overflow:visible !important;
padding:12px 14px 4px !important;
}
#main.main-fit-view .home-progress-card--combined .panel-h{
font-size:.82rem !important;
margin-bottom:4px !important;
padding-bottom:6px !important;
line-height:1 !important;
}
#main.main-fit-view .home-progress-combo-row{
display:block !important;
padding:5px 0 6px !important;
}
#main.main-fit-view .home-progress-combo-row:last-child{
padding-bottom:0 !important;
}
#main.main-fit-view .home-progress-combo-row + .home-progress-combo-row{
margin-top:0 !important;
border-top:1px solid rgba(201,217,251,0.72) !important;
}
#main.main-fit-view .home-progress-card--combined .home-progress-note{
display:block !important;
}
#main.main-fit-view .home-progress-card--combined .streak-inline{
margin-top:4px !important;
}
#main.main-fit-view .home-progress-card--combined .streak-chip{
min-height:22px !important;
padding:4px 7px !important;
font-size:.64rem !important;
}
#main.main-fit-view .home-progress-card--combined .prog-row{
margin-bottom:5px !important;
}
#main.main-fit-view .home-progress-card--combined .prog-lbl{
font-size:.7rem !important;
line-height:1.05 !important;
}
#main.main-fit-view .home-progress-card--combined .prog-num{
font-size:.68rem !important;
line-height:1.05 !important;
}
#main.main-fit-view .home-progress-card--combined .prog-bar{
height:7px !important;
margin:4px 0 !important;
}
}
@media (min-width:1200px) and (min-height:700px){
#main.main-fit-view:has(.home-dashboard) .info-cards-row{
margin-top:calc(var(--layout-home-bottom-band-margin-top-notebook) + var(--layout-home-info-row-top-inset)) !important;
}
}
@media (min-width:1200px) and (min-height:700px) and (max-height:840px){
#main.main-fit-view:has(.home-dashboard){
--layout-home-hero-height-notebook:246px;
--layout-home-hero-padding-notebook:18px 286px 14px 20px;
--layout-home-mode-height-notebook:224px;
--layout-home-promo-flex-basis-notebook:auto;
--layout-home-promo-min-height-notebook:0px;
--layout-home-bottom-band-height-notebook:178px;
--layout-home-daily-band-height-notebook:276px;
--layout-home-daily-card-padding-notebook:10px 11px 4px;
--layout-home-daily-panel-gap-notebook:4px;
--layout-home-daily-list-gap-notebook:4px;
--layout-home-info-card-padding-notebook:8px 10px 6px;
--layout-home-info-desc-font-notebook:.58rem;
--layout-home-info-desc-line-height-notebook:1.14;
--layout-home-info-desc-line-clamp-notebook:unset;
--layout-home-fresh-row-padding-notebook:4px 8px;
--layout-home-fresh-row-gap-notebook:3px;
--layout-home-fresh-icon-size-notebook:28px;
--layout-home-fresh-icon-radius-notebook:8px;
--layout-home-fresh-icon-font-notebook:.82rem;
--layout-home-fresh-label-font-notebook:.66rem;
--layout-home-fresh-count-font-notebook:.66rem;
--right-panel-promo-stat-row-height:42px;
--layout-home-fresh-info-font-notebook:.54rem;
--layout-home-fresh-bar-height-notebook:5px;
--layout-home-fresh-fill-min-notebook:12px;
--layout-home-fresh-empty-width-notebook:14px;
--layout-home-fresh-empty-height-notebook:4px;
}
#main.main-fit-view .home-dashboard{
align-items:start !important;
}
#main.main-fit-view .hero-wrap{
flex:0 0 var(--layout-home-hero-height-notebook) !important;
}
#main.main-fit-view .mode-row{
flex:0 0 var(--layout-home-mode-height-notebook) !important;
min-height:var(--layout-home-mode-height-notebook) !important;
}
#main.main-fit-view .mcard{
padding:16px 16px 14px !important;
}
#main.main-fit-view .mcard-content{
padding:0 !important;
gap:4px !important;
}
#main.main-fit-view .mcard.active .mcard-icon,
#main.main-fit-view .mcard.challenge .mcard-icon,
#main.main-fit-view .mcard.choice-adventure .mcard-icon{
width:84px !important;
height:84px !important;
padding:6px !important;
border-radius:16px !important;
}
#main.main-fit-view .mcard-title{
font-size:1rem !important;
line-height:1.14 !important;
}
#main.main-fit-view .mcard-sub{
font-size:.66rem !important;
line-height:1.18 !important;
margin:0 !important;
}
#main.main-fit-view .mcard .prog-bar{
width:82% !important;
height:6px !important;
margin:1px 0 !important;
}
#main.main-fit-view .mcard-progress-copy{
font-size:.56rem !important;
margin:2px 0 0 !important;
}
#main.main-fit-view .mcard .mcard-start-btn{
font-size:.82rem !important;
min-height:31px !important;
padding:8px 24px !important;
margin-top:3px !important;
}
#main.main-fit-view .info-cards-row{
flex:0 0 auto !important;
height:auto !important;
min-height:0 !important;
align-items:start !important;
}
#main.main-fit-view .info-card{
height:auto !important;
min-height:0 !important;
justify-content:flex-start !important;
padding:var(--layout-home-info-card-padding-notebook) !important;
}
#main.main-fit-view .home-progress-card--combined{
flex:0 1 auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
align-self:stretch !important;
display:block !important;
overflow:visible !important;
padding:11px 13px 6px !important;
}
#main.main-fit-view .home-daily-card{
flex:0 0 var(--layout-home-daily-band-height-notebook) !important;
min-height:var(--layout-home-daily-band-height-notebook) !important;
height:var(--layout-home-daily-band-height-notebook) !important;
padding:var(--layout-home-daily-card-padding-notebook) !important;
}
#main.main-fit-view .home-progress-card.home-daily-card.home-fresh-progress-card{
flex:0 0 var(--layout-home-daily-band-height-notebook) !important;
min-height:var(--layout-home-daily-band-height-notebook) !important;
height:var(--layout-home-daily-band-height-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-card .panel-h{
margin-bottom:3px !important;
padding-bottom:3px !important;
}
#main.main-fit-view .home-daily-item{
padding:9px 10px !important;
gap:5px !important;
flex:0 1 auto !important;
}
#main.main-fit-view .home-daily-label{
font-size:.64rem !important;
}
#main.main-fit-view .home-daily-note{
font-size:.56rem !important;
}
#main.main-fit-view .home-daily-value{
font-size:.6rem !important;
}
#main.main-fit-view .home-daily-track{
height:10px !important;
margin-top:5px !important;
background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(220,232,249,0.99)) !important;
}
#main.main-fit-view .home-daily-track.is-empty::before{
left:4px !important;
width:20px !important;
height:6px !important;
}
#main.main-fit-view .home-daily-bonus{
min-height:20px !important;
padding:3px 6px !important;
font-size:.54rem !important;
}
#main.main-fit-view .home-progress-card--combined .panel-h{
font-size:.8rem !important;
margin-bottom:4px !important;
padding-bottom:5px !important;
}
#main.main-fit-view .home-progress-combo-row{
display:block !important;
padding:4px 0 5px !important;
}
#main.main-fit-view .home-progress-combo-row:last-child{
padding-bottom:0 !important;
}
#main.main-fit-view .home-progress-combo-row + .home-progress-combo-row{
margin-top:0 !important;
border-top:1px solid rgba(201,217,251,0.7) !important;
}
#main.main-fit-view .home-progress-card--combined .home-progress-note{
display:block !important;
}
#main.main-fit-view .home-progress-card--combined .prog-row{
margin-bottom:4px !important;
}
#main.main-fit-view .home-progress-card--combined .prog-lbl{
font-size:.68rem !important;
}
#main.main-fit-view .home-progress-card--combined .prog-num{
font-size:.66rem !important;
}
#main.main-fit-view .home-progress-card--combined .prog-bar{
height:6px !important;
margin:4px 0 !important;
}
#main.main-fit-view .home-progress-card--combined .streak-inline{
margin-top:4px !important;
}
#main.main-fit-view .home-progress-card--combined .streak-chip{
min-height:20px !important;
padding:3px 7px !important;
font-size:.62rem !important;
}
#main.main-fit-view .home-promo-card .prog-lbl{
font-size:.7rem !important;
}
#main.main-fit-view .role-journey-name{
font-size:var(--right-panel-role-name-size) !important;
}
#main.main-fit-view .plbl{
font-size:var(--right-panel-stat-label-size) !important;
}
#main.main-fit-view .pnums{
font-size:var(--right-panel-stat-value-size) !important;
}
#main.main-fit-view .prow{
padding:1px 5px !important;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (min-height:501px){
#nav .nav-btn{
font-size:.72rem !important;
}
#nav .nav-btn-text{
min-width:0 !important;
overflow:visible !important;
text-overflow:clip !important;
white-space:normal !important;
text-align:center !important;
line-height:1.05 !important;
}
}
@media (min-width:768px) and (max-width:1100px) and (orientation:landscape){
:root{
--layout-home-compact-nav-profile-width:clamp(96px,11vw,104px);
}
#nav{
column-gap:8px !important;
}
#nav .nav-logo{
font-size:.88rem !important;
max-width:154px !important;
}
#nav .nav-btn{
padding:6px 7px !important;
font-size:.64rem !important;
gap:4px !important;
}
#nav .nav-btn-text{
font-size:.6rem !important;
}
#nav .nav-right{
gap:6px !important;
}
#nav .nav-profile{
min-height:38px !important;
padding:4px 7px 4px 5px !important;
gap:6px !important;
}
#nav .nav-profile-info{
max-width:var(--layout-home-compact-nav-profile-width) !important;
}
#nav .nav-name{
font-size:.78rem !important;
}
#nav .nav-role{
font-size:.56rem !important;
}
}
/* Responsive QA pass: tighten short-landscape chrome, keep play screens readable,
and prevent the Home bottom row from clipping in compact notebook heights. */
@media (orientation:landscape) and (max-height:430px) and (min-width:520px){
#app{
padding:6px 10px calc(6px + env(safe-area-inset-bottom)) !important;
gap:6px !important;
}
#nav{
padding:7px 10px !important;
gap:6px !important;
}
#nav .nav-logo{
flex:0 1 158px !important;
max-width:168px !important;
font-size:.84rem !important;
gap:4px !important;
}
#nav .nav-btn{
min-height:34px !important;
padding:5px 6px !important;
}
#nav .nav-right{
gap:4px !important;
}
.icon-btn{
width:32px !important;
height:32px !important;
}
.nav-profile{
min-height:34px !important;
padding:3px 6px 3px 4px !important;
}
.nav-av{
width:26px !important;
height:26px !important;
}
body.route-fit-view:has(#main .home-dashboard),
body.route-fit-view:has(#main .home-dashboard) #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
#main.main-fit-view:has(.home-dashboard){
display:flex !important;
flex-direction:column !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important;
}
#main.main-fit-view .home-dashboard,
#main.main-fit-view .home-main,
#main.main-fit-view .home-side{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
#main.main-fit-view .home-main{
gap:0 !important;
}
#main.main-fit-view .hero-wrap{
flex:0 0 clamp(180px,52dvh,212px) !important;
min-height:clamp(180px,52dvh,212px) !important;
padding:14px 188px 10px 16px !important;
}
#main.main-fit-view .hero-title{
font-size:1.08rem !important;
margin-bottom:4px !important;
}
#main.main-fit-view .hero-sub{
font-size:.58rem !important;
line-height:1.24 !important;
margin-bottom:10px !important;
max-width:310px !important;
}
#main.main-fit-view .hero-mascot{
width:136px !important;
right:10px !important;
bottom:6px !important;
}
#main.main-fit-view .mode-row{
flex:0 0 clamp(148px,43dvh,176px) !important;
min-height:clamp(148px,43dvh,176px) !important;
grid-auto-rows:1fr !important;
gap:8px !important;
margin-top:6px !important;
}
#main.main-fit-view .mcard{
min-height:0 !important;
}
#main.main-fit-view .info-cards-row{
flex:0 0 auto !important;
height:auto !important;
min-height:0 !important;
gap:8px !important;
margin:6px 0 0 !important;
align-items:stretch !important;
}
#main.main-fit-view .info-card{
height:auto !important;
min-height:126px !important;
padding:8px 9px 10px !important;
}
#main.main-fit-view .info-card-hdr{
font-size:.78rem !important;
margin-bottom:3px !important;
}
#main.main-fit-view .hiw-item{
gap:5px !important;
margin-bottom:4px !important;
}
#main.main-fit-view .hiw-badge{
width:24px !important;
height:24px !important;
font-size:.72rem !important;
}
#main.main-fit-view .hiw-item-title{
font-size:.7rem !important;
line-height:1.08 !important;
}
#main.main-fit-view .hiw-item-desc{
font-size:.56rem !important;
line-height:1.14 !important;
-webkit-line-clamp:2 !important;
}
#main.main-fit-view .home-side{
gap:8px !important;
}
#main.main-fit-view .home-promo-card,
#main.main-fit-view .home-daily-card{
flex:0 0 auto !important;
min-height:0 !important;
height:auto !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge){
--story-shell-pad:6px;
--story-panel-pad:6px;
--story-card-pad:6px;
--story-gap:4px;
--story-title-size:.98rem;
--story-question-size:.9rem;
--story-choice-size:.76rem;
--story-choice-min:40px;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-top{
padding:6px 8px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass{
padding:7px 8px !important;
margin-top:0 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .cho-btn{
min-height:40px !important;
padding:7px 10px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .cho-copy{
font-size:var(--story-choice-size) !important;
line-height:1.1 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-topbar{
gap:var(--layout-challenge-topbar-gap) !important;
margin-bottom:2px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-round-info{
font-size:var(--layout-challenge-round-info-size) !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-vs-bar{
padding:var(--layout-challenge-vs-padding) !important;
margin-bottom:6px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-av-ring{
width:var(--layout-challenge-avatar-size) !important;
height:var(--layout-challenge-avatar-size) !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .challenge-timer-row{
min-height:34px !important;
padding:4px 8px !important;
margin-bottom:4px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-question-card{
padding:var(--layout-challenge-question-padding) !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-glass{
padding:7px 8px !important;
margin-top:0 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-title{
font-size:var(--layout-challenge-question-title-size) !important;
line-height:var(--layout-challenge-question-title-line-height) !important;
margin-bottom:clamp(22px,3dvh,30px) !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-body{
font-size:var(--layout-challenge-question-body-size) !important;
line-height:1.34 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-choices .cho-btn{
min-height:var(--layout-challenge-choice-min-height) !important;
padding:var(--layout-challenge-choice-padding) !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-choices .cho-copy{
font-size:var(--layout-challenge-choice-copy-size) !important;
line-height:var(--layout-challenge-choice-copy-line-height) !important;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (min-height:700px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-compact-hero-height:clamp(246px,29dvh,274px);
--layout-home-compact-mode-height:clamp(198px,24dvh,224px);
--layout-home-compact-promo-height:clamp(244px,28dvh,266px);
--layout-home-compact-info-height:clamp(170px,20dvh,188px);
--layout-home-compact-daily-height:auto;
}
#main.main-fit-view .info-card{
padding:7px 9px 12px !important;
}
#main.main-fit-view .hiw-item-desc{
display:block !important;
overflow:visible !important;
font-size:.57rem !important;
line-height:1.14 !important;
-webkit-line-clamp:unset !important;
}
}
/* Tablet / Compact home landscape: consolidated final layer for fit-view home.
Keep the notebook structure, but make one runtime override set the sizes. */
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (min-height:501px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #app{
box-sizing:border-box !important;
padding-bottom:4px !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav{
display:flex !important;
grid-template-columns:none !important;
min-height:0 !important;
padding:var(--layout-home-compact-nav-padding) !important;
gap:var(--layout-home-compact-nav-gap) !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:space-between !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-left{
display:flex !important;
flex:1 1 auto !important;
flex-wrap:nowrap !important;
gap:var(--layout-home-compact-nav-gap) !important;
min-width:0 !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-logo{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:0 0 var(--layout-home-compact-nav-logo-width) !important;
min-width:var(--layout-home-compact-nav-logo-width) !important;
max-width:var(--layout-home-compact-nav-logo-width) !important;
font-size:var(--layout-home-compact-nav-logo-font) !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-logo::before{
width:var(--layout-nav-logo-icon-size-landscape) !important;
height:var(--layout-nav-logo-icon-size-landscape) !important;
flex-basis:var(--layout-nav-logo-icon-size-landscape) !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-btn{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:0 1 var(--layout-home-compact-nav-btn-width) !important;
width:auto !important;
min-width:0 !important;
min-height:var(--layout-nav-button-min-height-landscape) !important;
padding:6px 10px !important;
font-size:var(--layout-home-compact-nav-btn-font) !important;
justify-content:center !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav #nb-insights{
flex-basis:var(--layout-home-compact-nav-btn-wide-width) !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-btn .nav-btn-text{
display:inline-flex !important;
min-width:0 !important;
overflow:visible !important;
text-overflow:clip !important;
white-space:normal !important;
text-align:center !important;
line-height:1.05 !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-right{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
justify-self:auto !important;
width:auto !important;
margin-left:auto !important;
gap:6px !important;
flex:0 0 auto !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) .icon-btn{
width:40px !important;
height:40px !important;
font-size:1rem !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) .nav-profile{
min-height:var(--layout-home-compact-nav-profile-min-height) !important;
padding:var(--layout-home-compact-nav-profile-padding) !important;
gap:var(--layout-home-compact-nav-profile-gap) !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) .nav-profile-info{
max-width:var(--layout-home-compact-nav-profile-width) !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) .nav-av{
width:32px !important;
height:32px !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) .nav-name{
font-size:.78rem !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) .nav-role{
font-size:.56rem !important;
}
#main.main-fit-view:has(.home-dashboard){
display:flex !important;
flex-direction:column !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
padding-bottom:0 !important;
}
#main.main-fit-view .home-dashboard{
display:grid !important;
grid-template-columns:var(--layout-home-dashboard-columns-landscape) !important;
gap:var(--layout-home-compact-shell-gap) !important;
flex:0 0 auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
#main.main-fit-view .home-main{
display:flex !important;
flex-direction:column !important;
height:auto !important;
min-height:0 !important;
gap:0 !important;
}
#main.main-fit-view .home-side{
display:flex !important;
flex-direction:column !important;
height:auto !important;
min-height:0 !important;
overflow:visible !important;
gap:var(--layout-home-compact-side-gap) !important;
}
#main.main-fit-view .home-side .card{
height:auto !important;
padding:9px 10px !important;
}
#main.main-fit-view .hero-wrap{
flex:0 0 var(--layout-home-compact-hero-height) !important;
min-height:var(--layout-home-compact-hero-height) !important;
padding:var(--layout-home-compact-hero-pad) !important;
padding-right:var(--layout-home-compact-hero-pad-right) !important;
}
#main.main-fit-view .hero-title{
width:var(--layout-home-compact-hero-copy-width) !important;
max-width:none !important;
font-size:var(--layout-home-compact-hero-title-font) !important;
margin-bottom:6px !important;
}
#main.main-fit-view .hero-sub{
width:var(--layout-home-compact-hero-copy-width) !important;
max-width:none !important;
font-size:var(--layout-home-compact-hero-sub-font) !important;
line-height:1.4 !important;
margin-bottom:8px !important;
}
#main.main-fit-view .hero-chips-label{
width:var(--layout-home-compact-hero-copy-width) !important;
max-width:none !important;
margin:16px 0 3px !important;
font-size:.54rem !important;
}
#main.main-fit-view .hero-chips{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:clamp(5px,.7vw,8px) !important;
width:min(var(--layout-home-compact-chip-width), calc(100% - var(--layout-home-compact-hero-pad-right) - clamp(20px,2.25vw,24px))) !important;
max-width:min(var(--layout-home-compact-chip-width), calc(100% - var(--layout-home-compact-hero-pad-right) - clamp(20px,2.25vw,24px))) !important;
}
#main.main-fit-view .hchip{
width:auto !important;
min-width:0 !important;
padding:4px 8px !important;
font-size:.68rem !important;
border-radius:12px !important;
}
#main.main-fit-view .hchip svg,
#main.main-fit-view .hchip img{
width:var(--layout-home-chip-icon-size-landscape) !important;
height:var(--layout-home-chip-icon-size-landscape) !important;
}
#main.main-fit-view .hchip-lbl{
font-size:var(--layout-home-compact-chip-label-font) !important;
line-height:1.05 !important;
letter-spacing:.2px !important;
white-space:nowrap !important;
}
#main.main-fit-view .hero-mascot{
width:clamp(200px,22vw,260px) !important;
right:10px !important;
bottom:10px !important;
}
#main.main-fit-view .mode-row{
flex:0 0 var(--layout-home-compact-mode-height) !important;
min-height:var(--layout-home-compact-mode-height) !important;
grid-auto-rows:1fr !important;
margin-top:8px !important;
gap:clamp(8px,1.2vw,12px) !important;
}
#main.main-fit-view .mcard{
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
height:100% !important;
min-height:0 !important;
max-height:none !important;
padding:var(--layout-home-compact-card-pad) !important;
}
#main.main-fit-view .mcard-content{
justify-content:center !important;
gap:clamp(3px,.45vw,5px) !important;
padding:var(--layout-home-compact-card-inner-pad) !important;
}
#main.main-fit-view .mcard-text-block{
height:auto !important;
justify-content:center !important;
gap:2px !important;
}
#main.main-fit-view .mcard.active .mcard-icon,
#main.main-fit-view .mcard.challenge .mcard-icon,
#main.main-fit-view .mcard.choice-adventure .mcard-icon{
width:var(--layout-home-card-icon-size-landscape) !important;
height:var(--layout-home-card-icon-size-landscape) !important;
padding:5px !important;
}
#main.main-fit-view .mcard-title{
font-size:var(--layout-home-compact-card-title-font) !important;
white-space:nowrap !important;
}
#main.main-fit-view .mcard-sub{
font-size:var(--layout-home-compact-card-sub-font) !important;
line-height:1.16 !important;
min-height:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
#main.main-fit-view .mcard .prog-bar{
height:5px !important;
margin:1px 0 !important;
}
#main.main-fit-view .mcard-progress-copy{
font-size:var(--layout-home-compact-card-progress-font) !important;
min-height:1.15em !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:1px 0 0 !important;
}
#main.main-fit-view .mcard .mcard-start-btn{
padding:var(--layout-home-card-button-padding-landscape) !important;
min-height:var(--layout-home-card-button-min-height-landscape) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:var(--layout-home-compact-card-button-font) !important;
line-height:1 !important;
margin-top:3px !important;
}
#main.main-fit-view .home-promo-card{
flex:0 0 auto !important;
min-height:0 !important;
height:auto !important;
display:grid !important;
grid-template-rows:auto auto repeat(4,auto) !important;
align-content:start !important;
overflow:hidden !important;
}
#main.main-fit-view .home-daily-card{
flex:0 0 var(--layout-home-compact-daily-height) !important;
min-height:var(--layout-home-compact-daily-height) !important;
height:var(--layout-home-compact-daily-height) !important;
}
#main.main-fit-view .info-cards-row{
flex:0 0 calc(var(--layout-home-compact-info-height) - var(--layout-home-info-row-top-inset)) !important;
min-height:0 !important;
height:calc(var(--layout-home-compact-info-height) - var(--layout-home-info-row-top-inset)) !important;
margin:var(--layout-home-info-row-top-inset) 0 0 !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:var(--layout-home-info-gap) !important;
align-items:stretch !important;
}
#main.main-fit-view .info-card{
height:100% !important;
display:flex !important;
flex-direction:column !important;
justify-content:var(--layout-home-info-card-content-align) !important;
padding:9px 10px 12px !important;
}
#main.main-fit-view .info-card-hdr{
font-size:var(--layout-home-compact-info-head-font) !important;
margin-bottom:var(--layout-home-info-hdr-margin-bottom) !important;
}
#main.main-fit-view .hiw-item{
flex:0 0 auto !important;
gap:5px !important;
margin-bottom:3px !important;
align-items:flex-start !important;
}
#main.main-fit-view .hiw-badge{
width:var(--layout-home-info-badge-size-landscape) !important;
height:var(--layout-home-info-badge-size-landscape) !important;
font-size:.66rem !important;
}
#main.main-fit-view .hiw-item-title{
font-size:var(--layout-home-compact-info-title-font) !important;
}
#main.main-fit-view .hiw-item-desc{
font-size:var(--layout-home-compact-info-desc-font) !important;
line-height:1.14 !important;
}
#main.main-fit-view .home-promo-card .prog-lbl,
#main.main-fit-view .home-fresh-progress-title-badge{
font-size:var(--layout-home-compact-promo-stat-font) !important;
padding:3px 8px !important;
}
#main.main-fit-view .home-promo-card .role-journey-box{
padding:var(--layout-home-compact-promo-journey-padding) !important;
margin-bottom:var(--layout-home-compact-promo-journey-gap) !important;
}
#main.main-fit-view .home-promo-card .role-journey-glow img,
#main.main-fit-view .home-promo-card .role-journey-glow svg,
#main.main-fit-view .home-promo-card .role-journey-item img,
#main.main-fit-view .home-promo-card .role-journey-item svg{
width:var(--layout-home-rail-role-icon-size-landscape) !important;
height:var(--layout-home-rail-role-icon-size-landscape) !important;
}
#main.main-fit-view .home-promo-card .role-journey-name,
#main.main-fit-view .home-promo-card .plbl,
#main.main-fit-view .home-promo-card .pnums{
font-size:var(--layout-home-compact-promo-stat-font) !important;
}
#main.main-fit-view .home-promo-card .prow{
padding:var(--layout-home-compact-promo-row-padding) !important;
gap:var(--layout-home-compact-promo-row-gap) !important;
margin-bottom:0 !important;
}
#main.main-fit-view .home-promo-card .prow:last-of-type{
margin-bottom:0 !important;
}
#main.main-fit-view .home-promo-card .pem,
#main.main-fit-view .home-promo-card .pem img,
#main.main-fit-view .home-promo-card .pem svg{
width:var(--layout-home-rail-progress-icon-size-landscape) !important;
height:var(--layout-home-rail-progress-icon-size-landscape) !important;
}
#main.main-fit-view .home-promo-card .pnums{
min-width:var(--layout-home-compact-promo-pnums-min-width) !important;
}
#main.main-fit-view .home-fresh-progress-row{
padding:var(--layout-home-compact-daily-row-padding) !important;
}
#main.main-fit-view .home-fresh-progress-label{
font-size:var(--layout-home-compact-daily-label-font) !important;
}
#main.main-fit-view .home-fresh-progress-info{
font-size:var(--layout-home-compact-daily-info-font) !important;
}
}
@media (min-width:1024px) and (max-width:1179px) and (orientation:landscape) and (min-height:640px){
#nav{
padding:var(--layout-nav-padding-compact) !important;
gap:9px !important;
}
#nav .nav-left{
gap:9px !important;
}
#nav .nav-logo{
flex:0 0 190px !important;
min-width:190px !important;
max-width:190px !important;
font-size:.94rem !important;
}
#nav .nav-btn{
flex:0 1 120px !important;
padding:6px 10px !important;
font-size:.7rem !important;
}
#nav #nb-insights{
flex-basis:150px !important;
}
#nav .nav-btn .nav-btn-text{
display:inline-flex !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
#nav .nav-right{
gap:6px !important;
}
#nav .icon-btn,
.icon-btn{
width:40px !important;
height:40px !important;
font-size:1rem !important;
}
#nav .nav-profile,
.nav-profile{
min-height:40px !important;
padding:5px 8px 5px 6px !important;
gap:7px !important;
}
#nav .nav-profile-info,
.nav-profile-info{
max-width:104px !important;
}
#nav .nav-av,
.nav-av{
width:32px !important;
height:32px !important;
}
#nav .nav-name,
.nav-name{
font-size:.78rem !important;
}
#nav .nav-role,
.nav-role{
font-size:.56rem !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-compact-shell-gap:16px;
--layout-home-compact-side-gap:6px;
--layout-home-compact-hero-height:clamp(236px,28.8dvh,264px);
--layout-home-compact-mode-height:clamp(174px,22.5dvh,188px);
--layout-home-compact-promo-height:clamp(334px,43dvh,344px);
--layout-home-compact-info-height:clamp(214px,28dvh,224px);
--layout-home-compact-daily-height:clamp(292px,38dvh,306px);
--layout-home-compact-hero-pad:18px 20px 12px;
--layout-home-compact-hero-pad-right:clamp(198px,20vw,218px);
--layout-home-compact-hero-copy-width:460px;
--layout-home-compact-chip-width:clamp(376px,37vw,388px);
--layout-home-compact-card-pad:10px;
--layout-home-compact-card-inner-pad:3px;
--layout-home-compact-nav-padding:var(--layout-nav-padding-compact);
--layout-home-compact-nav-gap:9px;
--layout-home-compact-nav-logo-width:190px;
--layout-home-compact-nav-logo-font:.94rem;
--layout-home-compact-nav-btn-width:120px;
--layout-home-compact-nav-btn-wide-width:150px;
--layout-home-compact-nav-btn-font:.7rem;
--layout-home-compact-nav-profile-width:104px;
--layout-home-compact-nav-profile-min-height:40px;
--layout-home-compact-nav-profile-padding:5px 8px 5px 6px;
--layout-home-compact-nav-profile-gap:7px;
--layout-home-compact-hero-title-font:clamp(1.78rem,2.38vw,1.98rem);
--layout-home-compact-hero-sub-font:clamp(.74rem,.98vw,.84rem);
--layout-home-compact-card-title-font:clamp(.78rem,1.1vw,.86rem);
--layout-home-compact-card-sub-font:clamp(.54rem,.8vw,.62rem);
--layout-home-compact-card-progress-font:clamp(.46rem,.66vw,.52rem);
--layout-home-compact-card-button-font:clamp(.6rem,.78vw,.66rem);
--layout-home-card-icon-size-landscape:clamp(50px,5.2vw,56px);
--layout-home-card-button-padding-landscape:4px 12px;
--layout-home-card-button-min-height-landscape:26px;
--layout-home-compact-info-head-font:clamp(.66rem,.86vw,.78rem);
--layout-home-compact-info-title-font:.8rem;
--layout-home-compact-info-desc-font:.66rem;
--layout-home-compact-promo-journey-padding:7px 9px;
--layout-home-compact-promo-journey-gap:7px;
--layout-home-compact-promo-row-padding:3px 5px 3px 2px;
--layout-home-compact-promo-row-gap:5px;
--layout-home-compact-promo-stat-font:.62rem;
--layout-home-compact-promo-pnums-min-width:64px;
--layout-home-compact-daily-row-padding:7px 8px;
--layout-home-compact-daily-label-font:.74rem;
--layout-home-compact-daily-info-font:.64rem;
--right-panel-promo-stat-row-height:51px;
--right-panel-stat-icon-size:var(--layout-home-rail-progress-icon-size-landscape);
--right-panel-stat-row-gap:var(--layout-home-compact-promo-row-gap);
--right-panel-stat-row-padding:var(--layout-home-compact-promo-row-padding);
--right-panel-stat-label-size:var(--layout-home-compact-promo-stat-font);
--right-panel-stat-value-size:var(--layout-home-compact-promo-stat-font);
--right-panel-stat-bar-height:var(--layout-home-dash-bar-height);
}
#main.main-fit-view .hero-mascot{
width:clamp(180px,18vw,196px) !important;
right:4px !important;
bottom:8px !important;
}
html:has(body.route-fit-view #main.main-fit-view .profile-screen--help),
body.route-fit-view:has(#main.main-fit-view .profile-screen--help),
body.route-fit-view:has(#main.main-fit-view .profile-screen--help) #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
#main.main-fit-view:has(.profile-screen--help){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important;
}
#main.main-fit-view .profile-screen--help{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
#main{
--layout-choice-adventure-gap:6px;
--layout-choice-adventure-card-gap:6px;
--layout-choice-adventure-card-padding:8px 9px;
--layout-choice-adventure-fit-gap:5px;
--layout-choice-adventure-fit-banner-padding:6px 9px;
--layout-choice-adventure-fit-card-padding:8px 9px;
--layout-choice-adventure-fit-card-gap:5px;
--layout-choice-adventure-fit-button-padding:7px 9px;
}
body.route-play-view:has(#main.main-play-view .choiceadventure-round-screen),
body.route-play-view:has(#main.main-play-view .choiceadventure-round-screen) #app{
height:100vh !important;
height:100svh !important;
height:100dvh !important;
min-height:100vh !important;
min-height:100svh !important;
min-height:100dvh !important;
max-height:100vh !important;
max-height:100svh !important;
max-height:100dvh !important;
overflow:hidden !important;
overscroll-behavior:none !important;
}
#main.main-play-view:has(.choiceadventure-round-screen){
min-height:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding-bottom:0 !important;
}
.choiceadventure-round-screen,
.choiceadventure-round-screen .choiceadventure-cards,
.choiceadventure-round-screen .ch-info-card,
.choiceadventure-round-screen .ch-action-card{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
.choiceadventure-round-screen{
gap:var(--layout-choice-adventure-fit-gap) !important;
}
.choiceadventure-round-screen .ca-lobby-banner{
padding:var(--layout-choice-adventure-fit-banner-padding) !important;
gap:8px !important;
}
.choiceadventure-round-screen .choiceadventure-cards{
grid-template-columns:minmax(180px,.56fr) minmax(0,1.44fr) !important;
gap:var(--layout-choice-adventure-card-gap) !important;
align-items:start !important;
}
.choiceadventure-round-screen .ch-info-card,
.choiceadventure-round-screen .ch-action-card{
padding:var(--layout-choice-adventure-fit-card-padding) !important;
gap:var(--layout-choice-adventure-fit-card-gap) !important;
}
.choiceadventure-round-screen .choiceadventure-story-card{
padding:8px 9px !important;
gap:4px !important;
}
.choiceadventure-round-screen .choiceadventure-story-top{
gap:4px !important;
margin-bottom:3px !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene{
gap:5px !important;
margin-bottom:4px !important;
}
.choiceadventure-round-screen .choiceadventure-story-emoji{
width:34px !important;
height:34px !important;
border-radius:12px !important;
font-size:1.2rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy strong{
font-size:.78rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy span{
font-size:.6rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-text{
font-size:.88rem !important;
line-height:1.12 !important;
}
.choiceadventure-round-screen .choiceadventure-story-question{
padding:5px 6px !important;
margin-bottom:4px !important;
}
.choiceadventure-round-screen .choiceadventure-story-tipline{
padding:4px 5px !important;
font-size:.6rem !important;
line-height:1.12 !important;
}
.choiceadventure-round-screen .ca-action-stall{
width:48px !important;
height:48px !important;
border-radius:15px !important;
font-size:1.45rem !important;
}
.choiceadventure-round-screen .ch-action-title{
font-size:.84rem !important;
}
.choiceadventure-round-screen .ch-action-sub{
font-size:.6rem !important;
line-height:1.12 !important;
}
.choiceadventure-round-screen .choiceadventure-plan-progress{
padding:5px 6px !important;
font-size:.64rem !important;
margin:1px 0 2px !important;
}
.choiceadventure-round-screen .choiceadventure-decision-block{
padding:4px !important;
gap:3px !important;
border-radius:12px !important;
}
.choiceadventure-round-screen .choiceadventure-decision-title{
gap:2px 4px !important;
font-size:.58rem !important;
}
.choiceadventure-round-screen .choiceadventure-decision-title strong{
font-size:.68rem !important;
}
.choiceadventure-round-screen .choiceadventure-choice-stack{
gap:3px !important;
}
.choiceadventure-round-screen .choiceadventure-choice-btn{
min-height:36px !important;
padding:5px 6px !important;
gap:6px !important;
border-radius:12px !important;
}
.choiceadventure-round-screen .choiceadventure-choice-num{
width:19px !important;
height:19px !important;
border-radius:7px !important;
font-size:.54rem !important;
}
.choiceadventure-round-screen .choiceadventure-choice-copy strong{
font-size:.62rem !important;
line-height:1.06 !important;
}
.choiceadventure-round-screen .choiceadventure-choice-copy em{
display:none !important;
}
.choiceadventure-round-screen .ca-actions{
margin-top:1px !important;
gap:4px !important;
}
.choiceadventure-round-screen .ca-btn{
min-height:34px !important;
padding:var(--layout-choice-adventure-fit-button-padding) !important;
font-size:.7rem !important;
}
}
@media (min-width:1180px) and (max-width:1199px) and (orientation:landscape) and (min-height:760px){
#nav{
padding:var(--layout-nav-padding-compact) !important;
gap:10px !important;
}
#nav .nav-left{
gap:10px !important;
}
#nav .nav-logo{
flex:0 0 210px !important;
min-width:210px !important;
max-width:210px !important;
font-size:.98rem !important;
}
#nav .nav-btn{
flex:0 1 136px !important;
font-size:.74rem !important;
}
#nav #nb-insights{
flex-basis:168px !important;
}
#nav .nav-right{
gap:8px !important;
}
#nav .nav-profile{
min-height:42px !important;
padding:6px 10px 6px 6px !important;
gap:8px !important;
}
#nav .nav-profile-info{
max-width:120px !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-compact-shell-gap:var(--layout-home-dashboard-gap);
--layout-home-compact-side-gap:8px;
--layout-home-compact-hero-height:clamp(246px,28dvh,268px);
--layout-home-compact-mode-height:clamp(210px,25dvh,232px);
--layout-home-compact-promo-height:clamp(338px,42dvh,348px);
--layout-home-compact-info-height:clamp(184px,21.5dvh,198px);
--layout-home-compact-daily-height:clamp(294px,36dvh,306px);
--layout-home-compact-hero-pad:18px 20px 14px;
--layout-home-compact-hero-pad-right:286px;
--layout-home-compact-hero-copy-width:520px;
--layout-home-compact-chip-width:420px;
--layout-home-compact-card-pad:14px;
--layout-home-compact-card-inner-pad:6px;
--layout-home-compact-info-title-font:.8rem;
--layout-home-compact-info-desc-font:.66rem;
--layout-home-compact-nav-padding:var(--layout-nav-padding-compact);
--layout-home-compact-nav-gap:10px;
--layout-home-compact-nav-logo-width:210px;
--layout-home-compact-nav-logo-font:.98rem;
--layout-home-compact-nav-btn-width:136px;
--layout-home-compact-nav-btn-wide-width:168px;
--layout-home-compact-nav-btn-font:.74rem;
--layout-home-compact-nav-profile-width:120px;
--layout-home-compact-nav-profile-min-height:42px;
--layout-home-compact-nav-profile-padding:6px 10px 6px 6px;
--layout-home-compact-nav-profile-gap:8px;
--layout-home-compact-promo-journey-padding:8px 10px;
--layout-home-compact-promo-journey-gap:8px;
--layout-home-compact-promo-row-padding:4px 6px 4px 2px;
--layout-home-compact-promo-row-gap:6px;
--layout-home-compact-promo-stat-font:.68rem;
--layout-home-compact-promo-pnums-min-width:70px;
--layout-home-compact-daily-row-padding:8px 9px;
--layout-home-compact-daily-label-font:.74rem;
--layout-home-compact-daily-info-font:.64rem;
--right-panel-promo-stat-row-height:49px;
--right-panel-stat-icon-size:var(--layout-home-rail-progress-icon-size-landscape);
--right-panel-stat-row-gap:var(--layout-home-compact-promo-row-gap);
--right-panel-stat-row-padding:var(--layout-home-compact-promo-row-padding);
--right-panel-stat-label-size:var(--layout-home-compact-promo-stat-font);
--right-panel-stat-value-size:var(--layout-home-compact-promo-stat-font);
--right-panel-stat-bar-height:var(--layout-home-dash-bar-height);
}
#main{
--layout-choice-adventure-gap:10px;
--layout-choice-adventure-banner-padding:12px 16px;
--layout-choice-adventure-banner-gap:12px;
--layout-choice-adventure-card-gap:8px;
--layout-choice-adventure-card-padding:10px 11px;
--layout-choice-adventure-fit-gap:6px;
--layout-choice-adventure-fit-banner-padding:7px 10px;
--layout-choice-adventure-fit-card-padding:9px 10px;
--layout-choice-adventure-fit-card-gap:6px;
--layout-choice-adventure-fit-button-padding:8px 10px;
--layout-choice-adventure-result-stack-gap:6px;
--layout-choice-adventure-result-section-padding:8px 9px;
--layout-choice-adventure-result-step-gap:4px;
--layout-choice-adventure-result-story-gap:4px;
--layout-choice-adventure-result-chip-padding:5px 6px;
}
body.route-play-view #main.main-play-view:has(.choiceadventure-lobby-screen),
body.route-play-view #main.main-play-view:has(.choiceadventure-round-screen),
body.route-play-view #main.main-play-view:has(.choiceadventure-result-screen){
padding-bottom:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
body:has(#main .choiceadventure-result-screen),
body:has(#main .choiceadventure-result-screen) #app{
height:100vh !important;
height:100svh !important;
height:100dvh !important;
min-height:100vh !important;
min-height:100svh !important;
min-height:100dvh !important;
max-height:100vh !important;
max-height:100svh !important;
max-height:100dvh !important;
overflow:hidden !important;
}
#main:has(.choiceadventure-result-screen){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding-bottom:0 !important;
}
.choiceadventure-lobby-screen,
.choiceadventure-round-screen,
.choiceadventure-result-screen{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
.choiceadventure-lobby-screen .choiceadventure-cards,
.choiceadventure-round-screen .choiceadventure-cards,
.choiceadventure-result-screen .choiceadventure-cards{
flex:0 0 auto !important;
min-height:0 !important;
height:auto !important;
align-items:start !important;
overflow:visible !important;
}
.choiceadventure-lobby-screen .ch-info-card,
.choiceadventure-lobby-screen .ch-action-card,
.choiceadventure-round-screen .ch-info-card,
.choiceadventure-round-screen .ch-action-card,
.choiceadventure-result-screen .choiceadventure-result-main-card{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
.choiceadventure-lobby-screen{
gap:var(--layout-choice-adventure-fit-gap) !important;
}
.choiceadventure-lobby-screen .ca-lobby-banner{
padding:var(--layout-choice-adventure-fit-banner-padding) !important;
gap:var(--layout-choice-adventure-banner-gap) !important;
}
.choiceadventure-lobby-screen .ch-info-card,
.choiceadventure-lobby-screen .ch-action-card{
padding:var(--layout-choice-adventure-fit-card-padding) !important;
gap:var(--layout-choice-adventure-fit-card-gap) !important;
}
.choiceadventure-round-screen{
gap:var(--layout-choice-adventure-fit-gap) !important;
}
.choiceadventure-round-screen .ca-lobby-banner{
padding:var(--layout-choice-adventure-fit-banner-padding) !important;
gap:var(--layout-choice-adventure-banner-gap) !important;
}
.choiceadventure-round-screen .choiceadventure-cards{
grid-template-columns:minmax(188px,0.58fr) minmax(0,1.42fr) !important;
gap:var(--layout-choice-adventure-card-gap) !important;
}
.choiceadventure-round-screen .ch-info-card,
.choiceadventure-round-screen .ch-action-card{
padding:var(--layout-choice-adventure-fit-card-padding) !important;
gap:var(--layout-choice-adventure-fit-card-gap) !important;
}
.choiceadventure-round-screen .choiceadventure-story-card{
padding:9px 10px !important;
gap:4px !important;
}
.choiceadventure-round-screen .choiceadventure-story-top{
gap:5px !important;
margin-bottom:4px !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene{
gap:6px !important;
margin-bottom:5px !important;
}
.choiceadventure-round-screen .choiceadventure-story-emoji{
width:36px !important;
height:36px !important;
border-radius:13px !important;
font-size:1.28rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy strong{
font-size:.82rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy span{
font-size:.64rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-text{
font-size:.92rem !important;
line-height:1.16 !important;
}
.choiceadventure-round-screen .choiceadventure-story-question{
padding:6px 7px !important;
margin-bottom:5px !important;
}
.choiceadventure-round-screen .choiceadventure-story-tipline{
padding:4px 6px !important;
font-size:.64rem !important;
line-height:1.14 !important;
}
.choiceadventure-round-screen .ca-action-stall{
width:52px !important;
height:52px !important;
border-radius:16px !important;
font-size:1.56rem !important;
}
.choiceadventure-round-screen .ch-action-title{
font-size:.88rem !important;
}
.choiceadventure-round-screen .ch-action-sub{
font-size:.64rem !important;
line-height:1.14 !important;
}
.choiceadventure-round-screen .choiceadventure-plan-progress{
padding:5px 7px !important;
font-size:.68rem !important;
}
.choiceadventure-round-screen .choiceadventure-decision-block{
padding:5px !important;
gap:4px !important;
}
.choiceadventure-round-screen .choiceadventure-decision-title{
gap:3px 5px !important;
font-size:.62rem !important;
}
.choiceadventure-round-screen .choiceadventure-decision-title strong{
font-size:.72rem !important;
}
.choiceadventure-round-screen .choiceadventure-selected-chip{
padding:2px 4px !important;
font-size:.52rem !important;
}
.choiceadventure-round-screen .choiceadventure-choice-stack{
gap:4px !important;
}
.choiceadventure-round-screen .choiceadventure-choice-btn{
min-height:40px !important;
padding:6px 7px !important;
}
.choiceadventure-round-screen .choiceadventure-choice-num{
width:20px !important;
height:20px !important;
border-radius:7px !important;
font-size:.58rem !important;
}
.choiceadventure-round-screen .choiceadventure-choice-copy strong{
font-size:.66rem !important;
line-height:1.08 !important;
}
.choiceadventure-round-screen .choiceadventure-choice-copy em{
display:none !important;
}
.choiceadventure-round-screen .choiceadventure-submit-note{
font-size:.64rem !important;
line-height:1.18 !important;
}
.choiceadventure-round-screen .ca-actions{
margin-top:2px !important;
gap:4px !important;
}
.choiceadventure-round-screen .ca-btn{
min-height:36px !important;
padding:var(--layout-choice-adventure-fit-button-padding) !important;
font-size:.74rem !important;
}
.choiceadventure-result-screen{
gap:var(--layout-choice-adventure-fit-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-cards{
max-width:920px !important;
gap:var(--layout-choice-adventure-fit-gap) !important;
}
.choiceadventure-result-screen .ca-lobby-banner{
padding:5px 8px !important;
gap:7px !important;
}
.choiceadventure-result-screen .lobby-banner-title{
font-size:.9rem !important;
line-height:1.02 !important;
}
.choiceadventure-result-screen .lobby-banner-sub{
font-size:.56rem !important;
line-height:1.1 !important;
}
.choiceadventure-result-screen .choiceadventure-result-main-card{
padding:var(--layout-choice-adventure-fit-card-padding) !important;
gap:var(--layout-choice-adventure-result-stack-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-result-body{
grid-template-columns:minmax(0,1fr) !important;
gap:var(--layout-choice-adventure-result-stack-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-result-column--story{
grid-template-rows:auto auto !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight,
.choiceadventure-result-screen .choiceadventure-brief-card{
padding:5px 7px !important;
}
.choiceadventure-result-screen .story-progress-top,
.choiceadventure-result-screen .choiceadventure-brief-top{
margin-bottom:2px !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-row{
gap:6px !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-emoji{
width:34px !important;
height:34px !important;
border-radius:10px !important;
font-size:1.04rem !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-copy strong{
font-size:.76rem !important;
line-height:1.04 !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-copy span{
font-size:.54rem !important;
line-height:1.08 !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-grid{
gap:var(--layout-choice-adventure-result-step-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-card{
padding:7px !important;
gap:4px !important;
border-radius:13px !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-kicker{
font-size:.6rem !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-pick{
font-size:.72rem !important;
line-height:1.1 !important;
min-height:1.5em !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-note{
font-size:.56rem !important;
padding:3px 5px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:var(--layout-choice-adventure-result-step-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini{
padding:6px 7px !important;
gap:5px !important;
border-radius:13px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon{
width:24px !important;
height:24px !important;
flex:0 0 24px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon svg,
.choiceadventure-result-screen .choiceadventure-reward-mini-icon img{
width:18px !important;
height:18px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-copy strong{
font-size:.78rem !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-copy span{
font-size:.5rem !important;
line-height:1.06 !important;
}
.choiceadventure-result-screen .choiceadventure-result-storybeats{
gap:var(--layout-choice-adventure-result-story-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-story-chip,
.choiceadventure-result-screen .choiceadventure-story-tipline{
padding:var(--layout-choice-adventure-result-chip-padding) !important;
font-size:.62rem !important;
line-height:1.12 !important;
border-radius:11px !important;
}
.choiceadventure-result-screen .choiceadventure-story-beat-num{
width:16px !important;
height:16px !important;
flex:0 0 16px !important;
font-size:.52rem !important;
}
.choiceadventure-result-screen .ca-actions{
gap:4px !important;
}
.choiceadventure-result-screen .ca-actions .ca-btn{
min-height:36px !important;
padding:var(--layout-choice-adventure-fit-button-padding) !important;
font-size:.74rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════
NOTEBOOK BENCHMARK LOCK
1920x929 is the desktop/notebook benchmark. All 1200px+ app
interfaces inherit these fixed values, with one compact branch
for shorter notebook heights.
═══════════════════════════════════════════════════════════════ */
@media (min-width:1200px){
body.route-play-view #main.main-play-view:has(.challenge-lobby-horiz),
body.route-play-view #main.main-play-view:has(.choiceadventure-lobby-screen),
body.route-play-view #main.main-play-view:has(.choiceadventure-round-screen),
body.route-play-view #main.main-play-view:has(.choiceadventure-result-screen){
padding-bottom:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
.challenge-lobby-horiz,
.choiceadventure-lobby-screen,
.choiceadventure-round-screen,
.choiceadventure-result-screen{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
.challenge-lobby-horiz .ch-lobby-cards,
.choiceadventure-lobby-screen .choiceadventure-cards,
.choiceadventure-round-screen .choiceadventure-cards,
.choiceadventure-result-screen .choiceadventure-cards{
flex:0 0 auto !important;
min-height:0 !important;
height:auto !important;
align-items:start !important;
overflow:visible !important;
}
.choiceadventure-result-screen .choiceadventure-cards{
width:100% !important;
max-width:100% !important;
}
.challenge-lobby-horiz .ch-info-card,
.challenge-lobby-horiz .challenge-action-card,
.choiceadventure-lobby-screen .ch-info-card,
.choiceadventure-lobby-screen .ch-action-card,
.choiceadventure-round-screen .ch-info-card,
.choiceadventure-round-screen .ch-action-card,
.choiceadventure-result-screen .choiceadventure-result-main-card{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
.choiceadventure-lobby-screen .ch-info-card,
.choiceadventure-lobby-screen .ch-action-card,
.choiceadventure-round-screen .ch-info-card,
.choiceadventure-round-screen .ch-action-card,
.choiceadventure-result-screen .choiceadventure-result-main-card{
min-height:0 !important;
}
#main{
--layout-notebook-shell-max-width:1280px;
--layout-notebook-choice-adventure-shell-max-width:100%;
--layout-notebook-story-shell-max-width:920px;
--layout-notebook-story-wide-shell-max-width:1120px;
--layout-notebook-result-shell-max-width:760px;
--layout-notebook-choice-adventure-result-shell-max-width:1000px;
--layout-story-shell-max-width:var(--layout-notebook-shell-max-width);
--layout-story-solo-max-width:920px;
--layout-story-content-max-width:860px;
--layout-story-title-max-width:760px;
--layout-story-body-max-width:680px;
--layout-story-wide-solo-max-width:var(--layout-story-shell-max-width);
--layout-story-wide-solo-padding:12px;
--layout-story-cta-min-height:42px;
--layout-story-secondary-action-min-height:34px;
--layout-lobby-gap:12px;
--layout-lobby-shell-radius:26px;
--layout-lobby-banner-padding:14px 18px;
--layout-lobby-banner-gap:12px;
--layout-lobby-banner-radius:18px;
--layout-lobby-card-gap:12px;
--layout-lobby-card-radius:18px;
--layout-lobby-card-padding:16px;
--layout-lobby-action-padding:18px 16px;
--layout-lobby-action-gap:12px;
--layout-challenge-max-width:860px;
--layout-challenge-gap:8px;
--layout-challenge-padding:12px 16px;
--layout-challenge-card-radius:16px;
--layout-challenge-question-padding:9px 10px;
--layout-challenge-choice-gap:8px;
--layout-challenge-topbar-gap:10px;
--layout-challenge-round-info-size:0.82rem;
--layout-challenge-round-strong-size:0.95rem;
--layout-challenge-vs-padding:8px 16px;
--layout-challenge-avatar-size:54px;
--layout-challenge-name-size:0.78rem;
--layout-challenge-score-size:1.5rem;
--layout-challenge-vs-badge-size:38px;
--layout-challenge-vs-badge-margin:0 10px;
--layout-challenge-question-icon-size:var(--layout-play-category-icon-size);
--layout-challenge-question-title-size:1.16rem;
--layout-challenge-question-title-line-height:1.18;
--layout-challenge-question-title-gap:12px;
--layout-challenge-question-body-size:1.04rem;
--layout-challenge-question-body-line-height:1.32;
--layout-challenge-choice-min-height:56px;
--layout-challenge-choice-padding:10px 12px;
--layout-challenge-choice-copy-size:0.92rem;
--layout-challenge-choice-copy-line-height:1.26;
--layout-result-max-width:760px;
--layout-result-inner-max-width:680px;
--layout-story-result-shell-max-width:calc(var(--layout-result-inner-max-width) + 32px);
--layout-result-padding:16px 14px;
--layout-result-compact-padding:14px 14px 12px;
--layout-result-icon-size:136px;
--layout-choice-adventure-gap:12px;
--layout-choice-adventure-banner-padding:12px 16px;
--layout-choice-adventure-banner-gap:12px;
--layout-choice-adventure-banner-radius:22px;
--layout-choice-adventure-card-gap:12px;
--layout-choice-adventure-card-padding:16px;
--layout-choice-adventure-card-radius:22px;
--layout-choice-adventure-result-max-width:920px;
--layout-choice-adventure-decision-padding:12px;
--layout-choice-adventure-choice-gap:10px;
--layout-choice-adventure-choice-padding:12px 10px;
--layout-choice-adventure-button-padding:11px 12px;
--layout-choice-adventure-fit-gap:8px;
--layout-choice-adventure-fit-banner-padding:8px 12px;
--layout-choice-adventure-fit-card-padding:12px 14px;
--layout-choice-adventure-fit-card-gap:10px;
--layout-choice-adventure-fit-button-padding:10px 12px;
--layout-choice-adventure-story-question-min-height:clamp(150px,20dvh,196px);
--layout-choice-adventure-home-card-content-gap:6px;
--layout-choice-adventure-home-icon-width:54px;
--layout-choice-adventure-home-icon-height:58px;
--layout-choice-adventure-locked-badge-padding:5px 12px;
--layout-choice-adventure-locked-badge-gap:5px;
--layout-choice-adventure-banner-icon-size:56px;
--layout-choice-adventure-banner-icon-radius:18px;
--layout-choice-adventure-banner-meta-gap:6px;
--layout-choice-adventure-banner-stat-padding:4px 8px;
--layout-choice-adventure-flow-step-radius:18px;
--layout-match-gap:8px;
--layout-match-playfield-gap:10px;
--layout-match-card-gap:7px;
--layout-match-target-padding:10px 11px;
--layout-match-target-radius:16px;
--layout-match-slot-min-height:40px;
--layout-match-slot-padding:8px 10px;
--layout-match-choice-padding:10px 11px;
--layout-challenge-round-result-max-width:760px;
--layout-challenge-round-result-padding:18px;
--layout-challenge-round-grid-gap:10px;
--layout-challenge-round-card-padding:12px;
--layout-challenge-round-avatar-size:38px;
--layout-challenge-round-score-padding:12px;
--layout-challenge-round-next-margin:8px;
--layout-challenge-timer-gap:8px;
--layout-challenge-timer-margin:4px 0 6px;
--layout-challenge-timer-padding:4px 8px;
--layout-challenge-timer-radius:10px;
--layout-challenge-timer-size:36px;
--layout-challenge-winner-max-width:760px;
--layout-challenge-winner-padding:20px 24px 22px;
--layout-challenge-finish-max-width:760px;
--layout-challenge-finish-padding:20px 20px 16px;
--layout-challenge-finish-radius:24px;
--layout-challenge-finish-top-gap:12px;
--layout-challenge-finish-stamp-size:82px;
--layout-challenge-finish-stamp-radius:24px;
--layout-challenge-finish-kicker-padding:8px 14px;
--layout-challenge-finish-scoreboard-gap:10px;
--layout-challenge-finish-scoreboard-padding:12px;
--layout-challenge-finish-scoreboard-radius:20px;
--layout-challenge-finish-score-side-padding:12px 10px;
--layout-challenge-finish-score-avatar-size:108px;
--layout-challenge-finish-summary-padding:16px 18px;
--layout-challenge-finish-summary-radius:22px;
--layout-challenge-finish-mini-gap:10px;
--layout-challenge-finish-mini-padding:14px 12px;
--layout-challenge-finish-mini-radius:18px;
--layout-challenge-finish-actions-gap:8px;
--layout-challenge-finish-actions-margin:12px;
}
.story-lobby-horiz,
.challenge-lobby-horiz{
width:min(100%,var(--layout-notebook-shell-max-width)) !important;
max-width:var(--layout-notebook-shell-max-width) !important;
margin-left:auto !important;
margin-right:auto !important;
}
.choiceadventure-shell{
width:min(100%,var(--layout-notebook-choice-adventure-shell-max-width)) !important;
max-width:var(--layout-notebook-choice-adventure-shell-max-width) !important;
margin-left:auto !important;
margin-right:auto !important;
}
.story-lobby-banner .lobby-banner-title,
.challenge-lobby-horiz .lobby-banner-title,
.choiceadventure-shell .lobby-banner-title{
font-size:1.32rem !important;
line-height:1.03 !important;
}
.story-lobby-banner .lobby-banner-sub,
.challenge-lobby-horiz .lobby-banner-sub,
.choiceadventure-shell .lobby-banner-sub{
font-size:.72rem !important;
line-height:1.2 !important;
}
.story-lobby-banner .lobby-banner-icon,
.challenge-lobby-horiz .lobby-banner-icon,
.choiceadventure-shell .lobby-banner-icon{
font-size:2.25rem !important;
}
.story-info-card,
.challenge-lobby-horiz .ch-info-card{
padding:16px !important;
gap:10px !important;
}
.story-action-card,
.challenge-lobby-horiz .challenge-action-card{
padding:18px 16px !important;
gap:12px !important;
}
.story-action-icon{
width:104px !important;
height:104px !important;
border-radius:28px !important;
font-size:2.7rem !important;
}
.challenge-lobby-horiz .ch-action-avatar{
width:76px !important;
height:76px !important;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge){
--story-shell-pad:12px;
--story-panel-pad:12px;
--story-card-pad:12px;
--story-gap:8px;
--story-title-size:1.18rem;
--story-question-size:1.08rem;
--story-choice-size:0.86rem;
--story-meta-size:0.62rem;
--story-choice-min:56px;
--story-variant-label-size:0.66rem;
--story-variant-help-size:0.72rem;
--story-variant-copy-size:0.78rem;
--story-variant-slot-size:0.72rem;
--story-variant-slot-height:48px;
--story-variant-option-height:56px;
--story-variant-target-gap:6px;
--story-variant-column-gap:5px;
--story-variant-action-gap:6px;
--story-variant-target-pad:8px 10px;
--story-variant-slot-min:28px;
--story-variant-slot-pad:4px 7px;
--story-variant-choice-height:42px;
--story-variant-choice-pad:8px 10px;
--story-variant-choice-icon:26px;
width:min(100%,var(--layout-story-shell-max-width)) !important;
max-width:var(--layout-story-shell-max-width) !important;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-icon-ring{
width:var(--layout-play-category-icon-size) !important;
height:var(--layout-play-category-icon-size) !important;
}
.play-result.play-result--story,
.play-result.play-result--sequence,
.play-result.play-result--match{
width:min(100%,var(--layout-story-result-shell-max-width)) !important;
max-width:var(--layout-story-result-shell-max-width) !important;
}
.play-result.play-result--story .res-title,
.play-result.play-result--sequence .res-title,
.play-result.play-result--match .res-title{
font-size:1.08rem !important;
}
.sc-grid.sc-grid--challenge{
width:min(100%,var(--layout-notebook-shell-max-width)) !important;
max-width:var(--layout-notebook-shell-max-width) !important;
padding:10px 12px 12px !important;
}
.sc-grid.sc-grid--challenge .ch-question-card{
padding:var(--layout-challenge-question-padding) !important;
}
.sc-grid.sc-grid--challenge .challenge-timer-row{
margin:4px 0 6px !important;
padding:4px 8px !important;
}
.sc-grid.sc-grid--challenge .challenge-timer{
min-width:var(--layout-challenge-timer-size) !important;
height:var(--layout-challenge-timer-size) !important;
}
.sc-grid.sc-grid--challenge .ch-choices .cho-btn{
min-height:56px !important;
padding:10px 12px !important;
}
.challenge-round-result,
.challenge-winner-card,
.challenge-finish-card{
max-width:var(--layout-notebook-result-shell-max-width) !important;
}
.choiceadventure-shell .lobby-banner-title{
font-size:1.52rem !important;
}
.choiceadventure-lobby-screen .lobby-banner-title,
.choiceadventure-result-screen .lobby-banner-title{
font-size:1.22rem !important;
line-height:1.08 !important;
}
.choiceadventure-result-screen .lobby-banner-title{
font-size:.9rem !important;
line-height:1.02 !important;
}
.choiceadventure-lobby-screen .lobby-banner-sub,
.choiceadventure-result-screen .lobby-banner-sub{
font-size:.74rem !important;
line-height:1.24 !important;
}
.choiceadventure-result-screen .lobby-banner-sub{
font-size:.56rem !important;
line-height:1.1 !important;
}
.choiceadventure-lobby-screen .lobby-banner-icon,
.choiceadventure-result-screen .lobby-banner-icon{
font-size:2.1rem !important;
}
.choiceadventure-result-screen .lobby-banner-icon{
font-size:1.28rem !important;
width:32px !important;
height:32px !important;
flex-basis:32px !important;
border-radius:10px !important;
}
.choiceadventure-lobby-screen .choiceadventure-cards{
gap:10px !important;
}
.choiceadventure-round-screen .choiceadventure-cards{
grid-template-columns:minmax(228px,0.68fr) minmax(0,1.32fr) !important;
align-items:stretch !important;
}
.choiceadventure-round-screen .ch-info-card,
.choiceadventure-round-screen .ch-action-card{
align-self:stretch !important;
}
.choiceadventure-round-screen .ch-info-card{
display:flex !important;
flex-direction:column !important;
}
.choiceadventure-lobby-screen .ch-info-card,
.choiceadventure-lobby-screen .ch-action-card,
.choiceadventure-result-screen .choiceadventure-result-main-card{
padding:var(--layout-choice-adventure-fit-card-padding) !important;
gap:var(--layout-choice-adventure-fit-card-gap) !important;
}
.choiceadventure-lobby-screen .story-progress-card,
.choiceadventure-lobby-screen .choiceadventure-mission-card,
.choiceadventure-lobby-screen .choiceadventure-reward-explain{
padding:10px 11px !important;
}
.choiceadventure-lobby-screen .choiceadventure-flow-step{
padding:8px 9px !important;
gap:8px !important;
}
.choiceadventure-lobby-screen .choiceadventure-flow-icon{
width:42px !important;
height:42px !important;
flex:0 0 42px !important;
}
.choiceadventure-round-screen .choiceadventure-story-card{
padding:12px !important;
gap:6px !important;
flex:1 1 auto !important;
height:100% !important;
display:grid !important;
grid-template-rows:auto auto auto minmax(var(--layout-choice-adventure-story-question-min-height),1fr) auto !important;
}
.choiceadventure-round-screen .choiceadventure-story-text{
font-size:1.16rem !important;
line-height:1.34 !important;
}
.choiceadventure-round-screen .choiceadventure-story-question{
padding:8px 10px !important;
margin-bottom:8px !important;
min-height:var(--layout-choice-adventure-story-question-min-height) !important;
display:flex !important;
align-items:flex-start !important;
}
.choiceadventure-round-screen .choiceadventure-story-tipline{
padding:6px 8px !important;
font-size:.76rem !important;
line-height:1.28 !important;
}
.choiceadventure-round-screen .choiceadventure-decision-block{
padding:6px !important;
}
.choiceadventure-round-screen .choiceadventure-choice-btn{
padding:7px 8px !important;
min-height:52px !important;
}
.choiceadventure-round-screen .choiceadventure-choice-copy strong{
font-size:.86rem !important;
line-height:1.22 !important;
}
.choiceadventure-round-screen .choiceadventure-choice-copy em{
font-size:.72rem !important;
line-height:1.24 !important;
}
.choiceadventure-round-screen .ca-actions{
grid-template-columns:1fr !important;
gap:6px !important;
margin-top:8px !important;
}
.choiceadventure-round-screen .ca-btn{
min-height:42px !important;
padding:10px 12px !important;
font-size:.8rem !important;
}
.choiceadventure-result-screen .choiceadventure-cards{
max-width:var(--layout-notebook-choice-adventure-result-shell-max-width) !important;
}
.choiceadventure-result-screen .ca-lobby-banner{
padding:5px 8px !important;
gap:7px !important;
}
.choiceadventure-result-screen .choiceadventure-result-main-card{
padding:12px 14px !important;
gap:8px !important;
height:100% !important;
}
.choiceadventure-result-screen .choiceadventure-result-body{
gap:8px !important;
grid-template-columns:minmax(0,1fr) !important;
}
.choiceadventure-result-screen .choiceadventure-result-column,
.choiceadventure-result-screen .choiceadventure-result-column--story{
display:contents !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight,
.choiceadventure-result-screen .choiceadventure-brief-card{
padding:5px 7px !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-card{
padding:8px 9px !important;
gap:5px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini{
padding:5px 7px !important;
gap:5px !important;
}
.choiceadventure-result-screen .choiceadventure-story-chip,
.choiceadventure-result-screen .choiceadventure-story-tipline{
padding:6px 8px !important;
font-size:.74rem !important;
line-height:1.22 !important;
}
.choiceadventure-result-screen .ca-actions .ca-btn{
min-height:42px !important;
padding:10px 12px !important;
}
}
@media (min-width:1200px) and (max-height:820px){
#main{
--layout-lobby-gap:10px;
--layout-lobby-banner-padding:10px 14px;
--layout-lobby-banner-gap:10px;
--layout-lobby-card-padding:14px;
--layout-lobby-action-padding:16px 14px;
--layout-lobby-action-gap:10px;
--layout-story-wide-solo-padding:10px;
--layout-story-cta-min-height:40px;
--layout-story-secondary-action-min-height:32px;
--layout-result-compact-padding:12px 12px 10px;
--layout-result-icon-size:120px;
--layout-choice-adventure-fit-gap:6px;
--layout-choice-adventure-fit-banner-padding:7px 10px;
--layout-choice-adventure-fit-card-padding:10px 12px;
--layout-choice-adventure-fit-card-gap:8px;
--layout-choice-adventure-fit-button-padding:9px 11px;
--layout-choice-adventure-story-question-min-height:clamp(126px,18dvh,162px);
--layout-challenge-max-width:920px;
--layout-challenge-gap:6px;
--layout-challenge-padding:8px 10px;
--layout-challenge-question-padding:12px 14px;
--layout-challenge-choice-gap:6px;
--layout-challenge-topbar-gap:6px;
--layout-challenge-round-info-size:0.9rem;
--layout-challenge-round-strong-size:0.98rem;
--layout-challenge-vs-padding:6px 10px;
--layout-challenge-avatar-size:44px;
--layout-challenge-name-size:0.72rem;
--layout-challenge-score-size:1.28rem;
--layout-challenge-vs-badge-size:34px;
--layout-challenge-vs-badge-margin:0 8px;
--layout-challenge-question-icon-size:var(--layout-play-category-icon-size-compact);
--layout-challenge-question-title-size:1.04rem;
--layout-challenge-question-title-line-height:1.12;
--layout-challenge-question-title-gap:9px;
--layout-challenge-question-body-size:0.96rem;
--layout-challenge-question-body-line-height:1.18;
--layout-challenge-choice-min-height:42px;
--layout-challenge-choice-padding:8px 10px;
--layout-challenge-choice-copy-size:0.88rem;
--layout-challenge-choice-copy-line-height:1.2;
--layout-challenge-timer-gap:6px;
--layout-challenge-timer-margin:3px 0 4px;
--layout-challenge-timer-padding:3px 7px;
--layout-challenge-timer-size:32px;
--layout-challenge-round-result-padding:16px;
--layout-challenge-winner-padding:18px 20px 18px;
--layout-challenge-finish-padding:18px 18px 14px;
--layout-challenge-finish-stamp-size:74px;
--layout-challenge-finish-score-avatar-size:92px;
--layout-challenge-finish-summary-padding:14px 16px;
--layout-challenge-finish-mini-padding:12px 10px;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge){
--story-shell-pad:10px;
--story-panel-pad:10px;
--story-card-pad:10px;
--story-gap:6px;
--story-title-size:1.08rem;
--story-question-size:1rem;
--story-choice-size:0.82rem;
--story-meta-size:0.58rem;
--story-choice-min:48px;
--story-variant-label-size:0.62rem;
--story-variant-help-size:0.68rem;
--story-variant-copy-size:0.74rem;
--story-variant-slot-size:0.68rem;
--story-variant-slot-height:44px;
--story-variant-option-height:50px;
--story-variant-target-gap:5px;
--story-variant-column-gap:4px;
--story-variant-action-gap:5px;
--story-variant-target-pad:7px 9px;
--story-variant-slot-min:26px;
--story-variant-slot-pad:4px 6px;
--story-variant-choice-height:40px;
--story-variant-choice-pad:7px 9px;
--story-variant-choice-icon:24px;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-icon-ring{
width:var(--layout-play-category-icon-size-compact) !important;
height:var(--layout-play-category-icon-size-compact) !important;
}
.sc-grid.sc-grid--challenge{
padding:9px 10px 10px !important;
}
.challenge-lobby-horiz{
gap:8px !important;
}
.challenge-lobby-horiz .ch-lobby-banner{
padding:10px 14px !important;
gap:10px !important;
}
.challenge-lobby-horiz .lobby-banner-title{
font-size:1.18rem !important;
line-height:1.02 !important;
}
.challenge-lobby-horiz .lobby-banner-sub{
font-size:.68rem !important;
line-height:1.16 !important;
}
.challenge-lobby-horiz .ch-info-card,
.challenge-lobby-horiz .challenge-action-card{
padding:12px !important;
gap:8px !important;
}
.challenge-lobby-horiz .ch-action-avatar{
width:68px !important;
height:68px !important;
}
.challenge-lobby-horiz .ch-action-vs{
font-size:2.2rem !important;
}
.challenge-lobby-horiz .ch-action-vs--png{
width:74px !important;
height:74px !important;
font-size:0 !important;
text-shadow:none !important;
}
.challenge-lobby-horiz .challenge-rules-card{
padding:12px 12px 11px !important;
border-radius:18px !important;
}
.challenge-lobby-horiz .challenge-rules-kicker{
margin-bottom:8px !important;
font-size:.72rem !important;
}
.challenge-lobby-horiz .challenge-rule-row{
padding:8px 9px !important;
gap:8px !important;
border-radius:15px !important;
}
.challenge-lobby-horiz .challenge-rule-row + .challenge-rule-row{
margin-top:8px !important;
}
.challenge-lobby-horiz .challenge-rule-badge{
width:42px !important;
height:42px !important;
border-radius:10px !important;
}
.challenge-lobby-horiz .challenge-info-note,
.challenge-lobby-horiz .ch-action-sub{
font-size:.72rem !important;
line-height:1.24 !important;
}
.challenge-lobby-horiz .challenge-big-play{
min-height:40px !important;
padding:9px 12px !important;
}
.sc-grid.sc-grid--challenge .ch-choices .cho-btn{
min-height:var(--layout-challenge-choice-min-height) !important;
padding:var(--layout-challenge-choice-padding) !important;
}
.choiceadventure-lobby-screen{
gap:8px !important;
}
.choiceadventure-lobby-screen .ca-lobby-banner{
padding:7px 10px !important;
gap:10px !important;
}
.choiceadventure-lobby-screen .choiceadventure-cards{
grid-template-columns:minmax(250px,.84fr) minmax(0,1.16fr) !important;
gap:8px !important;
}
.choiceadventure-lobby-screen .ch-info-card,
.choiceadventure-lobby-screen .ch-action-card{
padding:10px 12px !important;
gap:8px !important;
}
.choiceadventure-lobby-screen .story-progress-card,
.choiceadventure-lobby-screen .choiceadventure-mission-card,
.choiceadventure-lobby-screen .choiceadventure-reward-explain{
padding:9px 10px !important;
}
.choiceadventure-lobby-screen .choiceadventure-flow-step{
padding:7px 8px !important;
gap:7px !important;
}
.choiceadventure-lobby-screen .choiceadventure-flow-icon{
width:40px !important;
height:40px !important;
flex:0 0 40px !important;
}
.choiceadventure-lobby-screen .choiceadventure-reward-chip{
padding:4px 7px !important;
font-size:.6rem !important;
}
.choiceadventure-lobby-screen .ca-actions{
gap:6px !important;
}
.choiceadventure-lobby-screen .ca-btn{
min-height:40px !important;
padding:9px 11px !important;
}
.choiceadventure-round-screen .choiceadventure-choice-btn{
min-height:44px !important;
padding:6px 7px !important;
}
.choiceadventure-round-screen{
gap:8px !important;
}
.choiceadventure-round-screen .ca-lobby-banner{
padding:7px 10px !important;
gap:10px !important;
}
.choiceadventure-round-screen .choiceadventure-cards{
grid-template-columns:minmax(208px,.66fr) minmax(0,1.34fr) !important;
gap:8px !important;
align-items:stretch !important;
}
.choiceadventure-round-screen .ch-info-card,
.choiceadventure-round-screen .ch-action-card{
padding:10px !important;
gap:6px !important;
align-self:stretch !important;
}
.choiceadventure-round-screen .ch-info-card{
display:flex !important;
flex-direction:column !important;
}
.choiceadventure-round-screen .choiceadventure-story-card{
padding:10px 11px !important;
gap:5px !important;
flex:1 1 auto !important;
height:100% !important;
display:grid !important;
grid-template-rows:auto auto minmax(var(--layout-choice-adventure-story-question-min-height),1fr) auto !important;
}
.choiceadventure-round-screen .choiceadventure-story-top{
gap:5px !important;
margin-bottom:5px !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene{
gap:7px !important;
margin-bottom:6px !important;
}
.choiceadventure-round-screen .choiceadventure-story-emoji{
width:38px !important;
height:38px !important;
border-radius:14px !important;
font-size:1.38rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy strong{
font-size:.86rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy span{
font-size:.68rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-text{
font-size:1rem !important;
line-height:1.26 !important;
}
.choiceadventure-round-screen .choiceadventure-story-question{
padding:7px 8px !important;
margin-bottom:6px !important;
min-height:var(--layout-choice-adventure-story-question-min-height) !important;
display:flex !important;
align-items:flex-start !important;
}
.choiceadventure-round-screen .choiceadventure-story-tipline{
padding:5px 6px !important;
font-size:.68rem !important;
line-height:1.18 !important;
}
.choiceadventure-round-screen .ca-action-stall{
width:56px !important;
height:56px !important;
border-radius:18px !important;
font-size:1.7rem !important;
}
.choiceadventure-round-screen .ch-action-title{
font-size:.94rem !important;
}
.choiceadventure-round-screen .ch-action-sub{
font-size:.68rem !important;
line-height:1.18 !important;
}
.choiceadventure-round-screen .choiceadventure-plan-progress{
padding:6px 8px !important;
font-size:.72rem !important;
}
.choiceadventure-round-screen .choiceadventure-decision-block{
padding:6px !important;
border-radius:14px !important;
}
.choiceadventure-round-screen .choiceadventure-decision-title{
gap:4px 6px !important;
font-size:.66rem !important;
}
.choiceadventure-round-screen .choiceadventure-decision-title strong{
font-size:.76rem !important;
}
.choiceadventure-round-screen .choiceadventure-selected-chip{
padding:2px 5px !important;
font-size:.56rem !important;
}
.choiceadventure-round-screen .choiceadventure-choice-stack{
gap:5px !important;
}
.choiceadventure-round-screen .choiceadventure-choice-num{
width:22px !important;
height:22px !important;
border-radius:8px !important;
font-size:.62rem !important;
}
.choiceadventure-round-screen .choiceadventure-choice-copy strong{
font-size:.7rem !important;
line-height:1.1 !important;
}
.choiceadventure-round-screen .choiceadventure-choice-copy em{
display:none !important;
}
.choiceadventure-round-screen .ca-actions{
margin-top:3px !important;
gap:5px !important;
}
.choiceadventure-round-screen .ca-btn,
.choiceadventure-result-screen .ca-actions .ca-btn{
min-height:38px !important;
padding:8px 10px !important;
}
.choiceadventure-result-screen{
gap:8px !important;
}
.choiceadventure-result-screen .choiceadventure-cards{
max-width:1000px !important;
}
.choiceadventure-result-screen .ca-lobby-banner{
padding:5px 8px !important;
gap:7px !important;
}
.choiceadventure-result-screen .lobby-banner-title{
font-size:.9rem !important;
line-height:1.02 !important;
}
.choiceadventure-result-screen .lobby-banner-sub{
font-size:.56rem !important;
line-height:1.1 !important;
}
.choiceadventure-result-screen .choiceadventure-cards{
gap:8px !important;
}
.choiceadventure-result-screen .choiceadventure-result-main-card{
padding:10px 11px !important;
gap:6px !important;
}
.choiceadventure-result-screen .choiceadventure-result-body{
gap:6px !important;
grid-template-columns:minmax(0,1fr) !important;
}
.choiceadventure-result-screen .choiceadventure-result-column,
.choiceadventure-result-screen .choiceadventure-result-column--story{
display:contents !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight,
.choiceadventure-result-screen .choiceadventure-brief-card{
padding:5px 7px !important;
}
.choiceadventure-result-screen .story-progress-top,
.choiceadventure-result-screen .choiceadventure-brief-top{
margin-bottom:2px !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-row{
gap:6px !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-emoji{
width:30px !important;
height:30px !important;
border-radius:10px !important;
font-size:1.04rem !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-copy strong{
font-size:.76rem !important;
line-height:1.04 !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-copy span{
font-size:.54rem !important;
line-height:1.08 !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-grid{
gap:4px !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-card{
padding:7px 7px 8px !important;
gap:4px !important;
border-radius:14px !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-kicker{
font-size:.62rem !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-pick{
font-size:.74rem !important;
line-height:1.12 !important;
min-height:1.6em !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-note{
font-size:.58rem !important;
padding:4px 5px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:4px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini{
padding:6px 7px !important;
gap:5px !important;
border-radius:14px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon{
width:26px !important;
height:26px !important;
flex:0 0 26px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon svg,
.choiceadventure-result-screen .choiceadventure-reward-mini-icon img{
width:20px !important;
height:20px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-copy strong{
font-size:.84rem !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-copy span{
font-size:.52rem !important;
line-height:1.08 !important;
}
.choiceadventure-result-screen .choiceadventure-result-storybeats{
gap:4px !important;
}
.choiceadventure-result-screen .choiceadventure-story-chip,
.choiceadventure-result-screen .choiceadventure-story-tipline{
padding:5px 6px !important;
font-size:.64rem !important;
line-height:1.14 !important;
border-radius:12px !important;
}
.choiceadventure-result-screen .choiceadventure-story-beat-num{
width:18px !important;
height:18px !important;
flex:0 0 18px !important;
font-size:.56rem !important;
}
.choiceadventure-result-screen .ca-actions{
gap:5px !important;
}
}
@media (max-width:768px), (max-height:699px){
body.route-play-view:has(#main.main-play-view .challenge-lobby-horiz),
body.route-play-view:has(#main.main-play-view .challenge-lobby-horiz) #app,
body.route-play-view:has(#main.main-play-view .choiceadventure-lobby-screen),
body.route-play-view:has(#main.main-play-view .choiceadventure-lobby-screen) #app,
body.route-play-view:has(#main.main-play-view .choiceadventure-round-screen),
body.route-play-view:has(#main.main-play-view .choiceadventure-round-screen) #app,
body.route-play-view:has(#main.main-play-view .choiceadventure-result-screen),
body.route-play-view:has(#main.main-play-view .choiceadventure-result-screen) #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
#main.main-play-view:has(.challenge-lobby-horiz),
#main.main-play-view:has(.choiceadventure-lobby-screen),
#main.main-play-view:has(.choiceadventure-round-screen),
#main.main-play-view:has(.choiceadventure-result-screen){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:visible !important;
padding-bottom:var(--layout-route-main-mobile-padding);
}
.challenge-lobby-horiz,
.choiceadventure-lobby-screen,
.choiceadventure-round-screen,
.choiceadventure-result-screen,
.challenge-lobby-horiz .ch-lobby-cards,
.choiceadventure-lobby-screen .choiceadventure-cards,
.choiceadventure-round-screen .choiceadventure-cards,
.choiceadventure-result-screen .choiceadventure-cards,
.challenge-lobby-horiz .ch-info-card,
.challenge-lobby-horiz .challenge-action-card,
.choiceadventure-lobby-screen .ch-info-card,
.choiceadventure-lobby-screen .ch-action-card,
.choiceadventure-round-screen .ch-info-card,
.choiceadventure-round-screen .ch-action-card,
.choiceadventure-result-screen .choiceadventure-result-main-card{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
}
/* Choice Quest round: keep the story shell visually paired with the choices shell. */
/* Choice Quest result uses the same shared banner scale as gameplay/question screens. */
.choiceadventure-result-screen .ca-lobby-banner{
padding:var(--layout-choice-adventure-fit-banner-padding) !important;
gap:var(--layout-choice-adventure-banner-gap) !important;
}
.choiceadventure-result-screen .lobby-banner-icon{
width:var(--layout-choice-adventure-banner-icon-size) !important;
height:var(--layout-choice-adventure-banner-icon-size) !important;
flex-basis:var(--layout-choice-adventure-banner-icon-size) !important;
border-radius:var(--layout-choice-adventure-banner-icon-radius) !important;
font-size:2rem !important;
}
.choiceadventure-result-screen .lobby-banner-title{
font-size:1.52rem !important;
line-height:1.03 !important;
}
.choiceadventure-result-screen .lobby-banner-sub{
font-size:.72rem !important;
line-height:1.2 !important;
}
@media (min-width:1200px) and (max-width:1399px) and (orientation:landscape) and (max-height:820px){
.choiceadventure-round-screen .ch-info-card{
padding:16px !important;
gap:12px !important;
}
.choiceadventure-round-screen .choiceadventure-story-card{
width:100% !important;
height:auto !important;
min-height:0 !important;
padding:12px !important;
gap:6px !important;
align-content:start !important;
}
.choiceadventure-round-screen .choiceadventure-story-top{
gap:6px !important;
margin-bottom:6px !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene{
gap:12px !important;
margin-bottom:8px !important;
}
.choiceadventure-round-screen .choiceadventure-story-emoji{
width:56px !important;
height:56px !important;
border-radius:18px !important;
font-size:1.75rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy strong{
font-size:1rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy span{
font-size:.76rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-text{
font-size:1.16rem !important;
line-height:1.34 !important;
}
.choiceadventure-round-screen .choiceadventure-story-question{
padding:8px 10px !important;
margin-bottom:8px !important;
}
.choiceadventure-round-screen .choiceadventure-story-tipline{
padding:6px 8px !important;
font-size:.76rem !important;
line-height:1.28 !important;
}
}
@media (min-width:1024px) and (max-width:1199px) and (orientation:landscape) and (min-height:640px){
.choiceadventure-round-screen .choiceadventure-cards{
align-items:stretch !important;
}
.choiceadventure-round-screen .ch-info-card,
.choiceadventure-round-screen .ch-action-card{
align-self:stretch !important;
height:auto !important;
min-height:0 !important;
}
.choiceadventure-round-screen .ch-info-card{
display:flex !important;
flex-direction:column !important;
padding:0 !important;
}
.choiceadventure-round-screen .choiceadventure-story-card{
flex:1 1 auto !important;
height:100% !important;
width:100% !important;
min-height:0 !important;
padding:clamp(12px,1.3vw,15px) !important;
gap:clamp(6px,.75vw,8px) !important;
align-content:start !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene{
gap:clamp(8px,.9vw,10px) !important;
margin-bottom:clamp(6px,.8vw,9px) !important;
}
.choiceadventure-round-screen .choiceadventure-story-emoji{
width:clamp(42px,4.4vw,48px) !important;
height:clamp(42px,4.4vw,48px) !important;
border-radius:16px !important;
font-size:clamp(1.5rem,2vw,1.75rem) !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy strong{
font-size:clamp(.9rem,1vw,1rem) !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy span{
font-size:clamp(.68rem,.8vw,.76rem) !important;
}
.choiceadventure-round-screen .choiceadventure-story-text{
font-size:clamp(1.05rem,1.25vw,1.18rem) !important;
line-height:1.24 !important;
}
.choiceadventure-round-screen .choiceadventure-story-question{
padding:clamp(8px,.9vw,10px) clamp(9px,1vw,12px) !important;
margin-bottom:clamp(6px,.75vw,8px) !important;
}
.choiceadventure-round-screen .choiceadventure-story-tipline{
padding:clamp(7px,.8vw,9px) clamp(8px,.9vw,10px) !important;
font-size:clamp(.7rem,.82vw,.78rem) !important;
line-height:1.22 !important;
}
}
/* Choice Quest result: share the compact desktop/tablet presentation across 1024-1199. */
@media (min-width:1024px) and (max-width:1199px) and (orientation:landscape) and (min-height:640px){
body.route-play-view:has(#main.main-play-view .choiceadventure-result-screen),
body.route-play-view:has(#main.main-play-view .choiceadventure-result-screen) #app{
height:100vh !important;
height:100svh !important;
height:100dvh !important;
min-height:100vh !important;
min-height:100svh !important;
min-height:100dvh !important;
max-height:100vh !important;
max-height:100svh !important;
max-height:100dvh !important;
overflow:hidden !important;
}
body.route-play-view:has(#main.main-play-view .choiceadventure-result-screen) #main.main-play-view{
--layout-choice-adventure-result-stack-gap:5px;
--layout-choice-adventure-result-section-padding:5px 7px;
--layout-choice-adventure-result-step-gap:4px;
--layout-choice-adventure-result-story-gap:4px;
--layout-choice-adventure-result-chip-padding:5px 6px;
min-height:0 !important;
padding-bottom:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
.choiceadventure-result-screen{
gap:var(--layout-choice-adventure-fit-gap) !important;
}
.choiceadventure-result-screen .ca-lobby-banner{
padding:5px 8px !important;
gap:7px !important;
}
.choiceadventure-result-screen .lobby-banner-title{
font-size:.9rem !important;
line-height:1.02 !important;
}
.choiceadventure-result-screen .lobby-banner-sub{
font-size:.56rem !important;
line-height:1.1 !important;
}
.choiceadventure-result-screen .choiceadventure-cards{
width:100% !important;
max-width:920px !important;
gap:var(--layout-choice-adventure-fit-gap) !important;
margin-right:auto !important;
margin-left:auto !important;
}
.choiceadventure-result-screen .choiceadventure-result-main-card{
height:auto !important;
min-height:0 !important;
max-height:none !important;
padding:var(--layout-choice-adventure-fit-card-padding) !important;
gap:var(--layout-choice-adventure-result-stack-gap) !important;
overflow:visible !important;
}
.choiceadventure-result-screen .choiceadventure-result-body{
grid-template-columns:minmax(0,1fr) !important;
gap:var(--layout-choice-adventure-result-stack-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-result-column,
.choiceadventure-result-screen .choiceadventure-result-column--story{
display:contents !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight,
.choiceadventure-result-screen .choiceadventure-brief-card{
padding:var(--layout-choice-adventure-result-section-padding) !important;
}
.choiceadventure-result-screen .story-progress-top,
.choiceadventure-result-screen .choiceadventure-brief-top{
margin-bottom:2px !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-row{
gap:6px !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-emoji{
width:30px !important;
height:30px !important;
border-radius:10px !important;
font-size:1.04rem !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-copy strong{
font-size:.76rem !important;
line-height:1.04 !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-copy span{
font-size:.54rem !important;
line-height:1.08 !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-grid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:var(--layout-choice-adventure-result-step-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-card{
padding:7px !important;
gap:4px !important;
border-radius:13px !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-kicker{
font-size:.6rem !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-pick{
min-height:1.5em !important;
font-size:.72rem !important;
line-height:1.1 !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-note{
padding:3px 5px !important;
font-size:.56rem !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:var(--layout-choice-adventure-result-step-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini{
padding:6px 7px !important;
gap:5px !important;
border-radius:13px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon{
width:24px !important;
height:24px !important;
flex:0 0 24px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon svg,
.choiceadventure-result-screen .choiceadventure-reward-mini-icon img{
width:18px !important;
height:18px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-copy strong{
font-size:.78rem !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-copy span{
font-size:.5rem !important;
line-height:1.06 !important;
}
.choiceadventure-result-screen .choiceadventure-result-storybeats{
gap:var(--layout-choice-adventure-result-story-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-story-chip,
.choiceadventure-result-screen .choiceadventure-story-tipline{
padding:var(--layout-choice-adventure-result-chip-padding) !important;
border-radius:11px !important;
font-size:.62rem !important;
line-height:1.12 !important;
}
.choiceadventure-result-screen .choiceadventure-story-beat-num{
width:16px !important;
height:16px !important;
flex:0 0 16px !important;
font-size:.52rem !important;
}
.choiceadventure-result-screen .ca-actions{
gap:4px !important;
}
.choiceadventure-result-screen .ca-actions .ca-btn{
min-height:36px !important;
padding:var(--layout-choice-adventure-fit-button-padding) !important;
font-size:.74rem !important;
}
}
/* Help & Contact is content-first: compact/tablet viewports must be scrollable. */
@media (min-width:768px) and (min-height:640px){
html:has(body.route-fit-view #main.main-fit-view .profile-screen--help),
body.route-fit-view:has(#main.main-fit-view .profile-screen--help),
body.route-fit-view:has(#main.main-fit-view .profile-screen--help) #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
#main.main-fit-view:has(.profile-screen--help),
#main.main-scroll-view:has(.profile-screen--help){
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important;
}
#main .profile-screen--help{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
}
/* Global Choice Quest result banner alignment: result screens mirror gameplay/question banners. */
.choiceadventure-result-screen .ca-lobby-banner{
padding:var(--layout-choice-adventure-banner-padding) !important;
gap:var(--layout-choice-adventure-banner-gap) !important;
}
.choiceadventure-result-screen .lobby-banner-icon{
width:var(--layout-choice-adventure-banner-icon-size) !important;
height:var(--layout-choice-adventure-banner-icon-size) !important;
flex-basis:var(--layout-choice-adventure-banner-icon-size) !important;
border-radius:var(--layout-choice-adventure-banner-icon-radius) !important;
font-size:2rem !important;
}
.choiceadventure-result-screen .lobby-banner-title{
font-size:1.52rem !important;
line-height:1.03 !important;
}
.choiceadventure-result-screen .lobby-banner-sub{
font-size:.72rem !important;
line-height:1.2 !important;
}
@media (min-width:1200px){
.choiceadventure-result-screen .lobby-banner-icon{
font-size:2.25rem !important;
}
}
@media (min-width:1200px) and (max-height:820px){
.choiceadventure-result-screen .ca-lobby-banner{
padding:var(--layout-choice-adventure-fit-banner-padding) !important;
gap:10px !important;
}
}
@media (min-width:1024px) and (max-width:1199px) and (orientation:landscape) and (min-height:640px){
.choiceadventure-result-screen .ca-lobby-banner{
padding:var(--layout-choice-adventure-fit-banner-padding) !important;
gap:var(--layout-choice-adventure-banner-gap) !important;
}
.choiceadventure-result-screen .lobby-banner-title{
font-size:1.5rem !important;
line-height:1.04 !important;
}
.choiceadventure-result-screen .lobby-banner-sub{
font-size:.76rem !important;
line-height:1.24 !important;
}
}
@media (min-width:1024px) and (max-width:1099px) and (orientation:landscape) and (min-height:640px){
.choiceadventure-result-screen .ca-lobby-banner{
gap:8px !important;
}
}
/* Choice Quest story box reference: gameplay uses the 1180 x 820 pattern across shared view ranges. */
@media (min-width:768px){
#main{
--layout-choice-adventure-story-column-reference:clamp(299px,28vw,360px);
--layout-choice-adventure-story-question-min-height:clamp(174px,25dvh,260px);
}
.choiceadventure-round-screen .choiceadventure-cards{
grid-template-columns:minmax(0,var(--layout-choice-adventure-story-column-reference)) minmax(0,1fr) !important;
align-items:stretch !important;
}
.choiceadventure-round-screen .ch-info-card,
.choiceadventure-round-screen .ch-action-card{
align-self:stretch !important;
height:auto !important;
min-height:0 !important;
}
.choiceadventure-round-screen .ch-info-card{
display:flex !important;
flex-direction:column !important;
padding:0 !important;
gap:6px !important;
}
.choiceadventure-round-screen .choiceadventure-story-card{
flex:1 1 auto !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
padding:15px !important;
gap:6px !important;
display:grid !important;
grid-template-rows:auto auto minmax(var(--layout-choice-adventure-story-question-min-height),1fr) auto !important;
align-content:start !important;
}
.choiceadventure-round-screen .choiceadventure-story-card:has(.local-question-watermark){
grid-template-rows:auto auto auto minmax(var(--layout-choice-adventure-story-question-min-height),1fr) auto !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene{
gap:10px !important;
margin-bottom:4px !important;
}
.choiceadventure-round-screen .choiceadventure-story-emoji{
width:48px !important;
height:48px !important;
border-radius:16px !important;
font-size:1.75rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy strong{
font-size:.9rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy span{
font-size:.7rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-text{
font-size:1.32rem !important;
line-height:1.32 !important;
}
.choiceadventure-round-screen .choiceadventure-story-question{
padding:14px 14px !important;
margin-bottom:0 !important;
min-height:var(--layout-choice-adventure-story-question-min-height) !important;
display:flex !important;
align-items:flex-start !important;
align-self:stretch !important;
}
.choiceadventure-round-screen .choiceadventure-story-tipline{
align-self:stretch !important;
margin-bottom:0 !important;
padding:9px 10px !important;
font-size:.7rem !important;
line-height:1.22 !important;
}
}
/* Choice Quest tablet portrait fit: one shared compact layout for 768px+ portrait tablets. */
@media (min-width:768px) and (max-width:1199px) and (orientation:portrait) and (min-height:900px){
html:has(body.route-play-view #main.main-play-view .choiceadventure-round-screen),
html:has(body.route-play-view #main.main-play-view .choiceadventure-result-screen),
body.route-play-view:has(#main.main-play-view .choiceadventure-round-screen),
body.route-play-view:has(#main.main-play-view .choiceadventure-result-screen),
body.route-play-view:has(#main.main-play-view .choiceadventure-round-screen) #app,
body.route-play-view:has(#main.main-play-view .choiceadventure-result-screen) #app{
height:auto !important;
min-height:100vh !important;
min-height:100svh !important;
min-height:100dvh !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding-bottom:0 !important;
}
body.route-play-view:has(#main.main-play-view .choiceadventure-round-screen) #main.main-play-view,
body.route-play-view:has(#main.main-play-view .choiceadventure-result-screen) #main.main-play-view{
--layout-choice-adventure-fit-gap:5px;
--layout-choice-adventure-fit-banner-padding:5px 8px;
--layout-choice-adventure-fit-card-padding:8px 9px;
--layout-choice-adventure-fit-card-gap:5px;
--layout-choice-adventure-fit-button-padding:7px 9px;
--layout-choice-adventure-card-gap:6px;
--layout-choice-adventure-result-stack-gap:5px;
--layout-choice-adventure-result-section-padding:5px 6px;
--layout-choice-adventure-result-step-gap:4px;
--layout-choice-adventure-result-story-gap:4px;
--layout-choice-adventure-result-chip-padding:4px 5px;
--layout-choice-adventure-story-column-reference:clamp(226px,31vw,256px);
--layout-choice-adventure-story-question-min-height:clamp(112px,13dvh,148px);
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding-bottom:calc(12px + env(safe-area-inset-bottom)) !important;
overscroll-behavior:contain !important;
}
.choiceadventure-round-screen,
.choiceadventure-result-screen{
height:auto !important;
min-height:0 !important;
max-height:100% !important;
overflow:visible !important;
gap:var(--layout-choice-adventure-fit-gap) !important;
}
.choiceadventure-round-screen .ca-lobby-banner,
.choiceadventure-result-screen .ca-lobby-banner{
flex:0 0 auto !important;
padding:var(--layout-choice-adventure-fit-banner-padding) !important;
gap:7px !important;
}
.choiceadventure-round-screen .lobby-banner-icon,
.choiceadventure-result-screen .lobby-banner-icon{
width:32px !important;
height:32px !important;
flex-basis:32px !important;
border-radius:10px !important;
font-size:1.28rem !important;
}
.choiceadventure-round-screen .lobby-banner-title,
.choiceadventure-result-screen .lobby-banner-title{
font-size:.9rem !important;
line-height:1.02 !important;
}
.choiceadventure-round-screen .lobby-banner-sub,
.choiceadventure-result-screen .lobby-banner-sub{
font-size:.56rem !important;
line-height:1.1 !important;
}
.choiceadventure-round-screen .choiceadventure-cards,
.choiceadventure-result-screen .choiceadventure-cards{
flex:0 0 auto !important;
width:100% !important;
min-height:0 !important;
height:auto !important;
max-height:100% !important;
gap:var(--layout-choice-adventure-fit-gap) !important;
align-items:start !important;
overflow:visible !important;
}
.choiceadventure-round-screen .choiceadventure-cards{
grid-template-columns:minmax(0,var(--layout-choice-adventure-story-column-reference)) minmax(0,1fr) !important;
}
.choiceadventure-round-screen .ch-info-card,
.choiceadventure-round-screen .ch-action-card,
.choiceadventure-result-screen .choiceadventure-result-main-card{
min-height:0 !important;
height:auto !important;
max-height:none !important;
padding:var(--layout-choice-adventure-fit-card-padding) !important;
gap:var(--layout-choice-adventure-fit-card-gap) !important;
overflow:visible !important;
}
.choiceadventure-round-screen .ch-info-card{
padding:0 !important;
}
.choiceadventure-round-screen .choiceadventure-story-card{
height:auto !important;
min-height:0 !important;
padding:8px 9px !important;
gap:4px !important;
grid-template-rows:auto auto minmax(var(--layout-choice-adventure-story-question-min-height),1fr) auto !important;
align-content:start !important;
overflow:visible !important;
}
.choiceadventure-round-screen .choiceadventure-story-card:has(.local-question-watermark){
grid-template-rows:auto auto auto minmax(var(--layout-choice-adventure-story-question-min-height),1fr) auto !important;
}
.choiceadventure-round-screen .choiceadventure-story-top{
gap:5px !important;
margin-bottom:3px !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene{
gap:6px !important;
margin-bottom:4px !important;
}
.choiceadventure-round-screen .choiceadventure-story-emoji{
width:34px !important;
height:34px !important;
border-radius:12px !important;
font-size:1.24rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy strong{
font-size:.8rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-scene-copy span{
font-size:.62rem !important;
}
.choiceadventure-round-screen .choiceadventure-story-text{
font-size:.94rem !important;
line-height:1.22 !important;
}
.choiceadventure-round-screen .choiceadventure-story-question{
min-height:var(--layout-choice-adventure-story-question-min-height) !important;
padding:6px 7px !important;
margin-bottom:0 !important;
}
.choiceadventure-round-screen .choiceadventure-story-tipline{
margin-top:0 !important;
margin-bottom:0 !important;
align-self:stretch !important;
padding:4px 5px !important;
font-size:.62rem !important;
line-height:1.12 !important;
}
.choiceadventure-round-screen .ca-action-stall{
width:46px !important;
height:46px !important;
border-radius:16px !important;
font-size:1.38rem !important;
}
.choiceadventure-round-screen .ch-action-title{
font-size:.86rem !important;
line-height:1.08 !important;
}
.choiceadventure-round-screen .ch-action-sub{
font-size:.62rem !important;
line-height:1.12 !important;
}
.choiceadventure-round-screen .choiceadventure-plan-progress{
padding:5px 7px !important;
font-size:.66rem !important;
}
.choiceadventure-round-screen .choiceadventure-decision-block{
padding:5px !important;
gap:3px !important;
border-radius:13px !important;
}
.choiceadventure-round-screen .choiceadventure-decision-title{
gap:3px 5px !important;
font-size:.6rem !important;
}
.choiceadventure-round-screen .choiceadventure-decision-title strong{
font-size:.7rem !important;
line-height:1.08 !important;
}
.choiceadventure-round-screen .choiceadventure-choice-stack{
gap:4px !important;
}
.choiceadventure-round-screen .choiceadventure-choice-btn{
min-height:38px !important;
padding:5px 6px !important;
border-radius:12px !important;
}
.choiceadventure-round-screen .choiceadventure-choice-num{
width:20px !important;
height:20px !important;
flex:0 0 20px !important;
border-radius:7px !important;
font-size:.58rem !important;
}
.choiceadventure-round-screen .choiceadventure-choice-copy strong{
font-size:.64rem !important;
line-height:1.06 !important;
}
.choiceadventure-round-screen .choiceadventure-choice-copy em{
display:none !important;
}
.choiceadventure-round-screen .ca-actions{
grid-template-columns:minmax(0,1.2fr) minmax(96px,.8fr) !important;
gap:4px !important;
margin-top:2px !important;
}
.choiceadventure-round-screen .ca-btn,
.choiceadventure-result-screen .ca-actions .ca-btn{
min-height:34px !important;
padding:var(--layout-choice-adventure-fit-button-padding) !important;
font-size:.68rem !important;
}
.choiceadventure-result-screen .choiceadventure-cards{
max-width:100% !important;
}
.choiceadventure-result-screen .choiceadventure-result-main-card{
display:flex !important;
flex-direction:column !important;
height:auto !important;
padding:var(--layout-choice-adventure-fit-card-padding) !important;
gap:var(--layout-choice-adventure-result-stack-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-result-body{
flex:0 0 auto !important;
min-height:0 !important;
display:grid !important;
grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) !important;
gap:var(--layout-choice-adventure-result-stack-gap) !important;
align-items:start !important;
overflow:visible !important;
}
.choiceadventure-result-screen .choiceadventure-result-column,
.choiceadventure-result-screen .choiceadventure-result-column--story{
display:grid !important;
grid-template-columns:1fr !important;
gap:var(--layout-choice-adventure-result-stack-gap) !important;
min-height:0 !important;
align-content:start !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight,
.choiceadventure-result-screen .choiceadventure-brief-card{
padding:var(--layout-choice-adventure-result-section-padding) !important;
}
.choiceadventure-result-screen .story-progress-top,
.choiceadventure-result-screen .choiceadventure-brief-top{
margin-bottom:2px !important;
font-size:.62rem !important;
line-height:1.08 !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-row{
gap:5px !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-emoji{
width:28px !important;
height:28px !important;
border-radius:9px !important;
font-size:.98rem !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-copy strong{
font-size:.72rem !important;
line-height:1.04 !important;
}
.choiceadventure-result-screen .choiceadventure-result-spotlight-copy span{
font-size:.52rem !important;
line-height:1.06 !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-grid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:var(--layout-choice-adventure-result-step-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-card{
padding:6px !important;
gap:3px !important;
border-radius:12px !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-kicker{
font-size:.56rem !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-pick{
min-height:1.35em !important;
font-size:.66rem !important;
line-height:1.08 !important;
}
.choiceadventure-result-screen .choiceadventure-result-step-note{
padding:3px 4px !important;
font-size:.52rem !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:var(--layout-choice-adventure-result-step-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini{
padding:5px !important;
gap:4px !important;
border-radius:12px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon{
width:22px !important;
height:22px !important;
flex:0 0 22px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon svg,
.choiceadventure-result-screen .choiceadventure-reward-mini-icon img{
width:17px !important;
height:17px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-copy strong{
font-size:.72rem !important;
line-height:1.04 !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-copy span{
font-size:.46rem !important;
line-height:1.02 !important;
}
.choiceadventure-result-screen .choiceadventure-result-storybeats{
gap:var(--layout-choice-adventure-result-story-gap) !important;
}
.choiceadventure-result-screen .choiceadventure-story-chip,
.choiceadventure-result-screen .choiceadventure-story-tipline{
padding:var(--layout-choice-adventure-result-chip-padding) !important;
border-radius:10px !important;
font-size:.56rem !important;
line-height:1.08 !important;
}
.choiceadventure-result-screen .choiceadventure-story-beat-num{
width:15px !important;
height:15px !important;
flex:0 0 15px !important;
font-size:.5rem !important;
}
.choiceadventure-result-screen .ca-actions{
gap:4px !important;
margin-top:0 !important;
}
.choiceadventure-result-screen .ca-actions.ca-actions--single{
grid-template-columns:1fr !important;
}
}
/* Tablet/notebook membership no-scroll fit: keep the original vertical layout. */
@media (min-width:1024px) and (min-height:700px){
html:has(body.route-scroll-view #main.main-scroll-view .profile-screen--subscription),
body.route-scroll-view:has(#main.main-scroll-view .profile-screen--subscription),
body.route-scroll-view:has(#main.main-scroll-view .profile-screen--subscription) #app{
height:100dvh !important;
min-height:100dvh !important;
max-height:100dvh !important;
overflow:hidden !important;
overscroll-behavior:none !important;
}
body.route-scroll-view:has(#main.main-scroll-view .profile-screen--subscription) #main.main-scroll-view{
flex:1 1 auto !important;
min-height:0 !important;
overflow:hidden !important;
padding-bottom:var(--layout-membership-fit-route-padding) !important;
overscroll-behavior:none !important;
scrollbar-width:none !important;
}
body.route-scroll-view:has(#main.main-scroll-view .profile-screen--subscription) #main.main-scroll-view::-webkit-scrollbar{
display:none !important;
}
#main.main-scroll-view .profile-screen--subscription{
--layout-profile-content-inline-icon-size:24px;
--layout-membership-crown-icon-size:42px;
--layout-membership-perk-icon-size:40px;
--layout-membership-locked-icon-size:38px;
--layout-membership-fit-profile-bottom-padding:2px;
height:calc(100% - var(--layout-membership-fit-profile-edge-adjust)) !important;
max-height:calc(100% - var(--layout-membership-fit-profile-edge-adjust)) !important;
overflow:hidden !important;
padding-bottom:var(--layout-membership-fit-profile-bottom-padding) !important;
}
#main.main-scroll-view .profile-screen--subscription .sect-h{
margin-bottom:4px !important;
font-size:1.08rem !important;
line-height:1.1 !important;
}
#main.main-scroll-view .profile-screen--subscription .profile-tabs{
padding-bottom:5px !important;
margin-bottom:6px !important;
}
#main.main-scroll-view .profile-screen--subscription .profile-tabs .tab-btn{
padding:5px 9px !important;
font-size:.82rem !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-hero-card,
#main.main-scroll-view .profile-screen--subscription .sub-trial-card{
margin-bottom:6px !important;
min-height:0 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-hero-card{
padding:5px 12px 6px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-hero-sparkles{
margin-bottom:0 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-hero-crown-icon{
width:42px !important;
height:42px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-hero-title{
font-size:1.02rem !important;
margin-bottom:1px !important;
line-height:1.05 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-hero-sub{
font-size:.72rem !important;
margin-bottom:3px !important;
line-height:1.15 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-hero-badge{
font-size:.64rem !important;
padding:1px 9px !important;
margin-bottom:4px !important;
line-height:1.1 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-hero-perks{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
column-gap:12px !important;
row-gap:0 !important;
padding-top:5px !important;
padding-bottom:0 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-perk-row{
min-height:40px !important;
gap:8px !important;
padding:1px 0 !important;
font-size:.78rem !important;
line-height:1.2 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-perk-ico{
width:40px !important;
height:40px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-detail-card{
padding:4px 10px !important;
margin-bottom:4px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-detail-row{
padding:1px 0 !important;
font-size:.8rem !important;
min-height:28px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-cancel-box{
padding:4px 10px !important;
margin-bottom:0 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-cancel-ttl{
font-size:.82rem !important;
margin-bottom:2px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-cancel-body{
font-size:.72rem !important;
line-height:1.26 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-manage-btn{
padding:5px !important;
font-size:.74rem !important;
margin-top:3px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-trial-card{
padding:4px 10px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-trial-ico{
font-size:1.1rem !important;
margin-bottom:0 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-trial-title{
font-size:.96rem !important;
margin-bottom:1px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-trial-msg{
font-size:.72rem !important;
margin-bottom:3px !important;
line-height:1.16 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-trial-track{
height:5px !important;
margin-bottom:3px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-trial-pips{
margin-bottom:4px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-trial-locked{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
column-gap:10px !important;
row-gap:0 !important;
padding:4px 8px !important;
margin-top:3px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-trial-locked-lbl{
grid-column:1 / -1 !important;
margin-bottom:2px !important;
font-size:.7rem !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-locked-row{
gap:8px !important;
padding:1px 0 !important;
min-height:38px !important;
font-size:.76rem !important;
line-height:1.2 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-locked-ico{
width:38px !important;
height:38px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-plans{
gap:6px !important;
margin-bottom:2px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-section-hdr{
margin-bottom:2px !important;
font-size:.76rem !important;
line-height:1.1 !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-plan{
padding:4px 7px !important;
padding-top:24px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-plan-badge{
top:4px !important;
right:6px !important;
left:auto !important;
transform:none !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:3px !important;
line-height:1 !important;
font-size:.56rem !important;
padding:2px 8px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-plan-name{
font-size:.74rem !important;
margin-bottom:1px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-plan-price{
font-size:1.16rem !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-plan-hint{
font-size:.64rem !important;
margin:1px 0 2px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-plan-feats{
font-size:.66rem !important;
line-height:1.2 !important;
margin-bottom:2px !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-plan-btn{
padding:4px !important;
font-size:.7rem !important;
}
#main.main-scroll-view .profile-screen--subscription .sub-secure-note{
margin-top:1px !important;
font-size:.7rem !important;
line-height:1.15 !important;
}
}
/* Tablet/notebook result fit-view: Choice Quest results should not create route scroll. */
@media (min-width:1024px) and (min-height:700px){
body.route-play-view:has(#main.main-play-view .choiceadventure-result-screen) #main.main-play-view{
overflow:hidden !important;
overscroll-behavior:none !important;
padding-bottom:0 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-result-screen{
max-height:calc(100dvh - 124px) !important;
}
}
/* Shared Home tablet/notebook anchor:
1920x862 defines the visual relationship; 768px+ scales that relationship
through shared adaptive tokens instead of switching to a stacked layout. */
@media (min-width:768px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-adaptive-side-width:clamp(260px,30vw,360px);
--layout-home-adaptive-gap:clamp(6px,.6vw,9px);
--layout-home-adaptive-hero-height:clamp(232px,31dvh,288px);
--layout-home-adaptive-mode-height:clamp(184px,27dvh,278px);
--layout-home-adaptive-hero-pad:clamp(14px,1.6vw,20px) clamp(160px,22vw,292px) clamp(10px,1.3vw,16px) clamp(16px,1.7vw,22px);
--layout-home-adaptive-mascot-width:clamp(154px,19vw,260px);
--layout-home-adaptive-info-card-padding:clamp(7px,.9vw,10px) clamp(9px,1vw,10px) clamp(8px,1vw,14px);
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard),
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #app{
height:100dvh !important;
min-height:100dvh !important;
max-height:100dvh !important;
overflow:hidden !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #app{
box-sizing:border-box !important;
padding-bottom:0 !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav{
display:flex !important;
grid-template-columns:none !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:space-between !important;
min-height:0 !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-left{
display:flex !important;
flex:1 1 auto !important;
flex-wrap:nowrap !important;
min-width:0 !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-logo,
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-btn,
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-right{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-btn .nav-btn-text{
display:inline-flex !important;
overflow:visible !important;
text-overflow:clip !important;
white-space:normal !important;
text-align:center !important;
line-height:1.05 !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-right{
flex:0 0 auto !important;
width:auto !important;
margin-left:auto !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-profile-info{
display:flex !important;
flex-direction:column !important;
gap:1px !important;
min-width:0 !important;
overflow:hidden !important;
}
#main.main-fit-view:has(.home-dashboard){
display:flex !important;
flex-direction:column !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
padding-bottom:0 !important;
}
#main.main-fit-view .home-dashboard{
display:grid !important;
grid-template-columns:minmax(0,1fr) var(--layout-home-adaptive-side-width) !important;
gap:var(--layout-home-adaptive-gap) !important;
align-items:start !important;
height:auto !important;
max-height:100% !important;
overflow:visible !important;
}
#main.main-fit-view .home-main,
#main.main-fit-view .home-side{
display:flex !important;
flex-direction:column !important;
min-width:0 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
#main.main-fit-view .home-main{
gap:0 !important;
}
#main.main-fit-view .home-side{
gap:var(--layout-home-adaptive-gap) !important;
}
#main.main-fit-view .hero-wrap{
flex:0 0 var(--layout-home-adaptive-hero-height) !important;
min-height:var(--layout-home-adaptive-hero-height) !important;
padding:var(--layout-home-adaptive-hero-pad) !important;
}
#main.main-fit-view .hero-mascot{
width:var(--layout-home-adaptive-mascot-width) !important;
height:auto !important;
}
#main.main-fit-view .mode-row{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
grid-auto-rows:1fr !important;
flex:0 0 var(--layout-home-adaptive-mode-height) !important;
min-height:var(--layout-home-adaptive-mode-height) !important;
margin-top:var(--layout-home-adaptive-gap) !important;
}
#main.main-fit-view .mcard{
height:100% !important;
min-height:0 !important;
max-height:none !important;
flex-direction:column !important;
justify-content:center !important;
}
#main.main-fit-view .mcard-content,
#main.main-fit-view .mcard-text-block{
flex-direction:column !important;
align-items:center !important;
text-align:center !important;
}
#main.main-fit-view .info-cards-row{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:var(--layout-home-info-gap) !important;
margin:var(--layout-home-adaptive-gap) 0 0 !important;
}
#main.main-fit-view .info-card{
padding:var(--layout-home-adaptive-info-card-padding) !important;
}
#main.main-fit-view .home-daily-card{
display:flex !important;
flex-direction:column !important;
}
#main.main-fit-view .home-fresh-progress-list{
display:flex !important;
flex:1 1 auto !important;
min-height:0 !important;
flex-direction:column !important;
align-content:stretch !important;
}
#main.main-fit-view .home-fresh-progress-row{
flex:1 1 0 !important;
min-height:0 !important;
}
}
/* Wide tablet-landscape Home mode-card fit:
scale the 3 mode cards from the 1366x1024 tablet reference while keeping
the viewport filled at 1024x768-class views. */
@media (min-width:961px) and (max-width:1199px) and (orientation:landscape) and (min-height:700px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-adaptive-mode-height:var(--layout-home-mode-row-height-tablet-landscape-fit);
}
#main.main-fit-view .mode-row{
flex-basis:var(--layout-home-adaptive-mode-height) !important;
min-height:var(--layout-home-adaptive-mode-height) !important;
}
#main.main-fit-view .mcard-content,
#main.main-fit-view .mcard.choice-adventure .mcard-content{
justify-content:var(--layout-home-card-content-justify-tablet-landscape-fit) !important;
gap:4px !important;
}
#main.main-fit-view .mcard-text-block{
flex:var(--layout-home-card-text-flex-tablet-landscape-fit) !important;
height:auto !important;
min-height:0 !important;
justify-content:flex-start !important;
gap:2px !important;
}
#main.main-fit-view .mcard.active .mcard-icon,
#main.main-fit-view .mcard.challenge .mcard-icon,
#main.main-fit-view .mcard.choice-adventure .mcard-icon{
width:var(--layout-home-card-icon-size-tablet-landscape-fit) !important;
height:var(--layout-home-card-icon-size-tablet-landscape-fit) !important;
padding:5px !important;
}
#main.main-fit-view .mcard-title,
#main.main-fit-view .mcard-sub,
#main.main-fit-view .mcard-progress-copy,
#main.main-fit-view .mcard .prog-bar,
#main.main-fit-view .mcard .mcard-start-btn{
flex:0 0 auto !important;
}
#main.main-fit-view .mcard-sub{
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
min-height:calc(2 * 1.16em) !important;
overflow:hidden !important;
}
#main.main-fit-view .mcard .mcard-start-btn{
align-self:var(--layout-home-card-button-align) !important;
margin-top:var(--layout-home-card-button-gap-tablet-landscape-fit) !important;
}
}
@media (min-width:768px) and (max-width:960px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-adaptive-side-width:clamp(252px,34vw,292px);
--layout-home-adaptive-gap:clamp(6px,.75vw,8px);
--layout-home-adaptive-hero-height:clamp(224px,26dvh,252px);
--layout-home-adaptive-mode-height:clamp(172px,22dvh,196px);
--layout-home-adaptive-hero-pad:14px clamp(132px,18vw,164px) 10px 14px;
--layout-home-adaptive-mascot-width:clamp(126px,17vw,150px);
}
#main.main-fit-view .hero-title{
font-size:clamp(1.28rem,3.2vw,1.72rem) !important;
}
#main.main-fit-view .hero-sub{
font-size:clamp(.58rem,1.35vw,.74rem) !important;
line-height:1.28 !important;
}
#main.main-fit-view .hero-chips{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
#main.main-fit-view .mcard{
padding:8px !important;
}
#main.main-fit-view .mcard.active .mcard-icon,
#main.main-fit-view .mcard.challenge .mcard-icon,
#main.main-fit-view .mcard.choice-adventure .mcard-icon{
width:clamp(48px,7vw,64px) !important;
height:clamp(48px,7vw,64px) !important;
}
#main.main-fit-view .mcard-title{
font-size:clamp(.76rem,1.8vw,.9rem) !important;
}
#main.main-fit-view .mcard-sub{
font-size:clamp(.52rem,1.25vw,.62rem) !important;
line-height:1.16 !important;
}
#main.main-fit-view .mcard-progress-copy{
font-size:clamp(.44rem,1vw,.52rem) !important;
}
#main.main-fit-view .mcard .mcard-start-btn{
min-width:clamp(74px,12vw,96px) !important;
min-height:26px !important;
padding:4px 10px !important;
font-size:clamp(.58rem,1.3vw,.66rem) !important;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:portrait){
body.route-fit-view #main.main-fit-view .mode-row .mcard-content{
justify-content:var(--layout-home-card-content-justify-tablet-fit) !important;
height:100% !important;
gap:4px !important;
}
body.route-fit-view #main.main-fit-view .mode-row .mcard-text-block{
flex:var(--layout-home-card-text-flex-tablet-fit) !important;
height:auto !important;
min-height:0 !important;
justify-content:flex-start !important;
gap:2px !important;
}
body.route-fit-view #main.main-fit-view .mode-row .mcard-title,
body.route-fit-view #main.main-fit-view .mode-row .mcard-sub,
body.route-fit-view #main.main-fit-view .mode-row .mcard-progress-copy,
body.route-fit-view #main.main-fit-view .mode-row .mcard .prog-bar,
body.route-fit-view #main.main-fit-view .mode-row .mcard .mcard-start-btn{
flex:0 0 auto !important;
}
body.route-fit-view #main.main-fit-view .mode-row .mcard-sub{
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
min-height:calc(2 * 1.16em) !important;
overflow:hidden !important;
}
body.route-fit-view #main.main-fit-view .mode-row .mcard .mcard-start-btn{
align-self:var(--layout-home-card-button-align) !important;
margin-top:var(--layout-home-card-button-gap-tablet-fit) !important;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:portrait) and (min-height:900px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-adaptive-side-width:clamp(246px,32vw,266px);
--layout-home-adaptive-gap:clamp(6px,.75vw,8px);
--layout-home-adaptive-hero-height:clamp(282px,27.3dvh,324px);
--layout-home-adaptive-mode-height:clamp(210px,20.5dvh,242px);
--layout-home-adaptive-hero-pad:clamp(18px,2.4vw,22px) clamp(150px,20vw,178px) clamp(16px,2vw,20px) clamp(18px,2.2vw,22px);
--layout-home-adaptive-hero-copy-max:min(100%,520px);
--layout-home-adaptive-hero-chips-max:100%;
--layout-home-adaptive-mascot-width:clamp(142px,18vw,168px);
--layout-home-adaptive-info-card-padding:12px 12px 14px;
--layout-home-tablet-portrait-panel-gap:8px;
--layout-home-tablet-portrait-promo-height:clamp(368px,33.5dvh,408px);
--layout-home-tablet-portrait-daily-height:clamp(318px,30dvh,350px);
--right-panel-role-journey-min-height:clamp(108px,11dvh,128px);
--right-panel-promo-stat-row-height:clamp(38px,3.8dvh,46px);
--right-panel-stat-icon-size:clamp(18px,2.7vw,23px);
--right-panel-stat-row-gap:5px;
--right-panel-stat-row-padding:4px 6px;
--right-panel-stat-label-size:clamp(.52rem,1.2vw,.62rem);
--right-panel-stat-value-size:clamp(.52rem,1.2vw,.62rem);
--right-panel-stat-bar-height:4px;
--layout-home-fresh-row-gap-notebook:5px;
--layout-home-fresh-row-padding-notebook:5px 7px;
--layout-home-fresh-icon-size-notebook:26px;
--layout-home-fresh-icon-radius-notebook:8px;
--layout-home-fresh-label-font-notebook:clamp(.58rem,1.3vw,.68rem);
--layout-home-fresh-count-font-notebook:clamp(.58rem,1.3vw,.68rem);
--layout-home-fresh-info-font-notebook:clamp(.48rem,1.05vw,.56rem);
--layout-home-fresh-bar-height-notebook:4px;
--layout-home-info-row-align:stretch;
--layout-home-info-card-align:stretch;
--layout-home-info-card-size:auto;
}
#main.main-fit-view .home-dashboard{
min-height:min(920px,calc(100dvh - 140px)) !important;
align-items:start !important;
}
#main.main-fit-view .home-main{
min-height:min(900px,calc(100dvh - 150px)) !important;
}
#main.main-fit-view .hero-title{
font-size:clamp(1.56rem,3.2vw,1.86rem) !important;
line-height:1.05 !important;
}
#main.main-fit-view .hero-sub{
font-size:clamp(.68rem,1.45vw,.78rem) !important;
line-height:1.38 !important;
}
#main.main-fit-view .hero-title,
#main.main-fit-view .hero-sub{
width:auto !important;
max-width:var(--layout-home-adaptive-hero-copy-max) !important;
}
#main.main-fit-view .hero-chips-label,
#main.main-fit-view .hero-chips{
width:100% !important;
max-width:var(--layout-home-adaptive-hero-chips-max) !important;
}
#main.main-fit-view .hero-chips{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
#main.main-fit-view .hchip{
min-width:0 !important;
padding:5px 6px !important;
}
#main.main-fit-view .mcard{
padding:10px !important;
}
#main.main-fit-view .mcard.active .mcard-icon,
#main.main-fit-view .mcard.challenge .mcard-icon,
#main.main-fit-view .mcard.choice-adventure .mcard-icon{
width:clamp(58px,8vw,76px) !important;
height:clamp(58px,8vw,76px) !important;
}
#main.main-fit-view .mcard-title{
font-size:clamp(.9rem,1.8vw,1rem) !important;
}
#main.main-fit-view .mcard-sub{
font-size:clamp(.58rem,1.25vw,.68rem) !important;
}
#main.main-fit-view .mcard-progress-copy{
font-size:clamp(.5rem,1vw,.58rem) !important;
}
#main.main-fit-view .mcard .mcard-start-btn{
min-height:30px !important;
min-width:96px !important;
padding:6px 14px !important;
font-size:.72rem !important;
}
#main.main-fit-view .info-cards-row{
min-height:clamp(204px,19dvh,236px) !important;
}
#main.main-fit-view .info-card{
height:auto !important;
}
#main.main-fit-view .home-side{
min-height:min(900px,calc(100dvh - 150px)) !important;
}
#main.main-fit-view .home-promo-card{
flex:0 0 var(--layout-home-tablet-portrait-promo-height) !important;
min-height:var(--layout-home-tablet-portrait-promo-height) !important;
height:var(--layout-home-tablet-portrait-promo-height) !important;
display:flex !important;
flex-direction:column !important;
gap:var(--layout-home-tablet-portrait-panel-gap) !important;
padding-bottom:10px !important;
}
#main.main-fit-view .home-promo-card .panel-h{
flex:0 0 auto !important;
margin-bottom:0 !important;
padding-bottom:5px !important;
}
#main.main-fit-view .home-promo-card .role-journey-box{
flex:0 0 var(--right-panel-role-journey-min-height) !important;
min-height:var(--right-panel-role-journey-min-height) !important;
margin-bottom:0 !important;
padding:9px 8px 8px !important;
}
#main.main-fit-view .home-promo-card .home-promo-stat-row{
flex:0 0 var(--right-panel-promo-stat-row-height) !important;
height:var(--right-panel-promo-stat-row-height) !important;
min-height:var(--right-panel-promo-stat-row-height) !important;
}
#main.main-fit-view .home-promo-card .promo-stat-copy{
gap:3px !important;
}
#main.main-fit-view .home-daily-card{
flex:0 0 var(--layout-home-tablet-portrait-daily-height) !important;
min-height:var(--layout-home-tablet-portrait-daily-height) !important;
height:var(--layout-home-tablet-portrait-daily-height) !important;
display:flex !important;
flex-direction:column !important;
padding-bottom:10px !important;
}
#main.main-fit-view .home-daily-card .panel-h{
flex:0 0 auto !important;
margin-bottom:var(--layout-home-tablet-portrait-panel-gap) !important;
padding-bottom:5px !important;
}
#main.main-fit-view .home-fresh-progress-list{
display:flex !important;
flex:1 1 auto !important;
min-height:0 !important;
flex-direction:column !important;
gap:var(--layout-home-tablet-portrait-panel-gap) !important;
align-content:stretch !important;
}
#main.main-fit-view .home-fresh-progress-row{
flex:1 1 0 !important;
min-height:0 !important;
padding:var(--layout-home-fresh-row-padding-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-icon{
width:var(--layout-home-fresh-icon-size-notebook) !important;
height:var(--layout-home-fresh-icon-size-notebook) !important;
border-radius:var(--layout-home-fresh-icon-radius-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-label{
font-size:var(--layout-home-fresh-label-font-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-count{
font-size:var(--layout-home-fresh-count-font-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-info{
font-size:var(--layout-home-fresh-info-font-notebook) !important;
}
#main.main-fit-view .home-fresh-progress-bar{
height:var(--layout-home-fresh-bar-height-notebook) !important;
}
}
@media (min-width:961px) and (max-width:1199px) and (orientation:portrait) and (min-height:900px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-adaptive-side-width:clamp(260px,26vw,276px);
--layout-home-adaptive-gap:clamp(6px,.6vw,9px);
--layout-home-adaptive-hero-height:clamp(246px,26vw,278px);
--layout-home-adaptive-mode-height:clamp(218px,24vw,260px);
--layout-home-adaptive-info-height:clamp(218px,21.5vw,230px);
--layout-home-adaptive-hero-pad:24px 180px 20px 24px;
--layout-home-adaptive-mascot-width:168px;
--layout-home-tablet-portrait-promo-height:clamp(348px,37vw,386px);
--layout-home-tablet-portrait-daily-height:clamp(350px,36.5vw,376px);
--layout-home-fresh-row-padding-notebook:5px 7px;
--layout-home-info-row-align:stretch;
--layout-home-info-row-flex:0 0 var(--layout-home-adaptive-info-height);
--layout-home-info-row-size:var(--layout-home-adaptive-info-height);
--layout-home-info-row-min-size:0px;
--layout-home-info-card-align:stretch;
--layout-home-info-card-size:auto;
}
#main.main-fit-view .home-dashboard{
display:grid !important;
grid-template-columns:minmax(0,1fr) var(--layout-home-adaptive-side-width) !important;
gap:var(--layout-home-adaptive-gap) !important;
height:auto !important;
min-height:0 !important;
align-items:start !important;
}
#main.main-fit-view .home-main,
#main.main-fit-view .home-side{
display:flex !important;
flex-direction:column !important;
min-width:0 !important;
overflow:visible !important;
}
#main.main-fit-view .home-main{
height:auto !important;
min-height:0 !important;
gap:0 !important;
}
#main.main-fit-view .home-side{
height:auto !important;
min-height:0 !important;
gap:var(--layout-home-adaptive-gap) !important;
margin-top:8px !important;
}
#main.main-fit-view .hero-title,
#main.main-fit-view .hero-sub{
max-width:min(100%,520px) !important;
}
#main.main-fit-view .hero-chips-label,
#main.main-fit-view .hero-chips{
max-width:min(440px,calc(100% - 230px)) !important;
}
#main.main-fit-view .hero-wrap{
flex:0 0 var(--layout-home-adaptive-hero-height) !important;
min-height:var(--layout-home-adaptive-hero-height) !important;
padding:var(--layout-home-adaptive-hero-pad) !important;
}
#main.main-fit-view .hero-chips-label{
position:absolute !important;
left:24px !important;
bottom:112px !important;
width:min(440px,calc(100% - 230px)) !important;
max-width:min(440px,calc(100% - 230px)) !important;
margin:0 !important;
}
#main.main-fit-view .hero-chips{
position:absolute !important;
left:24px !important;
bottom:22px !important;
width:min(440px,calc(100% - 230px)) !important;
max-width:min(440px,calc(100% - 230px)) !important;
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
#main.main-fit-view .hero-mascot{
width:var(--layout-home-adaptive-mascot-width) !important;
right:18px !important;
bottom:22px !important;
}
#main.main-fit-view .mode-row{
flex:0 0 var(--layout-home-adaptive-mode-height) !important;
min-height:var(--layout-home-adaptive-mode-height) !important;
margin-top:var(--layout-home-adaptive-gap) !important;
}
#main.main-fit-view .info-cards-row{
flex:var(--layout-home-info-row-flex) !important;
height:var(--layout-home-info-row-size) !important;
min-height:var(--layout-home-info-row-min-size) !important;
margin-top:var(--layout-home-adaptive-gap) !important;
}
#main.main-fit-view .info-card{
justify-content:flex-start !important;
gap:0 !important;
}
#main.main-fit-view .hiw-item{
margin-bottom:4px !important;
}
#main.main-fit-view .home-promo-card{
flex:0 0 var(--layout-home-tablet-portrait-promo-height) !important;
height:var(--layout-home-tablet-portrait-promo-height) !important;
min-height:var(--layout-home-tablet-portrait-promo-height) !important;
display:flex !important;
flex-direction:column !important;
gap:8px !important;
}
#main.main-fit-view .home-promo-card .role-journey-box{
flex:0 0 clamp(148px,14dvh,176px) !important;
min-height:clamp(148px,14dvh,176px) !important;
margin-bottom:0 !important;
}
#main.main-fit-view .home-promo-card .home-promo-stat-row{
flex:1 1 0 !important;
height:auto !important;
min-height:0 !important;
}
#main.main-fit-view .home-daily-card{
flex:0 0 var(--layout-home-tablet-portrait-daily-height) !important;
height:var(--layout-home-tablet-portrait-daily-height) !important;
min-height:var(--layout-home-tablet-portrait-daily-height) !important;
}
#main.main-fit-view .home-fresh-progress-list{
display:flex !important;
flex:1 1 auto !important;
flex-direction:column !important;
min-height:0 !important;
}
#main.main-fit-view .home-fresh-progress-row{
flex:1 1 0 !important;
min-height:0 !important;
align-content:center !important;
gap:8px !important;
padding:var(--layout-home-fresh-row-padding-notebook) !important;
}
}
@media (min-width:961px) and (max-width:1199px) and (orientation:portrait) and (min-height:1200px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-adaptive-side-width:clamp(268px,26vw,286px);
--layout-home-adaptive-gap:clamp(8px,.9vw,12px);
--layout-home-adaptive-hero-height:var(--layout-home-tall-portrait-hero-height);
--layout-home-adaptive-mode-height:var(--layout-home-tall-portrait-mode-height);
--layout-home-adaptive-info-height:var(--layout-home-tall-portrait-info-height);
--layout-home-adaptive-hero-pad:var(--layout-home-tall-portrait-hero-padding);
--layout-home-adaptive-mascot-width:var(--layout-home-tall-portrait-mascot-width);
--layout-home-tablet-portrait-promo-height:calc((var(--layout-home-tall-portrait-dashboard-height) - var(--layout-home-adaptive-gap)) * .52);
--layout-home-tablet-portrait-daily-height:calc((var(--layout-home-tall-portrait-dashboard-height) - var(--layout-home-adaptive-gap)) * .48);
--layout-home-info-row-flex:1 1 0;
--layout-home-info-row-size:auto;
--layout-home-info-row-min-size:var(--layout-home-tall-portrait-info-height);
}
#main.main-fit-view .home-dashboard{
height:var(--layout-home-tall-portrait-dashboard-height) !important;
min-height:var(--layout-home-tall-portrait-dashboard-height) !important;
align-items:stretch !important;
}
#main.main-fit-view .home-main,
#main.main-fit-view .home-side{
height:100% !important;
min-height:0 !important;
}
#main.main-fit-view .home-main{
display:flex !important;
flex-direction:column !important;
}
#main.main-fit-view .home-side{
margin-top:8px !important;
}
#main.main-fit-view .home-promo-card,
#main.main-fit-view .home-daily-card{
max-height:none !important;
}
body.route-scroll-view #nav{
display:flex !important;
grid-template-columns:none !important;
flex-wrap:nowrap !important;
align-items:center !important;
gap:10px !important;
min-height:85px !important;
padding:16px 28px !important;
}
body.route-scroll-view #nav .nav-left{
display:flex !important;
flex:1 1 auto !important;
flex-wrap:nowrap !important;
gap:10px !important;
min-width:0 !important;
}
body.route-scroll-view #nav .nav-logo{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:0 0 190px !important;
min-width:190px !important;
max-width:210px !important;
font-size:1rem !important;
}
body.route-scroll-view #nav .nav-btn{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:0 1 126px !important;
width:auto !important;
min-width:0 !important;
min-height:44px !important;
padding:7px 10px !important;
font-size:.78rem !important;
justify-content:center !important;
}
body.route-scroll-view #nav #nb-insights{
flex-basis:154px !important;
}
body.route-scroll-view #nav .nav-btn .nav-btn-text{
white-space:normal !important;
line-height:1.05 !important;
}
body.route-scroll-view #nav .nav-right{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:0 0 auto !important;
gap:8px !important;
justify-self:auto !important;
margin-left:auto !important;
}
body.route-scroll-view #nav .nav-profile{
min-height:46px !important;
padding:6px 10px 6px 6px !important;
gap:8px !important;
}
body.route-scroll-view #nav .nav-profile-info{
display:flex !important;
max-width:116px !important;
}
}
/* Shared Home info-card fit for legacy layouts. */
.info-cards-row,
#main.main-fit-view .info-cards-row{
align-items:var(--layout-home-info-row-align) !important;
flex:var(--layout-home-info-row-flex) !important;
height:var(--layout-home-info-row-size) !important;
min-height:var(--layout-home-info-row-min-size) !important;
}
.info-card,
#main.main-fit-view .info-card{
align-self:var(--layout-home-info-card-align) !important;
height:var(--layout-home-info-card-size) !important;
min-height:var(--layout-home-info-card-min-size) !important;
justify-content:var(--layout-home-info-card-content-align) !important;
}
#main.main-fit-view:has(.home-dashboard) .info-cards-row{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
align-items:stretch !important;
}
#main.main-fit-view:has(.home-dashboard) .info-card{
align-self:stretch !important;
height:100% !important;
min-height:0 !important;
display:grid !important;
grid-template-rows:var(--layout-home-info-card-template) !important;
align-content:stretch !important;
gap:var(--layout-home-info-card-row-gap) !important;
}
#main.main-fit-view:has(.home-dashboard) .info-card .hiw-item{
margin-bottom:0 !important;
min-height:0 !important;
}
/* Tablet profile benchmark:
768-1199px follows the 1920x862 notebook profile visual language, with
shared adaptive tokens instead of tablet-specific redesigns. */
@media (min-width:768px) and (max-width:1199px){
:root{
--layout-profile-max-height-tablet-shared:none;
--layout-profile-help-min-height-tablet-shared:0;
--layout-profile-card-radius-tablet-shared:clamp(18px,1.7vw,20px);
--layout-profile-card-padding-tablet-shared:clamp(12px,1.25vw,14px) clamp(14px,1.45vw,16px) clamp(14px,1.45vw,16px);
--layout-profile-card-margin-bottom-tablet-shared:clamp(12px,1.35vw,16px);
--layout-profile-tabs-gap-tablet-shared:clamp(7px,.8vw,8px);
--layout-profile-tabs-bottom-gap-tablet-shared:clamp(10px,1.15vw,12px);
--layout-profile-hero-gap-tablet-shared:clamp(8px,1vw,10px);
--layout-profile-hero-body-gap-tablet-shared:clamp(12px,1.35vw,16px);
--layout-profile-left-width-tablet-shared:clamp(190px,21vw,232px);
--layout-profile-left-min-width-tablet-shared:clamp(176px,19vw,232px);
--layout-profile-left-padding-tablet-shared:clamp(14px,1.55vw,18px);
--layout-profile-right-padding-tablet-shared:clamp(12px,1.35vw,14px) clamp(12px,1.35vw,14px) clamp(10px,1.2vw,12px);
--layout-profile-right-offset-tablet-shared:clamp(214px,24vw,248px);
--layout-profile-mini-gap-tablet-shared:clamp(8px,.95vw,10px);
--layout-profile-mini-card-padding-tablet-shared:clamp(12px,1.35vw,14px) 8px;
--layout-insights-shell-gap-tablet-shared:clamp(10px,1.2vw,12px);
--layout-insights-card-radius-tablet-shared:clamp(18px,1.8vw,20px);
--layout-insights-hero-columns-tablet-shared:minmax(0,1.08fr) clamp(180px,19vw,220px);
--layout-insights-hero-gap-tablet-shared:clamp(12px,1.45vw,16px);
--layout-insights-hero-padding-tablet-shared:clamp(14px,1.55vw,18px) clamp(16px,1.75vw,20px);
--layout-insights-takeaway-columns-tablet-shared:repeat(3,minmax(0,1fr));
--layout-insights-takeaway-gap-tablet-shared:clamp(8px,.95vw,10px);
--layout-insights-takeaway-margin-top-tablet-shared:clamp(12px,1.35vw,14px);
--layout-insights-takeaway-card-padding-tablet-shared:clamp(10px,1.1vw,12px);
--layout-insights-section-padding-tablet-shared:clamp(13px,1.45vw,16px);
--layout-insights-section-head-gap-tablet-shared:clamp(8px,1vw,10px);
--layout-insights-section-head-margin-tablet-shared:clamp(9px,1.1vw,12px);
--layout-insights-section-tip-max-width-tablet-shared:clamp(220px,26vw,280px);
--layout-insights-skill-grid-gap-tablet-shared:clamp(9px,1vw,10px);
--layout-insights-skill-card-padding-tablet-shared:clamp(11px,1.25vw,13px) clamp(11px,1.25vw,13px) clamp(10px,1.1vw,12px);
--layout-insights-skill-icon-size-tablet-shared:clamp(46px,4.2vw,50px);
--layout-insights-skill-icon-frame-extra-tablet-shared:28px;
--layout-insights-mode-icon-size-tablet-shared:clamp(56px,5.2vw,60px);
--layout-insights-radar-icon-size-tablet-shared:clamp(34px,3.4vw,38px);
--layout-insights-radar-size-tablet-shared:clamp(136px,15vw,166px);
--layout-insights-overall-padding-tablet-shared:clamp(10px,1.15vw,12px);
--layout-insights-trend-gap-tablet-shared:clamp(8px,1vw,10px);
--layout-insights-trend-card-padding-tablet-shared:clamp(11px,1.25vw,13px);
--layout-insights-mode-gap-tablet-shared:clamp(8px,.95vw,10px);
--layout-insights-mode-margin-top-tablet-shared:clamp(10px,1.15vw,12px);
--layout-insights-mode-card-padding-tablet-shared:clamp(11px,1.25vw,13px);
--layout-insights-bottom-gap-tablet-shared:clamp(10px,1.15vw,12px);
--layout-insights-highlight-padding-tablet-shared:clamp(13px,1.45vw,16px);
--layout-membership-hero-padding-tablet-shared:clamp(14px,1.55vw,18px) clamp(16px,1.75vw,18px) clamp(14px,1.45vw,18px);
--layout-membership-hero-margin-tablet-shared:clamp(8px,1vw,12px);
--layout-membership-detail-padding-tablet-shared:clamp(10px,1.25vw,14px) clamp(14px,1.55vw,16px);
--layout-membership-trial-padding-tablet-shared:clamp(14px,1.6vw,20px) clamp(16px,1.75vw,18px);
--layout-membership-card-radius-tablet-shared:16px;
--layout-membership-card-radius-small-tablet-shared:12px;
--layout-membership-gap-tablet-shared:clamp(8px,1vw,12px);
--layout-membership-cancel-padding-tablet-shared:clamp(10px,1.25vw,14px) clamp(14px,1.55vw,16px);
--layout-membership-button-padding-tablet-shared:clamp(7px,.9vw,10px);
--layout-membership-plan-gap-tablet-shared:clamp(8px,1vw,10px);
--layout-membership-plan-padding-tablet-shared:clamp(10px,1.25vw,16px) clamp(10px,1.1vw,12px);
--layout-membership-plan-top-padding-tablet-shared:clamp(16px,1.8vw,20px);
--layout-membership-plan-button-padding-tablet-shared:clamp(6px,.85vw,9px);
--layout-membership-scroll-pad-right-tablet-shared:12px;
--layout-help-gap-tablet-shared:clamp(8px,1vw,10px);
--layout-help-gap-tablet-wide-shared:clamp(10px,1.2vw,12px);
--layout-help-gap-tight-tablet-shared:7px;
--layout-help-shell-min-height-tablet-shared:0;
--layout-help-shell-min-height-short-tablet-shared:0;
--layout-help-desktop-columns-tablet-shared:minmax(0,1.02fr) minmax(300px,.98fr);
--layout-help-desktop-columns-short-tablet-shared:minmax(0,1.08fr) minmax(280px,.92fr);
--layout-help-hero-padding-tablet-shared:clamp(12px,1.45vw,14px) clamp(14px,1.55vw,16px);
--layout-help-hero-radius-tablet-shared:clamp(18px,1.8vw,20px);
--layout-help-grid-gap-tablet-shared:clamp(8px,1vw,10px);
--layout-help-card-padding-tablet-shared:clamp(10px,1.2vw,12px) clamp(11px,1.3vw,13px);
--layout-help-card-radius-tablet-shared:clamp(14px,1.5vw,16px);
--layout-help-form-gap-tablet-shared:clamp(7px,.9vw,8px);
--layout-help-control-padding-tablet-shared:clamp(7px,.9vw,9px) clamp(9px,1.05vw,10px);
--layout-help-control-radius-tablet-shared:clamp(10px,1.2vw,12px);
--layout-help-textarea-min-height-tablet-shared:clamp(156px,13.6vw,184px);
--layout-help-contact-button-min-width-tablet-shared:clamp(168px,19vw,200px);
--layout-help-contact-mini-max-width-tablet-shared:clamp(220px,25vw,280px);
}
#main.main-scroll-view .profile-screen{
width:min(100%,var(--layout-notebook-shell-max-width,1360px)) !important;
margin-inline:auto !important;
border-radius:var(--layout-profile-card-radius) !important;
padding:var(--layout-profile-card-padding) !important;
max-height:none !important;
overflow:visible !important;
}
#main.main-scroll-view .profile-screen .profile-tabs{
display:flex !important;
flex-wrap:wrap !important;
gap:var(--layout-profile-tabs-gap) !important;
border-bottom:2px solid var(--sky-lt) !important;
padding-bottom:8px !important;
margin-bottom:var(--layout-profile-tabs-bottom-gap) !important;
}
#main.main-scroll-view .profile-screen .profile-tabs .tab-btn{
min-height:0 !important;
border:0 !important;
border-bottom:3px solid transparent !important;
border-radius:0 !important;
background:none !important;
padding:8px 12px !important;
font-size:clamp(.78rem,.9vw,.9rem) !important;
line-height:1.15 !important;
}
#main.main-scroll-view .profile-screen .profile-tabs .tab-btn.active{
color:var(--sky-dark) !important;
border-bottom-color:var(--sky) !important;
background:none !important;
}
#main.main-scroll-view .profile-screen--profile .prof-hero-body{
flex-direction:row !important;
align-items:stretch !important;
gap:var(--layout-profile-hero-body-gap) !important;
}
#main.main-scroll-view .profile-screen--profile .prof-hero-left{
width:var(--layout-profile-left-width) !important;
min-width:var(--layout-profile-left-min-width-tablet) !important;
max-width:var(--layout-profile-left-width) !important;
}
#main.main-scroll-view .profile-screen--profile .prof-hero-center{
width:100% !important;
min-width:0 !important;
text-align:center !important;
}
#main.main-scroll-view .profile-screen--profile .prof-hero-right{
width:auto !important;
min-width:0 !important;
max-width:calc(100% - var(--layout-profile-right-offset)) !important;
}
#main.main-scroll-view .profile-screen--profile .prof-pos-cols{
flex-wrap:nowrap !important;
gap:clamp(8px,1vw,10px) !important;
}
#main.main-scroll-view .profile-screen--profile .prof-pos-divider{
display:block !important;
}
#main.main-scroll-view .profile-screen--profile .prof-mini-stats{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:var(--layout-profile-mini-gap) !important;
}
#main.main-scroll-view .profile-screen--profile .av-grid{
grid-template-columns:var(--layout-profile-avatar-grid-columns) !important;
gap:var(--layout-profile-avatar-grid-gap) !important;
}
}
@media (min-width:961px) and (max-width:1199px) and (orientation:portrait) and (min-height:1200px){
#main.main-scroll-view .profile-screen{
height:var(--layout-profile-tall-portrait-shell-height) !important;
min-height:0 !important;
max-height:var(--layout-profile-tall-portrait-shell-height) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
#main.main-scroll-view .profile-screen--profile{
display:block !important;
}
#main.main-scroll-view .profile-screen--profile .prof-av-section{
display:block !important;
flex:0 1 auto !important;
}
#main.main-scroll-view .profile-screen--profile .av-grid{
flex:0 1 auto !important;
align-content:normal !important;
grid-template-columns:var(--layout-profile-avatar-grid-columns) !important;
}
#main.main-scroll-view .profile-screen--profile > .p-save{
margin-top:0 !important;
}
}
/* Notebook Help & Contact lock:
1200px+ keeps the combined Help / Contact screen inside the notebook frame.
Compact and mobile keep the earlier content-first scrolling behavior. */
@media (min-width:1200px){
html:has(body.route-scroll-view #main.main-scroll-view .profile-screen--help),
body.route-scroll-view:has(#main.main-scroll-view .profile-screen--help),
body.route-scroll-view:has(#main.main-scroll-view .profile-screen--help) #app{
height:100dvh !important;
min-height:100dvh !important;
max-height:100dvh !important;
overflow:hidden !important;
overscroll-behavior:none !important;
}
body.route-scroll-view:has(#main.main-scroll-view .profile-screen--help) #main.main-scroll-view{
--layout-profile-card-padding:10px 12px 12px;
--layout-profile-tabs-bottom-gap:8px;
--layout-help-gap:8px;
--layout-help-gap-secondary:7px;
--layout-help-grid-gap:8px;
--layout-help-card-padding:9px 10px;
--layout-help-card-radius:14px;
--layout-help-hero-padding:10px 12px;
--layout-help-hero-radius:16px;
--layout-help-form-gap:6px;
--layout-help-control-padding:7px 9px;
--layout-help-control-radius:10px;
--layout-help-textarea-min-height:168px;
--layout-help-textarea-min-height-desktop:168px;
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:hidden !important;
overscroll-behavior:none !important;
padding-bottom:0 !important;
scrollbar-width:none !important;
}
body.route-scroll-view:has(#main.main-scroll-view .profile-screen--help) #main.main-scroll-view::-webkit-scrollbar{
display:none !important;
}
#main.main-scroll-view .profile-screen--help{
width:min(100%,var(--layout-notebook-shell-max-width,1360px)) !important;
height:100% !important;
min-height:0 !important;
max-height:100% !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
padding:var(--layout-profile-card-padding) !important;
margin-bottom:0 !important;
}
#main.main-scroll-view .profile-screen--help .sect-h{
flex:0 0 auto !important;
margin-bottom:6px !important;
font-size:1rem !important;
line-height:1.05 !important;
}
#main.main-scroll-view .profile-screen--help .profile-tabs{
flex:0 0 auto !important;
gap:6px !important;
margin-bottom:var(--layout-profile-tabs-bottom-gap) !important;
padding-bottom:4px !important;
}
#main.main-scroll-view .profile-screen--help .profile-tabs .tab-btn{
min-height:34px !important;
padding:6px 10px !important;
font-size:.72rem !important;
line-height:1.1 !important;
}
#main.main-scroll-view .profile-screen--help .help-shell{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
overflow:hidden !important;
grid-template-rows:auto minmax(0,1fr) auto !important;
}
#main.main-scroll-view .profile-screen--help .help-hero{
padding:var(--layout-help-hero-padding) !important;
border-radius:var(--layout-help-hero-radius) !important;
}
#main.main-scroll-view .profile-screen--help .help-hero-kicker{
margin-bottom:4px !important;
padding:4px 8px !important;
font-size:.56rem !important;
}
#main.main-scroll-view .profile-screen--help .help-hero-title{
font-size:1rem !important;
margin-bottom:2px !important;
}
#main.main-scroll-view .profile-screen--help .help-hero-sub{
font-size:.68rem !important;
line-height:1.28 !important;
}
#main.main-scroll-view .profile-screen--help .help-grid{
min-height:0 !important;
overflow:hidden !important;
gap:var(--layout-help-grid-gap) !important;
}
#main.main-scroll-view .profile-screen--help .help-card,
#main.main-scroll-view .profile-screen--help .help-contact-box{
min-height:0 !important;
padding:var(--layout-help-card-padding) !important;
border-radius:var(--layout-help-card-radius) !important;
}
#main.main-scroll-view .profile-screen--help .help-card-top{
margin-bottom:6px !important;
}
#main.main-scroll-view .profile-screen--help .help-card-kicker{
margin-bottom:4px !important;
font-size:.64rem !important;
}
#main.main-scroll-view .profile-screen--help .help-card-title{
font-size:.88rem !important;
line-height:1.08 !important;
}
#main.main-scroll-view .profile-screen--help .help-fun-list{
gap:6px !important;
}
#main.main-scroll-view .profile-screen--help .help-fun-row{
gap:7px !important;
}
#main.main-scroll-view .profile-screen--help .help-fun-ico{
width:var(--layout-profile-content-inline-icon-size) !important;
height:var(--layout-profile-content-inline-icon-size) !important;
border-radius:10px !important;
font-size:.82rem !important;
}
#main.main-scroll-view .profile-screen--help .help-fun-title{
font-size:.74rem !important;
line-height:1.05 !important;
}
#main.main-scroll-view .profile-screen--help .help-fun-body,
#main.main-scroll-view .profile-screen--help .help-card-body{
font-size:.64rem !important;
line-height:1.24 !important;
}
#main.main-scroll-view .profile-screen--help .help-card-cta{
margin-top:6px !important;
font-size:.66rem !important;
}
#main.main-scroll-view .profile-screen--help .help-contact-box,
#main.main-scroll-view .profile-screen--help .help-contact-main{
gap:var(--layout-help-gap-secondary) !important;
overflow:visible !important;
}
#main.main-scroll-view .profile-screen--help .help-form-grid,
#main.main-scroll-view .profile-screen--help .help-form-field--issue,
#main.main-scroll-view .profile-screen--help .help-issue-select{
overflow:visible !important;
}
#main.main-scroll-view .profile-screen--help .help-form-control{
padding:var(--layout-help-control-padding) !important;
border-radius:var(--layout-help-control-radius) !important;
font-size:.66rem !important;
}
#main.main-scroll-view .profile-screen--help .help-form-textarea{
min-height:var(--layout-help-textarea-min-height-desktop) !important;
max-height:var(--layout-help-textarea-min-height-desktop) !important;
resize:none !important;
}
#main.main-scroll-view .profile-screen--help .help-form-hint{
padding:6px 8px !important;
font-size:.6rem !important;
line-height:1.24 !important;
}
#main.main-scroll-view .profile-screen--help .help-contact-actions{
gap:7px !important;
}
#main.main-scroll-view .profile-screen--help .help-contact-btn{
padding:7px 10px !important;
font-size:.68rem !important;
}
#main.main-scroll-view .profile-screen--help .help-contact-mini,
#main.main-scroll-view .profile-screen--help .help-footnote{
font-size:.56rem !important;
line-height:1.24 !important;
}
}
/* Canonical compact content scroll.
Profile, Membership, Help, Rewards, Growth Highlights, and rank pages share
one scroll owner on mobile: body/app are fixed, #main scrolls natively. */
@media (max-width:900px), (max-height:540px){
html:has(body.route-scroll-view #main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)),
body.route-scroll-view:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)),
body.route-scroll-view:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #app{
height:100svh !important;
height:100dvh !important;
min-height:100svh !important;
min-height:100dvh !important;
max-height:100svh !important;
max-height:100dvh !important;
overflow:hidden !important;
overscroll-behavior:none !important;
}
body.route-scroll-view:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #main.main-scroll-view{
flex:1 1 auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior-y:contain !important;
-webkit-overflow-scrolling:touch !important;
touch-action:pan-y !important;
padding-bottom:calc(var(--layout-route-scroll-padding) + env(safe-area-inset-bottom)) !important;
scrollbar-width:none !important;
}
body.route-scroll-view:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #main.main-scroll-view::-webkit-scrollbar{
display:none !important;
}
body.route-scroll-view #main.main-scroll-view :is(
.profile-screen,
.rewards-screen,
.rank-ladder-screen,
.help-shell,
.help-grid,
.pi-shell,
.rewards-shell
){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
}
/* Mobile/compact landscape token: never lock the fit-view shell to the
viewport height. Short landscape screens use the same visual structure but
must scroll naturally when content is taller than the viewport. */
@media (min-width:520px) and (max-width:767px) and (orientation:landscape),
(min-width:768px) and (max-width:1199px) and (orientation:landscape) and (max-height:500px){
html,
body.route-fit-view,
body.route-fit-view #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
body.route-fit-view #app{
overflow:visible !important;
}
#main.main-fit-view,
#main.main-fit-view:has(.home-dashboard){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
}
#main.main-fit-view .home-dashboard,
#main.main-fit-view .home-main,
#main.main-fit-view .home-side{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
#main.main-fit-view .home-fresh-progress-card{
height:auto !important;
min-height:210px !important;
max-height:none !important;
overflow:visible !important;
}
#main.main-fit-view .home-fresh-progress-list{
display:grid !important;
gap:6px !important;
overflow:visible !important;
}
#main.main-fit-view .home-fresh-progress-row{
min-height:40px !important;
padding:6px 7px !important;
gap:4px !important;
}
#main.main-fit-view .home-fresh-progress-icon{
width:26px !important;
height:26px !important;
border-radius:8px !important;
font-size:.76rem !important;
}
#main.main-fit-view .home-fresh-progress-label,
#main.main-fit-view .home-fresh-progress-count{
font-size:.62rem !important;
line-height:1.08 !important;
}
#main.main-fit-view .home-fresh-progress-info{
font-size:.54rem !important;
line-height:1.12 !important;
}
}
/* Tablet/compact home shared tokens:
keep right-rail titles identical and stop Daily Progress from collapsing
inside landscape tablet layouts. */
@media (min-width:768px) and (max-width:1199px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-right-title-font-tablet:clamp(.68rem,1vw,.78rem);
--layout-home-section-title-font:var(--layout-home-right-title-font-tablet);
--layout-home-right-title-padding-tablet:3px 8px;
--layout-home-right-title-min-height-tablet:18px;
--layout-home-right-title-gap-tablet:6px;
--layout-home-right-title-wrap-gap-tablet:7px;
}
#main.main-fit-view .home-promo-card .prog-row,
#main.main-fit-view .home-daily-card .panel-h{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
min-height:var(--layout-home-right-title-min-height-tablet) !important;
margin:0 0 var(--layout-home-right-title-wrap-gap-tablet) !important;
padding:0 !important;
border-bottom:0 !important;
}
#main.main-fit-view .info-card-hdr,
#main.main-fit-view .home-promo-card .prog-lbl,
#main.main-fit-view .home-fresh-progress-title-badge{
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:var(--layout-home-right-title-gap-tablet) !important;
min-height:var(--layout-home-right-title-min-height-tablet) !important;
padding:var(--layout-home-right-title-padding-tablet) !important;
font-size:var(--layout-home-section-title-font) !important;
line-height:1 !important;
white-space:nowrap !important;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (min-height:501px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-tablet-landscape-daily-height:clamp(224px,30dvh,260px);
--layout-home-tablet-landscape-daily-row-min-height:38px;
--layout-home-tablet-landscape-daily-row-gap:6px;
--layout-home-info-row-align:stretch;
--layout-home-info-card-align:stretch;
--layout-home-info-card-size:auto;
}
#main.main-fit-view .home-daily-card{
flex:0 0 var(--layout-home-tablet-landscape-daily-height) !important;
min-height:var(--layout-home-tablet-landscape-daily-height) !important;
height:var(--layout-home-tablet-landscape-daily-height) !important;
overflow:visible !important;
}
#main.main-fit-view .home-fresh-progress-list{
display:flex !important;
flex:1 1 auto !important;
min-height:0 !important;
flex-direction:column !important;
gap:var(--layout-home-tablet-landscape-daily-row-gap) !important;
overflow:visible !important;
}
#main.main-fit-view .home-fresh-progress-row{
flex:1 1 0 !important;
min-height:var(--layout-home-tablet-landscape-daily-row-min-height) !important;
padding:5px 8px !important;
}
}
/* Shared tablet/notebook Home gap:
keep the right rail gap aligned with the main Home section gap. */
@media (min-width:768px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-side-card-gap:var(--layout-home-adaptive-gap);
}
#main.main-fit-view .home-side{
gap:var(--layout-home-side-card-gap) !important;
}
#main.main-fit-view:has(.home-dashboard) .info-cards-row{
margin-top:var(--layout-home-adaptive-gap) !important;
}
}
/* Mobile portrait density token:
keep the stacked home readable, but remove the oversized hero reserve that
created wasted vertical space above the mode cards. */
@media (max-width:767px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-mobile-hero-bottom-space:clamp(72px,19vw,84px);
--layout-home-mobile-mascot-width:clamp(106px,31vw,118px);
--layout-home-mobile-section-gap:10px;
}
#main.main-fit-view .home-dashboard,
#main.main-fit-view .home-main,
#main.main-fit-view .home-side{
gap:var(--layout-home-mobile-section-gap) !important;
}
#main.main-fit-view .hero-wrap{
padding-bottom:var(--layout-home-mobile-hero-bottom-space) !important;
}
#main.main-fit-view .hero-mascot{
width:var(--layout-home-mobile-mascot-width) !important;
right:10px !important;
bottom:10px !important;
}
#main.main-fit-view .nav-btn,
body.route-fit-view .nav-btn,
.nav-btn{
min-height:44px !important;
}
#main.main-fit-view .sound-btn,
#main.main-fit-view .tts-btn,
#main.main-fit-view .icon-btn,
body.route-fit-view .sound-btn,
body.route-fit-view .tts-btn,
body.route-fit-view .icon-btn,
.sound-btn,
.tts-btn,
.icon-btn{
width:44px !important;
height:44px !important;
min-width:44px !important;
min-height:44px !important;
}
#main.main-fit-view .nav-profile,
body.route-fit-view .nav-profile,
.nav-profile{
min-height:44px !important;
}
#main.main-fit-view .mcard .mcard-start-btn,
body.route-fit-view .mcard .mcard-start-btn,
.mcard .mcard-start-btn{
min-height:44px !important;
padding:11px 18px !important;
}
}
@media (min-width:768px) and (max-width:960px) and (orientation:portrait){
#nav,
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
align-items:center !important;
column-gap:var(--layout-nav-grid-gap-x) !important;
row-gap:var(--layout-nav-grid-gap-y) !important;
min-height:var(--layout-nav-mobile-min-height) !important;
align-content:center !important;
}
#nav .nav-left,
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-left{
display:contents !important;
}
#nav .nav-logo,
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-logo{
grid-column:1 / 3 !important;
grid-row:1 !important;
min-width:var(--layout-nav-logo-min-width-mobile) !important;
max-width:none !important;
}
#nav .nav-right,
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nav .nav-right{
grid-column:3 !important;
grid-row:1 !important;
justify-self:end !important;
width:auto !important;
margin-left:0 !important;
}
#nb-play,
#nb-rewards,
#nb-insights,
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nb-play,
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nb-rewards,
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #nb-insights{
grid-row:2 !important;
width:100% !important;
min-height:44px !important;
flex:none !important;
}
#nb-play{grid-column:1 !important}
#nb-rewards{grid-column:2 !important}
#nb-insights{grid-column:3 !important}
}
@media (max-width:767px){
#nav .nav-btn,
.nav-btn{
min-height:44px !important;
}
}
/* Short landscape compact fit:
844x390 and similar phone-landscape/tablet-compact viewports should not
feel like the home screen is sliced through oversized sections. */
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (max-height:430px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-short-landscape-gap:6px;
--layout-home-short-landscape-hero-height:clamp(176px,46dvh,188px);
--layout-home-short-landscape-mode-height:clamp(140px,36dvh,148px);
--layout-home-short-landscape-info-height:clamp(128px,32dvh,142px);
--layout-home-short-landscape-promo-height:clamp(286px,74dvh,302px);
--layout-home-short-landscape-daily-height:clamp(218px,58dvh,238px);
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #app{
padding:6px 10px calc(6px + env(safe-area-inset-bottom)) !important;
gap:6px !important;
}
#main.main-fit-view:has(.home-dashboard){
padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;
}
#main.main-fit-view .home-dashboard{
gap:var(--layout-home-short-landscape-gap) !important;
}
#main.main-fit-view .home-main,
#main.main-fit-view .home-side{
gap:var(--layout-home-short-landscape-gap) !important;
}
#main.main-fit-view .hero-wrap{
flex:0 0 var(--layout-home-short-landscape-hero-height) !important;
height:var(--layout-home-short-landscape-hero-height) !important;
min-height:var(--layout-home-short-landscape-hero-height) !important;
max-height:var(--layout-home-short-landscape-hero-height) !important;
padding:8px clamp(96px,16vw,126px) 7px 10px !important;
}
#main.main-fit-view .hero-title{
font-size:clamp(1.08rem,2.25vw,1.32rem) !important;
margin-bottom:3px !important;
}
#main.main-fit-view .hero-sub{
font-size:clamp(.5rem,.92vw,.62rem) !important;
line-height:1.24 !important;
margin-bottom:4px !important;
}
#main.main-fit-view .hero-chips-label{
margin:6px 0 2px !important;
font-size:clamp(.42rem,.72vw,.48rem) !important;
}
#main.main-fit-view .hero-title,
#main.main-fit-view .hero-sub,
#main.main-fit-view .hero-chips-label,
#main.main-fit-view .hero-chips{
max-width:calc(100% - clamp(92px,15vw,120px)) !important;
}
#main.main-fit-view .hero-chips{
gap:3px !important;
}
#main.main-fit-view .hchip{
padding:2px 4px !important;
border-radius:9px !important;
}
#main.main-fit-view .hchip svg,
#main.main-fit-view .hchip img{
width:clamp(18px,3.5vw,24px) !important;
height:clamp(18px,3.5vw,24px) !important;
}
#main.main-fit-view .hchip-lbl{
font-size:clamp(.34rem,.58vw,.42rem) !important;
}
#main.main-fit-view .hero-mascot{
width:clamp(92px,15vw,120px) !important;
right:6px !important;
bottom:4px !important;
}
#main.main-fit-view .mode-row{
flex:0 0 var(--layout-home-short-landscape-mode-height) !important;
grid-auto-rows:minmax(var(--layout-home-short-landscape-mode-height),auto) !important;
min-height:var(--layout-home-short-landscape-mode-height) !important;
max-height:none !important;
margin-top:var(--layout-home-short-landscape-gap) !important;
gap:var(--layout-home-short-landscape-gap) !important;
}
#main.main-fit-view .mcard{
height:var(--layout-home-short-landscape-mode-height) !important;
min-height:var(--layout-home-short-landscape-mode-height) !important;
padding:6px !important;
}
#main.main-fit-view .mcard-content,
#main.main-fit-view .mcard.choice-adventure .mcard-content{
gap:2px !important;
padding:2px 4px !important;
justify-content:space-between !important;
}
#main.main-fit-view .mcard.active .mcard-icon,
#main.main-fit-view .mcard.challenge .mcard-icon,
#main.main-fit-view .mcard.choice-adventure .mcard-icon{
width:clamp(28px,5.2vw,38px) !important;
height:clamp(28px,5.2vw,38px) !important;
}
#main.main-fit-view .mcard .mcard-start-btn{
min-height:28px !important;
padding:4px 12px !important;
}
#main.main-fit-view .mcard-title{
font-size:clamp(.7rem,1.3vw,.78rem) !important;
line-height:1.05 !important;
margin:0 !important;
}
#main.main-fit-view .mcard-sub{
font-size:clamp(.48rem,.9vw,.56rem) !important;
line-height:1.12 !important;
margin:0 !important;
}
#main.main-fit-view .mcard-progress-copy{
font-size:clamp(.42rem,.72vw,.48rem) !important;
margin:1px 0 0 !important;
}
#main.main-fit-view .mcard .prog-bar{
height:4px !important;
margin:1px 0 !important;
}
#main.main-fit-view .info-cards-row{
flex:0 0 var(--layout-home-short-landscape-info-height) !important;
height:var(--layout-home-short-landscape-info-height) !important;
min-height:var(--layout-home-short-landscape-info-height) !important;
margin-top:var(--layout-home-short-landscape-gap) !important;
}
#main.main-fit-view .home-promo-card{
flex:0 0 var(--layout-home-short-landscape-promo-height) !important;
min-height:var(--layout-home-short-landscape-promo-height) !important;
height:var(--layout-home-short-landscape-promo-height) !important;
}
#main.main-fit-view .home-daily-card{
flex:0 0 var(--layout-home-short-landscape-daily-height) !important;
min-height:var(--layout-home-short-landscape-daily-height) !important;
height:var(--layout-home-short-landscape-daily-height) !important;
}
#main.main-fit-view .role-journey-box{
min-height:clamp(82px,22dvh,94px) !important;
padding:5px 7px !important;
}
#main.main-fit-view .home-promo-card .home-promo-stat-row{
grid-template-columns:20px minmax(0,1fr) !important;
gap:4px !important;
height:34px !important;
min-height:34px !important;
padding:2px 4px !important;
}
#main.main-fit-view .home-promo-card .pem{
width:20px !important;
height:20px !important;
}
#main.main-fit-view .home-promo-card .promo-stat-copy{
gap:2px !important;
}
#main.main-fit-view .home-promo-card .promo-stat-title-row{
gap:5px !important;
}
#main.main-fit-view .home-promo-card .plbl,
#main.main-fit-view .home-promo-card .pnums{
font-size:.54rem !important;
line-height:1 !important;
}
#main.main-fit-view .home-promo-card .pbar{
height:4px !important;
}
}
/* Desktop/notebook Home mode-card fit:
keep icon, copy, progress bar, and CTA in separate slots at wide short views
such as 1920x862. */
@media (min-width:1200px) and (min-height:760px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-adaptive-mode-height:var(--layout-home-mode-row-height-desktop-fit);
}
#main.main-fit-view .mode-row{
flex-basis:var(--layout-home-adaptive-mode-height) !important;
min-height:var(--layout-home-adaptive-mode-height) !important;
}
#main.main-fit-view .mcard-content,
#main.main-fit-view .mcard.choice-adventure .mcard-content{
justify-content:flex-start !important;
gap:4px !important;
}
#main.main-fit-view .mcard-text-block{
flex:1 1 auto !important;
height:auto !important;
min-height:0 !important;
justify-content:flex-start !important;
gap:2px !important;
}
#main.main-fit-view .mcard.active .mcard-icon,
#main.main-fit-view .mcard.challenge .mcard-icon,
#main.main-fit-view .mcard.choice-adventure .mcard-icon{
width:var(--layout-home-card-icon-size-desktop-fit) !important;
height:var(--layout-home-card-icon-size-desktop-fit) !important;
padding:5px !important;
}
#main.main-fit-view .mcard-title,
#main.main-fit-view .mcard-sub,
#main.main-fit-view .mcard-progress-copy,
#main.main-fit-view .mcard .prog-bar,
#main.main-fit-view .mcard .mcard-start-btn{
flex:0 0 auto !important;
}
#main.main-fit-view .mcard-sub{
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
min-height:calc(2 * 1.18em) !important;
overflow:hidden !important;
}
#main.main-fit-view .mcard .mcard-start-btn{
align-self:var(--layout-home-card-button-align) !important;
margin-top:auto !important;
}
}
/* Short notebook Home info-card fit for legacy layouts. */
@media (min-width:1200px) and (min-height:700px) and (max-height:840px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-info-row-align:stretch;
--layout-home-info-row-flex:0 0 auto;
--layout-home-info-row-size:auto;
--layout-home-info-row-min-size:0px;
--layout-home-info-card-align:stretch;
--layout-home-info-card-size:auto;
--layout-home-info-card-min-size:0px;
--layout-home-info-card-padding-notebook:8px 10px 6px;
}
#main.main-fit-view:has(.home-dashboard) .info-cards-row{
align-items:stretch !important;
flex:0 0 auto !important;
height:auto !important;
min-height:0 !important;
}
#main.main-fit-view:has(.home-dashboard) .info-card{
align-self:stretch !important;
height:100% !important;
min-height:0 !important;
justify-content:stretch !important;
padding:var(--layout-home-info-card-padding-notebook) !important;
}
}
/* Home section title consistency across supporting panels. */
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-section-title-font:.88rem;
}
#main.main-fit-view:has(.home-dashboard) .info-card-hdr,
#main.main-fit-view:has(.home-dashboard) .home-promo-card .prog-lbl,
#main.main-fit-view:has(.home-dashboard) .home-fresh-progress-title-badge{
font-size:var(--layout-home-section-title-font) !important;
line-height:1 !important;
}
@media (min-width:768px) and (max-width:1199px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-section-title-font:var(--layout-home-right-title-font-tablet);
}
}
@media (min-width:1200px) and (max-height:900px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-section-title-font:clamp(.66rem,.76vw,.76rem);
}
}
/* Shared compact home info-card ratio:
tablet/mobile landscape and compact notebook widths keep the two learning
cards on one visual baseline, with identical text treatment in both cards. */
@media (min-width:768px) and (max-width:1512px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-info-card-template:auto repeat(3,minmax(clamp(30px,3vw,34px),auto));
--layout-home-info-card-row-gap:clamp(1px,.28vw,3px);
--layout-home-info-title-font-shared:clamp(.72rem,1.05vw,.8rem);
--layout-home-info-title-line-height-shared:1.12;
--layout-home-info-desc-font-shared:clamp(.58rem,.9vw,.66rem);
--layout-home-info-desc-line-height-shared:1.12;
--layout-home-info-desc-line-clamp-shared:1;
}
#main.main-fit-view:has(.home-dashboard) .info-cards-row{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-auto-rows:minmax(0,1fr) !important;
align-items:stretch !important;
}
#main.main-fit-view:has(.home-dashboard) .info-card{
align-self:stretch !important;
height:100% !important;
min-height:0 !important;
display:grid !important;
grid-template-rows:var(--layout-home-info-card-template) !important;
align-content:stretch !important;
gap:var(--layout-home-info-card-row-gap) !important;
}
#main.main-fit-view:has(.home-dashboard) .info-card .hiw-item{
min-height:0 !important;
margin-bottom:0 !important;
align-items:center !important;
}
#main.main-fit-view:has(.home-dashboard) .hiw-item-body{
min-height:0 !important;
}
#main.main-fit-view:has(.home-dashboard) .hiw-item-title,
#main.main-fit-view:has(.home-dashboard) .info-card-skills .hiw-item-title{
font-size:var(--layout-home-info-title-font-shared) !important;
line-height:var(--layout-home-info-title-line-height-shared) !important;
}
#main.main-fit-view:has(.home-dashboard) .hiw-item-desc,
#main.main-fit-view:has(.home-dashboard) .info-card-skills .hiw-item-desc{
font-size:var(--layout-home-info-desc-font-shared) !important;
line-height:var(--layout-home-info-desc-line-height-shared) !important;
margin-top:1px !important;
display:-webkit-box !important;
-webkit-line-clamp:var(--layout-home-info-desc-line-clamp-shared) !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
}
}
/* Challenge question fit: keep tablet/notebook gameplay above the fold. */
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge{
--layout-challenge-gap:5px;
--layout-challenge-padding:8px 10px;
--layout-challenge-vs-padding:5px 12px;
--layout-challenge-avatar-size:42px;
--layout-challenge-name-size:.68rem;
--layout-challenge-score-size:1.04rem;
--layout-challenge-vs-badge-size:32px;
--layout-challenge-vs-badge-margin:0 8px;
--layout-challenge-question-padding:7px 9px;
--layout-challenge-question-icon-size:var(--layout-play-category-icon-size-compact);
--layout-challenge-question-title-size:1rem;
--layout-challenge-question-title-line-height:1.12;
--layout-challenge-question-body-size:.92rem;
--layout-challenge-choice-gap:5px;
--layout-challenge-choice-min-height:64px;
--layout-challenge-choice-padding:13px 14px;
--layout-challenge-choice-copy-size:1.08rem;
--layout-challenge-choice-copy-line-height:1.22;
padding:8px 10px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-fullscreen{
gap:var(--layout-challenge-gap) !important;
padding:0 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-topbar{
min-height:18px !important;
margin-bottom:0 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-vs-bar{
padding:var(--layout-challenge-vs-padding) !important;
margin-bottom:2px !important;
border-radius:18px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-combatant{
gap:1px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-name{
font-size:var(--layout-challenge-name-size) !important;
line-height:1 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-pts{
font-size:var(--layout-challenge-score-size) !important;
line-height:.96 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-pts-lbl{
font-size:.48rem !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .challenge-timer-row{
min-height:28px !important;
padding:2px 8px !important;
margin:1px 0 3px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .challenge-timer{
min-width:30px !important;
height:30px !important;
font-size:.95rem !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-question-card{
padding:var(--layout-challenge-question-padding) !important;
border-radius:18px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-icon-ring{
margin:0 auto 2px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-meta{
min-height:18px !important;
margin-bottom:3px !important;
padding:0 34px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-cat{
font-size:.68rem !important;
line-height:1 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-meta .sc-tts-btn{
width:30px !important;
height:30px !important;
top:6px !important;
right:8px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-glass{
padding:7px 8px !important;
margin-top:2px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-title{
margin-bottom:20px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-diff{
top:6px !important;
left:8px !important;
padding:3px 8px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-body{
line-height:1.24 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-choices{
gap:var(--layout-challenge-choice-gap) !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-choices .cho-btn{
min-height:var(--layout-challenge-choice-min-height) !important;
padding:var(--layout-challenge-choice-padding) !important;
align-items:center !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-choices .cho-ltr{
width:31px !important;
height:31px !important;
border-radius:10px !important;
font-size:.88rem !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-dots{
flex-wrap:nowrap !important;
gap:2px !important;
max-width:none !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .round-dot{
width:6px !important;
height:6px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .round-dot.current{
width:9px !important;
height:9px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-vs-bar{
min-height:0 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-combatant{
display:grid !important;
grid-template-columns:76px auto;
grid-template-rows:auto auto;
align-items:center !important;
justify-content:center !important;
column-gap:8px !important;
row-gap:1px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-av-ring{
grid-column:1;
grid-row:1;
justify-self:center;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-name{
grid-column:1;
grid-row:2;
align-self:start;
max-width:76px !important;
text-align:center !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-pts{
grid-column:2;
grid-row:1;
align-self:center;
justify-self:start;
max-width:72px !important;
text-align:left !important;
}
@media (max-width:767px) and (orientation:portrait){
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-vs-bar{
display:grid !important;
grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) !important;
align-items:center !important;
column-gap:6px !important;
padding:7px 9px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-combatant{
width:auto !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:44px minmax(0,1fr) !important;
grid-template-rows:auto auto !important;
align-items:center !important;
justify-content:stretch !important;
column-gap:8px !important;
row-gap:2px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .player-side{
justify-self:stretch !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .boss-side{
justify-self:stretch !important;
grid-template-columns:minmax(0,1fr) 44px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-av-ring{
grid-column:1 !important;
grid-row:1 / span 2 !important;
justify-self:center !important;
width:42px !important;
height:42px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-name{
grid-column:2 !important;
grid-row:1 !important;
align-self:end !important;
justify-self:start !important;
max-width:100% !important;
text-align:left !important;
font-size:.62rem !important;
line-height:1.05 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-pts{
grid-column:2 !important;
grid-row:2 !important;
align-self:start !important;
justify-self:start !important;
max-width:100% !important;
text-align:left !important;
font-size:.95rem !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-vs-badge{
grid-column:2 !important;
justify-self:center !important;
width:32px !important;
height:32px !important;
margin:0 !important;
font-size:.86rem !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .boss-side .ch-av-ring{
grid-column:2 !important;
justify-self:end !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .boss-side .ch-name,
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .boss-side .ch-pts{
grid-column:1 !important;
justify-self:end !important;
text-align:right !important;
}
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round{
display:grid !important;
grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) !important;
align-items:center !important;
gap:6px !important;
padding:10px !important;
}
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-finish-score-side{
min-width:0 !important;
display:grid !important;
grid-template-columns:44px minmax(0,1fr) !important;
grid-template-rows:auto auto auto !important;
align-items:center !important;
column-gap:8px !important;
row-gap:2px !important;
padding:8px !important;
}
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-finish-score-side--boss{
grid-template-columns:minmax(0,1fr) 44px !important;
}
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-finish-score-avatar{
grid-column:1 !important;
grid-row:1 / span 3 !important;
width:42px !important;
height:42px !important;
margin:0 !important;
justify-self:start !important;
}
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-finish-score-label,
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-finish-score-num,
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-round-badge{
grid-column:2 !important;
justify-self:start !important;
text-align:left !important;
}
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-finish-score-label{
font-size:.58rem !important;
line-height:1 !important;
}
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-finish-score-num{
font-size:1.36rem !important;
line-height:.94 !important;
}
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-round-badge{
max-width:100% !important;
margin-top:1px !important;
padding:4px 6px !important;
font-size:.52rem !important;
line-height:1.05 !important;
white-space:normal !important;
}
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-finish-score-side--boss .challenge-finish-score-avatar{
grid-column:2 !important;
justify-self:end !important;
}
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-finish-score-side--boss .challenge-finish-score-label,
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-finish-score-side--boss .challenge-finish-score-num,
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-scoreboard--round .challenge-finish-score-side--boss .challenge-round-badge{
grid-column:1 !important;
justify-self:end !important;
text-align:right !important;
}
body.route-play-view #main.main-play-view .challenge-round-result .challenge-finish-vs--round{
grid-column:2 !important;
justify-self:center !important;
width:34px !important;
height:34px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
border-radius:50% !important;
font-size:.78rem !important;
}
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round){
display:grid !important;
grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) !important;
align-items:center !important;
gap:6px !important;
padding:10px !important;
}
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round) .challenge-finish-score-side{
min-width:0 !important;
display:grid !important;
grid-template-columns:44px minmax(0,1fr) !important;
grid-template-rows:auto auto auto !important;
align-items:center !important;
column-gap:8px !important;
row-gap:4px !important;
padding:8px !important;
}
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round) .challenge-finish-score-side--boss{
grid-template-columns:minmax(0,1fr) 44px !important;
}
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round) .challenge-finish-score-avatar{
grid-column:1 !important;
grid-row:1 / span 2 !important;
width:42px !important;
height:42px !important;
margin:0 !important;
justify-self:start !important;
}
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round) .challenge-finish-score-label,
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round) .challenge-finish-score-num{
grid-column:2 !important;
justify-self:start !important;
text-align:left !important;
}
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round) .challenge-finish-score-label{
font-size:.58rem !important;
line-height:1 !important;
}
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round) .challenge-finish-score-num{
font-size:1.42rem !important;
line-height:.94 !important;
}
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round) .challenge-finish-score-bar{
grid-column:1 / -1 !important;
width:100% !important;
margin-top:2px !important;
}
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round) .challenge-finish-score-side--boss .challenge-finish-score-avatar{
grid-column:2 !important;
justify-self:end !important;
}
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round) .challenge-finish-score-side--boss .challenge-finish-score-label,
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round) .challenge-finish-score-side--boss .challenge-finish-score-num{
grid-column:1 !important;
justify-self:end !important;
text-align:right !important;
}
body.route-play-view #main.main-play-view .challenge-finish-card .challenge-finish-scoreboard:not(.challenge-finish-scoreboard--round) .challenge-finish-vs{
grid-column:2 !important;
justify-self:center !important;
width:34px !important;
height:34px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
border-radius:50% !important;
font-size:.78rem !important;
}
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge){
--story-choice-size:1.08rem;
--story-choice-min:64px;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match){
gap:5px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match) .cho-btn{
min-height:64px !important;
padding:13px 14px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match) .cho-copy{
font-size:1.08rem !important;
line-height:1.22 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match) .cho-ltr{
width:31px !important;
height:31px !important;
border-radius:10px !important;
font-size:.88rem !important;
}
/* Short tablet/notebook landscape guardrail.
1180 x 696 and nearby views keep the bigger answer style, but compress
vertical chrome so gameplay does not clip and non-game pages can scroll. */
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (max-height:720px){
body.route-fit-view,
body.route-fit-view #app{
height:auto !important;
min-height:100dvh !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
body.route-fit-view #main.main-fit-view{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch;
}
body.route-play-view,
body.route-play-view #app{
height:100dvh !important;
min-height:100dvh !important;
max-height:100dvh !important;
overflow:hidden !important;
}
body.route-play-view #main.main-play-view{
min-height:0 !important;
overflow:hidden !important;
padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge{
--layout-challenge-gap:4px;
--layout-challenge-padding:6px 8px;
--layout-challenge-vs-padding:4px 10px;
--layout-challenge-avatar-size:38px;
--layout-challenge-name-size:.66rem;
--layout-challenge-score-size:1rem;
--layout-challenge-vs-badge-size:30px;
--layout-challenge-vs-badge-margin:0 7px;
--layout-challenge-question-padding:6px 8px;
--layout-challenge-question-icon-size:56px;
--layout-challenge-question-title-size:.98rem;
--layout-challenge-question-body-size:.9rem;
--layout-challenge-choice-gap:4px;
--layout-challenge-choice-min-height:58px;
--layout-challenge-choice-padding:11px 12px;
--layout-challenge-choice-copy-size:1.02rem;
--layout-challenge-choice-copy-line-height:1.18;
padding:6px 8px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-fullscreen{
gap:var(--layout-challenge-gap) !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-topbar{
min-height:16px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-vs-bar{
margin-bottom:1px !important;
border-radius:16px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .challenge-timer-row{
min-height:26px !important;
padding:1px 8px !important;
margin:0 0 2px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .challenge-timer{
min-width:28px !important;
height:28px !important;
font-size:.9rem !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-question-card{
border-radius:16px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-icon-ring{
margin:0 auto 1px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-meta{
min-height:16px !important;
margin-bottom:2px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-glass{
padding:6px 8px !important;
margin-top:1px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-title{
margin-bottom:14px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-diff{
top:5px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-choices .cho-ltr{
width:29px !important;
height:29px !important;
border-radius:9px !important;
font-size:.84rem !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge){
--story-shell-pad:6px;
--story-panel-pad:6px;
--story-card-pad:7px;
--story-gap:4px;
--story-title-size:1rem;
--story-question-size:.92rem;
--story-choice-size:1.02rem;
--story-choice-min:58px;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-top{
padding:6px 8px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-icon-ring{
width:var(--layout-play-category-icon-size-compact) !important;
height:var(--layout-play-category-icon-size-compact) !important;
margin-bottom:2px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass{
padding:7px 8px !important;
margin-top:0 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match) .cho-btn{
min-height:58px !important;
padding:11px 12px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match) .cho-copy{
font-size:1.02rem !important;
line-height:1.18 !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match) .cho-ltr{
width:29px !important;
height:29px !important;
border-radius:9px !important;
font-size:.84rem !important;
}
}
/* Global adaptive layout safety foundation.
Normal content routes scroll when needed and never use viewport clipping as
their primary fit strategy. Active gameplay surfaces may opt into a framed
playfield when the interaction depends on stable viewport edges. */
body.route-fit-view,
body.route-scroll-view{
overflow:hidden !important;
}
body.route-fit-view #app,
body.route-scroll-view #app{
height:100dvh !important;
min-height:100dvh !important;
max-height:100dvh !important;
overflow:hidden !important;
}
body.route-fit-view #main.main-fit-view,
body.route-scroll-view #main.main-scroll-view{
min-height:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:touch !important;
touch-action:pan-y !important;
padding-bottom:var(--layout-route-scroll-padding) !important;
}
body.route-fit-view #main.main-fit-view .screen,
body.route-scroll-view #main.main-scroll-view .screen{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:var(--layout-content-overflow) !important;
}
body.route-fit-view #main.main-fit-view .home-dashboard,
body.route-fit-view #main.main-fit-view .rewards-screen,
body.route-scroll-view #main.main-scroll-view .rewards-screen,
body.route-scroll-view #main.main-scroll-view .profile-screen,
body.route-scroll-view #main.main-scroll-view .rank-ladder-screen{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:var(--layout-content-overflow) !important;
}
body.route-fit-view #main.main-fit-view > .screen,
body.route-scroll-view #main.main-scroll-view > .screen{
animation:none !important;
transform:none !important;
opacity:1 !important;
}
body.route-play-view #main.main-play-view{
min-height:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch;
}
body.route-play-view #main.main-play-view:has(.sc-grid),
body.route-play-view #main.main-play-view:has(.choiceadventure-round-screen){
overflow:var(--layout-play-overflow) !important;
overscroll-behavior:none !important;
padding-bottom:0 !important;
}
body.route-play-view #main.main-play-view:has(.story-lobby-horiz),
body.route-play-view #main.main-play-view:has(.challenge-lobby-horiz),
body.route-play-view #main.main-play-view:has(.choiceadventure-lobby-screen){
overflow-y:auto !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz,
body.route-play-view #main.main-play-view .challenge-lobby-horiz,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen{
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:var(--layout-content-overflow) !important;
}
/* Home mode-card safety net.
Keep the three game cards on the notebook-style centered flow while
preserving stable sizing so copy/progress/CTA do not overlap. */
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row{
align-items:stretch !important;
grid-auto-rows:minmax(var(--layout-home-mode-card-safe-min, 178px), auto) !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard{
height:auto !important;
min-height:var(--layout-home-mode-card-safe-min, 178px) !important;
max-height:none !important;
padding:var(--layout-home-mode-card-safe-padding, 12px) !important;
overflow:var(--layout-content-overflow) !important;
justify-content:stretch !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard-content,
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard.choice-adventure .mcard-content{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:var(--layout-home-mode-card-safe-gap, 6px) !important;
height:auto !important;
min-height:100% !important;
padding:0 !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard.active .mcard-icon,
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard.challenge .mcard-icon,
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard.choice-adventure .mcard-icon{
width:var(--layout-home-mode-card-safe-icon, clamp(56px,6vw,78px)) !important;
height:var(--layout-home-mode-card-safe-icon, clamp(56px,6vw,78px)) !important;
flex:0 0 auto !important;
align-self:center !important;
margin:0 !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard-text-block{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:var(--layout-home-mode-card-safe-text-gap, 4px) !important;
width:100% !important;
min-height:0 !important;
height:auto !important;
text-align:center !important;
flex:0 0 auto !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard-title{
margin:0 !important;
max-width:100% !important;
line-height:1.12 !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard-sub{
display:block !important;
-webkit-box-orient:initial !important;
-webkit-line-clamp:unset !important;
min-height:0 !important;
max-height:none !important;
line-height:var(--layout-home-mode-card-safe-sub-line, 1.18) !important;
margin:0 !important;
overflow:var(--layout-content-overflow) !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard .prog-bar{
width:100% !important;
max-width:var(--layout-home-mode-card-safe-progress-width, 150px) !important;
flex:0 0 auto !important;
margin:0 !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard-progress-copy{
min-height:1.16em !important;
line-height:1.16 !important;
margin:0 !important;
max-width:100% !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard .mcard-start-btn{
flex:0 0 auto !important;
margin:var(--layout-home-mode-card-safe-button-gap, 2px) 0 0 !important;
align-self:center !important;
min-height:var(--layout-home-mode-card-safe-button-height, 30px) !important;
max-width:100% !important;
white-space:nowrap !important;
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-mode-card-safe-min:clamp(160px,24dvh,190px);
--layout-home-mode-card-safe-padding:9px;
--layout-home-mode-card-safe-gap:5px;
--layout-home-mode-card-safe-text-gap:3px;
--layout-home-mode-card-safe-icon:clamp(50px,6vw,62px);
--layout-home-mode-card-safe-progress-width:min(100%,132px);
--layout-home-mode-card-safe-button-height:28px;
--layout-home-mode-card-safe-button-gap:2px;
--layout-home-mode-card-safe-sub-line:1.14em;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (max-height:720px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-mode-card-safe-min:clamp(148px,24dvh,168px);
--layout-home-mode-card-safe-padding:8px;
--layout-home-mode-card-safe-gap:4px;
--layout-home-mode-card-safe-text-gap:3px;
--layout-home-mode-card-safe-icon:clamp(44px,5vw,54px);
--layout-home-mode-card-safe-progress-width:min(100%,126px);
--layout-home-mode-card-safe-button-height:27px;
--layout-home-mode-card-safe-button-gap:1px;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard-sub{
-webkit-line-clamp:unset !important;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (max-height:720px){
body.route-play-view:has(#main.main-play-view .story-lobby-horiz),
body.route-play-view:has(#main.main-play-view .challenge-lobby-horiz),
body.route-play-view:has(#main.main-play-view .choiceadventure-lobby-screen),
body.route-play-view:has(#main.main-play-view .story-lobby-horiz) #app,
body.route-play-view:has(#main.main-play-view .challenge-lobby-horiz) #app,
body.route-play-view:has(#main.main-play-view .choiceadventure-lobby-screen) #app{
height:100dvh !important;
min-height:100dvh !important;
max-height:100dvh !important;
overflow:hidden !important;
overscroll-behavior:none !important;
}
body.route-play-view #main.main-play-view:has(.story-lobby-horiz),
body.route-play-view #main.main-play-view:has(.challenge-lobby-horiz),
body.route-play-view #main.main-play-view:has(.choiceadventure-lobby-screen){
min-height:0 !important;
overflow:hidden !important;
padding:4px 8px 0 !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz,
body.route-play-view #main.main-play-view .challenge-lobby-horiz,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen{
height:calc(100% - 18px) !important;
min-height:0 !important;
max-height:calc(100% - 18px) !important;
gap:6px !important;
overflow:hidden !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .ch-lobby-banner,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .ch-lobby-banner,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .ca-lobby-banner{
flex:0 0 auto !important;
min-height:0 !important;
padding:6px 10px !important;
gap:8px !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .lobby-banner-icon,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .lobby-banner-icon,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .lobby-banner-icon{
width:54px !important;
height:54px !important;
flex-basis:54px !important;
border-radius:16px !important;
font-size:1.55rem !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .lobby-banner-title,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .lobby-banner-title,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .lobby-banner-title{
font-size:1.16rem !important;
line-height:1.04 !important;
margin-bottom:1px !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .lobby-banner-sub,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .lobby-banner-sub,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .lobby-banner-sub{
font-size:.62rem !important;
line-height:1.12 !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .lobby-banner-meta,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .lobby-banner-meta,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .lobby-banner-meta{
gap:5px !important;
margin-top:4px !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .lobby-banner-stat,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .lobby-banner-stat,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .lobby-banner-stat{
padding:2px 8px !important;
font-size:.58rem !important;
line-height:1.1 !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .ch-lobby-cards,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .ch-lobby-cards,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-cards{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,.9fr) !important;
gap:6px !important;
align-items:stretch !important;
overflow:hidden !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .ch-info-card,
body.route-play-view #main.main-play-view .story-lobby-horiz .story-action-card,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .ch-info-card,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-action-card,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .ch-info-card,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .ch-action-card{
min-height:0 !important;
height:auto !important;
max-height:100% !important;
padding:8px 10px !important;
gap:6px !important;
align-self:stretch !important;
overflow:hidden !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .story-progress-card,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .story-progress-card,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-mission-card,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-reward-explain{
padding:6px 8px !important;
border-radius:13px !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .story-progress-top,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .story-progress-top,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-mission-top{
margin-bottom:4px !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .story-progress-kicker,
body.route-play-view #main.main-play-view .story-lobby-horiz .story-progress-copy,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .story-progress-kicker,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .story-progress-copy{
font-size:.62rem !important;
line-height:1.06 !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .story-progress-bar,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .story-progress-bar{
height:7px !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .story-progress-note,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .story-progress-note{
margin-top:5px !important;
font-size:.58rem !important;
line-height:1.14 !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .story-type-grid{
gap:5px !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .story-type-chip{
min-height:42px !important;
padding:5px 7px !important;
gap:6px !important;
border-radius:12px !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .story-type-chip span{
width:30px !important;
height:30px !important;
border-radius:10px !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .story-type-chip strong{
font-size:.62rem !important;
line-height:1.08 !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .story-action-icon{
width:72px !important;
height:72px !important;
border-radius:20px !important;
font-size:1.9rem !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .story-action-stickers,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-action-stars{
gap:4px !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .story-action-stickers span,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-action-stars span{
padding:4px 7px !important;
font-size:.58rem !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .ch-action-title,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .ch-action-title,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .ch-action-title{
font-size:.86rem !important;
line-height:1.08 !important;
margin:0 !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .ch-action-sub,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .ch-action-sub,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .ch-action-sub{
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:2 !important;
max-height:2.24em !important;
overflow:hidden !important;
font-size:.62rem !important;
line-height:1.12 !important;
}
body.route-play-view #main.main-play-view .story-lobby-horiz .big-play,
body.route-play-view #main.main-play-view .challenge-lobby-horiz .big-play,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .ca-btn{
min-height:34px !important;
padding:7px 10px !important;
font-size:.72rem !important;
line-height:1.08 !important;
}
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-rules-card{
padding:8px !important;
border-radius:15px !important;
}
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-rules-kicker{
margin-bottom:5px !important;
font-size:.62rem !important;
}
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-rule-row{
padding:6px 7px !important;
gap:6px !important;
border-radius:12px !important;
}
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-rule-row + .challenge-rule-row{
margin-top:5px !important;
}
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-rule-badge{
width:34px !important;
height:34px !important;
border-radius:9px !important;
}
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-rule-badge em{
font-size:.48rem !important;
}
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-rule-badge strong{
font-size:.86rem !important;
}
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-rule-row strong{
font-size:.72rem !important;
margin-bottom:1px !important;
}
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-rule-row span{
font-size:.62rem !important;
line-height:1.12 !important;
}
body.route-play-view #main.main-play-view .challenge-lobby-horiz .challenge-info-note{
padding:6px 8px !important;
border-radius:12px !important;
font-size:.6rem !important;
line-height:1.14 !important;
}
body.route-play-view #main.main-play-view .challenge-lobby-horiz .ch-action-avatar{
width:54px !important;
height:54px !important;
}
body.route-play-view #main.main-play-view .challenge-lobby-horiz .ch-action-vs--png{
width:58px !important;
height:58px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-cards{
grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr) !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-action-icon{
width:50px !important;
height:50px !important;
border-radius:16px !important;
font-size:1.46rem !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .ca-action-hero{
gap:3px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-flow-list{
gap:5px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-flow-step{
min-height:0 !important;
padding:5px 7px !important;
gap:6px !important;
border-radius:12px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-flow-icon{
width:32px !important;
height:32px !important;
flex-basis:32px !important;
border-radius:10px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-flow-copy strong,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-mission-top,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-reward-explain-title{
font-size:.66rem !important;
line-height:1.08 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-flow-copy span,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-mission-scene,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-mission-prompt,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-reward-explain-copy{
font-size:.58rem !important;
line-height:1.12 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-mission-card{
padding:5px 7px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-mission-scene,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-mission-prompt{
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:2 !important;
max-height:2.28em !important;
overflow:hidden !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-reward-explain{
padding:5px 7px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-reward-list{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:4px !important;
margin-top:5px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-reward-chip{
justify-content:center !important;
min-height:26px !important;
padding:3px 5px !important;
gap:2px !important;
font-size:.52rem !important;
line-height:1.06 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-reward-chip svg,
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .choiceadventure-reward-chip img{
width:20px !important;
height:20px !important;
flex:0 0 20px !important;
margin:0 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-lobby-screen .ca-actions{
gap:4px !important;
margin-top:2px !important;
}
body.route-play-view:has(#main.main-play-view .choiceadventure-round-screen),
body.route-play-view:has(#main.main-play-view .choiceadventure-round-screen) #app{
height:100dvh !important;
min-height:100dvh !important;
max-height:100dvh !important;
overflow:hidden !important;
overscroll-behavior:none !important;
}
body.route-play-view #main.main-play-view:has(.choiceadventure-round-screen){
--layout-choice-adventure-fit-gap:5px;
--layout-choice-adventure-card-gap:6px;
--layout-choice-adventure-fit-banner-padding:6px 10px;
--layout-choice-adventure-fit-card-padding:7px 8px;
--layout-choice-adventure-fit-card-gap:4px;
--layout-choice-adventure-fit-button-padding:7px 10px;
--layout-choice-adventure-story-column-reference:clamp(278px,27vw,322px);
--layout-choice-adventure-story-question-min-height:clamp(118px,18dvh,142px);
min-height:0 !important;
overflow:hidden !important;
padding:4px 8px 0 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen{
height:calc(100% - 8px) !important;
min-height:0 !important;
max-height:calc(100% - 8px) !important;
gap:var(--layout-choice-adventure-fit-gap) !important;
overflow:hidden !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ca-lobby-banner{
display:none !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .lobby-banner-icon{
width:52px !important;
height:52px !important;
flex-basis:52px !important;
border-radius:16px !important;
font-size:1.55rem !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .lobby-banner-title{
font-size:1.15rem !important;
line-height:1.04 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .lobby-banner-sub{
font-size:.62rem !important;
line-height:1.12 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-cards{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
grid-template-columns:minmax(0,var(--layout-choice-adventure-story-column-reference)) minmax(0,1fr) !important;
gap:var(--layout-choice-adventure-card-gap) !important;
align-items:stretch !important;
overflow:hidden !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ch-info-card,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ch-action-card{
min-height:0 !important;
height:auto !important;
max-height:100% !important;
padding:var(--layout-choice-adventure-fit-card-padding) !important;
gap:var(--layout-choice-adventure-fit-card-gap) !important;
align-self:stretch !important;
overflow:hidden !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ch-info-card{
padding:0 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-card{
height:100% !important;
min-height:0 !important;
padding:8px 9px !important;
gap:4px !important;
grid-template-rows:auto auto minmax(var(--layout-choice-adventure-story-question-min-height),1fr) auto !important;
align-content:start !important;
overflow:hidden !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-card:has(.local-question-watermark){
grid-template-rows:auto auto auto minmax(var(--layout-choice-adventure-story-question-min-height),1fr) auto !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-top{
gap:5px !important;
margin-bottom:2px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-scene{
gap:6px !important;
margin-bottom:3px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-emoji{
width:34px !important;
height:34px !important;
border-radius:12px !important;
font-size:1.25rem !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-scene-copy strong{
font-size:.78rem !important;
line-height:1.08 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-scene-copy span{
font-size:.6rem !important;
line-height:1.08 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-text{
font-size:.9rem !important;
line-height:1.18 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-question{
min-height:var(--layout-choice-adventure-story-question-min-height) !important;
padding:6px 7px !important;
margin-bottom:0 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-tipline{
margin-top:0 !important;
padding:4px 5px !important;
font-size:.6rem !important;
line-height:1.12 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ca-action-hero{
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
grid-template-rows:auto auto !important;
align-items:center !important;
gap:2px 8px !important;
min-height:0 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ca-action-stall{
grid-row:1 / span 2 !important;
width:42px !important;
height:42px !important;
border-radius:14px !important;
font-size:1.32rem !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ch-action-title{
font-size:.82rem !important;
line-height:1.06 !important;
margin:0 !important;
text-align:left !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ch-action-sub{
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:2 !important;
max-height:2.2em !important;
overflow:hidden !important;
font-size:.58rem !important;
line-height:1.1 !important;
text-align:left !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-plan-progress{
padding:4px 6px !important;
font-size:.62rem !important;
line-height:1.08 !important;
margin:0 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-decision-block{
padding:4px !important;
gap:2px !important;
border-radius:12px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-decision-title{
gap:2px 5px !important;
font-size:.56rem !important;
line-height:1.06 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-decision-title strong{
font-size:.66rem !important;
line-height:1.06 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-selected-chip{
padding:2px 4px !important;
font-size:.5rem !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-choice-stack{
gap:3px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-choice-btn{
min-height:35px !important;
padding:4px 6px !important;
gap:6px !important;
border-radius:11px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-choice-num{
width:18px !important;
height:18px !important;
flex:0 0 18px !important;
border-radius:7px !important;
font-size:.52rem !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-choice-copy strong{
font-size:.6rem !important;
line-height:1.05 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-choice-copy em{
display:none !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ca-actions{
grid-template-columns:minmax(0,1.2fr) minmax(94px,.8fr) !important;
gap:4px !important;
margin-top:1px !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ca-btn{
min-height:32px !important;
padding:var(--layout-choice-adventure-fit-button-padding) !important;
font-size:.66rem !important;
line-height:1.08 !important;
}
}
@media (max-width:767px){
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row{
grid-auto-rows:auto !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard{
min-height:96px !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard-content,
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard.choice-adventure .mcard-content{
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
grid-template-rows:auto !important;
align-items:center !important;
justify-items:start !important;
gap:12px !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard-text-block{
justify-items:start !important;
text-align:left !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard-title,
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard-sub,
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mcard-progress-copy{
text-align:left !important;
}
}
@media (max-width:900px) and (orientation:landscape) and (max-height:540px){
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row .mcard,
.mode-row .mcard{
padding:22px 7px 7px !important;
overflow:hidden !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row .mcard-content,
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row .mcard.choice-adventure .mcard-content,
.mode-row .mcard-content,
.mode-row .mcard.choice-adventure .mcard-content{
gap:2px !important;
justify-content:center !important;
padding-top:1px !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row .mcard-icon,
.mode-row .mcard-icon{
width:clamp(32px,4.35vw,38px) !important;
height:clamp(32px,4.35vw,38px) !important;
box-sizing:border-box !important;
padding:3px !important;
margin:0 !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row .mcard.active .mcard-icon,
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row .mcard.challenge .mcard-icon,
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row .mcard.choice-adventure .mcard-icon,
.mode-row .mcard.active .mcard-icon,
.mode-row .mcard.challenge .mcard-icon,
.mode-row .mcard.choice-adventure .mcard-icon{
width:clamp(32px,4.35vw,38px) !important;
height:clamp(32px,4.35vw,38px) !important;
box-sizing:border-box !important;
padding:3px !important;
margin:0 !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row .mcard-title-row,
.mode-row .mcard-title-row{
min-height:13px !important;
justify-content:center !important;
width:100%;
padding:0 3px;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row .mcard-sub,
.mode-row .mcard-sub{
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:22px !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row .mcard-progress-copy,
.mode-row .mcard-progress-copy{
min-height:10px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
body.route-fit-view #main.main-fit-view:has(.home-dashboard) .mode-row .mcard .mcard-start-btn,
.mode-row .mcard .mcard-start-btn{
min-height:24px !important;
padding:4px 8px !important;
font-size:.6rem !important;
line-height:1.05 !important;
margin-top:1px !important;
}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (max-height:500px){
body.route-fit-view:has(#main.main-fit-view .home-dashboard){
--layout-home-info-card-template:auto repeat(3,minmax(37px,auto));
--layout-home-info-card-row-gap:2px;
--layout-home-info-desc-line-clamp-shared:unset;
}
#main.main-fit-view:has(.home-dashboard) .info-cards-row{
height:auto !important;
min-height:clamp(160px,42dvh,176px) !important;
flex-basis:auto !important;
}
#main.main-fit-view:has(.home-dashboard) .info-card{
padding:7px 8px 8px !important;
overflow:visible !important;
}
#main.main-fit-view:has(.home-dashboard) .info-card .hiw-item{
min-height:37px !important;
padding:3px 5px !important;
overflow:visible !important;
align-items:center !important;
}
#main.main-fit-view:has(.home-dashboard) .hiw-item-body{
min-height:0 !important;
overflow:visible !important;
}
#main.main-fit-view:has(.home-dashboard) .hiw-item-title{
line-height:1.06 !important;
}
#main.main-fit-view:has(.home-dashboard) .hiw-item-desc,
#main.main-fit-view:has(.home-dashboard) .info-card-skills .hiw-item-desc{
display:block !important;
-webkit-line-clamp:unset !important;
-webkit-box-orient:initial !important;
overflow:visible !important;
line-height:1.12 !important;
max-height:none !important;
}
}
/* Content text safety net:
In scroll/fit content routes, real copy should wrap and grow instead of
being ellipsized or clamped. Gameplay surfaces keep their own frame rules. */
body.route-fit-view #main.main-fit-view .screen :where(.mcard-sub,.hiw-item-desc,[class*="-copy"],[class*="-desc"],[class*="-sub"],[class*="-meta"]),
body.route-scroll-view #main.main-scroll-view .screen :where([class*="-copy"],[class*="-desc"],[class*="-sub"],[class*="-meta"]){
-webkit-box-orient:initial !important;
-webkit-line-clamp:unset !important;
max-height:none !important;
overflow:visible !important;
text-overflow:clip !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
body.route-fit-view #main.main-fit-view .screen :where(.mcard-sub,.hiw-item-desc){
display:block !important;
}
/* Shared CTA chrome:
Normal app CTA routes use the same Home nav and profile tab sizing. */
:root{
--layout-profile-cta-tab-font:clamp(.78rem,.86vw,.86rem);
--layout-profile-cta-tab-padding:6px 10px;
--layout-profile-cta-tab-min-height:34px;
--layout-profile-cta-tab-line-height:1.12;
}
body.route-home-nav #nav{
width:100% !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
body.route-home-nav:has(#main.main-scroll-view .profile-screen--help) #main.main-scroll-view{
width:100% !important;
box-sizing:border-box !important;
}
body.route-home-nav:has(#main.main-scroll-view .profile-screen--help) #main.main-scroll-view .profile-screen--help{
width:100% !important;
max-width:none !important;
box-sizing:border-box !important;
align-self:stretch !important;
margin-left:0 !important;
margin-right:0 !important;
}
#main.main-scroll-view .profile-screen .profile-tabs .tab-btn,
#main.main-scroll-view .profile-screen--subscription .profile-tabs .tab-btn,
#main.main-scroll-view .profile-screen--help .profile-tabs .tab-btn{
min-height:var(--layout-profile-cta-tab-min-height) !important;
padding:var(--layout-profile-cta-tab-padding) !important;
font-size:var(--layout-profile-cta-tab-font) !important;
line-height:var(--layout-profile-cta-tab-line-height) !important;
}
@media (min-width:768px){
body.route-home-nav #nav{
display:flex !important;
grid-template-columns:none !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:space-between !important;
min-height:0 !important;
}
body.route-home-nav #nav .nav-left{
display:flex !important;
flex:1 1 auto !important;
flex-wrap:nowrap !important;
min-width:0 !important;
}
body.route-home-nav #nav .nav-logo,
body.route-home-nav #nav .nav-btn,
body.route-home-nav #nav .nav-right{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
}
body.route-home-nav #nav .nav-btn .nav-btn-text{
display:inline-flex !important;
overflow:visible !important;
text-overflow:clip !important;
white-space:normal !important;
text-align:center !important;
line-height:1.05 !important;
}
body.route-home-nav #nav .nav-right{
flex:0 0 auto !important;
width:auto !important;
margin-left:auto !important;
}
}
@media (min-width:768px) and (max-width:960px) and (orientation:portrait){
body.route-home-nav #nav{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
align-items:center !important;
column-gap:var(--layout-nav-grid-gap-x) !important;
row-gap:var(--layout-nav-grid-gap-y) !important;
min-height:var(--layout-nav-mobile-min-height) !important;
align-content:center !important;
}
body.route-home-nav #nav .nav-left{
display:contents !important;
}
body.route-home-nav #nav .nav-logo{
grid-column:1 / 3 !important;
grid-row:1 !important;
min-width:var(--layout-nav-logo-min-width-mobile) !important;
max-width:none !important;
}
body.route-home-nav #nav .nav-right{
grid-column:3 !important;
grid-row:1 !important;
justify-self:end !important;
width:auto !important;
margin-left:0 !important;
}
body.route-home-nav #nav #nb-play,
body.route-home-nav #nav #nb-rewards,
body.route-home-nav #nav #nb-insights{
grid-row:2 !important;
width:100% !important;
min-height:44px !important;
flex:none !important;
}
body.route-home-nav #nav #nb-play{grid-column:1 !important}
body.route-home-nav #nav #nb-rewards{grid-column:2 !important}
body.route-home-nav #nav #nb-insights{grid-column:3 !important}
}
@media (min-width:768px) and (max-width:1199px) and (orientation:landscape) and (min-height:501px){
body.route-home-nav #nav{
display:flex !important;
grid-template-columns:none !important;
min-height:0 !important;
padding:var(--layout-home-compact-nav-padding) !important;
gap:var(--layout-home-compact-nav-gap) !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:space-between !important;
}
body.route-home-nav #nav .nav-left{
display:flex !important;
flex:1 1 auto !important;
flex-wrap:nowrap !important;
gap:var(--layout-home-compact-nav-gap) !important;
min-width:0 !important;
}
body.route-home-nav #nav .nav-logo{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:0 0 var(--layout-home-compact-nav-logo-width) !important;
min-width:var(--layout-home-compact-nav-logo-width) !important;
max-width:var(--layout-home-compact-nav-logo-width) !important;
font-size:var(--layout-home-compact-nav-logo-font) !important;
}
body.route-home-nav #nav .nav-logo::before{
width:var(--layout-nav-logo-icon-size-landscape) !important;
height:var(--layout-nav-logo-icon-size-landscape) !important;
flex-basis:var(--layout-nav-logo-icon-size-landscape) !important;
}
body.route-home-nav #nav .nav-btn{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:0 1 var(--layout-home-compact-nav-btn-width) !important;
width:auto !important;
min-width:0 !important;
min-height:var(--layout-nav-button-min-height-landscape) !important;
padding:6px 10px !important;
font-size:var(--layout-home-compact-nav-btn-font) !important;
justify-content:center !important;
}
body.route-home-nav #nav #nb-insights{
flex-basis:var(--layout-home-compact-nav-btn-wide-width) !important;
}
body.route-home-nav #nav .nav-btn .nav-btn-text{
display:inline-flex !important;
min-width:0 !important;
overflow:visible !important;
text-overflow:clip !important;
white-space:normal !important;
text-align:center !important;
line-height:1.05 !important;
}
body.route-home-nav #nav .nav-right{
order:0 !important;
grid-column:auto !important;
grid-row:auto !important;
justify-self:auto !important;
width:auto !important;
margin-left:auto !important;
gap:6px !important;
flex:0 0 auto !important;
}
body.route-home-nav #nav .icon-btn{
width:40px !important;
height:40px !important;
font-size:1rem !important;
}
body.route-home-nav #nav .nav-profile{
min-height:var(--layout-home-compact-nav-profile-min-height) !important;
padding:var(--layout-home-compact-nav-profile-padding) !important;
gap:var(--layout-home-compact-nav-profile-gap) !important;
}
body.route-home-nav #nav .nav-profile-info{
display:flex !important;
max-width:var(--layout-home-compact-nav-profile-width) !important;
}
body.route-home-nav #nav .nav-av{
width:32px !important;
height:32px !important;
}
body.route-home-nav #nav .nav-name{
font-size:.78rem !important;
}
body.route-home-nav #nav .nav-role{
font-size:.56rem !important;
}
}
.choiceadventure-result-screen .choiceadventure-reward-mini{
align-items:center !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon{
width:56px !important;
height:56px !important;
flex:0 0 56px !important;
}
.choiceadventure-result-screen .choiceadventure-reward-mini-icon svg,
.choiceadventure-result-screen .choiceadventure-reward-mini-icon img{
width:56px !important;
height:56px !important;
min-width:56px !important;
min-height:56px !important;
}
.choiceadventure-result-screen .choiceadventure-result-tip-card{
display:flex !important;
align-items:center !important;
}
/* Reward stat chips: keep icon/text tight and make result rewards feel more substantial. */
.play-result.play-result--story .result-points-pill,
.play-result.play-result--sequence .result-points-pill,
.play-result.play-result--match .result-points-pill{
gap:2px !important;
padding-left:6px !important;
}
.play-result.play-result--story .result-points-pill svg,
.play-result.play-result--story .result-points-pill img,
.play-result.play-result--sequence .result-points-pill svg,
.play-result.play-result--sequence .result-points-pill img,
.play-result.play-result--match .result-points-pill svg,
.play-result.play-result--match .result-points-pill img{
margin:0 !important;
}
.choiceadventure-lobby-screen .choiceadventure-reward-chip{
gap:3px !important;
}
.choiceadventure-lobby-screen .choiceadventure-reward-chip svg,
.choiceadventure-lobby-screen .choiceadventure-reward-chip img{
margin:0 !important;
}
.challenge-finish-card .challenge-finish-points-pill{
gap:2px !important;
}
.challenge-finish-card .challenge-finish-points-pill svg,
.challenge-finish-card .challenge-finish-points-pill img{
width:36px !important;
height:36px !important;
min-width:36px !important;
flex:0 0 36px !important;
margin:0 !important;
}
/* Promotion rank labels: allow long role names to wrap without overlaying icons. */
.home-promo-card .role-journey-box{
grid-template-columns:minmax(0,1fr) minmax(46px,auto) minmax(0,1fr) !important;
align-items:center !important;
}
.home-promo-card .role-journey-item{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
overflow:hidden !important;
}
.home-promo-card .role-journey-name,
.home-promo-card .right-panel-role-name{
display:-webkit-box !important;
width:100% !important;
max-width:100% !important;
min-height:2.18em !important;
margin-top:2px !important;
overflow:hidden !important;
overflow-wrap:anywhere !important;
text-align:center !important;
text-overflow:ellipsis !important;
white-space:normal !important;
word-break:normal !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:2 !important;
line-height:1.09 !important;
}
.home-promo-card .role-journey-mid{
min-width:clamp(46px,6vw,84px) !important;
max-width:clamp(46px,8vw,92px) !important;
}
.home-promo-card .role-journey-cue,
.home-promo-card .role-journey-hook{
max-width:100% !important;
overflow-wrap:anywhere !important;
text-align:center !important;
white-space:normal !important;
}
#main.main-fit-view .home-promo-card .role-journey-name,
#main.main-fit-view .home-promo-card .right-panel-role-name{
font-size:clamp(.5rem,1.1vw,.66rem) !important;
}
.rl-name-row{
align-items:flex-start !important;
min-width:0 !important;
}
.rl-name{
min-width:0 !important;
max-width:100% !important;
overflow-wrap:anywhere !important;
white-space:normal !important;
word-break:normal !important;
line-height:1.15 !important;
}
.rl-tier{
flex:0 0 auto !important;
}
.prof-rank-copy{
min-width:0 !important;
}
.prof-rank-title{
max-width:100% !important;
overflow-wrap:anywhere !important;
white-space:normal !important;
word-break:normal !important;
}
/* Story/Challenge prompt readability: keep the cards and question wording centered. */
.sc-grid.sc-grid--solo:not(.sc-grid--challenge){
--story-question-size:clamp(1.12rem,1.34vw,1.28rem);
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge){
--story-question-size:clamp(1.08rem,1.2vw,1.2rem) !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge{
--layout-challenge-question-body-size:clamp(1.1rem,1.24vw,1.22rem);
--layout-challenge-question-body-line-height:1.36;
}
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass .sc-body,
.sc-grid.sc-grid--solo .sc-main.screen.sc-main--match .sc-q-glass .sc-body,
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass .sc-body{
font-size:var(--story-question-size) !important;
line-height:1.38 !important;
max-width:min(100%,980px);
margin-left:auto;
margin-right:auto;
text-align:center !important;
text-wrap:balance;
}
.ch-q-body,
.sc-grid.sc-grid--challenge .ch-q-body,
.sc-grid.sc-grid--challenge .ch-q-glass .ch-q-body,
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-body{
font-size:var(--layout-challenge-question-body-size) !important;
line-height:var(--layout-challenge-question-body-line-height) !important;
max-width:min(100%,980px);
margin-left:auto;
margin-right:auto;
text-align:center !important;
text-wrap:balance;
}
/* Growth Highlights: show sub-skill strength as a percent, matching the main skill cards. */
.pi-subskill-meta{
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:6px;
flex:0 0 auto;
}
.pi-subskill-percent{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:42px;
padding:3px 8px;
border-radius:999px;
background:#EFF6FF;
border:1px solid rgba(37,99,235,.16);
color:#2563EB;
font-size:.68rem;
font-weight:950;
line-height:1;
}
/* Choice Quest: make the decision sequence noticeable right after the story is read. */
.choiceadventure-decision-title,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-decision-title{
display:grid !important;
grid-template-columns:minmax(120px,1fr) minmax(260px,auto);
align-items:center !important;
gap:6px !important;
min-height:0 !important;
line-height:1 !important;
margin:0 !important;
}
.choiceadventure-round-screen .choiceadventure-decision-block,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-decision-block{
gap:4px !important;
}
.choiceadventure-step-copy{
display:flex;
flex-direction:column;
min-width:0;
width:auto;
max-width:100%;
align-items:flex-start;
justify-content:center;
margin-left:0;
text-align:left;
grid-column:2;
grid-row:1;
justify-self:end;
align-self:center;
}
.choiceadventure-step-copy strong,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-step-copy strong{
color:#0F172A !important;
font-size:.92rem !important;
line-height:1.12 !important;
font-weight:950 !important;
}
.choiceadventure-step-copy small,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-step-copy small{
display:inline-flex;
align-items:center;
justify-content:flex-start;
max-width:100%;
padding:4px 10px;
border-radius:8px;
background:#ECFEFF;
border:1.5px solid rgba(6,182,212,.28);
color:#0E7490;
font-size:.82rem !important;
line-height:1.12 !important;
font-weight:950 !important;
text-transform:none;
letter-spacing:0;
text-align:left;
text-wrap:pretty;
box-shadow:0 4px 10px rgba(6,182,212,.08);
}
.choiceadventure-decision-title .choiceadventure-selected-chip,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-decision-title .choiceadventure-selected-chip{
display:flex;
flex:0 1 auto;
width:max-content;
max-width:100%;
min-width:0;
padding:3px 8px;
margin-left:0;
margin-right:0;
justify-content:center;
text-align:center;
font-size:.56rem;
line-height:1;
white-space:normal;
overflow-wrap:anywhere;
grid-column:1;
grid-row:1;
justify-self:start;
align-self:center;
}
/* Choice Quest question shell: keep the picked counter as a small top-left badge. */
.choiceadventure-round-screen .choiceadventure-action-card .choiceadventure-plan-progress,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-action-card .choiceadventure-plan-progress{
align-self:flex-start !important;
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:max-content !important;
max-width:100% !important;
margin:0 !important;
padding:5px 9px !important;
border-radius:999px !important;
border:1.5px solid #93C5FD !important;
background:linear-gradient(135deg,#EFF6FF 0%,#FFFFFF 100%) !important;
color:#1D4ED8 !important;
font-size:.72rem !important;
font-weight:950 !important;
line-height:1 !important;
letter-spacing:0 !important;
box-shadow:0 6px 14px rgba(96,165,250,0.12) !important;
white-space:nowrap !important;
}
.choiceadventure-round-screen .choiceadventure-action-card .choiceadventure-plan-progress strong,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-action-card .choiceadventure-plan-progress strong{
margin-left:4px !important;
font:inherit !important;
}
.choiceadventure-round-screen .ca-actions.ca-actions--single,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ca-actions.ca-actions--single{
grid-template-columns:1fr !important;
}
/* Choice Quest question shell: keep content compact while matching the choices shell height. */
.choiceadventure-round-screen .ch-info-card,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ch-info-card{
align-self:stretch !important;
}
.choiceadventure-round-screen .choiceadventure-story-card,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-card{
height:100% !important;
min-height:0 !important;
align-self:stretch !important;
align-content:stretch !important;
grid-template-rows:auto auto minmax(0,1fr) auto !important;
}
.choiceadventure-round-screen .choiceadventure-story-card:has(.local-question-watermark),
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-card:has(.local-question-watermark){
grid-template-rows:auto auto auto minmax(0,1fr) auto !important;
}
.choiceadventure-round-screen .choiceadventure-story-question,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-question{
align-self:stretch !important;
height:100% !important;
min-height:0 !important;
display:flex !important;
align-items:flex-start !important;
}
.choiceadventure-round-screen .choiceadventure-story-tipline,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-story-tipline{
align-self:end !important;
margin-top:auto !important;
}
/* Step Quest only: turn the sequence drop zones into story trays. */
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-card{
border-color:rgba(251,191,36,0.5) !important;
background:
linear-gradient(90deg,rgba(99,102,241,0.045) 1px,transparent 1px),
linear-gradient(0deg,rgba(99,102,241,0.04) 1px,transparent 1px),
linear-gradient(180deg,#FFFBEB 0%,#FFFFFF 100%) !important;
background-size:18px 18px,18px 18px,auto !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-help{
color:#334155 !important;
font-size:.82rem !important;
font-weight:850 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot{
display:grid !important;
grid-template-columns:auto minmax(0,1fr);
grid-template-rows:1fr;
column-gap:10px;
align-items:center !important;
padding:8px 12px !important;
border-style:solid !important;
border-width:2px !important;
border-radius:16px !important;
box-shadow:0 10px 18px rgba(59,130,246,0.08), inset 0 1px 0 rgba(255,255,255,0.88) !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot::before{
display:none !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-top{
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
min-width:104px;
gap:6px;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-body{
min-width:0;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-label{
color:#1E293B !important;
font-size:.72rem !important;
line-height:1.05 !important;
letter-spacing:0 !important;
text-transform:none !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-slot-placeholder{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:28px;
width:100%;
border-radius:10px;
border:1.5px dashed rgba(148,163,184,0.55);
background:rgba(255,255,255,0.58);
color:#64748B !important;
font-size:.78rem !important;
font-weight:850 !important;
}
.sc-grid.sc-grid--solo .sc-main--sequence .sc-sequence-picked-copy{
display:block;
width:100%;
min-height:30px;
padding:7px 10px !important;
border-radius:11px !important;
background:rgba(255,255,255,0.92) !important;
color:#0F172A !important;
font-size:.82rem !important;
font-weight:900 !important;
line-height:1.15 !important;
}
.ws-demo-steps{
display:none;
}
/* Mobile first-visit sign-in: Duolingo-style brand, mascot, headline, and two clear CTAs. */
@media (max-width:767px){
#welcome-splash:not(.gone){
align-items:flex-start !important;
justify-content:center !important;
padding:max(16px,env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)) !important;
background:#FFFFFF !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
#welcome-splash:not(.gone) .ws-shell{
display:flex !important;
flex-direction:column !important;
justify-content:flex-start !important;
width:min(390px,100%) !important;
max-width:100% !important;
min-height:calc(100dvh - 34px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
gap:0 !important;
margin:0 auto !important;
filter:none !important;
}
#welcome-splash:not(.gone) .ws-shell::before,
#welcome-splash:not(.gone) .ws-shell::after,
#welcome-splash:not(.gone) .ws-finance-layer{
display:none !important;
}
#welcome-splash:not(.gone) .ws-brand-panel,
#welcome-splash:not(.gone) .ws-auth-card{
width:100%;
max-width:100%;
min-width:0;
border:0 !important;
box-shadow:none !important;
animation:none !important;
}
#welcome-splash:not(.gone) .ws-copy-desktop{
display:none;
}
#welcome-splash:not(.gone) .ws-copy-mobile{
display:inline;
}
#welcome-splash:not(.gone) .ws-brand-panel{
order:1;
height:auto !important;
min-height:0 !important;
padding:8px 8px 12px !important;
align-items:center !important;
justify-content:flex-start !important;
gap:0 !important;
color:#0F2342 !important;
text-align:center !important;
background:transparent !important;
overflow:visible !important;
}
#welcome-splash:not(.gone) .ws-kicker{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:9px !important;
margin:0 auto clamp(28px,7dvh,66px) !important;
color:#0F3C78 !important;
font-size:1.18rem !important;
line-height:1 !important;
font-weight:950 !important;
letter-spacing:0 !important;
text-transform:none !important;
}
#welcome-splash:not(.gone) .ws-kicker::before{
content:"";
width:34px;
height:34px;
flex:0 0 34px;
background:url("assets/icons/app/leadio-favicon-192.png") center/contain no-repeat;
filter:drop-shadow(0 4px 8px rgba(15,60,120,.14));
}
#welcome-splash:not(.gone) .ws-mascot{
width:min(285px,78vw) !important;
margin:0 auto clamp(24px,5.8dvh,54px) !important;
}
#welcome-splash:not(.gone) .ws-title{
max-width:350px !important;
margin:0 auto 12px !important;
color:#334155 !important;
font-size:clamp(1.55rem,7.2vw,2.08rem) !important;
line-height:1.16 !important;
letter-spacing:0 !important;
text-wrap:balance !important;
}
#welcome-splash:not(.gone) .ws-sub{
max-width:330px !important;
margin:0 auto !important;
color:#475569 !important;
font-size:.84rem !important;
line-height:1.42 !important;
overflow-wrap:break-word !important;
}
#welcome-splash:not(.gone) .ws-mode-grid,
#welcome-splash:not(.gone) .ws-brand-note{
display:none !important;
}
#welcome-splash:not(.gone) .ws-demo-steps{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
width:min(330px,100%) !important;
margin:0 auto 12px !important;
}
#welcome-splash:not(.gone) .ws-demo-steps span{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
min-height:58px !important;
padding:8px 6px !important;
border:1.5px solid #BFE1FA !important;
border-radius:16px !important;
background:linear-gradient(180deg,#FFFFFF 0%,#ECF7FF 100%) !important;
box-shadow:0 10px 22px rgba(14,116,184,.12),inset 0 1px 0 rgba(255,255,255,.92) !important;
}
#welcome-splash:not(.gone) .ws-demo-steps b{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:26px !important;
height:26px !important;
margin-bottom:5px !important;
border-radius:50% !important;
background:linear-gradient(180deg,#7DD3FC 0%,#0EA5E9 100%) !important;
color:#FFFFFF !important;
font-size:.72rem !important;
font-weight:950 !important;
line-height:1 !important;
box-shadow:0 7px 13px rgba(14,165,233,.24) !important;
}
#welcome-splash:not(.gone) .ws-demo-steps em{
color:#153B63 !important;
font-size:.66rem !important;
font-style:normal !important;
font-weight:950 !important;
line-height:1.08 !important;
}
#welcome-splash:not(.gone) .ws-age-pill{
display:none;
}
#welcome-splash:not(.gone) .ws-auth-card{
order:2;
height:auto !important;
min-height:0 !important;
margin-top:clamp(16px,3.2dvh,28px) !important;
padding:0 16px 6px !important;
gap:0 !important;
background:transparent !important;
overflow:visible !important;
}
#welcome-splash:not(.gone) .ws-auth-top{
display:none !important;
}
#welcome-splash:not(.gone) .ws-guest-adventure-btn{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:56px !important;
margin:0 0 14px !important;
padding:0 !important;
border:0 !important;
border-radius:14px !important;
background:linear-gradient(180deg,#178BFF 0%,#0068E6 100%) !important;
box-shadow:0 4px 0 #0052B8,0 14px 28px rgba(0,104,230,.22) !important;
color:#FFFFFF !important;
text-align:center !important;
animation:none !important;
overflow:visible !important;
}
#welcome-splash:not(.gone) .ws-guest-adventure-btn::before,
#welcome-splash:not(.gone) .ws-guest-ribbon,
#welcome-splash:not(.gone) .ws-guest-icon,
#welcome-splash:not(.gone) .ws-guest-copy,
#welcome-splash:not(.gone) .ws-guest-instant,
#welcome-splash:not(.gone) .ws-guest-note{
display:none !important;
}
#welcome-splash:not(.gone) .ws-guest-action{
width:100% !important;
min-height:56px !important;
padding:0 14px !important;
border-radius:14px !important;
background:transparent !important;
box-shadow:none !important;
color:#FFFFFF !important;
font-size:.78rem !important;
font-weight:950 !important;
line-height:1 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
#welcome-splash:not(.gone) .ws-account-overlay-btn{
min-height:34px !important;
margin:2px auto 0 !important;
border:0 !important;
border-radius:999px !important;
background:transparent !important;
color:#0EA5E9 !important;
box-shadow:none !important;
font-size:.7rem !important;
font-weight:950 !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
}
#welcome-splash:not(.gone) .ws-guest-points{
margin:14px auto 0 !important;
gap:7px !important;
}
#welcome-splash:not(.gone) .ws-guest-points span{
min-height:auto !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
color:#64748B !important;
font-size:.62rem !important;
font-weight:850 !important;
line-height:1.15 !important;
}
}
/* Phone landscape home: keep guest progress compact and remove the device note. */
@media (orientation:landscape) and (max-height:540px){
body:has(#main .home-dashboard) .device-optimized-note--app{
display:none !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #main.main-fit-view .hero-wrap:has(.guest-hero-note) .hero-sub{
max-width:calc(100% - var(--layout-home-guest-note-reserve-phone-landscape)) !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #main.main-fit-view .guest-hero-note{
top:8px !important;
right:8px !important;
left:auto !important;
bottom:auto !important;
width:min(var(--layout-home-guest-note-width-phone-landscape),calc(100% - 158px)) !important;
max-width:min(var(--layout-home-guest-note-width-phone-landscape),calc(100% - 158px)) !important;
gap:var(--layout-home-guest-note-gap) !important;
padding:var(--layout-home-guest-note-padding-compact) !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #main.main-fit-view .guest-hero-note strong{
font-size:.54rem !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #main.main-fit-view .guest-hero-note-copy span{
font-size:.52rem !important;
line-height:1.16 !important;
}
body.route-fit-view:has(#main.main-fit-view .home-dashboard) #main.main-fit-view .guest-hero-signup-cta{
min-width:74px !important;
min-height:30px !important;
padding:6px 7px !important;
font-size:.54rem !important;
}
}
/* Phone portrait polish: keep Story Play meta pills and locked Growth nav readable. */
@media (max-width:540px) and (orientation:portrait){
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass{
display:block !important;
text-align:center !important;
padding:10px 9px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass .sc-name{
width:100% !important;
margin:0 auto 7px !important;
padding:0 2px !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass > .sc-diff{
position:static !important;
inset:auto !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
max-width:calc(50% - 6px) !important;
min-height:23px !important;
margin:0 3px 8px !important;
padding:4px 8px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
vertical-align:top !important;
line-height:1 !important;
pointer-events:none !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass > .sc-mode-pill{
left:auto !important;
right:auto !important;
max-width:calc(56% - 6px) !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo:not(.sc-grid--challenge) .sc-q-glass .sc-body{
clear:both !important;
}
#nav #nb-insights.guest-growth-locked{
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
grid-template-rows:auto auto !important;
align-items:center !important;
justify-content:center !important;
column-gap:4px !important;
row-gap:2px !important;
min-height:52px !important;
padding:5px 6px !important;
}
#nav #nb-insights.guest-growth-locked .nav-btn-ico{
grid-column:1 !important;
grid-row:1 / span 2 !important;
width:18px !important;
height:18px !important;
flex-basis:18px !important;
}
#nav #nb-insights.guest-growth-locked .nav-btn-text{
grid-column:2 !important;
grid-row:1 !important;
display:block !important;
width:100% !important;
font-size:.54rem !important;
line-height:1.02 !important;
text-align:center !important;
white-space:normal !important;
overflow:visible !important;
}
#nav #nb-insights.guest-growth-locked::after{
grid-column:2 !important;
grid-row:2 !important;
justify-self:center !important;
margin:0 !important;
padding:2px 5px !important;
font-size:.42rem !important;
letter-spacing:.04em !important;
}
}
/* Canonical portrait play scroll.
One owner only: body/app are fixed and #main scrolls. Keep this after the
older global responsive shell rules so Story, Challenge, and Choice behave
the same way on touch devices. */
@media (max-width:1199px) and (orientation:portrait){
html:has(body.route-play-view),
html:has(body.route-play-view #main.main-play-view),
html:has(body.route-play-view #main.main-play-view .screen),
html:has(body.route-play-view #main.main-play-view .sc-grid),
html:has(body.route-play-view #main.main-play-view .sc-main--sequence),
html:has(body.route-play-view #main.main-play-view .sc-main--match),
html:has(body.route-play-view #main.main-play-view .sc-grid--challenge),
html:has(body.route-play-view #main.main-play-view .choiceadventure-round-screen),
html:has(body.route-play-view #main.main-play-view .choiceadventure-result-screen),
body.route-play-view,
body.route-play-view:has(#main.main-play-view),
body.route-play-view:has(#main.main-play-view .screen),
body.route-play-view:has(#main.main-play-view .sc-grid),
body.route-play-view:has(#main.main-play-view .story-lobby-horiz),
body.route-play-view:has(#main.main-play-view .challenge-lobby-horiz),
body.route-play-view:has(#main.main-play-view .choiceadventure-lobby-screen),
body.route-play-view:has(#main.main-play-view .choiceadventure-round-screen),
body.route-play-view:has(#main.main-play-view .choiceadventure-result-screen),
body.route-play-view:has(#main.main-play-view .play-result),
body.route-play-view:has(#main.main-play-view .challenge-round-result),
body.route-play-view:has(#main.main-play-view .challenge-finish-card),
body.route-play-view #app,
body.route-play-view:has(#main.main-play-view) #app,
body.route-play-view:has(#main.main-play-view .screen) #app,
body.route-play-view:has(#main.main-play-view .sc-grid) #app,
body.route-play-view:has(#main.main-play-view .story-lobby-horiz) #app,
body.route-play-view:has(#main.main-play-view .challenge-lobby-horiz) #app,
body.route-play-view:has(#main.main-play-view .choiceadventure-lobby-screen) #app,
body.route-play-view:has(#main.main-play-view .choiceadventure-round-screen) #app,
body.route-play-view:has(#main.main-play-view .choiceadventure-result-screen) #app,
body.route-play-view:has(#main.main-play-view .play-result) #app,
body.route-play-view:has(#main.main-play-view .challenge-round-result) #app,
body.route-play-view:has(#main.main-play-view .challenge-finish-card) #app{
height:100svh !important;
height:100dvh !important;
min-height:100svh !important;
min-height:100dvh !important;
max-height:100svh !important;
max-height:100dvh !important;
overflow:hidden !important;
overscroll-behavior:none !important;
}
body.route-play-view #app #main.main-play-view,
body.route-play-view #app #main.main-play-view:has(.screen),
body.route-play-view #app #main.main-play-view:has(.sc-grid),
body.route-play-view #app #main.main-play-view:has(.sc-main--sequence),
body.route-play-view #app #main.main-play-view:has(.sc-main--match),
body.route-play-view #app #main.main-play-view:has(.sc-grid--challenge),
body.route-play-view #app #main.main-play-view:has(.story-lobby-horiz),
body.route-play-view #app #main.main-play-view:has(.challenge-lobby-horiz),
body.route-play-view #app #main.main-play-view:has(.choiceadventure-lobby-screen),
body.route-play-view #app #main.main-play-view:has(.choiceadventure-round-screen),
body.route-play-view #app #main.main-play-view:has(.choiceadventure-result-screen),
body.route-play-view #app #main.main-play-view:has(.play-result),
body.route-play-view #app #main.main-play-view:has(.challenge-round-result),
body.route-play-view #app #main.main-play-view:has(.challenge-finish-card),
body.route-play-view:has(#app #main.main-play-view .screen) #app #main.main-play-view,
body.route-play-view:has(#app #main.main-play-view .sc-grid) #app #main.main-play-view,
body.route-play-view:has(#app #main.main-play-view .sc-main--sequence) #app #main.main-play-view,
body.route-play-view:has(#app #main.main-play-view .sc-main--match) #app #main.main-play-view,
body.route-play-view:has(#app #main.main-play-view .sc-grid--challenge) #app #main.main-play-view,
body.route-play-view:has(#app #main.main-play-view .choiceadventure-round-screen) #app #main.main-play-view,
body.route-play-view:has(#app #main.main-play-view .choiceadventure-result-screen) #app #main.main-play-view{
flex:1 1 auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior-y:contain !important;
-webkit-overflow-scrolling:touch !important;
touch-action:pan-y !important;
padding-bottom:calc(var(--layout-route-scroll-padding) + env(safe-area-inset-bottom)) !important;
}
body.route-play-view #app #main.main-play-view > .screen,
body.route-play-view #app #main.main-play-view :is(
.sc-grid,
.sc-main,
.sc-main--compact,
.sc-main--sequence,
.sc-main--match,
.sc-q-glass,
.choices,
.sc-sequence-card,
.sc-sequence-playfield,
.sc-match-playfield,
.sc-grid--challenge,
.ch-fullscreen,
.ch-question-card,
.ch-q-glass,
.ch-choices,
.choiceadventure-lobby-screen,
.choiceadventure-round-screen,
.choiceadventure-result-screen,
.choiceadventure-cards,
.choiceadventure-story-card,
.choiceadventure-story-question,
.choiceadventure-action-card,
.choiceadventure-decision-block,
.choiceadventure-choice-stack,
.ch-info-card,
.ch-action-card
){
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
body.route-play-view #app #main.main-play-view :is(
.sc-grid,
.sc-main,
.sc-main--compact,
.sc-main--sequence,
.sc-main--match,
.sc-q-glass,
.choices,
.sc-sequence-card,
.sc-sequence-playfield,
.sc-match-playfield,
.sc-grid--challenge,
.ch-fullscreen,
.ch-question-card,
.ch-q-glass,
.ch-choices,
.choiceadventure-lobby-screen,
.choiceadventure-round-screen,
.choiceadventure-result-screen,
.choiceadventure-cards,
.choiceadventure-story-card,
.choiceadventure-story-question,
.choiceadventure-action-card,
.choiceadventure-decision-block,
.choiceadventure-choice-stack
){
touch-action:pan-y !important;
}
body.route-play-view #app #main.main-play-view :is(
button,
.cho-btn,
.go-btn,
.big-play,
.ch-back-btn,
.ch-bottom-home-btn,
.choiceadventure-choice-btn
){
touch-action:manipulation !important;
}
body.route-play-view #main.main-play-view button,
body.route-play-view #main.main-play-view .cho-btn,
body.route-play-view #main.main-play-view .cho-btn--sequence-pick,
body.route-play-view #main.main-play-view .cho-btn--match-option,
body.route-play-view #main.main-play-view .choiceadventure-choice-btn,
body.route-play-view #main.main-play-view .sc-match-target{
touch-action:manipulation !important;
-webkit-user-select:none !important;
user-select:none !important;
}
body.route-play-view #main.main-play-view .cho-btn--match-option{
cursor:pointer !important;
will-change:auto !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo .sc-main--sequence,
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo .sc-main.screen.sc-main--match,
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo .sc-sequence-playfield,
body.route-play-view #main.main-play-view .sc-grid.sc-grid--solo .sc-match-playfield,
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-fullscreen{
overflow:visible !important;
touch-action:pan-y !important;
}
body.route-play-view #main.main-play-view .screen :where([class*="-copy"],[class*="-desc"],[class*="-sub"],[class*="-meta"],.cho-copy,.sc-body,.ch-q-body,.choiceadventure-story-text,.choiceadventure-story-question,.choiceadventure-story-tipline){
-webkit-box-orient:initial !important;
-webkit-line-clamp:unset !important;
max-height:none !important;
overflow:visible !important;
text-overflow:clip !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
}
@media (max-width:767px) and (orientation:portrait){
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-glass .ch-q-diff{
position:static !important;
order:-1 !important;
align-self:flex-start !important;
max-width:100% !important;
margin:0 0 8px 0 !important;
white-space:normal !important;
pointer-events:none !important;
}
body.route-play-view #main.main-play-view .sc-grid.sc-grid--challenge .ch-q-title{
margin-top:0 !important;
}
}
/* Choice Quest phone portrait: keep step labels inside the card and make answers readable. */
@media (max-width:767px) and (orientation:portrait){
body.route-play-view #main.main-play-view .choiceadventure-round-screen .ch-action-card,
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-action-card{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
overflow:visible !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-decision-block{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
padding:9px !important;
gap:8px !important;
overflow:visible !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-decision-title{
display:flex !important;
grid-template-columns:none !important;
flex-wrap:wrap !important;
align-items:flex-start !important;
justify-content:flex-start !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
gap:5px !important;
overflow:visible !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-step-copy{
grid-column:auto !important;
grid-row:auto !important;
justify-self:start !important;
align-self:flex-start !important;
width:auto !important;
max-width:100% !important;
min-width:0 !important;
margin:0 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-step-copy small{
max-width:100% !important;
white-space:normal !important;
overflow-wrap:break-word !important;
word-break:normal !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-decision-title .choiceadventure-selected-chip{
grid-column:auto !important;
grid-row:auto !important;
justify-self:start !important;
max-width:100% !important;
width:auto !important;
white-space:normal !important;
overflow-wrap:break-word !important;
word-break:normal !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-choice-stack{
grid-template-columns:1fr !important;
gap:8px !important;
width:100% !important;
min-width:0 !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-choice-btn{
display:grid !important;
grid-template-columns:28px minmax(0,1fr) !important;
align-items:center !important;
min-height:52px !important;
padding:10px 11px !important;
gap:10px !important;
text-align:left !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-choice-num{
width:28px !important;
height:28px !important;
flex:0 0 28px !important;
border-radius:10px !important;
font-size:.72rem !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-choice-copy{
min-width:0 !important;
max-width:100% !important;
}
body.route-play-view #main.main-play-view .choiceadventure-round-screen .choiceadventure-choice-copy strong{
font-size:.82rem !important;
line-height:1.18 !important;
white-space:normal !important;
overflow-wrap:break-word !important;
word-break:normal !important;
hyphens:none !important;
}
}
/* Mobile completion surfaces: keep result/home/prompt screens scrollable after
a play mode finishes, while live question boards keep their own controls. */
@media (max-width:900px), (max-height:540px){
body.route-fit-view #main.main-fit-view:has(.home-dashboard),
body.route-play-view #main.main-play-view:has(.play-result),
body.route-play-view #main.main-play-view:has(.challenge-round-result),
body.route-play-view #main.main-play-view:has(.challenge-finish-card),
body.route-play-view #main.main-play-view:has(.choiceadventure-result-screen),
body.route-play-view #main.main-play-view:has(.story-lobby-horiz),
body.route-play-view #main.main-play-view:has(.challenge-lobby-horiz),
body.route-play-view #main.main-play-view:has(.choiceadventure-lobby-screen){
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior-y:contain !important;
touch-action:pan-y !important;
}
.day-wrap-ov,
.guest-signup-ov,
.guest-growth-lock-ov{
align-items:flex-start !important;
justify-content:center !important;
overflow-x:hidden !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
padding:10px max(10px,env(safe-area-inset-left)) calc(16px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-right)) !important;
}
.day-wrap-box,
.guest-signup-box,
.guest-growth-lock-box{
max-height:none !important;
margin:0 auto !important;
}
}
/* Mobile account overlay: keep sign-in secondary while avoiding iOS input zoom. */
@media (max-width:767px){
.ws-auth-overlay{
align-items:flex-start !important;
justify-content:center !important;
padding:0 !important;
background:#102026 !important;
}
.ws-auth-overlay .ws-email-auth-panel{
width:min(390px,100%) !important;
min-height:100dvh !important;
max-height:none !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior-y:contain !important;
padding:72px 32px calc(22px + env(safe-area-inset-bottom)) !important;
border-radius:0 !important;
}
.ws-auth-overlay .ws-email-auth-panel:has(#ws-panel-signup:not([style*="display:none"])){
padding-top:54px !important;
padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
}
.ws-auth-overlay .ws-email-auth-panel:has(#ws-panel-signup:not([style*="display:none"])) .ws-panel-head{
margin-bottom:18px !important;
}
.ws-auth-overlay .ws-email-auth-panel:has(#ws-panel-signup:not([style*="display:none"])) .ws-auth-switch,
.ws-auth-overlay .ws-email-auth-panel:has(#ws-panel-signup:not([style*="display:none"])) .ws-auth-footer{
margin-top:16px !important;
}
.ws-auth-overlay-close{
top:24px !important;
right:24px !important;
width:32px !important;
height:32px !important;
}
#welcome-splash:not(.gone) input,
#welcome-splash:not(.gone) textarea,
#welcome-splash:not(.gone) select{
font-size:16px !important;
line-height:1.2 !important;
transform:none !important;
}
}
/* Guest CTAs: Save Progress and Growth Highlights use distinct action colors. */
.guest-hero-signup-cta,
.guest-demo-journey-save{
border-color:rgba(16,185,129,0.4) !important;
background:linear-gradient(135deg,#059669,#10B981) !important;
box-shadow:0 10px 22px rgba(5,150,105,.24),0 0 20px rgba(16,185,129,.25) !important;
}
.guest-hero-signup-cta:hover,
.guest-demo-journey-save:hover{
box-shadow:0 14px 28px rgba(5,150,105,.32),0 0 34px rgba(16,185,129,.38) !important;
}
.guest-hero-signup-cta:focus-visible,
.guest-demo-journey-save:focus-visible{
outline:3px solid rgba(16,185,129,.3) !important;
outline-offset:2px !important;
}
.guest-demo-journey-growth.is-unlocked{
border-color:rgba(251,191,36,0.72) !important;
background:linear-gradient(135deg,#F59E0B,#F97316) !important;
color:#fff !important;
box-shadow:0 10px 24px rgba(249,115,22,.28),0 0 24px rgba(251,191,36,.32) !important;
}
/* Facebook/Instagram in-app browsers can open as a very short sheet first. */
@media (max-width:767px) and (max-height:420px){
#welcome-splash:not(.gone){
padding:8px 10px calc(10px + env(safe-area-inset-bottom)) !important;
}
#welcome-splash:not(.gone) .ws-shell{
min-height:0 !important;
gap:0 !important;
}
#welcome-splash:not(.gone) .ws-brand-panel{
padding:4px 8px 8px !important;
}
#welcome-splash:not(.gone) .ws-kicker{
margin-bottom:6px !important;
font-size:1rem !important;
}
#welcome-splash:not(.gone) .ws-kicker::before{
width:28px !important;
height:28px !important;
flex-basis:28px !important;
}
#welcome-splash:not(.gone) .ws-mascot{
width:min(118px,38vw) !important;
margin-bottom:8px !important;
}
#welcome-splash:not(.gone) .ws-title{
max-width:310px !important;
margin-bottom:0 !important;
font-size:1.05rem !important;
line-height:1.08 !important;
}
#welcome-splash:not(.gone) .ws-sub{
display:none !important;
}
#welcome-splash:not(.gone) .ws-demo-steps{
display:none !important;
}
#welcome-splash:not(.gone) .ws-auth-card{
margin-top:4px !important;
padding:4px 12px 4px !important;
}
#welcome-splash:not(.gone) .ws-guest-adventure-btn,
#welcome-splash:not(.gone) .ws-guest-action{
min-height:42px !important;
border-radius:12px !important;
}
#welcome-splash:not(.gone) .ws-guest-action{
font-size:.68rem !important;
}
#welcome-splash:not(.gone) .ws-account-overlay-btn{
min-height:34px !important;
border-radius:12px !important;
font-size:.62rem !important;
}
#welcome-splash:not(.gone) .ws-guest-points{
display:none !important;
}
}
/* Mobile scroll recovery: route chrome is fixed, so the active content owner
must always remain a native scroll surface after play/page transitions. */
@media (max-width:900px), (max-height:540px){
body.route-scroll-view #main.main-scroll-view,
body.route-play-view #main.main-play-view:has(.choiceadventure-round-screen),
body.route-play-view #main.main-play-view:has(.choiceadventure-lobby-screen),
body.route-play-view #main.main-play-view:has(.choiceadventure-result-screen),
body.route-play-view #main.main-play-view:has(.story-lobby-horiz),
body.route-play-view #main.main-play-view:has(.challenge-lobby-horiz),
body.route-play-view #main.main-play-view:has(.play-result),
body.route-play-view #main.main-play-view:has(.challenge-round-result),
body.route-play-view #main.main-play-view:has(.challenge-finish-card){
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior-y:contain !important;
-webkit-overflow-scrolling:touch !important;
touch-action:pan-y !important;
}
body.route-fit-view #main.main-fit-view:has(.leadio-mobile-home) .lmh-feed{
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior-y:contain !important;
-webkit-overflow-scrolling:touch !important;
touch-action:pan-y !important;
}
body.route-play-view #main.main-play-view :is(
.choiceadventure-round-screen,
.choiceadventure-lobby-screen,
.choiceadventure-result-screen,
.choiceadventure-cards,
.choiceadventure-story-card,
.choiceadventure-action-card,
.choiceadventure-decision-block,
.choiceadventure-choice-stack,
.story-lobby-horiz,
.challenge-lobby-horiz,
.play-result,
.challenge-round-result,
.challenge-finish-card
){
touch-action:pan-y !important;
}
}
/* Mobile gameplay chrome: use the same dark-blue header tone as Home, while
keeping one compact Home escape and the play utility controls available. */
@media (max-width:767px) and (orientation:portrait){
body.route-play-view #app{
width:100% !important;
max-width:430px !important;
padding:0 !important;
gap:0 !important;
background:#F8FBFD !important;
}
body.route-play-view #nav{
display:flex !important;
grid-template-columns:none !important;
flex:0 0 auto !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:space-between !important;
min-height:52px !important;
padding:10px 15px 8px !important;
gap:7px !important;
background:#0D547D !important;
background-image:none !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
body.route-play-view #nav .nav-left{
display:contents !important;
}
body.route-play-view #nav .nav-logo{
order:1 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:1 1 auto !important;
min-width:0 !important;
max-width:none !important;
gap:8px !important;
color:#FFFFFF !important;
font-size:.9rem !important;
font-weight:950 !important;
letter-spacing:0 !important;
text-shadow:0 1px 1px rgba(2,20,38,.2) !important;
}
body.route-play-view #nav .nav-logo-text{
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.route-play-view #nav .nav-logo::before{
width:28px !important;
height:28px !important;
flex-basis:28px !important;
margin-right:0 !important;
border-radius:50% !important;
background:url("assets/icons/app/leadio-favicon-192.png") center/contain no-repeat !important;
filter:none !important;
box-shadow:0 0 0 2px rgba(255,255,255,.16),0 8px 18px rgba(7,47,84,.24) !important;
}
body.route-play-view #nav #nb-rewards,
body.route-play-view #nav #nb-insights{
display:none !important;
}
body.route-play-view #nav #nb-play{
order:2 !important;
grid-column:auto !important;
grid-row:auto !important;
width:34px !important;
height:34px !important;
min-width:34px !important;
min-height:34px !important;
flex:0 0 34px !important;
padding:0 !important;
gap:0 !important;
border-radius:50% !important;
border:1px solid rgba(219,234,254,.32) !important;
background:rgba(255,255,255,.14) !important;
box-shadow:none !important;
}
body.route-play-view #nav #nb-play .nav-btn-text{
display:none !important;
}
body.route-play-view #nav #nb-play .nav-btn-ico{
width:18px !important;
height:18px !important;
flex-basis:18px !important;
font-size:.92rem !important;
}
body.route-play-view #nav .nav-right{
order:3 !important;
grid-column:auto !important;
grid-row:auto !important;
justify-self:auto !important;
display:flex !important;
align-items:center !important;
width:auto !important;
min-width:0 !important;
flex:0 0 auto !important;
margin-left:0 !important;
gap:7px !important;
}
body.route-play-view #nav #nav-trial-slot{
display:none !important;
}
body.route-play-view #nav .sound-btn,
body.route-play-view #nav .tts-btn{
width:34px !important;
height:34px !important;
min-width:34px !important;
min-height:34px !important;
padding:0 !important;
border-radius:50% !important;
border:1px solid rgba(219,234,254,.32) !important;
background:rgba(255,255,255,.14) !important;
box-shadow:none !important;
color:#FFFFFF !important;
font-size:.95rem !important;
}
body.route-play-view #nav .nav-profile-wrapper{
width:34px !important;
height:34px !important;
}
body.route-play-view #nav .nav-profile{
width:34px !important;
height:34px !important;
min-width:34px !important;
min-height:34px !important;
padding:1px !important;
gap:0 !important;
border:2px solid #8EC5FF !important;
border-radius:50% !important;
background:#FFFFFF !important;
box-shadow:0 8px 18px rgba(7,47,84,.24) !important;
}
body.route-play-view #nav .nav-av{
width:100% !important;
height:100% !important;
border:0 !important;
background:transparent !important;
}
body.route-play-view #nav .nav-profile-info,
body.route-play-view #nav .nav-dropdown-icon{
display:none !important;
}
body.route-play-view #nav .profile-dropdown{
top:calc(100% + 8px) !important;
}
body.route-play-view #main.main-play-view{
padding-top:10px !important;
}
}
/* Mobile app-page chrome: Profile, Rewards, and Growth keep the same Leadio
Home top-bar tone instead of falling back to the older multi-row route nav. */
@media (max-width:767px) and (orientation:portrait){
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #app{
width:100% !important;
max-width:430px !important;
padding:0 !important;
gap:0 !important;
background:#F8FBFD !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav{
display:flex !important;
grid-template-columns:none !important;
flex:0 0 auto !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:space-between !important;
min-height:52px !important;
padding:10px 15px 8px !important;
gap:7px !important;
background:#0D547D !important;
background-image:none !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .nav-left{
display:contents !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .nav-logo{
order:1 !important;
grid-column:auto !important;
grid-row:auto !important;
flex:1 1 auto !important;
min-width:0 !important;
max-width:none !important;
gap:8px !important;
color:#FFFFFF !important;
font-size:.9rem !important;
font-weight:950 !important;
letter-spacing:0 !important;
text-shadow:0 1px 1px rgba(2,20,38,.2) !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .nav-logo-text{
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .nav-logo::before{
width:28px !important;
height:28px !important;
flex-basis:28px !important;
margin-right:0 !important;
border-radius:50% !important;
background:url("assets/icons/app/leadio-favicon-192.png") center/contain no-repeat !important;
filter:none !important;
box-shadow:0 0 0 2px rgba(255,255,255,.16),0 8px 18px rgba(7,47,84,.24) !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav #nb-rewards,
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav #nb-insights{
display:none !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav #nb-play{
order:2 !important;
grid-column:auto !important;
grid-row:auto !important;
width:34px !important;
height:34px !important;
min-width:34px !important;
min-height:34px !important;
flex:0 0 34px !important;
padding:0 !important;
gap:0 !important;
border-radius:50% !important;
border:1px solid rgba(219,234,254,.32) !important;
background:rgba(255,255,255,.14) !important;
box-shadow:none !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav #nb-play .nav-btn-text{
display:none !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav #nb-play .nav-btn-ico{
width:18px !important;
height:18px !important;
flex-basis:18px !important;
font-size:.92rem !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .nav-right{
order:3 !important;
grid-column:auto !important;
grid-row:auto !important;
justify-self:auto !important;
display:flex !important;
align-items:center !important;
width:auto !important;
min-width:0 !important;
flex:0 0 auto !important;
margin-left:0 !important;
gap:7px !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav #nav-trial-slot,
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .sound-btn,
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .tts-btn{
display:none !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .nav-profile-wrapper{
width:34px !important;
height:34px !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .nav-profile{
width:34px !important;
height:34px !important;
min-width:34px !important;
min-height:34px !important;
padding:1px !important;
gap:0 !important;
border:2px solid #8EC5FF !important;
border-radius:50% !important;
background:#FFFFFF !important;
box-shadow:0 8px 18px rgba(7,47,84,.24) !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .nav-av{
width:100% !important;
height:100% !important;
border:0 !important;
background:transparent !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .nav-profile-info,
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .nav-dropdown-icon{
display:none !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #nav .profile-dropdown{
top:calc(100% + 8px) !important;
}
body.route-scroll-view.route-home-nav:has(#main.main-scroll-view :is(.profile-screen,.rewards-screen,.rank-ladder-screen)) #main.main-scroll-view{
box-sizing:border-box !important;
padding-top:10px !important;
padding-left:14px !important;
padding-right:14px !important;
}
}
/* Mobile Choice Quest gameplay starts directly at the story card, matching
the cleaner Story Play and Boss Challenge mobile rhythm. */
@media (max-width:767px) and (orientation:portrait){
body.route-play-view #main.main-play-view .choiceadventure-round-screen > .ca-lobby-banner{
display:none !important;
}
body.route-play-view #main.main-play-view:has(.choiceadventure-round-screen){
padding-top:8px !important;
}
}
/* Mobile account menu: tapping the avatar should reveal destinations first,
so Profile is a choice rather than an extra page hop. */
.mobile-account-menu-ov{
position:fixed;
inset:0;
z-index:100050;
display:flex;
align-items:flex-end;
justify-content:center;
padding:18px 14px calc(10px + env(safe-area-inset-bottom));
box-sizing:border-box;
}
.mobile-account-menu-backdrop{
position:absolute;
inset:0;
border:0;
background:rgba(4,25,42,.46);
backdrop-filter:blur(7px);
-webkit-backdrop-filter:blur(7px);
}
.mobile-account-menu-sheet{
position:relative;
width:min(100%,430px);
max-height:min(78dvh,560px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
border-radius:26px 26px 20px 20px;
border:1.5px solid rgba(219,234,254,.72);
background:linear-gradient(180deg,#FFFFFF 0%,#F3FAFF 100%);
box-shadow:0 26px 64px rgba(6,35,59,.30);
padding:9px 13px 13px;
box-sizing:border-box;
}
.mobile-account-menu-handle{
width:44px;
height:5px;
border-radius:999px;
margin:0 auto 10px;
background:#B7D5EA;
}
.mobile-account-menu-head{
display:flex;
align-items:center;
gap:12px;
padding:6px 7px 11px;
}
.mobile-account-menu-avatar{
width:44px;
height:44px;
flex:0 0 44px;
display:grid;
place-items:center;
overflow:hidden;
border-radius:50%;
background:#FFFFFF;
border:3px solid #8EC5FF;
box-shadow:0 9px 20px rgba(7,84,125,.16);
}
.mobile-account-menu-avatar svg,
.mobile-account-menu-avatar img{
width:100%;
height:100%;
object-fit:cover;
}
.mobile-account-menu-title{
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}
.mobile-account-menu-title strong{
color:#0D3F66;
font-size:1.05rem;
font-weight:1000;
line-height:1.05;
}
.mobile-account-menu-title em{
color:#6B8295;
font-size:.74rem;
font-style:normal;
font-weight:850;
}
.mobile-account-menu-list{
display:grid;
gap:7px;
}
.mobile-account-menu-item{
width:100%;
min-height:54px;
display:grid;
grid-template-columns:40px minmax(0,1fr) auto;
align-items:center;
gap:11px;
padding:9px 11px;
border-radius:18px;
border:1.5px solid #CFE5F8;
background:linear-gradient(180deg,#FFFFFF 0%,#F8FCFF 100%);
color:#0D3F66;
font-family:inherit;
text-align:left;
box-shadow:0 9px 18px rgba(14,84,125,.08);
cursor:pointer;
}
.mobile-account-menu-item.is-primary{
min-height:60px;
border-color:#86EFAC;
background:linear-gradient(180deg,#E9FFF2 0%,#FFFFFF 100%);
box-shadow:0 10px 22px rgba(16,185,129,.14);
}
.mobile-account-menu-item.is-danger{
border-color:#FECACA;
background:linear-gradient(180deg,#FFF7F7 0%,#FFFFFF 100%);
}
.mobile-account-menu-icon{
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:14px;
background:#EAF6FF;
}
.mobile-account-menu-item.is-primary .mobile-account-menu-icon{
background:#DCFCE7;
}
.mobile-account-menu-item.is-danger .mobile-account-menu-icon{
background:#FFE4E6;
}
.mobile-account-menu-icon-img{
width:30px;
height:30px;
object-fit:contain;
display:block;
}
.mobile-account-menu-copy{
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}
.mobile-account-menu-copy strong{
font-size:.9rem;
line-height:1.08;
font-weight:1000;
color:#0D3F66;
}
.mobile-account-menu-copy em{
font-style:normal;
font-size:.68rem;
line-height:1.2;
font-weight:800;
color:#64788A;
}
.mobile-account-menu-badge{
justify-self:end;
padding:4px 7px;
border-radius:999px;
background:#FFF7ED;
border:1px solid #FED7AA;
color:#9A3412;
font-size:.56rem;
font-weight:1000;
letter-spacing:.04em;
text-transform:uppercase;
white-space:nowrap;
}
body.mobile-account-menu-open{
overflow:hidden !important;
}
/* Cross-mode answer tone system: A/B/C use distinct cues across Story Play,
Boss Challenge, and Choice Quest without changing result feedback states. */
.choices:not(.choices--sequence):not(.choices--match):not(.choices--chips) > .cho-btn:nth-child(1),
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match):not(.choices--chips) > .cho-btn:nth-child(1),
.sc-grid.sc-grid--challenge .ch-choices > .cho-btn:nth-child(1),
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(1),
.choiceadventure-round-screen .choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(1){
border-color:#7DD3FC;
background:linear-gradient(180deg,#F0F9FF 0%,#FFFFFF 100%);
box-shadow:0 10px 20px rgba(14,165,233,0.11);
}
.choices:not(.choices--sequence):not(.choices--match):not(.choices--chips) > .cho-btn:nth-child(2),
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match):not(.choices--chips) > .cho-btn:nth-child(2),
.sc-grid.sc-grid--challenge .ch-choices > .cho-btn:nth-child(2),
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(2),
.choiceadventure-round-screen .choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(2){
border-color:#86EFAC;
background:linear-gradient(180deg,#F0FDF4 0%,#FFFFFF 100%);
box-shadow:0 10px 20px rgba(34,197,94,0.10);
}
.choices:not(.choices--sequence):not(.choices--match):not(.choices--chips) > .cho-btn:nth-child(3),
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match):not(.choices--chips) > .cho-btn:nth-child(3),
.sc-grid.sc-grid--challenge .ch-choices > .cho-btn:nth-child(3),
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(3),
.choiceadventure-round-screen .choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(3){
border-color:#FDBA74;
background:linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 100%);
box-shadow:0 10px 20px rgba(249,115,22,0.10);
}
.choices:not(.choices--sequence):not(.choices--match):not(.choices--chips) > .cho-btn:nth-child(1):hover,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match):not(.choices--chips) > .cho-btn:nth-child(1):hover,
.sc-grid.sc-grid--challenge .ch-choices > .cho-btn:nth-child(1):hover,
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(1):hover,
.choiceadventure-round-screen .choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(1):hover{
border-color:#38BDF8;
background:linear-gradient(180deg,#E0F2FE 0%,#FFFFFF 100%);
}
.choices:not(.choices--sequence):not(.choices--match):not(.choices--chips) > .cho-btn:nth-child(2):hover,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match):not(.choices--chips) > .cho-btn:nth-child(2):hover,
.sc-grid.sc-grid--challenge .ch-choices > .cho-btn:nth-child(2):hover,
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(2):hover,
.choiceadventure-round-screen .choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(2):hover{
border-color:#22C55E;
background:linear-gradient(180deg,#DCFCE7 0%,#FFFFFF 100%);
}
.choices:not(.choices--sequence):not(.choices--match):not(.choices--chips) > .cho-btn:nth-child(3):hover,
.sc-grid.sc-grid--solo:not(.sc-grid--challenge) .choices:not(.choices--sequence):not(.choices--match):not(.choices--chips) > .cho-btn:nth-child(3):hover,
.sc-grid.sc-grid--challenge .ch-choices > .cho-btn:nth-child(3):hover,
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(3):hover,
.choiceadventure-round-screen .choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(3):hover{
border-color:#FB923C;
background:linear-gradient(180deg,#FFEDD5 0%,#FFFFFF 100%);
}
.cho-ltr.l-a,
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(1) .choiceadventure-choice-num{
background:linear-gradient(135deg,#0284C7 0%,#38BDF8 100%);
color:#FFFFFF;
box-shadow:0 8px 16px rgba(14,165,233,0.20);
}
.cho-ltr.l-b,
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(2) .choiceadventure-choice-num{
background:linear-gradient(135deg,#16A34A 0%,#34D399 100%);
color:#FFFFFF;
box-shadow:0 8px 16px rgba(34,197,94,0.18);
}
.cho-ltr.l-c,
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(3) .choiceadventure-choice-num{
background:linear-gradient(135deg,#F97316 0%,#FBBF24 100%);
color:#FFFFFF;
box-shadow:0 8px 16px rgba(249,115,22,0.18);
}
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(1).is-selected{
border-color:#0284C7;
background:linear-gradient(180deg,#E0F2FE 0%,#FFFFFF 100%);
box-shadow:0 14px 28px rgba(14,165,233,0.16);
}
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(2).is-selected{
border-color:#16A34A;
background:linear-gradient(180deg,#DCFCE7 0%,#FFFFFF 100%);
box-shadow:0 14px 28px rgba(34,197,94,0.15);
}
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(3).is-selected{
border-color:#F97316;
background:linear-gradient(180deg,#FFEDD5 0%,#FFFFFF 100%);
box-shadow:0 14px 28px rgba(249,115,22,0.15);
}
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(1).is-selected .choiceadventure-choice-num{
background:linear-gradient(135deg,#0369A1 0%,#0EA5E9 100%);
}
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(2).is-selected .choiceadventure-choice-num{
background:linear-gradient(135deg,#15803D 0%,#22C55E 100%);
}
.choiceadventure-choice-stack > .choiceadventure-choice-btn:nth-child(3).is-selected .choiceadventure-choice-num{
background:linear-gradient(135deg,#EA580C 0%,#F59E0B 100%);
}
/* First-answer demo payoff: show a parent-style insight before asking for more play. */
.play-result.play-result--demo-preview,
body.route-play-view #main.main-play-view .card.screen.play-result.play-result--demo-preview{
max-height:none !important;
overflow:visible !important;
}
body.route-play-view:has(#main.main-play-view .play-result--demo-preview) #main.main-play-view{
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
}
.demo-growth-preview-card{
width:100%;
display:grid;
gap:9px;
padding:12px;
border-radius:22px;
border:1.5px solid rgba(245,158,11,0.36);
background:
radial-gradient(circle at 92% 8%,rgba(251,191,36,0.22),transparent 28%),
linear-gradient(180deg,#FFFBEB 0%,#FFFFFF 100%);
box-shadow:0 14px 28px rgba(180,83,9,0.12),inset 0 1px 0 rgba(255,255,255,0.86);
text-align:left;
animation:slideUp .35s ease both;
}
.demo-growth-preview-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.demo-growth-preview-head strong{
min-width:0;
color:#0F3F6E;
font-size:.94rem;
line-height:1.12;
font-weight:950;
}
.demo-growth-preview-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
padding:5px 8px;
border-radius:999px;
background:#FFFFFF;
border:1px solid rgba(251,191,36,0.48);
color:#B45309;
font-size:.58rem;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
box-shadow:0 6px 14px rgba(245,158,11,0.12);
}
.demo-growth-preview-copy{
margin:0;
color:#365A7A;
font-size:.76rem;
line-height:1.35;
font-weight:850;
}
.demo-growth-preview-skills{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:6px;
}
.demo-growth-preview-skills span{
min-width:0;
padding:7px 8px;
border-radius:14px;
border:1px solid rgba(125,211,252,0.45);
background:linear-gradient(180deg,#F0F9FF 0%,#FFFFFF 100%);
color:#075985;
font-size:.64rem;
line-height:1.12;
font-weight:950;
text-align:center;
}
.demo-growth-preview-note{
display:grid;
gap:3px;
padding:9px 10px;
border-radius:16px;
background:linear-gradient(180deg,#ECFDF5 0%,#FFFFFF 100%);
border:1px solid rgba(52,211,153,0.32);
}
.demo-growth-preview-note b{
color:#047857;
font-size:.58rem;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.demo-growth-preview-note span{
color:#0F5132;
font-size:.72rem;
line-height:1.28;
font-weight:850;
}
.demo-growth-preview-actions{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:8px;
}
.demo-growth-preview-primary,
.demo-growth-preview-secondary{
min-height:40px;
border:0;
border-radius:16px;
padding:9px 10px;
font-family:inherit;
font-size:.78rem;
font-weight:950;
cursor:pointer;
transition:transform .14s ease,box-shadow .14s ease;
}
.demo-growth-preview-primary{
color:#fff;
background:linear-gradient(135deg,#F97316 0%,#F59E0B 52%,#FACC15 100%);
box-shadow:0 12px 22px rgba(249,115,22,0.26);
}
.demo-growth-preview-secondary{
color:#fff;
background:linear-gradient(135deg,#059669 0%,#10B981 100%);
box-shadow:0 12px 22px rgba(5,150,105,0.22);
}
.demo-growth-preview-primary:hover,
.demo-growth-preview-secondary:hover{
transform:translateY(-1px);
}
.demo-growth-preview-card--compact{
grid-template-columns:auto minmax(0,1fr);
align-items:center;
gap:10px;
padding:10px;
border-radius:18px;
}
.demo-growth-preview-compact-icon{
width:48px;
height:48px;
display:grid;
place-items:center;
border-radius:16px;
background:linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 100%);
border:1px solid rgba(251,146,60,0.3);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
}
.demo-growth-preview-compact-img{
width:32px;
height:32px;
object-fit:contain;
}
.demo-growth-preview-compact-copy{
min-width:0;
display:grid;
gap:2px;
}
.demo-growth-preview-compact-copy span{
color:#B45309;
font-size:.58rem;
line-height:1;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.demo-growth-preview-compact-copy strong{
color:#0F3F6E;
font-size:.86rem;
line-height:1.12;
font-weight:950;
}
.demo-growth-preview-compact-copy em{
color:#56718B;
font-size:.66rem;
line-height:1.18;
font-style:normal;
font-weight:850;
}
.demo-growth-preview-card--compact .demo-growth-preview-actions{
grid-column:1 / -1;
}
.guest-first-highlight-shell{
display:grid;
gap:14px;
}
.guest-first-highlight-hero,
.guest-first-highlight-next{
border-radius:24px;
border:1.5px solid rgba(125,211,252,0.55);
background:
radial-gradient(circle at 92% 8%,rgba(251,191,36,0.18),transparent 26%),
linear-gradient(180deg,#F8FCFF 0%,#FFFFFF 100%);
box-shadow:0 16px 34px rgba(15,63,110,0.1),inset 0 1px 0 rgba(255,255,255,0.9);
padding:16px;
}
.guest-first-highlight-topline,
.guest-first-highlight-title-row,
.guest-first-highlight-insight-head,
.guest-first-highlight-actions,
.guest-first-highlight-next-head{
display:flex;
align-items:center;
gap:10px;
}
.guest-first-highlight-topline,
.guest-first-highlight-insight-head,
.guest-first-highlight-next-head{
justify-content:space-between;
}
.guest-first-highlight-kicker,
.guest-first-highlight-mode{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
padding:6px 9px;
font-size:.62rem;
line-height:1;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.guest-first-highlight-kicker{
color:#B45309;
background:#FFF7ED;
border:1px solid rgba(251,146,60,0.35);
}
.guest-first-highlight-mode{
color:#0369A1;
background:#E0F2FE;
border:1px solid rgba(56,189,248,0.34);
}
.guest-first-highlight-title-row{
align-items:flex-start;
margin-top:14px;
}
.guest-first-highlight-icon{
width:58px;
height:58px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:20px;
background:linear-gradient(180deg,#ECFEFF 0%,#FFFFFF 100%);
border:1px solid rgba(125,211,252,0.5);
}
.guest-first-highlight-icon-img{
width:40px;
height:40px;
object-fit:contain;
}
.guest-first-highlight-title-row h2{
margin:0;
color:#0F3F6E;
font-size:1.35rem;
line-height:1.05;
font-weight:950;
}
.guest-first-highlight-title-row p{
margin:6px 0 0;
color:#526D89;
font-size:.78rem;
line-height:1.35;
font-weight:800;
}
.guest-first-highlight-insight-card{
display:grid;
gap:10px;
margin-top:14px;
padding:13px;
border-radius:20px;
background:linear-gradient(180deg,#FFFBEB 0%,#FFFFFF 100%);
border:1.5px solid rgba(245,158,11,0.32);
}
.guest-first-highlight-insight-head span,
.guest-first-highlight-answer span,
.guest-first-highlight-meaning b,
.guest-first-highlight-parent-note b,
.guest-first-highlight-next-head span{
color:#B45309;
font-size:.6rem;
line-height:1;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.guest-first-highlight-insight-head strong{
color:#0F3F6E;
font-size:.92rem;
line-height:1.1;
font-weight:950;
}
.guest-first-highlight-insight-card p{
margin:0;
color:#365A7A;
font-size:.82rem;
line-height:1.38;
font-weight:850;
}
.guest-first-highlight-skills{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:7px;
}
.guest-first-highlight-skills span{
min-width:0;
padding:8px 6px;
border-radius:999px;
background:#FFFFFF;
border:1px solid rgba(125,211,252,0.55);
color:#075985;
font-size:.64rem;
line-height:1.12;
font-weight:950;
text-align:center;
}
.guest-first-highlight-answer,
.guest-first-highlight-meaning,
.guest-first-highlight-parent-note{
display:grid;
gap:4px;
padding:10px;
border-radius:16px;
background:#FFFFFF;
border:1px solid rgba(226,232,240,0.95);
}
.guest-first-highlight-answer strong,
.guest-first-highlight-meaning span,
.guest-first-highlight-parent-note span{
color:#0F5132;
font-size:.78rem;
line-height:1.3;
font-weight:900;
}
.guest-first-highlight-meaning{
background:linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%);
border-color:rgba(96,165,250,0.34);
}
.guest-first-highlight-meaning b{
color:#0369A1;
}
.guest-first-highlight-meaning span{
color:#164E63;
}
.guest-first-highlight-parent-note{
background:linear-gradient(180deg,#ECFDF5 0%,#FFFFFF 100%);
border-color:rgba(52,211,153,0.34);
}
.guest-first-highlight-parent-note b{
color:#047857;
}
.guest-first-highlight-actions{
margin-top:12px;
display:grid;
grid-template-columns:1fr 1fr;
}
.guest-first-highlight-primary,
.guest-first-highlight-secondary{
min-height:46px;
border:0;
border-radius:17px;
padding:10px 12px;
font-family:inherit;
font-size:.82rem;
line-height:1.1;
font-weight:950;
cursor:pointer;
}
.guest-first-highlight-primary{
color:#FFFFFF;
background:linear-gradient(135deg,#0EA5E9 0%,#2563EB 100%);
box-shadow:0 14px 24px rgba(37,99,235,0.2);
}
.guest-first-highlight-secondary{
color:#075985;
background:#FFFFFF;
border:1.5px solid rgba(125,211,252,0.68);
}
.guest-first-highlight-next-head{
align-items:flex-start;
}
.guest-first-highlight-next-head strong{
color:#0F3F6E;
font-size:.86rem;
line-height:1.22;
font-weight:950;
text-align:right;
}
.guest-first-highlight-progress{
display:grid;
gap:8px;
margin-top:12px;
}
.guest-first-highlight-progress-row{
display:grid;
grid-template-columns:auto minmax(0,1fr) 86px;
align-items:center;
gap:9px;
padding:9px;
border-radius:17px;
background:#FFFFFF;
border:1px solid rgba(191,219,254,0.75);
}
.guest-first-highlight-progress-icon{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:12px;
background:#F0F9FF;
}
.guest-first-highlight-progress-icon-img{
width:25px;
height:25px;
object-fit:contain;
}
.guest-first-highlight-progress-copy{
min-width:0;
display:grid;
gap:2px;
}
.guest-first-highlight-progress-copy strong{
color:#0F3F6E;
font-size:.74rem;
line-height:1.1;
font-weight:950;
}
.guest-first-highlight-progress-copy em{
color:#64748B;
font-size:.64rem;
line-height:1;
font-style:normal;
font-weight:850;
}
.guest-first-highlight-progress-bar{
height:8px;
overflow:hidden;
border-radius:999px;
background:#E2E8F0;
}
.guest-first-highlight-progress-bar i{
display:block;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,#38BDF8 0%,#2563EB 100%);
}
.guest-first-highlight-progress-row.is-complete .guest-first-highlight-progress-bar i{
background:linear-gradient(90deg,#34D399 0%,#059669 100%);
}
.guest-first-highlight-hero--simple{
padding:14px;
border-color:rgba(147,197,253,0.56);
background:linear-gradient(180deg,#F8FCFF 0%,#FFFFFF 100%);
box-shadow:0 12px 26px rgba(15,63,110,0.08),inset 0 1px 0 rgba(255,255,255,0.92);
}
.guest-first-highlight-hero--simple .guest-first-highlight-title-row{
margin-top:12px;
}
.guest-first-highlight-hero--simple .guest-first-highlight-icon{
width:50px;
height:50px;
border-radius:17px;
}
.guest-first-highlight-hero--simple .guest-first-highlight-icon-img{
width:34px;
height:34px;
}
.guest-first-highlight-hero--simple .guest-first-highlight-title-row h2{
font-size:1.22rem;
line-height:1.08;
}
.guest-first-highlight-hero--simple .guest-first-highlight-title-row p{
font-size:.75rem;
line-height:1.3;
}
.guest-first-highlight-snapshot{
display:grid;
gap:9px;
margin-top:13px;
padding:13px;
border-radius:18px;
background:#FFFFFF;
border:1px solid rgba(191,219,254,0.72);
}
.guest-first-highlight-signal-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.guest-first-highlight-signal-row span,
.guest-first-highlight-support span,
.guest-first-highlight-move span{
color:#64748B;
font-size:.62rem;
line-height:1;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.guest-first-highlight-signal-row strong{
min-width:0;
color:#0F3F6E;
font-size:.98rem;
line-height:1.08;
font-weight:950;
text-align:right;
}
.guest-first-highlight-main-copy{
margin:0;
color:#224A68;
font-size:.86rem;
line-height:1.36;
font-weight:900;
}
.guest-first-highlight-support{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding-top:2px;
}
.guest-first-highlight-support div{
min-width:0;
display:flex;
justify-content:flex-end;
gap:6px;
flex-wrap:wrap;
}
.guest-first-highlight-support em{
display:inline-flex;
align-items:center;
min-height:24px;
padding:5px 8px;
border-radius:999px;
background:#F0F9FF;
border:1px solid rgba(125,211,252,0.45);
color:#075985;
font-size:.62rem;
line-height:1;
font-style:normal;
font-weight:950;
}
.guest-first-highlight-move{
display:grid;
gap:5px;
padding:9px 10px;
border-radius:14px;
background:#F8FAFC;
border:1px solid rgba(226,232,240,0.95);
}
.guest-first-highlight-move strong{
color:#0F5132;
font-size:.78rem;
line-height:1.28;
font-weight:900;
}
.guest-first-highlight-parent-note--simple{
margin-top:10px;
padding:11px 12px;
border-radius:17px;
box-shadow:none;
}
.guest-first-highlight-parent-note--simple span{
font-size:.82rem;
line-height:1.32;
}
.guest-first-highlight-next--simple{
padding:12px;
border-color:rgba(191,219,254,0.72);
background:linear-gradient(180deg,#FFFFFF 0%,#F8FCFF 100%);
box-shadow:0 10px 22px rgba(15,63,110,0.06),inset 0 1px 0 rgba(255,255,255,0.9);
}
.guest-first-highlight-next--simple .guest-first-highlight-next-head{
display:grid;
gap:5px;
}
.guest-first-highlight-next--simple .guest-first-highlight-next-head strong{
max-width:22rem;
color:#365A7A;
font-size:.78rem;
line-height:1.28;
font-weight:850;
text-align:left;
}
.guest-first-highlight-next--simple .guest-first-highlight-progress{
gap:6px;
margin-top:10px;
}
.guest-first-highlight-next--simple .guest-first-highlight-progress-row{
grid-template-columns:minmax(0,1fr) 76px;
gap:8px;
padding:8px 10px;
border-radius:14px;
border-color:rgba(226,232,240,0.92);
box-shadow:none;
}
.guest-first-highlight-next--simple .guest-first-highlight-progress-icon{
display:none;
}
.guest-first-highlight-next--simple .guest-first-highlight-progress-copy{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.guest-first-highlight-next--simple .guest-first-highlight-progress-copy strong{
font-size:.72rem;
}
.guest-first-highlight-next--simple .guest-first-highlight-progress-copy em{
flex:0 0 auto;
font-size:.62rem;
}
.guest-first-highlight-next--simple .guest-first-highlight-progress-bar{
height:7px;
}
/* Growth Highlight guest page: calmer parent-report tone. */
.profile-screen--insights.outline-primary{
box-shadow:inset 0 0 0 1px rgba(14,116,144,0.2),0 18px 40px rgba(15,63,110,0.08);
background:
linear-gradient(180deg,rgba(255,255,255,0.98) 0%,rgba(248,252,255,0.96) 100%);
}
.profile-screen--insights .sect-h{
margin-bottom:12px;
color:#0B3D5C;
font-size:1.22rem;
letter-spacing:0;
}
.guest-first-highlight-shell{
gap:12px;
}
.guest-first-highlight-hero--simple{
border:1px solid rgba(148,163,184,0.28);
background:
radial-gradient(circle at 94% 0%,rgba(251,191,36,0.1),transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#FFFDF8 100%);
box-shadow:0 14px 30px rgba(15,63,110,0.07),inset 0 1px 0 rgba(255,255,255,0.95);
}
.guest-first-highlight-kicker{
color:#B45309;
background:#FFFBEB;
border-color:rgba(245,158,11,0.3);
box-shadow:none;
}
.guest-first-highlight-mode{
color:#047857;
background:#ECFDF5;
border-color:rgba(52,211,153,0.34);
}
.guest-first-highlight-hero--simple .guest-first-highlight-icon{
background:linear-gradient(180deg,#F0FDFA 0%,#FFFFFF 100%);
border-color:rgba(45,212,191,0.28);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
}
.guest-first-highlight-hero--simple .guest-first-highlight-title-row h2{
color:#0B3D5C;
}
.guest-first-highlight-hero--simple .guest-first-highlight-title-row p{
color:#5A718A;
font-weight:800;
}
.guest-first-highlight-snapshot{
border-color:rgba(226,232,240,0.95);
background:linear-gradient(180deg,#FFFFFF 0%,#FBFDFE 100%);
box-shadow:inset 3px 0 0 rgba(20,184,166,0.32);
}
.guest-first-highlight-signal-row span,
.guest-first-highlight-support span,
.guest-first-highlight-move span{
color:#7C8794;
letter-spacing:.075em;
}
.guest-first-highlight-signal-row strong{
color:#0B3D5C;
}
.guest-first-highlight-main-copy{
color:#244B63;
font-weight:900;
}
.guest-first-highlight-support em{
background:#F0FDFA;
border-color:rgba(45,212,191,0.34);
color:#0F766E;
}
.guest-first-highlight-move{
background:#F8FAFC;
border-color:rgba(203,213,225,0.8);
}
.guest-first-highlight-move strong{
color:#12543E;
}
.guest-first-highlight-parent-note--simple{
background:linear-gradient(180deg,#ECFDF5 0%,#F8FFFC 100%);
border:1px solid rgba(16,185,129,0.24);
box-shadow:inset 3px 0 0 rgba(16,185,129,0.38);
}
.guest-first-highlight-parent-note--simple b{
color:#047857;
}
.guest-first-highlight-parent-note--simple span{
color:#064E3B;
}
.guest-first-highlight-primary{
background:linear-gradient(135deg,#0EA5E9 0%,#2563EB 100%);
box-shadow:0 12px 24px rgba(37,99,235,0.18);
}
.guest-first-highlight-secondary{
color:#0B5A7A;
background:rgba(255,255,255,0.92);
border-color:rgba(14,165,233,0.32);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.88);
}
.guest-first-highlight-next--simple{
border-color:rgba(226,232,240,0.95);
background:linear-gradient(180deg,#FFFFFF 0%,#FAFCFF 100%);
box-shadow:0 10px 24px rgba(15,63,110,0.05);
}
.guest-first-highlight-next--simple .guest-first-highlight-next-head span{
color:#B45309;
}
.guest-first-highlight-next--simple .guest-first-highlight-next-head strong{
color:#516B83;
}
.guest-first-highlight-next--simple .guest-first-highlight-progress-row{
background:#FFFFFF;
border-color:rgba(226,232,240,0.88);
}
.guest-first-highlight-next--simple .guest-first-highlight-progress-copy strong{
color:#173B57;
}
.guest-first-highlight-progress-bar{
background:#E8EEF5;
}
.guest-first-highlight-progress-bar i{
background:linear-gradient(90deg,#14B8A6 0%,#0EA5E9 100%);
}
@media(max-width:430px){
.demo-growth-preview-card{gap:8px;padding:10px;border-radius:19px}
.demo-growth-preview-head{align-items:flex-start;flex-direction:column;gap:6px}
.demo-growth-preview-head strong{font-size:.9rem}
.demo-growth-preview-skills{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.demo-growth-preview-skills span{padding:7px 5px;font-size:.58rem}
.demo-growth-preview-actions{grid-template-columns:1fr 1fr;gap:7px}
.demo-growth-preview-primary,
.demo-growth-preview-secondary{font-size:.72rem;padding:8px 8px}
.demo-growth-preview-card--compact{grid-template-columns:auto minmax(0,1fr);gap:9px}
.demo-growth-preview-compact-icon{width:44px;height:44px;border-radius:15px}
.demo-growth-preview-compact-img{width:29px;height:29px}
.guest-first-highlight-hero,
.guest-first-highlight-next{padding:13px;border-radius:21px}
.guest-first-highlight-title-row h2{font-size:1.18rem}
.guest-first-highlight-skills{gap:5px}
.guest-first-highlight-skills span{font-size:.58rem;padding:7px 5px}
.guest-first-highlight-actions{grid-template-columns:1fr;gap:8px}
.guest-first-highlight-progress-row{grid-template-columns:auto minmax(0,1fr);gap:8px}
.guest-first-highlight-progress-bar{grid-column:2}
.guest-first-highlight-next-head{display:grid;gap:5px}
.guest-first-highlight-next-head strong{text-align:left}
.guest-first-highlight-hero--simple{padding:12px}
.guest-first-highlight-snapshot{padding:11px;border-radius:16px}
.guest-first-highlight-signal-row{align-items:flex-start}
.guest-first-highlight-signal-row strong{font-size:.9rem}
.guest-first-highlight-main-copy{font-size:.8rem}
.guest-first-highlight-support{align-items:flex-start;display:grid;gap:6px}
.guest-first-highlight-support div{justify-content:flex-start}
.guest-first-highlight-next--simple .guest-first-highlight-progress-row{grid-template-columns:minmax(0,1fr)}
.guest-first-highlight-next--simple .guest-first-highlight-progress-bar{grid-column:auto}
}
@media(max-width:340px){
.demo-growth-preview-skills,
.demo-growth-preview-actions{grid-template-columns:1fr}
}