:root{
  --violet-700:#5B21B6;
  --violet-500:#7C3AED;
  --green-700:#15803D;
  --green-500:#16A34A;
  --ink:#1C1730;
  --paper:#FBFAFE;
  --paper-dim:#F1EDFA;
  --slate:#6B7280;
  --line:#E4E1F0;
  --bread:#B8763A;
  --bread-dark:#8A5B2C;
  --lettuce:#2F9E44;
  --cheese:#F2B705;
  --tomato:#E0483E;
  --red:#DC2626;
  --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:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}h1, h2, h3, h2.s3{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(--ink);}
.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-700);}
.game-brand .accent-g{color:var(--green-700);}
.game-timer{
  font-family:var(--mono);font-size:20px;font-weight:500;
  background:#fff;border:1.5px 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(--ink);}

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

/* ---- 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-700);
  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:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;}
.panel h2{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(--bread);color:#fff;}
.btn-primary:hover{background:var(--bread-dark);}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;}
.btn-outline{border-color:var(--line);color:var(--ink);background:transparent;}
.btn-outline:hover{border-color:var(--ink);}
.btn-mode{
  flex:1;min-width:220px;padding:24px;border-radius:16px;border:1.5px solid var(--line);
  background:#fff;cursor:pointer;text-align:left;transition:border-color .15s ease,transform .1s ease;
}
.btn-mode:hover{border-color:var(--bread);transform:translateY(-2px);}
.btn-mode .mode-icon{font-size:30px;display:block;margin-bottom:10px;}.btn-mode h3, .btn-mode h2.s3{font-size:17px;margin:0 0 6px;}
.btn-mode p{font-size:13.5px;color:var(--slate);margin:0;}

/* ---- recipe card ---- */
.recipe-card{
  background:var(--paper-dim);border:1.5px dashed var(--line);border-radius:14px;padding:20px;
}
.recipe-layers{display:flex;flex-direction:column-reverse;gap:4px;max-width:220px;margin:14px auto;}
.recipe-layer{
  padding:8px 14px;border-radius:6px;font-family:var(--mono);font-size:12.5px;font-weight:600;
  text-align:center;color:#fff;
}
.layer-pan{background:var(--bread);}
.layer-lechuga{background:var(--lettuce);}
.layer-queso{background:var(--cheese);color:#5B4300;}
.layer-tomate{background:var(--tomato);}
.recipe-blur{filter:blur(3px);transition:filter .2s ease;cursor:pointer;}
.recipe-blur.revealed{filter:blur(0);cursor:default;}

/* ---- tile grid reused for ingredient palette / TIM WOOD ---- */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;}
.tile{
  border:1.5px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;
  background:#fff;text-align:left;font-family:var(--body);color:var(--ink);
  font-size:13.5px;transition:transform .15s ease,border-color .2s ease,background .2s ease;
}
.tile:hover{border-color:var(--bread);transform:translateY(-2px);}
.tile .tile-icon{font-size:24px;display:block;margin-bottom:6px;}
.tile.correct{border-color:var(--green-500);background:rgba(22,163,74,.08);cursor:default;pointer-events:none;}
.tile.correct::after{content:" ✓";color:var(--green-700);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);}}

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

/* ---- sandwich assembly ---- */
.factory-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.turn-banner{
  background:var(--violet-700);color:#fff;border-radius:10px;padding:10px 16px;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-align:center;margin-bottom:16px;
}
.sandwich-stack{
  display:flex;flex-direction:column-reverse;gap:4px;min-height:180px;justify-content:flex-start;
  max-width:220px;margin:0 auto 18px;border:1.5px dashed var(--line);border-radius:12px;padding:14px;
  background:var(--paper-dim);
}
.stack-layer{padding:10px 14px;border-radius:6px;font-family:var(--mono);font-size:12px;font-weight:600;color:#fff;text-align:center;animation:dropIn .2s ease;}
@keyframes dropIn{from{transform:translateY(-10px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.stack-seed{width:10px;height:10px;border-radius:50%;background:#3A2E1E;display:inline-block;margin:0 2px;}

.ingredient-palette{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.ingredient-btn{
  border:1.5px solid var(--line);border-radius:12px;padding:14px 10px;background:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;min-width:88px;
  font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--ink);
  transition:transform .12s ease,border-color .15s ease;
}
.ingredient-btn:hover{transform:translateY(-2px);border-color:var(--bread);}
.ingredient-btn .ing-icon{font-size:26px;}
.ingredient-btn.stuck{border-color:var(--red);animation:shake .4s ease;}
.ingredient-btn:disabled{opacity:.35;cursor:not-allowed;}

.factory-stats{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;color:var(--slate);margin-top:14px;}
.factory-stats b{color:var(--ink);}

.results-table{width:100%;border-collapse:collapse;margin:18px 0;}
.results-table th,.results-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:13.5px;}
.results-table th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--slate);text-transform:uppercase;}
.results-table td.metric-good{color:var(--green-700);font-weight:700;}

/* ---- lock / code input reused for team setup ---- */
.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(--body);font-size:14.5px;background:#fff;color:var(--ink);
  min-width:200px;flex:1;
}
.lock-box input:focus{outline:none;border-color:var(--bread);}
.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-700);}

.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:14px 0;}
.role-card{border:1.5px solid var(--line);border-radius:12px;padding:14px;background:#fff;}
.role-card label{font-size:11.5px;font-family:var(--mono);color:var(--slate);text-transform:uppercase;display:block;margin-bottom:6px;}
.role-card input{width:100%;padding:9px 10px;border:1.5px solid var(--line);border-radius:7px;font-size:13.5px;}

.count-picker{display:flex;gap:8px;flex-wrap:wrap;}
.count-btn{
  width:52px;height:52px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
  font-family:var(--display);font-weight:700;font-size:18px;cursor:pointer;
}
.count-btn.selected{border-color:var(--bread);background:var(--bread);color:#fff;}

/* ---- sequence ordering (kaizen) ---- */
.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:#fff;color:var(--ink);font-family:var(--body);font-size:13.5px;transition:all .15s ease;
}
.seq-chip:hover{border-color:var(--bread);}
.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(22,163,74,.1);border-color:var(--green-500);color:var(--green-700);}
.seq-target .seq-chip.correct::after{content:" ✓";font-weight:700;}

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