:root {
  --bg: #1a1410; --panel: #2b2118; --ink: #e8d9b5; --dim: #9a8a6a;
  --bone: #efe6c9; --blood: #a7302a; --moss: #4f6b3a; --gold: #d8a740;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Courier New", monospace; }
#app { max-width: 980px; margin: 0 auto; padding: 12px; }
header { text-align: center; margin-bottom: 8px; }
h1 { margin: 0; font-size: 28px; letter-spacing: 6px; color: var(--bone); text-shadow: 3px 3px 0 var(--blood); }
#status { font-size: 13px; color: var(--ink); min-height: 18px; margin-top: 4px; }
main { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#arena { display: flex; gap: 12px; align-items: flex-start; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
#board { width: 400px; height: 400px; border: 4px solid #3a2c20; box-shadow: 0 0 0 2px #0a0806, 6px 6px 0 #0a0806; cursor: pointer; }
#scale-canvas { width: 120px; height: 400px; }
#tablecol { width: 300px; display: flex; flex-direction: column; gap: 6px; }
#lanes { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 3px solid #0a0806; padding: 8px; box-shadow: 4px 4px 0 #0a0806; }
.row { display: flex; gap: 6px; justify-content: space-between; }
.slot { width: 62px; height: 84px; border: 2px dashed #5a4632; display: flex; align-items: center; justify-content: center; position: relative; background: #221a13; }
.slot.target { border: 2px solid var(--gold); cursor: pointer; background: #3a2e18; }
.slot.target:hover { background: #4a3a1c; }
.creature { transition: transform 0.18s steps(4), opacity 0.3s steps(4); will-change: transform; }
.creature.enter { transform: translateY(-40px) scale(0.6); opacity: 0; }
.creature.lunge { animation: lunge 0.28s steps(4) 1; }
@keyframes lunge { 0% { transform: translateY(0); } 40% { transform: translateY(var(--lunge, -26px)); } 100% { transform: translateY(0); } }
.creature.shake { animation: shake 0.3s steps(6) 1; }
@keyframes shake { 0% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } 100% { transform: translateX(0); } }
.creature.dying { animation: crumble 0.42s steps(6) forwards; pointer-events: none; }
@keyframes crumble { 0% { transform: translateY(0) rotate(0); opacity: 1; filter: none; } 50% { transform: translateY(6px) rotate(-6deg); opacity: 0.8; filter: brightness(1.6); } 100% { transform: translateY(30px) rotate(12deg) scale(0.4); opacity: 0; } }
.creature .stats .h.bump { animation: bump 0.3s steps(3) 1; }
@keyframes bump { 0% { transform: scale(1); color: var(--blood); } 50% { transform: scale(1.8); color: #fff; } 100% { transform: scale(1); } }
#scale-canvas.flash { animation: flash 0.3s steps(2) 1; }
@keyframes flash { 0% { filter: brightness(2) sepia(1) hue-rotate(-30deg); } 100% { filter: none; } }
.card { transition: transform 0.12s steps(3), box-shadow 0.12s steps(3); }
.creature { width: 56px; height: 76px; background: var(--bone); color: #2b2118; border: 3px solid #0a0806; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3px; font-size: 9px; font-weight: bold; box-shadow: 2px 2px 0 #0a0806; }
.creature canvas { width: 32px; height: 32px; }
.creature.foe { background: #3a2c20; color: var(--bone); }
.creature .stats { display: flex; gap: 6px; font-size: 11px; }
.creature .stats .p { color: var(--blood); } .creature.foe .stats .p { color: #ff7a6e; }
.creature .stats .h { color: var(--moss); } .creature.foe .stats .h { color: #9fd08a; }
.creature.sac { outline: 3px solid var(--blood); cursor: pointer; }
.creature.sac.picked { outline-color: var(--gold); transform: translateY(-4px); }
.creature .sigil { font-size: 8px; color: #6b4a9a; }
#phase-controls { display: flex; align-items: center; gap: 8px; min-height: 30px; }
#phase-hint { font-size: 11px; color: var(--gold); }
.side { width: 100%; max-width: 900px; }
.label { font-size: 11px; letter-spacing: 2px; color: var(--dim); margin: 2px 0; }
.hand { display: flex; gap: 6px; min-height: 84px; flex-wrap: wrap; }
.card { width: 56px; height: 80px; background: var(--bone); color: #2b2118; border: 3px solid #0a0806; box-shadow: 3px 3px 0 #0a0806;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px; font-size: 9px; font-weight: bold; }
.card canvas { width: 32px; height: 32px; }
.card.mine { cursor: pointer; }
.card.mine:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #0a0806; }
.card.disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.card.selected { outline: 3px solid var(--gold); transform: translateY(-6px); }
.card .cost { color: var(--blood); font-size: 10px; }
.card.back { background: #3a2c20; color: var(--dim); justify-content: center; }
footer { margin-top: 10px; }
#log { font-size: 11px; color: var(--ink); height: 84px; overflow-y: auto; background: var(--panel); padding: 6px; border: 2px solid #0a0806; }
#log .jev { color: var(--gold); }
#log .combat { color: #ff9a8e; }
#controls { display: flex; gap: 14px; align-items: center; margin-top: 8px; font-size: 12px; flex-wrap: wrap; }
button { font-family: inherit; font-size: 12px; letter-spacing: 2px; background: var(--blood); color: var(--bone); border: 3px solid #0a0806; box-shadow: 3px 3px 0 #0a0806; padding: 6px 12px; cursor: pointer; }
button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0a0806; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button[hidden] { display: none; }
#blunder { background: #3a2c20; }
#jev-state { color: var(--gold); }
#overlay[hidden] { display: none; }
#overlay { position: fixed; inset: 0; background: rgba(10, 8, 6, 0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
#overlay-text { font-size: 26px; letter-spacing: 4px; color: var(--bone); text-shadow: 3px 3px 0 var(--blood); text-align: center; }
@media (max-width: 900px) {
  #arena { flex-direction: column; align-items: center; }
  #board { width: 320px; height: 320px; } #scale-canvas { width: 96px; height: 320px; }
}