@charset "utf-8";
/* Medieval: a castle wall, parchment, pennants, a knight riding by and a dragon far off. */
:root[data-theme="medieval"] {
  --bg: #45444a; --panel: #f3e6c4; --ink: #3a2412; --muted: #7a6142; --line: #d7c08f;
  --accent: #8e1b1b; --accent-ink: #fff3d6; --mover: #fbf0d0; --die: #fbf3dd; --die-edge: #8b6b2e;
  --pip: #8e1b1b; --held: #d4a017; --field: #fff8e6; --good: #2e6b2e; --bad: #8e1b1b;
  --title: #f3d27a; --title-font: "MedievalSharp", Georgia, serif; --name-font: "MedievalSharp", Georgia, serif;
  --page-ink: #f3e6c4; --page-muted: #d8d0bf; --radius: 6px; --mark: "⚔️";
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Crect width='96' height='48' fill='%2347464c'/%3E%3Cpath d='M0 23.5H96M0 47.5H96M47.5 0V24M95.5 24V48' stroke='%2333323a' stroke-width='2'/%3E%3C/svg%3E");
  --pattern-size: 96px 48px;
}
[data-theme="medieval"] body { padding-top: 40px; }
[data-theme="medieval"] h1 { font-size: 44px; text-shadow: 2px 2px 0 #2a1a0c, 0 0 14px rgba(243, 210, 122, .35); }
[data-theme="medieval"] .card { box-shadow: inset 0 0 26px rgba(120, 80, 20, .35), 0 3px 8px rgba(0, 0, 0, .35); border-color: #b8975a; }
[data-theme="medieval"] .tray-head .name { font-size: 19px; }
[data-theme="medieval"] .tray-head .total { font-size: 26px; color: #8e1b1b; }
[data-theme="medieval"] .die:not(.blank) { position: relative; border-radius: 10px; box-shadow: inset 0 -3px 0 rgba(139, 107, 46, .25); }
[data-theme="medieval"] .die.held { box-shadow: 0 0 0 3px var(--held), 0 0 12px rgba(212, 160, 23, .8); }
[data-theme="medieval"] .die.held::after { content: "🛡️"; position: absolute; top: -12px; right: -9px; font-size: 14px; }
[data-theme="medieval"] button.primary { border: 2px solid #d4a017; }
/* Pennants along the top. */
[data-theme="medieval"] body::before {
  content: ""; position: fixed; top: 0; left: -20px; right: -20px; height: 34px; z-index: 0; pointer-events: none;
  background:
    linear-gradient(#5a3a1a, #5a3a1a) 0 3px / 100% 3px repeat-x,
    conic-gradient(from 150deg at 50% 0, #8e1b1b 0 60deg, transparent 0) 0 4px / 96px 30px,
    conic-gradient(from 150deg at 50% 0, #1f4e8c 0 60deg, transparent 0) 32px 4px / 96px 30px,
    conic-gradient(from 150deg at 50% 0, #d4a017 0 60deg, transparent 0) 64px 4px / 96px 30px;
  background-repeat: repeat-x; transform-origin: 50% 0; animation: pennants 5s ease-in-out infinite;
}
@keyframes pennants { 50% { transform: skewX(2.5deg); } }
[data-theme="medieval"] .ambient .a1 { display: block; bottom: 8px; left: -80px; font-size: 42px; animation: joust 22s linear infinite 2s; }
[data-theme="medieval"] .ambient .a1::before { content: "🏇"; display: inline-block; animation: canter .45s ease-in-out infinite; }
@keyframes joust { 0% { transform: translateX(0); } 25%, 100% { transform: translateX(calc(100vw + 160px)); } }
@keyframes canter { 50% { transform: translateY(-6px) rotate(-3deg); } }
[data-theme="medieval"] .ambient .a2 { display: block; top: 12%; right: -80px; font-size: 30px; opacity: .7; animation: dragon 34s linear infinite 12s; }
[data-theme="medieval"] .ambient .a2::before { content: "🐉"; display: inline-block; transform: scaleX(-1); }
@keyframes dragon { 0% { transform: translate(0, 0); } 12% { transform: translate(-50vw, 30px); } 24%, 100% { transform: translate(calc(-100vw - 160px), -10px); } }
[data-theme="medieval"] .ambient .a3 { display: block; right: 2%; bottom: 0; font-size: 90px; opacity: .35; }
[data-theme="medieval"] .ambient .a3::before { content: "🏰"; }