.games{margin-top:calc(1.5 * var(--rhythmic-unit));grid-template-columns:1fr;display:grid}.games__search{--search-clear-size:calc(1.25 * var(--rhythmic-unit));margin-top:calc(2.5 * var(--rhythmic-unit));display:block;position:relative}.games__search-input{--field-bg:light-dark(var(--color-bg),color-mix(in sRGB, var(--color-contrast), var(--color-bg) 97%));width:100%;padding:calc(.75 * var(--rhythmic-unit));border:var(--border);border-radius:var(--border-radius);transition:var(--transition) border-color;background:var(--field-bg);color:inherit;font:inherit;appearance:none;outline:none;margin:0;padding-inline-end:calc(var(--search-clear-size) + 1.25 * var(--rhythmic-unit));&:hover,&:focus{border-color:var(--color-accent)}&::placeholder{color:color-mix(in sRGB, var(--color-text-secondary), var(--color-bg) 50%)}&:focus{--field-bg:color-mix(in sRGB, var(--color-surface), var(--color-bg) 20%)}&::-webkit-search-cancel-button,&::-webkit-search-decoration{appearance:none}}[data-theme=dark] .games__search-input:focus{--field-bg:var(--color-surface)}.games__search-clear{width:var(--search-clear-size);height:var(--search-clear-size);appearance:none;top:50%;right:calc(.5 * var(--rhythmic-unit));cursor:pointer;background:0 0;border:none;border-radius:50%;padding:0;position:absolute;transform:translateY(-50%);&:before{content:"";pointer-events:none;transition:var(--transition) background-color;background:var(--color-text-secondary);position:absolute;inset:15%;mask:url(/static/images/icons/cross.svg) 50%/contain no-repeat}&:hover,&:focus-visible,&:active{&:before{background:var(--color-link)}}}.games__search-input:placeholder-shown+.games__search-clear{display:none}:dir(rtl) .games__search-clear{right:auto;left:calc(.5 * var(--rhythmic-unit))}.games__empty{padding:calc(2.5 * var(--rhythmic-unit)) calc(1.5 * var(--rhythmic-unit));border-radius:var(--border-radius);background:var(--color-surface);text-align:center;text-wrap:balance;flex-direction:column;align-items:center;display:flex;&[hidden]{display:none}}.games__empty-title{font-size:var(--font-size-big)}.games__empty-text{margin-top:calc(.5 * var(--rhythmic-unit));color:var(--color-text-secondary);transition:var(--transition-mode) color}.games__empty-reset{margin-top:calc(1.5 * var(--rhythmic-unit));align-self:center}.game{--game-miniature-width:100px;--game-miniature-height:70px;grid-template-columns:subgrid;gap:var(--rhythmic-unit);padding:calc(2 * var(--rhythmic-unit)) 0;border-top:var(--border);grid-column:1/-1;align-items:start;display:grid;&[hidden]{display:none}}.game__card{grid-column:1/-1;grid-template-columns:subgrid;gap:calc(.5 * var(--rhythmic-unit));display:grid}.game__card-miniature{width:100px;max-width:var(--game-miniature-width);height:var(--game-miniature-height);border-radius:var(--border-radius);align-self:flex-start;overflow:hidden;& img{object-fit:cover;border:var(--border);border-radius:var(--border-radius);width:100%;height:100%}}.game__name{font-size:var(--font-size-big);text-wrap-style:pretty;line-height:1.2}.game__materials{gap:var(--rhythmic-unit);margin-top:var(--rhythmic-unit);flex-direction:column;display:flex}.game__material{align-items:center;column-gap:calc(.5 * var(--rhythmic-unit));padding:calc(.5 * var(--rhythmic-unit)) calc(2.5 * var(--rhythmic-unit)) calc(.5 * var(--rhythmic-unit)) calc(.75 * var(--rhythmic-unit));border-radius:var(--border-radius);background:var(--color-surface);border:var(--border-width) solid transparent;transition:var(--transition) background-color, var(--transition) border-color, var(--transition-mode) color;grid-template-columns:max-content 1fr;text-decoration:none;display:grid;position:relative;&,&:visited{color:var(--color-contrast--no-animation)}&:after{content:"→";color:var(--color-text-secondary);top:50%;right:calc(.75 * var(--rhythmic-unit));transition:var(--transition-slow) transform, var(--transition-mode) color;position:absolute;transform:translateY(-50%)}&:hover,&:focus-visible,&:active{background:var(--color-bg);border-color:var(--color-border);&,&:visited{color:var(--color-link)}&:after{color:var(--color-link);transform:translateY(-50%)translate(4px)}& .game__material-title{color:var(--color-link)}}}:dir(rtl) .game__material{&:after{right:auto;left:calc(.75 * var(--rhythmic-unit));transform:translateY(-50%)scaleX(-1)}&:hover,&:focus-visible,&:active{&:after{transform:translateY(-50%)scaleX(-1)translate(4px)}}}.game__material-title{font-size:var(--font-size-root);color:var(--color-contrast--no-animation);transition:var(--transition-mode) color;font-weight:500;line-height:1.56}.game__material-description{font-size:var(--font-size-small);color:var(--color-text-secondary);transition:var(--transition-mode) color;grid-column:1/-1}.game__material-icon{align-self:flex-start;margin-top:5px}.game__material--article .game__material-icon{color:var(--color-link);transition:var(--transition-mode) color}@media (width>=320px){.game__card{gap:calc(.75 * var(--rhythmic-unit)) var(--rhythmic-unit)}.game__materials{margin-top:0}.games{grid-template-columns:max-content 1fr}.game__card-header{align-self:center}.game__materials{grid-column:1/3}}@media (width>=600px){.game__card-miniature{grid-row:span 2}.game__materials{grid-column:3}}