/* JU7 Game Guide — organized, dependency-free responsive styles */
:root {
  color-scheme:light;
  --bg:#ffffff;
  --panel:#ffffff;
  --panel2:#f5f7fa;
  --text:#202a36;
  --muted:#5d6877;
  --gold:#9a4e16;
  --border:#e1e6eb;
  --accent:#b86425;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}

a {
  color:var(--gold);
  text-underline-offset:3px;
}

a:hover {
  color:#70340d;
}

button {
  font:inherit;
  cursor:pointer;
}

img {
  max-width:100%;
}

.shell {
  width:min(1140px,calc(100% - 36px));
  margin-inline:auto;
}

.skip {
  position:absolute;
  top:-80px;
  left:10px;
  padding:10px;
  background:white;
  color:black;
  z-index:200;
}

.skip:focus {
  top:8px;
}

.notice {
  background:#fff5e8;
  color:#764316;
  text-align:center;
  font-size:.78rem;
  letter-spacing:.025em;
  padding:7px 12px;
}

.header {
  background:#ffffff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:100;
}

.header-inner {
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  text-decoration:none;
  font-size:1.1rem;
  font-weight:800;
  line-height:1.1;
}

.brand img {
  border-radius:12px;
}

.brand b {
  color:var(--gold);
}

.brand small {
  display:block;
  color:var(--muted);
  font-size:.65rem;
  margin-top:5px;
  font-weight:500;
}

.nav {
  display:flex;
  align-items:center;
  gap:22px;
}

.nav a {
  color:var(--text);
  text-decoration:none;
  font-size:.89rem;
  font-weight:600;
}

.nav a:hover,.nav a:focus-visible {
  color:var(--gold);
}

.nav .nav-cta {
  padding:9px 14px;
  border:1px solid var(--gold);
  border-radius:9px;
  color:var(--gold);
}

.menu-toggle {
  display:none;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:8px;
  padding:4px 12px;
  font-size:1.5rem;
}

.page-content {
  padding-top:45px;
  padding-bottom:75px;
}

h1,h2,h3 {
  line-height:1.2;
  letter-spacing:-.025em;
}

h1 {
  font-size:clamp(2.15rem,5vw,4.15rem);
  margin:12px 0 22px;
}

h2 {
  font-size:clamp(1.55rem,3vw,2.2rem);
  margin:36px 0 15px;
}

h3 {
  font-size:1.13rem;
  margin:0 0 10px;
}

p {
  margin:0 0 16px;
}

.lead {
  font-size:clamp(1.05rem,2vw,1.2rem);
  color:#485565;
  max-width:720px;
}

.eyebrow {
  color:var(--gold);
  letter-spacing:.16em;
  font-size:.75rem;
  font-weight:800;
  margin:0;
}

.muted,.footnote {
  color:var(--muted);
}

.small,.footnote {
  font-size:.83rem;
}

.hero {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(260px,.8fr);
  align-items:center;
  gap:48px;
}

.hero-copy {
  padding:20px 0;
}

.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:28px 0 13px;
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:13px 21px;
  border-radius:11px;
  background:#984b18;
  color:#ffffff;
  text-decoration:none;
  font-weight:800;
  border:1px solid #984b18;
}

.button:hover {
  background:#a7541d;
  color:#ffffff;
}

.button-secondary {
  background:transparent;
  color:var(--gold);
}

.button-secondary:hover {
  background:#fff5ea;
  color:var(--text);
}

.slider {
  max-width:380px;
  width:100%;
  justify-self:center;
  padding:10px;
  border:1px solid var(--border);
  background:#f7f8fa;
  border-radius:23px;
  box-shadow:0 6px 24px rgba(30, 41, 59, .06);
}

.slides {
  display:grid;
  aspect-ratio:3/5;
  overflow:hidden;
  border-radius:15px;
  background:#f2f4f7;
}

.slide {
  grid-area:1/1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .5s ease;
}

.slide.active {
  opacity:1;
  z-index:1;
}

.slider-controls {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  padding:10px 0 0;
}

.slider-controls button {
  border:1px solid var(--border);
  color:var(--text);
  background:#ffffff;
  border-radius:50%;
  width:34px;
  height:34px;
}


.stats {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:52px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--panel);
  overflow:hidden;
}

.stats>div {
  padding:20px 15px;
  border-right:1px solid var(--border);
}

.stats>div:last-child {
  border:0;
}

.stats span,.spec-table span {
  display:block;
  color:var(--muted);
  font-size:.82rem;
}

.stats strong {
  font-size:1.17rem;
  color:var(--gold);
}

.section-heading {
  margin-top:60px;
}

.section-heading h2 {
  margin-top:8px;
}

.cards {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:24px 0 45px;
}

