/* ---------- Start menu ---------- */

.tables-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #FF5E7E, #FFC93C);
  color: #fff;
  text-align: start;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  box-shadow: 0 6px 0 #C93D5C;
  transition: transform .12s, box-shadow .12s;
}

.tables-banner:active { transform: translateY(4px); box-shadow: 0 2px 0 #C93D5C; }
.tables-banner .start-icon {
  padding: 2px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .25);
  font-size: clamp(1.5rem, 5vh, 2.2rem);
  font-weight: 800;
}
.tables-banner b { flex: 1; font-size: clamp(1.2rem, 5vw, 1.6rem); }
.tables-banner span:last-child { font-size: 1rem; font-weight: 700; }

.chapter-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.chapter-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: clamp(52px, 8.6vh, 74px);
  padding: 6px 10px;
  border-radius: 18px;
  background: var(--bg);
  color: #fff;
  text-align: start;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .18);
  transition: transform .12s, box-shadow .12s;
}

.chapter-tile:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.chapter-tile .tile-icon { flex: none; width: clamp(34px, 6vh, 46px); font-size: clamp(1.6rem, 4.6vh, 2.2rem); line-height: 1; text-align: center; }
.chapter-tile img.tile-icon { height: clamp(34px, 6vh, 46px); object-fit: contain; }
.tile-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tile-text small { font-size: .78rem; font-weight: 700; opacity: .9; }
.tile-text b { font-size: clamp(.95rem, 4vw, 1.15rem); }
.tile-stars {
  position: absolute;
  top: -6px;
  inset-inline-end: -4px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 800;
  text-shadow: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}

.start .link-btn { margin-top: 12px; }

/* ---------- Shared ---------- */

.ch1-title {
  margin: 0 0 4px;
  text-align: center;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  color: color-mix(in srgb, var(--c, var(--purple)) 70%, #000);
}

.hero-avatar { object-fit: contain; background: #FFF7E0; }

.ch1-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .25em;
  font-size: clamp(1.7rem, 7.5vw, 3rem);
  font-weight: 800;
  line-height: 1.3;
}

.ch1-eq .op { color: var(--pink); }

.ch1-eq .box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 .15em;
  border: 4px dashed var(--c, var(--purple));
  border-radius: 14px;
  background: color-mix(in srgb, var(--c, var(--purple)) 10%, #fff);
}

.ch1-eq .box.filled {
  border-style: solid;
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  animation: bounce .6s;
}

.ch1-visual { display: flex; flex-direction: column; align-items: center; }

.ch1-dots { display: flex; flex-direction: column; align-items: center; gap: 4px; direction: ltr; }
.dot-row { display: flex; gap: 4px; }

.ch1-dot {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--purple);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}

.ch1-dot.b { background: #FF8A3D; }
.ch1-dot.c { background: var(--blue); }

.swap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.swap-eq { font-size: 2.4rem; font-weight: 800; color: var(--pink); }

.empty-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 320px; }

.empty-group {
  width: 52px;
  height: 52px;
  border: 4px dashed var(--blue);
  border-radius: 50%;
}

/* ---------- Map ---------- */

.levels { display: flex; flex-direction: column; gap: 8px; }

.level-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 12px;
  border: 3px solid var(--c);
  border-radius: 18px;
  background: #fff;
  text-align: start;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 60%, #000);
  transition: transform .12s, box-shadow .12s;
}

