/* SMALL GAMES — GLOBAL GAME HEADER ACTIONS V1
   High-visibility, consistent action hierarchy across all game templates. */

:root{
  --sg-action-home-bg:#d8f2a8;
  --sg-action-home-fg:#10150d;
  --sg-action-share-bg:#ffffff;
  --sg-action-share-fg:#101318;
  --sg-action-utility-bg:#171d24;
  --sg-action-utility-fg:#eef2f4;
  --sg-action-border:#39434d;
}

/* Action containers */
header .actions,
header .game-actions,
header .sg-game-actions,
.sgc-header .sgc-actions,
.game-header .game-actions,
.topbar .top-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}

/* All header action controls get a proper button surface. */
header .actions > a,
header .actions > button,
header .game-actions > a,
header .game-actions > button,
header .sg-game-actions > a,
header .sg-game-actions > button,
.sgc-header .sgc-actions > a,
.sgc-header .sgc-actions > button,
.game-header .game-actions > a,
.game-header .game-actions > button,
.topbar .top-actions > a,
.topbar .top-actions > button{
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:0 13px!important;
  border:1px solid var(--sg-action-border)!important;
  border-radius:10px!important;
  background:var(--sg-action-utility-bg)!important;
  color:var(--sg-action-utility-fg)!important;
  font:850 10px/1 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:.1px!important;
  text-decoration:none!important;
  cursor:pointer!important;
  box-shadow:0 2px 0 rgba(0,0,0,.18)!important;
  opacity:1!important;
  transition:transform .12s ease,filter .12s ease,border-color .12s ease!important;
}

/* HOME is the strongest navigational CTA. */
header .actions > a[href="/"],
header .game-actions > a[href="/"],
header .sg-game-actions > a[href="/"],
.sgc-header .sgc-actions > a[href="/"],
.game-header .game-actions > a[href="/"],
.topbar .top-actions > a[href="/"]{
  background:var(--sg-action-home-bg)!important;
  border-color:var(--sg-action-home-bg)!important;
  color:var(--sg-action-home-fg)!important;
  box-shadow:0 3px 0 rgba(103,122,69,.45)!important;
}
header .actions > a[href="/"]::before,
header .game-actions > a[href="/"]::before,
header .sg-game-actions > a[href="/"]::before,
.sgc-header .sgc-actions > a[href="/"]::before,
.game-header .game-actions > a[href="/"]::before,
.topbar .top-actions > a[href="/"]::before{
  content:"";
  width:20px;
  height:20px;
  flex:0 0 20px;
  border-radius:5px;
  background:url('/assets/branding/smallgames-mark.png?v=6') center/contain no-repeat;
}

/* SHARE is the strongest secondary CTA. */
header [data-sg-share-game],
.sgc-header [data-sg-share-game],
.game-header [data-sg-share-game],
.topbar [data-sg-share-game]{
  background:var(--sg-action-share-bg)!important;
  border-color:#fff!important;
  color:var(--sg-action-share-fg)!important;
  box-shadow:0 3px 0 rgba(134,144,151,.45)!important;
}
header [data-sg-share-game]::before,
.sgc-header [data-sg-share-game]::before,
.game-header [data-sg-share-game]::before,
.topbar [data-sg-share-game]::before{
  content:"↗";
  font-size:14px;
  font-weight:950;
}

/* Utility controls remain intentionally darker so hierarchy is obvious. */
header .actions > button:not([data-sg-share-game]),
header .game-actions > button:not([data-sg-share-game]),
header .sg-game-actions > button:not([data-sg-share-game]),
.sgc-header .sgc-actions > button:not([data-sg-share-game]),
.game-header .game-actions > button:not([data-sg-share-game]),
.topbar .top-actions > button:not([data-sg-share-game]){
  background:var(--sg-action-utility-bg)!important;
  color:var(--sg-action-utility-fg)!important;
  border-color:var(--sg-action-border)!important;
}

