/* Satu tampilan: hitam, putih, aksen oranye. Tidak ikut tema sistem. */
  :root {
    color-scheme: dark;
    --black: #0B0B0A;
    --black-2: #161614;
    --line-dark: #2B2A27;
    --white: #F5F4EF;
    --white-2: #EAE8E0;
    --line-light: #CFCCC2;
    --grey: #8F8D86;
    --grey-light: #B9B7AF;
    --orange: #FF5F1F;
    --orange-ink: #C4420A;

    --f-pixel: "Pixelify Sans", "Courier New", monospace;
    /* Angka pakai Press Start 2P: di Pixelify Sans angka 2 mirip 8 */
    --f-digits: "Press Start 2P", "Courier New", monospace;
    --f-body: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
    --f-mono: "Geist Mono", ui-monospace, Consolas, monospace;

    --gutter: clamp(16px, 4vw, 40px);
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.55;
  }
  img, canvas { max-width: 100%; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
  h1, h2, h3, p { margin: 0; }
  h1, h2, h3 { text-wrap: balance; }

  .wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

  .pix { font-family: var(--f-pixel); font-weight: 700; letter-spacing: 0.01em; }
  .mono { font-family: var(--f-mono); }
  .eyebrow {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  canvas.sprite { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

  /* Nav */
  .nav {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 20;
    background: var(--black);
    border-bottom: 1px solid var(--line-dark);
  }
  .nav .wrap { display: flex; align-items: center; gap: 12px 28px; padding-block: 12px; flex-wrap: wrap; }
  .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .logo .pix { font-size: 1.15rem; }
  .logo .pix span { color: var(--orange); }
  .nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0 0 0 auto; padding: 0; }
  .nav ul a { font-family: var(--f-mono); font-size: 0.8rem; color: var(--grey-light); text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; }
  .nav ul a:hover { color: var(--orange); }
  .lang {
    font-family: var(--f-pixel);
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--orange);
    color: var(--black);
    border: 0;
    padding: 6px 10px;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--white);
  }
  .lang:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--white); }

  /* Hero */
  .hero {
    background-color: var(--black);
    background-image: radial-gradient(rgba(245, 244, 239, 0.09) 1px, transparent 1.2px);
    background-size: 18px 18px;
    border-bottom: 1px solid var(--line-dark);
  }
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 24px 40px;
    align-items: center;
    padding-block: clamp(40px, 7vw, 88px) clamp(32px, 5vw, 64px);
  }
  .hero-copy { display: grid; gap: 22px; align-content: center; }
  .hero-copy .eyebrow { color: var(--grey-light); display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .hero-copy .eyebrow b { color: var(--orange); font-weight: 500; }
  .hero h1 {
    font-family: var(--f-pixel);
    font-weight: 700;
    font-size: clamp(3rem, 8.2vw, 6.4rem);
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }
  .hero h1 .o { color: var(--orange); display: block; }
  .hero .sub { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--white-2); max-width: 46ch; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    padding: 6px 10px;
    border: 1px solid var(--line-dark);
    background: var(--black-2);
    color: var(--white-2);
  }
  .chip::before { content: "■ "; color: var(--orange); }
  .actions { display: flex; flex-wrap: wrap; gap: 14px; }
  .btn {
    font-family: var(--f-pixel);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 12px 18px;
    border: 2px solid var(--white);
    transition: transform .12s, box-shadow .12s;
  }
  .btn-main { background: var(--orange); color: var(--black); border-color: var(--orange); box-shadow: 5px 5px 0 var(--white); }
  .btn-alt { background: transparent; color: var(--white); box-shadow: 5px 5px 0 var(--orange); }
  .btn:hover { transform: translate(-2px, -2px); }
  .btn-main:hover { box-shadow: 7px 7px 0 var(--white); }
  .btn-alt:hover { box-shadow: 7px 7px 0 var(--orange); }

  .stage { position: relative; }
  #scene {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.9;
    max-width: 100%;
    cursor: grab;
    touch-action: pan-y;
  }
  #scene:active { cursor: grabbing; }
  #scene canvas { width: 100% !important; height: 100% !important; display: block; }
  #scene .fallback { display: none; width: 60%; margin: 10% auto 0; }
  #scene.no3d { cursor: default; }
  #scene.no3d .fallback { display: block; }
  .stage-hint {
    position: absolute;
    left: 0;
    bottom: 4px;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    color: var(--grey);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
  }
  .stage-hint::before { content: "↻ "; color: var(--orange); }

  /* Stats */
  .stats { background: var(--black); border-bottom: 1px solid var(--line-dark); }
  .stats .grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stat { padding: 26px 18px 24px; border-left: 1px solid var(--line-dark); display: grid; gap: 6px; align-content: start; }
  .stat:first-child { border-left: 0; padding-left: 0; }
  .stat .n { font-family: var(--f-digits); font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--orange); font-variant-numeric: tabular-nums; }
  .stat .l { font-size: 0.85rem; color: var(--grey-light); line-height: 1.4; }

  section { padding-block: clamp(64px, 9vw, 112px); }
  .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; align-items: end; margin-bottom: 44px; }
  .sec-head .eyebrow { grid-column: 1 / -1; }
  .sec-head h2 { font-family: var(--f-pixel); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; }
  .sec-head p { max-width: 52ch; }

  /* Journey (light) */
  .light { background: var(--white); color: var(--black); }
  .light .eyebrow { color: var(--orange-ink); }
  .light .sec-head p { color: #4A4944; }
  .levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .level {
    position: relative;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: 6px 6px 0 var(--black);
    padding: 18px 18px 20px;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: 10px;
    transition: box-shadow .15s, transform .15s;
    will-change: transform;
  }
  .level:hover { box-shadow: 6px 6px 0 var(--orange); }
  .level-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .lv { font-family: var(--f-digits); font-weight: 400; font-size: 0.62rem; line-height: 1.4; background: var(--black); color: var(--white); padding: 3px 7px; }
  .yr { font-family: var(--f-mono); font-size: 0.8rem; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
  .level canvas.sprite { width: 48px; height: 48px; }
  .level h3 { font-family: var(--f-body); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
  .level p { font-size: 0.92rem; color: #45443F; line-height: 1.45; }
  .level.next { background: var(--orange); }
  .level.next .lv { background: var(--black); }
  .level.next .yr, .level.next p { color: var(--black); }
  .level.next:hover { box-shadow: 6px 6px 0 var(--black); }


  /* Ideas (dark) */
  .ideas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--orange); }
  .idea { padding: 26px 22px 28px 0; border-bottom: 1px solid var(--line-dark); display: grid; gap: 14px; align-content: start; }
  .idea + .idea { padding-left: 22px; border-left: 1px solid var(--line-dark); }
  .idea .eyebrow { color: var(--orange); }
  .idea .q { font-size: 1.2rem; font-weight: 600; line-height: 1.3; }
  .idea .refs { display: grid; gap: 6px; }
  .idea .refs a { font-size: 0.88rem; color: var(--grey-light); text-decoration: none; border-bottom: 1px solid var(--line-dark); padding-bottom: 6px; }
  .idea .refs a:hover { color: var(--orange); }
  .idea .refs a::after { content: " ↗"; color: var(--orange); }

  /* Work (light) */
  .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-bottom: 56px; }
  .feature {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 12px;
    padding: 22px;
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 6px 6px 0 var(--black);
    text-decoration: none;
    color: var(--black);
    transition: box-shadow .15s;
    will-change: transform;
  }
  .feature:hover { box-shadow: 6px 6px 0 var(--orange); }
  .feature.dark { background: var(--black); color: var(--white); box-shadow: 6px 6px 0 var(--orange); }
  .feature.dark:hover { box-shadow: 6px 6px 0 var(--grey); }
  .feature .eyebrow { color: var(--orange-ink); }
  .feature.dark .eyebrow { color: var(--orange); }
  .feature h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
  .feature .foot { font-family: var(--f-mono); font-size: 0.8rem; color: #5A5953; }
  .feature.dark .foot { color: var(--grey-light); }
  .feature canvas.sprite { width: 40px; height: 40px; }

  .essays-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
  .essays-head h3 { font-family: var(--f-pixel); font-weight: 700; font-size: 1.6rem; }
  .filters { display: flex; flex-wrap: wrap; gap: 8px; }
  .filters button {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    padding: 7px 12px;
    border: 1.5px solid var(--black);
    background: var(--white);
    color: var(--black);
    cursor: pointer;
  }
  .filters button[aria-pressed="true"] { background: var(--black); color: var(--white); }
  .essays { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .essays li { border-bottom: 1px solid var(--line-light); }
  .essays a { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 14px; padding-block: 14px; text-decoration: none; color: var(--black); align-items: baseline; }
  .essays .d { font-family: var(--f-mono); font-size: 0.75rem; color: #6B6A63; font-variant-numeric: tabular-nums; }
  .essays .t { font-weight: 600; line-height: 1.35; }
  .essays a:hover .t { color: var(--orange-ink); }
  .essays .tag-en { font-family: var(--f-mono); font-size: 0.7rem; background: var(--black); color: var(--white); padding: 1px 5px; margin-left: 6px; vertical-align: 2px; }

  /* Invite (orange) */
  .invite { background: var(--orange); color: var(--black); }
  .invite .grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px 64px; }
  .invite .eyebrow { color: var(--black); }
  .invite h2 { font-family: var(--f-pixel); font-weight: 700; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02; margin-top: 14px; }
  .topics { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
  .topics li { display: flex; gap: 12px; font-weight: 600; font-size: 1.05rem; }
  .topics li::before { content: "▶"; font-size: 0.75rem; padding-top: 5px; }
  .links { display: grid; gap: 0; border-top: 2px solid var(--black); }
  .links a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 2px solid var(--black);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
  }
  .links a span:last-child { font-family: var(--f-mono); font-weight: 400; font-size: 0.85rem; }
  .links a:hover { background: var(--black); color: var(--orange); padding-inline: 10px; }

  footer { background: var(--black); padding-block: 28px; }
  footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
  footer .eyebrow { color: var(--grey); }
  footer canvas.sprite { width: 24px; height: 24px; }

  /* Tepi tangga pixel antarbagian */
  .edge {
    height: 16px;
    background-color: var(--from);
    background-image: linear-gradient(90deg, var(--to) 50%, transparent 50%), linear-gradient(var(--to), var(--to));
    background-size: 32px 8px, 100% 8px;
    background-position: 0 0, 0 8px;
    background-repeat: repeat-x, no-repeat;
  }

  /* Bar XP */
  .xp { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
  .xp span { display: block; height: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }

  /* Pita berjalan */
  .ticker { overflow: hidden; background: var(--orange); color: var(--black); border-block: 2px solid var(--black); }
  .ticker .track { display: flex; width: max-content; animation: tick 45s linear infinite; padding-block: 10px; }
  .ticker .track span { font-family: var(--f-pixel); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; white-space: nowrap; padding-right: 28px; }
  .ticker .track span:nth-child(even) { font-size: 0.8rem; align-self: center; }
  @keyframes tick { to { transform: translateX(-50%); } }

  /* Di media */
  .press { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .press a {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 14px;
    padding: 20px;
    background: var(--black-2);
    border: 1px solid var(--line-dark);
    text-decoration: none;
    color: var(--white);
    transition: border-color .15s, box-shadow .15s;
    will-change: transform;
  }
  .press a:hover { border-color: var(--orange); box-shadow: 6px 6px 0 var(--orange); }
  .press .outlet { font-family: var(--f-pixel); font-weight: 700; font-size: 1.3rem; color: var(--orange); }
  .press .hl { font-weight: 600; line-height: 1.35; }
  .press .meta { font-family: var(--f-mono); font-size: 0.75rem; color: var(--grey); }

  /* Kontak */
  .wa-form { margin-top: 32px; display: grid; gap: 12px; background: var(--black); color: var(--white); padding: 22px; box-shadow: 8px 8px 0 var(--white); max-width: 560px; }
  .wa-form .ttl { font-family: var(--f-pixel); font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
  .wa-form .ttl canvas { width: 28px; height: 28px; }
  .wa-form label { font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-light); display: block; margin-bottom: 4px; }
  .wa-form input, .wa-form select, .wa-form textarea {
    width: 100%;
    font: inherit;
    font-size: 0.95rem;
    color: var(--white);
    background: var(--black-2);
    border: 1.5px solid var(--line-dark);
    padding: 10px 12px;
    border-radius: 0;
  }
  .wa-form textarea { resize: vertical; min-height: 84px; }
  .wa-form input:focus, .wa-form select:focus, .wa-form textarea:focus { outline: none; border-color: var(--orange); }
  .wa-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .wa-form button {
    justify-self: start;
    font-family: var(--f-pixel);
    font-weight: 700;
    font-size: 1rem;
    background: var(--orange);
    color: var(--black);
    border: 0;
    padding: 12px 18px;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--white);
  }
  .wa-form button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--white); }
  .contact-side { display: grid; gap: 16px; align-content: start; }
  .ccard { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--black); color: var(--white); padding: 16px 18px; text-decoration: none; box-shadow: 6px 6px 0 var(--white); }
  a.ccard:hover { box-shadow: 6px 6px 0 var(--black); outline: 2px solid var(--white); }
  .ccard canvas { width: 40px; height: 40px; }
  .ccard .k { font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-light); display: block; }
  .ccard .v { font-weight: 700; font-size: 1.1rem; word-break: break-all; color: var(--white); text-decoration: none; }
  .ccard .go { font-family: var(--f-pixel); color: var(--orange); font-size: 1.2rem; }
  .copy { font-family: var(--f-mono); font-size: 0.75rem; background: transparent; color: var(--orange); border: 1.5px solid var(--orange); padding: 6px 10px; cursor: pointer; }
  .copy:hover { background: var(--orange); color: var(--black); }

  /* Musik */
  .music {
    font-family: var(--f-pixel);
    font-weight: 700;
    font-size: 0.85rem;
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    padding: 4px 10px;
    cursor: pointer;
  }
  .music[aria-pressed="true"] { background: var(--white); color: var(--black); }
  .music[aria-pressed="false"] { animation: blink 1.2s steps(2, jump-none) infinite; }
  @keyframes blink { 50% { border-color: var(--orange); color: var(--orange); } }

  /* Kitab */
  .kitab-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
  .cover-wrap { position: relative; width: 100%; max-width: 380px; justify-self: center; }
  .cover { display: block; width: 100%; height: auto; border: 2px solid var(--white); box-shadow: 10px 10px 0 var(--orange); will-change: transform; transition: transform .15s; }
  .soon-badge { position: absolute; top: -14px; right: -12px; background: var(--orange); color: var(--black); padding: 8px 12px; font-size: 0.95rem; transform: rotate(4deg); box-shadow: 4px 4px 0 var(--white); }
  .kitab-copy { display: grid; gap: 18px; align-content: start; }
  .kitab-copy h2 { font-family: var(--f-pixel); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1; }
  .kitab-copy .kb-sub { font-size: 1.2rem; color: var(--orange); font-weight: 600; }
  .kitab-copy .kb-quote { font-size: 1.1rem; font-style: italic; color: var(--white-2); border-left: 3px solid var(--orange); padding-left: 16px; max-width: 60ch; }
  .kitab-copy .kb-desc { color: var(--grey-light); max-width: 62ch; }
  .laws-t { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
  .laws { list-style: none; margin: -8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; font-size: 0.92rem; }
  .laws li { display: flex; gap: 10px; border-bottom: 1px solid var(--line-dark); padding-block: 5px; }
  .laws li b { font-family: var(--f-mono); font-weight: 500; color: var(--orange); min-width: 2.2em; }
  .kb-meta { font-family: var(--f-mono); font-size: 0.8rem; color: var(--grey); }
  .kitab-copy .btn { justify-self: start; }

  /* Builder */
  .interest { display: flex; flex-wrap: wrap; gap: 8px; }
  .interest span { font-family: var(--f-mono); font-size: 0.78rem; padding: 5px 9px; border: 1.5px solid var(--black); }

  /* Acara live */
  .acara { border-top: 1px solid var(--line-dark); }
  .live-dot { color: var(--orange); animation: blink 1s steps(2, jump-none) infinite; }
  .filters.dark button { background: transparent; color: var(--white); border-color: var(--white); }
  .filters.dark button[aria-pressed="true"] { background: var(--white); color: var(--black); }
  .events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
  .ev-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 18px; background: var(--black-2); border: 1px solid var(--line-dark); color: var(--white); text-decoration: none; }
  a.ev-card:hover { border-color: var(--orange); box-shadow: 6px 6px 0 var(--orange); }
  .ev-date { display: grid; align-content: center; justify-items: center; min-width: 76px; padding: 10px; background: var(--orange); color: var(--black); }
  .ev-d { font-family: var(--f-digits); font-size: 1.6rem; line-height: 1.1; }
  .ev-m { font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; }
  .ev-body { display: grid; gap: 6px; align-content: start; padding-right: 84px; }
  .ev-body h3 { font-size: 1.1rem; line-height: 1.3; }
  .ev-meta { font-family: var(--f-mono); font-size: 0.8rem; color: var(--orange); }
  .ev-desc { font-size: 0.9rem; color: var(--grey-light); }
  .ev-badge { position: absolute; top: 14px; right: 14px; font-family: var(--f-mono); font-size: 0.68rem; border: 1px solid var(--orange); color: var(--orange); padding: 2px 6px; }
  .ev-empty { grid-column: 1 / -1; display: grid; gap: 16px; justify-items: start; color: var(--grey-light); padding: 28px; border: 1px dashed var(--line-dark); }
  .ev-empty .btn { color: var(--black); }

  /* Game */
  .game-frame { border: 2px solid var(--white); box-shadow: 8px 8px 0 var(--orange); background: var(--black); }
  #game { display: block; width: 100%; height: auto; aspect-ratio: 8 / 3; image-rendering: pixelated; cursor: pointer; touch-action: manipulation; }
  .game-help { margin-top: 18px; font-family: var(--f-mono); font-size: 0.8rem; color: var(--grey); }

  /* Kuis */
  .quiz { max-width: 800px; background: var(--white); border: 2px solid var(--black); box-shadow: 8px 8px 0 var(--black); padding: clamp(18px, 3vw, 28px); }
  .qz-head { display: flex; align-items: center; gap: 16px; }
  .qz-step { font-family: var(--f-mono); font-size: 0.78rem; white-space: nowrap; }
  .qz-bar { flex: 1; height: 10px; border: 1.5px solid var(--black); }
  .qz-bar span { display: block; height: 100%; background: var(--orange); }
  .qz-q { font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 700; line-height: 1.3; margin: 22px 0; }
  .qz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .qz-opt { text-align: left; font: inherit; font-weight: 600; color: var(--black); padding: 14px 16px; background: var(--white); border: 2px solid var(--black); box-shadow: 4px 4px 0 var(--black); cursor: pointer; }
  .qz-opt:hover { background: var(--orange); }
  .qz-opt:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--black); }
  .qz-result { display: grid; gap: 12px; justify-items: start; }
  .qz-result canvas { width: 72px; height: 72px; }
  .qz-name { font-family: var(--f-pixel); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; }
  .qz-text { font-size: 1.05rem; max-width: 60ch; }
  .qz-read { font-weight: 600; color: var(--orange-ink); }
  .qz-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; align-items: center; }
  .qz-again { font-family: var(--f-mono); font-size: 0.85rem; background: none; border: 0; text-decoration: underline; cursor: pointer; color: var(--black); }
  .light .btn-alt { color: var(--black); border-color: var(--black); }
  .qz-cardbox { margin-top: 18px; padding-top: 16px; border-top: 2px dashed var(--line-light); display: grid; gap: 10px; }
  .qz-cardbox input { font: inherit; padding: 11px 12px; border: 2px solid var(--black); min-width: 0; flex: 1 1 180px; }
  .qz-cardout { display: grid; gap: 10px; justify-items: start; }
  .qz-cardout img { width: 220px; height: auto; border: 2px solid var(--black); box-shadow: 6px 6px 0 var(--orange); }

  /* Rak buku */
  .book-next { margin-top: clamp(64px, 8vw, 104px); padding-top: clamp(56px, 7vw, 88px); border-top: 1px solid var(--line-dark); }
  .soon-badge.avail { background: var(--white); box-shadow: 4px 4px 0 var(--orange); }
  .toc { grid-template-columns: 1fr; }
  .tag-new { font-family: var(--f-mono); font-size: 0.7rem; background: var(--orange); color: var(--black); padding: 1px 5px; margin-left: 6px; vertical-align: 2px; }
  .essay-live { font-family: var(--f-mono); font-size: 0.75rem; color: var(--orange-ink); }

  /* Aset PixelLab */
  .px-ic, .px-card, .sec-ic, .stat-ic, .guide img, .panorama img, .banner, .story img, .ccard img, .wa-float img, .wa-form .ttl img { image-rendering: pixelated; image-rendering: crisp-edges; }
  .px-ic { width: 64px; height: 64px; margin: -6px 0 -4px -6px; filter: drop-shadow(3px 3px 0 rgba(11,11,10,0.18)); transition: transform .2s; }
  .level { cursor: pointer; }
  .level:hover .px-ic, .level:focus-visible .px-ic { transform: translateY(-4px) scale(1.06); }
  .level::after { content: "▶"; position: absolute; right: 14px; bottom: 12px; font-size: 0.7rem; color: var(--orange-ink); opacity: 0.8; }
  .level.next::after { color: var(--black); }
  .px-card { width: 48px; height: 48px; }
  .sec-ic { grid-column: 1 / -1; width: 64px; height: 64px; margin-bottom: -6px; }
  .stat-ic { width: 48px; height: 48px; margin: -8px 0 2px -4px; }
  .ccard img { width: 48px; height: 48px; }
  .ccard { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .wa-float img { width: 32px; height: 32px; }
  .wa-form .ttl img { width: 32px; height: 32px; }
  .j-side { display: grid; gap: 14px; }
  #perjalanan .sec-head { align-items: start; }
  .banner { display: block; width: 100%; height: auto; border: 2px solid var(--black); box-shadow: 6px 6px 0 var(--black); }
  .stage-banner { max-height: 260px; object-fit: cover; border-color: var(--white); box-shadow: 6px 6px 0 var(--orange); margin-bottom: 24px; }
  .guide { position: absolute; left: 0; bottom: 28px; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
  .guide img { width: 144px; height: 144px; animation: hop 2.4s steps(2, jump-none) infinite; }
  .bubble { order: 2; align-self: flex-start; max-width: 190px; font-family: var(--f-pixel); font-weight: 500; font-size: 0.95rem; line-height: 1.25; background: var(--white); color: var(--black); padding: 8px 10px; box-shadow: 4px 4px 0 var(--orange); }
  @keyframes hop { 50% { transform: translateY(-4px); } }
  .panorama { position: relative; background: var(--black); }
  .panorama > img { display: block; width: 100%; height: clamp(200px, 30vw, 420px); object-fit: cover; object-position: 50% 40%; }
  .pano-cap { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; align-items: flex-end; gap: 12px; }
  .pano-hero { width: 96px; height: 96px; }
  .pano-cap p { background: var(--black); color: var(--white); padding: 8px 12px; font-size: clamp(0.95rem, 2vw, 1.3rem); box-shadow: 4px 4px 0 var(--orange); margin-bottom: 10px; }
  .story { padding: 0; border: 2px solid var(--white); background: var(--black); color: var(--white); width: min(720px, calc(100vw - 32px)); box-shadow: 10px 10px 0 var(--orange); }
  .story::backdrop { background: rgba(11, 11, 10, 0.78); }
  .story img { display: block; width: 100%; height: auto; }
  .story-body { display: grid; gap: 10px; padding: 20px 22px 22px; }
  .story-body h3 { font-family: var(--f-pixel); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.05; }
  .story-body p { color: var(--white-2); }
  .story-nav { display: flex; gap: 10px; margin-top: 6px; }
  .story-nav button { font-family: var(--f-pixel); font-weight: 700; background: transparent; color: var(--white); border: 2px solid var(--white); padding: 6px 12px; cursor: pointer; }
  .story-nav button:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }
  .story-nav #storyClose { margin-left: auto; }

  /* Peran berganti */
  .roles { font-family: var(--f-digits); font-size: clamp(0.85rem, 1.6vw, 1.1rem); color: var(--orange); margin-top: -6px; }
  .roles .gt { color: var(--grey); }
  .caret { animation: blink 1s steps(2, jump-none) infinite; }
  /* Notifikasi bab */
  .toasts { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: grid; gap: 10px; pointer-events: none; }
  .toast { display: grid; grid-template-columns: 40px auto; gap: 10px; align-items: center; background: var(--black); color: var(--white); border: 2px solid var(--orange); box-shadow: 4px 4px 0 var(--white); padding: 8px 12px 8px 8px; animation: toastIn .35s steps(4) both; max-width: 280px; }
  .toast img { width: 40px; height: 40px; image-rendering: pixelated; }
  .toast b { display: block; font-family: var(--f-digits); font-size: 0.55rem; color: var(--orange); letter-spacing: 0.04em; margin-bottom: 3px; }
  .toast span { font-family: var(--f-pixel); font-weight: 700; font-size: 1rem; }
  .toast.out { animation: toastOut .3s steps(3) both; }
  @keyframes toastIn { from { transform: translateX(-120%); } to { transform: none; } }
  @keyframes toastOut { to { transform: translateX(-130%); } }
  /* Muncul saat di-scroll (tetap terlihat saat diam) */
  .pop { animation: pop .45s steps(5) both; }
  @keyframes pop { from { transform: translateY(14px) scale(.98); } to { transform: none; } }
  /* Konfeti pixel */
  .confetti { position: fixed; width: 8px; height: 8px; pointer-events: none; z-index: 60; }
  .copy-block { display: grid; gap: 6px; }
  .cr-note { font-size: 0.78rem; color: var(--grey); max-width: 60ch; }

  /* Sumber */
  .src { font-family: var(--f-mono); font-size: 0.7rem; color: var(--orange); text-decoration: none; white-space: nowrap; }
  .src:hover { text-decoration: underline; }
  .light .src, .story .src { color: var(--orange-ink); }
  .story .src { color: var(--orange); justify-self: start; }
  .sources { margin-top: 36px; border-top: 1px solid var(--line-light); padding-top: 14px; font-size: 0.88rem; color: #45443F; }
  .sources summary { cursor: pointer; font-family: var(--f-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--black); padding-block: 6px; }
  .sources ol { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }

  /* Target sentuh & tombol kartu level */
  .nav ul a { display: inline-block; padding: 10px 4px; }
  .music, .lang { min-height: 36px; min-width: 44px; }
  .logo { padding-block: 6px; }
  .src { display: inline-block; padding-block: 5px; }
  .lv-open { position: absolute; inset: 0; width: 100%; background: transparent; border: 0; cursor: pointer; z-index: 1; }
  .lv-open:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
  @media (max-width: 640px) {
    .music, .lang { min-height: 40px; }
    .nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0 14px; -webkit-overflow-scrolling: touch; }
    .nav ul::-webkit-scrollbar { display: none; }
    .nav ul a { padding: 10px 2px; white-space: nowrap; }
    .nav .wrap { padding-block: 8px; row-gap: 2px; }
  }

  /* Latar pixel art PixelLab di balik blok gelap & oranye (lapisan transparan menjaga kontras teks) */
  .hero, .stats, #gagasan, #acara, #buku, #main, #media, .invite { background-repeat: no-repeat; background-size: cover; image-rendering: pixelated; }
  .hero { background-image: radial-gradient(rgba(245, 244, 239, 0.08) 1px, transparent 1.2px), linear-gradient(rgba(11, 11, 10, 0.55), rgba(11, 11, 10, 0.82)), url(px/bg-hero.webp); background-size: 18px 18px, cover, cover; background-repeat: repeat, no-repeat, no-repeat; background-position: 0 0, center, center bottom; }
  .stats { background-image: linear-gradient(rgba(11, 11, 10, 0.72), rgba(11, 11, 10, 0.86)), url(px/bg-stats.webp); background-position: center bottom; }
  #gagasan, #acara { background-image: linear-gradient(rgba(11, 11, 10, 0.8), rgba(11, 11, 10, 0.9)), url(px/bg-ideas.webp); background-position: center bottom; }
  #buku { background-image: linear-gradient(rgba(11, 11, 10, 0.74), rgba(11, 11, 10, 0.9)), url(px/bg-books.webp); background-position: center; background-attachment: scroll; }
  #main { background-image: linear-gradient(rgba(11, 11, 10, 0.7), rgba(11, 11, 10, 0.88)), url(px/bg-play.webp); background-position: center bottom; }
  #media { background-image: linear-gradient(rgba(11, 11, 10, 0.8), rgba(11, 11, 10, 0.9)), url(px/bg-media.webp); background-position: center; }
  .invite { background-image: linear-gradient(rgba(255, 95, 31, 0.82), rgba(255, 95, 31, 0.92)), url(px/bg-invite.webp); background-position: center; }

  /* Keluarga: rombongan petualang */
  .family { background-color: var(--orange); background-image: linear-gradient(rgba(255, 95, 31, 0.8), rgba(255, 95, 31, 0.9)), url(px/bg-family.webp); background-size: cover; background-position: center; image-rendering: pixelated; color: var(--black); }
  .family .eyebrow { color: var(--black); }
  .family .sec-head p { color: var(--black); }
  .fam-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0 0 32px; }
  .fam-scenes figure { margin: 0; display: grid; gap: 8px; }
  .fam-scenes img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: pixelated; border: 2px solid var(--black); box-shadow: 6px 6px 0 var(--black); }
  .fam-scenes figcaption { font-family: var(--f-mono); font-size: 0.8rem; }
  .members { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .member { background: var(--white); border: 2px solid var(--black); box-shadow: 6px 6px 0 var(--black); padding: 14px; display: grid; gap: 10px; align-content: start; }
  .member img { width: 96px; height: 96px; image-rendering: pixelated; margin: -4px 0 -6px; }
  .m-body { display: grid; gap: 7px; }
  .m-class { font-family: var(--f-digits); font-size: 0.55rem; line-height: 1.5; color: var(--orange-ink); text-transform: uppercase; }
  .member h3 { font-size: 1rem; line-height: 1.25; }
  .member p { font-size: 0.86rem; color: #45443F; }
  .stat-bar { display: grid; grid-template-columns: 1fr 80px 26px; gap: 8px; align-items: center; font-family: var(--f-mono); font-size: 0.7rem; }
  .stat-bar i { height: 8px; border: 1.5px solid var(--black); background: linear-gradient(90deg, var(--orange) var(--v), transparent var(--v)); }
  .stat-bar b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
  .uni-game { margin-top: 36px; display: grid; gap: 10px; }
  .uni-game h3 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1; }
  .fam-frame { border-color: var(--black); box-shadow: 8px 8px 0 var(--black); }
  .uni-game .game-help { color: var(--black); margin-top: 6px; }
  #game2 { display: block; width: 100%; height: auto; aspect-ratio: 8 / 3; image-rendering: pixelated; cursor: pointer; touch-action: manipulation; }
  .mount { display: flex; align-items: center; gap: 16px; margin-top: 28px; background: var(--black); color: var(--white); padding: 12px 18px 12px 12px; box-shadow: 6px 6px 0 var(--white); max-width: 640px; }
  .mount img { width: 96px; height: 96px; image-rendering: pixelated; flex: none; }
  .mount b { color: var(--orange); font-family: var(--f-pixel); font-size: 1.05rem; }
  @media (max-width: 1020px) { .members { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .members, .fam-scenes { grid-template-columns: 1fr; } .member { grid-template-columns: 96px 1fr; align-items: start; } }

  /* Awan & naga boleh terbang lintas area hero, tapi tidak melebarkan halaman */
  html, body { overflow-x: clip; }
  .hero { overflow: hidden; }
  /* Pulau Lawu PixelLab */
  .island { position: relative; display: grid; place-items: center; cursor: grab; touch-action: pan-y; user-select: none; }
  .island:active { cursor: grabbing; }
  .island:focus-visible { outline: 2px dashed var(--orange); outline-offset: 6px; }
  .isl-float { position: relative; z-index: 1; width: 100%; animation: islFloat 3.2s steps(8) infinite alternate; }
  .isl-float img { display: block; width: min(100%, 600px); height: auto; margin-inline: auto; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 0 18px rgba(255, 95, 31, 0.28)); pointer-events: none; }
  .isl-shadow { position: absolute; left: 50%; bottom: 6%; width: 46%; height: 5%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 95, 31, 0.28), transparent); border-radius: 50%; animation: islShadow 3.2s steps(8) infinite alternate; }
  #sparkles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
  .cloud { position: absolute; image-rendering: pixelated; pointer-events: none; }
  .c-back { width: 320px; top: 14%; z-index: 0; opacity: 0.55; animation: drift 38s linear infinite; }
  .c-front { width: 256px; bottom: 18%; z-index: 3; opacity: 0.9; animation: drift 26s linear infinite -9s; }
  .c-front2 { width: 192px; top: 40%; z-index: 3; opacity: 0.8; animation: drift 32s linear infinite -20s; }
  @keyframes drift { from { left: -35%; } to { left: 105%; } }
  .dragon-path { position: absolute; inset: 0; z-index: 2; pointer-events: none; animation: dragonFly 16s linear infinite; }
  .dragon { position: absolute; width: 144px; height: 144px; background: url(px/dragon-strip.webp) 0 0 / 1296px 144px no-repeat; image-rendering: pixelated; animation: flap 0.9s steps(9) infinite, dragonFace 16s linear infinite; }
  @keyframes flap { to { background-position: -1296px 0; } }
  @keyframes dragonFly {
    0% { transform: translate(-30%, 6%); } 48% { transform: translate(80%, -14%); }
    52% { transform: translate(84%, -10%); } 96% { transform: translate(-28%, 16%); } 100% { transform: translate(-30%, 6%); }
  }
  @keyframes dragonFace { 0%, 49.9% { transform: scaleX(1); } 50%, 100% { transform: scaleX(-1); } }
  @keyframes islFloat { from { transform: translateY(6px); } to { transform: translateY(-10px); } }
  @keyframes islShadow { from { transform: translateX(-50%) scaleX(1.05); opacity: 1; } to { transform: translateX(-50%) scaleX(0.85); opacity: 0.6; } }

  /* Daftar panjang dilipat */
  .more-btn { margin-top: 18px; font-family: var(--f-pixel); font-weight: 700; font-size: 1rem; background: var(--white); color: var(--black); border: 2px solid var(--black); box-shadow: 4px 4px 0 var(--black); padding: 10px 16px; cursor: pointer; }
  .more-btn.dark { background: transparent; color: var(--white); border-color: var(--white); box-shadow: 4px 4px 0 var(--orange); }
  .more-btn:hover { transform: translate(-1px, -1px); }
  .collapsed-item { display: none !important; }

  /* Tombol bagikan buku */
  .share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .share span { font-family: var(--f-mono); font-size: 0.72rem; color: var(--grey-light); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; }
  .share a, .share button { font-family: var(--f-mono); font-size: 0.8rem; color: var(--white); background: transparent; border: 1.5px solid var(--line-dark); padding: 8px 12px; text-decoration: none; cursor: pointer; min-height: 36px; }
  .share a:hover, .share button:hover { border-color: var(--orange); color: var(--orange); }
  .kitab-copy .actions .btn-alt { color: var(--white); }

  /* Kotak dialog RPG: potret berbicara */
  .dialog { position: relative; z-index: 4; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin: -18px auto 0; max-width: 560px; background: var(--black); border: 3px solid var(--white); box-shadow: 6px 6px 0 var(--orange); padding: 10px 14px 10px 10px; }
  .d-face { width: 96px; height: 96px; background: url(px/jiji/strip.webp) 0 0 / 672px 96px no-repeat; image-rendering: pixelated; border: 0; box-shadow: 0 0 0 2px var(--orange); background-color: var(--black-2); }
  .d-body { position: relative; display: grid; gap: 4px; min-height: 84px; align-content: start; }
  .d-name { font-family: var(--f-digits); font-size: 0.62rem; color: var(--orange); }
  #talkText { font-family: var(--f-pixel); font-weight: 500; font-size: 1.05rem; line-height: 1.35; color: var(--white); min-height: 2.7em; padding-right: 26px; }
  /* Chip waktu & cuaca Karanganyar */
  .wx { margin: 16px auto 0; text-align: center; font-family: var(--f-mono); font-size: 0.74rem; color: var(--grey-light); letter-spacing: 0.04em; }
  .wx b { color: var(--orange); font-weight: 500; }
  .stage-hint { position: static; text-align: center; margin-top: 6px; }
  #rain { position: absolute; inset: -40px -20px 0; width: calc(100% + 40px); height: calc(100% + 40px); pointer-events: none; z-index: 3; }
  /* Latar hero mengikuti waktu Karanganyar */
  :root[data-phase="pagi"] .hero, :root[data-phase="siang"] .hero { background-image: radial-gradient(rgba(245, 244, 239, 0.06) 1px, transparent 1.2px), linear-gradient(rgba(11, 11, 10, 0.5), rgba(11, 11, 10, 0.8)), url(px/bg-hero-day.webp); }
  :root[data-phase="sore"] .hero { background-image: radial-gradient(rgba(245, 244, 239, 0.06) 1px, transparent 1.2px), linear-gradient(rgba(11, 11, 10, 0.45), rgba(11, 11, 10, 0.82)), url(px/bg-hero-dusk.webp); }
  @media (max-width: 640px) { .d-face { width: 72px; height: 72px; background-size: 504px 72px; } #talkText { font-size: 0.95rem; } .dialog { margin-top: 0; } }

  /* Di mode game, WA ada di bawah kotak Jiji; tombol WA melayang diganti tombol Jiji di layar menu & bab */
  html.game .wa-float { display: none; }

  /* Karanganyar Quest */
  .quest { background-image: linear-gradient(rgba(11, 11, 10, 0.82), rgba(11, 11, 10, 0.92)), url(px/bg-hero-day.webp); background-size: cover; background-position: center; image-rendering: pixelated; }
  .quest-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 28px; align-items: start; }
  .qmap { position: relative; border: 2px solid var(--white); box-shadow: 8px 8px 0 var(--orange); }
  .qmap > img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
  .qpin { position: absolute; transform: translate(-50%, -90%); width: 44px; height: 44px; padding: 0; background: transparent; border: 0; cursor: pointer; }
  .qpin img { width: 40px; height: 40px; image-rendering: pixelated; animation: hop 1.6s steps(2, jump-none) infinite; filter: drop-shadow(2px 2px 0 var(--black)); }
  .qpin.seen img { animation: none; opacity: 0.7; }
  .qpin.active img { transform: scale(1.25); }
  .qpin:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
  .qcard { background: var(--black-2); border: 1px solid var(--line-dark); padding: 16px; display: grid; gap: 10px; }
  .qcard img { width: 100%; height: auto; image-rendering: pixelated; border: 2px solid var(--black); }
  .qcard h3 { font-family: var(--f-pixel); font-weight: 700; font-size: 1.6rem; line-height: 1.05; }
  .qcard .kec { font-family: var(--f-mono); font-size: 0.75rem; color: var(--orange); text-transform: uppercase; letter-spacing: 0.08em; }
  .qcard p { color: var(--white-2); font-size: 0.95rem; }
  .qcard .qcta { font-family: var(--f-mono); font-size: 0.8rem; color: var(--orange); }
  .qprog { display: flex; gap: 6px; align-items: center; font-family: var(--f-mono); font-size: 0.75rem; color: var(--grey-light); }
  .qprog i { width: 18px; height: 8px; background: var(--line-dark); }
  .qprog i.on { background: var(--orange); }

  /* Formulir (aduan, buku tamu, karakter) */
  .xform { display: grid; gap: 12px; }
  .xform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .xform label, .xform legend { font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #55544E; display: block; margin-bottom: 4px; }
  .xform input:not([type=radio]):not([type=checkbox]), .xform select, .xform textarea { width: 100%; font: inherit; font-size: 0.95rem; padding: 11px 12px; border: 2px solid var(--black); border-radius: 0; background: var(--white); color: var(--black); }
  .xform input:focus, .xform select:focus, .xform textarea:focus { outline: none; border-color: var(--orange); }
  .xform .count { display: block; text-align: right; font-family: var(--f-mono); font-size: 0.7rem; color: #6B6A63; margin-top: 4px; }
  .xform .check { display: flex; gap: 10px; align-items: flex-start; font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--black); }
  .xform .check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange); }
  .xform .btn { justify-self: start; border: 2px solid var(--black); cursor: pointer; }
  .xform .msg { font-weight: 600; min-height: 1.4em; }
  .xform .msg.ok { color: #1F7A3A; }
  .xform .msg.err { color: #B3261E; }
  .xform .hp { position: absolute; left: -9999px; }
  .dark-form label, .dark-form legend { color: var(--grey-light); }
  .dark-form .msg.ok { color: #7CE08A; }
  .dark-form .msg.err { color: #FF8A80; }
  .aduan-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: 32px; align-items: start; }
  .aduan-info { background: var(--black); color: var(--white); padding: 20px; box-shadow: 8px 8px 0 var(--orange); display: grid; gap: 10px; }
  .aduan-info h3 { font-family: var(--f-pixel); font-size: 1.3rem; }
  .aduan-info ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--white-2); font-size: 0.92rem; }
  .emergency { font-family: var(--f-mono); font-size: 0.8rem; color: var(--orange); }
  .ticket { display: inline-block; font-family: var(--f-digits); font-size: 0.8rem; background: var(--black); color: var(--orange); padding: 6px 10px; margin-left: 4px; }

  /* Pilih avatar */
  .ava-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .ava-pick legend { width: 100%; }
  .ava-opt { position: relative; cursor: pointer; }
  .ava-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .ava-opt img { display: block; width: 52px; height: 52px; image-rendering: pixelated; border: 2px solid var(--line-dark); background: var(--black-2); }
  .ava-opt input:checked + img { border-color: var(--orange); box-shadow: 3px 3px 0 var(--orange); transform: translateY(-2px); }
  .ava-opt input:focus-visible + img { outline: 2px solid var(--white); outline-offset: 2px; }

  /* Buku tamu */
  .guest-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .gwall { display: grid; gap: 12px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
  .gnote { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; background: var(--black-2); border: 1px solid var(--line-dark); padding: 12px; }
  .gnote img { width: 48px; height: 48px; image-rendering: pixelated; }
  .gnote b { font-family: var(--f-pixel); font-size: 1.05rem; }
  .gnote .from { font-family: var(--f-mono); font-size: 0.72rem; color: var(--grey); }
  .gnote p { color: var(--white-2); font-size: 0.93rem; margin-top: 4px; }
  .gempty { color: var(--grey-light); font-family: var(--f-mono); font-size: 0.85rem; }

  /* Jendela buat karakter */
  .onboard { padding: 0; border: 3px solid var(--white); background: var(--black); color: var(--white); width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 10px 10px 0 var(--orange); }
  .onboard::backdrop { background: rgba(11, 11, 10, 0.85); }
  .ob-form { padding: clamp(18px, 4vw, 28px); }
  .ob-form label, .ob-form legend { color: var(--grey-light); }
  .ob-eb { font-family: var(--f-digits); font-size: 0.7rem; color: var(--orange); animation: blink 1s steps(2, jump-none) infinite; }
  .ob-form h2 { font-family: var(--f-pixel); font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1; }
  .ob-sub { color: var(--grey-light); font-size: 0.93rem; }
  .ob-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .ob-skip { background: none; border: 0; color: var(--grey-light); font-family: var(--f-mono); font-size: 0.85rem; text-decoration: underline; cursor: pointer; padding: 10px 4px; }
  .player { display: flex; align-items: center; gap: 6px; background: var(--black-2); border: 1.5px solid var(--line-dark); color: var(--white); padding: 3px 8px 3px 3px; cursor: pointer; font-family: var(--f-mono); font-size: 0.75rem; min-height: 36px; max-width: 150px; }
  .player img { width: 28px; height: 28px; image-rendering: pixelated; }
  .player span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Slideshow bab */
  .chapters-on .edge { display: none; }
  .bab-menu-wrap { background: var(--black); padding-block: 28px 8px; }
  .bab-menu-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 14px; }
  .bab-menu-head h2 { font-family: var(--f-pixel); font-size: clamp(1.4rem, 3.4vw, 2rem); }
  .bab-menu { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .bab-card { flex: 0 0 148px; scroll-snap-align: start; display: grid; gap: 4px; justify-items: start; text-align: left; background: var(--black-2); border: 2px solid var(--line-dark); color: var(--white); padding: 10px; cursor: pointer; font: inherit; position: relative; }
  .bab-card img { width: 48px; height: 48px; image-rendering: pixelated; }
  .bab-card .bn { font-family: var(--f-digits); font-size: 0.55rem; color: var(--grey); }
  .bab-card .bt { font-family: var(--f-pixel); font-weight: 700; font-size: 1rem; line-height: 1.1; }
  .bab-card.on { border-color: var(--orange); box-shadow: 4px 4px 0 var(--orange); }
  .bab-card.seen::after { content: "✓"; position: absolute; top: 6px; right: 8px; color: var(--orange); font-size: 0.8rem; }
  .bab-bar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 15; background: var(--black); border-block: 1px solid var(--line-dark); }
  .bab-bar .wrap { display: flex; align-items: center; gap: 10px; padding-block: 8px; }
  .bab-bar .bl { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: 0.78rem; color: var(--grey-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bab-bar .bl b { color: var(--orange); font-family: var(--f-digits); font-size: 0.6rem; margin-right: 6px; }
  .bab-bar button, .bab-next { font-family: var(--f-pixel); font-weight: 700; background: transparent; color: var(--white); border: 2px solid var(--white); padding: 6px 12px; cursor: pointer; min-height: 38px; }
  .bab-bar button:hover { border-color: var(--orange); color: var(--orange); }
  .bab-dots { display: flex; gap: 4px; }
  .bab-dots i { width: 8px; height: 8px; background: var(--line-dark); }
  .bab-dots i.on { background: var(--orange); }
  .bab-foot { background: var(--black); padding-block: 22px; border-top: 1px solid var(--line-dark); }
  .bab-foot .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .bab-next.primary { background: var(--orange); color: var(--black); border-color: var(--orange); box-shadow: 4px 4px 0 var(--white); }
  .chapter.enter-next { animation: slideInR 0.32s steps(6); }
  .chapter.enter-prev { animation: slideInL 0.32s steps(6); }
  @keyframes slideInR { from { transform: translateX(40px); opacity: 0.3; } to { transform: none; opacity: 1; } }
  @keyframes slideInL { from { transform: translateX(-40px); opacity: 0.3; } to { transform: none; opacity: 1; } }
  @media (max-width: 1020px) { .quest-grid, .aduan-grid, .guest-grid { grid-template-columns: 1fr; } }
  @media (max-width: 640px) { .xform .two { grid-template-columns: 1fr; } .bab-dots { display: none; } .player span { display: none; } .bab-bar { top: calc(env(safe-area-inset-top, 0px) + 96px); } }

  /* ===== Mode game: tanpa scroll halaman ===== */
  html.game, html.game body { height: 100%; overflow: hidden; }
  html.game main, html.game footer, html.game .ticker, html.game .panorama { display: none !important; }
  html.game .nav ul { display: none; }
  .nav-menu { display: none; }
  html.game .nav-menu { display: inline-block; font-family: var(--f-pixel); font-weight: 700; font-size: 1rem; background: transparent; color: var(--white); border: 2px solid var(--white); min-height: 36px; min-width: 44px; cursor: pointer; margin-left: auto; }
  html.game .nav .wrap { flex-wrap: nowrap; }
  html.game .music { margin-left: 0; }
  /* Layar judul */
  html.game .hero { height: calc(100dvh - 58px); overflow: hidden; }
  html.game .hero .wrap { height: 100%; padding-block: clamp(12px, 3vh, 36px); align-items: center; }
  html.game .isl-float img { width: min(100%, 54dvh); }
  html.game .stage-hint { display: none; }
  html.game #scene { aspect-ratio: auto; }
  /* Desktop: kotak Jiji di kolom kiri (dipindah oleh jiji.js), pulau besar di kanan; semua muat satu layar */
  @media (min-width: 1021px) {
    html.game .hero { height: calc(100dvh - 66px); }
    html.game .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
    html.game .hero-copy { gap: clamp(8px, 1.6dvh, 18px); }
    html.game .hero h1 { font-size: clamp(2.4rem, 8dvh, 5.6rem); }
    html.game .hero .chips, html.game .hero .actions { display: none; }
    html.game .hero-copy .dialog { margin: 4px 0 0; max-width: none; }
    html.game .hero-copy .twin { margin: 2px 0 0; max-width: none; gap: 6px; }
    html.game .hero-copy .tw-note { text-align: left; }
    html.game .isl-float img { width: min(100%, 58dvh); }
    html.game .g-start { margin-top: 14px; }
  }
  @media (min-width: 1021px) and (max-height: 820px) {
    html.game .hero .sub { display: none; }
    html.game .isl-float img { width: min(100%, 50dvh); }
  }
  .g-start { display: none; }
  html.game .g-start { display: block; margin: 14px auto 0; font-family: var(--f-pixel); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.35rem); background: var(--orange); color: var(--black); border: 3px solid var(--black); box-shadow: 6px 6px 0 var(--white); padding: 14px 26px; cursor: pointer; animation: pulse 1.4s steps(2, jump-none) infinite; }
  @keyframes pulse { 50% { box-shadow: 6px 6px 0 var(--orange), 0 0 0 4px var(--white); } }
  /* Main menu */
  .gmenu { position: fixed; inset: 0; z-index: 18; padding: 70px 16px 16px; overflow-y: auto; background: linear-gradient(rgba(11, 11, 10, 0.72), rgba(11, 11, 10, 0.92)), url(px/bg-hero.webp) center / cover; image-rendering: pixelated; display: grid; place-items: center; }
  :root[data-phase="pagi"] .gmenu, :root[data-phase="siang"] .gmenu { background-image: linear-gradient(rgba(11, 11, 10, 0.6), rgba(11, 11, 10, 0.88)), url(px/bg-hero-day.webp); }
  :root[data-phase="sore"] .gmenu { background-image: linear-gradient(rgba(11, 11, 10, 0.55), rgba(11, 11, 10, 0.88)), url(px/bg-hero-dusk.webp); }
  .gmenu[hidden] { display: none; }
  .gm-inner { width: min(1100px, 100%); display: grid; gap: 18px; }
  .gm-eb { font-family: var(--f-digits); font-size: 0.7rem; color: var(--orange); animation: blink 1.2s steps(2, jump-none) infinite; }
  .gm-head h2 { font-size: clamp(1.8rem, 4.4vw, 3rem); line-height: 1; }
  .gm-sub { color: var(--grey-light); font-family: var(--f-mono); font-size: 0.85rem; margin-top: 6px; }
  .gm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .gm-tile { position: relative; display: grid; gap: 4px; justify-items: start; align-content: start; text-align: left; font: inherit; color: var(--white); background: rgba(22, 22, 20, 0.92); border: 2px solid var(--line-dark); padding: 14px; cursor: pointer; min-height: 132px; transition: transform .12s; }
  .gm-tile img { width: 56px; height: 56px; image-rendering: pixelated; }
  .gm-tile .bn { font-family: var(--f-digits); font-size: 0.55rem; color: var(--grey); }
  .gm-tile .bt { font-family: var(--f-pixel); font-weight: 700; font-size: 1.1rem; line-height: 1.1; }
  .gm-tile:hover, .gm-tile:focus-visible { border-color: var(--orange); box-shadow: 5px 5px 0 var(--orange); transform: translate(-2px, -2px); outline: none; }
  .gm-tile.seen::after { content: "✓"; position: absolute; top: 8px; right: 10px; color: var(--orange); }
  .gm-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 0.75rem; color: var(--grey); }
  .gm-foot button { background: none; border: 0; color: var(--grey-light); font: inherit; text-decoration: underline; cursor: pointer; padding: 8px 0; }
  /* Layar bab: scroll hanya di dalam bab */
  .gchap { position: fixed; inset: 0; z-index: 18; padding-top: 58px; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--black); }
  .gchap[hidden] { display: none; }
  .gc-bar { display: flex; align-items: center; gap: 8px; padding: 8px clamp(10px, 3vw, 24px); background: var(--black); border-bottom: 1px solid var(--line-dark); }
  .gc-bar button, .gc-end button { font-family: var(--f-pixel); font-weight: 700; background: transparent; color: var(--white); border: 2px solid var(--white); padding: 6px 12px; min-height: 40px; min-width: 44px; cursor: pointer; }
  .gc-bar button:disabled { opacity: 0.3; cursor: default; }
  .gc-menu { color: var(--orange) !important; border-color: var(--orange) !important; }
  .gc-title { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gc-title b { font-family: var(--f-digits); font-size: 0.6rem; color: var(--orange); margin-right: 8px; }
  .gc-stage { overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
  .gc-end { background: var(--black); border-top: 1px solid var(--line-dark); padding-block: 22px 28px; }
  .gc-end .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .gc-end .gc-nextch { background: var(--orange); color: var(--black); border-color: var(--orange); box-shadow: 4px 4px 0 var(--white); }
  .gchap .stats { border-top: 1px solid var(--line-dark); margin-top: 36px; }
  /* Tentang & kredit */
  .about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; }
  .about-card { background: var(--black-2); border: 1px solid var(--line-dark); padding: 18px; display: grid; gap: 8px; align-content: start; }
  .about-card h3 { font-family: var(--f-pixel); font-size: 1.3rem; color: var(--orange); }
  .about-card p, .about-card li { color: var(--white-2); font-size: 0.92rem; }
  .about-card ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
  .about-card a { color: var(--orange); }
  html.game .wa-float { bottom: 16px; }
  html.game[data-screen="chapter"] .wa-float, html.game[data-screen="menu"] .wa-float { display: none; }
  @media (max-width: 640px) {
    html.game .music { font-size: 0; min-width: 40px; padding: 4px 8px; }
    html.game .music::before { content: "♪"; font-size: 1.1rem; }
    html.game .nav .wrap { gap: 8px; }
  }
  html.game .toasts { bottom: auto; top: 118px; }
  @media (max-width: 1020px) {
    .gm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html.game .hero .wrap { grid-template-columns: 1fr; align-content: center; gap: 10px; }
  }
  /* HP & tablet: layar judul boleh lebih tinggi dari layar agar kotak Jiji tidak bertumpuk */
  @media (max-width: 1020px) {
    html.game .hero { height: auto; min-height: calc(100dvh - 58px); }
    html.game .hero .wrap { height: auto; min-height: calc(100dvh - 58px); padding-bottom: 28px; }
    html.game[data-screen="title"], html.game[data-screen="title"] body { height: auto; overflow-x: hidden; overflow-y: auto; }
  }
  @media (max-width: 640px) {
    html.game .tw-sugs .tw-sug:nth-child(n+3) { display: none; }
  }
  @media (max-width: 640px) and (max-height: 760px) {
    html.game .hero-copy .eyebrow { display: none; }
    html.game .tw-note { font-size: 0.64rem; }
    html.game .hero .wrap { gap: 6px; padding-top: 10px; }
    html.game .g-start { margin-top: 8px; padding: 10px 22px; }
  }
  @media (max-width: 640px) and (max-height: 760px) {
    html.game .isl-float img { width: min(64vw, 20dvh); }
    html.game .hero h1 { font-size: clamp(1.8rem, 9vw, 2.4rem); }
    html.game .twin { margin-top: 8px; gap: 6px; }
  }
  @media (max-width: 640px) {
    .gm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .gm-tile { min-height: 112px; padding: 10px; } .gm-tile img { width: 40px; height: 40px; } .gm-tile .bt { font-size: 0.92rem; }
    .gmenu { padding-top: 64px; }
    html.game .hero .sub, html.game .hero .chips, html.game .hero .actions, html.game .hero .roles, html.game .wx { display: none; }
    html.game .hero h1 { font-size: clamp(2rem, 11vw, 2.8rem); }
    html.game .hero-copy { gap: 8px; }
    html.game .isl-float img { width: min(76vw, 30dvh); }
    html.game .dialog { margin-top: 0; }
    .gc-title { font-size: 0.75rem; }
  }
  @media (prefers-reduced-motion: reduce) { html.game .g-start, .gm-eb { animation: none; } .gc-stage { scroll-behavior: auto; } }

  /* Tombol WA melayang */
  .wa-float {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--orange);
    color: var(--black);
    text-decoration: none;
    padding: 10px 14px 10px 10px;
    border: 2px solid var(--black);
    box-shadow: 4px 4px 0 var(--white);
    font-family: var(--f-pixel);
    font-weight: 700;
  }
  .wa-float canvas { width: 28px; height: 28px; }
  .wa-float:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--white); }

  @media (min-width: 641px) { .level.next { grid-column: span 2; } }
  @media (max-width: 1020px) {
    .guide { position: static; margin-top: -8px; }
    .guide img { width: 96px; height: 96px; }
    .kitab-grid { grid-template-columns: 1fr; gap: 40px; }
    .events { grid-template-columns: 1fr; }
    .press { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero .wrap { grid-template-columns: 1fr; }
    #scene { aspect-ratio: 1 / 0.75; }
    .stats .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat:nth-child(4) { border-left: 0; padding-left: 0; }
    .stat:nth-child(n+4) { border-top: 1px solid var(--line-dark); }
    .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .idea:nth-child(3) { padding-left: 0; border-left: 0; }
    .features { grid-template-columns: 1fr; }
    .sec-head { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .nav ul { margin-left: 0; order: 3; width: 100%; gap: 4px 16px; }
    .music { margin-left: auto; }
    .pano-hero { width: 64px; height: 64px; }
    .laws { grid-template-columns: 1fr; }
    .qz-opts { grid-template-columns: 1fr; }
    .ev-body { padding-right: 0; padding-top: 18px; }
    #scene { aspect-ratio: 1 / 0.95; }
    .stats .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat { padding-inline: 14px 0; }
    .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
    .stat:nth-child(4) { border-left: 1px solid var(--line-dark); padding-left: 14px; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
    .levels { grid-template-columns: 1fr; }
    .ideas { grid-template-columns: 1fr; }
    .idea + .idea { padding-left: 0; border-left: 0; }
    .essays { grid-template-columns: 1fr; }
    .essays a { grid-template-columns: 1fr; gap: 2px; }
    .invite .grid { grid-template-columns: 1fr; }
    .press { grid-template-columns: 1fr; }
    .wa-form .two { grid-template-columns: 1fr; }
    .wa-float span { display: none; }
    .wa-float { padding: 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
    .ticker .track { animation: none; }
    .music[aria-pressed="false"], .live-dot, .guide img, .caret, .pop, .toast, .toast.out, .isl-float, .isl-shadow, .cloud, .dragon, .dragon-path, .d-next, .qpin img, .ob-eb, .chapter.enter-next, .chapter.enter-prev { animation: none; }
  }