/* Zagadki mnicha Bao — wygląd. Jasno = dzień, ciemno = wieczór. */
:root{
  --paper:#f7edd9; --paper2:#fbf5e7; --ink:#3b3026; --ink2:#6c5b48;
  --line:#d9c69f; --gold:#c9902f; --accent:#c4652a; --accent2:#a8511f;
  --ok:#5c8450; --bad:#b0523f; --shadow:0 10px 26px rgba(74,53,28,.16);
  --skyA:#ffe6b3; --skyB:#f2d9a8; --watA:#a9d2cf; --watB:#79b0b6;
  --mtnF:#c0b79c; --mtnN:#9fae8d; --bank:#c8b483; --sun:#ffd777; --haze:#fff6dd;
  --robe:#d9762e; --robeB:#b85c22; --skin:#f0c58c; --skinL:#f7d8ab;
  --bamb:#7f9a5e; --lant:#d6543f; --rock:#a89e8a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#221c19; --paper2:#2b2420; --ink:#eadfcb; --ink2:#b6a68e;
    --line:#4b3d31; --gold:#d8a94a; --accent:#e08243; --accent2:#c96a2b;
    --ok:#7fae6e; --bad:#d97b64; --shadow:0 10px 30px rgba(0,0,0,.45);
    --skyA:#2d3a63; --skyB:#4a3f63; --watA:#2c4457; --watB:#1d3040;
    --mtnF:#3b4057; --mtnN:#33413c; --bank:#4a4231; --sun:#ffe9b0; --haze:#8e9ec9;
    --robe:#c96a2b; --robeB:#a1511f; --skin:#e2b478; --skinL:#eac894;
    --bamb:#5d7a4b; --lant:#e0604a; --rock:#5c5545;
  }
}
:root[data-theme="dark"]{
  --paper:#221c19; --paper2:#2b2420; --ink:#eadfcb; --ink2:#b6a68e;
  --line:#4b3d31; --gold:#d8a94a; --accent:#e08243; --accent2:#c96a2b;
  --ok:#7fae6e; --bad:#d97b64; --shadow:0 10px 30px rgba(0,0,0,.45);
  --skyA:#2d3a63; --skyB:#4a3f63; --watA:#2c4457; --watB:#1d3040;
  --mtnF:#3b4057; --mtnN:#33413c; --bank:#4a4231; --sun:#ffe9b0; --haze:#8e9ec9;
  --robe:#c96a2b; --robeB:#a1511f; --skin:#e2b478; --skinL:#eac894;
  --bamb:#5d7a4b; --lant:#e0604a; --rock:#5c5545;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font:400 17px/1.55 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  -webkit-text-size-adjust:100%; overflow-x:hidden;
  padding:0 0 env(safe-area-inset-bottom);
}

