/* ========================================================================== GRIDROP · TABLE SKIN — the one place a table's eleven colours become a table. This file is the template system's whole surface area. skin.js writes the tokens onto ; every rule below spends them. The catalogue's still and the real game load this SAME file, so a table cannot look one way in the shop and another way in a match. ---- WHY IT IS THIS LONG ------------------------------------------------- felt.css was written for one table, so its cool colours are literals, not variables: forty-four selectors carry a hardcoded #45eded / rgba(69,237,237) / rgba(150,220,230) / #143440. A skin that only overwrote --fneon would recolour about a fifth of the table and leave cyan glowing out of the rest — the clock's digits, the rail's hairline, the chosen card's halo, the round chip. Every one of those forty-four is re-pointed below, in felt.css's own order, so the list can be diffed against it when felt.css changes. ---- THE RULES ----------------------------------------------------------- · EVERY selector is prefixed `body.ottbl`, so with no table equipped this file changes nothing at all. That is what makes it safe to load on the live page before a single table is for sale. · It sets COLOUR only. Not one size, position, radius or z-index — those belong to felt.css and felt.js, which measure a real table for them. · Specificity mirrors felt.css's and adds `.ottbl`, so it wins by one class rather than by !important. Where felt.css already shouts, so does this. ---- THE ELEVEN ---------------------------------------------------------- --t-surface the mat (a photograph or a painted felt) --t-room the wall behind it --t-rail the padded border --t-ink body text --t-mut the quieter second line --t-ac the table's own light --t-gold the money colour --t-pa/--t-pb the two ends of a panel's field --t-slot an empty place --t-edge the printed hairline plus --t-ac-rgb / --t-gold-rgb, the same two as "r,g,b" for rgba(). ========================================================================== */ /* ---- 1 · THE TOKENS felt.css ALREADY READS ------------------------------ */ /* four of them are honest variables, so they are simply re-pointed */ body.ottbl.ot-felt{ --fneon:var(--t-ac); --fgold:var(--t-gold); --fink:var(--t-ink); --fmut:var(--t-mut); --ffelt:var(--t-pb)} /* ⚠️ `:not(.ottbl-preview)` ON EVERY PAGE-LEVEL RULE, and it is load-bearing. In the GAME the page IS the table, so the surface belongs on . In the CATALOGUE the table is a 16:9 still inside a shop, and painting the shop with the mat would put leather behind the price and the buy button. The showroom sets that class; the game never does. Everything below this line — cards, places, slabs, the rail — is shared by both without a guard. */ body.ottbl.ot-felt:not(.ottbl-preview){background:var(--t-room)!important} /* ⚠️ AND THE PAGE'S OWN LID COMES OFF WITH IT. overtake.html:74 paints `.stage` with an opaque `linear-gradient(180deg,var(--bg2),#0a1116)`, and on the table `.stage` is the whole viewport. felt.css:43 strips its border, radius and shadow — everything except that background — so the game shipped with a dark sheet lying over at all times. Nobody could see it, because the sheet and the body underneath it were the same dark. Put a mat on the body and it is suddenly the only thing on screen: the owner equipped Copper & Leather, played a round, and got a black table with copper buttons on it. The mat WAS loaded, WAS painted, and was covered by one gradient. Scoped to `.ottbl` so a page with no table equipped keeps its lid exactly. */ body.ottbl.ot-felt .stage{background:none!important;box-shadow:none!important} /* ---- 2 · THE SURFACE ---------------------------------------------------- TWO FITS, because a table is not always a cloth. `plate` — a painted felt behaves as the game already does: it fills the ellipse, and the rim and lip are the table's edge. `bleed` — a PHOTOGRAPHED mat is a printed sheet lying flat. It has its own printed border and its own centre mark, so stretching it onto a 2.4x-overscanned ellipse would throw both off the screen. It is laid on the room instead, edge to edge, and the plate steps out of its way. This is the difference between cloth on a round table and a playmat on a flat one, and the owner's table is the second. */ body.ottbl-bleed.ot-felt:not(.ottbl-preview){ background:var(--t-surface)!important; background-size:cover!important;background-position:center!important} body.ottbl-bleed .ofelt-plate{background:none;box-shadow:none} body.ottbl-bleed .ofelt-lip, body.ottbl-bleed .ofelt-felt{background:none;box-shadow:none} body.ottbl-bleed .ofelt-felt::before, body.ottbl-bleed .ofelt-felt::after{display:none} /* the padded border the mat lies in, and one key light over the whole room */ body.ottbl-bleed.ot-felt:not(.ottbl-preview)::after{content:'';position:fixed;inset:0;z-index:0; pointer-events:none; box-shadow:inset 0 0 140px 14px var(--t-rail); background:radial-gradient(125% 135% at 50% 40%,rgba(255,238,214,.10),rgba(0,0,0,0) 62%)} /* ⚠️ THE RIM AND THE LIP WERE MISSED BY THE ENUMERATION, and it is worth saying how, so the next sweep does not miss them the same way. The forty-four were found by searching felt.css for a literal cool colour standing inside a selector. `--frim` is neither: it is a conic-gradient declared once as a token (felt.css:26), so a search for cyan never lands on a rule and a search for `var(--frim)` finds one innocent line. The lip's #10181e is a blue-black — cold, but not cyan enough to trip the filter. The result was an ellipse of the ORIGINAL table's milled steel wrapped around every new one. Bleed tables never showed it because both step aside there; a `plate` table showed it always. */ body.ottbl-plate.ot-felt{ --frim:conic-gradient(from 180deg, var(--t-pb), color-mix(in srgb,var(--t-pa) 62%,#ffffff) 12%, color-mix(in srgb,var(--t-pb) 82%,#000000) 26%, color-mix(in srgb,var(--t-pa) 44%,#ffffff) 40%, var(--t-pb) 55%, color-mix(in srgb,var(--t-pa) 56%,#ffffff) 70%, color-mix(in srgb,var(--t-pb) 82%,#000000) 84%, var(--t-pb))} body.ottbl-plate .ofelt-lip{ background:linear-gradient(180deg, color-mix(in srgb,var(--t-pb) 66%,#000000), color-mix(in srgb,var(--t-pb) 26%,#000000))} body.ottbl-plate .ofelt-felt{ background:var(--t-surface); box-shadow:inset 0 6px 26px rgba(0,0,0,.62), inset 0 0 70px rgba(var(--t-ac-rgb),.10)} body.ottbl-plate .ofelt-felt::after{ background: radial-gradient(58% 52% at 50% 42%,rgba(var(--t-ac-rgb),.10),rgba(0,0,0,0) 74%), radial-gradient(120% 60% at 50% 108%,rgba(0,0,0,.5),rgba(0,0,0,0) 62%)} /* ---- 3 · THE PLACES ----------------------------------------------------- */ body.ottbl .ofelt-slots .oslot{ background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.13)); border-color:var(--t-slot); box-shadow:inset 0 3px 8px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05)} /* the place lights ONCE as a card lands, then settles — in this table's light */ body.ottbl .ofelt-slots .oslot.lit{animation:ottblLand .85s ease-out 1} @keyframes ottblLand{ 0%{border-color:var(--t-ac); box-shadow:inset 0 0 22px rgba(var(--t-ac-rgb),.75),0 0 26px rgba(var(--t-ac-rgb),.5)} 55%{border-color:rgba(var(--t-ac-rgb),.6); box-shadow:inset 0 0 12px rgba(var(--t-ac-rgb),.35),0 0 12px rgba(var(--t-ac-rgb),.22)} 100%{border-color:var(--t-slot); box-shadow:inset 0 3px 8px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05)}} /* ---- 4 · THE CARDS ------------------------------------------------------ ⚠️ THE FACE IS NOT TOUCHED. A table skin owns the room, never the card: the metal, the letter, the corner marks and the tier colours all stay exactly as the game deals them, and a card skin is a separate purchase. What a table may reach is the LIGHT AROUND a card — its cast shadow, the ring on one you have chosen, and the back of a card lying face down. */ body.ottbl.ot-felt .pool .pcard{ box-shadow:0 8px 16px rgba(0,0,0,.55), 0 0 16px rgba(var(--t-ac-rgb),.16), inset 0 -3px 6px rgba(60,70,80,.35)} body.ottbl.ot-felt .hand .hcard{ box-shadow:0 12px 24px rgba(0,0,0,.58), 0 0 18px rgba(var(--t-ac-rgb),.20), inset 0 -3px 6px rgba(60,70,80,.35)} body.ottbl.ot-felt .hand.pick .hcard:hover{ filter:brightness(1.08) drop-shadow(0 0 12px rgba(var(--t-ac-rgb),.5))} /* face down */ body.ottbl.ot-felt .pool .pcard.back{ background:linear-gradient(160deg, color-mix(in srgb,var(--t-pa) 88%,#000), color-mix(in srgb,var(--t-pb) 92%,#000) 58%, color-mix(in srgb,var(--t-pa) 76%,#000))!important; border-color:rgba(var(--t-ac-rgb),.42)!important; box-shadow:0 8px 16px rgba(0,0,0,.6),inset 0 0 22px -8px rgba(var(--t-ac-rgb),.85)!important} body.ottbl.ot-felt .pool .pcard.back::before{ border-color:rgba(var(--t-ac-rgb),.24); background-image:repeating-linear-gradient(45deg, rgba(var(--t-ac-rgb),.12) 0,rgba(var(--t-ac-rgb),.12) 2px,transparent 2px,transparent 6px)} body.ottbl.ot-felt .pool .pcard.back::after{ border-color:rgba(var(--t-ac-rgb),.8);box-shadow:0 0 12px -2px rgba(var(--t-ac-rgb),.6)} /* a card you have CHOSEN — this is half of how the round is played */ body.ottbl.ot-felt .pool .pcard.sel{ box-shadow:0 0 0 var(--cbw,2px) var(--t-ac), 0 0 24px rgba(var(--t-ac-rgb),.6), 0 10px 18px rgba(0,0,0,.55), inset 0 -3px 6px rgba(60,70,80,.35)!important} /* the order you gave it */ body.ottbl.ot-felt .pool .pcard .ord{ background:linear-gradient(180deg, color-mix(in srgb,var(--t-ac) 72%,#fff), color-mix(in srgb,var(--t-ac) 82%,#000)); color:#08181d; box-shadow:0 0 10px rgba(var(--t-ac-rgb),.85),0 2px 4px rgba(0,0,0,.5)} /* ---- 5 · THE CHROME: exit chip, round plate, stopwatch ------------------ */ body.ottbl .ofelt-chip{ background:color-mix(in srgb,var(--t-pb) 62%,rgba(0,0,0,.72)); border-color:rgba(var(--t-ac-rgb),.28)} body.ottbl .ofelt-back button, body.ottbl .ofelt-back .backbtn, body.ottbl .ofelt-back .ch-help{color:var(--t-ink); text-shadow:0 0 10px rgba(var(--t-ac-rgb),.4)} body.ottbl .ofelt-back .ch-help, body.ottbl .ofelt-back #fsbtn{border-color:rgba(var(--t-ac-rgb),.35)!important; color:var(--t-ac)!important} body.ottbl .ofelt-back button:hover{color:var(--t-ac)} body.ottbl .ofelt-back #fsbtnhint-float{color:var(--t-ac)!important} body.ottbl .ofelt-round .v{color:var(--t-ink); text-shadow:0 0 12px rgba(var(--t-ac-rgb),.45)} body.ottbl .ofelt-clock{ background:linear-gradient(180deg, color-mix(in srgb,var(--t-pb) 58%,rgba(0,0,0,.72)), color-mix(in srgb,var(--t-pb) 40%,rgba(0,0,0,.8))); border-color:rgba(var(--t-ac-rgb),.28)} /* ⚠️ THE DIGITS KEEP THEIR OWN COLOUR ON PURPOSE. --fclock is the COUNTDOWN: felt.js rewrites it every tick — cyan with time left, orange at ten, red at five — and it is the loudest warning on the table. A skin that tinted it would make "you have five seconds" a different colour on every table, so only the digit FACE follows the furniture and the alarm is left alone. */ body.ottbl .ofelt-clock .d{color:var(--t-ink)} /* ---- 6 · THE STATUS LINE AND THE WORD BAR ------------------------------- */ body.ottbl.ot-felt .arena-cen > .instr{ background:color-mix(in srgb,var(--t-pb) 48%,rgba(0,0,0,.62)); border-color:rgba(var(--t-ac-rgb),.22)} body.ottbl.ot-felt .racebar{ background:color-mix(in srgb,var(--t-pb) 40%,rgba(0,0,0,.6)); border-color:rgba(var(--t-ac-rgb),.26)} body.ottbl.ot-felt .racebar #win{ background:linear-gradient(180deg,rgba(4,8,11,.95), color-mix(in srgb,var(--t-pb) 55%,rgba(0,0,0,.9))); border-color:rgba(var(--t-ac-rgb),.4)} body.ottbl.ot-felt .racebar .btn::before{ background:linear-gradient(180deg, color-mix(in srgb,var(--t-pa) 60%,#000), color-mix(in srgb,var(--t-pb) 80%,#000)); border-color:rgba(var(--t-ac-rgb),.26)} /* ---- 7 · THE PLAYERS RAIL ----------------------------------------------- */ body.ottbl .ofelt-lb{ filter:drop-shadow(0 22px 44px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(var(--t-ac-rgb),.13))} body.ottbl .ofelt-lbin{ border-inline-start-color:rgba(var(--t-ac-rgb),.18); background: repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 3px,rgba(0,0,0,0) 3px 6px), linear-gradient(180deg, color-mix(in srgb,var(--t-pa) 58%,rgba(0,0,0,.76)) 0%, color-mix(in srgb,var(--t-pb) 70%,rgba(0,0,0,.7)) 100%), radial-gradient(120% 55% at 50% 0%,rgba(var(--t-ac-rgb),.10),rgba(0,0,0,0) 62%)} body.ottbl .ofelt-lbhd{border-bottom-color:rgba(var(--t-ac-rgb),.22); background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.12))} body.ottbl .ofelt-lbhd .t{text-shadow:0 0 14px rgba(var(--t-ac-rgb),.4)} body.ottbl .ofelt-lbhd .p{border-color:rgba(var(--t-ac-rgb),.35); background:color-mix(in srgb,var(--t-pb) 55%,rgba(0,0,0,.8));color:var(--t-ink)} body.ottbl .ofelt-lbhd .p.rd{border-color:rgba(var(--t-ac-rgb),.45)} body.ottbl .ofelt-lbhd .p.rd b{text-shadow:0 0 10px rgba(var(--t-ac-rgb),.45)} /* YOUR banner is framed in the table's own light. The rank frames — gold, silver, bronze — are NOT touched: first place has to look like first place on every table, or the podium stops meaning anything. */ body.ottbl .ofelt-row.me .ofelt-fr{ background:linear-gradient(160deg,var(--t-ac), color-mix(in srgb,var(--t-ac) 40%,#000) 45%,var(--t-ac))} body.ottbl .ofelt-row.me.r4plus .ofelt-fr{ filter:drop-shadow(0 0 9px rgba(var(--t-ac-rgb),.47))} /* the player's own accent (--rc) is the AVATAR's, not the table's, and it stays — it is the only thing telling one rival from another at a glance */ /* ⚠️ THREE THE FIRST SWEEP LEFT COLD, all found by the live gate rather than by reading, which is exactly why the gate exists. · .ofelt-mebar (felt.css:854) — the spine down YOUR row. Its middle stop was already `--fneon`, so it took the table's light in the middle and kept felt.css's cyan at both ends and in its glow. Half-tinted reads worse than untinted: a copper bar fading into cyan. · .ofelt-arrow (felt.css:861) — its FILTER stacks two drop-shadows and only the first is `--fneon`. A filter is not a background or a border, so a sweep that looks at paint properties never sees it. · .ofelt-lbtog — this one is not in felt.css at all. bigcards.css:586 lights the rail's hide button while the rail is out, and bigcards.css was not in the enumeration: the sweep covered felt.css and console-skin.css, and a FOURTH stylesheet also paints the table. Its selector is (0,3,0), so this one adds `.ottbl` to outrank it rather than shouting. */ body.ottbl .ofelt-mebar{ background:linear-gradient(180deg,rgba(var(--t-ac-rgb),.15),var(--t-ac) 50%,rgba(var(--t-ac-rgb),.15)); box-shadow:0 0 9px rgba(var(--t-ac-rgb),.67)} body.ottbl .ofelt-arrow{ filter:drop-shadow(0 0 6px var(--t-ac)) drop-shadow(0 0 14px rgba(var(--t-ac-rgb),.53))} body.ottbl.ot-felt:not(.ot-lbhide) .ofelt-lbtog{ color:var(--t-panel-ink,#0d0603); background:linear-gradient(180deg,var(--t-ac),color-mix(in srgb,var(--t-ac) 62%,#000)); box-shadow:0 6px 18px -8px rgba(var(--t-ac-rgb),.75)} /* ---- 8 · «كلمتك» — the game's own plate and its four slabs --------------- console-skin.css builds every slab out of --ac (the line), --ac2 (the icon highlight), --gl (the glow, as r,g,b) and --b1/--b2 (the dark under it). Re-pointing those five moves border, glow, hum, sheen and icon together without redrawing any of them. ⚠️ THE RED STAYS RED. «إزالة الكلمة» throws your word away. A destructive control that changes colour with the furniture is a different button on every table, so only the dark it stands on follows the wood. */ body.ottbl.otcs .otcs-a1{--ac:var(--t-ac);--ac2:#ffffff;--gl:var(--t-ac-rgb); --b1:color-mix(in srgb,var(--t-pa) 42%,rgba(0,0,0,.9)); --b2:color-mix(in srgb,var(--t-pb) 58%,rgba(0,0,0,.92))} body.ottbl.otcs .otcs-a2{--ac:var(--t-gold);--ac2:#fff8e6;--gl:var(--t-gold-rgb); --b1:color-mix(in srgb,var(--t-pa) 42%,rgba(0,0,0,.9)); --b2:color-mix(in srgb,var(--t-pb) 58%,rgba(0,0,0,.92))} body.ottbl.otcs .otcs-a3{--b1:color-mix(in srgb,#3a0c10 62%,var(--t-pb)); --b2:color-mix(in srgb,#1c0508 70%,var(--t-pb))} /* «ثبّت» — bigcards.css dresses it in cyan; on the table the game deals today the accent IS that cyan, so this changes nothing there and everything else */ body.ottbl .bcword .bcwlock{ background:linear-gradient(135deg, color-mix(in srgb,var(--t-ac) 55%,#000), color-mix(in srgb,var(--t-ac) 95%,#fff)); color:#08181d} body.ottbl .bcword.ok .bcwlock{ box-shadow:0 0 0 2px rgba(var(--t-ac-rgb),.5),0 0 22px rgba(var(--t-ac-rgb),.65)} body.ottbl .bcword.ok .bcwrd{color:var(--t-ac); text-shadow:0 0 14px rgba(var(--t-ac-rgb),.45)}