/* The Donut Shoppe: shared styles. Palette carried over from the original site. */
:root {
  --bg:#241c19; --bg-elevated:#2b221d; --surface:#302722; --surface-alt:#3a302a; --border:#4a3e37; --border-soft:#3d332d;
  --text:#e2d6cb; --text-dim:#b7a89b; --text-faint:#a39588;
  --rose:#c48f8a; --rose-hover:#d09d98; --rose-soft:#a97972; --rose-press:#8f645e; --sage:#8ea28a; --blue:#7f95a3;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono","DejaVu Sans Mono",monospace;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1rem; --fs-md:1.125rem; --fs-lg:1.375rem; --fs-xl:1.75rem;
  --fs-display:clamp(2.25rem,5.5vw,3.5rem); --fs-h1:clamp(2rem,5vw,2.75rem);
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:24px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --wrap:1080px; --wrap-narrow:760px; --header-h:64px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px -18px rgba(0,0,0,.6);
  color-scheme:dark;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion:no-preference){ html { scroll-behavior:smooth; } }
html,body { margin:0; background:var(--bg); color:var(--text); }
body { font-family:var(--font); font-size:var(--fs-base); line-height:1.6; min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3 { color:var(--text); line-height:1.2; letter-spacing:-.015em; margin:0; }
p { margin:0; }
a { color:var(--rose); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover { color:var(--rose-hover); }
strong { color:var(--text); font-weight:700; }
code,.mono { font-family:var(--mono); }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }
::selection { background:var(--rose-soft); color:var(--bg); }

.skip { position:absolute; left:12px; top:-60px; z-index:100; background:var(--rose); color:var(--bg); font-weight:700; padding:10px 14px; border-radius:var(--r-sm); text-decoration:none; }
.skip:focus { top:12px; color:var(--bg); }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.wrap-narrow { max-width:var(--wrap-narrow); }

/* ---------- Header / nav ---------- */
.site-header { position:sticky; top:0; z-index:50; background:rgba(36,28,25,.92); border-bottom:1px solid var(--border-soft); }
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))) {
  .site-header { background:rgba(36,28,25,.78); -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px); }
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:var(--header-h); flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:800; font-size:1.0625rem; letter-spacing:-.01em; padding:6px 4px; margin-left:-4px; white-space:nowrap; }
.brand img { width:34px; height:34px; border-radius:50%; }
.brand:hover { color:var(--text); }
.header-inner.no-brand { justify-content:flex-end; }
.site-header.is-home { background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.site-header.is-home.is-open { background:var(--bg-elevated); }
.nav-list { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.nav-list a { display:block; color:var(--text-dim); text-decoration:none; font-size:var(--fs-sm); font-weight:600; padding:8px 14px; border-radius:999px; transition:color .15s, background-color .15s; white-space:nowrap; }
.nav-list a:hover { color:var(--text); background:var(--surface); }
.nav-list a[aria-current="page"] { color:var(--text); background:var(--surface-alt); box-shadow:inset 0 0 0 1px var(--border); }
.nav-list a[aria-current="true"] { color:var(--text); background:var(--surface); }
.nav-toggle { display:none; }

/* Small screens without JS: links wrap below the brand as a row of pills. */
@media (max-width:559px) {
  .site-nav { width:100%; padding-bottom:10px; }
  .nav-list { gap:4px; }
  .nav-list a { padding:7px 11px; background:var(--surface); }
}
/* Small screens with JS: collapsible menu behind a hamburger button. */
@media (max-width:559px) {
  .js .site-nav { width:auto; padding:0; }
  .js .nav-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:44px; height:44px; padding:0; margin-right:-6px; background:transparent; color:var(--text); border:1px solid var(--border); border-radius:12px; cursor:pointer; }
  .js .nav-toggle:hover { background:var(--surface); }
  .nav-toggle .bars { position:relative; width:18px; height:12px; }
  .nav-toggle .bars span { position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor; transition:transform .2s ease, opacity .2s ease, top .2s ease; }
  .nav-toggle .bars span:nth-child(1){ top:0; } .nav-toggle .bars span:nth-child(2){ top:5px; } .nav-toggle .bars span:nth-child(3){ top:10px; }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(1){ top:5px; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(3){ top:5px; transform:rotate(-45deg); }
  .js .nav-list { display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:4px; padding:12px 16px 20px; background:var(--bg-elevated); border-bottom:1px solid var(--border); box-shadow:0 0 0 100vmax rgba(18,13,11,.55); clip-path:inset(0 0 -100vmax 0); max-height:calc(100vh - var(--header-h)); overflow-y:auto; }
  .js .site-header.is-open .nav-list { display:flex; }
  .js .nav-list a { font-size:var(--fs-md); padding:13px 16px; border-radius:var(--r-md); background:transparent; }
  .js .nav-list a:hover { background:var(--surface); }
  .js .nav-list a[aria-current="page"], .js .nav-list a[aria-current="true"] { background:var(--surface-alt); }
}
@media (prefers-reduced-motion:reduce){ .nav-toggle .bars span, .nav-list a, .btn, .chip-copy { transition:none !important; } }

/* ---------- Layout ---------- */
main { flex:1 0 auto; width:100%; }
.section { padding-top:var(--space-7); padding-bottom:var(--space-7); }
.page-head { padding-top:var(--space-7); padding-bottom:var(--space-5); }
.eyebrow { display:inline-block; color:var(--sage); font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--space-3); }
.page-head h1 { font-size:var(--fs-h1); letter-spacing:-.025em; }
.page-head .lede { margin-top:var(--space-3); color:var(--text-dim); font-size:var(--fs-md); max-width:60ch; }
.updated { margin-top:var(--space-3); color:var(--text-faint); font-size:var(--fs-sm); }

/* ---------- Home launcher ---------- */
.launcher { min-height:calc(100vh - var(--header-h) - 150px); min-height:calc(100svh - var(--header-h) - 150px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top:var(--space-8); padding-bottom:var(--space-7); }
.mark { width:120px; height:120px; border-radius:50%; margin:0 auto var(--space-5); box-shadow:0 0 0 8px rgba(196,143,138,.07), 0 18px 50px -20px rgba(196,143,138,.45); }
.launcher h1 { font-size:var(--fs-display); letter-spacing:-.03em; }
.age { display:inline-flex; align-items:center; gap:8px; margin-top:var(--space-4); padding:5px 12px; border:1px solid var(--border); border-radius:999px; color:var(--text-dim); font-size:var(--fs-sm); font-weight:600; background:var(--bg-elevated); }
.age::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--sage); }
.launcher .ip { margin-top:var(--space-7); width:min(100%,560px); justify-content:space-between; }
.launch-actions { margin-top:var(--space-3); width:min(100%,560px); display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.launch-actions.one { grid-template-columns:1fr; width:min(100%,260px); margin-top:var(--space-6); }
.launch-actions .btn { min-height:56px; border-radius:16px; font-size:var(--fs-md); }
.lede-sm { margin-top:var(--space-3); color:var(--text-dim); font-size:var(--fs-md); }
@media (max-width:520px){ .launch-actions { grid-template-columns:1fr; } .launcher .ip { margin-top:var(--space-6); } }

/* ---------- Minecraft IP box ---------- */
.ip { display:inline-flex; align-items:center; justify-content:center; gap:16px; max-width:100%; background:var(--rose-soft); color:var(--bg); border:0; border-radius:22px; padding:18px 20px 18px 28px; font:inherit; cursor:pointer; transition:background-color .15s, transform .1s; box-shadow:var(--shadow); }
.ip:hover { background:var(--rose); }
.ip:active { background:var(--rose-press); transform:translateY(1px); }
.ip .addr { font-family:var(--mono); font-weight:800; font-size:clamp(1.05rem,3.4vw,1.6rem); letter-spacing:.01em; overflow-wrap:anywhere; }
.ip .act { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--bg); color:var(--text); border-radius:14px; padding:10px 16px; font-weight:700; font-size:var(--fs-sm); min-width:112px; white-space:nowrap; }
.ip .act svg { width:17px; height:17px; flex-shrink:0; }
.no-js .ip { cursor:text; user-select:all; -webkit-user-select:all; }
.no-js .ip .act { display:none; }
@media (max-width:520px){ .ip { flex-direction:column; gap:12px; width:100%; padding:18px 16px; } .ip .addr { font-size:clamp(1rem,5.2vw,1.25rem); } .ip .act { width:100%; } }

