/* Every length on the board is a multiple of --tc-cell, which the script measures from the
   fitting box; nothing here may ask the window how big it is. */
.game-root[data-game="thirteen-grid"] {
  background: radial-gradient(120% 100% at 50% 0%, #2f6a50 0%, #245640 55%, #1b4332 100%);
  border-color: rgba(255, 255, 255, .08);
}
/* Its own stacking context: the cards' z-indexes reach past the sticky page header's. */
.tc {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  color: #eef5ef;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tc-hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.tc-level { font-weight: 700; }
.tc-chips { display: flex; gap: 14px; font-size: .86rem; color: rgba(238, 245, 239, .72); }

/* A press on a free card is a drag, so only free cards claim the touch gesture; anywhere
   else on the board a swipe still scrolls the page. */
.tc-fit {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 560px;
  min-height: 0;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  touch-action: pan-y;
}
.tc-board {
  --tc-cell: 40px;
  position: relative;
  width: calc(var(--tc-n) * var(--tc-cell));
  height: calc(var(--tc-n) * var(--tc-cell));
}
.tc-slots, .tc-grid, .tc-cards, .tc-fx { position: absolute; inset: 0; }
.tc-grid { pointer-events: none; }
.tc-fx { pointer-events: none; z-index: 60; }

.tc-slot, .tc-box, .tc-card, .tc-fx > * {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tc-cell);
  height: var(--tc-cell);
  transform: translate(calc(var(--c) * var(--tc-cell)), calc(var(--r) * var(--tc-cell)));
}
.tc-slot::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 12%;
  background: rgba(0, 0, 0, .16);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
}

/* --- cards --------------------------------------------------------------- */
.tc-card { z-index: 1; }
.tc-card:not(.is-caged) { z-index: 2; cursor: pointer; touch-action: none; }
.tc-card.is-sel { z-index: 40; }

