/* Alardon site — dark medieval gold. One stylesheet, no framework. */
@view-transition { navigation: auto; }
:root {
  --bg: #0b0908; --bg2: #120f0c; --bg3: #181310;
  --text: #eadfca; --muted: #a79c88; --faint: #6f6657;
  --gold: #e3b45f; --gold-hi: #f6d58f; --gold-lo: #b9822d; --ember: #e8793a; --navy: #121a2b;
  --line: rgba(227, 180, 95, .18); --line-hi: rgba(227, 180, 95, .5);
  --card: linear-gradient(180deg, rgba(255, 240, 210, .055), rgba(255, 240, 210, .02));
  --radius: 14px; --head-h: 68px;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0313rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
html.cjk-zh body { font-family: var(--sans), 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; }
html.cjk-ja body { font-family: var(--sans), 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif; }
html.cjk-ko body { font-family: var(--sans), 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', sans-serif; }
html.cjk-zh { --serif: 'Cormorant Garamond', 'Songti SC', 'Noto Serif CJK SC', 'SimSun', serif; }
html.cjk-ja { --serif: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif CJK JP', serif; }
html.cjk-ko { --serif: 'Cormorant Garamond', 'Noto Serif CJK KR', 'Batang', serif; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold-hi); }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; letter-spacing: .005em; color: #fbf1d8; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3, .h3 { font-size: 1.5rem; font-family: var(--serif); font-weight: 700; color: #fbf1d8; margin: 0 0 .5em; }
p { margin: 0 0 1em; text-wrap: pretty; }
.wrap { width: min(1180px, 100% - 2rem); margin-inline: auto; }
.wrap.narrow { width: min(820px, 100% - 2rem); }
.center { text-align: center; }
.muted { color: var(--muted); } .small { font-size: .86rem; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: #d8ccb4; max-width: 46rem; }
.center .lead, .sec-head .lead, .page-hero .lead { margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--gold); color: #1a1208; padding: .6rem 1rem; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 1rem; }
.hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; pointer-events: none; }
.more { margin-top: 2rem; text-align: center; }
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; margin-right: 1.2rem; }
.link-arrow::after { content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-left: .35em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0b867' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(5px); }

/* ---------- buttons ---------- */
.btn { --b: var(--gold); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 .95rem/1 var(--sans); padding: .95rem 1.5rem; border-radius: 10px; border: 1px solid var(--line-hi); background: transparent; color: var(--gold-hi); cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: transform .25s var(--ease), box-shadow .25s, border-color .2s, background .2s, color .2s; text-align: center; }
.btn:hover { transform: translateY(-2px); border-color: var(--gold-hi); color: #fff3d0; }
.btn:active { transform: translateY(0); }
.btn-gold { background: linear-gradient(180deg, #f3cd7e, #d9a042 55%, #b9822d); color: #20150a; border-color: #f0c870; box-shadow: 0 6px 22px rgba(227, 160, 70, .28), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-gold:hover { color: #20150a; box-shadow: 0 10px 34px rgba(240, 170, 80, .45), inset 0 1px 0 rgba(255, 255, 255, .6); filter: brightness(1.06); }
.btn-gold::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); }
.btn-gold:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }
.btn-ghost { background: rgba(11, 9, 8, .45); backdrop-filter: blur(6px); }
.btn-sm { padding: .62rem 1rem; font-size: .86rem; } .btn-lg { padding: 1.1rem 2rem; font-size: 1.04rem; } .wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- header ---------- */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--head-h); transition: background .35s, backdrop-filter .35s, box-shadow .35s; }
.is-home .site-head:not(.scrolled) { background: linear-gradient(180deg, rgba(11, 9, 8, .75), transparent); }
.site-head.scrolled, body:not(.is-home) .site-head { background: rgba(11, 9, 8, .86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.head-in { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.brand { display: block; flex: none; line-height: 0; } .brand img { height: 38px; width: auto; transition: transform .3s var(--ease), filter .3s; } .brand:hover img { transform: scale(1.04); filter: drop-shadow(0 0 10px rgba(240, 180, 90, .55)); }
.nav { margin-left: auto; } .nav ul { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: .5rem .85rem; color: #e6dbc4; font-weight: 500; font-size: .95rem; border-radius: 8px; position: relative; white-space: nowrap; }
.head-tools .btn, .lang summary { white-space: nowrap; }
.nav a::after { content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .25rem; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .3s var(--ease); }
.nav a:hover, .nav a[aria-current] { color: var(--gold-hi); } .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.head-tools { display: flex; align-items: center; gap: .7rem; }
.lang { position: relative; } .lang summary { list-style: none; display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: #e6dbc4; font-size: .85rem; font-weight: 600; transition: border-color .2s; }
.lang summary::-webkit-details-marker { display: none; } .lang summary:hover, .lang[open] summary { border-color: var(--line-hi); }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: .5rem; width: min(430px, calc(100vw - 2rem)); display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: rgba(18, 15, 12, .97); backdrop-filter: blur(12px); border: 1px solid var(--line-hi); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); animation: pop .22s var(--ease); }
.lang a { display: block; padding: .5rem .7rem; border-radius: 6px; color: var(--text); font-size: .9rem; } .lang a:hover { background: rgba(227, 180, 95, .12); } .lang a[aria-current] { color: var(--gold-hi); background: rgba(227, 180, 95, .1); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--gold-hi); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 14px; } .burger span:nth-child(2) { top: 20px; } .burger span:nth-child(3) { top: 26px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* the menu folds into the burger as soon as it does not fit on one line (site.js measures it: long languages, mid widths) */
.site-head.compact .burger { display: block; }
.site-head.compact .nav { position: fixed; inset: var(--head-h) 0 auto 0; margin: 0; background: rgba(11, 9, 8, .97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); padding: .5rem 1rem 1.2rem; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .3s var(--ease), opacity .3s, visibility .3s; }
.site-head.compact .nav.open { transform: none; opacity: 1; visibility: visible; } .site-head.compact .nav ul { flex-direction: column; } .site-head.compact .nav a { padding: .9rem .6rem; font-size: 1.1rem; }
.site-head.compact .head-tools { margin-left: auto; }
@media (max-width: 860px) {
  .burger { display: block; } .head-tools .btn { display: none; }
  .nav { position: fixed; inset: var(--head-h) 0 auto 0; margin: 0; background: rgba(11, 9, 8, .97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); padding: .5rem 1rem 1.2rem; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: .3s var(--ease); }
  .nav.open { transform: none; opacity: 1; visibility: visible; } .nav ul { flex-direction: column; } .nav a { padding: .9rem .6rem; font-size: 1.1rem; }
  .head-in { gap: .5rem; } .head-tools { margin-left: auto; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -3; background: #1f2d3f; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 40%; transform: translate3d(0, calc(var(--py, 0) * 1px), 0) scale(1.08); will-change: transform; animation: kenburns 28s ease-in-out infinite alternate; }
@keyframes kenburns { from { scale: 1; } to { scale: 1.06; } }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; mix-blend-mode: screen; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 9, 8, .5) 0, rgba(11, 9, 8, 0) 20%, rgba(11, 9, 8, 0) 34%, rgba(11, 9, 8, .62) 62%, rgba(11, 9, 8, .94) 88%, var(--bg) 100%), radial-gradient(120% 80% at 50% 100%, rgba(11, 9, 8, .6), transparent 70%); }
.hero-in { text-align: center; padding: calc(var(--head-h) + 3rem) 0 clamp(4.5rem, 12vh, 8rem); display: flex; flex-direction: column; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem; border: 1px solid var(--line-hi); border-radius: 999px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hi); background: rgba(11, 9, 8, .55); backdrop-filter: blur(8px); margin-bottom: 1.2rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(232, 121, 58, .7); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(232, 121, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 121, 58, 0); } }
.hero-logo { position: relative; width: min(86vw, 700px); line-height: 0; filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .6)); }
.hero-logo img { width: 100%; height: auto; }
.hero-logo .shine { position: absolute; inset: 0; -webkit-mask: url(/img/logo-hero.webp) center / contain no-repeat; mask: url(/img/logo-hero.webp) center / contain no-repeat; background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 215, .85) 50%, transparent 62%) 160% 0 / 250% 100% no-repeat; animation: shine 7s 2s ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes shine { 0% { background-position: 160% 0; } 28%, 100% { background-position: -60% 0; } }
.hero h1 { font-size: clamp(1.55rem, 3.4vw, 2.7rem); margin: .9rem 0 .5rem; text-shadow: 0 2px 18px rgba(0, 0, 0, .8); max-width: 30ch; }
.hero .lead { color: #e9dec7; text-shadow: 0 1px 12px rgba(0, 0, 0, .85); }
.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin: 1.5rem 0 1rem; }
.note { font-size: .85rem; color: var(--muted); max-width: 48ch; text-shadow: 0 1px 8px #000; }
.scroll-hint { position: absolute; left: 50%; bottom: 1.4rem; width: 26px; height: 42px; margin-left: -13px; border: 1.5px solid var(--line-hi); border-radius: 14px; opacity: .8; }
.scroll-hint i { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--gold-hi); animation: scroll 1.8s infinite; }
@keyframes scroll { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.rise { opacity: 0; transform: translateY(22px); animation: rise .9s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .hero-bg img { object-position: 60% 50%; } .scroll-hint { display: none; } .hero-in { padding-top: calc(var(--head-h) + 6rem); } }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; position: relative; }
.section.alt { background: linear-gradient(180deg, var(--bg2), var(--bg)); border-block: 1px solid rgba(227, 180, 95, .07); }
.sec-head { text-align: center; margin-bottom: 2.6rem; }
.sec-head h2, .band h2, .section h2.reveal { background: linear-gradient(180deg, #fff5d6, #e9bf70 62%, #c58d36); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sec-head h2::after { content: ''; display: block; width: 90px; height: 14px; margin: .7rem auto 0; background: url(/img/star.svg) center / 14px no-repeat; -webkit-text-fill-color: initial; opacity: .9; border-image: none; }
.sec-head h2 { position: relative; } .sec-head h2::before { content: none; }

.roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.role, .feature, .card, .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .3s, transform .35s var(--ease), box-shadow .35s; }
.role { padding: 1.6rem 1.2rem; text-align: center; }
.role h3 { font-size: 1.4rem; margin-top: .9rem; } .role p { color: var(--muted); font-size: .93rem; margin: 0; }
.role:hover, .feature:hover, .card:hover { border-color: var(--line-hi); box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 40px rgba(227, 160, 70, .08); }
.ring { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--gold-hi); border: 1px solid var(--line-hi); background: radial-gradient(circle at 50% 30%, rgba(240, 190, 100, .2), rgba(240, 190, 100, .03)); transition: transform .4s var(--ease), box-shadow .4s; }
.ring svg { width: 30px; height: 30px; } .ring.sm { width: 44px; height: 44px; flex: none; } .ring.sm svg { width: 22px; height: 22px; }
.role:hover .ring { transform: scale(1.1) rotate(-6deg); box-shadow: 0 0 30px rgba(240, 170, 80, .45); }
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }
.js .tilt.reveal:not(.in) { transform: translateY(26px); }
@media (max-width: 1000px) { .roles { grid-template-columns: repeat(2, 1fr); }  }
@media (max-width: 520px) { .roles { grid-template-columns: 1fr; } }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.feature { padding: 1.8rem 1.6rem; position: relative; overflow: hidden; }
.feature .num { position: absolute; right: 1rem; top: .2rem; font: 700 4.4rem/1 var(--serif); color: rgba(227, 180, 95, .09); transition: color .3s, transform .5s var(--ease); }
.feature:hover .num { color: rgba(227, 180, 95, .2); transform: translateY(-4px); }
.feature h3 { font-size: 1.45rem; max-width: 85%; } .feature p { color: var(--muted); margin: 0; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .features { grid-template-columns: 1fr; } }

