/* Fallout HD – theme inspired by the Fallout 1 interface: rusty metal, amber plates, green terminals */
:root {
  --bg: #0d0c09;
  --metal-1: #3a352b;
  --metal-2: #24211b;
  --metal-3: #15130f;
  --rust: #6b4a2a;
  --amber: #f0c040;
  --amber-dim: #a98a3a;
  --green: #3cf06a;
  --green-dim: #1c7a35;
  --red: #c8281e;
  --text: #d6cdb4;
  --muted: #8f866e;
  --mono: 'Share Tech Mono', 'Consolas', monospace;
  --term: 'VT323', 'Share Tech Mono', monospace;
  --head: 'Oswald', 'Arial Narrow', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 var(--mono);
  background-image:
    radial-gradient(ellipse at 50% 0, rgba(240,192,64,.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px);
}
img.px, .px img { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--amber); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 78vh; display: grid; place-items: center; overflow: hidden; border-bottom: 6px solid var(--metal-3); }
.hero-bg {
  position: absolute; inset: 0; background-size: cover; background-position: 30% 30%;
  image-rendering: pixelated; filter: saturate(.9) brightness(.55); transform: scale(1.05);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,12,9,.2), rgba(13,12,9,.6) 70%, var(--bg)),
              repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
}
.hero-inner { position: relative; z-index: 1; text-align: center; padding: 2rem 1rem; }
.hero-kicker { font-family: var(--head); letter-spacing: .35em; text-transform: uppercase; color: var(--amber-dim); margin: 0; font-size: .9rem; }
.logo {
  font-family: var(--head); font-weight: 700; font-size: clamp(3.5rem, 12vw, 9rem); line-height: .95; margin: .2em 0 .15em;
  letter-spacing: .04em; color: var(--amber);
  background: linear-gradient(180deg, #fff2b0 0%, #f0c040 45%, #9b6a1c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 #2a1c08) drop-shadow(0 0 30px rgba(240,192,64,.25));
}
.logo span {
  background: linear-gradient(180deg, #d9ffe3, var(--green) 50%, #0f6b2a);
  -webkit-background-clip: text; background-clip: text;
}
.hero-sub { font-size: 1.15rem; max-width: 36em; margin: 0 auto 2rem; color: var(--text); text-shadow: 0 2px 4px #000; }

/* Pip-Boy style buttons */
.pip-nav { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.pip-btn {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  padding: .55rem 1.1rem .55rem .7rem; border-radius: 4px; text-decoration: none;
  font: 600 .95rem var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--amber);
  background: linear-gradient(180deg, #4a443a, #2a2620 55%, #1b1915);
  border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 0 #000, 0 4px 10px rgba(0,0,0,.6);
  transition: transform .08s, color .15s;
}
.pip-btn i {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, #ff8a7a, var(--red) 45%, #4a0806);
  box-shadow: 0 0 0 2px #111, 0 0 8px rgba(200,40,30,.6);
}
.pip-btn:hover { color: #fff2b0; }
.pip-btn:active, .pip-btn.on { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 #000; }
.pip-btn.on i { background: radial-gradient(circle at 35% 35%, #b8ffc8, var(--green) 45%, #0a3d17); box-shadow: 0 0 0 2px #111, 0 0 10px rgba(60,240,106,.7); }
button.pip-btn { border: 1px solid #000; }

/* ---------- panels ---------- */
main { max-width: 1240px; margin: 0 auto; padding: 2rem 1rem 0; }
.panel {
  position: relative; margin: 3.5rem 0; padding: 2.6rem 2rem 2rem;
  background:
    radial-gradient(circle at 14px 14px, #6d6555 0 3px, #111 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 14px) 14px, #6d6555 0 3px, #111 3.5px, transparent 4.5px),
    radial-gradient(circle at 14px calc(100% - 14px), #6d6555 0 3px, #111 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #6d6555 0 3px, #111 3.5px, transparent 4.5px),
    radial-gradient(ellipse at 20% 10%, rgba(107,74,42,.35), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(107,74,42,.25), transparent 50%),
    linear-gradient(160deg, var(--metal-1), var(--metal-2) 60%, var(--metal-3));
  border: 2px solid #000; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 60px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.6);
  scroll-margin-top: 1rem;
}
.plate {
  position: absolute; top: -1.15rem; left: 1.5rem; margin: 0;
  font: 700 1.35rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: #1a1306;
  padding: .55rem 1.2rem; border-radius: 3px; border: 2px solid #000;
  background: linear-gradient(180deg, #f6d36a, #c99a2e 60%, #8a6418);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 #000;
}
.plate small { font: 500 .75rem var(--head); letter-spacing: .1em; opacity: .75; margin-left: .5em; }
.lead { color: var(--muted); max-width: 60em; margin-top: 0; }
h3 { font: 600 1.05rem var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin: 0 0 .6rem; }

.two-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } .panel { padding: 2.4rem 1rem 1.4rem; } }

/* green terminal screen */
.terminal {
  position: relative; padding: 1.4rem 1.6rem; border-radius: 18px / 14px;
  background: radial-gradient(ellipse at center, #0c2412 0%, #061209 70%, #020603 100%);
  border: 10px solid #1b1915; outline: 2px solid #000;
  box-shadow: inset 0 0 40px rgba(0,0,0,.9), inset 0 0 12px rgba(60,240,106,.15), 0 0 0 4px #3a352b;
  color: var(--green); font: 1.3rem/1.35 var(--term); text-shadow: 0 0 6px rgba(60,240,106,.55);
  overflow: hidden;
}
.terminal::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
}
.terminal p { margin: 0 0 .8em; }
.t-head { color: #9dffb4; }
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.steps { list-style: none; padding: 0; margin: 0 0 1.6rem; counter-reset: s; }
.steps li { position: relative; padding: 0 0 .8rem 2.4rem; counter-increment: s; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: .1rem; width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center; font: 700 .9rem var(--head); color: #1a1306;
  background: linear-gradient(180deg, #f6d36a, #b88a26); border: 2px solid #000; border-radius: 50%;
}
.steps b { color: var(--amber); font-weight: normal; }

/* status meters */
.meter { margin-bottom: .7rem; }
.meter-top { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); }
.meter-bar { height: 14px; background: #050504; border: 1px solid #000; box-shadow: inset 0 1px 3px #000; border-radius: 2px; overflow: hidden; }
.meter-bar span {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, var(--green) 0 8px, var(--green-dim) 8px 10px);
  box-shadow: 0 0 8px rgba(60,240,106,.5);
}

/* ---------- comparison slider ---------- */
.cmp-block { margin-bottom: 2.4rem; }
.cmp-tabs.scenes { padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,.6); box-shadow: 0 1px 0 rgba(255,255,255,.05); }
.cmp-ctl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
.cmp-head { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: baseline; justify-content: space-between; }
.cmp-head .date { color: var(--muted); font-size: .85rem; }
.cmp-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 .8rem; }
.cmp-tabs .pip-btn { font-size: .8rem; padding: .4rem .9rem .4rem .6rem; }
.cmp {
  position: relative; overflow: hidden; user-select: none; touch-action: pan-y;
  border: 3px solid #000; outline: 6px solid #1b1915; border-radius: 4px; background: #000; cursor: ew-resize;
}
.cmp img { display: block; width: 100%; height: auto; pointer-events: none; }
.cmp .cmp-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.cmp .cmp-top img { width: 100%; height: 100%; object-fit: cover; }
.cmp .handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 4px; margin-left: -2px;
  background: var(--amber); box-shadow: 0 0 10px rgba(240,192,64,.8);
}
.cmp .handle::after {
  content: '◀ ▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  white-space: nowrap; padding: .3rem .5rem; font: 700 .8rem var(--head); color: #1a1306;
  background: linear-gradient(180deg, #f6d36a, #b88a26); border: 2px solid #000; border-radius: 3px;
}
.cmp .tag {
  position: absolute; top: .7rem; padding: .2rem .6rem; font: 600 .8rem var(--head); letter-spacing: .12em;
  text-transform: uppercase; background: rgba(0,0,0,.75); border: 1px solid #000;
}
.cmp .tag.l { left: .7rem; color: var(--text); }
.cmp .tag.r { right: .7rem; color: var(--green); }
.cmp-text { color: var(--muted); margin: .8rem 0 0; max-width: 60em; }
.cmp.zoomable { cursor: ew-resize; }

/* ---------- heads ---------- */
.heads { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.head-card {
  position: relative; background: #000; border: 3px solid #000; outline: 4px solid #1b1915; border-radius: 3px;
  cursor: zoom-in; transition: outline-color .15s, transform .15s;
}
.head-card:hover { outline-color: var(--amber-dim); transform: translateY(-2px); }
.head-card .pic { position: relative; aspect-ratio: 388 / 200; overflow: hidden; }
.head-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.head-card .pic .peek { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.head-card .peek-tag {
  position: absolute; top: .45rem; left: .45rem; opacity: 0; transition: opacity .25s;
  font: 600 .7rem var(--head); letter-spacing: .12em; text-transform: uppercase; padding: .1rem .45rem;
  background: rgba(0,0,0,.8); color: var(--text); border: 1px solid #000;
}
.head-card:hover .peek, .head-card:hover .peek-tag { opacity: 1; }
.head-card .cap {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .45rem .7rem; background: linear-gradient(180deg, #2a2620, #15130f); border-top: 2px solid #000;
}
.head-card .name { font: 600 1rem var(--head); letter-spacing: .08em; color: var(--amber); text-transform: uppercase; }
.head-card .place { font-size: .75rem; color: var(--muted); }
.badge {
  font: 600 .7rem var(--head); letter-spacing: .12em; text-transform: uppercase; padding: .1rem .45rem;
  border: 1px solid currentColor; border-radius: 2px; white-space: nowrap;
}
.badge.wait { color: var(--muted); }
.badge.done { color: var(--green); box-shadow: 0 0 6px rgba(60,240,106,.4); }

/* ---------- critters ---------- */
.filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.filter .pip-btn { font-size: .8rem; padding: .4rem .9rem .4rem .6rem; }
.critters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.crit {
  display: flex; flex-direction: column; background: #0a0907; border: 2px solid #000; outline: 3px solid #1b1915;
  border-radius: 3px; overflow: hidden; cursor: zoom-in;
}
.crit .stage {
  height: 230px; display: grid; place-items: end center; padding: 1rem .5rem 1.2rem;
  background:
    radial-gradient(ellipse 45% 10% at 50% 88%, rgba(0,0,0,.6), transparent 70%),
    radial-gradient(ellipse at 50% 70%, #3b3022 0%, #1d1912 55%, #0a0907 100%);
}
.crit .stage { position: relative; }
.crit .stage img { image-rendering: pixelated; image-rendering: crisp-edges; max-width: 100%; }
.crit .peek-tag { position: absolute; top: .45rem; left: .45rem; opacity: 0; transition: opacity .2s;
  font: 600 .7rem var(--head); letter-spacing: .12em; text-transform: uppercase; padding: .1rem .45rem;
  background: rgba(0,0,0,.8); color: var(--text); border: 1px solid #000; }
.crit .cap { padding: .45rem .7rem; display: flex; justify-content: space-between; align-items: center; gap: .4rem; background: #15130f; border-top: 2px solid #000; }
.crit .name { font: 600 .9rem var(--head); letter-spacing: .06em; color: var(--amber); text-transform: uppercase; }
.crit .file { font-size: .7rem; color: var(--muted); }

/* ---------- dubbing ---------- */
.holotape { display: grid; grid-template-columns: 90px 1fr 90px; gap: 1.6rem; align-items: center; }
.tape-reel {
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, #111 0 10px, #5a5245 11px 14px, #2a2620 15px 34px, #111 35px 38px, #3a352b 39px);
  box-shadow: 0 0 0 3px #000, 0 4px 10px #000; animation: spin 6s linear infinite;
}
.tape-reel::after { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20deg, #000 20deg 30deg, transparent 30deg 140deg, #000 140deg 150deg, transparent 150deg 260deg, #000 260deg 270deg, transparent 270deg); mask: radial-gradient(circle, #000 0 30px, transparent 31px); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .holotape { grid-template-columns: 1fr; } .tape-reel { display: none; } }

/* ---------- log ---------- */
.log { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--amber-dim); }
.log li { position: relative; padding: 0 0 1rem 1.4rem; }
.log li::before { content: ''; position: absolute; left: -9px; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); border: 2px solid #000; }
.log time { color: var(--green); margin-right: .7rem; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.92);
  display: grid; place-items: center; padding: 4rem 1rem 1rem;
}
.lightbox[hidden] { display: none; }
.lb-close { position: absolute; top: 1rem; right: 1rem; }
.lb-body { width: min(1200px, 100%); max-height: calc(100vh - 6rem); overflow: auto; }
.lb-body h3 { font-size: 1.4rem; }
.lb-body .lb-sub { color: var(--muted); margin: -.3rem 0 1rem; }
.lb-body .cmp { width: min(100%, calc((100vh - 12rem) * 1.94)); margin: 0 auto; }
.lb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lb-pair figure { margin: 0; background: #0a0907; border: 2px solid #000; outline: 3px solid #1b1915; }
.lb-pair figcaption { padding: .4rem .7rem; font: 600 .85rem var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); background: #15130f; }
.lb-pair .slot { aspect-ratio: 388 / 200; display: grid; place-items: center; overflow: hidden; }
.lb-pair .slot img { width: 100%; height: 100%; object-fit: contain; }
.lb-pair.sprite .slot { aspect-ratio: 1; background: radial-gradient(ellipse at 50% 70%, #3b3022, #0a0907 75%); }
.lb-pair.sprite .slot img { width: auto; height: auto; max-width: 92%; max-height: 92%; image-rendering: pixelated; }
.lb-pair.sprite .slot img.smooth { image-rendering: auto; }
.standby { position: relative; width: 100%; height: 100%; }
.standby img { filter: grayscale(.3) brightness(.65); }
.standby span {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); white-space: nowrap;
  font: 600 .85rem var(--head); letter-spacing: .14em; text-transform: uppercase; padding: .3rem .7rem;
  background: rgba(0,0,0,.8); color: var(--amber); border: 1px solid var(--amber-dim);
}
@media (max-width: 700px) { .lb-pair { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { margin-top: 4rem; text-align: center; padding: 0 1rem 2.5rem; color: var(--muted); font-size: .85rem; }
.foot-iface { width: min(960px, 100%); display: block; margin: 0 auto 1.5rem; image-rendering: pixelated; filter: drop-shadow(0 -6px 20px rgba(0,0,0,.8)); }
.foot p { max-width: 52em; margin: 0 auto .6rem; }
.war { font: 600 1rem var(--head); letter-spacing: .3em; text-transform: uppercase; color: var(--amber-dim); margin-top: 1.2rem !important; }

/* ---------- top menu + pages ---------- */
.page[hidden] { display: none; }
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 1rem;
  padding: .55rem 1.2rem; border-bottom: 3px solid #000;
  background: linear-gradient(180deg, #3a352b, #24211b 60%, #15130f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.7);
}
.tb-logo {
  font: 700 1.5rem/1 var(--head); letter-spacing: .06em; text-decoration: none; color: var(--amber);
  text-shadow: 0 2px 0 #2a1c08; margin-right: auto;
}
.tb-logo span { color: var(--green); text-shadow: 0 0 8px rgba(60,240,106,.5), 0 2px 0 #062; }
.tb-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.tb-links .pip-btn { font-size: .85rem; padding: .45rem .95rem .45rem .6rem; }
.tb-toggle { display: none; }
@media (max-width: 760px) {
  .tb-toggle { display: inline-flex; }
  .tb-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: .8rem;
    background: #1b1915; border-bottom: 3px solid #000; }
  .tb-links.open { display: flex; }
}
.page > main { padding-top: 2.2rem; }
#page-domov > main { padding-top: 0; }

/* ---------- news ---------- */
.news-item { padding: 0 0 2.2rem; margin-bottom: 2.2rem; border-bottom: 1px solid rgba(0,0,0,.7); box-shadow: 0 1px 0 rgba(255,255,255,.05); }
.news-item:last-child { border-bottom: 0; box-shadow: none; margin-bottom: 0; padding-bottom: 0; }
.news-item header { display: flex; gap: .8rem; align-items: center; margin-bottom: .3rem; }
.news-item time { color: var(--green); font-size: .9rem; }
.news-item h3 { font-size: 1.5rem; margin: 0 0 .5rem; }
.news-item > p { max-width: 62em; }
.news-imgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.news-imgs figure { margin: 0; background: #000; border: 3px solid #000; outline: 4px solid #1b1915; cursor: zoom-in; }
.news-imgs img { display: block; width: 100%; height: auto; }
.news-imgs figcaption { padding: .45rem .7rem; font-size: .8rem; color: var(--muted); background: #15130f; }
.lb-img { display: block; max-width: 100%; max-height: calc(100vh - 9rem); margin: 0 auto; image-rendering: pixelated; }
.teasers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.news-item.teaser { margin: 0; padding: 0 0 1rem; border: 2px solid #000; outline: 3px solid #1b1915; background: #12100c; box-shadow: none; }
.news-item.teaser > *:not(.teaser-img) { padding: 0 1rem; }
.news-item.teaser header { padding-top: .8rem; }
.news-item.teaser h3 { font-size: 1.15rem; }
.news-item.teaser > p:not(:last-child) { color: var(--muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.teaser-img { aspect-ratio: 16 / 8; overflow: hidden; border-bottom: 2px solid #000; background: #000; }
.teaser-img img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

/* ---------- character creator ---------- */
.creator { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.6rem; margin-top: 1.4rem; }
@media (max-width: 900px) { .creator { grid-template-columns: 1fr; } }
.cr-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cr-stage figure { margin: 0; background: #0a0907; border: 2px solid #000; outline: 3px solid #1b1915; display: flex; flex-direction: column; }
.cr-stage figcaption { padding: .4rem .7rem; font: 600 .85rem var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); background: #15130f; }
.cr-stage .new figcaption { color: var(--green); }
.cr-slot {
  flex: 1; min-height: 430px; display: grid; place-items: end center; padding: 1rem .5rem 1.4rem;
  background: radial-gradient(ellipse 50% 9% at 50% 92%, rgba(0,0,0,.5), transparent 70%),
              radial-gradient(ellipse at 50% 65%, #3d4352 0%, #22252d 55%, #0c0d10 100%);
}
.cr-slot img, .cr-slot canvas { max-width: 100%; height: auto; }
.cr-orig { image-rendering: pixelated; image-rendering: crisp-edges; }
.cr-panel h4 { margin: 0 0 .4rem; font: 600 .85rem var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cr-row { margin-bottom: 1rem; transition: opacity .2s; }
.cr-row.off { opacity: .35; pointer-events: none; }
.cr-opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.cr-opts .pip-btn { font-size: .78rem; padding: .38rem .8rem .38rem .55rem; }
.cr-opts .pip-btn i[style] { box-shadow: 0 0 0 2px #111; }
.cr-opts .pip-btn.on { color: #fff2b0; outline: 1px solid var(--amber-dim); }
.cr-opts.dirs .pip-btn { font-size: 1rem; padding: .3rem .7rem .3rem .5rem; }
.cr-note { color: var(--muted); font-size: .8rem; margin: .4rem 0 0; }

/* ---------- inventory ---------- */
.inven { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.inv { background: #0a0907; border: 2px solid #000; outline: 3px solid #1b1915; border-radius: 3px; overflow: hidden; cursor: zoom-in; transition: outline-color .15s, transform .15s; }
.inv:hover { outline-color: var(--amber-dim); transform: translateY(-2px); }
.inv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #000; }
.inv-slot { height: 130px; display: grid; place-items: center; padding: .6rem;
  background: radial-gradient(ellipse at 50% 55%, #2e2a22 0%, #15130f 75%); }
.inv-slot:first-child::before, .inv-slot:last-child::before { position: absolute; }
.inv-slot img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.inv-slot img.px { image-rendering: pixelated; image-rendering: crisp-edges; width: 100%; height: 100%; }
.inv .cap { padding: .45rem .7rem; background: #15130f; border-top: 2px solid #000; }
.inv .name { font: 600 .9rem var(--head); letter-spacing: .05em; color: var(--amber); text-transform: uppercase; }
.inv .file { font-size: .7rem; color: var(--muted); }
.filter .pip-btn small { opacity: .6; margin-left: .2em; }
.cmp.icon { margin: 0 auto; background: radial-gradient(ellipse at 50% 55%, #2e2a22 0%, #15130f 75%); }
.cmp.icon .cmp-top img { image-rendering: pixelated; image-rendering: crisp-edges; object-fit: contain; }
.cmp.icon .cmp-base { object-fit: contain; }

.news-cmp { margin-top: 1.2rem; max-width: 960px; }
.news-cmp img { image-rendering: pixelated; }

/* ---------- engine ---------- */
.eng-h { font-size: 1.25rem; margin: 1.8rem 0 .8rem; }
.eng-h:first-child { margin-top: .4rem; }
#eng-light .cmp img { image-rendering: auto; }
.eng-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1.2rem; }
.eng-video { margin: 0; background: #000; border: 3px solid #000; outline: 4px solid #1b1915; }
.eng-video video { display: block; width: 100%; height: auto; background: #000; }
.eng-video figcaption { padding: .5rem .7rem; font-size: .85rem; color: var(--muted); background: #15130f; }
.eng-video figcaption b { color: var(--amber); font-weight: normal; }
.eng-notes { margin-top: 2rem; }
.eng-limits { font-size: 1.15rem; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.stage { display: flex; gap: 1rem; align-items: flex-start; padding: .8rem 1rem; background: rgba(0,0,0,.25); border: 1px solid #000; border-radius: 3px; }
.stage.now { outline: 2px solid var(--green-dim); box-shadow: 0 0 14px rgba(60,240,106,.15); }
.stage.next { opacity: .8; }
.stage-n { flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; font: 700 1.1rem var(--head); color: #1a1306;
  background: linear-gradient(180deg, #f6d36a, #b88a26); border: 2px solid #000; border-radius: 50%; }
.stage.now .stage-n { background: radial-gradient(circle at 35% 35%, #b8ffc8, var(--green) 45%, #0a3d17); }
.stage-t { font: 600 1.05rem var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.stage p { margin: .2rem 0 0; color: var(--muted); }
@media (max-width: 600px) { .eng-videos { grid-template-columns: 1fr; } }

/* ---- porovnanie: originál vs HD ---- */
.cmp-card { cursor: default; }
.cmp-card:hover { transform: none; }
.cmp-card .cmp { cursor: ew-resize; }
.inv.cmp-card .cmp.icon { width: 100%; height: 200px; }
.inv.cmp-card .cmp.icon .cmp-base, .inv.cmp-card .cmp.icon .cmp-top img { height: 100%; }

/* ---- prepínač jazyka (SK / CZ / EN) ---- */
.lang-switch { display: flex; gap: .35rem; margin-left: auto; align-items: center; }
.lang-switch .pip-btn { font-size: .8rem; padding: .4rem .7rem .4rem .5rem; }
@media (max-width: 860px) { .lang-switch { margin-left: 0; } }
@media (min-width: 861px) and (max-width: 1400px) {
  .tb-links .pip-btn { font-size: .74rem; padding: .4rem .6rem .4rem .45rem; gap: .3rem; }
  .lang-switch .pip-btn { font-size: .72rem; padding: .35rem .5rem .35rem .4rem; }
}

/* ---------- progress page ---------- */
.hotove { --c: #3cf06a; } .caka { --c: #f0c040; } .robi { --c: #e07a2c; } .nic { --c: #6f6857; }
.prog-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin: 1rem 0; }
.prog-num { padding: .6rem .9rem; background: rgba(0,0,0,.3); border: 1px solid #000; border-left: 4px solid var(--c); }
.prog-num strong { display: block; font: 700 2.4rem/1.1 var(--head); color: var(--c); }
.prog-num span { font-size: .82rem; color: var(--muted); }
.prog-bar { display: flex; gap: 2px; height: 18px; margin-bottom: 1.2rem; background: #000; border: 2px solid #000; }
.prog-bar span { background: var(--c); }
.prog-bar .nic { background: repeating-linear-gradient(45deg, #3a362c 0 5px, #2a2720 5px 10px); }
.prog-area { margin: 1.6rem 0 .6rem; font: 600 1.15rem var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.prog-area small { margin-left: .6em; font: 400 .8rem var(--mono); letter-spacing: 0; color: var(--muted); }
.prog-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.prog-tile { display: flex; flex-direction: column; padding: 0; font: inherit; color: inherit; text-align: left; background: rgba(0,0,0,.32); border: 1px solid #000; border-top: 4px solid var(--c); cursor: pointer; }
.prog-tile:hover, .prog-tile:focus-visible { outline: 2px solid #fff2b0; }
.prog-tile.nic { border-top-style: dashed; }
.prog-img { height: 140px; background: #0a0907; overflow: hidden; }
.prog-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prog-img img.fit { object-fit: contain; }
.prog-tile.nic .prog-img img { filter: grayscale(1) brightness(.6); }
.prog-body { padding: .6rem .8rem .75rem; }
.prog-st { font-size: .8rem; color: var(--c); }
.prog-st b { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: .4em; color: #111; background: var(--c); border-radius: 2px; }
.prog-body h4, .prog-lb h3 { margin: .2rem 0 .25rem; font: 600 1.02rem var(--head); letter-spacing: .04em; color: var(--text); }
.prog-body p { margin: 0; font-size: .86rem; color: var(--muted); }
.prog-lb img { display: block; max-width: 100%; max-height: 66vh; margin: 0 auto .8rem; }
.prog-lb img.px { min-width: 200px; image-rendering: pixelated; }
@media (max-width: 700px) { .prog-sum { grid-template-columns: repeat(2, 1fr); } }