/* Nomaemog game flow redesign: one clear select -> confirm -> play system */

:root{
  --gf-panel:rgba(255,255,255,.42);
  --gf-panel-strong:rgba(255,255,255,.58);
  --gf-border:rgba(255,255,255,.38);
  --gf-shadow:0 24px 72px rgba(31,24,18,.16);
}
body.dark{
  --gf-panel:rgba(255,255,255,.055);
  --gf-panel-strong:rgba(255,255,255,.085);
  --gf-border:rgba(255,255,255,.1);
  --gf-shadow:0 28px 86px rgba(0,0,0,.38);
}

/* HERO: stop showing two separate mode buttons at the top */
.hero-actions #btn-solo,
.hero-actions #btn-multiplayer{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.hero-actions{
  display:flex!important;
  gap:.65rem!important;
  flex-wrap:wrap!important;
  align-items:center!important;
}
.gf-start-btn,
.gf-board-btn{
  min-height:48px!important;
  border-radius:16px!important;
  padding:.9rem 1.15rem!important;
  border:1px solid var(--gf-border)!important;
  font-weight:950!important;
  cursor:pointer!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease!important;
}
.gf-start-btn{
  background:linear-gradient(135deg,var(--accent-warm),#8c5b32)!important;
  color:#170f08!important;
  border:none!important;
  box-shadow:0 18px 44px rgba(196,149,106,.24)!important;
}
.gf-board-btn{
  background:var(--gf-panel)!important;
  color:var(--text)!important;
}
.gf-start-btn:hover,
.gf-board-btn:hover{
  transform:translateY(-2px)!important;
}

/* MODE SELECTOR */
.mode-select-panel,
.gf-mode-panel{
  grid-column:1 / -1!important;
  padding:1rem!important;
  border-radius:26px!important;
  scroll-margin-top:88px!important;
}
.gf-mode-panel.mode-pulse{
  animation:gfPulse .9s ease both!important;
}
@keyframes gfPulse{
  0%{box-shadow:var(--gf-shadow)}
  42%{box-shadow:0 0 0 6px rgba(196,149,106,.22),var(--gf-shadow)}
  100%{box-shadow:var(--gf-shadow)}
}
.gf-mode-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:1rem!important;
  align-items:end!important;
  margin-bottom:.85rem!important;
}
.gf-eyebrow{
  display:inline-flex!important;
  width:max-content!important;
  padding:.25rem .52rem!important;
  border-radius:999px!important;
  background:rgba(196,149,106,.14)!important;
  border:1px solid rgba(196,149,106,.22)!important;
  color:var(--accent-warm)!important;
  font-size:.64rem!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  margin-bottom:.42rem!important;
}
.gf-mode-head h3{
  margin:0!important;
  font-size:clamp(1.25rem,2.4vw,1.9rem)!important;
  letter-spacing:-.05em!important;
  line-height:1!important;
}
.gf-mode-head p{
  margin:.35rem 0 0!important;
  color:var(--text-dim)!important;
  font-weight:750!important;
  max-width:620px!important;
}
.gf-steps{
  display:flex!important;
  gap:.35rem!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}
