:root {
    --pixel-orange: #F26539;
    --pixel-beige-light: #F5EBD4;
    --pixel-beige-dark: #EADBC3; 
    --pixel-black: #15131C;
    --pixel-green-bg: #2E8B6E; 
}
* { 
    box-sizing: border-box; 
    font-family: 'Pixelify Sans', 'VT323', monospace; 
}

body {
    margin: 0;
    /* CESTA K TVÉMU OBRÁZKU */
    background-image: url('pozadi.png'); 
    
    /* NASTAVENÍ OBRÁZKU */
    background-size: cover;        /* Obrázek vyplní celou plochu */
    background-position: center;   /* Vycentrování */
    background-attachment: fixed;  /* Pozadí se nepohybuje při rolování */
    background-repeat: no-repeat;
    
    /* PIXEL-ART EFEKT: Aby byl obrázek ostrý i při zvětšení */
    image-rendering: pixelated; 
    image-rendering: crisp-edges;

    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    overflow: hidden;
    transition: background-image 0.3s ease-in-out; 
}
/* Tato část se aktivuje v Černobílém režimu */
body.grayscale-mode {
    background-image: url('pozadi_bw.png') !important;
    filter: grayscale(100%) contrast(1.1);
}

/* Tato část se aktivuje v Kontrastním režimu */
body.acc-mode {
    background-image: url('pozadi_acc.png') !important;
}

.lang-bar { margin: 20px; display: flex; gap: 15px; z-index: 100; }
.lang-btn {
    background: var(--pixel-beige-light); border: 4px solid var(--pixel-black);
    padding: 5px 15px; cursor: pointer; font-weight: medium; font-size: 30px;
}
.lang-btn.active { background: var(--pixel-orange); color: white; }

.window {
    display: none; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%);
    width: 900px; height: 600px; background: var(--pixel-beige-dark);
    border: 3px solid var(--pixel-black); display: flex; flex-direction: column; z-index: 50;
}
/* Původní průhledný stín nahrazen sytě černým 10px stínem */
.shadow-win { box-shadow: 10px 10px 0px var(--pixel-black); }
.win-header { background: var(--pixel-orange); border-bottom: 3px solid var(--pixel-black); padding: 15px 12px; display: flex; justify-content: space-between; align-items: center; color: white; }
.header-left { display: flex; align-items: center; }
.shadow-text { text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5); }
.title-medium { font-size: 24px !important; }
.title-large { font-size: 28px !important; }

.square-btn {
    width: 45px; height: 45px; border: 3px solid black; background: var(--pixel-beige-light);
    color: black; display: flex; align-items: center; justify-content: center;
    font-size: 24px; cursor: pointer; font-weight: bold;
}
.square-btn:hover, .square-btn.active-green { background: var(--pixel-green-bg) !important; color: white !important; }

.control-btn { border: 3px solid black; padding: 2px 12px; cursor: pointer; background: var(--pixel-beige-light); color: black; font-weight: bold; font-size: 20px; }
.control-btn:hover { background: var(--pixel-green-bg) !important; color: white !important; }

.big-retro-btn {
    background: var(--pixel-orange); border: 5px solid var(--pixel-black);
    padding: 40px 60px; font-size: 28px; font-weight: bold; cursor: pointer;
    box-shadow: 8px 8px 0px var(--pixel-black); text-transform: uppercase; }
/* OPRAVA DLAŽDIC CHATBOTŮ */
/* Aby byly dlaždice uprostřed vedle sebe */
.grid-container {
    display: flex;
    gap: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Tato kombinace zajistí "mrtvý" střed */
    margin: 0; /* Smažeme margin-top, který jsme tam měli předtím */
    z-index: 10;
}

/* Aby to byly čtverce a ne pruhy */
.tile { 
    width: 280px !important; 
    height: 280px !important; 
    border: 6px solid var(--pixel-black); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 24px; 
    font-weight: bold; 
    cursor: pointer; 
    box-shadow: 10px 10px 0px var(--pixel-black);
    background: var(--pixel-orange); /* Oranžová barva */
}

/* OPRAVA ROZLOŽENÍ OKNA INFORMACE */
.win-body {
    display: flex !important; /* Sidebar a obsah vedle sebe */
    flex-direction: row;
    flex: 1;
    overflow: hidden;
}

.win-sidebar { 
    position: static !important; /* Menu stojí vedle textu, neletí nad ním */
    width: 300px; 
    height: 100%; 
    border-right: 3px solid black; 
    background: var(--pixel-beige-dark); 
    flex-shrink: 0;
    display: block !important; /* Vždy viditelné */
}
.sidebar-item { 
    padding: 15px; border-bottom: 2px solid black; cursor: pointer; 
    font-weight: bold; transition: 0.1s; font-size: 18px; 
}
.sidebar-item:hover { background: var(--pixel-orange) !important; color: white; }
.sidebar-item.selected-topic { background: var(--pixel-green-bg) !important; color: white !important; }

.win-content { flex: 1; padding: 40px; background: var(--pixel-beige-light); overflow-y: auto; height: 100%; }

.label-green {
    background-color: var(--pixel-green-bg);
    color: white;
    padding: 5px 12px;
    display: inline-block;
    font-weight: bold;
    margin-bottom: 10px;
    border: 2px solid black;
}


/* 2. Oranžové podnadpisy - mezera hlavně NAD ním, pod ním skoro nic */
.text-orange {
    color: var(--pixel-orange);
    font-size: 24px; 
    font-weight: medium;
    display: block;
    margin: 0;            /* Vynuluje okraje prohlížeče */
    margin-top: 12px;     /* Mezera nad nadpisem, aby se oddělil od textu nad ním */
    margin-bottom: 2px;   /* Téměř nulová mezera, aby byl přilepený k textu pod ním */
}

/* 3. Černý běžný text - malá mezera mezi odstavci */
.info-p {
    font-size: 19px; 
    line-height: 1.4;
    color: var(--pixel-black);
    margin: 0;            /* Vynuluje okraje prohlížeče */
    margin-bottom: 8px;   /* Zmenšená mezera mezi odstavci */
}

/* 4. Aby i seznamy (odrážky) byly blíž u sebe */
ul.info-p {
    margin-top: 5px !important;
}

/* 4. Aby oranžové začátky vět v odrážkách ladily s černým textem */
.info-p span.text-orange {
    font-size: 19px; 
    display: inline;
}

.orange-text { color: var(--pixel-orange); font-size: 32px; margin: 0; }
.grid-container {
    display: flex;
    gap: 40px;
    position: absolute; /* Vytrhne kontejner z běžného toku */
    top: 28%;          /* Posune horní hranu doprostřed */
    left: 50%;         /* Posune levou hranu doprostřed */
    transform: translate(-50%, -50%); /* Posune zpět o polovinu své šířky/výšky pro dokonalý střed */
    margin: 0; 
    z-index: 10;
}
.tile { 
    width: 280px; 
    height: 280px; 
    border: 6px solid var(--pixel-black); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 24px; 
    font-weight: bold; 
    cursor: pointer; 
    box-shadow: 10px 10px 0px var(--pixel-black); 
    flex-shrink: 0; /* Přidej toto, aby se dlaždice nedeformovaly */
}
.tile.beige { 
    background: var(--pixel-beige-dark); 
}
.tile.beige { background: var(--pixel-beige-dark); }
.tile:active { transform: translate(5px, 5px); box-shadow: 5px 5px 0px var(--pixel-black); }

.win-sub-header { background: var(--pixel-beige-light); border-bottom: 3px solid var(--pixel-black); padding: 10px; display: flex; justify-content: space-between; align-items: center; }
.note-box { border: 3px solid black; padding: 5px 15px; background: white; color: var(--pixel-orange); font-weight: bold; min-width: 100px; text-align: center; }
.audio-on-badge { color: white; padding: 5px 10px; border: 3px solid black; font-size: 14px; transition: background 0.3s; font-weight: bold; }
.chat-area { flex: 1; padding: 20px; overflow-y: auto; background: var(--pixel-beige-light); }
.win-footer { padding: 15px; border-top: 3px solid black; display: flex; gap: 10px; background: var(--pixel-beige-dark); }
.win-footer input { flex: 1; border: 3px solid black; padding: 10px; font-size: 18px; outline: none; }

