:root{
  --bg:#0f172a;
  --card:#111827cc;
  --line:#ffffff24;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#22c55e;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #1f2937, var(--bg));
  color:var(--text);
}
.wrap{max-width:980px;margin:0 auto;padding:16px}
.top{display:flex;justify-content:center;align-items:center;padding:8px 0 16px}
.logo{max-height:90px;max-width:80vw;object-fit:contain}

.grid{display:grid;gap:16px}
@media (min-width: 900px){
  .grid{grid-template-columns: 1fr 1fr; align-items:start}
}

.diceCard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  backdrop-filter: blur(8px);
}
.diceBtn{
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.diceFace{
  width:140px;height:140px;
  margin:0 auto;
  background:#0b1220;
  border:1px solid var(--line);
  border-radius:24px;
  position:relative;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.hint{margin-top:10px;color:var(--muted);font-size:14px}
.diceResult{margin-top:12px;text-align:center;color:var(--muted)}
.diceResult span{color:var(--text);font-weight:700}

.pip{
  width:16px;height:16px;border-radius:50%;
  background:#e5e7eb;
  position:absolute;
  opacity:0;
}
.p1{left:28px;top:28px}
.p2{left:62px;top:28px}
.p3{right:28px;top:28px}
.p4{left:28px;top:62px}
.p5{left:62px;top:62px}
.p6{right:28px;top:62px}
.p7{left:62px;bottom:28px}

.diceFace[data-value="1"] .p5{opacity:1}
.diceFace[data-value="2"] .p1,.diceFace[data-value="2"] .p7{opacity:1}
.diceFace[data-value="3"] .p1,.diceFace[data-value="3"] .p5,.diceFace[data-value="3"] .p7{opacity:1}
.diceFace[data-value="4"] .p1,.diceFace[data-value="4"] .p3,.diceFace[data-value="4"] .p6,.diceFace[data-value="4"] .p7{opacity:1}
.diceFace[data-value="5"] .p1,.diceFace[data-value="5"] .p3,.diceFace[data-value="5"] .p5,.diceFace[data-value="5"] .p6,.diceFace[data-value="5"] .p7{opacity:1}
.diceFace[data-value="6"] .p1,.diceFace[data-value="6"] .p3,.diceFace[data-value="6"] .p4,.diceFace[data-value="6"] .p6,.diceFace[data-value="6"] .p7,.diceFace[data-value="6"] .p2{opacity:1}

.cardsRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.backCard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  cursor:pointer;
  backdrop-filter: blur(8px);
}
.backCard img{width:100%;border-radius:14px;display:block}
.label{margin-top:8px;text-align:center;color:var(--muted);font-weight:600}

.popup{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}
.hidden{display:none !important}
.popupInner{
  width:min(900px, 100%);
  background:#0b1220;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  position:relative;
}
.popupClose{
  position:absolute;right:10px;top:8px;
  width:38px;height:38px;border-radius:12px;
  border:1px solid var(--line);
  background:#0f172a;
  color:var(--text);
  font-size:22px;
  cursor:pointer;
}

.cardView{
  border-radius:16px;
  border:1px solid var(--line);
  padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  background-size:cover;
  background-position:center;
}
.cardHead{display:flex;gap:12px;align-items:baseline}
.cardId{color:var(--muted);font-weight:700}
.cardTitle{margin:0;font-size:20px}
.cardBody{margin-top:12px;display:flex;gap:12px;align-items:flex-start}
.charImg{width:120px;height:auto;border-radius:14px;border:1px solid var(--line);background:#0f172a}
.cardText{font-size:16px;line-height:1.45}

.answerGrid{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.cell{
  width:28px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0f172a;
}
.taskTools{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#111827;
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}
.btnSecondary{background:#0f172a}
.timerBox{color:var(--muted);font-weight:800}
.errorBox{padding:14px;border:1px solid var(--line);border-radius:14px;background:#111827}

/* ===== HOME (макет) ===== */
body.home{
  background: #fff;
  color: #111;
}

.homeWrap{
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-image: url('/assets/img/ui/bg_doodles.png');
  background-size: cover;
  background-position: center;
}

.homeHeader{
  display:flex;
  justify-content:center;
  padding: 18px 10px 6px;
}
.homeLogo{
  width: min(520px, 82vw);
  height: auto;
  object-fit: contain;
}

.homeMain{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 10px 22px 0;
}

.deckCard{
  border: 4px solid transparent;
  border-radius: 18px;
  background: rgba(255,255,255,.0);
  padding: 0;
  cursor: pointer;
  justify-self: center;
  width: min(300px, 32vw);
  aspect-ratio: 3 / 4;
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}
.deckCard img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
  border-radius: 14px;
}
.deckCard--blue{ border-color: #2f6fae; }
.deckCard--red{ border-color: #b11a1a; }

.diceZone{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-bottom: 14px;
}
.diceBtn2{
  border: 0;
  background: transparent;
  cursor: pointer;
}
.diceImg{
  width: min(220px, 44vw);
  height: auto;
  transform: rotate(-15deg);
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.18));
  transition: transform .18s ease;
}
.diceBtn2:active .diceImg{
  transform: rotate(-12deg) scale(0.98);
}
.diceInfo{
  display:flex;
  gap: 8px;
  align-items: baseline;
  font-weight: 800;
}
.diceLabel{ color:#111; }
.diceValue{ color:#111; font-size: 20px; }

.homeFooter{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 18px;
  padding: 14px 22px 18px;
}

.footerCol{ display:flex; flex-direction: column; gap: 10px; }
.footerCol--right{ align-items: end; }
.footerCol--center{ align-items: center; }

.footerLine{
  height: 6px;
  border-radius: 999px;
  width: min(420px, 40vw);
  background: #ddd;
  opacity: .9;
}
.footerLine--blue{ background:#2f6fae; }
.footerLine--red{ background:#b11a1a; }

.footerPill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 14px;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 14px 24px rgba(0,0,0,.12);
  width: fit-content;
}
.footerPill--blue{ background:#2f6fae; }
.footerPill--red{ background:#b11a1a; }

.footerMainBtn{
  padding: 14px 34px;
  border-radius: 14px;
  border: 0;
  background: #3ea64a;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 24px rgba(0,0,0,.14);
  min-width: 220px;
}
.footerHint{
  font-size: 13px;
  color: rgba(0,0,0,.55);
  font-weight: 700;
  min-height: 18px;
}

/* Mobile адаптация */
@media (max-width: 820px){
  .homeMain{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "dice dice"
      "task event";
    gap: 16px;
    padding: 10px 14px 0;
  }
  .diceZone{ grid-area: dice; }
  #taskBack{ grid-area: task; }
  #eventBack{ grid-area: event; }
  .deckCard{ width: min(240px, 44vw); }

  .homeFooter{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px 14px 16px;
  }
  .footerLine{ width: 100%; }
  .footerCol--right{ align-items: start; }
  .footerMainBtn{ width: min(420px, 90vw); }
}