/* ==========================================================================
   Midian Realms — topic-frame.css
   Tema dei contenuti che il manuale mostra dentro un iframe:
   - i topic in srcdoc senza <style> proprio (includes/wppost_helper.php,
     wppostSrcdocStileBase): Regole Base 1260, Oggetti Magici 1261, Divinità 51;
   - le pagine legacy di /manual/ che lo collegano (strutture_speciali.php).
   Nell'iframe le variabili di tema.css non arrivano: i token --mr-* sono
   copiati da lì e vanno tenuti allineati. Ogni modifica vuole un ?v= nuovo
   in wppost_helper.php e nelle pagine di /manual/ che collegano il foglio.
   ========================================================================== */

:root {
  --mr-fascia: #1b1612;
  --mr-carta: #18130f;
  --mr-profondo: #0f0c09;
  --mr-campo: #110d0a;
  --mr-linea: #2e251d;
  --mr-bordo: #3d3126;
  --mr-bordo-campo: #4a3b2c;
  --mr-oro: #d6b979;
  --mr-oro-chiaro: #e8cf97;
  --mr-oro-scuro: #8a6f44;
  --mr-oro-profondo: #6e5836;
  --mr-titolo: #f3ead9;
  --mr-testo: #efe6d6;
  --mr-corpo: #dccfb8;
  --mr-tenue: #bdae96;
  --mr-nota: #a3947c;
  --mr-accento: #9e2a17;
  --mr-accento-hover: #b3361f;
  --mr-su-accento: #fff4e0;
  --mr-rosso-chiaro: #e0826f;
  --mr-verde-chiaro: #8fc28a;
  --mr-viola-chiaro: #b9a3d6;

  --mr-font-titoli: 'Cinzel', Georgia, serif;
  --mr-font-testo: 'EB Garamond', Georgia, serif;
}

/* ==========================================================================
   Base: stessa tipografia di .mr-articolo__corpo (tema.css)
   ========================================================================== */

body {
  margin: 0;
  background: transparent;
  color: var(--mr-corpo);
  font-family: var(--mr-font-testo);
  font-size: 19px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--mr-font-titoli);
  font-weight: 600;
  line-height: 1.25;
  color: var(--mr-titolo);
}

h1,
h2 {
  margin: 44px 0 16px;
  font-size: 26px;
}

h3 {
  margin: 32px 0 12px;
  font-size: 20px;
  color: var(--mr-oro-chiaro);
}

h4 {
  margin: 24px 0 10px;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--mr-oro);
}

h5 {
  margin: 20px 0 8px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--mr-tenue);
}

p {
  margin: 0 0 16px;
}

ul,
ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

li {
  margin-bottom: 6px;
}

li::marker {
  color: var(--mr-oro-scuro);
}

li > ul,
li > ol {
  margin: 6px 0 0;
}

strong {
  font-weight: 600;
  color: var(--mr-titolo);
}

/* <b> solo peso, niente colore: i topic lo usano dentro span con colore inline da rispettare (Divinità) */
b {
  font-weight: 600;
}

em {
  font-style: italic;
  color: var(--mr-oro-chiaro);
}

a {
  color: var(--mr-oro);
}

a:hover {
  color: var(--mr-oro-chiaro);
}

img {
  max-width: 100%;
  height: auto;
}

table {
  width: 100%;
  margin: 0 0 20px;
  border-collapse: collapse;
  font-size: 17px;
}

th,
td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--mr-linea);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--mr-fascia);
  border-bottom-color: var(--mr-bordo);
  font-weight: 600;
  color: var(--mr-titolo);
}

hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--mr-linea);
}

footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--mr-linea);
  text-align: center;
  font-style: italic;
  font-size: 16px;
  color: var(--mr-nota);
}

:focus-visible {
  outline: 2px solid var(--mr-oro);
  outline-offset: 2px;
}

