:root{
  --bg-dark:#070712;
  --border-dark:rgba(255,255,255,.10);
  --text-dark:rgba(255,255,255,.92);
  --accent:#8b5cf6;
  --accent2:#22d3ee;

  --shadow:0 18px 60px rgba(0,0,0,.35);
  --radius:18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
a{ color:inherit; text-decoration:none; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  transition: background .25s ease, color .25s ease;
}

body.dark{
  color:var(--text-dark);
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(139,92,246,.18), transparent 55%),
    radial-gradient(900px 600px at 80% 80%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, #060612, #070712 50%, #060612);
}


/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(5,5,14,.55);
}

.bar-inner{
  max-width:1080px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{ display:inline-flex; align-items:center; gap:9px; }
.brand-logo{
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 18px rgba(139,92,246,.25);
  object-fit:contain;
  background: rgba(5,5,10,.50);
}

.logo-text{
  font-weight:900;
  color:var(--accent);
  letter-spacing:.6px;
}

.nav{ display:flex; gap:7px; align-items:center; }
.nav-link{
  padding:8px 10px;
  border-radius:12px;
  font-weight:900;
  opacity:.92;
  border:1px solid transparent;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.nav-link:hover{
  border-color:rgba(139,92,246,.35);
  background:rgba(139,92,246,.10);
  transform: translateY(-1px);
}
.nav-link.active{
  border-color:rgba(34,211,238,.35);
  background:rgba(34,211,238,.08);
}

.actions{ display:flex; align-items:center; gap:9px; }

/* Buttons */
.btn{
  border:1px solid transparent;
  border-radius:14px;
  padding:9px 12px;
  cursor:pointer;
  font-weight:900;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  color:inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  box-shadow:0 10px 30px rgba(139,92,246,.28);
}
.btn-primary:hover{
  box-shadow:0 14px 40px rgba(139,92,246,.36);
  transform: translateY(-1px);
}

.btn-ghost{
  background:transparent;
  border-color:rgba(139,92,246,.35);
}
.btn-ghost:hover{
  background:rgba(139,92,246,.10);
  transform: translateY(-1px);
}

.btn-icon{
  width:42px; height:42px;
  padding:0;
  border-color:rgba(139,92,246,.35);
  background:rgba(139,92,246,.08);
}
.btn-icon img{ width:20px; height:20px; }
.ico{ width:18px; height:18px; }

.btn.disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Layout */
.page{
  max-width:1080px;
  margin:0 auto;
  padding:24px 16px 36px;
}

.panel{
  border-radius: calc(var(--radius) + 6px);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding:16px;
}

/* Stop bleed */
.panel-safe{
  overflow:hidden;
  isolation:isolate;
}

.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.title-with-buttons{
  display:flex;
  align-items:center;
  gap:10px;
}

.title-buttons{
  display:flex;
  gap:8px;
}

.btn-icon-small{
  width:32px;
  height:32px;
  padding:0;
  border:1px solid rgba(139,92,246,.35);
  background:rgba(139,92,246,.08);
  border-radius:10px;
  cursor:pointer;
  display:grid;
  place-items:center;
  color:inherit;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.btn-icon-small:hover{
  background:rgba(139,92,246,.12);
  transform: translateY(-1px);
}
.btn-icon-small.active{
  background:rgba(34,211,238,.15);
  border-color:rgba(34,211,238,.45);
}
.btn-icon-small svg{
  width:16px;
  height:16px;
}

.panel-title{ margin:0; font-size:1.6rem; }
.panel-sub{ margin:8px 0 0; opacity:.75; font-weight:800; }

/* HUD */
.hud{
  display:flex;
  gap:12px;
  align-items:flex-end;
}
.hud-item{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  padding:9px 11px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.side-top .hud-item{
  align-items:flex-start;
}
.hud-label{ opacity:.7; font-weight:900; font-size:.85rem; }
.hud-value{ font-weight:1000; font-size:1.05rem; }

.hud-time-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.hud-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  display:grid;
  place-items:center;
  color:inherit;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.hud-icon:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
#pauseIcon{ width:18px; height:18px; }

.pauseBtn-large { 
  width: 35px !important; 
  height: 42px !important; 
  background: transparent !important;
  border: none !important;
}
.pauseBtn-large:hover { background: transparent !important; }
.pauseBtn-large svg { width: 24px !important; height: 24px !important; }

/* Sudoku layout */
.sudoku-layout{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 330px;
  gap:12px;
  align-items: stretch; /* same level */
}
@media (max-width: 950px){
  .sudoku-layout{ grid-template-columns: 1fr; }
  .nav{ display:none; }
}

/* Left card */
.sudoku-left{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 16px;
  box-shadow: var(--shadow);

  display:flex;
  flex-direction:column;
  gap: 14px;

  overflow:hidden;
  isolation:isolate;
}

/* Toolbar aligned better with centered grid */
.grid-toolbar{
  width: fit-content;
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  margin: 0 auto;
}

/* Sudoku grid centered */
.sudoku-grid{
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,10,18,.95);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto; /* centered */
}

/* Cells */
.cell{
  width:54px;
  height:54px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color:inherit;
  font-weight:1000;
  font-size:1.25rem;
  cursor:pointer;
  outline:none;
  position:relative;
}
@media (max-width:520px){
  .cell{ width:46px; height:46px; font-size:1.08rem; }
}

/* Locked cells */
.cell.given{ background: rgba(139,92,246,.10); }

/* Strong selected glow */
.cell.selected{
  box-shadow:
    inset 0 0 0 3px rgba(34,211,238,.70),
    0 0 0 2px rgba(34,211,238,.20),
    0 10px 30px rgba(34,211,238,.18);
}

/* Highlight */
.cell.hl{ background: rgba(34,211,238,.08); }

/* Same number pop */
.cell.same{
  background: rgba(139,92,246,.14);
  box-shadow: inset 0 0 0 2px rgba(139,92,246,.45);
}

.sudoku-grid.pencil-on .cell.selected{
  box-shadow: inset 0 0 0 3px rgba(139,92,246,.65), 0 10px 30px rgba(139,92,246,.18);
}

.cell.bad{
  background: rgba(255, 80, 80, .16);
  border-color: rgba(255, 80, 80, .35);
}

.thick-r{ border-right:2px solid rgba(255,255,255,.22) !important; }
.thick-b{ border-bottom:2px solid rgba(255,255,255,.22) !important; }

/* Pencil notes */
.notes{
  position:absolute;
  inset:7px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:2px;
  font-size:.62rem;
  line-height:1;
  opacity:.85;
  font-weight:1000;
  pointer-events:none;
}
.notes span{ display:flex; align-items:center; justify-content:center; }

/* Right card */
.sidebox{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:14px;
  box-shadow: var(--shadow);
  height: 100%;
}

.side-top{
  display:grid;
  gap:9px;
  margin-bottom:12px;
}

.side-top .hud{
  display:flex;
  gap:9px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.side-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  font-weight:1000;
  opacity:.95;
  padding:7px 0;
}
.side-row.compact{ padding:0; }

.label{ opacity:.75; }
.value{ font-size:1.1rem; }

/* Difficulty segmented */
.seg{
  display:inline-flex;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  overflow:hidden;
}
.seg-btn{
  padding:9px 11px;
  border:0;
  background: transparent;
  color:inherit;
  font-weight:1000;
  cursor:pointer;
  opacity:.88;
}
.seg-btn.active{
  background: rgba(34,211,238,.12);
  opacity:1;
}

/* Numpad bigger */
.numpad{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:12px;
}
.bigpad .pad{
  padding:16px 0;
  font-size:1.15rem;
  border-radius:18px;
}
.pad{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:inherit;
  font-weight:1000;
  cursor:pointer;
  position:relative;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  display:grid;
  place-items:center;
}
.pad:hover{ transform: translateY(-1px); }
.pad-wide{ grid-column: 1 / -1; }

.pad .tick{
  position:absolute;
  right:12px;
  top:10px;
  opacity:0;
  font-size:1rem;
}
.pad.done{
  opacity:.60;
  border-color: rgba(34,211,238,.35);
  background: rgba(34,211,238,.08);
}
.pad.done .tick{ opacity:1; }

/* Pulse animation for layer completion */
.pad.layer-complete{
  animation: layerPulse .72s ease;
}
@keyframes layerPulse{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.06); }
  60%{ transform: scale(0.98); }
  100%{ transform: scale(1); }
}

/* Hint badge */
.badge-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(34,211,238,.12);
  border: 1px solid rgba(34,211,238,.25);
  font-weight: 1000;
}

.tiny{ margin:10px 0 0; opacity:.75; font-weight:900; }

/* Locked grid (view only) */
.sudoku-grid.locked.paused { filter: blur(4px); }
.sudoku-grid.locked .cell{ cursor: default; }

/* Animations */
@keyframes glow{
  0%{ box-shadow: inset 0 0 0 0 rgba(34,211,238,0); }
  50%{ box-shadow: inset 0 0 0 4px rgba(34,211,238,.22); }
  100%{ box-shadow: inset 0 0 0 0 rgba(34,211,238,0); }
}
.cell.flash{ animation: glow .45s ease; }

@keyframes solvedPulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.01); }
  100%{ transform: scale(1); }
}
.sudoku-grid.solved{ animation: solvedPulse .65s ease; }

@keyframes ringSpin{
  0%{ transform: translate(-50%,-50%) rotate(0deg) scale(.9); opacity:0; }
  20%{ opacity:.85; }
  100%{ transform: translate(-50%,-50%) rotate(360deg) scale(1.2); opacity:0; }
}
.cell.placed::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:34px;
  height:34px;
  border-radius:999px;
  border:2px solid rgba(34,211,238,.55);
  border-top-color: rgba(139,92,246,.75);
  animation: ringSpin .52s ease;
  pointer-events:none;
}

/* Segment completion animations: row / column / box */
.cell.segment-complete-row, .cell.complete-line{
  animation: rowBounce .9s cubic-bezier(.2,.9,.3,1);
}
.cell.segment-complete-col{
  animation: colBounce .9s cubic-bezier(.2,.9,.3,1);
}
.cell.segment-complete-box, .cell.complete-square{
  animation: boxPop .82s cubic-bezier(.2,.9,.3,1);
}

@keyframes rowBounce{
  0%{ transform: translateX(0) scale(1); }
  30%{ transform: translateX(-8px) scale(1.04); }
  60%{ transform: translateX(6px) scale(.98); }
  100%{ transform: translateX(0) scale(1); }
}
@keyframes colBounce{
  0%{ transform: translateY(0) scale(1); }
  30%{ transform: translateY(-8px) scale(1.04); }
  60%{ transform: translateY(6px) scale(.98); }
  100%{ transform: translateY(0) scale(1); }
}
@keyframes boxPop{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.12) rotate(-2deg); }
  60%{ transform: scale(.96) rotate(1deg); }
  100%{ transform: scale(1); }
}

