/* /html5-slot-machine — AISHTMLNEWDESIGN-455
Page-owned styles. EVERY selector is scoped to #page-html5-slot-machine or a
hsm- prefixed class: this sheet must never style body, a bare
element, #ais-header or #ais-footer. The document reset
(html,body{margin:0}) is owned by the shared layout sheet.
Font is Inter; no body/UI text below 16px.
══════════════════════════════════════════════════════════════════════════
VISUAL DIRECTION — "OPEN TAB"
══════════════════════════════════════════════════════════════════════════
A browser tab, not a cabinet. Deep mulberry ground, bone paper, one
tangerine accent. Every raised panel is a bone card wearing a clipped tab
LUG notched over its top-left edge with a thin chrome rule beneath it —
the silhouette of a tab strip. That reads as "this thing opens in the
browser", which is the one claim this page owns and its fifteen sibling
slot pages do not: no plugin, no install, one build that reflows from
desktop to phone, instant from a URL.
Rule 26: the lugs, rules and gradients are STATIC. Nothing spins, reels,
flashes or loops; every transition below is a finite response to hover,
focus, a click or an accordion toggle.
══════════════════════════════════════════════════════════════════════════ */
#page-html5-slot-machine{
/* ── mulberry / dark grounds ── */
--hsm-night: #190a1d;
--hsm-plum: #2b1330;
--hsm-plum-2: #3a1a41;
--hsm-plum-3: #4b2454;
--hsm-line-d: rgba(255,255,255,.15);
--hsm-on-dark: #f7eef2; /* 14.9:1 on plum */
--hsm-on-dark-2:#d3bcd3; /* 9.6:1 on plum */
/* ── bone / light grounds ── */
--hsm-bone: #fbf7f2;
--hsm-bone-2: #ffffff;
--hsm-bone-3: #f3ebe4;
--hsm-line: #e4d8ce;
--hsm-line-2: #d3c3b6;
/* ── text on bone (all clear 4.5:1 on every bone tone below) ── */
--hsm-text: #241026; /* 15.7:1 */
--hsm-text-2: #574a5e; /* 7.8:1 */
/* ── the single accent ── */
--hsm-tang: #b1400d; /* 5.5:1 on bone — safe for text */
--hsm-tang-2: #8f3309;
--hsm-tang-hi: #f0873f; /* 6.7:1 on plum — dark grounds only */
--hsm-r: 14px;
--hsm-r2: 8px;
--hsm-shadow: 0 1px 0 var(--hsm-line), 0 18px 40px -28px rgba(36,16,38,.55);
font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
color:var(--hsm-text);
background:var(--hsm-bone);
-webkit-font-smoothing:antialiased;
}
/* box-sizing is scoped to this page's own wrapper — it is not a document reset */
#page-html5-slot-machine,
#page-html5-slot-machine *,
#page-html5-slot-machine *::before,
#page-html5-slot-machine *::after{box-sizing:border-box;}
#page-html5-slot-machine img{max-width:100%;height:auto;display:block;}
#page-html5-slot-machine svg{display:block;}
/* ── shared wrappers ─────────────────────────────────────────────────────── */
#page-html5-slot-machine .hsm-lang__wrap,
#page-html5-slot-machine .hsm-crumb__wrap,
#page-html5-slot-machine .hsm-intro__wrap,
#page-html5-slot-machine .hsm-launch__wrap,
#page-html5-slot-machine .hsm-shots__wrap,
#page-html5-slot-machine .hsm-best__wrap,
#page-html5-slot-machine .hsm-port__wrap,
#page-html5-slot-machine .hsm-types__wrap,
#page-html5-slot-machine .hsm-players__wrap,
#page-html5-slot-machine .hsm-admin__wrap,
#page-html5-slot-machine .hsm-boost__wrap,
#page-html5-slot-machine .hsm-using__wrap,
#page-html5-slot-machine .hsm-unity__wrap,
#page-html5-slot-machine .hsm-future__wrap,
#page-html5-slot-machine .hsm-why__wrap,
#page-html5-slot-machine .hsm-more__wrap,
#page-html5-slot-machine .hsm-faq__wrap,
#page-html5-slot-machine .hsm-news__wrap,
#page-html5-slot-machine .hsm-areas__wrap{
max-width:1180px;margin-inline:auto;padding-inline:24px;
}
/* ── the tab-lug motif ───────────────────────────────────────────────────── */
#page-html5-slot-machine .hsm-plate,
#page-html5-slot-machine .hsm-why__panel,
#page-html5-slot-machine .hsm-why__card,
#page-html5-slot-machine .hsm-admin__list,
#page-html5-slot-machine .hsm-boost__copy,
#page-html5-slot-machine .hsm-future__copy{position:relative;}
#page-html5-slot-machine .hsm-plate::before,
#page-html5-slot-machine .hsm-why__panel::before,
#page-html5-slot-machine .hsm-why__card::before,
#page-html5-slot-machine .hsm-admin__list::before,
#page-html5-slot-machine .hsm-boost__copy::before,
#page-html5-slot-machine .hsm-future__copy::before{
content:"";position:absolute;top:-11px;left:28px;width:82px;height:12px;
background:var(--hsm-tang);border-radius:4px 4px 0 0;
clip-path:polygon(0 0,74% 0,100% 100%,0 100%);
}
/* ── buttons ─────────────────────────────────────────────────────────────── */
#page-html5-slot-machine .hsm-btn{
display:inline-block;font:inherit;font-size:17px;font-weight:700;line-height:1;
letter-spacing:.01em;padding:17px 34px;border-radius:999px;border:2px solid transparent;
cursor:pointer;text-align:center;
transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease;
}
#page-html5-slot-machine .hsm-btn--flare{
background:var(--hsm-tang-hi);color:#2a1004;border-color:var(--hsm-tang-hi);
box-shadow:0 12px 26px -14px rgba(240,135,63,.85);
}
#page-html5-slot-machine .hsm-btn--flare:hover,
#page-html5-slot-machine .hsm-btn--flare:focus-visible{
background:#ffa15f;border-color:#ffa15f;transform:translateY(-2px);
}
#page-html5-slot-machine .hsm-btn--ink{
background:var(--hsm-plum);color:var(--hsm-on-dark);border-color:var(--hsm-plum);
box-shadow:0 12px 26px -16px rgba(43,19,48,.9);
}
#page-html5-slot-machine .hsm-btn--ink:hover,
#page-html5-slot-machine .hsm-btn--ink:focus-visible{
background:var(--hsm-tang);border-color:var(--hsm-tang);color:#fff;transform:translateY(-2px);
}
#page-html5-slot-machine .hsm-btn:active{transform:translateY(0);}
#page-html5-slot-machine .hsm-btn:focus-visible,
#page-html5-slot-machine .hsm-vid:focus-visible,
#page-html5-slot-machine .hsm-q__s:focus-visible{outline:3px solid var(--hsm-tang-hi);outline-offset:3px;}
/* in-copy links (repeated nav labels ship as plain links, never as CTAs) */
#page-html5-slot-machine .hsm-inlink{
color:var(--hsm-tang);font-weight:700;text-decoration:underline;
text-underline-offset:3px;text-decoration-thickness:2px;
}
#page-html5-slot-machine .hsm-inlink:hover,
#page-html5-slot-machine .hsm-inlink:focus-visible{color:var(--hsm-tang-2);}
/* ══ 1. LANGUAGE RAIL ════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-lang{background:var(--hsm-night);padding:12px 0;}
#page-html5-slot-machine .hsm-lang__list{
list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:flex-end;
}
#page-html5-slot-machine .hsm-lang__a{
display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
background:rgba(255,255,255,.06);border:1px solid var(--hsm-line-d);
color:var(--hsm-on-dark);font-size:16px;font-weight:600;line-height:1;
transition:background-color .16s ease,border-color .16s ease;
}
#page-html5-slot-machine .hsm-lang__a:hover,
#page-html5-slot-machine .hsm-lang__a:focus-visible{
background:rgba(240,135,63,.18);border-color:var(--hsm-tang-hi);color:#fff;
}
#page-html5-slot-machine .hsm-lang__flag{width:18px;height:18px;border-radius:50%;object-fit:cover;}
/* ══ 2. HERO — full-bleed, image-free, STATIC gradient ═══════════════════ */
#page-html5-slot-machine .hsm-hero{
width:100%;padding:clamp(64px,8vw,120px) 24px clamp(60px,7vw,104px);
background:
linear-gradient(180deg,rgba(240,135,63,.10) 0%,rgba(240,135,63,0) 46%),
linear-gradient(146deg,var(--hsm-plum-2) 0%,var(--hsm-plum) 44%,var(--hsm-night) 100%);
border-bottom:3px solid var(--hsm-tang);
color:var(--hsm-on-dark);
}
#page-html5-slot-machine .hsm-hero__inner{max-width:900px;margin-inline:auto;text-align:center;}
#page-html5-slot-machine .hsm-hero__eyebrow{
display:inline-block;margin:0 0 22px;padding:9px 18px 9px 16px;
background:var(--hsm-tang-hi);color:#2a1004;
font-size:16px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;line-height:1;
border-radius:4px 4px 0 0;clip-path:polygon(0 0,100% 0,93% 100%,0 100%);padding-right:30px;
}
#page-html5-slot-machine .hsm-hero__h1{
margin:0 0 22px;font-size:clamp(34px,5.1vw,58px);line-height:1.08;
font-weight:800;letter-spacing:-.022em;color:#fff;
}
#page-html5-slot-machine .hsm-hero__lede{
margin:0 auto 34px;max-width:760px;font-size:clamp(17px,1.5vw,19px);
line-height:1.72;color:var(--hsm-on-dark-2);
}
#page-html5-slot-machine .hsm-hero__act{margin:0;}
/* ══ 3. BREADCRUMB ══════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-crumb{background:var(--hsm-bone-3);border-bottom:1px solid var(--hsm-line);}
#page-html5-slot-machine .hsm-crumb__wrap{
display:flex;align-items:center;gap:10px;padding-block:14px;font-size:16px;
}
#page-html5-slot-machine .hsm-crumb__back{
display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
border-radius:50%;background:var(--hsm-bone-2);border:1px solid var(--hsm-line-2);
transition:border-color .16s ease,background-color .16s ease;
}
#page-html5-slot-machine .hsm-crumb__back:hover,
#page-html5-slot-machine .hsm-crumb__back:focus-visible{border-color:var(--hsm-tang);background:#fff;}
#page-html5-slot-machine .hsm-crumb__icon{width:14px;height:14px;}
#page-html5-slot-machine .hsm-crumb__a{color:var(--hsm-tang);font-weight:700;}
#page-html5-slot-machine .hsm-crumb__a:hover,
#page-html5-slot-machine .hsm-crumb__a:focus-visible{text-decoration:underline;text-underline-offset:3px;}
#page-html5-slot-machine .hsm-crumb__now{color:var(--hsm-text-2);font-weight:600;}
/* ══ 4. INTRO ═══════════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-intro{background:var(--hsm-bone);padding:clamp(52px,6vw,88px) 0;}
#page-html5-slot-machine .hsm-intro__wrap{
display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
gap:clamp(28px,4vw,56px);align-items:center;
}
#page-html5-slot-machine .hsm-intro__plate{
margin:0;border:1px solid var(--hsm-line);border-radius:var(--hsm-r);overflow:hidden;
background:var(--hsm-bone-2);box-shadow:var(--hsm-shadow);
}
#page-html5-slot-machine .hsm-intro__img{width:100%;}
#page-html5-slot-machine .hsm-intro__copy{border-left:3px solid var(--hsm-tang);padding-left:clamp(20px,2.4vw,32px);}
#page-html5-slot-machine .hsm-intro__copy p{
margin:0 0 20px;font-size:17px;line-height:1.78;color:var(--hsm-text-2);
}
#page-html5-slot-machine .hsm-intro__copy p:last-child{margin-bottom:0;}
#page-html5-slot-machine .hsm-intro__copy p:first-child{
font-size:clamp(19px,1.8vw,22px);line-height:1.62;color:var(--hsm-text);font-weight:600;
}
/* ══ 5. LAUNCH BAND ═════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-launch{
background:linear-gradient(120deg,var(--hsm-plum) 0%,var(--hsm-plum-2) 100%);
padding:clamp(52px,6vw,86px) 0;color:var(--hsm-on-dark);
border-block:1px solid var(--hsm-plum-3);
}
#page-html5-slot-machine .hsm-launch__wrap{max-width:880px;text-align:center;}
#page-html5-slot-machine .hsm-launch__h2{
margin:0 0 16px;font-size:clamp(26px,3.4vw,42px);line-height:1.16;font-weight:800;
letter-spacing:-.018em;color:#fff;
}
#page-html5-slot-machine .hsm-launch__p{
margin:0 auto 30px;max-width:620px;font-size:18px;line-height:1.72;color:var(--hsm-on-dark-2);
}
#page-html5-slot-machine .hsm-launch__act{margin:0;}
/* ══ section heading rhythm (light grounds) ═════════════════════════════ */
#page-html5-slot-machine .hsm-shots__h2,
#page-html5-slot-machine .hsm-best__h2,
#page-html5-slot-machine .hsm-types__h2,
#page-html5-slot-machine .hsm-players__h2,
#page-html5-slot-machine .hsm-boost__h2,
#page-html5-slot-machine .hsm-using__h2,
#page-html5-slot-machine .hsm-future__h2,
#page-html5-slot-machine .hsm-more__h2,
#page-html5-slot-machine .hsm-faq__h2,
#page-html5-slot-machine .hsm-areas__h2{
margin:0 0 18px;font-size:clamp(25px,3.1vw,38px);line-height:1.2;font-weight:800;
letter-spacing:-.018em;color:var(--hsm-text);
}
#page-html5-slot-machine .hsm-port__h2,
#page-html5-slot-machine .hsm-admin__h2,
#page-html5-slot-machine .hsm-why__h2,
#page-html5-slot-machine .hsm-news__h2{
margin:0 0 18px;font-size:clamp(25px,3.1vw,38px);line-height:1.2;font-weight:800;
letter-spacing:-.018em;color:#fff;
}
/* ══ 6. SCREENSHOTS ═════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-shots{background:var(--hsm-bone-3);padding:clamp(52px,6vw,88px) 0;}
#page-html5-slot-machine .hsm-shots__h2{text-align:center;margin-bottom:34px;}
#page-html5-slot-machine .hsm-shots__grid{
list-style:none;margin:0;padding:0;display:grid;gap:20px;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
#page-html5-slot-machine .hsm-shot{
position:relative;border-radius:var(--hsm-r);overflow:hidden;background:var(--hsm-plum);
border:1px solid var(--hsm-line-2);box-shadow:var(--hsm-shadow);
}
#page-html5-slot-machine .hsm-shot::after{
content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--hsm-tang);
transform:scaleX(.22);transform-origin:left;transition:transform .2s ease;
}
#page-html5-slot-machine .hsm-shot:hover::after{transform:scaleX(1);}
#page-html5-slot-machine .hsm-shot__img{width:100%;aspect-ratio:16/9;object-fit:cover;}
/* ══ 7. BEST SOLUTIONS ══════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-best{background:var(--hsm-bone);padding:clamp(56px,6.5vw,96px) 0;}
#page-html5-slot-machine .hsm-best__head{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);
align-items:end;margin-bottom:40px;
}
#page-html5-slot-machine .hsm-best__p{margin:0;font-size:17px;line-height:1.78;color:var(--hsm-text-2);}
#page-html5-slot-machine .hsm-best__h3{
margin:0 0 16px;font-size:clamp(20px,2vw,26px);font-weight:800;color:var(--hsm-text);
letter-spacing:-.012em;
}
#page-html5-slot-machine .hsm-best__chips{
list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:10px;
}
#page-html5-slot-machine .hsm-best__chips .hsm-chip{
background:var(--hsm-plum);color:var(--hsm-on-dark);
font-size:16px;font-weight:700;line-height:1.25;padding:11px 18px;
border-radius:var(--hsm-r2) var(--hsm-r2) var(--hsm-r2) 0;border:1px solid var(--hsm-plum-3);
}
#page-html5-slot-machine .hsm-best__p2{
margin:0 0 36px;max-width:820px;font-size:17px;line-height:1.78;color:var(--hsm-text-2);
}
#page-html5-slot-machine .hsm-best__games{
list-style:none;margin:0 0 48px;padding:0;display:grid;gap:20px;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
#page-html5-slot-machine .hsm-best__games .hsm-game__a{
display:block;background:var(--hsm-bone-2);border:1px solid var(--hsm-line);
border-radius:var(--hsm-r);overflow:hidden;height:100%;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
#page-html5-slot-machine .hsm-best__games .hsm-game__a:hover,
#page-html5-slot-machine .hsm-best__games .hsm-game__a:focus-visible{
transform:translateY(-4px);border-color:var(--hsm-tang);box-shadow:var(--hsm-shadow);
}
#page-html5-slot-machine .hsm-game__shot{display:block;background:var(--hsm-bone-3);}
#page-html5-slot-machine .hsm-game__img{width:100%;aspect-ratio:1/1;object-fit:cover;}
#page-html5-slot-machine .hsm-best__games .hsm-game__h3{
margin:0;padding:16px 18px;font-size:18px;font-weight:700;color:var(--hsm-text);
border-top:3px solid var(--hsm-tang);
}
#page-html5-slot-machine .hsm-best__studios{
list-style:none;margin:0 0 36px;padding:0;display:grid;gap:14px;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
#page-html5-slot-machine .hsm-best__studios .hsm-studio{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
padding:20px 12px;background:var(--hsm-bone-2);border:1px solid var(--hsm-line);
border-radius:var(--hsm-r2);text-align:center;
}
#page-html5-slot-machine .hsm-studio__img{width:auto;height:42px;object-fit:contain;}
#page-html5-slot-machine .hsm-best__studios .hsm-studio__h3{
margin:0;font-size:16px;font-weight:600;color:var(--hsm-text-2);line-height:1.35;
}
#page-html5-slot-machine .hsm-best__act{margin:0;text-align:center;}
/* ══ 8. PORTFOLIO ═══════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-port{
background:var(--hsm-night);padding:clamp(56px,6.5vw,96px) 0;color:var(--hsm-on-dark);
}
#page-html5-slot-machine .hsm-port__h2{text-align:center;margin-bottom:44px;}
#page-html5-slot-machine .hsm-plate{
background:var(--hsm-plum);border:1px solid var(--hsm-plum-3);border-radius:var(--hsm-r);
padding:30px clamp(18px,2.4vw,30px) 26px;margin-bottom:38px;
}
#page-html5-slot-machine .hsm-plate .hsm-plate__h3{
margin:0 0 20px;font-size:19px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--hsm-tang-hi);
}
#page-html5-slot-machine .hsm-plate__list{
list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px;
}
#page-html5-slot-machine .hsm-plate__list .hsm-mark{
display:flex;align-items:center;justify-content:center;
min-width:150px;flex:1 1 150px;max-width:210px;height:96px;padding:12px 16px;
background:var(--hsm-bone-2);border-radius:var(--hsm-r2);border:1px solid var(--hsm-line-2);
}
#page-html5-slot-machine .hsm-mark__img{width:auto;max-height:100%;object-fit:contain;}
#page-html5-slot-machine .hsm-port__act{margin:8px 0 0;text-align:center;}
/* ══ 9. SLOT TYPES ══════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-types{background:var(--hsm-bone-3);padding:clamp(56px,6.5vw,96px) 0;}
#page-html5-slot-machine .hsm-types__h2{max-width:820px;margin-bottom:36px;}
#page-html5-slot-machine .hsm-types__grid{
list-style:none;margin:0 0 40px;padding:0;display:grid;gap:22px;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
#page-html5-slot-machine .hsm-types__grid .hsm-type__fig{
margin:0;background:var(--hsm-bone-2);border:1px solid var(--hsm-line);
border-radius:var(--hsm-r);overflow:hidden;height:100%;
transition:border-color .18s ease,transform .18s ease;
}
#page-html5-slot-machine .hsm-types__grid .hsm-type__fig:hover{
border-color:var(--hsm-tang);transform:translateY(-3px);
}
#page-html5-slot-machine .hsm-type__img{width:100%;aspect-ratio:16/9;object-fit:cover;}
#page-html5-slot-machine .hsm-types__grid .hsm-type__cap{
padding:16px 18px;font-size:17px;font-weight:700;color:var(--hsm-text);
border-top:1px solid var(--hsm-line);
}
#page-html5-slot-machine .hsm-types__act{margin:0;}
/* ══ 10. PLAYER FEATURES ════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-players{background:var(--hsm-bone);padding:clamp(56px,6.5vw,96px) 0;}
#page-html5-slot-machine .hsm-players__h2{max-width:780px;margin-bottom:36px;}
#page-html5-slot-machine .hsm-players__grid{
list-style:none;margin:0;padding:0;display:grid;gap:18px;
grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
#page-html5-slot-machine .hsm-players__grid .hsm-feat{
position:relative;background:var(--hsm-bone-2);border:1px solid var(--hsm-line);
border-top:3px solid var(--hsm-line-2);border-radius:var(--hsm-r2);
padding:24px 22px 22px;transition:border-top-color .18s ease,box-shadow .18s ease;
}
#page-html5-slot-machine .hsm-players__grid .hsm-feat:hover{
border-top-color:var(--hsm-tang);box-shadow:var(--hsm-shadow);
}
#page-html5-slot-machine .hsm-feat__tick{width:22px;height:22px;margin-bottom:12px;}
#page-html5-slot-machine .hsm-players__grid .hsm-feat__h3{
margin:0 0 10px;font-size:18px;font-weight:800;color:var(--hsm-text);line-height:1.32;
}
#page-html5-slot-machine .hsm-players__grid .hsm-feat__p{
margin:0;font-size:16px;line-height:1.72;color:var(--hsm-text-2);
}
/* ══ 11. ADMIN PANEL ════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-admin{
background:var(--hsm-plum);padding:clamp(56px,6.5vw,96px) 0;color:var(--hsm-on-dark);
}
#page-html5-slot-machine .hsm-admin__h2{max-width:780px;margin-bottom:44px;}
#page-html5-slot-machine .hsm-admin__list{
margin:0;background:var(--hsm-night);border:1px solid var(--hsm-plum-3);
border-radius:var(--hsm-r);padding:clamp(20px,3vw,38px);
display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 clamp(24px,3vw,48px);
}
#page-html5-slot-machine .hsm-admin__list .hsm-row{
padding:20px 0;border-bottom:1px solid var(--hsm-line-d);
}
#page-html5-slot-machine .hsm-admin__list .hsm-row__t{
margin:0 0 8px;font-size:18px;font-weight:800;color:var(--hsm-tang-hi);line-height:1.34;
}
#page-html5-slot-machine .hsm-admin__list .hsm-row__d{
margin:0;font-size:16px;line-height:1.72;color:var(--hsm-on-dark-2);
}
/* ══ 12. BOOST ══════════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-boost{background:var(--hsm-bone-3);padding:clamp(56px,6.5vw,96px) 0;}
#page-html5-slot-machine .hsm-boost__wrap{
display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:clamp(28px,4vw,60px);align-items:center;
}
#page-html5-slot-machine .hsm-boost__plate{margin:0;}
#page-html5-slot-machine .hsm-boost__img{
width:100%;border-radius:var(--hsm-r);border:1px solid var(--hsm-line-2);background:var(--hsm-bone-2);
}
#page-html5-slot-machine .hsm-boost__copy{
background:var(--hsm-bone-2);border:1px solid var(--hsm-line);border-radius:var(--hsm-r);
padding:clamp(26px,3vw,40px);box-shadow:var(--hsm-shadow);
}
#page-html5-slot-machine .hsm-boost__list{list-style:none;margin:0 0 30px;padding:0;}
#page-html5-slot-machine .hsm-boost__list .hsm-offer{
display:flex;align-items:flex-start;gap:12px;padding:11px 0;
border-bottom:1px dashed var(--hsm-line);
}
#page-html5-slot-machine .hsm-offer__tick{width:22px;height:22px;flex:none;margin-top:2px;}
#page-html5-slot-machine .hsm-boost__list .hsm-offer__a{
font-size:17px;font-weight:600;line-height:1.5;color:var(--hsm-text);
transition:color .16s ease;
}
#page-html5-slot-machine .hsm-boost__list .hsm-offer__a:hover,
#page-html5-slot-machine .hsm-boost__list .hsm-offer__a:focus-visible{
color:var(--hsm-tang);text-decoration:underline;text-underline-offset:3px;
}
#page-html5-slot-machine .hsm-boost__act{margin:0;}
/* ══ 13. FEATURE SET ════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-using{background:var(--hsm-bone);padding:clamp(56px,6.5vw,96px) 0;}
#page-html5-slot-machine .hsm-using__h2{margin-bottom:36px;}
#page-html5-slot-machine .hsm-using__grid{
list-style:none;margin:0;padding:0;
column-count:3;column-gap:22px;
}
#page-html5-slot-machine .hsm-using__grid .hsm-spec{
break-inside:avoid;-webkit-column-break-inside:avoid;
background:var(--hsm-bone-2);border:1px solid var(--hsm-line);border-radius:var(--hsm-r2);
padding:22px 22px 20px;margin:0 0 22px;
border-left:3px solid var(--hsm-tang);
}
#page-html5-slot-machine .hsm-using__grid .hsm-spec__h3{
margin:0 0 9px;font-size:18px;font-weight:800;color:var(--hsm-text);line-height:1.32;
}
#page-html5-slot-machine .hsm-using__grid .hsm-spec__p{
margin:0;font-size:16px;line-height:1.72;color:var(--hsm-text-2);
}
/* ══ 14. UNITY BAND ═════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-unity{
background:linear-gradient(104deg,var(--hsm-night) 0%,var(--hsm-plum-2) 100%);
padding:clamp(52px,6vw,86px) 0;color:var(--hsm-on-dark);
border-top:3px solid var(--hsm-tang);
}
#page-html5-slot-machine .hsm-unity__wrap{max-width:900px;}
#page-html5-slot-machine .hsm-unity__h2{
margin:0 0 16px;font-size:clamp(25px,3.2vw,40px);line-height:1.18;font-weight:800;
letter-spacing:-.018em;color:#fff;
}
#page-html5-slot-machine .hsm-unity__p{
margin:0 0 30px;font-size:18px;line-height:1.72;color:var(--hsm-on-dark-2);
}
#page-html5-slot-machine .hsm-unity__p .hsm-inlink{color:var(--hsm-tang-hi);}
#page-html5-slot-machine .hsm-unity__p .hsm-inlink:hover,
#page-html5-slot-machine .hsm-unity__p .hsm-inlink:focus-visible{color:#ffa15f;}
#page-html5-slot-machine .hsm-unity__act{margin:0;}
#page-html5-slot-machine .hsm-unity .hsm-btn--ink{
background:var(--hsm-bone);color:var(--hsm-text);border-color:var(--hsm-bone);
}
#page-html5-slot-machine .hsm-unity .hsm-btn--ink:hover,
#page-html5-slot-machine .hsm-unity .hsm-btn--ink:focus-visible{
background:var(--hsm-tang-hi);border-color:var(--hsm-tang-hi);color:#2a1004;
}
/* ══ 15. THE FUTURE ═════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-future{background:var(--hsm-bone-3);padding:clamp(56px,6.5vw,96px) 0;}
#page-html5-slot-machine .hsm-future__wrap{
display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
gap:clamp(28px,4vw,56px);align-items:start;
}
#page-html5-slot-machine .hsm-future__copy{
background:var(--hsm-bone-2);border:1px solid var(--hsm-line);border-radius:var(--hsm-r);
padding:clamp(26px,3vw,42px);box-shadow:var(--hsm-shadow);
}
#page-html5-slot-machine .hsm-future__copy .hsm-future__p{
margin:0 0 22px;font-size:17px;line-height:1.78;color:var(--hsm-text-2);
}
#page-html5-slot-machine .hsm-future__copy .hsm-future__h3{
margin:0 0 18px;font-size:19px;font-weight:800;line-height:1.44;color:var(--hsm-text);
padding-left:14px;border-left:3px solid var(--hsm-tang);
}
#page-html5-slot-machine .hsm-future__list{list-style:none;margin:0 0 24px;padding:0;}
#page-html5-slot-machine .hsm-future__list .hsm-bene{
display:flex;align-items:flex-start;gap:12px;padding:9px 0;
font-size:17px;line-height:1.62;color:var(--hsm-text);font-weight:600;
}
#page-html5-slot-machine .hsm-bene__dot{width:12px;height:12px;flex:none;margin-top:8px;}
#page-html5-slot-machine .hsm-future__plate{
margin:0;border:1px solid var(--hsm-line-2);border-radius:var(--hsm-r);overflow:hidden;
background:var(--hsm-bone-2);position:sticky;top:24px;
}
#page-html5-slot-machine .hsm-future__img{width:100%;}
/* ══ 16. WHY AIS ════════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-why{
background:var(--hsm-night);padding:clamp(56px,6.5vw,96px) 0;color:var(--hsm-on-dark);
}
#page-html5-slot-machine .hsm-why__h2{max-width:900px;}
#page-html5-slot-machine .hsm-why .hsm-why__p{
margin:0 0 20px;max-width:900px;font-size:17px;line-height:1.78;color:var(--hsm-on-dark-2);
}
#page-html5-slot-machine .hsm-why__panel{
margin:36px 0 34px;background:var(--hsm-plum);border:1px solid var(--hsm-plum-3);
border-radius:var(--hsm-r);padding:clamp(24px,3vw,38px);
}
#page-html5-slot-machine .hsm-why__panel .hsm-why__h3{
margin:0 0 20px;font-size:20px;font-weight:800;color:var(--hsm-tang-hi);letter-spacing:.01em;
}
#page-html5-slot-machine .hsm-why__list{
list-style:none;margin:0;padding:0;display:grid;gap:16px;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
#page-html5-slot-machine .hsm-why__list .hsm-why__li{
padding:16px 18px;background:rgba(255,255,255,.05);border:1px solid var(--hsm-line-d);
border-radius:var(--hsm-r2);border-left:3px solid var(--hsm-tang-hi);
font-size:16px;line-height:1.68;color:var(--hsm-on-dark);
}
#page-html5-slot-machine .hsm-why__pair{
display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;
}
#page-html5-slot-machine .hsm-why__pair .hsm-why__card{
background:var(--hsm-bone);border-radius:var(--hsm-r);padding:clamp(24px,3vw,34px);
}
#page-html5-slot-machine .hsm-why__pair .hsm-why__h3b{
margin:0 0 10px;font-size:20px;font-weight:800;color:var(--hsm-text);
}
#page-html5-slot-machine .hsm-why__pair .hsm-why__cp{
margin:0;font-size:16px;line-height:1.72;color:var(--hsm-text-2);
}
/* ══ 17. DISCOVER MORE ══════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-more{background:var(--hsm-bone);padding:clamp(52px,6vw,88px) 0;}
#page-html5-slot-machine .hsm-more__h2{margin-bottom:30px;}
#page-html5-slot-machine .hsm-more__list{
list-style:none;margin:0;padding:0;display:grid;gap:10px;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
#page-html5-slot-machine .hsm-more__list .hsm-more__a{
display:block;height:100%;padding:15px 18px;font-size:16px;font-weight:600;line-height:1.5;
color:var(--hsm-text);background:var(--hsm-bone-2);border:1px solid var(--hsm-line);
border-radius:var(--hsm-r2);
transition:border-color .16s ease,color .16s ease,transform .16s ease;
}
#page-html5-slot-machine .hsm-more__list .hsm-more__a:hover,
#page-html5-slot-machine .hsm-more__list .hsm-more__a:focus-visible{
border-color:var(--hsm-tang);color:var(--hsm-tang);transform:translateX(3px);
}
/* ══ 18. FAQ ════════════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-faq{background:var(--hsm-bone-3);padding:clamp(56px,6.5vw,96px) 0;}
#page-html5-slot-machine .hsm-faq__wrap{max-width:920px;}
#page-html5-slot-machine .hsm-faq__h2{text-align:center;margin-bottom:34px;}
#page-html5-slot-machine .hsm-faq__list .hsm-q{
background:var(--hsm-bone-2);border:1px solid var(--hsm-line);border-radius:var(--hsm-r2);
margin-bottom:12px;overflow:hidden;
}
#page-html5-slot-machine .hsm-faq__list .hsm-q[open]{border-color:var(--hsm-tang);}
#page-html5-slot-machine .hsm-faq__list .hsm-q__s{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:20px 22px;cursor:pointer;list-style:none;
}
#page-html5-slot-machine .hsm-faq__list .hsm-q__s::-webkit-details-marker{display:none;}
#page-html5-slot-machine .hsm-faq__list .hsm-q__h3{
margin:0;font-size:18px;font-weight:700;line-height:1.44;color:var(--hsm-text);
}
#page-html5-slot-machine .hsm-faq__list .hsm-q__mark{
position:relative;flex:none;width:26px;height:26px;border-radius:50%;
background:var(--hsm-bone-3);border:1px solid var(--hsm-line-2);
transition:background-color .16s ease,border-color .16s ease;
}
#page-html5-slot-machine .hsm-faq__list .hsm-q__mark::before,
#page-html5-slot-machine .hsm-faq__list .hsm-q__mark::after{
content:"";position:absolute;left:50%;top:50%;background:var(--hsm-text);
transform:translate(-50%,-50%);transition:opacity .16s ease;
}
#page-html5-slot-machine .hsm-faq__list .hsm-q__mark::before{width:11px;height:2px;}
#page-html5-slot-machine .hsm-faq__list .hsm-q__mark::after{width:2px;height:11px;}
#page-html5-slot-machine .hsm-faq__list .hsm-q[open] .hsm-q__mark{
background:var(--hsm-tang);border-color:var(--hsm-tang);
}
#page-html5-slot-machine .hsm-faq__list .hsm-q[open] .hsm-q__mark::before{background:#fff;}
#page-html5-slot-machine .hsm-faq__list .hsm-q[open] .hsm-q__mark::after{opacity:0;}
#page-html5-slot-machine .hsm-faq__list .hsm-q__a{
padding:0 22px 22px;border-top:1px solid var(--hsm-line);margin-top:-1px;
}
#page-html5-slot-machine .hsm-faq__list .hsm-q__a p{
margin:18px 0 0;font-size:16px;line-height:1.76;color:var(--hsm-text-2);
}
/* ══ 19. NEWS / SUCCESS STORIES ═════════════════════════════════════════ */
#page-html5-slot-machine .hsm-news{
background:linear-gradient(160deg,var(--hsm-plum) 0%,var(--hsm-night) 100%);
padding:clamp(56px,6.5vw,96px) 0;color:var(--hsm-on-dark);
}
#page-html5-slot-machine .hsm-news__h2{margin-bottom:6px;}
#page-html5-slot-machine .hsm-news .hsm-news__h3{
margin:0 0 34px;font-size:18px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--hsm-tang-hi);
}
#page-html5-slot-machine .hsm-news__grid{
list-style:none;margin:0 0 28px;padding:0;display:grid;gap:22px;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
#page-html5-slot-machine .hsm-news__grid .hsm-story{
background:var(--hsm-plum-2);border:1px solid var(--hsm-plum-3);border-radius:var(--hsm-r);
overflow:hidden;display:flex;flex-direction:column;
}
#page-html5-slot-machine .hsm-vid{
position:relative;display:block;width:100%;padding:0;border:0;background:var(--hsm-night);
cursor:pointer;
}
#page-html5-slot-machine .hsm-vid__img{width:100%;aspect-ratio:4/3;object-fit:cover;}
#page-html5-slot-machine .hsm-vid__play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
display:flex;align-items:center;justify-content:center;width:60px;height:60px;
border-radius:50%;background:var(--hsm-tang);color:#fff;
box-shadow:0 8px 22px -8px rgba(0,0,0,.7);
transition:background-color .16s ease,transform .16s ease;
}
#page-html5-slot-machine .hsm-vid:hover .hsm-vid__play{background:var(--hsm-tang-hi);transform:translate(-50%,-50%) scale(1.07);}
#page-html5-slot-machine .hsm-story__frame{width:100%;aspect-ratio:4/3;border:0;display:block;}
#page-html5-slot-machine .hsm-news__grid .hsm-story__q{
margin:0;padding:22px;font-size:16px;line-height:1.72;color:var(--hsm-on-dark-2);
border-top:3px solid var(--hsm-tang);
}
#page-html5-slot-machine .hsm-news__more{margin:0;}
#page-html5-slot-machine .hsm-news__more .hsm-inlink{color:var(--hsm-tang-hi);}
#page-html5-slot-machine .hsm-news__more .hsm-inlink:hover,
#page-html5-slot-machine .hsm-news__more .hsm-inlink:focus-visible{color:#ffa15f;}
/* ══ 20. AREA WE SERVE ══════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-areas{background:var(--hsm-bone);padding:clamp(56px,6.5vw,96px) 0;}
#page-html5-slot-machine .hsm-areas__h2{text-align:center;margin-bottom:38px;}
#page-html5-slot-machine .hsm-areas__grid{
list-style:none;margin:0;padding:0;display:grid;gap:20px;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
#page-html5-slot-machine .hsm-areas__grid .hsm-area{
background:var(--hsm-bone-2);border:1px solid var(--hsm-line);border-radius:var(--hsm-r);
padding:26px 24px;border-top:3px solid var(--hsm-tang);
}
#page-html5-slot-machine .hsm-areas__grid .hsm-area__h3{
margin:0 0 14px;font-size:17px;font-weight:800;letter-spacing:.1em;color:var(--hsm-text);
}
#page-html5-slot-machine .hsm-areas__grid .hsm-area__tel{margin:0 0 12px;}
#page-html5-slot-machine .hsm-areas__grid .hsm-area__a{
font-size:17px;font-weight:700;color:var(--hsm-tang);
}
#page-html5-slot-machine .hsm-areas__grid .hsm-area__a:hover,
#page-html5-slot-machine .hsm-areas__grid .hsm-area__a:focus-visible{
color:var(--hsm-tang-2);text-decoration:underline;text-underline-offset:3px;
}
#page-html5-slot-machine .hsm-areas__grid .hsm-area__addr{
display:flex;align-items:flex-start;gap:10px;margin:0;
font-size:16px;line-height:1.68;color:var(--hsm-text-2);
}
#page-html5-slot-machine .hsm-area__pin{width:14px;height:20px;flex:none;margin-top:3px;}
/* ══ CTA MODAL ══════════════════════════════════════════════════════════ */
#page-html5-slot-machine .hsm-modal{
display:none;position:fixed;inset:0;z-index:9999;
background:rgba(25,10,29,.72);padding:100px 24px 24px 24px; overflow-y: auto;
align-items: flex-start;justify-content:center;
}
#page-html5-slot-machine .hsm-modal.is-open{display:flex;}
#page-html5-slot-machine .hsm-modal__box{
position:relative;width:100%;max-width:640px;max-height:88vh;
background:var(--hsm-bone-2);border-radius:var(--hsm-r);overflow-y: auto;
box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
#page-html5-slot-machine .hsm-modal__box iframe{
display:block;width:100%;height:78vh;border:0;background:var(--hsm-bone-2);
}
#page-html5-slot-machine .hsm-modal__close{
position:absolute;top:12px;right:12px;z-index:2;
display:flex;align-items:center;justify-content:center;width:38px;height:38px;
border-radius:50%;border:1px solid var(--hsm-line-2);background:var(--hsm-bone);
color:var(--hsm-text);cursor:pointer;
transition:background-color .16s ease,color .16s ease;
}
#page-html5-slot-machine .hsm-modal__close:hover,
#page-html5-slot-machine .hsm-modal__close:focus-visible{background:var(--hsm-tang);color:#fff;}
/* ══ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width:1024px){
#page-html5-slot-machine .hsm-using__grid{column-count:2;}
}
@media (max-width:880px){
#page-html5-slot-machine .hsm-intro__wrap,
#page-html5-slot-machine .hsm-boost__wrap,
#page-html5-slot-machine .hsm-future__wrap,
#page-html5-slot-machine .hsm-best__head{grid-template-columns:minmax(0,1fr);}
#page-html5-slot-machine .hsm-intro__copy{border-left:0;border-top:3px solid var(--hsm-tang);padding-left:0;padding-top:22px;}
#page-html5-slot-machine .hsm-future__plate{position:static;}
#page-html5-slot-machine .hsm-lang__list{justify-content:flex-start;}
}
@media (max-width:640px){
#page-html5-slot-machine .hsm-using__grid{column-count:1;}
#page-html5-slot-machine .hsm-admin__list{grid-template-columns:minmax(0,1fr);}
#page-html5-slot-machine .hsm-btn{width:100%;max-width:340px;}
#page-html5-slot-machine .hsm-plate__list .hsm-mark{min-width:130px;flex:1 1 130px;height:84px;}
#page-html5-slot-machine .hsm-modal{padding:100px 0 0 0; overflow-y: auto;}
#page-html5-slot-machine .hsm-modal__box{max-width:none;max-height:100vh;border-radius:0;}
#page-html5-slot-machine .hsm-modal__box iframe{height:100vh;}
}
@media (prefers-reduced-motion:reduce){
#page-html5-slot-machine *,
#page-html5-slot-machine *::before,
#page-html5-slot-machine *::after{
animation:none !important;transition-duration:.01ms !important;
}
}