.peak-slot-app { --peak-ink: #070910; --peak-night: #0c101b; --peak-panel: #131824; --peak-line: rgba(255,255,255,.12); --peak-gold: #e6b34b; --peak-gold-pale: #ffe5a3; --peak-gold-deep: #7c4f17; --peak-text: #f6f3eb; --peak-muted: #aeb5c2; --peak-card-radius: 20px; display: block; width: 100%; overflow: hidden; background: var(--peak-ink); color: var(--peak-text); font-family: "Noto Sans Thai", Tahoma, "Aptos", "Noto Sans", ui-sans-serif, system-ui, sans-serif; }
.peak-slot-app, .peak-slot-app * { box-sizing: border-box; }
.peak-game-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.peak-game-eyebrow { margin: 0 0 20px; color: var(--peak-gold); font-size: 12px; font-weight: 850; letter-spacing: .2em; }

.peak-game-hero { position: relative; min-height: 720px; overflow: hidden; background: #090c14; }
.peak-game-hero__backdrop { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,12,.98) 0%, rgba(5,7,12,.87) 43%, rgba(5,7,12,.42) 100%), url("hero.webp") center/cover no-repeat; }
.peak-game-hero__backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 38%, rgba(229,179,75,.19), transparent 28%), linear-gradient(180deg, transparent 70%, var(--peak-ink)); }
.peak-game-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr); align-items: center; gap: 70px; min-height: 720px; padding: 72px 0; }
.peak-game-copy h1 { max-width: 760px; margin: 0; font-family: "Noto Sans Thai", Tahoma, sans-serif; font-size: clamp(54px, 5.2vw, 78px); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; }
.peak-game-copy > p:not(.peak-game-eyebrow) { max-width: 570px; margin: 28px 0 0; color: #c6cad3; font-size: 17px; line-height: 1.62; }
.peak-game-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 34px; }
.peak-game-stats span { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid rgba(230,179,75,.32); border-radius: 999px; background: rgba(10,12,19,.76); padding: 9px 13px; color: #e1e3e8; font-size: 12px; }
.peak-game-stats strong { color: var(--peak-gold-pale); font-size: 15px; }
.peak-game-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; background: var(--peak-gold); padding: 0 26px; color: #171108 !important; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-decoration: none !important; text-transform: uppercase; box-shadow: 0 14px 36px rgba(0,0,0,.35); }
.peak-game-featured { position: relative; overflow: hidden; border: 1px solid rgba(255,221,146,.35); border-radius: 28px; background: var(--peak-panel); box-shadow: 22px 26px 0 rgba(0,0,0,.28), 0 30px 80px rgba(0,0,0,.48); transform: rotate(1.5deg); }
.peak-game-featured__art { width: 100%; aspect-ratio: 780/508; background: linear-gradient(180deg, rgba(8,10,17,.05), rgba(8,10,17,.18)), url("hero.webp") 76% center/cover no-repeat; }
.peak-game-featured::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(5,7,12,.96) 93%); pointer-events: none; }
.peak-game-featured__copy { position: absolute; z-index: 1; right: 24px; bottom: 23px; left: 24px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 5px 18px; }
.peak-game-featured__copy span { grid-column: 1; color: var(--peak-gold); font-size: 11px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.peak-game-featured__copy strong { grid-column: 1; font-size: 25px; }
.peak-game-featured__copy button, .peak-game-card button { border: 0; border-radius: 999px; background: var(--peak-gold); color: #181106; cursor: pointer; font-weight: 900; text-transform: uppercase; }
.peak-game-featured__copy button { grid-column: 2; grid-row: 1 / 3; padding: 14px 20px; }

.peak-game-library { padding: 48px 0 64px; background: radial-gradient(circle at 50% 0, rgba(128,73,23,.16), transparent 28%), var(--peak-ink); }
.peak-game-section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.peak-game-section-head h2 { margin: 0; font-family: "Noto Sans Thai", Tahoma, sans-serif; font-size: clamp(42px, 4.4vw, 64px); line-height: 1.12; }
.peak-game-search input { width: min(310px, 100%); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; outline: 0; background: #111621; padding: 13px 18px; color: white; font: inherit; }
.peak-game-search input::placeholder { color: #d3d7df; opacity: 1; }
.peak-game-search input:focus { border-color: var(--peak-gold); box-shadow: 0 0 0 3px rgba(230,179,75,.15); }
.peak-game-tabs { display: flex; gap: 10px; margin: -6px 0 30px; padding: 4px 28px 10px 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 0 28px; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); }
.peak-game-tabs::-webkit-scrollbar { display: none; }
.peak-game-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: #101520; color: #dce1e9; cursor: pointer; font: inherit; font-weight: 800; scroll-snap-align: start; transition: transform .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease; }
.peak-game-tab small { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 999px; background: rgba(255,255,255,.08); color: #cbd0d8; font-size: 11px; }
.peak-game-tab:hover { transform: translateY(-1px); border-color: rgba(230,179,75,.52); color: #fff; }
.peak-game-tab:active { transform: scale(.98); }
.peak-game-tab[aria-selected="true"] { border-color: var(--peak-gold); background: var(--peak-gold); color: #181106; box-shadow: 0 8px 24px rgba(113,72,14,.28); }
.peak-game-tab[aria-selected="true"] small { background: rgba(24,17,6,.14); color: #181106; }
.peak-game-lobby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 24px 22px; }
.peak-game-card { position: relative; isolation: isolate; min-width: 0; overflow: hidden; border: 1px solid rgba(255,226,161,.2); border-radius: var(--peak-card-radius); background: linear-gradient(155deg, #171d29 0%, #0d111b 58%, #090c13 100%); box-shadow: 0 22px 48px rgba(0,0,0,.34), 0 6px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,235,190,.09); transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease; }
.peak-game-card::before { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; border: 1px solid transparent; background: linear-gradient(135deg, rgba(255,236,190,.32), transparent 28%, transparent 68%, rgba(230,179,75,.16)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .76; }
.peak-game-card::after { content: ""; position: absolute; z-index: 2; top: -45%; left: -75%; width: 48%; height: 190%; background: linear-gradient(90deg, transparent, rgba(255,235,190,.09), transparent); transform: rotate(16deg) translateX(0); transition: transform .72s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.peak-game-card:hover, .peak-game-card:focus-within { transform: translateY(-7px); border-color: rgba(230,179,75,.5); box-shadow: 0 30px 68px rgba(0,0,0,.48), 0 10px 24px rgba(73,43,10,.26), inset 0 1px 0 rgba(255,239,202,.18); }
.peak-game-card:hover::after, .peak-game-card:focus-within::after { transform: rotate(16deg) translateX(390%); }
.peak-game-card[hidden] { display: none; }
.peak-game-card__art { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 390 / 254; border-bottom: 1px solid rgba(255,226,161,.14); background: radial-gradient(circle at 50% 42%, rgba(230,179,75,.11), transparent 48%), linear-gradient(145deg, #151a25, #080b12); padding: 10px; }
.peak-game-card__art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 28%, rgba(2,4,9,.28)); pointer-events: none; }
.peak-game-card__art img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; aspect-ratio: 390 / 254; object-fit: contain; object-position: center; border-radius: 12px; filter: saturate(.98) contrast(1.03); box-shadow: 0 9px 24px rgba(0,0,0,.28); transition: transform .45s cubic-bezier(.16,1,.3,1), filter .35s ease; }
.peak-game-card:hover img, .peak-game-card:focus-within img { transform: scale(1.018); filter: saturate(1.06) contrast(1.04); }
.peak-game-card__fallback { position: relative; z-index: 1; display: none; width: 76px; height: 76px; place-items: center; border: 1px solid rgba(255,226,161,.28); border-radius: 22px; background: linear-gradient(145deg, rgba(230,179,75,.24), rgba(124,79,23,.12)); color: var(--peak-gold-pale); font-size: 38px; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.3); }
.peak-game-card.is-image-fallback .peak-game-card__fallback { display: grid; }
.peak-game-card.is-image-fallback .peak-game-card__art { background: radial-gradient(circle at 50% 40%, rgba(230,179,75,.22), transparent 52%), linear-gradient(145deg, #151a25, #080b12); }
.peak-game-card__art > span:not(.peak-game-card__fallback) { position: absolute; z-index: 4; top: 18px; left: 18px; border: 1px solid rgba(255,226,161,.28); border-radius: 8px; background: rgba(8,11,18,.88); padding: 6px 9px; color: var(--peak-gold-pale); font-size: 9px; font-weight: 850; letter-spacing: .08em; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.28); backdrop-filter: blur(10px); }
.peak-game-card__body { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 88px; padding: 17px 17px 18px; background: linear-gradient(180deg, rgba(20,25,36,.97), rgba(10,13,21,.99)); }
.peak-game-card__body div { min-width: 0; }
.peak-game-card__body strong, .peak-game-card__body small { display: block; overflow-wrap: anywhere; }
.peak-game-card__body strong { display: -webkit-box; overflow: hidden; min-height: 2.65em; color: #fff8e9; font-size: 15px; line-height: 1.32; letter-spacing: -.01em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.peak-game-card__body small { margin-top: 5px; color: #c0c7d2; font-size: 11px; line-height: 1.35; }
.peak-game-card button { flex: 0 0 auto; min-height: 38px; padding: 10px 15px; font-size: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 9px 20px rgba(90,54,12,.28); transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.peak-game-card button:hover { background: #f0c66e; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 12px 26px rgba(112,69,15,.34); }
.peak-game-card button:active { transform: translateY(1px) scale(.98); }
.peak-game-empty { border: 1px dashed var(--peak-line); border-radius: 18px; padding: 40px; text-align: center; color: var(--peak-muted); }

.peak-game-proof { border-top: 1px solid var(--peak-line); background: #0b0e16; padding: 34px 0; }
.peak-game-proof .peak-game-shell { display: grid; grid-template-columns: 220px 1fr; gap: 30px; }
.peak-game-proof strong { color: var(--peak-gold-pale); text-transform: uppercase; letter-spacing: .08em; }
.peak-game-proof p { margin: 0; color: var(--peak-muted); font-size: 13px; line-height: 1.6; }
.peak-game-proof a { color: var(--peak-gold-pale); }

.peak-game-player { width: min(1180px, calc(100% - 30px)); max-width: none; height: min(88vh, 840px); max-height: none; overflow: hidden; border: 1px solid rgba(255,221,146,.35); border-radius: 22px; background: #080b12; padding: 0; color: white; box-shadow: 0 45px 120px rgba(0,0,0,.82); }
.peak-game-player::backdrop { background: rgba(2,3,7,.86); backdrop-filter: blur(10px); }
.peak-game-player__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; border-bottom: 1px solid var(--peak-line); padding: 12px 18px; }
.peak-game-player__top span, .peak-game-player__top strong { display: block; }
.peak-game-player__top span { color: var(--peak-gold); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.peak-game-player__top strong { margin-top: 3px; font-size: 17px; }
.peak-game-player__top button { border: 1px solid var(--peak-line); border-radius: 999px; background: transparent; padding: 9px 15px; color: white; cursor: pointer; }
.peak-game-player__frame { position: relative; height: calc(100% - 110px); background: #05070c; }
.peak-game-player iframe { display: block; width: 100%; height: 100%; border: 0; background: #05070c; }
.peak-game-player__loading { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: #080b12; color: var(--peak-muted); }
.peak-game-player__loading[hidden] { display: none; }
.peak-game-player__reload { position: absolute; z-index: 4; right: 12px; bottom: 56px; min-height: 36px; border: 1px solid rgba(255,226,161,.32); border-radius: 999px; background: rgba(8,11,18,.86); padding: 8px 13px; color: var(--peak-gold-pale); cursor: pointer; font-weight: 800; touch-action: manipulation; }
.peak-game-player > p { height: 44px; margin: 0; padding: 12px 18px; color: var(--peak-muted); font-size: 11px; text-align: center; }
.peak-game-player > p a { color: var(--peak-gold-pale); }
.peak-slot-app button { touch-action: manipulation; }
.peak-slot-app button:focus-visible, .peak-slot-app a:focus-visible, .peak-slot-app input:focus-visible { outline: 3px solid #fff1ba; outline-offset: 3px; }

@media (max-width: 980px) {
  .peak-game-hero__inner { grid-template-columns: 1fr; gap: 48px; padding: 70px 0 90px; }
  .peak-game-copy { max-width: 760px; }
  .peak-game-featured { width: min(700px, 100%); transform: none; }
  .peak-game-lobby { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .peak-game-shell { width: min(100% - 24px, 540px); }
  .peak-game-hero { min-height: auto; }
  .peak-game-hero__inner { min-height: 100dvh; gap: 34px; padding: 40px 0 50px; }
  .peak-game-copy h1 { font-size: clamp(39px, 10.8vw, 52px); line-height: 1.12; }
  .peak-game-copy > p:not(.peak-game-eyebrow) { margin-top: 20px; font-size: 14px; }
  .peak-game-stats { gap: 7px; margin: 22px 0 26px; }
  .peak-game-stats span { padding: 7px 9px; font-size: 10px; }
  .peak-game-featured { border-radius: 20px; }
  .peak-game-featured__copy { right: 15px; bottom: 14px; left: 15px; }
  .peak-game-featured__copy strong { font-size: 18px; }
  .peak-game-featured__copy button { padding: 11px 13px; font-size: 10px; }
  .peak-game-library { padding: 70px 0 80px; }
  .peak-game-section-head { align-items: stretch; flex-direction: column; }
  .peak-game-search input { width: 100%; }
  .peak-game-lobby { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .peak-game-card { border-radius: 16px; }
  .peak-game-card__art { padding: 6px; }
  .peak-game-card__art img { border-radius: 10px; }
  .peak-game-card__art > span:not(.peak-game-card__fallback) { top: 11px; left: 11px; padding: 5px 7px; font-size: 8px; }
  .peak-game-card__body { align-items: stretch; flex-direction: column; min-height: 110px; padding: 12px; }
  .peak-game-card__body strong { min-height: 2.7em; font-size: 13px; }
  .peak-game-card__body small { font-size: 10px; }
  .peak-game-card button { width: 100%; }
  .peak-game-proof .peak-game-shell { grid-template-columns: 1fr; gap: 10px; }
  .peak-game-player { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .peak-game-player__frame { height: calc(100% - 114px); }
}
@media (prefers-reduced-motion: reduce) {
  .peak-game-tab, .peak-game-card, .peak-game-card::after, .peak-game-card__art img, .peak-game-card button { animation: none; transition: none; }
  .peak-game-tab:hover, .peak-game-card:hover, .peak-game-card:focus-within, .peak-game-card:hover img, .peak-game-card:focus-within img { transform: none; }
}