/* ==========================================================================
   Cursori della land (CLAUDE.md §6) — obbligatori, unica eccezione a !important.
   Percorso relativo a questo foglio (/css/), come in tema.css.
   ========================================================================== */

html,
body {
  cursor: url("../midian/midian/midian/Arrowb.cur"), auto !important;
}

a,
button,
input,
select,
textarea,
label,
summary,
.rule,
.close-btn {
  cursor: url("../midian/midian/midian/Arrowc.cur"), pointer !important;
}

/* Il dettaglio aperto di una regola è testo da leggere, non un comando */
.rule.active .window {
  cursor: url("../midian/midian/midian/Arrowb.cur"), auto !important;
}

.rule.active .window .close-btn {
  cursor: url("../midian/midian/midian/Arrowc.cur"), pointer !important;
}

/* ==========================================================================
   Schede (topic 1260 e 1261): come le voci del menu del sito
   ========================================================================== */

.tab {
  margin: 0 0 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 26px;
  border-bottom: 1px solid var(--mr-linea);
}

.tab button {
  margin: 0 0 -1px;
  padding: 10px 0 9px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--mr-font-titoli);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mr-tenue);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.tab button:hover {
  color: var(--mr-oro-chiaro);
}

.tab button.active {
  font-weight: 700;
  color: var(--mr-oro-chiaro);
  border-bottom-color: var(--mr-oro);
}

.tabcontent {
  display: none;
}

.tabcontent.active {
  display: block;
}

/* Il primo titolo di una scheda non ha bisogno dello stacco dall'alto */
.tabcontent > :first-child,
.tabcontent > :first-child > :first-child {
  margin-top: 0;
}

/* Contenitori delle schede: la card dell'articolo li inquadra già */
.section,
section {
  margin: 0 0 32px;
}

/* ==========================================================================
   Riquadri: sul modello di .mr-riquadro (tema.css)
   ========================================================================== */

.quick-ref,
.calculator,
.status-box,
.category,
.highlight,
.note,
.important {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--mr-fascia);
  border: 1px solid var(--mr-linea);
  border-left: 3px solid var(--mr-oro-scuro);
  border-radius: 0 4px 4px 0;
}

.highlight {
  border-left-color: var(--mr-accento);
}

.note,
.calculator {
  border-left-color: var(--mr-verde-chiaro);
}

.important,
.status-box {
  border-left-color: var(--mr-rosso-chiaro);
}

.quick-ref > :first-child,
.calculator > :first-child,
.status-box > :first-child,
.category > :first-child,
.highlight > :first-child,
.note > :first-child,
.important > :first-child {
  margin-top: 0;
}

.quick-ref > :last-child,
.calculator > :last-child,
.status-box > :last-child,
.category > :last-child,
.highlight > :last-child,
.note > :last-child,
.important > :last-child {
  margin-bottom: 0;
}

.category h3 {
  font-size: 18px;
}

/* Espressioni di dado: pastiglia scura, cifre allineate */
.dice {
  padding: 1px 7px;
  background: var(--mr-campo);
  border: 1px solid var(--mr-bordo-campo);
  border-radius: 3px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--mr-oro-chiaro);
}

.status-name {
  margin-bottom: 4px;
  display: block;
  font-weight: 600;
  color: var(--mr-rosso-chiaro);
}

.status-effect {
  position: relative;
  padding-left: 20px;
  display: block;
}

.status-effect::before {
  content: "\27BA";
  position: absolute;
  left: 0;
  color: var(--mr-oro-scuro);
}

/* ==========================================================================
   Regole a card (topic 1260): elenco per sezione, dettaglio in linea.
   Il markup resta quello del topic (.rule > .icon + .desc + .modal > .window):
   lo script del topic mette .active sulla regola cliccata e la toglie con ×.
   Il dettaglio si apre sotto il titolo della card, a tutta riga, invece che
   in una finestra fissa: dentro un iframe alto quanto il contenuto la
   finestra fissa si apriva in cima al frame, fuori schermo.
   ========================================================================== */