/* ── pasek górny ── */
.bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px calc(10px); padding-top:calc(10px + env(safe-area-inset-top));
  background:var(--paper2); border-bottom:2px solid var(--line); position:sticky; top:0; z-index:30;
}
.brand{display:flex; align-items:center; gap:8px; min-width:0}
.lotus{font-size:20px; line-height:1}
.name{font-weight:700; font-size:18px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tools{display:flex; gap:6px; flex:0 0 auto}
.tbtn{
  font:600 14px/1 system-ui,sans-serif; color:var(--ink); background:var(--paper);
  border:2px solid var(--line); border-radius:10px; padding:8px 10px; cursor:pointer; min-width:40px;
}
.tbtn:hover{border-color:var(--gold)}
.tbtn[aria-pressed="false"]{opacity:.45}

/* ── stopień mądrości ── */
.rankbar{
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:linear-gradient(var(--paper2),var(--paper)); border-bottom:1px solid var(--line);
}
.rch{
  width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px;
  background:var(--accent); color:#fff6e6; font-size:20px; font-weight:700; box-shadow:var(--shadow);
}
.rtx{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.rtx b{font-size:15px}
.rtx i{font-style:normal; font-size:12.5px; color:var(--ink2)}
.stage{
  margin-left:auto; font:600 12.5px/1 system-ui,sans-serif; color:var(--ink2);
  border:1px solid var(--line); border-radius:99px; padding:6px 10px; white-space:nowrap;
}

main{max-width:720px; margin:0 auto; padding:0 0 34px}

/* ── scena ── */
.scene{position:relative; border-bottom:3px solid var(--line); max-width:560px; margin:0 auto}
.scene svg{display:block; width:100%; height:auto}
.stageline{
  position:absolute; left:6px; right:6px; bottom:7px; width:fit-content; margin:0 auto;
  max-width:calc(100% - 12px); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:clamp(13px,3.9vw,16px); font-style:italic; font-weight:600; line-height:1.3; color:#453422;
  background:rgba(255,250,238,.9); border:1px solid rgba(160,130,85,.35);
  border-radius:99px; padding:5px 14px; box-shadow:0 2px 10px rgba(90,65,30,.14);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .stageline{
  color:#f3e7cf; background:rgba(28,24,20,.82); border-color:rgba(230,210,170,.22); box-shadow:0 2px 12px rgba(0,0,0,.45);
}}
:root[data-theme="dark"] .stageline{
  color:#f3e7cf; background:rgba(28,24,20,.82); border-color:rgba(230,210,170,.22); box-shadow:0 2px 12px rgba(0,0,0,.45);
}

.sky-a{stop-color:var(--skyA)} .sky-b{stop-color:var(--skyB)}
.wat-a{stop-color:var(--watA)} .wat-b{stop-color:var(--watB)}
#sun{fill:var(--sun); opacity:.92}
.haze ellipse{fill:var(--haze); opacity:.5}
.mtn.far{fill:var(--mtnF)} .mtn.near{fill:var(--mtnN)} .snow{fill:#fff8e8; opacity:.85}
.bank{fill:var(--bank)}
.ripple path{stroke:#fff; stroke-width:2; stroke-linecap:round; opacity:.35; fill:none}
.stones ellipse{fill:var(--rock)}
.pad ellipse{fill:#6d9a63; opacity:.85} .flow path{fill:#e9a3bd}
.cane rect{fill:var(--bamb)} .leaf ellipse{fill:#6b8c4d}
.lant ellipse{fill:var(--lant)} .ln{stroke:#7a6a4a; stroke-width:1.6}
.crane path{fill:#fffaf0; opacity:.9}
.pag rect,.pag path{fill:#8d5b3c}
.branch path{stroke:#8a6a4a; stroke-width:3; fill:none; stroke-linecap:round}
.bud circle{fill:#f0b8cb}
.only{display:none}
body[data-stage="1"] .s1,body[data-stage="2"] .s2,body[data-stage="3"] .s3,
body[data-stage="4"] .s4,body[data-stage="5"] .s5{display:block}

/* Bao */
.shade{fill:#6b5a3c; opacity:.18}
.rock{fill:var(--rock)}
.robe{fill:var(--robe)} .robeb{fill:var(--robeB)}
.skin{fill:var(--skin)} .belly{fill:var(--skinL)}
.ear{fill:var(--skin)}
.dots circle{fill:#5b4630; opacity:.55}
.brow{stroke:#6b4f33; stroke-width:2; fill:none; stroke-linecap:round}
.eye path{stroke:#41301f; stroke-width:2.6; fill:none; stroke-linecap:round}
.mouth{stroke:#9c4526; stroke-width:2.6; fill:none; stroke-linecap:round}
.blush ellipse{fill:#e79a72; opacity:.5}
.beadsn circle{fill:#8c5a2e}
.scrollprop rect{fill:#f3e3bd; stroke:#b79a62; stroke-width:1.4}
#bao{transform-box:fill-box; animation:breathe 6.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translate(180px,96px) scale(1)}50%{transform:translate(180px,95px) scale(1.012)}}
body.happy .mouth{d:path("M-13 -10q13 15 26 0")}
body.happy #bao{animation:hop .6s ease}
@keyframes hop{0%,100%{transform:translate(180px,96px)}40%{transform:translate(180px,88px)}}

/* opadające płatki w scenie */
.petals circle{fill:#f0b8cb; opacity:0}
.petals .p1{animation:drift 11s linear 1.5s infinite}
.petals .p2{animation:drift 14s linear 6s infinite}
.petals .p3{animation:drift 13s linear 9.5s infinite}
@keyframes drift{
  0%{opacity:0; transform:translate(0,0) rotate(0)}
  8%{opacity:.85}
  85%{opacity:.55}
  100%{opacity:0; transform:translate(42px,118px) rotate(220deg)}
}

/* ── zwój ── */
.scroll{margin:18px 14px 0; filter:drop-shadow(0 8px 18px rgba(80,58,25,.18)); position:relative}
.rod{
  height:16px; border-radius:9px; margin:0 -6px;
  background:linear-gradient(#a97c45,#7d5629 55%,#93693a);
  border:1px solid #6d4a22;
}
.sheet{
  background:linear-gradient(var(--paper2),var(--paper));
  border-left:2px solid var(--line); border-right:2px solid var(--line);
  padding:20px 18px 22px; position:relative;
  transition:height .38s cubic-bezier(.4,0,.2,1), opacity .26s ease;
}
.sheet.rolling{overflow:hidden}
/* pojedynczy płatek przelatujący przez zwój przy zmianie zagadki */
.fleck{
  position:absolute; top:10px; width:9px; height:9px; border-radius:60% 20% 60% 20%;
  background:#efb2c7; opacity:0; pointer-events:none; z-index:4;
  animation:fleck 1.25s ease-in forwards;
}
@keyframes fleck{
  0%{opacity:0; transform:translate(0,-6px) rotate(0)}
  20%{opacity:.95}
  100%{opacity:0; transform:translate(26px,86px) rotate(300deg)}
}
.sheet::before,.sheet::after{content:""; position:absolute; top:0; bottom:0; width:14px; pointer-events:none}
.sheet::before{left:0; background:linear-gradient(90deg,rgba(120,90,40,.10),transparent)}
.sheet::after{right:0; background:linear-gradient(270deg,rgba(120,90,40,.10),transparent)}

.qmeta{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.qno{font:600 12.5px/1 system-ui,sans-serif; color:var(--ink2); letter-spacing:.4px; text-transform:uppercase}
.pet{margin-left:auto; letter-spacing:2px; font-size:13px; color:var(--gold)}
.pet i{opacity:.28; font-style:normal}
.qtext{font-size:18.5px; line-height:1.62; margin:0}
.qnote{margin:12px 0 0; font-size:13.5px; font-style:italic; color:var(--ink2); border-left:3px solid var(--line); padding-left:10px}

.answer{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.answer input{
  flex:1 1 150px; min-width:0; font:400 18px/1.2 inherit; color:var(--ink);
  background:var(--paper2); border:2px solid var(--line); border-radius:12px; padding:13px 14px;
}
.answer input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,144,47,.18)}
.btn{
  font:600 16px/1 system-ui,sans-serif; border:none; border-radius:12px; padding:14px 18px;
  background:var(--accent); color:#fff8ef; cursor:pointer; box-shadow:var(--shadow);
}
.btn:hover{background:var(--accent2)}
.btn.ghost{background:transparent; color:var(--ink2); border:2px solid var(--line); box-shadow:none; padding:12px 14px; font-size:14.5px}
.btn.ghost:hover{border-color:var(--gold); color:var(--ink)}
.row{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}

.msg{margin-top:14px; font-size:15.5px; padding:11px 13px; border-radius:11px; border:2px solid var(--line); background:var(--paper2)}
.msg.no{border-color:var(--bad); color:var(--bad)}
.msg.yes{border-color:var(--ok); color:var(--ok); font-weight:600}
.hintbox{margin-top:14px; font-size:15.5px; background:rgba(201,144,47,.12); border:1px dashed var(--gold); border-radius:11px; padding:12px 13px}
.hintbox b{display:block; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--gold); margin-bottom:4px; font-family:system-ui,sans-serif}

.solved{margin-top:16px; border-top:1px solid var(--line); padding-top:14px}
.solved h4{margin:0 0 6px; font:600 12px/1 system-ui,sans-serif; letter-spacing:1px; text-transform:uppercase; color:var(--ink2)}
.solved p{margin:0 0 14px; font-size:16px; line-height:1.6}
.quote{display:flex; gap:12px; align-items:flex-start; background:rgba(201,144,47,.10); border-radius:12px; padding:13px 14px}
.quote .ch{font-size:26px; color:var(--accent); line-height:1}
.quote button.ch{
  font-family:inherit; font-size:30px; line-height:1; color:var(--accent); flex:0 0 auto;
  background:rgba(201,144,47,.14); border:1px solid rgba(201,144,47,.4);
  border-radius:12px; padding:6px 10px; cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.quote button.ch:hover{background:rgba(201,144,47,.26); transform:translateY(-1px)}
.quote button.ch:active{transform:scale(.94)}
.cnote{
  margin-top:10px; padding-top:8px; border-top:1px dashed var(--line);
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; font-size:14.5px;
}
.cnote b{font-size:21px; font-weight:400; color:var(--accent); line-height:1}
.cnote i{font-style:normal; font-weight:700; color:var(--gold); font-family:system-ui,sans-serif; font-size:14px}
.cnote span{color:var(--ink2)}

/* słowniczek wędrowca */
.glosn{font-size:13px; color:var(--ink2); margin:-2px 0 0}
.glossary{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:8px; margin-top:10px}
.gitem{
  display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:9px;
  border:1px solid var(--line); border-radius:12px; padding:8px 10px; background:var(--paper);
}
.gch{grid-row:1/3; font-size:26px; line-height:1; color:var(--accent)}
.gpy{font:700 12.5px/1.3 system-ui,sans-serif; color:var(--gold)}
.gmn{font-size:12.5px; line-height:1.35; color:var(--ink2)}
.gitem.dim{opacity:.45}
.gitem.dim .gch{color:var(--ink2)}
.gitem.dim .gmn{font-style:italic}
.quote q{display:block; font-size:16px; font-style:italic; quotes:"„" "”"}
.quote cite{display:block; margin-top:5px; font-size:12.5px; font-style:normal; color:var(--ink2)}

/* ── mały Bao przechodzący dołem zwoju ── */
.walker{
  position:absolute; left:0; bottom:-7px; width:66px; height:66px; z-index:6;
  pointer-events:none; transform:translateX(-72px); opacity:1; transition:opacity .45s ease;
}
.walker svg{width:100%; height:100%; overflow:visible}
.walker.out{opacity:0}
.walker.go{animation:walkIn 1.55s cubic-bezier(.32,.05,.36,1) forwards}
@keyframes walkIn{from{transform:translateX(-72px)} to{transform:translateX(var(--wx,120px))}}

.walker .wsh{fill:#6b5a3c; opacity:.22}
.walker .wskin{fill:var(--skin)}
.walker .wbelly{fill:var(--skinL)}
.walker .wrobe{fill:var(--robe)}
.walker .wdots circle{fill:#5b4630; opacity:.55}
.walker .weye path{stroke:#41301f; stroke-width:1.5; fill:none; stroke-linecap:round}
.walker .wmouth{stroke:#9c4526; stroke-width:1.6; fill:none; stroke-linecap:round}
.walker .wblush ellipse{fill:#e79a72; opacity:.5}
.walker .lg,.walker .wbody,.walker .bob,.walker .praise,.walker .spark circle{transform-box:fill-box; transform-origin:center}

.walker.go .bob{animation:bob .34s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(1px)} to{transform:translateY(-1.5px)}}
.walker.go .lg1{animation:legA .34s ease-in-out infinite alternate}
.walker.go .lg2{animation:legB .34s ease-in-out infinite alternate}
@keyframes legA{from{transform:translateX(-2.5px)} to{transform:translateX(2.5px)}}
@keyframes legB{from{transform:translateX(2.5px)} to{transform:translateX(-2.5px)}}

.walker .arms{transition:opacity .22s ease}
.walker .ab{opacity:0}
.walker.bow .ab{opacity:1}
.walker.bow .aw{opacity:0}
.walker.bow .wbody{animation:bowdip 1.25s cubic-bezier(.4,0,.3,1) 2}
@keyframes bowdip{
  0%{transform:none} 22%{transform:translateY(-1px)}
  45%,62%{transform:translateY(4.5px) scaleY(.93)}
  100%{transform:none}
}
.walker .praise{
  font:700 13px/1 "Noto Sans SC",system-ui,sans-serif; fill:var(--accent); text-anchor:middle; opacity:0;
}
.walker.bow .praise{animation:praise 2.9s .45s ease forwards}
@keyframes praise{
  0%{opacity:0; transform:translateY(7px) scale(.5)}
  14%{opacity:1; transform:translateY(0) scale(1)}
  40%{opacity:1; transform:translateY(-2px) scale(1.06)}
  82%{opacity:1; transform:translateY(-3px) scale(1)}
  100%{opacity:0; transform:translateY(-12px) scale(1)}
}
.walker .spark circle{fill:var(--gold); opacity:0}
.walker.bow .spark circle{animation:spark 1.25s .5s ease forwards}
.walker.bow .spark circle:nth-child(2){animation-delay:.72s}
.walker.bow .spark circle:nth-child(3){animation-delay:1.9s}
@keyframes spark{
  0%{opacity:0; transform:translateY(4px) scale(.4)}
  40%{opacity:.95; transform:translateY(-2px) scale(1)}
  100%{opacity:0; transform:translateY(-10px) scale(.6)}
}

/* ── mala ── */
.mala{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:20px 16px 0}
.mala i{width:11px; height:11px; border-radius:50%; background:var(--line); display:block}
.mala i.ok{background:var(--accent); box-shadow:0 0 0 2px rgba(196,101,42,.2)}
.mala i.sh{background:var(--ink2); opacity:.5}
.mala i.now{background:transparent; border:2px solid var(--gold); width:13px; height:13px; margin:-1px}

/* ── nakładki ── */
[hidden]{display:none !important}
.veil{position:fixed; inset:0; background:rgba(38,28,16,.55); backdrop-filter:blur(3px); z-index:50; display:grid; place-items:center; padding:18px}
.panel{
  background:var(--paper2); border:2px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  max-width:520px; width:100%; max-height:88vh; overflow:auto; padding:24px 22px;
}
.panel h2{margin:0 0 4px; font-size:23px}
.panel h3{margin:18px 0 6px; font-size:17px}
.panel p{margin:8px 0; font-size:16px; line-height:1.6}
.panel .big{font-size:44px; text-align:center; color:var(--accent); margin:0}
.panel ul{margin:8px 0; padding-left:20px; font-size:15.5px; line-height:1.6}
.panel .row{margin-top:18px}
.chip{display:inline-block; font:600 12.5px/1 system-ui,sans-serif; color:var(--ink2); border:1px solid var(--line); border-radius:99px; padding:6px 11px; margin:3px 4px 0 0}

@media (min-width:640px){
  body{font-size:18px}
  .scroll{margin:22px auto 0; max-width:640px}
  .sheet{padding:26px 28px 28px}
  .qtext{font-size:20px}
}
@media (prefers-reduced-motion: reduce){
  #bao,.petals circle,.fleck{animation:none}
  .walker.go{animation-duration:.01s}
  .walker.go .bob,.walker.go .lg1,.walker.go .lg2{animation:none}
  .sheet{transition:none}
}