/* THE GRID // THE DAILY SUDOKU (static/js/games/grid.js). BruNet's holo look: a dark stage, the board as a lit
   instrument, givens in holo cyan, your digits in amber. No backdrop-filter, no looping animation. */
.gd-root { --ac: var(--holo, #4fe3ff); --aa: var(--amber, #ffb020); }
.gd-stage { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid rgba(79, 227, 255, .35); border-radius: 10px;
  background: radial-gradient(120% 80% at 50% 0%, #0a1424 0%, #03060d 70%); box-shadow: 0 0 40px rgba(79, 227, 255, .06) inset; font-family: var(--mono); }

/* HUD */
.gd-hud { display: flex; justify-content: space-between; align-items: stretch; gap: 8px; }
.gd-g, .gd-lv { padding: 6px 12px 7px; background: rgba(4, 10, 20, .82); border: 1px solid rgba(79, 227, 255, .45);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.gd-g { min-width: 84px; } .gd-g.r { text-align: right; }
.gd-hud small { display: block; font-size: 9px; letter-spacing: .3em; color: rgba(160, 210, 235, .7); }
.gd-g b { font-size: 20px; color: var(--aa); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(255, 176, 32, .45); }
.gd-g.r b { color: var(--ac); text-shadow: 0 0 10px rgba(79, 227, 255, .45); }
.gd-g em { display: block; font-style: normal; font-size: 10px; letter-spacing: .15em; color: rgba(160, 210, 235, .75); }
.gd-lv { flex: 1; text-align: center; }
.gd-lv b { display: block; font-size: 16px; letter-spacing: .25em; color: #e8f6ff; }
.gd-lv span { display: inline-flex; gap: 4px; margin-top: 3px; }
.gd-lv span i { width: 14px; height: 4px; background: rgba(79, 227, 255, .18); }
.gd-lv span i.on { background: var(--ac); box-shadow: 0 0 6px var(--ac); }
.gd-lv.lv4 span i.on, .gd-lv.lv5 span i.on { background: var(--aa); box-shadow: 0 0 6px var(--aa); }
.gd-lv.lv5 b { color: var(--aa); }

/* layout */
.gd-main { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
@media (max-width: 820px) { .gd-main { grid-template-columns: 1fr; } }

/* the lobby */
.gd-lobby { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 360px; text-align: center; padding: 18px; }
.gd-lead { max-width: 440px; color: #cfe8f5; line-height: 1.5; margin: 0; }
.gd-go { font: 700 15px var(--mono) !important; letter-spacing: .3em; padding: 14px 26px; color: #03060d; background: var(--aa); border: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); cursor: pointer; box-shadow: 0 0 24px rgba(255, 176, 32, .35); }
.gd-rules { font-size: 11px; letter-spacing: .08em; color: rgba(160, 210, 235, .7); margin: 0; }
.gd-rec { font-size: 11px; letter-spacing: .2em; color: var(--aa); margin: 0; }

/* the board */
.gd-play { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gd-board { --cell: min(9.6vw, 50px); display: grid; grid-template-columns: repeat(9, var(--cell)); grid-template-rows: repeat(9, var(--cell));
  border: 2px solid rgba(79, 227, 255, .75); box-shadow: 0 0 22px rgba(79, 227, 255, .14), 0 0 0 1px #03060d inset; background: #050b16; user-select: none; touch-action: manipulation; }
.gd-c { position: relative; padding: 0; margin: 0; border: 0; border-right: 1px solid rgba(79, 227, 255, .16); border-bottom: 1px solid rgba(79, 227, 255, .16);
  background: transparent; color: var(--aa); font: 600 calc(var(--cell) * .52) var(--mono) !important; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gd-c:nth-child(9n) { border-right: 0; }
.gd-c:nth-last-child(-n+9) { border-bottom: 0; }
.gd-c.br { border-right: 2px solid rgba(79, 227, 255, .85); }
.gd-c.bb { border-bottom: 2px solid rgba(79, 227, 255, .85); }
.gd-c.given { color: #bfefff; text-shadow: 0 0 8px rgba(79, 227, 255, .45); cursor: default; }
.gd-c.hint { color: #9cffc9; }
.gd-c.near { background: rgba(79, 227, 255, .06); }
.gd-c.same { background: rgba(255, 176, 32, .12); }
.gd-c.sel { background: rgba(255, 176, 32, .24); box-shadow: 0 0 0 2px var(--aa) inset; }
.gd-c.bad { color: var(--alert, #ff5a4a); background: rgba(255, 90, 74, .14); }
.gd-c b { font-weight: inherit; position: relative; z-index: 1; }
.gd-pm { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.gd-pm i { font: 500 calc(var(--cell) * .2) var(--mono); font-style: normal; color: rgba(160, 210, 235, .8); display: flex; align-items: center; justify-content: center; }
.killer .gd-pm { inset: calc(var(--cell) * .22) 3px 3px; }
.gd-cage { position: absolute; inset: 3px; pointer-events: none; border: 1.5px dashed transparent; }
.gd-cage.t { border-top-color: rgba(255, 176, 32, .9); } .gd-cage.b { border-bottom-color: rgba(255, 176, 32, .9); }
.gd-cage.l { border-left-color: rgba(255, 176, 32, .9); } .gd-cage.r { border-right-color: rgba(255, 176, 32, .9); }
.gd-cage:not(.t) { top: -1px; } .gd-cage:not(.b) { bottom: -1px; } .gd-cage:not(.l) { left: -1px; } .gd-cage:not(.r) { right: -1px; }
.gd-sum { position: absolute; top: 2px; left: 4px; font: 700 calc(var(--cell) * .2) var(--mono); font-style: normal; color: var(--aa); background: #050b16; padding: 0 1px; line-height: 1; z-index: 2; }

/* the pad */
.gd-pad { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; width: min(100%, calc(9 * min(9.6vw, 50px) + 4px)); }
.gd-pad button, .gd-tools button { font: 700 18px var(--mono) !important; padding: 10px 0; color: #e8f6ff; background: rgba(4, 10, 20, .85);
  border: 1px solid rgba(79, 227, 255, .45); cursor: pointer; }
.gd-pad button:active, .gd-tools button:active { background: rgba(79, 227, 255, .2); }
.gd-pad button.w { font-size: 10px !important; letter-spacing: .1em; }
.gd-pad button.out { opacity: .3; }
.gd-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: min(100%, calc(9 * min(9.6vw, 50px) + 4px)); }
.gd-tools button { flex: 1 1 30%; font-size: 11px !important; letter-spacing: .12em; padding: 9px 4px; }
.gd-tools button.on { color: #03060d; background: var(--ac); border-color: var(--ac); }
.gd-tools .gd-sub { color: #03060d; background: var(--aa); border-color: var(--aa); }
@media (max-width: 520px) { .gd-pad { grid-template-columns: repeat(5, 1fr); } .gd-pad button { font-size: 20px !important; padding: 12px 0; } }

/* done */
.gd-result { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 26px; border: 1px solid var(--aa);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); background: rgba(255, 176, 32, .08); }
.gd-result b { letter-spacing: .4em; color: var(--aa); }
.gd-result span { font-size: 28px; color: #e8f6ff; font-variant-numeric: tabular-nums; }
.gd-result small { font-size: 10px; letter-spacing: .2em; color: rgba(160, 210, 235, .75); }
.gd-play.done .gd-c { cursor: default; }

/* the side */
.gd-side { display: flex; flex-direction: column; gap: 10px; }
.gd-card { padding: 10px 12px; background: rgba(4, 10, 20, .7); border: 1px solid rgba(79, 227, 255, .3); }
.gd-h { font-size: 10px; letter-spacing: .3em; color: var(--ac); margin-bottom: 6px; }
.gd-row { display: grid; grid-template-columns: 20px 1fr auto 46px; gap: 6px; font-size: 12px; padding: 3px 0; color: #cfe8f5; border-bottom: 1px solid rgba(79, 227, 255, .08); }
.gd-row b { color: var(--aa); font-variant-numeric: tabular-nums; }
.gd-row small { font-size: 9px; letter-spacing: .1em; color: rgba(160, 210, 235, .7); text-align: right; align-self: center; }
.gd-row.me { color: var(--aa); }
.gd-empty { font-size: 11px; color: rgba(160, 210, 235, .55); }
.gd-week { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; font-size: 10px; letter-spacing: .1em; color: rgba(160, 210, 235, .7); }
.gd-week .gd-h { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .gd-stage { padding: 8px; }
  .gd-g { min-width: 0; padding: 5px 8px; }
  .gd-g b { font-size: 16px; }
  .gd-lv { padding: 5px 6px; min-width: 0; }
  .gd-lv b { font-size: 12px; letter-spacing: .12em; }
  .gd-hud small { font-size: 8px; letter-spacing: .15em; }
}
.gd-main > * { min-width: 0; }