:root {
  --canvas: #d8d1bd;
  --surface: #fff5dc;
  --surface-raised: #fffaf0;
  --surface-muted: #e4e7d5;
  --ink: #242b25;
  --ink-soft: #5d675c;
  --forest: #1f5949;
  --forest-deep: #123d34;
  --sage: #9ab59b;
  --sage-soft: #d9e5cd;
  --terracotta: #b75c40;
  --line: #685f4e;
  --line-strong: #383d32;
  --shadow-soft: 10px 0 0 rgba(41, 48, 39, .18);
  --shadow-card: 6px 7px 0 rgba(49, 55, 44, .18);
  --radius-xl: 8px;
  --radius-lg: 6px;
  --radius-md: 4px;
  --pixel-corner: 8px;
}

body {
  background-color: var(--canvas);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25% 75%, rgba(255,255,255,.22) 75%),
    linear-gradient(45deg, rgba(49,71,58,.07) 25%, transparent 25% 75%, rgba(49,71,58,.07) 75%);
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
}

body::before,
body::after {
  width: 112px;
  height: 112px;
  border-radius: 0;
  filter: none;
  opacity: .34;
  clip-path: polygon(16% 0,84% 0,84% 8%,100% 8%,100% 76%,92% 76%,92% 92%,76% 92%,76% 100%,16% 100%,16% 92%,0 92%,0 16%,8% 16%,8% 8%,16% 8%);
}

body::before { left: -42px; top: 52px; background: #8eab8e; }
body::after { right: -48px; bottom: 38px; background: #c77a5f; }

.game-shell {
  border-inline: 3px solid #35473c;
  background-color: var(--surface);
  background-image:
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 18%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(67,78,63,.025) 23px 24px);
  box-shadow: var(--shadow-soft);
}

.game-shell::before {
  height: 7px;
  background: repeating-linear-gradient(90deg, var(--forest) 0 24px, var(--sage) 24px 40px, var(--terracotta) 40px 56px);
}

.screen.is-active { animation: pixelScreenEnter .36s steps(6, end) both; }

.brand-mark,
.eyebrow {
  text-shadow: 1px 1px 0 rgba(255,255,255,.9);
}

.title-copy h1,
.screen-thinking h2,
.screen-result h2,
.loading-title {
  text-shadow: 2px 2px 0 rgba(154,181,155,.56);
}

.topbar {
  border-bottom: 2px dashed rgba(56,61,50,.24);
}

.filters,
.result-visual,
.plakai-comment,
.shuffle-name,
dialog {
  border: 2px solid var(--line-strong);
  border-radius: 0;
  clip-path: polygon(var(--pixel-corner) 0,calc(100% - var(--pixel-corner)) 0,calc(100% - var(--pixel-corner)) 4px,100% 4px,100% calc(100% - var(--pixel-corner)),calc(100% - 4px) calc(100% - var(--pixel-corner)),calc(100% - 4px) 100%,var(--pixel-corner) 100%,var(--pixel-corner) calc(100% - 4px),0 calc(100% - 4px),0 var(--pixel-corner),4px var(--pixel-corner),4px 4px,var(--pixel-corner) 4px);
  box-shadow: var(--shadow-card), inset 3px 3px 0 rgba(255,255,255,.52);
  backdrop-filter: none;
}

.filters {
  background-color: #fff9e9;
  background-image: repeating-linear-gradient(0deg, transparent 0 15px, rgba(58,66,54,.035) 15px 16px);
}

.category-filter-panel { border-top: 2px dashed rgba(56,61,50,.25); }

.button,
.filter-chip,
.icon-button,
.text-button,
.utility-button {
  border-radius: 0;
  clip-path: polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,100% 3px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) 100%,6px 100%,6px calc(100% - 3px),0 calc(100% - 3px),0 6px,3px 6px,3px 3px,6px 3px);
}

.button {
  border: 2px solid var(--line-strong);
  box-shadow: 0 4px 0 #263d33;
  transition: transform .12s steps(2, end), box-shadow .12s steps(2, end), filter .12s;
}

.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 #263d33; }

.button-primary {
  background: var(--forest);
  box-shadow: 0 4px 0 var(--forest-deep);
}

.button-secondary {
  border-color: var(--line-strong);
  background: #fffaf0;
  box-shadow: 0 4px 0 #b7af9e;
}

.filter-chip,
.icon-button,
.text-button {
  border: 2px solid #787160;
  background: #fffaf0;
  box-shadow: 0 3px 0 #c3bba9;
}

.filter-chip {
  transition: transform .12s steps(2,end), box-shadow .12s steps(2,end), color .12s, background-color .12s;
}

