* { box-sizing: border-box; }
:root {
  --ink:#13233a; --gold:#f5c75c; --paper:#f6ecd2; --blue:#1677bd;
  --red:#b7352d; --deep:#0c1a2b; --cream:#fff8e7;
}
html, body { margin:0; min-height:100%; font-family: Georgia, "Times New Roman", serif; background:#0b1827; color:white; }
button { font:inherit; }
button:disabled { opacity:.45; cursor:not-allowed; filter:grayscale(.6); }
.hidden { display:none !important; }

.screen { min-height:100vh; }
.setup-screen {
  padding:28px; text-align:center;
  background:
    radial-gradient(circle at 50% 20%, rgba(93,181,255,.28), transparent 28%),
    linear-gradient(#1d4f7a 0 34%, #315e4a 34% 70%, #172e2b 70%);
  position:relative; overflow:hidden;
}
.setup-screen:after {
  content:""; position:absolute; inset:auto 0 0; height:34%;
  background:linear-gradient(135deg, transparent 0 20%, rgba(255,255,255,.05) 20% 21%, transparent 21% 45%, rgba(255,255,255,.04) 45% 46%, transparent 46%);
  pointer-events:none;
}
.title-wrap { position:relative; z-index:1; margin:auto; max-width:1000px; }
.title-wrap h1, .game-title h1 { margin:0; letter-spacing:2px; color:#fff4c8; text-shadow:0 3px 0 #583d18, 0 6px 18px #000; }
.title-wrap h1 { font-size:clamp(42px,7vw,78px); }
.title-wrap p { font-size:24px; margin:10px 0 25px; }
.gem { font-size:36px; color:#7ee8ff; text-shadow:0 0 16px #43cfff; }

.setup-step { position:relative; z-index:1; max-width:1180px; margin:auto; }
.choice-grid { display:grid; gap:16px; margin:20px auto 28px; }
.battlefield-grid { grid-template-columns:repeat(5,1fr); }
.base-grid { grid-template-columns:repeat(5,1fr); }
.dice-grid { grid-template-columns:repeat(6,1fr); }
.choice-card {
  min-height:150px; border:3px solid rgba(255,255,255,.5); border-radius:20px; overflow:hidden;
  cursor:pointer; display:flex; flex-direction:column; justify-content:flex-end; position:relative;
  box-shadow:0 8px 18px rgba(0,0,0,.28); transition:.18s transform,.18s border-color,.18s box-shadow;
  background:#334;
}
.choice-card:hover { transform:translateY(-4px); }
.choice-card.selected { border-color:#ffe07a; box-shadow:0 0 0 4px rgba(255,224,122,.25),0 10px 24px #0008; transform:translateY(-5px); }
.choice-card .art { position:absolute; inset:0; }
.choice-card .label { z-index:2; padding:12px 8px; font-weight:bold; font-size:18px; background:linear-gradient(transparent,#091321e8); }

.field-forest { background:linear-gradient(#65b5dc 0 35%,#2d7147 35% 60%,#173b29 60%); }
.field-swamp { background:linear-gradient(#8ca69a 0 35%,#526f57 35% 58%,#263e31 58%); }
.field-grass { background:linear-gradient(#6ec4ef 0 42%,#7dbd50 42% 68%,#4c8039 68%); }
.field-lake { background:linear-gradient(#74c6ed 0 38%,#437c5d 38% 52%,#42a7c8 52% 78%,#2c697c 78%); }
.field-lava { background:linear-gradient(#7e4050 0 36%,#3d3337 36% 62%,#e14b1f 62% 70%,#272326 70%); }

.player-setup-card { max-width:900px; margin:auto; padding:24px; border:2px solid #d8b86a; border-radius:24px; background:rgba(9,20,34,.86); box-shadow:0 18px 50px #0008; }
.player-setup-card h2 { font-size:30px; color:#ffe49a; }
.player-setup-card h3 { font-size:26px; }
.canvas-shell { display:inline-block; padding:12px; border-radius:18px; background:#cfa85f; box-shadow:0 8px 20px #0007; }
canvas { display:block; background:#fffaf0; border-radius:10px; touch-action:none; max-width:min(82vw,520px); height:auto; }
.hero-canvas-shell canvas { max-width:min(75vw,420px); }
.palette { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:18px auto; }
.color-dot { width:34px; height:34px; border:3px solid white; border-radius:50%; cursor:pointer; box-shadow:0 2px 6px #0007; }
.color-dot.active { outline:4px solid #ffe078; transform:scale(1.08); }
.tool-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.magic-button, .small-button, .action-button {
  border:none; cursor:pointer; color:white; font-weight:bold; box-shadow:0 5px 0 #07111d, 0 9px 18px #0006; transition:.1s transform;
}
.magic-button:active, .small-button:active, .action-button:active { transform:translateY(3px); box-shadow:0 2px 0 #07111d; }
.magic-button { padding:14px 26px; border-radius:14px; font-size:18px; }
.magic-button.gold { background:linear-gradient(#f3c95f,#9c5b18); }
.magic-button.red { background:linear-gradient(#df5a4d,#84241f); }
.magic-button.blue { background:linear-gradient(#43a9e9,#14568c); }
.small-button { padding:11px 18px; border-radius:12px; background:linear-gradient(#50667d,#233449); }

.base-card .art { display:grid; place-items:center; font-size:64px; }
.base-palace .art { background:linear-gradient(#86c6ef,#628a55); }
.base-ice .art { background:linear-gradient(#8be2ff,#a9dff0); }
.base-volcano .art { background:linear-gradient(#823b3b,#ef642a); }
.base-cliffs .art { background:linear-gradient(#8bb4c8,#756e5e); }
.base-tree .art { background:linear-gradient(#86c9d9,#37764b); }

.die-card { min-height:130px; }
.die-art { display:grid; place-items:center; font-size:58px; font-family:Arial,sans-serif; font-weight:900; }
.die-art:before { content:"10"; width:82px; height:82px; display:grid; place-items:center; clip-path:polygon(50% 0,95% 30%,78% 92%,22% 92%,5% 30%); border-radius:15px; }
.die-fire:before { background:linear-gradient(135deg,#ffdf61,#e3441f,#7c160f); }
.die-frost:before { background:linear-gradient(135deg,#eaffff,#4ec8f2,#1763a0); }
.die-arcane:before { background:linear-gradient(135deg,#e7a7ff,#8e36d7,#38125f); }
.die-emerald:before { background:linear-gradient(135deg,#a9ffb4,#2caa63,#0b5c35); }
.die-shadow:before { background:linear-gradient(135deg,#777,#222,#080808); }
.die-rainbow:before { background:linear-gradient(135deg,#ff5964,#ffca3a,#8ac926,#1982c4,#6a4c93); }

.game-screen { background:#09131e; overflow:hidden; }
.world { min-height:100vh; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.world:before { content:""; position:absolute; inset:0; z-index:0; opacity:.92; }
.battlefield-forest:before { background:linear-gradient(#6cb9e6 0 34%,#4e8b5e 34% 54%,#77a957 54% 70%,#647257 70%); }
.battlefield-swamp:before { background:linear-gradient(#899f9b 0 32%,#536c57 32% 52%,#5e7555 52% 67%,#3b4c3d 67%); }
.battlefield-grass:before { background:linear-gradient(#76c9f0 0 38%,#70a95a 38% 52%,#8fbd59 52% 72%,#6e8650 72%); }
.battlefield-lake:before { background:linear-gradient(#7ccaf1 0 32%,#628a63 32% 46%,#4ca9ca 46% 62%,#c7ad73 62% 75%,#718060 75%); }
.battlefield-lava:before { background:linear-gradient(#83485b 0 32%,#49393c 32% 50%,#8a4936 50% 62%,#443a35 62% 76%,#2a292b 76%); }
.world:after {
  content:""; position:absolute; inset:42% 12% 13%; z-index:0; border-radius:50% 50% 15% 15%;
  background:linear-gradient(#cbb987,#8f815f); border:10px solid #5e5b50; box-shadow:0 18px 30px #0006;
}

.game-header { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:18px; padding:14px 22px; }
.player-hud { display:flex; align-items:center; gap:12px; padding:8px 14px; border:3px solid #d2a44a; background:linear-gradient(#163f68,#0c243d); border-radius:20px; box-shadow:0 7px 15px #0007; }
.player-hud.p2 { background:linear-gradient(#742b31,#351319); justify-content:flex-end; text-align:right; }
.hero-frame { width:112px; height:112px; border:5px solid #f1c45e; border-radius:50%; background:#fff9e9; overflow:hidden; flex:none; box-shadow:0 0 18px #ffd76888; }
.hero-frame img { width:100%; height:100%; object-fit:contain; }
.player-name { font-size:24px; font-weight:bold; }
.hearts { font-family:Arial,sans-serif; font-size:24px; letter-spacing:1px; margin:5px 0; white-space:nowrap; }
.heart.empty { filter:grayscale(1); opacity:.25; }
.base-name { color:#ffe5a0; font-weight:bold; }
.game-title { text-align:center; padding:7px 20px; border-radius:16px; background:#15273be8; border:2px solid #c9a253; box-shadow:0 7px 16px #0007; }
.game-title h1 { font-size:32px; }
.field-name { color:#d7ecff; font-weight:bold; margin-top:4px; }

.arena { position:relative; z-index:1; flex:1; display:grid; grid-template-columns:20% 60% 20%; align-items:end; padding:10px 2% 125px; }
.base-zone { min-height:300px; display:flex; align-items:end; justify-content:center; }
.base-art { width:95%; max-width:250px; height:260px; position:relative; filter:drop-shadow(0 12px 8px #0008); }
.base-art:before { position:absolute; inset:auto 0 0; text-align:center; font-size:120px; line-height:1; }
.base-art.palace:before { content:"♜"; color:#e9d8a4; text-shadow:0 0 0 #765,8px 10px 0 #6f5c48; }
.base-art.ice:before { content:"♜"; color:#b9efff; text-shadow:0 0 12px #66d8ff,8px 10px 0 #4d8ba9; }
.base-art.volcano:before { content:"♜"; color:#4c3330; text-shadow:0 0 12px #ff632d,8px 10px 0 #e44a1e; }
.base-art.cliffs:before { content:"▲"; color:#77756d; text-shadow:15px 12px 0 #55534e,-20px 20px 0 #918d82; }
.base-art.tree:before { content:"♣"; color:#3b7544; text-shadow:10px 12px 0 #24512f,-12px 18px 0 #57945f; }

.battle-platform { display:grid; grid-template-columns:1fr 70px 1fr; align-items:end; min-height:270px; padding-bottom:20px; }
.creature-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:end; }
.creature-slot { min-height:175px; border:3px dashed rgba(255,255,255,.35); border-radius:16px; display:grid; place-items:center; position:relative; background:rgba(255,255,255,.09); cursor:pointer; transition:.15s; }
.creature-slot.occupied { border-style:solid; background:#fff9e9; box-shadow:0 6px 14px #0005; }
.creature-slot img { width:100%; height:160px; object-fit:contain; border-radius:12px; }
.creature-slot.selected { outline:6px solid #ffd84e; transform:translateY(-10px); box-shadow:0 0 28px #ffe04c; }
.creature-slot.defender-selected { outline:6px solid #6ed5ff; transform:translateY(-10px); box-shadow:0 0 28px #5fd8ff; }
.creature-slot.defeated:after {
  content:""; position:absolute; inset:8%; background:
    linear-gradient(45deg,transparent 44%,#e31818 44% 56%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,#e31818 44% 56%,transparent 56%);
  filter:drop-shadow(0 2px 2px #5d0000); animation:slam .25s ease-out;
}
@keyframes slam { from { transform:scale(2); opacity:0; } to { transform:scale(1); opacity:1; } }
.center-sigil { align-self:center; justify-self:center; font-size:42px; opacity:.35; color:#4d4639; }

.action-bar { position:absolute; z-index:3; bottom:16px; left:50%; transform:translateX(-50%); width:min(920px,94%); display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:12px; padding:12px; border:4px solid #5e6267; border-radius:22px; background:#172334e8; box-shadow:0 10px 25px #0009; }
.action-button { min-height:76px; border-radius:16px; display:flex; align-items:center; justify-content:center; gap:10px; }
.action-button strong { display:block; font-size:26px; }
.action-button small { display:block; font-size:13px; font-weight:normal; }
.button-icon { font-size:36px; }
.draw-button { background:linear-gradient(#2597e4,#0e4c82); }
.attack-button { background:linear-gradient(#df5548,#7e211e); }
.turn-display { display:grid; place-items:center; text-align:center; font-size:24px; font-weight:bold; color:#d9f1ff; }

.overlay { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:18px; background:rgba(8,14,22,.66); backdrop-filter:grayscale(.25) brightness(.72); }
.modal-card, .message-card { width:min(760px,95vw); max-height:95vh; overflow:auto; text-align:center; border:4px solid #d2a64d; border-radius:24px; background:linear-gradient(#23394e,#101b29); padding:22px; box-shadow:0 22px 60px #000b; }
.sketchbook { background:linear-gradient(#f1e1bb,#d7b979); color:#27303c; }
.sketchbook h2 { font-size:32px; margin:4px; color:#56381c; }
.message-card h2 { font-size:38px; color:#ffe59b; margin:4px 0 8px; }
.message-card p { font-size:22px; }
.dice-result { display:flex; justify-content:center; gap:30px; margin:20px 0; }
.result-die { width:130px; min-height:130px; display:grid; place-items:center; padding:10px; clip-path:polygon(50% 0,96% 30%,78% 92%,22% 92%,4% 30%); font:900 48px Arial,sans-serif; background:linear-gradient(135deg,#74d5ff,#176bb1,#0d2f67); text-shadow:0 2px 4px #000; }
.result-die.p2 { background:linear-gradient(135deg,#ffb45e,#df3c24,#6e1711); }
.attack-panel { position:fixed; z-index:15; left:50%; bottom:115px; transform:translateX(-50%); width:min(800px,94%); display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:12px; border:3px solid #e1b75d; border-radius:18px; background:#101b29f2; box-shadow:0 8px 22px #0009; }
#attackInstruction { flex-basis:100%; text-align:center; font-size:20px; font-weight:bold; color:#ffe39a; }

@media (max-width:900px) {
  .battlefield-grid,.base-grid { grid-template-columns:repeat(2,1fr); }
  .dice-grid { grid-template-columns:repeat(3,1fr); }
  .game-header { grid-template-columns:1fr 1fr; }
  .game-title { grid-column:1 / -1; grid-row:1; }
  .player-hud.p1 { grid-row:2; }
  .player-hud.p2 { grid-row:2; }
  .hero-frame { width:80px;height:80px; }
  .player-name { font-size:18px; }
  .hearts { font-size:17px; }
  .arena { grid-template-columns:14% 72% 14%; padding-bottom:110px; }
  .base-art:before { font-size:75px; }
  .creature-slot { min-height:120px; }
  .creature-slot img { height:110px; }
  .action-button strong { font-size:20px; }
  .button-icon { font-size:27px; }
}

.intro-screen{min-height:100vh;display:grid;place-items:center;padding:24px;text-align:center;background:radial-gradient(circle at 50% 18%,rgba(125,225,255,.32),transparent 24%),linear-gradient(#173c62 0 38%,#315d50 38% 67%,#142c31 67%);overflow:auto}
.intro-card,.instructions-card{width:min(900px,94vw);padding:36px;border:3px solid #d7b45c;border-radius:28px;background:linear-gradient(180deg,rgba(18,45,70,.94),rgba(9,24,39,.96));box-shadow:0 24px 70px #000a}
.intro-card h1,.instructions-card h1{margin:0 0 20px;font-size:clamp(42px,7vw,76px);color:#fff1bd;letter-spacing:2px;text-shadow:0 3px 0 #68471b,0 8px 22px #000}
.lily-mark,.summoning-rune{color:#9deeff;font-size:48px;text-shadow:0 0 10px #62dfff,0 0 28px #62dfff;animation:lilyGlow 1.8s ease-in-out infinite alternate}
.story-text{font-size:clamp(22px,3vw,31px);color:#e9f6ff}.story-lines{font-size:clamp(20px,2.4vw,27px);line-height:1.65;color:#fff6dc}
@keyframes lilyGlow{from{transform:scale(.94);opacity:.7}to{transform:scale(1.08);opacity:1}}
.instruction-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 28px;text-align:left}
.instruction-item{display:flex;gap:14px;padding:16px;border:1px solid #7896a9;border-radius:16px;background:rgba(255,255,255,.07)}
.instruction-item>span{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#f4cd68,#9c601d);font:bold 21px Arial;color:white}
.instruction-item strong{color:#ffe39a;font-size:19px}.instruction-item p{margin:5px 0 0;line-height:1.35;color:#e5f1f7}
.sketchbook{position:relative;box-shadow:0 22px 60px #000b,inset 0 0 40px rgba(92,209,255,.16)}
.summoning-rune{position:relative;z-index:1}.summon-flash{animation:summonFlash .8s ease-out}
@keyframes summonFlash{0%{filter:brightness(2.2);transform:scale(.82);opacity:.15}45%{filter:brightness(1.5) drop-shadow(0 0 25px #8eeeff);transform:scale(1.08);opacity:1}100%{filter:none;transform:scale(1);opacity:1}}
@media(max-width:700px){.instruction-grid{grid-template-columns:1fr}.intro-card,.instructions-card{padding:22px}}

/* v0.3 combat/UX */
.quick-rules{display:flex;align-items:stretch;justify-content:center;gap:16px;margin:26px auto 18px;max-width:680px}
.quick-rules>div:not(.quick-or){flex:1;padding:22px;border:2px solid #d7b45c;border-radius:18px;background:#ffffff12}
.quick-rules strong{display:block;font-size:28px;color:#ffe39a}.quick-rules span{display:block;margin-top:6px;font-size:18px}
.quick-or{display:grid;place-items:center;font-weight:900;color:#9deeff}.quick-goal{max-width:700px;margin:0 auto 16px;font-size:18px;line-height:1.45}.rules-link{margin-bottom:16px}

.battle-rules-button{margin-top:6px;padding:5px 14px;font-size:12px}
.rules-card{max-width:650px}.rules-body{text-align:left;line-height:1.4}.rules-body p{font-size:18px;margin:12px 0}.rules-body b{color:#ffe39a}

.attack-panel{bottom:auto;top:150px;width:min(520px,72%);transition:.25s}
.attack-panel.player1-action{left:24px;transform:none;border-color:#69caff}
.attack-panel.player2-action{left:auto;right:24px;transform:none;border-color:#ff8b78}
#attackInstruction .who{display:block;font-size:30px;line-height:1.05;margin-bottom:5px;color:white}
#attackInstruction .what{font-size:18px;color:#ffe39a}

.dice-overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:18px;background:rgba(7,13,22,.78);backdrop-filter:blur(3px) brightness(.65)}
.dice-battle-card{width:min(940px,96vw);max-height:96vh;overflow:auto;text-align:center;border:4px solid #d9b55c;border-radius:28px;background:radial-gradient(circle at 50% 0,#294966,#101b29 60%);padding:20px;box-shadow:0 25px 80px #000c}
.dice-battle-card h2{font-size:38px;color:#ffe59b;margin:0 0 4px}.dice-battle-card>p{font-size:19px;margin:5px 0 14px}
.dice-duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px}
.dice-side{padding:15px;border-radius:22px;border:3px solid #567;background:#ffffff0a}
.player1-side{border-color:#5dbdf5;background:linear-gradient(135deg,#123c61aa,#ffffff08)}
.player2-side{border-color:#ff786a;background:linear-gradient(225deg,#6a2428aa,#ffffff08)}
.dice-player{font-size:32px;font-weight:1000;color:white;text-shadow:0 3px 8px #000}
.dice-role{font-size:18px;font-weight:900;letter-spacing:2px;color:#ffe39a;margin:3px 0 8px}
.combat-creature{height:145px;display:grid;place-items:center;margin:4px auto 8px}
.combat-creature img{max-width:180px;max-height:140px;object-fit:contain;filter:drop-shadow(0 6px 5px #0008)}
.tap-die{width:150px;height:150px;border:0;cursor:pointer;clip-path:polygon(50% 0,96% 30%,78% 92%,22% 92%,4% 30%);background:linear-gradient(135deg,#80e5ff,#1978c6 50%,#102b72);color:white;text-shadow:0 3px 5px #000;filter:drop-shadow(0 0 14px #5bdcff);animation:dieReady 1.1s ease-in-out infinite alternate}
.player2-side .tap-die{background:linear-gradient(135deg,#ffcb65,#e84d2e 50%,#6f1116);filter:drop-shadow(0 0 14px #ff6b4e)}
.tap-die span{display:block;font:900 56px Arial}.tap-die small{display:block;font-weight:900;font-size:12px}
.tap-die.rolling{animation:magicRoll .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.tap-die.rolled{animation:none;filter:drop-shadow(0 0 8px #fff8);cursor:default}.tap-die.rolled small{opacity:.7}
@keyframes dieReady{from{transform:scale(.97);filter:brightness(.9) drop-shadow(0 0 8px #65ddff)}to{transform:scale(1.04);filter:brightness(1.18) drop-shadow(0 0 22px #65ddff)}}
@keyframes magicRoll{0%{transform:rotate(0) scale(1)}20%{transform:rotate(110deg) scale(.82)}45%{transform:rotate(245deg) scale(1.15)}70%{transform:rotate(390deg) scale(.9)}100%{transform:rotate(540deg) scale(1)}}
.versus{font-size:28px;font-weight:1000;color:#ffe39a}.roll-status{min-height:30px;margin-top:12px;font-size:22px;font-weight:900;color:#d9f4ff}
.power-card{max-width:560px}.power-side{max-width:430px;margin:auto;border-color:#d8b85c;background:#ffffff0a}.power-side .tap-die{background:linear-gradient(135deg,#fff4a1,#a95cff 48%,#194ca3);filter:drop-shadow(0 0 18px #c27cff)}
.damage-key{font-size:18px;margin-top:10px;color:#ffe9ae}.power-damage{min-height:48px;font-size:34px;font-weight:1000;color:#ff6c76;margin-top:5px}
.hidden{display:none!important}

@media(max-width:760px){
  .quick-rules{gap:8px}.quick-rules strong{font-size:22px}
  .attack-panel{top:135px;width:46%;padding:8px}.attack-panel.player1-action{left:8px}.attack-panel.player2-action{right:8px}
  #attackInstruction .who{font-size:22px}
  .dice-battle-card{padding:12px}.dice-duel{gap:7px}.dice-player{font-size:22px}.dice-role{font-size:13px}
  .combat-creature{height:100px}.combat-creature img{max-height:95px;max-width:120px}
  .tap-die{width:110px;height:110px}.tap-die span{font-size:42px}.versus{font-size:18px}
}

.magic-die-fire{background:radial-gradient(circle at 35% 25%,#fff18b,#ff6a22 38%,#721310 72%,#260407)!important;filter:drop-shadow(0 0 20px #ff5b22)!important}
.magic-die-frost{background:linear-gradient(135deg,#efffff,#7de5ff 35%,#3a8fd1 72%,#dffcff)!important;color:#103d65!important;text-shadow:0 1px 2px white!important;filter:drop-shadow(0 0 20px #a8f5ff)!important}
.magic-die-arcane{background:radial-gradient(circle,#e5a4ff,#7c3ed1 50%,#281052)!important;filter:drop-shadow(0 0 22px #b65cff)!important}
.magic-die-emerald{background:linear-gradient(135deg,#d6ffb0,#2acb72 40%,#07583d 75%,#68f5b2)!important;filter:drop-shadow(0 0 20px #55ef9b)!important}
.magic-die-shadow{background:radial-gradient(circle at 35% 30%,#7c8094,#252636 45%,#05050b 80%)!important;filter:drop-shadow(0 0 18px #8c83bb)!important}
.magic-die-rainbow{background:conic-gradient(#ff5b67,#ffc65b,#74e789,#5fd7ff,#8f76ff,#f176e8,#ff5b67)!important;filter:drop-shadow(0 0 20px #fff)!important}
.player1-message{transform:translateX(-18vw)}.player2-message{transform:translateX(18vw)}
@media(max-width:760px){.player1-message,.player2-message{transform:none}}

/* v0.4 refinements */
.dice-side.roll-winner{transform:scale(1.055);border-color:#fff0a0!important;box-shadow:0 0 18px #ffe66d,0 0 45px #ffb52e,inset 0 0 28px #ffe86b33;animation:winnerPulse .55s ease-in-out alternate 2}
.dice-side.roll-loser{opacity:.58;filter:saturate(.6)}
@keyframes winnerPulse{from{filter:brightness(1)}to{filter:brightness(1.28)}}

.victory-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at center,#345f76 0,#13283e 45%,#060b17 100%)}
.victory-card{position:relative;z-index:2;width:min(680px,92vw);text-align:center;padding:28px 30px 32px;border:4px solid #ffe28a;border-radius:34px;background:radial-gradient(circle at 50% 35%,#395c70dd,#10192a 70%);box-shadow:0 0 45px #ffcf57aa,0 30px 90px #000}
.victory-kicker{font-weight:1000;letter-spacing:4px;color:#9feaff;font-size:18px}
.victory-card h1{font-size:clamp(40px,7vw,72px);line-height:1;margin:10px 0;color:#fff2ae;text-shadow:0 4px 0 #8a531b,0 0 25px #ffd45b}
.victory-crown{font-size:50px;color:#fff0a0;text-shadow:0 0 18px #ffe05d;animation:victoryFloat 1s ease-in-out infinite alternate}
.victory-hero-wrap{position:relative;width:230px;height:230px;margin:18px auto;display:grid;place-items:center}
.victory-hero-wrap img{position:relative;z-index:2;max-width:210px;max-height:210px;border-radius:50%;border:5px solid #ffe08a;background:#fff;box-shadow:0 0 30px #ffe46c}
.victory-rays{position:absolute;inset:-50px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffe16d55 0deg 8deg,transparent 8deg 18deg);animation:raySpin 9s linear infinite}
.victory-banner{font-size:38px;font-weight:1000;letter-spacing:5px;color:white;text-shadow:0 0 10px #5de5ff,0 0 24px #a969ff;margin:5px 0 20px}
@keyframes raySpin{to{transform:rotate(360deg)}} @keyframes victoryFloat{to{transform:translateY(-7px) scale(1.08)}}
.victory-fireworks{position:absolute;inset:0;pointer-events:none}
.victory-fireworks i{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff3a0;box-shadow:0 -55px #ffdf62,39px -39px #79eaff,55px 0 #ff75c8,39px 39px #a3ff82,0 55px #ff8b5f,-39px 39px #7db9ff,-55px 0 #ffe45f,-39px -39px #d887ff;animation:firework 1.6s ease-out infinite}
.victory-fireworks i:nth-child(1){left:14%;top:20%;animation-delay:.1s}.victory-fireworks i:nth-child(2){left:82%;top:24%;animation-delay:.55s}.victory-fireworks i:nth-child(3){left:22%;top:72%;animation-delay:.9s}.victory-fireworks i:nth-child(4){left:76%;top:70%;animation-delay:1.2s}.victory-fireworks i:nth-child(5){left:50%;top:12%;animation-delay:.35s}.victory-fireworks i:nth-child(6){left:50%;top:83%;animation-delay:1.45s}
@keyframes firework{0%{transform:scale(.05);opacity:0}25%{opacity:1}70%{transform:scale(1.25);opacity:1}100%{transform:scale(1.6);opacity:0}}

/* v0.5: Cloud Fields of Noa */
.choice-card.battlefield-card:nth-child(6),
#battlefieldChoices .choice-card:nth-child(6) {
  background:linear-gradient(180deg,#69bff3 0%,#c8efff 55%,#ffffff 100%);
}

/* v0.6 battlefield chooser: balanced 3 + 3 layout */
#battlefieldChoices {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  width:min(920px, 94vw);
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:700px) {
  #battlefieldChoices { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:440px) {
  #battlefieldChoices { grid-template-columns:1fr; }
}

/* Current visual integration
   One authoritative layer for artwork and the live battlefield. */
#battlefieldChoices .art {
  position:absolute;
  inset:0 0 42px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
#baseChoices .art,
#diceChoices .art {
  position:absolute;
  inset:10px 10px 44px;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
#baseChoices .choice-card,
#diceChoices .choice-card { min-height:225px; }
#diceChoices .art {
  font-size:0;
  color:transparent;
  background-color:#151719;
}
#diceChoices .art::before,
#diceChoices .art::after,
#diceChoices .choice-card::before,
#diceChoices .choice-card::after {
  content:none;
  display:none;
}

#world {
  background-color:transparent;
  background-image:var(--battle-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
#world::before,
#world::after {
  content:none;
  display:none;
}
#world .arena,
#world .base-zone,
#world .battle-platform {
  background-color:transparent;
  background-image:none;
}
#world .base-zone {
  overflow:visible;
  display:flex;
  align-items:flex-end;
}
#world .base-art {
  width:min(42vw,590px);
  height:min(49vh,500px);
  min-height:390px;
  background-color:transparent;
  border:0;
  box-shadow:none;
  background-size:contain;
  background-position:center bottom;
  background-repeat:no-repeat;
  filter:drop-shadow(0 18px 13px rgba(0,0,0,.5));
  transform:scale(1.18);
  transform-origin:center bottom;
  z-index:4;
}
#world .base-art::before,
#world .base-art::after,
#world .base-icon {
  content:none;
  display:none;
}

#world .player-hud {
  width:max-content;
  max-width:46vw;
  min-width:0;
  padding:6px 10px;
}
#world .hearts {
  display:flex;
  width:max-content;
  align-items:center;
  gap:2px;
  padding:2px 3px;
  min-height:0;
  white-space:nowrap;
}
#world .heart {
  display:inline-block;
  margin:0 1px;
  color:#ee1f2f;
  font-family:"Arial Black",Arial,sans-serif;
  font-weight:900;
  font-size:42px;
  line-height:.82;
  transform:scaleX(1.18);
  transform-origin:center;
  -webkit-text-stroke:1.5px #7d0810;
  filter:drop-shadow(0 2px 1px #0008) drop-shadow(0 0 1px #fff);
}
#world .heart.empty {
  opacity:.18;
  filter:grayscale(1);
}

@media (max-width:900px) {
  #world .base-art {
    width:min(39vw,460px);
    height:min(42vh,390px);
    min-height:280px;
  }
  #world .heart { font-size:34px; }
}


/* Battlefield composition refinement */
#world {
  background-size:100% auto;
  background-position:center center;
}
#world .game-header {
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
}
#world .player-hud.p1 {
  justify-self:start;
}
#world .player-hud.p2 {
  justify-self:end;
}
#world .arena {
  grid-template-columns:27% 46% 27%;
  padding-left:0;
  padding-right:0;
}
#world .base-zone.left {
  justify-content:flex-start;
}
#world .base-zone.right {
  justify-content:flex-end;
}
#world .base-art {
  width:34vw;
  max-width:none;
  height:58vh;
  min-height:430px;
  transform:scale(1.08);
}
#world .base-zone.left .base-art {
  transform-origin:left bottom;
  margin-left:-3vw;
}
#world .base-zone.right .base-art {
  transform-origin:right bottom;
  margin-right:-3vw;
}
@media (max-width:900px) {
  #world { background-size:cover; }
  #world .arena { grid-template-columns:22% 56% 22%; }
  #world .base-art {
    width:30vw;
    height:45vh;
    min-height:300px;
  }
  #world .player-hud.p1 { justify-self:start; }
  #world .player-hud.p2 { justify-self:end; }
}


/* Stronger life HUD */
#world .player-hud {
  min-width:min(43vw,610px);
  padding:10px 15px;
  gap:15px;
}
#world .hud-info {
  flex:1;
}
#world .player-hud.p2 .hud-info {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
#world .hearts {
  gap:4px;
  padding:5px 4px;
}
#world .heart {
  font-size:50px;
  line-height:.9;
  transform:scaleX(1.32);
  margin:0 2px;
  -webkit-text-stroke:1.8px #7d0810;
}
@media (max-width:1100px) {
  #world .player-hud { min-width:0; }
  #world .heart { font-size:40px; margin:0 1px; gap:2px; }
}


/* Inward-facing bases */
#world .base-zone.left .base-art {
  transform:scale(1.08);
}
#world .base-zone.right .base-art {
  transform:scale(-1.08,1.08);
}

/* Production dice artwork during all rolls */
.tap-die,
.player2-side .tap-die,
.power-side .tap-die {
  background-color:transparent !important;
  background-image:var(--die-image) !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  clip-path:none;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.38));
}
.tap-die span {
  position:relative;
  z-index:2;
  text-shadow:0 3px 5px #000,0 0 8px #000;
}
.tap-die small {
  position:relative;
  z-index:2;
  text-shadow:0 2px 4px #000,0 0 6px #000;
}

/* Precious life-heart HUD */
#world .player-hud {
  width:max-content;
  min-width:0;
  max-width:none;
  padding:9px 13px;
}
#world .hud-info {
  flex:0 0 auto;
}
#world .hearts {
  width:max-content;
  gap:5px;
  padding:7px 7px 5px;
  border:1px solid rgba(255,224,122,.65);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(0,0,0,.13));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 8px rgba(0,0,0,.28);
}
#world .heart {
  position:relative;
  font-size:50px;
  line-height:.88;
  margin:0 2px;
  color:#ff3145;
  background:linear-gradient(180deg,#fff3b0 0%,#ff6c79 20%,#e91635 58%,#9e071d 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.5px #6e0713;
  filter:drop-shadow(0 2px 1px #0009) drop-shadow(0 0 5px #ffcf70);
}
#world .heart.empty {
  opacity:.72;
  filter:grayscale(.75) brightness(.55) drop-shadow(0 1px 1px #000);
}
#world .heart.empty::after {
  content:"";
  position:absolute;
  left:2%;
  right:2%;
  top:47%;
  height:5px;
  border-radius:5px;
  background:#ff3345;
  box-shadow:0 1px 0 #65000a,0 0 5px #ff263d;
  transform:rotate(-45deg);
  transform-origin:center;
}
@media (max-width:1100px) {
  #world .player-hud { padding:7px 9px; }
  #world .hearts { gap:2px; padding:5px 4px; }
  #world .heart { font-size:39px; margin:0 1px; }
}


/* Land of Lily opening journey */
#storyScreen,
#instructionsScreen,
#setupScreen {
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(7,15,30,.18),rgba(7,15,30,.38)),
    url("assets/lily-intro-background.png") center/cover no-repeat;
}
#storyScreen::before,
#instructionsScreen::before,
#setupScreen::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
#storyScreen::before {
  background:radial-gradient(circle at 50% 38%,transparent 20%,rgba(3,9,20,.35) 100%);
}
#instructionsScreen::before,
#setupScreen::before {
  background:rgba(5,12,25,.34);
  backdrop-filter:blur(1.5px);
}
.intro-card,
.instructions-card,
.player-setup-card {
  backdrop-filter:blur(5px);
}

/* Logo: visually crop away the rectangular source edges */
.brand-logo {
  display:block;
  object-fit:cover;
  object-position:center;
  mix-blend-mode:screen;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(255,210,92,.35));
}
.intro-logo {
  width:min(760px,82vw);
  height:255px;
  margin:-35px auto -32px;
  object-position:center 51%;
}
.instruction-logo {
  width:min(390px,55vw);
  height:125px;
  margin:-24px auto -18px;
}
.setup-logo {
  width:min(410px,50vw);
  height:120px;
  margin:-22px auto -12px;
}
.battle-logo {
  width:min(310px,24vw);
  height:84px;
  margin:-15px auto -11px;
}
@media (max-width:800px) {
  .intro-logo { height:190px; width:min(610px,88vw); }
  .instruction-logo,.setup-logo { height:100px; }
  .battle-logo { width:220px; height:66px; }
}


/* Cleanup: logo, life HUD, and opposing base rendering */
.game-title {
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.game-title .battle-logo {
  margin:-18px auto -12px;
}
#world .hearts {
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:3px 2px !important;
}
#world .heart {
  color:#f32d45;
  -webkit-text-fill-color:#f32d45;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  text-shadow:
    0 2px 0 #720817,
    0 0 5px #ffdf82,
    0 0 10px rgba(255,75,95,.75);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.7));
}
#world .base-zone.right {
  overflow:visible !important;
}
#world .base-zone.right .base-art {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:scaleX(-1) scale(1.08);
  transform-origin:right bottom;
  background-size:contain !important;
  background-position:center bottom !important;
  background-repeat:no-repeat !important;
  z-index:4;
}


/* Final HUD/logo/base integration */
.logo-crop,
.battle-logo-crop {
  overflow:hidden;
  margin-left:auto;
  margin-right:auto;
  background:transparent;
}
.logo-crop img,
.battle-logo-crop img {
  display:block;
  max-width:none;
  mix-blend-mode:screen;
}
.intro-logo-crop { width:min(720px,82vw); height:185px; }
.intro-logo-crop .intro-logo { width:100%; height:245px; margin:-30px 0 0; }
.instruction-logo-crop { width:min(390px,55vw); height:94px; }
.instruction-logo-crop .instruction-logo { width:100%; height:126px; margin:-17px 0 0; }
.setup-logo-crop { width:min(410px,50vw); height:92px; }
.setup-logo-crop .setup-logo { width:100%; height:126px; margin:-18px 0 0; }
.battle-logo-crop { width:min(330px,25vw); height:76px; }
.battle-logo-crop .battle-logo { width:100%; height:108px; margin:-16px 0 0; }

.game-title {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.game-title::before,
.game-title::after { content:none !important; display:none !important; }
.battle-meta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:0;
}
.battle-meta .field-name { margin:0; }
.battle-meta .battle-rules-button { position:static; margin:0; }

#world .hearts {
  display:flex;
  align-items:center;
  width:max-content;
  gap:2px;
  padding:0 !important;
  margin:4px 0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
}
#world .heart {
  position:relative;
  display:block;
  width:39px;
  height:32px;
  margin:0;
  transform:none;
  background:none !important;
  filter:none;
  -webkit-text-stroke:0;
}
#world .heart img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 0 3px rgba(255,202,62,.42));
}
#world .heart.empty {
  opacity:1;
  filter:none;
}
#world .heart.empty img {
  opacity:.38;
  filter:grayscale(.82) brightness(.58) drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
#world .heart.empty::after {
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  top:50%;
  height:4px;
  border-radius:4px;
  background:#ff263c;
  box-shadow:0 1px 0 #6c000b,0 0 4px #ff263c;
  transform:translateY(-50%) rotate(-42deg);
  transform-origin:center;
}
#world .player-hud {
  min-width:0 !important;
  width:max-content !important;
  max-width:46vw;
  padding:7px 9px !important;
  gap:9px !important;
}
#world .hud-info { flex:0 0 auto !important; }

#world .base-zone.right {
  display:flex !important;
  justify-content:flex-end !important;
  align-items:flex-end !important;
  overflow:visible !important;
  z-index:3;
}
#world #p2BaseArt {
  display:block !important;
  width:34vw !important;
  height:58vh !important;
  min-height:430px !important;
  margin-right:-3vw !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:scaleX(-1) scale(1.08) !important;
  transform-origin:right bottom !important;
  background-size:contain !important;
  background-position:center bottom !important;
  background-repeat:no-repeat !important;
  filter:drop-shadow(0 18px 13px rgba(0,0,0,.5));
  z-index:5 !important;
}
@media (max-width:1100px) {
  #world .heart { width:32px; height:27px; }
}
@media (max-width:900px) {
  #world #p2BaseArt { width:30vw !important; height:45vh !important; min-height:300px !important; }
  .battle-logo-crop { width:230px; height:58px; }
  .battle-logo-crop .battle-logo { height:86px; margin-top:-14px; }
}


/* Explicit battlefield base images: reliable on both sides */
#world .base-art {
  background:none !important;
  display:flex !important;
  align-items:flex-end !important;
  overflow:visible !important;
}
#world .battle-base-image {
  display:block !important;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  visibility:visible !important;
  opacity:1 !important;
  filter:drop-shadow(0 18px 13px rgba(0,0,0,.5));
}
#world .base-zone.left .battle-base-image {
  transform:none;
  transform-origin:center bottom;
}
#world .base-zone.right .base-art {
  transform:none !important;
}
#world .base-zone.right .battle-base-image {
  transform:scaleX(-1);
  transform-origin:center bottom;
}

/* Slightly larger ruby life gems */
#world .heart {
  width:45px;
  height:36px;
}
@media (max-width:1100px) {
  #world .heart { width:37px; height:30px; }
}


/* True transparent logo asset: no cropping or blend workaround */
.brand-logo {
  display:block !important;
  object-fit:contain !important;
  object-position:center !important;
  mix-blend-mode:normal !important;
  background:transparent !important;
  overflow:visible !important;
}
.intro-logo {
  width:min(720px,82vw) !important;
  height:auto !important;
  margin:0 auto 8px !important;
}
.instruction-logo {
  width:min(390px,55vw) !important;
  height:auto !important;
  margin:0 auto 4px !important;
}
.setup-logo {
  width:min(410px,50vw) !important;
  height:auto !important;
  margin:0 auto -2px !important;
}
.game-title .battle-logo {
  width:min(330px,25vw) !important;
  height:auto !important;
  margin:0 auto !important;
}
.logo-crop,
.battle-logo-crop {
  display:contents;
}
@media (max-width:800px) {
  .intro-logo { width:min(610px,88vw) !important; height:auto !important; }
  .instruction-logo,.setup-logo { height:auto !important; }
  .game-title .battle-logo { width:230px !important; height:auto !important; }
}


/* Selection grids: six choices always read as 3 + 3 on normal game screens */
#battlefieldChoices,
#baseChoices,
#diceChoices {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  width:min(920px,94vw);
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:620px) {
  #battlefieldChoices,#baseChoices,#diceChoices {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Typography pass: friendly fantasy display + clean readable UI */
html,body {
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
}
h1,h2,h3,
.player-name,
.field-name,
.turn-display,
.magic-button,
.action-button strong,
.choice-card .label,
.victory-card h1,
.victory-banner {
  font-family:Georgia,"Palatino Linotype","Book Antiqua",serif;
  letter-spacing:.035em;
}
.story-text,.story-lines,.quick-goal,
.choice-card .label,
.base-name,
.action-button small,
.message-card p,
.sketchbook p {
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
}

/* Base layout reset: remove accumulated transforms from the containers.
   Only the P2 image itself is mirrored. */
#world .arena {
  overflow:visible !important;
}
#world .base-zone {
  position:relative !important;
  overflow:visible !important;
  min-width:0;
}
#world #p1BaseArt,
#world #p2BaseArt {
  position:absolute !important;
  bottom:0 !important;
  width:36vw !important;
  max-width:620px !important;
  height:55vh !important;
  min-height:380px !important;
  margin:0 !important;
  transform:none !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible !important;
  z-index:5 !important;
}
#world #p1BaseArt { left:-3vw !important; right:auto !important; }
#world #p2BaseArt { right:-3vw !important; left:auto !important; }
#world #p1BaseArt .battle-base-image,
#world #p2BaseArt .battle-base-image {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  visibility:visible !important;
  opacity:1 !important;
}
#world #p1BaseArt .battle-base-image { transform:none !important; }
#world #p2BaseArt .battle-base-image { transform:scaleX(-1) !important; }
@media (max-width:900px) {
  #world #p1BaseArt,#world #p2BaseArt {
    width:31vw !important;
    height:42vh !important;
    min-height:280px !important;
  }
}


/* Setup screen alignment cleanup */
#playerSetupStep {
  width:min(1100px,96vw);
  max-width:none;
  margin:0 auto;
}
.player-setup-card {
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:0 auto;
  padding:20px 24px 26px;
  border:0;
  border-radius:0;
  background:rgba(7,17,30,.72);
  box-shadow:none;
}
.player-setup-card h2,
.player-setup-card h3 {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
#baseChoices,
#diceChoices {
  width:min(920px,100%);
  margin:20px auto 28px;
}
#baseChoices .choice-card,
#diceChoices .choice-card {
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
#baseChoices .choice-card {
  border:0;
  border-radius:18px;
  background:rgba(20,25,42,.58);
  box-shadow:none;
}
#baseChoices .choice-card:hover {
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
#baseChoices .choice-card.selected {
  border:0;
  outline:3px solid #ffe07a;
  outline-offset:2px;
  box-shadow:0 0 18px rgba(255,214,91,.42);
}
#baseChoices .choice-card .label {
  background:linear-gradient(transparent,rgba(7,13,24,.82));
  border-radius:0 0 18px 18px;
}


/* Typography refinement */
html,body {
  font-family:"Trebuchet MS","Avenir Next","Segoe UI",sans-serif;
}
h1,h2,h3,
.player-name,.field-name,.turn-display,
.magic-button,.small-button,.action-button strong,
.choice-card .label,.message-card h2,
.victory-card h1,.victory-banner {
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  font-weight:700;
}
.player-name,.turn-display,.magic-button,.small-button,.action-button strong {
  letter-spacing:.07em;
}
.choice-card .label {
  letter-spacing:.025em;
}
.battle-meta { flex-wrap:wrap; }
.restart-button { margin-left:2px !important; }

/* Conjuring surface: ancient magical parchment */
.sketchbook {
  position:relative;
  overflow:hidden;
  color:#342716;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,242,177,.88) 0 20%,rgba(222,187,116,.80) 54%,rgba(111,69,31,.74) 100%),
    repeating-linear-gradient(7deg,rgba(91,54,24,.045) 0 1px,transparent 1px 7px),
    #d9b875;
  border:2px solid #a47736;
  box-shadow:inset 0 0 45px rgba(80,43,14,.45),0 22px 60px #000b;
}
.sketchbook::before {
  content:"✦  ◇  ✧  ◇  ✦";
  position:absolute;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  font-family:Georgia,serif;
  font-size:clamp(44px,8vw,86px);
  letter-spacing:.18em;
  color:rgba(112,67,24,.10);
  white-space:nowrap;
  pointer-events:none;
}
.sketchbook .canvas-shell {
  position:relative;
  background:rgba(255,249,220,.78);
  border:2px solid rgba(121,78,30,.58);
  box-shadow:inset 0 0 25px rgba(119,72,25,.16),0 5px 15px rgba(64,38,16,.28);
}

/* Creature slots as small summoning tablets */
#world .creature-slot {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at center,rgba(244,219,142,.22),transparent 48%),
    linear-gradient(145deg,rgba(84,61,38,.68),rgba(31,35,42,.78));
  border:1px solid rgba(219,181,92,.48);
  box-shadow:inset 0 0 18px rgba(224,187,99,.10),0 4px 12px rgba(0,0,0,.28);
}
#world .creature-slot::before {
  content:"✧";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:Georgia,serif;
  font-size:54px;
  color:rgba(245,210,119,.13);
  pointer-events:none;
}
#world .creature-slot.occupied::before { opacity:.35; }
#world .creature-slot img { position:relative; z-index:1; }


/* Battle header hierarchy */
.battle-meta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.battle-header-buttons{display:flex;justify-content:center;align-items:center;gap:7px}
.battle-header-buttons .small-button{width:92px;min-width:92px;height:34px;margin:0!important;padding:0 10px;display:grid;place-items:center}

/* Hero portraits are shields */
#world .hero-frame{width:112px;height:126px;border:3px solid #e5bd59;border-radius:0;clip-path:polygon(50% 0,94% 15%,90% 68%,50% 100%,10% 68%,6% 15%);background:linear-gradient(160deg,#2d5d83,#101d31);box-shadow:0 5px 13px rgba(0,0,0,.55),inset 0 0 0 3px rgba(255,235,157,.16);overflow:hidden;flex:0 0 auto}
#world .hero-frame img{width:100%;height:100%;object-fit:cover;background:#fffaf0}
@media(max-width:900px){#world .hero-frame{width:94px;height:106px}}

/* Live magic follows the drawing gesture */
.sketchbook .canvas-shell{overflow:hidden}
.draw-spark{position:absolute;z-index:8;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;background:#fff8bf;box-shadow:0 0 5px 2px #fff,0 0 11px 5px #ffe45e,0 0 20px 8px rgba(91,210,255,.72);animation:drawSparkFade .52s ease-out forwards}
.draw-spark::before,.draw-spark::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:2px;background:linear-gradient(90deg,transparent,#fff8b7,transparent);transform:translate(-50%,-50%)}
.draw-spark::after{transform:translate(-50%,-50%) rotate(90deg)}
@keyframes drawSparkFade{0%{opacity:1;transform:scale(1)}55%{opacity:.85;transform:scale(.72) translateY(-3px)}100%{opacity:0;transform:scale(.18) translateY(-12px)}}
#setupSubtitle:empty{display:none}


/* Shield frame: use nested shield layers so the gold rim follows the clipped shape */
#world .hero-frame{
  position:relative;
  border:0!important;
  padding:5px;
  box-sizing:border-box;
  background:linear-gradient(145deg,#fff0a2 0%,#d6a62e 35%,#8d5a0d 72%,#ffe68a 100%)!important;
  clip-path:polygon(50% 0,94% 15%,90% 68%,50% 100%,10% 68%,6% 15%);
}
#world .hero-frame::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  background:#fffaf0;
  clip-path:polygon(50% 0,94% 15%,90% 68%,50% 100%,10% 68%,6% 15%);
}
#world .hero-frame img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  box-sizing:border-box;
  clip-path:polygon(50% 0,94% 15%,90% 68%,50% 100%,10% 68%,6% 15%);
}


/* Exact match for battle header utility buttons */
.battle-header-buttons{
  display:grid!important;
  grid-template-columns:repeat(2,104px)!important;
  gap:8px!important;
  justify-content:center!important;
  align-items:center!important;
}
.battle-header-buttons #battleRulesButton,
.battle-header-buttons #restartButton{
  box-sizing:border-box!important;
  width:104px!important;
  min-width:104px!important;
  max-width:104px!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.04em!important;
}


/* Battlefield readability and hero drawing presentation */
#world .creature-slot{
  background:
    radial-gradient(circle at center,rgba(255,244,203,.40),rgba(218,205,176,.26) 54%,rgba(92,82,72,.38) 100%)!important;
  border-color:rgba(245,213,139,.58)!important;
}
#world .hero-frame img{
  object-fit:contain!important;
  object-position:center center!important;
  padding:5px;
  box-sizing:border-box;
}


/* Final victory presentation */
.victory-overlay{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:0;
  background:#07111f;
  overflow:hidden;
}
.victory-overlay.hidden{display:none}
.victory-scene{
  position:relative;
  width:min(100vw,1536px);
  aspect-ratio:3/2;
  max-height:100vh;
  overflow:hidden;
  background:#07111f;
}
.victory-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.victory-live-hero{
  position:absolute;
  z-index:3;
  left:50%;
  top:35.2%;
  transform:translate(-50%,-50%);
  width:19.2%;
  height:25.5%;
  object-fit:contain;
  object-position:center;
}
.victory-live-player{
  position:absolute;
  z-index:4;
  left:50%;
  top:53.7%;
  transform:translate(-50%,-50%);
  width:31%;
  text-align:center;
  color:#ffe79a;
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  font-size:clamp(24px,4.1vw,64px);
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  text-shadow:0 2px 0 #5c3305,0 4px 8px #0008;
}
.victory-play-again{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:2.5%;
  transform:translateX(-50%);
}
.victory-fireworks,.victory-rays,.victory-crown,.victory-kicker,.victory-banner{display:none!important}


/* Victory v2 artwork alignment */
.victory-live-hero{
  left:50%!important;
  top:35.5%!important;
  width:20.5%!important;
  height:27%!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:1.1%;
  box-sizing:border-box;
}
.victory-live-player{
  left:50%!important;
  top:59.4%!important;
  width:31%!important;
  color:#fff2b0!important;
}


/* Default hero chooser */
.hero-mode-buttons{display:flex;justify-content:center;gap:10px;margin:4px auto 16px}
.hero-mode-buttons .magic-button{min-width:190px}
.hero-mode-buttons .magic-button:not(.selected){filter:saturate(.72) brightness(.78);opacity:.86}
.default-hero-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  width:min(920px,100%);
  margin:12px auto 20px;
}
.default-hero-card{
  appearance:none;
  border:0;
  border-radius:18px;
  min-width:0;
  height:260px;
  padding:10px 10px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  cursor:pointer;
  color:#fff6d5;
  background:rgba(14,24,39,.62);
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  font-size:17px;
  font-weight:700;
  text-shadow:0 2px 3px #000;
}
.default-hero-card img{
  width:100%;
  height:205px;
  object-fit:contain;
  object-position:center bottom;
}
.default-hero-card:hover{background:rgba(29,48,70,.72)}
.default-hero-card.selected{
  outline:3px solid #ffe078;
  outline-offset:2px;
  box-shadow:0 0 20px rgba(255,216,94,.48);
  background:rgba(36,51,68,.78);
}
#confirmDefaultHero{display:block;margin:0 auto}
@media(max-width:700px){
  .default-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-mode-buttons{flex-wrap:wrap}
  .default-hero-card{height:220px}
  .default-hero-card img{height:168px}
}


/* How-to actions */
.instructions-card #openingRulesButton,.instructions-card #instructionsContinue{width:180px;min-width:180px;height:46px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.to-battle-button{background:linear-gradient(#4fae61,#236d37)!important;border-color:#8ce59b!important;box-shadow:0 0 16px rgba(91,255,127,.48),0 5px 0 #123f20!important}

/* RPG-style hero choice */
#defaultHeroArea:not(.hidden){display:block}
.hero-mode-buttons{order:2;margin-top:16px}
#chooseHeroMode{display:none}
#drawHeroMode{min-width:245px}
#drawHeroMode::after{content:"";}

/* Drawing toolkit */
.draw-options{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:9px auto}
.draw-options label{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px}
.draw-options select{border:1px solid #a67c37;border-radius:8px;padding:7px 9px;background:#fff7dc;color:#30230e;font-weight:700}
.draw-options .active{box-shadow:0 0 13px #ffe16b;background:#8d6826}

/* Hero + base read as one player identity */
#world .player-hud{position:relative;z-index:12}
#world .base-art{filter:drop-shadow(0 8px 10px rgba(0,0,0,.42))}
#world .base-zone{z-index:4}
#world #p1BaseArt,#world #p2BaseArt{width:41vw!important;max-width:700px!important;height:61vh!important}
#world .player-hud.p1{transform:translateX(8px)}
#world .player-hud.p2{transform:translateX(-8px)}
#world.player-1-turn .player-hud.p1,#world.player-1-turn #p1BaseArt,
#world.player-2-turn .player-hud.p2,#world.player-2-turn #p2BaseArt{filter:drop-shadow(0 0 12px rgba(255,221,91,.75)) drop-shadow(0 0 25px rgba(86,188,255,.35))}
#world .p2 .default-hero-facing{transform:scaleX(-1)}
#world .p1 .default-hero-facing{transform:none}

/* Hero commands */
.hero-command{position:absolute;z-index:30;top:96%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff9df;color:#26344b;border:2px solid #d7a936;border-radius:15px;padding:7px 12px;font-family:"Palatino Linotype",Georgia,serif;font-weight:700;font-size:17px;box-shadow:0 5px 12px #0007;animation:heroSpeak 1.3s ease both}
.hero-command::before{content:"";position:absolute;left:50%;bottom:100%;border:8px solid transparent;border-bottom-color:#d7a936;transform:translateX(-50%)}
@keyframes heroSpeak{0%{opacity:0;transform:translate(-50%,8px) scale(.85)}15%,75%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-5px) scale(.96)}}
.hero-active-flash .hero-frame{filter:drop-shadow(0 0 12px #ffe478) drop-shadow(0 0 22px #63caff)}

/* More energetic dice tumble */
.tap-die.rolling{animation:magicDiceTumble .64s cubic-bezier(.22,.75,.25,1) infinite!important;transform-origin:center}
@keyframes magicDiceTumble{
  0%{transform:rotate(0deg) scale(1)}
  25%{transform:rotate(calc(var(--spin-dir)*.25*var(--spin-turns))) scale(.88) translateY(-7px)}
  50%{transform:rotate(calc(var(--spin-dir)*.52*var(--spin-turns))) scale(1.12) translateY(2px)}
  75%{transform:rotate(calc(var(--spin-dir)*.78*var(--spin-turns))) scale(.94) translateY(-5px)}
  100%{transform:rotate(calc(var(--spin-dir)*var(--spin-turns))) scale(1)}
}


/* Typography: fantasy display + highly readable game text */
:root{--lily-display:Georgia,"Palatino Linotype","Book Antiqua",serif;--lily-body:"Trebuchet MS","Segoe UI",sans-serif}
body{font-family:var(--lily-body)}
h1,h2,h3,.player-name,.field-name,.turn-display,.action-button strong,.magic-button,.small-button,.choice-card span,.default-hero-card span,.message-card h2,.dice-overlay h2{font-family:var(--lily-display)!important;font-weight:700;letter-spacing:.045em}
h1,h2,.player-name,.field-name{text-shadow:0 2px 2px rgba(0,0,0,.55)}
.quick-rules strong,.setup-step h3{font-family:var(--lily-display)!important;letter-spacing:.035em}

/* Parchment everywhere a player draws */
.canvas-shell,.hero-canvas-shell,.sketchbook .canvas-shell{
  background:linear-gradient(135deg,#e4c98f 0%,#f7e9bd 22%,#ddbd7a 62%,#c69a55 100%)!important;
  border:2px solid #9c7135!important;
  box-shadow:0 8px 22px #0008,inset 0 0 20px rgba(105,67,24,.24)!important;
}
.canvas-shell canvas{
  background:
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.25),transparent 28%),
    linear-gradient(100deg,rgba(118,78,31,.06),transparent 25%,rgba(118,78,31,.05) 60%,transparent),
    #f0ddb0!important;
  border-radius:8px;
}

/* Hero portrait becomes an oversized identity crest that breaks out of the HUD */
#world .player-hud{overflow:visible!important;min-height:108px}
#world .hero-frame{
  width:150px!important;height:170px!important;
  margin-top:-32px!important;margin-bottom:-24px!important;
  z-index:18!important;
  filter:drop-shadow(0 9px 9px rgba(0,0,0,.6));
}
#world .player-hud.p1 .hero-frame{margin-left:-22px!important}
#world .player-hud.p2 .hero-frame{margin-right:-22px!important}
#world .hero-frame img{object-fit:contain!important;object-position:center bottom!important;padding:8px!important}
@media(max-width:900px){#world .hero-frame{width:122px!important;height:140px!important}}

/* Large bases are visual only: never intercept clicks on creature slot 1 */
#world .base-art,#world .base-zone{pointer-events:none!important}
#world .battle-platform,#world .creature-row,#world .creature-slot{position:relative;z-index:8}
#world .creature-slot{pointer-events:auto!important}

/* Keep drawing/control surfaces in the Lily palette, never stark white */
.sketchbook,.modal-card{background:linear-gradient(145deg,#e7cf99,#caa45f)!important}
.default-hero-card,.choice-card{border-color:rgba(219,183,100,.7)}


/* Hero-issued battlefield orders */
.hero-command-overlay{
  position:fixed;inset:0;z-index:58;pointer-events:none;
  background:rgba(4,10,19,.20);
}
.hero-command-overlay.hidden{display:none}
.hero-command-card{
  position:absolute;top:19%;
  display:flex;align-items:center;gap:14px;
  width:min(440px,42vw);min-height:155px;
  padding:12px 18px 12px 8px;
  border:2px solid #d7ad49;border-radius:22px;
  background:linear-gradient(135deg,rgba(13,35,58,.96),rgba(25,23,36,.94));
  box-shadow:0 12px 35px #000b,0 0 22px rgba(255,211,85,.26);
  pointer-events:auto;
  animation:commandEnter .28s ease-out both;
}
.player1-command .hero-command-card{left:2.2%}
.player2-command .hero-command-card{right:2.2%;flex-direction:row-reverse;padding:12px 8px 12px 18px}
.hero-command-portrait{
  width:132px;height:155px;flex:none;padding:4px;
  clip-path:polygon(50% 0,94% 15%,90% 68%,50% 100%,10% 68%,6% 15%);
  background:linear-gradient(145deg,#fff0a2,#c99222 45%,#ffe78b);
  filter:drop-shadow(0 5px 8px #0009) drop-shadow(0 0 10px #ffd85b88);
}
.hero-command-portrait img{
  width:100%;height:100%;object-fit:contain;object-position:center bottom;
  box-sizing:border-box;padding:7px;
  background:#f1ddb0;
  clip-path:polygon(50% 0,94% 15%,90% 68%,50% 100%,10% 68%,6% 15%);
}
.player2-command .hero-command-portrait img{transform:scaleX(-1)}
.hero-command-copy{flex:1;text-align:center}
.hero-command-player{font-family:var(--lily-display);font-weight:700;font-size:15px;letter-spacing:.08em;color:#e7c46b;margin-bottom:4px}
.hero-command-order{
  font-family:var(--lily-display);font-weight:700;
  font-size:clamp(25px,2.5vw,38px);line-height:1.05;color:#fff7d7;
  text-shadow:0 2px 3px #000,0 0 10px #d99b32;
  margin:4px 0 12px;
}
.hero-command-card .magic-button{min-width:130px;height:38px;padding:5px 15px}
@keyframes commandEnter{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:760px){
 .hero-command-card{top:16%;width:min(390px,70vw);min-height:125px}
 .hero-command-portrait{width:105px;height:125px}
}


/* Lily typography across ALL pregame/setup screens */
.intro-screen,.instructions-card,.setup-screen,.player-setup-card,.setup-step,.choice-card,.default-hero-card{
  font-family:var(--lily-body)!important;
}
.intro-screen h1,.intro-screen h2,.intro-screen .story,
.instructions-card h1,.instructions-card strong,
.setup-screen h1,.setup-screen h2,.setup-screen h3,.setup-screen #setupSubtitle,
.player-setup-card h2,.choice-card span,.default-hero-card span{
  font-family:var(--lily-display)!important;
  letter-spacing:.045em;
}
#setupSubtitle,.instructions-card h1,.player-setup-card h2{
  color:#fff0ba;
  text-shadow:0 2px 3px #000,0 0 12px rgba(224,171,64,.35);
}

/* Oversized hero crests: down and outward, never clipped off top */
#world .game-header{overflow:visible!important;padding-top:34px!important}
#world .player-hud{margin-top:22px!important}
#world .hero-frame{
  width:178px!important;height:202px!important;
  margin-top:0!important;
  margin-bottom:-58px!important;
  transform:translateY(14px);
}
#world .player-hud.p1 .hero-frame{margin-left:-38px!important}
#world .player-hud.p2 .hero-frame{margin-right:-38px!important}
@media(max-width:900px){
 #world .game-header{padding-top:25px!important}
 #world .hero-frame{width:142px!important;height:162px!important;margin-bottom:-45px!important}
}

/* Compact art-tool strip */
.draw-options{
  width:min(720px,96%);
  padding:8px 12px;
  border-radius:14px;
  background:rgba(79,53,23,.14);
  border:1px solid rgba(116,77,31,.25);
}
.brush-size-control{min-width:205px}
.brush-size-control input[type="range"]{width:120px;accent-color:#a46d22;cursor:pointer}
.brush-size-control output{
  min-width:25px;text-align:center;padding:3px 5px;border-radius:6px;
  background:#fff1c8;color:#493115;font-weight:800;
}
.draw-options select{min-width:92px}


/* Fantasy character throughout explanatory copy */
:root{
 --lily-body:Georgia,"Palatino Linotype","Book Antiqua",Palatino,serif;
}
body,p,.story,.instructions-card p,.quick-rules,.setup-screen,.modal-card,.message-card,.dice-copy,.power-copy,.draw-options{
 font-family:var(--lily-body)!important;
 letter-spacing:.018em;
}
p,.story,.instructions-card p,.quick-rules{font-size:1.02em;line-height:1.48}

/* Unified kingdom crest: BASE (rear) -> HUD -> HERO (front) */
#world .player-hud{
 width:min(440px,34vw)!important;
 min-height:126px!important;
 margin-top:48px!important;
 overflow:visible!important;
 z-index:14!important;
 background:linear-gradient(100deg,rgba(8,34,62,.94),rgba(11,43,73,.84))!important;
 box-shadow:0 8px 20px #0008,0 0 0 2px rgba(214,169,56,.9)!important;
}
#world .player-hud.p1{padding-left:142px!important;margin-left:34px!important}
#world .player-hud.p2{padding-right:142px!important;margin-right:34px!important}
#world .hero-frame{
 position:absolute!important;top:-44px!important;
 width:205px!important;height:232px!important;
 margin:0!important;z-index:24!important;
 filter:drop-shadow(0 12px 10px rgba(0,0,0,.7)) drop-shadow(0 0 5px #d9a72d);
}
#world .player-hud.p1 .hero-frame{left:-76px!important}
#world .player-hud.p2 .hero-frame{right:-76px!important}
#world .player-hud .hearts,#world .player-hud .heart-row,#world .player-hud .player-name{position:relative;z-index:26}
#world #p1BaseArt,#world #p2BaseArt{
 width:48vw!important;max-width:790px!important;height:69vh!important;
 z-index:5!important;
 filter:drop-shadow(0 13px 15px rgba(0,0,0,.48));
}
#world #p1BaseArt{transform:translate(-5vw,4vh)!important}
#world #p2BaseArt{transform:scaleX(-1) translate(-5vw,4vh)!important}
#world.player-1-turn .player-hud.p1,#world.player-1-turn #p1BaseArt,
#world.player-2-turn .player-hud.p2,#world.player-2-turn #p2BaseArt{
 filter:drop-shadow(0 0 13px rgba(255,222,91,.82)) drop-shadow(0 0 27px rgba(77,181,255,.38));
}
@media(max-width:950px){
 #world .player-hud{width:38vw!important}
 #world .hero-frame{width:170px!important;height:194px!important;top:-31px!important}
 #world .player-hud.p1{padding-left:112px!important}
 #world .player-hud.p2{padding-right:112px!important}
 #world .player-hud.p1 .hero-frame{left:-58px!important}
 #world .player-hud.p2 .hero-frame{right:-58px!important}
}


/* HUD-less kingdom identity: text + hearts float cleanly over the battlefield */
#world .player-hud{
  width:min(520px,38vw)!important;
  min-height:138px!important;
  margin-top:38px!important;
  padding-top:14px!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
#world .player-hud.p1{padding-left:170px!important;margin-left:18px!important}
#world .player-hud.p2{padding-right:170px!important;margin-right:18px!important}
#world .player-hud .player-name,
#world .player-hud .base-name{
  color:#fff7d9!important;
  text-shadow:
    0 2px 2px #000,
    0 0 3px #000,
    0 0 7px #06182b,
    0 0 13px rgba(8,27,47,.92)!important;
}
#world .player-hud .player-name{font-size:clamp(20px,2.2vw,32px)!important}
#world .player-hud .base-name{color:#ffe27b!important;font-weight:800!important}
#world .heart-icon,#world .heart{
  filter:
    drop-shadow(0 1px 1px #000)
    drop-shadow(0 0 2px #000)
    drop-shadow(0 0 5px rgba(255,221,102,.55))!important;
}
#world .hero-frame{
  width:220px!important;height:250px!important;
  top:-34px!important;
}
#world .player-hud.p1 .hero-frame{left:-18px!important}
#world .player-hud.p2 .hero-frame{right:-18px!important}

/* Hearts must remain inside their own side at every viewport width */
#world .player-hud .hearts,#world .player-hud .heart-row{
  display:grid!important;
  grid-template-columns:repeat(10,minmax(0,1fr))!important;
  gap:clamp(1px,.22vw,4px)!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
#world .player-hud .heart-icon,#world .player-hud .heart{
  width:100%!important;
  min-width:0!important;
  max-width:42px!important;
  height:auto!important;
  object-fit:contain!important;
}

/* Medium screens: shrink identity clusters before they can collide with the centered logo */
@media(max-width:1100px){
 #world .player-hud{width:35vw!important}
 #world .player-hud.p1{padding-left:125px!important;margin-left:8px!important}
 #world .player-hud.p2{padding-right:125px!important;margin-right:8px!important}
 #world .hero-frame{width:170px!important;height:195px!important;top:-20px!important}
 #world .player-hud.p1 .hero-frame{left:-12px!important}
 #world .player-hud.p2 .hero-frame{right:-12px!important}
 #world .player-hud .player-name{font-size:20px!important}
}
/* Small landscape/tablet: hearts become two tidy rows rather than crossing center */
@media(max-width:820px){
 #world .game-header{padding-top:20px!important}
 #world .player-hud{width:34vw!important;min-height:130px!important}
 #world .player-hud.p1{padding-left:94px!important}
 #world .player-hud.p2{padding-right:94px!important}
 #world .hero-frame{width:132px!important;height:154px!important;top:0!important}
 #world .player-hud .hearts,#world .player-hud .heart-row{
   grid-template-columns:repeat(5,minmax(0,1fr))!important;
   max-width:180px!important;
 }
 #world .player-hud.p2 .hearts,#world .player-hud.p2 .heart-row{margin-left:auto!important}
}
/* Very narrow: preserve all information but reduce the decorative hero before hiding anything */
@media(max-width:620px){
 #world .player-hud.p1{padding-left:70px!important}
 #world .player-hud.p2{padding-right:70px!important}
 #world .hero-frame{width:105px!important;height:124px!important;top:8px!important}
 #world .player-hud .player-name{font-size:17px!important}
 #world .player-hud .base-name{font-size:12px!important}
}


/* Base positioning hotfix: mirror ONLY the image, never the P2 container */
#world #p1BaseArt,#world #p2BaseArt{transform:none!important;visibility:visible!important;opacity:1!important}
#world #p1BaseArt{left:-2vw!important;right:auto!important}
#world #p2BaseArt{right:-2vw!important;left:auto!important}
#world #p1BaseArt .battle-base-image{transform:none!important}
#world #p2BaseArt .battle-base-image{transform:scaleX(-1)!important}

/* Responsive battle composition.
   Preserve two player territories and shrink their contents instead of allowing
   the center battlefield to collapse and overlap. */
#world .battle-platform{
  grid-template-columns:minmax(0,1fr) clamp(24px,5vw,70px) minmax(0,1fr)!important;
  width:100%!important;
  min-width:0!important;
}
#world .creature-row{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(4px,1vw,12px)!important;
  min-width:0!important;
}
#world .creature-slot{
  width:100%!important;
  min-width:0!important;
  min-height:clamp(105px,18vw,175px)!important;
  box-sizing:border-box!important;
}
#world .creature-slot img{width:100%!important;height:clamp(96px,16vw,160px)!important;object-fit:contain!important}
#world .center-sigil{width:clamp(24px,5vw,70px)!important;font-size:clamp(20px,4vw,42px)!important}

/* Treat the battle UI as a composed game board at tablet/small-window sizes. */
@media(max-width:1000px){
 #world .arena{grid-template-columns:10% 80% 10%!important;padding-left:1%!important;padding-right:1%!important}
 #world #p1BaseArt,#world #p2BaseArt{width:34vw!important;height:48vh!important;min-height:250px!important}
 #world #p1BaseArt{left:-4vw!important}
 #world #p2BaseArt{right:-4vw!important}
 #world .battle-platform{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important}
 #world .creature-row{gap:5px!important}
 #world .creature-slot{min-height:112px!important;border-radius:12px!important}
 #world .creature-slot img{height:104px!important}
 #world .center-sigil{width:28px!important;font-size:22px!important}
 #world .action-bar{width:94%!important;gap:7px!important;padding:8px!important}
}
@media(max-width:760px){
 #world .arena{grid-template-columns:5% 90% 5%!important}
 #world #p1BaseArt,#world #p2BaseArt{width:30vw!important;height:40vh!important;min-height:210px!important}
 #world .battle-platform{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr)!important}
 #world .creature-row{gap:3px!important}
 #world .creature-slot{min-height:92px!important;border-radius:9px!important}
 #world .creature-slot img{height:86px!important}
 #world .center-sigil{width:18px!important;font-size:16px!important}
 #world .action-button{min-height:60px!important}
 #world .action-button strong{font-size:17px!important}
 #world .action-button small{font-size:10px!important}
 #world .turn-display{font-size:17px!important}
}


/* Creature magic: summoned drawings should feel alive against every battlefield */
#world .creature-slot img{
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.95))
    drop-shadow(0 0 6px rgba(102,211,255,.68))
    drop-shadow(0 0 11px rgba(255,218,103,.30))!important;
}

/* Below desktop width, preserve the designed battlefield composition and scale
   the BOARD as a unit. This replaces the earlier piecemeal squeeze behavior. */
#gameScreen{overflow:hidden!important;width:100%!important}
#world.scaled-board{
  width:1200px!important;
  min-width:1200px!important;
  transform:scale(var(--board-scale))!important;
  transform-origin:top left!important;
}
/* Lock the important geometry to its desktop proportions while scaled. */
#world.scaled-board .game-header{width:1200px!important;padding-top:34px!important}
#world.scaled-board .player-hud{
  width:456px!important;min-height:138px!important;margin-top:38px!important;
}
#world.scaled-board .player-hud.p1{padding-left:170px!important;margin-left:18px!important}
#world.scaled-board .player-hud.p2{padding-right:170px!important;margin-right:18px!important}
#world.scaled-board .hero-frame{width:220px!important;height:250px!important;top:-34px!important}
#world.scaled-board .player-hud.p1 .hero-frame{left:-18px!important}
#world.scaled-board .player-hud.p2 .hero-frame{right:-18px!important}
#world.scaled-board .player-hud .player-name{font-size:27px!important}
#world.scaled-board .player-hud .base-name{font-size:15px!important}
#world.scaled-board .player-hud .hearts,
#world.scaled-board .player-hud .heart-row{
  grid-template-columns:repeat(10,minmax(0,1fr))!important;
  max-width:none!important;gap:3px!important;
}
#world.scaled-board .arena{
  width:1200px!important;
  grid-template-columns:16% 68% 16%!important;
  padding-left:0!important;padding-right:0!important;
}
#world.scaled-board #p1BaseArt,#world.scaled-board #p2BaseArt{
  width:500px!important;height:620px!important;min-height:0!important;
}
#world.scaled-board #p1BaseArt{left:-24px!important}
#world.scaled-board #p2BaseArt{right:-24px!important}
#world.scaled-board .battle-platform{
  grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)!important;
}
#world.scaled-board .creature-row{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;
}
#world.scaled-board .creature-slot{
  min-height:165px!important;border-radius:16px!important;
}
#world.scaled-board .creature-slot img{height:150px!important}
#world.scaled-board .center-sigil{width:56px!important;font-size:38px!important}
#world.scaled-board .action-bar{width:92%!important;gap:14px!important;padding:12px!important}
#world.scaled-board .action-button{min-height:76px!important}
#world.scaled-board .action-button strong{font-size:25px!important}
#world.scaled-board .action-button small{font-size:12px!important}
#world.scaled-board .turn-display{font-size:25px!important}


/* Viewport-fit battle board: no cropped lower controls when browser height shrinks */
#gameScreen{
  margin:0 auto!important;
  max-width:100vw!important;
  max-height:100vh!important;
}
#world.scaled-board{
  height:760px!important;
  min-height:760px!important;
  overflow:hidden!important;
}

/* Creator dialogs must remain fully usable on short screens and phones/tablets.
   The modal scrolls; the drawing surface scales; tools remain reachable. */
#drawingModal,#heroDrawModal{
  overflow-y:auto!important;
  overscroll-behavior:contain;
  align-items:flex-start!important;
  padding:clamp(8px,2vh,22px) 8px!important;
  box-sizing:border-box!important;
}
#drawingModal .modal-card,#heroDrawModal .modal-card{
  width:min(790px,96vw)!important;
  max-height:none!important;
  margin:auto!important;
  padding:clamp(12px,2.2vh,24px)!important;
  box-sizing:border-box!important;
}
#drawingModal .canvas-shell,#heroDrawModal .canvas-shell{
  width:min(540px,92vw)!important;
  height:auto!important;
  aspect-ratio:4/3;
  margin:8px auto!important;
}
#drawingModal canvas,#heroDrawModal canvas{
  width:100%!important;
  height:100%!important;
  display:block!important;
  touch-action:none!important;
}
#drawingModal .draw-options,#heroDrawModal .draw-options,
#drawingModal .tool-row,#heroDrawModal .tool-row{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:7px!important;
  width:100%!important;
  box-sizing:border-box!important;
}
@media(max-height:720px),(max-width:700px){
 #drawingModal .modal-card,#heroDrawModal .modal-card{padding:10px!important}
 #drawingModal h2,#heroDrawModal h2{font-size:clamp(22px,5vw,30px)!important;margin:5px 0!important}
 #drawingModal p,#heroDrawModal p{margin:4px 0 7px!important;font-size:14px!important}
 #drawingModal .canvas-shell,#heroDrawModal .canvas-shell{width:min(430px,88vw)!important}
 #drawingModal .palette,#heroDrawModal .palette{margin:6px auto!important}
 #drawingModal .draw-options,#heroDrawModal .draw-options{padding:6px!important}
}


/* ========================================================================
   CANONICAL BATTLE BOARD
   This intentionally overrides the accumulated responsive experiments above.
   The battle has ONE 1200×760 composition. Smaller viewports scale that exact
   composition uniformly; internal geometry never reflows or collides.
   ======================================================================== */
#gameScreen.game-screen{
  position:relative!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:hidden!important;
  background:#07131e!important;
}
#world.world{
  position:relative!important;
  box-sizing:border-box!important;
  width:1200px!important;
  min-width:1200px!important;
  max-width:none!important;
  height:760px!important;
  min-height:760px!important;
  max-height:760px!important;
  overflow:hidden!important;
  transform:scale(var(--board-scale,1))!important;
  transform-origin:top left!important;
  background-size:cover!important;
  background-position:center center!important;
}
#world .game-header{
  position:absolute!important;
  z-index:30!important;
  top:0!important;left:0!important;
  box-sizing:border-box!important;
  width:1200px!important;height:205px!important;
  padding:50px 34px 0!important;
  display:grid!important;
  grid-template-columns:430px 272px 430px!important;
  gap:0!important;
  align-items:start!important;
  overflow:visible!important;
}
#world .game-title{
  position:relative!important;
  width:272px!important;
  z-index:35!important;
  justify-self:center!important;
}
#world .battle-logo{width:240px!important;max-height:92px!important;object-fit:contain!important}
#world .player-hud{
  position:relative!important;
  box-sizing:border-box!important;
  width:430px!important;height:138px!important;min-height:138px!important;
  margin:0!important;padding:15px 0 0!important;
  background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;
  transform:none!important;overflow:visible!important;
}
#world .player-hud.p1{padding-left:158px!important;justify-self:start!important}
#world .player-hud.p2{padding-right:158px!important;justify-self:end!important;text-align:right!important}
#world .player-hud .hud-info{width:272px!important;min-width:0!important;position:relative!important;z-index:32!important}
#world .player-hud .player-name{font-size:28px!important;line-height:32px!important;white-space:nowrap!important}
#world .player-hud .base-name{font-size:15px!important;white-space:nowrap!important}
#world .player-hud .hearts,#world .player-hud .heart-row{
  display:grid!important;grid-template-columns:repeat(10,25px)!important;
  gap:2px!important;width:268px!important;max-width:268px!important;
  margin:2px 0!important;
}
#world .player-hud.p2 .hearts,#world .player-hud.p2 .heart-row{margin-left:auto!important}
#world .player-hud .heart-icon,#world .player-hud .heart{width:25px!important;height:25px!important;max-width:25px!important}
#world .hero-frame{
  position:absolute!important;z-index:40!important;
  top:-18px!important;width:185px!important;height:215px!important;
  margin:0!important;transform:none!important;
}
#world .player-hud.p1 .hero-frame{left:-16px!important}
#world .player-hud.p2 .hero-frame{right:-16px!important}
#world .arena{
  position:absolute!important;z-index:5!important;
  left:0!important;top:190px!important;
  box-sizing:border-box!important;
  width:1200px!important;height:470px!important;
  padding:0!important;margin:0!important;
  display:grid!important;
  grid-template-columns:230px 740px 230px!important;
  align-items:end!important;
}
#world .base-zone{position:relative!important;width:230px!important;height:470px!important;overflow:visible!important;pointer-events:none!important}
#world #p1BaseArt,#world #p2BaseArt{
  position:absolute!important;z-index:6!important;
  width:360px!important;height:390px!important;min-height:0!important;
  top:72px!important;bottom:auto!important;
  visibility:visible!important;opacity:1!important;transform:none!important;
}
#world #p1BaseArt{left:-28px!important;right:auto!important}
#world #p2BaseArt{right:-28px!important;left:auto!important}
#world #p1BaseArt .battle-base-image{transform:none!important}
#world #p2BaseArt .battle-base-image{transform:scaleX(-1)!important}
#world .battle-platform{
  position:relative!important;z-index:12!important;
  box-sizing:border-box!important;
  width:740px!important;height:230px!important;min-height:230px!important;
  padding:0 0 18px!important;
  display:grid!important;
  grid-template-columns:330px 80px 330px!important;
  align-items:end!important;
}
#world .creature-row{
  display:grid!important;grid-template-columns:repeat(3,104px)!important;
  gap:9px!important;width:330px!important;min-width:330px!important;
}
#world .creature-slot{
  box-sizing:border-box!important;width:104px!important;height:170px!important;min-height:170px!important;
  border-radius:15px!important;
}
#world .creature-slot img{width:100%!important;height:158px!important;object-fit:contain!important}
#world .center-sigil{box-sizing:border-box!important;width:80px!important;font-size:40px!important}
#world .action-bar{
  position:absolute!important;z-index:50!important;
  left:50%!important;bottom:14px!important;transform:translateX(-50%)!important;
  box-sizing:border-box!important;
  width:1040px!important;height:92px!important;
  padding:10px!important;gap:14px!important;
  grid-template-columns:300px 1fr 300px!important;
}
#world .action-button{min-height:66px!important}
#world .action-button strong{font-size:24px!important}
#world .action-button small{font-size:12px!important}
#world .turn-display{font-size:25px!important}

/* Kill all previous battle-only breakpoint reflow while the canonical board is active. */
#world.scaled-board .game-header,
#world.scaled-board .arena,
#world.scaled-board .battle-platform,
#world.scaled-board .creature-row,
#world.scaled-board .player-hud,
#world.scaled-board .hero-frame,
#world.scaled-board .action-bar{box-sizing:border-box!important}


/* ========================================================================
   FLUID BATTLEFIELD — authoritative layout
   The background fills the viewport. UI geometry responds to viewport width
   and height directly; there is no transformed/fixed 1200px board.
   ======================================================================== */
html,body{margin:0;min-width:0}
#gameScreen.game-screen{
  position:relative!important;
  width:100vw!important;height:100vh!important;
  max-width:none!important;max-height:none!important;
  margin:0!important;padding:0!important;
  overflow:hidden!important;background:#07131e!important;
}
#world.world,#world.world.scaled-board{
  position:relative!important;
  width:100vw!important;min-width:0!important;max-width:none!important;
  height:100vh!important;min-height:0!important;max-height:none!important;
  overflow:hidden!important;
  transform:none!important;
  background-size:cover!important;background-position:center!important;
}

/* Header: two independent player territories plus protected center logo space. */
#world .game-header,#world.scaled-board .game-header{
  position:absolute!important;z-index:30!important;inset:0 0 auto 0!important;
  box-sizing:border-box!important;
  width:100%!important;height:clamp(145px,25vh,220px)!important;
  padding:clamp(22px,5vh,48px) clamp(8px,2vw,30px) 0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(150px,23vw,280px) minmax(0,1fr)!important;
  gap:0!important;align-items:start!important;overflow:visible!important;
}
#world .game-title,#world.scaled-board .game-title{
  width:100%!important;min-width:0!important;justify-self:center!important;z-index:35!important;
}
#world .battle-logo,#world.scaled-board .battle-logo{
  width:min(240px,90%)!important;max-height:clamp(58px,10vh,92px)!important;object-fit:contain!important;
}
#world .player-hud,#world.scaled-board .player-hud{
  position:relative!important;box-sizing:border-box!important;
  width:100%!important;height:clamp(104px,18vh,150px)!important;min-height:0!important;
  margin:0!important;padding-top:clamp(8px,1.5vh,15px)!important;
  background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;
  transform:none!important;overflow:visible!important;
}
#world .player-hud.p1,#world.scaled-board .player-hud.p1{
  padding-left:clamp(88px,14vw,178px)!important;justify-self:start!important;
}
#world .player-hud.p2,#world.scaled-board .player-hud.p2{
  padding-right:clamp(88px,14vw,178px)!important;justify-self:end!important;text-align:right!important;
}
#world .player-hud .hud-info,#world.scaled-board .player-hud .hud-info{
  width:100%!important;min-width:0!important;position:relative!important;z-index:32!important;
}
#world .player-hud .player-name,#world.scaled-board .player-hud .player-name{
  font-size:clamp(16px,2.1vw,30px)!important;line-height:1.05!important;white-space:nowrap!important;
}
#world .player-hud .base-name,#world.scaled-board .player-hud .base-name{
  font-size:clamp(10px,1.15vw,16px)!important;white-space:nowrap!important;
}
#world .player-hud .hearts,#world .player-hud .heart-row,
#world.scaled-board .player-hud .hearts,#world.scaled-board .player-hud .heart-row{
  display:grid!important;grid-template-columns:repeat(10,minmax(0,1fr))!important;
  gap:clamp(1px,.18vw,3px)!important;width:100%!important;max-width:300px!important;
  margin:clamp(2px,.5vh,5px) 0!important;min-width:0!important;
}
#world .player-hud.p2 .hearts,#world .player-hud.p2 .heart-row{margin-left:auto!important}
#world .player-hud .heart-icon,#world .player-hud .heart,
#world.scaled-board .player-hud .heart-icon,#world.scaled-board .player-hud .heart{
  width:100%!important;height:auto!important;min-width:0!important;max-width:30px!important;
}
#world .hero-frame,#world.scaled-board .hero-frame{
  position:absolute!important;z-index:40!important;
  top:clamp(-16px,-1vh,-5px)!important;
  width:clamp(105px,15vw,205px)!important;height:clamp(122px,18vw,235px)!important;
  margin:0!important;transform:none!important;
}
#world .player-hud.p1 .hero-frame{left:clamp(-5px,.5vw,8px)!important}
#world .player-hud.p2 .hero-frame{right:clamp(-5px,.5vw,8px)!important}

/* Arena fills the middle/lower viewport. */
#world .arena,#world.scaled-board .arena{
  position:absolute!important;z-index:5!important;
  left:0!important;right:0!important;
  top:clamp(150px,25vh,220px)!important;
  bottom:clamp(82px,13vh,112px)!important;
  box-sizing:border-box!important;width:100%!important;height:auto!important;
  padding:0!important;margin:0!important;
  display:grid!important;grid-template-columns:clamp(120px,19vw,300px) minmax(0,1fr) clamp(120px,19vw,300px)!important;
  align-items:end!important;
}
#world .base-zone,#world.scaled-board .base-zone{
  position:relative!important;width:100%!important;height:100%!important;overflow:visible!important;pointer-events:none!important;
}
#world #p1BaseArt,#world #p2BaseArt,
#world.scaled-board #p1BaseArt,#world.scaled-board #p2BaseArt{
  position:absolute!important;z-index:6!important;
  width:clamp(210px,30vw,500px)!important;height:clamp(230px,48vh,520px)!important;min-height:0!important;
  top:auto!important;bottom:-2vh!important;visibility:visible!important;opacity:1!important;transform:none!important;
}
#world #p1BaseArt{left:clamp(-85px,-4vw,-15px)!important;right:auto!important}
#world #p2BaseArt{right:clamp(-85px,-4vw,-15px)!important;left:auto!important}
#world #p1BaseArt .battle-base-image{transform:none!important}
#world #p2BaseArt .battle-base-image{transform:scaleX(-1)!important}

/* Creature territory flexes, but each player always owns exactly half. */
#world .battle-platform,#world.scaled-board .battle-platform{
  position:relative!important;z-index:12!important;box-sizing:border-box!important;
  width:100%!important;height:auto!important;min-height:0!important;padding:0 0 clamp(5px,2vh,18px)!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) clamp(18px,5vw,80px) minmax(0,1fr)!important;
  align-items:end!important;
}
#world .creature-row,#world.scaled-board .creature-row{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(3px,.8vw,10px)!important;width:100%!important;min-width:0!important;
}
#world .creature-slot,#world.scaled-board .creature-slot{
  box-sizing:border-box!important;width:100%!important;
  height:clamp(92px,16vw,175px)!important;min-height:0!important;border-radius:clamp(9px,1.2vw,16px)!important;
}
#world .creature-slot img,#world.scaled-board .creature-slot img{
  width:100%!important;height:100%!important;max-height:160px!important;object-fit:contain!important;
}
#world .center-sigil,#world.scaled-board .center-sigil{
  width:auto!important;font-size:clamp(16px,3vw,40px)!important;
}

/* Action bar is always anchored to the actual viewport bottom. */
#world .action-bar,#world.scaled-board .action-bar{
  position:absolute!important;z-index:50!important;
  left:50%!important;bottom:clamp(7px,1.5vh,16px)!important;transform:translateX(-50%)!important;
  box-sizing:border-box!important;width:min(1040px,94vw)!important;height:clamp(68px,12vh,94px)!important;
  padding:clamp(6px,1vh,10px)!important;gap:clamp(6px,1vw,14px)!important;
  grid-template-columns:minmax(150px,300px) minmax(120px,1fr) minmax(150px,300px)!important;
}
#world .action-button,#world.scaled-board .action-button{min-height:0!important;height:100%!important}
#world .action-button strong,#world.scaled-board .action-button strong{font-size:clamp(17px,2vw,25px)!important}
#world .action-button small,#world.scaled-board .action-button small{font-size:clamp(9px,.9vw,12px)!important}
#world .turn-display,#world.scaled-board .turn-display{font-size:clamp(16px,2vw,25px)!important}

/* Narrow browser / small tablet: keep one board, but trade decorative scale for play space. */
@media(max-width:760px){
 #world .game-header,#world.scaled-board .game-header{
   grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr)!important;
   padding-left:4px!important;padding-right:4px!important;
 }
 #world .player-hud.p1,#world.scaled-board .player-hud.p1{padding-left:78px!important}
 #world .player-hud.p2,#world.scaled-board .player-hud.p2{padding-right:78px!important}
 #world .hero-frame,#world.scaled-board .hero-frame{width:100px!important;height:116px!important}
 #world .arena,#world.scaled-board .arena{grid-template-columns:105px minmax(0,1fr) 105px!important}
 #world #p1BaseArt,#world #p2BaseArt{width:190px!important;height:230px!important}
 #world .action-bar,#world.scaled-board .action-bar{
   width:96vw!important;grid-template-columns:minmax(125px,1fr) minmax(110px,.9fr) minmax(125px,1fr)!important;
 }
}


/* ========================================================================
   BATTLE LAYOUT STABILIZATION
   Player identity is anchored to OUTER EDGES, never to a shrinking center grid.
   This is the final authority over the earlier responsive experiments.
   ======================================================================== */
#world .game-header{
  display:block!important;
  position:absolute!important;inset:0 0 auto 0!important;
  width:100%!important;height:clamp(170px,27vh,245px)!important;
  padding:0!important;overflow:visible!important;pointer-events:none!important;
}
#world .game-title{
  position:absolute!important;z-index:35!important;
  top:clamp(18px,4vh,38px)!important;left:50%!important;transform:translateX(-50%)!important;
  width:clamp(170px,24vw,300px)!important;text-align:center!important;pointer-events:auto!important;
}
#world .player-hud{
  position:absolute!important;z-index:32!important;
  top:clamp(52px,8vh,78px)!important;
  width:clamp(350px,37vw,560px)!important;height:clamp(135px,19vh,175px)!important;
  margin:0!important;padding-top:18px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;pointer-events:none!important;
}
#world .player-hud.p1{left:0!important;right:auto!important;padding-left:clamp(155px,15vw,225px)!important;padding-right:8px!important}
#world .player-hud.p2{right:0!important;left:auto!important;padding-right:clamp(155px,15vw,225px)!important;padding-left:8px!important;text-align:right!important}
#world .player-hud .hud-info{width:100%!important;max-width:330px!important}
#world .player-hud.p2 .hud-info{margin-left:auto!important}
#world .hero-frame{
  position:absolute!important;z-index:40!important;top:-20px!important;
  width:clamp(170px,15vw,225px)!important;height:clamp(198px,18vw,260px)!important;
}
#world .player-hud.p1 .hero-frame{left:-10px!important;right:auto!important}
#world .player-hud.p2 .hero-frame{right:-10px!important;left:auto!important}
#world .player-hud .player-name{font-size:clamp(23px,2vw,32px)!important}
#world .player-hud .base-name{font-size:clamp(13px,1.05vw,17px)!important}
#world .player-hud .hearts,#world .player-hud .heart-row{
  display:grid!important;grid-template-columns:repeat(10,clamp(24px,2.05vw,32px))!important;
  gap:2px!important;width:max-content!important;max-width:none!important;
}
#world .player-hud.p2 .hearts,#world .player-hud.p2 .heart-row{margin-left:auto!important}
#world .player-hud .heart-icon,#world .player-hud .heart{
  width:clamp(24px,2.05vw,32px)!important;height:clamp(24px,2.05vw,32px)!important;max-width:none!important;
}

/* Prominent bases are anchored outside the creature territory. */
#world .arena{
  position:absolute!important;z-index:5!important;
  left:0!important;right:0!important;top:clamp(175px,27vh,245px)!important;
  bottom:clamp(96px,14vh,125px)!important;width:100%!important;height:auto!important;
  display:block!important;padding:0!important;margin:0!important;
}
#world .base-zone{position:absolute!important;top:0!important;bottom:0!important;width:25vw!important;height:auto!important}
#world .base-zone.left{left:0!important}.base-zone.right{right:0!important}
#world #p1BaseArt,#world #p2BaseArt{
  position:absolute!important;z-index:6!important;bottom:-12px!important;top:auto!important;
  width:clamp(300px,36vw,560px)!important;height:clamp(310px,55vh,570px)!important;
}
#world #p1BaseArt{left:clamp(-125px,-5vw,-25px)!important}
#world #p2BaseArt{right:clamp(-125px,-5vw,-25px)!important}
#world .battle-platform{
  position:absolute!important;z-index:12!important;
  left:19vw!important;right:19vw!important;bottom:8px!important;
  width:auto!important;height:auto!important;min-height:0!important;padding:0!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) clamp(34px,5vw,80px) minmax(0,1fr)!important;
  align-items:end!important;
}
#world .creature-row{width:100%!important;min-width:0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
#world .creature-slot{
  width:100%!important;height:clamp(105px,18vh,180px)!important;min-height:0!important;
}

/* Drawing is a true top-level modal. Nothing from battle may cover it. */
#drawingModal.overlay,#heroDrawModal.overlay{
  position:fixed!important;inset:0!important;z-index:10000!important;
  width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;
  overflow-y:auto!important;background:rgba(8,14,22,.78)!important;
  isolation:isolate!important;pointer-events:auto!important;
}
#drawingModal .modal-card,#heroDrawModal .modal-card{position:relative!important;z-index:10001!important}
body:has(#drawingModal:not(.hidden)) #world,
body:has(#heroDrawModal:not(.hidden)) #world{pointer-events:none!important}

/* Compact landscape: heroes stay at the OUTSIDE edges; information stays in its
   own half; hearts wrap 5×2 instead of becoming tiny or crossing center. */
@media(max-width:800px){
 #world .game-header{height:155px!important}
 #world .game-title{top:12px!important;width:170px!important}
 #world .battle-logo{width:160px!important;max-height:62px!important}
 #world .battle-meta{font-size:12px!important}
 #world .battle-header-buttons .small-button{min-width:70px!important;padding:7px 8px!important;font-size:10px!important}
 #world .player-hud{
   top:82px!important;width:50%!important;height:105px!important;padding-top:2px!important;
 }
 #world .player-hud.p1{left:0!important;padding-left:105px!important;padding-right:6px!important}
 #world .player-hud.p2{right:0!important;padding-right:105px!important;padding-left:6px!important}
 #world .hero-frame{top:-8px!important;width:108px!important;height:126px!important}
 #world .player-hud.p1 .hero-frame{left:-4px!important}
 #world .player-hud.p2 .hero-frame{right:-4px!important}
 #world .player-hud .player-name{font-size:18px!important;line-height:20px!important}
 #world .player-hud .base-name{font-size:10px!important;line-height:12px!important}
 #world .player-hud .hearts,#world .player-hud .heart-row{
   grid-template-columns:repeat(5,20px)!important;grid-template-rows:repeat(2,20px)!important;
   gap:1px!important;width:104px!important;margin:1px 0!important;
 }
 #world .player-hud.p2 .hearts,#world .player-hud.p2 .heart-row{margin-left:auto!important}
 #world .player-hud .heart-icon,#world .player-hud .heart{width:20px!important;height:20px!important}
 #world .arena{top:188px!important;bottom:78px!important}
 #world .base-zone{width:22%!important}
 #world #p1BaseArt,#world #p2BaseArt{width:220px!important;height:245px!important;bottom:-5px!important}
 #world #p1BaseArt{left:-58px!important} #world #p2BaseArt{right:-58px!important}
 #world .battle-platform{left:15%!important;right:15%!important;bottom:4px!important}
 #world .creature-slot{height:clamp(76px,19vh,118px)!important}
 #world .action-bar{
   width:94vw!important;height:66px!important;bottom:6px!important;padding:5px!important;
   grid-template-columns:minmax(125px,1fr) minmax(120px,.9fr) minmax(125px,1fr)!important;
 }
 #world .action-button strong{font-size:17px!important}
 #world .action-button small{font-size:9px!important}
 #world .turn-display{font-size:17px!important}
}
@media(max-height:560px){
 #world .game-title{top:5px!important}
 #world .player-hud{top:68px!important}
 #world .arena{top:165px!important;bottom:72px!important}
 #world #p1BaseArt,#world #p2BaseArt{height:210px!important}
 #world .creature-slot{height:82px!important}
 #world .action-bar{height:62px!important;bottom:4px!important}
}


/* VISUAL EMPHASIS PASS — desktop/tablet only.
   Keep the stabilized responsive territory rules intact; change scale/placement,
   not the underlying layout model. */
@media(min-width:801px){
  /* Bring shield fully on-screen and make the hero a stronger identity anchor. */
  #world .player-hud.p1 .hero-frame{left:18px!important}
  #world .player-hud.p2 .hero-frame{right:18px!important}
  #world .hero-frame{
    width:clamp(190px,16.5vw,245px)!important;
    height:clamp(220px,19.5vw,282px)!important;
    top:-28px!important;
  }
  #world .player-hud.p1{padding-left:clamp(205px,17vw,255px)!important}
  #world .player-hud.p2{padding-right:clamp(205px,17vw,255px)!important}

  /* Use the available identity space for jewel-like hearts instead of empty air. */
  #world .player-hud{width:clamp(500px,43vw,650px)!important}
  #world .player-hud .hud-info{max-width:390px!important}
  #world .player-hud .hearts,#world .player-hud .heart-row{
    grid-template-columns:repeat(10,clamp(30px,2.55vw,40px))!important;
    gap:clamp(2px,.24vw,4px)!important;
    width:max-content!important;
  }
  #world .player-hud .heart-icon,#world .player-hud .heart{
    width:clamp(30px,2.55vw,40px)!important;
    height:clamp(30px,2.55vw,40px)!important;
  }

  /* Bases return to the oversized kingdom-landmark treatment. */
  #world .base-zone{width:30vw!important}
  #world #p1BaseArt,#world #p2BaseArt{
    width:clamp(430px,48vw,760px)!important;
    height:clamp(430px,67vh,700px)!important;
    bottom:-48px!important;
  }
  #world #p1BaseArt{left:clamp(-185px,-7vw,-55px)!important}
  #world #p2BaseArt{right:clamp(-185px,-7vw,-55px)!important}

  /* Keep creature territory above the enlarged decorative bases. */
  #world .battle-platform{z-index:14!important}
}

/* At very wide desktop sizes, let the landmarks become genuinely imposing. */
@media(min-width:1400px){
  #world #p1BaseArt,#world #p2BaseArt{
    width:min(50vw,820px)!important;
    height:min(72vh,760px)!important;
    bottom:-60px!important;
  }
  #world .player-hud .hearts,#world .player-hud .heart-row{
    grid-template-columns:repeat(10,40px)!important;
    gap:4px!important;
  }
  #world .player-hud .heart-icon,#world .player-hud .heart{
    width:40px!important;height:40px!important;
  }
}

.setup-nav{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.setup-nav .magic-button{margin:0!important}.setup-back{min-width:130px}
#world .hero-frame{background:rgba(255,249,233,.96)!important;isolation:isolate}
#world .hero-frame .hero-die-backdrop{position:absolute!important;z-index:0!important;left:50%!important;top:50%!important;width:88%!important;height:88%!important;object-fit:contain!important;transform:translate(-50%,-50%) rotate(-8deg)!important;opacity:.22!important;filter:saturate(1.25) drop-shadow(0 0 12px rgba(255,215,95,.5))!important;pointer-events:none!important}
#world .hero-frame .hero-portrait{position:relative!important;z-index:1!important;width:100%!important;height:100%!important;object-fit:contain!important}
@media(min-width:801px){
 #world .player-hud.p1,#world .player-hud.p2{width:clamp(500px,43vw,650px)!important;top:clamp(52px,8vh,78px)!important}
 #world .player-hud.p1{left:0!important;right:auto!important;padding-left:clamp(205px,17vw,255px)!important;padding-right:8px!important}
 #world .player-hud.p2{right:0!important;left:auto!important;padding-right:clamp(205px,17vw,255px)!important;padding-left:8px!important}
 #world .player-hud .hud-info{width:100%!important;max-width:390px!important}
 #world .player-hud.p1 .hud-info{margin:0!important;text-align:left!important}
 #world .player-hud.p2 .hud-info{margin:0 0 0 auto!important;text-align:right!important}
 #world .player-hud.p1 .hearts,#world .player-hud.p1 .heart-row{margin-left:0!important;margin-right:auto!important}
 #world .player-hud.p2 .hearts,#world .player-hud.p2 .heart-row{margin-left:auto!important;margin-right:0!important}
 #world .player-hud.p1 .hero-frame{left:18px!important;right:auto!important}
 #world .player-hud.p2 .hero-frame{right:18px!important;left:auto!important}
}

/* Identity polish: exact mirrored spacing and clearly visible chosen-die heraldry. */
.hero-setup-nav{display:flex;justify-content:flex-start;margin:0 0 10px}
@media(min-width:801px){
  #world .player-hud.p1,#world .player-hud.p2{
    width:clamp(520px,44vw,680px)!important;
    box-sizing:border-box!important;
  }
  /* Same 245px shield reservation on both sides; P2 is a literal mirror. */
  #world .player-hud.p1{padding-left:245px!important;padding-right:0!important}
  #world .player-hud.p2{padding-right:245px!important;padding-left:0!important}
  #world .player-hud.p1 .hero-frame{left:18px!important;right:auto!important}
  #world .player-hud.p2 .hero-frame{right:18px!important;left:auto!important}
  #world .player-hud .hud-info{width:390px!important;max-width:390px!important}
  #world .player-hud.p1 .hud-info{margin:0!important;text-align:left!important}
  #world .player-hud.p2 .hud-info{margin-left:auto!important;margin-right:0!important;text-align:right!important}
  #world .player-hud.p1 .hearts{margin-left:0!important;margin-right:auto!important}
  #world .player-hud.p2 .hearts{margin-left:auto!important;margin-right:0!important}
}

/* Die sits INSIDE the shield, behind the hero. It is intentionally obvious. */
#world .hero-frame{position:absolute!important;overflow:hidden!important}
#world .hero-frame .hero-die-backdrop{
  display:block!important;visibility:visible!important;opacity:.48!important;
  position:absolute!important;z-index:1!important;
  left:50%!important;top:52%!important;
  width:108%!important;height:108%!important;
  max-width:none!important;max-height:none!important;
  object-fit:contain!important;
  transform:translate(-50%,-50%) rotate(-10deg)!important;
  filter:saturate(1.35) contrast(1.08) drop-shadow(0 0 14px rgba(255,196,45,.75))!important;
  pointer-events:none!important;
}
#world .hero-frame .hero-portrait{
  display:block!important;position:absolute!important;z-index:2!important;
  inset:0!important;width:100%!important;height:100%!important;
  object-fit:contain!important;background:transparent!important;
}


/* HUD baseline alignment correction.
   Both players' name, hearts and base label share ONE left edge. P2 is not
   right-aligned internally; its whole block is positioned on the right side. */
.hero-bottom-nav{margin-top:18px!important}
@media(min-width:801px){
  #world .player-hud .hud-info{
    width:390px!important;max-width:390px!important;
    text-align:left!important;
  }
  #world .player-hud.p1 .hud-info{
    position:absolute!important;left:245px!important;right:auto!important;margin:0!important;
  }
  #world .player-hud.p2 .hud-info{
    position:absolute!important;right:245px!important;left:auto!important;margin:0!important;
    text-align:left!important;
  }
  #world .player-hud.p1 .hearts,#world .player-hud.p2 .hearts,
  #world .player-hud.p1 .heart-row,#world .player-hud.p2 .heart-row{
    margin-left:0!important;margin-right:auto!important;
  }
}
/* Compact view keeps the same internal alignment principle. */
@media(max-width:800px){
  #world .player-hud.p2 .hud-info{text-align:left!important}
  #world .player-hud.p2 .hearts,#world .player-hud.p2 .heart-row{margin-left:0!important;margin-right:auto!important}
}

