
/* Personal setup owns only the lobby; the raster reading table keeps its skin. */
body.personal-lobby{--np-base:#14101e;--np-surface:#282033;--np-accent:#695283}
.personal-main{position:relative;isolation:isolate;max-width:1440px;margin:auto;padding:42px 36px 24px}
.personal-backdrop{position:absolute;inset:0 0 auto;height:680px;z-index:-1;opacity:.2;pointer-events:none;background:linear-gradient(180deg,#14101e00,#14101e 94%),linear-gradient(90deg,#14101e 8%,#14101e88 65%,#14101e33),url("assets/lobby-club/hero.webp") center 40%/cover}
.personal-eyebrow{margin:0 0 7px;font-size:10px;font-weight:600;letter-spacing:.16em;color:#d5b67c}
.lobby-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 30px}
.lobby-intro h1{font:400 clamp(30px,3.4vw,48px)/1.45 "Lobby Display",serif;margin:0 0 12px;letter-spacing:-.025em}
.lobby-intro h1 br{display:none}
.lobby-intro>div>p:last-child{font-size:14px;line-height:1.8;color:#c1b9ca;margin:0;max-width:740px}
.privacy-seal{display:flex;align-items:center;gap:12px;flex:none;padding:15px 18px;border:1px solid #d8baff26;border-radius:14px;background:#29203399}
.privacy-seal i{font-size:28px;font-style:normal;color:#d1b1ec}
.privacy-seal b,.privacy-seal small{display:block}.privacy-seal b{font-size:12px}.privacy-seal small{font-size:10px;color:#bab0c5;margin-top:4px}
.personal-grid{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(0,1.55fr);gap:22px}
.personal-panel{border:1px solid #d9bded23;border-radius:22px;background:linear-gradient(140deg,#30263aee,#1d1829f5);padding:26px;min-width:0;box-shadow:0 16px 48px #05020b24}
.personal-panel-title{display:flex;align-items:center;gap:13px}
.personal-panel-title>span:first-child{display:grid;place-items:center;width:37px;height:37px;flex:none;border:1px solid #e1c19538;border-radius:12px;color:#e4c595;font:italic 16px Georgia,serif}
.personal-panel-title h2{margin:0;font-size:21px;line-height:1.55;font-weight:600}
.personal-panel-title .personal-eyebrow{font-size:8px;margin-bottom:2px}
.personal-muted{font-size:12px;color:#b9afc4;line-height:1.85;margin:12px 0 20px}
.personal-field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.personal-field>span,.focus-picker legend{font-size:12px;color:#e4d6e7;font-weight:600}
.personal-field input,.personal-field select{width:100%;height:48px;min-width:0;border:1px solid #d4bfe52e;border-radius:10px;background:#15101fd4;color:#fff1dd;font-size:16px;padding:10px 12px;outline-offset:3px}
.personal-field input::placeholder{font-size:13px;color:#92869f}
.personal-field-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:13px}
.focus-picker{border:0;padding:0;margin:3px 0 20px;min-width:0}.focus-picker legend{margin-bottom:12px}
.focus-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.focus-option{position:relative;cursor:pointer}
.focus-option input{position:absolute;opacity:0;width:1px;height:1px}
.focus-option span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:8px 5px;border:1px solid #d4bfe523;border-radius:12px;background:#17122055;color:#bfb2ce;font-size:11px;text-align:center}
.focus-option i{font-size:18px;font-style:normal;color:#c3a1da}
.focus-option input:checked+span{background:#7a50822a;border-color:#d0a57f99;color:#ffe5b3}.focus-option input:checked+span i{color:#f0cf94}
.focus-option input:focus-visible+span{outline:2px solid #f4ce87;outline-offset:3px}
.personal-note{display:flex;gap:10px;padding:14px;border-radius:12px;background:#c5a5e409;color:#b6a9c2}
.personal-note>span{color:#dcbf87}.personal-note p{margin:0;font-size:11px;line-height:1.85}
.privacy-details{border-top:1px solid #d4bfe51c;margin-top:22px;padding-top:16px;font-size:11px;color:#b3a7c0;line-height:1.85}
.privacy-details summary{cursor:pointer;min-height:44px;padding:10px 0}.privacy-details p{margin:0 0 14px}
.clear-profile,.quiet-button{background:none;border:0;color:#b8a8c3;text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-size:11px;padding:8px 0;min-height:44px}
.clear-profile:disabled{opacity:.4;cursor:default}
.court-count{margin-left:auto;font-size:12px;color:#ddc58f;white-space:nowrap}
.court-count span{font-size:10px;color:#ac9ab9}
.representative-preview{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;align-items:center;min-height:270px;margin:0 0 20px;border:1px solid #d7b7ec1a;border-radius:17px;background:radial-gradient(ellipse at 22% 44%,#9862bd26,transparent 66%),#110c1966;padding:18px 25px}
.representative-art{position:relative;display:grid;place-items:center;height:276px;isolation:isolate}
.representative-art img{position:relative;z-index:1;display:block;width:142px;height:auto;aspect-ratio:404/784;object-fit:fill;object-view-box:inset(80px);filter:drop-shadow(0 9px 12px #0009)}
.representative-art img[data-back]{object-view-box:none;aspect-ratio:564/944;width:158px}
.card-halo{position:absolute;width:215px;height:215px;border:1px solid #e8cba324;border-radius:50%;box-shadow:0 0 0 14px #d9b5f005,0 0 0 35px #d9b5f004;z-index:-1}
.card-pedestal{position:absolute;bottom:-2px;width:135px;height:10px;border:1px solid #d6b88531;border-radius:50%;background:#0005;filter:blur(2px)}
.representative-copy{min-width:0}.representative-copy .personal-eyebrow{font-size:9px;letter-spacing:.08em;overflow-wrap:anywhere}
.representative-copy h3{font:400 clamp(22px,2.1vw,29px)/1.6 "Lobby Display",serif;color:#ffebc8;margin:6px 0 12px;overflow-wrap:anywhere}
.representative-copy>p:not(.personal-eyebrow){font-size:12px;line-height:1.85;color:#bfb0ca;max-width:290px}
.representative-copy .selection-state{font-size:10px!important;color:#e2c493!important;border-top:1px solid #d4bfe51f;padding-top:12px}
.level-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;background:#120e1b80;border-radius:12px;padding:5px}
.level-picker button{border:0;border-radius:8px;min-height:44px;background:none;font-size:12px;color:#a99bb6;cursor:pointer}
.level-picker button[aria-pressed=true]{background:linear-gradient(135deg,#84607888,#77568055);color:#ffe5b4;box-shadow:inset 0 0 0 1px #f4ce8733}
.card-suggestion{font-size:10px;color:#b7a8c3;line-height:1.8;margin:12px 0 14px;min-height:18px}
.court-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.court-choice{display:flex;position:relative;min-width:0;flex-direction:column;align-items:center;gap:9px;padding:10px 8px 13px;background:#17112066;border:1px solid #b39ac327;border-radius:12px;cursor:pointer;color:#c9bad4}
.court-choice img{display:block;width:100%;max-width:105px;height:auto;aspect-ratio:404/784;object-fit:fill;object-view-box:inset(80px);filter:drop-shadow(0 4px 5px #0007)}
.court-choice b{font-size:11px;line-height:1.6;font-weight:600;word-break:normal}
.court-choice small{font-size:8px;color:#a394af;letter-spacing:.06em}
.court-choice[aria-pressed=true]{border-color:#ebc88a;background:linear-gradient(160deg,#ad775e29,#54385a55);box-shadow:0 0 0 2px #e1b47b14}
.court-choice[aria-pressed=true]::after{content:"✓";position:absolute;top:6px;right:6px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#edca92;color:#30203c;font-size:13px;font-weight:600}
.court-choice:hover{border-color:#e1bd8380;background-color:#ffffff05}
.card-method-note{font-size:10px;line-height:1.85;color:#a99ab5;margin:18px 0 0}
.setup-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:20px 24px;border:1px solid #d4b58630;border-radius:17px;background:linear-gradient(105deg,#2c2135,#211928)}
.setup-summary{display:flex;align-items:center;gap:13px;margin-right:auto}.setup-summary>span{font-size:27px;color:#e2bd7f}
.setup-summary b,.setup-summary small{display:block}.setup-summary b{font-size:13px}.setup-summary small{font-size:10px;color:#b9aaca;margin-top:5px}
.setup-buttons{display:flex;gap:10px}
.primary-action,.secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:48px;padding:12px 20px;border:1px solid #d9bcee30;border-radius:11px;cursor:pointer;font-size:13px;font-weight:600}
.primary-action{color:#312033;background:linear-gradient(120deg,#f6ddb0,#d8b076);border-color:#efd2a5;box-shadow:0 5px 18px #c38b3930}
.secondary-action{color:#e1cde9;background:#ffffff04}
.primary-action:hover{filter:brightness(1.08)}.secondary-action:hover{background:#ffffff09}
.skip-setup{font-size:11px;color:#c4b1d0;margin-left:auto;min-height:44px;display:inline-flex;align-items:center}
#setup-status{font-size:12px;margin:0;color:#efd1a1;line-height:1.8;max-width:75%}
#setup-status:empty{display:none}#setup-status[data-error=true]{color:#f5adbc}
.personal-disclaimer{font-size:10px;color:#a396b0;line-height:1.85;text-align:center;margin:22px auto 0}
.personal-main :is(a,button,input,select,summary):focus-visible,.clear-dialog button:focus-visible{outline:2px solid #f4ce87;outline-offset:4px}
.clear-dialog{max-width:min(470px,calc(100vw - 32px));border:1px solid #d8b7eb44;border-radius:20px;padding:28px;background:#261d31;color:#ffebd0}
.clear-dialog::backdrop{background:#0d0617bb;backdrop-filter:blur(5px)}
.clear-dialog h2{font-size:21px;margin:0 0 12px}.clear-dialog p{font-size:13px;line-height:1.8;color:#c8b9d2}.clear-dialog>div{display:flex;justify-content:flex-end;gap:12px;margin-top:22px}
@media(max-width:1100px){.personal-main{padding:28px 22px}.privacy-seal{display:none}.personal-grid{grid-template-columns:minmax(260px,.8fr) minmax(0,1.3fr);gap:16px}.personal-panel{padding:20px}.representative-preview{grid-template-columns:135px minmax(0,1fr);gap:13px;padding:15px}.representative-art{height:220px}.representative-art img{width:115px}.representative-art img[data-back]{width:130px}.card-halo{width:155px;height:155px}.court-grid{gap:7px}.court-choice{padding-inline:5px}.court-choice b{font-size:10px}.representative-copy h3{font-size:23px}}
@media(max-width:760px){.personal-main{padding:24px 16px}.personal-grid{grid-template-columns:minmax(0,1fr)}.lobby-intro{margin-bottom:22px}.lobby-intro h1{font-size:31px}.lobby-intro h1 br{display:block}.lobby-intro>div>p:last-child{font-size:12px}.personal-panel{padding:22px;border-radius:18px}.personal-panel-title h2{font-size:20px}.focus-options{grid-template-columns:repeat(3,minmax(0,1fr))}.personal-field input::placeholder{font-size:14px}.representative-preview{grid-template-columns:140px minmax(0,1fr);padding:18px 12px;margin-bottom:18px}.representative-copy h3{font-size:23px}.court-choice img{max-width:110px}.setup-actions{padding:20px}.setup-summary{width:100%}.setup-buttons{width:100%}.setup-buttons>*{flex:1;padding-inline:10px;font-size:12px}.skip-setup{margin:0 auto}#setup-status{max-width:100%;width:100%}.personal-disclaimer{max-width:430px}}
@media(max-width:440px){.personal-main{padding-inline:12px}.personal-panel{padding:18px 15px}.representative-preview{grid-template-columns:105px minmax(0,1fr);gap:14px}.representative-art{height:205px}.representative-art img{width:100px}.representative-art img[data-back]{width:112px}.card-halo{width:125px;height:125px;box-shadow:0 0 0 12px #d9b5f006}.representative-copy h3{font-size:21px}.representative-copy>p:not(.personal-eyebrow){font-size:11px}.court-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.court-choice img{max-width:103px}.court-choice b{font-size:12px}.court-choice small{font-size:9px}.level-picker button{font-size:11px}.personal-field-row{grid-template-columns:.75fr 1.25fr;gap:10px}.setup-buttons{flex-direction:column}.primary-action,.secondary-action{min-height:48px}.personal-grid{gap:16px}}
@media(prefers-reduced-motion:no-preference){.court-choice,.focus-option span{transition:border-color .16s,background-color .16s}}

/* The way back to Nungplay, as every other lobby has it: the header carries
   it on a wide screen, and on a phone it is the first entry of the menu
   behind the button instead, so the header keeps its room. The other lobbies
   get the menu entry drawn by the shared top menu; this page draws its own
   menu, so the entry is written in and shown at the same width. */
@media(min-width:1001px){.np-lobby[data-lobby-game=tarot] .np-header nav .np-nav-portal{display:none!important}}
@media(max-width:1000px){.np-lobby[data-lobby-game=tarot] .np-header .portal-home-link{display:none!important}}
