/* Hi-Lo rebuild (js/hilo.js): history strip, card table (previous / current / deck), rank ladder, meter. */
#v-hilo .hlx-stage{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;
  background:radial-gradient(ellipse 65% 60% at 50% 42%, #1b4789 0%, #12356c 40%, #0b2552 72%, #081a3b 100%)}
#v-hilo .hlx-stage:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#v-hilo .hlx-stage > :not(.outcome){position:relative;z-index:1}
@media (max-width:900px){ #v-hilo #hl-stage{height:560px;padding:10px 10px 12px;gap:8px} }

/* history */
.hlx-hist{flex:none;display:flex;align-items:center;gap:10px;height:76px;padding:0 10px;border-radius:12px;background:#06112799;border:1px solid #ffffff14}
.hlx-cap{flex:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px;font-weight:800;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.hlx-track{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 6px;align-items:center;height:100%}
.hlx-track::-webkit-scrollbar{display:none}
.hlx-track:empty:before{content:"Cards from this run appear here";margin:auto;color:var(--dim);font-size:13.5px;font-weight:600}
.hlx-step{position:relative;flex:none;--cw:38px;width:38px;height:53px;animation:hlx-in .3s cubic-bezier(.2,.8,.3,1)}
.hlx-step .dc{transition:none}
.hlx-step em{position:absolute;right:-5px;bottom:-5px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  background:var(--control-hi);color:#fff;box-shadow:0 0 0 2px #0a1a38;z-index:2}
.hlx-step em .ic{width:11px;height:11px;stroke-width:3}
.hlx-step.hi em,.hlx-step.lo em,.hlx-step.same em{background:var(--win);color:#03261a}
.hlx-step.bust em{background:var(--lose);color:#2b0710}
.hlx-step.start em{background:var(--accent)}
.hlx-step.skip .dc{opacity:.5}
.hlx-step.bust .dc-f{box-shadow:0 0 0 2px var(--lose)}
@keyframes hlx-in{from{opacity:0;transform:translateX(14px)}}

/* card table */
.hlx-table{flex:1;min-height:0}
.hlx-table .dc{transform-origin:0 0}
.hlx-table .dc.prev{filter:brightness(.72) saturate(.85)}
.hlx-deck{left:0;top:0;transform-origin:0 0}
.hlx-ghost{position:absolute;left:0;top:0;border-radius:8px;border:2px dashed #9fc3ff33;transform-origin:0 0}
.hlx-lab{position:absolute;left:0;top:0;translate:-50% 0;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9fb7e0aa;white-space:nowrap}
.hlx-lab.cur{color:#cfe0ff}
.hlx-stage.nt .dc,.hlx-stage.nt .hlx-lab{transition:none!important}

/* message / result row */
.hlx-msg{flex:none;height:40px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15.5px;color:#d6e4ff;transition:opacity .2s}
.hlx-msg.w{color:var(--win)}
#hl-stage .outcome{top:var(--msg,70%);bottom:auto;transform:translate(-50%,calc(-50% + 10px));max-width:calc(100% - 16px)}
#hl-stage .outcome.on{transform:translate(-50%,-50%)}
#hl-stage .outcome .det{overflow:hidden;text-overflow:ellipsis}


/* meter */
.hlx-meter{flex:none;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px}
.hlx-meter div{padding:8px 12px;border-radius:10px;background:#06112799;border:1px solid #ffffff14;min-width:0}
.hlx-meter small{display:block;font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.hlx-meter b{display:block;font-size:19px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hlx-meter .mult b{color:var(--cyan)}
.hlx-stage.live .hlx-meter .mult{border-color:#65c7ff55}

/* controls */
.hlx-choices{display:grid;gap:8px;margin-top:10px}
.hlx-choice{display:grid;grid-template-columns:22px 1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:1px;align-items:center;text-align:left;
  padding:8px 14px 8px 12px;min-height:58px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--inset);cursor:pointer;transition:border-color .15s,background .15s}
.hlx-choice .ic-w{grid-row:span 2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%}
.hlx-choice .ic-w .ic{width:15px;height:15px;stroke-width:2.6}
.hlx-choice.hi .ic-w{background:#2fe08f22;color:var(--win)}
.hlx-choice.lo .ic-w{background:#ff8a5b22;color:#ff9b70}
.hlx-choice.same .ic-w{background:#65c7ff22;color:var(--cyan)}
.hlx-choice .t{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hlx-choice .m{font-size:15px;font-weight:800;text-align:right;grid-column:3;grid-row:1 / span 2}
.hlx-choice .p{font-size:12.5px;font-weight:600;color:var(--muted)}
.hlx-choice.hi:hover:not(:disabled){border-color:#2fe08f88;background:#2fe08f10}
.hlx-choice.lo:hover:not(:disabled){border-color:#ff8a5b88;background:#ff8a5b10}
.hlx-choice:disabled{opacity:.5;cursor:not-allowed}
.hlx-skip{width:100%;margin-top:8px;height:44px}
@media (max-width:560px){
  .hlx-hist{height:66px}
  .hlx-meter div{padding:6px 9px}
  .hlx-meter b{font-size:16.5px}
  #hl-stage .outcome{gap:8px;padding:8px 12px 8px 8px;font-size:15px}
  #hl-stage .outcome .det{font-size:12.5px}
}