/* ═══════════════════════════════════════════════════════════
   MINECRAFT ACHIEVEMENT BOOK — IPHONE & TELEGRAM OPTIMIZED
   
   Аутентичный интерфейс Minecraft:
   • Квадратные углы (0px border-radius)
   • Пиксельные границы с фаской (light top/left, dark bottom/right)
   • Настоящий пиксельный шрифт Minecraft
   • text-shadow: 2px 2px 0 #000 на всём тексте
   • Полная адаптация под iPhone (Safe Area, Dynamic Island, Home Bar, 120Hz touch)
   • Модальное окно для артов и изображений достижений
   ═══════════════════════════════════════════════════════════ */

/* ─── MC Fonts ─── */
@font-face {
    font-family: "Minecraft";
    src: url("../assets/fonts/minecraft.otf") format("opentype");
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Minecraft";
    src: url("../assets/fonts/minecraft-bold.otf") format("opentype");
    font-weight: bold;
    font-display: swap;
}

/* ─── CSS Variables ─── */
:root {
    /* MC Core Palette */
    --mc-bg: #1b1b1b;
    --mc-bg-light: #2b2b2b;
    --mc-bg-dark: #101010;

    /* MC Panel Borders */
    --mc-border-light: #707070;
    --mc-border-dark: #151515;

    /* MC Panel */
    --mc-panel: #3b3b3b;
    --mc-panel-hover: #454545;
    --mc-panel-active: #282828;

    /* MC Text Colors */
    --mc-text: #ffffff;
    --mc-gray: #aaaaaa;
    --mc-dark-gray: #555555;
    --mc-green: #55ff55;
    --mc-yellow: #ffff55;
    --mc-gold: #ffaa00;
    --mc-aqua: #55ffff;
    --mc-purple: #aa55ff;
    --mc-red: #ff5555;
    --mc-pink: #ff55ff;
    --mc-dark-red: #aa0000;
    --mc-dark-green: #00aa00;

    /* Rarity Colors */
    --rarity-stone: #8b8b8b;
    --rarity-iron: #d8d8d8;
    --rarity-gold: #ffaa00;
    --rarity-diamond: #55ffff;
    --rarity-netherite: #5c4033;

    /* Parchment Book */
    --parchment: #c6b07d;
    --parchment-dark: #a8935d;
    --parchment-border: #4b3823;

    /* XP Bar */
    --xp-green: #80ff20;

    /* MC Text Shadow */
    --mc-shadow: 2px 2px 0 #000;

    /* Safe Area Insets (iPhone Notch / Island & Home Indicator) */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

/* ─── Reset & Base ─── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    border-radius: 0 !important;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    overflow: hidden;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    height: -webkit-fill-available;
}

body {
    font-family: "Minecraft", monospace;
    background: var(--mc-bg);
    color: var(--mc-text);
    overflow: hidden;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    user-select: none;
    -webkit-user-select: none;
    image-rendering: pixelated;
    text-shadow: var(--mc-shadow);
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
}

img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    -webkit-touch-callout: none;
}

.mc-icon-img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.tab-icon .mc-icon-img {
    width: 24px;
    height: 24px;
}

.header-book-svg .mc-icon-img {
    width: 20px;
    height: 20px;
}

.counter-icon .mc-icon-img {
    width: 16px;
    height: 16px;
}

.section-icon-svg .mc-icon-img {
    width: 22px;
    height: 22px;
}

.stat-icon .mc-icon-img {
    width: 20px;
    height: 20px;
}

.toast-icon .mc-icon-img {
    width: 26px;
    height: 26px;
}

.splash-book .mc-icon-img {
    width: 76px;
    height: 76px;
    filter: drop-shadow(0 0 16px rgba(128, 0, 255, 0.45));
}

.player-heart-icon .mc-icon-img {
    width: 16px;
    height: 16px;
}

/* ═══════════════════════════════════════════
   MC UI PANEL (reusable bevel border)
   ═══════════════════════════════════════════ */
.mc-ui-panel {
    background: var(--mc-panel);
    border: 2px solid;
    border-color:
        var(--mc-border-light)
        var(--mc-border-dark)
        var(--mc-border-dark)
        var(--mc-border-light);
    box-shadow:
        inset 2px 2px 0 rgba(255,255,255,0.08),
        inset -2px -2px 0 rgba(0,0,0,0.35);
}

/* ═══════════════════════════════════════════
   MC BUTTON
   ═══════════════════════════════════════════ */
.mc-button {
    position: relative;
    min-height: 40px;
    padding: 8px 16px;
    border: 2px solid;
    border-color:
        var(--mc-border-light)
        var(--mc-border-dark)
        var(--mc-border-dark)
        var(--mc-border-light);
    background: var(--mc-panel);
    color: var(--mc-text);
    font-family: inherit;
    font-size: 18px;
    text-shadow: var(--mc-shadow);
    cursor: pointer;
    transition: background 0.08s linear;
}

.mc-button:active {
    border-color:
        var(--mc-border-dark)
        var(--mc-border-light)
        var(--mc-border-light)
        var(--mc-border-dark);
    transform: translate(1px, 1px);
}

/* ═══════════════════════════════════════════
   SPLASH SCREEN
   ═══════════════════════════════════════════ */
.splash {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #0a0a0e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    padding: max(16px, var(--sat)) max(16px, var(--sar)) max(16px, var(--sab)) max(16px, var(--sal));
}

.splash.hiding {
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.splash.hidden {
    display: none;
}

/* Stars */
.splash-stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.splash-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    animation: star-twinkle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0; }
    50% { opacity: var(--brightness); }
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 1;
    max-width: 360px;
    text-align: center;
    animation: splash-appear 1s ease forwards;
}