.orange-placeholder::placeholder { color: var(--pixel-orange); opacity: 0.8; }

.send-btn { background: var(--pixel-orange); border: 3px solid black; padding: 10px 30px; font-size: 26px; font-weight: bold; cursor: pointer; color: white; text-shadow: 2px 2px 0px black; display: flex; align-items: center; justify-content: center; }
.send-btn:active { transform: translateY(2px); }

.note-icon-box { 
    width: 60px; height: 60px; border: 3px solid black; background: white; 
    display: flex; align-items: center; justify-content: center; cursor: pointer; 
}
.note-icon-box.playing { background: var(--pixel-orange) !important; }
.note-icon-box svg { width: 40px; }

.playing-char {
    background-color: var(--pixel-green-bg);
    color: white;
}
.settings-wrap {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}

/* Aby ikonka ozubeného kolečka byla dost velká a centrovaná */
.settings-wrap .square-btn {
    font-size: 30px;
    line-height: 1;
}
/* Specifický styl pro globální sidebar */
global-sidebar-style {
    position: fixed; /* Musí být fixní */
    top: 0;
    right: 0; /* Musí být nula, aby byla vpravo */
    left: auto;
    height: 100vh;
    width: 320px;
    z-index: 200;
    border-left: 3px solid black;
    background: var(--pixel-beige-dark);
    display: flex;
    flex-direction: column;
}

/* Zajištění, že hlavička v sidebaru bude mít správnou výšku */
.global-sidebar-style {
    position: fixed !important;
    top: 80px !important;      /* Mezera shora, aby byla pod tlačítkem */
    right: 20px !important;    /* Zarovnání k pravému okraji */
    left: auto !important;     /* Zruší centrování */
    width: 320px;
    height: auto;
    max-height: 80vh;
    z-index: 1000;             /* Aby byla nad chatboty */
    background: var(--pixel-beige-dark);
    border: 3px solid black;
    display: flex;
    flex-direction: column;
    box-shadow: 10px 10px 0px var(--pixel-black); /* Přidá stín, aby ladila */
}
/* Kontejner pro obsah sidebaru pod hlavičkou */
.sidebar-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--pixel-beige-dark); 
    flex: 1; /* Aby barva vyplnila celou výšku lišty */
}

/* Nadpis sekce v sidebaru (podobný sidebar-item, ale neklikací) */
.sidebar-label {
    padding: 15px;
    background: var(--pixel-beige-light);
    border-bottom: 2px solid black;
    font-weight: bold;
    font-size: 18px;
    color: var(--pixel-black);
}

/* Mřížka pro tlačítka jazyků v sidebaru */
.settings-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dva sloupce vedle sebe */
    gap: 10px;
    padding: 15px;
    border-bottom: 3px solid black;
    background: var(--pixel-beige-dark);
}

/* Úprava lang-btn pro sidebar (aby nebyly moc obří) */
.settings-lang-grid .lang-btn {
    font-size: 20px;
    padding: 5px;
    width: 100%;
    text-align: center;
}
/* Změna barvy aktivního jazyka z oranžové na zelenou */
.lang-btn.active { 
    background: var(--pixel-green-bg) !important; 
    color: white; 
}

/* Styl pro rozbalenou sekci v sidebaru */
#lang-section {
    background: var(--pixel-beige-light);
    border-bottom: 2px solid black;
}

.settings-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px;
}
/* Menší mřížka a tlačítka pro nastavení */
.small-grid {
    grid-template-columns: repeat(4, 1fr) !important; /* Všechny 4 vedle sebe */
    gap: 5px !important;
    padding: 10px !important;
}

.small-grid .lang-btn {
    font-size: 16px !important;
    padding: 5px 2px !important;
    border: 2px solid var(--pixel-black) !important;
}

/* Zajištění, aby šipka v menu vypadala dobře */
#lang-arrow {
    display: inline-block;
    width: 20px;
    font-size: 14px;
}
/* Styl pro volume slider */
#volume-slider {
    -webkit-appearance: none;
    height: 12px;
    background: var(--pixel-beige-dark);
    border: 3px solid black;
    outline: none;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 30px;
    background: var(--pixel-orange);
    border: 3px solid black;
    cursor: pointer;
}

#volume-slider::-moz-range-thumb {
    width: 20px;
    height: 30px;
    background: var(--pixel-orange);
    border: 3px solid black;
    cursor: pointer;
}
/* 1. Černobílý režim */
body.grayscale-mode {
    filter: grayscale(100%) contrast(1.1);
}
/* ============================================================ */
/* --- KOMPLETNÍ INTERAKTIVNÍ ACC (KONTRASTNÍ) REŽIM --- */
/* ============================================================ */

body.acc-mode {
    --pixel-orange: #0055AA    /* Tmavě modrá */
    --pixel-green-bg: #FFFF00  /* Žlutá */
    --pixel-beige-light: #FFFFFF; /* Bílá */
    --pixel-beige-dark: #DDDDDD;
    --pixel-black: #000000;
}


/* --- 1. ZÁKLADNÍ PLOCHY (Tiles, Win Headers) --- */
body.acc-mode .tile, 
body.acc-mode .win-header,
body.acc-mode .win-title {
    background-color: #0055AA  !important;
    color: #FFFF00 !important;
}
/* Reakce na najetí (Hover / Gamepad) */
body.acc-mode .close-x:hover, 
body.acc-mode .control-btn:hover,
body.acc-mode .close-x.gamepad-focus,
body.acc-mode .control-btn.gamepad-focus {
    background-color: #FFFF00 !important;
    color: #000000 !important;
}

/* --- 2. TLAČÍTKA X A (-) --- */
body.acc-mode .close-x, 
body.acc-mode .control-btn {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}
body.acc-mode .close-x:hover, 
body.acc-mode .control-btn:hover,
body.acc-mode .close-x.gamepad-focus,
body.acc-mode .control-btn.gamepad-focus {
    background-color: #FFFF00 !important;
    color: #000000 !important;
}

/* --- 3. NOTY, PLAY/PAUSE A MIKROFON --- */
body.acc-mode .note-icon-box,
body.acc-mode #play-pause-btn,
body.acc-mode #mic-status-badge {
    background-color: #0055AA  !important;
}
body.acc-mode .note-icon-box svg,
body.acc-mode #play-pause-btn svg,
body.acc-mode #mic-status-badge svg {
    fill: #FFFFFF !important; /* Žlutá ikonka */
}
body.acc-mode #mic-status-badge svg {
    fill: #000000 !important; /* Žlutá ikonka */
}
/* Reakce při najetí (zmodrá na žlutou) */
body.acc-mode .note-icon-box:hover,
body.acc-mode #play-pause-btn:hover,
body.acc-mode #mic-status-badge:hover,
body.acc-mode .note-icon-box.gamepad-focus,
body.acc-mode #play-pause-btn.gamepad-focus,
body.acc-mode #mic-status-badge.gamepad-focus {
    background-color: #FFFF00 !important;
}
body.acc-mode .note-icon-box:hover svg,
body.acc-mode #play-pause-btn:hover svg,
body.acc-mode #mic-status-badge:hover svg,
body.acc-mode .gamepad-focus svg {
    fill: #000000 !important; /* Ikonka zčerná na žlutém podkladu */
}

