/* Snip a Snowflake. Tokens come from shared/tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body { overscroll-behavior: none; }

/* the game's own buttons take the page's type; the frame's (shared/frame.css) keep theirs */
:where(button:not(.btn, .btn-secondary, .btn-link)) { font: inherit; color: inherit; }

/* Icons come from art/icon-*.svg as masks, so they take the text colour of their button */
.icon {
  display: inline-block;
  width: 24px; height: 24px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon--back { --icon: url("art/icon-back.svg"); }
.icon--undo { --icon: url("art/icon-undo.svg"); width: 18px; height: 18px; }
.icon--rotate { --icon: url("art/icon-rotate.svg"); width: 18px; height: 18px; transition: transform .2s ease; }


/* Sound toggle, top right on every screen. The frame lifts it above its cards (z-index 20); here it
   stays under the page-turn veil, the Start Over sheet and the zoom, as before. */
html body .sound-btn { z-index: 4; }
.sound-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: max(10px, calc((100vw - 560px) / 2 + 10px));
  width: 48px; height: 48px;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
/* over the night sky, and over the cream Start card on a short screen: white on an ink tile reads on both */
body.has-sky .sound-btn { color: var(--white); background: var(--ink); }
.sound-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.icon-sound { --icon: url("art/icon-sound-off.svg"); }
.sound-btn[aria-pressed="true"] .icon-sound { --icon: url("art/icon-sound-on.svg"); }
/* make room for it in the Make and Reveal header bars */
.screen--make .bar, .screen--reveal .bar { padding-right: 44px; }

/* This game's screens are whole pages in the flow, not the frame's overlay cards: undo the parts
   of shared/frame.css's .screen that are for overlays. */
.screen {
  align-items: stretch; justify-content: flex-start;
  overflow: visible; touch-action: auto; background: none;
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  max-width: 560px;
  margin: 0 auto;
}
.screen.is-active { display: flex; flex-direction: column; }
.screen { position: relative; z-index: 1; transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .3, 1); }
/* page turn between screens (game.js show()): the old one drops away, the new one rises 8px */
.screen.is-leaving { opacity: 0; transform: translateY(6px); transition-duration: .12s; pointer-events: none; }
.screen.is-entering { opacity: 0; transform: translateY(8px); transition: none; }
.veil {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.veil.veil--ink { background: var(--ink); }
.veil.is-on { opacity: 1; pointer-events: auto; transition-duration: .12s; }

/* The snowflake sky, fixed behind Start and Scene */
.sky { position: fixed; inset: 0; width: 100%; height: 100%; display: none; z-index: 0; touch-action: manipulation; }
body.has-sky { background: var(--ink); }
body.has-sky .sky { display: block; }
.sky--front { pointer-events: none; }
.sky--back { pointer-events: none; }
.screen--start, .screen--scene { pointer-events: none; }
.screen--start .card, .scene__top, .scene__actions { pointer-events: auto; }

/* ---------- Buttons ---------- */

/* .btn, .btn-secondary and .btn-link come from shared/frame.css, so Start, Reveal and Scene
   share the arcade's frame. The modifiers below are the
   smaller working buttons on the Make screen and the zoom. */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  user-select: none;
  transition: transform .12s ease, background-color .15s ease;
}
.btn:disabled { opacity: .35; cursor: default; transform: none; }
/* The same pair on the dark band of the Scene screen */
.btn--on-ink { color: var(--ink); background: var(--paper); }
.btn-secondary.btn--on-ink { color: var(--white); background: transparent; box-shadow: inset 0 0 0 2.5px var(--paper); }

.btn--tool {
  width: auto;
  min-height: 48px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn--finish { min-height: 56px; font-size: 22px; }
.btn--text {
  min-height: 48px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-dark);
  background: transparent;
}
.btn--outline-light {
  width: auto;
  min-height: 48px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
  background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink-light);
}
.btn svg { width: 18px; height: 18px; }
.btn:focus-visible, .iconbtn:focus-visible, .cutter:focus-visible, .size:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* Admire the Snowflakes on Start is the frame's .btn-link */
.card .btn-link { margin-top: 2px; }

