/* NVIDIAddict — Sectors, a daily grouping puzzle (2026-10-03). Every rule is scoped under .ag-sectors. */
.ag-sectors {
  --sx-gap: 8px; --sx-rh: 72px; --sx-gw: 600px;
  --sx-t0: #F08A80; --sx-t1: #F2CF62; --sx-t2: #86CF92; --sx-t3: #B3A6F0;
  --sx-band-ink: #16130F;
  --sx-tile: color-mix(in srgb, var(--ink) 8%, var(--surface));
  --sx-tile-line: color-mix(in srgb, var(--ink) 14%, var(--surface));
  --sx-tile-ink: var(--ink);
  --sx-sel: #1E2A1B; --sx-sel-ink: #F3F6EF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ag-sectors {
    --sx-t0: #E2675E; --sx-t1: #E3B83E; --sx-t2: #5FB46D; --sx-t3: #9585E2;
    --sx-tile: color-mix(in srgb, var(--ink) 11%, var(--surface));
    --sx-tile-line: color-mix(in srgb, var(--ink) 16%, var(--surface));
    --sx-sel: #E6ECE2; --sx-sel-ink: #0B0F0C;
  }
}
:root[data-theme="dark"] .ag-sectors {
  --sx-t0: #E2675E; --sx-t1: #E3B83E; --sx-t2: #5FB46D; --sx-t3: #9585E2;
  --sx-tile: color-mix(in srgb, var(--ink) 11%, var(--surface));
  --sx-tile-line: color-mix(in srgb, var(--ink) 16%, var(--surface));
  --sx-sel: #E6ECE2; --sx-sel-ink: #0B0F0C;
}

.ag-sectors .sx { display: grid; gap: 22px; min-width: 0; }
.ag-sectors .sx-play { position: relative; display: grid; gap: 8px; justify-items: center; min-width: 0; }
.ag-sectors .sx-play > * { width: min(100%, var(--sx-gw)); }

