/* ========================================================================== Плитка ТЕССЕРЫ Одна и та же вещь на лендинге и на игровом столе — поэтому она живёт в отдельном файле и ничего не знает ни о том, ни о другом. Два свойства плитки читаются двумя независимыми каналами: цвет -> фон (data-tint) металл -> фактура знака (data-metal) Знак у каждого металла ещё и своей формы: цвет в интерфейсе никогда не должен быть единственным носителем смысла. ========================================================================== */ .tile { --face: var(--tint-graphite); --metal: var(--metal-steel); --metal-solid: var(--metal-steel-solid); --sigil: var(--sigil-steel); position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-tile); background: /* блик по верхней кромке — лак */ linear-gradient(163deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.05) 22%, transparent 46%), /* мягкое затемнение к нижнему краю — объём */ linear-gradient(200deg, transparent 55%, rgba(0, 0, 0, 0.34) 100%), var(--face); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px -8px rgba(0, 0, 0, 0.6); display: grid; place-items: center; user-select: none; isolation: isolate; } /* Тонкая золочёная рамка внутри — то, что отличает дорогую вещь от дешёвой. */ .tile::before { content: ''; position: absolute; inset: 7%; border-radius: calc(var(--radius-tile) * 0.6); border: 1px solid color-mix(in srgb, var(--metal-solid) 40%, transparent); opacity: 0.55; pointer-events: none; } /* Знак металла: форма задаётся маской, материал — градиентом под ней. */ .tile__sigil { width: 42%; aspect-ratio: 1; background-image: var(--metal); -webkit-mask-image: var(--sigil); mask-image: var(--sigil); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); } /* Номинал в углу — как на игральной карте из референсов. */ .tile__pip { position: absolute; inset-block-start: 7%; inset-inline-start: 9%; width: 12%; aspect-ratio: 1; background-image: var(--metal); -webkit-mask-image: var(--sigil); mask-image: var(--sigil); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; opacity: 0.75; } .tile__pip--end { inset-block-start: auto; inset-inline-start: auto; inset-block-end: 7%; inset-inline-end: 9%; rotate: 180deg; } /* --- Цвет подложки ------------------------------------------------------ */ .tile[data-tint='cobalt'] { --face: var(--tint-cobalt); } .tile[data-tint='emerald'] { --face: var(--tint-emerald); } .tile[data-tint='wine'] { --face: var(--tint-wine); } .tile[data-tint='graphite'] { --face: var(--tint-graphite); } .tile[data-tint='ivory'] { --face: var(--tint-ivory); } /* На слоновой кости светлый блик не читается — гасим его и правим тени. */ .tile[data-tint='ivory'] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px -8px rgba(0, 0, 0, 0.5); } /* --- Металл: фактура + форма знака -------------------------------------- */ .tile[data-metal='gold'] { --metal: var(--metal-gold); --metal-solid: var(--metal-gold-solid); --sigil: var(--sigil-gold); } .tile[data-metal='silver'] { --metal: var(--metal-silver); --metal-solid: var(--metal-silver-solid); --sigil: var(--sigil-silver); } .tile[data-metal='copper'] { --metal: var(--metal-copper); --metal-solid: var(--metal-copper-solid); --sigil: var(--sigil-copper); } .tile[data-metal='steel'] { --metal: var(--metal-steel); --metal-solid: var(--metal-steel-solid); --sigil: var(--sigil-steel); } .tile[data-metal='blackened'] { --metal: var(--metal-blackened); --metal-solid: var(--metal-blackened-solid); --sigil: var(--sigil-blackened); } /* Чернёное на графите почти сливается — приподнимаем знак контражуром. */ .tile[data-metal='blackened'][data-tint='graphite'] .tile__sigil { filter: drop-shadow(0 0 1px rgba(236, 230, 218, 0.45)); } /* --- Формы знаков ------------------------------------------------------- Ромб, круг, треугольник, крест, шестиугольник: пять силуэтов, которые различимы боковым зрением и не путаются между собой. */ :root { --sigil-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 96 50 50 96 4 50Z' /%3E%3Cpath d='M50 26 74 50 50 74 26 50Z' fill='%23fff' fill-opacity='0'/%3E%3C/svg%3E"); --sigil-silver: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2a48 48 0 1 0 .1 0Zm0 16a32 32 0 1 1-.1 0Z'/%3E%3Ccircle cx='50' cy='50' r='16'/%3E%3C/svg%3E"); --sigil-copper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 96 90H4Zm0 30L26 78h48Z'/%3E%3C/svg%3E"); --sigil-steel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M38 4h24v34h34v24H62v34H38V62H4V38h34Z'/%3E%3C/svg%3E"); --sigil-blackened: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 91 26.5v47L50 97 9 73.5v-47Zm0 18L25 35.5v29L50 79l25-14.5v-29Z'/%3E%3C/svg%3E"); } /* --- Рубашка ------------------------------------------------------------ То, что видно в запасе: та же вещь со спины. */ .tile--back { --face: #101318; background: linear-gradient(163deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%), repeating-linear-gradient(45deg, rgba(201, 162, 39, 0.06) 0 6px, transparent 6px 12px), var(--face); } .tile--back .tile__sigil { width: 26%; background-image: var(--metal-gold); -webkit-mask-image: var(--sigil-gold); mask-image: var(--sigil-gold); opacity: 0.5; } /* --- Размеры ------------------------------------------------------------ */ .tile--sm { width: clamp(38px, 4.4vw, 58px); } .tile--md { width: clamp(54px, 6.4vw, 88px); } .tile--lg { width: clamp(84px, 11vw, 150px); }