/* ==========================================================================
   game-ui.css · reusable pieces rebuilt from the game's own UI:
   letter tiles, wheel discs, the letter wheel, crossword board, wood panels,
   HUD pills, the title sign, phone frames and ambient light.
   ========================================================================== */

/* ---- Letter tile (crossword cell) --------------------------------------- */

.tile {
  --s: 48px;
  display: inline-grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  /* Baloo 2 capitals sit ~0.025em high at line-height 1; nudge them down. */
  padding-top: 0.05em;
  border: 1px solid rgb(255 222 168 / 0.8);
  border-radius: calc(var(--s) * 0.2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--s) * 0.56);
  line-height: 1;
  color: var(--candy-ink);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.38) 0%, rgb(255 255 255 / 0.06) 40%, transparent 56%),
    linear-gradient(180deg, var(--candy-top), var(--candy-bottom));
  box-shadow:
    inset 0 -3px 5px rgb(138 77 26 / 0.3),
    0 calc(var(--s) * 0.06) 0 var(--candy-edge),
    0 calc(var(--s) * 0.16) calc(var(--s) * 0.3) rgb(20 8 2 / 0.3);
  user-select: none;
}

/* Empty crossword slot. */
.tile--slot {
  color: transparent;
  border-color: rgb(255 255 255 / 0.75);
  background: linear-gradient(180deg, var(--slot-top), var(--slot-bottom));
  box-shadow:
    inset 0 2px 3px rgb(255 255 255 / 0.6),
    inset 0 -2px 3px rgb(58 36 16 / 0.16),
    0 calc(var(--s) * 0.05) 0 rgb(58 36 16 / 0.45);
}

/* The letter two words share — glows like the store's interlock diagram. */
.tile--key {
  border-color: rgb(255 250 222 / 0.9);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.45) 0%, transparent 55%),
    linear-gradient(158deg, #ffe08a, #ffbb45 52%, #ee9524);
  box-shadow:
    inset 0 -3px 5px rgb(150 80 16 / 0.3),
    0 calc(var(--s) * 0.06) 0 var(--candy-edge),
    0 0 calc(var(--s) * 0.55) rgb(255 190 90 / 0.75);
}

/* Faint background tiles, as in the store art's side gutters. */
.tile--ghost {
  color: #ffefc8;
  opacity: var(--ghost-o, 0.16);
  text-shadow: 0 2px 3px rgb(90 40 8 / 0.5);
}

/* ---- Wheel disc ---------------------------------------------------------- */

