/* Caccia al Tesoro — Treasure / Beach theme */
.cat-app {
    --sand-50: #fbf2dd;
    --sand-100: #f6e7c2;
    --sand-200: #ecd39a;
    --sand-600: #8a6938;
    --palm-400: #6aac7c;
    --palm-600: #2e7d56;
    --palm-800: #1b4e35;
    --gold: #c89132;
    --gold-light: #e6b65f;
    --gold-dark: #94661d;
    --red: #b0352e;
    --cream: #fff6e4;
    --ink: #2a1d0e;
    --ink-soft: #5b4527;
    --parchment: #f5e6c5;
    --parchment-edge: #d8bf89;
    --radius: 12px;
    color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    max-width: 500px;
    margin: 0 auto;
    padding: 18px 16px 40px;
    -webkit-font-smoothing: antialiased;
    background: var(--sand-50);
}
.cat-app *, .cat-app *::before, .cat-app *::after { box-sizing: border-box; }

/* Phone frame on home */
.cat-phone-frame {
    background: var(--sand-50);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

/* ═══ Beach hero ═══ */
.cat-beach-hero {
    position: relative;
    min-height: 600px;
    background: linear-gradient(to bottom, #e3f0fa 0%, #f5dcae 55%, #ecc47f 100%);
    overflow: hidden;
    border-radius: 18px;
}
.cat-hero-content { position: relative; z-index: 10; padding: 34px 22px 26px; text-align: center; }
.cat-sun {
    position: absolute; top: 60px; left: 50%; width: 110px; height: 110px;
    transform: translateX(-50%);
    background: radial-gradient(circle, #ffe08a 20%, #ffc04a 70%, rgba(255,192,74,0) 80%);
    border-radius: 50%; z-index: 1;
    animation: cat-pulse-sun 6s ease-in-out infinite;
}
@keyframes cat-pulse-sun {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.85; }
    50% { transform: translateX(-50%) scale(1.06); opacity: 1; }
}
.cat-clouds { position: absolute; top: 30px; left: 0; right: 0; height: 80px; z-index: 2; pointer-events: none; }
.cat-cloud { position: absolute; background: rgba(255,255,255,0.85); border-radius: 30px; animation: cat-drift 34s linear infinite; }
.cat-cloud-1 { width: 68px; height: 18px; top: 24px; left: -25%; }
.cat-cloud-2 { width: 48px; height: 14px; top: 54px; left: -40%; animation-duration: 45s; animation-delay: -10s; opacity: 0.75; }
@keyframes cat-drift { 0% { transform: translateX(0); } 100% { transform: translateX(640px); } }

.cat-waves { position: absolute; left: 0; right: 0; top: 230px; height: 80px; z-index: 3; overflow: hidden; }
.cat-wave-svg { position: absolute; left: 0; width: 200%; animation: cat-wave-roll 10s linear infinite; }
.cat-wave-svg-2 { animation-duration: 16s; animation-direction: reverse; top: 10px; opacity: 0.75; }
@keyframes cat-wave-roll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.cat-palm { position: absolute; bottom: 0; z-index: 4; width: 120px; height: 260px; transform-origin: bottom center; }
.cat-palm-left { left: -22px; animation: cat-palm-sway 6s ease-in-out infinite; }
.cat-palm-right { right: -22px; transform: scaleX(-1); animation: cat-palm-sway-r 6s ease-in-out infinite; animation-delay: -2s; }
@keyframes cat-palm-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes cat-palm-sway-r { 0%, 100% { transform: scaleX(-1) rotate(-2deg); } 50% { transform: scaleX(-1) rotate(2deg); } }

.cat-chest { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 6; width: 140px; animation: cat-chest-bounce 3s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(42, 29, 14, 0.35)); }
.cat-chest-shadow { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 150px; height: 12px; background: radial-gradient(ellipse, rgba(42,29,14,0.28), transparent 70%); z-index: 5; animation: cat-shadow-pulse 3s ease-in-out infinite; }
@keyframes cat-chest-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
@keyframes cat-shadow-pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(0.88); } }

.cat-sparkle { position: absolute; color: #ffe08a; font-size: 22px; z-index: 7; animation: cat-sparkle 2.5s ease-in-out infinite; }
@keyframes cat-sparkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1); } }
.cat-sparkle-1 { bottom: 180px; left: 38%; animation-delay: 0s; }
.cat-sparkle-2 { bottom: 200px; right: 40%; animation-delay: 0.8s; }
.cat-sparkle-3 { bottom: 150px; left: 50%; animation-delay: 1.6s; }

.cat-home-foot { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: var(--ink-soft); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.2em; z-index: 12; opacity: 0.75; }

/* ═══ Typography ═══ */
.cat-kicker { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.cat-hero-title { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 56px; line-height: 1; margin: 10px 0 6px; color: var(--ink); text-shadow: 2px 2px 0 rgba(255,246,228,0.5); }
.cat-hero-title em { font-style: italic; color: var(--gold-dark); }
.cat-hero-tagline { font-family: "Caveat", cursive; font-size: 22px; color: var(--ink-soft); margin: 0; }

.cat-page-title { font-family: "Instrument Serif", serif; font-size: 30px; line-height: 1.1; margin: 4px 0 10px; font-weight: 400; color: var(--ink); }
.cat-page-title em { font-style: italic; color: var(--gold-dark); }
.cat-team-name { font-family: "Instrument Serif", serif; font-size: 26px; margin: 2px 0; font-weight: 400; color: var(--ink); }
.cat-lead { color: var(--ink-soft); font-size: 14px; margin: 0 0 14px; }
.cat-section-title { font-family: "Instrument Serif", serif; font-size: 20px; font-weight: 400; margin: 16px 0 10px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.cat-section-title::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(to right, var(--parchment-edge), var(--parchment-edge) 4px, transparent 4px, transparent 8px); }

.cat-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    font-family: "Caveat", cursive;
    font-size: 18px;
    padding: 6px 14px 6px 12px;
    margin-bottom: 14px;
    background: linear-gradient(180deg, var(--cream), var(--sand-100));
    border: 2px solid var(--gold-dark);
    border-radius: 20px;
    box-shadow: 0 2px 0 var(--gold-dark);
    transition: transform 0.18s cubic-bezier(.25,.8,.25,1), box-shadow 0.15s, filter 0.15s, background 0.2s;
}
.cat-back::before {
    content: "⟵";
    display: inline-block;
    font-size: 16px;
    color: var(--gold-dark);
    transition: transform 0.2s ease;
}
.cat-back:hover {
    filter: brightness(1.05);
    transform: translateX(-3px);
    box-shadow: 0 3px 0 var(--gold-dark);
    color: var(--ink);
}
.cat-back:hover::before { transform: translateX(-3px); }
.cat-back:active {
    transform: translateX(-1px) translateY(2px);
    box-shadow: 0 0 0 var(--gold-dark);
}

