:root {
    --bg-dark: #121212;
    --sidebar-bg: #1e1e1e;
    --card-bg: #2d2d2d;
    --accent: #bb86fc;
    --mage-blue: #1976d2;
    --mage-dark-blue: #0d47a1;
    --mage-skin: #ffcc80;
    --mage-beard: #f5f5f5;
    --text-main: #ffffff;
    --text-dim: #b0b0b0;
    --success: #03dac6;
    --error: #cf6679;
    --warning: #ffb74d;
}

html.refresh-lock,
body.refresh-lock {
  overscroll-behavior-y: none;
}

@media (max-width: 800px) {
  body.refresh-lock {
    overflow: hidden;
    height: 100svh;
  }

  body.refresh-lock .app-container,
  body.refresh-lock .game-area {
    overscroll-behavior-y: none;
  }
}

@media (max-width: 800px) {
  body.mobile-gameplay-active #mobile-menu-btn {
    display: flex !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    left: 12px !important;
    width: 56px !important;
    height: 56px !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 12000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.mobile-mode:not(.mobile-gameplay-active) #mobile-menu-btn {
    display: none !important;
  }

  body.mobile-gameplay-active .daily-status-bar {
    display: none !important;
  }
}

.mobile-gameplay-drawer {
  display: none;
}

@media (max-width: 800px) {
  .mobile-gameplay-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: min(88vw, 360px);
    height: 100dvh;
    background: var(--sidebar-bg);
    z-index: 11000;
    box-shadow: 5px 0 20px rgba(0,0,0,0.45);
    transition: left 0.25s ease;
    padding: calc(env(safe-area-inset-top, 0px) + 78px) 14px calc(env(safe-area-inset-bottom, 0px) + 20px);
    overflow-y: auto;
  }

  .mobile-gameplay-drawer.mobile-open {
    display: block !important;
    left: 0 !important;
  }

  .mobile-gameplay-drawer-header {
    color: var(--accent);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }

  .mobile-gameplay-drawer-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .mobile-gameplay-drawer .collapsible-section {
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column;
  }

  .mobile-gameplay-drawer #notepad,
  .mobile-gameplay-drawer #notepad.mobile-notepad-in-sidebar {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .mobile-gameplay-drawer #notepad .notepad-body {
    height: 120px !important;
  }

  .mobile-gameplay-drawer #notepad textarea {
    font-size: 16px !important;
  }

  .mobile-gameplay-drawer .history-list {
    min-height: 220px;
  }

  #sidebar {
    display: none !important;
  }
}

* { box-sizing: border-box; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
}

body.loading-screen-active {
    overflow: hidden;
}

.initial-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at top, rgba(86, 41, 172, 0.45) 0%, rgba(18, 18, 18, 0.96) 48%, #090910 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.42s ease, visibility 0.42s ease;
    animation: loading-screen-fade-in 0.42s ease;
}

.initial-loading-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.initial-loading-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(101, 62, 204, 0.22), transparent 32%),
        radial-gradient(circle at 80% 14%, rgba(39, 138, 255, 0.16), transparent 26%),
        radial-gradient(circle at 50% 100%, rgba(187, 134, 252, 0.12), transparent 36%);
    filter: blur(10px);
}

.initial-loading-content {
    position: relative;
    z-index: 1;
    width: min(92vw, 1240px);
    max-width: 1240px;
    height: min(90vh, 860px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.initial-loading-image {
    width: min(100%, 1120px);
    max-height: min(74vh, 720px);
    object-fit: contain;
    filter:
        drop-shadow(0 24px 38px rgba(0, 0, 0, 0.38))
        drop-shadow(0 0 34px rgba(115, 86, 255, 0.24));
    transform: translateY(20px) scale(0.97);
    opacity: 0;
    animation: loading-image-enter 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.initial-loading-entry {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.initial-loading-play-btn {
    border: 1px solid rgba(187, 134, 252, 0.45);
    background: linear-gradient(90deg, rgba(75, 146, 255, 0.92) 0%, rgba(187, 134, 252, 0.96) 58%, rgba(235, 99, 255, 0.94) 100%);
    color: #ffffff;
    border-radius: 999px;
    min-width: 220px;
    padding: 16px 34px;
    font-size: clamp(1.05rem, 2vw, 1.18rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(187, 134, 252, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.initial-loading-play-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.38),
        0 0 34px rgba(187, 134, 252, 0.4);
    filter: saturate(1.08);
}

.initial-loading-play-btn:active {
    transform: translateY(0) scale(0.995);
}

.initial-loading-status {
    width: min(560px, 84vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.initial-loading-bar-shell {
    position: relative;
    width: 100%;
    height: 18px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(187, 134, 252, 0.3);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.08),
        0 0 24px rgba(94, 71, 255, 0.22);
    overflow: hidden;
}

.initial-loading-bar {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2fa5ff 0%, #6d7dff 38%, #bb86fc 72%, #f35dff 100%);
    box-shadow:
        0 0 18px rgba(84, 164, 255, 0.45),
        0 0 28px rgba(187, 134, 252, 0.35);
    transition: width 0.08s linear;
}

.initial-loading-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.34) 48%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.55;
}

.initial-loading-percent {
    font-size: clamp(1rem, 2vw, 1.22rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #efe7ff;
    text-shadow:
        0 0 12px rgba(187, 134, 252, 0.5),
        0 0 24px rgba(48, 161, 255, 0.24);
}

@keyframes loading-screen-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes loading-image-enter {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- TELA DE BOAS VINDAS (FULLSCREEN) --- */
.welcome-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #121212; z-index: 5000;
    display: flex; justify-content: center; align-items: center;
    padding: 12px;
    box-sizing: border-box;
}
.app-container.hidden-app { display: none; }

.modal-content {
    background: #1e1e1e; padding: 40px; border-radius: 15px;
    border: 2px solid var(--accent); max-width: 600px; text-align: center;
    box-shadow: 0 0 50px rgba(187, 134, 252, 0.15);
    margin: 20px;
}

/* NOVO: Estilo do seletor de dificuldade */
.difficulty-box {
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid #444;
}
.difficulty-box label {
    display: block; margin-bottom: 8px; color: var(--accent); font-weight: bold;
}
#length-selector {
    background: #000; color: #fff; border: 1px solid var(--accent);
    padding: 10px; border-radius: 5px; font-size: 1rem; width: 100%;
    cursor: pointer; outline: none;
}

.highlight-text {
    background: rgba(255, 183, 77, 0.1); border-left: 4px solid var(--warning);
    padding: 15px; text-align: left; font-size: 1rem; margin-top: 20px; border-radius: 4px;
}
#start-game-btn {
    background: var(--accent); color: #000; border: none; padding: 15px 40px;
    font-size: 1.2rem; font-weight: bold; border-radius: 8px; cursor: pointer;
    margin-top: 20px; transition: 0.2s; text-transform: uppercase; letter-spacing: 1px;
}
#start-game-btn:hover { transform: scale(1.05); box-shadow: 0 0 20px var(--accent); }

/* --- TUTORIAL LIVRO --- */
.book-tutorial {
    max-width: 920px;
    width: calc(100% - 40px);
    max-height: calc(100vh - 24px);
    padding: 18px 22px 16px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    overflow: hidden;
}

@media (max-width: 800px) {
    .initial-loading-screen {
        padding: 18px;
    }

    .initial-loading-content {
        width: min(100%, 560px);
        height: min(94vh, 760px);
        gap: 18px;
    }

    .initial-loading-image {
        width: 100%;
        max-height: min(68vh, 560px);
    }

    .initial-loading-status {
        width: min(92vw, 420px);
        gap: 10px;
        margin-bottom: 2px;
    }

    .initial-loading-play-btn {
        min-width: 190px;
        padding: 14px 28px;
    }

    .initial-loading-bar-shell {
        height: 16px;
    }
}

.book-tutorial-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 4px;
}

.book-tutorial-header-copy {
    flex: 1;
    text-align: center;
}

.book-tutorial-header h2 {
    color: var(--accent);
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    margin: 0 0 4px;
}

.tutorial-back-btn {
    position: static;
    flex-shrink: 0;
    margin-top: 4px;
}

.book-tutorial-header p {
    color: var(--text-dim);
    font-size: 0.94rem;
    margin: 0 0 6px;
}

.book-skip-btn {
    margin-top: 4px;
    align-self: flex-end;
    border: 1px solid rgba(187, 134, 252, 0.6);
    background: rgba(187, 134, 252, 0.12);
    color: var(--accent);
    border-radius: 8px;
    padding: 7px 11px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}
.book-skip-btn:hover {
    background: rgba(187, 134, 252, 0.2);
}

.book-shell {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    gap: 12px;
    align-items: stretch;
    min-height: 0;
}

.book-pages-window {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(198, 161, 102, 0.32);
    box-shadow: inset 0 0 0 1px rgba(87, 60, 23, 0.35), 0 14px 28px rgba(0, 0, 0, 0.35);
    background: radial-gradient(circle at 20% 20%, #f4dfb2 0%, #e6cf9c 52%, #cfb07a 100%);
}

.book-pages-window::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(68, 42, 16, 0.08) 0, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0) 88%, rgba(68, 42, 16, 0.08) 100%),
        repeating-linear-gradient(0deg, rgba(90, 64, 33, 0.03) 0, rgba(90, 64, 33, 0.03) 2px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0) 5px);
}

.book-pages-track {
    display: flex;
    height: 100%;
    transition: transform 0.36s ease;
    will-change: transform;
}

.book-page {
    min-width: 100%;
    text-align: left;
    color: #2b1c0e;
    height: 100%;
    overflow-y: auto;
    padding: 18px 20px;
}

.book-page h3 {
    margin: 0 0 12px;
    font-size: 1.3rem;
    font-weight: 800;
    color: #4f2f12;
}

.book-page p {
    margin: 0 0 10px;
    line-height: 1.55;
    font-size: 1rem;
}

.book-example {
    font-style: italic;
    color: #5c3918;
}

.book-page .difficulty-box {
    background: rgba(71, 44, 18, 0.08);
    border: 1px solid rgba(71, 44, 18, 0.2);
}

.book-page.book-page-config p {
    margin-bottom: 6px;
    line-height: 1.32;
    font-size: 0.96rem;
}

.book-page.book-page-config .difficulty-box {
    margin: 8px 0 8px;
    padding: 10px 12px;
}

.book-page.book-page-config {
    overflow: hidden;
}

.book-page .difficulty-box label {
    color: #553211;
}

.book-page #length-selector,
.book-page #mode-selector {
    width: 100%;
    background: rgba(255, 248, 228, 0.9);
    color: #2b1c0e;
    border: 1px solid rgba(86, 56, 26, 0.4);
}

.mode-button-group {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.mode-option-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(72, 28, 112, 0.16);
    font-size: 0.96rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

.mode-option-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(72, 28, 112, 0.22);
    filter: brightness(1.03);
}

.mode-option-btn.mode-option-selected {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.28), 0 16px 28px rgba(72, 28, 112, 0.24);
    filter: saturate(1.05);
}

.mode-option-icon {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1;
}

.mode-option-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.mode-option-text {
    font-weight: 800;
    text-align: left;
}

.mode-option-subtext {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}

.mode-warning {
    margin-top: 6px;
    color: #6a5333;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.book-page #start-game-btn {
    margin-top: 6px;
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    font-size: clamp(0.94rem, 1.7vw, 1.08rem);
}

.book-page #start-game-btn:disabled {
    background: linear-gradient(90deg, #4a4456, #5a5565);
    color: rgba(255, 255, 255, 0.72);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    opacity: 0.92;
}

.book-page #start-game-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.book-arrow {
    border: 1px solid rgba(187, 134, 252, 0.55);
    background: rgba(27, 16, 38, 0.92);
    color: #efdcff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.book-arrow:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(187, 134, 252, 0.35);
}

.book-arrow:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    box-shadow: none;
}

.book-nav {
    margin-top: 12px;
    text-align: center;
}

