.dg-page {
  --dg-mint: #eaf6de;
  --dg-mint-deep: #d8edc4;
  --dg-hair: #8fc26a;
  --dg-leaf: #4f8a34;
  --dg-navy: #2d3a78;
  --dg-bell: #f5b21b;
  --dg-bell-deep: #d9861a;
  --dg-ear: #f7b5c4;
  --dg-rose: #d64d7a;
  --dg-cream: #fffbe8;
  --dg-muted: #62705a;
  min-height: 100%;
  box-sizing: border-box;
  padding: 16px 0 24px;
  background: repeating-conic-gradient(var(--dg-mint) 0 25%, var(--dg-mint-deep) 0 50%) 0 0 / 24px 24px;
  color: var(--dg-navy);
  font: 12px/1.6 Verdana, 'MS PGothic', Tahoma, sans-serif;
}

.dg-page a {
  color: #2346b0;
  cursor: pointer;
  text-decoration: underline;
}

.dg-page a:hover {
  color: var(--dg-rose);
}

.dg-sheet {
  width: 700px;
  margin: 0 auto;
  border-collapse: collapse;
  background: #ffffff;
  border: 3px double var(--dg-leaf);
}

.dg-ticker {
  background: var(--dg-navy);
  color: #ffffff;
  font: bold 11px Verdana, sans-serif;
  padding: 2px 0;
}

.dg-head {
  text-align: center;
  padding: 14px 10px 6px;
}

.dg-title {
  font: bold 32px 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow:
    2px 0 0 var(--dg-leaf), -2px 0 0 var(--dg-leaf), 0 2px 0 var(--dg-leaf), 0 -2px 0 var(--dg-leaf),
    2px 2px 0 var(--dg-leaf), -2px -2px 0 var(--dg-leaf), 2px -2px 0 var(--dg-leaf), -2px 2px 0 var(--dg-leaf),
    4px 4px 0 var(--dg-bell);
}

.dg-title-jp {
  font-size: 11px;
  color: var(--dg-leaf);
  margin-top: 2px;
}

.dg-cast {
  margin: 10px auto 2px;
  border-collapse: collapse;
}

.dg-cast-cell {
  width: 128px;
  padding: 0 4px;
  text-align: center;
  vertical-align: bottom;
}

.dg-page .dg-cast-link {
  display: block;
  color: var(--dg-navy);
  text-decoration: none;
}

.dg-cast-sprite {
  display: block;
  height: 51px;
  border-bottom: 3px solid var(--dg-mint-deep);
}

.dg-cast-sprite .web-gif {
  vertical-align: bottom;
}

.dg-cast-label {
  display: inline-block;
  margin-top: 4px;
  padding: 0 6px;
  font-weight: bold;
  color: #2346b0;
  text-decoration: underline;
}

.dg-page .dg-cast-link:hover .dg-cast-label {
  color: var(--dg-rose);
}

.dg-cast-link.is-current .dg-cast-sprite {
  border-bottom-color: var(--dg-bell);
}

.dg-page .dg-cast-link.is-current .dg-cast-label {
  background: var(--dg-bell);
  color: var(--dg-navy);
  text-decoration: none;
}

.dg-cast-who {
  font-size: 10px;
  color: var(--dg-muted);
}

.dg-sublinks {
  margin-top: 6px;
  font-size: 11px;
}

.dg-page .dg-sublinks a.is-current {
  font-weight: bold;
  color: var(--dg-navy);
  text-decoration: none;
}

