/* ==========================================================================
   TRIUMPH SOREVIA - board.css
   The gameplay screen: HUD, the match-3 board, tiles, blockers and effects.
   Tiles are absolutely positioned and moved with transform only, so falls and
   swaps stay on the compositor.
   ========================================================================== */

.game {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 12px;
}

/* ----------------------------------------------------------------- HUD -- */
.ghud { flex: none; padding-top: 4px; }

.ghud__top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}
.ghud__meta { flex: 1; min-width: 0; }
.ghud__name { font-size: 13px; font-weight: 800; }
.ghud__sub { font-size: 11px; color: var(--txt-3); }

.gcount {
  flex: none;
  min-width: 68px;
  padding: 6px 10px;
  border-radius: 15px;
  text-align: center;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
}
.gcount__v { font-size: 21px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gcount__k { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.gcount.is-low { border-color: rgba(255, 91, 110, .6); background: linear-gradient(180deg, rgba(255, 91, 110, .22), rgba(255, 91, 110, .08)); }
.gcount.is-low .gcount__v { color: #FFB3BC; }
.gcount.is-pulse { animation: countPulse .42s ease; }
@keyframes countPulse {
  0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); }
}

.gscore {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.gscore__v { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gscore__t { font-size: 11.5px; color: var(--txt-3); font-weight: 700; }

/* objective chips */
.goals { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.goal {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 5px;
  border-radius: 13px;
  background: rgba(5, 11, 26, .55);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 800;
}
.goal__ic { width: 26px; height: 26px; line-height: 0; flex: none; }
.goal__ic .tile-svg { width: 26px; height: 26px; display: block; }
.goal__ic .ic { width: 20px; height: 20px; color: var(--blue-l); margin: 3px; }
.goal__n { font-variant-numeric: tabular-nums; }
.goal.is-done { background: rgba(53, 208, 127, .16); border-color: rgba(53, 208, 127, .5); color: #8CEFC0; }
.goal.is-done .goal__n { text-decoration: line-through; opacity: .75; }

/* --------------------------------------------------------------- board -- */
.boardwrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
}

.board {
  position: relative;
  border-radius: var(--r-l);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(47, 123, 255, .16), rgba(47, 123, 255, 0) 62%),
    linear-gradient(180deg, #0A1730, #060E22);
  border: 2px solid rgba(47, 123, 255, .3);
  box-shadow: inset 0 2px 20px rgba(0, 0, 0, .55), var(--shadow-2);
  overflow: hidden;
  touch-action: none;
}

/* static cell floor */
.cellbg {
  position: absolute;
  border-radius: 10px;
  background: rgba(255, 255, 255, .028);
}
.cellbg.alt { background: rgba(255, 255, 255, .055); }
.cellbg.void { background: transparent; box-shadow: none; }

/* coated (objective) cells */
.jelly {
  position: absolute;
  border-radius: 10px;
  background: rgba(53, 214, 245, .3);
  border: 1.5px solid rgba(53, 214, 245, .55);
  box-shadow: inset 0 0 12px rgba(53, 214, 245, .35);
  transition: opacity .25s ease, background .25s ease;
  pointer-events: none;
}
.jelly.j2 { background: rgba(168, 112, 255, .34); border-color: rgba(168, 112, 255, .6); box-shadow: inset 0 0 12px rgba(168, 112, 255, .4); }
.jelly.gone { opacity: 0; transform: scale(1.25); }

/* --------------------------------------------------------------- tile --- */
.tile {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  will-change: transform;
  cursor: pointer;
  z-index: 2;
}
.tile .tile-svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.tile.moving { transition: transform var(--fall, 200ms) cubic-bezier(.35, .05, .35, 1); }
.tile.swapping { transition: transform var(--swap, 170ms) cubic-bezier(.3, .6, .3, 1); z-index: 6; }

.tile.sel { z-index: 8; }
.tile.sel .tile-svg { animation: tileSel .6s ease-in-out infinite alternate; }
@keyframes tileSel {
  from { filter: drop-shadow(0 0 3px rgba(255, 201, 77, .8)) brightness(1.06); transform: scale(1.04); }
  to   { filter: drop-shadow(0 0 12px rgba(255, 201, 77, 1)) brightness(1.18); transform: scale(1.11); }
}

.tile.hintme .tile-svg { animation: tileHint 1s ease-in-out infinite; }
@keyframes tileHint {
  0%, 100% { transform: scale(1); filter: none; }
  50%      { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(53, 214, 245, .95)); }
}

.tile.pop { z-index: 7; pointer-events: none; animation: tilePop var(--clear, 230ms) cubic-bezier(.3, .8, .4, 1) forwards; }
@keyframes tilePop {
  0%   { transform: var(--tf) scale(1); opacity: 1; }
  35%  { transform: var(--tf) scale(1.22); opacity: 1; filter: brightness(1.5); }
  100% { transform: var(--tf) scale(.15); opacity: 0; filter: brightness(2); }
}

.tile.forged { z-index: 7; }
.tile.forged .tile-svg { animation: tileForge .46s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes tileForge {
  0%   { transform: scale(.2) rotate(-40deg); opacity: 0; }
  60%  { transform: scale(1.24) rotate(6deg); opacity: 1; filter: brightness(1.6); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.tile.bump .tile-svg { animation: tileBump .32s ease; }
@keyframes tileBump {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ------------------------------------------------------------ blockers -- */
.blk {
  position: absolute;
  border-radius: 10px;
  z-index: 4;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.blk.ice {
  background: linear-gradient(140deg, rgba(200, 236, 255, .5), rgba(120, 190, 255, .3));
  border: 2px solid rgba(215, 240, 255, .85);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, .55);
  backdrop-filter: blur(1px);
}
.blk.ice::after {
  content: "";
  position: absolute;
  inset: 12%;
  background:
    linear-gradient(45deg, transparent 44%, rgba(255, 255, 255, .85) 46%, transparent 50%),
    linear-gradient(-45deg, transparent 44%, rgba(255, 255, 255, .7) 46%, transparent 50%);
}
.blk.cage {
  border: 2px solid rgba(190, 208, 232, .95);
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(190, 208, 232, .95) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(0deg, rgba(190, 208, 232, .6) 0 3px, transparent 3px 22px);
}
.blk.stone {
  background: linear-gradient(160deg, #7B8AA6, #44526B);
  border: 2px solid #94A3BC;
  box-shadow: inset 0 -4px 10px rgba(0, 0, 0, .5), inset 0 3px 6px rgba(255, 255, 255, .3);
  z-index: 5;
}
.blk.stone::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 4px;
  background:
    linear-gradient(120deg, rgba(0, 0, 0, .32) 0 42%, transparent 42%),
    linear-gradient(300deg, rgba(0, 0, 0, .26) 0 38%, transparent 38%);
}
.blk.stone.l2 { border-color: #C9D6EA; box-shadow: inset 0 -4px 10px rgba(0, 0, 0, .55), inset 0 3px 6px rgba(255, 255, 255, .42), 0 0 0 2px rgba(201, 214, 234, .35); }
.blk.hit { animation: blkHit .3s ease; }
@keyframes blkHit {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.14); filter: brightness(2); }
  100% { transform: scale(1); filter: brightness(1); }
}
.blk.gone { animation: blkGone .34s ease forwards; }
@keyframes blkGone {
  to { transform: scale(1.5); opacity: 0; filter: brightness(2.4); }
}

/* --------------------------------------------------------------- FX ----- */
.fx { position: absolute; pointer-events: none; z-index: 9; }

.fx-pop {
  font-size: 15px;
  font-weight: 900;
  color: var(--gold-l);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
  animation: fxPop 850ms cubic-bezier(.2, .9, .3, 1) forwards;
  white-space: nowrap;
}
@keyframes fxPop {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  22%  { opacity: 1; transform: translate(-50%, -14px) scale(1.14); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(.95); }
}

.fx-combo {
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  text-align: center;
  animation: fxCombo 1s cubic-bezier(.2, .9, .3, 1) forwards;
}
.fx-combo b {
  display: block;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .8));
}
.fx-combo span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
}
@keyframes fxCombo {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.14); }
  70%  { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(.92); }
}

/* line / bomb blast flashes */
.fx-beam {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
  border-radius: 4px;
  animation: fxBeam .42s ease-out forwards;
}
.fx-beam.v { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .95), transparent); }
@keyframes fxBeam {
  0%   { opacity: 0; transform: scaleY(.2); }
  25%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(.6); }
}
.fx-blast {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 201, 77, .7) 40%, rgba(255, 138, 61, 0) 72%);
  animation: fxBlast .5s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes fxBlast {
  0%   { opacity: 0; transform: scale(.2); }
  30%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* board-level states */
.board.shaking { animation: boardShake .38s ease; }
@keyframes boardShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
}
.board.is-locked { pointer-events: none; }
.board.aiming { box-shadow: inset 0 0 0 3px rgba(255, 201, 77, .8), inset 0 2px 20px rgba(0, 0, 0, .55), var(--shadow-2); }

