:root {
    --bg: #f4ead8; --panel: #fdf6e9; --ink: #221610; --dim: #8a7663; --line: #e2d3ba;
    --s1: #e0392a; --s2: #f07f2d; --s3: #f4b63c; --s4: #e35f8f; --sea: #2a7f8a;
    --term-bg: #221812; --term-ink: #7fe3d4;
    --mono: "JetBrains Mono", monospace;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { background: var(--bg); color: var(--ink); font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }

  .bands { display: grid; grid-template-rows: repeat(4, 7px); }
  .bands div:nth-child(1) { background: var(--s1); } .bands div:nth-child(2) { background: var(--s2); }
  .bands div:nth-child(3) { background: var(--s3); } .bands div:nth-child(4) { background: var(--s4); }

  nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 48px; border-bottom: 2px solid var(--ink); background: var(--bg); }
  .logo { font-family: "Righteous", cursive; font-size: 20px; letter-spacing: .02em; }
  .logo em { font-style: normal; color: var(--s1); }
  .nav-links { display: flex; gap: 32px; font-size: 13.5px; font-weight: 600; letter-spacing: .1em; color: var(--ink); }
  .nav-links a { border-bottom: 2px solid transparent; padding-bottom: 2px; }
  .nav-links a:hover { border-color: var(--s2); }
  .nav-cta { font-family: var(--mono); font-size: 12.5px; background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; }
  .nav-cta:hover { background: var(--s1); }

  .hero { position: relative; overflow: hidden; padding: 100px 48px 120px; border-bottom: 2px solid var(--ink); }
  .hero-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }
  .sun { position: absolute; right: -140px; top: -190px; width: 560px; height: 560px; border-radius: 50%; z-index: 1;
    background: radial-gradient(circle, var(--s3) 0 30%, var(--s2) 30% 46%, var(--s1) 46% 58%, var(--s4) 58% 66%, transparent 66%);
    opacity: .9; }
  .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .28em; color: var(--s1); margin-bottom: 24px; font-weight: 700; }
  h1 { font-family: "Righteous", cursive; font-size: clamp(54px, 8.6vw, 116px); line-height: .98; letter-spacing: .005em; }
  h1 .arc { color: var(--s1); } h1 .arc2 { color: var(--s2); }
  .sub { margin-top: 28px; max-width: 500px; font-size: 17px; line-height: 1.65; color: #5b4a38; }
  .hero-row { margin-top: 40px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
  .cmd { font-family: var(--mono); font-size: 14.5px; background: var(--term-bg); color: #f4ead8;
    padding: 15px 22px; border-radius: 12px; display: flex; gap: 14px; align-items: center; box-shadow: 4px 4px 0 var(--ink); }
  .cmd .dollar { color: var(--s3); }
  .cmd .copy { color: #9c8a75; font-size: 12px; cursor: pointer; border-left: 1px solid #4a3a2c; padding-left: 14px; }
  .cmd .copy:hover { color: #f4ead8; }
  .ghost-link { font-size: 14px; font-weight: 600; border-bottom: 2px solid var(--s2); padding-bottom: 2px; }

  .section { max-width: 1180px; margin: 0 auto; padding: 72px 48px; }
  .sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 36px; }
  .sec-head h2 { font-family: "Righteous", cursive; font-size: 26px; }
  .sec-head .count { font-family: var(--mono); font-size: 12px; color: var(--dim); }

  .feature { display: grid; grid-template-columns: 1.15fr 1fr; border: 2px solid var(--ink); border-radius: 20px; overflow: hidden;
    background: var(--panel); box-shadow: 8px 8px 0 var(--ink); }
  .term { background: var(--term-bg); padding: 38px 36px; display: flex; flex-direction: column; justify-content: center; }
  .term-bar { display: flex; gap: 8px; margin-bottom: 26px; }
  .term-bar span { width: 11px; height: 11px; border-radius: 50%; }
  .term-bar span:nth-child(1) { background: var(--s1); } .term-bar span:nth-child(2) { background: var(--s3); } .term-bar span:nth-child(3) { background: var(--sea); }
  .term pre { font-family: var(--mono); font-size: 17px; line-height: 1.9; color: var(--term-ink); white-space: pre; }
  .term pre .dim { color: #6b584a; }
  .feature-meta { padding: 40px 42px; }
  .feature-meta .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; font-weight: 700; color: var(--panel);
    background: var(--sea); padding: 5px 12px; border-radius: 999px; }
  .feature-meta h3 { font-family: "Righteous", cursive; font-size: 42px; margin: 18px 0 4px; }
  .byline { color: var(--dim); font-size: 13.5px; margin-bottom: 16px; font-weight: 500; }
  .stars { display: flex; gap: 4px; align-items: center; margin-bottom: 18px; }
  .stars svg { width: 16px; height: 16px; fill: none; stroke: #cbb897; stroke-width: 1.8; }
  .stars .label { font-size: 12px; color: var(--dim); margin-left: 8px; font-weight: 500; }
  .feature-meta p { line-height: 1.7; font-size: 15px; max-width: 40ch; color: #5b4a38; }
  .feature-actions { margin-top: 28px; display: flex; gap: 14px; }
  .btn { font-family: "Righteous", cursive; font-size: 15px; padding: 12px 26px; border-radius: 999px; letter-spacing: .04em;
    background: var(--s1); color: var(--panel); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
  .btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
  .btn-quiet { background: var(--panel); color: var(--ink); }

  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 22px; }
  .card { border: 2px solid var(--ink); border-radius: 16px; background: var(--panel); padding: 24px;
    transition: transform .18s, box-shadow .18s; box-shadow: 4px 4px 0 var(--ink); }
  .card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
  .card .mini-term { font-family: var(--mono); font-size: 13px; color: var(--term-ink); background: var(--term-bg);
    border-radius: 10px; padding: 14px; margin-bottom: 18px; white-space: pre; overflow: hidden; }
  .card h4 { font-family: "Righteous", cursive; font-size: 20px; margin-bottom: 4px; }
  .card .tagline { color: #5b4a38; font-size: 13.5px; line-height: 1.5; }
  .card .meta { font-size: 12.5px; color: var(--dim); display: flex; justify-content: space-between; margin-top: 12px; font-weight: 500; }
  .slot { border-style: dashed; box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 200px; text-align: center; gap: 10px; background: transparent; }
  .slot:hover { transform: none; box-shadow: none; border-color: var(--s2); }
  .slot .plus { font-family: "Righteous", cursive; font-size: 26px; color: var(--line); }
  .slot p { color: var(--dim); font-size: 13px; max-width: 20ch; line-height: 1.6; }
  .slot .pub { font-family: var(--mono); font-size: 11.5px; color: var(--s1); font-weight: 700; letter-spacing: .04em; }

  footer { border-top: 2px solid var(--ink); }
  .foot-inner { max-width: 1180px; margin: 0 auto; padding: 44px 48px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--dim); font-weight: 500; }
  .foot-inner .mono { font-family: var(--mono); color: var(--ink); }
  @media (max-width: 860px) {
    nav { padding: 18px 24px; } .nav-links { display: none; }
    .hero, .section { padding-left: 24px; padding-right: 24px; }
    .sun { right: -220px; }
    .feature { grid-template-columns: 1fr; }
  }

/* ── skeletons + nap state ── */
.skeleton { pointer-events: none; box-shadow: none; border-color: var(--line); }
.sk-block { height: 64px; border-radius: 10px; background: var(--line); margin-bottom: 16px; animation: pulse 1.2s ease-in-out infinite; }
.sk-line { height: 12px; border-radius: 6px; background: var(--line); margin-bottom: 10px; animation: pulse 1.2s ease-in-out infinite; }
.sk-line.short { width: 55%; }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.nap .plus { color: var(--s3); }

/* ── game detail ── */
.detail-head { display: grid; grid-template-columns: 1.15fr 1fr; border: 2px solid var(--ink); border-radius: 20px; overflow: hidden; background: var(--panel); box-shadow: 8px 8px 0 var(--ink); }
.detail-body { max-width: 760px; margin: 56px auto 0; }
.detail-body h2 { font-family: "Righteous", cursive; font-size: 24px; margin-bottom: 16px; }
.detail-body .desc { font-size: 16px; line-height: 1.75; color: #5b4a38; }
.install { margin-top: 28px; }
.reviews { margin-top: 56px; padding-top: 40px; border-top: 2px solid var(--line); }
.review-empty { border: 2px dashed var(--line); border-radius: 16px; padding: 44px; text-align: center; color: var(--dim); }
.review-empty .big { font-family: "Righteous", cursive; font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.review-cta { margin-top: 20px; display: flex; justify-content: center; gap: 12px; align-items: center; }
.review-cta .note { font-size: 12.5px; color: var(--dim); }
.lost { text-align: center; padding: 72px 24px; }
.lost h3 { font-family: "Righteous", cursive; font-size: 34px; margin-bottom: 10px; }
.lost p { color: var(--dim); margin-bottom: 24px; }
@media (max-width: 860px) { .detail-head { grid-template-columns: 1fr; } }

/* ── leaderboards ── */
.boards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.board { border: 2px solid var(--ink); border-radius: 16px; background: var(--panel); box-shadow: 4px 4px 0 var(--ink); overflow: hidden; }
.board h3 { font-family: "Righteous", cursive; font-size: 18px; padding: 18px 22px; border-bottom: 2px solid var(--ink); }
.board table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.board td { padding: 12px 22px; border-top: 1px solid var(--line); }
.board tr:first-child td { border-top: none; }
.board .rank { font-family: "JetBrains Mono", monospace; width: 46px; color: var(--dim); }
.board .score { text-align: right; font-family: "JetBrains Mono", monospace; font-weight: 700; }
.board .login { font-weight: 600; }
.board-row.medal .rank { color: var(--panel); font-weight: 700; }
.board-row.m1 .rank { background: var(--s3); } .board-row.m2 .rank { background: var(--s4); } .board-row.m3 .rank { background: var(--s2); }
.board .empty { padding: 28px 22px; color: var(--dim); font-size: 13.5px; }
@media (max-width: 860px) { .boards { grid-template-columns: 1fr; } }

/* ── profile ── */
.profile-wrap { display: flex; justify-content: center; }
.profile-card { width: 100%; max-width: 520px; border: 2px solid var(--ink); border-radius: 20px; background: var(--panel); box-shadow: 8px 8px 0 var(--ink); padding: 44px; }
.profile-card h2 { font-family: "Righteous", cursive; font-size: 28px; margin-bottom: 8px; }
.profile-card .lead { color: var(--dim); font-size: 14px; line-height: 1.6; margin-bottom: 30px; }
.field { display: block; margin-bottom: 24px; }
.field span { display: block; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .2em; color: var(--s1); font-weight: 700; margin-bottom: 10px; }
.field input { width: 100%; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); padding: 13px 16px; font: 600 15px "Inter", sans-serif; color: var(--ink); outline: none; }
.field input:focus { box-shadow: 3px 3px 0 var(--ink); }
.glyphs { display: flex; gap: 10px; flex-wrap: wrap; }
.glyph { width: 46px; height: 46px; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); font: 700 18px "JetBrains Mono", monospace; color: var(--ink); cursor: pointer; }
.glyph.picked { background: var(--term-bg); color: var(--term-ink); box-shadow: 3px 3px 0 var(--ink); }
.profile-card .btn { display: block; width: 100%; text-align: center; margin-top: 14px; }
.profile-card .gh { background: var(--ink); }
.soon { margin-top: 18px; text-align: center; font-size: 13px; color: var(--s1); font-weight: 600; }

/* ── about ── */
.about-hero { padding: 56px 0 64px; }
.about-title { font-family: "Righteous", cursive; font-size: clamp(48px, 8vw, 104px); line-height: 1.0; }
.about-title .arc { color: var(--s1); }
.duo { border: 2px solid var(--ink); border-radius: 20px; overflow: hidden; background: var(--term-bg); box-shadow: 8px 8px 0 var(--ink); }
.duo-bar { display: flex; gap: 8px; padding: 22px 28px 0; }
.duo-bar span { width: 11px; height: 11px; border-radius: 50%; }
.duo-bar span:nth-child(1) { background: var(--s1); } .duo-bar span:nth-child(2) { background: var(--s3); } .duo-bar span:nth-child(3) { background: var(--sea); }
.duo-panes { display: grid; grid-template-columns: 1fr 1fr; }
.duo .pane { margin: 0; padding: 26px 32px 36px; font-family: "JetBrains Mono", monospace; font-size: 15px; line-height: 1.9; color: var(--term-ink); white-space: pre; overflow-x: auto; }
.duo .pane + .pane { border-left: 2px solid #3a2c22; }
.duo .dim-pane { color: #8a7663; }
.duo .dim-pane .bright { color: #d8c9b2; }
.duo .pane .dim { color: #6b584a; }
.beat { padding: 104px 0 0; max-width: 880px; }
.beat.right { margin-left: auto; text-align: right; }
.beat-num { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color: var(--s2); letter-spacing: .3em; margin-bottom: 14px; }
.beat h2 { font-family: "Righteous", cursive; font-size: clamp(36px, 5.4vw, 68px); line-height: 1.04; }
.beat h2 .arc { color: var(--s1); }
.beat p { margin-top: 16px; font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--dim); }
.full-bands { display: grid; grid-template-rows: repeat(4, 7px); margin: 120px calc(50% - 50vw) 0; }
.full-bands div:nth-child(1) { background: var(--s1); } .full-bands div:nth-child(2) { background: var(--s2); }
.full-bands div:nth-child(3) { background: var(--s3); } .full-bands div:nth-child(4) { background: var(--s4); }
.dev-note { padding: 104px 0 24px; text-align: center; }
.dev-note h2 { font-family: "Righteous", cursive; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.06; }
.dev-note p { margin-top: 16px; font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--dim); }
.coming { margin-top: 34px; font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 700; color: var(--dim); }
.coming .c1 { color: var(--s2); } .coming .c2 { color: var(--s4); } .coming .c3 { color: var(--sea); }
.dev-note .cmd { display: inline-flex; margin-top: 44px; }
@media (max-width: 860px) {
  .duo-panes { grid-template-columns: 1fr; }
  .duo .pane + .pane { border-left: none; border-top: 2px solid #3a2c22; }
  .beat { padding-top: 72px; } .beat.right { text-align: left; margin-left: 0; }
}

/* ── reviews ── */
.stars svg.filled { fill: var(--s3); stroke: var(--ink); }
.review-item { border-top: 1px solid var(--line); padding: 20px 4px; }
.review-item:first-of-type { border-top: none; }
.review-head { display: flex; align-items: baseline; gap: 14px; }
.review-login { font-weight: 600; font-size: 14.5px; }
.review-stars { color: var(--s3); letter-spacing: 2px; font-size: 13px; }
.review-when { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--dim); }
.review-text { margin-top: 8px; color: #5b4a38; font-size: 14.5px; line-height: 1.65; }