/* Keep the existing phone layout, including short landscape phones. */
[data-avatar-tablet-only] { display: none; }

@media (min-width: 761px) and (min-height: 521px), (min-width: 1001px) {
    body[data-avatar-tablet] #studentAvatarLabMount:has(:is(.game-skin-shop, .economy-avatar-lab)) {
        --avatar-fit-enabled: 1;
        --avatar-paper: #fff5dc;
        --avatar-line: #d5ae75;
        --avatar-ink: #4b2d16;
        --avatar-selected: #dcecff;
        --avatar-blue: #246cc2;
        min-width: 0;
        padding: clamp(10px, 1.5vw, 22px);
        border: 5px ridge #b88442;
        border-radius: 20px;
        background: linear-gradient(145deg, #fff8e7, #f8e4bb);
        color: var(--avatar-ink);
    }

    body[data-avatar-tablet] [data-avatar-tablet-only] { display: revert; }
    body[data-avatar-tablet] :is(.avatar-legacy-title, .avatar-legacy-reset) { display: none; }
    body[data-avatar-tablet] .game-skin-navigation { margin: 0 0 10px; }
    body[data-avatar-tablet] .game-skin-navigation a[href*="view=skins"] { order: -1; }
    body[data-avatar-tablet] .game-skin-navigation a[aria-current] {
        border-color: var(--avatar-blue); background: var(--avatar-selected); color: #123c76;
    }
    body[data-avatar-tablet] .game-skin-shop {
        padding: 0; border: 0; background: none;
    }
    body[data-avatar-tablet] .game-skin-tablet-header {
        display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
        gap: 6px 12px; margin-bottom: 10px;
    }
    body[data-avatar-tablet] .game-skin-tablet-header h2 { margin: 0; font-size: clamp(24px, 3vw, 36px); }
    body[data-avatar-tablet] .game-skin-shop > header { display: none; }
    body[data-avatar-tablet] .game-skin-quote > div {
        padding: 6px 8px; text-align: center; border-radius: 8px; background: #fff1cd;
    }
    body[data-avatar-tablet] .game-skin-wallet { display: inline-flex; align-items: center; gap: 6px; }
    body[data-avatar-tablet] .game-skin-wallet img { width: 23px; height: 23px; }
    body[data-avatar-tablet] .game-skin-tabs { margin: 8px 0 12px; }
    body[data-avatar-tablet] .game-skin-layout { grid-template: "preview" auto "catalog" auto / minmax(0, 1fr); gap: 12px; }
    body[data-avatar-tablet] .game-skin-preview { grid-area: preview; position: static; }
    body[data-avatar-tablet] .game-skin-grid { grid-area: catalog; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-avatar-tablet] .game-skin-stage {
        height: clamp(156px, 33cqi, 330px);
        background: #e7efce url("/avatar-lab/background/picnic-meadow.png") center / cover;
    }
    body[data-avatar-tablet] .game-skin-card-art { height: clamp(88px, 17cqi, 170px); }
    body[data-avatar-tablet] .game-skin-card-status { border-radius: 99px; background: #fff1cd; padding: 4px 7px; }
    body[data-avatar-tablet] [data-game-skin-equipped] { background: #e4f2ce; color: #296323; }
    body[data-avatar-tablet] .game-skin-equipped-summary { padding: 7px 10px; border-radius: 8px; background: #f7ebce; }

    body.student-economy-shell-page[data-avatar-tablet] .economy-avatar-workshop-header {
        order: -1; margin: 0 0 8px; padding: 0; min-height: 0;
        border: 0; box-shadow: none; background: none;
    }
    body[data-avatar-tablet] .economy-avatar-lab { display: flex; flex-direction: column; min-width: 0; gap: 4px; color: var(--avatar-ink); }
    body[data-avatar-tablet] .economy-avatar-workshop-title h3 { color: var(--avatar-ink); }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store.economy-avatar-shop-shell {
        min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; filter: none;
    }
    body[data-avatar-tablet] .avatar-store:has([data-tab="editor"][aria-pressed="true"]) .avatar-store-history { display: none; }
    body[data-avatar-tablet] .avatar-store-tabs button {
        border: 1px solid var(--avatar-line); border-radius: 8px; line-height: 1.2;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store-tabs button[aria-pressed="true"] {
        background: var(--avatar-selected); border-color: var(--avatar-blue); color: #123c76;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store-merch:has(.avatar-store-preview) {
        grid-template: "preview" auto "catalog" auto / minmax(0, 1fr);
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store .avatar-store-preview { display: block; }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store-merch[data-store-preview-open] .avatar-store-catalog { display: grid; }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store .avatar-store-list-back { display: none; }
    body[data-avatar-tablet] .avatar-store-preview { grid-area: preview; }
    body[data-avatar-tablet] .avatar-store-catalog {
        grid-area: catalog; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px;
    }
    body[data-avatar-tablet] .avatar-store-catalog > :is(.avatar-store-grid, .economy-button) { grid-column: 1 / -1; }
    body[data-avatar-tablet] .avatar-store-catalog h4 { margin: 0; }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store .avatar-store-scene { height: clamp(156px, 31cqi, 340px); }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store .avatar-store-card-picture { height: clamp(76px, 15cqi, 148px); }
    body[data-avatar-tablet] .avatar-store-card-picture :is(.economy-avatar-shop-look, .avatar-store-badge),
    body[data-avatar-tablet] .avatar-store-caption { display: none; }
    body[data-avatar-tablet] .avatar-tablet-item-art { width: 82%; height: 92%; position: absolute; object-fit: contain; }
    body[data-avatar-tablet] .avatar-store .avatar-store-card {
        background: var(--avatar-paper); border: 1px solid var(--avatar-line); border-radius: 12px; box-shadow: none;
    }

    body[data-avatar-tablet] .economy-avatar-shop-look { --avatar-fit-body: 67cqh; --avatar-fit-hat: 32cqh; --dragon-layer-size: var(--avatar-fit-body); }
    body[data-avatar-tablet] .economy-avatar-shop-look .economy-avatar-lab-layer--character {
        width: var(--avatar-fit-body); height: var(--avatar-fit-body);
    }
    body[data-avatar-tablet] :is([data-avatar-stage="editor"], .economy-avatar-profile-stage) {
        --avatar-fit-body: 184px;
    }
    body[data-avatar-tablet] :is([data-avatar-stage="editor"], .economy-avatar-profile-stage) .economy-avatar-lab-layer--character {
        width: var(--avatar-fit-body); height: var(--avatar-fit-body);
    }
    body[data-avatar-tablet] [data-avatar-tablet-head-fit] {
        --avatar-tablet-fit: 1;
        --avatar-fitted-body: calc(var(--avatar-fit-body, 184px) * var(--avatar-anchor-scale, 1));
        left: calc(50% + var(--avatar-anchor-x, 0) * 1%);
        /* Seat the cap brim just below the chick's tuft, using the actual asset boxes. */
        top: calc(50% + var(--avatar-anchor-y, 0) * 1% - var(--avatar-fitted-body) * .27
            - var(--avatar-fit-hat, 86px) * var(--avatar-scale) * .43);
    }
    body[data-avatar-tablet] [data-avatar-tablet-head-fit][data-avatar-layer-id="hat_game_sprout_pin"] {
        left: calc(50% + var(--avatar-anchor-x, 0) * 1% + var(--avatar-fitted-body) * .16);
        top: calc(50% + var(--avatar-anchor-y, 0) * 1% - var(--avatar-fitted-body) * .30);
    }

    body.student-economy-shell-page[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-workshop-layout {
        grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 8px;
    }
    body.student-economy-shell-page[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-workshop-layout > .economy-avatar-wallet-panel { display: none; }
    body[data-avatar-tablet] :is(.economy-avatar-editor-main, .economy-avatar-side-panel) {
        min-width: 0; padding: 10px; border: 1px solid var(--avatar-line);
        border-radius: 12px; background: var(--avatar-paper); gap: 8px;
    }
    body.student-economy-shell-page[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-side-panel {
        grid-template-columns: minmax(0, 1fr); align-items: start;
    }
    body[data-avatar-tablet] :is(.economy-avatar-profile-stage, .economy-avatar-lab-stage--full) .economy-avatar-lab-layer.is-active {
        outline: none;
    }
    body[data-avatar-tablet] .economy-avatar-editor-main h4,
    body[data-avatar-tablet] .avatar-tablet-editor-items h4 { margin: 0 0 4px; }
    body.student-economy-shell-page[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-stage-frame { min-height: 0; border-radius: 12px; filter: none; }
    body.student-economy-shell-page[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-stage-frame .economy-avatar-lab-stage {
        height: clamp(190px, 30vw, 340px); border-radius: 12px; --dragon-layer-size: 184px;
    }
    body[data-avatar-tablet] .economy-avatar-stage-frame .economy-avatar-lab-bg-img { border-radius: inherit; }
    body.student-economy-shell-page[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-lab .economy-avatar-editor-tools {
        margin: 0; padding: 8px; grid-template-columns: minmax(0, 1fr) auto; box-shadow: none;
    }
    body[data-avatar-tablet] .economy-avatar-editor-buttons { grid-row: 2; grid-column: 1 / -1; }
    body[data-avatar-tablet] .economy-avatar-editor-buttons .economy-button { min-height: 44px; }
    body[data-avatar-tablet] [data-avatar-transform-saved] { color: #296323; text-align: end; }
    body[data-avatar-tablet] [data-avatar-scale-label] { grid-column: 2; grid-row: 1; }
    body[data-avatar-tablet] .economy-avatar-side-panel .economy-avatar-profile-preview {
        display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; align-items: center; gap: 7px;
        width: 100%; aspect-ratio: auto; min-height: 0; padding: 6px; filter: none;
        border: 1px solid var(--avatar-line); border-radius: 10px; background: #fff9e9;
    }
    body[data-avatar-tablet] .economy-avatar-profile-preview > :is(span, em, b) {
        position: relative; inset: auto; transform: none; width: auto; margin: 0;
    }
    body[data-avatar-tablet] .economy-avatar-profile-preview > b { width: 70px; border-width: 2px; }
    body[data-avatar-tablet] .avatar-tablet-equipped { padding: 8px; border: 1px solid var(--avatar-line); border-radius: 8px; }
    body[data-avatar-tablet] .avatar-tablet-equipped summary { cursor: pointer; font-weight: 750; }
    body[data-avatar-tablet] .avatar-tablet-item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
    body[data-avatar-tablet] .avatar-tablet-editor-items :is(select, button) {
        min-height: 44px; padding: 5px; color: inherit; font: inherit; background: #fff9eb;
        border: 1px solid var(--avatar-line); border-radius: 8px;
    }
    body[data-avatar-tablet] .avatar-tablet-item-grid button { display: grid; place-items: center; gap: 3px; min-height: 66px; }
    body[data-avatar-tablet] .avatar-tablet-item-grid button[aria-pressed="true"] { border-color: var(--avatar-blue); background: var(--avatar-selected); }
    body[data-avatar-tablet] .avatar-tablet-item-grid img { width: 100%; height: 56px; object-fit: contain; }
    body.student-economy-shell-page[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-public-actions { margin: 0; padding: 0; width: 100%; }
    body[data-avatar-tablet] .economy-avatar-full-card {
        max-height: calc(100dvh - 36px); overflow: auto; padding-top: 48px;
        border-color: var(--avatar-line); border-radius: 16px; background: var(--avatar-paper);
    }
}

@media (min-width: 1000px) and (orientation: landscape) and (min-height: 521px) {
    body[data-avatar-tablet] .game-skin-layout,
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store-merch:has(.avatar-store-preview) {
        grid-template: "preview catalog" auto / minmax(0, 1.04fr) minmax(0, 1fr);
    }
    body.student-economy-shell-page[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-workshop-layout {
        grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
    }
    body[data-avatar-tablet] .economy-avatar-full-card {
        width: min(880px, 100%); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center;
    }
    body[data-avatar-tablet] .game-skin-stage { height: clamp(156px, 25cqi, 340px); }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store .avatar-store-scene { height: clamp(156px, 24cqi, 340px); }
    body[data-avatar-tablet] .game-skin-card-art { height: clamp(76px, 14cqi, 145px); }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store .avatar-store-card-picture { height: clamp(68px, 12cqi, 135px); }
    body.student-economy-shell-page[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-stage-frame .economy-avatar-lab-stage { height: clamp(190px, 27vw, 340px); }
}

@media (min-width: 761px) and (orientation: portrait) {
    body[data-avatar-tablet] .game-skin-preview {
        display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr);
        gap: 8px 12px; align-items: start;
    }
    body[data-avatar-tablet] .game-skin-preview h3 { grid-column: 1 / -1; margin: 0; }
    body[data-avatar-tablet] .game-skin-stage { height: clamp(150px, 30cqi, 240px); }
    body[data-avatar-tablet] .game-skin-preview-controls { min-width: 0; }
    body[data-avatar-tablet] .game-skin-directions { margin: 0; }
    body[data-avatar-tablet] .game-skin-preview-controls p { margin: 6px 0; font-size: .84rem; }
    body[data-avatar-tablet] .game-skin-quote { flex-wrap: nowrap; gap: 4px; margin: 8px 0; padding-top: 6px; }
    body[data-avatar-tablet] .game-skin-quote > div { min-width: 0; padding: 4px; overflow-wrap: anywhere; }
    body[data-avatar-tablet] .game-skin-card-art { height: clamp(82px, 15cqi, 136px); }

    body[data-avatar-tablet][data-balanced-avatar-shop] .student-economy-main-shell:has(.economy-avatar-lab) {
        scrollbar-gutter: stable;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-lab {
        container-type: inline-size;
    }
    body.student-economy-shell-page[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-workshop-header {
        gap: 6px 10px; margin-bottom: 4px;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-header-badges > span,
    body[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-header-badges .economy-avatar-tutorial-button {
        min-height: 44px; padding: 4px 7px; border-radius: 9px; box-shadow: none;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-tutorial-button span {
        min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; font-size: .8rem;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-tutorial-button {
        column-gap: 5px;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store :is(.avatar-store-preview, .avatar-store-catalog) {
        padding: 10px; border-radius: 12px;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store .avatar-store-scene {
        height: clamp(194px, 43cqi, 290px);
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store-scene .economy-avatar-shop-look {
        --avatar-fit-body: 84cqh;
        --avatar-fit-hat: 37cqh;
        --cap-layer-width: var(--avatar-fit-hat);
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store-scene .economy-avatar-lab-layer--headgear {
        width: var(--avatar-fit-hat); height: var(--avatar-fit-hat);
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] [data-profile-body-preview] .economy-avatar-lab-layer:not([data-avatar-slot="character"]) {
        display: none;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store-preview .avatar-store-usage {
        text-align: center;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store .avatar-store-buy {
        grid-template-columns: minmax(0, 1fr) minmax(116px, .48fr); align-items: center; gap: 6px 10px;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store-money {
        grid-column: 1 / -1;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store .avatar-store-card-picture {
        height: clamp(84px, 18cqi, 128px);
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-store .avatar-store-card {
        padding: 6px;
    }

    body[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-workshop-layout {
        position: relative;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-editor-main h4 {
        display: flex; align-items: center; min-height: 44px; margin: 0; padding-inline-end: 120px;
    }
    body.student-economy-shell-page[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-stage-frame .economy-avatar-lab-stage {
        height: clamp(196px, 44cqi, 300px);
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] :is([data-avatar-stage="editor"], .economy-avatar-profile-stage) {
        --avatar-fit-body: clamp(170px, 39cqi, 262px);
        --avatar-fit-hat: calc(var(--avatar-fit-body) * .4674);
        --cap-layer-width: calc(var(--avatar-fit-body) * .6848);
        --dragon-layer-size: var(--avatar-fit-body);
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] :is([data-avatar-stage="editor"], .economy-avatar-profile-stage) .economy-avatar-lab-layer--headgear {
        width: var(--cap-layer-width); height: var(--avatar-fit-hat);
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] :is(.avatar-store-scene, [data-avatar-stage="editor"], .economy-avatar-profile-stage) .economy-avatar-lab-layer {
        translate: 0 -12px;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-side-panel .economy-avatar-profile-preview {
        position: absolute; z-index: 3; inset: 11px 11px auto auto;
        display: flex; width: auto; min-height: 44px; padding: 2px 7px 2px 2px;
        border-radius: 9px; box-shadow: none;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-profile-preview > span {
        display: none;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-profile-preview > b {
        width: 38px; height: 38px; box-shadow: none;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-editor-buttons {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-tablet-editor-items {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-tablet-item-grid {
        grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .avatar-tablet-item-grid button {
        min-width: 0; overflow-wrap: anywhere;
    }
    body.student-economy-shell-page[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-public-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 6px;
    }
    body[data-avatar-tablet][data-balanced-avatar-shop] .economy-avatar-public-actions > :is(p, .economy-avatar-public-state) {
        grid-column: 1 / -1;
    }
}