/* The clickable direction B page. */
body.play { background: #0b0c0d; }
.pbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 16px; border-bottom: 1px solid #26292c; }
.pbar b { font-weight: 600; margin-right: 12px; }
.pbar span { color: var(--muted); }
.pbar nav { display: flex; gap: 4px; flex: none; }
.pbar a { color: var(--accent-soft); text-decoration: none; padding: 4px 10px; border: 1px solid transparent; white-space: nowrap; }
.pbar a:hover { border-color: var(--line); color: #fff; }
#app { width: 1162px; margin: 14px auto 0; }
.play .win { box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.play .dim { pointer-events: auto; cursor: default; }
.play .field input { background: none; border: 0; outline: 0; color: var(--fg); font: inherit; letter-spacing: inherit; width: 100%; min-width: 0; padding: 0; }
.play .field input::placeholder { color: var(--muted); }
.play .field:focus-within { border-color: var(--accent); }
.play .dcard, .play .strip button, .play .pinm, .play .qrow, .play .fcard, .play .rrow, .play .frow { cursor: pointer; }
.play .pop .opt { cursor: pointer; }
.play .chip.q, .play button.chip { cursor: pointer; }
.play .chip.q:hover, .play button.chip:hover { border-color: var(--accent); }
.play .bhead .k:hover { color: var(--fg); }
.play .kv { margin: 0; }
#toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px); background: #101214; border: 1px solid var(--accent); color: var(--fg); padding: 9px 16px; max-width: min(640px, 90vw); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.try { max-width: 1160px; margin: 34px auto 70px; padding: 0 16px; color: #c9ccd1; font-size: 14px; }
.try h2 { font-size: 16px; font-weight: 600; color: var(--fg); margin-bottom: 8px; }
.try ul { margin: 0 0 12px; padding-left: 18px; columns: 2; column-gap: 40px; }
.try li { margin: 0 0 6px; break-inside: avoid; }
.try b { color: var(--fg); font-weight: 600; }
.try p { color: var(--muted); max-width: 90ch; }
@media (max-width: 900px) { .pbar { flex-direction: column; align-items: flex-start; } .try ul { columns: 1; } }