* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Roboto', sans-serif;
    -webkit-tap-highlight-color: transparent;
    background-color: #050505;
    color: #FFFFFF;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    line-height: 1.5;
}

#root { height: 100%; width: 100%; }

.hidden { display: none; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.cursor-pointer { cursor: pointer; }
.relative { position: relative; }
.absolute { position: absolute; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fillBar { from { width: 0%; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-fill-bar { animation: fillBar 1s ease-out forwards; }
.animate-spin { animation: spin 1s linear infinite; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.loader-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #050505; }
.loader { height: 48px; width: 48px; border-radius: 50%; border-bottom: 2px solid #FFD700; }

.app-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #050505; }
.app-wrapper { width: 100%; height: 100%; position: relative; background: #050505; display: flex; flex-direction: column; }
@media (min-width: 768px) { .app-wrapper { max-width: 896px; } }

.screen-container {
    display: flex; flex-direction: column; height: 100%; width: 100%; 
    padding: 4rem 2rem 0;
    align-items: center;
}
.intro-title {
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    white-space: pre-line;
    text-align: center;
    -webkit-text-stroke: 0.5px #000000;
    text-shadow: 1px 1px 0px #000000;
}
.intro-sub {
    font-size: 1rem;
    font-weight: 300;
    color: #9ca3af;
    margin-bottom: 4rem;
    max-width: 32rem;
    text-align: center;
}
@media (min-width: 768px) {
    .intro-title { font-size: 3.5rem; }
    .intro-sub { font-size: 1.125rem; }
}

.btn-wrapper { width: 100%; max-width: 20rem; }
.btn-base {
    position: relative; width: 100%; 
    padding: 1.25rem 1.5rem;
    text-align: center;
    transition: all 0.15s;
    border: 1px solid rgba(255, 215, 0, 0.3);
    font-weight: 400;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    color: #FFFFFF;
}
.btn-base:active { transform: scale(0.98); }
.btn-secondary { 
    color: #000000 !important; 
    border: 0.5px solid #000000 !important;
    font-weight: 900 !important;
}

.btn-content { z-index: 10; position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.btn-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.stat-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; }
.stat-bar { height: 100%; opacity: 0.8; transition: all 0.5s; border-right: 1px solid #000; }
@media (min-width: 768px) { .btn-base { font-size: 1rem; padding: 1rem 1.5rem; } }

.q-scroll-area { overflow-y: auto; display: flex; flex-direction: column; height: 100%; width: 100%; }
.q-header { width: 100%; display: flex; justify-content: center; align-items: center; padding: 1.5rem 1.5rem 0; }
.q-step { font-size: 0.75rem; font-weight: 700; color: #4b5563; letter-spacing: 0.2em; }
.q-content { 
    flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; 
    padding: 1rem 1.5rem 3rem; width: 100%; max-width: 56rem; margin: 0 auto;
}
.q-title {
    font-size: 1.5rem; font-weight: 900; margin-bottom: 2.5rem; text-align: center; white-space: pre-line;
    line-height: 1.3; letter-spacing: 0.025em; text-transform: uppercase;
    color: #FFD700;
    -webkit-text-stroke: 0.5px #000000;
    text-shadow: 1px 1px 0px #000000;
}
@media (min-width: 768px) { .q-title { font-size: 2.25rem; } }

.grid-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; width: 100%; }
.img-option { 
    position: relative; cursor: pointer; border: 1px solid #333; border-radius: 4px; overflow: hidden; 
    transition: all 0.2s; aspect-ratio: 1/1; background: #111;
}
.img-option:active { transform: scale(0.98); }
.img-option img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; filter: grayscale(20%); }
.img-option:hover img { transform: scale(1.05); filter: grayscale(0%); }
.img-label-overlay { 
    position: absolute; bottom: 0; left: 0; width: 100%; 
    background: rgba(255,215,0,0.9); color: #000; padding: 0.5rem; 
    font-size: 0.7rem; text-align: center; font-weight: 900; 
    line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase;
    border-top: 1px solid #000;
}

.outcome-content {
    width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;
    padding: 2.5rem 2rem 0; position: relative; z-index: 10; max-width: 42rem; margin: 0 auto;
}
.outcome-label { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.2em; margin-bottom: 2rem; text-transform: uppercase; color: #FFD700; }
.outcome-title { 
    font-size: 2.25rem; font-weight: 900; margin-bottom: 0.5rem; text-align: center; line-height: 1; 
    letter-spacing: -0.02em; text-transform: uppercase; color: #FFD700;
    -webkit-text-stroke: 0.6px #000;
    text-shadow: 2px 2px 0px #000;
}
.outcome-sub { font-size: 1.1rem; font-weight: 700; margin-bottom: 2rem; text-align: center; letter-spacing: 0.05em; color: #9ca3af; }
.outcome-desc { font-size: 1rem; font-weight: 300; text-align: center; margin-bottom: 4rem; line-height: 1.625; color: #e5e7eb; }

.product-card { width: 100%; border-top: 1px solid #333; border-bottom: 1px solid #333; padding: 2.5rem 0; text-align: center; margin-bottom: 3rem; background: rgba(255,215,0,0.02); }
.product-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; color: #6b7280; margin-bottom: 1rem; text-transform: uppercase; }
.product-name { font-size: 1.875rem; font-weight: 900; margin-bottom: 1rem; text-transform: uppercase; color: #FFD700; }
.product-sub { font-size: 0.95rem; font-weight: 400; color: #d1d5db; line-height: 1.6; max-width: 34rem; margin: 0 auto; }

.restart-btn { 
    background: none; border: none; padding: 1rem; font-size: 0.75rem; font-weight: 700; 
    color: #4b5563; text-decoration: underline; letter-spacing: 0.15em; text-transform: uppercase; 
    cursor: pointer;
}

:root {
    --react-star: #fbbf24;
    --react-like: #00c4b4;
    --react-heart: #ef4444;
}

.reaction-wrapper {
    margin: 0 auto 3rem;
    width: 100%;
    max-width: 100%;
    padding: 0 5px;
    display: flex;
    justify-content: center;
    gap: 15px;
    font-family: sans-serif;
}

.btn-react {
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 50px;
    padding: 8px 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    user-select: none;
    color: #d1d5db;
}
.btn-react.disabled { opacity: 0.5; cursor: not-allowed; }

.btn-react svg {
    width: 20px;
    height: 20px;
    transition: all 0.2s ease;
    fill: currentColor;
    stroke: none;
}

.btn-react span.count { font-weight: 700; }
.btn-react:active:not(.disabled) { transform: scale(0.95); }
.btn-react:hover:not(.disabled) { transform: translateY(-2px); box-shadow: 0 3px 6px rgba(0,0,0,0.5); }

.btn-react[data-type="star"] { color: var(--react-star); border-color: rgba(251, 191, 36, 0.3); }
.btn-react.active[data-type="star"] {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: var(--react-star);
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
}

.btn-react[data-type="like"] { color: var(--react-like); border-color: rgba(0, 196, 180, 0.3); }
.btn-react.active[data-type="like"] {
    background-color: rgba(0, 196, 180, 0.1);
    border-color: var(--react-like);
    box-shadow: 0 0 0 2px rgba(0, 196, 180, 0.2);
}

.btn-react[data-type="heart"] { color: var(--react-heart); border-color: rgba(239, 68, 68, 0.3); }
.btn-react.active[data-type="heart"] {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--react-heart);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}