/* UI mobile - activee sur m.foxbox.* ou sur petits ecrans tactiles via html.foxbox-mobile */

html.foxbox-mobile,
html.foxbox-mobile body {
    --bottom-nav-height: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    --content-bottom-reserve: calc(var(--bottom-nav-height) + 0.9rem);
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
    inset: 0;
    touch-action: manipulation;
    background: #050608;
}

html.foxbox-mobile body {
    -webkit-overflow-scrolling: touch;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

html.foxbox-mobile input,
html.foxbox-mobile textarea,
html.foxbox-mobile button,
html.foxbox-mobile select {
    font-size: 16px;
}

html.foxbox-mobile button,
html.foxbox-mobile [role="button"],
html.foxbox-mobile .cursor-pointer {
    touch-action: manipulation;
}

html.foxbox-mobile .hidden {
    display: none !important;
}

html.foxbox-mobile .app-shell {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    max-width: 100%;
    background:
        radial-gradient(circle at 50% -18%, rgba(120, 52, 18, 0.72), transparent 35%),
        linear-gradient(180deg, #090a0e 0%, #050608 100%) !important;
}

html.foxbox-mobile .app-inner {
    width: 100%;
    max-width: 100%;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

html.foxbox-mobile .app-header {
    flex-shrink: 0;
    z-index: 70 !important;
    border-bottom-color: rgba(234, 88, 12, 0.14) !important;
    background: rgba(7, 8, 12, 0.94) !important;
}

html.foxbox-mobile .app-header .app-inner {
    min-height: 3.75rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    gap: 0.65rem !important;
}

html.foxbox-mobile .app-header .font-mystic {
    letter-spacing: 0.12em;
}

html.foxbox-mobile #main-nav {
    display: none !important;
}

html.foxbox-mobile #balance-container {
    display: flex !important;
    gap: 0.55rem !important;
}

html.foxbox-mobile #profile-xp-circle {
    width: 2.75rem !important;
    height: 2.75rem !important;
}

html.foxbox-mobile #profile-xp-level {
    font-size: 0.75rem !important;
}

html.foxbox-mobile #auth-header-username {
    display: none !important;
}

html.foxbox-mobile #balance-container > div:last-child {
    align-items: flex-end !important;
}

html.foxbox-mobile #balance {
    font-size: 0.72rem !important;
    white-space: nowrap;
}

html.foxbox-mobile .app-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding-top: 0.9rem !important;
    padding-bottom: var(--content-bottom-reserve) !important;
    scroll-padding-bottom: var(--content-bottom-reserve);
    max-width: 100%;
}

html.foxbox-mobile footer {
    display: none !important;
}

/* Navigation basse */
html.foxbox-mobile #mobile-nav {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 75;
    margin: 0;
    min-height: var(--bottom-nav-height);
    padding: 0.35rem 0.65rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(251, 146, 60, 0.18);
    background: linear-gradient(180deg, rgba(14, 16, 22, 0.9), rgba(5, 6, 8, 0.98));
    box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(18px);
}

html.foxbox-mobile #mobile-nav.hidden {
    display: none !important;
}

html.foxbox-mobile #mobile-nav > div {
    gap: 0.35rem;
}

html.foxbox-mobile .nav-tab--mobile {
    min-height: 3.25rem;
    border-radius: 1rem;
    gap: 0.2rem;
    color: #7d8594;
    letter-spacing: 0.08em;
}

html.foxbox-mobile .nav-tab--mobile .nav-tab-icon {
    font-size: 1.15rem;
}

html.foxbox-mobile .nav-tab--mobile.tab-active {
    color: #0b0c10;
    background: linear-gradient(135deg, #ea580c, #fbbf24);
    box-shadow: 0 8px 22px rgba(234, 88, 12, 0.24);
}

/* Vues principales */
html.foxbox-mobile #view-logged-out {
    min-height: calc(100dvh - 9rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

html.foxbox-mobile #view-temple,
html.foxbox-mobile #view-inventory,
html.foxbox-mobile #view-profile {
    width: 100%;
    max-width: 100% !important;
}

html.foxbox-mobile #view-temple {
    align-items: stretch !important;
    overflow-x: hidden;
    max-width: 100%;
    padding-bottom: 0.75rem !important;
}

