/* DVA HRADY – vzhled: pergamen, heraldika, světlé středověké barvy */
:root{
  --parch:#f3e4c0;--parch2:#e6d0a0;--parch3:#d9bd85;--ink:#2e2418;--ink2:#6b5844;--brown:#7a5a32;
  --blue:#2f5d9e;--blue2:#d9e3f2;--red:#9e2b25;--red2:#f3d6cc;--gold:#c8962b;--gold2:#e6c35a;--ok:#4a7a3a;
  --display:'Grenze Gotisch','UnifrakturMaguntia',Georgia,serif;--caps:'Cinzel',Georgia,serif;--body:'Alegreya',Georgia,serif;--mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:#cfe0ea;color:var(--ink);font:17px/1.4 var(--body)}
button{font:inherit;color:inherit}
#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
.screen{display:none;position:relative;z-index:1;min-height:100vh}
.screen.on{display:flex}
.hint{color:var(--ink2);font-size:15px}

/* ---------- pergamen ---------- */
.parch{position:relative;border-radius:6px;border:3px solid var(--brown);
  background:radial-gradient(ellipse at 50% 35%,rgba(255,251,238,.95),rgba(255,251,238,0) 72%),
             radial-gradient(ellipse at 0 0,rgba(160,120,60,.22),transparent 40%),radial-gradient(ellipse at 100% 100%,rgba(160,120,60,.25),transparent 45%),
             linear-gradient(var(--parch),var(--parch2));
  box-shadow:0 14px 36px rgba(46,36,24,.32),inset 0 0 70px rgba(122,90,50,.28),inset 0 0 0 6px var(--parch),inset 0 0 0 8px var(--gold)}
.parch::before,.parch::after{content:'';position:absolute;width:34px;height:34px;pointer-events:none;background:var(--orn) no-repeat center/contain}
.parch::before{left:6px;top:6px}
.parch::after{right:6px;bottom:6px;transform:rotate(180deg)}
:root{--orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M4 40V12Q4 4 12 4h28' fill='none' stroke='%237a5a32' stroke-width='2.4'/%3E%3Cpath d='M10 34V15q0-5 5-5h19' fill='none' stroke='%23c8962b' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='%239e2b25' stroke='%237a5a32' stroke-width='1.4'/%3E%3Cpath d='M22 10q4-6 8 0q-4 3-8 0zM10 22q-6 4 0 8q3-4 0-8z' fill='%232f5d9e'/%3E%3C/svg%3E")}

/* ---------- tlačítka a pole ---------- */
.btn{font:700 15px/1 var(--caps);letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--brown);border-radius:6px;background:linear-gradient(#fbf1d9,#ecd9ae);padding:11px 16px;cursor:pointer;box-shadow:0 3px 0 var(--brown);white-space:nowrap;transition:transform .05s,filter .1s}
.btn:hover{filter:brightness(1.04)}.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--brown)}
.btn.war{background:linear-gradient(#bb4034,#8e2a22);color:#fbefd5;border-color:#5e1a15;box-shadow:inset 0 0 0 2px var(--gold2),0 3px 0 #5e1a15}
.btn.war:active{box-shadow:inset 0 0 0 2px var(--gold2),0 1px 0 #5e1a15}
.btn.royal{background:linear-gradient(#3d6db0,#264d87);color:#fbefd5;border-color:#173158;box-shadow:inset 0 0 0 2px var(--gold2),0 3px 0 #173158}
.btn.small{font-size:12.5px;padding:7px 10px}
.btn:disabled{opacity:.45;cursor:default;transform:none;filter:none}
.fld{display:block;margin:0 0 14px}
.fld>b{display:block;font:700 13px var(--caps);letter-spacing:.08em;text-transform:uppercase;color:var(--brown);margin-bottom:3px}
.fld input,.fld select,.fld textarea{width:100%;border:0;border-bottom:2px solid var(--brown);background:rgba(255,251,238,.65);padding:8px 10px;font:19px var(--body);color:var(--ink);border-radius:4px 4px 0 0;outline:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{background:#fffbee;border-bottom-color:var(--blue)}
.fld textarea{min-height:90px;font:14px/1.4 var(--mono)}
.two{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
.seg{display:inline-flex;border:2px solid var(--brown);border-radius:6px;overflow:hidden;flex-wrap:wrap}
.seg button{border:0;border-right:1.5px solid var(--brown);background:rgba(255,251,238,.7);padding:7px 10px;font:700 13px var(--caps);cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--blue);color:#fbefd5}
details summary{cursor:pointer;font:700 14px var(--caps);color:var(--brown);letter-spacing:.04em}

/* ---------- úvod ---------- */
#uvod{align-items:center;justify-content:center;padding:28px 16px}
.title-card{width:min(600px,100%);padding:30px 40px 26px;text-align:center}
.title-card h1{font:400 clamp(58px,9vw,92px)/.95 var(--display);margin:4px 0 0;letter-spacing:.01em;color:var(--ink);text-shadow:0 2px 0 rgba(255,251,238,.8)}
.initial{display:inline-block;color:#fbefd5;background:linear-gradient(135deg,#3d6db0,#24497f);border:3px solid var(--gold);border-radius:4px;padding:0 .1em .02em;margin-right:.04em;box-shadow:inset 0 0 0 2px #e9cf7a,0 3px 0 var(--brown);line-height:1.02}
.subtitle{font:700 15px var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:12px;justify-content:center;margin:10px 0 20px}
.subtitle::before,.subtitle::after{content:'';height:2px;flex:1;max-width:80px;background:linear-gradient(90deg,transparent,var(--gold))}
.subtitle::after{background:linear-gradient(-90deg,transparent,var(--gold))}
.title-card form{text-align:left}
.title-card .go{display:flex;justify-content:center;margin-top:16px}
.title-card .go .btn{font-size:17px;padding:14px 26px}
.ver{margin-top:12px;font-size:12.5px;color:var(--ink2)}
.rules3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 4px}
.rules3 div{background:rgba(255,251,238,.55);border:1.5px solid var(--parch3);border-radius:6px;padding:6px 6px 8px;font-size:13.5px;line-height:1.25;text-align:center}
.rules3 canvas{display:block;margin:0 auto}
.rules3 b{display:block;font:700 13px var(--caps)}
.rules3 i{display:block;color:var(--red);font-style:normal;font-weight:700}

/* ---------- síň ---------- */
#sin{flex-direction:column;align-items:center;padding:18px 16px 24px;gap:14px}
.hallbar{width:min(1180px,100%);display:flex;align-items:center;gap:14px;padding:12px 26px 12px 40px}
.hallbar h2{font:400 40px/1 var(--display);margin:0 auto 0 0}
.who{display:flex;align-items:center;gap:10px;font-size:16px}
.who b{font:700 18px var(--caps)}
.hall{width:min(1180px,100%);display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:start}
.hall .parch{padding:24px 30px 22px}
.hall h3{font:400 30px/1 var(--display);margin:0 0 4px}
.hall .sub{font-size:14.5px;color:var(--ink2);margin:0 0 12px}
.col2{display:grid;gap:14px}
.plist{display:grid;gap:6px;max-height:min(60vh,560px);overflow:auto;padding-right:4px}
.prow{display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:center;background:rgba(255,251,238,.6);border:1.5px solid var(--parch3);border-radius:6px;padding:6px 10px}
.prow.me{background:var(--blue2);border-color:#aac0e0}
.prow .nm{font-weight:700;font-size:17.5px;line-height:1.1}
.prow .meta{font-size:13.5px;color:var(--ink2)}
.st{font:700 11.5px var(--caps);letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:3px 9px;white-space:nowrap}
.st.s0{background:#dcebd2;color:#2f5a24}.st.s1{background:var(--red2);color:var(--red)}.st.s2{background:#efe2bd;color:#7a5a1a}.st.me{background:#fff;color:var(--blue)}
.crest{width:34px;height:38px}
.empty{padding:22px 10px;text-align:center;color:var(--ink2);font-style:italic}
.chal{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;background:#fff7e2;border:2px solid var(--gold);border-radius:6px;padding:9px 12px;margin-bottom:8px;animation:pop .35s}
.chal b{font-size:18px}
.chal .acts{display:flex;gap:6px}
@keyframes pop{0%{transform:scale(.94);opacity:0}100%{transform:none;opacity:1}}
.outgo{background:var(--blue2);border:1.5px solid #aac0e0;border-radius:6px;padding:9px 12px;display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:8px}
.offline{background:#fff2d6;border:1.5px dashed var(--brown);border-radius:6px;padding:12px 14px;font-size:15px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------- hra ---------- */
#hra{flex-direction:column;height:100vh;overflow:hidden;background:#d8c9a0}
.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:7px 14px;background:linear-gradient(var(--parch),var(--parch2));border-bottom:3px solid var(--brown)}
.side{display:flex;align-items:center;gap:10px;min-width:0}
.side.r{flex-direction:row-reverse;text-align:right}
.side .nm{font:700 17px var(--caps);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .sm{font-size:13px;color:var(--ink2)}
.hp{flex:1;max-width:340px;height:17px;border:2px solid var(--ink);border-radius:3px;background:#fffbee;overflow:hidden;position:relative}
.hp i{position:absolute;inset:0;background:linear-gradient(#4a7cc0,var(--blue));transform-origin:left;transition:transform .25s}
.side.r .hp i{background:linear-gradient(#c4513f,var(--red));transform-origin:right}
.hp span{position:absolute;inset:0;font:700 11px/13px var(--mono);text-align:center}
.goldh{display:flex;align-items:center;gap:6px;font:800 21px var(--mono);border:2px solid var(--brown);border-radius:6px;background:#fffbee;padding:1px 9px 1px 4px;flex:none}
.goldh canvas{width:24px;height:24px}
.clock{font:700 26px var(--mono);text-align:center;min-width:90px;line-height:1}
.clock small{display:block;font:700 10.5px var(--caps);letter-spacing:.08em;color:var(--ink2);margin-top:3px}
.fieldwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
#cv{display:block;max-width:100%;max-height:100%;aspect-ratio:1600/640}
.banner{position:absolute;left:50%;top:24%;transform:translate(-50%,-50%);font:400 64px var(--display);color:#fbefd5;text-shadow:0 3px 0 var(--ink),0 0 18px rgba(0,0,0,.35);pointer-events:none;opacity:0;transition:opacity .3s}
.banner.on{opacity:1}
.panel{display:grid;grid-template-columns:260px 1fr 340px;gap:14px;padding:10px 14px;background:linear-gradient(var(--parch),var(--parch2));border-top:3px solid var(--brown);height:244px}
.cards{display:grid;gap:6px;align-content:start}
.ucard{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;border:2px solid var(--brown);border-radius:6px;background:#fffbee;padding:4px 8px;cursor:pointer;height:70px;transition:transform .08s}
.ucard.on{background:var(--blue2);border-color:var(--blue);box-shadow:0 3px 0 var(--blue);transform:translateX(4px)}
.ucard canvas{width:44px;height:52px}
.ucard b{font:700 15px var(--caps);display:block;line-height:1.1}
.ucard .pv{font:12px var(--mono);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.ucard .lv{font:700 12px var(--mono);background:var(--ink);color:#fbefd5;border-radius:4px;padding:2px 6px}
.ucard.err{animation:shake .35s;background:var(--red2)}
.ucard.okf{background:#dcebd2}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.typer{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:6px}
.tlab{font-size:15px;color:var(--ink2)}
.tlab b{color:var(--ink)}
.ttext{font:700 31px/1.25 var(--mono);text-align:center;max-width:100%;padding:6px 14px;border:2px solid var(--brown);border-radius:6px;background:#fffbee;min-height:54px;white-space:pre-wrap;word-break:break-word}
.ttext.err{border-color:var(--red);background:var(--red2)}
.ttext .d{color:var(--ok)}
.ttext .c{background:var(--gold);color:#fff;border-radius:3px}
.ttext .sp{display:inline-block;min-width:.55em}
.tstat{font:600 12px var(--mono);color:var(--ink2);display:flex;gap:14px}
#kb{width:465px;height:93px}
.upg{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.ub{display:grid;grid-template-columns:30px 1fr;gap:6px;align-items:center;text-align:left;border:2px solid var(--brown);border-radius:6px;background:#fffbee;padding:3px 7px;cursor:pointer;box-shadow:0 2px 0 var(--brown);font-size:12px;line-height:1.15;height:52px}
.ub canvas{width:30px;height:30px}
.ub>span{min-width:0}
.ub b{font:700 13px var(--caps)}
.ub .c{font:700 12px var(--mono);color:#94680f;display:block}
.ub .sub{display:block;font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub:disabled{opacity:.42;cursor:default;box-shadow:none}
.ub:not(:disabled):hover{background:#fff4d6}
.corner{position:absolute;bottom:10px;border:2px solid var(--brown);background:rgba(251,241,217,.88);border-radius:6px;padding:3px 9px;cursor:pointer;font:700 12px var(--caps)}
#bQuit{left:10px}#bMute{right:10px}

/* ---------- výsledek ---------- */
#vysledek{align-items:center;justify-content:center;padding:24px 16px}
.res{width:min(720px,100%);padding:30px 36px}
.res h2{font:400 64px/1 var(--display);margin:0;text-align:center}
.res .sub{text-align:center;color:var(--ink2);margin:6px 0 16px}
table.st2{width:100%;border-collapse:collapse;font-size:16px}
table.st2 th,table.st2 td{padding:7px 10px;border-bottom:1.5px solid var(--parch3);text-align:center}
table.st2 th:first-child,table.st2 td:first-child{text-align:left}
table.st2 thead th{font:700 16px var(--caps)}
table.st2 td b{font:700 17px var(--mono)}
.resbtns{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fbefd5;padding:10px 16px;border-radius:6px;font-weight:700;opacity:0;transition:opacity .25s;pointer-events:none;z-index:20;max-width:90vw;text-align:center;border:2px solid var(--gold)}
#toast.on{opacity:1}
.modal{position:fixed;inset:0;background:rgba(46,36,24,.45);display:none;align-items:center;justify-content:center;z-index:15}
.modal.on{display:flex}
.modal .parch{max-width:420px;text-align:center;padding:26px 30px}
.modal h3{font:400 34px var(--display);margin:0 0 6px}

@media (max-width:1100px){.panel{grid-template-columns:220px 1fr 280px}.ttext{font-size:24px}.hall{grid-template-columns:1fr}}
@media (max-height:780px){.panel{height:226px}.ucard{height:64px}.ub{height:47px}#kb{width:400px;height:80px}.ttext{font-size:26px}.title-card{padding:22px 34px 20px}.rules3{display:none}}
@media (max-width:620px){.two{grid-template-columns:1fr}.title-card{padding:24px 22px}.rules3{grid-template-columns:1fr}}

/* ---------- turnaje ---------- */
.tcard{display:grid;grid-template-columns:1fr;gap:6px 10px;align-items:center;background:rgba(255,251,238,.6);border:1.5px solid var(--parch3);border-radius:6px;padding:8px 12px;margin-bottom:8px}
.tcard.mine{background:#fff7e2;border:2px solid var(--gold)}
.tcard b{font-size:17px}
.tcard .acts{display:flex;gap:6px;flex-wrap:wrap}
#turnaj{flex-direction:column;align-items:center;padding:16px;gap:12px}
.tbar{width:min(1400px,100%);display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 24px 14px 40px}
.tbar-t{margin-right:auto}
.tbar h2{font:400 38px/1 var(--display);margin:0}
.tstate{font:700 16px var(--caps);color:var(--red)}
.tmy{width:min(1400px,100%);padding:12px 24px 12px 40px;font-size:18px}
.tbody{width:min(1400px,100%);padding:16px 24px 20px;overflow:auto;max-height:calc(100vh - 230px)}
.tsec{font:400 26px/1 var(--display);margin:4px 0 10px}
.trow{display:flex;gap:18px;align-items:center;margin-bottom:16px;min-width:min-content}
.tcol{display:flex;flex-direction:column;gap:10px;justify-content:space-around;min-width:180px}
.tch{font:700 12px var(--caps);letter-spacing:.06em;text-transform:uppercase;color:var(--brown);text-align:center}
.mt{border:2px solid var(--parch3);border-radius:6px;background:rgba(255,251,238,.75);overflow:hidden}
.mt.cur{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,150,43,.25)}
.mt.mine{border-color:var(--blue)}
.mt .pr{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:15px;min-height:28px}
.mt .pr+.pr{border-top:1px solid var(--parch3)}
.mt .pr span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.mt .pr.w{font-weight:700;background:#e7f0dc}
.mt .pr.l{color:var(--ink2);text-decoration:line-through;text-decoration-color:rgba(107,88,68,.4)}
.mt .pr.me span{color:var(--blue);font-weight:700}
.mt .pr.q{color:#a8957a;font-style:italic}
.mt .pr i{font-style:normal;color:var(--gold)}
.tw{border:1.5px solid var(--brown);background:#fffbee;border-radius:4px;cursor:pointer;font-size:12px;padding:0 5px}
.tplayers{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.tpl{display:flex;align-items:center;gap:8px;background:rgba(255,251,238,.6);border:1.5px solid var(--parch3);border-radius:6px;padding:6px 10px}
.tpl span{flex:1}
#vyhlaseni{align-items:center;justify-content:center;padding:20px 16px}
#confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:5}
.award{width:min(860px,100%);padding:26px 34px;text-align:center}
.award h2{font:400 58px/1 var(--display);margin:0}
.award .sub{color:var(--ink2);margin:6px 0 10px}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:12px;margin:10px 0}
.pod{display:flex;flex-direction:column;align-items:center;gap:4px}
.pod canvas{width:68px;height:76px}
.pod.p1 canvas{width:92px;height:103px}
.pod b{font:700 18px var(--caps)}
.pod .step{width:100%;border:2px solid var(--brown);border-bottom:0;border-radius:6px 6px 0 0;font:400 40px/1 var(--display);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.pod.p1 .step{height:120px;background:linear-gradient(#f3d77c,#d9ab3c)}
.pod.p2 .step{height:86px;background:linear-gradient(#e9eef3,#b9c3cc)}
.pod.p3 .step{height:62px;background:linear-gradient(#f0c9a0,#c98c55)}
.best{font-size:18px;margin:6px 0 12px}
table.rank{max-height:260px}
table.rank tr.me td{background:var(--blue2)}
.tform{max-width:520px!important;text-align:left!important}
.tform h3{text-align:center}
.chk2{display:flex;gap:8px;align-items:center;font-size:16px;margin:4px 0 8px}
.chk2 input{width:18px;height:18px;accent-color:var(--blue)}
.st.s3{background:#e9dcf3;color:#5b3a7a}
.capswarn{background:var(--red);color:#fbefd5;border-radius:4px;padding:1px 8px;margin-right:6px}

/* výzva k obnovení stránky po nahrání nové verze */
#upbar{position:fixed;left:0;right:0;top:0;z-index:30;background:var(--red,#9e2b25);color:#fbefd5;font-weight:700;text-align:center;padding:10px 16px;border-bottom:3px solid var(--gold);display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
#upbar .btn{color:var(--ink)}