.tutorial-page-indicator {
    color: #d8bbff;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* --- ESTRUTURA DO JOGO --- */
.app-container { display: flex; width: 100%; height: 100%; position: relative; }

/* Botões Mobile (Invisíveis no Desktop) */
.mobile-menu-btn, .mobile-alphabet-btn { display: none; }
.mobile-overlay { display: none; }

/* --- SIDEBAR --- */
.sidebar {
    width: 320px; background: var(--sidebar-bg); padding: 20px;
    border-right: 1px solid #333; display: flex; flex-direction: column;
    gap: 15px; z-index: 20; position: relative; flex-shrink: 0;
    transition: width 0.3s ease;
}
.sidebar-content {
    transition: opacity 0.2s; opacity: 1; display: flex; flex-direction: column; height: 100%;
}

/* Estado Minimizado da Sidebar */
.sidebar.collapsed { width: 80px; padding: 20px 5px; }
.sidebar.collapsed .sidebar-content { opacity: 0; pointer-events: none; position: absolute; }
.sidebar.collapsed .mage-container { transform: scale(0.7); bottom: 10px; } 

/* Botão Toggle da Sidebar */
.sidebar-toggle {
    position: absolute; top: 50%; right: -15px; width: 30px; height: 30px;
    background: var(--accent); color: #000; border: none; border-radius: 50%;
    cursor: pointer; z-index: 50; display: flex; align-items: center; justify-content: center;
    font-weight: bold; box-shadow: 0 0 10px rgba(0,0,0,0.5); transition: 0.3s;
}
.sidebar-toggle:hover { transform: scale(1.1); }

.brand-container h2 { color: var(--accent); margin: 0; font-size: 2rem; text-align: center; }

.collapsible-header {
    font-size: 0.85rem; text-transform: uppercase; color: var(--text-dim);
    letter-spacing: 1px; cursor: pointer; border-bottom: 1px solid #333; padding-bottom: 5px;
    display: flex; justify-content: space-between; align-items: center;
}
.collapsible-header:hover { color: var(--text-main); }
.collapsible-content { overflow: hidden; transition: max-height 0.4s ease-out; max-height: 600px; }
.collapsible-content.hidden { max-height: 0; }

.rule-card {
    background: var(--card-bg); padding: 10px; border-radius: 6px; margin-bottom: 8px;
    border-left: 3px solid #444; opacity: 0.7; transition: all 0.2s; font-size: 0.85rem;
}
.rule-active {
    opacity: 1; border-left-color: var(--accent); background: #383838;
    transform: translateX(3px); box-shadow: 0 0 10px rgba(187, 134, 252, 0.3);
}

.history-list {
    background: #000; border-radius: 6px; padding: 10px; height: 100%;
    overflow-y: auto; font-family: monospace; color: var(--accent);
    border: 1px solid #333; font-size: 0.9rem;
}

/* BOTAO LIMPAR HISTORICO - ESTILO ORIGINAL */
#clear-history {
    background: transparent;
    border: 1px solid var(--error);
    color: var(--error);
    margin-top: 10px;
    padding: 8px;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
    text-transform: uppercase;
    font-weight: bold;
}
#clear-history:hover {
    background: var(--error);
    color: #fff;
}

/* --- MAGO PIXEL ART --- */
.mage-container {
    margin-top: auto; display: flex; justify-content: center; align-items: flex-end;
    padding-bottom: 20px; position: relative; height: 160px; transition: all 0.3s;
}
.pixel-mage {
    position: relative; width: 100px; height: 120px; transition: transform 0.2s;
    image-rendering: pixelated; 
}

