/* The boutique club window: the same on the game, the creator and the cheers table. */
/* The alcohol warning stays in sight under it, as on every screen. */
body:has(.club.on) .warn { z-index: 41; }
.club { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(4, 2, 3, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding-bottom: calc(max(14px, env(safe-area-inset-bottom)) + max(36px, 5.4vh) + 2px);
  opacity: 0; visibility: hidden; transition: opacity .45s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s; font-family: "Ligne Sans", "Heebo", system-ui, sans-serif; color: #f3eadf; }
.club.on { opacity: 1; visibility: visible; transition: opacity .45s cubic-bezier(.2, .7, .2, 1); }
.cl-in { position: relative; width: min(100%, 460px); max-height: calc(100% - max(18px, env(safe-area-inset-top)) - 10px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 30px 24px 24px; border-radius: 22px; text-align: center;
  background: radial-gradient(120% 60% at 50% 0%, rgba(230, 207, 156, .13), transparent 60%), #120a0c; box-shadow: inset 0 1px 0 rgba(255, 240, 205, .18), 0 -30px 60px -20px rgba(0, 0, 0, .8);
  transform: translateY(24px); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.cl-in::-webkit-scrollbar { display: none; }
.club.on .cl-in { transform: none; }
.cl-x { position: absolute; top: 14px; inset-inline-end: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px rgba(243, 234, 223, .3); cursor: pointer; }
.cl-x::before, .cl-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; background: #f3eadf; transform: translate(-50%, -50%) rotate(45deg); }
.cl-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.cl-crest { width: 54px; height: 54px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 240, 205, .22), rgba(10, 6, 7, .2) 70%); box-shadow: inset 0 0 0 1px rgba(230, 207, 156, .7), 0 0 26px rgba(230, 207, 156, .28); }
.cl-crest svg { width: 28px; height: 28px; fill: none; stroke: #e6cf9c; stroke-width: 1.5; stroke-linecap: round; }
.cl-eyebrow { margin: 12px 0 0; font-size: 12px; letter-spacing: .04em; color: rgba(230, 207, 156, .85); }
.club h3 { margin: 6px 0 0; font: 300 30px/1.15 "Ligne Serif", "David", serif; }
.cl-p { margin: 8px auto 0; max-width: 340px; font-size: 14px; line-height: 1.6; color: rgba(243, 234, 223, .78); }
.cl-perks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; text-align: start; }
.cl-perks li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 15px; line-height: 1.35; background: rgba(243, 234, 223, .035); }
.cl-perks svg { flex: none; width: 22px; height: 22px; fill: none; stroke: #e6cf9c; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cl-perks.done li { background: rgba(230, 207, 156, .06); }
.cl-perks .hasod-logo { width: 30px; height: 15px; vertical-align: -3px; background: #e6cf9c; }
.cl-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 340px; height: 54px; margin: 22px auto 0; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 16px/1 "Ligne Sans", "Heebo", system-ui, sans-serif; color: #f8ead0; background: linear-gradient(rgba(44, 29, 20, .92), rgba(18, 11, 9, .94)); box-shadow: inset 0 0 0 1.5px rgba(230, 207, 156, .8), 0 16px 34px -16px rgba(230, 207, 156, .6), inset 0 1px 0 rgba(255, 240, 205, .14); text-shadow: 0 0 16px rgba(230, 207, 156, .45); }
.cl-btn:active { transform: scale(.985); }
.cl-btn:disabled { opacity: .55; }
.cl-btn.small { height: 44px; margin-top: 14px; font-size: 14px; }
.cl-link { display: block; margin: 12px auto 0; padding: 10px 6px; border: 0; background: none; cursor: pointer; font: 400 14px "Ligne Sans", "Heebo", system-ui, sans-serif; color: rgba(243, 234, 223, .78);
  text-decoration: underline; text-decoration-color: rgba(243, 234, 223, .3); text-underline-offset: 6px; }
.cl-form { display: grid; gap: 12px; margin-top: 18px; text-align: start; }
.cl-field { display: grid; gap: 6px; font-size: 13px; color: rgba(243, 234, 223, .75); }
.cl-field input { width: 100%; height: 50px; padding: 0 14px; border: 0; border-radius: 14px; font: 400 16px "Ligne Sans", "Heebo", system-ui, sans-serif; color: #f3eadf;
  background: rgba(243, 234, 223, .06); box-shadow: inset 0 0 0 1px rgba(230, 207, 156, .28); outline: none; transition: box-shadow .25s; }
.cl-field input[dir="ltr"] { text-align: left; }
.cl-field input::placeholder { color: rgba(243, 234, 223, .35); }
.cl-field input:focus { box-shadow: inset 0 0 0 1.5px #e6cf9c, 0 0 0 4px rgba(230, 207, 156, .12); }
.cl-social { border-radius: 14px; background: rgba(243, 234, 223, .035); padding: 0 14px; }
.cl-social[open] { padding-bottom: 14px; }
.cl-social > *:not(summary) + * { margin-top: 12px; }
.cl-social summary { list-style: none; cursor: pointer; padding: 13px 0; font-size: 15px; position: relative; padding-inline-end: 26px; }
.cl-social summary::-webkit-details-marker { display: none; }
.cl-social summary::after { content: ""; position: absolute; inset-inline-end: 4px; top: 20px; width: 8px; height: 8px; border-bottom: 1.5px solid #e6cf9c; border-left: 1.5px solid #e6cf9c; transform: rotate(-45deg); transition: transform .3s; }
.cl-social[open] summary::after { transform: rotate(135deg); top: 24px; }
.cl-social summary small { display: block; margin-top: 3px; font-size: 12px; color: rgba(243, 234, 223, .6); }
.cl-switch { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.5; color: rgba(243, 234, 223, .85); cursor: pointer; }
.cl-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cl-switch i { flex: none; position: relative; width: 42px; height: 25px; margin-top: 1px; border-radius: 999px; background: rgba(243, 234, 223, .14); box-shadow: inset 0 0 0 1px rgba(243, 234, 223, .18); transition: background .25s; }
.cl-switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 19px; height: 19px; border-radius: 50%; background: #f3eadf; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); transition: translate .25s cubic-bezier(.2, .7, .2, 1); }
.cl-switch input:checked + i { background: linear-gradient(180deg, #f6e3b4, #c9a45c); }
.cl-switch input:checked + i::after { translate: -17px 0; }
[dir="ltr"] .cl-switch input:checked + i::after { translate: 17px 0; }
.cl-switch input:focus-visible + i { outline: 2px solid #e6cf9c; outline-offset: 2px; }
.cl-err { min-height: 0; margin: 0; font-size: 14px; color: #ffcf9a; text-align: center; }
.cl-err:empty { display: none; }
.cl-fine { margin: 0; font-size: 12px; line-height: 1.6; color: rgba(243, 234, 223, .58); }
.cl-form > .cl-fine { text-align: center; }
.cl-inline { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.cl-to { margin: 16px 0 0; font-size: 13px; color: rgba(243, 234, 223, .7); }
.club .cl-social { margin-top: 14px; text-align: start; }
@media (prefers-reduced-motion: reduce) { .club, .cl-in { transition: none; } }