@font-face {
  font-family: "Bungee";
  src: url("Bungee-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* Design tokens and responsive layout values */
:root {
  --purple: #4b0082;
  --violet: #9400d3;
  --green: #268a52;
  --red: #d93646;
  --gold: #f2bd38;
  --accent: var(--purple);
  --safari-colour: var(--purple);
  --font-display: "Bungee", Impact, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;

  --orb-width: min(430px, calc(100vw - 24px));
  --orb-height: calc(100svh - 24px);
  --panel-width: min(410px, calc(100vw - 24px));
  --flower-size: 410px;
  --flower-centre: 50%;
  --word-offset: -206px;
  --word-font-size: 26px;
  --matt-font-size: 20px;
  --control-offset: 159px;
  --control-height: 48px;
  --petal-control-gap: 20px;
  --hive-scale: 1;
  --hive-top-offset: 170px;
  --score-height: 72px;
  --words-padding-block: 8px;
  --words-padding-inline: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
}

html {
  background-color: var(--safari-colour);
  touch-action: manipulation;
}

body {
  position: relative;
  min-width: 280px;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  background-color: var(--safari-colour);
  background-image: linear-gradient(to bottom, var(--violet), var(--purple));
  background-repeat: no-repeat;
  font-family: var(--font-display);
  touch-action: manipulation;
}

/* iOS Safari can adopt a fixed full-screen layer or repeating gradient as its
   browser-bar colour. Keep these transient layers absolute and non-repeating. */
body::before,
body::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  opacity: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  transition: opacity .2s ease;
}

body::before {
  background-image: linear-gradient(to bottom, #ef5360, #a90e29);
}

body::after {
  background-image: linear-gradient(to bottom, #43b96f, #17683c);
}

body.result-invalid {
  --accent: var(--red);
}

body.result-valid {
  --accent: var(--green);
}

body.result-celebration {
  --accent: var(--gold);
}

body.result-invalid::before,
body.result-valid::after {
  opacity: 1;
}

body.result-celebration::after {
  background-image:
    radial-gradient(circle at center, rgb(255 255 255 / 88%) 0 4%, transparent 28%),
    linear-gradient(to bottom, #f5c84b, #6c248f 72%, #321052);
  opacity: 1;
  animation: celebration-background 1.1s ease both;
}

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:focus-visible {
  outline: 3px solid #f2beff;
  outline-offset: 3px;
}

/* Particle effects */
#particles {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#particles.foreground {
  z-index: 6;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
  background: rgb(255 255 255 / 72%);
  transform: translate(-50%, -50%);
  animation: particle-burst 2s ease-out forwards;
}

.particle.success {
  box-shadow: 0 0 8px rgb(255 255 255 / 75%);
  animation-name: success-burst;
  animation-timing-function: cubic-bezier(.12, .7, .2, 1);
}

.particle.big-bang {
  box-shadow: 0 0 12px currentColor;
}

.shockwave {
  position: absolute;
  width: 82px;
  height: 82px;
  border: 4px solid #fff;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  animation: shockwave 1.15s cubic-bezier(.12, .7, .2, 1) forwards;
}

@keyframes particle-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }

  12% {
    opacity: 1;
    transform: translate(
      calc(-50% + var(--x-start)),
      calc(-50% + var(--y-start))
    ) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--x)),
      calc(-50% + var(--y))
    ) scale(.15);
  }
}

@keyframes success-burst {
  0% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--x-start)),
      calc(-50% + var(--y-start))
    ) scale(.2);
  }

  8% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--x)),
      calc(-50% + var(--y))
    ) scale(.05);
  }
}

@keyframes shockwave {
  0% {
    opacity: .95;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(10);
  }
}

@keyframes celebration-background {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: .92; }
}

/* Page and expanding game shell */
.page {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}

.orb {
  position: relative;
  z-index: 2;
  width: 180px;
  height: 180px;
  overflow: visible;
  color: var(--accent);
  transition:
    width .8s cubic-bezier(.22, 1, .36, 1),
    height .8s cubic-bezier(.22, 1, .36, 1);
}

.orb.expanded {
  width: var(--orb-width);
  height: var(--orb-height);
}

.orb.expanded.closing {
  width: 180px;
  height: 180px;
  transition-delay: .2s;
}