section {
  --accento-sezione: var(--mr-oro-scuro);
}

section#movement {
  --accento-sezione: var(--mr-oro-scuro);
}

section#actions {
  --accento-sezione: var(--mr-oro);
}

section#bonus_actions {
  --accento-sezione: var(--mr-viola-chiaro);
}

section#reactions {
  --accento-sezione: var(--mr-verde-chiaro);
}

section#conditions {
  --accento-sezione: var(--mr-rosso-chiaro);
}

section#hazards {
  --accento-sezione: var(--mr-accento);
}

section#environment {
  --accento-sezione: var(--mr-tenue);
}

.list {
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rule {
  position: relative;
  box-sizing: border-box;
  flex: 1 0 15em;
  padding: 10px 12px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;
  background: var(--mr-fascia);
  border: 1px solid var(--mr-linea);
  border-left: 3px solid var(--accento-sezione, var(--mr-oro-scuro));
  border-radius: 0 4px 4px 0;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rule:hover {
  background: rgba(214, 185, 121, 0.06);
  border-color: var(--mr-bordo);
  border-left-color: var(--accento-sezione, var(--mr-oro-scuro));
}

.rule .icon {
  flex: 0 0 40px;
}

/* Icone game-icons (glifo bianco su quadrato nero): virate al tono della carta.
   Il fondo nero serve ai PNG a fondo trasparente (stopwatch.png) per avere lo stesso quadrato degli SVG. */
.rule .icon img {
  width: 40px;
  height: 40px;
  display: block;
  background: #000;
  border-radius: 4px;
  filter: sepia(0.55) saturate(0.8);
}

.rule .desc {
  flex: 1;
  min-width: 0;
}

.rule .desc h2 {
  margin: 1px 0 2px;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--mr-titolo);
}

.rule .desc p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--mr-tenue);
}

.rule .modal {
  display: none;
}

.rule.active {
  flex-basis: 100%;
  flex-wrap: wrap;
  background: var(--mr-fascia);
  border-color: var(--mr-bordo);
  border-left-color: var(--accento-sezione, var(--mr-oro-scuro));
}

.rule.active .modal {
  position: static;
  flex: 1 0 100%;
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
  background: none;
}

.rule .window {
  position: relative;
  box-sizing: border-box;
  margin: 2px 0 0;
  padding: 14px 40px 2px 0;
  border-top: 1px solid var(--mr-linea);
}

/* Il titolo della finestra ripete quello della card, già visibile sopra */
.rule .window > h1 {
  display: none;
}

.rule .pane p {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.55;
}

.rule .pane p.icon {
  text-align: center;
}

.close-btn {
  position: absolute;
  top: 6px;
  right: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 24px;
  line-height: 1;
  color: var(--mr-tenue);
}

.close-btn:hover {
  background: rgba(214, 185, 121, 0.1);
  color: var(--mr-oro-chiaro);
}

/* ==========================================================================
   Pulsante "torna su" (topic 1261): nell'iframe ad altezza automatica non
   scorre nulla e lo script non lo mostra mai; se comparisse, nel tema.
   ========================================================================== */

.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  display: none;
  background: var(--mr-accento);
  border: 0;
  border-radius: 50%;
  font-size: 20px;
  color: var(--mr-su-accento);
}

.scroll-top:hover {
  background: var(--mr-accento-hover);
}

/* ==========================================================================
   Telefoni
   ========================================================================== */

@media (max-width: 600px) {
  body {
    font-size: 18px;
  }

  h1,
  h2 {
    font-size: 22px;
  }

  .tab {
    gap: 0 18px;
  }

  .rule {
    flex-basis: 100%;
  }

  table {
    font-size: 16px;
  }

  th,
  td {
    padding: 7px 8px;
  }
}