:root{
  --bg:#ffffff;
  --text:#0f1419;
  --muted:#6b7280;
  --card:#f8fafc;
  --border:#e5e7eb;
  --active:#111827;
  --active-bg:rgba(0,0,0,.06);
  --accent:#1f6feb;
  --accent-hover:#60a5fa;
}
.theme-dark{
  --bg:#0f1419;
  --text:#e6edf3;
  --muted:#8b949e;
  --card:#161b22;
  --border:#21262d;
  --active:#0b0f14;
  --active-bg:rgba(255,255,255,.08);
  --accent:#1f6feb;
  --accent-hover:#60a5fa;
}
*{
  box-sizing:border-box;
}
html,body{
  height:100%;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}
.wrap{
  max-width:1105px;
  margin:0 auto;
  padding:10px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.top img{
  height:64px;
}
@media (max-width:500px){
  .top img{
    height:48px;
  }
}
.brand{
  font-weight:600;
  letter-spacing:.5px;
}
.nav a{
  color:var(--text);
  text-decoration:none;
  margin-left:12px;
  padding:6px 10px;
  border-radius:6px;
}
.nav a:hover{
  background:var(--active);
  color:#fff;
}
.hero{
  margin-top:5px;
}
.chatbox{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  position:relative;
}
.chat-header{
  text-align:center;
  color:var(--muted);
  margin-bottom:8px;
}
.chat-content{
  height:250px;
  overflow:auto;
  background:var(--active);
  padding:7px;
  color:#fff;
}
.chat-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);border-radius:12px}
.username-modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;min-width:260px}
.username-modal .modal-header{font-weight:600;color:var(--text)}
#chat-username-input{border:1px solid var(--border);background:var(--bg);color:var(--text);padding:8px 10px;border-radius:8px}
.chat-controls{display:grid;grid-template-columns:1fr auto;grid-template-areas:"username send" "message message" "hint hint";gap:8px;margin-top:10px}
#chat-username-inline{grid-area:username;border:1px solid var(--border);background:var(--card);color:var(--text);padding:8px 10px;border-radius:8px}
.chat-hint{grid-area:hint;font-size:12px;color:#ef4444}
#chat-input{grid-area:message;border:1px solid var(--border);background:var(--card);color:var(--text);padding:8px 10px;border-radius:8px}
#chat-send{grid-area:send;align-self:center;justify-self:end;min-width:160px;}
@media (max-width:500px){.chat-controls{grid-template-columns:1fr;grid-template-areas:"username" "message" "send" "hint"}#chat-send{justify-self:center;width:100%;max-width:240px}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);text-decoration:none;text-align:center;transition:filter .12s ease,transform .12s ease;min-height:25px;line-height:25px;font-weight:700;font-size:13px;padding:4px}
.btn .lni{font-size:18px;line-height:1}
.btn:not(.btn-primary):not(.btn-danger):hover{background:var(--active);border-color:var(--border);color:#fff}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-danger{background:#ff0000;border-color:#d80a0a;color:#fff}
.btn-danger:hover{background:#dc2626;border-color:#dc2626;color:#fff}
.btn-pola{width:100%;box-sizing:border-box;font-size:13px;border-radius:0px 0px 10px 10px;height:36px;min-height:36px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;text-align:center}
.pola-wrapper{width:100%;box-sizing:border-box;margin:0;padding:0}
.providers-wrap { 
  position: relative; 
  margin-top: 16px; 
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
}
.providers-wrap::before, .providers-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(to right, var(--card), transparent);
}
.providers-wrap::after { 
  right: 0; 
  background: linear-gradient(to left, var(--card), transparent);
}

.providers {
  margin-top: 0;
  border: none;
  border-radius: 0;
  padding: 10px 45px;
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 1px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: stretch;
  cursor: grab;
  background: var(--card);
}
.providers::-webkit-scrollbar { display: none; }
.providers.dragging { cursor: grabbing; }

.chat-toast{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:999px;
  padding:6px 12px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  opacity:0;
  transition:opacity .15s ease
}
.chat-toast.show{opacity:1}

.scroll-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  background: #161b22;
  color: var(--text);
  border: none;
  cursor: pointer;
  z-index: 20;
  font-size: 24px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: opacity 0.2s;
}
.scroll-btn:hover {
  opacity: 1;
  background: var(--active);
}
.scroll-btn.left { left: 0; }
.scroll-btn.right { right: 0; }
.scroll-btn.disabled{opacity:.35;cursor:default}

.provider-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 20px 10px;
  border-radius: 0;
  transition: background 0.2s;
  height: 100%;
  width: 100%;
  background: #101010;
  border-right: 1px solid var(--border);
}
.provider-item:last-child { border-right: none; }
.provider-item:hover, .provider-item.active {
  background: var(--active);
}
.provider-item img { 
  width: 100%; 
  max-width: 120px; 
  height: 50px; 
  object-fit: contain; 
  display: block;
}
.provider-item .name { 
  font-size: 14px; 
  text-align: center; 
  font-weight: 500; 
  color: var(--text); 
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis; 
  width:100%; 
  display:block; 
  padding:0 4px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
 .provider-item.active .name, .provider-item .name.active{color:var(--accent)}
 /* Ensure DANGER uses square corners like Pola Bermain */
 .pola-warn.bad.btn-pola{border-radius:0}
.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}
.card .title{
  font-size:12px;
  color:var(--muted);
}
.card .value{
  margin-top:6px;
  font-size:16px;
  font-weight:600;
}
.muted{
  color:var(--muted);
}
.footer{
  margin-top:auto;
  padding:16px;
  border-radius:12px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}
.games-section{margin-top:0px}
.games-section{position:relative}
.games-section .section-header{font-weight:700;margin-bottom:8px}
.games-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:15px}
.games-grid{transition:opacity .18s ease, transform .18s ease}
.games-grid.fx-leave{opacity:0;transform:translateY(6px)}
.games-grid.fx-enter{opacity:1;transform:translateY(0)}