/* ═══ Buttons ═══ */
.cat-btn-beach {
    display: inline-flex; flex-direction: column; align-items: center;
    padding: 14px 20px;
    background: var(--ink); color: #fff;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700; font-size: 15px;
    border: 2px solid var(--ink);
    box-shadow: 0 4px 0 var(--sand-600);
    cursor: pointer; font-family: inherit;
    transition: transform 0.1s, box-shadow 0.1s, filter 0.15s;
}
/* Lock text color white across all interactive states; defeat theme overrides. */
.cat-btn-beach,
.cat-btn-beach:link,
.cat-btn-beach:visited,
.cat-btn-beach:hover,
.cat-btn-beach:focus,
.cat-btn-beach:active { color: #fff; }
.cat-btn-beach:hover .cat-btn-label,
.cat-btn-beach:hover .cat-btn-sub,
.cat-btn-beach:hover .cat-btn-icon,
.cat-btn-beach:focus .cat-btn-label,
.cat-btn-beach:focus .cat-btn-sub,
.cat-btn-beach:focus .cat-btn-icon { color: #fff; }
/* Hover changes only luminosity (brighter button), not text color. */
.cat-btn-beach:hover { filter: brightness(1.12); transform: translateY(2px); box-shadow: 0 2px 0 var(--sand-600); }
.cat-btn-beach:active { filter: brightness(0.95); transform: translateY(4px); box-shadow: 0 0 0 var(--sand-600); }

.cat-btn-label { font-size: 16px; letter-spacing: 0.02em; color: inherit; }
.cat-btn-sub { font-size: 11px; opacity: 0.75; font-weight: 400; margin-top: 3px; letter-spacing: 0.03em; color: inherit; }

.cat-btn-gold {
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    border-color: var(--gold-dark); color: #fff;
    box-shadow: 0 4px 0 var(--gold-dark);
    text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.cat-btn-gold:hover { box-shadow: 0 2px 0 var(--gold-dark); filter: brightness(1.08); color: #fff; }

/* Ghost variant — text AND children AND shadow stay the same across states.
   Only change on hover: luminosity of the button itself. */
.cat-btn-ghost {
    background: rgba(255,246,228,0.9);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 0 4px 0 var(--ink);
}
.cat-btn-ghost,
.cat-btn-ghost:link,
.cat-btn-ghost:visited,
.cat-btn-ghost:hover,
.cat-btn-ghost:focus,
.cat-btn-ghost:active { color: var(--ink); }
/* Override parent .cat-btn-beach:hover/.cat-btn-beach:focus children rules so
   label/sub/icon do NOT turn white inside the ghost button. */
.cat-btn-ghost:hover .cat-btn-label,
.cat-btn-ghost:hover .cat-btn-sub,
.cat-btn-ghost:hover .cat-btn-icon,
.cat-btn-ghost:focus .cat-btn-label,
.cat-btn-ghost:focus .cat-btn-sub,
.cat-btn-ghost:focus .cat-btn-icon,
.cat-btn-ghost:active .cat-btn-label,
.cat-btn-ghost:active .cat-btn-sub,
.cat-btn-ghost:active .cat-btn-icon { color: var(--ink); }
/* Keep shadow color identical (parent beach:hover changes shadow to sand-600). */
.cat-btn-ghost:hover { filter: brightness(1.06); box-shadow: 0 2px 0 var(--ink); }
.cat-btn-ghost:active { filter: brightness(0.97); box-shadow: 0 0 0 var(--ink); }

.cat-home-actions { position: relative; z-index: 12; display: grid; gap: 12px; max-width: 320px; margin: 20px auto 0; }

/* ═══ Parchment (form) ═══ */
.cat-parchment { position: relative; background: linear-gradient(to bottom, var(--parchment), #efdeb3); border: 1px solid var(--parchment-edge); border-radius: 8px; padding: 18px 22px; }
.cat-parchment::before { content: ""; position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px; border: 1px dashed rgba(138,105,56,0.3); border-radius: 4px; pointer-events: none; }
.cat-parch-corner { position: absolute; width: 16px; height: 16px; border-color: var(--sand-600); pointer-events: none; }
.cat-parch-corner.cat-tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.cat-parch-corner.cat-tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.cat-parch-corner.cat-bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.cat-parch-corner.cat-br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

/* ═══ Tabs & form ═══ */
.cat-tabs { display: flex; gap: 0; margin-bottom: 14px; background: rgba(138,105,56,0.08); border-radius: 8px; padding: 4px; }
.cat-tab { flex: 1; padding: 9px 12px; background: transparent; border: 0; font: inherit; color: var(--ink-soft); cursor: pointer; border-radius: 6px; font-size: 13px; font-weight: 600; }
.cat-tab-active { background: var(--cream); color: var(--ink); box-shadow: 0 1px 2px rgba(42,29,14,0.1); }
.cat-tab-panel { display: none; }
.cat-panel-active { display: block; }

.cat-form { display: grid; gap: 12px; }
.cat-form label { display: block; }
.cat-form label > span { display: block; font-family: "Caveat", cursive; font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.cat-form input[type="text"], .cat-form select { width: 100%; padding: 11px 14px; border: 2px solid var(--parchment-edge); border-radius: 8px; background: rgba(255,246,228,0.8); font-size: 15px; color: var(--ink); font-family: inherit; }
.cat-form input:focus, .cat-form select:focus { outline: none; border-color: var(--gold); background: #fff; }
.cat-hint { font-size: 12px; color: var(--ink-soft); font-style: italic; margin: 4px 0 0; }
.cat-empty { padding: 20px; background: rgba(138,105,56,0.08); border-radius: 8px; color: var(--ink-soft); text-align: center; font-size: 13px; }

/* ═══ Form row (prenume + nume) ═══ */
.cat-form-row { display: flex; gap: 10px; }
@media (max-width: 380px) { .cat-form-row { flex-direction: column; gap: 12px; } }

/* ═══ Avatar upload (create team) ═══ */
.cat-avatar-field { display: block; }
.cat-avatar-upload {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,246,228,0.8);
    border: 2px dashed var(--parchment-edge);
    border-radius: 10px;
    padding: 10px 12px;
}
.cat-avatar-preview {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--sand-100);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border: 2px solid var(--parchment-edge);
    flex-shrink: 0;
}
.cat-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.cat-avatar-placeholder { font-size: 28px; }
.cat-avatar-input { display: none; }
.cat-avatar-button {
    padding: 8px 14px; background: var(--ink); color: #fff;
    border-radius: 6px; font-size: 13px; cursor: pointer;
    font-family: "Caveat", cursive; font-weight: 600;
    letter-spacing: 0.02em;
}

/* ═══ Team grid (choose team with avatars) ═══ */
.cat-team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 6px;
}
@media (min-width: 400px) {
    .cat-team-grid { grid-template-columns: 1fr 1fr; }
}
.cat-team-card-pick { position: relative; cursor: pointer; }
.cat-team-card-pick input[type="radio"] {
    position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; top: 0; left: 0;
}
.cat-team-card-inner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; background: var(--cream);
    border: 2px solid var(--parchment-edge); border-radius: 10px;
    transition: border-color 0.12s, background 0.12s, transform 0.1s;
}
.cat-team-card-pick:hover .cat-team-card-inner { border-color: var(--gold); }
.cat-team-card-pick input:checked + .cat-team-card-inner {
    border-color: var(--palm-600);
    background: linear-gradient(to right, #eaf8ef, var(--cream));
    box-shadow: 0 0 0 3px #d5f5e3;
}
.cat-team-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--sand-100);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border: 2px solid var(--parchment-edge);
    flex-shrink: 0;
}
.cat-team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cat-team-avatar-ph { font-size: 22px; }
.cat-team-card-body { display: flex; flex-direction: column; overflow: hidden; }
.cat-team-card-body strong { font-family: "Instrument Serif", serif; font-size: 16px; font-weight: 400; color: var(--ink); line-height: 1.2; }
.cat-team-card-body small { font-size: 11px; color: var(--ink-soft); }

.cat-team-avatar-lg {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--sand-100);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border: 3px solid var(--gold);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(138,105,56,0.2);
}
.cat-team-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

.cat-dash-head-main { display: flex; align-items: center; gap: 14px; }

/* ═══ Join code card (captain dashboard) ═══ */
.cat-code-card {
    background: linear-gradient(135deg, #fff9e6, #ffe9b6);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: 16px 0;
    text-align: center;
    box-shadow: 0 2px 8px rgba(200,145,50,0.15);
}
.cat-code-card-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold-dark); font-weight: 700;
    margin-bottom: 6px;
}
.cat-code-card-value {
    font-family: "IBM Plex Mono", monospace;
    font-size: 44px; font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.18em;
    margin: 4px 0 10px;
    -webkit-text-fill-color: var(--ink);
    user-select: all;
}
.cat-code-copy {
    padding: 6px 14px; font-size: 12px; font-weight: 600;
    background: var(--ink); color: #fff;
    border: 2px solid var(--ink); border-radius: 6px;
    cursor: pointer; font-family: inherit;
    font-family: "Caveat", cursive; font-size: 16px;
}
.cat-code-copy:hover { filter: brightness(1.15); }
.cat-code-card-hint {
    font-family: "Caveat", cursive;
    font-size: 15px; color: var(--ink-soft);
    margin: 10px 0 0;
}

/* Member chips with avatar */
.cat-members-row { align-items: center; }
.cat-member-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 3px !important;
}
.cat-member-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--sand-100);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    border: 1px solid var(--parchment-edge);
    flex-shrink: 0;
}
.cat-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cat-member-avatar-ph { font-size: 14px; }

