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

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

.yukon-top-row{
  display:flex;
  justify-content:center;
  margin-bottom:8px;
}

.foundation-area{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.foundation-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}

.foundation-label{
  font-size:.62rem;
  font-weight:900;
  opacity:.75;
  letter-spacing:.08em;
}

.foundation-slot{
  width:76px;
  height:106px;
  border-radius:12px;
  border:2px dashed rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.35);
  font-weight:900;
  background:rgba(0,0,0,.16);
}

.yukon-tableau{
  display:grid;
  grid-template-columns:repeat(7,minmax(74px,1fr));
  gap:8px;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  min-height:430px;
}

.yukon-column{
  position:relative;
  min-height:410px;
  border-radius:16px;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.05);
  overflow:visible;
}

.empty-column{
  min-height:106px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.25);
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.08em;
}

.yukon-card{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:76px !important;
  height:106px !important;
  min-width:76px !important;
  border-radius:10px;
  cursor:pointer;
}

.card-back{
  background-size:cover !important;
  background-position:center !important;
}

.selected-card{
  outline:4px solid rgba(255,255,255,.85);
  outline-offset:-4px;
  box-shadow:
    0 0 26px rgba(120,255,160,.28),
    0 18px 30px rgba(0,0,0,.42) !important;
}

.action-feed{
  color:#ffd166 !important;
  text-align:center;
}

.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){
  .foundation-slot{
    width:54px;
    height:76px;
  }

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

  .yukon-tableau{
    grid-template-columns:repeat(7,54px);
    gap:5px;
    overflow-x:auto;
    justify-content:flex-start;
    min-height:360px;
    padding-bottom:10px;
  }

  .yukon-column{
    min-height:340px;
    width:54px;
  }

  .yukon-card{
    width:54px !important;
    height:76px !important;
    min-width:54px !important;
  }

  .yukon-card{
    top:auto;
  }
}

.yukon-card{
  touch-action:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

.yukon-card.dragging{
  opacity:.55;
  filter:brightness(1.2);
}

.yukon-column.drag-over,
.foundation-slot.drag-over{
  outline:3px solid rgba(255,255,255,.75);
  outline-offset:-3px;
  box-shadow:
    0 0 24px rgba(120,255,160,.24),
    inset 0 0 18px rgba(255,255,255,.08);
}

.yukon-column{
  touch-action:none;
}

.yukon-column .card-back,
.yukon-card.card-back{
  width:76px !important;
  height:106px !important;
  min-width:76px !important;
}

@media(max-width:760px){
  .yukon-column .card-back,
  .yukon-card.card-back{
    width:54px !important;
    height:76px !important;
    min-width:54px !important;
  }
}

.drag-ghost{
  position:fixed !important;
  left:-9999px !important;
  top:-9999px !important;
  transform:none !important;
  opacity:1 !important;
  pointer-events:none !important;
  z-index:999999 !important;
}


@media(pointer:coarse){
  .yukon-card{
    touch-action:manipulation !important;
  }

  .selected-card{
    outline:5px solid rgba(255,255,255,.95) !important;
    outline-offset:-5px !important;
    box-shadow:
      0 0 30px rgba(120,255,160,.4),
      0 18px 30px rgba(0,0,0,.48) !important;
  }

  .yukon-column,
  .foundation-slot{
    cursor:pointer !important;
  }

  .yukon-drag-ghost{
    display:none !important;
  }
}