/* --- 4. KLÁVESNICE (Backspace, Caps, Shift, Mezerník) --- */
body.acc-mode .key.orange-key,
body.acc-mode .backspace-key,
body.acc-mode .capslock-key,
body.acc-mode .shift-key,
body.acc-mode #special-space-bot1 {
    background-color: #0055AA  !important;
    color: #FFFF00 !important;
}
/* Aktivní klávesy (zelená se mění na žlutou) */
body.acc-mode .key.key-active {
    background-color: #FFFF00 !important;
    color: #000000 !important;
}
/* Reakce kláves na najetí */
body.acc-mode .key:hover,
body.acc-mode .key.gamepad-focus {
    background-color: #0055AA !important;
    color: #000000 !important;
}

/* --- 5. LIŠTA KLÁVESNICE A TLAČÍTKO ODESLAT --- */
body.acc-mode .kb-toggle-bar,
body.acc-mode #special-send-bot1 {
    background-color: #0055AA !important;
    color: #FFFF00 !important;
}
body.acc-mode .kb-toggle-bar:hover,
body.acc-mode #special-send-bot1:hover,
body.acc-mode .kb-toggle-bar.gamepad-focus,
body.acc-mode #special-send-bot1.gamepad-focus {
    background-color: #FFFF00 !important;
    color: #0055AA !important;
}

/* --- 6. SPECIÁLNÍ OPRAVA PRO IKONKY V KLÁVESÁCH --- */
body.acc-mode .key svg { fill: #FFFF00 !important; }
body.acc-mode .key.key-active svg,
body.acc-mode .key.gamepad-focus svg { fill: #000000 !important; }

/* --- OPRAVA POUZE PRO BOT 1 (ACC REŽIM) --- */

/* 1. AUDIO ZAPNUTO - modré #0055AA */
body.acc-mode .audio-on-badge {
    background-color: #0055AA !important;
    color: white !important;
    border: 2px solid white !important;
}

/* 2. BUBLINA UŽIVATELE - modrá #0055AA */
body.acc-mode .user-msg {
    background-color: #0055AA !important;
    color: white !important;
    border: 2px solid white !important;
}

/* 3. MEZERNÍK - po najetí šipkami/gamepadem zežloutne */
body.acc-mode #special-space-bot1.gamepad-focus,
body.acc-mode #special-space-bot1.gamepad-orange,
body.acc-mode #special-space-bot1.gamepad-green,
body.acc-mode #special-space-bot1:hover {
    background-color: #FFFF00 !important;
    color: black !important;
}
/* --- ÚPRAVA HORNÍCH TLAČÍTEK (ACC) --- */
body.acc-mode .long-btn, 
body.acc-mode #gear-btn {
    background-color: #DDDDDD !important; /* Šedá jako pozadí */
    color: black !important;
    border: 3px solid black !important;
}

/* Po najetí (gamepad i myš) zezmodrají */
body.acc-mode .long-btn:hover, 
body.acc-mode #gear-btn:hover,
body.acc-mode .long-btn.gamepad-focus,
body.acc-mode #gear-btn.gamepad-focus {
    background-color: #0055AA !important;
    color: white !important;
}
/* Specificky pro ACC režim (modrá -> žlutá) */
body.acc-mode #special-send-bot1.gamepad-focus,
body.acc-mode #special-send-bot1:hover {
    background-color: #FFFF00 !important;
    color: black !important;
    border-color: black !important;
}

/* --- ÚPRAVA INFO OKNA (ACC) --- */

/* Kolonky v menu - modré */
body.acc-mode .sidebar-item {
    background-color: #0055AA !important;
    color: white !important;
    border-bottom: 2px solid white !important;
}

/* Po najetí kolonky zežloutnou */
body.acc-mode .sidebar-item:hover,
body.acc-mode .sidebar-item.gamepad-focus {
    background-color: #FFFF00 !important;
    color: black !important;
}

/* Plocha s textem - šedá jako pozadí */
body.acc-mode #info-content {
    background-color: #DDDDDD !important;
    color: black !important;
}

/* Sidebar podklad */
body.acc-mode .win-sidebar {
    background-color: #DDDDDD !important;
    border-right: 3px solid black !important;
}
/* --- ÚPRAVA TLAČÍTEK JAZYKŮ A REŽIMŮ (ACC) --- */

/* Když je tlačítko aktivní, najede se na něj myší nebo gamepadem */
body.acc-mode .lang-btn.active,
body.acc-mode .lang-btn:hover,
body.acc-mode .lang-btn.gamepad-focus,
body.acc-mode .lang-btn.gamepad-orange {
    background-color: #0055AA !important;
    color: white !important;
    border-color: white !important;
}
/* --- ÚPRAVA LINKY HLASITOSTI (ACC) --- */

/* Pro Chrome/Edge/Safari */
body.acc-mode #volume-slider:focus::-webkit-slider-runnable-track,
body.acc-mode #volume-slider.gamepad-focus::-webkit-slider-runnable-track {
    border-color: #0055AA !important;
}

/* Pro Firefox */
body.acc-mode #volume-slider:focus::-moz-range-track,
body.acc-mode #volume-slider.gamepad-focus::-moz-range-track {
    background: #0055AA !important;
    border-color: white !important;
}
/* --- 1. MODRÉ NÁZVY V INFO OKNĚ (ACC) --- */
body.acc-mode #info-content .text-orange,
body.acc-mode #info-content .orange-text,
body.acc-mode #info-content span.text-orange {
    color: #0055AA !important;
}

/* Samotné kolečko slideru v ACC, aby bylo lépe vidět */
body.acc-mode #volume-slider::-webkit-slider-thumb {
    background: #FFFF00 !important; /* Žluté kolečko pro kontrast */
}
/* Přebarvení obrázku ovladače v kontrastním režimu na bílo-žlutou */
body.acc-mode img[src="controller. (kopie).png"] {
    filter: invert(1) brightness(2) drop-shadow(5px 5px 0px #000);
}
/* Úprava, aby posuvník byl v kontejneru hezky uprostřed */
#volume-section input[type="range"] {
    display: block;
    margin: 0 auto;
}
/* Specifické nastavení pro mřížku režimů v nastavení */
#mode-section .settings-lang-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 sloupce */
    gap: 5px;
    padding: 10px;
}

/* Úprava tlačítek přímo v sekci REŽIM */
#mode-section .lang-btn {
    font-size: 12px !important;
    padding: 8px 2px !important;
    line-height: 1.1;
    height: auto;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    word-break: break-word;
    /* ZJEMNĚNÍ LINKY: */
    border: 2px solid var(--pixel-black) !important; 
}
/* --- 2. SVĚTLE ŠEDÝ EFEKT PRO VYBRANÁ TLAČÍTKA --- */

/* Shift, Mezerník (Bot 1 i Bot 2) a Mikrofon */
/* --- OPRAVA: TLAČÍTKA BUDOU ZELENÁ V BAREVNÉM REŽIMU --- */
.shift-key.gamepad-focus,
.backspace-key.gamepad-focus,
.shift-key:hover,

#mic-status-badge.gamepad-focus,
#special-space-bot1.gamepad-focus {
    background-color: var(--pixel-green-bg) !important;
    color: white !important;
}

/* Zajištění, aby ikonky v těchto tlačítkách zbělely */
.shift-key.gamepad-focus svg,
.backspace-key.gamepad-focus svg,
#mic-status-badge.gamepad-focus svg {
    fill: white !important;
}

/* --- ŠEDÁ ZŮSTANE POUZE V ACC (KONTRASTNÍM) REŽIMU --- */
body.acc-mode .shift-key.gamepad-focus,
body.acc-mode .backspace-key.gamepad-focus,
body.acc-mode #mic-status-badge.gamepad-focus,
body.acc-mode #special-space-bot1.gamepad-focus {
    background-color: #DDDDDD !important;
    color: black !important;
}