/* ----------------------------------------------------------- boosters --- */
.bbar {
  flex: none;
  display: flex;
  gap: 7px;
  padding: 9px 0 calc(6px + var(--safe-b));
  overflow-x: auto;
  scrollbar-width: none;
}
.bbar::-webkit-scrollbar { display: none; }

.bslot {
  position: relative;
  flex: 1 0 auto;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 5px 6px;
  border-radius: 15px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .13s ease, border-color .16s ease, background .16s ease;
}
.bslot:active { transform: scale(.94); }
.bslot .bst { width: 25px; height: 25px; display: block; }
.bslot__n { font-size: 10px; font-weight: 800; color: var(--txt-3); letter-spacing: .02em; }
.bslot__c {
  position: absolute;
  top: -5px; right: -3px;
  min-width: 19px; height: 19px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 100px;
  background: var(--blue);
  border: 2px solid var(--bg-deep);
  font-size: 10.5px;
  font-weight: 900;
}
.bslot.is-empty { opacity: .45; }
.bslot.is-empty .bslot__c { background: var(--surface-4); }
.bslot.is-armed {
  background: linear-gradient(180deg, var(--gold-l), var(--gold));
  border-color: #fff;
  box-shadow: 0 0 18px rgba(255, 201, 77, .55);
}
.bslot.is-armed .bslot__n { color: #3A2600; }
.bslot.is-armed .bst { filter: brightness(0) saturate(0); opacity: .82; }

.aimbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(255, 201, 77, .16);
  border: 1px solid rgba(255, 201, 77, .55);
  color: var(--gold-l);
  font-size: 12.5px;
  font-weight: 800;
  animation: riseIn .24s ease both;
}

