/* Reflow the existing character panel and illustrated tome inside the phone. */
body.room-character-mode { background: #171410; overflow: hidden; }
body.room-character-mode > * { visibility: hidden; }
body.room-character-mode #character-panel,
body.room-character-mode #spellbook-viewer,
body.room-character-mode #appearanceEditor,
body.room-character-mode #titleSelectorOverlay,
body.room-character-mode #item-tooltip,
body.room-character-mode #notifications { visibility: visible; }
body.room-character-mode #character-panel {
    top: 0 !important; left: 0 !important; transform: none !important;
    width: 100% !important; height: 100dvh; max-height: 100dvh !important;
    box-sizing: border-box; border-radius: 0 !important;
    overscroll-behavior: contain;
}
/* Keep the equipment stage first; desktop markup and saved slot names stay shared. */
body.room-character-mode #character-panel { --equipment-size: 48px; }
body.room-character-mode #character-panel button { min-height: 44px; }
body.room-character-mode #character-panel > div:first-child {
    position: relative !important; gap: 4px; padding: 4px 8px !important;
    min-height: 48px; box-sizing: border-box;
}
body.room-character-mode #character-panel > div:first-child > div {
    gap: 2px !important; flex-direction: column; align-items: flex-start !important;
    min-width: 0; flex: 1;
}
body.room-character-mode #char-name { font-size: 15px !important; overflow-wrap: anywhere; }
body.room-character-mode #char-class { font-size: 11px !important; }
body.room-character-mode #character-panel > div:first-child > button { padding: 4px 6px !important; }
body.room-character-mode #character-panel > div:first-child > button:last-child { min-width: 44px; }
body.room-character-mode #char-panel-tabs {
    position: sticky; top: 0; z-index: 11; background: #2c2218 !important;
    padding: 3px 6px !important; gap: 3px !important;
}
body.room-character-mode #char-panel-tabs button { flex: 1; padding: 4px !important; min-width: 0; font-size: 12px; }
body.room-character-mode #char-tab-equipment.active { display: flex !important; flex-direction: column; }
body.room-character-mode #char-tab-equipment > div:first-child { display: contents !important; }
body.room-character-mode #char-tab-equipment > div:first-child > div {
    min-width: 0; max-width: 100%; width: 100% !important;
    box-sizing: border-box; padding: 8px;
}
body.room-character-mode #char-tab-equipment > div:first-child > div:first-child { order: 2; }
body.room-character-mode #char-tab-equipment > div:first-child > div:nth-child(2) { order: 0; flex: none !important; }
body.room-character-mode #char-tab-equipment > div:first-child > div:nth-child(3) { order: 3; }
body.room-character-mode #char-tab-equipment > div:nth-child(2) { order: 1; }
body.room-character-mode #char-tab-equipment > div:first-child > div:nth-child(2) > div {
    display: grid; grid-template-columns: var(--equipment-size) minmax(0, 1fr) var(--equipment-size);
    grid-template-rows: repeat(8, var(--equipment-size)); gap: 4px 8px;
    width: 100% !important; height: auto !important;
}
body.room-character-mode #charFullBodyImg,
body.room-character-mode #charSilhouetteSvg {
    position: relative !important; inset: auto !important; transform: none !important;
    grid-column: 2; grid-row: 1 / 8; align-self: stretch; justify-self: center;
    width: 100% !important; height: 100% !important; min-height: 0; max-width: 100%; object-fit: contain;
}
body.room-character-mode .equipped-slot {
    position: relative !important; inset: auto !important; transform: none !important;
    width: var(--equipment-size) !important; height: var(--equipment-size) !important;
    box-sizing: border-box; grid-column: var(--slot-column); grid-row: var(--slot-row);
}
body.room-character-mode .equipped-slot[data-slot="head"] { --slot-column: 1; --slot-row: 1; }
body.room-character-mode .equipped-slot[data-slot="neck"] { --slot-column: 1; --slot-row: 2; }
body.room-character-mode .equipped-slot[data-slot="shoulders"] { --slot-column: 1; --slot-row: 3; }
body.room-character-mode .equipped-slot[data-slot="chest"] { --slot-column: 1; --slot-row: 4; }
body.room-character-mode .equipped-slot[data-slot="main_hand"] { --slot-column: 1; --slot-row: 5; }
body.room-character-mode .equipped-slot[data-slot="hands"] { --slot-column: 1; --slot-row: 6; }
body.room-character-mode .equipped-slot[data-slot="finger_left"] { --slot-column: 1; --slot-row: 7; }
body.room-character-mode .equipped-slot[data-slot="back"] { --slot-column: 3; --slot-row: 1; }
body.room-character-mode .equipped-slot[data-slot="off_hand"] { --slot-column: 3; --slot-row: 2; }
body.room-character-mode .equipped-slot[data-slot="waist"] { --slot-column: 3; --slot-row: 3; }
body.room-character-mode .equipped-slot[data-slot="legs"] { --slot-column: 3; --slot-row: 4; }
body.room-character-mode .equipped-slot[data-slot="feet"] { --slot-column: 3; --slot-row: 5; }
body.room-character-mode .equipped-slot[data-slot="finger_right"] { --slot-column: 3; --slot-row: 6; }
body.room-character-mode .equipped-slot[data-slot="trinket_1"] { --slot-column: 3; --slot-row: 7; }
body.room-character-mode .equipped-slot[data-slot="ammo"] { --slot-column: 2; --slot-row: 8; justify-self: center; }
body.room-character-mode #character-inventory {
    grid-template-columns: repeat(auto-fit, minmax(56px, 64px)) !important;
    justify-content: center; gap: 8px !important;
}
body.room-character-mode #character-inventory > .dnd-equipment-slot {
    width: 100% !important; height: auto !important; aspect-ratio: 1; box-sizing: border-box;
}
body.room-character-mode #item-tooltip {
    position: fixed !important; inset: auto 8px 8px !important;
    width: auto !important; max-width: none !important; max-height: min(65dvh, 480px);
    overflow-y: auto; overflow-wrap: anywhere; overscroll-behavior: contain;
    box-sizing: border-box; border-radius: 12px 12px 6px 6px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}