/* Code chip (invite code, pack) */
.chip { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:8px 8px 8px 16px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--r-md); }
.chip-label { color:var(--text-faint); font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.chip-value { display:block; color:var(--text); font-family:var(--mono); font-weight:700; font-size:1.125rem; letter-spacing:.04em; margin-top:1px; }
.chip-copy { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:92px; height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--rose-soft); background:transparent; color:var(--rose); font:inherit; font-size:var(--fs-sm); font-weight:700; cursor:pointer; transition:background-color .15s, color .15s; }
.chip-copy:hover { background:var(--rose); border-color:var(--rose); color:var(--bg); }
.chip-copy.is-done { background:var(--sage); border-color:var(--sage); color:var(--bg); }
.chip-copy svg { width:16px; height:16px; }
.no-js .chip-copy { display:none; }
.no-js .chip-value { user-select:all; -webkit-user-select:all; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:12px 18px; border-radius:var(--r-md); border:1px solid var(--rose); background:var(--rose); color:var(--bg); font:inherit; font-weight:800; font-size:var(--fs-base); line-height:1.2; text-align:center; text-decoration:none; cursor:pointer; transition:background-color .15s, border-color .15s, color .15s; }
.btn:hover { background:var(--rose-hover); border-color:var(--rose-hover); color:var(--bg); }
.btn:active { background:var(--rose-soft); border-color:var(--rose-soft); }
.btn-secondary { background:var(--surface-alt); border-color:var(--border); color:var(--text); }
.btn-secondary:hover { background:#443830; border-color:#5a4c43; color:var(--text); }
.btn-secondary:active { background:var(--surface); }
.btn svg { width:18px; height:18px; flex-shrink:0; }
.btn-row { display:flex; flex-wrap:wrap; gap:10px; }
.btn-row .btn { flex:1 1 200px; }

.steps { list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:1fr; counter-reset:step; }
.steps li { counter-increment:step; position:relative; padding:22px 22px 22px 70px; background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--r-lg); color:var(--text-dim); font-size:var(--fs-sm); }
.steps li::before { content:counter(step); position:absolute; left:22px; top:20px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--surface-alt); border:1px solid var(--border); color:var(--sage); font-weight:800; font-size:var(--fs-sm); }
.steps li strong { display:block; color:var(--text); font-size:var(--fs-base); margin-bottom:2px; }
.steps.stack { grid-template-columns:1fr; }

