/* ============ Powrót do PRL-u — PRL-form / Polish poster aesthetic ============ */
:root {
  --musztarda: #d9a514;
  --cegla: #b5432f;
  --mleczna-mieta: #9fd3bc;
  --mieta-ciemna: #2f6b55;
  --papier: #efe5c8;
  --papier-ciemny: #d8c79a;
  --atrament: #2a2118;
  --pieczec: #a32638;
  --noc: #14100c;
  font-size: clamp(8px, 1.05vw, 16px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--noc);
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--atrament);
  overflow: hidden;
  height: 100vh;
  display: grid;
  place-items: center;
}

#stage {
  position: relative;
  aspect-ratio: 3 / 2;
  width: min(100vw, 150vh);
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 8rem rgba(0,0,0,.9);
  user-select: none;
}

/* film grain over everything */
#grain {
  position: absolute; inset: 0; z-index: 90; pointer-events: none;
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-jitter .45s steps(3) infinite;
}
@keyframes grain-jitter { 0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)} }

/* ================= TITLE SCREEN ================= */
#title-screen {
  position: absolute; inset: 0; z-index: 10;
  background: url('../assets/img/bg_title.png') center / cover;
  display: flex; flex-direction: column; align-items: center;
}
.title-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(10,6,2,.75) 100%); }
.title-block { position: relative; text-align: center; margin-top: 3rem; animation: title-drop 1.1s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes title-drop { from { opacity: 0; transform: translateY(-3rem) rotate(-2deg); } to { opacity: 1; transform: none; } }
.title-kicker {
  display: inline-block; font-family: 'IBM Plex Sans'; font-weight: 600; font-size: 1.05rem;
  letter-spacing: .35em; text-transform: uppercase; color: var(--papier);
  background: var(--pieczec); padding: .3rem 1.2rem; transform: rotate(-1.5deg);
  box-shadow: .3rem .3rem 0 rgba(0,0,0,.45);
}
.title-logo {
  font-family: 'Staatliches', sans-serif; font-size: 7.2rem; line-height: .85;
  color: var(--musztarda); text-shadow: .45rem .45rem 0 var(--cegla), .9rem .9rem 1.5rem rgba(0,0,0,.8);
  margin-top: 1.2rem; letter-spacing: .02em;
}
.title-logo span { color: var(--papier); }
.title-sub { margin-top: 1rem; color: var(--mleczna-mieta); font-size: 1.3rem; font-style: italic; text-shadow: 0 .15rem .6rem #000; }
.title-menu { position: relative; margin-top: auto; margin-bottom: 4.5rem; display: flex; gap: 2rem; }
.title-footnote { position: absolute; bottom: 1rem; right: 1.4rem; color: rgba(239,229,200,.65); font-size: .85rem; font-style: italic; }

/* rubber-stamp buttons */
.stamp-btn {
  font-family: 'Staatliches', sans-serif; font-size: 1.7rem; letter-spacing: .08em;
  color: var(--papier); background: var(--pieczec);
  border: .22rem solid var(--papier); outline: .35rem solid var(--pieczec);
  padding: .55rem 2.4rem; cursor: pointer; transform: rotate(-1deg);
  box-shadow: .4rem .5rem 0 rgba(0,0,0,.5);
  transition: transform .12s, box-shadow .12s;
}
.stamp-btn:nth-child(2n) { transform: rotate(1.2deg); }
.stamp-btn:hover { transform: rotate(0deg) scale(1.06); box-shadow: .2rem .25rem 0 rgba(0,0,0,.5); }
.stamp-btn:active { transform: scale(.96); }
.stamp-btn.small { font-size: 1.2rem; padding: .3rem 1.4rem; }

/* ================= GAME ================= */
#game, #scene { position: absolute; inset: 0; }
#scene { background: center / cover no-repeat; transition: filter .3s; }

#ola {
  position: absolute; bottom: 1.5%; height: 52%; left: 50%;
  transform: translateX(-50%); transform-origin: bottom center;
  transition: left 1.1s ease-in-out; z-index: 5; pointer-events: none;
  filter: drop-shadow(0 .6rem .5rem rgba(0,0,0,.45));
}
#ola.flip { transform: translateX(-50%) scaleX(-1); }
#ola.walking { animation: bob .35s ease-in-out infinite alternate; }
@keyframes bob { from { margin-bottom: 0; } to { margin-bottom: .8%; } }

#hotspots { position: absolute; inset: 0; }
.hotspot { position: absolute; cursor: pointer; }
.hotspot.show-hint {
  outline: .25rem dashed rgba(217,165,20,.85); outline-offset: -.25rem;
  background: rgba(217,165,20,.12); border-radius: .5rem;
}

/* hover label — PRL price tag */
#hover-label {
  position: absolute; z-index: 60; pointer-events: none;
  font-family: 'Staatliches', sans-serif; font-size: 1.45rem; letter-spacing: .05em;
  background: var(--papier); color: var(--atrament);
  border: .14rem solid var(--atrament); border-radius: .2rem;
  padding: .15rem .8rem .05rem; transform: translate(-50%, -135%) rotate(-1deg);
  box-shadow: .25rem .3rem 0 rgba(0,0,0,.4);
  white-space: nowrap;
}
#hover-label .verb { color: var(--pieczec); margin-right: .5em; }

