/* =========================================================================
   PREHISTORIK — shell, HUD a obrazovky
   Vizuální směr: uhel + kost + okr. Vytesané, ne prosklené.
   ========================================================================= */

:root {
  /* povrchy */
  --ink:        #12100e;
  --ink-2:      #191612;
  --ink-3:      #221d18;
  --soot:       #0a0908;

  /* text */
  --bone:       #f0e6d2;
  --bone-dim:   #a89b84;
  --bone-mute:  #6b6152;

  /* akcenty */
  --ochre:      #e0912f;
  --ochre-lo:   #a5651c;
  --moss:       #7fa650;
  --blood:      #c2452d;
  --sky:        #6fa8c7;

  --edge:       rgba(240,230,210,.14);
  --edge-soft:  rgba(240,230,210,.07);

  --font-ui: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  --heart-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.3C6.1 17.1 2.5 13.3 2.5 9.2 2.5 6.3 4.8 4 7.6 4c1.8 0 3.4.9 4.4 2.4C13 4.9 14.6 4 16.4 4c2.8 0 5.1 2.3 5.1 5.2 0 4.1-3.6 7.9-9.5 12.1z' fill='%23000'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--soot);
  color: var(--bone);
  font-family: var(--font-ui);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

body::before {
  /* jemné zrno na celé ploše, aby černá nebyla mrtvá */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .035;
  background-image: repeating-conic-gradient(#fff 0% 25%, #000 0% 50%);
  background-size: 3px 3px;
}

#app {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
}

/* ------------------------------- STAGE ---------------------------------- */

#stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  container-type: size;
  container-name: stage;
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.9), 0 40px 120px -40px rgba(0,0,0,.9);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#scanlines {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity .3s;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px,
      transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}
#stage.scanlines #scanlines { opacity: 1; }

/* radiální ztmavení rohů — dělá to obraz „hlubší" */
#stage::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.55) 100%);
}

/* ================================ HUD ==================================== */

.hud {
  position: absolute; inset: 0;
  z-index: 10;
  pointer-events: none;
  padding: 2.4cqw 2.8cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 2.6cqw;
  text-shadow: 0 .18em 0 rgba(0,0,0,.75);
}
.hud[hidden] { display: none; }

.hud__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2cqw; }
.hud__row--bottom { align-items: flex-end; }
.hud__cluster { display: flex; align-items: center; gap: 1.2cqw; }
.hud__cluster--center { flex: 1; justify-content: center; }
.hud__cluster--right { flex-direction: column; align-items: flex-end; gap: .6cqw; }

/* srdce — tvar dělá jedna SVG maska, barvu obyčejné pozadí,
   takže „plné" a „prázdné" je jen změna barvy */