/* Content panels and prose */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:clamp(22px,4.5vw,40px); box-shadow:var(--shadow); }
.panel + .panel { margin-top:20px; }
.panel h2 { font-size:var(--fs-lg); margin-bottom:var(--space-3); }
section.stack-lg > * + * { margin-top:var(--space-5); }
.prose { color:var(--text-dim); line-height:1.7; }
.prose h2 { font-size:var(--fs-lg); margin:var(--space-6) 0 var(--space-3); padding-top:var(--space-5); border-top:1px solid var(--border-soft); }
.prose h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.prose p, .prose ul, .prose ol { margin:0 0 var(--space-4); }
.prose ul, .prose ol { padding-left:1.3rem; }
.prose li + li { margin-top:6px; }
.prose li::marker { color:var(--rose-soft); }
.prose > :last-child { margin-bottom:0; }
.prose code { font-size:.92em; color:var(--text); background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:6px; padding:1px 6px; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:12px; margin:0; }
.facts div { background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:14px 16px; }
.facts dt { color:var(--text-faint); font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.facts dd { margin:4px 0 0; color:var(--text); font-weight:700; }
.subnav { display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--space-4); }
.subnav a { padding:6px 12px; border-radius:999px; border:1px solid var(--border); color:var(--text-dim); font-size:var(--fs-sm); font-weight:600; text-decoration:none; }
.subnav a:hover { color:var(--text); background:var(--surface); }
.subnav a[aria-current="page"] { color:var(--text); background:var(--surface-alt); }
.muted { color:var(--text-faint); font-size:var(--fs-sm); }


/* Info directory */
.dir { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.dir-item { display:grid; grid-template-columns:1fr auto; grid-template-areas:"title arrow" "desc arrow"; column-gap:16px; padding:22px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); text-decoration:none; box-shadow:var(--shadow); transition:border-color .15s, background-color .15s; }
.dir-item:hover { border-color:var(--rose-soft); background:#352b25; }
.dir-title { grid-area:title; color:var(--text); font-weight:700; font-size:var(--fs-md); }
.dir-desc { grid-area:desc; margin-top:2px; color:var(--text-dim); font-size:var(--fs-sm); }
.dir-arrow { grid-area:arrow; align-self:center; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--surface-alt); color:var(--rose); transition:transform .15s; }
.dir-arrow svg { width:18px; height:18px; }
.dir-item:hover .dir-arrow { transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){ .dir-item, .dir-arrow { transition:none; } }

/* Footer */
.site-footer { margin-top:var(--space-6); border-top:1px solid var(--border-soft); padding:var(--space-5) 0 var(--space-6); color:var(--text-faint); font-size:var(--fs-sm); }
.footer-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 18px; text-align:center; }
.site-footer a { color:var(--text-dim); text-decoration:none; }
.site-footer a:hover { color:var(--text); text-decoration:underline; }

/* Toast for copy feedback (screen readers get the live region) */
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:var(--text); color:var(--bg); font-weight:700; font-size:var(--fs-sm); padding:10px 16px; border-radius:999px; box-shadow:0 10px 30px -10px rgba(0,0,0,.6); transition:opacity .2s, transform .2s; z-index:60; }
.toast.show { opacity:1; transform:translate(-50%,0); }