/* =====================================================================
   Kismetale - "moderni pixel" (retro textovka s pixelovymi scenami)
   Rozlozeni: telefon (zaklad), tablet (>= 760px), PC (>= 1180px).
   ===================================================================== */

:root{
  --bg:#141a30;
  --bg-deep:#0e1324;
  --panel:#1b2340;
  --panel-2:#222c50;
  --line:#3a4677;
  --line-hi:#5b6aa6;
  --text:#c9cfe8;
  --text-hi:#eef1ff;
  --dim:#7d86b0;
  --accent:#e8c170;
  --accent-ink:#1a1408;
  --accent-2:#9fb4ff;

  /* klicova slova v pribehu */
  --k-place:#7fd6c8;
  --k-npc:#f19bb1;
  --k-item:#e8c170;
  --k-danger:#ff6b6b;

  --hp:#ff5a6a;
  --hp-dark:#b8394a;
  --fate:#9fb4ff;
  --fate-dark:#6274c4;

  --font-title:'Jacquard 12','Jersey 15',serif;
  --font-ui:'Jersey 15',ui-monospace,monospace;
  --font-story:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;

  --gutter:14px;
  --content-max:680px;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

/* Barevny nadech podle sveta (herni obrazovka a tvorba postavy). */
body[data-theme="cyberpunk"]{--bg:#120f26;--bg-deep:#0b0918;--panel:#1a1636;--panel-2:#231d48;--line:#43367a;--line-hi:#6d58b8;--accent:#5ef2d0;--accent-ink:#05231b;--accent-2:#ff7ae6;}
body[data-theme="horror"]{--bg:#140c10;--bg-deep:#0c0709;--panel:#1d1217;--panel-2:#27171e;--line:#4a2630;--line-hi:#7a3a48;--accent:#ff6b6b;--accent-ink:#250608;--accent-2:#d9a3ad;}
body[data-theme="scifi"]{--bg:#0d1830;--bg-deep:#081022;--panel:#12203e;--panel-2:#182a50;--line:#2c4880;--line-hi:#4a72bf;--accent:#6fd6ff;--accent-ink:#04202e;--accent-2:#b9a8ff;}
body[data-theme="postapo"]{--bg:#1d1611;--bg-deep:#130e0a;--panel:#271d16;--panel-2:#30241b;--line:#5a4430;--line-hi:#8a6a48;--accent:#ff9f4a;--accent-ink:#2a1300;--accent-2:#d8c39a;}
body[data-theme="romance"]{--bg:#1e1328;--bg-deep:#140c1c;--panel:#291a37;--panel-2:#332146;--line:#5a3a74;--line-hi:#8b5bb0;--accent:#ff8fb1;--accent-ink:#2b0a16;--accent-2:#ffd1a8;}
body[data-theme="custom"]{--bg:#0f1e24;--bg-deep:#091418;--panel:#142a32;--panel-2:#1a3540;--line:#2e5a66;--line-hi:#4a8a98;--accent:#5fe0c0;--accent-ink:#03241c;--accent-2:#a8d8ff;}

/* ---------- Zaklad ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:19px;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
button,input,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
.hidden{display:none !important;}
.px{image-rendering:pixelated;image-rendering:crisp-edges;}

#app{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  overflow:clip; /* ani fokus pole, ani klavesnice nesmi ramecek odscrollovat */
  background:var(--bg);
  transition:background-color .3s ease;
}

/* Pixelovy ramecek: zubate rohy (clip-path) + dvojita linka. */
.pbox{
  position:relative;
  background:var(--panel);
  box-shadow:inset 0 0 0 3px var(--line), inset 0 0 0 6px var(--panel), inset 0 0 0 7px rgba(0,0,0,.35);
  clip-path:polygon(0 6px,3px 6px,3px 3px,6px 3px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px));
}
.section{padding:18px 20px;margin-bottom:14px;}
.box-title{font-family:var(--font-title);font-weight:400;font-size:30px;line-height:1;color:var(--accent);margin-bottom:10px;}
.box-title.center{text-align:center;}
.box-copy{color:var(--text);font-family:var(--font-story);font-size:16px;line-height:1.5;margin-bottom:14px;}
.kicker{display:block;font-size:14px;color:var(--dim);letter-spacing:1px;}
.sub{color:var(--dim);font-size:15px;line-height:1.4;}
.sub-label{font-size:14px;color:var(--dim);margin:12px 0 6px;}

/* ---------- Obrazovky ---------- */
.screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  visibility:hidden;
  opacity:0;
  transition:opacity .18s steps(3), visibility 0s linear .18s;
}
.screen.active{visibility:visible;opacity:1;transition:opacity .18s steps(3);}
.screen.wide{--content-max:1120px;}
.screen-header,
.screen-body,
.screen-footer{
  padding-left:max(var(--gutter), calc((100% - var(--content-max)) / 2));
  padding-right:max(var(--gutter), calc((100% - var(--content-max)) / 2));
}
.screen-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:calc(12px + var(--safe-top));
  padding-bottom:10px;
  flex-shrink:0;
}
.screen-header h2{font-family:var(--font-title);font-weight:400;font-size:42px;line-height:1;color:var(--accent);text-shadow:3px 3px 0 #000;}
.screen-body{flex:1;overflow-y:auto;padding-top:4px;padding-bottom:calc(28px + var(--safe-bottom));}
.screen-footer{flex-shrink:0;padding-top:12px;padding-bottom:calc(14px + var(--safe-bottom));background:var(--bg);box-shadow:0 -3px 0 var(--line);}

/* ---------- Tlacitka ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:8px 18px;
  background:var(--panel-2);
  color:var(--text-hi);
  font-size:18px;
  box-shadow:inset 0 0 0 3px var(--line-hi), inset 0 -4px 0 3px rgba(0,0,0,.25);
}
.btn:active:not(:disabled){transform:translateY(2px);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn:focus-visible,.menu-item:focus-visible,.icon-btn:focus-visible,.genre-tile:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 3px rgba(0,0,0,.25), inset 0 -4px 0 3px rgba(0,0,0,.2);}
.btn.danger{background:#5a1f2a;color:#ffd6dc;box-shadow:inset 0 0 0 3px #a8434f;}
.btn.small{min-height:34px;padding:4px 12px;font-size:15px;}
.btn.full{width:100%;}
@media (hover:hover){ .btn:hover:not(:disabled){filter:brightness(1.12);} }

.icon-btn{
  position:relative;
  width:44px;
  height:44px;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--panel-2);
  color:var(--accent);
  font-size:22px;
  line-height:1;
  box-shadow:inset 0 0 0 3px var(--line-hi);
}
.icon-btn:active{transform:translateY(2px);}

/* ---------- Formulare ---------- */
.field + .field{margin-top:16px;}
.field label{display:block;font-size:15px;color:var(--dim);margin-bottom:6px;}
.field input,
.field textarea,
.code-input,
.room-chat-input-wrap input{
  width:100%;
  background:var(--bg-deep);
  border:none;
  box-shadow:inset 0 0 0 2px var(--line);
  color:var(--text-hi);
  padding:12px 14px;
  font-family:var(--font-story);
  font-size:16px; /* 16px = iOS pri fokusu nezoomuje */
}
.field textarea{resize:vertical;min-height:86px;line-height:1.45;}
.field input::placeholder,.field textarea::placeholder,.code-input::placeholder,#playerInput::placeholder,.room-chat-input-wrap input::placeholder{color:var(--dim);}
.field input:focus,.field textarea:focus,.code-input:focus,.room-chat-input-wrap input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent);}

/* ---------- Uvod a hlavni menu ---------- */
.screen-title{overflow-y:auto;}
.screen-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;}
.screen-title::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72) 78%);}
.title-layout{
  position:relative;
  z-index:1;
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:calc(24px + var(--safe-top)) var(--gutter) calc(48px + var(--safe-bottom));
}
.title-head{text-align:center;}
.logo-title{font-family:var(--font-title);font-weight:400;font-size:88px;line-height:.9;color:var(--accent);text-shadow:4px 4px 0 #000, 0 0 30px rgba(0,0,0,.6);}
.logo-tagline{margin-top:4px;font-size:17px;letter-spacing:2px;color:var(--text-hi);text-shadow:2px 2px 0 #000;}
.login-box,.menu-box{width:100%;max-width:380px;padding:20px 22px;}
#loginStatus{min-height:20px;margin:10px 0 8px;font-size:15px;color:var(--accent);text-align:center;}
.fine-print{margin-top:12px;font-family:var(--font-story);font-size:13px;line-height:1.45;color:var(--dim);text-align:center;}
.menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 4px 8px 26px;
  text-align:left;
  font-size:23px;
  color:var(--text);
  position:relative;
}
.menu-item::before{content:'▸';position:absolute;left:4px;color:var(--accent);visibility:hidden;}
.menu-item:hover,.menu-item:focus-visible{color:var(--accent);}
.menu-item:hover::before,.menu-item:focus-visible::before,.menu-item.sel::before{visibility:visible;}
.menu-item.sel{color:var(--accent);}
.menu-item.dim{color:var(--dim);}
.menu-label{flex-shrink:0;}
.menu-meta{margin-left:auto;font-size:14px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.title-foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(12px + var(--safe-bottom));z-index:1;display:flex;justify-content:space-between;font-size:14px;color:var(--dim);text-shadow:2px 2px 0 #000;}

/* ---------- Vyber sveta ---------- */
.genre-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:4px;}
.genre-tile{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  padding:0;
  overflow:hidden;
  text-align:left;
  background:var(--panel);
}
.genre-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.genre-tile::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--line-hi);pointer-events:none;}
.genre-tile:hover::after,.genre-tile:focus-visible::after{box-shadow:inset 0 0 0 3px var(--accent);}
.genre-tile .gt-label{position:absolute;inset:auto 0 0 0;padding:22px 12px 10px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);}
.genre-tile .gt-title{font-family:var(--font-title);font-size:34px;line-height:.9;color:#fff;text-shadow:3px 3px 0 #000;}
.genre-tile .gt-desc{font-size:14px;color:var(--text-hi);text-shadow:2px 2px 0 #000;}
.genre-tile .gt-ribbon{position:absolute;top:8px;left:8px;padding:1px 8px;font-size:13px;background:#000;color:var(--accent);}

/* ---------- Tvorba postavy ---------- */
.selected-genre-card{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;margin-bottom:14px;}
.selected-genre-art{width:96px;height:72px;flex-shrink:0;object-fit:cover;box-shadow:0 0 0 2px var(--line-hi);}
.selected-genre-copy{flex:1;min-width:0;}
#selectedGenreTitle{display:block;font-family:var(--font-title);font-weight:400;font-size:34px;line-height:.9;color:var(--accent);}
#selectedGenreDescription{font-size:15px;color:var(--dim);}
.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.option-card{
  position:relative;
  padding:10px 12px;
  cursor:pointer;
  background:var(--bg-deep);
  box-shadow:inset 0 0 0 2px var(--line);
}
.option-card.selected{box-shadow:inset 0 0 0 3px var(--accent);background:var(--panel-2);}
.option-card.selected .g-title::before{content:'▸ ';color:var(--accent);}
.option-card .g-title{font-size:17px;color:var(--text-hi);}
.option-card .g-desc{font-family:var(--font-story);font-size:13px;color:var(--dim);line-height:1.35;margin-top:2px;}
.stat-row{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;margin-bottom:8px;background:var(--bg-deep);box-shadow:inset 0 0 0 2px var(--line);}
.stat-row-label{flex:1;font-size:18px;}
.stat-row-controls{display:flex;align-items:center;gap:6px;}
.stat-btn{width:40px;height:40px;background:var(--panel-2);color:var(--accent);font-size:22px;box-shadow:inset 0 0 0 2px var(--line-hi);}
.stat-btn:active:not(:disabled){transform:translateY(2px);}
.stat-btn:disabled{opacity:.3;cursor:not-allowed;}
.stat-row-value{min-width:36px;text-align:center;font-size:22px;color:var(--text-hi);}
#statsRemaining{font-size:15px;color:var(--accent);text-align:right;}
.age-confirm-label{display:flex !important;align-items:center;gap:10px;cursor:pointer;color:var(--text) !important;font-size:16px !important;}
.age-confirm-label input[type="checkbox"]{width:22px;height:22px;flex-shrink:0;accent-color:var(--accent);}

/* ---------- Knihovna ---------- */
#libraryGrid{display:grid;grid-template-columns:1fr;gap:12px;padding-top:4px;}
.story-card{display:flex;gap:14px;padding:12px;cursor:pointer;}
.sc-art{width:112px;height:84px;flex-shrink:0;object-fit:cover;box-shadow:0 0 0 2px var(--line-hi);}
.sc-body{flex:1;min-width:0;display:flex;flex-direction:column;}
.story-card .sc-genre{font-size:14px;color:var(--story-color, var(--accent));}
.story-card .sc-title{font-family:var(--font-title);font-size:32px;line-height:.95;color:var(--text-hi);}
.story-card .sc-meta{font-family:var(--font-story);font-size:13px;color:var(--dim);}
.story-card .sc-actions{display:flex;gap:8px;margin-top:auto;padding-top:8px;}
.story-card .sc-actions .btn{min-height:36px;padding:4px 12px;font-size:15px;}
.library-empty{padding:36px 16px;text-align:center;color:var(--dim);box-shadow:inset 0 0 0 2px var(--line);}

/* ---------- Hra s prateli ---------- */
.friends-grid{display:grid;gap:0;}
.code-input{text-align:center;font-family:var(--font-ui);font-size:30px;letter-spacing:8px;text-transform:uppercase;margin-bottom:12px;}
.room-code-card{text-align:center;}
.room-code{margin:6px 0 8px;font-size:48px;letter-spacing:10px;color:var(--accent);text-shadow:3px 3px 0 #000;user-select:all;}
.room-code-card .box-copy{margin-bottom:0;}
.player-list{list-style:none;display:flex;flex-direction:column;gap:6px;}
.player-list li{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;background:var(--bg-deep);box-shadow:inset 0 0 0 2px var(--line);}
.player-avatar{width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#000;font-size:17px;}
.player-name{flex:1;min-width:0;}
.player-tag{font-size:14px;color:var(--accent);}
.player-tag.me{color:var(--accent-2);}
.lobby-hint{margin:4px 6px 14px;text-align:center;font-family:var(--font-story);color:var(--text);line-height:1.5;}
#roomLobbyView .btn + .btn{margin-top:10px;}
.room-status{margin-top:12px;min-height:20px;text-align:center;font-size:15px;color:var(--accent);}

/* ---------- Nastaveni ---------- */
.settings-list{display:flex;flex-direction:column;gap:12px;}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;font-size:18px;text-align:left;width:100%;}
.settings-row strong{font-weight:400;color:var(--accent);}
.toggle{width:52px;height:28px;position:relative;background:var(--bg-deep);box-shadow:inset 0 0 0 2px var(--line);}
.toggle::after{content:'';position:absolute;top:5px;left:5px;width:18px;height:18px;background:var(--dim);transition:transform .15s steps(3);}
.toggle.on{box-shadow:inset 0 0 0 2px var(--accent);}
.toggle.on::after{transform:translateX(24px);background:var(--accent);}

/* =====================================================================
   Herni obrazovka
   ===================================================================== */
.game-layout{position:relative;flex:1;min-height:0;display:flex;}
.game-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:0 var(--gutter);}
.desk-only{display:none !important;}

.game-bar{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--safe-top)) 0 10px;flex-shrink:0;}
.game-bar-title{flex:1;min-width:0;display:flex;flex-direction:column;}
.game-bar-title strong{font-weight:400;font-size:18px;color:var(--text-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#storyMeta{font-size:14px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hp-chip{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 10px;font-size:18px;color:var(--text-hi);}
.hp-chip.low{animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:.4;}}
.px-heart{
  display:inline-block;
  width:24px;
  height:21px;
  background:var(--hp);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.px-heart.big{width:48px;height:42px;}
.badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 4px;display:flex;align-items:center;justify-content:center;background:var(--hp);color:#000;font-size:13px;}

.scene-banner{position:relative;height:clamp(130px, 24vh, 220px);flex-shrink:0;overflow:hidden;}
.scene-box{position:relative;aspect-ratio:4 / 3;overflow:hidden;margin-bottom:14px;}
.scene-img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:cover;}
.scene-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);}
.scene-loc{display:block;font-family:var(--font-title);font-size:34px;line-height:.9;color:#fff;text-shadow:3px 3px 0 #000;}
.scene-cap small{display:block;margin-top:4px;font-size:14px;color:var(--text-hi);text-shadow:2px 2px 0 #000;}

.room-strip{margin-top:8px;padding:4px 10px;font-size:14px;color:var(--accent-ink);background:var(--accent-2);flex-shrink:0;text-align:center;}
.room-strip.warn{background:var(--k-danger);}

.proposal-card{margin-top:10px;padding:14px 16px;flex-shrink:0;box-shadow:inset 0 0 0 3px var(--accent), inset 0 0 0 6px var(--panel);}
.proposal-card[data-status="rejected"]{box-shadow:inset 0 0 0 3px var(--k-danger), inset 0 0 0 6px var(--panel);}
.proposal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px;}
.proposal-status{font-size:14px;color:var(--accent);}
.proposal-text{font-family:var(--font-story);font-size:17px;line-height:1.45;color:var(--text-hi);}
.vote-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}

