*
{box-sizing:border-box}

html,body
{margin:0;min-height:100%;font-family:Arial,sans-serif;background:#1f1f2e;color:white}

body
{display:flex;justify-content:center;padding:14px}

button
{font:inherit;font-weight:800;cursor:pointer}

#game
{width:min(100%,900px)}

header
{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}

h1 {
  margin:0;font-size:clamp(1.5rem,5vw,2.4rem)
}

#waveLabel {
  margin-top:4px;color:#ffe481;font-weight:800
}

.hud {
  display:flex;gap:10px;background:#2d2d3c;padding:10px 12px;border:1px solid #7d6b35;border-radius:12px
}

#battlefield{
  position:relative;width:100%;aspect-ratio:7/5;overflow:hidden;background:#cdbb8f;border:5px solid #76502d;border-radius:18px;box-shadow:0 12px 28px #0006
}

#grid {
  position: absolute;
  inset: 0;

  display: grid;

  grid-template-columns:
  repeat(
    var(--battle-cols),
    1fr
  );

grid-template-rows:
  repeat(
    var(--battle-rows),
    1fr
  );
}

.tile
{position:relative;border:1px solid #6b5a3426;background:#ffffff0d;padding:0}

.tile:hover
{outline:3px solid #ffffff66;outline-offset:-3px}

.cat {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: transparent;
  border: none;
  border-radius: 0;
}

.cat img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;

  pointer-events: none;
  user-select: none;
}

#dogs,#effects{position:absolute;inset:0;pointer-events:none}

.dog,.shot,.fx{position:absolute;transform:translate(-50%,-50%)}

.dog {
  position: absolute;

  width:
    calc(
      100% /
      var(--battle-cols)
    );

  height:
    calc(
      100% /
      var(--battle-rows)
    );

  display: flex;
  align-items: center;
  justify-content: center;

  transform:
    translate(-50%, -50%);

  z-index: 6;
}

.dogImage {
  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;

  pointer-events: none;
  user-select: none;
}

.dog.boss {
  width:
    calc(
      (
        100% /
        var(--battle-cols)
      ) * 1.8
    );

  height:
    calc(
      (
        100% /
        var(--battle-rows)
      ) * 1.8
    );

  z-index: 7;
}

.dog.slow{filter:hue-rotate(170deg) saturate(1.5)}

.fx{font-weight:900;text-shadow:0 2px 5px #000;animation:pop .7s ease-out forwards}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}35%{opacity:1;transform:translate(-50%,-70%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-120%) scale(1)}}

.controls
{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;margin-top:12px}

/* =========================
   QUARTER REVOLVER
   ========================= */

#revolverCard {
  position: relative;

  flex: 0 0 auto;

  width: 190px;
  height: 165px;

  overflow: hidden;

  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}


/*
  The cylinder is deliberately
  much larger than the visible
  area.

  Most of it is clipped away so
  it looks like a revolver chamber
  entering from the top-right.
*/
#revolver {
  position: absolute;

  width: 235px;
  height: 235px;

  right: -88px;
  top: -76px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at center,
      #4b4b57 0 20%,
      #2e2e39 21% 59%,
      #666 60% 64%,
      #24242e 65% 100%
    );

  border:
    5px solid #777;

  box-shadow:
    inset 0 0 0 5px #1d1d27,
    0 6px 16px rgba(0,0,0,0.35);
}

.chamber {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border-radius: 50%;

  background:
    #30303b;

  border:
    3px solid #686875;

  overflow: hidden;

  box-sizing: border-box;
}


.chamber img {
  width: 78%;
  height: 78%;

  object-fit: contain;

  display: block;

  image-rendering: auto;

  filter: none;
}


.chamber:nth-child(1) {
  left: 10px;
  bottom: 16px;

  width: 96px;
  height: 96px;

  z-index: 5;

  opacity: 1;

  border:
    4px solid #ffcf56;

  background:
    #fff0a5;

  box-shadow:
    0 0 0 4px
    rgba(255,207,86,0.18),
    0 5px 14px
    rgba(0,0,0,0.35);
}


.chamber:nth-child(2) {
  left: 78px;
  bottom: 76px;

  width: 48px;
  height: 48px;

  opacity: 0.18;

  transform: scale(0.72);

  filter:
    brightness(0.62)
    blur(0.4px);
}