.iconbtn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; background: none; padding: 0; cursor: pointer;
}
.iconbtn svg { width: 24px; height: 24px; }

/* ---------- Start ---------- */

.screen--start { justify-content: center; }

/* The Start card (.card, .kicker, h1, .tip) comes from shared/frame.css */
.screen--start .card { margin: 0 auto; }

.host {
  position: relative;
  height: 168px;
  margin: 10px 0 14px;
}
.host__flake {
  position: absolute;
  left: 2%; top: 8px;
  width: 124px; height: 124px;
  border-radius: 50%;
  background: var(--ink);
}
.host__figure { position: absolute; right: 2%; bottom: 0; height: 166px; width: auto; }
.gnome {
  --hw: 84px;
  position: absolute;
  right: 4%;
  bottom: 0;
  width: var(--hw);
}
.gnome__head { display: block; width: 100%; height: auto; }
.gnome__body { display: block; width: 105%; margin-top: calc(var(--hw) * -0.285); }


/* ---------- Bar ---------- */

.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0 -6px 8px;
}
.bar__label { flex: 1; margin: 0; font-size: 11px; letter-spacing: .1em; color: var(--ink-dark); }
.bar__gnome { width: 36px; height: auto; }

/* Curly peeking over the top edge of the board (Make screen) */
.peek {
  position: relative;
  z-index: 2;
  flex: none;
  align-self: stretch;
  width: 40px;
  pointer-events: none;
}
/* the head is cut off at the board's top edge (the bar's 8px bottom margin below it) */
.peek__clip {
  position: absolute;
  left: 0; right: 0;
  top: -4px; bottom: -8px;
  overflow: hidden;
}
.peek__head { position: absolute; left: 0; top: 24px; width: 40px; height: auto; }
.peek__mittens { position: absolute; left: -4px; bottom: -16px; width: 48px; height: auto; }
.peek.bob .peek__head, .peek.bob .peek__mittens { animation: bob .26s ease-out; }
@keyframes bob { 40% { transform: translateY(-2px); } }

/* Curly in the winter scene, above the hills; scene.js places him and swaps his pose */
.scene-curly { position: fixed; z-index: 0; pointer-events: none; }
.scene-curly .gnome__head { display: block; width: 100%; height: auto; }
.scene-curly .gnome__body { display: block; width: 105%; margin-top: calc(var(--hw) * -0.285); }
body:not(.has-sky) .scene-curly { display: none; }

/* ---------- Mat (the cutting board) ---------- */

.mat {
  position: relative;
  flex: 1;
  min-height: 300px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--ink);
  background-image:
    linear-gradient(#1c1c1c 1px, transparent 1px),
    linear-gradient(90deg, #1c1c1c 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
.mat canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.mat canvas.chips { pointer-events: none; touch-action: auto; }
.mat__hint {
  position: absolute;
  top: 14px; left: 0; right: 0;
  margin: 0;
  text-align: center;
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
  pointer-events: none;
}
.hint-target {
  position: absolute;
  left: -22px; top: -22px;
  width: 44px; height: 44px;
  pointer-events: none;
}
.hint-target::before, .hint-target::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid var(--green);
}
.hint-target::after { animation: pulse 1.6s ease-out infinite; }
@keyframes pulse {
  from { transform: scale(.6); opacity: 1; }
  to { transform: scale(1.7); opacity: 0; }
}

/* Fixed at body level so it shows over any screen, above the safe area */
.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 72px);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 0 0 2px var(--paper);
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  pointer-events: none;
}

/* ---------- Tray ---------- */

.tray { padding-top: 12px; }

