/* Castle action bar.
   One spot at the bottom centre with two pages: the emote page (the Cosmos
   wheel's eleven slots laid out as a row of squares, G) and the attacks page
   (the BunnyBat's Attack Lab attacks, keys 1-4) while a boss is targeted.
   Also the attack overlay canvas and the target frame. */

.attack-overlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}

/* The main character keeps a readable health bar throughout exploration. */
.player-health{position:absolute;left:38px;top:250px;width:min(250px,calc(100vw - 76px));display:grid;grid-template-columns:1fr auto;gap:5px 9px;align-items:center;padding:9px 11px;border:1px solid #8dffc755;border-radius:9px;background:#15121dde;box-shadow:0 5px 22px #0006;pointer-events:none}
.player-health>span{grid-column:1/-1;font-size:8px;letter-spacing:1.3px;color:#b9c8c0}.player-health b{color:#e9fff5;font-weight:700}.player-health-meter{height:10px;overflow:hidden;border-radius:6px;background:#2a2333;box-shadow:inset 0 0 0 1px #ffffff12}.player-health-fill{display:block;width:100%;height:100%;background:linear-gradient(90deg,#38c878,#a7ffbb);box-shadow:0 0 12px #55f29b99;transition:width .16s,filter .12s}.player-health-value{font-size:10px;color:#e9fff5;white-space:nowrap}.player-health.hurt{border-color:#ff315f;box-shadow:0 0 0 2px #ff315f55,0 5px 25px #ff163c55}.player-health.hurt .player-health-fill{filter:hue-rotate(250deg) saturate(2)}

/* ---------- emote page: the wheel as a bar */
/* The id outranks the wheel's own rules (including its :has(.uploaded-clips) height rule). */
#animation-wheel.bar-layout{
  --wheel-size:auto;left:50%;right:auto;top:auto;bottom:max(12px,env(safe-area-inset-bottom));
  transform:translateX(-50%);width:min(780px,calc(100vw - 16px));max-width:calc(100vw - 16px);
  max-height:min(52dvh,420px);overflow-y:auto;padding:10px 12px 8px;
}
.animation-wheel.bar-layout .animation-wheel-head{padding-bottom:2px}
.animation-wheel.bar-layout .animation-wheel-head h2{font-size:17px;margin:2px 0 2px}
.animation-wheel.bar-layout .animation-wheel-groups{padding:4px 2px 6px}
.animation-wheel-board.bar-layout{
  display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:auto auto auto;
  gap:3px 6px;width:100%;aspect-ratio:auto;border-radius:12px;background:none;padding:2px 0 0;
}
.animation-wheel-board.bar-layout::before,.animation-wheel-board.bar-layout::after,
.animation-wheel-board.bar-layout .motion-ring-outer{display:none}
.animation-wheel-board.bar-layout .motion-orb{
  position:relative;left:auto;top:auto;transform:none;justify-self:center;
  width:100%;max-width:54px;min-width:28px;height:auto;aspect-ratio:1;border-radius:10px;
  font-size:clamp(16px,3.2vw,24px);grid-row:1;
}
.animation-wheel-board.bar-layout .motion-orb>span:first-child{border-radius:9px}
.animation-wheel-board.bar-layout .motion-pin{
  position:static;transform:none;justify-self:center;grid-row:2;
  width:100%;max-width:54px;min-width:28px;height:28px;border-radius:7px;font-size:11px;
}
.animation-wheel-board.bar-layout .animation-wheel-center{
  position:static;transform:none;grid-row:3;grid-column:1/-1;width:100%;
  flex-direction:row;align-items:baseline;justify-content:center;gap:10px;padding:4px 2px 0;text-align:left;
}
.animation-wheel-board.bar-layout .motion-character,
.animation-wheel-board.bar-layout #animation-wheel-name{display:none}
.animation-wheel-board.bar-layout #animation-wheel-motion{font-size:14px;white-space:nowrap}
.animation-wheel-board.bar-layout .animation-wheel-center p{min-height:0;font-size:10px;display:block;flex:0 1 auto;max-width:520px}
.animation-wheel.bar-layout .animation-wheel-footer{flex-direction:row;justify-content:center;flex-wrap:wrap;padding-top:6px}

/* ---------- attacks page */
.attack-bar{
  position:fixed;z-index:8;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.attack-bar[hidden]{display:none}
.attack-bar-slots{
  display:flex;gap:8px;margin:0;padding:8px;list-style:none;
  background:#171420ec;border:1px solid #e2ef8845;border-radius:14px;box-shadow:0 6px 26px #0007;
}
.attack-slot{
  --attack-color:#e2ef88;position:relative;width:54px;height:54px;padding:0;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--attack-color) 55%,transparent);border-radius:11px;cursor:pointer;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--attack-color) 24%,#231d30),#15111d 78%);
  color:var(--attack-color);font:inherit;
}
.attack-slot svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px var(--attack-color))}
.attack-slot kbd{position:absolute;left:4px;top:3px;font:700 10px/1 Arial,sans-serif;color:#f5f0ed;opacity:.85}
.attack-slot:hover,.attack-slot:focus-visible{outline:0;border-color:var(--attack-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--attack-color) 35%,transparent)}
.attack-slot.casting{border-color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--attack-color) 55%,transparent),0 0 22px var(--attack-color)}
.attack-slot.unavailable{filter:grayscale(.75) brightness(.7)}
.attack-sweep{
  --sweep:0;position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:conic-gradient(#0b091299 calc(var(--sweep) * 360deg),transparent 0);
}
.attack-tooltip{
  pointer-events:none;position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);
  width:max-content;max-width:230px;padding:8px 10px;border:1px solid #ffffff35;border-radius:7px;
  background:#110e1af5;text-align:left;opacity:0;transition:opacity .12s;
}
.attack-tooltip b{display:block;font:600 12px/1.2 Georgia,serif;color:var(--attack-color);margin-bottom:3px}
.attack-tooltip small{display:block;font-size:10px;line-height:1.35;color:#d6cfe2}
.attack-tooltip em{display:block;font-style:normal;font-size:10px;color:#e2ef88;margin-top:4px}
.attack-tooltip em:empty{display:none}
.attack-slot:hover .attack-tooltip,.attack-slot:focus-visible .attack-tooltip{opacity:1}
.attack-bar-tip{margin:0;min-height:13px;font-size:11px;color:#e9e3f2;text-shadow:0 1px 3px #000}
body.attack-bar-open .animation-wheel-toggle{opacity:.45}

/* ---------- target frame */
.target-frame{
  position:fixed;z-index:8;left:50%;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 100px);transform:translateX(-50%);
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;
  width:min(320px,calc(100vw - 150px));padding:8px 12px;background:#171420ec;border:1px solid #f3d27a66;border-radius:10px;
  box-shadow:0 4px 20px #0006;
}
.target-frame[hidden]{display:none}
.target-name{grid-column:1/-1;font:600 13px/1.2 Georgia,serif;color:#f3d27a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.target-health{grid-column:1;display:block;width:100%;height:9px;border-radius:5px;background:#2b2436;overflow:hidden;min-width:120px}
.target-fill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#c0476b,#f3d27a);transition:width .18s}
.target-hp{grid-column:2;font-size:10px;color:#d6cfe2;white-space:nowrap}

@media (max-width:650px){
  .player-health{left:20px;top:220px;width:min(205px,calc(100vw - 112px));padding:7px 9px}.player-health>span{font-size:7px}.player-health-value{font-size:9px}
  .attack-slot{width:46px;height:46px}
  .attack-slot svg{width:24px;height:24px}
  .attack-bar-slots{gap:6px;padding:6px}
  .target-frame{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 86px);width:min(300px,calc(100vw - 32px))}
}
@media (prefers-reduced-motion:reduce){.target-fill,.attack-tooltip,.player-health-fill{transition:none}}

/* Squares stay square in the bar (the wheel sizes orbs from the ring). */
.animation-wheel-board.bar-layout .motion-orb{--orb-size:100%}
.animation-wheel-board.bar-layout .motion-orb>span:first-child{max-width:100%;max-height:100%}
/* Narrow screens: a scrollable strip of full-size squares instead of eleven tiny ones. */
@media (max-width:650px){
  .animation-wheel-board.bar-layout{grid-template-columns:repeat(11,48px);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .animation-wheel-board.bar-layout::-webkit-scrollbar{display:none}
  .animation-wheel-board.bar-layout .motion-orb,.animation-wheel-board.bar-layout .motion-pin{max-width:none;width:44px}
  .animation-wheel-board.bar-layout .motion-orb{height:44px}
  .animation-wheel-board.bar-layout .animation-wheel-center{position:sticky;left:0;width:calc(100vw - 64px);justify-content:flex-start}
}
/* Touch: the joystick, the action buttons and the bottom row own the bottom of the
   screen, so the attacks and the target frame sit just above them. */
@media (pointer:coarse){
  .attack-bar{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 200px)}
  .target-frame{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 278px);grid-template-columns:auto minmax(60px,1fr) auto;grid-template-rows:auto;padding:6px 10px;width:min(330px,calc(100vw - 24px))}
  .target-name{grid-column:1;font-size:12px}
  .target-health{grid-column:2;min-width:60px}
  .target-hp{grid-column:3}
}