body.acc-mode .shift-key.gamepad-focus svg,
body.acc-mode .backspace-key.gamepad-focus svg,
body.acc-mode #mic-status-badge.gamepad-focus svg {
    fill: black !important;
}
/* Sjednocení efektu pro odeslat a mezerník */
#special-send-bot1.gamepad-focus,
#special-send-bot1:hover {
    background-color: var(--pixel-green-bg) !important;
    color: white !important;
    border-color: white !important;
}

/* Zajištění, aby ikonky v těchto tlačítkách při najetí zčernaly */
#mic-status-badge.gamepad-focus svg,
.shift-key.gamepad-focus svg {
    fill: black !important;
}

/* Pokud je text v ukrajinštině stále moc velký, můžeme ho ještě o bod zmenšit */
body:has(#btn-uk.active) #mode-section .lang-btn {
    font-size: 11px !important;
}
/* Kontejner pro tlačítka vpravo nahoře */
.top-right-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 15px; /* Mezera mezi tlačítky */
    z-index: 150;
}

/* Styl pro podlouhlé tlačítko Informace */
.long-btn {
    background: var(--pixel-beige-light);
    border: 4px solid var(--pixel-black);
    padding: 5px 25px;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Pixelify Sans', sans-serif;
    height: 45px; /* Stejná výška jako ozubené kolečko */
    display: flex;
    align-items: center;
    justify-content: center;
}

.long-btn:hover {
    background: var(--pixel-orange);
    color: white;
}

/* Třída pro aktivní (oranžové) nastavení */
.gear-active {
    background: var(--pixel-orange) !important;
    color: white !important;
}
/* Ovládání vpravo nahoře */
.top-right-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 150;
}

/* Podlouhlé tlačítko Informace */
.long-btn {
    background: var(--pixel-beige-light);
    border: 4px solid var(--pixel-black);
    padding: 5px 25px;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Pixelify Sans', sans-serif;
    height: 45px;
    display: flex;
    align-items: center;
}

.long-btn:hover {
    background: var(--pixel-orange);
    color: white;
}

/* Oranžové ozubené kolečko při kliknutí */
.gear-active {
    background: var(--pixel-orange) !important;
    color: white !important;
}

/* Vycentrování chatbotů na střed */
.grid-container {
    display: flex;
    gap: 40px;
    margin-top: 150px;
    justify-content: center;
    width: 100%;
}
/* 1. Barva při najetí myší (Hover) */
#gear-btn:hover {
    background: var(--pixel-orange) !important;
    color: white !important;
}

/* 2. Barva po kliknutí / když je menu otevřené (Active) */
.gear-active {
    background: var(--pixel-orange) !important;
    color: white !important;
}
/* Styl pro ikonku v tlačítku chatbota */
.tile-icon {
    width: 150px;  /* Velikost ikonky */
    height: 150px;
    image-rendering: pixelated; /* Aby zůstala kostičkovaná */
}

/* Zajištění, že se ikonka nezmění v ACC režimu na neviditelnou */
body.acc-mode .tile-icon {
    fill: #FFFFFF; /* Bublina zůstane bílá */
}

/* Efekt při najetí myší na dlaždici */
.tile:hover .tile-icon {
    transform: scale(1.1); /* Ikonka se lehce zvětší */
    transition: transform 0.1s;
}
/* Styl pro pixelovou ikonku v tlačítku */
.pixel-icon {
    width: 100px; /* Velikost ikonky uvnitř čtverce */
    height: 160px;
    /* Důležité: zabrání vyhlazování, aby pixely byly ostré */
    shape-rendering: crispEdges; 
}

/* Aby se barva bubliny neměnila v ACC režimu (chceme ji nechat bílou) */
body.acc-mode .pixel-icon rect[fill="white"] {
    fill: #FFFFFF !important;
}

/* Animace při najetí myší na dlaždici */
.tile:hover .pixel-icon {
    transform: scale(1.05);
    transition: transform 0.1s;
}
/* Styl pro 8-bitovou bublinu */
.pixel-bubble-icon {
    width: 200px; /* Velikost ikonky */
    height: 200px;
    /* Zakáže vyhlazování - pixely budou dokonale ostré */
    shape-rendering: crispEdges;
}

/* Aby bublina zůstala bílá i v barevných režimech */
body.acc-mode .pixel-bubble-icon rect[fill="white"],
body.grayscale-mode .pixel-bubble-icon rect[fill="white"] {
    fill: #FFFFFF !important;
}

/* Jemné zvětšení při najetí myší na dlaždici */
.tile:hover .pixel-bubble-icon {
    transform: scale(1.08);
    transition: transform 0.1s;
}
/* Styl pro ikonku Chatbota 2 */
.pixel-icon-bot2 {
    width: 500px; /* O něco širší než bublina, aby se tam vše vešlo */
    height: 500px;
    shape-rendering: crispEdges; /* Ostré pixely bez rozmazání */
    display: block;
}

/* Jemné zvětšení při najetí myší na dlaždici */
.tile:hover .pixel-icon-bot2 {
    transform: scale(1.05);
    transition: transform 0.1s;
}
/* Aby zelená šipka v bublině v ACC režimu zůstala viditelná */
body.acc-mode .pixel-bubble-icon rect[style*="var(--pixel-green-bg)"] {
    fill: #000000 !important;
}

/* Zajištění fontu pro text uvnitř SVG */
.pixel-bubble-icon text {
    user-select: none;
    pointer-events: none;
}
/* Kontejner pro tlačítka v sub-headeru */
.header-controls-group {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex: 1; /* Zabere místo uprostřed */
}

/* Zmenšená verze tlačítek pro hlavičku */
.mini-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
}

/* Úprava sub-headeru pro více prvků */
.playback-header {
    padding: 5px 10px;
    gap: 10px;
}

/* Aby footer pro psaní vypadal čistě */
#win-bot2 .win-footer {
    border-top: 3px solid black !important;
    background: var(--pixel-beige-dark) !important;
    padding: 10px !important;
}
/* Kontejner klávesnice */
.keyboard-footer {
    padding: 10px !important;
    background: var(--pixel-beige-dark) !important;
    border-top: 3px solid black !important;
}

.keyboard-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    background: #c3b59f; /* Trochu tmavší béžová pro plastový vzhled */
    padding: 10px;
    border: 3px solid black;
}

.kb-row {
    display: flex;
    justify-content: center;
    gap: 4px;
}

/* Základní klávesa */
.key {
    background: var(--pixel-beige-light);
    border: 2px solid black;
    border-bottom-width: 4px; /* Retro hloubka tlačítka */
    padding: 8px 5px;
    font-family: 'Pixelify Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    min-width: 35px;
    transition: all 0.05s;
}

.key:active {
    border-bottom-width: 2px;
    transform: translateY(2px);
    background: var(--pixel-orange);
    color: white;
}

