:root{
  --bg:#0b0f14;
  --panel:#111826;
  --panel2:#0f1622;
  --text:#e8eef7;
  --muted:#9fb0c3;
  --accent:#66a3ff;

  --red:#ff5a5f;
  --yellow:#ffd166;
  --purple:#9b5de5;
  --blue:#4dabf7;

  --ok:#68d391;
  --warn:#f6ad55;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:linear-gradient(180deg, #0f1622, #0b0f14);
  border-bottom:1px solid rgba(255,255,255,0.06);
  gap:16px;
}

.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.navbtn{
  color:var(--text);
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

.stat{ font-size:24px; color:var(--muted); margin-right:14px; display:inline-block; }
.stat .label{ opacity:0.85; margin-right:6px; }
#roundNum, #energyVal, #timerVal{ color:var(--text); font-weight:600; }

.energybar{ flex:1; max-width:520px; }
.energybar-track{
  height:30px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
}
.energybar-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, rgba(104,211,145,0.85), rgba(255,209,102,0.9));
  transition:width 220ms ease;
}
.energybar-labels{
  display:flex;
  justify-content:space-between;
  font-size:18px;
  color:var(--muted);
  margin-top:6px;
}

.hero{
  position: relative;
  width:min(1120px, 100%);
  margin:0 auto;
  padding:18px 22px 24px;
  text-align:center;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.10);
  background:#0c111a;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 0%, rgba(102,163,255,0.18), transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(246,173,85,0.12), transparent 40%);
  opacity:0.95;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(11,15,20,0.88), rgba(11,15,20,0.18) 45%, rgba(11,15,20,0.82));
  pointer-events:none;
}

.hero > *{
  position:relative;
  z-index:1;
}

.hero-banner{
  min-height:clamp(220px, 30vw, 340px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:0 0 18px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(180deg, rgba(7,10,16,0.20), rgba(7,10,16,0.56) 56%, rgba(7,10,16,0.82)),
    url("images/hybridize-banner.png") center center / cover no-repeat;
  box-shadow:0 18px 48px rgba(0,0,0,0.34);
}

.title{
  margin:0 0 4px;
  font-size:clamp(48px, 8vw, 86px);
  line-height:0.95;
  letter-spacing:0;
  text-shadow:0 4px 22px rgba(0,0,0,0.72), 0 0 28px rgba(102,163,255,0.18);
}

.subtitle{
  margin:0 0 22px;
  color:rgba(232,238,247,0.88);
  font-size:24px;
  font-weight:800;
  text-shadow:0 2px 16px rgba(0,0,0,0.72);
}

.card{
  position:relative;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(17,24,38,0.82);
  backdrop-filter:blur(8px);
  box-shadow:0 18px 60px rgba(0,0,0,0.24);
  padding:22px;
  text-align:left;
}

.card h2{
  margin:0 0 12px;
}

.mode-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.modebtn.selected{
  border-color: rgba(246,173,85,0.55);
  box-shadow: 0 0 0 3px rgba(246,173,85,0.20), 0 0 24px rgba(246,173,85,0.25);
  transform: translateY(-1px);
}
.modebtn{
  text-align:left;
  color:var(--text);
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.11);
  border-radius:14px;
  padding:16px;
  cursor:pointer;
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.modebtn.disabled{
  cursor:not-allowed;
  opacity:0.62;
  filter:saturate(70%);
}

.modeTitle{
  font-size:20px;
  font-weight:900;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  white-space:nowrap;
}

.modeDesc{
  margin-top:6px;
  color:var(--muted);
  line-height:1.35;
}

.soonTag,
.settings-note{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  color:var(--warn);
  background:rgba(246,173,85,0.12);
  border:1px solid rgba(246,173,85,0.22);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.settings-panel{
  margin-top:14px;
  padding:16px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.035);
  text-align:left;
}

.settings-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.settings-head h2{
  margin:0 0 4px;
}

.settings-head p{
  margin:0;
  color:var(--muted);
  line-height:1.35;
}

.settings-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(140px, 1fr));
  gap:10px;
  margin-top:14px;
}

