@import url("https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css");

body {
    font-family: system-ui, sans-serif;
    background: #111;
    color: #eee;
    display: flex;
    justify-content: center;
    padding: 2rem;
}

main {
    width: 100%;
    max-width: 960px;
    text-align: center;
}

.cylinder {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.card {
    position: relative;
    width: 140px;
    height: 220px;
    perspective: 1000px;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.card img {
    width: 100%;
    border-radius: 0.25rem;
    display: block;
}

.card .card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}
.card .card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}
.card .card-face.back {
    transform: rotateY(180deg);
    display: flex; align-items: center; justify-content: center;
}
.card.revealed .card-inner { transform: rotateY(0deg); }
.card:not(.revealed) .card-inner { transform: rotateY(180deg); }

.card.selected { transform: scale(1.25); z-index: 20; }
.card.selected::before {
    content: '';
    position: absolute; inset: -6px; border-radius: 8px; z-index: 5;
    background: conic-gradient(#22c55e, #3b82f6, #ef4444, #22c55e);
    padding: 4px;
    animation: rotate-border 2s linear infinite;
}

@keyframes rotate-border { to { transform: rotate(360deg); } }

.card .label {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    line-height: 1.2;
}

.card.chosen img {
    outline: 4px solid #2e7d32;
}

.card.chosen::before {
    content: "WATCH THIS";
    position: absolute;
    top: 6px; left: 6px;
    background: #2e7d32;
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
}

#spin {
    padding: 0.7rem 1.4rem;
    background: #2e7d32;
    color: #fff;
    border: 0;
    border-radius: 0.3rem;
    font-size: 1rem;
    cursor: pointer;
}

#spin:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#status { margin-top: 1rem; font-style: italic; }

/* Sidebar layout */
@media (min-width: 768px) {
    main { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; }
}

#sidebar { position: sticky; top: 2rem; }

.watchlist-item, .history-item { display: flex; gap: 0.5rem; align-items: center; padding: 0.4rem; border-radius: 0.35rem; background: rgba(255,255,255,0.02); }
.watchlist-item img, .history-item img { width: 46px; height: 64px; object-fit: cover; border-radius: 4px; }
.watchlist-item .meta { flex: 1; text-align: left; }
.watchlist-item .meta .title { font-weight: 700; font-size: 0.9rem; }
.watchlist-item .meta .sub { font-size: 0.75rem; color: #cbd5e1; }
.watchlist-item button.remove, .history-item button.remove { background: transparent; border: none; color: #fda4af; cursor: pointer; font-size: 0.9rem; }

.fave-btn { position: absolute; right: 6px; top: 6px; padding: 0.25rem 0.35rem; border-radius: 999px; background: rgba(0,0,0,0.4); color: #ffdce3; border: 1px solid rgba(255,255,255,0.06); cursor: pointer; }
.fave-btn.hearted { background: radial-gradient(circle at 30% 30%, #ff7aa2, #ff3b6f); color: #000; }

.history-item time { display: block; font-size: 0.7rem; color: #9ca3af; }