@font-face{font-family:'IM Fell English';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/body.ttf') format('truetype')}
@font-face{font-family:'IM Fell English';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/body-italic.ttf') format('truetype')}
@font-face{font-family:'Uncial Antiqua';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/title.ttf') format('truetype')}
:root{
  --void:#050706; --crypt:#0c100f; --slate:#161b19; --stone:#232a27; --stone-hi:#37403b;
  --grave:#8e968f; --bone:#d8d2bd; --glow:#59ff7e; --glow-dim:#2a9a4a; --rust:#a8513a;
  --display:'Uncial Antiqua','Palatino Linotype',Georgia,serif;
  --body:'IM Fell English','Palatino Linotype',Georgia,serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .6  0 0 0 0 .65  0 0 0 0 .6  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--void);color:var(--bone);font-family:var(--body);font-size:18px;line-height:1.5}
body{overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%,rgba(40,120,70,.22),transparent 70%),
    radial-gradient(ellipse at 50% 120%,#101713,transparent 60%),var(--void)}
[hidden]{display:none!important}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}

/* Atmosphäre */
.atmos{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.fog{position:absolute;left:-30%;width:160%;height:55%;bottom:-8%;filter:blur(40px);opacity:.5;
  background:radial-gradient(ellipse at 30% 60%,rgba(120,170,140,.28),transparent 60%),
             radial-gradient(ellipse at 75% 50%,rgba(90,140,110,.22),transparent 55%);
  animation:drift 38s linear infinite alternate}
.fog-b{bottom:10%;opacity:.3;animation-duration:55s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translateX(-8%)}to{transform:translateX(8%)}}
.lightning{position:absolute;inset:0;background:radial-gradient(circle at 70% 10%,rgba(190,255,210,.5),transparent 55%);opacity:0}
body[data-screen=menu] .lightning{animation:flash 14s 2s infinite}
@keyframes flash{0%,93%,100%{opacity:0}94%{opacity:.35}95%{opacity:.05}96.5%{opacity:.25}98%{opacity:0}}
.graves{position:absolute;left:0;bottom:0;width:100%;height:20vh;min-height:90px}

.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* Intro: eine einzige inszenierte Sequenz */
#screen-intro{flex-direction:column;gap:1.2rem;text-align:center;background:var(--void);transition:opacity 1s}
#screen-intro.out{opacity:0}
.intro-line{font-family:var(--display);font-size:clamp(1.1rem,3.2vw,1.9rem);letter-spacing:.04em;margin:0;opacity:0;color:var(--grave)}
.l1{animation:inout 2.6s .4s forwards}
.l2{animation:inout 2.2s 2.8s forwards;color:var(--glow);text-shadow:0 0 18px var(--glow-dim)}
@keyframes inout{0%{opacity:0;filter:blur(8px)}25%,75%{opacity:1;filter:blur(0)}100%{opacity:0}}
.intro-eyes{position:absolute;top:58%;display:flex;gap:2.2rem;opacity:0;animation:eyes 1.8s 4.6s forwards}
.intro-eyes i{width:26px;height:10px;border-radius:50%;background:var(--glow);box-shadow:0 0 22px 6px var(--glow-dim)}
@keyframes eyes{0%{opacity:0;transform:scaleY(.1)}30%{opacity:1;transform:scaleY(1)}100%{opacity:1}}
.skip{position:absolute;right:1rem;bottom:1rem;background:none;border:0;color:var(--grave);cursor:pointer;text-decoration:underline;opacity:.7}

/* Hauptmenü – Grabstein */
.tomb{position:relative;width:min(92vw,470px);max-height:94vh;overflow:auto;padding:3.2rem 2rem 1.6rem;text-align:center;
  background:var(--grain),linear-gradient(180deg,var(--stone-hi),var(--stone) 18%,var(--slate));
  border:2px solid #0b0e0d;border-radius:230px 230px 10px 10px;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.035),inset 0 -40px 60px rgba(0,0,0,.45),0 0 60px rgba(60,200,110,.14),0 30px 70px rgba(0,0,0,.8);
  animation:rise 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.title{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,11vw,4rem);line-height:1;letter-spacing:.03em;color:#c9cfc6;
  text-shadow:0 2px 0 #0a0d0b,0 0 22px rgba(89,255,126,.35)}
.title span:last-child{color:var(--glow);text-shadow:0 0 12px var(--glow),0 0 40px var(--glow-dim);animation:pulse 5s ease-in-out infinite}
@keyframes pulse{50%{text-shadow:0 0 6px var(--glow),0 0 22px var(--glow-dim)}}
.subtitle{margin:.5rem 0 1.4rem;color:var(--grave);font-style:italic;font-size:.95rem}
.menu{display:grid;gap:.6rem}
.menu button,.row button,.filebtn,.toolbar button{
  cursor:pointer;border:1px solid #0a0d0b;border-radius:4px;padding:.65rem 1rem;
  background:var(--grain),linear-gradient(180deg,#2d3531,#1b211f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 6px rgba(0,0,0,.5),0 2px 0 #050706;
  transition:color .2s,box-shadow .25s,transform .15s}
.menu button{font-family:var(--display);font-size:1.15rem;letter-spacing:.05em}
.menu button:hover,.menu button:focus-visible,.row button:hover,.filebtn:hover,.toolbar button:hover{
  color:var(--glow);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 6px rgba(0,0,0,.5),0 0 18px rgba(89,255,126,.35)}
.menu button:active{transform:translateY(1px)}
.chips{list-style:none;margin:1.3rem 0 .2rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;font-size:.8rem;color:var(--grave)}
.chips li{padding:.1rem .6rem;border:1px solid #0b0e0d;border-radius:99px;background:rgba(0,0,0,.3)}
.chips li.ok{color:var(--glow);border-color:var(--glow-dim)}
.linkish{background:none;border:0;color:var(--grave);text-decoration:underline;cursor:pointer;font-size:.9rem}

/* Spielfläche */
.gamewrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:.7rem}
.frame{position:relative;aspect-ratio:4/3;width:min(100%,calc((100vh - 110px) * 4 / 3));background:#000;
  border:10px solid var(--stone);border-image:var(--grain),linear-gradient(135deg,var(--stone-hi),#101412 60%,var(--stone-hi)) 1;
  box-shadow:0 0 0 2px #050706,0 0 50px rgba(89,255,126,.18),0 24px 60px rgba(0,0,0,.8);overflow:hidden}
.frame::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
#game{position:absolute;inset:0;width:100%;height:100%}
#game canvas{image-rendering:pixelated}
.frame[data-filter=smooth] #game canvas{image-rendering:auto}
.frame[data-filter=crt] #game canvas{image-rendering:auto;filter:contrast(1.08) saturate(1.12) brightness(1.04)}
.frame[data-filter=crt]::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);mix-blend-mode:multiply}
.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.toolbar button{padding:.4rem .9rem;font-size:.9rem}


.loader{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1rem;text-align:center;background:rgba(5,7,6,.94)}
.loader.done{display:none}
.rune{width:54px;height:54px;border:3px solid var(--glow-dim);border-top-color:var(--glow);border-radius:50%;animation:spin 1.1s linear infinite;box-shadow:0 0 22px rgba(89,255,126,.3)}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{width:min(70%,320px);height:6px;background:#111;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--glow);box-shadow:0 0 10px var(--glow);transition:width .3s}
.loader pre{white-space:pre-wrap;text-align:left;max-width:92%;max-height:55%;overflow:auto;font:13px/1.4 ui-monospace,Consolas,monospace;color:#ffb4a0}

/* Dialoge */
dialog{border:0;padding:0;background:none;color:inherit;max-width:94vw}
dialog::backdrop{background:rgba(2,4,3,.8);backdrop-filter:blur(4px)}
dialog[open]{animation:pop .25s ease-out}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
.dlg{width:min(94vw,480px);max-height:88vh;overflow:auto;padding:1.4rem 1.6rem;margin:0;
  background:var(--grain),linear-gradient(180deg,var(--stone),var(--slate));border:2px solid #0a0d0b;border-radius:8px;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.03),0 0 40px rgba(89,255,126,.15),0 20px 60px #000}
.dlg.wide{width:min(94vw,640px)}
.dlg h2{margin:0 0 .6rem;font-family:var(--display);font-weight:400;color:var(--glow);text-shadow:0 0 14px var(--glow-dim)}
.hint{font-size:.85rem;color:var(--grave);margin:.4rem 0}.hint.warn{color:#d9b27a}
code{font-size:.85em;background:rgba(0,0,0,.4);padding:0 .3em;border-radius:3px}
.field,.check{display:grid;gap:.3rem;margin:.9rem 0}
.check{display:flex;align-items:center;gap:.6rem}
fieldset{border:1px solid #0b0e0d;border-radius:6px;margin:.6rem 0;display:grid;gap:.3rem}
legend{padding:0 .4rem;color:var(--grave)}
input[type=range]{accent-color:var(--glow)}
select,input[type=file]{background:#0c100f;border:1px solid #0b0e0d;border-radius:4px;padding:.4rem}
.row{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}.row.wrap{flex-wrap:wrap;justify-content:flex-start}
.filebtn{display:inline-block;font-size:.9rem}
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.4rem .8rem;margin-top:.6rem}
.keys button{display:flex;justify-content:space-between;gap:.6rem;width:100%;text-align:left;cursor:pointer;background:#0c100f;border:1px solid #0b0e0d;border-radius:4px;padding:.35rem .6rem}
.keys button.wait{border-color:var(--glow);color:var(--glow)}
.keys b{font-weight:400;color:var(--glow)}
.slots{list-style:none;margin:.6rem 0;padding:0;display:grid;gap:.5rem}
.slots li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.5rem .7rem;background:rgba(0,0,0,.3);border:1px solid #0b0e0d;border-radius:6px}
.slots li span{flex:1;min-width:140px}
.slots button{padding:.25rem .7rem;font-size:.85rem;cursor:pointer;background:#1b211f;border:1px solid #0b0e0d;border-radius:4px}
.slots button:hover:not(:disabled){color:var(--glow)}.slots button:disabled{opacity:.4;cursor:not-allowed}

#toasts{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;gap:.4rem;z-index:99;width:min(92vw,520px)}
.toast{padding:.6rem 1rem;background:#0c100f;border:1px solid var(--glow-dim);border-radius:6px;box-shadow:0 0 20px rgba(89,255,126,.2);animation:pop .25s}
.toast.err{border-color:var(--rust);color:#ffc7b5}

@media (max-width:560px){
  html,body{font-size:16px}.tomb{padding:2.6rem 1.1rem 1.2rem;border-radius:150px 150px 10px 10px}
  .frame{border-width:5px;width:100%}}
@media (max-height:520px) and (orientation:landscape){.toolbar{display:flex}.frame{width:min(100%,calc((100vh - 70px) * 4 / 3))}.gamewrap{padding:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.intro-line{opacity:1}}

#screen-menu{z-index:5}
body.has-game #screen-menu{background:rgba(3,5,4,.88);backdrop-filter:blur(3px)}

.gamewrap:fullscreen{height:100%;background:var(--void);justify-content:center}.gamewrap:fullscreen .frame{width:min(100%,calc((100dvh - 100px) * 4 / 3))}.gamewrap:fullscreen .toolbar{display:flex}
.bar i{width:35%;animation:loading 1.8s ease-in-out infinite alternate}@keyframes loading{to{transform:translateX(180%)}}
input[type=file]{width:100%;max-width:100%;font-size:.85rem}.filebtn{max-width:100%}.filebtn input{display:block;margin-top:.35rem}.chips li{max-width:100%;overflow-wrap:anywhere}.hint{overflow-wrap:anywhere}
@media(max-width:560px){.frame{width:min(100%,calc((100dvh - 160px) * 4 / 3))}.toolbar button{padding:.4rem .6rem}.dlg{padding:1rem}.keys{grid-template-columns:1fr}}