/* Tower's own look, on the game template (static/game.css styles the shell and the .gm-cell primitive): the column of
   rows that scrolls as you climb (static/tower.js builds it), each row's multiplier on its left, the ground line, the
   climber's canvas over it, and Auto's path picked on the board with the gold line where it cashes out. */

.tw-stage { position: relative; flex: 1; min-height: 420px; container-type: inline-size; }
.tw { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 16px), transparent); }
.tw-col { position: absolute; left: 50%; top: 0; width: min(100cqw - 28px, 500px); display: flex; flex-direction: column; gap: 8px; padding: 30px 0 22px;
  transform: translateX(-50%); will-change: transform; }
.tw-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.tw-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: center; height: 58px; flex: none; }
.tw-m { font: 700 18px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink-3); text-align: right; transition: color .2s var(--e-out); }
.tw-tiles { display: grid; gap: 8px; height: 100%; }
.tw-tiles .gm-cell { height: 100%; min-width: 0; }
.tw .gm-cell > i svg { width: 40px; height: 40px; }
.tw .gm-cell > i svg.tw-frac { width: calc(100% - 14px); height: 70%; }
.tw-row.cur .tw-m { color: var(--gold); }
.tw-row.done .tw-m { color: var(--win); }
.tw-row.cur .gm-cell:not(.rev) { --lnc: rgb(216 165 72 / .38); }
.tw-row.cur.tense .gm-cell:not(.rev) { --lnc: var(--gold-line); }
.tw-row.cur.tense .gm-cell:not(.rev):not(:hover):not(.tw-press)::before { animation: tw-breathe 1.2s ease-in-out infinite; }
@keyframes tw-breathe { 0%, 100% { opacity: .38; } 50% { opacity: .7; } }
.tw-row:not(.cur) .gm-cell:not(.rev) { cursor: default; --fill: var(--tw-f, #152246); }
.tw .gm-cell.tw-press:not(.rev) { --fill: var(--cell-dn); --lnc: var(--gold-line); transform: scale(.95); }
.tw .gm-cell.tw-safe { --fill: var(--well); --lnc: rgb(216 165 72 / .5); cursor: default; }
.tw .gm-cell.tw-safe.tw-tr { --lnc: var(--gold-line); }
.tw .gm-cell.is-loss { translate: 0 4px; transition: translate .16s var(--e-out); }
.tw .gm-cell.ghost { cursor: default; }
.tw-ground { height: 2px; flex: none; margin: 6px 0 0 74px; background: var(--gold-line); opacity: .5; }
.tw-cap { height: 2px; margin: 0 0 4px 74px; background: linear-gradient(90deg, var(--gold-line), transparent); opacity: .35; flex: none; transform-origin: left; }

/* Auto: the path is picked on the board, one tile per row from the bottom; a gold line marks where it cashes out */
.tw.edit .tw-row.aok .gm-cell:not(.rev) { --fill: var(--cell); cursor: pointer; }
.tw.edit .tw-row.aok .gm-cell:not(.rev):hover { --fill: var(--cell-hi); --lnc: rgb(216 165 72 / .55); }
.gm.autoplaying .tw.edit .tw-row.aok .gm-cell:not(.rev) { cursor: default; }
.tw.edit .tw-row.anext .gm-cell:not(.rev):not(.apick) { --lnc: rgb(216 165 72 / .38); }
.tw.edit .tw-row.aok:not(.atop) .tw-m { color: var(--ink-2); }
.tw .tw-row .gm-cell.apick:not(.rev) { --lnc: var(--gold-line); }
.tw-row.atop .tw-tiles { position: relative; }
.tw-row.atop .tw-tiles::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 1.5px; background: var(--gold); pointer-events: none; }
.tw .tw-row.atop .tw-m { justify-self: end; background: var(--gold); color: var(--on-gold); padding: 5px 7px 4px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }

@media (max-width: 899px) {
  .gm[data-game="tower"] .gm-play { min-height: 0; }
  .tw-stage { min-height: 410px; }
  .tw-row { grid-template-columns: 50px minmax(0, 1fr); gap: 8px; height: 52px; }
  .tw-m { font-size: 16px; }
  .tw .gm-cell > i svg { width: 34px; height: 34px; }
  .tw-ground, .tw-cap { margin-left: 58px; }
}
@media (prefers-reduced-motion: reduce) { .tw-row.cur.tense .gm-cell::before { animation: none !important; } }