/* The Island Card page head. The card itself (.ic) is below, shared with the Hands sheet in games and puzzles. */

.card-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.card-lede {
  margin: 6px 0 0;
  max-width: 40rem;
}

.card-play {
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ the printed card
   The Island Card, simply: a plain title with the year, Mahjong Island green banners for
   the sections, this month's Bonus Hands in their own pink panel, and dense rows (the
   line in suit colors, X or C, the points in a chip, the name and small print beneath).
   Wide screens fold it into columns like a tri-fold. Digital on top: tap a row for real
   tiles, and in a game the card marks your rack. */

.ic {
  --ic-stock: #fffdf8;
  --ic-stock-deep: #fbf6ea;
  --ic-ink: #1c2b25;
  --ic-soft: rgba(28, 43, 37, 0.6);
  --ic-faint: rgba(28, 43, 37, 0.32);
  --ic-rule: rgba(140, 108, 44, 0.28);
  --ic-green: #1f5a43;
  --ic-gold: #b8913f;
  --ic-gold-soft: rgba(184, 145, 63, 0.14);
  --ic-pink: #c2255c;
  --ic-a: #1e6247;
  --ic-b: #9e2f27;
  --ic-c: #284f86;
  position: relative;
  padding: 1.4rem 1.6rem 1.3rem;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--ic-stock), var(--ic-stock-deep));
  box-shadow:
    0 0 0 1px rgba(120, 96, 48, 0.2),
    0 1px 2px rgba(10, 20, 15, 0.12),
    0 18px 40px rgba(10, 20, 15, 0.18);
  color: var(--ic-ink);
  font-family: "Google Sans Flex", Inter, system-ui, sans-serif;
}

.ic--page {
  margin: 20px 0 32px;
}

.ic-mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--ic-ink);
}

.ic .ic-title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.ic-year {
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}

.ic [data-suit="a"] {
  color: var(--ic-a);
}

.ic [data-suit="b"] {
  color: var(--ic-b);
}

.ic [data-suit="c"] {
  color: var(--ic-c);
}

.ic-tools {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  margin: -0.4rem 0 1.1rem;
  font-size: 0.86rem;
  color: var(--ic-soft);
}

.ic-tools[hidden] {
  display: none;
}

.ic-count {
  margin: 0;
}

.ic-count b {
  font-weight: 750;
  color: var(--ic-ink);
}

.ic-filter {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ic-gold);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ic-filter:focus-visible {
  outline: 1px solid var(--ic-gold);
  outline-offset: 3px;
}

.ic-cols {
  column-width: 21rem;
  column-gap: 2.2rem;
  column-rule: 1px solid var(--ic-rule);
}

.ic-sec {
  break-inside: avoid;
  margin: 0 0 1.3rem;
}

.ic .ic-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  margin: 0 0 0.25rem;
  padding: 0.42rem 0.7rem;
  border-radius: 7px;
  background: var(--ic-green);
  font-size: inherit;
  font-weight: inherit;
}

.ic-band-name {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fbf6e8;
}

.ic-band-note {
  font-size: 0.74rem;
  text-align: right;
  color: rgba(251, 246, 232, 0.74);
}

/* This month's Bonus Hands: their own panel at the top of the card, in the month's colors.
   Each month sets the banner gradient (--bonus-from to --bonus-to) and the panel's tint. */
.ic-sec--bonus {
  --bonus-from: #c2255c;
  --bonus-to: #e0638e;
  --bonus-tint: #fde6ee;
}

