/* AleatoryCGD: aleatory poetry + chaos. Cream paper, typewriter marks, colours drawn by chance (chance.js). */
:root {
  --bg: #f7f1e3;
  --ink: #1b1b1b;
  --muted: #6e665a;
  --line: #ddd2bb;
  --c1: #e4572e;      /* overwritten at random by chance.js */
  --c2: #29335c;
  --c3: #f3a712;
  --serif: "DM Serif Display", Georgia, serif;
  --type: "Courier Prime", "Courier New", monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #17140f; --ink: #efe7d6; --muted: #a59a86; --line: #332d24; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--type); line-height: 1.5; }
a { color: inherit; }

.top { position: absolute; inset: 0 0 auto 0; z-index: 3; display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(16px, 4vw, 48px); }
.mark { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.35rem; text-decoration: none;
  background: var(--bg); padding: 4px 10px 4px 4px; }
.mark span { font-family: var(--type); font-size: .85rem; color: var(--c1); }
.back { font-size: .8rem; text-decoration: none; background: var(--bg); padding: 4px 8px; }

.stage { position: relative; height: 100svh; min-height: 520px; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; cursor: pointer; }
.title { position: absolute; left: clamp(16px, 4vw, 48px); bottom: clamp(28px, 6vh, 64px); z-index: 2;
  background: var(--bg); padding: 14px 22px 16px; box-shadow: 6px 6px 0 var(--ink); }
#title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 10vw, 7rem); line-height: 1; }
#title span { display: inline-block; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), color .5s; }
.rule { font-size: .78rem; color: var(--muted); margin-top: 6px; }
.roll { position: absolute; right: clamp(16px, 4vw, 48px); bottom: clamp(28px, 6vh, 64px); z-index: 2;
  width: 64px; height: 64px; font-size: 2.6rem; line-height: 1; background: var(--bg); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; transition: transform .4s; }
.roll:hover { transform: rotate(-14deg); }
.roll:active { transform: rotate(200deg) scale(.9); }

.band { position: relative; height: clamp(180px, 34vh, 340px); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
#map { width: 100%; height: 100%; display: block; }
.tag { position: absolute; right: 16px; top: 12px; font-size: .8rem; background: var(--bg); padding: 2px 8px; }

.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 28px;
  padding: 44px clamp(16px, 4vw, 48px); }
.tile { display: flex; flex-direction: column; gap: 6px; transform: rotate(var(--tilt, 0deg)); transition: transform .5s; }
.tile:hover { transform: rotate(0deg); }
.mini { width: 100%; aspect-ratio: 16 / 9; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--c1); background: var(--bg); margin-bottom: 10px; }
.k { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.t { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; }

.foot { padding: 24px clamp(16px, 4vw, 48px); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: .8rem; color: var(--muted); border-top: 1px dashed var(--line); }
.sibs { display: flex; gap: 16px; flex-wrap: wrap; }
.foot a { text-decoration: none; border-bottom: 1px dashed var(--muted); }