/* Tablet and desktop only. The approved phone layout remains below 700px. */
.desktop-sidebar { display:none; }
@media (min-width:700px) {
    body { min-height:100dvh; background:var(--bg); }
    .workspace { display:block; width:100%; max-width:1280px; padding:0 32px; margin:0 auto; }
    .studio { display:none; }
    .phone,.appearance-light .phone { width:100%; min-height:100dvh; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
    .prototype-bar { height:36px; padding:0; border:0; }
    .app-header { padding:0; }
    .app-header::before { position:fixed; inset:0 0 auto; height:124px; }
    .app-header .logo { left:0; top:18px; }
    .header-actions { right:0; top:18px; max-width:calc(100% - 100px); }
    #main { width:100%; min-width:0; min-height:calc(100dvh - 36px); padding:90px 0 150px; margin:0 auto; }
    #main > * { min-width:0; }
    h2 { font-size:36px; letter-spacing:-1.1px; }
    .page-heading { margin-bottom:32px; }
    .page-heading > p:last-child { max-width:600px; }
    .section { margin-top:36px; }
    .site-footer { margin-top:52px; padding-top:28px; }
    .bottom-nav { left:50%; bottom:24px; width:520px; max-width:calc(100vw - 64px); }
    .bottom-nav a { flex-direction:row; gap:10px; font-size:12px; }
    .game-tray { left:50%; bottom:104px; width:520px; max-width:calc(100vw - 64px); }
    .has-game-tray #main { padding-bottom:224px; }
    #toast { bottom:108px; max-width:560px; }
    .has-game-tray #toast { bottom:184px; }
    .modal-backdrop { align-items:center; padding:24px; }
    .modal { max-width:520px; padding:28px; }
    .modal .screen-list { max-height:65dvh; }

    /* A familiar local view and campaign share the first desktop screen. */
    .home-opening { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:24px; align-items:start; }
    .home-opening .home-location-hero { min-height:330px; padding:30px 28px 12px; border-radius:28px; }
    .home-location-hero .home-greeting h2 { font-size:32px; }
    .home-opening .marathon-banner { min-height:330px; padding:28px; grid-template-columns:minmax(0,1.15fr) minmax(90px,.8fr); border-radius:28px; }
    .home-opening .marathon-banner h3 { font-size:28px; }
    .home-opening .marathon-banner-art { width:150px; max-width:100%; margin-left:0; }
    .home-opening .marathon-banner-copy > p:not(.eyebrow) { font-size:13px; }
    .home-opening .marathon-banner-note { font-size:11px; }
    .featured-rail { gap:20px; }
    .featured-rail > .game-tile { flex:0 0 calc((100% - 40px)/3); }
    .favorites-rail { gap:16px; }
    .favorites-rail > .favorite-app { flex-basis:82px; }
    .favorites-rail .favorite-app-launch > img,.favorites-rail .favorite-placeholder { width:64px; height:64px; border-radius:17px; }
    .is-horizontal .favorite-app-name { font-size:10px; min-height:27px; }
    body[data-page="home"] #main > section.section:last-of-type,
    body[data-page="home-rewards"] #main > section.section:last-of-type { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
    body[data-page="home"] #main > section.section:last-of-type .card,
    body[data-page="home-rewards"] #main > section.section:last-of-type .card { margin:0; align-items:flex-start; }
    .continue-game { max-width:560px; }

    /* Games retain app-sized artwork and matching Favorites spacing. */
    .game-catalog-grid,.favorites-panel.is-dropzone { --game-app-size:76px; --game-app-column-gap:16px; --game-app-row-gap:24px; --game-app-inset:13px; }
    .game-catalog-grid { grid-template-columns:repeat(auto-fill,76px); }
    .favorites-panel.is-dropzone { width:378px; max-width:100%; }
    .favorites-app-grid { grid-template-columns:repeat(4,76px); }
    .is-catalog-app .game-card strong { font-size:11px; min-height:30px; }
    .is-dropzone[data-expanded="true"] .favorite-app-name { font-size:11px; min-height:30px; }
    .favorites-dragging [data-favorites-drop] { top:120px; }
    body[data-page="games"] #main { display:grid; grid-template-columns:minmax(0,1fr) 240px; column-gap:24px; align-content:start; align-items:start; }
    body[data-page="games"] #main > .page-heading { grid-column:1/-1; }
    body[data-page="games"] #main > .favorites-panel { grid-column:1/-1; }
    body[data-page="games"] #main > .search { grid-column:1; grid-row:3; align-self:end; }
    body[data-page="games"] #main > .field { grid-column:2; grid-row:3; margin:0; }
    body[data-page="games"] #main > .field > span { margin-bottom:8px; }
    body[data-page="games"] #main > .chip-row { grid-column:1/-1; }
    #game-results { grid-column:1/-1; }
    #game-results > .section { margin-top:16px; }
    body[data-page="games"] .site-footer { grid-column:1/-1; }
    .game-grid:not(.game-catalog-grid) { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 20px; }
    body[data-page="game"] .game-detail-media { width:260px; max-width:100%; }
    body[data-page="game"] .form-actions,body[data-page="game"] .actions { max-width:440px; margin-left:auto; margin-right:auto; }
    .demo-game { padding:32px; }
    .demo-game img { width:220px; }

    /* Forms and account information remain comfortably readable. */
    body:is([data-page="login"],[data-page="register"],[data-page="face-login"]) #main { max-width:520px; }
    body:is([data-page="profile"],[data-page="personal"],[data-page="bank"],[data-page="security"],[data-page="verification"],[data-page="topup"],[data-page="pending"],[data-page="withdraw"],[data-page="game"],[data-page="play"],[data-page="invite"]) #main { max-width:680px; }
    body:is([data-page="transactions"],[data-page="notifications"],[data-page="terms"],[data-page="privacy"],[data-page="social-club"],[data-page="vault"],[data-page="welcome-bonus"]) #main { max-width:800px; }
    body[data-page="currencies"] #main { max-width:960px; }
    body[data-page="currencies"] .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .legal { line-height:1.8; }
    .auth-page { padding-top:0; }
    .auth-heading h2 { font-size:34px; }
    .identity-page { max-width:640px; margin:auto; }
    body[data-page="more"] #main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; max-width:1000px; align-content:start; align-items:start; }
    body[data-page="more"] .page-heading,body[data-page="more"] #main > .chip-row,body[data-page="more"] .site-footer { grid-column:1/-1; }
    body[data-page="more"] .page-heading,body[data-page="more"] .appearance-panel { margin:0; }
    body[data-page="wallet"] #main { max-width:1000px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:24px; align-content:start; align-items:start; }
    body[data-page="wallet"] .page-heading,body[data-page="wallet"] .site-footer { grid-column:1/-1; }
    body[data-page="wallet"] #main > .card { grid-column:1; grid-row:2; }
    body[data-page="wallet"] #main > .actions { grid-column:1; grid-row:3; margin:0; }
    body[data-page="wallet"] #main > section.section { grid-column:2; grid-row:2/span 2; margin:0; }
    body[data-page="wallet"] #main > div.section { grid-column:1/-1; margin:0; }

    .marathon-page { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
    .marathon-page > .card,.marathon-page .marathon-intro { margin:0; }
    .marathon-page .marathon-intro { grid-column:1/-1; min-height:300px; padding:32px; }
    .marathon-intro h2 { font-size:40px; }
    .marathon-intro-art { width:220px; max-width:100%; justify-self:center; }
    .marathon-page .marathon-tracker { grid-column:1; grid-row:2/span 2; }
    .marathon-tracker ~ .marathon-calculator { grid-column:2; grid-row:2; }
    .marathon-tracker ~ .marathon-essentials { grid-column:2; grid-row:3; }
    .marathon-page .marathon-demo { grid-column:1/-1; }
    .marathon-course { max-width:400px; margin-left:auto; margin-right:auto; }
    .marathon-tier { min-height:90px; }

    /* The companion and persistent game tray anchor to the wider app shell. */
    .companion-widget { right:max(32px,calc((100vw - 1280px)/2 + 32px)); bottom:112px; }
    .companion-panel { width:390px; height:min(600px,calc(100dvh - 312px)); }
    .has-game-tray .companion-widget { bottom:188px; }
    .has-game-tray .companion-panel { height:min(600px,calc(100dvh - 388px)); }
    body[data-page="chat"] #main { max-width:860px; }
    .companion-page { height:calc(100dvh - 240px); min-height:360px; }
    .has-game-tray .companion-page { height:calc(100dvh - 316px); }
    .companion-page .companion-message { max-width:560px; }
    .companion-message-copy { font-size:14px; }
    .companion-message-author { font-size:10px; }
    .companion-message time { font-size:9px; }
    .companion-composer input { font-size:14px; }
    body[data-page="promo"] #main { max-width:1040px; }
    body[data-page="promo"] .marathon-banner { min-height:280px; grid-template-columns:minmax(0,1fr) 220px; padding:32px; }
    body[data-page="promo"] .marathon-banner-art { width:190px; }
}

@media (min-width:1100px) {
    body[data-page="home"] #main { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
    body[data-page="home"] #main > * { grid-column:1/-1; }
    body[data-page="home"] #main > .section { margin-top:0; }
    body[data-page="home"][data-member="true"] #main > .home-favorites { grid-column:1; }
    body[data-page="home"][data-member="true"] #main > .home-continue { grid-column:2; }
    .home-continue .continue-game { max-width:none; }
    .home-opening { --home-banner-height:380px; grid-template-columns:minmax(0,1fr) minmax(0,1.65fr); }
    /* Match the two hero cards without including the separate campaign note. */
    .home-opening .home-location-hero,.home-opening .marathon-banner { height:var(--home-banner-height); min-height:var(--home-banner-height); }
    .home-location-hero .home-greeting h2 { font-size:clamp(28px,2.25vw,32px); }
    .home-opening .marathon-banner h3 { font-size:clamp(28px,2.5vw,36px); }
    .home-opening .marathon-banner-art { width:220px; }
    .featured-rail > .game-tile { flex-basis:calc((100% - 60px)/4); }
    .game-grid:not(.game-catalog-grid) { grid-template-columns:repeat(4,minmax(0,1fr)); }
    body[data-page="games"] #main { grid-template-columns:378px minmax(0,1fr); column-gap:40px; }
    body[data-page="games"] #main > .favorites-panel { grid-column:1; grid-row:2/span 4; position:sticky; top:120px; margin:0; }
    body[data-page="games"] #main > .search { grid-column:2; grid-row:2; }
    body[data-page="games"] #main > .field { grid-column:2; grid-row:3; margin-top:20px; max-width:260px; }
    body[data-page="games"] #main > .chip-row { grid-column:2; grid-row:4; }
    body[data-page="games"] #game-results { grid-column:2; grid-row:5; }
    body[data-page="games"] .game-catalog-grid { padding-inline:0; }
    .landmark-place-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (min-width:700px) and (max-width:849px) {
    .workspace { padding-inline:24px; }
    .home-opening { grid-template-columns:1fr 1fr; gap:18px; }
    .home-opening .home-location-hero { padding:24px 20px 12px; }
    .home-opening .marathon-banner { padding:24px 18px; grid-template-columns:minmax(0,1fr) 90px; }
    .home-opening .marathon-banner h3 { font-size:25px; }
    .home-opening .marathon-banner-art { width:110px; }
    .home-location-hero .home-greeting h2 { font-size:28px; }
    body[data-page="home"] #main > section.section:last-of-type,body[data-page="home-rewards"] #main > section.section:last-of-type { grid-template-columns:1fr; }
    .companion-widget { right:24px; }
}

@media (min-width:700px) and (max-height:650px) {
    .companion-panel,.has-game-tray .companion-panel { position:fixed; inset:20px 24px auto auto; height:calc(100dvh - 40px); width:390px; max-height:none; }
}

/* Desktop navigation lives in a full-height sidebar. */
@media (min-width:1100px) {
    body { --desktop-side:240px; --desktop-gutter:32px; }
    .workspace { max-width:none; padding:0 var(--desktop-gutter) 0 calc(var(--desktop-side) + var(--desktop-gutter)); }
    .phone { max-width:1280px; margin:0 auto; }
    .app-header,.bottom-nav { display:none; }
    #main { padding-top:40px; padding-bottom:80px; min-height:calc(100dvh - 36px); }
    .has-game-tray #main { padding-bottom:160px; }
    .prototype-bar { opacity:.7; }
    .desktop-sidebar { display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:30; width:var(--desktop-side); padding:24px 16px 16px; border-right:1px solid var(--line); background:linear-gradient(160deg,var(--surface),var(--bg)); }
    .desktop-brand { display:flex; align-items:center; gap:12px; flex:none; padding:0 8px 22px; }
    .desktop-brand > img { flex:none; }
    .desktop-brand > span { font-size:17px; font-weight:600; letter-spacing:-.4px; }
    .desktop-brand small { display:block; margin-top:5px; font-size:9px; font-weight:400; letter-spacing:0; color:var(--muted); }
    .desktop-menu-links { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
    .desktop-menu-group + .desktop-menu-group { margin-top:12px; }
    .desktop-menu-group > h2 { margin:0 12px 6px; color:var(--muted); font-size:9px; line-height:1.5; font-weight:500; letter-spacing:.9px; text-transform:uppercase; }
    .desktop-menu-link { position:relative; display:flex; align-items:center; gap:12px; min-height:36px; padding:8px 12px; border-radius:12px; font-size:12px; color:var(--muted); }
    .desktop-menu-link > svg { width:18px; height:18px; }
    .desktop-menu-link > span { flex:1; }
    .desktop-menu-link > small { min-width:20px; padding:3px 5px; border-radius:6px; text-align:center; color:var(--muted); background:var(--raised); font-size:9px; }
    .desktop-menu-link:hover { background:var(--raised); color:var(--text); }
    .desktop-menu-link[aria-current] { background:var(--gold-dark); color:var(--gold); font-weight:600; }
    .desktop-menu-link[aria-current]::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px; border-radius:2px; background:var(--gold); }
    .desktop-account { flex:none; margin-top:16px; padding:16px 8px 0; border-top:1px solid var(--line); }
    .desktop-member { display:flex; align-items:center; gap:10px; }
    .desktop-member-avatar { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; color:var(--gold); background:var(--gold-dark); font-size:11px; font-weight:600; }
    .desktop-member > span:last-child { min-width:0; }
    .desktop-member strong { display:block; max-width:144px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:500; }
    .desktop-member small { display:block; margin-top:4px; font-size:9px; color:var(--muted); }
    .desktop-wallet { position:relative; display:block; margin-top:16px; padding-right:22px; }
    .desktop-wallet > span { display:block; color:var(--muted); font-size:9px; }
    .desktop-wallet > strong { display:block; margin-top:5px; font-size:19px; letter-spacing:-.5px; font-weight:500; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .desktop-wallet > svg { position:absolute; right:0; top:14px; width:14px; height:14px; color:var(--gold); }
    .desktop-signout { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:36px; margin-top:8px; padding:0; border:0; color:var(--muted); background:none; font-size:10px; }
    .desktop-signout > svg { width:12px; height:12px; }
    .desktop-account > p { margin-bottom:12px; font-size:13px; font-weight:500; }
    .desktop-account > .btn { min-height:42px; font-size:12px; }
    .desktop-register { display:block; padding:12px 0 4px; text-align:center; font-size:11px; color:var(--gold); }
    .desktop-legal { display:flex; align-items:center; justify-content:center; gap:7px; padding-top:12px; font-size:9px; color:var(--muted); }
    .desktop-legal a:hover { color:var(--text); }
    .desktop-menu-link:focus-visible,.desktop-brand:focus-visible { outline-offset:0; }

    .game-tray { left:calc(var(--desktop-side) + (100vw - var(--desktop-side))/2); bottom:24px; }
    #toast { left:calc(var(--desktop-side) + (100vw - var(--desktop-side))/2); bottom:24px; }
    .has-game-tray #toast { bottom:104px; }
    .companion-widget,.has-game-tray .companion-widget { right:max(32px,calc((100vw - 1584px)/2 + 32px)); bottom:28px; }
    .companion-panel,.has-game-tray .companion-panel { height:min(650px,calc(100dvh - 164px)); }
    .companion-page { height:calc(100dvh - 110px); }
    .has-game-tray .companion-page { height:calc(100dvh - 184px); }
    body[data-page="games"] #main > .favorites-panel,.favorites-dragging [data-favorites-drop] { top:36px; }
    body[data-page="games"] #main { column-gap:32px; }
}

@media (min-width:1100px) and (max-height:650px) {
    .desktop-sidebar { padding-top:16px; }
    .desktop-brand { padding-bottom:14px; }
    .desktop-account { margin-top:10px; padding-top:10px; }
    .companion-panel,.has-game-tray .companion-panel { position:fixed; inset:20px 32px auto auto; height:calc(100dvh - 40px); max-height:none; }
}

@media (min-width:1100px) {
    body[data-page="home"] .marathon-banner-route { display:block; }
    .marathon-banner-route { grid-column:1/-1; width:100%; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
    .marathon-linear-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
    .marathon-linear-heading strong { font-size:11px; font-weight:500; }
    .marathon-linear-heading > span { color:var(--gold); font-size:11px; font-variant-numeric:tabular-nums; }
    .marathon-linear-points { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); padding:0; margin:0; list-style:none; }
    .marathon-linear-points > li { position:relative; min-width:0; height:16px; }
    .marathon-linear-points > li:not(:last-child)::after { content:""; position:absolute; left:50%; top:6px; width:100%; height:2px; background:var(--line); }
    .marathon-linear-points > li.is-linked::after { background:var(--gold); }
    .marathon-linear-dot { display:block; position:relative; z-index:1; width:14px; height:14px; margin:0 auto; border:2px solid var(--line); border-radius:50%; background:var(--surface); }
    .is-complete > .marathon-linear-dot { border-color:var(--gold); background:var(--gold); }
    .is-current > .marathon-linear-dot { outline:2px solid var(--gold); outline-offset:4px; }
    .marathon-linear-labels { display:flex; justify-content:space-between; margin-top:12px; font-size:9px; color:var(--muted); }
    .marathon-linear-labels > span { width:calc(100%/12); text-align:center; }
    .home-opening .marathon-banner { align-content:center; }
    .home-opening .marathon-banner-art { width:180px; }
}