:root {
  font-family: Georgia, 'Times New Roman', serif;
  color: #fff8e9;
  background: #18120f;
  font-synthesis: none;
  --glass: rgba(27, 19, 15, .72);
  --gold: #e6c884;
  --ink: #2a1b13;
}
* { box-sizing: border-box; }
html, body, #app { margin: 0; width: 100%; height:100%; min-height: 100%; }
body { min-height: 100svh; overflow: hidden; background: #18120f; touch-action:none; }
button { font: inherit; }
.loading, .ending { min-height: 100svh; display: grid; place-items: center; align-content: center; gap: 18px; padding: 32px; text-align: center; background: radial-gradient(circle at 50% 35%, #493022, #18120f 65%); }
.loading .seal { display:grid; place-items:center; width:84px; height:84px; border:2px solid var(--gold); border-radius:50%; font-size:44px; color:var(--gold); }
.start-screen { min-height:100svh; position:relative; display:grid; place-items:center; padding:24px; background-image:var(--start-image); background-size:cover; background-position:center; }
.start-overlay { position:absolute; inset:0; background:linear-gradient(rgba(18,12,9,.2), rgba(18,12,9,.72)); backdrop-filter: blur(2px); }
.title-card { position:relative; width:min(420px, 92vw); padding:28px 24px 24px; border:1px solid rgba(230,200,132,.45); border-radius:28px; background:rgba(29,20,15,.76); box-shadow:0 24px 70px rgba(0,0,0,.38); text-align:center; backdrop-filter: blur(18px); }
.title-seal, .ending-seal { width:88px; height:88px; border-radius:50%; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.eyebrow { margin:12px 0 0; letter-spacing:.34em; font-size:.72rem; color:var(--gold); }
h1 { margin:2px 0 6px; font-size:clamp(2.4rem, 11vw, 4rem); font-weight:500; }
.subtitle { margin:0 0 24px; opacity:.82; }
.primary, .ghost, .action { border:0; border-radius:999px; min-height:50px; padding:12px 20px; cursor:pointer; }
.primary { width:100%; background:linear-gradient(#f2deb0, #d7b66c); color:#2a1b13; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.24); }
.ghost { width:100%; margin-top:10px; background:transparent; color:#fff8e9; border:1px solid rgba(255,255,255,.26); }
.title-card small { display:block; margin-top:18px; opacity:.55; }
.game-shell { position:relative; width:100%; height:100svh; overflow:hidden; background:#100d0b; }
.scene-viewport { position:absolute; inset:0; overflow:hidden; background:#100d0b; opacity:1; transition:opacity .26s ease; }
.scene-viewport.scene-fade-out { opacity:0; }
.scene-world { position:absolute; left:0; top:0; transform-origin:top left; background-image:var(--scene-image); background-size:var(--scene-fit, 100% 100%); background-repeat:no-repeat; background-position:var(--scene-position, center); will-change:transform; overflow:hidden; }
.cinematic-mode .scene-world { inset:0; width:100%; height:100%; transform:none !important; }
.cinematic-mode .world-light { inset:0; }
.world-light { position:absolute; inset:0; pointer-events:none; z-index:50; background:radial-gradient(circle at 58% 30%, rgba(255,244,198,.05), transparent 35%), linear-gradient(rgba(15,10,8,.02), rgba(15,10,8,.16)); mix-blend-mode:soft-light; }
.hud { position:absolute; z-index:3000; top:0; left:0; right:0; display:grid; grid-template-columns:48px 1fr 68px; gap:10px; align-items:center; padding:max(14px, env(safe-area-inset-top)) 16px 10px; pointer-events:none; }
.hud>* { pointer-events:auto; }
.scene-title { justify-self:center; padding:9px 15px; border-radius:999px; background:var(--glass); backdrop-filter: blur(12px); font-size:.92rem; box-shadow:0 6px 24px rgba(0,0,0,.2); }
.icon-btn, .inventory-btn { min-height:44px; border:0; border-radius:15px; color:#fff; background:var(--glass); backdrop-filter: blur(12px); cursor:pointer; }
.move-help { position:absolute; z-index:2800; left:50%; bottom:max(24px, env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:90vw; padding:10px 15px; border-radius:999px; background:rgba(25,18,14,.78); font-size:.82rem; box-shadow:0 8px 25px rgba(0,0,0,.25); transition:opacity .8s ease, transform .8s ease; pointer-events:none; }
.move-help.fade { opacity:0; transform:translate(-50%, 10px); }
.scene-caption { position:absolute; z-index:2200; left:0; right:0; bottom:88px; padding:20px 20px 8px; text-align:center; text-shadow:0 2px 8px #000; pointer-events:none; }
.scene-caption p { margin:0 auto; max-width:540px; font-size:1.05rem; line-height:1.45; }
.action-tray { position:absolute; z-index:2300; left:0; right:0; bottom:0; display:flex; justify-content:center; gap:10px; overflow-x:auto; padding:10px 16px calc(18px + env(safe-area-inset-bottom)); scrollbar-width:none; }
.action { flex:0 0 auto; min-width:130px; background:rgba(250,239,210,.94); color:var(--ink); font-weight:700; box-shadow:0 8px 26px rgba(0,0,0,.26); }

/* Bohaterka 2.5D – zaakceptowana karta postaci + warstwowa animacja kroku */
.player-anchor {
  position:absolute;
  width:calc(var(--player-height, 230px) * var(--player-width-ratio, .305));
  height:var(--player-height, 230px);
  transform:translate(-50%,-100%);
  transform-origin:50% 100%;
  pointer-events:none;
  will-change:left,top,width,height;
  contain:layout style;
}
.player-shadow {
  position:absolute;
  left:50%;
  bottom:-1.15%;
  width:70%;
  height:3.8%;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(31,19,12,.30);
  filter:blur(3px);
  opacity:.78;
  will-change:transform,opacity;
}
.character-rig {
  position:relative;
  width:100%;
  height:100%;
  transform-origin:50% 96%;
  animation:character-idle 4.2s infinite ease-in-out;
  will-change:transform;
}
.character-facing,
.character-front-view {
  position:absolute;
  inset:0;
  transform-origin:50% 96%;
}
.character-piece,
.character-back-view {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  transform-origin:50% 96%;
  user-select:none;
  -webkit-user-drag:none;
  image-rendering:auto;
  filter:drop-shadow(0 2px 1px rgba(25,15,11,.10));
}
/* Pięć kopii tej samej zaakceptowanej sylwetki jest przycinanych do części ciała.
   Dzięki temu ruch kończyn nie zmienia rysunku twarzy, włosów ani stroju. */
.piece-body      { clip-path:polygon(15% 0,88% 0,86% 58%,66% 63%,35% 63%,16% 57%); z-index:4; }
.piece-arm-left  { clip-path:polygon(0 25%,42% 23%,43% 65%,0 68%); transform-origin:29% 34%; z-index:3; }
.piece-arm-right { clip-path:polygon(60% 23%,100% 24%,100% 68%,58% 64%); transform-origin:72% 34%; z-index:3; }
.piece-leg-left  { clip-path:polygon(22% 51%,54% 50%,57% 100%,15% 100%); transform-origin:43% 54%; z-index:2; }
.piece-leg-right { clip-path:polygon(46% 50%,82% 51%,87% 100%,43% 100%); transform-origin:60% 54%; z-index:2; }
.character-back-view { display:none; }

.player-anchor[data-facing="up"] .character-front-view,
.player-anchor[data-facing="up-left"] .character-front-view,
.player-anchor[data-facing="up-right"] .character-front-view { display:none; }
.player-anchor[data-facing="up"] .character-back-view,
.player-anchor[data-facing="up-left"] .character-back-view,
.player-anchor[data-facing="up-right"] .character-back-view { display:block; }
.player-anchor[data-facing="left"] .character-facing,
.player-anchor[data-facing="down-left"] .character-facing,
.player-anchor[data-facing="up-left"] .character-facing { transform:scaleX(-1); }

.player-anchor.walking .character-rig {
  animation:character-walk var(--walk-duration,.42s) infinite cubic-bezier(.45,.05,.55,.95);
}
.player-anchor.walking .piece-arm-left  { animation:arm-a var(--walk-duration,.42s) infinite ease-in-out; }
.player-anchor.walking .piece-arm-right { animation:arm-b var(--walk-duration,.42s) infinite ease-in-out; }
.player-anchor.walking .piece-leg-left  { animation:leg-a var(--walk-duration,.42s) infinite ease-in-out; }
.player-anchor.walking .piece-leg-right { animation:leg-b var(--walk-duration,.42s) infinite ease-in-out; }
.player-anchor.walking .player-shadow   { animation:character-shadow var(--walk-duration,.42s) infinite ease-in-out; }
.player-anchor.walking.step-alt .character-rig,
.player-anchor.step-alt.walking .character-rig { animation-delay:calc(var(--walk-duration,.42s) * -.5); }
.player-anchor.walking.step-alt .piece-arm-left,
.player-anchor.walking.step-alt .piece-arm-right,
.player-anchor.walking.step-alt .piece-leg-left,
.player-anchor.walking.step-alt .piece-leg-right { animation-delay:calc(var(--walk-duration,.42s) * -.5); }

@keyframes character-idle {
  0%,100% { transform:translateY(0) rotate(0deg) scaleY(1); }
  45% { transform:translateY(-.25%) rotate(.10deg) scaleY(1.0015); }
  55% { transform:translateY(-.45%) rotate(-.10deg) scaleY(1.0025); }
}
@keyframes character-walk {
  0%   { transform:translateY(0) rotate(calc(var(--motion-lean,0deg) - .42deg)) scaleY(.999); }
  24%  { transform:translateY(-1.25%) rotate(var(--motion-lean,0deg)) scaleY(1.002); }
  50%  { transform:translateY(-.12%) rotate(calc(var(--motion-lean,0deg) + .42deg)) scaleY(.999); }
  74%  { transform:translateY(-1.20%) rotate(var(--motion-lean,0deg)) scaleY(1.002); }
  100% { transform:translateY(0) rotate(calc(var(--motion-lean,0deg) - .42deg)) scaleY(.999); }
}
@keyframes arm-a { 0%,100%{transform:rotate(4.2deg)} 50%{transform:rotate(-4.4deg)} }
@keyframes arm-b { 0%,100%{transform:rotate(-4.4deg)} 50%{transform:rotate(4.2deg)} }
@keyframes leg-a { 0%,100%{transform:rotate(-3.5deg) translateY(.1%)} 50%{transform:rotate(3.8deg) translateY(-.25%)} }
@keyframes leg-b { 0%,100%{transform:rotate(3.8deg) translateY(-.25%)} 50%{transform:rotate(-3.5deg) translateY(.1%)} }
@keyframes character-shadow {
  0%,50%,100% { transform:translateX(-50%) scaleX(1); opacity:.77; }
  25%,75% { transform:translateX(-50%) scaleX(.87); opacity:.62; }
}

/* Fragmenty tła rysowane nad postacią, gdy idzie za meblem / balustradą. */
.scene-occluder {
  position:absolute;
  inset:0;
  background-image:var(--scene-image);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
  pointer-events:none;
  will-change:z-index;
}

.walk-marker { position:absolute; z-index:90; width:34px; height:16px; transform:translate(-50%,-50%) scale(.5); border:2px solid rgba(255,239,182,.9); border-radius:50%; box-shadow:0 0 0 5px rgba(255,239,182,.08), 0 0 20px rgba(255,221,133,.42); opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; }
.walk-marker.visible { opacity:1; transform:translate(-50%,-50%) scale(1); animation:marker-pulse 1s infinite ease-in-out; }
@keyframes marker-pulse { 50%{box-shadow:0 0 0 9px rgba(255,239,182,0), 0 0 24px rgba(255,221,133,.55)} }

.scene-hotspot { position:absolute; z-index:1900; border:0; padding:0; margin:0; background:transparent; cursor:pointer; color:#fff; }
.hotspot-label { position:absolute; left:50%; bottom:calc(100% + 6px); transform:translate(-50%,5px); white-space:nowrap; padding:7px 10px; border-radius:12px; background:rgba(24,17,13,.84); font-size:.78rem; opacity:0; transition:.18s; pointer-events:none; box-shadow:0 5px 20px rgba(0,0,0,.25); }
.scene-hotspot:hover .hotspot-label, .scene-hotspot:focus-visible .hotspot-label { opacity:1; transform:translate(-50%,0); }
.hotspot-glint { position:absolute; left:50%; top:52%; width:9px; height:9px; transform:translate(-50%,-50%); border-radius:50%; background:rgba(255,232,162,.85); box-shadow:0 0 0 4px rgba(255,225,142,.10),0 0 15px rgba(255,222,128,.8); animation:glint 2.4s infinite ease-in-out; opacity:.66; pointer-events:none; }
@keyframes glint { 0%,70%,100%{transform:translate(-50%,-50%) scale(.7);opacity:.28} 82%{transform:translate(-50%,-50%) scale(1.2);opacity:1} }
@media (pointer:fine) { .hotspot-glint { opacity:.2; } .scene-hotspot:hover .hotspot-glint { opacity:1; } }

.toast { position:fixed; left:50%; bottom:max(78px, calc(25px + env(safe-area-inset-bottom))); transform:translateX(-50%); width:min(86vw,460px); padding:14px 18px; border-radius:18px; background:rgba(25,18,14,.93); color:#fff8e9; text-align:center; box-shadow:0 14px 42px rgba(0,0,0,.35); z-index:3000; pointer-events:none; }
.toast-pop { animation:toast-pop .22s ease-out; }
@keyframes toast-pop { from{transform:translate(-50%,12px);opacity:0} to{transform:translate(-50%,0);opacity:1} }
.modal-backdrop, .letter-backdrop { position:fixed; inset:0; z-index:4000; display:flex; align-items:flex-end; justify-content:center; padding:14px; background:rgba(8,6,5,.68); backdrop-filter:blur(8px); }
.sheet { width:min(520px,100%); max-height:80svh; overflow:auto; padding:14px 20px 24px; border-radius:28px 28px 18px 18px; color:#2a1b13; background:#f5ead2; }
.sheet-handle { width:54px; height:5px; border-radius:999px; background:#c4b59c; margin:0 auto 14px; }
.item-list { display:grid; gap:10px; margin:18px 0; }
.item-list article { display:grid; gap:4px; padding:14px; border:1px solid #d7c8ad; border-radius:16px; }
.item-list span { opacity:.72; font-size:.9rem; }
.letter-backdrop { align-items:center; overflow:auto; padding:18px; }
.letter-card { width:min(690px,96vw); max-height:94svh; overflow:auto; border-radius:22px; background:#241813; box-shadow:0 24px 80px rgba(0,0,0,.5); }
.letter-card img { display:block; width:100%; height:auto; }
.letter-actions { position:sticky; bottom:0; padding:14px; background:linear-gradient(transparent, rgba(36,24,19,.96) 28%); }
.ending { background:radial-gradient(circle at 50% 20%, #6b4a34, #18120f 68%); }
.ending h1 { font-size:clamp(2.2rem,10vw,4.2rem); }
.ending-note { opacity:.6; }
.ending .primary { width:min(360px,88vw); }

@media (min-width: 1000px) {
  .scene-viewport { max-width:1500px; left:50%; right:auto; width:min(100%,1500px); transform:translateX(-50%); box-shadow:0 0 80px rgba(0,0,0,.55); }
}
html,body.ta-game-page,#app{width:100%;height:100%;min-height:100%;margin:0}.ta-game-page{overscroll-behavior:none;}

/* Silnik Babylon.js 3D/2.5D — malowane tło + prawdziwa postać i geometria 3D */
.babylon-world {
  background-image:var(--scene-image);
  background-size:var(--scene-fit,100% 100%);
  background-position:var(--scene-position,center);
  background-repeat:no-repeat;
  overflow:hidden;
}
.babylon-canvas {
  position:absolute;
  inset:0;
  z-index:120;
  display:block;
  width:100%;
  height:100%;
  outline:0;
  background:transparent;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.babylon-mode .world-light { z-index:110; pointer-events:none; opacity:.18; }
.babylon-mode .scene-hotspot { z-index:1850; }
.scene-hotspot-3d .hotspot-glint { width:11px; height:11px; }
.engine-badge {
  position:absolute;
  z-index:1950;
  left:50%;
  top:calc(82px + env(safe-area-inset-top));
  transform:translateX(-50%);
  padding:7px 11px;
  border-radius:999px;
  background:rgba(20,14,11,.78);
  color:#f7e8c7;
  font:600 11px/1.2 system-ui,sans-serif;
  letter-spacing:.03em;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:opacity .7s ease, transform .7s ease;
  pointer-events:none;
}
.engine-badge.fade { opacity:0; transform:translate(-50%,-8px); }
.babylon-mode .scene-world { inset:0; width:100%; height:100%; transform:none !important; background-size:cover; background-position:center; }
@media (orientation:portrait) { .babylon-mode .scene-world { background-size:cover; } }
.babylon-mode .scene-world { inset:auto; }