/* FREE-Q shared theme — tokens + friendly polish across pages */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root{
  --bg:#06101c;
  --bg-soft:#0a1626;
  --panel:#0f1e30;
  --panel2:#14263c;
  --panel-lift:#183049;
  --line:#274563;
  --line-soft:#1c344d;
  --text:#f4f8fc;
  --muted:#95abc3;
  --green:#5ee9b5;
  --green-deep:#12b981;
  --blue:#4cc9f0;
  --cyan:var(--blue);
  --amber:#f5c84b;
  --red:#fb7a8d;
  --ink-on-accent:#042018;
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 18px 48px rgba(0,0,0,.35);
  --shadow-soft:0 10px 28px rgba(0,0,0,.22);
  --font-display:'Outfit',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Source Sans 3',ui-sans-serif,system-ui,sans-serif;
  --btn-pad:11px 16px;
  --btn-pad-sm:8px 12px;
  --btn-min-h:44px;
  --control-radius:12px;
  --focus:0 0 0 3px rgba(76,201,240,.35);
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  overflow-x:clip;
  max-width:100%;
  color-scheme:dark;
  scrollbar-width:thin;
  scrollbar-color:#2f5f88 #0a1626;
}
*{
  scrollbar-width:thin;
  scrollbar-color:#2f5f88 #0a1626;
}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#0a1626;border-radius:999px}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2f5f88,#1e3d5c);
  border-radius:999px;
  border:2px solid #0a1626;
}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3d78a8,#2a5278)}
*::-webkit-scrollbar-corner{background:#0a1626}

body{
  margin:0;
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  max-width:100%;
  overflow-x:clip;
  background:
    radial-gradient(ellipse 90% 55% at 12% -10%,rgba(18,185,129,.18),transparent 55%),
    radial-gradient(ellipse 70% 45% at 92% 8%,rgba(56,189,248,.14),transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(245,200,75,.06),transparent 55%),
    linear-gradient(180deg,var(--bg-soft),var(--bg) 42%,#050d16);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,.brand,.logo,.title,.viewerHeaderTitle,.fairScore{
  font-family:var(--font-display);
  letter-spacing:-.02em;
}
button,input,select,textarea{font:inherit}
a{color:var(--blue)}
a:hover{color:var(--green)}

/* Shared controls */
.btn,
button.btn,
a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:var(--btn-min-h);
  padding:var(--btn-pad);
  border-radius:var(--control-radius);
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel-lift),var(--panel2));
  color:var(--text);
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.06), var(--shadow-soft);
  transition:transform .14s ease, filter .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.btn.primary,
button.btn.primary,
a.btn.primary,
.primary.btn,
button.primary{
  background:linear-gradient(135deg,var(--green),#3dd6e8);
  border-color:transparent;
  color:var(--ink-on-accent);
  box-shadow:0 8px 22px rgba(18,185,129,.28);
}
.btn.danger,
button.btn.danger,
a.btn.danger,
.danger{
  background:linear-gradient(180deg,#5a2433,#3f1824);
  border-color:#8a3d4f;
  color:#ffd0d8;
}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;filter:none!important}
.btn:focus-visible,
.icon:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow:var(--focus);
}
@media(hover:hover) and (pointer:fine){
  .btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
  .btn:active:not(:disabled){transform:translateY(0) scale(.98)}
}

.input,
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select,
textarea{
  background:rgba(6,16,28,.88);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:var(--control-radius);
  padding:11px 13px;
  min-height:44px;
  transition:border-color .14s ease, box-shadow .14s ease;
}
input:not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus,
.input:focus{
  border-color:#3d7ea8;
  box-shadow:var(--focus);
  outline:none;
}
.mini{font-size:12px;color:var(--muted);line-height:1.45}
.panel,.card,.modalcard,.pq-authcard{
  background:linear-gradient(180deg,rgba(19,36,56,.94),rgba(12,24,40,.96));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(10px);
}

