/* Układ: scena 835x469 skalowana do okna, UI w pikselowej czcionce nad canvasem */ @font-face { font-family: "Pixelify Sans"; font-weight: 400; font-display: block; src: url("fonts/pixelify-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Pixelify Sans"; font-weight: 400; font-display: block; src: url("fonts/pixelify-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Pixelify Sans"; font-weight: 700; font-display: block; src: url("fonts/pixelify-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Pixelify Sans"; font-weight: 700; font-display: block; src: url("fonts/pixelify-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --ink: #05080f; /* noc */ --panel: #0b1322; /* tło okien */ --cream: #f1e3bf; /* tekst, ramki */ --ember: #ff9a3a; /* żar horyzontu */ --sea: #24395c; /* cień ramki */ --muted: #8c9ab4; /* podpowiedzi */ --pixel: "Pixelify Sans", "Courier New", monospace; --u: 1px; /* 1 piksel sceny w px ekranu, ustawiane w JS */ color-scheme: dark; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; margin: 0; } body { background: var(--ink); color: var(--cream); font-family: var(--pixel); overflow: hidden; overscroll-behavior: none; } /* stage = cały ekran; view = widoczny prostokąt sceny (JS ustawia pozycję i rozmiar) poziomo: cała scena wpasowana w ekran, pionowo (telefon): pełna wysokość, kadr wokół wiatraka */ #stage { position: fixed; inset: 0; overflow: hidden; background: var(--ink); user-select: none; -webkit-user-select: none; touch-action: manipulation; cursor: pointer; } #view { position: absolute; left: 0; top: 0; width: 835px; height: 469px; overflow: hidden; } #scene { position: absolute; left: 0; top: 0; width: 835px; height: 469px; image-rendering: pixelated; image-rendering: crisp-edges; } /* ekrany */ .screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 12); text-align: center; cursor: default; padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px)); } .screen[hidden], .pbox[hidden] { display: none !important; } .eyebrow { margin: 0; font-size: calc(var(--u) * 12); letter-spacing: .2em; text-transform: uppercase; color: var(--ember); } .logo { margin: 0; font-weight: 700; line-height: .95; font-size: calc(var(--u) * 64); color: var(--cream); text-shadow: calc(var(--u)*3) calc(var(--u)*3) 0 var(--sea), 0 0 calc(var(--u)*18) rgba(255,154,58,.25); text-wrap: balance; } .logo.small { font-size: calc(var(--u) * 46); } .hint { margin: 0; font-size: calc(var(--u) * 11); color: var(--muted); letter-spacing: .05em; } .credit { position: absolute; bottom: calc(var(--u) * 10 + env(safe-area-inset-bottom, 0px)); margin: 0; font-size: calc(var(--u) * 9); color: var(--muted); opacity: .7; } #loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* pikselowa ramka: schodkowe rogi z box-shadow */ .pbox, .pbtn { --b: calc(var(--u) * 2); background: var(--panel); box-shadow: 0 calc(var(--b) * -1) 0 0 var(--cream), 0 var(--b) 0 0 var(--cream), calc(var(--b) * -1) 0 0 0 var(--cream), var(--b) 0 0 0 var(--cream), 0 calc(var(--b) * 3) 0 0 var(--sea), var(--b) calc(var(--b) * 2) 0 0 var(--sea), calc(var(--b) * -1) calc(var(--b) * 2) 0 0 var(--sea); } .pbtn { font: inherit; font-weight: 700; color: var(--cream); border: 0; cursor: pointer; font-size: calc(var(--u) * 15); padding: calc(var(--u) * 8) calc(var(--u) * 16); letter-spacing: .06em; text-transform: uppercase; transition: transform .08s steps(2); } .pbtn .arrow { color: var(--ember); display: inline-block; margin-right: calc(var(--u) * 4); } .pbtn:hover, .pbtn:focus-visible { background: #16243d; outline: none; transform: translateY(calc(var(--u) * -1)); } .pbtn:hover .arrow, .pbtn:focus-visible .arrow { animation: blink .6s steps(2) infinite; } .pbtn:active { transform: translateY(calc(var(--u) * 1)); } /* okno dialogowe */ #dialog { position: absolute; left: max(6%, calc(env(safe-area-inset-left, 0px) + 12px)); right: max(6%, calc(env(safe-area-inset-right, 0px) + 12px)); bottom: calc(var(--u) * 16 + env(safe-area-inset-bottom, 0px)); min-height: calc(var(--u) * 64); padding: calc(var(--u) * 12) calc(var(--u) * 18) calc(var(--u) * 14); background: rgba(11, 19, 34, .86); } #text { margin: 0; font-size: calc(var(--u) * 15); line-height: 1.45; min-height: 2.9em; max-width: 62ch; } #next { position: absolute; right: calc(var(--u) * 14); bottom: calc(var(--u) * 8); color: var(--ember); font-size: calc(var(--u) * 10); animation: blink .8s steps(2) infinite; visibility: hidden; } #dialog.ready #next { visibility: visible; } #choices { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 10); } #choices:empty { display: none; } #choices .pbtn { font-size: calc(var(--u) * 12); padding: calc(var(--u) * 6) calc(var(--u) * 12); text-transform: none; } #choices .key { color: var(--ember); margin-right: calc(var(--u) * 6); } @keyframes blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pbtn, .pbtn .arrow, #next { animation: none !important; transition: none; } }