@media(min-width:1500px) {
    .game-intro {
        padding-top:45px;
        padding-bottom:35px
    }
    .game-layout {
        gap:32px
    }
    .site-header {
        min-height:110px
    }
}
@media(max-width:1100px) {
    .game-layout {
        grid-template-columns:180px minmax(0,440px) 180px;
        gap:20px
    }
    .goal-card,.harvest-card,.achievement-teaser,.leaderboard-teaser {
        padding:18px 15px
    }
    .goal-card h2 {
        font-size:19px
    }
    .tip-card {
        padding:18px 15px
    }
    .fruit-journey,.below-game {
        margin-left:30px;
        margin-right:30px
    }
    .harvest-card h2 {
        font-size:21px
    }
    .footer-note {
        display:none
    }
}
@media(max-width:900px) {
    .game-layout {
        grid-template-columns:minmax(0,450px) 205px;
        gap:25px
    }
    .left-rail {
        display:none
    }
    .site-header nav {
        gap:14px;
        font-size:11px
    }
    .site-header {
        padding:18px 24px
    }
    .brand {
        font-size:24px
    }
    .player-button span {
        max-width:110px
    }
    .fruit-journey ol {
        gap:10px
    }
    .fruit-journey li span {
        font-size:8px
    }
    .fruit-journey li img {
        width:43px
    }
    .below-game {
        gap:35px
    }
    .board-help {
        font-size:8px
    }
}
@media(max-width:690px) {
    .site-header {
        min-height:76px;
        padding:14px 18px;
        gap:12px
    }
    .site-header {
        flex-wrap:wrap
    }
    .site-header nav {
        order:3;
        width:100%;
        margin:0;
        display:flex;
        gap:18px;
        overflow-x:auto;
        scrollbar-width:none;
        white-space:nowrap;
        padding-top:7px;
        border-top:1px solid var(--line)
    }
    .site-header nav::-webkit-scrollbar {
        display:none
    }
    .site-header nav a {
        flex:0 0 auto;
        padding:8px 0 10px
    }
    .brand {
        font-size:25px
    }
    .brand>img {
        width:34px
    }
    .brand small {
        font-size:6px;
        letter-spacing:1.5px
    }
    .header-actions {
        gap:8px;
        margin-left:auto
    }
    .header-actions .icon-button {
        width:38px;
        height:38px;
        font-size:21px
    }
    .player-button {
        padding:6px 8px;
        background:transparent;
        border:0;
        min-width:40px
    }
    .player-button span {
        display:none
    }
    .player-button img {
        width:29px;
        height:31px
    }
    .game-intro {
        padding:25px 14px 23px
    }
    .season-label {
        font-size:7px;
        letter-spacing:1.35px
    }
    .game-intro h1 {
        font-size:32px;
        letter-spacing:-1.1px
    }
    .game-intro p {
        font-size:11px;
        margin-top:10px
    }
    .game-layout {
        display:block;
        max-width:490px;
        padding:0 18px
    }
    .right-rail {
        display:none
    }
    .score-row {
        grid-template-columns:1fr 1fr 64px;
        gap:8px;
        margin-bottom:14px
    }
    .score-card {
        min-height:71px;
        padding:10px 15px
    }
    .score-card strong {
        font-size:27px
    }
    .score-card>span:first-child {
        font-size:7px
    }
    .board-shell {
        padding:10px;
        border-radius:20px
    }
    .board-topline {
        font-size:7px;
        padding-bottom:9px;
        letter-spacing:.7px
    }
    .board-topline>span:last-child {
        font-size:8px
    }
    .board-help {
        font-size:9px;
        padding-top:17px
    }
    .keyboard-hint {
        display:none
    }
    .touch-hint {
        display:inline
    }
    .power-bar {
        padding:9px
    }
    .power-label {
        font-size:7px
    }
    .power-button {
        font-size:11px;
        padding:8px 10px;
        min-height:44px
    }
    .mobile-tools {
        display:flex;
        justify-content:space-between;
        gap:6px;
        margin:15px 0 0
    }
    .mobile-tools button,.mobile-tools a {
        padding:10px 8px;
        font-size:10px;
        font-weight:600;
        min-height:44px;
        display:grid;
        place-items:center;
        flex:1;
        border:1px solid var(--line);
        border-radius:10px;
        background:#fffdf5
    }
    .fruit-journey {
        margin:30px 18px 0;
        padding:22px 0
    }
    .journey-title>span {
        display:none
    }
    .journey-title h2 {
        font-size:22px
    }
    .journey-title .eyebrow {
        font-size:7px
    }
    .fruit-journey ol {
        grid-template-columns:repeat(6,minmax(0,1fr));
        gap:20px 6px
    }
    .fruit-journey li:nth-child(6)::after {
        display:none
    }
    .fruit-journey li img {
        height:50px;
        width:47px
    }
    .fruit-journey li span {
        font-size:8px
    }
    .fruit-journey li:not(:last-child)::after {
        right:-5px
    }
    .below-game {
        display:block;
        margin:30px 22px
    }
    .below-game h2 {
        font-size:28px;
        margin-bottom:20px
    }
    .below-game .eyebrow {
        font-size:8px
    }
    .site-footer {
        padding:22px 20px;
        gap:20px;
        align-items:start;
        margin-top:30px
    }
    .site-footer nav {
        gap:12px;
        flex-wrap:wrap;
        justify-content:flex-end;
        font-size:9px
    }
    .footer-wordmark {
        font-size:17px
    }
    .footer-wordmark span {
        font-size:8px;
        white-space:nowrap
    }
    .page-wrap {
        padding:30px 18px 10px
    }
    .page-heading h1 {
        font-size:37px
    }
    .page-card {
        padding:18px
    }
    .leaderboard-row {
        grid-template-columns:26px minmax(0,1fr) 76px 44px;
        gap:8px;
        padding-left:2px;
        padding-right:2px
    }
    .ranking-player {
        gap:8px;
        min-width:0;
        font-size:10px
    }
    .ranking-player img {
        width:32px;
        height:34px;
        flex:0 0 32px
    }
    .ranking-player span {
        min-width:0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis
    }
    .ranking-score,.ranking-total,.ranking-team-players {
        font-size:13px
    }
    .ranking-fruit {
        height:30px;
        max-width:32px
    }
    .ranking-head {
        font-size:7px;
        letter-spacing:.45px
    }
    .team-ranking-row {
        grid-template-columns:26px minmax(0,1fr) 76px 54px
    }
    .ranking-team-name {
        gap:8px;
        min-width:0
    }
    .ranking-team-name img {
        width:30px;
        height:32px
    }
    .ranking-team-name strong {
        min-width:0;
        font-size:10px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis
    }
    .tabs {
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:3px;
        overflow:visible
    }
    .tabs button {
        min-width:0;
        padding:8px 4px;
        font-size:9px;
        line-height:1.15;
        white-space:normal
    }
    .step-cards {
        grid-template-columns:1fr
    }
    .toast-host {
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        max-width:none;
        margin:10px 16px 0;
        display:block
    }
    .toast {
        padding:11px 14px;
        border-radius:12px;
        font-size:11px;
        box-shadow:0 6px 20px #273e261f
    }
    .toast strong {
        font-size:12px
    }
    .dialog-heading h2 {
        font-size:27px
    }
    dialog {
        padding:22px;
        width:calc(100% - 24px);
        max-height:88dvh
    }
    .avatar-grid {
        grid-template-columns:repeat(4,1fr)
    }
    .stats-grid {
        gap:8px
    }
    .metric-card {
        padding:14px
    }
    .metric-card strong {
        font-size:21px
    }
    .achievement-row {
        padding:12px;
        gap:10px
    }
    .achievement-meta {
        font-size:8px
    }
    .welcome-overlay {
        padding:12px
    }
    .welcome-overlay>div {
        padding:22px 18px
    }
    .welcome-overlay h2 {
        font-size:29px
    }
}
@media(max-width:360px) {
    .game-intro h1 {
        font-size:28px
    }
    .season-label {
        font-size:6px
    }
    .game-layout {
        padding:0 12px
    }
    .board-grid {
        gap:7px
    }
    .tile {
        width:calc((100% - 21px)/4);
        height:calc((100% - 21px)/4)
    }
    .board-help {
        font-size:8px
    }
    .power-label {
        display:block
    }
    .score-card {
        padding:10px 12px
    }
    .fruit-journey {
        margin-left:15px;
        margin-right:15px
    }
    .journey-title h2 {
        font-size:20px
    }
    .welcome-overlay .eyebrow {
        font-size:7px
    }
    .welcome-overlay h2 {
        font-size:25px
    }
    .welcome-overlay p {
        font-size:10px
    }
    .welcome-overlay small {
        font-size:8px
    }
    .board-topline {
        font-size:6px
    }
}
@media(max-height:500px) and (orientation:landscape) {
    .game-intro {
        padding:15px
    }
    .game-intro h1 {
        font-size:28px
    }
    .game-layout {
        max-width:430px;
        display:block
    }
    .right-rail,.left-rail {
        display:none
    }
    .board-shell {
        max-width:310px;
        margin:auto
    }
    .score-row {
        max-width:310px;
        margin:0 auto 12px
    }
    dialog {
        max-height:90dvh
    }
    .fruit-journey {
        margin-top:25px
    }
}

