:root{
  --violet-900:#33125E;
  --violet-700:#5B21B6;
  --violet-500:#7C3AED;
  --green-700:#15803D;
  --green-500:#16A34A;
  --green-300:#4ADE80;
  --ink:#1C1730;
  --ink-2:#241C3D;
  --paper:#FBFAFE;
  --paper-dim:#F1EDFA;
  --slate:#A79FC4;
  --line:#3A3160;
  --red:#F87171;
  --mono:'IBM Plex Mono', monospace;
  --display:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, #3A2A66 0%, #332C58 18%, #2A2447 36%, #211C3A 55%, var(--ink) 78%),
    var(--ink);
  background-attachment:fixed;
  color:var(--paper);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{font-family:var(--display);margin:0 0 .4em;letter-spacing:-0.01em;}
p{margin:0 0 1em;}
a{color:inherit;}

.game-shell{max-width:920px;margin:0 auto;padding:0 20px 60px;min-height:100vh;display:flex;flex-direction:column;}

/* ---- top bar ---- */
.game-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;gap:16px;flex-wrap:wrap;
}
.game-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper);}
.game-brand img{height:34px;width:auto;border-radius:6px;}
.game-brand span{font-family:var(--display);font-weight:700;font-size:15px;}
.game-brand .accent-v{color:var(--violet-500);}
.game-brand .accent-g{color:var(--green-300);}
.game-timer{
  font-family:var(--mono);font-size:20px;font-weight:500;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  padding:8px 16px;border-radius:10px;letter-spacing:.04em;
}
.game-timer.low{color:var(--red);border-color:var(--red);animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.exit-link{font-size:12.5px;color:var(--slate);text-decoration:none;font-family:var(--mono);}
.exit-link:hover{color:var(--paper);}

/* ---- house progress ---- */
.house-progress{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:28px;
}
.house-piece{
  border:1.5px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;
  background:rgba(255,255,255,.03);transition:all .4s ease;
}
.house-piece .piece-icon{font-size:22px;display:block;margin-bottom:4px;opacity:.35;transition:opacity .4s ease;}
.house-piece .piece-label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--slate);text-transform:uppercase;}
.house-piece.done{border-color:var(--green-500);background:rgba(22,163,74,.12);}
.house-piece.done .piece-icon{opacity:1;}
.house-piece.done .piece-label{color:var(--green-300);}

/* ---- stage ---- */
.game-stage{flex:1;display:flex;align-items:stretch;}
.screen{display:none;width:100%;flex-direction:column;gap:18px;animation:fadeIn .5s ease;}
.screen.active{display:flex;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.level-tag{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--green-300);
  text-transform:uppercase;display:flex;align-items:center;gap:10px;
}
.level-tag .tick{flex:0 0 24px;height:1px;background:var(--green-500);}

.panel{
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:18px;
  padding:28px;
}.panel h2, .panel h1{font-size:clamp(22px,3.4vw,30px);}
.panel .lede{color:var(--slate);font-size:15.5px;max-width:640px;}

.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--body);font-weight:600;font-size:14.5px;
  padding:12px 22px;border-radius:9px;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--violet-500);color:#fff;}
.btn-primary:hover{background:var(--violet-700);}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;}
.btn-outline{border-color:var(--line);color:var(--paper);background:transparent;}
.btn-outline:hover{border-color:var(--paper);}