/* Progression bar */
.progress-wrap{ margin-top:12px; display:flex; justify-content:center; }
.progression{ width:100%; max-width:320px; display:flex; gap:8px; align-items:center; }
.progress-level{ flex:1; height:12px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; cursor:pointer; transition: transform .12s ease; }
.progress-level.filled::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:100%; background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); transform:translateX(0); }
.progress-legend{ font-size:0.82rem; opacity:.85; margin-left:8px; white-space:nowrap; }
.prog-locked{ display:flex; gap:8px; align-items:center; cursor:pointer; }
.prog-locked .lock-btn{ width:40px; height:28px; border-radius:8px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
.prog-locked .lock-txt{ font-weight:900; opacity:.85; }

/* Difficulty color accents */
.prog-easy .progress-level.filled{ background: linear-gradient(90deg, #a7f3d0, #34d399); }
.prog-medium .progress-level.filled{ background: linear-gradient(90deg, #93c5fd, #3b82f6); }
.prog-hard .progress-level.filled{ background: linear-gradient(90deg, #fcd34d, #f97316); }
.prog-extreme .progress-level.filled{ background: linear-gradient(90deg, #f87171, #ef4444); }

@media (max-width:520px){ .progression{ max-width:240px; } }

/* Toast bubble */
.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  pointer-events: none;
}
.toast-bubble{
  width: min(420px, 92vw);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,20,.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
  padding: 14px 14px 14px 14px;
  position: relative;
  transform: translateY(10px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  pointer-events: none;
}
.toast.show .toast-bubble{
  transform: translateY(0);
  opacity: 1;
}
.toast-title{
  font-weight: 1100;
  margin-bottom: 6px;
}
.toast-text{
  font-weight: 900;
  opacity: .78;
  line-height: 1.4;
  white-space: pre-line;
}
.toast-x{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor:pointer;
  pointer-events: auto;
  font-size: 1.1rem;
  font-weight: 1000;
}

/* Modal */
.modal-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:90;
}
.modal-overlay.open{ display:flex; }

.modal{
  width: min(480px, 94vw);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,10,20,.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  padding:18px;
  position:relative;
}
.modal-large{
  width: min(720px, 94vw);
  max-height: 85vh;
  overflow-y: auto;
}
.modal-title{ font-weight:1100; font-size:1.3rem; }
.modal-sub{ margin-top:6px; opacity:.75; font-weight:900; white-space: pre-line; }

.modal-help-content{
  margin-top: 16px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.modal-help-content h3{
  margin-top: 14px;
  margin-bottom: 8px;
  font-weight: 1000;
  font-size: 1.05rem;
  color: rgba(139,92,246, .9);
}
.modal-help-content h3:first-child{
  margin-top: 0;
}
.modal-help-content p{
  margin: 8px 0;
  opacity: 0.9;
}
.modal-help-content ul{
  margin: 8px 0;
  padding-left: 20px;
  list-style: none;
}
.modal-help-content li{
  margin: 6px 0;
  opacity: 0.85;
}

.modal-actions{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.full{ width:100%; }

.modal-x{
  position:absolute;
  right:10px;
  top:8px;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:inherit;
  cursor:pointer;
  font-size:1.2rem;
  font-weight:1000;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* login form styles */
.form{ display:flex; flex-direction:column; gap:10px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.field span{ font-weight:900; opacity:.86; }
.input{ padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); color:inherit; outline:none; }
.form-actions{ display:flex; gap:8px; margin-top:6px; }
.form-msg{ margin-top:8px; font-weight:900; opacity:.9; }

/* oauth button visuals */
#oauthDiscord{ border-left:4px solid #7289da; }
#oauthGoogle{ border-left:4px solid #ea4335; }
#oauthSteam{ border-left:4px solid #66c0f4; }
.ttt-board{display:grid;grid-template-columns:repeat(3,88px);gap:10px;margin:20px 0}.ttt-cell{height:88px;font-size:36px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:inherit;cursor:pointer}.ttt-cell:disabled{cursor:not-allowed;opacity:.85}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;border:1px solid rgba(255,255,255,.2)}


/* Tic-Tac-Toe web module */
.ttt-page{
  display: grid;
  gap: 18px;
}
.ttt-hero{
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}
.eyebrow{
  margin: 0 0 6px;
  opacity: .72;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 900;
}
.muted{
  opacity: .78;
}
.ttt-mode-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ttt-layout{
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(300px, 1fr);
  gap: 18px;
  align-items: start;
}
.ttt-side-panel{
  display: grid;
  gap: 14px;
}
.ttt-info-list{
  display: grid;
  gap: 10px;
  margin: 0;
}
.ttt-info-list div{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ttt-info-list dt{
  opacity: .72;
  font-weight: 800;
}
.ttt-info-list dd{
  margin: 0;
  font-weight: 900;
  text-align: right;
}
.ttt-online-panel,
.ttt-actions{
  display: grid;
  gap: 10px;
}
.ttt-invite-box{
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.ttt-board-panel{
  display: grid;
  justify-items: center;
  gap: 12px;
}
.ttt-board{
  display: grid;
  grid-template-columns: repeat(3, minmax(78px, 110px));
  gap: 12px;
  margin: 8px 0;
}
.ttt-cell{
  width: 100%;
  aspect-ratio: 1;
  font-size: clamp(2rem, 7vw, 4.2rem);
  font-weight: 1000;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.ttt-cell:hover:not(:disabled){
  transform: translateY(-1px);
  background: rgba(255,255,255,.1);
}
.ttt-cell:disabled{
  cursor: not-allowed;
  opacity: .88;
}
.ttt-message{
  min-height: 28px;
  font-weight: 900;
  text-align: center;
}
@media (max-width: 780px){
  .ttt-hero,
  .ttt-layout{
    grid-template-columns: 1fr;
  }
  .ttt-hero{
    display: grid;
  }
  .ttt-board{
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    width: min(100%, 360px);
  }
}

/* --------------------------------------------------------------------------
   Dark Games Sudoku arena refresh
   Scope: sudoku.html only. Keeps the game logic IDs/classes intact.
---------------------------------------------------------------------------- */
body.sudoku-arena {
  min-height: 100vh;
  color: #fff;
  background:
    radial-gradient(circle at 12% 8%, rgba(122, 53, 255, 0.28), transparent 32%),
    radial-gradient(circle at 88% 16%, rgba(41, 168, 255, 0.18), transparent 30%),
    radial-gradient(circle at 78% 92%, rgba(255, 46, 102, 0.13), transparent 34%),
    linear-gradient(135deg, #070510 0%, #090716 45%, #03111d 100%);
  overflow-x: hidden;
}

body.sudoku-arena::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 76%);
  mask-image: radial-gradient(circle at center, black, transparent 76%);
  opacity: .55;
  z-index: 0;
}

.sudoku-falling-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.sudoku-falling-layer span {
  position: absolute;
  left: var(--left);
  top: -120px;
  color: var(--color);
  font-size: var(--size);
  font-weight: 1000;
  line-height: 1;
  opacity: var(--opacity);
  text-shadow: 0 0 20px var(--glow), 0 0 52px var(--glow);
  filter: blur(.12px);
  transform: translate3d(0, -20vh, 0) rotate(var(--rotation));
  animation: sudokuFall var(--duration) linear var(--delay) infinite;
}

@keyframes sudokuFall {
  from { transform: translate3d(0, -16vh, 0) rotate(var(--rotation)); }
  to { transform: translate3d(var(--drift), 122vh, 0) rotate(calc(var(--rotation) + 180deg)); }
}

.sudoku-topbar,
.sudoku-page,
.sudoku-arena .toast,
.sudoku-arena .modal-overlay {
  position: relative;
  z-index: 1;
}

.sudoku-topbar {
  width: min(1180px, calc(100% - 28px));
  margin: 14px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(127, 76, 255, 0.20);
  border-radius: 22px;
  background: rgba(6, 5, 14, 0.72);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
}

.sudoku-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

.sudoku-brand-emblem {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(127, 76, 255, 0.35);
  background: #050509;
  box-shadow: 0 16px 40px rgba(122,53,255,.28);
  overflow: visible;
}

.sudoku-logo-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

.sudoku-logo-corner {
  position: absolute;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1;
}

.sudoku-logo-number {
  top: -5px;
  right: -5px;
  background: rgba(255,46,102,.92);
  box-shadow: 0 0 16px rgba(255,46,102,.70);
}

.sudoku-logo-pencil {
  left: -5px;
  bottom: -5px;
  background: rgba(41,168,255,.92);
  box-shadow: 0 0 16px rgba(41,168,255,.70);
}

.sudoku-brand-text { display: grid; gap: 2px; }
.sudoku-brand-text strong { text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; }
.sudoku-brand-text small { color: rgba(255,255,255,.66); font-size: .76rem; font-weight: 800; }

.sudoku-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sudoku-nav a,
.sudoku-nav-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 850;
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.sudoku-nav a:hover,
.sudoku-nav-button:hover {
  color: #fff;
  background: rgba(127,76,255,.15);
}

.sudoku-nav .btn,
.sudoku-nav-button.btn {
  display: inline-flex;
  padding: 9px 13px;
  border-radius: 13px;
}

.sudoku-nav-button.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 12px 32px rgba(122,53,255,.26);
}

.sudoku-nav-button.btn-ghost {
  border-color: rgba(127,76,255,.28);
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.04);
}



.sudoku-arena .page.sudoku-page {
  width: min(1180px, calc(100% - 28px));
  max-width: none;
  margin: 22px auto 54px;
  padding: 0;
}

.sudoku-arena .panel.sudoku-panel {
  position: relative;
  border: 1px solid rgba(127, 76, 255, 0.26);
  background:
    radial-gradient(circle at 14% 0%, rgba(122, 53, 255, 0.20), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(41, 168, 255, 0.10), transparent 30%),
    linear-gradient(145deg, rgba(14, 12, 27, 0.94), rgba(5, 5, 12, 0.88));
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-radius: 30px;
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
}

.sudoku-panel::after {
  content: "";
  position: absolute;
  inset: 18px;
  pointer-events: none;
  border-radius: 22px;
  background:
    linear-gradient(rgba(255,255,255,.036) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(circle at 48% 42%, black, transparent 70%);
  mask-image: radial-gradient(circle at 48% 42%, black, transparent 70%);
  opacity: .5;
  z-index: -1;
}

.sudoku-arena .panel-head.sudoku-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

.sudoku-hero-copy {
  max-width: 820px;
  display: grid;
  gap: 9px;
}

.sudoku-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .73rem;
  font-weight: 1000;
}

.sudoku-kicker > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a769ff;
  box-shadow: 0 0 18px rgba(167,105,255,.9);
}

.sudoku-arena .title-with-buttons {
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.sudoku-arena .panel-title {
  margin: 0;
  font-size: clamp(2.55rem, 5vw, 4.8rem);
  line-height: .92;
  letter-spacing: -.07em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fff 0%, #cdbcff 54%, #6bbcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sudoku-arena .panel-sub {
  max-width: 780px;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  opacity: 1;
  line-height: 1.55;
  font-weight: 780;
}

.sudoku-arena .btn-icon-small {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  border-color: rgba(127,76,255,.28);
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.sudoku-arena .btn-icon-small:hover {
  background: rgba(127,76,255,.14);
  border-color: rgba(167,105,255,.70);
}

.sudoku-arena .btn-icon-small.active {
  background: rgba(41,168,255,.16);
  border-color: rgba(41,168,255,.58);
  color: #fff;
}

.sudoku-arena .btn-icon-small svg {
  width: 19px;
  height: 19px;
}

.sudoku-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(84px, 1fr));
  gap: 10px;
  width: min(360px, 100%);
}

.sudoku-hero-stats div {
  min-height: 76px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 12px;
  border: 1px solid rgba(127,76,255,.22);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.sudoku-hero-stats strong {
  font-size: 1.38rem;
  line-height: 1;
  letter-spacing: -.04em;
}

.sudoku-hero-stats span {
  color: rgba(255,255,255,.56);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sudoku-arena .sudoku-layout {
  margin-top: clamp(20px, 3vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 352px);
  gap: 18px;
  align-items: stretch;
}

.sudoku-arena .sudoku-left,
.sudoku-arena .sidebox {
  border: 1px solid rgba(127,76,255,.24);
  background:
    radial-gradient(circle at 14% 0%, rgba(122,53,255,.15), transparent 36%),
    linear-gradient(145deg, rgba(15,13,29,.78), rgba(7,8,18,.72));
  box-shadow: 0 20px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-radius: 26px;
}

.sudoku-arena .sudoku-left {
  padding: clamp(14px, 2.4vw, 22px);
  gap: 18px;
}

.sudoku-arena .sidebox {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(16px, 2.2vw, 20px);
  overflow: hidden;
}

.sudoku-arena .sidebox::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #7a35ff, #29a8ff);
  opacity: .75;
}

.sudoku-arena .grid-toolbar {
  width: 100%;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.sudoku-arena .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 15px;
  padding: 10px 14px;
  font-weight: 950;
}

.sudoku-arena .btn-ghost {
  border-color: rgba(127,76,255,.28);
  background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
  color: rgba(255,255,255,.9);
}

.sudoku-arena .btn-ghost:hover {
  border-color: rgba(167,105,255,.62);
  background: rgba(127,76,255,.14);
}

.sudoku-arena .btn-primary {
  color: #fff;
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 15px 38px rgba(46,168,255,.16);
}

.sudoku-arena .btn-primary:hover {
  box-shadow: 0 18px 46px rgba(122,53,255,.28);
}

.sudoku-arena .ico { width: 18px; height: 18px; }

.sudoku-arena .sudoku-grid {
  --sdk-cell: clamp(36px, 5.05vw, 58px);
  width: fit-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(9, var(--sdk-cell));
  grid-auto-rows: var(--sdk-cell);
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.24);
  border-radius: 22px;
  background: rgba(3,4,10,.88);
  box-shadow: 0 26px 72px rgba(0,0,0,.36), 0 0 36px rgba(122,53,255,.14), inset 0 1px 0 rgba(255,255,255,.08);
}

.sudoku-arena .cell {
  width: var(--sdk-cell);
  height: var(--sdk-cell);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.024);
  color: rgba(255,255,255,.92);
  font-size: clamp(1rem, 1.75vw, 1.35rem);
  font-weight: 1000;
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease, color 140ms ease;
}

.sudoku-arena .cell:hover:not(.given) {
  background: rgba(255,255,255,.055);
}

.sudoku-arena .cell.given {
  color: #fff;
  background: linear-gradient(145deg, rgba(122,53,255,.24), rgba(41,168,255,.12));
  text-shadow: 0 0 16px rgba(122,53,255,.38);
}

.sudoku-arena .cell.hl {
  background: rgba(41,168,255,.08);
}

.sudoku-arena .cell.same {
  background: rgba(122,53,255,.18);
  box-shadow: inset 0 0 0 2px rgba(167,105,255,.42);
}

.sudoku-arena .cell.selected {
  z-index: 2;
  box-shadow:
    inset 0 0 0 3px rgba(41,168,255,.78),
    0 0 0 2px rgba(41,168,255,.18),
    0 12px 32px rgba(41,168,255,.20);
}

.sudoku-arena .sudoku-grid.pencil-on .cell.selected {
  box-shadow:
    inset 0 0 0 3px rgba(167,105,255,.72),
    0 12px 32px rgba(122,53,255,.22);
}

.sudoku-arena .cell.bad {
  background: rgba(255,46,102,.18);
  border-color: rgba(255,46,102,.40);
  animation: sudokuShake .22s ease;
}

@keyframes sudokuShake {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-2px); }
  70% { transform: translateX(2px); }
}

.sudoku-arena .thick-r { border-right: 2px solid rgba(255,255,255,.28) !important; }
.sudoku-arena .thick-b { border-bottom: 2px solid rgba(255,255,255,.28) !important; }

.sudoku-arena .notes {
  inset: 6px;
  gap: 1px;
  color: rgba(156,207,255,.78);
  font-size: clamp(.48rem, .82vw, .64rem);
}

.sudoku-arena .side-top {
  display: grid;
  gap: 16px;
  margin: 0;
}

.sudoku-arena .seg {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(127,76,255,.22);
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  overflow: visible;
}

.sudoku-arena .seg-btn {
  min-height: 40px;
  padding: 0 8px;
  border-radius: 13px;
  color: rgba(255,255,255,.68);
  font-size: .84rem;
  letter-spacing: -.01em;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.sudoku-arena .seg-btn:hover {
  color: #fff;
  background: rgba(127,76,255,.12);
}

.sudoku-arena .seg-btn.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(122,53,255,.92), rgba(41,168,255,.82));
  box-shadow: 0 12px 28px rgba(41,168,255,.13);
}

.sudoku-arena .hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  align-items: stretch;
}

.sudoku-arena .hud-item {
  min-height: 74px;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
  border: 1px solid rgba(127,76,255,.20);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.sudoku-arena .hud-pause {
  align-items: center;
}

.sudoku-arena .hud-label {
  opacity: 1;
  color: rgba(255,255,255,.52);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .68rem;
}

.sudoku-arena .hud-value {
  color: #fff;
  font-size: 1.08rem;
  line-height: 1;
}

.sudoku-arena .hud-icon.pauseBtn-large {
  width: 46px !important;
  height: 46px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
  color: #fff;
}

.sudoku-arena .hud-icon.pauseBtn-large:hover {
  background: rgba(127,76,255,.15) !important;
  transform: translateY(-1px);
}

.sudoku-arena .pauseBtn-large svg {
  width: 22px !important;
  height: 22px !important;
}

.sudoku-arena .numpad {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.sudoku-arena .bigpad .pad,
.sudoku-arena .pad {
  min-height: 56px;
  border: 1px solid rgba(127,76,255,.22);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  color: rgba(255,255,255,.94);
  font-size: 1.16rem;
  font-weight: 1000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.sudoku-arena .pad:hover {
  border-color: rgba(167,105,255,.58);
  background: rgba(127,76,255,.14);
  transform: translateY(-1px);
}

.sudoku-arena .pad-wide {
  min-height: 50px;
  color: rgba(255,255,255,.80);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .86rem;
}

.sudoku-arena .pad.done {
  opacity: .72;
  border-color: rgba(41,168,255,.38);
  background: rgba(41,168,255,.10);
}

.sudoku-arena .pad .tick {
  right: 11px;
  top: 8px;
  color: #35f29a;
  text-shadow: 0 0 12px rgba(53,242,154,.44);
}

.sudoku-arena .badge-mini {
  min-width: 26px;
  height: 23px;
  border-color: rgba(41,168,255,.28);
  background: rgba(41,168,255,.13);
  color: #fff;
}

.sudoku-arena .progress-wrap {
  margin-top: auto;
  justify-content: flex-start;
}

.sudoku-arena .progression {
  max-width: none;
}

.sudoku-arena .progress-level {
  height: 13px;
  border-color: rgba(127,76,255,.18);
  background: rgba(255,255,255,.055);
}

.sudoku-arena .progress-legend,
.sudoku-arena .prog-locked .lock-txt,
.sudoku-arena .tiny {
  color: rgba(255,255,255,.66);
  opacity: 1;
}

.sudoku-arena .prog-locked {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(127,76,255,.20);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

.sudoku-arena .prog-locked .lock-btn {
  border-color: rgba(41,168,255,.28);
  background: rgba(41,168,255,.10);
}

.sudoku-arena .tiny {
  min-height: 22px;
  margin: 0;
  font-weight: 850;
  line-height: 1.4;
}

.sudoku-arena .toast {
  position: fixed;
  z-index: 80;
}

.sudoku-arena .toast-bubble,
.sudoku-arena .modal {
  border: 1px solid rgba(127,76,255,.30);
  background: linear-gradient(145deg, rgba(15,12,30,.96), rgba(5,8,18,.96));
  box-shadow: 0 30px 110px rgba(0,0,0,.55);
}

.sudoku-arena .modal-overlay {
  position: fixed;
  z-index: 90;
  background: rgba(0,0,0,.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sudoku-arena .modal-title {
  color: #fff;
  font-size: 1.42rem;
  letter-spacing: -.03em;
}

.sudoku-arena .modal-sub,
.sudoku-arena .toast-text,
.sudoku-arena .modal-help-content p,
.sudoku-arena .modal-help-content li {
  color: rgba(255,255,255,.70);
  opacity: 1;
}

.sudoku-arena .modal-help-content h3 {
  color: #cdbcff;
}

.sudoku-arena .modal-x,
.sudoku-arena .toast-x {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
}

/* Tiny, non-invasive hardening for the Games library search/action area. */
.games-body .games-search-box input,
.games-body .games-suggestion,
.games-body .game-icon-help,
.games-body .game-action {
  font-family: inherit;
}

.games-body .game-icon-help {
  line-height: 1;
}

.games-body .games-grid.is-filtering.has-single-result .game-card {
  max-width: 420px;
  justify-self: center;
  width: 100%;
}

@media (max-width: 1080px) {
  .sudoku-arena .panel-head.sudoku-hero {
    grid-template-columns: 1fr;
  }

  .sudoku-hero-stats {
    width: 100%;
    max-width: 520px;
  }

  .sudoku-arena .sudoku-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sudoku-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .sudoku-nav {
    justify-content: flex-start;
  }

  .sudoku-arena .panel.sudoku-panel {
    padding: 18px;
  }

  .sudoku-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sudoku-hero-stats div {
    min-height: 66px;
    padding: 10px 8px;
  }

  .sudoku-arena .hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sudoku-arena .grid-toolbar {
    justify-content: stretch;
  }

  .sudoku-arena .grid-toolbar .btn {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 520px) {
  .sudoku-topbar,
  .sudoku-arena .page.sudoku-page {
    width: min(100% - 20px, 1180px);
  }

  .sudoku-arena .panel.sudoku-panel {
    border-radius: 24px;
    padding: 14px;
  }

  .sudoku-arena .panel-title {
    font-size: clamp(2.15rem, 13vw, 3rem);
  }

  .sudoku-hero-stats {
    grid-template-columns: 1fr;
  }

  .sudoku-arena .sudoku-left,
  .sudoku-arena .sidebox {
    border-radius: 22px;
    padding: 12px;
  }

  .sudoku-arena .sudoku-grid {
    --sdk-cell: min(9.55vw, 40px);
    border-radius: 16px;
  }

  .sudoku-arena .cell {
    font-size: .98rem;
  }

  .sudoku-arena .notes {
    inset: 4px;
    font-size: .46rem;
  }

  .sudoku-arena .seg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sudoku-arena .hud {
    gap: 8px;
  }

  .sudoku-arena .hud-item {
    min-height: 66px;
    padding: 10px;
  }

  .sudoku-arena .numpad {
    gap: 8px;
  }

  .sudoku-arena .bigpad .pad,
  .sudoku-arena .pad {
    min-height: 48px;
    border-radius: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sudoku-falling-layer span { animation: none !important; }
}

/* Final Sudoku HUD/button polish */
.sudoku-arena .hud {
  grid-template-columns: 64px repeat(3, minmax(72px, 1fr));
}
.sudoku-arena .hud-item {
  min-width: 0;
  padding: 10px 9px;
}
.sudoku-arena .hud-value {
  white-space: nowrap;
}
.sudoku-arena .hud-timer .hud-value {
  font-variant-numeric: tabular-nums;
}
.sudoku-arena #solveBtn span {
  display: inline-block;
}
.sudoku-arena #solveBtn.is-new-action {
  min-width: 150px;
}

/* Unified auth UI */
.auth-menu-host{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.auth-avatar-btn{
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0 !important;
  border-radius: 999px !important;
  overflow: hidden;
  background: rgba(139,92,246,.10) !important;
  border-color: rgba(139,92,246,.42) !important;
  box-shadow: 0 0 24px rgba(139,92,246,.22);
}
.auth-avatar-img,
.auth-avatar-initial{
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: grid;
  place-items: center;
  object-fit: cover;
}
.auth-avatar-initial{
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  color: #fff;
  font-size: 1rem;
  font-weight: 1000;
}
.auth-avatar-name{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.auth-menu-popover{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  padding: 10px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(139,92,246,.28);
  border-radius: 18px;
  background: rgba(8,7,18,.96);
  box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  z-index: 100;
}
.auth-menu-popover[hidden]{ display:none; }
.auth-menu-user{
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: grid;
  gap: 2px;
}
.auth-menu-user strong{ color:#fff; }
.auth-menu-user span{ color:rgba(255,255,255,.62); font-size:.82rem; }
.auth-menu-popover a,
.auth-menu-popover button{
  min-height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.82);
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.auth-menu-popover a:hover,
.auth-menu-popover button:hover{
  background: rgba(139,92,246,.15);
  color: #fff;
}

.auth-page{
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #070516 !important;
  background:
    radial-gradient(760px 520px at 17% 18%, rgba(139,92,246,.26), transparent 64%),
    radial-gradient(720px 520px at 86% 72%, rgba(34,211,238,.14), transparent 62%),
    linear-gradient(180deg, #070516 0%, #060514 58%, #060514 100%) !important;
}
.auth-landing{
  width: min(1120px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(14px, 3vh, 30px) 16px;
  display: grid;
  align-content: center;
  gap: 16px;
}
.auth-back{
  width: fit-content;
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  font-weight: 950;
  backdrop-filter: blur(12px);
}
.auth-back:hover{
  color: #fff;
  border-color: rgba(139,92,246,.48);
  background: rgba(139,92,246,.12);
}
.auth-frame{
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(360px, 1fr);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 34px;
  background: rgba(8,7,20,.64);
  box-shadow: 0 34px 110px rgba(0,0,0,.46);
  overflow: hidden;
  backdrop-filter: blur(20px);
}
.auth-frame::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(139,92,246,.18), transparent 35%, rgba(34,211,238,.12)),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%);
  opacity: .72;
}
.auth-showcase,
.auth-card-redesign{
  position: relative;
  z-index: 1;
}
.auth-showcase{
  min-height: 640px;
  padding: clamp(26px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  border-right: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 24% 18%, rgba(139,92,246,.38), transparent 32%),
    linear-gradient(145deg, rgba(24,13,52,.72), rgba(5,8,18,.48));
}
.auth-showcase-logo{
  position: absolute;
  top: clamp(22px, 4vw, 38px);
  left: clamp(22px, 4vw, 38px);
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 40px rgba(139,92,246,.34);
  object-fit: contain;
}
.auth-orb{
  position: absolute;
  border-radius: 999px;
  filter: blur(4px);
  opacity: .7;
}
.auth-orb-one{
  width: 190px;
  height: 190px;
  right: -58px;
  top: 80px;
  background: radial-gradient(circle, rgba(34,211,238,.36), transparent 68%);
}
.auth-orb-two{
  width: 260px;
  height: 260px;
  left: -110px;
  bottom: 84px;
  background: radial-gradient(circle, rgba(139,92,246,.38), transparent 70%);
}
.auth-kicker{
  margin: 0;
  color: rgba(255,255,255,.64);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .75rem;
  font-weight: 1000;
}
.auth-showcase h1{
  margin: 0;
  max-width: 360px;
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 4.25rem);
  line-height: .95;
  letter-spacing: -.07em;
}
.auth-showcase-copy{
  max-width: 410px;
  margin: 0;
  color: rgba(255,255,255,.74);
  font-weight: 800;
  line-height: 1.55;
}
.auth-feature-stack{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.auth-feature-stack span{
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size: .84rem;
  font-weight: 950;
}
.auth-card-redesign{
  padding: clamp(20px, 4vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(34,211,238,.10), transparent 36%),
    rgba(8,7,18,.54);
}
.auth-head-redesign{
  display: grid;
  gap: 6px;
}
.auth-head-redesign h2{
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.auth-head-redesign p:not(.auth-kicker){
  margin: 0;
  color: rgba(255,255,255,.65);
  font-weight: 800;
}
.auth-provider-list{
  display: grid;
  gap: 12px;
}
.auth-provider{
  width: 100%;
  min-height: 76px;
  padding: 14px;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 22px;
  background: rgba(255,255,255,.045) !important;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .16s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.auth-provider:hover,
.auth-provider.is-selected{
  transform: translateY(-2px);
  border-color: rgba(139,92,246,.54) !important;
  background: rgba(139,92,246,.14) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.auth-provider-discord:hover{
  border-color: rgba(88,101,242,.74) !important;
  background: rgba(88,101,242,.16) !important;
}
.auth-provider-google:hover{
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.10) !important;
}
.auth-provider-create.is-selected,
.auth-provider-create:hover{
  border-color: rgba(34,211,238,.56) !important;
  background: rgba(34,211,238,.12) !important;
}
.auth-provider-icon{
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  color: #fff;
}
.auth-provider-discord .auth-provider-icon{
  background: rgba(88,101,242,.18);
  color: #fff;
}
.auth-provider-icon-google{
  background: #fff;
}
.auth-provider-icon svg{
  width: 27px;
  height: 27px;
}
.auth-provider-text{
  min-width: 0;
  display: grid;
  gap: 3px;
}
.auth-provider-text strong{
  color: #fff;
  font-size: 1.02rem;
  font-weight: 1000;
}
.auth-provider-text small{
  color: rgba(255,255,255,.60);
  font-size: .86rem;
  font-weight: 780;
  line-height: 1.3;
}
.auth-provider-arrow{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.76);
  font-weight: 1000;
}
.auth-divider{
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.48);
  font-weight: 950;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.auth-divider::before,
.auth-divider::after{
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.auth-form-redesign{
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.04);
}
.auth-mode-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 2px;
}
.auth-mode-row h3{
  margin: 0 0 4px;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}
.auth-mode-row p{
  margin: 0;
  color: rgba(255,255,255,.57);
  font-size: .9rem;
  font-weight: 760;
  line-height: 1.35;
}
.auth-switch-btn{
  min-height: 34px;
  padding: 0 12px;
  flex: 0 0 auto;
  border: 1px solid rgba(139,92,246,.28);
  border-radius: 999px;
  background: rgba(139,92,246,.10);
  color: rgba(255,255,255,.78);
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
}
.auth-switch-btn:hover,
.auth-switch-btn.is-selected{
  color: #fff;
  background: rgba(139,92,246,.20);
  border-color: rgba(139,92,246,.55);
}
.auth-form-redesign .field{
  gap: 7px;
  margin-bottom: 0;
}
.auth-form-redesign .field span{
  color: rgba(255,255,255,.75);
  font-size: .86rem;
  font-weight: 950;
}
.auth-form-redesign .input{
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,18,.58);
  color: #fff;
  font-weight: 820;
  outline: none;
}
.auth-form-redesign .input:focus{
  border-color: rgba(34,211,238,.58);
  box-shadow: 0 0 0 4px rgba(34,211,238,.10);
}
.auth-actions{
  margin-top: 4px;
}
.auth-actions .btn{
  min-height: 50px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-small-switch{
  margin: 2px 0 0;
  color: rgba(255,255,255,.58);
  font-size: .88rem;
  font-weight: 780;
  text-align: center;
}
.auth-small-switch button{
  padding: 0;
  border: 0;
  background: transparent;
  color: #67e8f9;
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
}
.auth-small-switch button:hover{
  color: #fff;
}
.form-msg{
  min-height: 18px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-weight: 900;
}
.auth-status{
  display: none;
}
.auth-subtitle{
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
}

.games-nav button,
.ttt-nav button{
  min-height: 38px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  border: 0;
  color: rgba(255,255,255,.72);
  background: transparent;
  text-decoration: none;
  font: inherit;
  font-weight: 950;
  font-size: .92rem;
  cursor: pointer;
}
.games-nav button:hover,
.ttt-nav button:hover{
  color: #fff;
  background: rgba(132,76,255,.15);
}
.games-nav .auth-avatar-btn,
.ttt-nav .auth-avatar-btn,
.sudoku-nav .auth-avatar-btn{
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 1px solid rgba(139,92,246,.42) !important;
  padding: 0 !important;
}

@media (max-width: 900px){
  .auth-frame{
    grid-template-columns: 1fr;
  }
  .auth-showcase{
    min-height: auto;
    padding-top: 108px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
}
@media (max-width: 560px){
  .auth-landing{
    padding: 14px 10px 26px;
  }
  .auth-frame{
    border-radius: 26px;
  }
  .auth-card-redesign,
  .auth-showcase{
    padding: 20px;
  }
  .auth-showcase{
    padding-top: 92px;
  }
  .auth-provider{
    grid-template-columns: 44px 1fr;
    min-height: 70px;
    border-radius: 18px;
  }
  .auth-provider-icon{
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }
  .auth-provider-arrow{
    display: none;
  }
  .auth-mode-row{
    flex-direction: column;
    align-items: stretch;
  }
  .auth-switch-btn{
    width: fit-content;
  }
  .auth-actions{
    flex-direction: column;
  }
}

/* Login polish: cleaner brand panel + collapsed manual signup */
.auth-frame-polished{
  grid-template-columns: minmax(320px, .92fr) minmax(380px, 1fr);
  max-width: 1060px;
  margin: 0 auto;
}
.auth-showcase-polished{
  min-height: 610px;
  justify-content: center;
  gap: 34px;
  padding: clamp(28px, 5vw, 54px);
  background:
    radial-gradient(circle at 24% 24%, rgba(139,92,246,.42), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(34,211,238,.18), transparent 30%),
    linear-gradient(145deg, rgba(25,14,54,.76), rgba(5,7,17,.58));
}
.auth-brand-block{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 22px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(14px);
}
.auth-showcase-polished .auth-showcase-logo{
  position: static;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(5,5,10,.28);
  box-shadow: 0 0 28px rgba(139,92,246,.26);
  object-fit: contain;
}
.auth-brand-block div{
  display: grid;
  gap: 2px;
}
.auth-brand-block strong{
  color: #fff;
  font-size: 1.02rem;
  font-weight: 1000;
  letter-spacing: -.02em;
}
.auth-brand-block span{
  color: rgba(255,255,255,.58);
  font-size: .76rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .15em;
}
.auth-showcase-content{
  display: grid;
  gap: 12px;
}
.auth-showcase-polished .auth-showcase-copy{
  max-width: 360px;
}
.auth-card-polished{
  gap: 16px;
  padding: clamp(22px, 4vw, 42px);
}
.auth-head-polished{
  margin-bottom: 2px;
}
.auth-head-polished h2{
  max-width: 420px;
}
.auth-provider-list-polished{
  gap: 12px;
}
.auth-provider-list-polished .auth-provider{
  min-height: 74px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.035)) !important;
}
.auth-provider-list-polished .auth-provider:hover,
.auth-provider-list-polished .auth-provider.is-selected{
  transform: translateY(-1px) scale(1.005);
}
.auth-provider-list-polished .auth-provider-icon{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.auth-password-link{
  width: 100%;
  min-height: 56px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.72);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.auth-password-link span{
  font-weight: 850;
}
.auth-password-link strong{
  color: #fff;
  font-size: .88rem;
  font-weight: 1000;
}
.auth-password-link:hover,
.auth-password-link.is-selected{
  transform: translateY(-1px);
  border-color: rgba(139,92,246,.44);
  background: rgba(139,92,246,.11);
  color: #fff;
}
.auth-divider-manual[hidden]{
  display: none;
}
.auth-divider-manual{
  margin-top: 2px;
}
.auth-form-polished{
  animation: authFormIn .18s ease both;
  background: rgba(4,6,16,.42);
}
@keyframes authFormIn{
  from{ opacity: 0; transform: translateY(-8px); }
  to{ opacity: 1; transform: translateY(0); }
}
.auth-form-polished .form-msg:empty{
  display: none;
}
.auth-form-polished .form-msg:not(:empty){
  min-height: 34px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}
.auth-form-polished .auth-switch-btn{
  display: inline-flex;
  align-items: center;
}
.auth-form-polished .auth-switch-btn.is-selected{
  opacity: .55;
  pointer-events: none;
}
@media (max-width: 900px){
  .auth-frame-polished{
    grid-template-columns: 1fr;
  }
  .auth-showcase-polished{
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding: 26px;
  }
  .auth-showcase-polished .auth-showcase-content h1{
    font-size: clamp(2rem, 9vw, 3.2rem);
  }
}
@media (max-width: 560px){
  .auth-provider-list-polished .auth-provider{
    grid-template-columns: 46px 1fr;
  }
  .auth-provider-list-polished .auth-provider-arrow{
    display: none;
  }
  .auth-password-link{
    align-items: flex-start;
    flex-direction: column;
  }
  .auth-brand-block{
    border-radius: 21px;
  }
}

/* OAuth-only login cleanup */
.auth-page{
  min-height: 100dvh;
  overflow-y: auto;
}
.auth-landing{
  min-height: 100dvh;
}
.auth-frame-oauth-only{
  overflow: hidden;
  border-bottom-color: transparent;
  box-shadow: 0 34px 110px rgba(0,0,0,.40);
}
.auth-frame-oauth-only .auth-showcase,
.auth-frame-oauth-only .auth-showcase-polished{
  border-right-color: rgba(255,255,255,.07);
}
.auth-card-oauth-only{
  justify-content: center;
}
.auth-provider-steam:hover{
  border-color: rgba(255,255,255,.40) !important;
  background: rgba(255,255,255,.12) !important;
}
.auth-provider-icon-steam{
  background: linear-gradient(135deg, #111827, #1b2838 52%, #66c0f4);
  color: #ffffff;
}
.auth-provider-note{
  margin: 0;
  padding: 14px 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.62);
  font-weight: 820;
  line-height: 1.45;
}
.auth-frame-oauth-only .auth-showcase-logo{
  object-fit: contain;
  background: rgba(5,5,10,.28);
}

@media (min-width: 901px){
  .auth-page{
    overflow-y: hidden;
  }
  .auth-frame-oauth-only{
    max-height: calc(100dvh - 72px);
  }
  .auth-showcase-polished{
    min-height: min(610px, calc(100dvh - 72px));
  }
}

@media (max-width: 900px){
  .auth-frame-oauth-only .auth-showcase,
  .auth-frame-oauth-only .auth-showcase-polished{
    border-bottom: 0;
  }
  .auth-frame-oauth-only{
    border-bottom-color: transparent;
  }
}
@media (max-width: 560px){
  .auth-landing{
    align-content: start;
  }
}


/* Final Dark Portal login tweaks */
.auth-page{
  background-color: #070516 !important;
  background:
    radial-gradient(760px 520px at 17% 18%, rgba(139,92,246,.24), transparent 64%),
    radial-gradient(720px 520px at 86% 72%, rgba(34,211,238,.12), transparent 62%),
    #070516 !important;
}
.auth-frame-oauth-only{
  border-bottom: 0 !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.36);
}
.auth-frame-oauth-only::before{
  background:
    linear-gradient(90deg, rgba(139,92,246,.16), transparent 38%, rgba(34,211,238,.10)),
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 28%, transparent 100%);
}
.auth-brand-block{
  background: rgba(0,0,0,.62) !important;
  border-color: rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 60px rgba(0,0,0,.34);
}
.auth-showcase-polished .auth-showcase-logo,
.auth-frame-oauth-only .auth-showcase-logo{
  background: #05050a !important;
  border-color: rgba(255,255,255,.10);
}
.auth-showcase-content .auth-showcase-copy{
  max-width: 410px;
  color: rgba(255,255,255,.72);
  font-weight: 820;
  line-height: 1.55;
}
@media (min-width: 901px){
  .auth-frame-oauth-only{
    max-height: none;
  }
}

/* Final login detail fixes: profile copy bubble + seamless bottom */
.auth-showcase-content .auth-showcase-bubble{
  width: min(430px, 100%);
  max-width: 430px;
  margin-top: 6px;
  padding: 15px 17px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(13, 18, 32, .62);
  color: rgba(255,255,255,.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
}
.auth-frame-oauth-only{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.auth-frame-oauth-only::before{
  background:
    linear-gradient(90deg, rgba(139,92,246,.13), transparent 40%, rgba(34,211,238,.08)),
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 24%, transparent 100%) !important;
  opacity: .74;
}
.auth-frame-oauth-only .auth-showcase,
.auth-frame-oauth-only .auth-showcase-polished,
.auth-frame-oauth-only .auth-card-oauth-only{
  box-shadow: none !important;
}

/* Exact bottom-strip removal + aligned login copy */
@media (min-width: 901px){
  body.auth-page{
    min-height: 100dvh !important;
    background-color: #070516 !important;
    background:
      radial-gradient(760px 520px at 17% 18%, rgba(139,92,246,.24), transparent 64%),
      radial-gradient(720px 520px at 86% 72%, rgba(34,211,238,.12), transparent 62%),
      #070516 !important;
  }
  .auth-landing{
    min-height: 100dvh !important;
    padding-top: clamp(14px, 3vh, 30px) !important;
    padding-bottom: 0 !important;
    grid-template-rows: auto 1fr !important;
    align-content: stretch !important;
  }
  .auth-frame-oauth-only{
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 34px 34px 0 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    overflow: hidden !important;
  }
  .auth-frame-oauth-only::after{
    content: none !important;
    display: none !important;
  }
  .auth-frame-oauth-only .auth-showcase,
  .auth-frame-oauth-only .auth-showcase-polished,
  .auth-frame-oauth-only .auth-card-oauth-only{
    min-height: 100% !important;
    padding-bottom: clamp(28px, 5vw, 54px) !important;
  }
  .auth-showcase-polished .auth-showcase-content{
    margin-top: clamp(28px, 6vh, 64px);
  }
  .auth-card-oauth-only{
    padding-bottom: clamp(28px, 5vw, 54px) !important;
  }
}
.auth-showcase-content > .auth-kicker{
  display: none !important;
}
.auth-showcase-content .auth-showcase-bubble{
  min-height: 116px;
  display: flex;
  align-items: center;
}

/* Provider-only login layout: use the normal site topbar and a centered login bubble. */
body.auth-page-provider{
  min-height: 100dvh !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  background-color: #070516 !important;
  background:
    radial-gradient(820px 560px at 22% 18%, rgba(139,92,246,.24), transparent 66%),
    radial-gradient(760px 540px at 80% 72%, rgba(34,211,238,.13), transparent 64%),
    #070516 !important;
}
.auth-page-provider .topbar{
  position: sticky;
  top: 0;
}
.auth-landing-provider{
  width: 100%;
  min-height: calc(100dvh - 66px);
  margin: 0;
  padding: clamp(30px, 7vh, 80px) 18px;
  display: grid;
  place-items: center;
  align-content: center;
}
.auth-centered-card{
  width: min(640px, 100%);
  max-width: 640px;
  min-height: auto;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px) !important;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 32px;
  background:
    radial-gradient(circle at 100% 0%, rgba(34,211,238,.13), transparent 36%),
    linear-gradient(145deg, rgba(18,16,35,.92), rgba(7,12,24,.88));
  box-shadow: 0 34px 110px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.auth-centered-card .auth-head-redesign h1{
  margin: 0;
  color: #fff;
  font-size: clamp(2.15rem, 5vw, 3.35rem);
  line-height: .96;
  letter-spacing: -.055em;
}
.auth-centered-card .auth-head-redesign p:not(.auth-kicker){
  max-width: 520px;
}
.auth-centered-card .auth-provider-note{
  margin-top: 2px;
  border-radius: 22px;
  background: rgba(13, 18, 32, .58);
}
.auth-centered-card .auth-provider-arrow{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 1;
  text-align: center;
  font-size: 0;
}
.auth-centered-card .auth-provider-arrow::before{
  content: "→";
  display: block;
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-1px);
}
@media (max-width: 760px){
  .auth-page-provider .nav{
    display: none;
  }
  .auth-landing-provider{
    min-height: calc(100dvh - 64px);
    padding: 24px 12px;
  }
  .auth-centered-card{
    border-radius: 26px;
  }
}

/* Login final pass: shared Dark Portal topbar, no bottom strip, centered Steam/arrow icons */
html{ background-color: #070516; }
body.auth-page-provider{
  width: 100%;
  min-height: 100dvh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background-color: #070516 !important;
  background:
    radial-gradient(820px 560px at 22% 18%, rgba(139,92,246,.24), transparent 66%),
    radial-gradient(760px 540px at 80% 72%, rgba(34,211,238,.13), transparent 64%),
    linear-gradient(135deg, #070516 0%, #070516 54%, #05101c 100%) !important;
}
body.auth-page-provider::before,
body.auth-page-provider::after{
  content: none !important;
  display: none !important;
}
.login-site-topbar{
  width: min(1180px, calc(100% - 32px));
  min-height: 68px;
  margin: 18px auto 0;
  padding: 10px 12px;
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(132, 76, 255, .27);
  border-radius: 22px;
  background: rgba(5,5,13,.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055);
}
.login-site-brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  flex: 0 0 auto;
}
.login-site-brand img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 13px;
  border: 1px solid rgba(123,66,255,.46);
  background: #05050a;
  box-shadow: 0 0 22px rgba(123,66,255,.28);
}
.login-site-brand span{ display: grid; gap: 1px; line-height: 1.05; }
.login-site-brand strong{ font-size: 1rem; letter-spacing: .02em; font-weight: 1000; }
.login-site-brand small{ color: rgba(255,255,255,.58); font-size: .7rem; font-weight: 1000; letter-spacing: .22em; text-transform: uppercase; }
.login-site-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.login-site-nav a,
.login-site-nav button{
  min-height: 38px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 13px;
  color: rgba(255,255,255,.72);
  background: transparent;
  text-decoration: none;
  font: inherit;
  font-weight: 950;
  font-size: .92rem;
  cursor: pointer;
}
.login-site-nav a:hover,
.login-site-nav button:hover,
.login-site-nav a.is-active{
  color: #fff;
  background: rgba(132,76,255,.15);
}
body.auth-page-provider .auth-landing-provider{
  width: 100%;
  height: calc(100dvh - 86px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(14px, 3vh, 24px) 18px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  overflow: hidden !important;
}
body.auth-page-provider .auth-centered-card{
  width: min(640px, 100%);
  max-height: 100%;
  overflow: visible;
}
.auth-provider-icon-steam{
  display: grid !important;
  place-items: center !important;
  line-height: 0;
}
.auth-provider-icon-steam svg{
  display: block;
  width: 28px !important;
  height: 28px !important;
  transform: translate(1px, -1px);
  transform-origin: center;
}
.auth-centered-card .auth-provider-arrow{
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
}
.auth-centered-card .auth-provider-arrow::before{
  transform: none !important;
}
@media (max-width: 760px){
  body.auth-page-provider{
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
  }
  .login-site-topbar{
    align-items: stretch;
    flex-direction: column;
  }
  .login-site-nav{
    justify-content: flex-start;
  }
  body.auth-page-provider .auth-landing-provider{
    height: auto !important;
    min-height: calc(100dvh - 122px) !important;
    overflow: visible !important;
    padding: 22px 12px 32px !important;
  }
}
@media (max-height: 720px) and (min-width: 761px){
  body.auth-page-provider .auth-centered-card{
    padding: 24px !important;
  }
  .auth-centered-card .auth-provider{
    min-height: 68px;
  }
}


/* === Unified navigation + no-cut background pass === */
html{
  min-height: 100%;
  background-color: #060612 !important;
  background-image: none !important;
}
body.dark,
body.sudoku-arena,
body.auth-page-provider{
  min-height: 100dvh;
  background-color: #060612 !important;
  background-image:
    radial-gradient(900px 620px at 18% 8%, rgba(123,66,255,.22), transparent 62%),
    radial-gradient(820px 560px at 85% 18%, rgba(46,168,255,.14), transparent 60%),
    radial-gradient(900px 620px at 82% 86%, rgba(123,66,255,.10), transparent 64%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
body{
  overflow-x: hidden;
}
.unified-topbar{
  width: min(1180px, calc(100% - 32px));
  min-height: 68px;
  margin: 18px auto 0;
  padding: 10px 12px;
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(132, 76, 255, .27);
  border-radius: 22px;
  background: rgba(5, 5, 13, .86);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055);
}
.unified-brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  flex: 0 0 auto;
  min-width: 0;
}
.unified-brand-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 13px;
  border: 1px solid rgba(123,66,255,.46);
  background: #05050a;
  box-shadow: 0 0 22px rgba(123,66,255,.28);
}
.unified-brand span{
  display: grid;
  gap: 1px;
  line-height: 1.05;
  min-width: 0;
}
.unified-brand strong{
  font-size: 1rem;
  letter-spacing: .02em;
  font-weight: 1000;
  white-space: nowrap;
}
.unified-brand small{
  color: rgba(255,255,255,.58);
  font-size: .7rem;
  font-weight: 1000;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.unified-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.unified-nav a,
.unified-nav button{
  min-height: 38px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 13px;
  color: rgba(255,255,255,.72);
  background: transparent;
  text-decoration: none;
  font: inherit;
  font-weight: 950;
  font-size: .92rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.unified-nav a:hover,
.unified-nav button:hover,
.unified-nav a.is-active,
.unified-nav button.is-active{
  color: #fff;
  background: rgba(132,76,255,.15);
}
.unified-nav .auth-avatar-btn{
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0 !important;
  border: 1px solid rgba(139,92,246,.42) !important;
  color: #fff;
  background: rgba(255,255,255,.055);
  overflow: hidden;
}
.unified-nav .auth-avatar-name{ display: none !important; }
.unified-nav .auth-avatar-initial,
.unified-nav .auth-avatar-img{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  object-fit: cover;
}
.auth-menu-popover{
  z-index: 100;
}
body.auth-page-provider{
  height: auto !important;
  overflow-y: auto !important;
}
body.auth-page-provider .auth-landing-provider{
  min-height: calc(100dvh - 104px) !important;
  height: auto !important;
  padding: clamp(22px, 6vh, 58px) 18px max(32px, env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
}
.auth-provider-icon,
.auth-provider-icon-steam{
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
}
.auth-provider-icon svg,
.auth-provider-icon-steam svg{
  display: block !important;
  margin: auto !important;
}
.auth-provider-icon-steam svg{
  width: 28px !important;
  height: 28px !important;
  transform: none !important;
}
.auth-provider-arrow{
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}
.auth-provider-arrow::before{
  transform: none !important;
}
.sudoku-topbar.unified-topbar{
  padding: 10px 12px;
  margin-top: 18px;
}
.sudoku-nav.unified-nav,
.ttt-nav.unified-nav,
.games-nav.unified-nav{
  gap: 6px;
}
.sudoku-nav.unified-nav a,
.sudoku-nav.unified-nav button,
.ttt-nav.unified-nav a,
.ttt-nav.unified-nav button,
.games-nav.unified-nav a,
.games-nav.unified-nav button{
  min-height: 38px;
  padding: 0 15px;
  border-radius: 13px;
  color: rgba(255,255,255,.72);
  font-size: .92rem;
  font-weight: 950;
}
.sudoku-nav.unified-nav a:hover,
.sudoku-nav.unified-nav button:hover,
.sudoku-nav.unified-nav a.is-active,
.ttt-nav.unified-nav a:hover,
.ttt-nav.unified-nav button:hover,
.ttt-nav.unified-nav a.is-active,
.games-nav.unified-nav a:hover,
.games-nav.unified-nav button:hover,
.games-nav.unified-nav a.is-active{
  color:#fff;
  background: rgba(132,76,255,.15);
}
@media (max-width: 760px){
  .unified-topbar{
    align-items: stretch;
    flex-direction: column;
  }
  .unified-nav{
    justify-content: flex-start;
  }
}
@media (max-width: 520px){
  .unified-brand small{ letter-spacing: .14em; }
  .unified-nav a,
  .unified-nav button{ padding: 0 11px; }
}

/* === Final scroll/topbar/sudoku background cleanup ===
   Removes the empty strip above the navigation and smooths the Sudoku arena
   background so no hard dark band appears beside the board while scrolling. */
html,
body{
  margin: 0 !important;
  overscroll-behavior-y: none;
  background-color: #060612 !important;
}

.unified-topbar,
.login-site-topbar,
.home-topbar,
.dashboard-topbar,
.games-topbar,
.stats-topbar,
.remember-topbar,
.wordle-topbar,
.sudoku-topbar,
.ttt-topbar,
.sudoku-topbar.unified-topbar,
.games-topbar.unified-topbar,
.ttt-topbar.unified-topbar{
  margin-top: 0 !important;
}

.unified-topbar{
  position: sticky !important;
  top: 0 !important;
}

body.dark,
body.sudoku-arena,
body.auth-page-provider{
  background-color: #060612 !important;
  background-image:
    radial-gradient(960px 660px at 16% 0%, rgba(123,66,255,.24), transparent 67%),
    radial-gradient(980px 700px at 92% 12%, rgba(46,168,255,.16), transparent 70%),
    radial-gradient(920px 640px at 78% 92%, rgba(123,66,255,.10), transparent 70%),
    linear-gradient(135deg, #070516 0%, #080716 52%, #06101c 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

body.auth-page-provider{
  overflow: hidden !important;
}
body.auth-page-provider .auth-landing-provider{
  min-height: calc(100dvh - 68px) !important;
}

body.sudoku-arena::before{
  display: none !important;
}
.sudoku-falling-layer{
  opacity: .72;
}
.sudoku-arena .panel.sudoku-panel{
  background:
    radial-gradient(1120px 760px at 9% 0%, rgba(122,53,255,.22), transparent 70%),
    radial-gradient(1080px 780px at 100% 4%, rgba(41,168,255,.16), transparent 74%),
    linear-gradient(135deg, rgba(14,11,27,.94) 0%, rgba(8,8,18,.92) 58%, rgba(7,12,24,.92) 100%) !important;
}
.sudoku-panel::after{
  display: none !important;
}
.sudoku-arena .sudoku-left,
.sudoku-arena .sidebox{
  background:
    radial-gradient(840px 520px at 12% 0%, rgba(122,53,255,.14), transparent 68%),
    linear-gradient(145deg, rgba(15,13,29,.76), rgba(7,8,18,.74)) !important;
}

@media (max-height: 720px), (max-width: 760px){
  body.auth-page-provider{
    overflow-y: auto !important;
  }
}

/* === Final gameplay polish: hideable topbar + seamless Sudoku background === */
html,
body{
  margin: 0 !important;
  min-height: 100% !important;
  overscroll-behavior: none !important;
  background: #070612 !important;
}

body{
  overflow-x: hidden !important;
}

.unified-topbar{
  transition: transform .22s ease, opacity .22s ease, margin-bottom .22s ease !important;
  transform-origin: top center;
}

.nav-collapse-toggle,
.nav-reveal-toggle{
  width: 42px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(132,76,255,.34);
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  background: rgba(6,5,14,.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 38px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07);
  font-size: 16px;
  line-height: 1;
  font-weight: 1000;
  cursor: pointer;
  z-index: 210;
}

.nav-collapse-toggle:hover,
.nav-reveal-toggle:hover{
  color: #fff;
  border-color: rgba(167,105,255,.62);
  background: rgba(132,76,255,.18);
}

.nav-collapse-toggle{
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
}

.nav-reveal-toggle{
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: none;
}

body.nav-hidden .unified-topbar{
  transform: translateY(-118%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin-bottom: calc(-1 * var(--unified-topbar-height, 72px)) !important;
}

body.nav-hidden .nav-reveal-toggle{
  display: grid;
}

body.nav-hidden .nav-collapse-toggle{
  pointer-events: none;
}

@media (max-width: 760px){
  .nav-collapse-toggle,
  .nav-reveal-toggle{
    width: 40px;
    height: 24px;
  }
}

/* Sudoku: use one full-page background that never ends while scrolling. */
body.sudoku-arena{
  min-height: 100dvh !important;
  background-color: #080714 !important;
  background-image:
    linear-gradient(90deg, rgba(119,58,255,.20) 0%, rgba(119,58,255,.08) 22%, rgba(7,7,18,.00) 48%, rgba(38,154,255,.11) 78%, rgba(38,154,255,.18) 100%),
    linear-gradient(135deg, #140928 0%, #090816 46%, #071626 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: fixed !important;
}

body.sudoku-arena::before{
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(1100px 850px at 8% 8%, rgba(127,76,255,.20), transparent 72%),
    radial-gradient(1200px 900px at 100% 18%, rgba(41,168,255,.14), transparent 76%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)) !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.sudoku-falling-layer{
  display: none !important;
}

body.sudoku-arena .sudoku-page,
body.sudoku-arena .sudoku-topbar,
body.sudoku-arena .toast,
body.sudoku-arena .modal-overlay{
  position: relative;
  z-index: 1;
}

/* Remove the logged-out Sudoku progression card below the number pad. */
#progressWrap[hidden],
.sudoku-arena .progress-wrap:empty{
  display: none !important;
}


/* === Absolute final Sudoku background + topbar behavior fix ===
   The previous side glow used finite gradients that created a visible horizontal edge
   after scrolling. This replaces it with one fixed, full-viewport background layer
   that never ends and blends softly from top to bottom. */
body.sudoku-arena{
  position: relative !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  color: #fff !important;
  background: #080714 !important;
  background-image: none !important;
  background-attachment: scroll !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: none !important;
}

body.sudoku-arena::before{
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
  background:
    radial-gradient(1800px 1350px at -18% 18%, rgba(117, 58, 230, .32) 0%, rgba(117, 58, 230, .20) 28%, rgba(117, 58, 230, .10) 52%, rgba(117, 58, 230, .045) 73%, rgba(117, 58, 230, 0) 100%),
    radial-gradient(1800px 1350px at 118% 20%, rgba(39, 154, 238, .28) 0%, rgba(39, 154, 238, .17) 30%, rgba(39, 154, 238, .085) 55%, rgba(39, 154, 238, .038) 76%, rgba(39, 154, 238, 0) 100%),
    radial-gradient(1300px 1100px at 50% 0%, rgba(127, 76, 255, .09) 0%, rgba(127, 76, 255, .045) 42%, rgba(127, 76, 255, 0) 82%),
    linear-gradient(180deg, #0a0718 0%, #080714 42%, #070612 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

body.sudoku-arena > *{
  position: relative;
  z-index: 1;
}

body.sudoku-arena .sudoku-panel{
  background:
    radial-gradient(1300px 900px at 8% 0%, rgba(122,53,255,.18), transparent 78%),
    radial-gradient(1300px 900px at 100% 0%, rgba(41,168,255,.12), transparent 80%),
    linear-gradient(135deg, rgba(14,11,27,.94) 0%, rgba(8,8,18,.93) 58%, rgba(7,12,24,.93) 100%) !important;
}

/* Never restore a previously hidden nav from localStorage; it only hides after the user clicks. */
body:not(.nav-hidden) .unified-topbar{
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Remove the logged-out Sudoku progression/login card completely. */
#progressWrap,
.sudoku-arena .progress-wrap{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* === User polish: top-only nav reveal + seamless Sudoku sides + falling symbols restored === */
/* The reveal arrow belongs only at the top of the document, not at the end of the scrolled page. */
.nav-reveal-toggle{
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
body.nav-hidden .nav-reveal-toggle{
  display: grid !important;
}

/* Sudoku background: use a constant side wash across the whole viewport so there is no horizontal cutoff line. */
body.sudoku-arena{
  background-color: #070612 !important;
  background-image:
    linear-gradient(90deg,
      rgba(89, 44, 178, .34) 0%,
      rgba(72, 37, 145, .24) 10%,
      rgba(29, 18, 62, .10) 28%,
      rgba(7, 7, 18, .02) 47%,
      rgba(8, 11, 25, .04) 58%,
      rgba(18, 72, 116, .16) 82%,
      rgba(33, 123, 192, .30) 100%),
    linear-gradient(180deg, #090717 0%, #080714 48%, #070612 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100vw 100vh, 100vw 100vh !important;
  background-attachment: fixed !important;
}

body.sudoku-arena::before{
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(127, 76, 255, .18) 0%,
      rgba(127, 76, 255, .10) 18%,
      rgba(127, 76, 255, 0) 43%,
      rgba(41, 168, 255, 0) 57%,
      rgba(41, 168, 255, .08) 78%,
      rgba(41, 168, 255, .16) 100%),
    radial-gradient(1400px 1200px at 18% 16%, rgba(127,76,255,.10), rgba(127,76,255,0) 78%),
    radial-gradient(1400px 1200px at 88% 18%, rgba(41,168,255,.10), rgba(41,168,255,0) 78%) !important;
  background-repeat: no-repeat !important;
  background-size: 100vw 100vh, 100vw 100vh, 100vw 100vh !important;
  background-position: center !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Bring back the floating Sudoku numbers/labels while keeping them behind the cards. */
body.sudoku-arena .sudoku-falling-layer{
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .64 !important;
}
body.sudoku-arena .sudoku-falling-layer span{
  display: block !important;
}
body.sudoku-arena .unified-topbar,
body.sudoku-arena .sudoku-page,
body.sudoku-arena .toast,
body.sudoku-arena .modal-overlay{
  position: relative !important;
  z-index: 2 !important;
}

/* === FINAL: Sudoku seamless viewport background with restored falling elements ===
   The side colours now live on the fixed falling layer itself, not on a finite
   body/panel gradient. This removes the visible horizontal cutoff while keeping
   the decorative falling numbers behind the game. */
body.sudoku-arena{
  isolation: isolate !important;
  background: #070612 !important;
  background-image: none !important;
  overflow-x: hidden !important;
}

body.sudoku-arena::before,
body.sudoku-arena::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

body.sudoku-arena .sudoku-falling-layer{
  display: block !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(92, 45, 184, .36) 0%,
      rgba(76, 38, 154, .27) 9%,
      rgba(41, 25, 86, .14) 20%,
      rgba(10, 8, 24, .02) 39%,
      rgba(7, 7, 18, 0) 52%,
      rgba(9, 18, 35, .04) 64%,
      rgba(18, 72, 118, .17) 82%,
      rgba(31, 119, 186, .32) 100%),
    linear-gradient(135deg, #0a0718 0%, #080714 46%, #07101d 100%) !important;
}

body.sudoku-arena .sudoku-falling-layer::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(130vw 140vh at -18% 18%, rgba(127, 76, 255, .18) 0%, rgba(127, 76, 255, .09) 46%, rgba(127, 76, 255, 0) 100%),
    radial-gradient(130vw 140vh at 118% 18%, rgba(41, 168, 255, .16) 0%, rgba(41, 168, 255, .08) 48%, rgba(41, 168, 255, 0) 100%),
    radial-gradient(90vw 90vh at 50% -12%, rgba(127, 76, 255, .08) 0%, rgba(127, 76, 255, 0) 78%);
  opacity: .9;
}

body.sudoku-arena .sudoku-falling-layer span{
  display: block !important;
  z-index: 1 !important;
}

body.sudoku-arena .unified-topbar,
body.sudoku-arena .sudoku-page,
body.sudoku-arena .toast,
body.sudoku-arena .modal-overlay{
  position: relative !important;
  z-index: 2 !important;
}


/* === Dynamic game brand accents + login falling background ===
   Uses the existing Dark Portal logo image and decorates it only on opened game pages. */
.game-brand .dynamic-game-logo{
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.game-brand .dynamic-game-logo .unified-brand-logo{
  width: 44px;
  height: 44px;
  display: block;
}
.game-logo-badge{
  position: absolute;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(8,7,18,.92);
  box-shadow: 0 8px 22px rgba(0,0,0,.36), 0 0 18px var(--badge-glow, rgba(132,76,255,.46));
  color: var(--badge-color, #fff);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -.03em;
  pointer-events: none;
  z-index: 3;
}
.game-logo-badge-left{ left: -7px; top: -6px; }
.game-logo-badge-right{ right: -7px; bottom: -6px; }
.game-brand-ttt .game-logo-badge-left{
  --badge-color: #ff4c82;
  --badge-glow: rgba(255,46,111,.62);
  font-size: 13px;
}
.game-brand-ttt .game-logo-badge-right{
  --badge-color: #61c7ff;
  --badge-glow: rgba(46,168,255,.62);
  font-size: 13px;
}
.game-brand-sudoku .game-logo-badge-left{
  --badge-color: #f7f4ff;
  --badge-glow: rgba(167,105,255,.64);
}
.game-brand-sudoku .game-logo-badge-right{
  --badge-color: #8fd6ff;
  --badge-glow: rgba(46,168,255,.60);
  font-size: 13px;
}

body.auth-page-provider{
  position: relative !important;
  isolation: isolate !important;
}
.login-falling-layer{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .68;
}
.login-falling-layer::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 620px at 12% 12%, rgba(123,66,255,.10), transparent 70%),
    radial-gradient(820px 620px at 88% 18%, rgba(46,168,255,.08), transparent 72%);
  pointer-events: none;
}
.login-falling-layer span{
  position: absolute;
  left: var(--left);
  top: -130px;
  color: var(--color);
  font-size: var(--size);
  font-weight: 1000;
  line-height: 1;
  opacity: var(--opacity);
  text-shadow: 0 0 18px var(--glow), 0 0 46px var(--glow);
  filter: blur(.1px);
  transform: translate3d(0, -18vh, 0) rotate(var(--rotation));
  animation: loginFall var(--duration) linear var(--delay) infinite;
  user-select: none;
}
@keyframes loginFall{
  from { transform: translate3d(0, -18vh, 0) rotate(var(--rotation)); }
  to { transform: translate3d(var(--drift), 122vh, 0) rotate(calc(var(--rotation) + 180deg)); }
}
body.auth-page-provider .unified-topbar,
body.auth-page-provider .auth-landing-provider,
body.auth-page-provider .toast,
body.auth-page-provider .modal-overlay{
  position: relative !important;
  z-index: 2 !important;
}
@media (prefers-reduced-motion: reduce){
  .login-falling-layer span{ animation: none !important; }
}
@media (max-width: 520px){
  .game-logo-badge{
    width: 17px;
    height: 17px;
    font-size: 10px;
  }
  .game-logo-badge-left{ left: -5px; top: -5px; }
  .game-logo-badge-right{ right: -5px; bottom: -5px; }
}

/* === Sudoku compact focus layout: no page scroll + actions inside number controls === */
@media (min-width: 861px){
  body.sudoku-arena{
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: hidden !important;
  }

  body.sudoku-arena .unified-topbar{
    min-height: 62px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  body.sudoku-arena .unified-brand-logo,
  body.sudoku-arena .game-brand .dynamic-game-logo,
  body.sudoku-arena .game-brand .dynamic-game-logo .unified-brand-logo{
    width: 40px !important;
    height: 40px !important;
  }

  body.sudoku-arena .page.sudoku-page{
    width: min(1160px, calc(100% - 28px)) !important;
    height: calc(100dvh - 74px) !important;
    min-height: 0 !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    display: grid !important;
    align-items: center !important;
  }

  body.sudoku-arena .panel.sudoku-panel{
    height: min(100%, 760px) !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 26px !important;
    display: grid !important;
    overflow: hidden !important;
  }

  body.sudoku-arena .sudoku-layout{
    height: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    gap: 14px !important;
    grid-template-columns: minmax(0, 1fr) minmax(292px, 334px) !important;
    align-items: center !important;
  }

  body.sudoku-arena .sudoku-left,
  body.sudoku-arena .sidebox{
    min-height: 0 !important;
    height: auto !important;
    border-radius: 24px !important;
  }

  body.sudoku-arena .sudoku-left{
    display: grid !important;
    place-items: center !important;
    padding: 12px !important;
  }

  body.sudoku-arena .sidebox{
    align-self: center !important;
    gap: 10px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  body.sudoku-arena .sidebox::before{
    top: 14px !important;
    bottom: 14px !important;
  }

  body.sudoku-arena .sudoku-grid{
    --sdk-cell: clamp(42px, min(4.85vw, calc((100dvh - 190px) / 9)), 52px) !important;
    border-radius: 20px !important;
  }

  body.sudoku-arena .cell{
    font-size: clamp(1rem, 1.45vw, 1.24rem) !important;
  }

  body.sudoku-arena .side-top{
    gap: 10px !important;
  }

  body.sudoku-arena .seg{
    gap: 5px !important;
    padding: 5px !important;
    border-radius: 16px !important;
  }

  body.sudoku-arena .seg-btn{
    min-height: 34px !important;
    font-size: .75rem !important;
    border-radius: 11px !important;
    padding: 0 6px !important;
  }

  body.sudoku-arena .hud{
    gap: 7px !important;
  }

  body.sudoku-arena .hud-item{
    min-height: 56px !important;
    padding: 9px 8px !important;
    border-radius: 15px !important;
  }

  body.sudoku-arena .hud-label{
    font-size: .58rem !important;
    letter-spacing: .075em !important;
  }

  body.sudoku-arena .hud-value{
    font-size: .96rem !important;
  }

  body.sudoku-arena .hud-icon.pauseBtn-large{
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
  }

  body.sudoku-arena .pauseBtn-large svg{
    width: 18px !important;
    height: 18px !important;
  }

  body.sudoku-arena .grid-toolbar.sudoku-control-actions{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  body.sudoku-arena .sudoku-control-actions .btn{
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 8px !important;
    border-radius: 13px !important;
    font-size: .68rem !important;
    letter-spacing: -.02em !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  body.sudoku-arena .sudoku-control-actions #solveBtn{
    font-size: .62rem !important;
  }

  body.sudoku-arena .sudoku-control-actions .ico{
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  body.sudoku-arena .badge-mini{
    min-width: 22px !important;
    height: 20px !important;
    font-size: .68rem !important;
  }

  body.sudoku-arena .numpad{
    gap: 7px !important;
  }

  body.sudoku-arena .bigpad .pad,
  body.sudoku-arena .pad{
    min-height: 46px !important;
    border-radius: 15px !important;
    font-size: 1.02rem !important;
  }

  body.sudoku-arena .pad-wide{
    min-height: 42px !important;
    font-size: .78rem !important;
  }

  body.sudoku-arena #sudokuMsg{
    display: none !important;
  }
}

@media (min-width: 861px) and (max-height: 760px){
  body.sudoku-arena .page.sudoku-page{
    height: calc(100dvh - 66px) !important;
    margin-top: 4px !important;
  }

  body.sudoku-arena .unified-topbar{
    min-height: 58px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  body.sudoku-arena .sudoku-grid{
    --sdk-cell: clamp(38px, min(4.55vw, calc((100dvh - 164px) / 9)), 48px) !important;
  }

  body.sudoku-arena .panel.sudoku-panel,
  body.sudoku-arena .sudoku-left,
  body.sudoku-arena .sidebox{
    padding: 9px !important;
  }

  body.sudoku-arena .sidebox,
  body.sudoku-arena .side-top{
    gap: 7px !important;
  }

  body.sudoku-arena .seg-btn{
    min-height: 30px !important;
  }

  body.sudoku-arena .hud-item{
    min-height: 50px !important;
    padding: 7px !important;
  }

  body.sudoku-arena .sudoku-control-actions .btn{
    min-height: 34px !important;
    height: 34px !important;
  }

  body.sudoku-arena .bigpad .pad,
  body.sudoku-arena .pad{
    min-height: 40px !important;
  }

  body.sudoku-arena .pad-wide{
    min-height: 38px !important;
  }
}

@media (max-width: 860px){
  body.sudoku-arena .grid-toolbar.sudoku-control-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
  }
}

html.sudoku-doc{
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}


/* === Sudoku final comfort layout: buttons back above board, larger UI, still no scroll === */
@media (min-width: 861px){
  html.sudoku-doc,
  body.sudoku-arena{
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.sudoku-arena .unified-topbar{
    min-height: 62px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    flex-shrink: 0 !important;
  }

  body.sudoku-arena .page.sudoku-page{
    width: min(1220px, calc(100% - 28px)) !important;
    height: calc(100dvh - 72px) !important;
    min-height: 0 !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    display: grid !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  body.sudoku-arena .panel.sudoku-panel{
    width: 100% !important;
    height: min(100%, 780px) !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 28px !important;
    display: grid !important;
    overflow: hidden !important;
  }

  body.sudoku-arena .sudoku-layout{
    height: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    gap: 20px !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 370px) !important;
    align-items: center !important;
  }

  body.sudoku-arena .sudoku-left{
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    overflow: hidden !important;
  }

  body.sudoku-arena .sidebox{
    align-self: center !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 118px) !important;
    gap: 14px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  body.sudoku-arena .grid-toolbar{
    width: min(100%, 660px) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 auto !important;
  }

  body.sudoku-arena .grid-toolbar .btn{
    width: auto !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    font-size: .88rem !important;
    line-height: 1 !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  body.sudoku-arena .grid-toolbar #solveBtn{
    min-width: 188px !important;
    font-size: .86rem !important;
  }

  body.sudoku-arena .grid-toolbar .ico{
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  body.sudoku-arena .badge-mini{
    min-width: 25px !important;
    height: 23px !important;
    font-size: .78rem !important;
  }

  body.sudoku-arena .sudoku-grid{
    --sdk-cell: clamp(46px, min(5.2vw, calc((100dvh - 210px) / 9)), 60px) !important;
    border-radius: 22px !important;
  }

  body.sudoku-arena .cell{
    font-size: clamp(1.05rem, 1.62vw, 1.36rem) !important;
  }

  body.sudoku-arena .notes{
    font-size: clamp(.48rem, .78vw, .62rem) !important;
  }

  body.sudoku-arena .side-top{
    gap: 13px !important;
  }

  body.sudoku-arena .seg{
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 18px !important;
  }

  body.sudoku-arena .seg-btn{
    min-height: 38px !important;
    padding: 0 7px !important;
    border-radius: 13px !important;
    font-size: .80rem !important;
  }

  body.sudoku-arena .hud{
    gap: 8px !important;
  }

  body.sudoku-arena .hud-item{
    min-height: 68px !important;
    padding: 10px !important;
    border-radius: 17px !important;
  }

  body.sudoku-arena .hud-label{
    font-size: .64rem !important;
  }

  body.sudoku-arena .hud-value{
    font-size: 1.06rem !important;
  }

  body.sudoku-arena .hud-icon.pauseBtn-large{
    width: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
  }

  body.sudoku-arena .pauseBtn-large svg{
    width: 21px !important;
    height: 21px !important;
  }

  body.sudoku-arena .numpad{
    gap: 10px !important;
  }

  body.sudoku-arena .bigpad .pad,
  body.sudoku-arena .pad{
    min-height: 54px !important;
    border-radius: 17px !important;
    font-size: 1.14rem !important;
  }

  body.sudoku-arena .pad-wide{
    min-height: 48px !important;
    font-size: .84rem !important;
  }

  body.sudoku-arena #sudokuMsg{
    display: none !important;
  }
}

@media (min-width: 861px) and (max-height: 740px){
  body.sudoku-arena .page.sudoku-page{
    height: calc(100dvh - 66px) !important;
    margin-top: 4px !important;
  }

  body.sudoku-arena .unified-topbar{
    min-height: 58px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  body.sudoku-arena .panel.sudoku-panel{
    padding: 10px !important;
  }

  body.sudoku-arena .sudoku-left{
    padding: 10px !important;
    gap: 10px !important;
  }

  body.sudoku-arena .sidebox{
    padding: 10px !important;
    gap: 9px !important;
  }

  body.sudoku-arena .grid-toolbar .btn{
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 13px !important;
    font-size: .78rem !important;
  }

  body.sudoku-arena .grid-toolbar #solveBtn{
    min-width: 162px !important;
    font-size: .76rem !important;
  }

  body.sudoku-arena .sudoku-grid{
    --sdk-cell: clamp(40px, min(4.65vw, calc((100dvh - 188px) / 9)), 52px) !important;
  }

  body.sudoku-arena .seg-btn{
    min-height: 32px !important;
    font-size: .72rem !important;
  }

  body.sudoku-arena .hud-item{
    min-height: 52px !important;
    padding: 7px !important;
  }

  body.sudoku-arena .hud-icon.pauseBtn-large{
    width: 36px !important;
    height: 36px !important;
  }

  body.sudoku-arena .bigpad .pad,
  body.sudoku-arena .pad{
    min-height: 42px !important;
  }

  body.sudoku-arena .pad-wide{
    min-height: 38px !important;
  }
}

/* === Final tweak: accessible topbar reveal + Sudoku fit, buttons restored === */
.nav-reveal-toggle{
  position: fixed !important;
  top: 8px !important;
  left: 50% !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: 64px !important;
  height: 34px !important;
  min-width: 64px !important;
  min-height: 34px !important;
  padding: 0 !important;
  z-index: 9999 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: none !important;
  place-items: center !important;
  cursor: pointer !important;
}
body.nav-hidden .nav-reveal-toggle{
  display: grid !important;
}
.nav-collapse-toggle{
  width: 52px !important;
  height: 28px !important;
  min-width: 52px !important;
  min-height: 28px !important;
  bottom: -15px !important;
  z-index: 9998 !important;
}

@media (min-width: 861px){
  html.sudoku-doc,
  body.sudoku-arena{
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.sudoku-arena .unified-topbar{
    min-height: 60px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  body.sudoku-arena .page.sudoku-page{
    width: min(1140px, calc(100vw - 32px)) !important;
    height: calc(100dvh - 74px) !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    display: grid !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  body.nav-hidden.sudoku-arena .page.sudoku-page{
    height: calc(100dvh - 14px) !important;
    margin-top: 6px !important;
  }

  body.sudoku-arena .panel.sudoku-panel{
    width: 100% !important;
    height: 100% !important;
    max-height: 720px !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 26px !important;
    display: grid !important;
    overflow: hidden !important;
  }

  body.sudoku-arena .sudoku-layout{
    height: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    gap: 16px !important;
    grid-template-columns: minmax(0, 1fr) minmax(292px, 340px) !important;
    align-items: center !important;
  }

  body.sudoku-arena .sudoku-left{
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  body.sudoku-arena .sidebox{
    align-self: center !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 104px) !important;
    gap: 12px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  body.nav-hidden.sudoku-arena .sidebox{
    max-height: calc(100dvh - 38px) !important;
  }

  body.sudoku-arena .grid-toolbar{
    width: min(100%, 620px) !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  body.sudoku-arena .grid-toolbar .btn{
    width: auto !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 15px !important;
    border-radius: 15px !important;
    font-size: .82rem !important;
    line-height: 1 !important;
    gap: 7px !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
  }

  body.sudoku-arena .grid-toolbar #pencilBtn,
  body.sudoku-arena .grid-toolbar #hintBtn{
    min-width: 0 !important;
  }

  body.sudoku-arena .grid-toolbar #solveBtn{
    min-width: 174px !important;
    font-size: .80rem !important;
  }

  body.sudoku-arena .sudoku-grid{
    --sdk-cell: clamp(42px, min(4.65vw, calc((100dvh - 200px) / 9), calc((100vw - 520px) / 9)), 56px) !important;
    border-radius: 21px !important;
  }

  body.nav-hidden.sudoku-arena .sudoku-grid{
    --sdk-cell: clamp(44px, min(4.85vw, calc((100dvh - 142px) / 9), calc((100vw - 520px) / 9)), 58px) !important;
  }

  body.sudoku-arena .cell{
    font-size: clamp(1.02rem, 1.5vw, 1.30rem) !important;
  }

  body.sudoku-arena .side-top{
    gap: 10px !important;
  }

  body.sudoku-arena .seg-btn{
    min-height: 34px !important;
    font-size: .75rem !important;
    padding: 0 6px !important;
  }

  body.sudoku-arena .hud{
    gap: 7px !important;
  }

  body.sudoku-arena .hud-item{
    min-height: 58px !important;
    padding: 8px !important;
  }

  body.sudoku-arena .hud-icon.pauseBtn-large{
    width: 38px !important;
    height: 38px !important;
  }

  body.sudoku-arena .numpad{
    gap: 8px !important;
  }

  body.sudoku-arena .bigpad .pad,
  body.sudoku-arena .pad{
    min-height: 47px !important;
    border-radius: 15px !important;
    font-size: 1.04rem !important;
  }

  body.sudoku-arena .pad-wide{
    min-height: 42px !important;
  }
}

@media (min-width: 861px) and (max-height: 740px){
  body.sudoku-arena .page.sudoku-page{
    height: calc(100dvh - 68px) !important;
    margin-top: 5px !important;
  }

  body.nav-hidden.sudoku-arena .page.sudoku-page{
    height: calc(100dvh - 12px) !important;
  }

  body.sudoku-arena .panel.sudoku-panel{
    padding: 10px !important;
  }

  body.sudoku-arena .sudoku-left,
  body.sudoku-arena .sidebox{
    padding: 10px !important;
    gap: 9px !important;
  }

  body.sudoku-arena .grid-toolbar .btn{
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-size: .76rem !important;
  }

  body.sudoku-arena .grid-toolbar #solveBtn{
    min-width: 156px !important;
    font-size: .74rem !important;
  }

  body.sudoku-arena .sudoku-grid{
    --sdk-cell: clamp(38px, min(4.35vw, calc((100dvh - 176px) / 9), calc((100vw - 500px) / 9)), 50px) !important;
  }

  body.nav-hidden.sudoku-arena .sudoku-grid{
    --sdk-cell: clamp(40px, min(4.6vw, calc((100dvh - 122px) / 9), calc((100vw - 500px) / 9)), 53px) !important;
  }

  body.sudoku-arena .seg-btn{
    min-height: 30px !important;
  }

  body.sudoku-arena .hud-item{
    min-height: 50px !important;
    padding: 7px !important;
  }

  body.sudoku-arena .bigpad .pad,
  body.sudoku-arena .pad{
    min-height: 39px !important;
  }

  body.sudoku-arena .pad-wide{
    min-height: 36px !important;
  }
}

@media (max-width: 1160px) and (min-width: 861px){
  body.sudoku-arena .page.sudoku-page{
    width: min(1088px, calc(100vw - 24px)) !important;
  }
  body.sudoku-arena .sudoku-layout{
    grid-template-columns: minmax(0, 1fr) minmax(280px, 318px) !important;
    gap: 12px !important;
  }
  body.sudoku-arena .grid-toolbar{
    width: min(100%, 590px) !important;
    gap: 8px !important;
  }
  body.sudoku-arena .grid-toolbar .btn{
    padding: 0 11px !important;
    font-size: .76rem !important;
  }
  body.sudoku-arena .grid-toolbar #solveBtn{
    min-width: 154px !important;
    font-size: .72rem !important;
  }
  body.sudoku-arena .sudoku-grid{
    --sdk-cell: clamp(38px, min(4.28vw, calc((100dvh - 190px) / 9), calc((100vw - 470px) / 9)), 50px) !important;
  }
  body.nav-hidden.sudoku-arena .sudoku-grid{
    --sdk-cell: clamp(40px, min(4.5vw, calc((100dvh - 140px) / 9), calc((100vw - 470px) / 9)), 52px) !important;
  }
}


/* Steam OAuth button override */
.auth-provider-steam:hover{
  border-color: rgba(102,192,244,.55) !important;
  background: rgba(102,192,244,.12) !important;
}
.auth-provider-icon-steam{
  display:grid !important;
  place-items:center !important;
  line-height:0;
  background: linear-gradient(135deg, #111827, #1b2838 52%, #66c0f4) !important;
  color:#fff !important;
}
.auth-provider-icon-steam svg{
  display:block !important;
  width:28px !important;
  height:28px !important;
  margin:auto !important;
}

/* --------------------------------------------------------------------------
   Sudoku setup screen + Sum-Doku cages
   Matches the Tic-Tac-Toe configuration flow while keeping classic Sudoku UI.
---------------------------------------------------------------------------- */
.sudoku-arena [hidden] {
  display: none !important;
}

.sudoku-arena .sudoku-page {
  display: grid;
  gap: 18px;
}

.sudoku-setup,
.sudoku-arena .sudoku-panel {
  border: 1px solid rgba(127, 76, 255, 0.26);
  background:
    radial-gradient(circle at 14% 0%, rgba(122, 53, 255, 0.20), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(41, 168, 255, 0.10), transparent 30%),
    linear-gradient(145deg, rgba(14, 12, 27, 0.94), rgba(5, 5, 12, 0.88));
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.sudoku-setup {
  position: relative;
  display: grid;
  gap: 22px;
  border-radius: 30px;
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  isolation: isolate;
}

.sudoku-setup::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(41,168,255,.18), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.sudoku-setup-copy {
  max-width: 820px;
  display: grid;
  gap: 9px;
}

.sudoku-setup h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: .92;
  letter-spacing: -.07em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fff 0%, #cdbcff 54%, #6bbcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sudoku-setup p {
  margin: 0;
  color: rgba(255,255,255,.66);
  line-height: 1.55;
}

.sudoku-setup-grid {
  display: grid;
  gap: 18px;
}

.sudoku-setup-block {
  display: grid;
  gap: 13px;
  animation: sudokuStepIn 230ms ease both;
}

@keyframes sudokuStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.sudoku-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sudoku-section-title span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  font-size: .72rem;
  font-weight: 1000;
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 12px 34px rgba(122,53,255,.26);
}

.sudoku-section-title h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -.02em;
}

.sudoku-choice-grid {
  display: grid;
  gap: 12px;
}

.sudoku-choice-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sudoku-choice-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 90px;
  padding: 14px;
  border: 1px solid rgba(127,76,255,.24);
  border-radius: 22px;
  color: #fff;
  text-align: left;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  cursor: pointer;
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  font: inherit;
}

.sudoku-choice-card:hover,
.sudoku-choice-card.is-active {
  transform: translateY(-2px);
  border-color: rgba(167,105,255,.75);
  background:
    radial-gradient(circle at 86% 12%, rgba(41,168,255,.15), transparent 42%),
    linear-gradient(145deg, rgba(122,53,255,.20), rgba(255,255,255,.035));
  box-shadow: 0 18px 42px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.035);
}

.sudoku-choice-card strong,
.sudoku-choice-card small {
  display: block;
}

.sudoku-choice-card strong {
  font-size: 1rem;
  letter-spacing: -.02em;
}

.sudoku-choice-card small {
  margin-top: 4px;
  color: rgba(255,255,255,.66);
  line-height: 1.35;
}

.sudoku-choice-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, rgba(122,53,255,.94), rgba(41,168,255,.78));
  box-shadow: 0 16px 34px rgba(122,53,255,.28), inset 0 1px 0 rgba(255,255,255,.22);
}

.sudoku-choice-icon svg {
  width: 35px;
  height: 35px;
  display: block;
  overflow: visible;
}

.sudoku-pill-group,
.sudoku-start-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sudoku-pill,
.sudoku-help-btn {
  border: 1px solid rgba(127,76,255,.28);
  color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  font-weight: 950;
  cursor: pointer;
  transition: 160ms ease;
  font: inherit;
}

.sudoku-pill {
  min-width: 110px;
  padding: 12px 16px;
  border-radius: 15px;
}

.sudoku-pill:hover,
.sudoku-pill.is-active {
  border-color: rgba(167,105,255,.82);
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 18px 46px rgba(122,53,255,.26);
}

.sudoku-btn-xl {
  min-width: 190px;
  min-height: 54px;
  border-radius: 18px !important;
  font-size: 1rem;
}

.sudoku-help-btn {
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 18px;
  font-size: 1.15rem;
}

.sudoku-help-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(167,105,255,.70);
  background: rgba(127,76,255,.14);
}

.sudoku-continue-btn {
  min-height: 54px;
  border-radius: 18px !important;
}

.sudoku-start-row {
  align-items: center;
  margin-top: 4px;
}

.sudoku-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sudoku-rule-grid article {
  border: 1px solid rgba(127,76,255,.22);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.04);
}

.sudoku-rule-grid strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
}

.sudoku-rule-grid p {
  color: rgba(255,255,255,.62);
  font-size: .94rem;
}

.sudoku-card-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sudoku-card-head p {
  margin: 0 0 5px;
  color: rgba(255,255,255,.46);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .70rem;
  font-weight: 1000;
}

.sudoku-card-head h2 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: -.03em;
}

.sudoku-gear-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 76, 255, .32);
  border-radius: 16px;
  color: rgba(255,255,255,.88);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 35%),
    linear-gradient(135deg, rgba(122,53,255,.20), rgba(41,168,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.20);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.sudoku-gear-btn:hover {
  transform: translateY(-1px) rotate(18deg);
  border-color: rgba(41,168,255,.58);
  color: #fff;
  box-shadow: 0 0 24px rgba(122,53,255,.28), inset 0 1px 0 rgba(255,255,255,.12);
}

.sudoku-gear-btn svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sudoku-match-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sudoku-tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid rgba(127,76,255,.24);
  border-radius: 999px;
  padding: 0 12px;
  color: rgba(255,255,255,.80);
  background: rgba(255,255,255,.045);
  font-weight: 900;
  font-size: .82rem;
}

.sudoku-rule-text {
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: .92rem;
  line-height: 1.45;
  font-weight: 800;
}

.sudoku-cage-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(41,168,255,.24);
  border-radius: 16px;
  background: rgba(41,168,255,.08);
}

.sudoku-cage-info span {
  color: rgba(255,255,255,.58);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: .70rem;
  font-weight: 1000;
}

.sudoku-cage-info strong {
  font-size: 1.15rem;
}

.sudoku-grid.killer-mode {
  overflow: visible;
  gap: 0;
  padding: 0;
  background: rgba(2,4,11,.92);
}

.sudoku-grid.killer-mode .cell {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
}

.sudoku-grid.killer-mode .killer-cell.cage-top { border-top: 2px dashed rgba(142, 190, 255, .72) !important; }
.sudoku-grid.killer-mode .killer-cell.cage-right { border-right: 2px dashed rgba(142, 190, 255, .72) !important; }
.sudoku-grid.killer-mode .killer-cell.cage-bottom { border-bottom: 2px dashed rgba(142, 190, 255, .72) !important; }
.sudoku-grid.killer-mode .killer-cell.cage-left { border-left: 2px dashed rgba(142, 190, 255, .72) !important; }

.sudoku-grid.killer-mode .thick-r {
  box-shadow: inset -2px 0 0 rgba(255,255,255,.22);
}
.sudoku-grid.killer-mode .thick-b {
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.22);
}
.sudoku-grid.killer-mode .cell.selected.thick-r,
.sudoku-grid.killer-mode .cell.selected.thick-b,
.sudoku-grid.killer-mode .cell.selected {
  box-shadow:
    inset 0 0 0 3px rgba(41,168,255,.78),
    0 0 0 2px rgba(41,168,255,.18),
    0 12px 32px rgba(41,168,255,.20);
}

.sudoku-grid.killer-mode .cell.cage-focus {
  background: rgba(41,168,255,.10);
}

.cage-sum {
  position: absolute;
  left: 5px;
  top: 3px;
  z-index: 3;
  padding: 0 3px;
  border-radius: 5px;
  color: rgba(255,255,255,.92);
  background: rgba(3, 6, 15, .70);
  font-size: clamp(.54rem, .82vw, .70rem);
  line-height: 1.25;
  font-weight: 1000;
  letter-spacing: -.03em;
  pointer-events: none;
}

.cell-value {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sudoku-grid.killer-mode .notes {
  inset: 16px 5px 5px;
}

.sudoku-grid.killer-mode .cell.given {
  background: linear-gradient(145deg, rgba(41,168,255,.18), rgba(122,53,255,.14));
}

.sudoku-grid.killer-mode .cell.cage-complete {
  animation: cageGlow .9s ease;
}

@keyframes cageGlow {
  0% { transform: scale(1); background: rgba(53,242,154,.08); }
  40% { transform: scale(1.05); background: rgba(53,242,154,.20); }
  100% { transform: scale(1); }
}

@media (max-width: 760px) {
  .sudoku-choice-grid-two,
  .sudoku-rule-grid {
    grid-template-columns: 1fr;
  }

  .sudoku-pill {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 520px) {
  .sudoku-setup {
    border-radius: 24px;
    padding: 18px 14px;
  }

  .sudoku-choice-card {
    grid-template-columns: 48px 1fr;
    border-radius: 18px;
  }

  .sudoku-choice-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .sudoku-pill,
  .sudoku-btn-xl,
  .sudoku-continue-btn {
    width: 100%;
  }
}

/* === Sudoku setup repair: actual Tic-Tac-Toe style setup + safe gameplay shell === */
html.sudoku-doc.sudoku-setup-open,
html.sudoku-doc.sudoku-setup-open body.sudoku-arena,
body.sudoku-arena.sudoku-setup-open{
  height: auto !important;
  max-height: none !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.sudoku-doc.sudoku-setup-open body.sudoku-arena .page.sudoku-page{
  width: min(1180px, calc(100% - 28px)) !important;
  height: auto !important;
  min-height: calc(100dvh - 86px) !important;
  margin: 22px auto 54px !important;
  padding: 0 !important;
  display: grid !important;
  align-items: start !important;
  overflow: visible !important;
}

html.sudoku-doc.sudoku-setup-open body.sudoku-arena .sudoku-setup{
  width: 100% !important;
  max-height: none !important;
}

body.sudoku-arena .sudoku-setup .sudoku-kicker{
  margin: 0 !important;
}

body.sudoku-arena .sudoku-setup .btn,
body.sudoku-arena .sudoku-setup .sudoku-help-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.sudoku-arena .sudoku-setup .sudoku-start-row{
  align-items: center !important;
}

body.sudoku-arena .sudoku-choice-card,
body.sudoku-arena .sudoku-pill,
body.sudoku-arena .sudoku-help-btn,
body.sudoku-arena .sudoku-gear-btn{
  font-family: inherit !important;
}

body.sudoku-arena .sudoku-choice-card:focus-visible,
body.sudoku-arena .sudoku-pill:focus-visible,
body.sudoku-arena .sudoku-help-btn:focus-visible,
body.sudoku-arena .sudoku-gear-btn:focus-visible,
body.sudoku-arena .pad:focus-visible,
body.sudoku-arena .cell:focus-visible{
  outline: 3px solid rgba(41,168,255,.45) !important;
  outline-offset: 3px !important;
}

body.sudoku-arena .sudoku-panel[hidden],
body.sudoku-arena .sudoku-setup[hidden]{
  display: none !important;
}

body.sudoku-arena .sudoku-match-tags{
  flex-wrap: nowrap !important;
}

body.sudoku-arena .sudoku-card-head{
  width: 100% !important;
}

body.sudoku-arena .sudoku-card-head h2{
  color: #fff !important;
}

body.sudoku-arena .sudoku-rule-text,
body.sudoku-arena .sudoku-cage-info{
  position: relative !important;
  z-index: 1 !important;
}

body.sudoku-arena .sudoku-grid.killer-mode .cell{
  position: relative !important;
}

body.sudoku-arena .sudoku-grid.killer-mode .cell-value{
  min-height: 1em !important;
}

@media (min-width: 861px){
  body.sudoku-arena.sudoku-game-open .sudoku-card-head h2{
    font-size: 1.12rem !important;
  }
  body.sudoku-arena.sudoku-game-open .sudoku-rule-text{
    font-size: .82rem !important;
  }
  body.sudoku-arena.sudoku-game-open .sudoku-cage-info{
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 760px){
  html.sudoku-doc.sudoku-setup-open body.sudoku-arena .page.sudoku-page{
    width: min(100% - 20px, 1180px) !important;
    margin-top: 14px !important;
  }
  body.sudoku-arena .sudoku-start-row .btn,
  body.sudoku-arena .sudoku-start-row .sudoku-help-btn{
    flex: 1 1 auto !important;
  }
}

/* === Sudoku progressive setup + quick guide modal polish === */
body.sudoku-arena .sudoku-progressive-step[hidden],
body.sudoku-arena .sudoku-start-row[hidden],
body.sudoku-arena .sudoku-help-modal[hidden] {
  display: none !important;
}

body.sudoku-arena.sudoku-modal-open {
  overflow: hidden !important;
}

body.sudoku-arena .sudoku-start-row {
  align-items: center !important;
  width: fit-content;
}

body.sudoku-arena .sudoku-start-row .sudoku-help-btn {
  flex: 0 0 54px !important;
}

.sudoku-help-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.sudoku-help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.sudoku-help-card {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid rgba(127, 76, 255, .30);
  border-radius: 28px;
  padding: clamp(22px, 4vw, 34px);
  color: #fff;
  background:
    radial-gradient(circle at 14% 0%, rgba(122, 53, 255, 0.20), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(41, 168, 255, 0.10), transparent 30%),
    linear-gradient(145deg, rgba(14, 12, 27, 0.98), rgba(5, 5, 12, 0.96));
  box-shadow: 0 34px 110px rgba(0,0,0,.62);
}

.sudoku-help-card h2 {
  margin: 12px 58px 20px 0;
  font-size: clamp(2rem, 4vw, 3.05rem);
  line-height: 1;
  letter-spacing: -.07em;
}

.sudoku-modal-kicker {
  margin: 0 !important;
}

.sudoku-help-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 76, 255, .34);
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  font: inherit;
  font-size: 1.5rem;
  font-weight: 1000;
  cursor: pointer;
  transition: 160ms ease;
}

.sudoku-help-close:hover {
  transform: translateY(-1px);
  border-color: rgba(167,105,255,.72);
  background: rgba(127,76,255,.16);
}

.sudoku-help-grid {
  display: grid;
  gap: 14px;
}

.sudoku-help-grid article {
  border: 1px solid rgba(127, 76, 255, .24);
  border-radius: 20px;
  padding: 16px 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}

.sudoku-help-grid strong {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}

.sudoku-help-grid p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.66);
  line-height: 1.55;
  font-weight: 800;
}

@media (max-width: 520px) {
  body.sudoku-arena .sudoku-start-row {
    width: 100%;
  }

  body.sudoku-arena .sudoku-start-row .sudoku-btn-xl {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  body.sudoku-arena .sudoku-start-row .sudoku-help-btn {
    width: 54px !important;
  }

  .sudoku-help-card {
    border-radius: 24px;
    padding: 22px 18px;
  }
}

/* === Sudoku final interaction fixes === */
@media (min-width: 861px) {
  body.sudoku-arena.sudoku-game-open .page.sudoku-page {
    width: min(1220px, calc(100vw - 28px)) !important;
  }

  body.sudoku-arena.sudoku-game-open .sudoku-layout {
    grid-template-columns: minmax(0, 1fr) minmax(292px, 340px) !important;
  }

  body.sudoku-arena.sudoku-game-open .sudoku-grid {
    --sdk-cell: clamp(44px, min(5vw, calc((100dvh - 185px) / 9), calc((100vw - 480px) / 9)), 60px) !important;
  }

  body.nav-hidden.sudoku-arena.sudoku-game-open .sudoku-grid {
    --sdk-cell: clamp(46px, min(5.2vw, calc((100dvh - 128px) / 9), calc((100vw - 480px) / 9)), 62px) !important;
  }
}

body.sudoku-arena .modal-overlay.open .modal {
  border-color: rgba(127, 76, 255, .34);
  background:
    radial-gradient(circle at 12% 0%, rgba(122, 53, 255, .22), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(41, 168, 255, .13), transparent 32%),
    linear-gradient(145deg, rgba(14, 12, 27, .96), rgba(5, 5, 12, .96));
  box-shadow: 0 34px 120px rgba(0, 0, 0, .64), 0 0 36px rgba(122, 53, 255, .18);
}

/* === Sudoku final interaction fixes: working guide + visible game-over bubble === */
body.sudoku-arena .modal-overlay.open,
body.sudoku-arena .modal-overlay[aria-hidden="false"]{
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99990 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: rgba(0,0,0,.66) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

body.sudoku-arena .sudoku-help-modal:not([hidden]){
  display: grid !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  place-items: center !important;
  padding: 18px !important;
}

body.sudoku-arena .sudoku-help-btn{
  pointer-events: auto !important;
  user-select: none !important;
}

/* === Sudoku polish v3: remove hidden toast collision, compact help, denser background rain === */
body.sudoku-arena .toast{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100010 !important;
  pointer-events: none !important;
  display: block !important;
}
body.sudoku-arena .toast:not(.show){
  visibility: hidden !important;
}
body.sudoku-arena .toast.show{
  visibility: visible !important;
}
body.sudoku-arena .toast-bubble{
  pointer-events: none !important;
}
body.sudoku-arena .toast.show .toast-bubble{
  pointer-events: auto !important;
}

body.sudoku-arena .sudoku-help-modal:not([hidden]){
  overflow: hidden !important;
}
body.sudoku-arena .sudoku-help-card{
  overflow: hidden !important;
  max-height: none !important;
  width: min(780px, calc(100vw - 54px)) !important;
  padding: clamp(20px, 3.2vw, 30px) !important;
}
body.sudoku-arena .sudoku-help-card h2{
  font-size: clamp(2rem, 3.6vw, 2.85rem) !important;
  margin: 10px 58px 18px 0 !important;
}
body.sudoku-arena .sudoku-help-grid{
  gap: 12px !important;
}
body.sudoku-arena .sudoku-help-grid article{
  padding: 14px 16px !important;
}
body.sudoku-arena .sudoku-help-grid p{
  margin-top: 7px !important;
  line-height: 1.48 !important;
}

body.sudoku-arena .sudoku-falling-layer span{
  opacity: calc(var(--opacity) * 1.18) !important;
  text-shadow: 0 0 24px var(--glow), 0 0 68px var(--glow) !important;
}
@media (max-height: 760px){
  body.sudoku-arena .sudoku-help-card{
    overflow: auto !important;
    max-height: calc(100dvh - 36px) !important;
  }
}


/* === Sudoku v4: match Tic-Tac-Toe falling symbol density, size and intensity === */
body.sudoku-arena .sudoku-falling-layer span{
  font-size: var(--size) !important;
  opacity: var(--opacity) !important;
  text-shadow: 0 0 20px var(--glow), 0 0 52px var(--glow) !important;
  filter: blur(.15px) !important;
}

/* === Dark Portal home menu + unified non-game falling elements === */
body.portal-home{
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  overflow-x: hidden;
  background: #070612 !important;
  background-image:
    radial-gradient(1100px 760px at 8% 4%, rgba(127,76,255,.26), transparent 68%),
    radial-gradient(1100px 760px at 92% 10%, rgba(41,168,255,.15), transparent 70%),
    radial-gradient(840px 680px at 50% 100%, rgba(240,171,252,.08), transparent 72%),
    linear-gradient(135deg, #0a0618 0%, #080714 48%, #06111f 100%) !important;
}

.portal-falling-layer{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
}
.portal-falling-layer::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(127,76,255,.15), transparent 35%, transparent 62%, rgba(41,168,255,.13)),
    radial-gradient(120vw 130vh at -20% 18%, rgba(167,105,255,.13), transparent 72%),
    radial-gradient(120vw 130vh at 120% 18%, rgba(41,168,255,.12), transparent 74%);
}
.portal-falling-symbol{
  position: absolute;
  left: var(--left);
  top: -120px;
  color: var(--color);
  font-size: var(--size);
  font-weight: 1000;
  line-height: 1;
  opacity: var(--opacity);
  text-shadow: 0 0 20px var(--glow), 0 0 52px var(--glow);
  filter: blur(.15px);
  transform: translate3d(0, -20vh, 0) rotate(var(--rotation));
  animation: portalFall var(--duration) linear var(--delay) infinite;
  user-select: none;
}
@keyframes portalFall{
  from { transform: translate3d(0, -16vh, 0) rotate(var(--rotation)); }
  to { transform: translate3d(var(--drift), 122vh, 0) rotate(calc(var(--rotation) + 180deg)); }
}
body.portal-home .unified-topbar,
body.portal-home .portal-home-page,
body.portal-home .toast,
body.portal-home .modal-overlay{
  position: relative;
  z-index: 2;
}

.portal-home-page{
  width: min(1220px, calc(100% - 32px));
  margin: 24px auto 38px;
}
.portal-home-shell{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: 28px;
  min-height: min(680px, calc(100dvh - 126px));
  border: 1px solid rgba(127,76,255,.28);
  border-radius: 34px;
  padding: clamp(24px, 4vw, 46px);
  background:
    radial-gradient(1050px 720px at 9% 0%, rgba(122,53,255,.22), transparent 68%),
    radial-gradient(950px 700px at 94% 12%, rgba(41,168,255,.12), transparent 72%),
    linear-gradient(145deg, rgba(14,12,27,.94), rgba(5,7,18,.90));
  box-shadow: 0 28px 100px rgba(0,0,0,.44);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.portal-home-shell::before,
.portal-home-shell::after{
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
}
.portal-home-shell::before{
  width: 430px;
  height: 430px;
  left: -160px;
  bottom: -210px;
  background: radial-gradient(circle, rgba(167,105,255,.18), transparent 68%);
}
.portal-home-shell::after{
  width: 360px;
  height: 360px;
  right: -130px;
  top: -130px;
  background: radial-gradient(circle, rgba(41,168,255,.13), transparent 70%);
}
.portal-hero-copy{
  max-width: 860px;
  display: grid;
  gap: 12px;
}
.portal-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: .76rem;
  font-weight: 1000;
}
.portal-kicker span{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a769ff;
  box-shadow: 0 0 18px rgba(167,105,255,.9);
}
.portal-hero-copy h1{
  margin: 0;
  max-width: 760px;
  font-size: clamp(3rem, 7vw, 6.8rem);
  line-height: .86;
  letter-spacing: -.075em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fff 0%, #d7c8ff 48%, #75c8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.portal-hero-copy p{
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.70);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  font-weight: 850;
}
.portal-welcome-panel{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid rgba(127,76,255,.28);
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgba(127,76,255,.12), rgba(41,168,255,.07)),
    rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}
.portal-mini-label{
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.76);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  font-weight: 1000;
}
.portal-welcome-panel h2{
  margin: 0;
  color: #fff;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  letter-spacing: -.04em;
}
.portal-welcome-panel p{
  margin: 6px 0 0;
  color: rgba(255,255,255,.64);
  font-weight: 800;
}
.portal-welcome-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.portal-btn{
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 16px;
  border: 1px solid rgba(127,76,255,.34);
  color: #fff;
  font-weight: 1000;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.portal-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(167,105,255,.62);
}
.portal-btn-primary{
  border-color: transparent;
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 18px 48px rgba(122,53,255,.30);
}
.portal-btn-primary:hover{
  box-shadow: 0 24px 60px rgba(41,168,255,.22), 0 18px 48px rgba(122,53,255,.34);
}
.portal-btn-ghost{
  background: rgba(255,255,255,.04);
}
.portal-destination-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 28px);
  align-items: stretch;
}
.portal-destination-card{
  position: relative;
  min-height: 286px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(127,76,255,.30);
  border-radius: 30px;
  background:
    radial-gradient(300px 260px at 20% 0%, rgba(127,76,255,.18), transparent 70%),
    linear-gradient(145deg, rgba(24,20,44,.70), rgba(8,9,20,.78));
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
  transition: transform .16s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.portal-destination-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7a35ff, #29a8ff);
  box-shadow: 0 0 24px rgba(41,168,255,.42);
}
.portal-destination-card:hover{
  transform: translateY(-5px);
  border-color: rgba(167,105,255,.70);
  box-shadow: 0 30px 90px rgba(0,0,0,.42), 0 0 42px rgba(127,76,255,.16);
}
.portal-card-glow{
  position: absolute;
  inset: auto -80px -100px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,168,255,.20), transparent 68%);
  pointer-events: none;
}
.portal-card-discord .portal-card-glow{ background: radial-gradient(circle, rgba(167,105,255,.22), transparent 68%); }
.portal-card-more .portal-card-glow{ background: radial-gradient(circle, rgba(240,171,252,.18), transparent 68%); }
.portal-card-icon{
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 18px 46px rgba(41,168,255,.18), 0 18px 46px rgba(122,53,255,.24);
}
.portal-card-icon svg{
  width: 42px;
  height: 42px;
}
.portal-card-label{
  display: inline-flex;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .66rem;
  font-weight: 1000;
}
.portal-destination-card strong{
  color: #fff;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.portal-destination-card small{
  color: rgba(255,255,255,.64);
  font-size: .95rem;
  line-height: 1.45;
  font-weight: 800;
}
.portal-card-action{
  margin-top: auto;
  color: rgba(255,255,255,.86);
  font-size: .9rem;
  font-weight: 1000;
}
.portal-card-action b{
  color: #7dd3fc;
}
.portal-footer{
  position: relative;
  z-index: 2;
  text-align: center;
}

@media (max-width: 900px){
  .portal-welcome-panel{
    align-items: flex-start;
    flex-direction: column;
  }
  .portal-welcome-actions{
    justify-content: flex-start;
  }
  .portal-destination-grid{
    grid-template-columns: 1fr;
  }
  .portal-destination-card{
    min-height: 220px;
  }
}
@media (max-width: 560px){
  .portal-home-page{
    width: min(100% - 20px, 1220px);
    margin-top: 14px;
  }
  .portal-home-shell{
    border-radius: 24px;
    padding: 20px;
  }
  .portal-hero-copy h1{
    font-size: clamp(2.55rem, 15vw, 4rem);
  }
  .portal-btn{
    width: 100%;
  }
  .portal-welcome-actions{
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce){
  .portal-falling-symbol{ animation: none !important; }
}

/* === Sudoku v6: same Tic-Tac-Toe falling density/size, but Portal color palette === */
body.sudoku-arena .sudoku-falling-layer span{
  font-size: var(--size) !important;
  opacity: var(--opacity) !important;
  text-shadow: 0 0 20px var(--glow), 0 0 52px var(--glow) !important;
  filter: blur(.15px) !important;
}

/* === Dark Portal v7: cleaner Home layout + About Dark card === */
.portal-home-shell-compact{
  min-height: auto;
  gap: clamp(22px, 3vw, 34px);
  padding: clamp(24px, 3.4vw, 42px);
}
.portal-home-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: end;
  gap: clamp(18px, 4vw, 44px);
}
.portal-hero-compact{
  max-width: 760px;
}
.portal-hero-compact h1{
  max-width: 720px;
  font-size: clamp(3.35rem, 6.1vw, 5.7rem);
  line-height: .9;
  letter-spacing: -.07em;
}
.portal-hero-compact p{
  max-width: 680px;
  font-size: clamp(.98rem, 1.25vw, 1.12rem);
}
.portal-hero-actions{
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(127,76,255,.28);
  border-radius: 24px;
  background:
    radial-gradient(320px 220px at 90% 0%, rgba(41,168,255,.13), transparent 68%),
    linear-gradient(145deg, rgba(31,24,55,.55), rgba(7,8,19,.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 60px rgba(0,0,0,.25);
}
.portal-hero-actions .portal-mini-label{
  margin-bottom: 0;
}
.portal-hero-actions .portal-btn{
  width: 100%;
  min-height: 48px;
}
.portal-destination-grid-polished{
  gap: clamp(14px, 2vw, 20px);
}
.portal-destination-grid-polished .portal-destination-card{
  min-height: 242px;
  padding: clamp(18px, 2.1vw, 24px);
  border-radius: 28px;
  justify-content: flex-start;
}
.portal-destination-grid-polished .portal-card-icon{
  width: 66px;
  height: 66px;
  border-radius: 20px;
}
.portal-destination-grid-polished .portal-card-icon svg{
  width: 38px;
  height: 38px;
}
.portal-destination-grid-polished .portal-destination-card strong{
  font-size: clamp(1.35rem, 1.7vw, 1.8rem);
}
.portal-destination-grid-polished .portal-destination-card small{
  font-size: .9rem;
}
.portal-card-about .portal-card-glow{
  background: radial-gradient(circle, rgba(255,209,102,.16), transparent 68%);
}
.portal-card-about .portal-card-icon{
  background: linear-gradient(135deg, #8b5cf6, #35f29a);
  box-shadow: 0 18px 46px rgba(53,242,154,.12), 0 18px 46px rgba(139,92,246,.24);
}
.portal-card-about::before{
  background: linear-gradient(180deg, #a769ff, #35f29a);
}
.portal-about-strip{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid rgba(127,76,255,.24);
  border-radius: 22px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.portal-about-strip .portal-mini-label{
  flex: 0 0 auto;
  margin-bottom: 0;
}
.portal-about-strip p{
  margin: 0;
  color: rgba(255,255,255,.68);
  font-weight: 850;
  line-height: 1.45;
}
body.portal-home .portal-falling-symbol{
  color: var(--color);
}
@media (max-width: 980px){
  .portal-home-head{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .portal-hero-actions{
    max-width: 520px;
  }
}
@media (max-width: 560px){
  .portal-hero-compact h1{
    font-size: clamp(2.7rem, 15vw, 4rem);
  }
  .portal-about-strip{
    align-items: flex-start;
    flex-direction: column;
  }
}

/* === Dark Portal v8: softer Home copy, integrated bot actions, About page === */
.portal-home-shell-v8{
  gap: clamp(24px, 3vw, 36px);
  padding: clamp(26px, 4vw, 48px);
}
.portal-home-head-v8{
  display: block;
}
.portal-hero-v8{
  max-width: 820px;
}
.portal-hero-v8 h1{
  max-width: 760px;
  font-size: clamp(3.8rem, 7.4vw, 7.2rem);
  line-height: .88;
  letter-spacing: -.078em;
}
.portal-hero-v8 p{
  max-width: 700px;
  color: rgba(255,255,255,.72);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
}
.portal-destination-grid-v8{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.portal-card-v8{
  min-height: 270px;
  padding: clamp(20px, 2.35vw, 28px);
  justify-content: flex-start;
}
.portal-card-v8 .portal-card-icon{
  width: 70px;
  height: 70px;
}
.portal-card-v8 strong{
  margin-top: 2px;
}
.portal-card-actions-v8{
  width: 100%;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 10px;
  margin-top: auto;
}
.portal-card-actions-v8 .portal-btn{
  min-height: 46px;
  padding: 0 14px;
  border-radius: 15px;
  font-size: .88rem;
}
.portal-card-about .portal-card-action b{
  color: #baffdf;
}

.portal-about-page-body .portal-home-page{
  width: min(1180px, calc(100% - 32px));
}
.portal-about-shell{
  gap: clamp(22px, 3vw, 34px);
}
.portal-about-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(18px, 4vw, 44px);
  align-items: end;
}
.portal-about-hero .portal-hero-copy h1{
  font-size: clamp(3.6rem, 7vw, 6.6rem);
}
.portal-about-status-card{
  padding: 22px;
  border: 1px solid rgba(127,76,255,.30);
  border-radius: 26px;
  background:
    radial-gradient(320px 220px at 100% 0%, rgba(53,242,154,.13), transparent 70%),
    linear-gradient(145deg, rgba(31,24,55,.58), rgba(7,8,19,.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 70px rgba(0,0,0,.26);
}
.portal-about-status-card strong{
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.portal-about-status-card p{
  margin: 10px 0 0;
  color: rgba(255,255,255,.66);
  font-weight: 800;
  line-height: 1.5;
}
.portal-about-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
}
.portal-info-card{
  position: relative;
  min-height: 220px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(127,76,255,.28);
  border-radius: 26px;
  background:
    radial-gradient(260px 220px at 15% 0%, rgba(127,76,255,.14), transparent 70%),
    linear-gradient(145deg, rgba(24,20,44,.62), rgba(8,9,20,.74));
  box-shadow: 0 20px 62px rgba(0,0,0,.28);
}
.portal-info-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #a769ff, #29a8ff);
  box-shadow: 0 0 24px rgba(167,105,255,.35);
}
.portal-info-number{
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 14px;
  color: #fff;
  font-size: .76rem;
  font-weight: 1000;
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 14px 34px rgba(122,53,255,.26);
}
.portal-info-card h2{
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(1.08rem, 1.45vw, 1.35rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.portal-info-card p{
  margin: 0;
  color: rgba(255,255,255,.65);
  font-size: .93rem;
  font-weight: 800;
  line-height: 1.5;
}
.portal-about-wide-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(20px, 2.8vw, 28px);
  border: 1px solid rgba(127,76,255,.30);
  border-radius: 28px;
  background:
    radial-gradient(500px 280px at 85% 0%, rgba(41,168,255,.14), transparent 72%),
    linear-gradient(90deg, rgba(127,76,255,.12), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 24px 70px rgba(0,0,0,.24);
}
.portal-about-wide-card h2{
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.055em;
}
.portal-about-wide-card p{
  max-width: 720px;
  margin: 0;
  color: rgba(255,255,255,.67);
  font-weight: 800;
  line-height: 1.55;
}
.portal-about-actions{
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

@media (max-width: 1080px){
  .portal-about-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px){
  .portal-destination-grid-v8,
  .portal-about-hero{
    grid-template-columns: 1fr;
  }
  .portal-about-status-card{
    max-width: 560px;
  }
  .portal-about-wide-card{
    align-items: flex-start;
    flex-direction: column;
  }
  .portal-about-actions{
    width: 100%;
    flex-wrap: wrap;
  }
}
@media (max-width: 640px){
  .portal-hero-v8 h1{
    font-size: clamp(3rem, 17vw, 4.7rem);
  }
  .portal-card-actions-v8,
  .portal-about-grid{
    grid-template-columns: 1fr;
  }
  .portal-about-actions{
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* === Dark Portal v9: cleaner Home hero + Discord Bot Control copy === */
.portal-hero-v9{
  max-width: 760px;
  gap: 14px;
}
.portal-hero-v9 h1{
  max-width: 720px;
  font-size: clamp(3.2rem, 6.1vw, 6rem);
  line-height: .9;
  letter-spacing: -.07em;
}
.portal-hero-v9 p{
  display: none;
}
.portal-card-discord.portal-card-v8 strong{
  font-size: clamp(1.55rem, 1.85vw, 2.05rem);
}
.portal-card-discord .portal-card-actions-v8{
  grid-template-columns: 1fr;
}
.portal-card-discord .portal-card-actions-v8 .portal-btn{
  min-height: 48px;
}
@media (max-width: 640px){
  .portal-hero-v9 h1{
    font-size: clamp(2.65rem, 14vw, 4.2rem);
  }
}

/* === Dark Portal v9.1: final Home hero text sizing === */
.portal-hero-v9 h1{
  text-transform: none;
  max-width: 760px;
  font-size: clamp(3rem, 5.4vw, 5.35rem);
  line-height: .95;
  letter-spacing: -.058em;
}

/* === Dark Portal v10: clickable portal cards, separate bot invite bubble, cleaner About page === */
.portal-home-shell-v10{
  gap: clamp(24px, 3vw, 34px);
  padding: clamp(28px, 4vw, 50px);
}
.portal-home-head-v10{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  align-items: center;
  gap: clamp(18px, 4vw, 48px);
}
.portal-hero-v10{
  max-width: 780px;
  gap: 12px;
}
.portal-hero-v10 h1{
  margin: 0;
  max-width: 780px;
  text-transform: none;
  font-size: clamp(3.15rem, 5.6vw, 5.9rem);
  line-height: .95;
  letter-spacing: -.06em;
}
.portal-invite-bubble{
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 132px;
  padding: 20px;
  border: 1px solid rgba(127,76,255,.38);
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  background:
    radial-gradient(260px 180px at 8% 10%, rgba(88,101,242,.40), transparent 70%),
    radial-gradient(240px 190px at 92% 20%, rgba(167,105,255,.25), transparent 72%),
    linear-gradient(145deg, rgba(31,23,57,.78), rgba(7,11,24,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 75px rgba(0,0,0,.30);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.portal-invite-bubble::before{
  content: "";
  position: absolute;
  inset: auto -18% -58% 28%;
  height: 150px;
  background: radial-gradient(circle, rgba(88,101,242,.42), transparent 68%);
  filter: blur(4px);
  z-index: -1;
}
.portal-invite-bubble:hover{
  transform: translateY(-4px);
  border-color: rgba(167,105,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 28px 90px rgba(88,101,242,.18), 0 28px 90px rgba(0,0,0,.34);
}
.portal-invite-icon{
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #5865f2, #29a8ff);
  box-shadow: 0 20px 48px rgba(88,101,242,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.portal-invite-icon svg{
  width: 46px;
  height: 46px;
}
.portal-invite-copy{
  display: grid;
  gap: 4px;
}
.portal-invite-copy .portal-mini-label{
  margin-bottom: 2px;
}
.portal-invite-copy strong{
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.portal-invite-copy small{
  color: rgba(255,255,255,.68);
  font-weight: 850;
}
.portal-invite-bubble > b{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #fff;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
}
.portal-destination-grid-v10{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.portal-card-v10{
  min-height: 255px;
  padding: clamp(20px, 2.4vw, 28px);
  justify-content: flex-start;
  text-decoration: none;
}
.portal-card-v10 .portal-card-icon{
  width: 70px;
  height: 70px;
}
.portal-card-v10 strong{
  font-size: clamp(1.38rem, 1.8vw, 1.9rem);
}
.portal-card-v10 small{
  min-height: 52px;
}
.portal-card-v10 .portal-card-action{
  margin-top: auto;
}
.portal-card-v10:hover{
  transform: translateY(-5px);
}
.portal-card-v10:focus-visible,
.portal-invite-bubble:focus-visible{
  outline: 3px solid rgba(41,168,255,.75);
  outline-offset: 4px;
}

.portal-about-shell-v10{
  gap: clamp(20px, 3vw, 30px);
  padding: clamp(28px, 4vw, 48px);
}
.portal-about-hero-v10{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: clamp(18px, 4vw, 42px);
  align-items: center;
}
.portal-about-title-v10 h1{
  margin: 0;
  max-width: 760px;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: .96;
  letter-spacing: -.058em;
}
.portal-about-title-v10 p{
  max-width: 680px;
  margin: 14px 0 0;
  color: rgba(255,255,255,.70);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  font-weight: 850;
  line-height: 1.55;
}
.portal-about-highlight-v10{
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(127,76,255,.30);
  border-radius: 26px;
  background:
    radial-gradient(260px 180px at 100% 0%, rgba(53,242,154,.14), transparent 70%),
    linear-gradient(145deg, rgba(31,24,55,.58), rgba(7,8,19,.70));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 22px 70px rgba(0,0,0,.24);
}
.portal-about-highlight-v10 strong{
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  letter-spacing: -.035em;
}
.portal-about-highlight-v10 small{
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.66);
  font-weight: 800;
  line-height: 1.5;
}
.portal-about-summary-v10{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(127,76,255,.30);
  border-radius: 30px;
  background:
    radial-gradient(470px 260px at 15% 0%, rgba(127,76,255,.16), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 24px 70px rgba(0,0,0,.23);
}
.portal-about-orb{
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 22px 56px rgba(122,53,255,.24);
}
.portal-about-orb::before{
  content: "D";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 2.1rem;
  font-weight: 1000;
}
.portal-about-summary-v10 h2,
.portal-about-roadmap-v10 h2{
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.55rem, 2.45vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.052em;
}
.portal-about-summary-v10 p,
.portal-about-roadmap-v10 p{
  margin: 0;
  color: rgba(255,255,255,.68);
  font-weight: 800;
  line-height: 1.55;
}
.portal-about-grid-v10{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.portal-info-card-v10{
  position: relative;
  min-height: 190px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(127,76,255,.26);
  border-radius: 26px;
  background:
    radial-gradient(260px 190px at 0% 0%, rgba(167,105,255,.13), transparent 70%),
    linear-gradient(145deg, rgba(20,17,38,.72), rgba(8,9,20,.72));
  box-shadow: 0 20px 62px rgba(0,0,0,.23);
}
.portal-info-card-v10::after{
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #a769ff, #29a8ff);
}
.portal-info-icon-v10{
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 15px;
  color: #fff;
  font-size: .78rem;
  font-weight: 1000;
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 14px 34px rgba(122,53,255,.23);
}
.portal-info-card-v10 h2{
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(1.12rem, 1.5vw, 1.35rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.portal-info-card-v10 p{
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.5;
}
.portal-about-roadmap-v10{
  display: grid;
  grid-template-columns: minmax(220px, .78fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 28px);
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(127,76,255,.30);
  border-radius: 28px;
  background:
    radial-gradient(520px 280px at 92% 0%, rgba(41,168,255,.14), transparent 72%),
    linear-gradient(90deg, rgba(127,76,255,.13), rgba(255,255,255,.032));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 24px 70px rgba(0,0,0,.22);
}

@media (max-width: 1080px){
  .portal-home-head-v10,
  .portal-about-hero-v10,
  .portal-about-roadmap-v10{
    grid-template-columns: 1fr;
  }
  .portal-invite-bubble{
    max-width: 520px;
  }
  .portal-about-roadmap-v10 .portal-about-actions{
    width: 100%;
    flex-wrap: wrap;
  }
}
@media (max-width: 960px){
  .portal-destination-grid-v10,
  .portal-about-grid-v10{
    grid-template-columns: 1fr;
  }
  .portal-card-v10{
    min-height: 220px;
  }
}
@media (max-width: 620px){
  .portal-hero-v10 h1,
  .portal-about-title-v10 h1{
    font-size: clamp(2.55rem, 13vw, 4rem);
  }
  .portal-invite-bubble,
  .portal-about-summary-v10{
    grid-template-columns: 1fr;
  }
  .portal-invite-bubble > b{
    display: none;
  }
}

/* === Dark Portal v11: refined home invite + redesigned About page === */
.portal-home-head-v10{
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: center;
}
.portal-hero-v10 h1{
  max-width: 870px;
  font-size: clamp(3.2rem, 5.1vw, 5.35rem);
  line-height: .94;
  letter-spacing: -.065em;
}
.portal-invite-bubble-v11{
  min-height: 112px;
  padding: 18px;
  border-radius: 28px;
  grid-template-columns: 70px minmax(0, 1fr) 36px;
  gap: 14px;
  background:
    radial-gradient(210px 150px at 12% 14%, rgba(88,101,242,.45), transparent 72%),
    radial-gradient(210px 170px at 100% 0%, rgba(167,105,255,.28), transparent 72%),
    linear-gradient(135deg, rgba(37,28,69,.86), rgba(12,18,36,.78));
  border-color: rgba(145,104,255,.46);
}
.portal-invite-bubble-v11::after{
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.055);
  pointer-events: none;
}
.portal-invite-bubble-v11 .portal-invite-icon{
  width: 70px;
  height: 70px;
  border-radius: 24px;
  background: linear-gradient(135deg, #5865f2, #8b5cf6 48%, #29a8ff);
}
.portal-discord-mark svg{
  width: 42px;
  height: 34px;
}
.portal-invite-bubble-v11 .portal-invite-copy strong{
  font-size: clamp(1.18rem, 1.7vw, 1.48rem);
  letter-spacing: -.045em;
}
.portal-invite-bubble-v11 .portal-invite-copy small{
  font-size: .9rem;
  color: rgba(255,255,255,.72);
}
.portal-invite-bubble-v11 > b{
  width: 36px;
  height: 36px;
  border-radius: 14px;
}
.portal-invite-bubble-v11:hover{
  transform: translateY(-4px) scale(1.01);
}

.portal-about-shell-v11{
  max-width: 1500px;
  gap: clamp(18px, 2.6vw, 30px);
  padding: clamp(28px, 4vw, 50px);
}
.portal-about-hero-v11{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: clamp(20px, 4vw, 46px);
  align-items: stretch;
}
.portal-about-title-v11{
  justify-content: center;
  min-height: 250px;
}
.portal-about-title-v11 h1{
  margin: 0;
  max-width: 860px;
  color: #fff;
  font-size: clamp(3rem, 5vw, 5.05rem);
  line-height: .96;
  letter-spacing: -.06em;
}
.portal-about-title-v11 p{
  max-width: 760px;
  margin: 14px 0 0;
  color: rgba(255,255,255,.68);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  font-weight: 850;
  line-height: 1.55;
}
.portal-about-status-v11{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  overflow: hidden;
  padding: 24px;
  border-radius: 30px;
  border: 1px solid rgba(127,76,255,.30);
  background:
    radial-gradient(220px 170px at 100% 0%, rgba(53,242,154,.16), transparent 72%),
    radial-gradient(260px 190px at 0% 100%, rgba(127,76,255,.18), transparent 70%),
    linear-gradient(145deg, rgba(18,21,42,.78), rgba(8,10,23,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 24px 70px rgba(0,0,0,.22);
}
.portal-status-dot-v11{
  position: absolute;
  top: 22px;
  right: 22px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #35f29a;
  box-shadow: 0 0 0 8px rgba(53,242,154,.08), 0 0 34px rgba(53,242,154,.36);
}
.portal-about-status-v11 strong{
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: clamp(1.6rem, 2.1vw, 2.1rem);
  line-height: 1;
  letter-spacing: -.05em;
}
.portal-about-status-v11 small{
  display: block;
  max-width: 270px;
  margin-top: 12px;
  color: rgba(255,255,255,.67);
  font-weight: 800;
  line-height: 1.5;
}
.portal-about-split-v11{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(16px, 2vw, 22px);
}
.portal-about-main-v11,
.portal-about-dev-v11,
.portal-flow-card-v11,
.portal-community-panel-v11{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(127,76,255,.28);
  background:
    radial-gradient(360px 220px at 0% 0%, rgba(127,76,255,.14), transparent 72%),
    linear-gradient(145deg, rgba(20,17,38,.72), rgba(8,10,24,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 22px 68px rgba(0,0,0,.22);
}
.portal-about-main-v11{
  padding: clamp(22px, 3vw, 34px);
  border-radius: 30px;
}
.portal-about-main-v11 h2,
.portal-about-dev-v11 h2,
.portal-flow-card-v11 h2,
.portal-community-panel-v11 h2{
  margin: 8px 0 10px;
  color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.052em;
}
.portal-about-main-v11 p,
.portal-about-dev-v11 p,
.portal-flow-card-v11 p,
.portal-community-panel-v11 p{
  margin: 0;
  color: rgba(255,255,255,.67);
  font-weight: 800;
  line-height: 1.55;
}
.portal-about-pill-row-v11{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.portal-about-pill-row-v11 span{
  padding: 10px 14px;
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  font-size: .82rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.08);
}
.portal-about-dev-v11{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: clamp(22px, 3vw, 30px);
  border-radius: 30px;
  background:
    radial-gradient(280px 220px at 100% 0%, rgba(41,168,255,.15), transparent 72%),
    linear-gradient(145deg, rgba(31,24,55,.70), rgba(8,10,24,.72));
}
.portal-dev-avatar-v11{
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 24px;
  color: #fff;
  font-size: 2rem;
  font-weight: 1000;
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 18px 46px rgba(122,53,255,.25);
}
.portal-about-dev-v11 h2{
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}
.portal-about-flow-v11{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.portal-flow-card-v11{
  min-height: 210px;
  padding: 24px;
  border-radius: 28px;
}
.portal-flow-card-v11::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #a769ff, #29a8ff);
  opacity: .9;
}
.portal-flow-number-v11{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 34px;
  margin-bottom: 28px;
  border-radius: 999px;
  color: #fff;
  font-size: .78rem;
  font-weight: 1000;
  letter-spacing: .08em;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.10);
}
.portal-community-panel-v11{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 32px;
  background:
    radial-gradient(480px 250px at 100% 0%, rgba(88,101,242,.22), transparent 72%),
    radial-gradient(420px 260px at 0% 100%, rgba(53,242,154,.10), transparent 74%),
    linear-gradient(135deg, rgba(127,76,255,.13), rgba(7,10,23,.72));
}
.portal-community-panel-v11 h2{
  max-width: 760px;
}
.portal-community-panel-v11 p{
  max-width: 820px;
}
.portal-community-actions-v11{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}
@media (max-width: 1080px){
  .portal-home-head-v10,
  .portal-about-hero-v11,
  .portal-about-split-v11,
  .portal-community-panel-v11{
    grid-template-columns: 1fr;
  }
  .portal-invite-bubble-v11{
    max-width: 460px;
  }
  .portal-community-actions-v11{
    justify-content: flex-start;
  }
}
@media (max-width: 960px){
  .portal-about-flow-v11{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px){
  .portal-about-title-v11 h1,
  .portal-hero-v10 h1{
    font-size: clamp(2.5rem, 12vw, 4rem);
  }
  .portal-invite-bubble-v11,
  .portal-about-dev-v11{
    grid-template-columns: 1fr;
  }
}

/* About page v12: lighter bubble layout */
.portal-about-shell-v12{
  width: min(1500px, calc(100% - 48px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
  padding: clamp(28px, 4vw, 52px);
  border-radius: 34px;
  border: 1px solid rgba(127,76,255,.32);
  background:
    radial-gradient(820px 420px at 0% 0%, rgba(127,76,255,.22), transparent 72%),
    radial-gradient(720px 420px at 100% 20%, rgba(41,168,255,.15), transparent 74%),
    linear-gradient(135deg, rgba(14,9,34,.92), rgba(6,13,30,.91));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 28px 90px rgba(0,0,0,.27);
}
.portal-about-hero-v12{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
  align-items: end;
  gap: clamp(20px, 4vw, 56px);
  padding-bottom: clamp(8px, 1vw, 16px);
}
.portal-about-hero-v12 h1{
  margin: 0;
  max-width: 850px;
  color: #fff;
  font-size: clamp(3.4rem, 6vw, 6rem);
  line-height: .94;
  letter-spacing: -.068em;
}
.portal-about-hero-v12 p{
  max-width: 760px;
  margin: 16px 0 0;
  color: rgba(255,255,255,.68);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  font-weight: 850;
  line-height: 1.55;
}
.portal-about-status-pill-v12{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(53,242,154,.18);
  background: linear-gradient(135deg, rgba(53,242,154,.10), rgba(127,76,255,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.portal-about-status-pill-v12 span{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #35f29a;
  box-shadow: 0 0 0 6px rgba(53,242,154,.08), 0 0 26px rgba(53,242,154,.32);
}
.portal-about-status-pill-v12 strong{
  color: #fff;
  font-size: .95rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.portal-about-status-pill-v12 small{
  grid-column: 2;
  color: rgba(255,255,255,.62);
  font-weight: 800;
  line-height: 1.45;
}
.portal-about-card-grid-v12{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
.portal-about-card-v12{
  position: relative;
  min-height: 245px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  overflow: hidden;
  padding: clamp(20px, 2.3vw, 28px);
  border-radius: 30px;
  border: 1px solid rgba(127,76,255,.28);
  background:
    radial-gradient(290px 190px at 0% 0%, rgba(127,76,255,.18), transparent 72%),
    radial-gradient(260px 180px at 100% 100%, rgba(41,168,255,.10), transparent 74%),
    linear-gradient(145deg, rgba(20,17,38,.72), rgba(8,10,24,.70));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 22px 68px rgba(0,0,0,.20);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
a.portal-about-card-v12:hover{
  transform: translateY(-5px);
  border-color: rgba(167,105,255,.58);
  background:
    radial-gradient(320px 210px at 0% 0%, rgba(127,76,255,.26), transparent 72%),
    radial-gradient(280px 190px at 100% 100%, rgba(41,168,255,.16), transparent 74%),
    linear-gradient(145deg, rgba(29,22,55,.78), rgba(8,10,24,.72));
}
.portal-about-card-v12::after{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #a769ff, #29a8ff);
  opacity: .85;
}
.portal-about-icon-v12{
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 6px;
  border-radius: 18px;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 1000;
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 18px 42px rgba(41,168,255,.18);
}
.portal-about-card-v12 h2{
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 1.7vw, 1.85rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.portal-about-card-v12 p{
  margin: 0;
  color: rgba(255,255,255,.66);
  font-weight: 800;
  line-height: 1.52;
}
.portal-feedback-strip-v12{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: 30px;
  border: 1px solid rgba(127,76,255,.26);
  background:
    radial-gradient(440px 220px at 100% 0%, rgba(88,101,242,.16), transparent 70%),
    linear-gradient(135deg, rgba(127,76,255,.10), rgba(7,10,23,.68));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 22px 60px rgba(0,0,0,.18);
}
.portal-feedback-strip-v12 h2{
  margin: 8px 0 8px;
  color: #fff;
  font-size: clamp(1.45rem, 2.2vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.05em;
}
.portal-feedback-strip-v12 p{
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.66);
  font-weight: 800;
  line-height: 1.55;
}
.portal-feedback-actions-v12{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}
@media (max-width: 1180px){
  .portal-about-card-grid-v12{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px){
  .portal-about-hero-v12,
  .portal-feedback-strip-v12{
    grid-template-columns: 1fr;
  }
  .portal-feedback-actions-v12{
    justify-content: flex-start;
  }
}
@media (max-width: 640px){
  .portal-about-shell-v12{
    width: min(100% - 24px, 1500px);
    padding: 22px;
  }
  .portal-about-card-grid-v12{
    grid-template-columns: 1fr;
  }
  .portal-about-hero-v12 h1{
    font-size: clamp(2.55rem, 13vw, 4rem);
  }
}

/* Portal v13 refinements */
.portal-hero-v10 h1{
  max-width: 850px;
}
.portal-invite-bubble-v13{
  width: min(100%, 420px);
  min-height: 112px;
  padding: 18px 20px;
  gap: 14px;
  border-radius: 28px;
  background:
    radial-gradient(260px 160px at 10% 10%, rgba(88,101,242,.48), transparent 68%),
    radial-gradient(260px 170px at 100% 100%, rgba(167,105,255,.26), transparent 72%),
    linear-gradient(145deg, rgba(27,24,62,.82), rgba(8,13,30,.78));
  border-color: rgba(127,76,255,.46);
}
.portal-invite-bubble-v13 .portal-invite-icon{
  width: 72px;
  height: 72px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, #5865f2 0%, #29a8ff 100%);
}
.portal-invite-bubble-v13 .portal-invite-icon svg{
  width: 42px;
  height: 42px;
}
.portal-invite-bubble-v13 .portal-invite-copy strong{
  font-size: clamp(1.18rem, 1.7vw, 1.55rem);
}
.portal-invite-bubble-v13 .portal-invite-copy small{
  color: rgba(255,255,255,.72);
}
.portal-invite-bubble-v13 > b{
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: rgba(255,255,255,.10);
}
.portal-invite-bubble-v13:hover{
  transform: translateY(-4px) scale(1.01);
}

/* About page v13: divided information bubbles */
.portal-about-shell-v13{
  width: min(1500px, calc(100% - 48px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
  padding: clamp(28px, 4vw, 52px);
  border-radius: 34px;
  border: 1px solid rgba(127,76,255,.32);
  background:
    radial-gradient(760px 420px at 0% 0%, rgba(127,76,255,.21), transparent 72%),
    radial-gradient(720px 420px at 100% 18%, rgba(41,168,255,.15), transparent 74%),
    linear-gradient(135deg, rgba(14,9,34,.92), rgba(6,13,30,.91));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 28px 90px rgba(0,0,0,.27);
}
.portal-about-hero-v13{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 430px);
  align-items: end;
  gap: clamp(22px, 4vw, 58px);
}
.portal-about-title-v13 h1{
  margin: 0;
  max-width: 850px;
  color: #fff;
  font-size: clamp(3.15rem, 5.4vw, 5.4rem);
  line-height: .94;
  letter-spacing: -.065em;
}
.portal-about-title-v13 p{
  max-width: 700px;
  margin: 16px 0 0;
  color: rgba(255,255,255,.68);
  font-size: clamp(1rem, 1.16vw, 1.12rem);
  font-weight: 850;
  line-height: 1.5;
}
.portal-about-side-v13{
  display: grid;
  gap: 14px;
}
.portal-status-panel-v13,
.portal-dev-note-v13,
.portal-feedback-card-v13,
.portal-policy-card-v13{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(127,76,255,.29);
  background:
    radial-gradient(340px 210px at 0% 0%, rgba(127,76,255,.16), transparent 72%),
    radial-gradient(280px 200px at 100% 100%, rgba(41,168,255,.11), transparent 72%),
    linear-gradient(145deg, rgba(20,17,38,.75), rgba(8,11,25,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 22px 68px rgba(0,0,0,.20);
}
.portal-status-panel-v13{
  padding: 20px;
  border-radius: 26px;
}
.portal-status-panel-v13 h2{
  margin: 8px 0 16px;
  color: #fff;
  font-size: clamp(1.35rem, 1.8vw, 1.8rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.portal-status-list-v13{
  display: grid;
  gap: 10px;
}
.portal-status-row-v13{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.70);
  font-weight: 900;
}
.portal-status-row-v13 span{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.portal-status-row-v13 i,
.portal-dev-note-v13 > span{
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #35f29a;
  box-shadow: 0 0 0 6px rgba(53,242,154,.09), 0 0 24px rgba(53,242,154,.35);
  flex: 0 0 auto;
}
.portal-status-row-v13 strong{
  color: #35f29a;
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.portal-dev-note-v13{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 15px 17px;
  border-radius: 22px;
  border-color: rgba(53,242,154,.18);
  background:
    radial-gradient(280px 150px at 0% 0%, rgba(53,242,154,.10), transparent 70%),
    linear-gradient(135deg, rgba(24,44,56,.58), rgba(20,21,46,.70));
}
.portal-dev-note-v13 strong{
  display: block;
  color: #fff;
  font-size: .92rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.portal-dev-note-v13 small{
  display: block;
  color: rgba(255,255,255,.62);
  font-weight: 800;
  line-height: 1.42;
}
.portal-about-card-grid-v13{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
.portal-about-card-v13{
  position: relative;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  overflow: hidden;
  padding: clamp(20px, 2.2vw, 27px);
  border-radius: 28px;
  border: 1px solid rgba(127,76,255,.28);
  background:
    radial-gradient(280px 190px at 0% 0%, rgba(127,76,255,.18), transparent 72%),
    radial-gradient(260px 180px at 100% 100%, rgba(41,168,255,.10), transparent 74%),
    linear-gradient(145deg, rgba(20,17,38,.72), rgba(8,10,24,.70));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 22px 68px rgba(0,0,0,.20);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.portal-about-card-v13::after{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #a769ff, #29a8ff);
  opacity: .85;
}
.portal-about-card-v13:hover{
  transform: translateY(-5px);
  border-color: rgba(167,105,255,.58);
  background:
    radial-gradient(310px 210px at 0% 0%, rgba(127,76,255,.25), transparent 72%),
    radial-gradient(280px 190px at 100% 100%, rgba(41,168,255,.15), transparent 74%),
    linear-gradient(145deg, rgba(29,22,55,.78), rgba(8,10,24,.72));
}
.portal-about-card-v13:focus-visible{
  outline: 3px solid rgba(41,168,255,.75);
  outline-offset: 4px;
}
.portal-about-icon-v13{
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 18px;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 1000;
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 18px 42px rgba(41,168,255,.18);
}
.portal-about-card-v13 h2{
  margin: 0;
  color: #fff;
  font-size: clamp(1.28rem, 1.62vw, 1.75rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.portal-about-card-v13 p{
  margin: 0;
  color: rgba(255,255,255,.66);
  font-weight: 800;
  line-height: 1.48;
}
.portal-about-bottom-grid-v13{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(14px, 1.8vw, 20px);
}
.portal-feedback-card-v13,
.portal-policy-card-v13{
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: 28px;
}
.portal-feedback-card-v13 h2,
.portal-policy-card-v13 h2{
  margin: 8px 0 8px;
  color: #fff;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1;
  letter-spacing: -.05em;
}
.portal-feedback-card-v13 p,
.portal-policy-card-v13 p{
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.66);
  font-weight: 800;
  line-height: 1.52;
}
@media (max-width: 1180px){
  .portal-about-card-grid-v13{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px){
  .portal-home-head-v10,
  .portal-about-hero-v13,
  .portal-about-bottom-grid-v13{
    grid-template-columns: 1fr;
  }
  .portal-invite-bubble-v13{
    width: 100%;
  }
}
@media (max-width: 640px){
  .portal-about-shell-v13{
    width: min(100% - 24px, 1500px);
    padding: 22px;
  }
  .portal-about-card-grid-v13{
    grid-template-columns: 1fr;
  }
  .portal-about-title-v13 h1,
  .portal-hero-v10 h1{
    font-size: clamp(2.55rem, 13vw, 4rem);
  }
}

/* Portal v14 — cleaner About, status, policy and feedback pages */
.portal-about-shell-v14,
.portal-info-shell-v14{
  width: min(1500px, calc(100% - 48px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
  padding: clamp(26px, 4vw, 50px);
  border-radius: 34px;
  border: 1px solid rgba(127,76,255,.32);
  background:
    radial-gradient(760px 420px at 0% 0%, rgba(127,76,255,.20), transparent 72%),
    radial-gradient(720px 420px at 100% 18%, rgba(41,168,255,.14), transparent 74%),
    linear-gradient(135deg, rgba(14,9,34,.92), rgba(6,13,30,.91));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 28px 90px rgba(0,0,0,.27);
}
.portal-about-hero-v14{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
  align-items: center;
  gap: clamp(22px, 4vw, 58px);
}
.portal-about-title-v14 h1,
.portal-info-hero-v14 h1{
  margin: 0;
  color: #fff;
  font-size: clamp(2.65rem, 5vw, 5rem);
  line-height: .95;
  letter-spacing: -.065em;
  max-width: 760px;
}
.portal-status-panel-v14,
.portal-info-card-v14,
.portal-feedback-card-v14,
.portal-policy-card-v14{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(127,76,255,.29);
  background:
    radial-gradient(340px 210px at 0% 0%, rgba(127,76,255,.16), transparent 72%),
    radial-gradient(280px 200px at 100% 100%, rgba(41,168,255,.11), transparent 72%),
    linear-gradient(145deg, rgba(20,17,38,.75), rgba(8,11,25,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 22px 68px rgba(0,0,0,.20);
}
.portal-status-panel-v14{
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: 27px;
}
.portal-status-list-v14{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.portal-status-row-v14{
  --status-color: #8d93a7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.72);
  font-weight: 950;
}
.portal-status-row-v14 span{
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.portal-status-row-v14 i{
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--status-color);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--status-color) 15%, transparent), 0 0 25px color-mix(in srgb, var(--status-color) 42%, transparent);
}
.portal-status-row-v14 strong{
  color: var(--status-color);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .86rem;
}
.portal-status-row-v14[data-status="online"]{ --status-color: #35f29a; }
.portal-status-row-v14[data-status="partial"]{ --status-color: #ffd166; }
.portal-status-row-v14[data-status="critical"]{ --status-color: #ff4d6d; }
.portal-status-row-v14[data-status="offline"]{ --status-color: #8d93a7; }
.portal-status-row-v14[data-status="checking"]{ --status-color: #29a8ff; }
.portal-about-card-grid-v14{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
.portal-about-card-v14{
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  overflow: hidden;
  padding: clamp(20px, 2.2vw, 27px);
  border-radius: 28px;
  border: 1px solid rgba(127,76,255,.28);
  background:
    radial-gradient(280px 190px at 0% 0%, rgba(127,76,255,.18), transparent 72%),
    radial-gradient(260px 180px at 100% 100%, rgba(41,168,255,.10), transparent 74%),
    linear-gradient(145deg, rgba(20,17,38,.72), rgba(8,10,24,.70));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 22px 68px rgba(0,0,0,.20);
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.portal-about-card-v14::after,
.portal-feedback-card-v14::after,
.portal-policy-card-v14::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background: linear-gradient(180deg, #a769ff, #29a8ff);
  opacity:.85;
}
.portal-about-card-v14:hover,
.portal-feedback-card-v14:hover{
  transform: translateY(-5px);
  border-color: rgba(167,105,255,.58);
}
.portal-about-card-v14:focus-visible,
.portal-feedback-card-v14:focus-visible,
.portal-policy-actions-v14 a:focus-visible{
  outline: 3px solid rgba(41,168,255,.75);
  outline-offset: 4px;
}
.portal-about-icon-v14{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:18px;
  color:#fff;
  font-size:1.35rem;
  font-weight:1000;
  background:linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow:0 18px 42px rgba(41,168,255,.18);
}
.portal-about-card-v14 h2,
.portal-info-card-v14 h2,
.portal-feedback-card-v14 h2,
.portal-policy-card-v14 h2{
  margin: 0;
  color:#fff;
  font-size: clamp(1.28rem, 1.62vw, 1.75rem);
  line-height:1.03;
  letter-spacing:-.045em;
}
.portal-about-card-v14 p,
.portal-info-card-v14 p,
.portal-feedback-card-v14 p,
.portal-policy-card-v14 p{
  margin:0;
  color:rgba(255,255,255,.66);
  font-weight:800;
  line-height:1.5;
}
.portal-about-bottom-grid-v14{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(300px, .85fr);
  gap:clamp(14px, 1.8vw, 20px);
}
.portal-feedback-card-v14,
.portal-policy-card-v14{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:clamp(22px, 2.6vw, 32px);
  border-radius:30px;
  color:inherit;
  text-decoration:none;
  transition: transform .18s ease, border-color .18s ease;
}
.portal-feedback-card-v14 .portal-card-action{
  margin-top:auto;
}
.portal-policy-actions-v14,
.portal-info-actions-v14{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
.portal-policy-actions-v14 a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border-radius:16px;
  border:1px solid rgba(127,76,255,.42);
  color:#fff;
  text-decoration:none;
  font-weight:950;
  background:rgba(255,255,255,.055);
}
.portal-policy-actions-v14 a:first-child{
  background:linear-gradient(135deg, #723fff, #29a8ff);
  border-color:transparent;
}
.portal-info-page-body .portal-home-page{
  padding-top: clamp(26px, 3vw, 38px);
}
.portal-info-shell-v14{
  width:min(1120px, calc(100% - 48px));
}
.portal-info-hero-v14{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.65fr);
  gap:clamp(18px, 3vw, 34px);
  align-items:end;
}
.portal-info-hero-v14 p{
  margin:0;
  color:rgba(255,255,255,.66);
  font-weight:850;
  line-height:1.55;
}
.portal-info-card-v14{
  padding:clamp(22px, 3vw, 34px);
  border-radius:30px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.portal-policy-text-v14 h2{
  margin-top:12px;
}
.portal-policy-text-v14 h2:first-child{
  margin-top:0;
}
.portal-profile-preview-v14{
  display:flex;
  align-items:center;
  gap:18px;
}
.portal-profile-avatar-v14{
  display:grid;
  place-items:center;
  width:82px;
  height:82px;
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(135deg, #7a35ff, #29a8ff);
  color:#fff;
  font-size:2rem;
  font-weight:1000;
  box-shadow:0 18px 42px rgba(41,168,255,.20);
}
.portal-profile-avatar-v14 img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.portal-feedback-form-v14{
  display:grid;
  gap:16px;
}
.portal-feedback-form-v14 label{
  display:grid;
  gap:8px;
  color:rgba(255,255,255,.76);
  font-weight:950;
}
.portal-feedback-form-v14 select,
.portal-feedback-form-v14 textarea{
  width:100%;
  border:1px solid rgba(127,76,255,.34);
  border-radius:18px;
  padding:14px 16px;
  color:#fff;
  background:rgba(5,8,20,.72);
  font:inherit;
  font-weight:800;
  outline:none;
}
.portal-feedback-form-v14 textarea{
  resize:vertical;
  min-height:160px;
}
.portal-feedback-form-v14 select:focus,
.portal-feedback-form-v14 textarea:focus{
  border-color:rgba(41,168,255,.72);
  box-shadow:0 0 0 4px rgba(41,168,255,.10);
}
.portal-form-note-v14{
  min-height:1.4em;
}
@media (max-width: 1180px){
  .portal-about-card-grid-v14{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .portal-about-hero-v14,
  .portal-about-bottom-grid-v14,
  .portal-info-hero-v14{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .portal-about-shell-v14,
  .portal-info-shell-v14{ width:min(100% - 24px, 1500px); padding:22px; }
  .portal-about-card-grid-v14{ grid-template-columns:1fr; }
  .portal-about-title-v14 h1,
  .portal-info-hero-v14 h1{ font-size:clamp(2.35rem, 12vw, 3.7rem); }
}

/* Portal v15 — policy modal, live status polish, dynamic nav and about cleanup */
.unified-topbar{
  z-index: 5000 !important;
  will-change: transform, opacity;
}
.nav-reveal-toggle{
  position: fixed !important;
  top: 8px !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 5001 !important;
}
body.nav-hidden .unified-topbar{
  transform: translateY(-115%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin-bottom: calc(-1 * var(--unified-topbar-height, 72px)) !important;
}
body.nav-hidden .nav-reveal-toggle{
  display: grid !important;
}
.portal-about-title-v15 h1{
  max-width: 820px;
}
.portal-about-title-v15 h1 span{
  color: transparent;
  background: linear-gradient(90deg, #d8ccff 0%, #78bdff 95%);
  -webkit-background-clip: text;
  background-clip: text;
}
.portal-feedback-button-row-v15{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}
.portal-feedback-button-row-v15 .portal-btn{
  min-height: 48px;
  padding-inline: 18px;
}
.portal-policy-actions-v14 button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border-radius:16px;
  border:1px solid rgba(127,76,255,.42);
  color:#fff;
  text-decoration:none;
  font:inherit;
  font-weight:950;
  background:rgba(255,255,255,.055);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.portal-policy-actions-v14 button:first-child{
  background:linear-gradient(135deg, #723fff, #29a8ff);
  border-color:transparent;
}
.portal-policy-actions-v14 button:hover{
  transform: translateY(-2px);
  border-color: rgba(167,105,255,.66);
  background: rgba(127,76,255,.16);
}
.portal-policy-modal-v15[hidden]{
  display:none !important;
}
.portal-policy-modal-v15{
  position:fixed;
  inset:0;
  z-index:8000;
  display:grid;
  place-items:center;
  padding:24px;
}
.portal-policy-backdrop-v15{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor:pointer;
}
.portal-policy-dialog-v15{
  position:relative;
  width:min(920px, 100%);
  max-height:min(82dvh, 780px);
  overflow:auto;
  padding:clamp(24px, 4vw, 42px);
  border-radius:32px;
  border:1px solid rgba(127,76,255,.36);
  background:
    radial-gradient(650px 360px at 0% 0%, rgba(127,76,255,.24), transparent 72%),
    radial-gradient(520px 310px at 100% 0%, rgba(41,168,255,.15), transparent 76%),
    linear-gradient(145deg, rgba(16,12,34,.97), rgba(5,9,22,.96));
  box-shadow:0 34px 110px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
  color:#fff;
}
.portal-policy-close-v15{
  position:absolute;
  top:18px;
  right:18px;
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(127,76,255,.42);
  background:rgba(255,255,255,.065);
  color:#fff;
  font-size:1.8rem;
  font-weight:1000;
  line-height:1;
  cursor:pointer;
}
.portal-policy-dialog-v15 h2{
  margin:12px 56px 22px 0;
  font-size:clamp(2rem, 4vw, 3.6rem);
  line-height:.95;
  letter-spacing:-.06em;
}
.portal-policy-dialog-body-v15{
  display:grid;
  gap:14px;
}
.portal-policy-dialog-body-v15 h3{
  margin:14px 0 0;
  color:#fff;
  font-size:1.12rem;
  letter-spacing:-.025em;
}
.portal-policy-dialog-body-v15 p{
  margin:0;
  color:rgba(255,255,255,.70);
  font-weight:780;
  line-height:1.58;
}
body.portal-modal-open{
  overflow:hidden;
}
.portal-status-panel-v14 .portal-mini-label{
  margin-bottom: 12px;
}
.portal-status-row-v14 strong{
  min-width: 82px;
  text-align: right;
}
.games-panel h1{
  line-height: 1.1 !important;
  padding-bottom: .10em !important;
  overflow: visible !important;
  display: inline-block !important;
}
.games-panel-head{
  overflow: visible !important;
}
@media (max-width: 640px){
  .portal-policy-modal-v15{
    padding:12px;
  }
  .portal-policy-dialog-v15{
    max-height:88dvh;
    border-radius:24px;
  }
  .portal-feedback-button-row-v15 .portal-btn,
  .portal-policy-actions-v14 button{
    width:100%;
  }
}


/* === Portal v16: implemented requested policy modals, status, topbar, feedback and title polish === */
.unified-topbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 4500 !important;
  transition: transform .20s ease, opacity .20s ease, margin-bottom .20s ease !important;
}
body.nav-hidden .unified-topbar{
  transform: translateY(-118%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin-bottom: calc(-1 * var(--unified-topbar-height, 72px)) !important;
}
.nav-reveal-toggle{
  z-index: 4501 !important;
}
.portal-about-shell-v16{
  gap: clamp(18px, 1.9vw, 24px) !important;
}
.portal-about-hero-v16{
  align-items: center !important;
}
.portal-about-title-v16 h1{
  max-width: 850px !important;
  padding-bottom: .08em;
}
.portal-about-title-v16 h1 span{
  color: transparent !important;
  background: linear-gradient(90deg, #d8ccff 0%, #78bdff 95%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.portal-status-panel-v16{
  align-self: center;
}
.portal-status-panel-v16 .portal-mini-label{
  margin-bottom: 14px;
}
.portal-feedback-card-v16,
.portal-policy-card-v16{
  min-height: 245px;
}
.portal-feedback-card-v16 p{
  max-width: 760px;
}
.portal-feedback-button-row-v15{
  align-items: center;
}
.portal-feedback-button-row-v15 .portal-btn,
.portal-policy-actions-v14 button{
  white-space: nowrap;
}
.portal-btn.portal-btn-primary{
  color:#fff;
  background: linear-gradient(135deg, #723fff, #29a8ff);
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(41,168,255,.18);
}
.portal-btn.portal-btn-ghost{
  color:#fff;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(127,76,255,.42);
}
.portal-policy-dialog-v15{
  scrollbar-width: thin;
  scrollbar-color: rgba(167,105,255,.65) rgba(255,255,255,.05);
}
.portal-policy-dialog-body-v15{
  gap: 12px !important;
}
.portal-policy-dialog-body-v15 h3{
  color: #fff;
  letter-spacing: -.02em;
}
.portal-policy-dialog-body-v15 p{
  color: rgba(255,255,255,.72) !important;
}
.games-panel,
.games-panel-head,
.games-panel-head > div{
  overflow: visible !important;
}
.games-panel h1,
#gamesTitle{
  line-height: 1.16 !important;
  padding: .03em 0 .20em !important;
  overflow: visible !important;
  display: inline-block !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (max-width: 980px){
  .portal-about-bottom-grid-v16{ grid-template-columns: 1fr !important; }
}


/* === Portal v17: policy modals, protected-login UI, seamless backgrounds and topbar behavior === */
html{
  min-height:100%;
  background:#05050c !important;
}
body.dark,
body.portal-home,
body.auth-page,
body.games-body,
body.dashboard-body,
body.stats-page,
body.sudoku-arena,
body.wordle-body,
body.ttt-body{
  min-height:100dvh;
  background-color:#05050c !important;
  background-image:
    radial-gradient(circle at 12% -8%, rgba(123,66,255,.26), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(46,168,255,.18), transparent 30%),
    linear-gradient(135deg, #05050c 0%, #090518 54%, #03131f 100%) !important;
  background-attachment:fixed !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}
.portal-home-page,
.games-shell,
.auth-landing,
.sudoku-shell,
.ttt-shell,
.wordle-shell{
  background:transparent !important;
}
.portal-about-title-v17 h1{
  max-width: 780px;
  line-height: .94;
  padding-bottom:.08em;
}
.portal-about-title-v17 h1 span{
  color:transparent;
  background: linear-gradient(90deg, #ffffff 0%, #d8ccff 55%, #78bdff 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.portal-about-hero-v17{
  align-items:center;
}
.portal-status-panel-v17{
  align-self:center;
}
.portal-policy-modal-v15[hidden]{ display:none !important; }
.portal-policy-modal-v15{
  position:fixed;
  inset:0;
  z-index:9200;
  display:grid;
  place-items:center;
  padding:22px;
}
.portal-policy-backdrop-v15{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.portal-policy-dialog-v15{
  position:relative;
  width:min(860px, calc(100vw - 34px));
  max-height:min(82vh, 760px);
  overflow:auto;
  padding:clamp(24px, 3vw, 36px);
  border:1px solid rgba(132,76,255,.42);
  border-radius:28px;
  background:
    radial-gradient(circle at 8% 0%, rgba(123,66,255,.20), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(46,168,255,.13), transparent 32%),
    rgba(7,8,19,.96);
  box-shadow:0 34px 110px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06);
}
.portal-policy-close-v15{
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1.5rem;
  font-weight:1000;
  cursor:pointer;
}
.portal-policy-dialog-v15 h2{
  margin:10px 0 18px;
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:.95;
  letter-spacing:-.055em;
}
.portal-policy-dialog-body-v15{
  display:grid;
  gap:12px;
}
.portal-policy-dialog-body-v15 h3{
  margin:8px 0 0;
  color:#fff;
  font-size:1.06rem;
}
.portal-policy-dialog-body-v15 p{
  margin:0;
  color:rgba(255,255,255,.72);
  line-height:1.62;
  font-weight:740;
}
.portal-policy-dialog-actions-v15{
  display:flex;
  justify-content:flex-end;
  margin-top:22px;
}
.portal-policy-actions-v14 button{
  min-height:56px;
  padding:0 24px;
  border-radius:18px;
  border:1px solid rgba(132,76,255,.44);
  background:rgba(255,255,255,.055);
  color:#fff;
  font-weight:1000;
  font-size:1rem;
  cursor:pointer;
}
.portal-policy-actions-v14 button:first-child{
  border-color:transparent;
  background:linear-gradient(135deg,#723fff,#29a8ff);
  box-shadow:0 18px 44px rgba(41,168,255,.18);
}
.portal-feedback-card-v17,
.portal-policy-card-v17{
  min-height:250px;
}
.portal-feedback-button-row-v15{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:22px;
}
.portal-btn{
  min-height:56px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  text-decoration:none;
  font-weight:1000;
  color:#fff;
}
.portal-btn-primary{ background:linear-gradient(135deg,#723fff,#29a8ff); border:1px solid transparent; }
.portal-btn-ghost{ background:rgba(255,255,255,.055); border:1px solid rgba(132,76,255,.44); }
.auth-terms-accept{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:18px;
  padding:16px 18px;
  border:1px solid rgba(132,76,255,.30);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.78);
  font-weight:850;
  line-height:1.45;
}
.auth-terms-accept input{
  width:20px;
  height:20px;
  margin-top:2px;
  accent-color:#7b42ff;
  flex:0 0 auto;
}
.auth-terms-accept button{
  border:0;
  padding:0;
  background:transparent;
  color:#8fd6ff;
  font:inherit;
  font-weight:1000;
  text-decoration:underline;
  cursor:pointer;
}
.auth-policy-hint{
  margin:10px 2px 0;
  color:#ffd166;
  font-weight:900;
}
.auth-policy-hint[hidden]{ display:none !important; }
.auth-provider.is-disabled-by-policy{
  opacity:.56;
  filter:saturate(.65);
}
.portal-legal-card-v17{
  display:grid;
  gap:10px;
}
.portal-legal-card-v17 h2{
  margin:14px 0 0;
  font-size:1.2rem;
}
.portal-legal-card-v17 p{
  margin:0;
  color:rgba(255,255,255,.72);
  line-height:1.62;
}
.games-panel h1,
#gamesTitle{
  line-height:1.18 !important;
  padding:.02em 0 .25em !important;
  overflow:visible !important;
  display:inline-block !important;
}
.game-help-modal{
  z-index:9300 !important;
}
body.game-help-open .unified-topbar,
body.portal-modal-open .unified-topbar{
  transform:translateY(-118%) !important;
  opacity:0 !important;
  pointer-events:none !important;
}
@media (max-width: 860px){
  .portal-about-hero-v17{ grid-template-columns:1fr !important; }
  .portal-feedback-button-row-v15 .portal-btn,
  .portal-policy-actions-v14 button{ width:100%; }
}


/* === v18 final fixes === */
html{
  min-height: 100% !important;
  background-color: #070612 !important;
  background-image:
    linear-gradient(90deg, rgba(92,45,184,.34) 0%, rgba(32,20,70,.10) 30%, rgba(7,7,18,.02) 50%, rgba(18,72,118,.16) 82%, rgba(31,119,186,.30) 100%),
    linear-gradient(135deg, #0a0718 0%, #080714 48%, #07101d 100%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: 100vw 100vh !important;
}
body.dark,
body.portal-home,
body.auth-page-provider,
body.sudoku-arena,
body.games-body,
body.ttt-body{
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background-color: transparent !important;
  background-image: none !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  overflow-x: hidden !important;
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(150vw 120vh at -16% 14%, rgba(127,76,255,.20), transparent 70%),
    radial-gradient(150vw 120vh at 116% 12%, rgba(41,168,255,.15), transparent 72%),
    linear-gradient(90deg, rgba(92,45,184,.26), rgba(7,7,18,.02) 45%, rgba(31,119,186,.22)),
    linear-gradient(135deg, #0a0718 0%, #080714 48%, #07101d 100%);
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  background-attachment: fixed;
}
.nav-collapse-toggle,
.nav-reveal-toggle{
  display: none !important;
}
.unified-topbar{
  transition: transform .22s ease, opacity .22s ease, margin-bottom .22s ease !important;
}
body.nav-hidden .unified-topbar,
body.game-help-open .unified-topbar,
body.sudoku-modal-open .unified-topbar{
  transform: translateY(-118%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin-bottom: calc(-1 * var(--unified-topbar-height, 72px)) !important;
}
.portal-about-title-v14 h1 .gradient-text,
.portal-about-title-v14 h1 em,
.portal-about-title-v14 h1 strong{
  font-style: normal;
  color: transparent;
  background: linear-gradient(90deg, #ffffff 0%, #cabdff 48%, #6bbcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.portal-feedback-actions-v18,
.legal-actions-v18{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.portal-policy-actions-v14 button{
  min-height: 54px;
  padding: 0 24px;
  border-radius: 16px;
  border: 1px solid rgba(139,92,246,.35);
  color: #fff;
  background: rgba(255,255,255,.035);
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
}
.portal-policy-actions-v14 button:first-child{
  border-color: transparent;
  background: linear-gradient(135deg, #7a35ff, #29a8ff);
  box-shadow: 0 18px 45px rgba(41,168,255,.18);
}
.legal-shell-v18{
  max-width: 980px !important;
  padding: clamp(30px, 6vw, 72px) !important;
}
.legal-shell-v18 h1{
  margin: 16px 0 24px;
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  line-height: .94;
  letter-spacing: -.07em;
}
.legal-content-v18{
  display: grid;
  gap: 16px;
}
.legal-content-v18 h2{
  margin: 18px 0 0;
  font-size: 1.25rem;
}
.legal-content-v18 p{
  margin: 6px 0 0;
  max-width: 78ch;
  color: rgba(255,255,255,.68);
  font-weight: 850;
  line-height: 1.65;
}
.auth-provider-note{ display: none !important; }
.sudoku-head-actions-v18,
.ttt-head-actions-v18{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sudoku-replay-btn-v18 svg,
.ttt-replay-btn-v18 svg{
  transform: none !important;
}
.sudoku-replay-btn-v18,
.ttt-replay-btn-v18{
  border-color: rgba(41,168,255,.34) !important;
  background: rgba(41,168,255,.10) !important;
}
.sudoku-replay-btn-v18:hover,
.ttt-replay-btn-v18:hover{
  background: rgba(41,168,255,.18) !important;
}
/* keep all game/help modals over the hidden nav */
.game-help-modal:not([hidden]),
.sudoku-help-modal:not([hidden]),
.portal-policy-modal-v15:not([hidden]){
  z-index: 99990 !important;
}
/* reduce title clipping on games page */
.games-title,
.games-hero h1,
.games-header h1{
  line-height: 1.05 !important;
  padding-bottom: .08em !important;
  overflow: visible !important;
}

/* === v18 absolute final seamless fixed background layer === */
body.dark::before,
body.portal-home::before,
body.auth-page-provider::before,
body.sudoku-arena::before,
body.games-body::before,
body.ttt-body::before{
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: -2 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    radial-gradient(150vw 120vh at -16% 14%, rgba(127,76,255,.20), transparent 70%),
    radial-gradient(150vw 120vh at 116% 12%, rgba(41,168,255,.15), transparent 72%),
    linear-gradient(90deg, rgba(92,45,184,.26), rgba(7,7,18,.02) 45%, rgba(31,119,186,.22)),
    linear-gradient(135deg, #0a0718 0%, #080714 48%, #07101d 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100vw 100vh !important;
  background-attachment: fixed !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}


/* === v19 corrections: modal topbar restore, seamless backgrounds, login policy, status and title polish === */
html, body{
  min-height:100% !important;
  background:#070612 !important;
}
body.dark{
  background:
    radial-gradient(140vw 110vh at -12% 12%, rgba(127,76,255,.22), transparent 70%),
    radial-gradient(145vw 115vh at 112% 8%, rgba(41,168,255,.18), transparent 72%),
    linear-gradient(90deg, rgba(92,45,184,.30) 0%, rgba(7,7,18,.04) 48%, rgba(31,119,186,.26) 100%),
    linear-gradient(135deg, #0a0718 0%, #080714 48%, #07101d 100%) !important;
  background-attachment:fixed, fixed, fixed, fixed !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}
body.dark::before,
body.portal-home::before,
body.auth-page-provider::before,
body.sudoku-arena::before,
body.games-body::before,
body.ttt-body::before{
  z-index:0 !important;
  background-size:cover !important;
  background-attachment:fixed !important;
}
body.dark > header,
body.dark > main,
body.dark > footer,
body.dark > .toast,
body.dark > .modal-overlay,
body.dark > .game-help-modal,
body.dark > .sudoku-help-modal,
body.dark > .portal-policy-modal-v15{
  position:relative;
  z-index:2;
}
.portal-falling-layer,
.games-rain,
.login-falling-layer{ z-index:1 !important; }
.unified-topbar{ z-index:9000 !important; }
body.nav-hidden .unified-topbar,
body.game-help-open .unified-topbar,
body.portal-modal-open .unified-topbar,
body.sudoku-modal-open .unified-topbar{
  transform:translateY(-118%) !important;
  opacity:0 !important;
  pointer-events:none !important;
  margin-bottom:calc(-1 * var(--unified-topbar-height, 72px)) !important;
}
.portal-about-title-v14 h1{
  line-height:1.02 !important;
  padding-bottom:.14em !important;
  overflow:visible !important;
}
.portal-about-title-v14 h1 .gradient-text{
  color:transparent !important;
  background:linear-gradient(90deg, #ffffff 0%, #d8ccff 46%, #74bfff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
.portal-feedback-card-v14{ text-decoration:none; }
.portal-feedback-actions-v18 .portal-btn{ text-decoration:none; }
.portal-policy-actions-v14 button{ font-family:inherit; }
.legal-modal-dialog-v19{
  max-width:min(900px, calc(100vw - 36px)) !important;
  max-height:min(78vh, 760px) !important;
  overflow:auto !important;
}
.legal-modal-copy-v19{
  display:grid;
  gap:10px;
}
.legal-modal-copy-v19 h3{ margin:14px 0 0; font-size:1.05rem; }
.legal-modal-copy-v19 p{ margin:0; color:rgba(255,255,255,.72); line-height:1.62; }
.auth-terms-accept{ order:2; }
.auth-provider-list{ order:1; }
.auth-policy-hint{ order:3; }
.auth-card-oauth-only{ display:flex !important; flex-direction:column !important; }
.auth-provider-note{ display:none !important; }
.games-panel h1,
#gamesTitle,
.games-title,
.games-hero h1,
.games-header h1{
  line-height:1.18 !important;
  padding-bottom:.18em !important;
  overflow:visible !important;
}
.nav-collapse-toggle,.nav-reveal-toggle{ display:none !important; }


/* === Portal v20: final modal/background/status/auth polish === */
html, body{
  min-height:100% !important;
  background:#070612 !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 12%, rgba(118,68,255,.24), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(43,160,255,.20), transparent 36%),
    radial-gradient(circle at 38% 98%, rgba(88,31,160,.18), transparent 44%),
    linear-gradient(90deg, #1e0e42 0%, #090716 48%, #0f4167 100%) !important;
  background-repeat:no-repeat;
  background-size:cover;
}
body.games-body, body.portal-home, body.dark, body.auth-page-provider, body.sudoku-arena, body.ttt-body{
  background:transparent !important;
  background-image:none !important;
  background-attachment:fixed !important;
}
#aboutTitle::after,
.portal-about-title-v14 h1::after{ content:none !important; display:none !important; }
.game-help-modal[hidden]{ display:none !important; }
.game-help-modal:not([hidden]){
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  z-index:99999 !important;
  overflow:hidden !important;
}
.game-help-backdrop{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  background:rgba(0,0,0,.72) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
.game-help-card{
  position:relative !important;
  z-index:1 !important;
  width:min(760px, calc(100vw - 40px)) !important;
  max-height:min(82vh, 760px) !important;
  overflow:auto !important;
  border-radius:28px !important;
  border:1px solid rgba(136,83,255,.46) !important;
  background:linear-gradient(145deg, rgba(23,14,49,.98), rgba(5,9,20,.98)) !important;
  box-shadow:0 34px 120px rgba(0,0,0,.70), 0 0 0 1px rgba(51,151,255,.10) inset !important;
}
body.game-help-open{ overflow:hidden !important; }
body.game-help-open .unified-topbar{ transform:translateY(-118%) !important; opacity:0 !important; pointer-events:none !important; }
body:not(.game-help-open):not(.portal-modal-open):not(.sudoku-modal-open):not(.nav-hidden) .unified-topbar{
  transform:translateY(0) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
.auth-showcase-content .auth-showcase-bubble{ display:none !important; }
.portal-status-row-v14[data-status="checking"] strong{ color:rgba(255,255,255,.72) !important; }


/* === Portal v21: OAuth + legal bubble restore === */
#termsPolicySource, #privacyPolicySource{ display:none !important; visibility:hidden !important; }
.portal-policy-modal-v15[hidden]{ display:none !important; }
.portal-policy-modal-v15:not([hidden]){
  position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:24px !important; z-index:100000 !important; overflow:hidden !important;
}
.portal-policy-modal-v15:not([hidden]) .portal-policy-backdrop-v15{
  position:fixed !important; inset:0 !important; background:rgba(0,0,0,.72) !important;
  backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important;
}
.portal-policy-modal-v15:not([hidden]) .portal-policy-dialog-v15{
  position:relative !important; z-index:1 !important; margin:auto !important; transform:none !important;
}
body.portal-modal-open .unified-topbar{ transform:translateY(-118%) !important; opacity:0 !important; pointer-events:none !important; }
body:not(.portal-modal-open):not(.game-help-open):not(.sudoku-modal-open):not(.nav-hidden) .unified-topbar{
  transform:translateY(0) !important; opacity:1 !important; pointer-events:auto !important;
}


/* === Dark Portal v22: profile, dashboard, stats, cleaner topbar === */
.unified-nav{ flex-wrap: nowrap; }
.unified-nav .unified-profile-btn{ margin-left: 10px; }
.auth-menu-popover{ display:none !important; }
body.dark::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(980px 680px at 12% 0%, rgba(123,66,255,.24), transparent 67%),
    radial-gradient(980px 700px at 92% 10%, rgba(46,168,255,.16), transparent 70%),
    radial-gradient(920px 640px at 78% 92%, rgba(123,66,255,.10), transparent 70%),
    linear-gradient(135deg, #070516 0%, #080716 52%, #06101c 100%);
}
.portal-profile-page,.portal-dashboard-v22,.portal-stats-v22{ width:min(1180px, calc(100% - 32px)); margin:28px auto 60px; position:relative; z-index:2; }
.profile-shell-v22,.dashboard-layout-v22,.stats-columns-v22{ display:grid; gap:18px; }
.profile-loading-card-v22,.profile-hero-v22,.profile-card-v22,.dashboard-hero-v22,.dashboard-user-card-v22,.dashboard-server-list-v22,.dashboard-config-v22,.stats-hero-v22,.stats-card-v22{
  border:1px solid rgba(132,76,255,.25);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  box-shadow:0 24px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.profile-hero-v22,.dashboard-hero-v22,.stats-hero-v22{ padding:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.profile-identity-v22,.dashboard-user-card-v22,.server-config-head-v22{ display:flex; align-items:center; gap:16px; }
.profile-identity-v22 h1,.dashboard-hero-v22 h1,.stats-hero-v22 h1{ margin:4px 0; font-size:clamp(2rem,4vw,4.2rem); line-height:1; letter-spacing:-.05em; background:linear-gradient(90deg,#fff,#cdb6ff 52%,#7dd3fc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.profile-identity-v22 p,.dashboard-hero-v22 p,.stats-hero-v22 p,.profile-muted-v22{ color:rgba(255,255,255,.66); font-weight:800; }
.profile-hero-avatar-v22,.dash-avatar-v22{ width:86px; height:86px; border-radius:28px; object-fit:cover; border:1px solid rgba(167,105,255,.42); background:rgba(255,255,255,.06); box-shadow:0 0 34px rgba(123,66,255,.25); display:grid; place-items:center; font-size:2rem; font-weight:1000; }
.profile-level-card-v22{ min-width:260px; padding:18px; border-radius:22px; border:1px solid rgba(255,255,255,.10); background:rgba(4,4,12,.44); }
.profile-level-card-v22 span,.profile-level-card-v22 small{ color:rgba(255,255,255,.64); font-weight:900; }
.profile-level-card-v22 strong{ display:block; margin:4px 0 10px; font-size:1.7rem; }
.profile-xp-bar-v22{ height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.profile-xp-bar-v22 i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7b42ff,#29a8ff,#35f29a); box-shadow:0 0 22px rgba(46,168,255,.38); }
.profile-grid-v22{ display:grid; grid-template-columns:1.25fr .75fr; gap:18px; margin-top:18px; }
.profile-card-v22{ padding:22px; }
.profile-card-wide-v22{ grid-column:span 1; }
.profile-card-v22 h2,.dashboard-config-v22 h2,.stats-card-v22 h2{ margin:6px 0 12px; font-size:1.35rem; }
.profile-form-v22{ display:grid; gap:12px; max-width:520px; }
.profile-info-list-v22{ display:grid; gap:10px; margin:0; }
.profile-info-list-v22 div{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.profile-info-list-v22 dt{ color:rgba(255,255,255,.56); font-weight:900; }
.profile-info-list-v22 dd{ margin:0; font-weight:1000; }
.profile-provider-grid-v22{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.profile-provider-card-v22{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:20px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.045); }
.profile-provider-card-v22.is-linked{ border-color:rgba(53,242,154,.28); background:rgba(53,242,154,.055); }
.profile-provider-card-v22 div{ flex:1; min-width:0; display:grid; gap:2px; }
.profile-provider-card-v22 small{ color:rgba(255,255,255,.58); font-weight:800; overflow:hidden; text-overflow:ellipsis; }
.profile-provider-orb-v22,.server-icon-v22{ width:46px; height:46px; border-radius:16px; display:grid; place-items:center; object-fit:cover; background:linear-gradient(135deg,rgba(123,66,255,.55),rgba(46,168,255,.25)); border:1px solid rgba(255,255,255,.13); font-weight:1000; }
.profile-actions-v22{ display:flex; gap:10px; flex-wrap:wrap; }
.stack-v22{ flex-direction:column; align-items:stretch; }
.danger-btn-v22{ background:linear-gradient(135deg,#ff2e66,#8b1a44) !important; box-shadow:0 14px 40px rgba(255,46,102,.22) !important; }
.profile-danger-modal-v22{ max-width:560px; }
.dashboard-layout-v22{ grid-template-columns:360px 1fr; align-items:start; }
.dashboard-sidebar-v22{ display:grid; gap:16px; }
.dashboard-user-card-v22,.dashboard-server-list-v22,.dashboard-config-v22{ padding:18px; }
.dash-avatar-v22{ width:62px; height:62px; border-radius:20px; font-size:1.4rem; }
.dashboard-user-card-v22 div{ display:grid; gap:3px; }
.dashboard-user-card-v22 strong{ font-size:1.1rem; }
.dashboard-user-card-v22 small{ color:rgba(255,255,255,.58); font-weight:800; }
.dashboard-server-list-v22{ display:grid; gap:10px; }
.server-row-v22{ width:100%; border:1px solid rgba(255,255,255,.09); border-radius:19px; background:rgba(255,255,255,.045); color:#fff; padding:12px; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; transition:.18s ease; }
.server-row-v22:hover,.server-row-v22.is-selected{ transform:translateY(-1px); border-color:rgba(132,76,255,.46); background:rgba(132,76,255,.13); }
.server-row-v22 span{ display:grid; gap:2px; }
.server-row-v22 small,.empty-server-v22 p{ color:rgba(255,255,255,.58); font-weight:800; }
.dashboard-config-v22{ min-height:520px; }
.config-grid-v22{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.config-grid-v22 article,.stats-big-grid-v22 div,.stat-row-v22{ border:1px solid rgba(255,255,255,.09); border-radius:19px; background:rgba(255,255,255,.045); padding:16px; }
.config-grid-v22 p{ color:rgba(255,255,255,.62); font-weight:750; }
.dashboard-action-row-v22{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.stats-hero-v22{ display:grid; grid-template-columns:1fr auto; }
.stats-hero-v22 .stats-xp-bar-v22{ grid-column:1 / -1; width:100%; }
.stats-xp-orb-v22{ width:124px; height:124px; border-radius:34px; display:grid; place-items:center; border:1px solid rgba(132,76,255,.28); background:radial-gradient(circle at 30% 10%, rgba(125,211,252,.24), transparent 40%), rgba(255,255,255,.045); }
.stats-xp-orb-v22 strong{ font-size:1.75rem; }
.stats-xp-orb-v22 span{ color:rgba(255,255,255,.6); font-weight:1000; }
.stats-columns-v22{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.stats-card-v22{ padding:20px; }
.stats-big-grid-v22{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0; }
.stats-big-grid-v22 b{ display:block; font-size:1.5rem; }
.stats-big-grid-v22 span,.stat-row-v22 small{ color:rgba(255,255,255,.58); font-weight:900; }
.stat-row-v22{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin-top:9px; }
.stat-row-v22 small{ grid-column:1/-1; }
@media (max-width: 860px){ .unified-nav{ flex-wrap:wrap; } .profile-grid-v22,.dashboard-layout-v22,.stats-columns-v22,.profile-provider-grid-v22{ grid-template-columns:1fr; } .profile-card-wide-v22{ grid-column:auto; } .dashboard-config-v22{ min-height:auto; } }

/* v23 account loading hardening */
.profile-inline-alert-v23 {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  background: rgba(15, 35, 68, 0.55);
  color: rgba(245, 240, 255, 0.86);
  font-weight: 800;
}
.profile-error-v23 {
  max-width: 760px;
  margin: 28px auto;
}
.profile-error-v23 h1 {
  margin: 8px 0 10px;
  font-size: clamp(36px, 6vw, 64px);
}
.dashboard-server-list-v22 .dashboard-action-row-v22,
.empty-server-v22 .dashboard-action-row-v22 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

/* Dashboard v25 - server-first guild setup */
.portal-dashboard-v25{width:min(1180px,calc(100% - 32px));margin:28px auto 70px;position:relative;z-index:2;}
.dashboard-title-v25{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:18px 0 20px;padding:0 6px;}
.dashboard-title-v25 h1{margin:8px 0 8px;font-size:clamp(2.6rem,6vw,5.2rem);line-height:.92;letter-spacing:-.055em;background:linear-gradient(90deg,#fff,#d8c8ff 54%,#85d8ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.dashboard-title-v25 p{margin:0;max-width:760px;color:rgba(255,255,255,.68);font-weight:850;font-size:1.02rem;line-height:1.55;}
.dashboard-invite-pill-v25{display:flex;align-items:center;gap:12px;min-width:220px;text-decoration:none;color:#fff;border:1px solid rgba(135,92,255,.46);border-radius:26px;padding:14px 16px;background:linear-gradient(135deg,rgba(116,69,255,.38),rgba(44,163,255,.22));box-shadow:0 22px 70px rgba(75,35,190,.22);transition:.18s ease;}
.dashboard-invite-pill-v25:hover{transform:translateY(-2px);border-color:rgba(132,215,255,.6);}
.dashboard-invite-icon-v25{width:46px;height:46px;border-radius:17px;display:grid;place-items:center;font-size:1.8rem;font-weight:1000;background:linear-gradient(135deg,#7a45ff,#2aa8ff);box-shadow:0 14px 36px rgba(36,142,255,.25);}
.dashboard-invite-pill-v25 span:last-child{display:grid;gap:2px;}
.dashboard-invite-pill-v25 strong{font-size:1.05rem;}
.dashboard-invite-pill-v25 small{color:rgba(255,255,255,.66);font-weight:850;}
.dashboard-console-v25{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:18px;align-items:start;}
.dashboard-left-v25{display:grid;gap:16px;}
.dashboard-user-card-v25,.dashboard-server-list-v25,.dashboard-right-v25,.setup-card-v25{border:1px solid rgba(132,76,255,.28);border-radius:28px;background:linear-gradient(135deg,rgba(43,22,81,.82),rgba(7,14,29,.76));box-shadow:0 24px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);}
.dashboard-user-card-v25{padding:18px;display:flex;align-items:center;gap:15px;}
.dash-avatar-v25{width:62px;height:62px;border-radius:20px;object-fit:cover;border:1px solid rgba(167,105,255,.42);background:rgba(255,255,255,.06);box-shadow:0 0 34px rgba(123,66,255,.25);display:grid;place-items:center;font-size:1.35rem;font-weight:1000;}
.dashboard-user-card-v25 div{display:grid;gap:3px;}
.dashboard-user-card-v25 strong{font-size:1.08rem;color:#fff;}
.dashboard-user-card-v25 small{color:rgba(255,255,255,.58);font-weight:850;}
.dashboard-server-list-v25{padding:18px;display:grid;gap:14px;}
.dashboard-section-head-v25{display:grid;gap:6px;}
.dashboard-section-head-v25 h2{margin:0;color:#fff;font-size:1.6rem;letter-spacing:-.035em;}
.dashboard-section-head-v25 p{margin:0;color:rgba(255,255,255,.62);font-weight:800;line-height:1.45;}
.server-card-stack-v25{display:grid;gap:13px;}
.server-card-v25{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.045);color:#fff;padding:15px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;text-align:left;cursor:pointer;transition:.18s ease;}
.server-card-v25:hover,.server-card-v25.is-selected{transform:translateY(-2px);border-color:rgba(132,76,255,.58);background:linear-gradient(135deg,rgba(132,76,255,.18),rgba(34,148,255,.08));box-shadow:0 16px 50px rgba(48,28,140,.25);}
.server-card-icon-v25,.selected-server-icon-v25{width:58px;height:58px;border-radius:20px;object-fit:cover;background:linear-gradient(135deg,#7343ff,#2daaff);display:grid;place-items:center;color:#fff;font-weight:1000;font-size:1.25rem;border:1px solid rgba(255,255,255,.12);}
.server-card-main-v25{display:grid;gap:3px;min-width:0;}
.server-card-main-v25 strong{font-size:1.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.server-card-main-v25 small,.empty-server-v25 p{color:rgba(255,255,255,.6);font-weight:850;}
.server-card-stats-v25{display:grid;gap:1px;text-align:right;border-radius:17px;padding:10px 12px;background:rgba(255,255,255,.06);}
.server-card-stats-v25 b{font-size:1.05rem;}
.server-card-stats-v25 small{text-transform:uppercase;font-size:.68rem;letter-spacing:.12em;color:rgba(255,255,255,.48);font-weight:1000;}
.dashboard-right-v25{padding:22px;min-height:560px;overflow:hidden;}
.dashboard-right-v25 h2{margin:6px 0 12px;color:#fff;font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1;letter-spacing:-.05em;}
.dashboard-right-v25 p{color:rgba(255,255,255,.65);font-weight:800;line-height:1.55;}
.config-placeholder-grid-v25,.selected-server-metrics-v25,.setup-grid-v25,.commands-grid-v25{display:grid;gap:12px;}
.config-placeholder-grid-v25{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px;}
.config-placeholder-grid-v25 article,.selected-server-metrics-v25 div,.command-group-v25,.empty-mini-v25,.activity-row-v25,.access-row-v25{border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.045);padding:15px;}
.selected-server-shell-v25{display:grid;gap:18px;}
.selected-server-head-v25{display:flex;align-items:center;gap:16px;}
.selected-server-head-v25 h2{font-size:clamp(2rem,4vw,3.3rem);margin:3px 0;}
.selected-server-icon-v25{width:78px;height:78px;border-radius:26px;font-size:1.8rem;}
.selected-server-metrics-v25{grid-template-columns:repeat(3,minmax(0,1fr));}
.selected-server-metrics-v25 strong{display:block;color:#fff;font-size:1.8rem;letter-spacing:-.04em;}
.selected-server-metrics-v25 span{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:1000;color:rgba(255,255,255,.5);}
.server-open-btn-v25{width:max-content;min-width:220px;}
.dashboard-action-row-v25,.setup-top-v25{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.setup-top-v25{justify-content:space-between;margin-bottom:18px;}
.setup-main-head-v25{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08);}
.setup-grid-v25{grid-template-columns:repeat(2,minmax(0,1fr));}
.setup-card-v25{padding:18px;}
.setup-card-v25 h3{margin:7px 0 9px;color:#fff;font-size:1.35rem;letter-spacing:-.035em;}
.setup-card-v25 p{font-size:.95rem;}
.setup-card-wide-v25{grid-column:1/-1;}
.access-list-v25,.activity-list-v25{display:grid;gap:10px;margin-top:12px;}
.access-row-v25{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px;}
.access-row-v25 strong{color:#fff;display:block;}
.access-row-v25 small{color:rgba(255,255,255,.58);font-weight:800;}
.access-row-v25 b{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#7dd3fc;background:rgba(34,148,255,.12);padding:7px 10px;border-radius:999px;white-space:nowrap;}
.access-dot-v25{width:14px;height:14px;border-radius:50%;background:#33f09e;box-shadow:0 0 18px rgba(51,240,158,.5);}
.access-dot-v25.is-red{background:#ff516d;box-shadow:0 0 18px rgba(255,81,109,.5);}
.activity-row-v25{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.activity-row-v25 span{color:rgba(255,255,255,.62);font-weight:850;}
.activity-row-v25 strong{color:#fff;}
.commands-grid-v25{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px;}
.command-group-v25 h3{font-size:1.05rem;margin:0 0 10px;}
.command-toggle-v25{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;border-top:1px solid rgba(255,255,255,.07);padding:11px 0;cursor:pointer;}
.command-toggle-v25:first-of-type{border-top:0;}
.command-toggle-v25 input{position:absolute;opacity:0;pointer-events:none;}
.toggle-ui-v25{width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);position:relative;transition:.18s ease;}
.toggle-ui-v25:after{content:"";position:absolute;top:4px;left:4px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.65);transition:.18s ease;}
.command-toggle-v25 input:checked + .toggle-ui-v25{background:linear-gradient(90deg,#7445ff,#28aaff);border-color:rgba(125,211,252,.45);}
.command-toggle-v25 input:checked + .toggle-ui-v25:after{left:21px;background:#fff;}
.command-toggle-v25 strong{display:block;color:#fff;}
.command-toggle-v25 small{display:block;color:rgba(255,255,255,.55);font-weight:750;line-height:1.35;}
.command-toggle-v25.is-danger strong{color:#ffb5c0;}
.empty-mini-v25 p{margin:6px 0 0;color:rgba(255,255,255,.58);font-weight:800;}
@media (max-width: 980px){.dashboard-title-v25,.dashboard-console-v25{grid-template-columns:1fr;display:grid}.dashboard-console-v25{grid-template-columns:1fr}.dashboard-invite-pill-v25{width:100%}.setup-grid-v25,.commands-grid-v25,.config-placeholder-grid-v25,.selected-server-metrics-v25{grid-template-columns:1fr}.dashboard-right-v25{min-height:auto}.server-card-v25{grid-template-columns:auto 1fr}.server-card-stats-v25{grid-column:1/-1;text-align:left}}

/* Portal v26 — dashboard/profile/stats polish and stable nav */
body.nav-hidden .unified-topbar,
body.game-help-open .unified-topbar,
body.portal-modal-open .unified-topbar,
body.sudoku-modal-open .unified-topbar{
  margin-bottom:0 !important;
  transform:translateY(-120%) !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.unified-topbar{ transition:transform .24s ease, opacity .24s ease !important; }
.nav-reveal-toggle,.nav-collapse-toggle{ display:none !important; }

.dashboard-v26{ width:min(1500px, calc(100% - 54px)); margin:42px auto 80px; }
.dashboard-compact-head-v26{
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  padding:26px 30px; margin:0 0 20px;
  border:1px solid rgba(132,76,255,.28); border-radius:28px;
  background:linear-gradient(135deg, rgba(43,18,87,.76), rgba(8,31,51,.64));
  box-shadow:0 20px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  position:relative; z-index:2;
}
.dashboard-compact-head-v26 h1{ margin:8px 0 8px; font-size:clamp(2.3rem, 6vw, 5.2rem); line-height:.96; letter-spacing:-.055em; color:#fff; }
.dashboard-compact-head-v26 p{ margin:0; max-width:880px; color:rgba(244,239,255,.72); font-size:1.05rem; line-height:1.55; }
.dashboard-console-v26{ margin-top:0 !important; grid-template-columns:minmax(320px, 480px) minmax(0, 1fr); align-items:start; }
.dashboard-invite-pill-v26{ min-width:270px; align-self:center; }
.discord-icon-v26 svg{ width:28px; height:28px; display:block; }
.server-skeleton-stack-v26{ display:grid; gap:14px; margin-top:18px; }
.server-skeleton-stack-v26 span{ display:block; min-height:92px; border-radius:24px; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(125,211,252,.10), rgba(255,255,255,.05)); animation:pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse{ from{opacity:.45} to{opacity:.88} }
.dashboard-user-card-v25{ display:flex; align-items:center; gap:16px; }
.dash-avatar-v26,.dash-avatar-v25{ flex:0 0 auto; }
.server-card-v25{ text-align:left; }
.server-card-v25.is-selected{ box-shadow:0 0 0 2px rgba(112,68,255,.55), 0 22px 70px rgba(55,25,120,.35); }

.profile-provider-grid-v26{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px; }
.profile-provider-card-v26{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px; border-radius:22px; border:1px solid rgba(132,76,255,.28);
  background:linear-gradient(135deg, rgba(255,255,255,.055), rgba(14,32,52,.42));
}
.profile-provider-card-v26.is-linked{ border-color:rgba(35,242,154,.35); box-shadow:inset 4px 0 0 rgba(35,242,154,.55); }
.provider-left-v26{ display:flex; align-items:center; gap:14px; min-width:0; }
.provider-left-v26 strong{ display:block; color:#fff; font-size:1.1rem; }
.provider-left-v26 small{ display:block; color:rgba(244,239,255,.62); max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.provider-avatar-v26,.provider-logo-v26{ width:54px; height:54px; border-radius:18px; flex:0 0 54px; display:grid; place-items:center; object-fit:cover; font-weight:900; color:#fff; background:linear-gradient(135deg,#6d43ff,#2ea8ff); }
.provider-discord-v26{ background:linear-gradient(135deg,#5865F2,#2ea8ff); }
.provider-google-v26{ background:linear-gradient(135deg,#fff,#e9f2ff); color:#4285F4; }
.provider-steam-v26{ background:linear-gradient(135deg,#132033,#2ea8ff); }
.provider-actions-v26{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.provider-actions-v26 .btn{ min-width:88px; padding-inline:16px; }
.profile-hero-v26{ align-items:center; }
.profile-grid-v26{ align-items:start; }

.stats-hero-v22{ overflow:hidden; position:relative; }
.stats-hero-copy-v26 h1{ font-size:clamp(2.2rem, 7vw, 5.4rem); line-height:.95; margin:.08em 0 .18em; letter-spacing:-.05em; }
.stats-hero-copy-v26 h1 span{ background:linear-gradient(90deg,#fff,#cbb9ff,#7dd3fc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stats-xp-orb-v26{ box-shadow:0 20px 70px rgba(74,144,255,.24), inset 0 1px 0 rgba(255,255,255,.14); }
.stats-card-v26{ min-height:260px; }
.stats-row-pack-v26{ display:grid; gap:10px; margin-top:16px; }
.stats-columns-v22{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

@media (max-width: 980px){
  .dashboard-compact-head-v26{ flex-direction:column; align-items:flex-start; }
  .dashboard-invite-pill-v26{ width:100%; }
  .dashboard-console-v26{ grid-template-columns:1fr; }
  .stats-columns-v22{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .dashboard-v26{ width:min(100% - 24px, 1500px); }
  .profile-provider-card-v26{ align-items:flex-start; flex-direction:column; }
  .provider-actions-v26{ width:100%; justify-content:stretch; }
  .provider-actions-v26 .btn{ flex:1; }
}

/* Dashboard v27 — compact server-first configuration */
.dashboard-v27{width:min(1280px,calc(100% - 40px));margin:28px auto 72px;position:relative;z-index:2;}
.dashboard-toolbar-v27{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:12px 14px;border:1px solid rgba(132,76,255,.26);border-radius:22px;background:linear-gradient(135deg,rgba(21,12,44,.82),rgba(7,22,37,.68));box-shadow:0 16px 54px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05)}
.dashboard-toolbar-v27>div{display:grid;gap:3px}.dashboard-toolbar-v27 strong{font-size:1.1rem;color:#fff}.dashboard-toolbar-v27 .portal-mini-label{font-size:.66rem}
.dashboard-invite-mini-v27{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;border:1px solid rgba(132,76,255,.36);border-radius:18px;padding:9px 12px;background:linear-gradient(135deg,rgba(88,101,242,.2),rgba(45,168,255,.12));transition:.18s ease}.dashboard-invite-mini-v27:hover{transform:translateY(-1px);border-color:rgba(125,211,252,.55)}.dashboard-invite-mini-v27 .dashboard-invite-icon-v25{width:36px;height:36px;border-radius:13px}.dashboard-invite-mini-v27 svg{width:22px;height:22px}.dashboard-invite-mini-v27 span:last-child{display:grid;gap:0}.dashboard-invite-mini-v27 strong{font-size:.95rem}.dashboard-invite-mini-v27 small{font-size:.72rem;color:rgba(255,255,255,.62);font-weight:850}
.dashboard-v27 .dashboard-console-v25{grid-template-columns:1fr;gap:14px}.dashboard-v27 .dashboard-left-v25{max-width:980px;width:100%;margin:0 auto;gap:12px}.dashboard-v27 .dashboard-user-card-v25{display:none!important}.dashboard-v27 .dashboard-server-list-v25,.dashboard-v27 .dashboard-right-v25,.dashboard-v27 .setup-card-v25{border-radius:22px;padding:16px;border-color:rgba(132,76,255,.24);background:linear-gradient(135deg,rgba(28,16,57,.82),rgba(6,18,32,.74));box-shadow:0 16px 58px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05)}
.dashboard-v27 .dashboard-section-head-v25 h2{font-size:clamp(1.6rem,3vw,2.25rem);letter-spacing:-.045em}.dashboard-v27 .dashboard-section-head-v25 p{font-size:.96rem}.server-card-stack-v27{gap:10px}.server-card-v27{border-radius:20px;padding:13px;min-height:82px}.server-card-v27 .server-card-icon-v25{width:52px;height:52px;border-radius:17px}.server-card-v27 .server-card-main-v25 strong{font-size:1.04rem}.server-card-v27 .server-card-stats-v25{padding:8px 10px;border-radius:14px}.selected-server-action-v27{margin-top:12px}.selected-server-action-card-v27{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;border:1px solid rgba(125,211,252,.28);border-radius:22px;padding:14px;background:linear-gradient(135deg,rgba(116,69,255,.16),rgba(45,168,255,.12));box-shadow:0 18px 60px rgba(45,168,255,.12)}.selected-server-action-card-v27 strong{display:block;color:#fff;font-size:1.1rem}.selected-server-action-card-v27 small{color:rgba(255,255,255,.62);font-weight:800}.selected-action-icon-v27{width:54px;height:54px;border-radius:18px;object-fit:cover;display:grid;place-items:center;background:linear-gradient(135deg,#7343ff,#2daaff);font-weight:1000;color:#fff}
.dashboard-v27 .dashboard-right-v25[hidden],.dashboard-v27 .dashboard-server-list-v25[hidden]{display:none!important}.dashboard-v27 .dashboard-right-v25{max-width:1160px;width:100%;margin:0 auto;min-height:auto;overflow:visible}.setup-loading-v27{display:flex;align-items:center;gap:16px}.setup-loading-v27 h2{margin:3px 0}.setup-top-v27{margin-bottom:12px}.setup-main-head-v27{border-radius:20px;padding:14px;background:rgba(255,255,255,.04);margin-bottom:14px}.setup-main-head-v27 h2{font-size:clamp(1.75rem,3.8vw,3rem)!important}.setup-grid-v27{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.setup-card-v27{border-radius:22px!important;padding:16px!important}.setup-card-v27 h3{font-size:1.18rem!important}.setup-card-v27 p{font-size:.9rem!important}.person-avatar-v27{width:42px;height:42px;border-radius:14px;object-fit:cover;display:grid;place-items:center;background:linear-gradient(135deg,#7445ff,#28aaff);font-weight:1000;color:#fff}.access-person-v27{grid-template-columns:auto 1fr auto}.access-list-v27{max-height:360px;overflow:auto;padding-right:4px}.commands-grid-v27{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.command-group-v27{border-radius:18px;padding:13px}.command-group-v27 h3{font-size:1rem!important}.command-toggle-v27{padding:9px 0}.moderation-columns-v27{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.moderation-columns-v27 h4{margin:0 0 10px;color:#fff}.automod-rules-v27{display:grid;gap:8px;margin-top:10px}.automod-rules-v27 div,.under-dev-card-v27{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px;background:rgba(255,255,255,.045);color:#fff;text-align:left}.automod-rules-v27 small,.under-dev-card-v27 small,.muted-note-v27{color:rgba(255,255,255,.58);font-weight:800}.under-dev-card-v27{cursor:pointer}.under-dev-card-v27:hover{border-color:rgba(125,211,252,.38)}
@media (max-width:900px){.dashboard-v27{width:min(100% - 24px,1280px)}.dashboard-toolbar-v27,.selected-server-action-card-v27{grid-template-columns:1fr;display:grid}.setup-grid-v27,.commands-grid-v27,.moderation-columns-v27{grid-template-columns:1fr}.selected-server-action-card-v27 .btn{width:100%}.dashboard-invite-mini-v27{width:100%;justify-content:center}}

/* ---------------- Dashboard v28 refinements ---------------- */
.dashboard-page-v28 .portal-dashboard-v25.dashboard-v28{width:min(1180px,calc(100% - 44px));margin:34px auto 72px;position:relative;z-index:2;}
.dashboard-page-v28 .dashboard-console-v28{display:block;}
.dashboard-page-v28 .dashboard-left-v28{max-width:980px;width:100%;margin:0 auto;display:grid;gap:12px;}
.dashboard-page-v28 .dashboard-user-card-v28{display:none!important;}
.dashboard-page-v28 .dashboard-server-list-v28,
.dashboard-page-v28 .dashboard-right-v28{border:1px solid rgba(132,76,255,.24);border-radius:24px;padding:16px;background:linear-gradient(135deg,rgba(28,16,57,.82),rgba(6,18,32,.74));box-shadow:0 18px 58px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;}
.dashboard-page-v28 .dashboard-section-head-v28{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin-bottom:13px;}
.dashboard-page-v28 .dashboard-section-head-v28 h2{font-size:clamp(1.65rem,3vw,2.45rem);line-height:.98;margin:10px 0 6px;letter-spacing:-.055em;color:#fff;}
.dashboard-page-v28 .dashboard-section-head-v28 p{margin:0;color:rgba(255,255,255,.66);font-size:.96rem;font-weight:850;max-width:720px;}
.dashboard-invite-inside-v28{display:flex;align-items:center;gap:12px;text-decoration:none;border:1px solid rgba(125,211,252,.26);border-radius:22px;padding:11px 15px;background:linear-gradient(135deg,rgba(116,69,255,.36),rgba(45,168,255,.18));box-shadow:0 16px 48px rgba(45,168,255,.12);color:#fff;min-width:206px;justify-content:center;}
.dashboard-invite-inside-v28 .dashboard-invite-icon-v25{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#7445ff,#2daaff);color:#fff;box-shadow:0 12px 32px rgba(45,168,255,.18);}
.dashboard-invite-inside-v28 svg{width:24px;height:24px;}
.dashboard-invite-inside-v28 strong{display:block;font-size:1rem;line-height:1;color:#fff;}
.dashboard-invite-inside-v28 small{display:block;margin-top:4px;color:rgba(255,255,255,.7);font-weight:900;}
.server-card-stack-v28{display:grid;gap:10px;}
.server-card-v28{border-radius:18px!important;padding:12px!important;min-height:76px!important;}
.server-card-v28 .server-card-icon-v25{width:50px!important;height:50px!important;border-radius:16px!important;}
.server-card-v28 .server-card-main-v25 strong{font-size:1.04rem!important;}
.server-card-v28 .server-card-main-v25 small{font-size:.82rem!important;}
.server-card-v28 .server-card-stats-v25{padding:8px 11px!important;border-radius:14px!important;}
.selected-server-action-v28{margin-top:12px;}
.selected-server-action-card-v28{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;border:1px solid rgba(125,211,252,.28);border-radius:20px;padding:12px;background:linear-gradient(135deg,rgba(116,69,255,.18),rgba(45,168,255,.12));box-shadow:0 18px 50px rgba(45,168,255,.1);}
.selected-server-action-card-v28 strong{display:block;color:#fff;font-size:1.08rem;}
.selected-server-action-card-v28 small{color:rgba(255,255,255,.62);font-weight:850;}
.dashboard-page-v28 .dashboard-right-v28[hidden], .dashboard-page-v28 .dashboard-server-list-v28[hidden]{display:none!important;}
.dashboard-page-v28 .dashboard-right-v28{max-width:1100px;width:100%;margin:0 auto;}
.setup-top-v28{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px;}
.setup-main-head-v28{border-radius:20px!important;padding:14px!important;background:rgba(255,255,255,.04);margin-bottom:12px!important;}
.setup-main-head-v28 h2{font-size:clamp(1.65rem,3vw,2.55rem)!important;line-height:1!important;}
.setup-main-head-v28 p{font-size:.9rem!important;}
.setup-section-tabs-v28{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0;}
.setup-section-tabs-v28 button{appearance:none;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.045);color:#fff;text-align:left;padding:12px;cursor:pointer;min-height:78px;transition:.18s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.setup-section-tabs-v28 button:hover,.setup-section-tabs-v28 button.is-active{transform:translateY(-1px);border-color:rgba(125,211,252,.42);background:linear-gradient(135deg,rgba(116,69,255,.2),rgba(45,168,255,.1));}
.setup-section-tabs-v28 span{display:block;color:rgba(255,255,255,.68);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;font-weight:1000;}
.setup-section-tabs-v28 b{display:block;margin-top:8px;font-size:1.15rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.setup-section-content-v28{margin-top:10px;}
.setup-card-v28{border-radius:22px!important;padding:16px!important;background:linear-gradient(135deg,rgba(28,16,57,.84),rgba(6,18,32,.76))!important;border-color:rgba(132,76,255,.22)!important;}
.setup-card-v28 h3{font-size:1.2rem!important;margin:.35rem 0!important;}
.setup-card-v28 p{font-size:.9rem!important;}
.setup-empty-v28{min-height:180px;display:grid;align-content:center;}
.commands-grid-v28{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.command-group-v28{border-radius:18px!important;padding:13px!important;}
.command-toggle-v28{padding:9px 0!important;}
.module-grid-v28{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;}
.module-card-v28{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:12px;background:rgba(255,255,255,.045);cursor:pointer;transition:.18s ease;color:#fff;}
.module-card-v28:hover,.module-card-v28.is-enabled{border-color:rgba(125,211,252,.35);background:linear-gradient(135deg,rgba(116,69,255,.18),rgba(45,168,255,.10));}
.module-card-v28 input{position:absolute;opacity:0;pointer-events:none;}
.module-icon-v28{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:1.2rem;font-weight:1000;color:#9bdcff;}
.module-card-v28 small{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;color:rgba(255,255,255,.48);font-weight:1000;}
.module-card-v28 strong{display:block;font-size:1rem;}
.module-card-v28 em{display:block;font-style:normal;font-size:.82rem;color:rgba(255,255,255,.62);font-weight:750;line-height:1.35;margin-top:3px;}
.module-card-v28 b{font-size:.85rem;color:#fff;border:1px solid rgba(255,255,255,.10);padding:8px 10px;border-radius:13px;background:rgba(255,255,255,.05);}
.moderation-columns-v28{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.moderation-columns-v28 h4{margin:0 0 10px;color:#fff;}
.automod-rules-v28 div{display:flex;justify-content:space-between;gap:10px;border:1px solid rgba(255,255,255,.08);border-radius:15px;padding:10px;background:rgba(255,255,255,.045);}
@media (max-width:900px){.dashboard-page-v28 .portal-dashboard-v25.dashboard-v28{width:min(100% - 24px,1180px)}.dashboard-page-v28 .dashboard-section-head-v28,.selected-server-action-card-v28{grid-template-columns:1fr}.dashboard-invite-inside-v28{width:100%;}.setup-section-tabs-v28,.commands-grid-v28,.module-grid-v28,.moderation-columns-v28{grid-template-columns:1fr}.setup-top-v28{display:grid}.setup-top-v28 .btn{width:100%;}}

/* ---------------- v29 dashboard / stats / mobile polish ---------------- */
.dashboard-page-v29 .dashboard-title-v25{display:none!important;}
.dashboard-page-v29 .portal-dashboard-v25.dashboard-v29{width:min(100% - 56px,1280px);margin:0 auto;padding-top:26px;}
.dashboard-page-v29 .dashboard-console-v25{display:grid;grid-template-columns:minmax(320px,520px) minmax(0,1fr);gap:18px;align-items:start;}
.dashboard-page-v29 .dashboard-left-v25,.dashboard-page-v29 .dashboard-right-v25,.dashboard-section-head-v29,.server-card-v29,.selected-server-action-card-v29,.setup-card-v29{border-radius:24px;background:linear-gradient(135deg,rgba(35,22,72,.78),rgba(7,20,39,.72));border:1px solid rgba(139,92,246,.32);box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);}
.dashboard-page-v29 .dashboard-left-v25,.dashboard-page-v29 .dashboard-right-v25{padding:16px;}
.dashboard-section-head-v29{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:18px 20px;margin-bottom:14px;}
.dashboard-section-head-v29 h2{font-size:clamp(1.7rem,3vw,2.65rem);line-height:1;margin:8px 0 8px;letter-spacing:-.04em;}
.dashboard-section-head-v29 p{margin:0;color:rgba(255,255,255,.68);font-weight:850;line-height:1.45;}
.dashboard-invite-inside-v29{min-width:210px;align-self:center;}
.server-card-stack-v29{display:grid;gap:10px;}
.server-card-v29{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;padding:14px 16px;text-align:left;color:#fff;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.server-card-v29:hover,.server-card-v29.is-selected{transform:translateY(-1px);border-color:rgba(59,166,255,.65);background:linear-gradient(135deg,rgba(104,70,255,.32),rgba(27,154,255,.14));}
.selected-server-action-card-v29{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;margin-top:12px;}
.setup-top-v29{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.setup-source-v29{border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:9px 13px;background:rgba(255,255,255,.06);font-weight:1000;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:rgba(255,255,255,.7)}
.setup-main-head-v29{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;margin-bottom:12px;padding:16px;border-radius:24px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.setup-main-head-v29 h2{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1;margin:3px 0 6px;letter-spacing:-.04em;}
.setup-main-head-v29 p{margin:0;color:rgba(255,255,255,.65);font-weight:800;}
.setup-section-tabs-v29{grid-template-columns:repeat(5,minmax(0,1fr));}
.setup-section-tabs-v29 button{position:relative;display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;min-height:72px;padding:11px;border-radius:17px;}
.setup-section-tabs-v29 button i{font-style:normal;width:30px;height:30px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#7742ff,#28a9ff);box-shadow:0 10px 26px rgba(57,151,255,.22);font-size:.9rem;}
.setup-section-tabs-v29 button[disabled]{opacity:.47;cursor:not-allowed;filter:saturate(.7);}
.setup-section-tabs-v29 button[disabled]:hover{transform:none;border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.045);}
.setup-section-tabs-v29 b{grid-column:2;margin-top:3px;}
.setup-card-v29{padding:18px;}
.commands-grid-v29{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.command-group-v29{padding:14px;border-radius:18px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.08);}
.command-group-v29 h3{margin:0 0 10px;font-size:1rem;}
.command-toggle-v29{border-radius:15px;}
.sync-warning-v29{margin:12px 0 0;color:#ffd68a;font-weight:850;line-height:1.4;}
.moderation-columns-v29{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.plugin-locked-v29{display:grid;gap:14px;}
.plugin-grid-v29{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.plugin-grid-v29 article{padding:14px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);}
.plugin-grid-v29 small{display:inline-block;border-radius:999px;padding:5px 8px;background:rgba(255,255,255,.08);font-weight:1000;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.58);font-style:normal;}
.plugin-grid-v29 strong{display:block;margin:10px 0 6px;font-size:1.05rem;}
.plugin-grid-v29 span{color:rgba(255,255,255,.65);font-weight:800;line-height:1.45;}
.guild-unsaved-bar-v29{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:99990;width:min(760px,calc(100% - 28px));display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:12px 14px 12px 18px;border-radius:14px;background:#3b3d45;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 60px rgba(0,0,0,.45);color:#fff;}
.guild-unsaved-bar-v29[hidden]{display:none!important;}
.guild-unsaved-bar-v29 strong{font-size:.98rem;}
.guild-unsaved-bar-v29 span{color:rgba(255,255,255,.62);font-size:.86rem;font-weight:750;}
.guild-unsaved-bar-v29 .btn{min-height:42px;padding:0 16px;}
.guild-unsaved-bar-v29 .btn-primary{background:linear-gradient(135deg,#119b5b,#20c775);box-shadow:none;}
.sudoku-head-actions-v29{display:flex;align-items:center;gap:10px;}
.sudoku-replay-btn-v29 svg path,.sudoku-replay-btn-v29 svg circle{fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;}

.stats-section-v29{border-radius:28px;padding:22px;background:linear-gradient(135deg,rgba(35,22,72,.78),rgba(7,20,39,.72));border:1px solid rgba(139,92,246,.32);box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);}
.stats-section-head-v29 h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1;margin:8px 0;letter-spacing:-.04em;background:linear-gradient(90deg,#fff,#dbcfff 55%,#8edcff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stats-section-head-v29 p{margin:0 0 16px;color:rgba(255,255,255,.68);font-weight:850;}
.stats-big-grid-v29{margin:14px 0 18px;}
.stats-accordion-list-v29{display:grid;gap:10px;}
.stats-accordion-v29{border-radius:18px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);overflow:hidden;}
.stats-accordion-head-v29{appearance:none;width:100%;border:0;background:transparent;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:15px 16px;cursor:pointer;}
.stats-accordion-head-v29 strong{display:block;font-size:1.05rem;}
.stats-accordion-head-v29 small{display:block;margin-top:4px;color:rgba(255,255,255,.58);font-weight:850;}
.stats-accordion-head-v29 b{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);}
.stats-accordion-head-v29.is-open b{background:linear-gradient(135deg,#7445ff,#2da8ff);}
.stats-accordion-body-v29{padding:0 16px 16px;display:grid;gap:8px;}
.stat-row-v29{border-radius:14px;}
.stats-xp-orb-v29 span{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;}

/* Wordle under-development modal inherits game help bubble */
.game-help-card{max-height:min(760px,calc(100vh - 52px));overflow:auto;}

/* Mobile / phone layout */
@media (max-width: 760px){
  body{overflow-x:hidden;}
  .unified-topbar{width:calc(100% - 18px)!important;left:9px!important;right:9px!important;top:8px!important;transform:none!important;border-radius:22px!important;padding:8px!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
  .unified-brand{min-width:0;}
  .unified-brand-logo{width:42px;height:42px;}
  .unified-brand strong{font-size:.98rem;}
  .unified-brand small{font-size:.62rem;}
  .unified-nav{display:flex!important;gap:6px!important;overflow-x:auto!important;white-space:nowrap!important;padding-bottom:2px!important;}
  .unified-nav a,.unified-nav button{padding:9px 12px!important;border-radius:14px!important;font-size:.86rem!important;flex:0 0 auto;}
  .portal-home main,.games-shell,.portal-dashboard-v25,.portal-stats-v22,.profile-shell-v22,.portal-about-v14{width:calc(100% - 20px)!important;margin-left:auto!important;margin-right:auto!important;padding-top:112px!important;}
  .portal-panel,.portal-home-hero,.about-hero-v14,.stats-hero-v22,.profile-hero-v22,.games-panel{border-radius:24px!important;padding:22px!important;}
  .portal-home-hero h1,.about-hero-v14 h1,.games-panel h1,.stats-hero-v22 h1{font-size:clamp(2.2rem,15vw,4rem)!important;line-height:.98!important;}
  .portal-card-grid,.games-grid,.stats-columns-v22,.profile-grid-v22,.dashboard-page-v29 .dashboard-console-v25,.dashboard-page-v29 .setup-section-tabs-v29,.commands-grid-v29,.moderation-columns-v29,.plugin-grid-v29{grid-template-columns:1fr!important;}
  .dashboard-page-v29 .portal-dashboard-v25.dashboard-v29{width:calc(100% - 20px)!important;padding-top:112px!important;}
  .dashboard-section-head-v29,.selected-server-action-card-v29,.server-card-v29,.setup-main-head-v29{grid-template-columns:1fr!important;}
  .dashboard-invite-inside-v29{width:100%;min-width:0;}
  .guild-unsaved-bar-v29{grid-template-columns:1fr 1fr;bottom:10px;border-radius:18px;}
  .guild-unsaved-bar-v29 strong,.guild-unsaved-bar-v29 span{grid-column:1/-1;}
  .sudoku-layout,.game-stage,.sudoku-game-wrap{grid-template-columns:1fr!important;}
  .sidebox{width:100%!important;}
  .sudoku-grid.big{max-width:calc(100vw - 28px)!important;}
}
@media (max-width: 420px){
  .portal-home-hero h1,.about-hero-v14 h1,.games-panel h1,.stats-hero-v22 h1{font-size:2.45rem!important;}
  .unified-nav a,.unified-nav button{font-size:.78rem!important;padding:8px 10px!important;}
}

/* ---------------- v30 requested polish ---------------- */
/* Dashboard back to a centered server-first layout */
.dashboard-page-v29 .portal-dashboard-v25.dashboard-v29{
  width:min(1180px, calc(100% - 44px)) !important;
  padding-top:28px !important;
}
.dashboard-page-v29 .dashboard-console-v25{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
}
.dashboard-page-v29 .dashboard-left-v25{
  width:100% !important;
  max-width:980px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.dashboard-page-v29 .dashboard-user-card-v25{display:none !important;}
.dashboard-page-v29 .dashboard-server-list-v25,
.dashboard-page-v29 .dashboard-right-v25{
  width:100% !important;
  border-radius:24px !important;
}
.dashboard-page-v29 .dashboard-right-v25{
  max-width:1180px !important;
  margin:0 auto !important;
  min-height:auto !important;
  overflow:visible !important;
}
.dashboard-page-v29 .dashboard-section-head-v29{
  padding:18px 18px !important;
  border-radius:22px !important;
}
.dashboard-page-v29 .dashboard-section-head-v29 h2{
  font-size:clamp(1.75rem,3.2vw,2.6rem) !important;
}
.dashboard-page-v29 .dashboard-invite-inside-v29{
  min-width:190px !important;
}

/* Clickable setup tabs: count + consistent eye icon on the right */
.setup-section-tabs-v30 button{
  display:grid !important;
  grid-template-columns:1fr auto 38px !important;
  align-items:center !important;
  gap:10px !important;
  min-height:64px !important;
  padding:10px 12px !important;
}
.setup-section-tabs-v30 button span{
  color:rgba(255,255,255,.74) !important;
  text-transform:uppercase !important;
  letter-spacing:.09em !important;
  font-size:.68rem !important;
  font-weight:1000 !important;
}
.setup-section-tabs-v30 button b{
  grid-column:auto !important;
  margin:0 !important;
  min-width:34px !important;
  height:34px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  font-size:.95rem !important;
  color:#fff !important;
}
.setup-section-tabs-v30 button i{
  width:38px !important;
  height:38px !important;
  border-radius:14px !important;
  display:grid !important;
  place-items:center !important;
  color:#9bdcff !important;
  background:linear-gradient(135deg,rgba(116,69,255,.34),rgba(45,168,255,.20)) !important;
  box-shadow:0 10px 26px rgba(57,151,255,.18) !important;
}
.setup-section-tabs-v30 button i svg{width:20px;height:20px;display:block;}
.setup-section-tabs-v30 button[disabled] i{color:rgba(255,255,255,.38)!important;background:rgba(255,255,255,.05)!important;}
.setup-section-tabs-v30 button[disabled] b{color:rgba(255,255,255,.44)!important;}

/* Small thematic unsaved bubble instead of the giant Discord-style bar */
.guild-unsaved-bar-v30{
  width:auto !important;
  min-width:min(470px, calc(100% - 28px)) !important;
  max-width:560px !important;
  left:50% !important;
  bottom:20px !important;
  transform:translateX(-50%) !important;
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  gap:10px !important;
  align-items:center !important;
  padding:10px !important;
  border-radius:22px !important;
  border:1px solid rgba(125,211,252,.26) !important;
  background:linear-gradient(135deg,rgba(35,22,72,.92),rgba(7,20,39,.92)) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.guild-unsaved-bar-v30 strong{
  font-size:.9rem !important;
  color:#fff !important;
  text-align:center !important;
  white-space:nowrap !important;
}
.guild-unsaved-bar-v30 span{display:none !important;}
.guild-unsaved-bar-v30 .btn{
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:15px !important;
  font-size:.86rem !important;
}
.guild-unsaved-bar-v30 .btn-primary{
  background:linear-gradient(135deg,#7246ff,#29a8ff) !important;
  box-shadow:0 14px 40px rgba(58,142,255,.18) !important;
}
.guild-unsaved-bar-v30 .btn-ghost{
  background:rgba(255,255,255,.045) !important;
}

/* Stats v30: compact, click-based, no stretched interaction column */
.portal-stats-v22{width:min(1060px, calc(100% - 42px)) !important;}
.stats-columns-v22{display:grid !important;grid-template-columns:1fr !important;gap:16px !important;}
.stats-section-v30{padding:18px !important;border-radius:24px !important;}
.stats-section-head-v30 h2{font-size:clamp(1.55rem,3vw,2.35rem) !important;margin:6px 0 !important;}
.stats-section-head-v30 p{margin-bottom:12px !important;}
.stats-summary-strip-v30{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 14px;}
.stats-summary-strip-v30 div{border:1px solid rgba(255,255,255,.09);border-radius:17px;background:rgba(255,255,255,.045);padding:13px;}
.stats-summary-strip-v30 b{display:block;color:#fff;font-size:1.35rem;line-height:1;}
.stats-summary-strip-v30 span{display:block;margin-top:5px;color:rgba(255,255,255,.58);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;}
.stats-summary-strip-small-v30 div{padding:11px 12px;}
.stats-accordion-v30{border-radius:16px !important;}
.stats-accordion-head-v30{padding:13px 14px !important;}
.stats-accordion-head-v30 b{font-size:1.15rem !important;}
.stats-accordion-body-v30{grid-template-columns:repeat(2,minmax(0,1fr));}
.stat-row-v30{display:grid !important;grid-template-columns:1fr auto !important;align-items:center !important;gap:8px !important;padding:12px !important;}
.stat-row-v30 small{grid-column:1/-1;}

@media (max-width:900px){
  .dashboard-page-v29 .portal-dashboard-v25.dashboard-v29{width:calc(100% - 20px)!important;padding-top:112px!important;}
  .dashboard-page-v29 .dashboard-section-head-v29{grid-template-columns:1fr !important;}
  .dashboard-page-v29 .dashboard-invite-inside-v29{width:100% !important;}
  .setup-section-tabs-v30{grid-template-columns:1fr !important;}
  .stats-summary-strip-v30,.stats-accordion-body-v30{grid-template-columns:1fr 1fr !important;}
  .guild-unsaved-bar-v30{grid-template-columns:1fr 1fr !important;min-width:calc(100% - 20px)!important;}
  .guild-unsaved-bar-v30 strong{grid-column:1/-1;order:-1;}
}
@media (max-width:520px){
  .stats-summary-strip-v30,.stats-accordion-body-v30{grid-template-columns:1fr !important;}
}


/* ---------------- v31 focused dashboard/stats fixes ---------------- */
.dashboard-page-v31 .portal-dashboard-v25.dashboard-v31{
  width:min(1060px, calc(100% - 44px)) !important;
  margin:0 auto 80px !important;
  padding-top:40px !important;
  position:relative;
  z-index:2;
}
.dashboard-page-v31 .dashboard-title-v25,
.dashboard-page-v31 .dashboard-user-card-v25{display:none!important;}
.dashboard-page-v31 .dashboard-console-v25{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
  align-items:start !important;
}
.dashboard-page-v31 .dashboard-left-v25{
  width:min(920px,100%) !important;
  max-width:920px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.dashboard-page-v31 .dashboard-server-list-v25,
.dashboard-page-v31 .dashboard-right-v25{
  width:100% !important;
  max-width:920px !important;
  margin:0 auto !important;
  border-radius:26px !important;
  padding:18px !important;
  background:linear-gradient(135deg,rgba(30,18,64,.82),rgba(7,20,38,.76)) !important;
  border:1px solid rgba(139,92,246,.34) !important;
  box-shadow:0 20px 58px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow:visible !important;
}
.dashboard-page-v31 .dashboard-right-v25[hidden],
.dashboard-page-v31 .dashboard-server-list-v25[hidden]{display:none!important;}
.dashboard-page-v31 .dashboard-section-head-v29{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:18px !important;
  padding:0 !important;
  margin:0 0 16px !important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.dashboard-page-v31 .dashboard-section-head-v29 h2{
  font-size:clamp(2.1rem,4vw,3.4rem) !important;
  line-height:.95 !important;
  margin:10px 0 8px !important;
}
.dashboard-page-v31 .dashboard-section-head-v29 p{
  max-width:620px !important;
  font-size:1rem !important;
}
.dashboard-page-v31 .dashboard-invite-inside-v29{
  min-width:210px !important;
  width:auto !important;
  justify-content:center !important;
}
.dashboard-page-v31 .server-card-stack-v29{display:grid!important;gap:12px!important;}
.dashboard-page-v31 .server-card-v29{
  min-height:86px !important;
  border-radius:20px!important;
  padding:14px 16px!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
}
.dashboard-page-v31 .selected-server-action-card-v29{
  max-width:920px !important;
  margin:12px auto 0!important;
  border-radius:20px!important;
}
.dashboard-page-v31.dashboard-setup-open-v27 .dashboard-console-v25{display:block!important;}
.dashboard-page-v31.dashboard-setup-open-v27 .dashboard-right-v25{max-width:980px!important;}
.dashboard-page-v31 .setup-main-head-v29 h2{font-size:clamp(2rem,4vw,3.2rem)!important;}

/* Centered vertical setup section picker */
.dashboard-page-v31 .setup-section-tabs-v31{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  max-width:760px!important;
  margin:16px auto!important;
}
.dashboard-page-v31 .setup-section-tabs-v31 button{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 54px 48px!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  min-height:64px!important;
  padding:12px 14px!important;
  border-radius:20px!important;
  text-align:left!important;
  overflow:hidden!important;
}
.dashboard-page-v31 .setup-section-tabs-v31 button span{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:.78rem!important;
  letter-spacing:.1em!important;
  color:rgba(255,255,255,.8)!important;
}
.dashboard-page-v31 .setup-section-tabs-v31 button b{
  grid-column:auto!important;
  margin:0!important;
  justify-self:center!important;
  min-width:42px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  color:#fff!important;
  font-size:1rem!important;
}
.dashboard-page-v31 .setup-section-tabs-v31 button i{
  justify-self:end!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:16px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,rgba(116,69,255,.38),rgba(45,168,255,.24))!important;
  color:#9bdcff!important;
  box-shadow:0 10px 26px rgba(57,151,255,.18)!important;
}
.dashboard-page-v31 .setup-section-tabs-v31 button i svg{width:20px!important;height:20px!important;display:block!important;}
.dashboard-page-v31 .setup-section-tabs-v31 button[disabled]{opacity:.44!important;cursor:not-allowed!important;}
.dashboard-page-v31 .setup-section-content-v31{max-width:920px!important;margin:0 auto!important;}

/* Smaller floating save bubble */
.dashboard-page-v31 .guild-unsaved-bar-v30{
  width:min(520px, calc(100% - 26px))!important;
  min-width:0!important;
  grid-template-columns:auto 1fr auto!important;
  bottom:18px!important;
  padding:9px 10px!important;
  border-radius:20px!important;
}
.dashboard-page-v31 .guild-unsaved-bar-v30 strong{font-size:.88rem!important;}
.dashboard-page-v31 .guild-unsaved-bar-v30 .btn{min-height:36px!important;border-radius:14px!important;padding:0 13px!important;}

/* Stats accordions must actually collapse; previous display:grid overrode [hidden]. */
.stats-accordion-body-v29[hidden],
.stats-accordion-body-v30[hidden]{display:none!important;}
.stats-accordion-head-v30 b{user-select:none;}
.stats-section-compact-v30{max-width:100%!important;}

@media (max-width:900px){
  .dashboard-page-v31 .portal-dashboard-v25.dashboard-v31{width:calc(100% - 22px)!important;padding-top:112px!important;}
  .dashboard-page-v31 .dashboard-section-head-v29{grid-template-columns:1fr!important;}
  .dashboard-page-v31 .dashboard-invite-inside-v29{width:100%!important;}
  .dashboard-page-v31 .server-card-v29{grid-template-columns:auto 1fr!important;}
  .dashboard-page-v31 .server-card-stats-v25{grid-column:1/-1;justify-self:stretch;text-align:center;}
}
@media (max-width:520px){
  .dashboard-page-v31 .setup-section-tabs-v31 button{grid-template-columns:1fr 44px 42px!important;}
}


/* v32: setup accordion content opens directly under clicked section */
.dashboard-page-v32 .setup-section-placeholder-v32{
  max-width:760px!important;
  margin:10px auto 0!important;
}
.dashboard-page-v32 .setup-section-tabs-v31{
  max-width:820px!important;
}
.dashboard-page-v32 .setup-section-tabs-v31 button.is-active{
  border-color:rgba(101,180,255,.55)!important;
  background:linear-gradient(135deg,rgba(116,69,255,.22),rgba(38,160,255,.13))!important;
}
.dashboard-page-v32 .setup-section-inline-v32{
  width:100%!important;
  max-width:820px!important;
  margin:-2px 0 12px!important;
  padding:0!important;
  animation:setupInlinePopV32 .18s ease-out;
}
.dashboard-page-v32 .setup-section-tabs-v31 > .setup-section-inline-v32{
  display:block!important;
}
.dashboard-page-v32 .setup-section-inline-v32 .setup-card-v25{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  border-radius:20px!important;
  border-top-color:rgba(99,168,255,.34)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.22)!important;
}
@keyframes setupInlinePopV32{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
@media (max-width:720px){
  .dashboard-page-v32 .setup-section-inline-v32{max-width:100%!important;}
}


/* ---------------- v33 dashboard center restore ---------------- */
.dashboard-page-v33 .portal-dashboard-v25.dashboard-v33{
  width:min(1060px, calc(100% - 44px)) !important;
  margin:0 auto 80px !important;
  padding-top:40px !important;
  position:relative !important;
  z-index:2 !important;
}
.dashboard-page-v33 .dashboard-title-v25,
.dashboard-page-v33 .dashboard-user-card-v25{display:none!important;}
.dashboard-page-v33 .dashboard-console-v25{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
  align-items:start !important;
  justify-items:center !important;
}
.dashboard-page-v33 .dashboard-left-v25{
  width:min(920px,100%) !important;
  max-width:920px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.dashboard-page-v33 .dashboard-server-list-v25,
.dashboard-page-v33 .dashboard-right-v25{
  width:100% !important;
  max-width:920px !important;
  margin:0 auto !important;
  border-radius:26px !important;
  padding:18px !important;
  background:linear-gradient(135deg,rgba(30,18,64,.82),rgba(7,20,38,.76)) !important;
  border:1px solid rgba(139,92,246,.34) !important;
  box-shadow:0 20px 58px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow:visible !important;
}
.dashboard-page-v33 .dashboard-right-v25[hidden],
.dashboard-page-v33 .dashboard-server-list-v25[hidden]{display:none!important;}
.dashboard-page-v33 .dashboard-section-head-v29{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:18px !important;
  padding:0 !important;
  margin:0 0 16px !important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.dashboard-page-v33 .dashboard-section-head-v29 h2{
  font-size:clamp(2.1rem,4vw,3.4rem) !important;
  line-height:.95 !important;
  margin:10px 0 8px !important;
}
.dashboard-page-v33 .dashboard-section-head-v29 p{max-width:620px!important;font-size:1rem!important;}
.dashboard-page-v33 .dashboard-invite-inside-v29{min-width:210px!important;width:auto!important;justify-content:center!important;}
.dashboard-page-v33 .server-card-stack-v29{display:grid!important;gap:12px!important;}
.dashboard-page-v33 .server-card-v29{min-height:86px!important;border-radius:20px!important;padding:14px 16px!important;grid-template-columns:auto minmax(0,1fr) auto!important;}
.dashboard-page-v33 .selected-server-action-card-v29{max-width:920px!important;margin:12px auto 0!important;border-radius:20px!important;}
.dashboard-page-v33.dashboard-setup-open-v27 .dashboard-console-v25{display:block!important;}
.dashboard-page-v33.dashboard-setup-open-v27 .dashboard-right-v25{max-width:920px!important;width:100%!important;margin:0 auto!important;}
.dashboard-page-v33 .setup-section-tabs-v31{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;max-width:760px!important;margin:16px auto!important;}
.dashboard-page-v33 .setup-section-tabs-v31 button{display:grid!important;grid-template-columns:minmax(0,1fr) 54px 48px!important;align-items:center!important;gap:12px!important;width:100%!important;min-height:64px!important;padding:12px 14px!important;border-radius:20px!important;text-align:left!important;overflow:hidden!important;}
.dashboard-page-v33 .setup-section-tabs-v31 button span{display:block!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;font-size:.78rem!important;letter-spacing:.1em!important;color:rgba(255,255,255,.8)!important;}
.dashboard-page-v33 .setup-section-tabs-v31 button b{grid-column:auto!important;margin:0!important;justify-self:center!important;min-width:42px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:15px!important;background:rgba(255,255,255,.075)!important;border:1px solid rgba(255,255,255,.09)!important;color:#fff!important;font-size:1rem!important;}
.dashboard-page-v33 .setup-section-tabs-v31 button i{justify-self:end!important;width:42px!important;height:42px!important;min-width:42px!important;border-radius:16px!important;display:grid!important;place-items:center!important;background:linear-gradient(135deg,rgba(116,69,255,.38),rgba(45,168,255,.24))!important;color:#9bdcff!important;box-shadow:0 10px 26px rgba(57,151,255,.18)!important;}
.dashboard-page-v33 .setup-section-tabs-v31 button i svg{width:20px!important;height:20px!important;display:block!important;}
.dashboard-page-v33 .setup-section-inline-v32{width:100%!important;max-width:760px!important;margin:-2px auto 12px!important;padding:0!important;}
.dashboard-page-v33 .setup-section-inline-v32 .setup-card-v25{width:100%!important;max-width:100%!important;margin:0!important;border-radius:20px!important;}
.dashboard-page-v33 .setup-section-placeholder-v32{max-width:760px!important;margin:10px auto 0!important;}
@media (max-width:900px){
  .dashboard-page-v33 .portal-dashboard-v25.dashboard-v33{width:calc(100% - 22px)!important;padding-top:112px!important;}
  .dashboard-page-v33 .dashboard-section-head-v29{grid-template-columns:1fr!important;}
  .dashboard-page-v33 .dashboard-invite-inside-v29{width:100%!important;}
}

/* v34 dashboard/feedback polish */
.portal-under-dev-card-v34{max-width:760px;margin-inline:auto;text-align:left;}
.dashboard-page-v33 .setup-section-placeholder-v32[hidden]{display:none!important;}
.dashboard-page-v33 .setup-section-inline-v32[data-section]{display:block!important;}

/* Profile v35 — linked providers + Discord bot gate */
.profile-hero-v35{
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(88,101,242,.24), transparent 64%),
    radial-gradient(560px 240px at 92% 18%, rgba(35,242,154,.14), transparent 66%),
    linear-gradient(135deg, rgba(28,14,62,.82), rgba(5,22,38,.72));
}
.profile-hero-v35::after{
  content:"";
  position:absolute;
  right:-70px;
  top:-100px;
  width:260px;
  height:260px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(circle, rgba(125,211,252,.16), transparent 67%);
  pointer-events:none;
}
.profile-grid-v35{
  grid-template-columns:minmax(0, 1.18fr) minmax(300px, .82fr);
}
.profile-linked-card-v35{
  grid-column:1 / -1;
  overflow:hidden;
  position:relative;
}
.profile-linked-card-v35::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, rgba(88,101,242,.08), transparent 34%, rgba(35,242,154,.05));
  pointer-events:none;
}
.profile-linked-card-v35 > *{ position:relative; z-index:1; }
.profile-provider-grid-v35{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}
.profile-provider-card-v35{
  min-height:210px;
  align-items:stretch;
  flex-direction:column;
  justify-content:space-between;
  padding:18px;
  border-radius:26px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(260px 130px at 16% 0%, rgba(132,76,255,.20), transparent 66%),
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(8,21,36,.55));
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.profile-provider-card-v35:hover{
  transform:translateY(-2px);
  border-color:rgba(125,211,252,.38);
  box-shadow:0 18px 58px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}
.profile-provider-card-v35.is-linked{
  border-color:rgba(35,242,154,.38);
  box-shadow:inset 0 0 0 1px rgba(35,242,154,.10), 0 18px 58px rgba(0,0,0,.18);
}
.profile-provider-card-v35.is-missing{
  border-color:rgba(255,255,255,.12);
}
.profile-provider-card-v35.is-discord-provider-v35{
  background:
    radial-gradient(260px 130px at 16% 0%, rgba(88,101,242,.30), transparent 66%),
    linear-gradient(145deg, rgba(88,101,242,.13), rgba(8,21,36,.58));
}
.profile-provider-card-v35 .provider-left-v26{
  align-items:flex-start;
}
.provider-copy-v35{
  display:grid;
  gap:5px;
  min-width:0;
}
.provider-copy-v35 strong{
  font-size:1.22rem;
  letter-spacing:-.02em;
}
.provider-copy-v35 small{
  white-space:normal;
  max-width:none;
  line-height:1.35;
}
.provider-copy-v35 em{
  color:rgba(245,240,255,.58);
  font-style:normal;
  font-weight:760;
  font-size:.86rem;
  line-height:1.42;
}
.provider-status-v35{
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.055);
  font-size:.68rem;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.provider-status-v35::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.34);
}
.provider-status-v35.is-on{
  border-color:rgba(35,242,154,.28);
  color:#d8ffec;
  background:rgba(35,242,154,.09);
}
.provider-status-v35.is-on::before{ background:#35f29a; box-shadow:0 0 12px rgba(35,242,154,.65); }
.provider-status-v35.is-off{
  border-color:rgba(255,188,66,.20);
  color:#ffe4ad;
  background:rgba(255,188,66,.075);
}
.provider-status-v35.is-off::before{ background:#ffbc42; box-shadow:0 0 12px rgba(255,188,66,.45); }
.provider-actions-v35{
  justify-content:flex-start;
  margin-top:12px;
}
.provider-actions-v35 .btn[disabled]{
  cursor:not-allowed;
  opacity:.48;
  transform:none!important;
}
.profile-bot-gate-v35{
  min-height:220px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(420px 180px at 5% 0%, rgba(88,101,242,.22), transparent 65%),
    linear-gradient(135deg, rgba(20,11,46,.82), rgba(6,27,42,.74));
}
.profile-bot-gate-v35::after{
  content:"";
  position:absolute;
  right:-42px;
  bottom:-52px;
  width:170px;
  height:170px;
  border-radius:54px;
  transform:rotate(18deg);
  background:linear-gradient(135deg, rgba(88,101,242,.20), rgba(45,168,255,.08));
  border:1px solid rgba(255,255,255,.08);
}
.profile-bot-gate-v35 > *{ position:relative; z-index:1; }
.bot-gate-head-v35{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.bot-gate-pill-v35{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.78);
  font-size:.74rem;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.profile-bot-gate-v35.is-unlocked .bot-gate-pill-v35{
  border-color:rgba(35,242,154,.30);
  background:rgba(35,242,154,.10);
  color:#d8ffec;
}
.profile-bot-gate-v35.is-locked .bot-gate-pill-v35{
  border-color:rgba(255,188,66,.24);
  background:rgba(255,188,66,.08);
  color:#ffe4ad;
}
.profile-bot-gate-v35 p,
.profile-actions-card-v35 p{
  color:rgba(245,240,255,.66);
  font-weight:780;
  line-height:1.55;
  margin:0 0 16px;
}
.profile-actions-card-v35{
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(14,18,35,.55));
}
.profile-actions-card-v35 .profile-actions-v22 .btn{
  justify-content:center;
}
@media (max-width: 980px){
  .profile-grid-v35,
  .profile-provider-grid-v35{ grid-template-columns:1fr; }
  .profile-linked-card-v35{ grid-column:auto; }
  .profile-provider-card-v35{ min-height:auto; }
}
@media (max-width: 640px){
  .profile-provider-card-v35 .provider-left-v26{ flex-direction:row; }
  .bot-gate-head-v35{ align-items:flex-start; flex-direction:column; }
}