.game-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:5px 0 0;display:flex;flex-direction:column;align-items:stretch;}
.game-card .thumb{width:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.06);border-radius:0;position:relative;overflow:hidden}
.theme-dark .game-card .thumb{background:rgba(255, 255, 255, 0)}
.game-card img{width:100%;height:auto;object-fit:contain;display:block}

.game-name{display:block;width:100%;padding:0 8px;text-align:center;font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;line-height:20px}
/* RTP, Pola, Jam on homepage */
.pola-wrapper h4{margin:0 0 6px;font-size:13px}
.table-pola{width:100%;border-collapse:collapse}
.table-pola th{font-size:12px;color:var(--text);padding:6px;border-bottom:1px solid var(--border);text-align:left}
.table-pola td{font-size:12px;color:var(--text);padding:6px}
.table-pola td:nth-child(3){white-space:nowrap}
.modal-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:3000}
.modal-overlay{backdrop-filter:blur(4px)}
.modal-box{background:linear-gradient(180deg, rgba(248,250,252,1), rgba(248,250,252,.98));color:var(--text);border:1px solid var(--border);border-radius:16px;min-width:300px;max-width:720px;width:92%;box-shadow:0 20px 56px rgba(0,0,0,.35);animation:modalIn .25s ease both;overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border-bottom:1px solid var(--border);font-weight:700}
.modal-header::after{content:"";display:block;position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,#22c55e,#1f6feb)}
.modal-body{padding:16px}
.modal-close{background:transparent;border:0;color:var(--text);font-size:22px;line-height:1;cursor:pointer}
.modal-alert{margin:10px 12px;padding:10px;border-radius:8px;text-align:center;font-weight:700}
.modal-alert.bad{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.35)}
.modal-alert.mid{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.35)}
.modal-alert.good{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.35)}
.warn-title{font-size:18px;letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase}
.warn-desc{font-weight:600;margin-bottom:8px}
.warn-tips{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.warn-tips li{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:999px;padding:6px 10px;font-weight:600}
.modal-jam{margin:8px 12px;padding:8px;border-radius:8px;text-align:center;font-weight:700;background:var(--active);border:1px solid var(--border)}
.rtp-chip{margin-left:10px;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}
.rtp-chip.bad{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.35)}
.rtp-chip.mid{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.35)}
.rtp-chip.good{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.35)}
@keyframes modalIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.percent{position:relative;height:22px;background:rgba(0,0,0,.06);border-radius:0;overflow:hidden;margin:0;padding:0;width:100%;box-sizing:border-box}
.theme-dark .percent{background:rgb(255 255 255 / 65%)}
.percent p{position:absolute;left:50%;transform:translateX(-50%);top:0;line-height:22px;margin:0;font-weight:700;color:#000;z-index:15;text-align:center}
.percent-bar{height:100%;width:0;background:#22c55e;transition:width .3s ease;border-radius:0}
.percent-bar.bad{background:#ef4444}
.percent-bar.mid{background:#f59e0b}
.game-card .percent{margin-top:0;margin-left:0;margin-right:0;padding:0;width:100%;min-width:0;box-sizing:border-box}
.game-card .pola-wrapper{margin:0;padding:0;width:100%;min-width:0;box-sizing:border-box}
.game-card .pola-wrapper .btn-pola,.game-card .pola-wrapper .pola-warn{margin-left:0 !important;margin-right:0 !important;width:100% !important;max-width:100% !important;box-sizing:border-box}
.game-card.bad .thumb img{filter:grayscale(100%);opacity:.7}
.game-card.bad .pola-wrapper .btn-pola{display:none !important}
.pola-warn{font-weight:700;text-align:center;display:none;padding-bottom:3px;}
.pola-warn.bad{background:#b91c1c;color:#fff;border:1px solid #991b1b;display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:8px;min-height:36px;line-height:20px;font-size:13px;font-weight:700;letter-spacing:.3px;white-space:nowrap;width:100%;box-sizing:border-box}
.pola-warn.bad.btn.btn-danger.btn-pola,.pola-warn.btn.btn-danger{display:flex;align-items:center;justify-content:center;height:36px;min-height:36px;padding:0;border-radius:0px 0px 10px 10px;line-height:1;text-align:center}
.pola-warn.bad.open{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.35);cursor:default}
.pola-warn.mid{color:#f59e0b}
.games-grid .game-card .game-name{order:-1;margin-bottom:6px}
.game-card .thumb{--badge-size-desktop:36px;--badge-size-mobile:28px}
.game-card .thumb .hot-game,
.game-card .thumb .top-game{position:absolute;left:6px;top:0;width:var(--badge-size-desktop);height:auto;pointer-events:none;z-index:5}
.game-card .thumb .hot-game + .top-game{top:var(--badge-size-desktop)}
.game-card.bad .thumb .hot-game, .game-card.bad .thumb .top-game{display:none}
@media (max-width:900px){.games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* removed wrap on all sizes; keep single-line ellipsis globally */
@media (max-width:420px){.games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:800px){
  .grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:500px){
  .grid{
    grid-template-columns:1fr;
  }
}
body.loaded .card{
  animation:fadeIn .3s ease both;
}
@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/* Alignment adjustments: center all text except modal title */
.pola-wrapper h5{ text-align:center }
.table-pola th, .table-pola td{ text-align:center }
.percent p{ left:50%; transform:translateX(-50%); text-align:center }
.modal-header #polaModalTitle{ margin:0 auto; text-align:center }
@media (max-width:640px){
  .game-card .thumb .hot-game,
  .game-card .thumb .top-game{left:6px;top:0;width:var(--badge-size-mobile);height:auto;margin:0}
  .game-card .thumb .hot-game + .top-game{top:var(--badge-size-mobile)}
  .game-card .percent{margin-top:0px;width:100%}
  .games-grid .game-card .game-name{order:-1;margin-bottom:6px}
  .modal-overlay{align-items:flex-start;justify-content:center;padding:12px 12px calc(96px + env(safe-area-inset-bottom,0px));}
  .modal-box{margin:0 auto;max-width:96%;max-height:calc(100vh - 120px);overflow:auto}
}
/* Search UI */
.games-search{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 12px;flex-wrap:wrap}
.search-left{display:flex;gap:10px;align-items:center;order:1}
.search-input{flex:0 0 240px;max-width:240px;border:1px solid var(--border);background:var(--card);color:var(--text);padding:8px 12px;border-radius:12px;height:36px}
.search-input::placeholder{color:var(--muted)}
.theme-dark .search-input::placeholder{color:var(--muted)}
.search-input:focus{border-color:var(--accent);outline:none}
.search-btn{min-height:36px}
.search-btn .lni{font-size:18px}
.btn[disabled]{opacity:.5;cursor:default;pointer-events:none}
.search-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-right:auto;order:2}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.06);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;line-height:20px;min-height:36px;font-weight:700;cursor:pointer;letter-spacing:.3px;text-transform:uppercase}
.theme-dark .chip{background:rgba(255,255,255,.08);color:var(--text)}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.chip-link{text-decoration:none;cursor:pointer}
.chip-link:hover{background:rgba(0,0,0,.1);border-color:var(--border)}
.theme-dark .chip-link:hover{background:rgba(255,255,255,.12)}
@media (max-width:600px){.search-input{flex:1;max-width:100%}.search-tags{width:100%;justify-content:flex-start;margin-left:0;margin-top:8px}}
@media (max-width:600px){
  .btn-pola,.pola-warn.btn{font-size:12px;letter-spacing:.3px}
  .btn-pola,.pola-warn.btn.btn-pola{padding:0 !important;line-height:1;display:flex !important;align-items:center;justify-content:center;text-align:center}
  .pola-warn.btn.btn-danger.btn-pola,.pola-warn.btn.btn-danger{font-size:12px;letter-spacing:.3px}
}

/* Mobile search layout: input + button on one row, chips below */
@media (max-width:640px){
  .games-search{gap:8px;justify-content:flex-start}
  .search-left{order:1;display:grid;grid-template-columns:1fr auto;gap:8px;width:100%}
  .search-input{flex:1;max-width:100%}
  .search-btn{justify-self:end}
  .search-tags{order:2;width:100%;margin-top:8px}
}
@media (min-width:641px){
  .search-tags{order:1;margin-right:0}
  .search-left{order:2;margin-left:0}
}
.search-alert{margin:6px 0 12px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:6px 12px;color:var(--text);font-weight:600;text-align:center}
.theme-dark .search-alert{background:var(--card);border-color:var(--border);color:var(--text)}
.refresh-overlay{position:fixed;left:0;top:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.25);backdrop-filter:blur(6px);z-index:2000}
.refresh-overlay.show{display:flex}
.refresh-box{display:flex;align-items:center;gap:10px;background:var(--active);color:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 14px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.refresh-box img{width:22px;height:22px;display:block}
.refresh-box .txt{font-weight:700;letter-spacing:.3px}
 .freeze-refresh .games-grid .game-card *, .freeze-refresh .providers *{transition:none!important;animation:none!important}
 .chat-modal{display:flex;flex-direction:column;gap:12px}
 .chat-modal .label{font-weight:700;font-size:12px;color:var(--text);margin-bottom:6px}
 .chat-modal .field{display:flex;flex-direction:column}
 .chat-modal input, .chat-modal textarea{border:1px solid var(--border);background:var(--card);color:var(--text);padding:10px 12px;border-radius:12px}
 .chat-modal input::placeholder, .chat-modal textarea::placeholder{color:var(--muted)}
 .chat-modal textarea{resize:vertical;min-height:72px}
 .btn-full{width:100%}
 .embed-wrap{position:fixed;left:0;top:0;width:100%;height:100vh;z-index:10;background:transparent}
 @supports (height:100dvh){.embed-wrap{height:100dvh}}
 @supports (-webkit-touch-callout:none){html,body{height:-webkit-fill-available}.embed-wrap{height:-webkit-fill-available}}
 .embed-frame{display:block;width:100%;height:100%;border:0}
 @media (min-width:768px){.embed-wrap.has-header{top:56px;height:calc(100vh - 56px)}}
 @supports (height:100dvh){@media (min-width:768px){.embed-wrap.has-header{height:calc(100dvh - 56px)}}}
 @media (max-width:767px){.embed-wrap{top:0}}
 .embed-wrap.inline{position:relative;height:480px}
.pola-warn.btn.btn-danger.btn-pola,.pola-warn.btn.btn-danger{background:#7f1d1d !important;color:#fff !important;border:1px solid #7f1d1d !important;display:flex !important;align-items:center;justify-content:center;height:36px;min-height:36px;line-height:1;padding:0 !important;border-radius:0px 0px 10px 10px;width:100%;box-sizing:border-box;text-align:center;font-size:13px;font-weight:700;letter-spacing:.3px}

.theme-dark .btn{border-color:#2a3037;box-shadow:none}
.theme-dark .btn:hover{box-shadow:none}
.theme-dark .btn-primary{box-shadow:none}
.theme-dark .btn-primary:hover{box-shadow:none}
.theme-dark .modal-box{background:linear-gradient(180deg, rgba(22,27,34,.94), rgba(22,27,34,.90));border-color:#2a3037;border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.55);outline:1px solid rgba(255,255,255,.04)}
.theme-dark .chat-modal input,.theme-dark .chat-modal textarea,.theme-dark .search-input{border-color:#2a3037;box-shadow:none}
.theme-dark .search-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(31,111,235,.25)}
.theme-dark .card{border-color:#2a3037}
.theme-dark .pola-warn.bad{border-color:#991b1b}
.theme-dark .pola-warn.btn.btn-danger.btn-pola,.theme-dark .pola-warn.btn.btn-danger{border-color:#7f1d1d !important;box-shadow:none}

@media (max-width: 768px) {
  .providers-wrap::before, .providers-wrap::after { width: 24px; content:''; position:absolute; top:0; bottom:0; z-index:10; pointer-events:none; background:var(--card); }
  .providers-wrap::before { left:0; }
  .providers-wrap::after { right:0; }
  .scroll-btn { width: 24px; height: auto; top: 0; bottom: 0; transform: none; font-size: 18px; border-radius: 0; background: transparent; border: none; box-shadow: none; }
  .scroll-btn.left { left: 0; }
  .scroll-btn.right { right: 0; }
  .scroll-btn:hover { background: transparent; opacity: 0.7; }
  
  .providers { 
    padding: 8px 24px; 
    grid-auto-columns: minmax(70px, 1fr); 
    gap: 8px;
  }
  .provider-item { padding: 6px; gap: 4px; }
  .provider-item img { width: auto; max-width: 100%; height: 25px; }
  .provider-item .name { font-size: 10px; line-height: 1.2; }
}

/* About Page: Rekomendasi / Game Terbaru are links to home anchors */
.page-about .chip-link {
  cursor: pointer;
}
.page-about .chip-link:hover {
  background: rgba(0,0,0,.1);
  border-color: var(--border);
  color: var(--text);
}
.theme-dark.page-about .chip-link:hover {
  background: rgba(255,255,255,.12);
}