/* Lišákovy hry – společný vzhled stránek jednotlivých her (/hry/<id>/) */
:root {
  color-scheme: light;
  --bg: #fff3e4; --bg-top: #bfe7ff; --bg-mid: #ffe1ef;
  --surface: #ffffff; --surface-2: #fff7ee;
  --ink: #2b1740; --muted: #6d5a80; --line: #f0dcc8;
  --accent: #ff7a2f; --accent-2: #ff4f9a; --sun: #ffc23c; --mint: #22c58b; --sky: #3fb4ff; --grape: #8b5cf6;
  --link: #c2410c;
  --shadow: 0 10px 24px rgba(92, 45, 120, 0.16), 0 2px 6px rgba(92, 45, 120, 0.10);
  --shadow-lift: 0 22px 40px rgba(92, 45, 120, 0.24), 0 6px 12px rgba(92, 45, 120, 0.14);
  --glass: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.4));
  --glass-line: rgba(255,255,255,.85);
  --blob-a: #ffb86b; --blob-b: #ff8cc6; --blob-c: #7fd3ff; --blob-d: #b8f28a;
  --head: "Baloo 2", "Nunito", system-ui, sans-serif;
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #140c2b; --bg-top: #1d1147; --bg-mid: #2a1244;
    --surface: #22173f; --surface-2: #2b1e4f;
    --ink: #fff4e6; --muted: #c6b6e0; --line: #3c2b66; --link: #ffb36b;
    --shadow: 0 10px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35);
    --shadow-lift: 0 24px 44px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,194,60,0.35);
    --glass: linear-gradient(135deg, rgba(60,36,110,.78), rgba(34,23,63,.58));
    --glass-line: rgba(255,255,255,.12);
    --blob-a: #ff7a2f; --blob-b: #c2338a; --blob-c: #2f6bff; --blob-d: #1fae78;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #140c2b; --bg-top: #1d1147; --bg-mid: #2a1244;
  --surface: #22173f; --surface-2: #2b1e4f;
  --ink: #fff4e6; --muted: #c6b6e0; --line: #3c2b66; --link: #ffb36b;
  --shadow: 0 10px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-lift: 0 24px 44px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,194,60,0.35);
  --glass: linear-gradient(135deg, rgba(60,36,110,.78), rgba(34,23,63,.58));
  --glass-line: rgba(255,255,255,.12);
  --blob-a: #ff7a2f; --blob-b: #c2338a; --blob-c: #2f6bff; --blob-d: #1fae78;
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0; min-height: 100vh; padding: 14px 16px 40px; overflow-x: hidden;
  background: linear-gradient(180deg, var(--bg-top) 0, var(--bg-mid) 380px, var(--bg) 820px) no-repeat;
  background-color: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55;
}
button { font: inherit; color: inherit; }
a { color: var(--link); }
[hidden] { display: none !important; }
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; }
.blob.a { width: 320px; height: 320px; left: -100px; top: -60px; background: var(--blob-a); }
.blob.b { width: 280px; height: 280px; right: -90px; top: 140px; background: var(--blob-b); }
.blob.c { width: 360px; height: 360px; left: 30%; top: 60%; background: var(--blob-c); }
.blob.d { width: 240px; height: 240px; right: 6%; bottom: -80px; background: var(--blob-d); }
.wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* horní lišta */
.top {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 22px;
  background: var(--glass); border: 2px solid var(--glass-line); box-shadow: var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.brand svg { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 3px 4px rgba(80,30,20,.25)); }
