@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --void:#0b0d12;
  --brass:#c9a15a;
  --brass-glow:#e8c98a;
  --ink:#ece6d8;
  --muted:#6b7080;
  --panel:rgba(15,17,22,0.94);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--void);font-family:'JetBrains Mono',monospace;}
#app{width:100%;height:100%;}
canvas{display:block;outline:none;}
#scene{position:fixed;inset:0;}
#scene-canvas{width:100%;height:100%;}

.boot-loading{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:13px;letter-spacing:0.1em;text-transform:uppercase;
}

#blazor-error-ui{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:1000;
  background:#5c1620;color:#ece6d8;padding:10px 16px;font-size:13px;
}
#blazor-error-ui .reload{color:#e8c98a;text-decoration:underline;margin-left:8px;}
#blazor-error-ui .dismiss{cursor:pointer;float:right;}

/* ---------- start overlay ---------- */
#start{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%, #1a1d25 0%, #090a0d 75%);
  cursor:pointer;
}
#start .card{
  text-align:center;border:1px solid rgba(201,161,90,0.25);
  padding:48px 64px;background:rgba(20,22,28,0.5);
}
#start h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:44px;color:var(--ink);letter-spacing:0.02em;margin-bottom:10px;}
#start .sub{color:var(--muted);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:28px;}
#start .enter{display:inline-block;border:1px solid var(--brass);color:var(--brass-glow);padding:10px 28px;font-size:12px;letter-spacing:0.15em;text-transform:uppercase;}
#start .hint{margin-top:20px;color:var(--muted);font-size:11px;letter-spacing:0.05em;}

/* ---------- hud ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;}
#crosshair{position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--brass-glow);opacity:0.7;}
#prompt{
  position:absolute;bottom:14%;left:50%;transform:translateX(-50%);
  color:var(--ink);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  background:rgba(12,13,17,0.7);border:1px solid rgba(201,161,90,0.35);padding:10px 20px;
  max-width:70vw;text-align:center;
}
#prompt b{color:var(--brass-glow);}
#label{position:absolute;top:5%;left:50%;transform:translateX(-50%);font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);}

#keyBadge{
  position:fixed;top:5%;right:4%;z-index:20;color:var(--brass-glow);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;opacity:0;transition:opacity .4s ease;border:1px solid rgba(201,161,90,0.35);
  padding:8px 14px;background:rgba(12,13,17,0.6);
}
#keyBadge.show{opacity:1;}

/* ---------- panel 2d ---------- */
#panel{
  position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--panel);
  border-left:1px solid rgba(201,161,90,0.25);z-index:30;transform:translateX(100%);
  transition:transform .45s cubic-bezier(.22,.8,.28,1);display:flex;flex-direction:column;padding:56px 40px 40px;
}
#panel.open{transform:translateX(0);}
#panel .eyebrow{color:var(--muted);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:8px;}
#panel .cover{
  width:100%;height:220px;margin-bottom:24px;border:1px solid rgba(201,161,90,0.3);
  display:flex;align-items:flex-end;padding:14px;
}
#panel .cover span{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:22px;color:var(--ink);}
#panel .cover{position:relative;overflow:hidden;}
#panel .cover img{position:absolute;inset:16px 16px 52px;width:calc(100% - 32px);height:calc(100% - 68px);object-fit:contain;}
#panel .cover span{position:relative;}
#panel a.launch{display:block;text-align:center;text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;padding:14px 18px;}
#panel h2{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:32px;color:var(--ink);letter-spacing:0.01em;margin-bottom:6px;}
#panel .genre{color:var(--brass-glow);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:22px;}
#panel .desc{color:#b9b4a6;font-size:13px;line-height:1.7;margin-bottom:auto;white-space:pre-line;}
#panel .stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 32px;border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08);padding:18px 0;}
#panel .stat .k{color:var(--muted);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px;}
#panel .stat .v{color:var(--ink);font-size:13px;}
#panel .actions{display:flex;gap:12px;}
#panel button{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;padding:14px 18px;border:1px solid transparent;cursor:pointer;background:none;}
#panel .launch{flex:1;background:var(--brass);color:#181a1f;font-weight:600;}
#panel .launch:hover{background:var(--brass-glow);}
#panel .back{flex:1;color:var(--muted);border-color:rgba(255,255,255,0.15);}
#panel .back:hover{color:var(--ink);border-color:rgba(255,255,255,0.3);}
#panel .back.full{flex:none;width:100%;}