@keyframes splash-appear {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Book */
.splash-book-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splash-book {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: book-float 3s ease-in-out infinite;
    z-index: 2;
}

.splash-book svg {
    width: 76px;
    height: 76px;
    filter: drop-shadow(0 0 16px rgba(128, 0, 255, 0.45));
}

@keyframes book-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Enchantment glint — ONLY on special items */
.enchant-overlay {
    position: absolute;
    inset: -10px;
    background: linear-gradient(
        135deg,
        transparent 30%,
        rgba(128, 50, 255, 0.2) 45%,
        rgba(80, 20, 255, 0.3) 50%,
        rgba(128, 50, 255, 0.2) 55%,
        transparent 70%
    );
    background-size: 300% 300%;
    animation: enchant-sweep 3s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

@keyframes enchant-sweep {
    0% { background-position: 200% 200%; }
    100% { background-position: -100% -100%; }
}

.splash-glow {
    position: absolute;
    width: 170px;
    height: 170px;
    background: radial-gradient(
        circle,
        rgba(128, 50, 255, 0.25) 0%,
        transparent 65%
    );
    animation: glow-pulse 3s ease-in-out infinite;
    z-index: 1;
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Splash text */
.splash-title {
    font-size: 1.85rem;
    color: var(--mc-gold);
    text-shadow: 2px 2px 0 #2a1a00;
    letter-spacing: 1px;
}

.splash-subtitle {
    font-size: 1.05rem;
    color: var(--mc-gray);
    text-shadow: var(--mc-shadow);
}

.splash-date {
    font-size: 0.95rem;
    color: var(--mc-aqua);
    text-shadow: var(--mc-shadow);
}

/* Player nicks */
.splash-players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1rem;
    margin-top: 2px;
}

.player-nick {
    color: var(--mc-green);
    text-shadow: var(--mc-shadow);
}

.player-heart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 0 4px rgba(255, 34, 0, 0.5));
}

.player-heart-icon svg {
    width: 100%;
    height: 100%;
}

.splash-hint-container {
    margin-top: 16px;
}

.splash-hint {
    font-size: 0.95rem;
    color: var(--mc-text);
    animation: hint-pulse 2s ease-in-out infinite;
    text-shadow: var(--mc-shadow);
}

@keyframes hint-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* ═══════════════════════════════════════════
   MAIN APP CONTAINER
   ═══════════════════════════════════════════ */
.app {
    display: none;
    flex-direction: column;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    background: var(--mc-bg);
    opacity: 0;
    transition: opacity 0.35s ease;
    overflow: hidden;
}

.app.visible {
    display: flex;
    opacity: 1;
}

/* ═══════════════════════════════════════════
   HEADER (iPhone Notch & Dynamic Island Safe)
   ═══════════════════════════════════════════ */
