/* ============================================================================= WHERE THE WORD YOU ARE BUILDING STANDS — the two halves, in CSS ============================================================================= Paired with wordplace.js; read its header for the measurements and the why. Everything here is scoped to a class this page only wears when that file has decided it should: `body.otwr-col` for the re-order, `body.otwr-on` for the echo. Until then the page is byte-for-byte what it was. ========================================================================== */ /* ========================================================================= 1 · THE COLUMN READS IN THE ORDER OF THE THOUGHT ========================================================================= The owner: put the word «above the buttons». console-skin.css:85-89 currently orders the plate's children .bcwbtns(-2) → .bcwlbl(-1) → .bcwrd(0) → .bcwsc(1) → .bcwlock(2) so the three action slabs come FIRST and the word you are building is printed underneath them. Re-ordered here, the column reads: the wildcard → YOUR WORD → what you can do about it → ثبّت which is the order the player actually thinks in. ⚠️ THIS RE-STACKS THE SAME BOXES: both files are ordering the SAME flex children of the SAME element, so nothing is created, removed or re-parented. The plate's own rect keeps every edge it had — measured with the re-order on and off at 800x360 AR: top Δ0, left Δ0, width Δ0, right Δ0 — which is what keeps wild.js's publishClear(), leftcol.js's writes and bigcards.js's placeHint()/lkBand() all measuring what they measured before. The plate IS about 10px taller, because the word below is drawn at a size worth reading; height and bottom are the two dimensions none of those four files reads. See the long note in wordplace.js. The numbers beat console-skin's because this sheet is loaded after it and the selectors carry one more class (`body.otwr-col`), so nothing has to shout with !important at a stylesheet that is not misbehaving. */ body.otwr-col .bcword .bcwlbl{order:-4} body.otwr-col .bcword .bcwrd {order:-3} body.otwr-col .bcword .bcwsc {order:-2} body.otwr-col .bcword .bcwbtns{order:-1} body.otwr-col .bcword .bcwlock{order:2} /* AND IT IS READ AS A RESULT, NOT AS A FIELD LABEL. The word was rendering at about the size of the button captions beneath it — the quietest thing in a column of glowing, animating slabs, and the one thing the player reads ten times a round. ⚠️ SIZED AGAINST THE COLUMN, NOT ONLY AGAINST THE VIEWPORT. `--hudCol` is clamp(92px,12.5vw,210px) and drops to clamp(84px,10.5vw,104px) on a short screen; a vh-only size ignores that and a 15-letter Arabic word then wraps to four lines and eats the plate's whole height budget. /5.4 keeps three characters on a line at the narrowest column we ship. ⚠️ 1.75, NOT 1.25 — Arabic ink measures about 1.69x the font size in this codebase, and `overflow:hidden` above means a short line box does not spill, it silently cuts the tops off the letters. Same number console-skin.css:284 arrived at by measurement. */ body.otwr-col .bcword .bcwrd .bcww{ /* ⚠️ THE FLOOR WAS OVERRIDING THE MEASUREMENT. On a 400px-tall screen the min() above answers 16.8px and a 20px floor threw that answer away, buying a 35px line box for a row leftcol.js had already capped at 31.4px. 16px lets the measured answer stand; on every screen tall enough for 4.2vh >= 20px nothing changes at all (1024x768 still computes 23.7px, 1280x800 29.6px). */ font-size:clamp(16px,min(4.2vh,calc(var(--hudCol,150px) / 5.4)),32px); line-height:1.75} /* ⚠️ AND IT CAN NEVER BE CENTRED INTO A CLIP. `.bcwrd` (bigcards.css:209) is a shrinkable flex item with `align-items:center`, so when leftcol.js's measured `max-height` is a few pixels short the row pays for it TWICE — half above the line box and half below — and the half above lands outside `.bcword`'s padding box, where `overflow-y:auto` (bigcards.css:403) cuts it with no scrollbar to get it back: centred overflow is invisible to the scroller, so scrollHeight === clientHeight and the letters simply arrive decapitated. Measured live in Arabic: at 880x400 the plate is capped at 118px around 123.6px of content, the row is squeezed 35 -> 31.4, and an eight-letter word loses 15.3px off the TOPS of its letters; at 844x390 the row hits its 26px floor and the loss is 18.0px. `safe` keeps the centring at every size that fits (1024x768 and 1280x800 both measure squeeze 0) and falls back to start-alignment only where the alternative is a word with its top cut off. Same trap, same word, as overtake-online.html:160's `align-content:safe center` on `.pool.fit`. */ body.otwr-col .bcword .bcwrd{align-items:safe center} /* the caption stops competing with the word directly under it */ body.otwr-col .bcword .bcwlbl{opacity:.62;letter-spacing:1.4px} /* ========================================================================= 2 · THE ECHO — the word where the eyes already are ========================================================================= Measured on the live online table with a word actually tapped in: at 1480x840 the plate stands at x12..197 while the cards being tapped are centred at x845. The echo fills the empty band between the table and the hand — 944x368 there, still 608x136 on a 844x390 landscape phone. `position:fixed` + `pointer-events:none` + a `` child: it can neither be clicked through nor taken into anyone's layout, and no rule scoped to `.arena-cen` or `.bcword` can reach it — which is why it cannot disturb the four files that measure the plate. wordplace.js publishes the four numbers. */ .otwr{position:fixed;z-index:28;pointer-events:none;display:none; left:var(--otwrX,50vw);bottom:var(--otwrB,120px); transform:translateX(-50%); width:max-content;max-width:min(var(--otwrW,60vw),92vw); box-sizing:border-box;text-align:center; font-family:Cairo,system-ui,sans-serif} body:not(.ar) .otwr{font-family:Sora,Inter,system-ui,sans-serif} body.otwr-on .otwr{display:block;animation:otwrIn .22s cubic-bezier(.2,.9,.3,1.2) both} /* ⚠️ THE STAND-DOWN IS A CSS GUARANTEE, NOT A POLLED DECISION — AND IT HAD TO BECOME ONE. wordplace.js also takes `otwr-on` off for these states, but it learns about them on a 160ms tick, and a class the game flips arrives in the SAME FRAME. Measured across a 16-viewport sweep: with only the JS answer, the echo was still up when the results cabinet had already claimed the screen in 2 of 16 samples, and it lingered into `ot-needthrow` in most of them. A HUD that is 160ms late over the results board is exactly the class of fault this page has been chasing all week (see the `.otnt`/`.bcword` note at overtake-online.html:756-766), so the answer is made structural: while any of these four classes is on, the echo cannot be drawn at all, whatever the script is doing or however long it has been throttled. ot-needthrow — «ألقِ بطاقة» (.otnt) stands in this exact band ot-locked — .otlk says the same word, bigger, in the same place ot-res/-fin — the results cabinet owns the screen `display:none` and not `visibility:hidden` is safe HERE precisely because nothing measures this element: it is a read-only copy, and wordplace.js reads the PLATE's box, never its own. */ body.ot-needthrow .otwr, body.ot-locked .otwr, body.ot-res .otwr, body.ot-fin .otwr{display:none!important;animation:none!important} /* the plate's own glass, so the echo reads as the same instrument seen closer rather than as a second, unrelated panel (overtake-online.html:703) */ .otwr-in{display:inline-flex;align-items:baseline;justify-content:center; gap:clamp(6px,1vw,12px); max-width:100%;box-sizing:border-box; padding:clamp(3px,.7vh,8px) clamp(10px,1.6vw,20px); border-radius:clamp(10px,1.2vw,16px); background:rgba(4,10,14,.72);border:1px solid rgba(120,214,226,.22); box-shadow:0 10px 30px -12px rgba(0,0,0,.75); -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)} /* THE WORD ITSELF — sized against BOTH axes. vh alone is wrong on a landscape phone (short), vw alone overflows a narrow band; `min()` of the two is what `.otlk-w` already does for the locked panel, and it is what makes one rule fit a 2560px ultrawide and a 800x360 phone. Capped by the measured band height so a big word can never grow past the room wordplace.js said it had. */ .otwr-w{display:block;max-width:100%; font-weight:900;letter-spacing:.5px; font-size:min(clamp(22px,min(7.4vh,4.4vw),46px),calc(var(--otwrH,60px) * .62)); /* ⚠️ 1.75 — see the note above. This is the largest Arabic on the screen; at 1.25 it loses the tops of ا ل ك and the tails of ق ي. */ line-height:1.75;color:#eafcff; text-shadow:0 2px 10px rgba(0,0,0,.75); /* a 15-letter word must still be READ, not clipped — same treatment .otlk-w and .bcwrd already carry */ word-break:break-all;overflow-wrap:anywhere} .otwr.ok .otwr-w{color:#8DEBF7;text-shadow:0 0 18px rgba(69,237,237,.5),0 2px 10px rgba(0,0,0,.7)} .otwr-sc{flex:none;font-weight:900;font-variant-numeric:tabular-nums; font-size:min(clamp(13px,min(3.4vh,2.2vw),24px),calc(var(--otwrH,60px) * .34)); line-height:1.75;color:#f2b84b;text-shadow:0 2px 8px rgba(0,0,0,.7)} .otwr-sc[hidden]{display:none} /* ⚠️ THE POP IS ON THE WHOLE ELEMENT, NEVER ON ITS LETTERS. Splitting the word into per-letter spans to animate them stops Arabic joining — سلم becomes س‌ل‌م — which is why bigcards.js:486 keeps its own word plain too. One node, one transform. */ .otwr-w.pop{animation:otwrPop .16s ease-out} @keyframes otwrPop{from{transform:scale(1.16)}to{transform:scale(1)}} @keyframes otwrIn{from{opacity:0;transform:translate(-50%,6px)} to{opacity:1;transform:translate(-50%,0)}} @media(prefers-reduced-motion:reduce){ .otwr-w.pop{animation:none} body.otwr-on .otwr{animation:none} } /* phones do not pay for glass — the same trade felt.css and bigcards.css make */ @media (max-width:1024px){ .otwr-in{backdrop-filter:none!important;-webkit-backdrop-filter:none!important; background:rgba(6,12,17,.86)} }