/* ============================================================ Cassino — TABLE CHROME Ornate gold frame around the play area, wood-and-gold top bar, flourished hint plaque. Loads AFTER style.css. Everything is vector: seven inline SVG data URIs, no new image files, nothing to fetch, ~15 KB of CSS text (4.9 KB gzipped). Crisp at any devicePixelRatio, verified at 1x, 2x and 3x. DOM: NO new elements. Every rule below re-styles markup that index.html already ships. ============================================================ */ :root { /* The gold inside the SVGs is #c9a24c — it has to be a literal there, custom properties do not reach inside a data URI. Change one, change the other. */ --gold-bri: #e6c47c; /* lit edge, numerals, hint text */ --wood-mid: #33200f; /* top-bar wood, mid tone */ --wood-lo: #1d1108; /* top-bar wood, shadow */ --panel-ink: #100e0b; /* recessed panel ground */ /* Thickness of the felt frame's border ring. The whole ornament scales with this one number — corners, rules and the lozenges stay in proportion because the lozenge background-size is derived from it. */ --frame: clamp(17px, 5.6vw, 24px); } /* ============================================================ 1. THE FELT FRAME — #table-wrap ------------------------------------------------------------ A 48x48 SVG sliced at 16 drives border-image: the four 16x16 corners carry the flourish, the four 16x16 edge slices carry nothing but two parallel rules, so stretching them to any width or ANY HEIGHT cannot distort the ornaments. The two lozenges are separate background layers pinned to `top center` / `bottom center` of the BORDER box. Backgrounds on an overflow:auto element do not scroll with its content, so the frame stays welded to the visible box even when the table has more cards than fit. ============================================================ */ #table-wrap { border: var(--frame) solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cdefs%3E%3Cpath id='e' d='M28 11H56M28 14H56M28 73H56M28 70H56M11 28V56M14 28V56M73 28V56M70 28V56'/%3E%3Cg id='c'%3E%3Cpath d='M28 11A17 17 0 0 0 11 28'/%3E%3Cpath d='M28 14C22.8 14 18.6 14.8 16.6 16.6'/%3E%3Cpath d='M14 28C14 22.8 14.8 18.6 16.6 16.6'/%3E%3Cpath d='M23.4 14.25A7.19 7.19 0 0 1 14.25 23.4' stroke-width='.65'/%3E%3Cg fill='none' stroke-width='.55' transform='translate(16.6 16.6)'%3E%3Cpath d='M0 0C1.71 -0.82 3.88 -0.82 5.70 0C3.88 0.82 1.71 0.82 0 0Z' transform='rotate(-3.04)'/%3E%3Cpath d='M0 0C1.92 -0.94 4.35 -0.94 6.40 0C4.35 0.94 1.92 0.94 0 0Z' transform='rotate(28.99)'/%3E%3Cpath d='M0 0C1.92 -0.94 4.35 -0.94 6.40 0C4.35 0.94 1.92 0.94 0 0Z' transform='rotate(61.02)'/%3E%3Cpath d='M0 0C1.71 -0.82 3.88 -0.82 5.70 0C3.88 0.82 1.71 0.82 0 0Z' transform='rotate(93.05)'/%3E%3C/g%3E%3Ccircle cx='16.6' cy='16.6' r='.7' fill='%23c9a24c' stroke='none'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23000' stroke-opacity='.28' stroke-width='2.2'%3E%3Cuse href='%23e'/%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='translate(84 0) scale(-1 1)'/%3E%3Cuse href='%23c' transform='translate(0 84) scale(1 -1)'/%3E%3Cuse href='%23c' transform='translate(84 84) scale(-1 -1)'/%3E%3C/g%3E%3Cg stroke='%23c9a24c' stroke-width='1.05'%3E%3Cuse href='%23e'/%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='translate(84 0) scale(-1 1)'/%3E%3Cuse href='%23c' transform='translate(0 84) scale(1 -1)'/%3E%3Cuse href='%23c' transform='translate(84 84) scale(-1 -1)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 28 stretch; /* the lozenge centred on the top and bottom rules. Its SVG is 34x17, drawn to a scale of 17 units = --frame, so the star lands exactly on the outer rule whatever --frame resolves to. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%23c9a24c' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M28 4.4C29.6 7.7 31.2 9.4 34.6 11C31.2 12.6 29.6 14.3 28 17.6C26.4 14.3 24.8 12.6 21.4 11C24.8 9.4 26.4 7.7 28 4.4Z'/%3E%3Cpath d='M35.6 11C36.7 9.3 41.6 9.3 42.7 11C41.6 12.7 36.7 12.7 35.6 11Z'/%3E%3Cpath d='M20.4 11C19.3 9.3 14.4 9.3 13.3 11C14.4 12.7 19.3 12.7 20.4 11Z'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%23c9a24c' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M28 4.4C29.6 7.7 31.2 9.4 34.6 11C31.2 12.6 29.6 14.3 28 17.6C26.4 14.3 24.8 12.6 21.4 11C24.8 9.4 26.4 7.7 28 4.4Z'/%3E%3Cpath d='M35.6 11C36.7 9.3 41.6 9.3 42.7 11C41.6 12.7 36.7 12.7 35.6 11Z'/%3E%3Cpath d='M20.4 11C19.3 9.3 14.4 9.3 13.3 11C14.4 12.7 19.3 12.7 20.4 11Z'/%3E%3C/g%3E%3C/svg%3E"); background-origin: border-box; background-repeat: no-repeat, no-repeat; background-position: center top, center bottom; background-size: calc(var(--frame) * 2) var(--frame), calc(var(--frame) * 2) var(--frame); } /* Give the frame back the room it took. #table's own padding is what pays for it, so the cards lose ~8px a side, not the full 17. */ #table { padding: 4px 0 8px; } /* The empty-table caption should sit inside the frame, not on it. */ #table-hint { padding-left: 4px; padding-right: 4px; } /* ============================================================ 2. THE TOP BAR — #topbar and its children ============================================================ */ #topbar { position: relative; gap: 6px; padding: 11px 8px 8px; background-color: var(--wood-mid); background-image: /* long horizontal fibres: turbulence with a very low X frequency and only two octaves, so the noise stretches into grain instead of breaking up into vertical banding */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='64'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.5' numOctaves='2' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='64' filter='url(%23w)'/%3E%3C/svg%3E"), /* ends fall into shadow, as in the mockup */ linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, rgba(0,0,0,.5)), linear-gradient(180deg, #3d2515 0%, #2e1c0f 38%, #24150b 72%, var(--wood-lo) 100%); background-size: 320px 100%, 100% 100%, 100% 100%; background-repeat: repeat-x, no-repeat, no-repeat; background-blend-mode: soft-light, normal, normal; box-shadow: 0 4px 10px rgba(0,0,0,.45); } /* the gold rule under the bar */ #topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(180deg, rgba(233,199,124,.95) 0 1px, rgba(120,88,34,.75) 1px 2px); pointer-events: none; } /* ---- the recessed score panel -------------------------------- */ #scorebar { position: relative; align-items: center; justify-content: space-between; /* 19 Tu … Zé Sorte 15, as in the mockup */ gap: 7px; min-width: 0; /* style.css clips this box; the fleuron has to hang over its top edge, so the ellipsis moves onto the name itself (see .score b below) */ overflow: visible; padding: 5px 13px 6px; border-radius: 9px; font-family: Georgia, "Times New Roman", serif; background: linear-gradient(180deg, #06050400 0 40%, rgba(0,0,0,.35) 100%), linear-gradient(180deg, #1a1611, var(--panel-ink) 55%, #17130e); box-shadow: inset 0 2px 5px rgba(0,0,0,.85), inset 0 -1px 0 rgba(233,199,124,.10), 0 1px 0 rgba(233,199,124,.18); } /* double gold rule with chamfered, dotted corners — an overlay ring, so it costs the panel no interior space */ #scorebar::before, .icon-btn::before { content: ""; position: absolute; inset: 0; border: 8px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cpath id='pe' d='M8 1.6H16M8 4.2H16M8 22.4H16M8 19.8H16M1.6 8V16M4.2 8V16M22.4 8V16M19.8 8V16'/%3E%3Cg id='pc'%3E%3Cpath d='M8 1.6H5.7C5.3 1.6 5 1.7 4.8 2L2 4.8C1.7 5 1.6 5.3 1.6 5.7V8'/%3E%3Cpath d='M8 4.2H6.7C6.4 4.2 6.2 4.3 6 4.5L4.5 6C4.3 6.2 4.2 6.4 4.2 6.7V8'/%3E%3Ccircle cx='3.15' cy='3.15' r='.62' fill='%23e6c47c' stroke='none'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23000' stroke-opacity='.55' stroke-width='2.6'%3E%3Cuse href='%23pe'/%3E%3Cuse href='%23pc'/%3E%3Cuse href='%23pc' transform='translate(24 0) scale(-1 1)'/%3E%3Cuse href='%23pc' transform='translate(0 24) scale(1 -1)'/%3E%3Cuse href='%23pc' transform='translate(24 24) scale(-1 -1)'/%3E%3C/g%3E%3Cg stroke='%23c9a24c' stroke-width='1.15'%3E%3Cuse href='%23pe'/%3E%3Cuse href='%23pc'/%3E%3Cuse href='%23pc' transform='translate(24 0) scale(-1 1)'/%3E%3Cuse href='%23pc' transform='translate(0 24) scale(1 -1)'/%3E%3Cuse href='%23pc' transform='translate(24 24) scale(-1 -1)'/%3E%3C/g%3E%3Cg stroke='%23e6c47c' stroke-width='.5' stroke-opacity='.7'%3E%3Cuse href='%23pe'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 8 stretch; pointer-events: none; } /* the little fleuron sitting astride the panel's top rule */ #scorebar::after { content: ""; position: absolute; top: -7px; left: 50%; width: 26px; height: 10px; margin-left: -13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10' viewBox='0 0 26 10'%3E%3Cg fill='none' stroke='%23d8b264' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M13 .6C13.4 2.4 13.8 2.9 15.4 3.6C13.8 4.3 13.4 4.8 13 6.6C12.6 4.8 12.2 4.3 10.6 3.6C12.2 2.9 12.6 2.4 13 .6Z'/%3E%3Cpath d='M15.8 4.1C18.6 4.1 22 5.2 24.6 7.8M10.2 4.1C7.4 4.1 4 5.2 1.4 7.8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; pointer-events: none; } /* gold serif numerals in the recess */ #scorebar .score span, #score-us, #score-them { font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 700; color: var(--gold-bri); text-shadow: 0 1px 0 rgba(0,0,0,.9), 0 0 7px rgba(232,193,90,.28); } #scorebar .score b { font-family: Georgia, "Times New Roman", serif; font-size: 12.5px; font-weight: 400; opacity: 1; color: #ded3bd; letter-spacing: .3px; } #scorebar .score { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; } #scorebar .score b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the mockup has no dash — the panel's own left/right grouping reads it */ #scorebar .score-dash { display: none; } /* ---- direction + deck: one small recessed plate --------------- */ #dir-ind, #deck-info { position: relative; align-self: stretch; display: flex; align-items: center; padding: 0 4px; font-family: Georgia, "Times New Roman", serif; color: var(--gold-bri); opacity: 1; background: linear-gradient(180deg, #1a1611, var(--panel-ink)); box-shadow: inset 0 2px 4px rgba(0,0,0,.8); border-top: 1px solid rgba(201,162,76,.75); border-bottom: 1px solid rgba(201,162,76,.75); } #dir-ind { font-size: 14px; border-left: 1px solid rgba(201,162,76,.75); border-radius: 7px 0 0 7px; margin-right: -6px; /* cancels #topbar's gap: one plate */ padding-left: 6px; } #deck-info { font-size: 12.5px; border-right: 1px solid rgba(201,162,76,.75); border-radius: 0 7px 7px 0; padding-right: 6px; } #deck-info .deck-mini { margin-left: 4px; box-shadow: 0 0 0 1px rgba(201,162,76,.55); } /* ---- icon buttons: gold-bordered squares on dark ground ------- */ .icon-btn { position: relative; width: 36px; height: 36px; border: none; border-radius: 9px; background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.10), transparent 62%), linear-gradient(180deg, #17392a 0%, #0d251a 55%, #071810 100%); color: var(--gold-bri); font-size: 17px; line-height: 1; text-shadow: 0 1px 0 rgba(0,0,0,.85); box-shadow: 0 2px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); } .icon-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,.5); } .icon-btn::before { border-width: 7px; } /* the eye reads as a gold engraving, not as an emoji */ #btn-last { color: transparent; font-size: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3E%3Cpath d='M1.4 8C4.5 3.4 8 1.2 12 1.2S19.5 3.4 22.6 8C19.5 12.6 16 14.8 12 14.8S4.5 12.6 1.4 8Z' fill='%23efe4c8' stroke='%23c9a24c' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='8' r='3.6' fill='%232b1d0c'/%3E%3Ccircle cx='10.9' cy='6.9' r='1.15' fill='%23efe4c8'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.10), transparent 62%), linear-gradient(180deg, #17392a 0%, #0d251a 55%, #071810 100%); background-size: 20px 14px, 100% 100%, 100% 100%; background-position: center, center, center; background-repeat: no-repeat, no-repeat, no-repeat; } #btn-home { font-size: 19px; } #btn-rules { font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 700; } /* ============================================================ 3. THE HINT PLAQUE — #actions .action-hint ============================================================ */ .action-hint { position: relative; display: inline-block; max-width: calc(100% - 6px); padding: 5px 30px 6px; font-family: Georgia, "Times New Roman", serif; font-size: 13.5px; line-height: 1.25; letter-spacing: .2px; text-align: center; color: var(--gold-bri); opacity: 1; text-shadow: 0 1px 0 rgba(0,0,0,.7); border-radius: 7px; background: linear-gradient(180deg, rgba(8,32,19,.62), rgba(2,14,8,.72)); box-shadow: inset 0 0 0 1px rgba(201,162,76,.55), inset 0 0 14px rgba(0,0,0,.5); } .action-hint:empty { display: none; } /* alone on the row it becomes the mockup's full-width caption; sharing the row with a button it shrinks back to its own width */ #actions .action-hint:only-child { flex: 1 1 auto; } .action-hint::before, .action-hint::after { content: ""; position: absolute; top: 50%; width: 16px; height: 18px; margin-top: -9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18' viewBox='0 0 16 18'%3E%3Cg fill='none' stroke='%23c9a24c' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M8 5.1C8.5 7.6 9 8.1 11.5 9C9 9.9 8.5 10.4 8 12.9C7.5 10.4 7 9.9 4.5 9C7 8.1 7.5 7.6 8 5.1Z'/%3E%3Cpath d='M8 4.4C8 2.5 6.8 1.3 4.9 1.3M8 4.4C8 2.5 9.2 1.3 11.1 1.3M8 13.6C8 15.5 6.8 16.7 4.9 16.7M8 13.6C8 15.5 9.2 16.7 11.1 16.7'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; opacity: .95; pointer-events: none; } .action-hint::before { left: 7px; } .action-hint::after { right: 7px; transform: scaleX(-1); } /* Narrow phones (iPhone SE / 320px): the chrome gives back the width it borrowed, so the two player names still fit the recess unclipped. */ @media (max-width: 360px) { #topbar { gap: 4px; padding-left: 6px; padding-right: 6px; } .icon-btn { width: 33px; height: 33px; } #scorebar { padding-left: 8px; padding-right: 8px; } #scorebar .score span, #score-us, #score-them { font-size: 18px; } #scorebar .score b { font-size: 11px; } #deck-info { font-size: 12px; } #deck-info .deck-mini { display: none; } .action-hint { padding-left: 26px; padding-right: 26px; font-size: 12.5px; } }