/* Royal Kawaii Omikuji Style - Professionally Refactored */

:root {
    /* --- 1. PRIMITIVES (The Palette) --- */
    /* No hex codes should exist outside this block */

    /* Neutral */
    --prim-white: #ffffff;
    --prim-washi: #fcfaf2;  /* Warm Fibrous White base */
    --prim-sumi:  #6d544f;  /* Warm Reddish Brown Ink */
    --prim-stone: #a8a29e;  /* Warm Gray */

    /* Brand Colors */
    --prim-sakura-pale:  #fff0f5; /* Lavender Blush */
    --prim-sakura-soft:  #ffb8c6; /* Classic Sakura */
    --prim-sakura-vivid: #ea7a8f; /* Coral Pink Accent */
    --prim-gold:         #c5a026; /* Deep elegant gold (Reduced yellow) */

    /* Context Primitives (Wa-Modern Derived) */
    --prim-seiji: #e0f2f1;    /* Pale Celadon */
    --prim-teal:  #00695c;    /* Deep Teal */
    --prim-rikyu: #f1f8e9;    /* Pale Tea */
    --prim-moss:  #33691e;    /* Deep Moss */
    --prim-anzu:  #fff3e0;    /* Pale Apricot */
    --prim-kaki:  #e65100;    /* Deep Persimmon */
    --prim-indigo: #6366f1;   /* Lapis Indigo */

    /* Petal Animation Colors */
    --petal-pink: #ffc9d6;
    --petal-gold: #fceeb5;
    --petal-white: #ffffff;

    /* --- 2. SEMANTICS (The Usage) --- */
    
    /* Typography */
    --font-main: 'Kiwi Maru', 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
    --text-body:   var(--prim-sumi);
    --text-muted:  var(--prim-stone);
    --text-accent: var(--prim-sakura-vivid);
    --text-invert: var(--prim-white);

    /* UI Surfaces */
    --ui-bg-body:  var(--prim-washi);
    --ui-bg-card:  rgba(255, 255, 255, 0.9); /* Kept raw for alpha control */
    --ui-accent-gold:   var(--prim-gold);

    /* specific Context Mappings */
    --ctx-work-bg:   var(--prim-seiji);
    --ctx-work-text: var(--prim-teal);
    --ctx-life-bg:   var(--prim-rikyu);
    --ctx-life-text: var(--prim-moss);
    --ctx-fun-bg:    var(--prim-anzu);
    --ctx-fun-text:  var(--prim-kaki);

    /* Effects */
    --shadow-gold-rgb: 197, 160, 38; /* Matches --prim-gold */
    --gradient-btn-main: linear-gradient(135deg, var(--prim-sakura-vivid) 0%, #ffbf80 100%);
    
    /* Composite Shadows */
    --effect-text-glow: 0 0 10px rgba(var(--shadow-gold-rgb), 0.4), 0 0 20px rgba(var(--shadow-gold-rgb), 0.2);
    --effect-char-drop:   drop-shadow(0 10px 8px rgba(0,0,0,0.04)) drop-shadow(0 4px 3px rgba(0,0,0,0.1));
}

html, body {
  height: 100%;
  margin: 0;
  /* overflow: hidden; Removed to allow native scroll on mobile */
}

body {
    font-family: var(--font-main);
    letter-spacing: 0.03em;
    color: var(--text-body);
    min-height: 100vh;
    position: relative;
    background-color: var(--ui-bg-body);
}


input, textarea, button {
    font-family: inherit;
    letter-spacing: inherit;
}

/* Background Layer */
.bg-layer {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    background-image: url(assets/omikuji_bg.png);
    background-size: cover;
    opacity: 0.2;
}
@media (min-width: 768px) {
    .bg-layer {
        opacity: 0.25;
    }
}

/* --- Typography --- */

/* Title Group Container is handled by Tailwind utility classes in HTML (flex col) */

.title-sub {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-accent); /* Unify with Main Title (Coral) for "Pastel Kawaii" coherence */
    letter-spacing: 0.2em;
    opacity: 1.0;
    text-shadow:
        0 0 20px rgba(255, 255, 255, 1),
        0 0 30px rgba(255, 255, 255, 1),
        0 0 40px rgba(255, 255, 255, 0.9),
        0 0 50px rgba(255, 255, 255, 0.7),
        0 2px 8px rgba(255, 255, 255, 1); /* Very strong white glow for mobile */
}
@media (min-width: 768px) {
    .title-sub {
        font-size: 1.5rem;
        text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9); /* PC: Original subtle shadow */
    }
}

.title-main {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-accent);
    text-shadow:
        0 0 25px rgba(255, 255, 255, 1),
        0 0 35px rgba(255, 255, 255, 1),
        0 0 45px rgba(255, 255, 255, 0.9),
        0 0 55px rgba(255, 255, 255, 0.7),
        0 2px 10px rgba(255, 255, 255, 1),
        var(--effect-text-glow); /* Very strong white glow for mobile */
}
@media (min-width: 768px) {
    .title-main {
        font-size: 3rem;
        text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8), var(--effect-text-glow); /* PC: Original shadow */
    }
}

