:root{color-scheme:dark;font:14px system-ui,sans-serif;color:#f2e8d6;background:#090c13;--gold:#c7a46b;--edge:#756043;--panel:#111921ee}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--edge);background:linear-gradient(#30333a,#171b22);border-radius:7px;padding:8px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #f3d190;outline-offset:2px}button:hover{border-color:#f4cf8f;filter:brightness(1.12)}button:disabled{cursor:default;opacity:.48}button[hidden],[hidden]{display:none!important}#stage{position:relative;width:100%;height:100dvh;overflow:hidden}#game{width:100%;height:100%;display:block;touch-action:none;outline:none;background:#090d14}.playerframe{position:absolute;top:18px;left:18px;display:flex;gap:12px;width:332px;padding:10px;background:var(--panel);border:1px solid var(--edge);border-radius:12px;box-shadow:0 6px 24px #0008}.face{width:76px;height:76px;flex-shrink:0;border:2px solid var(--gold);border-radius:50%;overflow:hidden;background:radial-gradient(#47505a,#111620);position:relative}.face img{position:absolute;width:168%;max-width:none;height:auto;left:-34%;top:-23%}.vitals{flex:1;min-width:0}.identity{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-bottom:5px}.identity strong{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.identity span{font-size:11px;color:#c8b99f}.meter{position:relative;background:#090c13;height:18px;border:1px solid #64554d;border-radius:4px;overflow:hidden;margin:4px 0}.meter i{display:block;width:100%;height:100%;transition:width .15s}.meter.health i{background:linear-gradient(90deg,#843b36,#c75a4c)}.meter.mana i{background:linear-gradient(90deg,#28538d,#54a6d3)}.meter span{position:absolute;inset:0;text-align:center;font-size:11px;font-weight:800;text-shadow:0 1px 3px #000}.wallet{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.wallet span{display:flex;align-items:center;gap:4px}.wallet img{width:21px;height:21px;object-fit:contain}.wallet small{font-size:9px;color:#b5b1a7}.mapframe{position:absolute;right:18px;top:18px;width:180px;background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:7px}.maptitle{display:flex;align-items:center;justify-content:space-between;color:#d9c293;font-size:10px;letter-spacing:1px}.maptitle button{padding:1px 7px}.mapframe canvas{width:100%;height:auto;display:block}.mapframe nav{display:flex;gap:4px;margin-top:6px}.mapframe nav button{padding:5px 8px;flex:1;font-size:11px}#spawnLabel{font-size:10px;color:#d8b6a0;text-align:center}.location{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:min(360px,29vw);text-align:center;pointer-events:none;text-shadow:0 2px 5px #000,0 0 10px #000}.location>span{font:italic bold 21px Georgia,serif;color:#f0d6a7}.location small{display:block;color:#d0ccc2;font-size:12px;margin-top:7px}.actiondock{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:7px 12px 10px;border:1px solid #8c7048;border-radius:13px;background:linear-gradient(#24282de8,#0d1219f5);box-shadow:0 5px 25px #000b}.docktitle{text-align:center;color:#baafa0;font-size:10px;margin-bottom:7px;white-space:nowrap}.actions{display:flex;gap:7px}.action{position:relative;width:64px;height:70px;padding:4px 4px 15px;border:1px solid #ad8a52;box-shadow:inset 0 0 15px #0009}.action.red{background:linear-gradient(#532b2b,#1c1318)}.action.blue{background:linear-gradient(#203f59,#0e1828)}.action.violet{background:linear-gradient(#423256,#171126)}.action img{height:42px;width:42px;object-fit:contain}.action .spell{font-size:33px;line-height:43px;display:block;text-shadow:0 0 15px #d4b575}.action kbd{position:absolute;left:4px;top:2px;font:bold 10px system-ui;background:#0d111bd9;padding:0 3px;border-radius:2px;z-index:2}.action small{position:absolute;left:0;right:0;bottom:3px;font-size:10px}.action b{position:absolute;right:4px;top:4px;font-size:11px;background:#080d18c9;padding:0 3px}.action em{position:absolute;inset:0;display:grid;place-items:center;background:#050b16bb;font:bold 20px system-ui;border-radius:6px}.action em:empty{display:none}#toast{position:absolute;left:50%;bottom:124px;transform:translateX(-50%);max-width:min(550px,70vw);padding:9px 17px;border:1px solid #7e6544;background:#101820e8;border-radius:8px;font-size:12px;text-align:center;pointer-events:none;transition:opacity .3s}#targetLabel{position:absolute;top:110px;left:50%;transform:translateX(-50%);font-size:12px;background:#231823d9;padding:6px 14px;border:1px solid #974f59;border-radius:5px}.touchpad{display:none;position:absolute;left:12px;bottom:122px;grid-template-columns:repeat(2,43px);gap:4px}.touchpad button{height:41px;background:#111c28da;font-size:21px}.overlay,.paneloverlay{position:fixed;inset:0;background:#030912b8;backdrop-filter:blur(5px);display:grid;place-items:center;padding:16px;z-index:40}.modal,.bagwindow{width:min(470px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:linear-gradient(140deg,#293039,#101722);border:1px solid #b58b50;border-radius:16px;box-shadow:0 18px 80px #000b;padding:24px}.bagwindow{width:min(570px,100%)}h1,h2{font:italic bold 29px Georgia,serif;color:#ecd0a0;margin:12px 0}h2{font-size:25px}.modal p,.bagwindow p{line-height:1.5}.modal label{display:block;color:#d8cbb7;font-size:12px;margin:11px 0}.modal input,.modal select{display:block;width:100%;padding:11px;background:#0d1520;border:1px solid #665641;border-radius:6px;margin-top:5px}.primary{width:100%;padding:13px;background:linear-gradient(#976b36,#573c25);border:1px solid #d2ad6f;font-weight:bold;margin-top:12px}.profile-actions{display:flex;gap:8px;margin-top:12px}.profile-actions button{flex:1;font-size:12px}.muted{font-size:12px;color:#aab4c0}.modalheading,.bagwindow header{display:flex;justify-content:space-between;align-items:center}.modalheading small,.bagwindow header small{color:#c7ac80;font-size:10px;letter-spacing:2px}.modalheading button,.bagwindow header button{padding:5px 9px}.inventory{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.inventory>div,.inventory>button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px;background:#111923;border:1px solid #595249;border-radius:8px;padding:10px;gap:5px}.inventory img{width:48px;height:48px;object-fit:contain}.inventory strong{font-size:11px}.inventory span{color:#d5b681;font-size:12px}.inventory .itemglyph{font-size:44px;height:48px}.journal{font-size:12px;padding:10px 0}.entry{border-left:2px solid #806744;padding:5px 8px;color:#bfc7cc;font-size:11px;margin-top:4px}.entry.good{border-color:#61a78b}.entry.danger{border-color:#bf655a}.emoji{font-size:48px}.secondary{font-size:12px}#helpPanel{z-index:45}.paneloverlay:has(#helpClose){backdrop-filter:none}
@media(pointer:coarse){.touchpad{display:grid}}
@media(max-width:800px){.playerframe{top:9px;left:9px;width:265px;padding:7px;gap:7px}.face{width:57px;height:57px}.wallet small{display:none}.identity strong{font-size:12px}.mapframe{right:9px;top:9px;width:125px}.maptitle{font-size:8px}.mapframe nav button{padding:4px;font-size:10px}.location{top:114px;left:15px;transform:none;text-align:left;width:240px}.location>span{font-size:16px}.location small{font-size:10px;max-width:210px}.actiondock{padding:6px 7px 7px}.action{width:55px;height:63px}.action img{width:36px;height:36px}.actions{gap:5px}.action .spell{font-size:29px;line-height:37px}.docktitle{font-size:9px}#toast{bottom:110px;font-size:11px}#targetLabel{top:auto;bottom:154px}.touchpad{bottom:170px}}
@media(max-width:440px){.playerframe{width:245px}.face{width:50px;height:50px}.mapframe{width:88px;padding:5px}.maptitle span{display:none}.mapframe nav button{font-size:9px;padding:3px}.mapframe nav button:first-child{flex:2}#spawnLabel{font-size:8px}.identity span{font-size:10px}.wallet img{width:17px;height:17px}.action{width:48px;height:60px}.action img{width:32px;height:32px}.action small{font-size:9px}.actiondock{max-width:calc(100vw - 12px)}.actions{gap:4px}.docktitle{font-size:8px}.modal,.bagwindow{padding:17px}.inventory{gap:5px}.inventory>div,.inventory>button{padding:5px;min-height:100px}.inventory strong{font-size:10px}#toast{max-width:90vw;min-width:210px}.location{top:111px}}
@media(max-height:530px){.mapframe{width:105px}.location{top:15px;left:50%;transform:translateX(-50%);width:210px;text-align:center}.location>span{font-size:14px}.location small{font-size:9px}.actiondock{bottom:5px}.docktitle{display:none}.action{height:54px;width:50px}.action img{width:31px;height:31px}#toast{bottom:78px}.touchpad{bottom:20px}.modal,.bagwindow{max-height:calc(100dvh - 16px)}.playerframe{width:255px}.location{left:57%}}

.action .spell svg{width:40px;height:40px;display:block;margin:0 auto}.action em svg{width:24px;height:24px}.itemglyph svg{height:44px;width:44px}#fullscreen svg{height:13px;width:13px;vertical-align:middle}
@media(max-width:800px){.action .spell svg{width:34px;height:34px}}
@media(max-width:440px){.mapframe nav{display:grid;grid-template-columns:repeat(3,1fr)}.mapframe nav button:first-child{grid-column:1/-1}.mapframe nav button{min-width:0}.action .spell svg{width:30px;height:30px}}

/* 0.7: viditelný offline stav, neslibuje připojenou online hru */
.onlineStatus{font-size:10px;color:#bed6bf;text-align:center;font-weight:700;letter-spacing:.5px;padding:2px 0 4px;border-bottom:1px solid #66563f;margin-bottom:4px}
@media(max-width:440px){.onlineStatus{font-size:8px;letter-spacing:0}}
/* Šířka tlačítek na mapě musí zůstat uvnitř malého panelu i na telefonu naležato. */
@media (max-height:530px) and (min-width:441px) {
 .mapframe nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 .mapframe nav button{min-width:0;width:100%;padding:4px 2px;font-size:10px}
}
/* Online mode: compact chat on desktop, collapsible on phones. */
.onlineStatus{font-size:11px;text-align:center;color:#d5bd8f;font-weight:700;line-height:1.4;margin:3px 0}
.onlineJoin{display:block;width:100%;font-size:11px;padding:6px 4px;margin:3px 0;color:#f2d9a3;background:#2a3940;border:1px solid #ab8b52}
.chatPanel{position:absolute;z-index:8;right:18px;bottom:18px;width:min(292px,calc(100vw - 30px));height:265px;display:flex;flex-direction:column;border:1px solid #8c7048;background:#101923ec;border-radius:12px;box-shadow:0 8px 26px #0008;overflow:hidden}
.chatPanel header{height:37px;display:flex;align-items:center;gap:8px;padding:0 9px;background:#222a30;border-bottom:1px solid #65543e}
.chatPanel header strong{font-size:13px;color:#f2d69f}.chatPanel header span{font-size:10px;color:#aee5d0;margin-left:auto}
.chatPanel header button{padding:2px 7px;border:0}.chatFeed{flex:1;overflow-y:auto;padding:8px 10px;min-height:0;font-size:12px;scrollbar-width:thin;overflow-wrap:anywhere}
.chatFeed p{margin:0 0 6px;line-height:1.35}.chatFeed strong{color:#f0d38f}.chatSystem{color:#a9b9c5;font-style:italic}
.chatForm{display:flex;padding:7px;gap:5px;border-top:1px solid #574d40}.chatForm input{min-width:0;flex:1;padding:8px;border:1px solid #78634b;border-radius:5px;background:#101821;color:#fff;font-size:12px}.chatForm button{font-size:11px;padding:6px 8px}.chatForm button:disabled,.chatForm input:disabled{opacity:.6}
#chatToggle{position:absolute;right:12px;bottom:110px;z-index:9;display:none;background:#2b4050;border:1px solid #c8a268}
@media(max-width:1100px){.chatPanel{height:200px;width:230px;right:9px;bottom:110px}.chatFeed{font-size:11px}}
@media(max-width:800px){.chatPanel{display:none;right:8px;bottom:114px;width:min(320px,calc(100vw - 16px));height:min(325px,60vh);z-index:20}.chatPanel.chatOpen{display:flex}#chatToggle{display:block}.chatPanel header button{display:block}}
@media(min-width:801px){.chatPanel.chatClosed{display:none}#chatToggle{display:block;right:18px;bottom:18px}}
@media(max-height:530px){.chatPanel{bottom:8px;right:6px;height:calc(100dvh - 18px);max-width:265px}#chatToggle{bottom:70px}}