/* Reference: https://www.12play54.com/en-SG, observed 8 October 2026.
   Exact shell colours intentionally override generic palette defaults. */
@font-face{font-family:Montserrat;src:url('/assets/montserrat.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--bg:#000;--panel:#18181d;--panel2:#212128;--line:#ffffff1a;--text:#fff;--muted:#a3a3a6;--accent:#e11919;--bg-hover:#25252e;--bg-active:#353540;--sidebar-width:288px;--header-height:72px;--z-backdrop:25}
body{background:#000}.topbar,.sidebar,.footer{font-family:Montserrat,Arial,sans-serif}.topbar{position:fixed;left:0;right:0;top:0;height:var(--header-height);padding:0 8px;gap:16px;background:#000;border:0;box-shadow:0 8px 20px #0002}.menu-button{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:64px;height:48px;padding:0;border:0;border-radius:12px;background:#18181d;color:#b3b3b5;font-size:14px}.menu-button svg{width:20px;height:20px}.brand{height:52%;margin:0 24px;display:block;flex-shrink:0}.brand-image{width:auto;height:100%;display:block;object-fit:contain}.header-nav{display:flex;align-items:center;gap:8px}.header-nav a{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 20px;height:44px;border-radius:12px;font-size:14px;font-weight:700;white-space:nowrap}.header-nav img{object-fit:contain;flex-shrink:0}.top-right{gap:8px;font-size:14px}.header-button{display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:82px;padding:0 20px;border-radius:12px;font-weight:700;white-space:nowrap}.header-light{background:#fff;color:#000}.header-gradient{background:linear-gradient(95.64deg,#edba00 -8.57%,#f11919 60.92%,#ab0000 103.48%);color:#fff}.top-right .region{width:44px;height:44px;margin-left:16px;background:#353540;display:flex;align-items:center;justify-content:center;border-radius:12px}.region svg{width:24px;height:24px}.sidebar{top:var(--header-height);width:var(--sidebar-width);padding:0 8px 8px;gap:8px;border:0;background:#000;overscroll-behavior:contain}.nav-group{flex-shrink:0;background:#18181d;border-radius:16px;overflow:hidden}.group-toggle{border:0;width:100%;display:flex;align-items:center;gap:18px;padding:8px 18px 10px;height:50px;color:#fff;background:#212128;text-align:left;font-size:14px;font-weight:700}.group-mark{width:28px;height:28px;display:grid;place-items:center;flex-shrink:0}.group-mark img{object-fit:contain;max-width:100%}.group-label{white-space:nowrap}.group-chevron{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:#25252e;margin-left:auto;color:#999}.group-chevron svg{width:20px;height:20px;transform:rotate(180deg)}.group-toggle[aria-expanded=false] .group-chevron svg{transform:none}.sidebar nav{padding:8px;gap:4px;display:grid;grid-template-columns:1fr}.sidebar nav[hidden]{display:none}.nav-link{border-radius:12px;gap:16px;padding:8px 16px;min-height:48px;height:48px;font-size:14px;line-height:20px;font-weight:400;color:#fff}.nav-link.active{background:#25252e;color:#fff}.nav-icon{width:24px;height:24px;display:block;flex-shrink:0;color:#99999c}.nav-icon svg{width:24px;height:24px}.nav-link.active .nav-icon{color:#f36b37}.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-foot{padding:20px 16px;margin:0;border:0;font-size:12px;color:#999}.sidebar-foot strong{font-size:12px;font-weight:600;color:#b3b3b5}.sidebar-foot span{display:block}.sidebar-foot small{display:block;font-size:11px;margin-top:8px}.main{margin-left:var(--sidebar-width);padding:96px 24px 0;max-width:none}.footer{position:relative;display:block;overflow:hidden;margin:24px 0 32px;padding:24px;background:#18181d;border:0;border-radius:24px;color:#999;font-size:12px;line-height:20px;isolation:isolate}.footer:before{content:'';position:absolute;inset:0;background-image:url('/assets/footer-watermark.svg');background-position:left center;background-repeat:no-repeat;background-size:auto 100%;z-index:-1;pointer-events:none}.footer-top{display:flex;gap:44px}.footer-columns{flex:1;min-width:0;display:flex;gap:20px}.footer-column{flex:1;min-width:0}.footer h2{font-size:12px;line-height:16px;font-weight:700;letter-spacing:normal;margin:0 0 20px;color:#fff;text-wrap:initial}.footer nav{display:flex;flex-direction:column;gap:14px;align-items:flex-start;font-size:12px;line-height:20px}.footer nav a{color:#aaa;max-width:100%;overflow-wrap:anywhere}.footer-column a{white-space:normal}.footer-resources{flex:1;min-width:0;display:grid;grid-template-columns:1fr;gap:28px}.footer-resources nav{gap:10px}.footer-support-inner{display:flex;align-items:center;gap:16px}.footer-support-inner img{object-fit:contain}.footer .footer-support-inner p{font-size:12px;line-height:20px;color:#aaa;margin:0}.footer-support a{color:#bcbcbc}.footer-bottom{border-top:1px solid #ffffff1a;margin-top:28px;padding:72px 16px 20px;display:flex;align-items:center;justify-content:space-between;gap:32px}.footer-brand{display:flex;align-items:center;gap:24px;flex-shrink:0}.footer-brand>a{width:127px;height:38px;display:block}.footer-brand .brand-image{width:100%;height:auto}.footer-brand span{font-size:12px;display:block}.footer-brand strong{font-size:12px;display:block;margin-top:8px;color:#a3a3a6}.footer p.footer-disclosure{font-size:12px;color:#ddd;line-height:16px;max-width:350px;margin:0}.nav-backdrop{display:none}body.nav-collapsed{--sidebar-width:80px}body.nav-collapsed .group-label,body.nav-collapsed .group-chevron,body.nav-collapsed .nav-label,body.nav-collapsed .sidebar-foot{display:none}body.nav-collapsed .group-toggle{padding:11px 18px}body.nav-collapsed .sidebar nav{padding:8px}body.nav-collapsed .nav-link{padding:12px;width:48px}body.nav-collapsed .group-toggle[aria-expanded=false]+nav{display:grid}
@media(hover:hover) and (pointer:fine){.menu-button:hover{background:#292931}.header-nav a:hover,.nav-link:hover{background:#25252e;color:#fff}.header-light:hover{background:#e5e5e5}.header-gradient:hover{box-shadow:0 5px 27px #fa00008a}.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}}
@media(max-width:1199px){.topbar{gap:8px}.brand{margin:0 12px}.header-nav a{padding:0 12px}.top-right .region{margin-left:8px}.footer-top{gap:24px}.footer-bottom{padding:48px 0 8px}.footer-brand{gap:16px}}
@media(max-width:1023px){:root{--sidebar-width:248px;--header-height:64px}.menu-button{width:42px;height:42px}.brand{margin:0 8px}.header-nav{gap:0}.header-nav a{padding:0 8px}.header-nav a:last-child{display:none}.main{padding-top:84px}.nav-link{padding:8px 12px;gap:12px}.group-toggle{padding-left:14px;gap:14px}.footer-top{flex-direction:column;gap:32px}.footer-resources{display:grid;grid-template-columns:1fr 1fr}.footer-bottom{flex-wrap:wrap;padding-top:32px}.footer p.footer-disclosure{max-width:100%}}
@media(max-width:800px){:root{--header-height:56px;--sidebar-width:0px}.topbar{padding:0 12px;gap:8px}.menu-button{width:32px;height:32px;border-radius:8px}.menu-button svg{width:18px;height:18px}.brand{margin:0 4px;height:28px}.header-nav{display:none}.header-button{height:34px;padding:0 12px;border-radius:8px;min-width:0;font-size:12px}.top-right .region{width:32px;height:32px;margin-left:0;border-radius:8px}.region svg{width:22px;height:22px}.top-right{gap:6px}.sidebar{display:none;top:var(--header-height);bottom:0;max-height:none;width:280px;padding:8px;background:#000;z-index:var(--z-menu)}.sidebar.open{display:flex}.sidebar nav{grid-template-columns:1fr}.sidebar-foot{display:block}.main{margin-left:0;padding:80px 16px 0}.nav-backdrop:not([hidden]){display:block;position:fixed;inset:var(--header-height) 0 0;border:0;background:#0009;z-index:var(--z-backdrop)}body.nav-collapsed{--sidebar-width:0px}.footer{margin:24px -16px 0;padding:32px 24px 28px;border-radius:12px 12px 0 0}.footer:before{display:none}.footer-top{gap:32px}.footer-column{flex:1}.footer h2{margin-bottom:20px}.footer-columns{gap:20px}.footer-resources{grid-template-columns:1fr 1fr;gap:24px}.footer nav{gap:14px}.footer-bottom{padding:28px 0 0;margin-top:28px;gap:24px}.footer-brand{gap:24px}.footer p.footer-disclosure{font-size:12px;line-height:18px}}
@media(max-width:420px){.topbar{padding:0 8px;gap:4px}.brand{height:25px;margin:0 3px}.header-button{padding:0 10px}.top-right{gap:5px}.top-right .region{margin-left:2px}.footer-resources{grid-template-columns:1fr}.footer{padding-left:20px;padding-right:20px}.footer-columns{gap:14px}.footer nav{font-size:11px}.footer-column h2{font-size:12px}.nav-link{font-size:14px}}
@media print{.topbar,.sidebar,.nav-backdrop{display:none}.main{margin:0;padding:0}.footer{background:none;color:#111}.footer:before{display:none}.footer a,.footer h2,.footer p.footer-disclosure{color:#111}}

.sidebar nav{grid-template-columns:minmax(0,1fr)}.nav-link{min-width:0}

/* Match the reference sidebar: continuous width change and synchronized reflow. */
@media(min-width:801px){
  body.nav-motion .sidebar{transition:width 200ms linear}
  body.nav-motion .main{transition:margin-left 200ms linear}
  .sidebar .nav-link{width:100%}
  body.nav-motion .nav-link{transition:width 200ms linear,padding 200ms linear}
  body.nav-motion .group-toggle{transition:padding 200ms linear}
}
@media(prefers-reduced-motion:reduce){body.nav-motion .sidebar,body.nav-motion .main,body.nav-motion .nav-link,body.nav-motion .group-toggle{transition:none}}


.nav-icon img{width:24px;height:24px;object-fit:contain}
.collapsed-casino,.collapsed-shortcut{display:none}
@media(min-width:801px){
 body.nav-collapsed .sidebar{scrollbar-width:none;overflow-x:hidden;gap:8px}
 body.nav-collapsed .sidebar::-webkit-scrollbar{display:none}
 body.nav-collapsed .sidebar>.nav-group:first-child{display:none}
 body.nav-collapsed .sidebar .nav-group{border-radius:16px}
 body.nav-collapsed .collapsed-casino{height:50px;display:grid;place-items:center;background:#212128;flex-shrink:0}
 body.nav-collapsed .game-nav-group nav{padding:8px;gap:4px}
 body.nav-collapsed .sidebar .nav-link{display:flex;justify-content:center;gap:0;width:48px;height:48px;padding:12px}
 body.nav-collapsed .nav-icon,body.nav-collapsed .game-nav-group .nav-icon svg{width:24px;height:24px}
 body.nav-collapsed .game-nav-group a[href="/12goal/"],body.nav-collapsed .game-nav-group a[href="/quick-games/"]{display:none}
 body.nav-collapsed .collapsed-shortcut{display:grid;place-items:center;flex-shrink:0;width:64px;height:64px;border-radius:16px;background:#18181d}
 body.nav-collapsed .collapsed-quick{background:linear-gradient(145deg,#850707,#d01515)}
 .collapsed-casino img,.collapsed-shortcut img{object-fit:contain}
 .collapsed-casino:focus-visible,.collapsed-shortcut:focus-visible{outline:2px solid #ffb0a4;outline-offset:-3px}
}

body.nav-collapsed .collapsed-goal img{filter:grayscale(1);opacity:.7}

.hero:has(.hero-logo){grid-template-columns:minmax(0,1fr) minmax(180px,32%)}
.hero-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;min-width:0;font-size:inherit;transform:none}
.hero-logo img{display:block;width:100%;max-width:360px;height:auto;object-fit:contain}
.hero-logo small{margin:0;font-style:normal}
@media(max-width:800px){.hero:has(.hero-logo){grid-template-columns:minmax(0,1fr) 150px}.hero-logo{gap:16px}}
@media(max-width:600px){.hero:has(.hero-logo){grid-template-columns:minmax(0,1fr)}.hero-logo{display:none}}