/* The Workshop Activity: parchment and brass, matched to the drawn sheet and the season report. */
@font-face { font-family: "Cinzel"; src: url("../fonts/Cinzel-Bold.ttf") format("truetype"); font-weight: 700; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-Bold.ttf") format("truetype"); font-weight: 700; }

:root {
  --ink: #2a1e12; --ink-soft: #604a32; --ink-faint: #8a7350;
  --paper: #f3e6c8; --card: #faf1dc; --track: #e8dbbe; --line: #d9c6a0;
  --brass: #b08d57; --brass-dark: #7a5a2e; --brass-light: #f3dda6; --gold: #e0b13b;
  --str: #e24b4a; --dex: #639922; --con: #d85a30; --int: #378add; --wis: #7f77dd; --cha: #d4537e; --mixed: #8a7350;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Alegreya Sans", system-ui, sans-serif; color: var(--ink); background: var(--paper);
  background-image: radial-gradient(ellipse at 50% 0%, #f8eed6 0%, var(--paper) 55%, #e6d2a8 100%);
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: "Cinzel", serif; font-weight: 700; margin: 0; letter-spacing: .02em; }
#app { min-height: 100%; display: flex; flex-direction: column; }

/* Splash and messages */
.splash { margin: auto; text-align: center; color: var(--ink-soft); padding: 32px; }
.splash p { font-size: 18px; margin: 14px 0 0; }
.splash .hint { font-size: 15px; color: var(--ink-faint); margin-top: 6px; }
.cog { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; border: 8px dotted var(--brass);
  animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cog { animation: none; } .pin.active .ring { animation: none; } }

/* Header */
header { display: flex; align-items: center; gap: 14px; padding: 16px 18px 12px;
  border-bottom: 2px solid var(--brass); background: linear-gradient(#f8eed6, #f1e2c0); }
.medal { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #4a3622, #2c1f12); border: 4px solid var(--brass);
  box-shadow: 0 0 0 2px var(--ink), 0 3px 0 #c8b48c; color: var(--gold); text-align: center; }
.medal small { display: block; font: 700 9px "Cinzel", serif; color: var(--brass-light); letter-spacing: .1em; }
.medal b { display: block; font: 700 28px/1 "Cinzel", serif; }
.who { min-width: 0; flex: 1; }
.who h1 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who p { margin: 2px 0 8px; color: var(--ink-soft); font-size: 15px; }
.bar { position: relative; height: 18px; border-radius: 9px; background: #46341f; border: 2px solid var(--ink); overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#f6d678, var(--gold) 55%); border-radius: 7px; }
.bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px "Alegreya Sans";
  color: #fff8e6; text-shadow: 0 0 3px var(--ink), 0 0 3px var(--ink); }

/* Tabs (narrow screens) */
nav.tabs { display: flex; gap: 6px; padding: 10px 14px 0; }
nav.tabs button { flex: 1; padding: 10px 0 9px; border: 2px solid var(--brass); border-bottom: none;
  border-radius: 12px 12px 0 0; background: #ead9b4; font: 700 15px "Cinzel", serif; color: var(--ink-soft); cursor: pointer; }
nav.tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); }
.panes { flex: 1; display: grid; grid-template-columns: 1fr; }
.pane { padding: 16px 14px 28px; background: var(--card); border-top: 2px solid var(--brass); min-width: 0; }
.pane[hidden] { display: none; }
@media (min-width: 820px) {
  nav.tabs { display: none; }
  .panes { grid-template-columns: minmax(360px, 5fr) 7fr; }
  .pane[hidden] { display: block; }
  .pane + .pane { border-left: 2px solid var(--line); }
  .pane { border-top: none; }
}

section { margin-bottom: 22px; }
section > h2 { font-size: 14px; color: var(--ink-soft); margin: 0 0 10px; letter-spacing: .08em; }

/* Stat cards */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { position: relative; border: 2px solid var(--ink); border-radius: var(--radius); background: #fffaf0;
  padding: 12px 6px 10px; text-align: center; cursor: pointer; box-shadow: 0 3px 0 #d6c4a0; }
.stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; border-radius: 11px 11px 0 0;
  background: var(--c); }
.stat img { width: 40px; height: 40px; display: block; margin: 2px auto 2px; }
.stat .abbr { font: 700 14px "Cinzel", serif; }
.stat .score { font: 700 30px/1.05 "Cinzel", serif; }
.stat .mod { display: inline-block; margin-top: 4px; padding: 1px 10px; border-radius: 10px; background: var(--c);
  color: #fff; font-weight: 700; font-size: 14px; border: 1.5px solid var(--ink); }
.stat .label { display: block; color: var(--ink-faint); font-size: 12.5px; margin-top: 5px; line-height: 1.15; }
.stat[aria-pressed="true"] { outline: 3px solid var(--c); outline-offset: 2px; }

/* Season bars: one labeled row per stat, this week as the solid end */
.rows { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 52px 1fr 64px; align-items: center; gap: 8px; }
.row .name { font: 700 13px "Cinzel", serif; }
.row .track { position: relative; height: 18px; border-radius: 4px; background: var(--track); overflow: hidden; }
.row .earlier, .row .week { position: absolute; top: 0; bottom: 0; }
.row .earlier { left: 0; background: color-mix(in srgb, var(--c) 38%, var(--card)); }
.row .week { background: var(--c); border-left: 2px solid var(--card); border-radius: 0 4px 4px 0; }
.row .val { font-weight: 700; font-size: 15px; }
.row .val small { color: var(--ink-faint); font-weight: 400; margin-left: 3px; }
.key { display: flex; gap: 14px; color: var(--ink-faint); font-size: 13px; margin-top: 8px; }
.key i { display: inline-block; width: 18px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }
.quiet { color: var(--ink-faint); font-size: 15px; }

/* Recent XP */
ul.log { list-style: none; padding: 0; margin: 0; }
ul.log li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1.5px solid var(--track); }
ul.log img { width: 26px; height: 26px; }
ul.log .t { min-width: 0; }
ul.log .t b { display: block; font-weight: 400; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.log .t small { color: var(--ink-faint); font-size: 13px; }
ul.log .xp { font-weight: 700; }
.tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.tile { flex: 1 1 120px; border: 2px solid var(--ink); border-radius: var(--radius); background: #fffaf0; padding: 10px 12px; }
.tile b { display: block; font: 700 24px "Cinzel", serif; }
.tile span { color: var(--ink-soft); font-size: 14px; }

/* The quest map */
.mapwrap { position: relative; border: 3px solid var(--ink); border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 4px var(--brass), 0 6px 0 4px #c8b48c; background: #efdfb9; }
.mapscroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.mapwrap svg { display: block; width: 100%; height: auto; }
@media (max-width: 819px) { .mapwrap svg { min-width: 760px; } }
.pin { cursor: pointer; }
.pin .ring { fill: none; stroke-width: 5; }
.pin.active .ring { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { stroke-width: 9; opacity: .55; } }
.pin text { font: 700 15px "Alegreya Sans"; fill: var(--ink); paint-order: stroke; stroke: #f6ead0; stroke-width: 5px; }
.pin:focus { outline: none; }
.pin[aria-pressed="true"] .ring { stroke-width: 11; }
.pin[aria-pressed="true"] > circle:nth-child(2) { stroke-width: 5; }
.pin:focus-visible .ring { stroke-dasharray: 6 5; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-soft); font-size: 14px; margin: 12px 2px 0; }
.legend img { width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; }

/* Quest detail */
.detail { margin-top: 14px; border: 2px solid var(--ink); border-radius: var(--radius); background: #fffaf0;
  padding: 14px 16px; box-shadow: 0 3px 0 #d6c4a0; }
.detail h3 { font-size: 18px; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 12px;
  border: 1.5px solid var(--ink); background: var(--card); font-size: 14px; font-weight: 700; }
.chip img { width: 18px; height: 18px; }
.chip.stat { background: var(--c); color: #fff; }
.chip.small { padding: 2px 9px; font-size: 13px; line-height: 1.25; letter-spacing: .03em; }
.detail p { margin: 8px 0 0; color: var(--ink-soft); }
.board { list-style: none; margin: 8px 0 0; padding: 0; }
.board li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1.5px solid var(--track); }
.board li.today b::after { content: "today"; margin-left: 8px; font-size: 12px; padding: 1px 7px; border-radius: 8px;
  background: var(--gold); color: var(--ink); vertical-align: 1px; }
.foot { color: var(--ink-faint); font-size: 13px; text-align: center; padding: 6px 0 2px; }