/* ---- ПРОВОДНИК ПЕРВОГО БОЯ (TASK-48) ----------------------------------------- The guide layer over the frozen /fight2. Loaded AFTER board.css (index.html), scoped to `.cb-wrap`, and every token it needs it names itself under --tu-*: the port never reads one of these, and none of them can collide with the port's own vocabulary. THE CONSOLE IS NOT TOUCHED. render.ts, combat.css and the arm->pick->commit grammar are frozen and pinned (console-freeze.test.ts). This sheet only READS the frozen ids and classes the arming grammar already writes -- `.dcr` (a hand die's hidden checkbox), `.vbr` (a verb radio), `button[name=react]`, `.unit.moved`, `.cb-roll` -- exactly the way board.css reveals its pointers off `:has(#vb-:checked)`. Nothing here changes what is legal; it only says what to look at. THE MARKUP IS OURS AND IT IS ONE ELEMENT. fight2/tutor.ts appends `div.tu` with six `` inside the LANE (the layer TASK-47 opened). Exactly one line shows at a time, off the six mutually exclusive rules below; the other five stay display:none, so a screen reader hears the beat that is standing and nothing else. IT CAN NEVER TAKE A PRESS. The whole layer is pointer-events:none, and every pointer below is an OUTLINE -- a property that occupies no space and that the port draws nowhere except on :focus-visible (which simply wins while focused, as it should). No layout of the console moves by a pixel while the guide runs. */ .cb-wrap{ --tu-chalk:rgba(232,200,122,.55); /* the board's own chalk, a shade stronger */ --tu-ink:#E6DBC8; --tu-scrim:rgba(9,9,11,.82); --tu-edge:rgba(232,200,122,.22); } /* THE LINE SITS ON THE HORIZON. `--seam` is the lane's own floor/wall junction (combat.css:2413, the same number the board, the scape and every stone are measured from), and the ruler's cells run from the lane's bottom edge up to exactly there -- so "above the ruler" is a measure this port already owns rather than a number of ours. It also puts the words above the men's heads and below their status marks, which is the only band of the lane nothing else uses. */ .cb-wrap .lane .tu{ /* THE LINE STANDS IN THE VAULT (PO, live 2026-09-07): on the horizon it sat across the front rank's plates and hid the very names and tells beat 2 talks about. The top of the lane is the room's ceiling -- nothing of the board lives there, so the sentence reads and covers nothing. */ position:absolute;left:0;right:0;top:3%; z-index:21; /* over the men (tune.css tops them at 20) -- teaching text must read */ display:flex;justify-content:center;pointer-events:none;padding:0 3%; } .cb-wrap .lane .tu .tu-line{ display:none;max-width:min(52rem,86%); font:400 clamp(.66rem,1.35cqw,.92rem)/1.5 var(--fvoice,Georgia,"Times New Roman",serif); letter-spacing:.01em;color:var(--tu-ink);text-align:center;text-wrap:balance; background:var(--tu-scrim);border:1px solid var(--tu-edge);border-radius:2px; padding:.42em .9em;box-shadow:0 2px 10px rgba(0,0,0,.55); } /* ---- WHICH BEAT STANDS --------------------------------------------------- Six rules, written the way the frozen callout's own three are written (combat.css:1732-1735): mutually exclusive `:has()` questions over the SAME hidden inputs the arming grammar counts, so a beat turns on the click and not on the next render. Picking a die and arming a verb never reach the server -- a beat that waited for a response would arrive a click late. ORDER OF PRECEDENCE, and every rule carries its own guards so the cascade is never the tie-breaker: 5 the rank fell -- wins outright; it is a thing that just happened 4a the answer -- the react row stands, the turn is not yours 1 the door -- the roll button, and no die thrown yet 2 the die + tell -- dice on the table, none picked 3 the verb -- a die picked, nothing armed 4 the man + ranks -- a verb armed A CLOSED FIGHT TEACHES NOTHING: the over-ledger silences the whole layer. */ .cb-wrap:has(.cb-over) .lane .tu{display:none} .cb-wrap:has(.unit.moved) .lane .tu .tu-b5{display:block} .cb-wrap:not(:has(.unit.moved)):has(button[name="react"]) .lane .tu .tu-b4a{display:block} .cb-wrap:not(:has(.unit.moved)):not(:has(button[name="react"])):has(.cb-roll):not(:has(.dcr)) .lane .tu .tu-b1{display:block} .cb-wrap:not(:has(.unit.moved)):not(:has(button[name="react"])):has(.dcr):not(:has(.dcr:checked)):not(:has(.vbr:checked)) .lane .tu .tu-b2{display:block} .cb-wrap:not(:has(.unit.moved)):not(:has(button[name="react"])):has(.dcr:checked):not(:has(.vbr:checked)) .lane .tu .tu-b3{display:block} .cb-wrap:not(:has(.unit.moved)):not(:has(button[name="react"])):has(.vbr:checked) .lane .tu .tu-b4{display:block} /* ---- THE POINTER --------------------------------------------------------- A soft chalk rim on the thing the beat is about. It is `outline` and never `border`/`box-shadow`: an outline takes no space (so no console row shifts), and the frozen sheet uses one only for :focus-visible, which out-ranks this on the element that actually has focus -- the keyboard ring is never hidden by a teaching mark. Every rule is gated on `:has(.tu)`, i.e. on the layer being MOUNTED, so a steward who has been taught sees none of it. The guards repeat the beat conditions above verbatim rather than leaning on a shorter selector: a rim that lingers one beat past its line would be pointing at the wrong control, which is worse than no rim at all. */ .cb-wrap:has(.tu) :is(.cb-roll, .grp.hand label.cb-die[for], .grp.verbs label.cb-vbtn[for], .lane .unit.foe.alive .figbox.hit, .cb-row.answers button[name="react"], .lane .unit.moved .figbox){ outline:0 dashed transparent;outline-offset:3px; } /* 1 -- the door: the one press the fight opens with */ .cb-wrap:has(.tu):not(:has(.unit.moved)):not(:has(button[name="react"])):has(.cb-roll):not(:has(.dcr)) .cb-roll, /* 2 -- the hand: every die the player may pick up (a spent die carries no `for`) */ .cb-wrap:has(.tu):not(:has(.unit.moved)):not(:has(button[name="react"])):has(.dcr):not(:has(.dcr:checked)):not(:has(.vbr:checked)) .grp.hand label.cb-die[for], /* 3 -- the blade: every verb the kit is offering (a locked one lost its `for`, project.ts armable:false) */ .cb-wrap:has(.tu):not(:has(.unit.moved)):not(:has(button[name="react"])):has(.dcr:checked):not(:has(.vbr:checked)) .grp.verbs label.cb-vbtn[for], /* 4 -- the men: the figures the armed verb can be spent on. The board's own marks (board.css `.pt-`) are already lit under their feet by the arming -- this rim only says «the next press is a man», it does not re-state which. */ .cb-wrap:has(.tu):not(:has(.unit.moved)):not(:has(button[name="react"])):has(.vbr:checked) .lane .unit.foe.alive .figbox.hit, /* 4a -- the answer row */ .cb-wrap:has(.tu):not(:has(.unit.moved)):has(button[name="react"]) .cb-row.answers button[name="react"], /* 5 -- the man who stepped forward */ .cb-wrap:has(.tu):has(.unit.moved) .lane .unit.moved .figbox{ outline-width:1px;outline-color:var(--tu-chalk); animation:tuBreathe 2.6s ease-in-out infinite; } @keyframes tuBreathe{0%,100%{outline-color:var(--tu-chalk)}50%{outline-color:rgba(232,200,122,.16)}} @media (prefers-reduced-motion: reduce){ .cb-wrap :is(.cb-roll, label.cb-die, label.cb-vbtn, .figbox, button[name="react"]){animation:none} } /* 2 -- and the TELL is half of that beat: the die beside a name is what the line is talking about, so it breathes with the hand. It is the plate's own element (render.ts `.tell`), never a new one. */ .cb-wrap:has(.tu):not(:has(.unit.moved)):not(:has(button[name="react"])):has(.dcr):not(:has(.dcr:checked)):not(:has(.vbr:checked)) .lane .unit.foe .plate .tell{ outline:1px dashed var(--tu-chalk);outline-offset:2px; } /* THE PHONE (the standing 390px pass). Under a 640px lane the ruler already drops its rule text to the bare glyph; the guide keeps its words -- they are the whole feature -- and simply takes the lane's full width and a tighter line. */ @container (max-width:640px){ .cb-wrap .lane .tu{padding:0 1.5%} .cb-wrap .lane .tu .tu-line{max-width:97%;line-height:1.4;padding:.36em .6em} }