/* I spy counting online (assets/play/ispy.js) */
.is-view { position: relative; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 3px var(--navy); background: #fff;
  touch-action: manipulation; cursor: pointer; margin: 0 auto;
  max-width: min(100%, max(300px, calc((100vh - 330px) * 1.392))); }
.game:fullscreen .is-view { max-width: min(100%, max(300px, calc((100vh - 360px) * 1.392))); }
.is-view img { display: block; width: 100%; height: auto; pointer-events: none; }
.is-view svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.is-badge circle { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.is-badge text { fill: #fff; font-family: var(--display, sans-serif); font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.is-badge { animation: is-in .25s ease-out; transform-box: fill-box; transform-origin: center; }
.is-badge.is-together circle { fill: var(--red); }
.is-badge.is-bump { animation: is-bump .35s ease-out; }
@keyframes is-in { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes is-bump { 50% { transform: scale(1.35); } }
.is-lit { fill: rgba(255, 210, 63, .35); stroke: #f0b400; stroke-width: 5; }
.is-ok-c { fill: none; stroke: var(--green); stroke-width: 5; animation: pop .3s ease-out; transform-box: fill-box; transform-origin: center;
  transition: opacity .6s; }
.is-ok-c.is-faded { opacity: .35; }

.is-ask { display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap; margin: 12px 0 4px; min-height: 92px; }
.is-pic svg { width: 70px; height: 70px; display: block; }
.is-q { font: 700 1.05rem/1.2 var(--display); color: var(--navy); min-width: 90px; }
.is-q b { font-size: 1.25rem; }
.is-nums { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.is-nums button { width: clamp(62px, 17vw, 92px); height: clamp(62px, 17vw, 92px); border-radius: 20px; border: 0; cursor: pointer; background: #fff;
  font: 800 clamp(1.9rem, 6vw, 2.8rem) var(--display); color: var(--navy); box-shadow: 0 5px 0 #c9d3e2, inset 0 0 0 3px #d4dce8; }
.is-nums button:active { transform: translateY(3px); box-shadow: 0 2px 0 #c9d3e2, inset 0 0 0 3px #d4dce8; }
.is-nums button.is-right { background: var(--green); color: #fff; box-shadow: 0 5px 0 #168a56; }
.is-nums button.is-wrong { background: #ffe1de; color: var(--red-dark, #b3261e); opacity: .7; }
.is-nums button.is-hint { animation: bob 1s ease-in-out infinite; box-shadow: 0 5px 0 #c9d3e2, inset 0 0 0 4px var(--green); }
.is-nums button:disabled { cursor: default; }
@media (hover: hover) { .is-nums button:not(:disabled):hover { box-shadow: 0 5px 0 #c9d3e2, inset 0 0 0 3px var(--blue); } }

.is-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 6px; margin-top: 10px; max-width: 560px;
  margin-left: auto; margin-right: auto; }
.is-cell { background: var(--soft); border-radius: 12px; padding: 4px 2px 6px; text-align: center; transition: transform .15s; }
.is-cell svg { width: 38px; height: 38px; display: block; margin: 0 auto; }
.is-box { display: block; margin: 2px auto 0; width: 38px; height: 30px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 2px var(--line);
  font: 800 1.25rem/30px var(--display); color: var(--green); }
.is-cell.is-cur { background: #fff; box-shadow: inset 0 0 0 3px var(--blue); transform: translateY(-3px); }
.is-cell.is-solved .is-box { box-shadow: inset 0 0 0 2px var(--green); animation: pop .3s ease-out; }
@media (max-width: 600px) {
  .is-view { border-radius: 10px; }
  .is-pic svg { width: 54px; height: 54px; }
  .is-ask { gap: 8px 10px; }
}