/* The Daily Cube — site-specific styles layered on top of the vendored
   css/broadsheet.css design system. Everything expressible as an inline
   style (to stay faithful to docs/design/dailycube.app.dc.html) lives inline
   in the JS screen builders; this file only holds what inline styles can't
   do: keyframes, the CSS-3D cube, hover/focus states, and small media
   queries. */

html, body { margin: 0; padding: 0; background: var(--color-bg); }
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
.app { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-body); color: var(--color-text); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-800); text-decoration: underline; }
button { font: inherit; }

@keyframes dc-pop { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes dc-flash { 0%, 100% {} 50% { background: #ffdee6; color: #aa0b56; transform: scale(0.92); } }
@keyframes dc-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes dc-spin-slow { from { transform: rotateY(0deg) rotateX(-18deg); } to { transform: rotateY(360deg) rotateX(-18deg); } }
@keyframes hint-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 0, 108, 0); } 50% { box-shadow: 0 0 0 5px rgba(214, 0, 108, 0.45); } }

.hero-cube { animation: dc-spin-slow 22s linear infinite; }

/* — cube viewport (site/js/cubeview.js) — */
.cube-viewport { position: relative; height: 340px; touch-action: none; cursor: grab; perspective: 1100px; }
.cube-viewport:active { cursor: grabbing; }
.cube {
  position: absolute; left: 50%; top: 50%; width: 240px; height: 240px;
  margin: -120px 0 0 -120px; transform-style: preserve-3d;
}
.cube.cube-animating { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.cube-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  background: var(--color-bg); border: 1px solid var(--color-neutral-400);
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.face-grid { width: 228px; display: grid; grid-template-columns: repeat(4, 54px); gap: 4px; }
.face-grid .cell {
  width: 54px; height: 54px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 24px; border-radius: var(--radius-sm); cursor: pointer;
  user-select: none;
}

/* — keyboard — */
.kb-row { display: flex; gap: 4px; }
.kb-key {
  flex: 1; height: 42px; background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md); font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer;
}
.kb-key:hover { background: var(--color-neutral-200); }
.kb-key:active { background: var(--color-neutral-300); }

/* — legal page ToC (shown from ~760px, matches the design's `.legal-toc { display:none }` rule) — */
.legal-toc { display: none; }
@media (min-width: 760px) {
  .legal-toc { display: block !important; }
}

/* — beta pricing note (replaces Stripe checkout buttons) — */
.beta-note {
  text-align: left; background: var(--color-neutral-100); border: 1px dashed var(--color-neutral-400);
  border-radius: var(--radius-md); padding: 14px; font-size: 13px; font-style: italic; color: var(--color-neutral-700);
}

/* — store badges (disabled-looking, no links) — */
.store-badge { cursor: default; opacity: 0.92; }
.store-badge:hover { opacity: 1; }

/* — misc form/dialog niceties the design leaves to defaults — */
.code-input { letter-spacing: 6px; font-variant-numeric: tabular-nums; text-align: center; }
.field-error { font-size: 12px; color: var(--color-accent-2-700); margin: 4px 0 0; }

@media (max-width: 379px) {
  .face-grid { grid-template-columns: repeat(4, 50px); width: 212px; }
  .face-grid .cell { width: 50px; height: 50px; font-size: 22px; }
}