/* ---------- pauza (po wciśnięciu Escape) ---------- */
#paused{
  position:fixed;inset:0;z-index:25;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,7,9,0.55);cursor:pointer;
}
.paused-card{
  text-align:center;border:1px solid rgba(201,161,90,0.25);
  padding:36px 64px;background:rgba(15,17,22,0.80);
}
.paused-title{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:32px;
  color:var(--ink);letter-spacing:0.04em;margin-bottom:10px;
}
.paused-hint{color:var(--muted);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;}

/* ---------- icon exhibit panel ---------- */
#panel .icon-frame{
  width:120px;height:120px;margin:0 auto 24px;
  border:2px solid var(--brass);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:rgba(0,0,0,0.4);
}
#panel .icon-frame img{width:100%;height:100%;object-fit:cover;}
#panel .icon-frame .icon-initial{
  font-family:'Cormorant Garamond',serif;font-size:52px;font-weight:700;
  color:var(--brass-glow);
}
#panel .icon-body{white-space:pre-line;}

/* ---------- zamek szyfrowy ---------- */
#codeModal{
  position:fixed;inset:0;z-index:40;display:none;
  align-items:center;justify-content:center;
  background:rgba(6,7,9,0.72);
}
#codeModal.open{display:flex;}
.codeCard{
  background:var(--panel);border:1px solid rgba(201,161,90,0.3);
  padding:36px 40px;width:min(360px,88vw);text-align:center;
}
.codeCard.shake{ animation:codeShake .42s ease; }
@keyframes codeShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(7px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(4px); }
}
.codeEyebrow{color:var(--muted);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:6px;}
.codeRoomName{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--ink);margin-bottom:22px;}
.codeSlots{display:flex;gap:8px;justify-content:center;margin-bottom:10px;}
.codeSlot{
  width:34px;height:42px;border:1px solid rgba(201,161,90,0.4);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:18px;color:var(--brass-glow);
  background:rgba(0,0,0,0.25);
}
.codeSlot.filled{border-color:var(--brass);}
.codeError{
  height:16px;color:#e07a7a;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:16px;opacity:0;transition:opacity .2s ease;
}
.codeError.show{opacity:1;}
.codeKeys{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:18px;}
.codeKeys button{
  font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--ink);
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  padding:12px 0;cursor:pointer;
}
.codeKeys button:hover{background:rgba(255,255,255,0.09);}
.codeKeys button.wide{grid-column:span 3;color:var(--muted);}
#codeCancel{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid rgba(255,255,255,0.15);background:none;padding:10px 20px;cursor:pointer;
}
#codeCancel:hover{color:var(--ink);border-color:rgba(255,255,255,0.3);}

/* ---------- toast ---------- */
#toast{
  position:fixed;bottom:40px;left:40px;right:40px;z-index:35;
  color:var(--brass-glow);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  opacity:0;transition:opacity .3s ease;text-align:center;pointer-events:none;
}
#toast.show{opacity:1;}

/* ---------- licznik rudy Animium ---------- */
#oreCounter{
  position:fixed;top:calc(5% + 44px);right:4%;z-index:20;color:#8ae6ff;font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;border:1px solid rgba(55,214,255,0.35);padding:8px 14px;background:rgba(12,13,17,0.6);
}
#oreCounter b{color:#e8fbff;}