.tc-face {
  position: absolute;
  inset: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12%;
  background: linear-gradient(#fff, #f1eee6);
  color: #23272f;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .2);
  transition: transform .15s, box-shadow .15s, filter .2s;
}
.tc-card.is-red .tc-face { color: #c7303a; }
.tc-rank {
  font-size: calc(var(--tc-cell) * .4);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
}
.tc-suit { margin-top: 3%; font-size: calc(var(--tc-cell) * .24); line-height: 1; }

.tc-card:not(.is-caged) .tc-face {
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .3);
  transform: translateY(-2%);
}
.tc-card.is-caged .tc-face { filter: saturate(.55) brightness(.8); }
.tc-card.is-double .tc-face { filter: saturate(.4) brightness(.66); }
.tc-card.is-sel .tc-face {
  box-shadow: 0 0 0 calc(var(--tc-cell) * .06) #ffd35a, 0 8px 16px rgba(0, 0, 0, .35);
  transform: translateY(-6%) scale(1.05);
}
.tc-card.is-hover .tc-face { transform: scale(1.08); }
.tc-card.is-charged .tc-face {
  box-shadow: 0 0 0 calc(var(--tc-cell) * .06) #bfe3ff, 0 0 calc(var(--tc-cell) * .45) rgba(120, 190, 255, .95);
  transform: scale(1.08);
}

/* Drawn from the picked card's centre to the finger while it drags. */
.tc-tether {
  position: absolute;
  z-index: 55;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #ffffff, #9fd4ff);
  box-shadow: 0 0 8px 2px rgba(120, 190, 255, .8);
  pointer-events: none;
}

/* Grid lines: every boxed cell draws its four sides centred on the cell boundary, so two boxes
   side by side share one line, and a line stays wherever either side of it is still boxed.
   The colour must stay opaque, or a shared line reads darker than an outer one. */
.tc-board {
  --tc-line: max(3px, calc(var(--tc-cell) * .08));
  --tc-rule: #d9c89c;
  /* The radius of a rounded line's inner edge, on a box's corner and in an open cell's alike. */
  --tc-bend: calc(var(--tc-cell) * .12);
}
.tc-box { --tc-lw: var(--tc-line); }
/* A box that takes two blasts: a brighter band 2.4 lines thick with a dark groove down its
   middle. It sits above the single boxes, whose line would otherwise fill the groove on a
   shared side, and the groove is its own stroke so it reads at a 3px line. */
.tc-box.is-double { --tc-lw: calc(var(--tc-line) * 2.4); z-index: 1; }
.tc-box::before {
  content: '';
  position: absolute;
  inset: calc(var(--tc-lw) / -2);
  border: var(--tc-lw) solid var(--tc-rule);
  transition: inset .25s ease-out, border-width .25s ease-out;
}
.tc-box.is-double::before { border-color: #f0d68a; }
.tc-box.is-double::after {
  content: '';
  position: absolute;
  inset: calc(var(--tc-lw) / -6);
  border: calc(var(--tc-lw) / 3) solid #5a4524;
}
.tc-box.is-cracking::before { animation: tc-crack .36s ease-out; }
@keyframes tc-crack { 30% { filter: brightness(1.7); } }
/* r-* and f-* come from shapeGrid() in the script. The groove's corner is concentric with
   the band's, a third of the band further in. */
.tc-box.r-tl::before { border-top-left-radius: calc(var(--tc-bend) + var(--tc-lw)); }
.tc-box.r-tr::before { border-top-right-radius: calc(var(--tc-bend) + var(--tc-lw)); }
.tc-box.r-bl::before { border-bottom-left-radius: calc(var(--tc-bend) + var(--tc-lw)); }
.tc-box.r-br::before { border-bottom-right-radius: calc(var(--tc-bend) + var(--tc-lw)); }
.tc-box.r-tl::after { border-top-left-radius: calc(var(--tc-bend) + var(--tc-lw) * 2 / 3); }
.tc-box.r-tr::after { border-top-right-radius: calc(var(--tc-bend) + var(--tc-lw) * 2 / 3); }
.tc-box.r-bl::after { border-bottom-left-radius: calc(var(--tc-bend) + var(--tc-lw) * 2 / 3); }
.tc-box.r-br::after { border-bottom-right-radius: calc(var(--tc-bend) + var(--tc-lw) * 2 / 3); }
/* An open cell's inside corner: a quarter-round fill against the inner edges of the lines. */
.tc-slot::after {
  content: '';
  position: absolute;
  inset: calc(var(--tc-line) / 2);
  background:
    radial-gradient(circle var(--tc-bend) at 100% 100%, transparent calc(100% - .5px), var(--tc-ftl, transparent) 100%) 0 0 / var(--tc-bend) var(--tc-bend) no-repeat,
    radial-gradient(circle var(--tc-bend) at 0 100%, transparent calc(100% - .5px), var(--tc-ftr, transparent) 100%) 100% 0 / var(--tc-bend) var(--tc-bend) no-repeat,
    radial-gradient(circle var(--tc-bend) at 100% 0, transparent calc(100% - .5px), var(--tc-fbl, transparent) 100%) 0 100% / var(--tc-bend) var(--tc-bend) no-repeat,
    radial-gradient(circle var(--tc-bend) at 0 0, transparent calc(100% - .5px), var(--tc-fbr, transparent) 100%) 100% 100% / var(--tc-bend) var(--tc-bend) no-repeat;
}
.tc-slot.f-tl { --tc-ftl: var(--tc-rule); }
.tc-slot.f-tr { --tc-ftr: var(--tc-rule); }
.tc-slot.f-bl { --tc-fbl: var(--tc-rule); }
.tc-slot.f-br { --tc-fbr: var(--tc-rule); }
.tc-box.is-opening::before { animation: tc-open .36s ease-in forwards; }
@keyframes tc-open {
  35% { scale: 1.06; opacity: 1; }
  100% { scale: 1.2; opacity: 0; }
}
.tc-card.is-freed .tc-face { animation: tc-freed .36s ease-out; }
@keyframes tc-freed { 45% { transform: translateY(-10%) scale(1.08); } }
.tc-card.is-no .tc-face { animation: tc-no .3s; }
@keyframes tc-no {
  20% { translate: -6% 0; }
  45% { translate: 6% 0; }
  70% { translate: -3% 0; }
}

/* Scale only ever goes on a child: the card's own transform is its position, and a scale on
   it would pull the card towards the board's corner. */
.tc-card.is-gone { z-index: 45; transition: none; }
.tc-card.is-gone .tc-face { animation: tc-pop .38s ease-out forwards; }
@keyframes tc-pop {
  35% { scale: 1.18; opacity: 1; }
  100% { scale: .2; opacity: 0; }
}

.tc-halo {
  position: absolute;
  inset: 0;
  border: calc(var(--tc-cell) * .07) solid #ffd35a;
  border-radius: 16%;
  pointer-events: none;
  animation: tc-breathe 1.6s ease-in-out infinite;
}
@keyframes tc-breathe {
  0%, 100% { scale: 1; opacity: .3; }
  50% { scale: 1.22; opacity: .95; }
}

/* --- effects ------------------------------------------------------------- */
/* The particle canvas and the flash cover the whole game, over the cards and under the
   result card; the script sets the canvas's pixel size. */
.tc-sky, .tc-flash { position: absolute; inset: 0; pointer-events: none; }
.tc-sky { z-index: 65; width: 100%; height: 100%; }
.tc-flash { z-index: 64; opacity: 0; }
.tc-fx-sum { display: grid; place-items: center; }
.tc-fx-sum span {
  font-size: calc(var(--tc-cell) * .5);
  font-weight: 800;
  color: #ffe27a;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 10px rgba(0, 0, 0, .3);
  animation: tc-sum .8s ease-out forwards;
}
@keyframes tc-sum {
  0% { translate: 0 0; scale: .6; opacity: 0; }
  20% { scale: 1.2; opacity: 1; }
  100% { translate: 0 calc(var(--tc-cell) * -.9); scale: 1; opacity: 0; }
}

/* The walkthrough's card. The script places it beside the cells it points at and sets --ax,
   where its pointer sits along its edge. Taps pass through it to the board. */
.tc-coach {
  position: absolute;
  z-index: 67;
  width: max-content;
  max-width: min(290px, calc(100% - 12px));
  padding: 10px 14px;
  border-radius: 14px;
  background: #fffdf4;
  color: #22302a;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.35;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
  pointer-events: none;
  animation: tc-coach-in .22s ease-out;
}
.tc-coach p { margin: 0; }
.tc-coach::after {
  content: '';
  position: absolute;
  left: var(--ax);
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: inherit;
  rotate: 45deg;
}
.tc-coach.is-below::after { top: -6px; bottom: auto; }
.tc-coach.is-far::after { display: none; }
@keyframes tc-coach-in { from { opacity: 0; translate: 0 6px; } }

/* --- foot ----------------------------------------------------------------- */
.tc-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tc-cap { min-height: 1.5em; margin: 0; font-weight: 600; color: #e2efe5; text-align: center; }
.tc-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tc-btn { background: rgba(255, 255, 255, .92); color: #24362c; border: 0; }
.tc-btn:hover:not(:disabled) { background: #fff; }
.tc-btn:disabled { opacity: .42; cursor: default; }
.tc-fs { display: inline-flex; align-items: center; gap: 7px; }
/* Drawn, not typed: U+26F6 tofus on Windows and Android. */
.tc-fsicon {
  position: relative; display: inline-block; width: .85em; height: .72em;
  border: 2px solid currentColor; border-radius: 2px;
}
.tc-fsicon::before {
  content: ''; position: absolute; inset: 2px;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .45;
}
.tc-go { background: #3fae5a; color: #fff; box-shadow: var(--shadow); }
.tc-go:hover { background: #36994e; }

.tc-end { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; padding: 12px; background: rgba(16, 36, 26, .42); }
.tc-end:empty { display: none; }
.tc-end .result-card {
  width: min(100%, 340px);
  padding: 18px 20px 20px;
  border-radius: 20px;
  background: #fff;
  color: #23272f;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  animation: tc-rise .34s cubic-bezier(.3, 1.4, .5, 1);
}
.tc-end .result-card .result-done { margin: 0 0 6px; font-size: 1.8rem; }
.tc-end .result-card .btn { margin-top: 12px; }
@keyframes tc-rise { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

html.fills-window .game-root[data-game="thirteen-grid"] .tc { height: 100%; }
html.fills-window .game-root[data-game="thirteen-grid"] .tc-hud,
html.fills-window .game-root[data-game="thirteen-grid"] .tc-foot { flex: none; }
html.fills-window .game-root[data-game="thirteen-grid"] .tc-fit { flex: 1 1 0; max-width: none; aspect-ratio: auto; }

/* Mode 4 — true full screen, over the page. */
body.tc-locked { overflow: hidden; }
.game-root .tc.tc-full {
  position: fixed; inset: 0; z-index: 200; margin: 0; padding: 12px;
  background: radial-gradient(120% 100% at 50% 0%, #2f6a50 0%, #245640 55%, #1b4332 100%);
}
.game-root .tc.tc-full .tc-fit { flex: 1 1 0; max-width: none; min-height: 0; aspect-ratio: auto; }
.game-root .tc.tc-full > :not(.tc-fit) { flex: none; }
/* The board takes whatever height the rows around it leave, so the caption keeps one height
   whatever it says; a line that wrapped would resize the cards mid-move. */
.game-root .tc.tc-full .tc-cap { height: 2.8em; display: grid; place-items: center; }