/*
* Cezalı 101 — css/art.css (Art agent)
* =============================================================================
* Styles for the procedurally generated assets of js/ui/art.js: tiles, tile
* backs, avatars, logo, icons and texture helpers. Layout (table, rack, HUD)
* lives in css/style.css (UI agent).
*
* Transforms: state classes only use the INDIVIDUAL transform properties
* `translate`, `scale` and `rotate`, never `transform`. So the UI can freely
* position or animate tiles with `transform` (e.g. flying tiles) and the
* lift/selection effects still stack on top of it.
*
* ── TILES ───────────────────────────────────────────────────────────────────
* ${Art.tile(tile, {okey})}
* ${Art.tileBack()}
*
* Sizing (height is always width × 1.4):
* --c101-tile-w custom property, default 60px (rack size)
* .c101-tile--rack 60 × 84 .c101-tile--table 34 × 47.6
* .c101-tile--mini 28 × 39.2 .c101-tile--lg 84 × 117.6
* .c101-tile--xl 120 × 168 .c101-tile--fluid width:100%, height from aspect-ratio
* State classes (combine freely):
* .is-hoverable lifts on hover (pointer devices only)
* .is-selected lifted + gold ring (picked / keyboard focus)
* .is-dragging picked up: larger, tilted, deep shadow, no transitions
* .is-valid-group green glow (tile is in a valid run/set on the rack)
* .is-pair-group turquoise glow (tile is in a valid pair)
* .is-invalid red glow + one short shake
* .is-okey soft pulsing gold glow (the wild tile)
* .is-new entry pop + golden flash (just drawn / just laid)
* .is-hint pulsing white-cyan outline (suggested / playable "işlek")
* .is-disabled dimmed overlay, not interactive
* .is-ghost drop placeholder (translucent, dashed)
* .is-back marks a face-down tile (no visual change by itself)
* A focused tile (:focus-visible) gets the same ring as .is-selected.
*
* ── AVATARS ─────────────────────────────────────────────────────────────────
* ${Art.avatar('a3')}
* --c101-avatar-size default 88px; .c101-avatar--sm 44px, .c101-avatar--lg 128px
* .is-active pulsing gold "your turn" glow
* .has-timer turn-timer ring; set --c101-timer from 1 (full) to 0 (empty)
* .is-timer-low timer ring turns red and pulses
* .is-winner champagne ring + pulsing round light glint
* .is-dim greyed out (e.g. waiting / disconnected)
*
* ── LOGO / ICONS / TEXTURES ─────────────────────────────────────────────────
* ${Art.logo()}
width drives the size
* ${Art.logo({compact:true})}
height drives it
* (full lockup 1569 × 447 ≈ 3.51 : 1, compact 1305 × 352 ≈ 3.71 : 1)
* ${Art.icon('settings')} -> .c101-icon, 1em × 1em, colour = currentColor
* Texture helpers (Art.init() publishes the values as CSS variables):
* .c101-tex-felt .c101-tex-felt-blue .c101-tex-felt-red .c101-tex-wood
* .c101-tex-wood-dark .c101-tex-brass .c101-tex-paper
* or in style.css: background: var(--c101-tex-felt);
*/
:root {
--c101-gold: #E9BC52;
--c101-gold-light: #FFE6A0;
--c101-gold-deep: #9A6412;
--c101-glow-select: 255, 206, 84;
--c101-glow-valid: 70, 226, 138;
--c101-glow-pair: 64, 206, 255;
--c101-glow-invalid: 255, 72, 72;
--c101-glow-okey: 255, 196, 60;
--c101-ease-out: cubic-bezier(.2, .8, .2, 1);
--c101-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}
/* Hidden shared injected by Art.init() (never display:none: gradients
inside display:none SVGs do not paint in some browsers). */
.c101-defs {
position: absolute !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* ============================================================================
* TILES
* ========================================================================== */
.c101-tile {
--c101-tile-w: 60px;
--c101-tile-shadow:
0 1px 0 rgba(70, 48, 14, .32),
0 2px 3px rgba(0, 0, 0, .26),
0 7px 12px -5px rgba(0, 0, 0, .5);
--c101-ring: 0 0 0 0 transparent;
position: relative;
display: inline-block;
flex: none;
box-sizing: border-box;
width: var(--c101-tile-w);
height: calc(var(--c101-tile-w) * 1.4);
vertical-align: top;
/* matches the SVG tile body: rx 12 on a 100×140 viewBox */
border-radius: 12% / 8.6%;
box-shadow: var(--c101-ring), var(--c101-tile-shadow);
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
outline: none;
transition:
translate .2s var(--c101-ease-out),
scale .2s var(--c101-ease-out),
rotate .2s var(--c101-ease-out),
box-shadow .22s ease,
opacity .2s ease;
}
.c101-tile > svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
/* sizes */
.c101-tile--rack { --c101-tile-w: 60px; }
.c101-tile--lg { --c101-tile-w: 84px; }
.c101-tile--xl { --c101-tile-w: 120px; }
.c101-tile--table {
--c101-tile-w: 34px;
--c101-tile-shadow: 0 1px 0 rgba(70, 48, 14, .3), 0 2px 4px -1px rgba(0, 0, 0, .5);
}
.c101-tile--mini {
--c101-tile-w: 28px;
--c101-tile-shadow: 0 1px 0 rgba(70, 48, 14, .3), 0 2px 3px -1px rgba(0, 0, 0, .5);
}
.c101-tile--fluid {
width: 100%;
height: auto;
aspect-ratio: 100 / 140;
}
/* hover lift (opt-in, pointer devices only) */
@media (hover: hover) and (pointer: fine) {
.c101-tile.is-hoverable { cursor: grab; }
.c101-tile.is-hoverable:hover {
translate: 0 -6%;
--c101-tile-shadow:
0 1px 0 rgba(70, 48, 14, .3),
0 4px 6px rgba(0, 0, 0, .22),
0 14px 18px -6px rgba(0, 0, 0, .5);
}
}
/* selected / focused */
.c101-tile.is-selected,
.c101-tile:focus-visible {
translate: 0 -14%;
--c101-ring:
0 0 0 2px rgba(var(--c101-glow-select), .95),
0 0 14px 3px rgba(var(--c101-glow-select), .55);
--c101-tile-shadow:
0 1px 0 rgba(70, 48, 14, .3),
0 16px 20px -8px rgba(0, 0, 0, .55);
z-index: 2;
}
/* dragging */
.c101-tile.is-dragging {
scale: 1.12;
rotate: -3deg;
z-index: 1000;
cursor: grabbing;
opacity: .97;
transition: box-shadow .15s ease, scale .15s var(--c101-ease-out), rotate .15s var(--c101-ease-out);
--c101-ring: 0 0 0 2px rgba(var(--c101-glow-select), .75);
--c101-tile-shadow:
0 2px 0 rgba(70, 48, 14, .25),
0 24px 30px -8px rgba(0, 0, 0, .6),
0 10px 12px -6px rgba(0, 0, 0, .4);
}
/* group glows */
.c101-tile.is-valid-group {
--c101-ring:
0 0 0 2px rgba(var(--c101-glow-valid), .95),
0 0 12px 2px rgba(var(--c101-glow-valid), .55);
}
.c101-tile.is-pair-group {
--c101-ring:
0 0 0 2px rgba(var(--c101-glow-pair), .95),
0 0 12px 2px rgba(var(--c101-glow-pair), .5);
}
.c101-tile.is-invalid {
--c101-ring:
0 0 0 2px rgba(var(--c101-glow-invalid), .95),
0 0 12px 2px rgba(var(--c101-glow-invalid), .5);
animation: c101-shake .42s ease-in-out 1;
}
.c101-tile.is-selected.is-valid-group,
.c101-tile.is-selected.is-pair-group {
--c101-ring:
0 0 0 2px rgba(var(--c101-glow-select), .95),
0 0 0 4px rgba(var(--c101-glow-valid), .6),
0 0 14px 4px rgba(var(--c101-glow-select), .45);
}
/* wild tile */
.c101-tile.is-okey {
animation: c101-okey-glow 2.4s ease-in-out infinite;
}
.c101-tile.is-okey.is-dragging,
.c101-tile.is-okey.is-selected { animation: none; }
/* suggestion */
.c101-tile.is-hint {
animation: c101-hint 1.3s ease-in-out infinite;
}
/* just arrived */
.c101-tile.is-new {
animation: c101-tile-in .55s var(--c101-ease-spring) both, c101-new-flash 1.4s ease-out .1s 1;
}
/* disabled */
.c101-tile.is-disabled {
cursor: not-allowed;
pointer-events: none;
}
.c101-tile.is-disabled::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(30, 22, 12, .38);
}
/* drop placeholder */
.c101-tile.is-ghost {
opacity: .38;
--c101-tile-shadow: none;
outline: 2px dashed rgba(255, 236, 190, .7);
outline-offset: -2px;
}
@keyframes c101-shake {
0%, 100% { rotate: 0deg; }
20% { rotate: -5deg; }
40% { rotate: 4deg; }
60% { rotate: -3deg; }
80% { rotate: 2deg; }
}
@keyframes c101-okey-glow {
0%, 100% {
box-shadow:
var(--c101-ring),
0 0 0 1.5px rgba(var(--c101-glow-okey), .75),
0 0 8px 1px rgba(var(--c101-glow-okey), .35),
var(--c101-tile-shadow);
}
50% {
box-shadow:
var(--c101-ring),
0 0 0 2px rgba(var(--c101-glow-okey), .95),
0 0 18px 5px rgba(var(--c101-glow-okey), .6),
var(--c101-tile-shadow);
}
}
@keyframes c101-hint {
0%, 100% {
box-shadow: 0 0 0 1.5px rgba(200, 245, 255, .55), 0 0 6px 1px rgba(120, 220, 255, .3), var(--c101-tile-shadow);
}
50% {
box-shadow: 0 0 0 2.5px rgba(220, 250, 255, .95), 0 0 16px 4px rgba(120, 220, 255, .6), var(--c101-tile-shadow);
}
}
@keyframes c101-tile-in {
0% { opacity: 0; scale: .55; translate: 0 -35%; }
60% { opacity: 1; scale: 1.07; translate: 0 2%; }
100% { opacity: 1; scale: 1; translate: 0 0; }
}
@keyframes c101-new-flash {
0% { box-shadow: 0 0 0 2px rgba(var(--c101-glow-select), .95), 0 0 22px 8px rgba(var(--c101-glow-select), .7), var(--c101-tile-shadow); }
100% { box-shadow: var(--c101-ring), var(--c101-tile-shadow); }
}
/* ============================================================================
* AVATARS
* ========================================================================== */
.c101-avatar {
--c101-avatar-size: 88px;
--c101-ring-w: max(3px, calc(var(--c101-avatar-size) * .055));
position: relative;
display: inline-block;
flex: none;
box-sizing: border-box;
width: var(--c101-avatar-size);
height: var(--c101-avatar-size);
padding: var(--c101-ring-w);
border-radius: 50%;
background:
linear-gradient(155deg, #FFF3C8 0%, #F0CD72 22%, #A8741F 48%, #E9C165 70%, #FFF0BE 84%, #9A6A1C 100%);
box-shadow:
0 0 0 1px rgba(40, 24, 4, .55),
0 3px 6px rgba(0, 0, 0, .35),
0 10px 18px -8px rgba(0, 0, 0, .6);
transition: box-shadow .3s ease, filter .3s ease, opacity .3s ease;
}
.c101-avatar > svg {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(40, 24, 4, .6);
}
.c101-avatar--sm { --c101-avatar-size: 44px; }
.c101-avatar--lg { --c101-avatar-size: 128px; }
.c101-avatar.is-active {
animation: c101-turn-glow 1.6s ease-in-out infinite;
}
@keyframes c101-turn-glow {
0%, 100% {
box-shadow:
0 0 0 1px rgba(40, 24, 4, .55),
0 0 0 3px rgba(255, 222, 120, .85),
0 0 14px 5px rgba(255, 190, 50, .45),
0 10px 18px -8px rgba(0, 0, 0, .6);
}
50% {
box-shadow:
0 0 0 1px rgba(40, 24, 4, .55),
0 0 0 4px rgba(255, 232, 150, 1),
0 0 28px 10px rgba(255, 190, 50, .7),
0 10px 18px -8px rgba(0, 0, 0, .6);
}
}
/* turn timer ring: --c101-timer 1 → 0 */
.c101-avatar.has-timer::before {
content: '';
position: absolute;
inset: calc(var(--c101-ring-w) * -1.9);
border-radius: 50%;
background: conic-gradient(
var(--c101-timer-color, #5BE38F) calc(var(--c101-timer, 1) * 360deg),
rgba(0, 0, 0, .38) 0
);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--c101-ring-w) * 1.05), #000 calc(100% - var(--c101-ring-w) * 1.05 + .5px));
mask: radial-gradient(farthest-side, transparent calc(100% - var(--c101-ring-w) * 1.05), #000 calc(100% - var(--c101-ring-w) * 1.05 + .5px));
pointer-events: none;
}
.c101-avatar.has-timer.is-timer-low { --c101-timer-color: #FF5A4E; }
.c101-avatar.has-timer.is-timer-low::before { animation: c101-timer-low .6s ease-in-out infinite alternate; }
@keyframes c101-timer-low { to { opacity: .55; } }
.c101-avatar.is-winner {
background: linear-gradient(155deg, #FFFBEA 0%, #FFE39A 25%, #D69A2A 50%, #FFE9A8 75%, #B77D1E 100%);
box-shadow:
0 0 0 1px rgba(40, 24, 4, .55),
0 0 0 4px rgba(255, 236, 170, .9),
0 0 30px 10px rgba(255, 210, 90, .55);
}
/* Soft round light reflection on the ring (motif rule: no pointed sparkles / stars). */
.c101-avatar.is-winner::after {
content: '';
position: absolute;
top: -5%;
right: -5%;
width: 30%;
height: 30%;
border-radius: 50%;
background: radial-gradient(circle closest-side, #FFFFFF 0 16%, rgba(255, 244, 205, .9) 30%, rgba(255, 214, 110, .38) 60%, rgba(255, 214, 110, 0) 100%);
animation: c101-glint 1.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes c101-glint {
0%, 100% { scale: .72; opacity: .6; }
50% { scale: 1.08; opacity: 1; }
}
.c101-avatar.is-dim {
filter: grayscale(.85) brightness(.7);
opacity: .8;
}
/* ============================================================================
* LOGO & ICONS
* ========================================================================== */
.c101-logo {
display: block;
width: 100%;
max-width: 100%;
line-height: 0;
}
.c101-logo > svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
/* viewBox ratios: full 1569 × 447, compact 1305 × 352 (Art.LOGO_RATIO) */
.c101-logo--compact { width: auto; height: 100%; }
.c101-logo--compact > svg { width: auto; height: 100%; aspect-ratio: 1305 / 352; }
.c101-icon {
display: inline-block;
flex: none;
width: 1em;
height: 1em;
vertical-align: -.14em;
overflow: visible;
}
/* ============================================================================
* TEXTURE HELPERS (values published by Art.init() as CSS variables)
* ========================================================================== */
.c101-tex-felt { background: var(--c101-tex-felt, #10653F); }
.c101-tex-felt-blue { background: var(--c101-tex-felt-blue, #18477A); }
.c101-tex-felt-red { background: var(--c101-tex-felt-red, #721C28); }
.c101-tex-wood { background: var(--c101-tex-wood, #5E371F); }
.c101-tex-wood-dark { background: var(--c101-tex-wood-dark, #3A2113); }
.c101-tex-brass { background: var(--c101-tex-brass, #C99A3F); }
.c101-tex-paper { background: var(--c101-tex-paper, #F5EBD5); }
/* ============================================================================
* Reduced motion
* ========================================================================== */
@media (prefers-reduced-motion: reduce) {
.c101-tile,
.c101-avatar { transition: none; }
.c101-tile.is-okey,
.c101-tile.is-hint,
.c101-tile.is-invalid,
.c101-avatar.is-active,
.c101-avatar.is-winner::after,
.c101-avatar.has-timer.is-timer-low::before { animation: none; }
.c101-tile.is-new { animation: c101-new-flash .6s ease-out 1; }
}