/* =============================================================
   GAME: Futoshiki
   ============================================================= */
.board-futoshiki {
  --n: 5;
  --cell: min(calc((100vw - 74px) / (var(--n) * 1.4 - .4)), 58px);
  --sg: calc(var(--cell) * .4);
  --fu-glow: #ee6bff;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.fu-grid {
  display: grid; padding: 10px; border-radius: 18px;
  background: radial-gradient(circle at 50% 0%, #3a1648, #1c0a24 70%);
  box-shadow: 0 0 0 2px var(--fu-glow), 0 0 28px rgba(238, 107, 255, .35), 0 12px 30px rgba(0, 0, 0, .35);
}
.fu-cell {
  position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 10px;
  background: linear-gradient(180deg, #2c1438, #1f0e29) #261131; color: #f5b8ff;
  box-shadow: inset 0 0 0 1px rgba(238, 107, 255, .28), inset 0 2px 0 rgba(255, 255, 255, .06), 0 3px 0 rgba(0, 0, 0, .35);
  font: 700 calc(var(--cell) * .52) / 1 var(--font-body); font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.fu-cell:hover { background: #3a1a4a; }
.fu-cell:focus { outline: none; }
.fu-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--focus), 0 3px 0 rgba(0, 0, 0, .35); }
.fu-cell.fu-given { color: #fff; background: linear-gradient(180deg, #55266a, #3e1b4f) #4a215d; }
.fu-cell.fu-user { text-shadow: 0 0 10px rgba(238, 107, 255, .55); }
.fu-cell.fu-peer { background: #381944; }
.fu-cell.fu-same { background: #5e2a74; color: #fff; }
.fu-cell.fu-sel { background: linear-gradient(180deg, #a43cc0, #7e2a98) #9234ad; box-shadow: inset 0 0 0 2px var(--fu-glow), 0 0 14px rgba(238, 107, 255, .6); z-index: 1; color: #fff; }
.fu-cell.fu-conflict { color: var(--t-red); text-shadow: 0 0 10px rgba(255, 61, 127, .55); }
.fu-cell.fu-conflict:not(.fu-given)::after {
  content: ""; position: absolute; inset: 3px; border-radius: 7px; box-shadow: inset 0 0 0 2px rgba(255, 61, 127, .8);
}
.fu-cell.fu-pop .fu-v { display: inline-block; animation: fupop .28s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fupop { from { transform: scale(.4); opacity: .2; } }
.fu-cell.fu-conflict.fu-pop .fu-v { animation: fushake .32s ease; }
@keyframes fushake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.fu-cell.fu-flash { animation: fuflash .7s ease both; }
@keyframes fuflash { 35% { background: #d257f0; color: #fff; box-shadow: 0 0 16px rgba(238, 107, 255, .85); } }
.fu-cell.fu-done { animation: fuwin .7s ease both; }
.fu-cell.fu-done:nth-child(odd) { animation-delay: .08s; }
@keyframes fuwin { 50% { background: #c04ee0; color: #fff; box-shadow: 0 0 18px rgba(238, 107, 255, .8); } }
.fu-cell:disabled { cursor: default; }
.fu-loading .fu-cell { background: #24112e; animation: fuload 1.2s ease-in-out infinite alternate; }
.fu-loading .fu-cell:nth-child(3n) { animation-delay: .3s; }
@keyframes fuload { to { background: #341a42; } }
.fu-v:empty { display: none; }
.fu-notes {
  position: absolute; inset: 3px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
  font: 600 calc(var(--cell) * .22) / 1 var(--font-body); color: #e7b3f2; pointer-events: none;
}
.fu-notes span { display: grid; place-items: center; visibility: hidden; border-radius: 3px; }
.fu-notes span.on { visibility: visible; }
.fu-notes span.hl { background: rgba(238, 107, 255, .32); color: #fff; }

/* inequality signs: one chevron, turned by class */
.fu-sign { display: grid; place-items: center; pointer-events: none; }
.fu-sign svg { width: calc(var(--sg) * .9); height: calc(var(--sg) * .9); fill: none; stroke: var(--fu-glow); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; filter: drop-shadow(0 0 3px rgba(238, 107, 255, .7)); transition: stroke .15s; }
.fu-sign.fu-lt svg, .fu-sign.fu-gt svg { visibility: visible; }
.fu-h.fu-gt svg { transform: rotate(180deg); }
.fu-v-sign.fu-lt svg { transform: rotate(90deg); }
.fu-v-sign.fu-gt svg { transform: rotate(-90deg); }
.fu-sign.fu-bad svg { stroke: var(--t-red); filter: drop-shadow(0 0 4px rgba(255, 61, 127, .9)); }
.fu-loading .fu-sign svg { visibility: hidden; }

/* number pad */
.fu-pad {
  --keys: 5;
  display: grid; grid-template-columns: repeat(var(--keys), 1fr); gap: 6px;
  width: min(100%, calc(var(--keys) * 58px)); min-width: min(100%, 280px);
}
.fu-key, .fu-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;
}
.fu-key { position: relative; min-height: 48px; padding: 0; }
.fu-key small { position: absolute; right: 5px; bottom: 3px; font-size: .62rem; font-weight: 600; color: var(--muted); }
.fu-key:hover, .fu-act:hover { box-shadow: inset 0 0 0 1px var(--fu-glow); }
.fu-key:active, .fu-act:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--fu-glow), 0 0 0 rgba(0, 0, 0, .35); }
.fu-key.fu-used { opacity: .35; }
.fu-notes-on .fu-key { color: #e7b3f2; font-size: .95rem; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(238, 107, 255, .5); }
.fu-act {
  grid-column: span 2; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .9rem; padding: 6px 10px;
}
.fu-act[aria-pressed="true"] { background: linear-gradient(135deg, #c84de6, #9a33b8); color: #fff; box-shadow: 0 0 0 1px var(--fu-glow), 0 0 16px rgba(238, 107, 255, .4); }
.fu-key:disabled, .fu-act:disabled { opacity: .4; cursor: default; transform: none; }
.fu-key:focus-visible, .fu-act:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fu-pencil { width: 14px; height: 4px; background: currentColor; border-radius: 1px 0 0 1px; transform: rotate(-45deg); position: relative; }
.fu-pencil::after { content: ""; position: absolute; right: -4px; top: 0; border: 2px solid transparent; border-left: 4px solid currentColor; }
.fu-eraser { width: 13px; height: 8px; border: 2px solid currentColor; border-radius: 2px; transform: rotate(-30deg); background: linear-gradient(90deg, currentColor 40%, transparent 40%); }

.fu-clock { font-variant-numeric: tabular-nums; }
.fu-tag { font-size: .8rem; padding: 2px 10px; border-radius: 999px; background: rgba(238, 107, 255, .18); color: #f8d3ff; }
@media (prefers-reduced-motion: reduce) {
  .fu-cell, .fu-sign svg { transition: none; }
}