/* Pop-up Pirate — ocean teal x treasure amber accent */
body[data-theme] {
    --color-primary-gradient: linear-gradient(135deg, #0d9488 0%, #f59e0b 100%);
    --shadow-glow: 0 0 25px rgba(13, 148, 136, 0.45);
    --shadow-glow-lg: 0 0 40px rgba(13, 148, 136, 0.55);
    --accent-blue: #0d9488;
}

.emoji-icon { font-size: 20px; }
.btn-add-item {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 8px; padding: 9px; border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border); background: transparent;
    color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: var(--transition-fast); width: 100%;
}
.btn-add-item:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(13, 148, 136, 0.08); }

/* ---------- Barrel stage ---------- */
.barrel-stage { flex-direction: column; }

.barrel-wrap {
    position: relative;
    width: min(88vw, 400px);
    padding-top: 46px;
}

.pirate-pop {
    position: absolute;
    top: 30px; left: 50%;
    width: 84px; height: 96px;
    transform: translate(-50%, 94%) rotate(0deg);
    z-index: 1;
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pirate-pop.popped {
    transform: translate(-50%, -55%) rotate(-6deg);
    z-index: 5;
    animation: pirateWiggle 0.6s ease 0.55s;
}
/* Resting state once a round is live (before the trap triggers): just the
   tricorn hat peeks over the barrel rim, everything below it still hidden
   behind the barrel (z-index stays under .barrel-body). Percentage is
   tuned against the captain illustration's actual rendered size/position
   (measured live), not the base 84x96 box this rule was originally written
   for, so it still lines up correctly with the larger captain graphic. */
.pirate-pop.peeking {
    transform: translate(-50%, 20%) rotate(0deg);
}
@keyframes pirateWiggle {
    0%, 100% { transform: translate(-50%, -55%) rotate(-6deg); }
    25% { transform: translate(-50%, -60%) rotate(8deg); }
    50% { transform: translate(-50%, -52%) rotate(-10deg); }
    75% { transform: translate(-50%, -58%) rotate(6deg); }
}

.pirate-head {
    position: relative;
    width: 72px; height: 72px;
    margin: 0 auto;
    background: #f4c299;
    border-radius: 50%;
    border: 3px solid #c68a5c;
}
.pirate-bandana {
    position: absolute; top: -20px; left: -6px; width: 84px; height: 44px;
    background: #dc2626;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    border: 3px solid #991b1b;
    border-bottom: none;
}
.pirate-bandana::after {
    content: ''; position: absolute; right: -10px; top: 14px; width: 16px; height: 10px;
    background: #dc2626; border: 3px solid #991b1b; transform: rotate(30deg); border-radius: 2px;
}
.pirate-eyepatch {
    position: absolute; top: 26px; left: 12px; width: 22px; height: 16px;
    background: #1c1917; border-radius: 4px; transform: rotate(-8deg);
}
.pirate-eyepatch::before {
    content: ''; position: absolute; top: 6px; left: -18px; width: 26px; height: 3px; background: #1c1917; transform: rotate(6deg);
}
.pirate-eye {
    position: absolute; top: 30px; right: 14px; width: 8px; height: 8px; background: #1c1917; border-radius: 50%;
}
.pirate-grin {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 12px; background: #fff;
    border-radius: 0 0 14px 14px;
    border: 2px solid #c68a5c; border-top: none;
}

.barrel-body {
    position: relative;
    z-index: 2;
    margin-top: 44px;
    width: 100%;
    aspect-ratio: 1.15;
    border-radius: 34px;
    background:
        repeating-linear-gradient(90deg, #b06a2c 0 18px, #9c5a24 18px 20px),
        linear-gradient(180deg, #b3702f, #8a4f1f);
    border: 4px solid #6b3c17;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.35), 0 16px 40px rgba(0,0,0,0.3);
    padding: 30px 18px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.barrel-band {
    position: absolute; left: -4px; right: -4px; height: 16px;
    background: linear-gradient(180deg, #52525b, #27272a);
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.15), inset 0 -2px 3px rgba(0,0,0,0.4);
}
.band-1 { top: 22%; }
.band-2 { top: 68%; }

.slot-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    width: 100%;
}

.slot-btn {
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4a2a12, #1f0f04 75%);
    border: 2px solid #2b1608;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.6);
    cursor: pointer;
    position: relative;
    transition: transform 0.1s ease;
}
.slot-btn:hover { transform: scale(1.08); }
.slot-btn:active { transform: scale(0.92); }
.slot-btn.filled {
    background: none;
    cursor: default;
    pointer-events: none;
}
.slot-btn.filled::after {
    content: '';
    position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
    width: 6px; height: 26px;
    background: linear-gradient(180deg, #e2e8f0, #94a3b8);
    border-radius: 3px 3px 1px 1px;
    box-shadow: 0 0 0 1px #64748b;
}
.slot-btn.filled::before {
    content: '';
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%);
    width: 14px; height: 6px;
    background: #eab308; border-radius: 2px;
}

/* Illustration polish: weathered oak, metal hardware and a fuller pirate portrait. */
.barrel-stage { background: radial-gradient(ellipse at 50% 80%, rgba(245,158,11,.12), transparent 44%); }
.pirate-head { background: radial-gradient(circle at 35% 27%, #ffe0bc 0 9%, #f6bd8d 42%, #c57949 100%); border-width: 4px; box-shadow: inset -8px -8px 0 rgba(116,53,25,.18), 0 4px 0 rgba(65,27,9,.25); }
.pirate-head::before { content: ''; position: absolute; left: 50%; bottom: -8px; width: 34px; height: 20px; transform: translateX(-50%); border-radius: 0 0 18px 18px; background: #6b351e; }
.pirate-bandana { background: linear-gradient(145deg, #f35448, #a91d28); box-shadow: inset 0 4px 0 rgba(255,255,255,.2); }
.pirate-grin { box-shadow: inset 8px 0 0 rgba(255,255,255,.55); }
.slot-btn { border-color: #3d1d09; box-shadow: inset 0 5px 7px rgba(0,0,0,.75), 0 2px 0 rgba(255,255,255,.12); }

/* ---------- Original penguin captain illustration ----------
   A small, layered CSS character designed for this game.  It intentionally
   avoids Pororo's signature helmet, goggles, outfit, and colour scheme. */
.pirate-pop {
    width: 118px;
    height: 138px;
    top: 19px;
    filter: drop-shadow(0 8px 5px rgba(48, 21, 4, .28));
}
.pirate-head.penguin-captain {
    width: 108px;
    height: 122px;
    border: 0;
    border-radius: 51% 51% 46% 46%;
    background: linear-gradient(145deg, #263a58 0%, #162942 58%, #0b1829 100%);
    box-shadow: inset 8px 4px 0 rgba(255,255,255,.11), inset -9px -8px 0 rgba(4,10,22,.25), 0 5px 0 #5d351b;
    overflow: visible;
}
.pirate-head.penguin-captain::before,
.pirate-head.penguin-captain::after {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 24px;
    width: 32px;
    height: 56px;
    background: linear-gradient(150deg, #304869, #14263e);
    border-radius: 80% 20% 65% 45%;
    box-shadow: inset 3px 3px 0 rgba(255,255,255,.09);
}
.pirate-head.penguin-captain::before { left: -16px; transform: rotate(23deg); }
.pirate-head.penguin-captain::after { right: -16px; transform: scaleX(-1) rotate(23deg); }
.captain-hat {
    position: absolute;
    z-index: 5;
    top: -24px;
    left: 14px;
    width: 80px;
    height: 40px;
    border: 3px solid #45221b;
    border-bottom: 7px solid #6b3022;
    border-radius: 48% 48% 15px 15px;
    background: linear-gradient(145deg, #9c4635, #642820 70%);
    box-shadow: inset 0 5px 0 rgba(255,221,181,.18), 0 4px 0 rgba(55,22,12,.35);
}
.captain-hat::before {
    content: '';
    position: absolute;
    left: 24px;
    top: -12px;
    width: 26px;
    height: 17px;
    border-radius: 50% 50% 3px 3px;
    background: #7b332a;
    border: 3px solid #45221b;
    border-bottom: none;
}
.hat-badge {
    position: absolute;
    top: 10px;
    left: 28px;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #75440b;
    background: radial-gradient(circle at 35% 28%, #fff1a4, #dfa52d 65%, #9b6113);
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 1px 0 #fff3ae;
}
.penguin-face {
    position: absolute;
    z-index: 2;
    top: 26px;
    left: 15px;
    width: 78px;
    height: 70px;
    border-radius: 48% 48% 45% 45%;
    background: radial-gradient(circle at 33% 23%, #fffdf2 0 12%, #f5ead8 58%, #dccbb4 100%);
    box-shadow: inset 0 -6px 0 rgba(177,143,108,.15);
}
.penguin-eye {
    position: absolute;
    z-index: 2;
    top: 22px;
    width: 15px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 38%, #fff 0 12%, #19243a 16% 57%, #070d18 61%);
    box-shadow: 0 1px 0 rgba(65,36,28,.24);
}
.penguin-eye-left { left: 17px; }
.penguin-eye-right { right: 17px; }
.penguin-brow {
    position: absolute;
    z-index: 3;
    top: 15px;
    width: 19px;
    height: 6px;
    border-top: 3px solid #263852;
    border-radius: 50%;
}
.penguin-brow-left { left: 14px; transform: rotate(9deg); }
.penguin-brow-right { right: 14px; transform: rotate(-9deg); }
.penguin-beak {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 39px;
    width: 22px;
    height: 16px;
    transform: translateX(-50%);
    border: 2px solid #a95013;
    border-radius: 48% 48% 54% 54%;
    background: linear-gradient(#ffbd48 0 48%, #e97521 52%);
    box-shadow: inset 0 2px 0 rgba(255,244,162,.6);
}
.penguin-cheek { position: absolute; bottom: 11px; width: 12px; height: 6px; border-radius: 50%; background: rgba(231,126,104,.27); }
.penguin-cheek-left { left: 11px; }
.penguin-cheek-right { right: 11px; }
.captain-coat {
    position: absolute;
    z-index: 3;
    bottom: -12px;
    left: 11px;
    width: 86px;
    height: 34px;
    overflow: hidden;
    border-radius: 38px 38px 12px 12px;
    border: 3px solid #273651;
    background: linear-gradient(90deg, #3b6091, #24446e 48%, #172f52);
    box-shadow: inset 5px 4px 0 rgba(255,255,255,.13);
}
.captain-coat::before {
    content: '';
    position: absolute;
    top: -11px;
    left: 36px;
    width: 12px;
    height: 47px;
    border-left: 2px solid rgba(239,210,143,.8);
    border-right: 2px solid rgba(239,210,143,.8);
}
.coat-button { position: absolute; z-index: 2; left: 39px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: #f5c54e; box-shadow: 0 10px #f5c54e; }
.captain-scarf { position: absolute; z-index: 3; left: 27px; top: -4px; width: 32px; height: 12px; border-radius: 0 0 14px 14px; background: #e9aa35; box-shadow: inset 0 -3px rgba(135,72,20,.25); }

@media (max-width: 640px) {
    .barrel-wrap { width: min(94vw, 340px); }
    .pirate-head { width: 60px; height: 60px; }
    .pirate-head.penguin-captain { width: 108px; height: 122px; }
    .slot-grid { gap: 7px; }
}

/* ---------- Stage: reserve headroom so the popped captain is never clipped ---------- */
.canvas-container.barrel-stage {
    min-height: 560px;
    justify-content: flex-end;
    padding-bottom: 14px;
}

/* ---------- Oak cask silhouette ---------- */
.barrel-body {
    overflow: hidden;
    border-radius: 12% / 50%;
    padding: 36px 30px 30px;
    background:
        repeating-linear-gradient(90deg, rgba(60,26,8,.24) 0 2px, transparent 2px 26px),
        linear-gradient(90deg, #7f421699, transparent 12% 88%, #7f421699),
        linear-gradient(90deg, #8b4a1b, #cf8540 21%, #9e561f 47%, #df9650 74%, #813b15);
    border: 5px solid #6b3c17;
    box-shadow:
        inset 0 0 34px rgba(70,30,6,.4),
        inset 0 11px 15px -6px rgba(0,0,0,.4),
        inset 0 -13px 18px -6px rgba(0,0,0,.4),
        0 18px 34px rgba(0,0,0,.32);
}
.barrel-body::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 12% / 50%;
    background: linear-gradient(90deg, rgba(0,0,0,.32) 0 2%, rgba(255,255,255,.15) 15%, transparent 32% 62%, rgba(0,0,0,.14) 84%, rgba(0,0,0,.34) 100%);
    pointer-events: none;
}

/* ---------- Iron hoops with a repeating row of rivets ---------- */
.barrel-band {
    position: absolute; left: -10px; right: -10px; height: 21px;
    background-image:
        radial-gradient(circle at 50% 64%, rgba(0,0,0,.5) 0 3.4px, rgba(0,0,0,0) 4px),
        radial-gradient(circle at 50% 44%, #f4f8fc 0 1.4px, #c2cdd8 2.3px, #79828d 3.2px, rgba(0,0,0,0) 3.7px),
        linear-gradient(180deg, #ccd5dd, #5e6671 28%, #262c34 76%, #9daab6);
    background-size: 32px 100%, 32px 100%, 100% 100%;
    background-repeat: repeat-x, repeat-x, no-repeat;
    border-top: 1px solid rgba(255,255,255,.5);
    box-shadow: inset 0 2px 3px rgba(255,255,255,.22), inset 0 -3px 4px rgba(0,0,0,.45);
}
.barrel-band::after { content: none; }
.band-1 { top: 13%; }
.band-2 { top: 77%; }

/* ---------- Pirate captain ---------- */
.pirate-pop { width: 132px; height: 152px; top: 24px; }

.pirate-head.pirate-captain {
    position: relative;
    width: 110px; height: 128px;
    margin: 0 auto;
    border: 0; border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}
/* raised arms with cuffs */
.pirate-head.pirate-captain::before,
.pirate-head.pirate-captain::after {
    content: ''; position: absolute; z-index: -1; bottom: 2px;
    width: 25px; height: 46px;
    border-radius: 46% 46% 26% 26% / 28% 28% 18% 18%;
    background: linear-gradient(180deg, #ffd6ac 0 20%, #f6e6bd 20% 34%, #366ca1 34%, #1c4272);
    box-shadow: 0 0 0 2px #14304f;
}
.pirate-head.pirate-captain::before { left: -11px; transform: rotate(26deg); }
.pirate-head.pirate-captain::after { right: -11px; transform: scaleX(-1) rotate(26deg); }

/* tricorn: domed crown + gold hatband + wide up-swept brim */
.pirate-tricorn {
    position: absolute; z-index: 6;
    left: 15px; top: -24px;
    width: 80px; height: 40px;
    border: 0;
    border-radius: 50% 50% 26% 26% / 66% 66% 34% 34%;
    background: linear-gradient(180deg, #4d3844 0 24%, #3a2a35 44%, #dcac46 50% 68%, #251b25 68%);
    box-shadow: inset 0 4px 0 rgba(255,255,255,.13), inset -6px -4px 0 rgba(0,0,0,.18);
}
.pirate-tricorn::before {
    content: ''; position: absolute;
    left: -29px; top: 20px;
    width: 138px; height: 28px;
    border: 0; border-radius: 0;
    background: linear-gradient(180deg, #3d2c38, #241a24 62%, #1a121b);
    clip-path: polygon(0% 10%, 14% 7%, 30% 21%, 44% 35%, 50% 38%, 56% 35%, 70% 21%, 86% 7%, 100% 10%,
                       96% 33%, 80% 62%, 62% 88%, 50% 96%, 38% 88%, 20% 62%, 4% 33%);
    filter: drop-shadow(0 2px 0 #d5a244) drop-shadow(0 4px 2px rgba(30,16,8,.35));
    transform: none;
}
.pirate-tricorn::after { content: none; }
.pirate-emblem {
    position: absolute; z-index: 2;
    top: 4px; left: 50%; transform: translateX(-50%);
    width: 25px; height: 25px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 28%, #fff6bd 0 22%, #e5b23a 62%, #a4661b);
    box-shadow: 0 0 0 2px #6d451a, inset 0 -3px 0 rgba(110,66,18,.35);
    color: #7a4614; font-size: 14px; line-height: 1;
    text-shadow: 0 1px 0 rgba(255,244,190,.9);
}

/* face */
.pirate-face {
    position: absolute; z-index: 3;
    top: 14px; left: 13px;
    width: 84px; height: 78px;
    border-radius: 48% 48% 46% 46% / 46% 46% 52% 52%;
    background: radial-gradient(circle at 34% 26%, #ffe6c6 0 12%, #ffcf9f 52%, #eba86f 100%);
    box-shadow: 0 0 0 3px #a8613a, inset 0 -8px 0 rgba(190,110,58,.18);
}
/* small human ears (skin tone + face outline, so they never read as animal ears) */
.pirate-hair {
    position: absolute; z-index: -1; top: 33px;
    width: 14px; height: 18px;
    border-radius: 50% 40% 45% 55% / 45% 45% 55% 55%;
    background: radial-gradient(circle at 38% 34%, #ffdcb6, #e19b66);
    box-shadow: 0 0 0 3px #a8613a;
}
.hair-left { left: -8px; transform: rotate(-7deg); }
.hair-right { right: -8px; transform: scaleX(-1) rotate(-7deg); }

/* eyepatch: rounded patch + thin strap */
.pirate-patch {
    position: absolute; z-index: 4;
    left: 7px; top: 20px;
    width: 29px; height: 27px;
    border-radius: 50% 46% 48% 52% / 46% 46% 54% 54%;
    background: radial-gradient(circle at 34% 28%, #4b4452 0 16%, #241f2c 58%, #100d16);
    box-shadow: 0 0 0 3px #17131f, inset 0 -3px 0 rgba(0,0,0,.45);
    transform: rotate(-7deg);
}
.pirate-patch::before {
    content: ''; position: absolute; left: -15px; top: 2px;
    width: 21px; height: 5px; border: 0; border-radius: 3px;
    background: #17131f;
    transform: rotate(-24deg);
}
.pirate-patch::after {
    content: ''; position: absolute; right: -8px; top: -8px;
    width: 15px; height: 5px; border: 0; border-radius: 3px;
    background: #17131f;
    transform: rotate(-40deg);
}

/* one big cartoon eye */
.pirate-eye {
    position: absolute; z-index: 4;
    right: 11px; top: 22px;
    width: 23px; height: 25px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 30%, #ffffff 0 15%, rgba(255,255,255,0) 16%),
        radial-gradient(circle at 50% 56%, #16202e 0 40%, rgba(22,32,46,0) 41%),
        #ffffff;
    box-shadow: 0 0 0 3px #a8613a;
}
.pirate-eye::after {
    content: ''; position: absolute; left: -3px; top: -12px;
    width: 26px; height: 12px;
    border: 0; border-top: 5px solid #5b3320;
    border-radius: 50%;
    background: none;
    transform: rotate(-9deg);
}

/* nose */
.pirate-nose {
    position: absolute; z-index: 5;
    left: 50%; top: 42px; transform: translateX(-50%);
    width: 15px; height: 13px;
    border-radius: 50% 50% 55% 55%;
    background: radial-gradient(circle at 36% 30%, #ffcda2 0 24%, #f0a171 60%, #d3814f);
    box-shadow: 0 0 0 2px rgba(168,97,58,.55);
}

/* handlebar moustache: tapered crescent with curled-up tips */
.pirate-moustache {
    position: absolute; z-index: 6;
    left: 50%; top: 50px; transform: translateX(-50%);
    width: 34px; height: 4px;
    border-style: solid;
    border-color: transparent transparent #5b3320 transparent;
    border-width: 0 12px 12px 12px;
    border-radius: 50%;
    background: none;
}
.pirate-moustache::before,
.pirate-moustache::after {
    content: ''; position: absolute; top: -4px;
    width: 10px; height: 10px;
    border: 4px solid #5b3320;
    border-top-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    background: none;
}
.pirate-moustache::before { left: -22px; transform: rotate(-40deg); }
.pirate-moustache::after { right: -22px; transform: scaleX(-1) rotate(-40deg); }

/* smile + goatee */
.pirate-beard {
    position: absolute; z-index: 2;
    left: 50%; bottom: -8px; transform: translateX(-50%);
    width: 26px; height: 22px;
    border-radius: 36% 36% 50% 50% / 20% 20% 80% 80%;
    background: linear-gradient(180deg, #6b3d23, #46261a);
    box-shadow: 0 0 0 3px #33190f, inset 0 3px 0 rgba(255,255,255,.08);
}
.pirate-beard::before {
    content: ''; position: absolute; z-index: 2;
    left: 50%; top: -11px; transform: translateX(-50%);
    width: 16px; height: 9px;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    background: #8f3d38;
    box-shadow: 0 0 0 2px #4d1f1d;
}

/* captain's coat */
.pirate-coat {
    position: absolute; z-index: 2;
    left: 8px; bottom: -15px;
    width: 94px; height: 52px;
    overflow: hidden;
    border: 3px solid #14304f;
    border-radius: 42px 42px 16px 16px;
    background: linear-gradient(180deg, #3d78ac 0 40%, #23517f 70%, #163a63);
    box-shadow: inset 6px 5px 0 rgba(255,255,255,.14);
}
.pirate-coat::before {
    content: ''; position: absolute; left: 50%; top: 5px;
    width: 44px; height: 44px; margin-left: -22px;
    border: 0; border-radius: 0;
    background: #f3d691;
    clip-path: polygon(0 0, 100% 0, 50% 76%);
}
.coat-lapel {
    position: absolute; z-index: 2; top: 2px;
    width: 29px; height: 30px;
    border: 0;
    background: linear-gradient(180deg, #ffe9ae, #eec463);
    box-shadow: none;
}
.lapel-left { left: 6px; clip-path: polygon(0 0, 100% 0, 10% 86%); }
.lapel-right { right: 6px; clip-path: polygon(0 0, 100% 0, 90% 86%); }
.coat-buttons {
    position: absolute; z-index: 3;
    left: 50%; top: 25px; margin-left: -4px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff4c0, #e0ac36);
    box-shadow: 0 12px #e0ac36, 0 0 0 1px rgba(110,70,18,.5), 0 12px 0 1px rgba(110,70,18,.5);
}

@media (max-width: 640px) {
    .canvas-container.barrel-stage { min-height: 0; justify-content: center; padding-top: 26px; padding-bottom: 8px; box-sizing: border-box; }
    .barrel-wrap { width: min(94vw, 340px); }
    .slot-grid { gap: 7px; }
    .barrel-body { padding: 32px 22px 26px; }
    .pirate-pop { top: 52px; width: 132px; height: 152px; }
    .pirate-head.pirate-captain { width: 110px; height: 128px; }
    .pirate-pop.popped { transform: translate(-50%, -24%) rotate(-6deg); animation: pirateWiggleMobile .6s ease .55s; }
    @keyframes pirateWiggleMobile {
        0%, 100% { transform: translate(-50%, -24%) rotate(-6deg); }
        25% { transform: translate(-50%, -28%) rotate(8deg); }
        50% { transform: translate(-50%, -21%) rotate(-10deg); }
        75% { transform: translate(-50%, -26%) rotate(6deg); }
    }
}
.game-help { margin: 0 0 28px; padding: 26px; }.game-help h2 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 16px; }.game-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.game-help article { padding: 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-hover); }.game-help h3 { color: var(--accent-blue); font-family: var(--font-display); font-size: 1rem; margin-bottom: 7px; }.game-help p { color: var(--text-secondary); font-size: .88rem; line-height: 1.75; }@media (max-width:720px){.game-help{padding:20px 16px}.game-help-grid{grid-template-columns:1fr}}