/* Ola speech bubble */
#speech {
  position: absolute; z-index: 40; max-width: 44%;
  left: 50%; top: 14%; transform: translateX(-50%);
  font-family: 'Caveat', cursive; font-weight: 600; font-size: 2.1rem; line-height: 1.1;
  color: #fff; text-align: center;
  text-shadow: 0 0 .6rem #000, .12rem .12rem 0 #000, -.12rem .12rem 0 #000, .12rem -.12rem 0 #000;
  cursor: pointer; animation: speech-in .18s ease-out;
}
@keyframes speech-in { from { opacity: 0; transform: translateX(-50%) translateY(.6rem); } }
#speech.npc-voice { color: var(--mleczna-mieta); }

/* action narration — telegram / official-protocol strip, visually distinct from speech */
#caption {
  position: absolute; z-index: 40; max-width: 54%;
  left: 50%; bottom: 21%; transform: translateX(-50%) rotate(-.4deg);
  background: var(--papier); color: var(--atrament);
  border-top: .22rem dashed var(--pieczec);
  border-bottom: .22rem dashed var(--pieczec);
  box-shadow: .35rem .45rem 0 rgba(0,0,0,.5), inset 0 0 2.5rem rgba(216,199,154,.55);
  padding: 1.05rem 1.8rem .75rem;
  font-family: 'IBM Plex Sans', sans-serif; font-style: italic; font-weight: 500;
  font-size: 1.3rem; line-height: 1.5; text-align: center;
  cursor: pointer; animation: caption-in .25s ease-out;
}
#caption::before {
  content: '✻ ✻ ✻';
  position: absolute; top: -.05rem; left: 50%; transform: translate(-50%, -58%);
  background: var(--papier); padding: 0 .8rem;
  font-style: normal; font-size: .85rem; letter-spacing: .45em; color: var(--pieczec);
}
@keyframes caption-in { from { opacity: 0; transform: translateX(-50%) translateY(1rem) rotate(-.4deg); } }

/* HUD */
#hud { position: absolute; top: 1rem; right: 1rem; z-index: 50; display: flex; gap: .8rem; }
.hud-btn {
  font-family: 'Staatliches', sans-serif; font-size: 1.15rem; letter-spacing: .05em;
  background: rgba(42,33,24,.82); color: var(--papier);
  border: .12rem solid var(--papier-ciemny); border-radius: .25rem;
  padding: .35rem .9rem; cursor: pointer; display: flex; align-items: center; gap: .5rem;
  transition: background .15s;
}
.hud-btn:hover { background: var(--pieczec); }

