.tickets { display: grid; gap: 8px; }
.tk { border: 0; border-radius: 12px; padding: 10px 12px; text-align: left; cursor: pointer; display: grid; color: #1b1240; font: 500 13px var(--body); }
.tk b { font: 400 17px var(--display); }
.tk small { opacity: .75; }
.tk:disabled { opacity: .5; cursor: default; }
.tk-lucky, .ticket.t-lucky { background: linear-gradient(135deg, #7dffb9, #3ee6ff); }
.tk-gold, .ticket.t-gold { background: linear-gradient(135deg, #ffe57a, #ffb12e); }
.tk-diamond, .ticket.t-diamond { background: linear-gradient(135deg, #ff9bd6, #b28cff 60%, #7ad7ff); }
.scratch-board { display: grid; place-items: center; }
.ticket { width: min(420px, 100%); border-radius: 18px; padding: 14px; background: var(--panel-2); box-shadow: 4px 5px 0 rgba(0, 0, 0, .35); }
.ticket-empty { margin: 40px 0; text-align: center; color: var(--muted); }
.ticket-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; color: #1b1240; }
.ticket-head b { font: 400 24px var(--display); }
.sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-cell { position: relative; aspect-ratio: 1; background: #fffdf8; border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.sc-cell img { width: 62%; height: auto; }
.sc-cell canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity .35s; }
.sc-cell canvas.gone { opacity: 0; pointer-events: none; }
.sc-cell.hit { box-shadow: inset 0 0 0 4px #4dff8f; animation: vp-pop .5s ease-out; }
.paytable img { vertical-align: middle; }

/* no selecting or dragging pictures while scratching */
.ticket, .sc-cell { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sc-cell img { pointer-events: none; -webkit-user-drag: none; }