:root {
    --sakura: #ffb7c5;
    --sakura-soft: #fde2ec;
    --plum: #6b21a8;
    --plum-deep: #4c1d95;
    --magenta: #ec4899;
    --crimson: #be185d;
    --shrine-gold: #d4af37;
    --shrine-cream: #fef3c7;
    --ink: #2a0a1f;
}

html, body { height: 100%; }
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--ink);
    background: #fff5f8;
    background-image:
        radial-gradient(1200px 600px at 10% -10%, rgba(255,182,193,0.55), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(168,85,247,0.28), transparent 60%),
        radial-gradient(700px 500px at 50% 120%, rgba(236,72,153,0.20), transparent 60%),
        linear-gradient(180deg, #fff5f8 0%, #fdf2f8 100%);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Soft "anti-steal" UX: prevent selecting decorative chrome,
   but ALLOW selecting / pasting inside form controls + log box. */
body, .no-select { user-select: none; -webkit-user-select: none; }
input, textarea, [contenteditable="true"], .selectable, #logs { user-select: text !important; -webkit-user-select: text !important; }
img, svg { -webkit-user-drag: none; user-drag: none; pointer-events: auto; }

.torii-bg {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' opacity='0.07'><path fill='%236b21a8' d='M120 140h560v40H120zM150 90h500v30H150zM180 180h40v360h-40zM580 180h40v360h-40zM280 260h240v22H280z'/></svg>");
    background-repeat: no-repeat;
    background-position: center 70%;
    background-size: min(900px, 110%);
}

.glass {
    background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,240,247,0.65));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 20px 50px -20px rgba(131, 24, 67, 0.25),
        0 8px 20px -10px rgba(168, 85, 247, 0.20);
    border-radius: 24px;
}

.shrine-gold-border { position: relative; }
.shrine-gold-border::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, #fde68a, #ec4899 40%, #a855f7 70%, #fde68a);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.85;
}

.btn-yae {
    position: relative;
    background: linear-gradient(135deg, #7e22ce 0%, #db2777 55%, #f59e0b 130%);
    color: white;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
    box-shadow: 0 10px 25px -8px rgba(219, 39, 119, .55), 0 4px 10px rgba(126, 34, 206, .25);
    letter-spacing: .14em;
}
.btn-yae:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 16px 30px -8px rgba(219, 39, 119, .65), 0 6px 14px rgba(126,34,206,.3); }
.btn-yae:active { transform: translateY(0) scale(.99); }
.btn-yae:disabled { opacity: .65; cursor: progress; transform: none; }
.btn-yae::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .9s ease;
}
.btn-yae:hover::after { transform: translateX(120%); }

.ghost-btn {
    border: 1px solid rgba(168, 85, 247, .35);
    background: rgba(255,255,255,.7);
    color: #6b21a8;
    transition: all .2s;
}
.ghost-btn:hover { background: #fdf2f8; border-color: #ec4899; color: #be185d; }

.token-field {
    border: 1.5px solid rgba(236,72,153,.18);
    background: rgba(255,255,255,.85);
    transition: border-color .2s, box-shadow .2s;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.token-field:focus { border-color: #a855f7; box-shadow: 0 0 0 4px rgba(168,85,247,.15); outline: none; }

.quest-card { transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s; }
.quest-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -20px rgba(190,24,93,.35); }
.quest-img-container {
    position: relative; overflow: hidden; border-radius: 16px;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #fbcfe8, #ddd6fe);
}
.quest-img-container img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; display: block; }
.quest-img-container .img-skeleton {
    position: absolute; inset: 0;
    background: linear-gradient(110deg, #fbcfe8 8%, #fef3c7 18%, #fbcfe8 33%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position-x: -200%; } }
.quest-card:hover .quest-img-container img { transform: scale(1.08); }

.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .65rem; border-radius: 999px;
    font-size: 9px; font-weight: 800; letter-spacing: .14em;
    background: rgba(255,255,255,.92);
    color: #6b21a8;
    box-shadow: 0 2px 8px rgba(190,24,93,.18);
}
.badge-gold { background: linear-gradient(135deg,#fde68a,#fbbf24); color:#7c2d12; }

.sakura {
    position: fixed; top: -10%; z-index: -1;
    animation: fall 14s linear infinite;
    color: #f9a8d4; opacity: .7;
    font-size: 18px;
    text-shadow: 0 0 8px rgba(249,168,212,.4);
    pointer-events: none;
}
@keyframes fall {
    0%   { transform: translateY(-10vh) rotate(0deg);   left: var(--l); }
    100% { transform: translateY(110vh) rotate(540deg); left: calc(var(--l) + 8%); }
}

.title-gradient {
    background: linear-gradient(90deg, #6b21a8, #db2777 45%, #d4af37 80%, #6b21a8);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: shineText 6s linear infinite;
}
@keyframes shineText { to { background-position: 220% center; } }

.cinzel { font-family: 'Cinzel', serif; }
.jp { font-family: 'Noto Serif JP', serif; }

#logs {
    background:
        radial-gradient(800px 200px at 10% -20%, rgba(168,85,247,.35), transparent 60%),
        linear-gradient(180deg, #1e0b2e, #2a0a1f);
    color: #fbcfe8;
}
#logs::-webkit-scrollbar { width: 6px; }
#logs::-webkit-scrollbar-track { background: transparent; }
#logs::-webkit-scrollbar-thumb { background: #a855f7; border-radius: 999px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#fbcfe8,#a855f7); border-radius: 999px; }

.toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg,#4c1d95,#be185d);
    color: #fff5f8;
    padding: 10px 18px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    box-shadow: 0 10px 30px rgba(76,29,149,.5);
    opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.pulse-dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,.7);
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
    70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.watermark {
    position: fixed; right: 14px; bottom: 10px; z-index: 5;
    font-size: 10px; letter-spacing: .25em; font-weight: 700;
    color: rgba(107,33,168,.55);
    pointer-events: none;
}

@media (max-width: 640px) {
    .watermark { display: none; }
}