/* Firebreak map. Loaded after assets/css/game-base.css.

   A CSS grid of square tiles; the cat is one element on top that glides from
   square to square. Tile art is colour plus a single emoji, so it reads the
   same on every device and needs no image files. */

  body.g-firebreak{
    --grass:#3f9d4a; --grass-2:#4fb25a; --forest:#256b3a; --rock:#7b7a86; --water:#2f8fd8;
    --dirt:#8a5a36; --ash:#3a3638; --flame:#ff7a1a;
    --tile-radius:7px;
  }
  html[data-theme="light"] body.g-firebreak{
    --grass:#62bf5f; --grass-2:#78cc6f; --forest:#2f8a45; --rock:#a3a1ad; --water:#4aa8ec;
    --dirt:#b07a4c; --ash:#5d5859;
  }

  /* ---------------- intro chips ---------------- */
  .fb-intro{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:-4px 0 12px}
  .fb-intro span{
    font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:99px;
    background:var(--surface-2); border:1px solid var(--border);
  }
  .fb-intro span.warn{background:color-mix(in srgb, var(--flame) 18%, transparent); border-color:color-mix(in srgb, var(--flame) 45%, transparent)}

  /* ---------------- the map ---------------- */
  .fb-play{position:relative; width:min(100%, 480px); margin:0 auto}
  .fb-grid{
    display:grid; gap:3px; width:100%; aspect-ratio:1/1;
    padding:5px; border-radius:16px; background:color-mix(in srgb, var(--forest) 55%, #000);
    user-select:none; -webkit-user-select:none; touch-action:manipulation;
  }
  .fb-t{
    position:relative; border-radius:var(--tile-radius); border:0; padding:0; margin:0;
    display:grid; place-items:center; font-size:clamp(14px, 4.4vw, 24px); line-height:1;
    background:var(--grass); cursor:pointer; color:#fff;
    transition:background-color .25s ease, transform .12s ease;
  }
  .fb-t.alt{background:var(--grass-2)}
  .fb-t:hover{transform:scale(1.04); z-index:2}
  .fb-t:focus-visible{outline:3px solid #fff; outline-offset:-2px; z-index:3}
  .fb-t.tree{background:var(--forest)}
  .fb-t.rock{background:var(--rock); cursor:default}
  .fb-t.water{
    background:
      radial-gradient(ellipse at 30% 35%, rgba(255,255,255,.35) 0 12%, transparent 14%),
      radial-gradient(ellipse at 70% 70%, rgba(255,255,255,.22) 0 10%, transparent 12%),
      var(--water);
    cursor:default;
  }
  .fb-t.break{
    background:
      repeating-linear-gradient(45deg, rgba(0,0,0,.14) 0 3px, transparent 3px 7px),
      var(--dirt);
  }
  .fb-t.house{background:var(--grass-2); cursor:default; font-size:clamp(18px, 5.6vw, 30px)}
  .fb-t.flower{background:var(--grass)}
  .tool[hidden]{display:none}

  /* heat: a tree that has taken one lot of heat glows, so the player can see it coming */
  .fb-t.warm{box-shadow:inset 0 0 0 2px #ffb020, inset 0 0 14px 2px rgba(255,140,30,.65)}

  .fb-t.burning{
    background:radial-gradient(circle at 50% 70%, #ffd23f 0 18%, #ff7a1a 40%, #c2261b 90%);
    animation:fbFlicker .7s ease-in-out infinite alternate; cursor:default;
  }
  .fb-t.burning.bucketable{cursor:pointer}
  @keyframes fbFlicker{0%{filter:brightness(1)} 100%{filter:brightness(1.25) saturate(1.2)}}
  .fb-t.ash{background:var(--ash); color:rgba(255,255,255,.25); cursor:default}
  .fb-t.ignite{animation:fbIgnite .45s ease-out, fbFlicker .7s ease-in-out .45s infinite alternate}
  @keyframes fbIgnite{0%{transform:scale(.6); filter:brightness(2)} 100%{transform:scale(1)}}
  .fb-t.dug{animation:fbDug .3s ease-out}
  @keyframes fbDug{0%{transform:scale(.8)} 60%{transform:scale(1.08)} 100%{transform:scale(1)}}
  .fb-t.doused{animation:fbDouse .6s ease-out}
  @keyframes fbDouse{0%{box-shadow:inset 0 0 0 40px rgba(80,170,255,.9)} 100%{box-shadow:inset 0 0 0 0 rgba(80,170,255,0)}}

  /* next turn's fire */
  .fb-t.threat::after{
    content:""; position:absolute; inset:2px; border-radius:calc(var(--tile-radius) - 2px);
    border:2px dashed #ffb020; pointer-events:none;
  }
  .fb-t.threat.ember::after{border-color:#ff5a3c}
  .fb-t.hint{animation:fbHint 1s ease-in-out 3}
  @keyframes fbHint{50%{box-shadow:inset 0 0 0 4px #ffe14d, 0 0 18px 3px #ffe14d}}
  .fb-t.path{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
  .fb-t.path::before{content:""; position:absolute; width:22%; height:22%; border-radius:50%; background:rgba(255,255,255,.7)}
  .fb-t.path.threat::before{background:#ffb020}

  .fb-grid.frozen .fb-t{cursor:default}

  /* the cat */
  .fb-cat{
    position:absolute; left:0; top:0; display:grid; place-items:center; pointer-events:none; z-index:4;
    font-size:clamp(18px, 5.6vw, 30px); line-height:1;
    transition:transform .38s cubic-bezier(.3,1.3,.5,1);
    filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));
  }
  .fb-cat.home{opacity:0; transition:transform .38s ease, opacity .3s .3s ease}
  .fb-cat.scared{animation:fbScared .5s ease-in-out infinite}
  @keyframes fbScared{0%,100%{rotate:0deg} 25%{rotate:-8deg} 75%{rotate:8deg}}

  .fb-wind{
    position:absolute; top:-10px; right:-6px; z-index:5; font-size:13px; font-weight:800;
    background:var(--surface-solid); border:1px solid var(--border); border-radius:99px; padding:4px 10px;
    box-shadow:var(--shadow);
  }

  /* ---------------- tools ---------------- */
  .fb-tools{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px}
  .tool{
    padding:9px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2);
    color:var(--text); font:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:.15s;
  }
  .tool.on{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent-soft)}
  .tool:disabled{opacity:.45; cursor:not-allowed}
  .tool.quiet{font-weight:600; color:var(--muted)}
  .tool[hidden]{display:none}
  .fb-status{text-align:center; font-size:13.5px; color:var(--muted); margin:10px 0 0; min-height:1.5em}
  .fb-status b{color:var(--text)}

  .fb-stars{font-size:34px; letter-spacing:6px; margin:4px 0 6px; color:#ffc93c; text-shadow:0 2px 0 rgba(0,0,0,.25)}
  .fb-stars .off{color:var(--border); text-shadow:none}

  /* ---------------- key ---------------- */
  .fb-key{display:grid; gap:7px; font-size:13px; color:var(--muted)}
  .fb-key span{display:flex; align-items:center; gap:9px}
  .fb-key .k{width:22px; height:22px; border-radius:6px; display:grid; place-items:center; font-style:normal; font-size:13px; flex:none}
  .fb-key .grass, .fb-key .flower{background:var(--grass)}
  .fb-key .tree{background:var(--forest)}
  .fb-key .rock{background:var(--rock)}
  .fb-key .water{background:var(--water)}
  .fb-key .break{background:var(--dirt)}
  .fb-key .fire{background:radial-gradient(circle at 50% 70%, #ffd23f 0 18%, #ff7a1a 40%, #c2261b 90%)}
  .fb-key .threat{background:var(--grass); box-shadow:inset 0 0 0 2px #ffb020}

  @media(max-width:520px){
    body.g-firebreak .hud{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin-bottom:12px}
    body.g-firebreak .stat{padding:8px 8px 8px 11px; min-width:0}
    body.g-firebreak .stat .k{font-size:9.5px; letter-spacing:.06em}
    body.g-firebreak .stat .v{font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    .fb-grid{gap:2px; padding:4px}
    .tool{padding:8px 11px; font-size:13px}
  }
  @media (prefers-reduced-motion: reduce){
    .fb-t, .fb-cat{transition:none !important}
    .fb-t.burning, .fb-t.ignite, .fb-cat.scared, .fb-t.hint, .fb-t.dug, .fb-t.doused{animation:none !important}
  }

  /* .btn sets a display value, which would otherwise beat the hidden attribute. */
  .controls .btn[hidden]{display:none}