/* Speciální klávesy */
.backspace-key { min-width: 100px; background: #dcaaaa; }
.capslock-key { min-width: 60px; }
.shift-key { min-width: 80px; }
.space-key { width: 300px; }

/* Aktivní stav Caps/Shift */
.key-active {
    background: var(--pixel-green-bg) !important;
    color: white !important;
}
/* Speciální oranžové klávesy */
.orange-key {
    background: var(--pixel-orange) !important;
}

/* Klávesa Enter */
.enter-key {
    min-width: 80px;
    background: var(--pixel-beige-dark);
}

/* Úprava mezer a šířky řad */
.kb-row {
    margin-bottom: 2px;
}

/* Aby ikonky v klávesách byly vycentrované */
.key svg {
    display: block;
    margin: 0 auto;
}

/* Zvýraznění aktivních stavů (zelená) */
.key-active {
    background: var(--pixel-green-bg) !important;
}
/* Aby piktogram v aktivním shiftu/capsu zbělel pro kontrast */
.key-active svg {
    fill: white;
}
/* Velikosti kláves */
.keyboard-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.kb-row {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.key {
    min-width: 40px;
    height: 45px;
    background: var(--pixel-beige-light);
    border: 2px solid black;
    border-bottom-width: 5px;
    font-family: 'Pixelify Sans', sans-serif;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Oranžové klávesy */
.orange-key {
    background: var(--pixel-orange) !important;
}

/* Velký Spacebar */
.space-key {
    width: 450px; /* Zvětšeno podle potřeby */
    height: 45px;
}

/* Speciální šířky */
.backspace-key, .shift-key, .enter-key, .capslock-key {
    min-width: 80px;
}

.key:active {
    border-bottom-width: 2px;
    transform: translateY(3px);
}

/* Aktivní Shift/Caps (Zelená) */
.key-active {
    background: var(--pixel-green-bg) !important;
}
.key-active svg {
    fill: white;
}
/* Větší font pro otazník a vykřičník */
.big-symbol {
    font-size: 26px;
    display: block;
    line-height: 1;
}

/* Oprava a barva mezerníku */
.space-key {
    width: 450px !important; /* Šířka mezerníku */
    height: 45px;
    background: var(--pixel-orange) !important;
}

/* Oranžová barva pro funkční klávesy (pokud ještě nemáš) */
.orange-key {
    background: var(--pixel-orange) !important;
}

/* Styl pro vnitřek kláves (zarovnání spanu) */
.key .big-symbol {
    pointer-events: none;
}
/* Aby Play/Pause tlačítko v klávesnici ladilo s ostatními klávesami */
#play-pause-btn.key {
    border-bottom-width: 5px;
    margin-left: 5px;
}

#play-pause-btn.key:active {
    border-bottom-width: 2px;
    transform: translateY(3px);
}

/* Úprava ikonky noty, aby byla černá a ostrá */
.note-icon-box svg {
    shape-rendering: crispEdges;
    fill: black;
}
/* Kontejner klávesnice */
.keyboard-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.kb-row {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.key {
    min-width: 45px;
    height: 48px;
    background: var(--pixel-beige-light);
    border: 2px solid black;
    border-bottom-width: 5px;
    font-family: 'Pixelify Sans', sans-serif;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Velikosti speciálních kláves */
.space-key {
    width: 380px !important;
}

.play-key-fixed {
    min-width: 80px !important;
    font-size: 24px !important;
}

.backspace-key, .enter-key, .shift-key, .capslock-key {
    min-width: 85px;
}

/* Oranžová barva */
.orange-key {
    background: var(--pixel-orange) !important;
}

/* Velké symboly ? a ! */
.big-symbol {
    font-size: 28px;
    line-height: 1;
}

.key:active {
    border-bottom-width: 2px;
    transform: translateY(3px);
}

/* Styl pro pole, kde se vypisuje text (Opravuje mezerník a scrollování) */
#mic-result {
    flex: 1;
    font-size: 32px;
    color: var(--pixel-orange);
    text-align: left;
    padding: 20px;
    line-height: 1.4;
    overflow-y: auto;
    background: white;
    border: 3px solid black;
    outline: none;
    
    /* Zajištění, aby mezerník dělal viditelné mezery */
    white-space: pre-wrap; 
    
    /* Zajištění, aby se text neztrácel vpravo */
    word-wrap: break-word;
    word-break: break-word;
}
/* Aby se klávesnice v ukrajinštině (kde je víc písmen) nerozsypala */
.keyboard-container {
    max-width: 100%;
    overflow-x: hidden;
}

.key {
    /* Trochu zmenšíme padding, aby se tam vlezla i azbuka */
    padding: 5px; 
    min-width: 38px; 
}

.space-key {
    width: 250px !important; /* Mírně zmenšeno, aby zbyl prostor pro pátou řadu diakritiky */
}
/* Tmavší podkladová plocha pod klávesnicí */
.keyboard-footer {
    padding: 15px !important;
    background: #c3b59f !important; /* Ta tmavší tělová barva */
    border-top: 3px solid black !important;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Kontejner pro samotné klávesy */
.keyboard-container {
    width: 95%; /* Rozšíření klávesnice */
    max-width: 850px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kb-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    width: 100%;
}

.key {
    min-width: 42px; /* Mírně větší klávesy */
    height: 45px;
    background: var(--pixel-beige-light);
    border: 2px solid black;
    border-bottom-width: 4px;
    font-family: 'Pixelify Sans', sans-serif;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
}

/* Velký mezerník */
.space-key {
    width: 350px !important;
}

/* Oranžové klávesy */
.orange-key {
    background: var(--pixel-orange) !important;
}
/* Kontejner pro správné řazení pod sebe */
.tiles-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tiles-row {
    display: flex;
    gap: 40px;
}

/* Styl pro potvrzovací tlačítko HRAJ */
/* Základní vzhled tlačítka HRAJ pod chatboty */
.big-confirm-btn {
    background: var(--pixel-orange); /* Výchozí oranžová */
    color: white;
    border: 6px solid var(--pixel-black);
    padding: 15px 60px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 8px 8px 0px var(--pixel-black);
    font-family: 'Pixelify Sans', sans-serif;
    text-transform: uppercase;
    transition: background 0.1s;
}

/* PO NAJETÍ MYŠÍ (Hover) - zezelená */
.big-confirm-btn:hover {
    background: var(--pixel-green-bg) !important;
}

/* PO KLIKNUTÍ (Active) - zůstane zelené a mírně se "propadne" */
.big-confirm-btn:active {
    background: #246d56 !important; /* Trochu tmavší zelená pro efekt stisku */
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px var(--pixel-black);
}

.big-confirm-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px var(--pixel-black);
}

/* Kontejner pro správné řazení pod sebe */
.tiles-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 10;
}

.tiles-row {
    display: flex;
    gap: 40px;
}

/* Když na dlaždici klikneš, přidáme jí bílý obrys */
.tile.selected-bot {
    border-color: white !important; /* Změna rámečku na bílý */
    transform: scale(1.05); /* Trochu se zvětší */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* Záře */
}

/* Styl pro velké tlačítko HRAJ */
.big-confirm-btn {
    background: var(--pixel-orange);
    color: white;
    border: 6px solid var(--pixel-black);
    padding: 15px 60px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 8px 8px 0px var(--pixel-black);
    font-family: 'Pixelify Sans', sans-serif;
    text-transform: uppercase;
}

.big-confirm-btn:hover {
    background: var(--pixel-green-bg);
}

.big-confirm-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px var(--pixel-black);
}
/* --- KLÁVESNICE PRO CHATBOTA 1 (Finální úprava - sjednocení s Botem 2) --- */

/* --- FINÁLNÍ OPRAVA SPODNÍHO ŘÁDKU BOT 1 --- */

/* Kontejner musí rozložit tlačítka na celou šířku */
#dynamic-keyboard-1 .bot1-special-row {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 15px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}
/* --- OPRAVA PRO BACKSPACE --- */
.backspace-key.gamepad-focus,
.backspace-key.gamepad-green,
.backspace-key:hover {
    background-color: var(--pixel-orange-bg) !important;
    color: #2E8B6E;
}
/* MEZERNÍK: Zabere veškeré volné místo */
#special-space-bot1 {
    width: 520px !important;  /* Tady je ta hlavní "váha" - uprav číslo podle potřeby */
    min-width: 520px !important;
    height: 55px !important;
    background-color: var(--pixel-orange) !important;
    border: 3px solid black !important;
    border-bottom: 6px solid black !important; /* Silnější spodní hrana pro retro look */
    flex-shrink: 0 !important; /* Zabrání zmenšení */
}


/* --- OPRAVA PRO ODESLAT (Vynucení zelené) --- */
#special-send-bot1.gamepad-focus,
#special-send-bot1.gamepad-green,
#special-send-bot1.gamepad-orange,
#special-send-bot1:hover {
    background-color: var(--pixel-green-bg) !important;
    color: #2E8B6E;
    border-color: black !important;
}

/* --- EFEKT JAKO U LIŠTY (Zelená + Bílá) --- */