/* Hover / keyboard accessibility */
header .actions > a:hover,header .actions > button:hover,
header .game-actions > a:hover,header .game-actions > button:hover,
header .sg-game-actions > a:hover,header .sg-game-actions > button:hover,
.sgc-header .sgc-actions > a:hover,.sgc-header .sgc-actions > button:hover,
.game-header .game-actions > a:hover,.game-header .game-actions > button:hover,
.topbar .top-actions > a:hover,.topbar .top-actions > button:hover{
  filter:brightness(1.07)!important;
  transform:translateY(-1px)!important;
}
header .actions > a:focus-visible,header .actions > button:focus-visible,
header .game-actions > a:focus-visible,header .game-actions > button:focus-visible,
header .sg-game-actions > a:focus-visible,header .sg-game-actions > button:focus-visible,
.sgc-header .sgc-actions > a:focus-visible,.sgc-header .sgc-actions > button:focus-visible,
.game-header .game-actions > a:focus-visible,.game-header .game-actions > button:focus-visible,
.topbar .top-actions > a:focus-visible,.topbar .top-actions > button:focus-visible{
  outline:3px solid rgba(216,242,168,.35)!important;
  outline-offset:2px!important;
}

/* Notification bell stays compact but visually belongs to the same action rail. */
header .sg-notify-wrap,.sgc-header .sg-notify-wrap,.game-header .sg-notify-wrap,.topbar .sg-notify-wrap{
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  margin:0!important;
}
header .sg-notify-bell,.sgc-header .sg-notify-bell,.game-header .sg-notify-bell,.topbar .sg-notify-bell{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  border-radius:10px!important;
  border:1px solid var(--sg-action-border)!important;
  background:var(--sg-action-utility-bg)!important;
  color:var(--sg-action-utility-fg)!important;
}

/* Icon controls share an identical box and optical centre. */
header [data-sg-audio-toggle],
.topbar [data-sg-audio-toggle],
.sg-game-top [data-sg-audio-toggle],
.sgc-header [data-sg-audio-toggle],
.game-header [data-sg-audio-toggle],
header .sg-notify-wrap,
.topbar .sg-notify-wrap,
.sg-game-top .sg-notify-wrap,
.sgc-header .sg-notify-wrap,
.game-header .sg-notify-wrap,
header .sg-notify-bell,
.topbar .sg-notify-bell,
.sg-game-top .sg-notify-bell,
.sgc-header .sg-notify-bell,
.game-header .sg-notify-bell{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  flex:0 0 40px!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
}
header [data-sg-audio-toggle],
.topbar [data-sg-audio-toggle],
.sg-game-top [data-sg-audio-toggle],
.sgc-header [data-sg-audio-toggle],
.game-header [data-sg-audio-toggle],
header .sg-notify-bell,
.topbar .sg-notify-bell,
.sg-game-top .sg-notify-bell,
.sgc-header .sg-notify-bell,
.game-header .sg-notify-bell{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}
header [data-sg-audio-toggle] svg,
.topbar [data-sg-audio-toggle] svg,
.sg-game-top [data-sg-audio-toggle] svg,
.sgc-header [data-sg-audio-toggle] svg,
.game-header [data-sg-audio-toggle] svg,
header .sg-notify-bell svg,
.topbar .sg-notify-bell svg,
.sg-game-top .sg-notify-bell svg,
.sgc-header .sg-notify-bell svg,
.game-header .sg-notify-bell svg{
  display:block!important;
  margin:auto!important;
}

/* Small screens: preserve strong touch targets and allow a clean second row. */
@media(max-width:620px){
  header .actions,
  header .game-actions,
  header .sg-game-actions,
  .sgc-header .sgc-actions,
  .game-header .game-actions,
  .topbar .top-actions{
    justify-content:flex-end!important;
    gap:6px!important;
  }
  header .actions > a,header .actions > button,
  header .game-actions > a,header .game-actions > button,
  header .sg-game-actions > a,header .sg-game-actions > button,
  .sgc-header .sgc-actions > a,.sgc-header .sgc-actions > button,
  .game-header .game-actions > a,.game-header .game-actions > button,
  .topbar .top-actions > a,.topbar .top-actions > button{
    min-height:44px!important;
    padding:0 11px!important;
  }
}

