/* sj-home.css · Siam855 home (designer, 14.10.2026). Linked last. Tokens: sj-ui.css :root + sj-tokens.css.
   1 header buttons · 2 first screen (B30 offers) · 3 text rhythm of sections · 4 block accents · 5 phone */

/* ── 1 · header: two live buttons, login is an outline pill (our /login/), play is the solid magenta pill (/go/) ── */
.sm-marsh{background:rgba(var(--sj-night-rgb),.94);border-bottom:1px solid var(--sj-line)}
.sm-marsh-weasel{gap:12px}
.sm-mackerel{height:30px;width:auto}
.sm-flint-baguette{background:transparent;padding:0;gap:0;margin-left:6px}
.sm-tuna-crane{font:600 14px var(--sj-text);color:var(--sj-ink-2);padding:8px 12px}
.sm-hx-solo .sm-tuna-crane{text-decoration:none}
.sm-hx-solo .sm-tuna-crane:hover{text-decoration:none}
.sm-flint-quinoa{background:transparent;border:1.5px solid var(--sj-flame);color:var(--sj-ink);font:600 14px var(--sj-text);padding:8px 16px}
.sm-flint-quinoa:hover{background:rgba(var(--sj-flame-rgb),.14);color:var(--sj-ink);text-decoration:none}
.sm-flint-marble{background:linear-gradient(180deg,#cf1aec 0%,var(--sj-flame-deep) 100%);font:700 14px var(--sj-text);padding:9.5px 20px;box-shadow:0 6px 18px rgba(183,15,213,.35)}
.sm-hx-drawer-solo{display:block;color:var(--sj-ink);font-weight:700;font-size:16px;padding:12px 10px;border-radius:12px;text-decoration:none}
.sm-bridge-baguette a.sm-hx-drawer-solo{margin-left:0;font-weight:700;color:var(--sj-ink)}

/* ── 2 · first screen: copy + operator art, then four offer cards that carry their own terms ── */
.sz-6h3gh{background:var(--sj-hx-glow),var(--sj-night)}
.sz-6h3gh>.sz-kxqg1{padding-top:22px}
.sm-hx{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:14px 40px;align-items:center}
@media (min-width:761px){.sm-hx .sm-agate-lynx{display:block;white-space:nowrap}}
.sm-hx-copy{display:flex;flex-direction:column;gap:9px;min-width:0}
.sm-hx .sm-agate-lychee{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font:600 12.5px var(--sj-text);color:var(--sj-ink-3);
  padding:4px 12px;border-radius:var(--sj-r-pill);background:rgba(255,255,255,.05);border:1px solid var(--sj-line)}
.sm-hx .sm-agate-lychee .sz-fsjv0{width:7px;height:7px;border-radius:50%;background:var(--sj-ok-hi);box-shadow:0 0 0 3px rgba(47,191,113,.2)}
.sm-hx .sm-agate-lentil{margin:0;font:700 clamp(27px,3.1vw,40px)/1.38 var(--sj-display);color:var(--sj-ink);text-wrap:balance}
.sm-hx .sm-agate-lynx{background:linear-gradient(92deg,var(--sj-gold) 0%,#ffd98f 40%,var(--sj-flame-hi) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sm-hx .sm-agate-canvas{margin:0;max-width:58ch;font-size:17px;color:var(--sj-ink-2)}
/* author plate: one line (photo · name · role · date); the stand-in keeps the same box */
.sm-hx .sm-agate-river{display:flex;align-items:center;gap:10px;min-width:0;font-size:13.5px;color:var(--sj-ink-3);white-space:nowrap}
.sm-hx .sm-agate-river>span:last-child{overflow:hidden;text-overflow:ellipsis}
.sm-hx .sm-monsoon-jade{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--sj-raise);border:1px solid var(--sj-line-hi)}
.sm-hx .sm-cabin-wool{align-self:flex-start;max-width:100%;padding:4px 12px 4px 4px;border:1px dashed var(--sj-line-hi);border-radius:var(--sj-r-pill)}
.sm-hx-art{justify-self:end;width:100%;max-width:480px}
.sm-hx-art-img{display:block;width:100%;height:auto;border-radius:var(--sj-r-card);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.sm-hx-deals{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:2px 0 0;padding:0;list-style:none}
.sm-hx-deal{display:flex;flex-direction:column;gap:7px;min-width:0;padding:14px 15px 15px;border-radius:var(--sj-r-card);background:var(--sj-hx-card);border:1px solid var(--sj-line)}
.sm-hx-deal-lead{background:var(--sj-hx-card-lead);border-color:rgba(var(--sj-flame-rgb),.6);box-shadow:0 0 0 1px rgba(var(--sj-flame-rgb),.18),0 16px 40px rgba(183,15,213,.2)}
.sm-hx-kind{font:600 12.5px var(--sj-text);color:var(--sj-flame)}
.sm-hx-name{margin:0;font:600 18px/1.4 var(--sj-display);color:var(--sj-ink)}
.sm-hx-value{font:700 23px/1.36 var(--sj-display);color:var(--sj-gold)}
.sm-hx-rows{margin:0;display:flex;flex-direction:column;gap:2px;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.05)}
.sm-hx-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sm-hx-row dt{font-size:13px;color:var(--sj-ink-3);white-space:nowrap}
.sm-hx-row dd{margin:0;font-size:13.5px;font-weight:700;color:var(--sj-ink);text-align:right;white-space:nowrap}
.sm-hx-chips{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}
.sm-hx-chips li{font-size:12.5px;line-height:1.6!important;padding:2px 9px;border-radius:var(--sj-r-pill);background:var(--sj-raise);border:1px solid var(--sj-line);color:var(--sj-ink-2)}
.sm-hx-go{margin-top:auto;display:block;padding:11px 16px;font-size:15px;line-height:1.4}
.sm-hx-go-soft{background:transparent;border:1.5px solid var(--sj-flame-deep);color:var(--sj-ink);padding:9.5px 16px}
.sm-hx .sm-agate-hull{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--sj-ink-4)}
.sm-hx .sm-agate-beaver{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;
  border:1px solid var(--sj-line);border-radius:var(--sj-r-tile);background:rgba(255,255,255,.02)}
.sm-hx .sm-agate-scone{display:flex;flex-direction:column;gap:2px;padding:10px 16px;border-left:1px solid var(--sj-line)}
.sm-hx .sm-agate-scone:first-child{border-left:0}
.sm-hx .sm-agate-summit{font-size:12px;color:var(--sj-ink-4)}
.sm-hx .sm-agate-dolphin{font:600 15px/1.4 var(--sj-display);color:var(--sj-ink)}

/* ── 3 · text around blocks: intro before (2–4 sentences), 1–2 sentences after; one measure, one rhythm ── */
.sm-ridge-stream .sz-jjk1t{gap:var(--sj-hx-gap-out)}
.sm-ridge-stream .sz-u7sc0{gap:8px;max-width:var(--sj-hx-measure)}
.sm-ridge-stream .sz-u7sc0 .sz-24834{max-width:var(--sj-hx-measure);font-size:16.5px;color:var(--sj-ink-2);margin-top:2px}
.sm-ridge-stream .sz-u7sc0+*{margin-top:calc(var(--sj-hx-gap-in) - var(--sj-hx-gap-out))}
.sm-ridge-stream .sz-468ke{font-weight:700;font-size:clamp(25px,2.6vw,34px);color:var(--sj-ink)}
.sm-ridge-stream .sz-p2e0a{font:600 13px var(--sj-text);color:var(--sj-flame)}
.sm-ridge-stream section>.sm-clay{max-width:var(--sj-hx-measure)}
.sm-ridge-stream section>.sm-clay p{font-size:16px;color:var(--sj-ink-3)}
.sm-ridge-stream [data-sj-block="B02"] section>.sm-clay{max-width:76ch}
.sm-ridge-stream [data-sj-block="B02"] section>.sm-clay p{font-size:16.5px;color:var(--sj-ink-2)}
.sm-ridge-stream [data-sj-block="B02"] .sm-clay h3{font:600 21px/1.4 var(--sj-display);margin-top:10px;color:var(--sj-ink)}
.sm-ridge-stream [data-sj-block="B02"] .sm-clay h3::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:3px;
  background:linear-gradient(135deg,var(--sj-gold),var(--sj-flame));vertical-align:.12em}
.sm-ridge-stream h2,.sm-ridge-stream h3{overflow-wrap:normal}

/* ── 4 · block accents in the operator's colours ── */
.sm-ridge-stream .sz-9i0c0{border-color:rgba(248,192,90,.45);background:linear-gradient(180deg,rgba(248,192,90,.08),rgba(248,192,90,.02))}
.sm-ridge-stream .sz-9i0c0 .sz-rzrb7{color:var(--sj-gold)}
.sm-ridge-stream figure img,.sm-ridge-stream .sm-clay img{border-radius:var(--sj-r-tile)}
.sm-ridge-stream .sm-clay figure{max-width:620px}
.sm-ridge-stream [data-sj-block="B32"] .sm-thicket{background:var(--sj-panel);border:1px solid var(--sj-line)}
.sm-ridge-stream [data-sj-block="B32"] .sz-ru98g img{border-radius:var(--sj-r-tile)}

/* ── 5 · phone ── */
@media (max-width:1060px){
  .sm-hx-deals{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .sz-6h3gh>.sz-kxqg1{padding-top:16px}
  .sm-hx{grid-template-columns:minmax(0,1fr);gap:12px}
  .sm-hx-copy{gap:8px}
  .sm-hx .sm-agate-lentil{font-size:26px}
  .sm-hx .sm-agate-canvas{font-size:15px}
  .sm-hx-deals{order:2;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:2px}
  .sm-hx-art{order:3;justify-self:stretch;max-width:none}
  .sm-hx .sm-agate-hull{order:4}
  .sm-hx .sm-agate-beaver{order:5;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm-hx .sm-agate-scone:nth-child(3){border-left:0}
  .sm-hx .sm-agate-scone:nth-child(n+3){border-top:1px solid var(--sj-line)}
  .sm-hx-deal{padding:14px;gap:7px}
  .sm-hx-value{font-size:22px}
  .sm-hx .sm-agate-river{font-size:12.5px}
}
@media (max-width:600px){
  .sm-mackerel{height:22px}
  .sm-flint-quinoa{padding:7px 11px;font-size:12.5px}
  .sm-flint-marble{padding:8px 13px;font-size:12.5px}
}
@media (max-width:400px){
  .sm-marsh-weasel{gap:6px;padding:10px 12px}
  .sm-mackerel{height:20px}
  .sm-flint-quinoa{padding:6px 9px;font-size:12px}
  .sm-flint-marble{padding:7px 11px;font-size:12px}
}

/* engine blocks at phone width: four calculator tabs wrap, prize tiles take two columns */
@media (max-width:600px){
  .sm-ridge-stream .sz-z2agr{flex-wrap:wrap}
  .sm-ridge-stream .sz-z2agr>button{flex:1 1 calc(50% - 6px)}
}
/* lobby: six live-show tiles in one row on desktop (tiles are the operator's own 158×282 frames, never upscaled past ~1.2×) */
@media (min-width:861px){.sm-ridge-stream .sz-ru98g.sm-jute6{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* footer: the mail link carries its visible address (help@siam855.ing), not an icon-only circle */
.sm-pancake-pepper{width:auto;height:auto;min-height:38px;gap:8px;padding:6px 14px 6px 12px;font-size:13.5px;white-space:nowrap}
.sm-pancake-pepper:hover{text-decoration:none}
/* the engine resets aspect-ratio on figure images (sz-ocid7 & co.), so lazy frames had no height until loaded and anchor jumps
   landed short; the home pictures get their own file ratios back */
.sm-ridge-stream img[src*="/brand/deal-"]{aspect-ratio:1024/371}
.sm-ridge-stream img[src*="/brand/phone-"]{aspect-ratio:390/844}
.sm-ridge-stream img[src*="/brand/slot-"]{aspect-ratio:578/408}
.sm-ridge-stream img[src*="/brand/hall-"]{aspect-ratio:158/282}
/* critic I7: author plate — the date is never cut; one line on wide screens, may wrap to two only up to 400px */
.sm-hx .sm-river-date{white-space:nowrap;flex-shrink:0}
@media (max-width:400px){.sm-hx .sm-agate-river{white-space:normal;align-items:center}.sm-hx .sm-agate-river>span:last-child{overflow:visible;text-overflow:clip;line-height:1.5}}
/* critic M2: calculator quick amounts — six in one row on wide screens, 3+3 on a phone (no lonely last button) */
#turnover-calc .sz-way2j{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
#turnover-calc .sz-way2j>button{padding-left:6px;padding-right:6px;white-space:nowrap;text-align:center}
@media (max-width:640px){#turnover-calc .sz-way2j{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* critic B4: a quick amount under the minimum deposit of the open promo is shown as unavailable */
#turnover-calc .sz-way2j>button[data-below]{opacity:.45;text-decoration:line-through}

/* ══ v2 · look (14.10.2026, critic I1 I2 I3 I5 I9 M5 M6) ══ */
/* I1: operator banners are figures, never wider than their own file (1024) and, on a wide screen, 520px beside the block of their band */
.sm-ridge-stream img[src*="/brand/deal-"]{max-width:min(100%,1024px);height:auto}
.sm-ridge-stream section>figure.sz-j2lms{max-width:min(100%,1024px)}
.sm-island-pretzel{display:flex;flex-direction:column;gap:12px;min-width:0}
.sm-island-onyx{display:block;width:100%;max-width:1024px;height:auto;border-radius:var(--sj-r-tile)}
.sm-island-grape{display:flex;flex-direction:column;gap:20px;min-width:0}
/* M5: the head of the folded table stays a real head (no clip) */
.sm-ridge-stream .sm-kumquat{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
@media (min-width:1024px){
  .sm-ridge-stream #daily-checkin,.sm-ridge-stream #lucky-wheel,.sm-ridge-stream #deposit-ladder,.sm-ridge-stream #friend-invite,
  .sm-ridge-stream #how-turnover-works,.sm-ridge-stream #play-plan{display:grid;column-gap:40px;align-items:start}
  /* check-in: table left, banner right */
  .sm-ridge-stream #daily-checkin{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
  .sm-ridge-stream #daily-checkin>.sz-u7sc0{grid-column:1/-1}
  .sm-ridge-stream #daily-checkin>.sz-ejl55{grid-column:1;grid-row:2}
  .sm-ridge-stream #daily-checkin>.sm-clay{grid-column:1;grid-row:3;max-width:none}
  .sm-ridge-stream #daily-checkin>figure{grid-column:2;grid-row:2/span 2}
  /* wheel: banner left, eight prizes right */
  .sm-ridge-stream #lucky-wheel{grid-template-columns:minmax(0,520px) minmax(0,1fr)}
  .sm-ridge-stream #lucky-wheel>.sz-u7sc0{grid-column:1/-1}
  .sm-ridge-stream #lucky-wheel>.sz-bowqs{grid-column:2;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm-ridge-stream #lucky-wheel>.sm-clay{grid-column:2;grid-row:3;max-width:none}
  .sm-ridge-stream #lucky-wheel>figure{grid-column:1;grid-row:2/span 2}
  /* deposit ladder: table left, banner right */
  .sm-ridge-stream #deposit-ladder{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
  .sm-ridge-stream #deposit-ladder>.sz-u7sc0{grid-column:1/-1}
  .sm-ridge-stream #deposit-ladder>.sm-chickpea{grid-column:1;grid-row:2}
  .sm-ridge-stream #deposit-ladder>figure{grid-column:2;grid-row:2}
  .sm-ridge-stream #deposit-ladder>.sm-clay:not(.sm-chickpea){grid-column:1/-1;grid-row:3}
  /* friend invite: headline and closing line left, the table right */
  .sm-ridge-stream #friend-invite{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .sm-ridge-stream #friend-invite>.sz-u7sc0{grid-column:1;grid-row:1}
  .sm-ridge-stream #friend-invite>.sm-chickpea{grid-column:2;grid-row:1/span 2}
  .sm-ridge-stream #friend-invite>.sm-clay:not(.sm-chickpea){grid-column:1;grid-row:2;max-width:none}
  /* text sections: heading left (stays in view), text right */
  .sm-ridge-stream #how-turnover-works,.sm-ridge-stream #play-plan{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .sm-ridge-stream #how-turnover-works>.sz-u7sc0,.sm-ridge-stream #play-plan>.sz-u7sc0{grid-column:1;grid-row:1;position:sticky;top:104px}
  .sm-ridge-stream #how-turnover-works>.sm-clay,.sm-ridge-stream #play-plan>.sm-clay{grid-column:2;grid-row:1;max-width:none}
  /* VIP: rank cards left, banner with its note and the one button under it right */
  .sm-island-grape{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:24px 40px;align-items:start}
  .sm-island-grape>.sm-island-pretzel{order:2}
  .sm-island-grape>.sz-x6cpc{order:1}
  /* in-brief: label left, the worked example right (no half-empty panel) */
  .sm-ridge-stream .sz-9i0c0{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);column-gap:32px;align-items:center;max-width:none}
  .sm-ridge-stream .sz-9i0c0 .sz-waxy4{font-size:18px;line-height:1.7}
}
/* I9: lobby tiles keep their own 158px, one caption under the tile (the studio is in the art and in the alt) */
.sz-ru98g .sz-2ecsk{width:100%;max-width:158px;height:auto;aspect-ratio:158/282}
@media (min-width:861px){.sz-ru98g.sm-jute6{grid-template-columns:repeat(6,minmax(0,158px));justify-content:space-between}}
/* M6: slot art on top, full width of its card, text below (the engine pinned it into the corner) */
.sm-ridge-stream .sm-denim:has(>img[src*="/brand/slot-"]){padding:0 0 16px;gap:6px}
.sm-ridge-stream .sm-denim>img[src*="/brand/slot-"]{order:-1;width:100%;max-width:578px;margin:0 0 6px;aspect-ratio:578/408;height:auto;object-fit:cover;border-radius:0}
.sm-ridge-stream .sm-denim:has(>img[src*="/brand/slot-"])>span{padding:0 16px}
@media (max-width:980px){.sm-ridge-stream .sm-denim:has(>img[src*="/brand/slot-"]):last-child>img{width:100%}}
/* decorative strip of lobby categories */
.sm-ridge-stream img[src*="/brand/cat-strip"]{aspect-ratio:1050/150;border-radius:var(--sj-r-tile)}
.sm-ridge-stream .sm-needle>figure img[src*="/brand/mobile-lobby"]{aspect-ratio:260/460;width:100%;max-width:260px;height:auto;margin:0 auto}
/* I3: rhythm of the dark bands — every second band glows purple from the right with a thin line on top, every fourth of the rest gold from the left */
.sm-ridge-stream [data-sj-block].sz-fxbpd{background:linear-gradient(90deg,transparent,rgba(var(--sj-flame-rgb),.65) 30%,rgba(248,192,90,.55) 70%,transparent) top/100% 2px no-repeat,
  radial-gradient(900px 360px at 90% 0,rgba(var(--sj-flame-rgb),.17),transparent 72%),var(--sj-night-2)}
.sm-ridge-stream [data-sj-block].sz-hijd8:nth-child(4n+1),.sm-ridge-stream [data-sj-block].sz-hijd8:nth-child(4n+3){background:radial-gradient(800px 320px at 6% 0,rgba(248,192,90,.09),transparent 72%),var(--sj-night)}
@media (max-width:1023px){.sm-island-grape>.sm-island-pretzel{order:0}}