.info-card,.soft-panel,.download-panel {
  border:1px solid var(--border);
  background:var(--panel);
  padding:24px;
  border-radius:15px;
}

.info-card p {
  color:#526070;
  font-size:.92rem;
}

.text-link {
  font-weight:700;
}

.split {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px;
  align-items:start;
  margin:30px 0 45px;
}

.soft-panel h3 {
  margin-top:0;
}

.soft-panel ul {
  padding-left:20px;
}

.soft-panel li {
  margin:8px 0;
}

.warning {
  margin:38px 0 0;
  padding:22px 24px;
  border-left:4px solid var(--gold);
  background:#fff8ed;
  border-radius:0 12px 12px 0;
}

.warning strong {
  color:var(--gold);
}

.warning p {
  margin:8px 0 0;
}

.breadcrumbs {
  width:min(1140px,calc(100% - 36px));
  margin:24px auto 0;
  display:flex;
  gap:10px;
  color:var(--muted);
  font-size:.84rem;
}

.page-heading {
  max-width:850px;
  margin-bottom:22px;
}

.page-heading h1 {
  font-size:clamp(2rem,4vw,3.2rem);
}

.page-content>p,.page-content>h2,.page-content>ol {
  max-width:850px;
}

.spec-table {
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  max-width:750px;
  margin:30px 0;
}

.spec-table>div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:13px 18px;
  border-bottom:1px solid var(--border);
}

.spec-table>div:nth-child(odd) {
  background:var(--panel);
}

.spec-table>div:last-child {
  border:0;
}

.download-panel {
  display:flex;
  align-items:center;
  gap:24px;
  max-width:750px;
  margin:26px 0;
}

.download-panel img {
  border-radius:20px;
  flex-shrink:0;
}

.download-panel h2 {
  margin:0 0 10px;
}

.download-panel .button {
  margin:10px 0;
}

.steps {
  padding-left:25px;
}

.steps li {
  padding:5px 0;
}

.footer {
  border-top:1px solid var(--border);
  background:#f7f8fa;
  padding:42px 0 18px;
}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:45px;
}