@media(max-width:380px){
  header .actions > a,header .actions > button,
  header .game-actions > a,header .game-actions > button,
  header .sg-game-actions > a,header .sg-game-actions > button,
  .sgc-header .sgc-actions > a,.sgc-header .sgc-actions > button,
  .game-header .game-actions > a,.game-header .game-actions > button,
  .topbar .top-actions > a,.topbar .top-actions > button{
    padding-inline:9px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  header .actions > a,header .actions > button,
  header .game-actions > a,header .game-actions > button,
  header .sg-game-actions > a,header .sg-game-actions > button,
  .sgc-header .sgc-actions > a,.sgc-header .sgc-actions > button,
  .game-header .game-actions > a,.game-header .game-actions > button,
  .topbar .top-actions > a,.topbar .top-actions > button{transition:none!important}
}

/* SMALL GAMES — UNIVERSAL GAME HEADER V2
   Presentation only: unifies legacy game templates without touching game code. */
header,
.topbar,
.sg-game-top,
.sgc-header,
.game-header{
  position:relative;
  z-index:20;
  width:100%;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 13px!important;
  margin-bottom:12px!important;
  border:1px solid rgba(148,174,207,.18)!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,rgba(18,26,40,.96),rgba(10,16,27,.96))!important;
  box-shadow:0 12px 34px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.035)!important;
}

header::after,
.topbar::after,
.sg-game-top::after,
.sgc-header::after,
.game-header::after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,rgba(115,239,255,.55),rgba(169,132,255,.2),transparent 72%);
  pointer-events:none;
}

header .brand,
header .game-brand,
header .sgc-brand,
.topbar .brand,
.sg-game-top .brand,
.sgc-header .sgc-brand,
.game-header .game-brand{
  min-width:0;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
}

/* Replace legacy letter tiles with the official mark. The same cached asset is
   already used by the Home action, so this adds no extra network request. */
header .mark,
header .game-mark,
header .sgc-mark,
.topbar .mark,
.sg-game-top .mark,
.sgc-header .sgc-mark,
.game-header .game-mark{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  display:block!important;
  overflow:hidden!important;
  border:1px solid rgba(120,231,255,.34)!important;
  border-radius:11px!important;
  background-color:#111b2a!important;
  background-image:url('/assets/branding/smallgames-mark.png?v=6')!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  color:transparent!important;
  font-size:0!important;
  box-shadow:0 0 20px rgba(76,214,255,.13)!important;
}

header .brand[href="/"],
header a.brand[href="/"],
.topbar a.brand[href="/"]{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#f4f8ff!important;
  text-decoration:none!important;
}
header a.brand[href="/"]::before,
.topbar a.brand[href="/"]::before{
  content:"";
  width:42px;
  height:42px;
  flex:0 0 42px;
  border:1px solid rgba(120,231,255,.34);
  border-radius:11px;
  background:#111b2a url('/assets/branding/smallgames-mark.png?v=6') center/cover no-repeat;
  box-shadow:0 0 20px rgba(76,214,255,.13);
}

header .brand strong,header .brand b,
header .game-name,header .sgc-brand strong,
.topbar .brand strong,.topbar .brand b,
.sg-game-top .brand strong,.sgc-header .sgc-brand strong,
.game-header .game-name{
  color:#f5f8ff!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1.1!important;
  letter-spacing:.65px!important;
}
header .brand span,header .game-tagline,header .sgc-brand span,
.topbar .brand span,.topbar .tagline,
.sg-game-top .brand span,.sgc-header .sgc-brand span,
.game-header .game-tagline{
  display:block;
  margin-top:3px;
  color:#8f9db1!important;
  font-size:9px!important;
  line-height:1.25!important;
}

header .nav,
.topbar .nav{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}
header .nav>a,header .nav>button,
.topbar .nav>a,.topbar .nav>button{
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 12px!important;
  border:1px solid var(--sg-action-border)!important;
  border-radius:10px!important;
  background:var(--sg-action-utility-bg)!important;
  color:var(--sg-action-utility-fg)!important;
  font:850 10px/1 Inter,system-ui,sans-serif!important;
  text-decoration:none!important;
}
header .nav>a[href="/"],.topbar .nav>a[href="/"]{
  background:var(--sg-action-home-bg)!important;
  border-color:var(--sg-action-home-bg)!important;
  color:var(--sg-action-home-fg)!important;
}

