/* =========================================================
   Yuki Casino — single dark, Netflix-style theme
   Mobile-first. Desktop layout from 700px.
   ========================================================= */
:root{
  --bg:#16060b; --bg2:#210911; --surface:#2a0c17; --surface2:#401122;
  --line:#512033; --line2:#693047;
  --text:#eef3f9; --mut:#8fa1b8; --mut2:#62758d;
  --blue:#8e1738; --blue2:#c96a83; --gold:#ffb400; --green:#16c784; --red:#ff6b6b;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --row:56px; --tabs-h:46px; --hdr:calc(var(--sat) + var(--row) + var(--tabs-h));
  --sbar-h:64px; --dock-h:calc(60px + var(--sab));
  --card-w:clamp(104px,29vw,140px); --card-ratio:2/3; --radius:6px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
@media(min-width:700px){
  :root{
    --row:68px; --tabs-h:0px; --dock-h:0px;
    --gutter:clamp(24px,4vw,60px); --gutter-r:clamp(24px,4vw,60px);
    --card-w:clamp(210px,19vw,300px); --card-ratio:16/9; --radius:6px;
  }
}

/* ---------- base / stability ---------- */
*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;overscroll-behavior-x:none}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);font:400 15px/1.45 var(--font);overflow-x:hidden;overscroll-behavior-x:none;-webkit-font-smoothing:antialiased}
@supports(overflow:clip){html,body{overflow-x:clip}}
img{max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;text-align:left;touch-action:manipulation}
button:disabled{cursor:default;opacity:.6}
svg{display:block}
.ui-icon{width:20px;height:20px;flex:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
[hidden]{display:none!important}
body.open,body.modal-open{overflow:hidden}

/* ---------- header ---------- */
.top{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:var(--row) var(--tabs-h);
  grid-template-areas:"brand . actions" "tabs tabs tabs";
  column-gap:16px;
  padding:var(--sat) var(--gutter-r) 0 var(--gutter);
  background:rgba(22,6,11,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background-color .25s ease,border-color .25s ease;
}
.brand{grid-area:brand;align-self:center;display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.03em;white-space:nowrap}
.brand-word{display:none}
.mark{width:142px;height:34px;border-radius:0;overflow:visible;flex:none;display:block}
.mark img{width:100%;height:100%;display:block;object-fit:contain}

.tabs{
  grid-area:tabs;display:flex;align-items:center;gap:8px;min-width:0;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;
  margin:0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter));
  padding:0 var(--gutter-r) 4px var(--gutter);
  scroll-padding-inline:var(--gutter);
}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;height:32px;padding:0 14px;display:flex;align-items:center;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#dbe4ef;font-size:13px;font-weight:700;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
.tab.on{background:#fff;border-color:#fff;color:#16060b}

.top-actions{grid-area:actions;align-self:center;display:flex;align-items:center;gap:6px}
.top .ibtn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:#fff}
.top .ibtn .ui-icon{width:22px;height:22px}
.top-search{display:none!important}
.account-btn{display:flex;align-items:center;gap:8px;height:40px;border-radius:10px;color:#fff;font-size:13px;font-weight:700}
.account-btn>.ui-icon{display:none;width:16px;height:16px;color:var(--mut);transition:transform .2s}
.account-btn[aria-expanded="true"]>.ui-icon{transform:rotate(180deg)}
.acc-coins{display:none}
.avatar{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:8px;background:linear-gradient(135deg,#8e1738,#4d0b1e);color:#fff;font-weight:900;font-size:15px;line-height:1}
.avatar.lg{width:42px;height:42px;font-size:17px;border-radius:10px}
.avatar.xl{width:76px;height:76px;font-size:30px;border-radius:18px}

@media(min-width:700px){
  .top{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:var(--row);
    grid-template-areas:"brand tabs actions";
    column-gap:clamp(20px,2.6vw,40px);
    background:linear-gradient(180deg,rgba(22,6,11,.82) 0%,rgba(22,6,11,0) 100%);
    border-bottom-color:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .top.solid{background:rgba(22,6,11,.96);border-bottom-color:rgba(255,255,255,.06);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
  .brand{font-size:22px}
  .tabs{margin:0;padding:0;gap:clamp(14px,1.6vw,24px);height:100%;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .tab{height:100%;padding:0 2px;border:0;border-radius:0;background:none;color:#c3cfdd;font-size:14px;font-weight:600;position:relative}
  .tab.on{background:none;color:#fff;font-weight:800}
  .tab.on::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;border-radius:2px;background:var(--blue)}
  .top-search{display:grid!important}
  .account-btn{padding:0 4px 0 0}
  .account-btn>.ui-icon{display:block}
}
@media(min-width:1000px){
  .acc-coins{display:inline-flex;align-items:center;gap:6px;padding:0 10px;height:28px;border-radius:999px;background:rgba(255,255,255,.08);color:#e3eaf3}
  .acc-coins::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
  .account-btn{gap:10px}
}
@media(hover:hover) and (pointer:fine){
  .top .ibtn:hover{background:rgba(255,255,255,.08)}
  .tab:hover{color:#fff}
  .tab:not(.on):hover{border-color:rgba(255,255,255,.45)}
}

/* ---------- account dropdown ---------- */
.account-menu{position:fixed;inset:0;z-index:120;background:rgba(2,8,18,.35)}
.account-menu-sheet{position:absolute;top:calc(var(--sat) + var(--row) - 4px);right:var(--gutter-r);width:min(290px,calc(100% - 32px));padding:8px;border-radius:14px;background:var(--surface);border:1px solid var(--line2);box-shadow:0 24px 60px rgba(0,0,0,.5);animation:menuIn .16s ease}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu-user{display:flex;align-items:center;gap:12px;padding:10px 10px 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.menu-user-text{min-width:0}
.menu-user b{display:block;font-size:14px}
.menu-user small{display:block;color:var(--mut);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-user .menu-wallet{color:var(--blue2);font-weight:700}
.account-menu-sheet>button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:8px;font-size:14px;font-weight:600;color:#dfe7f1}
.account-menu-sheet>button .ui-icon{width:18px;height:18px;color:var(--mut)}
.account-menu-sheet>button:hover,.account-menu-sheet>button:focus-visible{background:var(--surface2)}
.account-menu-sheet .menu-danger,.account-menu-sheet .menu-danger .ui-icon{color:#ff8a8a}
@media(min-width:700px){.account-menu{background:transparent}}

/* ---------- search ---------- */
.sbar{position:fixed;left:0;right:0;top:var(--hdr);z-index:45;height:var(--sbar-h);display:flex;align-items:center;gap:12px;padding:0 var(--gutter-r) 0 var(--gutter);background:rgba(22,6,11,.97);border-bottom:1px solid var(--line)}
.sbar-field{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line2);color:var(--mut);transition:border-color .15s}
.sbar-field:focus-within{border-color:var(--blue)}
.sbar input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:#fff;font-size:16px;-webkit-appearance:none;appearance:none}
.sbar input::placeholder{color:var(--mut2)}
.sbar button{flex:none;height:44px;font-weight:700;color:var(--blue2)}
@media(min-width:700px){
  .sbar{top:calc(var(--sat) + var(--row))}
  .sbar-field{max-width:640px}
}

/* ---------- view offsets (fixes content hiding under the header) ---------- */
#view{padding-top:var(--hdr);min-height:70vh}
body.searching #view{padding-top:calc(var(--hdr) + var(--sbar-h))}
@media(min-width:700px){body.at-home #view{padding-top:0}}

/* ---------- billboard (hero) ---------- */
.billboard{position:relative;isolation:isolate;overflow:hidden;margin:12px var(--gutter-r) 0 var(--gutter);border-radius:14px;aspect-ratio:4/5;max-height:min(72svh,620px);background:var(--surface);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.bb-art{position:absolute;inset:0;container-type:inline-size}
.bb-art img,.bb-art .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.bb-art .pn{display:none}
.bb-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,6,11,0) 38%,rgba(22,6,11,.6) 66%,rgba(22,6,11,.96) 100%)}
.bb-copy{position:absolute;left:16px;right:16px;bottom:18px;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.bb-badge{display:inline-block;padding:4px 8px;border-radius:5px;background:rgba(255,255,255,.16);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em}
.billboard h1{margin:10px 0 4px;font-size:clamp(28px,8.4vw,40px);line-height:1.02;font-weight:900;letter-spacing:-.035em;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.bb-meta{margin:0;display:flex;align-items:center;gap:8px;color:#cdd7e3;font-size:13px;font-weight:600}
.bb-meta span{padding:1px 6px;border:1px solid rgba(255,255,255,.35);border-radius:4px;font-size:11px}
.bb-desc{display:none}
.bb-actions{width:100%;margin-top:16px;display:grid;grid-template-columns:1fr 1fr 44px;gap:10px}
.btn-play,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:8px;font-weight:800;font-size:15px;white-space:nowrap;transition:background-color .15s,transform .1s}
.btn-play{background:#fff;color:#16060b}
.btn-play .ui-icon{width:20px;height:20px}
.btn-ghost{background:rgba(120,138,163,.38);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-ghost.on .ui-icon{color:#4ee0a6}
.btn-play:active,.btn-ghost:active{transform:scale(.97)}
.btn-play.loading{opacity:.7;cursor:progress}
.bb-info{padding:0}
.bb-info span{display:none}

@media(min-width:700px){
  .billboard{margin:0;border-radius:0;aspect-ratio:auto;max-height:none;height:clamp(480px,56.25vw,88vh);box-shadow:none}
  .bb-shade{background:
    linear-gradient(90deg,rgba(22,6,11,.92) 0%,rgba(22,6,11,.55) 36%,rgba(22,6,11,0) 68%),
    linear-gradient(0deg,var(--bg) 0%,rgba(22,6,11,0) 30%)}
  .bb-copy{left:var(--gutter);right:auto;bottom:clamp(140px,28%,300px);width:min(560px,44vw);align-items:flex-start;text-align:left}
  .billboard h1{font-size:clamp(40px,5vw,76px);margin-top:12px}
  .bb-meta{font-size:15px}
  .bb-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:12px 0 0;max-width:46ch;color:#dbe3ee;font-size:clamp(14px,1.15vw,17px);line-height:1.5;text-shadow:0 1px 10px rgba(0,0,0,.4)}
  .bb-actions{display:flex;width:auto;margin-top:22px;gap:12px}
  .btn-play,.btn-ghost{height:48px;padding:0 26px;font-size:16px}
  .bb-info{padding:0 26px}
  .bb-info span{display:inline}
}
@media(hover:hover) and (pointer:fine){
  .btn-play:hover{background:rgba(255,255,255,.82)}
  .btn-ghost:hover{background:rgba(120,138,163,.55)}
}

/* ---------- rows / rails ---------- */
.rows{position:relative;z-index:2;padding:4px 0 28px}
@media(min-width:700px){.rows.over{margin-top:calc(-1 * clamp(70px,8vw,150px))}}
.row{margin-top:22px}
@media(min-width:700px){.row{margin-top:clamp(22px,2.4vw,38px)}}
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 var(--gutter-r) 0 var(--gutter);margin-bottom:6px}
.row-head h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em}
@media(min-width:700px){.row-head h2{font-size:clamp(18px,1.4vw,22px)}}
.row-all{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:13px;font-weight:700;color:var(--blue2)}
.row-all .ui-icon{width:16px;height:16px}
.row-body{position:relative}
.rail{
  display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
  padding:6px var(--gutter-r) 6px var(--gutter);scroll-padding-inline:var(--gutter);
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail>.card{flex:0 0 var(--card-w);scroll-snap-align:start}
@media(min-width:700px){.rail{gap:10px;padding-top:14px;padding-bottom:14px;margin:-8px 0}}

.row-nav{display:none}
@media(hover:hover) and (pointer:fine) and (min-width:700px){
  .row-nav{position:absolute;top:0;bottom:0;z-index:4;width:max(44px,var(--gutter));display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .2s}
  .row-nav .ui-icon{width:30px;height:30px;transition:transform .15s}
  .row-nav.prev{left:0;background:linear-gradient(90deg,rgba(22,6,11,.92),rgba(22,6,11,0))}
  .row-nav.next{right:0;background:linear-gradient(270deg,rgba(22,6,11,.92),rgba(22,6,11,0))}
  .row-body:hover .row-nav{opacity:1}
  .row-nav:hover .ui-icon{transform:scale(1.2)}
  .row-body.at-start .row-nav.prev,.row-body.at-end .row-nav.next{opacity:0!important;pointer-events:none}
}

/* ---------- cards ---------- */
.card{position:relative;min-width:0;cursor:pointer;outline:none}
.card-art{position:relative;aspect-ratio:var(--card-ratio);border-radius:var(--radius);overflow:hidden;background:var(--surface);container-type:inline-size;transition:transform .22s ease,box-shadow .22s ease}
.card-art img,.card-art .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card:focus-visible .card-art{outline:3px solid var(--blue);outline-offset:2px}
.card:active .card-art{transform:scale(.97)}
.card.loading .card-art::before{content:"";position:absolute;inset:0;z-index:3;background:rgba(22,6,11,.55)}
.card.loading .card-art::after{content:"";position:absolute;left:50%;top:50%;z-index:4;width:26px;height:26px;margin:-13px 0 0 -13px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.card-name{margin:6px 2px 0;font-size:12px;font-weight:600;color:#cfd9e5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:700px){.card-name{font-size:13px;margin-top:8px}}

.badge{position:absolute;left:6px;top:6px;z-index:2;padding:2px 6px;border-radius:4px;background:var(--gold);color:#16060b;font-size:10px;font-weight:800;letter-spacing:.03em;line-height:1.4}
.badge.n{background:var(--green)}
.fav{position:absolute;right:4px;top:4px;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(22,6,11,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;transition:opacity .15s,transform .1s}
.fav .ui-icon{width:17px;height:17px}
.fav.on{color:#ff4d6d}
.fav:active{transform:scale(.9)}

@media(hover:hover) and (pointer:fine) and (min-width:700px){
  .card:hover .card-art{transform:scale(1.05);box-shadow:0 14px 30px rgba(0,0,0,.55);z-index:2}
  .card:hover .card-name{color:#fff}
  .fav:not(.on){opacity:0}
  .card:hover .fav,.card:focus-within .fav{opacity:1}
}

/* placeholder art */
.ph{overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;color:#fff}
.ph::before{content:"";position:absolute;width:140%;aspect-ratio:1;right:-55%;top:-60%;border-radius:50%;background:rgba(255,255,255,.12)}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.35))}
.ic{position:absolute;z-index:1;right:12%;top:14%;width:34%;max-width:72px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.ic .ui-icon{width:100%;height:auto;aspect-ratio:1}
.pn{position:relative;z-index:1;font-weight:800;font-size:14px;font-size:clamp(12px,11cqi,24px);line-height:1.05;letter-spacing:-.02em;max-width:85%;overflow-wrap:anywhere}
.p0{background:#1557c9}.p1{background:#5b21b6}.p2{background:#0b7a5e}.p3{background:#b4410f}.p4{background:#a3154f}

/* ---------- grid pages (categories, My List, search) ---------- */
.page{padding:18px 0 32px}
.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px var(--gutter-r) 14px var(--gutter)}
.page-head h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.03em}
.page-head span{color:var(--mut);font-size:13px;flex:none}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px;padding:0 var(--gutter-r) 0 var(--gutter)}
@media(min-width:480px) and (max-width:699px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:700px){
  .page{padding-top:28px}
  .page-head h1{font-size:clamp(26px,2.4vw,36px)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px 12px}
}
.empty{padding:56px var(--gutter);text-align:center;color:var(--mut);display:grid;justify-items:center;gap:16px}
.empty p{margin:0;max-width:36ch}
.btn-sub{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:8px;background:var(--surface2);border:1px solid var(--line2);color:#fff;font-weight:700;font-size:14px}
@media(hover:hover){.btn-sub:hover{background:#1c3556}}

/* ---------- skeleton ---------- */
.sk{background:linear-gradient(90deg,#2a0c17 25%,#172b48 50%,#2a0c17 75%);background-size:200% 100%;animation:sh 1.3s infinite}
.sk-hero{margin:12px var(--gutter-r) 0 var(--gutter);border-radius:14px;aspect-ratio:4/5;max-height:min(72svh,620px)}
.sk-line{display:block;width:140px;height:18px;border-radius:4px}
.sk-rail{overflow:hidden}
.sk-card{flex:0 0 var(--card-w);aspect-ratio:var(--card-ratio);border-radius:var(--radius)}
@media(min-width:700px){.sk-hero{margin:0;border-radius:0;aspect-ratio:auto;max-height:none;height:clamp(480px,56.25vw,88vh)}}
@keyframes sh{to{background-position:-200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- footer ---------- */
.foot{margin-top:16px;padding:32px var(--gutter-r) calc(24px + var(--dock-h)) var(--gutter);background:var(--bg2);border-top:1px solid var(--line);color:var(--mut)}
.fcols{max-width:1200px;margin:0 auto;display:grid;gap:24px}
.foot h3{margin:0 0 8px;font-size:13px;color:#dfe7f1}
.foot p{margin:0;font-size:13px;max-width:44ch}
#footGames{display:flex;flex-wrap:wrap;gap:2px 18px}
.foot button{padding:4px 0;font-size:13px;color:var(--mut)}
.foot button:hover{color:#fff}
.foot .brand.sm{font-size:18px;margin-bottom:8px}
.foot .brand.sm .mark{width:112px;height:28px;border-radius:0}
.copy{max-width:1200px;margin:24px auto 0;padding-top:16px;border-top:1px solid var(--line);font-size:12px}
@media(min-width:700px){.fcols{grid-template-columns:1.4fr 1fr 1.4fr}#footGames{display:grid;gap:2px}}

/* ---------- bottom dock (mobile) ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);height:var(--dock-h);padding:0 var(--gutter-r) var(--sab) var(--gutter);background:rgba(22,6,11,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:60px;font-size:10px;font-weight:600;color:#7e91a8;text-align:center}
.dock .ui-icon{width:22px;height:22px}
.dock button.on{color:#fff}
@media(min-width:700px){.dock{display:none!important}}

/* ---------- auth ---------- */
.auth-gate{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:calc(24px + var(--sat)) var(--gutter-r) calc(24px + var(--sab)) var(--gutter);background:radial-gradient(ellipse 120% 70% at 50% 0%,#4b1024 0%,var(--bg) 62%)}
.auth-card{width:min(420px,100%);padding:28px 22px;border-radius:16px;background:rgba(42,12,23,.92);border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:26px;font-size:22px;font-weight:900;letter-spacing:-.03em}
.auth-brand .mark{width:190px;height:44px}
.auth-brand b{display:none}
.auth-card h1{margin:0 0 6px;font-size:clamp(26px,7vw,30px);letter-spacing:-.03em}
.auth-copy{margin:0 0 18px;color:var(--mut)}
.auth-card label{display:grid;gap:6px;margin:14px 0;font-size:13px;font-weight:600;color:#cfd9e5}
.auth-card input{height:50px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);background:#210911;color:#fff;font-size:16px;outline:0;transition:border-color .15s,box-shadow .15s}
.auth-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(142,23,56,.25)}
.auth-main{width:100%;height:50px;margin-top:10px;border-radius:10px;background:var(--blue);color:#fff;font-weight:800;text-align:center}
.auth-switch{display:block;margin:16px auto 0;color:var(--blue2);font-weight:700;text-align:center}
.auth-note{padding:10px 12px;margin-bottom:6px;border-radius:10px;background:rgba(142,23,56,.12);border:1px solid rgba(142,23,56,.3);color:#cfe7ff;font-size:14px}
.auth-legal{margin:20px 0 0;font-size:12px;color:var(--mut);text-align:center}
@media(min-width:700px){.auth-card{padding:34px}}

/* ---------- account ---------- */
.account-page{min-height:100vh;min-height:100dvh;padding:calc(var(--hdr) + 20px) var(--gutter-r) calc(40px + var(--dock-h)) var(--gutter)}
.acc-shell{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:18px}
.acc-side{min-width:0}
.acc-id{display:flex;align-items:center;gap:12px;padding-bottom:14px}
.acc-id-text{min-width:0}
.acc-id b{display:block;font-size:15px}
.acc-id small{display:block;color:var(--mut);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-nav{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter));padding:0 var(--gutter-r) 2px var(--gutter);scroll-padding-inline:var(--gutter)}
.acc-nav::-webkit-scrollbar{display:none}
.acc-nav-item{flex:none;display:flex;align-items:center;gap:10px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);color:#cfd9e5;font-size:13px;font-weight:700;white-space:nowrap}
.acc-nav-item .ui-icon{display:none;width:18px;height:18px}
.acc-nav-item.on{background:#fff;border-color:#fff;color:#16060b}
.acc-logout{display:none}
.acc-main{min-width:0}

.acc-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.acc-head h1{margin:0;font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.03em;overflow-wrap:anywhere}
.acc-head p{margin:4px 0 0;color:var(--mut)}
.status-pill{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--surface2);color:#cfd9e5;font-size:12px;font-weight:700;text-transform:capitalize;white-space:nowrap;line-height:1.3}
.status-pill.approved{background:rgba(22,199,132,.14);color:#4ee0a6}
.status-pill.pending{background:rgba(255,180,0,.14);color:#ffcc4d}
.status-pill.suspended,.status-pill.rejected{background:rgba(255,107,107,.14);color:#ff8a8a}

.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
.stats-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{min-width:0;padding:14px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.stat small{display:block;color:var(--mut);font-size:12px;font-weight:600}
.stat b{display:block;margin-top:6px;font-size:22px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat span{font-size:12px;color:var(--mut)}
.stat.hi{grid-column:1/-1;background:linear-gradient(135deg,#8e1738,#0a4fa8);border-color:transparent}
.stat.hi small,.stat.hi span{color:rgba(255,255,255,.8)}
.stat.hi b{font-size:30px}

.acc-cards{display:grid;grid-template-columns:1fr;gap:16px}
.acc-card{min-width:0;margin-bottom:16px;padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.acc-cards>.acc-card{margin:0}
.acc-card.flush{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.card-head.pad{padding:16px 16px 6px;margin:0}
.card-head h2{margin:0;font-size:16px;font-weight:700}
.card-head button{padding:6px 8px;border-radius:6px;color:var(--blue2);font-size:13px;font-weight:700}
.card-head button:hover{background:var(--surface2)}
dl{margin:0}
dd{margin:0}
.detail-list>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.detail-list>div:last-child{border-bottom:0}
.detail-list dt{color:var(--mut);font-size:13px;flex:none}
.detail-list dd{min-width:0;font-size:13px;font-weight:600;text-align:right;overflow-wrap:anywhere}
.cap{text-transform:capitalize}
.compact-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.compact-row:last-child{border-bottom:0}
.compact-row>div{min-width:0}
.compact-row b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compact-row small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.compact-row strong{flex:none;font-size:14px;font-weight:800}
.acc-empty{padding:28px 16px;text-align:center;color:var(--mut);display:grid;justify-items:center;gap:14px}
.acc-empty p{margin:0}
.acc-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:48px 0;color:var(--mut)}
.acc-error{padding:40px 16px;text-align:center;color:var(--mut);display:grid;justify-items:center;gap:14px}
.acc-error p{margin:0}
.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}
.muted{margin:0;color:var(--mut)}

.profile-card{display:flex;flex-direction:column;gap:14px}
.profile-fields{display:grid;grid-template-columns:1fr;gap:0 28px;width:100%}
.profile-fields>div{min-width:0;padding:12px 0;border-bottom:1px solid var(--line)}
.profile-fields dt{color:var(--mut);font-size:12px}
.profile-fields dd{margin-top:4px;font-size:14px;font-weight:600;overflow-wrap:anywhere}

/* tables — real table on desktop, stacked cards on mobile */
.tbl{width:100%;font-size:13px}
.tbl-head{display:none}
.tbl-row{display:grid;grid-template-columns:1fr;gap:6px;padding:14px 16px;border-bottom:1px solid var(--line)}
.tbl-row:last-child{border-bottom:0}
.tbl-row>span{display:flex;justify-content:space-between;gap:16px;min-width:0;text-align:right;overflow-wrap:anywhere}
.tbl-row>span::before{content:attr(data-label);flex:none;color:var(--mut);font-size:12px;text-align:left}
.tbl-row>span:first-child{font-weight:700;color:#fff}
.win{color:#4ee0a6;font-weight:700}
.ua{color:var(--mut);font-size:12px}

.admin-list{display:grid;gap:8px}
.admin-user{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line)}
.admin-user-main{display:flex;gap:12px;align-items:center;min-width:0}
.admin-user-text{min-width:0}
.admin-user b{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px}
.admin-user b .status-pill{font-size:10px;padding:2px 7px}
.admin-user small{display:block;color:var(--mut);font-size:12px;margin-top:2px;overflow-wrap:anywhere}
.admin-actions{display:flex;gap:6px;flex-wrap:wrap}
.admin-actions button{padding:8px 12px;border-radius:8px;background:var(--surface2);border:1px solid var(--line2);font-size:12px;font-weight:700}
.admin-actions .ok{background:rgba(22,199,132,.16);border-color:transparent;color:#4ee0a6}
.admin-actions .bad{background:rgba(255,107,107,.14);border-color:transparent;color:#ff8a8a}

@media(min-width:700px){
  .account-page{padding-top:calc(var(--hdr) + 32px)}
  .acc-shell{grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
  .acc-side{position:sticky;top:calc(var(--hdr) + 32px);padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
  .acc-id{padding:8px 6px 14px;margin-bottom:8px;border-bottom:1px solid var(--line)}
  .acc-nav{display:grid;gap:2px;margin:0;padding:0;overflow:visible}
  .acc-nav-item,.acc-logout{display:flex;align-items:center;gap:10px;width:100%;height:auto;padding:10px;border:0;border-radius:8px;color:var(--mut);font-size:14px;font-weight:600}
  .acc-nav-item .ui-icon,.acc-logout .ui-icon{display:block;width:18px;height:18px}
  .acc-nav-item:hover,.acc-logout:hover{background:var(--surface2);color:#fff}
  .acc-nav-item.on{background:rgba(142,23,56,.14);color:#fff}
  .acc-nav-item.on .ui-icon{color:var(--blue2)}
  .acc-logout{margin-top:8px;color:#ff8a8a}
  .acc-logout:hover{color:#ff8a8a}
  .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .stat{padding:16px}
  .stat.hi{grid-column:auto}
  .stat.hi b{font-size:22px}
  .acc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acc-card{padding:18px}
  .card-head.pad{padding:18px 18px 8px}
  .profile-card{flex-direction:row;gap:24px;align-items:flex-start}
  .profile-fields{grid-template-columns:1fr 1fr}
  .tbl{overflow-x:auto}
  .tbl-head,.tbl-row{display:grid;grid-template-columns:var(--cols);gap:12px;align-items:center;padding:12px 18px;min-width:640px}
  .tbl-head{color:var(--mut);font-size:12px;font-weight:600;background:rgba(255,255,255,.02);border-bottom:1px solid var(--line)}
  .tbl-row>span{display:block;text-align:left}
  .tbl-row>span::before{content:none}
  .tbl-row>span:first-child{font-weight:400;color:inherit}
  .tbl-row:hover{background:rgba(255,255,255,.02)}
  .admin-user{flex-direction:row;align-items:center;justify-content:space-between}
  .admin-actions{justify-content:flex-end;flex:none}
}

/* ---------- player ---------- */
.player{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:#000;overflow:hidden}
.pbar{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;height:52px;padding:calc(var(--sat) + 4px) 10px 0;background:linear-gradient(180deg,rgba(22,6,11,.7),rgba(22,6,11,0));pointer-events:none}
.pbar .ibtn{position:relative;z-index:1;pointer-events:auto;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:#fff;background:rgba(7,31,57,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.1)}
.pbar .ibtn:hover{background:rgba(7,31,57,.55)}
.pbar .ibtn:active{transform:scale(.94)}
.pbar .ibtn .ui-icon{width:19px;height:19px}
.pbar .pbar-spacer{visibility:hidden}
.ptitle{position:relative;z-index:1;max-width:min(62vw,520px);padding:6px 12px 8px;color:#fff;font-size:14px;font-weight:800;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 7px rgba(0,0,0,.3)}
.player iframe{flex:1;width:100%;height:100%;border:0;padding-bottom:var(--sab);background:#000;position:relative;z-index:1}
@media(max-width:699px){
  .pbar{height:48px;padding:calc(var(--sat) + 3px) 8px 0}
  .pbar .ibtn{width:34px;height:34px;border-radius:10px}
  .ptitle{max-width:58vw;padding:4px 9px;font-size:13px}
}

/* ---------- game transition ---------- */
.yuki-transition{position:fixed;inset:0;z-index:10000;visibility:hidden;opacity:0;pointer-events:none;display:grid;place-items:center;background:#020305;transition:opacity .18s ease}
.yuki-transition.opening,.yuki-transition.closing{visibility:visible;opacity:1;pointer-events:auto}
.yuki-transition-center{opacity:0;transform:scale(.96)}
.yuki-transition-center img{width:min(340px,82vw);height:auto;max-height:100px;display:block;object-fit:contain;opacity:1;filter:none}
.yuki-transition.opening .yuki-transition-center{animation:yukiLogoIn .3s ease forwards,yukiLogoOut .28s ease .62s forwards}
.yuki-transition.closing .yuki-transition-center{animation:yukiLogoIn .3s ease forwards,yukiLogoOut .28s ease .72s forwards}
@keyframes yukiLogoIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes yukiLogoOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}
@media(max-width:699px){.yuki-transition-center img{width:min(300px,82vw);height:auto;max-height:82px}.brand .mark{width:118px;height:30px}.foot .brand.sm .mark{width:104px;height:26px}}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;background:rgba(2,8,18,.72)}
.game-info-modal{z-index:250}
.sheet{width:min(440px,100%);max-height:90dvh;overflow:auto;overscroll-behavior:contain;padding:24px 18px calc(18px + var(--sab));border-radius:18px 18px 0 0;background:var(--surface);border:1px solid var(--line2);border-bottom:0;color:var(--text);text-align:center;display:grid;gap:10px;animation:sheetIn .22s ease}
@keyframes sheetIn{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet h2{margin:0;font-size:21px}
.sheet p{margin:0 0 8px;color:var(--mut)}
.b-main,.b-sub{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:10px;font-weight:800;text-align:center}
.b-main{background:var(--blue);color:#fff}
.b-sub{background:var(--surface2);border:1px solid var(--line2);color:#fff}
.b-sub.on .ui-icon{color:#4ee0a6}
.b-main .ui-icon,.b-sub .ui-icon{width:18px;height:18px}

.game-info-sheet{position:relative;width:min(520px,100%);padding:0;gap:0;text-align:left;max-height:88dvh}
.game-info-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface2);container-type:inline-size}
.game-info-art img,.game-info-art .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.game-info-art .pn{display:none}
.game-info-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,31,52,0) 50%,var(--surface))}
.info-x{position:absolute;right:10px;top:10px;z-index:3;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(22,6,11,.72);color:#fff}
.game-info-content{padding:4px 20px calc(20px + var(--sab))}
.game-info-badge{display:inline-block;padding:3px 7px;border-radius:4px;background:var(--gold);color:#16060b;font-size:10px;font-weight:800;letter-spacing:.03em}
.game-info-content h2{margin:8px 0 2px;font-size:24px;letter-spacing:-.02em}
.game-info-category{margin:0!important;color:var(--blue2)!important;font-weight:700}
.game-info-description{margin:12px 0 6px!important;color:#cfd9e5!important}
.game-info-meta{margin:0 0 16px!important;font-size:12px}
.game-info-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:700px){
  .modal{align-items:center;padding:24px}
  .sheet{border-radius:18px;border-bottom:1px solid var(--line2);padding-bottom:22px}
  .game-info-sheet{padding:0}
  .game-info-content{padding-bottom:22px}
}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--dock-h) + 16px);z-index:300;max-width:calc(100% - 32px);padding:10px 16px;border-radius:10px;background:#fff;color:#16060b;font-size:14px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,10px);transition:opacity .2s,transform .2s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:700px){.toast{bottom:28px}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
  .yuki-transition.opening .yuki-transition-center,.yuki-transition.closing .yuki-transition-center{opacity:.72;transform:none}
  .card:hover .card-art{transform:none}
}


/* ---------- GAMBIX public landing + about ---------- */
:root{
  --bg:#16060b;--bg2:#210911;--surface:#2a0c17;--surface2:#401122;
  --line:#512033;--line2:#693047;--blue:#8e1738;--blue2:#c96a83;
  --gold:#d8a95c;--text:#fff5f1;--mut:#c3a9ae;--mut2:#98757e;
}
.landing-page,.about-page{min-height:100vh;background:radial-gradient(ellipse at 70% 25%,rgba(103,17,42,.34),transparent 42%),#16060b;color:var(--text);overflow:hidden}
.landing-nav{position:relative;z-index:3;min-height:88px;padding:20px clamp(22px,6vw,92px);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(216,169,92,.16)}
.landing-brand{display:flex;align-items:center;width:170px;flex:none}
.landing-brand img{display:block;width:100%;height:auto;object-fit:contain}
.brand-button{border:0;background:none;padding:0;cursor:pointer}
.landing-nav nav{display:flex;align-items:center;gap:clamp(14px,3vw,38px)}
.landing-link{font-size:14px;font-weight:650;color:#e8d5d7;transition:color .2s}
.landing-link:hover{color:#fff}
.landing-cta{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:13px 19px;border:1px solid #d8a95c;border-radius:5px;background:linear-gradient(135deg,#9c1e43,#651126);box-shadow:0 8px 26px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.15);color:#fff8f2;font-size:14px;font-weight:800;white-space:nowrap;transition:transform .2s,filter .2s}
.landing-cta:hover{transform:translateY(-2px);filter:brightness(1.12)}
.landing-cta span{font-size:18px;color:#f2d7a0}
.landing-cta.large{padding:16px 23px;font-size:15px}
.landing-hero{position:relative;isolation:isolate;min-height:min(720px,calc(100vh - 88px));padding:clamp(62px,9vw,132px) clamp(22px,10vw,150px) 34px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);align-items:center;gap:30px}
.landing-copy{position:relative;z-index:2;max-width:690px}
.eyebrow{margin:0 0 22px;display:flex;align-items:center;gap:10px;color:#d5a85d;font-size:10px;line-height:1.4;font-weight:850;letter-spacing:.2em;text-transform:uppercase}
.eyebrow>span{width:25px;height:1px;background:#d5a85d;box-shadow:0 0 12px rgba(216,169,92,.6)}
.landing-copy h1,.about-main>h1{margin:0;color:#fff8f4;font-size:clamp(43px,6.3vw,86px);line-height:.99;letter-spacing:-.055em;font-weight:850}
.landing-copy h1 em,.about-main h1 em,.about-mission h2 em{color:#d8a95c;font-style:normal}
.landing-lead{max-width:580px;margin:26px 0 0;color:#c8afb5;font-size:clamp(15px,1.3vw,18px);line-height:1.8}
.landing-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px}
.landing-secondary{display:inline-flex;align-items:center;gap:12px;color:#f1dce0;font-size:14px;font-weight:750;padding:12px 0}
.landing-secondary span{color:#d8a95c;font-size:19px}
.landing-proof{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:54px;padding-top:20px;border-top:1px solid rgba(216,169,92,.19)}
.landing-proof span{display:flex;align-items:center;gap:9px;color:#bfa4aa;font-size:11px}
.landing-proof b{color:#d8a95c;font-size:10px;letter-spacing:.1em}
.landing-art{position:relative;min-height:420px;display:grid;place-items:center}
.landing-orbit{position:absolute;border:1px solid rgba(216,169,92,.2);border-radius:50%;transform:rotate(-22deg)}
.orbit-one{width:min(34vw,420px);height:min(34vw,420px)}
.orbit-two{width:min(27vw,330px);height:min(27vw,330px);border-style:dashed;border-color:rgba(216,169,92,.3)}
.landing-chip{position:relative;z-index:1;width:clamp(210px,25vw,310px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:repeating-conic-gradient(from 7deg,#d6a75c 0deg 22deg,#77162f 22deg 45deg);box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 70px rgba(142,23,56,.28),inset 0 0 0 4px #f1d49a,inset 0 0 0 11px #68122b,inset 0 0 0 14px #e3b966}
.chip-inner{position:relative;width:70%;height:70%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#9e2948,#4c0b1d 75%);border:3px solid #e0b35f;box-shadow:inset 0 0 0 8px rgba(216,169,92,.12),0 0 30px rgba(0,0,0,.35)}
.chip-die{color:#f5dba6;font-size:clamp(55px,8vw,100px);text-shadow:0 4px 0 #6e122b,0 0 24px rgba(255,218,151,.24)}
.chip-check{position:absolute;right:10%;bottom:13%;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#d8a95c;color:#4d0b1e;border:3px solid #4d0b1e;font-size:23px;font-weight:900;box-shadow:0 0 0 2px #f5dda8}
.landing-spark{position:absolute;color:#e5bc6e;text-shadow:0 0 24px rgba(255,200,104,.7);font-size:32px}
.spark-one{top:12%;right:14%}.spark-two{left:9%;top:30%;font-size:24px}.spark-three{right:13%;bottom:20%;font-size:20px}
.landing-art-caption{position:absolute;bottom:2%;display:flex;align-items:center;gap:9px;color:#b28d97;font-size:9px;letter-spacing:.22em}
.caption-dot{width:6px;height:6px;border-radius:50%;background:#d8a95c;box-shadow:0 0 10px #d8a95c}
.landing-bottom{position:absolute;left:clamp(22px,10vw,150px);right:clamp(22px,10vw,150px);bottom:20px;display:flex;justify-content:space-between;gap:16px;color:#87626d;font-size:9px;letter-spacing:.16em}
.landing-bottom a{color:#d6b16f;text-decoration:none;letter-spacing:0;font-size:11px}
.landing-values-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:38px clamp(22px,10vw,150px);background:#210911;border-top:1px solid rgba(216,169,92,.14);border-bottom:1px solid rgba(216,169,92,.14)}
.landing-values-strip article{padding:12px 24px;border-left:1px solid rgba(216,169,92,.18)}
.landing-values-strip article:first-child{border-left:0;padding-left:0}
.value-number{color:#d8a95c;font-size:10px;letter-spacing:.16em}
.landing-values-strip h2{margin:9px 0 6px;font-size:17px;letter-spacing:-.02em}
.landing-values-strip p{margin:0;color:#b99ba3;font-size:12px;line-height:1.7}
.landing-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px clamp(22px,6vw,92px);color:#96747d;font-size:11px}
.about-main{max-width:1220px;margin:0 auto;padding:clamp(54px,8vw,108px) clamp(22px,6vw,70px) 70px}
.about-main>.eyebrow{margin-bottom:24px}
.about-main>h1{max-width:1000px;font-size:clamp(42px,6vw,76px)}
.about-intro{max-width:800px;margin:26px 0 0;color:#cbb2b8;font-size:18px;line-height:1.85}
.about-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:52px 0 84px;padding:24px 0;border-top:1px solid rgba(216,169,92,.2);border-bottom:1px solid rgba(216,169,92,.2)}
.about-facts div{display:grid;gap:7px}
.about-facts b{font-size:clamp(20px,2.4vw,31px);color:#e1bb75;letter-spacing:-.04em}
.about-facts span{font-size:12px;color:#bda2a9}
.about-story{display:grid;grid-template-columns:1fr .8fr;align-items:center;gap:clamp(40px,8vw,110px);margin-bottom:90px}
.about-story-copy h2,.about-values>h2,.about-mission h2{margin:0 0 20px;font-size:clamp(32px,4vw,52px);line-height:1.08;letter-spacing:-.045em}
.about-story-copy p:not(.eyebrow),.about-mission>p:not(.eyebrow){color:#c5aab1;line-height:1.85;font-size:15px}
.about-house-art{position:relative;min-height:300px;display:grid;place-items:center;filter:drop-shadow(0 20px 36px rgba(0,0,0,.4))}
.house-roof{position:absolute;top:32px;width:220px;height:160px;background:linear-gradient(135deg,#9e2948,#4a0b1b);border:3px solid #d8a95c;transform:rotate(45deg) skew(-4deg,-4deg);border-radius:10px 0 0 0}
.house-body{position:relative;z-index:1;width:220px;height:190px;margin-top:80px;border:3px solid #d8a95c;background:linear-gradient(145deg,#67132c,#300815);box-shadow:inset 0 0 0 8px rgba(216,169,92,.1);display:flex;align-items:flex-end;justify-content:center}
.house-door{width:72px;height:124px;border:3px solid #e3bc70;border-bottom:0;background:linear-gradient(90deg,#ffcb76,#a94a39 25%,#3b0b18);box-shadow:0 0 40px rgba(255,173,74,.55);display:grid;place-items:center}
.house-door span{width:24px;height:24px;border-radius:50%;background:#edc477;box-shadow:0 0 22px #ffba65}
.house-door i{position:absolute;width:2px;height:75px;background:#f8d38c;box-shadow:0 0 18px #ffb65e}
.house-window{position:absolute;left:18px;top:36px;width:34px;height:52px;border:2px solid #d8a95c;background:#f6bc62;box-shadow:0 0 25px rgba(255,183,83,.55)}
.house-step{position:absolute;z-index:2;bottom:31px;width:270px;height:16px;border:2px solid #d8a95c;background:#3d0b1b}
.house-caption{position:absolute;bottom:0;color:#d8a95c;font-size:9px;letter-spacing:.2em}
.about-values{scroll-margin-top:30px}
.about-values>.eyebrow{margin-bottom:18px}
.about-values>h2{margin-bottom:34px}
.about-value-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.about-value{padding:24px 20px;border:1px solid rgba(216,169,92,.18);background:linear-gradient(145deg,rgba(85,16,37,.5),rgba(32,7,16,.72));border-radius:8px;min-width:0}
.value-emblem{width:100px;height:100px;margin:0 auto 24px;position:relative;display:grid;place-items:center;border-radius:50%;border:2px solid #d8a95c;background:radial-gradient(circle at 30% 20%,#8b1b3b,#2b0713 75%);box-shadow:inset 0 0 0 7px rgba(216,169,92,.1),0 12px 28px rgba(0,0,0,.25)}
.value-emblem:before{content:"";position:absolute;inset:8px;border:1px solid rgba(216,169,92,.5);border-radius:50%}
.emblem-die{font-size:48px;color:#f1d39a;text-shadow:0 3px #67132c}
.emblem-check{position:absolute;right:7px;bottom:8px;background:#d8a95c;color:#3b0a18;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-weight:900;border:2px solid #5c1026}
.emblem-house{font-size:61px;color:#f0d59e;line-height:1}
.emblem-wheel{position:absolute;right:12px;bottom:15px;color:#d8a95c;font-size:28px}
.emblem-hand{font-size:46px;color:#f3d8a5;line-height:1}
.emblem-heart{position:absolute;right:9px;bottom:13px;color:#e2a0a7;font-size:26px;text-shadow:0 2px #4b091d}
.emblem-bulb{font-size:49px;color:#f3d8a5;line-height:1}
.emblem-arrow{position:absolute;right:8px;top:7px;color:#d8a95c;font-size:28px;font-weight:900}
.about-value>.eyebrow{margin-bottom:10px;font-size:9px;letter-spacing:.12em}
.about-value h3{margin:0 0 10px;font-size:18px;line-height:1.25;letter-spacing:-.025em}
.about-value>p:last-child{margin:0;color:#bca1a8;font-size:12px;line-height:1.75}
.about-mission{margin-top:84px;padding:clamp(28px,5vw,60px);border:1px solid rgba(216,169,92,.24);background:radial-gradient(ellipse at 90% 10%,rgba(130,22,52,.32),transparent 55%),#210911}
.about-mission h2{max-width:850px}
.about-mission>p:not(.eyebrow){max-width:850px}
.about-mission .landing-cta{margin-top:16px}
.auth-back{margin:8px auto 0;color:#d8a95c;font-size:13px;font-weight:700}
.auth-back:hover{color:#fff}
@media(max-width:900px){
  .landing-hero{grid-template-columns:1fr .75fr;padding-left:6vw;padding-right:6vw}
  .landing-art{min-height:330px}
  .landing-values-strip{padding-left:6vw;padding-right:6vw}
  .about-value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-story{gap:40px}
}
@media(max-width:680px){
  .landing-nav{min-height:72px;padding:14px 18px;gap:12px}
  .landing-brand{width:130px}
  .landing-nav nav{gap:12px}
  .landing-link{font-size:12px}
  .landing-nav .landing-cta{padding:10px 12px;gap:8px;font-size:12px}
  .landing-hero{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-height:0;padding:62px 24px 70px}
  .landing-copy h1{font-size:clamp(42px,12vw,64px)}
  .landing-lead{font-size:15px;line-height:1.75}
  .landing-proof{margin-top:35px;gap:12px 16px}
  .landing-art{min-height:290px;margin-top:0}
  .landing-chip{width:210px}
  .orbit-one{width:270px;height:270px}.orbit-two{width:220px;height:220px}
  .landing-bottom{left:24px;right:24px;bottom:18px;letter-spacing:.08em;font-size:8px}
  .landing-bottom a{font-size:10px}
  .landing-values-strip{grid-template-columns:1fr 1fr;padding:22px 24px}
  .landing-values-strip article{padding:15px 10px;border-left:1px solid rgba(216,169,92,.18);border-top:1px solid rgba(216,169,92,.14)}
  .landing-values-strip article:nth-child(odd){border-left:0;padding-left:0}
  .landing-values-strip article:first-child,.landing-values-strip article:nth-child(2){border-top:0}
  .landing-values-strip h2{font-size:15px}
  .landing-footer{padding:18px 24px;font-size:10px}
  .about-main{padding:52px 22px 45px}
  .about-main>h1{font-size:clamp(39px,11vw,58px)}
  .about-intro{font-size:16px}
  .about-facts{grid-template-columns:1fr;gap:18px;margin:35px 0 55px}
  .about-story{grid-template-columns:1fr;gap:22px;margin-bottom:58px}
  .about-house-art{min-height:280px}
  .about-value-grid{grid-template-columns:1fr 1fr;gap:9px}
  .about-value{padding:18px 13px}
  .value-emblem{width:78px;height:78px;margin-bottom:18px}
  .emblem-die{font-size:38px}.emblem-house{font-size:48px}.emblem-hand{font-size:37px}.emblem-bulb{font-size:39px}
  .emblem-check{width:23px;height:23px;font-size:13px}
  .about-value h3{font-size:15px}
  .about-value>p:last-child{font-size:11px}
  .about-mission{margin-top:55px;padding:24px 18px}
}
@media(max-width:380px){
  .landing-brand{width:100px}
  .landing-nav nav{gap:8px}
  .landing-nav .landing-link{font-size:11px}
  .landing-cta{gap:8px}
  .landing-proof{display:grid}
  .about-value-grid{grid-template-columns:1fr}
}

/* Branded illustrations for the four GAMBIX values */
.value-logo{display:block;width:min(100%,180px);aspect-ratio:1;object-fit:contain;margin:0 auto 24px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.28));}
@media(max-width:680px){.value-logo{width:min(100%,132px);margin-bottom:18px}}


/* Original dice-and-shield PNG on the public homepage */
.landing-art{min-width:0;overflow:visible}
.landing-hero-emblem{position:relative;z-index:1;display:block;width:clamp(270px,34vw,430px);height:auto;max-height:440px;object-fit:contain;filter:drop-shadow(0 22px 36px rgba(0,0,0,.42));}
@media(max-width:900px){.landing-hero-emblem{width:clamp(240px,37vw,350px);max-height:370px}}
@media(max-width:680px){.landing-art{min-height:300px}.landing-hero-emblem{width:min(78vw,310px);max-height:310px}.landing-art-caption{bottom:-2px}}


/* GAMBIX cookie consent */
.cookie-consent{position:fixed;z-index:10050;left:clamp(14px,3vw,36px);right:clamp(14px,3vw,36px);bottom:clamp(14px,3vw,28px);display:flex;align-items:flex-end;justify-content:space-between;gap:28px;max-width:1120px;margin-left:auto;padding:24px 26px;border:1px solid rgba(216,169,92,.42);border-radius:12px;background:linear-gradient(135deg,rgba(49,10,24,.98),rgba(25,6,13,.99));box-shadow:0 22px 80px rgba(0,0,0,.55);color:#fff5f1;backdrop-filter:blur(16px)}
.cookie-consent[hidden],.cookie-settings-link[hidden]{display:none!important}
.cookie-copy{max-width:620px}
.cookie-eyebrow{margin:0 0 8px;color:#d8a95c;font-size:9px;font-weight:850;letter-spacing:.18em}
.cookie-copy h2{margin:0 0 8px;font-size:22px;letter-spacing:-.035em}
.cookie-copy>p:not(.cookie-eyebrow){margin:0;color:#cbb2b8;font-size:12px;line-height:1.7}
.cookie-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
.cookie-btn{min-height:40px;padding:10px 13px;border-radius:5px;font-size:11px;font-weight:800;white-space:nowrap}
.cookie-secondary{border:1px solid rgba(216,169,92,.3);background:transparent;color:#f1dce0}
.cookie-primary{border:1px solid #d8a95c;background:linear-gradient(135deg,#9c1e43,#651126);color:#fff8f2}
.cookie-options{display:grid;gap:10px;margin-top:18px}
.cookie-options label{display:grid;grid-template-columns:18px auto;align-items:center;column-gap:8px;color:#f6e8e8;font-size:12px;font-weight:750}
.cookie-options input{accent-color:#d8a95c}
.cookie-options label span{grid-column:2;color:#b99ba3;font-size:11px;font-weight:400}
.cookie-settings-link{position:fixed;z-index:10040;left:14px;bottom:14px;padding:9px 12px;border:1px solid rgba(216,169,92,.38);border-radius:5px;background:#2a0c17;color:#f1dce0;font-size:10px;font-weight:750;box-shadow:0 5px 20px rgba(0,0,0,.3)}
@media(max-width:760px){.cookie-consent{left:10px;right:10px;bottom:10px;display:block;max-height:calc(100dvh - 20px);overflow:auto;padding:20px 18px}.cookie-copy h2{font-size:20px}.cookie-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:18px}.cookie-btn{white-space:normal;min-height:42px}.cookie-settings-link{left:10px;bottom:10px}.cookie-consent:not([hidden])~.cookie-settings-link{display:none}}


/* Tighten homepage hero after replacing the chip illustration with the original PNG */
@media(min-width:901px){
  .landing-hero{padding-top:clamp(32px,5vw,68px);grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);column-gap:12px}
  .landing-art{min-height:360px}
  .landing-hero-emblem{width:clamp(290px,31vw,400px);max-height:400px}
}
@media(min-width:681px) and (max-width:900px){
  .landing-hero{padding-top:42px;column-gap:8px}
  .landing-art{min-height:300px}
  .landing-hero-emblem{width:clamp(240px,34vw,320px);max-height:330px}
}
@media(max-width:680px){
  .landing-hero{padding-top:44px;gap:0}
  .landing-art{margin-top:-6px}
}


/* Use the original GAMBIX casino-house PNG in the About story section */
.about-house-art{min-height:320px;display:grid;place-items:center;filter:none}
.about-house-logo{position:relative;z-index:1;display:block;width:clamp(260px,34vw,410px);max-width:100%;max-height:400px;height:auto;object-fit:contain;filter:drop-shadow(0 22px 36px rgba(0,0,0,.42))}
@media(max-width:680px){.about-house-art{min-height:260px}.about-house-logo{width:min(82vw,320px);max-height:320px}}


/* Remove cookie UI entirely and fit the landing hero into the first viewport */
.cookie-consent,.cookie-settings-link{display:none!important}
@media(min-width:901px){
  .landing-hero{box-sizing:border-box;min-height:0;height:calc(100svh - 156px);padding-top:clamp(20px,3.5vh,42px);padding-bottom:38px;gap:12px}
  .landing-copy{align-self:center}
  .landing-copy h1{font-size:clamp(48px,5.2vw,74px)}
  .landing-lead{margin-top:18px;line-height:1.65}
  .landing-actions{margin-top:24px}
  .landing-proof{margin-top:30px;padding-top:14px;gap:12px 18px}
  .landing-art{min-height:0;height:100%}
  .landing-hero-emblem{width:clamp(270px,28vw,370px);max-height:100%;max-width:100%}
  .landing-bottom{bottom:12px}
}


/* GAMBIX premium authentication refresh */
.auth-gate{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(ellipse 48rem 36rem at 15% 18%,rgba(133,20,53,.32),transparent 68%),
    radial-gradient(ellipse 34rem 32rem at 88% 82%,rgba(216,169,92,.09),transparent 72%),
    linear-gradient(135deg,#13050a 0%,#210811 48%,#16060b 100%);
}
.auth-gate::before,.auth-gate::after{content:"";position:absolute;pointer-events:none;z-index:-1}
.auth-gate::before{
  width:min(62vw,650px);aspect-ratio:1;right:-12%;top:50%;transform:translateY(-50%) rotate(22deg);
  border:1px solid rgba(216,169,92,.12);border-radius:50%;
  box-shadow:0 0 0 36px rgba(216,169,92,.025),0 0 0 88px rgba(216,169,92,.02);
}
.auth-gate::after{
  width:320px;height:320px;left:7%;bottom:-210px;border-radius:50%;
  background:rgba(126,16,47,.2);filter:blur(70px);
}
.auth-card{
  position:relative;width:min(460px,100%);padding:clamp(28px,4vw,44px);
  border:1px solid rgba(216,169,92,.26);border-radius:18px;
  background:linear-gradient(150deg,rgba(48,12,26,.96),rgba(25,6,13,.97));
  box-shadow:0 34px 100px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
}
.auth-card::before{content:"";position:absolute;left:28px;right:28px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(238,196,116,.9),transparent)}
.auth-brand{justify-content:center;margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid rgba(216,169,92,.16)}
.auth-brand .mark{width:196px;height:52px;display:flex;align-items:center;justify-content:center}
.auth-brand .mark img{display:block;width:100%;height:100%;object-fit:contain}
.auth-card h1{text-align:center;font-size:clamp(30px,4vw,36px);line-height:1.1;letter-spacing:-.045em;color:#fff7f2}
.auth-copy{max-width:310px;margin:12px auto 24px;text-align:center;color:#c4a8b0;font-size:14px;line-height:1.7}
.auth-card label{gap:9px;margin:17px 0;color:#e7d4d8;font-size:12px;font-weight:750;letter-spacing:.025em}
.auth-card input{
  box-sizing:border-box;width:100%;height:52px;padding:0 15px;border-radius:8px;
  border:1px solid rgba(216,169,92,.22);background:rgba(16,4,9,.72);
  color:#fff8f4;font-size:15px;transition:border-color .2s,box-shadow .2s,background .2s;
}
.auth-card input::placeholder{color:#80656d}
.auth-card input:hover{border-color:rgba(216,169,92,.45)}
.auth-card input:focus{border-color:#d8a95c;background:#1c0710;box-shadow:0 0 0 3px rgba(216,169,92,.12);outline:none}
.auth-main{
  position:relative;overflow:hidden;width:100%;height:52px;margin-top:14px;border:1px solid #e1b96d;border-radius:8px;
  background:linear-gradient(110deg,#a51d43,#73132e 58%,#541024);color:#fff9f4;
  font-size:14px;font-weight:850;letter-spacing:.025em;box-shadow:0 10px 28px rgba(104,12,39,.3),inset 0 1px rgba(255,255,255,.16);
  transition:transform .2s,filter .2s,box-shadow .2s;
}
.auth-main:hover{transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 14px 34px rgba(104,12,39,.42),inset 0 1px rgba(255,255,255,.18)}
.auth-main:disabled{opacity:.65;cursor:wait;transform:none}
.auth-switch{display:block;margin:21px auto 0;color:#e6bd73;font-size:13px;font-weight:750;text-align:center}
.auth-switch:hover,.auth-back:hover{color:#fff2d4}
.auth-note{padding:12px 14px;margin:0 0 14px;border-radius:8px;background:rgba(143,23,56,.16);border:1px solid rgba(216,169,92,.28);color:#f4dce1;font-size:13px;line-height:1.55}
.auth-legal{margin:24px 0 0;padding-top:18px;border-top:1px solid rgba(216,169,92,.13);font-size:11px;line-height:1.6;color:#9f818a;text-align:center}
.auth-back{display:block;margin:17px auto 0;color:#c8a6af;font-size:12px;font-weight:700}
@media(max-width:520px){
  .auth-gate{padding:24px 18px}
  .auth-gate::before{width:100vw;right:-55%;opacity:.65}
  .auth-card{padding:28px 22px;border-radius:14px}
  .auth-brand{margin-bottom:28px;padding-bottom:22px}
  .auth-brand .mark{width:172px;height:46px}
}
@media(prefers-reduced-motion:reduce){.auth-main{transition:none}}


/* Mobile viewport stability: prevent the whole document from dragging horizontally */
@media(max-width:699px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:clip!important;
    overscroll-behavior-x:none;
  }
  body{position:relative}
  #landingPage,#aboutPage,#authGate,#view,.top,.foot,.dock{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .landing-page,.about-page{overflow-x:clip!important}
  .landing-header,.landing-hero,.landing-bottom,.about-main,.about-mission,
  .about-value-grid,.about-house-art,.auth-gate,.auth-card{
    min-width:0;
    max-width:100%;
  }
  .landing-header{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .landing-hero{padding-left:clamp(18px,5vw,24px);padding-right:clamp(18px,5vw,24px)}
  .landing-copy,.landing-art,.landing-hero-emblem,.about-house-logo{min-width:0;max-width:100%}
  .landing-bottom{left:clamp(18px,5vw,24px);right:clamp(18px,5vw,24px)}
  .about-main{padding-left:clamp(18px,5vw,22px);padding-right:clamp(18px,5vw,22px)}
  .about-value-grid>*{min-width:0}
  .auth-gate{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .auth-card{width:100%}
  .billboard,.rows,.page,.foot-inner{min-width:0;max-width:100%}
  .billboard{margin-left:var(--gutter);margin-right:var(--gutter-r)}
  .bb-actions>*{min-width:0}
}


/* Game logo reveal + persistent Info affordance */
.card-overlay-actions{position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end;justify-content:flex-end;padding:8px;pointer-events:none}
.card-info{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:36px;height:34px;padding:0 10px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(22,6,11,.8);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:1;transform:translateY(0);transition:opacity .2s,transform .2s,background .2s}
.card-info .ui-icon{width:17px;height:17px}.card-info span{font-size:12px;font-weight:800}
@media(hover:hover) and (pointer:fine) and (min-width:700px){
 .card-overlay-actions{justify-content:center;align-items:flex-end;padding-bottom:12px}
 .card-info{opacity:0;transform:translateY(8px)}
 .card:hover .card-info,.card:focus-within .card-info{opacity:1;transform:translateY(0)}
 .card-info:hover{background:var(--blue)}
 .card:hover .fav,.card:focus-within .fav{z-index:5}
}
@media(max-width:699px){
 .card-info{min-width:32px;height:30px;padding:0 8px}.card-info span{font-size:11px}
 .game-info-sheet{width:100%;max-width:520px;max-height:min(88dvh,760px);overflow:auto;overscroll-behavior:contain}
 .modal{padding-left:0;padding-right:0}
}
@media(max-width:699px){
 html,body{overscroll-behavior-x:none}
 body{max-width:100%;overflow-x:clip}
 #view,.landing-page,.about-page,.auth-gate,.account-page,.top,.foot,.dock{min-width:0;max-width:100%;overflow-x:clip}
 .billboard,.rows,.page,.foot-inner{min-width:0;max-width:100%}
 .billboard{margin-left:var(--gutter);margin-right:var(--gutter-r)}
 .player{inset:0;width:100%;max-width:100vw;overflow:hidden}
 .player iframe{width:100%;max-width:100%;min-width:0;min-height:0}
 .card-art{contain:layout paint}
}
@media(prefers-reduced-motion:reduce){.card-info{transition:none}}