.disc {
  --d: 56px;
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  padding: 0.05em 0 0;
  border: 2px solid #f9d59b;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--d) * 0.5);
  line-height: 1;
  color: var(--candy-ink);
  background:
    radial-gradient(circle at 34% 26%, rgb(255 255 255 / 0.62) 0 10%, rgb(255 255 255 / 0) 32%),
    linear-gradient(180deg, var(--candy-top), var(--candy-bottom));
  box-shadow:
    inset 0 -4px 6px rgb(138 77 26 / 0.35),
    0 calc(var(--d) * 0.07) 0 var(--candy-edge),
    0 calc(var(--d) * 0.16) calc(var(--d) * 0.26) rgb(10 4 2 / 0.4);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Cream discs from the main-menu wheel. */
.disc--cream {
  border-color: #dcbb83;
  background:
    radial-gradient(circle at 34% 26%, rgb(255 255 255 / 0.9) 0 10%, rgb(255 255 255 / 0) 34%),
    linear-gradient(180deg, #fffaf0, #ecdab5);
  box-shadow:
    inset 0 -4px 6px rgb(120 80 30 / 0.2),
    0 calc(var(--d) * 0.07) 0 #a47a45,
    0 calc(var(--d) * 0.16) calc(var(--d) * 0.26) rgb(10 4 2 / 0.4);
}

/* ---- Letter wheel --------------------------------------------------------- */

.wheel {
  --wheel: 240px;
  --count: 5;
  --radius: calc(var(--wheel) * 0.34);
  position: relative;
  flex: none;
  width: var(--wheel);
  height: var(--wheel);
  border: calc(var(--wheel) * 0.018) solid var(--wood-border);
  border-radius: 50%;
  background: radial-gradient(circle, var(--wood-top) 0%, var(--wood-edge) 100%);
  box-shadow:
    inset 0 0 0 calc(var(--wheel) * 0.03) rgb(255 255 255 / 0.05),
    inset 0 10px 30px rgb(0 0 0 / 0.35),
    0 18px 40px rgb(10 4 2 / 0.3);
}

.wheel__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.wheel__spoke {
  stroke: rgb(255 255 255 / 0.15);
  stroke-width: 0.7;
}

.wheel__path {
  fill: none;
  stroke: #ffd873;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgb(255 190 90 / 0.8));
}

/* Discs sit on a circle: rotate out to the angle, push along the radius,
   rotate back upright. `--pop` scales a disc in place when selected. */
.wheel .disc {
  --d: calc(var(--wheel) * 0.26);
  --a: calc(-90deg + var(--i, 0) * (360deg / var(--count)));
  position: absolute;
  left: 50%;
  top: 50%;
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  transform: rotate(var(--a)) translate(var(--radius)) rotate(calc(-1 * var(--a))) scale(var(--pop, 1));
  transition:
    transform 0.18s var(--ease-out),
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.wheel.is-shuffling .disc {
  transition-duration: 0.55s;
}

.wheel .disc.is-selected {
  --pop: 1.1;
  border-color: #fff3c4;
  background:
    radial-gradient(circle at 34% 26%, rgb(255 255 255 / 0.7) 0 10%, rgb(255 255 255 / 0) 32%),
    linear-gradient(180deg, #ffe08a, #ffb23e);
  box-shadow:
    0 0 0 calc(var(--d) * 0.07) rgb(255 216 115 / 0.45),
    0 calc(var(--d) * 0.07) 0 var(--candy-edge),
    0 0 calc(var(--d) * 0.5) rgb(255 190 90 / 0.8);
}

.wheel__hub {
  --h: calc(var(--wheel) * 0.25);
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--h);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--h) / -2);
  padding: 0;
  border: 2px solid var(--shuffle-light);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.5) 0 10%, rgb(255 255 255 / 0) 36%),
    linear-gradient(180deg, #5b93f6, var(--shuffle));
  box-shadow:
    0 calc(var(--h) * 0.06) 0 #1d3f99,
    0 calc(var(--h) * 0.16) calc(var(--h) * 0.3) rgb(10 20 60 / 0.45);
}

.wheel__hub .icon {
  width: 46%;
  height: 46%;
}

/* The main menu's hub is a wooden socket with a gold star. */
.wheel__hub--star {
  border: 0;
  color: var(--coin);
  background: radial-gradient(circle, #4a2c1f, var(--wood-bottom));
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.35);
}

/* ---- Crossword board ------------------------------------------------------ */

.board {
  position: relative;
  padding: clamp(10px, 3.5%, 16px);
  border: 1px solid rgb(92 56 39 / 0.6);
  border-radius: 22px;
  background: linear-gradient(145deg, rgb(77 45 31 / 0.78), rgb(61 37 28 / 0.78));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 10px 22px rgb(40 20 8 / 0.25);
}

.board__grid {
  --cols: 8;
  --gap: 5px;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
}

.board__grid .tile {
  --s: 34px;
  width: auto;
  height: auto;
  aspect-ratio: 1;
}

@supports (width: 1cqi) {
  .board__grid .tile {
    --s: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols));
  }
}

