/* Rätt ordning (ordering). Laddas efter round-view.css.
 * TV: sakerna som rader i frågekortet; vid facit fylls samma plats av rätt ordning med värden.
 * Mobil: den sorterbara listan i nederdelen, ovanför låsknappen och tiden. */
.order-direction{display:inline-flex;align-items:center;gap:8px;justify-self:center;margin:0;padding:5px 14px;border-radius:40px;background:#d8fd7814;border:1px solid #d8fd7844;color:var(--accent);font-weight:750;font-size:14px;letter-spacing:.2px}
.ordering-phone .phone-middle .order-direction{align-self:center}

/* Mobil: sorterbar lista */
.order-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.order-item{position:relative;display:flex;align-items:center;gap:10px;min-height:54px;padding:6px 8px 6px 12px;border:2px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);font-weight:700;font-size:16px;line-height:1.25}
.order-list.is-enabled .order-item{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.order-list.is-locked .order-item{border-color:#d8fd7855;background:#2a3328}
.order-position{flex-shrink:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#d8fd7818;color:var(--accent);font-size:14px;font-weight:850;font-variant-numeric:tabular-nums}
.order-grip{width:12px;height:24px;opacity:.7;background:radial-gradient(circle,#bdb6d4 1.6px,transparent 2.1px) 0 0/6px 6px}
.order-label{flex:1;min-width:0;overflow-wrap:anywhere}
.order-moves{display:flex;gap:6px}
.order-move{width:42px;height:42px;border-radius:12px;border:1px solid #59506f;background:#39324f;color:var(--ink);font-size:19px;font-weight:800;line-height:1}
.order-move:disabled{opacity:.3}
.order-item.is-dragging{z-index:2;border-color:var(--accent);background:#332c4d;box-shadow:0 12px 30px #0007;cursor:grabbing}
.order-list.is-sorting .order-item:not(.is-dragging){opacity:.85}
.order-help{margin:0}
.stage-countdown .order-list .order-item{opacity:.75}

/* TV: sakerna i rummets ordning, en rad per sak */
.order-board{width:100%;height:100%;min-height:0;display:grid;align-content:center;gap:calc(var(--u)*1.4)}
.screen .order-board .order-direction{font-size:calc(var(--u)*2);padding:calc(var(--u)*.6) calc(var(--u)*2)}
.order-cards{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:calc(var(--u)*1.2)}
.order-card{display:flex;align-items:center;gap:calc(var(--u)*1.6);min-height:calc(var(--u)*8);padding:calc(var(--u)*.8) calc(var(--u)*2);border:2px solid #8570ad55;border-radius:calc(var(--u)*2);background:linear-gradient(150deg,#3f3155d9,#252039e8);font-size:calc(var(--u)*2.6);font-weight:750;line-height:1.2;overflow-wrap:anywhere}
.order-card-image{display:block;width:calc(var(--u)*9);height:calc(var(--u)*6.4);flex:none;object-fit:cover;border-radius:calc(var(--u)*1)}
.order-card-shape{color:#c5adff;font-size:calc(var(--u)*2.2)}
.order-credits{margin:0;padding:0;text-align:center}

/* Facit: rätt ordning med värden, på samma plats och med samma radhöjd */
.order-solution{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*1.2)}
.order-step{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:calc(var(--u)*1.4);min-height:calc(var(--u)*8);padding:calc(var(--u)*.8) calc(var(--u)*2);border:2px solid #d8fd7855;border-radius:calc(var(--u)*2);background:#d8fd780f}
.tv-round .order-position{width:calc(var(--u)*4);height:auto;aspect-ratio:1;font-size:calc(var(--u)*1.9)}
.order-step-label{min-width:0;color:var(--ink);font-weight:700;font-size:calc(var(--u)*2.4);line-height:1.25;overflow-wrap:anywhere}
.order-step-value{color:var(--accent);font-size:calc(var(--u)*2.4);font-variant-numeric:tabular-nums;white-space:nowrap}
.order-yours{display:block;color:var(--muted);font-weight:500;font-size:12px;margin-top:2px}
.order-mark{font-weight:850;width:22px;text-align:center}
.order-step.is-right .order-mark{color:var(--accent)}
.order-step.is-wrong{border-color:#fa788c66;background:#ffffff08}
.order-step.is-wrong .order-mark{color:var(--wrong)}
/* Mobilens facit: samma fyra rader som listan, med ✓ eller ✕ per plats */
.phone-solution{gap:8px}
.phone-solution .order-step{min-height:48px;gap:8px;padding:5px 10px;border-radius:14px}
.phone-solution .order-yours{display:inline;margin:0 0 0 6px;font-size:11px}
.phone-solution .order-step-label,.phone-solution .order-step-value{font-size:15px}

@media(prefers-reduced-motion:no-preference){
  .stage-reveal.phase-enter .ordering-reveal-card .order-step{animation:order-fill .5s ease-out both}
  .stage-reveal.phase-enter .ordering-reveal-card .order-step-1{animation-delay:.9s}
  .stage-reveal.phase-enter .ordering-reveal-card .order-step-2{animation-delay:1.8s}
  .stage-reveal.phase-enter .ordering-reveal-card .order-step-3{animation-delay:2.7s}
  .order-item{transition:border-color .15s,background-color .15s}
}
@keyframes order-fill{from{opacity:0;transform:translateX(-18px) scale(.97)}to{opacity:1;transform:none}}