/* Initial ML control */
.initials {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: grid;
  width: 180px;
  height: 180px;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  color: var(--accent);
  background: #fff;
  box-shadow: 0 18px 60px rgb(0 0 0 / 10%);
  font: inherit;
  cursor: pointer;
  user-select: none;
  transform: translate(-50%, -50%);
  transition:
    width .34s cubic-bezier(.22, 1, .36, 1),
    height .34s cubic-bezier(.22, 1, .36, 1),
    top .34s cubic-bezier(.22, 1, .36, 1),
    color .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .3s ease,
    opacity .18s ease .76s;
}

.orb:not(.expanded) .initials:hover {
  box-shadow: 0 22px 70px rgb(0 0 0 / 20%);
}

.initials-closed {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  transition: gap .28s ease;
}

.initials-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 55px;
  line-height: .9;
  transition: font-size .34s cubic-bezier(.22, 1, .36, 1);
}

.initials-m,
.initials-l {
  display: block;
}

.initials-l {
  max-width: .7em;
  overflow: hidden;
  opacity: 1;
  transition:
    max-width .3s cubic-bezier(.22, 1, .36, 1),
    opacity .14s ease,
    transform .28s ease;
}

.initials-name {
  display: block;
  max-height: 16px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 1;
  transition:
    max-height .2s ease,
    opacity .12s ease,
    transform .24s ease;
}

/* The closed state is the first paint, not an animation state. Transitions
   begin only after the user opens the game, and remain active while closing. */
.orb:not(.expanded),
.orb:not(.expanded) .initials,
.orb:not(.expanded) .initials-closed,
.orb:not(.expanded) .initials-mark,
.orb:not(.expanded) .initials-l,
.orb:not(.expanded) .initials-name {
  transition: none;
}

.orb.expanded .initials {
  top: var(--flower-centre);
  width: 82px;
  height: 82px;
  border: 4px solid #fff;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
  opacity: 0;
  pointer-events: none;
}

.orb.expanded .initials-closed {
  gap: 0;
}

.orb.expanded .initials-mark {
  font-size: 27px;
}

.orb.expanded .initials-l {
  max-width: 0;
  opacity: 0;
  transform: translateX(8px) scale(.7);
}

.orb.expanded .initials-name {
  max-height: 0;
  opacity: 0;
  transform: translateY(5px) scale(.85);
}

.orb.expanded.closing .initials {
  top: 50%;
  width: 180px;
  height: 180px;
  border: 0;
  color: var(--accent);
  background: #fff;
  box-shadow: 0 18px 60px rgb(0 0 0 / 10%);
  opacity: 1;
  transition-delay: 0s;
}

.orb.expanded.closing .initials-closed {
  gap: 8px;
}

.orb.expanded.closing .initials-mark {
  font-size: 55px;
}

.orb.expanded.closing .initials-l {
  max-width: .7em;
  opacity: 1;
  transform: none;
}

.orb.expanded.closing .initials-name {
  max-height: 16px;
  opacity: 1;
  transform: none;
}