.footer-grid>div {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.footer-grid a {
  display:block;
  margin:4px 0;
  font-size:.9rem;
}

.footer-title {
  font-size:1.3rem;
  font-weight:800;
  color:var(--gold);
}

.footer-grid p {
  color:var(--muted);
  max-width:420px;
}

.footer-bottom {
  border-top:1px solid var(--border);
  margin-top:30px;
  padding-top:18px;
  color:var(--muted);
  font-size:.8rem;
}

:focus-visible {
  outline:3px solid #b96528;
  outline-offset:3px;
}

@media(max-width:900px) {
  .nav {
    gap:12px;
  }
  .nav a {
    font-size:.79rem;
  }
  .hero {
    gap:24px;
  }
  .cards {
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:700px) {
  .shell {
    width:min(100% - 28px,1140px);
  }
  .header-inner {
    min-height:68px;
  }
  .menu-toggle {
    display:block;
  }
  .nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    padding:16px 20px 20px;
    background:#ffffff;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    box-shadow:0 8px 20px rgba(20, 30, 40, .08);
  }
  .nav.open {
    display:flex;
  }
  .nav a {
    padding:10px 0;
    font-size:1rem;
  }
  .nav .nav-cta {
    text-align:center;
    margin-top:8px;
  }
  .page-content {
    padding-top:25px;
    padding-bottom:48px;
  }
  .hero {
    grid-template-columns:1fr;
    gap:16px;
  }
  .hero-copy {
    padding:8px 0;
  }
  .slider {
    max-width:350px;
  }
  .stats {
    grid-template-columns:repeat(2,1fr);
    margin-top:35px;
  }
  .stats>div {
    border-bottom:1px solid var(--border);
  }
  .stats>div:last-child {
    grid-column:1/-1;
    border-bottom:0;
  }
  .cards {
    grid-template-columns:1fr;
  }
  .split,.footer-grid {
    grid-template-columns:1fr;
    gap:18px;
  }
  .section-heading {
    margin-top:45px;
  }
  .download-panel {
    align-items:flex-start;
    flex-direction:column;
  }
  .actions .button {
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  .slide {
    transition:none;
  }
}

/* Top-of-page download CTA on APK page */
.top-download-cta {
    margin: 20px 0 28px;
}
@media (max-width: 600px) {
    .top-download-cta .button {
        width: 100%;
        justify-content: center;
    }
}

/* Respect reduced-motion preferences without changing the normal design. */
@media (prefers-reduced-motion: reduce) {
  .slide {
    transition: none;
  }
}

/* Light theme refinements: visual-only, no layout or functionality changes. */
a:hover {
  color: #74370f;
}

.nav .nav-cta {
  background: #fff5eb;
  color: #8b4517;
  border-color: #e5b18c;
}

.nav .nav-cta:hover,
.nav .nav-cta:focus-visible {
  background: #fce8d7;
  color: #70340d;
}

.button,
.button:hover {
  color: #ffffff;
}

.button-secondary {
  color: #8b4517;
  background: #ffffff;
  border-color: #c98e66;
}

.button-secondary:hover {
  color: #70340d;
  background: #fff5ea;
}

.slider-controls button {
  color: #202a36;
}

.warning strong {
  color: #824316;
}

@media (max-width: 700px) {
  .nav {
    border-bottom: 1px solid var(--border);
  }
}

/* Lightweight header and footer polish: system fonts, no extra assets. */
.header { border-top:3px solid var(--gold); }
.header-inner { min-height:84px; gap:16px; }
.brand { flex-shrink:0; letter-spacing:-.02em; }
.brand small { letter-spacing:.04em; }
.nav { gap:6px; }
.nav a { padding:9px 10px; border-radius:8px; }
.nav a[aria-current="page"] { background:#fff2e6; color:#74370f; }
.nav .nav-cta { margin-left:6px; background:#824316; border-color:#824316; color:#fff; }
.nav .nav-cta:hover,.nav .nav-cta:focus-visible { background:#70340d; color:#fff; }
.footer { background:#f6f7f9; border-top:3px solid #e5b18c; padding-top:46px; }
.footer-grid { gap:36px; }
.footer-title { margin-bottom:12px; letter-spacing:-.02em; }
.footer-grid strong { margin-bottom:10px; color:var(--text); }
.footer-grid a { padding:5px 0; margin:0; text-decoration:none; }
.footer-grid a:hover { text-decoration:underline; }
.footer-bottom { padding-top:20px; line-height:1.7; }
@media(max-width:1000px) {
 .menu-toggle { display:block; min-width:44px; min-height:44px; }
 .header-inner { min-height:72px; }
 .nav { display:none; position:absolute; left:0; right:0; top:100%; padding:14px 20px 20px; background:#fff; flex-direction:column; align-items:stretch; gap:4px; border-bottom:1px solid var(--border); box-shadow:0 8px 16px rgba(20,30,40,.06); max-height:calc(100dvh - 110px); overflow-y:auto; }
 .nav.open { display:flex; }
 .nav a { padding:11px 12px; font-size:1rem; }
 .nav .nav-cta { margin:8px 0 0; text-align:center; }
}
@media(max-width:700px) {
 .footer-grid { grid-template-columns:1fr 1fr; gap:24px 18px; }
 .footer-grid>div:first-child { grid-column:1/-1; }
 .footer-grid a { overflow-wrap:anywhere; }
 .footer-bottom { margin-top:24px; }
}
@media(max-width:360px) { .footer-grid { grid-template-columns:1fr; } }

.slider-controls { flex-wrap:wrap; gap:12px; }
.troubleshooting { max-width:850px; }
.troubleshooting dt { font-weight:700; margin-top:18px; }
.troubleshooting dd { margin:6px 0 16px; }

.slider-dots { display:flex; align-items:center; gap:2px; }
.slider-controls .slider-dot { width:36px; height:44px; border:0; border-radius:8px; background:transparent; display:grid; place-items:center; padding:0; }
.slider-dot::before { content:""; width:8px; height:8px; border-radius:50%; background:#8b929c; }
.slider-dot.active::before { width:10px; height:10px; background:var(--gold); }

/* In-page navigation and native disclosure controls need no extra JavaScript. */
.page-jumps { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:16px 0; margin-top:24px; border-block:1px solid var(--border); }
.page-jumps span { font-weight:700; font-size:.85rem; }
.page-jumps a { padding:6px 0; font-size:.9rem; }
.reading-section { max-width:850px; }
.help-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.quick-answers details { border-bottom:1px solid var(--border); padding:14px 0; }
.quick-answers summary { cursor:pointer; font-weight:700; padding:5px 0; }
.quick-answers details p { margin:12px 0 0; }
main [id] { scroll-margin-top:110px; }
@media(max-width:700px) { .help-grid { grid-template-columns:1fr; } }

/* Readable comparison table, contained on narrow screens. */
.table-scroll { max-width:100%; overflow-x:auto; margin:24px 0; border:1px solid var(--border); border-radius:12px; }
.category-table { width:100%; border-collapse:collapse; font-size:.94rem; }
.category-table caption { text-align:left; padding:16px; font-weight:700; }
.category-table th,.category-table td { text-align:left; vertical-align:top; padding:14px 16px; border-top:1px solid var(--border); }
.category-table thead { background:var(--panel2); }
.category-table th { color:var(--text); }
@media(max-width:600px) { .category-table { min-width:580px; } }