/* Design direction D, "Bold × Anthropic": an elegant serif word, outlined
   shapes with hard "sticker" shadows, pill buttons.
   Everything around the picker is neutral grey, so the page itself
   doesn't nudge people toward any color. */
:root {
  --bg: #d2d2d2;
  --ink: #141414;
  --ink-soft: #333;
  --raised: #ececec;
  --locked: #bdbdbd;
  --line: 2px solid var(--ink);
  --pop: 3px 3px 0 var(--ink);
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

.app {
  width: 100%;
  max-width: 420px;
  padding: 28px 18px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Wrapper for the game; doesn't affect layout. */
.play { display: contents; }

.done {
  margin: auto 0;
  text-align: center;
}
.done .word { font-size: 46px; }
.done p {
  margin: 16px auto 0;
  max-width: 300px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.prompt {
  margin: 0;
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
}

/* Font size is fitted per word in script.js so long words stay on one line. */
.word {
  margin: 0 0 4px;
  text-align: center;
  font-family: var(--serif);
  font-size: 66px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.swatch {
  height: 48px;
  border-radius: 14px;
  border: var(--line);
  box-shadow: var(--pop);
}
/* Before anything is picked: an empty dashed outline, no color. */
.swatch.empty {
  border-style: dashed;
  border-color: rgba(20, 20, 20, 0.45);
  box-shadow: none;
}

.hue {
  position: relative;
  height: 30px;
  border-radius: 15px;
  border: var(--line);
  box-shadow: var(--pop);
  touch-action: none;
  user-select: none;
  cursor: pointer;
  background: linear-gradient(to right,
    #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%);
}

/* The square: saturation left→right, brightness bottom→top. */
.sv {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  border: var(--line);
  box-shadow: var(--pop);
  touch-action: none;
  user-select: none;
  cursor: crosshair;
}
.sv-white, .sv-black {
  position: absolute;
  inset: 0;
  border-radius: 16px;
}
.sv-white { background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.sv-black { background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); }

/* Until a hue is chosen the square is plain grey, so it suggests nothing. */
.sv.locked {
  background: var(--locked);
  cursor: default;
}
.sv.locked .sv-white, .sv.locked .sv-black { display: none; }
.sv-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.thumb {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: var(--line);
  box-shadow: inset 0 0 0 3px #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hue .thumb {
  top: 50%;
  box-shadow: none;
}

/* Keyboard focus outline in black: the browser's default blue would put
   a color on screen. */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

.hint {
  margin: -2px 0 -4px;
  min-height: 1.4em;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}

.actions {
  display: flex;
  gap: 12px;
}

.btn {
  flex: 2;
  height: 56px;
  border-radius: 28px;
  border: var(--line);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  background: var(--ink);
  color: #fff;
  box-shadow: 3px 3px 0 #6a6a6a;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn.secondary {
  flex: 1;
  background: var(--raised);
  color: var(--ink);
  box-shadow: var(--pop);
}
/* Pressing a button pushes it into its shadow, like a real button. */
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 transparent;
}
/* Looks unavailable until a color is picked, but still responds to a tap
   by explaining what's missing. */
.btn.inactive {
  opacity: 0.4;
  cursor: default;
}
.btn.inactive:active {
  transform: none;
  box-shadow: 3px 3px 0 #6a6a6a;
}

/* A quick shake pointing at the step that still needs doing. */
.nudge { animation: nudge 0.3s ease-in-out 2; }
@keyframes nudge {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Progress toward the next fortune cookie: three segments that fill with
   each answer. No cookie picture here, since without its golden color it
   isn't recognizable, and color next to the picker could nudge answers. */
.cookie-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: #222;
}
.meter {
  display: flex;
  gap: 5px;
}
.meter span {
  width: 22px;
  height: 12px;
  border-radius: 6px;
  border: var(--line);
  transition: background 0.2s;
}
.meter[data-stage="1"] span:nth-child(1),
.meter[data-stage="2"] span:nth-child(-n+2) { background: var(--ink); }
.meter.wobble { animation: bump 0.3s ease-out; }
@keyframes bump {
  50% { transform: scale(1.12); }
}

.about {
  margin: auto 0 0;
  padding-top: 18px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #555;
}

.fortune {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(20, 20, 20, 0.5);
}
.fortune-card {
  width: 100%;
  max-width: 360px;
  padding: 30px 22px 22px;
  border-radius: 24px;
  border: var(--line);
  background: var(--raised);
  box-shadow: 5px 5px 0 var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: pop-in 0.25s ease-out;
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.92); }
}
/* The only color in the game: the cookie turns golden when it opens.
   The small cookie next to the picker stays grey, and answers given right
   after a cookie are tagged so we can check whether this has any effect. */
.open-cookie {
  position: relative;
  width: 1em;
  height: 1em;
  font-size: 110px;
  line-height: 1;
  filter: saturate(1.3) brightness(1.05);
}
.half {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
}
.half-left {
  clip-path: inset(0 50% 0 0);
  animation: split-left 0.5s 0.1s ease-out forwards;
}
.half-right {
  clip-path: inset(0 0 0 50%);
  animation: split-right 0.5s 0.1s ease-out forwards;
}
@keyframes split-left { to { transform: translateX(-20px) rotate(-16deg); } }
@keyframes split-right { to { transform: translateX(20px) rotate(16deg); } }
.fortune-paper {
  margin: 0;
  padding: 16px 20px;
  border-radius: 6px;
  border: 1.5px solid var(--ink);
  background: #fafafa;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.35;
  text-align: center;
  animation: paper 0.5s 0.35s ease-out both;
}
@keyframes paper {
  from { opacity: 0; transform: translateY(-12px) scaleX(0.6); }
}
.fortune-card .btn { width: 100%; flex: none; }

/* Only visible with #debug at the end of the address: shows what gets recorded. */
.debug {
  position: fixed;
  right: 8px;
  bottom: 8px;
  max-width: min(360px, calc(100vw - 16px));
  max-height: 40vh;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #eee;
  font: 11px/1.4 ui-monospace, Menlo, monospace;
}