:root {
    --bg-color: #FFCE27;
    --dark-color: #28292A;
    --font-family: 'Noto Sans JP', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; } /* bodyのoverflowはhiddenのまま */
body { background-color: var(--bg-color); color: var(--dark-color); font-family: var(--font-family); }
.screen { display: none; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; height: 100dvh; position: fixed; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease-in-out; }
.screen.active { display: flex; opacity: 1; }

/* --- 1. 初期画面 --- */
#initial-screen { justify-content: space-between; padding: 5vh 0; }
.initial-logo { width: 50vw; /* 修正: さらにサイズを大きく */ max-width: 200px; margin-top: 20vh; }
#draw-button, #redraw-button { background-color: var(--bg-color); color: var(--dark-color); border: 2px solid var(--dark-color); padding: 15px 40px; font-size: 1rem; font-weight: bold; border-radius: 50px; cursor: pointer; transition: transform 0.2s; flex-shrink: 0; }
#draw-button:hover, #redraw-button:hover { transform: scale(1.05); }

/* --- 2. ドローアニメーション & レアリティ演出 --- */
#draw-animation-screen { background-color: var(--dark-color); }
#particle-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.particle { position: absolute; background-color: white; border-radius: 50%; animation: particle-anim 2s ease-out forwards; }
@keyframes particle-anim {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
.flash { position: absolute; top: 50%; left: 50%; width: 200vw; height: 200vh; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 60%); transform: translate(-50%, -50%) scale(0); animation: flash-anim 1s ease-out 0.5s forwards; }
@keyframes flash-anim {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
/* レアリティ示唆 */
.hint-rarity-ssr .particle, .hint-rarity-scr .particle { background-color: #ffd700; }
.hint-rarity-ssr .flash, .hint-rarity-scr .flash { background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, rgba(255, 215, 0, 0) 60%); }
.hint-rarity-uhr .particle, .hint-rarity-csr .particle { animation-duration: 1.5s; background: linear-gradient(45deg, red, yellow, lime, cyan, blue, magenta, red); background-size: 400%; animation: particle-anim 1.5s ease-out forwards, rainbow-bg-hint 2s linear infinite; }
@keyframes rainbow-bg-hint {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
.hint-rarity-uhr .flash, .hint-rarity-csr .flash { background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 60%); animation-duration: 0.5s; }

/* --- 3. カード表示画面 --- */
#card-display-screen {
    justify-content: flex-start; /* カードを上部に寄せるのではなく、コンテンツ全体をスクロール可能に */
    padding: 0; /* paddingをリセット */
    overflow-y: auto; /* スクロールを許可 */
    scroll-snap-type: y mandatory; /* スクロールスナップを有効に */
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズに */
}
#card-wrapper {
    width: 100%;
    height: 100vh; /* カードラッパーを画面の高さに合わせる */
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    flex-shrink: 0; /* スクロール時に縮まないように */
    scroll-snap-align: start; /* スクロールスナップの基準点 */
}
.card { transform: translateY(120vh) rotateX(45deg) rotateZ(30deg) scale(0.5); }
.card.show { animation: card-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes card-appear {
    0% { transform: translateY(120vh) rotateX(45deg) rotateZ(30deg) scale(0.5); }
    60% { transform: translateY(-5vh) rotateX(0deg) rotateZ(-5deg) scale(1.05); }
    80% { transform: translateY(2vh) rotateX(0deg) rotateZ(3deg) scale(0.98); }
    100% { transform: translateY(0) rotateX(0deg) rotateZ(0deg) scale(1); }
}
.card { width: 90vw; max-width: 400px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: 1px solid rgba(255, 255, 255, 0.2); position: relative; }
.card-inner { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.card-logo { width: 150px; /* 修正: さらにサイズを大きく */ align-self: center; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
/* 星の評価コンテナ */
.star-rating { display: flex; align-items: center; gap: 2px; }
/* 星のアイコン */
.star-rating .star-icon { width: 20px; height: 20px; flex-shrink: 0; }

.card-number, .card-rarity, .card-info { position: relative; z-index: 2; }
.card-number { font-weight: bold; font-size: 1.1rem; }
.card-rarity { font-weight: bold; font-size: 0.9rem; text-align: left; }
.card-image-wrapper { width: 100%; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background-color: #eee; }
.card-main-image { width: 100%; height: 100%; object-fit: cover; }
.card-info { text-align: center; font-size: 0.9rem; line-height: 1.5; }
.card-info p:nth-child(2) { font-size: 1.2rem; font-weight: bold; }
.card-links { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.card-button { text-decoration: none; padding: 12px; border-radius: 8px; text-align: center; font-weight: bold; transition: transform 0.2s, box-shadow 0.2s; position: relative; z-index: 2; }
.card-button:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.button-row { display: flex; gap: 8px; }
.full-width { width: 100%; }
.half-width { width: 50%; flex-grow: 1; }

/* --- 金属の光沢エフェクト --- */
.shine-effect::after { content: ''; position: absolute; top: -50%; left: -60%; width: 20%; height: 200%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); transform: rotate(25deg); animation: shine 5s ease-in-out infinite; z-index: 1; }
@keyframes shine { 0% { left: -60%; } 20% { left: 120%; } 100% { left: 120%; } }

/* --- レアリティ別デザイン & 揺れアニメーション適用 --- */
.card.show.rarity-r { animation: card-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, sway-light 8s ease-in-out infinite 0.8s; }
.rarity-r { background: linear-gradient(135deg, #a97142, #8c5a2b 30%, #b87333 60%, #CD7F32); color: white; }
.rarity-r .card-button { background-color: #8c5a2b; color: white; }
.rarity-r .star-icon { filter: invert(1); }

.card.show.rarity-sr { animation: card-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, sway-medium 6s ease-in-out infinite 0.8s; }
.rarity-sr { background: linear-gradient(135deg, #f0f0f0, #b0b0b0 30%, #dcdcdc 60%, #ffffff); color: var(--dark-color); }
.rarity-sr .card-button { background-color: #a9a9a9; color: var(--dark-color); }
.rarity-sr .star-icon { filter: none; }

.card.show.rarity-ssr { animation: card-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, sway-strong 5s ease-in-out infinite 0.8s; }
.rarity-ssr { background: linear-gradient(135deg, #fff8c4, #e4a21d 30%, #f0c000 60%, #FFD700); color: var(--dark-color); }
.rarity-ssr .card-button { background-color: #f0c000; color: var(--dark-color); }
.rarity-ssr .star-icon { filter: drop-shadow(0 0 3px rgba(255,215,0,0.7)); }

.card.show.rarity-scr { animation: card-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, sway-mysterious 5s ease-in-out infinite 0.8s; }
.rarity-scr { background: #000; color: #0cff66; position: relative; box-shadow: 0 0 15px rgba(12, 255, 102, 0.6); }
.rarity-scr::before, .rarity-scr::after { content: ''; position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px; border-radius: 25px; z-index: 0; pointer-events: none; }
.rarity-scr::before { background: linear-gradient(45deg, #0cff66, #00aaff, #0cff66); background-size: 200% 200%; animation: scr-border-glow 4s ease-in-out infinite alternate; filter: blur(8px); }
.rarity-scr::after { background: repeating-linear-gradient(-45deg, rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 2px, transparent 2px, transparent 10px); opacity: 0.3; animation: scr-pattern-move 10s linear infinite; }
.rarity-scr .card-inner { position: relative; z-index: 1; background-color: rgba(0, 0, 0, 0.7); border-radius: 15px; }
.rarity-scr .card-button { background-color: #0cff66; color: #000; box-shadow: 0 0 8px rgba(12, 255, 102, 0.8); }
.rarity-scr .star-icon { filter: brightness(2) drop-shadow(0 0 5px #0cff66); }
@keyframes scr-border-glow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes scr-pattern-move { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } }

.card.show.rarity-csr { animation: card-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, sway-intense 4s ease-in-out infinite 0.8s, glitch-container 3s linear infinite 0.8s; }
.rarity-csr { background: linear-gradient(135deg, #00f2fe, #4facfe); color: white; }
.rarity-csr::before, .rarity-csr::after { content:''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; z-index: 0; }
.rarity-csr::before { animation: glitch-effect 1s infinite linear alternate-reverse; transform: translate(-10px, -5px); mix-blend-mode: screen; background-color: #ff00ff; }
.rarity-csr::after { animation: glitch-effect 1.5s infinite linear alternate-reverse; transform: translate(10px, 5px); mix-blend-mode: screen; background-color: #00ffff; }
@keyframes glitch-effect { 0%, 100% { clip-path: inset(50% 0 30% 0); } 25% { clip-path: inset(10% 0 80% 0); } 50% { clip-path: inset(90% 0 5% 0); } 75% { clip-path: inset(40% 0 45% 0); } }
.rarity-csr .card-button { background-color: #4facfe; color: white; }
.rarity-csr .star-icon { filter: brightness(1.5) drop-shadow(0 0 5px #00aaff); }

.card.show.rarity-uhr { animation: card-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, sway-extreme 3s ease-in-out infinite 0.8s, rainbow-bg 4s ease infinite 0.8s; }
.rarity-uhr { background: linear-gradient(135deg, #ff0000 0%, #ff7f00 16%, #ffff00 33%, #00ff00 50%, #0000ff 66%, #4b0082 83%, #ee82ee 100%); background-size: 400% 400%; color: white; }
@keyframes rainbow-bg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.rarity-uhr .card-button { background-color: rgba(0,0,0,0.3); color: white; }
.rarity-uhr .star-icon { filter: brightness(2) drop-shadow(0 0 8px rgba(255,255,255,0.7)); }

/* --- 揺れアニメーション定義 --- */
@keyframes sway-light { 0%, 100% { transform: rotateZ(0); } 50% { transform: rotateZ(1.5deg); } }
@keyframes sway-medium { 0%, 100% { transform: translate(0, 0) rotateZ(0); } 50% { transform: translate(0, -5px) rotateZ(-2.5deg); } }
@keyframes sway-strong { 0%, 100% { transform: translate(0, 0) rotateZ(0); } 25% { transform: translate(4px, -6px) rotateZ(3deg); } 75% { transform: translate(-3px, 3px) rotateZ(-2deg); } }
@keyframes sway-intense { 0%, 100% { transform: translate(0, 0) rotateZ(0); } 20% { transform: translate(5px, -8px) rotateZ(3.5deg); } 40% { transform: translate(-5px, 4px) rotateZ(-3.5deg); } 60% { transform: translate(4px, 5px) rotateZ(3.5deg); } 80% { transform: translate(-4px, -6px) rotateZ(-3.5deg); } }
@keyframes sway-mysterious { 0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0) rotateY(0); } 20% { transform: translate3d(6px, -9px, 15px) rotateZ(4deg) rotateY(6deg); } 40% { transform: translate3d(-7px, 5px, -8px) rotateZ(-3.5deg) rotateY(-5deg); } 60% { transform: translate3d(8px, 3px, 12px) rotateZ(4.5deg) rotateY(7deg); } 80% { transform: translate3d(-6px, -9px, -15px) rotateZ(-4deg) rotateY(-6.5deg); } }
@keyframes sway-extreme { 0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0); } 15% { transform: translate3d(8px, -12px, 0) rotateZ(4deg) rotateY(7deg); } 30% { transform: translate3d(-7px, 6px, 0) rotateZ(-3.5deg) rotateY(-6deg); } 45% { transform: translate3d(5px, -9px, 0) rotateZ(3deg) rotateY(5deg); } 60% { transform: translate3d(-8px, 8px, 0) rotateZ(-4deg) rotateY(-7deg); } 75% { transform: translate3d(7px, -5px, 0) rotateZ(3.5deg) rotateY(6deg); } }


/* --- 「もう一度引く！」ボタン --- */
#redraw-button {
    margin-top: 10vh; /* カードの下に余白を作り、スクロールで現れるように */
    margin-bottom: 5vh; /* 下部の余白 */
    scroll-snap-align: end; /* ボタンが画面下部にスナップするように */
    flex-shrink: 0; /* スクロール時に縮まないように */
}


/* --- レスポンシブ対応 --- */
@media (max-height: 700px) {
    .card-inner { padding: 15px; gap: 8px; }
    .card-logo { width: 120px; }
    .card-header { font-size: 0.9rem; }
    .star-rating .star-icon { width: 18px; height: 18px; }
    .card-info p { font-size: 0.8rem; }
    .card-info p:nth-child(2) { font-size: 1rem; }
    .card-button { padding: 10px; font-size: 0.9rem; }
}
@media (max-height: 600px) {
    .card-inner { padding: 10px; gap: 5px; }
    .card-logo { width: 100px; }
    .card-header { font-size: 0.9rem; }
    .star-rating .star-icon { width: 16px; height: 16px; }
    .card-info { display: none; }
    .card-links { margin-top: 0; }
    #redraw-button { margin-top: 5vh; } /* 小さい画面では余白を減らす */
}