/* Když na ODESLAT najedeš ovladačem nebo myší, zezelená a zbělá mu text */
#special-send-bot1:hover,
#special-send-bot1.gamepad-focus,
#special-send-bot1.gamepad-green {
    background-color: var(--pixel-green-bg) !important;
    color: white !important; /* Bílá barva textu jako na liště */
    border-color: black !important;
}

/* Mezerník při najetí jen zezelená */
#special-space-bot1:hover,
#special-space-bot1.gamepad-focus {
    background-color: var(--pixel-green-bg) !important;
}

/* 2. Samotné klávesy */
#dynamic-keyboard-1 .key {
    height: 40px;         
    min-width: 30px;      
    padding: 0 4px;    
    font-size: 16px;      
    flex-grow: 1;         
    max-width: 60px;      
}

/* 3. Ikonky */
#dynamic-keyboard-1 .key svg {
    width: 18px;          
    height: 18px;
}

/* 4. Chatovací okno */
#win-bot1 .chat-area {
    flex: 1;           
    min-height: 100px;    
    overflow-y: auto;  
}

/* 5. Patička */
#win-bot1 .win-footer {
    flex-shrink: 0;
    padding: 10px 5px;    
    background: var(--pixel-beige-dark); 
}

/* --- ÚPRAVA SPODNÍHO ŘÁDKU (Mezerník + Šipka) --- */

/* MEZERNÍK: Nastavíme mu pevnou šířku, aby byl kratší */
#dynamic-keyboard-1 .space-key {
    flex: 0 0 auto !important;   /* Vypneme automatické roztahování */
    width: 240px !important;     /* Tady určujeme délku! (Změň číslo, pokud chceš jinou) */
    max-width: none !important;  
    margin-right: 10px !important; /* Mezera mezi mezerníkem a šipkou */
}

/* TLAČÍTKO ODESLAT (Šipka): Pevný čtverec */
#dynamic-keyboard-1 .kb-row:last-child .key:last-child {
    flex: 0 0 50px !important;   /* Šířka tlačítka */
    width: 50px !important;
    max-width: 50px !important;
}
/* --- STYL BUBLIN PRO CHATBOTA 1 --- */

/* Bublina uživatele (tu, co píšeš) */
.user-msg {
    background: var(--pixel-orange); /* Oranžová barva */
    color: white;                    /* Bílý text */
    padding: 10px 15px;
    border: 2px solid black;         /* Černý rámeček */
    margin: 5px 10px 5px auto;       /* 'auto' vlevo zarovná bublinu DOPRAVA */
    max-width: 80%;                  /* Aby nebyla přes celou šířku */
    font-family: 'Pixelify Sans', sans-serif;
    text-transform: none !important;
    word-wrap: break-word;           /* Zalamování dlouhých slov */
    align-self: flex-end;            /* Pojistka pro flexbox */
}

/* Bublina bota (notička) - jen pro jistotu, aby byly hezky pod sebou */
.note-msg {
    align-self: flex-start;          /* Bot je vlevo */
    margin: 5px auto 5px 10px;
}

/* Úprava chatu, aby bubliny fungovaly správně */
#chat-display-1 {
    display: flex;
    flex-direction: column;          /* Bubliny pod sebou */
    padding-bottom: 10px;
}
/* --- ZVĚTŠENÍ NOT (IKON A TLAČÍTEK) U CHATBOTA 2 --- */

/* 1. Zvětšíme samotný čtvereček (tlačítko), ve kterém je nota */
.note-icon-box {
    width: 60px !important;       /* Výrazně větší čtverec (dřív cca 30-40px) */
    height: 60px !important;
    padding: 10px !important;     /* Větší prostor uvnitř */
    
    display: flex !important;     /* Aby byla nota uprostřed */
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Zvětšíme samotnou kresbu noty (SVG) uvnitř */
.note-icon-box svg {
    width: 40px !important;       /* Nota bude velká */
    height: 40px !important;
}
/* --- GAMEPAD BAREVNOST (JEDNODUCHÁ) --- */

:focus { outline: none !important; }

/* --- NOVÝ PIXELOVÝ KURZOR (BÍLÁ ŠIPKA) --- */
#virtual-mouse {
    position: fixed;
    top: 0; left: 0;
    width: 35px; 
    height: 35px;
    
    /* ZDE BYLA CHYBA: Nyní je fill='white' nastaveno správně uvnitř cesty (path) */
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges'%3E%3Cpath d='M0 0 V17 H5 V13 H7 V18 H10 V13 H13 V10 H9 V6 H5 V0 H0 Z' fill='white' /%3E%3C/svg%3E") !important;
    
    background-repeat: no-repeat;
    background-size: contain;

    image-rendering: pixelated; 
    image-rendering: -moz-crisp-edges;
    
    pointer-events: none !important; 
    z-index: 100000;
    display: none;
    
    /* Reset starých stylů */
    border: none !important;
    background-color: transparent !important;
    transform: none !important; 
    
    /* Sytě černý stín, aby byla bílá šipka dobře vidět */
    filter: drop-shadow(4px 4px 0px black) !important;
}

/* Efekt při kliknutí */
#virtual-mouse.clicking {
    transform: scale(0.9) !important;
}

/* ORANŽOVÁ (Standard) */
.gamepad-orange {
    background-color: var(--pixel-orange) !important;
    color: black !important;
    border-color: black !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
}

/* ZELENÁ (Speciální tlačítka) */
.gamepad-green {
    background-color: #2E8B6E !important; /* Tvoje Zelená */
    color: black !important;
    border-color: black !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
}

/* Inputy a posuvníky (Bílá) */
input.gamepad-orange, input.gamepad-green,
textarea.gamepad-orange, textarea.gamepad-green {
    background-color: white !important;
    border: 2px solid black !important;
}

input[type="range"].gamepad-orange,
input[type="range"].gamepad-green {
    border: none !important;
    outline: 4px solid var(--pixel-orange) !important; 
    background-color: transparent !important;
}
/* Speciální styl pro gamepad na posuvníku hlasitosti */
input[type="range"].gamepad-black-bold {
    outline: 6px solid black !important; /* Tučný černý obrys */
    background: transparent !important;
    box-shadow: 0 0 0 2px white; /* Malý bílý okraj pro oddělení od pozadí */
    cursor: none; /* Skryje myš, když ovládáš gamepadem */
    z-index: 1000;
}
/* --- BARVY PRO NOTU U BOTA 1 --- */

/* 1. VÝCHOZÍ STAV (NEHRAJE) -> ČERVENÁ */
.note-icon-box {
    width: 60px !important;
    height: 60px !important;
    border: 3px solid black;
    
    /* Tady nastavujeme tu červenou pro stav "ticho" */
    background: #F26539 !important; /* Červená */
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background 0.1s;
}

/* 2. HRAJÍCÍ STAV -> ZELENÁ */
.note-icon-box.playing {
    background: var(--pixel-green-bg) !important; /* Zelená */
    color: white !important;
}

/* Zajištění, že SVG uvnitř bude černé nebo bílé podle kontrastu */
.note-icon-box svg {
    fill: black !important; /* Ikona noty černá */
}
.note-icon-box.playing svg {
    fill: white !important; /* Když hraje, nota zbělá */
}
/* --- GAMEPAD: BÉŽOVÝ VÝBĚR (Dlaždice + Malé noty) --- */
.gamepad-beige {
    background-color: var(--pixel-beige-light) !important; /* Tělová */
    color: black !important;
    border-color: black !important;
    transform: scale(1.05); /* Jemné zvětšení */
    box-shadow: 5px 5px 0px rgba(0,0,0,0.2) !important;
}

/* U dlaždic chceme, aby zmizela ta oranžová a byla béžová */
.tile.gamepad-beige {
    background: var(--pixel-beige-light) !important;
}

/* U malých notiček taky */
.mini-btn.gamepad-beige {
    background: var(--pixel-beige-light) !important;
}
/* --- ÚPRAVA SPODNÍHO ŘÁDKU U CHATBOTA 1 --- */

