.generator-page{padding-top:0}

.generator{
  overflow:hidden;
  border:1px solid #4e2b15;
  border-radius:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 3px,rgba(0,0,0,.03) 3px 8px),
    linear-gradient(180deg,#5f3219,#3d1f0f);
  box-shadow:var(--shadow);
}

.generator__header{
  padding:5px;
  background:transparent;
  border-bottom:0;
}

.generator__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}

.generator__stats div{
  min-width:0;
  padding:5px 3px;
  border:1px solid #2f7b42;
  border-radius:12px;
  background:linear-gradient(180deg,#102716,#08140c);
  text-align:center;
  box-shadow:0 4px 8px rgba(0,0,0,.22);
}

.generator__stats span,.generator__stats strong{display:block}

.generator__stats span{
  color:#e9e45b;
  font-size:6.5px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.generator__stats strong{
  margin-top:1px;
  color:var(--orange);
  font-size:15px;
  line-height:1;
}

.generator__table{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "play"
    "controls";
  gap:5px;
  padding:0 5px 5px;
  background:transparent;
}

.generator__playarea{
  grid-area:play;
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(76px,.78fr) auto minmax(116px,1.22fr);
  min-height:0;
  overflow:visible;
  border:1px solid #347848;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 28%,rgba(67,133,76,.12),transparent 38%),
    linear-gradient(145deg,#1d4c2b,#12331d);
  box-shadow:inset 0 0 34px rgba(0,0,0,.34);
}

.generator__zone-title{
  margin:5px 0 0;
  color:#f1f1f1;
  text-align:center;
  font-size:7px;
  font-weight:950;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.generator__dice-zone{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  padding:4px 4px 5px;
}

.generator__dice-zone--locked{
  min-height:0;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.04);
  padding-top:8px;
  padding-bottom:18px;
  align-content:center;
  align-items:center;
  justify-content:center;
}

.generator__placeholder{
  color:rgba(255,255,255,.46);
  font-size:8px;
}

.generator__die-wrap{
  position:relative;
  width:62px;
  min-height:62px;
}

.generator__die-button{
  width:62px;
  height:62px;
  padding:0;
  border:0;
  border-radius:15px;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.generator__die{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  padding:9px;
  border-radius:15px;
  background:
    radial-gradient(circle at 27% 20%,#fff 0 7%,transparent 26%),
    linear-gradient(145deg,#fffdf8,#ddd6cb);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.1),
    inset 6px 6px 11px rgba(255,255,255,.9),
    inset -7px -7px 12px rgba(0,0,0,.13),
    0 7px 9px rgba(0,0,0,.3);
  transition:transform .18s ease,filter .18s ease;
}

.generator__die-button:active .generator__die{transform:scale(.96)}

.generator__die-wrap.is-locked .generator__die{
  filter:drop-shadow(0 0 5px rgba(244,119,0,.78));
}

.generator__die-wrap.is-locked::after{
  content:"RAUSGELEGT";
  position:absolute;
  left:50%;
  bottom:-12px;
  transform:translateX(-50%);
  padding:2px 4px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-size:4.5px;
  font-weight:950;
  letter-spacing:.04em;
  white-space:nowrap;
}

.generator__pip{
  width:8px;
  height:8px;
  align-self:center;
  justify-self:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#4d4d4d 0 10%,#171717 46%,#000 100%);
}

.generator__die.is-rolling{animation:generatorShake .12s linear infinite}
@keyframes generatorShake{
  0%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-3px,2px) rotate(-4deg)}
  50%{transform:translate(3px,-2px) rotate(4deg)}
  75%{transform:translate(-2px,-3px) rotate(-3deg)}
  100%{transform:translate(0,0) rotate(0)}
}

.generator__six-convert{
  position:absolute;
  right:-3px;
  top:-5px;
  z-index:3;
  min-height:19px;
  padding:2px 4px;
  border:2px solid #fff;
  border-radius:999px;
  color:#fff;
  background:var(--orange);
  font-size:6px;
  font-weight:950;
  cursor:pointer;
}

.generator__controls{
  grid-area:controls;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  padding:0;
  background:transparent;
}

.generator__button{
  min-width:0;
  min-height:46px;
  padding:4px 2px;
  border:1px solid #3c3c3c;
  border-radius:11px;
  color:#eee;
  background:linear-gradient(180deg,#292929,#151515);
  box-shadow:0 4px 9px rgba(0,0,0,.26);
  cursor:pointer;
}

.generator__button--primary{
  border-color:#ffad59;
  background:linear-gradient(180deg,#ff9b35,var(--orange));
  color:#fff;
}

.generator__button--danger{
  border-color:#c83333;
  background:linear-gradient(180deg,#701b1b,#3c0e0e);
}

.generator__button--secondary{
  border-color:#3a784b;
  background:linear-gradient(180deg,#173920,#0e2415);
}

.generator__button--reset{
  border-color:#3a784b;
  color:#ece76f;
  background:linear-gradient(180deg,#173920,#0e2415);
}

.generator__button span,.generator__button strong,.generator__button small{display:block}

.generator__button span{
  margin-bottom:0;
  font-size:11px;
}

.generator__button strong{
  font-size:6.8px;
  line-height:1.05;
  text-transform:uppercase;
  white-space:nowrap;
}

.generator__button small{
  margin-top:1px;
  color:#d5d5d5;
  font-size:5.2px;
  line-height:1.05;
  font-weight:400;
}

.generator__button:disabled{opacity:.35;cursor:not-allowed}

.generator__result-panel{
  margin:0 5px 5px;
  padding:5px;
  border:1px solid #347848;
  border-radius:14px;
  background:linear-gradient(180deg,#173f24,#0e2817);
}

.generator__result-panel h2{
  margin:0 0 3px;
  color:#e9e45b;
  text-align:center;
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.generator__status{
  margin:0;
  padding:5px;
  border:0;
  border-radius:9px;
  background:rgba(0,0,0,.28);
  text-align:center;
  font-size:8px;
  font-weight:850;
}

.generator__result{
  min-height:13px;
  padding:2px 2px 0;
  color:#ffb66d;
  text-align:center;
  font-size:9px;
  font-weight:950;
}

.generator__status.is-schock-aus{
  background:linear-gradient(180deg,rgba(244,119,0,.32),rgba(244,119,0,.14));
}




















/* Full-screen smartphone generator without scrolling */
@media(max-width:699px){
  body:has(.generator-page.is-active){overflow:hidden}

  .content{padding:3px 3px 0}

  .generator-page.is-active{
    height:calc(100dvh - 76px - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow:hidden;
  }

  .generator-page.is-active .generator{
    height:100%;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
  }

  .generator-page.is-active .generator__table{
    min-height:0;
    height:100%;
    overflow:hidden;
  }

  .generator-page.is-active .generator__playarea{
    min-height:0;
    height:100%;
  }
}

@media(min-width:700px){
  .generator{border-radius:24px}
  .generator__table{padding:10px}
  .generator__playarea{
    grid-template-rows:auto minmax(150px,1fr) auto minmax(110px,.7fr);
  }

  .generator__die-wrap,.generator__die-button{
    width:90px;
    min-height:90px;
    height:90px;
  }

  .generator__die{padding:13px}
  .generator__pip{width:13px;height:13px}
  .generator__button strong{font-size:10px}
  .generator__button small{font-size:8px}
}




@media(max-width:699px){
  .generator-page.is-active .generator__playarea{
    overflow:visible;
  }

  .generator-page.is-active .generator__dice-zone--locked{
    padding-bottom:20px;
  }
}

/* Verdeckter Wurf ohne Becher – Logo, Hinweis und Anzeige-Button */

/* Verdeckter Wurf – kompakt und vollständig im Würfelfeld */


/* Meilenstein 2.10: korrigierte Verdeckungsansicht */
.generator__cover{
  position:absolute;
  inset:0;
  z-index:30;
  display:none;
  align-items:center;
  justify-content:center;
  padding:10px;
  overflow:hidden;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 42%,rgba(35,105,55,.22),transparent 46%),
    linear-gradient(180deg,#07190d 0%,#061108 100%);
}

.generator__cover.is-visible{display:flex}

.generator__cover-card{
  box-sizing:border-box;
  width:min(82%,320px);
  max-height:92%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0;
  padding:12px;
  text-align:center;
}



.generator__cover-card h2{
  margin:0;
  color:#fff;
  font-size:24px;
  line-height:1.08;
  font-weight:900;
}

.generator__cover-card p{
  margin:0;
  color:#d1d1d1;
  font-size:13px;
  line-height:1.45;
}

.generator__reveal-main{
  box-sizing:border-box;
  width:220px;
  max-width:82%;
  min-height:48px;
  margin:4px 0 0;
  padding:10px 16px;
  border-radius:14px;
  font-size:16px;
  line-height:1.1;
  font-weight:900;
}

@media(max-width:699px){
  .generator__cover{padding:7px}

  .generator__cover-card{
    width:min(88%,290px);
    max-height:94%;
    gap:8px;
    padding:8px;
  }

  

  .generator__cover-card h2{font-size:20px}
  .generator__cover-card p{font-size:11px}

  .generator__reveal-main{
    width:195px;
    min-height:42px;
    padding:8px 13px;
    font-size:14px;
  }
}

@media(max-width:390px){
  

  .generator__cover-card h2{font-size:18px}
  .generator__cover-card p{font-size:10px}

  .generator__reveal-main{
    width:180px;
    min-height:39px;
    font-size:13px;
  }
}


/* Safari-sichere Logoanzeige im verdeckten Wurf */
.generator__cover-logo{
  flex:0 0 auto;
  width:150px;
  height:134px;
  max-width:48%;
  max-height:34%;
  margin:0 auto;
  background-image:url("../assets/images/nf-creatix-cover-logo.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.55));
}

@media(max-width:699px){
  .generator__cover-logo{
    width:118px;
    height:105px;
    max-width:44%;
    max-height:31%;
  }
}

@media(max-width:390px){
  .generator__cover-logo{
    width:104px;
    height:92px;
  }
}