/* Expanded game layout */
.game {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.orb.expanded .game {
  opacity: 1;
  pointer-events: auto;
}

.orb.closing .game {
  pointer-events: none;
}

.game-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

.delete,
.shuffle {
  position: absolute;
  z-index: 12;
  top: 0;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 13px 30px rgb(0 0 0 / 20%);
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, transform .12s ease, opacity .15s ease;
}

.delete {
  left: calc(100% + 10px);
  display: grid;
  place-items: center;
}

.shuffle {
  right: calc(100% + 10px);
  display: grid;
  place-items: center;
}

.delete img,
.shuffle img {
  display: block;
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.delete:hover,
.shuffle:hover {
  transform: scale(1.05);
}

.delete:active,
.shuffle:active {
  transform: scale(.94);
}

.delete:disabled,
.shuffle:disabled {
  cursor: wait;
  opacity: .6;
}

/* Top-corner actions */
.corner-action {
  position: absolute;
  z-index: 12;
  top: 0;
  display: flex;
  width: 60px;
  padding: 0;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  border: 0;
  color: #fff;
  background: transparent;
  font: 9px/1 var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: 0;
  cursor: pointer;
  transform: translateY(-8px);
}

.corner-action.reset {
  left: calc(50% - 50vw + max(12px, env(safe-area-inset-left)));
}

.corner-action.close {
  right: calc(50% - 50vw + max(12px, env(safe-area-inset-right)));
}

.corner-action-icon {
  display: grid;
  width: 58px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 9px 24px rgb(0 0 0 / 16%);
  transition: transform .12s ease;
}

.corner-action-icon::before {
  display: block;
  width: 25px;
  height: 25px;
  background: var(--purple);
  content: "";
  mask: center / contain no-repeat;
  -webkit-mask: center / contain no-repeat;
}

.corner-action.reset .corner-action-icon::before {
  mask-image: url("reset.svg");
  -webkit-mask-image: url("reset.svg");
}

.corner-action.close .corner-action-icon::before {
  mask-image: url("close.svg");
  -webkit-mask-image: url("close.svg");
}

.corner-action img {
  display: none;
}

.corner-action:hover .corner-action-icon {
  transform: scale(1.05);
}

.corner-action:active .corner-action-icon {
  transform: scale(.94);
}

.orb.expanded .corner-action {
  opacity: 1;
  transform: none;
  animation: corner-action-in .4s ease 1.02s backwards;
}

/* Score and found-word list */
.score,
.words {
  position: absolute;
  z-index: 4;
  left: 50%;
  width: var(--panel-width);
  color: #fff;
  opacity: 0;
}

.score {
  top: 0;
  display: flex;
  height: var(--score-height);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: translateX(-50%) translateY(-10px);
}

.orb.expanded .score,
.orb.expanded .words {
  opacity: 1;
  transform: translateX(-50%);
}

.orb.expanded .score {
  animation: score-in .46s ease 1.02s backwards;
}

.score b {
  font-family: var(--font-ui);
  font-size: 24px;
  line-height: 1;
}

.words {
  top: calc(
    var(--flower-centre) +
    var(--control-offset) +
    var(--control-height) +
    var(--petal-control-gap)
  );
  bottom: 0;
  padding: var(--words-padding-block) var(--words-padding-inline);
  overflow: hidden;
  transform: translateX(-50%) translateY(10px);
}

.orb.expanded .words {
  animation: panel-in .46s ease 1.02s backwards;
}

.found {
  display: flex;
  height: 100%;
  align-content: safe flex-end;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  overflow-y: auto;
  padding: 2px 2px 8px;
  scrollbar-color: rgb(255 255 255 / 45%) transparent;
  scrollbar-width: thin;
}

.chip {
  padding: 6px 9px;
  border-radius: 13px;
  color: #fff;
  background: rgb(255 255 255 / 15%);
  font: 600 12px/1.2 var(--font-ui);
}

/* Letter flower */
.flower {
  position: absolute;
  z-index: 3;
  top: var(--flower-centre);
  left: 50%;
  width: min(var(--flower-size), calc(100vw - 24px));
  height: min(var(--flower-size), calc(100vw - 24px));
  overflow: visible;
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.orb.expanded .flower {
  opacity: 1;
}

.orb.expanded .flower.shake {
  animation: flower-shake .5s cubic-bezier(.36, .07, .19, .97);
}

.hive {
  position: absolute;
  top: calc(50% - var(--hive-top-offset));
  left: 50%;
  width: 360px;
  height: 310px;
  margin-left: -180px;
  transform: scale(var(--hive-scale));
  transform-origin: center top;
}

.letter {
  position: absolute;
  display: grid;
  width: 82px;
  height: 82px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--accent);
  background: #fff;
  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
  font: 27px/1 var(--font-display);
  cursor: pointer;
  transition:
    color .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    transform .12s ease,
    opacity .15s ease;
}

.orb.expanded.opening .letter.center {
  animation: centre-letter-in .2s ease .7s backwards;
}

.orb.expanded.opening .letter:not(.center) {
  animation: letter-arrive .46s cubic-bezier(.2, .8, .25, 1.25) var(--letter-delay) backwards;
}

.orb.expanded.closing .letter.center {
  animation: centre-letter-out .2s ease .58s both;
}

.orb.expanded.closing .letter:not(.center) {
  animation: letter-depart .46s cubic-bezier(.55, 0, .8, .2) both;
  pointer-events: none;
}

.orb.expanded .hive.shuffling .letter:not(.center) {
  opacity: 0;
  transform: translate(var(--from-x), var(--from-y)) scale(.18);
  pointer-events: none;
}

.orb.expanded .hive.shuffling.shuffle-out .letter:not(.center) {
  animation: letter-depart .4s cubic-bezier(.55, 0, .8, .2) both;
}

.orb.expanded .hive.shuffling.shuffle-in .letter:not(.center) {
  animation: letter-arrive .46s cubic-bezier(.2, .8, .25, 1.25) var(--letter-delay) both;
}

.orb.expanded .flower.big-bang .letter {
  animation: petal-boom .82s cubic-bezier(.2, .8, .25, 1.2) both;
}

.orb.expanded.closing .score {
  animation: score-out .2s ease both;
  pointer-events: none;
}

.orb.expanded.closing .words,
.orb.expanded.closing .wordbox,
.orb.expanded.closing .controls,
.orb.expanded.closing .corner-action {
  animation: interface-out .2s ease both;
  pointer-events: none;
}

.letter:hover {
  transform: scale(1.05);
}

.letter:active {
  transform: scale(.94);
}

.letter:disabled {
  cursor: wait;
  opacity: .65;
}

.letter.center {
  z-index: 2;
  border: 4px solid #fff;
  color: #fff;
  background: var(--accent);
}

.p0 { left: 139px; top: 129px; }
.p1 { left: 139px; top: 20px; --from-x: 0px; --from-y: 109px; --letter-delay: 0s; }
.p2 { left: 224px; top: 61px; --from-x: -85px; --from-y: 68px; --letter-delay: .08s; }
.p3 { left: 245px; top: 153px; --from-x: -106px; --from-y: -24px; --letter-delay: .16s; }
.p4 { left: 186px; top: 227px; --from-x: -47px; --from-y: -98px; --letter-delay: .24s; }
.p5 { left: 92px; top: 227px; --from-x: 47px; --from-y: -98px; --letter-delay: .32s; }
.p6 { left: 33px; top: 153px; --from-x: 106px; --from-y: -24px; --letter-delay: .40s; }
.p7 { left: 54px; top: 61px; --from-x: 85px; --from-y: 68px; --letter-delay: .48s; }

/* Typed word and controls */
.wordbox {
  position: absolute;
  z-index: 5;
  top: calc(var(--flower-centre) + var(--word-offset));
  left: 50%;
  width: min(360px, calc(100vw - 48px));
  min-height: 36px;
  color: #fff;
  font-size: var(--word-font-size);
  letter-spacing: .04em;
  transform: translateX(-50%);
  transition: color .15s ease;
}

.wordbox.matt {
  font-size: var(--matt-font-size);
  letter-spacing: .02em;
  white-space: nowrap;
}

.wordbox.celebration {
  font-size: 22px;
  letter-spacing: .03em;
  text-shadow: 0 2px 14px rgb(47 8 73 / 55%);
  white-space: nowrap;
}

.controls {
  position: absolute;
  z-index: 5;
  top: calc(var(--flower-centre) + var(--control-offset));
  left: 50%;
  width: 108px;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.orb.expanded .controls {
  animation: control-in .4s ease 1.1s backwards;
  opacity: 1;
  transform: translateX(-50%);
}

.enter {
  min-width: 108px;
  min-height: var(--control-height);
  padding: 10px 22px;
  border: 0;
  border-radius: 25px;
  color: var(--accent);
  background: #fff;
  box-shadow: 0 13px 30px rgb(0 0 0 / 20%);
  font: 800 14px/1.2 var(--font-ui);
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .2s ease, transform .12s ease, opacity .15s ease;
}

.enter:hover {
  transform: translateY(-2px);
}

.enter:active {
  transform: translateY(0) scale(.95);
}

.enter:disabled {
  cursor: wait;
  opacity: .6;
}

/* Reset confirmation */
.reset-dialog {
  width: min(340px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 24px;
  color: var(--purple);
  background: #fff;
  box-shadow: 0 24px 80px rgb(34 0 55 / 36%);
}

.reset-dialog::backdrop {
  background: rgb(34 0 55 / 62%);
  backdrop-filter: blur(4px);
}

.reset-dialog form {
  padding: 30px 28px 26px;
  text-align: center;
}

.reset-dialog h2 {
  margin: 0 0 12px;
  font: 24px/1.1 var(--font-display);
}

.reset-dialog p {
  margin: 0;
  color: #5f4c69;
  font: 15px/1.45 var(--font-ui);
}

.reset-dialog-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.dialog-button {
  min-width: 108px;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 22px;
  font: 800 13px/1.2 var(--font-ui);
  letter-spacing: .04em;
  cursor: pointer;
}

.dialog-button.cancel {
  color: var(--purple);
  background: #f0e8f4;
}

.dialog-button.confirm {
  color: #fff;
  background: var(--purple);
}

/* Motion */
@keyframes centre-letter-in {
  from {
    opacity: 0;
    transform: scale(.72);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes centre-letter-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(.72);
  }
}

@keyframes letter-arrive {
  0% {
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) scale(.18);
  }

  62% {
    opacity: 1;
  }

  82% {
    transform: translate(0, 0) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes letter-depart {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  38% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) scale(.18);
  }
}

@keyframes interface-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes score-out {
  from {
    opacity: 1;
    transform: translateX(-50%);
  }

  to {
    opacity: 0;
    transform: translateX(-50%);
  }
}

@keyframes petal-boom {
  0%, 100% { transform: scale(1); }
  28% { transform: scale(1.2); }
  55% { transform: scale(.9); }
  76% { transform: scale(1.08); }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@keyframes score-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@keyframes control-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@keyframes corner-action-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes flower-shake {
  0%, 100% { transform: translate(-50%, -50%) translateX(0); }
  15% { transform: translate(-50%, -50%) translateX(-13px); }
  30% { transform: translate(-50%, -50%) translateX(11px); }
  45% { transform: translate(-50%, -50%) translateX(-8px); }
  60% { transform: translate(-50%, -50%) translateX(6px); }
  75% { transform: translate(-50%, -50%) translateX(-3px); }
}

/* Responsive values override the design tokens above */
@media (max-width: 380px), (max-height: 700px) {
  :root {
    --word-offset: -185px;
    --word-font-size: 23px;
    --control-offset: 140px;
    --hive-scale: .86;
    --hive-top-offset: 146px;
  }
}

@media (max-width: 380px) {
  :root {
    --matt-font-size: 17px;
  }
}

@media (max-height: 700px) {
  :root {
    --flower-size: 360px;
    --words-padding-block: 6px;
  }
}

@media (max-height: 620px) {
  :root {
    --flower-size: 320px;
    --word-offset: -170px;
    --word-font-size: 20px;
    --control-offset: 126px;
    --hive-scale: .76;
    --hive-top-offset: 129px;
    --words-padding-block: 5px;
    --words-padding-inline: 15px;
  }
}

@media (max-height: 570px) {
  :root {
    --control-height: 42px;
  }
}

@media (max-height: 500px) {
  :root {
    --flower-size: 240px;
    --word-offset: -140px;
    --word-font-size: 18px;
    --control-offset: 98px;
    --petal-control-gap: 15px;
    --score-height: 60px;
    --hive-scale: .56;
    --hive-top-offset: 95px;
  }
}

@media (max-width: 340px) and (min-height: 501px) {
  :root {
    --word-offset: -155px;
    --control-offset: 112px;
    --hive-scale: .66;
    --hive-top-offset: 112px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .particle {
    display: none;
  }

  .shockwave {
    display: none;
  }

  body::before,
  body::after,
  .orb,
  .initials,
  .initials-closed,
  .initials-mark,
  .initials-l,
  .initials-name,
  .close,
  .reset,
  .corner-action-icon,
  .delete,
  .shuffle,
  .letter,
  .enter {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .orb.expanded .flower,
  .orb.expanded .score,
  .orb.expanded .words,
  .orb.expanded .controls,
  .orb.expanded .corner-action,
  .orb.expanded .letter {
    animation: none !important;
  }

  .orb.expanded .flower,
  .orb.expanded .words,
  .orb.expanded .score,
  .orb.expanded .controls,
  .orb.expanded .corner-action {
    opacity: 1;
  }

  .orb.expanded .words,
  .orb.expanded .score,
  .orb.expanded .controls {
    transform: translateX(-50%);
  }
}