/* ---- tile grid (5S / Muda) ---- */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.tile{
  border:1.5px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;
  background:rgba(255,255,255,.03);text-align:left;font-family:var(--body);color:var(--paper);
  font-size:13.5px;transition:transform .15s ease,border-color .2s ease,background .2s ease;
}
.tile:hover{border-color:var(--violet-500);transform:translateY(-2px);}
.tile .tile-icon{font-size:22px;display:block;margin-bottom:6px;}
.tile.correct{border-color:var(--green-500);background:rgba(22,163,74,.15);cursor:default;pointer-events:none;}
.tile.correct::after{content:" ✓";color:var(--green-300);font-weight:700;}
.tile.wrong{animation:shake .4s ease;border-color:var(--red);}
.tile.disabled{opacity:.35;pointer-events:none;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

.tile.discarded{opacity:.18;transform:scale(.88) rotate(-6deg);border-color:var(--line);cursor:default;pointer-events:none;filter:grayscale(1);}
.tile.revealable{border-color:var(--green-500);border-style:dashed;}
.tile.revealable:hover{border-color:var(--green-500);}
.tile.flipped{border-color:var(--violet-500);background:rgba(139,108,255,.12);cursor:default;pointer-events:none;text-align:center;}
.tile-letter{
  display:block;font-family:var(--display);font-size:28px;font-weight:700;
  color:var(--paper);letter-spacing:.04em;text-align:center;padding:6px 0;
}

.trash-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.trash-can{
  font-family:var(--mono);font-size:13px;color:var(--paper);
  border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;
  background:rgba(255,255,255,.04);
}

.progress-note{font-family:var(--mono);font-size:12.5px;color:var(--slate);}

/* ---- lock / code input ---- */
.lock-box{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:6px;
}
.lock-box input{
  padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;
  font-family:var(--mono);font-size:15px;background:rgba(255,255,255,.05);color:var(--paper);
  letter-spacing:.08em;text-transform:uppercase;min-width:200px;
}
.lock-box input::placeholder{color:var(--slate);text-transform:none;letter-spacing:normal;}
.lock-box input:focus{outline:none;border-color:var(--violet-500);}
.lock-msg{font-size:13.5px;font-family:var(--mono);min-height:18px;width:100%;}
.lock-msg.error{color:var(--red);}
.lock-msg.success{color:var(--green-300);}

/* ---- sequence ordering (JIT) ---- */
.seq-source{display:flex;gap:10px;flex-wrap:wrap;}
.seq-chip{
  border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;
  background:rgba(255,255,255,.03);color:var(--paper);font-family:var(--body);font-size:13.5px;transition:all .15s ease;
}
.seq-chip:hover{border-color:var(--violet-500);}
.seq-chip.used{opacity:.25;pointer-events:none;}
.seq-chip.wrong-flash{border-color:var(--red);color:var(--red);animation:shake .4s ease;}
.seq-target{
  display:flex;gap:8px;flex-wrap:wrap;min-height:48px;
  border:1.5px dashed var(--line);border-radius:12px;padding:10px;
}
.seq-target .seq-chip{cursor:default;}
.seq-target .seq-chip.correct{background:rgba(74,222,128,.16);border-color:var(--green-500);color:var(--green-300);}
.seq-target .seq-chip.correct::after{content:" ✓";font-weight:700;}

/* ---- takt time / math inputs ---- */
.math-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:15px;}
.math-row input{
  width:100px;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;
  font-family:var(--mono);font-size:15px;background:rgba(255,255,255,.05);color:var(--paper);text-align:center;
}
.math-row input:focus{outline:none;border-color:var(--violet-500);}

/* ---- 5 whys ---- */
.why-step{font-family:var(--mono);font-size:11.5px;color:var(--green-300);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;}
.why-options{display:grid;gap:10px;margin-top:10px;}
.why-option{
  text-align:left;border:1.5px solid var(--line);border-radius:10px;padding:12px 16px;
  background:rgba(255,255,255,.03);cursor:pointer;font-size:14px;color:var(--paper);font-family:var(--body);
}
.why-option:hover{border-color:var(--violet-500);}
.why-option.wrong{border-color:var(--red);animation:shake .4s ease;}
.why-trail{font-size:13.5px;color:var(--slate);border-left:2px solid var(--green-500);padding-left:12px;margin:14px 0;}

/* ---- final formula ---- */
.formula{
  font-family:var(--mono);font-size:clamp(18px,3.2vw,26px);text-align:center;
  padding:22px;border:1.5px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);
}
.formula .op{color:var(--green-300);}

/* ---- victory ---- */
.victory-house{font-size:64px;text-align:center;margin:6px 0;}
.victory-panel{text-align:center;}.victory-panel h2, .victory-panel h1{font-size:clamp(26px,4vw,38px);}

@media (max-width:600px){
  .house-progress{grid-template-columns:repeat(2,1fr);}
  .panel{padding:20px;}
}