.hearts { display: flex; gap: .55cqw; }
.heart {
  width: 2.6cqw; height: 2.6cqw;
  min-width: 10px; min-height: 10px;
  background: var(--blood);
  -webkit-mask: var(--heart-shape) center / contain no-repeat;
  mask: var(--heart-shape) center / contain no-repeat;
  filter: drop-shadow(0 .1em 0 rgba(0,0,0,.6));
  transition: transform .18s var(--ease-out), background .18s;
}
.heart--empty { background: #3a2e28; opacity: .8; }
.heart--pop { animation: heartPop .34s var(--ease-out); }
@keyframes heartPop {
  0% { transform: scale(1.9) rotate(-8deg); }
  60% { transform: scale(.86); }
  100% { transform: scale(1); }
}

.chip {
  font-family: var(--font-num);
  font-size: 2.4cqw;
  font-weight: 700;
  color: var(--bone-dim);
  letter-spacing: .04em;
}
.chip__glyph { color: var(--bone-mute); margin-right: .2em; }

/* kvóta jídla */
.quota { display: flex; flex-direction: column; align-items: center; gap: .5cqw; width: 26cqw; }
.quota__bar {
  width: 100%; height: 1.1cqw;
  background: rgba(0,0,0,.55);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.quota__bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ochre-lo), var(--ochre));
  transition: width .35s var(--ease-out);
}
.quota__bar.is-full i { background: linear-gradient(90deg, var(--moss), #b7e07a); }
.quota__text {
  font-family: var(--font-num);
  font-size: 2.3cqw; font-weight: 700;
  letter-spacing: .06em;
  display: flex; align-items: baseline; gap: .35em;
}
.quota__sep { color: var(--bone-mute); }
#hud-quota { color: var(--bone-dim); }
.quota__label { font-family: var(--font-ui); font-size: 1.7cqw; color: var(--bone-mute); letter-spacing: .22em; margin-left: .4em; }

/* skóre / čas */
.stat { display: flex; align-items: baseline; gap: .6cqw; }
.stat__label { font-size: 1.7cqw; letter-spacing: .22em; color: var(--bone-mute); }
.stat__value { font-family: var(--font-num); font-weight: 700; font-size: 3cqw; letter-spacing: .02em; }
.stat--time .stat__value { color: var(--bone-dim); }
.stat--time.is-low .stat__value { color: var(--blood); animation: tick 1s steps(2) infinite; }
@keyframes tick { 50% { opacity: .35; } }

/* level + biom */
.level-tag { display: flex; align-items: baseline; gap: .8cqw; }
.level-tag__num {
  font-family: var(--font-num); font-weight: 700; font-size: 3.4cqw;
  color: var(--ochre);
}
.level-tag__biome { font-size: 1.8cqw; letter-spacing: .24em; color: var(--bone-mute); }

.combo {
  font-family: var(--font-num); font-weight: 700; font-size: 4cqw;
  color: var(--ochre);
  animation: comboIn .3s var(--ease-out);
}
@keyframes comboIn { from { transform: scale(1.7) rotate(6deg); opacity: 0; } }

.toast {
  position: absolute; left: 50%; top: 30%;
  transform: translateX(-50%);
  font-size: 3.2cqw; font-weight: 800;
  letter-spacing: .16em;
  color: var(--bone);
  animation: toastIn .5s var(--ease-out);
}
@keyframes toastIn { from { transform: translateX(-50%) translateY(1.4em); opacity: 0; } }

/* ============================= SCREENS =================================== */

#screens { position: absolute; inset: 0; z-index: 20; }

.screen {
  position: absolute; inset: 0;
  display: none;
  place-items: center;
  pointer-events: auto;
}
.screen.is-active { display: grid; animation: screenIn .28s var(--ease-out); }
@keyframes screenIn { from { opacity: 0; } }

.screen--dim { background: rgba(8,7,6,.82); backdrop-filter: blur(2px); }
.screen--panel { background: rgba(8,7,6,.9); }
.screen--boot { background: var(--soot); }

/* ------------------------------ BOOT ------------------------------------ */
.boot { display: grid; justify-items: center; gap: 3cqw; }
.boot__mark {
  font-size: 14cqw; font-weight: 900; line-height: 1;
  color: var(--ink-3);
  -webkit-text-stroke: .3cqw var(--ochre);
  animation: bootPulse 1.6s var(--ease-in-out) infinite;
}
@keyframes bootPulse { 50% { color: var(--ink); opacity: .7; } }
.boot__bar { width: 34cqw; height: .9cqw; background: var(--ink-2); }
.boot__bar i { display: block; height: 100%; width: 0%; background: var(--ochre); transition: width .2s linear; }
.boot__text { font-size: 1.8cqw; letter-spacing: .24em; color: var(--bone-mute); }

/* ------------------------------ TITLE ----------------------------------- */

.screen--title {
  background:
    linear-gradient(105deg, rgba(8,7,6,.96) 0%, rgba(8,7,6,.82) 42%, rgba(8,7,6,.18) 72%, transparent 100%);
  place-items: stretch;
}

.title-wrap {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 3cqh;
  padding: 6cqh 0 4cqh 7cqw;
  width: min(62cqw, 100%);
}

.brand { display: grid; gap: 1.2cqh; }
.brand__eyebrow {
  font-size: 1.7cqw; letter-spacing: .42em; color: var(--ochre);
  font-weight: 600;
}
.brand__title {
  margin: 0;
  font-size: 11cqw;
  line-height: .84;
  font-weight: 900;
  letter-spacing: -.035em;
  color: var(--bone);
  position: relative;
  text-shadow:
     .06em .06em 0 var(--ink-3),
     .12em .12em 0 rgba(0,0,0,.6);
}
/* vytesaný dvojtisk — ne neon, ne gradient */
.brand__title::before {
  content: attr(data-text);
  position: absolute; left: -.02em; top: -.03em;
  color: transparent;
  -webkit-text-stroke: .012em var(--ochre);
  opacity: .55;
  pointer-events: none;
}
.brand__rule { height: 2px; width: 18cqw; background: var(--ochre); }
.brand__sub { margin: 0; font-size: 2.1cqw; color: var(--bone-dim); letter-spacing: .04em; }

.menu { display: grid; align-content: center; gap: .2cqh; }
.menu__item {
  all: unset;
  display: grid;
  grid-template-columns: 4.5cqw 1fr auto;
  align-items: baseline;
  gap: 1.6cqw;
  padding: 1.1cqh 1.4cqw;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .18s, border-color .18s, transform .18s var(--ease-out);
}
.menu__item[hidden] { display: none; }
.menu__idx { font-family: var(--font-num); font-size: 1.6cqw; color: var(--bone-mute); }
.menu__label { font-size: 3.1cqw; font-weight: 700; letter-spacing: .02em; color: var(--bone-dim); transition: color .18s; }
.menu__meta { font-size: 1.7cqw; color: var(--bone-mute); letter-spacing: .1em; opacity: 0; transition: opacity .18s; }

.menu__item:hover,
.menu__item.is-sel {
  background: linear-gradient(90deg, rgba(224,145,47,.14), transparent 70%);
  border-left-color: var(--ochre);
  transform: translateX(.8cqw);
}
.menu__item:hover .menu__label,
.menu__item.is-sel .menu__label { color: var(--bone); }
.menu__item:hover .menu__meta,
.menu__item.is-sel .menu__meta { opacity: 1; }
.menu__item:focus-visible { outline: 2px solid var(--ochre); outline-offset: -2px; }

.title-foot { display: flex; align-items: center; justify-content: space-between; padding-right: 7cqw; }
.title-foot__hint { font-size: 1.6cqw; color: var(--bone-mute); letter-spacing: .14em; }

.lang {
  all: unset; cursor: pointer;
  display: flex; gap: .4em;
  font-size: 1.7cqw; font-weight: 700; letter-spacing: .1em;
  color: var(--bone-mute);
  padding: .4em .6em;
}
.lang [data-lang] { transition: color .18s; }
.lang [data-lang].is-on { color: var(--ochre); }
.lang__sep { opacity: .4; }

/* ------------------------------ PANEL ----------------------------------- */

.panel {
  width: min(70cqw, 92%);
  max-height: 86cqh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2.4cqh;
  padding: 4cqh 4cqw;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--edge), 0 3cqh 8cqh -2cqh rgba(0,0,0,.8);
}
.panel--tight { width: min(46cqw, 88%); }

.panel__title {
  margin: 0;
  font-size: 4.4cqw; font-weight: 900; letter-spacing: -.01em;
  color: var(--bone);
}
.panel__title::after {
  content: ""; display: block; height: 2px; width: 3em; margin-top: .5em;
  background: var(--ochre);
}
.panel__body { overflow-y: auto; display: grid; gap: 1.6cqh; align-content: start; }
.panel__body--menu { gap: 1cqh; }
.panel__foot { display: flex; gap: 1.2cqw; justify-content: flex-end; }

.btn {
  all: unset;
  cursor: pointer;
  padding: 1.1cqh 2.2cqw;
  font-size: 2.1cqw; font-weight: 700; letter-spacing: .12em;
  color: var(--bone-dim);
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--edge);
  text-align: center;
  transition: background .16s, color .16s, transform .16s var(--ease-out);
}
.btn:hover, .btn.is-sel { background: var(--ink-3); color: var(--bone); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.btn--primary { background: var(--ochre); color: #1a1206; box-shadow: none; }
.btn--primary:hover, .btn--primary.is-sel { background: #f2a742; color: #1a1206; }
.btn--danger:hover { color: var(--blood); }

/* volby */
.opt {
  display: grid;
  grid-template-columns: 14cqw 1fr auto;
  align-items: center;
  gap: 1.6cqw;
  font-size: 2cqw;
  padding: .6cqh 0;
  border-bottom: 1px solid var(--edge-soft);
}
.opt__label { color: var(--bone-dim); letter-spacing: .06em; }
.opt output { font-family: var(--font-num); color: var(--bone); min-width: 3ch; text-align: right; }

.opt input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1cqh; background: var(--ink-3); cursor: pointer;
}
.opt input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.6cqw; height: 2.6cqh; background: var(--ochre); cursor: pointer;
}
.opt input[type=range]::-moz-range-thumb {
  border: 0; border-radius: 0;
  width: 1.6cqw; height: 2.6cqh; background: var(--ochre); cursor: pointer;
}

.opt--seg { grid-template-columns: 14cqw 1fr; }
.seg { display: flex; gap: 1px; background: var(--edge-soft); }
.seg button {
  all: unset; cursor: pointer; flex: 1; text-align: center;
  padding: .9cqh 0; font-size: 1.7cqw; font-weight: 700; letter-spacing: .12em;
  background: var(--ink-2); color: var(--bone-mute);
  transition: background .16s, color .16s;
}
.seg button:hover { color: var(--bone-dim); }
.seg button.is-on { background: var(--ochre); color: #1a1206; }

.opt--switch { grid-template-columns: 1fr auto; cursor: pointer; }
.opt--switch input { position: absolute; opacity: 0; pointer-events: none; }
.sw {
  width: 5cqw; height: 2.4cqh;
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--edge);
  position: relative;
  transition: background .18s;
}
.sw::after {
  content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px;
  width: calc(50% - 3px);
  background: var(--bone-mute);
  transition: transform .18s var(--ease-out), background .18s;
}
.opt--switch input:checked + .sw { background: rgba(224,145,47,.22); }
.opt--switch input:checked + .sw::after { transform: translateX(100%); background: var(--ochre); }
.opt--switch input:focus-visible + .sw { outline: 2px solid var(--ochre); outline-offset: 2px; }

/* ovládání */
.keys { grid-template-columns: 1fr 1fr; gap: 1.2cqh 3cqw; }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; font-size: 1.9cqw; border-bottom: 1px solid var(--edge-soft); padding-bottom: .8cqh; }
.key-row__what { color: var(--bone-dim); }
.key-row__keys { display: flex; gap: .5cqw; }
kbd {
  font-family: var(--font-num); font-size: 1.6cqw;
  padding: .3em .6em;
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--edge), 0 2px 0 rgba(0,0,0,.5);
  color: var(--bone);
}

