/* dice.onl article layout v7 - varied articles, compact images, player guides, centered roll CTA */
.dice-article{box-sizing:border-box;overflow:visible}
.dice-article:after{content:"";display:block;clear:both}

.dice-article.story-page{
  --ink:#083442;--paper:#E8E3D1;--cream:#f7f3e7;--line:#A9ADB6;--muted:#5b6a6a;
  color:var(--ink);width:94%;max-width:748px;margin:10px auto 18px;padding:14px;
  border:1px solid var(--line);border-radius:12px;background:rgba(247,243,231,.16);text-align:left;
}
.dice-article.story-page h2{margin:.42em 0 .25em;line-height:1.16;text-align:left}
.dice-article.story-page h3{margin:1em 0 .35em;line-height:1.25;text-align:left}
.dice-article.story-page p{line-height:1.58;margin:.58em 0;text-align:left}
.dice-article.story-page ul{line-height:1.5;padding-left:1.25em;text-align:left}
.dice-article.story-page .lede{font-size:1.08rem;line-height:1.52}
.dice-article.story-page .kicker{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.dice-article.story-page .tiny-note{font-size:.9rem;color:var(--muted)}

.dice-article figure.float-figure,.dice-article figure.mini-figure{float:right;text-align:center;background:var(--cream);border:1px solid rgba(8,52,66,.13);border-radius:10px;padding:6px;box-sizing:border-box}
.dice-article figure.float-figure{width:min(38%,270px);margin:4px 0 12px 16px}
.dice-article figure.mini-figure{width:min(29%,205px);margin:4px 0 10px 14px}
.dice-article figure img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;margin:0 auto;border-radius:8px}
.dice-article figcaption{font-size:.78rem;line-height:1.3;color:var(--muted);margin-top:5px;text-align:center}

.badge-row,.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.badge,.chip{display:inline-block;background:var(--cream);border:1px solid rgba(8,52,66,.18);border-radius:999px;padding:5px 9px;font-size:.88rem;line-height:1.15}
.badge strong,.chip strong{font-weight:700}

.callout,.memo,.field-note,.prob-card,.noodle-note,.dialogue-box{
  margin:12px 0;padding:10px 12px;border-radius:10px;background:var(--cream);border:1px solid rgba(8,52,66,.17)
}
.field-note{border-style:dashed}
.memo{border-left:5px solid #b79a62}
.prob-card{border-left:5px solid #6a8f7b}
.noodle-note{border-left:5px solid #d47c4a}
.dialogue-box{border-left:5px solid #7d6f9b}
.callout > :first-child,.memo > :first-child,.field-note > :first-child,.prob-card > :first-child,.noodle-note > :first-child,.dialogue-box > :first-child{margin-top:0}
.callout > :last-child,.memo > :last-child,.field-note > :last-child,.prob-card > :last-child,.noodle-note > :last-child,.dialogue-box > :last-child{margin-bottom:0}

.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:8px;margin:12px 0;clear:both}
.stat-strip > div{background:var(--cream);border:1px solid rgba(8,52,66,.14);border-radius:10px;padding:9px;text-align:center}
.stat-strip strong{display:block;font-size:1.06rem;margin-bottom:2px}
.stat-strip span{font-size:.82rem;color:var(--muted)}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px;margin:12px 0}
.card-grid > div{background:var(--cream);border:1px solid rgba(8,52,66,.14);border-radius:10px;padding:10px}
.card-grid h3,.card-grid h4{margin:0 0 4px;font-size:1rem}
.card-grid p{margin:.2em 0;font-size:.94rem;line-height:1.45}

.number-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0;max-width:330px}
.number-grid span{display:flex;align-items:center;justify-content:center;min-height:44px;background:var(--cream);border:1px solid rgba(8,52,66,.14);border-radius:9px;font-weight:700}

.clock-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:11px 0}
.clock-grid span{padding:6px 2px;text-align:center;background:var(--cream);border:1px solid rgba(8,52,66,.12);border-radius:7px;font-size:.8rem}

.scale-row{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:10px 0}
.scale-row span{padding:6px 0;text-align:center;background:var(--cream);border:1px solid rgba(8,52,66,.12);border-radius:6px;font-size:.78rem}

