/* Thumb controls use the same four directions and four moves as the keyboard. */
.touch-controls {
  --pad-size: clamp(48px, 13.7vw, 68px);
  --pad-gap: 4px;
  align-items: end;
  gap: 8px;
  padding: 32px 8px 16px;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.touch-dpad, .touch-attacks {
  display: grid;
  grid-template: repeat(3, var(--pad-size)) / repeat(3, var(--pad-size));
  gap: var(--pad-gap);
  max-width: none;
  position: relative;
  isolation: isolate;
}
.touch-caption {
  position: absolute;
  top: -23px;
  width: 100%;
  text-align: center;
  font: 600 9px var(--body);
  letter-spacing: 1.8px;
  color: #8da8b4;
  pointer-events: none;
}
.touch-controls button {
  width: var(--pad-size);
  height: var(--pad-size);
  min-width: 0;
  padding: 0;
  border: 2px solid #547282;
  border-radius: 13px;
  background: linear-gradient(145deg, #28414f, #122632);
  box-shadow: 0 4px 0 #040d14, inset 0 1px 0 #ffffff24;
  color: #f0f7f4;
  font: 700 27px/1 var(--display);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.touch-controls button span { display: block; font: 600 8px/1 var(--body); letter-spacing: .2px; margin: 0; color: #c5d4d9; }
.touch-dpad button:last-child { font: 700 27px/1 var(--display); }
.touch-up { grid-area: 1 / 2; }
.touch-left { grid-area: 2 / 1; }
.touch-right { grid-area: 2 / 3; }
.touch-down { grid-area: 3 / 2; }
.dpad-hub { grid-area: 2 / 2; border-radius: 15px; background: #172e3a; box-shadow: inset 0 0 0 1px #3f5c6d; }
.dpad-hub::after { content: '+'; display: grid; place-items: center; height: 100%; font-size: 24px; color: #506c7b; }
.touch-stick {
  --stick-x: 0px;
  --stick-y: 0px;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--pad-size) * 3 + var(--pad-gap) * 2);
  height: calc(var(--pad-size) * 3 + var(--pad-gap) * 2);
  border: 2px solid #7792a2a6;
  border-radius: 50%;
  background: radial-gradient(circle, #1c3545e8 0 32%, #102432d9 33% 62%, #3a556780 63% 65%, #142a38dc 66%);
  box-shadow: 0 5px 0 #04121bbb, inset 0 2px 8px #0007, 0 0 24px #09151b50;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.thumbstick-client .touch-controls { display: flex; }
.touch-stick:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.touch-stick > span { pointer-events: none; }
.touch-stick .stick-track { position: absolute; inset: 29%; border: 1px solid #7291a43d; border-radius: 50%; }
.touch-stick .stick-knob {
  position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; border-radius: 50%;
  border: 2px solid #adc0cbb0;
  background: radial-gradient(circle at 36% 25%, #6c8596, #3c586a 55%, #1d3649 100%);
  box-shadow: 0 5px 10px #0006, inset 0 2px 2px #d6e5ec5c, inset 0 -3px 5px #07152180;
  transform: translate(-50%, -50%) translate(var(--stick-x), var(--stick-y));
  transition: transform 100ms ease-out;
  will-change: transform;
}
.stick-knob::after { content: ''; position: absolute; inset: 31%; border: 1px solid #cadbe36b; border-radius: 50%; box-shadow: inset 0 2px 3px #0003; }
.touch-stick.engaged { border-color: #c9e5ec; cursor: grabbing; box-shadow: 0 5px 0 #04121bbb, inset 0 2px 8px #0007, 0 0 24px #96d8eb26; }
.touch-stick.engaged .stick-knob { transition: none; border-color: #e5f3ef; }
.stick-up, .stick-down { position: absolute; left: 0; width: 100%; text-align: center; color: #a5bfcc; font: 700 9px/1 var(--body); letter-spacing: 1px; }
.stick-up { top: 10%; }.stick-down { bottom: 10%; }
.stick-left, .stick-right { position: absolute; top: calc(50% - 6px); width: 3px; height: 12px; border-radius: 2px; background: #92adbc88; }
.stick-left { left: 10%; }.stick-right { right: 10%; }
.touch-stick.jumping .stick-up, .touch-stick.ducking .stick-down { color: #fff1b8; }
@media (prefers-reduced-motion: reduce) { .touch-stick .stick-knob { transition: none; } }
.touch-attacks button { border-radius: 50%; }
.touch-light { grid-area: 2 / 1; }
.touch-heavy { grid-area: 3 / 2; }
.touch-special { grid-area: 2 / 3; }
.touch-power { grid-area: 1 / 2; }
.touch-attacks .touch-light { border-color: #6faec1; background: linear-gradient(145deg, #345b6c, #1a3546); }
.touch-attacks .touch-heavy { border-color: #ef7469; background: linear-gradient(145deg, #843a3b, #491f29); }
.touch-attacks .touch-special { border-color: #c4a0ed; background: linear-gradient(145deg, #60476e, #332641); }
.touch-attacks .touch-power { border-color: #e6be73; background: linear-gradient(145deg, #76603a, #41341e); }
.touch-controls button.pressed, .touch-controls button:active { background: #668595; border-color: #fff4de; transform: translateY(3px); box-shadow: 0 1px 0 #040d14, 0 0 18px #bfe3ec30; }
.touch-attacks button[aria-disabled="true"] {
  background: #1f2b36;
  border-color: #53616e;
  color: #8e9ca8;
  box-shadow: 0 2px 0 #040d14, inset 0 1px 0 #ffffff0c;
  transform: none;
  cursor: default;
}
.touch-attacks button[aria-disabled="true"] span { color: #8e9ca8; }
.attack-guide .spirit-unavailable { opacity: .45; }
.spirit-meter { width: 62%; display: flex; flex-direction: column; gap: 4px; }
.spirit-label { font: 700 clamp(7px, .85vw, 10px)/1 var(--display); letter-spacing: .5px; color: #a1cfff; }
.spirit-notice {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 4;
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  border: 1px solid #84bded55;
  border-radius: 8px;
  background: #102235d9;
  color: #d8edff;
  font: 700 clamp(11px, 1.5vw, 18px)/1.2 var(--display);
  letter-spacing: 1px;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  animation: spirit-notice 900ms ease-out both;
}
@keyframes spirit-notice { 0% { opacity: 0; } 12%, 72% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .spirit-notice { animation: none; } }
.touch-controls[inert] { opacity: .35; pointer-events: none; }
.game-screen.has-overlay .touch-controls { visibility: hidden; }
.round-call.finish-call { top: 21%; font-size: clamp(32px, 6vw, 80px); text-shadow: 3px 4px #813632, 0 5px 30px #071520; }

@media (max-width: 359px) { .touch-controls { --pad-gap: 2px; } }

.game-touch-layout body.playing { overscroll-behavior: none; }
  .game-touch-layout body.playing .site-header { height: 56px; }
  .game-touch-layout body.playing footer { display: none; }
  .game-touch-layout body.playing .game-screen {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 56px);
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  }
  .game-touch-layout body.playing .game-toolbar { flex-shrink: 0; height: 46px; }
  .game-touch-layout body.playing .game-stage { flex-shrink: 0; width: 100%; }
  .game-touch-layout body.playing .game-controls { display: none; }
  .game-touch-layout body.playing .game-hint { order: 2; text-align: center; font-size: 10px; max-width: 340px; margin: 14px auto 8px; line-height: 1.7; }
  .game-touch-layout body.playing .game-hint > span { display: none; }
  .game-touch-layout body.playing .touch-controls {
    order: 3;
    display: flex;
    flex-shrink: 0;
    margin-top: auto;
    padding: 36px 0 calc(16px + env(safe-area-inset-bottom));
    width: 100%;
    background: radial-gradient(ellipse at bottom, #25445344, transparent 75%);
  }

/* Tablets need the same viewport-sized arena and pinned controls as phones. */
@media (orientation: landscape) {
  .game-touch-layout body.playing { overflow: hidden; }
  .game-touch-layout body.playing .site-header { display: none; }
  .game-touch-layout body.playing footer { display: none; }
  .game-touch-layout body.playing .game-screen { display: flex; flex-direction: column; width: 100%; max-width: none; height: 100dvh; min-height: 0; padding: 0; }
  .game-touch-layout body.playing .game-controls { display: none; }
  .game-touch-layout body.playing .game-stage { flex-shrink: 0; height: min(100dvh, 56.25vw); width: min(100vw, 177.7778dvh); margin: auto; }
  .game-touch-layout body.playing .game-hint { display: none; }
  .game-touch-layout body.playing .touch-controls {
    display: flex;
    --pad-size: clamp(48px, 14dvh, 62px);
    --pad-gap: 3px;
    position: fixed;
    width: auto;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 6;
    margin: 0;
    padding: 0;
    opacity: .92;
    background: none;
  }
  .game-touch-layout body.playing .touch-controls[inert] { opacity: .25; }
  .game-touch-layout .touch-caption { display: none; }
  .game-touch-layout body.playing .game-toolbar {
    display: flex !important;
    position: fixed;
    top: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: calc(50% - 85px);
    width: 170px;
    height: 40px;
    z-index: 8;
  }
  .game-touch-layout body.playing .game-toolbar > span { display: none; }
  .game-touch-layout body.playing .game-toolbar .text-button { background: #09151be8; border: 1px solid #ffffff30; border-radius: 8px; min-height: 40px; padding: 10px; font-size: 8px; }
}

/* A consistent color and written label identify guard-piercing moves. */
.profile-move.block-breaker kbd, .guide-move.block-breaker kbd, .attack-guide .block-breaker kbd { border-color: #ffa962; color: #ffca87; }
.profile-move.block-breaker small, .guide-move.block-breaker strong { color: #ffca87; }
.touch-attacks .block-breaker:not([aria-disabled="true"]) { border: 2px solid #ffb16a; box-shadow: 0 4px 0 #040d14, 0 0 12px #ff863e22; }
.touch-attacks .block-breaker:not([aria-disabled="true"]) span { color: #ffdbab; }

.touch-controls button.combo-ready,#attack-guide .combo-ready { border-color:#9cf1ff; box-shadow:0 0 0 2px #8eefff85,0 0 19px #5ecfff90; color:#e9fcff; animation:combo-glow .55s ease-in-out infinite alternate; }
@keyframes combo-glow { to { box-shadow:0 0 0 2px #beffffc0,0 0 28px #5ecfffbd; } }
.surge-call { position:absolute; top:28%; left:50%; transform:translateX(-50%); color:#b6f3ff; background:#0d253dba; border:1px solid #8de6ff60; border-radius:20px; padding:6px 14px; font-size:clamp(10px,1.5vw,15px); font-weight:800; letter-spacing:.09em; white-space:nowrap; pointer-events:none; text-shadow:0 1px 3px #081525; }
@media (prefers-reduced-motion:reduce) { .touch-controls button.combo-ready,#attack-guide .combo-ready { animation:none; } }
.has-overlay .combo-ready { animation-play-state:paused!important; }
.touch-power.channeling {
  border-color: #9deaff;
  box-shadow: 0 0 0 2px #59caff80, 0 0 20px #269eff80;
}

/* Generated universal symbols stay readable without tiny landscape text. */
.game-toolbar .text-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px}
.game-toolbar img,.game-toolbar .resume-icon{width:32px;height:32px;object-fit:contain;flex:none;pointer-events:none}
.game-toolbar .resume-icon{display:none}
.game-toolbar .is-paused .pause-icon{display:none}
.game-toolbar .is-paused .resume-icon{display:block}
.game-touch-layout .game-toolbar .toolbar-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.game-touch-layout body.playing .game-toolbar .text-button{min-width:48px;min-height:48px;padding:6px;border-radius:10px}
@media(orientation:landscape){
 .game-touch-layout body.playing .game-toolbar{left:calc(50% - 56px);width:112px;height:48px;gap:16px}
}