/* ---------- przełącznik trybu niskiej wydajności ---------- */
.quality-toggle{
  margin-top:18px;background:rgba(12,13,17,0.6);border:1px solid rgba(255,255,255,0.15);color:var(--muted);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;padding:9px 16px;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
}
.quality-toggle:hover{color:var(--ink);border-color:rgba(255,255,255,0.3);}
.quality-toggle b{color:var(--ink);font-weight:600;}
.quality-toggle .dot{width:9px;height:9px;border-radius:50%;background:#3a3f4a;}
.quality-toggle.on{border-color:rgba(201,161,90,0.6);}
.quality-toggle.on .dot{background:var(--brass-glow);}
.quality-hint{margin-top:6px;color:var(--muted);font-size:10px;letter-spacing:0.04em;}
.start-quality{margin-top:6px;}

/* ---------- jednorazowe pytanie o tryb niskiej wydajności ---------- */
#lowperf{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(6,7,9,0.7);padding:16px;}
.lowperf-card{max-width:460px;border:1px solid rgba(201,161,90,0.35);background:var(--panel);padding:32px 36px;}
.lowperf-card .eyebrow{color:var(--muted);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:8px;}
.lowperf-card h2{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--ink);margin-bottom:14px;}
.lowperf-card p{color:#b9b4a6;font-size:13px;line-height:1.7;margin-bottom:12px;}
.lowperf-card p.small{font-size:11px;color:var(--muted);}
.lowperf-card .actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
.lowperf-card button{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;padding:13px 16px;border:1px solid transparent;cursor:pointer;flex:1;}
.lowperf-card .launch{background:var(--brass);color:#181a1f;font-weight:600;}
.lowperf-card .launch:hover{background:var(--brass-glow);}
.lowperf-card .back{background:none;color:var(--muted);border-color:rgba(255,255,255,0.15);}
.lowperf-card .back:hover{color:var(--ink);}

/* ---------- pseudo-gacha: odsłona karty ---------- */
#gacha{position:fixed;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;background:rgba(6,7,9,0.72);padding:16px;animation:gachaFade .35s ease;}
@keyframes gachaFade{from{opacity:0}to{opacity:1}}
.gacha-card{width:min(380px,100%);max-height:100%;overflow:auto;background:var(--panel);border:2px solid var(--rc);padding:20px 22px;
  box-shadow:0 0 40px color-mix(in srgb, var(--rc) 45%, transparent);animation:gachaPop .45s cubic-bezier(.2,1.4,.4,1);}
@keyframes gachaPop{from{transform:scale(.6) rotateY(80deg)}to{transform:scale(1) rotateY(0)}}
.gacha-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.gacha-rarity{font-weight:700;color:#0b0d12;background:var(--rc);padding:3px 9px;font-size:12px;letter-spacing:.1em;}
.gacha-stars{color:var(--rc);letter-spacing:.15em;}
.gacha-new{margin-left:auto;color:#0b0d12;background:var(--brass-glow);font-size:10px;font-weight:700;padding:3px 8px;letter-spacing:.12em;}
.gacha-art{border:1px solid var(--rc);aspect-ratio:400/540;overflow:hidden;background:#0b0d12;}
.gacha-art img{width:100%;height:100%;object-fit:cover;display:block;}
.gacha-card h2{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--ink);margin:14px 0 4px;}
.gacha-flavor{color:#b9b4a6;font-size:12px;line-height:1.6;font-style:italic;}
.gacha-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0;color:var(--muted);font-size:11px;}
.gacha-meta b{color:var(--ink);}
.gacha-card .actions{display:flex;gap:10px;flex-wrap:wrap;}
.gacha-card button{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px 14px;border:1px solid transparent;cursor:pointer;flex:1;}
.gacha-card .launch{background:var(--rc);color:#0b0d12;font-weight:700;}
.gacha-card .back{background:none;color:var(--muted);border-color:rgba(255,255,255,0.15);}
.gacha-card .back:hover{color:var(--ink);}
.gacha-note{margin-top:12px;color:var(--muted);font-size:10px;}
.rarity-ur .gacha-card{animation:gachaPop .45s cubic-bezier(.2,1.4,.4,1), urGlow 1.6s ease-in-out infinite alternate;}
@keyframes urGlow{from{box-shadow:0 0 30px rgba(255,95,162,.4)}to{box-shadow:0 0 70px rgba(255,95,162,.9)}}

/* ---------- HUNT MODE ---------- */
#huntBadge{position:fixed;top:5%;left:4%;z-index:20;color:#ff3a3a;font-size:11px;letter-spacing:0.18em;font-weight:700;
  border:1px solid rgba(255,58,58,0.5);padding:8px 14px;background:rgba(20,4,4,0.6);animation:huntPulse 1.4s ease-in-out infinite;}
@keyframes huntPulse{0%,100%{opacity:1}50%{opacity:.45}}
#huntBanner{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;
  animation:huntIn 3s ease forwards;}
@keyframes huntIn{0%{opacity:0}8%{opacity:1}80%{opacity:1}100%{opacity:0}}
#huntBanner.on{background:radial-gradient(ellipse at center, rgba(120,0,0,0.35), transparent 70%);}
.hunt-title{position:relative;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(28px,7vw,72px);letter-spacing:0.12em;
  color:#ff2a2a;text-shadow:0 0 18px rgba(255,0,0,0.7);text-align:center;padding:0 16px;}
#huntBanner.off .hunt-title{color:#8a9aa8;text-shadow:none;}
#huntBanner.on .hunt-title::before,#huntBanner.on .hunt-title::after{content:attr(data-text);position:absolute;inset:0;padding:0 16px;}
#huntBanner.on .hunt-title::before{color:#fff;opacity:.5;animation:huntGlitch .25s steps(2) infinite;clip-path:inset(0 0 55% 0);}
#huntBanner.on .hunt-title::after{color:#ff8a8a;opacity:.6;animation:huntGlitch .3s steps(2) infinite reverse;clip-path:inset(55% 0 0 0);}
@keyframes huntGlitch{0%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}100%{transform:translate(-1px,0)}}
.hunt-sub{margin-top:14px;color:#c9a8a8;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;}
#huntCaught{position:fixed;inset:0;z-index:46;pointer-events:none;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.9);animation:caught 1.4s ease-out forwards;}
#huntCaught div{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,8vw,80px);color:#2a0000;letter-spacing:0.1em;}
@keyframes caught{0%{background:rgba(255,255,255,0.95)}25%{background:rgba(120,0,0,0.85)}100%{background:rgba(0,0,0,0);opacity:0}}

/* ---------- pościg w HUNT MODE: pulsująca winieta + "zakłócenia" (sterowane z three-bridge.js setChaseFx) ---------- */
#chaseFx{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:1;
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(110,0,0,0.3) 80%, rgba(40,0,0,0.6) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px, transparent 2px, transparent 4px);
  box-shadow:inset 0 0 110px 20px rgba(170,0,0,0.35);}
#scene canvas{transform-origin:50% 50%;}

/* ---------- GAME OVER ---------- */
#gameOver{position:fixed;inset:0;z-index:60;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px;text-align:center;animation:goIn 1.2s ease;}
@keyframes goIn{from{opacity:0}to{opacity:1}}
.go-title{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(40px,10vw,110px);letter-spacing:0.14em;color:#b00000;
  text-shadow:0 0 30px rgba(200,0,0,0.6);animation:goPulse 2.4s ease-in-out infinite;}
@keyframes goPulse{0%,100%{opacity:1}50%{opacity:.7}}
.go-sub{margin-top:10px;font-family:'Cormorant Garamond',serif;font-size:22px;color:#7a6a6a;letter-spacing:0.08em;}
.go-timer{margin-top:36px;font-family:'JetBrains Mono',monospace;font-size:40px;color:#ece6d8;letter-spacing:0.1em;}
.go-hint{margin-top:10px;color:#5a5a62;font-size:11px;letter-spacing:0.08em;}
.go-retry{margin-top:36px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  padding:14px 26px;background:none;border:1px solid #b00000;color:#ff6a6a;cursor:pointer;}
.go-retry:hover{background:#2a0000;color:#fff;}

/* ---------- obrazy na ścianach: panel + powiększenie ---------- */
#panel .painting-frame{position:relative;border:6px solid #8a6d33;margin-bottom:22px;cursor:zoom-in;background:#000;box-shadow:0 0 0 1px rgba(0,0,0,.6) inset;}
#panel .painting-frame img{display:block;width:100%;height:auto;}
#panel .painting-zoom{position:absolute;right:8px;bottom:8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#ece6d8;
  background:rgba(0,0,0,.6);padding:4px 8px;}
#paintingZoom{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px;cursor:zoom-out;}
#paintingZoom img{max-width:100%;max-height:calc(100% - 40px);object-fit:contain;box-shadow:0 0 40px rgba(0,0,0,.8);}
#paintingZoom .pz-caption{margin-top:12px;color:#8a8a96;font-size:11px;letter-spacing:.12em;text-transform:uppercase;}