.header {
    position: relative;
    flex-shrink: 0;
    padding-top: max(8px, var(--sat));
    padding-bottom: 8px;
    padding-left: max(12px, var(--sal));
    padding-right: max(12px, var(--sar));
    background: var(--mc-panel);
    border-bottom: 2px solid var(--mc-border-dark);
    border-top: 2px solid var(--mc-border-light);
    z-index: 20;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-book-svg {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.header-book-svg svg {
    width: 100%;
    height: 100%;
}

.header-title {
    font-size: 1.05rem;
    color: var(--mc-gold);
    text-shadow: 2px 2px 0 #2a1a00;
    white-space: nowrap;
}

.header-counter {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--mc-text);
    text-shadow: var(--mc-shadow);
    background: rgba(0,0,0,0.45);
    padding: 3px 8px;
    border: 1px solid var(--mc-border-dark);
}

.counter-icon {
    display: inline-flex;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.counter-icon svg {
    width: 100%;
    height: 100%;
}

.counter-value {
    color: var(--mc-green);
    min-width: 36px;
    text-align: center;
}

.counter-label {
    font-size: 0.75rem;
    color: var(--mc-gray);
}

/* ═══════════════════════════════════════════
   TAB NAVIGATION — MC Inventory Tabs
   ═══════════════════════════════════════════ */
.tabs {
    display: flex;
    flex-shrink: 0;
    background: var(--mc-bg-dark);
    padding: 0 2px;
    gap: 2px;
    border-bottom: 2px solid var(--parchment-border);
    position: relative;
    z-index: 10;
}

.tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 0;
    background: var(--mc-panel);
    border: 2px solid;
    border-color:
        var(--mc-border-light)
        var(--mc-border-dark)
        var(--mc-border-dark)
        var(--mc-border-light);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.08s linear;
}

.tab:active {
    background: var(--mc-panel-active);
    border-color:
        var(--mc-border-dark)
        var(--mc-border-light)
        var(--mc-border-light)
        var(--mc-border-dark);
}

.tab.active {
    background: var(--parchment);
    border-bottom: 2px solid var(--parchment);
    margin-bottom: -2px;
    border-top-color: var(--parchment-dark);
    border-left-color: var(--parchment-dark);
    z-index: 11;
}

.tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 1;
}

.tab-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5));
}

.tab:active .tab-icon {
    transform: scale(0.92);
}

/* ═══════════════════════════════════════════
   CONTENT AREA — Parchment Book Page
   ═══════════════════════════════════════════ */
.content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--parchment);
    background-image: url('../assets/textures/parchment.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--parchment-dark) var(--parchment);
}

.content::-webkit-scrollbar { width: 4px; }
.content::-webkit-scrollbar-track { background: var(--parchment-dark); }
.content::-webkit-scrollbar-thumb { background: var(--parchment-border); }

.content-inner {
    padding: 12px;
    padding-bottom: calc(48px + var(--sab));
    min-height: 100%;
}

/* Section Header */
.section-header {
    text-align: center;
    padding: 10px 0 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--parchment-border);
}

.section-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.section-icon-svg {
    display: inline-flex;
    width: 22px;
    height: 22px;
}

.section-icon-svg svg {
    width: 100%;
    height: 100%;
}

.section-title {
    font-size: 1.4rem;
    color: #3c2712;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.15);
    letter-spacing: 0.5px;
}

.section-subtitle {
    font-size: 0.9rem;
    color: #6b4c2a;
    margin-top: 2px;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.1);
}

/* ═══════════════════════════════════════════
   ACHIEVEMENT CARDS — Authentic MC Style
   ═══════════════════════════════════════════ */
.achievement-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
}

.achievement-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 64px;
    padding: 9px;
    background: rgba(0, 0, 0, 0.22);
    border: 2px solid var(--parchment-border);
    box-shadow:
        inset 2px 2px 0 rgba(255,255,255,0.08),
        inset -2px -2px 0 rgba(0,0,0,0.25);
    cursor: pointer;
    transition: background 0.08s linear, transform 0.08s linear;
    opacity: 0;
    transform: translateY(6px);
    animation: card-appear 0.25s ease forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes card-appear {
    to { opacity: 1; transform: translateY(0); }
}

.achievement-card:active {
    transform: translate(1px, 1px);
    background: rgba(255,255,255,0.05);
}

.achievement-card.expanded {
    background: rgba(0, 0, 0, 0.28);
}

/* Rarity left stripe */
.achievement-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.achievement-card.rarity-stone::before { background: var(--rarity-stone); }
.achievement-card.rarity-iron::before { background: var(--rarity-iron); }
.achievement-card.rarity-gold::before { background: var(--rarity-gold); }
.achievement-card.rarity-diamond::before { background: var(--rarity-diamond); }
.achievement-card.rarity-netherite::before { background: var(--rarity-netherite); }

/* ─── Card Layout ─── */
.achievement-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ═══════════════════════════════════════════
   ACHIEVEMENT ICON — MC Item Slot
   ═══════════════════════════════════════════ */
.achievement-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-shadow: none;
    background: #8b8b8b;
    border: 2px solid;
    border-color:
        #d0d0d0
        #404040
        #404040
        #d0d0d0;
    box-shadow:
        inset 2px 2px 0 rgba(255,255,255,0.15),
        inset -2px -2px 0 rgba(0,0,0,0.3);
}

/* Rarity icon slot colors */
.rarity-gold .achievement-icon {
    background: #6b5b2a;
    border-color: #a89040 #3a3018 #3a3018 #a89040;
}

.rarity-diamond .achievement-icon {
    background: #2a5b5b;
    border-color: #40a0a0 #183a3a #183a3a #40a0a0;
}

.rarity-netherite .achievement-icon {
    background: #3b2820;
    border-color: #5c4033 #1a1210 #1a1210 #5c4033;
}

.achievement-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
}

.achievement-icon svg {
    width: 32px;
    height: 32px;
    filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4));
}

/* ─── Achievement Text ─── */
.achievement-info {
    flex: 1;
    min-width: 0;
}

.achievement-title {
    font-size: 1rem;
    color: #fff;
    text-shadow: var(--mc-shadow);
    line-height: 1.2;
}

.achievement-subtitle {
    margin-top: 3px;
    font-size: 0.82rem;
    color: var(--mc-gray);
    text-shadow: 1px 1px 0 #000;
}

/* Rarity badge */
.achievement-rarity-badge {
    flex-shrink: 0;
    font-size: 0.68rem;
    padding: 2px 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid;
    text-shadow: 1px 1px 0 #000;
}

.rarity-stone .achievement-rarity-badge { color: var(--rarity-stone); border-color: #666; }
.rarity-iron .achievement-rarity-badge { color: var(--mc-gray); border-color: #888; }
.rarity-gold .achievement-rarity-badge { color: var(--mc-gold); border-color: #aa7700; }
.rarity-diamond .achievement-rarity-badge { color: var(--mc-aqua); border-color: #339999; }
.rarity-netherite .achievement-rarity-badge { color: #8b6b5a; border-color: #5c4033; }

/* ─── Expanded Detail ─── */
.achievement-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.25s ease, opacity 0.25s ease;
    opacity: 0;
}

.achievement-card.expanded .achievement-detail {
    max-height: 600px;
    padding-top: 10px;
    opacity: 1;
}

.achievement-description {
    font-size: 0.88rem;
    color: var(--mc-gray);
    line-height: 1.4;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.15);
    border-left: 3px solid var(--parchment-border);
    margin-left: 4px;
    text-shadow: 1px 1px 0 #000;
}

.achievement-date-tag {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--mc-gray);
    margin-top: 6px;
    margin-left: 8px;
    text-shadow: 1px 1px 0 #000;
}

/* Toast & Art Images in Card */
.achievement-image-container {
    margin-top: 8px;
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.achievement-toast-image {
    width: 100%;
    max-width: 320px;
    display: block;
    border: 2px solid var(--parchment-border);
    cursor: pointer;
    transition: transform 0.08s linear;
}

.achievement-toast-image:active {
    transform: scale(0.98);
}

.achievement-art-image {
    width: 100%;
    max-width: 280px;
    display: block;
    border: 3px solid #3c2712;
    box-shadow: 0 4px 0 #000;
    cursor: pointer;
    transition: transform 0.08s linear;
}

.achievement-art-image:active {
    transform: scale(0.98);
}

.image-tap-hint {
    display: block;
    font-size: 0.7rem;
    color: var(--mc-yellow);
    margin-top: 4px;
    text-shadow: 1px 1px 0 #000;
    opacity: 0.8;
}

/* ═══════════════════════════════════════════
   LOCKED / HIDDEN ACHIEVEMENT
   ═══════════════════════════════════════════ */
.achievement-card.locked {
    opacity: 0.65;
    background: rgba(0, 0, 0, 0.15);
}

.achievement-card.locked .achievement-icon {
    filter: grayscale(1) brightness(0.5);
}

.achievement-card.locked .achievement-title {
    color: var(--mc-dark-gray);
}

.achievement-card.locked .achievement-subtitle {
    color: var(--mc-dark-gray);
}

/* Netherite shimmer — ONLY for legendary hidden */
.achievement-card.locked.rarity-netherite::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(92, 64, 51, 0.1) 40%,
        rgba(150, 100, 60, 0.18) 50%,
        rgba(92, 64, 51, 0.1) 60%,
        transparent 75%
    );
    background-size: 300% 100%;
    animation: netherite-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes netherite-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Diamond sparkle — ONLY for year_7 */
.achievement-card[data-id="year_7"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(85, 255, 255, 0.05) 40%,
        rgba(85, 255, 255, 0.1) 50%,
        rgba(85, 255, 255, 0.05) 60%,
        transparent 75%
    );
    background-size: 300% 100%;
    animation: diamond-sparkle 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes diamond-sparkle {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════
   STATISTICS SCREEN — MC Stats Page
   ═══════════════════════════════════════════ */
.stats-screen {
    display: none;
    padding-bottom: 20px;
}

.stats-screen.visible {
    display: block;
}

.stats-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid var(--parchment-border);
    box-shadow:
        inset 2px 2px 0 rgba(255,255,255,0.05),
        inset -2px -2px 0 rgba(0,0,0,0.2);
}

.stats-title-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

.stats-title-icon svg {
    width: 100%;
    height: 100%;
}

.stats-title-text {
    font-size: 1.25rem;
    color: #3c2712;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.15);
    letter-spacing: 0.5px;
}

.stats-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(75, 56, 35, 0.3);
    opacity: 0;
}

.stat-row:nth-child(even) {
    background: rgba(0, 0, 0, 0.06);
}

.stat-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.stat-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.3));
}

