/* ChicCanto scratch card styles (card.css)
   NOTE: This file is intentionally limited to scratch-card visuals only.
   All page layout, headers, setup UI, share bar, and panels live in base.css.
*/

:root{
  --scratch-max: var(--page-max);
  --scratch-text: var(--text);
  --scratch-muted: var(--muted);
  --scratch-border: var(--stroke);
  --scratch-shadow: var(--shadow-soft);
  --scratch-accent-border: rgba(202,163,106,.35);
  --scratch-frame-max: var(--page-max);

  --scratch-tile-under: #fff;
  --scratch-icon-size: 80%;
  --scratch-tile-radius: 9999px;
  --scratch-tile-border: transparent;

  /* FX wrapper (glow) sizing */
  --scratch-fx-width: min(100%, var(--scratch-max, 980px));
  --scratch-fx-radius: 28px;

  --card-color: hsl(260deg 100% 3%);
  --text-color: hsl(260deg 10% 55%);
  --card-radius: 3.6vw;
  --card-width: 50vw;
  --border-width: 3px;
  --bg-size: 1;
  --hue: 0;
  --hue-speed: 1;
  --rotate: 0;
  --animation-speed: 6s;
  --interaction-speed: 0.55s;
  --glow-scale: 1.5;
  --scale-factor: 1;
  --glow-blur: 6;
  --glow-opacity: 1;
  --glow-radius: 100;
  --glow-rotate-unit: 1deg;
}

/* Prevent text selection while scratching */
.scratch-stage,
.scratch-stage *{
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@property --hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --rotate {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-translate-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-size {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-blur {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}
@property --glow-radius {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}
@property --white-shadow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.scratch-fx{
  width: var(--scratch-fx-width);
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  border-radius: var(--scratch-fx-radius);
  overflow: visible;

  /* Card table shadow */
  filter: drop-shadow(0 22px 55px rgba(0,0,0,.55)) drop-shadow(0 6px 18px rgba(0,0,0,.35));

  /* Avoid flex centering fighting the real card sizing */
  display: block;
  cursor: default;
}

.scratch-fx::before{
  content: "";
  position: absolute;
  left: calc(-.5 * var(--border-width));
  top: calc(-.5 * var(--border-width));
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  border-radius: inherit;
  box-shadow: 0 0 20px rgba(0,0,0,.85);
  mix-blend-mode: color-burn;
  z-index: 0;
  background:
    #292929 radial-gradient(
      30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%),
      hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 90%) calc(0% * var(--bg-size)),
      hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 80%) calc(20% * var(--bg-size)),
      hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 60%) calc(40% * var(--bg-size)),
      transparent 100%
    );
  animation:
    hue-animation var(--animation-speed) linear infinite,
    rotate-bg var(--animation-speed) linear infinite;
}
.scratch-fx::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Win turbo: speed up the neon frame briefly + add a quick flash.
   Triggered by JS adding .cc-win-turbo to .scratch-fx for ~700ms. */
.scratch-fx.cc-win-turbo{
  --animation-speed: 0.55s;     /* faster hue + rotate */
  --hue-speed: 3;              /* punchier color cycling */
  --glow-opacity: 1.2;         /* stronger inner glow */
  --glow-scale: 1.55;
  --glow-blur: 6;
}


.scratch-fx.cc-win-turbo::before{
  animation-timing-function:
    cubic-bezier(0.55, 0.08, 0.68, 0.53),
    cubic-bezier(0.55, 0.08, 0.68, 0.53);
}



.scratch-fx.cc-win-turbo::after{
  content: "";
  position: absolute;
  inset: -10%;               /* makes the flash extend beyond the frame */
  border-radius: inherit;

  background: radial-gradient(
    circle at 50% 42%,
    rgba(255,255,255,.75) 0%,
    rgba(255,255,255,.38) 24%,
    rgba(255,255,255,0) 78%
  );

  mix-blend-mode: screen;
  filter: blur(2px);         /* softens and makes it feel bigger */
  z-index: 6;

  opacity: 0;

  animation: ccWinFlash 300ms ease-out 1 both;
  animation-delay: 250ms; /* last 300ms of the 1000ms turbo window */
}

/* Never show the frame/flash in PNG export (if export ever captures wrappers). */
.is-exporting .scratch-fx::before,
.is-exporting .scratch-fx::after{
  content: none !important;
  display: none !important;
}

