/* ============================================================
   D3 THEME — LOBBY SCREEN
   ============================================================ */
#screen-lobby {
  background: #1A9E8F !important;
  background-image: none !important;
  overflow: hidden;
  position: relative;
}
#screen-lobby.active {
  display: flex !important;
  flex-direction: column;
  min-height: 100vh;
}
#screen-lobby::before { display: none !important; }

/* Batik border edges — Mega Mendung Cirebon: ellipse berlapis */
#screen-lobby .lb-edge {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  background-color: #062322;
}
/* Top — awan tumbuh ke bawah, tile 36×28 */
#screen-lobby .lb-edge-t {
  top: 0; left: 0; right: 0; height: 28px;
  background-size: 36px 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='28'%3E%3Crect width='36' height='28' fill='%23062322'/%3E%3Cellipse cx='0' cy='0' rx='17' ry='26' fill='%23E8503A'/%3E%3Cellipse cx='0' cy='0' rx='14' ry='22' fill='%23062322'/%3E%3Cellipse cx='0' cy='0' rx='11' ry='18' fill='%23F5B841'/%3E%3Cellipse cx='0' cy='0' rx='8' ry='13' fill='%23062322'/%3E%3Cellipse cx='0' cy='0' rx='5' ry='8' fill='%23E8503A'/%3E%3Cellipse cx='0' cy='0' rx='2' ry='3' fill='%23fff'/%3E%3Cellipse cx='18' cy='0' rx='17' ry='26' fill='%23E8503A'/%3E%3Cellipse cx='18' cy='0' rx='14' ry='22' fill='%23062322'/%3E%3Cellipse cx='18' cy='0' rx='11' ry='18' fill='%23F5B841'/%3E%3Cellipse cx='18' cy='0' rx='8' ry='13' fill='%23062322'/%3E%3Cellipse cx='18' cy='0' rx='5' ry='8' fill='%23E8503A'/%3E%3Cellipse cx='18' cy='0' rx='2' ry='3' fill='%23fff'/%3E%3C/svg%3E");
}
/* Bottom — awan tumbuh ke atas, tile 36×28 */
#screen-lobby .lb-edge-b {
  bottom: 0; left: 0; right: 0; height: 28px;
  background-size: 36px 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='28'%3E%3Crect width='36' height='28' fill='%23062322'/%3E%3Cellipse cx='0' cy='28' rx='17' ry='26' fill='%23E8503A'/%3E%3Cellipse cx='0' cy='28' rx='14' ry='22' fill='%23062322'/%3E%3Cellipse cx='0' cy='28' rx='11' ry='18' fill='%23F5B841'/%3E%3Cellipse cx='0' cy='28' rx='8' ry='13' fill='%23062322'/%3E%3Cellipse cx='0' cy='28' rx='5' ry='8' fill='%23E8503A'/%3E%3Cellipse cx='0' cy='28' rx='2' ry='3' fill='%23fff'/%3E%3Cellipse cx='18' cy='28' rx='17' ry='26' fill='%23E8503A'/%3E%3Cellipse cx='18' cy='28' rx='14' ry='22' fill='%23062322'/%3E%3Cellipse cx='18' cy='28' rx='11' ry='18' fill='%23F5B841'/%3E%3Cellipse cx='18' cy='28' rx='8' ry='13' fill='%23062322'/%3E%3Cellipse cx='18' cy='28' rx='5' ry='8' fill='%23E8503A'/%3E%3Cellipse cx='18' cy='28' rx='2' ry='3' fill='%23fff'/%3E%3C/svg%3E");
}
/* Left — awan tumbuh ke kanan, tile 28×36 */
#screen-lobby .lb-edge-l {
  top: 28px; bottom: 28px; left: 0; width: 28px;
  background-size: 28px 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='36'%3E%3Crect width='28' height='36' fill='%23062322'/%3E%3Cellipse cx='0' cy='0' rx='26' ry='17' fill='%23E8503A'/%3E%3Cellipse cx='0' cy='0' rx='22' ry='14' fill='%23062322'/%3E%3Cellipse cx='0' cy='0' rx='18' ry='11' fill='%23F5B841'/%3E%3Cellipse cx='0' cy='0' rx='13' ry='8' fill='%23062322'/%3E%3Cellipse cx='0' cy='0' rx='8' ry='5' fill='%23E8503A'/%3E%3Cellipse cx='0' cy='0' rx='3' ry='2' fill='%23fff'/%3E%3Cellipse cx='0' cy='18' rx='26' ry='17' fill='%23E8503A'/%3E%3Cellipse cx='0' cy='18' rx='22' ry='14' fill='%23062322'/%3E%3Cellipse cx='0' cy='18' rx='18' ry='11' fill='%23F5B841'/%3E%3Cellipse cx='0' cy='18' rx='13' ry='8' fill='%23062322'/%3E%3Cellipse cx='0' cy='18' rx='8' ry='5' fill='%23E8503A'/%3E%3Cellipse cx='0' cy='18' rx='3' ry='2' fill='%23fff'/%3E%3C/svg%3E");
}
/* Right — awan tumbuh ke kiri, tile 28×36 */
#screen-lobby .lb-edge-r {
  top: 28px; bottom: 28px; right: 0; width: 28px;
  background-size: 28px 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='36'%3E%3Crect width='28' height='36' fill='%23062322'/%3E%3Cellipse cx='28' cy='0' rx='26' ry='17' fill='%23E8503A'/%3E%3Cellipse cx='28' cy='0' rx='22' ry='14' fill='%23062322'/%3E%3Cellipse cx='28' cy='0' rx='18' ry='11' fill='%23F5B841'/%3E%3Cellipse cx='28' cy='0' rx='13' ry='8' fill='%23062322'/%3E%3Cellipse cx='28' cy='0' rx='8' ry='5' fill='%23E8503A'/%3E%3Cellipse cx='28' cy='0' rx='3' ry='2' fill='%23fff'/%3E%3Cellipse cx='28' cy='18' rx='26' ry='17' fill='%23E8503A'/%3E%3Cellipse cx='28' cy='18' rx='22' ry='14' fill='%23062322'/%3E%3Cellipse cx='28' cy='18' rx='18' ry='11' fill='%23F5B841'/%3E%3Cellipse cx='28' cy='18' rx='13' ry='8' fill='%23062322'/%3E%3Cellipse cx='28' cy='18' rx='8' ry='5' fill='%23E8503A'/%3E%3Cellipse cx='28' cy='18' rx='3' ry='2' fill='%23fff'/%3E%3C/svg%3E");
}

/* Diamond crosshatch overlay */
#screen-lobby .lb-crosshatch,
#screen-waiting .lb-crosshatch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(0,0,0,.06) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 1px, transparent 1px 16px);
}

/* Lobby wrap */
#screen-lobby .lobby-wrap {
  flex: 1;
  position: relative;
  z-index: 2;
  min-height: 0;
  padding: 0;
}

/* ── Hero left panel ── */
#screen-lobby .lobby-brand {
  background: rgba(6,45,40,.55) !important;
  backdrop-filter: blur(2px);
  overflow: visible;
  position: relative;
  border-radius: 0;
}
#screen-lobby .lobby-brand::after { display: none !important; }

/* Gold tag above title */
#screen-lobby .lb-tag {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--d3-gold);
  text-transform: uppercase;
  margin-bottom: 28px;
  opacity: 0.9;
}

/* Card back stack */
#screen-lobby .bcs-back {
  background: var(--ink2) !important;
  border-color: var(--coral) !important;
  background-image: repeating-linear-gradient(
    45deg, rgba(232,80,42,.45) 0 3px, transparent 3px 7px
  ) !important;
}
#screen-lobby .bcs-back-far  { transform: rotate(-8deg) translateX(-22px) !important; }
#screen-lobby .bcs-back-near { transform: rotate(-4deg) translateX(-10px) !important; }
#screen-lobby .bcs-front { transform: rotate(4deg) !important; }
#screen-lobby .bcs-front.black { color: var(--ink) !important; }
#screen-lobby .bcs-front.red   { color: var(--coral) !important; }

/* Title */
#screen-lobby .brand-title {
  font-size: clamp(36px, 5.5vw, 56px) !important;
  color: var(--d3-gold) !important;
  /* text-shadow: 3px 3px 0 #062322 !important; */
  letter-spacing: 1px;
}

/* Aka / subtitle */
#screen-lobby .brand-aka-text { color: var(--coral); opacity: 1; letter-spacing: 6px; }
#screen-lobby .brand-line {
  background: linear-gradient(to right, transparent, var(--coral)) !important;
}
#screen-lobby .brand-aka .brand-line:last-child {
  background: linear-gradient(to left, transparent, var(--coral)) !important;
}

/* Stats bar */
#screen-lobby .brand-stats {
  background: rgba(0,0,0,.35) !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
#screen-lobby .bs-num { color: var(--d3-gold); text-shadow: none; font-size: clamp(22px,3vw,30px) !important; }
#screen-lobby .bs-num-pill {
  background: var(--ink);
  color: var(--d3-gold) !important;
  font-style: italic;
  border-radius: 8px;
  padding: 2px 10px;
  font-size: clamp(18px,2.4vw,24px) !important;
  display: inline-block;
}
#screen-lobby .bs-lbl { color: rgba(255,255,255,.5); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
#screen-lobby .bs-sep {
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.2) 30%, rgba(255,255,255,.2) 70%, transparent);
  width: 1px !important;
  height: 40px;
}
#screen-lobby .suit-black { color: rgba(255,255,255,.38); text-shadow: none; font-size: 28px !important; }
#screen-lobby .suit-red   { color: var(--coral); text-shadow: none; font-size: 28px !important; }

/* ── Right form panel ── */
#screen-lobby .lobby-panel {
  background: #0A5247 !important;
  box-shadow: none !important;
  border-left: 4px solid var(--coral) !important;
  border-radius: 0 !important;
  backdrop-filter: none;
}
#screen-lobby .lp-eyebrow  { color: var(--coral) !important; letter-spacing: 3px; font-size: 11px; }
#screen-lobby .lp-header h2 { color: #fff; font-size: 26px; }
#screen-lobby .lp-header::after { background: var(--coral); }

#screen-lobby .lp-tab.active { color: var(--coral); }
#screen-lobby .lp-tab.active::after {
  background: linear-gradient(90deg, transparent, var(--coral) 30%, var(--coral) 70%, transparent);
}
#screen-lobby .lp-tab:hover:not(.active) { color: rgba(255,255,255,.6); }

#screen-lobby .lobby-panel input[type="text"],
#screen-lobby .lobby-panel input[type="number"] {
  background: #142E29;
  border-color: rgba(255,255,255,.12);
  color: #fff;
}
#screen-lobby .lobby-panel input:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(232,80,42,.18);
  background: #142E29;
}
#screen-lobby .settings-card { background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.08); border-radius: 10px; }
#screen-lobby .setting-row { border-bottom-color: rgba(255,255,255,.06); }

/* Hint text below join input */
#screen-lobby .lp-hint {
  font-size: 11px;
  color: rgba(255,255,255,.38);
  margin-top: 6px;
  font-family: 'Nunito', sans-serif;
}

/* ── Join row (inline input + button) ── */
.rb-join-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.rb-code-input {
  flex: 1;
  min-width: 0;
  text-align: center !important;
  letter-spacing: 4px !important;
  font-weight: 900 !important;
  font-size: 16px !important;
}
.rb-join-btn {
  flex: none;
  padding: 0 18px !important;
  font-size: 13px !important;
  white-space: nowrap;
}

/* Separator */
.rb-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 14px;
}
.rb-sep-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.08);
}
.rb-sep-text {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  letter-spacing: 1px;
  white-space: nowrap;
  text-transform: uppercase;
}

/* ── Room Browser ── */
.room-browser { display: flex; flex-direction: column; gap: 8px; }

.rb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rb-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--d3-gold);
}
.rb-refresh {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55);
  border-radius: 6px;
  width: 26px; height: 26px;
  font-size: 14px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.15s, color 0.15s;
  font-family: 'Nunito', sans-serif;
}
.rb-refresh:hover { background: rgba(255,255,255,.12); color: #fff; }
.rb-refresh.spinning { animation: rbSpin 0.5s linear; }
@keyframes rbSpin { to { transform: rotate(360deg); } }

.rb-search {
  width: 100%;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  outline: none;
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: border-color 0.2s;
}
.rb-search::placeholder { text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.22); font-weight: 400; }
.rb-search:focus { border-color: rgba(232,80,42,.5); background: rgba(0,0,0,.3); }

