*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit}button,input,select{font:inherit}.wrap{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:28px 0 60px}.topbar{display:flex;align-items:center;gap:24px;padding:16px 24px;background:var(--navy);color:#fff;flex-wrap:wrap}.brand{font-weight:900;letter-spacing:.02em;font-size:1.45rem}.brand span{color:#f4c84a}.navlinks{display:flex;gap:8px;flex:1;flex-wrap:wrap}.navlinks a{text-decoration:none;padding:10px 14px;border-radius:10px;color:#dbe7ff}.navlinks a.active,.navlinks a:hover{background:#24426f;color:#fff}.account-area{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.coins{font-weight:800;color:#f4c84a}.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px}.outline-card{border:2px dashed var(--border);border-radius:12px;padding:24px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);background:transparent}.grid{display:grid;gap:18px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.btn{border:0;border-radius:10px;padding:11px 16px;min-height:44px;background:var(--accent);color:#fff;font-weight:800;cursor:pointer}.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}.topbar .btn.secondary{color:#fff;border-color:#4f6282}.btn.green{background:#2d9f65}.btn.purple{background:#7857c9}.btn:disabled{opacity:.5;cursor:not-allowed}.muted{color:var(--muted)}.small{font-size:.9rem}.hidden{display:none!important}.field{display:grid;gap:7px;margin:14px 0}.field input,.field select{width:100%;min-height:46px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--card);color:var(--text)}.status{min-height:24px;margin-top:14px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 12px}.section-title h2{margin:0}.auth-shell{width:min(520px,calc(100% - 30px));margin:56px auto}.tabs{display:flex;gap:10px;margin:18px 0}.badge{display:inline-block;font-weight:900;font-size:.78rem;letter-spacing:.05em}.help-box{border:1px solid var(--border);background:var(--soft);border-radius:12px;padding:14px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:850px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}@media(max-width:560px){.grid-3,.grid-4{grid-template-columns:1fr}.wrap{width:min(100% - 20px,1180px)}.topbar{padding:14px}.navlinks{order:3;width:100%}.account-area{width:100%}}

@media(max-width:640px){}

/* V5.1 friends overlay: keep active games open */
.pp-friends-overlay{position:fixed;inset:0;z-index:200;background:rgba(8,13,24,.62);display:flex;align-items:center;justify-content:center;padding:18px}.pp-friends-dialog{width:min(760px,96vw);height:min(720px,88vh);background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:0 24px 70px rgba(0,0,0,.36)}.pp-friends-head{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid var(--border);font-size:1.08rem}.pp-friends-close{width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:1.7rem;cursor:pointer}.pp-friends-dialog iframe{width:100%;height:100%;border:0;background:var(--bg)}@media(max-width:600px){.pp-friends-overlay{padding:8px}.pp-friends-dialog{width:100%;height:90vh}}
body.pp-embed .topbar{display:none}body.pp-embed .wrap{padding-top:14px}
/* V5.1 shared setting explanations (also used by Farkle, which has its own game shell) */
.setting-info{position:relative;border:0;background:transparent;color:var(--accent);font-size:1rem;font-weight:900;cursor:help;padding:1px 4px;vertical-align:middle}.setting-info::after{content:attr(data-tip);position:absolute;z-index:80;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);width:min(300px,78vw);padding:10px 12px;border-radius:10px;background:#172032;color:#fff;font-size:.86rem;font-weight:600;line-height:1.35;box-shadow:0 10px 28px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .12s}.setting-info:hover::after,.setting-info:focus-visible::after,.setting-info.tip-open::after{opacity:1}.setting-info:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* V5.5b: keep the top menu on one line on desktop (the Sound button made it wrap) */
@media(min-width:1101px){.topbar{gap:14px;padding:14px 20px}.topbar .navlinks{flex-wrap:nowrap;min-width:0}.topbar .navlinks a{padding:10px 11px;white-space:nowrap}.account-area{flex-wrap:nowrap;white-space:nowrap}}
/* Wide-ish screens: tighter header so the menu, Coins, Settings and Sound fit on one line without overlapping. Below 1101px the header wraps onto two rows instead. */
@media(min-width:1101px) and (max-width:1280px){.topbar{gap:8px;padding:12px 12px}.topbar .brand{font-size:1.15rem}.topbar .navlinks{gap:0}.topbar .navlinks a{padding:8px 7px;font-size:.92rem}.account-area{gap:6px}.account-area .btn{padding:8px 10px;font-size:.92rem}.account-area .sound-btn{font-size:.92rem!important}}
.sound-btn{min-height:44px;font-size:1rem;font-weight:800}