.chamber:nth-child(3) {
  left: 116px;
  bottom: 122px;

  width: 38px;
  height: 38px;

  opacity: 0.07;

  transform: scale(0.6);

  filter:
    brightness(0.48)
    blur(0.7px);
}


/*
  The remaining chambers are
  already spent / outside view.
*/
.chamber:nth-child(4),
.chamber:nth-child(5),
.chamber:nth-child(6) {
  display: none;
}


/*
  No hearts = current chamber
  is physically empty.
*/
.chamber.emptyCurrent {
  background:
    #1b1b23;

  border-color:
    #65656f;

  box-shadow:
    inset 0 0 12px
    rgba(0,0,0,0.65);
}


#revolverStatus {
  position: absolute;

  right: 4px;
  bottom: 2px;

  z-index: 8;

  padding:
    4px 7px;

  border-radius:
    999px;

  background:
    rgba(22,22,30,0.88);

  color:
    #ffe481;

  font-size:
    0.72rem;

  font-weight:
    900;

  white-space:
    nowrap;
}

#message{text-align:center;color:#ffe9a3;font-weight:800;min-height:24px}

.hidden{display:none!important}

#overlay{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;padding:20px}

/* =========================
   PHONE LAYOUT
   ========================= */

@media (max-width: 650px) {

  html,
  body {
  height: 100dvh;
  min-height: 100dvh;

  overflow: hidden;
}

  body {
  padding:
    4px 6px;
}

#game {
  width: 100%;
  height: 100dvh;

  display: grid;

  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto;

  overflow: hidden;
}

  header {
  position: relative;

  display: grid;

  grid-template-columns:
    1fr auto auto;

  grid-template-areas:
    "title hud pause"
    "revolver revolver revolver";

  align-items: center;

  gap: 6px 8px;

  width: 100%;

  margin-bottom: 6px;
}

#pauseBtn {
  grid-area: pause;
}

#revolverCard {
  grid-area: revolver;

  justify-self: end;
}


  header > div:first-child {
    grid-area: title;

    min-width: 0;
  }


  h1 {
    margin: 0;

    font-size:
      clamp(
        1.35rem,
        6vw,
        1.8rem
      );

    line-height: 1;
  }


  #waveLabel {
    margin-top: 4px;

    font-size:
      0.8rem;
  }


  /* =========================
     HEARTS / FORT HEALTH
     ========================= */

  .hud {
    grid-area: hud;

    display: flex;
    flex-direction: row;

    gap: 7px;

    padding:
      6px 8px;

    border-radius:
      9px;

    font-size:
      0.84rem;

    white-space: nowrap;
  }


  .hud span {
    display: flex;
    align-items: center;

    gap: 2px;
  }


#revolverCard {
  width: 170px;
  height: 96px;

  margin-top: -4px;

  overflow: hidden;
}

#revolver {
  width: 210px;
  height: 210px;

  right: -74px;
  top: -105px;
}


  /*
    Current cat stays large.
  */
  .chamber:nth-child(1) {
  left: 8px;
  bottom: 12px;

  width: 92px;
  height: 92px;

  padding: 3px;
}


  /*
    Future cat becomes only
    a partial hint.
  */
  .chamber:nth-child(2) {
    left: 68px;
    bottom: 67px;

    width: 61px;
    height: 61px;

    opacity: 0.3;

    transform:
      scale(0.78);
  }


  /*
    Barely-visible third chamber.
  */
  .chamber:nth-child(3) {
    left: 105px;
    bottom: 114px;

    width: 55px;
    height: 55px;

    opacity: 0.12;

    transform:
      scale(0.64);
  }


  #revolverStatus {
    right: 2px;
    bottom: 0;

    padding:
      3px 6px;

    font-size:
      0.66rem;
  }


