/* Flow */
.flow-app { max-width: 600px; margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-left)) calc(28px + env(safe-area-inset-bottom)); }
.intro h1 { margin: 6px 0 0; font-size: clamp(2.2rem, 8vw, 3rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; }
.intro p { margin: 8px 0 18px; color: var(--muted); }
.bar2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.streak { font-family: var(--mono); font-size: .82rem; color: var(--muted); white-space: nowrap; }
.streak b { color: var(--green); font-weight: 500; }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #0F161E; border: 1px solid var(--line); }
.seg button { font: inherit; font-size: .95rem; color: var(--muted); padding: 8px 18px; border: 0; border-radius: 9px; background: none; cursor: pointer; touch-action: manipulation; transition: color .2s, background .2s; }
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { color: var(--text); background: rgba(91,207,230,.16); box-shadow: inset 0 0 0 1px var(--cyan); }
.seg.small button { font-size: .88rem; padding: 6px 12px; font-family: var(--mono); }
.sizes { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

.board { margin-top: 16px; }
.hud { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: .92rem; }
.hud .sp { flex: 1; }
.lbl-t { font-weight: 600; }
.count { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.clock { font-family: var(--mono); font-size: 1.05rem; color: var(--green); min-width: 3.2em; text-align: right; }

.grid { --n: 6; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 1px solid #2C3846; background: #0F161E; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; outline: none; }
.grid:focus-visible { box-shadow: 0 0 0 2px var(--green); }
.cell { position: relative; border-right: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); transition: background .15s; }
.cell.on { background: rgba(74,222,128,.10); }
.cell.wr::after, .cell.wb::before { content: ""; position: absolute; z-index: 3; background: #DCE3EA; border-radius: 3px; }
.cell.wr::after { top: -2px; bottom: -2px; right: -3px; width: 5px; }
.cell.wb::before { left: -2px; right: -2px; bottom: -3px; height: 5px; }
.cell.no { animation: no .3s; }
@keyframes no { 0%, 100% { background: transparent; } 40% { background: rgba(247,200,115,.22); } }
.trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.trail .line { fill: none; stroke: var(--green); stroke-width: .34; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.trail .line.solved { stroke: var(--cyan); animation: glow 1.2s ease-out; }
@keyframes glow { from { stroke: var(--green); } }
.step { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62%; height: 62%; max-width: 46px; max-height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #1B2531; border: 2px solid #4A5866; color: var(--text); font-weight: 700; font-size: clamp(.8rem, 3.6vw, 1.05rem); transition: background .15s, border-color .15s, color .15s; }
.step.first { border-color: var(--green); }
.step.last { border-color: var(--pink); }
.step.hit { background: var(--green); border-color: var(--green); color: #0F161E; }
.step.last.hit { background: var(--pink); border-color: var(--pink); color: #fff; }
.msg { min-height: 1.5em; margin: 10px 2px 0; font-size: .92rem; color: var(--muted); }
.msg.bad { color: #FBDDA6; } .msg.hint { color: var(--cyan); }
.ctrl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ctrl .btn { padding: 11px 8px; font-size: .95rem; text-align: center; touch-action: manipulation; }
.ctrl .btn:disabled { opacity: .45; cursor: default; box-shadow: none; }

.done { margin-top: 16px; padding: 20px; border-radius: 16px; border: 1px solid rgba(236,72,153,.45); background: linear-gradient(135deg, rgba(236,72,153,.10), rgba(91,207,230,.04)); animation: up .3s ease-out; }
@keyframes up { from { opacity: 0; transform: translateY(10px); } }
.done h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
.done h2 span { font-family: var(--mono); color: var(--green); }
.done p { margin: 6px 0 16px; color: var(--muted); }
.done .acts { display: grid; gap: 8px; }
.done .btn { text-align: center; }
.how { margin-top: 18px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.035); }
.how summary { cursor: pointer; font-weight: 600; }
.how ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: .92rem; }
.how li + li { margin-top: 6px; }
.madeby { text-align: center; color: var(--muted); font-size: .85rem; margin: 18px 0 0; }
.madeby a { color: var(--cyan); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .cell.no, .done, .trail .line.solved { animation: none; } }