/* ------------------------------------------------------- result screen -- */
.result { text-align: center; display: flex; flex-direction: column; }
.result__crest {
  width: 84px; height: 84px;
  margin: 0 auto 10px;
  display: grid; place-items: center;
  border-radius: 28px;
  background: linear-gradient(160deg, var(--blue-l), var(--blue-d));
  box-shadow: 0 10px 30px rgba(47, 123, 255, .45);
}
.result__crest .ic { width: 44px; height: 44px; }
.result__crest--gold { background: linear-gradient(160deg, var(--gold-l), var(--gold-d)); box-shadow: 0 10px 30px rgba(255, 201, 77, .5); }
.result__crest--red { background: linear-gradient(160deg, #FF8A98, #9C1B2C); box-shadow: 0 10px 30px rgba(255, 91, 110, .45); }
.result h2 { font-size: 25px; margin-bottom: 3px; }
.result__sub { font-size: 13px; color: var(--txt-3); margin-bottom: 14px; }
.result__score { font-size: 42px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.result__stars { margin: 12px 0 6px; }
.result__stars .star { transform: scale(0); }
.result__stars .star.pop-in { animation: starPop .5s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes starPop {
  0% { transform: scale(0) rotate(-90deg); }
  60% { transform: scale(1.3) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.result__rewards {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin: 14px 0 4px;
}
.result__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.result__row .btn { width: 100%; }
.result__row--one { grid-template-columns: 1fr; }

.newrec {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 8px auto 0;
  padding: 5px 13px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--gold-d), var(--gold));
  color: #3A2600;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  animation: recPulse 1.4s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 201, 77, .55); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 9px rgba(255, 201, 77, 0); }
}