.stats { padding: 3rem 0; background: linear-gradient(180deg, transparent, rgba(18, 26, 43, .5), transparent); border-block: 1px solid rgba(227, 180, 95, .1); }
.stats dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 0; text-align: center; }
.stat { margin: 0; } .stat dd { margin: 0; }
.stat .n { font: 700 clamp(2.6rem, 6vw, 4.4rem)/1 var(--serif); background: linear-gradient(180deg, #fff1c8, #e0a644); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.stat .n.inf { display: block; height: 1em; white-space: nowrap; }
.stat .n.inf:not(.counting) { font-size: clamp(4rem, 9.4vw, 6.9rem); line-height: .62; height: .645em; }
.stat .n.pop { animation: inf-pop .9s var(--ease); } @keyframes inf-pop { 0% { transform: scale(.4); filter: drop-shadow(0 0 0 rgba(240, 170, 80, 0)); } 55% { transform: scale(1.25); filter: drop-shadow(0 0 22px rgba(240, 170, 80, .9)); } 100% { transform: none; filter: drop-shadow(0 0 0 rgba(240, 170, 80, 0)); } }
.stat .l { color: var(--muted); font-size: .9rem; max-width: 18ch; margin: .4rem auto 0; }
@media (max-width: 700px) { .stats dl { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; } .gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); } .gallery img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .8s var(--ease); } .gallery figure:hover img { transform: scale(1.06); }
.trailer .video { position: relative; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-hi); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); background: #000; }
.video iframe, .video-play, .video-play img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px; display: grid; place-items: center; border-radius: 50%; color: #20150a; background: linear-gradient(180deg, #f3cd7e, #c58d36); box-shadow: 0 0 0 0 rgba(240, 190, 100, .6); animation: pulse2 2.4s infinite; transition: transform .3s var(--ease); } .video-play:hover .play { transform: scale(1.1); }
@keyframes pulse2 { 70% { box-shadow: 0 0 0 26px rgba(240, 190, 100, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 190, 100, 0); } }
.embed { position: relative; aspect-ratio: 16/9; margin: 1.5rem 0; border-radius: 12px; overflow: hidden; } .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- roadmap ---------- */
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 0 0 2.5rem; justify-content: center; }
.chip-st { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border: 1px solid; }
.chip-st.st-done { color: #c9e9a8; border-color: rgba(160, 210, 110, .45); background: rgba(120, 170, 70, .1); } .chip-st.st-progress { color: #ffd08a; border-color: rgba(240, 170, 70, .6); background: rgba(240, 150, 50, .12); } .chip-st.st-planned { color: #b9c9e8; border-color: rgba(150, 175, 220, .4); background: rgba(100, 130, 190, .1); } .chip-st.st-idea { color: var(--muted); border-color: var(--line); border-style: dashed; }
.timeline { position: relative; padding-left: 3rem; } .tl-line { position: absolute; left: 1.05rem; top: 0; bottom: 0; width: 2px; background: rgba(227, 180, 95, .15); border-radius: 2px; } .tl-line b { display: block; width: 100%; height: calc(var(--p, 0) * 100%); background: linear-gradient(180deg, var(--gold-hi), var(--ember)); box-shadow: 0 0 14px rgba(240, 170, 80, .7); border-radius: 2px; }
.tl-group { margin-bottom: 2.5rem; } .tl-h { font-size: 2rem; margin-bottom: 1rem; }
.rm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.rm-item { position: relative; } .rm-dot { position: absolute; left: -3rem; top: 1.1rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; font-size: .95rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold-lo); color: var(--gold-hi); z-index: 1; }
.st-done .rm-dot { background: #263317; border-color: #8cbf5c; color: #d4f0b0; } .st-progress .rm-dot { border-color: var(--ember); color: #ffd08a; animation: pulse 2.2s infinite; } .st-idea .rm-dot { border-style: dashed; color: var(--muted); }
.home-rm .rm-dot, .section .rm-list .rm-dot { display: none; } .section .rm-item .rm-card { margin-left: 0; }
.rm-card { padding: 1.2rem 1.4rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .3s, transform .3s var(--ease); } .rm-card:hover { border-color: var(--line-hi); transform: translateX(4px); } .rm-card h3 { font-size: 1.35rem; margin: .5rem 0 .3rem; } .rm-card p { color: var(--muted); margin: 0; font-size: .95rem; }

/* ---------- blog ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.card { overflow: hidden; display: flex; flex-direction: column; } .card-img { display: block; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(135deg, #1a2336, #2a1d12); } .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .card:hover .card-img img { transform: scale(1.06); }
.card .ph { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 70% 20%, rgba(240, 160, 70, .25), transparent 60%), linear-gradient(135deg, #1a2336, #2a1d12); } .card .ph img { width: 56px; height: 56px; opacity: .8; object-fit: contain; }
.card-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; } .card h3 { font-size: 1.45rem; margin: .3rem 0 .5rem; } .card h3 a { color: inherit; } .card h3 a:hover { color: var(--gold-hi); } .card p { color: var(--muted); font-size: .94rem; flex: 1; }
.meta { display: flex; gap: .8rem; font-size: .8rem; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; flex-wrap: wrap; } .meta span { color: var(--gold-lo); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .cards { grid-template-columns: 1fr; } }
.tagbar { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.8rem; } .tagbar a, .tag { display: inline-block; padding: .25rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .84rem; color: var(--gold); } .tagbar a:hover, .tag:hover { border-color: var(--line-hi); background: rgba(227, 180, 95, .08); }
.pager { display: flex; justify-content: center; gap: 1rem; margin: 2.5rem 0; }
.empty { text-align: center; color: var(--muted); padding: 3rem 0; }

/* ---------- inner pages ---------- */
.page-hero { position: relative; padding: calc(var(--head-h) + 3.5rem) 0 2.5rem; overflow: hidden; isolation: isolate; text-align: center; } .page-hero.compact { padding-bottom: 4rem; min-height: 46vh; display: grid; align-items: center; }
.ph-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 9, 8, .55), var(--bg) 96%), url(/img/hero-768.webp) center 35% / cover; opacity: .9; }
.page-hero h1 { margin-bottom: .4em; background: linear-gradient(180deg, #fff5d6, #e9bf70 70%, #c58d36); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.crumbs ol { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; font-size: .84rem; color: var(--muted); } .crumbs li + li::before { content: '/'; margin-right: .4rem; color: var(--faint); } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--gold-hi); }
.article-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3rem; padding-block: 2rem 4rem; align-items: start; }
.toc { position: sticky; top: calc(var(--head-h) + 1.5rem); } .toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); } .toc a { display: block; padding: .4rem 1rem; color: var(--muted); font-size: .92rem; border-left: 2px solid transparent; margin-left: -1px; } .toc a:hover, .toc a.on { color: var(--gold-hi); border-color: var(--gold); }
@media (max-width: 900px) { .article-wrap { grid-template-columns: 1fr; } .toc { display: none; } }
.prose { max-width: 70ch; } .prose h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 2.2rem; } .prose h3 { margin-top: 1.8rem; } .prose p, .prose li { color: #d9cfba; font-size: 1.04rem; } .prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin-bottom: .4rem; } .prose li::marker { color: var(--gold); }
.prose img { border-radius: 12px; margin: 1.2rem 0; } .prose blockquote { margin: 1.5rem 0; padding: .4rem 1.3rem; border-left: 3px solid var(--gold); color: var(--muted); font-style: italic; } .prose code { background: rgba(255, 255, 255, .07); padding: .1em .4em; border-radius: 5px; font-size: .9em; } .prose hr { border: 0; height: 1px; background: var(--line); margin: 2rem 0; } .prose a { text-decoration: underline; text-decoration-color: rgba(227, 180, 95, .4); text-underline-offset: 3px; }
.roles-mini { list-style: none; padding: 0 !important; display: grid; gap: .8rem; } .roles-mini li { display: flex; gap: 1rem; align-items: center; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin: 0; } .roles-mini strong { display: block; color: #fbf1d8; font-family: var(--serif); font-size: 1.2rem; } .roles-mini span:not(.ring) { color: var(--muted); font-size: .92rem; }
.faq details { border: 1px solid var(--line); border-radius: 12px; margin-bottom: .7rem; background: var(--card); transition: border-color .3s; } .faq details[open] { border-color: var(--line-hi); } .faq summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; color: #fbf1d8; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--gold); font-size: 1.4rem; line-height: 1; transition: transform .3s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq p { padding: 0 1.2rem 1rem; margin: 0; color: var(--muted); }
.next-links { margin-top: 2.5rem; }
.post { padding-bottom: 2rem; } .post-meta { display: flex; flex-wrap: wrap; gap: .7rem 1.1rem; color: var(--muted); font-size: .88rem; margin: 1rem 0 1.4rem; align-items: center; } .post-cover { margin: 0 0 2rem; } .post-cover img { width: 100%; border-radius: 16px; border: 1px solid var(--line); }
.notice { padding: .8rem 1rem; border: 1px solid rgba(240, 170, 70, .4); border-radius: 10px; background: rgba(240, 150, 50, .08); color: #ffd9a0; font-size: .92rem; }
.post-body > p:first-of-type { font-size: 1.18rem; color: #ece2cc; }
.share { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 2.2rem 0; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--muted); } .share a, .share button { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--gold); font: inherit; font-size: .85rem; cursor: pointer; } .share a:hover, .share button:hover { border-color: var(--line-hi); }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; } .pn { display: block; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--card); transition: .3s var(--ease); } .pn:hover { border-color: var(--line-hi); transform: translateY(-2px); } .pn small { display: block; color: var(--gold); } .pn span { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; } @media (max-width: 560px) { .prevnext { grid-template-columns: 1fr; } }

