/* /create_account - the chooser in front of the two signup forms.
 * The .ca-wrap base recipe (vars, dot grid) lives in bmm_theme.css under .bmm-page-wrap.
 * Deliberately not the two-column hero + bracketed form card of /register_player,
 * /register_game and /login: this page is a fork, so it shows two doors side by side. */

.ca-wrap{
    --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --on-dark: rgba(255,255,255,.66);
    padding-bottom: clamp(40px, 6vw, 80px);
}

/* === Heading === */
.ca-head{
    position: relative;
    max-width: 640px;
    margin: 0 auto clamp(26px, 4vw, 46px);
    text-align: center;
}
.ca-h1{
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--ink);
}
.ca-sub{
    font-family: var(--sans);
    font-size: 16px; line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
}
.ca-sub strong{ color: var(--ink); font-weight: 600; }

/* === Doors === */
.ca-doors{
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(14px, 2vw, 24px);
}
@media (min-width: 820px){
    .ca-doors{ grid-template-columns: 1fr 1fr; }
}

.ca-door{
    position: relative;
    display: flex; flex-direction: column;
    padding: clamp(22px, 3.2vw, 40px);
    border-radius: 2px;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, opacity .3s ease;
}
.ca-door--play{
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(20,18,26,.02), 0 24px 60px -42px color-mix(in srgb, var(--bmm-accent) 40%, transparent);
}
.ca-door--make{
    color: #fff;
    background-color: var(--ink);
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 1.5px);
    background-size: 22px 22px;
    border: 1px solid var(--ink);
    box-shadow: 0 24px 60px -36px rgba(20,18,26,.55);
}

@media (hover: hover) and (pointer: fine){
    .ca-door:hover{ transform: translateY(-3px); }
    .ca-door--play:hover{ box-shadow: 0 1px 0 rgba(20,18,26,.02), 0 30px 60px -34px color-mix(in srgb, var(--bmm-accent) 55%, transparent); border-color: color-mix(in srgb, var(--bmm-accent) 35%, var(--line)); }
    .ca-door--make:hover{ box-shadow: 0 30px 60px -30px rgba(20,18,26,.7); }
    .ca-doors:has(.ca-door:hover) .ca-door:not(:hover){ opacity: .86; }
}
.ca-door:active{ transform: translateY(0) scale(.995); }

/* Keyboard focus lands on the button, but the whole door is the target. */
.ca-door:has(.ca-btn:focus-visible){ outline: 2px solid var(--accent); outline-offset: 4px; }

.ca-title{
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}
.ca-text{
    font-family: var(--sans);
    font-size: 15.5px; line-height: 1.55;
    color: var(--ink-soft);
    max-width: 42ch;
    margin: 0 0 26px;
}
.ca-door--make .ca-text{ color: var(--on-dark); }

/* === Figure panel === */
.ca-fig{
    display: flex; flex-direction: column;
    flex: 1 0 auto;
    margin: 0 0 28px;
    padding: 18px 18px 14px;
    background: var(--paper-tint);
    border: 1px solid var(--line-soft);
    border-radius: 2px;
}
.ca-door--make .ca-fig{
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.08);
}
.ca-cap{
    font-family: var(--sans);
    font-size: 13px; line-height: 1.4;
    color: var(--muted);
    margin: 14px 0 0;
}
.ca-door--make .ca-cap{ color: rgba(255,255,255,.5); }

/* Vote meter (player door). The bars stretch to the height of the ranking
 * panel in the other door, so both doors line up. */