html.foxbox-mobile #view-temple > .text-center {
    margin-bottom: 1rem !important;
}

html.foxbox-mobile #view-temple h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: 0.95 !important;
}

html.foxbox-mobile #daily-entry-container {
    width: 100%;
    margin-bottom: 1rem !important;
}

html.foxbox-mobile .daily-entry-button {
    width: 100%;
    justify-content: center;
    border-radius: 1rem !important;
    padding: 0.85rem 1rem !important;
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.13), rgba(17, 19, 26, 0.92));
}

html.foxbox-mobile #view-temple .spinner-shadow {
    margin-bottom: 1.1rem !important;
    padding: 0.75rem !important;
    border-radius: 1.1rem !important;
    max-width: 100%;
    overflow: hidden;
}

html.foxbox-mobile #view-temple > section {
    margin-bottom: 1rem !important;
    padding: 0.9rem !important;
    border-radius: 1rem !important;
}

html.foxbox-mobile #view-temple > section .flex {
    gap: 0.8rem !important;
}

html.foxbox-mobile #view-temple > section h2 {
    font-size: 1rem !important;
    line-height: 1.15 !important;
}

html.foxbox-mobile #view-temple > section p {
    line-height: 1.35 !important;
}

html.foxbox-mobile #spinner-container {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    max-width: 100%;
}

html.foxbox-mobile #spinner-track .w-36 {
    width: 6.4rem !important;
}

html.foxbox-mobile #spinner-track .h-52 {
    height: 9.5rem !important;
}

html.foxbox-mobile #open-btn,
html.foxbox-mobile #auth-submit-btn,
html.foxbox-mobile #save-username-btn,
html.foxbox-mobile #save-bio-btn,
html.foxbox-mobile #privacy-save-pass-btn,
html.foxbox-mobile #logout-btn {
    min-height: 3rem;
    border-radius: 1rem !important;
}

html.foxbox-mobile #view-temple > .max-w-xs:last-child {
    margin-bottom: 0.75rem !important;
}

/* Collection */
html.foxbox-mobile #view-inventory > .flex:first-child {
    gap: 0.7rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.85rem !important;
}

html.foxbox-mobile #view-inventory h2 {
    font-size: 1.45rem !important;
}

html.foxbox-mobile #inventory-count {
    width: fit-content;
    max-width: 100%;
    padding: 0.55rem 0.75rem !important;
    border-radius: 0.85rem !important;
}

html.foxbox-mobile #view-inventory > .grid {
    margin-bottom: 1rem !important;
    gap: 0.85rem !important;
}

html.foxbox-mobile #view-inventory > .grid > div:first-child {
    padding: 0.85rem !important;
    border-radius: 1rem !important;
}

html.foxbox-mobile #inventory-view-tabs {
    gap: 0.35rem !important;
    margin-bottom: 0.85rem !important;
    top: 0;
    border-radius: 0.95rem !important;
    padding: 0.35rem !important;
    background: rgba(7, 9, 13, 0.94) !important;
}

html.foxbox-mobile .inventory-view-tab {
    min-height: 2.55rem;
    padding: 0.55rem 0.25rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
    letter-spacing: 0.08em !important;
}

html.foxbox-mobile #inventory-pins-section,
html.foxbox-mobile #inventory-collections-section,
html.foxbox-mobile #inventory-achievements-section {
    width: 100%;
    min-width: 0;
}

html.foxbox-mobile #collection-filters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem !important;
    position: sticky;
    top: 0;
    z-index: 15;
    padding: 0.35rem 0;
    background: linear-gradient(180deg, #08090c 70%, rgba(8, 9, 12, 0));
}

html.foxbox-mobile .collection-filter {
    min-height: 2.55rem;
    padding: 0.55rem 0.35rem !important;
    border-radius: 0.85rem !important;
    letter-spacing: 0.08em !important;
}

html.foxbox-mobile #inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    padding-bottom: 0.5rem;
}