.story-box{flex:1;min-height:0;margin-top:10px;display:flex;flex-direction:column;padding:6px;}
#chatLog{
  flex:1;
  overflow-y:auto;
  padding:14px 14px 10px;
  display:flex;
  flex-direction:column;
  gap:14px;
  font-family:var(--font-story);
  font-size:17px;
  line-height:1.6;
  -webkit-overflow-scrolling:touch;
}
.msg{white-space:pre-wrap;overflow-wrap:anywhere;animation:msgIn .2s steps(3);}
@keyframes msgIn{from{opacity:0;}to{opacity:1;}}
.msg.narrator{color:var(--text);}
.msg.player{color:var(--accent-2);}
.msg.player::before{content:'> ';color:var(--accent);font-family:var(--font-ui);}
.msg.system{align-self:center;text-align:center;font-family:var(--font-ui);font-size:15px;color:var(--dim);}
.roll-tag{display:inline-block;margin-left:8px;padding:0 6px;font-family:var(--font-ui);font-size:14px;color:var(--accent-ink);background:var(--accent);white-space:nowrap;vertical-align:1px;}
.kw-place{color:var(--k-place);}
.kw-npc{color:var(--k-npc);}
.kw-item{color:var(--k-item);}
.kw-danger{color:var(--k-danger);}
.msg-text.typing{cursor:pointer;}
.type-cursor{display:inline-block;width:9px;height:1.05em;margin-left:2px;background:var(--accent);vertical-align:-2px;animation:blink 1s steps(1) infinite;}
#thinking{display:none;align-items:center;gap:6px;padding:2px 16px 8px;font-size:15px;color:var(--accent-2);flex-shrink:0;}
#thinking.active{display:flex;}
.dot{width:6px;height:6px;background:var(--accent-2);animation:blink 1s steps(1) infinite;}
.dot:nth-child(2){animation-delay:.33s;}
.dot:nth-child(3){animation-delay:.66s;}