.ca-meter{ flex: 1; display: flex; flex-direction: column; }
.ca-meter-top{
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 12px;
}
.ca-meter-lbl{ font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.ca-meter-x{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 34px; line-height: 1; letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    transition: color .3s ease;
}
.ca-meter-times{ font-size: 22px; color: var(--muted); margin-right: 2px; }
.ca-meter.is-full .ca-meter-x{ color: var(--accent); }

.ca-cells{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 5px;
    flex: 1;
    min-height: 40px;
}
.ca-cells i{
    display: block;
    background: var(--line);
    border-radius: 1px;
    transform: scaleY(.16);
    transform-origin: bottom;
    transition: transform .28s cubic-bezier(.3,1.4,.5,1), background-color .2s ease;
}
.ca-cells i.is-on{ transform: scaleY(1); background: color-mix(in srgb, var(--bmm-accent) 42%, white); }
/* The first bar is the vote a guest already has; the rest is what signing in adds. */
.ca-cells i.is-on:first-child{ background: var(--accent); }

/* Ranking (game door) */
.ca-rank{
    --rh: 28px;
    --rg: 6px;
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
}
.ca-rank-nums{
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-auto-rows: var(--rh); row-gap: var(--rg);
}
.ca-rank-nums li{
    display: flex; align-items: center;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 14px;
    color: rgba(255,255,255,.42);
    font-variant-numeric: tabular-nums;
}
.ca-rank-rows{
    position: relative;
    height: calc(5 * var(--rh) + 4 * var(--rg));
}
.ca-row{
    position: absolute; left: 0; right: 0; top: 0;
    height: var(--rh);
    transform: translateY(calc(var(--pos) * (var(--rh) + var(--rg))));
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.ca-rank.no-anim .ca-row{ transition: none; }
.ca-row i{
    display: block; height: 100%;
    background: rgba(255,255,255,.09);
    border-radius: 1px;
}
.ca-row.is-you{
    z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 10px;
    background: var(--accent);
    border-radius: 1px;
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--bmm-accent) 70%, transparent);
    font-family: var(--sans);
    font-size: 13px; font-weight: 600;
    color: #fff;
}
.ca-row.is-you b{
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500; font-size: 13px;
    font-variant-numeric: tabular-nums;
    opacity: .9;
}
.ca-row.is-you.is-bump b{ animation: ca-bump .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes ca-bump{
    0%   { transform: translateY(0); }
    35%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

/* === Action === */
.ca-act{
    margin-top: auto;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 12px 18px;
}
.ca-btn{
    display: inline-flex; align-items: center; justify-content: center;
    height: 52px; padding: 0 28px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px; font-weight: 500;
    color: #fff; text-decoration: none;
    background-color: var(--accent);
    background-image: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.24) 50%, transparent 62%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    background-position: 120% 0;
    border-radius: 2px;
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--bmm-accent) 70%, transparent);
    transition: background-color .2s ease, background-position .8s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
/* The whole door is the link target. */
.ca-btn::after{
    content: "";
    position: absolute; inset: 0;
    z-index: 2;
}
.ca-btn:hover{
    background-color: var(--accent-deep);
    background-position: -20% 0;
    box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--bmm-accent) 80%, transparent);
}
.ca-btn:focus-visible{ outline: none; }
.ca-door--make .ca-btn:focus-visible{ box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; }

.ca-meta{
    font-family: var(--sans);
    font-size: 13px;
    color: var(--muted);
}
.ca-door--make .ca-meta{ color: rgba(255,255,255,.5); }

/* === Footer line === */
.ca-foot{
    position: relative;
    margin: clamp(22px, 3vw, 34px) 0 0;
    text-align: center;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-soft);
}
.ca-foot a{
    position: relative; z-index: 1;
    font-family: 'Fraunces', Georgia, serif;
    color: var(--accent); text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--bmm-accent) 35%, transparent);
    transition: border-color .2s ease;
}
.ca-foot a:hover{ border-bottom-color: var(--accent); }

/* Narrow doors: the button takes the full width and the note sits under it. */
@media (max-width: 1099px){
    .ca-act{ flex-direction: column; align-items: stretch; gap: 10px; }
    .ca-btn{ width: 100%; }
    .ca-meta{ text-align: center; }
}

/* === Small screens === */
@media (max-width: 819px){
    .ca-wrap{ padding-left: 6px; padding-right: 6px; }
    .ca-door:has(.ca-btn:focus-visible){ outline-offset: 2px; }
    .ca-door{ padding: 22px 20px 20px; }
    .ca-title{ margin-bottom: 10px; }
    .ca-text{ font-size: 15px; margin-bottom: 18px; }
    .ca-fig{ padding: 14px 14px 12px; margin-bottom: 20px; }
    .ca-meter-x{ font-size: 28px; }
    .ca-cells{ min-height: 56px; gap: 4px; }
    .ca-rank{ --rh: 22px; --rg: 5px; }
    .ca-cap{ margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce){
    .ca-door, .ca-btn, .ca-cells i, .ca-row, .ca-meter-x{ transition: none; }
    .ca-row.is-you.is-bump b{ animation: none; }
}