/* 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:"⌂";
  font-size:15px;
  line-height:1;
  font-weight:950;
}

/* 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;
}

/* 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:40px!important;
    padding:0 11px!important;
  }
}