.rb-list {
  max-height: 190px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.rb-list::-webkit-scrollbar { width: 3px; }
.rb-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.rb-empty {
  text-align: center;
  color: rgba(255,255,255,.28);
  font-size: 11px;
  font-family: 'Nunito', sans-serif;
  padding: 18px 0;
  font-style: italic;
}

.rb-room {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 9px;
  padding: 8px 11px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.rb-room:hover {
  background: rgba(232,80,42,.1);
  border-color: rgba(232,80,42,.3);
  transform: translateX(2px);
}
.rb-code {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: var(--coral);
  letter-spacing: 3px;
  flex: none;
  min-width: 68px;
}
.rb-info { flex: 1; min-width: 0; }
.rb-players {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 11px;
  color: rgba(255,255,255,.8);
}
.rb-meta {
  font-family: 'Nunito', sans-serif;
  font-size: 9px;
  color: rgba(255,255,255,.32);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.rb-join {
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 10px;
  padding: 5px 10px;
  cursor: pointer;
  flex: none;
  box-shadow: 0 2px 0 var(--coral-d);
  transition: background 0.15s, transform 0.1s, box-shadow 0.1s;
  letter-spacing: 0.5px;
}
.rb-join:hover { background: #ef6040; transform: translateY(1px); box-shadow: 0 1px 0 var(--coral-d); }
.rb-join:active { transform: translateY(2px); box-shadow: none; }

/* ── Lobby responsive ── */
@media (max-width: 600px) {
  /* Fill full device height */
  #screen-lobby {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }
  #screen-lobby .lobby-wrap {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #screen-lobby .lobby-brand {
    flex-shrink: 0 !important;
  }
  #screen-lobby .lobby-panel {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Edges ── */
  #screen-lobby .lb-edge-t,
  #screen-lobby .lb-edge-b { height: 12px; background-size: 16px 12px; }
  #screen-lobby .lb-edge-l,
  #screen-lobby .lb-edge-r { width: 12px; top: 12px; bottom: 12px; background-size: 12px 16px; }

  /* ── Brand: hero — 20% of screen height ── */
  #screen-lobby .lobby-wrap { padding: 0; gap: 0; flex-direction: column; }
  #screen-lobby .lb-tag    { display: none; }
  #screen-lobby .brand-deco  { display: none !important; }
  #screen-lobby .brand-suits { display: none !important; }

  #screen-lobby .lobby-brand {
    height: 20svh !important;
    flex-shrink: 0 !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 20px !important;
    overflow: hidden !important;
    position: relative !important;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(232,80,42,0.2) 0%, transparent 65%),
      rgba(6,35,32,.6) !important;
  }
  #screen-lobby .lobby-brand::after { display: none !important; }

  /* Title */
  #screen-lobby .brand-title {
    font-size: 1.8rem !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5)) !important;
  }
  #screen-lobby .brand-aka { margin-top: 2px !important; gap: 8px !important; }
  #screen-lobby .brand-aka-text {
    font-size: 0.65rem !important;
    letter-spacing: 3px !important;
    color: var(--coral) !important;
    opacity: 1 !important;
  }
  #screen-lobby .brand-line {
    background: linear-gradient(to right, transparent, var(--coral)) !important;
  }
  #screen-lobby .brand-aka .brand-line:last-child {
    background: linear-gradient(to left, transparent, var(--coral)) !important;
  }

  /* Stats strip compact */
  #screen-lobby .brand-stats {
    display: flex !important;
    background: rgba(0,0,0,0.22) !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    gap: 0 !important;
    margin-top: 4px !important;
  }
  #screen-lobby .brand-stat { padding: 0 10px !important; }
  #screen-lobby .bs-num     { font-size: 0.95rem !important; }
  #screen-lobby .bs-lbl     { font-size: 0.48rem !important; margin-top: 1px !important; }
  #screen-lobby .bs-sep     { height: 20px !important; }
  #screen-lobby .bs-num-pill {
    font-size: 0.68rem !important;
    padding: 1px 6px !important;
    background: var(--ink) !important;
    color: var(--d3-gold) !important;
  }

  /* ── Form panel ── */
  #screen-lobby .lobby-panel {
    border-left: none !important;
    border-top: 3px solid var(--coral) !important;
    border-radius: 0 !important;
    padding: 16px 18px 20px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    background: #0A5247 !important;
    /* subtle top glow */
    box-shadow: 0 -12px 32px rgba(232,80,42,0.12), inset 0 1px 0 rgba(232,80,42,0.2) !important;
  }

  /* Header */
  #screen-lobby .lp-eyebrow {
    font-size: 0.55rem !important;
    letter-spacing: 3px !important;
    color: var(--coral) !important;
  }
  #screen-lobby .lp-header {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
  }
  #screen-lobby .lp-header h2 {
    font-size: 1.15rem !important;
    color: #fff !important;
  }
  #screen-lobby .lp-header::after { background: var(--coral) !important; }
  #screen-lobby .lp-field { margin-bottom: 0 !important; }

  /* Name input */
  #screen-lobby .lobby-panel input[type="text"],
  #screen-lobby .lobby-panel input[type="number"] {
    padding: 11px 14px !important;
    font-size: 0.95rem !important;
    border-radius: 9px !important;
    background: #142E29 !important;
    border-color: rgba(255,255,255,0.1) !important;
  }
  #screen-lobby .lobby-panel input:focus {
    border-color: var(--coral) !important;
    box-shadow: 0 0 0 3px rgba(232,80,42,0.18) !important;
  }

  /* Tabs — pill style */
  #screen-lobby .lp-tabs {
    margin: 12px 0 14px !important;
    background: rgba(0,0,0,0.2) !important;
    border-radius: 10px !important;
    padding: 3px !important;
    border-bottom: none !important;
    gap: 0 !important;
  }
  #screen-lobby .lp-tab {
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
    transition: background 0.2s, color 0.2s !important;
  }
  #screen-lobby .lp-tab.active {
    background: var(--coral) !important;
    color: #fff !important;
  }
  #screen-lobby .lp-tab.active::after { display: none !important; }
  #screen-lobby .lp-tab:hover:not(.active) { color: rgba(255,255,255,0.7) !important; }

  /* Settings card */
  #screen-lobby .settings-card {
    padding: 0 12px 10px !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,0.2) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: inset 3px 0 0 rgba(232,80,42,0.4) !important;
  }
  #screen-lobby .settings-card-title {
    padding: 9px 0 7px !important;
    font-size: 0.54rem !important;
    color: var(--coral) !important;
    opacity: 0.7 !important;
  }
  #screen-lobby .setting-row {
    padding: 9px 0 !important;
    font-size: 0.83rem !important;
  }
  #screen-lobby .setting-ctrl { width: 115px !important; }
  #screen-lobby .setting-ctrl select,
  #screen-lobby .setting-ctrl input[type="number"] {
    padding: 7px 10px !important;
    font-size: 0.8rem !important;
    background: rgba(20,46,41,0.8) !important;
    border-color: rgba(255,255,255,0.12) !important;
  }

  /* CTA button */
  #screen-lobby #btn-confirm-create,
  #screen-lobby #btn-confirm-join {
    padding: 13px !important;
    font-size: 0.88rem !important;
    border-radius: 10px !important;
    letter-spacing: 1.5px !important;
    margin-top: 0px !important;
  }

  /* Join section */
  #screen-lobby .rb-join-row { gap: 6px !important; }
  #screen-lobby .rb-join-btn { padding: 11px 16px !important; }
  #screen-lobby .rb-list     { max-height: 140px !important; }
  #screen-lobby .room-browser { background: rgba(0,0,0,0.15) !important; border-radius: 10px !important; padding: 8px !important; }

  /* Footer: smaller text, let it wrap, safe-area handled in base rule */
  .lobby-footer {
    font-size: 0.6rem !important;
    gap: 3px 5px !important;
  }
  /* Lobby panel: bottom padding clears the footer (~32px) + safe-area */
  #screen-lobby .lobby-panel {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  #screen-lobby .lb-edge-t,
  #screen-lobby .lb-edge-b { height: 20px; background-size: 28px 20px; }
  #screen-lobby .lb-edge-l,
  #screen-lobby .lb-edge-r { width: 20px; top: 20px; bottom: 20px; background-size: 20px 28px; }
  #screen-lobby .lobby-wrap { padding: 20px; }
  #screen-lobby .brand-title { font-size: clamp(28px, 4vw, 40px) !important; }
  #screen-lobby .lb-tag { font-size: 10px; margin-bottom: 16px; }
}

/* ── Primary button — coral globally ── */
.btn-primary {
  background: var(--coral) !important;
  background-image: none !important;
  box-shadow: 0 5px 0 var(--coral-d) !important;
  color: #fff !important;
  text-shadow: none !important;
}
.btn-primary:hover:not(:disabled) {
  background: #ef6040 !important;
  box-shadow: 0 3px 0 var(--coral-d) !important;
  transform: translateY(2px) !important;
}
.btn-primary:active {
  box-shadow: 0 1px 0 var(--coral-d) !important;
  transform: translateY(4px) !important;
}

/* How-to-play button (circle) */
.btn-how-to-play {
  background: rgba(232,80,42,.15);
  border: 1.5px solid rgba(232,80,42,.45);
  color: var(--coral);
  border-radius: 50%;
  width: 28px; height: 28px;
  font-weight: 900;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background 0.15s;
}
.btn-how-to-play:hover { background: rgba(232,80,42,.28); }

/* ============================================================
   D3 THEME — WAITING ROOM
   ============================================================ */
#screen-waiting {
  background: #1A9E8F !important;
  background-image: none !important;
  overflow: hidden;
  position: relative;
}
#screen-waiting.active {
  display: flex !important;
  flex-direction: column;
  min-height: 100vh;
  align-items: stretch;
  justify-content: flex-start;
}
.waiting-center-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  position: relative;
  z-index: 2;
  overflow-y: auto;
}

#screen-waiting .waiting-container {
  background: #0A5247 !important;
  border: 2px solid var(--d3-gold) !important;
  box-shadow: 0 8px 0 rgba(0,0,0,.3), 0 0 0 1px rgba(245,184,65,.15) !important;
  border-radius: 20px !important;
  backdrop-filter: none;
  max-width: 520px;
  width: 100%;
  overflow: hidden;
  position: relative;
}
#screen-waiting .waiting-container::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  rgba(0,0,0,.04) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.04) 0 1px, transparent 1px 16px);
}
#screen-waiting .waiting-container h2 {
  color: var(--d3-gold);
  font-family: 'Nunito', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 4px;
  text-transform: uppercase;
}
#screen-waiting .waiting-container h2 .suit-black { color: rgba(255,255,255,0.45); font-size: 1.1rem; }
#screen-waiting .waiting-container h2 .suit-red   { color: var(--coral); font-size: 1.1rem; }
#screen-waiting .room-code-display { color: rgba(255,255,255,.55); }
#screen-waiting .room-code-display strong {
  color: var(--coral);
  text-shadow: none;
  letter-spacing: 8px;
  font-size: 1.7rem;
}

#screen-waiting .room-info-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
#screen-waiting .room-info-chip span { color: var(--d3-gold); }

/* Non-host info strip */
#screen-waiting .ws-chips {
  width: 100%;
}
#screen-waiting .ws-info-strip {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0px;
}
#screen-waiting .ws-info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  gap: 2px;
}
#screen-waiting .ws-info-sep {
  width: 1px;
  background: rgba(255,255,255,0.07);
  margin: 8px 0;
  flex-shrink: 0;
}
#screen-waiting .ws-info-icon {
  font-size: 0.95rem;
  line-height: 1;
}
#screen-waiting .ws-info-lbl {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}
#screen-waiting .ws-info-val {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--d3-gold);
  line-height: 1.1;
}

/* Player slots — flat ink pods */
#screen-waiting .player-slot {
  background: var(--ink2) !important;
  border: 3px solid rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 0 var(--ink-d);
}
#screen-waiting .player-slot.me {
  border-color: var(--d3-gold) !important;
}
#screen-waiting .player-slot.bot { border-color: rgba(232,80,42,.4) !important; }
#screen-waiting .player-slot.empty { opacity: .32; }

/* Avatar → coral rounded square */
#screen-waiting .slot-avatar {
  background: var(--coral) !important;
  border-radius: 9px !important;
  border: none !important;
}
#screen-waiting .player-slot.me .slot-avatar {
  background: var(--d3-gold) !important;
  color: var(--ink);
}

#screen-waiting .slot-badge.host { background: var(--d3-gold); color: var(--ink); font-weight: 900; }
#screen-waiting .slot-badge.bot-badge { background: rgba(232,80,42,.2); border-color: rgba(232,80,42,.35); }

#screen-waiting .ws-setting-row { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
#screen-waiting .ws-select,
#screen-waiting .ws-settings input { color: var(--d3-gold); }

#screen-waiting .hint { color: rgba(255,255,255,.42); }

/* ── Desktop: room code inline ── */
#screen-waiting .room-code-display {
  flex-direction: row;
  gap: 8px;
  margin-bottom: 16px;
}
#screen-waiting .room-code-display strong {
  display: inline;
}
#screen-waiting #btn-copy-code {
  align-self: center;
  padding: 7px 18px;
  font-size: 0.78rem;
  border-radius: 20px;
  border: 1px solid rgba(245,197,24,0.3);
  background: rgba(245,197,24,0.08);
  color: rgba(245,197,24,0.85);
  cursor: pointer;
  transition: background 0.15s;
}
#screen-waiting #btn-copy-code:hover  { background: rgba(245,197,24,0.18); }
#screen-waiting #btn-copy-code:active { background: rgba(245,197,24,0.26); }

