/*
 * Riot Kampüs Elçileri — public site.
 * Layout, type scale and components follow leagueoflegends.com/tr-tr (riotbar + blades);
 * the LoL gold/cyan accents are replaced with the KEP red.
 */

/* Fonts ---------------------------------------------------------------- */

@font-face { font-family: "Beaufort for LOL"; src: url("../fonts/beaufort/BeaufortforLOL-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: block; }
@font-face { font-family: "Beaufort for LOL"; src: url("../fonts/beaufort/BeaufortforLOL-HeavyItalic.woff2") format("woff2"); font-weight: 800 900; font-style: italic; font-display: block; }
@font-face { font-family: "Beaufort for LOL"; src: url("../fonts/beaufort/BeaufortforLOL-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Beaufort for LOL"; src: url("../fonts/beaufort/BeaufortforLOL-Heavy.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: block; }
@font-face { font-family: "Spiegel"; src: url("../fonts/spiegel/Spiegel-Regular.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: block; }
@font-face { font-family: "Spiegel"; src: url("../fonts/spiegel/Spiegel-RegularItalic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: block; }
@font-face { font-family: "Spiegel"; src: url("../fonts/spiegel/Spiegel-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: "Spiegel"; src: url("../fonts/spiegel/Spiegel-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Spiegel"; src: url("../fonts/spiegel/Spiegel-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: block; }
@font-face { font-family: "Inter"; src: url("../fonts/inter/Inter-roman.var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter/Inter-italic.var.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* Tokens ---------------------------------------------------------------- */

:root {
    --navy: #0a1428;
    --navy-soft: #161f32;
    --white: #ffffff;
    --red: #d3363a;
    --red-hover: #e14b4f;
    --red-deep: #b8252b;
    --red-on-dark: #f0555a;
    --grey-line: #cccccc;
    --grey-text: #6c727e;
    --dark-line: #3b4353;
    --rb-bg: #111111;
    --rb-text: #f9f9f9;
    --rb-panel: #292929;
    --rb-muted: #7e7e7e;
    --rb-hover: rgba(128, 128, 128, 0.3);
    --rb-chip: rgba(128, 128, 128, 0.2);
    --cta-gradient: linear-gradient(315deg, #ff4b51 0%, #c22d33 100%);
    --ease-riot: cubic-bezier(0.06, 0.81, 0, 0.98);

    --space-xs: 8px;
    --space-s: 16px;
    --space-sm: 24px;
    --space-m: 32px;
    --space-l: 48px;
    --space-xl: 64px;
    --space-xxl: 96px;
    --edge: 48px;

    --font-display: "Beaufort for LOL", Georgia, serif;
    --font-body: "Spiegel", "Segoe UI", Arial, sans-serif;
    --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (max-width: 1024px) {
    :root { --space-xs: 4px; --space-s: 8px; --space-sm: 16px; --space-m: 24px; --space-l: 32px; --space-xl: 48px; --space-xxl: 64px; --edge: 32px; }
}

@media (max-width: 600px) {
    :root { --space-s: 4px; --space-sm: 8px; --space-m: 16px; --space-l: 24px; --space-xl: 32px; --space-xxl: 48px; --edge: 24px; }
}

/* Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }

body {
    margin: 0;
    padding-top: 80px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 28px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main { flex: 1; display: block; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.skip-link { position: fixed; top: -100px; left: 16px; z-index: 30000; padding: 12px 16px; background: var(--white); color: var(--navy); font: 700 14px var(--font-ui); }
.skip-link:focus { top: 96px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (max-width: 1024px) { body { font-size: 16px; line-height: 24px; } }
@media (max-width: 600px) { body { font-size: 14px; line-height: 22px; } }

/* Layout containers (blades) ------------------------------------------- */

.blade { position: relative; padding: var(--space-l) 0; }
.blade--light { background: var(--white); color: var(--navy); }
.blade--dark { background: var(--navy); color: var(--white); }
.blade--flush { padding: 0; }

.container { position: relative; z-index: 2; width: 100%; margin: 0 auto; padding: 0 var(--edge); }
.container--large { max-width: 1600px; }
.container--medium { max-width: 1280px; }
.container--small { max-width: 960px; }

/* Typography ------------------------------------------------------------ */

.title-big {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(48px, 29.676px + 1.7877vw, 64px);
    line-height: 1.125;
    text-wrap: balance;
}

.title-display {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(64px, 45.676px + 1.7877vw, 80px);
    line-height: 1.1;
    text-wrap: balance;
}

.title-section {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
}

.supertitle {
    font-family: var(--font-body);
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 8px;
}

.lead { font-size: 18px; line-height: 28px; }
.muted { color: var(--grey-text); }
.caps { text-transform: uppercase; }

@media (max-width: 1024px) {
    .title-big { font-weight: 700; font-size: 48px; line-height: 1.1667; }
    .title-display { font-size: clamp(56px, 44.6336px + 1.8913vw, 64px); line-height: 1.125; }
    .title-section { font-size: 24px; line-height: 32px; }
    .supertitle { font-size: 18px; line-height: 28px; }
    .lead { font-size: 16px; line-height: 24px; }
}

@media (max-width: 600px) {
    .title-big { font-size: clamp(31px, 2.6667px + 7.5556vw, 48px); }
    .title-display { font-size: clamp(36px, 2.6667px + 8.8889vw, 56px); line-height: 1.1429; }
    .supertitle { font-size: 16px; line-height: 24px; }
    .lead { font-size: 14px; line-height: 22px; }
}

/* Buttons --------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    padding: 18px 32px;
    border: 0;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 28px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.25s ease-in-out, background-color 0.3s ease-in-out, outline-color 0.3s ease-in-out;
}

.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-hover); }
.btn--secondary { background: var(--navy); color: var(--white); }
.btn--secondary:hover { background: #1d2a44; }
.blade--dark .btn--secondary, .btn--light { background: var(--white); color: var(--navy); }
.blade--dark .btn--secondary:hover, .btn--light:hover { background: #e5e5e5; }
.btn--ornamental { outline: 1px solid var(--red); outline-offset: 3px; }
.btn--ornamental:hover { outline-color: var(--red-hover); }
.blade--dark .btn--ornamental, .hero .btn--ornamental { outline-color: var(--white); }
.blade--dark .btn--ornamental:hover, .hero .btn--ornamental:hover { outline-color: #e5e5e5; }
.btn--tertiary { padding: 0; background: none; color: inherit; }
.btn--tertiary:hover { color: var(--grey-text); }
.blade--dark .btn--tertiary:hover { color: #999999; }
.btn--small { padding: 10px 20px; font-size: 16px; line-height: 24px; }
.btn[disabled], .btn.is-disabled { background: #e6e7e9; color: #9da1a9; cursor: not-allowed; outline-color: transparent; }
.btn__icon { width: 20px; height: 20px; flex: none; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    font-size: 18px;
    line-height: 28px;
    text-decoration: none;
}

.link-arrow::after {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--red);
    -webkit-mask: url("../images/riot/link.svg") center / 60% no-repeat;
    mask: url("../images/riot/link.svg") center / 60% no-repeat;
}

.link-arrow:hover { color: var(--grey-text); }

@media (max-width: 1024px) { .btn { font-size: 16px; line-height: 24px; } .link-arrow { font-size: 16px; line-height: 24px; } }
@media (max-width: 600px) { .btn { font-size: 14px; line-height: 22px; } .btn--block-mobile { width: 100%; } }

/* ======================================================================= */
/* Riotbar header                                                           */
/* ======================================================================= */

.rb {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20000;
    font-family: var(--font-ui);
}

.rb__bar {
    position: relative;
    z-index: 3;
    display: flex;
    height: 80px;
    background: var(--rb-bg);
    border-bottom: 2px solid rgba(51, 51, 51, 0.25);
    color: var(--rb-text);
    font: 700 14px var(--font-ui);
}

.rb__left { display: flex; align-items: center; padding-left: 36px; }

.rb__brand {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rb-text);
    cursor: pointer;
}

.rb__riot-logo { width: 85px; height: 27px; }
.rb__brand-caret { width: 8px; height: 5px; margin-left: 12px; color: var(--rb-muted); transition: transform 0.2s ease; }
.rb__brand:hover, .rb__brand:hover .rb__brand-caret { color: #eb0029; }
.rb__brand[aria-expanded="true"] .rb__brand-caret { transform: rotate(180deg); }

.rb__center { display: flex; flex: 1; align-items: center; min-width: 0; }

.rb__game-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 80px;
    margin-left: 22px;
}

.rb__game-logo img { width: auto; height: 30px; }

.rb__nav { flex: 1; min-width: 0; height: 80px; margin-left: 18px; }

.rb__nav-list { display: flex; height: 80px; margin: 0; padding: 0; list-style: none; }

.rb__item { position: relative; display: inline-flex; flex: none; height: 80px; }
.rb__item.is-overflow { display: none; }

.rb__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 66px;
    margin: auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rb-text);
    font: 600 13px/15.6px var(--font-ui);
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 1s var(--ease-riot);
}

.rb__label {
    display: flex;
    align-items: center;
    padding: 7.5px 16px;
    margin-right: 4px;
    border-radius: 6.4px;
    white-space: nowrap;
}

.rb__caret { width: 10px; height: 5px; margin: 0 0 1px 5px; color: var(--rb-muted); }
.rb__ext { width: 12px; height: 12px; flex: none; margin-left: 4px; color: #737373; }

.rb__item:hover .rb__label,
.rb__item:focus-within .rb__label,
.rb__item.is-open .rb__label { background: var(--rb-hover); }

.rb__item:hover .rb__link,
.rb__item:focus-within .rb__link,
.rb__item.is-open .rb__link { color: var(--red-on-dark); }

.rb__item:hover .rb__caret,
.rb__item:hover .rb__ext,
.rb__item:focus-within .rb__caret,
.rb__item.is-open .rb__caret { color: #ffffff; }

.rb__item.is-current .rb__link { color: var(--rb-text); }

/* Dropdowns */

.rb__submenu {
    position: absolute;
    top: 69px;
    left: 0;
    z-index: 5;
    display: none;
    min-width: 200px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
    background: var(--rb-panel);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.rb__submenu::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--red);
    border-radius: 2px 2px 0 0;
}

.rb__item:hover > .rb__submenu,
.rb__item:focus-within > .rb__submenu,
.rb__item.is-open > .rb__submenu { display: block; }

.rb__submenu--right { left: auto; right: 4px; }

.rb__subitem { margin: 5px 16px; border-radius: 6.4px; }
.rb__subitem:hover, .rb__subitem:focus-within { background: var(--rb-hover); }

.rb__sublink {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    color: #c7c7c7;
    font: 500 13px/16px var(--font-ui);
    letter-spacing: 1.04px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.rb__subitem:hover .rb__sublink, .rb__sublink:focus-visible { color: #fcfcfc; }
.rb__sublink .rb__ext { color: var(--rb-muted); }
.rb__subitem:hover .rb__ext { color: #ffffff; }
.rb__subicon { width: 18px; height: 18px; flex: none; color: var(--rb-muted); }
.rb__subitem:hover .rb__subicon { color: var(--red-on-dark); }

.rb__subheading {
    margin: 12px 32px 4px;
    color: var(--rb-muted);
    font: 700 11px/16px var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rb__overflow-entry { display: none; }
.rb__overflow-entry.is-visible { display: block; }
.rb__overflow-divider { display: none; height: 1px; margin: 8px 16px; background: rgba(255, 255, 255, 0.08); }
.rb__submenu.has-items .rb__overflow-divider { display: block; }

/* Mega panels (FORMLAR, Daha fazlası) */

.rb__panel {
    position: absolute;
    top: 69px;
    left: 50%;
    z-index: 5;
    display: none;
    grid-template-columns: repeat(var(--panel-columns, 3), minmax(220px, 260px));
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 20px 8px 16px;
    background: var(--rb-panel);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateX(-50%);
}

.rb__panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--red);
    border-radius: 2px 2px 0 0;
}

.rb__item:hover > .rb__panel,
.rb__item:focus-within > .rb__panel,
.rb__item.is-open > .rb__panel { display: grid; }

.rb__panel-group { display: flex; flex-direction: column; }
.rb__panel-group ul { margin: 0; padding: 0; list-style: none; }
.rb__panel-group .rb__subitem { margin: 2px 8px; }
.rb__panel-group .rb__sublink { white-space: normal; }
.rb__panel-group .rb__subheading { margin: 8px 24px 6px; }

.rb__panel-footer {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 8px 16px 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rb__panel-footer a { color: var(--rb-text); font: 600 12px var(--font-ui); letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.rb__panel-footer a:hover { color: var(--red-on-dark); }

/* Right side */

.rb__right { display: flex; align-items: center; gap: 0; padding-right: 32px; }

.rb__account { position: relative; display: flex; align-items: center; margin-right: 6px; }

.rb__signin {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: 6.4px;
    color: var(--rb-text);
    font: 600 13px/16px var(--font-ui);
    letter-spacing: 1.04px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 1s var(--ease-riot);
}

.rb__signin svg { width: 16px; height: 16px; }
.rb__signin:hover { background: var(--rb-chip); color: var(--red-on-dark); }

.rb__avatar-button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 2px 8px 2px 2px;
    border: 0;
    border-radius: 18px;
    background: none;
    color: var(--rb-text);
    cursor: pointer;
}

.rb__avatar-button:hover, .rb__avatar-button[aria-expanded="true"] { background: var(--rb-chip); }

.avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    overflow: hidden;
    border-radius: 50%;
    background: var(--red);
    color: var(--white);
    font: 700 12px var(--font-ui);
    letter-spacing: 0.02em;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid var(--rb-bg);
    border-radius: 8px;
    background: var(--red);
    color: #fff;
    font: 700 9px/12px var(--font-ui);
    text-align: center;
}

.rb__account-panel {
    position: absolute;
    top: 58px;
    right: -6px;
    z-index: 10;
    width: 300px;
    padding: 0 0 12px;
    background: var(--rb-panel);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    border-radius: 0 0 2px 2px;
}

.rb__account-panel::before { content: ""; display: block; height: 4px; background: var(--red); border-radius: 2px 2px 0 0; }

.rb__account-head { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rb__account-name { color: #fcfcfc; font: 600 14px/20px var(--font-ui); }
.rb__account-riot { color: #9a9a9a; font: 500 12px/16px var(--font-ui); }
.rb__account-role { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 10px; background: rgba(211, 54, 58, 0.18); color: var(--red-on-dark); font: 700 10px/16px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.rb__account-panel ul { margin: 8px 0 0; padding: 0; list-style: none; }
.rb__account-panel form { margin: 0; }
.rb__account-panel button.rb__sublink { border: 0; background: none; cursor: pointer; text-align: left; }
.rb__count { margin-left: auto; padding: 0 6px; border-radius: 9px; background: var(--red); color: #fff; font: 700 10px/18px var(--font-ui); }

.rb__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin-left: 6px;
    padding: 8px 16px;
    border-radius: 12px;
    background: var(--cta-gradient);
    color: #111111;
    font: 600 13px/16px var(--font-ui);
    letter-spacing: 1.04px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 1s var(--ease-riot);
}

.rb__cta:hover { background: #ff4b51; color: #ffffff; }

.rb__hamburger { display: none; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; }
.rb__hamburger svg { width: 48px; height: 48px; }
.rb__mobile-logo { display: none; }

/* Overlay behind the app switcher and mobile menu */

.rb-overlay {
    position: fixed;
    inset: 0;
    z-index: 19990;
    background: #111111;
    opacity: 0.7;
}

/* Riot Games app switcher ------------------------------------------------- */

.switcher {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30001;
    max-height: 100vh;
    overflow-y: auto;
    color: #111111;
    font-family: var(--font-ui);
}

.switcher__bg {
    position: absolute;
    inset: 0;
    background: #f9f9f9;
    animation: switcher-curtain 0.15s linear both;
}

@keyframes switcher-curtain {
    0% { clip-path: polygon(0 0, 100% 0, 100% 80px, 25% 80px, 0 80px); }
    50% { clip-path: polygon(0 0, 100% 0, 100% 40%, 25% 70%, 0 40%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 100%); }
}

.switcher__inner { position: relative; min-height: 320px; padding: 0 10px 32px; animation: switcher-fade 1s ease 0.15s both; }
@keyframes switcher-fade { from { opacity: 0; } to { opacity: 1; } }

.switcher__top { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 0; height: 80px; }
.switcher__logo { display: flex; align-items: center; gap: 12px; color: #111111; border: 0; background: none; padding: 0 0 0 26px; cursor: pointer; }
.switcher__logo .rb__riot-logo { width: 85px; height: 27px; }
.switcher__logo:hover { color: #eb0029; }
.switcher__logo .rb__brand-caret { transform: rotate(180deg); }
.switcher__close { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; margin-right: 10px; }
.switcher__close svg { width: 32px; height: 32px; }

.switcher__body { display: flex; gap: 16px; padding: 0 24px; }
.switcher__links { flex: 0 0 50%; columns: 10em 3; column-gap: 10px; }
.switcher__group { break-inside: avoid; padding-bottom: 16px; }

.switcher__group-title {
    height: 32px;
    margin: 0 0 4px;
    padding: 8px 12px 8px 16px;
    border-radius: 6.4px;
    background: rgba(186, 186, 186, 0.1);
    color: #0a0a0a;
    font: 700 13px/120% var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.switcher__product {
    display: block;
    margin: 4px 0;
    padding: 8px 16px;
    border-radius: 6.4px;
    color: #4a4a4a;
    font: 400 13px/15.6px var(--font-ui);
    text-decoration: none;
    text-transform: uppercase;
}

.switcher__product:hover, .switcher__product:focus-visible { background: rgba(186, 186, 186, 0.3); color: var(--red); }

.switcher__showcase { position: relative; flex: 1 1 50%; min-height: 420px; }
.switcher__cards { display: flex; gap: 16px; }

.switcher__card { flex: 1; max-width: 452px; color: #0a0a0a; text-decoration: none; animation: switcher-fade 0.25s ease both; }
.switcher__card:nth-child(1) { animation-delay: 0.15s; }
.switcher__card:nth-child(2) { animation-delay: 0.2s; }

.switcher__card-image {
    aspect-ratio: 451 / 292;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    background: #e5e5e5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.switcher__card:hover .switcher__card-image { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.02); }
.switcher__card h4 { margin-top: 16px; font: 300 13px/15.6px var(--font-ui); letter-spacing: 0.03em; }

.switcher__preview {
    position: absolute;
    inset: 0 0 auto;
    overflow: hidden;
    aspect-ratio: 914 / 411;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    background: #0a0a0a;
}

.switcher__preview-bg { position: absolute; inset: 0 0 0 auto; height: 100%; width: auto; max-width: none; object-fit: cover; border-radius: 0 8px 8px 0; }

.switcher__preview-panel {
    position: absolute;
    inset: 0 50% 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 6% 16% 6% 7%;
    border-radius: 8px 0 0 8px;
    clip-path: polygon(77% 0, 63% 90%, 100% 100%, 100% 101%, 0 101%, 0 0);
    width: 50%;
}

.switcher__preview-logo { max-width: 65%; max-height: 45%; object-fit: contain; object-position: left center; }
.switcher__preview-title { color: #ffffff; font: 800 22px/1.1 var(--font-ui); text-transform: uppercase; }
.switcher__preview-text { color: #c7c7c7; font: 500 calc(40.5% + 0.4vw) / 120% var(--font-ui); text-transform: uppercase; max-width: 90%; }

/* Mobile menu ------------------------------------------------------------- */

.mnav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 30002;
    width: 484px;
    max-width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #1f1f1f;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    font-family: var(--font-ui);
}

.mnav__head { display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 16px; }
.mnav__head img { height: 40px; width: auto; }
.mnav__close { width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; }
.mnav__close svg { width: 48px; height: 48px; }

.mnav__list { margin: 16px 0 0; padding: 0; list-style: none; }

.mnav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 32px);
    height: 48px;
    margin: 8px 16px;
    padding: 12px 18px;
    border: 0;
    border-radius: 6.4px;
    background: none;
    color: var(--rb-text);
    font: 600 16px/24px var(--font-ui);
    letter-spacing: 1.28px;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 1s var(--ease-riot);
}

.mnav__link:hover { background: var(--rb-chip); }
.mnav__link.is-open { color: var(--red-on-dark); }
.mnav__chevron { width: 5px; height: 9px; color: var(--rb-muted); transform: rotate(90deg); transition: transform 0.2s linear; }
.mnav__link.is-open .mnav__chevron { transform: rotate(-90deg); }
.mnav__link .rb__ext { width: 14px; height: 14px; color: #737373; }

.mnav__sub { margin: 0; padding: 0; list-style: none; }
.mnav__sub-title { margin: 12px 34px 0; color: var(--rb-muted); font: 700 12px/16px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }

.mnav__sublink {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    margin: 8px 16px;
    padding: 0 18px;
    border-radius: 6.4px;
    color: #c7c7c7;
    font: 700 16px/16px var(--font-ui);
    text-decoration: none;
    text-transform: uppercase;
}

.mnav__sublink:hover { background: var(--rb-chip); color: #fcfcfc; }
.mnav__sublink .rb__subicon { width: 20px; height: 20px; }
.mnav__sublink--footer { color: var(--rb-text); font-size: 14px; letter-spacing: 0.08em; }

.mnav__account { margin: 16px; padding: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: #c7c7c7; font: 500 14px/20px var(--font-ui); }
.mnav__account strong { color: #fcfcfc; }
.mnav__account form { margin: 12px 0 0; }
.mnav__account button { padding: 0; border: 0; background: none; color: var(--red-on-dark); font: 600 13px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }

.mnav__cta { padding: 16px; margin-top: 20px; }
.mnav__cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin-top: 12px;
    border-radius: 12px;
    background: var(--cta-gradient);
    color: #111111;
    font: 600 16px/19.2px var(--font-ui);
    letter-spacing: 1.28px;
    text-decoration: none;
    text-transform: uppercase;
}

.mnav__cta a.mnav__signin { background: rgba(128, 128, 128, 0.2); color: var(--rb-text); }

/* Responsive header -------------------------------------------------------- */

@media (max-width: 1024px) {
    .rb__left { padding-left: 16px; }
    .rb__riot-logo { width: 95px; height: 32px; }
    .rb__brand-caret { width: 14px; height: 7px; }
    .rb__center { margin-left: 28px; }
    .rb__game-logo, .rb__nav, .rb__cta, .rb__account { display: none; }
    .rb__mobile-logo { display: flex; align-items: center; }
    .rb__mobile-logo img { height: 40px; width: auto; }
    .rb__right { padding-right: 16px; }
    .rb__hamburger { display: block; }
    .switcher__body { flex-direction: column; }
    .switcher__links { columns: 1; }
    .switcher__showcase { min-height: 0; }
    .switcher__preview { display: none; }
}

@media (max-width: 640px) {
    .mnav { width: 100%; }
    .switcher__cards { flex-direction: column; }
}

@media (max-width: 420px) {
    .rb__left { padding-left: 4px; }
    .rb__riot-logo { width: 88px; }
    .rb__center { margin-left: 8px; }
    .rb__right { padding-right: 4px; }
}

/* ======================================================================= */
/* Footer (riotbar)                                                        */
/* ======================================================================= */

.rf { text-align: center; color: var(--rb-text); font-family: var(--font-ui); user-select: none; }
.rf__content { background: var(--rb-bg); border-top: 2px solid #343434; padding-bottom: 48px; }

.rf__links { padding: 24px; background: var(--rb-panel); }

.rf__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 700 13px var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rf__list a {
    display: block;
    padding: 8px 16px;
    border-radius: 6.4px;
    color: var(--rb-text);
    text-decoration: none;
    transition: background-color 0.2s linear;
}

.rf__list a:hover { background: var(--rb-hover); }

.rf__social { padding: 18px 0; }
.rf__social ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.rf__social li { width: 32px; height: 32px; margin: 6px; border-radius: 12px; background: var(--rb-chip); }
.rf__social a { display: grid; place-items: center; width: 100%; height: 100%; color: var(--rb-text); }
.rf__social svg { width: 16px; height: 16px; }

.rf__logos { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 24px 0 20px; }
.rf__logos a { color: #737373; transition: color 0.2s linear; }
.rf__logos a:hover { color: var(--rb-text); }
.rf__logos .rf__riot { width: 99px; height: 32px; }
.rf__logos .rf__kep { height: 40px; width: auto; opacity: 0.5; transition: opacity 0.2s linear; }
.rf__logos a:hover .rf__kep { opacity: 1; }

.rf__copyright { max-width: 640px; margin: 0 auto; padding: 0 16px; color: var(--rb-muted); font: 500 13px/140% var(--font-ui); word-break: keep-all; }
.rf__legal { padding: 24px 0 28px; }

@media (max-width: 1024px) {
    .rf__list { flex-direction: column; align-items: center; }
    .rf__list li { margin: 12px 0; }
    .rf__social li { width: 48px; height: 48px; margin: 12px; }
    .rf__social svg { width: 24px; height: 24px; }
}

@media (max-width: 768px) { .rf__logos { flex-direction: column; gap: 20px; } }
@media (max-width: 640px) { .rf__copyright { max-width: 368px; } }

/* Mobile menu transition + scroll lock ---------------------------------- */

.transition-transform { transition: transform 300ms ease, opacity 300ms ease; }
.mnav--from { transform: translateX(100%); opacity: 0; }
.mnav--to { transform: translateX(0); opacity: 1; }
body.is-locked { overflow: hidden; }

/* ======================================================================= */
/* Components                                                               */
/* ======================================================================= */

/* Toast ----------------------------------------------------------------- */

.toast {
    position: fixed;
    top: 96px;
    left: 50%;
    z-index: 19000;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(560px, calc(100% - 32px));
    padding: 16px 16px 16px 20px;
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 12px 32px rgba(10, 20, 40, 0.35);
    transform: translateX(-50%);
    font-size: 16px;
    line-height: 24px;
}

.toast::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--red); }
.toast--success::before { background: #2fa35d; }
.toast p { flex: 1; }
.toast__icon svg { width: 24px; height: 24px; }
.toast--success .toast__icon { color: #52c47d; }
.toast--error .toast__icon { color: var(--red-on-dark); }
.toast__close { padding: 0; border: 0; background: none; color: #9aa3b5; cursor: pointer; }
.toast__close svg { width: 20px; height: 20px; }

/* Masthead (dark title band) ---------------------------------------------- */

.masthead {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: var(--space-xl) 0;
    overflow: hidden;
    background: var(--navy);
    color: var(--white);
}

.masthead__inner { padding-top: 96px; max-width: 760px; }
.masthead__title { margin: 0; }
.masthead__title + .masthead__text { margin-top: 16px; }
.masthead__text { font-size: 18px; line-height: 28px; max-width: 640px; }
.masthead__eyebrow { display: block; margin-bottom: 8px; color: var(--red-on-dark); font: 700 14px/22px var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; }

.masthead--image .masthead__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.masthead--image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 20, 40, 0.95) 0%, rgba(10, 20, 40, 0.6) 60%, rgba(10, 20, 40, 0.2) 100%); }

@media (max-width: 1024px) { .masthead__inner { padding-top: 32px; max-width: 100%; } .masthead__text { font-size: 16px; line-height: 24px; } }
@media (max-width: 600px) { .masthead__inner { padding-top: 96px; } .masthead__text { font-size: 14px; line-height: 22px; } }

/* News grid & card -------------------------------------------------------- */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
}

@media (max-width: 1024px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-l); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: minmax(0, 1fr); } }

.news-card { display: block; color: var(--navy); text-decoration: none; }
.news-card__media { position: relative; overflow: hidden; }
.news-card__ratio { position: relative; height: 0; padding-bottom: 56.25%; background: #e6e7e9; }
.news-card__ratio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out; }
.news-card:hover .news-card__ratio img, .news-card:focus-visible .news-card__ratio img { transform: scale(1.1); }

.news-card__badge {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(30px, 10%, 100px);
    aspect-ratio: 1;
    background: url("../images/riot/link-square.svg") center bottom / contain no-repeat;
}

.news-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(30px, 10%, 100px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: url("../images/riot/player-square.svg") center / contain no-repeat;
}

.news-card__lock {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(10, 20, 40, 0.85);
    color: #fff;
    font: 700 11px/16px var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.news-card__lock svg { width: 12px; height: 12px; }

.meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 16px 0 8px;
    font-size: 14px;
    line-height: 22px;
}

.meta-row__category { color: var(--red); font-weight: 700; text-decoration: none; }
.meta-row__sep { width: 1px; height: 13px; margin: 0 8px; background: var(--grey-line); }
.news-card__title { margin-bottom: 4px; font-size: 22px; font-weight: 700; line-height: 32px; }
.news-card__text { font-size: 16px; line-height: 24px; }

@media (max-width: 1024px) {
    .meta-row { font-size: 12px; line-height: 16px; }
    .news-card__title { font-size: 18px; line-height: 28px; }
    .news-card__text { font-size: 14px; line-height: 22px; }
}

@media (max-width: 600px) {
    .meta-row { font-size: 10px; line-height: 14px; }
    .news-card__title { font-size: 16px; line-height: 24px; }
    .news-card__text { font-size: 12px; line-height: 16px; }
}

.show-more { margin-top: var(--space-l); }
.show-more__divider { height: 1px; background: var(--grey-line); }

.show-more__button {
    display: inline-flex;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid var(--red);
    margin-top: -1px;
    background: none;
    color: var(--navy);
    font: 700 18px/28px var(--font-body);
    text-decoration: none;
    cursor: pointer;
}

.show-more__button::after {
    content: "";
    width: 20px;
    height: 20px;
    margin: auto 0 auto 4px;
    background: var(--red);
    -webkit-mask: url("../images/riot/plus.svg") center / contain no-repeat;
    mask: url("../images/riot/plus.svg") center / contain no-repeat;
}

.show-more__button:hover { color: var(--red); }
.show-more__button.is-loading { opacity: 0.5; pointer-events: none; }

/* Category tabs (KEP addition: quick filter above the grid) */

.category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-m); }

.category-tabs a {
    padding: 6px 14px;
    border: 1px solid var(--grey-line);
    color: var(--navy);
    font: 600 14px/22px var(--font-body);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.category-tabs a:hover { border-color: var(--navy); }
.category-tabs a.is-active { border-color: var(--navy); background: var(--navy); color: var(--white); }

/* Section header (pre-title + big italic title + paragraph) -------------- */

.section-head { max-width: 1056px; margin: 0 auto; text-align: center; }
.section-head__text { max-width: 784px; margin: 16px auto 0; }
.section-head--left { margin: 0; text-align: left; }
.section-head--left .section-head__text { margin-left: 0; }

.section-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--space-m); }

/* ======================================================================= */
/* Article                                                                  */
/* ======================================================================= */

.article-hero { position: relative; padding-top: var(--space-l); background: var(--white); }
.article-hero__backdrop { position: absolute; inset: auto 0 20% 0; z-index: 0; height: 100%; overflow: hidden; }
.article-hero__backdrop img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: blur(16px); }
.article-hero__media { position: relative; z-index: 1; }
.article-hero__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 auto; background: #e6e7e9; }
.article-hero__video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.article-hero__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.article-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-l) 0; text-align: center; }
.article-head__header { display: flex; flex-direction: column; gap: 16px; }

.article-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(28px, 14.257px + 1.3408vw, 40px);
    line-height: 1.2;
    text-wrap: balance;
}

.article-tagline { font-size: 18px; line-height: 28px; }

.article-divider { width: 100%; height: 4px; border-top: 2px solid var(--grey-line); border-bottom: 1px solid var(--grey-line); }

.article-meta { display: flex; flex-wrap: wrap; justify-content: center; font-size: 14px; line-height: 22px; }
.article-meta > * + *::before { content: "|"; padding: 0 8px; color: var(--grey-line); }
.article-meta a { color: var(--red); text-decoration: none; }

@media (max-width: 1024px) {
    .article-hero { padding-top: 0; }
    .article-hero__backdrop { display: none; }
    .article-hero .container { padding: 0; }
    .article-title { font-size: clamp(28px, 37.6832px - 0.9456vw, 32px); line-height: 1.2857; }
    .article-tagline { font-size: 16px; line-height: 24px; }
    .article-meta { font-size: 12px; line-height: 16px; }
}

@media (max-width: 600px) {
    .article-title { font-size: clamp(24px, 10.6667px + 3.5556vw, 32px); line-height: 1.25; }
    .article-tagline { font-size: 14px; line-height: 22px; }
    .article-meta { font-size: 10px; line-height: 14px; }
}

/* Rich text --------------------------------------------------------------- */

.rich-text { font-size: 18px; line-height: 28px; overflow-wrap: break-word; }
.measure { max-width: 864px; }
.rich-text > * { margin: var(--space-m) 0; }
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text h1, .rich-text h2 { font-size: 22px; line-height: 32px; font-weight: 700; text-wrap: balance; }
.rich-text h3 { font-size: 18px; line-height: 28px; font-weight: 700; }
.rich-text h4 { font-size: 16px; line-height: 24px; font-weight: 700; }
.rich-text ul { padding-left: var(--space-m); list-style: outside disc; }
.rich-text ol { padding-left: var(--space-m); list-style: outside decimal; }
.rich-text li { margin: var(--space-xs) 0; }
.rich-text strong { font-weight: 700; }
.rich-text a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.rich-text a:hover { color: var(--red); }
.rich-text blockquote { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 32px; line-height: 1.25; text-align: center; text-wrap: balance; }
.rich-text blockquote p + p { margin-top: 12px; font-size: 20px; }
.rich-text hr { border: 0; border-top: 1px solid var(--grey-line); }
.rich-text img { height: auto; margin: 0 auto; }
.rich-text figure { width: 100%; margin: var(--space-m) 0; }
.rich-text figcaption { margin-top: 24px; font-size: 14px; line-height: 22px; font-weight: 600; text-transform: uppercase; }
.rich-text pre { padding: 24px; overflow-x: auto; background: rgba(10, 20, 40, 0.05); font: 400 15px/24px ui-monospace, Consolas, monospace; white-space: pre; }
.rich-text table { width: 100%; border-collapse: collapse; border-top: 3px solid var(--navy); }
.rich-text td, .rich-text th { padding: 14px 16px; border-bottom: 1px solid #e0e3e8; font-size: 16px; line-height: 24px; text-align: left; vertical-align: top; }
.rich-text th { color: var(--grey-text); font: 700 12px/16px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.rich-text tbody tr:nth-child(odd) td { background: #f7f8fa; }

@media (max-width: 1024px) {
    .rich-text { font-size: 16px; line-height: 24px; }
    .rich-text h1, .rich-text h2 { font-size: 18px; line-height: 28px; }
    .rich-text h3 { font-size: 16px; line-height: 24px; }
    .rich-text blockquote { font-size: 24px; line-height: 1.333; }
    .rich-text td, .rich-text th { font-size: 12px; line-height: 16px; }
}

@media (max-width: 600px) {
    .rich-text { font-size: 14px; line-height: 22px; }
    .rich-text h1, .rich-text h2 { font-size: 16px; line-height: 24px; }
    .rich-text h3 { font-size: 14px; line-height: 22px; }
    .rich-text td, .rich-text th { padding: 10px; font-size: 10px; line-height: 14px; }
}

.related { padding: var(--space-l) 0; background: var(--white); }
.related__title { margin-bottom: var(--space-m); }

/* ======================================================================= */
/* Home                                                                     */
/* ======================================================================= */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: min(80dvh, 1080px);
    padding: var(--space-xl) 0;
    overflow: hidden;
    background: var(--navy);
    color: var(--white);
}

.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.hero__tint { position: absolute; inset: 0; background: var(--navy); opacity: 0.35; }
.hero__fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--navy) 0%, transparent 100%) center bottom / 100% 60% no-repeat; }

.hero__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-m); text-align: center; }
.hero__logo { width: 100%; max-width: 368px; height: auto; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45)); }

.hero__tagline {
    margin: var(--space-m) 0 var(--space-xl);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    text-wrap: balance;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hero__content .hero__tagline { margin: 0; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: var(--space-m); }

@media (max-width: 1024px) { .hero__logo { max-width: 340px; } .hero__tagline { font-size: 16px; line-height: 1.5; } }
@media (max-width: 600px) { .hero__logo { max-width: 238px; } .hero__actions { width: 100%; flex-direction: column; gap: 16px; } }

/* Ambassador strip */

.strip { background: var(--rb-panel); color: #c7c7c7; font-family: var(--font-ui); }
.strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.strip__hello { font: 500 14px/20px var(--font-ui); }
.strip__hello strong { color: #fcfcfc; font-weight: 700; }
.strip__hello span { display: block; color: var(--rb-muted); font-size: 12px; }
.strip__items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.strip__items a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 6.4px;
    background: var(--rb-chip);
    color: #e5e5e5;
    font: 600 13px/16px var(--font-ui);
    letter-spacing: 0.02em;
    text-decoration: none;
}

.strip__items a:hover { background: var(--rb-hover); color: #fff; }
.strip__items svg { width: 18px; height: 18px; color: var(--rb-muted); }
.strip__items .is-todo svg { color: #f5a524; }
.strip__items .is-done svg { color: #52c47d; }
.strip__items strong { color: #fff; }

/* Intro pillars */

.home-intro { padding: var(--space-xxl) 0; }

.pillars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-m);
    margin-top: var(--space-l);
}

.pillar { padding: 32px 24px; border-top: 2px solid var(--navy); background: #f5f6f7; }
.pillar__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; background: var(--navy); color: var(--white); }
.pillar__icon svg { width: 24px; height: 24px; }
.pillar__title { margin-bottom: 8px; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 22px; line-height: 1.25; }
.pillar p { font-size: 16px; line-height: 24px; }

.center-actions { display: flex; justify-content: center; margin-top: var(--space-l); }

@media (max-width: 1024px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pillars { grid-template-columns: minmax(0, 1fr); } .pillar { padding: 24px 20px; } .pillar p { font-size: 14px; line-height: 22px; } }

/* Finder */

.finder { overflow: hidden; padding: var(--space-xxl) 0; }
.finder__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.25; }
.finder::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 20%, rgba(10, 20, 40, 0.55) 100%); }
.finder__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--space-xl); }
.finder__supertitle { margin-bottom: 8px; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 24px; line-height: 32px; }
.finder__text .lead { max-width: 560px; margin-top: 16px; }

.finder__search { position: relative; max-width: 560px; margin-top: var(--space-l); }
.finder__field { position: relative; }
.finder__field-icon { position: absolute; top: 50%; left: 20px; width: 24px; height: 24px; color: #7e8594; transform: translateY(-50%); pointer-events: none; }

.finder__field input {
    width: 100%;
    height: 64px;
    padding: 0 20px 0 56px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0;
    outline: 0;
    background: rgba(255, 255, 255, 0.96);
    color: var(--navy);
    font: 400 18px var(--font-body);
}

.finder__field input:focus { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }

.finder__results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 360px;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
    list-style: none;
    background: var(--white);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.finder__results a { display: flex; flex-direction: column; padding: 10px 20px; color: var(--navy); text-decoration: none; }
.finder__results a.is-active, .finder__results a:hover { background: #f1f2f4; }
.finder__result-name { font-weight: 700; font-size: 16px; line-height: 24px; }
.finder__result-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--grey-text); font-size: 14px; line-height: 20px; }
.finder__result-meta strong { color: var(--red); }
.finder__result-meta em { color: #2b8a3e; font-style: normal; font-weight: 600; }
.finder__empty { padding: 10px 20px; color: var(--grey-text); font-size: 15px; }

.finder__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: rgba(255, 255, 255, 0.12); }
.finder__stats div { padding: 32px 28px; background: rgba(10, 20, 40, 0.88); }
.finder__stats dt { color: #9aa3b5; font: 700 12px/16px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.finder__stats dd { margin: 8px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 56px; line-height: 1; }

@media (max-width: 1024px) { .finder__inner { grid-template-columns: minmax(0, 1fr); } .finder__stats dd { font-size: 44px; } }
@media (max-width: 600px) { .finder__stats div { padding: 20px 16px; } .finder__stats dd { font-size: 36px; } .finder__field input { height: 56px; font-size: 16px; } }

/* Games */

.home-games { padding: var(--space-xxl) 0; }

.games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); margin-top: var(--space-l); }

.game-card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 914 / 411;
    border-radius: 8px;
    background: #0a0a0a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: var(--white);
    text-decoration: none;
    transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.game-card:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.12); }
.game-card__bg { position: absolute; inset: 0 0 0 auto; height: 100%; width: 75%; max-width: none; object-fit: cover; transition: transform 0.4s ease; }
.game-card:hover .game-card__bg { transform: scale(1.05); }

.game-card__panel {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    width: 55%;
    padding: 0 22% 0 7%;
    background: radial-gradient(160.43% 179.54% at 100.43% 100%, var(--game-color) 0%, #0a0a0a 70%);
    clip-path: polygon(77% 0, 63% 90%, 100% 100%, 100% 101%, 0 101%, 0 0);
}

.game-card__logo { width: 100%; max-width: 220px; max-height: 90px; object-fit: contain; object-position: left center; }
.game-card__text { color: #c7c7c7; font: 600 13px/1.25 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; }

@media (max-width: 900px) { .games { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .game-card__panel { width: 70%; padding-right: 24%; } .game-card__logo { max-height: 56px; } .game-card__text { font-size: 11px; } }

/* Steps */

.home-steps { padding: var(--space-xxl) 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); margin: var(--space-l) 0 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; padding: 32px 28px 36px; border: 1px solid var(--dark-line); background: rgba(255, 255, 255, 0.02); }
.step__number { display: block; margin-bottom: 20px; color: var(--red-on-dark); font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 48px; line-height: 1; }
.step__title { margin-bottom: 8px; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 24px; line-height: 1.25; }
.step p { color: #c9ceda; font-size: 16px; line-height: 24px; }

@media (max-width: 1024px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Closing promo */

.promo { position: relative; display: grid; place-items: center; min-height: 640px; overflow: hidden; background: var(--navy); color: var(--white); text-align: center; }
.promo__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.promo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10, 20, 40, 0.2) 0%, rgba(10, 20, 40, 0.85) 75%); }
.promo__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-l); padding: 0 var(--edge); }

@media (max-width: 1024px) { .promo { min-height: 440px; } }

/* ======================================================================= */
/* Shared UI bits                                                           */
/* ======================================================================= */

.back-link { display: inline-block; margin-bottom: 16px; color: #aeb6c6; font: 600 13px/16px var(--font-ui); letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.back-link:hover { color: #fff; }

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eceef1;
    color: #3d4556;
    font: 700 12px/20px var(--font-ui);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.status-pill--gray { background: #eceef1; color: #3d4556; }
.status-pill--info { background: #e2effd; color: #1c5fb2; }
.status-pill--success { background: #e1f5e8; color: #1f7a45; }
.status-pill--warning { background: #fff2d6; color: #8a5a00; }
.status-pill--danger { background: #fde6e7; color: #b3262b; }
.status-pill--primary { background: #fde6e7; color: var(--red-deep); }
.status-pill--large { padding: 6px 14px; font-size: 14px; }

.notice { display: flex; gap: 16px; margin-bottom: var(--space-m); padding: 20px 24px; border-left: 4px solid #1c5fb2; background: #eef4fc; font-size: 16px; line-height: 24px; }
.notice p { margin-top: 4px; }
.notice .link-arrow { margin-top: 8px; font-size: 16px; }
.notice__icon { width: 24px; height: 24px; flex: none; color: #1c5fb2; }
.notice--success { border-color: #2fa35d; background: #ecf8f0; }
.notice--success .notice__icon { color: #2fa35d; }
.notice--warning { border-color: #e0a100; background: #fff7e5; }
.notice--warning .notice__icon { color: #b98400; }
.notice--error { border-color: var(--red); background: #fdeeee; }
.notice--error .notice__icon { color: var(--red); }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: var(--space-xl) var(--space-m); border: 1px dashed var(--grey-line); text-align: center; }
.empty-state p { max-width: 520px; color: var(--grey-text); }
.empty-state .btn { margin-top: 12px; }
.empty-state__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #f1f2f4; color: var(--navy); }
.empty-state__icon svg { width: 30px; height: 30px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 2px 10px; border-radius: 999px; background: #eef0f3; font-size: 14px; line-height: 22px; }

.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.table th { padding: 12px 16px; border-bottom: 2px solid var(--navy); color: var(--grey-text); font: 700 12px/16px var(--font-ui); letter-spacing: 0.06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.table td { padding: 14px 16px; border-bottom: 1px solid #e3e5e9; vertical-align: middle; }
.table tbody tr:hover { background: #fafbfc; }
.table__muted { color: var(--grey-text); font-family: var(--font-ui); font-size: 13px; white-space: nowrap; }
.table__note { max-width: 320px; color: var(--grey-text); font-size: 14px; }
.table__link { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; white-space: nowrap; }
.table--compact td, .table--compact th { padding: 8px 10px; font-size: 14px; }
.table--dark th { border-color: var(--dark-line); color: #9aa3b5; }
.table--dark td { border-color: var(--dark-line); }
.table--dark tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.table--dark .table__link { color: #fff; }

.pagination-wrap { margin-top: var(--space-m); }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; }
.pagination__item { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--grey-line); color: var(--navy); font: 600 14px var(--font-ui); text-decoration: none; }
.pagination__item:hover { border-color: var(--navy); }
.pagination__item.is-active { border-color: var(--navy); background: var(--navy); color: #fff; }
.pagination__item.is-disabled { color: #b5bac4; pointer-events: none; }

.page-updated { margin-top: var(--space-l); color: var(--grey-text); font-size: 14px; }

/* FAQ */

.faq { border-top: 1px solid var(--grey-line); }
.faq__item { border-bottom: 1px solid var(--grey-line); }
.faq__item h3 { margin: 0; }
.faq__question { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 22px 0; border: 0; background: none; color: var(--navy); font: 700 20px/28px var(--font-body); text-align: left; cursor: pointer; }
.faq__question:hover { color: var(--red); }
.faq__icon { position: relative; width: 20px; height: 20px; flex: none; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 9px; left: 2px; width: 16px; height: 2px; background: var(--red); transition: transform 0.2s ease; }
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0deg); }
.faq__answer p { padding-bottom: 24px; font-size: 18px; line-height: 28px; max-width: 760px; }

@media (max-width: 600px) { .faq__question { font-size: 16px; line-height: 24px; } .faq__answer p { font-size: 14px; line-height: 22px; } }

/* ======================================================================= */
/* Forms                                                                    */
/* ======================================================================= */

.page-form main { background: #f3f4f6; }
.form-page { padding: var(--space-l) 0 var(--space-xxl); }
.form-masthead .masthead__inner { max-width: 880px; }

.form-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 24px 0 0; padding: 0; list-style: none; color: #c9ceda; font: 500 14px/20px var(--font-ui); }
.form-facts li { display: inline-flex; align-items: center; gap: 8px; }
.form-facts svg { width: 18px; height: 18px; color: var(--red-on-dark); }
.form-facts strong { color: #fff; }

.kep-form { display: flex; flex-direction: column; gap: 24px; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.form-section { padding: 40px 40px 44px; border-top: 3px solid var(--navy); background: var(--white); box-shadow: 0 1px 2px rgba(10, 20, 40, 0.06); }
.form-section[disabled] { display: none; }
.form-section__title { float: left; width: 100%; margin-bottom: 8px; padding: 0; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 26px; line-height: 1.25; }
.form-section__title + * { clear: both; }
.form-section__text { clear: both; margin-bottom: 8px; color: var(--grey-text); font-size: 16px; line-height: 24px; }

.form-grid { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-top: 24px; }
.form-grid > * { grid-column: 1 / -1; }
.form-grid > .field--half { grid-column: span 1; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field[disabled] { display: none; }
.field__label { float: left; width: 100%; padding: 0; color: var(--navy); font: 700 16px/24px var(--font-body); }
.field__label + * { clear: both; }
.field__required { margin-left: 2px; color: var(--red); }
.field__help { color: var(--grey-text); font-size: 14px; line-height: 20px; }
.field__error { color: var(--red); font: 600 14px/20px var(--font-body); }

.input, .textarea, .select {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #c3c8d1;
    border-radius: 0;
    background: #fff;
    color: var(--navy);
    font: 400 16px/24px var(--font-body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
}

.textarea { min-height: 120px; resize: vertical; }
.input:hover, .textarea:hover, .select:hover { border-color: #8e96a6; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); outline: 0; }
.has-error .input, .has-error .textarea, .has-error .select, .input.is-invalid { border-color: var(--red); }
.input::placeholder, .textarea::placeholder { color: #9aa1ae; }
.input--small { min-height: 40px; padding: 6px 12px; font-size: 15px; }
.input--date, .input--time { max-width: 260px; }

.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; top: 50%; right: 16px; width: 10px; height: 5px; background: var(--navy); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='m.707 1.707 2.586 2.586a1 1 0 0 0 1.414 0l2.586-2.586C7.923 1.077 7.477 0 6.586 0H1.414C.524 0 .077 1.077.707 1.707Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='m.707 1.707 2.586 2.586a1 1 0 0 0 1.414 0l2.586-2.586C7.923 1.077 7.477 0 6.586 0H1.414C.524 0 .077 1.077.707 1.707Z'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
.select { padding-right: 40px; cursor: pointer; }

.input-group { display: flex; align-items: stretch; }
.input-group .input { flex: 1; }
.input-group__suffix, .input-group__prefix { display: grid; place-items: center; padding: 0 14px; border: 1px solid #c3c8d1; background: #f3f4f6; color: var(--grey-text); font: 600 14px var(--font-ui); }
.input-group__suffix { border-left: 0; }
.input-group__prefix { border-right: 0; }

/* Choice buttons & list */

.choice-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-list { display: flex; flex-direction: column; gap: 10px; }
.choice { position: relative; display: inline-flex; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }

.choice-buttons .choice__label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid #c3c8d1;
    background: #fff;
    color: var(--navy);
    font: 600 15px/22px var(--font-body);
    transition: all 0.15s ease;
}

.choice-buttons .choice:hover .choice__label { border-color: var(--navy); }
.choice-buttons input:checked + .choice__label { border-color: var(--navy); background: var(--navy); color: #fff; }
.choice-buttons input:focus-visible + .choice__label { outline: 2px solid var(--red); outline-offset: 2px; }

.choice-list .choice__label { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 24px; }
.choice-list .choice__label::before { content: ""; width: 20px; height: 20px; flex: none; border: 1px solid #8e96a6; border-radius: 50%; background: #fff; }
.choice-list input[type="checkbox"] + .choice__label::before { border-radius: 0; }
.choice-list input:checked + .choice__label::before { border: 6px solid var(--navy); }
.choice-list input[type="checkbox"]:checked + .choice__label::before { border: 0; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.6 2.6 8l1.1-1.1 2.5 2.5 6.1-6.1 1.1 1.1z'/%3E%3C/svg%3E") center / 16px no-repeat; }
.choice__other { flex-basis: 100%; max-width: 420px; }

/* Game picker */

.game-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.game-option { position: relative; cursor: pointer; }
.game-option input { position: absolute; opacity: 0; pointer-events: none; }

.game-option__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 110px;
    padding: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    background: #0a0a0a;
    color: #fff;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.game-option__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: opacity 0.2s ease, transform 0.3s ease; }
.game-option__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 10%, transparent 70%); }
.game-option__label { position: relative; z-index: 1; font: 800 13px/1.2 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; }
.game-option__check { position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--red); opacity: 0; transform: scale(0.6); transition: all 0.15s ease; }
.game-option__check svg { width: 14px; height: 14px; }
.game-option:hover .game-option__card img { opacity: 0.75; transform: scale(1.05); }
.game-option input:checked + .game-option__card { border-color: var(--red); }
.game-option input:checked + .game-option__card img { opacity: 0.9; }
.game-option input:checked + .game-option__card .game-option__check { opacity: 1; transform: scale(1); }
.game-option input:focus-visible + .game-option__card { outline: 2px solid var(--navy); outline-offset: 2px; }

@media (max-width: 720px) { .game-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Rating */

.rating { display: flex; flex-wrap: wrap; gap: 6px; }
.rating__option { position: relative; cursor: pointer; }
.rating__option input { position: absolute; opacity: 0; pointer-events: none; }
.rating__option span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #c3c8d1; background: #fff; font: 700 16px var(--font-ui); transition: all 0.15s ease; }
.rating__option:hover span { border-color: var(--navy); }
.rating__option input:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; }
.rating__option input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.rating__legend { display: flex; justify-content: space-between; max-width: 520px; color: var(--grey-text); font-size: 13px; line-height: 18px; }
.rating-grid { display: flex; flex-direction: column; gap: 12px; }
.rating-grid__row { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 16px; }
.rating-grid__label { font-weight: 700; font-size: 16px; }

@media (max-width: 600px) { .rating-grid__row { grid-template-columns: 1fr; gap: 6px; } .rating__option span { width: 38px; height: 38px; } }

/* Repeater */

.repeater { display: flex; flex-direction: column; gap: 8px; }
.repeater__head, .repeater__row { display: grid; align-items: start; gap: 8px; }
.repeater__head { color: var(--grey-text); font: 700 12px/16px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.repeater__index { display: grid; place-items: center; height: 48px; background: #eef0f3; font: 700 14px var(--font-ui); }
.repeater__cell { display: flex; flex-direction: column; gap: 4px; }
.repeater__cell-label { display: none; font: 700 12px var(--font-ui); color: var(--grey-text); text-transform: uppercase; }
.repeater__remove { display: grid; place-items: center; width: 40px; height: 48px; border: 1px solid transparent; background: none; color: var(--grey-text); cursor: pointer; }
.repeater__remove:hover:not(:disabled) { color: var(--red); border-color: #f1c4c5; }
.repeater__remove:disabled { opacity: 0.35; cursor: not-allowed; }
.repeater__remove svg { width: 20px; height: 20px; }
.repeater__add { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 10px 16px; border: 1px dashed #8e96a6; background: #fff; color: var(--navy); font: 700 14px var(--font-body); cursor: pointer; }
.repeater__add:hover { border-color: var(--navy); border-style: solid; }
.repeater__add svg { width: 18px; height: 18px; }

@media (max-width: 720px) {
    .repeater__head { display: none; }
    .repeater__row { grid-template-columns: 1fr !important; padding: 12px; border: 1px solid #e3e5e9; }
    .repeater__index { height: 28px; justify-self: start; padding: 0 10px; }
    .repeater__cell-label { display: block; }
    .repeater__remove { justify-self: end; height: 32px; }
}

/* University picker */

.uni-picker { position: relative; display: flex; flex-direction: column; gap: 8px; }
.uni-picker__search { position: relative; }
.uni-picker__search .input { padding-left: 44px; }
.uni-picker__icon { position: absolute; top: 50%; left: 14px; width: 20px; height: 20px; color: #7e8594; transform: translateY(-50%); pointer-events: none; }
.uni-picker__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.uni-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border: 1px solid var(--navy); background: #f5f6f8; }
.uni-chip strong { font-size: 15px; }
.uni-chip small { color: var(--grey-text); font-size: 13px; }
.uni-chip button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--grey-text); cursor: pointer; }
.uni-chip button:hover { color: var(--red); }
.uni-chip button svg { width: 16px; height: 16px; }
.uni-picker__results { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; max-height: 300px; margin: 4px 0 0; padding: 6px 0; overflow-y: auto; list-style: none; background: #fff; box-shadow: 0 12px 32px rgba(10, 20, 40, 0.2); }
.uni-picker__results button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 16px; border: 0; background: none; color: var(--navy); text-align: left; cursor: pointer; }
.uni-picker__results button.is-active, .uni-picker__results button:hover { background: #f1f2f4; }
.uni-picker__results strong { font-size: 15px; line-height: 22px; }
.uni-picker__results small { color: var(--grey-text); font-size: 13px; }

/* File drop */

.file-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 20px; border: 1px dashed #8e96a6; background: #fafbfc; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.file-drop:hover { border-color: var(--navy); background: #f3f5f8; }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop__icon { width: 28px; height: 28px; color: var(--red); }
.file-drop small { color: var(--grey-text); font-size: 13px; }
.file-drop__names { color: var(--navy) !important; font-weight: 600; }

/* Consent checkbox */

.consent { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.consent input[type="checkbox"] { position: absolute; width: 22px; height: 22px; margin: 0; opacity: 0; }
.consent__box { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 1px solid #8e96a6; background: #fff; transition: all 0.15s ease; }
.consent input:checked + .consent__box { border-color: var(--navy); background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.6 2.6 8l1.1-1.1 2.5 2.5 6.1-6.1 1.1 1.1z'/%3E%3C/svg%3E") center / 18px no-repeat; }
.consent input:focus-visible + .consent__box { outline: 2px solid var(--red); outline-offset: 2px; }
.consent__text { font-size: 16px; line-height: 24px; }
.consent--inline { margin-top: 10px; }
.consent--inline .consent__text { font-size: 14px; }

.form-note { display: flex; gap: 12px; padding: 16px 20px; background: #f3f5f8; font-size: 16px; line-height: 24px; }
.form-note__icon { width: 22px; height: 22px; flex: none; color: var(--navy); }

.form-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px 40px; background: var(--navy); color: #c9ceda; font-size: 15px; line-height: 22px; }
.form-submit strong { color: #fff; }
.form-submit p { flex: 1 1 320px; }
.form-submit .btn--ornamental { outline-color: #fff; }

@media (max-width: 720px) {
    .form-section { padding: 28px 20px 32px; }
    .form-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .form-grid > .field--half { grid-column: 1 / -1; }
    .form-submit { padding: 24px 20px; }
    .form-submit .btn { width: 100%; }
}

/* ======================================================================= */
/* Directory, profiles                                                      */
/* ======================================================================= */

.directory-search { display: flex; max-width: 820px; margin-top: var(--space-m); }
.directory-search .finder__search { flex: 1; min-width: 0; max-width: none; margin-top: 0; }
.directory-search__city { flex: none; width: 250px; }
.directory-search__city-icon { position: absolute; top: 50%; left: 18px; z-index: 1; width: 22px; height: 22px; color: #7e8594; transform: translateY(-50%); pointer-events: none; }
.directory-search__city select {
    width: 100%;
    height: 64px;
    padding: 0 44px 0 50px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-left: 1px solid #d5d9e0;
    border-radius: 0;
    outline: 0;
    background: rgba(255, 255, 255, 0.96);
    color: var(--navy);
    font: 600 16px var(--font-body);
    appearance: none;
    cursor: pointer;
}
.directory-search__city select:focus { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.directory-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--space-m); }
.directory-toolbar__meta { margin-top: 4px; color: var(--grey-text); font-size: 15px; line-height: 22px; }
.directory-toolbar__meta a { color: var(--red); font-weight: 600; }
.directory-filter { position: relative; width: 320px; max-width: 100%; }
.directory-filter__icon { position: absolute; top: 50%; left: 12px; width: 18px; height: 18px; color: #7e8594; transform: translateY(-50%); pointer-events: none; }
.directory-filter .input { padding-left: 38px; }

@media (max-width: 600px) {
    .directory-search { flex-direction: column; }
    .directory-search__city { width: 100%; }
    .directory-search__city select { border-left: 1px solid rgba(255, 255, 255, 0.35); border-top: 1px solid #d5d9e0; }
    .directory-filter { width: 100%; }
}

.amb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-m) var(--space-sm); }

.amb-card { display: block; color: var(--navy); text-decoration: none; }
.amb-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #1d2c4c 0%, var(--navy) 70%); }
.amb-card__media > img:not(.amb-card__mark) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out; }
.amb-card:hover .amb-card__media > img:not(.amb-card__mark) { transform: scale(1.06); }
.amb-card__initials { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.92); font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 72px; letter-spacing: 0.02em; transition: transform 0.3s ease-in-out; }
.amb-card:hover .amb-card__initials { transform: scale(1.08); }
.amb-card__mark { position: absolute; right: 12px; bottom: 12px; width: 36px; height: auto; opacity: 0.9; }
.amb-card__city { position: absolute; top: 12px; left: 12px; padding: 3px 10px; background: rgba(10, 20, 40, 0.8); color: #fff; font: 700 11px/16px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.amb-card__body { padding-top: 14px; border-top: 3px solid var(--red); margin-top: -3px; position: relative; }
.amb-card__name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 22px; line-height: 1.2; }
.amb-card__uni { margin-top: 4px; color: var(--grey-text); font-size: 14px; line-height: 20px; }

.directory-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: var(--space-xl); padding: 32px 40px; background: #f3f4f6; }
.directory-cta p { margin-top: 6px; color: var(--grey-text); font-size: 16px; line-height: 24px; }

.match-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.match { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 20px; border: 1px solid #e0e3e8; color: var(--navy); text-decoration: none; transition: border-color 0.15s ease; }
.match:hover { border-color: var(--navy); }
.match__name { font-weight: 700; font-size: 17px; line-height: 24px; }
.match__city { color: var(--grey-text); font-size: 14px; }
.match .status-pill { align-self: flex-start; }

.profile-card { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-l); align-items: start; }
.profile-card + .profile-card { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid #e3e5e9; }
.profile-card__portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #1d2c4c 0%, var(--navy) 70%); border-bottom: 4px solid var(--red); }
.profile-card__portrait > img:not(.amb-card__mark) { width: 100%; height: 100%; object-fit: cover; }
.profile-card__portrait .amb-card__initials { font-size: 110px; }
.profile-card__name { margin: 4px 0 20px; font-size: 40px; line-height: 1.15; }
.profile-card__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 0 0 20px; }
.profile-card__facts dt { color: var(--grey-text); font: 700 12px/16px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.profile-card__facts dd { margin: 4px 0 0; font-size: 17px; line-height: 24px; }
.profile-card__bio { margin-bottom: 24px; font-size: 18px; line-height: 28px; }
.profile-card__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.profile-card__eyebrow { color: var(--red); font: 700 12px/16px var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; }

.profile-games { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; padding: 0; list-style: none; }
.profile-games__item { --game: var(--navy); display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border: 1px solid #dfe3ea; color: var(--navy); font: 700 12px/16px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.profile-games__item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--game); }
.profile-games__item--lol { --game: #c8aa6e; }
.profile-games__item--valorant { --game: #ff4655; }
.profile-games__item--tft { --game: #7c5cff; }
.profile-games__item--wildrift { --game: #33b5e5; }

.profile-contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.profile-contact { display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 12px 10px 10px; border: 1px solid #e0e3e8; background: #fff; color: var(--navy); text-decoration: none; transition: border-color 0.15s ease; }
a.profile-contact:hover { border-color: var(--navy); }
.profile-contact__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: var(--navy); color: #fff; }
.profile-contact__icon svg { width: 18px; height: 18px; }
.profile-contact__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.profile-contact__body small { color: var(--grey-text); font: 700 11px/14px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.profile-contact__body strong { overflow: hidden; font-size: 16px; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; }
.profile-contact__copy { display: inline-flex; flex: none; align-items: center; padding: 6px 10px; border: 0; background: #f1f2f4; color: var(--navy); font: 600 12px/16px var(--font-ui); cursor: pointer; }
.profile-contact__copy span { display: inline-flex; align-items: center; gap: 6px; }
.profile-contact__copy svg { width: 14px; height: 14px; }
.profile-contact__copy:hover { background: #e4e7ec; }
.profile-contact__ext { width: 12px; height: 12px; flex: none; color: var(--grey-text); }

.public-fields .choice__label small { margin-left: 6px; color: var(--grey-text); font-size: 14px; }

@media (max-width: 800px) { .profile-card { grid-template-columns: 1fr; } .profile-card__portrait { max-width: 320px; } }

.profile-head { display: flex; align-items: center; gap: 24px; }
.avatar--xl { width: 96px; height: 96px; font-size: 32px; }
.avatar-upload { display: flex; align-items: center; gap: 20px; }
.avatar-upload label.btn { position: relative; cursor: pointer; }
.riot-account { display: flex; align-items: center; gap: 20px; clear: both; padding: 20px; margin-top: 16px; background: #111; color: #c7c7c7; }
.riot-account__logo { width: 85px; height: 27px; flex: none; color: #f9f9f9; }
.riot-account strong { color: #fff; font: 700 16px var(--font-ui); }
.riot-account p { margin-top: 4px; font-size: 14px; line-height: 20px; }

.notifications { margin-top: 24px; }
.notification { display: grid; grid-template-columns: 12px 1fr auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid #e3e5e9; color: var(--navy); text-decoration: none; clear: both; }
.notification__dot { width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: transparent; }
.notification.is-unread .notification__dot { background: var(--red); }
.notification__body { display: flex; flex-direction: column; font-size: 15px; line-height: 22px; }
.notification__body span { color: var(--grey-text); }
.notification time { color: var(--grey-text); font-size: 13px; white-space: nowrap; }

/* ======================================================================= */
/* Application                                                              */
/* ======================================================================= */

.timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 var(--space-l); padding: 0; list-style: none; counter-reset: none; }
.timeline__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.timeline__step::before { content: ""; position: absolute; top: 18px; left: -50%; right: 50%; height: 2px; background: #d7dbe1; }
.timeline__step:first-child::before { display: none; }
.timeline__step.is-done::before, .timeline__step.is-current::before { background: var(--navy); }
.timeline__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #d7dbe1; border-radius: 50%; background: #fff; color: #9aa1ae; font: 700 14px var(--font-ui); }
.timeline__dot svg { width: 18px; height: 18px; }
.timeline__step.is-done .timeline__dot { border-color: var(--navy); background: var(--navy); color: #fff; }
.timeline__step.is-current .timeline__dot { border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0 0 0 6px rgba(211, 54, 58, 0.15); }
.timeline__label { color: var(--grey-text); font: 600 13px/18px var(--font-ui); }
.timeline__step.is-current .timeline__label, .timeline__step.is-done .timeline__label { color: var(--navy); }

@media (max-width: 640px) { .timeline__label { font-size: 10px; line-height: 14px; } .timeline__dot { width: 30px; height: 30px; font-size: 12px; } .timeline__step::before { top: 14px; } }

.status-card { padding: 32px 36px; border-top: 3px solid var(--navy); background: #f3f4f6; }
.status-card__text { margin-top: 16px; font-size: 18px; line-height: 28px; }
.status-card__message { margin: 20px 0 0; padding: 16px 20px; border-left: 3px solid var(--red); background: #fff; font-size: 16px; line-height: 24px; }
.status-card__message span { display: block; margin-bottom: 4px; color: var(--grey-text); font: 700 12px/16px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }

.booking { margin-top: var(--space-xl); }
.booking .title-section { margin-bottom: var(--space-m); }
.booking__current { display: flex; gap: 24px; padding: 24px; border: 2px solid var(--navy); margin-bottom: 16px; }
.booking__date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 96px; padding: 12px; background: var(--navy); color: #fff; }
.booking__day { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 44px; line-height: 1; }
.booking__month { font: 700 12px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.booking__info strong { font-size: 18px; line-height: 26px; }
.booking__info p { margin-top: 6px; color: var(--grey-text); font-size: 16px; line-height: 24px; }
.booking__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.booking__actions form { margin: 0; }
.booking__hint { margin-bottom: 16px; color: var(--grey-text); font-size: 15px; }

.slot-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.slot-day { padding: 20px; border: 1px solid #e0e3e8; }
.slot-day__title { margin-bottom: 12px; font-weight: 700; font-size: 16px; }
.slot-day__slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-day__slots form { margin: 0; }
.slot { min-width: 76px; padding: 10px 12px; border: 1px solid var(--navy); background: #fff; color: var(--navy); font: 700 15px var(--font-ui); cursor: pointer; transition: all 0.15s ease; }
.slot:hover { background: var(--navy); color: #fff; }

.withdraw { margin-top: var(--space-l); text-align: right; }
.withdraw .btn--tertiary { color: var(--grey-text); font-size: 14px; text-decoration: underline; }
.withdraw .btn--tertiary:hover { color: var(--red); }

.apply-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-l); align-items: start; }
.apply-grid__hint { margin-top: 20px; color: var(--grey-text); font-size: 16px; line-height: 24px; }
.apply-grid__hint a { color: var(--navy); text-decoration-color: var(--red); }
.apply-card { display: flex; flex-direction: column; gap: 20px; padding: 32px; background: var(--navy); color: #fff; }
.apply-card .btn { width: 100%; }
.apply-card .btn--ornamental { outline-color: #fff; }
.apply-card__meta { color: #aeb6c6; font-size: 14px; line-height: 20px; text-align: center; }

.check-list { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 32px; font-size: 17px; line-height: 26px; }
.check-list li::before { content: ""; position: absolute; top: 3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.6 2.6 8l1.1-1.1 2.5 2.5 6.1-6.1 1.1 1.1z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.check-list--muted li { color: #dfe3ea; }
.check-list--muted li::before { background-color: rgba(255, 255, 255, 0.14); }

@media (max-width: 900px) { .apply-grid { grid-template-columns: 1fr; } }

/* Submission detail */

.submission-status { display: flex; flex-wrap: wrap; gap: 32px; margin-bottom: var(--space-m); padding: 24px 28px; background: #f3f4f6; }
.submission-status__label { margin-bottom: 6px; color: var(--grey-text); font: 700 12px/16px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }

.answers { display: flex; flex-direction: column; gap: var(--space-m); }
.answers__title { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--navy); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 22px; }
.answers__list { margin: 0; }
.answers__row { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid #e3e5e9; }
.answers__row dt { color: var(--grey-text); font-size: 15px; line-height: 22px; }
.answers__row dd { margin: 0; font-size: 16px; line-height: 24px; }
.answers__text { white-space: pre-line; }
.file-link { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-weight: 600; }
.file-link svg { width: 16px; height: 16px; }

@media (max-width: 640px) { .answers__row { grid-template-columns: 1fr; gap: 4px; } }

/* Forms index */

.form-group-block + .form-group-block { margin-top: var(--space-xl); }
.form-group-block__text { margin-top: 4px; color: var(--grey-text); font-size: 16px; line-height: 24px; }
.form-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; margin-top: 20px; }
.form-card { display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 16px; padding: 20px 24px; border: 1px solid #e0e3e8; color: var(--navy); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.form-card:hover { border-color: var(--navy); box-shadow: 0 8px 24px rgba(10, 20, 40, 0.08); }
.form-card__icon { display: grid; place-items: center; width: 48px; height: 48px; background: var(--navy); color: #fff; }
.form-card__icon svg { width: 24px; height: 24px; }
.form-card__body { display: flex; flex-direction: column; gap: 4px; }
.form-card__title { font-weight: 700; font-size: 18px; line-height: 24px; }
.form-card__text { color: var(--grey-text); font-size: 14px; line-height: 20px; }
.form-card__arrow { color: var(--red); font-size: 20px; transition: transform 0.2s ease; }
.form-card:hover .form-card__arrow { transform: translateX(4px); }

@media (max-width: 600px) { .form-cards { grid-template-columns: 1fr; } }

/* Guides */

.guide-card__icon { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 40px; height: 40px; background: var(--red); color: #fff; }
.guide-card__icon svg { width: 20px; height: 20px; }
.blade--grey { background: #f3f4f6; }
.guide-more__title { margin-bottom: 4px; }
.blade--grey .form-card { background: #fff; }

/* Poster studio */

.studio-blade { padding: var(--space-l) 0 var(--space-xxl); background: #f3f4f6; }
.studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); align-items: start; gap: var(--space-l); }
.studio__controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.studio__preview { position: sticky; top: 104px; }

.studio-step { padding: 32px; border-top: 3px solid var(--navy); background: #fff; box-shadow: 0 1px 2px rgba(10, 20, 40, 0.06); }
.studio-step__title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 24px; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 26px; line-height: 1.2; }
.studio-step__title span { color: var(--red); font: normal 800 14px/1 var(--font-ui); letter-spacing: 0.08em; }
.studio-step__help { margin-top: 12px; }

.template-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.template-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; border: 1px solid #c3c8d1; background: #fff; color: var(--navy); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.template-card::before { content: ""; position: absolute; top: -1px; right: -1px; left: -1px; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-riot); }
.template-card:hover { border-color: var(--navy); }
.template-card.is-active { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.template-card.is-active::before { transform: scaleX(1); }
.template-card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.template-card__icon { width: 28px; height: 28px; margin-bottom: 6px; color: var(--red); }
.template-card__title { font: 800 14px/20px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.template-card__text { color: var(--grey-text); font-size: 14px; line-height: 20px; }

.studio-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; }
.studio-fields > *, .studio-fields__group > * { grid-column: 1 / -1; }
.studio-fields__group { display: contents; }
.studio-fields .field--half { grid-column: span 3; }
.studio-fields .field--third { grid-column: span 2; }
.studio-fields--spaced { margin-top: 20px; }
.textarea--short { min-height: 80px; }

.contact-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.contact-field { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; }

.art-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.art-option { position: relative; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; border: 2px solid transparent; background: #0a0a0a; color: #fff; cursor: pointer; }
.art-option img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.art-option::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, 0.85) 0%, transparent 55%); pointer-events: none; }
.art-option:hover img { transform: scale(1.06); }
.art-option.is-active { border-color: var(--red); }
.art-option:focus-visible, .art-option:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }
.art-option__label { position: absolute; right: 8px; bottom: 8px; left: 8px; z-index: 1; font: 800 11px/1.25 var(--font-ui); letter-spacing: 0.04em; text-align: left; }
.art-option__check { position: absolute; top: 6px; right: 6px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--red); opacity: 0; transform: scale(0.6); transition: all 0.15s ease; }
.art-option__check svg { width: 13px; height: 13px; }
.art-option.is-active .art-option__check { opacity: 1; transform: scale(1); }
.art-option--upload { display: grid; place-items: center; border: 1px dashed #8e96a6; background: #fff; color: var(--navy); }
.art-option--upload::after { display: none; }
.art-option--upload:hover { border-color: var(--navy); }
.art-option--upload.is-active { border: 2px solid var(--red); }
.art-option--upload:has(img) { background: #0a0a0a; color: #fff; }
.art-option--upload img { opacity: 0.45; }
.art-option__upload { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; font: 800 11px/1.25 var(--font-ui); letter-spacing: 0.04em; text-align: center; text-transform: uppercase; }
.art-option__icon { width: 24px; height: 24px; }

.art-adjust { display: grid; gap: 12px; margin-top: 20px; }
.range-field { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 16px; color: var(--grey-text); font: 700 12px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.range { width: 100%; accent-color: var(--red); cursor: pointer; }

.studio-preview { padding: 20px; background: var(--rb-bg); color: #fff; }
.format-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; padding: 4px; background: rgba(255, 255, 255, 0.08); }
.format-switch button { padding: 8px 6px; border: 0; background: none; color: #d0d0d0; font: 700 12px/16px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.format-switch button small { display: block; margin-top: 2px; color: var(--rb-muted); font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none; }
.format-switch button:hover { background: var(--rb-hover); }
.format-switch button.is-active { background: #fff; color: #111; }
.format-switch button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.studio-canvas { position: relative; display: grid; place-items: center; min-height: 320px; padding: 16px; background: #1c1c1c; }
.studio-canvas canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 330px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
.studio-canvas__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #1c1c1c; color: #d0d0d0; font: 600 14px/20px var(--font-ui); }
.spinner { width: 28px; height: 28px; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: var(--red); border-radius: 50%; animation: kep-spin 0.8s linear infinite; }
@keyframes kep-spin { to { transform: rotate(360deg); } }

.studio-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.studio-actions .btn { width: 100%; padding: 14px 16px; font-size: 16px; line-height: 24px; }
.studio-actions .btn[disabled] { background: #333333; color: #8a8a8a; }
.studio-preview__note { margin-top: 12px; color: #bdbdbd; font-size: 14px; line-height: 20px; }
.studio-preview__note.is-warning { color: #ffd27a; }
.studio-preview__note.is-error { color: var(--red-on-dark); }
.studio-preview__reset { margin-top: 12px; padding: 0; border: 0; background: none; color: #bdbdbd; font: 600 13px/20px var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.studio-preview__reset:hover { color: #fff; }

@media (max-width: 1280px) { .art-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (max-width: 1024px) {
    .studio { grid-template-columns: 1fr; }
    .studio__preview { position: static; order: -1; }
    .studio-canvas canvas { max-height: 72vh; }
}

@media (max-width: 600px) {
    .studio-step { padding: 24px 16px; }
    .template-picker { grid-template-columns: 1fr; }
    .art-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .studio-fields .field--half, .studio-fields .field--third { grid-column: 1 / -1; }
    .contact-field { grid-template-columns: 1fr; gap: 6px; }
    .studio-preview { padding: 12px; }
    .studio-canvas { padding: 8px; }
}

/* Error page */

.error-page { background: var(--navy); }
.error { position: relative; display: grid; place-items: center; min-height: calc(100vh - 80px); overflow: hidden; color: #fff; text-align: center; }
.error__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.25; }
.error__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 640px; padding: 48px 24px; }
.error__code { color: var(--red-on-dark); font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 120px; line-height: 1; }

/* Look switcher (KEP_THEME_SWITCHER; see App\Enums\SiteTheme) */

.theme-switch { position: fixed; bottom: 16px; left: 16px; z-index: 19500; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(17, 17, 17, 0.92); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); font: 600 13px/1 var(--font-ui); }
.theme-switch__option { padding: 9px 14px; border-radius: 999px; color: #c7c7c7; text-decoration: none; white-space: nowrap; }
.theme-switch__option:hover { color: #ffffff; }
.theme-switch__option.is-active { background: #ffffff; color: #111111; }

/* Site password */

.gate-page { padding-top: 0; }
.gate { min-height: 100vh; min-height: 100dvh; }
.gate__logo { width: 200px; height: auto; }
.gate__form { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 360px; margin-top: 8px; }
.gate__form .btn { width: 100%; }
.gate__error { color: var(--red-on-dark); font: 600 14px/20px var(--font-body); }