/* Dailyd accounts: sign-up pop-up + steps (#suModal), the results-screen card and Settings > Account (js/account.js).
   Built on the shared .modal/.sheet/.btn classes, so every decade theme styles it automatically. */
.modal.su{z-index:120}
.modal.su .sheet{width:min(440px,100%);padding:0;overflow:hidden;text-align:left}
.su-strip{height:10px;background:var(--strip,var(--accent));background-color:var(--accent)}
html[data-theme="2020s"] .su-strip{background:linear-gradient(90deg,#ff6f9b,#6a7dff,#2fd3c7)}
.su-in{padding:18px 20px 20px}
.su-su h2{margin:2px 34px 4px 0 !important;font-size:1.55rem !important;line-height:1.15}
.su-su .su-sub{margin:0 0 14px;color:var(--muted);font-size:.95rem}
.su-kept{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.su-kept div{border:var(--frame,1px solid var(--line));border-radius:10px;padding:8px 4px;text-align:center;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.su-kept b{display:block;font:700 1.25rem/1.1 var(--logo-font,var(--font-display))}
.su-kept span{font-size:.74rem;color:var(--muted)}
.su-ben{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.su-ben li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;font-size:.95rem !important;line-height:1.3}
.su-ben .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.su-ben b{display:block}
.su-ben small{color:var(--muted);font-size:.82rem}
.su-acts{display:grid;gap:8px}
.su-acts .btn{width:100%;justify-content:center;min-height:48px;font-size:1.02rem;margin:0}
.su-fine{margin:12px 0 0;text-align:center;font-size:.8rem !important;color:var(--muted)}
.su-fine a,.su-fine button{color:inherit;font:inherit;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
.su-field{display:grid;gap:6px;margin:0 0 12px}
.su-field label{font-weight:700;font-size:.9rem}
.su-field input{box-sizing:border-box;width:100%;min-height:50px;padding:10px 14px;font:600 1.05rem var(--font-body);border-radius:10px;
  border:var(--edge-w,2px) solid var(--edge,#111);background:var(--form-bg,#fff);color:var(--form-ink,#111)}
.su-field input:focus{outline:3px solid var(--accent);outline-offset:1px}
.su-back{background:none;border:0;color:var(--muted);font:600 .88rem var(--font-body);padding:0;margin:0 0 8px;cursor:pointer}
.su-ok{font-size:2.6rem;line-height:1;margin:2px 0 6px}
.su-steps{display:flex;gap:6px;margin:0 0 12px}
.su-steps i{flex:1;height:4px;border-radius:2px;background:color-mix(in srgb,var(--muted) 30%,transparent)}
.su-steps i.on{background:var(--accent)}
/* phones: a bottom sheet that slides up from the bottom; the score and squares stay visible behind it */
@media (max-width:600px){
  .modal.su{align-items:flex-end;padding:0}
  .modal.su .sheet{width:100%;border-radius:22px 22px 0 0 !important;border-bottom:0 !important;padding-bottom:env(safe-area-inset-bottom)}
  html[data-theme="1990s"] .modal.su .sheet{border-radius:0 !important}
  .su-in{padding:14px 18px calc(18px + var(--su-sab,0px))}
  .su-grab{width:44px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--muted) 45%,transparent);margin:8px auto 0}
}
@media (min-width:601px){ .su-grab{display:none} .modal.su{align-items:center;padding:12px} }
/* inline "saved on this device only" card in the results screen (always there for players without an account, no pop-up) */
.su-save{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;margin:14px 0 4px;padding:12px 14px;border-radius:12px;
  border:2px dashed color-mix(in srgb,var(--accent) 70%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent);text-align:left}
.su-save .ic{font-size:1.5rem;grid-row:span 2}
.su-save b{font-size:.98rem}
.su-save small{font-size:.84rem;color:var(--muted)}
.su-save .btn{grid-column:1 / -1;width:100%;justify-content:center;margin:6px 0 0}
.su-saved{display:flex;gap:8px;align-items:center;justify-content:center;margin:12px 0 2px;font-size:.88rem;color:var(--muted)}
.su-saved b{color:var(--green,#2e9e5b)}
.modal.su .close{top:18px;right:12px;z-index:2}
.su-steps{margin-right:44px !important}
html[data-theme="2020s"] .modal.su .sheet{background:var(--sheen,none),rgba(255,255,255,.96)}
@media (prefers-color-scheme:dark){ html[data-theme="2020s"] .modal.su .sheet{background:rgba(22,22,30,.96)} }
html[data-theme="2020s"] .su-su .btn.secondary{border:1.5px solid rgba(10,12,30,.28)}

/* the code field: one real input (autocomplete=one-time-code, so iOS/Android offer the code from Mail) over six boxes */
.su-code{position:relative;margin:4px 0 12px}
.su-code input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;padding:0;margin:0;z-index:2;cursor:text;color:transparent;caret-color:transparent;background:transparent}
.su-boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.su-boxes span{height:54px;border-radius:10px;border:var(--edge-w,2px) solid var(--edge,#111);background:var(--form-bg,#fff);color:var(--form-ink,#111);
  display:grid;place-items:center;font:700 1.5rem var(--font-body)}
.su-boxes span.on{outline:3px solid var(--accent);outline-offset:1px}
html[data-theme="2020s"] .su-boxes span{border:1.5px solid rgba(10,12,30,.4);background:#fff;color:#111}
.su-err{min-height:1.2em;margin:-4px 0 10px;color:var(--red,#c0392b);font-weight:700;font-size:.9rem}
.su-err:empty{min-height:0;margin:0}
.su-sub b{overflow-wrap:anywhere}
/* Settings > Account */
.acct-box{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;margin:0 0 10px;
  border:var(--frame,1px solid var(--line));background:color-mix(in srgb,var(--accent) 8%,transparent)}
.acct-box .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;background:color-mix(in srgb,var(--accent) 18%,transparent)}
.acct-box b{display:block;overflow-wrap:anywhere;font-size:1.02rem}
.acct-box small{display:block;color:var(--muted);font-size:.8rem}
.modal .su-acts{margin:10px 0}
.acct-confirm{padding:12px 14px;border-radius:12px;border:2px solid var(--red,#c0392b);background:color-mix(in srgb,var(--red,#c0392b) 7%,transparent)}
.acct-confirm p{margin:0 0 8px}
.btn.danger-btn{background:var(--red,#c0392b) !important;border-color:var(--red,#c0392b) !important;color:#fff !important}
.acct-slot:empty{display:none}
/* a medal toast never sits on top of the sign-up sheet */
body:has(#suModal:not([hidden])) .medal-toast{display:none}