/* ── Desktop: slot X remove button ── */
#screen-waiting .slot-remove-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(239,83,80,0.15);
  color: #ef5350;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.1s;
  font-family: var(--font-ui, sans-serif);
}
#screen-waiting .slot-remove-btn:hover  { background: rgba(239,83,80,0.3); }
#screen-waiting .slot-remove-btn:active { transform: scale(0.88); }

/* ── All screens: compact single-column ── */
  /* Container: tighter padding so everything fits in viewport */
  #screen-waiting .waiting-container {
    padding: 20px 24px !important;
  }
  #screen-waiting .waiting-container h2 {
    font-size: 1.3rem !important;
    margin-bottom: 10px !important;
  }

  /* Room code: smaller */
  #screen-waiting .room-code-display {
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
  }
  #screen-waiting .room-code-display strong {
    font-size: 1.5rem !important;
    letter-spacing: 8px !important;
  }

  /* ── Merged settings + bot: one unified card ── */
  #screen-waiting #room-info-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 10px !important;
    /* background: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 10px 12px 8px !important; */
  }
  /* Non-host chips: equal 3 columns in one row */
  #screen-waiting .room-info-chip {
    flex: 1 1 0 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Host settings panel: column — title (::before) → settings row → bot row */
  #screen-waiting .ws-settings {
    flex: 0 0 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
    align-items: stretch !important;
  }
  #screen-waiting .ws-settings.hidden { display: none !important; }
  #screen-waiting .ws-chips.hidden    { display: none !important; }
  /* Settings row: 3 pills side by side */
  #screen-waiting .ws-settings-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  #screen-waiting .ws-setting-row {
    flex: 1 1 0 !important;
    justify-content: space-between !important;
    min-width: 0 !important;
  }

  /* Bot row: level select + add/remove buttons, fused look */
  #screen-waiting #ws-bot-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    align-items: stretch !important;
    padding-top: 4px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    width: 100% !important;
  }
  #screen-waiting .bot-level-select {
    flex: 1 1 auto !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
    color: var(--d3-gold) !important;
    padding: 5px 10px !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
  }
  #screen-waiting #btn-add-bot {
    flex: 0 0 auto !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 !important;
    color: rgba(255,255,255,0.75) !important;
    padding: 5px 12px !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    white-space: nowrap !important;
    min-height: 0 !important;
  }
  #screen-waiting #btn-remove-bot {
    flex: 0 0 auto !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
    color: rgba(220,80,80,0.8) !important;
    padding: 5px 10px !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    white-space: nowrap !important;
    min-height: 0 !important;
  }
  #screen-waiting #btn-add-bot:hover    { background: rgba(255,255,255,0.09) !important; color: #fff !important; }
  #screen-waiting #btn-remove-bot:hover { background: rgba(220,60,60,0.15) !important; color: #ff9090 !important; }

  /* Player slots: tighter */
  #screen-waiting .player-slots {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  #screen-waiting .player-slot {
    padding: 8px 12px !important;
  }
  #screen-waiting .slot-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.25rem !important;
  }

  /* Waiting actions: compact */
  #screen-waiting .waiting-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
  }
  #screen-waiting #btn-start-game {
    width: 100% !important;
    padding: 12px !important;
    font-size: 0.92rem !important;
    letter-spacing: 1px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 18px rgba(245,197,24,0.3), inset 0 1px 0 rgba(255,255,255,0.3) !important;
  }
  #screen-waiting .hint {
    font-size: 0.8rem !important;
    margin-top: 4px !important;
  }
  #screen-waiting #btn-leave-room {
    width: 100% !important;
    margin-top: 6px !important;
    padding: 9px !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
  }

/* ── Narrow screens: prevent overflow, same design ── */
@media (max-width: 500px) {
  #screen-waiting .waiting-container {
    padding: 16px 14px !important;
  }
  #screen-waiting .waiting-container h2 {
    font-size: 1rem !important;
    letter-spacing: 2px !important;
  }
  #screen-waiting .room-code-display strong {
    font-size: 1.3rem !important;
    letter-spacing: 6px !important;
  }
  #screen-waiting .ws-settings-row {
    flex-wrap: wrap !important;
  }
  #screen-waiting .ws-setting-row {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }
  #screen-waiting .ws-setting-row:last-child {
    flex: 1 1 100% !important;
  }
  #screen-waiting .ws-lbl { font-size: 0.65rem !important; }
  #screen-waiting .ws-select { font-size: 0.7rem !important; }
  #screen-waiting .ws-settings input[type="number"] {
    width: 52px !important;
    font-size: 0.7rem !important;
  }
}

/* ============================================================
   D3 THEME — SCORE OVERLAY
   ============================================================ */
#screen-scores.active { background: rgba(6,35,34,1) !important; backdrop-filter: none; }
/* Matikan border kombi & discard pile saat score overlay aktif */
body:has(#screen-scores.active) #screen-game .kombi {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}
body:has(#screen-scores.active) #screen-game .discard-pile {
  border-color: transparent !important;
}

.scores-container {
  background: var(--ink) !important;
  border: none !important;
  /* box-shadow: 0 8px 0 var(--ink-d), 0 32px 80px rgba(0,0,0,.65) !important; */
  border-radius: 20px !important;
}
.scores-container h2 { color: var(--d3-gold) !important; text-shadow: none !important; }

/* Stats bar — Joker / Durasi / Langkah */
.scores-round-stats {
  margin-left: -36px !important;
  margin-right: -36px !important;
}
.scores-meta {
  background: #1a6b64 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
}
.scores-meta-item {
  border-right: 1px solid #155a54 !important;
  padding: 8px 4px !important;
  gap: 4px !important;
  flex-direction: row !important;
  font-size: 0.6rem !important;
}
.scores-meta-item:last-child { border-right: none !important; }
.scores-meta-icon { font-size: 0.85rem !important; }
.scores-meta-label { color: #7ecfca !important; }
.scores-meta-val { font-size: 0.72rem !important; font-weight: 800 !important; }
.scores-meta-item:nth-child(1) .scores-meta-val { color: #ffb648 !important; }
.scores-meta-item:nth-child(2) .scores-meta-val { color: #4ade80 !important; }
.scores-meta-item:nth-child(3) .scores-meta-val { color: #60a5fa !important; }

.score-row {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
}
.score-row.winner-row {
  background: rgba(255,182,72,.1) !important;
  border-color: rgba(255,182,72,.38) !important;
}
.score-row .total-pts { color: var(--d3-gold) !important; }

/* Siap lanjut button */
.btn-ready-next { border-color: rgba(232,80,42,.5); color: var(--coral); }

/* ============================================================
   D3 THEME — GAME SCREEN
   ============================================================ */

/* Override green felt with teal */
#screen-game {
  background: var(--teal) !important;
  background-size: auto !important;
  grid-template-rows: unset !important;
  min-height: unset !important;
}
#screen-game.active { display: block !important; }
#screen-game::before { display: none !important; }

/* Shell */
.d3game {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--teal);
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.d3dots {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle,rgba(255,255,255,.06) 0 2px,transparent 3px);
  background-size: 28px 28px;
}
.d3edge {
  position: relative; z-index: 3; flex: none; height: 12px;
  background: var(--coral);
  background-image: var(--batik);
}

/* ── Header — 3-column grid ── */
.d3header {
  position: relative; z-index: 4; flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 8px;
}
.d3col-left  { display: flex; align-items: center; justify-content: flex-start; }
.d3col-center {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.d3col-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.d3header .d3banner {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  max-width: 460px; width: max-content;
  pointer-events: auto;
}
/* chip-skor always center; on desktop d3banner overlays it (absolute positioned) */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 10px; font-weight: 900; white-space: nowrap; flex: none;
  font-family: 'Nunito', var(--font-ui), sans-serif;
}
.chip-ronde {
  background: var(--ink); color: var(--d3-gold);
  padding: 6px 14px; font-size: clamp(15px,2.4vw,19px);
  box-shadow: 0 4px 0 var(--ink-d);
}
.chip-joker {
  background: var(--coral); color: #fff;
  padding: 6px 11px; font-size: 13px;
  box-shadow: 0 4px 0 var(--coral-d);
}
.d3banner {
  flex: none; max-width: 520px; margin: 0; text-align: center;
  background: var(--d3-gold); border: 3px solid var(--ink); border-radius: 12px;
  padding: 0; font-weight: 900; color: var(--ink);
  box-shadow: 0 5px 0 var(--d3-gold-d);
  font-size: clamp(13px,2vw,16px);
  font-family: 'Nunito', var(--font-ui), sans-serif;
  position: relative; overflow: hidden;
  display: flex; align-items: stretch; gap: 0;
}
.d3banner-left {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: rgba(0,0,0,.22);
  border-radius: 8px 0 0 8px;
  padding: 8px 14px;
  align-self: stretch;
  min-width: 58px;
  font-size: clamp(16px,2.4vw,22px);
  font-weight: 900;
  flex: none;
  position: relative;
}
.d3banner-left .timer-bar-track {
  width: 100%; height: 5px;
  background: rgba(255,255,255,.15); border-radius: 3px;
  overflow: hidden;
}
.d3banner-left .timer-bar-fill {
  height: 100%; border-radius: 3px;
  background: #fff;
  transition: width 1s linear, background 0.3s;
}
.d3banner-left .timer-seconds.urgent     ~ .timer-bar-track .timer-bar-fill,
.d3banner-left .timer-seconds.very-urgent ~ .timer-bar-track .timer-bar-fill { background: #ff7043; }
.d3banner-left:has(.timer-seconds.no-timer)::after { content: '∞'; opacity: 0.7; }
.d3banner-left .timer-seconds.no-timer { display: none; }
.d3banner-right {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 9px 16px;
  position: relative; overflow: hidden;
}
.d3banner .timer-bar-track {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px; background: rgba(0,0,0,.15); border-radius: 0;
}
.d3banner .timer-bar-fill {
  height: 100%; background: var(--ink); border-radius: 0;
  transition: width 1s linear, background 0.3s;
}
.d3banner.my-turn .timer-bar-fill { background: rgba(255,255,255,.5); }
.d3banner.my-turn {
  background: var(--coral); color: #fff;
  border-color: var(--coral-d);
  box-shadow: 0 5px 0 var(--coral-d);
}
/* .d3right replaced by .d3col-right */
.chip-skor {
  background: var(--d3-gold); color: var(--ink); padding: 7px 12px;
  border-radius: 10px; font-weight: 900; font-size: 13px;
  box-shadow: 0 4px 0 var(--d3-gold-d);
  font-family: 'Nunito', var(--font-ui), sans-serif;
  white-space: nowrap;
  /* As button element */
  border: none; cursor: default;
  transition: background 0.15s, transform 0.1s, box-shadow 0.1s;
  line-height: 1;
}
/* State: aktif setelah ronde selesai — bisa diklik */
.chip-skor.clickable {
  cursor: pointer;
  animation: chipSkorPulse 1.8s ease-in-out 0.4s 3;
  outline: 2px solid transparent;
}
.chip-skor.clickable::after {
  content: ' 📊';
  font-size: 11px;
  opacity: 0.8;
}
.chip-skor.clickable:hover {
  background: #f5e14a;
  box-shadow: 0 6px 0 var(--d3-gold-d);
  transform: translateY(-1px);
}
.chip-skor.clickable:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--d3-gold-d);
}
@keyframes chipSkorPulse {
  0%, 100% { box-shadow: 0 4px 0 var(--d3-gold-d); }
  50%  { box-shadow: 0 4px 0 var(--d3-gold-d), 0 0 0 4px rgba(245,197,24,0.35); }
}

.d3icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--ink); color: var(--d3-gold);
  display: grid; place-items: center; font-size: 16px;
  box-shadow: 0 4px 0 var(--ink-d); flex: none;
  border: none; cursor: pointer; padding: 0;
  font-family: var(--font-ui);
  transition: background 0.15s;
}
.d3icon:hover { background: var(--ink2); }

/* Scoreboard button — when inside popup, show as flex row */
#btn-show-scores:not(.hidden) {
  display: flex !important;
  color: inherit;
  animation: none;
}

/* Settings popup */
.settings-popup {
  position: absolute;
  top: calc(100% + 4px);
  right: 10px;
  z-index: 200;
  background: #1a2a1e;
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.65);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  transform-origin: top right;
  animation: spPopIn 0.2s cubic-bezier(.175,.885,.32,1.275) both;
}
.settings-popup.hidden { display: none !important; }
@keyframes spPopIn {
  from { opacity: 0; transform: scale(0.78) translateY(-8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Volume row */
.sp-volume-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sp-vol-icon { font-size: 16px; flex-shrink: 0; user-select: none; }
.sp-vol-val  { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5); min-width: 24px; text-align: right; }

.sp-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #4caf6e var(--pct, 65%), rgba(255,255,255,0.15) var(--pct, 65%));
  outline: none;
  cursor: pointer;
}
.sp-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform 0.1s;
}
.sp-volume-slider::-webkit-slider-thumb:active { transform: scale(1.25); }
.sp-volume-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%; border: none;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  cursor: pointer;
}

/* Popup header label */
.sp-label {
  font-size: 10px; font-weight: 900; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
  padding: 0 2px 2px;
  font-family: 'Nunito', var(--font-ui), sans-serif;
}

