/* EscapeVerse → Edukacja wczesnoszkolna: escape roomy Polski (.esc-wpl „Zaczarowana Biblioteka”) i Matematyka (.esc-wma „Kosmiczna Rakieta”).
   Konsola dziecięca z angielski.css (.esc-en1, także jasna w jasnym motywie), tu tylko kolory pokoi, rysunki i finały. Animacje tylko transform/opacity. */
.tl-escape.wcz-esc { margin-top: 4.5rem; }
.wcz-esc .tl3d-kicker { color: #fff; background: linear-gradient(135deg, var(--wc), var(--wc2)); box-shadow: 0 12px 30px -12px var(--wc); }
.tl-escape.wcz-esc::before { background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--wc) 14%, var(--bg)), var(--bg) 70%); border-top-color: color-mix(in srgb, var(--wc) 26%, transparent); }
.wcz-esc-note { max-width: 720px; margin: 0 auto 1.2rem; text-align: center; color: var(--muted); font-size: .95rem; }

/* ── Polski: biblioteka (ciemne drewno, złoto i pomarańcz) ── */
.esc.esc-wpl { --c1: #FFC078; --c2: #FF922B; background: radial-gradient(120% 90% at 50% -10%, #5A3A22 0%, #3A2414 45%, #1F130A 100%); border-color: rgba(255, 192, 120, .35); }
.esc-wpl .esc-btn { color: #2B1600; background: linear-gradient(90deg, #FFC078, #FFE8CC 40%, #FF922B); }
.esc-wpl .wpl-wall { fill: #4A2E1A; }
.esc-wpl .wpl-sign { fill: #2B1A0E; stroke: #FFC078; stroke-width: 1.5; }
.esc-wpl .wpl-slot rect { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 192, 120, .35); }
.esc-wpl .wpl-slot text { font: 700 15px 'Space Grotesk', sans-serif; fill: #FFE8CC; opacity: 0; transition: opacity .4s; }
.esc-wpl .wpl-slot.cur rect { stroke: #FFD166; stroke-width: 2; }
.esc-wpl .wpl-slot.on rect { fill: rgba(255, 192, 120, .22); stroke: #FFC078; }
.esc-wpl .wpl-slot.on text { opacity: 1; }
.esc-wpl .wpl-shelf path { stroke: #8B5A2B; stroke-width: 4; stroke-linecap: round; }
.esc-wpl .wpl-door { fill: #6B4423; stroke: #FFC078; stroke-width: 2; }
.esc-wpl .wpl-door-l { stroke: #3E2612; stroke-width: 2; }
.esc-wpl .wpl-lock rect { fill: #FFC078; } .esc-wpl .wpl-lock path { stroke: #FFC078; }
.esc-wpl .wpl-plate { fill: #2B1A0E; stroke: #FFC078; stroke-width: 1.5; }
.esc-wpl .wpl-plate-txt, .esc-wma .wma-plate-txt { font: 700 8px 'Space Mono', monospace; letter-spacing: 1px; fill: #FFC078; }
.esc-wpl .esc-rig.is-err .wpl-plate { stroke: var(--bad); } .esc-wpl .esc-rig.is-err .wpl-plate-txt { fill: var(--bad); }
.esc-wpl .esc-life { color: #FFC078; background: rgba(255, 192, 120, .12); border-color: rgba(255, 192, 120, .45); }
.esc-wpl .esc-life svg, .esc-wma .esc-life svg { width: 18px; height: 18px; }
.esc-wpl .esc-door { background: radial-gradient(60% 60% at 50% 50%, #fff, #FFE8CC 25%, rgba(255, 192, 120, .35) 55%, transparent 75%), #1F130A; }
.esc-wpl .esc-door .fly, .esc-wma .esc-door .fly { width: 52%; }
.esc-wpl-dlg .esc-dlg-box { background: radial-gradient(120% 90% at 50% -10%, #5A3A22 0%, #3A2414 55%, #1F130A 100%); }

.wpl-fin { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.wpl-pic { font-size: 4rem; line-height: 1; }
.wpl-word { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.wpl-word span { min-width: 3.6rem; height: 3rem; padding: 0 .5rem; display: grid; place-items: center; border-radius: 12px;
  font: 700 1.4rem 'Space Grotesk', sans-serif; color: #fff; border: 2px dashed rgba(255, 255, 255, .45); }
.wpl-word span.on { border-style: solid; border-color: var(--ok); background: rgba(124, 242, 154, .14); }
.wpl-syls { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.wpl-sy { min-width: 4rem; padding: .6rem .9rem; border-radius: 14px; cursor: pointer; font: 700 1.3rem 'Space Grotesk', sans-serif; color: #2B1600;
  background: linear-gradient(180deg, #FFE8CC, #FFC078); border: 0; box-shadow: 0 5px 0 #C76B1C; transition: transform .12s, opacity .2s; }
.wpl-sy:hover:not(:disabled) { transform: translateY(-2px); }
.wpl-sy:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #C76B1C; }
.wpl-sy:disabled { opacity: .3; cursor: default; }
.wpl-sy:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.wpl-pass { font-size: 1.05rem; color: #FFE8CC; }
.wpl-pass b { font: 700 1.3rem 'Space Grotesk', sans-serif; color: #fff; letter-spacing: 1px; }
.wpl-pass span { font-size: 1.6rem; vertical-align: middle; }

/* ── Matematyka: kosmos (granat, błękit i żółć) ── */
.esc.esc-wma { --c1: #74C0FC; --c2: #FFD43B; background: radial-gradient(120% 90% at 50% -10%, #1F2F6B 0%, #111A44 45%, #070B22 100%); border-color: rgba(116, 192, 252, .35); }
.esc-wma .esc-btn { color: #0B1A33; background: linear-gradient(90deg, #74C0FC, #D0EBFF 40%, #FFD43B); }
.esc-wma .wma-sky { fill: #0D1640; } .esc-wma .wma-stars circle { fill: #fff; opacity: .8; }
.esc-wma .wma-planet { fill: #F59F00; } .esc-wma .wma-ring { fill: none; stroke: #FFD8A8; stroke-width: 2; }
.esc-wma .wma-body { fill: #E9ECEF; stroke: #ADB5BD; stroke-width: 1.5; }
.esc-wma .wma-fin { fill: #E03131; }
.esc-wma .wma-win { fill: #1C7ED6; stroke: #fff; stroke-width: 2; }
.esc-wma .wma-flame { fill: #FFD43B; opacity: 0; transform-box: fill-box; transform-origin: top center; }
.esc-wma .wma-rocket { transition: transform 1.4s cubic-bezier(.5, 0, .9, .4); }
.esc-wma .wma-rocket.go { transform: translateY(-190px); }
.esc-wma .wma-rocket.go .wma-flame { opacity: 1; animation: wma-flame .12s linear infinite alternate; }
@keyframes wma-flame { to { transform: scaleY(1.35); } }
.esc-wma .wma-pad { fill: #495057; }
.esc-wma .wma-gauge { fill: rgba(255, 255, 255, .06); stroke: #74C0FC; stroke-width: 1.5; }
.esc-wma .wma-seg { fill: rgba(255, 255, 255, .08); transition: fill .35s; }
.esc-wma .wma-seg.cur { fill: rgba(255, 212, 59, .35); }
.esc-wma .wma-seg.on { fill: #FFD43B; }
.esc-wma .wma-gl { font: 700 7px 'Space Mono', monospace; letter-spacing: 1px; fill: #74C0FC; }
.esc-wma .wma-plate { fill: #0B1230; stroke: #74C0FC; stroke-width: 1.5; }
.esc-wma .wma-plate-txt { fill: #74C0FC; }
.esc-wma .esc-rig.is-err .wma-plate { stroke: var(--bad); } .esc-wma .esc-rig.is-err .wma-plate-txt { fill: var(--bad); }
.esc-wma .esc-life { color: #74C0FC; background: rgba(116, 192, 252, .12); border-color: rgba(116, 192, 252, .45); }
.esc-wma .esc-door { background: radial-gradient(60% 60% at 50% 50%, #fff, #D0EBFF 25%, rgba(116, 192, 252, .35) 55%, transparent 75%), #070B22; }
.esc-wma-dlg .esc-dlg-box { background: radial-gradient(120% 90% at 50% -10%, #1F2F6B 0%, #111A44 55%, #070B22 100%); }

.wma-fin { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.wma-clue { margin: 0; padding: .6rem 1rem; border-radius: 12px; text-align: center; font: 700 1.1rem 'Space Grotesk', sans-serif; color: #FFE066;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 212, 59, .45); }
.wma-code { display: flex; gap: .45rem; }
.wma-code span { width: 3rem; height: 3.4rem; display: grid; place-items: center; border-radius: 12px; font: 700 1.9rem 'Space Mono', monospace; color: #fff;
  background: rgba(0, 0, 0, .4); border: 2px solid #74C0FC; }
.wma-code.is-short { animation: wma-shake .4s ease; }
@keyframes wma-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.wma-pad { display: grid; grid-template-columns: repeat(3, 4.2rem); gap: .45rem; }
.wma-key { height: 3.1rem; border-radius: 12px; cursor: pointer; font: 700 1.35rem 'Space Grotesk', sans-serif; color: #0B1A33; background: linear-gradient(180deg, #E7F5FF, #A5D8FF);
  border: 0; box-shadow: 0 4px 0 #4D8FCC; transition: transform .1s; }
.wma-key:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #4D8FCC; }
.wma-key:disabled { opacity: .5; cursor: default; }
.wma-key:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wma-key--x { background: linear-gradient(180deg, #FFE3E3, #FFA8A8); box-shadow: 0 4px 0 #C92A2A; font-size: 1.1rem; }
.wma-key--ok { font-size: .95rem; background: linear-gradient(180deg, #FFF3BF, #FFD43B); box-shadow: 0 4px 0 #E67700; }

/* ── Jasny motyw: jasne konsole jak w angielskim ── */
body.light .esc.esc-wpl { --c1: #C2410C; --c2: #A61E4D; background: linear-gradient(180deg, #FFF8F0 0%, #FFEEDD 100%); }
body.light .esc.esc-wma { --c1: #1864AB; --c2: #5F3DC4; background: linear-gradient(180deg, #F3F8FF 0%, #E5EEFF 100%); }
body.light .wpl-word span { color: #3A2414; border-color: rgba(58, 36, 20, .35); }
body.light .wpl-word span.on { color: #14532D; background: #EBFBEE; border-color: #2B8A3E; }
body.light .wpl-pass { color: #3A4256; } body.light .wpl-pass b { color: #111827; }
body.light .wma-clue { color: #7A4B00; background: #FFF9DB; border-color: #FCC419; }
body.light .wma-code span { color: #0B1A33; background: #fff; border-color: #1C7ED6; }