/* 1. Zvětšení mezerníku (jen pro Bota 1) */
#dynamic-keyboard-1 .space-key {
    width: 450px !important; /* Výrazně širší */
    flex-grow: 0;            /* Aby se nedeformoval */
}

/* 2. Styl pro nové tlačítko ODESLAT */
#dynamic-keyboard-1 .send-key {
    width: 80px !important;  /* Šířka tlačítka odeslat */
    min-width: 80px !important;
    background: var(--pixel-orange);
}

/* 3. Aby byly mezery mezi nimi hezké */
#dynamic-keyboard-1 .kb-row:last-child {
    gap: 10px !important;
}
/* ================================================================= */
/* --- OPRAVA ZAROVNÁNÍ A SPODNÍHO ŘÁDKU (Mezerník + Odeslat) --- */
/* ================================================================= */

/* Zarovnání kontejneru klávesnice */
.keyboard-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Všechny řádky na střed */
    
    /* TOTO JE KLÍČOVÉ PRO VYCENTROVÁNÍ CELÉHO BLOKU */
    margin: 0 auto !important; 
    width: auto !important; /* Ať se roztáhne jen kolik potřebuje */
}

/* Ujistíme se, že patička okna (to béžové pozadí) centruje obsah */
.win-footer {
    justify-content: center !important;
    align-items: center !important;
}


/* ================================================================= */
/* --- FINÁLNÍ ROZTAŽENÍ KLÁVESNICE (PROCENTA MÍSTO PIXELŮ) --- */
/* ================================================================= */

/* 1. Hlavní kontejner klávesnice - ROZTAŽENÍ NA ŠÍŘKU */
.keyboard-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    
    /* Tady říkáme: buď skoro přes celé okno */
    width: 96% !important; 
    max-width: none !important; /* Zrušíme omezení šířky */
    margin: 0 auto !important;  /* Vycentrování bloku */
}

/* Řádky s písmeny - zarovnat na střed */
.kb-row {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 4px !important; /* Mezery mezi klávesami */
}

/* ================================================================= */
/* --- DEFINITIVNÍ OPRAVA VELIKOSTÍ SPODNÍHO ŘÁDKU (Bot 1) --- */
/* ================================================================= */

/* 1. MEZERNÍK - Musí být HLAVNÍ a DLOUHÝ */
#dynamic-keyboard-1 .space-key {
    width: 450px !important;      /* Výrazně ho natáhneme */
    min-width: 450px !important;  /* Pojistka, aby se nezmenšil */
    
    flex: 0 0 auto !important;    /* Zakážeme automatickou změnu velikosti */
    height: 55px !important;
    background: var(--pixel-orange) !important; /* Vrátíme mu oranžovou */
    margin: 0 !important;
    border-bottom-width: 6px !important;
}

/* 2. TLAČÍTKO ODESLAT - Musí být MENŠÍ než mezerník */
#dynamic-keyboard-1 .kb-row:last-child .key:last-child {
    width: 160px !important;      /* Menší, jen aby se vešel text */
    min-width: 160px !important;  /* Pojistka */
    max-width: 160px !important;  /* Důležité: Nesmí se roztahovat do nekonečna */
    
    flex: 0 0 auto !important;
    height: 55px !important;
    background: var(--pixel-beige-light) !important;
    color: black !important;
    
    /* Text */
    font-family: 'Pixelify Sans', sans-serif !important;
    font-size: 22px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    margin: 0 !important;
    border: 3px solid black !important;
    border-bottom-width: 6px !important;
}
/* Hover efekt a Gamepad focus pro tlačítko ODESLAT v Botovi 1 */
#dynamic-keyboard-1 .kb-row:last-child .key:last-child:hover,
#dynamic-keyboard-1 .kb-row:last-child .key:last-child.gamepad-focus {
    background-color: var(--pixel-green-bg) !important;
    color: white !important;
}

/* Pokud máš ACC režim, tak zde je verze pro žlutou barvu */
body.acc-mode #dynamic-keyboard-1 .kb-row:last-child .key:last-child:hover,
body.acc-mode #dynamic-keyboard-1 .kb-row:last-child .key:last-child.gamepad-focus {
    background-color: #FFFF00 !important;
    color: black !important;
}


/* 3. Kontejner řádku - zarovnání */
#dynamic-keyboard-1 .kb-row:last-child {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important; /* Mezera mezi nimi */
    width: 100% !important;
    padding-top: 5px !important;
}
/* Hover efekty pro obě tlačítka */
#dynamic-keyboard-1 .space-key:hover,
#dynamic-keyboard-1 .kb-row:last-child .key:last-child:hover {
    background-color: var(--pixel-green-bg) !important;
    color: white !important;



    
    /* Vycentrování textu */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    flex-shrink: 0 !important;
    white-space: nowrap !important; /* Zabrání zalomení textu */
}

/* --- HOVER EFEKT (Myš) + GAMEPAD FOCUS (Ovladač) --- */
#special-space-bot1:hover,
#special-send-bot1:hover,
#special-space-bot1.gamepad-focus,
#special-send-bot1.gamepad-focus {
    background-color: var(--pixel-green-bg) !important;
    color: white !important;
}

/* --- EFEKT KLIKNUTÍ (Active) --- */
#special-space-bot1:active,
#special-send-bot1:active {
    border-bottom-width: 3px !important;
    transform: translateY(3px) !important;
}

/* --- ACTIVE (Kliknutí) --- */
#special-space-bot1:active,
#special-send-bot1:active {
    border-bottom-width: 3px !important;
    transform: translateY(3px) !important;
}
/* Sjednocení efektu pro mezerník a odeslat v barevném režimu */
#special-space-bot1.gamepad-focus,
#special-send-bot1.gamepad-focus,
#special-space-bot1:hover,
#special-send-bot1:hover {
    background-color:#2E8B6E;
    color: white !important;
}
/* ========================================================== */
/* --- BEZPEČNÁ OPRAVA VNITŘKU CHATBOTA 2 --- */
/* ========================================================== */

/* 1. Cílíme pouze na vnitřní oblast chatu u Bota 2 */
#chat-display-2 {
    /* Přikážeme mu, aby zabral jen volné místo a zbytek scrolloval */
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    
    /* Důležité: Zrušíme minimální výšku, která to roztahovala */
    min-height: 0 !important; 
    height: auto !important;
    
    /* Aby text nezačínal nalepený nahoře */
    padding: 10px 20px !important;
}

/* 2. Cílíme na patičku (klávesnici) u Bota 2 */
#win-bot2 .win-footer, 
#win-bot2 .keyboard-footer {
    /* Patička se nesmí roztahovat, musí sedět dole */
    flex: 0 0 auto !important;
    height: auto !important;
}

/* 3. Pojistka pro samotné okno (bez display: flex, aby fungovalo zavírání) */
#win-bot2 {
    /* Zajistí, že nepřeroste přes 600px jako to druhé okno */
    max-height: 600px !important; 
}
/* --- OPRAVA TLAČÍTKA ODESLAT PRO GAMEPAD --- */
#special-send-bot1.gamepad-green,
#special-send-bot1.gamepad-focus {
    background-color: var(--pixel-green-bg) !important;
    color: white !important;
    border-color: white !important;
}
/* --- OPRAVA: Bílý text na tlačítku ODESLAT při ovládání gamepadem --- */
#special-send-bot1.gamepad-green,
#special-send-bot1.gamepad-focus {
    background-color: var(--pixel-green-bg) !important; /* Zelené pozadí */
    color: white !important;       /* Bílý text */
    border-color: white !important; /* Bílý rámeček */
}
/* --- VELKÉ TLAČÍTKO MIKROFONU (BOT 2) --- */
.big-mic-btn {
    width: 120px;        /* Velká šířka */
    height: 120px;       /* Velká výška */
    background: var(--pixel-orange);
    border: 6px solid black;    /* Tlustý rámeček */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

/* Efekt stisknutí */
.big-mic-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px black;
}