/* Dice crest: very large and high in the shield, behind the hero. */
#world .hero-frame .hero-die-backdrop{
  left:50%!important;top:19%!important;
  width:150%!important;height:150%!important;
  transform:translate(-50%,-50%) rotate(-10deg)!important;
  opacity:.52!important;object-fit:contain!important;
}


/* P2 identity alignment: the RIGHT edge is the shared datum.
   PLAYER 2's "2", the tenth heart, and the last letter of the base name
   terminate on the same vertical line immediately before the hero shield. */
@media(min-width:801px){
  #world .player-hud.p2 .hud-info{
    position:absolute!important;
    right:245px!important;left:auto!important;
    width:390px!important;max-width:390px!important;
    margin:0!important;text-align:right!important;
  }
  #world .player-hud.p2 .player-name,
  #world .player-hud.p2 .base-name{
    width:100%!important;text-align:right!important;
  }
  #world .player-hud.p2 .hearts,
  #world .player-hud.p2 .heart-row{
    margin-left:auto!important;margin-right:0!important;
    justify-content:end!important;
  }
}
@media(max-width:800px){
  #world .player-hud.p2 .hud-info{text-align:right!important}
  #world .player-hud.p2 .player-name,#world .player-hud.p2 .base-name{text-align:right!important}
  #world .player-hud.p2 .hearts,#world .player-hud.p2 .heart-row{margin-left:auto!important;margin-right:0!important;justify-content:end!important}
}


