.cone-splash {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  align-content: center;
  justify-items: center;
  gap: 1.25rem;
}
.js.has-splash .cone-splash {
  display: grid;
  animation: splash-exit 1s both;
}
.splash-mark { display: block; animation: cone-arrival 0.8s var(--ease) both; }
.splash-mark img { display: block; }
.splash-name { font: 600 0.75rem var(--font-sans); letter-spacing: 0.12em; }
@keyframes cone-arrival {
  0% { opacity: 0; transform: translateY(-35px) rotate(-18deg); }
  45% { opacity: 1; transform: translateY(0) rotate(5deg); }
  72% { transform: rotate(-3deg); }
  100% { transform: none; }
}
@keyframes splash-exit {
  0%, 65% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
.cone-secret { display: flex; justify-content: center; padding-bottom: 1.5rem; }
.cone-trigger, .cone-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 7px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.cone-trigger[hidden] { display: none; }
.cone-trigger img { transition: transform 0.25s var(--ease); }
.cone-trigger:hover img { transform: rotate(-12deg); }
.cone-game {
  width: min(480px, calc(100% - 2rem));
  max-height: calc(100svh - 2rem);
  padding: clamp(1rem, 4vw, 1.75rem);
  margin: auto;
  overflow-y: auto;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
}
.cone-game::backdrop { background: rgb(0 0 0 / 65%); }
body:has(.cone-game[open]) { overflow: hidden; }
.cone-game-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cone-game h2 { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.1; letter-spacing: -0.025em; }
#cone-instructions { margin-top: 0.7rem; max-width: 36ch; color: var(--ink-60); font-size: 0.9rem; line-height: 1.5; }
.cone-stats { display: flex; justify-content: space-between; gap: 1rem; margin-block: 1.25rem 0.75rem; font-size: 0.75rem; }
.cone-stats strong { margin-left: 0.4rem; font-size: 1rem; font-variant-numeric: tabular-nums; }
.cone-arena {
  display: block;
  width: 100%;
  height: clamp(180px, 40svh, 340px);
  padding: 0;
  border: 1px solid var(--hairline);
  background: var(--paper);
  cursor: pointer;
  touch-action: manipulation;
}
.cone-arena:disabled { cursor: default; }
.cone-arena canvas { display: block; width: 100%; height: 100%; }
.cone-status { min-height: 1.5em; margin-block: 0.85rem; font-size: 0.9rem; color: var(--ink-60); }
.cone-start { width: 100%; cursor: pointer; }
.cone-start:disabled { opacity: 0.6; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .js.has-splash .cone-splash { display: none; }
  .splash-mark, .cone-trigger img { animation: none; transition: none; }
  .cone-trigger:hover img { transform: none; }
}