/* skóre */
.scores { list-style: none; margin: 0; padding: 0; display: grid; gap: .8cqh; counter-reset: s; }
.scores li {
  display: grid; grid-template-columns: 3cqw 1fr auto auto; gap: 1.6cqw; align-items: baseline;
  font-size: 2cqw; padding-bottom: .7cqh; border-bottom: 1px solid var(--edge-soft);
  counter-increment: s;
}
.scores li::before { content: counter(s,decimal-leading-zero); font-family: var(--font-num); color: var(--bone-mute); font-size: 1.6cqw; }
.scores li.is-new { color: var(--ochre); }
.scores__score { font-family: var(--font-num); font-weight: 700; }
.scores__lvl { color: var(--bone-dim); font-size: 1.7cqw; letter-spacing: .1em; }
.scores__date { color: var(--bone-mute); font-size: 1.5cqw; font-family: var(--font-num); }
.scores__empty { color: var(--bone-mute); font-size: 1.9cqw; }

/* výsledková tabulka po levelu */
.clear-head { display: grid; gap: .6cqh; }
.clear-head__kicker { font-size: 1.7cqw; letter-spacing: .34em; color: var(--moss); font-weight: 600; }
.clear-head__kicker--bad { color: var(--blood); }

.tally { margin: 0; display: grid; gap: .9cqh; }
.tally__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; font-size: 2cqw; }
.tally__row::after {
  content: ""; flex: 1; order: 1;
  border-bottom: 1px dotted var(--bone-mute); opacity: .4;
  margin: 0 .6cqw; transform: translateY(-.25em);
}
.tally__row dt { color: var(--bone-dim); order: 0; }
.tally__row dd { margin: 0; order: 2; font-family: var(--font-num); font-weight: 700; }
.tally__row--total { font-size: 2.6cqw; padding-top: .8cqh; border-top: 1px solid var(--edge); }
.tally__row--total dd { color: var(--ochre); }