.stat-label {
    font-size: 0.88rem;
    color: #3c2712;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.1);
}

.stat-value {
    font-size: 0.95rem;
    color: #3c2712;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.1);
}

.stat-value.animated {
    color: #8b6b00;
}

/* Stats dates */
.stats-dates {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    padding: 10px;
    border: 2px solid var(--parchment-border);
    background: rgba(0, 0, 0, 0.1);
}

.stats-date-block { text-align: center; }

.stats-date-label {
    display: block;
    font-size: 0.72rem;
    color: #6b4c2a;
    margin-bottom: 2px;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.1);
}

.stats-date-value {
    font-size: 0.88rem;
    color: #3c2712;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.1);
}

.stats-date-divider {
    font-size: 1.2rem;
    color: #8b6b00;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.1);
}

/* Together Photo Frame at end of statistics */
.stats-together-wrap {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    padding-bottom: 8px;
}

.stats-together-frame {
    width: 100%;
    max-width: 320px;
    padding: 8px;
    background: var(--mc-panel);
    text-align: center;
}

.stats-together-img {
    width: 100%;
    height: auto;
    display: block;
    border: 2px solid #111;
    cursor: pointer;
    transition: transform 0.08s linear;
}

.stats-together-img:active {
    transform: scale(0.98);
}

.stats-together-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 1rem;
}

.stats-heart-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.stats-heart-mini img, .stats-heart-mini svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

/* ═══════════════════════════════════════════
   XP BAR (iPhone Home Indicator Safe)
   ═══════════════════════════════════════════ */
.xp-footer {
    flex-shrink: 0;
    background: var(--mc-panel);
    padding-top: 6px;
    padding-bottom: max(6px, var(--sab));
    padding-left: max(12px, var(--sal));
    padding-right: max(12px, var(--sar));
    border-top: 2px solid var(--mc-border-light);
    text-align: center;
    z-index: 20;
}

.xp-bar-wrapper {
    position: relative;
    height: 11px;
    margin-bottom: 3px;
}

.xp-bar {
    position: absolute;
    inset: 0;
    background: #1a1a1a;
    border: 1px solid #0a0a0a;
    overflow: hidden;
}

.xp-bar-fill {
    height: 100%;
    background: linear-gradient(
        180deg,
        #80ff20 0%,
        #6edb1a 40%,
        #5cb816 100%
    );
    transition: width 0.8s ease;
    position: relative;
}

.xp-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: rgba(255, 255, 255, 0.18);
}

.xp-level {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--xp-green);
    text-shadow:
        1px 0 0 #000,
        -1px 0 0 #000,
        0 1px 0 #000,
        0 -1px 0 #000;
    z-index: 2;
    line-height: 1;
}

