/* DIY Garage — стили страницы «DIY-алхимия» (крафт открытий, только клавиатура) */

.game-wrap{
  max-width:920px; margin:0 auto; padding:40px 24px 70px;
}
.game-title{font-size:clamp(26px,4vw,38px); margin-bottom:8px;}
.game-intro{
  font-size:15px; color:var(--ink-soft); max-width:680px; margin:0 0 20px; line-height:1.6;
}
.game-keys{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--patina-dark);
  background:var(--paper-dark); border:1px solid var(--line); border-radius:6px;
  padding:12px 16px; margin:0 0 24px; line-height:1.9;
}
.game-keys b{color:var(--ink);}

.mode-toggle{display:flex; gap:8px; justify-content:center; margin-bottom:18px;}
.mode-toggle-btn{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em;
  background:var(--paper-dark); border:1px solid var(--line); border-radius:6px;
  padding:9px 16px; cursor:pointer; color:var(--ink-soft); transition:background .15s, color .15s, border-color .15s;
}
.mode-toggle-btn.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.alch-top{
  display:flex; align-items:center; justify-content:center; gap:18px;
  background:var(--ink); border-radius:8px; padding:20px; margin-bottom:10px;
  flex-wrap:wrap;
}
.alch-slot{
  width:96px; height:96px; border-radius:8px;
  background:var(--paper); border:2px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:pointer;
}
.alch-slot.empty{ border-style:dashed; }
.alch-slot:not(.empty){ border-style:solid; border-color:var(--brass); }
.slot-placeholder{font-size:26px; color:var(--line);}
.slot-name{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-soft); text-align:center; padding:0 4px;}
.alch-plus{font-family:'Oswald'; font-size:26px; color:var(--paper);}
.alch-progress{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--brass);
  align-self:center;
}

.overall-progress-wrap{ margin:0 0 22px; }
.overall-progress-label{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--ink);
  margin-bottom:6px; font-weight:600;
}
.overall-progress-label #alchProgress{ color:var(--brass); font-weight:700; }

#alchMsg, .alch-msg{
  min-height:22px; text-align:center; font-size:14px; margin:6px 0 22px;
  font-family:'Inter'; font-weight:600;
}
.alch-msg.success{color:var(--patina-dark);}
.alch-msg.fail{color:var(--rust);}
.alch-msg.known{color:var(--ink-soft); font-weight:400; font-style:italic;}