.filter-chip:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.filter-chip.is-selected { border-color: var(--forest-deep); box-shadow: 0 3px 0 #123d34; }

.utility-button {
  border: 1px solid transparent;
}

.progress {
  height: 12px;
  border: 2px solid var(--line-strong);
  border-radius: 0;
  padding: 2px;
  background: repeating-linear-gradient(90deg, #d0c7b3 0 10px, #eee6d2 10px 12px);
}

.progress span {
  border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--forest) 0 10px, #357360 10px 12px);
  transition: width .18s steps(12, end);
}

.loading-fish {
  width: 80px;
  height: 80px;
  border: 3px solid var(--line-strong);
  border-radius: 0;
  background:
    linear-gradient(90deg, transparent 0 7px, rgba(31,89,73,.08) 7px 8px),
    linear-gradient(transparent 0 7px, rgba(31,89,73,.08) 7px 8px),
    #fff7e5;
  background-size: 8px 8px;
  box-shadow: 6px 6px 0 rgba(49,55,44,.18);
  clip-path: polygon(12px 0,68px 0,68px 4px,76px 4px,76px 12px,80px 12px,80px 68px,76px 68px,76px 76px,68px 76px,68px 80px,12px 80px,12px 76px,4px 76px,4px 68px,0 68px,0 12px,4px 12px,4px 4px,12px 4px);
}

.loading-fish::before {
  inset: 12px;
  border-width: 4px;
  border-radius: 0;
  animation: pixelOrbit 1.1s steps(8,end) infinite;
}

.loading-fish::after {
  width: 24px;
  height: 16px;
  border-radius: 0;
  clip-path: polygon(0 25%,25% 25%,25% 0,75% 0,75% 25%,100% 25%,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%);
  box-shadow: 12px 0 0 -4px var(--forest);
}

.plakai-stage::before {
  width: 216px;
  border-radius: 0;
  background:
    linear-gradient(45deg, transparent 36%, rgba(154,181,155,.38) 36% 64%, transparent 64%),
    linear-gradient(-45deg, transparent 36%, rgba(154,181,155,.26) 36% 64%, transparent 64%);
  background-size: 24px 24px;
  animation: pixelGlow 3.2s steps(4,end) infinite;
}

.plakai-stage::after {
  height: 12px;
  border-radius: 0;
  filter: none;
  background: repeating-linear-gradient(90deg, rgba(36,43,37,.18) 0 8px, rgba(36,43,37,.08) 8px 16px);
}

img.plakai,
img.mini-plakai {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(4px 6px 0 rgba(44,49,40,.2));
}

img.is-shared-sprite {
  aspect-ratio: 1;
  object-fit: contain;
  object-position: 50% 88%;
  image-rendering: pixelated;
}

.screen-thinking.is-active img.is-shared-sprite,
.mini-plakai.is-shared-sprite {
  animation: none;
}

.screen-thinking.is-active img.is-shared-sprite[data-sprite-motion="walk"] { animation: spriteWalkIn .72s steps(8,end) both; }
.screen-thinking.is-active img.is-shared-sprite[data-sprite-motion="ear_twitch"] { animation: spriteListen .8s steps(5,end) both; }
.screen-thinking.is-active img.is-shared-sprite[data-sprite-motion="tail_sway"] { animation: spriteInspect 1.05s steps(7,end) both; }
.screen-thinking.is-active img.is-shared-sprite[data-sprite-motion="tap_react"] { animation: spritePawTap .72s steps(6,end) both; }
.screen-thinking.is-active img.is-shared-sprite[data-sprite-motion="success"] { animation: spriteVerdict .78s steps(7,end) both; }

.food-art,
.meal-card img,
#savedPreview {
  image-rendering: auto;
}

.thought-dot,
.thought-bubble {
  border: 2px solid var(--line-strong);
  border-radius: 0;
  background: #fffaf0;
  box-shadow: 4px 4px 0 rgba(49,55,44,.16);
}

.thought-dot { clip-path: polygon(25% 0,75% 0,75% 25%,100% 25%,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%,0 25%,25% 25%); }
.thought-bubble { clip-path: polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,100% 4px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) 100%,8px 100%,8px calc(100% - 4px),0 calc(100% - 4px),0 8px,4px 8px,4px 4px,8px 4px); }

