/* Bliss Chain. By Luke Steuber. */
.chain{width:100%;display:grid;grid-template-columns:100%;justify-items:center;align-content:center;gap:18px;padding:4px 0}
.chain.side{grid-template-columns:var(--row) 1fr;grid-template-rows:auto auto;column-gap:24px;align-items:center}
.chain.side .line{grid-column:1;grid-row:1}
.chain.side .tray{grid-column:1;grid-row:2}
.chain.side .dict{grid-column:2;grid-row:1/3;justify-content:flex-start;justify-self:stretch;padding:0 0 0 24px;border-top:0;border-left:1px solid var(--line)}
.chain.won{padding-bottom:84px}
.chain.tight{gap:10px;padding:0}
.chain.tight .dict{padding-top:8px;gap:6px 14px}

/* The row: characters on one skyline and earthline, each pair's word beneath its joint. */
.line{position:relative;max-width:100%}
.line .rules{position:absolute;left:0;overflow:visible}
.line .rules line{stroke:var(--line);stroke-width:1}
.placed{position:absolute;display:grid;justify-items:center}
.tile-gloss{position:absolute;height:18px;font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.joint{position:absolute;display:grid;justify-items:center;gap:4px}
.joint::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:var(--tick);background:var(--line)}
.joint .gloss{font-size:13px;line-height:16px;max-height:32px;overflow:hidden;color:var(--text)}
.line .rules .broken{stroke:var(--guide);stroke-dasharray:3 9}
.placed.last,.tile-gloss.last,.joint.new{animation:chain-in .3s ease-out both}
@keyframes chain-in{from{opacity:0}to{opacity:1}}

/* The characters still to place: only those that make a word with the last one are lit. */
.tray{display:grid;justify-content:center;justify-items:center;align-items:end;gap:10px 8px;max-width:100%}
.slot{display:block;visibility:hidden}
.choice{display:grid;justify-items:center;gap:2px;min-width:48px;min-height:48px;padding:8px 4px 6px;border:1px solid var(--frame);border-radius:0;background:var(--bg);color:var(--ink);cursor:pointer;touch-action:manipulation;transition:transform .1s,opacity .15s}
.choice:active{transform:scale(.97)}
.choice:disabled{opacity:.22;border-color:transparent;cursor:default}
.choice .gloss{font-size:13px;color:var(--text)}
.choice:disabled .gloss{color:var(--sub)}
.choice.hinted{outline:2px solid var(--ink);outline-offset:3px;animation:hint-pulse 1.2s ease-in-out 3}

/* Every word on the board, quiet; a word already in the row is struck through. */
.dict{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:10px 18px;max-width:100%}
.dict li{display:grid;justify-items:center;gap:2px}
.dict .gloss{font-size:13px;line-height:16px}
.dict li.made .ink{stroke:var(--guide)}
.dict li.made .gloss{text-decoration:line-through;text-decoration-thickness:1px}
.dict .head{flex-basis:100%;text-align:center;font:500 12px/1 "Plex Mono",ui-monospace,monospace;letter-spacing:.02em;color:var(--sub)}
.chain.side .dict .head{text-align:left}