/* ============================================================
   Impulse88 — Scratch Card (Views/ScratchCard/Index.cshtml)
   Design: design/scratch-card/index.html.

   Loaded per page via @section Styles. Neutrals come from the --imp-* tokens
   in impulse88-theme.css. --sc-accent / --sc-accent-2 / --sc-angle are set on
   .imp-scratch by impulse88-scratch.js from the selected pack, so the whole
   page recolours with the pack.
   ============================================================ */

.imp-scratch {
    --sc-accent: var(--imp-lime, #c8ff00);
    --sc-accent-2: var(--imp-lime-hi, #d8ff3d);
    --sc-angle: 108deg;
    --sc-on: var(--imp-bg, #0a0f14);
    --sc-cut: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    --sc-slant: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    position: relative;
    overflow: hidden;
    background: var(--imp-bg);
    color: var(--imp-text);
    font: 400 14px/1.5 var(--imp-sans);
}

/* The widths below add up only with border-box. Bootstrap already sets it site-wide; this keeps the page right without it. */
.imp-scratch, .imp-scratch *, .imp-scratch *::before, .imp-scratch *::after { box-sizing: border-box; }
.imp-scratch [hidden] { display: none !important; }
.isc-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
/* 440 card + 32 gap + 360 panel + two 16px gutters = 864: the title starts at
   the card's left edge and the wallet ends at the panel's right edge */
.isc-wrap { position: relative; z-index: 1; max-width: 864px; margin: 0 auto; padding: 26px 16px 48px; display: flex; flex-direction: column; gap: 24px; }

/* ---- top ---- */
.isc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.isc-kicker { font: 700 11px/1 var(--imp-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--imp-text-3); }
.isc-h1 { margin: 10px 0 0; font: italic 900 34px/1 var(--imp-sans); letter-spacing: -.035em; text-transform: uppercase; color: var(--imp-text); }
.isc-h1 b { color: var(--sc-accent); }
.isc-wallet { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.isc-stat { padding: 8px 14px; background: var(--imp-surface-2); border: 1px solid var(--imp-line); display: flex; flex-direction: column; gap: 5px; }
.isc-stat .v { font: 800 18px/1 var(--imp-sans); font-variant-numeric: tabular-nums; }
.isc-stat .v.gain { color: var(--sc-accent); }
.isc-empty { padding: 40px 20px; text-align: center; color: var(--imp-text-2); background: var(--imp-surface); border: 1px solid var(--imp-line); }

/* ---- buttons ---- */
.isc-btn { appearance: none; border: 0; background: var(--sc-accent); color: var(--sc-on); font: 700 15px/1 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; padding: 15px 24px; clip-path: var(--sc-slant); cursor: pointer; transition: background .15s, transform .1s; }
.isc-btn:hover { background: var(--sc-accent-2); }
.isc-btn:active { transform: translateY(1px); }
.isc-btn:disabled { background: var(--imp-line-2); color: var(--imp-text-3); cursor: not-allowed; }
.isc-ghost { appearance: none; background: transparent; color: var(--imp-text); border: 1px solid var(--imp-line-2); font: 700 13px/1 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; padding: 13px 16px; cursor: pointer; transition: color .12s, border-color .12s; }
.isc-ghost:hover:not(:disabled), .isc-ghost[aria-pressed="true"] { color: var(--sc-accent); border-color: var(--sc-accent); }
.isc-ghost:disabled { color: var(--imp-text-4); cursor: not-allowed; }
.isc-ghost svg { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; fill: currentColor; }
.isc-ghost svg .ln { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.imp-scratch :is(.isc-btn, .isc-ghost, .isc-pack):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* ---- stage ---- */
.isc-stage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
/* one column: header, card and panels all share the card's 440 width */
@media (max-width: 900px) { .isc-stage { grid-template-columns: minmax(0, 1fr); } .isc-wrap { max-width: 472px; } }
.isc-card-col { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }

.isc-card { position: relative; width: min(100%, 440px); padding: 20px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(165deg, var(--imp-surface-3), var(--imp-bg-2) 70%); clip-path: var(--sc-cut); }
.isc-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(var(--sc-angle), transparent 0 38px, color-mix(in srgb, var(--sc-accent) 7%, transparent) 38px 62px); -webkit-mask: linear-gradient(200deg, #000 0%, transparent 55%); mask: linear-gradient(200deg, #000 0%, transparent 55%); }
.isc-card::after { content: ""; position: absolute; left: 0; top: 16px; bottom: 0; width: 4px; background: var(--sc-accent); }
.isc-card > * { position: relative; }
.isc-head { display: flex; flex-direction: column; gap: 8px; }
/* Same rule as the pack tiles: the colour word over CARD, so the title holds the dark
   left side of the card instead of running across the ninja on the cover. keep-all
   keeps a Chinese name ("橙色卡") on one line rather than one character per line. */
.isc-name { font: italic 900 clamp(34px, 9vw, 46px)/.92 var(--imp-sans); letter-spacing: -.035em; text-transform: uppercase; text-shadow: 0 2px 16px rgba(10, 15, 20, .7); width: min-content; word-break: keep-all; }
.isc-name b { color: var(--sc-accent); }
.isc-tag { font: 600 15px/1.2 var(--imp-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--imp-text-2); }
.isc-rule { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 12px; background: var(--imp-surface); border: 1px solid var(--imp-line); font: 700 12px/1.2 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--imp-text-3); }
.isc-rule b { color: var(--sc-accent); font-variant-numeric: tabular-nums; }

.isc-play { position: relative; aspect-ratio: 1 / 1; max-width: 100%; }
.isc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; height: 100%; }
.isc-cell { background: var(--imp-surface); border: 1px solid var(--imp-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; transition: background .2s, color .2s; }
/* the amount is the whole point of a square: big on its own, smaller under a prize picture */
.isc-cell .amt { font: 800 clamp(18px, 5.6vw, 28px)/1 var(--imp-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.isc-cell .amt { text-align: center; }
.isc-cell .amt small { display: block; margin-bottom: .3em; font: 700 max(10px, .4em)/1 var(--imp-cond); letter-spacing: .18em; color: var(--imp-text-3); }
.isc-cell img + .amt { font-size: clamp(14px, 4.2vw, 20px); }
.isc-cell.top-tier .amt { color: var(--sc-accent); }
.isc-cell.pop { animation: isc-pop .32s cubic-bezier(.3, 1.6, .5, 1); }
/* A winning cell keeps its dark ground, so the drawn prize stays readable, and lights up with a ring instead. */
.isc-cell.hit { background: color-mix(in srgb, var(--sc-accent) 16%, var(--imp-surface)); border-color: var(--sc-accent); box-shadow: inset 0 0 0 1px var(--sc-accent), 0 0 24px color-mix(in srgb, var(--sc-accent) 40%, transparent); animation: isc-hit .9s ease-in-out 3; }
.isc-cell.hit .amt { color: var(--sc-accent); }
.isc-cell.dim { opacity: .35; }
@keyframes isc-pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
@keyframes isc-hit { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* touch-action: none so a finger dragged across the card scratches it instead
   of scrolling the page. */
.isc-coat { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; transition: opacity .55s ease; }
.isc-coat.gone { opacity: 0; pointer-events: none; }

/* A SEALED card is one nobody has bought yet — there is nothing to scratch, so
   the finger has to go back to scrolling. Without this the card swallowed every
   swipe that started on it and the page would not move on a phone, which is
   most of the screen on the scratch card page. */
.isc-coat.sealed { cursor: default; touch-action: auto; }

.isc-banner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; text-align: center; }
.isc-banner .w { font: italic 900 clamp(56px, 17vw, 92px)/.85 var(--imp-sans); letter-spacing: -.05em; color: var(--sc-accent); text-shadow: 0 0 40px color-mix(in srgb, var(--sc-accent) 55%, transparent); animation: isc-slam .45s cubic-bezier(.2, 1.5, .4, 1); }
.isc-banner .w.long { font-size: clamp(44px, 13vw, 72px); }
.isc-banner .a { font: 800 clamp(26px, 7vw, 38px)/1 var(--imp-sans); font-variant-numeric: tabular-nums; background: var(--imp-bg); padding: 6px 14px; clip-path: var(--sc-slant); }
.isc-banner.lose { background: radial-gradient(closest-side, color-mix(in srgb, var(--imp-bg) 85%, transparent), transparent); }
.isc-banner.lose .w { color: var(--imp-text); text-shadow: none; font-size: clamp(34px, 10vw, 52px); }
.isc-banner.lose .a { font: 700 15px/1 var(--imp-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--imp-text-2); }
@keyframes isc-slam { 0% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.isc-foot { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--imp-mono); color: var(--imp-text-3); }
.isc-prog { flex: 1; height: 4px; background: var(--imp-line); position: relative; overflow: hidden; }
.isc-prog i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sc-accent); transition: width .15s; }
.isc-card.shake { animation: isc-shake .5s; }
@keyframes isc-shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 3px); } 40%, 60% { transform: translate(7px, -3px); } }

.isc-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: min(100%, 440px); }
.isc-controls .isc-btn { flex: 1 1 200px; white-space: nowrap; }
/* the sign-up links after the demo; the theme gives links their own hover colour */
a.isc-btn, a.isc-ghost { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
a.isc-btn:hover { color: var(--sc-on) !important; text-decoration: none; }
a.isc-ghost:hover { text-decoration: none; }

/* ---- guest demo ---- */
.isc-demo-note { width: min(100%, 440px); margin: 0; padding: 10px 12px; background: var(--imp-surface); border: 1px solid var(--imp-line-2); border-left: 3px solid var(--sc-accent); font: 400 13px/1.5 var(--imp-sans); color: var(--imp-text-2); }
.isc-demo-note b { margin-right: 6px; font: 700 11px/1 var(--imp-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--sc-accent); }
.isc-banner .d { padding: 5px 8px; background: var(--sc-accent); color: var(--sc-on); font: 700 12px/1 var(--imp-cond); letter-spacing: .24em; text-transform: uppercase; }

/* ---- side ---- */
.isc-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.isc-panel { background: color-mix(in srgb, var(--imp-surface) 88%, transparent); border: 1px solid var(--imp-line); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.isc-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.isc-panel h2 { margin: 0; font: 800 18px/1 var(--imp-sans); letter-spacing: -.02em; text-transform: uppercase; color: var(--imp-text); }
.isc-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.isc-pack { appearance: none; position: relative; overflow: hidden; text-align: left; cursor: pointer; color: var(--imp-text); background: var(--imp-surface-2); border: 1px solid var(--imp-line); padding: 12px 12px 11px; display: flex; flex-direction: column; gap: 6px; min-height: 96px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.isc-pack::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(108deg, transparent 0 22px, color-mix(in srgb, var(--pa) 14%, transparent) 22px 34px); -webkit-mask: linear-gradient(230deg, #000, transparent 70%); mask: linear-gradient(230deg, #000, transparent 70%); }
.isc-pack::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pa); }
.isc-pack > * { position: relative; }
/* The name always breaks between its words — ORANGE over CARD — so it stays in the
   dark left half of the tile instead of running across the ninja on the right. On a
   wide phone tile it used to fit on one line and did exactly that. min-content makes
   every space a break; keep-all stops a Chinese name ("橙色卡") being split one
   character per line, which min-content alone would do. */
.isc-pack .pn { font: italic 900 17px/.95 var(--imp-sans); letter-spacing: -.02em; text-transform: uppercase; width: min-content; word-break: keep-all; }
.isc-pack .pp { font: 700 11px/1 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--pa); }
.isc-pack .pt { margin-top: auto; font: 600 11px/1 var(--imp-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--imp-text-3); }
.isc-pack.on { border-color: var(--pa); background: var(--imp-surface-3); }
/* free cards waiting on the cheapest pack */
.isc-pack .pp.free { align-self: flex-start; margin: -3px 0; padding: 3px 6px; background: var(--pa); color: var(--sc-on); }

/* ---- pack art: wwwroot/images/scratch-card/{code}/ cover, prize-1..6 ---- */
.isc-card > .isc-cover { position: absolute; inset: 0 0 auto 0; height: 270px; pointer-events: none;
    background: linear-gradient(90deg, rgba(10, 15, 20, .95) 0%, rgba(10, 15, 20, .8) 42%, rgba(10, 15, 20, .3) 72%, rgba(10, 15, 20, .05) 100%), var(--sc-cover) right center / cover no-repeat;
    -webkit-mask: linear-gradient(180deg, #000 45%, transparent); mask: linear-gradient(180deg, #000 45%, transparent); }
.imp-scratch:not(.has-art) .isc-cover { display: none; }
/* a dark halo keeps the name readable where it runs over the art */
.imp-scratch.has-art :is(.isc-name, .isc-tag, .isc-head .isc-kicker) { text-shadow: 0 1px 2px rgba(10, 15, 20, .9), 0 0 18px rgba(10, 15, 20, .95), 0 0 36px rgba(10, 15, 20, .8); }
.isc-cell img { width: 62%; height: auto; aspect-ratio: 1; object-fit: contain; -webkit-user-drag: none; user-select: none; }
/* the cover takes over from the stripes; the left side stays dark for the name */
.isc-pack.has-cover { background: linear-gradient(90deg, rgba(10, 15, 20, .96) 0%, rgba(10, 15, 20, .86) 40%, rgba(10, 15, 20, .35) 72%, rgba(10, 15, 20, .05) 100%), var(--cover) right center / cover no-repeat, var(--imp-surface-2); }
.isc-pack.has-cover > span { text-shadow: 0 1px 2px rgba(10, 15, 20, .95), 0 0 10px rgba(10, 15, 20, .95); }
.isc-pack.has-cover::before { display: none; }

table.isc-pay { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.isc-pay th { font: 700 11px/1 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--imp-text-3); text-align: left; padding: 0 0 8px; border-bottom: 1px solid var(--imp-line); }
.isc-pay td { padding: 8px 0; border-bottom: 1px solid var(--imp-line); font: 600 14px/1 var(--imp-sans); color: var(--imp-text); }
.isc-pay td:last-child, .isc-pay th:last-child { text-align: right; color: var(--imp-text-2); }
.isc-pay td img { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; margin-right: 10px; }
.isc-pay tr.toprow td:first-child { color: var(--sc-accent); }
.isc-pay tr.locked td:first-child { color: var(--imp-text-3); }
.isc-pay tr.locked td:last-child { font: 700 11px/1 var(--imp-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-accent); }

.isc-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; background: var(--sc-accent); color: var(--sc-on); font: 700 13px/1 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; padding: 12px 18px; clip-path: var(--sc-slant); }

@media (prefers-reduced-motion: reduce) {
    .imp-scratch *, .imp-scratch *::before { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}