/* ═══ Pending requests (captain) ═══ */
.cat-pending-wrap {
    background: linear-gradient(135deg, #fff3cd, #faecad);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 16px 0;
}
.cat-pending-title {
    font-family: "Instrument Serif", serif;
    font-size: 18px; font-weight: 400;
    margin: 0 0 10px; color: var(--ink);
    display: flex; align-items: center; gap: 8px;
}
.cat-pending-count {
    background: var(--red); color: #fff;
    padding: 2px 9px; border-radius: 12px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px; font-weight: 700;
}
.cat-pending-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.75);
    border-radius: 8px;
    margin-bottom: 6px;
}
.cat-pending-name {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 14px; color: var(--ink);
}
.cat-pending-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold);
    animation: cat-pulse 1.5s ease-in-out infinite;
}
@keyframes cat-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.cat-pending-actions { display: flex; gap: 6px; }
.cat-btn-approve, .cat-btn-reject {
    padding: 6px 12px; font-size: 12px; font-weight: 600;
    border-radius: 6px; cursor: pointer; font-family: inherit;
    border: 2px solid;
}
.cat-btn-approve {
    background: var(--palm-600); color: #fff;
    border-color: var(--palm-800);
}
.cat-btn-approve:hover { filter: brightness(1.08); }
.cat-btn-reject {
    background: transparent; color: var(--red);
    border-color: var(--red);
}
.cat-btn-reject:hover { background: var(--red); color: #fff; }

/* ═══ Pending player waiting screen ═══ */
.cat-pending-page {
    min-height: 400px;
    display: flex; align-items: center; justify-content: center;
}
.cat-pending-card {
    background: var(--cream);
    border: 2px solid var(--parchment-edge);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    max-width: 440px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(138,105,56,0.15);
}
.cat-pending-card .cat-kicker {
    display: block;
    text-align: center;
    margin-bottom: 6px;
}

/* ═══ Binary code reveal ═══ */
.cat-code-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 28px;
    justify-content: center;
}
.cat-code-reveal { margin: 0; }
.cat-code-reveal summary { list-style: none; cursor: pointer; display: inline-flex; }
.cat-code-reveal summary::-webkit-details-marker { display: none; }
.cat-code-reveal[open] { width: 100%; margin-top: 4px; }
.cat-binary-block {
    background: #2a1d0e;
    color: #ffe08a;
    font-family: "IBM Plex Mono", monospace;
    font-size: 15px;
    padding: 16px 20px;
    border-radius: 8px;
    margin-top: 12px;
    line-height: 1.7;
    letter-spacing: 0.08em;
    text-align: center;
    max-height: 360px;
    overflow-y: auto;
    white-space: pre;
}
.cat-binary-block::-webkit-scrollbar { width: 8px; }
.cat-binary-block::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.cat-binary-block::-webkit-scrollbar-track { background: #1a110a; }

/* ═══ ASCII table reference ═══ */
.cat-ascii-box {
    background: #fffaf0;
    border: 1px solid var(--parchment-edge);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 12px;
}
.cat-ascii-intro {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0 0 12px;
    line-height: 1.5;
}
.cat-ascii-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: #fff;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
}
.cat-ascii-scroll-arrow {
    display: inline-block;
    font-size: 16px;
    animation: cat-ascii-bounce 1.4s ease-in-out infinite;
}
@keyframes cat-ascii-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}
.cat-ascii-list-wrap {
    position: relative;
}
.cat-ascii-list {
    max-height: 320px;
    overflow-y: scroll;                /* always show the scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--gold) var(--cream);
    border: 1px solid var(--parchment-edge);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}
.cat-ascii-list::-webkit-scrollbar { width: 12px; }
.cat-ascii-list::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 6px;
    border: 2px solid var(--cream);
}
.cat-ascii-list::-webkit-scrollbar-track { background: var(--cream); border-radius: 6px; }
.cat-ascii-fade {
    position: absolute;
    left: 0; right: 14px;
    bottom: 0;
    height: 42px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    border-radius: 0 0 8px 8px;
}
.cat-ascii-header,
.cat-ascii-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
    padding: 10px 14px;
    align-items: center;
    font-family: "IBM Plex Mono", monospace;
}
.cat-ascii-header {
    position: sticky;
    top: 0;
    background: var(--cream);
    border-bottom: 2px solid var(--gold);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--gold-dark);
    font-weight: 700;
    z-index: 1;
}
.cat-ascii-row {
    border-bottom: 1px solid var(--parchment-edge);
    font-size: 14px;
}
.cat-ascii-row:nth-child(odd) { background: #fffaf0; }
.cat-ascii-row:last-child { border-bottom: none; }
.cat-ascii-col-char {
    font-family: "Instrument Serif", serif;
    font-size: 22px;
    color: var(--ink);
    font-weight: 600;
    text-align: left;
}
.cat-ascii-col-bin {
    font-size: 14px;
    letter-spacing: 0.08em;
    color: #334;
    text-align: right;
    font-weight: 600;
}

/* Extra space between the code-reveal toolbar and the answer input */
.cat-answer-box-spaced { margin-top: 20px; }

/* ═══ Cooldown + retry ═══ */
.cat-cooldown-box {
    background: linear-gradient(135deg, #fff3cd, #faecad);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    padding: 26px 18px 22px;
    text-align: center;
    margin: 14px 0;
    box-shadow: 0 6px 20px rgba(212,162,58,0.18);
}
.cat-cooldown-clock {
    width: 84px; height: 84px;
    margin: 0 auto 8px;
    border-radius: 50%;
    border: 4px solid var(--gold-dark);
    background: #fffbe8;
    position: relative;
    box-shadow: inset 0 0 0 3px #fff, 0 4px 10px rgba(148,102,29,0.25);
}
.cat-cooldown-clock::before,
.cat-cooldown-clock::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 50%;
    background: var(--gold-dark);
    transform-origin: bottom center;
    border-radius: 3px;
}
.cat-cooldown-clock::before {
    width: 4px; height: 26px;
    margin-left: -2px;
    animation: cat-clock-minute 60s linear infinite;
}
.cat-cooldown-clock::after {
    width: 5px; height: 18px;
    margin-left: -2.5px;
    background: var(--red);
    animation: cat-clock-second 6s linear infinite;
}
.cat-cooldown-clock .cat-clock-pin {
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    background: var(--ink);
    border-radius: 50%;
    z-index: 2;
}
@keyframes cat-clock-minute { to { transform: rotate(360deg); } }
@keyframes cat-clock-second { to { transform: rotate(360deg); } }
.cat-cooldown-title {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: 22px; margin: 8px 0 2px; font-weight: 400;
}
.cat-cooldown-text { color: var(--ink-soft); margin: 0; font-size: 14px; }
.cat-cooldown-timer {
    font-family: "IBM Plex Mono", monospace;
    font-size: 56px; font-weight: 700;
    color: var(--gold-dark);
    letter-spacing: 0.08em;
    margin: 14px 0 4px;
    background: #fff;
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 10px 12px;
    display: inline-block;
    min-width: 190px;
    box-shadow: inset 0 2px 6px rgba(148,102,29,0.1);
}
.cat-cooldown-sub {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px; letter-spacing: 0.18em;
    color: var(--ink-soft); text-transform: uppercase;
    margin: 0 0 6px;
}

.cat-retry-box {
    background: #fdecea;
    border: 2px solid var(--red);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin: 14px 0;
    text-align: center;
}
.cat-retry-title { color: var(--red); font-size: 17px; margin: 0 0 10px; }
.cat-retry-text { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }

/* ═══ Verse order task ═══ */
.cat-verse-form { margin-top: 14px; }
.cat-verse-answer {
    min-height: 80px;
    background: var(--cream);
    border: 2px dashed var(--parchment-edge);
    border-radius: 10px;
    padding: 14px;
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: flex-start;
    font-family: "Instrument Serif", serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    font-style: italic;
}
.cat-verse-answer:empty::before {
    content: attr(data-empty-text);
    color: var(--ink-soft);
    font-family: "Caveat", cursive;
    font-size: 16px;
    font-style: normal;
}
.cat-verse-answer .cat-verse-chip {
    background: linear-gradient(180deg, #eaf8ef, #d5f5e3);
    border-color: var(--palm-600);
}
.cat-verse-pool {
    margin-top: 12px;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.cat-verse-chip {
    background: rgba(255,246,228,0.9);
    border: 2px solid var(--parchment-edge);
    border-radius: 16px;
    padding: 7px 12px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
    line-height: 1.3;
    transition: border-color 0.15s, transform 0.1s;
}
.cat-verse-chip:hover { border-color: var(--gold); transform: translateY(-1px); }

.cat-verse-done {
    background: var(--cream);
    border: 2px solid var(--palm-600);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-top: 14px;
}
.cat-verse-text {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 10px;
}
.cat-verse-text span { display: inline; }
.cat-verse-text span:not(:last-child)::after { content: " "; }
.cat-verse-ref {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold-dark); font-weight: 700;
    text-align: right;
}

/* ═══ Alerts ═══ */
.cat-alert-info { background: #fff3cd; border: 1px solid #ead8a0; color: #6b5300; padding: 12px 14px; border-radius: 8px; font-size: 14px; }

/* ═══ Dashboard ═══ */
.cat-page { padding: 10px 0; }
.cat-dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px dashed var(--parchment-edge); }
.cat-me { text-align: right; font-size: 13px; }
.cat-me-label { display: block; color: var(--ink-soft); font-size: 11px; }
.cat-me strong { font-size: 14px; }
.cat-badge-cpt { display: inline-block; padding: 2px 7px; background: var(--gold); color: #fff; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.08em; border-radius: 3px; text-transform: uppercase; margin-top: 2px; }
.cat-members-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.cat-member-chip { padding: 4px 10px; background: var(--sand-100); border: 1px solid var(--parchment-edge); border-radius: 20px; font-size: 12px; color: var(--ink); }

/* Trail */
.cat-trail { position: relative; padding: 10px 0; }
/* Dashed spine aligned with the centre of the markers: 16px left-padding + 24px half-marker = 40px. */
.cat-trail::before { content: ""; position: absolute; left: 40px; top: 30px; bottom: 30px; border-left: 3px dashed var(--sand-200); z-index: 0; }
.cat-trail-item {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr 18px;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--cream);
    border: 1px solid var(--parchment-edge);
    border-radius: 12px;
    margin-bottom: 10px;
    text-decoration: none;
    color: var(--ink);
    box-shadow: 0 2px 3px rgba(138,105,56,0.1);
    z-index: 2;
    transition: transform 0.15s;
}
.cat-trail-item:hover { transform: translateX(3px); }
.cat-trail-marker {
    position: relative;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--sand-100);
    border: 2px solid var(--parchment-edge);
    font-family: "Instrument Serif", serif;
    font-size: 20px;
    color: var(--ink);
    margin: 0;
    flex-shrink: 0;
}
.cat-trail-marker.done { background: var(--palm-600); border-color: var(--palm-800); color: var(--cream); font-size: 28px; }
.cat-trail-marker.done::before { content: "✓"; }
.cat-trail-title { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.cat-trail-meta { font-size: 12px; color: var(--ink-soft); }
.cat-chip-digit { display: inline-block; padding: 2px 8px; background: var(--palm-600); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 600; }
.cat-chip-pending { display: inline-block; padding: 2px 8px; background: var(--sand-100); color: var(--ink-soft); border-radius: 10px; font-size: 11px; font-weight: 600; }
.cat-trail-chevron { color: var(--ink-soft); font-size: 20px; }

.cat-trail-end { text-align: center; margin-top: 16px; padding: 20px; background: linear-gradient(135deg, #fff6e4, #f6e7c2); border: 2px dashed var(--gold); border-radius: 14px; }
.cat-trail-end.locked { opacity: 0.7; }
.cat-x-mark { font-family: "Instrument Serif", serif; font-size: 48px; color: var(--red); font-weight: 700; line-height: 1; margin-bottom: 4px; }
.cat-trail-end-title { font-family: "Instrument Serif", serif; font-size: 20px; color: var(--ink); margin: 0 0 6px; }
.cat-trail-end-sub { font-family: "Caveat", cursive; font-size: 16px; color: var(--ink-soft); margin: 0 0 10px; }

.cat-dash-foot { text-align: center; margin-top: 30px; }
.cat-link-muted { color: var(--ink-soft); font-size: 12px; text-decoration: none; }

/* ═══ Task page ═══ */
.cat-task-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.cat-task-num { font-family: "Instrument Serif", serif; font-size: 52px; color: var(--gold); line-height: 1; font-weight: 400; font-style: italic; }
.cat-task-instruction { padding: 14px 16px; background: rgba(255,246,228,0.7); border-left: 4px solid var(--gold); border-radius: 4px; font-size: 14px; line-height: 1.65; margin-bottom: 16px; color: var(--ink); white-space: pre-line; }

/* Answer box */
.cat-answer-box { background: var(--cream); border: 2px solid var(--parchment-edge); border-radius: 12px; padding: 16px; margin-bottom: 14px; position: relative; }
.cat-answer-box::before { content: "🗝️"; position: absolute; top: -14px; left: 16px; background: var(--cream); padding: 0 6px; font-size: 20px; }
.cat-answer-label { display: block; font-family: "Caveat", cursive; font-weight: 700; font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.cat-answer-input { width: 100%; padding: 12px 14px; border: 2px solid var(--parchment-edge); border-radius: 8px; background: #fff; font-size: 16px; font-family: inherit; color: var(--ink); }
.cat-answer-input:focus { outline: none; border-color: var(--gold); }
.cat-answer-box .cat-btn-beach { width: 100%; margin-top: 10px; }
.cat-answer-feedback { margin-top: 10px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; }
.cat-answer-feedback.err { background: #fdecea; color: var(--red); border: 1px solid #f3c5c1; }
.cat-answer-feedback.ok { background: #d5f5e3; color: var(--palm-800); border: 1px solid #99d3b4; }
.cat-attempts-hint { font-family: "Caveat", cursive; font-size: 16px; color: var(--ink-soft); text-align: center; margin: 14px 0 0; }

/* Shake */
.cat-shake { animation: cat-shake 0.45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes cat-shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

/* ═══ Video list & card ═══ */
.cat-video-list { display: grid; gap: 10px; }
.cat-video-card { display: grid; grid-template-columns: 100px 1fr; gap: 12px; background: var(--cream); border: 2px solid var(--parchment-edge); border-radius: 10px; padding: 10px; }
.cat-video-card.available:hover { border-color: var(--gold); }
.cat-video-card.mine { border-color: var(--palm-600); background: linear-gradient(to right, #eaf8ef, var(--cream)); box-shadow: 0 0 0 3px #d5f5e3; margin-bottom: 14px; }
.cat-video-card.locked { opacity: 0.55; background: #f0ebe0; }
.cat-video-thumb { width: 100px; height: 75px; border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; }
.cat-video-thumb-play { width: 30px; height: 30px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cat-video-thumb-play::after { content: ""; display: block; border-left: 10px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.cat-video-thumb-dur { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.75); color: #fff; font-family: "IBM Plex Mono", monospace; font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.cat-video-body { padding: 3px 0; }
.cat-video-title { font-family: "Instrument Serif", serif; font-size: 16px; font-weight: 400; color: var(--ink); margin: 0 0 4px; font-style: italic; }
a.cat-video-thumb.clickable { cursor: pointer; display: inline-flex; position: relative; }
a.cat-video-thumb.clickable:hover { filter: brightness(1.08); }
.cat-video-preview-link {
    display: inline-block;
    font-size: 12px;
    color: var(--gold-dark);
    text-decoration: none;
    font-weight: 600;
    padding: 4px 0 8px;
    font-family: "Caveat", cursive;
    font-size: 15px;
    letter-spacing: 0.02em;
}
.cat-video-preview-link:hover { color: var(--ink); text-decoration: underline; }
.cat-video-meta { display: flex; gap: 10px; font-size: 11px; color: var(--ink-soft); margin-bottom: 6px; flex-wrap: wrap; }
.cat-diff-easy { color: var(--palm-600); }
.cat-diff-medium { color: var(--gold-dark); }
.cat-diff-hard { color: var(--red); }
.cat-video-chip-locked { display: inline-block; padding: 3px 9px; background: #f0e5c8; border: 1px solid var(--parchment-edge); border-radius: 10px; font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.cat-video-chip-mine { display: inline-block; padding: 3px 9px; background: var(--palm-600); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 600; }
.cat-btn-choose { padding: 5px 14px; font-size: 13px; background: var(--ink); color: var(--cream); border: 2px solid var(--ink); border-radius: 6px; cursor: pointer; font-family: inherit; font-weight: 600; box-shadow: 0 2px 0 var(--sand-600); }

/* Upload */
.cat-upload-zone { background: var(--cream); border: 2px dashed var(--gold); border-radius: 12px; padding: 28px 18px; text-align: center; margin: 14px 0; transition: all 0.2s; }
.cat-upload-zone.dragging { border-color: var(--palm-600); background: #eaf8ef; }
.cat-upload-icon { font-size: 44px; color: var(--gold); margin-bottom: 8px; }
.cat-upload-title { font-family: "Instrument Serif", serif; font-style: italic; font-size: 20px; color: var(--ink); margin: 0 0 4px; }
.cat-upload-sub { font-family: "Caveat", cursive; font-size: 16px; color: var(--ink-soft); margin: 0 0 12px; }
.cat-upload-limit { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-soft); margin: 10px 0 0; letter-spacing: 0.04em; }

.cat-upload-progress { background: var(--cream); border: 2px solid var(--gold); border-radius: 12px; padding: 18px; margin-top: 14px; }
.cat-up-file-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cat-up-file-ic { width: 36px; height: 36px; background: var(--gold); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
.cat-up-file-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); }
.cat-progress-bar { height: 8px; background: var(--sand-100); border-radius: 4px; overflow: hidden; border: 1px solid var(--parchment-edge); margin-bottom: 8px; }
.cat-progress-fill { height: 100%; background: linear-gradient(to right, var(--gold), var(--gold-light)); transition: width 0.2s; width: 0%; }
.cat-progress-text { display: flex; justify-content: space-between; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink-soft); }

/* Waiting */
.cat-waiting-box { background: var(--cream); border: 2px solid var(--parchment-edge); border-radius: 12px; padding: 28px 20px; text-align: center; margin: 14px 0; }
.cat-waiting-spinner { width: 44px; height: 44px; border: 4px solid var(--parchment-edge); border-top-color: var(--gold); border-radius: 50%; margin: 0 auto 14px; animation: cat-spin 1s linear infinite; }
@keyframes cat-spin { to { transform: rotate(360deg); } }
.cat-waiting-title { font-family: "Instrument Serif", serif; font-style: italic; font-size: 22px; color: var(--ink); margin: 0 0 6px; }
.cat-waiting-sub { font-family: "Caveat", cursive; font-size: 17px; color: var(--ink-soft); margin: 0; }
.cat-waiting-preview { background: #f5e6c5; border-radius: 8px; padding: 10px; margin-top: 14px; display: flex; gap: 10px; align-items: center; text-align: left; }
.cat-waiting-preview-thumb { width: 50px; height: 38px; border-radius: 4px; }
.cat-waiting-preview-meta { font-size: 12px; color: var(--ink); font-family: "IBM Plex Mono", monospace; }

/* Rejected */
.cat-rejected-box { background: #fdecea; border: 2px solid var(--red); border-radius: 12px; padding: 18px; margin: 14px 0; }
.cat-rejected-title { color: var(--red); font-weight: 700; margin: 0 0 6px; font-size: 15px; }
.cat-rejected-note { font-family: "Caveat", cursive; font-size: 17px; color: var(--ink); margin: 6px 0 10px; background: rgba(255,255,255,0.6); padding: 8px 12px; border-radius: 6px; border-left: 3px solid var(--red); }

/* ═══ Fullscreen digit reveal ═══ */
.cat-reveal-fullscreen { background: radial-gradient(ellipse at top, #ffe9b6, #f0cf82 70%); padding: 70px 20px 40px; text-align: center; border-radius: var(--radius); position: relative; overflow: hidden; min-height: 500px; animation: cat-reveal-in 0.6s ease-out; }
@keyframes cat-reveal-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.cat-reveal-rays { position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 224, 138, 0.35) 10deg, transparent 20deg, transparent 30deg, rgba(255, 224, 138, 0.35) 40deg, transparent 50deg, transparent 60deg, rgba(255, 224, 138, 0.35) 70deg, transparent 80deg, transparent 90deg, rgba(255, 224, 138, 0.35) 100deg, transparent 110deg, transparent 120deg, rgba(255, 224, 138, 0.35) 130deg, transparent 140deg, transparent 150deg, rgba(255, 224, 138, 0.35) 160deg, transparent 170deg, transparent 180deg, rgba(255, 224, 138, 0.35) 190deg, transparent 200deg, transparent 210deg, rgba(255, 224, 138, 0.35) 220deg, transparent 230deg, transparent 240deg, rgba(255, 224, 138, 0.35) 250deg, transparent 260deg, transparent 270deg, rgba(255, 224, 138, 0.35) 280deg, transparent 290deg, transparent 300deg, rgba(255, 224, 138, 0.35) 310deg, transparent 320deg, transparent 330deg, rgba(255, 224, 138, 0.35) 340deg, transparent 350deg); animation: cat-rays 40s linear infinite; opacity: 0.7; }
@keyframes cat-rays { to { transform: rotate(360deg); } }
.cat-confetti { position: absolute; inset: 0; background: radial-gradient(circle at 15% 30%, var(--gold) 2px, transparent 3px), radial-gradient(circle at 78% 18%, var(--red) 2px, transparent 3px), radial-gradient(circle at 40% 60%, var(--palm-600) 2px, transparent 3px), radial-gradient(circle at 85% 70%, var(--gold-light) 3px, transparent 4px); pointer-events: none; opacity: 0.7; }
.cat-reveal-content { position: relative; z-index: 5; }
.cat-reveal-kicker { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; margin-bottom: 6px; }
.cat-reveal-title { font-family: "Instrument Serif", serif; font-style: italic; font-size: 36px; margin: 6px 0 10px; color: var(--ink); font-weight: 400; }
.cat-reveal-digit { font-family: "Instrument Serif", serif; font-size: 180px; line-height: 1; color: var(--gold-dark); font-weight: 400; margin: 12px 0; text-shadow: 0 6px 18px rgba(148,102,29,0.35); animation: cat-digit-pop 0.8s cubic-bezier(0.22, 1.2, 0.6, 1); }
@keyframes cat-digit-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.cat-reveal-hint { font-family: "Caveat", cursive; font-size: 18px; color: var(--ink-soft); margin: 14px 0 8px; }
.cat-reveal-time { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink-soft); margin: 0 0 16px; letter-spacing: 0.05em; }
.cat-reveal-actions { margin-top: 16px; }

/* ═══ Quiz ═══ */
.cat-quiz-wrap { background: var(--cream); border: 1px solid var(--parchment-edge); border-radius: 12px; padding: 18px; margin-top: 12px; }
.cat-quiz-stats { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; }
.cat-quiz-stat strong { display: block; font-family: "Instrument Serif", serif; font-size: 22px; color: var(--ink); letter-spacing: normal; text-transform: none; font-weight: 400; }
.cat-quiz-progress { height: 8px; background: var(--sand-100); border-radius: 4px; overflow: hidden; border: 1px solid var(--parchment-edge); margin-bottom: 18px; }
.cat-quiz-progress-bar { height: 100%; background: linear-gradient(to right, var(--gold), var(--gold-light)); transition: width 0.3s; }
.cat-quiz-q { font-family: "Instrument Serif", serif; font-style: italic; font-size: 22px; line-height: 1.3; color: var(--ink); margin-bottom: 18px; }
.cat-quiz-options { display: grid; gap: 8px; }
.cat-quiz-opt {
    padding: 12px 16px;
    background: rgba(255,246,228,0.8);
    border: 2px solid var(--parchment-edge);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    transition: background 0.15s, border-color 0.15s, filter 0.15s, transform 0.1s;
}
.cat-quiz-opt:hover:not(:disabled) { border-color: var(--gold); }
.cat-quiz-opt:disabled { cursor: default; opacity: 0.9; }
/* Selected (just clicked, waiting for server) — distinct luminous gold look. */
.cat-quiz-opt.selected {
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    border-color: var(--gold-dark);
    color: #ffffff;
    filter: brightness(1.08);
    box-shadow: 0 3px 0 var(--gold-dark), 0 0 0 3px rgba(230, 182, 95, 0.35);
    transform: translateY(-1px);
    font-weight: 600;
}
.cat-quiz-opt.correct { background: #d5f5e3; color: var(--palm-800); border-color: var(--palm-600); filter: none; box-shadow: none; transform: none; }
.cat-quiz-opt.wrong   { background: #fdecea; color: var(--red);        border-color: var(--red);      filter: none; box-shadow: none; transform: none; }
.cat-quiz-feedback { text-align: center; font-size: 14px; margin-top: 12px; min-height: 20px; font-weight: 600; }
.cat-quiz-feedback.ok { color: var(--palm-800); }
.cat-quiz-feedback.err { color: var(--red); }
.cat-quiz-loading { text-align: center; padding: 30px; color: var(--ink-soft); font-family: "Caveat", cursive; font-size: 18px; }

/* ═══ Treasure ═══ */
.cat-treasure-page { background: radial-gradient(ellipse at top, rgba(255,192,74,0.22), transparent 60%), linear-gradient(to bottom, #fce2a0, #ecc47f); padding: 40px 24px; text-align: center; border-radius: var(--radius); }
.cat-chest-big {
    display: block;
    margin: 0 auto 10px;
    filter: drop-shadow(0 10px 20px rgba(42, 29, 14, 0.3));
    animation: cat-chest-bounce-center 3s ease-in-out infinite;
    transform-origin: center center;
}
@keyframes cat-chest-bounce-center {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.cat-treasure-kicker { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; }
.cat-treasure-title { font-family: "Instrument Serif", serif; font-style: italic; font-size: 48px; line-height: 1; margin: 6px 0; color: var(--ink); font-weight: 400; }
.cat-treasure-sub { font-family: "Caveat", cursive; font-size: 20px; color: var(--ink-soft); margin: 6px 0 20px; }
.cat-code-form { max-width: 440px; margin: 22px auto 0; }
.cat-code-digits { display: flex; gap: 7px; justify-content: center; margin: 16px 0 18px; }
.cat-code-box {
    width: 44px; height: 60px;
    background: #ffffff;
    border: 2px solid var(--gold-dark);
    border-radius: 8px;
    /* Inter renders a proper 900 weight on iOS; Instrument Serif has no bold and
       iOS Safari was synthesizing a faint outline which made digits unreadable. */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-weight: 900;
    color: #1a110a;
    text-align: center;
    line-height: 56px;
    padding: 0;
    -webkit-text-fill-color: #1a110a;
    -webkit-text-stroke: 0;
    text-shadow: none;
    font-synthesis: none;
    caret-color: var(--gold-dark);
}
.cat-code-box:focus {
    outline: none;
    border-color: var(--gold);
    background: #ffffff;
    color: #1a110a;
    -webkit-text-fill-color: #1a110a;
    box-shadow: 0 0 0 3px rgba(230, 182, 95, 0.3);
}
.cat-code-form .cat-btn-beach { width: 100%; }
#cat-treasure-result { margin-top: 18px; padding: 18px; border-radius: var(--radius); font-size: 15px; white-space: pre-wrap; }
#cat-treasure-result.ok { background: rgba(255,255,255,0.85); border: 2px solid var(--palm-600); color: var(--palm-800); text-align: left; }
#cat-treasure-result.err { background: #fdecea; border: 2px solid var(--red); color: var(--red); text-align: center; }

/* ═══════════════════════════════════════════════════════════
   TEAM TOGGLE DRAWER (v2.6.4)
   ═══════════════════════════════════════════════════════════ */
.cat-team-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fff8e6, #f4e4bc);
    border: 2px solid var(--gold);
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    text-align: left;
    box-shadow: 0 2px 8px rgba(138,105,56,0.15);
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.15s;
    margin-bottom: 0;
    position: relative;
}
.cat-team-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(138,105,56,0.22);
    border-color: var(--gold-dark);
}
.cat-team-toggle-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--gold);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    font-size: 18px;
}
.cat-team-toggle-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-team-toggle-avatar-ph { color: var(--gold-dark); }
.cat-team-toggle-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cat-team-toggle-kicker {
    font-family: "IBM Plex Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-dark);
    font-weight: 700;
}
.cat-team-toggle-name {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 20px;
    color: var(--ink);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cat-team-toggle-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.cat-team-toggle-count {
    font-family: "Caveat", cursive;
    font-size: 14px;
    color: var(--ink-soft);
    white-space: nowrap;
}
.cat-team-toggle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--red);
    color: #fff;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    animation: cat-team-badge-pulse 1.4s ease-in-out infinite;
}
@keyframes cat-team-badge-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}
.cat-team-toggle-chevron {
    color: var(--gold-dark);
    font-size: 16px;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.cat-team-toggle.is-open .cat-team-toggle-chevron { transform: rotate(180deg); }

/* Collapsible panel */
.cat-team-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    margin-bottom: 0;
}
.cat-team-panel.is-open {
    max-height: 2000px;     /* plenty of room */
    margin-bottom: 10px;
}
.cat-team-panel-inner {
    padding-top: 14px;
    animation: cat-team-panel-in 0.28s ease-out;
}
@keyframes cat-team-panel-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cat-team-panel .cat-dash-head { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════
   TREASURE-MAP HERO (v2.6.4) — top of dashboard
   ═══════════════════════════════════════════════════════════ */
.cat-map-hero {
    margin: 4px 0 22px;
    animation: cat-map-float 6s ease-in-out infinite;
    perspective: 800px;
}
@keyframes cat-map-float {
    0%, 100% { transform: translateY(0) rotate(-0.4deg); }
    50%      { transform: translateY(-5px) rotate(0.4deg); }
}
.cat-map-parchment {
    position: relative;
    background:
        radial-gradient(ellipse at 15% 18%, rgba(139,98,32,0.18), transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(139,98,32,0.14), transparent 55%),
        linear-gradient(135deg, #f5e5b8 0%, #edd9a4 50%, #dcc188 100%);
    border: 2px solid #8b6220;
    border-radius: 6px;
    padding: 22px 22px 18px;
    text-align: center;
    box-shadow:
        0 3px 0 0 rgba(42,29,14,0.25),
        0 10px 28px rgba(138,105,56,0.3),
        inset 0 0 50px rgba(139,98,32,0.18),
        inset 0 0 10px rgba(42,29,14,0.15);
    overflow: hidden;
}
/* paper-grain texture */
.cat-map-parchment::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 22% 28%, rgba(139,98,32,0.10) 1px, transparent 2px),
        radial-gradient(circle at 65% 45%, rgba(42,29,14,0.07) 1px, transparent 2px),
        radial-gradient(circle at 85% 75%, rgba(139,98,32,0.08) 1px, transparent 2px),
        radial-gradient(circle at 30% 85%, rgba(42,29,14,0.06) 1px, transparent 2px),
        radial-gradient(circle at 10% 55%, rgba(139,98,32,0.05) 1px, transparent 2px);
    background-size: 80px 80px, 120px 120px, 100px 100px, 140px 140px, 160px 160px;
    pointer-events: none;
    opacity: 0.85;
}
/* burnt-edge pseudo stains */
.cat-map-parchment::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at top right, rgba(85,55,15,0.25), transparent 20%),
        radial-gradient(ellipse at bottom left, rgba(85,55,15,0.18), transparent 25%);
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.6;
}
.cat-map-corner {
    position: absolute;
    width: 22px; height: 22px;
    border: 2px solid #8b6220;
    opacity: 0.55;
    z-index: 2;
}
.cat-map-corner.tl { top: 7px; left: 7px; border-right: none; border-bottom: none; }
.cat-map-corner.tr { top: 7px; right: 7px; border-left: none; border-bottom: none; }
.cat-map-corner.bl { bottom: 7px; left: 7px; border-right: none; border-top: none; }
.cat-map-corner.br { bottom: 7px; right: 7px; border-left: none; border-top: none; }

.cat-map-compass {
    position: absolute;
    top: 10px; right: 14px;
    width: 54px; height: 54px;
    animation: cat-map-compass-spin 30s linear infinite;
    opacity: 0.9;
    z-index: 3;
    filter: drop-shadow(0 1px 1px rgba(42,29,14,0.3));
}
@keyframes cat-map-compass-spin { to { transform: rotate(360deg); } }

.cat-map-kicker {
    position: relative;
    z-index: 2;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: #8b6220;
    font-weight: 700;
    margin-bottom: 2px;
}
.cat-map-title {
    position: relative;
    z-index: 2;
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 30px;
    margin: 2px 0 6px;
    color: #2a1d0e;
    font-weight: 400;
    text-shadow: 1px 1px 0 rgba(255,250,232,0.5);
    line-height: 1.1;
}
.cat-map-progress {
    position: relative;
    z-index: 2;
    font-family: "Caveat", cursive;
    font-size: 17px;
    color: #6b4818;
    margin: 4px 0 10px;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.cat-map-digits {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 30px;
    color: #b8372d;
    font-weight: 600;
    line-height: 1;
    animation: cat-map-digit-beat 1.6s ease-in-out infinite;
}
@keyframes cat-map-digit-beat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}
.cat-map-slash { color: #8b6220; margin: 0 2px; font-size: 22px; }
.cat-map-total {
    font-family: "Instrument Serif", serif;
    font-size: 24px;
    color: #2a1d0e;
    margin-right: 6px;
}
.cat-map-progress-label {
    font-family: "Caveat", cursive;
    font-size: 17px;
    color: #6b4818;
}

/* Animated trail + X */
.cat-map-trail-svg {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 320px;
    height: 100px;
    display: block;
    margin: 6px auto 14px;
}
.cat-map-path {
    stroke-dasharray: 5 7;
    animation: cat-map-dash 12s linear infinite;
}
@keyframes cat-map-dash { to { stroke-dashoffset: -240; } }
.cat-map-x {
    transform-origin: center;
    transform-box: fill-box;
    animation: cat-map-x-pulse 1.8s ease-in-out infinite;
}
@keyframes cat-map-x-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.28) rotate(6deg); }
}
.cat-map-x-halo {
    transform-origin: center;
    transform-box: fill-box;
    animation: cat-map-x-halo 1.8s ease-in-out infinite;
}
@keyframes cat-map-x-halo {
    0%, 100% { transform: scale(0.8); opacity: 0.3; }
    50%      { transform: scale(1.6); opacity: 0;   }
}

/* The CTA button */
.cat-map-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    background: linear-gradient(to bottom, #f0b544, #d4a23a 55%, #b98a28);
    color: #fff;
    border: 2px solid #8b6220;
    border-radius: 999px;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 4px 0 #8b6220,
        0 8px 18px rgba(42,29,14,0.28);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    overflow: hidden;
}
.cat-map-btn:hover  { transform: translateY(-1px); box-shadow: 0 5px 0 #8b6220, 0 10px 22px rgba(42,29,14,0.32); }
.cat-map-btn:active { transform: translateY(2px);  box-shadow: 0 2px 0 #8b6220; }
.cat-map-btn-icon   { font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }
.cat-map-btn-label  { color: #fff; text-shadow: 0 1px 0 rgba(42,29,14,0.35); }
.cat-map-btn-shimmer {
    position: absolute;
    top: 0; bottom: 0;
    left: -40%;
    width: 40%;
    background: linear-gradient(100deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.45) 50%,
        rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: cat-map-shimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cat-map-shimmer {
    0%   { left: -40%; }
    55%  { left: 120%; }
    100% { left: 120%; }
}

.cat-map-btn-unlocked {
    background: linear-gradient(to bottom, #e3af3a, #c78a1f 55%, #9a6812);
    animation: cat-map-btn-unlock 2s ease-in-out infinite;
}
@keyframes cat-map-btn-unlock {
    0%, 100% { box-shadow: 0 4px 0 #8b6220, 0 8px 18px rgba(42,29,14,0.28), 0 0 0 0 rgba(240,181,68,0.6); }
    50%      { box-shadow: 0 4px 0 #8b6220, 0 8px 24px rgba(240,181,68,0.6), 0 0 0 10px rgba(240,181,68,0);  }
}

.cat-map-btn.cat-map-shake { animation: cat-map-shake 0.55s cubic-bezier(.36,.07,.19,.97); }
@keyframes cat-map-shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

.cat-map-locked-msg {
    position: relative;
    z-index: 2;
    margin: 12px auto 0;
    max-width: 340px;
    padding: 10px 14px;
    background: rgba(253,236,234,0.95);
    color: #b0352e;
    border: 1.5px solid #f0b6b0;
    border-radius: 10px;
    font-family: "Caveat", cursive;
    font-size: 18px;
    line-height: 1.25;
    animation: cat-map-msg-in 0.35s cubic-bezier(0.22, 1.2, 0.6, 1);
    box-shadow: 0 3px 10px rgba(184,55,45,0.15);
}
.cat-map-locked-msg[hidden] { display: none; }
.cat-map-locked-x {
    display: inline-block;
    font-weight: 700;
    margin-right: 4px;
    font-family: "Inter", sans-serif;
}
@keyframes cat-map-msg-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   TREASURE CHEST OPEN + SCROLL (v2.6.5)
   ═══════════════════════════════════════════════════════════ */
.cat-chest-stage {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 10px;
    text-align: center;
    min-height: 190px;
}
.cat-chest-big {
    overflow: visible !important;
    display: inline-block;
}
/* Hide the interior glow until the chest is opened. */
.cat-chest-big .cat-chest-inside { opacity: 0; transition: opacity 0.3s 0.5s; }

/* Lid pivots on the back-left "hinge" of the chest (~10,50 in viewBox coords). */
.cat-chest-lid {
    transform-origin: 14px 50px;
    transform-box: view-box;
    transition: transform 0.95s cubic-bezier(0.34, 1.35, 0.45, 1);
    transform: rotate(0deg);
}
.cat-treasure-page.is-opening .cat-chest-lid {
    transform: rotate(-108deg);
}
.cat-treasure-page.is-opening .cat-chest-big .cat-chest-inside {
    opacity: 1;
}

/* Sparkles burst from the chest */
.cat-chest-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cat-chest-sparkle {
    position: absolute;
    left: 50%;
    top: 38%;
    color: #f0b544;
    font-size: 18px;
    opacity: 0;
    text-shadow: 0 0 8px rgba(240,181,68,0.8);
}
.cat-treasure-page.is-opening .cat-chest-sparkle {
    animation: cat-sparkle-fly 1.3s ease-out forwards;
    animation-delay: 0.45s;
}
.cat-treasure-page.is-opening .cat-chest-sparkle.s1 { --tx: -70px; --ty: -60px; --rot:  40deg; animation-delay: 0.40s; }
.cat-treasure-page.is-opening .cat-chest-sparkle.s2 { --tx: -30px; --ty: -90px; --rot: -20deg; animation-delay: 0.50s; font-size: 22px; }
.cat-treasure-page.is-opening .cat-chest-sparkle.s3 { --tx:  20px; --ty:-100px; --rot:  10deg; animation-delay: 0.55s; font-size: 26px; color: #ffdf7c; }
.cat-treasure-page.is-opening .cat-chest-sparkle.s4 { --tx:  60px; --ty: -80px; --rot:  30deg; animation-delay: 0.60s; }
.cat-treasure-page.is-opening .cat-chest-sparkle.s5 { --tx:  90px; --ty: -50px; --rot: -10deg; animation-delay: 0.65s; font-size: 20px; }
@keyframes cat-sparkle-fly {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(0.2) rotate(0); }
    30%  { opacity: 1; }
    100% { opacity: 0;
           transform: translate(calc(-50% + var(--tx)), var(--ty))
                      scale(1.2) rotate(var(--rot)); }
}

/* The scroll that emerges from the chest */
.cat-chest-scroll {
    position: relative;
    margin: -30px auto 0;
    max-width: 360px;
    padding: 0 6px 6px;
    opacity: 0;
    transform: translateY(30px) scale(0.5);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity 0.45s 0.75s ease-out,
                transform 0.9s 0.75s cubic-bezier(0.22, 1.2, 0.6, 1);
}
.cat-treasure-page.is-opening .cat-chest-scroll {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.cat-chest-scroll-top,
.cat-chest-scroll-bottom {
    height: 18px;
    background: linear-gradient(to bottom, #a87440, #5a3812 50%, #a87440);
    border: 2px solid #3d260c;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    position: relative;
}
.cat-chest-scroll-top::before,
.cat-chest-scroll-top::after,
.cat-chest-scroll-bottom::before,
.cat-chest-scroll-bottom::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 6px; height: 6px;
    background: #c89132;
    border: 1.5px solid #3d260c;
    border-radius: 50%;
    transform: translateY(-50%);
}
.cat-chest-scroll-top::before, .cat-chest-scroll-bottom::before { left: -3px; }
.cat-chest-scroll-top::after,  .cat-chest-scroll-bottom::after  { right: -3px; }
.cat-chest-scroll-paper {
    margin: -2px 14px;
    padding: 22px 22px 22px;
    background:
        radial-gradient(ellipse at 12% 18%, rgba(139,98,32,0.12), transparent 55%),
        radial-gradient(ellipse at 88% 82%, rgba(139,98,32,0.10), transparent 55%),
        linear-gradient(180deg, #fbefc9 0%, #f5e5b8 50%, #ecd79a 100%);
    border-left: 2px solid #8b6220;
    border-right: 2px solid #8b6220;
    box-shadow:
        inset 0 6px 10px rgba(42,29,14,0.15),
        inset 0 -6px 10px rgba(42,29,14,0.15);
    position: relative;
}
.cat-chest-scroll-paper::before {
    /* paper grain + slight burn */
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 22% 28%, rgba(139,98,32,0.08) 1px, transparent 2px),
        radial-gradient(circle at 70% 60%, rgba(42,29,14,0.06) 1px, transparent 2px);
    background-size: 80px 80px, 120px 120px;
    pointer-events: none;
    opacity: 0.7;
}
.cat-chest-scroll-ink {
    position: relative;
    z-index: 1;
    animation: cat-ink-reveal 0.6s 1.55s backwards ease-out;
}
@keyframes cat-ink-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cat-chest-scroll-title {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 24px;
    color: #2a1d0e;
    margin: 0 0 10px;
    text-align: center;
    font-weight: 400;
}
.cat-chest-scroll-body {
    font-family: "Caveat", cursive;
    font-size: 20px;
    line-height: 1.4;
    color: #3a2814;
    text-align: center;
    margin-bottom: 10px;
}

/* Form fading out during chest-open */
#cat-treasure-form.is-hiding {
    animation: cat-form-fade 0.5s ease-out forwards;
}
@keyframes cat-form-fade {
    to { opacity: 0; transform: translateY(10px); }
}

/* ═══════════════════════════════════════════════════════════
   TREASURE MAP IFRAME (v2.6.4) — shown after code verified
   ═══════════════════════════════════════════════════════════ */
.cat-treasure-map-frame {
    margin-top: 24px;
    padding: 18px 18px 14px;
    background:
        radial-gradient(ellipse at 20% 15%, rgba(139,98,32,0.18), transparent 55%),
        radial-gradient(ellipse at 80% 85%, rgba(139,98,32,0.14), transparent 55%),
        linear-gradient(135deg, #f5e5b8, #e8d4a0 60%, #dcc188);
    border: 3px solid #8b6220;
    border-radius: 8px;
    box-shadow:
        0 4px 0 rgba(42,29,14,0.25),
        0 10px 24px rgba(138,105,56,0.3),
        inset 0 0 35px rgba(139,98,32,0.15);
    text-align: center;
}
.cat-treasure-map-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #2a1d0e;
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 22px;
}
.cat-treasure-map-compass {
    color: #b8372d;
    font-size: 18px;
    animation: cat-treasure-map-spin 6s linear infinite;
    display: inline-block;
}
@keyframes cat-treasure-map-spin { to { transform: rotate(360deg); } }
.cat-treasure-map-title { font-weight: 400; text-shadow: 1px 1px 0 rgba(255,250,232,0.5); }
.cat-treasure-map-stage {
    position: relative;
    border: 2px solid #8b6220;
    border-radius: 6px;
    overflow: hidden;
    background: #fff8e6;
    box-shadow: inset 0 0 20px rgba(42,29,14,0.25);
}
.cat-treasure-map-stage iframe {
    display: block;
    width: 100%;
    min-height: 280px;
    border: 0;
}
.cat-treasure-map-corner {
    position: absolute;
    width: 20px; height: 20px;
    border: 2px solid #b8372d;
    pointer-events: none;
    opacity: 0.75;
}
.cat-treasure-map-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.cat-treasure-map-corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.cat-treasure-map-corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.cat-treasure-map-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.cat-treasure-map-open {
    display: inline-block;
    margin-top: 10px;
    font-family: "Caveat", cursive;
    font-size: 17px;
    color: #8b6220;
    text-decoration: underline;
}
.cat-treasure-map-open:hover { color: #2a1d0e; }

/* Admin join-code display on teams page */
.cat-admin-joincode {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #fff8e6, #f4e4bc);
    border: 1.5px solid #d4a23a;
    border-radius: 8px;
}
.cat-admin-joincode-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #8b6220;
    font-weight: 700;
}
.cat-admin-joincode-value {
    font-family: "IBM Plex Mono", monospace;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #2a1d0e;
    background: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #d4a23a;
}

/* ═══ Puzzle (task 5) — drag & drop ═══ */
.cat-puzzle-wrap {
    margin: 18px 0 24px;
}
.cat-puzzle-howto {
    text-align: center;
    margin: 0 auto 10px;
    max-width: 480px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fff8e6, #f4e4bc);
    border: 1.5px dashed #d4a23a;
    border-radius: 10px;
    color: #5b4527;
    font-size: 14px;
}
.cat-puzzle-howto strong { color: #2a1d0e; font-weight: 700; }
.cat-puzzle-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 0 auto 12px;
    max-width: 480px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5b4527;
}
.cat-puzzle-stat {
    background: #fdf6e3;
    border: 1px solid #d4bd89;
    padding: 6px 10px;
    border-radius: 6px;
}
.cat-puzzle-board {
    display: grid;
    grid-template-columns: repeat(var(--cat-grid, 5), 1fr);
    gap: 3px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    padding: 6px;
    background-color: #ffffff;
    background-image: none !important;
    border: 3px solid #8b6220;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(45, 27, 14, 0.25), inset 0 0 0 1px #d4a23a;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.cat-puzzle-tile,
.cat-puzzle-board .cat-puzzle-tile {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background-repeat: no-repeat !important;
    background-color: #2d1b0e;
    aspect-ratio: 1 / 1;
    border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 0 !important;
    display: block !important;
    cursor: grab;
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.15s;
    outline: 2px solid transparent;
    outline-offset: -2px;
    touch-action: none;
    text-shadow: none !important;
    box-sizing: border-box !important;
    -webkit-mask: none !important;
    mask: none !important;
    clip-path: none !important;
}
.cat-puzzle-tile::before,
.cat-puzzle-tile::after { border-radius: 3px !important; }
.cat-puzzle-tile:hover { background-color: #2d1b0e; }
.cat-puzzle-tile:focus,
.cat-puzzle-tile:focus-visible { outline: 2px solid transparent !important; }
.cat-puzzle-tile:active { cursor: grabbing; }
.cat-puzzle-tile.is-correct {
    box-shadow: 0 0 0 2px rgba(72, 160, 96, 0.85), 0 4px 10px rgba(45, 27, 14, 0.18);
    z-index: 1;
}
.cat-puzzle-tile.is-correct::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 3px;
    background: rgba(72, 160, 96, 0.12);
    pointer-events: none;
    border: 1px solid rgba(72, 160, 96, 0.6);
}
.cat-puzzle-tile.is-dragging {
    opacity: 0.25;
    cursor: grabbing;
}
.cat-puzzle-tile.is-hover-target {
    transform: scale(0.94);
    box-shadow: 0 0 0 4px #ffd35a, 0 0 18px rgba(255, 211, 90, 0.55);
    z-index: 2;
}
.cat-puzzle-tile.is-pop {
    animation: cat-puzzle-pop 0.3s ease;
}
@keyframes cat-puzzle-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.88); }
    100% { transform: scale(1); }
}
.cat-puzzle-ghost {
    border: 0;
    border-radius: 4px;
    background-repeat: no-repeat;
    pointer-events: none;
}
.cat-puzzle-board.is-won .cat-puzzle-tile {
    cursor: default;
    box-shadow: 0 0 0 2px rgba(212, 162, 58, 0.95);
    animation: cat-puzzle-win-pulse 1.2s ease-in-out;
}
.cat-puzzle-board.is-won .cat-puzzle-tile::after { display: none; }
@keyframes cat-puzzle-win-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

.cat-puzzle-toolbar {
    display: flex;
    justify-content: center;
    margin: 14px auto 0;
    max-width: 480px;
}
.cat-puzzle-btn-ghost {
    appearance: none;
    -webkit-appearance: none;
    background: #fdf6e3;
    color: #5b4527;
    border: 1px dashed #b8915a;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cat-puzzle-btn-ghost:hover,
.cat-puzzle-btn-ghost[aria-pressed="true"] {
    background: #2d1b0e;
    color: #ffe08a;
    border-color: #2d1b0e;
}
.cat-puzzle-preview {
    margin: 14px auto 0;
    max-width: 280px;
    text-align: center;
    border: 2px dashed #b8915a;
    border-radius: 10px;
    padding: 10px;
    background: #fdf6e3;
}
.cat-puzzle-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
}
.cat-puzzle-win {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(20, 12, 6, 0.92);
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 2147483646;
    padding: 20px;
    box-sizing: border-box;
    animation: cat-puzzle-fade-in 0.4s ease;
}
.cat-puzzle-win[hidden] { display: none !important; }
@keyframes cat-puzzle-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cat-puzzle-win-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffe08a;
    background: linear-gradient(160deg, #2d1b0e 0%, #4a2f17 100%);
    border: 2px solid #d4a23a;
    border-radius: 16px;
    box-shadow: 0 0 0 4px rgba(212, 162, 58, 0.15), 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(212, 162, 58, 0.15);
    padding: 36px 32px 30px;
    max-width: 360px;
    width: 100%;
    overflow: hidden;
}
.cat-puzzle-win-inner::before {
    content: "";
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 224, 138, 0.18) 18deg, transparent 36deg, transparent 60deg, rgba(255, 224, 138, 0.18) 78deg, transparent 96deg, transparent 120deg, rgba(255, 224, 138, 0.18) 138deg, transparent 156deg, transparent 180deg, rgba(255, 224, 138, 0.18) 198deg, transparent 216deg, transparent 240deg, rgba(255, 224, 138, 0.18) 258deg, transparent 276deg, transparent 300deg, rgba(255, 224, 138, 0.18) 318deg, transparent 336deg);
    animation: cat-puzzle-rays-spin 24s linear infinite;
    z-index: 0;
    pointer-events: none;
}
.cat-puzzle-win-inner > * { position: relative; z-index: 1; }
@keyframes cat-puzzle-rays-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.cat-puzzle-win .cat-reveal-rays,
.cat-puzzle-win .cat-confetti { display: none; }
.cat-puzzle-win-inner .cat-reveal-kicker {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #d4a23a;
    margin-bottom: 6px;
}
.cat-puzzle-win-inner .cat-reveal-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 38px;
    line-height: 1.05;
    margin: 4px 0 14px;
    color: #ffe08a;
}
.cat-puzzle-win-inner .cat-reveal-hint {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: #f4d27a;
    margin: 0;
    opacity: 0.9;
}

/* Mobile */
@media (max-width: 420px) {
    .cat-hero-title { font-size: 46px; }
    .cat-treasure-title { font-size: 42px; }
    .cat-reveal-digit { font-size: 140px; }
    .cat-page-title { font-size: 26px; }
    .cat-task-num { font-size: 42px; }
    .cat-code-box { width: 38px; height: 52px; font-size: 24px; }
    .cat-map-title { font-size: 26px; }
    .cat-map-compass { width: 44px; height: 44px; top: 8px; right: 10px; }
    .cat-map-parchment { padding: 18px 16px 14px; }
    .cat-map-btn { padding: 12px 20px; font-size: 13px; }
    .cat-puzzle-board { gap: 2px; padding: 4px; border-width: 2px; border-radius: 8px; }
    .cat-puzzle-tile { border-radius: 2px; }
    .cat-puzzle-stats { font-size: 10px; }
    .cat-puzzle-howto { font-size: 13px; padding: 8px 10px; }
}