/* RUAYMAK99 native shell — clean robust responsive layout, tkb777 look */
:root{ --bg:#0c0e18; --panel:#141723; --card:#1c2131; --card2:#242a3d; --txt:#fff; --muted:#8b93a7;
  --green1:#2fd07a; --green2:#14a85a; --purple:#8633c3; --pink:#b72dbc; --gold:#f6c453; --radius:14px; --col:680px; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:"Kanit","Noto Sans Thai","Prompt",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
#root{min-height:100vh;display:flex;flex-direction:column}
.rm-content-max{max-width:1180px;margin:0 auto;width:100%}

/* ===== Top bar ===== */
.rm-topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--col);margin:0 auto;padding:12px 16px;background:var(--bg);border-bottom:1px solid rgba(255,255,255,.04)}
.rm-topbar-left{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.rm-hamburger{display:flex;flex-direction:column;gap:4px;width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);align-items:center;justify-content:center;cursor:pointer}
.rm-hamburger span{width:18px;height:2px;background:#fff;border-radius:2px}
.rm-brand{display:flex;align-items:center;gap:10px}
.rm-logo{width:54px;height:54px;border-radius:50%;object-fit:contain}
.rm-brand-name{font-size:26px;font-weight:800;letter-spacing:.5px}
.rm-search{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:0 16px;height:50px;margin:0 0 14px}
.rm-search-icon{width:18px;opacity:.7}
.rm-search-input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:15px;font-family:inherit}
.rm-search-input::placeholder{color:var(--muted)}
.rm-topbar-right{display:flex;gap:12px;flex:0 0 auto}

/* buttons */
.rm-btn{border:0;outline:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;
  padding:11px 22px;border-radius:12px;white-space:nowrap;transition:transform .05s,filter .15s}
