/* Base */
:root{
  --bg: #0f1226;
  --panel: rgba(255,255,255,0.06);
  --card: rgba(255,255,255,0.08);
  --text: #f8fbff;
  --muted: #b9c4ff;
  --primary: #7c4dff;
  --accent: #00d4ff;
  --good: #2dd36f;
  --bad: #ff4961;
  --metal: #ffd166;
  --nonmetal: #06d6a0;
  --electron: #00e5ff;
  --shadow: 0 10px 30px rgba(0,0,0,0.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(120vw 80vh at 80% -10%, rgba(124,77,255,0.3), transparent 60%),
    radial-gradient(120vw 80vh at -10% 20%, rgba(0,212,255,0.25), transparent 60%),
    var(--bg);
  background-repeat:no-repeat;
}

/* Header */
.app-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(15,18,38,0.9), rgba(15,18,38,0.6));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand{display:flex; align-items:center; gap:12px}
.brand .logo{width:28px; height:28px; filter: drop-shadow(0 4px 12px rgba(124,77,255,0.6))}
.brand h1{font-size:18px; margin:0; letter-spacing:0.3px}

/* Buttons */
.btn{border:0; padding:10px 16px; border-radius:12px; cursor:pointer; font-weight:600;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;}
.btn.primary{color:white; background: linear-gradient(135deg, var(--primary), #4e9eff)}
.btn.primary:disabled{opacity:.5; cursor:not-allowed}
.btn.ghost{color:var(--text); background: transparent; border:1px solid rgba(255,255,255,0.14)}
.btn:hover{transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.25)}

.container{max-width:1100px; width:100%; margin:24px auto; padding:0 16px}
.card{background:var(--card); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:16px; box-shadow: var(--shadow)}
.intro{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.legend{display:flex; gap:18px; color:var(--muted); font-size:14px}
.legend .dot{display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; vertical-align:middle}
.legend .dot.metal{background:var(--metal)}
.legend .dot.nonmetal{background:var(--nonmetal)}
.legend .dot.electron{background:var(--electron)}
.cation-picker{display:flex; flex-direction:column; gap:6px; min-width:240px}
.cation-picker label{font-size:13px; font-weight:600; letter-spacing:.5px; color:var(--muted)}
.cation-picker select{background:rgba(255,255,255,0.08); color:var(--text); border:1px solid rgba(255,255,255,0.18); border-radius:10px; padding:8px 10px; font-weight:600}
.cation-picker select:focus{outline:2px solid var(--accent); outline-offset:2px}
.picker-note{font-size:11px; color:var(--muted); max-width:320px; line-height:1.4}

/* Stepper */
.stepper{display:flex; gap:12px; margin:20px 0}
.step{
  flex:1; display:flex; align-items:center; gap:10px; justify-content:center; cursor:pointer;
  background:var(--panel); border:1px solid rgba(255,255,255,0.08); color:var(--muted);
  padding:12px; border-radius:14px; font-weight:600; transition: background .2s ease, color .2s ease;
}
.step span{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.14)}
.step.active{color:white; background: linear-gradient(180deg, rgba(124,77,255,0.35), rgba(124,77,255,0.05))}

/* Panels */
.panel{display:none; background:var(--panel); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:20px; box-shadow: var(--shadow)}
.panel.active{display:block}

.atoms-row{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
.atom-card{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:16px}
.atom-title{margin:0 0 8px; font-size:16px}
.atom-stage{position:relative; height:360px; border-radius:14px; background:#161c2e; /* solid to block page gradient */ border:1px dashed rgba(255,255,255,0.12)}
.hint{color:var(--muted); font-size:13px}
.atoms-row.dual-nonmetal{grid-template-columns: 1fr 1fr 1fr}
.sub-nonmetals{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.sub-nonmetals .mini-stage{position:relative; width:160px; height:160px; background:rgba(0,0,0,0.25); border:1px dashed rgba(255,255,255,0.2); border-radius:12px;}

.actions{display:flex; justify-content:center; margin-top:16px}

/* Atom SVG visuals */
svg.atom{width:100%; height:100%}
.nucleus{fill:url(#nucleusGradient);}
.shell{fill:none; stroke:rgba(255,255,255,0.18); stroke-width:2}
.electron{fill:var(--electron); filter: drop-shadow(0 0 10px rgba(0,229,255,0.7)); cursor:pointer;}
.electron.disabled{opacity:.35; cursor:default}
.label{fill:#fff; font-weight:800; font-size:16px; text-anchor:middle}
.charge-badge{position:absolute; top:10px; right:10px; padding:4px 8px; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.1); border-radius:999px; font-weight:700}

/* Transfer animation */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.floater{animation: floaty 2.4s ease-in-out infinite}

/* Drag & Drop */
.drag-area{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start}
.draggables{display:flex; gap:12px; flex-wrap:wrap}
.ion-card{width:180px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:12px; box-shadow: var(--shadow); user-select:none}
.ion-head{display:flex; align-items:flex-start; gap:6px; font-size:22px; font-weight:800}
.ion-head .charge{color:var(--accent)}
.ion-body{color:var(--muted); font-size:13px}
.draggable{cursor:grab}
.draggable:active{cursor:grabbing}
.dropzones{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.dropzone{min-height:160px; display:grid; place-items:center; text-align:center; background:rgba(255,255,255,0.06); border:2px dashed rgba(255,255,255,0.18); border-radius:14px; padding:12px; transition: border-color .2s ease, background .2s ease}
.dropzone img{width:40px; height:40px; opacity:.9; margin-bottom:8px}
.dropzone h4{margin:4px 0 0}
.dropzone.over{border-color: var(--accent); background: rgba(0,212,255,0.08)}
.dropzone.correct{border-color: var(--good)}
.dropzone.incorrect{border-color: var(--bad)}

/* Shake for wrong drop */
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}}
.shake{animation: shake .35s}

/* Footer */
.app-footer{opacity:.8; color:var(--muted); text-align:center; padding:24px}

/* Responsive */
@media (max-width: 900px){
  .atoms-row{grid-template-columns:1fr}
  .drag-area{grid-template-columns:1fr}
  .dropzones{grid-template-columns:1fr}
}

/* Tighten padding and ensure full-bleed cards on narrow phones */
@media (max-width: 420px){
  /* Refined mobile layout: use intrinsic width without 100vw to avoid overflow */
  .container{max-width:100vw; margin:16px auto 32px; padding:0 12px; width:100vw;}
  /* Primary blocks span width but remain within container padding */
  .card,.panel,.stepper,.lattice-split > div,.atoms-row,.drag-area{width:100vw;}
  .intro{flex-direction:column; align-items:stretch}
  .cation-picker{min-width:0; width:100%}
  /* Allow ion cards to fill width but not exceed readable line length */
  .ion-card{width:100%; max-width:360px}
  .draggables{justify-content:flex-start}
  .lattice-view{padding:16px; gap:8px}
}

/* -------- Ionic Lattice -------- */
.lattice{margin-top:28px}
.lattice-legend{display:flex; gap:24px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin:8px 0 14px}
.legend-item{display:flex; align-items:center; gap:6px}
.mini.ion{display:inline-flex; align-items:center; justify-content:center; padding:2px 8px; border-radius:10px; font-weight:700; font-size:11px; letter-spacing:.5px; background:rgba(255,255,255,0.08);}
.mini.ion.na{color:#ffd166; border:1px solid rgba(255,209,102,0.5)}
.mini.ion.cl{color:#06d6a0; border:1px solid rgba(6,214,160,0.5)}
.bond-indicator{width:26px; height:6px; background:linear-gradient(90deg,var(--accent),var(--primary)); border-radius:6px; display:inline-block; box-shadow:0 0 8px rgba(0,212,255,0.6)}
.lattice-view{position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.05); border-radius:18px; padding:20px; display:grid; grid-template-columns: repeat(7, 56px); gap:10px; justify-content:center}

/* Split layout: 2D and Isometric side-by-side on laptops */
.lattice-split{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.iso-heading{display:block}

.ion-node{position:relative; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; cursor:pointer; transition: box-shadow .2s ease, transform .2s ease}
.ion-node.na{color:#ffd166; background: radial-gradient(circle at 30% 30%, rgba(255,209,102,0.9), rgba(255,209,102,0.35)); box-shadow:0 4px 16px -4px rgba(255,209,102,0.5)}
.ion-node.cl{color:#06d6a0; background: radial-gradient(circle at 30% 30%, rgba(6,214,160,0.9), rgba(6,214,160,0.35)); box-shadow:0 4px 16px -4px rgba(6,214,160,0.4)}
.ion-node:hover{transform:translateY(-4px); box-shadow:0 8px 18px -4px rgba(0,0,0,0.4)}
.bond-line{position:absolute; height:4px; background:linear-gradient(90deg,var(--accent), var(--primary)); transform-origin:0 50%; border-radius:4px; filter:drop-shadow(0 0 6px rgba(0,212,255,0.55)); opacity:0; animation: bondFade .35s forwards}
@keyframes bondFade{to{opacity:1}}
.ion-node.focused{outline:2px solid var(--accent); outline-offset:4px}
.note{font-size:12px; color:var(--muted); margin-top:14px}

/* -------- Dot & Cross Diagrams -------- */
.dot-cross-section{margin-top:32px}
.dot-cross-grid{display:flex; flex-wrap:wrap; gap:24px; margin-top:12px}
.dc-diagram{position:relative; width:150px; height:150px; border:3px solid rgba(255,255,255,0.18); border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; letter-spacing:.5px; background:#1c2437}
.dc-diagram.bracket{border:none;}
.dc-diagram.bracket::before,.dc-diagram.bracket::after{content:''; position:absolute; top:10px; bottom:10px; width:20px; border:3px solid rgba(255,255,255,0.5); border-radius:8px; pointer-events:none;}
.dc-diagram.bracket::before{left:4px; border-right:none; box-shadow:0 0 8px rgba(255,255,255,0.15)}
.dc-diagram.bracket::after{right:4px; border-left:none; box-shadow:0 0 8px rgba(255,255,255,0.15)}
.dc-diagram .ion-charge{position:absolute; top:4px; right:6px; font-size:14px; font-weight:800; color:var(--accent)}
/* Position charge outside, to the right of the bracketed box */
.dc-diagram.bracket .ion-charge{right:-15px; top:2px}
.dc-electron{position:absolute; width:12px; height:12px; border-radius:50%; background:var(--electron); box-shadow:0 0 6px rgba(0,229,255,0.6)}
.dc-electron.dot{background:var(--nonmetal)}
/* Transferred electron: render as a light-blue cross */
.dc-electron.cross{background:transparent; width:12px; height:12px; border-radius:0; box-shadow:none}
.dc-electron.cross::before,.dc-electron.cross::after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--electron); box-shadow:0 0 6px rgba(0,229,255,0.6); border-radius:2px}
.dc-electron.cross::before{width:12px; height:2.5px}
.dc-electron.cross::after{width:2.5px; height:12px}
.dc-label{flex:1; min-width:220px; font-size:13px; color:var(--muted)}
.dc-pending{opacity:.55; filter:grayscale(0.4)}
.dc-legend{display:flex; gap:18px; font-size:12px; color:var(--muted); margin-top:8px; flex-wrap:wrap}
.dc-legend span{display:flex; align-items:center; gap:6px}
.legend-dot{width:12px; height:12px; background:var(--nonmetal); border-radius:50%}
.legend-cross{width:14px; height:14px; background:var(--metal); transform:rotate(45deg); border-radius:4px}
.legend-transferred{position:relative; width:14px; height:14px; display:inline-block}
.legend-transferred::before,.legend-transferred::after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--electron); box-shadow:0 0 6px rgba(0,229,255,0.6); border-radius:2px}
.legend-transferred::before{width:14px; height:3px}
.legend-transferred::after{width:3px; height:14px}

@media (max-width: 900px){
    /* Maintain 7-column structure on small screens to preserve
     vertical/horizontal alternation of ions (checkerboard).
      Previously reducing columns breaks parity mapping
      generated in JS (rows/cols assumed 7) causing occasional
     adjacent like-charged ions. */
    .lattice-view{grid-template-columns: repeat(7, 56px);} 
  .ion-node{width:44px; height:44px; font-size:12px}
  .lattice-split{grid-template-columns:1fr}
}

@media (min-width: 900px){
  /* Hide isometric subheading on wider screens per request */
  .iso-heading{display:none}
}

/* -------- Isometric Lattice (3D impression) -------- */
.lattice-iso-view{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.05);
  border-radius:18px;
  height:440px; /* canvas for cube (a bit taller for deeper z) */
  box-shadow: var(--shadow);
}
.iso-node{
  position:absolute;
  width:30px; height:30px; border-radius:50%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
  transform: translate(-9999px,-9999px); /* will be overridden */
}
.iso-node.na{ 
  background: radial-gradient(circle at 35% 30%, rgba(255,209,102,0.95), rgba(255,209,102,0.45));
}
.iso-node.cl{
  background: radial-gradient(circle at 35% 30%, rgba(6,214,160,0.95), rgba(6,214,160,0.45));
}
/* subtle rim highlight */
.iso-node::after{content:''; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 12px rgba(255,255,255,0.18)}

/* Mobile portrait: shrink 2D lattice ions and switch to 5x5 grid */
@media (max-width: 600px) and (orientation: portrait){
  .lattice-view{grid-template-columns: repeat(5, 44px); gap:8px;}
  .ion-node{width:40px; height:40px; font-size:11px}
}

/* -------- Quiz Section -------- */
.quiz-section{margin-top:34px; display:flex; flex-direction:column; gap:14px}
.quiz-intro{font-size:13px; color:var(--muted); margin:0 0 4px}
.quiz-core{display:flex; flex-direction:column; gap:12px}
.quiz-progress{font-size:12px; font-weight:600; letter-spacing:.5px; color:var(--accent)}
.quiz-question{font-size:16px; font-weight:600; line-height:1.4; background:rgba(255,255,255,0.06); padding:14px 16px; border-radius:14px; border:1px solid rgba(255,255,255,0.08)}
.quiz-options{display:flex; flex-direction:column; gap:10px}
.quiz-option{border:1px solid rgba(255,255,255,0.22); background:#1d2535; color:var(--text); padding:10px 14px; border-radius:12px; font-size:14px; text-align:left; font-weight:600; cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease}
.quiz-option:hover{background:#253043; transform:translateY(-2px)}
.quiz-option:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.quiz-option.correct{border-color:var(--good); background:rgba(45,211,111,0.35); color:#fff}
.quiz-option.incorrect{border-color:var(--bad); background:rgba(255,73,97,0.35); color:#fff}
.quiz-option[disabled]{opacity:.75; cursor:default; transform:none}
@media (prefers-contrast: more){
  .quiz-option{background:#0f1624; border-color:rgba(255,255,255,0.3)}
  .quiz-option:hover{background:#182234}
}
.quiz-feedback{min-height:24px; font-size:13px; font-weight:500}
.quiz-feedback.good{color:var(--good)}
.quiz-feedback.bad{color:var(--bad)}
.quiz-nav{display:flex; gap:10px; justify-content:flex-end}
.quiz-summary{margin-top:12px; padding:16px; background:rgba(124,77,255,0.12); border:1px solid rgba(124,77,255,0.35); border-radius:16px; font-size:14px; line-height:1.5}
.quiz-summary h3{margin:0 0 8px; font-size:18px}

@media (max-width: 600px){
  .quiz-question{font-size:15px; padding:12px 14px}
  .quiz-option{font-size:13px; padding:9px 12px}
  .quiz-nav{flex-direction:row; justify-content:space-between}
  .quiz-summary{font-size:13px}
}