.brand b {
  font-family: var(--head); font-weight: 800; font-size: 26px; line-height: 1; white-space: nowrap;
  background: linear-gradient(180deg, #ffb13b 10%, #ff6a2b 55%, #ff3f8e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.top .sp { flex: 1; }
.pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap;
  font-family: var(--head); font-weight: 800; font-size: 17px; color: #fff; border: 0; border-radius: 14px; padding: 8px 14px 6px; cursor: pointer;
  background: linear-gradient(180deg, #ff9a52, var(--accent)); box-shadow: 0 4px 0 #c24f12;
}
.pill:active { transform: translateY(3px); box-shadow: 0 1px 0 #c24f12; }
.pill.round { width: 44px; height: 44px; justify-content: center; padding: 0; font-size: 20px; background: linear-gradient(180deg, #7fd0ff, var(--sky)); box-shadow: 0 4px 0 #1a7bbf; }
.theme-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-size: 18px; line-height: 1; flex: none; }
.pill:focus-visible, .theme-btn:focus-visible, .brand:focus-visible, .more a:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

/* drobečková navigace + nadpis */
.crumbs ol { list-style: none; margin: 0; padding: 0 4px; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 8px; opacity: .7; }
.crumbs a { color: var(--muted); }
.head { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
h1 { margin: 0; font-family: var(--head); font-weight: 800; font-size: clamp(32px, 7vw, 54px); line-height: 1.02; color: var(--ink); text-wrap: balance; }
.lead { margin: 0; color: var(--muted); font-weight: 700; font-size: clamp(15px, 2.2vw, 18px); max-width: 70ch; }

/* hra */
.player { display: flex; flex-direction: column; gap: 10px; }
.player-bar {
  position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 22px; background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow);
}
.player-title { flex: 1; min-width: 0; font-family: var(--head); font-weight: 800; font-size: clamp(18px, 3vw, 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.stage { border-radius: 22px; overflow: hidden; background: var(--surface); border: 3px solid var(--line); box-shadow: var(--shadow); }
#gameFrame { width: 100%; height: 640px; border: 0; display: block; background: var(--bg); }
.loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 240px; color: var(--muted); font-weight: 800; font-size: 18px; margin: 0; padding: 16px; text-align: center; }
.loading::before { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 5px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
.loading.err::before { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.player:fullscreen, .player.fs { background: var(--bg); padding: 10px; overflow: auto; }
.player.fs { position: fixed; inset: 0; z-index: 50; }

/* texty o hře */
.info {
  display: grid; gap: 4px 28px; grid-template-columns: 1fr; padding: clamp(16px, 3vw, 28px);
  border-radius: 26px; background: var(--surface); border: 3px solid var(--line); box-shadow: var(--shadow);
}
.info h2, .more h2, .foot h2 { margin: 10px 0 4px; font-family: var(--head); font-weight: 800; font-size: 26px; line-height: 1.15; }
.info p { margin: 0 0 10px; }
.info ul { margin: 0 0 10px; padding-left: 22px; }
.info li { margin: 4px 0; }
.info li::marker { color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.tag { font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--tc, var(--accent)) 22%, var(--surface)); border: 2px solid color-mix(in srgb, var(--tc, var(--accent)) 55%, transparent); }
.tag.cat { color: #fff; background: var(--tc); border-color: transparent; }
@media (min-width: 860px) { .info { grid-template-columns: 1.3fr 1fr; } .info .col2 { padding-top: 2px; } }

/* další hry */
.more { display: flex; flex-direction: column; gap: 10px; }
.more h2 { padding: 0 4px; margin: 6px 0 0; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.grid a {
  --cat: var(--accent);
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 8px 8px 12px; text-decoration: none; color: var(--ink);
  border-radius: 20px; background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 3px solid color-mix(in srgb, var(--cat) 35%, var(--line)); box-shadow: var(--shadow);
  transition: transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s;
}
.grid a:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: var(--shadow-lift); }
.grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; border-radius: 14px; background: #000; }
.grid b { font-family: var(--head); font-weight: 800; font-size: 20px; line-height: 1.1; padding: 0 4px; }
.grid small { color: var(--muted); font-size: 13.5px; line-height: 1.35; padding: 0 4px; font-weight: 700; }
.grid .c { align-self: flex-start; margin: 0 4px; font-size: 12px; font-weight: 800; color: #fff; background: var(--cat); padding: 2px 9px; border-radius: 999px; }

/* patička */
.foot { margin-top: 12px; padding: clamp(16px, 3vw, 26px); border-radius: 26px; background: var(--surface); border: 3px solid var(--line); box-shadow: var(--shadow); font-size: 15px; }
.foot h2 { margin-top: 0; font-size: 22px; }
.foot .cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 20px; }
.foot h3 { margin: 10px 0 4px; font-family: var(--head); font-size: 18px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 3px 0; }
.foot a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
.foot .copy { margin: 16px 0 0; color: var(--muted); font-weight: 700; }

@media (min-width: 700px) { .grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  body { padding-top: 10px; font-size: 16px; }
  .brand b { font-size: 22px; }
  .brand svg { width: 40px; height: 40px; }
  .top .home-txt { display: none; }
  .pill { font-size: 16px; padding: 8px 10px 6px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid b { font-size: 17px; }
  .grid small { display: none; }
}
@media (max-width: 360px) { .brand b { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }