/* Mobile-first casino interface for okada play app */
:root {
  font-size: 62.5%;
  --pgc2-primary: #FFDEAD;
  --pgc2-secondary: #B2DFDB;
  --pgc2-accent: #6F4E37;
  --pgc2-bg: #1A1A2E;
  --pgc2-bg-soft: #24243f;
  --pgc2-panel: rgba(255, 222, 173, 0.08);
  --pgc2-text: #fff7e8;
  --pgc2-muted: #d7ece9;
  --pgc2-line: rgba(178, 223, 219, 0.22);
  --pgc2-shadow: 0 1.4rem 3.4rem rgba(0, 0, 0, 0.36);
  --pgc2-radius: 2rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: radial-gradient(circle at 20% 0%, rgba(255,222,173,.22), transparent 28%), linear-gradient(180deg, #10101f 0%, var(--pgc2-bg) 45%, #0e0e1b 100%);
  color: var(--pgc2-text);
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5rem;
}

a { color: var(--pgc2-secondary); text-decoration: none; }
a:hover { color: var(--pgc2-primary); }
img { max-width: 100%; display: block; }
button, a { -webkit-tap-highlight-color: transparent; }
main { padding-top: 7.4rem; }

.pgc2-shell {
  width: min(100%, 430px);
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(26,26,46,.94), rgba(15,15,29,.98));
  min-height: 100vh;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), var(--pgc2-shadow);
}
.pgc2-container { width: calc(100% - 2.4rem); margin: 0 auto; }
.pgc2-wrapper { padding: 1.4rem 0; }
.pgc2-grid { display: grid; gap: 1.2rem; }
.pgc2-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(100%, 430px);
  background: rgba(26, 26, 46, 0.94);
  border-bottom: .1rem solid var(--pgc2-line);
  backdrop-filter: blur(18px);
}
.pgc2-topbar {
  min-height: 6.8rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
}
.pgc2-brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--pgc2-primary);
  font-weight: 900;
  letter-spacing: -.03em;
  min-width: 0;
  flex: 1;
}
.pgc2-logo { width: 3.2rem; height: 3.2rem; border-radius: 1rem; box-shadow: 0 .4rem 1.2rem rgba(255,222,173,.26); }
.pgc2-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.55rem; }
.pgc2-actions { display: flex; align-items: center; gap: .6rem; }
.pgc2-btn {
  border: 0;
  min-height: 4.4rem;
  padding: 0 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  color: #1A1A2E;
  background: linear-gradient(135deg, var(--pgc2-primary), #ffd076);
  box-shadow: 0 .8rem 1.6rem rgba(255, 222, 173, .2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: transform .18s ease, filter .18s ease;
}
.pgc2-btn:hover, .pgc2-btn:focus { transform: translateY(-.1rem) scale(1.02); filter: brightness(1.04); }
.pgc2-btn-alt { background: linear-gradient(135deg, var(--pgc2-secondary), #7fd4cf); }
.pgc2-btn-ghost { color: var(--pgc2-primary); background: rgba(255,222,173,.1); border: .1rem solid var(--pgc2-line); box-shadow: none; }
.pgc2-menu-btn { width: 4.4rem; padding: 0; font-size: 2rem; }
.pgc2-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: min(100%, 430px);
  margin: 0 auto;
  background: rgba(10, 10, 20, .74);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.pgc2-menu.pgc2-menu-open { opacity: 1; pointer-events: auto; }
.pgc2-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(34rem, 88vw);
  min-height: 100%;
  padding: 1.6rem;
  background: linear-gradient(180deg, #252544, #151527);
  border-left: .1rem solid var(--pgc2-line);
  transform: translateX(105%);
  transition: transform .25s ease;
}
.pgc2-menu-open .pgc2-menu-panel { transform: translateX(0); }
.pgc2-menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.pgc2-nav { display: grid; gap: .8rem; }
.pgc2-nav a {
  min-height: 4.8rem;
  padding: 1rem 1.2rem;
  border-radius: 1.4rem;
  color: var(--pgc2-text);
  background: rgba(255,255,255,.05);
  border: .1rem solid var(--pgc2-line);
  display: flex;
  align-items: center;
  gap: .8rem;
  font-weight: 800;
}
.pgc2-nav a.pgc2-is-active { color: #151527; background: var(--pgc2-primary); }
.pgc2-desktop-nav { display: none; }
.pgc2-hero { padding: 1.4rem 0 0; }
.pgc2-hero-card, .pgc2-card {
  position: relative;
  overflow: hidden;
  border: .1rem solid var(--pgc2-line);
  border-radius: var(--pgc2-radius);
  background: linear-gradient(145deg, rgba(255,222,173,.09), rgba(178,223,219,.06));
  box-shadow: var(--pgc2-shadow);
}
.pgc2-hero-card { padding: 1.4rem; }
.pgc2-kicker { color: var(--pgc2-secondary); font-weight: 900; text-transform: uppercase; font-size: 1.1rem; letter-spacing: .1em; }
.pgc2-title { margin: .7rem 0; font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1.04; color: var(--pgc2-primary); letter-spacing: -.06em; }
.pgc2-subtitle { color: var(--pgc2-muted); font-size: 1.5rem; line-height: 2.25rem; }
.pgc2-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.pgc2-slider { position: relative; margin-top: 1.4rem; border-radius: 1.8rem; overflow: hidden; border: .1rem solid rgba(255,222,173,.28); }
.pgc2-slide { display: none; cursor: pointer; }
.pgc2-slide.pgc2-is-active { display: block; animation: pgc2Fade .45s ease; }
.pgc2-slide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.pgc2-dots { display: flex; gap: .6rem; justify-content: center; margin-top: .9rem; }
.pgc2-dot { width: .9rem; height: .9rem; border: 0; border-radius: 50%; background: rgba(178,223,219,.32); cursor: pointer; }
.pgc2-dot.pgc2-is-active { width: 2.4rem; border-radius: 999px; background: var(--pgc2-primary); }
@keyframes pgc2Fade { from { opacity: .2; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }
.pgc2-section { padding: 1.4rem 0; }
.pgc2-section-title { margin: 0 0 .8rem; color: var(--pgc2-primary); font-size: 2.2rem; line-height: 2.7rem; letter-spacing: -.03em; }
.pgc2-section-copy { color: var(--pgc2-muted); line-height: 2.35rem; margin: 0 0 1rem; }
.pgc2-card { padding: 1.4rem; }
.pgc2-card h3 { margin: 0 0 .7rem; color: var(--pgc2-primary); font-size: 1.65rem; line-height: 2.2rem; }
.pgc2-card p, .pgc2-card li { color: var(--pgc2-muted); line-height: 2.25rem; }
.pgc2-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pgc2-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.pgc2-stat { padding: 1rem; text-align: center; border-radius: 1.4rem; background: rgba(178,223,219,.08); border: .1rem solid var(--pgc2-line); }
.pgc2-stat strong { display: block; color: var(--pgc2-primary); font-size: 1.9rem; }
.pgc2-stat span { color: var(--pgc2-muted); font-size: 1.15rem; }
.pgc2-game-block { margin-top: 1rem; }
.pgc2-game-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--pgc2-primary); margin: 0 0 .8rem; font-size: 1.8rem; }
.pgc2-game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.pgc2-game { min-width: 0; padding: .7rem; border: .1rem solid var(--pgc2-line); border-radius: 1.3rem; background: rgba(255,255,255,.045); color: var(--pgc2-text); text-align: center; }
.pgc2-game img { width: 5.6rem; height: 5.6rem; margin: 0 auto .55rem; border-radius: 1.2rem; object-fit: cover; }
.pgc2-game span { display: block; font-size: 1.15rem; line-height: 1.45rem; color: var(--pgc2-text); overflow-wrap: anywhere; }
.pgc2-promo-link { font-weight: 900; color: var(--pgc2-primary); text-decoration: underline; text-decoration-thickness: .2rem; cursor: pointer; }
.pgc2-inline-links { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.pgc2-inline-links a { font-weight: 800; border-bottom: .1rem solid var(--pgc2-secondary); }
.pgc2-pill-list { display: flex; flex-wrap: wrap; gap: .7rem; padding: 0; list-style: none; }
.pgc2-pill-list li { padding: .7rem 1rem; border-radius: 999px; background: rgba(111,78,55,.45); border: .1rem solid rgba(255,222,173,.25); }
.pgc2-timeline { display: grid; gap: 1rem; counter-reset: pgc2Step; }
.pgc2-step { padding: 1.2rem; border-left: .4rem solid var(--pgc2-secondary); background: rgba(178,223,219,.06); border-radius: 1.2rem; }
.pgc2-step::before { counter-increment: pgc2Step; content: counter(pgc2Step); display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-right: .7rem; border-radius: 50%; background: var(--pgc2-primary); color: #1A1A2E; font-weight: 900; }
.pgc2-footer { padding: 2rem 1.2rem 8.2rem; border-top: .1rem solid var(--pgc2-line); background: #111120; }
.pgc2-footer-brand { color: var(--pgc2-primary); font-size: 2rem; font-weight: 900; }
.pgc2-footer p { color: var(--pgc2-muted); line-height: 2.25rem; }
.pgc2-footer-links, .pgc2-footer-buttons { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.pgc2-footer-links a { color: var(--pgc2-secondary); font-weight: 800; }
.pgc2-partners { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.pgc2-partner { padding: .7rem .9rem; border-radius: 1rem; background: rgba(255,222,173,.1); color: var(--pgc2-primary); font-weight: 900; }
.pgc2-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(100%, 430px);
  height: 6.4rem;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: #6F4E37;
  border-top: .2rem solid var(--pgc2-primary);
  box-shadow: 0 -1rem 2.4rem rgba(0,0,0,.34);
}
.pgc2-bottom-nav button, .pgc2-bottom-nav a {
  min-width: 6rem;
  min-height: 6rem;
  flex: 1;
  border: 0;
  background: transparent;
  color: #fff7e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease;
}
.pgc2-bottom-nav i, .pgc2-bottom-nav .material-icons, .pgc2-bottom-nav ion-icon { font-size: 2.4rem; line-height: 1; }
.pgc2-bottom-nav button:active, .pgc2-bottom-nav a:active { transform: scale(.92); }
.pgc2-bottom-nav .pgc2-is-active { color: #1A1A2E; background: var(--pgc2-primary); }
.pgc2-badge { position: absolute; margin-left: 2.4rem; margin-top: -2.4rem; background: #B2DFDB; color: #1A1A2E; border-radius: 999px; padding: .1rem .45rem; font-size: .9rem; }

@media (max-width: 768px) { main { padding-bottom: 8rem; } }
@media (min-width: 769px) {
  body { background: #090913; }
  .pgc2-shell, .pgc2-header, .pgc2-bottom-nav { width: min(100%, 960px); }
  .pgc2-shell { max-width: 960px; }
  .pgc2-bottom-nav { display: none; }
  .pgc2-menu-btn { display: none; }
  .pgc2-desktop-nav { display: flex; gap: 1rem; margin-left: 1.2rem; }
  .pgc2-desktop-nav a { color: var(--pgc2-muted); font-weight: 800; }
  .pgc2-game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pgc2-mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pgc2-container { width: calc(100% - 4rem); }
}

@media (max-width: 360px) {
  .pgc2-actions .pgc2-btn { padding: 0 .85rem; font-size: 1.25rem; }
  .pgc2-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pgc2-title { font-size: 2.45rem; }
}