.eo-wrap{
  --eo-bg:#141714;
  --eo-panel:#242922;
  --eo-panel2:#34382f;
  --eo-brass:#a98747;
  --eo-brass2:#d0b36b;
  --eo-steel:#7f8880;
  --eo-dark:#0c0e0c;
  --eo-paper:#e4dcc2;
  --eo-ink:#24231f;
  --eo-red:#7f241f;
  --eo-green:#7d8f62;
  --eo-shadow:#050605;
  --eo-text:#e7e1cf;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--eo-text);
}
.eo-wrap,
.eo-wrap *{
  box-sizing:border-box;
}
.eo-wrap{
  width:min(980px,94%);
  margin:26px auto 50px;
  padding:22px 18px 34px;
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 0,#353a31 0,#1b1f1a 36%,#0e100e 100%);
  box-shadow:0 12px 34px #0006;
}
.eo-title{
  text-align:center;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 16px;
  color:#e5d9b7;
  text-shadow:0 2px 0 #000;
}
.eo-sub{
  text-align:center;
  color:#b7b09c;
  margin:0 0 22px;
  font-size:.95rem;
}
.eo-machine{
  position:relative;
  overflow:hidden;
  border:4px solid #090a09;
  border-radius:18px;
  background:
    linear-gradient(180deg,#2c312a,#191d18 52%,#111411);
  box-shadow:
    0 18px 40px #0009,
    inset 0 0 0 2px #596055,
    inset 0 0 28px #000;
}
.eo-machine:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background:
    repeating-linear-gradient(90deg,transparent 0 7px,#fff 8px 9px,transparent 10px 22px),
    repeating-linear-gradient(0deg,transparent 0 18px,#000 19px 20px);
  mix-blend-mode:overlay;
}
.eo-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 18px;
  border-bottom:2px solid #090a09;
  background:linear-gradient(#3a3f35,#252921);
  position:relative;
  z-index:2;
}
.eo-plate{
  border:2px solid #6f5b30;
  color:#2b2416;
  background:linear-gradient(#ddc27b,#9c7c3f);
  padding:7px 16px;
  border-radius:4px;
  font-family:"Courier New",Courier,monospace;
  font-weight:bold;
  letter-spacing:.12em;
  box-shadow:inset 0 0 0 1px #f5df9c,0 2px 4px #0008;
}
.eo-status{
  font-family:"Courier New",Courier,monospace;
  font-weight:bold;
  color:#b8c99a;
  letter-spacing:.08em;
}
.eo-main{
  display:grid;
  grid-template-columns:1fr 310px;
  gap:20px;
  padding:22px;
  position:relative;
  z-index:1;
}
.eo-mechanics{
  min-width:0;
}
.eo-gears{
  height:122px;
  position:relative;
  margin-bottom:14px;
}
.eo-wrap .gear{
  position:absolute;
  border-radius:50%;
  background:
    radial-gradient(circle,#252a25 0 17%,#8f967f 18% 24%,#2b302a 25% 45%,#9da38f 46% 50%,#242822 51%);
  border:4px dashed #a0a58f;
  box-shadow:0 5px 12px #000b,inset 0 0 10px #000;
}
.eo-wrap .gear:after{
  content:"";
  position:absolute;
  inset:33%;
  border-radius:50%;
  background:#111;
  border:3px solid #777c6e;
}
.eo-wrap .g1{width:105px;height:105px;left:5%;top:6px}
.eo-wrap .g2{width:78px;height:78px;left:24%;top:28px}
.eo-wrap .g3{width:116px;height:116px;left:40%;top:0}
.eo-wrap .g4{width:72px;height:72px;left:64%;top:35px}
.eo-wrap .g5{width:94px;height:94px;right:3%;top:12px}
.eo-wrap .eo-running .g1,.eo-wrap .eo-running .g3,.eo-wrap .eo-running .g5{animation:spin 1.62s linear infinite}
.eo-wrap .eo-running .g2,.eo-wrap .eo-running .g4{animation:spinBack 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinBack{to{transform:rotate(-360deg)}}

.eo-rotorbox{
  border:2px solid #111;
  border-radius:12px;
  padding:16px;
  background:linear-gradient(#1c201b,#0e100e);
  box-shadow:inset 0 0 22px #000;
}
.eo-rotor-title{
  text-align:center;
  font-family:"Courier New",Courier,monospace;
  letter-spacing:.12em;
  color:#b9b29d;
  margin-bottom:12px;
}
.eo-rotors{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.eo-wrap .rotor{
  width:92px;
  height:122px;
  border-radius:14px;
  border:3px solid #4a4f45;
  background:linear-gradient(90deg,#262a24,#6e7468 18%,#262a24 42%,#73796c 66%,#252923);
  box-shadow:inset 0 0 12px #000,0 6px 12px #0009;
  position:relative;
  overflow:hidden;
}
.eo-wrap .rotor:before,.eo-wrap .rotor:after{
  content:"";
  position:absolute;
  left:8px;right:8px;
  height:16px;
  background:repeating-linear-gradient(90deg,#171917 0 4px,#a4a999 5px 7px);
  border:1px solid #111;
}
.eo-wrap .rotor:before{top:8px}.eo-wrap .rotor:after{bottom:8px}
.eo-wrap .rotor-window{
  position:absolute;
  top:39px;left:18px;right:18px;height:43px;
  background:#d9d1b3;
  border:4px solid #151714;
  border-radius:4px;
  color:#151714;
  display:grid;
  place-items:center;
  font:700 30px/1 "Courier New",Courier,monospace;
  box-shadow:inset 0 0 5px #0008;
}
.eo-wrap .rotor-label{
  position:absolute;
  bottom:28px;left:0;right:0;
  text-align:center;
  color:#e4dcc3;
  font:700 11px/1 "Courier New",Courier,monospace;
}
.eo-lamps{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(13,1fr);
  gap:7px;
}
.eo-wrap .lamp{
  aspect-ratio:1;
  border-radius:50%;
  border:2px solid #151713;
  background:#444537;
  color:#161713;
  display:grid;
  place-items:center;
  font:700 12px/1 "Courier New",Courier,monospace;
  box-shadow:inset 0 0 8px #000,0 2px 3px #0008;
}
.eo-wrap .lamp.on{
  color:#332c13;
  background:#e7d173;
  box-shadow:0 0 14px #e7d173,inset 0 0 4px #fff2ad;
}

.eo-controls{
  border:2px solid #111;
  border-radius:12px;
  background:linear-gradient(#343830,#1d211c);
  padding:16px;
  box-shadow:inset 0 0 18px #0008;
  align-self:start;
}
.eo-controls label{
  display:block;
  margin:0 0 6px;
  color:#d1c9b4;
  font-size:.86rem;
  font-weight:bold;
}
.eo-controls input,.eo-controls textarea{
  width:100%;
  border:2px solid #111;
  border-radius:5px;
  background:#e7dfc8;
  color:#1c1c19;
  padding:10px;
  font-family:"Courier New",Courier,monospace;
  font-size:15px;
  outline:none;
  box-shadow:inset 0 0 6px #0005;
}
.eo-controls textarea{min-height:118px;resize:vertical}
.__REMOVE__{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:7px;
}
.eo-question-button{
  border:1px solid #171914;
  border-radius:4px;
  min-width:42px;
  padding:6px 10px;
  cursor:pointer;
  color:#ddd5bf;
  background:linear-gradient(#41463c,#262a24);
  font:700 11px/1 "Courier New",Courier,monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 2px 4px #0007;
}
.eo-question-button:hover{background:linear-gradient(#505649,#30352d)}
.eo-sound-row{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-top:9px;
}
.eo-sound-toggle{
  border:1px solid #171914;
  border-radius:0;
  padding:7px 10px;
  cursor:pointer;
  color:#ddd5bf;
  background:linear-gradient(#41463c,#262a24);
  font:700 11px/1 "Courier New",Courier,monospace;
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:0 2px 4px #0007;
}
.eo-sound-toggle:hover{background:linear-gradient(#505649,#30352d)}
.eo-sound-toggle.off{
  color:#d6b7b0;
  background:linear-gradient(#3d2d2a,#241a18);
  border-color:#1f1412;
}
.eo-row{margin-bottom:13px}
.eo-birth-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:7px;
}
.eo-mini-button{
  border:1px solid #171914;
  border-radius:4px;
  padding:6px 9px;
  cursor:pointer;
  color:#ddd5bf;
  background:linear-gradient(#41463c,#262a24);
  font:700 11px/1 "Courier New",Courier,monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 2px 4px #0007;
}
.eo-mini-button:hover{background:linear-gradient(#505649,#30352d)}
.eo-button{
  width:100%;
  border:2px solid #2b210d;
  border-radius:6px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#211a0c;
  background:linear-gradient(#dbc274,#a67c32);
  box-shadow:inset 0 0 0 1px #f0dc9b,0 4px 0 #5b451f,0 7px 12px #0008;
}
.eo-button:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px #f0dc9b,0 2px 0 #5b451f}
.eo-button:disabled{cursor:not-allowed;filter:grayscale(.65);opacity:.7}
.eo-small{
  color:#aaa48f;
  font-size:.77rem;
  line-height:1.4;
  margin-top:11px;
}
.eo-codepanel{
  margin-top:15px;
  font-family:"Courier New",Courier,monospace;
  color:#b9c79b;
  background:#0e110e;
  border:1px solid #40463d;
  padding:9px;
  min-height:42px;
  word-break:break-all;
}

.eo-paper-slot{
  height:18px;
  margin:0 22px;
  border-radius:3px;
  border:2px solid #050605;
  background:#030403;
  box-shadow:inset 0 0 6px #000;
}
.eo-paper-wrap{
  position:relative;
  z-index:3;
  width:min(760px,88%);
  margin:-2px auto 0;
  max-height:0;
  overflow:hidden;
  transition:max-height 1.68s ease;
}
.eo-paper-wrap.show{max-height:700px}
.eo-paper{
  min-height:110px;
  padding:26px 34px 36px;
  background:
    linear-gradient(90deg,#d2c8a8,#eee5c9 8%,#e2d8ba 50%,#eee5c9 92%,#cfc4a4);
  color:var(--eo-ink);
  font-family:"Courier New",Courier,monospace;
  font-weight:700;
  font-size:clamp(16px,2.2vw,20px);
  line-height:1.55;
  letter-spacing:.035em;
  text-transform:uppercase;
  box-shadow:0 12px 28px #0009,inset 0 0 16px #756c55aa;
  border-left:1px solid #a69b7a;
  border-right:1px solid #a69b7a;
  white-space:pre-wrap;
  position:relative;
}
.eo-paper:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.15;
  background:
    repeating-linear-gradient(0deg,transparent 0 24px,#655e4d 25px 26px),
    radial-gradient(circle at 15% 20%,#5e563f55 0 1px,transparent 2px);
}
.eo-cursor{
  display:inline-block;
  width:.62em;
  height:1em;
  vertical-align:-.12em;
  background:#28271f;
  animation:blink .65s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.eo-footer{
  text-align:center;
  margin-top:16px;
  color:#8f8978;
  font-size:.77rem;
}
@media(max-width:760px){
  .eo-main{grid-template-columns:1fr;padding:14px}
  .eo-gears{height:100px}
  .eo-wrap .g1{width:84px;height:84px}.eo-wrap .g2{width:62px;height:62px}.eo-wrap .g3{width:92px;height:92px}.eo-wrap .g4{width:58px;height:58px}.eo-wrap .g5{width:76px;height:76px}
  .eo-lamps{grid-template-columns:repeat(9,1fr)}
  .eo-paper{padding:22px 18px 30px}
}
/* Enigma-Lotto: zusätzliche Bedienelemente und Zahlen-Ausgabe */
.eo-controls select {
  width:100%;
  border:2px solid #111;
  border-radius:5px;
  background:#e7dfc8;
  color:#1c1c19;
  padding:10px;
  font-family:"Courier New",Courier,monospace;
  font-size:15px;
  outline:none;
  box-shadow:inset 0 0 6px #0005;
}
.eo-custom{margin:-3px 0 13px;padding:10px;border:1px solid #4b5046;background:#171a16}
.eo-custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.eo-number-groups{display:grid;gap:14px;margin-top:14px}
.eo-number-group{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.eo-number-label{flex:0 0 100%;font-size:.78rem;letter-spacing:.08em;color:#655f4d}
.eo-number{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:#211a0c;background:linear-gradient(#ead78e,#b88a3b);
  border:2px solid #6d5425;box-shadow:inset 0 0 0 1px #f7e9b0,0 2px 4px #0005;
  font:800 17px/1 "Courier New",Courier,monospace;
}
.eo-number.extra{background:linear-gradient(#b7c39b,#7f9063);border-color:#52613e}
.eo-result-title{display:block;margin-top:8px;font-size:1.05rem}
@media(max-width:520px){
  .eo-wrap{width:100%;padding:14px 8px 26px}
  .eo-topbar{align-items:flex-start;flex-direction:column}
  .eo-custom-grid{grid-template-columns:1fr 1fr}
  .eo-number{width:42px;height:42px}
}


/* Neustart nach abgeschlossener Entschlüsselung */
.eo-reset-button {
  width: 100%;
  margin-top: 10px;
  border: 2px solid #171914;
  border-radius: 6px;
  padding: 11px 14px;
  cursor: pointer;
  color: #ddd5bf;
  background: linear-gradient(#41463c,#262a24);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 3px 7px #0007;
}
.eo-reset-button:hover { background: linear-gradient(#505649,#30352d); }
.eo-reset-button[hidden] { display: none; }