* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  margin: 0;
  padding: 20px 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family, Arial, sans-serif);
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

/* APP-WRAPPER — wie beim Fahrstuhl */
#app {
  width: 90%;
  max-width: 380px;
  background: rgba(13,13,26,0.88);
  border-radius: 20px;
  border: 1px solid rgba(201,168,76,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 28px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

/* INTRO */
#intro {
  text-align: center;
  margin-bottom: 16px;
  width: 100%;
}
#intro-text {
  font-size: 13px;
  color: rgba(232,213,160,0.8);
  line-height: 1.6;
  letter-spacing: 0.3px;
}
#intro-date {
  font-size: 28px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: var(--color-gold, #c9a84c);
  letter-spacing: 6px;
  text-shadow: 0 0 14px rgba(201,168,76,0.7);
  margin-top: 6px;
}

/* SCHACHT — wie beim Fahrstuhl, feste Höhe */
#shaft {
  width: 100%;
  position: relative;
  background: rgba(8,8,20,0.5);
  border: 2px solid #2a2a4a;
  border-radius: 10px;
  overflow: hidden;
  height: 320px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.7);
}

/* INHALT INNEN — wie beim Fahrstuhl */
#vault-inside {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 14px 0;
  text-align: center;
  z-index: 1;
  overflow: hidden;
}
.vi-title  { font-size:16px;color:var(--color-gold,#c9a84c);font-weight:bold;letter-spacing:1.5px;margin-bottom:8px; }
.vi-div    { width:36px;height:1px;background:rgba(201,168,76,0.3);margin:0 auto; }
.vi-block  { font-size:14px;color:#e8d5a0;font-weight:bold;margin:6px 0 0; }
.vi-ort    { font-size:12px;color:rgba(200,185,160,0.8);line-height:1.5;margin-top:4px; }
.vi-msg    { font-size:12px;color:rgba(200,185,160,0.6);font-style:italic;margin-top:4px; }
.vi-sender { font-size:13px;color:var(--color-gold,#c9a84c);font-weight:bold;margin-top:4px; }
#gold-img  { width:100%;display:block;margin-top:auto;position:absolute;bottom:0;left:0; }

/* TÜR — wie beim Fahrstuhl die Türen */
#door {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #252538, #2e2e48);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 10px 8px;
  transition: transform 1.2s cubic-bezier(0.4,0,0.2,1);
  transform-origin: left center;
}
#door.open { transform: perspective(700px) rotateY(-105deg); }

.door-inner-rim { position:absolute;inset:8px;border:1px solid rgba(255,255,255,0.04);border-radius:4px;pointer-events:none; }
.hinge { position:absolute;left:-4px;width:8px;height:20px;background:linear-gradient(90deg,#444,#777,#444);border-radius:3px;z-index:20; }
.hinge-top{top:14%;}.hinge-bottom{bottom:14%;}
#bolts-l,#bolts-r { position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;width:12px;z-index:15; }
#bolts-l{left:-6px;}#bolts-r{right:-6px;}
.bolt-cyl { width:8px;height:22px;background:linear-gradient(90deg,#3a3a3a,#555,#3a3a3a);border-radius:4px;border:1px solid #222;transition:transform 0.5s ease 0.3s; }
.unlocking #bolts-l .bolt-cyl{transform:translateX(-8px);}
.unlocking #bolts-r .bolt-cyl{transform:translateX(8px);}

/* RAD */
#dial-wrap { display:flex;justify-content:center;margin-bottom:6px; }
#dial-svg  { width:110px;height:110px;filter:drop-shadow(0 0 5px rgba(201,168,76,0.3));transition:transform 0.25s cubic-bezier(0.4,0,0.2,1); }

/* SLOTS */
#slots-wrap { display:flex;align-items:flex-end;gap:5px;margin-bottom:6px; }
.slot-group { display:flex;flex-direction:column;align-items:center;gap:3px; }
.slot-label { font-size:7px;font-family:'Courier New',monospace;letter-spacing:2px;color:rgba(201,168,76,0.4); }
.slot-row   { display:flex;gap:3px; }
.slots-sep  { font-size:16px;color:rgba(201,168,76,0.35);padding-bottom:2px; }

.slot {
  width:36px;height:44px;
  background:#111;border:2px solid #2a2a2a;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Courier New',monospace;font-size:24px;font-weight:bold;color:#3a3a3a;
  transition:border-color 0.3s,color 0.3s,background 0.3s,box-shadow 0.3s;
}
.slot.active { border-color:#c9a84c;color:#c9a84c;background:#1a1608;box-shadow:0 0 10px rgba(201,168,76,0.4);animation:slot-blink 1s ease-in-out infinite; }
.slot.locked { border-color:#1D9E75;color:#1D9E75;background:#081a10;animation:none; }
.slot.wrong  { border-color:#E24B4A;color:#E24B4A;background:#1a0808;animation:none; }
@keyframes slot-blink { 0%,100%{box-shadow:0 0 10px rgba(201,168,76,0.5);}50%{box-shadow:0 0 2px rgba(201,168,76,0.1);} }

/* GRIFF */
#handle { width:36px;height:36px;border-radius:50%;background:#222;border:3px solid #444;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.8s cubic-bezier(0.4,0,0.2,1),border-color 0.3s,box-shadow 0.3s;margin:0 auto 3px;-webkit-tap-highlight-color:transparent; }
#handle:hover,#handle.ready{border-color:#c9a84c;box-shadow:0 0 12px rgba(201,168,76,0.6);}
#handle.turn{transform:rotate(90deg);border-color:#1D9E75;}
#handle-bar{width:16px;height:5px;background:#555;border-radius:3px;}
#door-status{font-size:7px;font-family:'Courier New',monospace;letter-spacing:2px;color:rgba(201,168,76,0.18);text-align:center;}

/* BEDIENUNG */
#controls {
  width:100%;margin-top:14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
#active-hint { font-size:11px;font-family:'Courier New',monospace;color:rgba(201,168,76,0.55);letter-spacing:1px;text-align:center;min-height:16px; }
#btn-row { display:flex;gap:8px;align-items:center; }
.dir-btn { width:58px;height:46px;background:rgba(20,20,30,0.9);border:2px solid #3a3a3a;border-radius:8px;color:#c9a84c;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s,border-color 0.15s;-webkit-tap-highlight-color:transparent; }
.dir-btn:hover{background:rgba(40,40,60,0.9);border-color:#c9a84c;}
.dir-btn:active{background:#c9a84c;color:#111;}
#btn-ok { width:72px;height:46px;background:rgba(26,22,8,0.9);border:2px solid #c9a84c;border-radius:8px;color:#c9a84c;font-size:15px;font-weight:bold;letter-spacing:1px;cursor:pointer;font-family:Arial,sans-serif;transition:background 0.15s;-webkit-tap-highlight-color:transparent; }
#btn-ok:active{background:#c9a84c;color:#111;}
#status { font-size:11px;font-family:'Courier New',monospace;color:rgba(176,176,204,0.35);min-height:16px;text-align:center;letter-spacing:1px; }
#status.ok{color:#1D9E75;}#status.err{color:#E24B4A;}#status.hint{color:#c9a84c;}

/* KONFETTI-CANVAS */
canvas#spark-canvas { position:fixed;inset:0;z-index:15;pointer-events:none; }
.spark { animation:spark-out var(--dur) ease-out forwards; }
@keyframes spark-out { 0%{opacity:1;transform:translate(0,0) scale(1);}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0);} }
canvas#dust-canvas { position:fixed;inset:0;z-index:2;pointer-events:none; }
#vault-fog { position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden; }
.vfog { position:absolute;border-radius:50%;background:rgba(201,168,76,0.07);filter:blur(40px);opacity:0; }
.vfog.burst { animation:vfog-burst var(--vdur) ease-out forwards; }
@keyframes vfog-burst { 0%{transform:translate(0,0) scale(0.3);opacity:0.8;}100%{transform:translate(var(--vx),var(--vy)) scale(2.5);opacity:0;} }

@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}
.shaking{animation:shake 0.4s ease;}

@media(max-width:380px){
  #intro-date{font-size:24px;letter-spacing:4px;}
  .slot{width:32px;height:40px;font-size:20px;}
  #dial-svg{width:96px;height:96px;}
  .dir-btn{width:52px;height:42px;}
  #btn-ok{width:64px;height:42px;}
}