/* ================================================================
   lkg-strokes.css
   ----------------------------------------------------------------
   Styles for Tier 2 "Pre-Writing Strokes" on the LKG English page
   (lkg-english.html), built by lkg-strokes.js:

     A.1 Standing Lines   A.2 Sleeping Lines   A.3 Slanting Lines
     A.4 Curves           A.5 Circles, Zigzags & Loops
     A.6 Stroke Match     A.7 Pattern Builder

   The popup shell, the picture stage, the voice buttons and the
   single-line answer chips already come from lkg-ready.css and the
   site's shared quiz theme, so this file ONLY adds what is new for
   strokes (every class starts with "lks-").

   Finish (matt + shine, kid psychology): soft matt cream tiles, glossy
   sunny-yellow, coral, sky-blue, mint, lavender and bubble-gum pink
   "tubes" with a white shine line. Warm, calm, high-contrast, never
   flashing, no harsh "wrong" colours.

     <link rel="stylesheet" th:href="@{/css/lkg-strokes.css}" />
   ================================================================ */

/* a stroke drawn as a glossy tube: dark soft outline, matt body, white shine */
.lks-t-o { fill: none; stroke: rgba(80, 50, 130, .55); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lks-t-c { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lks-t-h { fill: none; stroke: #fff; opacity: .6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* matt cream tile behind a stroke / piece, and the round disc used when strokes are scattered */
.lks-tile { fill: #fffaf0; stroke: #e4d8ff; stroke-width: 5; pointer-events: none; }
.lks-disc { fill: #fffdf6; stroke: #e0d3ff; stroke-width: 4; }

/* the arrow that shows which way to drag */
.lks-arrow { fill: none; stroke: #7c5cff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; pointer-events: none; }

/* pattern builder: empty box and the tray the pieces sit in */
.lks-slot { fill: #fff; stroke: #c9b8ff; stroke-width: 3; stroke-dasharray: 6 6; pointer-events: none; }
.lks-trayrect { fill: rgba(255, 255, 255, .7); stroke: #e0d3ff; stroke-width: 3; }

/* things a finger taps inside a picture: big, instant, no grey flash */
.lks-it, .lks-tr { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lks-it, .lks-tr, .lks-mv { transform-box: fill-box; transform-origin: center; }
.lks-it:active, .lks-tr:active { opacity: .85; }

/* the friend that is dragged along the dots: nice big grab area, never scrolls the page */
.lks-mv { touch-action: none; }

@media (prefers-reduced-motion: reduce) {
    .lks-it:active, .lks-tr:active { opacity: 1; }
}