/* algo.css — доповнення до task.css */

html { height: 100%; }
body { min-height: 100vh; }

/* Кнопки під блоком — як у твоєму стилі */
.dnd-actions{
  display:flex;
  gap:10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
@media (max-width:720px){
  .dnd-actions .btn{ width: 100%; }
}

/* DnD layout */
.dnd-board{
  display:grid;
  gap: 14px;
}

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

.dnd-title{
  font-weight: 800;
  color: rgba(15,23,42,.82);
}

/* Pool */
.dnd-pool{
  border:1px solid rgba(227,230,239,.9);
  background: rgba(255,255,255,.75);
  border-radius: 18px;
  padding: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 54px;
}

/* Tiles */
.dnd-tile{
  border:1px solid rgba(227,230,239,.95);
  background:#fff;
  border-radius: 16px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: grab;
  user-select: none;
  transition: transform .06s, border-color .15s, box-shadow .15s, filter .15s;
  max-width: 100%;
}
.dnd-tile:hover{
  transform: translateY(-1px);
  border-color: rgba(29,25,180,.35);
  box-shadow: 0 10px 24px rgba(29,25,180,.06);
}
.dnd-tile:active{ cursor: grabbing; }
.dnd-tile--locked{
  opacity:.70;
  cursor: default;
}

/* Slots grid */
.dnd-slots{
  --slot: clamp(62px, 5vw, 74px);
  display:grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0,1fr)); /* 5 в рядок */
}

/* на телефонах краще не мучити — 3/4 */
@media (max-width:820px){
  .dnd-slots{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width:520px){
  .dnd-slots{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Drop slot (квадратний) */
.drop{
  position: relative;
  width: 100%;
  border-radius: 18px;
  border:1px dashed rgba(227,230,239,.95);
  background: rgba(15,23,42,.02);
  overflow: hidden;
}
.drop::before{
  content:"";
  display:block;
  padding-top: 100%;
}
.drop--filled{
  border-style: solid;
  background: rgba(29,25,180,.05);
  border-color: rgba(29,25,180,.14);
}
.drop--active{
  outline: 3px solid rgba(37,99,235,.16);
}

/* tile inside slot: center */
.drop > .dnd-tile{
  position:absolute;
  inset: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 10px;
}

/* Single drop zone (для “Зайвий крок”) */
.single-drop{
  border:1px dashed rgba(227,230,239,.95);
  border-radius: 18px;
  padding: 14px;
  min-height: 64px;
  background: rgba(15,23,42,.02);
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
}
.single-drop__label{
  font-weight: 800;
  color: rgba(15,23,42,.75);
}
.single-drop__zone{
  flex: 1 1 auto;
  min-height: 54px;
  border-radius: 16px;
  border:1px dashed rgba(227,230,239,.95);
  background: rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8px;
}
.single-drop__zone.drop--filled{
  border-style: solid;
}

.solution{
  margin-top: 10px;
  border: 1px solid rgba(227,230,239,.9);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,.7);
}
.solution summary{
  cursor:pointer;
  font-weight: 800;
}
.solution__body{
  margin-top: 10px;
}
.dnd-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drop::before {
  display: none; /* прибрати квадратну пропорцію */
}
.odd-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.odd-step {
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 12px 14px;
  background: #fff;
  cursor: pointer;
  transition: .15s;
}
.odd-step:hover {
  background: #f5f3ff;
}
.odd-step.correct {
  background: #e6f8f4;
  border-color: #01b58b;
}
.odd-step.wrong {
  background: #fdf0ef;
  border-color: #f06b64;
}
.single-drop {
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
}
.single-drop__label {
  font-size: 15px;
}
.single-drop__zone {
  min-height: 44px;
  font-size: 15px;
}
.dnd-pool {
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
}
.dnd-tile {
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 12px;
}
/* ✅ Вертикальні слоти: колонка */
.dnd-slots{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

/* ✅ Високі слоти (фіксована висота) */
.drop{
  /* висота слота: на десктопі більша, на мобілці трохи менша */
  height: clamp(76px, 7vw, 96px);
  min-height: clamp(76px, 7vw, 96px);

  border-radius: 18px;
  border: 1px dashed rgba(227,230,239,.95);
  background: rgba(15,23,42,.02);

  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* прибрати квадратність, якщо десь залишилась */
.drop::before{
  display:none !important;
  padding-top: 0 !important;
}

/* ✅ Картка всередині слота — нормальний блок, не absolute */
.drop > .dnd-tile{
  position: static !important;
  inset: auto !important;

  width: 100%;
  max-width: 100%;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  /* щоб довгі тексти красиво переносились */
  white-space: normal;
  line-height: 1.2;
}

/* стани */
.drop--filled{
  border-style: solid;
  background: rgba(29,25,180,.05);
  border-color: rgba(29,25,180,.14);
}
.drop--active{
  outline: 3px solid rgba(37,99,235,.16);
}