* { box-sizing: border-box; }
:root {
  --bg-felt: #0f3a24;
  --bg-felt-dark: #0a2a19;
  --panel: #24190e;
  --panel-raised: #3a2814;
  --border-wood: #5a3d1a;
  --border-wood-light: #8a6030;
  --parchment: #e8d9a8;
  --parchment-dark: #c4b084;
  --gold: #d4a545;
  --gold-light: #f0c870;
  --ink: #2a1a0c;
  --text: #ece3c9;
  --text-dim: #b8a87c;
}

/* Bruit / parchemin : SVG inline */
html, body { height: 100%; }
body {
  font-family: 'IM Fell DW Pica', Georgia, serif;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at center, #1a4a30 0%, #081e12 100%),
    #081e12;
  background-attachment: fixed;
  color: var(--text);
  margin: 0;
  padding: 1em;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: .04em;
  color: var(--gold-light);
}

/* Panneaux = planches en bois */
.panel-wood,
header,
#topline,
#community,
#message,
#controls,
#mapSection,
#costsPanel,
#log,
#playersPanel {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='40'><filter id='w'><feTurbulence baseFrequency='0.02 0.6' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .10 0'/></filter><rect width='120' height='40' filter='url(%23w)'/></svg>"),
    linear-gradient(180deg, #4a3420 0%, #2a1c0e 100%);
  border: 3px solid #3a2612;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 2px rgba(120,80,30,.5),
    inset 0 2px 0 rgba(255,220,160,.12),
    inset 0 -3px 6px rgba(0,0,0,.4),
    0 3px 10px rgba(0,0,0,.5);
  position: relative;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
  padding: .7em 1.2em;
}
header h1 {
  margin: 0;
  font-size: 1.6em;
  text-shadow: 0 2px 3px rgba(0,0,0,.8), 0 0 6px rgba(212,165,69,.2);
}
header a {
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 1px dotted var(--gold);
  font-family: 'Cinzel', serif;
  font-size: .9em;
}
header a:hover { color: var(--gold-light); }

/* LOGIN */
.login-page { display: flex; align-items: center; justify-content: center; }
.login-box {
  max-width: 400px;
  width: 100%;
  margin: 4em auto;
  padding: 2em;
}
.login-box h1 { text-align: center; margin: 0 0 .7em 0; }
.login-box form { display: flex; flex-direction: column; gap: .9em; }
.login-box label { display: flex; flex-direction: column; gap: .3em; font-size: .95em; color: var(--parchment); }
.login-box input {
  padding: .6em;
  font-size: 1em;
  border: 1.5px solid var(--border-wood-light);
  border-radius: 5px;
  background: #1e2a18;
  color: var(--text);
  font-family: 'Cinzel', serif;
}
.login-box button {
  padding: .7em;
  font-size: 1.05em;
  cursor: pointer;
  background: linear-gradient(180deg, #b08a3a, #6a4a14);
  color: var(--parchment);
  border: 1.5px solid #8a6030;
  border-radius: 5px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(0,0,0,.5);
}
.login-box button:hover { filter: brightness(1.15); }
.err { color: #f88; text-align: center; min-height: 1.2em; }

/* ==== LAYOUT PRINCIPAL ==== */
#table {
  display: grid;
  grid-template-columns: minmax(420px, 480px) minmax(0, 1fr);
  gap: 1em;
  max-width: 1500px;
  margin: 0 auto;
}
#leftArea, #rightArea { display: flex; flex-direction: column; gap: .8em; min-width: 0; }

#playersPanel { padding: .8em; }
#playersPanel h3 {
  margin: 0 0 .6em 0;
  text-align: center;
  font-size: 1.05em;
  border-bottom: 1px dashed var(--border-wood-light);
  padding-bottom: .4em;
}
#players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .7em;
}

