/* --- aloituslogo: näytetään vain splashina ennen valikkoa --- */
#splashLogo{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:
    radial-gradient(ellipse 58% 46% at 50% 46%, rgba(216,183,110,.16), transparent 72%),
    linear-gradient(180deg,#080b10 0%,#020407 100%);
  pointer-events:auto;opacity:1}
#splashLogo.done{animation:splashFade .9s var(--ease) forwards}
#splashLogo.hidden{display:none!important}
#splashLogo.blank{background:#000;animation:none;opacity:1;transform:none}
#splashLogo.blank img{opacity:0;animation:none}
#splashLogo img{width:min(72vw, 720px);max-height:76svh;border-radius:22px;
  border:1px solid rgba(216,183,110,.32);
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 34px 90px -28px rgba(0,0,0,.95),
    0 0 92px -22px rgba(216,183,110,.36);
  animation:splashZoom 5s var(--ease) forwards}
@keyframes splashZoom{from{transform:scale(.9);opacity:0}12%{opacity:1}to{transform:scale(1.04);opacity:1}}
@keyframes splashFade{to{opacity:0;transform:scale(1.03)}}
@media(max-width:560px){#splashLogo img{width:min(90vw, 520px);max-height:68svh;border-radius:18px}}

/* --- valikko: splashin jälkeen ilman isoa kuvalogoa --- */
#menuBg{position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 52% 42% at 50% 28%, rgba(216,183,110,.11), transparent 70%),
    linear-gradient(180deg,rgba(10,17,29,.94),rgba(2,5,9,.98));
  filter:none;transform:none}
#menuBg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,12,22,.46) 0%,rgba(2,5,9,.82) 100%)}
#menu{max-width:980px;margin:clamp(.35rem,2vh,1.1rem) auto 2rem;text-align:center;
  background:transparent;border:0;box-shadow:none;padding:0}
#menu .card-panel{background:transparent;border:0;border-radius:0;padding:.35rem 1rem 1.1rem;
  box-shadow:none}
#menu p{color:var(--txt-dim);line-height:1.6;font-size:.9rem}
.mode-switch{width:min(100%,620px);margin:.2rem auto .9rem;padding:4px;display:grid;
  grid-template-columns:1fr 1fr;gap:4px;border:1px solid rgba(216,183,110,.28);
  border-radius:14px;background:rgba(0,0,0,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.mode-switch .mode-pick{min-height:48px;border:0;border-radius:10px;background:transparent;
  color:var(--txt-dim);font-weight:650}
.mode-switch .mode-pick:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.mode-switch .mode-pick.sel{color:#261c05;background:linear-gradient(177deg,var(--gold-lt),#dcbd77 45%,#b8953f);
  box-shadow:0 7px 20px -12px rgba(216,183,110,.9)}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;align-items:stretch;margin:.35rem auto .9rem}
.setup-column{text-align:left;padding:.95rem;border-radius:18px;
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:.2s var(--ease);cursor:pointer}
.setup-column.active{border-color:rgba(216,183,110,.48);background:rgba(216,183,110,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 46px -34px rgba(216,183,110,.75)}
.setup-head{display:flex;align-items:center;justify-content:space-between;gap:.65rem;margin-bottom:.75rem}
.setup-title{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.09em;color:var(--gold);
  font-weight:400}
.setup-state{display:inline-flex;align-items:center;gap:.35rem;min-height:30px;padding:.3rem .58rem;
  border-radius:999px;border:1px solid rgba(255,255,255,.1);color:var(--txt-dim);
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.setup-state::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)}
.setup-column.active .setup-state{color:var(--gold-lt);border-color:rgba(216,183,110,.4);
  background:rgba(216,183,110,.08)}
.setup-column.active .setup-state::before{background:var(--gold-lt);box-shadow:0 0 10px rgba(216,183,110,.7)}
.setup-column:not(.active) .setup-state{visibility:hidden}
.setup-controls{display:grid;align-content:start}
.setup-note{font-size:.74rem;color:var(--txt-dim);line-height:1.35;margin:.2rem 0 .65rem}
.setup-column .lbl{margin-top:.7rem}
.mode-pick{min-height:40px;padding:.45rem .75rem;white-space:nowrap}
.mode-pick.sel{background:linear-gradient(177deg,var(--gold-lt),#dcbd77 45%,#b8953f);
  color:#2a1f06;border-color:#8d7132;font-weight:700}
.opt-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:.45rem 0 .75rem}
.setup-column .opt-row{justify-content:flex-start;margin-bottom:.25rem}
.opt-row button.sel{background:linear-gradient(177deg,var(--gold-lt),#dcbd77 45%,#b8953f);
  color:#2a1f06;border-color:#8d7132;font-weight:700}
.lbl{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim)}
.setup-footer{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(300px,1.1fr);
  align-items:end;gap:1rem;width:min(100%,760px);margin:.15rem auto 0;padding:.8rem 1rem;
  border-top:1px solid rgba(216,183,110,.2)}
.target-panel{max-width:none;margin:0}
.target-panel .opt-row{justify-content:flex-start;margin-bottom:0}
.menu-actions{display:grid;grid-template-columns:1fr;gap:.45rem;max-width:none;margin:0}
.menu-actions button{min-height:46px}
.menu-profile-name{grid-column:1 / -1;min-height:1.1rem;color:var(--txt-dim);font-size:.76rem}
.profile-form{display:grid;gap:.7rem}
.profile-form input{width:100%;box-sizing:border-box;border-radius:12px;border:1px solid rgba(216,183,110,.32);
  background:rgba(0,0,0,.28);color:var(--txt);font:inherit;font-size:1rem;padding:.75rem .85rem;outline:none}
.profile-form input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(216,183,110,.16)}
.profile-actions{display:flex;gap:.5rem;justify-content:space-between;margin-top:.2rem}