/* 2-col tile grid */
.sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* Each tile */
.sp-tile {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.08);
  color: #fff; cursor: pointer;
  font-family: 'Nunito', var(--font-ui), sans-serif;
  transition: background 0.12s, transform 0.1s, border-color 0.12s;
  min-height: 72px;
}
.sp-tile:hover  { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.18); }
.sp-tile:active { transform: scale(0.94); background: rgba(255,255,255,0.18); }
.sp-tile-wide   { grid-column: 1 / -1; flex-direction: row; min-height: 48px; gap: 10px; padding: 12px 16px; justify-content: center; }
.sp-tile.muted  { opacity: 0.55; }

.sp-icon { font-size: 22px; line-height: 1; }
.sp-tile-wide .sp-icon { font-size: 18px; }
.sp-lbl  {
  font-size: 11px; font-weight: 800;
  color: rgba(255,255,255,0.85); line-height: 1;
  letter-spacing: 0.02em;
}

/* Skor Ronde — full-width gold button, shown only after round ends */
.sp-scores-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 14px; border-radius: 11px;
  background: var(--d3-gold); color: var(--ink);
  border: none; cursor: pointer;
  font-size: 13px; font-weight: 900;
  font-family: 'Nunito', var(--font-ui), sans-serif;
  box-shadow: 0 3px 0 var(--d3-gold-d);
  transition: background 0.12s, transform 0.1s;
  animation: spScoresPop 0.3s cubic-bezier(.175,.885,.32,1.275) both;
}
.sp-scores-btn:hover  { background: #f5e14a; }
.sp-scores-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--d3-gold-d); }
.sp-scores-btn.hidden { display: none !important; }
@keyframes spScoresPop {
  from { opacity: 0; transform: scaleY(0.5); }
  to   { opacity: 1; transform: scaleY(1); }
}


/* Timer inside header */
.d3icon-timer {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 10px; min-width: 52px;
  height: auto; font-size: 15px;
}
.d3icon-timer .timer-seconds {
  font-weight: 900; font-size: 15px; color: var(--d3-gold);
  line-height: 1; font-family: 'Nunito', var(--font-ui), sans-serif;
}
.d3icon-timer .timer-bar-track {
  width: 100%; height: 3px;
  background: rgba(255,255,255,.25); border-radius: 2px;
}
.d3icon-timer .timer-bar-fill {
  height: 100%; background: var(--d3-gold); border-radius: 2px;
  transition: width 1s linear, background 0.3s;
}
.d3icon-timer .timer-seconds.no-timer ~ .timer-bar-track { display: none; }
.d3icon-timer:has(.timer-seconds.no-timer) { display: none; }
.d3icon-timer .timer-seconds.urgent     { color: #ff7043; }
.d3icon-timer .timer-bar-fill.urgent    { background: #ff7043; }
.d3icon-timer .timer-seconds.very-urgent { color: var(--coral); animation: d3blink .5s step-start infinite; }
.d3icon-timer .timer-bar-fill.very-urgent { background: var(--coral); }
@keyframes d3blink { 50% { opacity: 0; } }

/* Opponents wrapper — transparent on desktop, flex-row on mobile */
.ar-opponents { display: contents; }

/* ── Play grid ── */
.d3play {
  position: relative; z-index: 2; flex: 1; min-height: 0;
  display: grid; gap: 14px;
  padding: 12px clamp(12px,3vw,32px);
  grid-template-columns: 420px 1fr 420px;
  grid-template-rows: auto 1fr;
  grid-template-areas: ". topop ." "leftop center rightop";
  align-items: start;
}
.ar-topop  { grid-area: topop;  justify-self: center; width: 100%; max-width: 100%; }
#screen-game #opp-top {
  width: fit-content !important;
  max-width: fit-content !important;
  box-sizing: border-box !important;
  justify-self: center;
}
.ar-leftop  { grid-area: leftop; align-self: center; justify-self: start; }
.ar-rightop { grid-area: rightop; align-self: center; justify-self: end; }
.ar-center  { grid-area: center; align-self: center; justify-self: center; }

/* ── Opponent pod ── */
.opod {
  background: #1a2e2a !important;
  border: 3px solid #14322f !important;
  border-radius: 16px;
  padding: 12px 14px !important;
  box-shadow: 0 5px 0 var(--ink-d);
  box-sizing: border-box !important;
}
#screen-game #opp-left,
#screen-game #opp-right {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  width: fit-content !important;
  max-width: fit-content !important;
  flex: none !important;
  flex-direction: column !important;
}
#screen-game .opod.active-turn {
  background: rgba(200,55,20,0.55) !important;
  border: 3px solid var(--coral) !important;
  /* outline: 2px solid rgba(232,80,42,0.6) !important; */
  outline-offset: 2px !important;
  box-shadow: 0 5px 0 var(--ink-d), 0 0 28px rgba(232,80,42,0.65) !important;
}
@keyframes opodPulse {
  0%, 100% { box-shadow: 0 5px 0 var(--ink-d), 0 0 0 2px #14a89c, 0 0 18px rgba(20,168,156,0.4); }
  50%       { box-shadow: 0 5px 0 var(--ink-d), 0 0 0 2px #14a89c, 0 0 32px rgba(20,168,156,0.7); }
}
.oprow { display: flex; align-items: center; gap: 8px; }
.opava {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; color: #fff;
  font-weight: 900; font-size: 20px; background: var(--coral);
  font-family: 'Nunito', var(--font-ui), sans-serif;
  user-select: none;
  position: relative;
  line-height: 1;
  overflow: hidden;
}

/* Bot taunt speech bubble */
.bot-taunt-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.88);
  background: #1a1a2e;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.15);
  white-space: nowrap;
  max-width: 180px;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.bot-taunt-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a1a2e;
}
.bot-taunt-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.bot-taunt-bubble.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-4px) scale(0.92);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Top opponent — bubble muncul ke BAWAH agar tidak ketutup header */
.ar-topop .bot-taunt-bubble {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-6px) scale(0.88);
}
.ar-topop .bot-taunt-bubble::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #1a1a2e;
}
.ar-topop .bot-taunt-bubble.show {
  transform: translateX(-50%) translateY(0) scale(1);
}
.ar-topop .bot-taunt-bubble.hide {
  transform: translateX(-50%) translateY(4px) scale(0.92);
}
/* ── Sort + Emote button row ──────────────────────────────── */
.kombi-action-btns {
  display: flex; flex-direction: row; align-items: center; gap: 4px;
  margin: auto;
}

/* ── Emote button (kombi-right) ───────────────────────────── */
.btn-emote-kombi {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  width: 34px; height: 34px;
  font-size: 17px; line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.12s, opacity 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.btn-emote-kombi:hover { background: rgba(255,255,255,0.22); transform: scale(1.1); }
.btn-emote-kombi:active { transform: scale(0.92); }
.btn-emote-kombi.hidden { display: none; }

/* ── Sort hand button (juara 1 only) ─────────────────────── */
.btn-sort-kombi {
  background: rgba(245,197,24,0.15);
  border: 1px solid rgba(245,197,24,0.4);
  border-radius: 50%;
  width: 34px; height: 34px;
  font-size: 17px; line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.12s;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.btn-sort-kombi:hover { background: rgba(245,197,24,0.28); transform: scale(1.1); }
.btn-sort-kombi:active { transform: scale(0.92); }
.btn-sort-kombi.hidden { display: none; }
.btn-sort-kombi .sort-mode-badge {
  position: absolute; bottom: -2px; right: -2px;
  font-size: 9px; line-height: 1; background: var(--d3-gold);
  color: #111; border-radius: 4px; padding: 1px 3px;
  font-family: monospace; font-weight: 700; pointer-events: none;
}

/* ── Emote picker popup ───────────────────────────────────── */
.emote-picker {
  position: fixed;
  display: grid;
  grid-template-columns: repeat(6, 44px);
  gap: 5px;
  background: rgba(18,18,38,0.96);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 8px;
  z-index: 100001;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  animation: emote-picker-in 0.18s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes emote-picker-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.emote-btn {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  width: 44px; height: 44px;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
  font-size: 24px; line-height: 1;
}
.emote-btn:hover  { background: rgba(255,255,255,0.18); transform: scale(1.18); }
.emote-btn:active { transform: scale(0.90); }
.emote-cat-taunt    { border-color: rgba(220,50,50,0.35); }
.emote-cat-friendly { border-color: rgba(80,200,80,0.35); }
.emote-cat-shock    { border-color: rgba(255,200,50,0.35); }

/* ── Floating emoji emote ─────────────────────────────────── */
.emote-float {
  position: fixed;
  font-size: 52px;
  line-height: 1;
  pointer-events: none;
  z-index: 100002;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  transition: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.emote-float.go {
  animation: emote-float-anim 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes emote-float-anim {
  0%   { transform: translate(-50%, -50%) scale(0.3) rotate(-12deg); opacity: 0; }
  18%  { transform: translate(-50%, calc(-50% + var(--dy, -30px) * 0.1)) scale(1.35) rotate(8deg);  opacity: 1; }
  35%  { transform: translate(-50%, calc(-50% + var(--dy, -30px) * 0.25)) scale(1.0) rotate(-4deg); opacity: 1; }
  70%  { transform: translate(-50%, calc(-50% + var(--dy, -30px) * 0.75)) scale(0.95) rotate(2deg); opacity: 0.85; }
  100% { transform: translate(-50%, calc(-50% + var(--dy, -30px))) scale(0.7) rotate(0deg); opacity: 0; }
}

.opod.active-turn .opava { background: #062322 !important; }
.optag {
  flex: 0 1 auto !important;
  min-width: 0; padding: 3px 8px; border-radius: 6px;
  background: var(--ink2); line-height: 1.1;
}
.opod.active-turn .optag { background: #062322 !important; }
.opname {
  font-weight: 900; font-size: 11px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: 'Nunito', var(--font-ui), sans-serif;
}
.oppoin {
  font-weight: 800; font-size: 9px; color: var(--d3-gold);
  font-family: 'Nunito', var(--font-ui), sans-serif;
}
.opod.active-turn .oppoin { color: var(--d3-gold) !important; }
.opcount {
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px;
  background: var(--coral); color: #fff; font-weight: 900; font-size: 12px;
  display: grid; place-items: center; flex: none;
  border: 2px solid rgba(255,255,255,.85);
  font-family: 'Nunito', var(--font-ui), sans-serif;
  margin-left: auto !important;
}
.opmelds {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 9px !important;
  align-content: flex-start !important;
  /* Reservasi ruang meld agar tidak ada height jump saat meld pertama masuk */
  min-height: 64px !important;
}
.ar-topop .opmelds { justify-content: center; }

/* Placeholder saat belum ada meld */
.opmelds:empty {
  position: relative !important;
}
.opmelds:empty::after {
  content: 'Panggon Ndadekno';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-style: italic;
  font-family: 'Nunito', var(--font-ui), sans-serif;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Meld groups inside opod */
#screen-game .opod .meld-group {
  background: rgba(0,0,0,.18);
  border-radius: 9px;
  position: relative;
  height: 64px;
  display: flex !important;
  gap: 4px !important; /* gap-1 */
}
#screen-game .opod.active-turn .meld-group { background: rgba(0,0,0,.14); }
#screen-game .opod .meld-group .card-sm {
  position: absolute !important;
  margin-left: 0 !important;
}

/* ── Center zone ── */
.deal-waiting-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Nunito', sans-serif;
  font-size: 0.5rem;
  font-weight: 800;
  font-style: italic;
  color: rgba(255,255,255,0.6);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.03em;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s ease;
  z-index: 2;
}
.deal-waiting-label.fade-out { opacity: 0; }

.centerbox {
  position: relative;
  display: flex; align-items: flex-end; gap: clamp(10px,3vw,50px);
  padding: clamp(14px,2.4vw,20px); border-radius: 20px;
  background: var(--ink); border: 4px solid var(--d3-gold);
  box-shadow: 0 8px 0 var(--ink-d);
  background-image: var(--batik);
}
.cstack { text-align: center; }
/* Deal reveal — stock cstack: opacity only (keeps position for animation origin) */
.cstack-stock-deal-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Deal reveal — joker + discard cstacks collapse width, spring in after deal */
.cstack-deal-hidden {
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.cstack-deal-animate {
  max-width: 120px;
  transition: max-width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease-out !important;
}
/* centerbox gap collapses during deal → expands on reveal */
.centerbox.centerbox-deal-hidden { gap: 0 !important; }
.centerbox.centerbox-deal-animate {
  transition: gap 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
/* plus arms slide in from outside */
.plus-arm-deal-top {
  opacity: 0 !important;
  transform: translateY(16px) !important;
  pointer-events: none !important;
}
.plus-arm-deal-bot {
  opacity: 0 !important;
  transform: translateY(-16px) !important;
  pointer-events: none !important;
}
.plus-arm-deal-animate {
  transition: opacity 1.1s ease-out,
              transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.clabel {
  font-size: 9px; font-weight: 900; color: var(--d3-gold);
  letter-spacing: .5px; margin-top: 13px;
  font-family: 'Nunito', var(--font-ui), sans-serif;
}
.clabel.sub { color: #fff; }
.cbadge {
  position: absolute; top: -9px; right: -9px;
  min-width: 24px; height: 24px; padding: 0 5px; border-radius: 99px;
  background: var(--coral); color: #fff; font-weight: 900; font-size: 12px;
  display: grid; place-items: center; border: 2px solid #fff;
  font-family: 'Nunito', var(--font-ui), sans-serif;
  pointer-events: none;
  z-index: 100 !important;
}

/* Stock pile — batik back */
.d3back-pile {
  width: 56px !important; height: 80px !important; border-radius: 9px !important;
  background: var(--ink); border: 2px solid var(--coral);
  background-image: repeating-linear-gradient(45deg,rgba(232,80,42,.45) 0 4px,transparent 4px 8px);
  box-shadow: 0 3px 0 var(--ink-d);
  cursor: pointer;
  transition: transform 0.15s;
}
.d3back-pile:hover { transform: translateY(-4px) scale(1.02); }

/* Joker ref card — white with gold border */
#screen-game .joker-ref-pile {
  background: #fff !important;
  /* border: 2px solid #caa23e !important; */
  /* box-shadow: 0 3px 0 #caa23e, 0 5px 8px rgba(0,0,0,.25) !important; */
  width: 56px !important; height: 80px !important;
  border-radius: 9px !important;
}

/* Discard pile — override width/height to match center */
#screen-game .discard-pile {
  width: 56px !important;
  height: 80px !important;
  background: rgba(0,0,0,.18) !important;
  border: 2px dashed rgba(20,168,156,.5) !important;
}

#screen-game .discard-pile:has(.card) {
  border-color: transparent !important;
  background: transparent !important;
}

#screen-game .discard-dropzone-wrap {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  position: relative !important;
  display: block !important;
}

#screen-game .discard-dropzone-wrap::before {
  content: '';
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -24px;
  right: -24px;
  z-index: 10;
  pointer-events: none;
  border-radius: 14px;
  transition: background 0.2s;
}

#screen-game:has(.dragging) .discard-dropzone-wrap.my-turn::before {
  pointer-events: auto;
  top: -32px;
  bottom: -32px;
  left: -40px;
  right: -40px;
  background: rgba(6,35,34,0.72);
  border: 2px dashed var(--d3-gold);
  border-radius: 14px;
}

#screen-game:has(.dragging) .discard-dropzone-wrap.my-turn::after {
  content: 'Buang Kartu Disini';
  position: absolute;
  top: -32px;
  bottom: -32px;
  left: -40px;
  right: -40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  font-family: 'Nunito', var(--font-ui), sans-serif;
  color: var(--d3-gold);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.06em;
  z-index: 11;
}

#screen-game:has(.dragging) .discard-dropzone-wrap.my-turn .discard-pile {
  transform: scale(1.18);
  transition: transform 0.2s cubic-bezier(.175,.885,.32,1.275);
}

#screen-game .discard-dropzone-wrap.discard-drag-over .discard-pile {
  border: 2px solid var(--coral) !important;
  border-style: solid !important;
  box-shadow: 0 0 32px rgba(232,80,42,0.75) !important;
  background: rgba(232,80,42,0.12) !important;
  transform: scale(1.25) !important;
}