/* Partes do Mago */
.hat-tip { position: absolute; top: -35px; left: 35px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 40px solid var(--mage-blue); transform: rotate(-10deg); z-index: 10; }
.hat-base { position: absolute; top: 0; left: 10px; width: 80px; height: 15px; background: var(--mage-dark-blue); border-radius: 4px; z-index: 9; }
.head { position: absolute; top: 10px; left: 25px; width: 50px; height: 45px; background: var(--mage-skin); border-radius: 6px; z-index: 5; }
.eyes { display: flex; justify-content: space-around; padding: 12px 6px 0; }
.eye { width: 6px; height: 6px; background: #000; animation: blink 4s infinite; }
.beard { position: absolute; bottom: -15px; left: 0; width: 100%; height: 35px; background: var(--mage-beard); border-radius: 0 0 20px 20px; clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: 6; }
.body { position: absolute; bottom: 0; left: 25px; width: 50px; height: 60px; background: var(--mage-blue); border-radius: 8px 8px 0 0; z-index: 4; }
.arm { position: absolute; top: 15px; width: 15px; height: 35px; background: var(--mage-dark-blue); border-radius: 4px; transition: 0.3s; }
.arm.left { left: -10px; transform-origin: top right; }
.arm.right { right: -10px; transform-origin: top left; }
.feet { display: flex; justify-content: space-between; position: absolute; bottom: -5px; width: 100%; }
.foot { width: 18px; height: 10px; background: #000; border-radius: 4px; }
.staff { position: absolute; right: 0; bottom: 0; width: 6px; height: 110px; background: #795548; z-index: 8; transform-origin: bottom center; transition: 0.3s; }
.staff-head { position: absolute; top: -10px; left: -7px; width: 20px; height: 20px; background: #5d4037; border-radius: 50%; }
.gem { width: 14px; height: 14px; background: #00e5ff; border-radius: 50%; margin: 3px; box-shadow: 0 0 8px #00e5ff; animation: pulseGem 2s infinite; }

@keyframes blink { 0%, 96%, 100% { height: 6px; } 98% { height: 2px; } }
@keyframes pulseGem { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; box-shadow: 0 0 15px #00e5ff; } }

.pixel-mage.cast .arm.right { transform: rotate(-140deg); }
.pixel-mage.cast .staff { transform: rotate(-15deg) translateY(-5px); }
.pixel-mage.cast .gem { background: #fff; box-shadow: 0 0 20px #fff; }
.pixel-mage.win { animation: jumpHappy 0.5s infinite alternate; }
.pixel-mage.win .arm.left { transform: rotate(130deg); }
.pixel-mage.win .arm.right { transform: rotate(-130deg); }
.pixel-mage.sad .head { background: #cfd8dc; }
.pixel-mage.sad .eye { background: var(--mage-blue); height: 2px; margin-top: 4px; }
.pixel-mage.sad { animation: shakeSad 0.5s; }

@keyframes jumpHappy { 0% { transform: translateY(0); } 100% { transform: translateY(-15px); } }
@keyframes shakeSad { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.mage-effect { position: absolute; top: -40px; font-size: 3rem; opacity: 0; pointer-events: none; }
.mage-effect.active { animation: spellEffect 1s forwards; }
@keyframes spellEffect { 0% { opacity: 1; transform: translateY(20px) scale(0.5); } 100% { opacity: 0; transform: translateY(-60px) scale(1.5); } }

/* --- GAME AREA --- */
.game-area {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 20px 40px; height: 100vh; overflow-y: auto; position: relative;
}
.challenge-header { text-align: center; margin-bottom: 10px; width: 100%; max-width: 800px; flex-shrink: 0; }
.challenge-instruction { color: var(--warning); font-size: 1.1rem; font-weight: bold; margin-bottom: 10px; line-height: 1.3; }
.hint-box {
    background: rgba(45, 45, 45, 0.9); border: 1px solid var(--accent); padding: 10px 20px;
    border-radius: 8px; display: flex; flex-direction: column; align-items: center; width: 100%;
}
.hint-counter { font-size: 0.8rem; color: var(--accent); letter-spacing: 2px; }
.hint-text { font-size: 1.4rem; color: #fff; font-style: italic; }
.fade-out { opacity: 0; transition: 0.2s; } .fade-in { opacity: 1; transition: 0.2s; }

/* BLOCO DE NOTAS */
.notepad-container {
    width: 100%; max-width: 500px; background: #222; border: 1px solid var(--accent);
    border-radius: 8px; margin-bottom: 10px; flex-shrink: 0; transition: all 0.3s;
}
.notepad-header {
    background: var(--accent); color: #000; padding: 5px; font-weight: bold; font-size: 0.9rem;
    text-align: center; cursor: pointer;
}
.notepad-body { padding: 0; height: 80px; transition: height 0.3s; overflow: hidden; }
.notepad-body.minimized { height: 0; }
.notepad-body textarea {
    width: 100%; height: 100%; background: #1a1a1a; border: none; color: #fff; padding: 10px;
    font-family: 'Segoe UI', sans-serif; resize: none; outline: none; font-size: 1rem;
}

/* TABULEIRO */
.board-wrapper {
    flex-grow: 1; display: flex; justify-content: center; align-items: center; width: 100%;
}
.word-grid {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 12px; width: 100%; max-width: 900px;
}
.letter-box {
    width: 60px; height: 80px; background: var(--card-bg); border: 3px solid #444; color: white;
    display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: bold;
    border-radius: 12px; cursor: default; user-select: none; transition: all 0.2s;
}
.letter-box.next-to-change { border-color: var(--warning); box-shadow: 0 0 15px var(--warning); }

.tutorial-message {
    font-size: 1.2rem; color: var(--text-dim); border: 2px dashed #444; padding: 30px; 
    border-radius: 15px; background: rgba(0,0,0,0.3); width: 100%; text-align: center;
}

/* INPUTS */
.input-section { width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; flex-shrink: 0; }
.input-controls { display: flex; gap: 15px; margin-bottom: 10px; }
input {
    background: #000; border: 2px solid #444; color: white; padding: 10px; border-radius: 8px;
    width: 70px; text-align: center; font-size: 1.8rem; outline: none;
}
input:focus { border-color: var(--accent); }
button#validate-btn {
    background: var(--accent); color: #000; border: none; padding: 0 30px; border-radius: 8px;
    font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: transform 0.1s;
}
button#validate-btn:active { transform: scale(0.95); }

/* NOTIFICA�?�.ES */
.notification-area { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40px; }
.inline-message {
    background: var(--warning); color: #000; padding: 8px 20px; border-radius: 20px;
    font-weight: bold; font-size: 1.1rem; margin-bottom: 5px; animation: popIn 0.3s;
}
.inline-message.hidden { display: none; }
.feedback { font-weight: bold; font-size: 1.3rem; margin-bottom: 5px; }
.meaning-display { color: var(--text-dim); font-style: italic; font-size: 1rem; }
.meaning-display.hidden { opacity: 0; }

@keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }

/* ALFABETO */
.alphabet-wrapper {
    width: 100%; max-width: 800px; background: rgba(30, 30, 30, 0.5); 
    border: 1px solid #444; border-radius: 8px; flex-shrink: 0;
}
.alphabet-header {
    padding: 5px; font-size: 0.8rem; text-transform: uppercase; color: var(--text-dim);
    text-align: center; border-bottom: 1px solid #444;
}
.alphabet-content { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; padding: 10px; }
.mini-char { 
    position: relative; /* <-- Adicione esta linha */
    width: 100%; 
    aspect-ratio: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.9rem; 
    color: #555; 
    font-weight: bold; 
    border-radius: 4px; 
    background: #222; 
    transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    transform-origin: center;
}
.mini-char.active { color: #000; background-color: var(--accent); }
.mini-char:hover {
    transform: scale(1.12);
    color: #f0f0f0;
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.45);
    z-index: 2;
}
.mini-char.active:hover {
    color: #000;
    box-shadow: 0 0 12px rgba(187, 134, 252, 0.65);
}

/* --- NOVA CLASSE PARA A LETRA PEQUENA --- */
.mirrored-letter {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.62rem; /* Mais visível sem competir com a letra principal */
    opacity: 0.95;
    font-weight: 700;
    color: #d8d8d8;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.25);
}
.mini-char.active .mirrored-letter {
    color: #1a1a1a;
    opacity: 0.9;
}
.mini-char:hover .mirrored-letter {
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.45);
}
/* TOOLTIP & EXTRAS */
.tooltip, .tooltip-inline {
    background: #333; color: #fff; border-radius: 50%; width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; cursor: help; margin-left: 5px; border: 1px solid #555;
}
.confetti { position: fixed; top: -10px; width: 10px; height: 10px; z-index: 9999; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
.success-flash { box-shadow: inset 0 0 60px rgba(3, 218, 198, 0.3); }
.error-flash { box-shadow: inset 0 0 60px rgba(207, 102, 121, 0.3); }

/* ================= MODAL DE REGRAS (CLIQUE) ================= */
.rules-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(3px);
}
.rules-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.rules-modal-box {
    background: var(--sidebar-bg);
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 30px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 50px rgba(0,0,0,0.9);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.5;
    transform: scale(0.8);
    transition: transform 0.3s;
}
.rules-modal-overlay.active .rules-modal-box {
    transform: scale(1);
}

.close-rules-btn {
    position: absolute;
    top: 15px; right: 20px;
    background: transparent;
    color: var(--error);
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    transition: 0.2s;
    font-weight: bold;
}
.close-rules-btn:hover {
    transform: scale(1.2);
}

.rules-modal-box h4 { margin: 15px 0 5px 0; font-size: 1.05rem; }
.rules-modal-box p { margin: 5px 0; }
.rules-modal-box code { background: #000; padding: 2px 6px; border-radius: 4px; color: var(--accent); font-weight: bold; font-size: 1rem; }/* ==========================================================================
   BOLHA DE PROTECAO MOBILE
   ========================================================================== */
@media (max-width: 800px) {
    /* Adaptação do Popup de Regras para Mobile */
    .rules-detail-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        width: 90%;
        margin-left: 0;
    }
    .rules-hover-trigger:hover .rules-detail-popup {
        transform: translate(-50%, -50%) scale(1);
    }

    html, body {
        height: auto !important;
        min-height: 100dvh;
        overflow-y: auto !important;
        overflow-x: hidden;
        display: block;
        -webkit-text-size-adjust: 100%;
        overscroll-behavior-y: contain;
    }

    .app-container {
        height: auto !important;
        min-height: 100dvh;
        display: block;
    }

    .game-area {
        height: auto !important;
        min-height: 100dvh;
        padding: calc(env(safe-area-inset-top, 0px) + 72px) 14px calc(env(safe-area-inset-bottom, 0px) + 20px) 14px;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    .board-wrapper {
        flex-grow: 0;
        margin: 20px 0;
    }
    .letter-box { width: 45px; height: 60px; font-size: 1.8rem; border-width: 2px; }
    .word-grid { gap: 8px; }

    .mobile-menu-btn {
        display: none;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 12px);
        left: 12px;
        width: 45px;
        height: 45px;
        background: var(--accent);
        color: #000;
        border: none;
        border-radius: 8px;
        font-size: 1.5rem;
        z-index: 6000;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        touch-action: manipulation;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: min(88vw, 360px);
        height: 100dvh;
        z-index: 5001;
        box-shadow: 5px 0 20px rgba(0,0,0,0.5);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
    }
    .sidebar.mobile-open { left: 0; }
    .sidebar-toggle { display: none; }

    .mobile-alphabet-btn { display: none !important; }

    .alphabet-wrapper {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        right: auto !important;
        top: auto !important;
        box-shadow: none !important;
        padding: 10px !important;
        margin-top: 20px !important;
        z-index: 10;
        background: rgba(30, 30, 30, 0.5) !important;
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid #444;
    }

    .mage-container { transform: scale(0.9); transform-origin: bottom center; }

    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        background: rgba(0,0,0,0.7);
        z-index: 5000;
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    .mobile-overlay.active {
        display: block;
        opacity: 1;
        pointer-events: all;
    }

    .challenge-instruction { font-size: 0.95rem; }
    .hint-text { font-size: 1.05rem; }

    .input-controls {
        width: 100%;
        gap: 10px;
        justify-content: center;
    }
    #clear-board-btn {
        padding: 10px 12px !important;
        font-size: 0.95rem !important;
    }
    input#char-input {
        width: 64px;
        font-size: 1.6rem;
        min-height: 44px;
    }
    button#validate-btn {
        min-height: 44px;
        padding: 0 18px;
        font-size: 1rem;
    }

    .modal-content {
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        padding: 24px 16px;
        margin: 12px;
    }
    .book-tutorial {
        width: calc(100% - 16px);
        padding: 18px 12px 14px;
    }

    .book-shell {
        grid-template-columns: 40px 1fr 40px;
        gap: 8px;
    }

    .book-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.6rem;
    }

    .book-page {
        padding: 16px 14px;
    }

    .book-page h3 {
        font-size: 1.08rem;
        margin-bottom: 8px;
    }

    .book-page p {
        font-size: 0.95rem;
        line-height: 1.44;
        margin-bottom: 8px;
    }

    .book-page.book-page-config .difficulty-box {
        margin: 10px 0 8px;
        padding: 10px 12px;
    }

    .hub-content {
        width: calc(100% - 24px);
        max-width: 520px;
        padding: 24px 16px;
        margin: 12px;
    }
    .hub-title {
        font-size: clamp(2rem, 8vw, 2.6rem);
    }
    .hub-btn {
        font-size: 1.05rem;
        padding: 13px 18px;
        min-height: 48px;
    }
}
/* ================= HUB PRINCIPAL ================= */

.hub-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 6000;
}

.hub-content {
    text-align: center;
    border: 2px solid var(--accent);
    padding: 50px;
    border-radius: 20px;
    background: rgba(30,30,30,0.95);
    box-shadow: 0 0 40px rgba(187,134,252,0.3);
}

.hub-title {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 10px;
}

.hub-sub {
    color: var(--text-dim);
    margin-bottom: 40px;
}

.hub-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hub-btn {
    background: var(--accent);
    color: #000;
    border: none;
    padding: 15px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.hub-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px var(--accent);
}
.hub-difficulty-box {
    margin-top: 14px;
    text-align: left;
    padding: 12px;
    border: 1px solid #4a3d65;
    border-radius: 10px;
    background: rgba(12, 12, 18, 0.75);
}

.hub-difficulty-box label {
    display: block;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 700;
}

.hub-difficulty-box select {
    width: 100%;
    background: #000;
    color: #fff;
    border: 1px solid #6a52a0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.95rem;
}
/* ================= EASTER EGG DA GALINHA ================= */
.feedback { text-align: center; } /* Garante que a frase fique centralizada */

.flying-chicken {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8rem; /* Tamanho gigante */
    z-index: 9999;
    pointer-events: none; /* Para não atrapalhar o clique do jogador */
    animation: chickenFly 3s ease-in-out forwards;
}

@keyframes chickenFly {
    0% { bottom: -100px; transform: translateX(-50%) rotate(0deg); opacity: 1; }
    50% { bottom: 50%; transform: translateX(-50%) rotate(20deg) scale(1.5); }
    100% { bottom: 120%; transform: translateX(-50%) rotate(-20deg); opacity: 0; }
}



/* ================= AUTH / PERFIL ================= */
.hidden-control { display: none !important; }

/* Popup do mago: base desktop (mobile sobrescreve no @media) */
.mobile-victory-modal,
.mobile-error-modal {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mobile-victory-card,
.mobile-error-card {
    width: min(86vw, 520px);
    border: 1px solid #b88bff;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 10%, rgba(139, 83, 245, 0.34), rgba(28, 19, 44, 0.96));
    box-shadow: 0 0 30px rgba(187, 134, 252, 0.35);
    text-align: center;
    padding: 18px 16px 20px;
}

.mobile-victory-title,
.mobile-error-title {
    color: #f2deff;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.mobile-error-phrase {
    color: rgba(242, 222, 255, 0.95);
    font-size: 1.25rem;
    line-height: 1.35;
    margin: 10px auto 0;
    max-width: 94%;
}

.mobile-victory-mage,
.mobile-error-mage {
    margin: 0 auto;
    transform: scale(1.04);
}

.hub-logout-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: transparent;
    color: var(--error);
    border: 1px solid var(--error);
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    z-index: 6100;
}
.hub-logout-btn:hover { background: var(--error); color: #fff; }

.user-menu {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 120;
}
.user-menu-trigger {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid #555;
    border-radius: 999px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    cursor: pointer;
}
.user-avatar-top {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--accent);
    background: #111;
}
.user-name-top {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}
.user-menu-caret { color: var(--accent); font-size: 0.9rem; }
.user-menu-dropdown {
    margin-top: 6px;
    background: #1b1b1b;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    min-width: 170px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.user-menu-dropdown button {
    background: transparent;
    border: 1px solid transparent;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
}
.user-menu-dropdown button:hover {
    border-color: var(--accent);
    background: rgba(187, 134, 252, 0.12);
}

.profile-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 7000;
    backdrop-filter: blur(3px);
}
.profile-card {
    position: relative;
    width: min(92vw, 520px);
    background: #1f1f1f;
    border: 1px solid var(--accent);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 0 35px rgba(187,134,252,0.2);
}
.profile-card h3 {
    margin: 0 0 14px;
    color: var(--accent);
}
.profile-close {
    position: absolute;
    right: 10px;
    top: 10px;
    background: transparent;
    border: none;
    color: var(--error);
    font-size: 1.3rem;
    cursor: pointer;
}
.profile-auth-panel,
.profile-auth-email-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.profile-auth-email {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile-auth-email input,
.profile-main input[type='text'],
.profile-main input[type='email'],
.profile-main input[type='password'] {
    width: 100%;
    background: #111;
    color: #fff;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px;
}
.profile-btn {
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    padding: 10px;
    cursor: pointer;
}


.profile-divider {
    height: 1px;
    background: #444;
    margin: 14px 0;
}
.profile-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
    background: #111;
}
.profile-points {
    color: var(--success);
    font-weight: 700;
}
.profile-status {
    min-height: 20px;
    color: var(--warning);
    font-size: 0.9rem;
}

.ranking-card { width: min(92vw, 620px); }
.ranking-list {
    max-height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
}
.ranking-item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    align-items: center;
    background: #161616;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 8px 10px;
}
.ranking-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: #111;
    border: 1px solid #666;
}

