@property --tilt-x{syntax:"<number>";inherits:true;initial-value:0}@property --tilt-y{syntax:"<number>";inherits:true;initial-value:0}@property --lift{syntax:"<number>";inherits:true;initial-value:0}.card{border-radius:var(--radius-l);perspective:1200px;height:100%;transform:perspective(900px) translateY(calc(var(--lift) * -6px)) rotateX(calc(var(--tilt-y) * -12deg)) rotateY(calc(var(--tilt-x) * 14deg));transition:--tilt-x var(--duration-slow) var(--ease-spring), --tilt-y var(--duration-slow) var(--ease-spring), --lift var(--duration-base) var(--ease-out), scale var(--duration-fast) var(--ease-out);position:relative;container:carta/inline-size}.card[data-tilt]{--lift:1;transition-duration:var(--duration-follow), var(--duration-follow), var(--duration-base), var(--duration-fast);transition-timing-function:linear, linear, var(--ease-out), var(--ease-out)}@media (hover:hover){.card:hover{--lift:1}}.card:has(:focus-visible){--lift:1}.card:active{scale:.98}.card__faces{height:100%;transform-style:preserve-3d;transition:transform var(--duration-slow) var(--ease-spring);display:grid}.card[data-flipped] .card__faces{transform:rotateY(180deg)}.card__face{border:var(--border-strong) solid var(--difficulty);border-radius:var(--radius-l);background:var(--color-surface-1);backface-visibility:hidden;flex-direction:column;grid-area:1/1;display:flex;position:relative;overflow:hidden}.card__back{transform:rotateY(180deg)}.card:after{content:"";border-radius:inherit;background:radial-gradient(circle at calc(50% + var(--tilt-x) * 100%) calc(50% + var(--tilt-y) * 100%), var(--color-glare), transparent 45%), linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--difficulty) 30%, transparent) 45%, color-mix(in srgb, var(--color-accent) 22%, transparent) 55%, transparent 70%);background-size:100% 100%,250% 250%;background-position:0 0, calc(50% + var(--tilt-x) * 80%) calc(50% + var(--tilt-y) * 80%);mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity var(--duration-base) var(--ease-out);position:absolute;inset:0}.card[data-tilt]:after{opacity:1}@container carta (width<=240px){.card .band{font-size:var(--text-3xs);letter-spacing:var(--tracking-tight);padding-inline:10px}}.card__emblem{justify-content:space-between;align-items:center;gap:var(--space-2);padding:10px var(--space-3) 6px 14px;background:radial-gradient(circle at 30% 50%, var(--color-surface-2) 0, var(--color-surface-1) 70%);display:flex}.card__picto{color:var(--color-accent);display:flex}.card__picto,.card__emblem .body-map{transform:translate(calc(var(--tilt-x) * var(--depth)), calc(var(--tilt-y) * var(--depth)))}.card__picto{--depth:10px}.card__emblem .body-map{--depth:-5px}.card__emblem:has(.card__art){background:var(--color-surface-1);min-height:150px;padding:0;position:relative}.card__art{--depth:8px;object-fit:contain;object-position:center bottom;transform-origin:bottom;width:100%;height:100%;scale:1.06;transform:translateX(calc(var(--tilt-x) * var(--depth)));position:absolute;inset:0}.card__body{gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-3);flex-direction:column;display:flex}.card__front .card__emblem,.card__back .card__body{flex:1}.card__name{font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);letter-spacing:-.01em;color:inherit;line-height:1.12;text-decoration:none}.card__name:after{content:"";position:absolute;inset:0}.card__name:focus-visible{outline:none}.card:has(.card__name:focus-visible){outline:var(--border-strong) solid var(--color-text);outline-offset:3px}.card__pattern{font-size:var(--text-s);color:var(--color-muted)}.card__equipment{margin-top:var(--space-1);flex-wrap:wrap;align-content:flex-start;gap:6px;display:flex}.card__foot{justify-content:space-between;align-items:flex-end;gap:var(--space-2);margin-top:auto;display:flex}.card__foot>.card__equipment{flex:1}.card__flip{z-index:var(--z-raised);width:var(--touch);height:var(--touch);border:var(--border) solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-surface-2);color:var(--color-text);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex;position:relative}@media (hover:hover){.card__flip:hover{border-color:var(--color-accent)}}.card__flip[aria-pressed=true]{border-color:var(--color-accent);background:var(--color-accent-soft)}.card__map{padding:var(--space-2) var(--space-3);background:radial-gradient(circle at 50% 40%, var(--color-surface-2) 0, var(--color-surface-1) 75%);justify-content:center;display:flex}.card__map .body-map{width:min(180px,100%);height:auto}.card__path{font-size:var(--text-s);font-weight:700}.card__locked{align-items:center;gap:var(--space-2);min-height:var(--touch);font-size:var(--text-s);color:var(--color-muted);text-decoration:none;display:inline-flex}.card__locked svg{flex-shrink:0}@media (hover:hover){.card__locked:hover{color:var(--color-text)}}@container carta (width<=200px){.card .band{padding-inline:var(--space-2);letter-spacing:var(--tracking-tight);justify-content:flex-end}.card .band>:first-child{display:none}.card__emblem{gap:var(--space-1);padding:var(--space-2) var(--space-2) var(--space-1)}.card__picto svg{width:var(--space-12);height:var(--space-12)}.card__emblem .body-map{flex:1;min-width:0;height:auto}.card__body{gap:var(--space-1);padding:10px}.card__name{font-size:var(--text-m)}.card__pattern{font-size:var(--text-xs)}.card__equipment{gap:var(--space-1)}.card__equipment .pill--small{min-height:var(--space-6);padding:0 var(--space-2) 0 var(--space-1);gap:var(--space-1);font-size:var(--text-3xs)}.card__path,.card__locked{font-size:var(--text-xs)}}