:root{
  --bg1:#0f1020;
  --bg2:#1b1c3a;
  --accent:#7c5cff;
  --accent2:#ff6bcb;
  --gold:#ffd25c;
  --gold2:#ffb300;
  --text:#f1f1fa;
  --muted:#a5a6c8;
  --face:#242552;
  --face-border:#3f3f8a;
}

*{box-sizing:border-box;}

html,body{
  height:100%;
  margin:0;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:radial-gradient(circle at 50% 0%, var(--bg2), var(--bg1) 70%);
  color:var(--text);
  overflow-x:hidden;
}

#app{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  padding-top:max(24px, env(safe-area-inset-top));
  padding-bottom:max(24px, env(safe-area-inset-bottom));
}

#setup{
  max-height:100dvh;
  overflow-y:auto;
  padding:8px 0;
}

.screen{
  display:none;
  width:100%;
  max-width:640px;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.screen.active{display:flex;}

h1{
  font-size:2.2rem;
  margin:0 0 4px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:0.5px;
}

.sub{color:var(--muted); margin:0 0 20px;}

.count-picker{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:24px;
}
#countDisplay{
  font-size:2rem;
  font-weight:700;
  min-width:2ch;
}
.round-btn{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--face-border);
  background:var(--face);
  color:var(--text);
  font-size:1.4rem;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.round-btn:hover{background:var(--accent); transform:scale(1.08);}
.round-btn:active{transform:scale(0.94);}

.option-inputs{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:28px;
}
.option-inputs input{
  width:100%;
  padding:12px 16px;
  border-radius:10px;
  border:1px solid var(--face-border);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-size:1rem;
  outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.option-inputs input:focus{
  border-color:var(--accent);
  background:rgba(255,255,255,0.08);
}

.primary-btn{
  padding:14px 32px;
  font-size:1.05rem;
  font-weight:600;
  border:none;
  border-radius:12px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#fff;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(124,92,255,0.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.primary-btn:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(124,92,255,0.45);}
.primary-btn:active{transform:translateY(0);}

/* ---------------- Dice Screen ---------------- */

.scene{
  position:relative;
  width:100%;
  height:70vh;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
}

#fragmentLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.fragment{
  position:absolute;
  padding:8px 14px;
  border-radius:8px;
  background:var(--face);
  border:1px solid var(--face-border);
  font-size:0.95rem;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%,-50%) scale(1);
  will-change:transform, opacity;
}

.cube-wrap{
  width:160px;
  height:160px;
  transform-style:preserve-3d;
  opacity:0;
  transform:scale(0.3);
  transition:opacity .3s ease, transform .3s ease;
}
.cube-wrap.visible{
  opacity:1;
  transform:scale(1);
}

.cube{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transform:rotateX(-25deg) rotateY(35deg);
}

.cube.spinning{
  transition: transform var(--spin-duration, 2.6s) cubic-bezier(.2,.85,.35,1);
}

.face{
  position:absolute;
  width:160px;
  height:160px;
  background:linear-gradient(145deg,var(--face),#191a3d);
  border:2px solid var(--face-border);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
  font-weight:700;
  font-size:0.95rem;
  color:var(--text);
  box-shadow:inset 0 0 20px rgba(124,92,255,0.15);
  overflow:hidden;
  word-break:break-word;
}

.face.front  { transform: rotateY(0deg)    translateZ(80px); }
.face.back   { transform: rotateY(180deg)  translateZ(80px); }
.face.right  { transform: rotateY(90deg)   translateZ(80px); }
.face.left   { transform: rotateY(-90deg)  translateZ(80px); }
.face.top    { transform: rotateX(90deg)   translateZ(80px); }
.face.bottom { transform: rotateX(-90deg)  translateZ(80px); }

/* rolling shake while spinning */
.cube-wrap.rolling{
  animation: roll-bounce 2.6s ease-in-out;
}
@keyframes roll-bounce{
  0%   { transform: scale(1) translate(0,0); }
  15%  { transform: scale(1) translate(-14px, -6px); }
  30%  { transform: scale(1) translate(10px, 4px); }
  45%  { transform: scale(1) translate(-8px, 6px); }
  60%  { transform: scale(1) translate(6px, -4px); }
  75%  { transform: scale(1) translate(-4px, 2px); }
  90%  { transform: scale(1) translate(2px, -1px); }
  100% { transform: scale(1) translate(0,0); }
}

/* result overlay */
.result-overlay{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:rgba(10,10,25,0.0);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease, background .5s ease;
  z-index:10;
}
.result-overlay.show{
  opacity:1;
  pointer-events:auto;
  background:rgba(10,10,25,0.75);
  backdrop-filter:blur(6px);
}

.crown{
  font-size:0;
  transform:translateY(20px) scale(0.3);
  opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1) .3s, opacity .4s ease .3s;
}
.result-overlay.show .crown{
  font-size:3.5rem;
  transform:translateY(0) scale(1);
  opacity:1;
  filter:drop-shadow(0 0 18px var(--gold));
}