#inputBar{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin:4px;
  padding:8px 8px 8px 12px;
  background:var(--bg-deep);
  box-shadow:inset 0 0 0 2px var(--line);
  flex-shrink:0;
}
#inputBar:focus-within{box-shadow:inset 0 0 0 2px var(--accent);}
.prompt-gt{font-size:22px;line-height:40px;color:var(--accent);}
#playerInput{
  flex:1;
  min-height:40px;
  max-height:150px;
  padding:9px 2px;
  background:transparent;
  border:none;
  color:var(--text-hi);
  font-family:var(--font-story);
  font-size:16px;
  line-height:1.4;
  resize:none;
}
#playerInput:focus{outline:none;}
#playerInput:disabled{opacity:.6;}
.send-btn{height:40px;padding:0 14px;flex-shrink:0;background:var(--accent);color:var(--accent-ink);font-size:16px;}
.send-btn:active:not(:disabled){transform:translateY(2px);}
.send-btn:disabled{opacity:.4;cursor:not-allowed;}

.quick-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:10px 0 calc(10px + var(--safe-bottom));flex-shrink:0;}
.quick-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--line-hi);color:var(--text);font-size:12px;}
.quick-btn svg{width:26px;height:26px;}
.quick-btn:hover,.quick-btn:focus-visible{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent);outline:none;}
.quick-btn:active{transform:translateY(2px);}
.quick-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ---------- Panely (postava/denik, druzina, pauza) ---------- */
.sheet-backdrop{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.6);}
.sheet{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:21;
  height:84%;
  display:flex;
  flex-direction:column;
  padding:8px var(--gutter) calc(14px + var(--safe-bottom));
  background:var(--bg);
  box-shadow:0 -3px 0 var(--line-hi), 0 -12px 30px rgba(0,0,0,.5);
  transform:translateY(105%);
  visibility:hidden;
  transition:transform .2s steps(4), visibility 0s linear .2s;
}
.sheet.open{transform:none;visibility:visible;transition:transform .2s steps(4);}
.sheet-handle{width:44px;height:5px;margin:2px auto 12px;background:var(--line-hi);flex-shrink:0;}
.sheet-scroll{flex:1;min-height:0;overflow-y:auto;}
.sheet.modal{
  top:50%;
  left:50%;
  right:auto;
  bottom:auto;
  width:min(360px, calc(100% - 32px));
  height:auto;
  padding:20px 20px 16px;
  transform:translate(-50%, -50%);
  opacity:0;
  transition:opacity .15s steps(3), visibility 0s linear .15s;
}
.sheet.modal.open{opacity:1;transition:opacity .15s steps(3);}
.sheet-actions{display:flex;flex-direction:column;}