@media (max-width: 760px) {
    .power-bar {
        gap:5px;
        padding:8px 7px 9px;
        width:100%;
        max-width:100%;
        min-width:0;
        overflow:hidden
    }
    .power-bar .power-label {
        display:block;
        margin-bottom:1px
    }
    .power-button {
        padding:8px 5px;
        gap:4px;
        overflow:hidden
    }
    .power-button b {
        flex:0 0 auto;
        margin-left:1px
    }
    .power-button-label {
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis
    }
    .power-button-label-full {
        display:none
    }
    .power-button-label-short {
        display:inline
    }
}
@media (max-width: 420px) {
    .power-bar {
        gap:4px;
        padding-left:6px;
        padding-right:6px
    }
    .power-button {
        font-size:10px;
        padding:7px 3px;
        gap:2px;
        min-width:0
    }
    .power-button>span:first-child {
        font-size:16px
    }
    .power-button b {
        min-width:18px;
        width:18px;
        height:18px;
        font-size:9px
    }
}


@media (max-width: 820px) {
    .share-invite {grid-template-columns:1fr;gap:18px;padding:24px;width:min(100% - 28px, 700px);}
    .share-actions {justify-content:flex-start;}
}
@media (max-width: 520px) {
    .share-invite {margin:24px auto 38px;padding:20px 16px;border-radius:20px;}
    .share-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;}
    .share-button {width:100%;padding-inline:8px;overflow:hidden;text-overflow:ellipsis;}
    .share-actions.compact {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
}