.level-card:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 60%, #000); }
.level-card.boss { background: linear-gradient(90deg, #FFF3C4, #F1E8FF); }
.level-card.locked { filter: grayscale(.8); opacity: .75; }

.level-monster { width: clamp(40px, 6.5vh, 60px); height: clamp(40px, 6.5vh, 60px); flex: none; object-fit: contain; }
.level-info { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.25; }
.level-num { font-size: .8rem; font-weight: 700; color: color-mix(in srgb, var(--c) 75%, #000); }
.level-info b { font-size: clamp(1rem, 4.2vw, 1.25rem); }
.level-sub { font-size: .85rem; opacity: .75; }
@media (max-height: 800px) {
  .level-sub { display: none; }
  .levels .level-monster { width: clamp(36px, 5.5vh, 60px); height: clamp(36px, 5.5vh, 60px); }
}
.level-status { flex: none; }
.level-status .stars { font-size: .95rem; }

/* ---------- Learn ---------- */

.rule-card { padding: 12px; border-top: 10px solid var(--c); }
.rule-card .ch1-eq { margin-bottom: 8px; }

.rule-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rule-list li { display: flex; align-items: center; gap: 10px; font-size: .95rem; line-height: 1.4; }
.rule-list img { width: 40px; height: 40px; flex: none; object-fit: contain; }

.vs-preview { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.vs-preview img { width: clamp(50px, 9vh, 90px); height: clamp(50px, 9vh, 90px); object-fit: contain; animation: float 2.4s ease-in-out infinite; }
.vs-preview p { margin: 0; font-size: 1.1rem; font-weight: 800; }

/* ---------- Battle ---------- */

.arena {
  --toward: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px 10px;
  border: 5px solid #fff;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 85% 18%, #FFF6B0 0 28px, transparent 29px),
    linear-gradient(#9EE3FF 0%, #D4F4FF 58%, #8EDB6E 58%, #5FC14A 100%);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .08);
  overflow: hidden;
}

[dir=rtl] .arena { --toward: -1; }

.fighter { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.fighter img { display: block; width: clamp(84px, 17vh, 190px); height: clamp(84px, 17vh, 190px); object-fit: contain; filter: drop-shadow(0 8px 4px rgba(0, 0, 0, .22)); user-select: none; }

[dir=rtl] .hero-img[data-face=right],
[dir=ltr] .hero-img[data-face=left] { transform: scaleX(-1); }

.hearts { display: flex; gap: 4px; font-size: clamp(1.2rem, 4.5vw, 1.7rem); }
.heart.lost { animation: bounce .5s; opacity: .7; }

.hp { width: min(100%, 220px); text-align: center; }
.hp-name { display: block; font-size: 1.1rem; font-weight: 800; }

.hp-bar {
  height: 18px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  overflow: hidden;
  direction: ltr;
}

[dir=rtl] .hp-bar { direction: rtl; }

.hp-fill { height: 100%; border-radius: 999px; background: var(--green); transition: width .4s ease-out, background .4s; }
.hp-fill.mid { background: var(--yellow); }
.hp-fill.low { background: var(--pink); }
.hp-num { font-size: 1rem; font-weight: 800; }

.monster-wrap { position: relative; }

.bob { animation: bob 2.2s ease-in-out infinite; }
.bob.slow { animation-duration: 2.8s; }

#heroWrap.lunge { animation: lunge .6s ease-out; }
#heroWrap.hurt { animation: hit .5s ease-out; }
.monster-wrap.hit { animation: hit .5s ease-out; }
.monster-wrap.lunge-back { animation: lunge-back .6s ease-out; }
.monster-wrap.defeated { animation: defeated 1.2s ease-in forwards; }

#fx { position: absolute; inset: 0; pointer-events: none; }
.boom { position: absolute; top: 30%; left: 50%; font-size: 4rem; transform: translate(-50%, -50%); animation: boom .6s ease-out forwards; }
.damage { position: absolute; top: 4%; left: 50%; font-size: 2.2rem; font-weight: 800; color: var(--pink); text-shadow: 2px 2px 0 #fff; animation: float-up 1s ease-out forwards; }

.battle-talk {
  width: fit-content;
  max-width: 100%;
  margin: 8px auto 0;
  padding: 4px 16px;
  border-radius: 999px;
  background: #fff;
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 800;
  text-align: center;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .07);
}

.ch1-question { margin-top: 8px; padding: 8px 12px; border-top: 10px solid var(--c); }

.hint-card { width: fit-content; max-width: 100%; margin: 0 auto; }
.hint-rule { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; line-height: 1.5; }

/* ---------- End ---------- */

.ch1-end { max-width: 560px; margin: 8px auto 0; padding: 14px; text-align: center; border-top: 10px solid var(--c); }
.ch1-end h2 { margin: 6px 0 0; font-size: clamp(1.3rem, 5.5vw, 1.9rem); }

.end-scene { display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.end-hero { width: min(150px, 22vh); animation: float 2.5s ease-in-out infinite; }
.end-monster { width: min(110px, 16vh); }
.end-monster.beaten { transform: rotate(-80deg) translateY(20px); filter: grayscale(.7); opacity: .65; }

/* ---------- Animations ---------- */

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes lunge {
  0% { transform: translateX(0); }
  35% { transform: translateX(calc(var(--toward) * 70px)) scale(1.08); }
  100% { transform: translateX(0); }
}

@keyframes lunge-back {
  0% { transform: translateX(0); }
  35% { transform: translateX(calc(var(--toward) * -60px)) scale(1.08); }
  100% { transform: translateX(0); }
}

@keyframes hit {
  0%, 100% { transform: translateX(0); filter: none; }
  20% { transform: translateX(-10px); filter: brightness(1.8) saturate(.3); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); filter: brightness(1.5); }
  80% { transform: translateX(4px); }
}

@keyframes defeated {
  0% { transform: none; opacity: 1; }
  30% { transform: translateY(-20px) rotate(10deg); }
  100% { transform: translateY(40px) rotate(-90deg) scale(.6); opacity: 0; }
}

@keyframes boom {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; }
  60% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

@keyframes float-up {
  0% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -50px); opacity: 0; }
}