/* ================= INVENTORY — ration-card strip ================= */
#inventory {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: 45; display: flex; align-items: stretch;
  background: var(--papier);
  border: .18rem solid var(--atrament); border-bottom: none;
  border-radius: .6rem .6rem 0 0;
  box-shadow: 0 -.3rem 1.5rem rgba(0,0,0,.5);
  padding: .4rem .6rem .35rem;
  background-image: repeating-linear-gradient(90deg, transparent 0 5.4rem, rgba(42,33,24,.18) 5.4rem calc(5.4rem + 1px));
}
.inv-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: 'Staatliches'; font-size: .95rem; letter-spacing: .25em;
  color: var(--pieczec); border-right: .12rem dashed var(--pieczec);
  padding: 0 .35rem; margin-right: .5rem; display: flex; align-items: center;
}
#inv-slots { display: flex; gap: .4rem; min-width: 5.4rem; min-height: 5rem; }
.inv-item {
  width: 5rem; height: 5rem; cursor: pointer; position: relative;
  border: .14rem solid transparent; border-radius: .4rem;
  display: grid; place-items: center; transition: transform .12s;
}
.inv-item img { max-width: 92%; max-height: 92%; filter: drop-shadow(.12rem .18rem .12rem rgba(0,0,0,.35)); }
.inv-item:hover { transform: scale(1.12) rotate(-2deg); }
.inv-item.selected { border-color: var(--pieczec); background: rgba(163,38,56,.14); animation: sel-pulse 1s infinite; }
@keyframes sel-pulse { 50% { box-shadow: 0 0 0 .3rem rgba(163,38,56,.25); } }
.inv-item.flash { animation: inv-flash .7s ease-out; }
@keyframes inv-flash { 0% { transform: scale(1.7); filter: brightness(2); } }

/* ================= DIALOGUE — stamped official form ================= */
#dialog {
  position: absolute; left: 3%; right: 3%; bottom: 2%;
  z-index: 55; display: flex; gap: 1.2rem;
  background: var(--papier);
  border: .2rem solid var(--atrament);
  box-shadow: .5rem .6rem 0 rgba(0,0,0,.55), inset 0 0 4rem rgba(216,199,154,.6);
  padding: 1rem 1.4rem; min-height: 27%;
  background-image: linear-gradient(rgba(163,38,56,.05) 1px, transparent 1px);
  background-size: 100% 1.7rem;
  animation: dlg-in .22s ease-out;
}
@keyframes dlg-in { from { opacity: 0; transform: translateY(1.5rem); } }
.dlg-portrait {
  flex: 0 0 11rem; align-self: flex-end; position: relative;
}
.dlg-portrait img {
  width: 11rem; height: 11rem; object-fit: contain;
  filter: drop-shadow(.2rem .3rem .25rem rgba(0,0,0,.35));
}
.dlg-body { flex: 1; display: flex; flex-direction: column; }
#dlg-name {
  align-self: flex-start;
  font-family: 'Staatliches'; font-size: 1.5rem; letter-spacing: .12em;
  color: var(--papier); background: var(--mieta-ciemna);
  padding: .1rem 1rem 0; transform: rotate(-.6deg); margin-bottom: .55rem;
  box-shadow: .2rem .25rem 0 rgba(0,0,0,.3);
}
#dlg-line { font-size: 1.45rem; line-height: 1.45; font-weight: 500; cursor: pointer; }
#dlg-choices { margin-top: .9rem; display: flex; flex-direction: column; gap: .35rem; }
.dlg-choice {
  font-family: 'IBM Plex Sans'; font-size: 1.25rem; text-align: left;
  background: none; border: none; cursor: pointer; color: var(--pieczec);
  padding: .15rem .4rem; border-radius: .3rem; transition: background .12s, padding-left .12s;
}
.dlg-choice::before { content: '» '; font-weight: 700; }
.dlg-choice:hover { background: rgba(163,38,56,.12); padding-left: 1rem; }
.dlg-choice.used { color: rgba(42,33,24,.45); }