.xp-label {
    font-size: 0.68rem;
    color: var(--mc-gray);
    text-shadow: 1px 1px 0 #000;
}

/* ═══════════════════════════════════════════
   TOAST NOTIFICATION (iPhone Notch Safe)
   ═══════════════════════════════════════════ */
.toast {
    position: fixed;
    top: max(12px, calc(8px + var(--sat)));
    left: 50%;
    transform: translateX(-50%) translateY(-140px);
    z-index: 2000;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
    width: 90%;
    max-width: 330px;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
}

.toast-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: linear-gradient(#21002b, #100015);
    border: 2px solid;
    border-color:
        var(--mc-border-light)
        var(--mc-border-dark)
        var(--mc-border-dark)
        var(--mc-border-light);
    padding: 8px 12px;
    box-shadow:
        0 4px 0 #000,
        inset 2px 2px 0 rgba(255,255,255,0.08);
}

.toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    text-shadow: none;
    animation: toast-icon-pop 0.4s ease 0.25s both;
}

.toast-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5));
}

@keyframes toast-icon-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.toast-body { flex: 1; min-width: 0; }

.toast-headline {
    font-size: 0.82rem;
    color: var(--mc-gold);
    text-shadow: var(--mc-shadow);
}

.toast-name {
    font-size: 0.92rem;
    color: var(--mc-text);
    text-shadow: var(--mc-shadow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════
   IMAGE LIGHTBOX MODAL (Minecraft Frame)
   ═══════════════════════════════════════════ */
.image-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding: max(16px, var(--sat)) max(16px, var(--sar)) max(16px, var(--sab)) max(16px, var(--sal));
}

.image-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.image-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.image-modal-dialog {
    position: relative;
    z-index: 1;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--mc-panel);
    box-shadow: 0 8px 32px rgba(0,0,0,0.8);
    transform: scale(0.95);
    transition: transform 0.25s ease;
}

.image-modal.open .image-modal-dialog {
    transform: scale(1);
}

.image-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--mc-border-dark);
    margin-bottom: 8px;
}

.image-modal-title {
    font-size: 1rem;
    color: var(--mc-gold);
    text-shadow: var(--mc-shadow);
}

.image-modal-close {
    background: #501010;
    border: 2px solid;
    border-color: #882020 #200505 #200505 #882020;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    padding: 2px 8px;
    cursor: pointer;
    text-shadow: 1px 1px 0 #000;
}

.image-modal-close:active {
    border-color: #200505 #882020 #882020 #200505;
    transform: translate(1px, 1px);
}

.image-modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.image-modal-body img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border: 2px solid #111;
}

/* ═══════════════════════════════════════════
   PARTICLES
   ═══════════════════════════════════════════ */
.particles-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1500;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    pointer-events: none;
    animation: particle-rise var(--duration, 1.5s) ease-out forwards;
}

@keyframes particle-rise {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(var(--rise, -80px)) translateX(var(--drift, 0px)) scale(0.3); }
}

/* ═══════════════════════════════════════════
   UTILITY ANIMATIONS
   ═══════════════════════════════════════════ */
.content-inner.transitioning {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.content-inner.transitioned {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* ═══════════════════════════════════════════
   IPHONE & SCREEN ADAPTATIONS
   ═══════════════════════════════════════════ */
/* iPhone SE / Mini (<= 375px) */
@media (max-width: 375px) {
    .header-title { font-size: 0.95rem; }
    .header-counter { font-size: 0.78rem; padding: 2px 6px; }
    .tab-icon { font-size: 1.05rem; }
    .section-title { font-size: 1.25rem; }
    .achievement-icon { width: 42px; height: 42px; font-size: 1.35rem; }
    .achievement-icon img { width: 34px; height: 34px; }
    .achievement-title { font-size: 0.92rem; }
    .achievement-subtitle { font-size: 0.76rem; }
    .splash-title { font-size: 1.6rem; }
}

/* iPhone Standard / Pro (376px - 430px) */
@media (min-width: 376px) and (max-width: 430px) {
    .header-title { font-size: 1.05rem; }
    .achievement-title { font-size: 1rem; }
    .content-inner { padding: 12px; }
}

/* iPad / Desktop Preview */
@media (min-width: 500px) {
    .content-inner { max-width: 480px; margin: 0 auto; }
}