/* ── D3 card overrides (all .card in game screen) ── */
#screen-game .card:not(.joker-ref-pile):not(.card-sm) {
  width: 68px !important;
  height: 96px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  box-shadow: 0 3px 0 var(--ink), 0 5px 8px rgba(0,0,0,.22) !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  box-sizing: border-box !important;
  position: relative !important;
}
#screen-game .card:not(.card-sm).red  { color: var(--coral) !important; }
#screen-game .card:not(.card-sm).black { color: var(--ink) !important; }

#screen-game .card:not(.card-sm) .card-corner-tl {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1 !important;
}

#screen-game .card:not(.card-sm) .card-corner-br {
  position: absolute !important;
  bottom: 6px !important;
  right: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1 !important;
  transform: rotate(180deg) !important;
}

/* Center suit icon */
#screen-game .card:not(.card-sm) > .card-suit {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: block !important;
}

/* Rank & Suit in corners */
#screen-game .card:not(.card-sm) .card-rank {
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
  color: inherit !important;
}

#screen-game .card:not(.card-sm) .card-corner-tl .card-suit,
#screen-game .card:not(.card-sm) .card-corner-br .card-suit {
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* Joker ref card — cream scale override */
#screen-game .joker-ref-pile {
  /* background: linear-gradient(160deg,#fbf3df,#f3e6c4) !important; */
  /* border: 2px solid #caa23e !important; */
  /* box-shadow: 0 3px 0 #caa23e, 0 5px 8px rgba(0,0,0,.25) !important; */
  width: 56px !important; height: 80px !important;
  border-radius: 9px !important;
}
#screen-game .joker-ref-pile .card-corner-tl {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1 !important;
}
#screen-game .joker-ref-pile .card-corner-br {
  position: absolute !important;
  bottom: 4px !important;
  right: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1 !important;
  transform: rotate(180deg) !important;
}
#screen-game .joker-ref-pile > .card-suit {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: block !important;
}
#screen-game .joker-ref-pile .card-rank {
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-bottom: 1px !important;
}
#screen-game .joker-ref-pile .card-corner-tl .card-suit,
#screen-game .joker-ref-pile .card-corner-br .card-suit {
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Discard top card scale override */
#screen-game #discard-pile .card {
  width: 56px !important;
  height: 80px !important;
  border-radius: 9px !important;
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  position: absolute !important;
}

/* Show hand reveal overrides — flex flow, kartu overlap gaya meld (margin negatif dari JS),
   satu baris + geser horizontal saat sempit, dibedakan dari meld asli: dashed + redup */
#screen-game .opp-hand-reveal {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  max-width: 100% !important;
  flex-basis: auto !important;
  margin-top: 0 !important;
  /* padding: 5px 8px !important; */
  border: 2px dashed rgba(255, 255, 255, 0.35) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border-radius: 9px !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  /* Redup di level grup (bukan per kartu) — kartu overlap tetap opaque, tidak tembus */
  opacity: 0.88 !important;
}
#screen-game .opp-hand-reveal::-webkit-scrollbar { display: none !important; }
/* Spacer ujung kanan — padding-right scroll container tidak dirender saat konten overflow */
#screen-game .opp-hand-reveal::after {
  content: '' !important;
  flex: none !important;
  width: 8px !important;
  height: 1px !important;
}
#screen-game .opod .meld-group.opp-hand-reveal,
#screen-game .opp-hand-reveal {
  height: auto !important;
  width: auto !important;
}
#screen-game .opod .meld-group.opp-hand-reveal .card-sm,
#screen-game .opp-hand-reveal .card-sm {
  position: relative !important;
  flex: none !important;
  opacity: 1 !important; /* override style.css 0.92 — per kartu wajib opaque agar tumpukan tidak tembus */
  animation: revealCardD3 0.3s ease both !important;
}
/* Overlap gaya meld: kartu 48px, step 22px → kartu kedua dst geser kiri 26px.
   Specificity (1,5,0) menang atas margin-left:0 !important di .opod .meld-group .card-sm */
#screen-game .opod .meld-group.opp-hand-reveal .card-sm + .card-sm,
#screen-game .opp-hand-reveal .card-sm + .card-sm {
  margin-left: -26px !important;
}
@keyframes revealCardD3 {
  from { transform: rotateY(90deg) scale(0.85); opacity: 0; }
  to   { transform: rotateY(0deg)  scale(1);    opacity: 1; }
}
#screen-game #discard-pile .card .card-corner-tl {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1 !important;
}
#screen-game #discard-pile .card .card-corner-br {
  position: absolute !important;
  bottom: 4px !important;
  right: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1 !important;
  transform: rotate(180deg) !important;
}
#screen-game #discard-pile .card > .card-suit {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: block !important;
}
#screen-game #discard-pile .card .card-rank {
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-bottom: 1px !important;
  color: inherit !important;
}
#screen-game #discard-pile .card .card-corner-tl .card-suit,
#screen-game #discard-pile .card .card-corner-br .card-suit {
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* ── Tampilan kartu: hanya pojok kiri atas (1 simbol + 1 karakter) ──
   Berlaku untuk: meld player, meld lawan, draw overlay
   KECUALI: discard pile & kartu di tangan player
*/
#screen-game .card:not(.card-sm):not(.joker-ref-pile):not(#discard-pile .card):not(#my-hand .card):not(#discard-preview .card) .card-corner-br,
#screen-game .card:not(.card-sm):not(.joker-ref-pile):not(#discard-pile .card):not(#my-hand .card):not(#discard-preview .card) > .card-suit {
  display: none !important;
}

/* Card-sm meld cards */
#screen-game .card-sm {
  width: 48px !important;
  height: 64px !important;
  background: #fff !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
}
#screen-game .card-sm.red   { color: var(--coral) !important; }
#screen-game .card-sm.black { color: var(--ink)   !important; }
#screen-game .card-sm .card-rank {
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
  color: inherit !important;
  display: block !important;
}
#screen-game .card-sm .card-suit {
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: inherit !important;
  display: block !important;
}

/* ── Bottom: KOMBINASIKU + hand ── */
.d3bottom {
  position: relative; z-index: 2; flex: none;
  padding: 6px 0px 22px;
}
.kombi {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 10px 32px;
  position: relative;
  border-top: 2px dashed var(--d3-gold) !important;
  border-bottom: 2px dashed var(--d3-gold) !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: var(--ink) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 62px;
  transition: background 0.18s, box-shadow 0.18s;
}
.kombi.drag-over {
  border-color: var(--d3-gold) !important;
  background: rgba(245,197,24,.10) !important;
  box-shadow: 0 0 28px rgba(245,197,24,.25) inset !important;
}
.kombi-label {
  font-weight: 900; color: var(--d3-gold); letter-spacing: .5px;
  font-size: clamp(12px,1.8vw,14px);
  font-family: 'Nunito', var(--font-ui), sans-serif;
  flex: none;
}
.kombi-groups {
  display: flex; flex-wrap: nowrap; gap: 12px; flex: 1;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.kombi-groups::-webkit-scrollbar { display: none; }
.kombi-groups .meld-group { flex-shrink: 0; }
.kombi-right {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px;
  margin-left: auto; align-self: stretch;
}
/* Center overlay — absolute centered dalam kombi */
.kombi-center-overlay {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  white-space: nowrap;
}
.kombi-hint {
  color: rgba(255,255,255,.28); font-weight: 800;
  font-size: clamp(10px,1.6vw,12px);
  font-family: 'Nunito', var(--font-ui), sans-serif;
  transition: color 0.2s, text-shadow 0.2s, opacity 0.2s;
}
/* Sembunyikan hint saat ada meld atau ada seleksi */
.kombi-groups:not(:empty) ~ .kombi-center-overlay .kombi-hint { opacity: 0; }
.kombi-center-overlay:has(.selected-info:not(.hidden)) .kombi-hint { opacity: 0; }

/* selected-info di dalam kombi — hilangkan posisi fixed lama */
#screen-game .selected-info {
  position: static;
  background: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: clamp(10px,1.6vw,12px) !important;
  gap: 4px;
}
#screen-game .selected-info.hidden { display: none !important; }
#screen-game .selected-info:not(.hidden) { display: flex !important; }

/* Drag-over: hint nyala emas */
.kombi.drag-over .kombi-hint {
  opacity: 1 !important;
  color: rgba(245,197,24,.9);
  text-shadow: 0 0 12px rgba(245,197,24,.6);
  animation: kombiHintPulse 0.8s ease-in-out infinite alternate;
}
@keyframes kombiHintPulse {
  from { opacity: 0.75; }
  to   { opacity: 1; }
}
/* Hide old meld label / hint text since we use kombi-label / kombi-hint */
#screen-game .melds-label          { display: none !important; }
#screen-game .meld-dropzone-hint   { display: none !important; }
/* Meld groups in my melds */
#screen-game .kombi-groups .meld-group {
  background: rgba(255,255,255,.08);
  border-radius: 9px;
  position: relative;
  height: 64px;
  display: flex !important;
  gap: 4px !important; /* gap-1 */
}
#screen-game .kombi-groups .meld-group .card-sm {
  position: absolute !important;
  margin-left: 0 !important;
}

/* My area — minimal wrapper (hand only) */
#screen-game .my-area {
  background: none !important;
  border: none !important;
  padding: 0 32px !important;
  box-shadow: none !important;
}
#screen-game .my-info { display: none !important; }
.my-name-d3 { display: none !important; }
#center-toast-slot,
#center-turn-slot { display: none !important; }
/* Return discard bar inside kombi */
#screen-game .return-discard-bar { margin-top: 2px; }

/* Selected info */
#screen-game .selected-info {
  text-align: center; font-size: 0.8rem;
  color: rgba(255,255,255,.9); padding: 4px 0 2px;
  font-family: 'Nunito', var(--font-ui), sans-serif;
}
/* Action hint desktop: keep original styling */
#screen-game #action-hint:empty { display: none; }