body.room-character-mode #item-tooltip button { min-height: 44px; }
@media (min-width: 380px) and (min-height: 600px) {
    body.room-character-mode #character-panel { --equipment-size: 52px; }
}
@media (min-width: 420px) and (min-height: 600px) {
    body.room-character-mode #character-panel { --equipment-size: 56px; }
}
/* In landscape each side becomes two columns, preserving touch size and the hero. */
@media (min-width: 600px) and (max-height: 599px) {
    body.room-character-mode #char-tab-equipment > div:first-child > div:nth-child(2) > div {
        grid-template-columns: repeat(2, var(--equipment-size)) minmax(0, 1fr) repeat(2, var(--equipment-size));
        grid-template-rows: repeat(4, var(--equipment-size));
    }
    body.room-character-mode #charFullBodyImg,
    body.room-character-mode #charSilhouetteSvg { grid-column: 3; grid-row: 1 / 4; }
    body.room-character-mode .equipped-slot[data-slot="main_hand"] { --slot-column: 2; --slot-row: 1; }
    body.room-character-mode .equipped-slot[data-slot="hands"] { --slot-column: 2; --slot-row: 2; }
    body.room-character-mode .equipped-slot[data-slot="finger_left"] { --slot-column: 2; --slot-row: 3; }
    body.room-character-mode .equipped-slot[data-slot="back"] { --slot-column: 4; }
    body.room-character-mode .equipped-slot[data-slot="off_hand"] { --slot-column: 4; }
    body.room-character-mode .equipped-slot[data-slot="waist"] { --slot-column: 4; }
    body.room-character-mode .equipped-slot[data-slot="legs"] { --slot-column: 4; }
    body.room-character-mode .equipped-slot[data-slot="feet"] { --slot-column: 5; --slot-row: 1; }
    body.room-character-mode .equipped-slot[data-slot="finger_right"] { --slot-column: 5; --slot-row: 2; }
    body.room-character-mode .equipped-slot[data-slot="trinket_1"] { --slot-column: 5; --slot-row: 3; }
    body.room-character-mode .equipped-slot[data-slot="ammo"] { --slot-column: 3; --slot-row: 4; }
}
body.room-character-mode #spellbook-viewer { padding: 0; overflow-y: auto; align-items: flex-start; overscroll-behavior: contain; }
body.room-character-mode .spellbook-book {
    width: 100%; max-width: 100%; height: auto; min-height: 100dvh; aspect-ratio: auto;
    background-image: none; background-color: #d4c5a0;
    border: 6px double #6d4f2b; box-shadow: inset 0 0 24px rgba(90,55,20,.18);
    padding: 58px 18px 68px; box-sizing: border-box;
}
body.room-character-mode .spellbook-page { position: relative; display: flex; flex-direction: column; gap: 20px; }
/* The desktop cover is a fixed spread; a scrolling phone page needs plain parchment.
   Let actual artwork or the existing loading message determine the illustration height. */