/* ---- HUD pills and round tool buttons ------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 40px;
  padding: 0 1em;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1rem;
  color: #fff4e0;
  background: linear-gradient(180deg, #5a3626, #3b2216);
  box-shadow:
    inset 0 1px 0 rgb(255 220 170 / 0.2),
    0 3px 0 var(--wood-edge),
    0 8px 14px rgb(10 4 2 / 0.22);
  white-space: nowrap;
}

.pill .icon {
  width: 1.2em;
  height: 1.2em;
}

.pill__leaf {
  color: #6fbf6a;
  width: 0.9em !important;
  height: 0.9em !important;
}

.pill__value {
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.tool {
  --t: 52px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--t);
  height: var(--t);
  padding: 0;
  border: 2px solid var(--wood-rim);
  border-radius: 50%;
  color: #fde047;
  background: radial-gradient(circle at 40% 30%, #7a4e38, var(--wood-border) 60%, var(--wood-top));
  box-shadow:
    0 4px 0 var(--wood-edge),
    0 8px 14px rgb(0 0 0 / 0.28);
  transition: translate 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), opacity 0.2s;
}

.tool .icon {
  width: 48%;
  height: 48%;
}

button.tool:active {
  translate: 0 3px;
  box-shadow: 0 1px 0 var(--wood-edge);
}

.tool[aria-disabled="true"] {
  opacity: 0.55;
}

.tool__cost {
  position: absolute;
  left: 50%;
  bottom: -15px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px 1px 5px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--coin);
  background: #3b2216;
  translate: -50% 0;
}

.tool__cost .icon {
  width: 0.95em;
  height: 0.95em;
}

.tool__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border: 2px solid var(--wood-edge);
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--stroke);
  background: var(--coin);
}

/* ---- Gold icon medallion ---------------------------------------------------- */

.medallion {
  --m: 56px;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--m);
  height: var(--m);
  border-radius: 50%;
  color: #5a330e;
  background: linear-gradient(180deg, #ffda80, #eda02d);
  box-shadow:
    inset 0 2px 2px rgb(255 255 255 / 0.6),
    inset 0 -3px 4px rgb(150 80 16 / 0.35),
    0 6px 14px rgb(8 4 2 / 0.32);
}

.medallion .icon {
  width: 52%;
  height: 52%;
}

/* ---- Wood panel with gold rim and corner rivets (main-menu tiles) --------- */

.wood-panel {
  --rivet: radial-gradient(circle, #ffe7a6 0 2.5px, #a8742a 3px 4px, transparent 4.5px);
  position: relative;
  border: 2px solid #c8963e;
  border-radius: var(--radius);
  background:
    var(--rivet) 6px 6px / 16px 16px no-repeat,
    var(--rivet) calc(100% - 6px) 6px / 16px 16px no-repeat,
    var(--rivet) 6px calc(100% - 6px) / 16px 16px no-repeat,
    var(--rivet) calc(100% - 6px) calc(100% - 6px) / 16px 16px no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.025) 0 2px, transparent 2px 11px, rgb(0 0 0 / 0.05) 11px 12px, transparent 12px 19px),
    linear-gradient(170deg, #6b4128, #4a2b1b 58%, #3c2216);
  box-shadow:
    inset 0 0 0 3px rgb(58 28 10 / 0.55),
    inset 0 3px 0 rgb(255 230 180 / 0.16),
    0 18px 36px rgb(8 4 2 / 0.42);
}

/* ---- The main-menu title sign -------------------------------------------- */

.sign {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3em 1.1em 0.34em;
  border: 2px solid #3a2012;
  border-radius: 0.5em;
  font-size: clamp(1.55rem, 1.05rem + 1.8vw, 2.35rem);
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.03) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #8a5a36, #6b4127 45%, #4f2d1a);
  box-shadow:
    inset 0 2px 0 rgb(255 225 170 / 0.3),
    inset 0 -3px 0 rgb(30 14 6 / 0.35),
    0 6px 0 var(--wood-edge),
    0 16px 30px rgb(8 4 2 / 0.4);
}

.sign__line {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff6e0 0%, #f9dcae 55%, #e2a85e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 var(--stroke)) drop-shadow(0 0 1px var(--stroke));
}

