/* =============================================================
   GAME: Skyscrapers
   ============================================================= */
.board-skyscrapers {
  --sk-glow: #f35cff;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.sk-grid {
  --cell: min(calc((100vw - 84px) / (var(--n, 6) + 1.3)), 54px);
  --clue: calc(var(--cell) * .65);
  display: grid; gap: 2px;
  grid-template-columns: var(--clue) repeat(var(--n, 6), var(--cell)) var(--clue);
  grid-template-rows: var(--clue) repeat(var(--n, 6), var(--cell)) var(--clue);
  padding: 6px; border-radius: 16px;
  background: radial-gradient(120% 100% at 50% 100%, #3a0f4a, #13071f 70%);
  box-shadow: 0 0 0 2px var(--sk-glow), 0 0 28px rgba(243, 92, 255, .32), 0 12px 30px rgba(0, 0, 0, .4);
}
.sk-corner { display: block; }
.sk-clue {
  display: grid; place-items: center; border-radius: 8px; color: #ffd6ff;
  font: 800 calc(var(--cell) * .42) / 1 var(--font-body); font-variant-numeric: tabular-nums;
  transition: color .15s, background .15s, text-shadow .15s;
}
.sk-clue:empty { opacity: 0; }
.sk-clue.sk-hot { background: rgba(243, 92, 255, .14); }
.sk-clue.sk-ok { color: rgba(255, 214, 255, .4); }
.sk-clue.sk-bad { color: var(--t-red); text-shadow: 0 0 10px rgba(255, 61, 127, .65); background: rgba(255, 61, 127, .12); }
.sk-cell {
  position: relative; overflow: hidden; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 6px;
  background: linear-gradient(180deg, #24123a, #1a0d2b); color: #f3b8ff;
  box-shadow: inset 0 0 0 1px rgba(243, 92, 255, .14);
  font: 700 calc(var(--cell) * .5) / 1 var(--font-body); font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
/* a little tower behind the number: taller for higher buildings */
.sk-cell::before {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: calc(var(--h, 0) * 88%);
  border-radius: 3px 3px 0 0; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(255, 230, 140, .22) 5px 7px) 25% 0 / 22% 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(255, 230, 140, .22) 5px 7px) 75% 0 / 22% 100% no-repeat,
    linear-gradient(180deg, rgba(243, 92, 255, .42), rgba(120, 40, 170, .3));
  transition: height .25s ease;
}
.sk-v { position: relative; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.sk-v:empty { display: none; }
.sk-cell:hover:not(:disabled) { background: linear-gradient(180deg, #2e1748, #211035); }
.sk-cell:focus { outline: none; }
.sk-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.sk-cell.sk-given { color: #fff; font-weight: 800; background: linear-gradient(180deg, #33184d, #26113b); }
.sk-cell.sk-peer { background: linear-gradient(180deg, #2c1645, #221036); }
.sk-cell.sk-same { box-shadow: inset 0 0 0 2px rgba(243, 92, 255, .55); color: #fff; }
.sk-cell.sk-sel { background: linear-gradient(180deg, #6a2a8c, #4d1d6a); box-shadow: inset 0 0 0 2px var(--sk-glow), 0 0 14px rgba(243, 92, 255, .55); color: #fff; z-index: 1; }
.sk-cell.sk-conflict { color: var(--t-red); }
.sk-cell.sk-conflict::after { content: ""; position: absolute; inset: 3px; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255, 61, 127, .8); }
.sk-cell.sk-pop .sk-v { display: inline-block; animation: skpop .28s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes skpop { from { transform: scale(.4); opacity: .2; } }
.sk-cell.sk-conflict.sk-pop .sk-v { animation: skshake .32s ease; }
@keyframes skshake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.sk-cell.sk-flash { animation: skflash .7s ease both; }
@keyframes skflash { 35% { background: #7a2aa0; box-shadow: 0 0 14px rgba(243, 92, 255, .7); } }
.sk-cell.sk-done { animation: skwin .7s ease both; }
@keyframes skwin { 50% { background: #6a2490; color: #fff; } }
.sk-cell:disabled { cursor: default; }
.sk-loading .sk-cell { background: #1c0f2b; animation: skload 1.2s ease-in-out infinite alternate; }
.sk-loading .sk-cell:nth-child(2n) { animation-delay: .3s; }
@keyframes skload { to { background: #2a1640; } }
.sk-notes {
  position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  font: 700 calc(var(--cell) * .24) / 1 var(--font-body); color: #d6b3e8; pointer-events: none;
}
.sk-notes span { display: grid; place-items: center; visibility: hidden; border-radius: 3px; }
.sk-notes span.on { visibility: visible; }
.sk-notes span.hl { background: rgba(243, 92, 255, .35); color: #fff; }

/* number pad */
.sk-pad { display: flex; flex-direction: column; gap: 6px; width: min(100%, 420px); }
.sk-keys { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 6px; }
.sk-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sk-key, .sk-act {
  border: 0; cursor: pointer; border-radius: 10px; color: var(--ink);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .35);
  font: 700 1.25rem/1 var(--font-body); transition: transform .1s, box-shadow .15s, background .15s;
}
.sk-key { position: relative; min-height: 46px; padding: 0; }
.sk-key small { position: absolute; right: 5px; bottom: 3px; font-size: .62rem; font-weight: 600; color: var(--muted); }
.sk-key:hover, .sk-act:hover { box-shadow: inset 0 0 0 1px var(--sk-glow); }
.sk-key:active, .sk-act:active { transform: translateY(2px); }
.sk-key.sk-used { opacity: .35; }
.sk-notes-on .sk-key { color: #d6b3e8; font-size: .95rem; box-shadow: inset 0 0 0 1px rgba(243, 92, 255, .5); }
.sk-act {
  min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .9rem; padding: 6px 10px;
}
.sk-act[aria-pressed="true"] { background: linear-gradient(135deg, #b02ad0, #7a1c96); color: #fff; box-shadow: 0 0 0 1px var(--sk-glow), 0 0 16px rgba(243, 92, 255, .4); }
.sk-key:disabled, .sk-act:disabled { opacity: .4; cursor: default; transform: none; }
.sk-key:focus-visible, .sk-act:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sk-pencil { width: 14px; height: 4px; background: currentColor; border-radius: 1px 0 0 1px; transform: rotate(-45deg); position: relative; }
.sk-pencil::after { content: ""; position: absolute; right: -4px; top: 0; border: 2px solid transparent; border-left: 4px solid currentColor; }
.sk-eraser { width: 13px; height: 8px; border: 2px solid currentColor; border-radius: 2px; transform: rotate(-30deg); background: linear-gradient(90deg, currentColor 40%, transparent 40%); }
.sk-clock { font-variant-numeric: tabular-nums; }
.sk-tag { font-size: .8rem; padding: 2px 10px; border-radius: 999px; background: rgba(243, 92, 255, .18); color: #f3c8ff; }
@media (prefers-reduced-motion: reduce) {
  .sk-cell, .sk-cell::before { transition: none; }
}