#myHand {
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: .4em;
}
#myHand .label {
  color: var(--text-dim);
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#community .label {
  color: var(--text-dim);
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .4em;
}
.big-cards {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-height: 120px;
}
.big-cards .card { width: 72px; height: 104px; margin: 0; }
.big-cards .card .card-suit { font-size: 2.8em; line-height: 104px; }
.big-cards .card .card-corner { font-size: .9em; padding: 4px 6px; }
.empty-slot {
  font-style: italic;
  color: var(--text-dim);
  padding: 0 .5em;
}

/* ==== TOPLINE ==== */
#topline {
  display: flex;
  gap: 2em;
  padding: .7em 1.2em;
  font-size: 1em;
  color: var(--parchment);
}
#topline span { color: var(--gold-light); font-weight: bold; font-family: 'Cinzel', serif; }

/* ==== COMMUNITY ==== */
#community {
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: .3em;
}

/* ==== CARTES (skeuomorphes) ==== */
.card {
  display: inline-block;
  position: relative;
  background: linear-gradient(180deg, #fff, #f0ede0);
  color: #000;
  width: 46px;
  height: 66px;
  border-radius: 5px;
  margin: 0 3px;
  font-family: Georgia, serif;
  font-weight: 700;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.1);
  text-align: center;
}
.card .card-corner {
  position: absolute;
  font-size: .72em;
  line-height: 1em;
  padding: 3px 4px;
}
.card .card-corner.tl { top: 2px; left: 3px; }
.card .card-corner.br { bottom: 2px; right: 3px; transform: rotate(180deg); }
.card .card-suit {
  font-size: 1.9em;
  line-height: 66px;
  display: block;
}
.card.red { color: #b00; }
.card.back {
  background:
    repeating-linear-gradient(45deg, #4a3a66 0 6px, #3a2a50 6px 12px),
    #4a3a66;
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 0 0 3px #e8d9a8, inset 0 0 0 4px #4a3a66;
}
.hole-cards { display: flex; gap: 3px; margin-top: .4em; }
.hole-cards .card { width: 38px; height: 54px; margin: 0 2px; }
.hole-cards .card .card-suit { line-height: 54px; font-size: 1.6em; }
.hole-cards .card .card-corner { font-size: .65em; }

.deal-anim { display: inline-block; animation: dealCard .5s ease-out both; }
@keyframes dealCard {
  0%   { transform: translateY(-30px) rotate(-8deg) scale(.6); opacity: 0; }
  60%  { transform: translateY(2px) rotate(1deg) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}

/* ==== PLAYER ==== */
.player {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence baseFrequency='.75' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/></filter><rect width='80' height='80' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg, #2e6242, #143a25);
  padding: .7em;
  border-radius: 8px;
  border: 2px solid var(--border-wood);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 5px rgba(0,0,0,.45);
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
}
.player.current {
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 16px rgba(212,165,69,.55);
  transform: translateX(4px);
}
.player.current::before {
  content: '';
  position: absolute;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  border: 2px solid var(--gold-light);
  border-radius: 10px;
  animation: pulseGold 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulseGold {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.02); }
}
.turn-arrow {
  position: absolute;
  top: -14px;
  right: 10px;
  background: var(--gold);
  color: var(--ink);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: .75em;
  padding: 2px 8px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
  letter-spacing: .05em;
}
.player.just-acted { animation: flashAction .8s ease-out; }
@keyframes flashAction {
  0%   { background: #ffd24d; color: #111; }
  100% { }
}
.last-action {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: #0d2617;
  border: 1px solid var(--gold);
  border-radius: 10px;
  font-size: .82em;
  color: var(--gold-light);
  font-family: 'Cinzel', serif;
}
.player.dealer::after {
  content: 'D';
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  background: radial-gradient(circle at 35% 30%, #fbf0c8, var(--parchment) 60%, var(--parchment-dark));
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75em;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.player.folded { opacity: .45; }
.player.disconnected { opacity: .3; font-style: italic; }
.player.me { box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 5px rgba(0,0,0,.45), 0 0 0 2px rgba(212,165,69,.4); }

.player-head { display: flex; align-items: center; gap: .6em; margin-bottom: .3em; }
.blason { flex-shrink: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.player-id { display: flex; flex-direction: column; min-width: 0; }
.pseudo {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.05em;
  color: var(--parchment);
  overflow: hidden;
  text-overflow: ellipsis;
}
.you { color: var(--gold-light); font-size: .85em; }
.tags-row { display: flex; gap: 4px; margin-top: 2px; }
.tag { font-size: .7em; padding: 1px 6px; border-radius: 3px; font-family: 'Cinzel', serif; }
.tag.allin { background: #a83838; color: #fff; }
.tag.fold  { background: #555; color: #ddd; }

.gold { font-family: 'Cinzel', serif; font-size: .95em; color: var(--gold-light); margin-bottom: 4px; }
.gold .coin { color: var(--gold); text-shadow: 0 0 4px rgba(212,165,69,.7); }
.gold .bet { color: var(--parchment); font-style: italic; }

.no-colony { font-size: .78em; opacity: .6; font-style: italic; margin-top: .25em; color: var(--text-dim); }
.has-colony { font-size: .78em; color: var(--gold-light); margin-top: .25em; }

/* ==== RESOURCES ==== */
.resources { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .4em; }
.res {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px 2px 4px;
  border-radius: 12px;
  font-size: .82em;
  color: #1a1a1a;
  font-weight: bold;
  border: 1px solid rgba(0,0,0,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.3);
}
.res b { font-family: 'Cinzel', serif; }
.res svg { display: block; }
.res.res-wood  { background: linear-gradient(180deg, #9fc48a, #6e9e5a); color: #112a10; }
.res.res-wheat { background: linear-gradient(180deg, #ffe489, #e8c150); }
.res.res-wool  { background: linear-gradient(180deg, #e9f4d2, #b5d68a); color: #1e3010; }
.res.res-clay  { background: linear-gradient(180deg, #eda275, #c06a35); color: #2a0a05; }
.res.res-stone { background: linear-gradient(180deg, #cdcdcd, #8d8d8d); }

/* ==== MESSAGE ==== */
#message {
  padding: .7em 1.2em;
  min-height: 1.5em;
  color: var(--parchment);
  font-style: italic;
}

/* ==== CONTROLS ==== */
#controls {
  padding: .8em;
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  align-items: center;
}
#controls button, .map-header button {
  padding: .5em 1.1em;
  cursor: pointer;
  background: linear-gradient(180deg, #7a5a20, #3e2810);
  color: var(--parchment);
  border: 1.5px solid var(--border-wood-light);
  border-radius: 5px;
  font-size: .95em;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: .03em;
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 3px rgba(0,0,0,.5);
  transition: filter .15s;
}
#controls button:hover, .map-header button:hover { filter: brightness(1.2); }
#controls button[data-action="fold"] { background: linear-gradient(180deg, #8a3a2a, #4a1a10); }
#controls button[data-action="raise"],
#controls button[data-action="allIn"] { background: linear-gradient(180deg, #2a6a3a, #143018); }
#controls input {
  padding: .4em;
  width: 110px;
  border: 1.5px solid var(--border-wood-light);
  border-radius: 5px;
  background: #1e3223;
  color: var(--parchment);
  font-family: 'Cinzel', serif;
}
.mode-toggle {
  color: var(--parchment);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-family: 'Cinzel', serif;
  font-size: .9em;
}

/* ==== MAP WRAPPER ==== */
#mapWrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: .8em;
  align-items: start;
}
#mapSection { padding: 1em; }
.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6em;
  gap: 1em;
}
.map-header h3 { margin: 0; font-size: 1em; }
.placement-banner {
  flex: 1;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: .85em;
  padding: 4px 10px;
  border-radius: 5px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(0,0,0,.25);
  border: 1px dashed var(--border-wood);
}
.placement-banner.active {
  color: #0a2a0a;
  background: linear-gradient(180deg, #ffe89a, #d4a545);
  border: 1px solid #8a6030;
  animation: bannerPulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(212,165,69,.6);
}
.placement-banner.roads {
  color: var(--parchment);
  background: linear-gradient(180deg, #3a5a6a, #1e3040);
  border: 1px solid #5c7898;
}
.placement-banner.locked {
  color: #eda;
  background: rgba(120,50,50,.35);
  border: 1px dashed #a04040;
}
@keyframes bannerPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(212,165,69,.4); }
  50%      { transform: scale(1.02); box-shadow: 0 0 14px rgba(212,165,69,.8); }
}
#mapGrid { position: relative; margin: 10px auto; }

#legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
  padding: 8px;
  background: rgba(0,0,0,.25);
  border-radius: 6px;
  border: 1px dashed var(--border-wood);
}
.leg-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .85em;
  color: var(--parchment);
}
.leg-sw {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: inset 0 0 4px rgba(0,0,0,.3);
}
.leg-sw.res-wood   { background: radial-gradient(circle at 30% 30%, #4a7a3a, #1f4021); }
.leg-sw.res-wheat  { background: radial-gradient(circle at 30% 30%, #f5d868, #b88820); }
.leg-sw.res-wool   { background: radial-gradient(circle at 30% 30%, #b8e6a5, #6fa878); }
.leg-sw.res-clay   { background: radial-gradient(circle at 30% 30%, #d88a55, #8a3a1a); }
.leg-sw.res-stone  { background: radial-gradient(circle at 30% 30%, #a0a0a0, #5e5e5e); }
.leg-sw.res-desert { background: radial-gradient(circle at 30% 30%, #e8d6a0, #ad8e58); }

/* ==== TUILES ==== */
.map-cell {
  position: absolute;
  border: 1px solid rgba(0,0,0,.6);
  box-shadow: inset 0 0 10px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  overflow: hidden;
}
.terrain-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .5;
  pointer-events: none;
}
.terrain-icon svg { width: 58%; height: 58%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }

.map-cell.res-wood   { background: radial-gradient(circle at 30% 30%, #4a7a3a, #1f4021); }
.map-cell.res-wheat  { background: radial-gradient(circle at 30% 30%, #f5d868, #b88820); }
.map-cell.res-wool   { background: radial-gradient(circle at 30% 30%, #b8e6a5, #6fa878); }
.map-cell.res-clay   { background: radial-gradient(circle at 30% 30%, #d88a55, #8a3a1a); }
.map-cell.res-stone  { background: radial-gradient(circle at 30% 30%, #a0a0a0, #5e5e5e); }
.map-cell.res-desert { background: radial-gradient(circle at 30% 30%, #e8d6a0, #ad8e58); }

.number-token {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbf0c8, var(--parchment) 60%, var(--parchment-dark));
  border: 1.5px solid var(--ink);
  color: var(--ink);
  text-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .85em;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6);
  z-index: 1;
}
.number-token span { display: block; }
.number-token .pips {
  font-size: .55em;
  letter-spacing: 1px;
  color: #6a3a0a;
  margin-top: 1px;
}
.number-token.token-ace {
  background: radial-gradient(circle at 35% 30%, #ffe39b, var(--gold) 70%, #a37a20);
  color: #3a1f08;
  border-color: #4a2a0a;
}
.number-token.token-ace .pips { color: #4a1a05; }

/* ==== ROUTES ==== */
.road-edge {
  position: absolute;
  height: 7px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 2;
  transform-origin: center;
  transition: transform .12s, background .15s, box-shadow .15s;
}
.road-edge.empty {
  background: transparent;
  border: 1.5px dashed rgba(255,255,255,.25);
  cursor: default;
}
.road-edge.empty.dim { opacity: .15; pointer-events: none; }
.map-grid.can-place-road .road-edge.empty,
#mapGrid.can-place-road .road-edge.empty {
  cursor: pointer;
  background: rgba(100, 160, 200, .3);
  border: 1.5px dashed rgba(140, 200, 240, .7);
}
#mapGrid.can-place-road .road-edge.empty:hover {
  background: rgba(255,210,77,.7);
  border-color: var(--gold-light);
  box-shadow: 0 0 6px rgba(255,210,77,.7);
}
.road-edge.owned {
  border: 1.5px solid #1a1208;
  box-shadow: 0 1px 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3);
  cursor: default;
}

/* ==== INTERSECTIONS / COLONIES ==== */
.corner-dot {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px dashed rgba(255,255,255,.35);
  transform: translate(-50%, -50%);
  cursor: default;
  z-index: 4;
  transition: transform .12s, background .15s;
}
/* Placable = intersection libre ET le joueur peut poser */
.corner-dot.placeable {
  cursor: pointer;
  background: rgba(255,210,77,.35);
  border: 2px solid var(--gold-light);
  box-shadow: 0 0 8px rgba(255,210,77,.5);
  animation: placeGlow 1.4s ease-in-out infinite;
}
@keyframes placeGlow {
  0%,100% { box-shadow: 0 0 6px rgba(255,210,77,.4); }
  50%     { box-shadow: 0 0 14px rgba(255,210,77,.85); }
}
.corner-dot.placeable:hover {
  transform: translate(-50%, -50%) scale(1.35);
  background: rgba(255,210,77,.85);
}
.corner-dot.dim { opacity: .3; pointer-events: none; }
.corner-dot.owned {
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.6));
  cursor: default;
  animation: none;
}
.corner-dot.owned:hover { transform: translate(-50%, -50%) scale(1.08); background: transparent; }
.corner-dot.corner-weak { width: 14px; height: 14px; opacity: .55; }

/* ==== COSTS PANEL ==== */
#costsPanel { padding: 1em; }
#costsPanel h3 {
  margin: 0 0 .6em 0;
  font-size: 1.05em;
  text-align: center;
  border-bottom: 1px dashed var(--border-wood-light);
  padding-bottom: .4em;
}
#costsPanel ul.costs { list-style: none; padding: 0; margin: 0; }
#costsPanel ul.costs li { padding: .5em 0; border-bottom: 1px dashed var(--border-wood); }
#costsPanel ul.costs li:last-child { border-bottom: none; }
.cost-name {
  color: var(--gold-light);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: .95em;
  margin-bottom: 4px;
}
.cost-row { display: flex; flex-wrap: wrap; gap: 4px; }
.cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px 2px 3px;
  border-radius: 10px;
  font-size: .8em;
  font-weight: bold;
  color: #1a1a1a;
  border: 1px solid rgba(0,0,0,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.cost-chip.res-wood  { background: linear-gradient(180deg, #9fc48a, #6e9e5a); color: #112a10; }
.cost-chip.res-wheat { background: linear-gradient(180deg, #ffe489, #e8c150); }
.cost-chip.res-wool  { background: linear-gradient(180deg, #e9f4d2, #b5d68a); color: #1e3010; }
.cost-chip.res-clay  { background: linear-gradient(180deg, #eda275, #c06a35); color: #2a0a05; }
.cost-chip.res-stone { background: linear-gradient(180deg, #cdcdcd, #8d8d8d); }

/* ==== LOG ==== */
#log { padding: .7em 1.2em; font-size: .88em; color: var(--parchment); }
#log h3 { margin: 0 0 .3em 0; font-size: .95em; }
#log ul { margin: 0; padding-left: 1.2em; }
#log li { margin: 2px 0; }

/* ==== FLOATING +N ==== */
#floatingContainer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}
.floating-gain {
  position: absolute;
  background: rgba(10, 30, 18, .9);
  border: 1.5px solid var(--gold);
  color: var(--gold-light);
  padding: 3px 10px;
  border-radius: 12px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: .95em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.6), 0 0 10px rgba(212,165,69,.5);
  animation: floatUp 2.2s ease-out forwards;
}
@keyframes floatUp {
  0%   { transform: translate(0, 0)   scale(.6); opacity: 0; }
  15%  { transform: translate(0, -6px) scale(1.05); opacity: 1; }
  75%  { transform: translate(0, -55px) scale(1); opacity: 1; }
  100% { transform: translate(0, -80px) scale(.9); opacity: 0; }
}