#eg-surface.lines-surface{touch-action:manipulation}
.lines-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;max-width:470px;margin:12px auto;font-size:13px;color:#5d4031}
.lines-next{display:flex;align-items:center;gap:6px;font-weight:700}
.lines-next .lines-ball{width:28px;height:28px;font-size:14px}
.lines-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;width:100%;max-width:470px;margin:8px auto;padding:6px;box-sizing:border-box;background:#dcc3a6;border-radius:14px}
.lines-board .lines-cell{display:grid;place-items:center;min-width:0;min-height:0;aspect-ratio:1;padding:0;margin:0;border:0;border-radius:6px;background:#fbf2e4;cursor:pointer;touch-action:manipulation}
.lines-board .lines-cell:disabled{cursor:default;opacity:1}
.lines-board .lines-cell:focus-visible{outline:3px solid #6751a1;outline-offset:1px;z-index:1}
@media(hover:hover){.lines-board .lines-cell:not(:disabled):hover{background:#ffe6bd}}
.lines-ball{display:grid;place-items:center;width:80%;height:80%;border-radius:50%;color:#fff;font:700 clamp(10px,3.2vw,19px)/1 Arial,sans-serif;text-shadow:0 1px 1px #0006;background:radial-gradient(circle at 33% 28%,#ffffffd0 0 8%,#ffffff00 24%),radial-gradient(circle at 50% 55%,var(--ball) 58%,var(--ball-dark) 100%);box-shadow:0 2px 3px #3d241433;pointer-events:none}
.lines-ball[data-color="1"]{--ball:#e2483c;--ball-dark:#9e2a20}
.lines-ball[data-color="2"]{--ball:#f2c02e;--ball-dark:#b3830b;color:#553600;text-shadow:none}
.lines-ball[data-color="3"]{--ball:#3a86d8;--ball-dark:#1d5394}
.lines-ball[data-color="4"]{--ball:#3aa35a;--ball-dark:#1f6d38}
.lines-ball[data-color="5"]{--ball:#9557cf;--ball-dark:#5f2e8e}
.lines-ball[data-color="6"]{--ball:#22b2b3;--ball-dark:#107072}
.lines-ball[data-color="7"]{--ball:#e562ab;--ball-dark:#a02f71}
.lines-selected{animation:lines-bounce .45s ease-in-out infinite alternate}
.lines-new{animation:lines-grow .28s ease-out}
.lines-pop{animation:lines-pop .26s ease-in forwards}
@keyframes lines-bounce{to{transform:translateY(-16%)}}
@keyframes lines-grow{from{transform:scale(.2);opacity:.3}}
@keyframes lines-pop{to{transform:scale(1.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.lines-selected,.lines-new,.lines-pop{animation:none}.lines-selected{outline:3px solid #5a3a28;outline-offset:2px}}
@media(max-width:480px){.lines-board{gap:2px;padding:4px}}