:root {
    --bg: #fff6f8;
    --card: #ffffff;
    --ink: #1a1a1a;
    --muted: #666;
    --muted2: #888;
    --border: #eee;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    height: 100vh;
}

.wrap {
    height: 100%;
    display: grid;
    place-items: center;
    padding: 18px;
}

.card {
    width: min(520px, 92vw);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 22px 20px 18px;
    text-align: center;
}

h1 {
    margin: 10px 0 6px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.pig {
    position: relative;
    display: grid;
    place-items: center;
    margin: 4px auto 8px;
    width: 190px;
    height: 190px;
    border-radius: 999px;
    user-select: none;
    cursor: pointer;
    transition: transform 120ms ease;
}

.pig:focus { outline: none; box-shadow: 0 0 0 4px rgba(255, 105, 180, 0.18); }

/* Hug reaction: bounce + squish */
/* --- Hug variants (randomly applied) --- */

.pig.hugging {
    /* keep your existing hug-bounce if you want, but variants override it */
}

/* Variant 1: classic squish + arms wrap (default-ish) */
.pig.hugging.hug-1 { animation: hug-bounce-1 420ms ease; }
@keyframes hug-bounce-1 {
    0% { transform: scale(1); }
    30% { transform: scale(1.02) translateY(-2px); }
    55% { transform: scale(0.96) translateY(2px); }
    100% { transform: scale(1); }
}
.pig.hugging.hug-1 .heart { animation-duration: 520ms; }

/* Variant 2: BIG squeeze (deeper squish), slower release */
.pig.hugging.hug-2 { animation: hug-bounce-2 560ms cubic-bezier(.2,.9,.2,1); }

/* Spin-hug: tiny rotation makes it feel alive */
.pig.hugging.hug-spin {
    animation: spin-hug 520ms ease;
}
@keyframes spin-hug {
    0%   { transform: rotate(0deg) scale(1); }
    20%  { transform: rotate(-2.2deg) scale(1.02); }
    45%  { transform: rotate(2.6deg) scale(0.98); }
    75%  { transform: rotate(-1.2deg) scale(1.01); }
    100% { transform: rotate(0deg) scale(1); }
}

/* Nuzzle: tiny vertical bounce (subtle) */
.pig.hugging.hug-nuzzle {
    animation: nuzzle-bounce 480ms ease;
}
@keyframes nuzzle-bounce {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-2px) scale(1.01); }
    60%  { transform: translateY(1px) scale(0.99); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes hug-bounce-2 {
    0% { transform: scale(1); }
    18% { transform: scale(1.04) translateY(-3px); }
    45% { transform: scale(0.92, 1.06) translateY(3px); }
    70% { transform: scale(0.98, 1.01) translateY(1px); }
    100% { transform: scale(1); }
}
.pig.hugging.hug-2 .heart { animation-duration: 720ms; }

/* Variant 3: wiggle-hug (little side shimmy) */
.pig.hugging.hug-3 { animation: hug-bounce-3 520ms ease; }
@keyframes hug-bounce-3 {
    0% { transform: scale(1) translateX(0); }
    20% { transform: scale(1.02) translateX(-2px); }
    40% { transform: scale(0.97) translateX(2px); }
    60% { transform: scale(1.01) translateX(-1px); }
    80% { transform: scale(0.99) translateX(1px); }
    100% { transform: scale(1) translateX(0); }
}
.pig.hugging.hug-3 .heart { animation-duration: 600ms; }

/* Optional: make hearts burst wider in hug-2, tighter in hug-1 */
.pig.hugging.hug-2 .heart:nth-child(1) { margin-left: -34px !important; }
.pig.hugging.hug-2 .heart:nth-child(3) { margin-left: 34px !important; }
.pig.hugging.hug-1 .heart:nth-child(1) { margin-left: -22px !important; }
.pig.hugging.hug-1 .heart:nth-child(3) { margin-left: 22px !important; }
@keyframes hug-bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.02) translateY(-2px); }
    55%  { transform: scale(0.96) translateY(2px); }
    100% { transform: scale(1); }
}

/* Hearts burst layer */
.hearts {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.heart {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    opacity: 0;
    font-size: 18px;
    will-change: transform, opacity;
}

.pig.hugging .heart {
    animation: heart-pop 520ms ease forwards;
}

@keyframes heart-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    18%  { opacity: 1; transform: translate(-50%, -65%) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -110%) scale(0.9); }
}

