/* SIGNAL.TF / JAPANSKI PLAKAT — originalna fotografija se ne mijenja. */
:root { color-scheme: light; --navy:#07315b; --deep:#051f3c; --gold:#f7b424; --cream:#f8e8c5; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--deep); }
body { margin:0; min-height:100vh; min-height:100dvh; display:grid; place-items:center; background:var(--deep); font-family: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", Arial, sans-serif; }
.poster { position:relative; aspect-ratio:3/2; width:min(100vw,150vh,1536px); overflow:hidden; flex-shrink:0; isolation:isolate; background:#ecd8a8; color:var(--navy); }
.poster > .source { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; user-select:none; -webkit-user-drag:none; }
/* The first supplied poster remains intact; a paper panel hides lettering baked into the JPG/PNG on the left. */
.paper-mask { position:absolute; inset:0 auto 0 0; width:47%; background-image:url('assets/papir-iz-iste-slike.png'); background-size:119px 170px; background-repeat:repeat; mask-image:linear-gradient(to right,#000 0%,#000 78%, transparent 100%); -webkit-mask-image:linear-gradient(to right,#000 0%,#000 78%, transparent 100%); pointer-events:none; }
.content { position:absolute; z-index:2; width:34%; left:2.7%; top:24%; }
h1 { font-family:Impact, Haettenschweiler, "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", sans-serif; font-weight:900; letter-spacing:-.055em; font-size:clamp(52px, 10.3vw, 158px); line-height:.94; margin:0; white-space:nowrap; }
.gold-line { height:12px; width:86%; margin:10px 0 24px; background:var(--gold); }
.lead { font-family:Impact, Haettenschweiler, "Roboto Condensed", "Arial Narrow", Arial, sans-serif; font-size:clamp(24px, 3.45vw, 54px); letter-spacing:-.01em; line-height:1.04; margin:0 0 27px; max-width:100%; font-weight:800; text-wrap:balance; }
/* Original official Store badges (Apple SVG, Google Play PNG); preserve aspect ratios. */
.badges { display:flex; align-items:center; gap:8px; width:100%; }
.store { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:calc((100% - 8px)/2); max-width:213px; height:64px; min-width:0; padding:0; background:transparent; border:0; border-radius:0; line-height:0; outline-offset:3px; transition:filter .16s ease; }
.store:hover { filter:brightness(1.08); }
.store img { width:100%; height:100%; display:block; object-fit:contain; }
.qr-row { display:flex; align-items:center; gap:12px; margin-top:28px; }
.qr { background:#fff1cf; width:clamp(95px,10vw,156px); height:auto; aspect-ratio:1; display:block; border:2px solid var(--navy); }
.qr-row p { font-family:"Roboto Condensed", "Arial Narrow", Arial, sans-serif; font-size:clamp(17px,2vw,30px); line-height:1.02; font-weight:750; max-width:150px; }
.signature { font-size:17px; letter-spacing:.07em; font-weight:700; }
/* On phones fallback UI remains readable; the only illustration remains the same first PNG. */
@media(max-width:767px) {
  html { background:var(--cream); }
  body { display:block; background:var(--cream); }
  .poster { width:100%; aspect-ratio:auto; min-height:100dvh; min-height:100vh; background:var(--cream); overflow:hidden; }
  .source { inset:0 0 auto 0 !important; width:100% !important; height:48vh !important; height:48dvh !important; object-fit:cover !important; object-position: 100% 50% !important; }
  .paper-mask { inset:auto 0 0 0; width:100%; height:70%; background-size:119px 170px; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 100%); }
  .content { position:relative; left:auto; top:auto; width:auto; padding: min(42vh,320px) 24px 40px; }
  h1 { font-size:clamp(64px,17vw,104px); }
  .gold-line { height:8px; width:76%; margin:7px 0 22px; }
  .lead { font-size:clamp(32px,8vw,48px); max-width:400px; line-height:1.06; margin-bottom:25px; }
  .badges { max-width:500px; gap:10px; }
  .store { max-width:213px; }
  .qr-row { display:none !important; }
  .signature { margin-top:20px; }
}
@media(min-width:768px) and (max-width:1150px) {
  .content { top:23.5%; width:35%; }
  .gold-line { height:8px; margin:7px 0 15px; }
  .lead { margin-bottom:18px; }
  .badges { gap:7px; }
  .store { padding:0; }
  .qr-row { margin-top:16px; }
  .qr { width:clamp(92px,10vw,130px); }
}
@media (prefers-reduced-motion:reduce) { .store {transition:none} }