body.room-character-mode .spell-illustration-area { position: relative; inset: auto; width: 100%; height: auto; }
body.room-character-mode .spell-illustration-frame { height: auto; flex-direction: column; gap: 8px; }
body.room-character-mode .spell-illustration-img { max-height: min(35dvh, 280px); max-width: 100%; }
body.room-character-mode .spell-illustration-fallback { width: auto; max-width: 100%; max-height: 72px; }
body.room-character-mode .spell-illustration-shimmer { position: relative; inset: auto; min-height: 24px; width: 100%; }
body.room-character-mode .spellbook-title-wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 12px; }
body.room-character-mode .spellbook-spell-name { color: #2a1c0d; font-size: 22px; line-height: 1.2; }
body.room-character-mode .spellbook-school-badge { color: #6b3410 !important; }
body.room-character-mode .spellbook-nav-side { transform: none; }
body.room-character-mode .spell-text-area { position: relative; inset: auto; width: auto; height: auto; overflow: visible; }
body.room-character-mode .spellbook-close { top: 8px; right: 8px; width: 44px; height: 44px; }
body.room-character-mode .spellbook-nav-side { position: fixed; top: auto; bottom: 8px; width: 48px; height: 48px; z-index: 5; background: #2c2218; }
body.room-character-mode .spellbook-nav-prev { left: 8px; }
body.room-character-mode .spellbook-nav-next { right: 8px; }
body.room-character-mode .spellbook-nav { position: fixed; bottom: 8px; left: 62px; right: 62px; height: 48px; background: #2c2218; }
/* Оглавление книги по кругам (вечер проверки 2026-10-06, Ондрик и Аэлар: 29 и 41 карточка только
   стрелками). Книга открывается списком, заклинание — касанием, «☰ Список» возвращает. */
body.room-character-mode .spellbook-contents-open { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; margin-right: 12px;
    background: transparent; border: 1px solid #8a6a3a; border-radius: 8px; color: #f0dfb8; font: 600 15px/1 Georgia, serif; }
body.room-character-mode #spellbook-viewer.contents-open .spellbook-contents { display: block; }
body.room-character-mode #spellbook-viewer.contents-open .spellbook-page,
body.room-character-mode #spellbook-viewer.contents-open .spellbook-nav-side,
body.room-character-mode #spellbook-viewer.contents-open .spellbook-nav { display: none; }
body.room-character-mode .spellbook-contents-title { margin: 0 52px 8px 0; color: #5a2c08; font: bold 22px/1.2 Georgia, serif; }
body.room-character-mode .spellbook-contents-jump { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px 0; margin-bottom: 8px; background: #d4c5a0; }
body.room-character-mode .spellbook-contents-chip { min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid #6d4f2b; border-radius: 8px;
    background: #2c2218; color: #f0dfb8; font: 600 16px/1 Georgia, serif; }
body.room-character-mode .spellbook-contents-group { margin-bottom: 14px; scroll-margin-top: 64px; }
body.room-character-mode .spellbook-contents-spell { display: block; width: 100%; min-height: 44px; margin: 0 0 6px; padding: 8px 12px; text-align: left;
    border: 1px solid rgba(90,60,25,.35); border-radius: 8px; background: rgba(255,250,235,.45); color: #2a1c0d; font: 16px/1.3 Georgia, serif; }
body.room-character-mode .spellbook-contents-empty { color: #6b4a22; font-style: italic; }
/* Истории у заклинания нет — нет и раздела: заглушка «История этого заклинания ещё не записана.» ничего
   не говорила игроку (вечер проверки 2026-10-06, Аэлар). Пока история грузится, раздел тоже не мигает. */
body.room-character-mode .spell-text-section:has(> .spell-page-lore.empty) { display: none; }