/* Final P2 heart-row datum correction.
   The row's right edge must equal the same right edge as PLAYER 2/base name.
   Earlier generic .hearts width/max-width rules could let the grid's visual
   contents escape its alignment box, so P2 gets an explicit intrinsic width. */
@media(min-width:801px){
  #world .player-hud.p2 .hearts,
  #world .player-hud.p2 .heart-row{
    width:max-content!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:0!important;
    justify-content:end!important;
    justify-items:end!important;
  }
}

/* Give each hero shield the same luminous separation used by the heart jewels. */
#world .hero-frame{
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.95))
    drop-shadow(0 0 7px rgba(255,218,103,.72))
    drop-shadow(0 0 13px rgba(255,218,103,.34))!important;
}


/* P2 hearts: anchor the GRID ITSELF to the HUD's text endpoint.
   Previous rules aligned the grid box but the 10 explicit grid columns were
   wider than that box, so CSS grid overflowed to the right under the shield. */
@media(min-width:801px){
  #world .player-hud.p2 .hearts,
  #world .player-hud.p2 .heart-row{
    position:absolute!important;
    right:0!important;
    left:auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:2px 0!important;
    display:grid!important;
    grid-template-columns:repeat(10,clamp(30px,2.55vw,40px))!important;
    gap:clamp(2px,.24vw,4px)!important;
  }
}


