/* layout, type and accessibility only; every visual comes from a period graphic */
body { margin: 0; padding: 10px 0 30px; font-family: Georgia, "Times New Roman", serif; font-size: 16px; }
img { vertical-align: middle; }
a { font-weight: bold; text-decoration: underline; }
a:hover { color: #99ff33; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #99ff33; outline-offset: 2px; }
.page p, .page li { line-height: 1.6; }
.page h1, .page h2 { margin: 6px 0 8px; font-weight: bold; }
.page h1 { font-size: 1.9em; }
.page h3 { color: #99ff33; font-family: Georgia, serif; }
.page b { color: #ffcc66; }
.page a b, .page th b { color: inherit; }
.page td, .page th { color: #e8dcc0; }
.page th.tier { min-width: 44px; }
/* masthead: one black slab, orange frame on the outside only */
table.masthead { border: 4px ridge #ff6600; }
.site-name { margin: 4px 10px; line-height: 1.0; font-family: Luminari, Chiller, "Old English Text MT", Georgia, serif;
  font-size: 58px; font-weight: normal; }
.site-name a { text-decoration: none; color: #ff6a00;
  text-shadow: 1px 1px 0 #b33900, 2px 2px 0 #8a2b00, 3px 3px 0 #5e1d00, 4px 4px 0 #3a1200, 0 0 18px rgba(255, 90, 0, .55); }
.site-name a:hover { color: #ff8a2a; }
.tagline { margin: 4px 0 10px; font-family: Luminari, Chiller, Georgia, serif; font-size: 22px; color: #e8dcc0;
  letter-spacing: 1px; text-shadow: 0 0 8px rgba(255, 90, 0, .45); }
.draft { color: #ff6666; font-family: "Courier New", monospace; }
.tile { display: inline-block; }
/* mirrors a corner decoration; the paused-GIF canvas needs it too */
.flip img, .flip canvas.still { transform: scaleX(-1); }
.support img { margin: 3px 2px; }
.nav-sub { display: inline-block; margin: 3px 0 0 30px; font-size: 13px; white-space: normal; max-width: 110px; }
.nav-icon { display: inline-block; width: 30px; text-align: center; margin-right: 4px; }
div[role=navigation] td { white-space: nowrap; }
.nav-wrap { display: inline-block; vertical-align: top; max-width: 108px; white-space: normal; }
.cap { color: #e8dcc0; font-weight: bold; text-align: left; padding: 0 0 6px; }
.page td.tc { color: #000000; font-weight: bold; }
.page table.movers th, .page table.movers td { overflow-wrap: normal; }
.tier-hero { display: inline-block; width: 84px; margin: 4px 1px; text-align: center; vertical-align: top; font-size: 13px; }
.portrait { filter: sepia(.55) contrast(1.15) brightness(.85); }
.tile:hover .portrait, .tile:focus .portrait, .portrait:hover { filter: none; }

/* visually hidden but read by screen readers */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: #000; color: #99ff33;
  padding: 8px 12px; border: 3px solid #99ff33; }
.skip:focus { left: 8px; }

/* square pause/play button pinned to the top-right corner */
#motion { position: fixed; top: 8px; right: 8px; z-index: 20; width: 36px; height: 36px; padding: 0;
  font: bold 16px/1 Georgia, serif; color: #000; background: #ffcc33; border: 3px outset #ff9933; cursor: pointer; }
#motion:active { border-style: inset; }
/* paused: hide each GIF until its frozen frame is drawn, then show only the frame */
.calm img[src$=".gif"]:not([data-frozen]), .calm img[src$=".GIF"]:not([data-frozen]) { visibility: hidden; }
.calm img[data-frozen] { display: none !important; }
canvas.still { vertical-align: middle; }

.scroll { max-width: 100%; overflow-x: auto; }

/* reflow: stack the fixed-width tables at narrow widths and high zoom */
@media (max-width: 940px) {
  table[role=presentation] { width: 100% !important; }
  table.lay > tbody > tr > td { display: block; width: auto !important; }
  table.slab { width: 100% !important; }
  .nav-wrap { max-width: none; white-space: nowrap; }
  table.frame { width: auto !important; }
  table.lay td.orn, .orn, .vine { display: none !important; }
  .site-name { font-size: 40px; }
  table.lay { table-layout: fixed; }
  .page td { overflow-wrap: anywhere; }
  table.grid > tbody > tr > td { display: inline-block; width: 45% !important; }
  img { max-width: 100%; height: auto; }
  img.icon { width: auto; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* hover tooltips (tips.js) */
.tip.on { text-decoration: underline dotted #99ff33; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: help; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tip.on:hover, .tip.on[aria-expanded=true] { background: rgba(153, 255, 51, .18); }
.tip.on:focus-visible { outline: 3px solid #99ff33; outline-offset: 2px; }
.tip-panel { position: fixed; z-index: 1000; box-sizing: border-box; display: block; width: 300px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); touch-action: pan-y; overscroll-behavior: contain; overflow-y: auto; padding: 8px 10px 9px; background: #000; border: 3px solid #ff6600;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .65); color: #e8dcc0; font: normal 14px/1.45 Georgia, "Times New Roman", serif;
  text-align: left; text-indent: 0; letter-spacing: 0; white-space: normal; overflow-wrap: normal; text-decoration: none; }
.tip-panel[hidden] { display: none; }
.tip-panel .tip-panel { border-color: #99ff33; }
.tip-panel .tip-panel .tip-panel { border-color: #ff6600; }
.tip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tip-close { display: none; margin-left: auto; padding: 0 6px; color: #ff9933; font-size: 22px; line-height: 1; cursor: pointer; }
.tip-name { color: #ff9933; font-size: 16px; font-weight: bold; }
.tip-cost { color: #ffcc66; font-weight: bold; white-space: nowrap; }
.tip-type { display: block; margin: 1px 0 6px; color: #99ff33; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.tip-body { display: block; }
.tip-foot { display: block; margin-top: 7px; padding-top: 5px; border-top: 1px solid #552200; color: #c9bd9c; font-size: 12px; }
.tip-ring { position: fixed; z-index: 1100; display: none; width: 24px; height: 24px; border-radius: 50%; background: #000;
  pointer-events: none; }
.tip-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: conic-gradient(#ff9933 var(--deg, 0deg), #4a2a10 0);
  -webkit-mask: radial-gradient(circle, transparent 4px, #000 5px); mask: radial-gradient(circle, transparent 4px, #000 5px); }
.tip-note { border: 2px solid #99ff33; padding: 6px 10px; margin: 0 0 10px; }
@media (pointer: coarse) {
  .tip.on { cursor: pointer; padding: 6px 2px; margin: -6px -2px; }   /* bigger tap target without shifting the text */
  .tip-panel { width: min(300px, calc(100vw - 16px)); }
  .tip-close { display: block; }
  .tip-cost { margin-left: auto; }
  .tip-close { margin-left: 4px; padding: 4px 8px; }
}
@media print { .tip-panel, .tip-ring { display: none !important; } }