/* ── TABLET ── */
@media (max-width: 1199px) {
  .d3play {
    grid-template-columns: minmax(140px,1fr) minmax(220px,1.3fr) minmax(140px,1fr);
    gap: 10px;
  }
}
/* ── MOBILE ── */
@media (max-width: 767px) {
  .d3game { min-height: 100svh; height: auto; overflow: visible; }
  .d3header { flex-wrap: wrap; padding: 12px 12px 6px; gap: 6px; }
  .d3banner { order: 5; flex: 1 0 100%; margin-top: 4px; max-width: 100%; }
  .d3play {
    grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px;
    grid-template-rows: auto auto auto;
    grid-template-areas: "topop topop" "leftop rightop" "center center";
  }
  .ar-center { justify-self: center; }
  .d3bottom { padding: 6px 12px 26px; }
  .kombi { gap: 8px 10px; }
  .kombi-right { display: none; }
  #screen-game .my-hand { min-height: 74px; padding: 16px 8px 6px; }
}

/* ============================================================
   D3 THEME — HISTORY PANEL
   ============================================================ */
.history-panel {
  background: var(--ink-d) !important;
  border-left: 3px solid var(--d3-gold) !important;
  box-shadow: -6px 0 24px rgba(0,0,0,0.6) !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
}

.history-header {
  background: var(--ink) !important;
  border-bottom: 2px solid rgba(0,0,0,0.18) !important;
}

.history-title {
  color: var(--d3-gold) !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  font-size: 1.05rem !important;
}

.btn-close-history {
  background: rgba(255,255,255,0.05) !important;
  color: var(--d3-gold) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  transition: all 0.15s ease !important;
}

.btn-close-history:hover {
  background: var(--coral) !important;
  color: #fff !important;
  border-color: var(--coral-d) !important;
}

.history-log {
  background: rgba(0,0,0,0.08) !important;
}

.history-log::-webkit-scrollbar {
  width: 5px !important;
}
.history-log::-webkit-scrollbar-track {
  background: var(--ink-d) !important;
}
.history-log::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12) !important;
  border-radius: 3px !important;
}
.history-log::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.22) !important;
}

.hlog-entry {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-left: 4px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
  color: rgba(255,255,255,0.85) !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-size: 0.8rem !important;
}

.hlog-entry.hlog-round-start {
  background: rgba(255,182,72,0.08) !important;
  border-color: rgba(255,182,72,0.15) !important;
  border-left-color: var(--d3-gold) !important;
  color: var(--d3-gold) !important;
  font-weight: 900 !important;
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}

.hlog-entry.hlog-draw-stock {
  border-left-color: var(--teal) !important;
}

.hlog-entry.hlog-draw-discard {
  border-left-color: var(--d3-gold) !important;
}

.hlog-entry.hlog-meld {
  border-left-color: #81c784 !important;
}

.hlog-entry.hlog-discard {
  border-left-color: rgba(255,255,255,0.2) !important;
}

.hlog-entry.hlog-close {
  background: rgba(232,80,42,0.1) !important;
  border-color: rgba(232,80,42,0.2) !important;
  border-left-color: var(--coral) !important;
  font-weight: 900 !important;
  color: #fff !important;
}

.hlog-entry.hlog-round-end {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
  border-left-color: var(--d3-gold) !important;
  margin-bottom: 12px !important;
}

.hlog-entry.hlog-steal-penalty {
  border-left-color: var(--coral) !important;
  color: #ff8a80 !important;
  background: rgba(232,80,42,0.05) !important;
}

.hlog-time {
  color: rgba(255,255,255,0.3) !important;
}

.hlog-suit-red {
  color: var(--coral) !important;
  font-weight: 900 !important;
}

.hlog-suit-black {
  color: #fff !important;
  font-weight: 900 !important;
}

/* ============================================================
   D3 THEME — HOW TO PLAY MODAL & DEMO
   ============================================================ */
.htp-overlay {
  background: rgba(6,35,34,0.85) !important;
  backdrop-filter: blur(8px) !important;
}

.htp-box {
  background: var(--ink) !important;
  border: 3px solid var(--d3-gold) !important;
  box-shadow: 0 8px 0 var(--ink-d), 0 24px 60px rgba(0,0,0,0.6) !important;
  border-radius: 18px !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
}

.htp-header {
  background: var(--ink-d) !important;
  border-bottom: 2px solid rgba(0,0,0,0.18) !important;
}

.htp-title {
  color: var(--d3-gold) !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

.btn-close-htp {
  background: rgba(255,255,255,0.05) !important;
  color: var(--d3-gold) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-grid !important;
  place-items: center !important;
  transition: all 0.15s ease !important;
}

.btn-close-htp:hover {
  background: var(--coral) !important;
  color: #fff !important;
  border-color: var(--coral-d) !important;
}

.htp-header-top {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

.htp-main-tabs {
  background: var(--ink-d) !important;
  border-top-color: rgba(255,255,255,0.04) !important;
}

.htp-main-tab {
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 0.02em !important;
}

.htp-main-tab.active {
  color: var(--d3-gold) !important;
  border-bottom-color: var(--d3-gold) !important;
}

.htp-main-tab:hover:not(.active) {
  color: rgba(255,255,255,0.7) !important;
}

.htp-left {
  border-right: none !important;
  background: rgba(0,0,0,0.08) !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-size: 0.82rem !important;
}

.htp-section-title {
  color: var(--d3-gold) !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-weight: 900 !important;
  border-bottom: 1.5px solid rgba(255,255,255,0.06) !important;
  padding-bottom: 6px !important;
  margin-top: 4px !important;
  letter-spacing: 0.02em !important;
}

.htp-meld-item {
  background: var(--ink2) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 8px !important;
}

.htp-meld-name {
  color: var(--d3-gold) !important;
  font-weight: 800 !important;
}

.htp-meld-desc {
  color: rgba(255,255,255,0.8) !important;
}

.htp-bonus-item {
  background: var(--ink2) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 10px !important;
}

.htp-bonus-card {
  color: rgba(255,255,255,0.5) !important;
  font-weight: 700 !important;
}

.htp-bonus-val {
  color: var(--teal) !important;
  font-weight: 900 !important;
}

.htp-right {
  background: var(--ink-d) !important;
}

.demo-tabs {
  background: var(--ink-d) !important;
  border-bottom: 1.5px solid rgba(255,255,255,0.07) !important;
  padding: 12px 14px 0 !important;
}

.demo-tab {
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.45) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: none !important;
  background: rgba(255,255,255,0.02) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 8px 14px !important;
}

.demo-tab.active {
  background: var(--ink) !important;
  color: var(--d3-gold) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

.dg-scene {
  background: var(--teal) !important;
  position: relative !important;
  overflow: hidden !important;
}

.dg-scene::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 0 2px, transparent 3px) !important;
  background-size: 28px 28px !important;
}

.dg-board-top {
  position: relative !important;
  z-index: 1 !important;
}

.dg-board-sep {
  height: 3px !important;
  background: var(--coral) !important;
  background-image: var(--batik) !important;
  opacity: 1 !important;
}

.dg-board-hand {
  background: var(--ink-d) !important;
  border-top: 2px solid rgba(0,0,0,0.15) !important;
  position: relative !important;
  z-index: 1 !important;
}

.dg-board-hand-lbl {
  color: rgba(255,255,255,0.3) !important;
  font-weight: 800 !important;
}

.dg-pile-lbl {
  color: rgba(255,255,255,0.4) !important;
  font-weight: 800 !important;
}

.dg-stock-badge {
  background: var(--coral) !important;
  border: 1.5px solid #fff !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 0.6rem !important;
  border-radius: 99px !important;
  padding: 1px 5px !important;
  bottom: -8px !important;
}

.dg-meld-zone {
  border: 2px dashed rgba(255,255,255,0.25) !important;
  background: rgba(0,0,0,0.14) !important;
}

.dg-zone-label {
  background: var(--teal) !important;
  color: rgba(255,255,255,0.45) !important;
  font-weight: 700 !important;
}

.dg-combo-badge {
  color: var(--ink) !important;
  background: var(--d3-gold) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: 0 3px 0 var(--d3-gold-d) !important;
  font-weight: 900 !important;
  font-family: 'Nunito', sans-serif !important;
  border-radius: 8px !important;
}

.dg-joker-ref-panel {
  background: var(--ink) !important;
  border: 1.5px solid var(--d3-gold) !important;
}

.dg-joker-ref-lbl {
  color: var(--d3-gold) !important;
}

.dg-joker-ref-sublbl {
  color: rgba(255,255,255,0.5) !important;
}

.dc:not(.joker-ref-pile) {
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  border: 1.5px solid var(--ink) !important;
  box-shadow: 0 2.5px 0 var(--ink), 0 3px 6px rgba(0,0,0,0.3) !important;
  border-radius: 6px !important;
  font-weight: 900 !important;
}

.dc.red {
  color: var(--coral) !important;
}

.dc.black {
  color: var(--ink) !important;
}

.dc.back {
  background: var(--ink) !important;
  border-color: var(--coral) !important;
  background-image: repeating-linear-gradient(45deg, rgba(232,80,42,0.45) 0 3px, transparent 3px 6px) !important;
}

.dc.joker {
  background-color: #fff8e1 !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,210,80,0.12) 100%) !important;
  border-color: var(--ink) !important;
  outline: 2px solid rgba(245,197,24,0.7) !important;
  box-shadow: 0 0 10px rgba(245,197,24,0.45), 0 2.5px 0 var(--ink), 0 3px 6px rgba(0,0,0,0.3) !important;
  color: #7b1fa2 !important;
}
.dc.joker .dc-rank, .dc.joker .dc-suit {
  color: #7b1fa2 !important;
}

.dg-joker-card {
  border: 1.5px dashed var(--d3-gold) !important;
  box-shadow: 0 0 10px rgba(245,197,24,0.3), 0 2.5px 0 var(--ink), 0 3px 6px rgba(0,0,0,0.3) !important;
  background-color: #fff !important;
}

.dc.selected {
  transform: translateY(-8px) scale(1.05) !important;
  box-shadow: 0 0 0 2.5px var(--d3-gold), 0 2.5px 0 var(--ink), 0 8px 18px rgba(0,0,0,0.4) !important;
}

/* dc-flip-in D3: same as base but with D3 shadow tones */
.dc.dc-flip-in {
  animation: dc-flip-in 0.52s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

/* dc-meld-pop D3: same spring — D3 gold will show via box-shadow override */
.dc.dc-meld-pop {
  animation: dc-meld-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

/* dc-toss-meld D3 */
.dc.dc-toss-meld {
  animation: dc-toss-meld 0.34s cubic-bezier(0.4,0,0.55,1) both !important;
}

/* dc-combo-in D3 */
.dc.dc-combo-in {
  animation: dc-combo-in 0.3s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

/* Shuffle button D3 theme */
.btn-combo-shuffle {
  background: rgba(245,197,24,0.07) !important;
  border-color: rgba(245,197,24,0.28) !important;
  color: var(--d3-gold) !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35) !important;
  border-radius: 10px !important;
}
.btn-combo-shuffle:hover {
  background: rgba(245,197,24,0.17) !important;
  border-color: var(--d3-gold) !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.35), 0 0 14px rgba(245,197,24,0.22) !important;
}

.ds-combo-name {
  color: rgba(255,255,255,0.88) !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-weight: 800 !important;
}

/* new-card: keep soft pulse (flip-in already did the big flash) */
.dc.new-card {
  animation: dc-new-pulse 1.1s ease-in-out infinite alternate !important;
}

.ds-combo-ref {
  background: var(--ink-d) !important;
  border-top: 1.5px solid rgba(255,255,255,0.08) !important;
}

.ds-combo-col-lbl {
  color: var(--d3-gold) !important;
  font-weight: 800 !important;
}

.ds-combo-name {
  color: rgba(255,255,255,0.8) !important;
  font-weight: 800 !important;
}

.ds-combo-no-joker {
  color: var(--coral) !important;
  font-weight: 700 !important;
}

.demo-win-bubble {
  color: var(--d3-gold) !important;
  background: var(--ink) !important;
  border: 2px solid var(--d3-gold) !important;
  box-shadow: 0 4px 0 var(--ink-d) !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
}

.demo-caption {
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.6) !important;
  font-weight: 700 !important;
}

@media (max-width: 750px) {
  .htp-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .htp-box {
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
  }
  .htp-left {
    border-right: none !important;
    border-bottom: none !important;
  }
  .htp-main-tab {
    font-size: 0.78rem !important;
    padding: 8px 14px !important;
  }
}

/* ============================================================
   MOBILE GAME UI — ≤600px
   All-opponents-in-one-row layout. Desktop untouched.
   ============================================================ */