/* ========================================================================
   PLAYER IDENTITY — clean symmetric layout
   Stop special-casing individual P2 children. Both HUDs use the SAME internal
   three-row block. P1 block sits just inside its shield; P2 block is the exact
   horizontal counterpart, just inside its shield. No absolute heart positioning.
   ======================================================================== */
@media(min-width:801px){
  #world .player-hud.p1,
  #world .player-hud.p2{
    position:absolute!important;
    top:clamp(52px,8vh,78px)!important;
    width:clamp(520px,44vw,680px)!important;
    height:175px!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  #world .player-hud.p1{left:0!important;right:auto!important}
  #world .player-hud.p2{right:0!important;left:auto!important}

  #world .player-hud .hud-info{
    position:absolute!important;
    top:18px!important;
    width:390px!important;
    max-width:390px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
    box-sizing:border-box!important;
  }
  #world .player-hud.p1 .hud-info{
    left:245px!important;right:auto!important;
    align-items:flex-start!important;text-align:left!important;
  }
  #world .player-hud.p2 .hud-info{
    right:245px!important;left:auto!important;
    align-items:flex-end!important;text-align:right!important;
  }

  #world .player-hud .player-name,
  #world .player-hud .base-name{
    position:static!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
  }
  #world .player-hud.p1 .player-name,
  #world .player-hud.p1 .base-name{text-align:left!important}
  #world .player-hud.p2 .player-name,
  #world .player-hud.p2 .base-name{text-align:right!important}

  #world .player-hud .hearts,
  #world .player-hud .heart-row,
  #world .player-hud.p1 .hearts,
  #world .player-hud.p2 .hearts,
  #world .player-hud.p1 .heart-row,
  #world .player-hud.p2 .heart-row{
    position:static!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    gap:clamp(2px,.24vw,4px)!important;
    justify-content:flex-start!important;
    align-items:center!important;
  }
  #world .player-hud.p1 .hearts,
  #world .player-hud.p1 .heart-row{align-self:flex-start!important}
  #world .player-hud.p2 .hearts,
  #world .player-hud.p2 .heart-row{align-self:flex-end!important}

  #world .player-hud .heart-icon,
  #world .player-hud .heart{
    flex:0 0 auto!important;
    width:clamp(30px,2.55vw,40px)!important;
    height:clamp(30px,2.55vw,40px)!important;
  }

  #world .player-hud.p1 .hero-frame{left:18px!important;right:auto!important}
  #world .player-hud.p2 .hero-frame{right:18px!important;left:auto!important}
}