.dg-lace {
  height: 8px;
  border-top: 2px solid var(--dg-ear);
  background: radial-gradient(circle at 6px 0, var(--dg-ear) 6px, #ffffff 6.5px) 0 0 / 12px 8px repeat-x;
}

.dg-body {
  padding: 12px 22px 18px;
  vertical-align: top;
}

.dg-body p {
  margin: 0 0 10px;
}

.dg-h1 {
  font: bold 20px 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  color: var(--dg-leaf);
  margin: 0 0 6px;
}

.dg-h {
  font: bold 15px 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  color: var(--dg-leaf);
  border-bottom: 2px dotted var(--dg-ear);
  margin: 18px 0 8px;
  padding-bottom: 1px;
}

.dg-body > .dg-h:first-child {
  margin-top: 0;
}

.dg-h .web-gif {
  vertical-align: -1px;
  margin-right: 3px;
}

.dg-h3 {
  font: bold 13px Verdana, sans-serif;
  color: var(--dg-navy);
  margin: 16px 0 6px;
}

.dg-small {
  font-size: 10px;
  color: var(--dg-muted);
}

.dg-hr {
  border: 0;
  border-top: 1px dashed var(--dg-hair);
  margin: 12px 0;
}

.dg-welcome {
  width: 100%;
  border-collapse: collapse;
  background: var(--dg-cream);
  border: 1px solid var(--dg-bell);
}

.dg-welcome td {
  padding: 8px 10px;
  vertical-align: top;
}

.dg-welcome-art {
  width: 112px;
}

.dg-welcome-art img,
.dg-char-pic img,
.dg-picture img {
  display: block;
  border: 1px solid var(--dg-navy);
  background: #ffffff;
}

.dg-updates {
  width: 100%;
  border-collapse: collapse;
}

.dg-updates td {
  padding: 2px 6px;
  border-bottom: 1px dotted var(--dg-mint-deep);
  vertical-align: top;
}

.dg-date {
  width: 80px;
  white-space: nowrap;
  color: var(--dg-leaf);
  font-weight: bold;
}

.dg-news-title {
  font: bold 13px Verdana, sans-serif;
  color: var(--dg-navy);
  margin: 0;
}

.dg-news-meta {
  font-size: 10px;
  color: var(--dg-muted);
  margin: 0 0 6px;
}

.dg-news p {
  margin: 0 0 8px;
}

.dg-news-more {
  text-align: right;
  font-size: 11px;
}

.dg-crumbs {
  font-size: 11px;
}

.dg-comments {
  margin: 0 0 10px;
}

.dg-comment {
  border-left: 3px solid var(--dg-hair);
  background: #f6fbf1;
  padding: 4px 8px;
  margin-bottom: 6px;
}

.dg-comment-head span {
  font-size: 10px;
  color: var(--dg-muted);
  margin-left: 4px;
}

.dg-form {
  margin: 8px 0 14px;
}

.dg-form-table {
  border-collapse: collapse;
  background: var(--dg-cream);
  border: 1px solid var(--dg-bell);
}

.dg-form-table td {
  padding: 4px 6px;
  vertical-align: top;
}

.dg-form-label {
  font-weight: bold;
  white-space: nowrap;
  text-align: right;
}

.dg-thanks {
  color: var(--dg-leaf);
  font-weight: bold;
  margin: 6px 0 0;
}

.dg-theater {
  width: 100%;
  border-collapse: collapse;
}

.dg-theater > tbody > tr > td {
  vertical-align: top;
}

.dg-theater-player {
  width: 412px;
  padding-right: 12px;
}

.dg-player,
.dg-media {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  color: #000000;
  font: 11px Tahoma, 'MS Sans Serif', sans-serif;
}

.dg-player-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #ffffff;
  font-weight: bold;
  padding: 2px 3px 2px 5px;
}

.dg-player-btns span {
  display: inline-block;
  width: 14px;
  height: 12px;
  margin-left: 2px;
  background: #c0c0c0;
  color: #000000;
  border: 1px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  font-size: 9px;
  line-height: 10px;
  text-align: center;
}

.dg-screen {
  position: relative;
  width: 392px;
  height: 288px;
  margin: 4px auto;
  background: #000000;
  border: 2px solid;
  border-color: #404040 #ffffff #ffffff #404040;
}

.dg-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000000;
}

.dg-sub {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 10px;
  text-align: center;
  pointer-events: none;
}

.dg-sub-text {
  display: inline-block;
  background: #000000;
  color: #ffff33;
  font: bold 13px Arial, Helvetica, sans-serif;
  line-height: 1.35;
  padding: 1px 6px;
}

.dg-sub-text:empty {
  display: none;
}

.dg-sub-text.is-commentary {
  color: #00ffff;
  font-style: italic;
}

.dg-sub-text.is-russian {
  color: #ffffff;
}

.dg-hud {
  position: absolute;
  top: 5px;
  left: 5px;
  background: #000000;
  color: #00ff00;
  font: 10px 'Courier New', monospace;
  padding: 1px 4px;
  border: 1px solid #00ff00;
  pointer-events: none;
}

.dg-player-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
}

.dg-page input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 21px;
  background: transparent;
  cursor: default;
}

.dg-page input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: #ffffff;
  border: 1px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: inset 1px 1px 0 #000000;
}

.dg-page input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 21px;
  margin-top: -9px;
  background: #c0c0c0;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #000000, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #808080;
}

.dg-seek {
  flex: 1;
  min-width: 80px;
}

.dg-time {
  font: 11px 'Courier New', monospace;
}

.dg-ep-nav {
  text-align: center;
  font-size: 11px;
  margin: 6px 0 0;
}

.dg-theater-list {
  width: 232px;
}

.dg-eplist {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.3;
}

.dg-eplist th {
  background: var(--dg-navy);
  color: #ffffff;
  text-align: left;
  padding: 2px 4px;
}

.dg-eplist td {
  padding: 2px 4px;
  border-bottom: 1px dotted var(--dg-mint-deep);
  vertical-align: top;
}

.dg-eplist td:first-child {
  width: 18px;
  color: var(--dg-leaf);
  font-weight: bold;
}

.dg-eplist tr.is-current td {
  background: var(--dg-bell);
  color: var(--dg-navy);
}

.dg-jp {
  font-size: 11px;
  color: var(--dg-leaf);
  margin: -4px 0 6px;
}

.dg-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 10px;
}

.dg-specs th {
  text-align: left;
  white-space: nowrap;
  background: var(--dg-mint);
  padding: 2px 6px;
}

.dg-specs td {
  padding: 2px 6px;
  border-bottom: 1px dotted var(--dg-mint-deep);
}

.dg-rate {
  background: var(--dg-cream);
  border: 1px solid var(--dg-bell);
  padding: 4px 8px;
}

