/* Crocodile Dentist — swampy green party accent */
body[data-theme] {
    --color-primary-gradient: linear-gradient(135deg, #65a30d 0%, #16a34a 100%);
    --shadow-glow: 0 0 25px rgba(101, 163, 13, 0.45);
    --shadow-glow-lg: 0 0 40px rgba(101, 163, 13, 0.55);
    --accent-blue: #65a30d;
}

.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(101, 163, 13, 0.08); }

/* A sculpted crocodile toy: raised eyes, broad snout and a curved dental arch. */
.croc-stage {
    position: relative;
    flex-direction: column;
    padding: 24px 12px 30px;
    min-height: 620px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 82%, rgba(80, 129, 61, .15), transparent 58%);
}
.croc-face {
    --croc-outline: #244c30;
    position: relative;
    isolation: isolate;
    width: min(100%, 560px);
    height: 560px;
    flex: none;
}
.croc-face::before {
    content: '';
    position: absolute;
    inset: 17% 4% 7%;
    border: 4px solid var(--croc-outline);
    border-radius: 43% 43% 45% 45% / 36% 36% 54% 54%;
    background: linear-gradient(105deg, #71ac4c, #a0ca67 48%, #4f8d3a);
    box-shadow: inset 8px 0 0 #ffffff17, inset -8px -9px 0 #244c3026, 0 13px 0 #244c3017;
    transition: top .28s ease, bottom .28s ease, border-radius .28s ease;
    z-index: 0;
}
.croc-face::after {
    content: '';
    position: absolute;
    left: 19%; right: 19%; bottom: 0; height: 5%;
    border-radius: 50%;
    background: #244c301a;
    filter: blur(7px);
    z-index: -1;
}
.croc-head {
    position: absolute;
    top: 3%; left: 3%; width: 94%; height: 36%;
    z-index: 4;
    transition: transform .28s cubic-bezier(.5, 0, .85, .3);
}
.croc-eye {
    position: absolute; top: 14%; width: 19%; height: 45%;
    border: 4px solid var(--croc-outline); border-radius: 50% 50% 30% 30%;
    background: linear-gradient(125deg, #b5d879, #70ae48 70%);
    box-shadow: inset 4px 5px 0 #ffffff38;
    display: flex; align-items: center; justify-content: center;
}
.croc-eye-l { left: 16%; transform: rotate(-8deg); }
.croc-eye-r { right: 16%; transform: rotate(8deg); }
.croc-eye::before {
    content: ''; position: absolute; width: 65%; height: 72%; top: 15%;
    border: 3px solid var(--croc-outline); border-radius: 50%;
    background: linear-gradient(135deg, #fff9e9 35%, #e5cf87);
}
.pupil {
    position: relative; width: 17%; height: 38%; margin-top: 8%;
    border-radius: 50%; background: #20372a;
}
.pupil::after {
    content: ''; position: absolute; top: 12%; left: 16%;
    width: 6px; height: 8px; border-radius: 50%; background: #fff;
}
.croc-jaw { position: absolute; border: 4px solid var(--croc-outline); }
.croc-jaw-upper {
    left: 0; top: 38%; width: 100%; height: 64%;
    border-radius: 28% 28% 25% 25% / 52% 52% 32% 32%;
    background: radial-gradient(ellipse at 50% 12%, #d2e79a80, transparent 55%), linear-gradient(175deg, #a8d172, #70ae48 64%, #508d38);
    box-shadow: inset 0 5px 0 #e6f2b750, inset 0 -8px 0 #315f362c, 0 6px 0 #244c3029;
}
.croc-jaw-upper::before {
    content: ''; position: absolute; left: 26%; right: 26%; bottom: 16%; height: 12%;
    border-bottom: 3px solid #427c37; border-radius: 50%;
}
.croc-nostrils { position: absolute; left: 23%; right: 23%; top: 26%; height: 22%; }
.croc-nostrils::before, .croc-nostrils::after {
    content: ''; position: absolute; width: 13%; height: 100%;
    border-radius: 50%; background: #315d35;
    border-top: 4px solid #244c30; box-shadow: 0 3px 0 #c5df8e;
}
.croc-nostrils::before { left: 0; transform: rotate(-18deg); }
.croc-nostrils::after { right: 0; transform: rotate(18deg); }
.croc-cheeks { position: absolute; inset: 44% 9% auto; display: flex; justify-content: space-between; }
.croc-cheeks i { width: 34px; height: 20px; background: radial-gradient(circle, #427c37 2px, transparent 3px) 0 0 / 11px 10px; }
.croc-upper-teeth {
    position: absolute; left: 9%; right: 9%; bottom: -16%;
    display: flex; align-items: flex-start; justify-content: space-between;
    z-index: 1; pointer-events: none;
}
.croc-upper-teeth i {
    display: block; width: 9%; height: 42px;
    background: linear-gradient(105deg, #fffdf5 0 46%, #dfd1ad 48% 100%);
    clip-path: polygon(8% 0, 92% 0, 82% 37%, 50% 100%, 18% 37%);
    filter: drop-shadow(0 2px 1px #633d3a55);
}
.croc-upper-teeth i:nth-child(2n) { height: 33px; }
.croc-jaw-lower {
    left: 8%; width: 84%; top: 74%; height: 17%; z-index: 1;
    border-radius: 20% 20% 48% 48% / 20% 20% 72% 72%;
    background: linear-gradient(#70ae48 35%, #b5d879 36%, #90bc5b);
    box-shadow: inset 0 -7px 0 #244c301a;
}
.croc-mouth-cavity {
    position: absolute; left: 8%; top: 41%; width: 84%; height: 46%; z-index: 2;
    border: 8px solid #d97782;
    border-radius: 26% 26% 22% 22% / 25% 25% 28% 28%;
    background: radial-gradient(ellipse at 50% 110%, #ed99a0 0 30%, #b65268 31% 43%, transparent 44%), linear-gradient(#452836, #813e50);
    box-shadow: 0 0 0 3px #723d46, inset 0 9px 12px #29192360;
    transition: opacity .12s ease;
    padding: 0;
}
.croc-teeth-arc {
    position: absolute;
    left: 50%; top: 0;
    width: min(100%, 420px); height: 100%;
    transform: translateX(-50%);
}
.mouth-hint {
    position: absolute; top: 43%; left: 8%; right: 8%; margin: 0;
    color: #fff9e9; font-weight: 700; font-size: .85rem; text-align: center;
}
/* Playable molars follow the gum around the tongue; upper fangs are decoration. */
.tooth-btn {
    position: absolute;
    left: var(--tooth-x); top: var(--tooth-y);
    width: clamp(38px, 14.5%, 52px); height: 48px;
    padding: 0; border: 2px solid #bdaa87;
    border-radius: 38% 38% 30% 30% / 28% 28% 38% 38%;
    background: linear-gradient(100deg, #fefbf1 5%, #fffdf7 40%, #e6d8b8 85%);
    box-shadow: inset 3px 2px 0 #fff, inset -3px -6px 0 #d1bc9755, 0 5px 0 #a45f68, 0 7px 5px #3b1b3438;
    cursor: pointer; touch-action: manipulation;
    transform: translate(-50%, -50%) rotate(var(--tooth-tilt));
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
    z-index: 2;
}
.tooth-side { width: 38px; }
.tooth-btn::before {
    content: ''; position: absolute; inset: 5px 4px 38%;
    border: 1px solid #ddcba8; border-bottom-width: 2px;
    border-radius: 38%;
    background: radial-gradient(ellipse at 26% 24%, #fff 0 20%, transparent 23%),
        radial-gradient(ellipse at 76% 28%, #fff 0 20%, transparent 23%),
        linear-gradient(145deg, #faf1db, #fffdf5);
    box-shadow: 0 2px 2px #ccb48c40;
}
.tooth-btn::after {
    content: ''; position: absolute; top: 15%; left: 46%; width: 2px; height: 29%;
    border-radius: 50%; background: #d2bd994d; transform: rotate(15deg);
}
@media (hover: hover) {
    .tooth-btn:hover { filter: brightness(1.08); }
}
.tooth-btn:focus-visible { outline: 3px solid #153f5d; outline-offset: 3px; z-index: 5; box-shadow: 0 0 0 6px #fff9e9; }
.tooth-btn:active, .tooth-btn.pressed {
    transform: translate(-50%, -50%) translate(var(--press-x), var(--press-y)) rotate(var(--tooth-tilt)) scale(.91);
    background: linear-gradient(115deg, #ded0b7, #f1e7d2);
    border-color: #997868;
    box-shadow: inset 0 5px 8px #6f445459, 0 1px 0 #8c515c;
}
.tooth-btn.pressed { cursor: default; }
.tooth-btn.pressed::before, .tooth-btn.pressed::after { opacity: .3; }
.tooth-btn:disabled { pointer-events: none; }
.croc-face.biting::before {
    top: 30%; bottom: 16%;
    border-radius: 44% 44% 42% 42% / 38% 38% 50% 50%;
}
.croc-face.biting .croc-head { transform: translateY(65%); }
.croc-face.biting .croc-eye { top: 18%; height: 39%; }
.croc-face.biting .croc-jaw-lower { top: 63%; height: 18%; }
.croc-face.biting .croc-upper-teeth { bottom: -15%; }
.croc-face.biting .croc-upper-teeth i { height: 24px; }
.croc-face.biting .croc-upper-teeth i:nth-child(2n) { height: 18px; }
.croc-face.biting .croc-mouth-cavity { opacity: 0; pointer-events: none; }
.croc-face.shaking { animation: crocShake .5s ease; }
@keyframes crocShake { 20%, 60% { transform: rotate(-2deg); } 40%, 80% { transform: rotate(2deg); } }
.bite-flash { position: absolute; inset: 0; background: radial-gradient(circle, #f43f5e55, transparent 70%); opacity: 0; pointer-events: none; z-index: 10; }
.bite-flash.flash { animation: biteFlash .5s ease; }
@keyframes biteFlash { 25% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 640px) {
    .croc-stage { padding: 22px 0 20px; min-height: 582px; }
    .croc-face { height: 540px; }
    .croc-eye { border-width: 3px; }
    .croc-jaw-lower { left: 4%; width: 92%; }
    .croc-mouth-cavity {
        left: 4%; width: 92%; border-width: 6px;
    }
    .tooth-btn { top: var(--tooth-y-mobile); height: 44px; border-width: 1px; }
    .croc-upper-teeth i { height: 34px; }
    .croc-upper-teeth i:nth-child(2n) { height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
    .croc-face::before, .croc-head, .croc-mouth-cavity, .tooth-btn { transition: none; }
    .croc-face.shaking, .bite-flash.flash { animation: none; }
}
.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}}