@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

:root{
  --bg:#171615; --rust1:#8b4513; --rust2:#cd853f; --rust3:#6b3d22;
  --text:#e7dcc8; --muted:#b9a68a; --gold:#e6d79f; --gold-deep:#b8860b;
  --line:#3a3129; --chip:#231f1c; --chip-border:#4c4036;
}
*{box-sizing:border-box} html,body{min-height:100%}
body{ margin:0; background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing:.2px; line-height:1.55;
  background-image:
    radial-gradient(1200px 600px at -10% -20%, rgba(205,133,63,.15), transparent 70%),
    radial-gradient(900px 500px at 120% 120%, rgba(139,69,19,.18), transparent 60%),
    radial-gradient(800px 500px at 50% 10%, rgba(230,215,159,.05), transparent 70%);
}
.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:16px 16px 24px;
}
.topbar{ width:100%; max-width:760px; margin:0 auto; padding:22px 18px 6px; display:flex; align-items:center; justify-content:space-between; }
.brand{
  position:relative;
  display:inline-block;
  font-family:'Special Elite', monospace;
  font-weight:400;
  font-size:44px;
  margin:0;
  color:var(--gold);
  letter-spacing:2px;
  text-shadow:
    -1px 0 rgba(255,0,0,.35),
     1px 0 rgba(0,255,255,.32),
     0 2px 4px rgba(0,0,0,.8);
  filter:contrast(125%) grayscale(28%) blur(0.3px);
  transform:rotate(-1deg);
}