.gf-step{
  display:inline-flex!important;
  align-items:center!important;
  gap:.3rem!important;
  padding:.36rem .52rem!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.25)!important;
  border:1px solid var(--gf-border)!important;
  font-size:.64rem!important;
  font-weight:900!important;
  color:var(--text-dim)!important;
  white-space:nowrap!important;
}
body.dark .gf-step{
  background:rgba(255,255,255,.04)!important;
}
.gf-step.active{
  color:var(--accent-warm)!important;
  border-color:rgba(196,149,106,.45)!important;
  background:rgba(196,149,106,.14)!important;
}
.gf-mode-grid{
  display:grid!important;
  grid-template-columns:1.12fr .88fr!important;
  gap:.75rem!important;
}
.gf-mode-card{
  position:relative!important;
  min-height:164px!important;
  border-radius:22px!important;
  padding:1rem!important;
  border:1px solid var(--gf-border)!important;
  background:var(--gf-panel)!important;
  color:var(--text)!important;
  text-align:left!important;
  cursor:pointer!important;
  overflow:hidden!important;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease!important;
}
.gf-mode-card::after{
  content:"";
  position:absolute;
  inset:auto -35% -55% auto;
  width:180px;
  height:180px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(196,149,106,.18),transparent 68%);
  pointer-events:none;
}
.gf-mode-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(196,149,106,.42)!important;
}
.gf-mode-card.active{
  background:linear-gradient(135deg,rgba(196,149,106,.24),var(--gf-panel-strong))!important;
  border-color:rgba(196,149,106,.72)!important;
  box-shadow:0 20px 54px rgba(196,149,106,.16)!important;
}
.gf-card-top{
  display:flex!important;
  justify-content:space-between!important;
  gap:.8rem!important;
  align-items:flex-start!important;
  position:relative!important;
  z-index:1!important;
}
.gf-icon{
  width:42px!important;
  height:42px!important;
  border-radius:15px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(196,149,106,.16)!important;
  font-size:1.35rem!important;
}
.gf-tag{
  padding:.25rem .48rem!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.28)!important;
  border:1px solid var(--gf-border)!important;
  font-size:.62rem!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  color:var(--text-dim)!important;
}
.gf-mode-card h4{
  position:relative!important;
  z-index:1!important;
  margin:.8rem 0 .32rem!important;
  font-size:1.25rem!important;
  letter-spacing:-.045em!important;
}
.gf-mode-card p{
  position:relative!important;
  z-index:1!important;
  margin:0!important;
  color:var(--text-dim)!important;
  font-size:.88rem!important;
  line-height:1.4!important;
  font-weight:750!important;
}
.gf-mode-stats{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:.4rem!important;
  margin-top:.85rem!important;
}
.gf-mode-stats span{
  padding:.26rem .46rem!important;
  border-radius:999px!important;
  background:rgba(196,149,106,.12)!important;
  border:1px solid rgba(196,149,106,.18)!important;
  color:var(--accent-warm)!important;
  font-size:.65rem!important;
  font-weight:900!important;
}
.gf-confirm{
  margin-top:.8rem!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:.75rem!important;
  align-items:center!important;
  border-radius:20px!important;
  padding:.8rem!important;
  border:1px solid var(--gf-border)!important;
  background:var(--gf-panel-strong)!important;
}
.gf-confirm strong{
  display:block!important;
  color:var(--text)!important;
  font-size:.94rem!important;
  letter-spacing:-.02em!important;
}
.gf-confirm span{
  display:block!important;
  color:var(--text-dim)!important;
  font-size:.78rem!important;
  font-weight:750!important;
  margin-top:.13rem!important;
}
.gf-confirm button{
  min-width:176px!important;
  min-height:46px!important;
  border:none!important;
  border-radius:15px!important;
  padding:.82rem 1.05rem!important;
  background:linear-gradient(135deg,var(--accent-warm),#8c5b32)!important;
  color:#160f08!important;
  font-weight:950!important;
  cursor:pointer!important;
}

/* PLAY SCREENS */
#screen-solo .chat-top-bar,
#screen-multiplayer .chat-top-bar{
  min-height:58px!important;
  padding:.55rem .9rem!important;
}
#screen-solo .chat-top-bar::after,
#screen-multiplayer .chat-top-bar::after{
  content:attr(data-flow-label);
  display:inline-flex;
  margin-left:auto;
  margin-right:.5rem;
  padding:.28rem .5rem;
  border-radius:999px;
  background:rgba(196,149,106,.14);
  border:1px solid rgba(196,149,106,.22);
  color:var(--accent-warm);
  font-size:.64rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.05em;
}
#screen-solo .chat-body,
#screen-multiplayer .chat-body{
  padding:.75rem!important;
  gap:.75rem!important;
}
#screen-solo .video-panel,
#screen-multiplayer .video-panel,
#screen-multiplayer .opponent-card,
#screen-multiplayer .opponent-video-panel,
#screen-solo .text-section,
#screen-multiplayer .mp-side-panel{
  border-radius:22px!important;
  border:1px solid var(--gf-border)!important;
  box-shadow:var(--gf-shadow)!important;
}
#screen-multiplayer .multiplayer-layout{
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr)!important;
  align-items:stretch!important;
}
#screen-multiplayer .video-section-solo,
#screen-solo .video-section-solo{
  gap:.55rem!important;
}
#screen-multiplayer .video-controls,
#screen-solo .video-controls{
  border-radius:18px!important;
  justify-content:space-between!important;
  padding:.52rem!important;
}
#screen-multiplayer .chat-bottom-bar,
#screen-solo .chat-bottom-bar{
  min-height:58px!important;
  padding:.55rem .75rem!important;
  gap:.55rem!important;
}
#screen-multiplayer #mp-new,
#screen-multiplayer #mp-leave,
#screen-solo #btn-end-session{
  border-radius:15px!important;
  min-height:42px!important;
  padding:.7rem .9rem!important;
  font-weight:950!important;
}
#screen-multiplayer .mp-messages,
#screen-solo .messages-container{
  border-radius:20px!important;
  min-height:220px!important;
}
#screen-multiplayer .chat-input-bar,
#screen-solo .chat-input-bar{
  border-radius:18px!important;
}
.gf-playing-chip{
  display:inline-flex!important;
  align-items:center!important;
  gap:.3rem!important;
  padding:.28rem .5rem!important;
  border-radius:999px!important;
  background:rgba(196,149,106,.14)!important;
  border:1px solid rgba(196,149,106,.22)!important;
  color:var(--accent-warm)!important;
  font-size:.64rem!important;
  font-weight:950!important;
  white-space:nowrap!important;
}

@media(max-width:900px){
  .gf-mode-head,
  .gf-confirm{
    grid-template-columns:1fr!important;
  }
  .gf-steps{
    justify-content:flex-start!important;
  }
  .gf-mode-grid{
    grid-template-columns:1fr!important;
  }
  #screen-multiplayer .multiplayer-layout{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:540px){
  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  .gf-start-btn,
  .gf-board-btn,
  .gf-confirm button{
    width:100%!important;
  }
  .gf-mode-panel{
    padding:.8rem!important;
    border-radius:22px!important;
  }
  .gf-mode-card{
    min-height:0!important;
    padding:.85rem!important;
  }
  #screen-solo .chat-top-bar::after,
  #screen-multiplayer .chat-top-bar::after{
    display:none!important;
  }
}