/* Font and base */
:root{
  --bg1: #0b0f1a;
  --bg2: #141a2b;
  --accentA: #7df9ff;
  --accentB: #ff89f9;
  --accentC: #8fff85;
  --text: #e7ecff;
  --muted: #9aa3c7;
  --glass: rgba(255,255,255,0.06);
  --glowA: 0 0 20px rgba(125, 249, 255, 0.6);
  --glowB: 0 0 24px rgba(255, 137, 249, 0.5);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(125,249,255,0.08), transparent),
              radial-gradient(900px 600px at 80% 0%, rgba(255,137,249,0.08), transparent),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

.bg-grid{
  position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(1200px 800px at 50% 30%, black, transparent 70%);
}

/* Layout */
.wrapper{max-width:1200px; margin:0 auto; padding:32px 20px}
.app-header{text-align:center; margin-bottom:18px}
.app-header h1{
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: 0.5px;
  text-shadow: 0 0 12px rgba(125,249,255,0.4), 0 0 16px rgba(255,137,249,0.3);
}
.app-header .by{font-weight:300; opacity:0.8}
.app-header .tagline{color:var(--muted); margin-top:6px}

.panel{margin:18px 0}
.glass{
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  box-shadow: var(--glowA), var(--glowB);
}

.input-panel .flex{display:grid; grid-template-columns: 1fr 1fr auto; gap:16px; padding:16px}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
.field input{
  width:100%; padding:12px 14px; font-size:16px; color:var(--text);
  background: rgba(255,255,255,0.04); outline:none; border:1px solid rgba(255,255,255,0.12);
  border-radius: 12px; box-shadow: inset 0 0 12px rgba(125,249,255,0.12);
}
.field input:focus{border-color: var(--accentA); box-shadow: 0 0 0 2px rgba(125,249,255,0.25)}

.controls{display:flex; gap:10px; align-items:end}
.btn{
  border:none; padding:12px 16px; border-radius: 12px; cursor:pointer; font-weight:600;
  color: #05121f; background: linear-gradient(90deg, var(--accentA), var(--accentB));
  box-shadow: 0 6px 24px rgba(125,249,255,0.35), 0 8px 30px rgba(255,137,249,0.25);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn:hover{transform: translateY(-2px)}
.btn.small{padding:8px 12px; font-size:14px}
.btn.subtle{background: rgba(255,255,255,0.08); color: var(--text)}
.btn.ghost{background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)); color: var(--text)}

.hints{padding: 0 16px 12px; color:var(--muted); font-size:13px}

.mode-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px;
}
.card{padding:12px}
.card header h3{margin:0 0 8px 0}
.stage{height:240px; display:grid; place-items:center; position:relative; overflow:hidden; border-radius: 14px; border:1px solid rgba(255,255,255,0.12)}
.card-footer{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px}
.card .result{color:var(--muted)}

/* Bottle */
.bottle{
  width:160px; height:40px; border-radius: 20px;
  background: radial-gradient(circle at 10% 50%, rgba(255,255,255,0.2), rgba(255,255,255,0.05)),
              linear-gradient(90deg, rgba(125,249,255,0.35), rgba(255,137,249,0.35));
  border:1px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.35), 0 0 24px rgba(125,249,255,0.4);
  transform-origin: 50% 50%;
}

/* Dice cube */
.stage.dice{perspective:600px}
.cube{
  position:relative; width:100px; height:100px; transform-style:preserve-3d; transform: rotateX(-20deg) rotateY(20deg);
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.face{
  position:absolute; inset:0; display:grid; place-items:center;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 0 32px rgba(125,249,255,0.2);
  font-weight:800; font-size:36px; color:#e6f7ff;
}
.one{ transform: translateZ(50px)}
.six{ transform: rotateY(180deg) translateZ(50px)}
.two{ transform: rotateY(90deg) translateZ(50px)}
.five{ transform: rotateY(-90deg) translateZ(50px)}
.three{ transform: rotateX(90deg) translateZ(50px)}
.four{ transform: rotateX(-90deg) translateZ(50px)}

/* Cards */
.stage.cards{display:flex; align-items:center; justify-content:center; gap:18px}
.stage.cards .card-back{
  width:80px; height:120px; border-radius:12px; border:1px solid rgba(255,255,255,0.25);
  background: linear-gradient(135deg, rgba(125,249,255,0.35), rgba(255,137,249,0.35));
  box-shadow: 0 0 30px rgba(125,249,255,0.5);
  transform: translateY(0) rotate(0);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

/* Final */
.final{padding:16px}
.summary{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.chip{
  display:inline-block; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);
  margin-right:8px; box-shadow: 0 0 16px rgba(125,249,255,0.25);
}
#finalVerdict{
  margin:8px 0 0 0; font-size: clamp(20px, 3.8vw, 32px);
  text-shadow: 0 0 16px rgba(125,249,255,0.3), 0 0 22px rgba(255,137,249,0.2);
}
.explain{color:var(--muted); margin:0}

/* Footer */
.credits{ text-align:center; color:var(--muted); margin-top:10px; font-size:13px}

/* Responsive */
@media (max-width: 760px){
  .input-panel .flex{grid-template-columns: 1fr; }
  .controls{justify-content:flex-start}
}