/* trail.css — 5.2: экран Тропы (trail.js). Поле-кольцо клеток, кубик в центре, голубь-фишка. */
body.tr-open{ overflow: hidden; }
.tr-screen{ position: fixed; inset: 0; z-index: calc(var(--z-modal, 20001) + 10); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: linear-gradient(180deg, rgba(11,15,46,.35) 0%, rgba(11,15,46,.6) 40%, rgba(11,15,46,.9) 100%), var(--bg-image, none) center top / cover no-repeat, #0b0f2e;
  color: #fff; animation: trIn .22s ease-out; -webkit-tap-highlight-color: transparent; }
@keyframes trIn{ from{ opacity: 0; } }
.tr-wrap{ max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

.tr-top{ display: flex; align-items: center; gap: 10px; }
.tr-back{ width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(13,17,48,.78); color: #fff; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.tr-top h2{ margin: 0; flex: 1; font-size: 22px; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.tr-bal{ display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(13,17,48,.78);
  border: 1px solid rgba(255,154,46,.4); font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tr-bal b{ color: #ffb35c; }

/* поле */
.tr-board{ position: relative; display: grid; grid-template-columns: repeat(var(--k, 6), minmax(0, 1fr)); grid-template-rows: repeat(var(--k, 6), minmax(0, 1fr));
  gap: 5px; aspect-ratio: 1; width: 100%; max-width: 100%; }
.tr-cell{ position: relative; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0;
  background: linear-gradient(180deg, #8a6744, #6b4e33); border: 1px solid rgba(0,0,0,.35); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 3px 0 rgba(0,0,0,.35); }
.tr-cell .ic{ font-size: clamp(16px, 5.4vw, 22px); line-height: 1; }
.tr-cell .ic img{ width: clamp(16px, 5.4vw, 22px); height: clamp(16px, 5.4vw, 22px); object-fit: contain; }
.tr-cell .tx{ font-size: clamp(9px, 2.7vw, 11px); font-weight: 900; line-height: 1.05; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.tr-cell.pm .tx{ color: #ffe1bd; }
.tr-cell.big{ background: linear-gradient(180deg, #ffb347, #d9731a); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 3px 0 rgba(0,0,0,.35), 0 0 16px rgba(255,170,60,.55); }
.tr-cell.back{ background: linear-gradient(180deg, #7a3348, #57203a); }
.tr-cell.extra{ background: linear-gradient(180deg, #2f8f57, #1f6a3f); }
.tr-cell.chest{ background: linear-gradient(180deg, #7a52b8, #563790); }
.tr-cell.egg-cell{ background: radial-gradient(circle at 50% 40%, #a874ff 0%, #6a3fc0 60%, #4b2a8f 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 3px 0 rgba(0,0,0,.35), 0 0 14px rgba(168,116,255,.55); }
.tr-cell.egg-cell .ic img{ width: clamp(26px, 8.4vw, 36px); height: clamp(26px, 8.4vw, 36px); filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.tr-cell.start{ background: linear-gradient(180deg, #2c2357, #1a1438); border: 1px solid rgba(255,170,60,.75);
  box-shadow: inset 0 0 12px rgba(255,154,46,.35), 0 3px 0 rgba(0,0,0,.35); }
.tr-cell.start .tx{ color: #ffb35c; }
.tr-cell.hit{ animation: trHit .45s ease-out; }
@keyframes trHit{ 40%{ transform: scale(1.12); filter: brightness(1.35); } }

.tr-mid{ min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px; text-align: center;
  border-radius: 18px; background: rgba(11,15,46,.66); border: 1px solid rgba(255,255,255,.12); }
.tr-die{ width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(180deg, #fff, #e2dff0); box-shadow: 0 5px 0 #a7a2bf, 0 10px 18px rgba(0,0,0,.4);
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 7px; box-sizing: border-box; }
.tr-die i{ width: 10px; height: 10px; border-radius: 50%; background: #1a1b2e; place-self: center; visibility: hidden; }
.tr-die i.on{ visibility: visible; }
.tr-die.roll{ animation: trRoll .12s linear infinite; }
@keyframes trRoll{ 0%,100%{ transform: rotate(-12deg) translateY(-3px); } 50%{ transform: rotate(12deg) translateY(2px); } }
.tr-go{ width: 100%; max-width: 180px; height: 44px; border: 0; border-radius: 14px; font: inherit; font-size: 18px; font-weight: 900; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #34d46e, #1fa750); box-shadow: 0 4px 0 #157a3a, 0 6px 14px rgba(31,167,80,.35); touch-action: manipulation; }
.tr-go:active{ transform: translateY(2px); box-shadow: 0 2px 0 #157a3a; }
.tr-go:disabled{ filter: grayscale(.6) brightness(.85); cursor: default; }
.tr-go.is-empty{ background: rgba(255,255,255,.12); box-shadow: none; color: #c6bddf; font-size: 15px; font-variant-numeric: tabular-nums; }
.tr-go.no{ animation: trNo .35s; }
@keyframes trNo{ 25%{ transform: translateX(-6px); } 75%{ transform: translateX(6px); } }
.tr-rolls{ display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #c6bddf; }
.tr-dots{ display: flex; gap: 4px; }
.tr-dots i{ width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.tr-dots i.on{ background: #ffd35a; box-shadow: 0 0 8px rgba(255,211,90,.7); }
.tr-extra{ color: #34d46e; }
.tr-timer, .tr-lap{ font-size: 12px; font-weight: 800; color: #c6bddf; font-variant-numeric: tabular-nums; }
.tr-lap b{ color: #fff; }

.tr-token{ position: absolute; width: calc(100% / var(--k, 6) * .9); aspect-ratio: 1; pointer-events: none; z-index: 3; transition: left .22s ease-in-out, top .22s ease-in-out; }
.tr-token img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.55)); }
.tr-token.hop img{ animation: trHop .22s ease-out; }
@keyframes trHop{ 50%{ transform: translateY(-34%) scale(1.06); } }
.tr-pop{ position: absolute; z-index: 4; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; font-size: 18px; font-weight: 900;
  text-shadow: 0 2px 6px rgba(0,0,0,.8); animation: trPop 1.2s ease-out forwards; display: flex; align-items: center; gap: 3px; }
.tr-pop img{ width: 18px; height: 18px; }
@keyframes trPop{ 0%{ opacity: 0; transform: translate(-50%, -20%) scale(.6); } 20%{ opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100%{ opacity: 0; transform: translate(-50%, -160%); } }

.tr-note{ margin: 0; text-align: center; font-size: 12px; font-weight: 700; color: #c6bddf; }

@media (prefers-reduced-motion: reduce){
  .tr-token{ transition: none; } .tr-token.hop img, .tr-die.roll, .tr-pop, .tr-cell.hit{ animation: none; }
}