/* iPad / large native shell — one type and spacing scale for every screen.
 *
 * Phone and the desktop phone-frame are unchanged. iPad presets in the device
 * simulator add .native-shell, so this matches preview and device.
 *
 * Scale (from the phone UI, ~1.25–1.35):
 *   caption 15 · body 18 · chrome 20 · title 22 · display 28 · hero 34
 *   icon wells 56–72 · row padding 16–18 · card padding 22–28
 */

/* min-height keeps iPhone/Android phones in landscape on the phone UI.
 * Width-only 600px would match a rotated 844×390 phone and apply iPad scale. */
@media (min-width: 600px) and (min-height: 600px) {
    html.native-shell {
        --t-caption: 15px;
        --t-body: 18px;
        --t-chrome: 20px;
        --t-title: 22px;
        --t-display: 28px;
        --t-hero: 34px;
        --t-well: 64px;
        --t-well-sm: 56px;
        --t-glyph: 32px;
        --global-topbar-height: 138px;
        --bottom-nav-wave-height: 48px;
    }

    /* —— Shell / scroll ——
     * Full-bleed scroll so the bar sits on the device edge; --screen-col
     * (base.css) keeps the content column centered. */
    html.native-shell .screen-scroll {
        padding-top: 22px;
        padding-bottom: 22px;
        padding-left: max(28px, calc((100% - var(--screen-col, 900px)) / 2));
        padding-right: max(28px, calc((100% - var(--screen-col, 900px)) / 2));
        font-size: var(--t-body);
    }

    html.native-shell #screen-play .screen-scroll {
        padding-left: 28px;
        padding-right: 28px;
    }

    html.native-shell .app-shell.nav-visible .screen.active .screen-scroll {
        padding-bottom: calc(182px + var(--safe-bottom));
    }

    html.native-shell .card {
        padding: 22px;
    }

    /* —— Top bar —— */
    html.native-shell .global-topbar {
        padding: calc(14px + var(--safe-top)) 32px 12px;
    }

    html.native-shell .home-topbar {
        gap: 28px;
        padding: 8px 0 22px;
    }

    html.native-shell .home-topbar-left {
        flex: 1;
        gap: 28px;
    }

    html.native-shell .home-avatar {
        width: 82px;
        height: 82px;
        font-size: 31px;
    }

    html.native-shell .home-level-wrap {
        margin-right: 8px;
    }

    html.native-shell .home-level-badge {
        min-height: 72px;
        padding: 16px 22px;
        font-size: 24px;
        gap: 14px;
    }

    html.native-shell .home-level-points {
        min-height: 30px;
        padding: 6px 12px;
        font-size: 16px;
        top: -12px;
        right: -24px;
    }

    html.native-shell .home-streak,
    html.native-shell .home-coins {
        min-height: 72px;
        padding: 16px 20px;
        gap: 12px;
    }

    html.native-shell .home-streak-icon,
    html.native-shell .home-streak-icon svg {
        width: 42px;
        height: 42px;
    }

    html.native-shell .home-streak-value,
    html.native-shell .home-coins-value {
        font-size: 24px;
    }

    html.native-shell .home-coins-icon,
    html.native-shell .home-coins-icon svg {
        width: 42px;
        height: 42px;
    }

    html.native-shell .home-settings-btn {
        width: 82px;
        height: 82px;
        border-radius: 24px;
    }

    html.native-shell .home-settings-btn svg {
        width: 40px;
        height: 40px;
    }

    /* —— Bottom nav —— */
    html.native-shell .bottom-nav {
        --bottom-nav-wave-height: 48px;
        padding: 0 16px calc(12px + var(--safe-bottom));
    }

    html.native-shell .bottom-nav-item {
        min-height: 97px;
        padding: 16px 8px;
        gap: 8px;
        font-size: 16px;
    }

    html.native-shell .bottom-nav-icon {
        width: 38px;
        height: 38px;
    }

    html.native-shell #bottom-nav .bottom-nav-item {
        min-height: 106px;
        padding: 10px 8px;
        font-size: 21px;
        gap: 8px;
    }

    html.native-shell #bottom-nav .bottom-nav-icon {
        width: 42px;
        height: 42px;
    }

    html.native-shell #screen-play .play-bottom-nav {
        padding: 0 16px calc(12px + var(--safe-bottom));
    }

    html.native-shell .play-bottom-nav .bottom-nav-item,
    html.native-shell .play-letter-scale-group {
        min-height: 106px;
        padding: 10px 8px;
        font-size: 21px;
        gap: 8px;
        min-width: 140px;
        max-width: 280px;
    }

    html.native-shell .play-bottom-nav .bottom-nav-icon {
        width: 42px;
        height: 42px;
    }

    html.native-shell .play-hint-count {
        min-width: 22px;
        height: 22px;
        font-size: 13px;
        line-height: 22px;
        top: -6px;
        right: -12px;
    }

    html.native-shell .play-letter-scale-icon-row {
        width: 85px;
        height: 42px;
        flex-basis: 42px;
    }

    html.native-shell .play-letter-step-btn {
        flex-basis: 42px;
        width: 42px;
    }

    html.native-shell .play-letter-step-btn::after {
        width: 42px;
        height: 42px;
    }

    html.native-shell .play-letter-step-a {
        font-size: 27px;
    }

    html.native-shell .play-letter-step-btn.is-larger .play-letter-step-a {
        font-size: 36px;
    }

    html.native-shell .play-letter-step-sign {
        font-size: 15px;
    }

    /* —— App bar / shared chrome —— */
    html.native-shell .appbar {
        min-height: 96px;
        padding: 0 24px 18px;
        gap: 14px;
    }

    html.native-shell .appbar h1,
    html.native-shell .appbar h2 {
        font-size: var(--t-display);
    }

    html.native-shell .appbar .title-sub {
        font-size: var(--t-caption);
    }

    html.native-shell .appbar .back-btn {
        min-height: 80px;
        padding: 0 22px 0 16px;
        gap: 14px;
    }

    html.native-shell .back-btn-icon {
        width: 44px;
        height: 44px;
    }

    html.native-shell .back-btn-icon svg {
        width: 36px;
        height: 36px;
    }

    html.native-shell .back-btn-label {
        font-size: 28px;
    }

    html.native-shell .icon-btn {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    html.native-shell .icon-btn svg {
        width: 26px;
        height: 26px;
    }

    html.native-shell .btn {
        font-size: var(--t-body);
        min-height: 56px;
        padding: 0 24px;
        gap: 12px;
    }

    html.native-shell .overlay-card .btn,
    html.native-shell .puzzle-unlock-card .btn,
    html.native-shell .apple-name-card .btn,
    html.native-shell .delete-account-card .btn {
        min-height: 80px;
        font-size: 24px;
        padding: 0 32px;
    }

    html.native-shell .btn-sm {
        font-size: 16px;
        min-height: 48px;
    }

    html.native-shell .btn-glyph svg,
    html.native-shell .btn [data-icon] svg {
        width: 22px;
        height: 22px;
    }

    html.native-shell .section-title {
        font-size: var(--t-caption);
        margin: 22px 4px 12px;
    }

    html.native-shell .pill {
        font-size: 16px;
        padding: 9px 16px;
        gap: 8px;
    }

    html.native-shell .pill svg {
        width: 20px;
        height: 20px;
    }

    html.native-shell .toast {
        font-size: var(--t-body);
        padding: 14px 22px;
        gap: 10px;
        bottom: 110px;
    }

    html.native-shell .toast-icon {
        width: 28px;
        height: 28px;
    }

    /* —— Home —— */
    html.native-shell .home-welcome {
        margin-bottom: 18px;
    }

    html.native-shell .home-welcome-greeting {
        font-size: var(--t-display);
    }

    html.native-shell .daily-cta {
        height: 240px;
        gap: 18px;
        padding: 20px 24px;
    }

    html.native-shell .daily-cta-icon {
        height: 148px;
        border-radius: 30px;
        margin: 0 10px;
    }

    html.native-shell .daily-cta-eyebrow {
        font-size: 20px;
    }

    html.native-shell .daily-cta-title {
        font-size: 46px;
    }

    html.native-shell .daily-cta-arrow,
    html.native-shell .daily-cta-arrow svg {
        width: 42px;
        height: 42px;
    }

    html.native-shell .difficulty-cta {
        gap: 22px;
        padding: 28px;
        margin-top: 16px;
    }

    html.native-shell .difficulty-cta[data-action="choose-difficulty"] {
        margin-top: 24px;
    }

    html.native-shell .difficulty-cta-icon {
        width: 103px;
        height: 103px;
        border-radius: 26px;
    }

    html.native-shell .difficulty-cta-glyph {
        width: 58px;
        height: 58px;
    }

    html.native-shell .difficulty-cta-icon .icon-seal {
        width: 45px;
        height: 45px;
        left: -10px;
        bottom: -10px;
    }

    html.native-shell .difficulty-cta-icon .icon-seal svg {
        width: 26px;
        height: 26px;
    }

    html.native-shell .difficulty-cta-title {
        font-size: 36px;
    }

    html.native-shell .difficulty-cta-desc {
        font-size: 23px;
    }

    html.native-shell .difficulty-cta-arrow,
    html.native-shell .difficulty-cta-arrow svg {
        width: 40px;
        height: 40px;
    }

    html.native-shell .home-guest-auth-hint,
    html.native-shell .home-guest-apple-hint {
        font-size: var(--t-caption);
    }

    html.native-shell .social-btn {
        font-size: 16px;
        min-height: 56px;
    }

    html.native-shell .social-btn [data-icon] svg,
    html.native-shell .social-btn svg {
        width: 24px;
        height: 24px;
    }

    html.native-shell .alert {
        font-size: var(--t-chrome);
        line-height: 1.4;
        margin: 18px 0 8px;
    }

    html.native-shell .alert-main {
        gap: 16px;
        padding: 18px 56px 18px 18px;
    }

    html.native-shell .alert-text {
        font-size: var(--t-chrome);
        line-height: 1.4;
    }

    html.native-shell .alert-text strong {
        font-size: var(--t-title);
    }

    html.native-shell .alert-icon {
        width: var(--t-well-sm);
        height: var(--t-well-sm);
        border-radius: 16px;
    }

    html.native-shell .alert-icon svg {
        width: 28px;
        height: 28px;
    }

    html.native-shell .alert-link {
        font-size: var(--t-body);
    }

    html.native-shell .alert-close {
        width: 48px;
        height: 48px;
        top: 10px;
        right: 10px;
    }

    html.native-shell .alert-close svg {
        width: 20px;
        height: 20px;
    }

    /* —— Daily —— */
    html.native-shell .daily-hero {
        padding: 32px 28px 26px;
    }

    html.native-shell .daily-hero-eyebrow {
        font-size: 20px;
    }

    html.native-shell .daily-hero-title {
        font-size: var(--t-hero);
    }

    html.native-shell .daily-hero-sub,
    html.native-shell .daily-hero-meta {
        font-size: var(--t-body);
    }

    html.native-shell .daily-hero-play {
        font-size: 24px;
        padding: 0 36px;
        min-height: 80px;
    }

    html.native-shell .daily-hero-play .play-tri {
        width: 28px;
        height: 28px;
    }

    html.native-shell .daily-hero-share-icon {
        width: 22px;
        height: 22px;
    }

    html.native-shell .daily-hero-solved-badge,
    html.native-shell .daily-hero-solved-rank {
        font-size: var(--t-caption);
        padding: 8px 16px;
    }

    html.native-shell .daily-solved-medal {
        width: 20px;
        height: 20px;
    }

    html.native-shell .daily-day-option {
        font-size: var(--t-body);
        padding: 12px 16px;
    }

    html.native-shell .daily-day-caret {
        width: 18px;
        height: 18px;
    }

    html.native-shell .daily-day-menu {
        min-width: 240px;
    }

    /* —— Quests —— */
    html.native-shell .quest-list {
        gap: 12px;
        margin-bottom: 20px;
    }

    html.native-shell .quest-row {
        min-height: 108px;
        padding: 18px 18px 16px;
    }

    html.native-shell #screen-daily .section-title {
        font-size: 20px;
        margin: 26px 4px 14px;
    }

    html.native-shell .quest-title {
        font-size: 22px;
    }

    html.native-shell .quest-reward-badge,
    html.native-shell .quest-status,
    html.native-shell .quest-progress {
        font-size: 18px;
    }

    html.native-shell .quest-reward-badge {
        padding: 6px 12px;
    }

    /* —— Difficulty picker —— */
    html.native-shell .mode-card {
        padding: 24px;
        gap: 18px;
    }

    html.native-shell .mode-card .mode-name,
    html.native-shell .mode-title {
        font-size: var(--t-chrome);
    }

    html.native-shell .mode-card .mode-desc {
        font-size: 16px;
    }

    html.native-shell .mode-card .mode-icon {
        width: var(--t-well);
        height: var(--t-well);
        border-radius: 18px;
    }

    html.native-shell .mode-card .mode-icon svg {
        width: 32px;
        height: 32px;
    }

    html.native-shell .mode-card .mode-arrow svg {
        width: 24px;
        height: 24px;
    }

    html.native-shell #theme-list.mode-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    html.native-shell #screen-difficulty .screen-scroll {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100%;
    }

    html.native-shell #screen-difficulty .mode-grid {
        display: flex;
        flex-direction: column;
        gap: 26px;
        width: min(100%, 620px);
        margin-inline: auto;
    }

    html.native-shell #screen-difficulty .mode-card {
        flex-direction: row;
        align-items: center;
        min-height: 0;
        padding: 26px 28px;
        gap: 22px;
    }

    html.native-shell #screen-difficulty .mode-card .mode-text {
        gap: 6px;
    }

    html.native-shell #screen-difficulty .mode-card .mode-icon {
        width: 111px;
        height: 111px;
        border-radius: 26px;
    }

    html.native-shell #screen-difficulty .mode-card .mode-icon svg {
        width: 56px;
        height: 56px;
    }

    html.native-shell #screen-difficulty .mode-card .mode-name {
        font-size: 41px;
    }

    html.native-shell #screen-difficulty .mode-card .mode-desc {
        font-size: 23px;
        line-height: 1.35;
    }

    html.native-shell #screen-difficulty .mode-card .mode-arrow {
        margin-top: 0;
        align-self: center;
    }

    html.native-shell #screen-difficulty .mode-card .mode-arrow svg {
        width: 28px;
        height: 28px;
    }

    html.native-shell #screen-difficulty .mode-card .mode-lock svg {
        width: 24px;
        height: 24px;
    }

    /* —— Puzzle lists —— */
    html.native-shell .puzzle-tiles,
    html.native-shell .cascade-list-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        margin-top: 0;
    }

    html.native-shell .puzzle-tile .tile-hero {
        height: 152px;
    }

    html.native-shell .puzzle-tile .tile-body {
        padding: 14px 18px 16px;
        gap: 8px;
    }

    html.native-shell .puzzle-tile .tile-theme {
        font-size: 22px;
    }

    html.native-shell .puzzle-tile .tile-top {
        inset: 12px 12px auto 12px;
        gap: 10px;
    }

    html.native-shell .puzzle-tile .tile-number {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }

    html.native-shell .tile-lock-badge {
        width: 52px;
        height: 52px;
    }

    html.native-shell .puzzle-tile.locked .tile-lock-badge .fa-lock-keyhole {
        font-size: 24px;
    }

    html.native-shell .puzzle-tile .tile-medal {
        padding: 5px;
    }

    html.native-shell .puzzle-tile .tile-medal-disc {
        width: 40px;
        height: 40px;
    }

    html.native-shell .puzzle-tile .tile-medal-disc svg {
        width: 24px;
        height: 24px;
    }

    html.native-shell .puzzle-tile .tile-count,
    html.native-shell .puzzle-tile .tile-words {
        font-size: 18px;
    }

    html.native-shell .puzzle-tile .tile-solved-check {
        width: 50px;
        height: 50px;
    }

    html.native-shell .puzzle-tile .tile-solved-check::before,
    html.native-shell .puzzle-tile .tile-solved-check::after {
        inset: 5px;
    }

    html.native-shell .puzzle-tile .tile-solved-check svg {
        width: 24px;
        height: 24px;
    }

    html.native-shell .cascade-list-tile .tile-timepill {
        min-height: 52px;
        padding: 10px 16px 10px 12px;
        gap: 10px;
    }

    html.native-shell .cascade-list-tile .tile-timepill-icon {
        width: 32px;
        height: 32px;
    }

    html.native-shell .cascade-list-tile .tile-timepill-icon svg {
        width: 18px;
        height: 18px;
    }

    html.native-shell .cascade-list-tile .tile-timepill-time {
        font-size: 22px;
    }

    html.native-shell .tile-unlock {
        min-height: 48px;
        padding: 10px 18px;
        gap: 10px;
    }

    html.native-shell .tile-unlock-label,
    html.native-shell .tile-unlock-cost {
        font-size: 18px;
    }

    html.native-shell .puzzle-tile .tile-unlock-coin {
        width: 24px;
        height: 24px;
    }

    html.native-shell .list-continue {
        padding: 24px 28px;
    }

    html.native-shell .list-continue-mode,
    html.native-shell .list-continue-count {
        font-size: 20px;
    }

    html.native-shell .list-continue-eyebrow {
        font-size: 18px;
    }

    html.native-shell .list-continue-title {
        font-size: 26px;
    }

    html.native-shell .list-continue-meta {
        font-size: 20px;
    }

    html.native-shell .list-continue-thumb {
        width: 88px;
        height: 66px;
        border-radius: 14px;
    }

    html.native-shell .list-continue-play {
        width: 64px;
        height: 64px;
    }

    html.native-shell .list-continue-play svg {
        width: 28px;
        height: 28px;
    }

    html.native-shell .list-hide-solved {
        font-size: var(--t-body);
        margin: 16px 0 14px auto;
        min-height: 44px;
    }

    html.native-shell .list-hide-solved-label {
        font-size: var(--t-body);
        flex-shrink: 0;
    }

    html.native-shell .custom-list-headline,
    html.native-shell .custom-solved-headline {
        font-size: 17px;
        margin-top: 28px;
        margin-bottom: 14px;
    }

    html.native-shell .my-puzzle-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    html.native-shell .my-puzzle-tile {
        padding: 22px 22px;
        gap: 18px;
        border-radius: 18px;
        box-shadow: var(--shadow-card);
    }

    html.native-shell .my-puzzle-icon {
        width: 72px;
        height: 72px;
        border-radius: 18px;
    }

    html.native-shell .my-puzzle-icon svg {
        width: 36px;
        height: 36px;
    }

    html.native-shell .my-puzzle-title {
        font-size: var(--t-title);
    }

    html.native-shell .my-puzzle-meta {
        font-size: 17px;
        margin-top: 4px;
    }

    html.native-shell .my-puzzle-tile .mode-arrow svg {
        width: 28px;
        height: 28px;
    }

    /* —— Cascade hub —— */
    html.native-shell .cascade-hub-card {
        padding: 36px 28px;
    }

    html.native-shell .cascade-hub-icon {
        width: 72px;
        height: 72px;
    }

    html.native-shell .cascade-hub-glyph,
    html.native-shell .cascade-hub-glyph svg {
        width: 36px;
        height: 36px;
    }

    html.native-shell .cascade-hub-title {
        font-size: var(--t-display);
    }

    html.native-shell .cascade-hub-desc {
        font-size: var(--t-body);
    }

    html.native-shell .cascade-hub-meta {
        font-size: 20px;
    }

    html.native-shell .cascade-hub-meta-icon {
        width: 28px;
        height: 28px;
    }

    html.native-shell .cascade-hub-rank-badge-label {
        font-size: 20px;
    }

    html.native-shell .cascade-hub-rank-badge-value,
    html.native-shell .cascade-hub-result-value {
        font-size: 20px;
    }

    html.native-shell #btn-cascade-play {
        min-height: 80px;
        font-size: 24px;
        padding: 0 32px;
    }

    html.native-shell .cascade-list-empty {
        font-size: var(--t-body);
    }

    /* —— Stats / achievements heroes —— */
    html.native-shell .stats-hero,
    html.native-shell .ach-hero {
        padding: 24px 24px 22px;
    }

    html.native-shell .stats-hero {
        padding: 28px 28px 24px;
        margin-bottom: 16px;
    }

    html.native-shell .stats-hero-eyebrow,
    html.native-shell .ach-hero-eyebrow,
    html.native-shell .stats-hero-badge,
    html.native-shell .stats-hero-points,
    html.native-shell .ach-hero-remaining-label {
        font-size: 20px;
    }

    html.native-shell .stats-hero-badge {
        padding: 6px 14px;
    }

    html.native-shell .stats-hero-track {
        height: 10px;
    }

    html.native-shell .stats-hero-value {
        font-size: 46px;
    }

    html.native-shell .ach-hero-value {
        font-size: var(--t-hero);
    }

    html.native-shell .ach-hero-remaining-value {
        font-size: var(--t-title);
    }

    html.native-shell .stats-hero-icon,
    html.native-shell .ach-hero-icon {
        width: 72px;
        height: 72px;
    }

    html.native-shell .stats-hero-glyph,
    html.native-shell .ach-hero-glyph {
        width: var(--t-glyph);
        height: var(--t-glyph);
    }

    html.native-shell .stats-grid {
        gap: 16px;
        margin-bottom: 16px;
    }

    html.native-shell .stat-tile {
        padding: 22px;
        column-gap: 16px;
        border-radius: 18px;
    }

    html.native-shell .stat-tile-icon-wrap,
    html.native-shell .stat-mode-icon,
    html.native-shell .stat-highlight-icon {
        width: var(--t-well);
        height: var(--t-well);
        border-radius: 16px;
    }

    html.native-shell .stat-tile-icon,
    html.native-shell .stat-highlight-glyph {
        width: 36px;
        height: 36px;
    }

    html.native-shell .stat-mode-icon svg {
        width: 36px;
        height: 36px;
    }

    html.native-shell .stat-tile-coin {
        width: 32px;
        height: 32px;
        box-shadow: 0 0 0 5px var(--topbar-coin-ring);
    }

    html.native-shell .stat-tile-value {
        font-size: 36px;
    }

    html.native-shell .stat-tile-label {
        font-size: 20px;
    }

    html.native-shell #screen-stats .section-title {
        font-size: 20px;
        margin: 26px 4px 14px;
    }

    html.native-shell .stats-mode-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    html.native-shell .stat-mode-row {
        padding: 22px 20px;
        gap: 16px;
        min-height: 88px;
        border-radius: 16px;
    }

    html.native-shell .stat-mode-name {
        font-size: 24px;
    }

    html.native-shell .stat-mode-meta {
        font-size: 18px;
        margin-top: 4px;
    }

    html.native-shell .stat-mode-solved {
        font-size: 16px;
        padding: 10px 16px;
    }

    html.native-shell .stats-highlight-card,
    html.native-shell .stat-highlight-card {
        padding: 22px 24px;
    }

    html.native-shell .stat-highlight {
        gap: 16px;
    }

    html.native-shell .stat-highlight-value {
        font-size: 40px;
    }

    html.native-shell .stat-highlight-label {
        font-size: 20px;
    }

    html.native-shell .stat-highlight-play {
        font-size: 22px;
        padding: 16px 24px;
        min-height: 64px;
        border-radius: 16px;
    }

    /* —— Leaderboard —— */
    html.native-shell .leaderboard {
        gap: 10px;
    }

    html.native-shell .lb-row {
        gap: 16px;
        padding: 18px 20px;
        min-height: 80px;
        border-radius: 16px;
        font-size: 22px;
    }

    html.native-shell .lb-row .rank {
        width: 52px;
        height: 52px;
        font-size: 20px;
        border-radius: 14px;
    }

    html.native-shell .lb-row .rank.medal-rank svg {
        width: 28px;
        height: 28px;
    }

    html.native-shell .lb-row .name,
    html.native-shell .lb-row .score,
    html.native-shell .lb-row .time {
        font-size: 22px;
    }

    html.native-shell .podium-name {
        font-size: 25px;
    }

    html.native-shell .podium-slot--1 .podium-name {
        font-size: 28px;
    }

    html.native-shell .podium-score,
    html.native-shell .podium-time {
        font-size: 25px;
        min-height: 38px;
        padding: 6px 14px;
    }

    html.native-shell .podium-medal--gold {
        width: 52px;
        height: 52px;
        font-size: 26px;
    }

    html.native-shell .podium-medal--silver {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

    html.native-shell .podium-medal--bronze {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    html.native-shell .podium-slot--1 .podium-block { height: 128px; }
    html.native-shell .podium-slot--2 .podium-block { height: 92px; }
    html.native-shell .podium-slot--3 .podium-block { height: 74px; }

    html.native-shell .all-time-your-rank {
        padding: 10px 20px;
        gap: 10px;
        margin-bottom: 8px;
    }

    html.native-shell .all-time-your-rank-label {
        font-size: 20px;
    }

    html.native-shell .all-time-your-rank-value {
        font-size: var(--t-title);
    }

    /* —— Achievements: 3-up cards, not phone rows —— */
    html.native-shell .achievement-group + .achievement-group {
        margin-top: 18px;
    }

    html.native-shell .achievement-group .achievement-grid,
    html.native-shell #achievement-grid > .achievement-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        align-items: stretch;
    }

    html.native-shell .achievement-card {
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        padding: 20px 18px 16px;
        gap: 14px;
        border-radius: 18px;
        box-shadow: var(--shadow-card);
        font-size: var(--t-body);
    }

    html.native-shell .achievement-card-icon {
        width: var(--t-well);
        height: var(--t-well);
        border-radius: 18px;
    }

    html.native-shell .ach-glyph {
        width: var(--t-glyph);
        height: var(--t-glyph);
    }

    html.native-shell .achievement-card .icon-seal {
        width: 24px;
        height: 24px;
        left: -6px;
        bottom: -6px;
    }

    html.native-shell .achievement-card .icon-seal svg {
        width: 13px;
        height: 13px;
    }

    html.native-shell #screen-achievements .section-title {
        font-size: 20px;
        margin: 26px 4px 14px;
    }

    html.native-shell .achievement-card .ach-tier {
        min-width: 28px;
        height: 24px;
        font-size: 16px;
        padding: 0 8px;
        right: -6px;
        top: -6px;
    }

    html.native-shell .achievement-card-text {
        width: 100%;
    }

    html.native-shell .achievement-card-title {
        font-size: var(--t-chrome);
        line-height: 1.2;
    }

    html.native-shell .achievement-card-caption {
        font-size: 20px;
        margin-top: 4px;
        white-space: normal;
    }

    html.native-shell .ach-reward {
        margin-top: auto;
        font-size: 18px;
        padding: 8px 14px 8px 8px;
        gap: 8px;
    }

    html.native-shell .ach-reward-coin {
        width: 24px;
        height: 24px;
    }

    html.native-shell .achievement-connect-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        width: 100%;
        margin-top: auto;
        font-size: 16px;
        min-height: 48px;
        padding: 0 16px;
    }

    /* —— Settings / forms —— */
    html.native-shell .stat-row {
        padding: 20px 0;
    }

    html.native-shell .stat-row .label {
        font-size: 24px;
    }

    html.native-shell .name-field .label {
        font-size: 20px;
    }

    html.native-shell .stat-row .value {
        font-size: var(--t-title);
    }

    html.native-shell .name-input {
        min-height: 64px;
        padding: 16px 20px;
        font-size: 22px;
    }

    html.native-shell .password-field .name-input {
        padding-right: 68px;
    }

    html.native-shell .password-toggle {
        width: 52px;
        height: 52px;
        right: 6px;
        border-radius: 14px;
    }

    html.native-shell .password-toggle svg {
        width: 26px;
        height: 26px;
    }

    html.native-shell .switch {
        width: 72px;
        height: 42px;
    }

    html.native-shell .switch .track::before {
        width: 32px;
        height: 32px;
        left: 5px;
        top: 5px;
    }

    html.native-shell .switch input:checked + .track::before {
        transform: translateX(30px);
    }

    html.native-shell .legal-link {
        font-size: var(--t-body);
        padding: 20px 22px;
    }

    html.native-shell .legal-doc {
        font-size: 16px;
        line-height: 1.6;
    }

    html.native-shell .legal-doc h3 {
        font-size: var(--t-chrome);
    }

    html.native-shell .field-hint,
    html.native-shell .custom-invite-desc {
        font-size: var(--t-caption);
    }

    html.native-shell #screen-settings .field-hint,
    html.native-shell .settings-delete-note {
        font-size: 21px;
        line-height: 1.45;
    }

    html.native-shell #screen-settings .section-title {
        font-size: 20px;
        margin: 26px 4px 14px;
    }

    html.native-shell #screen-settings .name-save-btn {
        min-height: 64px;
        min-width: 96px;
        font-size: 22px;
        padding: 0 22px;
    }

    html.native-shell #screen-settings .settings-push-enable-btn,
    html.native-shell #screen-settings .settings-delete-btn {
        min-height: 80px;
        font-size: 24px;
        padding: 0 32px;
    }

    html.native-shell #screen-settings .social-btn {
        min-height: 80px;
        font-size: 24px;
    }

    html.native-shell #screen-settings .social-linked-row {
        min-height: 80px;
        font-size: 22px;
    }

    html.native-shell #screen-settings .social-btn-icon,
    html.native-shell #screen-settings .social-btn-icon svg,
    html.native-shell #screen-settings .social-btn [data-icon] svg,
    html.native-shell #screen-settings .social-btn svg {
        width: 32px;
        height: 32px;
    }

    html.native-shell #screen-settings .mode-card .mode-desc {
        font-size: 21px;
    }

    html.native-shell .custom-type-option {
        padding: 14px 16px;
    }

    html.native-shell .direction-option {
        width: var(--t-well-sm);
        height: var(--t-well-sm);
    }

    /* —— Overlays / modals —— */
    html.native-shell .overlay-card,
    html.native-shell .puzzle-unlock-card,
    html.native-shell .apple-name-card,
    html.native-shell .delete-account-card {
        max-width: 680px;
        padding: 44px 40px 40px;
    }

    html.native-shell .overlay-card h2,
    html.native-shell .brief-theme,
    html.native-shell .puzzle-unlock-title,
    html.native-shell .apple-name-title,
    html.native-shell .delete-account-title {
        font-size: 38px;
    }

    html.native-shell .overlay-card p,
    html.native-shell .brief-howto,
    html.native-shell .brief-sub,
    html.native-shell .puzzle-unlock-meta,
    html.native-shell .apple-name-subtitle,
    html.native-shell .delete-account-lead,
    html.native-shell .puzzle-unlock-insufficient,
    html.native-shell .custom-invite-desc {
        font-size: 22px;
        line-height: 1.45;
    }

    html.native-shell .brief-label {
        font-size: 21px;
        margin-bottom: 16px;
    }

    html.native-shell .brief-section + .brief-section {
        margin-top: 28px;
    }

    html.native-shell .brief-head {
        margin-bottom: 28px;
    }

    html.native-shell .overlay-card .trophy,
    html.native-shell .puzzle-unlock-icon,
    html.native-shell .apple-name-icon,
    html.native-shell .delete-account-icon {
        width: 100px;
        height: 100px;
        border-radius: 28px;
    }

    html.native-shell .overlay-card .trophy-glyph,
    html.native-shell .puzzle-unlock-glyph,
    html.native-shell .apple-name-glyph {
        width: 54px;
        height: 54px;
    }

    html.native-shell .overlay-card .trophy-seal,
    html.native-shell .puzzle-unlock-seal,
    html.native-shell .apple-name-seal {
        width: 40px;
        height: 40px;
    }

    html.native-shell .overlay-card .trophy-seal svg,
    html.native-shell .puzzle-unlock-seal svg,
    html.native-shell .apple-name-seal svg {
        width: 22px;
        height: 22px;
    }

    html.native-shell .brief-close,
    html.native-shell .puzzle-unlock-close,
    html.native-shell .apple-name-close,
    html.native-shell .custom-invite-close {
        width: 64px;
        height: 64px;
        top: 14px;
        right: 14px;
    }

    html.native-shell .brief-close svg,
    html.native-shell .puzzle-unlock-close svg,
    html.native-shell .apple-name-close svg,
    html.native-shell .custom-invite-close svg {
        width: 30px;
        height: 30px;
    }

    html.native-shell .overlay-card .r-stat {
        min-height: 56px;
        gap: 12px;
        padding: 10px 18px 10px 10px;
    }

    html.native-shell .overlay-card .r-icon {
        width: 44px;
        height: 44px;
    }

    html.native-shell .overlay-card .r-icon svg {
        width: 24px;
        height: 24px;
    }

    html.native-shell .overlay-card .r-value {
        font-size: 22px;
    }

    html.native-shell .overlay-card .result-medal-badge {
        font-size: 20px;
        padding: 10px 18px 10px 10px;
        gap: 10px;
    }

    html.native-shell .overlay-card .result-medal-icon {
        width: 36px;
        height: 36px;
    }

    html.native-shell .overlay-card .result-medal-icon svg {
        width: 20px;
        height: 20px;
    }

    html.native-shell .overlay-card .result-medal-label {
        font-size: 22px;
    }

    html.native-shell .overlay-card .result-medal-coins {
        font-size: 18px;
        padding: 6px 12px 6px 6px;
    }

    html.native-shell .overlay-card .result-medal-coin {
        width: 22px;
        height: 22px;
    }

    html.native-shell .overlay-card .result-medal-coin svg {
        width: 14px;
        height: 14px;
    }

    html.native-shell .overlay-card .actions .row .icon-btn {
        width: 80px;
        height: 80px;
    }

    html.native-shell .apple-name-option {
        padding: 22px 24px;
    }

    html.native-shell .apple-name-option-label {
        font-size: 22px;
    }

    html.native-shell .apple-name-option-value,
    html.native-shell .apple-name-option-note {
        font-size: 18px;
    }

    html.native-shell .apple-name-radio-wrap,
    html.native-shell .apple-name-radio-mark {
        width: 36px;
        height: 36px;
    }

    html.native-shell .apple-name-option:has(input:checked) .apple-name-radio-mark::after {
        width: 16px;
        height: 16px;
    }

    html.native-shell .achievement-overlay-card {
        padding: 26px 28px;
        gap: 20px;
    }

    html.native-shell .achievement-overlay-icon {
        width: 88px;
        height: 88px;
    }

    html.native-shell .achievement-overlay-kicker {
        font-size: 18px;
    }

    html.native-shell .achievement-overlay-title {
        font-size: 32px;
    }

    html.native-shell .achievement-overlay-caption {
        font-size: 20px;
    }

    html.native-shell .guest-welcome-skip {
        font-size: 22px;
    }

    html.native-shell .auth-divider {
        font-size: var(--t-caption);
    }

    html.native-shell .delete-account-list,
    html.native-shell .delete-account-note {
        font-size: 22px;
    }

    html.native-shell .puzzle-unlock-label {
        font-size: 21px;
    }

    html.native-shell .puzzle-unlock-value {
        font-size: 26px;
    }

    html.native-shell .puzzle-unlock-value--cost {
        font-size: 32px;
        padding: 10px 20px 10px 10px;
    }

    html.native-shell .puzzle-unlock-value--cost .puzzle-unlock-coin {
        width: 36px;
        height: 36px;
    }

    html.native-shell .hint-buy-balance {
        font-size: 22px;
        gap: 10px;
        margin: 4px 0 18px;
    }

    html.native-shell .hint-buy-balance .puzzle-unlock-coin {
        width: 24px;
        height: 24px;
    }

    html.native-shell .hint-buy-tiers {
        gap: 12px;
    }

    html.native-shell .hint-buy-tier {
        min-height: 72px;
        padding: 18px 22px;
        font-size: 22px;
        border-radius: 16px;
    }

    html.native-shell .hint-buy-tier-label,
    html.native-shell .hint-buy-tier-cost {
        font-size: 22px;
    }

    html.native-shell .hint-buy-tier-cost .puzzle-unlock-coin {
        width: 22px;
        height: 22px;
    }

    html.native-shell .brief-skip {
        font-size: 22px;
        gap: 14px;
    }

    html.native-shell .brief-skip input {
        width: 36px;
        height: 36px;
    }

    html.native-shell .brief-card .actions {
        margin-top: 32px;
        gap: 18px;
    }

    html.native-shell .brief-medals {
        gap: 12px;
    }

    html.native-shell .brief-medal {
        padding: 18px 20px;
        gap: 16px;
    }

    html.native-shell .brief-medal-tier {
        font-size: 22px;
    }

    html.native-shell .brief-medal-time,
    html.native-shell .brief-medal-coins,
    html.native-shell .brief-medal-pct {
        font-size: 20px;
    }

    html.native-shell .brief-medal-disc {
        width: 64px;
        height: 64px;
    }

    html.native-shell .brief-medal-disc svg {
        width: 36px;
        height: 36px;
    }

    html.native-shell .brief-medal-coin {
        width: 26px;
        height: 26px;
    }

    html.native-shell .brief-directions {
        gap: 18px;
        max-width: 390px;
    }

    html.native-shell .brief-directions .play-direction-icon {
        width: 84px;
        height: 84px;
    }

    html.native-shell .brief-directions .play-direction-icon .direction-svg {
        width: 44px;
        height: 44px;
    }

    /* —— Play (unifies game.css tablet block with this scale) —— */
    html.native-shell .play-header {
        min-height: 104px;
        gap: 16px;
        padding: 16px 24px 18px;
    }

    html.native-shell .play-back-btn {
        width: 64px;
        height: 64px;
        border-radius: 18px;
    }

    html.native-shell .play-back-btn svg {
        width: 30px;
        height: 30px;
    }

    html.native-shell .play-title {
        font-size: var(--t-display);
    }

    html.native-shell .play-progress-count {
        font-size: 21px;
    }

    html.native-shell .play-stat-capsule {
        min-height: 64px;
        gap: 12px;
        padding: 14px 18px 14px 16px;
        border-radius: 20px;
    }

    html.native-shell .play-stat-value {
        font-size: 24px;
    }

    html.native-shell .play-stat-icon,
    html.native-shell .play-stat-icon svg {
        width: 32px;
        height: 32px;
    }

    html.native-shell .chip {
        font-size: var(--t-body);
        padding: 9px 16px;
    }

    html.native-shell #word-chips .chip {
        font-size: 21px;
        padding: 12px 18px;
    }

    html.native-shell #word-chips {
        gap: 12px;
        padding: 10px 20px 14px;
    }

    html.native-shell .cascade-target-label {
        font-size: var(--t-caption);
    }

    html.native-shell .cascade-target-word {
        font-size: 40px;
    }

    html.native-shell .play-directions-label {
        font-size: var(--t-body);
    }

    html.native-shell .play-selection-preview-text {
        font-size: 22px;
        min-height: 2rem;
        padding: 0.28rem 0.9rem;
    }

    html.native-shell .play-tutorial-toast {
        font-size: 22px;
        padding: 18px 26px;
        max-width: min(680px, calc(100% - 32px));
    }

    /* —— Custom create / share —— */
    html.native-shell #screen-custom-create .name-field .label,
    html.native-shell #screen-custom-share .section-title {
        font-size: 20px;
    }

    html.native-shell #screen-custom-create .name-input,
    html.native-shell #screen-custom-share .name-input {
        min-height: 64px;
        font-size: 22px;
        padding: 16px 20px;
    }

    html.native-shell .custom-word-row .name-input {
        padding-right: 80px;
    }

    html.native-shell .custom-word-row .btn {
        width: 64px;
        height: 64px;
        min-height: 0;
        padding: 0;
        right: 0;
    }

    html.native-shell .custom-word-row .btn svg {
        width: 28px;
        height: 28px;
    }

    html.native-shell .custom-word-inline-hint,
    html.native-shell #screen-custom-create .field-hint {
        font-size: 18px;
    }

    html.native-shell .custom-word-tags .chip {
        font-size: 18px;
        padding: 8px 8px 8px 14px;
        gap: 6px;
    }

    html.native-shell .custom-word-tags .chip .chip-remove {
        width: 26px;
        height: 26px;
    }

    html.native-shell .custom-word-tags .chip .chip-remove svg {
        width: 14px;
        height: 14px;
    }

    html.native-shell .custom-preview {
        padding: 22px;
        gap: 16px;
        margin-top: 22px;
    }

    html.native-shell .custom-preview-row {
        gap: 24px;
    }

    html.native-shell .custom-preview-grid {
        width: 200px;
        gap: 3px;
    }

    html.native-shell .pv-cell {
        border-radius: 3px;
    }

    html.native-shell .custom-preview-controls {
        gap: 12px;
    }

    html.native-shell .custom-preview-size-label {
        font-size: 20px;
    }

    html.native-shell .custom-preview-fit {
        font-size: 18px;
    }

    html.native-shell .custom-preview-suggest-label {
        font-size: 18px;
    }

    html.native-shell .custom-preview-suggest-btn {
        min-height: 56px;
        font-size: 20px;
    }

    html.native-shell .custom-preview-size {
        gap: 12px;
    }

    html.native-shell .custom-preview-size .size-step-btn {
        height: 56px;
        max-width: 64px;
        font-size: 28px;
    }

    html.native-shell .custom-preview-size .size-step-value {
        font-size: 24px;
        min-width: 36px;
    }

    html.native-shell .pv-times {
        font-size: 24px;
    }

    html.native-shell .custom-type-picker {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    html.native-shell .custom-type-option {
        padding: 18px 20px;
        gap: 16px;
    }

    html.native-shell .custom-type-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }

    html.native-shell .custom-type-icon svg {
        width: 32px;
        height: 32px;
    }

    html.native-shell .custom-type-title {
        font-size: var(--t-chrome);
    }

    html.native-shell .custom-type-desc {
        font-size: 18px;
    }

    html.native-shell .custom-options-summary {
        font-size: 22px;
        min-height: 88px;
        padding: 18px 22px 18px 16px;
        gap: 16px;
    }

    html.native-shell .custom-options-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }

    html.native-shell .custom-options-icon svg {
        width: 32px;
        height: 32px;
    }

    html.native-shell .custom-options-chevron {
        width: 32px;
        height: 32px;
    }

    html.native-shell .direction-row {
        gap: 12px;
    }

    html.native-shell #custom-direction-picker .direction-option {
        max-width: 80px;
        padding: 10px;
        border-radius: 18px;
    }

    html.native-shell #custom-direction-picker .direction-option .direction-svg {
        width: 44px;
        height: 44px;
    }

    html.native-shell .time-stepper {
        padding: 8px 10px;
        gap: 8px;
    }

    html.native-shell .time-stepper .size-step-btn {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        font-size: 28px;
    }

    html.native-shell .time-stepper .size-step-value {
        font-size: 24px;
        min-width: 80px;
    }

    html.native-shell .custom-partial-choice {
        padding: 22px;
        margin-top: 26px;
    }

    html.native-shell .custom-partial-title {
        font-size: var(--t-title);
    }

    html.native-shell .custom-partial-stats,
    html.native-shell .custom-partial-hint,
    html.native-shell .custom-partial-label {
        font-size: 17px;
    }

    html.native-shell .custom-partial-icon {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        font-size: 26px;
    }

    html.native-shell .custom-create-actions {
        margin-top: 28px;
        gap: 16px;
    }

    html.native-shell #screen-custom-create .custom-create-actions .btn,
    html.native-shell #screen-custom-share .btn,
    html.native-shell .custom-partial-actions .btn {
        min-height: 80px;
        font-size: 24px;
    }

    html.native-shell .custom-share-guest-by {
        font-size: var(--t-title);
    }

    html.native-shell .custom-share-guest-time,
    html.native-shell .custom-share-owner-block p {
        font-size: var(--t-chrome);
    }

    html.native-shell .custom-share-actions {
        gap: 14px;
        margin-top: 18px;
    }

    html.native-shell .field-error {
        font-size: 16px;
    }

    html.native-shell .cascade-hub-desc {
        max-width: 480px;
    }

    /* —— Splash / offline —— */
    html.native-shell .app-splash-logo {
        width: min(200px, 28vw);
    }

    html.native-shell .app-splash-bar {
        width: min(260px, 40vw);
        height: 8px;
    }

    html.native-shell .offline-splash {
        width: min(100%, 440px);
    }

    html.native-shell .offline-face {
        width: 120px;
        height: 120px;
        margin-bottom: 28px;
    }

    html.native-shell .offline-face svg {
        width: 72px;
        height: 72px;
    }

    html.native-shell .offline-title {
        font-size: var(--t-display);
    }

    html.native-shell .offline-desc {
        font-size: var(--t-body);
        margin-bottom: 32px;
    }

    html.native-shell .social-linked-row {
        min-height: 56px;
        font-size: var(--t-body);
        gap: 12px;
    }

    html.native-shell .social-btn-icon,
    html.native-shell .social-btn-icon svg {
        width: 24px;
        height: 24px;
    }

    html.native-shell .home-guest-auth-actions .home-create-account-btn {
        min-height: 56px;
        font-size: 16px;
    }

    html.native-shell .achievement-overlay-reward {
        font-size: 20px;
    }

    html.native-shell .settings-locale-row {
        gap: 16px;
        padding-top: 18px;
    }
}