:root {
  --dev-sidebar-w: 350px;
  --dev-topbar-h: 92px;
  --dev-hand-card-w: 102px;
  --dev-hand-card-h: 145px;
  --dev-hand-y: -29px;
  --dev-hand-overlap: -24px;
  --dev-hand-slot-h: 190px;
  --dev-table-card-w: 102px;
  --dev-table-card-h: 145px;
  --dev-table-x: 0px;
  --dev-table-y: 0px;
  --dev-table-zone-w: 760px;
  --dev-table-gap-x: 20px;
  --dev-table-gap-y: 16px;
  --dev-defense-x: 21px;
  --dev-defense-y: 22px;
  --dev-seat-top-y: 34px;
  --dev-seat-side-y: 50px;
  --dev-seat-left-x: 220px;
  --dev-seat-right-x: 220px;
  --dev-seat-w: 246px;
  --dev-bot-hand-left-x: 0px;
  --dev-bot-hand-right-x: 0px;
  --dev-bot-hand-top-x: 0px;
  --dev-bot-back-w: 102px;
  --dev-bot-back-h: 145px;
  --dev-bot-back-overlap: -48px;
  --dev-stack-card-w: 102px;
  --dev-stack-card-h: 145px;
  --dev-talon-x: 300px;
  --dev-talon-y: 14px;
  --dev-discard-x: 300px;
  --dev-discard-y: 14px;
  --dev-action-w: 680px;
  --dev-action-min-h: 108px;
  --dev-action-space-h: 200px;
  --dev-action-x: 0px;
  --dev-action-y: 0px;
  --dev-brand-size: 62px;
  --dev-brand-x: 0px;
  --dev-brand-y: 0px;
}

/* Dureń 1.0 desktop geometry. DEV may override these values only when explicitly enabled. */
@media (min-width: 1181px) {
  .game-layout {
    grid-template-columns: var(--dev-sidebar-w) minmax(0,1fr) !important;
  }
  .topbar {
    min-height: var(--dev-topbar-h) !important;
  }

  .human-hand-slot {
    flex-basis: var(--dev-hand-slot-h) !important;
    transform: translateY(var(--dev-hand-y)) !important;
  }
  .human-hand .card {
    width: var(--dev-hand-card-w) !important;
    height: var(--dev-hand-card-h) !important;
    margin-left: var(--dev-hand-overlap) !important;
  }
  .human-hand .card:first-child {
    margin-left: 0 !important;
  }

  .table-cards {
    width: min(var(--dev-table-zone-w), 90%) !important;
    gap: var(--dev-table-gap-y) var(--dev-table-gap-x) !important;
    transform: translate(-50%,-50%) translate(var(--dev-table-x),var(--dev-table-y)) !important;
  }
  .table-pair,
  .table-pair .card {
    width: var(--dev-table-card-w) !important;
    height: var(--dev-table-card-h) !important;
  }
  .table-pair .card.defense-card {
    transform: translate(var(--dev-defense-x),var(--dev-defense-y)) rotate(7deg) !important;
  }

  .bot-seat {
    width: var(--dev-seat-w) !important;
  }
  .bot-seat.slot-top {
    top: var(--dev-seat-top-y) !important;
  }
  .bot-seat.slot-left {
    left: var(--dev-seat-left-x) !important;
    top: var(--dev-seat-side-y) !important;
  }
  .bot-seat.slot-right {
    right: var(--dev-seat-right-x) !important;
    top: var(--dev-seat-side-y) !important;
  }
  .bot-seat.slot-left .bot-hand {
    transform: translateX(var(--dev-bot-hand-left-x)) !important;
  }
  .bot-seat.slot-right .bot-hand {
    transform: translateX(var(--dev-bot-hand-right-x)) !important;
  }
  .bot-seat.slot-top .bot-hand {
    transform: translateX(var(--dev-bot-hand-top-x)) !important;
  }

  .card-back,
  .trump-card .card,
  .talon-empty {
    width: var(--dev-stack-card-w) !important;
    height: var(--dev-stack-card-h) !important;
  }
  .talon-stack,
  .discard-stack {
    height: var(--dev-stack-card-h) !important;
  }

  /* Opponent cards use the same 102×145 baseline as the rest of the table.
     When a hand becomes large, only the overlap tightens automatically so the
     fan stays readable, centered and inside both side edges. */
  .bot-hand {
    --bot-effective-overlap: var(--dev-bot-back-overlap);
  }
  .bot-hand:has(.card-back:nth-child(8)) {
    --bot-effective-overlap: min(var(--dev-bot-back-overlap), -64px);
  }
  .bot-hand:has(.card-back:nth-child(10)) {
    --bot-effective-overlap: min(var(--dev-bot-back-overlap), -70px);
  }
  .bot-hand:has(.card-back:nth-child(12)) {
    --bot-effective-overlap: min(var(--dev-bot-back-overlap), -76px);
  }
  .bot-hand .card-back {
    width: var(--dev-bot-back-w) !important;
    height: var(--dev-bot-back-h) !important;
    margin-right: var(--bot-effective-overlap) !important;
  }
  .bot-hand .card-back:last-child {
    margin-right: 0 !important;
  }

  .talon-zone {
    left: var(--dev-talon-x) !important;
    bottom: var(--dev-talon-y) !important;
  }
  .discard-zone {
    right: var(--dev-discard-x) !important;
    bottom: var(--dev-discard-y) !important;
  }

  .action-bar {
    flex-basis: var(--dev-action-space-h) !important;
    width: min(var(--dev-action-w), 90%) !important;
    min-height: var(--dev-action-min-h) !important;
    transform: translate(var(--dev-action-x),var(--dev-action-y)) !important;
  }
  .center-brand {
    font-size: var(--dev-brand-size) !important;
    transform: translate(-50%,-50%) translate(var(--dev-brand-x),var(--dev-brand-y)) !important;
  }
}