.player-button.has-character-avatar img {
    width:34px;
    height:34px;
}
@media (max-width: 700px) {
    .player-button.has-character-avatar {
        padding:4px;
        min-width:42px;
    }
    .player-button.has-character-avatar img {
        width:30px;
        height:30px;
        border-width:1px;
    }
}

@media (max-width: 690px) {
    .picnic-basket-button {
        grid-template-columns:82px minmax(0,1fr) auto;
        min-height:106px;
        gap:12px;
        padding:10px 11px 10px 9px;
    }
    .picnic-basket-art {
        width:82px;
        height:76px;
    }
    .picnic-basket-art img {
        width:78px;
        height:68px;
    }
    .picnic-basket-copy>strong {
        font-size:20px;
    }
    .picnic-basket-copy>small {
        font-size:9px;
    }
    .picnic-basket-preview {
        gap:4px;
        margin-top:7px;
    }
    .basket-preview-chip {
        padding:3px 5px;
        gap:3px;
        min-height:23px;
    }
    .basket-preview-chip span {
        display:none;
    }
    .picnic-basket-open {
        display:none;
    }
    .picnic-basket-total small {
        display:none;
    }
    .picnic-basket-count {
        min-width:38px;
        height:38px;
        font-size:13px;
    }
    dialog.basket-dialog {
        width:calc(100% - 22px);
        padding:20px 16px;
        border-radius:20px;
    }
    .basket-overlay-intro {
        grid-template-columns:92px minmax(0,1fr);
        gap:14px;
        padding:15px;
        margin-bottom:19px;
    }
    .basket-overlay-art {
        min-height:84px;
    }
    .basket-overlay-art img {
        width:88px;
        height:75px;
    }
    .basket-overlay-copy h3 {
        font-size:23px;
    }
    .basket-overlay-copy p {
        font-size:10px;
    }
    .basket-summary span:nth-child(3) {
        display:none;
    }
    .basket-power-grid {
        grid-template-columns:1fr;
        gap:9px;
    }
    .basket-power-card {
        display:grid;
        grid-template-columns:58px minmax(0,1fr) 86px;
        grid-template-rows:auto auto;
        min-height:0;
        gap:9px 12px;
        padding:12px;
        align-items:center;
    }
    .basket-power-top {
        display:contents;
    }
    .basket-power-icon {
        grid-row:1 / 3;
        width:54px;
        height:54px;
        font-size:24px;
    }
    .basket-power-status {
        grid-column:3;
        grid-row:1;
        align-items:flex-end;
    }
    .basket-power-count {
        min-width:32px;
        height:32px;
        font-size:12px;
    }
    .basket-power-copy {
        grid-column:2;
        grid-row:1 / 3;
    }
    .basket-power-copy h3 {
        font-size:18px;
        margin-bottom:3px;
    }
    .basket-power-copy p {
        font-size:10px;
        margin-bottom:4px;
    }
    .basket-power-use {
        grid-column:3;
        grid-row:2;
        min-width:0;
        min-height:36px;
        margin:0;
        padding:7px 9px;
        font-size:10px;
    }
    .basket-inventory-footnote {
        align-items:flex-start;
    }
}