@media (max-width: 800px) {
    .user-menu {
        top: 10px;
        right: 10px;
    }
    .user-name-top { max-width: 84px; }
    .hub-logout-btn {
        right: 12px;
        bottom: 12px;
        padding: 8px 12px;
    }
    .profile-auth-panel,
    .profile-auth-email-actions {
        grid-template-columns: 1fr;
    }
}
.auth-gate {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8000;
    background: radial-gradient(circle at center, #141320 0%, #050508 100%);
}
.auth-gate-card {
    width: min(92vw, 520px);
    background: #1f1f1f;
    border: 1px solid var(--accent);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 0 45px rgba(187,134,252,0.2);
}
.auth-gate-card h2 {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 2rem;
}
.auth-gate-card p {
    margin: 0 0 14px;
    color: var(--text-dim);
}
.auth-brand {
    color: #e8d1ff;
    font-size: 2rem;
    letter-spacing: 2px;
    font-weight: 800;
    margin-bottom: 8px;
}
.auth-gate-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.auth-gate-inputs input {
    width: 100%;
    background: rgba(10, 10, 16, 0.85);
    border: 1px solid #5b4f77;
    border-radius: 10px;
    color: #fff;
    padding: 14px;
    font-size: 1.05rem;
}
.auth-gate-main-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.auth-main-btn {
    background: linear-gradient(90deg, #8d5bf7, #c43fd8);
    color: #fff;
}
.auth-secondary-btn {
    background: transparent;
    color: #fff;
    border: 1px solid #7f65b8;
}
.auth-divider-line {
    margin: 8px 0 12px;
    text-align: center;
    color: #c4b2e2;
    font-size: 0.95rem;
    position: relative;
}
.auth-divider-line::before,
.auth-divider-line::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: #5d4d80;
}
.auth-divider-line::before { left: 0; }
.auth-divider-line::after { right: 0; }
.auth-gate-social-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.auth-gate-social-row .profile-btn {
    width: min(240px, calc(50% - 6px));
    min-height: 52px;
}
.icon-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}
.icon-btn .icon-mark {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.25);
    font-size: 14px;
}
.auth-google {
    background: #ffffff;
    color: #1f1f1f;
    border: 1px solid #dadce0;
}
.auth-google:hover {
    filter: brightness(0.98);
}
.auth-google .google-mark {
    background: transparent;
    color: transparent;
    border-radius: 0;
    font-size: 1.3rem;
    font-weight: 700;
    background-image: conic-gradient(from 220deg, #4285F4 0deg 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg);
    -webkit-background-clip: text;
    background-clip: text;
}
.auth-anon {
    background: #ffd54f;
    color: #1f1f1f;
    border: 1px solid #e0b832;
}

@media (max-width: 800px) {
    .auth-gate-main-actions {
        grid-template-columns: 1fr;
    }
    .auth-gate-social-row {
        flex-direction: column;
        align-items: stretch;
    }
    .auth-gate-social-row .profile-btn {
        width: 100%;
    }
}

.arcane-profile-card {
    width: min(92vw, 520px);
    background: radial-gradient(circle at 40% 15%, rgba(137, 65, 176, 0.22) 0%, rgba(30, 20, 46, 0.92) 55%, rgba(20, 14, 31, 0.96) 100%);
    border: 1px solid rgba(194, 134, 255, 0.55);
    box-shadow: 0 0 36px rgba(187, 134, 252, 0.25), inset 0 0 32px rgba(187, 134, 252, 0.08);
}
.arcane-profile-card h3 {
    margin-bottom: 18px;
    font-size: 2rem;
    color: #d8b2ff;
}
.profile-avatar-wrap {
    width: 118px;
    height: 118px;
    margin: 0 auto;
    border-radius: 50%;
    padding: 4px;
    background: radial-gradient(circle, #ff8cff 0%, #8e5bff 70%);
    box-shadow: 0 0 18px rgba(221, 137, 255, 0.45);
}
.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.32);
}
.profile-name-title {
    margin-top: 8px;
    font-size: 2rem;
    text-align: center;
    color: #f4e4ff;
    font-weight: 700;
}
.profile-points,
.profile-rank {
    text-align: center;
    font-size: 1.15rem;
    color: #b9ffff;
}
.profile-rank { color: #dac8ff; }
.profile-name-edit,
.profile-ghost-btn {
    width: 100%;
}
.profile-name-edit {
    background: rgba(8, 8, 14, 0.82);
    border: 1px solid #8b6cc0;
    border-radius: 10px;
    color: #fff;
    padding: 12px;
    font-size: 1.1rem;
}
.profile-ghost-btn {
    background: transparent;
    color: #f0dbff;
    border: 1px solid #9f7add;
}
.profile-danger-btn {
    background: transparent;
    color: #ffd5f7;
    border: 1px solid #b86ac8;
}
.profile-danger-btn:hover,
.profile-ghost-btn:hover {
    background: rgba(187, 134, 252, 0.16);
}
/* ================= MOBILE UX REWORK (ONLY MOBILE) ================= */
@media (max-width: 800px) {
    .sidebar.mobile-sidebar-hidden {
        display: none !important;
    }

    .mobile-menu-btn,
    .mobile-alphabet-btn {
        display: none !important;
    }

    .mobile-slot {
        display: block;
        width: 100%;
        margin-bottom: 12px;
    }

    .mobile-panel {
        border: 1px solid #6d54a1;
        border-radius: 12px;
        background: rgba(26, 22, 36, 0.9);
        overflow: hidden;
    }

    .mobile-panel-title {
        background: linear-gradient(90deg, rgba(141, 91, 247, 0.95), rgba(196, 63, 216, 0.95));
        color: #100818;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        font-size: 0.82rem;
        padding: 9px 12px;
    }

    .mobile-panel-body {
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-panel-body .collapsible-section {
        margin-top: 0 !important;
        display: block !important;
        flex-grow: 0 !important;
    }

    .mobile-panel-body .collapsible-header {
        font-size: 0.78rem;
        letter-spacing: 1px;
    }

    .mobile-panel-body .history-list {
        min-height: 110px;
        max-height: 170px;
    }

    #mobile-tools-slot #notepad {
        margin-bottom: 0;
        max-width: 100%;
    }

    #mobile-tools-slot #notepad .notepad-body {
        height: 90px;
    }

    #alphabet-drawer {
        margin-top: 30px !important;
        padding: 14px !important;
    }

    #mini-alphabet.alphabet-content {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 10px;
        padding: 12px 8px;
    }

    #mini-alphabet .mini-char {
        min-height: 56px;
        font-size: 1.05rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        border-radius: 8px;
        padding: 6px 4px;
    }

    #mini-alphabet .mirrored-letter {
        position: static;
        font-size: 0.7rem;
        opacity: 0.85;
        line-height: 1;
        font-weight: 600;
    }

    .input-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 12px;
    }

    .input-controls #char-input {
        display: none !important;
    }

    .input-controls #clear-board-btn,
    .input-controls #validate-btn {
        width: 100%;
        min-height: 50px;
    }

    .mobile-victory-modal {
        position: fixed;
        inset: 0;
        z-index: 9100;
        background: rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(3px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .mobile-victory-card {
        width: min(92vw, 340px);
        border: 1px solid #b88bff;
        border-radius: 16px;
        background: radial-gradient(circle at 50% 10%, rgba(139, 83, 245, 0.34), rgba(28, 19, 44, 0.96));
        box-shadow: 0 0 30px rgba(187, 134, 252, 0.35);
        text-align: center;
        padding: 16px 14px 18px;
    }

    .mobile-victory-title {
        color: #f2deff;
        font-size: 1.3rem;
        font-weight: 900;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .mobile-victory-mage {
        margin: 0 auto;
        transform: scale(1.08);
    }
}

/* ================= MOBILE RE-TUNE (NO DESKTOP CHANGE) ================= */
@media (max-width: 800px) {
    html, body, .app-container {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .game-area {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        display: grid;
        grid-template-rows: auto auto minmax(76px, 1fr) auto auto;
        gap: 8px;
        padding: calc(env(safe-area-inset-top, 0px) + 62px) 10px calc(env(safe-area-inset-bottom, 0px) + 6px) 10px !important;
    }

    .challenge-header {
        margin-bottom: 0;
    }

    .challenge-instruction {
        font-size: 0.82rem;
        margin-bottom: 6px;
        line-height: 1.2;
    }

    .hint-box {
        padding: 8px 10px;
    }

    .hint-text {
        font-size: 0.92rem;
    }

    #mobile-rules-slot {
        display: block !important;
        margin-bottom: 0;
    }

    .mobile-slot .mobile-panel {
        border-radius: 10px;
    }

    .mobile-slot .mobile-panel-title {
        font-size: 0.74rem;
        padding: 7px 10px;
    }

    .mobile-slot .mobile-panel-body {
        padding: 7px;
        gap: 6px;
    }

    #mobile-rules-slot .collapsible-header {
        font-size: 0.7rem;
        padding-bottom: 4px;
    }

    #mobile-rules-slot .rule-card {
        padding: 6px 8px;
        margin-bottom: 5px;
        font-size: 0.72rem;
        line-height: 1.25;
    }

    #mobile-rules-slot em {
        font-size: 0.68rem;
    }

    #mobile-tools-slot,
    #notepad {
        display: none !important;
    }

    .sidebar.mobile-open {
        left: 0 !important;
        width: min(88vw, 350px);
    }

    .sidebar.mobile-open .brand-container,
    .sidebar.mobile-open .mage-container {
        display: none;
    }

    .sidebar.mobile-open .collapsible-section:first-of-type {
        display: none !important;
    }

    .sidebar.mobile-open .collapsible-section {
        margin-top: 0 !important;
    }

    .sidebar.mobile-open .collapsible-header {
        font-size: 0.78rem;
    }

    .sidebar.mobile-open .history-list {
        min-height: 120px;
        max-height: 180px;
    }

    .sidebar.mobile-open #clear-history {
        min-height: 42px;
    }

    .board-wrapper {
        margin: 0;
        align-items: center;
        min-height: 76px;
    }

    .tutorial-message {
        font-size: 0.9rem;
        padding: 10px 8px;
        border-radius: 10px;
        line-height: 1.2;
    }

    .word-grid {
        gap: 6px;
    }

    .letter-box {
        width: 36px;
        height: 46px;
        font-size: 1.45rem;
        border-width: 2px;
    }

    .input-section {
        margin-bottom: 0;
    }

    .notification-area {
        min-height: 26px;
    }

    .feedback {
        font-size: 0.88rem;
        margin-bottom: 0;
        line-height: 1.15;
    }

    .input-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 6px;
    }

    .input-controls #char-input {
        display: none !important;
    }

    .input-controls #clear-board-btn,
    .input-controls #validate-btn {
        width: 100%;
        min-height: 42px;
        font-size: 0.95rem !important;
        padding: 0 10px !important;
    }

    #alphabet-drawer {
        margin-top: 2px !important;
        padding: 8px !important;
    }

    #alphabet-drawer .alphabet-header {
        font-size: 0.72rem;
        padding: 4px;
    }

    #mini-alphabet.alphabet-content {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px;
        padding: 8px 4px;
    }

    #mini-alphabet .mini-char {
        min-height: 42px;
        font-size: 0.95rem;
        gap: 4px;
        padding: 4px 2px;
        border-radius: 7px;
    }

    #mini-alphabet .mirrored-letter {
        position: static;
        font-size: 0.62rem;
        opacity: 0.84;
        line-height: 1;
    }

    .mobile-victory-modal,
    .mobile-error-modal {
        position: fixed;
        inset: 0;
        z-index: 9100;
        background: rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(3px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .mobile-victory-card,
    .mobile-error-card {
        width: min(90vw, 300px);
        border: 1px solid #b88bff;
        border-radius: 14px;
        background: radial-gradient(circle at 50% 10%, rgba(139, 83, 245, 0.34), rgba(28, 19, 44, 0.96));
        box-shadow: 0 0 30px rgba(187, 134, 252, 0.35);
        text-align: center;
        padding: 12px 10px 14px;
    }

    .mobile-victory-title,
    .mobile-error-title {
        color: #f2deff;
        font-size: 1.05rem;
        font-weight: 900;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .mobile-error-phrase {
        color: rgba(242, 222, 255, 0.95);
        font-size: 0.78rem;
        line-height: 1.3;
        margin: 8px auto 0;
        max-width: 94%;
    }

    .mobile-victory-mage,
    .mobile-error-mage {
        margin: 0 auto;
        transform: scale(0.95);
    }
}

@media (max-width: 800px) {
    .mobile-menu-btn {
        display: none !important;
    }
    .mobile-alphabet-btn {
        display: none !important;
    }
}

@media (max-width: 800px) {
    .input-controls {
        grid-template-columns: 1fr 66px 1fr !important;
    }

    .input-controls #char-input {
        display: block !important;
        width: 66px !important;
        min-height: 42px;
        font-size: 1.45rem;
        text-align: center;
        pointer-events: none;
    }
}

/* ================= MOBILE FINAL FINE TUNE ================= */
@media (max-width: 800px) {
    .game-area {
        grid-template-rows: auto auto minmax(48px, 1fr) auto auto !important;
        gap: 6px !important;
        padding: calc(env(safe-area-inset-top, 0px) + 60px) 10px calc(env(safe-area-inset-bottom, 0px) + 6px) 10px !important;
    }

    .challenge-instruction {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
    }

    .hint-box {
        padding: 7px 9px !important;
    }

    .hint-text {
        font-size: 0.88rem !important;
    }

    #mobile-rules-slot .mobile-panel-title {
        font-size: 0.7rem !important;
        padding: 6px 9px !important;
    }

    #mobile-rules-slot .mobile-panel-body {
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobile-rules-slot .rule-card {
        padding: 5px 7px !important;
        margin-bottom: 4px !important;
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
    }

    #mobile-rules-slot .collapsible-header {
        font-size: 0.68rem !important;
    }

    #mobile-rules-slot em {
        font-size: 0.64rem !important;
    }

    .game-area > #notepad {
        display: none !important;
    }

    .sidebar.mobile-open {
        left: 0 !important;
        width: min(88vw, 350px);
        padding-top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
    }

    .sidebar.mobile-open .sidebar-content {
        padding-top: 4px;
    }

    .sidebar.mobile-open #notepad,
    .sidebar.mobile-open #notepad.mobile-notepad-in-sidebar {
        display: block !important;
        margin: 0 0 10px 0 !important;
        width: 100% !important;
    }

    .sidebar.mobile-open #notepad .notepad-body {
        height: 110px !important;
    }

    .sidebar.mobile-open .collapsible-section:first-of-type {
        display: none !important;
    }

    .board-wrapper {
        min-height: 64px !important;
    }

    .tutorial-message {
        font-size: 0.84rem !important;
        padding: 8px 7px !important;
    }

    .letter-box {
        width: 34px !important;
        height: 42px !important;
        font-size: 1.28rem !important;
    }

    .input-section {
        margin-bottom: 2px !important;
    }

    .input-controls {
        margin-bottom: 2px !important;
        transform: translateY(-4px);
        position: relative;
        z-index: 2;
    }

    #alphabet-drawer {
        margin-top: 0 !important;
        padding: 6px !important;
        position: relative;
        z-index: 1;
        flex-shrink: 0;
    }

    #alphabet-drawer .alphabet-header {
        font-size: 0.68rem !important;
        padding: 3px !important;
    }

    #mini-alphabet.alphabet-content {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 6px 2px !important;
    }

    #mini-alphabet .mini-char {
        min-height: 31px !important;
        font-size: 0.82rem !important;
        gap: 2px !important;
        padding: 3px 1px !important;
        border-radius: 6px !important;
    }

    #mini-alphabet .mirrored-letter {
        font-size: 0.5rem !important;
        opacity: 0.9 !important;
    }

    .input-controls #char-input {
        width: 60px !important;
        min-height: 40px !important;
        font-size: 1.35rem !important;
    }
}
@media (max-width: 800px) {
    .sidebar.mobile-open .collapsible-section:first-of-type {
        display: block !important;
    }
}

