.board-panel {
  position: relative;
  overflow: hidden;
}

.board-panel.phase-enter {
  animation: board-phase-enter 320ms ease-out;
}

@keyframes board-phase-enter {
  from {
    opacity: 0.4;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.board {
  --board-anim-duration: 500ms;
  --algiz-anim-duration: 780ms;
  --ansuz-anim-duration: 860ms;
  --gebo-anim-duration: 860ms;
  --columns: 7;
  --rows: 6;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(46px, 1fr));
  gap: 0;
  border-radius: 10px;
  border: 1px solid rgba(35, 50, 72, 0.22);
  overflow: hidden;
}

@media (max-width: 700px) {
  .board {
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  }
}

.cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(120, 138, 161, 0.24);
  border-right-width: 3px;
  border-radius: 0;
  background: rgba(231, 238, 247, 0.85);
  cursor: pointer;
  transition: transform 120ms ease;
}

.cell:nth-child(7n + 1) {
  border-left-width: 3px;
}

.cell:hover {
  transform: none;
}

.cell.has-piece::before {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: #222;
}

.cell.p1.has-piece::before {
  background: radial-gradient(circle at 30% 25%, #6f6f6f, #111111 60%);
}

.cell.p2.has-piece::before {
  background: radial-gradient(circle at 30% 25%, #ffffff, #e8e8e8 60%);
}

body:not([data-theme="dark"]) .cell.p2.has-piece::before {
  box-shadow: inset 0 0 0 1px rgba(76, 90, 107, 0.52);
}

.cell.neutral.has-piece::before {
  background: radial-gradient(circle at 30% 25%, #cdcdcd, #7f7f7f 60%);
  border: 2px dashed #5c6772;
}

.cell.ethereal-piece.has-piece::before {
  border: 2px dashed #ffc94d;
}

.cell.target-cell {
  background: rgba(255, 214, 102, 0.16);
  outline: 2px solid rgba(255, 214, 102, 0.7);
  outline-offset: -2px;
}

.cell.forced-column {
  background: rgba(102, 173, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(102, 173, 255, 0.5);
}

.cell.winning-cell {
  background: rgba(255, 214, 102, 0.18);
  box-shadow: inset 0 0 0 2px rgba(255, 214, 102, 0.72);
}

body[data-animations="on"] .cell.winning-cell {
  animation: winning-pulse 1.1s ease-in-out infinite;
}

@keyframes winning-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 2px rgba(255, 214, 102, 0.72);
  }
  50% {
    background: rgba(255, 214, 102, 0.32);
    box-shadow: inset 0 0 0 3px rgba(255, 214, 102, 0.98);
  }
}

.rune-symbol {
  position: absolute;
  inset: 28%;
  width: 44%;
  height: 44%;
  object-fit: contain;
  filter: grayscale(1) brightness(0.24) drop-shadow(0 1px 2px rgba(255, 255, 255, 0.55));
  pointer-events: none;
  z-index: 1;
}

.cell.p1 .rune-symbol {
  filter: invert(1) brightness(1.25) contrast(1.2) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.cell.p2 .rune-symbol,
.cell.neutral .rune-symbol {
  filter: grayscale(1) brightness(0.24) drop-shadow(0 1px 2px rgba(255, 255, 255, 0.55));
}

.rune-symbol.level-2-rune {
  filter: drop-shadow(0 0 5px rgba(255, 214, 102, 0.8));
}

.cell.p1 .rune-symbol.level-2-rune {
  filter: invert(1) brightness(1.25) contrast(1.2)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 5px rgba(255, 214, 102, 0.8));
}

.rune-symbol.ethereal-rune {
  opacity: 0.74;
}

.effect-fade-ghost {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.effect-fade-ghost.p1 {
  background: radial-gradient(circle at 30% 25%, #6f6f6f, #111111 60%);
}

.effect-fade-ghost.p2 {
  background: radial-gradient(circle at 30% 25%, #ffffff, #e8e8e8 60%);
}

body:not([data-theme="dark"]) .effect-fade-ghost.p2 {
  box-shadow: inset 0 0 0 1px rgba(76, 90, 107, 0.52);
}

.effect-fade-ghost.neutral {
  background: radial-gradient(circle at 30% 25%, #cdcdcd, #7f7f7f 60%);
  border: 2px dashed #5c6772;
}

.effect-fade-ghost-symbol {
  position: absolute;
  inset: 28%;
  width: 44%;
  height: 44%;
  object-fit: contain;
  filter: grayscale(1) brightness(0.24) drop-shadow(0 1px 2px rgba(255, 255, 255, 0.55));
  pointer-events: none;
}

.effect-fade-ghost.p1 .effect-fade-ghost-symbol {
  filter: invert(1) brightness(1.25) contrast(1.2) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.effect-lift-ghost {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.effect-lift-ghost.p1 {
  background: radial-gradient(circle at 30% 25%, #6f6f6f, #111111 60%);
}

.effect-lift-ghost.p2 {
  background: radial-gradient(circle at 30% 25%, #ffffff, #e8e8e8 60%);
}

body:not([data-theme="dark"]) .effect-lift-ghost.p2 {
  box-shadow: inset 0 0 0 1px rgba(76, 90, 107, 0.52);
}

.effect-lift-ghost.neutral {
  background: radial-gradient(circle at 30% 25%, #cdcdcd, #7f7f7f 60%);
  border: 2px dashed #5c6772;
}

.effect-lift-ghost-symbol {
  position: absolute;
  inset: 28%;
  width: 44%;
  height: 44%;
  object-fit: contain;
  filter: grayscale(1) brightness(0.24) drop-shadow(0 1px 2px rgba(255, 255, 255, 0.55));
  pointer-events: none;
}

.effect-lift-ghost.p1 .effect-lift-ghost-symbol {
  filter: invert(1) brightness(1.25) contrast(1.2) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.board-rune-info {
  --info-bg: rgba(247, 250, 255, 0.98);
  --info-border: rgba(36, 51, 71, 0.28);
  position: absolute;
  z-index: 5;
  width: min(240px, calc(100% - 16px));
  padding: 0.4rem 0.55rem;
  border-radius: 9px;
  border: 1px solid var(--info-border);
  background: var(--info-bg);
  box-shadow: 0 8px 18px rgba(20, 32, 48, 0.22);
  color: #182537;
  pointer-events: none;
}

.board-rune-info::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 18px);
  width: 10px;
  height: 10px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  transform: translateX(-50%) rotate(45deg);
}

.board-rune-info[data-side="top"]::after {
  top: -6px;
  border-right: none;
  border-bottom: none;
}

.board-rune-info[data-side="bottom"]::after {
  bottom: -6px;
  border-left: none;
  border-top: none;
}

.board-rune-info-title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.board-rune-info-description {
  margin: 0.18rem 0 0;
  font-size: 0.74rem;
  line-height: 1.3;
}

.board-rune-info[data-touch="yes"] {
  --info-bg: rgba(255, 250, 233, 0.99);
  --info-border: rgba(190, 149, 38, 0.48);
}

body[data-animations="on"] .cell.anim-place.has-piece::before {
  animation: rune-drop-in var(--board-anim-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
}

body[data-animations="on"] .cell.anim-place .rune-symbol {
  animation: rune-symbol-drop-in var(--board-anim-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
}

body[data-animations="on"] .cell.anim-nauthiz-place.has-piece::before {
  animation: nauthiz-fade-zoom-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body[data-animations="on"] .cell.anim-nauthiz-place .rune-symbol {
  animation: nauthiz-symbol-fade-zoom-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body[data-animations="on"] .cell.anim-thurisa-drop.has-piece::before {
  animation: thurisa-neutral-drop 520ms cubic-bezier(0.2, 0.82, 0.24, 1);
}

/* A destroyed/returned rune fades on its own, independent of whether another rune
   falls into the cleared cell. (Gebo L2 destroying a top-of-stack rune leaves no
   backfilling drop, so gating the fade on .anim-gebo-drop used to strand the ghost.) */
body[data-animations="on"] .cell .effect-fade-ghost {
  animation: effect-target-fade 360ms ease-out forwards;
}

body[data-animations="on"] .cell .effect-fade-ghost-symbol {
  animation: effect-target-fade 360ms ease-out forwards;
}

body[data-animations="on"] .cell .effect-lift-ghost {
  animation: teiwaz-source-lift 220ms cubic-bezier(0.25, 0.85, 0.3, 1) forwards;
}

body[data-animations="on"] .cell .effect-lift-ghost-symbol {
  animation: teiwaz-source-symbol-lift 220ms cubic-bezier(0.25, 0.85, 0.3, 1) forwards;
}

body[data-animations="on"] .cell.anim-ansuz-drop.has-piece::before {
  animation: ansuz-drop-after-fade var(--ansuz-anim-duration) cubic-bezier(0.18, 0.84, 0.24, 1);
}

body[data-animations="on"] .cell.anim-ansuz-drop .rune-symbol {
  animation: ansuz-symbol-drop-after-fade var(--ansuz-anim-duration) cubic-bezier(0.18, 0.84, 0.24, 1);
}

body[data-animations="on"] .cell.anim-gebo-drop.has-piece::before {
  animation: gebo-drop-after-fade var(--gebo-anim-duration) cubic-bezier(0.2, 0.84, 0.24, 1);
}

body[data-animations="on"] .cell.anim-gebo-drop .rune-symbol {
  animation: gebo-symbol-drop-after-fade var(--gebo-anim-duration) cubic-bezier(0.2, 0.84, 0.24, 1);
}

body[data-animations="on"] .cell.anim-teiwaz-drop.has-piece::before {
  animation: teiwaz-drop-after-lift 500ms cubic-bezier(0.2, 0.82, 0.28, 1);
}

body[data-animations="on"] .cell.anim-teiwaz-drop .rune-symbol {
  animation: teiwaz-symbol-drop-after-lift 500ms cubic-bezier(0.2, 0.82, 0.28, 1);
}

body[data-animations="on"] .cell.anim-place-bottom.has-piece::before {
  animation: rune-rise-in var(--algiz-anim-duration) cubic-bezier(0.16, 0.86, 0.24, 1);
}

body[data-animations="on"] .cell.anim-place-bottom .rune-symbol {
  animation: rune-symbol-rise-in var(--algiz-anim-duration) cubic-bezier(0.16, 0.86, 0.24, 1);
}

body[data-animations="on"] .cell.anim-shift-up.has-piece::before {
  animation: rune-push-up var(--algiz-anim-duration) cubic-bezier(0.2, 0.86, 0.24, 1);
}

body[data-animations="on"] .cell.anim-shift-up .rune-symbol {
  animation: rune-symbol-push-up var(--algiz-anim-duration) cubic-bezier(0.2, 0.86, 0.24, 1);
}

@keyframes rune-drop-in {
  from {
    transform: translateY(-300%) scale(0.88);
    opacity: 0.78;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes rune-symbol-drop-in {
  from {
    transform: translateY(-360%) scale(0.84);
    opacity: 0.7;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes nauthiz-fade-zoom-in {
  from {
    transform: scale(0.78);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes nauthiz-symbol-fade-zoom-in {
  from {
    transform: scale(0.72);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes thurisa-neutral-drop {
  0% {
    transform: translateY(-320%) scale(0.86);
    opacity: 0.74;
  }
  72% {
    transform: translateY(0) scale(1.03);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes effect-target-fade {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  55% {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
    transform: translateY(10%) scale(0.55);
  }
}

@keyframes ansuz-drop-after-fade {
  0% {
    transform: translateY(-108%);
    opacity: 0;
  }
  54% {
    transform: translateY(-108%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ansuz-symbol-drop-after-fade {
  0% {
    transform: translateY(-122%);
    opacity: 0;
  }
  54% {
    transform: translateY(-122%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes gebo-drop-after-fade {
  0% {
    transform: translateY(-106%);
  }
  52% {
    transform: translateY(-106%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes gebo-symbol-drop-after-fade {
  0% {
    transform: translateY(-118%);
  }
  52% {
    transform: translateY(-118%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes teiwaz-source-lift {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(-120%) scale(0.95);
    opacity: 0;
  }
}

@keyframes teiwaz-source-symbol-lift {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-140%);
    opacity: 0;
  }
}

@keyframes teiwaz-drop-after-lift {
  0% {
    transform: translateY(-112%);
    opacity: 0;
  }
  42% {
    transform: translateY(-112%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes teiwaz-symbol-drop-after-lift {
  0% {
    transform: translateY(-126%);
    opacity: 0;
  }
  42% {
    transform: translateY(-126%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes rune-rise-in {
  from {
    transform: translateY(240%) scale(0.88);
    opacity: 0.78;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes rune-symbol-rise-in {
  from {
    transform: translateY(300%) scale(0.82);
    opacity: 0.7;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes rune-push-up {
  from {
    transform: translateY(108%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes rune-symbol-push-up {
  from {
    transform: translateY(122%);
  }
  to {
    transform: translateY(0);
  }
}


body[data-theme="dark"] .board {
  border-color: rgba(220, 230, 241, 0.24);
}

body[data-theme="dark"] .cell {
  border-color: rgba(218, 228, 240, 0.16);
  background: rgba(26, 34, 44, 0.88);
}

body[data-theme="dark"] .cell.target-cell {
  background: rgba(255, 214, 102, 0.2);
}

body[data-theme="dark"] .cell.forced-column {
  background: rgba(102, 173, 255, 0.16);
}

body[data-theme="dark"] .cell.winning-cell {
  background: rgba(255, 214, 102, 0.24);
}

body[data-theme="dark"] .board-rune-info {
  --info-bg: rgba(17, 24, 32, 0.97);
  --info-border: rgba(230, 238, 248, 0.24);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  color: #edf2fa;
}

body[data-theme="dark"] .board-rune-info[data-touch="yes"] {
  --info-bg: rgba(48, 40, 18, 0.97);
  --info-border: rgba(224, 189, 95, 0.52);
}