html.foxbox-mobile .pin-card {
    min-height: 10.75rem !important;
    border-radius: 0.95rem !important;
}

html.foxbox-mobile .pin-card::before,
html.foxbox-mobile .pin-card::after {
    border-radius: 0.95rem !important;
}

html.foxbox-mobile .pin-card-art-wrap {
    min-height: 6.4rem !important;
    padding: 0.7rem 0.45rem 0.25rem !important;
}

html.foxbox-mobile .pin-card-art {
    max-height: 5.65rem !important;
}

html.foxbox-mobile .pin-card-art-emoji {
    font-size: 2.65rem !important;
}

html.foxbox-mobile .pin-card-meta {
    padding: 0 0.5rem 0.55rem !important;
}

html.foxbox-mobile .pin-card-name {
    font-size: 0.62rem !important;
    line-height: 1.18 !important;
    margin-bottom: 0.32rem !important;
}

html.foxbox-mobile .pin-card-rarity {
    font-size: 0.46rem !important;
    padding: 0.18rem 0.42rem !important;
    letter-spacing: 0.08em !important;
}

html.foxbox-mobile [data-craft-pin] {
    min-height: 2.2rem;
    margin-top: 0.45rem !important;
    border-radius: 0.7rem !important;
    font-size: 0.62rem !important;
}

/* Profil */
html.foxbox-mobile #view-profile > .bg-gradient-to-b {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: 1.1rem !important;
}

html.foxbox-mobile #view-profile > .bg-gradient-to-b > .flex {
    gap: 1rem !important;
    align-items: center !important;
}

html.foxbox-mobile #profile-avatar {
    object-fit: cover;
}

html.foxbox-mobile #view-profile .w-32.h-32 {
    width: 5.5rem !important;
    height: 5.5rem !important;
    border-width: 3px !important;
}

html.foxbox-mobile #profile-username {
    max-width: 90vw;
    font-size: 1.35rem !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
}

html.foxbox-mobile #profile-code-ami {
    max-width: 88vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.foxbox-mobile #view-profile .grid.grid-cols-2.gap-4.flex-1 {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
}

html.foxbox-mobile #view-profile .grid.grid-cols-2.gap-4.flex-1 > div {
    padding: 0.8rem !important;
    border-radius: 0.95rem !important;
}

html.foxbox-mobile #profile-level,
html.foxbox-mobile #profile-balance,
html.foxbox-mobile #profile-invocations,
html.foxbox-mobile #profile-days,
html.foxbox-mobile #profile-daily-streak,
html.foxbox-mobile #profile-fragments {
    font-size: 1.45rem !important;
    line-height: 1.1 !important;
    word-break: break-word;
}

html.foxbox-mobile #view-profile > .flex.gap-2 {
    margin-bottom: 0.85rem !important;
    gap: 0.35rem !important;
    padding-bottom: 0.35rem;
    scrollbar-width: none;
}

html.foxbox-mobile #view-profile > .flex.gap-2::-webkit-scrollbar {
    display: none;
}

html.foxbox-mobile #view-profile > .flex.gap-2 button {
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0.65rem 0.85rem !important;
    border-radius: 0.85rem !important;
    border: 1px solid rgba(55, 65, 81, 0.65) !important;
    background: rgba(17, 19, 26, 0.72);
    font-size: 0.68rem !important;
    white-space: nowrap;
}

html.foxbox-mobile #view-profile > .bg-\[\#11131a\] {
    min-height: 0 !important;
    padding: 1rem !important;
    border-radius: 1.1rem !important;
}

html.foxbox-mobile #subview-general .max-w-md,
html.foxbox-mobile #subview-privacy .max-w-md,
html.foxbox-mobile #social-link-container {
    max-width: 100% !important;
}

html.foxbox-mobile #badges-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}

html.foxbox-mobile #mega-achievements-container,
html.foxbox-mobile #system-achievements-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}

html.foxbox-mobile .profile-badge-card {
    min-height: 9.25rem;
    padding: 0.75rem !important;
}

