/* Dragons of Etchinstone — mesa de juego y cartas físicas */
:root {
  --table: #15120f;
  --table2: #1f1a14;
  --parch: #efe3c3;
  --parch2: #e2d2a6;
  --parch-dk: #cdb98a;
  --ink: #2a2217;
  --ink2: #4a3f2c;
  --gold: #c9a441;
  --gold-lt: #e9cf72;
  --gold-dk: #8a6a1e;
  --text: #ece4d0;
  --muted: #b3a88f;
  --good: #2f7d3a;
  --good-lt: #8fd18f;
  --warn: #b8860b;
  --bad: #a52a2a;
  --bad-lt: #f08c7a;
  --water: #1f4e8c;
  --fire: #b3212c;
  --lightning: #8a7a1a;
  --shadow: #6a6f78;
  --none: #1c1a17;
  --tint-water: #cfe0f3;
  --tint-fire: #f3c9c6;
  --tint-lightning: #f1e3a3;
  --tint-shadow: #d9dadc;
  --region: #1f6b2a;
  --cw: 220px;
  --serif: Alegreya, "IM Fell English", Georgia, serif;
  --display: Cinzel, "Alegreya SC", Georgia, serif;
  font-family: var(--serif);
  font-size: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--table); color: var(--text); }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 164, 65, .10), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .55), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23c9a441' stroke-opacity='.16' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M12 30l40 22 18 60 50 12 30-40 60 8 22 50 60 20 40-30'/%3E%3Cpath d='M0 210l60-30 40 40 70-10 30 50 60-20 40 30 70-40 50 10'/%3E%3Cpath d='M30 420l30-60 60-10 20-50 70 20 40-30 30 40 80-20 30-50'/%3E%3Cpath d='M300 0l-20 40 30 40-10 50 40 30-20 50 30 50'/%3E%3Cpath d='M100 90l-10 40 30 20-20 50'/%3E%3Cpath d='M250 300l40-10 20 40 50-10'/%3E%3C/g%3E%3Cg fill='%23c9a441' fill-opacity='.05'%3E%3Ccircle cx='70' cy='52' r='1.5'/%3E%3Ccircle cx='230' cy='150' r='1.2'/%3E%3Ccircle cx='340' cy='330' r='1.6'/%3E%3Ccircle cx='120' cy='380' r='1.1'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(var(--table2), var(--table));
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-size: auto, auto, 420px 420px, 100% 100%;
}
h1, h2, h3 { font-family: var(--display); letter-spacing: .03em; margin: 0 0 .4rem; font-weight: 700; }
h2 { font-size: 1.05rem; color: var(--gold); }
h3 { font-size: .95rem; color: var(--gold); }
p { margin: .35rem 0; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
.muted { color: var(--muted); font-size: .9rem; }
.hint { color: var(--muted); font-size: .88rem; font-style: italic; }
.loading { padding: 2rem; text-align: center; font-family: var(--display); color: var(--gold); }
.ic { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; }
.ic.sm { width: .8em; height: .8em; }
.flex-ic { display: inline-flex; align-items: center; gap: .05em; }
.flex-ic .ic { width: .85em; height: .85em; }
.el-water { color: var(--water); }
.el-fire { color: var(--fire); }
.el-lightning { color: var(--lightning); }
.el-shadow { color: var(--shadow); }
.el-none { color: var(--none); }
[hidden] { display: none !important; }

/* Medallón de elemento: círculo de color con borde dorado e icono blanco */
.medal {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  border: .12em solid var(--gold); box-shadow: 0 0 0 .06em var(--gold-dk), 0 .1em .2em rgba(0, 0, 0, .35);
  color: #fff; background: currentColor; vertical-align: middle;
}
.medal .ic { width: 1em; height: 1em; color: #fff; position: relative; z-index: 1; }
.medal.el-water { background: var(--water); }
.medal.el-fire { background: var(--fire); }
.medal.el-lightning { background: #b89b1d; }
.medal.el-shadow { background: var(--shadow); }
.medal.sm { width: 1.15em; height: 1.15em; font-size: .9em; }
.medal.md { width: 2.4em; height: 2.4em; }
.medal.md .ic { width: 1.5em; height: 1.5em; }
.medal .wings { position: absolute; width: 5.4em; height: 2.4em; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; }

/* ---- botones (madera y dorado) ---- */
.btn {
  background: linear-gradient(#3a3128, #241e18); color: var(--text);
  border: 1px solid var(--gold-dk); border-radius: 6px; padding: .5rem 1rem;
  font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 5px rgba(0, 0, 0, .5);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.btn:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, .5); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(var(--gold-lt), var(--gold) 45%, #a3812c); color: var(--ink); border-color: var(--gold-dk); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.btn.small { padding: .3rem .65rem; font-size: .75rem; }
.btn.danger { border-color: #7a3b33; color: #f3b9ad; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn .ic { width: 1em; height: 1em; vertical-align: -.15em; }

/* ---- pantalla inicial ---- */
.start { max-width: 1040px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.start .title { text-align: center; margin: 1rem 0 1.5rem; }
.start h1 { font-size: clamp(1.8rem, 5vw, 3rem); color: var(--gold-lt); font-weight: 800; text-shadow: 0 2px 0 var(--gold-dk), 0 6px 18px rgba(0, 0, 0, .8); letter-spacing: .08em; }
.start .lead { color: var(--muted); font-style: italic; font-size: 1.05rem; max-width: 46ch; margin: 0 auto; }
.start .dragon-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); justify-items: center; gap: .9rem; margin: .6rem 0 1rem; }
.start .pick { cursor: pointer; display: block; position: relative; width: 100%; max-width: 236px; container-type: inline-size; }
.start .pick input { position: absolute; opacity: 0; }
.start .pick .dragon { --cw: min(236px, 100cqw); transition: transform .15s, box-shadow .15s; }
.start .pick:hover .dragon { transform: translateY(-3px); }
.start .pick input:checked + .dragon { box-shadow: 0 0 0 3px var(--gold), 0 0 26px rgba(233, 207, 114, .5); transform: translateY(-3px); }
.start .pick input:focus-visible + .dragon { outline: 3px solid var(--gold-lt); }
.start .row { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin: .6rem 0 1rem; }
.start select, .start input[type=text] { font: inherit; background: var(--parch); color: var(--ink); border: 1px solid var(--gold-dk); border-radius: 4px; padding: .3rem .5rem; }
.start .continue { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }

/* historial de partidas */
.history { margin-top: 1.2rem; }
.history h2 small { font-size: .8rem; font-family: var(--serif); font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: .5rem; }
.history .table-wrap { overflow-x: auto; }
.history table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.history th, .history td { padding: .3rem .5rem; text-align: left; border-bottom: 1px solid rgba(107, 75, 18, .25); white-space: nowrap; }
.history th { font-family: var(--display); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #6b4b12; }
.history .num { text-align: right; }
.history tr.win td:nth-child(4) b { color: var(--good); }
.history tr.loss td:nth-child(4) b { color: var(--bad); }
.history code, .gameover .seed code, .log-drawer .seed code { font-family: ui-monospace, Consolas, monospace; font-size: .85em; background: rgba(0, 0, 0, .07); padding: 0 .3em; border-radius: 3px; }
.history .cta { margin-top: .6rem; }

/* diálogo de confirmación */
.confirm { text-align: center; padding: .5rem 1rem 0; color: var(--ink); }
.confirm p { font-size: 1.1rem; margin-bottom: 1rem; }
.confirm .cta { display: flex; gap: .8rem; justify-content: center; }
dialog.compact { max-width: 420px; }

/* Pergamino (paneles claros con texto) */
.parchment {
  position: relative; color: var(--ink);
  background: url("../assets/art/parchment.png") center / 200px, linear-gradient(var(--parch), var(--parch2));
  background-blend-mode: multiply;
  border: 1px solid var(--gold-dk); border-radius: 4px;
  box-shadow: inset 0 0 0 3px var(--parch), inset 0 0 0 4px var(--gold), 0 6px 16px rgba(0, 0, 0, .6);
  padding: 1rem 1.2rem;
}
.parchment h2, .parchment h3 { color: #6b4b12; }
.parchment .hint, .parchment .muted { color: #6a5b40; }

/* ================= CARTAS ================= */
/* Mage Card: bisel dorado + panel de pergamino, tres columnas de estadísticas y un
   medallón divisor entre acción básica/mejorada. Todo en em relativos a --cw. */
.mage {
  position: relative; width: var(--cw); height: calc(var(--cw) * .84);
  font-size: calc(var(--cw) / 22); color: var(--ink);
  background: url("../assets/art/parchment.png") center / 140px, linear-gradient(160deg, var(--parch), var(--parch2));
  background-blend-mode: multiply;
  border-radius: .8em; border: .32em solid; border-image: linear-gradient(160deg, #e7c86a, #c8a23b 45%, #7e6015) 1;
  box-shadow: 0 .3em .8em rgba(0, 0, 0, .65);
  user-select: none; flex: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: transform .25s cubic-bezier(.2, .8, .3, 1.2), box-shadow .25s, filter .25s, opacity .3s;
  transform-style: preserve-3d;
  container-type: inline-size;
}
.mage::after {
  content: ""; position: absolute; inset: .2em; border-radius: .55em; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(201, 164, 65, .28), inset 0 1.2em 1.4em rgba(255, 255, 255, .12);
}
.mage b { font-family: var(--display); font-weight: 900; font-variant-numeric: lining-nums; }

/* esquinas en L (discretas); región y dragón siguen usando la filigrana o-corner */
.mage .bracket { position: absolute; width: 1.3em; height: 1.3em; pointer-events: none; border: 0 solid var(--gold-dk); opacity: .85; }
.mage .bracket.tl { top: .2em; left: .2em; border-width: .16em 0 0 .16em; border-radius: .3em 0 0 0; }
.mage .bracket.tr { top: .2em; right: .2em; border-width: .16em .16em 0 0; border-radius: 0 .3em 0 0; }
.mage .bracket.bl { bottom: .2em; left: .2em; border-width: 0 0 .16em .16em; border-radius: 0 0 0 .3em; }
.mage .bracket.br { bottom: .2em; right: .2em; border-width: 0 .16em .16em 0; border-radius: 0 0 .3em 0; }

.frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.corner { position: absolute; width: 3.2em; height: 3.2em; color: var(--gold); pointer-events: none; }
.corner.tl { top: .25em; left: .25em; }
.corner.tr { top: .25em; right: .25em; transform: scaleX(-1); }
.corner.bl { bottom: .25em; left: .25em; transform: scaleY(-1); }
.corner.br { bottom: .25em; right: .25em; transform: scale(-1); }

.banner { position: absolute; top: .5em; left: 2.3em; right: 2.3em; height: 2.5em; display: flex; align-items: center; justify-content: center; color: var(--none); }
.banner .ribbon { position: absolute; inset: 0; width: 100%; height: 100%; }
.banner-text { position: relative; font-family: var(--display); font-weight: 800; font-size: 1.05em; text-transform: uppercase; letter-spacing: .05em; color: #fff; text-shadow: 0 .08em .1em rgba(0, 0, 0, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92%; padding: 0 .4em; }
.crest { position: absolute; top: -1.05em; left: 50%; transform: translateX(-50%); width: 1.9em; height: 2.1em; display: flex; align-items: center; justify-content: center; z-index: 2; }
.crest svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.crest b { position: relative; font-size: 1.05em; color: #3a2a0a; line-height: 1; margin-top: -.15em; }
[data-el="water"] .banner { color: var(--water); }
[data-el="fire"] .banner { color: var(--fire); }
[data-el="lightning"] .banner { color: var(--lightning); }
[data-el="shadow"] .banner { color: var(--shadow); }
.region .banner { color: var(--region); }

.mage .body { position: absolute; top: 3.3em; bottom: 3.55em; left: 1.1em; right: 1.1em;
  display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: .4em; }
.mage .col { display: flex; flex-direction: column; align-items: center; }
.mage .col.left, .mage .col.right {
  padding: .45em .15em .35em; gap: .3em;
  border: 1px solid rgba(138, 106, 30, .32); border-radius: .4em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
}

/* insignias de coste (laurel) y armadura (escudo): ahora dentro de las columnas,
   no flotando sobre el estandarte. */
.mage .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: .1em;
  padding: .16em .3em; border-radius: .35em; line-height: 1;
}
.mage .chip .ic { width: 1.5em; height: 1.5em; }
.mage .chip b { font-size: 1.3em; }
.mage .chip.laurel { color: #2f8a2f; background: rgba(47, 138, 47, .14); box-shadow: inset 0 0 0 1px rgba(47, 138, 47, .3); }
.mage .chip.laurel b { color: #1f5c1f; }
.mage .chip.shield { color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.mage .chip.shield.el-water { background: var(--water); }
.mage .chip.shield.el-fire { background: var(--fire); }
.mage .chip.shield.el-lightning { background: var(--lightning); }
.mage .chip.shield.el-shadow { background: var(--shadow); }
.mage .chip.shield.el-none { background: #1c1a17; }
.mage .chip.shield b { color: #fff; text-shadow: 0 1px 1px #000; }

.mage .stat {
  display: inline-flex; align-items: center; justify-content: center; gap: .08em;
  min-width: 2.6em; padding: .12em .28em; border-radius: .3em;
  background: rgba(42, 34, 23, .06); color: #1a140c; line-height: 1;
}
.mage .stat b { font-size: 1.55em; }
.mage .stat .ic { width: 1.1em; height: 1.1em; color: #4b4b4b; }
.mage .stat.boost b { font-size: 1.4em; }
.mage .stat.enc .ic { width: 1.3em; height: 1.3em; }
.mage .stat.hardship .ic { width: 1.6em; height: 1.6em; color: #3a3a3a; }

.mage .col.center {
  position: relative; border: .14em solid var(--gold); border-radius: .35em;
  box-shadow: inset 0 0 0 .1em var(--parch), inset 0 0 0 .18em var(--gold-dk);
  background: var(--parch); overflow: hidden; justify-content: stretch;
}
.mage .half { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; padding: .2em 0; min-height: 0; }
.mage .level-pips { position: relative; display: flex; gap: .2em; pointer-events: none; }
.mage .level-pips i { display: block; width: .68em; height: .68em; border-radius: 50%; background: rgba(42, 34, 23, .28); box-shadow: inset 0 0 0 1px rgba(109, 79, 18, .55); }
.mage .level-pips i.on { background: var(--gold); box-shadow: 0 0 .25em rgba(233, 207, 114, .7); }
.mage .col.center[data-enh="water"] .half.lower { background: var(--tint-water); }
.mage .col.center[data-enh="fire"] .half.lower { background: var(--tint-fire); }
.mage .col.center[data-enh="lightning"] .half.lower { background: var(--tint-lightning); }
.mage .act { position: relative; display: inline-flex; align-items: center; gap: .08em; color: #111; line-height: 1.15; }
.mage .act .ic { width: 1.6em; height: 1.6em; }
.mage .act.basic b { font-size: 2em; }
.mage .act.enhanced b { font-size: 2.6em; }
.mage .act.enhanced .ic { width: 2em; height: 2em; }

/* medallón divisor: marca qué elemento mejora la acción, con colgantes tipo cinta */
.mage .divider { position: relative; height: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.mage .divider::before { content: ""; position: absolute; left: .3em; right: .3em; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-dk) 20%, var(--gold-dk) 80%, transparent); }
.mage .divider .medal { position: relative; z-index: 1; box-shadow: 0 0 0 .06em var(--gold-dk), 0 .12em .3em rgba(0, 0, 0, .55); }
.mage .divider .tail { position: relative; z-index: 1; width: 0; height: 0; border-style: solid; }
.mage .divider .tail.l { border-width: .45em .4em .45em 0; border-color: transparent var(--gold-dk) transparent transparent; margin-right: -.1em; }
.mage .divider .tail.r { border-width: .45em 0 .45em .4em; border-color: transparent transparent transparent var(--gold-dk); margin-left: -.1em; }

.fused-tag { position: absolute; top: 3.2em; left: 50%; transform: translateX(-50%); z-index: 3; background: var(--gold); color: var(--ink); border-radius: 50%; width: 1.9em; height: 1.9em; display: flex; align-items: center; justify-content: center; box-shadow: 0 .1em .2em rgba(0, 0, 0, .5); }

@container (max-width: 260px) {
  .op-lbl b { display: none; }
  .orient-peek { gap: .12em; font-size: .78em; }
}
@container (max-width: 190px) {
  .orient-peek { font-size: .68em; }
}

/* Las mejoras nunca se recortan: si no caben en una línea, el botón pasa a dos filas
   en vez de cortar el texto (el body deja hueco de sobra para esto en bottom). */
.orient-peek {
  position: absolute; left: .6em; right: .6em; bottom: .4em; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .18em .22em; min-height: 2.1em; padding: .18em .3em; border: 0; appearance: none; -webkit-appearance: none;
  border-radius: .35em;
  background: linear-gradient(180deg, #3a3224, #2a2418);
  color: var(--parch); box-shadow: inset 0 0 0 1px rgba(201, 164, 65, .45);
  font-size: .92em; line-height: 1.2;
  transition: box-shadow .15s, transform .15s;
}
.orient-peek:hover, .orient-peek:focus-visible {
  box-shadow: inset 0 0 0 1px var(--gold-lt), 0 0 .5em rgba(233, 207, 114, .55);
  transform: translateY(-1px);
}
.orient-peek .ic { width: 1.15em; height: 1.15em; color: var(--gold-lt); }
.orient-peek b { font-size: 1em; color: var(--gold-lt); }
.op-lbl { display: inline-flex; align-items: center; gap: .2em; letter-spacing: .04em;
  text-transform: uppercase; font-family: var(--display); color: var(--gold-lt); margin-right: .15em; }
.op-stat, .op-act, .op-arm, .op-cost {
  display: inline-flex; align-items: center; gap: .05em; color: #f4ead0;
}
.op-act b, .op-stat, .op-arm b, .op-cost { font-family: var(--display); font-weight: 800; }
.op-act.enh b { color: var(--gold-lt); }
.op-slash { color: rgba(233, 207, 114, .45); font-weight: 700; }
.op-arm { padding: .05em .2em; border-radius: .2em; }
.op-arm.el-water { background: var(--water); }
.op-arm.el-fire { background: var(--fire); }
.op-arm.el-lightning { background: var(--lightning); }
.op-arm.el-shadow { background: var(--shadow); }
.op-arm.el-none { background: #1c1a17; }
.op-arm .ic { color: #fff; }
.op-arm b { color: #fff; text-shadow: 0 1px 1px #000; }
.op-cost { color: var(--gold-lt); margin-left: .1em; }
.orient-peek.max { justify-content: center; color: var(--gold-lt); gap: .4em; }

.orient-all {
  display: none; position: absolute; left: 50%; bottom: calc(100% + .45em); z-index: 20;
  width: max(18em, 100%); transform: translateX(-50%);
  padding: .45em .5em .4em; border-radius: .4em;
  background: linear-gradient(180deg, #efe3c3, #e2d2a6);
  border: 1px solid var(--gold-dk);
  box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .7), inset 0 0 0 2px var(--parch);
  color: var(--ink); font-size: .78em; line-height: 1.15;
  pointer-events: none;
}
.orient-all::after {
  content: ""; position: absolute; left: 50%; bottom: -.45em; transform: translateX(-50%);
  border: .45em solid transparent; border-top-color: var(--gold-dk);
}
.ol-title {
  margin: 0 0 .25em; font-family: var(--display); font-size: .85em; letter-spacing: .08em;
  text-transform: uppercase; color: #6b4b12; text-align: center;
}
.ol-head, .ol-row {
  display: grid; grid-template-columns: 2em 2.2em 2.2em 2.4em 2.4em 2.4em 2.4em;
  gap: .2em; align-items: center; justify-items: center;
}
.ol-head { color: #6a5b40; font-size: .78em; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: .15em; }
.ol-row { padding: .12em 0; border-radius: .2em; }
.ol-row.cur { background: rgba(201, 164, 65, .28); box-shadow: inset 0 0 0 1px var(--gold); }
.ol-n { font-family: var(--display); font-weight: 800; }
.ol-row .ic { width: .95em; height: .95em; }
.ol-row .op-act, .ol-row .op-arm { color: var(--ink); }
.ol-row .op-act.enh b { color: #6b4b12; }
.ol-row .op-arm { color: #fff; }
.ol-xp { display: inline-flex; align-items: center; gap: .05em; color: #2f8a2f; }

.mage:hover .orient-all, .mage:focus-visible .orient-all { display: block; }
.inspect-hero.mage .orient-all {
  display: block; bottom: auto; top: calc(100% + .45em);
  font-size: 13px; width: 22em; line-height: 1.25;
}
.inspect-hero.mage .orient-all::after {
  bottom: auto; top: -.45em;
  border-top-color: transparent; border-bottom-color: var(--gold-dk);
}
.mage:has(.fused-tag) .level-pips { display: none; }
.mage.fused-bottom .orient-peek, .mage.fused-bottom .orient-all, .mage.fused-bottom .level-pips {
  display: none;
}
.mage.upgrading .orient-peek {
  background: linear-gradient(180deg, #5a4a22, #3a3018);
  box-shadow: inset 0 0 0 1px var(--gold-lt), 0 0 .5em rgba(233, 207, 114, .45);
}

/* dorso */
.mage.back { height: calc(var(--cw) * .72);
  background: url("../assets/art/crack-lightning.png") center / 110px, radial-gradient(circle at 50% 40%, #2a2416, #0d0b08 70%); background-blend-mode: screen; box-shadow: 0 .3em .8em rgba(0, 0, 0, .7), inset 0 0 0 .35em #0d0b08, inset 0 0 0 .5em var(--gold-dk); }
.mage.back .back-inner { position: absolute; inset: 1.4em; border: .12em solid var(--gold-dk); border-radius: .4em; display: flex; align-items: center; justify-content: center; }
.mage.back .back-ic { width: 4em; height: 4em; color: var(--gold); opacity: .6; }
.pile-count { position: absolute; right: -.5em; bottom: -.5em; min-width: 2.2em; height: 2.2em; padding: 0 .5em; border-radius: 1.1em; background: var(--gold); color: var(--ink); font-family: var(--display); font-weight: 900; font-size: 1.1em; display: flex; align-items: center; justify-content: center; box-shadow: 0 .1em .3em rgba(0, 0, 0, .6); z-index: 3; }
.pile-label { position: absolute; left: 0; right: 0; bottom: -1.7em; text-align: center; color: var(--muted); font-family: var(--display); font-size: .95em; letter-spacing: .1em; text-transform: uppercase; }

/* ---- Region Card ---- */
.region {
  position: relative; width: var(--cw); height: calc(var(--cw) * .72);
  font-size: calc(var(--cw) / 22); color: var(--ink);
  background: url("../assets/art/parchment.png") center / 140px,
    linear-gradient(160deg, var(--parch), var(--parch2));
  background-blend-mode: multiply;
  border-radius: .7em; box-shadow: 0 .3em .8em rgba(0, 0, 0, .65), 0 0 0 1px #000;
  flex: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.region .banner { left: 3em; right: 3em; }
.region .rows { position: absolute; top: 3.4em; bottom: .9em; left: 1.2em; right: 1.2em; display: grid; grid-template-rows: 1.15fr 1fr; gap: .25em; }
.region .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25em; min-height: 0; }
.cell { position: relative; display: flex; flex-direction: column; min-height: 0; border: 1px solid rgba(138, 106, 30, .5); border-radius: .25em; background: rgba(255, 255, 255, .12); overflow: hidden; transition: opacity .25s; }
.cell.dim { opacity: .55; }
.cell .art { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #d8ccab; }
.cell .art .pic {
  display: block; width: 100%; height: 100%;
  shape-rendering: geometricPrecision;
}
.cell .stats {
  display: flex; justify-content: center; gap: .2em; padding: .18em .08em;
  background: rgba(239, 227, 195, .94);
  border-top: 1px solid rgba(138, 106, 30, .4);
  line-height: 1; white-space: nowrap; overflow: hidden; font-size: .92em;
}
.cell .s { display: inline-flex; align-items: center; gap: 0; color: #1a140c; flex: none; }
.cell .s b {
  font-family: var(--display); font-weight: 900; font-size: 1.12em; color: #1a140c;
}
.cell .s .ic { width: .95em; height: .95em; }
.cell .s.el-water .ic, .cell .s.el-fire .ic, .cell .s.el-lightning .ic, .cell .s.el-shadow .ic { color: inherit; }
.cell .s .medal { font-size: .9em; }
.cell .s.time .ic { color: #2f7d3a; }
.badge { position: absolute; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.badge b { position: relative; font-family: var(--display); font-weight: 900; color: #fff; text-shadow: 0 0 .15em rgba(0, 0, 0, .9), 0 .05em .05em #000; }
.badge .ic { position: absolute; inset: 0; width: 100%; height: 100%; }
.badge.hp { top: .1em; left: .1em; width: 1.7em; height: 1.7em; color: #b3212c; }
.badge.hp b { font-size: 1.05em; margin-top: -.15em; }
.badge.laurel { top: .1em; right: .1em; left: auto; width: 1.7em; height: 1.7em; color: #2f8a2f; }
.badge.laurel b { font-size: .95em; }
.badge.ability, .badge.peril { position: absolute; bottom: .1em; right: .1em; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--parch); border: .1em solid var(--gold-dk); color: #1c1a17; }
.badge.peril { left: .1em; right: auto; top: .1em; bottom: auto; }
.badge.ability .ic, .badge.peril .ic { position: static; width: 1em; height: 1em; }
.cell .marker { position: absolute; inset: -1px; border: .22em solid var(--gold-lt); border-radius: .3em; box-shadow: 0 0 .6em .1em rgba(233, 207, 114, .8), inset 0 0 .4em rgba(233, 207, 114, .6); pointer-events: none; animation: pulse 1.6s ease-in-out infinite; z-index: 3; }
.cell .marker::after { content: ""; position: absolute; top: -.6em; left: 50%; transform: translateX(-50%); border: .5em solid transparent; border-top: .7em solid var(--gold-lt); border-bottom: 0; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 .5em .05em rgba(233, 207, 114, .7); } 50% { box-shadow: 0 0 1em .25em rgba(233, 207, 114, .95); } }

/* celda ampliada (encuentro) */
.encounter-big { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.encounter-big .enc-title { font-family: var(--display); font-weight: 700; color: var(--gold-lt); letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; text-shadow: 0 1px 2px #000; }
.cell.big {
  width: min(260px, 64vw); height: 270px; font-size: 22px;
  border: .18em solid var(--gold); border-radius: .4em;
  box-shadow: 0 .4em 1em rgba(0, 0, 0, .7), inset 0 0 0 .12em var(--parch);
  background: var(--parch);
}
.cell.big .stats { gap: .5em; padding: .2em; font-size: 1em; }
.cell.big .badge.hp, .cell.big .badge.laurel { width: 2.2em; height: 2.2em; }
.cell.big .badge.ability, .cell.big .badge.peril { width: 1.9em; height: 1.9em; }
.cell.big .badge.ability .ic, .cell.big .badge.peril .ic { width: 1.25em; height: 1.25em; }
.encounter-big .enc-note { max-width: 300px; margin: 0; font-size: .85rem; color: var(--parch); text-align: center; line-height: 1.3; }
.encounter-big .enc-note.hard { color: var(--bad-lt); }
.encounter-big .enc-note .ic { width: 1.1em; height: 1.1em; }
/* sello lacrado del hardship sobre la esquina */
.seal { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; color: #fff; z-index: 4; text-align: center; line-height: 1; font-family: var(--display); }
.hardship-seal { top: 1.2rem; right: calc(50% - 150px); background: radial-gradient(circle at 35% 30%, #d94b4b, #7a1212 65%, #4d0a0a); box-shadow: 0 .15rem .4rem rgba(0, 0, 0, .7), inset 0 0 0 .2rem rgba(255, 255, 255, .12), inset 0 0 .6rem rgba(0, 0, 0, .5); transform: rotate(-12deg); border: .15rem solid #a83030; }
.hardship-seal .ic { width: 1.7rem; height: 1.7rem; }
.hardship-seal small { font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; margin-top: .15rem; font-weight: 700; }

/* ---- Dragon Card ---- */
.dragon {
  position: relative; width: var(--cw); aspect-ratio: 1 / .78;
  font-size: calc(var(--cw) / 22); color: var(--ink);
  background: url("../assets/art/parchment.png") center / 140px,
    linear-gradient(160deg, var(--parch), var(--parch2));
  background-blend-mode: multiply;
  border-radius: .7em; box-shadow: 0 .3em .8em rgba(0, 0, 0, .65), 0 0 0 1px #000;
  flex: none;
  display: grid; grid-template-rows: 3.6em 1.8em 1fr 1.9em .6em; padding: 0 1.3em;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
}
.dragon .banner { position: absolute; left: 3em; right: 3em; }
.dragon .tiers { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.dragon .tiers.mp { grid-row: 2; }
.dragon .tiers.hp { grid-row: 4; }
.dragon .tier { display: inline-flex; align-items: center; justify-content: center; gap: .08em; padding: .1em .15em; color: #222; border-radius: .25em; line-height: 1; transition: background .3s, box-shadow .3s; position: relative; }
.dragon .tier + .tier::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px; background: rgba(0, 0, 0, .45); }
.dragon .tier b { font-family: var(--display); font-weight: 900; font-size: 1.15em; }
.dragon .tier .ic { width: .95em; height: .95em; }
.dragon .tier b.pen + .ic { color: #2f7d3a; }
.dragon .tier b.hpv { color: #8b1a1a; }
.dragon .tier.hit { background: var(--gold); box-shadow: 0 0 .5em var(--gold-lt); color: #1c1a17; }
.dragon .art { grid-row: 3; position: relative; border: .12em solid var(--gold); border-radius: .3em; overflow: hidden; background: #1a1c22; min-height: 0; }
.dragon .art .pic {
  display: block; width: 100%; height: 100%;
  shape-rendering: geometricPrecision;
}
.dragon .dstats { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: .5em; padding: .2em; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; line-height: 1; }
.dragon .dstats .s { display: inline-flex; align-items: center; gap: .05em; }
.dragon .dstats .s b { font-family: var(--display); font-weight: 900; font-size: 1.15em; text-shadow: 0 1px 2px #000; }
.dragon .dstats .s .ic { width: 1em; height: 1em; }
.dragon .dstats .s.el-water .ic { color: #6ea8f0; }
.dragon .dstats .s.el-fire .ic { color: #ff6b5c; }
.dragon .dstats .s.el-lightning .ic { color: #f5d54a; }
.dragon .dstats .s.el-shadow .ic { color: #c3c8d2; }
.dragon .dstats .s .ic:not([class*=el-]) { color: #fff; }

/* ================= LA MESA ================= */
.table { display: flex; flex-direction: column; min-height: 100vh; }
.topbar { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem; background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .25)); border-bottom: 1px solid rgba(201, 164, 65, .35); flex-wrap: wrap; position: sticky; top: 0; z-index: 20; }
.brand { font-family: var(--display); font-weight: 800; color: var(--gold-lt); letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; text-shadow: 0 1px 0 #000; }
.where { font-style: italic; color: var(--parch); font-size: .95rem; }
.topbar .actions { margin-left: auto; display: flex; gap: .4rem; }

/* rastro de fases */
.phases { display: flex; align-items: center; gap: .2rem; margin: 0 auto; }
.phases .ph { position: relative; font-family: var(--display); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .25rem .55rem; border: 1px solid transparent; border-radius: 2px; transition: color .3s, background .3s, text-shadow .3s; }
.phases .ph.done { color: #8d8368; }
.phases .ph.cur { color: var(--ink); background: linear-gradient(var(--gold-lt), var(--gold)); border-color: var(--gold-dk); box-shadow: 0 0 12px rgba(233, 207, 114, .55); font-weight: 700; }
.phases .sep { width: 14px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dk), transparent); }

.mat { flex: 1; display: flex; flex-direction: column; gap: .8rem; padding: .8rem 1rem 1.5rem; max-width: 1400px; width: 100%; margin: 0 auto; }
.error { background: rgba(165, 42, 42, .35); border: 1px solid var(--bad); color: #ffd6cf; padding: .5rem .8rem; border-radius: 6px; }

/* zona de expedición */
.expedition {
  display: flex; align-items: flex-start; gap: 1.6rem; flex-wrap: wrap;
  --cw: 160px; padding: .6rem .5rem 1.8rem;
}
.expedition .pile { position: relative; }
.zone-label {
  display: block; text-align: center; color: var(--muted);
  font-family: var(--display); font-size: .65rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: .35rem;
}
.deck-stack {
  position: relative;
  width: calc(var(--cw) + 34px);
  height: calc(var(--cw) * .72 + 30px);
}
.deck-stack .mage.back { position: absolute; left: 0; top: 46px; }
.deck-stack .mage.back::before, .deck-stack .mage.back::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: #0d0b08; z-index: -1; box-shadow: inset 0 0 0 1px var(--gold-dk);
}
.deck-stack .mage.back::before { transform: translate(3px, 3px); }
.deck-stack .mage.back::after { transform: translate(6px, 6px); }
.deck-stack .inspect-hit[data-inspect="region"] {
  position: absolute; left: 56px; top: 0; z-index: 2;
}
.deck-stack .inspect-hit[data-inspect="region"] .region { --cw: 280px; }
.deck-stack .mage.back .pile-count { right: auto; left: -.5em; }
.deck-stack.has-region { width: calc(280px + 56px); height: calc(280px * .72); }
.deck-stack:not(.has-region) { width: var(--cw); height: calc(var(--cw) * .72 + 8px); }
.deck-stack:not(.has-region) .mage.back, .deck-stack:not(.has-region) .empty { top: 0; }
.deck-stack .empty {
  position: absolute; left: 0; top: 46px; width: var(--cw);
  height: calc(var(--cw) * .72); border: 2px dashed var(--gold-dk);
  border-radius: 10px; opacity: .6;
}
.key-zone .mage { --cw: 210px; }
.dragon-zone .dragon { --cw: 210px; }
.small-piles { display: flex; gap: 1.2rem; align-items: flex-start; --cw: 104px; }
.small-piles .mage.back { opacity: .95; }
.small-piles .mage.back.trash { filter: grayscale(.55) brightness(.7); }
.small-piles .empty {
  width: var(--cw); height: calc(var(--cw) * .72);
  border: 2px dashed rgba(201, 164, 65, .45); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.small-piles .empty .ic { width: 1.6rem; height: 1.6rem; opacity: .6; }
.poison-tag {
  display: inline-flex; align-items: center; gap: .3rem; color: #b6e08a;
  font-family: var(--display); font-size: .8rem;
}

/* inspeccionar cartas de la expedición */
.inspect-hit {
  position: relative; display: block; width: fit-content;
  cursor: zoom-in; border-radius: .7em; outline: none;
}
.inspect-hit .mage, .inspect-hit .region, .inspect-hit .dragon,
.inspect-hit .mage.locked { cursor: zoom-in; }
.inspect-hit:focus-visible { box-shadow: 0 0 0 3px var(--gold-lt); }
.inspect-hint {
  position: absolute; left: 50%; bottom: .4em; z-index: 6;
  transform: translateX(-50%) translateY(8px);
  display: inline-flex; align-items: center; gap: .3em;
  padding: .2em .7em; border-radius: 1em;
  font-family: var(--display); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  box-shadow: 0 .15em .4em rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}
.inspect-hint .ic { width: .9em; height: .9em; }
@media (hover: none) {
  .inspect-hint {
    opacity: .92; transform: translateX(-50%) translateY(0);
    font-size: .58rem; padding: .12em .5em; bottom: .15em;
  }
}
@media (hover: hover) and (pointer: fine) {
  .inspect-hit:hover .inspect-hint,
  .inspect-hit:focus-visible .inspect-hint {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }
  .inspect-hit:hover { z-index: 9; }
  .inspect-hit:hover .mage,
  .inspect-hit:hover .region,
  .inspect-hit:hover .dragon {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 .9em 1.8em rgba(0, 0, 0, .78), 0 0 0 2px var(--gold-lt);
    filter: none; opacity: 1;
  }
}

.inspect-layer {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(8, 6, 4, .78);
  backdrop-filter: blur(8px);
  animation: inspectIn .22s ease-out;
}
.inspect-sheet {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: .7rem;
  width: fit-content; max-width: min(960px, 96vw); max-height: 92vh;
  overflow: auto; padding: 2.2rem 1.6rem 1rem;
}
.inspect-sheet:has(.inspect-hero.mage) { padding-bottom: 7rem; }
.inspect-caption {
  margin: 0; color: var(--gold-lt);
  font-family: var(--display); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; font-size: .85rem;
  text-shadow: 0 1px 2px #000;
  display: inline-flex; align-items: center; gap: .4rem;
}
.inspect-caption .ic { width: 1.1em; height: 1.1em; }
.btn.inspect-close {
  position: absolute; top: 0; right: 0;
  width: 2.2rem; height: 2.2rem; padding: 0;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.btn.inspect-close .ic { width: 1rem; height: 1rem; }
.inspect-key, .inspect-mage { --cw: min(520px, 92vw); }
.inspect-region { --cw: min(680px, 94vw); }
.inspect-dragon { --cw: min(500px, 90vw); }
.inspect-body .mage,
.inspect-body .region,
.inspect-body .dragon {
  --cw: inherit; width: var(--cw);
  box-shadow: 0 1.2em 2.8em rgba(0, 0, 0, .85), 0 0 0 1px #000,
    0 0 40px rgba(233, 207, 114, .22);
}
.inspect-grid {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  --cw: min(210px, 42vw); max-width: 920px;
}
@keyframes inspectIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* zona central */
.stage { display: grid; grid-template-columns: minmax(260px, 340px) minmax(300px, 1fr); gap: 1.4rem; align-items: start; }
.stage.single { grid-template-columns: 1fr; }
.note { font-size: .95rem; overflow: clip; } /* el sello entra escalado: que no ensanche la página */
.note h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.note .calc { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .9rem; margin: .5rem 0; font-size: .95rem; }
.note .calc-line { display: contents; }
.note .calc-line span { color: #6a5b40; font-style: italic; }
.note .calc-line b { font-family: var(--serif); font-weight: 700; color: var(--ink); }
.note .calc-line.strong b { font-family: var(--display); font-size: 1.05rem; }
.note .calc-line.bad b { color: var(--bad); }
.note .calc-line.good b { color: var(--good); }
.note .calc-line.warn b { color: var(--warn); }
.note .opts { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .4rem 0; font-size: .9rem; }
.note .opts label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.note .opts input { accent-color: var(--gold-dk); }
.note .errors { margin: .4rem 0; padding-left: 1.2rem; color: var(--bad); font-size: .9rem; }
.note .cta { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.note .big { font-size: 1.15rem; }
.note .big b { font-family: var(--display); font-size: 1.5rem; color: #6b4b12; }
.note .ic { width: 1em; height: 1em; }
.note .medal { font-size: .85em; }
/* sello de resultado */
.stamp { display: inline-block; padding: .25rem .8rem; border: .18rem solid currentColor; border-radius: .3rem; font-family: var(--display); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 1rem; transform: rotate(-4deg); opacity: .88; mix-blend-mode: multiply; margin: .3rem 0; box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .35); text-shadow: .5px .5px 0 rgba(255, 255, 255, .4); }
.stamp.good { color: #2f7d3a; }
.stamp.warn { color: #9a6a06; }
.stamp.bad { color: #a52a2a; }
.stamp.animate { animation: stampIn .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes stampIn { 0% { transform: rotate(-4deg) scale(1.6); opacity: 0; } 60% { transform: rotate(-4deg) scale(.92); opacity: 1; } 80% { transform: rotate(-4deg) scale(1.05); } 100% { transform: rotate(-4deg) scale(1); } }

/* ranuras */
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: .4rem 0; --cw: min(225px, 24cqw); justify-items: center; container-type: inline-size; }
.slot { position: relative; width: var(--cw); min-height: calc(var(--cw) * .84 + 1.6rem); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 1.5rem; transition: background .15s, box-shadow .15s; }
.slot::before { content: ""; position: absolute; left: 0; right: 0; top: 1.5rem; height: calc(var(--cw) * .84); border: 2px dashed rgba(233, 207, 114, .55); border-radius: 10px; background: rgba(0, 0, 0, .25); transition: border-color .15s, background .15s, box-shadow .15s; }
.slot.reserve::before { border-color: rgba(179, 168, 143, .5); }
.slot .slot-label { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-family: var(--display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lt); text-shadow: 0 1px 2px #000; white-space: nowrap; display: flex; align-items: center; gap: .3rem; }
.slot .slot-label .ic { width: 1em; height: 1em; }
.slot.reserve .slot-label { color: var(--muted); }
.slot .slot-hint { position: absolute; top: calc(1.5rem + var(--cw) * .42); left: 0; right: 0; transform: translateY(-50%); text-align: center; color: rgba(233, 207, 114, .6); font-style: italic; font-size: .8rem; pointer-events: none; padding: 0 .5rem; }
.slot.over::before, .slot.target::before { border-style: solid; border-color: var(--gold-lt); box-shadow: 0 0 18px rgba(233, 207, 114, .7), inset 0 0 20px rgba(233, 207, 114, .25); background: rgba(201, 164, 65, .18); }
.slot.fuse-over::before { border-color: #e78bff; box-shadow: 0 0 18px rgba(231, 139, 255, .8); }
.slot .mage { position: relative; z-index: 1; cursor: grab; }
.slot .mage.selected { box-shadow: 0 0 0 3px var(--gold-lt), 0 .3em .8em rgba(0, 0, 0, .65); }
.slot.bottom-stack .mage.fused-bottom { position: absolute; top: calc(1.5rem + .35em); left: 50%; transform: translateX(-50%) rotate(-5deg); z-index: 0; filter: brightness(.85); }
.slot.bottom-stack .mage:not(.fused-bottom) { transform: translateY(1.2em); }
.slot .reserve-list { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; position: relative; z-index: 1; }
.slot .reserve-list .mage { --cw: inherit; }
.slot .role-clear { position: absolute; z-index: 3; right: -.4rem; top: 1.1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--gold-dk); background: #241e18; color: var(--gold-lt); display: flex; align-items: center; justify-content: center; padding: 0; }
.slot .role-clear .ic { width: .8rem; height: .8rem; }
.fusion-line { font-size: .9rem; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

/* ---- foco de rol: en la carta colocada solo brilla el dato que usa la ranura ---- */
/* Cada rol lee un solo dato de la carta (Conjuro: la acción básica o la mejorada; Elemento:
   iniciativa y color; Impulso: el +N). Ese dato se ilumina y pulsa al colocar la carta; el
   resto se atenúa. La etiqueta .slot-out bajo la ranura dice qué aporta. */
.slot .mage.focus .chip, .slot .mage.focus .stat, .slot .mage.focus .act, .slot .mage.focus .level-pips,
.slot .mage.focus .divider .medal, .slot .mage.focus .orient-peek { opacity: .3; transition: opacity .3s, box-shadow .3s, transform .3s; }
.slot .mage.focus .half.lower { filter: saturate(.4); }
.slot .mage.focus-none .chip, .slot .mage.focus-none .stat, .slot .mage.focus-none .act, .slot .mage.focus-none .level-pips,
.slot .mage.focus-none .divider .medal, .slot .mage.focus-none .orient-peek { opacity: .75; }
.slot .mage.focus-basic .act.basic,
.slot .mage.focus-enhanced .act.enhanced,
.slot .mage.focus-element .stat.init,
.slot .mage.focus-boost .stat.boost {
  opacity: 1; background: #fff6d2; border-radius: .3em; padding: .05em .25em;
  box-shadow: 0 0 0 .14em var(--gold-lt), 0 0 .9em .25em rgba(233, 207, 114, .8);
  transform: scale(1.1); z-index: 3;
}
.slot .mage.focus-enhanced .divider .medal, .slot .mage.focus-enhanced .half.lower { opacity: 1; filter: none; }
.slot .mage.focus-enhanced .divider .medal { box-shadow: 0 0 0 .06em var(--gold-dk), 0 0 .7em .2em rgba(233, 207, 114, .9); }
.slot .mage.focus-element .banner { filter: drop-shadow(0 0 .35em rgba(233, 207, 114, .95)); }
.slot .mage.focus-wrong .act.basic, .slot .mage.focus-wrong .act.enhanced { box-shadow: 0 0 0 .14em var(--bad-lt), 0 0 .9em .25em rgba(240, 140, 122, .8); background: #ffe1da; }
.slot .mage.focus-wrong.focus-basic .act.basic b, .slot .mage.focus-wrong.focus-enhanced .act.enhanced b { text-decoration: line-through; text-decoration-color: var(--bad); text-decoration-thickness: .12em; }
.slot .mage.focus-wrong.focus-basic .act.basic::after, .slot .mage.focus-wrong.focus-enhanced .act.enhanced::after { content: "1"; position: absolute; right: -.9em; top: -.5em; font-family: var(--display); font-weight: 900; font-size: 1.2em; color: #fff; background: var(--bad); border-radius: 50%; width: 1.4em; height: 1.4em; display: flex; align-items: center; justify-content: center; box-shadow: 0 .1em .3em rgba(0, 0, 0, .6); }
/* pulso al colocar (la etiqueta lleva .animate solo cuando cambia la carta de la ranura) */
.slot:has(.slot-out.animate) .mage.focus-basic .act.basic,
.slot:has(.slot-out.animate) .mage.focus-enhanced .act.enhanced,
.slot:has(.slot-out.animate) .mage.focus-element .stat.init,
.slot:has(.slot-out.animate) .mage.focus-boost .stat.boost { animation: focusPulse .7s ease-in-out 2 .25s; }
@keyframes focusPulse {
  0%, 100% { transform: scale(1.1); box-shadow: 0 0 0 .14em var(--gold-lt), 0 0 .9em .25em rgba(233, 207, 114, .8); }
  50% { transform: scale(1.32); box-shadow: 0 0 0 .18em #fff, 0 0 1.4em .5em rgba(233, 207, 114, 1); }
}
.slot .slot-out { position: relative; z-index: 1; margin-top: .5rem; width: 100%; box-sizing: border-box; text-align: center; font-size: .84rem; line-height: 1.25; color: var(--parch); padding: .35rem .5rem .4rem; border-radius: .4rem; background: rgba(0, 0, 0, .5); border: 1px solid rgba(233, 207, 114, .4); }
.slot .slot-out b { font-family: var(--display); font-size: 1.2rem; color: var(--gold-lt); }
.slot .slot-out small { display: block; margin-top: .1rem; color: var(--muted); font-size: .74rem; font-style: italic; }
.slot .slot-out .medal { font-size: .6em; vertical-align: middle; }
.slot .slot-out.good { border-color: var(--good-lt); } .slot .slot-out.good b { color: var(--good-lt); }
.slot .slot-out.bad { border-color: var(--bad-lt); } .slot .slot-out.bad b { color: var(--bad-lt); }
.slot .slot-out.animate { animation: slotOutIn .4s cubic-bezier(.2, 1.2, .4, 1) both .2s; }
@keyframes slotOutIn { 0% { transform: translateY(-.6rem) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
.slot.bottom-stack .slot-out { margin-top: 1.7em; }
.altar .slot-out { font-size: .72rem; padding: .25rem .3rem; }
.altar .slot-out b { font-size: 1rem; }
.altar .slot-out small { font-size: .64rem; }

/* ---- glosario: término con «?» y tooltip (hover, foco de teclado o toque) ---- */
.term { position: relative; display: inline-flex; align-items: center; gap: .2em; cursor: help; border-bottom: 1px dotted currentColor; outline: none; }
.term .q { display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; border-radius: 50%; font-size: .68em; font-style: normal; font-weight: 700; font-family: var(--serif); letter-spacing: 0; border: 1px solid currentColor; line-height: 1; opacity: .7; }
.term .q::before { content: "?"; }
.term:hover .q, .term:focus .q { opacity: 1; }
.term-tip { display: none; position: absolute; z-index: 40; left: 50%; top: calc(100% + .5rem); transform: translateX(-50%); width: max-content; max-width: min(18rem, 80vw); white-space: normal; text-align: left; padding: .5rem .65rem; border-radius: .4rem; background: linear-gradient(180deg, #efe3c3, #e2d2a6); border: 1px solid var(--gold-dk); color: var(--ink); font-family: var(--serif); font-size: .82rem; font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.35; text-shadow: none; box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .7), inset 0 0 0 2px var(--parch); pointer-events: none; }
.term-tip::before { content: ""; position: absolute; left: 50%; top: -.45rem; transform: translateX(-50%); border: .45rem solid transparent; border-top: 0; border-bottom-color: var(--gold-dk); }
.term:hover .term-tip, .term:focus .term-tip, .term:focus-within .term-tip { display: block; }
.calc .term-tip, .sum-bar .term-tip { left: 0; transform: none; }
.calc .term-tip::before, .sum-bar .term-tip::before { left: 1rem; transform: none; }
.slot .slot-label .term { border-bottom-color: rgba(233, 207, 114, .6); }
.slot .slot-label .term-tip { min-width: 14rem; }
.glossary { padding-left: 1.2rem; columns: 2; column-gap: 1.5rem; }
.glossary li { margin: .25rem 0; break-inside: avoid; }
@media (max-width: 720px) { .glossary { columns: 1; } }

/* ---- barra de suma: la cuenta del encuentro entre la mesa y las ranuras ---- */
.sum-bar { margin: .9rem auto .2rem; padding: .55rem .9rem .5rem; border-radius: .6rem; background: rgba(0, 0, 0, .45); border: 1px solid rgba(233, 207, 114, .35); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); max-width: 980px; }
.sum-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .5rem; }
.sum-line.main { gap: .3rem .45rem; }
.sum-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 4.2rem; padding: .2rem .55rem .25rem; border-radius: .45rem; background: rgba(233, 207, 114, .1); border: 1px solid rgba(233, 207, 114, .45); color: var(--parch); line-height: 1.1; }
.sum-chip small { font-family: var(--display); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-lt); white-space: nowrap; }
.sum-chip small .term { border-bottom-color: rgba(233, 207, 114, .5); }
.sum-chip b { font-family: var(--display); font-size: 1.35rem; color: var(--parch); }
.sum-chip.empty { border-style: dashed; opacity: .6; }
.sum-chip.empty b { color: var(--muted); }
.sum-chip.total { background: rgba(233, 207, 114, .22); border-width: 2px; min-width: 5rem; }
.sum-chip.total b { font-size: 1.7rem; color: var(--gold-lt); }
.sum-chip.total.good b { color: var(--good-lt); } .sum-chip.total.warn b { color: #f0c84a; } .sum-chip.total.bad b { color: var(--bad-lt); }
.sum-chip.target { border-color: rgba(240, 140, 122, .6); background: rgba(165, 42, 42, .18); }
.sum-chip.target b { font-size: 1.7rem; }
.sum-chip.armor b::before { content: "−"; font-size: .8em; }
.sum-op { font-family: var(--display); font-size: 1.4rem; color: var(--gold-lt); padding: 0 .1rem; }
.sum-op.vs { font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); padding: 0 .35rem; }
.sum-verdict { font-family: var(--display); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; padding: .3rem .7rem; border: .15rem solid currentColor; border-radius: .3rem; transform: rotate(-3deg); margin-left: .4rem; }
.sum-verdict.good { color: var(--good-lt); } .sum-verdict.warn { color: #f0c84a; } .sum-verdict.bad { color: var(--bad-lt); }
.sum-verdict.muted { border-style: dashed; transform: none; font-weight: 700; }
.sum-line.thresholds { margin-top: .4rem; font-size: .78rem; color: var(--muted); font-style: italic; }
.sum-line.thresholds b { font-family: var(--display); font-style: normal; }
.sum-line.thresholds .good { color: var(--good-lt); } .sum-line.thresholds .warn { color: #f0c84a; } .sum-line.thresholds .bad { color: var(--bad-lt); }
.sum-line.init { margin-top: .35rem; font-size: .85rem; color: var(--parch); padding-top: .35rem; border-top: 1px dashed rgba(233, 207, 114, .25); }
.sum-line.init b { font-family: var(--display); }
.sum-line.init.good b { color: var(--good-lt); } .sum-line.init.bad b { color: var(--bad-lt); }
@media (max-width: 720px) {
  .sum-bar { padding: .5rem .5rem .45rem; }
  .sum-chip { min-width: 3.4rem; padding: .15rem .4rem .2rem; }
  .sum-chip b { font-size: 1.15rem; } .sum-chip.total b, .sum-chip.target b { font-size: 1.4rem; }
  .sum-verdict { width: 100%; text-align: center; margin: .3rem 0 0; transform: none; }
}

/* ---- previsualización de roles: qué daría una carta de la mano en cada ranura ---- */
.role-preview { display: none; position: absolute; left: 50%; bottom: calc(100% + .45em); transform: translateX(-50%); z-index: 21; width: max(19em, 100%); padding: .45em .55em .4em; border-radius: .4em; background: linear-gradient(180deg, #2b2418, #1b160f); border: 1px solid var(--gold-dk); box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .7); color: var(--parch); font-size: .78em; line-height: 1.3; pointer-events: none; text-align: left; }
.role-preview::before { content: ""; position: absolute; left: 50%; bottom: -.45em; transform: translateX(-50%); border: .45em solid transparent; border-bottom: 0; border-top-color: var(--gold-dk); }
/* en la Fase de acción, la previsualización de roles sustituye a la tabla de orientaciones (misma posición) */
.fan .mage:has(.role-preview) .orient-all { display: none; }
.role-preview .rp-title { margin: 0 0 .2em; font-family: var(--display); font-size: .8em; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.role-preview > div { display: grid; grid-template-columns: 6.4em 1fr; gap: .4em; align-items: baseline; padding: .2em 0; border-top: 1px solid rgba(233, 207, 114, .15); }
.role-preview .rl { display: inline-flex; align-items: center; gap: .25em; font-family: var(--display); font-size: .82em; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-lt); white-space: nowrap; }
.role-preview .rl .ic { width: 1em; height: 1em; }
.role-preview .rv b { font-family: var(--display); font-size: 1.2em; color: var(--gold-lt); }
.role-preview .medal { font-size: .55em; vertical-align: middle; }
.fan .mage:hover .role-preview, .fan .mage:focus-visible .role-preview, .fan .mage.selected .role-preview { display: block; }
.fan .mage.dragging .role-preview { display: none; }
@media (hover: none) { .fan .mage:hover .role-preview { display: none; } .fan .mage.selected .role-preview { display: block; } }

/* ---- la mano en abanico ---- */
.hand { position: relative; padding: .6rem 0 .4rem; }
.hand h2 { text-align: center; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
/* Cartas de la mano en fila plana (sin solapar ni rotar): con flex-wrap, una mano larga
   pasa a una segunda línea en vez de recortarse o necesitar scroll. */
.fan { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .9rem 1.2rem; --cw: 305px; padding: 1.6rem 1.5rem 1.2rem; }
.fan:has(.empty-hand) { padding-block: .6rem; }
.fan .mage { cursor: grab; transition: transform .15s, box-shadow .25s, filter .25s, opacity .3s; }
.fan .mage:hover, .fan .mage:focus-visible { transform: translateY(-8px) scale(1.03); z-index: 10; box-shadow: 0 1em 1.6em rgba(0, 0, 0, .8), 0 0 0 2px var(--gold-lt); }
.fan .mage.selected { transform: translateY(-10px) scale(1.03); z-index: 11; box-shadow: 0 0 0 3px var(--gold-lt), 0 0 26px rgba(233, 207, 114, .6), 0 1em 1.6em rgba(0, 0, 0, .8); }
.fan .mage.used { filter: grayscale(.7) brightness(.75); cursor: default; }
.fan .mage.pick { cursor: pointer; }
.fan .mage.pick:not(.used)::after { content: ""; position: absolute; inset: -.3em; border-radius: .9em; border: .18em solid rgba(233, 207, 114, .55); pointer-events: none; animation: pulse 1.8s ease-in-out infinite; }
.fan .mage.dragging { opacity: .35; }
.mage[data-drag] { touch-action: none; }
.fan .empty-hand { color: var(--muted); font-style: italic; }
.mage.locked { cursor: default; }
/* etiquetas y controles sobre la carta */
.card-tag { position: absolute; left: 50%; bottom: 2.5em; transform: translateX(-50%); z-index: 4; padding: .15em .8em; border-radius: 1em; font-family: var(--display); font-size: .95em; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--gold); box-shadow: 0 .1em .3em rgba(0, 0, 0, .6); white-space: nowrap; }
.card-tag.muted { background: #5b5344; color: var(--parch); }
.card-tag.good { background: var(--good-lt); }
.card-btn { position: absolute; left: 50%; bottom: -.9em; transform: translateX(-50%); z-index: 4; white-space: nowrap; }
.role-mark { position: absolute; right: -.4em; top: -.5em; z-index: 4; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--gold); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; font-size: 1em; box-shadow: 0 .1em .3em rgba(0, 0, 0, .6); border: .12em solid var(--parch); }
.role-mark.s0 { background: #d8b64a; } .role-mark.s1 { background: #8fc4ff; }
.soak-float { position: absolute; top: 2.4em; right: .8em; z-index: 6; font-family: var(--display); font-weight: 900; font-size: 2.2em; color: #ffdede; text-shadow: 0 0 .2em #a52a2a, 0 .05em .1em #000; animation: floatUp 1.1s ease-out forwards; pointer-events: none; }
@keyframes floatUp { 0% { transform: translateY(.2em); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-1.6em); opacity: 0; } }
.mage.shield-flash .shield { animation: shieldFlash .8s ease-out 2; }
@keyframes shieldFlash { 0%, 100% { filter: none; } 50% { filter: brightness(2.2) drop-shadow(0 0 .4em #fff); } }
.mage.flip { animation: flipCard .7s ease-in-out; }
@keyframes flipCard { 0% { transform: rotateY(0) } 50% { transform: rotateY(90deg) scale(1.05); } 100% { transform: rotateY(0) } }
.mage.flip-down { animation: flipDown .7s ease-in-out; }
@keyframes flipDown { 0% { transform: rotateX(0) } 50% { transform: rotateX(90deg) scale(.95); filter: brightness(.6); } 100% { transform: rotateX(0) } }
.fly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.fly-layer .mage { position: absolute; margin: 0; transition: transform .55s cubic-bezier(.2, .8, .3, 1), opacity .4s; }
.fly-layer .mage.fall { animation: fallOff .9s ease-in forwards; }
@keyframes fallOff { 0% { filter: brightness(1); } 40% { filter: brightness(.35); } 100% { transform: translateY(110vh) rotate(25deg); filter: brightness(.2); opacity: 0; } }
.drag-ghost { position: fixed; z-index: 70; pointer-events: none; transform: translate(-50%, -50%) rotate(3deg) scale(1.04); box-shadow: 0 1.4em 2em rgba(0, 0, 0, .8) !important; }

/* menú circular de elementos (fusión) */
.radial { position: fixed; z-index: 80; width: 0; height: 0; }
.radial .r-el { position: absolute; width: 2.9rem; height: 2.9rem; margin: -1.45rem; border-radius: 50%; border: .18rem solid var(--gold); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .8); cursor: pointer; padding: 0; animation: popIn .25s cubic-bezier(.2, 1.4, .4, 1) both; }
.radial .r-el .ic { width: 1.5rem; height: 1.5rem; }
.radial .r-el:hover { transform: scale(1.15); border-color: var(--gold-lt); }
.radial .r-el.el-water { background: var(--water); } .radial .r-el.el-fire { background: var(--fire); } .radial .r-el.el-lightning { background: #b89b1d; } .radial .r-el.el-shadow { background: var(--shadow); }
.radial .r-cancel { position: absolute; width: 2rem; height: 2rem; margin: -1rem; border-radius: 50%; background: #241e18; border: 1px solid var(--gold-dk); color: var(--gold-lt); display: flex; align-items: center; justify-content: center; padding: 0; }
.radial .r-title { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--display); font-size: .8rem; letter-spacing: .1em; color: var(--gold-lt); text-shadow: 0 1px 2px #000; background: rgba(0, 0, 0, .7); padding: .4rem .9rem; border-radius: 4px; border: 1px solid var(--gold-dk); }
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.radial-backdrop { position: fixed; inset: 0; z-index: 75; background: rgba(0, 0, 0, .35); }

/* ---- batalla final ---- */
.final-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.altar { position: relative; padding: 1.2rem .6rem .8rem; border-radius: 12px; background: radial-gradient(ellipse at 50% 100%, rgba(201, 164, 65, .18), transparent 70%); }
.altar::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 10px; border-radius: 50%; background: radial-gradient(ellipse, rgba(201, 164, 65, .45), transparent 70%); }
.altar h3 { text-align: center; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lt); }
.altar .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); --cw: min(150px, 30cqw); gap: .5rem; }
.altar .slot { min-height: calc(var(--cw) * .72 + 1.6rem); }
.altar .slot-hint { display: none; }
.altar .slot-label { font-size: .62rem; letter-spacing: .1em; }
.altar .total { text-align: center; margin-top: .6rem; font-family: var(--display); color: var(--parch); }
.altar .total b { font-size: 1.5rem; color: var(--gold-lt); }
.altar .opts { display: flex; justify-content: center; gap: 1rem; font-size: .85rem; color: var(--parch); margin-top: .3rem; }
.altar .opts label { display: inline-flex; gap: .3rem; align-items: center; cursor: pointer; }
.dragon-center { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.dragon-center .dragon { --cw: min(320px, 30vw, 90vw); }
.dragon-center .grand-total { font-family: var(--display); color: var(--parch); text-align: center; }
.dragon-center .grand-total b { font-size: 2rem; color: var(--gold-lt); display: block; line-height: 1; }
.final-reserve { display: flex; justify-content: center; }
.final-reserve .slot { --cw: 150px; }

/* ---- fin de partida ---- */
.gameover { text-align: center; max-width: 620px; margin: 1rem auto; overflow: clip; }
.gameover h2 { font-size: 2rem; color: #6b4b12; }
.gameover .stamp { font-size: 1.5rem; }
.gameover .score { font-size: 1.1rem; }
.gameover .score b { font-family: var(--display); font-size: 2rem; color: #6b4b12; }
.gameover .seed { color: #6a5b40; font-size: .9rem; margin-top: .4rem; }
.final-cards { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; --cw: 180px; padding: .6rem; }
.final-cards .mage.trashed { filter: grayscale(1) brightness(.5); transform: rotate(-3deg); }

/* ---- registro (cajón lateral) ---- */
.log-toggle { position: fixed; right: 0; top: 40%; z-index: 30; writing-mode: vertical-rl; transform: rotate(180deg); padding: .8rem .35rem; border-radius: 0 6px 6px 0; }
.log-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 90vw); z-index: 40; transform: translateX(105%); transition: transform .3s ease; padding: 1rem; display: flex; flex-direction: column; border-radius: 0; box-shadow: -6px 0 24px rgba(0, 0, 0, .7); }
.log-drawer.open { transform: none; }
.log-drawer h2 { display: flex; justify-content: space-between; align-items: center; }
.log-drawer .seed { margin: -.3rem 0 .5rem; }
.log-drawer .btn.ghost { color: #6b4b12; }
.log-drawer ol { flex: 1; overflow: auto; margin: 0; padding-left: 1.4rem; font-size: .88rem; line-height: 1.35; }
.log-drawer li { margin-bottom: .3rem; }
.log-drawer li:first-child { font-weight: 700; }

/* ---- modales ---- */
dialog { border: 0; padding: 0; background: transparent; max-width: min(960px, 96vw); width: 100%; max-height: 92vh; }
dialog::backdrop { background: rgba(0, 0, 0, .72); }
dialog .parchment { max-height: 92vh; overflow: auto; padding: 1.4rem 1.6rem; }
dialog .close { position: sticky; top: 0; float: right; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--gold-dk); background: var(--parch); color: #6b4b12; display: flex; align-items: center; justify-content: center; z-index: 2; }
dialog .close .ic { width: 1rem; height: 1rem; }
.rules { color: var(--ink); line-height: 1.45; }
.rules h2 { font-size: 1.4rem; }
.rules h3 { font-size: 1.15rem; margin-top: 1.2rem; }
.rules h4 { font-family: var(--display); font-size: 1rem; margin: 1rem 0 .3rem; color: #6b4b12; }
.rules table { border-collapse: collapse; margin: .6rem 0; font-size: .9rem; width: 100%; }
.rules th, .rules td { border: 1px solid var(--gold-dk); padding: .3rem .5rem; text-align: left; vertical-align: top; }
.rules th { background: rgba(201, 164, 65, .25); font-family: var(--display); }
.rules code { background: rgba(0, 0, 0, .08); padding: 0 .25em; border-radius: 3px; }
.reference { color: var(--ink); }
.reference .region { --cw: min(720px, 90vw); margin: .5rem auto 1rem; }
.reference .region .cell .s b { font-size: 1.15em; }
.reference .dragon { --cw: min(420px, 90vw); margin: .5rem auto 1rem; }
.reference ul { padding-left: 1.2rem; }
.reference li { margin: .25rem 0; }
.reference .ic { width: 1.1em; height: 1.1em; }
.ref-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .stage { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); --cw: min(220px, 46cqw); }
  .final-board { grid-template-columns: 1fr; }
  .dragon-center .dragon { --cw: min(320px, 90vw); }
  .altar .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); --cw: min(150px, 30cqw); }
}
@media (max-width: 720px) {
  .topbar { gap: .5rem; padding: .4rem .6rem; }
  .where { display: none; }
  .phases .ph { font-size: .58rem; padding: .2rem .3rem; }
  .phases .sep { width: 6px; }
  .mat { padding: .6rem .6rem 1.2rem; }
  .expedition { gap: .8rem; --cw: 110px; justify-content: center; }
  .deck-stack .inspect-hit[data-inspect="region"] { left: 36px; }
  .deck-stack .inspect-hit[data-inspect="region"] .region { --cw: 210px; }
  .deck-stack.has-region { width: calc(210px + 36px); height: calc(210px * .72); }
  .key-zone .mage { --cw: 150px; }
  .dragon-zone .dragon { --cw: 168px; }
  .small-piles { --cw: 78px; }
  .hardship-seal { right: .5rem; }
  /* la mano pasa a carrusel horizontal y las ranuras se apilan */
  .fan { gap: .6rem; padding: 1.2rem .8rem 1rem; --cw: min(240px, 78vw); }
  .fan .mage:hover, .fan .mage.selected { transform: translateY(-8px); }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); --cw: min(215px, 48cqw); gap: 1rem .6rem; }
  .slot { width: 100%; }
  .slot::before { left: calc(50% - var(--cw) / 2); right: calc(50% - var(--cw) / 2); }
  .altar .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); --cw: min(120px, 30cqw); gap: .3rem; }
  .altar .slot { width: 100%; }
  .altar .slot::before { left: 0; right: 0; }
  .cell.big { height: 200px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
  .cell .marker { animation: none; }
  .inspect-hit:hover .mage,
  .inspect-hit:hover .region,
  .inspect-hit:hover .dragon { transform: none; }
}

/* ================= TUTORIAL ================= */
/* Capa fija sobre la mesa: sombra con recortes (máscara SVG) y burbuja del guía. La capa no
   captura el ratón; el bloqueo de acciones lo hace app.js (solo las del paso actual). */
.tut-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.tut-mask { position: absolute; inset: 0; width: 100%; height: 100%; }
.tut-shade { fill: rgba(6, 4, 2, .66); }
.tut-hl { outline: 3px solid var(--gold-lt); outline-offset: 5px; border-radius: 6px; }
.tut-bubble {
  position: fixed; pointer-events: auto; width: min(400px, calc(100vw - 24px));
  padding: .8rem 1rem .9rem;
  font-size: .95rem; line-height: 1.4; box-shadow: inset 0 0 0 3px var(--parch), inset 0 0 0 4px var(--gold), 0 14px 40px rgba(0, 0, 0, .85);
}
.tut-bubble:focus { outline: none; }
.tut-bubble:focus-visible { outline: 3px solid var(--gold-lt); outline-offset: 2px; }
.tut-bubble[data-side="center"] { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tut-bubble[data-side="fixed-bottom"] { left: 12px; right: 12px; bottom: 12px; width: auto; }
.tut-bubble[data-side="fixed-top"] { left: 12px; right: 12px; top: 12px; width: auto; }
.tut-bubble[data-side^="fixed"] .tut-text { max-height: 30vh; }
.tut-bubble.collapsed h3, .tut-bubble.collapsed .tut-text, .tut-bubble.collapsed .cta, .tut-bubble.collapsed .tut-nag { display: none; }
.tut-bubble.collapsed { padding-bottom: .5rem; }
.tut-bubble.collapsed .tut-head { margin: 0; }
.btn.tut-fold { width: 1.8rem; padding: .3rem 0; font-weight: 700; margin-left: .2rem; }
.tut-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .2rem; }
.tut-count { font-family: var(--display); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #6b4b12; white-space: nowrap; }
.tut-head > span:last-child { display: inline-flex; align-items: center; gap: .15rem; white-space: nowrap; }
.tut-bubble h3 { font-size: 1.1rem; margin: .1rem 0 .3rem; }
.tut-text { max-height: min(46vh, 400px); overflow: auto; }
.tut-text p { margin: .3rem 0; }
.tut-text strong { color: #4a2f08; }
.tut-nag { margin: .4rem 0 0; color: var(--bad); font-weight: 700; font-size: .9rem; }
.tut-bubble .cta { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .7rem; }
.tut-bubble .btn.ghost { color: #6b4b12; border-color: transparent; }
.tut-summary { margin: .3rem 0 .2rem; padding-left: 1.2rem; }
.tut-summary li { margin-bottom: .35rem; }
.tut-arrow { position: absolute; width: 16px; height: 16px; background: var(--parch); border: 1px solid var(--gold); transform: rotate(45deg); display: none; }
.tut-bubble[data-side="top"] .tut-arrow { display: block; bottom: -9px; margin-left: -8px; border-top: 0; border-left: 0; }
.tut-bubble[data-side="bottom"] .tut-arrow { display: block; top: -9px; margin-left: -8px; border-bottom: 0; border-right: 0; }
.tut-bubble[data-side="left"] .tut-arrow { display: block; right: -9px; margin-top: -8px; border-bottom: 0; border-left: 0; }
.tut-bubble[data-side="right"] .tut-arrow { display: block; left: -9px; margin-top: -8px; border-top: 0; border-right: 0; }
.tut-bubble.shake { animation: tutShake .4s ease-in-out; }
@keyframes tutShake {
  0%, 100% { translate: 0 0; }
  20% { translate: -7px 0; }
  40% { translate: 6px 0; }
  60% { translate: -4px 0; }
  80% { translate: 3px 0; }
}
.tut-layer.end .tut-bubble { width: min(520px, calc(100vw - 24px)); }
/* pantalla inicial */
.tutorial-pick { margin-bottom: 1rem; }
.tutorial-pick .continue { margin: .5rem 0 .8rem; padding: .5rem .7rem; border: 1px dashed var(--gold-dk); border-radius: 4px; }
.tut-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.tut-list li { display: flex; align-items: center; gap: .7rem; padding: .35rem .5rem; border-bottom: 1px solid rgba(107, 75, 18, .2); }
.tut-list li:last-child { border-bottom: 0; }
.tut-list .tut-name { flex: 1; }
.tut-list .tut-check { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--gold); color: var(--ink); font-family: var(--display); font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none; }
.tut-list li.done .tut-check { background: var(--good); color: #fff; }
.tutorial-pick .cta { margin-top: .6rem; }
@media (max-width: 720px) {
  .tut-bubble { font-size: .9rem; padding: .6rem .8rem .7rem; }
  .tut-count { font-size: .58rem; letter-spacing: .08em; }
  .tut-bubble h3 { font-size: 1rem; }
  .fan .mage.tut-hl { transform: translateY(-8px); }
  .tut-list li { flex-wrap: wrap; }
}
.fan .mage.tut-hl { transform: translateY(-14px) scale(1.15); z-index: 12; }