@import url("../whist/styles.css");

.golf-layout{
  width:100%;
  max-width:1400px;
  margin:0 auto;
}

.golf-tableau{
  display:grid;
  gap:10px;
  width:100%;
  justify-items:center;
  align-items:center;
}

.golf-slot{
  width:82px;
  height:118px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.golf-slot.removed{
  opacity:.08;
}

.golf-slot .george-card{
  width:76px !important;
  height:106px !important;
  min-width:76px !important;
}

.golf-bottom-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:60px;
  margin-top:14px;
}

.deck-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.pile-label{
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  opacity:.78;
}

.card-slot{
  width:76px;
  height:106px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card-back{
  width:76px;
  height:106px;
  border-radius:10px;
  background-image:url("./cards/card_back.png");
  background-size:cover;
  background-position:center;
  box-shadow:
    0 8px 20px rgba(0,0,0,.45);
}

.card-back.empty{
  opacity:.15;
}

.playable{
  outline:4px solid rgba(255,255,255,.82);
  outline-offset:-4px;

  box-shadow:
    0 0 26px rgba(120,255,160,.28),
    0 18px 30px rgba(0,0,0,.42) !important;
}

.mode-chip{
  background:
    linear-gradient(
      180deg,
      rgba(60,130,70,.26),
      rgba(18,56,24,.5)
    ) !important;
}

.mode-menu{
  background:
    linear-gradient(
      180deg,
      rgba(48,110,62,.72),
      rgba(14,46,25,.62)
    ) !important;
}

@media(max-width:760px){

  .golf-slot{
    width:58px;
    height:82px;
  }

  .golf-slot .george-card{
    width:54px !important;
    height:76px !important;
    min-width:54px !important;
  }

  .card-slot{
    width:58px;
    height:82px;
  }

  .card-back{
    width:58px;
    height:82px;
  }

  .golf-bottom-row{
    gap:30px;
  }

}

/* Match waste pile card size to tableau */
#wastePile .george-card,
#stockPile .george-card{
  width:76px !important;
  height:106px !important;
  min-width:76px !important;
}

@media(max-width:760px){

  #wastePile .george-card,
  #stockPile .george-card{
    width:54px !important;
    height:76px !important;
    min-width:54px !important;
  }

}

html,
body{
  touch-action:pan-y !important;
  overscroll-behavior-x:none !important;
}

*{
  -webkit-text-size-adjust:100%;
}

.george-rules-modal{
  width:min(94vw,860px) !important;
}

.rules-toc{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:0 20px 14px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.rules-toc a{
  color:#111;
  background:linear-gradient(180deg,#ffe29a,#d7a93d);
  text-decoration:none;
  border-radius:999px;
  padding:8px 12px;
  font-size:.78rem;
  font-weight:900;
}

.instructions-scroll{
  scroll-behavior:smooth;
}

.instructions-scroll section{
  padding:8px 0 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.instructions-scroll h3{
  color:#ffd166;
}

.instructions-scroll p,
.instructions-scroll li{
  line-height:1.55;
}

.rule-example{
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:10px 12px;
  color:#ffd166;
  font-weight:900;
  text-align:center;
}

@media(max-width:760px){
  .rules-toc a{
    flex:1 1 calc(50% - 8px);
    text-align:center;
  }
}

.mode-chip-wrap{
  position:relative;
}

.mode-chip{
  min-width:170px;
  border:none;
  border-radius:999px;
  padding:11px 15px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-family:"Space Grotesk",sans-serif;
  font-size:.9rem;
  font-weight:900;
  color:#fff;
  background:linear-gradient(180deg,rgba(60,130,70,.26),rgba(18,56,24,.5)) !important;
  border:1px solid rgba(255,255,255,.16);
  cursor:pointer;
}

.mode-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:500;
  min-width:230px;
  padding:10px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(48,110,62,.72),rgba(14,46,25,.62)) !important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 36px rgba(0,0,0,.4);
  backdrop-filter:blur(22px) saturate(160%);
}

.mode-menu button{
  width:100%;
  border:none;
  border-radius:14px;
  padding:13px 15px;
  background:transparent;
  color:#fff;
  text-align:left;
  font-family:"Space Grotesk",sans-serif;
  font-size:.98rem;
  font-weight:900;
  cursor:pointer;
}

.mode-menu button:hover{
  background:rgba(255,255,255,.12);
}

@media(max-width:760px){
  .mode-chip{
    width:100%;
    min-width:0;
  }

  .mode-menu{
    left:0;
    right:0;
    min-width:0;
  }
}