/* Preserve the stable compact layout; only enforce mirrored text/heart direction. */
@media(max-width:800px){
  #world .player-hud.p1 .hud-info{align-items:flex-start!important;text-align:left!important}
  #world .player-hud.p2 .hud-info{align-items:flex-end!important;text-align:right!important}
  #world .player-hud.p1 .hearts,#world .player-hud.p1 .heart-row{margin-left:0!important;margin-right:auto!important}
  #world .player-hud.p2 .hearts,#world .player-hud.p2 .heart-row{margin-left:auto!important;margin-right:0!important}
}


/* Hero shield finish: crisp gold rim + the same warm jewel glow language as hearts. */
#world .hero-frame{
  border:3px solid #e4b84f!important;
  box-sizing:border-box!important;
  filter:
    drop-shadow(0 3px 4px rgba(0,0,0,.55))
    drop-shadow(0 0 3px rgba(255,255,255,.92))
    drop-shadow(0 0 8px rgba(255,218,103,.72))
    drop-shadow(0 0 15px rgba(255,218,103,.34))!important;
}

/* Hero commands use the character cutout only — no shield/card behind the hero. */
.hero-command-portrait{
  width:150px!important;height:175px!important;flex:none!important;
  padding:0!important;background:transparent!important;
  clip-path:none!important;
  filter:none!important;
  overflow:visible!important;
}
.hero-command-portrait img{
  width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center bottom!important;
  box-sizing:border-box!important;padding:0!important;
  background:transparent!important;clip-path:none!important;
  filter:
    drop-shadow(0 3px 3px rgba(0,0,0,.72))
    drop-shadow(0 0 3px rgba(255,255,255,.88))
    drop-shadow(0 0 9px rgba(255,218,103,.72))
    drop-shadow(0 0 17px rgba(255,218,103,.34))!important;
}
.player2-command .hero-command-portrait img{transform:scaleX(-1)!important}
@media(max-width:760px){
 .hero-command-portrait{width:118px!important;height:138px!important}
}