.sign__sub {
  margin-top: 0.08em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.52em;
  line-height: 1.1;
  color: #f7b24a;
  text-shadow: 0 1px 0 var(--stroke);
}

/* Leaves on the top corners and a blossom on top, as on the in-game sign. */
.sign::before,
.sign::after {
  content: "";
  position: absolute;
  top: -0.32em;
  width: 0.72em;
  height: 0.5em;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, #8fd07e, #3f8a3f);
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.25);
}

.sign::before {
  left: 0.45em;
  rotate: -18deg;
}

.sign::after {
  right: 0.45em;
  rotate: 108deg;
}

.sign__blossom {
  position: absolute;
  top: -0.44em;
  left: 50%;
  width: 0.56em;
  height: 0.56em;
  translate: -50% 0;
  background:
    radial-gradient(circle at 50% 52%, #ffe1ee 0 16%, transparent 17%),
    radial-gradient(circle at 50% 20%, var(--blossom) 0 21%, transparent 22%),
    radial-gradient(circle at 80% 42%, var(--blossom) 0 21%, transparent 22%),
    radial-gradient(circle at 68% 80%, var(--blossom) 0 21%, transparent 22%),
    radial-gradient(circle at 32% 80%, var(--blossom) 0 21%, transparent 22%),
    radial-gradient(circle at 20% 42%, var(--blossom) 0 21%, transparent 22%);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.3));
}

/* ---- Phone frame ------------------------------------------------------------ */

.device {
  --w: 300px;
  position: relative;
  width: var(--w);
  margin: 0;
  padding: calc(var(--w) * 0.018);
  border-radius: calc(var(--w) * 0.14);
  background: linear-gradient(160deg, #2c2c35, #050506);
  box-shadow:
    0 0 0 1.5px rgb(255 210 140 / 0.22),
    inset 0 1px 2px rgb(255 255 255 / 0.22),
    var(--shadow-deep),
    0 0 70px var(--device-glow, rgb(255 190 90 / 0.3));
}

.device__screen {
  display: block;
  overflow: hidden;
  aspect-ratio: 1080 / 2412;
  border-radius: calc(var(--w) * 0.122);
  background: #120a06;
}

.device__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Coin-reward card (the in-game Level Complete card) -------------------- */

.win-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 22px 20px;
  border: 1px solid #6a4430;
  border-radius: 26px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #4a2a1c, #37201a);
  box-shadow: 0 24px 50px rgb(10 4 2 / 0.5);
}

.trophy-ring {
  --tr: 76px;
  display: grid;
  place-items: center;
  width: var(--tr);
  height: var(--tr);
  border: 3px solid var(--coin);
  border-radius: 50%;
  color: var(--coin);
  background: radial-gradient(circle, #3d241a, var(--wood-edge));
  box-shadow: 0 0 26px rgb(252 194 0 / 0.5);
}

.trophy-ring .icon {
  width: 48%;
  height: 48%;
}

/* The in-game orange "Next Level" button. */
.btn--next {
  color: var(--stroke);
  background: linear-gradient(90deg, #f6b352, #ea8f3f);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    0 8px 22px rgb(234 143 63 / 0.4);
}

/* ---- Ambient light --------------------------------------------------------- */

.bokeh {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  opacity: var(--o, 0.6);
  background: radial-gradient(circle, rgb(255 225 160 / 0.9), rgb(255 200 110 / 0.25) 55%, transparent 72%);
  pointer-events: none;
  animation: glow-pulse var(--t, 7s) ease-in-out infinite;
}

/* ---- Floating decoration ---------------------------------------------------- */

.floaty {
  position: absolute;
  rotate: var(--rot, 0deg);
  animation:
    pop-in 0.7s var(--ease-spring) both,
    float var(--dur, 7s) ease-in-out var(--fd, 0s) infinite;
  animation-delay: var(--pd, 0.4s), var(--fd, 0s);
  pointer-events: none;
}