/* === БАЗА И ИНТЕРФЕЙС === */
body { margin: 0; padding: 0; background-color: #121212; font-family: 'Segoe UI', Arial, sans-serif; color: #e0e0e0; overflow: hidden; user-select: none; }

/* Лобби */
#lobby-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(18, 18, 18, 0.98); z-index: 10000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.lobby-box { background: #18181b; padding: 25px; border-radius: 12px; border: 1px solid #bfa15f; box-shadow: 0 10px 40px rgba(0,0,0,0.8); width: 360px; display: flex; flex-direction: column; gap: 12px; }
.lobby-box h2 { text-align: center; color: #bfa15f; margin: 0 0 5px 0; font-size: 20px; }
.lobby-box input, .lobby-box select { background: #27272a; border: 1px solid #52525b; color: #fff; padding: 10px; border-radius: 6px; font-size: 14px; width: 100%; box-sizing: border-box; }
.lobby-box button { background: #bfa15f; color: #121212; border: none; padding: 10px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 14px; transition: 0.2s; width: 100%;}
.lobby-box button:hover { background: #d4af37; }
.game-item { background: #27272a; border: 1px solid #3f3f46; padding: 8px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; cursor: pointer;}
.game-item.selected { border-color: #bfa15f; background: #3f3f46; }
.games-list { max-height: 180px; overflow-y: auto; background: #111; padding: 5px; border-radius: 6px; border: 1px solid #27272a;}

/* ВЫДВИЖНАЯ ПАНЕЛЬ КАРТ */
#maps-drawer-container {
    position: absolute; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 1500; 
    display: none; /* Скрыто по умолчанию */
    flex-direction: column; 
    align-items: center;
}

/* Показываем панель только для Мастера */
.dm-mode #maps-drawer-container {
    display: flex;
}
#maps-drawer-toggle:hover { background: #27272a; }
#maps-drawer-content {
    background: rgba(18, 18, 20, 0.98); border: 1px solid #3f3f46; border-top: none; border-radius: 0 0 12px 12px; padding: 12px 15px; display: flex; gap: 12px; overflow-x: auto; max-width: 85vw; box-shadow: 0 10px 30px rgba(0,0,0,0.9); transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease; max-height: 0px; opacity: 0; pointer-events: none; overflow: hidden;
}
#maps-drawer-content.open { max-height: 220px; opacity: 1; padding: 12px 15px; pointer-events: auto; overflow-x: auto; }

.map-card { width: 140px; background: #27272a; border: 2px solid #3f3f46; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; flex-shrink: 0; position: relative; transition: transform 0.15s, border-color 0.15s; }
.map-card:hover { transform: translateY(-3px); border-color: #71717a; }
.map-card.active-dm-map { border-color: #38bdf8; box-shadow: 0 0 10px rgba(56, 189, 248, 0.4); }
.map-card.active-player-map { border-color: #bfa15f; }
.map-card-thumb { width: 100%; height: 80px; object-fit: cover; background: #111; }
.map-card-title { font-size: 11px; font-weight: bold; padding: 6px; text-align: center; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #18181b; }
.map-card-actions { display: flex; justify-content: space-between; padding: 4px; background: #18181b; border-top: 1px solid #3f3f46; gap: 3px; }
.map-card-actions button { padding: 3px 5px; font-size: 10px; flex: 1; }
.player-ribbon-badge { position: absolute; top: 4px; right: 4px; background: #bfa15f; color: #121212; font-size: 10px; font-weight: bold; padding: 2px 5px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.8); }

.add-map-card { width: 120px; height: 125px; border: 2px dashed #52525b; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #a1a1aa; cursor: pointer; flex-shrink: 0; transition: 0.2s; background: rgba(39, 39, 42, 0.3); }
.add-map-card:hover { border-color: #22c55e; color: #22c55e; background: rgba(34, 197, 94, 0.05); }

/* Верхняя Панель */
.top-panel { position: absolute; top: 15px; left: 15px; background: rgba(24, 24, 27, 0.96); padding: 8px 15px; border-radius: 8px; border: 1px solid #3f3f46; display: flex; gap: 10px; align-items: center; z-index: 1000; box-shadow: 0 4px 25px rgba(0,0,0,0.7); }
.panel-section { display: flex; align-items: center; gap: 5px; border-right: 1px solid #3f3f46; padding-right: 8px; }
.panel-section:last-child { border-right: none; padding-right: 0; }

select, button, input[type="number"] { background: #27272a; color: #f4f4f5; border: 1px solid #52525b; padding: 5px 7px; border-radius: 4px; cursor: pointer; font-size: 12px; outline: none; }
select:hover, button:hover { background: #3f3f46; }
button.active { background: #bfa15f; color: #121212; border-color: #d4af37; font-weight: bold; }

.selection-box { position: absolute; border: 1px dashed #38bdf8; background: rgba(56, 189, 248, 0.15); pointer-events: none; z-index: 500; display: none; }

/* ЛЕВАЯ БОКОВАЯ ПАНЕЛЬ */
.left-sidebar { position: absolute; left: 15px; top: 65px; bottom: 15px; width: 175px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; pointer-events: none; }
.sidebar-block { background: rgba(24, 24, 27, 0.96); border: 1px solid #3f3f46; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; box-shadow: 0 4px 20px rgba(0,0,0,0.8); }
.sidebar-block h4 { margin: 0; color: #bfa15f; font-size: 12px; text-align: center; border-bottom: 1px solid #3f3f46; padding-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
.tools-grid { display: flex; flex-direction: column; gap: 4px; }
.tools-grid button { width: 100%; text-align: left; padding: 6px 10px; }

/* ПРАВАЯ БОКОВАЯ ПАНЕЛЬ */
.right-sidebar { position: absolute; right: 15px; top: 15px; bottom: 15px; width: 175px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; pointer-events: none; }
.right-sidebar .sidebar-block { pointer-events: auto; }
.zoom-block-content { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 5px 0; }
.zoom-slider-horiz { width: 100%; cursor: pointer; margin: 0; }

/* Лог кубиков */
.dice-container { display: flex; flex-direction: column; gap: 5px; }
.dice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dice-grid button { padding: 5px 0; text-align: center; justify-content: center; font-weight: bold; font-size: 11px; }

/* КРУПНЫЙ ЛОГ */
.dice-log { background: #141416; border: 1px solid #3f3f46; overflow-y: auto; font-size: 13px; padding: 8px; border-radius: 4px; font-family: 'Segoe UI', sans-serif; color: #e4e4e7; }
.dice-log p { margin: 6px 0; border-bottom: 1px solid #27272a; padding-bottom: 5px; line-height: 1.4; }
.crit-max { color: #22c55e; font-weight: bold; background: rgba(34, 197, 94, 0.1); padding: 1px 3px; border-radius: 3px; }
.crit-min { color: #ef4444; font-weight: bold; background: rgba(239, 68, 68, 0.1); padding: 1px 3px; border-radius: 3px; }
.dm-tag { background: #bfa15f; color: #121212; font-weight: bold; padding: 1px 4px; border-radius: 3px; font-size: 10px; margin-right: 4px; display: inline-block; }

/* Панель Игроков */
.player-status-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #e4e4e7; padding: 2px 0; }
.player-status-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 6px #22c55e; }

/* === БЛОК ИНИЦИАТИВЫ === */
#initiative-tracker {
    position: absolute; right: 15px; bottom: 15px; width: 175px; background: rgba(24, 24, 27, 0.96); border: 1px solid #bfa15f; border-radius: 8px; padding: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.8); z-index: 1000; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; box-sizing: border-box; transition: max-height 0.3s ease;
}
#initiative-tracker h4 { margin: 0; color: #bfa15f; font-size: 12px; text-align: center; border-bottom: 1px solid #3f3f46; padding-bottom: 4px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.initiative-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; max-height: 160px; transition: opacity 0.2s ease, max-height 0.3s ease; }
.initiative-item { display: flex; justify-content: space-between; align-items: center; font-size: 12px; background: #18181b; padding: 4px 8px; border-radius: 4px; border: 1px solid #3f3f46; }
.initiative-item .init-val { font-weight: bold; color: #38bdf8; background: rgba(56, 189, 248, 0.1); padding: 1px 5px; border-radius: 3px; }
.initiative-item .init-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.initiative-item.dm-owned-unit { border-color: #bfa15f; }
.initiative-item.dm-owned-unit .init-name { color: #bfa15f; font-weight: bold; }

/* Игровое поле */
#game-viewport { width: 100vw; height: 100vh; position: relative; background: #080808; overflow: hidden; }
#table-surface { position: absolute; top: 0; left: 0; transform-origin: top left; will-change: transform; }
#map-container { position: relative; display: inline-block; box-shadow: 0 0 40px rgba(0,0,0,0.9); }
#game-map { display: block; width: 6200px; height: 4000px; pointer-events: none; background: #27272a; object-fit: fill; z-index: 1; }

#ruler-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 500; }

/* === ТОКЕНЫ И СТАТУСЫ === */
.token { position: absolute; touch-action: none; box-sizing: border-box; }
.token img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; position: relative; z-index: 3; }
.token.selected img { filter: drop-shadow(0 0 10px #38bdf8) drop-shadow(0 0 2px #38bdf8); }

.status-effects { position: absolute; top: 2px; right: 2px; display: flex; flex-direction: column; gap: 3px; z-index: 4; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #000; display: none; }
.status-dot.dead { background: #ef4444; } 
.status-dot.poisoned { background: #22c55e; } 
.status-dot.stunned { background: #eab308; } 
.status-dot.active { display: block; }

.aura { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.25; pointer-events: none; z-index: 1; display: none; }

.token.layer-item { z-index: 10 !important; }
.token.layer-token { z-index: 20; }
.token.layer-gm { z-index: 30; opacity: 0.5; }
.token.layer-gm img { filter: drop-shadow(0 0 6px #a855f7); }

/* УВЕЛИЧЕННЫЕ В 2 РАЗА КРУЖКИ БЫСТРОГО ВВОДА (HP / AC / MP) */
.token .quick-stats { position: absolute; top: -84px; left: 50%; transform: translateX(-50%); display: none; gap: 12px; z-index: 100; pointer-events: auto; }
.token.selected .quick-stats { display: flex; }
.quick-stats input { width: 64px; height: 64px; border-radius: 50%; border: 4px solid #38bdf8; background: rgba(18, 18, 20, 0.95); color: #fff; text-align: center; font-size: 26px; font-weight: bold; padding: 0; outline: none; box-shadow: 0 8px 20px rgba(0,0,0,0.9); cursor: text; transition: transform 0.1s ease; }
.quick-stats input:focus { transform: scale(1.15); z-index: 101; }
.quick-stats input.qs-hp { border-color: #ef4444; color: #fca5a5; }
.quick-stats input.qs-ac { border-color: #bfa15f; color: #fef08a; }
.quick-stats input.qs-mp { border-color: #3b82f6; color: #93c5fd; }

.token.active-drag { z-index: 99999 !important; }

.player-mode .token.layer-gm { display: none !important; }
.player-mode .dm-only { display: none !important; }

.dm-mode #map-container.active-layer-item .token:not(.layer-item) { pointer-events: none; }
.dm-mode #map-container.active-layer-token .token:not(.layer-token) { pointer-events: none; }
.dm-mode #map-container.active-layer-gm .token:not(.layer-gm) { pointer-events: none; }

/* УВЕЛИЧЕННАЯ В 3 РАЗА НИЖНЯЯ ПАНЕЛЬ ТОКЕНА (ИМЯ И HP-BAR) */
.token-info-container { position: absolute; bottom: -114px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.token-name { background: rgba(10, 10, 12, 0.9); color: #fff; padding: 9px 24px; border-radius: 12px; font-size: 39px; font-weight: 600; white-space: nowrap; border: 3px solid #52525b; box-shadow: 0 6px 24px rgba(0,0,0,0.8); }
.token-hp-bar-container { width: 180px; height: 30px; background: #18181b; border: 3px solid #000; margin-top: 9px; border-radius: 9px; overflow: hidden; box-shadow: 0 6px 15px rgba(0,0,0,0.8); }
.token-hp-bar { width: 100%; height: 100%; background: #22c55e; transition: width 0.2s ease; }

/* Контекстное меню */
.token-context-menu { position: absolute; background: rgba(24, 24, 27, 0.98); border: 1px solid #38bdf8; border-radius: 6px; padding: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.8); z-index: 2000; display: none; flex-direction: column; gap: 6px; width: 230px; cursor: default; }
.token-context-menu label { font-size: 10px; color: #a1a1aa; margin-bottom: -2px; display: block;}
.token-context-menu input, .token-context-menu select { background: #18181b; color: #fff; border: 1px solid #52525b; padding: 4px; border-radius: 3px; font-size: 12px; width: 100%; box-sizing: border-box; }
.context-row { display: flex; gap: 5px; align-items: center; }
.status-checkboxes { display: flex; gap: 10px; font-size: 11px; margin: 4px 0; }
.status-checkboxes label { display: flex; align-items: center; gap: 3px; color: #fff; cursor: pointer; }

/* Индикатор линейки */
#ruler-distance-indicator {
    position: fixed; bottom: -60px; left: 50%; transform: translateX(-50%); background: rgba(24, 24, 27, 0.98); border: 2px solid #bfa15f; border-bottom: none; border-radius: 12px 12px 0 0; padding: 10px 25px; box-shadow: 0 -4px 25px rgba(0,0,0,0.8); z-index: 5000; display: flex; align-items: center; justify-content: center; transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none;
}
#ruler-distance-indicator.visible { bottom: 0; }
#ruler-distance-indicator span { font-size: 16px; font-weight: bold; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); font-family: monospace; letter-spacing: 0.5px; }