.rm-btn:active{transform:translateY(1px)}
.rm-btn-register{background:#fff;color:#111}
.rm-btn-login{background:#fff;color:#111}
.rm-topbar-right .rm-btn{background:#fff;color:#111}
.rm-cta-btn{padding:15px 40px;font-size:17px;box-shadow:6px 6px 12px rgba(0,0,0,.4)}
/* CTA row: register = green gradient, login = grey (tkb777) */
.rm-cta-row .rm-btn-register{background:linear-gradient(135deg,var(--green1),var(--green2));color:#06371f}
.rm-cta-row .rm-btn-login{background:var(--card2);color:#fff}

/* ===== Drawer sidebar (all widths) ===== */
.rm-sidebar{position:fixed;top:0;left:0;height:100%;width:284px;max-width:82vw;z-index:200;background:var(--panel);
  transform:translateX(-105%);transition:transform .28s ease;overflow-y:auto;padding:20px 16px 40px;
  display:flex;flex-direction:column;gap:18px}
body.rm-drawer .rm-sidebar{transform:translateX(0)}
body.rm-drawer .rm-backdrop{display:block}
.rm-menu-card{background:var(--card);border-radius:var(--radius);overflow:hidden}
.rm-menu-item{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;position:relative}
.rm-menu-item:hover{background:rgba(255,255,255,.03)}
.rm-menu-item img{width:22px;height:22px;object-fit:contain}
.rm-menu-item .rm-flag{width:24px;height:24px;border-radius:50%}
.rm-menu-item span{font-size:16px;font-weight:600}
.rm-menu-sep{height:1px;background:rgba(255,255,255,.06);margin:0 16px}
.rm-arrow{margin-left:auto;width:9px;height:9px;border-top:2px solid #cfd3dc;border-right:2px solid #cfd3dc;transform:rotate(45deg)}
.rm-arrow.rm-down{transform:rotate(135deg);margin-top:-4px}
.rm-brand{cursor:pointer}
/* language accordion */
.rm-lang-head{cursor:pointer}
.rm-lang-panel{display:none;padding:0 0 8px}
.rm-lang-card.rm-lang-open .rm-lang-panel{display:block}
.rm-lang-card.rm-lang-open .rm-arrow.rm-down{transform:rotate(-45deg);margin-top:4px}
.rm-lang-opt{display:flex;align-items:center;gap:14px;padding:8px 16px 6px 18px;cursor:pointer}
.rm-lang-opt .rm-flag{width:30px;height:30px;flex:0 0 auto}
.rm-lang-btn{flex:1;text-align:center;padding:13px;border-radius:12px;background:#20263a;font-weight:700;font-size:17px;transition:background .15s}
.rm-lang-opt.on .rm-lang-btn{background:#2d6cf6;color:#fff}

.rm-content{max-width:var(--col);margin:0 auto;width:100%;padding:14px 16px 96px}

/* marquee */
.rm-marquee{display:flex;align-items:center;gap:12px;margin-bottom:14px;overflow:hidden}
.rm-marquee-icon{width:26px;flex:0 0 auto}
.rm-marquee-viewport{flex:1;overflow:hidden;white-space:nowrap}
.rm-marquee-track{display:inline-block;white-space:nowrap;padding-left:100%;animation:rm-scroll 30s linear infinite;color:#fff;font-size:15px}
@keyframes rm-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* banner */
.rm-banner{position:relative;border-radius:12px;overflow:hidden;background:#0a0c14}
.rm-slides{display:flex;transition:transform .45s ease}
.rm-slides .rm-slide{flex:0 0 100%}
.rm-slides img{width:100%;aspect-ratio:800/312;object-fit:cover;display:block}
.rm-dots{position:absolute;right:14px;bottom:12px;display:flex;gap:6px}
.rm-dots i{width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.4);transition:all .2s}
.rm-dots i.on{width:18px;background:#fff}

/* cta row + info row (stacked, tkb777 style) */
.rm-cta-row{display:flex;gap:14px;margin:16px 0}
.rm-cta-row .rm-btn{flex:1}
.rm-inforow{display:flex;align-items:center;background:transparent;padding:4px 2px;margin:2px 0 14px}
.rm-info{flex:1;text-align:center;padding:4px 8px}
.rm-info-label{font-size:12px;color:var(--muted);margin-bottom:4px}
.rm-info-value{font-size:16px;font-weight:700}
.rm-info-sep{width:1px;align-self:stretch;margin:8px 0;background:rgba(255,255,255,.08)}

/* tabs */
.rm-tabs{display:flex;gap:10px;background:var(--panel);border-radius:16px;padding:10px;margin-bottom:14px;overflow-x:auto}
.rm-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:74px;padding:12px 14px;border-radius:12px;
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.05);cursor:pointer;flex:0 0 auto}
.rm-tab img{width:26px;height:26px;object-fit:contain}
.rm-tab span{font-size:13px;color:var(--muted)}
.rm-tab-active{background:#fff}
.rm-tab-active span{color:#111}
.rm-tab-ribbon{position:absolute;top:-8px;left:-6px;background:#e23b3b;color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:6px;transform:rotate(-12deg)}

/* provider / game grid */
.rm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.rm-tile{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--card);cursor:pointer;transition:transform .12s}
.rm-tile:hover{transform:translateY(-3px)}
.rm-tile img{width:100%;height:100%;object-fit:cover}
.rm-tile.rm-game{aspect-ratio:3/4}
.rm-tile .rm-tile-name{position:absolute;left:0;right:0;bottom:0;padding:8px;font-size:12px;font-weight:600;
  background:linear-gradient(transparent,rgba(0,0,0,.85));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-back{display:flex;align-items:center;gap:8px;background:var(--card2);border-radius:14px;padding:10px 18px;cursor:pointer;
  margin-bottom:14px;width:max-content;font-weight:700}
.rm-back:before{content:"‹";font-size:22px;line-height:1}
.rm-grid-msg{grid-column:1/-1;text-align:center;padding:40px;color:var(--muted)}

/* bottom nav (centered column, all widths) */
.rm-bottomnav{display:flex;position:sticky;bottom:0;z-index:100;background:var(--panel);max-width:var(--col);margin:0 auto;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.05)}
.rm-bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:var(--muted);font-size:11px}
.rm-bn-item img{width:26px;height:26px;object-fit:contain}
.rm-bn-active{color:#fff}
.rm-bn-active img{filter:none}

.rm-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:190}

/* footer */
.rm-footer{margin-top:30px;padding:26px 4px 10px;border-top:1px solid rgba(255,255,255,.06);text-align:center;color:var(--muted)}
.rm-footer-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}
.rm-footer-brand img{width:40px;height:40px;border-radius:50%}
.rm-footer-brand span{font-size:22px;font-weight:800;color:#fff}
.rm-footer-desc{font-size:13px;line-height:1.7;max-width:560px;margin:0 auto 14px}
.rm-footer-copy{font-size:12px;opacity:.7}

/* ===== responsive ===== */
@media(max-width:900px){
  .rm-brand-name{display:none}
  .rm-logo{width:44px;height:44px}
  .rm-topbar-right .rm-btn{padding:9px 14px;font-size:13px}
  .rm-cta-btn{padding:14px}
}
@media(max-width:860px){ .rm-grid{grid-template-columns:repeat(4,1fr)} }
@media(max-width:680px){ .rm-grid{grid-template-columns:repeat(3,1fr);gap:10px} }
@media(max-width:520px){ .rm-grid{grid-template-columns:repeat(2,1fr)} .rm-info-label{font-size:10px} .rm-info-value{font-size:13px} }

/* ===== auth as full page (tkb777 style: lives inside content, topbar+nav stay) ===== */
.rm-authpage{display:none;max-width:460px;margin:0 auto;padding:8px 4px 40px}
.rm-authpage.on{display:block}
body.rm-authopen .rm-marquee,body.rm-authopen .rm-banner,body.rm-authopen .rm-cta-row,
body.rm-authopen .rm-inforow,body.rm-authopen .rm-tabs,body.rm-authopen .rm-search,
body.rm-authopen #rm-grid,body.rm-authopen .rm-back,body.rm-authopen .rm-footer{display:none!important}
.rm-authback{display:inline-flex;align-items:center;gap:6px;color:#8b93a7;cursor:pointer;font-size:15px;margin:6px 0 2px}
.rm-authback:before{content:"‹";font-size:24px;line-height:1}
.rm-modal-title{font-size:30px;font-weight:800;margin:10px 0 22px}
.rm-field{display:flex;align-items:center;gap:12px;background:#0f1220;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:0 16px;height:54px;margin-bottom:14px}
.rm-field img{width:20px;opacity:.7}
.rm-field .rm-prefix{color:#fff;font-weight:600;border-right:1px solid rgba(255,255,255,.15);padding-right:10px}
.rm-field input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:15px;font-family:inherit}
.rm-field input::placeholder{color:#6b7180}
.rm-field .rm-eye{cursor:pointer;opacity:.6;font-size:18px}
.rm-modal-submit{width:100%;height:54px;border:0;border-radius:12px;background:#fff;color:#111;font-weight:800;font-size:17px;cursor:pointer;margin-top:8px;font-family:inherit}
.rm-modal-submit.rm-green{background:linear-gradient(135deg,var(--green1),var(--green2));color:#06371f}
.rm-modal-err{color:#ff6b6b;font-size:13px;margin:-6px 0 12px;min-height:16px}
.rm-modal-switch{text-align:center;margin-top:18px;color:#8b93a7;font-size:14px}
.rm-modal-switch b{color:#fff;cursor:pointer;text-decoration:underline;margin-left:6px}
.rm-info-body{color:#c7cbd6;font-size:15px;line-height:1.7;margin:0 0 20px}
/* logged-in wallet widget */
.rm-wallet{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#350bc8,#8633c3,#b72dbc);color:#fff;font-weight:700;
  padding:9px 16px;border-radius:12px;cursor:pointer;white-space:nowrap;box-shadow:6px 6px 12px rgba(0,0,0,.4)}
.rm-wallet small{opacity:.85;font-weight:500}