/* ==========================================================================
   05 · MEMES — draggable meme wall + meme maker
   ========================================================================== */

.memes { padding: clamp(100px, 16vh, 180px) 0 clamp(90px, 14vh, 160px); overflow: hidden; }

.memes__halftone {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(227, 24, 45, .5) 1.2px, transparent 1.6px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(60% 50% at 70% 35%, #000, transparent 75%), radial-gradient(40% 40% at 10% 80%, #000, transparent 75%);
    mask-image: radial-gradient(60% 50% at 70% 35%, #000, transparent 75%);
    opacity: .5;
    pointer-events: none;
}
.memes__marquee { position: absolute; top: clamp(60px, 10vh, 120px); left: 0; right: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.memes__marquee-track { display: flex; width: max-content; gap: .4em; font-family: var(--f-display); font-weight: 800; font-size: clamp(6rem, 16vw, 16rem); line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(244, 234, 216, .07); white-space: nowrap; }
.memes__marquee-track [lang="ko"] { font-family: var(--f-kr); font-weight: 400; letter-spacing: 0; -webkit-text-stroke-color: rgba(227, 24, 45, .16); }

.memes__head { position: relative; }
.memes__title { margin-top: 22px; font-family: var(--f-display); font-size: var(--fs-h2); letter-spacing: -.055em; line-height: .9; }
.memes__lead { margin-top: 20px; max-width: 46ch; color: var(--muted); font-size: var(--fs-lead); }
.memes__tbc { margin-top: 14px; }
.memes__hint { position: absolute; right: var(--gutter); bottom: 0; display: inline-flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.memes__hint .icon { font-size: 1.3rem; color: var(--red-hot); }

/* wall */
.meme-wall { position: relative; height: clamp(640px, 92vh, 900px); margin-top: clamp(30px, 5vh, 60px); }
.meme {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: clamp(190px, 17vw, 250px);
    touch-action: none;
    z-index: 1;
    perspective: 1100px;
    outline: none;
}
.meme__inner {
    position: relative;
    transform: rotate(var(--r));
    transform-style: preserve-3d;
}

/* flip: hover (mouse), focus (keyboard) or tap (.is-flipped, touch) shows the back */
.meme__flip {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.2, .85, .25, 1.12);
}
@media (hover: hover) {
    .meme:hover .meme__flip { transform: rotateY(180deg); }
}
.meme:focus-visible .meme__flip, .meme:has(:focus-visible) .meme__flip, .meme.is-flipped .meme__flip { transform: rotateY(180deg); }
.meme:focus-visible .meme__face { box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9), 0 0 0 2px var(--red-hot); }
.meme.is-dragging .meme__flip { transform: none; } /* picked up: show the meme itself */

.meme__face {
    border-radius: 18px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .06);
    transition: box-shadow .4s;
}
.meme.is-dragging .meme__face { box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .95), 0 0 0 2px var(--red-hot); }
.meme__face--front {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 14px 34px;
    background: var(--bg, #1c1819);
}
.meme__face--back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow: hidden;
    transform: rotateY(180deg);
    background:
        radial-gradient(120% 70% at 50% 110%, rgba(227, 24, 45, .45), transparent 60%),
        radial-gradient(rgba(255, 58, 76, .18) 1px, transparent 1.4px) 0 0 / 12px 12px,
        linear-gradient(165deg, #2c070b, #0e0405);
}
.meme__face--back::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 58, 76, .3);
    pointer-events: none;
}
.meme__mark {
    position: absolute;
    right: -6%;
    bottom: 14%;
    font-family: var(--f-kr);
    font-size: 9rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 58, 76, .22);
    pointer-events: none;
}
.meme__back-top { position: relative; display: flex; align-items: center; gap: 10px; }
.meme__avatar { flex: none; display: grid; place-items: end center; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #5a0a13, #1a0507); box-shadow: 0 0 0 2px var(--red), 0 0 16px rgba(227, 24, 45, .5); }
.meme__avatar .gamja-img { width: 150%; margin-bottom: -38%; }
.meme__back-id { display: flex; flex-direction: column; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); }
.meme__back-id em { font-style: normal; color: var(--red-hot); letter-spacing: .12em; }
.meme__back-body { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 6px 2px; }
.meme__back-kicker { font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.meme__back-kicker[lang="ko"] { font-family: var(--f-body); }
.meme__back-kr { font-family: var(--f-kr); font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.18; color: var(--cream); word-break: keep-all; }
.meme__back-en { font-size: .78rem; line-height: 1.4; color: var(--muted); }
.meme__remix {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 999px;
    background: var(--red);
    color: var(--cream);
    font-size: .78rem;
    font-weight: 800;
    box-shadow: 0 10px 24px -10px rgba(227, 24, 45, .9);
    transition: background-color .3s, color .3s;
}
.meme__remix:hover { background: var(--cream); color: var(--ink); }
.meme__remix .icon { font-size: 1rem; transition: transform .4s var(--ease-out); }
.meme__remix:hover .icon { transform: translateX(3px); }
.meme--blood { --bg: linear-gradient(170deg, #5a0a13, #2a0509); }
.meme--char { --bg: linear-gradient(170deg, #2a2324, #151112); }
.meme--red { --bg: linear-gradient(170deg, #e3182d, #8f0b18); }
.meme--ink { --bg: linear-gradient(170deg, #1a1416, #070506); }
.meme .gamja-img { width: 72%; margin: 8px 0; pointer-events: none; }
.meme__top, .meme__bottom {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 4px 14px rgba(0, 0, 0, .5);
}
.meme__tag { position: absolute; left: 14px; bottom: 10px; font-size: .6rem; font-weight: 800; letter-spacing: .14em; color: rgba(255, 255, 255, .45); }

/* maker */
.maker {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: center;
    margin-top: clamp(60px, 10vh, 120px);
}
.maker__frame {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 14px;
    background: linear-gradient(160deg, rgba(58, 5, 8, .9), rgba(20, 16, 17, .9));
    border: 1px solid var(--line-2);
    box-shadow: 0 50px 100px -40px rgba(227, 24, 45, .45);
}
.maker__frame canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: calc(var(--radius-lg) - 10px); background: var(--ink); }
.maker__caption { margin-top: 14px; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.maker__controls { display: flex; flex-direction: column; gap: 20px; }
.maker__kicker { font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--red-hot); }
.maker__title { margin-top: -8px; font-family: var(--f-display); font-size: clamp(2rem, 3.4vw, 3.2rem); letter-spacing: -.045em; line-height: .98; }
.maker__poses legend, .maker__bgs legend { margin-bottom: 10px; }
.maker__pose-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.maker__pose { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; background: rgba(244, 234, 216, .04); border: 1px solid var(--line); transition: border-color .3s, background-color .3s, transform .35s var(--ease-back); }
.maker__pose:hover { transform: translateY(-3px); }
.maker__pose input, .maker__bg input { position: absolute; opacity: 0; pointer-events: none; }
.maker__pose .gamja-img { height: 82%; }
.maker__pose .gamja-img img { height: 100%; width: auto; }
.maker__pose:has(input:checked) { border-color: var(--red-hot); background: rgba(227, 24, 45, .14); box-shadow: 0 0 0 3px rgba(227, 24, 45, .2); }
.maker__pose:has(input:focus-visible), .maker__bg:has(input:focus-visible) { outline: 2px solid var(--red-hot); outline-offset: 3px; }
.maker__bgs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.maker__bgs legend { width: 100%; }
.maker__bg { position: relative; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); transition: transform .35s var(--ease-back), box-shadow .3s; }
.maker__bg--blood { background: linear-gradient(160deg, #5a0a13, #2a0509); }
.maker__bg--char { background: linear-gradient(160deg, #2a2324, #151112); }
.maker__bg--red { background: linear-gradient(160deg, #ff3a4c, #a50d1b); }
.maker__bg--gold { background: linear-gradient(160deg, #f3c86a, #b07a2a); }
.maker__bg:has(input:checked) { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--red-hot); transform: scale(1.08); }
.maker__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
    .maker { grid-template-columns: 1fr; }
    .maker__preview { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 767px) {
    .memes__hint { position: static; margin-top: 18px; }
    .meme-wall {
        display: flex;
        gap: 14px;
        height: auto;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-block: 30px;
        scrollbar-width: none;
    }
    .meme-wall::-webkit-scrollbar { display: none; }
    .meme { position: relative; left: auto; top: auto; flex: 0 0 70vw; max-width: 280px; scroll-snap-align: center; touch-action: auto; }
    .maker__pose-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}