/* ---------- subscribe / forms ---------- */
.band { padding: clamp(3.5rem, 8vw, 6rem) 0; text-align: center; position: relative; background: radial-gradient(70% 90% at 50% 100%, rgba(232, 121, 58, .16), transparent 70%), linear-gradient(180deg, var(--bg), #14100c); border-top: 1px solid var(--line); }
.cta-star { width: 40px; height: 40px; margin: 0 auto 1rem; animation: twinkle 3.4s ease-in-out infinite; } @keyframes twinkle { 50% { transform: scale(1.25) rotate(20deg); filter: drop-shadow(0 0 14px #f6d58f); } }
.panel { padding: clamp(1.4rem, 3vw, 2.2rem); background: linear-gradient(180deg, rgba(24, 19, 15, .9), rgba(15, 12, 10, .9)); }
.sub { display: grid; gap: .9rem; text-align: left; max-width: 640px; margin: 1.5rem auto 0; }
.sub-row { display: flex; gap: .6rem; } .sub-row .input { flex: 1; min-width: 0; }
.input, .support-form input:not([type]), .support-form input[type='email'], .support-form input[type='number'], .support-form textarea { width: 100%; padding: .95rem 1.1rem; background: rgba(0, 0, 0, .4); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; transition: border-color .2s, box-shadow .2s; }
.input:focus, .support-form input:focus, .support-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227, 180, 95, .18); }
.input::placeholder { color: var(--faint); }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .chips legend { font-size: .86rem; color: var(--muted); margin-bottom: .5rem; padding: 0; float: left; width: 100%; }
.chip input { position: absolute; opacity: 0; pointer-events: none; } .chip span { display: inline-block; padding: .45rem .95rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .9rem; color: var(--muted); transition: .2s; } .chip:hover span { border-color: var(--line-hi); color: var(--text); } .chip input:checked + span { background: rgba(227, 180, 95, .16); border-color: var(--gold); color: var(--gold-hi); } .chip input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; color: var(--muted); cursor: pointer; text-align: left; } .consent input { margin-top: .25rem; accent-color: var(--gold); width: 1.05rem; height: 1.05rem; flex: none; }
.sub-msg { margin: 0; padding: .8rem 1rem; border-radius: 10px; font-size: .95rem; text-align: center; animation: pop .3s var(--ease); } .sub-msg[data-state='ok'] { background: rgba(120, 170, 70, .14); border: 1px solid rgba(160, 210, 110, .4); color: #d4f0b0; } .sub-msg[data-state='err'] { background: rgba(200, 70, 50, .13); border: 1px solid rgba(230, 110, 90, .4); color: #ffc4b8; } .sub-msg[hidden] { display: none; }
.sub-compact { margin-top: 1.6rem; } @media (max-width: 560px) { .sub-row { flex-direction: column; } }
.socials { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 1rem 0 0; } .center .socials, .socials-lg { justify-content: center; }
.socials a { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem 1rem .35rem .4rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: .9rem; transition: .25s var(--ease); } .socials a:hover { border-color: var(--line-hi); transform: translateY(-2px); background: rgba(227, 180, 95, .08); }
.socials .mono { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 700 .78rem var(--sans); color: #20150a; background: linear-gradient(180deg, #f3cd7e, #c58d36); } .socials-sm .lbl { display: none; } .socials-sm a { padding: .25rem; }

/* ---------- support page ---------- */
.support { padding-block: 1rem 4rem; } .support-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; } @media (max-width: 960px) { .support-grid { grid-template-columns: 1fr; } }
.support-form { display: grid; gap: 1rem; } .support-form label { display: grid; gap: .4rem; font-size: .88rem; color: var(--muted); } .support-form .consent { display: flex; } .support-side { display: grid; gap: 1.4rem; position: sticky; top: calc(var(--head-h) + 1rem); } @media (max-width: 960px) { .support-side { position: static; } }
.rank-card { display: grid; grid-template-columns: 150px 1fr; gap: 1.2rem; align-items: center; padding: 1.1rem; border: 1px solid var(--line-hi); border-radius: 16px; background: radial-gradient(120% 100% at 0% 0%, rgba(240, 170, 80, .16), transparent 60%), rgba(0, 0, 0, .25); position: relative; min-height: 190px; } .rank-card .medal { grid-column: 1; grid-row: 1; } .rank-card .rank-text { grid-column: 2; grid-row: 1; } @media (max-width: 520px) { .rank-card { grid-template-columns: 110px 1fr; } }
.rank-text small { color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; } .rank-text strong { display: block; font: 700 clamp(1.8rem, 4vw, 2.4rem)/1.1 var(--serif); color: #fff1c8; margin: .2rem 0 .4rem; } .rank-text span { color: var(--muted); font-size: .93rem; display: block; }
.medal { position: relative; display: inline-block; width: 130px; aspect-ratio: 1; line-height: 0; } .medal img, .medal svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* (hidden by opacity, not display: a display:none image with loading=lazy is never fetched — the painted ranks vanished, 11.10) */
.medal .tier-img { opacity: 0; } .medal.has-img .tier-img { opacity: 1; } .medal.has-img .tier-fallback { display: none; }
.rank-card .medal { display: none; width: 100%; max-width: 150px; align-self: center; } .rank-card .medal.on { display: block; animation: medalIn .6s var(--ease); filter: drop-shadow(0 0 calc(var(--glow, 1) * 8px) rgba(240, 180, 80, .8)); }
@keyframes medalIn { from { opacity: 0; transform: scale(.6) rotate(-14deg); } 60% { transform: scale(1.08) rotate(3deg); } }
.medal.sm { width: 44px; flex: none; } .medal.xs { width: 30px; flex: none; } .medal.md { width: 84px; } .medal.xl { width: 190px; }
.amount { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .amount label { font-size: .95rem; } .amount-in { display: flex; align-items: center; gap: .4rem; background: rgba(0, 0, 0, .4); border: 1px solid var(--line-hi); border-radius: 12px; padding: 0 .9rem; } .amount-in .sym { color: var(--gold); font: 700 1.5rem var(--serif); } .amount-in input { background: none !important; border: 0 !important; box-shadow: none !important; width: 7.5rem !important; font: 700 1.8rem var(--serif) !important; color: #fff1c8 !important; padding: .5rem .2rem !important; text-align: right; -moz-appearance: textfield; } .amount-in input::-webkit-outer-spin-button, .amount-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--gold-hi) var(--fill, 0%), rgba(255, 255, 255, .12) var(--fill, 0%)); outline-offset: 6px; cursor: pointer; margin: .8rem 0 .2rem; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c9, #e0a644 60%, #a8721c); border: 2px solid #20150a; box-shadow: 0 0 0 4px rgba(240, 190, 100, .3), 0 4px 14px rgba(0, 0, 0, .6); transition: transform .2s; } .range:active::-webkit-slider-thumb { transform: scale(1.18); }
.range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c9, #e0a644 60%, #a8721c); border: 2px solid #20150a; box-shadow: 0 0 0 4px rgba(240, 190, 100, .3); }
.ticks { list-style: none; display: flex; justify-content: space-between; padding: 0 12px; margin: 0 0 .6rem; } .ticks li { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: .3s; } .ticks li.on { background: var(--gold-hi); box-shadow: 0 0 8px var(--gold); }
.perks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; } .perks li { position: relative; padding-left: 2rem; } .perks li::before { content: ''; position: absolute; left: .1rem; top: .25em; width: 1rem; height: 1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f6d58f'%3E%3Cpath d='M12 1.5c1 6.2 2.8 9.2 10.5 10.5-7.7 1.3-9.5 4.3-10.5 10.5-1-6.2-2.8-9.2-10.5-10.5C9.2 10.7 11 7.7 12 1.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ladder ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .ladder li { display: flex; align-items: center; gap: .8rem; padding: .35rem .6rem; border-radius: 10px; border: 1px solid transparent; transition: .3s; } .ladder li.on { border-color: var(--line-hi); background: rgba(227, 180, 95, .1); } .ladder b { display: block; font-family: var(--serif); font-size: 1.15rem; color: #fbf1d8; } .ladder small { color: var(--muted); }
.wall { margin-top: 3.5rem; text-align: center; } .wall-list { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; padding: 0; margin: 1.5rem 0 0; } .wall-list li { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem 1rem .3rem .35rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); } .wall-list .wt-8 { border-color: var(--gold-hi); box-shadow: 0 0 22px rgba(240, 190, 100, .35); font-weight: 600; } .wall-list .wt-7, .wall-list .wt-6 { border-color: var(--line-hi); }
.thanks-medal { margin-bottom: 1rem; } .thanks-medal .medal { animation: medalIn .9s var(--ease), float 4s ease-in-out infinite 1s; filter: drop-shadow(0 0 22px rgba(240, 180, 80, .7)); } @keyframes float { 50% { transform: translateY(-8px); } } .rank-line { font: 700 1.5rem var(--serif); color: var(--gold-hi); }
.spinner { width: 44px; height: 44px; margin: 1rem auto; border: 3px solid var(--line); border-top-color: var(--gold-hi); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.support-teaser { background: radial-gradient(60% 80% at 50% 50%, rgba(240, 170, 80, .1), transparent 70%); } .medal-row { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.2rem; } .medal-row .medal { animation: float 5s ease-in-out infinite; } .medal-row .medal:nth-child(2) { animation-delay: .6s; } .medal-row .medal:nth-child(3) { animation-delay: 1.2s; } .medal-row .medal:nth-child(4) { animation-delay: 1.8s; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: #080605; padding-top: 3rem; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.6fr; gap: 2.5rem; } .foot-brand p { color: var(--muted); max-width: 32ch; margin-top: 1rem; } .foot-h { font: 600 .78rem var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--gold); margin-bottom: 1rem; } .site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .site-foot a { color: var(--muted); font-size: .92rem; } .site-foot a:hover { color: var(--gold-hi); } .foot-langs ul { grid-template-columns: repeat(2, 1fr); gap: .35rem 1rem; } .foot-langs a[aria-current] { color: var(--gold-hi); }
.foot-bottom { display: flex; justify-content: space-between; margin-top: 2.5rem; padding: 1.4rem 0 2rem; border-top: 1px solid rgba(227, 180, 95, .1); color: var(--faint); font-size: .85rem; } .totop { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold) !important; } .totop:hover { transform: translateY(-3px); }
@media (max-width: 800px) { .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.foot-grid > * { min-width: 0; } .foot-langs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-langs a { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal, .rise { opacity: 1; transform: none; }
}
@media print { .site-head, .site-foot, .band, .embers, .scroll-hint { display: none; } body { background: #fff; color: #000; } }

/* rewards (from $100 own item, from $1000 statue) */
.reward { border: 1px dashed var(--line-hi); border-radius: 14px; padding: 1rem 1.1rem; margin: 0; display: grid; gap: .8rem; background: rgba(227, 180, 95, .05); animation: pop .35s var(--ease); } .reward legend { padding: 0 .5rem; color: var(--gold-hi); font: 700 1.15rem var(--serif); } .reward[hidden], .reward-statue[hidden] { display: none; }
.reward-statue { margin: 0; padding: .8rem 1rem; border: 1px solid var(--gold); border-radius: 12px; background: linear-gradient(90deg, rgba(240, 190, 100, .16), transparent); color: #f1e3c3; font-size: .92rem; animation: pop .35s var(--ease); }
.milestones { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .5rem; } .milestones li { color: var(--muted); font-size: .92rem; transition: .3s; } .milestones li b { color: var(--gold); margin-right: .4rem; } .milestones li::before { content: ''; display: inline-block; width: .8em; height: .8em; margin-right: .5em; border: 1.5px solid var(--faint); border-radius: 50%; vertical-align: -.05em; } .milestones li.on { color: #fbf1d8; } .milestones li.on::before { border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f6d58f'%3E%3Cpath d='M12 1.5c1 6.2 2.8 9.2 10.5 10.5-7.7 1.3-9.5 4.3-10.5 10.5-1-6.2-2.8-9.2-10.5-10.5C9.2 10.7 11 7.7 12 1.5z'/%3E%3C/svg%3E") center / contain no-repeat; width: 1em; height: 1em; }

/* ---------- support buttons ---------- */
.btn-support { background: linear-gradient(180deg, rgba(255, 236, 190, .16), rgba(227, 180, 95, .06)); border: 1px solid var(--gold); color: var(--gold-hi); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-support:hover { background: linear-gradient(180deg, rgba(255, 236, 190, .26), rgba(227, 180, 95, .14)); box-shadow: 0 0 30px rgba(240, 170, 80, .35); color: #fff3d0; }
.heart { color: #ff8a5c; display: inline-block; animation: beat 2.2s infinite; text-shadow: 0 0 12px rgba(255, 120, 70, .7); }
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 10% { transform: scale(1.3); } 25% { transform: scale(1.05); } 38% { transform: scale(1.22); } }
@media (max-width: 1100px) and (min-width: 861px) { .head-tools .btn-support span:last-child { display: none; } }
.cta-support { margin: 1.4rem 0 0; }
.support-card { margin-top: 1.5rem; text-align: center; } .support-card .lead { margin-inline: auto; }

/* ---------- role medallions ---------- */
.rmedal { display: inline-block; width: 150px; aspect-ratio: 1; line-height: 0; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .65)); transition: transform .5s var(--ease), filter .5s; animation: bob 6s ease-in-out infinite; }
.rmedal img { width: 100%; height: 100%; object-fit: contain; }
.role:nth-child(2n) .rmedal { animation-delay: -2s; } .role:nth-child(3n) .rmedal { animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.role:hover .rmedal { transform: scale(1.09) rotate(-3deg); filter: drop-shadow(0 0 28px rgba(240, 170, 80, .6)); animation-play-state: paused; }
.role h3 { margin-top: .5rem; }
.rmedal.sm { width: 68px; flex: none; animation: none; }

/* ---------- feature panorama: one wide painting that slides sideways while the page scrolls down ----------
   layers (back to front): painting strip 1x · birds 0.55x · mist 1.3x · embers · foreground silhouettes 1.6x · vignette · text 1x · grain · progress */
.scenes { position: relative; background: var(--bg2); }
.pano { --sh: max(100svh, 560px); --sw: calc(var(--sh) * var(--ratio)); --lead: 0px; --tail: 0px; position: relative; }
.pano-stick { position: relative; height: var(--sh); overflow-x: auto; overflow-y: hidden; background: var(--bg2); scrollbar-width: thin; }
.pano-row { position: absolute; top: 0; left: 0; height: 100%; display: flex; width: max-content; }
.pano-lead { flex: none; width: var(--lead); } .pano-tail { flex: none; width: var(--tail); }
.pano-strip { position: relative; flex: none; width: var(--sw); height: 100%; }
.pano-tile { position: absolute; top: 0; height: 100%; max-width: none; object-fit: fill; background: #1a120b; }
.pano-fade { position: absolute; top: 0; bottom: 0; width: min(30vw, 480px); pointer-events: none; }
.pano-fade.l { left: -1px; background: linear-gradient(90deg, var(--bg2), rgba(14, 11, 9, .55) 45%, transparent); }
.pano-fade.r { right: -1px; background: linear-gradient(270deg, var(--bg2) 8%, rgba(14, 11, 9, .7) 40%, transparent); }
.pano-sky, .pano-mist, .pano-fg, .pano-motes, .pano-hud, .pano-grain { display: none; }
.pano.hz { height: var(--span, auto); }
.pano.hz .pano-stick { position: sticky; top: 0; overflow: hidden; }
.pano.hz .pano-row, .pano.hz .pano-sky, .pano.hz .pano-mist, .pano.hz .pano-fg { will-change: transform; }
.pano.hz .pano-sky, .pano.hz .pano-mist, .pano.hz .pano-fg { display: block; position: absolute; top: 0; left: 0; height: 100%; pointer-events: none; }
.pano-track { z-index: 0; } .pano-sky { z-index: 1; } .pano-mist { z-index: 2; } .pano-motes { z-index: 3; } .pano-fg { z-index: 4; } .pano-vig { z-index: 5; } .pano-text { z-index: 6; } .pano-grain { z-index: 7; } .pano-hud { z-index: 8; }
/* birds: little gull silhouettes, flapping and gliding */
.flock { position: absolute; width: 120px; height: 60px; animation: glide 26s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -5s); }
.flock i { position: absolute; width: 22px; height: 10px; }
.flock i::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 7 Q6 0 12 7 Q18 0 24 7 Q18 3.2 12 9 Q6 3.2 0 7Z' fill='%23140d08'/%3E%3C/svg%3E") center/contain no-repeat; transform-origin: 50% 70%; animation: flap .52s ease-in-out infinite alternate; }
.flock i:nth-child(1) { left: 0; top: 18px; } .flock i:nth-child(2) { left: 26px; top: 6px; transform: scale(.8); } .flock i:nth-child(3) { left: 50px; top: 24px; transform: scale(.7); }
.flock i:nth-child(4) { left: 74px; top: 12px; transform: scale(.6); } .flock i:nth-child(5) { left: 94px; top: 30px; transform: scale(.5); }
.flock i:nth-child(2n)::before { animation-duration: .6s; animation-delay: -.2s; } .flock i:nth-child(3n)::before { animation-duration: .46s; animation-delay: -.35s; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.45); } }
@keyframes glide { from { transform: translate(0, 0); } 50% { transform: translate(-90px, 14px); } to { transform: translate(-160px, -6px); } }
.pano-mist { background: radial-gradient(ellipse 46% 22% at 50% 88%, rgba(255, 196, 120, .2), transparent 70%) 0 0 / calc(var(--sh) * 1.2) 100% repeat-x, radial-gradient(ellipse 50% 14% at 50% 64%, rgba(255, 222, 170, .1), transparent 72%) 0 0 / calc(var(--sh) * 1.9) 100% repeat-x, radial-gradient(ellipse 40% 16% at 50% 22%, rgba(255, 214, 160, .08), transparent 70%) 0 0 / calc(var(--sh) * 1.5) 100% repeat-x; }
.pano.hz .pano-motes { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pano-fg img { position: absolute; bottom: -2.5%; width: auto; max-width: none; filter: blur(1.6px) brightness(.8); opacity: 0; transition: opacity .6s; }
.pano-fg img.ok { opacity: 1; }
.pano-vig { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 8, 6, .62), transparent 18%, transparent 66%, rgba(10, 8, 6, .82)), radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(8, 6, 4, .55)); }
.pano.hz .pano-grain { display: block; position: absolute; inset: -60%; pointer-events: none; background: none; opacity: .13; animation: grain .9s steps(5) infinite; }
.pano.hz.seen .pano-grain { background: url(/img/pano/grain.webp) 0 0 / 256px; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); } 60% { transform: translate(-4%, -3%); } 80% { transform: translate(6%, 5%); } 100% { transform: translate(0, 0); } }
/* intro (lead-in) and outro (call to action) */
.pano-intro > * { width: min(760px, calc(100vw - 2.8rem)); position: relative; }
.pano-intro::before { content: ''; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: min(1100px, 120vw); background: radial-gradient(ellipse 60% 55% at 26% 52%, rgba(9, 7, 5, .78), rgba(9, 7, 5, .35) 60%, transparent); pointer-events: none; }
.pano-intro, .pano-outro { position: absolute; top: 0; left: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 5rem clamp(1.4rem, 7vw, 7rem) 6rem; }
.pano-kicker { font: 600 .82rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-hi); }
.pano-intro h2 { margin: 1.1rem 0 0; font-size: clamp(2.9rem, 7.4vw, 7rem); line-height: .96; max-width: 11ch; background: linear-gradient(180deg, #fff6df 18%, #f0c879 62%, #b98234); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .55)); }
.pano-orn { display: block; width: 210px; height: 14px; margin: 1.5rem 0 1.4rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23e9b866' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23f3d08a'/%3E%3Cstop offset='1' stop-color='%23e9b866' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 7h92M118 7h92' stroke='url(%23g)' stroke-width='1.4'/%3E%3Cpath d='M105 1l6 6-6 6-6-6z' fill='none' stroke='%23f3d08a' stroke-width='1.4'/%3E%3Ccircle cx='105' cy='7' r='1.8' fill='%23f3d08a'/%3E%3C/svg%3E") left center / contain no-repeat; }
.pano-hint { display: inline-flex; align-items: center; gap: .9rem; color: #d8c9ac; font-size: .98rem; }
.pano-hint i { position: relative; width: 54px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-hi)); animation: hint 1.8s var(--ease) infinite; }
.pano-hint i::after { content: ''; position: absolute; right: -1px; top: -4px; width: 9px; height: 9px; border-top: 2px solid var(--gold-hi); border-right: 2px solid var(--gold-hi); transform: rotate(45deg); }
@keyframes hint { 0% { transform: translateX(-10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(16px); opacity: 0; } }
.pano-outro { align-items: flex-end; } .pano-outro > * { width: min(560px, calc(100vw - 2.8rem)); position: relative; } .pano-outro h3 { max-width: none; }
.pano-outro::before { content: ''; position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: min(1000px, 120vw); background: radial-gradient(ellipse 60% 55% at 70% 52%, rgba(9, 7, 5, .78), rgba(9, 7, 5, .35) 60%, transparent); pointer-events: none; } .pano-outro h3 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1; margin: 0 0 1rem; max-width: 14ch; color: #fbf0d4; }
.pano-outro p { color: #d9ccb1; max-width: 46ch; font-size: 1.08rem; } .pano-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.js .pano-intro > *, .js .pano-outro > * { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.pano.seen .pano-intro > *, .pano.end .pano-outro > * { opacity: 1; transform: none; }
.pano-intro > :nth-child(2), .pano-outro > :nth-child(2) { transition-delay: .12s; } .pano-intro > :nth-child(3), .pano-outro > :nth-child(3) { transition-delay: .3s; } .pano-intro > :nth-child(4), .pano-outro > :nth-child(4) { transition-delay: .5s; }
/* chapters */
.chap { position: absolute; top: 50%; width: min(500px, 84vw); transform: translate3d(calc(var(--lp, 0) * -46px), -46%, 0); }
.chap.r { margin-left: calc(min(500px, 84vw) * -1); }
.chap::before { content: ''; position: absolute; z-index: -1; inset: -34% -30% -30% -26%; background: radial-gradient(closest-side, rgba(9, 7, 5, .82), rgba(9, 7, 5, .5) 55%, transparent); pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
.chap.in::before, html:not(.js) .chap::before { opacity: 1; }
.chap-num { position: absolute; z-index: -1; left: -.12em; top: -.72em; font: 700 clamp(8rem, 24vh, 15rem)/1 var(--serif); color: rgba(243, 200, 120, .07); -webkit-text-stroke: 1.5px rgba(243, 200, 120, .55); opacity: 0; transform: translate3d(calc(var(--lp, 0) * -70px - 30px), 0, 0); transition: opacity 1.2s var(--ease), transform .3s linear; pointer-events: none; }
.chap.r .chap-num { left: auto; right: -.06em; }
.chap-kicker { display: flex; align-items: center; gap: .9rem; font: 600 .78rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hi); opacity: 0; transform: translateX(-24px); transition: opacity .9s var(--ease) .1s, transform 1s var(--ease) .1s; }
.chap-kicker::after { content: ''; height: 1px; flex: 0 0 0; background: linear-gradient(90deg, var(--gold-hi), transparent); transition: flex-basis 1.3s var(--ease) .4s; }
.chap h3 { margin: 1rem 0 1rem; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.02; filter: drop-shadow(0 4px 22px rgba(0, 0, 0, .75)); }
.chap h3 .w > span, html:not(.js) .chap h3 { background: linear-gradient(180deg, #fff7e4 25%, #f1cc84 80%, #d9a54f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chap p { margin: 0; font-size: clamp(1.04rem, 1.45vw, 1.22rem); line-height: 1.6; color: #e6dbc4; text-shadow: 0 2px 14px rgba(0, 0, 0, .9); opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease) .75s, transform 1s var(--ease) .75s; }
.chap.in .chap-num { opacity: 1; } .chap.in .chap-kicker { opacity: 1; transform: none; } .chap.in .chap-kicker::after { flex-basis: 90px; } .chap.in p { opacity: 1; transform: none; }
html:not(.js) .chap-num, html:not(.js) .chap-kicker, html:not(.js) .chap p { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.split .w > span { display: inline-block; }
.js .split .w > span { transform: translateY(115%); transition: transform .95s var(--ease); transition-delay: calc(var(--w) * 70ms + 220ms); }
.js .chap.in .split .w > span { transform: none; }
/* progress: chapter counter + a gold line with a node per chapter */
.pano.hz .pano-hud { display: flex; position: absolute; left: 50%; bottom: clamp(1rem, 3.2vh, 2rem); transform: translateX(-50%); align-items: center; gap: 1.2rem; width: min(640px, calc(100vw - 2.4rem)); }
.pano-count { flex: none; display: flex; align-items: baseline; gap: .35rem; font-family: var(--serif); color: #fbefd2; } .pano-count b { font-size: 1.9rem; font-weight: 600; min-width: 1.6ch; } .pano-count i { font-style: normal; color: var(--muted); font-size: .95rem; }
.pano-line { position: relative; flex: 1; height: 2px; background: rgba(255, 238, 205, .2); border-radius: 2px; }
.pano-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--pp, 0)); background: linear-gradient(90deg, rgba(240, 190, 100, .3), var(--gold-hi)); box-shadow: 0 0 12px rgba(240, 170, 80, .6); }
.pano-dot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; padding: 0; border: 1.5px solid rgba(255, 236, 200, .55); border-radius: 50%; background: #1a130d; cursor: pointer; transition: transform .35s var(--ease), background .35s, border-color .35s, box-shadow .35s; }
.pano-dot::before { content: ''; position: absolute; inset: -12px; }
.pano-dot.past { background: var(--gold); border-color: var(--gold-hi); }
.pano-dot.on { transform: scale(1.45); background: var(--gold-hi); border-color: #fff1cf; box-shadow: 0 0 0 4px rgba(240, 180, 90, .18), 0 0 18px rgba(240, 170, 80, .8); }
.pano.hz::before, .pano.hz::after { content: ''; position: absolute; left: 0; right: 0; height: min(24svh, 240px); z-index: 2; pointer-events: none; }
.pano.hz::before { top: 0; background: linear-gradient(180deg, var(--bg), transparent); }
.pano.hz::after { bottom: 0; background: linear-gradient(0deg, var(--bg), transparent); }
@media (max-width: 760px) {
  .chap { top: auto; bottom: 5.6rem; transform: translate3d(calc(var(--lp, 0) * -30px), 0, 0); }
  .chap::before { inset: -40% -20% -30% -16%; }
  .chap-num, .chap.r .chap-num { font-size: 7.2rem; top: -.82em; left: -.08em; right: auto; }
  .chap h3 { font-size: 2.15rem; } .chap p { font-size: 1rem; line-height: 1.55; }
  .pano-intro { justify-content: flex-end; padding-bottom: 7rem; } .pano-intro h2 { font-size: 3.1rem; }
  .pano-outro { justify-content: flex-end; padding-bottom: 6.5rem; }
  .pano-count b { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .js .split .w > span, .chap-num, .chap-kicker, .chap p, .js .pano-intro > *, .js .pano-outro > * { transform: none !important; opacity: 1 !important; } .rmedal, .heart { animation: none; } }

/* ---------- home: feed from the game (masonry of screenshots + videos) and the open poll ---------- */
.sec-head .kicker { display: block; margin-bottom: .9rem; font: 600 .78rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hi); -webkit-text-fill-color: initial; }
.fchips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 2rem; }
.fchip { padding: .5rem 1.05rem; border-radius: 99px; border: 1px solid var(--line); background: rgba(11, 9, 8, .5); color: #d8cbb0; font: 600 .86rem/1 var(--sans); cursor: pointer; text-decoration: none; transition: background .25s, border-color .25s, color .25s, transform .25s var(--ease); }
.fchip:hover { border-color: var(--line-hi); color: #fff3d0; transform: translateY(-1px); }
.fchip.on { background: linear-gradient(180deg, #f3cd7e, #d9a042); border-color: #f0c870; color: #20150a; }
.fgrid { columns: 3 300px; column-gap: 1.1rem; }
.fcard { break-inside: avoid; margin: 0 0 1.1rem; border-radius: 14px; overflow: hidden; background: #130f0b; border: 1px solid var(--line); transition: border-color .3s, box-shadow .4s, transform .5s var(--ease), opacity .45s; }
.fcard:hover { border-color: var(--line-hi); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 40px rgba(227, 160, 70, .1); }
.fcard[hidden] { display: none; }
.fcard-link { position: relative; display: block; aspect-ratio: var(--r, 1.6); overflow: hidden; background: #1a130d; cursor: zoom-in; }
.fcard.is-video .fcard-link { cursor: pointer; }
.fcard-link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease), filter .5s; }
.fcard:hover .fcard-link img { transform: scale(1.06); filter: brightness(1.08) saturate(1.08); }
.fcard-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(9, 7, 5, .55)); pointer-events: none; }
.fplay { position: absolute; z-index: 2; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; color: #20150a; background: linear-gradient(180deg, #f6d68c, #d9a042); box-shadow: 0 6px 28px rgba(0, 0, 0, .6), 0 0 0 0 rgba(240, 190, 100, .55); transition: transform .35s var(--ease); animation: fpulse 2.6s ease-out infinite; }
.fplay svg { margin-left: 3px; }
.fcard:hover .fplay { transform: scale(1.12); }
@keyframes fpulse { 0% { box-shadow: 0 6px 28px rgba(0, 0, 0, .6), 0 0 0 0 rgba(240, 190, 100, .55); } 70%, 100% { box-shadow: 0 6px 28px rgba(0, 0, 0, .6), 0 0 0 20px rgba(240, 190, 100, 0); } }
.fcard figcaption { padding: .8rem 1rem 1rem; }
.fmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; font-size: .8rem; color: var(--muted); }
.fmeta time { letter-spacing: .04em; }
.ftag { font: 600 .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: .28rem .55rem; border-radius: 99px; border: 1px solid var(--line-hi); color: var(--gold-hi); }
.fcard figcaption p { margin: .55rem 0 0; font-size: .95rem; line-height: 1.5; color: #e3d8c0; }
.feed-page { padding-bottom: 2rem; }
.feed-page .fchips { margin-top: 2.2rem; }
/* lightbox */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: 1fr auto; background: rgba(6, 5, 4, .94); backdrop-filter: blur(10px); animation: lbin .3s var(--ease); }
@keyframes lbin { from { opacity: 0; } }
.lb[hidden] { display: none; }
.lb-stage { display: grid; place-items: center; min-height: 0; padding: 3.2rem 4rem 1rem; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: lbimg .45s var(--ease); }
@keyframes lbimg { from { opacity: 0; transform: scale(.97); } }
.lb-stage iframe { width: min(100%, calc((100svh - 230px) * var(--vr, 1.7778))); aspect-ratio: var(--vr, 1.7778); max-height: 100%; border: 0; border-radius: 10px; background: #000; box-shadow: 0 30px 90px rgba(0, 0, 0, .7); }
.lb-cap { padding: .4rem 1.2rem 1.4rem; text-align: center; max-width: 820px; margin-inline: auto; }
.lb-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .8rem; align-items: center; color: var(--muted); font-size: .88rem; }
.lb-cap p { margin: .5rem 0 0; color: #efe4cc; font-size: 1.05rem; }
.lb-x, .lb-nav { position: absolute; z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-hi); background: rgba(11, 9, 8, .6); color: var(--gold-hi); cursor: pointer; transition: background .25s, transform .25s var(--ease); }
.lb-x:hover, .lb-nav:hover { background: rgba(60, 44, 24, .85); transform: scale(1.08); }
.lb-x { top: 1rem; right: 1rem; } .lb-nav.prev { left: 1rem; top: 50%; margin-top: -23px; } .lb-nav.next { right: 1rem; top: 50%; margin-top: -23px; }
.lb .ico { width: 22px; height: 22px; }
@media (max-width: 700px) { .lb-stage { padding: 3.4rem .6rem .6rem; } .lb-nav { top: auto; bottom: 7.5rem; margin: 0; } .lb-nav.prev { left: .8rem; } .lb-nav.next { right: .8rem; } .fgrid { columns: 2 150px; column-gap: .7rem; } .fcard { margin-bottom: .7rem; } .fcard figcaption { padding: .6rem .7rem .8rem; } .fcard figcaption p { font-size: .86rem; } .fplay { width: 46px; height: 46px; margin: -23px 0 0 -23px; } }
@media (max-width: 420px) { .fgrid { columns: 1; } }
/* poll */
.poll-sec { background: radial-gradient(60% 80% at 50% 0%, rgba(240, 160, 70, .09), transparent 70%); }
.poll-card { position: relative; padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: 20px; border: 1px solid var(--line-hi); background: linear-gradient(180deg, rgba(255, 240, 210, .07), rgba(255, 240, 210, .02)); box-shadow: 0 30px 90px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 240, 210, .12); overflow: hidden; }
.poll-card::before { content: ''; position: absolute; inset: -40% -10% auto; height: 70%; background: radial-gradient(closest-side, rgba(255, 190, 100, .16), transparent); pointer-events: none; }
.poll-q { position: relative; margin: 0 0 1.5rem; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.15; color: #fbf0d4; text-align: center; }
.poll-opts { position: relative; display: grid; gap: .8rem; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.05rem 1.3rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(11, 9, 8, .55); color: #eadfc6; font: 600 1.05rem/1.3 var(--sans); text-align: left; cursor: pointer; overflow: hidden; isolation: isolate; transition: border-color .3s, transform .3s var(--ease), box-shadow .3s, background .3s; }
.poll-opt:not(:disabled):hover { border-color: var(--gold-hi); transform: translateX(6px); box-shadow: 0 8px 30px rgba(240, 160, 70, .16); background: rgba(40, 29, 16, .7); }
.poll-opt:disabled { cursor: default; opacity: 1; }
.poll-bar { position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: linear-gradient(90deg, rgba(217, 160, 66, .12), rgba(217, 160, 66, .42)); transition: width 1.1s var(--ease); }
.poll-txt { flex: 1; }
.poll-pct { min-width: 3.4ch; text-align: right; font: 700 1.25rem/1 var(--serif); color: var(--gold-hi); opacity: 0; transition: opacity .5s .3s; }
.poll-opt .ico { width: 20px; height: 20px; color: var(--gold-hi); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .5s var(--ease); }
.show-res .poll-pct { opacity: 1; }
.poll-opt.mine { border-color: var(--gold-hi); box-shadow: 0 0 0 1px rgba(240, 190, 100, .35), 0 8px 34px rgba(240, 160, 70, .18); }
.poll-opt.mine .ico { opacity: 1; transform: none; }
.poll-opt.win .poll-bar { background: linear-gradient(90deg, rgba(240, 190, 100, .25), rgba(240, 190, 100, .6)); }
.poll-note { position: relative; margin: 1.2rem 0 0; text-align: center; color: var(--muted); font-size: .9rem; }
html:not(.js) .poll-pct { opacity: 0; }

/* ---------- gallery: themes as playlists, topic landing pages ---------- */
.gal-sub { margin: 3rem 0 1.4rem; font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fbefd2; }
.gal-sub.center { text-align: center; }
.gallery-sec .gal-sub { text-align: center; }
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.3rem; margin-top: 1rem; }
.tgrid .tcard.big { grid-column: span 2; grid-row: span 2; }
.tgrid.n1 { grid-template-columns: 1fr; } .tgrid.n1 .tcard.big { grid-column: auto; grid-row: auto; } .tgrid.n1 .tcard.big .tcard-img { aspect-ratio: 21 / 9; min-height: 0; }
.tgrid.n2 { grid-template-columns: 1fr 1fr; }
.tcard { position: relative; }
.tcard::before, .tcard::after { content: ''; position: absolute; left: 6%; right: 6%; top: -10px; height: 40px; border-radius: 14px 14px 0 0; background: rgba(60, 44, 26, .55); border: 1px solid var(--line); border-bottom: 0; z-index: -1; transition: transform .45s var(--ease); }
.tcard::after { left: 12%; right: 12%; top: -19px; background: rgba(40, 30, 18, .5); z-index: -2; }
.tcard:hover::before { transform: translateY(-4px); } .tcard:hover::after { transform: translateY(-8px); }
.tcard-link { display: flex; flex-direction: column; height: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #130f0b; color: inherit; text-decoration: none; transition: border-color .3s, box-shadow .4s, transform .45s var(--ease); }
.tcard-link:hover { border-color: var(--line-hi); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 50px rgba(227, 160, 70, .1); }
.tcard-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #1a130d; }
.tcard.big .tcard-img { aspect-ratio: auto; flex: 1; min-height: 320px; }
.tcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .5s; }
.tcard-link:hover .tcard-img img { transform: scale(1.06); filter: brightness(1.08); }
.tcard-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10, 8, 6, .75)); }
.tcard-play { position: absolute; z-index: 1; right: 1rem; top: 1rem; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #20150a; background: linear-gradient(180deg, #f6d68c, #d9a042); box-shadow: 0 6px 22px rgba(0, 0, 0, .55); }
.tcard-play .ico { width: 20px; height: 20px; margin-left: 2px; }
.tcard-body { display: block; padding: 1.1rem 1.25rem 1.3rem; }
.tcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; font-size: .82rem; color: var(--muted); }
.tcount { display: inline-flex; gap: .8rem; } .tcount span { display: inline-flex; align-items: center; gap: .3rem; color: var(--gold-hi); font-weight: 600; } .tcount .ico { width: 16px; height: 16px; }
.tcard h3 { margin: .55rem 0 .4rem; font-size: 1.45rem; line-height: 1.15; color: #fbf0d4; }
.tcard.big h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.tcard p { margin: 0; color: #d6c9ae; font-size: .95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font: 600 .86rem/1 var(--sans); color: var(--gold-hi); }
.tcard-go .ico { width: 16px; height: 16px; transition: transform .3s var(--ease); } .tcard-link:hover .tcard-go .ico { transform: translateX(4px); }
.gallery-topics { padding-top: .5rem; }
/* topic page */
.topic-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(6.5rem, 14vw, 9.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.topic-bg { position: absolute; inset: 0; z-index: -1; }
.topic-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 35%; filter: brightness(.62) saturate(1.05); transform: scale(1.04); }
.topic-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 9, 8, .92) 0%, rgba(11, 9, 8, .6) 50%, rgba(11, 9, 8, .25)), linear-gradient(0deg, var(--bg), transparent 45%); }
.topic-in { max-width: 1100px; }
.topic-in .kicker { display: block; margin: 1rem 0 .8rem; font: 600 .78rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hi); }
.topic-in h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1; max-width: 16ch; background: linear-gradient(180deg, #fff6df 20%, #f0c879 70%, #c58d36); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topic-in .lead { max-width: 60ch; margin: 1.1rem 0 0; color: #e3d8c0; }
.topic-meta { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 1.2rem 0 0; color: var(--muted); font-size: .9rem; } .topic-meta span { display: inline-flex; align-items: center; gap: .35rem; } .topic-meta .ico { width: 16px; height: 16px; color: var(--gold-hi); }
.topic-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } .topic-cta .ico { width: 18px; height: 18px; }
.topic-in .crumbs ol { justify-content: flex-start; }
.topic-body { padding-bottom: 3rem; }
.tvideos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; margin-top: 1rem; }
.tvideo { margin: 0; } .tvideo.big { grid-column: 1 / -1; }
.tvideo .video { position: relative; aspect-ratio: var(--vr, 1.7778); border-radius: 16px; overflow: hidden; border: 1px solid var(--line-hi); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); background: #000; }
.tvideo .video .play .ico { width: 30px; height: 30px; margin-left: 4px; }
.tvideo figcaption { margin-top: .7rem; color: var(--muted); font-size: .9rem; }
@media (max-width: 900px) { .tgrid { grid-template-columns: 1fr 1fr; } .tgrid .tcard.big { grid-column: 1 / -1; grid-row: auto; } .tcard.big .tcard-img { min-height: 0; aspect-ratio: 16 / 10; } .tvideos { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tgrid { grid-template-columns: 1fr; } }

/* ---------- support: detail block, goal bar, founder, supporter card ---------- */
.detail { margin: 0 0 3rem; } .detail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; align-items: stretch; } @media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } }
.detail .panel h3 { font-size: 1.6rem; }
.checks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .9rem; } .checks li { position: relative; padding-left: 2.1rem; color: #e6dcc6; } .checks li::before { content: ''; position: absolute; left: 0; top: .1em; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320150a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat, linear-gradient(180deg, #f3cd7e, #c58d36); box-shadow: 0 0 14px rgba(240, 170, 80, .35); }
.checks.soft li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f6d58f'%3E%3Cpath d='M12 1.5c1 6.2 2.8 9.2 10.5 10.5-7.7 1.3-9.5 4.3-10.5 10.5-1-6.2-2.8-9.2-10.5-10.5C9.2 10.7 11 7.7 12 1.5z'/%3E%3C/svg%3E") center / 58% no-repeat; border: 1px solid var(--gold); box-shadow: none; }
.now { border-color: var(--line-hi); background: radial-gradient(120% 100% at 0% 0%, rgba(240, 170, 80, .13), transparent 60%), linear-gradient(180deg, rgba(24, 19, 15, .9), rgba(15, 12, 10, .9)); }
.founder-call, .founder-badge { display: inline-block; margin: .3rem 0 0; padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--gold); background: linear-gradient(90deg, rgba(240, 190, 100, .2), rgba(240, 190, 100, .05)); color: var(--gold-hi); font-weight: 600; font-size: .92rem; animation: glowpulse 3s ease-in-out infinite; }
.founder-badge { font: 700 1.3rem var(--serif); padding: .5rem 1.3rem; } @keyframes glowpulse { 50% { box-shadow: 0 0 26px rgba(240, 170, 80, .45); } }
.goal { margin: 0 auto 2.5rem; max-width: 720px; padding: 1.2rem 1.4rem; border: 1px solid var(--line-hi); border-radius: 16px; background: rgba(0, 0, 0, .3); text-align: left; }
.goal-top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; } .goal-top b { font: 700 1.3rem var(--serif); color: #fbf1d8; } .goal-top span { color: var(--gold-hi); font-weight: 600; }
.goal-bar { height: 14px; margin: .7rem 0 .5rem; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; } .goal-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #f6d58f, #e0a644 60%, #ff8a5c); box-shadow: 0 0 18px rgba(240, 170, 80, .6); transition: width 1.6s var(--ease) .3s; position: relative; overflow: hidden; }
.goal-bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-100%); animation: barshine 3.2s 2s infinite; } @keyframes barshine { to { transform: translateX(100%); } }
.goal.in .goal-bar i, html:not(.js) .goal-bar i { width: var(--w); }
.sup-card { margin: 0 auto 1.5rem; max-width: 520px; padding: 2.2rem 1.6rem; border: 1px solid var(--gold); border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, rgba(240, 170, 80, .22), transparent 65%), linear-gradient(180deg, rgba(30, 23, 16, .95), rgba(14, 11, 9, .95)); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(240, 170, 80, .15); }
.sup-card h1 { -webkit-text-fill-color: initial; background: none; color: #fbf1d8; font-size: clamp(1.5rem, 4vw, 2.1rem); margin: .8rem 0 .3rem; } .sc-brand { letter-spacing: .35em; color: var(--gold); font-size: .72rem; display: block; margin-bottom: .6rem; }
.sup-card .medal.xl { display: block; margin: 0 auto; animation: medalIn .9s var(--ease), float 4s ease-in-out infinite 1s; filter: drop-shadow(0 0 24px rgba(240, 180, 80, .7)); }

/* ---------- support community: plan, hall of founders, funds, spotlight, invites, polls ---------- */
.detail-grid + .plan { margin-top: 1.2rem; } .plan h3 { font-size: 1.4rem; }
.hall { margin: 3rem 0; text-align: center; } .hall-grid { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .45rem; }
.hall-grid li { aspect-ratio: 1; border-radius: 10px; border: 1px dashed rgba(227, 180, 95, .25); display: grid; place-content: center; gap: 2px; padding: 2px; overflow: hidden; background: rgba(255, 255, 255, .02); }
.hall-grid li b { font: 700 .95rem var(--serif); color: var(--faint); } .hall-grid li span { font-size: .62rem; line-height: 1.1; color: var(--faint); text-overflow: ellipsis; overflow: hidden; }
.hall-grid li.taken { border: 1px solid var(--line-hi); background: linear-gradient(180deg, rgba(240, 190, 100, .22), rgba(240, 190, 100, .06)); box-shadow: inset 0 0 14px rgba(240, 170, 80, .18); animation: pop .6s var(--ease) backwards; } .hall-grid li.taken b { color: var(--gold-hi); } .hall-grid li.taken span { color: #fbf1d8; font-weight: 600; }
.hall-grid li.wt-8, .hall-grid li.wt-9, .hall-grid li.wt-10 { box-shadow: 0 0 20px rgba(240, 190, 100, .5), inset 0 0 14px rgba(240, 170, 80, .25); border-color: var(--gold-hi); }
@media (max-width: 700px) { .hall-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hall-grid li span { font-size: .6rem; } }
.funds { margin: 3rem auto 0; max-width: 720px; text-align: center; } .funds ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .9rem; text-align: left; } .funds li, .poll-res li { display: grid; grid-template-columns: minmax(130px, 1.2fr) 2fr 3rem; gap: .8rem; align-items: center; } .funds em, .poll-res strong { font-style: normal; color: var(--gold-hi); text-align: right; font-weight: 600; }
.fbar { display: block; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; } .fbar b { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #f6d58f, #e0a644); transition: width 1.4s var(--ease) .2s; }
.reveal.in .fbar b, html:not(.js) .fbar b { width: var(--w); }
@media (max-width: 560px) { .funds li, .poll-res li { grid-template-columns: 1fr 3rem; } .funds li .fbar, .poll-res li .fbar { grid-column: 1 / -1; grid-row: 2; } }
.spotlight { display: flex; align-items: center; gap: 1.2rem; max-width: 720px; margin: 0 auto 2rem; padding: 1rem 1.4rem; border: 1px solid var(--gold); border-radius: 18px; background: radial-gradient(100% 140% at 0% 50%, rgba(240, 170, 80, .2), transparent 70%), rgba(0, 0, 0, .3); text-align: left; }
.spotlight small { display: block; color: var(--gold); letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; } .spotlight b { display: block; font: 700 1.4rem/1.2 var(--serif); color: #fbf1d8; } .spotlight .medal { flex: none; width: 76px; }
.card-extra { display: grid; gap: 1.4rem; padding-block: 1rem 4rem; text-align: left; } .invite-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; } .invite-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .25); } .invite-list li.used { opacity: .5; } .invite-list code { font-size: 1.1rem; letter-spacing: .15em; color: var(--gold-hi); }
.poll { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); } .poll h3 { font-size: 1.4rem; } .poll-form { display: grid; gap: .6rem; } .poll-form .chip span { display: block; border-radius: 12px; padding: .7rem 1rem; } .poll-form .btn { justify-self: start; margin-top: .4rem; }
.poll-res { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .8rem; } .poll-res li.mine span { color: var(--gold-hi); font-weight: 600; } .poll-res em { font-style: normal; color: var(--gold); }
.pill { display: inline-block; padding: .05rem .6rem; border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; color: var(--muted); vertical-align: middle; }