/* top line: puzzle number and the way into earlier days */
.ag-sectors .sx-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.ag-sectors .sx-day { display: grid; line-height: 1.2; min-width: 0; }
.ag-sectors .sx-day b { font: 800 16px/1.15 var(--display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sectors .sx-day small { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sectors .sx-day small em { font-style: normal; color: var(--gold); }

/* buttons (own class, not .btn, so the app's generic click sound stays out of it) */
.ag-sectors .sx-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--sx-tile-line); background: var(--surface); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .08s, opacity .15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ag-sectors .sx-btn:hover:not(:disabled) { border-color: var(--muted); }
.ag-sectors .sx-btn:active:not(:disabled) { transform: scale(.97); }
.ag-sectors .sx-btn:disabled { opacity: .42; cursor: default; }
.ag-sectors .sx-btn.pri { background: var(--sx-sel); color: var(--sx-sel-ink); border-color: transparent; }
.ag-sectors .sx-btn.ghost { border-color: transparent; background: transparent; color: var(--muted); padding: 0 10px; }
.ag-sectors .sx-btn.ghost:hover { color: var(--ink); }
.ag-sectors .sx-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* the board: solved bands on top, tiles below, always four rows tall */
.ag-sectors .sx-board { position: relative; }
.ag-sectors .sx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--sx-rh); gap: var(--sx-gap); user-select: none; -webkit-user-select: none; }
.ag-sectors .sx-tile { appearance: none; position: relative; min-width: 0; height: 100%; padding: 4px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--sx-tile); color: var(--sx-tile-ink); box-shadow: inset 0 0 0 1px var(--sx-tile-line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden;
  font: 700 var(--fs, 16px)/1.05 var(--display); letter-spacing: .01em; text-transform: uppercase;
  transition: background .12s, color .12s, transform .12s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ag-sectors .sx-tile span { display: block; white-space: nowrap; }
.ag-sectors .sx-tile:active { transform: scale(.96); }
.ag-sectors .sx-tile.on { background: var(--sx-sel); color: var(--sx-sel-ink); box-shadow: none; }
.ag-sectors .sx-grid.locked .sx-tile { cursor: default; }
.ag-sectors .sx-tile.jump { animation: sx-jump .26s cubic-bezier(.3, .7, .4, 1) both; animation-delay: var(--d, 0ms); }
.ag-sectors .sx-tile.shake { animation: sx-shake .28s linear both; }
.ag-sectors .sx-grid.shuf .sx-tile { animation: sx-fade .22s ease-out both; }
@keyframes sx-jump { 40% { transform: translateY(-9px); } 100% { transform: none; } }
@keyframes sx-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes sx-fade { from { opacity: .2; transform: scale(.94); } }

.ag-sectors .sx-band { grid-column: 1 / -1; min-width: 0; height: 100%; border-radius: 10px; padding: 4px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px;
  background: var(--sx-bc); color: var(--sx-band-ink); overflow: hidden; }
.ag-sectors .sx-band b { font: 800 var(--bl, 15px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; max-width: 100%; }
.ag-sectors .sx-band span { font: 500 var(--bw, 13px)/1.2 var(--sans); max-width: 100%; text-transform: uppercase; letter-spacing: .02em; }
.ag-sectors .sx-band.new { animation: sx-pop .28s cubic-bezier(.3, .8, .35, 1.15) both; }
@keyframes sx-pop { from { opacity: 0; transform: scale(.9); } }
.ag-sectors .t0 { --sx-bc: var(--sx-t0); } .ag-sectors .t1 { --sx-bc: var(--sx-t1); } .ag-sectors .t2 { --sx-bc: var(--sx-t2); } .ag-sectors .t3 { --sx-bc: var(--sx-t3); }

/* a short message floats over the top of the board */
.ag-sectors .sx-msg { position: absolute; left: 50%; top: 10px; z-index: 3; transform: translate(-50%, -6px); opacity: 0; pointer-events: none;
  padding: 8px 16px; border-radius: 999px; background: var(--sx-sel); color: var(--sx-sel-ink); font: 700 14px var(--sans); white-space: nowrap; box-shadow: var(--shadow); transition: opacity .18s, transform .18s; }
.ag-sectors .sx-msg.show { opacity: 1; transform: translate(-50%, 0); }

/* mistakes and controls */
.ag-sectors .sx-ctrl { display: grid; gap: 8px; justify-items: center; }
.ag-sectors .sx-mist { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 13.5px; color: var(--muted); }
.ag-sectors .sx-mist i { width: 13px; height: 13px; border-radius: 50%; background: var(--ink); transition: transform .2s, opacity .2s, background .2s; }
.ag-sectors .sx-mist i.used { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sx-tile-line); }
.ag-sectors .sx-mist i.gone { animation: sx-dot .3s ease-out both; }
@keyframes sx-dot { 50% { transform: scale(1.5); } }
.ag-sectors .sx-btns { display: flex; gap: 8px; justify-content: center; width: 100%; }
.ag-sectors .sx-btns .sx-btn { flex: 1 1 0; max-width: 170px; min-height: 46px; padding: 0 10px; }

/* phone on its side and short laptops: board left, controls in a column on the right */
.ag-sectors .sx-play.side { grid-template-columns: minmax(0, var(--sx-gw)) minmax(180px, 230px); align-items: center; justify-content: center; column-gap: 18px; }
.ag-sectors .sx-play.side > * { width: auto; }
.ag-sectors .sx-play.side .sx-board { grid-column: 1; grid-row: 1 / span 2; }
.ag-sectors .sx-play.side .sx-top { grid-column: 2; grid-row: 1; align-self: end; flex-direction: column; align-items: stretch; }
.ag-sectors .sx-play.side .sx-ctrl { grid-column: 2; grid-row: 2; align-self: start; justify-items: stretch; }
.ag-sectors .sx-play.side .sx-btns { flex-direction: column; }
.ag-sectors .sx-play.side .sx-btns .sx-btn { max-width: none; flex: 0 0 auto; }
.ag-sectors .sx-play.side .sx-mist { justify-content: center; }

/* result sheet */
.ag-sectors .sx-sheet { position: absolute; inset: -4px; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 6px;
  background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: 12px; width: auto !important; }
.ag-sectors .sx-card { width: min(100%, 420px); max-height: 100%; overflow: auto; overscroll-behavior: contain; display: grid; gap: 12px; padding: 16px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); animation: sx-pop .24s ease-out both; }
.ag-sectors .sx-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ag-sectors .sx-card h4 { font: 800 22px/1.1 var(--display); margin: 0; }
.ag-sectors .sx-card .sx-sub { font: 500 12px var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; }
.ag-sectors .sx-x { appearance: none; width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; background: transparent; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; border-radius: 50%; flex: 0 0 auto; }
.ag-sectors .sx-x:hover { color: var(--ink); }
.ag-sectors .sx-squares { display: grid; justify-content: center; gap: 4px; }
.ag-sectors .sx-squares div { display: flex; gap: 4px; }
.ag-sectors .sx-squares i { width: 20px; height: 20px; border-radius: 4px; background: var(--sx-bc); }
.ag-sectors .sx-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; text-align: center; }
.ag-sectors .sx-stats b { display: block; font: 700 22px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.ag-sectors .sx-stats small { display: block; font-size: 11px; line-height: 1.2; color: var(--muted); }
.ag-sectors .sx-take { font-size: 13.5px; line-height: 1.45; color: var(--muted); border-left: 3px solid var(--sx-t2); padding-left: 10px; }
.ag-sectors .sx-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-sectors .sx-acts .sx-btn { flex: 1 1 120px; }
.ag-sectors .sx-next { text-align: center; font: 500 12px var(--mono); color: var(--muted); letter-spacing: .04em; }

/* below the fold: stats, earlier days, how it works */
.ag-sectors .sx-below { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.ag-sectors .sx-panel { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px; min-width: 0; display: grid; gap: 10px; align-content: start; }
.ag-sectors .sx-panel h3 { font: 700 16px var(--display); margin: 0; }
.ag-sectors .sx-dist { display: grid; gap: 5px; }
.ag-sectors .sx-dist div { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ag-sectors .sx-dist i { display: block; height: 18px; min-width: 22px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 14%, var(--surface)); font: 600 11px/18px var(--mono); font-style: normal; color: var(--ink); text-align: right; padding-right: 6px; }
.ag-sectors .sx-dist i.hi { background: var(--sx-t2); color: var(--sx-band-ink); }
.ag-sectors .sx-arch { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; max-height: 340px; overflow: auto; overscroll-behavior: contain; }
.ag-sectors .sx-arch button { appearance: none; display: grid; gap: 1px; min-height: 52px; padding: 8px 10px; text-align: left; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: inherit; }
.ag-sectors .sx-arch button b { font: 700 14px var(--display); }
.ag-sectors .sx-arch button small { font-size: 11.5px; color: var(--muted); }
.ag-sectors .sx-arch button.cur { border-color: var(--ink); }
.ag-sectors .sx-arch button.won small { color: var(--good); }
.ag-sectors .sx-arch button.lost small { color: var(--crit); }
.ag-sectors .sx-how { font-size: 13.5px; line-height: 1.5; color: var(--muted); display: grid; gap: 6px; }
.ag-sectors .sx-how p { margin: 0; }
.ag-sectors .sx-how .sx-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-sectors .sx-how .sx-legend span { padding: 2px 9px; border-radius: 999px; background: var(--sx-bc); color: var(--sx-band-ink); font: 600 11.5px var(--sans); }

@media (prefers-reduced-motion: reduce) {
  .ag-sectors .sx-tile, .ag-sectors .sx-band, .ag-sectors .sx-card, .ag-sectors .sx-msg, .ag-sectors .sx-mist i { animation: none !important; transition: none !important; }
}