/* ------------------------------ TOUCH ----------------------------------- */

.touch {
  position: absolute; inset: 0;
  z-index: 15;
  pointer-events: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 3cqw;
}
.touch[hidden] { display: none; }
.touch__pad, .touch__acts { display: flex; gap: 2cqw; pointer-events: auto; }
.tbtn {
  all: unset;
  width: 11cqw; height: 11cqw;
  display: grid; place-items: center;
  font-size: 3.4cqw;
  color: var(--bone);
  background: rgba(18,16,14,.45);
  box-shadow: inset 0 0 0 1px var(--edge);
  border-radius: 50%;
  touch-action: none;
  user-select: none;
}
.tbtn:active, .tbtn.is-down { background: rgba(224,145,47,.4); }
.tbtn--big { width: 13cqw; height: 13cqw; font-size: 4cqw; }
.tbtn--pause {
  position: absolute; top: 3cqw; right: 3cqw;
  width: 7cqw; height: 7cqw; font-size: 2.2cqw;
  pointer-events: auto;
}

/* ------------------------------ MISC ------------------------------------ */

.noscript {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--soot); color: var(--bone); font-size: 18px; z-index: 200;
}

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

/* velmi malá okna: menu se srovná doprostřed */
@container stage (max-width: 520px) {
  .title-wrap { width: 86cqw; padding-left: 7cqw; }
  .brand__title { font-size: 13cqw; }
}