/* v0.19 — component compositor. Artwork is project-local ImageGen output; CSS only lays out live components and state. */
body.component-theme {
  margin: 0;
  min-height: 100svh;
  overflow: hidden;
  background: #063d51;
}

body.component-theme #app {
  width: min(100vw, 390px);
  height: min(100svh, 844px);
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
}

.component-game {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  color: #fff1c7;
  font-family: "Noto Sans Thai", Tahoma, sans-serif;
}

.component-scene {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: #08718c url("assets/scene-garden-v1.webp") center / cover no-repeat;
  transform: scale(1.015);
  animation: scene-breathe 12s ease-in-out infinite alternate;
}

.component-game::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2,35,47,.1), transparent 55%, rgba(2,29,39,.32));
}

.component-hud {
  position: absolute;
  z-index: 30;
  top: max(4px, env(safe-area-inset-top, 0px));
  left: 4px;
  right: 4px;
  height: 78px;
  animation: component-enter-top 500ms cubic-bezier(.2,.9,.25,1.1) both;
}

.component-hud-art,
.component-status > img,
.component-rules img,
.component-command > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: fill;
}

.component-score {
  position: absolute;
  top: 20px;
  width: 22%;
  color: #fff4cf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 38px;
  text-align: center;
  text-shadow: 0 3px 2px rgba(43,17,4,.72), 0 0 8px rgba(255,225,128,.45);
}
.component-score.red { left: 6%; }
.component-score.blue { right: 6%; }