html.foxbox-mobile .profile-badge-art {
    width: 4.65rem;
    height: 4.65rem;
}

html.foxbox-mobile #message-input-area {
    flex-direction: column;
}

html.foxbox-mobile #send-message-btn {
    min-height: 2.7rem;
}

/* Battle-pass quotidien */
html.foxbox-mobile .daily-pass-track {
    display: flex !important;
    gap: 0.7rem !important;
    overflow-x: auto;
    padding: 0.25rem 0.1rem 0.8rem !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

html.foxbox-mobile .daily-pass-track::-webkit-scrollbar {
    display: none;
}

html.foxbox-mobile .daily-pass-node {
    flex: 0 0 9.25rem;
    min-height: 7.75rem !important;
    padding: 0.75rem !important;
    scroll-snap-align: start;
    border-radius: 0.95rem !important;
}

html.foxbox-mobile .daily-pass-day {
    min-width: 1.9rem !important;
    height: 1.9rem !important;
    font-size: 0.78rem !important;
}

html.foxbox-mobile .daily-pass-reward {
    margin-top: 0.7rem !important;
    gap: 0.5rem !important;
}

html.foxbox-mobile .daily-pass-icon {
    width: 2.2rem !important;
    height: 2.2rem !important;
    font-size: 1.1rem !important;
}

html.foxbox-mobile .profile-daily-row {
    padding: 0.65rem !important;
    border-radius: 0.8rem !important;
    gap: 0.55rem !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

html.foxbox-mobile .profile-daily-date {
    max-width: 3rem !important;
    font-size: 0.56rem !important;
    letter-spacing: 0 !important;
}

/* Modales */
html.foxbox-mobile #auth-modal,
html.foxbox-mobile #wheel-modal,
html.foxbox-mobile #pin-preview-modal,
html.foxbox-mobile #update-notes-modal {
    padding: max(0.75rem, env(safe-area-inset-top, 0px)) 0.75rem max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
}

html.foxbox-mobile #auth-modal > div {
    max-width: 24rem !important;
    padding: 1.15rem !important;
    border-radius: 1.25rem !important;
}

html.foxbox-mobile .auth-field-help,
html.foxbox-mobile .auth-status {
    font-size: 0.7rem !important;
    line-height: 1.35 !important;
}

html.foxbox-mobile #auth-submit-btn {
    min-height: 2.85rem !important;
}

html.foxbox-mobile .update-notes-panel {
    max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    padding: 1rem !important;
    border-radius: 1.25rem !important;
}

html.foxbox-mobile .update-notes-title {
    font-size: 1.25rem !important;
}

html.foxbox-mobile .update-notes-list {
    gap: 0.5rem !important;
    margin: 0.9rem 0 1rem !important;
}

html.foxbox-mobile .update-notes-list li {
    min-height: auto !important;
    padding: 0.65rem 0.7rem 0.65rem 2rem !important;
    font-size: 0.76rem !important;
}

html.foxbox-mobile .update-notes-list li::before {
    left: 0.72rem !important;
    top: 0.9rem !important;
}

html.foxbox-mobile #wheel-modal {
    align-items: center !important;
    overflow-y: auto;
}

html.foxbox-mobile .daily-wheel-panel {
    max-width: 24rem !important;
    max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto !important;
    border-radius: 1.35rem !important;
    padding: 1rem !important;
}

html.foxbox-mobile .daily-wheel-panel .mb-5 {
    margin-bottom: 0.75rem !important;
}

html.foxbox-mobile .daily-wheel-panel h3 {
    font-size: 1.8rem !important;
    line-height: 0.95 !important;
}

html.foxbox-mobile #daily-box-visual {
    width: min(56vw, 12.5rem) !important;
    height: min(34dvh, 12.75rem) !important;
    margin-bottom: 0.9rem !important;
}

html.foxbox-mobile #daily-box-pin-art {
    width: min(48vw, 9.75rem) !important;
    height: min(26dvh, 9.75rem) !important;
}

html.foxbox-mobile #daily-box-pin-art img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

html.foxbox-mobile #daily-box-pin-name {
    margin-top: 0.45rem !important;
    font-size: 0.95rem !important;
    line-height: 1.05 !important;
}

