.hotkeys .hotkey {
  flex: 1;
  min-width: 0;
}
.gryphon-hotkey {
  color: #acd9d7;
}
.gryphon-hotkey:hover {
  background: #8fcecd20;
}
.gryphon-scroll-panel {
  width: 530px;
}
.sky-scroll {
  text-align: center;
  padding: 20px 24px;
  border: 1px solid #cdbf825e;
  background:
    radial-gradient(ellipse at 50% 5%, #82bfbd19, transparent 70%),
    linear-gradient(120deg, #c4b16f0c, transparent);
  box-shadow: inset 0 0 0 5px #c8b77b07;
}
.sky-scroll-seal {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border: 1px solid #b2d9c466;
  border-radius: 50%;
  box-shadow:
    0 0 0 7px #9bbda310,
    0 0 28px #75b6bd1b;
  background: #74bdc112;
}
.sky-scroll-seal .icon {
  width: 61px;
  height: 61px;
  color: #d9d0a2;
}
.sky-script-runes {
  color: #8bbbc2;
  font-size: 13px;
  letter-spacing: 5px;
}
.sky-scroll h3 {
  font:
    24px Georgia,
    serif;
  color: #e9d7a8;
  margin: 15px 0;
}
.sky-scroll blockquote {
  color: #cfdfce;
  font:
    italic 15px/1.8 Georgia,
    serif;
  margin: 18px 0;
}
.sky-scroll > p:not(.sky-script-runes) {
  font-size: 11px;
  line-height: 1.9;
  color: #aabfaa;
}
.sky-scroll-stats {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  border-top: 1px solid #c8b87935;
  padding-top: 17px;
  margin-top: 20px;
}
.sky-scroll-stats span {
  font-size: 7px;
  letter-spacing: 1px;
  color: #8eaeaa;
}
.sky-scroll-stats strong {
  display: block;
  margin-top: 7px;
  font:
    14px Georgia,
    serif;
  color: #d9d5ae;
  letter-spacing: 0;
}
#cast-gryphon {
  width: 100%;
  margin-top: 20px;
}
.sky-scroll-note {
  font-size: 10px;
  line-height: 1.8;
  text-align: center;
  color: #b2c6b5;
  margin: 14px 0 0;
}
.read-spell-button {
  display: block;
  margin-top: 10px;
  padding: 7px 10px;
  width: 100%;
  font-size: 11px;
  border: 1px solid #9ebfa166;
  color: #d1dbc0;
  background: #72afad1a;
}
#gryphon-cast {
  position: absolute;
  left: 50%;
  top: 105px;
  transform: translateX(-50%);
  width: 355px;
  padding: 18px 20px 12px;
  background: linear-gradient(135deg, #193733f5, #14272cf5);
  border: 1px solid #9ccbbd66;
  box-shadow:
    0 8px 45px #10282055,
    inset 0 0 0 4px #9db38f0b;
  pointer-events: auto;
  z-index: 10;
}
#gryphon-cast[hidden],
.gryphon-name[hidden],
#cancel-gryphon[hidden] {
  display: none;
}
.sky-cast-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sky-cast-title > .icon {
  width: 35px;
  height: 35px;
  color: #bee0d1;
}
.sky-cast-title > div {
  flex: 1;
}
.sky-cast-title small {
  display: block;
  font-size: 7px;
  letter-spacing: 1.6px;
  color: #9cc5bf;
}
.sky-cast-title strong {
  display: block;
  margin-top: 5px;
  font:
    15px Georgia,
    serif;
  color: #e4d5a8;
}
.sky-cast-title button {
  color: #afc6b9;
}
.sky-cast-runes {
  color: #cce4d8;
  text-align: center;
  font-size: 19px;
  letter-spacing: 4px;
  margin-block: 18px;
  text-shadow: 0 0 16px #86cdc5;
  animation: sky-script-glow 1.4s ease-in-out infinite alternate;
}
.sky-cast-track {
  height: 4px;
  background: #061c1b;
  box-shadow: inset 0 0 0 1px #9cbd9933;
}
.sky-cast-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5c9d9e, #b3dacc, #e4d39e);
  box-shadow: 0 0 9px #a7d4c950;
}
#gryphon-cast p {
  font-size: 9px;
  color: #a8c2b5;
  text-align: center;
  margin: 11px 0 0;
}
.gryphon-name {
  position: absolute;
  transform: translate(-50%, -100%);
  text-align: center;
  text-shadow: 0 2px 4px #091b1f;
  color: #efe2b7;
}
.gryphon-name strong {
  display: block;
  font:
    19px Georgia,
    serif;
}
.gryphon-name small {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  color: #c6ddd2;
}
@keyframes sky-script-glow {
  to {
    opacity: 0.55;
    text-shadow: 0 0 6px #86cdc5;
  }
}
@media (max-height: 720px) {
  .is-mounted .chat-lines,
  .is-mounted .journal-content {
    height: 105px;
  }
  .sky-scroll {
    padding: 12px 16px;
  }
  .sky-scroll-seal {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
  }
  .sky-scroll-seal .icon {
    width: 42px;
    height: 42px;
  }
  .sky-scroll blockquote {
    margin: 10px 0;
  }
}
@media (max-width: 820px) {
  .is-mounted .chat-lines,
  .is-mounted .journal-content {
    height: 50px;
  }
  .is-mounted .chat-footer {
    display: none;
  }
  #gryphon-cast {
    width: 310px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sky-cast-runes {
    animation: none;
  }
}