/* Minte VN — Faza 0. Styl inspirowany silnikiem Vinci (ciemny, VN), dane-driven. */
/* Font gry (jak w oryginale RPG Maker): M+ 1m, monospace */
@font-face {
  font-family: "MPlus1m";
  src: url("../assets/common/fonts/mplus-1m-regular.woff") format("woff");
  font-weight: normal; font-display: swap;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #05070d; overflow: hidden; }
body { font-family: "MPlus1m", "Segoe UI", Verdana, sans-serif; color: #eaf0f7; }

/* Scena 16:9, wyśrodkowana, letterbox */
#stage {
  position: absolute; inset: 0; margin: auto;
  width: min(100vw, 177.78vh); height: min(56.25vw, 100vh);
  background: #000; overflow: hidden; user-select: none;
}
.layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.menu-bg { object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.bg { object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.portrait { object-fit: cover; opacity: 0; transition: opacity .28s ease; pointer-events: none; }
/* Tint ekranu (kod 223): multiply — biel=brak zmian, czerń=czarny ekran, [-r,-g,0]=chłód.
   Nad tłem+portretem, POD dymkiem/wyborami (okno dialogu nie jest ściemniane, jak w MZ). */
#tint { background: #fff; mix-blend-mode: multiply; pointer-events: none; }
#fade { background: #05070d; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.hidden { display: none !important; }

/* Dymek dialogowy — wąskie, wyśrodkowane okno z „poszarpaną" czarną krawędzią
   (jak oryginalny window skin). Imię NIE jest wyświetlane — jest wtopione w portret,
   dlatego okno jest węższe i niżej, żeby nie zasłaniać portretu ani jego tabliczki. */
#dialog {
  position: absolute; left: 50%; bottom: 4.5%; transform: translateX(-50%);
  width: clamp(300px, 52%, 680px); padding: 26px 40px 30px;
  cursor: pointer; text-align: center;
}
/* Tło = oryginalny asset okna (msgimg_0, przycięty) jako 9-slice border-image,
   dzięki czemu poszarpana krawędź zostaje ostra przy dowolnej wysokości tekstu. */
#dialog::before {
  content: ""; position: absolute; inset: -4px;
  border: 30px solid transparent;
  border-image: url(../assets/common/ui/textbox.png) 30 fill stretch;
  pointer-events: none;
}
#text {
  position: relative; z-index: 1;
  font-size: clamp(15px, 2.15vw, 26px); line-height: 1.42; color: #f4f6fa;
  white-space: pre-line; /* zachowaj łamanie linii z oryginału */
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
#next {
  position: relative; z-index: 1; margin-top: 10px;
  color: #e6ecf5; font-size: clamp(14px, 1.8vw, 20px);
  animation: pulse 1.1s ease-in-out infinite; pointer-events: none;
}
@keyframes pulse { 0%,100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(2px); } }

/* Wybory — styl jak menu tytułowe (M+, gold hover), ciemniejsze tło pod napisami.
   Pojawiają się NAD dymkiem (dymek z ostatnią kwestią zostaje widoczny). */
#choices {
  position: absolute; left: 0; right: 0; bottom: 29%;
  display: flex; justify-content: center; padding: 0 5%;
}
/* wrapper: szerokość = najdłuższa opcja (fit-content); przyciski wypełniają go w 100% */
.choices-inner {
  display: flex; flex-direction: column; gap: 12px;
  width: fit-content; min-width: min(300px, 62%); max-width: 88%;
}
/* wygląd wspólny z .menu-item (patrz niżej); tu tylko rozmiar */
.choice-btn {
  width: 100%; font-size: clamp(15px, 2vw, 23px); padding: 13px 44px;
}

/* Ikonka opcji w grze */
#btn-gear {
  position: absolute; top: 12px; right: 14px; z-index: 15;
  width: 42px; height: 42px; border-radius: 8px; cursor: pointer;
  background: rgba(10,12,16,.5); border: 1px solid rgba(255,255,255,.18);
  color: #eaf0f7; font-size: 22px; line-height: 1;
  transition: background .12s ease, transform .2s ease, color .12s ease;
}
#btn-gear:hover { background: rgba(30,34,42,.85); transform: rotate(35deg); color: #ffe08a; }