.dg-star {
  background: none;
  border: 0;
  padding: 0 1px;
  font-size: 16px;
  line-height: 1;
  color: #c9c9c9;
  cursor: pointer;
}

.dg-star:hover,
.dg-star.is-on {
  color: var(--dg-bell-deep);
}

.dg-star:focus-visible {
  outline: 1px dotted var(--dg-navy);
}

.dg-thumbs {
  margin: 0 auto;
}

.dg-thumbs td {
  width: 190px;
  text-align: center;
  vertical-align: top;
}

.dg-page .dg-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 136px;
  margin: 0 auto 4px;
  background: #ffffff;
  border: 1px solid var(--dg-hair);
  box-shadow: 3px 3px 0 var(--dg-mint-deep);
}

.dg-thumb img {
  display: block;
  border: 0;
}

.dg-thumb-title {
  font-weight: bold;
  font-size: 11px;
  line-height: 1.3;
}

.dg-picture img {
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.dg-single {
  border-collapse: collapse;
  margin-bottom: 10px;
}

.dg-single td {
  vertical-align: top;
  padding: 0 10px 0 0;
}

.dg-single-art {
  width: 52px;
}

.dg-media {
  width: 456px;
}

.dg-media-top {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 4px;
  padding: 4px 6px;
  background: #000000;
  border: 2px solid;
  border-color: #404040 #ffffff #ffffff #404040;
}

.dg-spectrum {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
}

.dg-bar {
  width: 6px;
  height: 10%;
  background: repeating-linear-gradient(to top, #00cc00 0 2px, #000000 2px 3px);
}

.dg-media-title {
  color: #00ff00;
  font: 12px 'Courier New', monospace;
}

.dg-volume {
  width: 70px;
}

.dg-lyrics {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.dg-lyrics th {
  background: var(--dg-navy);
  color: #ffffff;
  text-align: left;
  padding: 2px 8px;
}

.dg-lyrics td {
  width: 50%;
  vertical-align: top;
  padding: 0 8px;
  background: var(--dg-cream);
  line-height: 1.5;
}

.dg-lyrics tr.is-gap td {
  height: 10px;
}

.dg-lyrics td + td {
  border-left: 1px solid var(--dg-mint-deep);
}

.dg-chars {
  width: 100%;
  border-collapse: collapse;
}

.dg-chars td {
  padding: 8px 6px;
  border-bottom: 1px dotted var(--dg-hair);
  vertical-align: top;
}

.dg-char-pic {
  width: 100px;
}

.dg-char-name {
  color: var(--dg-leaf);
  font-size: 13px;
}

.dg-char-facts {
  font-size: 11px;
  color: var(--dg-rose);
}

.dg-staff {
  width: 100%;
  border-collapse: collapse;
}

.dg-staff th {
  width: 150px;
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
  background: var(--dg-mint);
  padding: 3px 8px;
}

.dg-staff td {
  padding: 3px 8px;
  border-bottom: 1px dotted var(--dg-mint-deep);
}

.dg-trivia {
  margin: 0;
  padding-left: 20px;
}

.dg-trivia li {
  margin-bottom: 4px;
}

.dg-gb-entry {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  border: 1px solid var(--dg-hair);
}

.dg-gb-entry th {
  text-align: left;
  background: var(--dg-mint);
  padding: 3px 8px;
}

.dg-gb-entry th span {
  font-weight: normal;
  font-size: 11px;
  color: var(--dg-muted);
}

.dg-gb-date {
  width: 90px;
  background: var(--dg-mint);
  text-align: right;
  font-size: 10px;
  padding: 3px 8px;
  white-space: nowrap;
}

.dg-gb-entry td[colspan] {
  padding: 6px 8px;
}

.dg-gb-fav {
  float: left;
  margin: 0 8px 2px 0;
}

.dg-gb-meta {
  clear: both;
  font-size: 10px;
  color: var(--dg-muted);
  margin-top: 4px;
}

.dg-foot {
  padding: 10px 22px 12px;
  border-top: 1px solid var(--dg-hair);
  background: var(--dg-mint);
  font-size: 11px;
}

.dg-foot-grid {
  width: 100%;
  border-collapse: collapse;
}

.dg-foot-grid td {
  vertical-align: top;
}

.dg-foot-banner {
  text-align: right;
}

.dg-counter {
  display: inline-block;
  background: #000000;
  color: #00ff00;
  font: bold 13px 'Courier New', monospace;
  letter-spacing: 2px;
  padding: 0 4px;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
}

.dg-banner {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: 88px;
  height: 31px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 2px;
  background: var(--dg-hair);
  border: 1px solid var(--dg-navy);
  color: var(--dg-navy);
  font: bold 8px/9px Verdana, sans-serif;
  text-align: left;
}

.dg-banner .web-gif {
  flex: none;
}

.dg-ring {
  text-align: center;
  margin: 8px 0 4px;
}

.dg-ring .web-gif {
  vertical-align: -1px;
}

.dg-copy {
  font-style: normal;
  text-align: center;
  font-size: 10px;
  color: var(--dg-muted);
}