/* ================= CUTSCENE ================= */
#cutscene {
  position: absolute; inset: 0; z-index: 70;
  background: rgba(12,8,5,.88);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 0 12%; cursor: pointer;
}
#cutscene-text {
  font-family: 'IBM Plex Sans'; font-size: 2rem; font-style: italic; line-height: 1.6;
  color: var(--papier); max-width: 60ch;
  animation: cut-in .5s ease-out;
}
@keyframes cut-in { from { opacity: 0; transform: translateY(1rem); } }
.cutscene-hint { position: absolute; bottom: 2.2rem; font-size: 1rem; color: rgba(239,229,200,.5); letter-spacing: .2em; text-transform: uppercase; }

/* ================= TIME TRAVEL FX ================= */
#travel-fx { position: absolute; inset: 0; z-index: 80; background: #06040a; display: grid; place-items: center; }
.travel-swirl {
  width: 32rem; height: 32rem; border-radius: 50%;
  background: conic-gradient(var(--musztarda), var(--cegla), var(--mleczna-mieta), #3a6ea5, var(--musztarda));
  filter: blur(1.2rem) saturate(1.4);
  animation: swirl 4s cubic-bezier(.45,0,.9,.4) forwards;
}
@keyframes swirl {
  0% { transform: rotate(0) scale(.05); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: rotate(1800deg) scale(4.5); opacity: 1; }
}

/* ================= TOAST ================= */
#toast {
  position: absolute; top: 1rem; left: 50%; transform: translateX(-50%) rotate(-1deg);
  z-index: 65; font-family: 'Staatliches'; font-size: 1.3rem; letter-spacing: .06em;
  background: var(--musztarda); color: var(--atrament);
  border: .15rem solid var(--atrament); padding: .4rem 1.5rem .25rem;
  box-shadow: .3rem .4rem 0 rgba(0,0,0,.5); animation: toast-in .3s ease-out;
}
@keyframes toast-in { from { transform: translateX(-50%) translateY(-3rem) rotate(-1deg); } }

/* ================= PRL-OPEDIA ================= */
#opedia {
  position: absolute; inset: 0; z-index: 75; background: rgba(12,8,5,.7);
  display: grid; place-items: center;
}
.opedia-card {
  width: 72%; max-height: 84%; overflow-y: auto;
  background: var(--papier); border: .2rem solid var(--atrament);
  box-shadow: .6rem .7rem 0 rgba(0,0,0,.55);
  padding: 1.6rem 2.2rem;
}
.opedia-card h2 {
  font-family: 'Staatliches'; font-size: 2.6rem; color: var(--pieczec);
  letter-spacing: .1em; border-bottom: .18rem dashed var(--pieczec);
  margin-bottom: 1rem;
}
.opedia-entry { margin-bottom: 1.2rem; }
.opedia-entry h3 { font-family: 'Staatliches'; font-size: 1.6rem; color: var(--mieta-ciemna); letter-spacing: .06em; }
.opedia-entry p { font-size: 1.2rem; line-height: 1.5; }
.opedia-empty { font-style: italic; font-size: 1.2rem; opacity: .7; margin-bottom: 1.2rem; }
#opedia-close { margin-top: .5rem; }

/* ================= END CARD ================= */
#endcard {
  position: absolute; inset: 0; z-index: 85; background: var(--noc);
  display: grid; place-items: center;
}
.endcard-inner { text-align: center; max-width: 64%; animation: cut-in .8s ease-out; }
.endcard-inner h2 {
  font-family: 'Staatliches'; font-size: 5rem; color: var(--musztarda);
  text-shadow: .3rem .3rem 0 var(--cegla); letter-spacing: .05em; margin-bottom: 1.5rem;
}
.endcard-inner p { color: var(--papier); font-size: 1.5rem; line-height: 1.6; margin-bottom: 1rem; }
.endcard-cta { font-style: italic; color: var(--mleczna-mieta) !important; }
#btn-end-title { margin-top: 1.5rem; }

[hidden] { display: none !important; }