/* Duelist Kingdom Phase 4 — user-friendly clarity layer
   Safe UI-only patch. Does not change Supabase writes, Star Chip math, or match finalization logic. */

:root{
  --dk-help-bg: rgba(5, 12, 28, 0.84);
  --dk-help-border: rgba(0, 179, 255, 0.38);
  --dk-help-soft: rgba(124, 77, 255, 0.14);
  --dk-help-gold: #ffd166;
}

.dk-guide-strip,
.dk-page-explainer,
.dk-action-help,
.dk-empty-next,
.dk-confirm-card{
  border: 1px solid var(--dk-help-border);
  background: linear-gradient(135deg, rgba(0,179,255,.12), rgba(124,77,255,.12)), var(--dk-help-bg);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(0,0,0,.24);
  color: #fff;
}

.dk-guide-strip{
  margin: 14px 0 18px;
  padding: 14px;
}

.dk-guide-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}

.dk-guide-head h2{
  margin:0 0 4px;
  font-size:clamp(1.1rem, 2vw, 1.35rem);
}

.dk-guide-head p{ margin:0; }

.dk-guide-toggle{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:999px;
  padding:.55rem .8rem;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.dk-guide-toggle:hover{ transform:translateY(-1px); }

.dk-guide-body{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

.dk-guide-item{
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
}

.dk-guide-item strong{
  display:block;
  color:var(--dk-help-gold);
  margin-bottom:5px;
}

.dk-guide-item span,
.dk-guide-item li{
  color:rgba(255,255,255,.88);
  line-height:1.35;
}

.dk-guide-item ul{
  margin:.35rem 0 0 1.1rem;
  padding:0;
}

.dk-guide-strip.is-collapsed .dk-guide-body{ display:none; }

.dk-flow-pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:.55rem 0;
}

.dk-flow-pill{
  border:1px solid rgba(255,255,255,.17);
  background:rgba(255,255,255,.08);
  border-radius:999px;
  padding:.35rem .58rem;
  font-size:.8rem;
  color:#fff;
}
.dk-flow-pill.is-done{ border-color:rgba(0,255,174,.45); background:rgba(0,255,174,.14); }
.dk-flow-pill.is-current{ border-color:rgba(255,209,102,.6); background:rgba(255,209,102,.16); color:#fff7d1; }
.dk-flow-pill.is-closed{ border-color:rgba(255,98,98,.55); background:rgba(255,98,98,.16); }

.dk-flow-help,
.dk-match-help-card,
.dk-reward-help-card{
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,209,102,.34);
  background: rgba(255,209,102,.10);
  line-height:1.4;
}

.dk-flow-help strong,
.dk-match-help-card strong,
.dk-reward-help-card strong{ color:var(--dk-help-gold); }

.dk-ref-line{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:.35rem;
}

.dk-copy-ref{
  border:1px solid rgba(0,179,255,.4);
  background:rgba(0,179,255,.14);
  color:#fff;
  border-radius:999px;
  font-size:.75rem;
  padding:.28rem .55rem;
  cursor:pointer;
}
.dk-copy-ref:hover{ background:rgba(0,179,255,.22); }
.dk-copy-ref.is-copied{ border-color:rgba(0,255,174,.45); background:rgba(0,255,174,.16); }

.dk-action-help{
  padding:10px 12px;
  margin:.5rem 0;
  font-size:.92rem;
}
.dk-action-help strong{ color:var(--dk-help-gold); }

.dk-page-explainer{
  padding:14px;
  margin-bottom:16px;
}
.dk-page-explainer h3{ margin:.1rem 0 .35rem; }
.dk-page-explainer p{ margin:.25rem 0; }

.dk-empty-next{
  padding:14px;
  text-align:left;
}
.dk-empty-next strong{ color:var(--dk-help-gold); display:block; margin-bottom:.3rem; }

.dk-usability-sr{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.dk-help-callout-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.dk-help-callout-list > div{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:10px;
}

.dk-help-callout-list strong{ color:var(--dk-help-gold); display:block; }

.pk-btn[disabled],
button[disabled]{ opacity:.58; cursor:not-allowed; }

.pk-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.pk-table th,
.pk-table td{
  vertical-align:top;
}

@media (max-width: 920px){
  .dk-guide-body{ grid-template-columns:1fr; }
  .dk-guide-head{ flex-direction:column; }
  .dk-guide-toggle{ width:100%; }
  .dk-help-callout-list{ grid-template-columns:1fr; }
  .pk-actions,
  .pk-inline-panel,
  .pk-challenge-actions{ align-items:stretch; }
  .pk-actions .pk-btn,
  .pk-inline-panel .pk-btn,
  .pk-challenge-actions .pk-btn{ width:100%; justify-content:center; }
}

/* Phase 79 — toddler-simple sidebar and tips */
.dk-simple-sidebar{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));
  gap:8px !important;
  padding:12px !important;
  margin:14px 0 16px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:20px !important;
  background:linear-gradient(135deg, rgba(0,179,255,.14), rgba(124,77,255,.14)), rgba(3,8,20,.78) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.22) !important;
}
.dk-simple-nav-title{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:8px;
  color:#ffd166;
  font-family:Orbitron, sans-serif;
  font-size:.95rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.dk-simple-nav-title::before{ content:'🧭'; font-size:1.05rem; }
.dk-simple-sidebar a{
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 10px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.075) !important;
  color:#fff !important;
  font-weight:900 !important;
  text-align:center !important;
  line-height:1.05 !important;
  text-decoration:none !important;
  text-shadow:0 1px 2px rgba(0,0,0,.8) !important;
}
.dk-simple-sidebar a:hover{
  transform:translateY(-1px);
  border-color:rgba(0,179,255,.55) !important;
  background:rgba(0,179,255,.16) !important;
}
.dk-simple-sidebar a[aria-current="page"]{
  border-color:rgba(255,209,102,.75) !important;
  background:linear-gradient(135deg, rgba(255,209,102,.22), rgba(0,179,255,.16)) !important;
  color:#fff7d1 !important;
}
.dk-simple-sidebar a[data-dk-staff-link="true"]::after{
  content:'Staff';
  margin-left:6px;
  font-size:.62rem;
  color:#111827;
  background:#ffd166;
  border-radius:999px;
  padding:2px 5px;
  text-shadow:none;
}
.dk-simple-guide .dk-guide-head h2{ font-size:clamp(1.35rem, 2.4vw, 1.8rem); }
.dk-simple-guide .dk-guide-body{ grid-template-columns:1.15fr .85fr 1fr; }
.dk-simple-guide .dk-guide-item{ min-height:112px; }
.dk-simple-guide .dk-guide-item strong{
  font-size:1rem;
  letter-spacing:.03em;
}
.dk-simple-guide .dk-guide-item span,
.dk-simple-guide .dk-guide-item li{
  font-size:1.02rem;
}
.dk-simple-guide ol{
  margin:.35rem 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}
.dk-simple-guide ol li{
  display:flex;
  align-items:center;
  gap:8px;
}
.dk-simple-guide ol li span{
  flex:0 0 auto;
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,209,102,.22);
  border:1px solid rgba(255,209,102,.5);
  color:#fff7d1;
  font-weight:900;
}
.dk-guide-toggle{
  min-width:108px;
}
.pk-muted,
.pk-small-note,
.dk-flow-help,
.dk-match-help-card{
  line-height:1.45;
}
@media (min-width: 1180px){
  .dk-kingdom-shell .dk-simple-sidebar{
    grid-template-columns:repeat(6, minmax(0,1fr));
  }
}
@media (max-width: 920px){
  .dk-simple-guide .dk-guide-body{ grid-template-columns:1fr; }
  .dk-simple-sidebar{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .dk-simple-sidebar a{ min-height:46px; }
}
@media (max-width: 520px){
  .dk-simple-sidebar{ grid-template-columns:1fr !important; }
}