@keyframes ccWinFlash{
  0%   { opacity: 0; transform: scale(1); }
  12%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.18); }
}


.scratch-fx__content {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--card-color);
  border-radius: calc(calc(var(--card-radius) * 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-transform: uppercase;
  font-stretch: 150%;
  font-size: 18px;
  font-size: clamp(1.5vw, 1.5vmin, 32px);
  color: var(--text-color);

}
.scratch-fx__content > .scratch-fx__badge {
  display: inline-block;
  padding: 0.25em;
  border-radius: 4px;
  background: var(--text-color);
  color: black;
  margin-right: 8px;
  font-weight: 900;
}
.scratch-fx__content:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: calc(calc(var(--card-radius) * 0.9));
  box-shadow: 0 0 20px black;
  mix-blend-mode: color-burn;
  z-index: -1;
  background: #292929 radial-gradient(30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 90%) calc(0% * var(--bg-size)), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 80%) calc(20% * var(--bg-size)), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 60%) calc(40% * var(--bg-size)), transparent 100%);
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  animation: hue-animation var(--animation-speed) linear infinite, rotate-bg var(--animation-speed) linear infinite;
  transition: --bg-size var(--interaction-speed) ease;
}
.scratch-glow{
  --glow-translate-y: 0;
  display: block;
  position: absolute;
  width: calc(var(--scratch-fx-width) / 7.5);
  height: calc(var(--scratch-fx-width) / 7.5);

  top: 50%;
  left: 50%;

  pointer-events: none;
  animation: rotate var(--animation-speed) linear infinite;
  transform: translate(-50%, -50%) rotateZ(calc(var(--rotate) * var(--glow-rotate-unit)));

  transform-origin: center;
  border-radius: calc(var(--scratch-fx-radius) * 10vw);
  z-index: 0;
}
.scratch-glow:after {
  content: "";
  display: block;
  z-index: -2;
  filter: blur(calc(var(--glow-blur) * 10px));
  width: 130%;
  height: 130%;
  left: -15%;
  top: -15%;
  background: hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 60%);
  position: relative;
  border-radius: calc(var(--glow-radius) * 10vw);
  animation: hue-animation var(--animation-speed) linear infinite;
  transform: scaleY(calc(var(--glow-scale) * var(--scale-factor) / 1.1)) scaleX(calc(var(--glow-scale) * var(--scale-factor) * 1.2)) translateY(calc(var(--glow-translate-y) * 1%));
  opacity: var(--glow-opacity);
}

@keyframes shadow-pulse {
  0%, 24%, 46%, 73%, 96% {
    --white-shadow: 0.5;
  }
  12%, 28%, 41%, 63%, 75%, 82%, 98% {
    --white-shadow: 2.5;
  }
  6%, 32%, 57% {
    --white-shadow: 1.3;
  }
  18%, 52%, 88% {
    --white-shadow: 3.5;
  }
}
@keyframes rotate-bg {
  0% {
    --bg-x: 0;
    --bg-y: 0;
  }
  25% {
    --bg-x: 100;
    --bg-y: 0;
  }
  50% {
    --bg-x: 100;
    --bg-y: 100;
  }
  75% {
    --bg-x: 0;
    --bg-y: 100;
  }
  100% {
    --bg-x: 0;
    --bg-y: 0;
  }
}
@keyframes rotate {
  from {
    --rotate: -70;
    --glow-translate-y: -65;
  }
  25% {
    --glow-translate-y: -65;
  }
  50% {
    --glow-translate-y: -65;
  }
  60%, 75% {
    --glow-translate-y: -65;
  }
  85% {
    --glow-translate-y: -65;
  }
  to {
    --rotate: calc(360 - 70);
    --glow-translate-y: -65;
  }
}
@keyframes hue-animation {
  0% {
    --hue: 0;
  }
  100% {
    --hue: 360;
  }
}


/* Card stage: owns background + pattern */
.scratch-stage{
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  overflow: hidden;
  z-index: 100;
  padding: 1rem;
  max-width: var(--scratch-max);
  width: 100%;

  /* Theme defaults (override per card via inline style or a theme class) */
  --scratch-card-bg: #1c1e1e;
  --scratch-card-pattern-color: #292929;
  --scratch-card-pattern: url("/assets/img/pattern-heart_dark.svg");
  --scratch-card-pattern-size: clamp(160px, 18vw, 280px) clamp(160px, 18vw, 280px);
  --scratch-card-pattern-opacity: 1;

  background: var(--scratch-card-bg);
    box-shadow:
    0 18px 50px rgba(0,0,0,0.35);
}