.text-instruction {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-body);
    line-height: 1.625;
}
@media (min-width: 768px) {
    .text-instruction { font-size: 1.25rem; }
}

/* Utilities for dynamic use */
.text-coral { color: var(--text-accent); }
.text-gold { color: var(--ui-accent-gold); }
.text-sumi { color: var(--text-body); }

/* --- Components --- */

/* Character Image - Sizing handled by Tailwind classes in HTML now for responsiveness */
.character-img {
    height: auto;
    object-fit: contain;
    border-radius: 0.75rem;
    filter: var(--effect-char-drop);
    transition: transform 0.5s ease-out; /* Smoother */
    will-change: transform, opacity;
}

.character-img:hover {
    transform: scale(1.02) translateY(-5px); /* Gentle float */
}

/* Main Card */
.omikuji-card {
    /* Dimensions handled in HTML */
    position: relative;
    z-index: 20;

    padding: 2.5rem 1.5rem;
    border-radius: 2rem; /* Soft corners */

    background-color: var(--ui-bg-card);
    backdrop-filter: blur(16px) saturate(180%); /* Premium Glass */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 10px 40px -10px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset; /* Inner light ring */
}
@media (min-width: 768px) {
    .omikuji-card {
        padding: 3rem 2.5rem; /* PC: Reduced padding for more content space */
        box-shadow:
            0 20px 60px -15px rgba(109, 84, 79, 0.1), /* Subtle warm shadow */
            0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    }
}

/* Main Action Button */
.btn-main-action {
    /* Width handled in HTML */
    padding: 1rem 2rem; /* Mobile: Compact padding */
    color: var(--text-invert);
    font-weight: 700;
    border-radius: 9999px;
    font-size: 1.125rem; /* Mobile: Slightly smaller font */
    position: relative;
    overflow: hidden;
    background: var(--gradient-btn-main);
    text-shadow: 0 1px 2px rgba(220, 100, 100, 0.4);
    box-shadow:
        0 10px 30px -5px rgba(234, 122, 143, 0.4),
        0 0 0 4px rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (min-width: 768px) {
    .btn-main-action {
        padding: 1.25rem 3rem; /* PC: Larger padding */
        font-size: 1.25rem; /* PC: Original font size */
    }
}
.btn-main-action:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 
        0 20px 40px -10px rgba(234, 122, 143, 0.5), 
        0 0 0 4px rgba(255, 255, 255, 0.4);
}
.btn-main-action:active {
    transform: scale(0.97);
}

/* Result Tag - Refined */
.result-tag {
    flex-shrink: 0;
    width: 3.5rem; /* Slightly larger for better visibility */
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.9rem; /* Slightly larger */
    font-weight: 700;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle depth */
}
.result-tag:hover {
    transform: rotate(-8deg) scale(1.1);
}
.tag-work { background-color: var(--ctx-work-bg); color: var(--ctx-work-text); }
.tag-life { background-color: var(--ctx-life-bg); color: var(--ctx-life-text); }
.tag-fun  { background-color: var(--ctx-fun-bg);  color: var(--ctx-fun-text); }

/* Retry Button - Refined */
.btn-retry,.btn-jump {
    /* Width handled in HTML */
    margin-top: 2rem;
    padding: 0.875rem 2rem;
    border: 2px solid var(--prim-sakura-soft);
    color: var(--text-accent);
    background-color: transparent;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 9999px;
    transition: all 0.3s ease;
    opacity: 0.8;
}
.btn-retry:hover,.btn-jump:hover {
    border-color: var(--text-accent);
    color: var(--text-invert);
    background-color: var(--text-accent);
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(234, 122, 143, 0.3);
}

/* Footer - Simplified */
.footer-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    opacity: 0.5;
    letter-spacing: 0.1em;
}

/* Result Specific Styles */
.result-year {
    color: var(--prim-gold);
}

.result-grade {
    color: var(--prim-kaki);
    text-shadow: 2px 2px 0 #fff;
}

.result-divider {
    background-color: var(--prim-gold);
}

.ai-message-label {
    color: var(--prim-indigo);
}

/* --- Animations --- */
.petals-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
    display: none;
}
.petal {
    position: absolute;
    background: var(--prim-sakura-soft);
    border-radius: 10px 0;
    opacity: 0.8;
}

/* Petal color variations */
.petal-pink {
    background: var(--petal-pink);
}

.petal-gold {
    background: var(--petal-gold);
}

.petal-white {
    background: var(--petal-white);
}

@keyframes fallRotate {
    to { transform: translateY(100vh) rotate(720deg); }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Character fade-in animation - subtle version for mobile */
.fade-in-character-subtle {
    animation: fadeInCharacterSubtle 0.6s ease-out forwards;
}

@keyframes fadeInCharacterSubtle {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Omikuji Tube Rattle */
.omikuji-shake {
    animation: rattle 0.1s infinite;
    transform-origin: center bottom;
}

@keyframes rattle {
    0% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(2deg) translateY(-1px); }
    50% { transform: rotate(0deg) translateY(0); }
    75% { transform: rotate(-2deg) translateY(-1px); }
    100% { transform: rotate(0deg) translateY(0); }
}