/* ============================================================
 * 144 Mahjong — DESIGN-MJ-1 stylesheet (mockup v3.4, TZ §4–§7, §11).
 * Tokens, then components, then pages, then breakpoints (TZ §5).
 * ============================================================ */

:root{
	--mj-bg:#ece7da; --mj-surface:#fff; --mj-ink:#17221c; --mj-muted:#4d5a52; --mj-line:#d6cfbe; --mj-ctl:#857f6f;
	--mj-green:#1d6b45; --mj-green-d:#134a30; --mj-green-soft:#e8f2eb; --mj-gold:#eab84a; --mj-gold-d:#a8771c; --mj-gold-soft:#fbefd1; --mj-night:#221c40; --mj-red:#b3261e;
	--t12:12px; --t14:14px; --t16:16px; --t18:18px; --t22:22px; --t28:28px; --t36:36px;
	--r8:8px; --r14:14px; --rpill:999px;
	--mj-shadow:0 1px 2px rgba(23,34,28,.08),0 2px 8px rgba(23,34,28,.06);
	--mj-shadow-pop:0 18px 40px rgba(23,34,28,.22);
	--mj-ph:clamp(400px,calc(100vh - 220px),640px);
	--mj-font-body:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	--mj-font-head:Lora,Georgia,"Times New Roman",serif;
	--mj-hdr-h:64px;
}
html{scroll-padding-top:80px;scroll-padding-bottom:110px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body.mj{margin:0;background:var(--mj-bg);color:var(--mj-ink);font-family:var(--mj-font-body);font-size:var(--t16);line-height:1.5;-webkit-font-smoothing:antialiased}
.mj h1,.mj h2,.mj h3,.mj h4{font-family:var(--mj-font-head);font-weight:700;margin:0;color:var(--mj-ink);line-height:1.2;overflow-wrap:anywhere}
.mj h1{font-size:var(--t36)}
.mj h2{font-size:var(--t28)}
.mj h3{font-size:var(--t18)}
.h28{font-size:var(--t28)!important}.h22{font-size:var(--t22)!important}.h18{font-size:var(--t18)!important}
.mj p{margin:0;max-width:75ch}
.mj a:where(:not([class])){color:var(--mj-green)}
.mj a[class]{text-decoration:none}
:where(.mj) img{max-width:100%;height:auto}
:where(.mj) button{font:inherit;color:inherit;cursor:pointer}
.muted{color:var(--mj-muted)}.small{font-size:var(--t16)}.lead{font-size:var(--t18)}.center{text-align:center;justify-content:center}
.wrap{max-width:1280px;margin:0 auto;padding-inline:32px}
.sec{margin-top:40px}
.sec--wide{margin-top:56px}
.only-phone{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-links{position:absolute;top:0;left:0;z-index:9999}
.skip-link{position:absolute;top:-100px;left:16px;background:var(--mj-green);color:#fff;padding:12px 18px;border-radius:var(--r8);font-weight:700;text-decoration:none;white-space:nowrap}
.skip-link:focus,.skip-link:focus-visible{top:16px}
:focus-visible{outline:3px solid var(--mj-green);outline-offset:2px}
.foot :focus-visible,.night :focus-visible,.on-dark :focus-visible,.player :focus-visible{outline-color:var(--mj-gold)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- grid / stacks ---------- */
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,1fr);gap:24px}
.grid--4{grid-template-columns:repeat(4,1fr);gap:16px}
.grid--5{grid-template-columns:repeat(5,1fr)}
.grid--6{grid-template-columns:repeat(6,1fr);gap:16px}
.r-stack>*{min-width:0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.sec-h h2{font-size:var(--t28)}
.sec-h a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;white-space:nowrap}

/* ---------- buttons, chips, tags ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border-radius:var(--r14);font-weight:700;font-size:var(--t18);text-decoration:none;border:0;white-space:nowrap;color:var(--mj-ink);background:#fff;cursor:pointer;line-height:1.2}
.btn-own{background:var(--mj-gold);color:#2a1d02;box-shadow:0 3px 0 var(--mj-gold-d)}
.btn-play{background:var(--mj-green);color:#fff;box-shadow:0 3px 0 var(--mj-green-d)}
.btn-sm{min-height:44px;padding:0 16px;font-size:var(--t16)}
.btn-ghost{background:#fff;color:var(--mj-ink);border:1.5px solid var(--mj-ctl);box-shadow:none}
.btn-wide{display:flex;width:100%}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(1px)}
.tbtn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1.5px solid var(--mj-ctl);border-radius:var(--r14);background:#fff;color:var(--mj-ink);font-weight:600;font-size:var(--t16);white-space:nowrap;text-decoration:none;cursor:pointer}
.vbtn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1.5px solid var(--mj-ctl);border-radius:var(--r14);background:#fff;color:var(--mj-ink);font-weight:600;font-size:var(--t16);cursor:pointer;white-space:nowrap}
.vbtn.is-on{background:var(--mj-green);border-color:var(--mj-green);color:#fff}
.linkbtn{border:0;background:none;color:var(--mj-green);font-weight:600;font-size:var(--t16);min-height:44px;padding:0 8px;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--mj-ctl);border-radius:var(--rpill);background:#fff;color:var(--mj-ink);text-decoration:none;font-weight:600;font-size:var(--t16);white-space:nowrap}
.chip.is-active{background:var(--mj-green);color:#fff;border-color:var(--mj-green)}
.chip__n{opacity:.75;font-weight:400}
.chip--sm{min-height:36px;padding:0 12px;font-weight:400}
.chips--tags{margin-top:24px}
.chips--wrap{margin-top:22px}
.tag-own{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--rpill);background:var(--mj-gold-soft);color:#6b4a0c;font-size:var(--t14);font-weight:700;letter-spacing:.02em;white-space:nowrap}
.liked{display:inline-flex;align-items:center;gap:4px;color:var(--mj-green);font-weight:600;white-space:nowrap}

/* ---------- cards ---------- */
.card{display:flex;flex-direction:column;background:var(--mj-surface);border:1px solid var(--mj-line);border-radius:var(--r14);overflow:hidden;text-decoration:none;color:var(--mj-ink);box-shadow:var(--mj-shadow);min-width:0}
.card:hover{box-shadow:0 4px 14px rgba(23,34,28,.14)}
.card__img,.card__img picture{display:block;width:100%}
.card__img img,.card__img .mj-noimg{width:100%;aspect-ratio:480/330;object-fit:cover;display:block;background:#ddd6c6}
.mj-noimg{display:flex;align-items:center;justify-content:center;background:#e4ddcb}
.card .cb{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px}
.card .ct{font-weight:700;font-size:var(--t16);line-height:1.3}
.card .cm{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--t16);color:var(--mj-muted);flex-wrap:wrap}
.card.own{border:2px solid var(--mj-gold);box-shadow:0 0 0 3px var(--mj-gold-soft)}
.panel{background:var(--mj-surface);border:1px solid var(--mj-line);border-radius:var(--r14);box-shadow:var(--mj-shadow)}
.panel--list{padding:12px 8px}
.panel__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:4px 8px 8px}
.panel__head a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:var(--t16)}
.row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--r8);text-decoration:none;color:var(--mj-ink)}
.row:hover{background:#f3efe4}
.row__img{flex:0 0 88px}
.row__img img,.row__img .mj-noimg{width:88px;aspect-ratio:480/330;object-fit:cover;border-radius:var(--r8);display:block;background:#ddd6c6}
.row__txt{flex:1;min-width:0}
.row__txt b{display:block;font-size:var(--t16);line-height:1.3}
.row__txt span{font-size:var(--t16);color:var(--mj-muted)}
.row>svg{color:var(--mj-muted);flex:0 0 auto}
.apanel{padding:20px;text-decoration:none;color:var(--mj-ink);display:flex;flex-direction:column;gap:6px}
.apanel b{font-size:var(--t18);line-height:1.35}
.apanel:hover{box-shadow:0 4px 14px rgba(23,34,28,.14)}

/* ---------- ads (label + reserved height; A-2) ---------- */
.ad{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%}
.ad .lbl{font-size:var(--t12);letter-spacing:.06em;text-transform:uppercase;color:var(--mj-muted)}
/* A-2: the reserve lives in a custom property so AdSense's collapse (inline height/min-height 0 on an unfilled unit) cannot remove it. */
.ad .box{width:100%;min-height:var(--mj-reserve,0px)!important;height:auto!important;display:flex;align-items:center;justify-content:center;border-radius:var(--r8);background:repeating-linear-gradient(135deg,#e2dccd 0 12px,#e7e1d3 12px 24px);overflow:hidden}
.ad .box .ad-slot{height:auto!important;min-height:0!important}
.ad-slot--blog{display:flex;justify-content:center;margin:32px auto;min-height:280px!important;border-radius:var(--r8);background:repeating-linear-gradient(135deg,#e2dccd 0 12px,#e7e1d3 12px 24px)}
.ad .box>*{max-width:100%}
.ad .ad-slot{display:block;width:100%;text-align:center}
.ad--section{margin:56px auto 0}
.ad--mid{margin:40px auto}
.ad--bottom{margin:72px auto 0}
.ad--rail .box{width:300px}
.ad-slot__ph{font-size:var(--t16);color:#7a7465;font-weight:600}

/* ---------- details menus / popovers ---------- */
details.dd{border:0}
details.dd:not([open])>.mega,details.dd:not([open])>.pop,details.pm:not([open])>.pmenu{display:none}
details.dd>summary{list-style:none;cursor:pointer;display:inline-flex;justify-content:flex-start}
details.dd>summary::-webkit-details-marker{display:none}
.pop-wrap{position:relative}
.pop{position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:280px}
.pop--right{left:auto;right:0}
.pop__panel{padding:18px;width:360px;max-width:calc(100vw - 32px);box-shadow:var(--mj-shadow-pop);display:flex;flex-direction:column;gap:10px}
.pop__panel--list{width:320px;padding:12px 8px;gap:0}
.pop__panel kbd{font:600 var(--t16) var(--mj-font-body);border:1.5px solid var(--mj-ctl);border-radius:6px;padding:1px 7px;background:#fff}
details.dd[open]>summary.tbtn,details.dd[open]>summary.vbtn{border-color:var(--mj-green);box-shadow:0 0 0 2px #cfe3d6}
.lgrid{display:grid;grid-template-columns:1fr;gap:4px}
.lgrid--2{grid-template-columns:1fr 1fr;gap:6px}
.lgrid--4{grid-template-columns:repeat(4,1fr)}
.lgrid a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 12px;border-radius:var(--r8);text-decoration:none;color:var(--mj-ink);font-weight:400}
.lgrid a:hover{background:#f3efe4}
.lgrid a.is-current{font-weight:700;background:var(--mj-green-soft)}
.lgrid .tick{color:var(--mj-green);display:inline-flex}
.lgrid--2 a{background:#fff;border:1px solid var(--mj-line)}
.lgrid--2 a.is-current{background:var(--mj-green-soft);border-color:var(--mj-green-soft)}

/* ---------- header ---------- */
.hdr{background:var(--mj-surface);border-bottom:1px solid var(--mj-line);position:relative;z-index:30}
.hdr__in{height:var(--mj-hdr-h);display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--mj-ink);font:700 var(--t22)/1 var(--mj-font-head);white-space:nowrap}
.brand svg{flex:0 0 auto}
.nav{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.nav a,.nav details.dd>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;border-radius:var(--r8);color:var(--mj-ink);text-decoration:none;font-weight:600;font-size:var(--t16);white-space:nowrap}
.nav a:hover,.nav details.dd>summary:hover{background:#f3efe4}
.nav details.dd[open]>summary{background:#f3efe4;box-shadow:inset 0 -3px 0 var(--mj-green)}
.nav-own{margin-left:6px}
.mega{position:absolute;left:0;right:0;top:100%;z-index:40}
.mega__panel{padding:24px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr) 270px;gap:24px;border-top-left-radius:0;border-top-right-radius:0;box-shadow:var(--mj-shadow-pop)}
.mega__col{display:flex;flex-direction:column;gap:2px}
.mega__h{font-size:var(--t16);letter-spacing:.06em;text-transform:uppercase;color:var(--mj-muted);margin-bottom:6px}
.mega__types{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega__col a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:var(--r8);color:var(--mj-ink);text-decoration:none;font-weight:600;white-space:normal}
.mega__col a:hover{background:#f3efe4}
.mega__col a.mega__art{display:block;padding:10px;line-height:1.35}
.mega__all{font-weight:700!important}
.own-card{border-radius:var(--r14);overflow:hidden;background:var(--mj-night);color:#efeaff}
.own-card__img img{width:100%;height:140px;object-fit:cover;object-position:60% 40%;display:block}
.own-card__body{padding:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.own-card__body b{color:#fff;font:700 var(--t22)/1.2 var(--mj-font-head)}
.hsearch{flex:1;min-width:120px;max-width:260px;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1.5px solid var(--mj-ctl);border-radius:var(--r14);color:var(--mj-muted);font-size:var(--t16);background:#fff;white-space:nowrap;overflow:hidden;cursor:text;font-family:inherit}
.hsearch--full{max-width:none;width:100%;flex:none}
.langpop{max-width:calc(100vw - 32px)}
.langpop .pop__panel{width:280px}
.lgrid--4 ~ * , .langpop .lgrid--4{width:100%}
.hdr .langpop .lgrid.lgrid--4{grid-template-columns:repeat(4,1fr)}
.pbtn{display:none}
.pm,.pmenu{display:none}
.hdr.is-hidden{transform:translateY(-100%)}

/* ---------- search overlay (parent main.js drives it) ---------- */
.search-overlay{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;padding:max(18vh,72px) 16px 16px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.search-overlay[data-open="true"]{opacity:1;pointer-events:auto}
.search-overlay__backdrop{position:absolute;inset:0;background:rgba(23,34,28,.6)}
.search-overlay__card{position:relative;width:100%;max-width:640px}
.search-overlay__form{position:relative;display:flex;align-items:center;gap:4px;padding:0 8px 0 18px;background:#fff;border:1.5px solid var(--mj-ctl);border-radius:var(--r14);box-shadow:var(--mj-shadow-pop)}
.search-overlay__form:focus-within{border-color:var(--mj-green);box-shadow:0 0 0 2px #cfe3d6,var(--mj-shadow-pop)}
.search-overlay__icon{display:inline-flex;color:var(--mj-green)}
.search-overlay__input{flex:1;min-width:0;padding:16px 12px;background:transparent;border:0;outline:0;color:var(--mj-ink);font:500 var(--t18)/1.2 var(--mj-font-body)}
.search-overlay__input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-overlay__spinner{width:18px;height:18px;flex-shrink:0;border:2px solid #cfe3d6;border-top-color:var(--mj-green);border-radius:50%;opacity:0;margin-right:4px}
.search-overlay--loading .search-overlay__spinner{opacity:1;animation:mj-spin .7s linear infinite}
@keyframes mj-spin{to{transform:rotate(360deg)}}
.search-overlay__close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--r8);background:transparent;color:var(--mj-muted)}
.search-overlay__close:hover{background:#f3efe4;color:var(--mj-ink)}
.search-overlay__panel{margin-top:14px;max-height:min(60vh,480px);overflow-y:auto;background:#fff;border:1px solid var(--mj-line);border-radius:var(--r14);box-shadow:var(--mj-shadow-pop)}
.search-overlay__panel:empty{display:none}
.search-overlay__section{padding:8px 0}
.search-overlay__section+.search-overlay__section{border-top:1px solid var(--mj-line)}
.search-overlay__section-head{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 6px;font-size:var(--t16);font-weight:700;color:var(--mj-muted)}
.search-overlay__clear{border:0;background:transparent;color:var(--mj-green);font-weight:600;font-size:var(--t16);min-height:44px;padding:0 8px;cursor:pointer}
.search-overlay__chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 18px 8px}
.search-overlay__chips .chip{min-height:36px}
.search-overlay__list{padding:2px 6px 8px}
.search-result{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r8);text-decoration:none;color:var(--mj-ink)}
.search-result:hover,.search-result.is-selected{background:#f3efe4}
.search-result__thumb{flex-shrink:0;width:56px;height:56px;border-radius:var(--r8);object-fit:cover;background:#e4ddcb}
.search-result__thumb--placeholder{display:inline-block}
.search-result__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.search-result__title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result__meta{display:flex;align-items:center;gap:4px;font-size:var(--t16);color:var(--mj-muted);flex-wrap:wrap}
.search-result__cat{color:var(--mj-green);font-weight:600}
.search-overlay__message{padding:24px 20px;text-align:center;color:var(--mj-muted)}
.search-overlay__hint{margin:14px auto 0;font-size:var(--t16);color:var(--mj-muted);text-align:center;background:#fff;border-radius:var(--r8);padding:8px 14px;width:max-content;max-width:100%}
.search-overlay__hint kbd{border:1px solid var(--mj-ctl);border-radius:4px;padding:0 6px}
.zuma-toast,.mj-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);padding:14px 24px;background:#fff;border:1.5px solid var(--mj-green);border-radius:var(--r14);color:var(--mj-ink);font-weight:600;box-shadow:var(--mj-shadow-pop);z-index:9999;opacity:0;transition:opacity .3s,transform .3s;max-width:calc(100% - 32px);text-align:center;pointer-events:none}
.zuma-toast.is-visible,.mj-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- home ---------- */
.home__head{padding-top:22px}
.home__trust{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px;flex-wrap:wrap}
.home__hero{margin-top:18px;display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}
.hero{position:relative;height:380px;border-radius:var(--r14);overflow:hidden;background:var(--mj-night)}
.hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 45%}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,21,52,.95) 0%,rgba(26,21,52,.88) 52%,rgba(26,21,52,0) 76%)}
.hero__txt{position:absolute;left:40px;top:40px;bottom:40px;width:390px;max-width:calc(100% - 80px);display:flex;flex-direction:column;justify-content:flex-end;gap:14px;color:#efeaff}
.hero__txt h2{color:#fff;font-size:var(--t36)}
.hero__txt p{font-size:var(--t18);color:#dcd6f3}
.hero__cta{display:flex;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap}
.hero__daily{color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:44px;text-decoration:none}
.hero__facts{font-size:var(--t16);color:#c9c2e8}
.homeplay{grid-column:1 / -1}
.homeplay__frame{position:relative;width:100%;height:clamp(400px,calc(100vh - 140px),640px);border-radius:var(--r14);overflow:hidden;background:#0f1a14}
.homeplay__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.home__top{padding:16px 12px;display:flex;flex-direction:column}
.home__top--below{grid-column:1 / -1;max-width:600px}
.home__chips{margin-top:28px}
.chips--row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chips--row::-webkit-scrollbar{display:none}
.scroller{position:relative}
.night{background:var(--mj-night);color:#efeaff;margin-top:72px;padding:64px 0}
.night h2{color:#fff;font-size:var(--t36)}
.night__grid{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:center}
.night__txt{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.night__txt p{font-size:var(--t18);color:#dcd6f3}
.night__figs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.night__figs figure{margin:0;display:flex;flex-direction:column;gap:8px}
.night__figs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r14);display:block}
.night__figs figcaption{font-size:var(--t16);color:#dcd6f3}
.home__arts{margin-top:0}
.house{margin:56px auto 0;max-width:970px;min-height:250px;border-radius:var(--r14);background:#fff;border:1px solid var(--mj-line);box-shadow:var(--mj-shadow);display:flex;align-items:center;gap:28px;padding:24px 32px;flex-wrap:wrap}
.house__txt{display:flex;flex-direction:column;gap:10px;width:280px;align-items:flex-start}
.house__txt b{font:700 var(--t28)/1.2 var(--mj-font-head)}
.house__imgs{display:flex;gap:12px;flex-wrap:wrap}
.house__imgs img,.house__imgs .mj-noimg{width:132px;aspect-ratio:480/330;object-fit:cover;border-radius:var(--r8);display:block}
.home__text{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:56px}
.home__about,.home__faq{display:flex;flex-direction:column;gap:14px}
.more{border-bottom:1px solid var(--mj-line)}
.more>summary,.faq details>summary{cursor:pointer;font-weight:600;font-size:var(--t18);padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
.more>summary::-webkit-details-marker,.faq details>summary::-webkit-details-marker{display:none}
.more[open]>summary svg,.faq details[open]>summary svg{transform:rotate(180deg)}
.more__body{display:flex;flex-direction:column;gap:12px;padding-bottom:16px}
.faq details{border-bottom:1px solid var(--mj-line)}
.faq__a{padding:0 0 16px;color:var(--mj-muted)}
.faq__a p{max-width:75ch}
.who{padding:24px 28px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.who__txt{flex:1;min-width:260px}
.who__txt b{font:700 var(--t22)/1.3 var(--mj-font-head);display:block}
.who__txt p{margin-top:4px}

/* ---------- game page ---------- */
.game{padding-top:8px}
.game__top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-size:var(--t16);color:var(--mj-muted);margin:-8px 0}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.crumbs--inline{flex:1}
.game__title{display:flex;align-items:baseline;gap:14px;margin-top:4px;flex-wrap:wrap}
.game__title h1{font-size:var(--t28)}
.game__layout{display:grid;grid-template-columns:1fr 300px;gap:32px;margin-top:12px}
.game__main{min-width:0}
.player{position:relative;height:var(--mj-ph);border-radius:var(--r14);overflow:hidden;background:#0f1a14}
.player--portrait{height:auto;aspect-ratio:var(--player-ar,0.6);max-height:calc(100vh - 160px)}
.player--empty{display:grid;place-items:center;color:#fff}
.player__poster{position:absolute;inset:0;cursor:pointer}
.player__poster.is-hidden{display:none}
.player__bg img{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(18px) brightness(.45)}
.player__art img{position:absolute;left:50%;top:calc(50% - 40px);transform:translate(-50%,-50%);height:min(56%,360px);width:auto;aspect-ratio:480/330;object-fit:cover;border-radius:var(--r14);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.player__play{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);min-width:220px}
.player__fs{position:absolute;right:14px;top:14px;width:44px;height:44px;border:0;border-radius:var(--r8);background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player--loading::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:mj-spin .8s linear infinite}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.actions__gap{flex:1}
.actions__q{font-weight:600}
.actions__pct{white-space:nowrap}
.about{display:flex;flex-direction:column;gap:12px}
.meta-line{font-size:var(--t16)}
.prose{font-size:var(--t18);line-height:1.7}
.prose--game{font-size:var(--t16);line-height:1.6;color:var(--mj-muted)}
.prose p,.prose ul,.prose ol{margin:0 0 14px;max-width:75ch}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:0 0 6px}
.prose h2{font-size:var(--t28);margin:36px 0 12px}
.prose h3{font-size:var(--t22);margin:28px 0 10px}
.prose img{border-radius:var(--r14);height:auto}
.prose figure{margin:20px 0}
.prose figcaption{font-size:var(--t16);color:var(--mj-muted);margin-top:6px}
.prose table{border-collapse:collapse;width:100%;font-size:var(--t16);display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--mj-line);padding:8px 10px;text-align:left}
.prose blockquote{margin:16px 0;padding:8px 20px;border-left:4px solid var(--mj-gold);color:var(--mj-muted)}
.prose a{color:var(--mj-green)}
.rail{align-self:stretch;display:flex;flex-direction:column;min-width:0}
.rail-top{min-height:calc(var(--mj-ph) + 150px);display:flex;flex-direction:column;gap:16px}
.rail-ad{position:sticky;top:72px}
.rail-extra{display:block}
.strip{position:fixed;left:max(16px,calc(50% - 608px));bottom:20px;width:min(884px,calc(100% - 380px));display:flex;align-items:center;gap:16px;padding:12px;background:#fff8e6;border:2px solid var(--mj-gold);border-radius:var(--r14);box-shadow:0 10px 30px rgba(23,34,28,.25);z-index:50}
.strip__img img,.strip__img .mj-noimg{width:96px;height:56px;object-fit:cover;object-position:55% 40%;border-radius:var(--r8);display:block}
.strip__txt{flex:1;min-width:0}
.strip__txt b{display:block}
.strip__close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;background:none;border-radius:var(--r8)}

/* ---------- hub / search / page ---------- */
.hub{padding-top:16px}
.hub h1{margin-top:8px}
.hub__head{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start;margin-top:8px}
.hub__txt{display:flex;flex-direction:column;gap:8px}
.hub__feature{padding:12px 12px 16px;display:flex;flex-direction:column;gap:8px}
.hub__feature .btn{align-self:flex-start}
.hub__outro{color:var(--mj-muted);max-width:820px}
.searchform{display:flex;gap:10px;margin:16px 0;max-width:640px}
.searchform input{flex:1;min-width:0;height:44px;padding:0 14px;border:1.5px solid var(--mj-ctl);border-radius:var(--r14);font:inherit}
.pg{padding-top:16px}
.pg h1{margin-top:8px;margin-bottom:20px}
.page__body{max-width:820px}
.page__body--wide{max-width:none}
.page-links{display:flex;gap:8px;margin-top:24px}
.pages{display:flex;justify-content:center;gap:8px;margin-top:32px;flex-wrap:wrap}
.pages .page-numbers{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:48px;min-height:44px;padding:0 14px;border-radius:var(--r14);font-weight:700;font-size:var(--t16);text-decoration:none;background:#fff;color:var(--mj-ink);border:1.5px solid var(--mj-ctl)}
.pages .page-numbers.current{background:var(--mj-green);color:#fff;border-color:var(--mj-green);box-shadow:0 3px 0 var(--mj-green-d)}
.pages .page-numbers.dots{border:0;background:none}

/* parent catalogue shortcode ([zuma_catalog] on /games) and legacy cards */
.grid-games{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin:16px 0 32px}
.grid-games .card{position:relative}
.card__media{display:block}
.card__media img{width:100%;aspect-ratio:480/330;object-fit:cover;display:block;background:#ddd6c6}
.card__media .thumb{aspect-ratio:480/330;background:#e4ddcb}
.card__badge{position:absolute;left:10px;top:10px;background:var(--mj-gold);color:#2a1d02;font-size:var(--t14);font-weight:700;padding:3px 10px;border-radius:var(--rpill)}
.card__overlay{display:none}
.card__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px}
.card__title{font:700 var(--t16)/1.3 var(--mj-font-body);margin:0}
.card__meta{display:flex;align-items:center;gap:8px;color:var(--mj-muted);font-size:var(--t16)}
.card__rating{color:var(--mj-green);font-weight:600}
.grid-ad{grid-column:1 / -1}
.catalog-section,.zuma-catalog section{margin-top:32px}
.page__body--wide h2{font-size:var(--t28);margin:40px 0 12px}
.page__body--wide h2 a{color:inherit;text-decoration:none}
.page__body--wide p{color:var(--mj-muted);margin-bottom:12px}

/* ---------- blog ---------- */
.blg{padding-top:16px}
.blg h1{margin-top:8px}
.blog__intro{max-width:760px;margin-top:10px;font-size:var(--t18)}
.featured{display:grid;grid-template-columns:1.2fr 1fr;margin-top:28px;overflow:hidden;text-decoration:none;color:var(--mj-ink)}
.featured__img .acard__img img{width:100%;height:340px;object-fit:cover;display:block;aspect-ratio:auto}
.featured__img .acard__tiles{height:340px}
.featured__txt{padding:32px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.featured__title{font:700 var(--t28)/1.25 var(--mj-font-head)}
.grid--arts{margin-top:0}
.acard .cb{gap:8px;padding:14px 16px 16px}
.acard__img img{width:100%;height:160px;object-fit:cover;display:block;aspect-ratio:auto}
.acard__cat{font-size:var(--t16);font-weight:700;color:var(--mj-green)}
.acard__title{font:700 var(--t18)/1.35 var(--mj-font-head)}
.acard__tiles{height:120px;display:flex;align-items:center;justify-content:center;background:#efe7d3}
.acard__tiles--1{background:#e3efe7}.acard__tiles--2{background:#f3e3e1}.acard__tiles--3{background:#e6e3f3}.acard__tiles--4{background:#f1ead8}.acard__tiles--5{background:#e2ecf0}
.acard__tiles span{display:inline-block;margin:0 -4px}
.acard__tiles svg{width:44px;height:48px}
.acard__tiles .t2 svg{width:56px;height:61px}
.acard__tiles .t1{transform:rotate(-8deg) translateY(6px)}
.acard__tiles .t3{transform:rotate(7deg) translateY(4px)}
.done{margin-top:48px;padding:24px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.done__txt{flex:1;min-width:240px}
.done__txt b{display:block}
.done__imgs{display:flex;gap:12px}
.done__imgs img,.done__imgs .mj-noimg{width:120px;aspect-ratio:480/330;object-fit:cover;border-radius:var(--r8);display:block}
.article{padding-top:16px}
.article__layout{display:grid;grid-template-columns:1fr 300px;gap:56px;margin-top:10px}
.article__body{max-width:720px;min-width:0}
.article__body h1{font-size:40px;line-height:1.2}
.article__meta{display:flex;align-items:center;gap:12px;margin:16px 0 28px;color:var(--mj-muted);font-size:var(--t16);flex-wrap:wrap}
.article__meta>svg{flex:0 0 auto}
.article__cover{margin:0 0 24px}
.article__cover img{width:100%;border-radius:var(--r14);display:block}
.article__aside{display:flex;flex-direction:column;gap:24px;min-width:0}
.toc{padding:14px 8px;display:flex;flex-direction:column}
.toc__h{display:block;padding:4px 10px 8px;font-size:var(--t16);letter-spacing:.06em;text-transform:uppercase;color:var(--mj-muted)}
.toc a{display:block;padding:11px 10px;border-radius:var(--r8);color:var(--mj-ink);text-decoration:none;min-height:44px}
.toc a.is-on{background:var(--mj-green-soft);font-weight:700}
.toc--phone{border:1px solid var(--mj-line);border-radius:var(--r14);background:#fff;padding:0 14px;margin:0 0 20px;font-size:var(--t16)}
.toc--phone summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;font-weight:600;cursor:pointer;list-style:none}
.toc--phone summary::-webkit-details-marker{display:none}
.toc--phone nav{display:flex;flex-direction:column;padding-bottom:8px}
.toc--phone nav a{min-height:44px;display:flex;align-items:center;color:var(--mj-ink);text-decoration:none}
.article__comments{margin-top:48px}
.faq-item,.article .faq details{border-bottom:1px solid var(--mj-line)}
.prose details>summary{cursor:pointer;font-weight:600;font-size:var(--t18);padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.prose details{border-bottom:1px solid var(--mj-line)}

/* ---------- footer ---------- */
.foot{background:#17221c;color:#d9e6dc;font-size:var(--t16);margin-top:72px}
.foot a{color:#d9e6dc;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;gap:10px}
.foot a:hover{color:#fff}
.foot b{color:#fff}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;padding-block:48px}
.foot__brand{display:flex;flex-direction:column;gap:12px}
.foot__brand .brand{color:#fff}
.foot__about{color:#b9cbbf}
.foot__col{display:flex;flex-direction:column;gap:0}
.foot__col b{margin-bottom:4px}
.foot__social .soc svg{width:22px;height:22px}
.foot__net ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.foot__net img,.foot__net svg{display:none}
.foot__net .footer__network-card{display:inline-flex}
.foot__langs{padding-block:16px;border-top:1px solid #2b4334;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.foot__langs b{display:inline-flex;align-items:center;gap:6px;margin-right:4px}
.foot__langs a.is-current{color:#fff;font-weight:700}
.foot__bottom{padding-block:16px;border-top:1px solid #2b4334;color:#b9cbbf;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pmenu__social .soc svg{width:22px;height:22px}

/* ---------- comments (parent markup, minimal) ---------- */
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{border-top:1px solid var(--mj-line);padding:16px 0}
.comment-form input,.comment-form textarea{width:100%;padding:10px 12px;border:1.5px solid var(--mj-ctl);border-radius:var(--r8);font:inherit}
.comment-form .submit{margin-top:8px}

/* ============================================================
 * Breakpoints (TZ §5)
 * ============================================================ */
@media (max-height:759px){.rail-extra{display:none}.ad--rail .box{--mj-reserve:250px}}
@media (max-width:1599px){.nav-own .tag-own{display:none}}
@media (max-width:1439px){.hsearch{flex:0 1 200px;min-width:44px}.hdr .rec-lbl{display:none}.hdr__recent summary{padding:0 12px}}
@media (max-width:1279px){.nav .nav-cat{display:none}}
@media (max-width:1023px){
	.hdr .rec-lbl{display:none}
	.hdr__recent summary{padding:0 12px}
	.r-stack,.game__layout,.article__layout,.hub__head{grid-template-columns:1fr!important}
	.grid--3{grid-template-columns:repeat(2,1fr)}
	.grid--5,.grid--6,.grid-games{grid-template-columns:repeat(3,1fr)}
	.grid--4{grid-template-columns:repeat(2,1fr)}
	.foot__grid{grid-template-columns:1fr 1fr}
	.rail-top{min-height:0}
	.rail{display:grid!important;grid-template-columns:1fr 1fr;gap:20px}
	.rail-ad{position:static;margin-top:0}
	.mega__panel{grid-template-columns:1fr 1fr}
	.mega .own-card{display:none}
	.house{width:100%;padding:24px}
	.hero__txt{left:24px;top:24px;bottom:24px;width:auto;max-width:calc(100% - 48px)}
	.strip{width:calc(100% - 32px);left:16px}
	.home__top--below{max-width:none}
}
@media (max-width:860px){
	.nav .nav-own{display:none}
	.hsearch{min-width:44px;flex:0 0 auto;padding:0 12px}
	.hsearch .s-lbl{display:none}
}
@media (max-width:767px){
	:root{--mj-hdr-h:56px}
	.only-phone{display:flex!important}
	span.only-phone,a.only-phone{display:inline-flex!important}
	.not-phone{display:none!important}
	.wrap{padding-inline:16px}
	.sec{margin-top:28px}
	.mj h1{font-size:var(--t22)}
	.mj h2,.sec-h h2,.h28{font-size:var(--t22)!important}
	.hdr{position:sticky;top:0;transition:transform .25s}
	.hdr__in{gap:8px;padding-inline:16px 8px}
	.brand{font-size:var(--t18)}
	.brand .mj-mark{width:28px;height:30px}
	.nav,.hsearch,.hdr__recent,.hdr>.hdr__in>details[data-lang]{display:none}
	.hdr__in::before{content:"";flex:1}
	.pbtn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 8px;border:0;background:none;color:var(--mj-ink);font-weight:600;font-size:var(--t16)}
	.pm{display:block}
	.pm>summary{display:inline-flex}
	.pm .when-open{display:none;align-items:center;gap:6px}
	.pm[open] .when-open{display:inline-flex}
	.pm[open] .when-closed{display:none!important}
	.pm .when-closed{display:inline-flex;align-items:center;gap:6px}
	.pmenu{display:block;position:fixed;left:0;right:0;top:var(--mj-hdr-h);bottom:0;overflow-y:auto;background:var(--mj-bg);border-top:1px solid var(--mj-line);z-index:40}
	.pmenu__in{padding:16px;display:flex;flex-direction:column;gap:22px}
	.pmenu__in .pmenu__h{font-size:var(--t18);margin-bottom:10px;display:flex;align-items:center;gap:8px;font-family:var(--mj-font-head)}
	.pmenu__types{display:grid;grid-template-columns:1fr 1fr;gap:8px}
	.pmenu__types .chip{justify-content:flex-start}
	.pmenu__all{display:inline-flex;min-height:44px;align-items:center;font-weight:700;margin-top:4px}
	.pmenu__list{display:flex;flex-direction:column}
	.pmenu__list a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 4px;color:var(--mj-ink);text-decoration:none;font-weight:600;border-bottom:1px solid var(--mj-line)}
	.pmenu__list a>span:not(.tag-own){flex:1}
	.pmenu__recent{border-bottom:1px solid var(--mj-line)}
	.pmenu__recent>summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 4px;font-weight:600;cursor:pointer;list-style:none}
	.pmenu__recent>summary::-webkit-details-marker{display:none}
	.pmenu__recent>summary>span{flex:1}
	.pmenu__recent-panel{margin:0 0 8px;box-shadow:none}
	.a2hs{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r14);background:#fff;border:1.5px solid var(--mj-ctl);color:var(--mj-ink);text-align:left;width:100%}
	.a2hs__txt{flex:1}.a2hs__txt b{display:block}
	.pmenu__social{display:flex;gap:20px;flex-wrap:wrap}
	.pmenu__social .soc{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--mj-ink);text-decoration:none}
	.pmenu__legal{display:flex;flex-direction:column}
	.pmenu__legal a{min-height:44px;display:flex;align-items:center;color:var(--mj-ink);text-decoration:none}
	body.pm-open{overflow:hidden}
	.home__head{padding-top:14px}
	.home__trust p{font-size:var(--t16)}
	.home__hero{margin-top:12px;gap:12px}
	.hero{height:168px}
	.hero__img img{object-position:52% 40%}
	.hero__shade{background:linear-gradient(0deg,rgba(26,21,52,.92) 0%,rgba(26,21,52,0) 62%)}
	.hero__txt{left:14px;right:14px;top:auto;bottom:12px;max-width:none;gap:6px}
	.hero__txt h2{font-size:var(--t22)}
	.hero__txt p,.hero__facts{display:none}
	.hero__cta{position:fixed;left:-9999px}
	.home__hero .hero{order:1}
	.home__hero .hero__phone{order:2}
	.home__hero .homeplay{order:3}
	.home__hero .home__top{display:none}
	.hero-phone-cta{display:flex;flex-direction:column;gap:0}
	.home__chips{padding-right:0}
	.home__chips .chips--row{padding-right:48px;padding-bottom:4px}
	.scroller::after{content:"";position:absolute;right:0;top:0;bottom:0;width:56px;background:linear-gradient(90deg,rgba(236,231,218,0),var(--mj-bg) 80%);pointer-events:none}
	.grid--5,.grid--6,.grid--4,.grid-games{grid-template-columns:repeat(2,1fr);gap:12px}
	.grid--3{grid-template-columns:1fr}
	.night{margin-top:40px;padding:40px 0}
	.night h2{font-size:var(--t28)}
	.night__figs{grid-template-columns:1fr}
	.house{margin-top:40px;padding:20px 16px}
	.house__txt{width:100%}
	.house__imgs img{width:calc(50% - 6px)}
	.home__text{gap:32px}
	.ad--section,.ad--mid,.ad--bottom{margin:40px auto 0}
	.game__layout{display:block;margin-top:10px}
	.game__title h1{font-size:var(--t22)}
	.game__top .pop-wrap{display:none}
	.game__top .crumbs [aria-current]{display:none}
	.game__top .crumbs .crumbs__sep:nth-last-child(2){display:none}
	.center{flex-wrap:wrap;text-align:center}
	.center svg{flex:0 0 auto}
	.actions__q{width:100%}
	.player{height:200px}
	.player__art img{top:16px;transform:translateX(-50%);height:168px}
	.player__play,.player__fs{display:none}
	.btn-wide.only-phone{margin-top:12px}
	.actions{justify-content:space-between;margin-top:14px}
	.actions__gap{display:none}
	.rail{display:flex!important;flex-direction:column;gap:16px;margin-top:28px}
	.rail-extra{display:block}
	.ad--rail .box{--mj-reserve:250px;width:100%;max-width:300px}
	.strip{display:none!important}
	.hub__head{display:block}
	.hub__feature{margin-top:16px}
	.featured{display:block}
	.featured__img .acard__img img,.featured__img .acard__tiles{height:200px}
	.featured__txt{padding:20px}
	.featured__title{font-size:var(--t22)}
	.article__layout{display:block}
	.article__body h1{font-size:var(--t28)}
	.article__aside{margin-top:40px}
	.foot__grid{grid-template-columns:1fr;gap:24px;padding-block:32px}
	.done{padding:20px 16px}
	.done__imgs img{width:calc(33% - 8px)}
	.lgrid--4{grid-template-columns:1fr 1fr}
}
@media (max-width:359px){.hdr .p-lbl{display:none}}

/* Pseudo-fullscreen for phones without the Fullscreen API (iOS Safari). */
.player.is-pseudo-fs{position:fixed;inset:0;z-index:10001;height:100vh;height:100dvh;border-radius:0;background:#000}
body.pseudo-fs{overflow:hidden}
.pseudo-fs__close{position:absolute;right:8px;top:8px;z-index:2;height:36px;padding:0 12px;border:0;border-radius:var(--r8);background:rgba(0,0,0,.6);color:#fff;font:600 var(--t14) var(--mj-font-body)}
@media (max-width:1599px){.actions__pct{display:none}}
/* Phone hero: the CTA lives outside the card (TZ §6.4). */
.hero__phone{display:none}
@media (max-width:767px){
	.hero__phone{display:flex;flex-direction:column;gap:0;margin-top:12px}
	.hero__phone .hero__daily{color:var(--mj-ink);justify-content:center}
	.hero__cta{display:none}
	.ad--fixed{display:none!important}
	.ad .box{overflow:hidden}
}
/* Left rail 160×600 only when the window has room for it OUTSIDE the content
 * (≥1900 px): 150 px left of the 1280-px wrap, sticky; never beside the frame (NET-ADS-GAP-150-1). */
.game__left{display:none}
.game{position:relative}
@media (min-width:1900px){
	.game__left{display:block;position:absolute;top:0;bottom:0;left:calc(50% - 640px - 150px - 160px);width:160px}
	.game__left .rail-ad-left{position:sticky;top:72px}
}
/* comments block (mu-plugin mj-comments prints rem sizes) */
.mj .mj-comments__note,.mj .mj-comment__date{font-size:var(--t16);color:var(--mj-muted)}
.foot__net .footer__network h3{display:none}
.foot__net .footer__network-card,.foot__net .footer__network-card span{color:#d9e6dc}