/* Make the scratch card fill the fx wrapper exactly */
.scratch-fx > .scratch-stage{
  width: 100%;
  max-width: none;
  box-sizing: border-box;

  border-radius: inherit;
  position: relative;
  z-index: 1; /* above border layer */
}


/* Keep content above the pattern */
.scratch-stage > *{
  position: relative;
  z-index: 1;
}

.scratch-stage__inner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  opacity: var(--scratch-card-pattern-opacity);

  background-image: var(--scratch-card-pattern);     /* url(...) */
  background-repeat: repeat;
  background-position: 0 0;
  background-size: var(--scratch-card-pattern-size);
}

/* Ensure the real content sits above the pattern layer */
.scratch-stage > :not(.scratch-stage__inner) {
  position: relative;
  z-index: 1;
}

/* Right panel (scratch grid) */
.scratch-grid{
  display: grid;
  gap: 18px;

  /* Responsive tile size:
     - never smaller than 96px
     - scales with viewport
     - never larger than 146px (your preferred desktop size)
  */
  --tile-size: clamp(96px, calc((100vw - 72px - (18px * 2)) / 3), 146px);

  grid-template-columns: repeat(3, var(--tile-size));
  justify-content: center;
}

/* Tiles (circular) */
.scratch-board .scratch-tile{
  position: relative;
  width: var(--tile-size);
  height: var(--tile-size);

  border-radius: var(--scratch-tile-radius);
  background: var(--scratch-tile-under);
  border: 1px solid var(--scratch-tile-border);
  overflow: hidden;
}

/* Tiles (circular) */
.scratch-board .scratch-tile{
  position: relative;
  border-radius: var(--scratch-tile-radius);
  background: var(--scratch-tile-under);
  border: 1px solid var(--scratch-tile-border);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  min-height: 76px;
}

@media (hover: hover) and (pointer: fine){
  .scratch-tile canvas{ cursor: grab; }
  .scratch-tile canvas:active{ cursor: grabbing; }
}

.scratch-tile .under{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
border-radius: var(--scratch-tile-radius);
  color: #111;
  line-height: 0;
}

.scratch-tile .under .sub{ display: none; }


.scratch-tile .under svg {
  display: block;
  width: var(--scratch-icon-size);
  height: var(--scratch-icon-size);
  max-width: 90%;
  max-height: 90%;
}



/* Fallback: when icons remain as <img> (e.g., after refresh before SVG inlining) */
.scratch-tile .under img {
  display: block;
  width: var(--scratch-icon-size);
  height: var(--scratch-icon-size);
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
.scratch-tile canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  border-radius: var(--scratch-tile-radius);
}

/* One-time sheen pulse when a tile becomes "done" */
.scratch-tile.done .under{
  overflow: hidden; /* clip the sheen */
}

.scratch-tile.done .under::after{
  content: "";
  position: absolute;
  top: -35%;
  left: -80%;
  width: 55%;
  height: 170%;
  pointer-events: none;

  /* soft diagonal highlight */
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.0) 25%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.0) 75%,
    transparent 100%
  );

  transform: translateX(0) rotate(18deg);
  animation: ccTileSheen 420ms ease-out 1;
}

@keyframes ccTileSheen{
  0%   { transform: translateX(0) rotate(18deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateX(260%) rotate(18deg); opacity: 0; }
}

/* Never show sheen in export */
.is-exporting .scratch-tile.done .under::after{
  content: none !important;
}


/* Short viewport tweaks (moved from base.css to keep scratch styles here) */
@media (max-height: 500px){
  .scratch-fx{ overflow:visible; }
  .scratch-stage{ padding:1.25rem; }

}




/* Mobile */
@media (max-width: 720px) {
/* Right panel (scratch grid) */
.scratch-grid{
  gap: 14px;
  --tile-size: clamp(96px, calc((100vw - 100px - (18px * 2)) / 3), 146px);

  grid-template-columns: repeat(3, var(--tile-size));
}
}


/* Landscape phone: short height + landscape */
@media (orientation: landscape) and (max-height: 520px){
.scratch-grid{
  gap: 14px;
  --tile-size: clamp(96px, calc((100vw - 100px - (18px * 2)) / 3), 100px);

  grid-template-columns: repeat(3, var(--tile-size));
}
}