@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=Alegreya:wght@400;700&display=swap');

:root { --rock: #2a2420; --rock-light: #3d342d; --gold: #e8b923; --gold-dark: #b8860b; --text: #efe6d8; --lamp: #ffcf66; }
* { box-sizing: border-box; }
body {
  margin: 0; padding: 24px 16px 48px; color: var(--text);
  font: 17px/1.6 'Alegreya', Georgia, serif;
  background: #15110e;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(232,185,35,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(232,185,35,.08) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 0%, rgba(255,207,102,.18), transparent 60%),
    repeating-linear-gradient(115deg, #1b1612 0 30px, #1f1915 30px 60px);
  background-size: 180px 180px, 240px 240px, 100% 100%, auto;
}
.sheet {
  max-width: 820px; margin: 0 auto; padding: 36px 44px;
  background: linear-gradient(180deg, var(--rock-light), var(--rock));
  border: 3px solid #5b4a3b; border-radius: 6px;
  box-shadow: inset 0 0 60px rgba(0,0,0,.6), 0 10px 40px rgba(0,0,0,.7);
  position: relative;
}
.sheet::before, .sheet::after {
  content: ""; position: absolute; top: -3px; bottom: -3px; width: 14px;
  background: repeating-linear-gradient(180deg, #7a5530 0 40px, #5e4024 40px 44px);
}
.sheet::before { left: -14px; }
.sheet::after { right: -14px; }

header { text-align: center; border-bottom: 2px solid var(--gold-dark); padding-bottom: 14px; margin-bottom: 20px; }
.sub { margin: 0; font-size: .9rem; letter-spacing: 5px; color: var(--lamp); text-transform: uppercase; }
h1 { font: 4rem/1 'Pirata One', serif; margin: 8px 0; color: var(--gold); text-shadow: 0 0 18px rgba(232,185,35,.45), 2px 2px 0 #000; }
.meta { margin: 6px 0 0; font-size: .95rem; }
.intro { font-style: italic; text-align: center; }

h2 { font: 1.8rem 'Pirata One', serif; color: var(--gold); margin: 30px 0 8px; display: flex; gap: 12px; align-items: center; }
h2::before { content: "⛏"; font-size: 1.1rem; }
h2::after { content: ""; flex: 1; border-top: 1px dashed var(--gold-dark); }
h3 { color: var(--lamp); margin: 18px 0 4px; font-size: 1.15rem; }
b { color: var(--gold); }
li { margin: 4px 0; }

.box { border-left: 4px solid var(--gold); background: rgba(0,0,0,.25); padding: 10px 16px; margin: 14px 0; }
table.roles { width: 100%; border-collapse: collapse; text-align: center; font-size: .95rem; margin: 8px 0; }
.roles th, .roles td { border: 1px solid #5b4a3b; padding: 5px; }
.roles th { background: #000; color: var(--gold); font-weight: 700; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.card { background: rgba(0,0,0,.3); border: 2px solid #5b4a3b; border-radius: 8px; padding: 10px 14px; }
.card h3 { margin-top: 0; }

a { color: var(--lamp); }
.topnav a, .official a {
  display: inline-block; text-decoration: none; padding: 6px 14px; border: 2px solid var(--gold); color: var(--gold); border-radius: 4px; font-weight: 700;
}
.topnav a:hover, .official a:hover { background: var(--gold); color: #000; }
.topnav { max-width: 820px; margin: 0 auto 16px; }
.official { text-align: center; margin: 32px 0 0; }
footer { text-align: center; font-size: .85rem; margin-top: 24px; border-top: 2px solid var(--gold-dark); padding-top: 12px; }

@media (max-width: 600px) {
  .sheet { padding: 24px 18px; }
  .sheet::before, .sheet::after { display: none; }
  h1 { font-size: 2.8rem; }
}