/* assets/css/scratch.css - 刮彩票主题 2.0 */

body.theme-scratch {
    --bg: #fdfdfd;
    background: radial-gradient(circle at 0% 0%, rgba(255,153,102,0.12), transparent 35%),
                radial-gradient(circle at 100% 10%, rgba(87,196,255,0.18), transparent 35%),
                linear-gradient(160deg, #fefefe 0%, #f3f5fb 100%);
    color: #1c1c28;
    min-height: 100vh;
}

.scratch-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 16px 16px;
    box-sizing: border-box;
}

.outer-card{
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(15,23,42,0.12);
    padding: 12px;
    box-sizing: border-box;
}

.ticket-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ticket-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    min-width: 0;
    opacity: 0;
    transform: translateY(12px);
    animation: rowIn 0.4s ease forwards;
}

.ticket-row.reverse {
    flex-direction: row-reverse;
}

.ticket-label {
    flex: 0 0 110px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ff9b40;
    overflow: hidden;
}

.ticket-label span {
    border-bottom: 2px solid rgba(255,155,64,0.5);
    padding-bottom: 2px;
    line-height: 1.4;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-shell {
    flex: 1;
    min-width: 0;
    display: flex;
    width: 100%;
}

.ticket {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 16px 18px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 140px;       /* PC 端统一高度 */
    min-height: 140px;
    max-height: 140px;
    box-sizing: border-box;
    color: #fff;
    box-shadow: 0 18px 32px rgba(0,0,0,0.18);
    isolation: isolate;
    flex: 1;
}

.ticket::before {
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.45), transparent 35%),
                radial-gradient(circle at 90% 0%, rgba(255,255,255,0.35), transparent 30%);
    z-index:0;
}

.ticket-content { 
    position: relative; 
    z-index: 1; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-line{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    max-width: 90%;
}

.main-icon{
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
}

.main-text{
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ticket-title {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
    text-shadow: 0 3px 12px rgba(0,0,0,0.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: left;
}

.ticket-desc {
    margin: 0;
    font-size: 18px;
    color: rgba(255,255,255,0.98);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 800;
    text-align: left;
}

.ticket-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.ticket-tags .tag-pill {
    background: rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
}

.ticket canvas {
    position:absolute;
    z-index:3;
    touch-action:none;
    transition:opacity 0.25s ease;
    border-radius: 12px;
}

.ticket.hidden canvas { opacity: 0; }

.scratch-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.scratch-actions .btn-primary { flex: 1; }
.scratch-actions .btn-secondary { flex: 1; }

.grad-1 { background: linear-gradient(135deg, #5aa8ff 0%, #4dd0ff 40%, #4f7dff 100%); box-shadow: 0 18px 32px rgba(79,125,255,0.38); }
.grad-2 { background: linear-gradient(135deg, #ffb74d 0%, #ff7043 40%, #ff5722 100%); box-shadow: 0 18px 32px rgba(255,112,67,0.4); }
.grad-3 { background: linear-gradient(135deg, #ffcc4d 0%, #ffa726 35%, #ff9800 100%); box-shadow: 0 18px 32px rgba(255,168,38,0.38); }
.grad-4 { background: linear-gradient(135deg, #29d4a5 0%, #1cc7d0 40%, #17a7b5 100%); box-shadow: 0 18px 32px rgba(23,167,181,0.4); }
.grad-5 { background: linear-gradient(135deg, #9b59ff 0%, #6c63ff 45%, #4e37f0 100%); box-shadow: 0 18px 32px rgba(108,99,255,0.42); }

@keyframes rowIn {
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 540px) {
    .ticket-grid{
        display:flex;
        flex-direction:column;
        gap:12px;
    }
    .ticket-row{
        display:flex;
        opacity:1;
        transform:none;
        animation:none;
        gap:8px;
    }
    .ticket-label{
        display:none;
    }
    .ticket-shell{
        width:100%;
        height:auto;
    }
    .ticket{ 
        padding: 12px 14px; 
        height: 120px;        /* 移动端固定高度，彻底不随文字变化 */
        min-height: 120px; 
        max-height: 120px; 
        box-sizing: border-box; 
    }
    .main-line { max-width: 100%; }
    .main-text { max-width: 100%; font-size:16px; }
}