* { box-sizing: border-box; }
html, body { margin: 0; }
/* neon: tmave modre pozadi, svitici barvy, popisky v ruzove a azurove */
:root {
    --neon: #7df9ff;          /* azurova: obrysy, cary, zvyrazneni */
    --ruzova: #ff4fd8;        /* nadpisy a jmeno tahu */
    --text: #e3eeff;
    --tlumeny: #8fb3f0;
    --panel: rgba(5, 16, 54, .78);
}
body {
    background: #04102e radial-gradient(ellipse 120% 80% at 50% 0%, #143a8c 0%, #0a2464 42%, #04102e 100%) fixed;
    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
    -webkit-tap-highlight-color: transparent;
    min-height: 100vh;
}
header { max-width: 1180px; margin: 0 auto; padding: 14px 16px 0; }
.zpet { color: var(--tlumeny); text-decoration: none; font-family: system-ui, sans-serif; font-size: 14px; }
.zpet:hover { color: var(--neon); }
h1 { font-weight: normal; text-align: center; font-size: clamp(22px, 5.5vw, 34px); margin: 10px 0 4px;
     text-shadow: 0 0 18px rgba(125, 249, 255, .35); }
.fial { color: var(--ruzova); text-shadow: 0 0 14px rgba(255, 79, 216, .75); }
main { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; }

/* vlevo kostka, pod ni ovladani a stav; vpravo diagram, ktery pri
   posouvani stranky zustava videt. Na uzkem displeji pod sebou. */
.hra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 32px; align-items: start; }
.pravy { position: sticky; top: 12px; padding-top: 24px; }
@media (max-width: 860px) {
    .hra { grid-template-columns: 1fr; }
    .pravy { position: static; padding-top: 0; }
    /* na telefonu kostka, tlacitka, diagram a az pak stav */
    .levy { display: contents; }
    .horni { order: 1; } .ovladani { order: 2; } .pravy { order: 3; } .stav { order: 4; width: 100%; }
}

/* uzky blok, aby jmeno tahu stalo u kostky i na sirokem displeji */
.horni { position: relative; display: flex; justify-content: center; max-width: 560px; margin: 0 auto; }
#kostka { width: min(72vw, 360px); height: auto; aspect-ratio: 1; touch-action: none; cursor: grab; }
#kostka:active { cursor: grabbing; }
.tah { position: absolute; right: 0; top: 30%; text-align: center; min-width: 70px; }
.tah-jmeno { color: var(--ruzova); font-size: clamp(34px, 9vw, 54px); line-height: 1;
             text-shadow: 0 0 16px rgba(255, 79, 216, .85); }
.tah-pocet { color: var(--tlumeny); font-size: 16px; margin-top: 6px; }
#kompas { display: block; width: 110px; height: 110px; margin: 14px auto 0; }
.napoveda { text-align: center; color: var(--tlumeny); font-size: 13px; margin: 4px 0 2px; }

#diagram { display: block; width: min(100%, 560px); height: auto; aspect-ratio: 1; margin: 0 auto; }

.ovladani, .stav, .vyklad { font-family: system-ui, sans-serif; }
.tahy { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 480px; margin: 8px auto 0; }
button {
    background: var(--panel); color: var(--text); border: 1px solid rgba(125, 249, 255, .35); border-radius: 8px;
    padding: 10px 12px; font-size: 15px; cursor: pointer; font-family: inherit;
    transition: box-shadow .15s, border-color .15s;
}
button:hover { border-color: var(--neon); box-shadow: 0 0 12px rgba(125, 249, 255, .55); }
button:disabled { opacity: .45; cursor: default; box-shadow: none; }
.tahy button { font-family: Georgia, serif; font-size: 20px; padding: 10px 0; }
.tahy-stred { grid-template-columns: repeat(3, 1fr); max-width: 240px; margin-top: 6px; }
.tahy-stred button { border-bottom: 3px solid rgba(125, 249, 255, .5); }
.volby { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 8px 0; color: #b9cdf5; font-size: 15px; }
.volby label { cursor: pointer; }
.volby input, .rychlost input { accent-color: var(--neon); }
.radek { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
.sekvence input {
    flex: 1 1 200px; min-width: 0; max-width: 320px; background: rgba(3, 11, 40, .85); color: var(--text);
    border: 1px solid rgba(125, 249, 255, .3); border-radius: 8px; padding: 10px; font-size: 16px;
    font-family: Georgia, serif;
}
.sekvence input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 10px rgba(125, 249, 255, .45); }
.hlaska { text-align: center; min-height: 1.3em; color: #ffd166; font-size: 14px; }
.rychlost { align-items: center; color: var(--tlumeny); font-size: 14px; }

.stav { max-width: 480px; margin: 18px auto; border-top: 1px solid rgba(125, 249, 255, .2); padding-top: 10px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; color: var(--tlumeny); }
.kv b { color: var(--text); font-weight: 600; text-align: right; word-break: break-word; }

.vyklad { max-width: 620px; margin: 24px auto 0; line-height: 1.55; font-size: 15px; color: #c6d8f7; }
.vyklad h2 { font-family: Georgia, serif; font-weight: normal; color: var(--ruzova); font-size: 22px;
             text-shadow: 0 0 12px rgba(255, 79, 216, .6); }
.vyklad code { background: rgba(3, 11, 40, .9); border: 1px solid rgba(125, 249, 255, .2); padding: 1px 5px; border-radius: 4px; }
.pozn { color: #7f97c4; font-size: 13px; }

@media (prefers-reduced-motion: reduce) { button { transition: none; } }

/* Telefon: jmeno tahu v radku vedle kostky, ne pres ni. Musi byt az za
   zakladnimi pravidly pro .tah a #kostka, jinak je ta pozdejsi prebiji. */
@media (max-width: 860px) {
    .horni { align-items: center; gap: 6px; }
    .tah { position: static; min-width: 56px; }
    #kompas { width: 76px; height: 76px; margin-top: 10px; }
    #kostka { width: min(66vw, 360px); }
}