/* ───────── APPLE-FEEL THEME (trial) ─────────
   Layered on top of style.css + motion.css; applied only when the page is built with --apple (body.ap).
   Principles: restraint, one big idea per screen, frosted glass, generous space, soft rounded surfaces, spring motion.
   The brand stays: noir black + gold, Cormorant italic for the name and the headlines of reviews.

   Tokens
   type    : hero clamp(52–112px) · title 32 · tile 22 · body 17 · ui 15 · caption 13
   space   : 8 · 16 · 24 · 32 · 48 · 72 · 96
   radius  : 12 inputs · 20 tiles · 28 feature · 980 pills
   motion  : spring cubic-bezier(.32,.72,0,1) · 200 / 400 / 800 ms
   colour  : black #000 · surface #111113 / #1c1c1e · text #f5f5f7 · secondary #a1a1a6 · tertiary #86868b (4.5:1+) · gold #d8a24a */

body.ap {
  --bg: #000;
  --bg2: #111113;
  --bg3: #1c1c1e;
  --ink: #f5f5f7;
  --muted: #a1a1a6;
  --dim: #86868b;
  --line: rgba(255, 255, 255, .1);
  --accent: #dba84e;
  --good: #8ccf95;
  --mixed: #c9b697;
  --avoid: #ff6b5e;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: var(--ui);
  --spring: cubic-bezier(.32, .72, 0, 1);
  --r-tile: 22px;
  --r-feature: 28px;
  --hair: 1px solid rgba(255, 255, 255, .08);
  --lift: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 32px -12px rgba(0, 0, 0, .7);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 18px;
}
/* no film grain, no cursor flashlight: calm black */
html body.ap::before, html body.ap::after { display: none; }
html body.ap .mo-ring, html body.ap .mo-dot { display: none; }
html body.ap .wrap { max-width: 1080px; }

/* ── small text: sentence case, no wide tracking, in the UI face ── */
html body.ap .eyebrow, html body.ap .meta, html body.ap .label, html body.ap .tier, html body.ap .byline,
html body.ap .hero .rules li, html body.ap .facts .label, html body.ap .more, html body.ap .tag, html body.ap .ribbon {
  font-family: var(--ui); text-transform: none; letter-spacing: .01em; font-size: 13px; font-weight: 500;
}
html body.ap .eyebrow { color: var(--accent); font-weight: 600; font-size: 14px; }
html body.ap .meta, html body.ap .byline { color: var(--muted); }
html body.ap .tier { font-weight: 600; font-size: 13px; }

/* ── header: frosted glass bar ── */
html body.ap .site-hdr {
  position: sticky; top: 0; z-index: 70;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html body.ap .site-hdr { background: rgba(0, 0, 0, .94); } }