.cutters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.cutter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 64px;
  padding: 4px 0 6px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-button);
  background: var(--white);
  cursor: pointer;
  touch-action: manipulation;
}
.cutter canvas { width: 32px; height: 32px; }
.cutter__name { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cutter[aria-checked="true"] { background: var(--green-lightest); box-shadow: inset 0 0 0 3px var(--ink); }

.tray__row {
  display: flex;
  gap: 8px;
}

/* Size and 90° live on the board, bottom left */
.mat__tools {
  position: absolute;
  left: 12px; bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 1;
}
.tray__row .btn { padding: 0 14px; }
.tray__row { margin-top: 8px; }
#preview, #undo { flex: 1; }
.tray .btn--finish { margin-top: 8px; }
.btn--small { width: auto; min-height: 44px; padding: 0 8px; font-size: 15px; }
.bar .btn--text { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  min-height: 48px;
  padding: 0 10px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-button);
  background: var(--white);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
}

.toggle[aria-pressed="true"] { background: var(--green-lightest); box-shadow: inset 0 0 0 3px var(--ink); }
.toggle[aria-pressed="true"] .icon--rotate { transform: rotate(90deg); }
.toggle:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* Confirm sheet */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .55);
}
.sheet__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 28px 24px 16px;
  background: var(--paper);
  border-radius: var(--radius-card);
}
.sheet__title { font-family: var(--font-display); font-weight: 400; font-size: 28px; margin: 0 0 6px; }
.sheet__body { margin: 0 0 18px; font-size: 16px; line-height: 1.4; }
.sheet .btn--text { margin-top: 4px; }

.sizes {
  display: flex;
  border: 2px solid var(--ink);
  border-radius: var(--radius-button);
  background: var(--white);
  overflow: hidden;
}
.size {
  width: 44px;
  min-height: 44px;
  display: grid; place-items: center;
  border: 0; padding: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.size + .size { border-left: 2px solid var(--ink); }
.size[aria-checked="true"] { background: var(--green-lightest); box-shadow: inset 0 0 0 3px var(--ink); }
.mat__tools .sizes { border-color: var(--white); }
.mat__tools .size + .size { border-left-color: var(--hairline); }
.mat__tools .toggle { border-color: var(--white); }
.dot { display: block; border-radius: 50%; background: var(--ink); }
.dot--s { width: 8px; height: 8px; }
.dot--m { width: 13px; height: 13px; }
.dot--l { width: 19px; height: 19px; }

/* ---------- Reveal ---------- */

.mat--reveal { flex: 1 1 auto; min-height: 280px; max-height: 420px; }
.mat--reveal canvas { cursor: default; }
.mat--reveal .bracket { z-index: 2; }

/* Curly on a paper snowdrift, bottom right of the reveal mat */
.drift {
  position: absolute;
  right: 0; bottom: 0;
  width: 100px; height: 100px;
  background: var(--paper);
  border-top-left-radius: 100%;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.gnome--reveal {
  --hw: 42px;
  right: 14px;
  bottom: 7px;
  opacity: 0;
  transform-origin: 50% 100%;
  pointer-events: none;
}
.mat--reveal.has-curly .drift { opacity: 1; }
.gnome--reveal.is-still { opacity: 1; }
.gnome--reveal.is-in { animation: curly-pop .32s cubic-bezier(.3, .7, .4, 1) forwards; }
@keyframes curly-pop {
  0% { opacity: 0; transform: translateY(18px) scale(.9, .82); }
  55% { opacity: 1; transform: translateY(-3px) scale(.96, 1.05); }
  100% { opacity: 1; transform: none; }
}

.panel {
  padding-top: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.panel.is-in { opacity: 1; transform: none; pointer-events: auto; }

.headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  margin: 0 0 12px;
}
.name { margin-bottom: 16px; }
.name__label { display: block; margin: 0 0 8px; font-size: 11px; color: var(--ink-dark); }
.name__input.name__input--initials {
  width: 120px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.name__input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-button);
  font: 600 16px var(--font-sans);
  background: var(--white);
}
.name__err { margin: 6px 0 0; color: var(--ink-dark); font-size: 14px; }

/* ---------- Scene ---------- */

.screen--scene {
  position: fixed;
  inset: 0;
  max-width: none;
  color: var(--white);
}
/* The sky fills the whole window, so the header and button bands run edge to edge too
   (no side padding, even past 600px), and their contents sit in the same centred 560px
   column as the sound toggle and the other screens. */
.screen.screen--scene { padding: 0; }
.scene__top {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: max(10px, env(safe-area-inset-top)) max(60px, calc((100% - 560px) / 2 + 60px)) 12px max(6px, calc((100% - 560px) / 2 + 6px));
  background: var(--ink);
  border-bottom: 1px solid #1c1c1c;
}
.scene__back { color: var(--white); flex: none; }
.scene__top > div { padding-top: 6px; }
.scene__label { margin: 0; font-size: 12px; color: var(--ink-light); }
.scene__count {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.15;
}
.scene__help { margin: 4px 0 0; font-size: 14px; color: var(--ink-light); }
.see-mine {
  min-height: 44px;
  margin: 8px 0 0;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ink-light);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
}
.see-mine:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.scene__sky {
  position: relative;
  flex: 1;
  overflow: hidden;
}
/* End buttons are the shared .btn pair, flipped for the dark band */
.scene__actions {
  background: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 14px max(16px, calc((100% - 560px) / 2 + 16px)) max(16px, env(safe-area-inset-bottom));
}

