@font-face { font-family: "Aref Ruqaa"; font-style: normal; font-weight: 400; font-display: block; src: url("https://fonts.gstatic.com/s/arefruqaa/v26/WwkbxPW1E165rajQKDulIIIoVfg61NfCHA.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Aref Ruqaa"; font-style: normal; font-weight: 400; font-display: block; src: url("https://fonts.gstatic.com/s/arefruqaa/v26/WwkbxPW1E165rajQKDulIIcoVfg61Nc.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Aref Ruqaa"; font-style: normal; font-weight: 700; font-display: block; src: url("https://fonts.gstatic.com/s/arefruqaa/v26/WwkYxPW1E165rajQKDulKDwNQNAY2f34Fdj3cQ.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Aref Ruqaa"; font-style: normal; font-weight: 700; font-display: block; src: url("https://fonts.gstatic.com/s/arefruqaa/v26/WwkYxPW1E165rajQKDulKDwNQNUY2f34Fdg.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: block; src: url("https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7PkRXMw.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 300; font-display: block; src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YOW_uCRXMRrKATtYV0.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 300; font-display: block; src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YOW_uCUXMRrKATt.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: block; src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys43PW5fslBEg0.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: block; src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys93PW5fslB.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: block; src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPO_-CRXMRrKATtYV0.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: block; src: url("https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPO_-CUXMRrKATt.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "OK Digits"; font-style: normal; font-weight: 400 700; font-display: block; src: url("https://fonts.gstatic.com/s/marcellus/v14/wEO_EBrOk8hQLDvIAF81VvoK_kgXiQ.woff2") format("woff2"); unicode-range: U+0030-0039; }
:root {
--bg: #060303;
--ink: #0e0707;
--soot: #170c0b;
--velvet: #5c0c16;
--velvet-hi: #8e1626;
--line: rgba(232, 190, 110, .16);
--line-hi: rgba(232, 190, 110, .42);
--bone: #f6ece0;
--mute: #a3958a;
--gold: #d9a94e;
--gold-hi: #ffd98e;
--gold-deep: #8a5a18;
--fire: #ff7a1c;
--f-disp: "Aref Ruqaa", "Noto Naskh Arabic", serif;
--f-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
--f-lat: "OK Digits", "Cinzel", Georgia, serif;
--f-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
--gutter: clamp(18px, 5vw, 80px);
--max: 1240px;
--ease: cubic-bezier(.19, 1, .22, 1);
--img-d: url("../img/throne-d-empty.webp?v=9e277356");
--img-m: url("../img/throne-m-empty.webp?v=a5295b50");
color-scheme: dark;
}
html[lang="en"] { --f-disp: "OK Digits", "Cinzel", Georgia, serif; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; background: #060303; }
body { margin: 0; background: var(--bg); color: var(--bone); font-family: var(--f-body); font-weight: 300; font-size: 16px; line-height: 1.85; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--gold-hi); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
em { font-style: normal; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 200; padding: 10px 16px; background: var(--gold-hi); color: #1a0d04; transform: translateY(-200%); transition: transform .3s; }
.skip:focus { transform: none; }
.inner { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.kicker { font-family: var(--f-lat); font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.num { font-family: var(--f-lat); color: var(--gold); font-size: 15px; letter-spacing: .1em; }
.gold, .split-h em, h2 em, h1 em { background: linear-gradient(100deg, #b07a2a, var(--gold-hi) 35%, #fff2cf 48%, var(--gold-hi) 60%, #b07a2a); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 6s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.gold, .split-h em:not(.plain), h2 em, h1 em, .decree dd.big { padding: .34em .16em; margin: -.34em -.16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.progress { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 70; background: linear-gradient(90deg, var(--fire), var(--gold-hi)); transform-origin: var(--po, right); transform: scaleX(var(--pg, 0)); pointer-events: none; }
html[dir="ltr"] .progress { --po: left; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; overflow: hidden; isolation: isolate; border: 1px solid #f0c06a; color: #2a1404;
background: linear-gradient(180deg, #ffe3a6, #e0a64a 50%, #a8701e); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 10px 30px -10px rgba(255,120,30,.55), inset 0 1px 0 rgba(255,255,255,.5); transition: box-shadow .5s, transform .5s var(--ease); transform: translate(var(--mx, 0), var(--my, 0)); }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%); transform: translateX(-130%); transition: transform .9s var(--ease); z-index: -1; }
.btn:hover::after { transform: translateX(130%); }
.btn:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 40px -4px rgba(255,140,40,.85), inset 0 1px 0 rgba(255,255,255,.5); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .ar { transition: transform .6s var(--ease); }
.btn:hover .ar { transform: translateX(-5px); }
html[dir="ltr"] .btn .ar { transform: scaleX(-1); }
html[dir="ltr"] .btn:hover .ar { transform: scaleX(-1) translateX(-5px); }
.btn.ghost { background: rgba(0,0,0,.28); color: var(--bone); border-color: var(--line-hi); box-shadow: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.btn.ghost:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.btn.sm { padding: 9px 16px; font-size: 13.5px; }
.btn[disabled] { opacity: .6; cursor: progress; }
.ext { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-hi); background: rgba(0,0,0,.3); cursor: pointer; transition: border-color .4s, color .4s; }
.icon-btn:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.icon-btn svg { width: 22px; height: 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.nav { position: fixed; inset-inline: 0; top: 0; z-index: 60; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--gutter) 14px; transition: background .6s, padding .6s, border-color .6s; border-bottom: 1px solid transparent; }
.nav.solid { background: linear-gradient(180deg, rgba(6,3,3,.95), rgba(6,3,3,.78)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding-block: calc(env(safe-area-inset-top, 0px) + 10px) 10px; border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 44px; width: auto; filter: drop-shadow(0 0 12px rgba(255,170,60,.25)); transition: height .5s var(--ease); }
.nav.solid .brand img { height: 38px; }
.brand span { font-family: var(--f-lat); font-weight: 700; letter-spacing: .28em; font-size: 12.5px; color: var(--gold-hi); }
.nav-links { display: flex; justify-content: center; gap: 30px; font-size: 14.5px; color: #d5c8ba; }
.nav-links a { position: relative; padding-block: 6px; transition: color .4s; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.nav-links a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--gold-hi); transform: scaleX(0); transition: transform .6s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--gold-hi); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-end { display: flex; align-items: center; gap: 10px; }
.lang-sw { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 10px; border: 1px solid var(--line-hi); font-size: 13px; font-weight: 500; letter-spacing: .06em; background: rgba(0,0,0,.3); transition: border-color .4s, color .4s; }
.lang-sw:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.menu-btn { display: none; }
@media (max-width: 1040px) { .nav-links { display: none; } .menu-btn { display: inline-grid; } .nav { grid-template-columns: auto 1fr; } .nav-end { justify-self: end; } }
@media (max-width: 560px) { .brand span { display: none; } .nav-cta { padding: 11px 15px; font-size: 14px; } .nav-end .lang-sw { display: none; } }
.menu { position: fixed; inset: 0; z-index: 80; display: grid; align-content: center; justify-items: center; gap: 22px; padding: 80px var(--gutter) 40px; background: radial-gradient(70% 50% at 50% 0%, rgba(142,22,38,.45), transparent 70%), rgba(6,3,3,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.menu-open .menu { opacity: 1; visibility: visible; }
.menu-open { overflow: hidden; }
.menu-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); inset-inline-end: var(--gutter); }
.menu-logo { width: 74px; height: auto; filter: drop-shadow(0 0 24px rgba(255,150,50,.45)); }
.menu-in { display: grid; justify-items: center; gap: 4px; }
.menu-in .mi { display: block; }
.menu-in a { display: block; font-family: var(--f-disp); font-size: clamp(32px, 8vw, 46px); line-height: 1.5; opacity: 0; transform: translateY(24px); transition: transform .9s var(--ease), opacity .9s var(--ease), color .3s; }
.menu-open .menu-in a { transform: none; opacity: 1; }
.menu-in .mi:nth-child(2) a { transition-delay: .05s; } .menu-in .mi:nth-child(3) a { transition-delay: .1s; } .menu-in .mi:nth-child(4) a { transition-delay: .15s; } .menu-in .mi:nth-child(5) a { transition-delay: .2s; }
.menu-in a:hover, .menu-in a[aria-current] { color: var(--gold-hi); }
.menu-foot { display: grid; justify-items: center; gap: 14px; color: var(--mute); font-size: 14px; }
.lang-sw.big { min-width: 120px; }
section.block { padding-block: clamp(90px, 12vw, 160px); position: relative; }
.bleed-sec { position: relative; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: clamp(40px, 6vw, 64px); }
.sec-head h2, .split-h { font-family: var(--f-disp); font-size: clamp(44px, 6.4vw, 100px); line-height: 1.5; margin-top: 16px; padding-block: .06em .12em; }
html[lang="en"] .sec-head h2, html[lang="en"] .split-h { font-size: clamp(38px, 5.2vw, 82px); letter-spacing: .01em; }
.sec-head p { color: var(--mute); max-width: 46ch; justify-self: end; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.split p { color: var(--mute); max-width: 48ch; margin-top: 16px; }
@media (max-width: 900px) { .sec-head, .split { grid-template-columns: minmax(0, 1fr); } .sec-head p { justify-self: start; } }
.js .rv { opacity: 0; transform: translateY(44px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .split-h .w { display: inline-block; vertical-align: top; }
.js .split-h .w > span { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(10px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease), filter 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .split-h.in .w > span { opacity: 1; transform: none; filter: none; }
.js .now, .js .now .w > span { transition: none !important; }
@media (pointer: coarse) { .js .split-h .w > span { filter: none; transition-property: opacity, transform; } }
[data-tilt] { transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .8s var(--ease); transform-style: preserve-3d; }
[data-tilt].tilting { transition: transform .12s linear; }
.js [data-tilt].rv { transform: perspective(1000px) translateY(44px); }
.js [data-tilt].rv.in { transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.glare { position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,226,160,.18), transparent 45%); opacity: 0; transition: opacity .5s; mix-blend-mode: screen; }
.tilting .glare { opacity: 1; }
.band { overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(180deg, #120808, var(--bg)); padding-block: 16px; }
.band-track { display: flex; width: max-content; animation: band 60s linear infinite; }
html[dir="ltr"] .band-track { animation-direction: reverse; }
.band span { font-family: var(--f-lat); font-weight: 600; letter-spacing: .4em; font-size: clamp(12px, 1.3vw, 15px); color: var(--gold); white-space: nowrap; padding-inline: 30px; }
.band span.ar { font-family: var(--f-disp); letter-spacing: 0; font-size: clamp(20px, 2.2vw, 28px); color: var(--bone); }
html[lang="en"] .band span.ar { font-size: clamp(14px, 1.5vw, 18px); letter-spacing: .2em; }
.band span.f { color: var(--fire); letter-spacing: 0; }
@keyframes band { to { transform: translateX(50%); } }
.hall { position: relative; height: 430vh; }
.hall-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; isolation: isolate; }
.plate { --W: 1672; --H: 941; --ox: 49.9%; --oy: 53.2%; position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100svh * 1672 / 941)); aspect-ratio: 1672 / 941; transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px)) scale(var(--zoom, 1)); transform-origin: var(--ox) var(--oy); will-change: transform; }
.plate .img { position: absolute; inset: 0; background: var(--img-d) center / 100% 100% no-repeat, url("data:image/webp;base64,UklGRh4BAABXRUJQVlA4IBIBAACQBwCdASooABcAPu1sp0+ppiMiKrgN+TAdiWIAnTLrqR7AABoIRXNWCkaol45l+GwIyrcmQHOTNLBB7FlOKQX6PEIZJAAA/uQpSPGW6kKpUomN/KDofmrEc1FdXlRc9Lcw1ifeUFUJLbBg3gsJs+g365eMh9hkeP6EOpwyu7QrUqX8bVpHAbUFOwILn9mnbZnrSOwOSJaXe5lLiJ9ZaeCVNrMr8OXEScg1Ml0F+Ht5pO70X0bjmOiPu3FaKXeBV61tJDA1rGi1Ni2sakjXZDWxy99eRtKuwUhpB4BGZceNt3fzcpdupsG+NdtsPuQ/xSucBLvj8Pjp8biB1Xy3JwHGQmWQg2WW2+wefQm8pp4IA8AA") center / 100% 100% no-repeat; }
.patch { position: absolute; left: calc(750 / 1672 * 100%); top: calc(400 / 941 * 100%); width: calc(170 / 1672 * 100%); height: calc(210 / 941 * 100%); background: url("../img/throne-d-patch.webp?v=c49584d5") center / 100% 100% no-repeat;
-webkit-mask: radial-gradient(ellipse 72% 72% at 50% 50%, #000 calc(var(--reveal, 0) * 80%), transparent calc(var(--reveal, 0) * 100% + .1%)); mask: radial-gradient(ellipse 72% 72% at 50% 50%, #000 calc(var(--reveal, 0) * 80%), transparent calc(var(--reveal, 0) * 100% + .1%)); }
.plate .dark { position: absolute; inset: 0; background: radial-gradient(60% 55% at var(--ox) 55%, rgba(0,0,0,calc(var(--dark, .78) * .75)), rgba(0,0,0,var(--dark, .78)) 70%); }
.glow { position: absolute; width: calc(var(--s, 90) / var(--W) * 100%); aspect-ratio: 1; left: calc(var(--x) / var(--W) * 100%); top: calc(var(--y) / var(--H) * 100%); transform: translate(-50%, -62%); border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
background: radial-gradient(circle, rgba(255,230,170,.95) 0%, rgba(255,150,50,.65) 22%, rgba(255,90,20,.25) 48%, transparent 70%); opacity: calc(.55 + var(--fire, .3) * .45); animation: flick var(--fd, 1.3s) ease-in-out var(--fdl, 0s) infinite alternate; }
.glow.big { background: radial-gradient(circle, rgba(255,170,70,.28) 0%, rgba(255,110,30,.12) 35%, transparent 70%); animation-duration: calc(var(--fd, 1.3s) * 1.7); }
@keyframes flick { 0% { transform: translate(-50%, -62%) scale(1); filter: brightness(1); } 23% { transform: translate(-50%, -64%) scale(1.08, 1.14); filter: brightness(1.2); } 41% { transform: translate(-50%, -61%) scale(.95); filter: brightness(.88); } 67% { transform: translate(-50%, -63%) scale(1.06, 1.1); filter: brightness(1.12); } 100% { transform: translate(-50%, -62%) scale(.98, 1.03); filter: brightness(.95); } }
.rays { position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none; opacity: calc(.25 + var(--lit, 0) * .55);
background: conic-gradient(from 160deg at var(--sx, 53%) var(--sy, 17%), transparent 0deg, rgba(255,214,140,.14) 8deg, transparent 14deg, rgba(255,214,140,.1) 22deg, transparent 28deg, rgba(255,214,140,.16) 36deg, transparent 42deg); -webkit-mask: linear-gradient(180deg, #000 20%, transparent 75%); mask: linear-gradient(180deg, #000 20%, transparent 75%); }
.sheen { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; mix-blend-mode: screen; pointer-events: none; opacity: .35; background: linear-gradient(100deg, transparent 30%, rgba(255,190,110,.18) 45%, transparent 60%) 0 0 / 200% 100%; animation: sheen2 7s linear infinite; -webkit-mask: linear-gradient(180deg, transparent, #000 40%); mask: linear-gradient(180deg, transparent, #000 40%); }
@keyframes sheen2 { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.flash { position: absolute; left: var(--ox); top: var(--oy); width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(calc(.6 + var(--flash, 0) * .6)); border-radius: 50%; mix-blend-mode: screen; pointer-events: none; opacity: var(--flash, 0); background: radial-gradient(circle, #fffae1 0%, rgba(255,210,120,.8) 18%, rgba(255,140,40,.35) 40%, transparent 68%); }
.ring { position: absolute; left: var(--ox); top: var(--oy); width: 8%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,220,150,.9); transform: translate(-50%, -50%) scale(calc(1 + var(--ring, 0) * 9)); opacity: calc((1 - var(--ring, 0)) * min(1, var(--ring, 0) * 20)); box-shadow: 0 0 30px rgba(255,170,60,.8), inset 0 0 20px rgba(255,170,60,.6); pointer-events: none; }
.smoke { position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: screen; opacity: .4; filter: blur(40px); background: radial-gradient(30% 20% at 25% 30%, rgba(120,80,50,.5), transparent 70%), radial-gradient(30% 20% at 75% 25%, rgba(120,80,50,.45), transparent 70%), radial-gradient(40% 25% at 50% 70%, rgba(140,70,30,.35), transparent 70%); animation: smoke 26s ease-in-out infinite alternate; }
@keyframes smoke { from { transform: translate(-3%, 1%) scale(1); } to { transform: translate(3%, -2%) scale(1.1); } }
.hall-embers, .chess-dust, .embers, .confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hall-embers { z-index: 3; }
.vign { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(110% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.75)), linear-gradient(180deg, rgba(0,0,0,.6), transparent 24%, transparent 60%, rgba(0,0,0,calc(.45 + var(--title, 0) * .45)) 100%); }
.intro { position: absolute; inset-inline: 0; top: calc(env(safe-area-inset-top, 0px) + 100px); z-index: 6; text-align: center; padding-inline: var(--gutter); display: grid; gap: 12px; justify-items: center; opacity: var(--intro, 1); transform: translateY(calc((1 - var(--intro, 1)) * -20px)); pointer-events: none; }
.intro-t { font-family: var(--f-disp); font-size: clamp(30px, 4vw, 58px); line-height: 1.55; text-shadow: 0 4px 30px #000, 0 0 2px #000; }
html[lang="en"] .intro-t { font-size: clamp(24px, 3.2vw, 44px); }
.intro-t span { color: var(--gold-hi); }
.live { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid var(--line-hi); background: rgba(0,0,0,.45); font-size: 13px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.live i, .open i { width: 8px; height: 8px; border-radius: 50%; background: #3be07a; box-shadow: 0 0 0 0 rgba(59,224,122,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(59,224,122,0); } 100% { box-shadow: 0 0 0 0 rgba(59,224,122,0); } }
.cue { position: absolute; inset-inline: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); z-index: 6; display: grid; justify-items: center; gap: 10px; font-size: 13px; color: #d8cabb; opacity: var(--cue, 1); text-shadow: 0 2px 8px #000; pointer-events: none; margin: 0; }
.cue i { width: 1px; height: 46px; background: linear-gradient(var(--gold-hi), transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.crown, .chess-crown { position: absolute; inset-inline: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 4vh); z-index: 6; text-align: center; display: grid; gap: 4px; justify-items: center; padding-inline: var(--gutter); opacity: var(--title, 0); transform: translateY(calc((1 - var(--title, 0)) * 34px)); pointer-events: none; }
.crown.live-ui, .chess-crown.live-ui { pointer-events: auto; }
.crown-h { font-family: var(--f-disp); font-weight: 700; font-size: clamp(44px, 6.4vw, 100px); line-height: 1.4; filter: drop-shadow(0 6px 30px rgba(0,0,0,.95)); }
html[lang="en"] .crown-h { font-size: clamp(40px, 6.6vw, 104px); font-weight: 600; }
.crown-p { font-size: clamp(15px, 1.4vw, 18px); color: #ead9c3; text-shadow: 0 2px 14px #000, 0 0 2px #000; max-width: 60ch; }
.crown .kicker, .chess-crown .kicker { color: var(--gold-hi); text-shadow: 0 2px 10px #000, 0 0 2px #000; }
.crown .ctas, .chess-crown .ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.out { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: linear-gradient(180deg, transparent 35%, var(--bg)); opacity: var(--fade, 0); }
@media (max-aspect-ratio: 1/1) {
.plate { --W: 941; --H: 1672; --oy: 44.8%; width: max(100vw, calc(100svh * 941 / 1672)); aspect-ratio: 941 / 1672; }
.plate .img { background-image: var(--img-m), url("data:image/webp;base64,UklGRhQBAABXRUJQVlA4IAgBAAAQCACdASoYACsAPu1urVCppqQiqrgKATAdiWYAnTMyTVZ4AAmDEcW5Gv+EfL52Err7wi7lHOroatvgK2FR/QN7fzsqoFGoamUAAP7wx+doCwdvm2yOtMMcbEjtMU6TcmP9KpkEfXsTYEg1OGWugpiZCoIw4RqYP2ek5KjGluKLddQ5t4LRPOFtsZT0S11LjzrZXO2CFXGiVr2oqJ4M0k+N64JitRib76LbGEf6xynLcjpBn5QaBXf994d6LbPbvGCy0+Kc9hu0h7ITBYX9ndeqL0AUqqyoupgQ55s8SXD0cJ1ALzR22W0+VZwmnkFyj7Ovmq1tIJNhBZACVitf9xJqM5thrPhBJAA="); }
.patch { left: calc(360 / 941 * 100%); top: calc(620 / 1672 * 100%); width: calc(220 / 941 * 100%); height: calc(260 / 1672 * 100%); background-image: url("../img/throne-m-patch.webp?v=011e4b70"); }
.flash { width: 46%; } .ring { width: 14%; }
.hall { height: 400vh; }
.crown-h { font-size: clamp(38px, 10.5vw, 60px); }
.crown { bottom: calc(env(safe-area-inset-bottom, 0px) + 4vh); gap: 8px; }
.vign { background: radial-gradient(110% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.75)), linear-gradient(180deg, rgba(0,0,0,.6), transparent 24%, transparent 50%, rgba(0,0,0,calc(.45 + var(--title, 0) * .5)) 100%); }
}
.tonight { position: relative; overflow: hidden; border: 1px solid var(--line-hi); background: radial-gradient(80% 60% at 85% 0%, rgba(255,120,30,.16), transparent 60%), radial-gradient(120% 100% at 20% 100%, rgba(142,22,38,.55), transparent 60%), linear-gradient(180deg, #170909, #0c0505); box-shadow: inset 0 0 0 8px var(--bg), inset 0 0 0 9px var(--line); }
.tonight-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: clamp(30px, 5vw, 64px); }
.t-title { font-family: var(--f-disp); font-size: clamp(42px, 5.4vw, 84px); line-height: 1.45; margin-top: 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.flame-ic { width: .45em; height: auto; filter: drop-shadow(0 0 12px rgba(255,120,30,.8)); animation: flame 1.4s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scale(1.08, 1.16) translateY(-2px); } }
.artists { font-family: var(--f-lat); color: var(--gold-hi); font-size: clamp(18px, 2vw, 24px); letter-spacing: .1em; margin-top: 10px; }
.tonight .sub { color: #d8c8b8; max-width: 52ch; margin-top: 12px; }
.clock { text-align: center; padding: 28px; border: 1px solid var(--line); background: rgba(0,0,0,.35); }
.clock .t { font-family: var(--f-lat); font-size: clamp(38px, 4.4vw, 60px); color: var(--gold-hi); letter-spacing: .04em; line-height: 1.1; text-shadow: 0 0 24px rgba(255,170,60,.4); }
.clock .ap { color: var(--mute); font-size: 13.5px; margin-top: 6px; }
.clock .open { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; }
@media (max-width: 800px) { .tonight-in { grid-template-columns: minmax(0, 1fr); } }
.court { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.rite { position: relative; display: grid; align-content: end; gap: 6px; min-height: min(68vh, 560px); padding: 24px; overflow: hidden; isolation: isolate; border: 1px solid var(--line); transition: border-color .6s; }
.rite .ph { position: absolute; inset: 0; z-index: -2; background-image: var(--bgimg, none); background-color: #1a0c0a; background-size: cover; background-position: center; transform: scale(1.08); transition: transform 2s var(--ease), filter 1s; filter: saturate(1.05) brightness(.78); }
.rite::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(6,3,3,.55) 55%, rgba(6,3,3,.97)); }
.rite::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,217,142,0); transition: border-color .8s; pointer-events: none; }
.rite:hover { border-color: var(--line-hi); }
.rite:hover::after { border-color: rgba(255,217,142,.35); }
.rite:hover .ph { transform: scale(1.16); filter: saturate(1.15) brightness(.92); }
.rite h3 { font-family: var(--f-disp); font-size: clamp(30px, 2.6vw, 42px); line-height: 1.45; }
.rite p { color: #cdbfb1; font-size: 14.5px; }
.rite .go { margin-top: 8px; font-size: 14px; color: var(--gold-hi); }
@media (max-width: 1000px) { .court { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rite { min-height: 60vh; } }
@media (max-width: 560px) { .court { grid-template-columns: minmax(0, 1fr); } .rite { min-height: 54vh; } }
.number-one { position: relative; height: 200vh; }
.no1-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; padding-inline: var(--gutter); max-width: 1400px; margin-inline: auto; }
.no1-digit { justify-self: center; font-family: var(--f-lat); font-weight: 700; font-size: min(70vh, 46vw); line-height: .8; position: relative; }
.no1-digit span { display: block; color: transparent; -webkit-text-stroke: 2px rgba(255,200,120,.55); background: linear-gradient(180deg, #fff2cf, var(--gold-hi) 35%, #b07a2a 70%, #5a3c10) 0 100% / 100% calc(var(--fill, 0) * 100%) no-repeat; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 calc(var(--fill, 0) * 50px) rgba(255,150,50,.45)); transform: scale(calc(.9 + var(--fill, 0) * .1)); }
.no1-copy h2 { font-family: var(--f-disp); font-size: clamp(44px, 6vw, 96px); line-height: 1.45; margin-top: 16px; }
html[lang="en"] .no1-copy h2 { font-size: clamp(36px, 4.8vw, 76px); }
.stats { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stats li { padding: 20px 0 0; display: grid; gap: 4px; }
.stats b { font-family: var(--f-lat); font-weight: 600; font-size: clamp(38px, 4.4vw, 64px); color: var(--gold-hi); line-height: 1; }
.stats span { color: var(--mute); font-size: 14px; }
@media (max-width: 900px) { .no1-sticky { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 10px; } .no1-digit { font-size: 38vh; } .number-one { height: 170vh; } }
.board-teaser { background: radial-gradient(60% 50% at 25% 50%, rgba(142,22,38,.25), transparent 70%); }
.mini-board { position: relative; justify-self: center; width: min(460px, 86vw); aspect-ratio: 1; perspective: 900px; }
.mb-grid { position: absolute; inset: 14% 0 0; transform: rotateX(58deg) rotateZ(-30deg); transform-origin: 50% 60%; background: repeating-conic-gradient(#0b0705 0 25%, #4a3218 0 50%) 0 0 / 25% 25%; box-shadow: 0 0 0 10px #1a0f08, 0 0 0 14px #b58b3c, 0 60px 80px rgba(0,0,0,.9), 0 0 80px rgba(255,140,40,.15); }
.mb-grid::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36%; height: 36%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(rgba(255,200,110,.55), rgba(255,140,40,.15) 45%, transparent 70%); }
.mini-board::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 4%; width: 80%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,170,60,.38), rgba(255,120,30,.12) 40%, transparent 68%); pointer-events: none; animation: breathe 4s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: .6; transform: translateX(-50%) scale(.92); } }
.mb-king { position: absolute; z-index: 2; left: 50%; top: 10%; width: 44%; aspect-ratio: 4015 / 4386; transform: translateX(-50%); background: url("../img/logo-600.webp?v=8bf8c83b") center / contain no-repeat; filter: drop-shadow(0 22px 16px rgba(0,0,0,.85)); animation: hover 4s ease-in-out infinite alternate; }
@keyframes hover { to { transform: translateX(-50%) translateY(-12px); } }
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.type-card { position: relative; overflow: hidden; display: grid; gap: 12px; align-content: start; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); background: linear-gradient(180deg, #120909, var(--bg)); }
.type-card.vip { border-color: var(--line-hi); background: radial-gradient(80% 60% at 50% 0%, rgba(255,140,40,.16), transparent 70%), radial-gradient(120% 90% at 50% 30%, var(--velvet-hi), var(--velvet) 55%, #2a0509); box-shadow: inset 0 0 0 8px rgba(0,0,0,.25), inset 0 0 0 9px rgba(255,217,142,.35); }
.type-card .tag { font-family: var(--f-lat); font-size: 12px; letter-spacing: .3em; color: var(--gold-hi); }
.type-card h3 { font-family: var(--f-disp); font-size: clamp(36px, 3.6vw, 54px); line-height: 1.45; }
.type-card p { color: #d0c0b2; max-width: 44ch; }
.type-card .btn { justify-self: start; margin-top: 10px; }
@media (max-width: 760px) { .types { grid-template-columns: minmax(0, 1fr); } }
.celebrate { position: relative; overflow: hidden; border: 1px solid var(--line-hi); background: radial-gradient(70% 70% at 80% 20%, rgba(255,140,40,.18), transparent 60%), radial-gradient(120% 100% at 0% 100%, var(--velvet), transparent 60%), #0d0606; }
.celebrate-in { position: relative; z-index: 1; padding: clamp(34px, 6vw, 80px); max-width: 760px; }
.celebrate h2 { font-family: var(--f-disp); font-size: clamp(42px, 5.6vw, 86px); line-height: 1.55; margin-top: 14px; }
html[lang="en"] .celebrate h2 { font-size: clamp(34px, 4.4vw, 66px); }
.celebrate p { color: #d8c8b8; margin-top: 18px; max-width: 56ch; }
.celebrate-list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.celebrate-list li { padding: 7px 14px; border: 1px solid var(--line-hi); font-size: 14px; background: rgba(0,0,0,.3); }
.menu-card { position: relative; justify-self: center; display: grid; place-items: center; align-content: center; gap: 10px; width: min(420px, 82vw); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-hi); background: radial-gradient(circle at 50% 35%, rgba(255,170,70,.18), transparent 60%), radial-gradient(circle, #1b0c0c, #070303 70%); overflow: hidden; }
.menu-card img { width: 26%; height: auto; filter: drop-shadow(0 0 20px rgba(255,170,60,.45)); }
.menu-card .word { font-family: var(--f-lat); font-weight: 700; letter-spacing: .4em; font-size: clamp(30px, 4vw, 44px); padding-inline-start: .4em; }
.menu-card small { color: var(--mute); font-size: 12px; }
.menu-card .ring { position: absolute; inset: 7%; border-radius: 50%; border: 1px dashed rgba(255,217,142,.35); animation: spin 40s linear infinite; }
.menu-card .ring.two { inset: 13%; border-style: solid; border-color: rgba(255,217,142,.15); animation-duration: 60s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.loc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 60px); align-items: stretch; }
.info-list { list-style: none; margin: 0; padding: 0; display: grid; }
.info-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.info-list li > svg { width: 24px; height: 24px; color: var(--gold); margin-top: 4px; }
.info-list b { display: block; font-weight: 400; color: var(--mute); font-size: 13.5px; }
.info-list span, .info-list .val { font-size: 16.5px; }
.info-list .val:hover { color: var(--gold-hi); }
.map { position: relative; min-height: 380px; border: 1px solid var(--line-hi); overflow: hidden; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4) contrast(1.05); }
.map-facade { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; cursor: pointer; background: #0d0707; }
.map-facade .streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-facade .pin { position: absolute; left: 44%; top: 50%; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 6px; font-family: var(--f-lat); letter-spacing: .2em; font-size: 12px; color: var(--gold-hi); }
.map-facade .pin svg { width: 46px; height: 46px; filter: drop-shadow(0 0 14px rgba(255,170,60,.7)); animation: hover 1.6s ease-in-out infinite alternate; }
.map-facade .load { position: absolute; inset-inline: 0; bottom: 18px; display: flex; justify-content: center; }
.map-facade .load b { font-weight: 400; font-size: 13.5px; padding: 8px 16px; border: 1px solid var(--line-hi); background: rgba(0,0,0,.6); }
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-hi); transition: border-color .4s, color .4s, transform .4s var(--ease); }
.socials a:hover { border-color: var(--gold-hi); color: var(--gold-hi); transform: translateY(-3px); }
.socials svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .loc { grid-template-columns: minmax(0, 1fr); } }
.page-head { position: relative; overflow: hidden; padding: calc(env(safe-area-inset-top, 0px) + 150px) 0 clamp(60px, 8vw, 100px); border-bottom: 1px solid var(--line); isolation: isolate; }
.ph-bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(6,3,3,.55), rgba(6,3,3,.85) 70%, var(--bg)), url("../img/ph-d.webp?v=5564b09d") center 40% / cover no-repeat; filter: saturate(.9); }
@media (max-aspect-ratio: 1/1) { .ph-bg { background-image: linear-gradient(180deg, rgba(6,3,3,.55), rgba(6,3,3,.85) 70%, var(--bg)), url("../img/ph-m.webp?v=8b5ac357"); background-position: center 30%; } }
.ph-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 0%, rgba(255,140,40,.18), transparent 70%); }
.page-head .embers { z-index: -1; }
.page-head .kicker { display: block; margin-top: 20px; }
.page-head h1 { font-family: var(--f-disp); font-size: clamp(50px, 8vw, 120px); line-height: 1.45; margin-top: 10px; }
html[lang="en"] .page-head h1 { font-size: clamp(40px, 6.4vw, 96px); }
.page-head p { color: #d8c8b8; max-width: 58ch; margin-top: 16px; font-size: clamp(15px, 1.4vw, 18px); }
.crumbs { display: flex; gap: 10px; font-size: 13.5px; color: var(--mute); }
.crumbs a:hover { color: var(--gold-hi); }
.chess { position: relative; height: 380vh; }
.chess-sticky { --sq: min(8.6vmin, 76px); --by: 60%; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate;
background: radial-gradient(60% 50% at 50% var(--by), rgba(255,150,50,calc(.08 + var(--win, 0) * .2)), transparent 70%), radial-gradient(90% 70% at 50% 0%, rgba(142,22,38,.35), transparent 70%), radial-gradient(100% 80% at 50% 0%, #170a09, var(--bg) 70%); }
.chess-space { position: absolute; inset: 0; z-index: 2; perspective: 1300px; perspective-origin: 50% 20%; }
.board { position: absolute; left: 50%; top: var(--by); width: calc(var(--sq) * 8); height: calc(var(--sq) * 8); margin: calc(var(--sq) * -4) 0 0 calc(var(--sq) * -4); transform-style: preserve-3d;
transform: scale(var(--zoom, 1)) rotateX(var(--tilt, 58deg)) rotateZ(var(--rz, -30deg)) translate(calc(var(--sq) * -.5), calc(var(--sq) * -.5));
background: radial-gradient(circle at 56.25% 56.25%, rgba(255,214,140,calc(.18 + var(--win, 0) * .3)), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.06), transparent 40%, rgba(255,255,255,.04) 60%, transparent), repeating-conic-gradient(#0b0605 0 25%, #5c3a1c 0 50%) 0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
box-shadow: 0 0 0 calc(var(--sq) * .14) #1a0d08, 0 0 0 calc(var(--sq) * .2) #b58b3c, 0 0 0 calc(var(--sq) * .32) #120806, 0 40px 120px rgba(0,0,0,.9); }
.pc { position: absolute; left: calc(var(--x) * var(--sq)); top: calc(var(--y) * var(--sq)); width: var(--sq); height: var(--sq); transform-style: preserve-3d; }
.pc::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.75), transparent 70%); opacity: calc(1 - var(--f, 0)); }
.pc.king::before { inset: 0; background: radial-gradient(rgba(255,214,140,calc(.25 + var(--win, 0) * .5)), transparent 70%); }
.fig { position: absolute; width: calc(var(--sq) * var(--k, 1)); height: calc(var(--sq) * 1.8 * var(--k, 1)); left: calc(50% - var(--sq) * var(--k, 1) / 2); bottom: 50%; overflow: visible; transform-origin: 50% 100%;
transform: rotateZ(calc(-1 * var(--rz, -30deg))) rotateX(calc((var(--f, 0) - 1) * var(--tilt, 58deg))) rotateY(calc(var(--f, 0) * var(--tw, 20deg))); opacity: calc(1 - var(--f, 0)); }
.king .fig { filter: drop-shadow(0 0 calc(4px + var(--win, 0) * 26px) rgba(255,214,140,.7)); }
.chess-crest { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 84px); z-index: 6; width: min(20vmin, 180px); height: auto; transform: translateX(-50%) translateY(calc((1 - var(--cr, 0)) * -20px)) scale(calc(.85 + var(--cr, 0) * .15)); opacity: var(--cr, 0); filter: drop-shadow(0 0 30px rgba(255,190,110,.5)) drop-shadow(0 20px 30px rgba(0,0,0,.8)); }
.chess-dust { z-index: 5; }
.chess-intro { position: absolute; inset-inline: 0; top: calc(env(safe-area-inset-top, 0px) + 92px); z-index: 7; text-align: center; padding-inline: var(--gutter); display: grid; gap: 8px; justify-items: center; opacity: var(--intro, 1); }
.chess-intro .crumbs { justify-content: center; }
.chess-intro h1 { font-family: var(--f-disp); font-size: clamp(30px, 4.2vw, 62px); line-height: 1.5; text-shadow: 0 4px 24px rgba(0,0,0,.9); }
html[lang="en"] .chess-intro h1 { font-size: clamp(24px, 3.4vw, 48px); }
.chess-intro h1 span { color: var(--gold-hi); }
.count { font-size: 15px; color: #d8cabb; }
.count b { font-family: var(--f-disp); font-size: 26px; color: var(--gold-hi); font-weight: 400; }
html[lang="en"] .count b { font-family: var(--f-lat); font-size: 22px; }
.chess-cue { z-index: 7; }
@media (max-width: 900px) { .chess-sticky { --sq: min(10.6vmin, 60px); --by: 54%; } .chess-crest { width: 28vw; } .chess { height: 340vh; } }
.squares { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--gold-deep); box-shadow: 0 0 0 6px var(--ink), 0 0 0 7px var(--gold-deep), 0 40px 80px -30px #000; }
.sq { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; text-align: center; padding: 38px 10px 24px; min-height: 280px; transition: background .5s; }
.sq:nth-child(odd) { background: #0d0706; }
.sq:nth-child(even) { background: #2b1b10; }
.sq .nt { position: absolute; top: 10px; inset-inline-start: 12px; font-family: var(--f-lat); font-size: 12px; color: var(--gold); opacity: .75; }
.sq .pz-s { width: 30px; height: 54px; margin-bottom: 6px; }
.sq .pz-s svg { width: 100%; height: 100%; }
.sq .d { font-family: var(--f-disp); font-size: 25px; line-height: 1.3; }
html[lang="en"] .sq .d { font-size: 18px; }
.sq .dt { font-size: 13px; color: var(--mute); }
.sq .tg { font-size: 12px; color: var(--gold-hi); }
.sq .ar-s { font-family: var(--f-lat); font-size: 12px; color: var(--gold-hi); letter-spacing: .06em; }
.sq.today { background: linear-gradient(180deg, #4a1a14, #1c0b08) !important; box-shadow: inset 0 0 0 1px var(--gold-hi), inset 0 0 50px rgba(255,140,40,.25); }
.sq.today .tg { color: var(--fire); }
.sq:hover { background: #3a2414; }
.sq .btn { margin-top: 10px; }
.note-line { margin-top: 30px; color: var(--mute); font-size: 14px; max-width: 70ch; }
@media (max-width: 1100px) { .squares { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .squares { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sq { min-height: 240px; } .sq:nth-child(4n+2), .sq:nth-child(4n+3) { background: #2b1b10; } .sq:nth-child(4n+1), .sq:nth-child(4n) { background: #0d0706; } }
.pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.piece-card { position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 24px 34px; border: 1px solid var(--line); background: linear-gradient(180deg, #160b09, var(--bg)); transition: border-color .5s; }
.piece-card::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(rgba(217,169,78,.07) 0 25%, transparent 0 50%) 0 0 / 56px 56px; -webkit-mask: linear-gradient(180deg, #000, transparent 60%); mask: linear-gradient(180deg, #000, transparent 60%); pointer-events: none; }
.piece-card:hover { border-color: var(--line-hi); }
.piece-card .pz { position: relative; width: 92px; height: 166px; transition: transform 1.1s var(--ease); filter: drop-shadow(0 18px 20px rgba(0,0,0,.7)) drop-shadow(0 0 20px rgba(255,170,60,.25)); }
.piece-card .pz svg { width: 100%; height: 100%; }
.piece-card:hover .pz { transform: rotateY(360deg); }
.piece-card h3 { font-family: var(--f-disp); font-size: 36px; line-height: 1.5; }
.piece-card p { position: relative; color: var(--mute); font-size: 15px; max-width: 32ch; }
@media (max-width: 860px) { .pieces { grid-template-columns: minmax(0, 1fr); } }
.social-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.social-card { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, #140909, var(--bg)); transition: border-color .5s; }
.social-card:hover { border-color: var(--line-hi); }
.social-card .brand { width: 34px; height: 34px; color: var(--gold-hi); }
.social-card b { display: block; font-weight: 500; }
.social-card span { color: var(--mute); font-size: 14px; }
@media (max-width: 900px) { .social-cards { grid-template-columns: minmax(0, 1fr); } }
.book { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
.field { display: grid; gap: 8px; min-width: 0; align-content: start; }
.field.full { grid-column: 1 / -1; }
.field > label, .field .lbl { font-size: 13.5px; color: var(--mute); }
.field i { color: var(--fire); font-style: normal; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; background: rgba(255,255,255,.02); border: 0; border-bottom: 1px solid var(--line-hi); padding: 10px 2px 12px; font-family: var(--f-ar); font-size: 18px; font-weight: 400; border-radius: 0; transition: border-color .4s, background .4s; appearance: none; -webkit-appearance: none; color-scheme: dark; }
html[lang="en"] .field input:not([type="checkbox"]):not([type="radio"]), html[lang="en"] .field select, html[lang="en"] .field textarea { font-family: var(--f-body); font-size: 17px; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(-45deg, transparent 50%, var(--gold) 50%); background-position: 8px 55%, 2px 55%; background-size: 6px 6px; background-repeat: no-repeat; cursor: pointer; padding-inline-start: 20px; }
html[dir="ltr"] .field select { background-position: calc(100% - 2px) 55%, calc(100% - 8px) 55%; padding-inline-start: 2px; padding-inline-end: 20px; }
.field select option { background: #140a0a; font-family: var(--f-body); font-size: 15px; }
.field textarea { min-height: 90px; resize: vertical; font-size: 17px; font-family: var(--f-body); }
.field input::placeholder, .field textarea::placeholder { color: #5f5048; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-hi); background: rgba(255,217,142,.04); }
.field input[type="tel"] { direction: ltr; text-align: right; font-family: var(--f-lat) !important; letter-spacing: .04em; }
html[dir="ltr"] .field input[type="tel"] { text-align: left; }
.field.invalid input, .field.invalid select { border-color: #e0604e; }
.err { color: #f08a78; font-size: 13px; min-height: 1em; }
.seg { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; clip-path: inset(50%); }
.seg label { position: relative; cursor: pointer; display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); background: rgba(255,255,255,.015); transition: border-color .5s, background .5s; }
.seg label b { font-family: var(--f-disp); font-weight: 400; font-size: 30px; line-height: 1.5; color: #8b7d72; transition: color .5s; }
html[lang="en"] .seg label b { font-size: 22px; }
.seg label span { font-size: 12.5px; color: var(--mute); }
.seg input:checked + label { border-color: var(--gold); background: linear-gradient(180deg, rgba(142,22,38,.5), rgba(92,12,22,.15)); }
.seg input:checked + label b { color: var(--gold-hi); }
.seg input:focus-visible + label { outline: 1.5px solid var(--gold-hi); outline-offset: 3px; }
.stepper { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-hi); padding: 6px 0 10px; }
.stepper button { width: 40px; height: 40px; border: 1px solid var(--line-hi); border-radius: 50%; background: none; cursor: pointer; font-size: 18px; transition: border-color .4s, color .4s; }
.stepper button:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.stepper output { font-family: var(--f-lat); font-size: 28px; color: var(--gold-hi); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #cbbcae; cursor: pointer; }
.consent input { width: 20px; height: 20px; flex: none; margin-top: 4px; accent-color: var(--gold); }
.consent a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.submit-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.submit-row .btn { padding: 17px 32px; font-size: 16px; }
.submit-row .alt { color: var(--mute); font-size: 14px; }
.submit-row .alt a { color: var(--gold-hi); }
@media (max-width: 960px) { .book { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .form { grid-template-columns: minmax(0, 1fr); } }
.decree-wrap { position: sticky; top: 110px; }
.decree { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 12px; padding: 40px 30px 30px; text-align: center;
background: radial-gradient(80% 50% at 50% 0%, rgba(255,140,40,.2), transparent 70%), radial-gradient(120% 90% at 50% 30%, var(--velvet-hi), var(--velvet) 55%, #2a0509); box-shadow: inset 0 0 0 1px rgba(255,217,142,.5), inset 0 0 0 9px #2a0509, inset 0 0 0 10px rgba(255,217,142,.35), 0 40px 80px -30px #000; }
.decree::before { content: ""; position: absolute; inset: 0; opacity: .22; background: repeating-linear-gradient(115deg, rgba(0,0,0,.3) 0 2px, transparent 2px 5px); pointer-events: none; }
.decree > img { position: relative; width: 84px; height: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
.decree .kicker { position: relative; color: var(--gold-hi); }
.decree dl { position: relative; margin: 8px 0 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; text-align: start; border-top: 1px solid rgba(255,217,142,.3); padding-top: 18px; }
.decree dl .wide { grid-column: 1 / -1; text-align: center; }
.decree dt { font-size: 12.5px; color: #e0c7b0; }
.decree dd { margin: 0; font-size: 16px; color: #fff3e2; font-weight: 400; }
.decree dd.big { font-family: var(--f-disp); font-size: clamp(32px, 3.4vw, 46px); line-height: 1.5; padding-inline: .3em; background: linear-gradient(100deg, #e8c07a, #fff2cf 45%, #e8c07a); -webkit-background-clip: text; background-clip: text; color: transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decree .ref { position: relative; display: flex; justify-content: space-between; width: 100%; border-top: 1px dashed rgba(255,217,142,.35); padding-top: 14px; font-size: 13px; color: #e0c7b0; }
.decree .ref b { font-family: var(--f-lat); color: var(--gold-hi); letter-spacing: .08em; }
.seal { position: absolute; bottom: 64px; inset-inline-start: 18px; width: 96px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 47% 53% 50% 50% / 52% 46% 54% 48%; background: radial-gradient(circle at 36% 30%, #ffe7a6, #d49a3c 45%, #6b4210 85%); box-shadow: inset 6px 8px 14px rgba(255,255,255,.25), inset -8px -10px 16px rgba(0,0,0,.4), 0 10px 20px rgba(0,0,0,.6); opacity: 0; transform: scale(2.4) rotate(-30deg); pointer-events: none; }
.seal::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; box-shadow: inset 2px 2px 4px rgba(0,0,0,.4), inset -2px -2px 3px rgba(255,255,255,.2); }
.seal span { position: relative; font-family: var(--f-lat); font-weight: 700; font-size: 17px; color: #4a2c08; text-shadow: 1px 1px 0 rgba(255,255,255,.3); }
.decree.sealed .seal { animation: seal .7s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes seal { 0% { opacity: 0; transform: scale(2.4) rotate(-30deg); } 60% { opacity: 1; transform: scale(.92) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(-12deg); } }
.ticket-note { color: var(--mute); font-size: 13.5px; margin-top: 18px; text-align: center; }
@media (max-width: 960px) { .decree-wrap { position: relative; top: 0; } .decree { padding: 30px 22px 24px; } }
.done { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(4,2,2,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fade .5s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.done-card { position: relative; width: min(520px, 100%); display: grid; justify-items: center; gap: 12px; text-align: center; padding: 40px 28px 30px; border: 1px solid var(--line-hi); background: radial-gradient(80% 50% at 50% 0%, rgba(255,140,40,.2), transparent 70%), linear-gradient(180deg, #1a0a0a, #0b0505); box-shadow: 0 40px 80px rgba(0,0,0,.7); animation: rise .8s var(--ease); }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
.crest-ok img { width: 82px; height: auto; filter: drop-shadow(0 0 26px rgba(255,170,60,.7)); animation: hover 2s ease-in-out infinite alternate; }
.done-card h2 { font-family: var(--f-disp); font-size: 40px; line-height: 1.45; }
.done-card p { color: #d8c8b8; font-size: 15px; }
.done-card .ref { font-family: var(--f-lat); font-size: 20px; color: var(--gold-hi); letter-spacing: .1em; }
.done-card .acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.toc { position: sticky; top: 110px; display: grid; gap: 2px; border-inline-start: 1px solid var(--line); }
.toc a { padding: 7px 16px; font-size: 14px; color: var(--mute); border-inline-start: 2px solid transparent; margin-inline-start: -1px; transition: color .3s, border-color .3s; }
.toc a:hover { color: var(--gold-hi); border-color: var(--gold); }
.prose { max-width: 760px; }
.prose h2 { font-family: var(--f-disp); font-size: clamp(28px, 3vw, 38px); line-height: 1.55; margin: 42px 0 12px; color: var(--gold-hi); }
html[lang="en"] .prose h2 { font-size: clamp(22px, 2.4vw, 28px); }
.prose p, .prose li { color: #d6c8bb; }
.prose p + p { margin-top: 12px; }
.prose ul { padding-inline-start: 22px; margin: 10px 0; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--gold); }
.prose a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.updated { color: var(--mute); font-size: 13.5px; }
@media (max-width: 860px) { .legal { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }
.nf { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter) 60px; overflow: hidden; background: radial-gradient(60% 50% at 50% 60%, rgba(142,22,38,.35), transparent 70%); }
.nf > div { position: relative; display: grid; justify-items: center; gap: 14px; }
.nf .code { font-family: var(--f-lat); font-size: clamp(110px, 20vw, 240px); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px rgba(255,200,120,.55); }
.nf h1 { font-family: var(--f-disp); font-size: clamp(40px, 6vw, 80px); line-height: 1.45; }
.nf p { color: var(--mute); max-width: 46ch; }
.cta-band { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(90px, 12vw, 150px) !important; text-align: center; border-top: 1px solid var(--line); }
.cta-band .cta-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 50% 45%, rgba(6,3,3,.35), rgba(6,3,3,.92) 75%), linear-gradient(180deg, var(--bg), transparent 30%, transparent 70%, var(--bg)), var(--bgimg, none) center 35% / cover no-repeat; transform: scale(calc(1.12 - var(--cp, 0) * .12)); }
.cta-band .inner { display: grid; justify-items: center; gap: 10px; }
.cta-band h2 { font-family: var(--f-disp); font-size: clamp(54px, 9vw, 140px); line-height: 1.5; margin-top: 8px; filter: drop-shadow(0 8px 30px rgba(0,0,0,.9)); }
html[lang="en"] .cta-band h2 { font-size: clamp(40px, 6.6vw, 104px); }
.cta-band p { color: #e6d6c4; max-width: 46ch; text-shadow: 0 2px 12px #000; }
.cta-band .actions { justify-content: center; }
.site-foot { position: relative; overflow: hidden; padding-top: 30px; background: radial-gradient(50% 60% at 50% 100%, rgba(255,110,30,.14), transparent 70%), var(--bg); border-top: 1px solid var(--line); }
.giant { font-family: var(--f-lat); font-weight: 600; font-size: clamp(110px, 27vw, 420px); line-height: .85; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(255,200,120,.3); white-space: nowrap; user-select: none; transform: translateY(calc((1 - var(--fp, 1)) * 80px)); opacity: calc(.4 + var(--fp, 1) * .6); }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-block: 50px 40px; border-top: 1px solid var(--line); }
.brand-col img { width: 70px; height: auto; margin-bottom: 16px; }
.brand-col p { color: var(--mute); font-size: 14.5px; max-width: 40ch; margin-bottom: 18px; }
.foot h3 { font-family: var(--f-lat); font-size: 12px; letter-spacing: .3em; color: var(--gold); margin-bottom: 14px; font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: #d0c2b4; }
.foot ul a:hover { color: var(--gold-hi); }
.foot-lang { color: var(--gold-hi); }
.foot-bottom { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-block: 22px calc(env(safe-area-inset-bottom, 0px) + 26px); border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.foot-bottom nav { display: flex; gap: 20px; }
.foot-bottom a:hover { color: var(--gold-hi); }
@media (max-width: 900px) { .foot { grid-template-columns: 1fr 1fr; } .brand-col { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot { grid-template-columns: minmax(0, 1fr); } }
.wa-float { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); inset-inline-start: 18px; z-index: 55; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: var(--gold-hi); isolation: isolate;
background: radial-gradient(circle at 35% 30%, #2a1408, #0c0505 70%); box-shadow: inset 0 0 0 1.5px rgba(255,217,142,.85), inset 0 0 0 5px #0c0505, inset 0 0 0 6px rgba(255,217,142,.3), 0 12px 30px rgba(0,0,0,.6), 0 0 26px -4px rgba(255,140,40,.55); transition: transform .5s var(--ease), box-shadow .5s; }
.wa-float::before { content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: 50%; border: 1px solid rgba(255,217,142,.5); animation: wa-ring 2.8s var(--ease) infinite; }
.wa-float:hover { transform: scale(1.08); box-shadow: inset 0 0 0 1.5px var(--gold-hi), inset 0 0 0 5px #0c0505, inset 0 0 0 6px rgba(255,217,142,.5), 0 12px 30px rgba(0,0,0,.6), 0 0 40px rgba(255,150,50,.75); }
.wa-float svg { width: 27px; height: 27px; filter: drop-shadow(0 0 6px rgba(255,190,90,.55)); }
@keyframes wa-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
body[data-page="home"] .wa-float, body[data-page="events"] .wa-float { opacity: var(--waf, 0); pointer-events: var(--wap, none); transition: opacity .5s; }
.cur { position: fixed; z-index: 95; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(255,217,142,.6); border-radius: 50%; pointer-events: none; transform: translate(var(--cx, -100px), var(--cy, -100px)); transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .4s; }
.cur.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255,170,60,.16); border-color: rgba(255,217,142,.9); }
@media (pointer: coarse) { .cur { display: none; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.js .rv { opacity: 1; transform: none; }
.js .split-h .w > span { transform: none; }
}
.booth { position: relative; overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(18px, 2.4vw, 28px);
background: radial-gradient(40% 140% at 12% 50%, rgba(142,22,38,calc(.28 + var(--beat, 0) * .25)), transparent 70%), radial-gradient(40% 140% at 88% 50%, rgba(255,122,28,calc(.04 + var(--beat, 0) * .1)), transparent 70%), var(--ink); }
.booth-in { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2.6vw, 34px); }
.deck { position: relative; width: clamp(68px, 7.4vw, 100px); aspect-ratio: 1; flex: none; }
.platter { position: absolute; inset: 4%; border-radius: 50%; background: #120c0a;
box-shadow: inset 0 0 0 1.5px rgba(255,217,142,.6), 0 10px 24px rgba(0,0,0,.7), 0 0 calc(10px + var(--beat, 0) * 26px) rgba(255,140,40,calc(.2 + var(--beat, 0) * .45)); }
.platter::after { content: ""; position: absolute; inset: 5%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
background: conic-gradient(from 210deg, transparent 0 8%, rgba(255,217,142,.22) 13%, transparent 19% 50%, rgba(255,217,142,.14) 62%, transparent 69%); }
.vinyl { position: absolute; inset: 5%; border-radius: 50%; will-change: transform;
background: repeating-radial-gradient(circle, #0c0808 0 .8px, #1d1412 1.1px 1.7px), #0c0808; box-shadow: inset 0 0 12px rgba(0,0,0,.9); }
.vinyl-label { position: absolute; inset: 29%; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
background: radial-gradient(circle at 50% 38%, #8e1626, #4a0910 75%); box-shadow: inset 0 0 0 1px rgba(255,217,142,.85); }
.vinyl-label img { width: 62%; height: auto; }
.tonearm { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
.tonearm .arm { transform-origin: 92px 8px; transition: transform 1.2s var(--ease); }
.deck.on .tonearm .arm { transform: rotate(20deg); }
.booth-t { display: grid; gap: 4px; min-width: 0; }
.booth-t .kicker { font-size: 10px; }
.booth-h { font-family: var(--f-disp); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.6; white-space: nowrap; }
html[lang="en"] .booth-h { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.4; }
.booth-t small { font-size: 10.5px; letter-spacing: .2em; color: var(--mute); }
.booth-wave { width: 100%; height: clamp(46px, 5vw, 64px); display: block; }
.play-btn svg { width: 16px; height: 16px; }
.play-btn .pb-ic { display: inline-grid; }
.play-btn .pb-pause, .dj-on .play-btn .pb-play { display: none; }
.dj-on .play-btn .pb-pause { display: inline-grid; }
.play-btn::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--gold-hi); opacity: 0; pointer-events: none; }
html:not(.dj-on) .play-btn::after { animation: pb-pulse 2.6s var(--ease) infinite; }
@keyframes pb-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.4); } }
.np-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.np-eq i { display: block; width: 3px; height: 100%; background: currentColor; transform-origin: bottom; transform: scaleY(.35); transition: transform .3s; }
.np-eq i:nth-child(2) { transform: scaleY(.7); } .np-eq i:nth-child(3) { transform: scaleY(1); } .np-eq i:nth-child(4) { transform: scaleY(.55); } .np-eq i:nth-child(5) { transform: scaleY(.3); }
.dj-on .np-eq i { animation: eq .9s ease-in-out infinite alternate; }
.dj-on .np-eq i:nth-child(2) { animation-duration: .62s; animation-delay: -.2s; }
.dj-on .np-eq i:nth-child(3) { animation-duration: .78s; animation-delay: -.5s; }
.dj-on .np-eq i:nth-child(4) { animation-duration: .54s; animation-delay: -.1s; }
.dj-on .np-eq i:nth-child(5) { animation-duration: .7s; animation-delay: -.35s; }
@keyframes eq { 0% { transform: scaleY(.2); } 100% { transform: scaleY(1); } }
.dj-on .snd-btn { color: var(--gold-hi); border-color: var(--gold-hi); }
.dj-mini { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); inset-inline-end: 18px; z-index: 55; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; color: var(--gold-hi);
background: radial-gradient(circle at 35% 30%, #2a1408, #0c0505 70%); box-shadow: inset 0 0 0 1.5px rgba(255,217,142,.85), inset 0 0 0 5px #0c0505, inset 0 0 0 6px rgba(255,217,142,.3), 0 12px 30px rgba(0,0,0,.6), 0 0 26px -4px rgba(255,140,40,.55);
opacity: 0; pointer-events: none; transform: translateY(20px) scale(.9); transition: opacity .5s, transform .6s var(--ease); }
.dj-mini.show { opacity: 1; pointer-events: auto; transform: none; }
.dj-mini-disc { position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle, #ffd98e 0 8%, #8e1626 9% 30%, transparent 31%), repeating-radial-gradient(circle, #0c0808 0 1px, #221715 1.5px 2.2px); opacity: .9; }
.dj-on .dj-mini-disc { animation: spin 1.8s linear infinite; }
.dj-mini .np-eq { position: relative; height: 14px; filter: drop-shadow(0 0 3px #000); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
.booth-in { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 10px; }
.booth-wave { grid-column: 1 / -1; grid-row: 2; height: 38px; }
.booth-t .bpm { display: none; } .booth-h { white-space: normal; }
.play-btn { width: 50px; height: 50px; padding: 0; border-radius: 50%; }
.play-btn .pb-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.play-btn::after { border-radius: 50%; }
}
@media (max-width: 560px) { .snd-btn { width: 40px; } }
@media (prefers-reduced-motion: reduce) { .dj-on .np-eq i, .dj-on .dj-mini-disc, html:not(.dj-on) .play-btn::after { animation: none; } .dj-on .np-eq i { transform: scaleY(.7); } }
.gm { --gm-ease: cubic-bezier(.19, 1, .22, 1); color: var(--gm-text); }
.gm em { font-style: normal; color: var(--gm-hi); }
.gm .ltr { direction: ltr; unicode-bidi: isolate; }
.gm-kick { display: inline-block; font-family: var(--gm-lat); font-size: 11.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--gm-hi); }
.gm-cover { position: relative; height: 220vh; }
.gm-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; perspective: 1800px; padding: 90px var(--gm-gut) 30px; overflow: hidden; }
.gm-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 45%, var(--gm-glow), transparent 70%), var(--gm-bg); }
.gm-book { position: relative; width: min(420px, 74vw, 52vh); aspect-ratio: 3 / 4.1; transform: rotateX(calc(14deg * (1 - var(--o, 0)))) rotateZ(calc(-4deg * (1 - var(--o, 0)))) translateX(calc(var(--o, 0) * var(--shift, 50%))) scale(calc(1 + var(--o, 0) * .06)); transform-style: preserve-3d; }
html[dir="rtl"] .gm-book { --shift: -50%; }
@media (max-width: 700px) { .gm-book, html[dir="rtl"] .gm-book { --shift: 0%; } }
.gm-page, .gm-leaf { position: absolute; inset: 0; border-radius: 6px 14px 14px 6px; }
.gm-page { display: grid; align-content: center; justify-items: center; gap: 12px; padding: 30px 26px; text-align: center; background: radial-gradient(120% 80% at 50% 0%, var(--gm-ink-2), var(--gm-ink) 70%); box-shadow: inset 0 0 0 1px var(--gm-line-hi), inset 0 0 0 10px var(--gm-ink), inset 0 0 0 11px var(--gm-line), 0 30px 60px rgba(0,0,0,.6); }
.gm-page h1 { font-family: var(--gm-disp); font-weight: 400; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.35; color: var(--gm-text); }
.gm-page p { color: var(--gm-mute); font-size: 14px; max-width: 26ch; }
.gm-page .gm-stats { display: flex; gap: 22px; margin-top: 10px; }
.gm-page .gm-stats b { display: block; font-family: var(--gm-lat); font-size: 32px; line-height: 1.1; color: var(--gm-hi); }
.gm-page .gm-stats span { font-size: 11.5px; color: var(--gm-mute); }
.gm-leaf { transform-origin: left center; transform: rotateY(calc(var(--o, 0) * -168deg)); transform-style: preserve-3d; }
html[dir="rtl"] .gm-leaf { transform-origin: right center; transform: rotateY(calc(var(--o, 0) * 168deg)); }
.gm-leaf > div { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gm-front { display: grid; place-items: center; align-content: center; gap: 16px; padding: 26px; text-align: center; background: var(--gm-cover); box-shadow: inset 0 0 0 1px var(--gm-line-hi), inset 0 0 0 12px var(--gm-ink), inset 0 0 0 13px var(--gm-line-hi), 0 40px 80px rgba(0,0,0,.65); }
.gm-front img { width: 58%; height: auto; filter: drop-shadow(0 0 22px var(--gm-glow)) drop-shadow(0 10px 20px rgba(0,0,0,.6)); }
.gm-front em { font-family: var(--gm-lat); font-size: clamp(16px, 1.8vw, 20px); letter-spacing: .2em; color: var(--gm-text); }
.gm-back { transform: rotateY(180deg); background: linear-gradient(160deg, var(--gm-ink-2), var(--gm-ink)); box-shadow: inset 0 0 0 1px var(--gm-line); display: grid; place-items: center; }
.gm-back img { width: 40%; height: auto; opacity: .18; }
.gm-hint { position: absolute; bottom: 5vh; left: 0; right: 0; text-align: center; font-size: 15px; color: var(--gm-text); opacity: calc(.85 - var(--o, 0) * 2); }
.gm-plates-sec { position: relative; padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 110px); overflow: hidden; }
.gm-head { text-align: center; padding-inline: var(--gm-gut); }
.gm-head h2 { font-family: var(--gm-disp); font-weight: 400; font-size: clamp(30px, 4vw, 52px); line-height: 1.4; margin-top: 8px; }
.gm-plates { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 3vw, 46px); margin-top: clamp(30px, 5vw, 60px); padding-inline: var(--gm-gut); }
.gm-plate { position: relative; flex: 0 0 auto; width: clamp(150px, 17vw, 240px); display: grid; justify-items: center; gap: 12px; text-align: center; transform: translate(var(--px, 0), var(--py, 0)); color: var(--gm-text); }
.gm-plates .gm-plate:nth-child(even) { margin-top: clamp(30px, 5vw, 70px); }
.gm-disc { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; color: var(--gm-hi); transition: transform .8s var(--gm-ease); transform: perspective(700px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.gm-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: gmSpin 60s linear infinite; }
.gm-plate:nth-child(even) .gm-ring { animation-direction: reverse; }
@keyframes gmSpin { to { transform: rotate(360deg); } }
.gm-bowl { position: absolute; inset: 15%; border-radius: 50%; overflow: hidden; background: var(--gm-metal-1); box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.25); }
.gm-bowl::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: var(--gm-metal-2); box-shadow: inset 0 6px 18px rgba(0,0,0,.6), inset 0 -2px 6px rgba(255,255,255,.2); }
.gm-dish { position: absolute; inset: 11%; border-radius: 50%; background: #f1efe9 center / cover no-repeat; transform: scale(.7) rotate(-30deg); opacity: 0; transition: transform 1s var(--gm-ease), opacity .6s; box-shadow: inset 0 0 18px rgba(0,0,0,.35); }
.gm-lid { position: absolute; inset: 9%; border-radius: 50%; background: var(--gm-metal-lid); box-shadow: inset 0 -6px 16px rgba(0,0,0,.35), inset 0 4px 10px rgba(255,255,255,.55), 0 6px 14px rgba(0,0,0,.35); transition: transform 1s var(--gm-ease), opacity .8s; }
.gm-lid::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--gm-metal-knob); box-shadow: 0 4px 8px rgba(0,0,0,.4); }
@media (hover: none) { .gm-plate:is(:hover, :focus-visible):not(.open) .gm-lid { transform: none; opacity: 1; } .gm-plate:is(:hover, :focus-visible):not(.open) .gm-dish { transform: scale(.7) rotate(-30deg); opacity: 0; } }
.gm-plate:is(:hover, :focus-visible, .open) .gm-lid { transform: translate(28%, -62%) rotate(20deg) scale(.86); opacity: 0; }
.gm-plate:is(:hover, :focus-visible, .open) .gm-dish { transform: none; opacity: 1; }
.gm-plate:is(:hover, :focus-visible) .gm-disc { --tx: 8deg; }
.gm-plate b { font-family: var(--gm-disp); font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; }
.gm-plate small { display: block; font-size: 12.5px; color: var(--gm-mute); line-height: 1.6; }
@media (max-width: 760px) { .gm-plates { flex-wrap: wrap; } .gm-plates .gm-plate { width: 40vw; } .gm-plates .gm-plate:nth-child(even) { margin-top: 0; } }
.gm-home-plates { display: flex; justify-content: center; align-items: flex-start; gap: clamp(8px, 2.4vw, 34px); }
.gm-home-plates .gm-plate { flex: 1 1 0; min-width: 0; width: auto; max-width: 190px; gap: 10px; }
.gm-home-plates .gm-plate:nth-child(even) { margin-top: clamp(14px, 3vw, 40px); }
.gm-home-plates .gm-plate b { font-size: clamp(16px, 1.6vw, 22px); }
.gm-home-plates .gm-plate small { font-size: 11.5px; }
@media (max-width: 700px) { .gm-home-plates .gm-plate:nth-child(n+4) { display: none; } }
.gm-body { max-width: var(--gm-max); margin-inline: auto; padding: 0 var(--gm-gut) clamp(60px, 8vw, 110px); }
.gm-explore { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; }
.gm-explore h2 { font-family: var(--gm-disp); font-weight: 400; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.4; margin-top: 8px; }
.gm-explore p { color: var(--gm-mute); max-width: 56ch; margin-top: 8px; }
.gm-explore .gm-stats { display: flex; gap: clamp(18px, 3vw, 40px); }
.gm-explore .gm-stats div { display: grid; gap: 2px; }
.gm-explore .gm-stats b { font-family: var(--gm-lat); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); color: var(--gm-hi); line-height: 1.1; }
.gm-explore .gm-stats span { font-family: var(--gm-lat); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gm-mute); }
.gm-live b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3be07a; margin-inline-end: 8px; vertical-align: middle; animation: gmPulse 2s infinite; }
@keyframes gmPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 800px) { .gm-explore { grid-template-columns: minmax(0, 1fr); } }
.gm-finder { position: sticky; top: var(--gm-top, 78px); z-index: 30; margin-top: 30px; padding: 14px; border-radius: 22px; background: var(--gm-glass); border: 1px solid var(--gm-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gm-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--gm-line-hi); background: rgba(255,255,255,.03); }
.gm-search svg { width: 18px; height: 18px; color: var(--gm-mute); flex: none; }
.gm-search input { flex: 1; min-width: 0; padding: 12px 0; background: none; border: 0; outline: none; font-size: 15px; color: var(--gm-text); color-scheme: dark; }
.gm-search input::placeholder { color: var(--gm-mute); opacity: .8; }
.gm-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; padding-bottom: 2px; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.gm-chips::-webkit-scrollbar { display: none; }
.gm-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--gm-line); font-size: 13.5px; white-space: nowrap; cursor: pointer; background: none; color: var(--gm-text); transition: border-color .3s, background .3s, color .3s; }
.gm-chip small { font-family: var(--gm-lat); font-size: 11px; color: var(--gm-mute); }
.gm-chip:hover { border-color: var(--gm-line-hi); }
.gm-chip.on { border-color: var(--gm-hi); background: var(--gm-tint); color: var(--gm-hi); }
.gm-count { margin-top: 14px; text-align: end; font-size: 13px; color: var(--gm-mute); }
.gm-group { margin-top: clamp(50px, 7vw, 90px); }
.gm-group > h2 { font-family: var(--gm-disp); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.35; padding-bottom: 14px; border-bottom: 1px solid var(--gm-line-hi); }
.gm-sec { margin-top: 40px; scroll-margin-top: 210px; }
.gm-sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px; }
.gm-sec-head small { font-family: var(--gm-lat); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gm-mute); }
.gm-sec-head h3 { font-family: var(--gm-disp); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.45; color: var(--gm-hi); }
.gm-n { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gm-line-hi); display: grid; place-items: center; font-family: var(--gm-lat); font-size: 13px; flex: none; }
.gm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gm-card { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 14px; border-radius: 20px; border: 1px solid var(--gm-line); background: var(--gm-card); text-align: start; cursor: pointer; color: var(--gm-text); font: inherit; width: 100%; transition: border-color .4s, transform .5s var(--gm-ease); }
.gm-card:hover { border-color: var(--gm-line-hi); transform: translateY(-3px); }
.gm-ph { width: 112px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #efede8; }
.gm-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--gm-ease); }
.gm-card:hover .gm-ph img { transform: scale(1.06); }
.gm-ph.none { display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, var(--gm-ink-2), var(--gm-ink)); box-shadow: inset 0 0 0 1px var(--gm-line-hi); }
.gm-ph.none img { width: 60%; height: auto; opacity: .55; object-fit: contain; }
.gm-tx { display: grid; gap: 4px; align-content: start; min-width: 0; }
.gm-nm { font-family: var(--gm-card-font, var(--gm-disp)); font-size: 19px; line-height: 1.5; color: var(--gm-text); }
.gm-d { color: var(--gm-mute); font-size: 13.5px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.gm-price { font-family: var(--gm-lat); font-size: 18px; color: var(--gm-hi); white-space: nowrap; }
.gm-price small { font-size: 11px; color: var(--gm-mute); margin-inline-start: 4px; letter-spacing: .12em; }
.gm-cal { font-size: 12px; color: var(--gm-mute); white-space: nowrap; }
.gm-nores { text-align: center; color: var(--gm-mute); padding: 40px 0; }
@media (max-width: 860px) { .gm-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .gm-card { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; } .gm-ph { width: 92px; } }
.gm-entry { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 26px; }
.gm-entry div { padding: 18px 18px 16px; border-radius: 18px; border: 1px solid var(--gm-line); background: var(--gm-card); display: grid; gap: 4px; }
.gm-entry b { font-family: var(--gm-disp); font-weight: 400; font-size: 20px; line-height: 1.5; }
.gm-entry span { color: var(--gm-mute); font-size: 13.5px; }
.gm-entry strong { font-family: var(--gm-lat); font-weight: 400; font-size: 22px; color: var(--gm-hi); letter-spacing: .04em; }
.gm-note { margin-top: 40px; text-align: center; color: var(--gm-mute); font-size: 13.5px; }
.gm-cta { display: flex; justify-content: center; margin-top: 24px; }
.gm-dlg { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; background: rgba(4,3,6,.84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: gmFade .4s ease; }
@keyframes gmFade { from { opacity: 0; } }
@keyframes gmRise { from { opacity: 0; transform: translateY(24px); } }
.gm-dlg-card { position: relative; width: min(820px, 100%); max-height: calc(100vh - 36px); overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 26px; border: 1px solid var(--gm-line-hi); background: linear-gradient(160deg, var(--gm-ink-2), var(--gm-ink)); box-shadow: 0 40px 90px rgba(0,0,0,.7); animation: gmRise .7s var(--gm-ease); color: var(--gm-text); }
.gm-big { aspect-ratio: 1; background: #efede8 center / cover no-repeat; }
.gm-big img { display: none; }
.gm-big.none { background: radial-gradient(circle at 40% 30%, var(--gm-ink-2), var(--gm-ink)); display: grid; place-items: center; }
.gm-big.none img { display: block; width: 40%; height: auto; opacity: .5; }
.gm-dtx { padding: clamp(24px, 3vw, 40px); display: grid; gap: 12px; align-content: center; }
.gm-dtx h3 { font-family: var(--gm-disp); font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.4; }
.gm-dtx p { color: var(--gm-text); opacity: .85; }
.gm-row { display: flex; gap: 22px; align-items: baseline; border-top: 1px solid var(--gm-line); padding-top: 14px; }
.gm-row b { font-family: var(--gm-lat); font-weight: 400; font-size: 28px; color: var(--gm-hi); }
.gm-row b small { font-size: 13px; color: var(--gm-mute); margin-inline-start: 6px; letter-spacing: .12em; }
.gm-row > span { color: var(--gm-mute); font-size: 13.5px; }
.gm-x { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; background: rgba(10,8,12,.7); }
@media (max-width: 700px) { .gm-dlg-card { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .gm-ring { animation: none; } .gm-book, .gm-leaf { transition: none; } }
.gm { --gm-hi: var(--gold-hi); --gm-text: var(--bone); --gm-mute: var(--mute); --gm-line: var(--line); --gm-line-hi: var(--line-hi);
--gm-ink: #0e0707; --gm-ink-2: #2a1012; --gm-bg: var(--bg); --gm-glow: rgba(255,140,40,.2); --gm-tint: rgba(255,217,142,.12);
--gm-card: linear-gradient(160deg, rgba(28,13,12,.94), rgba(14,7,7,.9)); --gm-glass: rgba(14,7,7,.9);
--gm-disp: var(--f-disp); --gm-lat: var(--f-lat); --gm-card-font: var(--f-body); --gm-nm-w: 500; --gm-gut: var(--gutter); --gm-max: var(--max); --gm-top: 86px;
--gm-cover: radial-gradient(90% 60% at 50% 30%, rgba(255,170,70,.2), transparent 70%), repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px), linear-gradient(160deg, #4a0e18, #14060a);
--gm-metal-1: radial-gradient(circle at 34% 28%, #fff6dc, #e2b863 38%, #8a5a18 70%, #3a2408); --gm-metal-2: radial-gradient(circle at 60% 70%, #a57a35, #4a3210 70%);
--gm-metal-lid: radial-gradient(circle at 35% 30%, #fffbe9, #f2cf7d 30%, #b8862f 64%, #5f3d0e); --gm-metal-knob: radial-gradient(circle at 35% 30%, #fff8dc, #d9a94e 60%, #7a4f14); }
.gm-main { background: var(--bg); }
.gm-nm { font-weight: var(--gm-nm-w, 400); }