:root {
    --tarot-primary: #991b1b;
    --tarot-primary-dark: #7f1d1d;
    --tarot-accent: #f59e0b;
    --tarot-ink: #1f2937;
    --tarot-border: rgba(248, 113, 113, 0.28);
}

#art-main {
    position: relative;
}

.art-sheet {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 12px 32px;
}

.art-layout-wrapper, .art-content-layout, .art-content-layout-row, .art-layout-cell, .art-postcontent, .content-gipse-layout, .content-gipse-text-layout {
    width: 100%;
}

.program-game, .program-gipse {
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid var(--tarot-border);
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 251, 235, 0.98) 100%);
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.12);
}

.program-game h1, .program-gipse h2, .program-game h3, .program-gipse h3 {
    margin: 0;
}

.program-game > h1, .program-gipse > h2 {
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--tarot-primary-dark) 0%, #dc2626 100%);
    color: #fff;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.content-gipse-one, .program-game-layout, .content-gipse, .content-gipse-text {
    padding: 20px;
}

.program-game-item, .content-gipse-in, .content-gipse-layout, .content-gipse-text-layout {
    border-radius: 26px;
    border: 1px solid rgba(251, 191, 36, 0.22);
    background: linear-gradient(180deg, #fff 0%, #fff8f1 100%);
    padding: 20px;
}

.content-gipse-one h3, #resultgipsecard h3 {
    margin-bottom: 16px;
    text-align: center;
    color: var(--tarot-primary-dark);
    font-size: 1.15rem;
    font-weight: 800;
}

.gipse-choose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, #143f01 0%, #35a20e 55%, #035608 100%);
    color: #f4eded;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 16px 32px rgba(245, 158, 11, 0.18);
    padding: 10px 16px;
}

.gipse-submit, .gipse-start {
    border: 0;
    border-radius: 999px;
    padding: 12px 24px;
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    min-height: 60px;
    width: 100%;
}

.gipse-submit {
    background: linear-gradient(135deg, #991b1b 0%, #ff5656 52%, #bc041f 100%);
    color: #fff;
    box-shadow:0 4px 16px rgba(185, 28, 28, 0.44), 0 1.5px 0 #63040499, 0 -2px 8px #ff1b1be3 inset, 0 2px 8px rgba(218, 6, 6, 0.87) inset;
    transition: box-shadow 0.18s, transform 0.18s;
}

 .gipse-start {
    background: linear-gradient(135deg, #ffa22d 0%, #fde68a 55%, #f59e0b 100%);
    color: #7f1d1d;
    box-shadow:
        0 4px 16px rgba(249, 224, 22, 0.31), 0 1.5px 0 #915901b0, 0 -2px 8px #f9d200e3 inset, 0 2px 8px rgba(255, 216, 4, 0.87) inset;
    transition: box-shadow 0.18s, transform 0.18s;
}

.gipse-submit:active {
    box-shadow:
        0 1px 4px rgba(185, 28, 28, 0.12),
        0 0.5px 0 #fff6,
        0 1px 4px #fff2 inset,
        0 1px 4px rgba(185, 28, 28, 0.10) inset;
    transform: translateY(2px) scale(0.98);
}
.gipse-start:active {
    box-shadow:
        0 1px 4px rgba(245, 158, 11, 0.12),
        0 0.5px 0 #fff6,
        0 1px 4px #fff2 inset,
        0 1px 4px rgba(245, 158, 11, 0.10) inset;
    transform: translateY(2px) scale(0.98);
}

.gipse-submit:hover, .gipse-start:hover {
    transform: translateY(-1px);
    opacity: 0.96;
}

.gipse-action-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    padding: 24px;
    border-radius: 28px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    background: radial-gradient(circle at top left, rgba(254, 240, 138, 0.42), transparent 34%), linear-gradient(135deg, rgba(255, 251, 235, 0.98) 0%, rgba(255, 255, 255, 0.98) 55%, rgba(254, 242, 242, 0.94) 100%);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.08);
}

.gipse-action-copy {
    display: grid;
    gap: 12px;
}

.gipse-action-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(153, 27, 27, 0.08);
    color: var(--tarot-primary-dark);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gipse-action-title {
    margin: 0;
    color: #7f1d1d;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 900;
    line-height: 1.15;
}

.gipse-action-text {
    margin: 0;
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.8;
}

.gipse-progress-shell {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 24px;
    border: 1px solid rgba(248, 113, 113, 0.18);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.gipse-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gipse-progress-label {
    margin: 0;
    color: #7f1d1d;
    font-size: 0.92rem;
    font-weight: 800;
}

.gipse-progress-count {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 900;
    color: var(--tarot-primary-dark);
}

.gipse-progress-count strong {
    font-size: 1.55rem;
    line-height: 1;
}

.gipse-progress-count span {
    font-size: 0.92rem;
    color: #64748b;
}

.gipse-progress-track {
    overflow: hidden;
    height: 12px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.9);
    box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.08);
}

.gipse-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b 0%, #ef4444 55%, #991b1b 100%);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.28);
    transition: width 0.24s ease;
}

.gipse-progress-note {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.7;
}

.gipse-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.gipse-action-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

.gipse-card {
    position: relative;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.gipse-card:not(.is-selected):hover {
    transform: translateY(-3px);
}

.gipse-card img, .result-gipse-card img {
    width: 100px;
    height: 165px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
    margin: 0 auto;
}

.gipse-card.is-selected {
    filter: saturate(1.08);
}

.gipse-card.is-selected img {
    box-shadow: 0 18px 30px rgba(153, 27, 27, 0.24);
}

#pray img {
    display: block;
    max-width: 160px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.16));
}