@media (max-width: 600px) {

  /* ── Header: more compact, banner hidden (info shown in kombi-label) ── */
  .d3header {
    padding: 8px 10px 4px !important;
    gap: 5px !important;
  }
  .d3banner { display: none !important; }
  .chip-ronde {
    padding: 5px 10px !important;
    font-size: 13px !important;
  }
  .d3icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }
  .chip-skor {
    padding: 5px 9px !important;
    font-size: 11px !important;
  }
  .d3banner {
    margin-top: 2px !important;
    border-radius: 9px !important;
  }
  .d3banner-left {
    padding: 6px 10px !important;
    min-width: 46px !important;
    font-size: 15px !important;
  }
  .d3banner-right {
    padding: 5px 8px !important;
    font-size: 10px !important;
  }

  /* Allow scroll so sticky works on center */
  .d3game {
    overflow: visible !important;
  }

  /* ── Play area: flex column, fills remaining height ── */
  .d3play {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 6px !important;
    padding: 12px 8px 6px !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    grid-template-areas: unset !important;
  }

  /* ── Opponents: single horizontal row ── */
  .ar-opponents {
    display: flex !important;
    flex-direction: row !important;
    gap: 5px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .ar-opponents .ar-topop,
  .ar-opponents .ar-leftop,
  .ar-opponents .ar-rightop {
    flex: 0 0 calc(33.333% - 4px) !important;
    min-width: 0 !important;
    max-width: calc(33.333% - 4px) !important;
    width: calc(33.333% - 4px) !important;
    /* reset desktop grid positioning */
    grid-area: unset !important;
    position: relative !important;
    align-self: auto !important;
    justify-self: auto !important;
  }
  /* Empty slots disappear, remaining slots keep their width locked */
  .ar-opponents .ar-empty {
    display: none !important;
  }

  /* Reset desktop overrides on opp-left / opp-right for mobile */
  #screen-game #opp-left,
  #screen-game #opp-right {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 0 !important;
  }
  /* Reset ALL legacy style.css properties for all three pods */
  #screen-game #opp-top,
  #screen-game #opp-left,
  #screen-game #opp-right {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: unset !important;
    flex-direction: column !important;
    flex-wrap: unset !important;
    gap: unset !important;
    padding: unset !important;
    align-self: unset !important;
    align-items: unset !important;
    justify-self: unset !important;
    margin: 0 !important;
    position: static !important;
    left: unset !important;
    right: unset !important;
    top: unset !important;
    display: block !important;
  }

  /* ── Opponent pod: compact but readable ── */
 
  .ar-opponents .opod {
    padding: 7px 6px 6px !important;
    box-shadow: 0 3px 0 var(--ink-d) !important;
    width: 100% !important;
    border-radius: 12px !important;
    position: relative !important;
  }
  .ar-opponents .oprow {
    gap: 5px !important;
    align-items: center !important;
    padding-left: 28px !important;
  }
  /* Avatar: blended into top-left corner */
  .ar-opponents .opava {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 17px !important;
    border-radius: 10px 0 8px 0 !important;
    flex-shrink: 0 !important;
    opacity: 0.82 !important;
    z-index: 1 !important;
  }
  .ar-opponents .optag {
    padding: 1px 3px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  .ar-opponents .opname-row {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
  }
  .ar-opponents .opname {
    font-size: 9px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  .ar-opponents .oppoin {
    font-size: 7.5px !important;
    line-height: 1.2 !important;
  }
  /* Card count: anchored to bottom-right corner */
  .ar-opponents .opcount {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    min-width: 20px !important;
    height: 20px !important;
    font-size: 9px !important;
    padding: 0 4px !important;
    border-radius: 6px 0 10px 0 !important;
    border: none !important;
    z-index: 1 !important;
  }

  /* ── Opponent melds: each meld on its own row (layout lama — rapi) ── */
  .ar-opponents .opmelds {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    min-height: 0 !important;
    margin-top: 5px !important;
    align-content: flex-start !important;
  }
  /* Empty opmelds: reserve height + show placeholder contained inside pod */
  .ar-opponents .opmelds:empty {
    min-height: 28px !important;
    position: relative !important;
  }
  .ar-opponents .opmelds:empty::after {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 7px !important;
    white-space: normal !important;
    text-align: center !important;
    width: 90% !important;
    opacity: 0.4 !important;
    line-height: 1.3 !important;
  }
  /* Scale meld groups to fit narrow column (layout lama: ditata ke bawah).
     Grup yang lebih lebar dari pod TIDAK dipotong — bisa digeser horizontal per grup. */
  .ar-opponents .opmelds .meld-group {
    zoom: 0.72 !important;
    transform-origin: 0 0 !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .ar-opponents .opmelds .meld-group::-webkit-scrollbar { display: none !important; }
  .ar-opponents .opmelds .meld-group .card-sm { flex-shrink: 0 !important; }
  /* Hand reveal saat ronde selesai: sama — satu baris, geser horizontal jika panjang */
  #screen-game .ar-opponents .opmelds .meld-group.opp-hand-reveal {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: auto !important;
  }

  /* Taunt bubble: below each opponent pod, anchored to its ar-*op column */
  .ar-opponents .ar-leftop,
  .ar-opponents .ar-topop,
  .ar-opponents .ar-rightop { overflow: visible !important; }

  .ar-opponents .bot-taunt-bubble {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-6px) scale(0.88) !important;
    max-width: 90px !important;
    white-space: normal !important;
    text-align: center !important;
    font-size: 11px !important;
    z-index: 9000 !important;
  }
  .ar-opponents .bot-taunt-bubble.show {
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }
  .ar-opponents .bot-taunt-bubble.hide {
    transform: translateX(-50%) translateY(6px) scale(0.92) !important;
  }
  /* Arrow points UP (bubble below opponent) */
  .ar-opponents .bot-taunt-bubble::after {
    display: block !important;
    top: auto !important;
    bottom: 100% !important;
    border-top-color: transparent !important;
    border-bottom-color: #1a1a2e !important;
  }

  /* ── Center piles: fills remaining space, centers piles vertically ── */
  .ar-center {
    position: sticky !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 10 !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    justify-self: unset !important;
    grid-area: unset !important;
    pointer-events: auto !important;
    margin-top: auto !important;
    padding-bottom: 2vh !important;
  }

  /* ── Plus-wrapper: flex column, centered ── */
  .plus-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* ── Arms (top/bottom of + shape) ── */
  .plus-arm {
    width: 180px !important;
    background: rgba(0,0,0,0.55) !important;
    background-image: none !important;
    backdrop-filter: blur(6px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 4px !important;
    font-family: 'Nunito', var(--font-ui), sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-align: center !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
  }
  .plus-arm-top {
    border: 3px solid var(--d3-gold) !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    margin-bottom: -2px !important;
    color: rgba(255,255,255,0.88) !important;
    z-index: 1 !important;
  }
  .plus-arm-bot {
    border: 3px solid var(--d3-gold) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    margin-top: -4px !important;
    color: rgba(255,255,255,0.9) !important;
    z-index: 1 !important;
    height: 34px !important;
    min-height: unset !important;
    overflow: hidden !important;
  }
  /* Active toast: brighter, colored pill */
  .plus-arm-top.toast-active {
    color: #fff !important;
    background: rgba(0,0,0,0.75) !important;
    border-color: var(--d3-gold) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important;
  }
  .plus-arm-top.toast-active.success { color: #6ee07a !important; border-color: #6ee07a !important; }
  .plus-arm-top.toast-active.error   { color: #ff7070 !important; border-color: #ff7070 !important; }
  .plus-arm-top.toast-active.warning { color: #ffb74d !important; border-color: #ffb74d !important; }
  .plus-arm-top.toast-active.gold    { color: var(--d3-gold) !important; border-color: var(--d3-gold) !important; }
  .plus-arm-top.toast-active.draw    { color: #4dd0e1 !important; border-color: #4dd0e1 !important; }
  .plus-arm-top.toast-active.discard { color: #ff8a65 !important; border-color: #ff8a65 !important; }
  .plus-arm-top.toast-active.connect { color: #ce93d8 !important; border-color: #ce93d8 !important; }

  /* ── My turn states ── */
  @keyframes turnPulseNormal  {
    0%,100% { box-shadow: 0 0 6px 2px rgba(255,255,255,0.15), inset 0 0 6px rgba(255,255,255,0.04); border-color: rgba(245,197,24,0.55) !important; }
    50%     { box-shadow: 0 0 22px 6px rgba(255,255,255,0.7), inset 0 0 14px rgba(255,255,255,0.12); border-color: var(--d3-gold) !important; }
  }
  @keyframes turnPulseUrgent  {
    0%,100% { box-shadow: 0 0 6px 1px rgba(255,112,67,0.3), inset 0 0 6px rgba(255,112,67,0.1); border-color: rgba(255,112,67,0.6) !important; }
    50%     { box-shadow: 0 0 22px 6px rgba(255,112,67,0.9), inset 0 0 14px rgba(255,112,67,0.25); border-color: #ff7043 !important; }
  }
  @keyframes turnPulseVeryUrgent {
    0%,100% { box-shadow: 0 0 4px 1px rgba(255,50,50,0.3), inset 0 0 4px rgba(255,50,50,0.1); border-color: rgba(255,50,50,0.5) !important; }
    50%     { box-shadow: 0 0 28px 8px rgba(255,50,50,1), inset 0 0 18px rgba(255,50,50,0.35); border-color: #ff2222 !important; }
  }

  #center-turn-slot {
    transition: color 0.6s ease, background 0.4s ease !important;
  }
  #center-turn-slot.plus-arm-deal-animate {
    transition: opacity 1.1s ease-out,
                transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.6s ease, background 0.4s ease !important;
  }
  #center-turn-slot.my-turn {
    color: #ffe066 !important;
    background: rgba(0,0,0,0.55) !important;
    font-weight: 900 !important;
    animation: turnPulseNormal 2s ease-in-out infinite !important;
  }
  #center-turn-slot.my-turn.urgent {
    color: #ffb74d !important;
    animation: turnPulseUrgent 0.9s ease-in-out infinite !important;
  }
  #center-turn-slot.my-turn.very-urgent {
    color: #ff6b6b !important;
    animation: turnPulseVeryUrgent 0.4s ease-in-out infinite !important;
  }
  /* No timer: constant slow breathe */
  #center-turn-slot.my-turn.no-timer {
    animation: turnPulseNormal 3s ease-in-out infinite !important;
  }
  /* Timer badge inside center-turn-slot */
  .cts-timer {
    font-variant-numeric: tabular-nums;
    font-size: 1.1em;
    font-weight: 900;
    opacity: 0.95;
    margin-right: 6px;
    letter-spacing: 0.01em;
  }
  .cts-timer.hidden { display: none; }
  .cts-timer.urgent      { color: #ffb74d !important; }
  .cts-timer.very-urgent { color: #ff6b6b !important; }
  #center-turn-slot.my-turn.urgent   .cts-timer { color: #ffb74d !important; }
  #center-turn-slot.my-turn.very-urgent .cts-timer { color: #ff6b6b !important; }

  /* Centerbox: remove radius on top/bottom so arms connect flush */
  .centerbox {
    gap: clamp(30px, 12vw, 56px) !important;
    padding: 10px 18px !important;
    justify-content: center !important;
    border-width: 3px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Turn info header: hide on mobile (moves to plus-arm-bot) */
  #screen-game #turn-info { display: none !important; }
  .d3back-pile {
    width: 56px !important;
    height: 80px !important;
  }
  #screen-game .joker-ref-pile {
    width: 56px !important;
    height: 80px !important;
  }
  #screen-game .joker-ref-pile > .card-suit { font-size: 1em !important; }
  #screen-game .discard-pile {
    width: 56px !important;
    height: 80px !important;
  }
  .clabel { font-size: 8px !important; margin-top: 8px !important; }
  .discard-dropzone-wrap + .clabel { margin-top: 20px !important; }
  .cbadge { min-width: 20px !important; height: 20px !important; font-size: 10px !important; top: -7px !important; right: -7px !important; }

  /* ── Bottom: KOMBINASIKU + hand ── */
  .d3bottom { padding: 4px 0 20px !important; }

  /* ── Kombi: flex row TANPA wrap + tinggi terkunci — meld banyak = scroll, bukan height jump ── */
  .kombi {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    padding: 6px 0 6px 10px !important;
    gap: 0 !important;
    height: 86px !important;
    min-height: 86px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Meld groups: sisa ruang setelah kombi-right, horizontal scroll, no wrap */
  .kombi-groups {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    align-items: center !important;
    align-self: center !important;
  }
  .kombi-groups::-webkit-scrollbar { display: none !important; }
  #screen-game .kombi-groups .melds-container { min-width: 0 !important; }
  #screen-game .kombi-groups .meld-group {
    zoom: unset !important;
    flex-shrink: 0 !important;
  }

  /* Center overlay: static agar selected-info absolute relatif ke .kombi */
  .kombi-center-overlay {
    position: static !important;
    transform: none !important;
    display: block !important;
    height: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  /* Selected-info: normal flow di atas return bar dalam kombi-right */
  #screen-game .selected-info,
  #screen-game .selected-info:not(.hidden) {
    position: static !important;
    display: block !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: auto !important;
    background: none !important;
    padding: 0 2px !important;
    width: 100% !important;
  }
  /* Tetap occupy space waktu hidden — cegah height jump */
  #screen-game #selected-info.hidden,
  #screen-game #return-discard-bar.hidden {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  #screen-game .sel-count-line {
    display: block !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: var(--d3-gold) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
  }
  #screen-game #selected-count {
    font-size: 12px !important;
    font-weight: 900 !important;
    color: var(--d3-gold) !important;
  }
  #screen-game .sel-hint-line {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.6) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  /* kombi-hint: absolute center di area 75% kiri */
  .kombi-hint {
    font-size: 9px !important;
    color: rgba(255,255,255,.25) !important;
    position: absolute !important;
    left: 37.5% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    white-space: nowrap !important;
  }

  /* kombi-right: 25% right panel, return bar di bawah (selected-info absolute di atas) */
  .kombi-right {
    flex: 0 0 30% !important;
    width: 30% !important;
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    padding: 6px 6px 8px !important;
    z-index: 3 !important;
    border-left: 1px solid rgba(255,255,255,0.08) !important;
  }
  #screen-game .return-discard-bar {
    margin-top: 0 !important;
  }
  #screen-game .return-discard-bar .btn {
    white-space: nowrap !important;
    padding: 6px 6px !important;
    line-height: 1 !important;
    min-height: unset !important;
    height: auto !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: rgba(232,80,42,0.12) !important;
    border: 1px solid rgba(232,80,42,0.55) !important;
    color: rgba(255,110,75,0.85) !important;
    letter-spacing: 0.02em !important;
  }
  #screen-game .return-discard-bar .btn:active {
    background: rgba(232,80,42,0.2) !important;
    color: rgba(255,120,90,0.9) !important;
    border-color: rgba(232,80,42,0.5) !important;
  }

  /* action-hint + kombi-label: hidden on mobile */
  #screen-game #action-hint { display: none !important; }
  .kombi-label { display: none !important; }
  /* plus-arm top/bot: visible on mobile only */
  #center-toast-slot,
  #center-turn-slot { display: flex !important; }
  /* Action hint: strip background, single line, fit-content */
  #screen-game #action-hint {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    padding: 0 !important;
    width: fit-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #screen-game .my-area { padding: 0 10px !important; }
  #screen-game .my-hand { min-height: 68px !important; padding: 14px 6px 4px !important; }
  /* No hover lift on touch — cards stay in fan position, z-index untouched */
  .card-hit-zone:hover .card:not(.selected):not(.dragging) {
    transform: rotate(var(--card-rot, 0deg)) translateY(var(--card-y, 0px)) !important;
    box-shadow: var(--card-shadow) !important;
  }
  /* Selected: no movement on mobile — gold outline + glow only, stays in fan position */
  .my-hand .card.selected {
    transform: rotate(var(--card-rot, 0deg)) translateY(var(--card-y, 0px)) !important;
    outline: 3px solid var(--gold) !important;
    box-shadow: 0 0 0 5px rgba(245,197,24,0.4), var(--card-shadow) !important;
  }

  /* ── Score overlay: bigger cards & text ── */
  /* Score overlay: compact, no scroll */
  .scores-container {
    padding: 0px 12px 0px 10px !important;
    max-height: 96vh !important;
    overflow-y: auto !important;
  }
  .scores-container h2 { font-size: 1.05rem !important; margin-bottom: 5px !important;margin-top: 5px !important; }
  .scores-round-stats { margin-left: -10px !important; margin-right: -12px !important; }

  /* Compact score rows */
  .score-row { font-size: 0.78rem !important; padding: 0 0 3px !important; gap: 4px !important; }
  .score-breakdown { padding: 0 10px !important; }
  .score-cards-row { margin: 0 10px 4px !important; }
  .score-row-header { gap: 4px !important; }
  .player-name { font-size: 0.78rem !important; }
  .round-pts { font-size: 0.78rem !important; }
  .total-pts { font-size: 1rem !important; }
  .sc-part { font-size: 0.65rem !important; padding: 2px 6px !important; }
  .score-breakdown { gap: 3px !important; margin-top: 2px !important; }
  .score-sub { font-size: 0.65rem !important; }
  .declare-badge { font-size: 0.65rem !important; }

  /* Wrapper: 1 horizontal scrollable row containing all groups */
  .score-cards-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 6px !important;
    padding: 0px 0 0px !important;
    margin-top: 2px !important;
    align-items: flex-start !important;
  }
  .score-cards-row::-webkit-scrollbar { display: none !important; }

  /* Each group: inline, keep border, no wrap */
  .score-hand-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
    padding: 5px 7px !important;
    margin-top: 0 !important;
    align-items: flex-start !important;
  }

  /* Each meld group: overlapping cards */
  .score-meld-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    gap: 0 !important;
  }
  .score-meld-inner .card-sm { margin-left: -14px !important; }
  .score-meld-inner .card-sm:first-child { margin-left: 0 !important; }
  .score-meld-inner + .score-meld-inner { margin-left: 4px !important; }

  /* Hand cards directly in group: also overlapping */
  .score-hand-group > .card-sm { margin-left: -14px !important; flex-shrink: 0 !important; }
  .score-hand-group > .card-sm:first-child { margin-left: 0 !important; }

  /* Card-sm in scores: compact */
  #screen-scores .card-sm {
    width: 38px !important;
    height: 54px !important;
    padding: 3px 4px !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.3), 1px 0 0 rgba(0,0,0,0.1) !important;
  }
  #screen-scores .card-sm .card-rank {
    font-size: 13px !important;
    line-height: 1 !important;
    margin-bottom: 1px !important;
  }
  #screen-scores .card-sm .card-suit {
    font-size: 11px !important;
    line-height: 1 !important;
  }

  /* ── Toast: reposition above meld zone on mobile game ── */
  .toast:not(.toast--lobby) {
    top: auto !important;
    bottom: 230px !important;
    font-size: 0.78rem !important;
    padding: 7px 16px !important;
    max-width: 88vw !important;
  }
}

