/* ================================================================
   lkg-writing.css
   ----------------------------------------------------------------
   Styles for Tier 4 "Tracing and Writing Capital Letters" on the
   LKG English page (lkg-english.html), built by lkg-writing.js:

     A.1 Straight-Line Letters   A.2 Slanting-Line Letters
     A.3 Curve Letters           A.4 Line + Curve Letters
     A.5 Sand Tray / Finger Write
     A.6 Missing Letter          A.7 Order the Alphabet

   The popup shell, voice buttons, stage frame, phone sizing and the
   single-line answer chips (.lk-picker, .lk-live) already come from
   lkg-common.js / lkg-ready.css and the site's shared quiz theme, so
   NOTHING of that is repeated here. This file ONLY adds what is new
   for writing (every class starts with "lkw-").

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

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

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

/* ---------- matt cream tile and warm sand pad ---------- */
.lkw-tile { fill: #fffaf0; stroke: #e4d8ff; stroke-width: 5; pointer-events: none; }
.lkw-sand { fill: #f6e2b8; stroke: #e6c98e; stroke-width: 5; pointer-events: none; }
.lkw-grain { fill: #e8cd96; pointer-events: none; }

/* ---------- tracing guide: pale road with dotted centre line ---------- */
.lkw-gw { fill: none; stroke: #efe7ff; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lkw-gd { fill: none; stroke: #8f7bd6; stroke-width: 3.6; stroke-dasharray: .1 8.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lkw-hid { fill: none; stroke: none; pointer-events: none; }
.lkw-dn { pointer-events: none; }
.lkw-dots { fill: none; stroke: #b9aee6; stroke-width: 6; stroke-dasharray: .1 16; stroke-linecap: round; pointer-events: none; }

/* ---------- glowing start dot, number badges, pencil ---------- */
.lkw-ring { fill: none; stroke: #34c58f; stroke-width: 5; opacity: .9; pointer-events: none;
    transform-box: fill-box; transform-origin: center; animation: lkw-pulse 1.4s ease-in-out infinite; }
.lkw-mk, .lkw-nb, .lkw-over, .lkw-pen { pointer-events: none; }
.lkw-knob { cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.lkw-knob:active { cursor: grabbing; }

/* ---------- sand tray ink: a finger groove with a soft shine ---------- */
.lkw-sl { fill: none; stroke: #c28842; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; opacity: .95; pointer-events: none; }
.lkw-sh { fill: none; stroke: #fff; stroke-width: 4; opacity: .5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transform: translate(-1.6px, -1.8px); }
.lkw-ghost, .lkw-cover { pointer-events: none; }

/* ---------- letter tiles and boxes (Missing Letter / Order the Alphabet) ---------- */
.lkw-slot { fill: #fff; stroke: #c9b8ff; stroke-width: 3; stroke-dasharray: 6 6; }
.lkw-slotg { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lkw-tl { cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.lkw-tl.lkw-drag { cursor: grabbing; filter: drop-shadow(0 6px 6px rgba(60, 40, 120, .35)); }
.lkw-tl.lkw-sel .lk-o { stroke: #ffb400 !important; stroke-width: 6 !important; }

/* ---------- gentle motion ---------- */
@keyframes lkw-pulse { 0%, 100% { transform: scale(.9); opacity: .95; } 50% { transform: scale(1.18); opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
    .lkw-ring { animation: none; }
}