/* Visible shield rim: CSS border is clipped away by clip-path, so draw the rim
   as a shield-shaped pseudo-element INSIDE the clipping boundary. */
#world .hero-frame{
  border:0!important;
  overflow:visible!important;
}
#world .hero-frame::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  pointer-events:none!important;
  clip-path:polygon(50% 0,94% 15%,90% 68%,50% 100%,10% 68%,6% 15%)!important;
  background:linear-gradient(145deg,#fff1a2 0%,#d59b25 24%,#ffe58a 48%,#b97912 72%,#f7d66d 100%)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  padding:5px!important;
  box-sizing:border-box!important;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.98))
    drop-shadow(0 0 9px rgba(255,218,103,.9))
    drop-shadow(0 0 18px rgba(255,191,45,.55))!important;
}
/* Separate glow silhouette outside the clipped shield. */
#world .hero-frame::before{
  content:""!important;
  position:absolute!important;
  inset:-2px!important;
  z-index:-1!important;
  clip-path:polygon(50% 0,94% 15%,90% 68%,50% 100%,10% 68%,6% 15%)!important;
  background:#f4c74f!important;
  filter:blur(8px)!important;
  opacity:.72!important;
  pointer-events:none!important;
}


/* ========================================================================
   HERO SHIELD STRUCTURE
   Outer element owns the gold silhouette + glow.
   Inner .hero-frame clips ONLY the dice and hero artwork.
   ======================================================================== */
#world .hero-shield-outer{
  position:absolute!important;
  z-index:40!important;
  top:-28px!important;
  width:clamp(190px,16.5vw,245px)!important;
  height:clamp(220px,19.5vw,282px)!important;
  padding:5px!important;
  box-sizing:border-box!important;
  clip-path:polygon(50% 0,94% 15%,90% 68%,50% 100%,10% 68%,6% 15%)!important;
  background:linear-gradient(145deg,#fff2a6 0%,#d49a20 24%,#ffe68a 48%,#b87810 73%,#f7d76e 100%)!important;
  filter:
    drop-shadow(0 4px 5px rgba(0,0,0,.58))
    drop-shadow(0 0 4px rgba(255,255,255,.96))
    drop-shadow(0 0 10px rgba(255,218,103,.90))
    drop-shadow(0 0 20px rgba(255,188,36,.58))!important;
  pointer-events:none!important;
}
#world .player-hud.p1 .hero-shield-outer{left:18px!important;right:auto!important}
#world .player-hud.p2 .hero-shield-outer{right:18px!important;left:auto!important}

#world .hero-shield-outer .hero-frame{
  position:relative!important;
  inset:auto!important;top:auto!important;left:auto!important;right:auto!important;
  width:100%!important;height:100%!important;
  margin:0!important;padding:0!important;
  box-sizing:border-box!important;
  border:0!important;
  clip-path:polygon(50% 0,94% 15%,90% 68%,50% 100%,10% 68%,6% 15%)!important;
  overflow:hidden!important;
  background:rgba(255,249,233,.96)!important;
  filter:none!important;
}
/* Retire the failed pseudo-rim implementation now that the wrapper owns it. */
#world .hero-shield-outer .hero-frame::before,
#world .hero-shield-outer .hero-frame::after{content:none!important;display:none!important}

@media(max-width:800px){
 #world .hero-shield-outer{top:-8px!important;width:108px!important;height:126px!important;padding:3px!important}
 #world .player-hud.p1 .hero-shield-outer{left:-4px!important}
 #world .player-hud.p2 .hero-shield-outer{right:-4px!important}
}
@media(max-height:560px) and (max-width:800px){
 #world .hero-shield-outer{width:100px!important;height:116px!important}
}


/* Revert shield rim/glow experiment. Return to the clean clipped hero shield. */
#world .hero-frame{
  border:0!important;
  overflow:hidden!important;
  filter:none!important;
}
#world .hero-frame::before,#world .hero-frame::after{content:none!important;display:none!important}


/* Combat confirmation panels must sit above HUD/heroes/bases/action bar. */
#world .attack-panel,
#attackPanel{
  z-index:500!important;
}


/* Unified popup stacking order.
   All transient game dialogs must render above the battlefield HUD (max z=50). */
#messageOverlay.overlay,
#rulesOverlay.overlay{
  z-index:700!important;
}
#diceOverlay.dice-overlay,
#powerOverlay.dice-overlay{
  z-index:800!important;
}
#heroCommandOverlay.hero-command-overlay{
  z-index:600!important;
}
#victoryOverlay.victory-overlay{
  z-index:900!important;
}
/* Drawing/hero creator intentionally remains highest at 10000. */


/* Battle utility controls: centered two-button row */
#world .battle-header-buttons{
  display:grid!important;
  grid-template-columns:repeat(2,78px)!important;
  gap:6px!important;
  justify-content:center!important;
  align-items:center!important;
  width:max-content!important;
  margin:0 auto!important;
}
#world .battle-header-buttons #battleRulesButton,
#world .battle-header-buttons #restartButton{
  position:static!important;
  box-sizing:border-box!important;
  width:78px!important;
  min-width:78px!important;
  max-width:78px!important;
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0 4px!important;
  display:grid!important;
  place-items:center!important;
  font-size:9px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
@media(max-width:800px){
  #world .battle-header-buttons{
    grid-template-columns:repeat(2,54px)!important;
    gap:4px!important;
  }
  #world .battle-header-buttons #battleRulesButton,
  #world .battle-header-buttons #restartButton{
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    height:27px!important;
    min-height:27px!important;
    padding:0 2px!important;
    font-size:7px!important;
  }
}


/* ========================================================================
   GAME FEEL / ANIMATION LAYER
   Cosmetic only. Does not alter battlefield geometry, HUD alignment, popup
   z-order, or game mechanics.
   ======================================================================== */
.screen-fx-layer{
  position:fixed;
  inset:0;
  z-index:850;
  pointer-events:none;
  overflow:hidden;
}
.fx-particle{
  position:absolute;
  width:var(--fx-size,6px);
  height:var(--fx-size,6px);
  margin:calc(var(--fx-size,6px)/-2);
  border-radius:50%;
  background:var(--fx-color,#ffe58a);
  box-shadow:0 0 8px var(--fx-color,#ffe58a);
  animation:fxBurst .72s cubic-bezier(.12,.7,.2,1) var(--fx-delay,0ms) both;
}
.ruby-fx-shard{
  border-radius:1px;
  clip-path:polygon(50% 0,100% 34%,70% 100%,0 72%,13% 17%);
}
@keyframes fxBurst{
  0%{opacity:0;transform:translate(0,0) scale(.25) rotate(0)}
  14%{opacity:1}
  100%{opacity:0;transform:translate(var(--fx-dx),var(--fx-dy)) scale(.45) rotate(var(--fx-rot))}
}

.fx-flying-creature{
  position:fixed;
  z-index:11000;
  pointer-events:none;
  object-fit:contain;
  border-radius:12px;
}
#world .creature-slot.summon-arriving img{opacity:.08!important}
#world .creature-slot.summon-land{
  animation:summonLand .82s cubic-bezier(.12,.78,.18,1) both!important;
}
#world .creature-slot.summon-land img{animation:summonedCreatureGlow .9s ease-out both}
@keyframes summonLand{
  0%{scale:.65;filter:brightness(2.2) drop-shadow(0 0 28px #fff5a6)}
  45%{scale:1.12;filter:brightness(1.45) drop-shadow(0 0 35px #7ee8ff)}
  100%{scale:1;filter:none}
}
@keyframes summonedCreatureGlow{
  0%{opacity:.25;filter:brightness(2.1) drop-shadow(0 0 24px #ffe66a)}
  100%{opacity:1}
}

#world.battle-focus::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:28;
  pointer-events:none;
  background:radial-gradient(circle at 50% 60%,transparent 34%,rgba(4,8,17,.28) 100%);
  animation:battleFocus .52s ease both;
}
@keyframes battleFocus{0%,100%{opacity:0}35%,75%{opacity:1}}
#world .creature-slot.attack-windup[data-player="1"]{animation:attackLungeP1 .52s cubic-bezier(.25,.8,.2,1)!important}
#world .creature-slot.attack-windup[data-player="2"]{animation:attackLungeP2 .52s cubic-bezier(.25,.8,.2,1)!important}
@keyframes attackLungeP1{
  0%{transform:translateY(-10px) scale(1)}
  45%{transform:translate(-9px,-13px) scale(.96)}
  78%{transform:translate(22px,-10px) scale(1.07)}
  100%{transform:translateY(-10px) scale(1)}
}
@keyframes attackLungeP2{
  0%{transform:translateY(-10px) scale(1)}
  45%{transform:translate(9px,-13px) scale(.96)}
  78%{transform:translate(-22px,-10px) scale(1.07)}
  100%{transform:translateY(-10px) scale(1)}
}
#world .hero-attack-ready .hero-frame{animation:heroAttackPulse .52s ease both}
@keyframes heroAttackPulse{
  0%,100%{filter:none}
  45%{filter:brightness(1.22) drop-shadow(0 0 18px #ffe071)}
}

#world .heart.broken-heart{
  position:relative!important;
  opacity:1!important;
  filter:none!important;
  overflow:visible!important;
}
#world .heart.broken-heart .heart-ruby-source{
  opacity:.10!important;
  filter:grayscale(.65) brightness(.55)!important;
}
#world .heart-shard{
  position:absolute;
  inset:0;
  display:block;
  background:url("assets/heart-ruby.png") center/contain no-repeat;
  filter:drop-shadow(0 1px 1px #32040b) brightness(.78) saturate(.9);
  pointer-events:none;
}
#world .heart-shard.shard-1{clip-path:polygon(0 0,54% 0,45% 46%,7% 66%);transform:translate(-2px,-1px) rotate(-7deg)}
#world .heart-shard.shard-2{clip-path:polygon(54% 0,100% 0,94% 61%,48% 46%);transform:translate(2px,-2px) rotate(6deg)}
#world .heart-shard.shard-3{clip-path:polygon(6% 64%,45% 46%,52% 100%,17% 84%);transform:translate(-2px,3px) rotate(5deg)}
#world .heart-shard.shard-4{clip-path:polygon(48% 46%,94% 61%,82% 84%,52% 100%);transform:translate(3px,3px) rotate(-6deg)}
#world .heart.just-shattered .heart-shard{animation:rubyShatter .62s cubic-bezier(.12,.8,.2,1) both}
#world .heart.just-shattered .shard-1{--sx:-8px;--sy:-7px;--sr:-20deg}
#world .heart.just-shattered .shard-2{--sx:8px;--sy:-8px;--sr:19deg}
#world .heart.just-shattered .shard-3{--sx:-7px;--sy:8px;--sr:15deg}
#world .heart.just-shattered .shard-4{--sx:8px;--sy:8px;--sr:-17deg}
@keyframes rubyShatter{
  0%{opacity:1;transform:translate(0,0) rotate(0) scale(1.15);filter:brightness(2.2) drop-shadow(0 0 10px #ff8696)}
  55%{transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(.94)}
  100%{opacity:1}
}
#world .player-hud.hud-hit{animation:hudHit .5s ease both}
@keyframes hudHit{
  0%,100%{filter:none}
  24%{filter:brightness(1.75) drop-shadow(0 0 16px #ff4b55)}
}
#world .arena.impact-jolt-1{animation:jolt1 .36s linear}
#world .arena.impact-jolt-2{animation:jolt2 .40s linear}
#world .arena.impact-jolt-3{animation:jolt3 .44s linear}
@keyframes jolt1{0%,100%{translate:0 0}35%{translate:-2px 0}65%{translate:2px 0}}
@keyframes jolt2{0%,100%{translate:0 0}20%{translate:-4px 1px}45%{translate:4px -1px}70%{translate:-2px 0}}
@keyframes jolt3{0%,100%{translate:0 0}15%{translate:-6px 1px}35%{translate:6px -2px}55%{translate:-5px 1px}75%{translate:3px 0}}

#world .creature-slot.defeat-burst{animation:defeatHit .46s ease-out both}
#world .creature-slot.defeat-vanish{animation:defeatVanish .62s ease-in both}
@keyframes defeatHit{
  0%{filter:none}
  35%{filter:brightness(2) saturate(.4) drop-shadow(0 0 18px #ff433d)}
  100%{filter:grayscale(.65) brightness(.72)}
}
@keyframes defeatVanish{
  0%{opacity:1;scale:1}
  70%{opacity:.35;scale:.78}
  100%{opacity:0;scale:.55}
}

.tap-die.die-land{animation:dieLand .38s cubic-bezier(.12,.75,.2,1)!important}
.tap-die.critical-ten{animation:criticalTen .88s ease-out!important}
.dice-battle-card.dice-impact{animation:diceCardImpact .28s ease-out}
@keyframes dieLand{
  0%{scale:1.22;filter:brightness(1.8) drop-shadow(0 0 28px #fff)}
  60%{scale:.94}
  100%{scale:1}
}
@keyframes criticalTen{
  0%{scale:1;filter:brightness(1)}
  28%{scale:1.25;filter:brightness(2.25) drop-shadow(0 0 38px #fff3a1)}
  55%{scale:1.06;filter:brightness(1.5) drop-shadow(0 0 25px #ffd95b)}
  100%{scale:1}
}
@keyframes diceCardImpact{0%,100%{scale:1}45%{scale:1.012}}
.power-damage.power-hit{animation:powerDamagePop .52s cubic-bezier(.15,.75,.2,1)}
@keyframes powerDamagePop{
  0%{opacity:0;scale:.55}
  55%{opacity:1;scale:1.2}
  100%{scale:1}
}

#world .hero-portrait{
  animation:heroAlive 4.8s ease-in-out infinite;
  transform-origin:50% 72%;
}
@keyframes heroAlive{
  0%,100%{scale:1;filter:brightness(1)}
  50%{scale:1.018;filter:brightness(1.045)}
}

#world .battle-ambient-layer{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
#world .battle-ambient-layer .ambient-particle{
  position:absolute;
  left:var(--ambient-left);
  bottom:-8%;
  width:var(--ambient-size);
  height:var(--ambient-size);
  opacity:.62;
  animation:ambientRise var(--ambient-duration) linear var(--ambient-delay) infinite;
}
@keyframes ambientRise{
  0%{transform:translate3d(0,8vh,0) rotate(0);opacity:0}
  12%{opacity:.62}
  88%{opacity:.48}
  100%{transform:translate3d(var(--ambient-drift),-108vh,0) rotate(420deg);opacity:0}
}
#world .ambience-forest .ambient-particle{border-radius:70% 15% 70% 20%;background:linear-gradient(135deg,#d6b84e,#4d8c45)}
#world .ambience-swamp .ambient-particle{border-radius:50%;background:#f6f16e;box-shadow:0 0 8px #f6f16e,0 0 16px #9ee878}
#world .ambience-plains .ambient-particle{border-radius:50%;background:rgba(255,223,154,.8);filter:blur(.4px)}
#world .ambience-lake .ambient-particle{border-radius:50%;border:1px solid rgba(207,246,255,.85);background:rgba(96,203,255,.16);box-shadow:inset 0 0 5px #d9f9ff}
#world .ambience-lava .ambient-particle{border-radius:35%;background:#ff8a35;box-shadow:0 0 9px #ff4e1c}
#world .ambience-cloud .ambient-particle{width:calc(var(--ambient-size)*3);border-radius:999px;background:rgba(255,255,255,.36);filter:blur(2px)}

#world .rare-magic-star{
  position:absolute;
  left:-12%;
  top:var(--rare-top);
  width:120px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#fff8bc 55%,#fff);
  box-shadow:0 0 9px #fff2a3;
  transform:rotate(-18deg);
  animation:rareStar 2.1s ease-in both;
}
@keyframes rareStar{
  0%{translate:0 0;opacity:0}
  12%{opacity:1}
  100%{translate:125vw 25vh;opacity:0}
}
#world .rare-magic-wisp{
  position:absolute;
  left:var(--rare-left);
  top:var(--rare-top);
  width:13px;
  height:13px;
  border-radius:50%;
  background:#d9fbff;
  box-shadow:0 0 12px #8fe8ff,0 0 28px #bca6ff;
  animation:rareWisp 3.4s ease-in-out both;
}
@keyframes rareWisp{
  0%{opacity:0;translate:0 20px;scale:.3}
  35%{opacity:1;translate:15px -8px;scale:1}
  70%{translate:-10px -30px;scale:.8}
  100%{opacity:0;translate:25px -55px;scale:.2}
}

#victoryOverlay.victory-celebrate .victory-art{animation:victoryReveal .85s ease-out both}
#victoryOverlay.victory-celebrate .victory-live-hero{
  animation:victoryHeroGlow 1.25s cubic-bezier(.16,.8,.2,1) .18s both;
}
#victoryOverlay.victory-celebrate .victory-live-player{
  animation:victoryPlayerPop .7s ease-out .55s both;
}
#victoryOverlay.victory-celebrate .victory-play-again{
  animation:victoryButtonIn .55s ease-out 1s both;
}
@keyframes victoryReveal{
  0%{opacity:.2;filter:brightness(.35) blur(3px)}
  100%{opacity:1;filter:none}
}
@keyframes victoryHeroGlow{
  0%{opacity:0;scale:.55;filter:brightness(2.2) drop-shadow(0 0 35px #fff4a7)}
  58%{opacity:1;scale:1.11;filter:brightness(1.45) drop-shadow(0 0 28px #ffd55b)}
  100%{scale:1;filter:drop-shadow(0 0 12px rgba(255,218,83,.8))}
}
@keyframes victoryPlayerPop{
  0%{opacity:0;scale:.65}
  70%{opacity:1;scale:1.08}
  100%{scale:1}
}
@keyframes victoryButtonIn{
  0%{opacity:0;translate:0 16px}
  100%{opacity:1;translate:0 0}
}
.victory-celebration-title{
  position:absolute;
  z-index:5;
  left:50%;
  top:7%;
  transform:translateX(-50%);
  width:72%;
  text-align:center;
  color:#fff2ad;
  font-family:var(--lily-display);
  font-weight:900;
  font-size:clamp(22px,4.2vw,64px);
  letter-spacing:.08em;
  text-shadow:0 2px 0 #75470c,0 0 13px #ffc94d,0 5px 16px #0008;
  animation:victoryTitleIn .78s cubic-bezier(.16,.8,.2,1) .35s both;
}
@keyframes victoryTitleIn{
  0%{opacity:0;scale:.58;letter-spacing:.22em}
  70%{opacity:1;scale:1.06}
  100%{scale:1;letter-spacing:.08em}
}
.victory-fx-particle{
  position:absolute;
  z-index:4;
  left:var(--victory-x);
  top:-5%;
  width:var(--victory-size);
  height:calc(var(--victory-size)*1.8);
  border-radius:2px;
  background:linear-gradient(#fff4ad,#e3a522);
  box-shadow:0 0 6px rgba(255,220,96,.85);
  animation:victoryFall var(--victory-duration) ease-in var(--victory-delay) both;
}
@keyframes victoryFall{
  0%{translate:0 -10vh;rotate:0deg;opacity:0}
  10%{opacity:1}
  100%{translate:var(--victory-drift) 112vh;rotate:540deg;opacity:.2}
}

@media(prefers-reduced-motion:reduce){
  .fx-particle,.fx-flying-creature,
  #world .battle-ambient-layer .ambient-particle,
  #world .rare-magic-star,#world .rare-magic-wisp,
  #world .hero-portrait,.victory-fx-particle{
    animation:none!important;
  }
}


/* FX compatibility overrides for older cleanup rules */
#world.battle-focus::after{display:block!important}
#world .heart.broken-heart::after{content:none!important;display:none!important}
#world .battle-ambient-layer{z-index:0!important}
.screen-fx-layer{z-index:850!important}


/* Animation refinements: remove full-field attack flash and mask victory hero
   behind the shield artwork rather than drawing it over the frame. */
#world.battle-focus::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}
#victoryOverlay .victory-art{
  z-index:1!important;
}
#victoryOverlay .victory-live-hero{
  z-index:3!important;
}


/* ========================================================================
   NINE-CHOICE EXPANSION
   Keep the normal setup experience as deliberate 3 × 3 grids while only
   compacting chooser cards. Battle/HUD geometry remains untouched.
   ======================================================================== */
#setupScreen{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
@media(min-width:701px){
  #defaultHeroChoices.default-hero-grid,
  #baseChoices,
  #diceChoices{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    width:min(920px,94vw)!important;
  }
  #defaultHeroChoices .default-hero-card{
    height:198px!important;
    padding:7px 8px 9px!important;
    gap:4px!important;
  }
  #defaultHeroChoices .default-hero-card img{
    height:151px!important;
  }
  #defaultHeroChoices .default-hero-card span{
    font-size:15px!important;
    line-height:1.08!important;
  }
  #baseChoices .choice-card,
  #diceChoices .choice-card{
    min-height:174px!important;
  }
  #baseChoices .art,
  #diceChoices .art{
    inset:6px 8px 36px!important;
  }
  #baseChoices .choice-card .label,
  #diceChoices .choice-card .label{
    padding:8px 6px!important;
    font-size:15px!important;
  }
}


/* Base scale balancing: Ice Castle and Volcano Fortress have more internal
   transparent padding / smaller silhouettes than the other bases. Scale only
   their artwork so all nine bases read at a comparable visual size. */
#baseChoices .choice-card.base-ice .art,
#baseChoices .choice-card.base-volcano .art{
  background-size:116% auto!important;
  background-position:center bottom!important;
}
#world #p1BaseArt.ice .battle-base-image,
#world #p1BaseArt.volcano .battle-base-image{
  transform:scale(1.14)!important;
  transform-origin:center bottom!important;
}
#world #p2BaseArt.ice .battle-base-image,
#world #p2BaseArt.volcano .battle-base-image{
  transform:scaleX(-1) scale(1.14)!important;
  transform-origin:center bottom!important;
}


/* Nine-battlefield chooser: deliberate 3 × 3 grid, setup screen only */
@media(min-width:701px){
  #battlefieldChoices{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    width:min(920px,94vw)!important;
  }
  #battlefieldChoices .choice-card{
    min-height:150px!important;
  }
  #battlefieldChoices .choice-card .label{
    padding:8px 6px!important;
    font-size:15px!important;
  }
}