.component-turn {
  position: absolute;
  top: 17px;
  left: 30%;
  right: 30%;
  display: grid;
  place-items: center;
  text-align: center;
}
.component-turn strong { font-size: 17px; line-height: 22px; text-shadow: 0 2px 2px rgba(0,0,0,.72); }
.component-turn small { color: #d8d5c3; font-size: 10px; line-height: 13px; }
.component-game.ai-thinking .component-turn strong { animation: thinking-glow 1s ease-in-out infinite; }

.component-board {
  position: absolute;
  z-index: 5;
  top: 8.5%;
  left: 0;
  right: 0;
  height: 58%;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

.component-board-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.component-board-scroll::-webkit-scrollbar { display: none; }

.tilemap-svg {
  display: block;
  width: var(--tilemap-width);
  height: var(--tilemap-height);
  min-width: var(--tilemap-width);
  min-height: var(--tilemap-height);
  overflow: visible;
  filter: drop-shadow(0 13px 10px rgba(0,28,35,.48));
}

.tilemap-cell {
  opacity: 1 !important;
  cursor: default;
  transform-box: fill-box;
  transform-origin: center;
}
.tilemap-cell.legal { cursor: pointer; }
.tile-art { pointer-events: none; }
.tile-hit {
  fill: rgba(255,255,255,.001);
  stroke: rgba(104,76,32,.15);
  stroke-width: 1.2;
  pointer-events: all;
  transition: fill 140ms ease, stroke 140ms ease, filter 140ms ease;
}
.tilemap-cell.legal:hover .tile-hit,
.tilemap-cell.legal:focus-visible .tile-hit {
  fill: rgba(255,225,110,.28);
  stroke: #ffe17c;
  stroke-width: 3;
  filter: drop-shadow(0 0 5px #ffd45a);
}
.tilemap-cell:focus { outline: none; }
.tile-piece {
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(34,18,4,.48));
}
.tile-number { display: none; }
.tile-danger,
.tile-effect {
  fill: #fff3c2;
  stroke: #34210e;
  stroke-width: 3px;
  paint-order: stroke;
  font-size: 9px;
  font-weight: 950;
  text-anchor: middle;
  pointer-events: none;
}
.tile-effect { fill: #fff19d; font-size: 10px; }
.tilemap-cell.atari .tile-piece { filter: drop-shadow(0 0 6px #ff733d) drop-shadow(0 3px 2px rgba(34,18,4,.48)); }
.tilemap-cell.conversion-preview .tile-piece { animation: preview-flip 650ms ease-in-out infinite alternate; }
.tilemap-cell.capture-preview .tile-piece { animation: preview-danger 480ms ease-in-out infinite alternate; }
.tilemap-cell.sacrifice-preview-point .tile-hit { stroke: #ff854f; stroke-width: 4; }

.tilemap-cell.just-placed .tile-piece { animation: tile-drop 520ms cubic-bezier(.12,.9,.22,1.25) both; }
.tilemap-cell.just-converted .tile-piece { animation: tile-flip 720ms ease-in-out both; }
.tilemap-cell.just-captured .tile-art { animation: tile-capture 720ms ease-out both; }

.component-zoom {
  position: absolute;
  z-index: 12;
  top: 6px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(3,49,59,.72);
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
}
.component-zoom button,
.component-zoom strong {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #fff0bf;
  font-size: 16px;
}
.component-zoom strong { width: 42px; font-size: 10px; }

.component-status {
  position: absolute;
  z-index: 20;
  top: 63.3%;
  left: 11%;
  right: 11%;
  height: 35px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 22px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
}
.component-status i { z-index: 1; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.component-status i.red { color: #ff5c4e; background: currentColor; }
.component-status i.blue { color: #48bfff; background: currentColor; }
.component-status span { z-index: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.component-rules {
  position: absolute;
  z-index: 18;
  top: 67.4%;
  left: 3.5%;
  right: 3.5%;
  height: 43px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.component-rules > div { position: relative; display: grid; place-items: center; min-width: 0; }
.component-rules span { z-index: 1; color: #fff0bf; font-size: 10px; font-weight: 850; white-space: nowrap; text-shadow: 0 2px 2px rgba(0,0,0,.66); }

.component-pieces {
  position: absolute;
  z-index: 22;
  top: 72.8%;
  left: 4%;
  right: 4%;
  height: 112px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.component-piece {
  position: relative;
  min-width: 0;
  padding: 0 0 19px;
  border: 0;
  background: transparent;
  color: #fff2c8;
  cursor: pointer;
}
.component-piece img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 5px 4px rgba(0,28,34,.46));
  transition: transform 160ms ease, filter 160ms ease;
}
.component-piece strong {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-shadow: 0 2px 2px rgba(0,0,0,.72);
}
.component-piece.selected img { transform: translateY(-3px); filter: drop-shadow(0 0 8px #ffe169) drop-shadow(0 5px 4px rgba(0,28,34,.46)); }
.component-piece.selected strong { color: #fff8b7; }
.component-piece.cooling img { filter: grayscale(.9) brightness(.48); }
.component-piece em {
  position: absolute;
  top: 56px;
  left: 50%;
  min-width: 48px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(24,28,27,.9);
  color: #fff0bd;
  font-size: 11px;
  font-style: normal;
  transform: translateX(-50%);
}

.component-commands {
  position: absolute;
  z-index: 24;
  left: 13%;
  right: 13%;
  bottom: max(35px, env(safe-area-inset-bottom, 0px));
  height: 70px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
.component-command {
  position: relative;
  min-width: 0;
  min-height: 56px;
  padding: 0 0 3px;
  border: 0;
  background: transparent;
  color: #fff0bd;
  cursor: pointer;
}
.component-command > img { object-fit: contain; }
.component-command b {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 0;
  right: 0;
  font-size: 23px;
  line-height: 28px;
  text-align: center;
  text-shadow: 0 3px 2px rgba(0,0,0,.56);
}
.component-command .command-icon {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: 0;
  right: 0;
  width: 26px;
  height: 26px;
  margin: auto;
  color: #fff0bd;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.56));
  pointer-events: none;
}
.component-command span {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -5px;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0,0,0,.72);
}
.component-command:active img { transform: scale(.94); }
.component-command:disabled { opacity: .38; filter: grayscale(.7); cursor: default; }

.component-game > .game-over-banner {
  position: absolute;
  z-index: 50;
  top: 90px;
  left: 12%;
  right: 12%;
}

/* Onboarding is composed too: pure scene + live panel/capsules, never the old baked tutorial screen. */
body.component-theme .onboarding-backdrop {
  padding: 9px;
  background: #08718c url("assets/scene-garden-v1.webp") center / cover no-repeat;
  backdrop-filter: none;
}
body.component-theme .onboarding-dialog {
  position: relative;
  width: min(374px, calc(100vw - 18px));
  height: min(826px, calc(100svh - 18px));
  min-height: 0;
  display: grid;
  grid-template-rows: 82px 22px minmax(0, 1fr) 74px;
  overflow: hidden;
  border: 2px solid #d8ad56;
  border-radius: 26px;
  background: rgba(255,248,224,.95);
  color: #243934;
  box-shadow: 0 24px 70px rgba(0,29,38,.56), inset 0 0 28px rgba(116,75,24,.1);
}
body.component-theme .onboarding-header {
  position: relative;
  inset: auto;
  height: auto;
  margin: 7px 9px 0;
  padding: 10px 32px;
  border: 0;
  background: url("assets/component-hud-v1.webp") center / 100% 100% no-repeat;
  color: #fff2c5;
  text-align: center;
}
body.component-theme .onboarding-header > div { width: 100%; }
body.component-theme .onboarding-header .eyebrow { display: none; }
body.component-theme .onboarding-header strong { display: block; font-size: 17px; text-shadow: 0 2px 2px rgba(0,0,0,.72); }
body.component-theme .onboarding-header span { position: absolute; right: 23px; top: 26px; color: #fff2c5; font-size: 11px; }
body.component-theme .onboarding-progress {
  position: relative;
  inset: auto;
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 5px 0 0;
}
body.component-theme .onboarding-progress i { width: 24px; height: 5px; border: 0; border-radius: 99px; background: rgba(27,85,82,.24); }
body.component-theme .onboarding-progress i.active { background: #d49d35; box-shadow: 0 0 6px rgba(212,157,53,.5); transform: none; }
body.component-theme .onboarding-content.lesson-step,
body.component-theme .onboarding-content.rank-step {
  position: relative;
  inset: auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 11px 16px 8px;
  overflow: auto;
}
body.component-theme .lesson-copy,
body.component-theme .rank-intro { height: auto; padding: 0; text-align: center; }
body.component-theme .onboarding-kicker { margin: 0 0 5px; color: #9a4b31; font-size: 11px; line-height: 16px; letter-spacing: 0; }
body.component-theme .lesson-copy h2,
body.component-theme .rank-intro h2 { margin: 0 0 7px; color: #183f3c; font-size: 24px; line-height: 1.2; }
body.component-theme .lesson-copy > p:last-child,
body.component-theme .rank-intro > p:last-child { margin: 0; color: #514b3d; font-size: 13px; line-height: 1.45; }
body.component-theme .lesson-visual {
  position: relative;
  inset: auto;
  height: auto;
  min-height: 270px;
  margin-top: 10px;
  border: 0;
  border-radius: 24px;
  background: rgba(224,205,159,.58);
  box-shadow: inset 0 0 0 1px rgba(114,78,31,.28);
}
body.component-theme .tutorial-board { width: 100%; height: 100%; max-height: 300px; }
body.component-theme .onboarding-content.rank-step { display: block; }
body.component-theme .rank-grid { grid-template-columns: 1fr; gap: 7px; }
body.component-theme .rank-card,
body.component-theme .rank-card.selected { min-height: 72px; background: rgba(255,251,230,.74); }
body.component-theme .onboarding-actions {
  position: relative;
  inset: auto;
  height: auto;
  padding: 7px 14px 10px;
  border: 0;
  align-items: center;
}
body.component-theme .tutorial-button,
body.component-theme .tutorial-button.next,
body.component-theme .tutorial-button.start {
  position: relative;
  width: 46%;
  min-width: 0;
  min-height: 53px;
  padding: 5px 13px;
  border: 0;
  background: url("assets/component-capsule-v1.webp") center / 100% 100% no-repeat;
  color: #fff1c2;
  font-size: 14px;
  text-shadow: 0 2px 2px rgba(0,0,0,.68);
}
body.component-theme .tutorial-button:disabled { opacity: .35; }

@keyframes scene-breathe { from { transform: scale(1.015) translateY(0); } to { transform: scale(1.03) translateY(-3px); } }
@keyframes component-enter-top { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes thinking-glow { 0%,100% { opacity: .68; } 50% { opacity: 1; text-shadow: 0 0 10px #7ff5ff, 0 2px 2px rgba(0,0,0,.72); } }
@keyframes tile-drop { 0% { opacity: 0; transform: translateY(-28px) scale(1.34); } 68% { opacity: 1; transform: translateY(3px) scale(.94); } 100% { transform: translateY(0) scale(1); } }
@keyframes tile-flip { 0% { transform: scaleX(1); filter: brightness(1); } 48% { transform: scaleX(.06); filter: brightness(1.8); } 100% { transform: scaleX(1); filter: brightness(1); } }
@keyframes tile-capture { 0% { filter: brightness(1); } 40% { filter: brightness(2) drop-shadow(0 0 9px #fff1a5); transform: scale(1.08); } 100% { filter: brightness(1); transform: scale(1); } }
@keyframes preview-flip { from { transform: scaleX(1); } to { transform: scaleX(.72); filter: brightness(1.3); } }
@keyframes preview-danger { from { transform: translateX(-1px); } to { transform: translateX(1px); filter: drop-shadow(0 0 6px #ff643e); } }

@media (max-height: 720px) {
  .component-hud { height: 68px; }
  .component-score { top: 16px; font-size: 29px; }
  .component-turn { top: 13px; }
  .component-board { top: 8%; height: 57%; }
  .component-status { top: 62.5%; }
  .component-rules { top: 67%; height: 38px; }
  .component-pieces { top: 72%; height: 96px; }
  .component-piece img { width: 70px; height: 70px; }
  .component-piece em { top: 48px; }
  .component-commands { bottom: max(29px, env(safe-area-inset-bottom, 0px)); height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .component-scene,
  .component-hud,
  .component-game.ai-thinking .component-turn strong,
  .tilemap-cell.just-placed .tile-piece,
  .tilemap-cell.just-converted .tile-piece,
  .tilemap-cell.just-captured .tile-art,
  .tilemap-cell.conversion-preview .tile-piece,
  .tilemap-cell.capture-preview .tile-piece { animation: none !important; }
}

/* v0.20 — composition pass: generated frame/shelves remain separate from all live UI. */
.component-hud {
  top: max(5px, env(safe-area-inset-top, 0px));
  left: 6px;
  right: 6px;
  height: 82px;
}
.component-score { top: 20px; font-size: 32px; }
.component-turn { top: 29px; left: 28%; right: 28%; }
.component-turn strong { font-size: 16px; line-height: 20px; white-space: nowrap; }
.component-turn small { max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.component-board {
  top: 8.7%;
  left: 2px;
  right: 2px;
  height: 55.7%;
  overflow: visible;
}
.component-board-scroll {
  z-index: 6;
  inset: 23px 19px 27px;
  border-radius: 36px;
  -webkit-mask-image: radial-gradient(ellipse 72% 66% at 50% 50%, #000 86%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 66% at 50% 50%, #000 86%, transparent 100%);
}
.component-board-canvas {
  width: max(100%, var(--tilemap-width));
  height: max(100%, var(--tilemap-height));
  min-width: max(100%, var(--tilemap-width));
  min-height: max(100%, var(--tilemap-height));
  display: grid;
  place-items: center;
}
.component-board-frame {
  position: absolute;
  z-index: 11;
  inset: -2px 0;
  width: 100%;
  height: calc(100% + 4px);
  object-fit: fill;
  pointer-events: none;
  filter: drop-shadow(0 12px 10px rgba(0,25,32,.46));
}
.tilemap-svg { margin: 0; filter: drop-shadow(0 8px 6px rgba(0,28,35,.32)); }
.tile-tone-0 .tile-art { filter: brightness(.96) saturate(.94); }
.tile-tone-1 .tile-art { filter: brightness(1.02); }
.tile-tone-2 .tile-art { filter: brightness(.99) sepia(.035); }
.component-zoom {
  z-index: 15;
  top: 28px;
  right: 19px;
  border: 1px solid rgba(225,190,99,.55);
  background: rgba(3,49,59,.84);
}
.component-zoom button { min-width: 32px; min-height: 32px; }

.component-control-tray {
  position: absolute;
  z-index: 16;
  pointer-events: none;
  object-fit: fill;
  filter: drop-shadow(0 9px 8px rgba(0,30,35,.44));
}
.component-control-tray.piece-tray {
  top: 70.4%;
  left: -8px;
  width: calc(100% + 16px);
  height: 132px;
}
.component-control-tray.command-tray {
  left: 54px;
  right: 54px;
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  width: auto;
  height: 92px;
  opacity: .96;
}
.component-status { top: 63.5%; }
.component-status { justify-content: center; text-align: center; }
.component-rules { top: 67.1%; }
.component-pieces { z-index: 22; top: 72.2%; }
.component-piece img { width: 78px; height: 78px; }
.component-piece strong { bottom: 3px; }
.component-commands {
  z-index: 24;
  bottom: max(21px, env(safe-area-inset-bottom, 0px));
}
.component-command span { bottom: 2px; }

body.component-theme .onboarding-dialog {
  grid-template-rows: 86px 22px minmax(0, 1fr) 126px;
  padding: 0 15px;
  border: 0;
  border-radius: 32px;
  background: transparent;
  box-shadow: 0 24px 70px rgba(0,29,38,.56);
}
body.component-theme .onboarding-panel-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
body.component-theme .onboarding-dialog > :not(.onboarding-panel-art) { z-index: 1; }
body.component-theme .onboarding-header {
  margin: 16px 14px 0;
  min-height: 60px;
  padding: 9px 40px 8px;
}
body.component-theme .onboarding-header > div {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
body.component-theme .onboarding-header strong {
  width: 100%;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  white-space: nowrap;
  transform: none;
}
body.component-theme .onboarding-header span { display: none; }
body.component-theme .onboarding-progress { padding-top: 2px; }
body.component-theme .onboarding-content.lesson-step,
body.component-theme .onboarding-content.rank-step { padding: 14px 21px 10px; }
body.component-theme .onboarding-content.lesson-step { align-items: stretch; }
body.component-theme .onboarding-kicker { margin-bottom: 6px; font-size: 11px; line-height: 17px; }
body.component-theme .lesson-copy h2,
body.component-theme .rank-intro h2 { margin-bottom: 10px; font-size: 21px; line-height: 1.32; }
body.component-theme .lesson-copy > p:last-child,
body.component-theme .rank-intro > p:last-child { font-size: 13px; line-height: 1.62; }
body.component-theme .lesson-visual {
  min-height: 250px;
  margin: 18px 0 0;
  border: 1px solid rgba(125,91,39,.28);
  border-radius: 22px;
  background: rgba(214,193,140,.28);
  box-shadow: inset 0 1px 12px rgba(112,79,28,.1), 0 5px 12px rgba(98,66,20,.08);
}
body.component-theme .tutorial-board { max-height: 275px; }
body.component-theme .onboarding-actions { padding: 8px 15px 58px; }
body.component-theme .tutorial-button,
body.component-theme .tutorial-button.next,
body.component-theme .tutorial-button.start {
  min-height: 55px;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
}
body.component-theme .rank-sigil { line-height: 1; text-align: center; }
.tutorial-stone .tutorial-token {
  filter: drop-shadow(0 4px 3px rgba(30,18,5,.32));
  transform-box: fill-box;
  transform-origin: center;
}
.tutorial-stone.doomed .tutorial-token { animation: doomed-pulse 1.45s ease-in-out infinite; }
.pinch-flip .flip-target .tutorial-token-base { animation: tutorial-token-blue 2.4s ease-in-out infinite; }
.pinch-flip .flip-target .tutorial-token-converted { opacity: 0; animation: tutorial-token-red 2.4s ease-in-out infinite; }

@keyframes tutorial-token-blue {
  0%, 36% { opacity: 1; transform: scale(1); }
  48%, 88% { opacity: 0; transform: scale(.92); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes tutorial-token-red {
  0%, 42% { opacity: 0; transform: scale(.92); }
  54%, 88% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.96); }
}

@media (max-height: 720px) {
  .component-board { top: 8%; height: 54.5%; }
  .component-status { top: 61.5%; }
  .component-rules { top: 65.8%; }
  .component-control-tray.piece-tray { top: 69.5%; height: 115px; }
  .component-pieces { top: 70.5%; }
  .component-control-tray.command-tray { height: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .pinch-flip .flip-target .tutorial-token-base { animation: none !important; opacity: 0; }
  .pinch-flip .flip-target .tutorial-token-converted { animation: none !important; opacity: 1; transform: none; }
}