/* ==========================================================================
   DENÍK BOJŮ — js/denik.js (v=533900)
   Podle Thelyon_Denik_Boju_Reference.png: karmínová hlavička, dvě řady
   filtrů (druh / výsledek) s hledáním a rozsahem data, vodorovné karty
   soubojů (výsledek | portrét | soupeř + statistiky | odměny | datum | detail).
   Rozvržení karty podle šířky .dn (@container dn):
     siroka   ≥ 1000 px  vše v jednom pásu,
     stredni  640–999    odměny pod soupeřem, datum vpravo nahoře,
     mobil    < 640      výsledek jako proužek, pod ním soupeř, statistiky,
                         odměny a dole datum + tlačítko detailu.
   Detail souboje je okno připojené k <body> (container-type .dn by fixed
   uvěznil) — proto má vlastní @media a vlastní proměnné --bj-* pro log
   z css/boj.css. Staré skiny `.parchment button…` mají váhu 0,4,1 → tlačítka
   a pole jistí předpona :is(#centerContent,body).
   ========================================================================== */

/* ikony (maska jako v thelyon-ui.css) */
.ik-lebka{-webkit-mask-image:url(../img/ui/ikony/lebka.svg);mask-image:url(../img/ui/ikony/lebka.svg)}
.ik-kalendar{-webkit-mask-image:url(../img/ui/ikony/kalendar.svg);mask-image:url(../img/ui/ikony/kalendar.svg)}
.ik-vavrin{-webkit-mask-image:url(../img/ui/ikony/vavrin.svg);mask-image:url(../img/ui/ikony/vavrin.svg)}
.ik-drahokam{-webkit-mask-image:url(../img/ui/ikony/drahokam.svg);mask-image:url(../img/ui/ikony/drahokam.svg)}

/* ---------------------------------------------------------------- kořen -- */
.dn{
  container:dn / inline-size;
  position:relative;
  padding:12px;
  color:var(--tl-text);font:400 15px/1.35 var(--tl-pismo-text);
  background:
    radial-gradient(ellipse at 50% 0%,rgba(122,18,18,.16),transparent 55%),
    linear-gradient(180deg,#0f0b08 0%,#0a0807 60%,#08070a 100%);
  border:1px solid rgba(196,150,72,.5);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),0 6px 18px rgba(0,0,0,.55);
}
.dn [hidden],.dn-modal [hidden]{display:none!important}
/* odstavce: hra barví `#centerContent p` (1,0,1) → vlastní barvy níž nesou
   stejnou předponu, jinak by je přebil tenhle reset i hra */