#predictgipsecard .content-gipse-layout, #resultgipsecard .content-gipse-layout {
    overflow-x: auto;
}

#predictgipsecard table, #resultgipsecard table, .content-gipse table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
}

.content-gipse table th {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: var(--tarot-primary-dark);
    font-weight: 800;
}

.content-gipse table th, .content-gipse table td {
    padding: 12px 14px;
    border: 1px solid rgba(252, 165, 165, 0.28);
    border-radius: 18px;
    vertical-align: top;
    background: rgba(255, 255, 255, 0.92);
    line-height: 1.7;
}

.content-gipse img {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
}

.content-gipse-layout, .content-gipse-text-layout {
    color: var(--tarot-ink);
    line-height: 1.85;
}

.tarot-guide-shell {
    display: grid;
    gap: 20px;
}

.tarot-guide-intro {
    margin: 0;
    border: 1px solid rgba(252, 165, 165, 0.28);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(254, 242, 242, 0.96) 100%);
    padding: 18px 20px;
    color: #7f1d1d;
    font-weight: 600;
    line-height: 1.8;
}

.tarot-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.tarot-guide-card {
    overflow: hidden;
    border: 1px solid rgba(252, 165, 165, 0.28);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 237, 0.98) 100%);
    box-shadow: 0 20px 42px rgba(127, 29, 29, 0.08);
}

.tarot-guide-media {
    padding: 14px 14px 0;
}

.tarot-guide-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
}

.tarot-guide-copy {
    padding: 16px 18px 18px;
}

.tarot-guide-step {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(185, 28, 28, 0.08);
    padding: 6px 10px;
    color: #991b1b;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tarot-guide-copy h3 {
    margin: 10px 0 8px;
    color: #7f1d1d;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.5;
}

.tarot-guide-copy p {
    margin: 0;
    color: #475569;
    line-height: 1.8;
}

.tarot-article-shell {
    display: grid;
    gap: 18px;
}

.tarot-article-lead {
    margin: 0;
    border-left: 4px solid rgba(220, 38, 38, 0.32);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(254, 242, 242, 0.94) 100%);
    padding: 18px 20px;
    color: #475569;
    line-height: 1.9;
}

.tarot-article-lead span {
    color: #7f1d1d;
    font-weight: 800;
}

.tarot-article-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.tarot-article-card {
    border: 1px solid rgba(252, 165, 165, 0.28);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    padding: 18px 20px;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
}

.tarot-article-card-wide {
    grid-column: 1 / -1;
}

.tarot-article-card h3 {
    margin: 0 0 10px;
    color: #7f1d1d;
    font-size: 1.02rem;
    font-weight: 800;
}

.tarot-article-card p {
    margin: 0;
    color: #475569;
    line-height: 1.85;
}

.tarot-article-list {
    margin: 0;
    padding-left: 20px;
    color: #475569;
}

.tarot-article-list li + li {
    margin-top: 10px;
}

.content-gipse-layout ol, .content-gipse-layout ul {
    margin: 12px 0 0 24px;
}

.content-gipse-text-layout input {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 18px;
    background: #fff;
    padding: 14px 16px;
    color: #334155;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tarot-hero-card {
    overflow: hidden;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(135deg, rgba(65, 6, 6, 0.92) 0%, rgba(247, 15, 15, 0.9) 48%, rgba(196, 140, 0, 0.84) 100%);
    padding: 28px;
    color: #fff;
    box-shadow: 0 28px 80px rgba(127, 29, 29, 0.34);
}

@media (max-width: 900px) {
    #predictgipsecard table, #resultgipsecard table, .content-gipse table {
        border-spacing: 8px;
    }

    .program-game > h1, .program-gipse > h2 {
        padding: 18px 20px;
    }

    .content-gipse-one, .program-game-layout, .content-gipse, .content-gipse-text {
        padding: 16px;
    }

    .tarot-guide-grid {
        grid-template-columns: 1fr;
    }

    .tarot-article-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .art-sheet {
        padding: 0 10px 24px;
    }

    #predictgipsecard table, #resultgipsecard table {
        margin: 0 auto;
    }

    #predictgipsecard table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        border-spacing: 3px;
    }

    #predictgipsecard td {
        width: 16.66%;
        padding: 0;
    }

    #resultgipsecard table {
        width: max-content;
        border-spacing: 6px;
    }

    .gipse-card img {
        width: 100%;
        max-width: 48px;
        height: auto;
        aspect-ratio: 100 / 165;
        border-radius: 12px;
    }

    .result-gipse-card img {
        width: clamp(50px, 14vw, 68px);
        height: auto;
        aspect-ratio: 100 / 165;
        border-radius: 14px;
    }

    #predictgipsecard .content-gipse-in, #predictgipsecard .content-gipse-layout {
        padding-left: 8px;
        padding-right: 8px;
    }

    .gipse-action-panel {
        padding: 18px;
    }

    .gipse-progress-shell {
        padding: 14px;
    }

    .gipse-action-buttons {
        grid-template-columns: 1fr;
    }

    .program-game-item, .content-gipse-in, .content-gipse-layout, .content-gipse-text-layout {
        padding: 14px;
    }

    .tarot-guide-intro, .tarot-guide-copy {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tarot-guide-media {
        padding: 12px 12px 0;
    }

    .tarot-guide-card {
        border-radius: 22px;
    }

    #pray img {
        max-width: 120px;
    }

    .gipse-submit, .gipse-start {
        width: 100%;
    }
}