.result-text{
  font-size:1.4rem;
  font-weight:800;
  color:var(--text);
  background:linear-gradient(90deg,var(--gold2),var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding:0 20px;
  max-width:90vw;
  transform:scale(0.4);
  opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1) .45s, opacity .4s ease .45s;
  text-align:center;
}
.result-overlay.show .result-text{
  transform:scale(1);
  opacity:1;
  font-size:clamp(1.8rem, 6vw, 3.2rem);
}

.result-overlay .primary-btn{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s ease .8s, transform .4s ease .8s;
}
.result-overlay.show .primary-btn{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:480px){
  h1{font-size:1.5rem;}
  .sub{font-size:0.9rem; margin-bottom:14px;}
  .count-picker{margin-bottom:16px; gap:14px;}
  .round-btn{width:38px; height:38px; font-size:1.2rem;}
  #countDisplay{font-size:1.6rem;}
  .option-inputs{gap:8px; margin-bottom:18px;}
  .option-inputs input{padding:10px 12px; font-size:0.95rem;}
  .primary-btn{padding:12px 24px; font-size:0.95rem;}
  .scene{height:56vh; min-height:280px;}
  .cube-wrap, .face{width:110px; height:110px;}
  .face{font-size:0.8rem; padding:6px;}
  .face.front  { transform: rotateY(0deg)    translateZ(55px); }
  .face.back   { transform: rotateY(180deg)  translateZ(55px); }
  .face.right  { transform: rotateY(90deg)   translateZ(55px); }
  .face.left   { transform: rotateY(-90deg)  translateZ(55px); }
  .face.top    { transform: rotateX(90deg)   translateZ(55px); }
  .face.bottom { transform: rotateX(-90deg)  translateZ(55px); }
  .fragment{font-size:0.8rem; padding:6px 10px;}
  .result-overlay.show .crown{font-size:2.6rem;}
  .result-overlay.show .result-text{font-size:clamp(1.4rem, 8vw, 2.2rem);}
}

/* iPhone SE 3rd gen and similarly short screens */
@media (max-width:400px) and (max-height:700px){
  #app{padding:14px;}
  h1{font-size:1.3rem; margin-bottom:2px;}
  .sub{font-size:0.82rem; margin-bottom:10px;}
  .scene{height:48vh; min-height:230px;}
  .cube-wrap, .face{width:90px; height:90px;}
  .face{font-size:0.7rem; padding:5px;}
  .face.front  { transform: rotateY(0deg)    translateZ(45px); }
  .face.back   { transform: rotateY(180deg)  translateZ(45px); }
  .face.right  { transform: rotateY(90deg)   translateZ(45px); }
  .face.left   { transform: rotateY(-90deg)  translateZ(45px); }
  .face.top    { transform: rotateX(90deg)   translateZ(45px); }
  .face.bottom { transform: rotateX(-90deg)  translateZ(45px); }
  .result-overlay.show .crown{font-size:2.2rem;}
  .result-overlay.show .result-text{font-size:clamp(1.2rem, 8vw, 1.9rem);}
  .result-overlay .primary-btn{margin-top:6px;}
}