.roll-visual{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.roll-visual span{width:38px;height:38px;border-radius:9px;background:var(--cream);border:1px solid rgba(8,52,66,.16);display:flex;align-items:center;justify-content:center;font-weight:700}

.mini-table{width:100%;border-collapse:separate;border-spacing:0;margin:12px 0;font-size:.92rem;overflow:hidden;border:1px solid rgba(8,52,66,.16);border-radius:10px;background:var(--cream)}
.mini-table th,.mini-table td{padding:7px 9px;border-bottom:1px solid rgba(8,52,66,.11);text-align:left}
.mini-table tr:last-child th,.mini-table tr:last-child td{border-bottom:0}
.mini-table th{width:32%;font-weight:700}

.quote-note{font-style:italic;margin:12px 0;padding:8px 11px;border-left:3px solid var(--line);color:#334f56}
.links{clear:both;padding-top:4px}

/* Old hand-written article images stay visible but stop dominating the page. */
#d-main.dice-article:not(.story-page)>figure:first-of-type{
  float:right;width:min(30%,220px);margin:4px 0 12px 15px;padding:6px;background:#f7f3e7;
  border:1px solid rgba(8,52,66,.14);border-radius:10px;box-sizing:border-box;text-align:center
}
#d-main.dice-article:not(.story-page)>figure:first-of-type img{display:block;width:100%;max-height:235px;object-fit:contain;margin:0 auto;border-radius:8px}
#d-main.dice-article:not(.story-page)>figure:first-of-type figcaption{font-size:.78rem;line-height:1.3;color:#5b6a6a;margin-top:5px}

/* Existing D12 cards */
.dice-article .other-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:9px;margin:12px 0}
.dice-article .other-tools>a.card{display:block;color:#083442;text-decoration:none;background:#f7f3e7;border:1px solid rgba(8,52,66,.14);border-radius:10px;padding:10px;box-sizing:border-box}
.dice-article .other-tools>a.card:hover{background:#fff9ee}
.dice-article .other-tools>a.card h3{margin:0 0 .3em}
.dice-article .other-tools>a.card p{margin:.25em 0}

.archive-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:13px 0;clear:both}
.archive-strip figure{margin:0;padding:6px;background:#f7f3e7;border:1px solid rgba(8,52,66,.14);border-radius:10px;text-align:center}
.archive-strip img{display:block;width:100%;height:150px;object-fit:cover;border-radius:7px}
.archive-strip figcaption{font-size:.77rem;color:#5b6a6a;margin-top:5px}

.dice-article .article-actions{clear:both;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin:22px 0 3px;padding-top:15px;border-top:1px solid #A9ADB6}
.dice-article .article-actions a{display:inline-block;max-width:180px;padding:7px 10px;color:#083442;text-align:center;text-decoration:none;font-size:.9rem;line-height:1.2}
.dice-article .article-actions a:first-child{justify-self:start}
.dice-article .article-actions a:last-child{justify-self:end}
.dice-article .article-actions .roll-again{justify-self:center;min-width:168px;max-width:none;padding:10px 18px;border:1px solid #083442;border-radius:10px;background:#083442;color:#f7f3e7!important;font:700 .96rem/1.2 inherit;text-align:center;text-decoration:none;box-shadow:0 3px 0 rgba(8,52,66,.20);cursor:pointer}
.dice-article .article-actions .roll-again:hover{background:#164f5c;transform:translateY(-1px)}
.dice-article .article-actions .roll-again:active{transform:translateY(2px);box-shadow:none}
/* Legacy article CTA gets the same visual treatment. */
.dice-article .cta-buttons,.dice-article .standalone-roll-cta{text-align:center;clear:both;margin:20px auto 8px}
.dice-article .cta-buttons a,.dice-article .standalone-roll-cta a{display:inline-block;min-width:168px;padding:10px 18px;border:1px solid #083442;border-radius:10px;background:#083442;color:#f7f3e7!important;font-weight:700;text-decoration:none;box-shadow:0 3px 0 rgba(8,52,66,.20)}
.dice-article .cta-buttons a:hover,.dice-article .standalone-roll-cta a:hover{background:#164f5c}

@media(max-width:620px){
  .dice-article.story-page{width:96%;padding:11px}
  .dice-article figure.float-figure,.dice-article figure.mini-figure,#d-main.dice-article:not(.story-page)>figure:first-of-type{float:none;width:min(76%,270px);margin:12px auto}
  .clock-grid{grid-template-columns:repeat(4,1fr)}
  .scale-row{grid-template-columns:repeat(5,1fr)}
  .archive-strip{grid-template-columns:1fr}
  .archive-strip img{height:auto;max-height:240px;object-fit:contain}
  .dice-article .article-actions{grid-template-columns:1fr;gap:7px}.dice-article .article-actions a:first-child,.dice-article .article-actions a:last-child,.dice-article .article-actions .roll-again{justify-self:center}.dice-article .article-actions .roll-again{grid-row:1;min-width:180px}
}

/* v5: distinct cartoon illustrations instead of templated SVG cards */
.dice-article figure.float-figure,.dice-article figure.mini-figure{box-shadow:0 4px 12px rgba(8,52,66,.07);overflow:hidden;transition:transform .15s ease}
.dice-article figure.float-figure img,.dice-article figure.mini-figure img{aspect-ratio:2.06/1;object-fit:cover;background:#e9e3d2}
.dice-article figure.float-figure:hover,.dice-article figure.mini-figure:hover{transform:rotate(.25deg)}

/* Practical player guide blocks */
.dice-article .play-guide{clear:both;margin:20px 0 4px;padding:14px;border:1px solid rgba(8,52,66,.18);border-radius:13px;background:#f7f3e7}
.dice-article .play-guide .guide-kicker{font-size:.73rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#53686d;margin-bottom:3px}
.dice-article .play-guide h3{margin:.12em 0 .45em;font-style:normal;font-size:1.15rem;text-align:left;color:#083442}
.dice-article .play-guide p{margin:.45em 0;line-height:1.5}
.dice-article .play-guide .where-used{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;list-style:none;padding:0;margin:10px 0 12px}
.dice-article .play-guide .where-used li{margin:0;padding:8px 9px;border:1px solid rgba(8,52,66,.11);border-radius:9px;background:#fff9ee;font-size:.9rem;line-height:1.3}
.dice-article .play-guide .roll-label{margin-top:12px;font-weight:800;font-size:.86rem;color:#405b61}
.dice-article .roll-pills{display:flex;flex-wrap:wrap;gap:7px;margin:7px 0 2px}
.dice-article .roll-pills a{display:inline-block;padding:7px 10px;border:1px solid rgba(8,52,66,.28);border-radius:9px;background:#fff;color:#083442!important;text-decoration:none!important;font-weight:700;font-size:.88rem;line-height:1.15}
.dice-article .roll-pills a:hover{background:#083442;color:#f7f3e7!important}
.dice-article .prob-note{margin:10px 0 0;padding:9px 10px;border-left:3px solid #083442;background:#ece7d7;font-size:.88rem;line-height:1.4}
@media(max-width:560px){.dice-article .play-guide .where-used{grid-template-columns:1fr}.dice-article .roll-pills a{flex:1 1 120px;text-align:center}}