/* leichte Abrieb-/Rauschen-Textur */
.brand::after{
  content:"";
  position:absolute;
  inset:-3px;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.25;
  background-image:
    repeating-linear-gradient(120deg, rgba(0,0,0,.22) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(60deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);
}

/* kurzer Glitch-Zustand – wird per JS sporadisch aktiviert */
.brand.glitch{
  text-shadow:
    -2px 0 rgba(255,0,0,.65),
     2px 0 rgba(0,255,255,.6),
     0 0 8px rgba(0,0,0,.9);
  filter:contrast(140%) grayscale(35%) blur(0.4px);
  transform:rotate(-2deg) translateX(-1px);
}
.tools{ display:flex; gap:10px; align-items:center }
.theme{ background:transparent; border:0; font-size:20px; cursor:pointer; color:inherit; opacity:.9; }
.theme:hover{ opacity:1; transform:translateY(1px) }
.stage{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:16px 22px 30px;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(76,64,54,.8);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.06) 0, transparent 55%),
    radial-gradient(circle at 90% 0%, rgba(255,248,220,.04) 0, transparent 60%),
    repeating-linear-gradient(135deg, rgba(40,34,30,.9) 0 2px, rgba(30,26,23,.96) 2px 4px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.85),
    inset 0 0 18px rgba(0,0,0,.7);
}
.stage:before{
  content:'';
  position:absolute;
  inset:-8px;
  pointer-events:none;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(250,235,215,.08), transparent 65%),
    radial-gradient(140% 160% at 50% 120%, rgba(0,0,0,.85), transparent 60%),
    radial-gradient(80% 60% at 50% 10%, rgba(230,215,159,.08), transparent 70%);
  mix-blend-mode:soft-light;
  opacity:.95;
}
.switchers{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:4px }
@media (max-width:720px){ .switchers{ grid-template-columns:1fr } }
.mood>span,.game>span{ display:block; color:var(--muted); margin-bottom:8px; text-align:center; font-weight:600 }
.mood-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center }
.chip{
  background:linear-gradient(145deg, #231f1c, #1b1715);
  color:inherit;
  border:1px solid var(--chip-border);
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 4px rgba(0,0,0,.75),
    0 0 0 1px rgba(0,0,0,.6);
  transition:
    filter .18s ease,
    transform .06s ease,
    border-color .2s ease,
    box-shadow .25s ease;
}
.chip-small{ padding:8px 12px } .chip:hover{
  filter:brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 3px 8px rgba(0,0,0,.8),
    0 0 14px rgba(205,133,63,.22);
} .chip:active{ transform:translateY(1px) }
.chip.active{
  border-color:#a2773f;
  box-shadow:
    inset 0 0 0 1px rgba(209,170,87,.7),
    0 0 24px rgba(209,170,87,.4);
  filter:brightness(1.06);
}
.numbers{ text-align:center; margin:18px 0 6px }
.row.main{ font-family: Georgia, 'Times New Roman', serif; font-size:46px; font-weight:800; color:var(--gold);
  letter-spacing:2px; text-shadow: 0 0 2px rgba(0,0,0,.6), 1px 1px 2px rgba(107,61,34,.8); }
.row.main .num{
  display:inline-block;
  min-width:2.2ch;
  text-align:right;
  margin:0 .42ch;
  padding:3px 4px 4px;
  border-radius:10px;
  background:radial-gradient(circle at 30% 0%, rgba(255,255,255,.07), transparent 55%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(0,0,0,.65);
}
.row.euro{ margin-top:12px; color:var(--muted); display:flex; gap:10px; justify-content:center; align-items:center }
.row.euro span:first-child{ opacity:.9; font-weight:600 }
.whisper{ text-align:center; margin:18px 0 0; color:#d2b48c; font-family: Georgia, serif; font-size:22px; font-weight:700; opacity:.95;
  text-shadow: 0 0 3px rgba(139,69,19,.45); }
.eyes{ position:absolute; left:0; right:0; bottom:120px; height:110px; pointer-events:none; opacity:0; transition:opacity .9s ease }
.eye{ position:absolute; width:92px; height:92px; border-radius:50%; filter:blur(3px);
  background: radial-gradient(closest-side, #f2d892 0%, #d1aa57 35%, rgba(209,170,87,.35) 55%, rgba(0,0,0,.0) 70%);
  box-shadow: 0 0 28px rgba(209,170,87,.35); animation:blink 6s infinite ease-in-out; }
.eye.left{ left:140px; top:18px; transform:scale(.95) } .eye.right{ right:140px; top:30px; }
@keyframes blink{ 0%, 90%, 100%{ filter:blur(3px) brightness(1.0) } 94%{ filter:blur(5px) brightness(.85) } }
.actions{ display:flex; flex-direction:column; gap:14px; margin-top:26px }
.btns{ display:flex; justify-content:space-between; align-items:center; gap:16px }
.btn{
  border-radius:14px;
  padding:12px 18px;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.3px;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 0%, #40342b, #221e1b 60%, #181412 100%);
  color:#e7dcc8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 3px 6px rgba(0,0,0,.8),
    0 0 0 1px rgba(0,0,0,.6);
  transition:
    filter .2s ease,
    transform .06s ease,
    box-shadow .2s ease;
}
.btn:hover{
  filter:brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 5px 14px rgba(0,0,0,.95),
    0 0 20px rgba(209,170,87,.28);
} .btn:active{ transform:translateY(1px) }
.btn.primary{
  background:linear-gradient(#e6d79f,#caa963,#8b5a2b);
  color:#22160f;
  box-shadow:
    inset 0 1px 0 #fff8,
    0 0 14px rgba(139,69,19,.26),
    0 4px 10px rgba(0,0,0,.85);
}
.btn.ghost{
  background:transparent;
  color:#c9b99e;
  border-color:#57483c;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.7),
    0 2px 6px rgba(0,0,0,.7);
}
.btn[disabled]{ opacity:.55; cursor:not-allowed }
.foot{ width:100%; max-width:760px; margin:0 auto; padding:0 18px 26px; text-align:center; color:#b29c7b }
body.mode-fate .eyes{ opacity:1 } body.mode-neutral .eyes, body.mode-ignorant .eyes{ opacity:0 }
@media (max-width:500px){ .row.main{ font-size:40px } .eye.left{ left:90px } .eye.right{ right:90px } }
/* Atmospheric breathing */
@keyframes breath {
  0% { opacity:1; }
  50% { opacity:0.97; }
  100% { opacity:1; }
}
body {
  animation: breath 14s ease-in-out infinite;
}

/* Micro flicker */
@keyframes microFlicker {
  0%, 100% { filter:brightness(1); }
  50% { filter:brightness(0.92); }
}
.flicker {
  animation: microFlicker 0.12s ease-out;
}

.app::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.06;
  mix-blend-mode:soft-light;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 4px);
  z-index:0;
}
.app>*{
  position:relative;
  z-index:1;
}

/* Bedeutungs- und Muster-Hervorhebung für Zahlen */
.num{
  position:relative;
}
.num.sacred{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(209,170,87,.9),
    0 0 18px rgba(209,170,87,.55);
}
.num.cursed{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(120,20,20,.9),
    0 0 14px rgba(120,20,20,.6);
  color:#f4dcdc;
}
.num.prime:not(.sacred):not(.cursed){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 0 1px rgba(139,69,19,.9);
}
.num.silent{
  opacity:.8;
}

/* Schicksalsmodus – subtile Verstimmung */
body.fate-mode .stage{
  box-shadow:
    0 22px 46px rgba(0,0,0,.95),
    inset 0 0 26px rgba(0,0,0,.85),
    0 0 32px rgba(209,170,87,.28);
  border-color:rgba(209,170,87,.75);
}
body.fate-mode .brand::after{
  opacity:.4;
}
body.fate-mode .whisper{
  color:#f2e4c0;
}

/* Visuelle "Geräusche der Zahlen" – kurzer Scanline-Effekt beim Ziehen */
.numbers{
  position:relative;
}
.numbers.playtone::after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  top:-30%;
  height:160%;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:screen;
  background-image:
    linear-gradient(
      to bottom,
      rgba(250,245,230,0) 0%,
      rgba(250,245,230,0.6) 45%,
      rgba(250,245,230,0.9) 50%,
      rgba(250,245,230,0.6) 55%,
      rgba(0,0,0,0) 100%
    );
  animation:scanlineSweep 260ms ease-out;
}
@keyframes scanlineSweep{
  0%{ transform:translateY(-120%); opacity:0;}
  20%{ opacity:.18;}
  100%{ transform:translateY(120%); opacity:0;}
}

/* Subtiler Text-Blur – wie alte Optik */
body, .title, .numbers, .num {
  text-shadow:
    0 0 1px rgba(255,255,255,0.25),
    0 0 2px rgba(0,0,0,0.35);
}

/* Augen-Flackern (Opacity minimal) */
.eye {
  animation: eyeFlicker 12s infinite;
}

@keyframes eyeFlicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.75; }
  98% { opacity: 0.9; }
}