/* ================= MOBILE POLISH FINAL ================= */
@media (max-width: 800px) {
    .sidebar.mobile-open {
        padding-top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
    }

    .sidebar.mobile-open .sidebar-content {
        padding-top: 10px !important;
    }

    .sidebar.mobile-open .collapsible-section:first-of-type {
        display: none !important;
    }

    .sidebar.mobile-open #notepad,
    .sidebar.mobile-open #notepad.mobile-notepad-in-sidebar {
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
    }

    .sidebar.mobile-open #notepad .notepad-body {
        height: 120px !important;
    }

    #mobile-rules-slot .mobile-panel-title {
        padding: 5px 8px !important;
        font-size: 0.68rem !important;
    }

    #mobile-rules-slot .mobile-panel-body {
        padding: 5px !important;
        gap: 3px !important;
    }

    #mobile-rules-slot .rule-card {
        padding: 4px 6px !important;
        margin-bottom: 3px !important;
        font-size: 0.66rem !important;
        line-height: 1.15 !important;
    }

    #mobile-rules-slot .collapsible-header {
        font-size: 0.66rem !important;
        padding-bottom: 3px !important;
    }

    #mobile-rules-slot em {
        font-size: 0.62rem !important;
    }

    .input-controls {
        grid-template-columns: 1fr 58px 1fr !important;
        align-items: stretch !important;
        gap: 8px !important;
        transform: translateY(-8px) !important;
        margin-bottom: 0 !important;
    }

    .input-controls #clear-board-btn,
    .input-controls #validate-btn,
    .input-controls #char-input {
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
    }

    .input-controls #char-input {
        display: block !important;
        width: 58px !important;
        font-size: 1.28rem !important;
        border: 1px solid #5e4b84 !important;
        color: #c8a0ff !important;
        background: #0f0f14 !important;
    }

    .input-controls #clear-board-btn {
        font-size: 0.92rem !important;
    }

    .input-controls #validate-btn {
        font-size: 0.98rem !important;
        box-shadow: 0 0 0 1px rgba(187,134,252,0.25) inset;
    }

    #alphabet-drawer {
        margin-top: -2px !important;
        padding: 5px !important;
    }

    #alphabet-drawer .alphabet-header {
        font-size: 0.66rem !important;
        padding: 2px !important;
    }

    #mini-alphabet.alphabet-content {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 3px !important;
        padding: 4px 2px !important;
    }

    #mini-alphabet .mini-char {
        min-height: 28px !important;
        height: 28px !important;
        font-size: 0.76rem !important;
        gap: 1px !important;
        padding: 2px 1px !important;
    }

    #mini-alphabet .mirrored-letter {
        font-size: 0.45rem !important;
        opacity: 0.95 !important;
    }
}

/* ================= PALAVRA DO DIA (HUB + RESULTADO) ================= */
.daily-hub-card {
    width: 320px;
    margin-left: 36px;
    padding: 24px 20px;
    border: 2px solid var(--accent);
    border-radius: 18px;
    background: rgba(20, 20, 25, 0.92);
    box-shadow: 0 0 35px rgba(187, 134, 252, 0.25);
}
.daily-hub-card h3 {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: 1.45rem;
}
.daily-hub-status {
    margin: 0 0 14px;
    color: var(--text-dim);
    line-height: 1.4;
    min-height: 40px;
}
.daily-hub-play-btn {
    width: 100%;
    border: 1px solid var(--accent);
    background: linear-gradient(90deg, rgba(122, 75, 205, 0.95), rgba(187, 134, 252, 0.95));
    color: #111;
    border-radius: 10px;
    padding: 13px 14px;
    font-weight: 800;
    cursor: pointer;
}
.daily-hub-play-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.daily-hub-mobile {
    display: none;
    margin-top: 16px;
    border: 1px solid #4f3c78;
    border-radius: 12px;
    padding: 12px;
    text-align: left;
    background: rgba(12, 12, 17, 0.85);
}
.daily-hub-title {
    color: var(--accent);
    font-weight: 800;
    margin-bottom: 6px;
}
.daily-hub-difficulty {
    margin: 8px 0 10px;
}

.daily-hub-difficulty label {
    display: block;
    margin-bottom: 5px;
    color: #d8c9ff;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.daily-hub-difficulty select {
    width: 100%;
    background: #09070f;
    color: #f5ecff;
    border: 1px solid #6d58a0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.9rem;
}

.daily-status-bar {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #5e4c82;
    border-radius: 8px;
    background: rgba(24, 21, 35, 0.85);
    color: #efe8ff;
    font-size: 0.95rem;
}
.daily-status-mode { color: var(--accent); font-weight: 700; }

.daily-result-card {
    width: min(92vw, 460px);
}
.daily-result-line {
    margin: 8px 0;
    color: #f4f0ff;
    font-size: 1.05rem;
}
.daily-result-meaning {
    margin: 12px 0;
    color: var(--text-dim);
    font-style: italic;
}
.daily-result-record {
    margin: 10px 0;
    color: var(--success);
    font-weight: 700;
}

@media (max-width: 800px) {
    .hub-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 12px;
    }
    .daily-hub-card {
        display: none;
    }
    .daily-hub-mobile {
        display: block;
    }
}




/* ===== Mobile ajuste fino: menu hambúrguer só no gameplay e rascunho fora do menu ===== */
@media (max-width: 800px) {
    .game-area > #notepad {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 8px 0 !important;
    }

    .sidebar.mobile-open #notepad,
    .sidebar.mobile-open #notepad.mobile-notepad-in-sidebar {
        display: none !important;
    }

    .sidebar.mobile-open .collapsible-section:first-of-type {
        display: none !important;
    }
}

/* ===== Hambúrguer apenas em gameplay (mobile) ===== */
@media (max-width: 800px) {
    #mobile-menu-btn {
        display: none !important;
    }

    body.mobile-gameplay-active #mobile-menu-btn {
        display: flex !important;
    }
}

/* ===== MOBILE HOTFIX: restaura livro + gameplay proporcional ===== */
@media (max-width: 800px) {
    /* Base móvel: evita travamento visual causado por blocos antigos */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* Mantém hub/tutorial sem scroll externo */
    body.mobile-mode:not(.mobile-gameplay-active) {
        overflow: hidden !important;
    }

    /* Gameplay volta a fluir sem sobreposição */
    body.mobile-gameplay-active {
        overflow-y: auto !important;
    }
    body.mobile-gameplay-active .app-container {
        height: auto !important;
        min-height: 100dvh !important;
    }
    body.mobile-gameplay-active .game-area {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        gap: 8px !important;
        padding: calc(env(safe-area-inset-top, 0px) + 66px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px) 10px !important;
    }

    /* Livro: restaura conteúdo textual e botão final */
    .modal-content.book-tutorial {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        overflow: hidden !important;
    }
    .book-shell {
        min-height: 0 !important;
        align-items: stretch !important;
    }
    .book-pages-window {
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    .book-pages-track {
        height: 100% !important;
    }
    .book-page {
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 12px 10px 16px !important;
    }
    .book-page #start-game-btn {
        margin-top: 10px !important;
        min-height: 46px !important;
    }

    /* Gameplay: polimento de proporção e limpeza visual */
    body.mobile-gameplay-active .challenge-header {
        margin-bottom: 0 !important;
    }
    body.mobile-gameplay-active .hint-box {
        padding: 8px 10px !important;
    }

    body.mobile-gameplay-active .game-area > #notepad {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 4px 0 2px 0 !important;
    }
    body.mobile-gameplay-active .game-area > #notepad .notepad-body {
        height: 86px !important;
    }

    body.mobile-gameplay-active #mobile-rules-slot .mobile-panel-body {
        padding: 7px !important;
        gap: 6px !important;
    }
    body.mobile-gameplay-active #mobile-rules-slot .rule-card {
        font-size: 0.78rem !important;
        line-height: 1.24 !important;
        padding: 7px 8px !important;
        margin-bottom: 5px !important;
    }

    body.mobile-gameplay-active .input-controls {
        transform: none !important;
        margin: 2px 0 2px 0 !important;
        grid-template-columns: 1fr 60px 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    body.mobile-gameplay-active .input-controls #clear-board-btn,
    body.mobile-gameplay-active .input-controls #char-input,
    body.mobile-gameplay-active .input-controls #validate-btn {
        min-height: 46px !important;
        height: 46px !important;
    }

    body.mobile-gameplay-active #alphabet-drawer {
        margin-top: 8px !important;
        padding: 8px !important;
    }
}


