/* rosary: spillregler flyttet ut av styles.css 11. oktober 2026, i samme rekkefølge.
   Lastes rett etter styles.min.css på universet.html. */
.rosary-game::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.3;
  background-image:
    radial-gradient(circle, rgba(17, 106, 141, 0.25) 0 3px, transparent 4px),
    radial-gradient(circle, rgba(106, 59, 98, 0.2) 0 4px, transparent 5px);
  background-position: 20px 24px, 82px 74px;
  background-size: 116px 116px, 152px 152px;
}
.rosary-game__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}
.rosary-game__head h3 {
  margin: 9px 0 6px;
  font-size: clamp(2.1rem, 4.8vw, 3.65rem);
}
.rosary-game__head p {
  max-width: 790px;
  margin: 0;
}
.rosary-game__score strong,
.rosary-game__score span {
  padding: 9px 14px;
  font-family: var(--font-title);
}
.rosary-game__score strong {
  color: #ffe27a;
  font-size: 1.07rem;
}
.rosary-game__score span {
  border-top: 1px solid rgba(255, 255, 255, 0.21);
  font-weight: 800;
}
.rosary-customizer {
  margin-top: 24px;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.96);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.77);
  box-shadow: 0 12px 27px rgba(18, 59, 83, 0.14);
}
.rosary-customizer > summary {
  display: flex;
  gap: 9px;
  min-height: var(--tap);
  align-items: center;
  padding: 13px 17px;
  color: var(--fjord-deep);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-title);
  font-size: 1.08rem;
  font-weight: 900;
  background: linear-gradient(90deg, rgba(216, 243, 242, 0.95), rgba(255, 240, 189, 0.92));
}
.rosary-customizer > summary::-webkit-details-marker {
  display: none;
}
.rosary-customizer > summary::after {
  margin-left: auto;
  content: "▾";
  font-size: 1.3rem;
  transition: transform 150ms ease;
}
.rosary-customizer:not([open]) > summary::after {
  transform: rotate(-90deg);
}
.rosary-customizer__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}
.rosary-customizer fieldset {
  min-width: 0;
  margin: 0;
  padding: 11px;
  border: 2px solid rgba(17, 106, 141, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
}
.rosary-customizer fieldset:last-child {
  grid-column: 1 / -1;
}
.rosary-customizer legend {
  padding-inline: 5px;
  color: var(--fjord-deep);
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 900;
}
.rosary-style-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.rosary-style-row button {
  display: inline-flex;
  gap: 6px;
  min-height: var(--tap);
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  color: var(--fjord-deep);
  cursor: pointer;
  border: 2px solid rgba(17, 106, 141, 0.16);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 850;
  box-shadow: 0 4px 0 rgba(18, 59, 83, 0.08);
}
.rosary-style-row button[aria-pressed="true"] {
  color: var(--white);
  border-color: var(--plum);
  background: var(--plum);
  box-shadow: 0 0 0 3px var(--sun), 0 6px 13px rgba(64, 43, 80, 0.2);
}
.rosary-style-cross {
  font-size: 1.45rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 2px rgba(18, 59, 83, 0.2);
}
.rosary-style-cross--wood { color: #8b5128; }
.rosary-style-cross--silver { color: #9fadb2; }
.rosary-style-cross--blue { color: #176f9c; }
.rosary-style-bead {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: inset -3px -4px 5px rgba(18, 59, 83, 0.28), 0 2px 4px rgba(18, 59, 83, 0.2);
}
.rosary-style-bead--large { width: 19px; height: 19px; }
.rosary-style-bead--fjord { background: radial-gradient(circle at 30% 24%, #96f4ef 0 14%, #169cb8 38%, #07516e 82%); }
.rosary-style-bead--pearl { background: radial-gradient(circle at 30% 24%, #fff 0 20%, #e7e2d6 48%, #9ba7aa 88%); }
.rosary-style-bead--berry { background: radial-gradient(circle at 30% 24%, #f2939b 0 14%, #a74059 42%, #5d2037 86%); }
.rosary-style-bead--wood { background: radial-gradient(circle at 30% 24%, #e7ba78 0 14%, #a86b34 45%, #5d351e 88%); }
.rosary-style-bead--amber { background: radial-gradient(circle at 30% 24%, #ffe29a 0 14%, #d58b22 42%, #8b4e14 88%); }
.rosary-style-bead--plum { background: radial-gradient(circle at 30% 24%, #d89dcc 0 14%, #7e4776 42%, #482640 88%); }
.rosary-style-row--cord button > span {
  display: inline-block;
  width: 26px;
  height: 6px;
  border-radius: 999px;
  background: var(--cord-swatch);
  box-shadow: 0 2px 3px rgba(18, 59, 83, 0.25);
}
.rosary-style-medal {
  display: grid;
  width: 21px;
  height: 27px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  font-size: 0.8rem;
  box-shadow: inset -3px -4px 5px rgba(18, 59, 83, 0.2), 0 2px 4px rgba(18, 59, 83, 0.2);
}
.rosary-style-medal--blue { color: #f9e9b4; background: linear-gradient(145deg, #5ab7d0, #185d8c); }
.rosary-style-medal--gold { color: #fff7d1; background: linear-gradient(145deg, #f2ca62, #a86c17); }
.rosary-style-medal--wood { color: #f4dbad; background: linear-gradient(145deg, #c4854b, #70401f); }
.rosary-game__toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding: 12px 14px;
  border: 3px solid rgba(17, 106, 141, 0.15);
  border-radius: 22px 22px 10px 10px;
  background: rgba(255, 255, 255, 0.84);
}
.rosary-game__toolbar > div {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}
.rosary-game__toolbar strong {
  color: var(--fjord-deep);
  font-family: var(--font-title);
  font-size: 1.1rem;
}
.rosary-game__toolbar span {
  color: var(--muted);
  font-weight: 800;
}
.rosary-game__toolbar .button {
  min-height: var(--tap);
  margin: 0;
  padding: 8px 13px;
  white-space: nowrap;
}
.rosary-progress {
  height: 14px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 0 0 14px 14px;
  background: rgba(18, 59, 83, 0.15);
}
.rosary-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--plum), var(--sun), #59b89c);
  transition: width 320ms ease;
}
.rosary-game__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(18px, 3vw, 28px);
  align-items: start;
  margin-top: 22px;
}
.rosary-game__stage::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background: linear-gradient(to bottom, rgba(18, 59, 83, 0.03), rgba(18, 59, 83, 0.08));
}
.rosary-game__stage.is-dragover {
  box-shadow: 0 0 0 7px var(--sun), 0 22px 48px rgba(18, 59, 83, 0.38);
  transform: translateY(-2px);
}
.rosary-cord,
.rosary-board {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.rosary-cord ellipse,
.rosary-cord path {
  fill: none;
  stroke: var(--rosary-cord);
  stroke-width: 0.72;
  stroke-linecap: round;
  stroke-dasharray: 1.4 0.7;
  opacity: 0.58;
  filter: drop-shadow(0 1px 1px rgba(18, 59, 83, 0.38));
}
.rosary-slot {
  position: absolute;
  display: block;
  box-sizing: border-box;
  pointer-events: auto;
  opacity: 0.31;
  transform: translate(-50%, -50%);
  transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.rosary-slot--small,
.rosary-slot--large {
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, #e5eef0 0 15%, #829298 44%, #41545a 88%);
  box-shadow: inset -3px -4px 5px rgba(18, 59, 83, 0.34), 0 3px 7px rgba(18, 59, 83, 0.31);
}
.rosary-slot--small {
  width: clamp(9px, 1.28vw, 15px);
  height: clamp(9px, 1.28vw, 15px);
}
.rosary-slot--large {
  width: clamp(15px, 2.05vw, 24px);
  height: clamp(15px, 2.05vw, 24px);
}
.rosary-slot--small.is-filled {
  background: radial-gradient(circle at 30% 24%, var(--rosary-small-light) 0 13%, var(--rosary-small-mid) 40%, var(--rosary-small-dark) 87%);
}
.rosary-slot--large.is-filled {
  background: radial-gradient(circle at 30% 24%, var(--rosary-large-light) 0 13%, var(--rosary-large-mid) 40%, var(--rosary-large-dark) 87%);
}
.rosary-slot--cross {
  width: clamp(34px, 5.2vw, 58px);
  height: clamp(50px, 7.4vw, 84px);
  border: 2px dashed rgba(255, 255, 255, 0.84);
  border-radius: 9px;
  background: rgba(18, 59, 83, 0.22);
}
.rosary-cross-shape {
  position: absolute;
  inset: 4px;
  display: block;
}
.rosary-cross-shape::before,
.rosary-cross-shape::after {
  position: absolute;
  left: 50%;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  background: linear-gradient(145deg, #9a602f, #5c321c);
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.24), 0 3px 6px rgba(18, 59, 83, 0.3);
  transform: translateX(-50%);
}
.rosary-cross-shape::before {
  top: 0;
  width: 31%;
  height: 100%;
}
.rosary-cross-shape::after {
  top: 25%;
  width: 78%;
  height: 20%;
}
.rosary-cross-corpus {
  position: absolute;
  z-index: 2;
  top: 21%;
  left: 50%;
  width: 12%;
  height: 47%;
  border-radius: 999px 999px 6px 6px;
  background: #efd1a7;
  box-shadow: 0 2px 3px rgba(18, 59, 83, 0.28);
  transform: translateX(-50%);
}
.rosary-cross-corpus::before {
  position: absolute;
  top: -18%;
  left: 50%;
  width: 130%;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: #efd1a7;
  transform: translateX(-50%);
}
.rosary-cross-corpus::after {
  position: absolute;
  top: 13%;
  left: 50%;
  width: 460%;
  height: 17%;
  content: "";
  border-radius: 999px;
  background: #efd1a7;
  transform: translateX(-50%);
}
.rosary-game[data-rosary-cross="silver"] .rosary-cross-shape::before,
.rosary-game[data-rosary-cross="silver"] .rosary-cross-shape::after {
  background: linear-gradient(145deg, #edf3f4, #8c9ca1 58%, #586a70);
}
.rosary-game[data-rosary-cross="blue"] .rosary-cross-shape::before,
.rosary-game[data-rosary-cross="blue"] .rosary-cross-shape::after {
  border-color: #f0c85f;
  background: linear-gradient(145deg, #298eb6, #124e78 60%, #082f54);
}
.rosary-slot--medal {
  width: clamp(24px, 3.2vw, 38px);
  height: clamp(31px, 4.15vw, 49px);
  border: 2px dashed rgba(255, 255, 255, 0.84);
  border-radius: 50%;
  background: rgba(18, 59, 83, 0.24);
}
.rosary-medal-shape {
  position: absolute;
  inset: 3px;
  display: grid;
  place-items: center;
  color: #f6e2a5;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  background: linear-gradient(145deg, #5fbad0, #185c8a);
  box-shadow: inset -4px -5px 6px rgba(18, 59, 83, 0.25), 0 4px 7px rgba(18, 59, 83, 0.3);
}
.rosary-game[data-rosary-medal="gold"] .rosary-medal-shape {
  color: #fff8d5;
  background: linear-gradient(145deg, #f4d474, #ac701c);
}
.rosary-game[data-rosary-medal="wood"] .rosary-medal-shape {
  color: #f3d7a5;
  background: linear-gradient(145deg, #c88c51, #70401f);
}
.rosary-slot.is-filled {
  opacity: 1;
  border-style: solid;
  transform: translate(-50%, -50%) scale(1.02);
}
.rosary-slot.is-next {
  z-index: 4;
  opacity: 0.88;
  outline: 3px solid #ffe06a;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(64, 43, 80, 0.45), 0 0 22px 8px rgba(255, 224, 106, 0.8);
  animation: rosary-pulse 1.25s ease-in-out infinite;
}
.rosary-slot.is-wrong {
  opacity: 1;
  outline-color: #ff7c83;
  box-shadow: 0 0 0 5px rgba(118, 28, 43, 0.4), 0 0 22px 8px rgba(255, 124, 131, 0.76);
  animation: rosary-shake 380ms ease;
}
.rosary-game__complete {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(78%, 360px);
  padding: 22px 18px;
  place-items: center;
  color: var(--fjord-deep);
  text-align: center;
  border: 6px solid var(--white);
  border-radius: 30px;
  background: linear-gradient(145deg, #ffe06a, #fff2c0);
  box-shadow: 0 22px 50px rgba(18, 59, 83, 0.43);
  transform: translate(-50%, -50%) rotate(-1deg);
  animation: rosary-pop 520ms cubic-bezier(0.18, 0.84, 0.28, 1.2);
}
.rosary-game__complete[hidden] {
  display: none;
}
.rosary-game__complete > span {
  font-size: 3.5rem;
}
.rosary-game__complete strong {
  font-family: var(--font-title);
  font-size: clamp(1.45rem, 3vw, 2.25rem);
}
.rosary-game__complete small {
  max-width: 270px;
  margin-top: 5px;
  font-weight: 900;
}
.rosary-game__complete .button {
  margin-top: 0.35rem;
  min-width: 10.5rem;
}
.rosary-toolbox {
  padding: 15px;
  color: var(--white);
  border: 5px solid rgba(255, 255, 255, 0.94);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(12, 106, 132, 0.94), rgba(18, 59, 83, 0.97)),
    url("../images/generated/places/barnehagen-teresa-v02-sm.jpg") center / cover;
  box-shadow: 0 16px 36px rgba(18, 59, 83, 0.28);
}
.rosary-toolbox__task {
  padding: 14px;
  color: var(--fjord-deep);
  border: 4px solid rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  background: linear-gradient(145deg, #fff3c3, #e1f6f3);
  box-shadow: 0 9px 20px rgba(4, 37, 53, 0.22);
}
.rosary-toolbox__task span,
.rosary-toolbox__task strong,
.rosary-toolbox__task p {
  display: block;
}
.rosary-toolbox__task span {
  color: var(--plum);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.rosary-toolbox__task strong {
  margin-top: 3px;
  font-family: var(--font-title);
  font-size: 1.28rem;
}
.rosary-toolbox__task p {
  margin: 7px 0 0;
  font-size: 0.88rem;
  line-height: 1.42;
}
.rosary-token-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 13px;
}
.rosary-token-grid button {
  display: grid;
  min-width: 0;
  min-height: 94px;
  padding: 9px 6px;
  place-items: center;
  touch-action: none;
  color: var(--fjord-deep);
  cursor: grab;
  border: 3px solid rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 0 rgba(4, 37, 53, 0.2), 0 10px 17px rgba(4, 37, 53, 0.24);
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}
.rosary-token-grid button:last-child {
  grid-column: 1 / -1;
}
.rosary-token-grid button strong {
  font-family: var(--font-title);
  font-size: 0.82rem;
  line-height: 1.05;
}
.rosary-token-grid button:hover {
  transform: translateY(-3px) rotate(-0.5deg);
}
.rosary-token-grid button.is-selected {
  color: var(--white);
  border-color: #ffe06a;
  background: var(--plum);
  box-shadow: 0 0 0 4px #ffe06a, 0 10px 22px rgba(4, 37, 53, 0.34);
  transform: translateY(-3px);
}
.rosary-token-grid button.is-wrong {
  color: var(--fjord-deep);
  border-color: #ff7c83;
  background: #ffe3e4;
  animation: rosary-shake 380ms ease;
}
.rosary-token-grid button.is-help {
  z-index: 3;
  color: var(--fjord-deep);
  border-color: #ffe06a;
  background: #fff8cf;
  box-shadow: 0 0 0 5px rgba(255, 224, 106, 0.72), 0 12px 24px rgba(4, 37, 53, 0.3);
  animation: rosary-help-pulse 1s ease-in-out infinite;
}
.rosary-slot.is-help {
  z-index: 7;
  outline: 4px solid #fff3a2;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(245, 196, 79, 0.48), 0 0 28px 11px rgba(255, 224, 106, 0.82);
}
.rosary-slot.is-filled {
  animation: rosary-piece-arrive 360ms cubic-bezier(.2,.86,.3,1.25) both;
  animation-delay: var(--rosary-fill-delay, 0ms);
}
@keyframes rosary-help-pulse {
  50% { transform: translateY(-3px) scale(1.035); }
}
@keyframes rosary-piece-arrive {
  0% { opacity: .25; transform: translate(-50%, -50%) scale(.45); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
}
.rosary-token-grid button.is-dragging {
  opacity: 0.32;
}
.rosary-token__cross {
  color: #875028;
  font-size: 2.8rem;
  font-weight: 950;
  line-height: 0.9;
  text-shadow: 0 3px 4px rgba(18, 59, 83, 0.25);
}
.rosary-token__small,
.rosary-token__large {
  display: block;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: inset -5px -6px 8px rgba(18, 59, 83, 0.3), 0 5px 8px rgba(18, 59, 83, 0.27);
}
.rosary-token__small {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle at 30% 24%, var(--rosary-small-light) 0 13%, var(--rosary-small-mid) 40%, var(--rosary-small-dark) 87%);
}
.rosary-token__large {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 30% 24%, var(--rosary-large-light) 0 13%, var(--rosary-large-mid) 40%, var(--rosary-large-dark) 87%);
}
.rosary-token__medal {
  display: grid;
  width: 36px;
  height: 46px;
  place-items: center;
  color: #f6e2a5;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: linear-gradient(145deg, #5fbad0, #185c8a);
  box-shadow: inset -5px -6px 8px rgba(18, 59, 83, 0.27), 0 5px 8px rgba(18, 59, 83, 0.27);
}
.rosary-game[data-rosary-medal="gold"] .rosary-token__medal { background: linear-gradient(145deg, #f4d474, #ac701c); }
.rosary-game[data-rosary-medal="wood"] .rosary-token__medal { background: linear-gradient(145deg, #c88c51, #70401f); }
.rosary-game[data-rosary-cross="silver"] .rosary-token__cross { color: #a3b0b4; }
.rosary-game[data-rosary-cross="blue"] .rosary-token__cross { color: #1c78a6; text-shadow: 0 0 2px #f0c85f, 0 3px 4px rgba(18, 59, 83, 0.25); }
.rosary-token__decade {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
}
.rosary-token__decade i {
  display: block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, var(--rosary-small-light) 0 13%, var(--rosary-small-mid) 40%, var(--rosary-small-dark) 87%);
  box-shadow: inset -2px -3px 4px rgba(18, 59, 83, 0.3), 0 2px 3px rgba(18, 59, 83, 0.22);
}
.rosary-toolbox__instruction {
  margin: 14px 2px 2px;
  color: rgba(255, 255, 255, 0.87);
  font-size: 0.84rem;
  font-weight: 780;
  line-height: 1.45;
}
.rosary-token--floating {
  position: fixed;
  z-index: 10000;
  width: 130px;
  pointer-events: none;
  opacity: 0.97;
  transform: translate(-50%, -58%) rotate(2deg) scale(1.05);
  box-shadow: 0 18px 34px rgba(4, 37, 53, 0.42);
}
.rosary-game__feedback {
  display: flex;
  gap: 12px;
  min-height: 70px;
  align-items: center;
  margin-top: 18px;
  padding: 12px 16px;
  color: var(--fjord-deep);
  border: 3px solid rgba(17, 106, 141, 0.13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.83);
  box-shadow: 0 8px 18px rgba(18, 59, 83, 0.1);
}
.rosary-game__feedback > span {
  font-size: 2rem;
}
.rosary-game__feedback p {
  margin: 0;
  font-weight: 850;
}
.rosary-game__faith-note {
  margin: 14px 0 0;
  padding: 13px 16px;
  color: var(--fjord-deep);
  border-left: 5px solid var(--sun);
  border-radius: 10px;
  background: rgba(255, 248, 221, 0.78);
  font-size: 0.9rem;
}
.rosary-game.is-complete .rosary-game__stage {
  box-shadow: 0 0 0 8px var(--sun), 0 24px 52px rgba(18, 59, 83, 0.4);
}
.rosary-game.is-complete .rosary-cord ellipse,
.rosary-game.is-complete .rosary-cord path {
  stroke-width: 0.9;
  opacity: 0.94;
}
.rosary-customizer summary:focus-visible,
.rosary-style-row button:focus-visible,
.rosary-game__toolbar button:focus-visible,
.rosary-token-grid button:focus-visible,
.rosary-slot:focus-visible {
  z-index: 8;
  outline: 4px solid var(--fjord-deep);
  outline-offset: 4px;
}
@keyframes rosary-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.92); }
  50% { transform: translate(-50%, -50%) scale(1.14); }
}
@keyframes rosary-shake {
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}
@keyframes rosary-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.62) rotate(4deg); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-1deg); }
}
[data-calm="true"] .rosary-game *,
[data-calm="true"] .rosary-game *::before,
[data-calm="true"] .rosary-game *::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .rosary-game *,
  .rosary-game *::before,
  .rosary-game *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 980px) {
  .rosary-game__workspace {
    grid-template-columns: 1fr;
  }
  .rosary-toolbox {
    display: grid;
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr);
    gap: 13px;
  }
  .rosary-token-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 0;
  }
  .rosary-token-grid button,
  .rosary-token-grid button:last-child {
    grid-column: auto;
  }
  .rosary-toolbox__instruction {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}
@media (max-width: 760px) {
  .rosary-game__head {
    grid-template-columns: 1fr;
  }
  .rosary-game__score {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rosary-game__score span {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.21);
  }
  .rosary-customizer__groups {
    grid-template-columns: 1fr;
  }
  .rosary-customizer fieldset:last-child {
    grid-column: auto;
  }
  .rosary-game__toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .rosary-game__toolbar > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rosary-game__toolbar .button {
    width: 100%;
  }
  .rosary-toolbox {
    grid-template-columns: 1fr;
  }
  .rosary-token-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rosary-token-grid button:last-child {
    grid-column: span 2;
  }
  .rosary-toolbox__instruction {
    grid-column: auto;
  }
}
@media (max-width: 620px) {
  .rosary-customizer__groups {
    padding: 10px;
  }
  .rosary-style-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rosary-style-row button {
    min-width: 0;
    padding-inline: 6px;
  }
  .rosary-game__stage {
    border-width: 4px;
    border-radius: 21px;
  }
  .rosary-slot--small {
    width: clamp(7px, 2.45vw, 10px);
    height: clamp(7px, 2.45vw, 10px);
    border-width: 1px;
  }
  .rosary-slot--large {
    width: clamp(11px, 3.5vw, 15px);
    height: clamp(11px, 3.5vw, 15px);
    border-width: 1px;
  }
  .rosary-slot--cross {
    width: clamp(28px, 9vw, 40px);
    height: clamp(42px, 13vw, 58px);
  }
  .rosary-slot--medal {
    width: clamp(20px, 6vw, 27px);
    height: clamp(26px, 8vw, 35px);
  }
  .rosary-slot.is-next {
    outline-width: 2px;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(64, 43, 80, 0.4), 0 0 14px 5px rgba(255, 224, 106, 0.78);
  }
  .rosary-token-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rosary-token-grid button {
    min-height: 88px;
  }
  .rosary-token-grid button:last-child {
    grid-column: 1 / -1;
  }
  .rosary-game__faith-note {
    text-align: left;
  }
}
.rosary-image-fallback[hidden] { display: none !important; }
.rosary-style-cross {
  position: relative;
  display: grid;
  width: 34px;
  height: 44px;
  flex: 0 0 34px;
  place-items: center;
  color: currentColor;
}
.rosary-style-cross img,
.rosary-style-medal img,
.rosary-token__cross img,
.rosary-token__medal img,
.rosary-cross-shape img,
.rosary-medal-shape img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 3px 3px rgba(9, 46, 64, 0.3));
}
.rosary-style-cross .rosary-image-fallback,
.rosary-token__cross .rosary-image-fallback,
.rosary-cross-shape .rosary-image-fallback {
  font-size: 2.4rem;
  font-weight: 950;
  line-height: 1;
}
.rosary-style-medal {
  display: grid;
  width: 31px;
  height: 38px;
  flex: 0 0 31px;
  padding: 0;
  place-items: center;
  color: currentColor;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.rosary-style-medal .rosary-image-fallback,
.rosary-token__medal .rosary-image-fallback,
.rosary-medal-shape .rosary-image-fallback {
  font-size: 1.5rem;
  font-weight: 950;
}
.rosary-token__cross {
  position: relative;
  display: grid;
  width: 50px;
  height: 64px;
  place-items: center;
  color: #875028;
  font-size: 2.8rem;
  line-height: 1;
}
.rosary-token__medal {
  position: relative;
  display: grid;
  width: 48px;
  height: 58px;
  padding: 0;
  place-items: center;
  color: #f6e2a5;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
.rosary-cross-shape,
.rosary-medal-shape {
  position: absolute;
  inset: -4px;
  display: grid;
  padding: 0;
  place-items: center;
  color: #f6e2a5;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
.rosary-cross-shape::before,
.rosary-cross-shape::after,
.rosary-cross-corpus { display: none !important; }
.rosary-slot--small,
.rosary-slot--large {
  border: 0;
  background:
    radial-gradient(circle at 48% 46%, rgba(10, 54, 62, 0.12) 0 50%, rgba(4, 38, 48, 0.42) 62% 70%, rgba(255, 255, 255, 0.16) 73%, transparent 77%);
  box-shadow: inset 2px 2px 4px rgba(4, 38, 48, 0.46), inset -1px -1px 2px rgba(255, 255, 255, 0.2);
  opacity: 0.56;
}
.rosary-slot--small.is-filled,
.rosary-slot--large.is-filled {
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.48),
    inset -4px -5px 7px rgba(9, 42, 57, 0.36),
    0 3px 6px rgba(7, 43, 58, 0.36),
    0 0 8px color-mix(in srgb, var(--rosary-small-light) 28%, transparent);
}
.rosary-slot--small.is-filled {
  background:
    radial-gradient(circle at 27% 22%, rgba(255, 255, 255, 0.96) 0 7%, rgba(255, 255, 255, 0.5) 8% 15%, transparent 17%),
    radial-gradient(circle at 34% 30%, var(--rosary-small-light) 0 10%, var(--rosary-small-mid) 43%, var(--rosary-small-dark) 88%);
}
.rosary-slot--large.is-filled {
  background:
    radial-gradient(circle at 27% 22%, rgba(255, 255, 255, 0.96) 0 8%, rgba(255, 255, 255, 0.48) 9% 17%, transparent 19%),
    radial-gradient(circle at 34% 30%, var(--rosary-large-light) 0 10%, var(--rosary-large-mid) 43%, var(--rosary-large-dark) 88%);
  box-shadow:
    inset 3px 3px 6px rgba(255, 255, 255, 0.5),
    inset -5px -6px 8px rgba(9, 42, 57, 0.36),
    0 4px 8px rgba(7, 43, 58, 0.4),
    0 0 10px color-mix(in srgb, var(--rosary-large-light) 30%, transparent);
}
.rosary-slot--cross,
.rosary-slot--medal {
  border: 0;
  background: radial-gradient(ellipse at center, rgba(5, 45, 54, 0.32), rgba(255, 255, 255, 0.08) 64%, transparent 70%);
  box-shadow: inset 3px 3px 7px rgba(4, 35, 44, 0.5), inset -2px -2px 3px rgba(255, 255, 255, 0.18);
  opacity: 0.54;
}
.rosary-slot--cross.is-filled,
.rosary-slot--medal.is-filled {
  background: transparent;
  box-shadow: none;
}
.rosary-slot--cross:not(.is-filled) .rosary-cross-shape,
.rosary-slot--medal:not(.is-filled) .rosary-medal-shape { opacity: 0; }
.rosary-finish-preview {
  position: relative;
  width: min(100%, 760px);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  margin: clamp(16px, 3vw, 26px) auto;
  border: 7px solid rgba(255, 255, 255, 0.96);
  border-radius: 30px;
  background:
    radial-gradient(circle at 22% 17%, rgba(255, 255, 255, 0.18), transparent 22%),
    linear-gradient(145deg, #2f8c8d, #0e5b6d 58%, #0a4155);
  box-shadow: inset 0 0 42px rgba(5, 39, 48, 0.33), 0 18px 38px rgba(18, 59, 83, 0.22);
}
.rosary-finish-preview::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 0.7px, transparent 0.7px);
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
}
.rosary-finish-preview .rosary-cord,
.rosary-finish-preview .rosary-board { z-index: 2; }
.rosary-finish-preview .rosary-slot--cross {
  width: clamp(30px, 4.4vw, 48px);
  height: clamp(44px, 6vw, 66px);
}
.rosary-finish-fact { width: min(100%, 760px); margin-inline: auto; }
.rosary-print-button { color: #123d54; border-color: #123d54; background: #fff; }
.rosary-print-button:hover { color: #fff; background: #123d54; }
.rosary-print-sheet { display: none; }
@media (max-width: 620px) {
  .rosary-style-cross { width: 31px; height: 40px; flex-basis: 31px; }
  .rosary-style-medal { width: 28px; height: 35px; flex-basis: 28px; }
  .rosary-finish-preview { border-width: 4px; border-radius: 20px; }
}
@media print {
  body.is-printing-rosary-guide .rosary-print-sheet {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    min-height: 274mm;
    padding: 9mm;
    border: 2.5mm solid #123d54;
    border-radius: 7mm;
    color: #123d54;
    background: linear-gradient(150deg, #fff 0 72%, #eef9f6 72% 100%) !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .rosary-print-sheet * { box-sizing: border-box; }
  .rosary-print-sheet__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4mm; border-bottom: 1mm solid #f5c44f; }
  .rosary-print-sheet__brand { display: flex; align-items: center; gap: 3mm; font-size: 17pt; font-weight: 950; }
  .rosary-print-sheet__brand img { width: 16mm; height: 16mm; object-fit: cover; border-radius: 50%; }
  .rosary-print-sheet__brand span { display: grid; line-height: 1.05; }
  .rosary-print-sheet__brand small { margin-top: 1.5mm; color: #557382; font-size: 8pt; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
  .rosary-print-sheet__mark { display: grid; width: 17mm; height: 17mm; place-items: center; border-radius: 50%; background: #f5c44f !important; font-size: 25pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .rosary-print-sheet__title { padding: 6mm 0 4mm; }
  .rosary-print-sheet__title > span { display: inline-block; padding: 1.7mm 3.5mm; border-radius: 99mm; background: #f5c44f !important; font-size: 8pt; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .rosary-print-sheet__title h2 { margin: 2.5mm 0 1mm; font-size: 27pt; line-height: 1.05; }
  .rosary-print-sheet__title p { margin: 0; color: #557382; font-size: 10pt; font-weight: 750; }
  .rosary-print-sheet__diagram { position: relative; width: 100%; height: 112mm; overflow: hidden; border: 1.2mm solid #fff; border-radius: 6mm; background: linear-gradient(145deg, #2f8c8d, #0d5b6c 58%, #0a4155) !important; box-shadow: inset 0 0 12mm rgba(4,35,44,.3); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .rosary-print-sheet__diagram .rosary-cord,
  .rosary-print-sheet__diagram .rosary-board { position: absolute; inset: 0; width: 100%; height: 100%; }
  .rosary-print-sheet__diagram .rosary-cord ellipse,
  .rosary-print-sheet__diagram .rosary-cord path { stroke-width: .9; opacity: .95; }
  .rosary-print-sheet .rosary-slot--small { width: 3mm; height: 3mm; }
  .rosary-print-sheet .rosary-slot--large { width: 4.8mm; height: 4.8mm; }
  .rosary-print-sheet .rosary-slot--cross { width: 12mm; height: 18mm; }
  .rosary-print-sheet .rosary-slot--medal { width: 8mm; height: 10.5mm; }
  .rosary-print-sheet .rosary-slot { opacity: 1; }
  .rosary-print-callout { position: absolute; z-index: 6; display: grid; width: 41mm; padding: 2mm 2.6mm; border: .5mm solid rgba(255,255,255,.86); border-radius: 3mm; color: #123d54; background: rgba(255,255,255,.91) !important; box-shadow: 0 1.5mm 3mm rgba(4,35,44,.22); font-size: 6.8pt; line-height: 1.2; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .rosary-print-callout strong { margin-top: .6mm; font-size: 7.5pt; }
  .rosary-print-callout--cross { bottom: 3mm; left: 4mm; }
  .rosary-print-callout--first { right: 4mm; bottom: 3mm; }
  .rosary-print-callout--three { bottom: 34mm; left: 4mm; }
  .rosary-print-callout--decade { top: 4mm; right: 4mm; }
  .rosary-print-callout--large { top: 4mm; left: 4mm; }
  .rosary-print-sheet__steps { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; margin-top: 4mm; }
  .rosary-print-sheet__steps section { display: grid; grid-template-columns: 10mm 1fr; gap: 3mm; align-items: start; padding: 3mm; border: .6mm solid #c9e3e5; border-radius: 4mm; background: #fff !important; break-inside: avoid; }
  .rosary-print-sheet__steps section > span { display: grid; width: 9mm; height: 9mm; place-items: center; border-radius: 50%; color: #123d54; background: #f5c44f !important; font-size: 11pt; font-weight: 950; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .rosary-print-sheet__steps strong { display: block; font-size: 9pt; }
  .rosary-print-sheet__steps p { margin: 1mm 0 0; font-size: 7.5pt; line-height: 1.28; }
  .rosary-print-sheet aside { display: flex; align-items: center; gap: 4mm; margin-top: 4mm; padding: 3.5mm 5mm; border-radius: 4mm; color: #fff; background: #0d7894 !important; font-size: 12pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .rosary-print-sheet aside span { font-size: 21pt; }
  .rosary-print-sheet footer { display: flex; justify-content: space-between; margin-top: 4mm; padding-top: 2.5mm; border-top: .5mm solid #c9e3e5; color: #557382; font-size: 8pt; font-weight: 800; }
}
.rosary-style-medal {
  width: 42px;
  height: 50px;
  flex-basis: 42px;
  padding: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 249, 210, 0.96), rgba(245, 196, 79, 0.28) 62%, transparent 72%);
  filter: drop-shadow(0 3px 5px rgba(9, 46, 64, 0.28));
}
.rosary-token__medal {
  width: 66px;
  height: 78px;
  padding: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 249, 210, 0.98), rgba(245, 196, 79, 0.25) 62%, transparent 74%) !important;
  filter: drop-shadow(0 5px 8px rgba(9, 46, 64, 0.34));
}
.rosary-slot--medal {
  z-index: 6;
  width: clamp(38px, 4.6vw, 52px);
  height: clamp(46px, 5.6vw, 64px);
}
.rosary-slot--medal.is-filled::before {
  position: absolute;
  inset: -8px;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 249, 210, 0.9), rgba(245, 196, 79, 0.34) 54%, transparent 73%);
  filter: drop-shadow(0 3px 7px rgba(7, 43, 58, 0.36));
}
.rosary-medal-shape {
  inset: -6px;
  filter: drop-shadow(0 4px 5px rgba(7, 43, 58, 0.36));
}
.rosary-finish-preview .rosary-slot--medal {
  width: clamp(46px, 6.2vw, 68px);
  height: clamp(56px, 7.5vw, 82px);
}
.rosary-slot--cross {
  width: clamp(30px, 4.4vw, 48px);
  height: clamp(43px, 5.7vw, 62px);
}
.rosary-finish-preview .rosary-slot--cross {
  width: clamp(28px, 4vw, 44px);
  height: clamp(41px, 5.3vw, 58px);
  top: 85.5% !important;
}
@media (max-width: 620px) {
  .rosary-style-medal { width: 38px; height: 46px; flex-basis: 38px; }
  .rosary-token__medal { width: 60px; height: 70px; }
  .rosary-slot--medal { width: clamp(32px, 9vw, 42px); height: clamp(39px, 11vw, 52px); }
  .rosary-finish-preview .rosary-slot--medal { width: clamp(39px, 11vw, 52px); height: clamp(48px, 13.5vw, 64px); }
  .rosary-slot--cross { width: clamp(26px, 7vw, 36px); height: clamp(38px, 10vw, 50px); }
}
@media print {
  .rosary-print-sheet .rosary-slot--medal { width: 12mm; height: 14.5mm; }
}