@media(max-width:620px){
  header,.topbar,.sg-game-top,.sgc-header,.game-header{
    min-height:0;
    align-items:flex-start!important;
    padding:10px!important;
    border-radius:13px!important;
  }
  header .brand span,header .game-tagline,header .sgc-brand span,
  .topbar .brand span,.topbar .tagline,.sg-game-top .brand span,
  .sgc-header .sgc-brand span,.game-header .game-tagline{display:none!important}
  header .mark,header .game-mark,header .sgc-mark,
  .topbar .mark,.sg-game-top .mark,.sgc-header .sgc-mark,.game-header .game-mark,
  header a.brand[href="/"]::before,.topbar a.brand[href="/"]::before{
    width:38px!important;height:38px!important;min-width:38px!important;flex-basis:38px!important
  }
  header .nav,.topbar .nav{gap:6px!important}
  header .nav>a,header .nav>button,.topbar .nav>a,.topbar .nav>button{
    min-height:44px!important;padding-inline:10px!important
  }
}

@media(max-width:430px){
  header,.topbar,.sg-game-top,.sgc-header,.game-header{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  header .actions,header .game-actions,header .sg-game-actions,
  header .nav,.topbar .actions,.topbar .top-actions,.topbar .nav,
  .sg-game-top .sg-game-actions,.sgc-header .sgc-actions,.game-header .game-actions{
    width:100%!important;
    justify-content:flex-start!important;
  }
}

/* SMALL GAMES — UNIVERSAL PAGE SHELL V1
   One structural rhythm for every game template. Game mechanics and canvases
   remain owned by each game; only their containing rails are normalized. */
:root{
  --sg-page-max:1180px;
  --sg-content-max:980px;
  --sg-page-gutter:14px;
  --sg-section-gap:12px;
}

body>.page,
body>.page-shell,
body>.sgc-page,
body>.sg-normal-page,
body>.sg-page-shell,
body>.shell,
body>main.page{
  width:min(var(--sg-page-max),100%)!important;
  max-width:var(--sg-page-max)!important;
  margin-inline:auto!important;
  padding:var(--sg-page-gutter)!important;
}

body>header,
body>.page>header,
body>.page-shell>header,
body>.sgc-page>header,
body>.sg-normal-page>header,
body>.sg-page-shell>header,
body>.shell>header,
body>main.page>header,
body>.page-shell>.topbar{
  width:min(var(--sg-content-max),100%)!important;
  max-width:var(--sg-content-max)!important;
  margin:0 auto var(--sg-section-gap)!important;
}

/* Canonical centred content rail across legacy templates. */
body .layout,
body .sgc-layout,
body .play-layout,
body .cf-wrapper,
body .game-viewport-container,
body .sg-score-area,
body .score-area,
body .scorearea,
body .score-grid,
body .scoregrid,
body .guide,
body .leader,
body .sg-editorial,
body .sg-universal-footer,
body>.shell>.hero,
body>.shell>.grid,
body>.shell>.gamegrid,
body>.sg-normal-page>.shell,
body>.sg-page-shell>main{
  width:min(var(--sg-content-max),100%)!important;
  max-width:var(--sg-content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body>main.page>.card{
  width:min(var(--sg-content-max),100%)!important;
  max-width:var(--sg-content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

body .layout,
body .sgc-layout,
body .play-layout{
  display:block!important;
}
body .layout>.rail,
body .sgc-layout>.rail,
body .play-layout>.rail{
  display:none!important;
}
body .layout>main,
body .sgc-layout>main,
body .play-layout>main,
body .game-column,
body .gamecol,
body .sgc-main{
  width:100%!important;
  max-width:var(--sg-content-max)!important;
  min-width:0!important;
  margin-inline:auto!important;
}

/* Align all game cards and all below-game sections to the same edges. */
body .game,
body .game-shell,
body .game-card,
body .sgc-game-card,
body .card,
body .stage{
  max-width:100%;
}
body .info,
body .below,
body .score-area,
body .scorearea,
body .score-grid,
body .scoregrid,
body .sg-score-area{
  margin-top:var(--sg-section-gap)!important;
  margin-bottom:var(--sg-section-gap)!important;
}

/* Same leaderboard/account proportions regardless of the originating template. */
body .score-area,
body .scorearea,
body .score-grid,
body .scoregrid,
body .sg-score-area{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr)!important;
  gap:12px!important;
  align-items:stretch!important;
}
body .leader-panel,
body .leaderpanel,
body .leader,
body .sg-score-card,
body .account-panel,
body .accountpanel,
body .account{
  min-width:0;
  border-radius:14px!important;
  padding:14px!important;
}
body .leader-panel,
body .leaderpanel,
body .account-panel,
body .accountpanel,
body .sg-score-card{
  border:1px solid rgba(145,169,199,.2)!important;
  background:rgba(14,21,32,.88)!important;
  color:#f2f6fb!important;
}
body .leader-head,
body .leaderhead,
body .sg-score-head,
body .account-panel,
body .accountpanel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
body .leader-head span,
body .leaderhead span,
body .sg-score-head span,
body .account-panel span,
body .accountpanel span{
  color:#8f9caf;
  font-size:9px;
}
html[data-game="orbit"] .hud{grid-template-columns:repeat(6,minmax(0,1fr))!important}

/* The editorial guide and footer always finish the page on the same rail. */
body .sg-editorial{margin-top:20px!important;margin-bottom:12px!important}
body footer:not(.sg-universal-footer){display:none!important}
body .sg-universal-footer{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 2px 22px!important;
  border-top:1px solid rgba(145,169,199,.2);
  color:#8290a3;
  font:700 10px/1.5 Inter,system-ui,sans-serif;
}
body .sg-universal-footer nav{display:flex;gap:13px;flex-wrap:wrap;justify-content:flex-end}
body .sg-universal-footer a{color:inherit;text-decoration:none}
body .sg-universal-footer a:hover{color:#f2f6fb}

/* Shared menu generated by game-page-shell.js. */
header .sg-universal-actions,
.topbar .sg-universal-actions,
.sg-game-top .sg-universal-actions,
.sgc-header .sg-universal-actions,
.game-header .sg-universal-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}
header .sg-universal-actions>a,
header .sg-universal-actions>button,
.topbar .sg-universal-actions>a,
.topbar .sg-universal-actions>button,
.sg-game-top .sg-universal-actions>a,
.sg-game-top .sg-universal-actions>button,
.sgc-header .sg-universal-actions>a,
.sgc-header .sg-universal-actions>button,
.game-header .sg-universal-actions>a,
.game-header .sg-universal-actions>button{
  min-height:40px!important;
}
header .sg-universal-actions>.sg-header-link,
.topbar .sg-universal-actions>.sg-header-link,
.sg-game-top .sg-universal-actions>.sg-header-link,
.sgc-header .sg-universal-actions>.sg-header-link,
.game-header .sg-universal-actions>.sg-header-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 12px!important;
  border:1px solid var(--sg-action-border)!important;
  border-radius:10px!important;
  background:var(--sg-action-utility-bg)!important;
  color:var(--sg-action-utility-fg)!important;
  font:850 10px/1 Inter,system-ui,sans-serif!important;
  text-decoration:none!important;
}

/* Cover the remaining branded header variants. */
header .cf-brand,header .cf-top-actions,
.game-header .cf-brand,.game-header .cf-top-actions{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
}
header .cf-brand{min-width:0}

@media(max-width:760px){
  :root{--sg-page-gutter:8px;--sg-section-gap:9px}
  body .score-area,
  body .scorearea,
  body .score-grid,
  body .scoregrid,
  body .sg-score-area{grid-template-columns:1fr!important}
  html[data-game="orbit"] .hud{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:520px){
  body .sg-universal-footer{display:grid!important;grid-template-columns:1fr;padding-inline:4px!important}
  body .sg-universal-footer nav{justify-content:flex-start}
}