@media (max-width: 450px) {
    .picnic-basket-button {
        grid-template-columns:70px minmax(0,1fr) auto;
        min-height:94px;
    }
    .picnic-basket-art {
        width:70px;
        height:66px;
    }
    .picnic-basket-art img {
        width:68px;
        height:60px;
    }
    .picnic-basket-kicker {
        font-size:7px;
        letter-spacing:1px;
    }
    .picnic-basket-copy>strong {
        font-size:18px;
    }
    .picnic-basket-copy>small {
        display:none;
    }
    .basket-preview-chip>b {
        width:15px;
        height:15px;
        font-size:9px;
    }
    .basket-preview-chip em {
        min-width:16px;
        height:16px;
        font-size:8px;
    }
    .basket-overlay-intro {
        grid-template-columns:1fr;
        text-align:center;
    }
    .basket-overlay-art {
        display:none;
    }
    .basket-summary {
        justify-content:center;
    }
    .basket-section-heading {
        align-items:flex-start;
    }
    .basket-section-heading>span {
        display:none;
    }
    .basket-power-card {
        grid-template-columns:48px minmax(0,1fr) 74px;
        gap:8px 9px;
    }
    .basket-power-icon {
        width:46px;
        height:46px;
        font-size:21px;
    }
    .basket-power-copy p {
        display:none;
    }
    .basket-power-note {
        font-size:8px;
    }
    .basket-inventory-footnote {
        flex-direction:column;
        gap:7px;
    }
}

/* Compact Fruit Basket on small screens */
@media (max-width:700px) {
    .picnic-basket-bar {
        margin-top:6px;
    }
    .picnic-basket-button {
        grid-template-columns:48px auto 30px;
        gap:8px;
        min-width:184px;
        min-height:56px;
        padding:5px 8px 5px 6px;
        border-radius:16px;
    }
    .picnic-basket-art {
        width:48px;
        height:44px;
    }
    .picnic-basket-art img {
        width:46px;
        height:42px;
    }
    .picnic-basket-copy>strong {
        font-size:16px;
    }
    .picnic-basket-count {
        min-width:28px;
        height:28px;
        padding:0 6px;
        font-size:11px;
    }
}
/* Extra-small phones (iPhone 16e class and below) */
@media (max-width:470px) {
    .site-header {
        padding:12px 14px 10px;
        gap:8px;
    }
    .brand {
        font-size:22px;
        letter-spacing:-1px;
        gap:6px;
    }
    .brand > img {
        width:30px;
        height:32px;
    }
    .brand small {
        font-size:5.5px;
        letter-spacing:1.15px;
        margin-top:5px;
    }
    .header-actions {
        gap:5px;
    }
    .header-actions .icon-button {
        width:36px;
        height:36px;
    }
    .player-button,
    .player-button.has-character-avatar {
        min-width:38px;
        padding:3px;
    }
    .site-header nav {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        width:100%;
        gap:0 8px;
        overflow:visible;
        padding-top:6px;
        white-space:normal;
    }
    .site-header nav a {
        min-width:0;
        padding:7px 2px 9px;
        text-align:center;
        font-size:10px;
        line-height:1.2;
    }
    .site-header nav a[aria-current=page]::after {
        bottom:3px;
        width:18px;
    }
}