:root {
      --yellow: #feb400;
      --yellow-soft: #ffd66f;
      --ink: #0b0c0e;
      --charcoal: #1a1c20;
      --steel: #373738;
      --paper: #f5f5f3;
      --muted: #696b70;
      --line: #deded9;
      --white: #ffffff;
      --red: #bd0647;
      --shadow: 0 24px 70px rgba(0, 0, 0, .42);
      --radius: 18px;
      --rail-width: 250px;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      min-height: 100%;
      margin: 0;
    }

    body {
      min-width: 320px;
      background:
        radial-gradient(circle at 50% 0%, rgba(254, 180, 0, .09), transparent 34rem),
        #2d3035 url("../images/background-texture.png") repeat;
      color: var(--ink);
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 16px;
      line-height: 1.55;
    }

    button,
    input {
      font: inherit;
    }

    input[type="range"] {
      accent-color: var(--yellow);
      cursor: pointer;
    }

    input[type="range"]:focus-visible {
      outline: 3px solid rgba(254, 180, 0, .4);
      outline-offset: 2px;
    }

    input[type="range"]:disabled {
      cursor: not-allowed;
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    img,
    svg {
      display: block;
    }

    a {
      color: inherit;
    }

    .skip-link {
      position: fixed;
      z-index: 1000;
      top: 8px;
      left: 8px;
      padding: 10px 14px;
      border-radius: 8px;
      background: var(--yellow);
      color: var(--ink);
      font-weight: 700;
      transform: translateY(-150%);
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    .site-shell {
      width: min(1240px, calc(100vw - 40px));
      height: calc(100vh - 40px);
      height: calc(100dvh - 40px);
      min-height: 680px;
      margin: 20px auto;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .42);
      border-radius: 22px;
      background: var(--white);
      box-shadow: var(--shadow);
    }

    .masthead {
      display: grid;
      grid-template-columns: var(--rail-width) 1fr;
      height: 146px;
      background: #151719;
    }

    .brand {
      display: grid;
      place-items: center;
      overflow: hidden;
      border-right: 1px dotted rgba(255, 255, 255, .82);
      background: var(--yellow);
    }

    .brand img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      image-rendering: auto;
    }

    .banner {
      position: relative;
      overflow: hidden;
      background: #232529;
    }

    .banner-photo,
    .banner-grid,
    .banner-shade {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .banner-photo {
      object-fit: cover;
      object-position: 50% 44%;
      filter: saturate(.82) contrast(.98) brightness(.94);
      image-rendering: auto;
      transform: scale(1.002);
    }

    .banner-grid {
      object-fit: cover;
      opacity: .72;
      mix-blend-mode: soft-light;
      backdrop-filter: blur(.35px);
    }

    .banner-shade {
      background:
        linear-gradient(90deg, rgba(0, 0, 0, .2), transparent 32%, rgba(0, 0, 0, .24)),
        linear-gradient(0deg, rgba(0, 0, 0, .16), rgba(255, 255, 255, .025) 52%, rgba(0, 0, 0, .1));
      box-shadow: inset 0 0 34px rgba(0, 0, 0, .2);
    }

    .main-nav {
      position: relative;
      z-index: 20;
      display: flex;
      align-items: center;
      min-height: 58px;
      padding: 0 18px 0 24px;
      border-bottom: 1px dotted rgba(255, 255, 255, .68);
      background: #090a0b;
      color: #fff;
    }

    .nav-toggle {
      display: none;
      align-items: center;
      gap: 9px;
      border: 0;
      background: transparent;
      color: #fff;
      cursor: pointer;
      font-weight: 700;
    }

    .nav-toggle svg {
      width: 22px;
      height: 22px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .nav-links a,
    .nav-action {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      justify-content: center;
      padding: 0 13px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: #e7e7e7;
      cursor: pointer;
      font-size: .88rem;
      font-weight: 700;
      text-decoration: none;
      transition: background-color .2s ease, color .2s ease, transform .2s ease;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible,
    .nav-action:hover,
    .nav-action:focus-visible {
      background: #24262a;
      color: var(--yellow);
      outline: none;
    }

    .nav-links .active a {
      color: var(--yellow);
    }

    .member-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .language-switch {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
      padding: 0 12px;
      border-right: 1px solid rgba(255, 255, 255, .17);
    }

    .lang-button {
      display: grid;
      width: 38px;
      height: 31px;
      place-items: center;
      padding: 4px;
      border: 1px solid transparent;
      border-radius: 7px;
      background: transparent;
      cursor: pointer;
      opacity: .58;
      transition: opacity .2s ease, border-color .2s ease, background-color .2s ease;
    }

    .lang-button svg {
      width: 25px;
      height: 17px;
      border-radius: 2px;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
    }

    .lang-button:hover,
    .lang-button:focus-visible,
    .lang-button.active {
      border-color: var(--yellow);
      background: rgba(254, 180, 0, .1);
      opacity: 1;
      outline: none;
    }

    .nav-action.signup {
      min-height: 40px;
      padding-inline: 16px;
      background: var(--yellow);
      color: #080808;
    }

    .signup-short {
      display: none;
    }

    .nav-action.signup:hover,
    .nav-action.signup:focus-visible {
      background: var(--yellow-soft);
      color: #080808;
      transform: translateY(-1px);
    }

    .nav-action.login svg {
      width: 18px;
      height: 18px;
      margin-right: 8px;
    }

    .workspace {
      display: grid;
      grid-template-columns: var(--rail-width) minmax(0, 1fr);
      height: calc(100% - 204px);
      overflow: hidden;
    }

    .side-rail {
      position: relative;
      z-index: 4;
      min-height: 0;
      overflow: visible;
      border-right: 1px solid #42454b;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 18rem),
        #17191d;
      color: #fff;
    }

    .side-kicker {
      margin: 0 0 8px;
      color: var(--yellow);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .side-links {
      position: relative;
      z-index: 3;
      margin: 18px 0 0;
      padding: 0 18px;
      list-style: none;
    }

    .side-links a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 8px;
      border-bottom: 1px solid rgba(255, 255, 255, .11);
      color: #d8d8d8;
      font-size: .82rem;
      text-decoration: none;
      transition: color .2s ease, background-color .2s ease, padding-left .2s ease;
    }

    .side-links a:hover,
    .side-links a:focus-visible,
    .side-links li.active a {
      padding-left: 12px;
      background: rgba(254, 180, 0, .08);
      color: var(--yellow);
      outline: none;
    }

    .side-links a::after {
      content: "";
      width: 7px;
      height: 7px;
      border-top: 2px solid var(--yellow);
      border-right: 2px solid var(--yellow);
      transform: rotate(45deg);
      transition: transform .2s ease;
    }

    .side-links a:hover::after,
    .side-links a:focus-visible::after,
    .side-links li.active a::after {
      transform: translateX(3px) rotate(45deg);
    }

    .desktop-dude {
      position: absolute;
      z-index: 2;
      right: -25px;
      bottom: 0;
      width: auto;
      height: min(64%, 460px);
      max-width: none;
      object-fit: contain;
      object-position: bottom;
      filter: drop-shadow(8px 12px 12px rgba(0, 0, 0, .42));
    }

    .content-panel {
      position: relative;
      z-index: 1;
      min-width: 0;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-color: var(--yellow) #deded9;
      background:
        linear-gradient(rgba(255, 255, 255, .92), rgba(255, 255, 255, .96)),
        var(--paper);
    }

    .content-panel::-webkit-scrollbar {
      width: 12px;
    }

    .content-panel::-webkit-scrollbar-track {
      background: #e5e5e2;
    }

    .content-panel::-webkit-scrollbar-thumb {
      border: 3px solid #e5e5e2;
      border-radius: 999px;
      background: var(--yellow);
    }

    .content-wrap {
      width: min(100%, 1040px);
      margin: 0 auto;
      padding: 42px clamp(26px, 4.3vw, 64px) 50px;
    }

    .hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 250px;
      min-height: 250px;
      align-items: center;
      overflow: hidden;
      border-radius: var(--radius);
      background:
        linear-gradient(100deg, #111317 0%, #1a1d22 65%, #22262c 100%);
      color: #fff;
      box-shadow: 0 16px 38px rgba(10, 11, 13, .18);
      isolation: isolate;
    }

    .hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
      background-size: 24px 24px;
      mask-image: linear-gradient(90deg, #000, transparent 90%);
    }

    .hero-copy {
      padding: 34px 10px 35px 38px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      color: var(--yellow);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 24px;
      height: 3px;
      border-radius: 99px;
      background: currentColor;
    }

    .hero h1 {
      max-width: 560px;
      margin: 0;
      font-size: clamp(2rem, 4vw, 3.3rem);
      line-height: 1.05;
      letter-spacing: -.045em;
    }

    .hero p {
      max-width: 620px;
      margin: 17px 0 0;
      color: #c9cbd0;
      font-size: 1rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .button {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      border: 1px solid transparent;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 700;
      text-decoration: none;
      transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
    }

    .button:hover,
    .button:focus-visible {
      transform: translateY(-2px);
      outline: none;
    }

    .button-primary {
      background: var(--yellow);
      color: #080808;
    }

    .button-primary:hover,
    .button-primary:focus-visible {
      background: var(--yellow-soft);
    }

    .button-secondary {
      border-color: #555b63;
      background: rgba(255, 255, 255, .04);
      color: #fff;
    }

    .button-secondary:hover,
    .button-secondary:focus-visible {
      border-color: var(--yellow);
      color: var(--yellow);
    }

    .member-card {
      position: relative;
      align-self: stretch;
      display: grid;
      align-content: center;
      margin-left: 14px;
      padding: 30px 30px 30px 26px;
      border-left: 1px solid rgba(255, 255, 255, .13);
      background: rgba(255, 255, 255, .025);
    }

    .member-card strong {
      color: var(--yellow);
      font-size: 2.15rem;
      line-height: 1;
    }

    .member-card span {
      margin-top: 8px;
      color: #fff;
      font-size: .9rem;
      font-weight: 700;
    }

    .member-card small {
      margin-top: 6px;
      color: #999da4;
      font-size: .76rem;
      line-height: 1.45;
    }

    .mobile-dude {
      display: none;
    }

    .section-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin: 42px 0 18px;
    }

    .section-heading h2 {
      margin: 0;
      color: #17181a;
      font-size: clamp(1.55rem, 2.4vw, 2.15rem);
      line-height: 1.08;
      letter-spacing: -.035em;
    }

    .section-heading p {
      max-width: 450px;
      margin: 0;
      color: var(--muted);
      font-size: .9rem;
      text-align: right;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .feature-card {
      position: relative;
      min-height: 218px;
      overflow: hidden;
      padding: 24px 20px 20px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #fff;
      text-decoration: none;
      box-shadow: 0 10px 25px rgba(17, 18, 20, .06);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
      isolation: isolate;
    }

    .feature-card::before {
      content: "";
      position: absolute;
      z-index: -2;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: var(--yellow);
    }

    .feature-card::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background: linear-gradient(135deg, transparent 38%, rgba(254, 180, 0, .07));
    }

    .feature-card:hover,
    .feature-card:focus-visible {
      border-color: var(--yellow);
      box-shadow: 0 16px 30px rgba(17, 18, 20, .12);
      transform: translateY(-4px);
      outline: none;
    }

    .feature-watermark {
      position: absolute;
      z-index: -1;
      right: -18px;
      bottom: -22px;
      width: 132px;
      height: 132px;
      color: var(--yellow);
      opacity: .13;
      transform: rotate(-6deg);
      transition: opacity .22s ease, transform .22s ease;
    }

    .feature-card:hover .feature-watermark,
    .feature-card:focus-visible .feature-watermark {
      opacity: .21;
      transform: rotate(0deg) scale(1.04);
    }

    .card-number {
      color: #a0a1a4;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .feature-card h3 {
      max-width: 160px;
      margin: 17px 0 8px;
      font-size: 1.08rem;
      line-height: 1.24;
    }

    .feature-card p {
      max-width: 185px;
      margin: 0;
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.55;
    }

    .feature-link {
      display: inline-block;
      margin-top: 18px;
      color: #151515;
      font-size: .76rem;
      font-weight: 700;
      border-bottom: 2px solid var(--yellow);
    }

    .gallery-heading {
      align-items: center;
    }

    .gallery-title-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .gallery-title-icon {
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      border-radius: 50%;
      background: var(--yellow);
      color: #111;
      transform: rotate(-7deg);
    }

    .gallery-title-icon svg,
    .gallery-title-icon img {
      width: 25px;
      height: 22px;
    }

    .gallery-title-icon img {
      object-fit: contain;
      filter: brightness(0);
    }

    .text-link {
      color: #242529;
      font-size: .84rem;
      font-weight: 700;
      text-underline-offset: 4px;
      text-decoration-thickness: 2px;
      text-decoration-color: var(--yellow);
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .gallery-card {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      border-radius: 14px;
      background: #1b1c1f;
      isolation: isolate;
    }

    .gallery-card::before {
      content: "";
      position: absolute;
      z-index: -2;
      inset: 0;
      background-image: url("../images/banner-d-rated.png");
      background-repeat: no-repeat;
      background-size: auto 100%;
      filter: grayscale(1) contrast(1.08);
      transform: scale(1.28);
      transition: transform .45s ease, filter .45s ease;
    }

    .gallery-card:nth-child(1)::before { background-position: 10% center; }
    .gallery-card:nth-child(2)::before { background-position: 36% center; }
    .gallery-card:nth-child(3)::before { background-position: 66% center; }
    .gallery-card:nth-child(4)::before { background-position: 92% center; }

    .gallery-card::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .88));
    }

    .gallery-card:hover::before,
    .gallery-card:focus-within::before {
      filter: grayscale(.15) contrast(1.04);
      transform: scale(1.36);
    }

    .gallery-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      padding: 5px 8px;
      border-radius: 7px;
      background: var(--yellow);
      color: #101010;
      font-size: .65rem;
      font-weight: 700;
      text-transform: uppercase;
    }

    .gallery-meta {
      position: absolute;
      right: 14px;
      bottom: 13px;
      left: 14px;
      color: #fff;
    }

    .gallery-meta strong {
      display: block;
      font-size: .86rem;
    }

    .gallery-meta span {
      color: #c7c7c7;
      font-size: .68rem;
    }

    .knowledge-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 28px;
      margin-top: 44px;
      padding: 30px 32px;
      border: 1px solid #34363b;
      border-radius: var(--radius);
      background: #202227;
      color: #fff;
      box-shadow: 0 14px 30px rgba(17, 18, 20, .12);
    }

    .knowledge-card h2 {
      margin: 0 0 7px;
      font-size: 1.48rem;
      line-height: 1.2;
    }

    .knowledge-card p {
      max-width: 650px;
      margin: 0;
      color: #c8c9cc;
      font-size: .88rem;
    }

    .knowledge-card .button {
      white-space: nowrap;
    }

    .page-footer {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin-top: 42px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
      color: #77797d;
      font-size: .72rem;
    }

    dialog {
      width: min(760px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      margin: auto;
      padding: 0;
      overflow: hidden;
      border: 0;
      border-radius: 20px;
      background: #fff;
      color: var(--ink);
      box-shadow: 0 30px 100px rgba(0, 0, 0, .55);
    }

    dialog::backdrop {
      background: rgba(4, 5, 6, .78);
      backdrop-filter: blur(6px);
    }

    .dialog-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(220px, .75fr);
      min-height: 440px;
    }

    .dialog-form {
      padding: 38px;
    }

    .dialog-form h2 {
      margin: 0;
      font-size: 1.85rem;
      line-height: 1.1;
    }

    .dialog-form > p {
      margin: 9px 0 25px;
      color: var(--muted);
      font-size: .84rem;
    }

    .dialog-note {
      padding: 9px 11px;
      border-left: 3px solid var(--yellow);
      background: #fff8e5;
      color: #585047;
      font-size: .72rem;
    }

    .field {
      display: grid;
      gap: 6px;
      margin-top: 16px;
    }

    .field label {
      font-size: .76rem;
      font-weight: 700;
    }

    .field input {
      width: 100%;
      min-height: 48px;
      padding: 10px 12px;
      border: 1px solid #c9c9c6;
      border-radius: 9px;
      background: #fff;
      color: #111;
    }

    .field input:focus {
      border-color: #9a6d00;
      outline: 3px solid rgba(254, 180, 0, .25);
    }

    .check-row {
      display: flex;
      align-items: start;
      gap: 9px;
      margin: 16px 0;
      color: #55575b;
      font-size: .74rem;
    }

    .check-row input {
      width: 17px;
      height: 17px;
      margin-top: 2px;
      accent-color: var(--yellow);
    }

    .form-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 22px;
    }

    .form-actions .button {
      border: 0;
    }

    .quiet-link {
      border: 0;
      background: transparent;
      color: #55575b;
      cursor: pointer;
      font-size: .74rem;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .dialog-visual {
      position: relative;
      overflow: hidden;
      min-height: 440px;
      background: linear-gradient(180deg, #24272c 0%, #121316 100%);
      color: #fff;
      text-align: center;
    }

    .dialog-dude {
      position: absolute;
      z-index: 1;
      left: 50%;
      max-width: none;
      object-fit: contain;
      object-position: bottom;
      filter: drop-shadow(0 15px 18px rgba(0, 0, 0, .42));
      transform: translateX(-50%);
    }

    .dialog-dude.bouncer {
      bottom: -72px;
      width: 92%;
    }

    .dialog-dude.secretary {
      bottom: -122px;
      width: 91%;
    }

    .dialog-caption {
      position: absolute;
      z-index: 3;
      right: 15px;
      bottom: 15px;
      left: 15px;
      padding: 10px 12px;
      border-left: 3px solid var(--yellow);
      background: rgba(10, 11, 13, .86);
      text-align: left;
    }

    .dialog-caption strong {
      display: block;
      color: var(--yellow);
      font-size: .82rem;
    }

    .dialog-caption span {
      display: block;
      margin-top: 2px;
      color: #bfc1c5;
      font-size: .67rem;
    }

    .dialog-close {
      position: absolute;
      z-index: 5;
      top: 14px;
      right: 14px;
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, .1);
      color: #fff;
      cursor: pointer;
      font-size: 1.35rem;
    }

    .dialog-close:hover,
    .dialog-close:focus-visible {
      background: var(--yellow);
      color: #111;
      outline: none;
    }

    .toast {
      position: absolute;
      z-index: 12;
      top: 18px;
      right: 18px;
      width: min(390px, calc(100% - 36px));
      padding: 15px 17px;
      border-left: 5px solid var(--yellow);
      border-radius: 10px;
      background: #111317;
      color: #fff;
      box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
      font-size: .78rem;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-12px);
      transition: opacity .25s ease, transform .25s ease;
    }

    .toast.success { border-left-color: #36b978; }
    .toast.error { border-left-color: #ed4770; }
    .toast.warning { border-left-color: var(--yellow); }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 1100px) {
      :root {
        --rail-width: 220px;
      }

      .site-shell {
        width: calc(100vw - 24px);
        height: calc(100vh - 24px);
        height: calc(100dvh - 24px);
        margin: 12px auto;
      }

      .masthead {
        height: 134px;
      }

      .workspace {
        height: calc(100% - 192px);
      }

      .desktop-dude {
        right: -20px;
        bottom: 0;
        width: auto;
        height: min(62%, 405px);
      }

      .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .feature-card {
        min-height: 190px;
      }

      .nav-links a,
      .nav-action {
        padding-inline: 9px;
        font-size: .78rem;
      }

      .language-switch {
        padding-inline: 7px;
      }
    }

    @media (max-width: 820px) {
      body {
        background-color: #1d1f23;
      }

      .site-shell {
        width: 100%;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
      }

      .masthead {
        grid-template-columns: 142px 1fr;
        height: 100px;
      }

      .banner-photo {
        object-position: 55% center;
      }

      .main-nav {
        position: sticky;
        top: 0;
        min-height: 58px;
        padding: 0 12px;
      }

      .nav-toggle {
        display: inline-flex;
      }

      .nav-links {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        padding: 12px;
        border-bottom: 3px solid var(--yellow);
        background: #111316;
        box-shadow: 0 18px 30px rgba(0, 0, 0, .28);
      }

      .nav-links.open {
        display: grid;
      }

      .nav-links a {
        justify-content: flex-start;
        padding-inline: 13px;
        font-size: .88rem;
      }

      .nav-action.login span {
        display: none;
      }

      .nav-action.login svg {
        margin: 0;
      }

      .language-switch {
        margin-left: auto;
        padding: 0 5px;
        border-right: 0;
      }

      .lang-button {
        width: 34px;
      }

      .nav-action.signup {
        padding-inline: 12px;
        font-size: .72rem;
      }

      .workspace {
        display: block;
        height: auto;
        overflow: visible;
      }

      .side-rail {
        display: none;
      }

      .content-panel {
        overflow: visible;
      }

      .content-wrap {
        padding: 24px 18px 36px;
      }

      .hero {
        grid-template-columns: 1fr;
        min-height: 390px;
        align-items: start;
      }

      .hero-copy {
        position: relative;
        z-index: 2;
        max-width: 75%;
        padding: 30px 0 32px 28px;
      }

      .hero-copy p {
        max-width: 480px;
      }

      .member-card {
        position: absolute;
        right: 16px;
        bottom: 18px;
        left: 24px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: auto;
        margin: 0;
        padding: 12px 15px;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 11px;
        background: rgba(11, 12, 14, .84);
        backdrop-filter: blur(5px);
      }

      .member-card strong {
        font-size: 1.5rem;
      }

      .member-card span {
        margin: 0;
        font-size: .76rem;
      }

      .member-card small {
        display: none;
      }

      .mobile-dude {
        position: absolute;
        z-index: 1;
        right: -15px;
        bottom: 0;
        display: block;
        width: 225px;
        max-height: 86%;
        object-fit: contain;
        object-position: bottom;
        opacity: .92;
        filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .55));
      }

      .section-heading {
        align-items: start;
        flex-direction: column;
        gap: 7px;
      }

      .section-heading p {
        text-align: left;
      }

      .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .knowledge-card {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    @media (max-width: 560px) {
      .masthead {
        grid-template-columns: 112px 1fr;
        height: 82px;
      }

      .main-nav {
        min-height: 56px;
      }

      .hero {
        min-height: 485px;
      }

      .hero-copy {
        max-width: 100%;
        padding: 27px 24px 0;
      }

      .hero h1 {
        max-width: 330px;
        font-size: 2.25rem;
      }

      .hero p {
        max-width: 330px;
        font-size: .88rem;
      }

      .hero-actions {
        max-width: 230px;
      }

      .mobile-dude {
        right: -24px;
        bottom: 31px;
        width: 215px;
        max-height: 57%;
      }

      .member-card {
        right: 13px;
        bottom: 12px;
        left: 13px;
      }

      .feature-grid {
        grid-template-columns: 1fr;
      }

      .feature-card {
        min-height: 178px;
      }

      .gallery-title-wrap {
        align-items: flex-start;
      }

      .gallery-title-icon {
        flex: 0 0 auto;
      }

      .knowledge-card {
        padding: 25px 23px;
      }

      .page-footer {
        flex-direction: column;
        gap: 5px;
      }

      .dialog-grid {
        display: flex;
        flex-direction: column;
      }

      .dialog-form {
        order: 2;
        padding: 30px 24px;
      }

      .dialog-visual {
        order: 1;
        display: block;
        min-height: 178px;
      }

      .dialog-dude.bouncer {
        bottom: -89px;
        width: 155px;
      }

      .dialog-dude.secretary {
        bottom: -136px;
        width: 154px;
      }

      .dialog-caption {
        right: 55%;
        bottom: 18px;
        left: 18px;
      }

      .dialog-close {
        background: #202227;
      }
    }

    @media (max-width: 430px) {
      .signup-full {
        display: none;
      }

      .signup-short {
        display: inline;
      }

      .nav-action.signup {
        padding-inline: 10px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }

/* Dicktracy 3.0 application additions */
.side-rail {
  border-right: 1px dotted rgba(255, 255, 255, .68);
}

.desktop-dude {
  right: -36px;
  bottom: 10px;
  height: min(74%, 520px);
  pointer-events: none;
  user-select: none;
}

.nav-member-name {
  margin-left: 9px;
  max-width: 135px;
  overflow: hidden;
  color: var(--yellow);
  font-size: .76rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-form { display: inline-flex; margin: 0; }
.icon-link { padding-inline: 10px !important; }
.icon-link svg { width: 18px; height: 18px; }
.icon-link img { display:block; width:20px; height:20px; object-fit:contain; filter:invert(1); transition:filter .2s ease,transform .2s ease; }
.icon-link:hover img,.icon-link:focus-visible img { filter:brightness(0) saturate(100%) invert(77%) sepia(77%) saturate(2376%) hue-rotate(358deg) brightness(102%) contrast(105%); transform:translateY(-1px); }
.topbar-mail { position:relative; }
.topbar-mail-count { position:absolute; top:-4px; right:-6px; display:grid; min-width:17px; height:17px; padding:0 3px; place-items:center; border-radius:12px; background:#ff0200; color:#fff; font-size:10px; line-height:1; }

.content-wrap:has(.contact-hero) { display:flex; flex-direction:column; height:100%; padding-top:20px; padding-bottom:20px; }
.contact-panel { display:flex; flex:1 1 auto; min-height:0; width:100%; max-width:none; margin:14px 0 0; padding:clamp(18px,2.2vw,26px); background:#f6f5f2; border:1px solid #d7d5ce; border-radius:14px; box-shadow:0 12px 24px rgba(0,0,0,.1); }
.contact-panel form { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; flex:1; min-height:0; gap:12px; }
.contact-panel label { display:grid; gap:6px; color:#272a2d; font-weight:700; font-size:.82rem; }
.contact-panel input,.contact-panel textarea { box-sizing:border-box; width:100%; min-height:43px; padding:10px 12px; border:1px solid #bfc2c3; border-radius:8px; background:#fff; font:inherit; }
.contact-panel .contact-message-field { grid-template-rows:auto minmax(0,1fr); min-height:0; }
.contact-panel textarea { height:100%; min-height:90px; resize:vertical; }
.contact-panel input:focus,.contact-panel textarea:focus { border-color:#feb400; outline:3px solid rgba(254,180,0,.2); }
.contact-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.contact-panel .button { justify-self:start; }
.contact-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:820px){
  .content-wrap:has(.contact-hero) { height:auto; min-height:0; padding-top:18px; padding-bottom:20px; }
  .contact-panel { display:block; flex:none; }
  .contact-panel form { display:grid; grid-template-rows:none; }
  .contact-panel textarea { height:auto; min-height:170px; }
}
@media(max-width:620px){.contact-fields{grid-template-columns:1fr}}

.flash-stack {
  display:grid;
  gap: 8px;
  margin-bottom:18px;
}

.banner .flash-stack { position:absolute; z-index:11; top:18px; right:18px; width:min(430px,calc(100% - 36px)); margin:0; }

.flash {
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  padding: 12px 12px 12px 14px;
  border: 1px solid #d6d7d9;
  border-left: 4px solid var(--yellow);
  border-radius: 9px;
  background: #fff;
  color: #292b2f;
  font-size: .84rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  transition:opacity .24s ease,transform .24s ease;
}

.flash button { display:grid; width:24px; height:24px; flex:0 0 24px; place-items:center; padding:0; border:0; border-radius:50%; background:#ececea; color:#292b2f; cursor:pointer; font-size:1rem; line-height:1; }
.banner .flash { border-color:rgba(255,255,255,.2); background:rgba(17,19,23,.96); color:#fff; }
.banner .flash button { background:rgba(255,255,255,.1); color:#fff; }
.flash.leaving { opacity:0; transform:translateY(-10px); }

.flash.success { border-left-color: #2e9b61; }
.flash.error { border-left-color: #ed4770; }
.flash.warning { border-left-color: var(--yellow); }

.home-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 42px;
}

.poll-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 17px;
  background: #16181c;
  color: #fff;
  box-shadow: 0 16px 36px rgba(10, 11, 13, .16);
  isolation: isolate;
}

.poll-card::after {
  content: "?";
  position: absolute;
  z-index: -1;
  right: -10px;
  bottom: -55px;
  color: var(--yellow);
  font-size: 15rem;
  font-weight: 900;
  line-height: 1;
  opacity: .07;
  transform: rotate(8deg);
}

.poll-card h2 { margin: 0; color: var(--yellow); font-size: 1.45rem; }
.poll-question { margin: 8px 0 18px; font-weight: 400; line-height: 1.38; }
.poll-options { display: grid; gap: 8px; margin: 0 0 16px; }
.poll-option {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #383b41;
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  font-size: .82rem;
  transition: border-color .2s ease, background-color .2s ease;
}
.poll-option:hover { border-color: var(--yellow); background: rgba(254, 180, 0, .08); }
.poll-option input { accent-color: var(--yellow); }
.poll-results { display: grid; gap: 11px; margin-top: 18px; }
.poll-result-label { display: flex; justify-content: space-between; gap: 12px; font-size: .76rem; }
.poll-result-track { height: 8px; overflow: hidden; border-radius: 99px; background: #34373c; }
.poll-result-bar { height: 100%; border-radius: inherit; background: var(--yellow); }
.poll-total { margin: 14px 0 0; color: #999da4; font-size: .7rem; }

.knowledge-card.compact { margin: 0; grid-template-columns: 1fr; align-content: space-between; }
.home-lower-grid > :only-child { grid-column: 1 / -1; }
.knowledge-card.compact .button { justify-self: start; }

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 24px clamp(22px, 3.5vw, 34px);
  border-radius: 15px;
  background: linear-gradient(115deg, #121418, #22252b);
  color: #fff;
  box-shadow: 0 11px 26px rgba(10, 11, 13, .13);
}
.page-hero::after {
  content: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero .eyebrow { margin-bottom: 7px; font-size: .66rem; }
.page-hero .eyebrow::before { width: 20px; height: 2px; }
.page-hero h1 { max-width: 650px; margin: 0; font-size: clamp(1.45rem, 2.5vw, 1.85rem); line-height: 1.08; }
.page-hero p { max-width: 690px; margin: 9px 0 0; color: #c7c9cd; font-size: .82rem; line-height: 1.5; }
.content-page-hero { isolation: isolate; }
.content-page-hero .page-hero-copy { position: relative; z-index: 3; }
.content-page-hero.has-page-header-art { display: flex; min-height: 170px; align-items: center; overflow: visible; }
.content-page-hero.has-page-header-art .page-hero-copy { width: 100%; }
.content-page-hero.page-header-size-small .page-hero-copy { max-width: 78%; }
.content-page-hero.page-header-size-normal .page-hero-copy { max-width: 70%; }
.content-page-hero.page-header-size-large { margin-top: 0; }
.content-page-hero.page-header-size-large .page-hero-copy { max-width: 63%; }
.page-header-art {
  position: absolute !important;
  z-index: 2 !important;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: 45%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(-5px 8px 9px rgba(0,0,0,.28));
}
.page-header-size-small .page-header-art { height: 155px; max-width: 36%; }
.page-header-size-normal .page-header-art { height: 205px; }
.page-header-size-large .page-header-art { height: 250px; max-width: 50%; }
.page-hero.club-welcome .token-counter { width: 92px; border-width: 6px; }
.page-hero.club-welcome .token-counter strong { font-size: 1.6rem; }
.page-body { padding: 22px 6px; }
.page-body-spacer { padding: 8px 6px; }
.page-body h2 { margin-top: 30px; }
.page-body p { color: #55585e; }
.page-body.wysiwyg-content a[href] {
  padding: 1px 3px;
  border-radius: 4px;
  background: transparent;
  color: #694800;
  font-weight: 400;
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.page-body.wysiwyg-content li::marker { color: #694800; }
.page-body.wysiwyg-content a[href]:hover {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(136, 89, 0, .17);
}
.page-body.wysiwyg-content a[href]:focus-visible {
  background: var(--yellow);
  color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .page-body.wysiwyg-content a[href] { transition: none; }
}

.module-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 25px;
}
.module-preview {
  min-height: 160px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.module-preview strong { display: block; margin-bottom: 7px; }
.module-preview span { color: var(--muted); font-size: .8rem; }

.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr);
  min-height: 490px;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(10, 11, 13, .16);
}
.auth-copy { padding: clamp(28px, 5vw, 54px); }
.auth-copy h1 { margin: 0 0 8px; font-size: 2.2rem; line-height: 1.05; }
.auth-copy > p { margin: 0 0 25px; color: var(--muted); }
.auth-visual { position: relative; overflow: hidden; min-height: 490px; background: linear-gradient(155deg, #1e2126, #090a0b); }
.auth-visual img { position: absolute; right: 50%; bottom: -9%; height: 105%; max-width: none; transform: translateX(50%); object-fit: contain; object-position: bottom; }
.auth-visual .secretary { bottom: -18%; height: 116%; }

.form-grid { display: grid; gap: 15px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field label { display: block; margin-bottom: 5px; color: #36383c; font-size: .76rem; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cfd0d2;
  border-radius: 9px;
  background: #fff;
  color: #161719;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--yellow); outline: 3px solid rgba(254, 180, 0, .17); }
.check-row { display: flex; gap: 9px; align-items: flex-start; color: #55585d; font-size: .76rem; }
.check-row input { margin-top: 3px; accent-color: var(--yellow); }

.club-welcome { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.token-counter { display: grid; width: 120px; aspect-ratio: 1; place-items: center; border: 8px solid #e5e5e2; border-top-color: var(--yellow); border-radius: 50%; background: #fff; text-align: center; box-shadow: 0 10px 28px rgba(0,0,0,.09); }
.token-counter strong { display: block; font-size: 2rem; line-height: 1; }
.token-counter span { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; }

.games-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 26px; min-height: 160px; }
.games-hero .games-hero-copy { min-width: 0; }
.games-hero .eyebrow { color: var(--yellow); }
.games-hero h1 { max-width: none; }
.games-hero p:last-child { max-width: 640px; color: #e1e2e4; }
.games-token-counter { --games-progress: 0deg; width: 100px; aspect-ratio: 1; display: grid; place-items: center; padding: 7px; border-radius: 50%; background: conic-gradient(var(--yellow) 0deg var(--games-progress), #e1e2e2 var(--games-progress) 360deg); box-shadow: 0 10px 28px rgba(0, 0, 0, .15); }
.games-token-counter-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 50%; background: #fff; color: #1d2025; }
.games-token-counter strong { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.games-token-counter span { margin-top: 3px; color: #61656c; font-size: .55rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.games-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; margin-top: 30px; }
.games-original-page { position:relative; min-height:100%; }
.games-original-page.has-finale .games-original-content { filter:blur(5px); opacity:.38; pointer-events:none; user-select:none; }
.games-finale { position:absolute; z-index:10; inset:0; display:flex; align-items:flex-start; justify-content:center; min-height:100%; padding:38px 0 30px; border-radius:14px; background:rgba(255,255,255,.12); }
.games-finale-card { position:relative; width:min(100%,960px); min-height:285px; border-radius:17px; background:#1c1f23; color:#fff; box-shadow:0 18px 42px rgba(0,0,0,.22); }
.games-finale-medals { position:absolute; z-index:1; top:0; left:8%; display:flex; width:43%; height:140px; align-items:flex-start; pointer-events:none; clip-path:inset(0 -12px -12px -12px); }
.games-finale-medals::after { content:""; position:absolute; z-index:2; top:0; left:0; right:0; height:3px; background:#1c1f23; }
.games-finale-medals img { width:22%; max-width:86px; height:auto; flex:none; margin-top:-20px; margin-left:-2.5%; filter:drop-shadow(0 3px 3px rgba(0,0,0,.22)); }
.games-finale-medals img:first-child { margin-left:0; }
.games-finale-copy { position:relative; z-index:3; width:62%; padding:145px 20px 24px 8%; text-align:center; }
.games-finale-copy > p { max-width:540px; margin:0 auto 30px; color:#fff; font-size:.83rem; line-height:1.32; }
.games-finale-copy form { margin:0; }
.games-finale-copy .button { min-width:min(100%,340px); max-width:100%; white-space:normal; text-align:center; cursor:pointer; }
.games-finale-tracy { position:absolute; z-index:2; right:2%; bottom:0; width:34%; height:calc(100% + 28px); pointer-events:none; }
.games-finale-tracy-art { position:absolute; right:0; bottom:0; width:auto; max-width:none; height:100%; object-fit:contain; object-position:bottom right; }
.content-panel:has(.games-center-panel) { overflow:hidden; }
.content-wrap:has(.games-center-panel) { display:flex; height:100%; min-height:0; flex-direction:column; padding-top:20px; padding-bottom:20px; }
.games-tests-hero { flex:none; margin-bottom:14px; }
.games-center-panel { flex:1 1 auto; min-height:0; overflow-y:auto; padding:20px; border:1px solid #d7d5ce; border-radius:15px; background:#f6f5f2; box-shadow:0 12px 24px rgba(0,0,0,.1); scrollbar-color:var(--yellow) #e6e4df; }
.games-tests-section { margin:0 0 26px; }
.games-tests-section:last-child { margin-bottom:0; }
.games-tests-heading { margin:0 0 12px; }
.games-tests-heading h2 { margin:0; font-size:1.05rem; }
.games-tests-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); align-content:start; gap:14px; }
.games-tests-card,.games-tests-card--ready.game-card { display:flex; width:100%; height:auto; aspect-ratio:1; min-height:145px; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px 10px; border:1px solid #d8d6d0; border-radius:14px; background:#fff; color:#24272c; box-shadow:0 5px 11px rgba(0,0,0,.055); text-align:center; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease; }
.games-tests-card:hover,.games-tests-card:focus-visible { transform:translateY(-4px); border-color:#feb400; background:#fffdf6; box-shadow:0 11px 18px rgba(0,0,0,.14); outline:none; }
.games-tests-card--ready { cursor:pointer; }
.games-tests-card > img { display:block; width:86px; height:86px; object-fit:contain; transition:transform .22s ease; }
.games-tests-card:hover > img,.games-tests-card:focus-visible > img { transform:scale(1.09) rotate(-3deg); }
.games-tests-card-mark { display:grid; width:63px; height:63px; place-items:center; border-radius:14px; background:#f5f2e8; color:#98710c; font-size:1.9rem; font-weight:700; }
.games-tests-card strong { max-width:100%; font-size:.78rem; line-height:1.18; }
.games-tests-card .screen-warning { margin:0; font-size:.6rem; }
.games-tests-coming { display:flex; flex-wrap:wrap; gap:9px; }
.games-tests-coming span { padding:9px 12px; border:1px dashed #c6c7c8; border-radius:9px; background:#f5f5f1; color:#666a71; font-size:.74rem; }
@media(max-width:760px) { .games-finale-copy { width:68%; padding-left:5%; padding-top:130px; } .games-finale-medals { left:5%; width:51%; } .games-finale-tracy { right:0; width:33%; } }
@media(max-width:560px) { .games-finale { padding-top:26px; } .games-finale-card { min-height:375px; } .games-finale-medals { top:0; left:5%; width:67%; height:115px; } .games-finale-copy { width:100%; padding:105px 18px 25px; } .games-finale-copy > p { position:relative; z-index:4; width:73%; margin-left:0; text-align:left; } .games-finale-tracy { right:-2%; bottom:50px; width:40%; height:230px; } .games-finale-copy form { margin-top:32px; } }
@media(max-width:460px) { .games-tests-grid { grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:9px; } .games-tests-card,.games-tests-card--ready.game-card { width:100%; height:auto; min-height:112px; padding:8px; } .games-tests-card > img,.games-tests-card-mark { width:68px; height:68px; } .games-finale-copy > p { width:68%; font-size:.77rem; } .games-finale-tracy { width:42%; height:210px; bottom:56px; } }
@media(max-width:820px) { .content-panel:has(.games-center-panel) { overflow:visible; } .content-wrap:has(.games-center-panel) { height:auto; } .games-center-panel { flex:none; max-height:calc(100dvh - 260px); min-height:340px; } }
@media(prefers-reduced-motion:reduce) { .games-tests-card,.games-tests-card > img { transition:none; } }
.game-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; min-height: 246px; padding: 73px 22px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.game-card.locked { background: #f0f0ee; }
.game-card-icon { position: absolute; z-index: 2; top: -23px; left: 19px; width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .11)); transition: transform .2s ease; }
.game-card:not(.locked):hover .game-card-icon { transform: translateY(-4px) rotate(-5deg); }
.game-card.locked .game-card-icon { opacity: .43; filter: grayscale(.2); }
.game-card-copy { position: relative; z-index: 1; }
.game-card.completed .game-card-copy { padding-right: 56px; }
.game-card h2 { margin: 0 0 8px; font-size: 1.1rem; line-height: 1.25; }
.game-card p { min-height: 58px; margin: 0 0 15px; color: #505660; font-size: .78rem; line-height: 1.5; }
.game-card.locked h2, .game-card.locked p { color: #6c7179; }
.game-card .button { position: relative; z-index: 2; align-self: center; margin-top: auto; }
.game-card .game-replay { min-height: 43px; padding: 9px 16px; border: 1px solid #c1c4c4; border-radius: 5px; background: transparent; color: #24272c; font: 700 14px Verdana, sans-serif; }
.game-card .game-replay:hover, .game-card .game-replay:focus-visible { border-color: #aeb1b3; background: #f5f4ee; }
.game-earned-token { position: absolute; z-index: 2; top: 0; right: 12px; width: 68px; height: auto; pointer-events: none; filter: drop-shadow(0 5px 7px rgba(0,0,0,.17)); }
.game-card-watermark-frame { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.game-card-watermark { position: absolute; z-index: 0; left: -70px; bottom: -55px; width: calc(100% + 100px); height: calc(100% + 100px); object-fit: contain; opacity: .075; pointer-events: none; }
.game-accessible-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-warning { display: none; position: relative; z-index: 2; margin-top: 9px; color: #9e2c51; font-size: .7rem; }
.game-card.viewport-blocked .screen-warning { display: block; }
.game-card.viewport-blocked .game-launch { opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .game-card-icon { transition: none; } .game-card:not(.locked):hover .game-card-icon { transform: none; } }

.settings-panel { display: grid; grid-template-columns: 220px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.settings-nav { padding: 16px; background: #f0f0ed; }
.settings-nav button { width: 100%; padding: 12px; border: 0; border-bottom: 1px solid #d8d8d4; background: transparent; text-align: left; font-weight: 700; }
.settings-nav button.active { color: #bd0647; }
.settings-content { padding: 28px; }
.visual-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.visual-stage { min-height: 130px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.visual-stage.locked { opacity: .4; filter: grayscale(1); }
.visual-stage strong { display: block; margin-top: 10px; font-size: .75rem; }

@media (max-width: 900px) {
  .home-lower-grid { grid-template-columns: 1fr; }
  .module-preview-grid, .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-page { grid-template-columns: 1fr 230px; }
}

@media (max-width: 820px) {
  .content-page-hero.has-page-header-art { min-height: 155px; }
  .content-page-hero.page-header-size-large { margin-top: 0; }
  .page-header-size-small .page-header-art { height: 135px; }
  .page-header-size-normal .page-header-art { height: 170px; }
  .page-header-size-large .page-header-art { height: 205px; }
}

@media (max-width: 720px) {
  .nav-member-name { display: none; }
  .home-lower-grid { margin-top: 28px; }
  .module-preview-grid, .games-grid { grid-template-columns: 1fr; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-visual { min-height: 220px; order: -1; }
  .auth-visual img { bottom: -58%; height: 155%; }
  .auth-visual .secretary { bottom: -80%; height: 180%; }
  .settings-panel { grid-template-columns: 1fr; }
  .settings-nav { display: flex; overflow-x: auto; }
  .settings-nav button { min-width: 145px; border-right: 1px solid #d8d8d4; border-bottom: 0; }
  .visual-stages { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .content-page-hero.has-page-header-art { min-height: 0; }
  .content-page-hero.page-header-size-large { margin-top: 0; }
  .content-page-hero.has-page-header-art .page-hero-copy { max-width: none; }
  .content-page-hero .page-header-art { display: none; }
  .poll-card { padding: 23px; }
  .auth-copy { padding: 27px 22px; }
  .form-row { grid-template-columns: 1fr; }
  .club-welcome { grid-template-columns: 1fr; }
  .token-counter { width: 98px; }
}

/* First-look refinement */
.desktop-dude {
  right: -22px;
  bottom: -1px;
  height: min(67%, 460px);
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.feature-link {
  margin-top: auto;
  padding-top: 18px;
  white-space: nowrap;
}

.gallery-card {
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}

.gallery-card.has-photo {
  cursor: zoom-in;
}

.gallery-card.has-photo::before,
.gallery-card.placeholder::before {
  display: none;
}

.gallery-thumb {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transform: scale(1.01);
  transition: filter .4s ease, transform .4s ease;
}

.gallery-card.has-photo:hover .gallery-thumb,
.gallery-card.has-photo:focus-visible .gallery-thumb {
  filter: grayscale(1) contrast(1.14);
  transform: scale(1.06);
}

.gallery-card.has-photo:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.gallery-card.placeholder {
  background:
    linear-gradient(150deg, rgba(254, 180, 0, .09), transparent 48%),
    repeating-linear-gradient(135deg, #181a1e 0 16px, #1e2025 16px 32px);
}

.gallery-placeholder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(254, 180, 0, .25);
  font-size: 5rem;
  font-weight: 300;
  line-height: 1;
  transform: translate(-50%, -58%);
}

.gallery-upload-button {
  width: 100%;
  margin-top: 24px;
  font-size: .92rem;
}

.photo-dialog {
  width: fit-content;
  max-width: calc(100vw - 34px);
  max-height: calc(100vh - 34px);
  padding: 0;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 18px;
  background: #0c0d0f;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .7);
}

.photo-dialog figure {
  position: relative;
  display: grid;
  width: fit-content;
  min-width: min(300px, calc(100vw - 38px));
  max-width: calc(100vw - 38px);
  margin: 0;
  overflow: hidden;
}

.photo-dialog-media {
  display: flex;
  width: var(--gallery-media-width, auto);
  max-width: calc(100vw - 38px);
  align-items: center;
  justify-content: center;
  background: #050506;
}

.photo-dialog [hidden] { display: none !important; }

.photo-dialog figure img,
.photo-dialog figure video {
  display: block;
  width: var(--gallery-media-width, auto);
  height: var(--gallery-media-height, auto);
  max-width: calc(100vw - 38px);
  max-height: calc(100vh - 170px);
  object-fit: contain;
}

.photo-dialog figure video { max-width: min(1000px, calc(100vw - 38px)); }

.photo-dialog figcaption {
  position: static;
  display: grid;
  gap: 7px;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 64px 14px 18px;
  background: #0c0d0f;
  color: #fff;
  font-size: .78rem;
}

.photo-dialog figcaption > strong { padding-right: 10px; font-size: .82rem; }
.photo-dialog-caption { max-width: 720px; color: #d3d4d6; font-size: .67rem; line-height: 1.45; }
.photo-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.photo-rating-label { color: #d3d4d6; font-size: .66rem; font-weight: 700; }
.rating-stars { display: flex; gap: 2px; }
.rating-stars button { padding: 0; border: 0; background: transparent; color: #797b80; cursor: pointer; font-size: 1.42rem; line-height: 1; transition: color .15s ease, transform .15s ease; }
.rating-stars button:hover,.rating-stars button:focus-visible,.rating-stars button.selected { color: var(--yellow); transform: translateY(-1px); }
.rating-stars button:disabled { cursor: wait; opacity: .65; }
.rating-summary { color: #d3d4d6; font-size: .63rem; }
.rating-status { flex-basis: 100%; min-height: 1em; color: var(--yellow); font-size: .62rem; }
.rating-login-link { justify-self: start; color: var(--yellow); font-size: .68rem; font-weight: 800; text-underline-offset: 3px; }

dialog:not(.photo-dialog) {
  width: min(820px, calc(100vw - 40px));
  overflow: visible;
  background: transparent;
}

dialog:not(.photo-dialog) .dialog-grid {
  min-height: 480px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .55);
}

.dialog-form {
  position: relative;
  z-index: 3;
  border-radius: 18px 0 0 18px;
  background: #fff;
}

.dialog-visual,
.auth-visual {
  background-color: #15171a;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.login-visual {
  background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .18)), url("../images/login-clubhouse.png");
}

.signup-visual {
  background-image: linear-gradient(rgba(0, 0, 0, .04), rgba(0, 0, 0, .16)), url("../images/signup-office.png");
  background-position: 100% center;
}

.dialog-visual {
  min-height: 480px;
  overflow: hidden;
  border-radius: 0 18px 18px 0;
}

.dialog-dude.bouncer {
  right: 2%;
  bottom: 0;
  left: auto;
  width: 80%;
  transform: none;
  transition: opacity .18s ease, filter .25s ease;
}

.dialog-dude.secretary {
  bottom: 0;
  left: 37%;
  width: 72%;
}

.auth-checking .dialog-dude.bouncer {
  right: 2%;
  bottom: 0;
  width: 80%;
}

.auth-error .dialog-dude.bouncer,
.auth-success .dialog-dude.bouncer {
  right: 2%;
  bottom: 0;
  width: 80%;
}

.auth-hint .dialog-caption {
  border-left-color: var(--yellow);
  background: rgba(18, 16, 10, .92);
}

.dialog-validation-form [aria-invalid="true"] {
  border-color: #d63850;
  outline: 3px solid rgba(214, 56, 80, .17);
}

.auth-error .dialog-caption {
  border-left-color: #d63850;
}

.auth-error .dialog-caption strong {
  color: #ff8092;
}

.auth-success .dialog-caption {
  border-left-color: #36b875;
}

.auth-success .dialog-caption strong {
  color: #68dfa1;
}

.auth-state-form .button:disabled {
  cursor: wait;
  opacity: .76;
  transform: none;
}

.auth-success .auth-state-form .button:disabled {
  background: #36b875;
  opacity: 1;
}

.auth-error .auth-state-form .button:disabled {
  background: #d63850;
  color: #fff;
  cursor: not-allowed;
  opacity: 1;
}

.dialog-caption {
  right: 16px;
  bottom: 16px;
  left: 16px;
  backdrop-filter: blur(4px);
}

.dialog-grid:has(.name-row) {
  min-height: 560px;
}

.dialog-grid:has(.name-row) .dialog-visual {
  min-height: 560px;
}

#signup-dialog {
  width: min(980px, calc(100vw - 40px));
}

#signup-dialog .dialog-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, .72fr);
  min-height: min(650px, calc(100vh - 44px));
}

.dialog-grid > .registration-flow {
  min-width: 0;
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  background: #fff;
}

.registration-step[hidden] { display: none !important; }
.registration-step { min-height: 100%; }
.registration-step .dialog-form { min-height: 0; }
.registration-step .form-grid { gap: 0; }
.registration-step h2 { margin: 0; font-size: 1.7rem; line-height: 1.1; }
.registration-step > .form-grid > p:not(.eyebrow) { margin: 9px 0 13px; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.registration-step .field { margin-top: 12px; }
.registration-step .field input { min-height: 44px; }
.registration-step .field small { color: #787b80; font-size: .62rem; line-height: 1.35; }
.registration-step .check-row { margin: 10px 0; }
.registration-step .form-actions { flex-wrap: wrap; margin-top: 16px; }
.registration-step[data-registration-step="password"] .form-grid > .button[type="submit"] { margin-top: 20px; }
.registration-inline-button { padding: 4px 0; font: inherit; font-size: .68rem; }
.registration-code-fields { display: grid; grid-template-columns: repeat(6, 48px); gap: 8px; justify-content: start; margin: 22px 0 13px; }
.registration-code-fields input { width: 48px; height: 55px; padding: 4px; border: 1px solid #c7c8c5; border-radius: 9px; background: #f8f8f5; color: #17191d; font-size: 1.35rem; font-weight: 900; text-align: center; }
.registration-code-fields input:focus { border-color: #9a6d00; outline: 3px solid rgba(254,180,0,.25); background: #fff; }
.registration-mail-hint { margin: 0 0 16px !important; color: #76797e; font-size: .67rem !important; }
.registration-secondary-actions { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: -25px; padding: 0 38px 28px; }
.registration-secondary-actions form { margin: 0; }
.registration-status { min-height: 18px; margin: 12px 0 0 !important; color: #457052; font-size: .66rem !important; font-weight: 800; }
.registration-status.error { color: #b4263d !important; }
.registration-status.success { color: #2c8754 !important; }
.registration-flow button:disabled { cursor: wait; opacity: .65; }
.auth-copy > .registration-flow .registration-step > .form-grid { padding: 0; }
.auth-copy > .registration-flow .registration-secondary-actions { margin-top: 0; padding: 0 0 18px; }

.auth-visual.login-visual img,
.auth-visual.signup-visual img {
  filter: drop-shadow(0 15px 18px rgba(0, 0, 0, .45));
}

.games-preview-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 25px;
  align-items: center;
  overflow: hidden;
  padding: 27px 32px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 85% 25%, rgba(254, 180, 0, .17), transparent 17rem),
    linear-gradient(110deg, #101216, #24272d);
  color: #fff;
  box-shadow: 0 11px 26px rgba(10, 11, 13, .14);
}

.games-preview-hero h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 1.95rem);
  line-height: 1.06;
  letter-spacing: -.04em;
}

.games-preview-hero p:not(.eyebrow) {
  max-width: 650px;
  margin: 10px 0 0;
  color: #c9cbd0;
  font-size: .84rem;
  line-height: 1.5;
}

.games-preview-hero .eyebrow { margin-bottom: 7px; font-size: .66rem; }
.games-preview-hero .eyebrow::before { width: 20px; height: 2px; }
.games-preview-hero .hero-actions { margin-top: 15px; }

.token-preview {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  gap: 8px;
  justify-content: center;
}

.token-preview span {
  display: grid;
  width: 46px;
  aspect-ratio: 1;
  place-items: center;
  border: 4px solid #6e737b;
  border-top-color: var(--yellow);
  border-radius: 50%;
  background: linear-gradient(145deg, #eceeed, #9fa3a5);
  color: #292b2f;
  font-weight: 900;
  font-size: .75rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .27);
}

.token-preview strong {
  grid-column: 1 / -1;
  color: var(--yellow);
  font-size: .75rem;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.games-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.game-teaser {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  min-height: 150px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(17, 18, 20, .06);
}

.game-teaser-number {
  color: var(--yellow);
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
}

.game-teaser h3 {
  margin: 0 0 7px;
  font-size: 1rem;
}

.game-teaser p {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
}

.game-teaser-token {
  position: absolute;
  right: 14px;
  bottom: 11px;
  color: #a0a1a4;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dude-unlock-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
  gap: 30px;
  align-items: center;
  margin-top: 38px;
  padding: 30px 34px;
  border-radius: var(--radius);
  background: #1b1d21;
  color: #fff;
}

.dude-unlock-preview h2 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  line-height: 1.2;
}

.dude-unlock-preview p:not(.eyebrow) {
  margin: 0;
  color: #bfc1c5;
  font-size: .83rem;
}

.unlock-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.unlock-steps span {
  display: grid;
  min-height: 88px;
  align-content: center;
  padding: 10px 6px;
  border: 1px solid #3d4046;
  border-radius: 10px;
  color: #b9bbc0;
  font-size: .63rem;
  text-align: center;
}

.unlock-steps b {
  display: block;
  color: var(--yellow);
  font-size: 1.45rem;
}

@media (max-width: 1100px) {
  .desktop-dude {
    right: -18px;
    bottom: -1px;
    height: min(65%, 395px);
  }
}

@media (max-width: 820px) {
  .games-preview-hero {
    grid-template-columns: 1fr;
  }

  .token-preview {
    justify-self: start;
  }

  .dude-unlock-preview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  dialog:not(.photo-dialog) {
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    border-radius: 20px;
  }

  dialog:not(.photo-dialog) .dialog-grid {
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .dialog-grid > .registration-flow {
    order: 2;
    width: 100%;
    max-height: none;
    overflow: visible;
  }

  #signup-dialog .dialog-visual {
    display: none;
  }

  #signup-dialog .dialog-grid {
    min-height: 0;
  }

  #signup-dialog .dialog-form {
    padding: 28px 22px;
  }

  .registration-code-fields { grid-template-columns: repeat(6, minmax(36px, 1fr)); gap: 5px; }
  .registration-code-fields input { width: 100%; height: 50px; }
  .registration-secondary-actions { margin-top: -18px; padding: 0 22px 24px; }

  .dialog-form {
    order: 2;
    border-radius: 0 0 18px 18px;
  }

  .dialog-visual,
  .dialog-grid:has(.name-row) .dialog-visual {
    order: 1;
    min-height: 230px;
    border-radius: 18px 18px 0 0;
  }

  .dialog-dude.bouncer {
    right: 3%;
    bottom: 0;
    width: clamp(125px, 28%, 140px);
  }

  .dialog-dude.secretary {
    right: 5%;
    bottom: 0;
    left: auto;
    width: clamp(110px, 24%, 120px);
    transform: none;
  }

  .dialog-caption {
    right: 48%;
  }

  .games-teaser-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .games-preview-hero {
    padding: 23px 21px;
  }

  .token-preview {
    grid-template-columns: repeat(3, 44px);
  }

  .token-preview span {
    width: 44px;
  }

  .dude-unlock-preview {
    padding: 26px 22px;
  }

  .unlock-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Foto insturen en openbare galerij */
.upload-page-hero,
.gallery-page-hero {
  background: linear-gradient(118deg, #111318, #25282e);
  color: #fff;
}

.upload-page-hero::after,
.gallery-page-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 26px;
  width: 156px;
  height: 130px;
  background: url('../images/camera-watermark.svg') center / contain no-repeat;
  opacity: .085;
  transform: translateY(-50%);
}

.upload-page-hero > p:not(.eyebrow),
.gallery-page-hero > p:not(.eyebrow) { max-width: min(690px, calc(100% - 145px)); color: #c7c9cd; }
.gallery-page-hero .button { margin-top: 14px; }

.photo-upload-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 265px;
  gap: 24px;
  align-items: start;
  margin-top: 28px;
}

.photo-upload-form { display: grid; gap: 16px; }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.upload-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 16, 18, .055);
}

.upload-step-number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 4px solid #e7e7e3;
  border-top-color: var(--yellow);
  border-radius: 50%;
  font-weight: 900;
}

.upload-step-content h2 { margin: 4px 0 6px; font-size: 1.18rem; }
.upload-step-content > p { margin: 0 0 18px; color: var(--muted); font-size: .78rem; }

.photo-dropzone {
  position: relative;
  display: grid;
  min-height: 270px;
  place-items: center;
  overflow: hidden;
  border: 2px dashed #bbbdbb;
  border-radius: 14px;
  background: #f4f4f1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.photo-dropzone.dragging,
.photo-dropzone:hover { border-color: var(--yellow); background: #fff8df; }
.photo-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone-empty { display: grid; justify-items: center; padding: 28px; text-align: center; }
.dropzone-empty svg { width: 58px; margin-bottom: 12px; color: #929498; }
.dropzone-empty strong { font-size: .92rem; }
.dropzone-empty span { margin-top: 4px; color: var(--muted); font-size: .72rem; }
.upload-photo-preview { width: 100%; max-height: 470px; object-fit: contain; background: #111; }
.selected-photo-line { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--muted); font-size: .7rem; }
.selected-photo-line button { border: 0; background: transparent; color: #8d6500; cursor: pointer; font: inherit; font-weight: 800; text-decoration: underline; }

.input-suffix { position: relative; }
.input-suffix input { padding-right: 46px; }
.input-suffix span { position: absolute; top: 50%; right: 13px; color: var(--muted); font-size: .73rem; transform: translateY(-50%); }
.field small { display: block; margin-top: 5px; color: var(--muted); font-size: .67rem; line-height: 1.45; }

.title-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.title-choice { position: relative; cursor: pointer; }
.title-choice input { position: absolute; opacity: 0; }
.title-choice > span { display: block; min-height: 96px; padding: 15px; border: 1px solid #d4d5d3; border-radius: 11px; background: #fafaf8; }
.title-choice strong { display: block; font-size: .76rem; }
.title-choice small { display: block; margin-top: 4px; color: var(--muted); font-size: .65rem; }
.title-choice input:checked + span { border-color: var(--yellow); background: #fff8df; box-shadow: 0 0 0 2px rgba(254, 180, 0, .2); }
.title-choice input:focus-visible + span { outline: 3px solid rgba(254, 180, 0, .25); }
.title-options { margin-top: 14px; }
.title-options[hidden] { display: none; }
.title-options > p { margin: 0 0 9px; color: var(--muted); font-size: .72rem; }
.title-part-checks { display: flex; flex-wrap: wrap; gap: 7px; }
.title-part-checks label { cursor: pointer; }
.title-part-checks input { position: absolute; opacity: 0; }
.title-part-checks span { display: block; padding: 8px 11px; border: 1px solid #d2d3d1; border-radius: 99px; background: #fff; font-size: .7rem; font-weight: 800; }
.title-part-checks input:checked + span { border-color: var(--yellow); background: var(--yellow); }
.title-live-preview { margin-top: 12px; padding: 11px 13px; border-left: 3px solid var(--yellow); background: #f4f4f1; }
.title-live-preview small { display: block; color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.title-live-preview strong { display: block; margin-top: 3px; font-size: .75rem; }

.upload-consents { display: grid; gap: 9px; margin-top: 18px; }
.upload-consents .check-row { margin: 0; }
.upload-submit { margin-top: 21px; }

.upload-assurance {
  position: sticky;
  top: 22px;
  padding: 24px;
  border-radius: 16px;
  background: #17191d;
  color: #fff;
  box-shadow: 0 16px 35px rgba(12, 13, 15, .18);
}
.assurance-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--yellow); color: #111; font-weight: 900; }
.upload-assurance h2 { margin: 17px 0 13px; font-size: 1.08rem; }
.upload-assurance ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.upload-assurance li { position: relative; padding-left: 19px; color: #d2d4d7; font-size: .73rem; line-height: 1.5; }
.upload-assurance li::before { position: absolute; left: 0; color: var(--yellow); content: "✓"; font-weight: 900; }
.upload-assurance p { margin: 18px 0 0; padding-top: 15px; border-top: 1px solid #393c42; color: #aeb1b6; font-size: .67rem; line-height: 1.55; }

.upload-thanks { max-width: 680px; margin: 40px auto; padding: clamp(32px, 6vw, 62px); border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 18px 48px rgba(12, 13, 15, .12); }
.thanks-check { display: grid; width: 72px; height: 72px; margin: 0 auto 20px; place-items: center; border-radius: 50%; background: var(--yellow); color: #111; font-size: 2rem; font-weight: 900; }
.upload-thanks h1 { margin: 0 0 12px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.upload-thanks > p:not(.eyebrow) { max-width: 520px; margin: 0 auto; color: var(--muted); }
.submission-reference { display: inline-grid; gap: 2px; margin: 24px auto; padding: 11px 18px; border: 1px solid var(--line); border-radius: 10px; background: #f4f4f1; }
.submission-reference span { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.submission-reference strong { font-size: 1rem; }
.upload-thanks .hero-actions { justify-content: center; }
.upload-thanks .button-secondary {
  border-color: #8d9198;
  background: #f4f4f1;
  color: #202227;
}
.upload-thanks .button-secondary:hover,
.upload-thanks .button-secondary:focus-visible {
  border-color: #202227;
  background: #202227;
  color: var(--yellow);
}

.public-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.public-gallery-card { position: relative; min-height: 280px; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: #17191d; color: #fff; cursor: pointer; box-shadow: 0 12px 26px rgba(10, 11, 13, .13); }
.public-gallery-card img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.public-gallery-card:hover img,
.public-gallery-card:focus-visible img { transform: scale(1.035); }
.public-gallery-card:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.public-gallery-meta { position: absolute; right: 0; bottom: 0; left: 0; padding: 34px 15px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .92)); text-align: left; }
.public-gallery-meta strong { display: block; font-size: .78rem; }
.public-gallery-meta small { display: block; margin-top: 3px; color: #c4c6ca; font-size: .62rem; }
.gallery-empty { margin-top: 28px; padding: 48px; border: 1px dashed #bfc0bd; border-radius: 16px; text-align: center; }
.gallery-empty h2 { margin: 0 0 7px; }
.gallery-empty p { margin: 0; color: var(--muted); }

.text-link.light { display:inline-block; margin-top:12px; color:#fff; }
.member-gallery-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:28px; }
.member-gallery-card { display:grid; grid-template-columns:190px minmax(0,1fr); min-height:190px; overflow:hidden; border-radius:16px; background:#1b1d21; color:#fff; text-decoration:none; box-shadow:0 14px 30px rgba(10,11,13,.14); transition:transform .2s ease,box-shadow .2s ease; }
.member-gallery-card:hover,.member-gallery-card:focus-visible { transform:translateY(-3px); box-shadow:0 18px 36px rgba(10,11,13,.22); outline:3px solid var(--yellow); outline-offset:3px; }
.member-gallery-cover { position:relative; display:grid; min-height:190px; place-items:center; overflow:hidden; background:repeating-linear-gradient(135deg,#191b1f 0 16px,#22252a 16px 32px); }
.member-gallery-cover img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.member-gallery-card:hover img { transform:scale(1.04); }
.member-gallery-placeholder { color:rgba(254,180,0,.55); font-size:4rem; }
.member-gallery-type { position:absolute; right:10px; bottom:10px; padding:5px 8px; border-radius:7px; background:var(--yellow); color:#111; font-size:.59rem; font-weight:900; text-transform:uppercase; }
.member-gallery-copy { display:flex; min-width:0; flex-direction:column; padding:21px; }
.member-gallery-copy strong { font-size:1.05rem; }
.member-gallery-copy > span { margin-top:8px; color:#c6c8cc; font-size:.72rem; line-height:1.55; }
.member-gallery-copy small { margin-top:auto; padding-top:15px; color:var(--yellow); font-size:.64rem; font-weight:800; }
.member-media-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-top:28px; }
.member-media-card { position:relative; aspect-ratio:4/5; padding:0; overflow:hidden; border:0; border-radius:14px; background:#16181c; color:#fff; cursor:zoom-in; box-shadow:0 10px 24px rgba(10,11,13,.13); }
.member-media-card img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.member-media-card:hover img,.member-media-card:focus-visible img { transform:scale(1.04); }
.member-media-card:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.member-media-card.is-video { aspect-ratio:16/10; cursor:pointer; background:radial-gradient(circle at center,rgba(254,180,0,.12),transparent 40%),#16181c; }
.member-video-placeholder { display:grid; height:100%; place-items:center; align-content:center; gap:8px; }
.member-video-placeholder span { display:grid; width:58px; height:58px; place-items:center; padding-left:4px; border-radius:50%; background:var(--yellow); color:#111; font-size:1.35rem; }
.member-video-placeholder small { color:#c8c9cc; font-size:.66rem; }
.member-media-copy { position:absolute; right:0; bottom:0; left:0; display:grid; gap:3px; padding:38px 15px 14px; background:linear-gradient(transparent,rgba(0,0,0,.94)); text-align:left; }
.member-media-copy strong { font-size:.76rem; }
.member-media-copy small { color:#c6c8cc; font-size:.62rem; }

@media (max-width: 980px) {
  .photo-upload-layout { grid-template-columns: 1fr; }
  .upload-assurance { position: static; }
  .public-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member-gallery-list { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
  .page-hero { padding: 22px 21px; }
  .page-hero.club-welcome { grid-template-columns: 1fr; gap: 17px; }
  .page-hero.club-welcome .token-counter { width: 82px; }
  .upload-page-hero::after,
  .gallery-page-hero::after { right: 10px; width: 108px; height: 90px; opacity: .06; }
  .upload-page-hero > p:not(.eyebrow),
  .gallery-page-hero > p:not(.eyebrow) { max-width: 100%; }
  .upload-step { grid-template-columns: 1fr; padding: 21px; }
  .title-choice-grid { grid-template-columns: 1fr; }
  .title-choice > span { min-height: 0; }
  .public-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 430px) {
  .public-gallery-grid { grid-template-columns: 1fr; }
  .public-gallery-card,
  .public-gallery-card img { min-height: 330px; }
  .member-gallery-card { grid-template-columns:1fr; }
  .member-gallery-cover { min-height:220px; }
  .member-media-grid { grid-template-columns:1fr; }
}

/* 0.6.0: profielen, galerij-updates en nieuwe homepagebanner */
.hero { grid-template-columns:minmax(0,1fr) 310px; min-height:305px; overflow:visible; }
.hero h1 { font-size:clamp(2rem,3.6vw,2.8rem); }
.member-card { min-width:0; margin-left:0; padding:0; overflow:visible; }
.member-card-copy { position:relative; z-index:2; display:flex; width:145px; min-height:100%; flex-direction:column; justify-content:center; padding:26px 0 26px 20px; }
.member-card-copy strong { color:var(--yellow); font-size:2.15rem; line-height:1; }
.member-card-copy span { margin-top:6px; color:#fff; font-size:.8rem; font-weight:800; line-height:1.05; }
.member-card-copy small { margin-top:14px; color:#aeb1b6; font-size:.69rem; line-height:1.38; }
.hero-secretary { position:absolute; z-index:3; right:-10px; bottom:0; width:190px; max-width:none; filter:drop-shadow(0 9px 9px rgba(0,0,0,.3)); pointer-events:none; }

.settings-nav a { display:block; width:100%; padding:13px 12px; border-bottom:1px solid #d8d8d4; color:#33363b; font-size:.75rem; font-weight:800; text-decoration:none; }
.settings-nav a:hover,.settings-nav a:focus-visible { color:#9b7100; background:rgba(254,180,0,.08); outline:none; }
.settings-nav a.active { border-left:3px solid var(--yellow); background:#fff; color:#17191d; }
.settings-content h2 { margin:0 0 6px; }
.profile-avatar-editor { display:flex; gap:15px; align-items:center; padding:15px; border:1px solid var(--line); border-radius:13px; background:#f7f7f4; }
.profile-avatar-editor p { margin:4px 0 0; color:var(--muted); font-size:.7rem; }
.profile-avatar-preview { display:grid; width:72px; height:72px; flex:0 0 72px; place-items:center; overflow:hidden; border:3px solid #fff; border-radius:50%; background:#202329; color:var(--yellow); font-size:1.4rem; font-weight:900; box-shadow:0 5px 14px rgba(0,0,0,.15); }
.profile-avatar-preview img { width:100%; height:100%; object-fit:cover; }
.profile-switch { display:flex; align-items:center; gap:10px; cursor:pointer; }
.profile-switch input { position:absolute; opacity:0; }
.profile-switch > span { position:relative; width:50px; height:28px; border-radius:99px; background:#aeb0b3; transition:background .2s ease; }
.profile-switch > span::after { position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:#fff; content:""; transition:transform .2s ease; box-shadow:0 2px 5px rgba(0,0,0,.25); }
.profile-switch input:checked + span { background:var(--yellow); }
.profile-switch input:checked + span::after { transform:translateX(22px); }
.profile-switch input:focus-visible + span { outline:3px solid rgba(254,180,0,.3); }
.profile-photo-upload { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-top:18px; padding:16px; border:1px dashed #bfc0bd; border-radius:12px; background:#fafaf8; }
.profile-photo-upload label { display:grid; flex:1; gap:6px; min-width:220px; font-size:.72rem; font-weight:800; }
.profile-photo-upload input[type=file] { font-weight:400; }
.profile-editor-heading { display:flex; gap:20px; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.profile-editor-heading p { margin:5px 0 0; }
.profile-share-links { display:flex; flex-wrap:wrap; gap:7px; }
.profile-share-links a,.profile-share-links button { padding:8px 10px; border:1px solid #cfd0d2; border-radius:8px; background:#fff; color:#6d5200; cursor:pointer; font:inherit; font-size:.67rem; font-weight:800; text-decoration:none; }
.profile-question-form { display:grid; gap:22px; }
.profile-editor-category { display:grid; gap:12px; }
.profile-editor-category > h3 { margin:0; padding-bottom:8px; border-bottom:2px solid var(--yellow); font-size:1rem; }
.profile-question { display:grid; gap:6px; padding:13px; border:1px solid #e0e1df; border-radius:11px; background:#fbfbf9; }
.profile-question > label { font-size:.73rem; font-weight:800; }
.profile-question textarea { width:100%; min-height:78px; padding:10px; border:1px solid #cdcecc; border-radius:8px; resize:vertical; }
.profile-question-photo { display:flex; gap:12px; align-items:center; justify-content:space-between; color:var(--muted); font-size:.65rem; }
.profile-question-photo .text-link { padding:0; border:0; background:transparent; color:#6d5200; cursor:pointer; font-weight:800; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:color .16s ease,text-decoration-color .16s ease; }
.profile-question-photo .text-link:hover,.profile-question-photo .text-link:focus-visible { color:#a66f00; text-decoration-color:currentColor; outline:none; }
.profile-question-uploader[hidden] { display:none; }
.subscription-settings { display:grid; gap:8px; padding:15px; border:1px solid var(--line); border-radius:12px; }
.subscription-settings h3,.subscription-settings p { margin:0; }
.subscription-settings > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #ececea; }
.subscription-settings span { display:grid; gap:2px; }
.subscription-settings small { color:var(--muted); }
.subscription-settings button { padding:0; border:0; background:transparent; cursor:pointer; }

.gallery-subscribe { display:flex; gap:15px; align-items:center; margin-top:18px; padding:14px 16px; border:1px solid #dedfdd; border-radius:13px; background:#fff; box-shadow:0 7px 18px rgba(0,0,0,.05); }
.gallery-subscribe > div { display:grid; flex:1; gap:2px; }
.gallery-subscribe span { color:var(--muted); font-size:.69rem; }
.gallery-subscribe select { min-height:42px; padding:0 10px; border:1px solid #cfd0d2; border-radius:8px; background:#fff; }
.gallery-subscribe .button-secondary { border-color:#565a61; color:#202227; }
.gallery-loader { display:grid; min-height:100px; place-items:center; align-content:center; gap:8px; margin-top:18px; }
.gallery-loader[data-has-more="0"] .gallery-loader-spinner { display:none; }
.gallery-loader-spinner { display:none; width:28px; height:28px; border:3px solid #dedfdc; border-top-color:var(--yellow); border-radius:50%; animation:gallery-spin .75s linear infinite; }
.gallery-loader.loading .gallery-loader-spinner { display:block; }
.gallery-loader.loading .button { display:none; }
.gallery-loader small { color:var(--muted); }
@keyframes gallery-spin { to { transform:rotate(360deg); } }
.gallery-dialog-arrow { position:absolute; z-index:6; top:45%; display:grid; width:48px; height:62px; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:12px; background:rgba(12,13,15,.83); color:#fff; cursor:pointer; font-size:2.2rem; transform:translateY(-50%); }
.gallery-dialog-arrow.previous { left:8px; }
.gallery-dialog-arrow.next { right:8px; }
.gallery-dialog-arrow:hover,.gallery-dialog-arrow:focus-visible { border-color:var(--yellow); color:var(--yellow); outline:none; }
.gallery-dialog-arrow[hidden] { display:none; }
.subgallery-section { margin-top:28px; padding-top:2px; border-top:1px solid #e0e1df; }

.discover-story,.discover-about { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:30px; margin-top:24px; padding:30px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.discover-story-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:24px; }
.story-card { display:grid; grid-template-columns:90px 1fr; gap:20px; padding:26px; border-radius:15px; background:#17191d; color:#fff; }
.story-year { color:var(--yellow); font-size:3rem; font-weight:900; line-height:1; }
.story-card h2 { margin:0 0 8px; }
.story-card p:not(.eyebrow) { margin:0; color:#c3c6cb; font-size:.76rem; line-height:1.65; }
.discover-story h1,.discover-about h2 { margin:0; }
.discover-story p,.discover-about p { color:#55585e; line-height:1.7; }
.discover-timeline { display:grid; align-content:center; gap:12px; }
.discover-timeline div { display:grid; padding:15px; border-left:4px solid var(--yellow); border-radius:0 10px 10px 0; background:#17191d; color:#fff; }
.discover-timeline strong { color:var(--yellow); font-size:1.3rem; }
.discover-timeline span { font-size:.7rem; }
.discover-links { display:grid; align-content:center; gap:10px; }
.discover-links .button-secondary { border-color:#4e535a; color:#202227; }
.club-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:24px; }
.club-benefit-grid article { padding:24px; border-radius:14px; background:#17191d; color:#fff; }
.club-benefit-grid article > span { color:var(--yellow); font-weight:900; }
.club-benefit-grid h2 { margin:18px 0 7px; font-size:1.05rem; }
.club-benefit-grid p { margin:0; color:#bfc2c7; font-size:.75rem; line-height:1.55; }
.club-join-strip { display:flex; gap:18px; align-items:center; justify-content:space-between; margin-top:18px; padding:18px 20px; border-radius:13px; background:#fff8df; }
.club-join-strip > div { display:grid; gap:3px; }
.club-join-strip span { color:#625d50; font-size:.72rem; }

.profile-hero { display:grid; grid-template-columns:150px minmax(0,1fr); gap:26px; align-items:center; padding:28px; border-radius:18px; background:linear-gradient(120deg,#111317,#252930); color:#fff; }
.profile-avatar { display:grid; width:150px; aspect-ratio:1; place-items:center; overflow:hidden; border:5px solid var(--yellow); border-radius:50%; background:#090a0b; color:var(--yellow); font-size:2.5rem; font-weight:900; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-hero-copy h1 { margin:0; font-size:clamp(2rem,4vw,3.4rem); }
.profile-hero-copy > p:not(.eyebrow) { color:#c9cbd0; }
.profile-facts { display:flex; flex-wrap:wrap; gap:7px; }
.profile-facts span { padding:6px 9px; border-radius:99px; background:rgba(255,255,255,.09); font-size:.68rem; }
.profile-promo { display:flex; gap:18px; align-items:center; justify-content:space-between; margin-top:14px; padding:14px 17px; border-left:4px solid var(--yellow); border-radius:10px; background:#fff8df; }
.profile-promo > div { display:grid; }
.profile-promo span { color:#625d50; font-size:.7rem; }
.profile-sections { display:grid; gap:28px; margin-top:30px; }
.profile-section-heading { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.profile-section-heading span { color:var(--yellow); font-size:1.4rem; font-weight:900; }
.profile-section-heading h2 { margin:0; }
.profile-answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.profile-answer { overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#fff; }
.profile-answer-media { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); overflow:hidden; }
.profile-answer-media { gap:9px; padding:10px 10px 0; }
.profile-answer img { width:100%; height:100%; max-height:340px; border-radius:10px; object-fit:cover; }
.profile-answer > div { padding:17px; }
.profile-answer h3 { margin:0 0 7px; font-size:.8rem; }
.profile-answer p { margin:0; color:#55585e; font-size:.74rem; line-height:1.6; }

@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr) 275px}.hero-secretary{right:-15px;width:180px}.club-benefit-grid{grid-template-columns:1fr}.discover-story,.discover-about,.discover-story-grid{grid-template-columns:1fr}.profile-answer-grid{grid-template-columns:1fr}}
@media(max-width:720px){.settings-nav a{min-width:145px;border-right:1px solid #d8d8d4;border-bottom:0}.gallery-subscribe{align-items:stretch;flex-direction:column}.gallery-dialog-arrow{top:auto;bottom:82px;width:46px;height:46px;transform:none}.gallery-dialog-arrow.previous{left:10px}.gallery-dialog-arrow.next{right:10px}.profile-editor-heading,.profile-promo{align-items:stretch;flex-direction:column}.profile-hero{grid-template-columns:90px 1fr}.profile-avatar{width:90px}.member-card{display:none}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding-right:30px}}
@media(max-width:500px){.profile-hero{grid-template-columns:1fr;text-align:center}.profile-avatar{margin:auto}.profile-facts{justify-content:center}.profile-answer-grid{grid-template-columns:1fr}.profile-photo-upload{align-items:stretch;flex-direction:column}.profile-photo-upload label{min-width:0}}

@media(max-width:720px){
  .banner .flash-stack,.toast { position:fixed; z-index:240; top:10px; right:10px; width:calc(100vw - 20px); }
}

/* 0.7.0: complete member settings */
@media (min-width: 1101px) {
  .content-panel:has(.settings-page) { overflow:hidden; }
  .content-wrap:has(.settings-page) { height:100%; padding-block:34px; }
  .settings-page { height:100%; }
}
.settings-page { min-height:0; }
.settings-panel-v2 { height:100%; min-height:560px; grid-template-columns:218px minmax(0,1fr); overflow:hidden; border:1px solid #272a2f; border-radius:16px; box-shadow:0 18px 42px rgba(11,12,14,.12); }
.settings-panel-v2 .settings-nav { padding:16px 0 16px 16px; background:#202329; }
.settings-panel-v2 .settings-nav a { padding:14px 11px; border-color:#7d8085; color:#f3f3f1; }
.settings-panel-v2 .settings-nav a:hover,.settings-panel-v2 .settings-nav a:focus-visible { color:var(--yellow); background:rgba(255,255,255,.045); }
.settings-panel-v2 .settings-nav a.active { border-left:3px solid var(--yellow); background:#fff; color:#202329; }
.settings-panel-v2 .settings-content { min-width:0; overflow-y:auto; padding:28px; scrollbar-color:var(--yellow) #e5e5e2; }
.settings-panel-v2 h1 { margin:0 0 8px; font-size:1.65rem; }
.settings-heading { margin-bottom:20px; }
.settings-heading p,.settings-intro { max-width:700px; margin:0; color:#66696f; font-size:.78rem; line-height:1.5; }
.settings-form { display:grid; gap:18px; }
.settings-form > .button { justify-self:start; }
.screen-name-settings { display:grid; gap:5px; padding:15px 17px; border:1px solid #d8d9d6; border-left:4px solid var(--yellow); border-radius:12px; background:#f7f7f4; }
.screen-name-settings .field { margin-top:0; }
.screen-name-settings input[readonly] { background:#e8e8e5; color:#777a7f; cursor:not-allowed; }
.screen-name-status { min-height:18px; margin:2px 0 0; color:#74777c; font-size:.64rem; font-weight:800; }
.screen-name-status.available { color:#278254; }
.screen-name-status.unavailable,.screen-name-status.locked { color:#a02b3e; }
.settings-toggle { display:flex; gap:11px; align-items:center; cursor:pointer; }
.settings-toggle input { position:absolute; opacity:0; }
.settings-toggle > span { position:relative; width:52px; height:29px; flex:0 0 52px; border-radius:99px; background:#a9acb0; transition:.2s ease; }
.settings-toggle > span::after { position:absolute; top:4px; left:4px; width:21px; height:21px; border-radius:50%; background:#fff; content:""; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .2s ease; }
.settings-toggle input:checked + span { background:var(--yellow); }
.settings-toggle input:checked + span::after { transform:translateX(23px); }
.settings-toggle input:focus-visible + span { outline:3px solid rgba(254,180,0,.3); }
.settings-toggle b { display:grid; gap:2px; }
.settings-toggle b small { color:#777a80; font-size:.66rem; font-weight:500; line-height:1.4; }
.profile-enable-toggle { padding:14px; border:1px solid #d9dad7; border-radius:12px; background:#f7f7f4; }

.avatar-current-card { display:flex; gap:17px; align-items:center; padding:15px; border:1px solid #dedfdd; border-radius:13px; background:#f7f7f4; }
.avatar-current-card p { margin:4px 0 0; color:#707279; font-size:.7rem; line-height:1.45; }
.pending-note { display:inline-block; margin-top:7px; color:#8a6500; font-weight:800; }
.avatar-upload-form { display:grid; grid-template-columns:minmax(220px,1fr) 280px; gap:18px; margin-top:14px; }
.avatar-upload-copy { display:grid; align-content:start; gap:14px; padding:17px; border:1px solid #dedfdd; border-radius:13px; background:#fafaf8; }
.avatar-upload-copy p { margin:0; color:#72747a; font-size:.7rem; line-height:1.5; }
.file-button { position:relative; display:inline-flex; width:max-content; overflow:hidden; padding:10px 13px; border:1px solid #b8babd; border-radius:8px; background:#fff; cursor:pointer; font-size:.72rem; font-weight:800; }
.file-button input { position:absolute; width:1px; height:1px; opacity:0; }
.avatar-zoom label { display:grid; gap:6px; color:#55585d; font-size:.7rem; font-weight:800; }
.avatar-zoom input { width:100%; accent-color:var(--yellow); }
.avatar-crop-stage { position:relative; width:280px; aspect-ratio:1; overflow:hidden; border-radius:10px; background:repeating-conic-gradient(#2b2e33 0 25%,#22252a 0 50%) 50%/20px 20px; touch-action:none; cursor:grab; }
.avatar-crop-stage:active { cursor:grabbing; }
.avatar-crop-stage img { position:absolute; top:0; left:0; max-width:none; transform-origin:0 0; user-select:none; }
.avatar-crop-empty { position:absolute; inset:0; display:grid; place-items:center; padding:30px; color:#b6b8bc; font-size:.7rem; text-align:center; }
.avatar-crop-frame { position:absolute; inset:0; z-index:2; border:3px solid var(--yellow); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); pointer-events:none; }

.notification-list { display:grid; gap:9px; }
.notification-card { position:relative; display:flex; min-height:76px; gap:13px; align-items:center; overflow:hidden; padding:13px 18px 13px 13px; border:1px solid #dedfdd; border-radius:12px; background:#f7f7f4; cursor:pointer; }
.notification-card > b { position:relative; z-index:2; display:grid; gap:3px; }
.notification-card > b strong { font-size:.9rem; }
.notification-card > b small { max-width:520px; color:#73767c; font-size:.66rem; font-weight:500; }
.notification-card > i { position:absolute; top:7px; right:16px; width:92px; height:68px; background:var(--yellow); opacity:.46; -webkit-mask:var(--notice-icon) center/contain no-repeat; mask:var(--notice-icon) center/contain no-repeat; }
.ajax-save-state { min-height:18px; margin:12px 0 0; color:#66715f; font-size:.68rem; font-weight:800; }
.ajax-save-state.error,.profile-save-bar .error { color:#a82a31; }

.settings-subtitle { margin:18px 0 8px!important; font-size:.83rem; }
.header-theme-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; padding:9px; border:1px solid #dedfdd; border-radius:13px; background:#f7f7f4; }
.header-theme-option,.dude-stage-option { cursor:pointer; }
.header-theme-option input,.dude-stage-option input { position:absolute; opacity:0; }
.header-theme-option span { display:grid; gap:5px; text-align:center; }
.header-theme-option img { width:100%; aspect-ratio:1; object-fit:cover; border:2px solid transparent; border-radius:9px; filter:grayscale(1); }
.header-theme-option b { color:#73767b; font-size:.61rem; }
.header-theme-option input:checked + span img { border-color:var(--yellow); filter:none; box-shadow:0 0 0 2px rgba(254,180,0,.2); }
.header-theme-option input:checked + span b { color:#b27f00; }
.dude-title { display:flex; align-items:center; justify-content:space-between; }
.dude-title small { color:#8c8e93; font-size:.62rem; }
.dude-stage-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:hidden; border:1px solid #dedfdd; border-radius:13px; background:#f7f7f4; }
.dude-stage-option span { box-sizing:border-box; display:flex; flex-direction:column; align-items:center; height:174px; padding:10px 4px 0; border-right:1px solid #e0e1df; }
.dude-stage-option:last-child span { border-right:0; }
.dude-stage-option img { order:3; flex:0 0 110px; width:100%; height:110px; margin-top:auto; object-fit:contain; object-position:center bottom; opacity:.63; }
.dude-stage-option b { order:1; display:block; width:100%; min-height:2.3em; font-size:.6rem; line-height:1.15; text-align:center; }
.dude-stage-option small { order:2; min-height:1.2em; color:#777a80; font-size:.55rem; line-height:1.2; }
.dude-stage-option input:checked + span { background:#fff8df; box-shadow:inset 0 -4px var(--yellow); }
.dude-stage-option input:checked + span img { opacity:1; }
.dude-stage-option.locked { cursor:not-allowed; filter:grayscale(1); opacity:.32; }

.email-address-card { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:16px 0 22px; padding:16px 18px; border:1px solid #e0e1df; border-radius:12px; background:#f8f8f5; }
.email-address-card>div { display:grid; gap:4px; min-width:0; }
.email-address-card strong { font-size:.88rem; }
.email-address-card span { overflow-wrap:anywhere; font-size:.88rem; }
.email-address-card small { color:#6e7378; font-size:.7rem; }
.email-address-card button { flex-shrink:0; cursor:pointer; }
.email-address-card .button.button-secondary { border-color:#202329; background:#202329; color:#fff; }
.email-address-card .button.button-secondary:hover,.email-address-card .button.button-secondary:focus-visible { border-color:#202329; background:#feb400; color:#202329; }
dialog.email-change-dialog { position:fixed; width:min(900px,calc(100vw - 30px)); max-width:none; max-height:min(700px,calc(100dvh - 28px)); padding:0; overflow:auto; border:1px solid #353840; border-radius:16px; background:#f8f8f5; background-color:#f8f8f5; color:#202329; opacity:1; backdrop-filter:none; box-shadow:0 26px 75px rgba(0,0,0,.48); }
.email-change-dialog::backdrop { background:rgba(11,13,17,.78); }
.email-change-content { position:relative; display:flex; min-height:500px; padding:42px 400px 32px 36px; box-sizing:border-box; overflow:hidden; background:#f8f8f5; }
.email-change-copy { position:relative; z-index:2; width:100%; }
.email-change-copy h2 { margin:6px 0 12px; font-size:1.65rem; }
.email-change-copy p { max-width:460px; line-height:1.5; }
.email-change-copy .field { margin:14px 0; }
.email-change-copy .field label { display:block; margin-bottom:6px; font-weight:700; }
.email-change-copy .field input { box-sizing:border-box; width:100%; max-width:390px; }
.email-change-copy .registration-code-fields { grid-template-columns:repeat(6,minmax(0,48px)); gap:7px; }
.email-change-vince { position:absolute; z-index:1; right:-22px; bottom:0; width:auto; height:480px; max-width:none; object-fit:contain; object-position:right bottom; pointer-events:none; }
.email-change-vince[hidden],.email-change-copy [hidden] { display:none!important; }
.email-change-close { position:absolute; z-index:4; top:10px; right:12px; width:33px; height:33px; border:0; border-radius:50%; background:#202329; color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.email-change-close:hover,.email-change-close:focus-visible { background:#ff0200; }
.email-change-again { display:block; margin-top:18px; padding:4px 0; border:0; background:none; color:#574000; text-decoration:underline; cursor:pointer; }
.email-change-status { min-height:1.5em; margin:12px 0 0; color:#35693d; font-size:.78rem; font-weight:700; }
.email-change-status.error { color:#a3212d; }
.email-change-copy button:disabled { opacity:.55; cursor:wait; }
@media(max-width:850px) { .email-change-content { padding-right:355px; } .email-change-copy .field input { max-width:325px; } .email-change-vince { right:-28px; height:360px; } }
@media(max-width:700px) { .email-address-card { align-items:flex-start; flex-direction:column; } .email-change-content { min-height:0; padding:30px 24px 240px; } .email-change-vince { right:-12px; width:auto; height:250px; max-height:250px; } }

.profile-title-line { display:flex; gap:9px; align-items:center; }
.profile-info-button { display:grid; width:25px; height:25px; place-items:center; padding:0; border:1px solid #c8c9c6; border-radius:50%; background:#fff; color:#6d5200; cursor:pointer; font:700 .72rem/1 Georgia,serif; }
.profile-info-button:hover,.profile-info-button:focus-visible { border-color:var(--yellow); background:#fff8df; outline:none; }
.profile-save-bar { position:sticky; z-index:8; top:-28px; display:flex; gap:14px; align-items:center; justify-content:space-between; margin:0 -10px -56px; padding:8px 10px; border-radius:0 0 9px 9px; background:rgba(32,35,41,.97); color:#fff; opacity:0; visibility:hidden; pointer-events:none; box-shadow:0 7px 16px rgba(0,0,0,.16); transform:translateY(-9px); transition:opacity .18s ease,transform .18s ease,visibility .18s; backdrop-filter:blur(8px); }
.profile-save-bar.is-visible { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.profile-save-bar span { color:#f0f0ed; font-size:.67rem; font-weight:700; }
.profile-save-bar .error { color:#ff9bad; }
.profile-save-now { display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; padding:0; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:var(--yellow); color:#17191d; cursor:pointer; }
.profile-save-now img { width:25px; height:25px; object-fit:contain; }
.profile-save-now:hover,.profile-save-now:focus-visible { background:#ffd066; outline:2px solid rgba(254,180,0,.35); }
.profile-question-form-v2 { display:grid; gap:26px; }
.profile-editor-category-v2 { display:grid; gap:10px; }
.profile-editor-category-v2 > h2 { margin:0 0 2px; padding-bottom:8px; border-bottom:2px solid var(--yellow); font-size:1.05rem; }
.profile-group-title { margin:9px 0 -2px; color:#74777c; font-size:.66rem; text-transform:uppercase; letter-spacing:.09em; }
.profile-question-card { display:grid; grid-template-columns:42px minmax(0,1fr); overflow:hidden; border:1px solid #dedfdd; border-radius:11px; background:#f8f8f6; }
.profile-question-icon { min-height:70px; background:#e5e5e1; color:#777a7f; }
.profile-question-icon::before,.profile-public-icon::before { display:block; width:100%; height:100%; background:currentColor; content:""; -webkit-mask:var(--question-icon) center/70% auto no-repeat; mask:var(--question-icon) center/70% auto no-repeat; }
.profile-question-main { display:grid; gap:7px; min-width:0; padding:11px 13px; }
.profile-question-label { color:#5f6268; font-size:.67rem; font-weight:800; }
.profile-question-main input:not([type=range]):not([type=hidden]),.profile-question-main textarea { width:100%; min-height:40px; padding:9px 10px; border:1px solid #d4d5d3; border-radius:8px; background:#fff; font:inherit; font-size:.72rem; }
.profile-question-main textarea { min-height:72px; resize:vertical; }
.character-counter { justify-self:end; color:#8a8c90; font-size:.57rem; }
.legacy-answer { padding:6px 8px; border-left:2px solid var(--yellow); color:#686a6f; font-size:.62rem; }
.choice-pills { display:flex; flex-wrap:wrap; gap:6px; }
.choice-pills button { padding:6px 10px; border:0; border-radius:99px; background:#dedfdd; color:#45484d; cursor:pointer; font:inherit; font-size:.62rem; font-weight:800; }
.choice-pills button:hover,.choice-pills button:focus-visible { outline:2px solid rgba(254,180,0,.38); }
.choice-pills button.selected { background:var(--yellow); color:#141517; }
.choice-limit { color:#898b90; font-size:.56rem; }
.choice-meta { display:flex; align-items:center; justify-content:space-between; }
.choice-clear { justify-self:start; padding:0; border:0; background:transparent; color:#776000; cursor:pointer; font:inherit; font-size:.58rem; text-decoration:underline; }
.profile-slider { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; }
.profile-slider input { width:100%; accent-color:var(--yellow); }
.profile-slider output { min-width:58px; padding:3px 0; border-radius:0; background:transparent; color:#252a32; font-size:.75rem; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.profile-slider button { padding:0; border:0; background:transparent; color:#776000; cursor:pointer; font:inherit; font-size:.58rem; text-decoration:underline; }
.profile-slider.inactive input,.profile-slider.inactive output { opacity:.34; filter:grayscale(1); }
.profile-slider-choice { grid-template-columns:minmax(0,1fr) auto; }
.slider-ends { grid-column:1; display:flex; justify-content:space-between; margin-top:-7px; color:#85878c; font-size:.55rem; }
.profile-slider-choice button { grid-column:2; }
.question-subfield { display:grid; gap:6px; padding-top:7px; border-top:1px solid #e1e2df; }
.question-subfield > span { color:#65686e; font-size:.62rem; font-weight:800; }
.profile-question-photo { align-items:flex-end; margin-top:2px; }
.profile-media-list { display:flex; min-width:0; flex-wrap:wrap; gap:8px; }
.profile-media-thumb { position:relative; width:92px; margin:0; padding:0; overflow:hidden; border:2px solid #fff; border-radius:10px; background:#202329; cursor:zoom-in; box-shadow:0 3px 10px rgba(0,0,0,.13); }
.profile-media-thumb img { display:block; width:100%; height:72px; object-fit:cover; }
.profile-media-thumb span { display:block; padding:5px 4px; color:#fff; font-size:.5rem; font-weight:800; line-height:1.2; text-align:center; }
.profile-media-thumb.pending { border-color:var(--yellow); }
.profile-media-thumb.pending img { opacity:.68; filter:grayscale(.35); }

dialog.profile-dialog { width:min(680px,calc(100vw - 28px)); max-height:calc(100vh - 32px); padding:0; overflow:visible; border:1px solid rgba(255,255,255,.85); border-radius:17px; background:#fff; color:#202329; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.profile-dialog::backdrop { background:rgba(4,5,7,.78); backdrop-filter:blur(6px); }
.profile-dialog>div,.profile-photo-upload-modal { position:relative; padding:28px; }
dialog.profile-upload-dialog { width:min(760px,calc(100vw - 28px)); }
.profile-photo-upload-modal { min-height:350px; padding:32px 260px 28px 30px; overflow:visible; border-radius:inherit; background:#fff; }
.profile-photo-upload-modal > :not(.profile-dialog-dude-stage):not(.profile-dialog-close) { position:relative; z-index:2; }
.profile-dialog h2 { margin:3px 0 9px; font-size:1.5rem; }
.profile-dialog p:not(.eyebrow) { color:#64676d; font-size:.75rem; line-height:1.55; }
.profile-dialog-close { position:absolute; z-index:4; top:12px; right:12px; display:grid; width:34px; height:34px; place-items:center; padding:0; border:0; border-radius:50%; background:#202329; color:#fff; cursor:pointer; font-size:1.25rem; }
.profile-modal-file { display:grid; gap:7px; margin:18px 0 12px; padding:14px; border:1px dashed #bfc0bd; border-radius:11px; background:#f7f7f4; font-size:.72rem; font-weight:800; }
.profile-upload-preview { width:min(100%,420px); margin:12px auto; overflow:hidden; border-radius:11px; background:#17191d; }
.profile-upload-preview img { display:block; width:100%; max-height:340px; object-fit:contain; }
.profile-upload-status { min-height:18px; margin:8px 0!important; color:#8a6500!important; font-weight:800; }
dialog.profile-media-dialog { width:min(900px,calc(100vw - 28px)); background:#0c0d0f; color:#fff; }
.profile-media-dialog>div { display:grid; justify-items:center; gap:12px; }
.profile-media-dialog img { display:block; max-width:100%; max-height:calc(100vh - 190px); border-radius:12px; object-fit:contain; }
.profile-media-dialog p { margin:0!important; color:#d0d2d6!important; }
dialog.profile-intro-dialog { width:min(760px,calc(100vw - 28px)); }
.profile-intro-layout { position:relative; min-height:365px; padding:0!important; overflow:visible; border-radius:inherit; background:#fff; }
.profile-intro-copy { position:relative; z-index:2; width:calc(100% - 300px); max-width:440px; padding:34px 0 34px 30px; }
.profile-intro-dialog .button { margin-top:8px; }
.profile-dialog-dude-stage { position:absolute; z-index:3; right:0; bottom:0; overflow:hidden; pointer-events:none; }
.profile-dialog-dude { position:absolute; top:0; max-width:none; filter:drop-shadow(0 10px 10px rgba(0,0,0,.22)); }
.profile-intro-dude-stage { top:-58px; width:300px; }
.profile-intro-dude { right:-2px; width:294px; }
.profile-upload-dude-stage { top:-52px; width:282px; }
.profile-upload-dude { right:4px; width:268px; }

.password-form { max-width:560px; }
.password-strength { display:grid; gap:5px; margin-top:8px; }
.password-strength > span { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.password-strength i { height:6px; border-radius:99px; background:#dedfdd; }
.password-strength strong { color:#777a80; font-size:.62rem; }
.password-strength[data-level="1"] i:nth-child(-n+1){background:#d63d3d}.password-strength[data-level="1"] strong{color:#b92b2b}
.password-strength[data-level="2"] i:nth-child(-n+2){background:#ec8129}.password-strength[data-level="2"] strong{color:#c86416}
.password-strength[data-level="3"] i:nth-child(-n+3){background:#e4bd22}.password-strength[data-level="3"] strong{color:#a88600}
.password-strength[data-level="4"] i:nth-child(-n+4){background:#83c85c}.password-strength[data-level="4"] strong{color:#568d38}
.password-strength[data-level="5"] i:nth-child(-n+5){background:#32c94d}.password-strength[data-level="5"] strong{color:#218b34}
.profile-public-icon { display:block; width:32px; height:32px; float:left; margin:0 10px 4px 0; color:#73767b; }

@media(max-width:900px){.header-theme-grid{grid-template-columns:repeat(3,1fr)}.dude-stage-grid{grid-template-columns:repeat(5,minmax(105px,1fr));overflow-x:auto}.avatar-upload-form{grid-template-columns:1fr 250px}.avatar-crop-stage{width:250px}}
@media(max-width:720px){.settings-panel-v2{height:auto;min-height:0;grid-template-columns:1fr}.settings-panel-v2 .settings-nav{display:flex;padding:0;overflow-x:auto}.settings-panel-v2 .settings-nav a{min-width:max-content;padding:13px 16px;border-right:1px solid #55585d;border-bottom:0}.settings-panel-v2 .settings-nav a.active{border-left:0;border-bottom:3px solid var(--yellow)}.settings-panel-v2 .settings-content{overflow:visible;padding:22px 18px}.avatar-upload-form{grid-template-columns:1fr}.avatar-crop-stage{width:min(100%,320px);justify-self:center}.notification-card>i{opacity:.23}.profile-question-card{grid-template-columns:38px minmax(0,1fr)}.profile-editor-heading{gap:12px}.profile-save-bar{top:0}.profile-slider{grid-template-columns:minmax(0,1fr) auto}.profile-slider button{grid-column:1/-1;justify-self:start}.header-theme-grid{grid-template-columns:repeat(2,1fr)}.profile-question-photo{align-items:stretch;flex-direction:column}.profile-dialog>div,.profile-photo-upload-modal{padding:24px 18px}}
@media(max-width:720px){.profile-intro-layout{min-height:0;padding-top:0!important}.profile-intro-copy{width:auto;max-width:none;padding:24px 18px}.profile-photo-upload-modal{min-height:0;padding:24px 18px}.profile-intro-dude-stage,.profile-upload-dude-stage{display:none}.profile-save-now{width:38px;height:38px;flex-basis:38px}}
img[data-protected-image] { -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }

/* 0.9.0: dynamische Clubhome en pagina-afbeeldingen */
.clubhome-tile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:20px; }
.clubhome-tile-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.clubhome-tile { position:relative; display:block; min-width:0; aspect-ratio:3/2; overflow:hidden; border:2px solid transparent; border-radius:14px; color:#17191d; text-decoration:none; box-shadow:0 10px 24px rgba(10,11,13,.1); isolation:isolate; }
.clubhome-tile-text { display:flex; align-items:flex-start; padding:20px; border-color:#dedfd9; background:linear-gradient(145deg,#f8f8f5,#e9eae5); }
.clubhome-tile-text::before { position:absolute; z-index:0; inset:0; background:linear-gradient(130deg,rgba(254,180,0,.2),transparent 48%); content:""; opacity:.22; transition:opacity .25s ease; }
.clubhome-tile-copy { position:relative; z-index:2; display:grid; gap:6px; max-width:82%; }
.clubhome-tile-copy strong { display:block; min-height:2.34em; color:#8b6100; font-size:clamp(.82rem,1.4vw,1.02rem); line-height:1.17; }
.clubhome-tile-copy span { color:#3f4247; font-size:.67rem; line-height:1.45; }
.clubhome-tile-watermark { position:absolute; z-index:1; right:-9%; bottom:-17%; width:62%; height:88%; object-fit:contain; object-position:right bottom; opacity:.11; pointer-events:none; transition:opacity .28s ease,transform .35s ease; }
.clubhome-tile-image { border-color:#dedfd9; background:#17191d; background-clip:padding-box; }
.clubhome-tile-image > img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .38s ease,filter .3s ease; }
.clubhome-tile.is-clickable { cursor:pointer; transition:border-color .2s ease,box-shadow .25s ease,transform .25s ease; }
.clubhome-tile.is-clickable:hover,.clubhome-tile.is-clickable:focus-visible { border-color:var(--yellow); outline:none; box-shadow:0 16px 33px rgba(10,11,13,.18),0 0 0 3px rgba(254,180,0,.15); transform:translateY(-4px); }
.clubhome-tile-text.is-clickable:hover::before,.clubhome-tile-text.is-clickable:focus-visible::before { opacity:1; }
.clubhome-tile-text.is-clickable:hover .clubhome-tile-watermark,.clubhome-tile-text.is-clickable:focus-visible .clubhome-tile-watermark { opacity:.24; transform:translate(-7px,-6px) rotate(-3deg) scale(1.05); }
.clubhome-tile-image.is-clickable:hover > img,.clubhome-tile-image.is-clickable:focus-visible > img { filter:saturate(1.07) contrast(1.03); transform:scale(1.045); }
.clubhome-tile.is-announcement { border-color:rgba(27,30,35,.08); }
.clubhome-poll-wrap { margin-top:22px; }
.clubhome-tile--games-tests { background:linear-gradient(145deg,#20252d,#101216); border-color:#4c5058; }
.clubhome-tile--games-tests::after { content:""; position:absolute; right:-6%; bottom:-18%; width:60%; height:108%; border-radius:50%; background:repeating-radial-gradient(circle at center,transparent 0 20px,rgba(254,180,0,.3) 21px 24px,transparent 25px 40px); opacity:.45; pointer-events:none; transform:rotate(-9deg); transition:transform .3s ease,opacity .3s ease; }
.clubhome-tile--games-tests:hover::after { opacity:.65; transform:rotate(-4deg) scale(1.04); }
.clubhome-tile--games-tests .clubhome-tile-copy strong { color:#feb400; }
.clubhome-tile--games-tests .clubhome-tile-copy span { color:#eee; }
.clubhome-poll-wrap .poll-card h2 { font-size:1.15rem; line-height:1.3; }
.clubhome-poll-wrap .poll-question { font-size:.84rem; line-height:1.45; }
.poll-card-copy { position:relative; z-index:2; }
.poll-card.has-poll-art { min-height:330px; padding-right:min(36%,340px); }
.poll-card.has-poll-art::after { content:none; }
.poll-art { position:absolute; z-index:1; right:10px; bottom:0; width:min(32%,290px); max-height:96%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 10px 12px rgba(0,0,0,.34)); pointer-events:none; user-select:none; -webkit-user-drag:none; }

.wysiwyg-content .content-image { margin:25px auto; }
.wysiwyg-content .content-image--small { max-width:42%; }
.wysiwyg-content .content-image--normal { max-width:72%; }
.wysiwyg-content .content-image--wide { max-width:100%; }
.wysiwyg-content .content-image img { display:block; width:100%; max-height:760px; object-fit:contain; border-radius:13px; box-shadow:0 10px 25px rgba(10,11,13,.1); }
.wysiwyg-content .content-image figcaption { padding-top:8px; color:#777a80; font-size:.7rem; line-height:1.45; text-align:center; }

.page-navigation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:4px 0 28px; }
.content-page-hero + .page-navigation-grid { margin-top:24px; }
.page-navigation-grid--1 { grid-template-columns:minmax(0,1fr); max-width:390px; }
.page-navigation-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.page-navigation-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.page-navigation-tile { position:relative; display:grid; min-width:0; min-height:176px; align-content:start; overflow:hidden; padding:21px 22px 20px; border:1px solid #d9dad6; border-radius:14px; background:linear-gradient(145deg,#fff,#f4f4f0); color:#17191d; text-decoration:none; box-shadow:0 9px 23px rgba(10,11,13,.07); isolation:isolate; }
.page-navigation-tile::before { position:absolute; z-index:-1; inset:0; background:linear-gradient(135deg,rgba(254,180,0,.18),transparent 48%); content:""; opacity:.16; transition:opacity .25s ease; }
.page-navigation-heading { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; }
.page-navigation-heading > span { color:#b47f00; font-family:Georgia,serif; font-size:.78rem; font-weight:900; line-height:1.5; letter-spacing:.04em; }
.page-navigation-heading > strong { min-height:2.45em; color:#17191d; font-size:clamp(.88rem,1.35vw,1.04rem); line-height:1.22; }
.page-navigation-tile > p { margin:12px 30px 0 0; color:#55585e; font-size:.72rem; line-height:1.55; }
.page-navigation-tile > i { position:absolute; right:17px; bottom:14px; color:#bd8500; font-family:Arial,sans-serif; font-size:1.5rem; font-style:normal; font-weight:400; transition:transform .22s ease; }
.page-navigation-tile.is-clickable { cursor:pointer; transition:border-color .2s ease,box-shadow .25s ease,transform .25s ease; }
.page-navigation-tile.is-clickable:hover,.page-navigation-tile.is-clickable:focus-visible { border-color:var(--yellow); outline:none; box-shadow:0 15px 31px rgba(10,11,13,.14),0 0 0 3px rgba(254,180,0,.14); transform:translateY(-4px); }
.page-navigation-tile.is-clickable:hover::before,.page-navigation-tile.is-clickable:focus-visible::before { opacity:.9; }
.page-navigation-tile.is-clickable:hover > i,.page-navigation-tile.is-clickable:focus-visible > i { transform:translateX(4px); }
.page-navigation-tile.is-announcement { cursor:default; }

.page-navigation-tile--video { min-height:225px; align-content:end; color:#fff; background:#101318; }
.page-navigation-video-image { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .28s ease; }
.page-navigation-tile--video::before { z-index:-1; background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.15) 70%); opacity:1; }
.page-navigation-tile--video:hover .page-navigation-video-image { transform:scale(1.04); }
.page-navigation-tile--video .page-navigation-heading>strong,.page-navigation-tile--video>p { color:#fff; }
.page-navigation-tile--video .page-navigation-heading>span { color:#feb400; }
.page-navigation-play { position:absolute; top:42%; left:50%; display:grid; width:56px; height:56px; place-items:center; border:2px solid #fff; border-radius:50%; background:rgba(0,0,0,.56); color:#feb400; font-size:22px; transform:translate(-50%,-50%); transition:background .2s ease,scale .2s ease; }
.page-navigation-tile--video:hover .page-navigation-play { background:#111; scale:1.1; }
.page-video-dialog { width:max-content; max-width:calc(100vw - 30px); max-height:calc(100dvh - 30px); padding:0; border:1px solid #4a4c50; border-radius:13px; background:#111214; color:#fff; box-shadow:0 24px 65px #0009; }
.page-video-dialog::backdrop { background:rgba(0,0,0,.83); }
.page-video-dialog-inner { width:min(1040px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; }
.page-video-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding:8px 12px 8px 20px; background:linear-gradient(#303237,#121316); }
.page-video-dialog-heading h2 { margin:0; font-size:1rem; line-height:1.3; }
.page-video-dialog-heading button { width:36px; height:36px; border:0; border-radius:7px; background:#fff2; color:#fff; font-size:28px; cursor:pointer; }
.page-video-dialog-heading button:hover,.page-video-dialog-heading button:focus-visible { background:#ff0200; outline:none; }
.page-video-dialog video { display:block; width:100%; max-height:calc(100dvh - 90px); background:#000; object-fit:contain; }

@media(max-width:1050px){.clubhome-tile-grid,.clubhome-tile-grid--4,.page-navigation-grid,.page-navigation-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.clubhome-tile-grid,.clubhome-tile-grid--4,.page-navigation-grid,.page-navigation-grid--2,.page-navigation-grid--4{grid-template-columns:1fr}.clubhome-tile{min-height:170px;aspect-ratio:auto}.clubhome-tile-copy strong,.page-navigation-heading>strong{min-height:0}.page-navigation-grid{margin-right:0;margin-left:0}.page-navigation-tile{min-height:145px}.poll-card.has-poll-art{min-height:0;padding-right:23px}.poll-art{display:none}.wysiwyg-content .content-image--small,.wysiwyg-content .content-image--normal{max-width:100%}}
@media(prefers-reduced-motion:reduce){.clubhome-tile,.clubhome-tile::before,.clubhome-tile img,.page-navigation-tile,.page-navigation-tile::before,.page-navigation-tile>i{transition:none!important}.clubhome-tile.is-clickable:hover,.clubhome-tile.is-clickable:focus-visible,.page-navigation-tile.is-clickable:hover,.page-navigation-tile.is-clickable:focus-visible{transform:none}}

/* De Dikke van Tracy / The Dicktionary */
.dictionary-page { display:grid; gap:25px; }
.dictionary-page [hidden] { display:none!important; }
.dictionary-page button { font-family:inherit; }
.dictionary-page .button-yellow {
  display:inline-flex; min-height:42px; align-items:center; justify-content:center; padding:0 17px;
  border:0; border-radius:10px; background:var(--yellow); color:#151719; cursor:pointer;
  font-weight:900; box-shadow:0 7px 17px rgba(133,93,0,.16); transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.dictionary-page .button-yellow:hover,.dictionary-page .button-yellow:focus-visible { background:#ffc329; outline:none; transform:translateY(-1px); box-shadow:0 10px 22px rgba(133,93,0,.23); }
.dictionary-page .button-yellow:disabled { cursor:not-allowed; opacity:.42; transform:none; box-shadow:none; }
.dictionary-hero {
  position:relative; display:grid; min-height:276px; grid-template-columns:minmax(0,1fr) 300px; align-items:center;
  overflow:visible; margin-top:18px; border-radius:18px; background:
    radial-gradient(circle at 72% 35%,rgba(254,180,0,.09),transparent 19rem),
    linear-gradient(112deg,#111317 0%,#1c1f24 70%,#25282d 100%);
  color:#fff; box-shadow:0 17px 38px rgba(10,11,13,.2); isolation:isolate;
}
.dictionary-hero::before { content:""; position:absolute; z-index:-1; inset:0; overflow:hidden; border-radius:inherit; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:19px 19px; mask-image:linear-gradient(90deg,#000,transparent 84%); }
.dictionary-hero-copy { position:relative; z-index:2; padding:36px 0 36px 35px; }
.dictionary-hero-copy .eyebrow { margin-bottom:8px; color:var(--yellow); font-size:.67rem; }
.dictionary-hero-copy .eyebrow::before { width:22px; height:2px; }
.dictionary-hero h1 { max-width:610px; margin:0; font-size:clamp(1.85rem,4vw,2.75rem); line-height:1; letter-spacing:-.025em; }
.dictionary-hero-copy>p:not(.eyebrow) { max-width:585px; margin:14px 0 0; color:#d2d4d8; font-size:.81rem; line-height:1.65; }
.dictionary-book { position:absolute; z-index:3; right:-13px; bottom:-13px; width:330px; max-width:39%; height:auto; pointer-events:none; user-select:none; filter:drop-shadow(-8px 13px 11px rgba(0,0,0,.35)); }
.dictionary-hero-stats { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.dictionary-hero-stats span { display:inline-flex; gap:5px; align-items:center; padding:7px 10px; border:1px solid rgba(255,255,255,.13); border-radius:99px; background:rgba(255,255,255,.05); color:#bbbfc5; font-size:.66rem; }
.dictionary-hero-stats strong { color:var(--yellow); }
.dictionary-cloud-section,.dictionary-browser,.dictionary-suggestion { border:1px solid #dddeda; border-radius:17px; background:#fff; box-shadow:0 11px 30px rgba(16,18,21,.07); }
.dictionary-cloud-section { padding:26px 28px 29px; }
.dictionary-section-heading { display:flex; gap:24px; align-items:flex-start; justify-content:space-between; }
.dictionary-section-heading h2,.dictionary-suggestion h2 { margin:1px 0 6px; font-size:1.38rem; line-height:1.16; }
.dictionary-section-heading p:not(.dictionary-kicker),.dictionary-suggestion>div>p:not(.dictionary-kicker) { max-width:630px; margin:0; color:#6b6e73; font-size:.74rem; line-height:1.55; }
.dictionary-kicker { margin:0 0 6px; color:#9b7000; font-size:.61rem; font-weight:900; letter-spacing:.14em; }
.dictionary-live-label { display:inline-flex; flex:0 0 auto; gap:7px; align-items:center; padding:7px 10px; border-radius:99px; background:#ecf7f1; color:#24764b; font-size:.63rem; font-weight:800; }
.dictionary-live-label i { width:7px; height:7px; border-radius:50%; background:#38ad6f; box-shadow:0 0 0 4px rgba(56,173,111,.14); }
.dictionary-word-cloud { position:relative; display:flex; min-height:270px; flex-wrap:wrap; gap:8px 14px; align-content:center; justify-content:center; margin-top:20px; overflow:hidden; padding:13px; border-radius:13px; background:radial-gradient(circle at 50% 45%,#fff 0%,#f5f5f1 62%,#ecece8 100%); transition:height .18s ease; }
.dictionary-cloud-word { padding:1px 3px; border:0; background:transparent; color:#31343a; cursor:pointer; font-weight:900; line-height:.92; white-space:nowrap; transition:filter .17s ease,transform .17s ease,text-decoration-color .17s ease; }
.dictionary-word-cloud.is-laid-out .dictionary-cloud-word { position:absolute; margin:0; }
.dictionary-cloud-word.weight-1 { font-size:.85rem; }
.dictionary-cloud-word.weight-2 { font-size:1.15rem; }
.dictionary-cloud-word.weight-3 { font-size:1.65rem; }
.dictionary-cloud-word.weight-4 { font-size:2.25rem; }
.dictionary-cloud-word.weight-5 { font-size:3.15rem; }
.dictionary-cloud-word:hover,.dictionary-cloud-word:focus-visible { z-index:2; outline:none; filter:brightness(.72); transform:scale(1.045); }
.dictionary-cloud-word:focus-visible { outline:2px solid var(--yellow); outline-offset:3px; border-radius:3px; }
.dictionary-cloud-word.is-selected { text-decoration:underline 4px var(--yellow); text-underline-offset:5px; }
.dictionary-cloud-word:disabled { pointer-events:none; cursor:default; }
.dictionary-browser { position:relative; padding:28px; }
.dictionary-list-heading { align-items:end; }
.dictionary-search { flex:0 0 min(290px,38%); }
.dictionary-search>span:first-child { display:block; margin-bottom:5px; color:#4e5156; font-size:.67rem; font-weight:800; }
.dictionary-search-field { display:flex; min-height:42px; align-items:center; padding:0 11px; border:1px solid #cfd0ce; border-radius:10px; background:#fff; }
.dictionary-search-field:focus-within { border-color:var(--yellow); box-shadow:0 0 0 3px rgba(254,180,0,.15); }
.dictionary-search-field svg { flex:0 0 19px; width:19px; color:#76797e; }
.dictionary-search-field input { width:100%; min-width:0; padding:8px; border:0; outline:0; background:transparent; font-size:.75rem; }
.dictionary-alphabet-nav { position:sticky; z-index:7; top:0; display:flex; gap:3px; justify-content:center; margin:21px -10px 0; padding:8px 10px; overflow-x:auto; border-block:1px solid #e4e4e0; background:rgba(255,255,255,.95); backdrop-filter:blur(6px); scrollbar-width:thin; }
.dictionary-alphabet-nav a { display:grid; flex:0 0 26px; width:26px; height:28px; place-items:center; border-radius:7px; color:#33363a; font-size:.68rem; font-weight:900; text-decoration:none; }
.dictionary-alphabet-nav a:hover,.dictionary-alphabet-nav a:focus-visible { background:var(--yellow); outline:0; }
.dictionary-alphabet-nav a.is-empty { color:#a8aaad; }
.dictionary-favorites-panel { position:sticky; z-index:6; top:45px; display:grid; grid-template-columns:minmax(165px,.72fr) minmax(360px,1.5fr) auto; gap:15px; align-items:center; margin:0 -10px 22px; padding:14px 16px; border:1px solid #34373c; border-top:3px solid var(--yellow); border-radius:0 0 13px 13px; background:rgba(29,32,37,.975); color:#fff; box-shadow:0 13px 24px rgba(0,0,0,.2); backdrop-filter:blur(8px); }
.dictionary-favorites-copy { display:flex; gap:10px; align-items:center; }
.dictionary-favorites-copy h3 { margin:0; color:var(--yellow); font-size:.85rem; line-height:1.2; }
.dictionary-favorites-copy p { margin:3px 0 0; color:#aeb1b6; font-size:.57rem; line-height:1.35; }
.dictionary-favorites-count { display:grid; flex:0 0 43px; width:43px; height:43px; place-items:center; border:2px solid #5e6268; border-top-color:var(--yellow); border-radius:50%; color:#fff; font-size:.62rem; font-weight:900; }
.dictionary-favorite-slots { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.dictionary-favorite-slot { position:relative; display:grid; min-width:0; min-height:53px; grid-template-columns:25px minmax(0,1fr); align-content:center; gap:0 6px; padding:6px 7px; border:1px dashed #5b5e63; border-radius:8px; color:#898c91; }
.dictionary-favorite-slot>b { grid-row:1/3; display:grid; width:25px; height:25px; place-items:center; align-self:center; border-radius:50%; background:#3a3d42; color:var(--yellow); font-size:.65rem; }
.dictionary-favorite-slot>em { overflow:hidden; font-size:.58rem; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.dictionary-favorite-slot>strong { overflow:hidden; color:#fff; font-size:.63rem; text-overflow:ellipsis; white-space:nowrap; }
.dictionary-favorite-slot>small { color:#96999e; font-size:.52rem; }
.dictionary-favorite-slot.is-filled { border-style:solid; border-color:#55595f; background:#26292e; }
.dictionary-favorite-controls { position:absolute; top:-8px; right:-4px; display:none; gap:2px; }
.dictionary-favorite-slot:hover .dictionary-favorite-controls,.dictionary-favorite-slot:focus-within .dictionary-favorite-controls { display:flex; }
.dictionary-favorite-controls button { display:grid; width:20px; height:20px; padding:0; place-items:center; border:0; border-radius:50%; background:#fff; color:#202328; cursor:pointer; font-size:.66rem; line-height:1; box-shadow:0 2px 7px rgba(0,0,0,.24); }
.dictionary-favorite-controls button:last-child { background:#ffe4ec; color:#9d1744; }
.dictionary-favorite-controls button:disabled { display:none; }
.dictionary-favorite-actions { display:flex; gap:6px; align-items:center; }
.dictionary-favorite-actions .button-yellow { min-height:36px; padding-inline:12px; font-size:.64rem; }
.dictionary-clear-button { min-height:32px; padding:0 5px; border:0; background:transparent; color:#b8bbc0; cursor:pointer; font-size:.59rem; text-decoration:underline; text-underline-offset:3px; }
.dictionary-action-status { grid-column:1/-1; min-height:0; margin:-9px 0 0; color:#d3d5d8; font-size:.6rem; text-align:right; }
.dictionary-letter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.dictionary-letter-card { scroll-margin-top:154px; display:grid; min-height:190px; grid-template-columns:112px minmax(0,1fr); overflow:hidden; border:1px solid #dedfdb; border-radius:14px; background:#f7f7f4; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.dictionary-letter-card:hover { border-color:#c9a340; box-shadow:0 9px 23px rgba(26,28,32,.08); transform:translateY(-1px); }
.dictionary-letter-art { display:grid; min-height:190px; overflow:hidden; align-items:start; justify-items:center; padding-top:12px; border-right:1px solid #dedfdb; background:linear-gradient(145deg,#ecece8,#dddeda); }
.dictionary-letter-svg { width:80%; height:142px; overflow:visible; }
.dictionary-letter-content { min-width:0; padding:16px 15px; }
.dictionary-letter-title { display:flex; gap:10px; align-items:baseline; justify-content:space-between; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #dedfdb; }
.dictionary-letter-title h3 { margin:0; color:#a17400; font-size:1.1rem; line-height:1; }
.dictionary-letter-title span { color:#85888c; font-size:.57rem; }
.dictionary-word-list { display:flex; flex-wrap:wrap; gap:5px; align-items:flex-start; }
.dictionary-word-choice { display:inline-flex; min-height:28px; gap:6px; align-items:center; padding:4px 7px 4px 9px; border:1px solid #d4d5d2; border-radius:99px; background:#fff; color:#34363a; cursor:pointer; font-size:.65rem; transition:border-color .16s ease,background-color .16s ease,color .16s ease; }
.dictionary-word-choice i { display:grid; width:16px; height:16px; place-items:center; border-radius:50%; background:#ecece8; color:#6a6d72; font-size:.67rem; font-style:normal; line-height:1; }
.dictionary-word-choice:hover,.dictionary-word-choice:focus-visible { border-color:var(--yellow); outline:0; background:#fff9e5; }
.dictionary-word-choice.is-selected { border-color:#feb400; background:#feb400; color:#17191c; font-weight:800; }
.dictionary-word-choice.is-selected i { background:#1d2025; color:#fff; }
.dictionary-word-choice.is-static { cursor:default; }
.dictionary-empty-letter { display:block; padding:11px; border:1px dashed #c8c9c6; border-radius:9px; color:#707378; text-decoration:none; }
.dictionary-empty-letter strong,.dictionary-empty-letter span { display:block; }
.dictionary-empty-letter strong { color:#55585d; font-size:.7rem; }
.dictionary-empty-letter span { margin-top:3px; font-size:.61rem; line-height:1.4; }
.dictionary-empty-letter:hover,.dictionary-empty-letter:focus-visible { border-color:var(--yellow); outline:0; background:#fff9e5; }
.dictionary-no-results { margin:22px 0; padding:24px; border:1px dashed #c7c8c5; border-radius:12px; text-align:center; }
.dictionary-no-results strong,.dictionary-no-results span { display:block; }
.dictionary-no-results span { margin-top:4px; color:#777a7e; font-size:.72rem; }
.dictionary-suggestion { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.9fr); gap:28px; align-items:center; padding:27px 29px; border-left:5px solid var(--yellow); }
.dictionary-suggestion form { display:grid; min-width:0; grid-template-columns:minmax(0,1fr); gap:8px; align-items:end; }
.dictionary-suggestion form>label:not(.dictionary-honeypot) { display:grid; gap:5px; }
.dictionary-suggestion form label>span { color:#505359; font-size:.65rem; font-weight:800; }
.dictionary-suggestion form input { width:100%; min-width:0; min-height:42px; padding:9px 11px; border:1px solid #cbccca; border-radius:9px; outline:0; }
.dictionary-suggestion form input:focus { border-color:var(--yellow); box-shadow:0 0 0 3px rgba(254,180,0,.15); }
.dictionary-suggestion form .button-yellow { justify-self:end; }
.dictionary-suggestion form p { min-height:17px; margin:0; color:#5d6065; font-size:.63rem; text-align:right; }
.dictionary-honeypot { position:absolute!important; left:-9999px!important; }

@media(max-width:1100px){
  .dictionary-hero{grid-template-columns:minmax(0,1fr) 250px}.dictionary-book{width:285px}.dictionary-favorites-panel{grid-template-columns:1fr}.dictionary-favorite-actions{justify-content:flex-end}.dictionary-favorite-slots{grid-row:2}.dictionary-action-status{margin:0}.dictionary-letter-card{grid-template-columns:95px minmax(0,1fr)}.dictionary-letter-svg{height:132px}
}
@media(max-width:820px){
  .dictionary-page{gap:18px}.dictionary-hero{min-height:245px;grid-template-columns:minmax(0,1fr) 225px;margin-top:12px}.dictionary-hero-copy{padding:29px 0 29px 27px}.dictionary-book{right:-7px;bottom:-7px;width:250px}.dictionary-cloud-section,.dictionary-browser{padding:22px}.dictionary-favorites-panel{top:58px}.dictionary-letter-grid{grid-template-columns:1fr}.dictionary-letter-card{grid-template-columns:115px minmax(0,1fr)}.dictionary-letter-svg{height:138px}.dictionary-suggestion{grid-template-columns:1fr}
}
@media(max-width:620px){
  .dictionary-hero{min-height:0;grid-template-columns:1fr;overflow:hidden;margin-top:0}.dictionary-hero-copy{padding:27px 23px}.dictionary-hero-copy>p:not(.eyebrow){max-width:100%}.dictionary-book{display:none}.dictionary-hero-stats{margin-top:17px}.dictionary-section-heading,.dictionary-list-heading{display:grid}.dictionary-live-label{justify-self:start}.dictionary-search{width:100%;min-width:0}.dictionary-cloud-section,.dictionary-browser{padding:19px 16px}.dictionary-word-cloud{min-height:250px;padding:8px}.dictionary-alphabet-nav{justify-content:flex-start;margin-inline:-4px}.dictionary-favorites-panel{top:58px;margin-inline:-4px;padding:12px}.dictionary-favorite-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.dictionary-favorite-controls{display:flex}.dictionary-favorite-actions{justify-content:space-between}.dictionary-action-status{text-align:left}.dictionary-letter-card{grid-template-columns:83px minmax(0,1fr);min-height:170px}.dictionary-letter-art{min-height:170px;padding-top:10px}.dictionary-letter-svg{width:82%;height:118px}.dictionary-letter-content{padding:14px 11px}.dictionary-suggestion{padding:23px 19px}.dictionary-suggestion form{grid-template-columns:1fr}.dictionary-suggestion form .button-yellow{width:100%;justify-self:stretch}.dictionary-suggestion form p{text-align:left}
}
@media(max-width:390px){.dictionary-letter-card{grid-template-columns:70px minmax(0,1fr)}.dictionary-letter-svg{height:108px}.dictionary-hero-stats span{font-size:.59rem}.dictionary-favorite-slots{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.dictionary-page *{scroll-behavior:auto!important}.dictionary-cloud-word,.dictionary-letter-card,.dictionary-page .button-yellow{transition:none!important}}

/* Registration details: equal, compact fields even when a row contains different content. */
.registration-details .form-row { align-items: start; }
.registration-details .form-row .field { display: flex; min-width: 0; flex-direction: column; align-self: start; gap: 0; }
.registration-details .form-row .field input { box-sizing: border-box; flex: none; width: 100%; height: 46px; min-height: 46px; }
.registration-details > p { max-width: 62ch; }
.registration-privacy-link { color: #176b4b; font-weight: 700; text-underline-offset: 2px; }
.registration-privacy-link:hover, .registration-privacy-link:focus-visible { color: #0b5238; text-decoration-thickness: 2px; }
.registration-resume-button { background: #237b58; color: #fff; }
.registration-resume-button:hover, .registration-resume-button:focus-visible { background: #176747; color: #fff; }
.registration-resume-button:focus-visible, .registration-privacy-link:focus-visible { outline: 3px solid rgba(35, 123, 88, .3); outline-offset: 2px; }

dialog.registration-privacy-dialog { width: min(670px, calc(100vw - 30px)); max-width: 670px; max-height: min(82vh, 780px); max-height: min(82dvh, 780px); padding: 0; overflow-y: auto; border: 1px solid #5a6267; border-radius: 16px; background: #fff; color: #202328; box-shadow: 0 26px 90px rgba(0, 0, 0, .62); }
dialog.registration-privacy-dialog::backdrop { background: rgba(9, 13, 17, .78); }
.registration-privacy-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 23px; border-bottom: 3px solid var(--yellow); background: #1d2025; color: #fff; }
.registration-privacy-head h2 { margin: 0; font-size: 1.25rem; }
.registration-privacy-close { width: 36px; height: 36px; border: 1px solid #7a8389; border-radius: 7px; background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.registration-privacy-close:hover, .registration-privacy-close:focus-visible { border-color: var(--yellow); background: #30343b; color: var(--yellow); }
.registration-privacy-content { padding: 23px 26px 29px; }
.registration-privacy-content h3, .privacy-page h3 { margin: 22px 0 6px; color: #1d2025; font-size: .94rem; }
.registration-privacy-content p, .privacy-page p { margin: 0 0 11px; color: #42494d; font-size: .83rem; line-height: 1.6; }
.registration-privacy-content a, .privacy-page p a { color: #176b4b; text-underline-offset: 2px; }
.registration-privacy-content .privacy-draft-note, .privacy-page .privacy-draft-note { padding: 13px 15px; border-left: 3px solid var(--yellow); border-radius: 5px; background: #fff8e7; color: #514a3f; }
.privacy-page { max-width: 760px; margin: 0 auto; padding: clamp(24px, 5vw, 46px); border-radius: 16px; background: #fff; }
.privacy-page h1 { margin: 0 0 22px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.privacy-page > .button { margin-top: 14px; }
@media (max-width: 650px) { .registration-privacy-head { padding: 15px 17px; } .registration-privacy-content { padding: 20px 18px 25px; } .registration-details .form-row { gap: 0; } }

/* Dicktracy Uitdagingen: houd de voortgang ook op smallere schermen leesbaar. */
@media (max-width: 700px) {
  .games-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .games-token-counter { width: 77px; padding: 5px; }
  .games-token-counter strong { font-size: 1.55rem; }
  .games-token-counter span { font-size: .51rem; }
  .games-grid { gap: 26px; }
}
@media (max-width: 440px) {
  .games-hero { grid-template-columns: 1fr; }
  .games-token-counter { justify-self: end; }
}

/* Full-colour artwork on a Clubhome text tile, beneath its editable copy. */
.clubhome-tile-text > .clubhome-tile-art{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:1;pointer-events:none;user-select:none;transition:transform .38s ease,filter .3s ease}
.clubhome-tile-text.is-clickable:hover > .clubhome-tile-art,.clubhome-tile-text.is-clickable:focus-visible > .clubhome-tile-art{transform:scale(1.045);filter:saturate(1.07) contrast(1.03)}
@media(prefers-reduced-motion:reduce){.clubhome-tile-text > .clubhome-tile-art{transition:none!important}.clubhome-tile-text.is-clickable:hover > .clubhome-tile-art,.clubhome-tile-text.is-clickable:focus-visible > .clubhome-tile-art{transform:none}}

/* Private-device login choice, using the same yellow switch as member settings. */
.remember-login-toggle{display:flex;align-items:center;gap:12px;max-width:100%;cursor:pointer;color:inherit;font-size:.9rem}
.remember-login-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.remember-login-toggle>span:nth-child(2){position:relative;flex:0 0 52px;width:52px;height:29px;border-radius:99px;background:#a9acb0;transition:background .2s ease}
.remember-login-toggle>span:nth-child(2)::after{position:absolute;top:4px;left:4px;width:21px;height:21px;border-radius:50%;background:#fff;content:"";box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .2s ease}
.remember-login-toggle input:checked+span{background:#feb400}
.remember-login-toggle input:checked+span::after{transform:translateX(23px)}
.remember-login-toggle input:focus-visible+span{outline:3px solid #feb40088;outline-offset:2px}
.remember-login-toggle strong,.remember-login-toggle small{display:block}
.remember-login-toggle small{margin-top:2px;font-size:.76rem;opacity:.75}

/* Game Center previews for the three upcoming interactive tests. */
.games-tests-card--preview { cursor:pointer; font:inherit; }
dialog.games-test-dialog { position:fixed; width:min(560px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); padding:0; overflow:auto; border:1px solid #494b50; border-radius:16px; background:#fff; color:#24272c; box-shadow:0 26px 75px rgba(0,0,0,.48); }
dialog.games-test-dialog::backdrop { background:rgba(7,9,13,.76); }
.games-test-dialog-inner { position:relative; overflow:hidden; border-radius:inherit; background:#fff; }
.games-test-dialog-heading { display:flex; min-height:158px; align-items:center; gap:23px; padding:26px 58px 26px 28px; background:linear-gradient(130deg,#24272c,#3a3d42 65%,#15171b); color:#fff; }
.games-test-dialog-icon { width:102px; height:102px; flex:none; object-fit:contain; filter:drop-shadow(0 7px 8px rgba(0,0,0,.25)); }
.games-test-dialog-heading .eyebrow { margin:0 0 5px; color:#feb400; font-size:.72rem; }
.games-test-dialog-heading h2 { margin:0; color:#fff; font-size:1.5rem; line-height:1.12; }
.games-test-dialog-copy { padding:24px 28px 28px; }
.games-test-dialog-copy p { margin:0 0 22px; font-size:.86rem; line-height:1.55; }
.games-test-dialog-close { position:absolute; z-index:2; top:13px; right:13px; display:grid; width:34px; height:34px; place-items:center; padding:0; border:0; border-radius:50%; background:#fff; color:#272a30; cursor:pointer; transition:background .16s ease,color .16s ease; }
.games-test-dialog-close:hover,.games-test-dialog-close:focus-visible { background:#feb400; color:#17191c; outline:2px solid #fff; outline-offset:2px; }
@media(max-width:480px) { .games-test-dialog-heading { gap:12px; min-height:126px; padding:22px 50px 22px 18px; } .games-test-dialog-icon { width:72px; height:72px; } .games-test-dialog-heading h2 { font-size:1.18rem; } .games-test-dialog-copy { padding:20px 18px 22px; } }