/* Theme: kitchen (category "mad") - light theme: warm cream with tomato red,
 * a rail of hanging utensils along the top and a red gingham tablecloth edge at the bottom. */

html[data-ordleg-theme="kitchen"] {
  --bg: radial-gradient(ellipse 60% 50% at 50% 0%, #fffaf1 0%, rgba(255, 250, 241, 0) 100%),
        radial-gradient(ellipse 50% 45% at 0% 100%, rgba(232, 176, 120, 0.28) 0%, rgba(232, 176, 120, 0) 100%),
        radial-gradient(ellipse 50% 45% at 100% 100%, rgba(232, 176, 120, 0.28) 0%, rgba(232, 176, 120, 0) 100%),
        linear-gradient(180deg, #fbf3e4 0%, #f6e8d0 100%);
  --fg: #3a1d0f;
  --fg-muted: #6a4231;
  --accent: #c2361f;
  --accent-fg: #ffffff;
  --card: rgba(255, 255, 255, 0.6);
  --card-strong: rgba(255, 253, 248, 0.97);
  --card-border: rgba(58, 29, 15, 0.14);
  --taboo: #b3261e;
  --taboo-bg: rgba(194, 54, 31, 0.09);
  --timer-ok: #3d7a36;
  --timer-warn: #c2361f;
  --ok: #2f7a33;
  --bad: #b3261e;
  --subtle: rgba(58, 29, 15, 0.12);
  --selected-bg: rgba(255, 255, 255, 0.9);
  --selected-ring: rgba(194, 54, 31, 0.28);
  --overlay: rgba(40, 18, 8, 0.5);
}

/* --- Gingham tablecloth edge along the bottom --- */
html[data-ordleg-theme="kitchen"] .theme-deco .deco-a {
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(26px, 4.2vh, 110px);
  background:
    linear-gradient(180deg, rgba(150, 30, 15, 0.35) 0 2px, rgba(150, 30, 15, 0) 2px),
    repeating-linear-gradient(90deg, rgba(200, 50, 30, 0.42) 0 clamp(12px, 1.25vw, 36px), rgba(200, 50, 30, 0) clamp(12px, 1.25vw, 36px) clamp(24px, 2.5vw, 72px)),
    repeating-linear-gradient(180deg, rgba(200, 50, 30, 0.42) 0 clamp(12px, 1.25vw, 36px), rgba(200, 50, 30, 0) clamp(12px, 1.25vw, 36px) clamp(24px, 2.5vw, 72px)),
    #fffaf3;
  box-shadow: 0 -0.4vh 1.2vh rgba(120, 60, 20, 0.12);
}

/* --- Utensil rail along the top: a thin wooden bar with hooks --- */
html[data-ordleg-theme="kitchen"] .theme-deco .deco-a::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(5px, 0.7vh, 16px);
  background: linear-gradient(180deg, #d79a5c 0%, #a8662e 70%, #7c4a20 100%);
  box-shadow: 0 0.3vh 0.6vh rgba(90, 50, 20, 0.25);
}

html[data-ordleg-theme="kitchen"] .theme-deco .deco-b,
html[data-ordleg-theme="kitchen"] .theme-deco .deco-c {
  top: clamp(3px, 0.5vh, 12px);
  width: clamp(130px, 11vw, 400px);
  aspect-ratio: 260 / 200;
  background: no-repeat 0 0 / 100% 100%;
  filter: drop-shadow(0.3vw 0.5vh 0.4vh rgba(90, 50, 20, 0.25));
  transform-origin: 50% 0;
  animation: ordleg-kitchen-swing 7s ease-in-out infinite alternate;
}
html[data-ordleg-theme="kitchen"] .theme-deco .deco-b {
  left: 21.5vw;
  background-image: url("../../assets/themes/kitchen/utensils-left.svg");
}
html[data-ordleg-theme="kitchen"] .theme-deco .deco-c {
  left: 68vw;
  background-image: url("../../assets/themes/kitchen/utensils-right.svg");
  animation-delay: -3.5s;
}
@keyframes ordleg-kitchen-swing { from { transform: rotate(-0.8deg); } to { transform: rotate(0.8deg); } }

/* Short screens: the start screen scrolls under the fixed rail, so hide the hanging utensils there */
@media (max-height: 900px) {
  html[data-ordleg-theme="kitchen"][data-screen="start"] .theme-deco .deco-b,
  html[data-ordleg-theme="kitchen"][data-screen="start"] .theme-deco .deco-c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ordleg-theme="kitchen"] .theme-deco .deco-b,
  html[data-ordleg-theme="kitchen"] .theme-deco .deco-c { animation: none; }
}