#battlefield {
  width: 100%;
  height: 100%;

  min-height: 0;

  aspect-ratio: auto;

  border-width: 3px;
  border-radius: 10px;
}


  .tile {
    /*
      Remove desktop button styling
      behaviour that wastes space.
    */
    min-width: 0;
    min-height: 0;

    touch-action:
      manipulation;

    -webkit-tap-highlight-color:
      transparent;
  }


  /*
    Hover isn't useful on phones.
  */
  .tile:hover {
    outline: none;
  }


  .cat img,
  .dogImage {
    width: 100%;
    height: 100%;

    object-fit: contain;
  }


  /*
    Let the big dog remain clearly
    larger without becoming enormous.
  */
  .dog.boss {
    width:
      calc(
        (
          100% /
          var(--battle-cols)
        ) * 1.55
      );

    height:
      calc(
        (
          100% /
          var(--battle-rows)
        ) * 1.55
      );
  }


  #dogGoalLine {
    height: 7px;

    border-top-width: 1px;
    border-bottom-width: 2px;
  }


  /* =========================
     TEXT BELOW BOARD
     ========================= */

  #message {
    min-height: 20px;

    margin:
      5px 0 2px;

    font-size:
      0.78rem;

    line-height: 1.2;
  }


  .legend {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      4px 7px;

    margin-top: 4px;

    padding: 6px;

    font-size:
      0.68rem;

    line-height: 1.15;
  }


  .legend span {
    min-width: 0;
  }


  /* =========================
     GAME OVER
     ========================= */

  .modal {
    width:
      min(
        94vw,
        360px
      );

    padding: 18px;
  }


  #restartBtn {
    min-height: 44px;

    padding:
      11px 18px;
  }
}


/* =========================
   SMALL PHONE
   ========================= */

@media (max-width: 390px) {

  body {
    padding:
      4px 4px 16px;
  }

  #battlefield {
    /*
      JS gives these phones
      an 8 x 8 battlefield.
    */
    aspect-ratio: 1 / 1;
  }

  /*
    Let cats use virtually
    all of their larger square.
  */
  .cat img {
    width: 108%;
    height: 108%;

    max-width: none;
    max-height: none;

    object-fit: contain;
  }

  .dogImage {
    width: 105%;
    height: 105%;

    max-width: none;
    max-height: none;

    object-fit: contain;
  }

  h1 {
    font-size: 1.3rem;
  }

  .hud {
    font-size: 0.78rem;

    padding:
      5px 6px;
  }

  .legend {
    font-size: 0.64rem;
  }
}

#selectedIcon {
  overflow: hidden;
}

#selectedIcon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


#dogGoalLine {
  position: absolute;

  top: 4%;
  left: 0;
  right: 0;

  height: 9px;

  background: #777;

  border-top:
    2px solid #aaa;

  border-bottom:
    3px solid #505050;

  z-index: 8;

  pointer-events: none;
}


.catHit {
  animation:
    catHitShake
    180ms ease-out;
}

@keyframes catHitShake {
  0% {
    transform:
      translateX(0);
  }

  35% {
    transform:
      translateX(-8%);
  }

  70% {
    transform:
      translateX(8%);
  }

  100% {
    transform:
      translateX(0);
  }
}


.dogHit {
  animation:
    dogHitFlash
    180ms ease-out;
}

@keyframes dogHitFlash {
  0% {
    opacity: 1;
  }

  45% {
    opacity: 0.35;
  }

  100% {
    opacity: 1;
  }
}


.dogRam {
  animation:
    dogRamAttack
    280ms ease-in-out;
}

@keyframes dogRamAttack {
  0% {
    transform:
      translate(-50%, -50%);
  }

  50% {
    transform:
      translate(-50%, -78%);
  }

  100% {
    transform:
      translate(-50%, -50%);
  }
}


.happyHit {
  animation:
    happyHitAttack
    220ms ease-out;
}

@keyframes happyHitAttack {
  0% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(18%);
  }

  100% {
    transform:
      translateY(0);
  }
}


.angrySlam {
  animation:
    angrySlamAttack
    320ms ease-out;
}

@keyframes angrySlamAttack {
  0% {
    transform:
      scale(1);
  }

  40% {
    transform:
      scale(1.18)
      translateY(12%);
  }

  70% {
    transform:
      scale(0.92)
      translateY(-5%);
  }

  100% {
    transform:
      scale(1);
  }
}


.dizzyCharge {
  animation:
    dizzyChargeAttack
    420ms ease-out;
}

@keyframes dizzyChargeAttack {
  0% {
    transform:
      translateY(0);
  }

  40% {
    transform:
      translateY(-35%)
      scale(1.08);
  }

  70% {
    transform:
      translateY(10%)
      scale(0.95);
  }

  100% {
    transform:
      translateY(0)
      scale(1);
  }
}


