:root {
  --black: #000; --ink: #120a22; --gold: #e8b54a; --gold-hi: #fff1c4; --parch: #f3e7c9; --mist: #a99fc0; --el: #e8b54a;
  --display: 'Grenze Gotisch', 'Alegreya', Georgia, serif; --body: 'Alegreya', Georgia, serif;
  --cut: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  --cut-s: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--black); color: var(--parch); font: 400 18px/1.5 var(--body); overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { overflow: hidden; touch-action: manipulation; }
#bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.veil { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.55) 0, transparent 26%, transparent 50%, rgba(0,0,0,.8) 100%); transition: background-color .6s; }
body[data-state="game"] .veil { background-color: rgba(3, 1, 8, .8); }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1; margin: 0; letter-spacing: .01em; color: var(--gold-hi); text-wrap: balance; }
h1 { font-size: clamp(3.4rem, 17vw, 6rem); font-weight: 800; text-shadow: 0 0 34px rgba(232,181,74,.55); }
h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
h3 { font-size: 1.45rem; }
p { margin: 0; }
.lore { font-style: italic; color: var(--parch); max-width: 34ch; }
.small { font-size: .9rem; color: var(--mist); }
.glyph { font-size: 2.2rem; line-height: 1; color: var(--el); text-shadow: 0 0 18px var(--el); font-family: serif; }