/* ========================================================================
   BATTLEFIELD / BASE PRESENTATION REFINEMENTS
   ======================================================================== */

/* Choose Base: keep Ice Castle and Volcano Fortress at normal card scale.
   Their larger treatment is battlefield-only. */
#baseChoices .choice-card.base-ice .art,
#baseChoices .choice-card.base-volcano .art{
  background-size:contain!important;
  background-position:center bottom!important;
}

/* Main battle background: show a little more of the source artwork without
   exposing empty space. The front copy is slightly zoomed out; the same image
   remains underneath as a full-cover safety layer. */
#world.world,
#world.world.scaled-board{
  background-image:var(--battle-bg),var(--battle-bg)!important;
  background-size:auto 94%,cover!important;
  background-position:center center,center center!important;
  background-repeat:no-repeat,no-repeat!important;
  background-color:#07131e!important;
}

/* New expansion bases follow the same inward-facing rule as the original set.
   P1 faces toward center/right; P2 is mirrored toward center/left. */
#world #p1BaseArt.ivory .battle-base-image,
#world #p1BaseArt.monolith .battle-base-image,
#world #p1BaseArt.citadel .battle-base-image{
  transform:none!important;
  transform-origin:center bottom!important;
}
#world #p2BaseArt.ivory .battle-base-image,
#world #p2BaseArt.monolith .battle-base-image,
#world #p2BaseArt.citadel .battle-base-image{
  transform:scaleX(-1)!important;
  transform-origin:center bottom!important;
}


/* Revert experimental battlefield zoom-out: restore original single-cover background. */
#world.world,
#world.world.scaled-board{
  background-image:var(--battle-bg)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}

/* Base-facing correction.
   Ivory and Monolith follow the normal rule: P1 source orientation, P2 mirrored.
   Ancient Citadel's source art already faces left, so it must use the opposite
   treatment to face inward: P1 mirrored toward center, P2 unmirrored toward center. */
#world #p1BaseArt.ivory .battle-base-image,
#world #p1BaseArt.monolith .battle-base-image{
  transform:none!important;
  transform-origin:center bottom!important;
}
#world #p2BaseArt.ivory .battle-base-image,
#world #p2BaseArt.monolith .battle-base-image{
  transform:scaleX(-1)!important;
  transform-origin:center bottom!important;
}
#world #p1BaseArt.citadel .battle-base-image{
  transform:scaleX(-1)!important;
  transform-origin:center bottom!important;
}
#world #p2BaseArt.citadel .battle-base-image{
  transform:none!important;
  transform-origin:center bottom!important;
}


/* Victory Hero fit refinement: slightly larger and slightly higher in the shield window. */
#victoryOverlay .victory-live-hero{
  top:32.7%!important;
  width:25.5%!important;
  height:33.5%!important;
  object-position:center 38%!important;
}


/* Royal Palace visual balance: slightly larger on battlefield only. */
#world #p1BaseArt.royal .battle-base-image{
  transform:scale(1.08)!important;
  transform-origin:center bottom!important;
}
#world #p2BaseArt.royal .battle-base-image{
  transform:scaleX(-1) scale(1.08)!important;
  transform-origin:center bottom!important;
}


/* Gauntlet fatigue belongs to the attacker, so show it inside that player's dice side. */
.dice-fatigue{
  width:max-content;
  max-width:90%;
  margin:2px auto 7px;
  padding:4px 10px;
  border:1px solid rgba(255,215,120,.75);
  border-radius:999px;
  background:rgba(67,34,17,.8);
  color:#ffd978;
  font-weight:1000;
  font-size:13px;
  letter-spacing:1px;
  line-height:1;
  text-shadow:0 1px 3px #000;
  box-shadow:0 0 10px rgba(255,170,55,.18);
}
@media(max-width:760px){
  .dice-fatigue{
    font-size:10px;
    padding:3px 7px;
    margin-bottom:5px;
  }
}


/* ==========================================================================
   v0.8 — intuitive battle language, Legendary Creatures, initiative, player color
   ========================================================================== */

:root{
  --p1-deep:#082f68;
  --p1-mid:#145ca8;
  --p1-bright:#61b8ff;
  --p2-deep:#64151d;
  --p2-mid:#a72b35;
  --p2-bright:#ff6c72;
  --battle-gold:#f2c55d;
}

/* Keep Player 1 / Player 2 color meaning consistent everywhere. */
.player-hud.p1{
  background:linear-gradient(145deg,#124e91,var(--p1-deep))!important;
  border-color:#83c7ff!important;
  box-shadow:0 7px 16px #0008,0 0 0 1px rgba(89,177,255,.18) inset;
}
.player-hud.p2{
  background:linear-gradient(145deg,#9b2d38,var(--p2-deep))!important;
  border-color:#ff9297!important;
  box-shadow:0 7px 16px #0008,0 0 0 1px rgba(255,105,115,.18) inset;
}
.player-hud.active-player{
  animation:activeHudCue .9s ease-out;
}
@keyframes activeHudCue{
  0%{transform:scale(1);filter:brightness(1)}
  35%{transform:scale(1.025);filter:brightness(1.23)}
  100%{transform:scale(1);filter:brightness(1)}
}

.turn-display[data-player="1"]{
  color:#d9efff;
  text-shadow:0 0 13px rgba(72,169,255,.68);
}
.turn-display[data-player="2"]{
  color:#ffe3e5;
  text-shadow:0 0 13px rgba(255,82,92,.62);
}
.turn-display.turn-cue{animation:turnCue .9s ease-out}
@keyframes turnCue{
  0%{transform:scale(.96);opacity:.72}
  35%{transform:scale(1.07);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* Battle length: two immediately understandable choices, no settings complexity. */
.battle-length-options{
  width:min(820px,92vw);
  margin:18px auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.battle-length-card{
  min-height:210px;
  border:3px solid rgba(239,199,104,.72);
  border-radius:24px;
  padding:24px 18px;
  color:white;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  box-shadow:0 14px 32px rgba(0,0,0,.35);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.battle-length-card:hover,.battle-length-card:focus-visible{
  transform:translateY(-3px);
  filter:brightness(1.12);
  box-shadow:0 18px 36px rgba(0,0,0,.45),0 0 22px rgba(245,207,112,.20);
}
.quick-battle-card{background:linear-gradient(145deg,#1e7456,#123d35)}
.classic-battle-card{background:linear-gradient(145deg,#755027,#322316)}
.battle-length-title{
  font:800 clamp(24px,3vw,34px)/1 "Palatino Linotype",Georgia,serif;
  letter-spacing:.07em;
}
.battle-length-hearts{
  color:#ef4452;
  font:900 clamp(22px,2.6vw,31px)/1 Arial,sans-serif;
  text-shadow:0 2px 5px #0008;
  white-space:normal;
}
.battle-length-card small{
  font-size:15px;
  font-weight:900;
  letter-spacing:.12em;
  color:#ffe6aa;
}
.battle-length-nav{justify-content:center!important}

/* Subtle visual affordance: eligible creatures breathe only while selection is active. */
.creature-slot.selectable-attacker,
.creature-slot.selectable-defender{
  cursor:pointer;
}
.creature-slot.selectable-attacker{
  animation:p1Eligible 1.25s ease-in-out infinite alternate;
}
.creature-slot.selectable-defender{
  animation:p2Eligible 1.25s ease-in-out infinite alternate;
}
@keyframes p1Eligible{
  from{box-shadow:inset 0 0 18px rgba(67,142,224,.10),0 4px 12px rgba(0,0,0,.28)}
  to{box-shadow:inset 0 0 23px rgba(80,170,255,.22),0 0 15px rgba(64,158,255,.35)}
}
@keyframes p2Eligible{
  from{box-shadow:inset 0 0 18px rgba(190,50,62,.10),0 4px 12px rgba(0,0,0,.28)}
  to{box-shadow:inset 0 0 23px rgba(255,75,85,.20),0 0 15px rgba(225,55,66,.34)}
}
#p1Creatures .creature-slot.selected{
  border-color:#8bd0ff!important;
  box-shadow:0 0 0 2px rgba(86,177,255,.45),0 0 24px rgba(40,151,255,.62),inset 0 0 20px rgba(59,159,255,.22)!important;
}
#p2Creatures .creature-slot.selected{
  border-color:#ff9ba0!important;
  box-shadow:0 0 0 2px rgba(255,101,111,.45),0 0 24px rgba(222,49,62,.60),inset 0 0 20px rgba(255,76,87,.20)!important;
}
#p1Creatures .creature-slot.defender-selected{
  border-color:#8bd0ff!important;
  box-shadow:0 0 0 2px rgba(86,177,255,.42),0 0 23px rgba(40,151,255,.58)!important;
}
#p2Creatures .creature-slot.defender-selected{
  border-color:#ff9ba0!important;
  box-shadow:0 0 0 2px rgba(255,101,111,.42),0 0 23px rgba(222,49,62,.56)!important;
}

/* Attack panel follows whichever player is making the current choice. */
.attack-panel.player1-action{
  border-color:#6cbaff!important;
  box-shadow:0 8px 22px #0009,0 0 22px rgba(53,148,235,.22)!important;
}
.attack-panel.player2-action{
  border-color:#ff7780!important;
  box-shadow:0 8px 22px #0009,0 0 22px rgba(215,46,58,.22)!important;
}
.attack-panel.player1-action #attackInstruction .who{color:#91ceff}
.attack-panel.player2-action #attackInstruction .who{color:#ff9da2}

/* Legendary Creature identity. It visually owns two battlefield spaces. */
.creature-slot.legendary-creature{
  min-width:0;
  border:2px solid #f1cf68!important;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,225,117,.30),transparent 55%),
    linear-gradient(145deg,rgba(104,70,29,.78),rgba(36,34,43,.86))!important;
  box-shadow:inset 0 0 26px rgba(255,220,113,.17),0 5px 18px rgba(0,0,0,.34),0 0 18px rgba(244,201,90,.18)!important;
}
.creature-slot.legendary-creature img{
  width:min(92%,300px)!important;
  height:clamp(130px,19vh,225px)!important;
  max-width:96%!important;
  max-height:none!important;
}
.legendary-creature-badge{
  position:absolute;
  z-index:3;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  padding:4px 11px;
  border:1px solid rgba(255,229,143,.82);
  border-radius:999px;
  background:rgba(78,52,20,.88);
  color:#ffe489;
  font:900 11px/1 "Trebuchet MS",sans-serif;
  letter-spacing:.11em;
  text-shadow:0 1px 3px #000;
}
.legendary-creature-banner{
  width:max-content;
  max-width:95%;
  margin:5px auto 9px;
  padding:8px 16px 7px;
  border:1px solid #96702d;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,239,165,.78),rgba(211,163,72,.55));
  box-shadow:0 0 16px rgba(255,217,99,.20);
  color:#563813;
}
.legendary-creature-banner strong{
  display:block;
  font:800 18px/1.2 Georgia,serif;
  letter-spacing:.08em;
}
.legendary-creature-banner small{
  display:block;
  margin-top:3px;
  font-weight:800;
}
.legendary-summon .summoning-rune{
  color:#ffe078!important;
  text-shadow:0 0 12px #fff0a0,0 0 30px #eeb73c!important;
}

/* Two real, individually tappable dice for a Legendary Creature. */
.combat-dice-tray{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:150px;
}
.combat-dice-tray:has(.legendary-die:not(.hidden)) .tap-die{
  width:126px;
  height:126px;
}
.power-dice-tray{margin:0 auto}
.tap-die.legendary-best{
  opacity:1!important;
  filter:brightness(1.18) drop-shadow(0 0 20px #ffe467)!important;
  transform:scale(1.06);
  outline:3px solid rgba(255,226,104,.8);
  outline-offset:3px;
}
.tap-die.legendary-low{
  opacity:.42!important;
  filter:grayscale(.35) saturate(.55) brightness(.75)!important;
  transform:scale(.95);
}
.dice-side.legendary-combatant{
  border-color:#d9bc61!important;
  box-shadow:inset 0 0 28px rgba(243,203,92,.08);
}

/* Opening roll-off should look like the same dice system used in combat. */
.initiative-card{max-width:720px}
.initiative-side{min-height:280px}
.initiative-side .tap-die{margin-top:30px}

/* More physical combat, kept short so it does not slow the game. */
.combat-creature img.combat-victor{animation:combatVictor .52s cubic-bezier(.2,.85,.2,1)}
.combat-creature img.combat-guard{animation:combatGuard .52s cubic-bezier(.2,.85,.2,1)}
.combat-creature img.combat-recoil{animation:combatRecoil .48s ease-out}
@keyframes combatVictor{
  0%{transform:translateX(0) scale(1);filter:drop-shadow(0 6px 5px #0008)}
  52%{transform:translateX(24px) scale(1.13);filter:brightness(1.3) drop-shadow(0 0 18px #ffe171)}
  100%{transform:translateX(0) scale(1);filter:drop-shadow(0 6px 5px #0008)}
}
.player2-side .combat-creature img.combat-victor{
  animation-name:combatVictorP2;
}
@keyframes combatVictorP2{
  0%{transform:translateX(0) scale(1)}
  52%{transform:translateX(-24px) scale(1.13);filter:brightness(1.3) drop-shadow(0 0 18px #ffe171)}
  100%{transform:translateX(0) scale(1)}
}
@keyframes combatGuard{
  0%,100%{transform:scale(1)}
  42%{transform:scale(1.12);filter:brightness(1.25) drop-shadow(0 0 18px #a8e4ff)}
}
@keyframes combatRecoil{
  0%{transform:translateX(0) rotate(0);filter:brightness(1)}
  30%{transform:translateX(-15px) rotate(-4deg);filter:brightness(.7)}
  58%{transform:translateX(8px) rotate(2deg)}
  100%{transform:translateX(0) rotate(0)}
}
.player2-side .combat-creature img.combat-recoil{animation-name:combatRecoilP2}
@keyframes combatRecoilP2{
  0%{transform:translateX(0) rotate(0);filter:brightness(1)}
  30%{transform:translateX(15px) rotate(4deg);filter:brightness(.7)}
  58%{transform:translateX(-8px) rotate(-2deg)}
  100%{transform:translateX(0) rotate(0)}
}

.creature-slot.board-attack-victor{animation:boardAttackVictor .43s cubic-bezier(.25,.82,.25,1)}
.creature-slot.board-defense-victor{animation:boardDefenseVictor .43s ease-out}
.creature-slot.board-battle-hit{animation:boardBattleHit .43s ease-out}
@keyframes boardAttackVictor{
  0%,100%{transform:translateX(0) scale(1)}
  48%{transform:translateX(12px) scale(1.08);filter:brightness(1.22)}
}
#p2Creatures .creature-slot.board-attack-victor{
  animation-name:boardAttackVictorP2;
}
@keyframes boardAttackVictorP2{
  0%,100%{transform:translateX(0) scale(1)}
  48%{transform:translateX(-12px) scale(1.08);filter:brightness(1.22)}
}
@keyframes boardDefenseVictor{
  0%,100%{transform:scale(1)}
  42%{transform:scale(1.065);box-shadow:0 0 25px rgba(133,214,255,.5)}
}
@keyframes boardBattleHit{
  0%,100%{transform:translateX(0)}
  28%{transform:translateX(-10px) rotate(-2deg);filter:brightness(.75)}
  52%{transform:translateX(5px) rotate(1deg)}
}
#p2Creatures .creature-slot.board-battle-hit{animation-name:boardBattleHitP2}
@keyframes boardBattleHitP2{
  0%,100%{transform:translateX(0)}
  28%{transform:translateX(10px) rotate(2deg);filter:brightness(.75)}
  52%{transform:translateX(-5px) rotate(-1deg)}
}

/* Responsive safeguards for the new elements. */
@media(max-width:760px){
  .battle-length-options{grid-template-columns:1fr;gap:12px}
  .battle-length-card{min-height:125px;padding:13px}
  .combat-dice-tray{gap:5px;min-height:112px}
  .combat-dice-tray:has(.legendary-die:not(.hidden)) .tap-die{width:88px;height:88px}
  .combat-dice-tray:has(.legendary-die:not(.hidden)) .tap-die span{font-size:34px}
  .legendary-creature-badge{font-size:9px;padding:3px 7px}
}


/* ==========================================================================
   LEGENDARY CREATURE + OPENING SCREEN REFINEMENT
   ========================================================================== */

/* Opening screen: use the Lily artwork as a world, not a generic modal card. */
#storyScreen{
  overflow:hidden!important;
}
#storyScreen::before{
  background:
    radial-gradient(circle at 50% 43%,rgba(255,224,133,.09) 0 18%,transparent 42%),
    linear-gradient(180deg,rgba(2,9,22,.10),rgba(2,8,19,.28) 54%,rgba(2,7,17,.62))!important;
}
#storyScreen::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 17% 20%,rgba(144,220,255,.13),transparent 18%),
    radial-gradient(circle at 82% 25%,rgba(255,214,116,.10),transparent 20%),
    linear-gradient(90deg,rgba(2,7,17,.38),transparent 22%,transparent 78%,rgba(2,7,17,.38));
}
#storyScreen .intro-card{
  position:relative;
  width:min(900px,92vw)!important;
  padding:18px 34px 30px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  overflow:visible;
}
#storyScreen .intro-card::before{
  content:"";
  position:absolute;
  left:50%;
  top:47%;
  width:min(720px,82vw);
  height:58%;
  transform:translate(-50%,-42%);
  border:1px solid rgba(237,207,130,.24);
  border-left-color:transparent;
  border-right-color:transparent;
  pointer-events:none;
  opacity:.9;
  mask-image:linear-gradient(90deg,transparent 0,black 17%,black 83%,transparent 100%);
}
#storyScreen .intro-logo{
  width:min(760px,80vw)!important;
  margin:-8px auto -2px!important;
  filter:
    drop-shadow(0 7px 12px rgba(0,0,0,.76))
    drop-shadow(0 0 18px rgba(255,210,91,.23))!important;
}
.intro-sigil{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin:0 auto -16px;
  color:#e7c66c;
  font:700 17px Georgia,serif;
  letter-spacing:.22em;
  opacity:.82;
  text-shadow:0 0 12px rgba(255,219,111,.52);
}
.intro-sigil span:nth-child(2){
  font-size:11px;
  opacity:.7;
}
.intro-story-panel{
  position:relative;
  width:min(680px,88%);
  margin:0 auto;
  padding:15px 26px 17px;
  background:none;
  box-shadow:none;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
#storyScreen .story-text{
  margin:0 0 10px;
  color:#f6e8bd!important;
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif!important;
  font-size:clamp(19px,2.1vw,27px)!important;
  font-style:italic;
  line-height:1.35;
  letter-spacing:.025em;
}
#storyScreen .story-lines{
  margin:0;
  color:#eff8ff!important;
  font-size:clamp(17px,1.75vw,22px)!important;
  line-height:1.48!important;
}
#storyScreen .story-lines strong{
  display:inline-block;
  margin-top:4px;
  color:#ffe18d;
  letter-spacing:.035em;
  text-shadow:0 0 14px rgba(255,211,91,.42),0 2px 7px #000;
}
.intro-start-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:16px;
}
.intro-start-rune{
  color:#e7c66c;
  font-size:18px;
  opacity:.72;
  text-shadow:0 0 10px rgba(255,218,104,.55);
}
#storyContinue{
  min-width:190px;
  padding:14px 30px!important;
  border-width:2px!important;
  border-color:#f1d47e!important;
  box-shadow:
    0 7px 18px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,238,172,.18) inset,
    0 0 18px rgba(240,190,64,.14)!important;
}

/* Battle-length screen uses the actual ruby-heart asset. */
.battle-length-hearts{
  display:flex!important;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:3px;
  max-width:310px;
  min-height:42px;
  text-shadow:none!important;
}
.battle-length-hearts img{
  display:block;
  width:31px;
  height:31px;
  object-fit:contain;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.62)) drop-shadow(0 0 3px rgba(255,204,78,.28));
}
.classic-battle-card .battle-length-hearts{
  max-width:350px;
}

/* A small strategic tracker for each player's own fifth summon. */
.legendary-tracker{
  width:max-content;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:3px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.player-hud.p2 .legendary-tracker{
  margin-left:auto;
}
.legendary-tracker-label{
  font:800 8px/1 "Trebuchet MS",sans-serif;
  letter-spacing:.09em;
  color:rgba(220,203,154,.78);
  white-space:nowrap;
}
.legendary-tracker small{
  display:none;
}
.legendary-runes{
  display:flex;
  align-items:center;
  gap:2px;
}
.legendary-rune{
  font-style:normal;
  font-size:10px;
  line-height:1;
  color:rgba(220,210,181,.18);
  text-shadow:none;
  transition:filter .2s ease,color .2s ease,transform .2s ease;
}
.legendary-rune.filled{
  color:#deb84e;
  text-shadow:0 0 5px rgba(246,201,70,.34);
}
.legendary-tracker.legendary-ready{
  background:none;
  border:0;
  box-shadow:none;
}
.legendary-tracker.legendary-ready .legendary-tracker-label{
  color:#ffe27e;
  text-shadow:0 0 7px rgba(255,214,66,.34);
}
.legendary-rune.ready{
  color:#ffe06d;
  text-shadow:0 0 7px rgba(255,214,66,.72);
  animation:legendaryRuneReady 1.05s ease-in-out infinite alternate;
}
@keyframes legendaryRuneReady{
  from{transform:scale(.92);filter:brightness(.9)}
  to{transform:scale(1.14);filter:brightness(1.18)}
}
}

/* The action button becomes an unmistakable invitation when a Legendary is ready. */
#drawButton.legendary-ready{
  position:relative;
  border-color:#ffe17c!important;
  background:
    radial-gradient(circle at 50% 0,rgba(255,231,132,.25),transparent 45%),
    linear-gradient(#85601f,#4b2e0c)!important;
  box-shadow:
    0 0 0 2px rgba(255,218,101,.24),
    0 0 22px rgba(255,194,45,.38),
    inset 0 0 17px rgba(255,230,134,.14)!important;
  animation:legendaryConjureReady 1.2s ease-in-out infinite alternate;
}
#drawButton.legendary-ready .button-icon{
  color:#ffe381;
  text-shadow:0 0 10px rgba(255,221,94,.65);
}
#drawButton.legendary-ready strong{
  color:#fff0b3;
}
#drawButton.legendary-ready small{
  color:#ffe99a;
  font-weight:800;
}
@keyframes legendaryConjureReady{
  from{filter:brightness(.96)}
  to{filter:brightness(1.12)}
}

