/* ===================================================================== cards.css — card faces, backs, deck, pile, hand states (agent 04) Faces are one inline SVG per card (public/app.js cardHTML) that s symbols from a single hidden sprite (#yanivCardSprite). Backs are a static SVG data URI so the browser rasterises them once. Only transform-family properties (translate/rotate/scale) and opacity animate; glows live on pseudo-elements and fade with opacity. ===================================================================== */ :root { --card-red: #c8241b; --card-black: #1d1d26; --card-gold: #ffd23f; --card-sh: 70, 45, 15; /* shadow tint, rgb triplet */ --card-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='.6' y2='1'%3E%3Cstop offset='0' stop-color='%2346cdf5'/%3E%3Cstop offset='.5' stop-color='%231d9fd6'/%3E%3Cstop offset='1' stop-color='%230a6ea8'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='9' height='9' patternUnits='userSpaceOnUse' patternTransform='rotate(45 50 70)'%3E%3Cpath d='M0 4.5h9M4.5 0v9' stroke='%23a8ecff' stroke-width='.6' opacity='.5'/%3E%3Ccircle cx='4.5' cy='4.5' r='1.1' fill='%23e9fbff' opacity='.6'/%3E%3Ccircle cx='0' cy='0' r='.7' fill='%23ffe58a' opacity='.7'/%3E%3C/pattern%3E%3CradialGradient id='s' cx='.3' cy='.15' r='.9'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.35'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.06'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='m' cx='.5' cy='.4' r='.7'%3E%3Cstop offset='0' stop-color='%231784c0'/%3E%3Cstop offset='1' stop-color='%23075a8e'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100' height='140' rx='8' fill='%23fffdf7'/%3E%3Crect x='5' y='5' width='90' height='130' rx='5' fill='url(%23g)'/%3E%3Crect x='5' y='5' width='90' height='130' rx='5' fill='url(%23p)'/%3E%3Crect x='9' y='9' width='82' height='122' rx='3.5' fill='none' stroke='%23ffd86b' stroke-width='1.4'/%3E%3Crect x='11.6' y='11.6' width='76.8' height='116.8' rx='2.5' fill='none' stroke='%23ffd86b' stroke-width='.5' opacity='.75'/%3E%3Cg fill='%23ffd86b'%3E%3Cpath d='M50 14.5l3 4-3 4-3-4zM50 117.5l3 4-3 4-3-4zM16 66l4 4-4 4-4-4zM84 66l4 4-4 4-4-4z'/%3E%3Ccircle cx='16' cy='16' r='1.6'/%3E%3Ccircle cx='84' cy='16' r='1.6'/%3E%3Ccircle cx='16' cy='124' r='1.6'/%3E%3Ccircle cx='84' cy='124' r='1.6'/%3E%3C/g%3E%3Cellipse cx='50' cy='70' rx='34' ry='23' fill='url(%23m)' stroke='%23ffd86b' stroke-width='1.5'/%3E%3Cellipse cx='50' cy='70' rx='30.5' ry='19.6' fill='none' stroke='%23ffd86b' stroke-width='.6' stroke-dasharray='1.8 1.5'/%3E%3Crect x='5' y='5' width='90' height='130' rx='5' fill='url(%23s)'/%3E%3C/svg%3E"); --card-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .24 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); --card-paper: var(--card-noise), radial-gradient(130% 95% at 22% 0%, #ffffff 0%, #fdfbf6 48%, #f4efe4 100%); --card-edge: 0 0 0 0.5px rgba(30, 20, 10, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 -1.5px 0 rgba(120, 95, 60, 0.1); --card-shadow: 0 1px 1px rgba(var(--card-sh), 0.2), 0 3px 6px -1px rgba(var(--card-sh), 0.26), 0 8px 14px -6px rgba(var(--card-sh), 0.22); } body[data-theme="ocean"] { --card-sh: 2, 42, 74; } /* ------------------------------------------------------------- face */ .card { border: 0; border-radius: 7px; background: var(--card-paper); background-size: 140px 140px, 100% 100%; box-shadow: var(--card-edge), var(--card-shadow); color: var(--card-black); overflow: visible; isolation: isolate; font-family: "Bree Serif", Georgia, "Times New Roman", serif; -webkit-tap-highlight-color: transparent; } .card.red { color: var(--card-red); } .card.black { color: var(--card-black); } .card.joker, .card.joker-red { color: var(--card-red); } .card.joker-black { color: var(--card-black); } .card > .cf { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; fill: currentColor; pointer-events: none; overflow: visible; } .cf text { font-family: "Bree Serif", Georgia, serif; text-anchor: middle; } .cf .cf-idx { font-size: 25px; letter-spacing: -0.5px; } .cf .cf-mono { font-size: 32px; paint-order: stroke fill; stroke: #fffdf8; stroke-width: 2.4px; stroke-linejoin: round; } .cf .cf-jk { font-size: 11.5px; font-weight: 700; } .cf .cf-jtitle { font-size: 8.5px; letter-spacing: 2.4px; fill: #b8913f; } /* state overlay (dim / illegal) and my-turn glow share ::before */ .card::before, .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; } .card::before { z-index: 2; } /* gold selection ring + lifted shadow */ .card::after { z-index: 3; box-shadow: 0 0 0 2.5px var(--card-gold), 0 0 14px 2px rgba(255, 205, 50, 0.7), 0 16px 20px -6px rgba(var(--card-sh), 0.5); transition: opacity 0.18s ease; } .card.selected::after { opacity: 1; } .card.hinted::after { animation: cardRingPulse 1.2s ease-in-out infinite; } .card.hinted.selected::after { animation: none; opacity: 1; } .card.pickable::after { animation: cardRingPulse 1.4s ease-in-out infinite; } @keyframes cardRingPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* not your turn: a soft wash; illegal (for future use): stronger */ .card.dim::before { opacity: 1; background: linear-gradient(180deg, rgba(244, 238, 226, 0.26), rgba(var(--card-sh), 0.14)); } .card.illegal::before, .card.disabled::before { opacity: 1; background: rgba(236, 230, 218, 0.55); } .card.illegal, .card.disabled { cursor: not-allowed; } /* ------------------------------------------------------------- hand */ .hand .card { cursor: pointer; transition: translate 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.25), rotate 0.2s ease, scale 0.2s ease; } .hand .card.selected { translate: 0 -16px; } .hand.disabled .card { cursor: default; } /* my turn: soft breathing glow (opacity only) instead of a filter animation */ .hand.my-turn .card { animation: none; } .hand.my-turn .card.dealt { animation: dealIn 0.32s ease both; } .hand.my-turn .card:not(.dim):not(.selected)::before { box-shadow: 0 0 10px 1px rgba(255, 209, 63, 0.6); animation: cardBreathe 2.2s ease-in-out infinite; } @keyframes cardBreathe { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @media (hover: hover) and (pointer: fine) { .hand:not(.disabled) .card:hover { translate: 0 -9px; rotate: -2deg; scale: 1.03; } .hand:not(.disabled) .card.selected:hover { translate: 0 -18px; rotate: 0deg; } .hand:not(.disabled) .card:hover::after { opacity: 0.45; } .hand:not(.disabled) .card.selected:hover::after { opacity: 1; } } .hand:not(.disabled) .card:active { scale: 0.97; } /* ------------------------------------------------------------- pile */ .pile .card { box-shadow: var(--card-edge), 0 1px 1px rgba(var(--card-sh), 0.25), 0 4px 9px -2px rgba(var(--card-sh), 0.35); } .pile .card[data-tilt="-4"] { rotate: -4deg; translate: -1px 1px; } .pile .card[data-tilt="-3"] { rotate: -3deg; translate: 1px -1px; } .pile .card[data-tilt="-2"] { rotate: -2deg; translate: 0 1px; } .pile .card[data-tilt="-1"] { rotate: -1deg; translate: 1px 0; } .pile .card[data-tilt="0"] { rotate: 0.5deg; translate: 0 -1px; } .pile .card[data-tilt="1"] { rotate: 1deg; translate: -1px 0; } .pile .card[data-tilt="2"] { rotate: 2deg; translate: 0 1px; } .pile .card[data-tilt="3"] { rotate: 3deg; translate: -1px -1px; } .pile .card[data-tilt="4"] { rotate: 4deg; translate: 1px 1px; } .take-card { animation: none; border-radius: 7px; } .take-card .card::after { animation: cardRingPulse 1.4s ease-in-out infinite; } .take-card:active .card { scale: 0.96; } /* ------------------------------------------------------------- backs */ .opp .back-mini { border: 0; outline: 0; border-radius: 4px; background: var(--card-back) center / 100% 100% no-repeat; box-shadow: 0 0 0 0.5px rgba(20, 30, 40, 0.4), 0 1px 1px rgba(var(--card-sh), 0.25), 0 3px 6px -1px rgba(var(--card-sh), 0.35); overflow: visible; } .opp .back-mini::before { display: none; } .opp .back-mini::after { font-size: 9.5px; letter-spacing: 0.2px; color: #ffe14a; -webkit-text-stroke: 0.6px #5d3100; paint-order: stroke fill; transform: rotate(-10deg); } /* deck: swirl of fanned cards under a thick YANIV back */ .deck-swirl .swirl { border: 0; border-radius: 6px; background: var(--card-paper); background-size: 140px 140px, 100% 100%; box-shadow: 0 0 0 0.5px rgba(30, 20, 10, 0.3), inset 0 0 0 3px #fffdf7, inset 0 0 0 3.6px rgba(12, 120, 170, 0.35), 0 1px 2px rgba(var(--card-sh), 0.22); } .deck-swirl .yaniv-back { border: 0; outline: 0; border-radius: 8px; overflow: visible; background: var(--card-back) center / 100% 100% no-repeat; box-shadow: 0 0 0 0.5px rgba(20, 30, 40, 0.45), 0 1.5px 0 #ebe5d8, 0 2.5px 0 #fffdf7, 0 3.5px 0 #e3dccd, 0 4.5px 0 #fffdf7, 0 5px 0 0.5px rgba(30, 20, 10, 0.3), 0 12px 18px -4px rgba(var(--card-sh), 0.45); } .deck-swirl.low .yaniv-back { box-shadow: 0 0 0 0.5px rgba(20, 30, 40, 0.45), 0 1.5px 0 #ebe5d8, 0 2px 0 0.5px rgba(30, 20, 10, 0.3), 0 8px 14px -4px rgba(var(--card-sh), 0.4); } .deck-swirl .yaniv-back::before { content: ""; position: absolute; inset: -3px; border-radius: 11px; background: none; opacity: 0; pointer-events: none; box-shadow: 0 0 0 3px rgba(255, 220, 70, 0.95), 0 0 24px 4px rgba(255, 210, 60, 0.85); } .deck-swirl.drawable .yaniv-back { animation: none; } .deck-swirl.drawable .yaniv-back::before { animation: cardRingPulse 1.3s ease-in-out infinite; } .deck-swirl .yaniv-back em { font-size: 26px; letter-spacing: 0.6px; color: #ffe14a; -webkit-text-stroke: 1.3px #5d3100; paint-order: stroke fill; text-shadow: 0 2px 0 #b37400; transform: rotate(-10deg); } .deck-swirl .deck-count { background: linear-gradient(180deg, #19a6dc, #0a78a8); border: 2px solid #fffdf7; border-radius: 10px; box-shadow: 0 2px 4px rgba(var(--card-sh), 0.35); font-variant-numeric: tabular-nums; } .deck-swirl.low .deck-count { background: linear-gradient(180deg, #f0663c, #c8361b); } /* ------------------------------------------------------------- tiny cards (coach / reveal) */ .tiny-card { width: 20px; height: 28px; border: 0; border-radius: 3.5px; background: var(--card-paper); background-size: 140px 140px, 100% 100%; box-shadow: 0 0 0 0.5px rgba(30, 20, 10, 0.32), 0 1px 1.5px rgba(var(--card-sh), 0.3); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: "Bree Serif", Georgia, serif; font-weight: 400; font-size: 10.5px; line-height: 1; color: var(--card-black); } .tiny-card b { font-weight: 400; letter-spacing: -0.4px; } .tiny-card svg { width: 9px; height: 9px; fill: currentColor; display: block; } .tiny-card.red { color: var(--card-red); } .tiny-card.joker svg { width: 13px; height: 13px; fill: #e2a92a; stroke: #7a5414; stroke-width: 4px; } /* ------------------------------------------------------------- motion */ @media (prefers-reduced-motion: reduce) { .hand .card, .card::after { transition: none; } .card.hinted::after, .card.pickable::after, .take-card .card::after { animation: none; opacity: 1; } .hand.my-turn .card:not(.dim):not(.selected)::before { animation: none; opacity: 0; } .deck-swirl.drawable .yaniv-back::before { animation: none; opacity: 1; } .hand:not(.disabled) .card:hover { rotate: 0deg; scale: 1; } }