#ui { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.screen[hidden] { display: none; }
.sheet { overflow-y: auto; -webkit-overflow-scrolling: touch; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.plate { background: linear-gradient(180deg, rgba(18,10,34,.82), rgba(4,2,9,.9)); clip-path: var(--cut); padding: 20px 18px; position: relative; display: grid; gap: 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); width: 100%; max-width: 460px; margin-inline: auto; }
.plate::before { content: ''; position: absolute; inset: 0; clip-path: var(--cut); padding: 1px; background: linear-gradient(160deg, var(--gold), rgba(232,181,74,.12) 40%, rgba(232,181,74,.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

.btn { font: 600 1.3rem/1 var(--display); letter-spacing: .03em; color: #1a0f02; background: linear-gradient(180deg, #ffe39a, var(--gold) 55%, #b8862a); border: 0; padding: 16px 20px; clip-path: var(--cut-s); cursor: pointer; text-align: center; text-decoration: none; display: block; width: 100%; transition: transform .12s, filter .12s; }
.btn:active { transform: scale(.97); filter: brightness(1.2); }
.btn.ghost { background: rgba(232,181,74,.1); color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(232,181,74,.55); font-size: 1.1rem; padding: 13px 16px; }
.btn:disabled { opacity: .4; }
.btn.big { padding: 30px 20px; font-size: 1.8rem; }
.icon { position: fixed; z-index: 5; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(232,181,74,.5); background: rgba(0,0,0,.5); color: var(--gold-hi); font-size: 1.3rem; cursor: pointer; }
.icon.off { opacity: .45; text-decoration: line-through; }
.icon.back { position: static; flex: none; font-size: 1.8rem; line-height: 1; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

/* wejście */
#s-intro { justify-content: space-between; text-align: center; align-items: center; }
.intro-top { display: grid; gap: 14px; justify-items: center; padding-top: 4vh; }
.intro-bottom { display: grid; gap: 14px; width: 100%; max-width: 420px; }
.field { display: grid; gap: 6px; text-align: left; font-size: .95rem; color: var(--mist); }
.field input, .code input, input.text { font: 500 1.15rem var(--body); color: var(--parch); background: rgba(0,0,0,.6); border: 1px solid rgba(232,181,74,.45); padding: 13px 14px; width: 100%; border-radius: 0; clip-path: var(--cut-s); }
.field input::placeholder, .code input::placeholder, input.text::placeholder { color: #6f6688; }
.seal { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
.seal::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.55); transform-origin: left; transform: scaleX(var(--p, 0)); mix-blend-mode: overlay; }
.seal span { position: relative; z-index: 1; }

/* komnata */
#s-hub, #s-start { gap: 14px; }
#s-hub > .plate { margin-top: auto; flex: none; }
#s-start > .plate, #s-game > .plate { margin-block: auto; flex: none; }
.hub-head { text-align: center; display: grid; gap: 8px; justify-items: center; margin-top: 2vh; min-height: 47vh; align-content: start; }
.hub-head .lore { font-size: 1rem; }
.coords { white-space: nowrap; font: 600 clamp(1.15rem, 6vw, 1.7rem)/1.1 var(--display); letter-spacing: .06em; color: var(--mist); text-align: center; word-spacing: .2em; }
.coords.big { font-size: clamp(1.4rem, 7.2vw, 2.1rem); color: var(--gold-hi); text-shadow: 0 0 18px rgba(232,181,74,.7); }
.coords span { transition: color .8s, text-shadow .8s; }
.coords span.on { color: var(--gold-hi); text-shadow: 0 0 14px rgba(232,181,74,.8); }
.coords span.new { animation: pop 1s both; }
@keyframes pop { 0% { transform: scale(1.8); color: #fff; } }
.coords span { display: inline-block; }
.trials { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trial { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--parch); background: rgba(232,181,74,.07); border: 0; padding: 11px 12px; clip-path: var(--cut-s); cursor: pointer; }
.trial b { font: 600 1.25rem/1.1 var(--display); color: var(--gold-hi); display: block; font-weight: 600; }
.trial small { color: var(--mist); font-size: .88rem; display: block; line-height: 1.3; }
.trial em { color: var(--el); font-size: .8rem; font-style: italic; display: block; }
.trial .n { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--el); border-radius: 50%; font: 600 1.2rem var(--display); color: var(--el); }
.trial.done { background: rgba(232,181,74,.16); } .trial.done .n { background: var(--el); color: #000; }
.trial.locked { opacity: .38; pointer-events: none; }
.trial.next { box-shadow: inset 0 0 0 1px var(--el); }
.kind { font-size: .82rem; color: var(--el); font-style: italic; display: block; }
.orbs { display: flex; justify-content: center; gap: 12px; padding: 4px 0 2px; }
.orbs button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #3a3350; background: #0c0816; color: #5d5478; font-family: serif; font-size: .95rem; padding: 0; }
.orbs button.open { border-color: var(--c); color: var(--c); }
.orbs button.got { background: var(--c); color: #000; box-shadow: 0 0 14px var(--c); }
.orbs button.cur { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.code { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.code .btn { width: auto; }

/* nagroda */
#s-reward, #s-final { justify-content: space-between; text-align: center; }
.reward-top { padding-top: 5vh; display: grid; gap: 6px; }
.reward-top p { color: var(--el); font-style: italic; }
#s-final h1 { font-size: clamp(2.6rem, 13vw, 4.4rem); }

/* gra */
.plate.game { gap: 12px; padding: 16px 14px; }
.game-head { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.game-head h2 { font-size: 1.7rem; } .game-head p { font-size: .92rem; color: var(--mist); line-height: 1.3; }
#game-root { display: grid; gap: 12px; }
.ginfo { font-size: .95rem; color: var(--parch); text-align: center; }
.stage { width: 100%; max-height: 56vh; touch-action: none; display: block; margin: 0 auto; background: radial-gradient(circle at 50% 40%, rgba(40,22,70,.5), rgba(0,0,0,.7)); box-shadow: inset 0 0 0 1px rgba(232,181,74,.3); object-fit: contain; }
.quiz { display: grid; gap: 10px; } .count { font-size: .85rem; color: var(--mist); } .q { font: 500 1.3rem/1.3 var(--body); color: var(--parch); margin-bottom: 4px; }
.opt { font: 500 1.1rem var(--body); color: var(--parch); background: rgba(232,181,74,.08); box-shadow: inset 0 0 0 1px rgba(232,181,74,.35); border: 0; padding: 14px; clip-path: var(--cut-s); text-align: left; cursor: pointer; width: 100%; }
.opt.ok { background: #2f7d3e; color: #fff; } .opt.no { background: #8a2740; color: #fff; animation: shake .4s; } .opt.sel { box-shadow: inset 0 0 0 2px var(--gold-hi); background: rgba(232,181,74,.25); }
.opt.sym { font: 600 1.4rem var(--display); text-align: center; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.two, .match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .two .opt { text-align: center; } .match > div { display: grid; gap: 8px; }
.bignum { font: 800 2.6rem var(--display); text-align: center; color: var(--gold-hi); }
input[type=range] { width: 100%; accent-color: var(--gold); height: 40px; }
.swaplist { display: grid; gap: 7px; } .row { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; text-align: left; font: 500 1.05rem var(--body); color: var(--parch); background: rgba(232,181,74,.08); border: 0; padding: 11px 12px; clip-path: var(--cut-s); }
.row i { font: 600 1.2rem var(--display); font-style: normal; color: var(--gold); } .row.sel { background: rgba(232,181,74,.3); }
.clues { margin: 0; padding-left: 1.3em; font-size: .93rem; display: grid; gap: 3px; color: var(--parch); }
.tiles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 50px; } .tiles.ans { margin-bottom: 12px; }
.tile { width: 42px; height: 50px; font: 800 1.6rem var(--display); color: #1a0f02; background: var(--gold); border: 0; clip-path: var(--cut-s); } .tile.empty { background: rgba(232,181,74,.12); } .tile.used { opacity: .2; }
.grid { display: grid; gap: 8px; width: min(100%, 330px); margin: 0 auto; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); gap: 0; }
.cell { aspect-ratio: 1; border: 0; background: rgba(232,181,74,.07); box-shadow: inset 0 0 0 1px rgba(232,181,74,.3); color: var(--parch); font: 600 1.6rem var(--display); padding: 0; position: relative; cursor: pointer; display: grid; place-items: center; }
.rune { font-family: serif; font-size: 2.2rem; color: #4b4263; transition: all .25s; } .rune.on { color: var(--gold-hi); background: rgba(232,181,74,.28); text-shadow: 0 0 16px var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 22px rgba(232,181,74,.35); }
.num { font-size: 2.2rem; } .num.fx { color: var(--gold); background: rgba(232,181,74,.2); } .cell.sel { box-shadow: inset 0 0 0 3px var(--gold-hi); }
.flame { display: inline-block; width: 30px; height: 38px; background: var(--c); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; box-shadow: 0 0 14px var(--c); } .flame.none { background: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); }
.mm-hist { display: grid; gap: 6px; max-height: 30vh; overflow: auto; } .mm-row { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 44px; } .mm-row span { font-size: .9rem; color: var(--mist); margin-left: 8px; } .mm-row.cur { padding: 8px; box-shadow: inset 0 0 0 1px rgba(232,181,74,.4); }
.mm-pal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jugs { display: flex; justify-content: center; align-items: flex-end; gap: 18px; min-height: 230px; } .jug { background: none; border: 0; color: var(--parch); font: inherit; display: grid; justify-items: center; gap: 2px; padding: 6px; } .jug.sel .glass { box-shadow: 0 0 0 3px var(--gold-hi); }
.glass { width: 62px; border: 2px solid rgba(255,255,255,.55); border-top: 0; border-radius: 0 0 14px 14px; display: flex; align-items: flex-end; overflow: hidden; } .liq { width: 100%; background: linear-gradient(var(--el), color-mix(in srgb, var(--el) 50%, #000)); transition: height .35s; } .jug strong { font: 800 1.6rem var(--display); }
.tubes { display: flex; justify-content: center; gap: 10px; } .tube { width: 46px; height: 150px; border: 2px solid rgba(255,255,255,.55); border-top: 0; border-radius: 0 0 22px 22px; background: rgba(255,255,255,.04); display: flex; flex-direction: column-reverse; padding: 3px; gap: 2px; transition: transform .15s; } .tube i { height: 33px; border-radius: 6px; } .tube i:first-child { border-radius: 6px 6px 18px 18px; } .tube.sel { transform: translateY(-14px); border-color: var(--gold-hi); }
.pans { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; font-size: .9rem; } .pan { padding: 8px 4px; box-shadow: inset 0 0 0 1px rgba(232,181,74,.35); } .verdict { font: 600 1.1rem var(--display); color: var(--gold-hi); max-width: 9ch; }
.coin { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe39a, #b8862a); color: #3a2503; box-shadow: none; width: 78%; margin: auto; } .coin.l { box-shadow: 0 0 0 4px #4cc9ff; } .coin.r { box-shadow: 0 0 0 4px #ff7a3c; }
.pad { background: color-mix(in srgb, var(--c) 28%, #000); box-shadow: inset 0 0 0 1px var(--c); transition: all .12s; } .pad.on { background: var(--c); box-shadow: 0 0 34px var(--c); }
.pipe { background: #06030c; box-shadow: inset 0 0 0 1px rgba(232,181,74,.14); } .pipe i, .pipe u { position: absolute; background: #4b4263; } .pipe.on i, .pipe.on u { background: #eaf2fb; box-shadow: 0 0 10px #cfe3ff; } .pipe.src u { background: var(--gold); box-shadow: 0 0 14px var(--gold); width: 46%; height: 46%; }
.pipe u { width: 22%; height: 22%; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .pipe .n { width: 16%; height: 50%; left: 42%; top: 0; } .pipe .s { width: 16%; height: 50%; left: 42%; bottom: 0; } .pipe .e { height: 16%; width: 50%; top: 42%; right: 0; } .pipe .w { height: 16%; width: 50%; top: 42%; left: 0; }
.hanoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .peg { height: 150px; background: linear-gradient(90deg, transparent 48%, rgba(232,181,74,.5) 48% 52%, transparent 52%); border: 0; border-bottom: 3px solid var(--gold); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; padding: 0 0 3px; } .peg i { height: 22px; background: linear-gradient(#f4f8ff, #8b98ad); border-radius: 11px; } .peg.sel { background-color: rgba(232,181,74,.15); }
.bellows { display: grid; grid-template-columns: 70px 1fr; gap: 16px; align-items: stretch; } .thermo { height: 250px; position: relative; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); display: flex; align-items: flex-end; } .thermo .zone { position: absolute; left: 0; right: 0; bottom: 55%; height: 25%; background: rgba(232,181,74,.35); box-shadow: inset 0 0 0 1px var(--gold); } .thermo .fill { width: 100%; background: linear-gradient(0deg, #8a2740, #ff7a3c, #ffe39a); } .thermo.in { box-shadow: inset 0 0 0 2px var(--gold), 0 0 26px rgba(232,181,74,.6); }
.bellows .btn { height: 100%; touch-action: none; }
.pbar { height: 8px; box-shadow: inset 0 0 0 1px rgba(232,181,74,.4); } .pbar i { display: block; height: 100%; background: var(--gold); width: 0; }
.hole { font-size: 2.4rem; border-radius: 50%; background: radial-gradient(circle, #000 40%, rgba(125,220,106,.2)); touch-action: none; } .hole.hit { background: var(--gold); }

#toast { position: fixed; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); transform: translate(-50%, 30px); background: #1b0d14; color: #ffd9df; box-shadow: inset 0 0 0 1px #c2506a; padding: 12px 18px; clip-path: var(--cut-s); opacity: 0; transition: all .3s; pointer-events: none; z-index: 20; width: max-content; max-width: 88vw; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#winfx { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; text-align: center; background: radial-gradient(circle, rgba(232,181,74,.25), rgba(0,0,0,.85) 70%); animation: rise .4s both; }
#winfx[hidden] { display: none; } #winfx > div { display: grid; gap: 10px; justify-items: center; } #winfx .glyph { font-size: 4rem; color: var(--gold-hi); animation: spin 2.2s linear infinite; } #winfx p:last-child { font: 800 2.6rem var(--display); color: var(--gold-hi); letter-spacing: .08em; text-shadow: 0 0 22px var(--gold); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .screen, #winfx, .coords span.new { animation: none; } }
@media (min-width: 700px) { .hub-head { min-height: 30vh; } }