/* JOKER ZH — site styles (tokens from the JOKER ZH identity) */
:root {
  --surface: #FFF8F0; --surface-raised: #FFFFFF; --line: #EADFD2;
  --ink: #14122B; --ink-muted: #5F5A73; --night: #14122B;
  --joker: #E5243B; --joker-ink: #C01530; --joker-press: #A3122A; --joker-soft: #FFE3E6; --on-joker: #FFFFFF;
  --gold: #FFB800; --gold-press: #C78F00; --gold-soft: #FFF1CC; --gold-ink: #8A5A00; --on-gold: #14122B;
  --mint: #0A7350; --mint-soft: #DDF7EC; --on-mint: #FFFFFF;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 9999px;
  --shadow-card: 0 1px 0 #14122B0F, 0 8px 20px -8px #14122B33;
  --shadow-card-hover: 0 2px 0 #14122B14, 0 16px 32px -10px #14122B47;
  --focus-ring: 0 0 0 2px #FFF8F0, 0 0 0 4px #14122B;
  --font-display: "Lalezar", "Cairo", system-ui, sans-serif;
  --font-sans: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
  --page: 1200px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #100E22; --surface-raised: #1C1A36; --line: #2E2B4D;
    --ink: #F5F2FF; --ink-muted: #A9A4C2; --night: #3A3578;
    --joker: #FF5C70; --joker-ink: #FF7A8A; --joker-press: #B0213A; --joker-soft: #3A1220; --on-joker: #14122B;
    --gold: #FFC53D; --gold-press: #C99A2E; --gold-soft: #3A2A05; --gold-ink: #FFC53D;
    --mint: #3DDC97; --mint-soft: #0B2E22; --on-mint: #0B2E22;
    --shadow-card: 0 8px 20px -8px #000000B3; --shadow-card-hover: 0 16px 32px -10px #000000CC;
    --focus-ring: 0 0 0 2px #100E22, 0 0 0 4px #FFC53D;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 28px; background: var(--surface); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: var(--joker-ink); }
a:focus-visible, button:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--space-6); }
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; inset-inline-start: var(--space-4); top: var(--space-4); z-index: 10; background: var(--surface-raised); padding: var(--space-2) var(--space-4); }

/* Header */
.site-header { background: #14122B; color: #FFFFFF; position: sticky; top: 0; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 68px; }
.brand img { height: 40px; width: auto; }
.top-nav { display: flex; gap: var(--space-2); }
.top-nav a { color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 15px; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
.top-nav a:hover, .top-nav a[aria-current="page"] { background: #FFFFFF1F; }
.chips { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-4) 0; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-full); border: 1.5px solid var(--line); background: var(--surface-raised); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.chip:hover { border-color: var(--ink-muted); }
.chip[aria-current="page"] { background: var(--night); border-color: var(--night); color: #FFFFFF; }

/* Buttons */
.btn { font-family: inherit; font-weight: 700; font-size: 16px; line-height: 24px; border: 0; border-radius: var(--radius-md); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-6); text-decoration: none; transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
.btn-lg { height: 56px; padding: 0 var(--space-8); font-size: 18px; }
.btn-primary { background: var(--joker); color: var(--on-joker); box-shadow: 0 4px 0 var(--joker-press); margin-bottom: 4px; }
.btn-gold { background: var(--gold); color: var(--on-gold); box-shadow: 0 4px 0 var(--gold-press); margin-bottom: 4px; }
.btn-quiet { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-primary:active, .btn-gold:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }

/* Hero */
.hero { padding: var(--space-8) 0 var(--space-6); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; }
.hero h1 { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 60px; margin: 0 0 var(--space-3); }
.hero p { margin: 0 0 var(--space-6); color: var(--ink-muted); font-size: 18px; line-height: 32px; max-width: 34em; }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-art { position: relative; aspect-ratio: 5 / 4; }
.hero-art .card-a, .hero-art .card-b { position: absolute; width: 46%; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); }
.hero-art .card-b { background: var(--gold); inset-inline-end: 22%; top: 4%; transform: rotate(12deg); }
.hero-art .card-a { background: var(--joker); inset-inline-end: 38%; top: 16%; transform: rotate(-10deg); display: flex; align-items: center; justify-content: center; }
.hero-art .card-a img { width: 62%; }
.hero-art .slab { position: absolute; inset: 10% 0 0 30%; background: var(--night); border-radius: var(--radius-lg); }
.hero-art .dots { position: absolute; inset-inline-start: 6%; top: 18%; display: grid; grid-template-columns: repeat(5, 12px); gap: 12px; }
.hero-art .dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); }

/* Sections */
.section { padding: var(--space-6) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.section-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 40px; margin: 0; }
.section-head a { font-weight: 700; text-decoration: none; }