.setting-row,
.threshold-row,
.toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,0.16);
  border:1px solid rgba(255,255,255,0.08);
  font-weight:800;
}

.setting-row{
  border-left:4px solid rgba(255,255,255,0.25);
}

.ratio-control{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
}

.ratio-label{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:0;
  line-height:1;
  white-space:nowrap;
}

.setting-row.color-r{ border-left-color:var(--red); }
.setting-row.color-y{ border-left-color:var(--yellow); }
.setting-row.color-p{ border-left-color:var(--purple); }
.setting-row.color-b{ border-left-color:var(--blue); }

select{
  color:var(--text);
  background:#182132;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:10px;
  padding:7px 9px;
  font:inherit;
  font-weight:800;
  min-width:78px;
}

.frustration-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.toggle-row{
  justify-content:flex-start;
}

.toggle-row input{
  width:20px;
  height:20px;
  accent-color:var(--warn);
}


.brand{
  user-select:none;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
}
.brand:hover{
  opacity: 0.9;
}

#diceRowWrap{
  display:flex;
  align-items:left;
  justify-content:left;
  gap:12px;
}

.dice-row-left{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.dice-row-right{
  display:flex;
  gap:10px;
  align-items:center;
}

.dice-row{
  display:flex;
  gap:12px;
  padding:12px 16px;
  background:var(--panel2);
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex-wrap:wrap;
}
.die{
  width:160px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
}
.die .row{ display:flex; justify-content:space-between; align-items:center; }
.die .face{
  font-size:26px;
  font-weight:800;
  letter-spacing:0.5px;
}
.die .label{
  font-size:24px;
  color:var(--muted);
}
.die .outcome{
  margin-top:8px;
  font-size:18px;
  color:var(--text);
  opacity:0.95;
}
/* Dice glow states */
.die.pending{
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 0 24px rgba(102,163,255,0.38);
  border-color: rgba(102,163,255,0.38);
}

.die.done{
  opacity: 0.72;
  box-shadow: inset 0 0 0 1px rgba(104,211,145,0.22);
}

.die.pass{
  opacity: 0.6;
  filter: grayscale(30%);
}

.die.active{
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 0 26px rgba(246,173,85,0.32);
  border-color: rgba(246,173,85,0.30);
}

.tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  letter-spacing:0.3px;
  white-space:nowrap;
}
.tag.form{ background:rgba(104,211,145,0.15); color:var(--ok); border:1px solid rgba(104,211,145,0.25); }
.tag.unpair{ background:rgba(246,173,85,0.12); color:var(--warn); border:1px solid rgba(246,173,85,0.22); }
.tag.choice{ background:rgba(102,163,255,0.12); color:var(--accent); border:1px solid rgba(102,163,255,0.22); }
.tag.pass { background: rgba(255,255,255,0.08); color: #aaa; }
.main{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
}
.viz{
  position:relative;
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  overflow:hidden;
  min-height:520px;
}
.viz-svg{ width:100%; height:100%; display:block; }
.frustration-banner{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(0.8);
  font-size:48px;
  font-weight:800;
  letter-spacing:2px;
  color:#ffb347;
  text-shadow:
    0 0 12px rgba(255,165,0,0.6),
    0 0 28px rgba(255,140,0,0.4);
  pointer-events:none;
  opacity:0;
  transition:
    opacity 250ms ease,
    transform 250ms ease;
  z-index:10;
}
.frustration-banner.hidden{
  display:none;
}
.frustration-banner.show{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}

@keyframes shake {
  0%,100% { transform:translate(0,0); }
  25% { transform:translate(4px,0); }
  50% { transform:translate(-4px,0); }
  75% { transform:translate(3px,0); }
}

.screen{
  display:none;
  padding: 18px;
}

.howto{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
  text-align:left;
}

.howtoItem{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.howtoNum{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
}

.howtoTitle{
  font-weight: 800;
  margin-bottom: 2px;
}

.howtoDesc{
  opacity: 0.78;
  line-height: 1.35;
}

.homeActions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:16px;
}

.ack-panel{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  margin-top:18px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.18);
}