/* Aby se tlačítko nezmenšovalo, když je textu hodně */
.big-mic-btn {
    flex-shrink: 0; 
}
/* --- ZAROVNÁNÍ TLAČÍTEK V HLAVIČCE BOTA 2 NA STŘED --- */

/* 1. Rodičovský kontejner nastavíme na centrování */
.playback-header {
    position: relative !important;   /* Nutné pro absolutní pozicování potomků */
    justify-content: center !important; /* Všechno uvnitř jde na střed */
}

/* 2. Box s nápisem "TÓN" vytrhneme z toku a přilepíme doleva */
.playback-header .note-box {
    position: absolute !important;
    left: 15px !important;           /* Odsazení zleva */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Vycentrování svisle */
}

/* 3. Skupina tlačítek (noty + play) bude uprostřed */
.header-controls-group {
    margin: 0 auto !important;       /* Pojistka pro centrování */
    gap: 10px !important;            /* Mezery mezi tlačítky */
}
/* --- VYSOUVACÍ KLÁVESNICE PRO BOTA 1 --- */

/* Klikací lišta */
.kb-toggle-bar {
    width: 100%;
    background: var(--pixel-orange);
    color: white;
    text-align: center;
    cursor: pointer;
    padding: 8px 0;
    font-weight: bold;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    user-select: none; /* Aby se text neoznačoval myší */
    transition: background 0.2s;
}

.kb-toggle-bar:hover {
    background: var(--pixel-green-bg);
}

/* Obal klávesnice (zajišťuje animaci výšky) */
.keyboard-wrapper {
    max-height: 0;          /* Výchozí stav: skryto */
    overflow: hidden;       /* Co se nevejde, to ořízni */
    transition: max-height 0.4s ease-in-out, padding 0.4s;
    background: var(--pixel-beige-dark);
    width: 100%;
    padding: 0;             /* Výchozí padding 0 */
}

/* Když je otevřeno */
.keyboard-wrapper.open {
    max-height: 400px;      /* Dostatečná výška pro celou klávesnici */
    padding: 10px 5px;      /* Vrátíme padding, aby to vypadalo hezky */
    border-bottom: 3px solid black; /* Rámeček dole, když je vysunuto */
}

/* Úprava footeru pro Bot 1, aby nepřekážel původní styl */
#win-bot1 .win-footer {
    background: transparent !important;
    border: none !important;
}
/* --- ÚPRAVA LIŠTY KLÁVESNICE --- */

.kb-toggle-bar {
    position: relative;       /* Abychom mohli šipku umístit absolutně */
    display: flex;
    justify-content: center;  /* Text zarovnaný na střed */
    align-items: center;
}

/* Styl pro kontejner šipky */
.pixel-arrow-right {
    position: absolute;       /* Vytrhneme ji z toku */
    right: 20px;              /* Umístíme ji 20px od pravého okraje */
    top: 50%;
    transform: translateY(-50%); /* Vycentrujeme svisle */
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease; /* Plynulé otáčení */
}

/* Třída pro otočení šipky (když se klávesnice zavře) */
.pixel-arrow-right.rotated {
    transform: translateY(-50%) rotate(180deg);
}
/* --- BÍLÉ POZADÍ PRO CHATBOTA 1 --- */
#chat-display-1 {
    background: white !important;       /* Změna z béžové na bílou */
}
/* --- FINÁLNÍ VYNUCENÍ ZELENÉ PRO TLAČÍTKO ODESLAT --- */

/* Cílíme na konkrétní ID tlačítka, když je vybrané gamepadem (.gamepad-focus) */
button#special-send-bot1.gamepad-focus {
    background: var(--pixel-green-bg) !important; /* Vynutí zelené pozadí */
    color: white !important;       /* Vynutí bílý text */
    border-color: white !important; /* Vynutí bílý rámeček */
    
    /* Pojistka, aby se nepoužil žádný obrázek na pozadí */
    background-image: none !important; 
    
    /* Efekt zvětšení (volitelné, pro lepší pocit) */
    transform: scale(1.05);
    z-index: 1000;
}
/* --- TEXT MÍSTO IKONEK NA DLAŽDICÍCH --- */
.tile-big-text {
    font-family: 'Pixelify Sans', cursive, sans-serif !important; /* Vynucení fontu */
    font-size: 26px;       
    font-weight: 700;      /* Tučné */
    text-align: center;
    line-height: 1.4;
    color: black;
    text-transform: uppercase;
    pointer-events: none;
    padding: 10px;
    width: 100%;
    word-wrap: break-word;
}

/* Pro ACC režim (kontrast) */
body.acc-mode .tile-big-text {
    color: #FFFF00 !important;
}
/* Vynucení fontu pro všechny ovládací prvky, kde se objevuje azbuka */
button, 
input, 
textarea, 
.key, 
.tile, 
.user-msg, 
#mic-result, 
.win-title,
.sidebar-item {
    font-family: 'Pixelify Sans', sans-serif !important;
}

/* Specifická oprava pro ukrajinštinu a azbuku v klávesnici a mřížce */
[data-key="btnBot1Action"], 
[data-key="btnBot2Action"], 
[data-key="btnBot3Action"],
#alphabet-grid,
.keyboard-container {
    font-family: 'Pixelify Sans', sans-serif !important;
}
/* --- ODSTRANĚNÍ ARTEFAKTŮ (TEČEK) V BOT 3 --- */
#win-bot3 .win-title {
    text-overflow: clip !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Pokud by to byly pseudo-elementy, tohle je smaže */
#win-bot3 .win-title::before, 
#win-bot3 .win-title::after {
    content: none !important;
    display: none !important;
}

/* V ACC režimu pro Bot 3 vypneme stín textu, který ty tečky může způsobovat */
body.acc-mode #win-bot3 .shadow-text {
    text-shadow: none !important;
}
/* --- 3. OPRAVA HOVER EFEKTU ODESLAT (VŠECHNY REŽIMY) --- */

/* Standardní a ČB režim */
#special-send-bot1:hover,
#special-send-bot1.gamepad-focus,
#special-send-bot1.gamepad-orange,
#special-send-bot1.gamepad-green {
    background-color: var(--pixel-green-bg) !important;
    color: white !important;
}

/* Specifické přepsání pro ACC režim (pokud chceš v ACC žlutou jako na liště) */
body.acc-mode #special-send-bot1.gamepad-focus,
body.acc-mode #special-send-bot1:hover {
    background-color: #FFFF00 !important;
    color: black !important;
}
/* Aby legenda ovladače v ACC režimu zbělela/zežloutla */
body.acc-mode .controller-legend span {
    color: #FFFF00 !important;
}

body.acc-mode .controller-legend {
    color: white !important;
}
/* Vynucení zelené barvy pro Backspace při najetí gamepadem */
.backspace-key.gamepad-focus,
.backspace-key:hover {
    background-color: var(--pixel-green-bg) !important;
    color: white !important;
}

/* Zajištění, aby ikonka v Backspace při najetí zbělela */
.backspace-key.gamepad-focus svg,
.backspace-key:hover svg {
    fill: white !important;
}

/* V ACC režimu ponecháme šedou/černou pro kontrast, pokud je aktivní */
body.acc-mode .backspace-key.gamepad-focus {
    background-color: #DDDDDD !important;
    color: black !important;
}
body.acc-mode .backspace-key.gamepad-focus svg {
    fill: black !important;
}
/* Oprava zvýraznění hrajícího písmene v ACC režimu (změna ze zelené na modrou) */
body.acc-mode .playing-char {
    background-color: #0055AA !important; /* Tvá kontrastní modrá */
    color: white !important;
    border: 1px solid white; /* Volitelné: pro lepší viditelnost v ACC */
}