/* ===== MOBILE FINAL PROPORTIONAL TUNE (tutorial + gameplay sem scroll) ===== */
@media (max-width: 800px) {
    /* ---------- TUTORIAL ---------- */
    body.mobile-mode:not(.mobile-gameplay-active) {
        overflow: hidden !important;
    }

    .welcome-container {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px calc(env(safe-area-inset-bottom, 0px) + 6px) 8px !important;
    }

    .modal-content.book-tutorial {
        width: 100% !important;
        max-width: none !important;
        height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 12px) !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 12px) !important;
        margin: 0 !important;
        padding: 10px 8px 8px !important;
        display: grid !important;
        grid-template-rows: auto 1fr auto !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    .book-tutorial-header h2 {
        margin: 0 0 2px !important;
        font-size: clamp(1.65rem, 7.2vw, 2.5rem) !important;
        line-height: 1.04 !important;
    }

    .book-tutorial-header p {
        margin: 0 !important;
        font-size: clamp(0.9rem, 3.4vw, 1.08rem) !important;
        line-height: 1.2 !important;
    }

    .book-skip-btn {
        margin-top: 4px !important;
        min-height: 32px !important;
        padding: 5px 10px !important;
        font-size: 0.95rem !important;
    }

    .tutorial-back-btn {
        margin-top: 0 !important;
        min-height: 40px !important;
        padding: 9px 14px !important;
    }

    .book-shell {
        height: 100% !important;
        min-height: 0 !important;
        grid-template-columns: 36px 1fr 36px !important;
        gap: 4px !important;
        align-items: stretch !important;
    }

    .book-arrow {
        width: 36px !important;
        height: 36px !important;
        align-self: center !important;
        font-size: 1.35rem !important;
    }

    .book-pages-window,
    .book-pages-track,
    .book-page {
        height: 100% !important;
    }

    .book-pages-window {
        overflow: hidden !important;
    }

    .book-page {
        overflow: hidden !important;
        padding: 10px 8px 12px !important;
    }

    .book-page h3 {
        margin: 0 0 5px !important;
        font-size: clamp(1rem, 4.3vw, 1.32rem) !important;
        line-height: 1.1 !important;
    }

    .book-page p {
        margin: 0 0 5px !important;
        font-size: clamp(0.8rem, 3.1vw, 1rem) !important;
        line-height: 1.2 !important;
    }

    .book-page .difficulty-box {
        margin: 5px 0 !important;
        padding: 6px 8px !important;
    }

    .book-page.book-page-config p {
        margin: 0 0 4px !important;
        font-size: clamp(0.78rem, 3vw, 0.95rem) !important;
        line-height: 1.16 !important;
    }

    .book-page.book-page-config .difficulty-box {
        margin: 4px 0 6px !important;
        padding: 6px 8px !important;
    }

    .book-page #length-selector,
    .book-page #mode-selector {
        min-height: 36px !important;
        height: 36px !important;
        font-size: 0.95rem !important;
        padding: 6px 8px !important;
    }

    .mode-option-btn {
        min-height: 46px;
        padding: 8px 10px;
        font-size: 0.9rem;
        gap: 8px;
    }

    .mode-option-icon {
        font-size: 0.96rem;
    }

    .mode-option-subtext {
        font-size: 0.72rem;
        line-height: 1.15;
    }

    .book-page #start-game-btn {
        min-height: 38px !important;
        height: 38px !important;
        padding: 8px 10px !important;
        font-size: 0.9rem !important;
    }

    .book-page #start-game-btn {
        min-height: 40px !important;
        height: 40px !important;
        margin-top: 6px !important;
        font-size: clamp(0.92rem, 4vw, 1.12rem) !important;
        letter-spacing: 0.3px !important;
        padding: 8px 10px !important;
    }

    .tutorial-page-indicator {
        font-size: 0.9rem !important;
    }

    /* ---------- GAMEPLAY ---------- */
    body.mobile-gameplay-active {
        overflow: hidden !important;
    }

    body.mobile-gameplay-active .app-container {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.mobile-gameplay-active .game-area {
        display: grid !important;
        grid-template-rows: auto auto auto minmax(68px, 1fr) auto auto !important;
        gap: 10px !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        padding: calc(env(safe-area-inset-top, 0px) + 64px) 10px calc(env(safe-area-inset-bottom, 0px) + 8px) 10px !important;
    }

    body.mobile-gameplay-active .challenge-header {
        margin: 0 !important;
    }

    body.mobile-gameplay-active .challenge-instruction {
        margin-bottom: 5px !important;
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
    }

    body.mobile-gameplay-active .hint-box {
        padding: 8px 10px !important;
    }

    body.mobile-gameplay-active .hint-text {
        font-size: 0.95rem !important;
    }

    body.mobile-gameplay-active .game-area > #notepad {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.mobile-gameplay-active .game-area > #notepad .notepad-body {
        height: 72px !important;
    }

    body.mobile-gameplay-active #mobile-rules-slot {
        margin: 0 !important;
    }

    body.mobile-gameplay-active #mobile-rules-slot .mobile-panel-body {
        padding: 7px !important;
        gap: 6px !important;
    }

    body.mobile-gameplay-active #mobile-rules-slot .rule-card {
        font-size: 0.76rem !important;
        line-height: 1.22 !important;
        padding: 6px 8px !important;
        margin-bottom: 4px !important;
    }

    body.mobile-gameplay-active .board-wrapper {
        margin: 8px 0 4px 0 !important;
        min-height: 72px !important;
        align-items: center !important;
    }

    body.mobile-gameplay-active .word-grid {
        gap: 8px !important;
    }

    body.mobile-gameplay-active .letter-box {
        width: 38px !important;
        height: 48px !important;
        font-size: 1.34rem !important;
    }

    body.mobile-gameplay-active .tutorial-message {
        font-size: 0.88rem !important;
        padding: 9px 8px !important;
        line-height: 1.2 !important;
    }

    body.mobile-gameplay-active .input-section {
        margin: 0 !important;
    }

    body.mobile-gameplay-active .notification-area {
        min-height: 22px !important;
    }

    body.mobile-gameplay-active .feedback {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    body.mobile-gameplay-active .input-controls {
        transform: none !important;
        margin: 2px 0 2px 0 !important;
        grid-template-columns: 1fr 60px 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    body.mobile-gameplay-active .input-controls #clear-board-btn,
    body.mobile-gameplay-active .input-controls #char-input,
    body.mobile-gameplay-active .input-controls #validate-btn {
        min-height: 46px !important;
        height: 46px !important;
    }

    /* Mapa um pouco maior, ainda cabendo sem scroll */
    body.mobile-gameplay-active #alphabet-drawer {
        margin-top: 6px !important;
        padding: 8px !important;
    }

    body.mobile-gameplay-active #mini-alphabet.alphabet-content {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 7px 4px !important;
    }

    body.mobile-gameplay-active #mini-alphabet .mini-char {
        min-height: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
        border-radius: 7px !important;
    }

    body.mobile-gameplay-active #mini-alphabet .mirrored-letter {
        font-size: 0.54rem !important;
        opacity: 0.92 !important;
    }
}

@media (max-width: 800px) and (max-height: 740px) {
    .book-page p {
        font-size: clamp(0.76rem, 2.9vw, 0.94rem) !important;
        line-height: 1.16 !important;
    }

    .book-page #start-game-btn {
        min-height: 38px !important;
        height: 38px !important;
        font-size: 0.9rem !important;
    }

    body.mobile-gameplay-active .game-area {
        gap: 8px !important;
        grid-template-rows: auto auto auto minmax(62px, 1fr) auto auto !important;
    }

    body.mobile-gameplay-active .game-area > #notepad .notepad-body {
        height: 64px !important;
    }

    body.mobile-gameplay-active #mini-alphabet .mini-char {
        min-height: 34px !important;
        height: 34px !important;
    }
}

/* ===== MOBILE TUNE V2 (somente gameplay + hub, sem mexer no livro) ===== */
@media (max-width: 800px) {
    /* ---------- GAMEPLAY ---------- */
    body.mobile-gameplay-active .game-area {
        gap: 11px !important;
        padding: calc(env(safe-area-inset-top, 0px) + 66px) 11px calc(env(safe-area-inset-bottom, 0px) + 10px) 11px !important;
    }

    /* Rascunho ~5% menor */
    body.mobile-gameplay-active .game-area > #notepad {
        margin: 0 !important;
    }
    body.mobile-gameplay-active .game-area > #notepad .notepad-body {
        height: 68px !important;
    }

    /* Regras um pouco mais para cima e com separação do tabuleiro */
    body.mobile-gameplay-active #mobile-rules-slot {
        margin-top: -2px !important;
        margin-bottom: 10px !important;
    }

    body.mobile-gameplay-active .board-wrapper {
        margin: 12px 0 6px 0 !important;
        min-height: 72px !important;
    }

    body.mobile-gameplay-active .word-grid {
        gap: 9px !important;
        padding-top: 2px !important;
    }

    body.mobile-gameplay-active .letter-box {
        width: 37px !important;
        height: 47px !important;
        font-size: 1.3rem !important;
    }

    body.mobile-gameplay-active .input-controls {
        margin-top: 2px !important;
    }

    /* Mapa ligeiramente maior, mantendo encaixe na tela */
    body.mobile-gameplay-active #alphabet-drawer {
        margin-top: 8px !important;
        padding: 9px !important;
        border-radius: 10px !important;
    }

    body.mobile-gameplay-active #mini-alphabet.alphabet-content {
        gap: 6px !important;
        padding: 8px 5px !important;
    }

    body.mobile-gameplay-active #mini-alphabet .mini-char {
        min-height: 38px !important;
        height: 38px !important;
        font-size: 0.94rem !important;
    }

    body.mobile-gameplay-active #mini-alphabet .mirrored-letter {
        font-size: 0.56rem !important;
    }

    /* ---------- HUB / MENU ---------- */
    body.mobile-mode:not(.mobile-gameplay-active) .hub-container {
        padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px calc(env(safe-area-inset-bottom, 0px) + 14px) 14px !important;
        align-items: center !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .hub-content {
        width: min(94vw, 520px) !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 26px) !important;
        margin: 0 auto !important;
        padding: 16px 14px !important;
        border-radius: 18px !important;
        gap: 11px !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .hub-title {
        font-size: clamp(2.2rem, 9vw, 3.1rem) !important;
        line-height: 1.05 !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .hub-sub {
        margin-bottom: 2px !important;
        font-size: clamp(1rem, 3.9vw, 1.2rem) !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .hub-buttons {
        gap: 10px !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .hub-btn {
        min-height: 46px !important;
        font-size: clamp(1.18rem, 5.3vw, 1.7rem) !important;
        border-radius: 12px !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .daily-hub-mobile {
        margin-top: 6px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .daily-hub-title {
        margin-bottom: 4px !important;
        font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
        line-height: 1.05 !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .daily-hub-status {
        font-size: clamp(0.96rem, 3.8vw, 1.16rem) !important;
        line-height: 1.26 !important;
        margin-bottom: 10px !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .daily-hub-play-btn {
        min-height: 50px !important;
        font-size: clamp(1.22rem, 5.1vw, 1.6rem) !important;
        border-radius: 12px !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .hub-logout-btn {
        right: 14px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
        padding: 9px 12px !important;
        border-radius: 10px !important;
    }
}





/* ===== MOBILE HOTFIX: estabilidade visual pós-refresh ===== */
@media (max-width: 800px) {
    /* Evita sobreposição de botões/teclado no gameplay */
    body.mobile-gameplay-active #alphabet-drawer {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 12px !important;
        z-index: 1 !important;
    }

    body.mobile-gameplay-active .input-section {
        margin-bottom: 6px !important;
    }

    body.mobile-gameplay-active .input-controls {
        margin: 4px 0 10px 0 !important;
    }

    /* Rascunho menor (aprox. 2 linhas úteis) */
    body.mobile-gameplay-active .game-area > #notepad .notepad-body {
        height: 58px !important;
    }

    /* Regras com mais respiro para o tabuleiro não encostar */
    body.mobile-gameplay-active #mobile-rules-slot {
        margin-bottom: 14px !important;
    }

    body.mobile-gameplay-active .board-wrapper {
        margin: 14px 0 8px 0 !important;
    }

    /* Hub/menu mobile com mais proporção e respiro */
    body.mobile-mode:not(.mobile-gameplay-active) .hub-content {
        width: min(92vw, 520px) !important;
        padding: 20px 16px !important;
        border-radius: 20px !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .daily-hub-mobile {
        margin: 10px 4px 0 4px !important;
        padding: 14px !important;
    }
}

/* ===== MOBILE FINAL HOTFIX: estabilidade + proporção hub ===== */
@media (max-width: 800px) {
  body.mobile-gameplay-active .game-area {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mobile-gameplay-active .input-section {
    position: relative !important;
    z-index: 12 !important;
    margin: 10px 0 16px 0 !important;
  }

  body.mobile-gameplay-active .notification-area {
    min-height: 24px !important;
    margin-bottom: 8px !important;
  }

  body.mobile-gameplay-active .input-controls {
    position: relative !important;
    z-index: 13 !important;
    margin: 6px 0 14px 0 !important;
  }

  body.mobile-gameplay-active #alphabet-drawer {
    position: relative !important;
    transform: none !important;
    margin-top: 18px !important;
    z-index: 8 !important;
  }

  body.mobile-gameplay-active .game-area > #notepad .notepad-body {
    height: 54px !important;
  }

  body.mobile-gameplay-active #mobile-rules-slot {
    margin-bottom: 16px !important;
  }

  body.mobile-gameplay-active .board-wrapper {
    margin: 16px 0 10px 0 !important;
  }

  body.mobile-mode:not(.mobile-gameplay-active) .hub-content {
    width: min(92vw, 520px) !important;
    max-height: calc(100dvh - 22px) !important;
    overflow-y: auto !important;
    padding: 20px 16px calc(86px + env(safe-area-inset-bottom, 0px)) 16px !important;
    border-radius: 20px !important;
  }

  body.mobile-mode:not(.mobile-gameplay-active) .daily-hub-mobile {
    margin: 14px 6px 0 6px !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  body.mobile-mode:not(.mobile-gameplay-active) .hub-logout-btn {
    right: 14px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  }
}

/* ===== MOBILE STABILITY PATCH (prioridade máxima) ===== */
@media (max-width: 800px) {
    /* Evita que botões invadam o mapa ao atualizar a página */
    body.mobile-gameplay-active .input-section {
        position: relative !important;
        z-index: 40 !important;
        margin: 8px 0 10px 0 !important;
    }

    body.mobile-gameplay-active .input-controls {
        position: relative !important;
        z-index: 41 !important;
        display: grid !important;
        grid-template-columns: minmax(110px, 1fr) 92px minmax(120px, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 2px 0 12px 0 !important;
    }

    body.mobile-gameplay-active .notification-area {
        min-height: 0 !important;
        margin-bottom: 0 !important;
    }

    body.mobile-gameplay-active #alphabet-drawer {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        margin-top: 12px !important;
        z-index: 10 !important;
    }

    body.mobile-gameplay-active .alphabet-wrapper {
        margin-top: 12px !important;
    }

    body.mobile-gameplay-active .game-area > #notepad .notepad-body {
        height: 52px !important;
    }

    body.mobile-gameplay-active #mobile-rules-slot {
        margin-bottom: 12px !important;
    }

    body.mobile-gameplay-active .board-wrapper {
        margin: 10px 0 8px 0 !important;
    }

    /* Hub mobile: card da palavra do dia com mais respiro */
    body.mobile-mode:not(.mobile-gameplay-active) .hub-content {
        width: min(92vw, 520px) !important;
        padding: 18px 16px calc(78px + env(safe-area-inset-bottom, 0px)) 16px !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .daily-hub-mobile {
        margin: 12px 8px 0 8px !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }
}

/* ===== FINAL MOBILE STABILITY (refresh + spacing) ===== */
@media (max-width: 800px) {
    body.mobile-gameplay-active .game-area {
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.mobile-gameplay-active .game-area > #notepad .notepad-body {
        height: 64px !important;
    }

    body.mobile-gameplay-active .input-section {
        position: relative !important;
        z-index: 28 !important;
        margin: 10px 0 18px 0 !important;
    }

    body.mobile-gameplay-active .input-controls {
        position: relative !important;
        z-index: 29 !important;
        gap: 10px !important;
        margin: 6px 0 16px 0 !important;
    }

    body.mobile-gameplay-active .notification-area {
        margin-bottom: 8px !important;
    }

    body.mobile-gameplay-active #alphabet-drawer {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        margin-top: 18px !important;
        z-index: 12 !important;
    }

    body.mobile-gameplay-active #alphabet-drawer .alphabet-content {
        padding-top: 12px !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .hub-content {
        width: min(92vw, 460px) !important;
        margin: 12px auto !important;
        padding: 16px 14px calc(74px + env(safe-area-inset-bottom, 0px)) 14px !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .daily-hub-mobile {
        width: 100% !important;
        max-width: 380px !important;
        margin: 10px auto 0 !important;
    }
}

/* ===== MOBILE FINAL STABILITY PATCH (12/03) ===== */
@media (max-width: 800px) {
    body.mobile-gameplay-active .game-area {
        min-height: 100dvh !important;
        height: auto !important;
        overflow-y: auto !important;
        padding: calc(env(safe-area-inset-top, 0px) + 70px) 12px calc(env(safe-area-inset-bottom, 0px) + 14px) 12px !important;
    }

    body.mobile-gameplay-active .game-area > #notepad {
        margin: 8px 0 10px 0 !important;
    }

    body.mobile-gameplay-active .game-area > #notepad .notepad-body {
        height: 48px !important;
    }

    body.mobile-gameplay-active #mobile-rules-slot {
        margin: 0 0 12px 0 !important;
    }

    body.mobile-gameplay-active .board-wrapper {
        margin: 10px 0 8px 0 !important;
    }

    body.mobile-gameplay-active .input-section {
        position: relative !important;
        z-index: 40 !important;
        margin: 8px 0 14px 0 !important;
    }

    body.mobile-gameplay-active .input-controls {
        transform: none !important;
        margin: 4px 0 10px 0 !important;
        gap: 8px !important;
        align-items: center !important;
    }

    body.mobile-gameplay-active .notification-area {
        min-height: 0 !important;
        margin-bottom: 8px !important;
    }

    body.mobile-gameplay-active #alphabet-drawer,
    body.mobile-gameplay-active .alphabet-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 14px !important;
        z-index: 10 !important;
    }

    body.mobile-gameplay-active #mini-alphabet.alphabet-content {
        gap: 6px !important;
        padding: 10px !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .hub-content {
        width: min(92vw, 440px) !important;
        margin: 14px auto !important;
        padding: 18px 14px calc(env(safe-area-inset-bottom, 0px) + 78px) 14px !important;
        border-radius: 20px !important;
    }

    body.mobile-mode:not(.mobile-gameplay-active) .daily-hub-mobile {
        width: calc(100% - 8px) !important;
        margin: 12px auto 0 auto !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }
}

