/* Galgje: the flower on the left, tip and word on the right, a large keyboard below the word. */
.gl { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: 'picture info' 'picture word' 'picture keys'; grid-template-rows: auto auto 1fr; gap: 18px 36px; max-width: 980px; margin: 0 auto; }
.gl-picture { grid-area: picture; align-self: start; }
.gl-flower { display: block; width: 100%; height: auto; overflow: visible; }
.gl-petal { transform-box: view-box; transform-origin: 100px 78px; transition: transform .9s ease-in, opacity .9s ease-in; }

.gl-info { grid-area: info; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.gl-info p { margin: 0; }
.gl-tip { font: 700 28px/1.2 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.gl-label { display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: 999px; background: #eef4f0; vertical-align: 4px; font: 700 13px/1.3 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #2f5d45; }
.gl-length, .gl-left { font-size: 18px; color: #4b5563; }
.gl-left { font-weight: 700; color: #2f5d45; }

.gl-word { grid-area: word; display: flex; justify-content: flex-start; gap: 8px; margin: 8px 0 6px; container-type: inline-size; }
.gl-slot { flex: 0 1 52px; min-width: 0; display: grid; place-items: end center; height: 64px; padding-bottom: 4px; border-bottom: 4px solid #2f5d45; font: 700 38px/1 Georgia, 'Times New Roman', serif; font-size: min(38px, calc(100cqi / var(--n) * .66)); color: #1a1a1a; }
.gl-slot.is-missed { color: #b4536b; border-bottom-color: #dc8ea1; }

.gl-keys { grid-area: keys; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; align-content: start; }
.gl-keys[hidden] { display: none; }
.gl-key { min-height: 56px; padding: 0; border: 1.5px solid #cfe2d6; border-radius: 10px; background: #fff; box-shadow: 0 2px 0 #cfe2d6; font: 700 24px/1 Inter, system-ui, sans-serif; color: #1f2937; cursor: pointer; touch-action: manipulation; }
.gl-key:hover:not(:disabled) { border-color: #2f5d45; }
.gl-key:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.gl-key:disabled { cursor: default; box-shadow: none; }
.gl-key.is-hit { background: #2f5d45; border-color: #2f5d45; color: #fff; }
.gl-key.is-miss { background: #f1efea; border-color: #e7e2d6; color: #9ca3af; text-decoration: line-through; }
.gl-key:disabled:not(.is-hit):not(.is-miss) { opacity: .5; }


@media (prefers-reduced-motion: reduce) { .gl-petal { transition: none; } }

@media (max-width: 760px) {
  .gl { grid-template-columns: 118px minmax(0, 1fr); grid-template-areas: 'picture info' 'word word' 'keys keys'; grid-template-rows: auto; gap: 12px 14px; }
  .gl-picture { align-self: center; }
  .gl-info { flex-direction: column; align-items: flex-start; gap: 4px; }
  .gl-tip { font-size: 23px; }
  .gl-label { display: table; margin: 0 0 6px; vertical-align: 0; }
  .gl-length, .gl-left { font-size: 17px; }
  .gl-word { justify-content: center; gap: 4px; margin: 4px 0; }
  .gl-slot { flex-basis: 44px; height: 50px; border-bottom-width: 3px; }
  .gl-keys { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .gl-key { min-height: 50px; font-size: 22px; }
}

/* A letter given by the tip: green like a right guess, with a dotted edge. */
.gl-key.is-given { outline: 3px dotted #f2b705; outline-offset: -6px; }

/* Larger text: bigger letters in the word and on the keys. */
.sp--large .gl-tip { font-size: 31px; }
.sp--large .gl-length, .sp--large .gl-left { font-size: 20px; }
.sp--large .gl-slot { font-size: min(44px, calc(100cqi / var(--n) * .74)); height: 70px; }
.sp--large .gl-key { min-height: 62px; font-size: 27px; }
@media (max-width: 760px) {
  .sp--large .gl-tip { font-size: 25px; }
  .sp--large .gl-slot { height: 56px; }
  .sp--large .gl-keys { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sp--large .gl-key { min-height: 56px; font-size: 25px; }
}

/* More contrast: firm key edges, black letters, misses clearly struck out. */
.sp--contrast .gl-key { border-color: #1f2937; box-shadow: 0 2px 0 #1f2937; color: #000; }
.sp--contrast .gl-key.is-hit { background: #14532d; border-color: #14532d; }
.sp--contrast .gl-key.is-miss { background: #d1d5db; border-color: #6b7280; color: #374151; }
.sp--contrast .gl-slot { border-bottom-color: #000; color: #000; }
.sp--contrast .gl-length { color: #111; }
.sp--contrast .gl-left { color: #14532d; }