/* Panel opcji — półprzezroczyste przyciemnienie sceny zamiast pełnego gradientu */
#options { background: rgba(2, 4, 8, .72); }
.opt-panel {
  min-width: min(90%, 460px); padding: 26px 30px 22px;
  background: rgba(12,13,17,.94); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55); text-align: center;
}
.opt-panel h2 { font-family: "MPlus1m", monospace; font-size: clamp(22px,4vw,34px); color: #f2f4f8; margin-bottom: 22px; letter-spacing: 2px; }
.opt-row { display: flex; align-items: center; gap: 14px; margin: 14px 0; }
.opt-row label { font-size: clamp(14px,2vw,20px); min-width: 90px; text-align: left; color: #d6dbe4; }
.opt-row input[type=range] { flex: 1; accent-color: #ffe08a; }
#opt-volume-val { min-width: 52px; text-align: right; color: #9fb0c4; }
.opt-block { margin: 18px 0; }
.opt-block > label { display: block; text-align: left; margin-bottom: 10px; color: #d6dbe4; font-size: clamp(14px,2vw,20px); }
#opt-speed { display: flex; gap: 8px; flex-wrap: wrap; }
.spd-btn {
  flex: 1; min-width: 84px; padding: 9px 6px; cursor: pointer;
  font-family: "MPlus1m", monospace; font-size: clamp(12px,1.6vw,16px); color: #eaf0f7;
  background: rgba(6, 7, 10, .82); border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  box-shadow: 0 4px 12px -3px rgba(205,216,242,.24);
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.spd-btn:hover { border-color: #ffe08a; color: #ffe08a; box-shadow: 0 5px 15px -3px rgba(255,224,138,.4); }
.spd-btn.active { background: rgba(255,224,138,.16); border-color: #ffe08a; color: #ffe08a; box-shadow: 0 0 14px -2px rgba(255,224,138,.5); }
#opt-close { margin-top: 22px; font-size: clamp(15px, 2vw, 20px); padding: 10px 46px; }

/* Ekrany overlay (start / koniec) */
.overlay-screen {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #10203a, #05070d 70%); z-index: 20;
}
.start-card { text-align: center; padding: 40px; }
.start-card h1 { font-size: clamp(40px, 9vw, 96px); letter-spacing: 6px; color: #cfe6ff; text-shadow: 0 0 30px rgba(90,160,255,.5); }
.start-card h2 { font-size: clamp(26px, 5vw, 48px); color: #cfe6ff; margin-bottom: 12px; }
.sub { color: #8fa6c2; margin: 14px 0 28px; font-size: clamp(12px, 1.8vw, 18px); }
.btn-primary {
  padding: 14px 34px; font-size: clamp(15px, 2.4vw, 22px); font-weight: 700; cursor: pointer;
  color: #05070d; background: linear-gradient(180deg, #9fd0ff, #5aa0ff); border: none; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(90,160,255,.4); transition: transform .12s ease;
}
.btn-primary:hover { transform: translateY(-2px); }

/* Ekran wyboru języka — ciemne/czarne tło, karty z flagą i nazwą */
#lang-select {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, #101014, #000 72%);
}
.lang-card { text-align: center; padding: 40px 24px; }
.lang-heading { font-family: "MPlus1m", monospace; font-size: clamp(26px, 5vw, 50px); letter-spacing: 2px; color: #f2f4f8; }
.lang-sub { color: #7f858f; margin: 10px 0 34px; font-size: clamp(12px, 1.7vw, 17px); letter-spacing: 1px; }
.lang-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.btn-lang {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: clamp(116px, 20vw, 168px); padding: 22px 16px; cursor: pointer;
  background: rgba(20, 22, 28, .7); border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  color: #eaf0f7; transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.btn-lang:hover { transform: translateY(-3px); border-color: #ffe08a; background: rgba(34, 36, 44, .9); }
.btn-lang .flag {
  width: 60px; height: 40px; display: block; border-radius: 3px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.15);
}
.btn-lang .flag svg { width: 100%; height: 100%; display: block; }
.lang-name { font-family: "MPlus1m", monospace; font-size: clamp(15px, 2vw, 20px); letter-spacing: 1px; }

/* Ekran tytułowy: Tlo1_1 (tło+stopka+logotypy) + Tytul1 (sylwetka+tytuł) + menu */
#start { position: absolute; inset: 0; z-index: 20; background: #05070d; }
#title-bg, #title-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#title-art { pointer-events: none; }
#title-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#title-menu {
  position: absolute; left: 50%; top: 59%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; border: none; padding: 0;
}
/* wspólny wygląd przycisku (menu / wybory / opcje): ciemne tło + jasna poświata pod spodem,
   szerokość dopasowana do tekstu (min/max) */
.menu-item, .choice-btn, #opt-close {
  font-family: "MPlus1m", monospace; line-height: 1.25; letter-spacing: 1px;
  width: auto; text-align: center; color: #f4f6fa; cursor: pointer;
  background: rgba(6, 7, 10, .84);
  border: 1px solid rgba(255,255,255,.14); border-radius: 9px;
  box-shadow: 0 5px 16px -3px rgba(205, 216, 242, .30);
  transition: color .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.menu-item:hover, .choice-btn:hover, #opt-close:hover {
  color: #ffe08a; text-shadow: 0 0 10px rgba(255,200,90,.5);
  background: rgba(16, 18, 24, .93); border-color: rgba(255,224,138,.55);
  box-shadow: 0 6px 20px -3px rgba(255, 224, 138, .42);
}
.menu-item {
  font-size: clamp(13px, 1.8vw, 21px); padding: 8px 40px;
  min-width: 210px; max-width: 92%; white-space: nowrap;   /* etykiety menu w jednej linii, rozszerzają się do tekstu */
}
.menu-item.disabled { color: #6b7280; cursor: default; pointer-events: none; box-shadow: none; opacity: .75; }