/* Finish strip: a friendly title and the green tick on "Have some fun", flipped for the dark band */
.finish { margin: 0 0 14px; text-align: center; }
.finish__rank {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: var(--white);
}
.todo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 0; font-size: 20px; font-weight: 700; color: var(--white); }
.tickbox { position: relative; flex: none; width: 36px; height: 36px; }
.tickbox > * { position: absolute; inset: 0; width: 100%; height: 100%; }
/* art/checkbox.svg is drawn in ink, so on the dark band it is used as a paper-coloured mask */
.tickbox__box { background: var(--paper); -webkit-mask: url("art/checkbox.svg") center / contain no-repeat; mask: url("art/checkbox.svg") center / contain no-repeat; }
/* the tick's draw-on comes from shared/frame.css */

/* ---------- Zoom: a tapped flake fills the screen ---------- */

.zoom { position: fixed; inset: 0; z-index: 3; }
.zoom__scrim {
  position: absolute; inset: 0;
  width: 100%; border: 0; padding: 0;
  background: rgba(0, 0, 0, .82);
  opacity: 0;
  transition: opacity .35s ease;
  cursor: zoom-out;
}
.zoom__flake {
  position: absolute; left: 0; top: 0;
  transform-origin: 50% 50%;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
  cursor: zoom-out;
}
.zoom__info {
  position: absolute;
  left: 16px; right: 16px;
  top: var(--info-top, 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.zoom.is-open .zoom__scrim { opacity: 1; }
.zoom.is-open .zoom__info { opacity: 1; transform: none; transition-delay: .25s; }
.zoom__label { margin: 0; font-size: 12px; color: var(--ink-light); }
.zoom__who { margin: 6px 0 0; font-family: var(--font-display); font-size: 28px; }
.zoom__when { margin: 6px 0 18px; font-family: var(--font-display); font-size: 22px; }
.zoom__close { min-width: 200px; }

@media (prefers-reduced-motion: reduce) {
  .hint-target::after { animation: none; }
  .gnome--reveal.is-in { animation: none; opacity: 1; }
  .peek.bob .peek__head, .peek.bob .peek__mittens { animation: none; }
  .panel, .btn, .icon--rotate, .zoom__scrim, .zoom__flake, .zoom__info, .screen, .veil { transition: none; }
}

@media (min-width: 600px) {
  .screen { padding-left: 24px; padding-right: 24px; }
}