html.foxbox-mobile .daily-wheel-panel .grid.grid-cols-\[0\.9fr_1\.1fr\] {
    gap: 0.55rem !important;
    margin-bottom: 0.75rem !important;
}

html.foxbox-mobile .daily-wheel-panel .grid.grid-cols-\[0\.9fr_1\.1fr\] > div {
    padding: 0.75rem !important;
    border-radius: 0.95rem !important;
}

html.foxbox-mobile #daily-streak-count {
    font-size: 1.85rem !important;
}

html.foxbox-mobile #daily-result {
    margin-bottom: 0.85rem !important;
    padding: 0.85rem !important;
    border-radius: 1rem !important;
}

html.foxbox-mobile #daily-result-title {
    font-size: 1rem !important;
    line-height: 1.1 !important;
}

html.foxbox-mobile #daily-result-text {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
}

html.foxbox-mobile #spin-btn {
    min-height: 3rem;
    padding: 0.9rem 1rem !important;
    border-radius: 1rem !important;
    letter-spacing: 0.14em !important;
}

/* Preview pin */
html.foxbox-mobile #pin-preview-modal {
    align-items: center !important;
}

html.foxbox-mobile #pin-preview-modal > div {
    max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 1.35rem !important;
    overflow-y: auto !important;
}

html.foxbox-mobile #pin-preview-frame {
    padding: 0.85rem !important;
    border-radius: 1.25rem !important;
}

html.foxbox-mobile #pin-preview-inner {
    height: min(52dvh, 24rem) !important;
}

html.foxbox-mobile #pin-preview-modal .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

html.foxbox-mobile #pin-preview-modal .pb-10 {
    padding-bottom: 1.25rem !important;
}

html.foxbox-mobile #pin-preview-modal button[onclick="closePinModal()"] {
    top: 0.75rem !important;
    right: 0.75rem !important;
    width: 2.55rem !important;
    height: 2.55rem !important;
}

/* Reveal Daily FoxBox / craft */
html.foxbox-mobile .craft-scene-modal {
    padding: max(.6rem, env(safe-area-inset-top, 0px)) .65rem max(.6rem, env(safe-area-inset-bottom, 0px));
}

html.foxbox-mobile .craft-scene-panel {
    width: min(96vw, 27rem);
    max-height: calc(100dvh - 1.2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    border-radius: 1.35rem;
}

html.foxbox-mobile .craft-scene-content { padding: 1.15rem 1rem 1rem; }
html.foxbox-mobile .craft-scene-title { padding: 0 1.7rem; font-size: clamp(1.05rem, 5vw, 1.35rem); }
html.foxbox-mobile .craft-stage { width: min(53vw, 12.5rem); height: min(53vw, 12.5rem); margin-top: .55rem; }
html.foxbox-mobile .craft-hammer { top: 16%; right: 1%; width: 4.25rem; height: 4.5rem; transform-origin: 42% 92%; }
html.foxbox-mobile .craft-hammer i::before { width: 3.05rem; height: 1.16rem; }
html.foxbox-mobile .craft-hammer i::after { top: .94rem; left: 1.52rem; width: .62rem; height: 3.3rem; }
html.foxbox-mobile .craft-hammer::after { top: .3rem; left: .48rem; width: 1.5rem; }
html.foxbox-mobile .craft-result { margin-top: .55rem; padding: .65rem; }
html.foxbox-mobile .craft-result-stats { margin-top: .5rem; }
html.foxbox-mobile .craft-skip-button,
html.foxbox-mobile .craft-continue-button { min-height: 2.65rem; margin-top: .65rem; }

html.foxbox-mobile .unlock-notification-host {
    top: max(.55rem, env(safe-area-inset-top, 0px));
    width: min(calc(100vw - 1rem), 25rem);
}

html.foxbox-mobile .unlock-notification {
    grid-template-columns: 3rem minmax(0, 1fr) 1.65rem;
    gap: .65rem;
    padding: .58rem .5rem .58rem .62rem;
    border-radius: .9rem;
}

html.foxbox-mobile .unlock-notification__visual { width: 3rem; height: 3rem; border-radius: .72rem; }
html.foxbox-mobile .unlock-notification__name { font-size: .82rem; }
html.foxbox-mobile .unlock-notification__description { display: none; }

html.foxbox-mobile #booster-opening {
    padding: max(0.6rem, env(safe-area-inset-top, 0px)) 0.6rem max(0.6rem, env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;
    justify-content: center !important;
}

html.foxbox-mobile #booster-opening > div {
    height: 100dvh !important;
    min-height: 0;
    padding: 0 !important;
}