.quest-list{list-style:none;display:flex;flex-direction:column;gap:6px;font-family:var(--font-story);font-size:15.5px;line-height:1.4;}
.quest-list li{position:relative;padding-left:18px;color:var(--text);}
.quest-list li::before{content:'◆';position:absolute;left:0;top:1px;font-size:11px;color:var(--accent);}
.quest-list li.done{color:var(--dim);text-decoration:line-through;}
.quest-list li.done::before{content:'✔';color:var(--dim);}
.tag-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;}
.tag-list .mini-item,.tag{display:inline-block;padding:2px 8px;font-size:15px;background:var(--bg-deep);box-shadow:inset 0 0 0 2px var(--line);color:var(--text);}
#inventoryList .mini-item{color:var(--k-item);}
.empty-hint{font-family:var(--font-story);font-size:14px;color:var(--dim);font-style:italic;}
.char-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.char-head .box-title{margin-bottom:6px;}
.kv-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:12px 0;font-size:16px;}
.kv-grid .k{color:var(--dim);}
.stat-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.stat-chip{padding:6px 4px;text-align:center;background:var(--bg-deep);box-shadow:inset 0 0 0 2px var(--line);}
.stat-chip-value{font-size:24px;color:var(--text-hi);line-height:1.1;}
.stat-chip-label{font-size:13px;color:var(--text);}
.stat-chip-bonus{font-size:12px;color:var(--dim);}
.body-block{display:flex;gap:14px;align-items:flex-start;margin-top:4px;}
.body-figure-wrap{padding:10px;margin-top:12px;background:var(--bg-deep);box-shadow:inset 0 0 0 2px var(--line);}
.body-figure-wrap svg rect{stroke:#000;stroke-width:3;}
.body-lists{flex:1;min-width:0;}
.vital-label{display:flex;justify-content:space-between;font-size:14px;color:var(--dim);margin:8px 0 4px;}
.meter{height:12px;background:#000;box-shadow:0 0 0 2px var(--line);}
.meter i{display:block;height:100%;width:100%;transition:width .3s steps(6);}
.meter.hp i{background:repeating-linear-gradient(90deg,var(--hp) 0 8px,var(--hp-dark) 8px 10px);}
.meter.fate i{background:repeating-linear-gradient(90deg,var(--fate) 0 8px,var(--fate-dark) 8px 10px);}

.sheet-room-head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;flex-shrink:0;}
.sheet-room-head .box-title{margin-bottom:4px;}
#roomCodeLabel{font-family:var(--font-ui);font-size:20px;color:var(--text-hi);letter-spacing:3px;}
.room-chat-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 0 10px;font-family:var(--font-story);font-size:15px;line-height:1.4;}
.room-chat-item{overflow-wrap:anywhere;}
.room-chat-item-meta{display:inline;font-family:var(--font-ui);color:var(--k-npc);margin-right:6px;}
.room-chat-item.mine .room-chat-item-meta{color:var(--accent-2);}
.room-chat-item-meta::after{content:':';}
.room-chat-item > div:last-child{display:inline;}
.room-chat-input-wrap{display:flex;gap:8px;flex-shrink:0;}
.room-chat-input-wrap input{flex:1;min-width:0;padding:8px 10px;}