.ic-sec--bonus[data-month="01"] { --bonus-from: #2b5f9e; --bonus-to: #7fb3e0; --bonus-tint: #e7f0fa; }
.ic-sec--bonus[data-month="02"] { --bonus-from: #c2255c; --bonus-to: #f08aa8; --bonus-tint: #fde6ee; }
.ic-sec--bonus[data-month="03"] { --bonus-from: #2e8b57; --bonus-to: #9ccf6e; --bonus-tint: #eaf6e3; }
.ic-sec--bonus[data-month="04"] { --bonus-from: #7b5bb0; --bonus-to: #e58fb8; --bonus-tint: #f3eaf7; }
.ic-sec--bonus[data-month="05"] { --bonus-from: #d6336c; --bonus-to: #f2a541; --bonus-tint: #fdeee6; }
.ic-sec--bonus[data-month="06"] { --bonus-from: #1f8a9a; --bonus-to: #63c7bd; --bonus-tint: #e4f5f4; }
.ic-sec--bonus[data-month="07"] { --bonus-from: #e2463a; --bonus-to: #f5b03a; --bonus-tint: #fdebe2; }
.ic-sec--bonus[data-month="08"] { --bonus-from: #e0742a; --bonus-to: #f2c240; --bonus-tint: #fdf1df; }
.ic-sec--bonus[data-month="09"] { --bonus-from: #8a5a22; --bonus-to: #d9a441; --bonus-tint: #f8efdf; }
.ic-sec--bonus[data-month="10"] { --bonus-from: #c4561e; --bonus-to: #7b4ab0; --bonus-tint: #f6ebe4; }
.ic-sec--bonus[data-month="11"] { --bonus-from: #9c3b1f; --bonus-to: #d98a2b; --bonus-tint: #fbeedd; }
.ic-sec--bonus[data-month="12"] { --bonus-from: #1d3f7a; --bonus-to: #5fa0d4; --bonus-tint: #e8f0f9; }

.ic .ic-sec--bonus {
  padding: 0.55rem;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--bonus-tint), color-mix(in srgb, var(--bonus-tint) 45%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bonus-from) 20%, transparent);
}

.ic .ic-sec--bonus .ic-band {
  background: linear-gradient(90deg, var(--bonus-from), var(--bonus-to));
}

.ic-sec--bonus .ic-band-name,
.ic-sec--bonus .ic-band-note {
  color: #fff;
}

.ic-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ic-hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "line xc pts"
    "sub sub away";
  align-items: center;
  column-gap: 0.55rem;
  width: 100%;
  padding: 0.42rem 0.45rem 0.38rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.ic-row:nth-child(even) .ic-hit {
  background: rgba(31, 90, 67, 0.05);
}

.ic-sec--bonus .ic-row:nth-child(even) .ic-hit {
  background: color-mix(in srgb, var(--bonus-from) 6%, transparent);
}

.ic .ic-hit:hover {
  background: var(--ic-gold-soft);
}

.ic-hit:focus-visible {
  outline: 1px solid var(--ic-gold);
  outline-offset: -1px;
}

.ic-line {
  grid-area: line;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.55em;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

.ic-tok,
.ic-grp {
  display: inline-flex;
}

.ic-ch {
  transition: opacity 200ms ease;
}

.ic-xc {
  grid-area: xc;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid rgba(28, 43, 37, 0.3);
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ic-soft);
}

.ic-xc.is-c {
  border-color: var(--ic-ink);
  background: var(--ic-ink);
  color: #fbf6e8;
}

.ic-pts {
  grid-area: pts;
  min-width: 2.1rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: var(--ic-ink);
  color: #fbf6e8;
  font-size: 0.82rem;
  font-weight: 750;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ic-row.is-bonus .ic-pts {
  background: var(--bonus-from, var(--ic-pink));
  color: #fff;
}

.ic-sub {
  grid-area: sub;
  min-width: 0;
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--ic-soft);
}

.ic-name {
  font-weight: 650;
  color: var(--ic-ink);
  opacity: 0.8;
}

.ic-note::before {
  content: " · ";
}

.ic-away {
  grid-area: away;
  justify-self: end;
  font-size: 0.74rem;
  font-weight: 650;
  white-space: nowrap;
  color: var(--ic-gold);
}

/* Only the hands you're chasing, or one you opened, say how far away they are. */
.ic-away:empty,
.ic-row:not(.is-near, .is-open) .ic-away {
  display: none;
}

.ic-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.25rem 0.45rem 0.7rem;
}

.ic-tiles[hidden] {
  display: none;
}

.ic-tile-group {
  display: inline-flex;
  gap: 1px;
}

.ic-tiles img {
  width: 1.45rem;
  height: auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}

.ic .ic-row.is-open .ic-hit {
  background: var(--ic-gold-soft);
}

.ic-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
  margin: 0.6rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ic-rule);
  font-size: 0.76rem;
  color: var(--ic-soft);
}

.ic-legend b {
  font-weight: 750;
  color: var(--ic-ink);
}

.ic-legend-suits i {
  font-style: normal;
  font-size: 0.62rem;
  margin-right: 2px;
}

.ic-foot {
  margin: 0.3rem 0 0;
  font-size: 0.76rem;
  color: var(--ic-soft);
}

/* In a game: the card marked from your rack. */

.ic .ic-row.is-near .ic-hit {
  background: linear-gradient(90deg, rgba(184, 145, 63, 0.22), rgba(184, 145, 63, 0.05) 85%);
  box-shadow: inset 2px 0 0 var(--ic-gold);
}

.ic-row:is(.is-near, .is-open) .ic-ch.is-miss {
  opacity: 0.28;
}

.ic-row.is-dead .ic-hit {
  opacity: 0.38;
}

.ic-row.is-dead .ic-line {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ic-ink);
}

.ic.is-filtered .ic-row.is-dead,
.ic.is-filtered .ic-sec.is-empty {
  display: none;
}

/* The game sheet's Close floats over the card's corner. */
.hs-sheet .ic-mast {
  padding-right: 4.6rem;
}

@media (max-width: 560px) {
  .ic {
    padding: 1.1rem 0.9rem 1rem;
  }

  .ic .ic-title {
    font-size: 1.5rem;
  }

  .ic-year {
    font-size: 1.9rem;
  }

  .ic-line {
    font-size: 0.98rem;
    letter-spacing: 0.08em;
  }

  .ic-band-name {
    letter-spacing: 0.12em;
  }

  .ic-band-note {
    font-size: 0.68rem;
  }

  .ic-cols {
    column-width: auto;
    column-count: 1;
  }
}