.sub {
    position: relative;
    display: inline-block;
    color: var(--muted);
    font-size: 0.95rem;
    min-height: 1.4em;
}

.oink {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -24px;
    font-size: 0.9rem;
    color: var(--muted2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.oink.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.stat {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 8px;
}

.label {
    color: var(--muted);
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.value {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.meta {
    margin-top: 14px;
    color: var(--muted2);
    font-size: 0.8rem;
}

/* Hug cursor */
:root{
    --hug-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M22 28c-3 0-6 3-6 7v12c0 3 2 5 5 5h4V28h-3z' fill='%23ff93b3'/%3E%3Cpath d='M42 28c3 0 6 3 6 7v12c0 3-2 5-5 5h-4V28h3z' fill='%23ff93b3'/%3E%3Ccircle cx='32' cy='30' r='14' fill='%23ffb3c7'/%3E%3Ccircle cx='26' cy='30' r='2' fill='%232a2a2a'/%3E%3Ccircle cx='38' cy='30' r='2' fill='%232a2a2a'/%3E%3Crect x='26' y='34' width='12' height='8' rx='4' fill='%23ff8fb2'/%3E%3Cpath d='M26 46c4 3 8 3 12 0' stroke='%23d65c88' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M11 40c8-8 12-8 16 0' stroke='%23ff6fa0' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M53 40c-8-8-12-8-16 0' stroke='%23ff6fa0' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 32 32;
}

body { cursor: var(--hug-cursor), auto; }
.pig, button, a, [role="button"] { cursor: var(--hug-cursor), pointer; }
.pig.hugging

:root{
    --hug-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M22 28c-3 0-6 3-6 7v12c0 3 2 5 5 5h4V28h-3z' fill='%23ff93b3'/%3E%3Cpath d='M42 28c3 0 6 3 6 7v12c0 3-2 5-5 5h-4V28h3z' fill='%23ff93b3'/%3E%3Ccircle cx='32' cy='30' r='14' fill='%23ffb3c7'/%3E%3Ccircle cx='26' cy='30' r='2' fill='%232a2a2a'/%3E%3Ccircle cx='38' cy='30' r='2' fill='%232a2a2a'/%3E%3Crect x='26' y='34' width='12' height='8' rx='4' fill='%23ff8fb2'/%3E%3Cpath d='M26 46c4 3 8 3 12 0' stroke='%23d65c88' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M11 40c8-8 12-8 16 0' stroke='%23ff6fa0' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M53 40c-8-8-12-8-16 0' stroke='%23ff6fa0' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 32 32;

    /* closed-hug version */
    --hug-cursor-closed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='30' r='14' fill='%23ffb3c7'/%3E%3Cpath d='M17 40c9-10 21-10 30 0' stroke='%23ff6fa0' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='26' cy='30' r='2' fill='%232a2a2a'/%3E%3Ccircle cx='38' cy='30' r='2' fill='%232a2a2a'/%3E%3Crect x='26' y='34' width='12' height='8' rx='4' fill='%23ff8fb2'/%3E%3C/svg%3E") 32 32;
}

/* apply to pig + EVERYTHING inside pig (svg, paths, hearts, etc.) */
.pig, .pig * { cursor: var(--hug-cursor), pointer; }

/* when hugging, swap to closed-hug cursor */
.pig.hugging, .pig.hugging * { cursor: var(--hug-cursor-closed), pointer; }{ cursor: var(--hug-cursor), grabbing; }


/* --- ARM OVERRIDES (put at the very end of style.css) --- */

/* Resting: arms come from outside */
.pig svg path.armL { transform: translate(-22px, 2px) rotate(-18deg) !important; }
.pig svg path.armR { transform: translate(22px, 2px) rotate(18deg) !important; }

.pig svg path.armL,
.pig svg path.armR {
    transition: transform 220ms ease !important;
    transform-origin: 80px 94px !important;
}

/* Per-style arm transforms (these MUST differ visibly) */
.pig.hugging.hug-1 svg path.armL { transform: translate(16px, 0) rotate(18deg) !important; }
.pig.hugging.hug-1 svg path.armR { transform: translate(-16px, 0) rotate(-18deg) !important; }

.pig.hugging.hug-2 svg path.armL { transform: translate(28px, 4px) rotate(34deg) !important; }
.pig.hugging.hug-2 svg path.armR { transform: translate(-28px, 4px) rotate(-34deg) !important; }

.pig.hugging.hug-3 svg path.armL { transform: translate(10px, -1px) rotate(8deg) !important; }
.pig.hugging.hug-3 svg path.armR { transform: translate(-10px, -1px) rotate(-8deg) !important; }

.pig.hugging.hug-nuzzle svg path.armL { transform: translate(8px, 2px) rotate(6deg) !important; }
.pig.hugging.hug-nuzzle svg path.armR { transform: translate(-8px, 2px) rotate(-6deg) !important; }

.pig.hugging.hug-spin svg path.armL { transform: translate(22px, 1px) rotate(22deg) !important; }
.pig.hugging.hug-spin svg path.armR { transform: translate(-22px, 1px) rotate(-22deg) !important; }

/* =========================
   ARM DEBUG OVERRIDE (FINAL)
   Put this at the VERY END
   ========================= */

.pig svg path.armL,
.pig svg path.armR {
    transition: transform 260ms ease !important;
    transform-origin: 80px 94px !important;
    will-change: transform;
}

/* Resting pose: arms start far OUTSIDE */
.pig:not(.hugging) svg path.armL { transform: translate(-38px, 10px) rotate(-35deg) !important; }
.pig:not(.hugging) svg path.armR { transform: translate(38px, 10px) rotate(35deg) !important; }

/* hug-1: normal wrap */
.pig.hugging.hug-1 svg path.armL { transform: translate(10px, 2px) rotate(10deg) !important; }
.pig.hugging.hug-1 svg path.armR { transform: translate(-10px, 2px) rotate(-10deg) !important; }

/* hug-2: BIG squeeze (should be extremely obvious) */
.pig.hugging.hug-2 svg path.armL { transform: translate(40px, -2px) rotate(55deg) !important; }
.pig.hugging.hug-2 svg path.armR { transform: translate(-40px, -2px) rotate(-55deg) !important; }

/* hug-3: tiny polite hug */
.pig.hugging.hug-3 svg path.armL { transform: translate(4px, 6px) rotate(4deg) !important; }
.pig.hugging.hug-3 svg path.armR { transform: translate(-4px, 6px) rotate(-4deg) !important; }

/* hug-nuzzle: arms barely move (nuzzle is about face) */
.pig.hugging.hug-nuzzle svg path.armL { transform: translate(6px, 8px) rotate(2deg) !important; }
.pig.hugging.hug-nuzzle svg path.armR { transform: translate(-6px, 8px) rotate(-2deg) !important; }

/* hug-spin: arms medium + container spins */
.pig.hugging.hug-spin svg path.armL { transform: translate(22px, 0px) rotate(28deg) !important; }
.pig.hugging.hug-spin svg path.armR { transform: translate(-22px, 0px) rotate(-28deg) !important; }


/* ===== CURSOR OVERRIDE (put at END of style.css) ===== */

:root{
    /* open arms */
    --hug-cursor-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M12 40c10-10 16-10 20 0' stroke='%23ff2d7a' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M52 40c-10-10-16-10-20 0' stroke='%23ff2d7a' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='28' r='14' fill='%23ffb3c7'/%3E%3Ccircle cx='26' cy='28' r='2' fill='%232a2a2a'/%3E%3Ccircle cx='38' cy='28' r='2' fill='%232a2a2a'/%3E%3Crect x='26' y='32' width='12' height='8' rx='4' fill='%23ff8fb2'/%3E%3C/svg%3E") 32 32;

    /* CLOSED hug (big heart so you can't miss it) */
    --hug-cursor-closed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M18 38c7-8 21-8 28 0' stroke='%23000000' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3Cpath d='M32 16c4-6 16 0 0 16c-16-16-4-22 0-16z' fill='%23ff0000'/%3E%3Ccircle cx='24' cy='28' r='2' fill='%232a2a2a'/%3E%3Ccircle cx='40' cy='28' r='2' fill='%232a2a2a'/%3E%3C/svg%3E") 32 32;
}

/* Apply cursor to the actual hovered elements */
.pig, .pig * {
    cursor: var(--hug-cursor-open), pointer !important;
}

/* During hug, swap cursor everywhere inside pig */
.pig.hugging, .pig.hugging * {
    cursor: var(--hug-cursor-closed), pointer !important;
}