html.foxbox-mobile #booster-container {
    width: min(94vw, 23.5rem) !important;
    height: min(86dvh, 34rem) !important;
    max-height: calc(100dvh - 1.2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 1.25rem !important;
    padding: 0.75rem !important;
}

html.foxbox-mobile #booster-result {
    inset: 0.75rem !important;
    gap: 0.45rem !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}

html.foxbox-mobile #pack-rarity {
    margin-bottom: 0 !important;
    font-size: 0.68rem !important;
}

html.foxbox-mobile #pack-pin {
    min-height: 0 !important;
    margin-bottom: 0 !important;
}

html.foxbox-mobile #pack-pin img {
    max-height: min(34dvh, 13.5rem) !important;
    max-width: min(78vw, 18rem) !important;
}

html.foxbox-mobile #pack-name {
    max-width: 96% !important;
    margin-bottom: 0 !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    font-size: clamp(1.05rem, 8vw, 1.95rem) !important;
    line-height: 1.04 !important;
}

html.foxbox-mobile #booster-result button {
    width: min(100%, 15.5rem) !important;
    margin-top: 0 !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.82rem !important;
    border-radius: 0.9rem !important;
}

@media (max-height: 760px) {
    html.foxbox-mobile,
    html.foxbox-mobile body {
        --bottom-nav-height: calc(4rem + env(safe-area-inset-bottom, 0px));
        --content-bottom-reserve: calc(var(--bottom-nav-height) + 0.75rem);
    }

    html.foxbox-mobile .app-main {
        padding-top: 0.65rem !important;
    }

    html.foxbox-mobile .app-header .app-inner {
        min-height: 3.35rem;
        padding-top: 0.42rem;
        padding-bottom: 0.42rem;
    }

    html.foxbox-mobile .app-header img[src*="foxbox-logo"] {
        width: 2.45rem !important;
        height: 2.45rem !important;
    }

    html.foxbox-mobile #profile-xp-circle {
        width: 2.45rem !important;
        height: 2.45rem !important;
    }

    html.foxbox-mobile #view-temple > .text-center {
        margin-bottom: 0.65rem !important;
    }

    html.foxbox-mobile #view-temple > .text-center > span {
        font-size: 0.62rem !important;
        letter-spacing: 0.22em !important;
    }

    html.foxbox-mobile #view-temple h1 {
        margin-top: 0.25rem !important;
        font-size: clamp(1.75rem, 8.5vw, 2.4rem) !important;
    }

    html.foxbox-mobile #daily-entry-container {
        margin-bottom: 0.75rem !important;
    }

    html.foxbox-mobile .daily-entry-button {
        padding: 0.7rem 0.85rem !important;
    }

    html.foxbox-mobile #view-temple > section {
        margin-bottom: 0.8rem !important;
        padding: 0.78rem !important;
    }

    html.foxbox-mobile #view-temple > section button {
        padding: 0.7rem 0.9rem !important;
    }

    html.foxbox-mobile #view-temple .spinner-shadow {
        margin-bottom: 0.85rem !important;
        padding: 0.6rem !important;
    }

    html.foxbox-mobile #spinner-track .w-36 {
        width: 5.9rem !important;
    }

    html.foxbox-mobile #spinner-track .h-52 {
        height: 8.6rem !important;
    }

    html.foxbox-mobile .nav-tab--mobile {
        min-height: 3rem;
    }
}

