:root {
  --bg: #17120f;
  --panel: #241a17;
  --panel-2: #30221e;
  --text: #f2e7d7;
  --muted: #bda88f;
  --gold: #d7ad4b;
  --danger: #a43f36;
  --ok: #5f9a67;
  --border: rgba(215, 173, 75, 0.28);
  --shadow: rgba(0, 0, 0, 0.35);
  --purple: #7437a8;
  --red: #b6423c;
  --blue: #3577bd;
  --grey: #80838a;
  --green: #3d9653;
  --orange: #c87528;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  background: radial-gradient(circle at top, #34211b, var(--bg) 55%);
  color: var(--text);
  min-height: 100vh;
}

button {
  border: 1px solid var(--gold);
  background: linear-gradient(#d8b756, #9c6f22);
  color: #1b120d;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 #5b3c13;
}
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.secondary { background: #2f2926; color: var(--text); box-shadow: none; border-color: var(--border); }
button.danger { background: linear-gradient(#b84d45, #74302b); color: var(--text); border-color: #c8665c; box-shadow: 0 3px 0 #4a1d19; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}
h1, h2, h3, p { margin: 0; }
h1 { letter-spacing: 1px; }
.subtitle, .muted { color: var(--muted); }
.label { display: block; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }

.layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  grid-template-areas:
    "status senators"
    "table senators"
    "hand senators";
  gap: 16px;
  padding: 16px;
}
.panel {
  background: linear-gradient(180deg, rgba(48,34,30,0.98), rgba(31,22,19,0.98));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 30px var(--shadow);
}
.status-panel { grid-area: status; }
.table-panel { grid-area: table; min-height: 340px; }
.hand-panel { grid-area: hand; }
.senator-panel { grid-area: senators; }

.duel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.badge { border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; color: var(--gold); }
.score-grid { display: grid; grid-template-columns: repeat(6, minmax(100px, 1fr)); gap: 10px; margin-top: 18px; }
.score-grid div { background: rgba(0,0,0,0.2); border-radius: 12px; padding: 10px; }
.score-grid strong { font-size: 1.5rem; }

.table-zone { display: grid; grid-template-rows: 1fr auto 1fr; gap: 14px; height: 100%; }
.played-area { border: 1px dashed var(--border); border-radius: 16px; padding: 12px; background: rgba(0,0,0,0.14); }
.played-tiles, .tile-row { display: flex; flex-wrap: wrap; gap: 8px; min-height: 76px; align-items: center; }
.hand-info { margin-top: 8px; }
.pot-zone { text-align: center; padding: 18px; }
.coin-stack { font-size: 2.4rem; color: var(--gold); animation: glint 1.6s infinite alternate; }
@keyframes glint { from { opacity: .65; transform: scale(.95); } to { opacity: 1; transform: scale(1.05); } }

.hand-header { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.tile {
  width: 58px;
  height: 78px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.45rem;
  cursor: pointer;
  color: white;
  text-shadow: 0 1px 2px #000;
  position: relative;
  box-shadow: 0 7px 12px rgba(0,0,0,0.28);
  user-select: none;
  transition: transform .12s ease, outline .12s ease, filter .12s ease;
}
.tile small { font-size: .62rem; margin-top: 3px; letter-spacing: .5px; }
.tile.selected { transform: translateY(-10px); outline: 3px solid var(--gold); }
.tile.golden { background: radial-gradient(circle at 30% 20%, #fff2a9, #d6a93b 45%, #7b5418); color: #2b1a09; text-shadow: none; }
.tile.purple { background: var(--purple); }
.tile.red { background: var(--red); }
.tile.blue { background: var(--blue); }
.tile.grey { background: var(--grey); }
.tile.green { background: var(--green); }
.tile.orange { background: var(--orange); }
.tile.debt { background: #111; color: #999; }
.tile.burnable:hover { filter: brightness(1.25); outline: 2px solid #ff8f61; }

.senator-list, .market-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.senator-card, .market-card {
  background: rgba(0,0,0,0.24);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
.senator-card h4, .market-card h4 { margin: 0 0 6px; color: var(--gold); }
.senator-card p, .market-card p { color: var(--muted); line-height: 1.3; font-size: .92rem; }
.senator-card .tag { display: inline-block; margin-top: 8px; font-size: .72rem; color: #1b120d; background: var(--gold); border-radius: 99px; padding: 3px 8px; }

.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 20px;
}
.hidden { display: none; }
.modal {
  width: min(1200px, 96vw); max-height: 92vh; overflow: auto;
  background: linear-gradient(180deg, #35231d, #18110f);
  border: 1px solid var(--gold); border-radius: 22px; padding: 22px;
  box-shadow: 0 22px 70px rgba(0,0,0,.65);
}
.market-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.mini-bag { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.mini-bag .tile { width: 42px; height: 56px; font-size: 1rem; border-radius: 9px; }
.modal-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }

.flash { animation: flash .45s ease; }
@keyframes flash { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
.burn { animation: burn .5s ease forwards; }
@keyframes burn { to { transform: scale(.1) rotate(25deg); opacity: 0; filter: brightness(2); } }

@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; grid-template-areas: "status" "table" "hand" "senators"; }
  .score-grid, .market-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 650px) {
  .topbar, .hand-header { flex-direction: column; align-items: stretch; }
  .score-grid, .market-grid { grid-template-columns: 1fr; }
  .tile { width: 48px; height: 66px; }
}

.top-actions, .home-actions { display: flex; gap: 10px; align-items: center; }
.bet-card, .opponent-bet-card {
  border: 1px solid rgba(215,173,75,.55) !important;
  background: radial-gradient(circle at top, rgba(215,173,75,.16), rgba(0,0,0,.25)) !important;
}
.opponent-bet-card strong, .bet-card strong { color: var(--gold); font-size: 1.9rem; }
.bet-control {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 12px; padding: 5px 8px;
  background: rgba(0,0,0,.2); color: var(--gold); font-weight: 700;
}
.bet-control input {
  width: 64px; font-size: 1.15rem; padding: 7px;
  border-radius: 8px; border: 1px solid var(--gold);
  background: #170f0c; color: var(--text); text-align: center;
}
.bet-arrow {
  width: 34px; height: 34px; padding: 0;
  border-radius: 50%; font-size: 1.25rem; line-height: 1;
  display: inline-grid; place-items: center;
}
body:not(.game-active) #betControl,
body:not(.game-active) #playHandBtn,
body:not(.game-active) #redrawBtn,
body:not(.game-active) #passBtn,
body:not(.game-active) #viewBagBtn { display: none; }
.home-modal { max-width: 760px; text-align: center; padding: 42px; }
.home-modal h2 { font-size: 3rem; color: var(--gold); margin-bottom: 12px; }
.home-modal p { font-size: 1.1rem; line-height: 1.5; max-width: 620px; margin: 0 auto 22px; }
.home-actions { justify-content: center; margin-top: 20px; }
.home-mask {
  width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%;
  border: 2px solid var(--gold); display: grid; place-items: center;
  color: var(--gold); font-size: 3rem; box-shadow: 0 0 34px rgba(215,173,75,.35);
  animation: maskPulse 2s infinite alternate;
}
@keyframes maskPulse { from { transform: scale(.98); } to { transform: scale(1.04); } }
.result-overlay {
  position: fixed; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center;
  z-index: 30; background: rgba(0,0,0,.18);
}
.result-overlay.hidden { display: none; }
.result-card {
  min-width: min(520px, 90vw); text-align: center; border-radius: 22px; padding: 28px;
  background: linear-gradient(180deg, #3b281f, #160f0d); border: 2px solid var(--gold);
  box-shadow: 0 25px 80px rgba(0,0,0,.75); animation: resultPop .35s ease-out;
}
.result-card h2 { font-size: 2.4rem; color: var(--gold); margin-bottom: 8px; }
.result-card p { color: var(--text); font-size: 1.15rem; }
.result-card.loss { border-color: #c8665c; box-shadow: 0 25px 80px rgba(120,30,20,.55); }
.result-card.loss h2 { color: #ff9b8f; }
.result-card.duel { border-color: #ffe08a; box-shadow: 0 0 60px rgba(215,173,75,.55); }
@keyframes resultPop { from { opacity: 0; transform: translateY(18px) scale(.88); } to { opacity: 1; transform: none; } }
.confetti {
  position: absolute; top: -24px; width: 10px; height: 16px; background: var(--gold); opacity:1;
  will-change:transform,opacity; animation: confettiFall var(--fall-duration,1.7s) linear var(--fall-delay,0s) both;
}
.confetti:nth-child(3n) { background: #b6423c; }
.confetti:nth-child(4n) { background: #3577bd; }
.confetti:nth-child(5n) { background: #3d9653; }
@keyframes confettiFall {
  0% { transform:translate3d(0,0,0) rotate(var(--start-rotation,0deg)); opacity:0; }
  6% { opacity:1; }
  86% { opacity:1; }
  100% { transform:translate3d(var(--confetti-drift,60px),calc(100vh + 70px),0) rotate(var(--end-rotation,720deg)); opacity:0; }
}
.rules-modal { max-width: 980px; }
.rules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; }
.rules-grid div { background: rgba(0,0,0,.22); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.rules-grid p { color: var(--muted); line-height: 1.4; margin-top: 8px; }
.rules-grid h3 { color: var(--gold); }
.tile { animation: tileIn .18s ease-out; }
@keyframes tileIn { from { opacity: 0; transform: translateY(8px) scale(.95); } to { opacity: 1; transform: none; } }
.played-area .tile { animation: slam .28s cubic-bezier(.2,1.4,.3,1); }
@keyframes slam { 0% { transform: translateY(-22px) rotate(-4deg) scale(.9); opacity: .2; } 70% { transform: translateY(3px) rotate(2deg) scale(1.06); } 100% { transform: none; opacity: 1; } }

@media (max-width: 650px) {
  .rules-grid { grid-template-columns: 1fr; }
  .home-modal h2 { font-size: 2.2rem; }
  .top-actions, .home-actions { flex-direction: column; align-items: stretch; }
}

/* v0.3 clarity and feel pass */
.tile { animation: none; transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease, outline-color .22s ease, filter .18s ease; }
.tile.selected { transform: translateY(-12px) scale(1.035); outline: 3px solid var(--gold); box-shadow: 0 16px 22px rgba(0,0,0,.38), 0 0 18px rgba(215,173,75,.35); filter: brightness(1.08); }
.played-area .tile, .modal-hand .tile { animation: slam .28s cubic-bezier(.2,1.4,.3,1); }
.centered { justify-content: center !important; }
.breathe { animation: breathe 3.2s ease-in-out infinite alternate; transform-origin: center; }
@keyframes breathe { from { transform: translateY(0) scale(1); } to { transform: translateY(-3px) scale(1.008); } }
.result-card { pointer-events: auto; }
.result-card.breathe { animation: resultPop .35s ease-out, breathe 3.2s ease-in-out .4s infinite alternate; }
.bet-modal { max-width: 760px; text-align: center; }
.bet-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.bet-stats div, .power-box, .market-wallet { background: rgba(0,0,0,.24); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.bet-stats strong, .market-wallet strong { font-size: 1.8rem; color: var(--gold); }
.modal-hand { justify-content: center; margin: 12px 0; }
.modal-bet-control { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 8px; }
.modal-bet-control input { width: 100px; text-align: center; font-size: 1.8rem; padding: 10px; border-radius: 12px; border: 1px solid var(--gold); background: #170f0c; color: var(--text); }
.modal-bet-control .bet-arrow { width: 48px; height: 48px; font-size: 1.8rem; }
.opponent-decision { min-width: min(560px, 90vw); border-color: #c8665c; }
.opponent-intro-modal { max-width: 760px; text-align: center; }
.opponent-intro-modal h2 { color: var(--gold); font-size: 2.4rem; margin-bottom: 4px; }
.opponent-intro-modal h3 { color: var(--text); margin-bottom: 14px; }
.quote { color: var(--muted); font-size: 1.15rem; line-height: 1.5; margin: 16px auto; max-width: 620px; font-style: italic; }
.power-box { max-width: 620px; margin: 18px auto; }
.power-box strong { display: block; color: var(--text); font-size: 1.05rem; line-height: 1.4; }
.market-wallet { display: inline-block; margin-top: 10px; color: var(--muted); }
.tile-market-card { align-items: center; display: flex; flex-direction: column; }
.burn-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.burn-wrap small { color: #ffb28d; font-weight: 700; }
.purchase-toast { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 60; background: linear-gradient(180deg,#3b281f,#160f0d); border: 1px solid var(--gold); color: var(--text); padding: 14px 22px; border-radius: 999px; box-shadow: 0 14px 42px rgba(0,0,0,.55); }
.toast-pop { animation: toastPop 1s ease forwards; }
@keyframes toastPop { 0% { opacity: 0; transform: translate(-50%,-12px) scale(.92); } 15% { opacity: 1; transform: translate(-50%,0) scale(1.03); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-8px) scale(.98); } }
.coin-float { position: fixed; right: 32px; top: 108px; z-index: 70; color: #ff9b8f; font-size: 2rem; font-weight: 900; text-shadow: 0 2px 8px #000; animation: coinFloat .85s ease-out forwards; pointer-events: none; }
.coin-float.gain { color: var(--gold); }
@keyframes coinFloat { to { transform: translateY(-46px); opacity: 0; } }
.rules-modal { max-width: 900px; }
.rules-objective { color: var(--text); line-height: 1.45; margin: 12px 0 18px; background: rgba(215,173,75,.1); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.rule-box { margin: 10px 0; background: rgba(0,0,0,.22); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; }
.rule-box summary { cursor: pointer; color: var(--gold); font-size: 1.1rem; font-weight: 700; }
.rule-box p { color: var(--muted); line-height: 1.42; margin: 10px 0; }
.example-tiles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.example-tiles .tile { cursor: default; width: 48px; height: 64px; font-size: 1.1rem; }
.beats { color: var(--gold); font-weight: 900; padding: 0 4px; }
body:not(.game-active) #sortToggleBtn { display: none; }
@media (max-width: 750px) { .bet-stats { grid-template-columns: repeat(2,1fr); } }
.result-overlay { pointer-events: auto; }

/* v0.4 favor-token pass */
.hand-header .actions { align-items: center; }
.small-sort, .market-refresh { margin: 6px 0 10px; padding: 7px 10px; font-size: .85rem; }
.market-refresh { width: 100%; }
.tile.favor {
  width: 66px;
  height: 66px;
  border: 0;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.34);
  overflow: visible;
  color: #fff4c1;
  text-shadow: 0 2px 4px #000, 0 0 8px #000;
}
.tile.favor img {
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
}
.tile.favor span {
  position: relative;
  z-index: 2;
  font-size: 1.75rem;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: #ffe68a;
}
.tile.favor small {
  position: absolute;
  z-index: 2;
  bottom: 9px;
  font-size: .48rem;
  letter-spacing: .7px;
  color: #ffdf79;
  background: rgba(0,0,0,.28);
  border-radius: 999px;
  padding: 1px 4px;
}
.mini-bag .tile.favor { width: 50px; height: 50px; }
.mini-bag .tile.favor span { font-size: 1.15rem; padding: 1px 6px; }
.mini-bag .tile.favor small { bottom: 6px; font-size: .38rem; }
.example-tiles .tile.favor { width: 56px; height: 56px; }
.tile.favor.selected { transform: translateY(-10px) scale(1.08); outline: none; filter: brightness(1.14) drop-shadow(0 0 10px rgba(215,173,75,.75)); }
.tile.favor.selected::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 3px solid var(--gold);
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
}
.played-area .tile.favor, .modal-hand .tile.favor { animation: sealSlam .32s cubic-bezier(.2,1.4,.3,1); }
@keyframes sealSlam { 0% { transform: translateY(-26px) rotate(-7deg) scale(.82); opacity: .1; } 72% { transform: translateY(3px) rotate(3deg) scale(1.1); } 100% { transform: none; opacity: 1; } }
.market-wallet { margin-bottom: 8px; }

/* v0.5 senator card polish */
.senator-card.playing-card, .market-card {
  position: relative;
  background:
    linear-gradient(145deg, rgba(246,226,179,.08), rgba(0,0,0,.28) 38%, rgba(215,173,75,.08)),
    radial-gradient(circle at top left, rgba(215,173,75,.14), transparent 42%),
    #1b1412;
  border: 2px solid rgba(215,173,75,.55);
  border-radius: 18px;
  min-height: 142px;
  padding: 18px 14px 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.32);
}
.senator-card.playing-card::before, .market-card::before {
  content:"";
  position:absolute; inset:7px;
  border:1px solid rgba(215,173,75,.28);
  border-radius:13px;
  pointer-events:none;
}
.senator-card.playing-card h4, .market-card h4 {
  font-size:1rem;
  line-height:1.12;
  text-align:center;
  padding: 8px 4px 6px;
  color:#ffe4a3;
}
.senator-card.playing-card p, .market-card p { font-size:.86rem; }
.senator-card .card-corner {
  position:absolute; top:7px; left:8px;
  max-width:70px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  color:#1b120d; background:linear-gradient(#ffe7a1,#b8872e);
  border-radius:8px; padding:3px 6px;
  font-size:.58rem; font-weight:900; letter-spacing:.4px;
  border:1px solid rgba(0,0,0,.25);
}
.senator-enter {
  animation: senatorFlyIn .72s cubic-bezier(.18,1.35,.28,1) both;
}
@keyframes senatorFlyIn {
  0% { opacity:0; transform: translate(-220px,-120px) rotate(-10deg) scale(.65); filter:brightness(1.8); }
  60% { opacity:1; transform: translate(10px,4px) rotate(2deg) scale(1.08); }
  100% { transform:none; }
}
.market-card:hover, .senator-card.playing-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 16px 36px rgba(0,0,0,.42), 0 0 18px rgba(215,173,75,.14);
}
.bet-stats { grid-template-columns: repeat(5, minmax(120px,1fr)); }

/* Art integration pass */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 10%, rgba(215,173,75,.3), transparent 38%),
    linear-gradient(rgba(23,18,15,.76), rgba(23,18,15,.86));
  opacity: .18;
  mix-blend-mode: screen;
  z-index: -1;
}
.brand-block { display: flex; gap: 16px; align-items: center; }
.brand-logo { width: 210px; max-height: 58px; object-fit: contain; filter: drop-shadow(0 5px 14px rgba(0,0,0,.45)); }
.topbar {
  background: linear-gradient(90deg, rgba(18,10,8,.96), rgba(48,20,16,.82));
}
.home-overlay {
  background:
    linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.82)),
    url('assets/rialto-parade.jpeg') center/cover no-repeat;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.home-modal {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(45,25,21,.9), rgba(16,11,10,.96)),
    url('assets/st-marks.jpeg') center/cover no-repeat;
}
.home-modal::before,
.market-modal::before,
.opponent-intro-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 18%, rgba(215,173,75,.18), transparent 36%);
  pointer-events: none;
}
.home-logo { width: min(520px, 85%); max-height: 120px; object-fit: contain; display: block; margin: 0 auto 8px; filter: drop-shadow(0 8px 22px rgba(0,0,0,.55)); }
.table-panel {
  background:
    linear-gradient(180deg, rgba(36,26,23,.84), rgba(16,12,11,.93)),
    url('assets/st-marks.jpeg') center/cover no-repeat;
}
.market-modal {
  position: relative;
  background:
    linear-gradient(180deg, rgba(42,27,21,.92), rgba(15,10,9,.98)),
    url('assets/rialto-parade.jpeg') center/cover no-repeat;
}
.market-modal > * { position: relative; z-index: 1; }
.status-panel {
  background:
    linear-gradient(180deg, rgba(48,34,30,.96), rgba(31,22,19,.98)),
    url('assets/av-mark.png') right 18px center/180px auto no-repeat;
}
.opponent-status-art { flex: 0 0 86px; }
.opponent-status-art img {
  width: 86px; height: 112px; object-fit: cover; object-position: top center;
  border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(0,0,0,.42);
  background: #100b09;
}
.opponent-status-art img.empty { object-fit: contain; padding: 10px; }
.duel-copy { flex: 1; }
.opponent-intro-modal { max-width: 920px; position: relative; overflow: hidden; }
.opponent-intro-layout { display: grid; grid-template-columns: 290px 1fr; gap: 24px; align-items: center; position: relative; z-index: 1; }
.opponent-intro-portrait {
  width: 100%; max-height: 520px; object-fit: cover; object-position: top center;
  border-radius: 20px; border: 2px solid var(--gold);
  box-shadow: 0 20px 55px rgba(0,0,0,.65), 0 0 35px rgba(215,173,75,.25);
}
.opponent-intro-copy h2 { color: var(--gold); font-size: 2.5rem; margin-bottom: 2px; }
.opponent-intro-copy h3 { color: var(--text); margin-bottom: 14px; }
.quote { font-size: 1.18rem; line-height: 1.45; color: var(--text); margin: 12px 0 18px; font-style: italic; }
.power-box { background: rgba(0,0,0,.34); border: 1px solid var(--border); border-radius: 16px; padding: 14px; }
.playing-card {
  background:
    linear-gradient(180deg, rgba(245,232,203,.96), rgba(174,132,68,.95));
  color: #1c100b;
  border: 2px solid rgba(255,231,150,.9);
  box-shadow: 0 14px 24px rgba(0,0,0,.35);
}
.playing-card h4 { color: #2a160b; }
.playing-card p { color: #3c2a1d; }
.senator-art {
  width: 100%; height: 118px; object-fit: cover; object-position: top center;
  border-radius: 10px; margin: 18px 0 10px;
  border: 1px solid rgba(42,22,11,.35);
}
.card-corner {
  position: absolute; top: 8px; left: 8px; right: 8px;
  text-align: center; font-size: .65rem; letter-spacing: 1px; text-transform: uppercase;
  color: #2a160b; opacity: .75;
}
.senator-market-card {
  overflow: hidden;
  background: linear-gradient(180deg, rgba(43,28,22,.93), rgba(13,9,8,.94));
}
.market-senator-art {
  width: 100%; height: 120px; object-fit: cover; object-position: top center;
  border-radius: 10px; border: 1px solid var(--border); margin-bottom: 10px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.35);
}
.sell-card .market-senator-art { height: 90px; filter: saturate(.8) brightness(.9); }
.tile img { filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
@media (max-width: 760px) {
  .brand-block { flex-direction: column; align-items: flex-start; }
  .brand-logo { width: 190px; }
  .opponent-intro-layout { grid-template-columns: 1fr; }
  .opponent-intro-portrait { max-height: 320px; }
  .opponent-status-art { display: none; }
}
.senator-card { position: relative; }

/* v0.8 artwork, tutorial, settings and tech-card pass */
body::before {
  content:""; position: fixed; inset:0; pointer-events:none; z-index:-2;
  background: linear-gradient(rgba(17,10,8,.72), rgba(17,10,8,.82)), url('assets/final-cover.jpeg') center/cover no-repeat;
  opacity:.75;
}
.table-panel { background: linear-gradient(rgba(26,16,13,.78), rgba(20,12,10,.88)), url('assets/canal.jpeg') center/cover no-repeat; }
.home-modal { background: linear-gradient(rgba(35,22,18,.74), rgba(15,9,8,.92)), url('assets/final-cover.jpeg') center/cover no-repeat; }
.brand-logo { max-height:54px; max-width:230px; object-fit:contain; }
.brand-block { display:flex; gap:14px; align-items:center; }
.home-logo { max-width:460px; width:80%; margin-bottom:12px; }
.coin-stack { width:56px; height:56px; margin:0 auto 8px; color:transparent; background:url('assets/coin-front.png') center/contain no-repeat; }
.market-wallet::before, .bet-stats strong::before, #playerCoins::before, #opponentCoins::before { content:""; display:inline-block; width:20px; height:20px; margin-right:5px; vertical-align:-4px; background:url('assets/coin-back.png') center/contain no-repeat; }
.senator-panel h3::before, #marketSenators h3::before { content:""; }
.tech-playing-card, .tech-card-mini {
  position:relative; min-height:220px; padding:52px 22px 22px !important;
  background: url('assets/tech-card-template.jpeg') center/100% 100% no-repeat !important;
  border:0 !important; color:#27170d; box-shadow:0 10px 20px rgba(0,0,0,.45);
}
.tech-playing-card h4, .tech-card-mini h4 { color:#4b240e !important; text-align:center; margin:0 0 8px; font-size:.95rem; }
.tech-playing-card p, .tech-card-mini p { color:#2f2117 !important; font-size:.78rem !important; line-height:1.18 !important; text-align:center; }
.tech-playing-card .tag { background:#741f24; color:#f8e8b7; }
.tech-playing-card .card-corner { position:absolute; top:12px; left:14px; right:14px; display:flex; justify-content:center; align-items:center; gap:6px; color:#5b2c10; font-size:.72rem; font-weight:900; }
.tech-playing-card .card-corner img { width:22px; height:22px; object-fit:contain; }
.senator-panel .senator-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.market-card.senator-market-card { padding:0; border:0; background:transparent; cursor:pointer; }
.market-card.senator-market-card:hover .tech-card-mini { transform:translateY(-4px); filter:brightness(1.05); }
.tech-card-mini { min-height:260px; transition:transform .18s ease, filter .18s ease; }
.tutorial-modal { max-width:860px; text-align:center; }
.tutorial-art img { width:100%; max-height:230px; object-fit:cover; border-radius:16px; border:1px solid var(--border); margin:8px 0 16px; }
.tutorial-text { font-size:1.18rem; line-height:1.45; color:var(--text); margin:12px auto; max-width:720px; }
.tutorial-example { justify-content:center; margin-top:16px; min-height:90px; }
.settings-modal { max-width:620px; }
.settings-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px; margin-top:12px; border:1px solid var(--border); border-radius:14px; background:rgba(0,0,0,.22); }
.settings-row input { width:220px; }
.rules-modal .tile { background-size:contain; background-position:center; background-repeat:no-repeat; border:0; color:#fff8d8; }
.rules-modal .tile.red { background-image:url('assets/War.png'); background-color:transparent; }
.rules-modal .tile.blue { background-image:url('assets/Trade.png'); background-color:transparent; }
.rules-modal .tile.green { background-image:url('assets/Finance.png'); background-color:transparent; }
.rules-modal .tile.orange { background-image:url('assets/Tech.png'); background-color:transparent; }
.rules-modal .tile.grey { background-image:url('assets/Politics.png'); background-color:transparent; }
.rules-modal .tile.purple { background-image:url('assets/Crime.png'); background-color:transparent; }
.rules-modal .tile.golden { background-image:url('assets/Golden.png'); background-color:transparent; }

/* v0.9 requested tutorial/reward/audio/card polish */
.tutorial-layer {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background: rgba(0,0,0,.34);
}
body.tutorial-active #homeOverlay { display:none !important; visibility:hidden !important; pointer-events:none !important; }
.tutorial-layer.hidden { display:none; }
.tutorial-layer .tutorial-modal { pointer-events: auto; position: fixed; max-height: 70vh; overflow:auto; }
.tutorial-spotlight {
  position: fixed; border: 3px solid var(--gold); border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.58), 0 0 28px rgba(215,173,75,.7);
  z-index: 81; pointer-events: none; transition: all .25s ease;
}
.tutorial-popover { z-index: 82; max-width: 460px; text-align: left; padding: 18px; }
.tutorial-popover h2 { color: var(--gold); }
.tutorial-popover .tutorial-text { font-size: 1.02rem; max-width: none; }

.reward-modal { max-width: 1080px; }
.reward-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:18px; }
.reward-card { background:rgba(0,0,0,.24); border:1px solid var(--border); border-radius:16px; padding:16px; }
.reward-card h3 { color:var(--gold); margin-bottom:8px; }
.reward-card p { color:var(--muted); line-height:1.35; margin-bottom:12px; }
.reward-card.wide { grid-column: 1 / -1; }
.reward-suits { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:8px; }
.reward-suit { display:flex; align-items:center; gap:8px; justify-content:flex-start; }
.reward-suit img { width:30px; height:30px; object-fit:contain; }
.reward-burn { max-height:260px; overflow:auto; padding:8px; background:rgba(0,0,0,.18); border-radius:12px; }

/* Correct tech card art ratio. Template is 1120x1536, so ratio is 35:48. */
.tech-playing-card, .tech-card-mini {
  aspect-ratio: 35 / 48;
  min-height: auto !important;
  min-width: 0;
  padding: 28% 13% 10% !important;
  background-size: 100% 100% !important;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  box-sizing:border-box;
  overflow:hidden;
}
.tech-playing-card h4, .tech-card-mini h4 {
  max-width: 82%; margin-left:auto !important; margin-right:auto !important;
  font-size: clamp(.68rem, .9vw, .95rem) !important;
  line-height: 1.05 !important;
}
.tech-playing-card p, .tech-card-mini p {
  max-width: 80%; margin: 0 auto !important;
  font-size: clamp(.56rem, .72vw, .75rem) !important;
  line-height: 1.12 !important;
}
.tech-card-mini { width: 170px; }
.senator-panel .senator-list { grid-template-columns: repeat(auto-fit,minmax(165px,1fr)); }
.tech-playing-card .tag { margin: 6px auto 0; }
@media (max-width: 760px) {
  .reward-grid { grid-template-columns:1fr; }
  .reward-card.wide { grid-column:auto; }
  .tutorial-popover { left:14px !important; right:14px; width:auto !important; max-width:none; }
}

/* v0.10 layout/tutorial/reward polish */
html, body { height: 100%; }
body.game-active { overflow: hidden; }
.app { height: 100vh; display: flex; flex-direction: column; }
.layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(360px, 1fr) minmax(260px, 310px);
  grid-template-rows: minmax(126px, .82fr) minmax(182px, 1fr);
  gap: 12px;
  padding: 12px;
  overflow: hidden;
}
.panel { min-height: 0; overflow: hidden; }
.status-panel { overflow:auto; }
.table-panel { min-height:0; }
.table-zone { height:100%; display:grid; grid-template-rows: 1fr auto 1fr; gap:8px; }
.played-area { min-height:0; overflow:hidden; }
.played-tiles { min-height: 64px; }
.hand-panel { grid-column: 1 / 3; overflow:hidden; }
#playerHand { max-height: 150px; overflow:auto; align-content:flex-start; }
.senator-panel { grid-column: 3; grid-row: 1 / 3; overflow:auto; }
.topbar { flex: 0 0 auto; }
.top-actions { flex-wrap: wrap; }
@media (max-height: 760px) {
  .tile { width:58px; height:58px; }
  .tile span { font-size:1.35rem; }
  .panel { padding:10px; }
  .layout { grid-template-rows: minmax(108px,.72fr) minmax(150px,1fr); gap:8px; padding:8px; }
  #playerHand { max-height: 124px; }
  h3 { margin: 0 0 6px; }
  .score-grid { gap:6px; }
  .score-grid div { padding:7px; }
}
@media (max-width: 980px) {
  body.game-active { overflow:auto; }
  .app { height:auto; min-height:100vh; }
  .layout { display:block; overflow:visible; }
  .panel { margin:10px; }
}
.tutorial-layer { position: fixed; inset: 0; }
.tutorial-spotlight { position: fixed; pointer-events:none; }
.tutorial-popover { position: fixed !important; }
.tutorial-example .tile { width:70px; height:70px; }
.reward-suit { display:flex; align-items:center; gap:10px; justify-content:flex-start; }
.reward-suit .tile { transform:scale(.78); transform-origin:left center; margin-right:-10px; }
.reward-suit span { font-weight:700; }
.tech-card-mini {
  width: 210px !important;
  height: 288px !important;
  min-height: 288px !important;
  box-sizing: border-box;
  padding: 94px 34px 42px !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.tech-card-mini h4 { font-size:.82rem !important; line-height:1.05 !important; margin-bottom:5px !important; max-width:142px; }
.tech-card-mini p { font-size:.64rem !important; line-height:1.06 !important; max-width:144px; margin:2px auto !important; }
.market-list { align-items:flex-start; }
.market-card.senator-market-card { width:210px; }
.result-card .modal-actions { margin-top:16px; }

/* v0.10.1 emergency layout fix: restore playable proportional layout.
   The previous full-viewport compression was too aggressive on some screens. */
html, body { height: auto; min-height: 100%; }
body.game-active { overflow: auto !important; }
.app { height: auto !important; min-height: 100vh; display: block !important; }
.layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 310px !important;
  grid-template-areas:
    "status senators"
    "table senators"
    "hand senators" !important;
  grid-template-rows: auto auto auto !important;
  gap: 16px !important;
  padding: 16px !important;
  overflow: visible !important;
  min-height: auto !important;
}
.panel { min-height: auto !important; overflow: visible !important; }
.status-panel { grid-area: status !important; overflow: visible !important; }
.table-panel { grid-area: table !important; min-height: 340px !important; }
.hand-panel { grid-area: hand !important; grid-column: auto !important; overflow: visible !important; }
.senator-panel { grid-area: senators !important; grid-column: auto !important; grid-row: auto !important; overflow: visible !important; }
.table-zone { min-height: 340px; height: auto !important; }
.played-area { overflow: visible !important; }
#playerHand { max-height: none !important; overflow: visible !important; }
.tile.favor, .tile { flex: 0 0 auto; }
.market-list { align-items: stretch !important; }
.market-card.senator-market-card { width: auto !important; }
.tech-card-mini { margin: 0 auto; }

@media (max-width: 1120px) {
  .layout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "status"
      "table"
      "hand"
      "senators" !important;
  }
  .senator-panel { grid-area: senators !important; }
}
@media (max-width: 650px) {
  .layout { padding: 10px !important; gap: 10px !important; }
  .table-panel { min-height: 300px !important; }
  .table-zone { min-height: 300px; }
}

/* v0.11 bugfix/layout/card polish */
@media (min-width: 1121px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    grid-template-areas:
      "status senators"
      "table senators"
      "hand senators" !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  .status-panel { padding: 10px 12px !important; }
  .duel-heading { gap: 10px; align-items: center; }
  .opponent-status-art { flex-basis: 66px !important; }
  .opponent-status-art img { width: 66px !important; height: 84px !important; border-radius: 10px !important; }
  .duel-copy h2 { font-size: 1.15rem; line-height: 1.1; margin: 2px 0; }
  .duel-copy p { font-size: .82rem; line-height: 1.2; }
  .badge { padding: 8px 10px; font-size: .9rem; }
  .score-grid { grid-template-columns: repeat(7, minmax(74px, 1fr)) !important; gap: 6px !important; margin-top: 8px !important; }
  .score-grid div { padding: 6px 7px !important; border-radius: 10px !important; }
  .label { font-size: .61rem; }
  .score-grid strong { font-size: 1.05rem !important; }
  .bet-card strong, .opponent-bet-card strong { font-size: 1.25rem !important; }
  .table-panel { min-height: 290px !important; }
  .table-zone { min-height: 290px !important; gap: 8px !important; }
  .played-area { padding: 8px !important; }
  .played-area h3, .hand-panel h3, .senator-panel h3 { font-size: 1rem; margin-bottom: 4px; }
  .played-tiles { min-height: 54px !important; }
  .pot-zone { padding: 8px !important; }
  .coin-stack { font-size: 1.8rem !important; }
  .hand-panel { padding: 10px 12px !important; }
  .hand-header { margin-bottom: 8px !important; }
  .tile.favor { width: 58px !important; height: 58px !important; }
  .tile.favor span { font-size: 1.42rem !important; }
  .tile.favor small { bottom: 7px !important; }
  .senator-panel { padding: 10px !important; }
}

/* Make market technology cards use the same proportions as installed cards. */
#marketSenators, #sellSenators {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px;
  align-items: start !important;
}
.market-card.senator-market-card {
  width: auto !important;
  display: flex;
  justify-content: center;
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.market-card.senator-market-card::before { display: none !important; }
.market-card.senator-market-card .tech-card-mini,
.senator-panel .tech-playing-card {
  width: 165px !important;
  height: auto !important;
  aspect-ratio: 35 / 48 !important;
  min-height: 0 !important;
  padding: 47px 20px 25px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  background-size: 100% 100% !important;
}
.market-card.senator-market-card .tech-card-mini h4,
.senator-panel .tech-playing-card h4 {
  font-size: .72rem !important;
  line-height: 1.04 !important;
  max-width: 112px !important;
  margin: 0 auto 5px !important;
}
.market-card.senator-market-card .tech-card-mini p,
.senator-panel .tech-playing-card p {
  font-size: .56rem !important;
  line-height: 1.06 !important;
  max-width: 112px !important;
  margin: 0 auto 4px !important;
}
.market-card.senator-market-card .tech-card-mini .tag,
.senator-panel .tech-playing-card .tag {
  font-size: .58rem !important;
  line-height: 1 !important;
  padding: 4px 7px !important;
  margin-top: auto !important;
}
.market-card.senator-market-card .card-corner,
.senator-panel .card-corner {
  top: 10px !important;
  left: 14px !important;
  right: 14px !important;
  font-size: .53rem !important;
  gap: 3px !important;
}
.market-card.senator-market-card .card-corner img,
.senator-panel .card-corner img { width: 16px !important; height: 16px !important; }

/* Centre special favor market cards and stop cost text being covered. */
#marketTiles { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 10px; }
.tile-market-card {
  min-height: 132px !important;
  padding: 12px 8px 10px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 8px !important;
}
.tile-market-card .tile.favor { margin: 2px auto 4px !important; transform: none !important; }
.tile-market-card p { width: 100%; margin: 4px 0 0 !important; font-size: .78rem !important; line-height: 1.15 !important; position: relative; z-index: 2; }

/* Tutorial popups should never sit below the visible screen. */
.tutorial-layer .tutorial-modal { max-height: min(68vh, 430px) !important; }
.tutorial-example { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Slightly smaller, less scroll-heavy overlays. */
.market-modal { width: min(1180px, 96vw) !important; }
.market-grid { grid-template-columns: minmax(190px,1.1fr) minmax(170px,.9fr) minmax(210px,1fr) minmax(170px,.9fr) !important; gap: 12px !important; }
@media (max-width: 980px) { .market-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 650px) { .market-grid { grid-template-columns: 1fr !important; } }

/* v0.12 focused bugfixes */
.layout { align-items: start !important; }
.status-panel { align-self: start !important; }
.senator-panel { align-self: start !important; max-height: calc(100vh - 96px); overflow-y: auto; }

/* Keep the selection summary useful but stop selected favours overlapping it. */
.hand-panel { position: relative; padding-bottom: 34px !important; }
#selectionInfo {
  position: absolute;
  right: 14px;
  bottom: 8px;
  max-width: min(620px, 58%);
  text-align: right;
  font-size: .82rem;
  line-height: 1.15;
  background: rgba(18, 11, 9, .72);
  border: 1px solid rgba(215, 173, 75, .18);
  border-radius: 10px;
  padding: 4px 8px;
  pointer-events: none;
}
#playerHand { padding-bottom: 16px; }

/* Technology card cleanup: no top type label or bottom chip on installed cards. */
.tech-playing-card .card-corner,
.tech-playing-card .tag { display: none !important; }

/* Make market cards use the same readable text treatment as installed tech cards. */
#marketSenators, #sellSenators {
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)) !important;
}
.market-card.senator-market-card {
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer;
}
.market-card.senator-market-card .tech-card-mini,
.senator-panel .tech-playing-card {
  width: 176px !important;
  aspect-ratio: 35 / 48 !important;
  padding: 58px 22px 34px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  background-size: 100% 100% !important;
}
.market-card.senator-market-card .tech-card-mini h4,
.senator-panel .tech-playing-card h4 {
  color: #4b240e !important;
  font-size: .88rem !important;
  line-height: 1.05 !important;
  max-width: 130px !important;
  min-height: 2.1em;
  margin: 0 auto 6px !important;
  text-align: center !important;
}
.market-card.senator-market-card .tech-card-mini p,
.senator-panel .tech-playing-card p {
  color: #2f2117 !important;
  font-size: .70rem !important;
  line-height: 1.12 !important;
  max-width: 132px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.market-price {
  color: #1b120d;
  background: linear-gradient(#d8b756, #9c6f22);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 900;
  font-size: .78rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
/* Big readable card preview on hover/focus. */
.market-card.senator-market-card:hover .tech-card-mini,
.market-card.senator-market-card:focus-within .tech-card-mini,
.senator-panel .tech-playing-card:hover {
  transform: translateY(-5px) scale(1.16) !important;
  z-index: 20;
  filter: brightness(1.05);
}

/* Special favour market card centring. */
.tile-market-card { display: flex !important; flex-direction: column !important; align-items: center !important; }
.tile-market-card .tile.favor { flex: 0 0 auto !important; margin: 0 auto 8px !important; }
.tile-market-card p { display:block !important; clear:both !important; padding-top: 3px !important; }

@media (max-width: 900px) {
  #selectionInfo { position: static; max-width: 100%; text-align: left; margin-top: 8px; }
  .hand-panel { padding-bottom: 12px !important; }
  .senator-panel { max-height: none; overflow: visible; }
}

/* v0.13 compact layout / all-in / tech card readability fixes */
@media (min-width: 1121px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 286px !important;
    grid-template-rows: auto 286px auto !important;
    align-items: start !important;
    gap: 8px !important;
  }
  .status-panel { min-height: 0 !important; }
  .table-panel { height: 286px !important; min-height: 286px !important; }
  .table-zone { height: 100% !important; min-height: 0 !important; grid-template-rows: minmax(72px,1fr) auto minmax(72px,1fr) !important; gap: 6px !important; }
  .senator-panel {
    height: calc(100vh - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
    contain: layout paint !important;
  }
  .score-grid { grid-template-columns: repeat(7, minmax(66px, 1fr)) !important; }
  .score-grid div { padding: 5px 6px !important; }
  .played-tiles, .tile-row { min-height: 54px !important; }
  .pot-zone { padding: 6px !important; }
  .coin-stack { font-size: 1.45rem !important; }
}

/* Narrow the printed area on technology cards so text stays on the parchment. */
.market-card.senator-market-card .tech-card-mini,
.senator-panel .tech-playing-card {
  padding-left: 30px !important;
  padding-right: 30px !important;
}
.market-card.senator-market-card .tech-card-mini h4,
.senator-panel .tech-playing-card h4 {
  max-width: 108px !important;
  font-size: .82rem !important;
  line-height: 1.05 !important;
}
.market-card.senator-market-card .tech-card-mini p,
.senator-panel .tech-playing-card p {
  max-width: 108px !important;
  font-size: .68rem !important;
  line-height: 1.14 !important;
}
.market-card.senator-market-card .tech-card-mini { padding-top: 56px !important; }
.senator-panel .tech-playing-card { padding-top: 56px !important; }

/* v0.14 layout isolation fix: the Technology Cards column must not participate
   in the left-column flow, otherwise its height can push the table/hand panels down. */
@media (min-width: 1121px) {
  .layout {
    display: block !important;
    position: relative !important;
    padding: 10px 310px 10px 10px !important;
    min-height: calc(100vh - 86px) !important;
    overflow: visible !important;
  }
  .status-panel,
  .table-panel,
  .hand-panel {
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .status-panel {
    min-height: 0 !important;
  }
  .table-panel {
    height: 286px !important;
    min-height: 286px !important;
  }
  .hand-panel {
    min-height: 0 !important;
  }
  .senator-panel {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 286px !important;
    height: calc(100vh - 106px) !important;
    max-height: calc(100vh - 106px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    contain: layout paint !important;
  }
  .senator-list {
    align-items: center !important;
  }
}

/* v0.16 Hand Score clarity */
.hand-score-badge {
  display: inline-block;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #25150c;
  background: linear-gradient(180deg, #f7df8a, #bd7b2b);
  border: 1px solid rgba(255, 235, 160, .75);
  border-radius: 999px;
  padding: 4px 9px;
  box-shadow: 0 0 14px rgba(228, 168, 55, .22);
  margin-right: 6px;
}
.hand-score-live { font-size: .9rem; }
.hand-score-detail { color: rgba(247, 230, 190, .9); font-weight: 600; }
.hand-score-warning, .hand-score-invalid {
  color: #ffd1c3;
  font-weight: 800;
}
.hand-info .hand-score-badge { font-size: .78rem; padding: 3px 7px; }
#betModalHandInfo .hand-score-badge,
#betPreview .hand-score-badge { font-size: .92rem; }

/* v0.22: keep opponent intro above every layer and make Begin Duel reliably clickable */
#opponentIntroOverlay { z-index: 1200; pointer-events: auto; }
#opponentIntroOverlay .modal, #opponentIntroOverlay button { pointer-events: auto; }
#opponentIntroContinue { position: relative; z-index: 1202; }

/* v0.25 button repair: hidden overlays must never intercept clicks. */
.overlay.hidden,
.result-overlay.hidden,
.tutorial-layer.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.overlay:not(.hidden),
.result-overlay:not(.hidden) {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* v0.29 hand-type progression, lore, expansion reward */
.home-lore-box {
  max-width: 680px;
  margin: 14px auto 18px;
  padding: 14px 18px;
  border: 1px solid rgba(222,174,74,.45);
  border-radius: 16px;
  background: rgba(0,0,0,.34);
  box-shadow: inset 0 0 24px rgba(0,0,0,.28);
  text-align: left;
}
.home-lore-box h3 { color: var(--gold); margin: 0 0 8px; font-size: 1.15rem; }
.home-lore-box p { font-size: .94rem !important; line-height: 1.42 !important; margin: 0 0 8px !important; max-width: none !important; }
.learned-hand-strip {
  margin-top: 8px;
  border-top: 1px solid rgba(222,174,74,.25);
  padding-top: 8px;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.learned-hand-title {
  color: var(--gold);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .75rem;
  min-width: 96px;
  display: flex;
  align-items: center;
}
.learned-hands {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 8px;
  flex: 1;
}
.learned-hand-card, .hand-choice-card {
  border: 1px solid rgba(222,174,74,.4);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(50,33,25,.72), rgba(19,12,11,.84));
  color: #f7e6be;
  padding: 8px 10px;
  box-shadow: inset 0 0 14px rgba(0,0,0,.25);
}
.learned-hand-card strong, .hand-choice-card strong { display:block; color:var(--gold); font-size:.9rem; margin-bottom:3px; }
.learned-hand-card span, .hand-choice-card span { display:block; color:var(--muted); font-size:.74rem; line-height:1.18; }
.learned-hand-card small, .hand-choice-card small { display:block; margin-top:5px; color:#f8d77c; font-weight:800; font-size:.72rem; }
.hand-choice-options { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:14px; margin:16px 0; }
.hand-choice-card { text-align:left; cursor:pointer; min-height:118px; }
.hand-choice-card:hover { transform: translateY(-3px); filter: brightness(1.08); }
.hand-choice-card.forget { border-color: rgba(255,130,110,.45); }
.forget-hand-area { margin-top: 12px; padding-top:12px; border-top:1px solid rgba(222,174,74,.25); }
.expansion-modal { max-width: 940px; text-align:center; background: linear-gradient(rgba(35,22,18,.82), rgba(10,6,6,.96)), url('assets/final-cover.jpeg') center/cover no-repeat; }
.expansion-options { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:22px; margin:20px auto; }
.expansion-card { padding:10px; border-radius:18px; background:rgba(0,0,0,.38); border:1px solid rgba(222,174,74,.48); display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--gold); font-weight:900; }
.expansion-card img { width:100%; max-height:420px; object-fit:contain; border-radius:12px; box-shadow:0 14px 32px rgba(0,0,0,.45); }
.expansion-card:hover { transform: translateY(-5px) scale(1.015); filter:brightness(1.05); }
.expansion-card.chosen { border-color:#ffe891; box-shadow:0 0 32px rgba(238,191,78,.45); animation: rewardPulse 1.15s ease-in-out infinite alternate; }
.claim-area { margin-top: 16px; padding: 14px; border: 1px solid rgba(222,174,74,.4); border-radius: 16px; background: rgba(0,0,0,.38); }
@keyframes rewardPulse { from{ transform:scale(1); } to{ transform:scale(1.025); } }
@media (max-width: 900px){
  .learned-hand-strip { flex-direction: column; }
  .learned-hands, .hand-choice-options, .expansion-options { grid-template-columns: 1fr; }
}

/* v0.30 hotfix: make favour selection reliable and shrink rule examples */
#playerHand { position: relative; z-index: 5; }
#playerHand .tile.favor, #playerHand .tile.favor * { cursor: pointer; }
.tile.favor > img, .tile.favor > span, .tile.favor > small { pointer-events: none; }
.learned-hand-strip { position: relative; z-index: 1; }

.rules-modal .example-tiles { align-items: center; gap: 8px; }
.rules-modal .example-tiles .tile,
.rules-modal .example-tiles .tile.favor,
.rules-modal .tile.red,
.rules-modal .tile.blue,
.rules-modal .tile.green,
.rules-modal .tile.orange,
.rules-modal .tile.grey,
.rules-modal .tile.purple,
.rules-modal .tile.golden {
  position: relative !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  flex: 0 0 54px !important;
}
.rules-modal .tile img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  z-index: 0 !important;
}
.rules-modal .tile span {
  position: relative !important;
  z-index: 2 !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  display: block !important;
  text-align: center !important;
  margin-top: 14px !important;
}
.rules-modal .tile small {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 5px !important;
  z-index: 2 !important;
  font-size: .34rem !important;
  text-align: center !important;
}


/* v0.32 reward layout + difficulty polish */
.reward-grid {
  grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr);
  grid-template-areas:
    "coins steal"
    "hand steal"
    "burn burn";
  align-items: stretch;
}
.reward-coins { grid-area: coins; }
.reward-hand { grid-area: hand; }
.reward-steal { grid-area: steal; }
.reward-burn-card { grid-area: burn; }
.reward-steal .reward-suits { height: calc(100% - 72px); align-content: start; }
@media (max-width: 900px){
  .reward-grid { grid-template-columns:1fr; grid-template-areas: "coins" "hand" "steal" "burn"; }
}

/* v0.33 polish: hand examples, no overlap, final score */
.hand-panel { position: relative; overflow: visible; }
.hand-header { align-items: flex-start; gap: 10px; }
#selectionInfo {
  max-width: 520px;
  margin-top: 4px;
  padding-right: 8px;
  position: relative;
  z-index: 2;
}
.learned-hand-strip {
  margin-top: 10px;
  padding-top: 10px;
  clear: both;
}
.learned-hands {
  grid-template-columns: repeat(5, minmax(128px, 1fr));
}
.learned-hand-card {
  min-height: 104px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mini-hand-example {
  display:flex;
  gap:3px;
  align-items:center;
  margin:2px 0 4px;
  min-height:20px;
  flex-wrap:wrap;
}
.mini-seal {
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  font-size:.55rem;
  font-weight:900;
  color:#ffeaa8;
  text-shadow:0 1px 2px #000;
  box-shadow: inset 0 0 5px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35);
  border:1px solid rgba(255,220,120,.35);
}
.mini-red{background:#8b1d22}.mini-blue{background:#145e8a}.mini-green{background:#236b3b}.mini-orange{background:#b65a14}.mini-grey{background:#8b8b86}.mini-purple{background:#54228a}.mini-golden{background:#b88a11}
.hand-choice-card .mini-hand-example .mini-seal { width:22px; height:22px; font-size:.64rem; }
.final-score-modal { max-width:700px; text-align:center; background:linear-gradient(rgba(38,21,18,.88), rgba(10,5,4,.98)), url('assets/final-cover.jpeg') center/cover no-repeat; }
.final-score-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:24px auto; max-width:520px; }
.final-score-grid div { border:1px solid rgba(222,174,74,.52); border-radius:18px; background:rgba(0,0,0,.42); padding:20px; }
.final-score-grid strong { display:block; margin-top:8px; color:var(--gold); font-size:3rem; line-height:1; }
.home-lore-box { max-width: 620px; }
.home-lore-box p { font-size: .9rem !important; }
@media (max-width: 1100px){
  .learned-hands { grid-template-columns: repeat(3, minmax(120px,1fr)); }
}
@media (max-width: 760px){
  .final-score-grid { grid-template-columns:1fr; }
  .learned-hands { grid-template-columns: 1fr; }
}

/* v0.35 tutorial/logic/balance polish */
.learned-hand-card .mini-hand-example { gap: 5px; justify-content: center; margin: 7px 0; }
.mini-hand-example .mini-seal { width: 34px; height: 34px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background-size:contain; background-position:center; background-repeat:no-repeat; color:#fff7d0; text-shadow:0 2px 2px #000; font-size:1.05rem; line-height:1; }
.mini-hand-example .mini-seal b { display:block; transform: translateY(-1px); }
.mini-red{background-image:url('assets/War.png')}.mini-blue{background-image:url('assets/Trade.png')}.mini-green{background-image:url('assets/Finance.png')}.mini-orange{background-image:url('assets/Tech.png')}.mini-grey{background-image:url('assets/Politics.png')}.mini-purple{background-image:url('assets/Crime.png')}.mini-golden{background-image:url('assets/Golden.png')}
.example-tiles .tile.favor, .rules-modal .example-tiles .tile { width:66px !important; height:66px !important; flex:0 0 auto; }
.example-tiles .tile.favor span, .rules-modal .example-tiles .tile span { font-size:1.62rem !important; top: 44% !important; }
.example-tiles .tile.favor small, .rules-modal .example-tiles .tile small { font-size:.45rem !important; bottom:7px !important; }
.tiny-muted { display:block; font-size:.7rem; color:var(--muted); margin-top:3px; }
.tutorial-demo-screen { margin: 10px 0 14px; }
.tutorial-mini-screen { border:1px solid var(--gold); border-radius:16px; padding:14px; background:rgba(20,7,4,.76); box-shadow:0 12px 24px rgba(0,0,0,.34); }
.tutorial-mini-screen h3 { margin:0 0 10px; color:var(--gold); }
.tutorial-mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tutorial-mini-grid > div { border:1px solid var(--border); border-radius:12px; padding:10px; background:rgba(255,255,255,.04); }
.tutorial-mini-grid b { display:block; color:var(--gold); margin-bottom:5px; }
.tutorial-mini-grid button { padding:6px 10px; font-size:.85rem; }
.hand-score-invalid + .hand-score-detail, .hand-score-detail { line-height:1.25; }

/* v0.36 polish: market redraw button, styled warning, tutorial mock screens */
#buyMarketRedrawBtn {
  border-color: rgba(255,221,130,.55);
  background: linear-gradient(180deg, rgba(91,62,30,.96), rgba(42,25,16,.96));
  box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 0 14px rgba(230,181,68,.10);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
#buyMarketRedrawBtn:hover {
  transform: translateY(-3px) scale(1.015);
  filter: brightness(1.12);
  box-shadow: 0 14px 28px rgba(0,0,0,.34), 0 0 18px rgba(222,174,74,.24);
}
#buyMarketRedrawBtn:active { transform: translateY(1px) scale(.985); filter: brightness(.96); }
.warning-modal {
  max-width: 560px;
  text-align: center;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, #3b261e, #130b0a);
  box-shadow: 0 25px 80px rgba(0,0,0,.78), 0 0 36px rgba(222,174,74,.22);
}
.warning-modal h2 { color: var(--gold); }
.warning-modal p { color: var(--text); line-height: 1.45; margin: 14px 0 20px; }
.tutorial-full-mock {
  max-height: 42vh;
  overflow: auto;
  border: 1px solid rgba(222,174,74,.55);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(49,29,22,.95), rgba(16,8,7,.98));
  box-shadow: 0 18px 42px rgba(0,0,0,.42);
}
.tutorial-full-mock h2 { color: var(--gold); margin-bottom: 4px; }
.tutorial-full-mock .reward-grid,
.tutorial-full-mock .market-grid { margin-top: 12px; }
.tutorial-reward-grid { grid-template-columns: 1fr 1fr !important; grid-template-areas: "coins hand" "steal steal" "burn burn" !important; }
.tutorial-market-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.tutorial-full-mock .market-card { cursor: default; }
.tutorial-full-mock .mini-hand-example { justify-content: flex-start; }
@media (max-width: 780px){
  .tutorial-reward-grid, .tutorial-market-grid { grid-template-columns: 1fr !important; grid-template-areas: unset !important; }
}

/* v0.37 tutorial live screens + beginner tips */
body.tutorial-live-screen .overlay:not(#tutorialOverlay):not(.hidden) {
  z-index: 72;
  pointer-events: none;
}
body.tutorial-live-screen #tutorialOverlay { z-index: 90; }
body.tutorial-live-screen #tutorialSpotlight { z-index: 91; }
body.tutorial-live-screen #tutorialOverlay .tutorial-modal { z-index: 92; }
body.beginner-tips-on [data-help] { position: relative; }
body.beginner-tips-on [data-help]:hover::after {
  content: attr(data-help);
  position: absolute;
  z-index: 3000;
  left: 12px;
  top: 100%;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(222,174,74,.65);
  background: rgba(34,18,14,.96);
  color: #f7e6c0;
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
  font-size: .9rem;
  line-height: 1.25;
  pointer-events: none;
}
body.beginner-tips-on [data-help]:hover::before {
  content:'';
  position:absolute;
  left: 26px;
  top: calc(100% - 5px);
  z-index: 3001;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(222,174,74,.65);
}

/* v0.38 beginner tip stability + undo */
body.beginner-tips-on [data-help]:hover::after,
body.beginner-tips-on [data-help]:hover::before { content: none !important; display: none !important; }
#beginnerTipTooltip {
  position: fixed;
  z-index: 4000;
  max-width: 300px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(222,174,74,.65);
  background: rgba(34,18,14,.97);
  color: #f7e6c0;
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
  font-size: .9rem;
  line-height: 1.25;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .12s ease, transform .12s ease;
}
#beginnerTipTooltip.visible { opacity: 1; transform: translateY(0); }
.tips-status-note {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2500;
  padding: 8px 14px;
  border: 1px solid rgba(222,174,74,.45);
  border-radius: 999px;
  background: rgba(24,12,10,.88);
  color: #f7e6c0;
  font-size: .85rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
#undoBtn:not(:disabled){ border-color: rgba(222,174,74,.55); }

/* v0.39 undo, tech ordering, rule-example alignment */
#marketUndoBtn:not(:disabled){ border-color: rgba(222,174,74,.55); }
.tech-playing-card { position: relative; }
.tech-order-controls {
  position: absolute;
  right: 7px;
  top: 7px;
  z-index: 5;
  display: flex;
  gap: 3px;
}
.tech-order-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0 !important;
  border-radius: 50%;
  font-size: .85rem !important;
  font-weight: 900;
  line-height: 1;
  color: #1b0b07 !important;
  background: linear-gradient(180deg, #f7d66b, #b67a1e) !important;
  border: 1px solid rgba(255,232,150,.95) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow: none !important;
}
.tech-order-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.12);
}
.tech-order-btn:active:not(:disabled) {
  transform: translateY(1px) scale(.96);
}
.tech-order-btn:disabled { opacity: .35; cursor: default; filter: grayscale(.6); }
.rules-modal .example-tiles .tile,
#tutorialExample .tile {
  position: relative !important;
  display: block !important;
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  min-height: 66px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.rules-modal .example-tiles .tile img,
#tutorialExample .tile img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  z-index: 0 !important;
}
.rules-modal .example-tiles .tile span,
#tutorialExample .tile span {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 46% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  text-align: center !important;
  margin: 0 !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  color: #fff2b0 !important;
  text-shadow: 0 2px 3px #000 !important;
}
.rules-modal .example-tiles .tile small,
#tutorialExample .tile small {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 8px !important;
  z-index: 2 !important;
  text-align: center !important;
  margin: 0 !important;
  font-size: .44rem !important;
  color: #ffe89a !important;
}

/* v0.43 title, boss intro, reward claim polish */
.button-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:10px;
  padding:10px 14px;
  min-height:38px;
  font-weight:800;
  border:1px solid rgba(222,174,74,.35);
  background:linear-gradient(180deg, rgba(70,50,40,.85), rgba(30,20,18,.92));
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.25);
}
.button-link:hover { transform:translateY(-2px); filter:brightness(1.1); }
.gf-link { color:#ffe38b; border-color:rgba(238,191,78,.55); }
.opponent-intro-modal { animation: bossRise .55s ease both; }
@keyframes bossRise { from { opacity:0; transform: translateY(26px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } }
.opponent-intro-portrait { animation: portraitSlide .7s ease both; }
@keyframes portraitSlide { from { opacity:0; transform: translateX(-26px) rotate(-2deg); } to { opacity:1; transform: translateX(0) rotate(0); } }
.intro-boss-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
.boss-rule, .disruption-rule { text-align:left; min-height:82px; border-color:rgba(238,191,78,.5) !important; background:rgba(0,0,0,.34) !important; }
.boss-rule strong, .disruption-rule strong { display:block; margin-top:6px; font-size:1rem; line-height:1.25; color:#ffe6a0; }
.disruption-rule { border-color:rgba(255,120,90,.45) !important; }
.disruption-rule .label { color:#ffb59d; }
.threat-meter { margin:10px auto 2px; padding:8px 14px; border:1px solid rgba(222,174,74,.35); border-radius:999px; display:inline-flex; gap:10px; align-items:center; background:rgba(0,0,0,.35); }
.threat-meter span { text-transform:uppercase; font-size:.72rem; letter-spacing:.09em; color:var(--muted); }
.threat-meter b { color:#f1c85d; letter-spacing:.08em; text-shadow:0 0 10px rgba(241,200,93,.35); }
.claim-code { display:inline-block; margin:6px auto 10px; padding:12px 18px; border-radius:12px; border:1px solid rgba(255,229,142,.65); color:#ffe68d; background:rgba(0,0,0,.5); font-size:1.35rem; letter-spacing:.08em; font-weight:900; box-shadow:0 0 18px rgba(238,191,78,.18); }
.expansion-card.chosen img { animation: expansionChosen .75s ease both; }
@keyframes expansionChosen { 0%{ transform:scale(1); } 55%{ transform:scale(1.08) rotate(-1deg); } 100%{ transform:scale(1.02); } }
@media (max-width: 760px){ .intro-boss-grid { grid-template-columns:1fr; } }

/* v0.44 home polish and opponent reminder */
.home-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 12px !important;
  max-width: 520px;
  margin: 22px auto 0 !important;
  align-items: stretch !important;
}
.home-actions button,
.home-actions .button-link {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}
.home-actions #startGameBtn {
  grid-column: 1 / -1;
  min-height: 58px;
  font-size: 1.05rem;
}
.home-actions .button-link,
.home-actions .secondary {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.home-actions .button-link:hover,
.home-actions .secondary:hover,
.home-actions #startGameBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.28), 0 0 18px rgba(220,166,58,.18);
}
.home-actions .button-link:active,
.home-actions .secondary:active,
.home-actions #startGameBtn:active {
  transform: translateY(1px) scale(.99);
}
.opponent-status-art img {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.opponent-status-art img:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 0 2px rgba(220,166,58,.55), 0 10px 22px rgba(0,0,0,.35);
  border-color: var(--gold);
}
.opponent-status-art::after {
  content: 'Click portrait for details';
  display: block;
  font-size: .62rem;
  line-height: 1;
  color: var(--muted);
  margin-top: 4px;
  text-align: center;
  opacity: .78;
}
@media (max-width: 620px) {
  .home-actions { grid-template-columns: 1fr; max-width: 360px; }
}

/* v0.45 release-candidate market/spoils references + combo tech polish */
.decision-reference-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin:12px 0 16px;
}
.decision-reference-panel{
  border:1px solid rgba(222,174,74,.32);
  border-radius:14px;
  padding:10px;
  background:rgba(0,0,0,.24);
  max-height:190px;
  overflow:auto;
}
.decision-reference-panel h3{
  margin:0 0 8px;
  color:var(--gold);
  font-size:.95rem;
}
.reference-tech-list,.reference-hand-list{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap:8px;
}
.reference-tech-card,.reference-hand-card{
  border:1px solid rgba(222,174,74,.22);
  border-radius:10px;
  padding:8px;
  background:rgba(47,31,24,.62);
  text-align:left;
}
.reference-tech-card strong,.reference-hand-card strong{
  display:block;
  color:#f2cf70;
  font-size:.78rem;
  line-height:1.1;
  margin-bottom:4px;
}
.reference-tech-card span,.reference-hand-card span,.small-ref{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  line-height:1.16;
}
.reward-reference-grid{ margin-top:10px; }
@media(max-width:900px){ .decision-reference-grid{grid-template-columns:1fr;} }


/* v0.51 reconstruction polish */
.start-menu .mid-run-only { display:none !important; }
.mid-run-menu .start-only { display:none !important; }
.mid-run-menu .home-actions #returnGameBtn { grid-column: 1 / -1; min-height: 58px; font-size: 1.05rem; }
.mid-run-menu .home-actions #homeNewRunBtn { grid-column: 1 / -1; }
.button-link, button { transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease; }
.button-link:hover, button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.button-link:active, button:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.tips-status-note {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 95;
  max-width: min(720px, calc(100vw - 28px)); text-align: center;
  background: rgba(15,10,8,.88); border: 1px solid rgba(215,173,75,.45);
  color: var(--muted); border-radius: 999px; padding: 8px 14px; font-size: .82rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.38);
}
.expansion-card img { opacity: 1 !important; }
.expansion-options.reward-locked { grid-template-columns: minmax(260px, 620px); justify-content: center; }
.expansion-card.locked-reward { width: min(620px, 90vw); margin: 0 auto; transform: scale(1.03); }
.expansion-card.hidden { display: none !important; }
.claim-area button, .claim-area .button-link, .final-score-modal .button-link { font-size: .95rem !important; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.forced-pass.result-card { border-color:#ffb06e; box-shadow:0 0 42px rgba(255,150,70,.38), 0 25px 80px rgba(0,0,0,.75); }

/* v0.60 campaign balance, mobile and premium presentation pass */
html, body, #app { max-width: 100%; overflow-x: clip; }
button, .button-link, input, [role="button"] { touch-action: manipulation; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, .button-link:focus-visible, [role="button"]:focus-visible, input:focus-visible {
  outline: 3px solid #fff0ad;
  outline-offset: 3px;
}

body::after {
  content:"";
  position:fixed;
  inset:-18%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,198,77,.14), transparent 24%),
    radial-gradient(circle at 82% 38%, rgba(137,38,32,.12), transparent 27%),
    radial-gradient(circle at 54% 88%, rgba(35,90,116,.11), transparent 25%);
  filter:blur(18px);
  animation:ambientDrift 14s ease-in-out infinite alternate;
}
@keyframes ambientDrift { from{ transform:translate3d(-1.5%,-1%,0) scale(1); } to{ transform:translate3d(1.5%,1%,0) scale(1.045); } }

.topbar {
  position:relative;
  z-index:4;
  box-shadow:0 10px 35px rgba(0,0,0,.38), inset 0 -1px 0 rgba(255,220,125,.12);
  backdrop-filter:blur(12px);
}
.panel {
  position:relative;
  isolation:isolate;
  border-color:rgba(229,185,79,.38);
  box-shadow:0 15px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,238,190,.045), 0 0 0 1px rgba(0,0,0,.15);
}
.panel::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(125deg, rgba(255,225,145,.055), transparent 28%, transparent 70%, rgba(173,74,46,.045));
}
.panel:hover { border-color:rgba(229,185,79,.48); }

.opponent-kicker {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#ffbd9d;
  font-weight:900;
  letter-spacing:.14em;
}
.opponent-kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:#e16b4d; box-shadow:0 0 12px #e16b4d; }
.opponent-area {
  border:1px solid rgba(222,95,70,.55) !important;
  background:linear-gradient(100deg, rgba(104,26,21,.25), rgba(0,0,0,.22)) !important;
  box-shadow:inset 0 0 26px rgba(138,36,28,.12), 0 0 22px rgba(110,30,23,.10);
}
.player-area {
  border:1px solid rgba(218,174,73,.48) !important;
  background:linear-gradient(100deg, rgba(103,72,22,.16), rgba(0,0,0,.22)) !important;
  box-shadow:inset 0 0 26px rgba(218,174,73,.08);
}
.opponent-area h3 { display:flex; align-items:center; gap:8px; color:#ffd8ca; }
.opponent-tag {
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  background:linear-gradient(180deg,#9a3c30,#5f201b);
  border:1px solid rgba(255,165,135,.55);
  color:#fff0e9;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.59rem;
  box-shadow:0 0 14px rgba(205,71,48,.22);
}
.opponent-status-art img { box-shadow:0 12px 28px rgba(0,0,0,.55), 0 0 22px rgba(205,74,49,.18); }

.pot-zone {
  width:min(680px,100%);
  justify-self:center;
  border:1px solid rgba(222,174,74,.28);
  border-radius:18px;
  background:radial-gradient(circle at 50% 20%, rgba(222,174,74,.15), rgba(0,0,0,.27) 68%);
  box-shadow:inset 0 0 22px rgba(222,174,74,.06), 0 8px 22px rgba(0,0,0,.26);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
#roundMessage { font-weight:800; line-height:1.3; color:#fff1c2; text-wrap:balance; }
.pot-zone.opening-message { border-color:rgba(255,218,113,.7); box-shadow:0 0 25px rgba(222,174,74,.2), inset 0 0 22px rgba(222,174,74,.1); }
.pot-zone.player-message { border-color:rgba(89,169,122,.55); background:radial-gradient(circle at 50% 20%,rgba(89,169,122,.15),rgba(0,0,0,.27) 68%); }
.pot-zone.opponent-message { border-color:rgba(222,95,70,.62); background:radial-gradient(circle at 50% 20%,rgba(155,46,37,.19),rgba(0,0,0,.3) 68%); }
.coin-stack { filter:drop-shadow(0 0 12px rgba(255,205,82,.48)); animation:premiumCoin 2.4s ease-in-out infinite; }
@keyframes premiumCoin { 0%,100%{ transform:translateY(0) rotate(-2deg); filter:drop-shadow(0 0 8px rgba(255,205,82,.35)); } 50%{ transform:translateY(-3px) rotate(2deg); filter:drop-shadow(0 0 18px rgba(255,220,112,.68)); } }

.tile.favor:not(.selected):hover { transform:translateY(-5px) scale(1.055); filter:brightness(1.12) drop-shadow(0 0 8px rgba(255,220,120,.3)); }
.tile.favor.selected { animation:selectedSealGlow 1.5s ease-in-out infinite alternate; }
@keyframes selectedSealGlow { from{ filter:brightness(1.08) drop-shadow(0 0 7px rgba(215,173,75,.55)); } to{ filter:brightness(1.18) drop-shadow(0 0 15px rgba(255,222,116,.9)); } }
.youtube-link { border-color:rgba(241,91,75,.65) !important; color:#ffd4cb !important; background:linear-gradient(180deg,rgba(116,35,29,.94),rgba(53,20,18,.96)) !important; }
.youtube-link::before { content:'▶'; margin-right:7px; font-size:.72em; color:#fff; }

.bet-safety-preview {
  min-height:48px;
  max-width:620px;
  margin:10px auto 0;
  padding:10px 13px;
  border:1px solid rgba(90,165,112,.42);
  border-radius:12px;
  background:rgba(30,82,46,.17);
  color:#d5efd8;
  font-size:.9rem;
  line-height:1.35;
}
.bet-safety-preview.danger { border-color:rgba(240,114,79,.72); background:rgba(128,36,27,.24); color:#ffd6c8; animation:riskPulse 1.4s ease-in-out infinite alternate; }
@keyframes riskPulse { from{ box-shadow:0 0 0 rgba(222,82,55,0); } to{ box-shadow:0 0 20px rgba(222,82,55,.18); } }
.bet-risk-overlay { z-index:1350 !important; background:rgba(0,0,0,.82); }
.bet-risk-modal { max-width:590px; }
.warning-seal { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 10px; border-radius:50%; border:2px solid #ffb06e; color:#ffcf9e; background:radial-gradient(circle,#812b20,#35120f); font-size:2rem; font-weight:900; box-shadow:0 0 28px rgba(240,94,55,.32); }
.risk-forecast { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 8px; }
.risk-forecast span { padding:12px; border:1px solid var(--border); border-radius:12px; background:rgba(0,0,0,.28); color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; }
.risk-forecast strong { display:block; color:#ffe09a; font-size:1.45rem; margin-top:5px; }
.modal-bet-control .bet-arrow { touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

.tutorial-progress { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.tutorial-progress-track { flex:1; height:6px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); box-shadow:inset 0 1px 3px rgba(0,0,0,.5); }
.tutorial-progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9b641d,#ffe089); box-shadow:0 0 12px rgba(255,214,104,.55); transition:width .32s ease; }
.tutorial-demo-caption { margin:8px 0 2px; padding:10px 12px; border-radius:12px; border:1px solid rgba(222,174,74,.35); background:rgba(222,174,74,.09); color:#ffe9ae; line-height:1.35; font-weight:700; }
.tutorial-example.has-example { position:relative; padding:8px 6px 14px; }
.tutorial-demo-piece { animation:tutorialSealDemo 2.7s var(--demo-delay,0s) ease-in-out infinite !important; }
@keyframes tutorialSealDemo { 0%,12%{ opacity:.48; transform:translateY(7px) scale(.92); filter:brightness(.75); } 28%,70%{ opacity:1; transform:translateY(-7px) scale(1.07); filter:brightness(1.2) drop-shadow(0 0 12px rgba(255,220,118,.7)); } 88%,100%{ opacity:.65; transform:translateY(0) scale(1); filter:brightness(.9); } }
.tutorial-spotlight { animation:spotlightBreathe 1.5s ease-in-out infinite alternate; }
@keyframes spotlightBreathe { from{ border-color:#d7ad4b; filter:brightness(.95); } to{ border-color:#ffe392; filter:brightness(1.16); } }

@media (max-width: 760px) {
  html, body, #app, .layout, .panel, .modal, .topbar { width:100%; max-width:100%; min-width:0; }
  body::after { opacity:.65; }
  .topbar { padding:9px 10px; gap:8px; }
  .brand-block { flex-direction:row !important; align-items:center !important; gap:9px; }
  .brand-logo { width:132px !important; max-height:42px !important; }
  .brand-block h1 { font-size:1.05rem; line-height:1; }
  .brand-block .subtitle { display:none; }
  .top-actions { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px !important; width:100%; }
  .top-actions button, .top-actions .button-link { min-width:0; min-height:38px; padding:7px 5px; font-size:.68rem; line-height:1.05; text-align:center; }
  .layout { padding:6px !important; gap:6px !important; display:block !important; }
  .panel { margin:0 0 7px !important; padding:10px !important; min-width:0 !important; }
  .duel-heading { align-items:center; gap:9px; }
  .opponent-status-art { display:block !important; flex:0 0 58px !important; }
  .opponent-status-art img { width:58px !important; height:72px !important; border-radius:10px !important; }
  .opponent-status-art::after { display:none; }
  .duel-copy { min-width:0; }
  .duel-copy h2 { font-size:.95rem; line-height:1.12; overflow-wrap:anywhere; }
  .duel-copy p { font-size:.72rem; line-height:1.15; }
  .duel-copy .label { font-size:.54rem; }
  .badge { padding:6px 8px; font-size:.72rem; flex:0 0 auto; }
  .score-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px !important; margin-top:9px !important; }
  .score-grid div { min-width:0; padding:7px 8px !important; }
  .score-grid div:last-child { grid-column:1 / -1; }
  .score-grid .label { font-size:.54rem; letter-spacing:.05em; }
  .score-grid strong, .bet-card strong, .opponent-bet-card strong { font-size:1.05rem !important; overflow-wrap:anywhere; }
  .table-panel, .table-zone { min-height:0 !important; }
  .table-zone { grid-template-rows:auto auto auto !important; gap:7px !important; }
  .played-area { min-height:94px !important; padding:8px !important; overflow:hidden !important; }
  .played-area h3 { font-size:.82rem; line-height:1.1; }
  .played-tiles { min-height:52px !important; gap:3px; }
  .hand-info { font-size:.72rem; margin-top:4px; }
  .pot-zone { padding:9px 8px !important; border-radius:14px; }
  .coin-stack { width:38px; height:38px; margin-bottom:2px; }
  #roundMessage { font-size:.78rem; }
  .hand-header { display:block; margin-bottom:8px !important; }
  #selectionInfo { padding:0; max-width:none; font-size:.78rem; }
  .hand-header .actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:9px; }
  .hand-header .actions button { min-width:0; min-height:42px; padding:7px 5px; font-size:.72rem; }
  #playerHand { justify-content:center; gap:2px !important; overflow:hidden !important; }
  .tile.favor, .played-area .tile.favor { width:46px !important; height:46px !important; }
  .tile.favor img { inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); }
  .tile.favor span { font-size:1.12rem !important; padding:1px 5px; }
  .tile.favor small { bottom:4px !important; font-size:.33rem !important; }
  .tile.favor.selected { transform:translateY(-5px) scale(1.04); }
  .learned-hands { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px; }
  .learned-hand-card { min-width:0; min-height:0; padding:8px; }
  .learned-hand-card span, .learned-hand-card small { font-size:.64rem; overflow-wrap:anywhere; }
  .senator-panel .senator-list { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:5px; }
  .senator-panel .tech-playing-card { width:145px !important; max-width:100%; }
  .overlay, .home-overlay { padding:6px !important; }
  .modal { width:calc(100vw - 12px) !important; max-height:96vh; padding:14px !important; border-radius:16px; }
  .home-modal { padding:18px 14px !important; }
  .home-logo { width:72%; max-height:70px; }
  .home-modal h2 { font-size:1.85rem; }
  .home-modal p { font-size:.9rem; margin-bottom:12px; }
  .home-lore-box { padding:10px; }
  .home-actions { gap:7px !important; margin-top:12px !important; }
  .home-actions button, .home-actions .button-link { min-height:44px; }
  .bet-stats { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px; }
  .bet-stats div { padding:8px; min-width:0; }
  .bet-stats div:last-child { grid-column:1 / -1; }
  .bet-stats strong { font-size:1.2rem; }
  .modal-bet-control { gap:9px; margin:12px 0 6px; }
  .modal-bet-control .bet-arrow { width:54px; height:54px; }
  .modal-bet-control input { width:88px; font-size:1.45rem; }
  .bet-safety-preview { font-size:.78rem; min-height:0; padding:8px 9px; }
  .risk-forecast { grid-template-columns:1fr; }
  .settings-row { align-items:stretch; flex-direction:column; padding:10px; }
  .settings-row input { width:100%; }
  .opponent-intro-layout { grid-template-columns:82px minmax(0,1fr) !important; gap:12px; align-items:start; }
  .opponent-intro-portrait { max-height:128px !important; border-radius:12px; }
  .opponent-intro-copy h2 { font-size:1.4rem; }
  .opponent-intro-copy h3 { font-size:.9rem; margin-bottom:4px; }
  .quote { font-size:.82rem; margin:5px 0 8px; }
  .intro-boss-grid { grid-column:1 / -1; }
  .power-box { padding:9px; margin:6px 0; }
  .tutorial-layer .tutorial-modal {
    left:8px !important; right:8px !important; width:auto !important; max-width:none !important;
    top:auto !important; bottom:max(12px,env(safe-area-inset-bottom)) !important;
    max-height:min(56dvh,420px) !important; overflow-y:auto !important;
    overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch;
  }
  .tutorial-layer .tutorial-modal .modal-actions {
    position:sticky; bottom:-1px; z-index:4;
    margin:14px -6px -2px; padding:10px 6px 5px;
    background:linear-gradient(180deg,rgba(24,17,15,0),#18110f 28%);
  }
  .tutorial-text { font-size:.91rem !important; }
  .tutorial-demo-caption { font-size:.78rem; }
  .tutorial-example .tile, #tutorialExample .tile { width:52px !important; height:52px !important; min-width:52px !important; min-height:52px !important; }
}

@media (max-width: 390px) {
  .top-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .learned-hands { grid-template-columns:1fr !important; }
  .tile.favor, .played-area .tile.favor { width:43px !important; height:43px !important; }
  .senator-panel .senator-list { grid-template-columns:1fr !important; justify-items:center; }
}

@media (min-width: 1121px) {
  .played-area {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto minmax(58px,1fr);
    column-gap:10px;
    align-items:start;
    padding:7px 9px !important;
  }
  .played-area h3 { grid-column:1; grid-row:1; min-width:0; }
  .played-area .hand-info { grid-column:2; grid-row:1; margin:0 !important; align-self:center; text-align:right; font-size:.76rem; max-width:520px; }
  .played-area .played-tiles { grid-column:1 / -1; grid-row:2; min-height:58px !important; }
  .pot-zone { padding:5px 10px !important; }
  .coin-stack { width:42px; height:42px; margin-bottom:2px; }
}

/* v0.66 blocked patterns, all-in hands and victory reward celebration */
.learned-hand-card { position:relative; overflow:hidden; isolation:isolate; }
.learned-hand-card.blocked {
  border-color:rgba(255,73,63,.9) !important;
  background:linear-gradient(180deg,rgba(81,29,26,.88),rgba(23,18,18,.96)) !important;
  box-shadow:inset 0 0 26px rgba(185,32,26,.34),0 0 15px rgba(220,46,38,.2) !important;
}
.learned-hand-card.blocked > :not(.blocked-hand-overlay) { filter:grayscale(1) brightness(.48); opacity:.48; }
.blocked-hand-overlay {
  position:absolute; inset:0; z-index:4; display:grid; place-items:center; pointer-events:none;
  background:linear-gradient(135deg,transparent 22%,rgba(102,0,0,.14) 23% 77%,transparent 78%);
}
.blocked-hand-overlay b {
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-57%) rotate(-7deg);
  color:#ff322b; font-family:Arial,sans-serif; font-size:5.4rem; line-height:1; font-weight:1000;
  text-shadow:0 2px 0 #530000,0 0 8px #ff4a3f,0 0 22px rgba(255,34,25,.75);
}
.blocked-hand-overlay em {
  align-self:end; width:100%; padding:7px 4px 6px; color:#fff; background:linear-gradient(90deg,#680e0b,#d02720,#680e0b);
  border-top:1px solid #ff8a80; font-style:normal; font-size:.78rem; font-weight:1000; letter-spacing:.15em; text-align:center;
  text-shadow:0 1px 2px #250000; box-shadow:0 -4px 16px rgba(211,31,24,.36);
}
.blocked-selection { display:inline-block; padding:6px 9px; border:1px solid #ee5147; border-radius:8px; background:rgba(122,18,14,.32); color:#ff9b91 !important; font-weight:900; }
.disruption-rule.forbidden-pattern { border:2px solid #e94e43 !important; box-shadow:inset 0 0 20px rgba(192,38,30,.2),0 0 18px rgba(225,59,48,.2); }
.disruption-rule.forbidden-pattern strong { color:#ffaca4 !important; }
.disruption-rule.locked-schematic { border:2px solid #e94e43 !important; box-shadow:inset 0 0 20px rgba(192,38,30,.2),0 0 18px rgba(225,59,48,.2); }
.disruption-rule.locked-schematic strong { color:#ffaca4 !important; }
.tech-playing-card.blocked-technology {
  border:2px solid #e94e43 !important;
  box-shadow:inset 0 0 36px rgba(35,35,35,.75),0 0 20px rgba(221,48,39,.4) !important;
}
.tech-playing-card.blocked-technology > :not(.blocked-technology-overlay) { filter:grayscale(1) brightness(.42); opacity:.38; }
.tech-playing-card.blocked-technology .tech-order-controls { visibility:hidden; }
.blocked-technology-overlay {
  position:absolute; inset:0; z-index:20; display:grid; place-items:center; pointer-events:none;
  background:linear-gradient(145deg,rgba(46,46,46,.62),rgba(89,10,8,.36));
}
.blocked-technology-overlay b {
  color:#f52822; font-family:Arial,sans-serif; font-size:clamp(5.8rem,9vw,8rem); line-height:1; font-weight:1000;
  transform:rotate(-8deg); text-shadow:0 3px 0 #590000,0 0 12px #ff4037,0 0 30px rgba(255,32,24,.75);
}
.blocked-technology-overlay em {
  position:absolute; left:0; right:0; bottom:10%; padding:10px 4px; color:#fff; font-style:normal;
  font-size:.9rem; font-weight:1000; letter-spacing:.18em; text-align:center; background:linear-gradient(90deg,#5e0d0a,#d02c24,#5e0d0a);
  border-block:1px solid #ff8f86; box-shadow:0 0 20px rgba(205,36,29,.55); text-shadow:0 1px 2px #240000;
}

.all-in-overlay { z-index:1600 !important; background:radial-gradient(circle at 50% 45%,rgba(133,29,20,.58),rgba(0,0,0,.93) 65%) !important; overflow:hidden; }
.all-in-overlay::before,.all-in-overlay::after { content:""; position:absolute; inset:-40%; pointer-events:none; }
.all-in-overlay::before { background:conic-gradient(from 20deg,transparent 0 7%,rgba(255,201,75,.12) 8% 9%,transparent 10% 20%); animation:allInRays 8s linear infinite; }
.all-in-overlay::after { background:radial-gradient(circle,rgba(255,224,130,.22) 0 2px,transparent 3px) 0 0/42px 42px; animation:allInSparks 1.7s ease-out both; }
.all-in-card {
  position:relative; z-index:2; width:min(650px,calc(100vw - 28px)); padding:38px 28px 32px; text-align:center;
  border:2px solid #e7b84d; border-radius:26px; background:linear-gradient(155deg,rgba(84,27,20,.97),rgba(22,10,9,.98));
  box-shadow:0 0 0 5px rgba(52,16,12,.85),0 0 75px rgba(238,142,44,.42),0 35px 90px rgba(0,0,0,.8);
  animation:allInCardSlam .62s cubic-bezier(.2,1.45,.4,1) both;
}
.all-in-chip {
  width:116px; height:116px; margin:-82px auto 18px; display:grid; place-content:center; border-radius:50%;
  border:7px dashed #fff0b0; outline:4px solid #b82d24; background:radial-gradient(circle,#d34b32 0 44%,#781b17 46% 62%,#d7a83a 64% 72%,#3d120f 74%);
  color:#fff4cc; text-shadow:0 2px 2px #310000; box-shadow:0 0 32px rgba(255,176,53,.58); transform:rotate(-8deg); animation:allInChipSpin .8s .1s cubic-bezier(.16,1.4,.35,1) both;
}
.all-in-chip span,.all-in-chip b { display:block; font-family:Georgia,serif; font-weight:1000; letter-spacing:.08em; line-height:.9; }
.all-in-chip span { font-size:1.1rem; }.all-in-chip b { font-size:2.25rem; }
.all-in-kicker { margin:0 0 7px; color:#efbf54; font-size:.74rem; font-weight:900; letter-spacing:.23em; }
.all-in-card h2 { margin:0; color:#fff0bc; font-size:clamp(1.7rem,5vw,3.25rem); line-height:1.05; text-shadow:0 0 22px rgba(255,177,64,.42); text-wrap:balance; }
.all-in-card > p:not(.all-in-kicker) { max-width:520px; margin:14px auto; color:#efdac5; line-height:1.45; }
.all-in-rule { display:inline-block; padding:9px 14px; border:1px solid rgba(255,210,101,.55); border-radius:999px; color:#ffda7a; background:rgba(0,0,0,.3); font-size:.73rem; font-weight:900; letter-spacing:.1em; }
.score-grid .locked-pot { position:relative; border-color:#e7b84d !important; box-shadow:inset 0 0 18px rgba(225,167,48,.14),0 0 14px rgba(225,167,48,.16); }
.score-grid .locked-pot::after { content:'LOCKED'; position:absolute; top:5px; right:6px; padding:2px 5px; border-radius:999px; background:#7b211a; color:#ffe09a; font-size:.48rem; font-weight:1000; letter-spacing:.08em; }
@keyframes allInCardSlam { 0%{opacity:0;transform:scale(1.7) rotate(4deg)} 55%{opacity:1;transform:scale(.94) rotate(-1deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes allInChipSpin { from{opacity:0;transform:scale(.2) rotate(-260deg)} to{opacity:1;transform:scale(1) rotate(-8deg)} }
@keyframes allInRays { to{transform:rotate(360deg)} }
@keyframes allInSparks { from{opacity:0;transform:scale(.45) rotate(0)} 40%{opacity:1} to{opacity:0;transform:scale(1.1) rotate(12deg)} }

.bet-safety-preview.unavoidable { border-color:rgba(221,174,74,.55); background:rgba(105,72,20,.18); color:#f3dda6; }
.market-price small { display:block; margin-top:3px; color:var(--muted); font-size:.65rem; font-weight:600; text-transform:none; letter-spacing:0; }

.expansion-card { position:relative; overflow:visible; }
.reward-gold-stamp {
  position:absolute; top:18px; right:-20px; z-index:5; width:104px; height:104px; display:none; place-content:center; border-radius:50%;
  border:5px double #fff0a6; outline:3px solid #8b5b08; background:radial-gradient(circle,#ffe37d 0 34%,#dba52c 36% 59%,#774307 61% 66%,#efc752 68%);
  color:#4b2703; font-style:normal; text-align:center; transform:rotate(13deg); box-shadow:0 0 0 5px rgba(219,161,34,.2),0 0 35px rgba(255,208,80,.78),0 8px 18px rgba(0,0,0,.55);
}
.reward-gold-stamp b,.reward-gold-stamp small { display:block; line-height:1; }.reward-gold-stamp b { font-size:.95rem; letter-spacing:.08em; }.reward-gold-stamp small { margin-top:5px; font-size:.55rem; letter-spacing:.16em; font-weight:1000; }
.expansion-card.chosen .reward-gold-stamp { display:grid; animation:goldStampStrike .75s cubic-bezier(.18,1.55,.35,1) both; }
.expansion-card.chosen::after { content:""; position:absolute; inset:-3px; border-radius:20px; pointer-events:none; background:linear-gradient(115deg,transparent 28%,rgba(255,244,184,.55) 46%,transparent 64%); transform:translateX(-130%); animation:rewardShine 1.1s .25s ease-out both; }
.reward-confetti { z-index:1700; pointer-events:none; width:12px; height:20px; box-shadow:0 0 8px currentColor; }
.reward-confetti:nth-child(2n) { border-radius:50%; width:11px; height:11px; }.reward-confetti:nth-child(7n) { background:#fff0a7; }
@keyframes goldStampStrike { 0%{opacity:0;transform:scale(2.8) rotate(-32deg)} 58%{opacity:1;transform:scale(.84) rotate(17deg)} 78%{transform:scale(1.12) rotate(11deg)} 100%{transform:scale(1) rotate(13deg)} }
@keyframes rewardShine { to{transform:translateX(130%)} }
@media (max-width:760px){
  .all-in-card { padding:32px 17px 23px; }.all-in-chip { width:92px;height:92px;margin-top:-68px }.all-in-chip b{font-size:1.7rem}
  .reward-gold-stamp { width:82px;height:82px;right:4px;top:8px }.reward-gold-stamp b{font-size:.75rem}.reward-gold-stamp small{font-size:.48rem}
}

/* Keep every home-menu action reachable on shorter laptop displays. */
@media (max-height: 760px) and (min-width: 761px) {
  .home-overlay { padding: 12px; }
  .home-modal {
    max-height: calc(100dvh - 24px);
    padding: 18px 28px;
  }
  .home-logo { width: min(400px, 64%); max-height: 72px; margin-bottom: 4px; }
  .home-modal h2 { font-size: 2.2rem; margin-bottom: 6px; }
  .home-modal > p { font-size: .96rem; line-height: 1.35; margin-bottom: 10px; }
  .home-lore-box { margin: 8px auto 10px; padding: 10px 14px; }
  .home-lore-box h3 { margin-bottom: 4px; font-size: 1rem; }
  .home-lore-box p { font-size: .82rem !important; line-height: 1.3 !important; }
  .home-actions { gap: 8px !important; margin-top: 10px !important; }
  .home-actions button,
  .home-actions .button-link { min-height: 40px; padding-block: 8px; }
  .home-actions #startGameBtn,
  .mid-run-menu .home-actions #returnGameBtn { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}