html body.ap .site-hdr .wrap { height: 54px; }
html body.ap .brand svg { width: 26px; height: 26px; }
html body.ap .brand span { font-size: 22px; letter-spacing: 0; }
html body.ap nav.main { gap: 6px; }
html body.ap nav.main a {
  font-family: var(--ui); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400;
  color: var(--muted); padding: 7px 12px; border: 0; border-radius: 980px; transition: color .2s, background .3s var(--spring);
}
html body.ap nav.main a:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
html body.ap nav.main a[aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, .1); }
/* language switch as a segmented control */
html body.ap .langs { background: rgba(255, 255, 255, .08); border: 0; padding: 2px; border-radius: 980px; margin-left: 10px; }
html body.ap .langs button { font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: 0; border-radius: 980px; padding: 5px 11px; min-height: 26px; transition: background .3s var(--spring), color .2s; }
html body.ap .langs button[aria-pressed="true"] { background: var(--ink); color: #000; }
html body.ap .mo-progress { height: 2px; }
html body.ap nav.main a::after { display: none; }

/* ── hero ── */
html body.ap .hero { padding: 96px 0 72px; }
html body.ap .hero h1 { font-weight: 500; letter-spacing: -.02em; line-height: .94; }
html body.ap .hero p.lede { font-family: var(--ui); font-size: clamp(19px, 2.2vw, 24px); font-weight: 400; line-height: 1.4; letter-spacing: -.01em; color: var(--muted); max-width: 640px; }
html body.ap .hero .rules { gap: 8px 26px; margin-top: 30px; }
html body.ap .hero .rules li { color: var(--dim); font-size: 14px; }
html body.ap .mo-replay { font-family: var(--ui); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 11px 22px; min-height: 44px; border: 0; background: rgba(255, 255, 255, .1); color: var(--ink); border-radius: 980px; transition: background .3s var(--spring), transform .3s var(--spring); }
html body.ap .mo-replay:hover { background: rgba(255, 255, 255, .18); color: var(--ink); transform: scale(1.03); }

/* ── buttons, chips, inputs ── */
html body.ap .btn {
  font-family: var(--ui); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none;
  border-radius: 980px; padding: 11px 22px; min-height: 44px; border: 0; background: var(--accent); color: var(--accent-ink);
  transition: transform .3s var(--spring), background .2s, color .2s, box-shadow .3s;
}
html body.ap .btn:hover { background: #e6b862; color: var(--accent-ink); transform: scale(1.03); }
html body.ap .btn.ghost { background: rgba(255, 255, 255, .1); color: var(--ink); }
html body.ap .btn.ghost:hover { background: rgba(255, 255, 255, .18); color: var(--ink); }
html body.ap .btn:focus-visible, html body.ap a:focus-visible, html body.ap input:focus-visible, html body.ap select:focus-visible,
html body.ap textarea:focus-visible, html body.ap .chip:focus-visible, html body.ap button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

html body.ap .filters { gap: 10px; margin-bottom: 36px; }
html body.ap .filters input[type="search"], html body.ap .filters select, html body.ap .field input, html body.ap .field select, html body.ap .field textarea {
  background: rgba(255, 255, 255, .07); border: 1px solid transparent; border-radius: 12px; color: var(--ink);
  font-family: var(--ui); font-size: 16px; padding: 12px 16px; min-height: 44px; transition: background .2s, border-color .2s, box-shadow .3s;
}
html body.ap .filters input[type="search"]::placeholder { color: var(--dim); }
html body.ap .filters input[type="search"]:focus, html body.ap .filters select:focus { background: rgba(255, 255, 255, .1); border-color: rgba(219, 168, 78, .6); box-shadow: 0 0 0 4px rgba(219, 168, 78, .18); outline: none; }
html body.ap .filters select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23a1a1a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
html body.ap .chip {
  font-family: var(--ui); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  padding: 8px 15px; min-height: 36px; border: 0; border-radius: 980px; background: rgba(255, 255, 255, .08); color: var(--muted);
  transition: background .3s var(--spring), color .2s, transform .3s var(--spring);
}
html body.ap .chip:hover { color: var(--ink); background: rgba(255, 255, 255, .14); }
html body.ap .chip[aria-pressed="true"] { background: var(--ink); color: #000; }
html body.ap .chip.has { color: var(--ink); }
@media (pointer: coarse) { html body.ap .chip { min-height: 44px; } html body.ap .langs button { min-height: 32px; } }

/* ── section titles ── */
html body.ap .section-head { border: 0; margin-bottom: 26px; padding: 0; align-items: flex-end; }
html body.ap .section-head h2 { font-family: var(--ui); font-style: normal; font-weight: 600; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; line-height: 1.05; }
html body.ap .section-head .eyebrow { color: var(--dim); font-weight: 500; }

/* ── tiles: featured + cards ── */
html body.ap .featured {
  border: var(--hair); border-radius: var(--r-feature); background: var(--bg2); overflow: hidden; box-shadow: var(--lift);
  margin-bottom: 96px;
  transition: transform .6s var(--spring), box-shadow .6s var(--spring);
}
html body.ap .featured:hover { transform: scale(1.008); border-color: rgba(255, 255, 255, .14); box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .9); }
html body.ap .featured .art { min-height: 380px; }
html body.ap .featured .body { padding: 48px 44px; gap: 10px; }
html body.ap .featured h3 { font-family: var(--ui); font-weight: 600; letter-spacing: -.035em; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.02; }
html body.ap .featured .verdict, html body.ap .card .verdict { font-family: var(--ui); font-style: normal; color: var(--muted); font-size: 17px; line-height: 1.45; letter-spacing: -.005em; }
html body.ap .featured .verdict { font-size: 19px; }

html body.ap .grid { gap: 20px; margin-bottom: 110px; }
html body.ap .card {
  border: var(--hair); border-radius: var(--r-tile); background: var(--bg2); overflow: hidden; box-shadow: var(--lift);
  transition: transform .5s var(--spring), box-shadow .5s var(--spring), border-color .3s;
}
html body.ap .card:hover { transform: translateY(-6px) scale(1.012); border-color: rgba(255, 255, 255, .16); box-shadow: 0 28px 60px -24px rgba(0, 0, 0, .9); }
html body.ap .card .art { height: 200px; }
html body.ap .card .cbody { padding: 22px 24px 24px; gap: 4px; }
html body.ap .card h3 { font-family: var(--ui); font-weight: 600; font-size: 23px; letter-spacing: -.025em; line-height: 1.15; }
html body.ap .card .foot { border: 0; padding-top: 6px; gap: 10px; }
html body.ap .art::before { background: radial-gradient(circle at 30% 15%, rgba(219, 168, 78, .22), transparent 62%); }
html body.ap .art.has-img::before { background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .5)); }
html body.ap .art .initial { color: rgba(255, 255, 255, .1); font-weight: 500; }
html body.ap .seal { width: 40px; height: 40px; font-size: 19px; border-width: 1.5px; }
html body.ap .seal.big { width: 112px; height: 112px; font-size: 48px; box-shadow: 0 0 0 6px #000, 0 0 0 7px var(--c); }
html body.ap .card:hover .art, html body.ap .featured:hover .art { transform: scale(1.04); }
html body.ap .card::after, html body.ap .featured::after { display: none; }

/* ── a review ── */
html body.ap .post { padding: 72px 0 48px; }
html body.ap .post-head h1 { letter-spacing: -.02em; }
html body.ap .post-cover { border: var(--hair); border-radius: 24px; overflow: hidden; }
html body.ap .judgement { border: var(--hair); border-radius: 26px; background: var(--bg2); padding: 32px 36px; box-shadow: var(--lift); }
html body.ap .judgement .say { font-size: 25px; }
html body.ap .facts { border: 0; border-radius: 20px; overflow: hidden; gap: 1px; background: rgba(255, 255, 255, .08); }
html body.ap .facts > div { background: var(--bg2); padding: 20px 22px; }
html body.ap .facts .v, html body.ap .facts ul { font-size: 16px; }
html body.ap .bar { grid-template-columns: 120px 1fr 44px; }
html body.ap .bar .track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
html body.ap .bar .fill { border-radius: 6px; transition: width 1.2s var(--spring); }
html body.ap .bar .n { font-family: var(--ui); font-weight: 600; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
html body.ap .prose { font-size: 20px; }
html body.ap .prose h2 { font-family: var(--ui); font-style: normal; font-weight: 600; font-size: 28px; letter-spacing: -.025em; }
html body.ap .prose blockquote { border-left-color: var(--accent); }
html body.ap .stamp { transform: none; border: 0; background: rgba(255, 255, 255, .08); color: var(--c, var(--accent)); border-radius: 980px; padding: 12px 24px; font-family: var(--ui); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; opacity: 1; }
html body.ap .scorelink { font-family: var(--ui); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--accent); border: 0; margin-top: 14px; }
html body.ap .scorelink:hover { text-decoration: underline; }
html body.ap .pn { border-top: var(--hair); }
html body.ap .pn .t { font-family: var(--ui); font-weight: 600; letter-spacing: -.025em; font-size: 24px; }

/* ── pages: Top 3, corner, about, map ── */
html body.ap .pagehead { padding: 80px 0 40px; }
html body.ap .pagehead h1 { letter-spacing: -.02em; }
html body.ap .pagehead .lede { font-family: var(--ui); font-size: 21px; line-height: 1.4; letter-spacing: -.01em; }
html body.ap .catnav .chip { text-decoration: none; }
html body.ap .topgrid { gap: 20px; margin-bottom: 110px; }
html body.ap .topcat { border: var(--hair); border-radius: var(--r-tile); padding: 28px 30px 10px; box-shadow: var(--lift); }
html body.ap .topcat header { border-bottom: var(--hair); }
html body.ap .topcat h2 { font-family: var(--ui); font-style: normal; font-weight: 600; font-size: 24px; letter-spacing: -.025em; }
html body.ap .rank { border-bottom: var(--hair); }
html body.ap .rank .n { font-family: var(--ui); font-weight: 700; letter-spacing: -.04em; color: var(--dim); }
html body.ap .rank .rb b { font-family: var(--ui); font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
html body.ap .rank .rb p { font-style: normal; font-family: var(--ui); font-size: 15.5px; }
html body.ap .rank.r2 .n { color: #c7c7cc; } html body.ap .rank.r3 .n { color: #b08a5c; }
html body.ap .tickets { gap: 20px; }
html body.ap .ticket { border: var(--hair); border-radius: var(--r-tile); box-shadow: var(--lift); }
html body.ap .ticket::before, html body.ap .ticket::after { display: none; }
html body.ap .ticket .th { font-family: var(--ui); font-size: 13px; letter-spacing: 0; text-transform: none; border-bottom: var(--hair); }
html body.ap .ticket h2 { font-family: var(--ui); font-weight: 600; letter-spacing: -.025em; font-size: 28px; }
html body.ap .ticket .say { border-radius: 14px; border-left: 0; background: rgba(219, 168, 78, .1); }
html body.ap .about h1 { letter-spacing: -.02em; }
html body.ap .about h2 { font-family: var(--ui); font-style: normal; font-weight: 600; font-size: 28px; letter-spacing: -.025em; }
html body.ap .scale li { border: 0; border-radius: 18px; background: var(--bg2); padding: 16px 20px; }
html body.ap .mapgrid { border: var(--hair); border-radius: 26px; overflow: hidden; box-shadow: var(--lift); }
html body.ap .mappanel { border-left: var(--hair); }
html body.ap .mappanel h2 { font-family: var(--ui); font-style: normal; font-weight: 600; letter-spacing: -.03em; }
html body.ap .mini { border-top: var(--hair); }
html body.ap .mini b { font-family: var(--ui); font-weight: 600; letter-spacing: -.02em; font-size: 19px; }
html body.ap .mini small { font-family: var(--ui); text-transform: none; letter-spacing: 0; font-size: 13px; }
html body.ap .maplibregl-popup-content { border: var(--hair) !important; border-radius: 16px !important; background: rgba(28, 28, 30, .92) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
html body.ap .maplibregl-ctrl-group { border-radius: 12px !important; overflow: hidden; }

/* ── marquee, footer ── */
html body.ap .mo-marquee { border: 0; }
html body.ap .mo-marquee a { font-size: clamp(26px, 3vw, 44px); }
html body.ap .mo-marquee a b { font-family: var(--ui); font-weight: 600; }
html body.ap .site-ftr { border-top: var(--hair); padding: 36px 0 44px; }
html body.ap .site-ftr p { font-family: var(--ui); font-style: normal; font-size: 13px; color: var(--dim); }
html body.ap .site-ftr .legal { margin-top: 4px; }
html body.ap .site-ftr .links a { font-family: var(--ui); text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--muted); }
html body.ap .site-ftr .links a:hover { color: var(--ink); }

/* ── reveal motion: shorter travel, spring, no blur ── */
html.mo body.ap .mo-rev { transform: translateY(26px); filter: none; }
html.mo body.ap .mo-rev.mo-in { transform: none; transition: opacity .9s var(--spring) var(--d, 0s), transform 1s var(--spring) var(--d, 0s); }

@media (max-width: 900px) {
  html body.ap .featured .art { min-height: 240px; }
  html body.ap .featured .body { padding: 32px 26px; }
  html body.ap .hero { padding: 64px 0 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.ap * { transition: none !important; }
  html body.ap .card:hover, html body.ap .featured:hover { transform: none; }
}

/* ── readers: poll, battles, reactions ── */
html body.ap .choice .opt, html body.ap .rx { border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: var(--bg2); transition: transform .4s var(--spring), border-color .2s, background .3s; }
html body.ap .choice .opt .nm { font-family: var(--ui); font-weight: 600; letter-spacing: -.02em; font-size: 21px; }
html body.ap .choice.duel .vs { font-family: var(--ui); font-style: normal; font-weight: 600; font-size: 14px; color: var(--dim); }
html body.ap .battle { border: var(--hair); border-radius: var(--r-tile); background: var(--bg2); box-shadow: var(--lift); }
html body.ap .battle .opt { background: var(--bg3); }
html body.ap .rx { border-radius: 980px; }