.eye.flicker {
  opacity: 0.7;
}


/* ===== All-Layers Demo (subtil, aber vollständig) ===== */

/* Dynamische Vignette (über JS-Variable steuerbar) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  background:
    radial-gradient(120% 95% at 50% 45%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 56%,
      rgba(0,0,0,.18) 72%,
      rgba(0,0,0,.55) 100%);
  opacity: var(--vig, .55);
  mix-blend-mode:multiply;
}

/* Mikro-Frame-Dim (wie Wimpernschlag) */
body.micro-dim::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9998;
  background: rgba(0,0,0,.18);
  animation: microDim 90ms linear;
}

@keyframes microDim{
  0%{ opacity:0; }
  15%{ opacity:1; }
  100%{ opacity:0; }
}

/* Text-Schärfe: manchmal minimal klarer/unscharfer */
body.text-shift .title,
body.text-shift .numbers,
body.text-shift .num,
body.text-shift button{
  text-shadow:
    0 0 0.5px rgba(255,255,255,0.20),
    0 0 2.2px rgba(0,0,0,0.42);
  filter: saturate(1.02);
}

/* Symbol-Blitz (extrem selten) */
#sigil{
  position:fixed;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  z-index:9997;
  font-size: 36px;
  letter-spacing: 2px;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  filter: blur(.2px);
  text-shadow: 0 0 10px rgba(255,255,255,.12), 0 0 24px rgba(0,0,0,.55);
}
#sigil.on{
  animation: sigilFlash 220ms ease-out;
}
@keyframes sigilFlash{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.96);}
  40%{opacity:.85;}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.02);}
}

/* Zahlen-Echo (Ghost) */
#echo{
  position:absolute;
  inset:auto 0 10px 0;
  margin:auto;
  width:100%;
  text-align:center;
  font-family: inherit;
  font-size: 20px;
  opacity:0;
  pointer-events:none;
  filter: blur(.35px);
  text-shadow: 0 0 14px rgba(0,0,0,.6);
}
#echo.on{
  animation: echoFade 420ms ease-out;
}
@keyframes echoFade{
  0%{opacity:0;}
  40%{opacity:.35;}
  100%{opacity:0;}
}

/* Augen minimal asynchron (ein Hauch) */
.eye.eye-a{ filter: brightness(1.02); }
.eye.eye-b{ filter: brightness(.98); }