/* Game cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.card { display: flex; flex-direction: column; background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; color: inherit; text-decoration: none; transition: transform 140ms ease-out, box-shadow 140ms ease-out; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.card-thumb { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-thumb svg { width: 100%; height: 100%; display: block; }
.card-glyph { font-family: var(--font-display); font-size: 72px; line-height: 1; }
.tone-joker { background: var(--joker); color: var(--on-joker); }
.tone-gold { background: var(--gold); color: var(--on-gold); }
.tone-mint { background: var(--mint); color: var(--on-mint); }
.tone-night { background: #14122B; color: #FFFFFF; }
.card-badge { position: absolute; top: var(--space-3); inset-inline-start: var(--space-3); }
.badge { display: inline-flex; align-items: center; font-size: 13px; line-height: 20px; font-weight: 700; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--line); color: var(--ink); box-shadow: 0 0 0 2px var(--surface-raised); }
.badge-new { background: var(--mint); color: var(--on-mint); }
.badge-hot { background: var(--gold); color: var(--on-gold); }
.badge-soon { background: var(--surface-raised); color: var(--ink); }
.card-body { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4) var(--space-4); }
.card-title { font-family: var(--font-display); font-size: 20px; line-height: 28px; }
.card-meta { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.card.is-soon { opacity: .72; }

/* Category tiles */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-3); }
.cat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); border-top: 6px solid var(--joker); }
.cat strong { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 30px; }
.cat span { font-size: 13px; color: var(--ink-muted); font-weight: 600; }
.cat:nth-child(4n+2) { border-top-color: var(--gold); }
.cat:nth-child(4n+3) { border-top-color: var(--mint); }
.cat:nth-child(4n+4) { border-top-color: var(--night); }

/* Prose */
.prose { max-width: 760px; }
.prose h1 { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 52px; margin: var(--space-6) 0 var(--space-3); }
.prose h2 { font-size: 22px; line-height: 34px; font-weight: 700; margin: var(--space-8) 0 var(--space-2); }
.prose h3 { font-size: 18px; line-height: 30px; font-weight: 700; margin: var(--space-6) 0 var(--space-1); }
.prose p, .prose li { color: var(--ink); }
.prose .lead { font-size: 18px; line-height: 32px; color: var(--ink-muted); }
.about-box { background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); }
.crumbs { font-size: 14px; color: var(--ink-muted); padding-top: var(--space-4); }
.crumbs a { color: var(--ink-muted); }

/* Game page */
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); padding: var(--space-4) 0 var(--space-6); align-items: start; }
.game-stage { background: #14122B; border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.game-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.game-title-row h1 { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 48px; margin: 0; }
.game-side { display: flex; flex-direction: column; gap: var(--space-4); }
.side-box { background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); }
.side-box h2 { font-size: 16px; line-height: 24px; margin: 0 0 var(--space-2); }
.side-box ul { margin: 0; padding-inline-start: var(--space-6); font-size: 15px; line-height: 26px; }
.kbd { display: inline-block; min-width: 26px; text-align: center; font-size: 13px; line-height: 22px; padding: 0 6px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; }

