:root {
  --pink-bg: #f0a6c8;
  --pink-table: #efa9c4;
  --field: #e58cb4;
  --field-line: #ffffff;
  --ink: #3b2333;
  --card: #fff7fb;
  --shadow: rgba(120, 40, 80, 0.25);

  /* one card size everywhere: hand, fields, IN PLAY (5:7 poker ratio) */
  --card-w: 74px;
  --card-h: 104px;

  --c-red: #e8554e;
  --c-blue: #4e8fe8;
  --c-green: #5bbf6a;
  --c-yellow: #f2c14e;
  --c-purple: #9b6dd6;
  --c-orange: #f08a3c;
  --c-pink: #ec6fa9;
  --c-teal: #3cc6c0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Baloo 2", "Trebuchet MS", "Comic Sans MS", system-ui, sans-serif;
  color: var(--ink);
  background: var(--pink-bg);
  -webkit-font-smoothing: antialiased;
}

#app { height: 100%; display: flex; flex-direction: column; }

h1, h2, h3 { font-weight: 800; letter-spacing: 0.5px; }

button {
  font-family: inherit;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  padding: 10px 18px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--shadow);
  transition: transform 0.06s ease, box-shadow 0.06s ease, opacity 0.1s;
}
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }
button.primary { background: #fff; color: #c8347e; }
button.danger { background: #ffe1ec; color: #c8347e; }

/* ---------- Setup screen ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(180, 70, 120, 0.35); backdrop-filter: blur(3px);
}
.panel {
  background: #fff7fb; border-radius: 26px; padding: 28px 32px;
  box-shadow: 0 14px 40px var(--shadow); width: min(560px, 92vw);
  max-height: 90vh; overflow: auto;
}
.panel h1 { margin: 0 0 4px; color: #c8347e; font-size: 30px; }
.panel .sub { color: #9a5a7a; margin: 0 0 18px; }

.seat-row {
  display: flex; gap: 10px; align-items: center;
  background: #fdeaf3; border-radius: 16px; padding: 10px 12px; margin-bottom: 10px;
}
.seat-row input[type=text] {
  flex: 1; border: 2px solid #f2c0d8; border-radius: 12px; padding: 8px 10px;
  font-family: inherit; font-size: 15px;
}
.seat-row select {
  border: 2px solid #f2c0d8; border-radius: 12px; padding: 8px; font-family: inherit; font-size: 15px;
}
.count-row { display: flex; gap: 8px; margin-bottom: 16px; }
.count-row button { flex: 1; }
.count-row button.sel { background: #c8347e; color: #fff; }

/* ---------- Table ---------- */
.table {
  position: relative; flex: 1; min-height: 0;
  background:
    radial-gradient(120% 100% at 50% 0%, #f6b7d3 0%, var(--pink-table) 55%, #e892b8 100%);
  overflow: hidden;
}

/* the field stays put; the nameplate floats BESIDE it (absolute, out of flow) so
   the score zone never shifts the field. Right for South/North/West, left for East. */
.slot { position: absolute; width: auto; }
.slot .field-wrap { display: flex; flex-direction: column; gap: 6px; }
.slot .nameplate { position: absolute; top: 50%; transform: translateY(-50%); }
.slot-bottom .nameplate, .slot-top .nameplate, .slot-left .nameplate, .slot-tl .nameplate { left: 100%; margin-left: 12px; } /* right of field */
.slot-right .nameplate, .slot-tr .nameplate { right: 100%; margin-right: 12px; }                                            /* left of field (East) */
.slot-bottom { left: 50%; bottom: 8px; transform: translateX(-50%); }
.slot-top    { left: 50%; top: 8px; transform: translateX(-50%); }
.slot-left   { left: 14px; top: 50%; transform: translateY(-50%); }
.slot-right  { right: 14px; top: 50%; transform: translateY(-50%); }
.slot-tl     { left: 24px; top: 14px; }
.slot-tr     { right: 24px; top: 14px; }

/* two lines: (dot, name, model) then (score, chaos malus) */
.nameplate {
  display: inline-flex; flex-direction: column; gap: 3px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(150,40,90,.4); font-size: 15px;
}
.nameplate .np-line { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.nameplate .np-name { white-space: nowrap; }
.nameplate .score {
  background: #fff; color: #c8347e; border-radius: 999px; padding: 1px 10px; font-size: 14px;
}
.nameplate .malus {
  background: #ffd9e2; color: #b3173b; border-radius: 999px; padding: 1px 9px; font-size: 13px;
  text-shadow: none; font-weight: 800;
}
.nameplate .badge { font-size: 13px; background: rgba(255,255,255,.85); color:#b03a72; border-radius:999px; padding:1px 8px;}
.nameplate .engine {
  font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: lowercase;
  background: rgba(255,255,255,.22); color: #fff; border-radius: 999px; padding: 1px 7px;
  text-shadow: none; opacity: .9;
}

.field {
  height: 244px;                 /* two rows of card-sized sheep, then grow wide */
  /* wide enough for two columns (a 2x2 flock) so it doesn't resize on the 3rd sheep */
  width: fit-content; min-width: 348px; max-width: 48vw;
  /* the seat colour lives in the tinted fill (set via --seat in JS); the border
     stays discreet for everyone — the current player's turn is shown by the
     thick yellow glow below. */
  background: color-mix(in srgb, var(--seat, transparent) 16%, var(--field));
  border: 3px dashed rgba(255,255,255,.4);
  border-radius: 22px;
  padding: 10px 12px;
  display: flex; flex-flow: column wrap; gap: 8px; align-content: flex-start;
  position: relative;
}
.field .field-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); font-weight: 900; letter-spacing: 2px; font-size: 18px;
  pointer-events: none; text-align: center; text-transform: uppercase;
}
/* whose turn it is — a thick yellow ring + glow drawn with OUTLINE (not border),
   so the field size and the sheep layout never shift when the turn changes */
.field.current {
  border-color: transparent;
  outline: 5px solid #ffe14d;
  box-shadow: 0 0 26px 7px rgba(255,225,77,.7);
  animation: fieldglow 1.3s ease-in-out infinite alternate;
}
@keyframes fieldglow { from { box-shadow: 0 0 16px 4px rgba(255,225,77,.5); } to { box-shadow: 0 0 32px 9px rgba(255,225,77,.95); } }
.field.targetable { border-color: #ffe14d; box-shadow: 0 0 0 4px rgba(255,225,77,.4); cursor: pointer; animation: none; }

/* materialised target of an action/chaos card: a pulsing crosshair on the aim */
.reticle {
  position: absolute; left: 50%; top: 50%; z-index: 7; pointer-events: none;
  filter: drop-shadow(0 2px 5px var(--shadow));
  animation: reticle-pulse .85s ease-in-out infinite;
}
.sheep > .reticle { font-size: 40px; }
.field > .reticle { font-size: 64px; }
@keyframes reticle-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.9); opacity: .85; }
  50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

.oppo-hand { display: flex; align-items: center; gap: 4px; color:#fff; font-weight:700; font-size:13px;}
.cardback {
  width: 22px; height: 32px; border-radius: 5px;
  background: repeating-linear-gradient(45deg, #f6b8d4 0 6px, #efa6c8 6px 12px);
  border: 2px solid #fff; box-shadow: 0 1px 2px var(--shadow);
}

/* center piles */
.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 26px; z-index: 3; }
.pile { text-align: center; color: #fff; font-weight: 800; }
.pile .label { letter-spacing: 2px; font-size: 13px; margin-bottom: 6px; text-shadow: 0 1px 2px rgba(150,40,90,.4); }
.pile .stack {
  width: var(--card-w); height: var(--card-h); border-radius: 12px;
  border: 3px dashed rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.pile .stack.draw { background: repeating-linear-gradient(45deg, #f6b8d4 0 8px, #efa6c8 8px 16px); border-style: solid; }
.pile .stack .count { background: rgba(255,255,255,.9); color:#c8347e; border-radius:999px; padding:0 8px; font-size:14px;}

/* ---------- Sheep (real cards) ---------- */
.sheep { position: relative; border-radius: 12px; }
.sheep .sheep-cards { display: flex; gap: 3px; }
.sheep .mini { width: var(--card-w); height: var(--card-h); border-radius: 9px; box-shadow: 0 2px 5px var(--shadow); display:block; cursor: zoom-in; }
.sheep .mini.flip { transform: rotate(180deg); }
.sheep .pts { position: absolute; right: -6px; top: -8px; background:#fff; color:#c8347e; border-radius:999px; font-size:12px; font-weight:800; padding:1px 7px; box-shadow:0 2px 4px var(--shadow); z-index:2;}
.sheep .mod { position:absolute; left:-6px; top:-8px; font-size:16px; background:#fff; border-radius:8px; padding:0 3px; box-shadow:0 2px 4px var(--shadow); z-index:2;}
.sheep.targetable .mini { outline: 3px solid #ffe14d; cursor: pointer; }
.sheep.targetable { cursor: pointer; filter: drop-shadow(0 0 6px #ffe14d); }
/* sheep with only SOME parts clickable (body-swap / halve): glow the sheep, and
   persistently outline exactly the clickable parts so the choice is obvious. */
.sheep.has-part-targets { filter: drop-shadow(0 0 6px #ffe14d); }
.sheep .mini.part-clickable { cursor: pointer; outline: 3px solid #ffe14d; }
.sheep .mini.part-clickable:hover { transform: translateY(-3px); outline-width: 4px; }

/* prohibition sign for wheat/wolf protection */
/* small, clean "protected from wolf/wheat" chip — never intercepts clicks */
.prot-sign {
  position: absolute; top: -9px; right: -7px; width: 30px; height: 30px; z-index: 6;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: rgba(255,255,255,.96); border-radius: 50%;
  box-shadow: 0 0 0 2px #e8332f, 0 2px 5px var(--shadow);
}
.prot-sign + .prot-sign { right: 26px; }
.prot-sign .ico { font-size: 16px; line-height: 1; }
.prot-sign .ban { display: none; } /* drawn as a CSS slash instead of the 🚫 emoji */
.prot-sign::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 132%; height: 3px; background: #e8332f; border-radius: 2px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------- Hand ---------- */
.handbar {
  background: #d77ba6; padding: 10px 14px 14px;
  box-shadow: 0 -6px 18px rgba(120,40,80,.25); z-index: 5;
  min-height: 178px; /* keep the card zone from collapsing on bot turns */
}
.hand-actions {
  display: flex; gap: 10px; align-items: center; justify-content: center; margin-bottom: 8px;
  flex-wrap: wrap; min-height: 46px; /* reserve the button height so the hint state
                                        doesn't shrink the bar and shift the hand */
  position: relative; z-index: 40; /* keep buttons above enlarged selected cards */
}
.hand-actions .hint {
  font-weight: 700; color: #9a3a6e; background: rgba(255,255,255,.9);
  padding: 5px 12px; border-radius: 11px; box-shadow: 0 2px 6px var(--shadow);
}
.hand { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.card {
  width: var(--card-w); height: var(--card-h); border-radius: 10px; position: relative;
  cursor: pointer; user-select: none; transition: transform .08s;
  border: 0; box-shadow: 0 3px 6px var(--shadow);
}
.card .cardimg { width: 100%; height: 100%; border-radius: 10px; display: block; }
/* no enlarging — selection just lifts the card higher */
.card:hover { transform: translateY(-10px); }
.card.sel { transform: translateY(-44px); z-index: 10; box-shadow: 0 12px 22px var(--shadow); }

/* ---------- Log ---------- */
.log {
  /* pinned to the VIEWPORT bottom-right corner (over the empty right side of the
     hand bar), not the table — so it sits in the free corner space. */
  position: fixed; right: 10px; bottom: 10px; width: 320px; max-width: 34vw; max-height: 30vh; overflow: auto;
  background: rgba(255,255,255,.85); border-radius: 14px; padding: 8px 10px; font-size: 12px; color:#6a3a55;
  box-shadow: 0 4px 12px var(--shadow); z-index: 6;
}
.log .line { padding: 3px 0; border-bottom: 1px solid rgba(200,52,126,.12); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.log .line > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.log .line:first-child { font-weight: 700; }
.log .line:last-child { border: none; }
.log .ldot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.log .licon { font-size: 13px; flex: 0 0 auto; }
.nameplate .pdot { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }

/* ---------- Recover (compose from discard) ---------- */
.recover-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 12px; }
.recover-opt {
  position: relative; display: flex; gap: 4px; padding: 8px; border-radius: 14px;
  background: #fdeaf3; cursor: pointer; transition: transform .08s, box-shadow .08s;
}
.recover-opt:hover { transform: translateY(-3px); box-shadow: 0 8px 16px var(--shadow); }
.recover-opt img { width: 56px; height: 78px; border-radius: 8px; box-shadow: 0 2px 5px var(--shadow); }
.recover-opt .ro-mod { position: absolute; left: 2px; top: 2px; font-size: 16px; background: #fff; border-radius: 6px; padding: 0 3px; }

/* ---------- Coin modal ---------- */
.coin-choices { display:flex; gap:12px; margin: 16px 0; }
.coin-choices button { flex:1; font-size:16px; padding:16px; }
.coin-choices button.sel { background:#c8347e; color:#fff; }
.coin {
  width: 120px; height: 120px; border-radius: 50%; margin: 10px auto;
  background: radial-gradient(circle at 35% 30%, #fff, #f3aac8);
  display:flex; align-items:center; justify-content:center; font-size: 54px;
  box-shadow: 0 6px 14px var(--shadow);
}
.coin.spin { animation: spin .6s ease-in-out 3; }
@keyframes spin { 0%{transform:rotateY(0)} 100%{transform:rotateY(1080deg)} }
.reflip-row { display:flex; align-items:center; gap:8px; justify-content:center; margin:10px 0; color:#9a5a7a; font-weight:700;}

/* ---------- End screen ---------- */
.scoreboard { list-style:none; padding:0; margin: 14px 0; }
.scoreboard li { display:flex; justify-content:space-between; padding:8px 12px; border-radius:12px; margin-bottom:6px; background:#fdeaf3; font-weight:700;}
.scoreboard li.win { background:#ffe14d; }
.toast {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 60;
  background:#fff; color:#c8347e; font-weight:800; padding:10px 18px; border-radius:14px;
  box-shadow:0 6px 16px var(--shadow); opacity:0; transition:opacity .2s; pointer-events:none;
}
.toast.show { opacity: 1; }
.center-msg { text-align:center; color:#fff; font-weight:800; text-shadow:0 1px 3px rgba(150,40,90,.5); }

/* ---------- Reserved central staging zone ---------- */
.pile.stage .stage-label { opacity: .85; }
.stage-slot {
  width: 264px; height: 124px; border-radius: 16px;
  border: 3px dashed rgba(255,255,255,.55);
  background: rgba(255,255,255,.10);
}
/* full-size card preview shown while hovering a card or a sheep part */
#card-zoom {
  position: fixed; width: 230px; height: auto; z-index: 70; pointer-events: none;
  border-radius: 16px; box-shadow: 0 18px 50px var(--shadow);
}
/* the laid card(s), chyron and coin live above the modals */
.fly-face, .fly-back {
  position: fixed; left: 0; top: 0; width: var(--card-w); height: var(--card-h); border-radius: 9px;
  z-index: 60; pointer-events: none; box-shadow: 0 8px 20px var(--shadow); will-change: transform, opacity;
}
.fly-back { background: repeating-linear-gradient(45deg, #f6b8d4 0 8px, #efa6c8 8px 16px); border: 2px solid #fff; }
.stage-cap {
  position: fixed; transform: translateX(-50%); z-index: 61; pointer-events: none; text-align: center;
  max-width: 320px; font-weight: 800; color: #c8347e; font-size: 15px;
  background: rgba(255,247,251,.96); padding: 6px 14px; border-radius: 12px; box-shadow: 0 6px 16px var(--shadow);
}
.stage-coin {
  position: fixed; transform: translate(-50%, -100%); z-index: 62; pointer-events: none; font-size: 40px;
  filter: drop-shadow(0 3px 6px var(--shadow));
}
.stage-coin.spin { animation: spin .6s ease-in-out infinite; }
.bleat-float {
  position: fixed; z-index: 60; pointer-events: none; font-weight: 900; color: #c8347e; font-size: 34px;
  text-shadow: 0 2px 0 #fff, 0 4px 10px var(--shadow);
}

/* ---------- Animation speed control ---------- */
.speed-ctl { position: absolute; left: 12px; bottom: 12px; z-index: 6; }
.speed-ctl select {
  font-family: inherit; font-weight: 700; font-size: 12px; color: #9a3a6e;
  border: 2px solid rgba(255,255,255,.7); border-radius: 10px; padding: 4px 8px;
  background: rgba(255,255,255,.85); cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  /* motion is suppressed in JS (cards cut to place); keep the readable dwell */
  .stage-coin.spin { animation: none; }
}

/* ---------- Center event animation (opponent moves) ---------- */
.fx-layer { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ev {
  background: rgba(255, 247, 251, 0.97); border-radius: 26px; padding: 22px 30px;
  box-shadow: 0 18px 55px var(--shadow); text-align: center; transform: scale(0.6); opacity: 0;
  max-width: 80vw;
}
.ev.in { animation: evpop 0.32s cubic-bezier(.2,1.3,.5,1) forwards; }
.ev.out { animation: evfade 0.32s ease forwards; }
@keyframes evpop { to { transform: scale(1); opacity: 1; } }
@keyframes evfade { to { transform: scale(1.06); opacity: 0; } }
.ev .who { font-weight: 800; color: #c8347e; font-size: 22px; }
.ev .txt { color: #6a3a55; font-weight: 700; margin-top: 6px; font-size: 15px; }
.ev .cards { display: flex; gap: 12px; justify-content: center; margin-top: 14px; }
.ev .cards img { width: 120px; height: 168px; border-radius: 12px; box-shadow: 0 6px 14px var(--shadow); animation: dealin 0.4s ease backwards; }
@keyframes dealin { from { transform: translateY(30px) rotate(-6deg); opacity: 0; } }

/* played-card / bleat animation, anchored above a player's field */
.field-ev {
  position: fixed; z-index: 42; pointer-events: none; text-align: center;
  background: transparent;
}
.field-ev .fe-cards { display: flex; gap: 8px; justify-content: center; }
.field-ev .fe-cards img { width: 92px; height: 129px; border-radius: 10px; box-shadow: 0 6px 16px var(--shadow); }
.field-ev .fe-txt {
  font-weight: 800; color: #c8347e; font-size: 13px; margin-top: 6px; max-width: 240px;
  text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.8);
}
.field-ev.bleat-ev {
  background: transparent; box-shadow: none; padding: 0;
  font-weight: 900; color: #c8347e; font-size: 30px; text-shadow: 0 2px 0 #fff, 0 4px 10px var(--shadow);
}

/* bleat (end of turn) */
.bleat {
  font-weight: 900; color: #c8347e; text-shadow: 0 2px 0 #fff, 0 4px 10px var(--shadow);
  font-size: 46px; transform: scale(0.4) rotate(-8deg); opacity: 0;
}
.bleat.go { animation: bleatpop 0.95s ease forwards; }
@keyframes bleatpop {
  20% { transform: scale(1.1) rotate(-4deg); opacity: 1; }
  70% { transform: scale(1) rotate(-4deg); opacity: 1; }
  100% { transform: scale(1.05) rotate(-2deg); opacity: 0; }
}

/* a sheep's cards flying field-to-field (wheat) or field-to-discard (wolf) */
.fly-sheepcard {
  position: fixed; width: 52px; height: 73px; border-radius: 8px; z-index: 44; pointer-events: none;
  box-shadow: 0 6px 16px var(--shadow);
}

/* drawn-card fly animation (all players) */
.fly-card {
  position: fixed; width: 26px; height: 37px; border-radius: 5px; z-index: 45; pointer-events: none;
  background: repeating-linear-gradient(45deg, #f6b8d4 0 6px, #efa6c8 6px 12px);
  border: 2px solid #fff; box-shadow: 0 2px 5px var(--shadow);
}