/* ===== MOBILE HOTFIX FINAL (layout estável após atualizar) ===== */
@media (max-width: 800px) {
  body.mobile-gameplay-active .game-area {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 70px) 12px calc(env(safe-area-inset-bottom, 0px) + 14px) 12px !important;
    overflow-y: auto !important;
  }

  body.mobile-gameplay-active .challenge-header { order: 1 !important; margin-bottom: 0 !important; }
  body.mobile-gameplay-active .game-area > #notepad { order: 2 !important; margin: 0 !important; }
  body.mobile-gameplay-active #mobile-rules-slot { order: 3 !important; margin: 0 0 2px 0 !important; }
  body.mobile-gameplay-active .board-wrapper { order: 4 !important; margin: 2px 0 0 0 !important; }
  body.mobile-gameplay-active .input-section { order: 5 !important; margin: 4px 0 0 0 !important; position: static !important; z-index: auto !important; }
  body.mobile-gameplay-active #alphabet-drawer,
  body.mobile-gameplay-active .alphabet-wrapper { order: 6 !important; position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; margin-top: 8px !important; z-index: 1 !important; }

  body.mobile-gameplay-active .game-area > #notepad .notepad-body {
    height: 46px !important;
    max-height: 46px !important;
  }

  body.mobile-gameplay-active .input-controls {
    display: grid !important;
    grid-template-columns: minmax(110px, 1fr) 92px minmax(120px, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    position: static !important;
    z-index: auto !important;
  }

  body.mobile-gameplay-active .notification-area {
    min-height: 0 !important;
    margin: 0 !important;
  }

  body.mobile-gameplay-active #alphabet-drawer .alphabet-header,
  body.mobile-gameplay-active .alphabet-wrapper .alphabet-header {
    margin-bottom: 6px !important;
  }

  body.mobile-gameplay-active #mini-alphabet.alphabet-content {
    padding: 10px !important;
    gap: 6px !important;
  }

  body.mobile-mode:not(.mobile-gameplay-active) .hub-content {
    width: min(92vw, 440px) !important;
    margin: 14px auto !important;
    padding: 18px 14px calc(env(safe-area-inset-bottom, 0px) + 78px) 14px !important;
    border-radius: 20px !important;
  }

  body.mobile-mode:not(.mobile-gameplay-active) .daily-hub-mobile {
    width: calc(100% - 14px) !important;
    max-width: 390px !important;
    margin: 12px auto 0 auto !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }
}

/* === Mobile stability override (final) === */
@media (max-width: 800px) {
  body.mobile-gameplay-active .game-area {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    gap: 6px !important;
  }

  body.mobile-gameplay-active .challenge-header { margin-bottom: 6px !important; }

  body.mobile-gameplay-active .notepad-container {
    margin: 4px 0 8px !important;
  }

  body.mobile-gameplay-active .notepad-body {
    height: 72px !important;
  }

  body.mobile-gameplay-active .board-wrapper {
    order: 4 !important;
    margin: 8px 0 !important;
    flex: 0 0 auto !important;
    min-height: 86px !important;
  }

  body.mobile-gameplay-active .input-section {
    order: 5 !important;
    position: relative !important;
    z-index: 3 !important;
    margin: 8px 0 10px !important;
    min-height: 0 !important;
  }

  body.mobile-gameplay-active .input-controls {
    margin-bottom: 8px !important;
    align-items: center !important;
  }

  body.mobile-gameplay-active .alphabet-wrapper {
    order: 6 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 1 !important;
    margin-top: 10px !important;
    min-height: 210px !important;
    max-height: 250px !important;
    overflow: hidden !important;
  }

  body.mobile-gameplay-active .alphabet-wrapper .alphabet-content {
    gap: 6px !important;
    padding: 8px !important;
  }

  body.mobile-gameplay-active .alphabet-wrapper .mini-char {
    min-height: 38px !important;
  }

  body.mobile-hub-active .hub-content {
    width: calc(100% - 24px) !important;
    margin: 0 auto !important;
    padding: 26px 16px 22px !important;
    border-radius: 16px !important;
  }

  body.mobile-hub-active .hub-buttons {
    gap: 12px !important;
  }

  body.mobile-hub-active .daily-hub-card {
    margin-top: 14px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 800px) {
  /* Fallback após refresh antes de classes de estado estabilizarem */
  #app-container:not(.hidden-app) .game-area .input-section {
    position: relative !important;
    z-index: 3 !important;
    margin: 8px 0 10px !important;
  }

  #app-container:not(.hidden-app) .game-area .alphabet-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 10px !important;
    z-index: 1 !important;
  }

  #app-container:not(.hidden-app) .game-area .input-controls {
    margin-bottom: 8px !important;
  }
}

/* ===== CAMPANHA ===== */
.selector-help {
    margin: 8px 0 0;
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.35;
}

.campaign-screen {
    position: fixed;
    inset: 0;
    z-index: 4600;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top, rgba(187, 134, 252, 0.16), transparent 42%),
        #121212;
}

