/* v0.18 — ImageGen UI skin. CSS only positions live data and hit areas over the generated art. */
body.war-theme { background: #083247; }
body.war-theme #app,
body.war-theme .mobile-game { width: min(100%, 390px); }

.war-crest {
  position: relative;
  display: block;
  width: min(100%,390px);
  height: 96svh !important;
  max-height: 810px;
  min-height: 0 !important;
  overflow: hidden;
  background: url("assets/fantasy-ui-skin-v4.webp") center / 100% 100% no-repeat;
  box-shadow: 0 0 70px rgba(0,0,0,.5);
}

.war-banner {
  position: absolute;
  z-index: 20;
  top: 3.25%;
  left: 2.7%;
  right: 2.7%;
  width: auto;
  height: 6.7%;
  min-height: 0;
  margin: 0;
  padding: 4px 10px;
  grid-template-columns: 30% 40% 30%;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.war-score .score-crest,
.war-score .score-copy { display: none; }
.war-score { gap: 4px; }
.war-score.crimson { justify-content: flex-end; padding-right: 6px; }
.war-score.azure { justify-content: flex-start; padding-left: 6px; }
.war-score strong {
  color: #fff8dc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  line-height: 38px;
  text-shadow: 0 3px 2px rgba(62,24,4,.64), 0 0 4px rgba(255,238,170,.45);
}
.war-turn-sigil i { display: none; }
.war-turn-sigil strong {
  color: #fff2c6;
  font-size: 19px;
  line-height: 22px;
  text-shadow: 0 2px 2px rgba(0,0,0,.62), 0 0 5px rgba(255,220,123,.34);
}
.war-turn-sigil small {
  color: rgba(255,244,211,.82);
  font-size: 11px;
  line-height: 13px;
  text-shadow: 0 1px rgba(0,0,0,.55);
}

.war-battlefield {
  position: absolute;
  z-index: 6;
  top: 12.65%;
  left: 2.4%;
  right: 2.4%;
  width: auto;
  height: 54.4%;
  overflow: hidden;
  clip-path: polygon(23% 0,77% 0,94% 7%,100% 23%,94% 42%,100% 66%,92% 86%,77% 100%,23% 100%,8% 86%,0 66%,6% 42%,0 23%,6% 7%);
  background: transparent;
  filter: none;
}
.arena-shell,
.arena-shell .war-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: none;
  background: transparent;
  box-shadow: none;
  filter: none;
}
.arena-frame { display: none; }
.arena-shell .mobile-board-scroll,
.war-map .mobile-board-scroll {
  height: 100%;
  padding: 0;
  background: transparent;
  filter: none;
}

.war-theme .cell .hex-shadow { fill: rgba(62,42,16,.2); transform: translateY(2px); }
.war-theme .cell .hex-face {
  fill: url(#hex-stone-texture);
  fill-opacity: .76;
  stroke: rgba(117,91,46,.72);
  stroke-width: 2.2;
  filter: none;
}
.war-theme .cell .hex-engrave {
  fill: none;
  stroke: rgba(255,248,211,.65);
  stroke-width: 1.2;
}
.war-theme .cell.empty.legal .hex-face { fill: rgba(255,248,218,.18); stroke: rgba(126,98,49,.72); }
.war-theme .cell.empty.legal .hex-face { fill: url(#hex-stone-texture); fill-opacity: .72; }
.war-theme .cell.empty.legal {
  opacity: .36;
  transition: opacity 150ms ease, filter 150ms ease;
}
.war-theme .cell.empty.legal:hover,
.war-theme .cell.empty.legal:focus-visible {
  opacity: .9;
  filter: drop-shadow(0 0 5px rgba(255,213,92,.78));
}
.war-theme .cell.empty.legal:hover .hex-face { fill: rgba(255,230,126,.38); stroke: #ffd969; }
.war-theme .cell .piece-shadow,
.war-theme .cell .piece-base,
.war-theme .cell .piece-rim,
.war-theme .cell .piece-disc,
.war-theme .cell .piece-shine,
.war-theme .cell .piece-kind { opacity: 0; }
.war-theme .cell .piece-sprite {
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(39,23,7,.42));
}
.war-theme .cell.atari .piece-sprite {
  filter: drop-shadow(0 0 7px #ff8137) drop-shadow(0 3px 2px rgba(39,23,7,.42));
}
.cell.just-placed .piece-sprite {
  transform-box: fill-box;
  transform-origin: center;
  animation: piece-arrive 520ms cubic-bezier(.2,.9,.25,1.25) both;
}
.cell.just-converted .piece-sprite {
  transform-box: fill-box;
  transform-origin: center;
  animation: conversion-flip 720ms ease-in-out both;
}

.war-live-message {
  position: absolute;
  z-index: 17;
  top: 65.15%;
  bottom: auto;
  left: 15%;
  right: 15%;
  min-height: 25px;
  padding: 3px 9px;
  border: 1px solid rgba(255,224,135,.7);
  border-radius: 999px;
  background: rgba(5,57,67,.78);
  color: #fff0c2;
  box-shadow: 0 3px 8px rgba(0,37,45,.28);
  font-size: 10px;
  backdrop-filter: blur(5px);
}

.war-command-dock {
  position: absolute;
  z-index: 18;
  top: 68.7%;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.war-command-dock::before,
.war-command-dock::after { display: none; }

.war-advantage-bar {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 8.9%;
  right: 8.9%;
  width: auto;
  height: 16.3%;
  margin: 0;
  padding: 2px 4px;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.war-advantage-bar span,
.war-advantage-bar span.selected {
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 0 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.war-advantage-bar span > i {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 23px;
  font-style: normal;
}
.war-advantage-bar span + span { border: 0; }
.war-advantage-bar b {
  color: #ffe08b;
  font-size: 13px;
  text-shadow: 0 2px 2px rgba(0,0,0,.5);
}
.war-advantage-bar .gesture-icon {
  width: 19px;
  height: 19px;
  color: #fff0c8;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.48));
}
.war-advantage-bar small {
  color: #fff2c4;
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  line-height: 14px;
  font-weight: 850;
  white-space: nowrap;
  text-overflow: clip;
  text-shadow: 0 2px 2px rgba(0,0,0,.58);
}

.war-unit-controls {
  position: absolute;
  z-index: 3;
  top: 19.5%;
  left: 3.7%;
  right: 3.7%;
  width: auto;
  height: 52%;
  gap: 2.5%;
}
.war-unit-card,
.war-unit-card.selected {
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.war-unit-card.selected::after {
  content: "";
  top: 0;
  right: calc(50% - 48px);
  display: none;
  border: 2px solid #fff6c7;
  background: #ffd45a;
}
.war-unit-medallion {
  width: 86px;
  height: 86px;
  margin-top: 2px;
  border: 0;
  border-radius: 50%;
  background: transparent !important;
  color: #fff0c8;
  box-shadow: none;
}
.war-unit-card[data-kind="R"] .war-unit-medallion { background: url("assets/token-blue-rock.webp") center / 100% 100% no-repeat !important; }
.war-unit-card[data-kind="S"] .war-unit-medallion { background: url("assets/token-blue-scissors.webp") center / 100% 100% no-repeat !important; }
.war-unit-card[data-kind="P"] .war-unit-medallion { background: url("assets/token-blue-paper.webp") center / 100% 100% no-repeat !important; }
.war-unit-medallion > .gesture-icon { opacity: 0; }
.war-unit-card.selected .war-unit-medallion {
  transform: none;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 7px rgba(255,211,79,.95)) drop-shadow(0 3px 3px rgba(69,41,0,.35));
}
.war-unit-card.selected .war-unit-copy strong {
  color: #fff9d6;
  text-shadow: 0 0 7px #ffd45a, 0 2px 2px rgba(0,0,0,.72);
}
.war-unit-medallion .gesture-icon {
  width: 57px;
  height: 57px;
  filter: drop-shadow(0 3px 2px rgba(37,21,8,.5));
}
.war-unit-copy {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  margin: 0;
}
.war-unit-copy strong {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff3c9;
  box-shadow: none;
  font-size: 14px;
  line-height: 19px;
  text-shadow: 0 2px 2px rgba(0,0,0,.65);
}
.war-unit-card.cooling {
  opacity: 1;
  filter: grayscale(.58) brightness(.7);
  border: 0 !important;
  border-style: none !important;
  background: transparent !important;
}
.war-unit-card.cooling .war-unit-medallion::after {
  content: "พัก";
  inset: auto 11px 7px;
  padding: 3px 1px;
  border: 1px solid #efd27d;
  background: rgba(38,48,44,.9);
  color: #fff1c7;
  font-size: 12px;
}

.war-commands {
  position: absolute;
  z-index: 3;
  top: 67%;
  left: 8.5%;
  right: 8.5%;
  width: auto;
  height: 23%;
  min-height: 0;
  gap: 8%;
}
.war-commands button {
  height: 100%;
  min-height: 0;
  padding: 0 0 2px;
  gap: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: #fff2c9;
}
.war-commands button b {
  width: 48px;
  height: 42px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff0c0;
  font-size: 0;
  text-shadow: 0 3px 2px rgba(0,0,0,.48);
}
.war-commands button b::before { font-size: 28px; line-height: 1; }
.war-commands button[data-action="pass"] b::before { content: "▶"; }
.war-commands button[data-action="undo"] b::before { content: "↶"; }
.war-commands button[data-action="new"] b::before { content: "≡"; }
.war-commands button span {
  color: #fff0c6;
  font-size: 14px;
  line-height: 15px;
  text-shadow: 0 2px 2px rgba(0,0,0,.68);
}
.war-commands button:disabled { opacity: .45; filter: grayscale(.65); }

.war-crest > .game-over-banner {
  top: 13%;
  left: 14%;
  right: 14%;
  border: 2px solid #efc45f;
  background: rgba(255,243,202,.96);
}

@media (max-height: 700px) {
  .war-crest { height: 100svh; min-height: 0; }
  .war-score strong { font-size: 31px; }
  .war-turn-sigil strong { font-size: 16px; }
  .war-unit-medallion { width: 72px; height: 72px; }
  .war-unit-medallion .gesture-icon { width: 47px; height: 47px; }
  .war-unit-copy strong { font-size: 12px; }
  .war-commands button span { font-size: 10px; }
}

/* ImageGen tutorial book — HTML remains only for live Thai copy, diagrams and taps. */
body.war-theme .onboarding-backdrop {
  padding: 0;
  background: #063448;
  backdrop-filter: none;
}

body.war-theme .onboarding-dialog {
  position: relative;
  width: min(100vw, 390px);
  height: min(100svh, 844px);
  min-height: 620px;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: url("assets/fantasy-tutorial-skin-v1.webp") center / 100% 100% no-repeat;
  color: #243a36;
  box-shadow: 0 0 70px rgba(0,0,0,.52);
}

body.war-theme .onboarding-header {
  position: absolute;
  z-index: 2;
  top: 4.2%;
  left: 15%;
  right: 15%;
  height: 7.2%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff2c5;
  text-align: center;
}
body.war-theme .onboarding-header > div { width: 100%; }
body.war-theme .onboarding-header .eyebrow { display: none; }
body.war-theme .onboarding-header strong {
  display: block;
  font-family: "Noto Serif Thai", Georgia, serif;
  font-size: 19px;
  line-height: 1.2;
  text-shadow: 0 2px 2px rgba(0,0,0,.6);
}
body.war-theme .onboarding-header span {
  position: absolute;
  top: 45px;
  left: 0;
  right: 0;
  color: #4a3821;
  font-size: 12px;
  text-shadow: none;
}

body.war-theme .onboarding-progress {
  position: absolute;
  z-index: 3;
  top: 13.2%;
  left: 25%;
  right: 25%;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0;
}
body.war-theme .onboarding-progress i {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255,245,203,.75);
  border-radius: 50%;
  background: rgba(7,80,82,.55);
}
body.war-theme .onboarding-progress i.active {
  background: #ffd76a;
  box-shadow: 0 0 7px rgba(255,218,99,.75);
  transform: none;
}

body.war-theme .onboarding-content.lesson-step {
  position: absolute;
  inset: 17% 10.5% 12%;
  display: block;
  padding: 0;
}
body.war-theme .lesson-copy {
  height: 35%;
  padding: 0 2%;
  text-align: center;
}
body.war-theme .onboarding-kicker {
  margin: 0 0 5px;
  color: #8e432c;
  font-size: 12px;
  letter-spacing: .02em;
}
body.war-theme .lesson-copy h2,
body.war-theme .rank-intro h2 {
  margin: 0 0 8px;
  color: #173d3b;
  font-family: "Noto Serif Thai", Georgia, serif;
  font-size: 25px;
  line-height: 1.13;
  letter-spacing: -.02em;
}
body.war-theme .lesson-copy > p:last-child,
body.war-theme .rank-intro > p:last-child {
  margin: 0;
  color: #514936;
  font-size: 14px;
  line-height: 1.48;
}
body.war-theme .lesson-visual {
  position: absolute;
  top: 42%;
  left: 3%;
  right: 3%;
  height: 37%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.war-theme .tutorial-board {
  width: 100%;
  height: 100%;
  max-height: none;
}

body.war-theme .onboarding-content.rank-step {
  position: absolute;
  inset: 17% 10.5% 12%;
  padding: 0 2% 5%;
  overflow: auto;
  scrollbar-width: none;
}
body.war-theme .onboarding-content.rank-step::-webkit-scrollbar { display: none; }
body.war-theme .rank-intro {
  display: block;
  margin: 0 0 10px;
  text-align: center;
}
body.war-theme .rank-grid {
  grid-template-columns: 1fr;
  gap: 7px;
}
body.war-theme .rank-card,
body.war-theme .rank-card.selected {
  min-height: 76px;
  padding: 8px 10px;
  border: 1px solid rgba(123,90,40,.46);
  border-radius: 16px;
  background: rgba(255,249,225,.72);
  box-shadow: 0 5px 12px rgba(71,44,16,.12);
}
body.war-theme .rank-card.selected {
  border: 2px solid #15918f;
  background: rgba(223,255,239,.82);
}

body.war-theme .onboarding-actions {
  position: absolute;
  z-index: 4;
  left: 7.5%;
  right: 7.5%;
  bottom: 2.1%;
  height: 7.1%;
  padding: 0 2%;
  border: 0;
  align-items: center;
}
body.war-theme .tutorial-button,
body.war-theme .tutorial-button.next,
body.war-theme .tutorial-button.start {
  width: 45%;
  min-width: 0;
  min-height: 48px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: #fff1c8;
  font-size: 15px;
  text-shadow: 0 2px 2px rgba(0,0,0,.55);
}
body.war-theme .tutorial-button:disabled {
  color: rgba(255,245,213,.38);
  opacity: 1;
}

@media (max-height: 700px) {
  body.war-theme .onboarding-dialog { height: 100svh; min-height: 0; }
  body.war-theme .onboarding-header strong { font-size: 16px; }
  body.war-theme .lesson-copy h2,
  body.war-theme .rank-intro h2 { font-size: 20px; }
  body.war-theme .lesson-copy > p:last-child,
  body.war-theme .rank-intro > p:last-child { font-size: 12px; }
}