/* ---------- Dialog ---------- */
.dialog-layer{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px var(--gutter);background:rgba(0,0,0,.7);}
.dialog{width:100%;max-width:400px;padding:22px 22px 18px;text-align:center;}
.dialog-text{margin:4px 0 18px;font-family:var(--font-story);font-size:16px;line-height:1.5;color:var(--text);white-space:pre-line;}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dialog-actions.single{grid-template-columns:1fr;}

/* ---------- Oznameni o aktualizaci ---------- */
.update-notice{
  position:fixed;
  left:50%;
  bottom:calc(14px + var(--safe-bottom));
  transform:translateX(-50%);
  z-index:40;
  width:min(500px, calc(100vw - 28px));
  padding:14px 16px;
  background:var(--panel);
  box-shadow:inset 0 0 0 3px var(--accent), 0 10px 30px rgba(0,0,0,.6);
}
.update-notice-text{font-family:var(--font-story);font-size:15px;line-height:1.45;}
.update-notice-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* =====================================================================
   Maly telefon
   ===================================================================== */
@media (max-width: 360px){
  .logo-title{font-size:70px;}
  .option-grid{grid-template-columns:1fr;}
  .quick-btn span{display:none;}
}

/* =====================================================================
   Tablet (>= 760px)
   ===================================================================== */
