/* Speltafel layout — phone frame, top bar, opponents, market, own board,
   supply, hand, action bar. Mirrors the approved Wooden mock. */

.device {
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 10px 10px;
  gap: 8px;
  position: relative;
}
.device::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: radial-gradient(140% 120% at 50% 120%, #B85420 0%, transparent 70%);
  z-index: 0; pointer-events: none;
}
.device > * { position: relative; z-index: 1; }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.topbar .spacer { flex: 1; }

/* ── Opponents strip ─────────────────────────────────────── */
.opps { display: flex; gap: 6px; }
.opp {
  flex: 1; min-width: 0;
  background: var(--surface-panel-card);
  border: var(--border-subtle);
  border-left: 4px solid var(--oc, #999);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  display: flex; flex-direction: column; gap: 1px;
  box-shadow: var(--shadow-card);
}
.opp .nm {
  font-size: 10.5px; font-weight: var(--font-weight-bold);
  color: var(--color-brown-deep);
  display: flex; align-items: center; gap: 3px; min-width: 0;
}
.opp .nm-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp .bot {
  font-size: 8px; font-weight: var(--font-weight-bold); color: #fff;
  background: var(--tractor); border-radius: 4px; padding: 0 3px; flex: 0 0 auto;
}
.opp .meta {
  font-size: 9.5px; color: var(--color-brown-muted);
  display: flex; gap: 6px; font-variant-numeric: tabular-nums;
}
.opp.active { outline: 2px solid var(--color-gold); outline-offset: 1px; }

/* ── Central market table ────────────────────────────────── */
.table { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 0; }
.market {
  position: relative;
  background: rgba(91,61,36,.32);
  border: 1px dashed rgba(255,255,255,.45);
  border-radius: 14px;
  padding: 14px 10px 10px;
  display: flex; align-items: flex-end; gap: 8px;
  backdrop-filter: blur(1px);
  min-height: 96px;
}
.phasepill {
  position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
  background: var(--color-brown-warm); color: #FFE9B8;
  border: 1px solid #8a5a2b;
  font-size: 10px; font-weight: var(--font-weight-bold);
  letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  box-shadow: var(--shadow-button);
}
.market-hint {
  font-size: 10px; color: rgba(255,255,255,.85); font-style: italic;
  align-self: center; max-width: 110px; line-height: 1.3;
}

/* draw deck */
.deck {
  width: 62px; height: 90px; border-radius: 9px;
  background: linear-gradient(160deg, var(--card-back) 0%, var(--card-back-deep) 100%);
  border: 2px solid #fff;
  box-shadow: var(--shadow-card), 3px 3px 0 rgba(79,163,181,.5), 6px 6px 0 rgba(79,163,181,.3);
  display: flex; align-items: center; justify-content: center;
  position: relative; flex: 0 0 auto;
}
.deck .sun svg { width: 40px; height: 40px; }
.deck .count {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  background: var(--color-brown-deep); color: #FFE9B8;
  font-size: 9px; font-weight: var(--font-weight-bold);
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Own jaliz board ─────────────────────────────────────── */
.field-wrap { margin-top: auto; }
.field-label { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 4px; }
.field-label .you {
  font-size: 11px; font-weight: var(--font-weight-bold); color: #5a3a1a;
  display: flex; align-items: center; gap: 5px;
}
.field-label .dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.field-label .you-coins {
  background: var(--color-gold); color: #3b2a07;
  font-size: 11px; font-weight: var(--font-weight-heavy);
  padding: 2px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 3px;
}
.field-label .you-coins .i svg { width: 12px; height: 12px; }
.akker {
  border: 4px solid var(--p-green);
  border-radius: 14px;
  padding: 8px;
  background-image: url('../assets/bg-wood.webp');
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-card), inset 0 0 0 2px rgba(0,0,0,.12);
  display: flex; gap: 8px;
}
.jaliz {
  flex: 1; min-width: 0;
  background: rgba(247,231,195,.16);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 10px;
  padding: 6px;
  min-height: 84px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.jaliz .jhead {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9px; font-weight: var(--font-weight-bold);
  color: #FFE9B8; text-shadow: 0 1px 1px rgba(0,0,0,.5); letter-spacing: .03em;
}
.jaliz .crop-stack { flex: 1; display: flex; align-items: center; gap: 5px; }
.jaliz .crop-ic { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.jaliz .crop-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.jaliz .crop-nm { font-size: 10px; font-weight: var(--font-weight-bold); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
.jaliz .crop-ct {
  font-size: 9px; color: #3b2a07; background: var(--color-gold);
  border-radius: 6px; padding: 0 5px; font-weight: var(--font-weight-heavy);
  align-self: flex-start; font-variant-numeric: tabular-nums;
}
.jaliz.empty .crop-stack { align-items: center; justify-content: center; }
.jaliz .empty-hint { font-size: 9px; color: rgba(255,255,255,.7); text-align: center; font-style: italic; }
.jaliz .tokens { position: absolute; right: 5px; bottom: 5px; display: flex; gap: 3px; }
.jaliz .tok {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.jaliz .tok.mest { background: var(--mest); }
.jaliz .tok svg { width: 11px; height: 11px; }
.jaliz.sel { outline: 3px solid var(--color-gold); outline-offset: 1px; cursor: pointer; }

/* ── Supply shop ─────────────────────────────────────────── */
.supply { margin-top: 8px; display: flex; align-items: stretch; gap: 6px; }
.supply .lbl {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 8px; font-weight: var(--font-weight-bold);
  color: #5a3a1a; text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; justify-content: center; opacity: .8;
}
.buy {
  flex: 1;
  background: var(--surface-panel-card);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 5px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: var(--shadow-card);
}
.buy .bic {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.buy .bic svg { width: 13px; height: 13px; }
.buy .bnm { font-size: 8.5px; font-weight: var(--font-weight-bold); color: var(--color-brown-deep); line-height: 1; }
.buy .bprice {
  font-size: 8.5px; color: #3b2a07; background: var(--color-gold);
  border-radius: 5px; padding: 0 5px; font-weight: var(--font-weight-heavy);
  font-variant-numeric: tabular-nums;
}
.buy.disabled { opacity: .45; }
.buy.arming { outline: 2px solid var(--color-gold); outline-offset: 1px; }

/* ── Hand ────────────────────────────────────────────────── */
.hand-wrap { margin-top: 8px; }
.hand-label {
  font-size: 9px; font-weight: var(--font-weight-bold); color: #5a3a1a;
  text-transform: uppercase; letter-spacing: .05em; margin: 0 2px 3px;
}
.hand { display: flex; justify-content: center; padding-left: 14px; min-height: 70px; }
.front-flag { text-align: center; font-size: 8.5px; color: #5a3a1a; font-weight: var(--font-weight-bold); margin-top: 2px; }
.empty-hand { font-size: 11px; color: #5a3a1a; font-style: italic; align-self: center; }

/* ── Action bar ──────────────────────────────────────────── */
.actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.actions .btn-primary { flex: 1; }