.heartEffect {
  position: absolute;

  z-index: 12;

  color: #ff5577;

  font-size:
    clamp(
      1rem,
      3vw,
      2rem
    );

  transform:
    translate(-50%, -50%);

  pointer-events: none;

  animation:
    floatHeart
    1s ease-out forwards;
}

@keyframes floatHeart {
  0% {
    opacity: 1;

    transform:
      translate(-50%, -20%)
      scale(0.75);
  }

  60% {
    opacity: 0.9;

    transform:
      translate(-50%, -110%)
      scale(1.1);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -170%)
      scale(0.9);
  }
}


.tile.sadZone {
  background:
    rgba(
      70,
      160,
      255,
      0.42
    );

  box-shadow:
    inset 0 0 12px
    rgba(
      80,
      190,
      255,
      0.6
    );
}

.angryShockwave {
  position: absolute;

  width:
  calc(
    100% /
    var(--battle-cols)
  );

height:
  calc(
    100% /
    var(--battle-rows)
  );

  z-index: 11;

  border:
    5px solid
    rgba(255, 150, 60, 0.9);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 210, 90, 0.32) 0%,
      rgba(255, 120, 40, 0.15) 45%,
      rgba(255, 90, 20, 0) 70%
    );

  transform:
    translate(-50%, -50%)
    scale(0.25);

  pointer-events: none;

  animation:
    angryShockwaveExpand
    500ms ease-out forwards;
}


@keyframes angryShockwaveExpand {

  0% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(0.25);
  }

  55% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;

    /*
      Roughly covers Angry Cat's
      3 x 3 attack area.
    */
    transform:
      translate(-50%, -50%)
      scale(3.4);
  }
}

#grid {
  touch-action:
    manipulation;
}

.tile {
  -webkit-user-select:
    none;

  user-select:
    none;
}

/* =========================
   START / PAUSE
   ========================= */

.screenOverlay {
  position: fixed;
  inset: 0;

  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px;

  background:
    rgba(
      15,
      15,
      24,
      0.58
    );

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);
}


.gameBlurred {
  filter:
    blur(5px);

  transform:
    scale(0.99);

  pointer-events:
    none;

  user-select:
    none;
}


.challengeModal {
  width: 96vw;

  max-height:
    calc(100dvh - 12px);

  overflow: hidden;

  padding: 12px;
}


.instructions {
  display: grid;

  gap: 7px;

  margin:
    14px 0;

  text-align:
    left;
}


.instructions p {
  margin: 0;

  padding:
    7px 9px;

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );

  border-radius:
    8px;
}


.challengeWarning {
  color:
    #ffe481;

  font-weight:
    800;
}


.primaryButton,
.secondaryButton,
#pauseBtn {
  border: 0;

  border-radius:
    10px;

  min-height:
    44px;

  font-weight:
    900;
}


.primaryButton {
  padding:
    11px 22px;

  background:
    #ffcf56;

  color:
    #291f08;
}


.secondaryButton {
  padding:
    11px 22px;

  background:
    #454558;

  color:
    white;
}


.pauseButtons {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  margin-top:
    18px;
}


#pauseBtn {
  flex:
    0 0 auto;

  width: 44px;
  height: 44px;

  padding: 0;

  background:
    #3a3a4d;

  color:
    white;

  font-size:
    1.05rem;
}

.instructionRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.instructionCat {
  width: 34px;
  height: 34px;

  flex:
    0 0 34px;
}

.instructionRow {
  gap: 7px;
}

.instructions {
  gap: 3px;

  margin:
    7px 0;
}

.instructions p {
  padding:
    4px 6px;

  font-size:
    0.72rem;

  line-height: 1.1;
}

.challengeModal h2 {
  margin:
    0 0 5px;

  font-size:
    1.25rem;
}

.challengeModal > p {
  margin:
    5px 0;

  font-size:
    0.76rem;

  line-height: 1.15;
}

.challengeWarning {
  margin:
    6px 0;

  font-size:
    0.72rem;
}

#playBtn {
  min-height: 38px;

  padding:
    7px 18px;
}

.legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legendCat {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  object-fit: contain;
}