:root{--bg:#0b0d17;--s1:#161a2a;--s2:#222842;--gold:#d8aa48;--gold-d:#8a6a2e;--flame:#ffb347;--blood:#b3243a;--magic:#f4efe6;--text:#e8dcc0;
  --pw:100vw;--ph:100dvh;--cw:216px;--fw:216px;--aw:144px;--iw:432px;--sw:504px;--u:1px}
*{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0;min-height:100%;color:var(--text);font:18px/1.4 ui-monospace,Menlo,Consolas,monospace}
body{display:grid;place-items:center;min-height:100dvh}
#phone{position:fixed;inset:0;overflow:hidden;background:#0b0d17b3}
.bar{position:absolute;top:0;left:0;right:0;height:64px;padding:8px 12px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;text-align:center;z-index:2;background:linear-gradient(var(--bg) 55%,transparent)}
#view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:64px 16px 16px;display:flex;flex-direction:column;scrollbar-width:none}
#view::-webkit-scrollbar{display:none}
.screen{flex:1;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;width:100%}
.screen[hidden]{display:none!important}
footer{padding:16px 0 8px;text-align:center;font-size:15px;opacity:.6}
.tag{margin:0;font-size:20px}
.panel{display:grid;gap:16px;text-align:left;width:100%;padding:24px;background:var(--s1);border:4px double var(--gold-d)}
.hero{text-align:center;justify-items:center;gap:8px}
.hero img{width:100%;max-width:320px;height:auto;image-rendering:pixelated}
.hero h2{margin:0;font-size:30px;color:var(--text)}
.hero p{margin:0 0 8px;opacity:.85}
.sect{margin:8px 0 0;align-self:flex-start;font-weight:400;font-size:26px;color:var(--flame)}
.rows{list-style:none;margin:0;padding:0;width:100%;text-align:left}
.rows li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:12px 0;border-bottom:2px solid #8a6a2e55}
.rows li:last-child{border-bottom:0}
.rows img{width:32px;height:32px;image-rendering:pixelated}
.rows b{display:block;font-weight:400;font-size:22px}
.rows span{opacity:.75;font-size:16px}
.rows i{font-style:normal;color:var(--gold);font-size:24px}
label{display:grid;gap:4px}
label span{font-size:18px;color:var(--gold)}
input,select{font:inherit;color:var(--text);background:var(--s2);border:2px solid var(--gold-d);padding:10px;min-height:48px;width:100%}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--flame);outline-offset:2px}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 20px;font:inherit;font-weight:700;color:#1a1204;background:var(--flame);border:2px solid var(--gold);cursor:pointer;text-decoration:none}
.cta.alt{background:var(--s2);color:var(--text)}
#offer{background:var(--magic)}
.mini{min-width:48px;min-height:48px;background:var(--s2);color:var(--text);border:2px solid var(--gold-d);font:inherit;cursor:pointer}
#bar-title{color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ekran wyboru */
#s-pick:not([hidden]){min-height:calc(var(--ph) - 64px);gap:12px}
#s-pick #fan{margin-top:auto;margin-bottom:auto}
#date{margin:0;font-size:16px;opacity:.8}
.mid p{margin:0 0 12px;font-size:20px}
.divider{display:flex;align-items:center;gap:12px;width:min(320px,80%);margin:auto;color:var(--gold)}
.divider i{flex:1;height:2px;background:var(--gold-d)}
.hint{margin:0;opacity:.8;font-size:16px}

/* ekran karty */
#cardslot{display:grid;place-items:center}
.quote{margin:0;max-width:320px;font-size:24px;line-height:1.3}
#info{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
#info div{display:grid;gap:2px;justify-items:center}
#info .ic{font-size:28px;color:var(--flame);line-height:1.2}
#info .lb{font-size:14px;opacity:.7}
#info .vl{font-size:16px}
.fade{opacity:0;transition:opacity .8s ease}
.fade.in{opacity:1}
#more:not(.in){pointer-events:none}

