/* ============================================================================= CONSOLE SKIN — the owner's chassis, brought to the ONLINE table ============================================================================= He drew a play screen, we built it locally at site/overtake/_console-lab.html, he tested it and said «الآن انتقل إلى الأونلاين». This is that move. NOTHING HERE BUILDS A CONTROL. The online left column already is his column: `.otw-slot` (the dealt wildcard, wild.js) above `.bcword` (the word plate, bigcards.js — «كلمتك», the word, the score, «إزالة الكلمة», «مسح حرف», «ثبّت»). Every button below is the game's OWN button with the game's OWN listener still on it; this file and console-skin.js only change what it looks like and where it stands. bigcards.js is not touched — the shared file stays exactly as its owner left it. THE ICONS AND THE MOTION ARE HIS. Lifted from the rendered DOM of the artifact he handed over (`GRIDROP Action Icons.html`) — three SVGs, ten keyframes, and the slab's whole skin: border, body gradient, four-layer glow, the hairline that hums inside it, the sheen that crosses it, the caption strip. Everything is scoped to `body.otcs`, which console-skin.js only adds once it has actually skinned a plate. Until then the page is byte-for-byte what it was. ========================================================================== */ /* ---- his ten keyframes, verbatim ---------------------------------------- */ @keyframes ai-in{0%{opacity:0;transform:translateY(20px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}} @keyframes ai-hum{0%,100%{opacity:.45}50%{opacity:.95}} @keyframes ai-flicker{0%,100%{opacity:1}42%{opacity:1}44%{opacity:.55}46%{opacity:1} 88%{opacity:1}90%{opacity:.7}92%{opacity:1}} @keyframes ai-sheen{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}} @keyframes ai-tap{0%,58%,100%{transform:translate(0,0)}68%{transform:translate(-3px,4px)}80%{transform:translate(0,0)}} @keyframes ai-ripple{0%,58%{opacity:0;transform:scale(.35)}70%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.9)}} @keyframes ai-cell{0%,52%,100%{opacity:.34}66%{opacity:1}} @keyframes ai-pull{0%,14%{opacity:0;transform:translateX(14px)}26%{opacity:1;transform:translateX(8px)} 52%{opacity:1;transform:translateX(-16px)}70%{opacity:0;transform:translateX(-24px)} 100%{opacity:0;transform:translateX(14px)}} @keyframes ai-gone{0%,30%{opacity:1;transform:translate(0,0) scale(1)} 52%{opacity:0;transform:translate(9px,-7px) scale(.55)} 92%{opacity:0;transform:translate(9px,-7px) scale(.55)} 100%{opacity:1;transform:translate(0,0) scale(1)}} @keyframes ai-poof{0%,32%{opacity:0;transform:scale(.4)}44%{opacity:.9;transform:scale(1)} 62%,100%{opacity:0;transform:scale(1.6)}} @keyframes ai-lid{0%,18%,100%{transform:rotate(0deg)}30%,76%{transform:rotate(-32deg)}} @keyframes ai-suck{0%,16%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)} 38%{opacity:1;transform:translate(calc(var(--tx) * .5),-17px) rotate(calc(var(--rz) * .45)) scale(.92)} 56%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--rz)) scale(.3)} 93%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--rz)) scale(.3)} 100%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}} @keyframes ai-gulp{0%,46%,100%{transform:scale(1,1)}54%{transform:scale(1.12,.88)} 64%{transform:scale(.95,1.05)}74%{transform:scale(1,1)}} @keyframes ai-mouth{0%,44%{opacity:0;transform:scaleX(.4)}54%{opacity:1;transform:scaleX(1)} 72%,100%{opacity:0;transform:scaleX(1.3)}} /* ⚠️ THE PRESS IS A FLASH, NOT A STATE — his question, in his words: «إذا ضغطت على الأزرار فإنها ستعمل وتضيء ... والإضاءة تكون فقط لحظية». So the answer is built rather than promised: one press fires ONE 340ms flare that brightens the whole slab, floods its glow and lets both fall back to exactly where they were. Nothing latches, nothing stays lit, and a second press fires it again from the start (console-skin.js re-arms the class). */ @keyframes otcs-press{ 0% {filter:brightness(1)} 12% {filter:brightness(1.85) saturate(1.15)} 100% {filter:brightness(1)} } @keyframes otcs-flare{ 0% {opacity:0;transform:scale(.86)} 14% {opacity:1;transform:scale(1)} 100% {opacity:0;transform:scale(1.04)} } /* ========================================================================= 1 · THE THREE SLABS ========================================================================= */ /* the row that holds «مسح حرف» and «إزالة الكلمة» becomes a column, and the order becomes his: explain, then take a letter back, then wipe the word */ body.otcs .bcword .bcwbtns{gap:clamp(4px,.7vh,8px)} body.otcs .bcword .bcwbtns .bcwrow{display:flex;flex-direction:column; flex-wrap:nowrap;gap:clamp(4px,.7vh,8px)} body.otcs .bcword .bcwbtns .bcwrow .bcwback{order:1} body.otcs .bcword .bcwbtns .bcwrow .bcwclear{order:2} /* HIS ORDER, TOP TO BOTTOM: the wildcard, the three slabs, then «كلمتك» and «ثبّت» beneath them. `.bcword` is already a flex column (bigcards.css:199), so this is an ordering, not a rebuild — and console-skin.js lifts «ثبّت» out of the button group so it can sit at the very foot where his drawing has it. */ body.otcs .bcword .bcwbtns{order:-2} body.otcs .bcword .bcwlbl{order:-1} body.otcs .bcword .bcwrd{order:0} body.otcs .bcword .bcwsc{order:1} body.otcs .bcword .bcwlock{order:2} /* ⚠️ MOVING «ثبّت» OUT OF `.bcwbtns` DROPS FOUR RULES THAT WERE KEYED ON IT BEING IN THERE. They are put back here, one for one, rather than left to be discovered in a live race. Two are cosmetic — but the other two are not: `.bcword.wait .bcwbtns` and `.bcword.locked .bcwbtns` are what HIDE the buttons while the plate is waiting or the hand is locked, and without them Lock-in would have stayed on screen in states where it must not be pressable. bigcards.css:258 .bcword.wait .bcwbtns{display:none} bigcards.css:223 .bcword.locked .bcwbtns{display:none} overtake-online.html:805 .bcword .bcwbtns .bcwlock{font-size:var(--otTxt)!important} bigcards.css:397 (@media max-height:460) padding:3px 4px;min-height:0 */ /* ⚠️ `.wait` NO LONGER HIDES «ثبّت» — owner, 2026-08-15: the buttons stay on screen through the throw phase, switched off, so the plate keeps one shape from the deal to the buzzer (bigcards.css `.bcword.wait .bcwbtns`). It is `disabled` in that state, which the rule at the foot of this file paints, so it is unpressable exactly as it was when it was invisible. `.locked` still hides it: there the word is already committed and the row is finished, not waiting. */ body.otcs .bcword.locked > .bcwlock{display:none} body.ot-felt.otcs .bcword > .bcwlock{font-size:var(--otTxt)} /* ⚠️ NOT REPLICATED VERBATIM, AND DELIBERATELY SO. bigcards.css:397 is `padding:3px 4px;min-height:0`, and copying it faithfully reproduced its effect: «ثبّت» ends up a 6px box around a 17px word on every landscape phone — measured on the UNSKINNED page too, so it is not a regression of mine but it is not something to carry forward either. The phone tier below gives it back a thumb's worth; this keeps the tighter padding without the zero. */ @media (max-height:460px){ body.otcs .bcword > .bcwlock{padding:3px 5px;min-height:32px;line-height:24px} } /* AND THE SHAPE WENT WITH THE RULE. Moving «ثبّت» out of `.bcwbtns` (console-skin.js) also dropped `border-radius:11px` and `min-height:40px` from bigcards.css:227-231, and only the height was put back — and only on a short screen. Measured on the live online table: border-radius 0px at 880x400, 844x390, 1024x768 AND 1280x800, so the one control that COMMITS the word is the only square thing in a column of rounded slabs; and 20px tall at 1024x768 / 21px at 1280x800 around a 15px label, because the min-height above lives inside @media(max-height:460px) and nothing replaces it higher up. ⚠️ THE HEIGHT IS A clamp, NOT A SECOND BREAKPOINT, and not a flat 36px. This rule comes LATER in the file than the @media above at the SAME specificity, so a flat min-height would WIN over it and steal 4px back out of the 400px phone this whole patch series is buying height for. clamp() resolves to 32px at every height <= 460 (4.6vh = 21.2px there) — the phone keeps exactly what the tier above gives it — and grows the desktop/tablet slab to ~35-37px instead of 20px. The disabled tint is matched to the siblings' own (.otcs-act[disabled], :118) rather than left at bigcards' .35, which on a 12px label over the felt reads as switched off rather than as not-yet-valid. */ body.otcs .bcword > .bcwlock{border-radius:11px;min-height:clamp(32px,4.6vh,40px)} body.otcs .bcword > .bcwlock:disabled{opacity:.45} body.otcs .bcword .otcs-act{ all:unset;box-sizing:border-box;position:relative;display:block;width:100%; padding:0;overflow:hidden;cursor:pointer;text-align:center; border-radius:clamp(10px,1.1vw,16px); background:linear-gradient(180deg,rgba(var(--gl),var(--a0)) 0%,var(--b1) 46%,var(--b2) 100%); border:2px solid var(--ac); box-shadow:0 0 3px rgba(var(--gl),var(--g1)),0 0 11px rgba(var(--gl),var(--g2)), 0 0 30px rgba(var(--gl),var(--g3)),inset 0 0 18px rgba(var(--gl),var(--g4)); animation:ai-in .6s cubic-bezier(.22,.61,.36,1) .05s both,ai-flicker 7s linear 1s infinite; transition:transform .12s,filter .15s} body.otcs .bcword .otcs-act:hover{transform:translateY(-2px)} body.otcs .bcword .otcs-act:active{transform:translateY(0) scale(.98)} body.otcs .bcword .otcs-act[disabled]{opacity:.45;filter:saturate(.45) brightness(.85); cursor:default;pointer-events:none} /* the momentary light — one shot, then gone */ body.otcs .bcword .otcs-act.otcs-hit{animation:ai-in .6s cubic-bezier(.22,.61,.36,1) .05s both, ai-flicker 7s linear 1s infinite,otcs-press .34s ease-out} body.otcs .bcword .otcs-act .otcs-flare{position:absolute;inset:-2px;border-radius:inherit; pointer-events:none;opacity:0; background:radial-gradient(120% 120% at 50% 50%,rgba(var(--gl),.55),rgba(var(--gl),.12) 55%,transparent 72%); box-shadow:0 0 26px rgba(var(--gl),.85),inset 0 0 26px rgba(var(--gl),.55)} body.otcs .bcword .otcs-act.otcs-hit .otcs-flare{animation:otcs-flare .34s ease-out} body.otcs .bcword .otcs-act .otcs-hum{position:absolute;inset:4px; border-radius:clamp(7px,.8vw,12px);border:1px solid rgba(var(--gl),var(--gh)); pointer-events:none;animation:ai-hum 3.6s ease-in-out infinite} body.otcs .bcword .otcs-act .otcs-sheen{position:absolute;top:0;left:0;width:34%;height:100%; pointer-events:none;background:linear-gradient(90deg,transparent,rgba(200,255,252,.14),transparent); animation:ai-sheen 6.5s ease-in-out 1.2s infinite} /* ⚠️ SMALLER THAN THE LAB, AND IT HAS TO BE. His mockup's column carries four things; the online column carries six — the wildcard's own tip plate and «ثبّت» are both live controls his drawing had no reason to show. Measured with the lab's sizes in place: `.bcword` scrolled at 1480x840, which is a HUD you cannot use during a 15-second race. So the slab keeps his shape and gives up his scale — and every number below was measured against a real table, not picked. */ body.otcs .bcword .otcs-act .otcs-bay{position:relative;display:flex;justify-content:center; padding:clamp(3px,.55vh,7px) 6px 0} body.otcs .bcword .otcs-act .otcs-bay svg{width:min(clamp(26px,2.7vw,46px),5.4vh); height:auto;overflow:visible;display:block} /* ⚠️ `display:block`, AND IT IS LOAD-BEARING. Inside a