.wall-list .wt-9, .wall-list .wt-10 { border-color: var(--gold-hi); box-shadow: 0 0 28px rgba(240, 190, 100, .55); font-weight: 700; } .wall-list .wt-10 { background: linear-gradient(90deg, rgba(240, 190, 100, .28), rgba(240, 190, 100, .06)); }

.funds-plain { grid-template-columns: repeat(3, 1fr); gap: 1rem !important; } .funds-plain li { display: flex !important; flex-direction: column; align-items: center; gap: .6rem; text-align: center; padding: 1.2rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); grid-template-columns: none !important; } .funds-plain .fi { font-size: 2rem; } @media (max-width: 700px) { .funds-plain { grid-template-columns: 1fr; } }

/* ---------- icons ---------- */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; }
.heart .ico { width: 1.05em; height: 1.05em; vertical-align: -.17em; }
.rm-dot .ico { width: 1.05rem; height: 1.05rem; } .totop .ico { width: 1.1rem; height: 1.1rem; }
.pico { width: 56px; height: 56px; object-fit: contain; vertical-align: middle; margin-right: .5rem; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }
.pico.sm { width: 34px; height: 34px; margin-right: .4rem; } .pico.lg { width: 84px; height: 84px; margin: 0; }
.detail .panel h3, .invites h2, .polls h2 { display: flex; align-items: center; } .reward legend { display: flex; align-items: center; } .reward-statue { display: flex; align-items: center; gap: .6rem; }
.funds .fl { display: inline-flex; align-items: center; } .funds-plain .pico { margin: 0; }
.founder-call .ico, .founder-badge .ico, .spotlight small .ico, .hall h2 .ico { color: var(--gold-hi); } .hall h2 .ico { width: .8em; height: .8em; vertical-align: -.05em; }
.hall-grid li span .ico { width: .9rem; height: .9rem; color: var(--gold-hi); }
.invite-list .ico { color: var(--gold-hi); width: 1.2rem; height: 1.2rem; }
.pn small .ico { width: 1.1rem; height: 1.1rem; color: var(--gold); } .btn .ico { width: 1.2em; height: 1.2em; }
button.copied::after { content: ''; display: inline-block; width: 1em; height: 1em; margin-left: .45em; vertical-align: -.15em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6d58f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }


/* ---- player accounts: header link, sign-in / code / cabinet pages (src/account) ---- */
.acct-link { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; color: #e6dbc4; font-size: .85rem; font-weight: 600; white-space: nowrap; transition: border-color .2s, color .2s; }
.acct-link:hover, .acct-link[aria-current] { border-color: var(--line-hi); color: var(--gold-hi); }
.acct-link .ico { width: 1.1rem; height: 1.1rem; flex: none; }
.acct-link.is-in { border-color: var(--line-hi); color: var(--gold-hi); }
@media (max-width: 1100px) { .acct-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.acct { display: grid; gap: 1.4rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
.acct-panel { width: 100%; max-width: 520px; margin: 0 auto; }
.acct-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 1.4rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, .25); }
.acct-tabs a { text-align: center; padding: .65rem .5rem; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: .95rem; }
.acct-tabs a:hover { color: var(--text); }
.acct-tabs a[aria-current] { background: rgba(227, 180, 95, .14); color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--line-hi); }
.acct-form { display: grid; gap: .9rem; }
.acct-label { font-size: .86rem; color: var(--muted); margin-bottom: -.4rem; }
.acct-code { text-align: center; font: 700 1.9rem/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .4em; padding-left: 1.4em; }
.acct-hint { margin: .2rem 0 0; } .acct-hint .ico { width: 1em; height: 1em; vertical-align: -.15em; color: var(--gold); }
.acct-switch { margin: 1.2rem 0 0; color: var(--muted); }
.acct-or { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0 .9rem; color: var(--muted); font-size: .86rem; } .acct-or::before, .acct-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.acct-providers { display: grid; gap: .6rem; } .acct-provider { justify-content: center; }
.acct-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin: 1.2rem 0 .6rem; }
.acct-row form { margin: 0; }
.acct-card { width: 100%; }
.acct-card h2 { display: flex; align-items: center; gap: .55rem; } .acct-card h2 .ico { width: 1.15em; height: 1.15em; color: var(--gold); }
.acct-dl { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 1rem; }
.acct-dl-item { display: grid; gap: .45rem; justify-items: center; text-align: center; }
.acct-meta { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: 0 0 .4rem; } .acct-meta dt { color: var(--muted); } .acct-meta dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .acct-meta { grid-template-columns: 1fr; gap: .1rem; } .acct-meta dd { margin-bottom: .6rem; } }
.acct > .sub-msg { width: 100%; max-width: 820px; }
.acct-id { font: 600 .9rem/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--gold-hi); overflow-wrap: anywhere; }
.acct-lang { display: grid; gap: .9rem; margin-top: 1rem; } .acct-lang .acct-row { margin: 0; justify-content: flex-start; } .acct-lang select { width: auto; min-width: 12rem; }
.acct-devices { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.acct-device { display: flex; align-items: center; gap: .9rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .18); }
.acct-device.here { border-color: var(--gold); }
.acct-device-ico .ico { width: 1.4em; height: 1.4em; color: var(--gold); }
.acct-device-main { flex: 1; min-width: 0; display: grid; gap: .15rem; overflow-wrap: anywhere; }
.acct-device form { margin: 0; }
.acct-badge { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold); font-size: .78em; vertical-align: .1em; }
@media (max-width: 520px) { .acct-device { flex-wrap: wrap; } .acct-device form { width: 100%; } .acct-device form .btn { width: 100%; } }
.acct-captcha { min-height: 65px; display: flex; justify-content: center; }
.foot-studio { margin-top: .6rem !important; font-size: .9rem; } .foot-studio a { color: var(--gold) !important; }