@media (min-width: 760px){
  :root{--gutter:24px;}
  .logo-title{font-size:120px;}
  .genre-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
  .option-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  #libraryGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .friends-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .friends-grid .section{display:flex;flex-direction:column;margin-bottom:0;}
  .friends-grid .section .btn{margin-top:auto;}
  .menu-box,.login-box{max-width:420px;}
  .scene-banner{height:clamp(160px, 26vh, 260px);}
  #chatLog{font-size:18px;padding:18px 22px 12px;}

  .sheet.side-left,
  .sheet.side-right{
    top:0;
    bottom:0;
    left:auto;
    right:0;
    width:400px;
    height:auto;
    padding-top:calc(14px + var(--safe-top));
    box-shadow:-3px 0 0 var(--line-hi), -12px 0 30px rgba(0,0,0,.5);
    transform:translateX(105%);
  }
  .sheet.side-left.open,
  .sheet.side-right.open{transform:none;}
  .sheet.side-left .sheet-handle,
  .sheet.side-right .sheet-handle{display:none;}
}

/* =====================================================================
   PC (>= 1180px): scena + denik vlevo, pribeh uprostred, menu vpravo
   ===================================================================== */
@media (min-width: 1180px){
  .genre-tiles{grid-template-columns:repeat(4,minmax(0,1fr));}
  #libraryGrid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .logo-title{font-size:150px;}
  .menu-box,.login-box{max-width:460px;padding:24px 28px;}
  .menu-item{font-size:28px;}
  .menu-meta{font-size:16px;}
  .desk-only{display:revert !important;}
  .mobile-only{display:none !important;}
  .game-bar{display:none;}

  .game-layout{
    display:grid;
    grid-template-columns:380px minmax(0,1fr) 250px;
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"left main side" "left main room";
    gap:14px;
    padding:14px;
  }
  .game-main{grid-area:main;padding:0;min-height:0;}
  .story-box{margin-top:0;}
  .proposal-card{margin:0 0 12px;}
  .room-strip{margin:0 0 10px;}

  .sheet.side-left,
  .sheet.side-right{
    position:relative;
    inset:auto;
    width:auto;
    height:auto;
    transform:none;
    visibility:inherit; /* skryva se spolu s herni obrazovkou */
    padding:0;
    box-shadow:none;
    background:transparent;
    transition:none;
    z-index:1;
    min-height:0;
  }
  .sheet.side-left{grid-area:left;}
  .sheet.side-right{grid-area:room;padding:16px 16px 14px;background:var(--panel);box-shadow:inset 0 0 0 3px var(--line), inset 0 0 0 6px var(--panel), inset 0 0 0 7px rgba(0,0,0,.35);}
  .screen-game:not(.in-room) .sheet.side-right{display:none;}
  .screen-game:not(.in-room) .game-side{grid-row:1 / 3;}
  .sheet-handle{display:none;}
  .sheet .section:last-child{margin-bottom:0;}

  .game-side{grid-area:side;display:flex !important;flex-direction:column;gap:6px;padding:16px 16px 14px;min-height:0;}
  .side-menu{display:flex;flex-direction:column;gap:0;margin-bottom:6px;}
  .side-link{position:relative;text-align:left;font-size:20px;color:var(--text);padding:1px 0 1px 18px;}
  .side-link::before{content:'▸';position:absolute;left:2px;color:var(--accent);visibility:hidden;}
  .side-link:hover::before,.side-link:focus-visible::before{visibility:visible;}
  .side-link:hover,.side-link:focus-visible{color:var(--accent);outline:none;}
  .side-link.dim{color:var(--dim);}
  .side-day{text-align:center;font-size:16px;color:var(--text);margin:6px 0;}
  .side-heart{display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px 0;font-size:18px;color:var(--text-hi);}
  .game-side .quick-bar{grid-template-columns:repeat(3,1fr);margin-top:auto;padding:12px 0 0;}
  .game-side .quick-btn{aspect-ratio:1;justify-content:center;}
  .game-side .quick-btn svg{width:30px;height:30px;}
  #chatLog{font-size:18px;padding:22px 26px 12px;}
}