/* Bliss Ladder. By Luke Steuber.
   One language across the three layouts: the goal is dashed (solid once reached),
   the current word is marked, choices are hairline buttons, passed words are faded. */
#stage{min-width:0;min-height:0;overflow:hidden}
.bliss .mark{stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.bliss .dot{fill:var(--ink)}
.gloss{color:var(--text)}
.choice{border-radius:0;background:var(--bg);color:var(--ink);cursor:pointer;touch-action:manipulation;font:inherit;transition:transform .1s,border-color .1s}
.choice:hover{border-color:var(--guide)}
.choice:active{transform:scale(.985)}
.choice .gloss{color:var(--text)}
.choice.hinted{outline:2px solid var(--ink);outline-offset:3px;animation:hint-pulse 1.2s ease-in-out 3}
@keyframes rung-in{from{opacity:0}to{opacity:1}}

/* ---- Grid: rows of words, columns of characters. */
.lgrid{display:flex;flex-direction:column;max-width:100%;margin:auto}
.lgrid .lrow{display:flex;align-items:center;width:100%;min-height:var(--rh);padding:0;border:0;border-top:1px solid var(--line);text-align:left}
.lgrid .cells{display:flex;flex:none}
.lgrid .cell{display:grid;place-items:center}
.lgrid .lrow>.gloss{flex:1;min-width:0;padding:0 8px 0 12px;text-align:left;font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.lgrid .past,.lgrid .blank{min-height:var(--prh)}
.lgrid .past{opacity:.42}
.lgrid .past .gloss{font-size:12px}
.lgrid .now{background:var(--band)}
.lgrid .now .gloss{font-size:16px}
.lgrid .options{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.lgrid .choice.lrow{border:1px solid var(--line)}
.lgrid .choice .cell.same{opacity:.22}
.lgrid .blank .cell{position:relative}
.lgrid .blank .cell::after{content:"";position:absolute;left:18%;right:18%;top:50%;border-top:1px dotted var(--guide)}
.lgrid .blank{border-top-style:dotted}
.lgrid .goal{border:1px dashed var(--frame)}
.lgrid .now+.options{margin-top:12px}
/* Wide and short: the ladder on the left, the choices beside it. */
.lgrid.side{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row dense;column-gap:24px;align-content:center}
.lgrid.side>.lrow{grid-column:1}
.lgrid.side>.options{grid-column:2;grid-row:1/span 12;align-self:center;margin:0}
.lgrid.won{padding-bottom:84px}
.lgrid.won .lrow{animation:rung-in .45s ease-out both}
.lgrid.won .goal{border:2px solid var(--frame)}
.lgrid.won .lrow:nth-child(2){animation-delay:.1s}.lgrid.won .lrow:nth-child(3){animation-delay:.2s}.lgrid.won .lrow:nth-child(4){animation-delay:.3s}.lgrid.won .lrow:nth-child(5){animation-delay:.4s}.lgrid.won .lrow:nth-child(6){animation-delay:.5s}.lgrid.won .lrow:nth-child(n+7){animation-delay:.6s}

/* ---- Rail: left to right toward the goal, choices beneath. */
.lrail{display:flex;flex-direction:column;align-items:center;gap:28px;width:100%;margin:auto}
.lrail .track{display:flex;align-items:flex-end;justify-content:center;gap:0;width:max-content}
.lrail.won .track,.lrail.wrap .track{width:auto;max-width:100%;flex-wrap:wrap;row-gap:14px}
.lrail .w{display:grid;justify-items:center;gap:2px;flex:none}
.lrail .w .gloss{font-size:13px;line-height:1.2;max-width:12em;text-align:center}
.lrail .past{opacity:.42}
.lrail .past .gloss{font-size:12px;max-width:6.5em}
.lrail .now{padding:4px 6px 2px;background:var(--band)}
.lrail .goal{padding:4px 6px 2px;border:1px dashed var(--frame)}
.lrail .sep,.lrail .fold{align-self:center;padding:0 4px;color:var(--guide);font:500 14px/1 "Plex Mono",ui-monospace,monospace}
.lrail .run{align-self:center;flex:none;height:0;margin:0 8px;border-top:2px dotted var(--guide)}
.lrail .options{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:12px;max-width:100%}
.lrail .choice{display:grid;justify-items:center;gap:2px;min-width:48px;min-height:48px;padding:8px 10px 6px;border:1px solid var(--line)}
.lrail .choice .gloss{font-size:13px}
.lrail.won{padding-bottom:84px}
.lrail.won .goal{border:2px solid var(--frame)}
.lrail.won .w{animation:rung-in .45s ease-out both}


/* ---- Stack: goal, current word, choices; one size, one frame language. */
.lstack{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;margin:auto}
.lstack .unit{display:grid;justify-items:center;align-content:end;gap:2px;padding:8px 14px 6px;width:var(--uw,auto);max-width:100%}
.lstack .unit .gloss{font-size:14px;line-height:1.2;text-align:center}
.lstack .goal{border:1px dashed var(--frame)}
.lstack .now{border:1px solid var(--frame)}
.lstack .trail{margin:0;min-height:18px;font-size:13px;color:var(--sub);text-align:center}
.lstack .options{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:10px;max-width:100%}
.lstack .choice{border:1px solid var(--line);min-width:48px;min-height:48px}
.lstack.won{list-style:none;margin:auto;padding:0 0 84px;gap:6px}
.lstack.won .unit{padding:2px 14px;width:auto}
.lstack.won .goal{border:2px solid var(--frame)}
.lstack.won li{animation:rung-in .45s ease-out both}
.lstack.won li:nth-child(2){animation-delay:.12s}.lstack.won li:nth-child(3){animation-delay:.24s}.lstack.won li:nth-child(4){animation-delay:.36s}.lstack.won li:nth-child(5){animation-delay:.48s}.lstack.won li:nth-child(n+6){animation-delay:.6s}

#stage{display:flex;flex-direction:column}
/* Some characters draw below the earthline; their words keep clear of them. */
.lstack .unit .gloss,.lrail .w .gloss,.lrail .choice .gloss{padding-top:5px}