.campaign-shell {
    width: min(1120px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 28px;
    border-radius: 24px;
    border: 1px solid rgba(187, 134, 252, 0.35);
    background: rgba(30, 30, 30, 0.96);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

.campaign-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.campaign-header-copy h2 {
    margin: 0 0 6px;
    color: var(--accent);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.campaign-header-copy p {
    margin: 0;
    color: var(--text-dim);
    font-size: 1rem;
}

.campaign-back-btn {
    border: 1px solid rgba(187, 134, 252, 0.45);
    background: rgba(187, 134, 252, 0.12);
    color: var(--accent);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.campaign-progress-summary {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-main);
    font-size: 0.98rem;
}

.online-status-banner {
    margin-bottom: 20px;
}

.online-shell {
    width: min(900px, 100%);
}

.online-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.online-card,
.online-room-panel {
    border-radius: 20px;
    border: 1px solid rgba(187, 134, 252, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    padding: 20px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.online-card h3 {
    margin: 0 0 10px;
    color: #f5e8ff;
    font-size: 1.3rem;
}

.online-card p,
.online-room-state,
.online-room-panel-label,
.online-room-meta-line span {
    color: var(--text-dim);
    line-height: 1.55;
}

.online-field-label {
    display: block;
    margin-top: 10px;
    margin-bottom: 8px;
    color: #f1e7ff;
    font-size: 0.96rem;
    font-weight: 700;
}

.online-card .profile-btn,
.online-room-actions .profile-btn {
    width: 100%;
    margin-top: 14px;
}

.online-room-code-input,
.online-letter-count-select {
    width: 100%;
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(187, 134, 252, 0.34);
    background: rgba(12, 12, 18, 0.88);
    color: #fff;
    font-size: 1.18rem;
    font-weight: 800;
    text-align: center;
}

.online-room-code-input {
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.online-letter-count-select {
    appearance: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    letter-spacing: normal;
}

.online-room-code-input:focus,
.online-letter-count-select:focus {
    outline: none;
    border-color: rgba(255, 210, 115, 0.66);
    box-shadow: 0 0 0 3px rgba(255, 210, 115, 0.12);
}

.online-room-panel {
    margin-top: 18px;
}

.online-room-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.online-room-code-display {
    display: inline-block;
    margin-top: 6px;
    color: #fff2c7;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    letter-spacing: 0.18em;
}

.online-room-state {
    margin-bottom: 14px;
    color: #f6f0ff;
    font-size: 1rem;
}

.online-room-meta {
    display: grid;
    gap: 10px;
}

.online-room-meta-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
}

.online-room-meta-line strong {
    color: #ffffff;
    font-size: 1rem;
    text-align: right;
}

.online-room-actions {
    margin-top: 14px;
}

.online-party-panel {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.online-party-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.online-party-summary {
    display: block;
    margin-top: 6px;
    color: #fff0c4;
    font-size: 1rem;
}

.online-party-players-list {
    display: grid;
    gap: 12px;
}

.online-party-player-row {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.online-party-player-top,
.online-party-player-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.online-party-player-top strong,
.online-party-player-bottom span {
    color: #fff;
}

.online-party-player-top span,
.online-party-player-bottom span:first-child {
    color: var(--text-dim);
    font-size: 0.92rem;
}

.online-party-progress-track {
    position: relative;
    overflow: hidden;
    height: 10px;
    margin: 10px 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.online-party-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffd273 0%, #ff9c5f 100%);
}

.online-match-banner {
    margin-top: 12px;
    background: rgba(255, 210, 115, 0.12);
    border: 1px solid rgba(255, 210, 115, 0.32);
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    align-items: center;
    gap: 14px;
}

.online-match-leave-btn {
    justify-self: end;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 150, 150, 0.36);
    background: rgba(20, 12, 14, 0.88);
    color: #ffb8c1;
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.online-match-leave-btn:hover {
    border-color: rgba(255, 180, 180, 0.56);
    transform: translateY(-1px);
}

.online-result-card {
    width: min(92vw, 520px);
}

.online-result-summary {
    margin-bottom: 8px;
}

.journey-finale-card {
    width: min(94vw, 1120px);
    max-height: min(92vh, 920px);
    overflow: auto;
    padding: 28px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(126, 83, 208, 0.28) 0%, rgba(24, 18, 38, 0.95) 48%, rgba(10, 9, 18, 0.98) 100%),
        linear-gradient(160deg, rgba(23, 20, 39, 0.98), rgba(12, 10, 20, 0.98));
    border: 1px solid rgba(192, 148, 255, 0.5);
    box-shadow: 0 0 60px rgba(126, 83, 208, 0.22), inset 0 0 60px rgba(95, 58, 163, 0.12);
    animation: finaleCardIn 520ms ease both;
}

.journey-finale-glow {
    position: absolute;
    inset: 18px;
    border-radius: 24px;
    pointer-events: none;
    background: radial-gradient(circle at top, rgba(103, 73, 222, 0.14), transparent 58%);
    filter: blur(10px);
}

.journey-finale-hero,
.journey-finale-iq-panel,
.journey-finale-stats-panel,
.journey-finale-actions {
    position: relative;
    z-index: 1;
}

.journey-finale-hero {
    text-align: center;
    margin-bottom: 22px;
}

.journey-finale-hero h2 {
    margin: 8px 0 12px;
    font-size: clamp(2.2rem, 5vw, 4rem);
    color: #f0ddff;
    text-shadow: 0 0 24px rgba(195, 142, 255, 0.18);
}

.journey-finale-thanks {
    margin: 0 auto;
    max-width: 720px;
    color: #e7d9ff;
    line-height: 1.65;
    font-size: 1.08rem;
}

.journey-finale-credits {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.journey-finale-credits strong {
    color: #fff;
    font-size: 1.1rem;
}

.journey-finale-credits span {
    color: #c9b8ea;
    font-size: 0.95rem;
}

.journey-finale-iq-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 20px 18px;
    border: 1px solid rgba(195, 148, 255, 0.28);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(39, 31, 63, 0.78), rgba(20, 16, 33, 0.82));
    box-shadow: inset 0 0 32px rgba(115, 81, 199, 0.14);
}

.journey-finale-iq-label {
    color: #c7b4ec;
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.journey-finale-iq-value {
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 28px rgba(180, 116, 255, 0.28);
}

.journey-finale-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(170, 122, 245, 0.14);
    border: 1px solid rgba(205, 161, 255, 0.26);
    color: #ffeaa3;
    font-weight: 700;
}

.journey-finale-stats-panel {
    padding: 20px;
    border-radius: 22px;
    background: rgba(16, 13, 26, 0.7);
    border: 1px solid rgba(190, 144, 255, 0.18);
}

.journey-finale-stats-panel h3 {
    margin: 0 0 16px;
    color: #ecd9ff;
    font-size: 1.45rem;
}

.journey-finale-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.journey-finale-stat {
    padding: 14px 15px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(34, 28, 50, 0.9), rgba(20, 17, 30, 0.95));
    border: 1px solid rgba(151, 116, 215, 0.24);
    box-shadow: inset 0 0 20px rgba(139, 100, 222, 0.07);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 94px;
}

.journey-finale-stat span {
    color: #c6b3e8;
    font-size: 0.92rem;
    line-height: 1.45;
}

.journey-finale-stat strong {
    color: #fff;
    font-size: 1.34rem;
}

.journey-finale-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.journey-finale-actions .profile-btn {
    min-width: 220px;
    min-height: 52px;
    border-radius: 14px;
    font-size: 1rem;
}

@keyframes finaleCardIn {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.campaign-books-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.campaign-book {
    text-align: left;
    border-radius: 18px;
    padding: 18px 16px;
    border: 1px solid rgba(187, 134, 252, 0.26);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    color: var(--text-main);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.campaign-book:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.24);
}

.campaign-book:disabled {
    cursor: not-allowed;
}

.campaign-book-title {
    font-size: 1.2rem;
    font-weight: 800;
}

.campaign-book-state,
.campaign-book-progress {
    font-size: 0.96rem;
    line-height: 1.35;
}

.campaign-book--locked {
    opacity: 0.62;
    background: rgba(255, 255, 255, 0.03);
}

.campaign-book--available {
    border-color: rgba(187, 134, 252, 0.6);
    box-shadow: inset 0 0 0 1px rgba(187, 134, 252, 0.1);
}

.campaign-book--completed {
    border-color: rgba(3, 218, 198, 0.6);
    box-shadow: inset 0 0 0 1px rgba(3, 218, 198, 0.12);
}

.campaign-book--bronze {
    border-color: rgba(176, 112, 64, 0.9);
}

.campaign-book--silver {
    border-color: rgba(198, 204, 216, 0.88);
}

.campaign-book--gold {
    border-color: rgba(255, 198, 64, 0.95);
    box-shadow: inset 0 0 0 1px rgba(255, 198, 64, 0.18);
}

.campaign-book--highlighted {
    border-color: rgba(255, 214, 102, 0.98);
    box-shadow: 0 0 0 1px rgba(255, 214, 102, 0.34), 0 18px 36px rgba(255, 198, 64, 0.2);
    transform: translateY(-1px);
}

.campaign-complete-card {
    width: min(92vw, 560px);
    padding: 28px 24px 24px;
    border: 1px solid rgba(255, 210, 115, 0.72);
    background:
        radial-gradient(circle at top, rgba(187, 134, 252, 0.28), transparent 54%),
        linear-gradient(180deg, rgba(42, 26, 60, 0.98), rgba(22, 18, 32, 0.98));
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 210, 115, 0.12),
        0 0 44px rgba(187, 134, 252, 0.18);
    animation: campaignCompleteEntrance 0.28s ease;
}

.campaign-complete-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 210, 115, 0.4);
    background: rgba(255, 210, 115, 0.08);
    color: #ffe5a6;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.campaign-complete-card h3 {
    margin-bottom: 10px;
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    color: #fff3cf;
}

.campaign-complete-copy {
    margin: 0 0 18px;
    color: #f2e9ff;
    font-size: 1.04rem;
    line-height: 1.6;
}

.campaign-complete-summary {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.campaign-complete-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
}

.campaign-complete-line span {
    color: var(--text-dim);
    font-size: 0.96rem;
}

.campaign-complete-line strong {
    color: #ffffff;
    font-size: 1.08rem;
}

.campaign-complete-final-copy {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 210, 115, 0.28);
    background: rgba(255, 210, 115, 0.08);
    color: #ffe8b6;
    line-height: 1.55;
}

.campaign-complete-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.campaign-complete-actions .profile-btn {
    min-width: 180px;
}

@keyframes campaignCompleteEntrance {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (min-width: 1200px) {
    .campaign-books-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .campaign-screen {
        padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
        align-items: stretch;
    }

    .campaign-shell {
        max-height: none;
        height: 100%;
        padding: 16px 14px 18px;
        border-radius: 20px;
    }

    .campaign-header {
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .campaign-header-copy h2 {
        font-size: clamp(1.45rem, 6vw, 1.9rem);
    }

    .campaign-header-copy p,
    .campaign-progress-summary,
    .selector-help {
        font-size: 0.95rem;
    }

    .online-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .online-card,
    .online-room-panel {
        padding: 16px 14px;
        border-radius: 18px;
    }

    .online-card h3 {
        font-size: 1.16rem;
    }

    .online-room-code-input {
        font-size: 1.05rem;
        padding: 13px 14px;
        letter-spacing: 0.14em;
    }

    .online-letter-count-select {
        font-size: 0.96rem;
        padding: 13px 14px;
    }

    .online-room-panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .online-party-panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .online-room-code-display {
        font-size: clamp(1.6rem, 8vw, 2.1rem);
    }

    .online-room-meta-line {
        padding: 11px 12px;
        gap: 10px;
    }

    .online-room-meta-line span,
    .online-room-meta-line strong,
    .online-room-state {
        font-size: 0.92rem;
    }

    .online-match-banner {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .online-match-leave-btn {
        width: 100%;
        justify-self: stretch;
    }

    .campaign-back-btn {
        flex: 0 0 auto;
        min-height: 46px;
        padding: 10px 14px;
    }

    .campaign-books-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .campaign-book {
        min-height: 134px;
        padding: 16px 14px;
    }

    .campaign-book-title {
        font-size: 1.08rem;
    }

    .campaign-book-state,
    .campaign-book-progress {
        font-size: 0.92rem;
    }

    .campaign-complete-card {
        width: min(94vw, 520px);
        padding: 24px 16px 18px;
        border-radius: 18px;
    }

    .campaign-complete-badge {
        margin-bottom: 12px;
        padding: 7px 12px;
        font-size: 0.8rem;
    }

    .campaign-complete-copy {
        font-size: 0.97rem;
        margin-bottom: 16px;
    }

    .campaign-complete-line {
        padding: 12px 13px;
        gap: 10px;
    }

    .campaign-complete-line span {
        font-size: 0.88rem;
    }

    .campaign-complete-line strong {
        font-size: 0.98rem;
        text-align: right;
    }

    .campaign-complete-final-copy {
        padding: 12px 13px;
        font-size: 0.92rem;
    }

    .campaign-complete-actions {
        flex-direction: column;
        gap: 10px;
    }

    .campaign-complete-actions .profile-btn {
        width: 100%;
        min-width: 0;
    }

    .journey-finale-card {
        width: min(96vw, 1120px);
        max-height: min(94vh, 920px);
        padding: 18px 14px;
        border-radius: 22px;
    }

    .journey-finale-hero h2 {
        font-size: clamp(1.8rem, 8vw, 2.8rem);
    }

    .journey-finale-thanks {
        font-size: 0.97rem;
    }

    .journey-finale-stats-panel {
        padding: 16px 14px;
    }

    .journey-finale-stats-grid {
        grid-template-columns: 1fr;
    }

    .journey-finale-stat {
        min-height: 0;
    }

    .journey-finale-actions {
        flex-direction: column;
    }

    .journey-finale-actions .profile-btn {
        width: 100%;
        min-width: 0;
    }
}