@media (max-height: 700px) {
    html.foxbox-mobile,
    html.foxbox-mobile body {
        --bottom-nav-height: calc(3.75rem + env(safe-area-inset-bottom, 0px));
        --content-bottom-reserve: calc(var(--bottom-nav-height) + 0.65rem);
    }

    html.foxbox-mobile .app-main {
        padding-top: 0.5rem !important;
    }

    html.foxbox-mobile .app-header .app-inner {
        min-height: 3.05rem;
    }

    html.foxbox-mobile .app-header img[src*="foxbox-logo"] {
        width: 2.2rem !important;
        height: 2.2rem !important;
    }

    html.foxbox-mobile #balance-container {
        gap: 0.4rem !important;
    }

    html.foxbox-mobile #profile-xp-circle {
        width: 2.2rem !important;
        height: 2.2rem !important;
    }

    html.foxbox-mobile #balance-container .bg-\[\#12141c\] {
        padding: 0.25rem 0.5rem !important;
    }

    html.foxbox-mobile #view-temple > .text-center {
        margin-bottom: 0.5rem !important;
    }

    html.foxbox-mobile #view-temple h1 {
        font-size: clamp(1.55rem, 7.7vw, 2.05rem) !important;
    }

    html.foxbox-mobile #daily-entry-container {
        margin-bottom: 0.6rem !important;
    }

    html.foxbox-mobile .daily-entry-button {
        gap: 0.55rem !important;
        padding: 0.6rem 0.75rem !important;
    }

    html.foxbox-mobile .daily-entry-button .daily-entry-orb {
        font-size: 0.95rem !important;
    }

    html.foxbox-mobile #view-temple > section {
        margin-bottom: 0.65rem !important;
        padding: 0.68rem !important;
    }

    html.foxbox-mobile #view-temple > section p.mt-1 {
        margin-top: 0.2rem !important;
        font-size: 0.7rem !important;
    }

    html.foxbox-mobile #view-temple > section button {
        min-height: 2.5rem;
        padding: 0.58rem 0.75rem !important;
        font-size: 0.58rem !important;
    }

    html.foxbox-mobile #view-temple .spinner-shadow {
        margin-bottom: 0.7rem !important;
        padding: 0.48rem !important;
    }

    html.foxbox-mobile #spinner-container {
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
    }

    html.foxbox-mobile #spinner-track .w-36 {
        width: 5.35rem !important;
    }

    html.foxbox-mobile #spinner-track .h-52 {
        height: 7.75rem !important;
    }

    html.foxbox-mobile #open-btn {
        min-height: 2.8rem;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        font-size: 0.72rem !important;
    }

    html.foxbox-mobile .nav-tab--mobile {
        min-height: 2.75rem;
        font-size: 0.56rem;
    }

    html.foxbox-mobile .nav-tab--mobile .nav-tab-icon {
        font-size: 1rem;
    }
}

@media (max-height: 640px) {
    html.foxbox-mobile,
    html.foxbox-mobile body {
        --bottom-nav-height: calc(3.45rem + env(safe-area-inset-bottom, 0px));
        --content-bottom-reserve: calc(var(--bottom-nav-height) + 0.55rem);
    }

    html.foxbox-mobile .app-header .app-inner {
        min-height: 2.85rem;
        padding-top: 0.32rem;
        padding-bottom: 0.32rem;
    }

    html.foxbox-mobile .app-header img[src*="foxbox-logo"] {
        width: 2rem !important;
        height: 2rem !important;
    }

    html.foxbox-mobile #profile-xp-circle {
        width: 2rem !important;
        height: 2rem !important;
    }

    html.foxbox-mobile #view-temple > .text-center > span {
        display: none !important;
    }

    html.foxbox-mobile #view-temple h1 {
        font-size: clamp(1.35rem, 6.8vw, 1.8rem) !important;
    }

    html.foxbox-mobile #daily-entry-container {
        margin-bottom: 0.48rem !important;
    }

    html.foxbox-mobile .daily-entry-button {
        padding: 0.52rem 0.65rem !important;
    }

    html.foxbox-mobile #view-temple > section {
        margin-bottom: 0.55rem !important;
        padding: 0.6rem !important;
    }

    html.foxbox-mobile #view-temple > section p.mt-1 {
        display: none !important;
    }

    html.foxbox-mobile #spinner-track .w-36 {
        width: 4.85rem !important;
    }

    html.foxbox-mobile #spinner-track .h-52 {
        height: 7rem !important;
    }

    html.foxbox-mobile #open-btn {
        min-height: 2.6rem;
        letter-spacing: 0.12em !important;
    }
}