:is(#centerContent,body) :is(.dn,.dn-modal) p{margin:0;color:inherit}
:is(#centerContent,body) :is(.dn,.dn-modal) :is(h2,h3,h4){margin:0;padding:0;border:0;text-align:left;text-shadow:none;background:none}
:is(#centerContent,body) :is(.dn,.dn-modal) :is(h2,h3,h4)::before,
:is(#centerContent,body) :is(.dn,.dn-modal) :is(h2,h3,h4)::after{content:none}
.dn-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* sekundární tlačítka na černohnědé (navy by tu působilo cize) */
:is(#centerContent,body) :is(.dn,.dn-modal) .tl-btn-navy{
  color:#f3dc9c;background:linear-gradient(180deg,#2a2016,#130e09);
  border:1px solid rgba(196,150,72,.6);box-shadow:inset 0 1px 0 rgba(255,225,160,.1),0 2px 6px rgba(0,0,0,.5);
}
:is(#centerContent,body) :is(.dn,.dn-modal) .tl-btn-navy:hover:not(:disabled){border-color:var(--tl-zlato-300);filter:brightness(1.18)}
:is(#centerContent,body) :is(.dn,.dn-modal) .tl-btn{min-height:40px;font-size:16px}

/* --- hlavička: karmínová deska + panorama, pod ní meandr --- */
.dn-hlava{
  position:relative;display:flex;align-items:center;
  min-height:clamp(56px,7cqw,88px);margin-bottom:12px;padding:0 clamp(14px,2.2cqw,28px) 6px;
  background:
    linear-gradient(90deg,#5c0d0d 0%,#4d0b0b 24%,rgba(66,9,9,.82) 36%,rgba(58,7,7,.28) 54%,rgba(0,0,0,0) 72%),
    url(../img/denik/hlavicka_v1.jpg) right center/auto 100% no-repeat,
    #3a0707;
  border:1px solid rgba(214,168,71,.6);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),inset 0 -16px 26px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.5);
  overflow:hidden;
}
.dn-hlava::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:7px;pointer-events:none;
  background:var(--meander) repeat-x center/14px 7px;opacity:.5;
}
:is(#centerContent,body) .dn .dn-titul{
  position:relative;display:flex;align-items:center;gap:.45em;
  font:600 clamp(24px,3.1cqw,38px)/1 var(--tl-pismo-nadpis);letter-spacing:.08em;text-transform:uppercase;
  color:#f7dc8e;
}
.dn-titul .tl-ik{width:1.3em;height:1.3em;filter:drop-shadow(0 2px 2px rgba(0,0,0,.9))}
.dn-titul-text{
  background:linear-gradient(180deg,#fff8dc 0%,#f7dc8e 38%,#e0ac4c 70%,#b27a22 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.95));   /* stín textu by gradient přebarvil */
}

/* -------------------------------------------------------------- filtry -- */
.dn-filtry{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.dn-rada{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.dn-rada-2{align-items:center;gap:10px}
.dn-vysledky{display:flex;flex-wrap:wrap;gap:8px}
:is(#centerContent,body) .dn .dn-filtr{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-width:clamp(118px,12.6cqw,168px);min-height:50px;margin:0;padding:4px 16px;box-sizing:border-box;
  background:linear-gradient(180deg,#1f1811,#0f0c09);
  border:1px solid rgba(160,125,65,.55);border-radius:2px;
  color:#e6dcc6;font:600 18px/1.1 var(--tl-pismo-text);letter-spacing:.01em;text-transform:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,225,160,.06),0 2px 5px rgba(0,0,0,.45);
  transform:none;cursor:pointer;transition:filter .15s ease,border-color .15s ease;
}
:is(#centerContent,body) .dn .dn-filtr-maly{min-width:clamp(104px,10.4cqw,152px);min-height:46px;font-size:17px}
:is(#centerContent,body) .dn .dn-filtr:hover{border-color:rgba(230,185,95,.9);filter:brightness(1.14)}
:is(#centerContent,body) .dn .dn-filtr.active{
  color:#fff1d6;
  background:linear-gradient(180deg,#8e1f1a 0%,#5e0f0d 100%);
  border-color:#e2b554;
  box-shadow:0 0 12px rgba(226,90,60,.28),inset 0 1px 0 rgba(255,200,160,.25);
}
:is(#centerContent,body) .dn .dn-filtr:focus-visible{outline:2px solid var(--tl-zlato-300);outline-offset:2px}
.dn-filtr .tl-ik{width:1.35em;height:1.35em;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.dn-filtr .ik-lebka{background:linear-gradient(180deg,#fff3e8,#e9c9b5 45%,#a98b77)}

/* hledání + datum */
.dn-hledani{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-left:auto;min-width:0}
.dn-hledat{position:relative;width:clamp(220px,24cqw,292px)}
:is(#centerContent,body) .dn .dn-hledat input{
  display:block;width:100%;box-sizing:border-box;height:46px;margin:0;padding:0 46px 0 14px;
  background:rgba(0,0,0,.5);border:1px solid rgba(196,150,72,.45);border-radius:2px;
  color:#f3e7cc;font:400 17px/1 var(--tl-pismo-text);box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
}
:is(#centerContent,body) .dn .dn-hledat input::placeholder{color:#9c907a;opacity:1}
:is(#centerContent,body) .dn .dn-hledat input:focus{outline:none;border-color:#e2b554;box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 2px rgba(226,181,84,.25)}
.dn-hledat input::-webkit-search-cancel-button{filter:sepia(1) saturate(2.5) brightness(.9);cursor:pointer}
:is(#centerContent,body) .dn .dn-hledat-btn{
  position:absolute;top:0;right:0;bottom:0;width:46px;margin:0;padding:0;
  display:grid;place-items:center;background:none;border:0;box-shadow:none;cursor:pointer;
}
.dn-hledat-btn .tl-ik{width:24px;height:24px}
:is(#centerContent,body) .dn .dn-hledat-btn:hover .tl-ik{filter:brightness(1.25)}
:is(#centerContent,body) .dn .dn-hledat-btn:focus-visible{outline:2px solid var(--tl-zlato-300);outline-offset:-4px}

.dn-datum{position:relative}
:is(#centerContent,body) .dn .dn-datum-btn{
  display:flex;align-items:center;gap:10px;
  min-width:clamp(196px,19cqw,236px);height:46px;margin:0;padding:0 14px;box-sizing:border-box;
  background:linear-gradient(180deg,#1f1811,#0f0c09);
  border:1px solid rgba(160,125,65,.55);border-radius:2px;
  color:#e6dcc6;font:400 17px/1 var(--tl-pismo-text);text-transform:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,225,160,.06);transform:none;cursor:pointer;
}
:is(#centerContent,body) .dn .dn-datum-btn:hover{border-color:rgba(230,185,95,.9);filter:brightness(1.12)}
:is(#centerContent,body) .dn .dn-datum-btn.dn-aktivni{border-color:#e2b554;color:#fff1d6}
:is(#centerContent,body) .dn .dn-datum-btn:focus-visible{outline:2px solid var(--tl-zlato-300);outline-offset:2px}
.dn-datum-btn .tl-ik{width:22px;height:22px}
.dn-datum-text{flex:1 1 auto;text-align:left;overflow:hidden;text-overflow:ellipsis}
.dn-dolu{
  flex:0 0 auto;width:9px;height:9px;margin:-4px 2px 0 6px;
  border-right:2px solid #e2c27a;border-bottom:2px solid #e2c27a;transform:rotate(45deg);
  transition:transform .15s ease;
}
.dn-datum-btn[aria-expanded="true"] .dn-dolu{transform:rotate(225deg);margin-top:4px}

.dn-datum-panel{
  position:absolute;right:0;top:calc(100% + 6px);z-index:30;
  width:300px;box-sizing:border-box;padding:12px;
  display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(180deg,#221a12,#100c09);
  border:1px solid rgba(214,168,71,.65);border-radius:3px;
  box-shadow:0 12px 26px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,225,160,.08);
  color-scheme:dark;
}
.dn-predvolby{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
:is(#centerContent,body) .dn .dn-pv{
  min-height:34px;margin:0;padding:0 4px;
  background:linear-gradient(180deg,#2a2016,#130e09);
  border:1px solid rgba(160,125,65,.5);border-radius:2px;
  color:#e6dcc6;font:600 14px/1 var(--tl-pismo-text);text-transform:none;white-space:nowrap;
  box-shadow:none;transform:none;cursor:pointer;
}
:is(#centerContent,body) .dn .dn-pv:hover{border-color:rgba(230,185,95,.9);filter:brightness(1.15)}
:is(#centerContent,body) .dn .dn-pv.active{color:#fff1d6;background:linear-gradient(180deg,#8e1f1a,#5e0f0d);border-color:#e2b554}
:is(#centerContent,body) .dn .dn-pv:focus-visible{outline:2px solid var(--tl-zlato-300);outline-offset:1px}
.dn-datum-pole{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px;color:#b8ab8f;font-size:15px}
:is(#centerContent,body) .dn .dn-datum-pole input{
  width:100%;box-sizing:border-box;height:38px;margin:0;padding:0 8px;
  background:rgba(0,0,0,.5);border:1px solid rgba(196,150,72,.45);border-radius:2px;
  color:#f3e7cc;font:400 16px/1 var(--tl-pismo-text);color-scheme:dark;
}
:is(#centerContent,body) .dn .dn-datum-pole input:focus{outline:none;border-color:#e2b554;box-shadow:0 0 0 2px rgba(226,181,84,.25)}

/* -------------------------------------------------------------- seznam -- */
.dn-seznam{min-height:120px;transition:opacity .15s ease}
.dn-seznam.dn-nacita{opacity:.55;pointer-events:none}
.dn-karty{display:flex;flex-direction:column;gap:8px}

/* karta: mřížka podle šířky Deníku */
.dn-karta{
  position:relative;display:grid;align-items:stretch;
  /* odměny a datum mají pevnou šířku → sloupce všech karet lícují pod sebou */
  grid-template-columns:clamp(98px,10cqw,150px) clamp(86px,8.4cqw,112px) minmax(0,1fr) clamp(320px,35cqw,430px) clamp(138px,13cqw,172px) clamp(58px,5.4cqw,76px);
  grid-template-rows:auto auto;
  grid-template-areas:
    "stav portret info  odmeny kdy sipka"
    "stav portret staty odmeny kdy sipka";
  min-height:100px;
  background:
    linear-gradient(90deg,rgba(255,225,160,.035),transparent 40%),
    linear-gradient(180deg,#1b140e 0%,#120d09 55%,#0d0a07 100%);
  border:1px solid rgba(160,125,65,.42);border-radius:4px;
  box-shadow:inset 0 1px 0 rgba(255,225,160,.06),0 3px 8px rgba(0,0,0,.45);
  overflow:hidden;cursor:pointer;
  transition:border-color .15s ease,filter .15s ease,box-shadow .15s ease;
}
.dn-karta:hover{border-color:rgba(226,181,84,.85);filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,225,160,.08),0 3px 12px rgba(0,0,0,.55),0 0 0 1px rgba(226,181,84,.25)}
.dn-karta:has(.dn-sipka:focus-visible){border-color:#e2b554}

/* výsledek */
.dn-stav{
  grid-area:stav;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:8px 6px;box-sizing:border-box;
  font:600 clamp(15px,1.55cqw,19px)/1 var(--tl-pismo-nadpis);letter-spacing:.06em;text-transform:uppercase;
  border-left:4px solid;
}
.dn-stav b{font-weight:600;text-shadow:0 2px 3px rgba(0,0,0,.85)}
.dn-stav .tl-ik{width:clamp(30px,3.2cqw,42px);height:clamp(30px,3.2cqw,42px);filter:drop-shadow(0 2px 2px rgba(0,0,0,.85))}
.dn-vyhra .dn-stav{
  color:#f6ecd0;border-left-color:#5fc456;
  background:radial-gradient(ellipse at 50% 35%,rgba(140,220,120,.18),transparent 70%),linear-gradient(180deg,#22621f 0%,#174a15 55%,#0f3a0d 100%);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.6),inset 0 0 18px rgba(0,0,0,.35);
}
.dn-prohra .dn-stav{
  color:#f8d6cc;border-left-color:#d23a2c;
  background:radial-gradient(ellipse at 50% 35%,rgba(255,120,100,.16),transparent 70%),linear-gradient(180deg,#741812 0%,#561009 55%,#3f0a07 100%);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.6),inset 0 0 18px rgba(0,0,0,.35);
}
.dn-prohra .dn-stav .tl-ik{background:linear-gradient(180deg,#ffe4dc 0%,#f2a596 55%,#c6604f 100%)}

/* portrét soupeře */
.dn-portret{grid-area:portret;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 40%,#2b2118,#0b0806);box-shadow:inset -1px 0 0 rgba(0,0,0,.6)}
.dn-portret-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:grid;place-items:center;font-size:40px}
.dn-portret::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset -14px 0 18px -10px rgba(0,0,0,.7)}

/* soupeř + statistiky */
.dn-info{grid-area:info;align-self:end;min-width:0;padding:10px 12px 2px 16px}
:is(#centerContent,body) .dn .dn-jmeno{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-width:0;font:600 clamp(18px,1.9cqw,22px)/1.15 var(--tl-pismo-text);color:#f3e6c4}
.dn-jmeno-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 3px rgba(0,0,0,.85)}
.dn-typ{
  flex:0 0 auto;padding:2px 10px 3px;border-radius:2px;
  font:500 15px/1.15 var(--tl-pismo-text);letter-spacing:.02em;
  color:#ead293;background:linear-gradient(180deg,rgba(120,98,30,.55),rgba(74,58,16,.55));border:1px solid rgba(201,162,74,.28);
}
.dn-prohra .dn-typ{color:#ffc3b6;background:linear-gradient(180deg,rgba(140,26,20,.7),rgba(96,14,10,.7));border-color:rgba(230,110,90,.3)}
/* oddělovač kreslí každý údaj u své levé hrany; první údaj na řádku ho má
   o 1 px za okrajem odstavce (overflow:hidden) → po zalomení nevisí na konci */
:is(#centerContent,body) :is(.dn,.dn-modal) .dn-meta{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0;margin:3px 0 0 -10px;overflow:hidden;color:#b5a88c;font-size:16px}
:is(#centerContent,body) :is(.dn,.dn-modal) .dn-prohra .dn-meta{color:#c9a58f}
.dn-meta > span{margin-left:-1px;padding:0 11px;white-space:nowrap;background:linear-gradient(rgba(201,162,74,.38),rgba(201,162,74,.38)) left center/1px 14px no-repeat}
.dn-meta > span:last-child{padding-right:0}
:is(#centerContent,body) .dn .dn-staty{grid-area:staty;display:flex;align-items:center;flex-wrap:wrap;gap:4px clamp(14px,2.2cqw,30px);margin:0;padding:4px 12px 10px 16px;list-style:none;min-width:0}
:is(#centerContent,body) .dn .dn-stat{display:inline-flex;align-items:center;gap:7px;margin:0;padding:0;list-style:none;color:#e8dcc0;font-size:17px;white-space:nowrap}
.dn-stat::before{content:none}
.dn-stat b{font-weight:500;font-variant-numeric:tabular-nums}
.dn-stat .tl-ik{width:18px;height:18px}

/* odměny */
.dn-odmeny{
  grid-area:odmeny;display:grid;align-content:center;align-items:center;
  grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h sloty" "hodnoty sloty";
  column-gap:clamp(12px,1.6cqw,22px);row-gap:6px;min-width:0;
  margin:10px 0;padding:0 clamp(12px,1.6cqw,20px);
  border-left:1px solid rgba(201,162,74,.22);border-right:1px solid rgba(201,162,74,.22);
}
.dn-odmeny-h{grid-area:h;color:#d9cba6;font-size:16px;white-space:nowrap}
.dn-odmeny-hodnoty{grid-area:hodnoty;display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;min-width:0}
.dn-hodnota{display:inline-flex;align-items:center;gap:6px;color:#f1e4c2;font-size:17px;white-space:nowrap}
.dn-hodnota b{font-weight:500;font-variant-numeric:tabular-nums}
.dn-hodnota .tl-ik{width:24px;height:24px}
.dn-hodnota.dn-plus b{color:#8fe089}
.dn-hodnota.dn-minus b{color:#ff8f7d}
.dn-hodnota.dn-rekord b{color:#ffd76a}
.dn-ik-safir{background:linear-gradient(180deg,#d6ecff 0%,#6fb2ff 45%,#2a5fc4 100%)}
/* :is() zvedá váhu nad `.dn-hodnota b` / `.dn-dlazdice b`, jinak zlaté písmo na zlaté minci */
:is(.dn,.dn-modal) .dn-xp-znak{
  display:inline-grid;place-items:center;flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff3c4 0%,#f1cd72 38%,#b47d22 100%);
  box-shadow:0 0 0 1px #5e3f0b,0 1px 3px rgba(0,0,0,.7);
  color:#2a1805;font:800 11px/1 var(--tl-pismo-nadpis);letter-spacing:-.02em;
}
.dn-znak{display:inline-grid;place-items:center;width:24px;height:24px;font-size:19px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.dn-odmeny-nic{color:#a99e84;font-style:italic;font-size:15px;white-space:nowrap}
.dn-sloty{grid-area:sloty;display:flex;gap:8px}
.dn-slot{
  position:relative;flex:0 0 auto;display:grid;place-items:center;
  width:clamp(44px,4.2cqw,52px);height:clamp(44px,4.2cqw,52px);box-sizing:border-box;border-radius:3px;
  background:radial-gradient(circle at 50% 40%,#2c2219,#0d0a07);
  border:1px solid rgba(160,125,65,.55);
  box-shadow:inset 0 0 8px rgba(0,0,0,.7);
}
.dn-slot[data-tip]{cursor:help}
.dn-slot-img{width:84%;height:84%;object-fit:contain;display:grid;place-items:center;font-size:24px;line-height:1}
.dn-slot em,.bv-predmet-ram em{z-index:2}
.dn-slot em{
  position:absolute;right:3px;bottom:1px;font:700 12px/1 var(--tl-pismo-text);font-style:normal;
  color:#fff;text-shadow:0 1px 2px #000,0 0 2px #000;
}
.dn-slot-prazdny{border-color:rgba(120,95,55,.35);background:radial-gradient(circle at 50% 45%,#1b150f,#0b0907)}
.dn-slot-prazdny::before{
  content:'';width:58%;height:58%;opacity:.16;
  background:linear-gradient(180deg,#e6c98a,#8a6424);
  -webkit-mask:url(../img/ui/ikony/krit.svg) center/contain no-repeat;mask:url(../img/ui/ikony/krit.svg) center/contain no-repeat;
}
.dn-slot-vice{color:#f3dc9c;font:700 17px/1 var(--tl-pismo-text);border-color:rgba(214,168,71,.7)}

/* kdy + šipka */
.dn-kdy{grid-area:kdy;display:flex;align-items:center;gap:10px;min-width:0;padding:0 8px 0 clamp(12px,1.6cqw,20px);color:#e6dcc4;font-size:16px}
.dn-kdy .tl-ik{width:22px;height:22px}
.dn-kdy time{display:flex;flex-direction:column;gap:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dn-kdy time span + span{color:#b8ab8f}
:is(#centerContent,body) .dn .dn-sipka{
  grid-area:sipka;align-self:center;justify-self:center;
  display:grid;place-items:center;width:clamp(44px,4cqw,52px);height:clamp(44px,4cqw,52px);margin:0;padding:0;box-sizing:border-box;
  background:linear-gradient(180deg,#221a12,#0f0b08);
  border:1px solid rgba(214,168,71,.8);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,225,160,.12),0 2px 6px rgba(0,0,0,.55);
  transform:none;cursor:pointer;
}
.dn-sipka i{width:12px;height:12px;margin-left:-5px;border-right:3px solid #f1cd72;border-top:3px solid #f1cd72;transform:rotate(45deg);filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
:is(#centerContent,body) .dn .dn-sipka:hover{border-color:#f7dc8e;filter:brightness(1.2)}
:is(#centerContent,body) .dn .dn-sipka:focus-visible{outline:2px solid var(--tl-zlato-300);outline-offset:2px}

/* střední šířka: odměny pod soupeřem, datum vpravo nahoře */
@container dn (max-width: 999px){
  .dn-karta{
    grid-template-columns:clamp(84px,11cqw,110px) clamp(80px,10cqw,100px) minmax(0,1fr) auto clamp(52px,7cqw,64px);
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "stav portret info   kdy    sipka"
      "stav portret staty  staty  sipka"
      "stav portret odmeny odmeny sipka";
  }
  .dn-info{padding-top:10px}
  .dn-kdy{align-self:end;padding:10px 6px 0 8px;font-size:15px}
  .dn-odmeny{
    grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"h hodnoty sloty";
    margin:0 12px 10px 16px;padding:8px 0 0;border:0;border-top:1px solid rgba(201,162,74,.2);
  }
}

/* mobil: výsledek jako proužek nahoře, datum + detail dole */
@container dn (max-width: 639px){
  .dn-hlava{background:
    linear-gradient(90deg,#5c0d0d 0%,#4d0b0b 42%,rgba(66,9,9,.86) 62%,rgba(58,7,7,.45) 84%,rgba(0,0,0,.12) 100%),
    url(../img/denik/hlavicka_v1.jpg) right center/auto 100% no-repeat,
    #3a0707}
  .dn-filtry{gap:8px}
  .dn-rada{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px}
  .dn-rada-2{display:flex;flex-direction:column;align-items:stretch}
  .dn-vysledky{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  :is(#centerContent,body) .dn .dn-filtr{min-width:0;padding:4px 8px;font-size:16px;min-height:44px}
  :is(#centerContent,body) .dn .dn-filtr-maly{font-size:15px;min-height:42px}
  .dn-hledani{margin-left:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .dn-hledat{width:auto}
  :is(#centerContent,body) .dn .dn-datum-btn{width:100%;min-width:0}
  .dn-datum-panel{left:0;right:0;width:auto}

  .dn-karta{
    grid-template-columns:clamp(68px,20cqw,88px) minmax(0,1fr) auto;
    grid-template-rows:auto auto auto auto auto;
    grid-template-areas:
      "stav    stav   stav"
      "portret info   info"
      "portret staty  staty"
      "odmeny  odmeny odmeny"
      "kdy     kdy    sipka";
    min-height:0;
  }
  .dn-stav{flex-direction:row;justify-content:flex-start;gap:10px;padding:6px 12px;font-size:15px}
  .dn-stav .tl-ik{width:24px;height:24px}
  .dn-portret{min-height:84px;margin:10px 0 0 10px;border:1px solid rgba(160,125,65,.45);border-radius:3px}
  .dn-info{align-self:end;padding:10px 10px 0 12px}
  :is(#centerContent,body) .dn .dn-staty{padding:4px 10px 6px 12px;gap:4px 16px}
  :is(#centerContent,body) .dn .dn-stat{font-size:16px}
  :is(#centerContent,body) .dn .dn-meta{font-size:15px}
  .dn-odmeny{
    grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h sloty" "hodnoty sloty";
    margin:10px 10px 0;padding:8px 0 0;border:0;border-top:1px solid rgba(201,162,74,.2);
  }
  .dn-kdy{padding:10px 10px 10px 12px;align-self:center}
  .dn-kdy time{flex-direction:row;gap:8px}
  :is(#centerContent,body) .dn .dn-sipka{margin:8px 10px 10px 0}
}

/* stavy seznamu */
.dn-kostra{display:flex;flex-direction:column;gap:8px}
.dn-kostra-karta{
  display:grid;grid-template-columns:clamp(98px,10cqw,150px) clamp(86px,8.4cqw,112px) minmax(0,1fr);gap:0;
  height:100px;border:1px solid rgba(160,125,65,.25);border-radius:4px;overflow:hidden;
  background:linear-gradient(180deg,#17110c,#0d0a07);
}
.dn-kostra-karta i{display:block;background:linear-gradient(90deg,rgba(255,225,160,.03) 0%,rgba(255,225,160,.09) 50%,rgba(255,225,160,.03) 100%);background-size:200% 100%;animation:dn-lesk 1.3s ease-in-out infinite}
.dn-kostra-karta i:nth-child(1){background-color:rgba(60,40,20,.35)}
.dn-kostra-karta i:nth-child(3){margin:22px 30% 22px 18px;border-radius:3px}
@keyframes dn-lesk{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion: reduce){.dn-kostra-karta i{animation:none}}

.dn-prazdno{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:clamp(34px,6cqw,64px) 16px;color:#b8ab8f;font-size:17px;
  border:1px solid rgba(160,125,65,.3);border-radius:4px;
  background:radial-gradient(ellipse at 50% 0%,rgba(150,105,45,.1),transparent 65%),linear-gradient(180deg,#15100b,#0c0907);
}
.dn-prazdno .tl-ik{width:46px;height:46px;opacity:.9}
.dn-prazdno .dn-prazdno-znak{width:64px;height:64px}
:is(#centerContent,body) :is(.dn,.dn-modal) .dn-prazdno-h{color:#f3e6c4;font:600 clamp(18px,2cqw,22px)/1.3 var(--tl-pismo-text)}
.dn-prazdno .tl-btn{margin-top:6px}
.dn-chyba .tl-ik{background:linear-gradient(180deg,#ffe4dc,#f2a596 55%,#c6604f)}
:is(#centerContent,body) :is(.dn,.dn-modal) .dn-chyba-radek{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:10px 0 0;color:#ffb4a4}
.dn-vice{display:flex;justify-content:center;padding-top:14px}
:is(#centerContent,body) .dn .dn-vice-btn{min-width:min(300px,100%);min-height:46px;font-size:17px}
.dn-vice-btn small{font-size:.82em;color:#b8ab8f;margin-left:.3em}

/* ========================================================= detail (okno) == */
.dn-modal{
  --bj-zlato:#e2bf6a;--bj-zlato-sv:#f7dc8e;--bj-bronz:#8a6424;--bj-panel:rgba(9,12,22,.84);
  --bj-panel-okraj:rgba(201,162,74,.55);--bj-text:#e9dfc6;--bj-tlumene:#a99e84;--bj-hrac:#5fd068;
  --bj-souper:#ff6a5c;--bj-dmg:#ff7a66;--bj-krit:#ffc93c;--bj-minul:#9a948a;--bj-blok:#9fc0e0;
  --bj-uhyb:#4fd8e8;--bj-xp:#6fd3ff;--bj-leceni:#7de08c;
  position:fixed;inset:0;z-index:8500;
  overflow-y:auto;overscroll-behavior:contain;
  background:rgba(5,3,2,.8);
  color:var(--bj-text);font:400 15px/1.4 var(--tl-pismo-text);
  scrollbar-width:thin;scrollbar-color:#8a6424 transparent;
}
.dn-modal-vnitrek{
  min-height:100%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vh,40px) clamp(8px,2vw,24px);
}
.dn-okno{
  position:relative;width:min(1020px,100%);box-sizing:border-box;padding-bottom:16px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(150,105,45,.12),transparent 60%),
    linear-gradient(180deg,#1a130d 0%,#100c08 60%,#0c0907 100%);
  border:1px solid rgba(214,168,71,.65);border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.8),0 18px 50px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,225,160,.08);
}
:is(#centerContent,body) .dn-modal .dn-zavrit{
  position:absolute;top:10px;right:10px;z-index:3;
  display:grid;place-items:center;width:42px;height:42px;margin:0;padding:0;
  background:linear-gradient(180deg,#2a2016,#130e09);
  border:1px solid rgba(214,168,71,.75);border-radius:3px;
  color:#f3dc9c;font:400 20px/1 var(--tl-pismo-text);text-shadow:0 1px 2px #000;
  box-shadow:0 2px 6px rgba(0,0,0,.6);cursor:pointer;transform:none;
}
:is(#centerContent,body) .dn-modal .dn-zavrit:hover{border-color:#f7dc8e;filter:brightness(1.2)}
:is(#centerContent,body) .dn-modal :is(.dn-zavrit,.tl-btn,.dn-log):focus-visible{outline:2px solid var(--tl-zlato-300);outline-offset:2px}

/* .dn-stav nese z karty grid-area:stav → hlavička okna musí mít vlastní oblasti */
.dn-okno-hlava{
  display:grid;grid-template-columns:clamp(96px,14vw,140px) minmax(0,1fr);grid-template-areas:"stav nazev";align-items:stretch;
  min-height:76px;border-bottom:1px solid rgba(201,162,74,.35);border-radius:4px 4px 0 0;overflow:hidden;
}
.dn-okno-hlava .dn-stav{font-size:17px}
.dn-okno-hlava .dn-stav .tl-ik{width:34px;height:34px}
.dn-okno-nazev{grid-area:nazev;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding:10px 64px 10px 18px;
  background:linear-gradient(90deg,rgba(92,13,13,.55),rgba(58,7,7,.15) 60%,transparent)}
:is(#centerContent,body) .dn-modal #dnOknoTitul{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font:600 clamp(20px,2.6vw,26px)/1.15 var(--tl-pismo-text);color:#f3e6c4}
:is(#centerContent,body) :is(.dn,.dn-modal) .dn-okno-nazev p{color:#b5a88c;font-size:16px}

.dn-okno-telo{display:flex;flex-direction:column;gap:14px;padding:14px 16px 0}
.dn-ucastnici{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
.dn-uc{display:flex;align-items:center;gap:12px;min-width:0;padding:10px;background:var(--bj-panel);border:1px solid rgba(201,162,74,.3);border-radius:5px}
.dn-uc-s{flex-direction:row-reverse;text-align:right}
.dn-uc-vitez{border-color:var(--bj-zlato);box-shadow:0 0 14px rgba(226,191,106,.18)}
.dn-uc-portret{position:relative;flex:0 0 auto;width:78px;height:78px;overflow:hidden;border:1px solid var(--bj-bronz);border-radius:5px;background:radial-gradient(circle at 50% 40%,#2b2118,#0b0806)}
.dn-uc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:grid;place-items:center;font-size:34px}
.dn-uc-info{flex:1 1 auto;min-width:0}
.dn-uc-jmeno{font:700 18px/1.2 var(--tl-pismo-nadpis);color:var(--bj-zlato-sv);overflow-wrap:anywhere}
.dn-uc-h .dn-uc-jmeno{color:var(--bj-hrac)}
.dn-uc-s .dn-uc-jmeno{color:var(--bj-souper)}
.dn-uc-role{font-size:14px;color:var(--bj-tlumene)}
.dn-hp{margin-top:6px}
.dn-hp-bar{position:relative;height:10px;background:rgba(0,0,0,.65);border:1px solid rgba(201,162,74,.35);border-radius:3px;overflow:hidden}
.dn-hp-bar i{position:absolute;top:0;bottom:0;left:0;width:0}
.dn-uc-s .dn-hp-bar i{left:auto;right:0}
.dn-hp-pred{background:rgba(255,240,210,.16)}
.dn-uc-h .dn-hp-po{background:linear-gradient(180deg,#7fe489,#2f8f3a)}
.dn-uc-s .dn-hp-po{background:linear-gradient(180deg,#ff8a7a,#a3271c)}
.dn-hp-buh .dn-hp-po{background:linear-gradient(90deg,#f7dc8e,#c8952f)}
.dn-hp-text{display:block;margin-top:3px;font-size:14.5px;color:var(--bj-text);font-variant-numeric:tabular-nums}
.dn-hp-text small{color:var(--bj-tlumene);font-size:12.5px}
.dn-vs{font:700 22px/1 var(--tl-pismo-nadpis);color:var(--bj-zlato);text-shadow:0 2px 3px #000}

:is(#centerContent,body) :is(.dn,.dn-modal) .dn-pozn{margin:0;text-align:center;color:var(--bj-zlato-sv);font-size:15px}
:is(#centerContent,body) :is(.dn,.dn-modal) .dn-pozn-mala{margin:8px 0 0;font-size:13.5px;color:var(--bj-tlumene)}
:is(#centerContent,body) :is(.dn,.dn-modal) .dn-nic{margin:0;color:var(--bj-tlumene);font-style:italic}
.dn-nema{color:var(--bj-tlumene);font-weight:400}

.dn-okno-mrizka{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.dn-panel{min-width:0;padding:12px 14px;background:var(--bj-panel);border:1px solid var(--bj-panel-okraj);border-radius:5px;box-shadow:inset 0 0 18px rgba(0,0,0,.45)}
:is(#centerContent,body) .dn-modal .dn-panel-h{
  margin:0 0 10px;font:700 14px/1.2 var(--tl-pismo-nadpis);letter-spacing:.16em;text-transform:uppercase;color:var(--bj-zlato);
}
.dn-st-tab tfoot tr + tr td{padding-top:3px;border-top:0}

.dn-dlazdice-rada{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.dn-dlazdice{
  flex:1 1 120px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;
  padding:8px 12px;background:rgba(16,19,31,.9);border:1px solid rgba(201,162,74,.3);border-radius:5px;
}
.dn-dlazdice > :first-child{grid-row:1 / 3}
.dn-dlazdice > span:not(:first-child){font-size:13px;color:var(--bj-tlumene);letter-spacing:.05em;text-transform:uppercase}
.dn-dlazdice b{font:700 20px/1.15 var(--tl-pismo-nadpis);color:var(--bj-zlato-sv);font-variant-numeric:tabular-nums}
.dn-dlazdice .tl-ik{width:28px;height:28px}
:is(.dn,.dn-modal) .dn-dlazdice .dn-xp-znak{width:30px;height:30px;font-size:12px}
.dn-dlazdice.dn-minus b{color:var(--bj-souper)}
.dn-dlazdice.dn-plus b{color:var(--bj-hrac)}
.dn-dlazdice.dn-rekord b{color:var(--bj-krit)}
.dn-predmet{cursor:help}

.dn-panel-log{padding-right:8px}
:is(#centerContent,body) .dn-modal .dn-log{max-height:min(52vh,520px);padding:0 8px 0 0;font-size:15.5px}
.dn-log::-webkit-scrollbar{width:8px}
.dn-log::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#a3741f,#5e3f0b);border-radius:4px;border:1px solid rgba(0,0,0,.6)}
.dn-log::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}

.dn-okno-stavova{display:flex;flex-direction:column;align-items:center;gap:12px;padding:56px 24px;text-align:center;font-size:17px;color:var(--bj-text)}
.dn-okno-tlacitka{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.dn-kolecko{width:34px;height:34px;border-radius:50%;border:3px solid rgba(226,191,106,.25);border-top-color:var(--bj-zlato);animation:dn-tocka .9s linear infinite}
@keyframes dn-tocka{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.dn-kolecko{animation:none}}

@media (max-width: 760px){
  .dn-ucastnici{grid-template-columns:minmax(0,1fr)}
  .dn-vs{justify-self:center;font-size:17px}
  .dn-uc-s{flex-direction:row;text-align:left}
  .dn-uc-s .dn-hp-bar i{left:0;right:auto}
  .dn-okno-mrizka{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 640px){
  .dn-modal-vnitrek{padding:0;align-items:stretch}
  .dn-okno{width:100%;min-height:100%;border-radius:0;border-left:0;border-right:0}
  .dn-okno-hlava{grid-template-columns:minmax(0,1fr);grid-template-areas:"stav" "nazev";border-radius:0}
  .dn-okno-hlava .dn-stav{flex-direction:row;justify-content:flex-start;gap:10px;padding:8px 64px 8px 14px;font-size:15px}
  .dn-okno-hlava .dn-stav .tl-ik{width:24px;height:24px}
  .dn-okno-nazev{padding:10px 14px}
  .dn-okno-telo{padding:12px 10px 0}
  .dn-uc-portret{width:62px;height:62px}
  :is(#centerContent,body) .dn-modal .dn-log{max-height:none}
}