/* ---------- DEV trigger ---------- */
.dev-layout-button {
  position: relative;
  color: #f0d47e !important;
  border-color: rgba(216,179,95,.30) !important;
  background: rgba(216,179,95,.07) !important;
  font-weight: 950;
  letter-spacing: .08em;
}
.dev-layout-button::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #67d391;
  box-shadow: 0 0 8px rgba(103,211,145,.7);
}
.dev-layout-button[aria-expanded='true'] {
  color: #211b0c !important;
  background: linear-gradient(180deg,#e4c86f,#b88d37) !important;
  border-color: transparent !important;
}

/* ---------- DEV non-modal popup ---------- */
.dev-layout-popup {
  position: fixed;
  z-index: 150;
  top: 110px;
  right: 16px;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 126px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(216,179,95,.34);
  border-radius: 16px;
  color: #edf5ef;
  background:
    radial-gradient(circle at 100% 0,rgba(216,179,95,.10),transparent 36%),
    linear-gradient(160deg,rgba(22,35,29,.985),rgba(7,14,10,.99));
  box-shadow: 0 20px 60px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.06);
}
.dev-layout-popup.hidden { display: none !important; }
.dev-layout-popup.is-dragging {
  user-select: none;
  box-shadow: 0 28px 78px rgba(0,0,0,.62), 0 0 0 1px rgba(216,179,95,.24);
}
.dev-layout-popup-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 10px 10px 10px 14px;
  cursor: grab;
  touch-action: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
}
.dev-layout-popup.is-dragging .dev-layout-popup-head { cursor: grabbing; }
.dev-layout-popup-head > div { min-width: 0; }
.dev-layout-popup-head strong {
  display: block;
  color: #f0d47e;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dev-layout-popup-head small {
  display: block;
  margin-top: 3px;
  color: #85988d;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#dev-layout-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  color: #c9d5ce;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
#dev-layout-close:hover { background: rgba(255,255,255,.08); color: #fff; }
.dev-layout-popup-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: #b88d37 rgba(5,13,9,.55);
}
.dev-layout-popup-body::-webkit-scrollbar { width: 9px; }
.dev-layout-popup-body::-webkit-scrollbar-track { background: rgba(4,12,8,.45); }
.dev-layout-popup-body::-webkit-scrollbar-thumb {
  border: 2px solid rgba(6,14,10,.78);
  border-radius: 999px;
  background: linear-gradient(180deg,#d8ba62,#9b702b);
}
.dev-layout-note {
  margin: 0 0 12px;
  color: #9fb0a6;
  font-size: 10px;
  line-height: 1.45;
}
.dev-layout-groups { display: grid; gap: 10px; }
.dev-layout-group {
  padding: 11px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  background: rgba(3,10,7,.30);
}
.dev-layout-group h4 {
  margin: 0 0 8px;
  color: #d8bf76;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.dev-layout-control {
  display: grid;
  grid-template-columns: minmax(135px,1fr) minmax(115px,1.25fr) 68px 28px;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  border-top: 1px solid rgba(255,255,255,.045);
}
.dev-layout-control:first-of-type { border-top: 0; }
.dev-layout-control label {
  color: #d4dfd8;
  font-size: 10px;
  font-weight: 750;
}
.dev-layout-control input[type='range'] {
  width: 100%;
  accent-color: #d7b45e;
}
.dev-layout-control input[type='number'] {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  color: #edf5ef;
  background: #101c16;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.dev-layout-reset-one {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(216,179,95,.20);
  border-radius: 7px;
  color: #d9c27c;
  background: rgba(216,179,95,.05);
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}
.dev-layout-reset-one:hover {
  color: #20190a;
  border-color: transparent;
  background: #d8b85e;
}
.dev-layout-json {
  width: 100%;
  min-height: 104px;
  margin-top: 10px;
  resize: vertical;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  color: #dce8e0;
  background: #08110d;
  font: 9px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.dev-layout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
.dev-layout-actions button {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #edf5ef;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  font-size: 9px;
  font-weight: 850;
}
.dev-layout-actions button:hover { background: rgba(255,255,255,.09); }
.dev-layout-actions .dev-primary {
  color: #221b09;
  border-color: transparent;
  background: linear-gradient(#e5cb74,#b98c35);
}
.dev-layout-actions .dev-danger {
  color: #ffb3b3;
  border-color: rgba(255,110,110,.25);
  background: rgba(111,22,22,.18);
}
.dev-layout-status {
  display: block;
  min-height: 16px;
  margin-top: 7px;
  color: #d7c17f;
  font-size: 9px;
}
.dev-layout-status[data-kind='error'] { color: #ff9f9f; }

@media (max-width: 1180px) {
  #dev-layout-button { display: none !important; }
  #dev-layout-popup { display: none !important; }
}

@media (min-width: 1181px) and (max-width: 1320px) {
  .dev-layout-popup { width: min(460px, calc(100vw - 24px)); right: 12px; }
  .dev-layout-control { grid-template-columns: minmax(0,1fr) 66px 28px; }
  .dev-layout-control label { grid-column: 1 / -1; }
}