@media (max-width: 360px) {
    html.foxbox-mobile .app-inner {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    html.foxbox-mobile #inventory-grid {
        gap: 0.55rem !important;
    }

    html.foxbox-mobile .pin-card {
        min-height: 10rem !important;
    }

    html.foxbox-mobile .pin-card-art-wrap {
        min-height: 5.85rem !important;
    }

    html.foxbox-mobile .pin-card-art {
        max-height: 5.1rem !important;
    }

    html.foxbox-mobile .daily-wheel-panel {
        padding: 0.8rem !important;
    }

    html.foxbox-mobile #daily-box-visual {
        height: min(30dvh, 11rem) !important;
    }
}

/* Collections and badges */
html.foxbox-mobile #collection-sets-panel,
html.foxbox-mobile #collection-achievements-panel,
html.foxbox-mobile #collection-mega-achievements-panel,
html.foxbox-mobile #collection-system-achievements-panel {
    margin-bottom: 1rem !important;
    padding: 0.85rem !important;
    border-radius: 1rem !important;
}

html.foxbox-mobile #collection-sets-grid,
html.foxbox-mobile #collection-achievements-grid,
html.foxbox-mobile #collection-mega-achievements-grid,
html.foxbox-mobile #collection-system-achievements-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
}

html.foxbox-mobile #collection-sets-grid article,
html.foxbox-mobile #collection-achievements-grid article,
html.foxbox-mobile #collection-mega-achievements-grid article,
html.foxbox-mobile #collection-system-achievements-grid article {
    padding: 0.85rem !important;
    border-radius: 1rem !important;
}

html.foxbox-mobile #collection-sets-grid h4,
html.foxbox-mobile #collection-achievements-grid h4,
html.foxbox-mobile #collection-mega-achievements-grid h4,
html.foxbox-mobile #collection-system-achievements-grid h4 {
    font-size: 1rem !important;
    line-height: 1.05 !important;
}

html.foxbox-mobile #collection-sets-grid .aspect-square,
html.foxbox-mobile #collection-achievements-grid .aspect-square {
    min-height: 3.1rem;
}

html.foxbox-mobile .achievement-card-art-column {
    min-width: 4.65rem;
}

html.foxbox-mobile .achievement-art-frame {
    width: 4.25rem;
    height: 4.25rem;
}

html.foxbox-mobile .badge-detail-panel {
    max-width: min(100%, 24rem);
    padding: 1.15rem !important;
}

/* Polish mobile V1 — Daily modal safe spacing */
html.foxbox-mobile #wheel-modal {
    z-index: 9998 !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-top: 1rem !important;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

html.foxbox-mobile .daily-wheel-panel {
    max-width: min(100%, 24rem) !important;
    margin-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important;
    padding: 1rem !important;
}

html.foxbox-mobile #daily-box-visual {
    width: 12.5rem !important;
    height: 13.5rem !important;
    margin-bottom: 1.1rem !important;
}

html.foxbox-mobile #daily-box-pin-art {
    width: 9.75rem !important;
    height: 9.75rem !important;
}

html.foxbox-mobile #daily-box-pin-name {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
}

html.foxbox-mobile .daily-box-pin-rarity,
html.foxbox-mobile .daily-opening-status {
    letter-spacing: 0.12em !important;
}

html.foxbox-mobile .daily-result {
    margin-bottom: 0.85rem !important;
    padding: 0.85rem !important;
}

html.foxbox-mobile .daily-result-lines p {
    padding: 0.5rem 0.62rem !important;
}

html.foxbox-mobile #wheel-modal button[onclick="closeWheelModal()"] {
    margin-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
}