/* ══════════════════════════════════════════
   DISCARD POPUP — tema board
══════════════════════════════════════════ */
#discard-popup .popup-content {
  background: #0a1f12 !important;
  background-image: var(--batik) !important;
  border: 3px solid var(--d3-gold) !important;
  box-shadow: 0 8px 0 var(--ink-d), 0 12px 40px rgba(0,0,0,0.6) !important;
  border-radius: 20px !important;
  padding: 28px 28px 24px !important;
  max-width: 380px !important;
  width: calc(100% - 32px) !important;
}

#discard-popup h3 {
  font-family: 'Cinzel', var(--font), serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--d3-gold) !important;
  text-align: center !important;
  margin-bottom: 6px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

#discard-popup p {
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.65) !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}

#discard-popup .discard-preview {
  gap: 12px !important;
  margin-bottom: 24px !important;
  justify-content: center !important;
}

/* Full cards in preview */
#discard-popup .discard-preview .card {
  width: 72px !important;
  height: 100px !important;
  border-radius: 10px !important;
  box-shadow: 0 5px 0 var(--ink-d), 0 8px 20px rgba(0,0,0,0.45) !important;
  font-size: 0.85rem !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
#discard-popup .discard-preview .card .card-corner-tl,
#discard-popup .discard-preview .card .card-corner-br {
  position: absolute !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1 !important;
}
#discard-popup .discard-preview .card .card-corner-tl { top: 5px !important; left: 5px !important; }
#discard-popup .discard-preview .card .card-corner-br { bottom: 5px !important; right: 5px !important; transform: rotate(180deg) !important; }
#discard-popup .discard-preview .card .card-rank { font-size: 13px !important; font-weight: 900 !important; line-height: 1 !important; }
#discard-popup .discard-preview .card .card-corner-tl .card-suit,
#discard-popup .discard-preview .card .card-corner-br .card-suit { font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important; }
#discard-popup .discard-preview .card > .card-suit {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 2em !important;
  display: block !important;
}

#discard-popup .popup-actions {
  gap: 8px !important;
  justify-content: center !important;
}

/* Ambil buttons — coral */
#discard-popup .btn-primary {
  background: var(--coral) !important;
  border: none !important;
  box-shadow: 0 4px 0 var(--coral-d) !important;
  color: #fff !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.78rem !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
}
#discard-popup .btn-primary:hover { filter: brightness(1.1) !important; }
#discard-popup .btn-primary:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--coral-d) !important; }
#discard-popup .btn-primary:disabled {
  background: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
  color: rgba(255,255,255,0.25) !important;
  cursor: not-allowed !important;
}

/* Batal button — ghost */
#discard-popup .btn-outline {
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.55) !important;
  font-family: 'Nunito', var(--font-ui), sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}
#discard-popup .btn-outline:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.8) !important;
}

/* ══════════════════════════════════════════
   CHANGELOG MODAL
══════════════════════════════════════════ */

.lf-version-btn {
  pointer-events: auto;
  background: none;
  border: 1px solid rgba(245,197,24,0.35);
  color: rgba(245,197,24,0.75);
  font: inherit;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lf-version-btn:hover {
  background: rgba(245,197,24,0.12);
  color: #f5c518;
  border-color: rgba(245,197,24,0.6);
}

.chl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.chl-overlay.hidden { display: none; }

/* ============================================================
   AVATAR PICKER
   ============================================================ */

/* Slot avatar sendiri — clickable, ada hint edit */
.slot-avatar-me {
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}
.slot-avatar-me:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(245,197,24,0.55) !important;
}
.slot-avatar-me:active { transform: scale(0.96); }
.slot-avatar-hint {
  position: absolute;
  bottom: -3px; right: -3px;
  font-size: 8px;
  background: var(--ink);
  border-radius: 50%;
  width: 13px; height: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.18);
  pointer-events: none;
  line-height: 1;
}

/* Overlay backdrop */
.avp-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
  animation: avpFadeIn 0.18s ease both;
}
@keyframes avpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal box */
.avp-box {
  background: #1a2a1e;
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  width: 100%; max-width: 340px;
  overflow: hidden;
  animation: avpSlideUp 0.22s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes avpSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.avp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.avp-title {
  font-size: 15px; font-weight: 900; color: var(--d3-gold);
  font-family: 'Nunito', sans-serif; letter-spacing: 0.02em;
}
.avp-close {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,0.08); border: none;
  color: rgba(255,255,255,0.6); font-size: 14px;
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.12s;
}
.avp-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Emoji grid */
.avp-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 14px 14px 10px;
}
.avp-emoji {
  aspect-ratio: 1;
  font-size: 22px;
  background: rgba(255,255,255,0.06);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.12s, transform 0.1s, border-color 0.12s;
  padding: 0;
}
.avp-emoji:hover  { background: rgba(255,255,255,0.14); transform: scale(1.12); }
.avp-emoji:active { transform: scale(0.92); }
.avp-emoji.selected {
  border-color: var(--d3-gold);
  background: rgba(245,197,24,0.18);
  box-shadow: 0 0 0 1px rgba(245,197,24,0.4);
}

/* Footer */
.avp-footer {
  padding: 8px 14px 14px;
  display: flex; justify-content: center;
}
.avp-reset {
  font-size: 11px; color: rgba(255,255,255,0.45);
  background: transparent; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 7px 14px; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-weight: 700;
  transition: color 0.12s, border-color 0.12s;
}
.avp-reset:hover { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.3); }

/* Mobile: fewer columns on narrow screens */
@media (max-width: 360px) {
  .avp-grid { grid-template-columns: repeat(6, 1fr); }
}

.chl-box {
  background: #0f2d14;
  border: 1px solid rgba(245,197,24,0.18);
  border-radius: 16px;
  width: 100%;
  max-width: 680px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}

.chl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.chl-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f5c518;
  letter-spacing: 0.3px;
}
.btn-close-chl {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.btn-close-chl:hover { color: #fff; background: rgba(255,255,255,0.08); }

.chl-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Version list sidebar */
.chl-ver-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
  border-right: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  min-width: 120px;
}
.chl-ver-btn {
  background: none;
  border: 1px solid transparent;
  color: rgba(255,255,255,0.55);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chl-ver-btn:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
}
.chl-ver-btn.active {
  background: rgba(245,197,24,0.1);
  border-color: rgba(245,197,24,0.35);
  color: #f5c518;
}
.chl-ver-badge {
  font-size: 0.62rem;
  font-weight: 700;
  background: #f5c518;
  color: #0a1f0d;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  align-self: flex-start;
}

/* Content area */
.chl-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,197,24,0.3) transparent;
}
.chl-content::-webkit-scrollbar { width: 4px; }
.chl-content::-webkit-scrollbar-thumb { background: rgba(245,197,24,0.3); border-radius: 2px; }

.chl-ver-content.hidden { display: none; }

.chl-ver-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #f5c518;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.chl-date {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255,255,255,0.4);
}

.chl-group {
  margin-bottom: 18px;
}
.chl-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.chl-group ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chl-group li {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.45;
}
.chl-group li strong { color: #fff; }

@media (max-width: 520px) {
  .chl-body { flex-direction: column; }
  .chl-ver-list {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 10px 12px;
    overflow-x: auto;
    min-width: unset;
  }
  .chl-ver-btn { flex-direction: row; align-items: center; white-space: nowrap; }
}

/* ============================================================
   AUTH CHIP — lobby panel
   ============================================================ */
.auth-login-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #ddd;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.auth-login-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}
.auth-login-btn svg { flex-shrink: 0; }

.auth-profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
}
.auth-profile-chip .apc-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #1f6b2e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.auth-profile-chip .apc-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-profile-chip .apc-edit {
  font-size: 0.75rem;
  color: #aaa;
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.auth-profile-chip .apc-edit:hover { color: #fff; border-color: rgba(255,255,255,0.35); }