/* reading screen */
#artslot .card{--cw:var(--aw)}
#rname{margin:0;font-size:36px;font-weight:400;color:var(--text)}
.tabs{display:flex;justify-content:center;gap:8px;width:100%;border-bottom:2px solid #8a6a2e55}
.tabs button{flex:1;min-height:48px;background:none;border:0;border-bottom:4px solid transparent;color:var(--text);font:inherit;font-size:22px;cursor:pointer;opacity:.7}
.tabs button[aria-selected=true]{color:var(--flame);border-bottom-color:var(--flame);opacity:1}
.text{text-align:left;line-height:1.5;font-size:22px;background:#0b0d17b8;padding:16px;width:100%;animation:fadein .35s ease}
.text p{margin:0 0 14px}
.text p:last-child{margin:0}
.text .lead{color:var(--flame)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
#actions{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
#actions .cta{width:100%;max-width:320px}
@media(prefers-reduced-motion:reduce){.fade,.text{transition:none;animation:none}}

/* desktop: okno wielkosci telefonu w ramie jak rama obrazu */
@media(min-width:700px){
  :root{--pw:390px;--ph:min(844px,calc(100vh - 100px))}
  #phone{position:relative;inset:auto;width:calc(390px + 48*var(--u));height:calc(var(--ph) + 48*var(--u));border:calc(24*var(--u)) solid transparent;border-image:url(../img/ui/picture-frame.png) 12 / calc(24*var(--u)) stretch;image-rendering:pixelated;box-shadow:0 0 60px #000}
  .bar{border-radius:0}
}
#s-card:not([hidden]){justify-content:center}
#s-pick{overflow:hidden;margin:0 -16px -16px;width:calc(100% + 32px);padding:0 16px 16px}
#view:has(#s-pick:not([hidden])) footer{display:none}
.hint{position:relative;z-index:50;text-shadow:0 2px 0 #000,0 0 8px #000}
body:has(#menu:not([hidden])) #s-pick .hint{visibility:hidden}
#loader{position:absolute;inset:0;z-index:20;background:var(--bg);display:grid;place-items:center;transition:opacity .5s ease}
#loader.hide{opacity:0;pointer-events:none}
#loader .flame{width:64px;height:64px;image-rendering:pixelated;animation:lf .6s steps(2) infinite}
@keyframes lf{50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){#loader .flame{animation:none}#loader{transition:none}}
.hero h2{text-shadow:none;filter:none;color:#fff}
.ftitle{margin:0;font-weight:400;font-size:36px;line-height:1.1;color:var(--text)}
.fintro{margin:0;max-width:320px;font-size:18px;opacity:.85}
.bar{grid-template-columns:104px 1fr 104px}
.bar-r{justify-self:end;display:flex;gap:8px}
.mini img{height:20px;width:auto;image-rendering:pixelated;display:block}
#s-intro{padding-top:0}
/* hamburger i menu */
.burger{display:grid;gap:4px;justify-items:center}
.burger i{display:block;width:22px;height:3px;background:var(--text)}
#menu-back{position:absolute;inset:0;z-index:25}
#menu-back[hidden],#menu[hidden]{display:none}
  .menu{position:absolute;top:60px;left:0;right:0;width:auto;max-height:calc(100% - 60px);overflow:auto;z-index:30;display:grid;gap:10px;text-align:left;padding:8px 4px}
.menu h3{margin:6px 0 0;font-weight:400;font-size:24px;color:var(--text);padding-bottom:4px;border-bottom:2px solid var(--gold-d)}
.menu p{margin:0;font-size:17px;opacity:.9}
.menu .cta{width:100%}
.langs{display:flex;gap:12px}
.langs .cta{flex:1}
#mute span{margin-left:8px}
#mute img{height:20px;width:auto;image-rendering:pixelated}
#fxtop{position:absolute;inset:0;width:100%;height:100%;z-index:12;pointer-events:none;image-rendering:pixelated}
#phone.shake{animation:shake .35s steps(1)}
@keyframes shake{0%{transform:translate(0)}15%{transform:translate(-5px,3px)}30%{transform:translate(5px,-3px)}45%{transform:translate(-4px,-2px)}60%{transform:translate(3px,3px)}80%{transform:translate(-2px,1px)}100%{transform:translate(0)}}
#back{justify-self:start;width:48px}
#menu-btn{justify-self:end;width:48px}
.bar{grid-template-columns:48px 1fr 48px}
.toast{position:absolute;left:12px;right:12px;bottom:12px;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--s1);border:2px solid var(--gold)}
.toast .cta{min-height:40px;padding:2px 14px}
#music-hint{margin:-8px 0 0;font-size:16px;opacity:.75;animation:hint 1.6s ease-in-out infinite alternate}
@keyframes hint{from{opacity:.45}to{opacity:.9}}
@media(prefers-reduced-motion:reduce){#music-hint{animation:none}}
#music-hint.gone{opacity:0;animation:none;transition:opacity .4s}

/* intro screen: full-screen illustration, title at the top, tagline and button at the bottom */
.intro{position:relative;justify-content:space-between;min-height:calc(var(--ph) - 64px);padding:0;gap:14px;align-items:center;justify-content:flex-start}
.intro-top,.intro-bottom{position:relative;z-index:2}
.intro-top{display:grid;justify-items:center;gap:6px;padding-top:0;margin-top:-34px}
.emblem{image-rendering:pixelated;width:64px;height:64px}
.intro-top .tag{font-size:19px;opacity:.95;text-shadow:0 2px 0 #000}
.intro-bottom{display:grid;gap:14px;justify-items:center;text-align:center;padding-bottom:18px}
.intro-bottom p{margin:0;max-width:300px;font-size:19px;text-shadow:0 2px 0 #000;opacity:.95}
.intro-bottom .hint{font-size:15px;opacity:.8}

/* backgrounds of the following steps: muted, under the content */
#scene{position:absolute;inset:0;background-size:var(--sw) auto;background-position:center top;background-repeat:no-repeat;image-rendering:pixelated;opacity:0;transition:opacity .5s ease;pointer-events:none}
#scene.on{opacity:.4}
#scene::after{content:"";position:absolute;inset:0;background:linear-gradient(#0b0d17 0,#0b0d1700 28%,#0b0d1700 55%,#0b0d17 100%)}
@media(prefers-reduced-motion:reduce){#scene{transition:none}}

/* intro screen: illustration in a pixel frame, no overlays; integer scale (--iw = multiple of 108 px) */
.intro-art{padding:0!important;width:auto;overflow:hidden;line-height:0;display:block;background:var(--bg)}
.intro-art img{display:block;width:var(--iw);height:auto;image-rendering:pixelated;}
.intro-art{height:auto}
.intro-bottom{padding-bottom:12px}
.intro-bottom .cta{font-size:25px;min-width:200px;min-height:calc(55*var(--u))}
.intro-top .tag{margin-top:12px}

/* nothing on the page is selectable (except form fields); no blue tap highlight */
*{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
::selection{background:transparent}
input::selection{background:#d8aa4866}
img{-webkit-user-drag:none;user-drag:none}

/* blended intro image (no frame): image under the title, pixel fade into the background at the top and bottom */
.intro.blend .intro-art{background:none;border:0;border-image:none;padding:0!important;overflow:visible;width:100%;display:grid;place-items:center;position:relative;margin:-10px 0 -50px}
.intro.blend .intro-art img{width:var(--iw);margin:0;-webkit-mask-image:linear-gradient(#0000 0,#000 18%,#000 72%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 18%,#000 72%,#0000 100%)}

.menu{left:0!important;right:0!important;width:auto!important;top:56px!important;border-radius:0}
.menu .langs{gap:12px}
.menu .cta,.menu .langs .cta{min-height:calc(48*var(--u));width:100%}
.menu #mute{display:flex;align-items:center;justify-content:center;gap:10px}
.menu p{font-size:20px;text-align:center}
.bar{z-index:6}
.intro-top{pointer-events:none}
.intro-top>*{pointer-events:auto}

/* splash: PNG with a transparent pixel fade at the edges (no CSS mask) */
.intro.blend .intro-art img{-webkit-mask-image:none;mask-image:none}
.intro.blend .intro-art{margin:-6px 0 -40px}

#s-pick .mid{padding-bottom:calc(var(--fw) * .16 + 28px)}   /* room for the raised, enlarged card so it does not cover the line under the caption */
/* navigation bar: no background at the top of the page, dark background only after the first scroll */
.bar{background:none;transition:background .25s ease}
.bar.scrolled{background:linear-gradient(#0b0d17f2 60%,#0b0d1700)}
/* splash: title lower, slightly overlapping the artwork */
.intro-top{margin-top:10px;position:relative;z-index:3}
.intro.blend .intro-art{margin:-104px 0 -40px;position:relative;z-index:1}
/* dark band at the top of scene screens removed (it looked like a header background); only the darkening at the bottom remains */
#scene::after{background:linear-gradient(#0b0d1700 0,#0b0d1700 58%,#0b0d17 100%)}
/* after a card is chosen the title, date, tagline and hint fade out so they do not show through the flying card */
#s-pick .head,#s-pick .mid,#s-pick .hint{transition:opacity .25s ease}
#s-pick.picking .head,#s-pick.picking .mid,#s-pick.picking .hint{opacity:0}
@media(prefers-reduced-motion:reduce){#s-pick .head,#s-pick .mid,#s-pick .hint{transition:none}}

/* intro screen: illustration as the scene background (like on other screens), title on two lines in the middle of the screen */
.intro{justify-content:flex-start}
.intro-top{margin:auto 0!important;padding-top:0}
.intro-top h1{width:min-content;max-width:100%;margin:0 auto;text-align:center;font-size:var(--ft1,80px)!important;line-height:1.02}
.intro-bottom{margin-top:0;padding-bottom:12px}
/* intro screen: more space from the bottom and between the button and the music hint */
.intro-bottom{gap:18px;padding-bottom:36px}
.intro-bottom .hint{margin-top:6px}
#scene[data-scene=intro].on{opacity:.374}   /* splash background 10% brighter (0.34 x 1.1) */
.intro-bottom .hint{margin-top:22px}   /* music hint further from the button */
#music-hint{margin:26px 0 0}   /* an ID rule used to give -8px; now a clear gap from the button */
#enter,#more{width:100%;max-width:320px}   /* buttons at the bottom of screens: full width like on the reading screen, with margins */
.intro-bottom{width:100%;grid-template-columns:minmax(0,320px);justify-content:center}