.shuffle-name { background: #fff9e9; }
.thinking-status::before { width: 6px; opacity: 1; }

.thinking-locks span {
  border: 2px solid var(--forest);
  border-radius: 0;
  background: #fffaf0;
}

.thinking-locks span.is-locked {
  border-radius: 0;
  box-shadow: 3px 3px 0 rgba(33,75,67,.22);
}

.meal-card {
  border: 3px solid #fff8e6;
  border-radius: 0;
  outline: 2px solid var(--line-strong);
  box-shadow: 5px 6px 0 rgba(42,48,39,.22);
  transition-timing-function: steps(7,end);
}

.meal-card.is-focused {
  border-color: #fff3b4;
  box-shadow: 6px 8px 0 rgba(183,92,64,.25), 0 0 0 3px rgba(183,92,64,.36);
}

.meal-card::after { border-radius: 0; }

.thinking-signal {
  border-width: 2px;
  border-radius: 0;
}

.result-visual {
  background:
    linear-gradient(45deg, rgba(255,255,255,.82), rgba(217,229,205,.72)),
    var(--surface-muted);
}

.result-visual::before {
  border: 2px dashed rgba(31,89,73,.26);
  border-radius: 0;
  transform: rotate(45deg) scale(.74);
}

.food-art {
  border: 4px solid #fffaf0;
  border-radius: 8px;
  outline: 2px solid var(--line-strong);
  box-shadow: 6px 7px 0 rgba(49,55,44,.22);
}

.category-label,
.result-meta span {
  border-radius: 0;
  clip-path: polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,100% 2px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) 100%,4px 100%,4px calc(100% - 2px),0 calc(100% - 2px),0 4px,2px 4px,2px 2px,4px 2px);
}

.category-label {
  border: 1px solid var(--forest);
  background: var(--sage-soft);
}

.result-meta span {
  border: 1px solid #787160;
  background: #fffaf0;
}

.result-meta span::before { border-radius: 0; }

.plakai-comment { background: #fffaf0; }

.steam {
  width: 6px;
  height: 42px;
  border: 0;
  border-radius: 0;
  filter: none;
  background: rgba(255,255,255,.7);
  box-shadow: 8px -10px 0 rgba(255,255,255,.48), -5px -20px 0 rgba(255,255,255,.32);
  animation: pixelSteam 2.2s steps(6,end) infinite;
}

.decision-celebration,
.toast {
  border-radius: 0;
  border: 2px solid var(--line-strong);
  box-shadow: 6px 6px 0 rgba(34,42,35,.24);
  clip-path: polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,100% 4px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) 100%,8px 100%,8px calc(100% - 4px),0 calc(100% - 4px),0 8px,4px 8px,4px 4px,8px 4px);
}

.screen-title.is-active .plakai-idle {
  animation: pixelIdle 3.4s steps(8,end) infinite;
}

.screen-thinking.is-active .plakai-thinking {
  animation-timing-function: steps(7,end);
}

.mini-plakai[class*="reaction-"] {
  animation-timing-function: steps(6,end);
}

@keyframes pixelScreenEnter {
  0% { opacity: 0; transform: translateY(12px); filter: contrast(.7); }
  100% { opacity: 1; transform: translateY(0); filter: contrast(1); }
}

@keyframes pixelOrbit { to { transform: rotate(360deg); } }

@keyframes pixelGlow {
  0%,100% { transform: scale(.96); opacity: .58; background-position: 0 0,0 0; }
  50% { transform: scale(1.04); opacity: .9; background-position: 12px 0,-12px 0; }
}

@keyframes pixelIdle {
  0%,100% { transform: translate(0,0) scale(1); }
  42% { transform: translate(0,-3px) scale(1.008); }
  48% { transform: translate(1px,-4px) scale(1.012); }
  54% { transform: translate(-1px,-4px) scale(1.012); }
}

@keyframes pixelSteam {
  0% { opacity: 0; transform: translate(8px,18px); }
  28% { opacity: .72; }
  100% { opacity: 0; transform: translate(-8px,-30px); }
}

@keyframes spriteWalkIn {
  from { transform: translateX(-34px); opacity: .5; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes spriteListen {
  0%,100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-3px) rotate(-2deg); }
}

@keyframes spriteInspect {
  0%,100% { transform: translateX(0) rotate(0); }
  35% { transform: translateX(-6px) rotate(-2deg); }
  68% { transform: translateX(6px) rotate(2deg); }
}

@keyframes spritePawTap {
  0%,100% { transform: translateY(0) scale(1); }
  48% { transform: translateY(5px) scale(.98); }
}

@keyframes spriteVerdict {
  0% { transform: translateY(5px) scale(.96); }
  52% { transform: translateY(-10px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

@media (max-width: 350px) {
  :root { --pixel-corner: 6px; }
  .game-shell { border-inline-width: 2px; }
  .filters, .result-visual, .plakai-comment, .shuffle-name { box-shadow: 4px 5px 0 rgba(49,55,44,.16); }
}

@media (min-width: 700px) {
  .game-shell {
    border: 3px solid #35473c;
    border-radius: 0;
    clip-path: polygon(12px 0,calc(100% - 12px) 0,calc(100% - 12px) 4px,100% 4px,100% calc(100% - 12px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) 100%,12px 100%,12px calc(100% - 4px),0 calc(100% - 4px),0 12px,4px 12px,4px 4px,12px 4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen.is-active,
  .screen-title.is-active .plakai-idle,
  .screen-thinking.is-active .plakai-thinking,
  .mini-plakai[class*="reaction-"] {
    animation: none !important;
  }
}