.alch-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:10px;
}
.tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--paper-dark); border:1px solid var(--line); border-radius:6px;
  padding:10px 6px 8px; transition:border-color .12s, background .12s, transform .12s, opacity .12s;
  touch-action:none; cursor:grab; user-select:none;
}
.tile canvas{background:var(--paper); border-radius:4px;}
.tile-name{font-size:11.5px; font-weight:600; color:var(--ink); text-align:center; line-height:1.25;}
.tile.cursor{border-color:var(--ink); transform:translateY(-2px);}
.tile.picked{border-color:var(--brass); background:#FFF7E8;}
.tile.dragging{opacity:.35;}
.tile.is-base{background:#F7EAD0; border-color:#E5CD9B;}
.tile.is-crafted{background:#DCEAE7; border-color:#9FC7BE;}
.tile.is-base.picked, .tile.is-crafted.picked{border-color:var(--brass);}
.tile.inactive{opacity:.3; filter:grayscale(70%); cursor:not-allowed; pointer-events:none;}
.tile.inactive.cursor{opacity:.5;}

.tile-dot{
  position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%;
}
.tile-dot.dot-active{background:#4CAF50;}
.tile-dot.dot-final{background:var(--ink-soft); opacity:.55;}

.drag-ghost{
  position:fixed; z-index:999; pointer-events:none;
  width:56px; height:56px; border-radius:6px;
  background:var(--paper); border:2px solid var(--brass);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
}
.drag-ghost canvas{width:100%; height:100%;}

#resetHint{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--rust);
  margin-top:20px; min-height:16px; text-align:center;
}
.game-reset-label{
  margin-top:6px; border-top:1px dashed var(--line); padding-top:14px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink-soft); text-align:center;
}

.progress-bar-track{
  width:100%; height:8px; background:var(--paper-dark); border:1px solid var(--line);
  border-radius:4px; overflow:hidden; margin:0 0 14px;
}
.progress-bar-fill{
  height:100%; width:0%; background:var(--brass); transition:width .35s ease;
}

/* ---------- финальные наборы: комнаты-достижения ---------- */
.achievements-wrap{
  margin-top:48px; padding-top:32px; border-top:1px dashed var(--line);
}
.achievements-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:14px; margin-top:16px;
}
.achievement-card{
  position:relative;
  background:var(--paper-dark); border:1px solid var(--line); border-radius:8px;
  padding:16px 14px 14px; display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; transition:border-color .15s, background .15s;
}
.achievement-card.unlocked{ background:#EAF6EE; border-color:var(--patina-dark); }
.achievement-icon{ position:relative; width:64px; height:64px; }
.achievement-icon canvas{ width:64px; height:64px; display:block; }
.achievement-icon canvas.locked-icon{ filter:blur(4px) grayscale(1) brightness(.6); opacity:.6; }
.achievement-lock{
  position:absolute; top:-6px; right:-10px; font-size:18px; line-height:1;
}
.achievement-name{ font-weight:700; font-size:14px; color:var(--ink); }
.achievement-progress-text{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-soft);
}
.achievement-card.unlocked .achievement-progress-text{ color:var(--patina-dark); font-weight:700; }
.achievement-bar-track{
  width:100%; height:6px; background:var(--paper); border:1px solid var(--line);
  border-radius:3px; overflow:hidden;
}
.achievement-bar-fill{ height:100%; background:var(--brass); transition:width .3s ease; }
.achievement-card.unlocked .achievement-bar-fill{ background:var(--patina-dark); }
.achievement-ingredients{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:2px; }
.ingredient-chip{
  font-family:'JetBrains Mono',monospace; font-size:10px; padding:2px 7px; border-radius:10px;
  border:1px solid var(--line); color:var(--ink-soft); background:var(--paper);
}
.ingredient-chip.found{ background:#DCEAE7; border-color:#9FC7BE; color:var(--ink); font-weight:600; }
.ingredient-chip.missing{ opacity:.5; }

/* ---------- комната: пиксельная расстановка открытых вещей ---------- */
.room-wrap{
  margin-top:48px; padding-top:32px; border-top:1px dashed var(--line);
}
.room-title{font-size:clamp(22px,3.4vw,30px); margin-bottom:8px;}
.room-intro{font-size:14.5px; color:var(--ink-soft); max-width:680px; margin:0 0 18px; line-height:1.6;}

.room-switch{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}

.room-scene{
  border:3px solid var(--ink); border-radius:4px; overflow:hidden; margin-bottom:14px;
  background:#000;
}
.room-scene canvas{
  display:block; width:100%; height:auto; aspect-ratio:384/256;
  image-rendering:auto;
  cursor:grab; touch-action:none;
}

.room-tray{
  display:flex; flex-wrap:wrap; gap:8px; min-height:70px;
  background:var(--paper-dark); border:1px solid var(--line); border-radius:6px;
  padding:10px; margin-bottom:12px;
}
.room-tray:empty::before{
  content:'Полка пуста — расставленные вещи вернутся сюда.';
  font-size:12.5px; color:var(--ink-soft); font-style:italic; padding:6px;
}
.room-tray-tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:72px; background:var(--paper); border:1px solid var(--line); border-radius:5px;
  padding:6px 4px 5px; cursor:pointer; user-select:none; transition:border-color .12s, transform .12s;
}
.room-tray-tile:hover{border-color:var(--brass); transform:translateY(-2px);}
.room-tray-tile canvas{width:46px; height:46px; image-rendering:auto;}
.room-tray-tile span{font-size:10px; font-weight:600; color:var(--ink); text-align:center; line-height:1.2;}
.room-tray-hint{
  position:absolute; top:2px; right:3px; font-size:8.5px; font-weight:700;
  color:var(--patina-dark); background:#fff; border-radius:3px; padding:1px 3px;
  text-transform:uppercase; letter-spacing:.02em;
}

.room-controls{display:flex; justify-content:center;}