/* Footer */
.site-footer { margin-top: var(--space-8); background: #14122B; color: #CFCBE4; padding: var(--space-8) 0 var(--space-6); font-size: 15px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); }
.site-footer img { height: 36px; width: auto; margin-bottom: var(--space-3); }
.site-footer h2 { color: #FFFFFF; font-size: 15px; line-height: 24px; margin: 0 0 var(--space-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #CFCBE4; text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.site-footer .copy { grid-column: 1 / -1; border-top: 1px solid #2E2B4D; padding-top: var(--space-4); font-size: 13px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: var(--space-6); }
  .hero-art { display: none; }
  .hero h1 { font-size: 36px; line-height: 48px; }
  .game-layout { grid-template-columns: minmax(0, 1fr); }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .site-footer .wrap > div:first-child { grid-column: 1 / -1; }
  .top-nav { display: none; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 var(--space-4); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .card-title { font-size: 17px; line-height: 24px; }
  .prose h1 { font-size: 32px; line-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .btn, .card { transition: none; } }

/* Traffic Rush */
.tr-hud { display: flex; gap: var(--space-4); color: #FFFFFF; font-weight: 700; font-size: 15px; }
.tr-hud span b { color: var(--gold); font-size: 18px; }
.tr-box { position: relative; width: min(100%, 380px); }
.tr-box canvas { width: 100%; aspect-ratio: 360 / 560; display: block; border-radius: var(--radius-md); touch-action: manipulation; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-6); background: #14122BD9; border-radius: var(--radius-md); color: #FFFFFF; }
.overlay[hidden] { display: none; }
.overlay h2 { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 44px; margin: 0; }
.overlay p { margin: 0; color: #CFCBE4; }
.tr-pad { display: flex; gap: var(--space-4); }
.tr-pad .btn { width: 120px; }

/* Kalimat Sir */
.w-board { display: grid; gap: 8px; direction: rtl; margin: 0 auto; }
.w-row { display: grid; grid-template-columns: repeat(5, 56px); gap: 8px; }
.w-tile { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 2px solid #3A3578; color: #FFFFFF; font-family: var(--font-display); font-size: 30px; transition: background-color 200ms ease-out; }
.w-tile.filled { border-color: #A9A4C2; }
.w-tile.correct { background: #0A7350; border-color: #0A7350; }
.w-tile.present { background: #FFB800; border-color: #FFB800; color: #14122B; }
.w-tile.absent { background: #2E2B4D; border-color: #2E2B4D; color: #A9A4C2; }
.w-row.shake { animation: shake 300ms; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.w-msg { min-height: 28px; color: #FFFFFF; font-weight: 700; text-align: center; }
.kb { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 560px; direction: rtl; }
.kb-row { display: flex; gap: 5px; justify-content: center; }
.kb-key { flex: 1 1 0; min-width: 0; padding: 0; height: 48px; border: 0; border-radius: var(--radius-sm); background: #3A3578; color: #FFFFFF; font-family: var(--font-sans); font-size: 18px; font-weight: 700; cursor: pointer; }
.kb-key.kb-wide { flex: 1.6 1 0; font-size: 14px; }
.kb-key.correct { background: #0A7350; }
.kb-key.present { background: #FFB800; color: #14122B; }
.kb-key.absent { background: #1C1A36; color: #6F6A8A; }
@media (max-width: 420px) { .w-row { grid-template-columns: repeat(5, 48px); } .w-tile { width: 48px; height: 48px; font-size: 26px; } .kb-key { height: 44px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .w-row.shake { animation: none; } .w-tile { transition: none; } }

/* Parking Master */
.pm-hud { display: flex; gap: var(--space-4); color: #FFFFFF; font-weight: 700; font-size: 15px; flex-wrap: wrap; justify-content: center; }
.pm-hud b { color: var(--gold); font-size: 18px; }
.pm-hud .stars { color: #FFB800; letter-spacing: 2px; }
.overlay .ov-stars { font-size: 34px; letter-spacing: 6px; color: #FFB800; margin: 0; }
.ov-stars[hidden], .btn[hidden] { display: none; }
.pm-pad { display: grid; grid-template-columns: repeat(2, 72px) 1fr repeat(2, 72px); gap: var(--space-2); width: min(100%, 380px); direction: ltr; user-select: none; -webkit-user-select: none; }
.pm-pad button { height: 64px; border: 0; border-radius: var(--radius-md); font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.pm-pad .steer { background: #3A3578; color: #FFFFFF; box-shadow: 0 4px 0 #1C1A36; }
.pm-pad .gas { background: var(--mint); color: var(--on-mint); box-shadow: 0 4px 0 #064D36; }
.pm-pad .rev { background: var(--joker); color: var(--on-joker); box-shadow: 0 4px 0 var(--joker-press); }
.pm-pad button.is-down { transform: translateY(4px); box-shadow: none; }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.lvl { display: flex; flex-direction: column; align-items: center; gap: 0; padding: var(--space-2); border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer; }
.lvl span { font-family: var(--font-display); font-size: 22px; line-height: 28px; }
.lvl small { font-size: 12px; color: var(--gold-ink); font-weight: 700; }
.lvl[aria-current="true"] { border-color: var(--joker); box-shadow: inset 0 0 0 1.5px var(--joker); }
.lvl:disabled { opacity: .5; cursor: not-allowed; }
.lvl:disabled small { color: var(--ink-muted); }

/* Build House */
.bh-act { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: min(100%, 380px); }
.bh-act .btn { width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.bh-hint { color: #CFCBE4; font-size: 14px; line-height: 22px; text-align: center; margin: 0; min-height: 44px; }
.bh-opts { display: flex; flex-direction: column; gap: var(--space-2); width: min(100%, 380px); background: #1C1A36; border-radius: var(--radius-md); padding: var(--space-3); }
.bh-opts[hidden] { display: none; }
.bh-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bh-row > span { color: #FFFFFF; font-weight: 700; font-size: 14px; min-width: 64px; }
.sw { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #3A3578; cursor: pointer; padding: 0; }
.sw[aria-pressed="true"] { border-color: #FFB800; box-shadow: 0 0 0 2px #14122B; }
.tg { height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-full); border: 2px solid #3A3578; background: transparent; color: #FFFFFF; font-family: inherit; font-weight: 700; cursor: pointer; }
.tg[aria-pressed="true"] { background: #0A7350; border-color: #0A7350; }