/* The battlefield spans the screen; every command and reel stays below it. */
.slot-jackpot-cutin>img { object-position: 70% 0%; }
.slot-buff-strip { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; margin-top: 5px; pointer-events: auto; scrollbar-width: thin; }
.slot-buff-strip>span { flex: 0 0 auto; font-size: 12px; padding: 3px 6px; border: 1px solid #98c5a67a; border-radius: 4px; background: #204b3c; color: #dcf6b9; }
.slot-buff-strip small { color: #c0d2c4; font-size: 12px; }
.slot-unit-hud { min-width: 0; }
.slot-buff-effect { position: absolute; z-index: 2; top: 46%; max-width: 40%; padding: 10px 15px; border: 1px solid #a7d990; border-radius: 8px; background: #193d2ee8; color: #e4ffca; box-shadow: 0 0 35px #8cd0a460; pointer-events: none; display: flex; gap: 8px; align-items: center; }
.slot-buff-effect.player { left: 8%; }
.slot-buff-effect.ai { right: 8%; }
.slot-buff-effect>span { font-size: 26px; }
.slot-buff-effect>b { font-size: 13px; line-height: 1.5; }
.slot-reel.buff-success { color: #153c2a; background: linear-gradient(#6d977a,#e1f3b6 40%,#cce9a8 60%,#7ba58c); border-color: #cde4a9; }
.slot-buff-description { line-height: 1.6; }
.slot-techniques.slot-buff-techniques { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
.slot-buff-techniques>div { border-color: #729477; background: #244137; }
.slot-buff-techniques span { line-height: 1.5; }
.slot-battle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(270px, 1fr) auto auto;
  height: 100dvh;
  min-height: 680px;
  max-width: 1800px;
  padding: 8px 14px;
  gap: 6px;
}
.slot-battle .slot-header { padding-bottom: 5px; }
.slot-battle .slot-header>div { display: flex; gap: 18px; align-items: center; }
.slot-battle .slot-header h1 { font-size: 19px; margin: 0; }
.slot-stage { height: auto; min-height: 0; border-radius: 9px 9px 0 0; }
.slot-huds { position: absolute; inset: 8px 10px auto; z-index: 1; padding: 0; background: none; gap: 40%; pointer-events: none; }
.slot-unit-hud { background: #15323cea; padding: 6px 10px; }
.slot-unit-hud.ai { background: #473438eb; }
.slot-unit-hud>div:first-child { margin-bottom: 3px; }
.slot-hp { font-size: 13px; }
#slot-canvas { width: 100%; height: 100%; min-height: 0; flex: 1 1 0; }
.slot-battle-tools { position: absolute; bottom: 7px; right: 8px; padding: 0; gap: 5px; }
.slot-battle-tools button { background: #142a31e8; min-height: 44px; }
.slot-battle>#slot-log { display: flex; justify-content: space-between; gap: 12px; min-height: 26px; padding: 3px 10px; border-left: 2px solid #b9a16c; background: #20323ae6; }
.slot-battle>#slot-log p { font-size: 13px; line-height: 1.45; margin: 0; }
.slot-battle .slot-console {
  display: grid;
  grid-template-columns: minmax(310px, 29%) minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  overflow: visible;
  max-height: none;
  padding: 9px;
  background: linear-gradient(120deg, #263934, #142730 60%);
  border: 1px solid #8e805c;
  border-top: 2px solid #c2ac72;
  border-radius: 0 0 9px 9px;
}
.slot-machine { padding: 8px 10px; align-self: stretch; }
.slot-machine h2 { font-size: 13px; margin: 0 0 8px; min-height: 20px; }
.slot-reel { min-height: 80px; gap: 5px; }
.slot-reel>span { font-size: 22px; }
#slot-outcome { margin-top: 7px; }
#slot-guards { display: grid; gap: 4px; margin-top: 7px; }
.slot-guard-row { display: grid; grid-template-columns: 60px repeat(5,minmax(0,1fr)); gap: 3px; align-items: center; font-size: 12px; }
.slot-guard-row>b { font-size: 12px; color: #b9c9c5; }
.slot-guard-row>span { padding: 3px 0; text-align: center; background: #0c202b; border: 1px solid #41585f; border-radius: 3px; color: #9dafa9; }
.slot-guard-row .ready { color: #cdf3ff; border-color: #7fbdcd; background: #305b6a; }
.slot-guard-row .used { background: #baeedb; color: #14393f; outline: 1px solid #e0fff5; }
.slot-reel.guard { color: #183d48; border-color: #b4e3e7; background: linear-gradient(#7397a0, #d2f7ed 40%, #c9ece4 60%, #84a7ad); }
#slot-commands { align-self: center; min-width: 0; padding: 0; }
#slot-commands h2 { font-size: 16px; }
.slot-category { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.slot-category button { min-height: 118px; padding: 12px; grid-template-columns: 1fr; text-align: center; justify-items: center; align-content: center; }
.slot-category .ui-icon { width: 28px; height: 28px; }
.slot-category b { font: 700 20px Batang, serif; letter-spacing: 3px; }
.slot-category small { font-size: 13px; }
.slot-command-head { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; gap: 8px; margin-bottom: 7px; }
.slot-command-title { margin: 0; gap: 7px; }
.slot-command-title button { padding: 9px; }
.slot-subcategories button { padding: 6px 10px; }
.slot-subcategories b { font-size: 15px; }
.slot-subcategories small { font-size: 12px; margin-top: 3px; line-height: 1.3; }
.slot-techniques { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin: 7px 0; }
.slot-techniques>div { gap: 3px; padding: 7px; }
.slot-techniques b { font-size: 13px; }
.slot-techniques span { font-size: 12px; }
.slot-execute { display: flex; gap: 12px; align-items: center; }
.slot-execute>button { min-width: 190px; padding: 9px 15px; white-space: nowrap; }
.slot-execute>div { font-size: 12px; color: #c9d7d1; }
.slot-execute p { margin: 3px 0 0; font-size: 12px; line-height: 1.4; }
.slot-defense-info { display: flex; align-items: center; gap: 14px; padding: 10px 13px; margin: 8px 0; background: #264b55; border: 1px solid #6f9d9e; border-radius: 5px; }
.slot-defense-info>.ui-icon { width: 36px; height: 36px; }
.slot-defense-info b { font-size: 15px; }
.slot-defense-info p { font-size: 13px; margin: 5px 0 0; }
.slot-block-effect { position: absolute; top: 45%; z-index: 2; display: grid; justify-items: center; gap: 5px; padding: 10px 18px; color: #e2fff3; background: #143b49d9; border: 1px solid #b0e5df; border-radius: 12px; box-shadow: 0 0 30px #b2eee07a; pointer-events: none; }
.slot-block-effect.player { left: 18%; }
.slot-block-effect.ai { right: 18%; }
.slot-block-effect>span { font-size: 40px; }
.slot-block-effect small { font-size: 13px; }
.slot-setup-top>div:first-child { display: block; flex: 1; flex-shrink: 1; }
.slot-setup-top>div:last-child { flex-wrap: wrap; flex-shrink: 1; }
.slot-footer { flex-wrap: wrap; }
.slot-footer>span { margin-right: auto; }
@media(max-width:1000px) {
  .slot-battle .slot-console { grid-template-columns: minmax(280px,34%) minmax(0,1fr); gap: 9px; }
  .slot-category { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .slot-category button { min-height: 76px; padding: 8px; grid-template-columns: 22px 1fr; }
  .slot-category b { font-size: 17px; }
  .slot-techniques { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .slot-command-head { grid-template-columns: 1fr; }
  .slot-command-title { margin-bottom: 3px; }
  .slot-execute { flex-wrap: wrap; gap: 6px; }
  .slot-execute>button { flex: 1; }
  .slot-execute>div { width: 100%; }
  .slot-huds { gap: 30%; }
}
@media(max-width:700px) {
  .slot-battle { display: flex; flex-direction: column; height: auto; min-height: 100dvh; padding: 6px; }
  .slot-battle .slot-header>div { display: block; }
  .slot-battle .slot-header small { font-size: 12px; }
  .slot-battle .slot-header h1 { margin-top: 3px; }
  .slot-stage { height: 280px; flex: 0 0 280px; }
  .slot-huds { gap: 8px; inset: 5px 5px auto; }
  .slot-unit-hud { padding: 5px 7px; }
  .slot-unit-hud>div:first-child { display: flex; gap: 4px; font-size: 13px; }
  .slot-unit-hud>div:first-child>span { font-size: 12px; }
  .slot-unit-hud>small { font-size: 12px; }
  .slot-hp { font-size: 12px; }
  .slot-battle-tools { bottom: 5px; right: 5px; }
  .slot-battle>#slot-log { display: block; min-height: 42px; padding: 4px 7px; }
  .slot-battle>#slot-log p { font-size: 12px; }
  .slot-battle .slot-console { grid-template-columns: minmax(0,1fr); padding: 7px; gap: 10px; }
  .slot-machine { padding: 7px; }
  .slot-machine h2 { margin-bottom: 5px; min-height: 0; }
  .slot-reel { min-height: 66px; }
  .slot-reel>b { font-size: 12px; }
  .slot-reel>span { font-size: 20px; }
  .slot-category button { min-height: 70px; }
  .slot-category small { font-size: 12px; }
  .slot-command-head { grid-template-columns: 1fr; }
  .slot-command-title { margin: 0; }
  .slot-defense-info { padding: 8px; gap: 8px; }
  .slot-defense-info b { font-size: 13px; }
  .slot-defense-info p { font-size: 12px; }
  .slot-subcategories small { font-size: 12px; }
  .slot-footer>span { margin-right: 0; }
  .slot-block-effect.player { left: 6%; }
  .slot-block-effect.ai { right: 6%; }
}
@media(min-width:701px) and (max-height:480px) {
  .slot-battle { height: auto; min-height: 100dvh; grid-template-rows: auto 230px auto auto; }
  .slot-battle .slot-console { max-height: none; }
  .slot-huds { gap: 34%; }
  .slot-battle .slot-header>div { display: flex; }
}