.ack-logo{
  width:clamp(56px, 8vw, 82px);
  height:clamp(56px, 8vw, 82px);
  object-fit:contain;
  border-radius:12px;
  background:rgba(255,255,255,0.92);
  padding:6px;
}

.ack-copy{
  color:var(--muted);
  font-size:14px;
  line-height:1.42;
}

.ack-copy p{
  margin:0;
}

.ack-copy p + p{
  margin-top:6px;
}

.ack-copy strong{
  color:var(--text);
}

.ack-copy a{
  color:var(--accent);
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}

.ack-copy a:hover{
  text-decoration:underline;
}

.credit,
.copyright{
  color:rgba(159,176,195,0.78);
}

.screen.active{
  display:block;
  animation: screenIn 200ms ease-out;
}

@keyframes screenIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

body.shake{
  animation:shake 300ms;
}

.prompt{
  font-size:20px;
  line-height:1.35;
  color:var(--text);
  min-height:56px;
}
.prompt.win{
  color:var(--ok);
  text-shadow:0 0 18px rgba(104,211,145,0.35);
}
.footer{
  margin-top:auto;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.action-panel.action-panel-bottom{
  min-height:auto;
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer.footer-row{
  margin-top:0;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
}

.btn{
  background:rgba(255,255,255,0.06);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
  white-space:nowrap;
}
.btn.primary{
  background:rgba(102,163,255,0.18);
  border-color:rgba(102,163,255,0.32);
}
.btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
}
@media (max-width: 1000px){
  .main{ grid-template-columns: 1fr; }
  .energybar{ max-width:none; }
  .settings-grid{ grid-template-columns:1fr 1fr; }
}

.rulesBody{
  text-align:left;
  line-height:1.5;
  font-size: 15px;
}

.rulesBody hr{
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 14px 0;
}

.rulesBody ul,
.rulesBody ol{
  padding-left: 18px;
  margin-top: 6px;
}

.rulesExamples{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

@media (max-width: 780px){
  .rulesExamples{ grid-template-columns: 1fr; }
  .mode-grid,
  .settings-grid,
  .frustration-controls{
    grid-template-columns:1fr;
  }
  .settings-head{
    flex-direction:column;
  }
  .topbar{
    flex-wrap:wrap;
  }
  .ack-panel{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
  }
}

.exCard{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 12px;
}

.exTitle{
  font-weight: 800;
  margin-bottom: 8px;
}

.exNote{
  opacity: 0.78;
  margin-top: 8px;
  line-height: 1.35;
  font-size: 14px;
}

.exSvg{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 12px;
  background: rgba(0,0,0,0.15);
}

/* SVG styles */
.exSvg .strand{
  stroke: rgba(255,255,255,0.18);
  stroke-width: 10;
  stroke-linecap: round;
}

.exSvg .base{
  stroke: rgba(255,255,255,0.85);
  stroke-width: 2;
  fill: white;
}

.exSvg .base.r{ stroke: var(--red); }
.exSvg .base.y{ stroke: var(--yellow); }
.exSvg .base.p{ stroke: var(--purple); }
.exSvg .base.b{ stroke: var(--blue); }

.exSvg .bond{
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
}

.exSvg .bond.ok{ stroke: rgba(255,255,255,0.85); }
.exSvg .bond.mis{
  stroke: rgba(255,255,255,0.75);
  stroke-dasharray: 6 5;
}
.exSvg .bond.bad{
  stroke: rgba(255,145,92,0.85);
  stroke-width: 5;
}

.exSvg .xmark{
  stroke: rgba(255,145,92,0.95);
  stroke-width: 5;
  stroke-linecap: round;
}

.exSvg .stackGlow{
  fill: rgba(255,255,255,0.06);
  stroke: rgba(255,255,255,0.25);
  stroke-width: 2;
}