/* Auth chrome — match primary CTAs everywhere */
.pq-auth{
  font-family:var(--font-display)!important;
  font-weight:700!important;
  font-size:13px!important;
}
.pq-auth a,
.pq-auth button{
  min-height:40px;
  padding:9px 14px!important;
  border-radius:12px!important;
  border:1px solid var(--line)!important;
  background:linear-gradient(180deg,var(--panel-lift),var(--panel2))!important;
  color:var(--text)!important;
  font-weight:700!important;
}
.pq-auth .primary,
.pq-authactions button.primary{
  background:linear-gradient(135deg,var(--green),#3dd6e8)!important;
  color:var(--ink-on-accent)!important;
  border-color:transparent!important;
}
.pq-authcard{
  border-radius:var(--radius-lg)!important;
  padding:20px!important;
}
.pq-authcard h3{font-family:var(--font-display);font-weight:800}
.pq-authcard input{
  min-height:44px!important;
  border-radius:var(--control-radius)!important;
  padding:12px 14px!important;
}
.pq-authactions button{
  min-height:var(--btn-min-h)!important;
  border-radius:var(--control-radius)!important;
  font-family:var(--font-display);
  font-weight:750!important;
}

/* Soften admin/account shells when theme is linked */
.shell .btn{min-height:42px}
.shell .btn.primary,
.shell button.primary,
.shell .primary{background:linear-gradient(135deg,var(--green),#3dd6e8);color:var(--ink-on-accent);border-color:transparent}
.shell .pagebtn{min-width:38px;min-height:38px;border-radius:10px}
.shell .nav a{border-radius:12px;transition:background .14s ease,color .14s ease}
.shell .nav a:hover,.shell .nav a.active{background:rgba(30,74,104,.55);color:var(--green)}

/* Home / marketing friendliness */
.pq-home .brand{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-.05em;
  text-shadow:0 10px 40px rgba(94,233,181,.18);
}
.pq-home .sub{color:var(--muted);font-size:1.05rem;line-height:1.55}
.pq-home .box{
  background:rgba(15,30,48,.82)!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  box-shadow:var(--shadow)!important;
  padding:14px!important;
}
.pq-home .box input{
  min-height:52px;
  border-radius:14px!important;
  font-size:16px;
}
.pq-home .box button{
  min-height:52px;
  border-radius:14px!important;
  padding:0 26px!important;
  font-family:var(--font-display);
  font-weight:800;
  font-size:16px;
  background:linear-gradient(135deg,var(--green),var(--blue))!important;
  color:var(--ink-on-accent)!important;
  border:0!important;
  cursor:pointer;
}
.pq-home .dashcol{
  background:rgba(15,30,48,.78)!important;
  border-color:var(--line)!important;
  border-radius:20px!important;
  box-shadow:var(--shadow-soft);
}
.pq-home .gameitem,
.pq-home .rankitem{
  border-radius:14px!important;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.pq-home .gameitem:hover,
.pq-home .rankitem:hover{
  border-color:#4a7fa8;
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}

/* Game page overrides layered on top of page CSS */
body.pq-app .btn{min-height:40px;padding:9px 13px;font-size:13px}
body.pq-app .btn.primary{
  background:linear-gradient(135deg,var(--green),#3dd6e8)!important;
  color:var(--ink-on-accent)!important;
  border:0!important;
}
body.pq-app .icon{
  min-width:34px;min-height:34px;
  border-radius:10px;
}
body.pq-app .panel,
body.pq-app .court,
body.pq-app .qcard,
body.pq-app .hrow{
  border-color:var(--line);
}
body.pq-app .top{
  background:rgba(6,16,28,.82)!important;
  backdrop-filter:blur(14px);
}
body.pq-app .logo{
  font-family:var(--font-display);
  font-weight:900;
}
body.pq-app .shareTools .btn,
body.pq-app .shareCopyRow .btn{
  min-height:36px;
  padding:7px 11px;
  font-size:12px;
}

/* Shared public header + site-wide footer */
.pq-site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(6,16,28,.9);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.pq-site-header-inner{
  width:100%;max-width:1600px;margin:0 auto;
  padding:10px 18px;min-height:54px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.pq-site-logo{
  color:var(--text);text-decoration:none;
  font-family:var(--font-display);font-weight:950;font-size:20px;letter-spacing:-.04em;
}
.pq-site-logo span{color:var(--green)}
.pq-site-account{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;
  font-family:var(--font-display);font-weight:700;font-size:13px;
}
.pq-site-account a,
.pq-site-account button{
  min-height:40px;padding:9px 14px;border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel-lift),var(--panel2));
  color:var(--text);text-decoration:none;cursor:pointer;font:inherit;font-weight:700;
}
.pq-site-account .primary{
  background:linear-gradient(135deg,var(--green),#3dd6e8);
  color:var(--ink-on-accent);border-color:transparent;
}
.pq-site-footer{
  margin-top:auto;
  border-top:1px solid var(--line);
  background:rgba(6,16,28,.55);
  padding:22px 18px 28px;
  text-align:center;
}
.pq-site-footer-inner{
  width:100%;max-width:1100px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;
  font-size:12px;color:#668099;
}
.pq-site-footer a{
  color:#668099;text-decoration:none;border-bottom:1px dotted #486078;
}
.pq-site-footer a:hover{color:var(--blue);border-color:var(--blue)}
.pq-site-footer span{opacity:.7}
body{display:flex;flex-direction:column;min-height:100vh}
body > main,
body > .shell{flex:1 0 auto}

/* Motion for presence */
@keyframes pq-fade-up{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.pq-home .hero{animation:pq-fade-up .55s ease both}
.pq-home .dashboard{animation:pq-fade-up .7s .08s ease both}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}