/* Legendary drawing mode must feel like a special event before the child draws. */
#drawingModal.legendary-summon{
  background:
    radial-gradient(circle at 50% 42%,rgba(255,199,55,.22),transparent 42%),
    rgba(8,14,22,.84)!important;
}
#drawingModal.legendary-summon .sketchbook{
  border:4px solid #c89b31!important;
  box-shadow:
    inset 0 0 48px rgba(106,64,13,.48),
    0 0 0 2px rgba(255,226,126,.18),
    0 0 42px rgba(255,190,42,.30),
    0 22px 60px #000b!important;
}
#drawingModal.legendary-summon .sketchbook::after{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(145,91,24,.35);
  border-radius:18px;
  pointer-events:none;
}
#drawingModal.legendary-summon .summoning-rune{
  font-size:64px!important;
  color:#f6cb51!important;
  text-shadow:0 0 12px #fff0a0,0 0 31px #e9a927!important;
  animation:legendaryRunePulse .9s ease-in-out infinite alternate!important;
}
@keyframes legendaryRunePulse{
  from{transform:scale(.94) rotate(-5deg);filter:brightness(.95)}
  to{transform:scale(1.12) rotate(5deg);filter:brightness(1.24)}
}
#drawingModal.legendary-summon #creatureModalTitle{
  color:#6f430f!important;
  font-size:clamp(29px,4vw,40px)!important;
  text-shadow:0 1px 0 rgba(255,242,183,.55);
}
.legendary-creature-banner{
  width:min(540px,94%);
  margin:7px auto 10px;
  padding:10px 18px 9px;
  border:2px solid #9f7320;
  border-radius:16px;
  background:
    linear-gradient(135deg,rgba(255,239,159,.94),rgba(206,151,47,.68));
  box-shadow:0 4px 14px rgba(84,47,10,.20),0 0 19px rgba(255,199,48,.20);
  color:#583510;
}
.legendary-creature-banner strong{
  display:block;
  font:900 21px/1.15 Georgia,serif;
  letter-spacing:.09em;
}
.legendary-creature-banner small{
  display:block;
  margin-top:4px;
  font:800 11px/1.2 "Trebuchet MS",sans-serif;
  letter-spacing:.075em;
}
#drawingModal.legendary-summon #creatureDrawingPrompt{
  margin:7px auto 11px;
  max-width:620px;
  color:#5a3b1a;
  font-weight:800;
}

/* Legendary battlefield form: wider AND taller, with identity outside the art. */
#world .creature-slot.legendary-creature{
  overflow:visible!important;
  align-self:end!important;
  height:clamp(150px,24vh,245px)!important;
  border:3px solid #e8c65c!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,229,127,.30),transparent 57%),
    linear-gradient(145deg,rgba(104,70,29,.80),rgba(30,32,41,.90))!important;
  box-shadow:
    inset 0 0 31px rgba(255,220,113,.16),
    0 6px 18px rgba(0,0,0,.40),
    0 0 20px rgba(244,201,90,.28)!important;
}
#world .creature-slot.legendary-creature::before{
  content:"✦";
  position:absolute;
  inset:auto auto calc(100% + 5px) 8px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:#ffe071;
  font-size:16px;
  opacity:1;
  text-shadow:0 0 8px rgba(255,215,78,.72);
}

#world .creature-slot.legendary-creature img{
  width:96%!important;
  height:94%!important;
  max-width:340px!important;
  max-height:none!important;
  object-fit:contain!important;
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.38));
}

/* Legendary two-die language. */
.combat-dice-tray:has(.legendary-die:not(.hidden)) .tap-die{
  width:126px;
  height:126px;
}
.tap-die.legendary-best{
  opacity:1!important;
  filter:brightness(1.18) drop-shadow(0 0 20px #ffe467)!important;
  transform:scale(1.06);
  outline:3px solid rgba(255,226,104,.8);
  outline-offset:3px;
}
.tap-die.legendary-low{
  opacity:.42!important;
  filter:grayscale(.35) saturate(.55) brightness(.75)!important;
  transform:scale(.95);
}
.dice-side.legendary-combatant{
  border-color:#d9bc61!important;
  box-shadow:inset 0 0 28px rgba(243,203,92,.08);
}

@media(max-width:800px){
  #world .creature-slot.legendary-creature{
    height:clamp(112px,25vh,155px)!important;
  }
  #world .creature-slot.legendary-creature::before{
    bottom:calc(100% + 2px);
  }
  .legendary-tracker{
    padding:2px 5px 3px;
  }
  .legendary-tracker-label{font-size:8px}
  .legendary-tracker small{font-size:7px}
  .legendary-rune{font-size:8px}
  .battle-length-hearts img{width:24px;height:24px}
}
@media(max-height:560px){
  #world .creature-slot.legendary-creature{
    height:118px!important;
  }
}


/* ==========================================================================
   HUD + GAUNTLET + LEGENDARY SLOT REFINEMENT
   ========================================================================== */

/* Legendary progress now occupies the stronger HUD line above the base name. */
#world .legendary-tracker{
  margin-top:2px!important;
  margin-bottom:2px!important;
  gap:6px!important;
  color:#ffe27b!important;
  font-weight:800!important;
  text-shadow:
    0 2px 2px #000,
    0 0 3px #000,
    0 0 7px #06182b,
    0 0 13px rgba(8,27,47,.92)!important;
}
#world .player-hud.p1 .legendary-tracker{margin-left:0!important;margin-right:auto!important}
#world .player-hud.p2 .legendary-tracker{margin-left:auto!important;margin-right:0!important}
#world .legendary-tracker-label{
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif!important;
  font-size:clamp(11px,.9vw,14px)!important;
  line-height:1.1!important;
  font-weight:800!important;
  letter-spacing:.055em!important;
  color:#ffe27b!important;
  text-shadow:inherit!important;
}
#world .legendary-runes{gap:3px!important}
#world .legendary-rune{
  font-size:clamp(11px,.95vw,15px)!important;
  color:rgba(255,241,190,.28)!important;
  text-shadow:0 1px 2px #000!important;
}
#world .legendary-rune.filled{
  color:#ffe27b!important;
  text-shadow:0 1px 2px #000,0 0 6px rgba(255,214,66,.46)!important;
}
#world .legendary-tracker.legendary-ready .legendary-tracker-label,
#world .legendary-rune.ready{
  color:#fff0a0!important;
}

/* Dedicated gauntlet context stays with the defending side of the dice battle. */
.dice-gauntlet{
  width:max-content;
  max-width:94%;
  margin:2px auto 5px;
  padding:4px 10px;
  border:1px solid rgba(229,196,105,.82);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(38,63,82,.94),rgba(19,38,55,.94));
  box-shadow:0 0 10px rgba(218,186,94,.18);
  color:#ffe59b;
  font:800 11px/1.15 "Trebuchet MS","Segoe UI",Arial,sans-serif;
  letter-spacing:.055em;
  text-align:center;
  text-shadow:0 1px 2px #000;
  white-space:nowrap;
}

/* Keep Legendary artwork fully inside its gold battlefield tablet. */
#world .creature-slot.legendary-creature img{
  position:absolute!important;
  left:2%!important;
  top:4%!important;
  width:96%!important;
  height:92%!important;
  max-width:none!important;
  max-height:92%!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
}

@media(max-width:800px){
  #world .legendary-tracker-label{font-size:9px!important}
  #world .legendary-rune{font-size:9px!important}
  .dice-gauntlet{font-size:9px;padding:3px 7px;margin-bottom:4px}
}


/* Keep Legendary counter typography the same size as the base-name line. */
#world .legendary-tracker-label{
  font-size:clamp(13px,1.05vw,17px)!important;
}
@media(max-width:800px){
  #world .legendary-tracker-label{font-size:10px!important}
}


/* ==========================================================================
   ATTACK ORDER + DEFENDER ASSIGNMENT
   ========================================================================== */

#world .creature-slot .combat-order-badge{
  position:absolute;
  z-index:8;
  top:7px;
  right:7px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid #ffe59a;
  box-shadow:0 3px 8px #000a,0 0 10px rgba(255,221,105,.28);
  color:#fff8d5;
  font:900 20px/1 Georgia,"Times New Roman",serif;
  text-shadow:0 2px 3px #000;
  pointer-events:none;
}
#world .creature-slot .attacker-order{
  background:linear-gradient(145deg,#2e79b7,#153d70);
}
#world .creature-slot .defender-order{
  background:linear-gradient(145deg,#b6454e,#6f1f2b);
}
#world .creature-slot .pending-order{
  background:linear-gradient(145deg,#c79a39,#755018);
  animation:defenderTargetPulse .7s ease-in-out infinite alternate;
}
#world .creature-slot.pending-defender{
  outline:5px solid #ffd968!important;
  transform:translateY(-7px);
  box-shadow:0 0 26px rgba(255,215,85,.7)!important;
}
#world .creature-slot.selectable-defense-target{
  cursor:pointer;
}
#world .creature-slot.selectable-defense-target::after{
  content:"";
  position:absolute;
  inset:5px;
  z-index:2;
  border:2px solid rgba(255,229,135,.36);
  border-radius:12px;
  pointer-events:none;
}
@keyframes defenderTargetPulse{
  from{transform:scale(.94);filter:brightness(.95)}
  to{transform:scale(1.08);filter:brightness(1.14)}
}
@media(max-width:800px){
  #world .creature-slot .combat-order-badge{
    top:4px;
    right:4px;
    width:27px;
    height:27px;
    font-size:16px;
  }
}


/* With one attacker, defender numbers show gauntlet fight order rather than target number. */
#world .creature-slot .defender-order.gauntlet-order{
  border-color:#ffd96a;
  box-shadow:0 3px 8px #000a,0 0 12px rgba(255,211,78,.34);
}


/* ==========================================================================
   CREATOR VALIDATION + LEGENDARY READY NOTICEABILITY
   ========================================================================== */

/* Blank-drawing warnings must sit above the creature creator (z=10000).
   This class is applied only to creator-validation messages so normal popup
   stacking remains unchanged. */
#messageOverlay.overlay.creator-validation-message{
  z-index:12000!important;
}
#messageOverlay.creator-validation-message .message-card{
  position:relative;
  z-index:12001!important;
}

/* Once the Legendary meter is full, all five stars gently pulse/glow until
   the Legendary Creature is actually summoned. renderLegendaryTracker()
   removes .legendary-ready immediately after that summon. */
#world .legendary-tracker.legendary-ready .legendary-rune{
  color:#ffe36f!important;
  text-shadow:
    0 0 4px rgba(255,228,111,.72),
    0 0 9px rgba(255,201,55,.42)!important;
  animation:legendaryMeterFullPulse 1.05s ease-in-out infinite alternate!important;
}
@keyframes legendaryMeterFullPulse{
  from{
    transform:scale(.94);
    filter:brightness(.96);
    text-shadow:
      0 0 3px rgba(255,228,111,.58),
      0 0 7px rgba(255,201,55,.28);
  }
  to{
    transform:scale(1.08);
    filter:brightness(1.15);
    text-shadow:
      0 0 6px rgba(255,238,157,.9),
      0 0 12px rgba(255,201,55,.55);
  }
}


/* ==========================================================================
   COMBAT CONTEXT BADGES — matched visual treatment
   Gauntlet belongs to the defender; fatigue belongs to the attacker.
   ========================================================================== */
.dice-fatigue,
.dice-gauntlet{
  width:max-content;
  max-width:94%;
  margin:2px auto 7px;
  padding:4px 10px;
  border:1px solid rgba(255,215,120,.75);
  border-radius:999px;
  background:rgba(67,34,17,.8);
  color:#ffd978;
  box-shadow:0 0 10px rgba(255,170,55,.18);
  font:1000 13px/1 "Trebuchet MS","Segoe UI",Arial,sans-serif;
  letter-spacing:1px;
  text-align:center;
  text-shadow:0 1px 3px #000;
  white-space:nowrap;
}
@media(max-width:800px){
  .dice-fatigue,
  .dice-gauntlet{
    font-size:10px;
    padding:3px 7px;
    margin-bottom:5px;
  }
}


/* Mode selection */
.mode-start-wrap{
  width:min(760px,94vw);
  margin:18px auto 0;
  gap:16px;
  align-items:stretch;
}
.mode-start-button{
  width:min(350px,44vw);
  min-height:112px;
  padding:13px 18px!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  white-space:normal;
  line-height:1.12;
}
.mode-start-button strong{
  font-size:clamp(18px,2vw,24px);
  letter-spacing:.07em;
}
.mode-start-button span{
  font-family:var(--lily-display,Georgia,serif);
  font-size:clamp(14px,1.45vw,18px);
  font-weight:700;
  letter-spacing:.02em;
}
.mode-start-button small{
  font-family:var(--lily-body,"Trebuchet MS",sans-serif);
  font-size:clamp(11px,1.1vw,14px);
  letter-spacing:.01em;
  opacity:.92;
}
@media(max-width:650px){
  .mode-start-wrap{flex-direction:column;align-items:center}
  .mode-start-button{width:min(420px,88vw)}
}