/* MEGURU Anytime Guide — friendly, readable extension for guide.css. */
.guide-dialog.help-v2-dialog {
  width:min(980px,100%);
  max-height:min(900px,94vh);
  border-radius:28px;
  background:linear-gradient(145deg,#071923,#0a1d28 58%,#24152d);
}

.guide-header.help-v2-header {
  position:relative;
  display:grid;
  grid-template-columns:190px minmax(0,1fr) 48px;
  gap:20px;
  min-height:138px;
  padding:0 18px 0 0;
  overflow:hidden;
  border-bottom-color:rgba(157,225,232,.22);
}

.help-v2-art {
  align-self:stretch;
  min-height:138px;
  background-image:linear-gradient(90deg,transparent 58%,#081923 100%),linear-gradient(180deg,transparent 45%,rgba(8,25,35,.45)),url("assets/meguru-world-crew.webp");
  background-position:51% center;
  background-size:cover;
}

.help-v2-header-copy { align-self:center; min-width:0; padding:18px 0; }
.guide-header .help-v2-header-copy span { color:#77e3ed; font-size:9px; }
.guide-header .help-v2-header-copy h2 { margin:6px 0 5px; font-size:clamp(25px,3.1vw,39px); letter-spacing:-.045em; }
.help-v2-header-copy p { max-width:590px; margin:0; color:#b2cbd0; font-size:12px; line-height:1.6; }
.guide-header.help-v2-header > #guide-close {
  align-self:start;
  width:44px;
  height:44px;
  margin-top:16px;
  border-radius:50%;
}

.guide-tabs.help-v2-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); }
.guide-tabs.help-v2-tabs button {
  min-height:48px;
  padding:10px 7px;
  font-size:12px;
  line-height:1.25;
  white-space:normal;
}
.guide-tabs.help-v2-tabs button:focus-visible { position:relative; z-index:2; outline:3px solid #fff3a7; outline-offset:-4px; }

.help-v2-dialog .guide-content { padding:25px clamp(17px,3vw,30px) 30px; }
.help-v2-dialog .guide-hero p { font-size:14px; }
.help-v2-dialog .guide-action b { font-size:14px; }
.help-v2-dialog .guide-action p,.help-v2-dialog .guide-word-card p { font-size:12px; }
.help-v2-dialog .guide-rule { font-size:13px; }
.help-v2-dialog .guide-term-chips button { min-height:44px; padding:9px 12px; font-size:12px; border-radius:999px; }
.help-v2-dialog .guide-word-card b { font-size:14px; }
.help-v2-dialog .guide-word-card em { font-size:12px; line-height:1.55; }

.help-v2-panel { color:#effcff; }
.help-v2-panel-lead { max-width:760px; margin-bottom:19px; }
.help-v2-panel-lead > span { color:#ff9ed3; font:900 9px/1 ui-monospace,monospace; letter-spacing:.16em; }
.help-v2-panel-lead h3 { margin:7px 0 6px; color:#fff; font-size:clamp(27px,3.5vw,42px); letter-spacing:-.04em; }
.help-v2-panel-lead p { margin:0; color:#abc3c9; font-size:13px; line-height:1.7; }

.help-v2-crew-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.help-v2-crew-card {
  display:grid;
  grid-template-columns:78px 1fr;
  gap:13px;
  align-items:center;
  min-height:144px;
  padding:13px;
  border:1px solid color-mix(in srgb,var(--help-member) 45%,rgba(255,255,255,.15));
  border-radius:20px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--help-member) 13%,rgba(255,255,255,.045)),rgba(255,255,255,.025));
}
.help-v2-crew-avatar { position:relative; display:grid; place-items:center; width:74px; height:96px; border-radius:35px 35px 28px 28px; color:#163541; background:linear-gradient(155deg,var(--help-member),var(--help-accent)); box-shadow:inset 0 0 0 3px rgba(255,255,255,.65); }
.help-v2-crew-avatar > span { font-size:24px; font-weight:1000; }
.help-v2-crew-avatar > b { position:absolute; right:3px; bottom:3px; display:grid; place-items:center; width:27px; height:27px; border:2px solid #fff; border-radius:50%; color:#fff; background:#173847; font-size:10px; }
.help-v2-crew-card small { color:color-mix(in srgb,var(--help-member) 58%,#fff); font-size:11px; font-weight:900; }
.help-v2-crew-card h4 { margin:3px 0 5px; color:#fff; font-size:21px; }
.help-v2-crew-card p { margin:0; color:#b4c9cd; font-size:12px; line-height:1.58; }
.help-v2-crew-open,.help-v2-onboarding {
  min-height:44px;
  border:1px solid rgba(132,229,237,.45);
  border-radius:999px;
  color:#efffff;
  background:rgba(0,229,255,.08);
  cursor:pointer;
  font-size:12px;
  font-weight:900;
}
.help-v2-crew-open { display:block; margin:18px auto 0; padding:10px 18px; }
.help-v2-crew-open:hover,.help-v2-onboarding:hover { border-color:#fff3a7; background:rgba(255,243,167,.11); }

.help-v2-faq-list { display:grid; gap:8px; }
.help-v2-faq { overflow:hidden; border:1px solid rgba(151,206,224,.2); border-radius:15px; background:rgba(255,255,255,.035); }
.help-v2-faq summary { display:grid; grid-template-columns:38px 1fr 30px; gap:9px; align-items:center; min-height:54px; padding:8px 12px; cursor:pointer; list-style:none; }
.help-v2-faq summary::-webkit-details-marker { display:none; }
.help-v2-faq summary > span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#0a1b23; background:linear-gradient(135deg,#fff09d,#79e1ea); font:1000 10px/1 ui-monospace,monospace; }
.help-v2-faq summary > b { color:#f5ffff; font-size:14px; line-height:1.45; }
.help-v2-faq summary > i { color:#75e2eb; font-size:21px; font-style:normal; text-align:center; transition:transform .2s ease; }
.help-v2-faq[open] summary > i { transform:rotate(45deg); }
.help-v2-faq > div { padding:0 20px 16px 59px; }
.help-v2-faq p { margin:0; color:#b8ced2; font-size:13px; line-height:1.75; }

.guide-footer.help-v2-footer {
  display:grid;
  grid-template-columns:auto minmax(190px,1fr) auto;
  align-items:center;
  gap:12px;
}
.help-v2-onboarding { padding:9px 14px; white-space:normal; }
.help-v2-footer > label { min-height:44px; }
.help-v2-footer > label input { width:19px; height:19px; }
.help-v2-footer > label span { font-size:12px; line-height:1.35; }
.help-v2-footer > div { justify-self:end; }
.help-v2-footer > div button { min-height:44px; min-width:84px; font-size:12px; }
.help-v2-footer #guide-progress { min-width:44px; text-align:center; }

.guide-button { min-width:44px; min-height:44px; }

@media (max-width:760px) {
  .guide-modal { padding:0; }
  .guide-dialog.help-v2-dialog { width:100%; height:100%; max-height:100vh; border:0; border-radius:0; }
  .guide-header.help-v2-header { grid-template-columns:minmax(0,1fr) 48px; gap:0; min-height:0; padding:0 12px 0 0; }
  .help-v2-art { grid-column:1 / 3; grid-row:1; min-height:104px; margin-right:-12px; background-image:linear-gradient(180deg,transparent 34%,#081923 100%),url("assets/meguru-world-crew.webp"); background-position:52% 38%; }
  .help-v2-header-copy { grid-column:1; grid-row:2; padding:11px 13px 13px; }
  .guide-header.help-v2-header > #guide-close { position:absolute; top:8px; right:8px; margin:0; background:rgba(7,19,27,.74); backdrop-filter:blur(8px); }
  .guide-header .help-v2-header-copy h2 { font-size:26px; }
  .help-v2-header-copy p { font-size:12px; }
  .guide-tabs.help-v2-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
  .guide-tabs.help-v2-tabs button { min-width:0; min-height:48px; padding:8px 5px; white-space:normal; }
  .help-v2-dialog .guide-content { padding:18px 13px 24px; }
  .help-v2-crew-grid { grid-template-columns:1fr; }
  .help-v2-crew-card { grid-template-columns:67px 1fr; min-height:132px; padding:10px; }
  .help-v2-crew-avatar { width:63px; height:82px; }
  .help-v2-faq summary { grid-template-columns:34px 1fr 26px; padding-inline:9px; }
  .help-v2-faq > div { padding:0 13px 15px 52px; }
  .guide-footer.help-v2-footer { grid-template-columns:1fr; align-items:stretch; padding:10px 12px max(10px,env(safe-area-inset-bottom)); }
  .help-v2-onboarding { width:100%; }
  .help-v2-footer > label { justify-content:center; }
  .help-v2-footer > div { width:100%; justify-self:stretch; justify-content:space-between; }
  .help-v2-footer > div button { flex:1; }
}

@media (max-width:390px) {
  .help-v2-art { min-height:88px; }
  .guide-header .help-v2-header-copy h2 { font-size:23px; }
  .help-v2-header-copy p { display:none; }
  .help-v2-crew-card p { font-size:11px; }
  .help-v2-faq > div { padding-left:13px; }
}

@media (prefers-reduced-motion:reduce) {
  .help-v2-faq summary > i { transition:none!important; }
}
