/* SCL landing demo — chrome: cartoon v2 (art-sampled) + hand-style paper cards (v4 design) */

:root {
    /* palette sampled from the monster-truck Santa art */
    --snow:   #f6fafc;
    --blob:   #bcdcee;
    --ice:    #e8f3fa;
    --red:    #e02121;
    --red-deep: #a30d0d;
    --red-ink:  #c2251c;
    --ink:    #201c1c;
    --paper-ink: #262626;
    --tan:    #d6cab5;
    --chrome: #5a656d;
    --green:  #2c7a46;
    --green-ink: #1e6b40;
    --sky-ink: #1b7cb4;
    --ginger-ink: #8f5620;
    --crimson-ink: #a81b24;
    --gold:   #f2cf3f;
    /* hand-card paper system (opportunity-cards v4) */
    --paper:  #fbf7ee;
    --card:   #fffef8;
    --hl:     #ffe08a;
    --faded:  #6d6157;
    --cane: repeating-linear-gradient(115deg, var(--red) 0 9px, #fff 9px 18px);
}

/* ===== app chrome ===== */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Baloo 2', 'Trebuchet MS', sans-serif;
    /* Prevent scrolling and zooming on mobile */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

/* The stage is a fixed phone-aspect column that scales with screen
   height and centers on wider screens, so the layout (graphic text
   vs. buttons) is identical on mobile and desktop. */
.stage {
    position: relative;
    height: 100%;
    aspect-ratio: 390 / 844;
    max-width: 100vw;
    margin: 0 auto;
}

/* nav buttons — chunky sign-letter labels */
.icy-btn {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.icy-btn span {
    font-family: 'Titan One', 'Arial Black', sans-serif;
    font-weight: 400;
}
.icy-btn:active {
    transform: translateY(2px) scale(0.96);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.1),
        inset 0 2px 6px rgba(255,255,255,0.8),
        inset 0 -2px 6px rgba(140,190,255,0.5);
}

/* ===== slide-up views ===== */
.view {
    position: absolute;
    inset: 0;
    z-index: 40;
    transform: translateY(102%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0.28, 1);
    background: linear-gradient(180deg, rgba(246,250,252,0.94), rgba(232,243,250,0.96));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -12px 40px rgba(32, 28, 28, 0.28);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    visibility: hidden;
}
.view.open { transform: translateY(0); visibility: visible; }
/* keep the closing sheet visible during its slide-out transition */
.view.closing { visibility: visible; }

/* scalloped snow lip along the sheet's top edge (visible before scroll) */
.view::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 0;
    right: 0;
    height: 15px;
    pointer-events: none;
    background: radial-gradient(circle 11px at 13px 3px, var(--snow) 10.5px, rgba(255,255,255,0) 11.5px) repeat-x;
    background-size: 26px 15px;
}

/* header with candy-stripe ribbon under it */
.view-head {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: max(14px, env(safe-area-inset-top)) 18px 12px;
    background: var(--snow);
    border-bottom: none;
    box-shadow: 0 1px 0 rgba(38, 38, 38, 0.06);
}
.view-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7px;
    background: var(--cane);
    opacity: 0.35;
}
.vh-title {
    font-family: 'Titan One', 'Arial Black', sans-serif;
    font-weight: 400;
    font-size: 1.42rem;
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
    text-shadow: 2px 2px 0 rgba(224, 33, 33, 0.14);
}
.vh-title.vh-red { color: var(--red-deep); text-shadow: 2px 2px 0 rgba(32, 28, 28, 0.12); }
.view-head .xrow {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.close-btn {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border: 2.5px solid var(--paper-ink);
    background: var(--card);
    color: var(--red-deep);
    border-radius: 11px 14px 10px 13px / 14px 10px 13px 11px;
    box-shadow: 2px 3px 0 rgba(38, 38, 38, 0.14);
    flex: none;
    transition: transform 0.12s ease;
}
.close-btn:active { transform: scale(0.9) rotate(4deg); }

/* ===== filter chips ===== */
.chiprow {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 18px 4px;
    scrollbar-width: none;
}
.chiprow::-webkit-scrollbar { display: none; }
.chip {
    flex: none;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 15px;
    border-radius: 12px 15px 11px 14px / 15px 11px 14px 12px;
    border: 2px solid rgba(38, 38, 38, 0.25);
    background: var(--card);
    font: 700 12.5px/1 'Baloo 2', sans-serif;
    color: var(--paper-ink);
    transition: all 0.15s;
}
.chip.on {
    background: var(--sky-ink);
    border-color: rgba(27, 124, 180, 0.9);
    color: #fff;
    box-shadow: 2px 3px 0 rgba(27, 124, 180, 0.25);
}
.chip.chip-red.on {
    background: var(--red-ink);
    border-color: var(--red-deep);
    box-shadow: 2px 3px 0 rgba(163, 13, 13, 0.25);
}
.chip svg { flex: none; width: 12px; height: 12px; }

/* ===== hand-style paper cards (from opportunity-cards v4 design) ===== */
.paper {
    position: relative;
    background: var(--card);
    border: 2.5px solid var(--paper-ink);
    border-radius: 16px 19px 15px 18px / 18px 15px 19px 16px;
    box-shadow: 5px 6px 0 rgba(38, 38, 38, 0.13);
    padding: 1rem 1.1rem 0.95rem;
    font-family: 'Nunito', sans-serif;
    color: var(--paper-ink);
    margin: 0 18px 14px;
    transition: transform 0.18s ease;
}
.paper:nth-child(odd)  { transform: rotate(-0.35deg); }
.paper:nth-child(even) { transform: rotate(0.3deg); }
.paper:hover { transform: rotate(0); }

/* --- calendar event card --- */
.ev { display: flex; gap: 12px; align-items: stretch; }
.ev-main { flex: 1; min-width: 0; }
.ev-name { font-family: 'Titan One', sans-serif; font-weight: 400; font-size: 1.02rem; line-height: 1.2; color: var(--ink); }
.ev-meta { font: 600 12.5px/1.35 'Baloo 2', sans-serif; color: var(--sky-ink); margin-top: 6px; }
.ev-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.tag {
    font: 700 10px/1 'Baloo 2', sans-serif;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 5px 8px;
    border-radius: 6px 8px 5px 7px / 7px 5px 8px 6px;
    border: 1.5px solid rgba(38, 38, 38, 0.5);
    background: #fff;
    color: var(--paper-ink);
}
.tag.free { color: var(--green-ink); border-color: var(--green-ink); font-weight: 800; }
.ev-date {
    flex: none;
    text-align: center;
    background: var(--ice);
    border: 2px solid rgba(27, 124, 180, 0.3);
    border-radius: 12px 14px 11px 13px / 13px 11px 14px 12px;
    padding: 7px 10px 6px;
    min-width: 58px;
}
.ev-date .dow { display: block; font: 700 9.5px/1 'Baloo 2', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky-ink); }
.ev-date .num { display: block; font-family: 'Titan One', sans-serif; font-size: 1.5rem; line-height: 1.05; color: var(--red-ink); }
.ev-date .mon { display: block; font: 700 10px/1 'Baloo 2', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-ink); }

/* community-colored tags */
.tag.c-delhi      { background: rgba(30,107,64,0.10);  color: var(--green-ink);   border-color: rgba(30,107,64,0.45); }
.tag.c-oneonta    { background: rgba(27,124,180,0.10); color: var(--sky-ink);    border-color: rgba(27,124,180,0.45); }
.tag.c-milford    { background: rgba(143,86,32,0.12);  color: var(--ginger-ink);  border-color: rgba(143,86,32,0.45); }
.tag.c-cooperstown{ background: rgba(168,27,36,0.10);  color: var(--crimson-ink); border-color: rgba(168,27,36,0.45); }
.tag.c-nearby     { background: rgba(44,122,70,0.10);  color: #245c39;            border-color: rgba(44,122,70,0.45); }

/* big candy pill (full-width action, from v4 design) */
.paper-btn {
    display: block;
    width: calc(100% - 36px);
    margin: 0 18px 8px;
    padding: 10px 14px;
    text-align: center;
    font-family: 'Mountains of Christmas', cursive;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--snow);
    background: var(--red-ink);
    border: 2.5px solid var(--paper-ink);
    border-radius: 12px 9px 13px 8px / 9px 13px 8px 12px;
    box-shadow: 2px 3px 0 rgba(38, 38, 38, 0.18);
    cursor: pointer;
}
.paper-btn:active { transform: translateY(2px); box-shadow: 1px 1px 0 rgba(38,38,38,0.18); }

/* --- opportunity card (the designed hand-style card, in-list) --- */
.oc { display: flex; flex-direction: column; padding: 1.5rem 1.1rem 0.9rem; }
.oc--holly {
    border: none;
    background: url('../img/holly-border-paper.png') center / 100% 100% no-repeat var(--paper);
    padding: 2.3rem 1.6rem 3.2rem;
    border-radius: 14px 17px 13px 16px / 16px 13px 17px 14px;
}
.oc--point {
    background:
        url('../img/red-c-tl.png') top left / 130px 130px no-repeat,
        url('../img/red-c-tr.png') top right / 130px 130px no-repeat,
        url('../img/red-c-bl.png') bottom left / 130px 130px no-repeat,
        url('../img/red-c-br.png') bottom right / 170px 170px no-repeat,
        #faf0e7;
    border: 2.5px solid #b6352c;
    padding: 2.3rem 1.4rem 3rem;
}
.oc .biz {
    font: 700 1.16rem/1.15 'Oswald', sans-serif;
    letter-spacing: 0.02em;
    color: var(--sky-ink);
    text-align: center;
    margin-bottom: 2px;
}
.oc .town {
    font: 600 12px/1.3 'Baloo 2', sans-serif;
    color: var(--ginger-ink);
    text-align: center;
    margin-bottom: 10px;
}
.oc .logo-slot {
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px;
    width: 150px;
    background: var(--snow);
    border: 2px solid var(--paper-ink);
    border-radius: 10px;
    padding: 7px 10px;
}
.oc .logo-slot img { display: block; max-width: 100%; height: auto; }
.oc .head {
    font: 700 1.32rem/1.1 'Mountains of Christmas', cursive;
    color: var(--red-ink);
    text-wrap: balance;
    text-align: center;
    margin: 0 0 8px;
}
.oc .body { font-size: 0.95rem; line-height: 1.45; text-align: center; margin: 0 0 8px; }
.oc .offer {
    position: relative;
    display: inline-block;
    align-self: center;
    font-size: 1rem;
    padding: 2px 6px;
    margin: 2px 0 10px;
    text-wrap: balance;
    text-align: center;
}
.oc .offer::before {
    content: "";
    position: absolute; inset: 3px -4px 2px;
    background: var(--hl);
    z-index: -1;
    border-radius: 10px 5px 9px 6px / 6px 9px 5px 10px;
    transform: rotate(-0.4deg);
    opacity: 0.9;
}
.oc .offer i { font-style: normal; font-weight: 700; color: var(--green-ink); }
.oc--point .offer i { color: var(--red-ink); }
.oc .offer b { font-weight: 400; }
.valid {
    display: inline-block;
    align-self: center;
    font: 600 12px 'Baloo 2', sans-serif;
    color: var(--faded);
    border: 1.5px solid rgba(38, 38, 38, 0.3);
    border-radius: 4px;
    padding: 2px 9px 3px;
    margin-bottom: 10px;
}
.contact {
    margin-top: auto;
    border-top: 2px dashed rgba(38, 38, 38, 0.3);
    padding: 11px 0 2px;
    display: grid;
    gap: 8px;
}
.contact.contact-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.contact a {
    display: flex; align-items: center; justify-content: center;
    color: var(--snow);
    background: var(--red-ink);
    border: 2px solid var(--paper-ink);
    border-radius: 10px 13px 9px 12px / 13px 9px 12px 10px;
    padding: 7px 6px;
    font-family: 'Mountains of Christmas', cursive;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 2px 3px 0 rgba(38, 38, 38, 0.18);
    text-decoration: none;
}
.contact a:hover { filter: brightness(1.08); text-decoration: underline; }
.contact .spice { background: var(--ginger-ink); }
.contact a.disabled {
    background: transparent;
    color: rgba(38, 38, 38, 0.3);
    border-style: dashed;
    box-shadow: none;
    cursor: default;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.contact a.disabled:hover { filter: none; text-decoration: none; }
.oc .demo-note { text-align: center; margin: 6px 0 4px; }

/* hunt-stamp overhang (designed badge art) */
.stamp {
    position: absolute;
    top: -22px;
    left: 50%;
    width: 200px;
    transform: translateX(-50%) rotate(0deg);
    z-index: 2;
    pointer-events: none;
}
.stamp img { display: block; width: 100%; height: auto; filter: drop-shadow(2px 3px 0 rgba(38, 38, 38, 0.2)); }

/* ===== hunt view ===== */
.badge-hero {
    display: block;
    width: 170px;
    margin: 18px auto 6px;
    filter: drop-shadow(3px 4px 0 rgba(38, 38, 38, 0.16));
}
.hunt-lede {
    margin: 0 18px 6px;
    text-align: center;
    font: 600 14px/1.45 'Baloo 2', sans-serif;
    color: var(--paper-ink);
}
.hunt-lede b { color: var(--red-ink); }
.ribbon { margin: 14px 18px 4px; padding: 3px; background: var(--cane); border: 2.5px solid var(--paper-ink); border-radius: 14px; box-shadow: 4px 5px 0 rgba(38,38,38,0.14); }
.ribbon-in {
    background: var(--red-ink);
    border-radius: 10px;
    text-align: center;
    padding: 10px 8px 12px;
    color: #fff;
}
.ribbon-in .big { font-family: 'Titan One', sans-serif; font-size: 1.02rem; letter-spacing: 0.02em; display: block; }
.ribbon-in .sub { font: 600 12px/1.3 'Baloo 2', sans-serif; opacity: 0.85; display: block; margin-top: 3px; }

.hunt-row { display: flex; gap: 10px; margin: 14px 18px 6px; }
#huntWord {
    flex: 1;
    min-width: 0;
    text-align: center;
    font: 800 15px/1 'Baloo 2', sans-serif;
    letter-spacing: 0.12em;
    color: var(--red-deep);
    background: var(--card);
    border: 2.5px solid var(--paper-ink);
    border-radius: 14px 11px 15px 12px / 12px 15px 11px 14px;
    box-shadow: inset 0 2px 5px rgba(38, 38, 38, 0.08);
    padding: 14px 10px;
}
#huntWord::placeholder { color: rgba(163, 13, 13, 0.35); }
#huntWord:focus { outline: none; border-color: var(--red-ink); box-shadow: inset 0 2px 5px rgba(38,38,38,0.08), 0 0 0 3px rgba(224,33,33,0.18); }
#huntGo, #huntGo2 {
    flex: none;
    align-self: stretch;
    padding: 0 20px;
    font-family: 'Mountains of Christmas', cursive;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--snow);
    background: var(--red-ink);
    border: 2.5px solid var(--paper-ink);
    border-radius: 13px 10px 14px 11px / 11px 14px 10px 13px;
    box-shadow: 2px 3px 0 rgba(38, 38, 38, 0.18);
    cursor: pointer;
}
#huntGo:active { transform: translateY(2px); box-shadow: 1px 1px 0 rgba(38,38,38,0.18); }

#huntMsg { margin: 8px 18px 0; text-align: center; font: 700 12.5px/1.4 'Baloo 2', sans-serif; color: var(--red-deep); }

.next-card { margin: 12px 18px 0; text-align: center; background: #f2faf3; border-color: rgba(22, 101, 52, 0.35); }
.next-card .nc-label { font: 700 10px/1 'Baloo 2', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(22, 101, 52, 0.6); }
.next-card .nc-name { font-family: 'Titan One', sans-serif; font-size: 1.1rem; color: #14532d; margin: 4px 0 2px; }
.next-card .nc-hint { font: 600 12.5px/1.4 'Baloo 2', sans-serif; color: rgba(20, 83, 45, 0.75); }
#huntDots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
#huntDots span { width: 9px; height: 9px; border-radius: 999px; background: rgba(32, 28, 28, 0.18); }
#huntDots span.won { background: #16a34a; }

.demo-note {
    font: 700 10px/1.5 'Baloo 2', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(38, 38, 38, 0.42);
    margin: 12px 18px 0;
    text-align: center;
}
.empty {
    background: rgba(255, 254, 248, 0.7);
    border: 2px dashed rgba(38, 38, 38, 0.25);
    border-radius: 16px;
    color: var(--faded);
    font: 600 13px/1.4 'Baloo 2', sans-serif;
    text-align: center;
    padding: 22px 16px;
    margin: 0 18px 14px;
}

@keyframes wobble {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-7px); }
    60% { transform: translateX(6px); }
    80% { transform: translateX(-3px); }
}
.wobble { animation: wobble 0.4s ease; }

/* ===== discover: browse-mode system (temporary scaffolding) ===== */
.no-scroll { overflow-y: hidden; display: flex; flex-direction: column; }
.no-scroll .view-head { position: relative; }
.disc-mode { display: none; }
.disc-mode.show { display: block; }

#disc-stack.show, #disc-feed.show { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#disc-stack { overflow: hidden; }
#disc-feed { overflow-y: auto; scroll-snap-type: y mandatory; touch-action: pan-y; -webkit-overflow-scrolling: touch; }

.hbtns { display: flex; align-items: center; gap: 8px; }
.chip.small { padding: 8px 12px; font-size: 11px; }
#modesBtn[hidden] { display: none !important; }

/* --- mode chooser --- */
.mode-lede {
    text-align: center;
    font: 700 15px/1.3 'Baloo 2', sans-serif;
    color: var(--ink);
    margin: 20px 18px 14px;
}
.mode-grid { margin: 0 18px; display: grid; gap: 12px; }
.mode-tile { margin: 0; padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; text-align: left; }
.mode-tile:active { transform: rotate(0) translateY(2px) scale(0.99); }
.mode-tile .mi {
    flex: none; width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ice);
    border: 2px solid rgba(27, 124, 180, 0.35);
    border-radius: 12px 15px 11px 14px / 15px 11px 14px 12px;
    color: var(--sky-ink);
}
.mode-tile .mi svg { width: 24px; height: 24px; }
.mode-tile .mt { display: block; font-family: 'Titan One', sans-serif; font-size: 1rem; color: var(--ink); }
.mode-tile .md { display: block; font: 600 12px/1.4 'Baloo 2', sans-serif; color: rgba(38, 38, 38, 0.6); margin-top: 2px; }
#modeCommChips { padding-top: 12px; padding-bottom: 2px; }
.mode-grid + .demo-note { margin-top: 16px; }

/* --- stack mode (swipe deck) --- */
.stack-top { display: flex; justify-content: space-between; align-items: center; margin: 10px 18px 6px; flex: none; }
.count-chip {
    font: 700 12px/1 'Baloo 2', sans-serif;
    padding: 9px 14px;
    border: 2px solid rgba(38, 38, 38, 0.25);
    border-radius: 999px;
    background: var(--card);
    color: var(--paper-ink);
}
#savedChip { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; opacity: 0.45; }
#savedChip.has { opacity: 1; background: rgba(30, 107, 64, 0.08); border-color: rgba(30, 107, 64, 0.5); color: var(--green-ink); }
#savedChip svg { width: 13px; height: 13px; }

.deck { position: relative; flex: 1; min-height: 0; margin: 4px 14px 0; }
.deck-card {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    margin: 0;
    overflow: hidden;
    transition: transform 0.28s ease, opacity 0.28s ease;
}
.deck-card.dragging { transition: none; cursor: grabbing; }
.deck-card .paper { margin: 0; height: 100%; box-shadow: 6px 8px 0 rgba(38, 38, 38, 0.16); }

/* SAVE / PASS flag appears past the tilt threshold while dragging */
.deck-card::after {
    content: attr(data-flag);
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    font-family: 'Titan One', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    padding: 4px 14px;
    border: 2.5px solid currentColor;
    border-radius: 10px 13px 9px 12px / 13px 9px 12px 10px;
    background: rgba(255, 254, 248, 0.86);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    z-index: 20;
}
.deck-card[data-flag="SAVE"]::after { content: "SAVE"; color: var(--green-ink); opacity: 1; }
.deck-card[data-flag="PASS"]::after { content: "PASS"; color: var(--red-deep); opacity: 1; }

.deck-actions { flex: none; display: flex; justify-content: center; gap: 26px; padding: 12px 0 16px; }
.act-btn {
    width: 62px; height: 62px;
    border-radius: 999px;
    border: 2.5px solid var(--paper-ink);
    background: var(--card);
    box-shadow: 2px 3px 0 rgba(38, 38, 38, 0.16);
    display: flex; align-items: center; justify-content: center;
    color: var(--red-deep);
    transition: transform 0.12s ease;
}
.act-btn svg { width: 26px !important; height: 26px !important; }
.act-btn:active { transform: scale(0.9); }
.act-btn.save { color: var(--green-ink); }

/* --- feed mode --- */
.feed { flex: 1; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.feed-card {
    position: relative;
    height: 100%;
    padding: 12px 14px 8px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
}
.feed-card .paper { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: 84px; }
.feed-end { justify-content: center; }
.rail { position: absolute; right: 22px; bottom: 100px; display: flex; flex-direction: column; gap: 10px; z-index: 5; }
.rail-btn {
    width: 46px; height: 46px;
    border-radius: 999px;
    background: var(--card);
    border: 2.5px solid var(--paper-ink);
    box-shadow: 2px 3px 0 rgba(38, 38, 38, 0.16);
    display: flex; align-items: center; justify-content: center;
    color: var(--red-ink);
    cursor: pointer;
}
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn.saved { background: var(--green-ink); border-color: #14532d; color: #fff; }
.rail-btn:hover { filter: brightness(1.06); }

/* list mode keeps chips + stacked designed cards */
#disc-list .chiprow { padding-top: 12px; }
/* ===================== HUNT VIEW — two stop types (2026-10-13) ===================== */
.hstat { margin: 12px 18px 0; }
.hstat-in {
  display: flex; align-items: center; gap: 10px;
  background: var(--snow); border: 2.5px solid var(--paper-ink); border-radius: 14px;
  box-shadow: 4px 5px 0 rgba(38,38,38,0.12); padding: 10px 14px;
}
.hstat-dots { display: flex; gap: 6px; }
.hstat-dots span { width: 10px; height: 10px; border-radius: 999px; background: rgba(32,28,28,0.16); box-shadow: inset 0 1px 1px rgba(0,0,0,0.12); }
.hstat-dots span.won { background: #16a34a; }
.hstat-dots span.ticket { background: var(--red-ink); }
.hstat-txt { font: 700 10.5px/1.3 'Baloo 2', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sky-ink); }

.hunt-mode-grid { margin: 14px 18px 0; }
.hunt-mode-grid .mode-lede { margin: 0 0 10px; }

#view-hunt .mode-tile { cursor: pointer; }
#view-hunt .mode-tile:active { transform: translateY(2px); }

.hunt-panel { margin: 14px 18px 0; }
#hunt-inperson .hunt-lede { margin: 0 0 4px; }

.online-clue { position: relative; padding: 1.1rem 1rem 1rem; }
.online-clue .oc-label {
  font: 800 10px/1 'Baloo 2', sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--sky-ink); border: 2px solid var(--paper-ink);
  border-radius: 8px; display: inline-block; padding: 4px 8px; margin-bottom: 8px;
  box-shadow: 2px 2px 0 rgba(38,38,38,0.18);
}
.online-clue .biz { font-family: 'Titan One', sans-serif; font-size: 1.08rem; color: var(--ink); }
.online-clue .clue-lede { font: 600 12.5px/1.4 'Baloo 2', sans-serif; color: var(--sky-ink); margin: 6px 0 8px; }
.online-clue .clue-text {
  font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 1.02rem; line-height: 1.5; color: var(--paper-ink);
  background: #fffdf5; border: 2px dashed var(--tan); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px;
}
.clue-visit { width: 100%; box-sizing: border-box; }

#huntBlank {
  flex: 1; min-width: 0; text-align: center;
  font: 800 15px/1 'Baloo 2', sans-serif; letter-spacing: 0.08em;
}
#huntBlank, #huntWord {
  padding: 13px 12px; border: 2.5px solid var(--paper-ink); border-radius: 14px;
  background: #fff; box-shadow: inset 0 2px 4px rgba(38,38,38,0.08);
}
#huntBlank.wobble, #huntWord.wobble { animation: huntwobble .4s; }
@keyframes huntwobble { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-6px) } 55% { transform: translateX(6px) } 80% { transform: translateX(-3px) } }

.ticket-card { margin: 12px 18px 0; background: #fff7ed !important; border-color: rgba(180,83,9,0.4); }
.ticket-card .tk-label { font-family: 'Titan One', sans-serif; font-size: 1.05rem; color: var(--red-deep); }
.ticket-card .tk-text { font: 600 13px/1.45 'Baloo 2', sans-serif; color: rgba(120,53,15,0.85); margin: 6px 0 12px; }
.ticket-card .paper-btn { margin-bottom: 6px; }

/* ===================== MAP VIEW — vintage corridor map (v3 Screen 5) ===================== */
.map-wrap { padding: 14px 18px 0; }
.map-canvas { padding: 14px 10px 10px; border-radius: 22px; }
#corridorMap { width: 100%; height: auto; display: block; }

#corridorMap .map-snow circle { fill: rgba(38,38,38,0.10); }

#corridorMap #mapRoute { filter: drop-shadow(1.5px 2px 0 rgba(38,38,38,0.15)); }

#corridorMap .town circle {
  fill: var(--ice); stroke: var(--paper-ink); stroke-width: 2.5;
  box-shadow: 4px 5px 0 rgba(38,38,38,0.12);
}
#corridorMap .town:hover circle { fill: #fff; }
#corridorMap .town-ico { font-size: 20px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
#corridorMap .town-name {
  font-family: 'Titan One', sans-serif; font-size: 15px; fill: var(--red-deep);
  text-anchor: middle; paint-order: stroke; stroke: var(--snow); stroke-width: 4px; strokelinejoin: round;
  letter-spacing: 0.03em;
}
#corridorMap .town-name { stroke-linejoin: round; }

#corridorMap .map-compass circle { fill: var(--snow); stroke: var(--paper-ink); stroke-width: 2; }
#corridorMap .map-compass path { fill: var(--red-ink); }
#corridorMap .map-compass text {
  font: 700 8px/1 'Baloo 2', sans-serif; letter-spacing: 0.1em; fill: rgba(38,38,38,0.55); text-anchor: middle;
}
#corridorMap .map-sleigh { font-size: 26px; }
#corridorMap .map-sleigh.sm { font-size: 14px; opacity: 0.7; }

/* hunt pins */
#corridorMap .lg-pin-dot { stroke: var(--paper-ink); stroke-width: 2; }
#corridorMap .map-pin { cursor: pointer; }
#corridorMap .map-pin .mp-badge {
  fill: var(--red-ink); stroke: var(--paper-ink); stroke-width: 2.5;
  filter: drop-shadow(2px 2.5px 0 rgba(38,38,38,0.2));
  transform-box: fill-box; transform-origin: center; transition: transform .2s;
}
#corridorMap .map-pin.online .mp-badge { fill: var(--sky-ink); }
#corridorMap .map-pin.done .mp-badge { fill: #16a34a; }
#corridorMap .map-pin:hover .mp-badge,
#corridorMap .map-pin.picked .mp-badge { transform: scale(1.18); }
#corridorMap .map-pin text.mp-num {
  fill: #fff; font: 700 11px/1 'Baloo 2', sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none;
}
#corridorMap .map-pin .mp-ico { font-size: 9px; text-anchor: middle; dominant-baseline: central; }

.map-legend { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; padding: 0 6px; }
.map-legend span { font: 700 11px/1.4 'Baloo 2', sans-serif; color: var(--paper-ink); display: flex; align-items: center; gap: 7px; }
.lg-pin { width: 13px; height: 13px; border-radius: 999px; border: 2px solid var(--paper-ink); display: inline-block; flex: none; }
.lg-red { background: var(--red-ink); }
.lg-blue { background: var(--sky-ink); }

.map-card { position: relative; margin-top: 14px; }
.map-card .map-card-x {
  position: absolute; top: -14px; right: -12px; background: #fff;
}

/* hunt mode switcher: hide panels until chosen (same pattern as disc-mode) */
#hunt-mode, .hunt-panel { display: none; margin: 14px 18px 0; }
#hunt-mode.show, .hunt-panel.show { display: block; }

/* map: tappable towns + tappable order list */
#corridorMap .town { cursor: pointer; }
#corridorMap .town-hit { cursor: pointer; fill: transparent; stroke: none; }
#corridorMap .town:hover circle:not(.town-hit) { fill: #fff; }
#corridorMap .mp-hit { cursor: pointer; }

.map-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; text-align: left; }
.map-row {
  display: flex; align-items: center; gap: 9px;
  background: #fffdf8; border: 2px solid rgba(38,38,38,0.65); border-radius: 12px;
  padding: 9px 10px; box-shadow: 2px 2px 0 rgba(38,38,38,0.08);
}
.map-row.hot { border-color: var(--red-ink); box-shadow: 2px 2px 0 rgba(194,37,28,0.25); }
.map-row.done { opacity: 0.62; }
.mr-num {
  font-family: 'Titan One', sans-serif; font-size: 0.9rem; color: var(--red-deep);
  flex: none; width: 18px; text-align: center;
}
.map-row .lg-pin { width: 11px; height: 11px; }
.mr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mr-name { font: 800 13px/1.2 'Baloo 2', sans-serif; color: var(--ink); }
.mr-sub { font: 600 10.5px/1.3 'Baloo 2', sans-serif; color: rgba(38,38,38,0.5); letter-spacing: 0.03em; text-transform: uppercase; }
.mr-check { flex: none; font: 800 10.5px/1 'Baloo 2', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; color: #15803d; }
.mr-play {
  flex: none; font: 800 11px/1 'Baloo 2', sans-serif; letter-spacing: 0.04em;
  color: #fff; background: var(--red-ink); border: 2px solid var(--paper-ink);
  border-radius: 9px; padding: 7px 10px; cursor: pointer;
  box-shadow: 2px 2px 0 rgba(38,38,38,0.2);
}
.mr-play:active { transform: translateY(1px); }
.map-row .nc-hint { flex: none; }

/* hunt rows inside panels: panel already carries the 18px gutter */
.hunt-panel .hunt-row { margin: 14px 0 6px; }

.clue-visit {
    width: auto !important;
    display: inline-block;
    padding: 10px 22px !important;
}

/* ===== hunt wiring: auth panel (live mode) ===== */
.auth-card { padding: 20px 16px; text-align: center; }
.auth-tabs { display: flex; gap: 8px; justify-content: center; margin: 12px 0 16px; }
#authRegister, #authLogin { display: flex; flex-direction: column; gap: 10px; }
#authRegister input, #authLogin input {
    border: 2px solid var(--ink, #333); border-radius: 10px; background: #fffdf5;
    padding: 12px 14px; font-family: inherit; font-size: 16px; width: 100%;
    box-sizing: border-box;
}
.auth-fine { font-size: 11px; color: rgba(0,0,0,.45); margin-top: 8px; }
.hunt-msg { border: 2px solid #c33; border-radius: 10px; background: #fff4f4; color: #7a1f1f;
    padding: 10px 12px; font-size: 13px; font-weight: 700; margin-top: 12px; }
.hunt-msg.ok { border-color: #2a7a2a; background: #f2fff2; color: #1c5c1c; }
.demo-badge { position: fixed; right: 10px; bottom: 10px; z-index: 90;
    background: #fffdf5; border: 2px solid #333; border-radius: 999px;
    font-size: 10px; font-weight: 800; padding: 4px 10px; letter-spacing: .04em; }
#hunt-auth button.auth-fine { background: none; border: 0; cursor: pointer; color: rgba(0,0,0,.55);
    padding: 6px; width: 100%; margin-top: 4px; }
#authOtp { display: flex; flex-direction: column; gap: 10px; }
#authOtp input { border: 2px solid #333; border-radius: 10px; background: #fffdf5;
    padding: 12px 14px; font-family: inherit; font-size: 18px; letter-spacing: .3em;
    text-align: center; width: 100%; box-sizing: border-box; }
/* behavior-critical: never depend on the tailwind CDN for state classes */
.hidden { display: none !important; }
/* ===== event submission sheet ===== */
.submit-sheet { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 24px; }
.submit-sheet label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.submit-sheet input, .submit-sheet textarea, .submit-sheet select {
    font-weight: 400; border: 2px solid #333; border-radius: 10px; background: #fffdf5;
    padding: 10px 12px; font-family: inherit; font-size: 15px; width: 100%; box-sizing: border-box;
}
.submit-sheet .srow { display: flex; gap: 8px; }
.submit-sheet .srow > label { flex: 1; min-width: 0; }
.submit-sheet .scheck-row { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; font-weight: 600; font-size: 14px; padding: 2px 0; }
.submit-sheet .scheck-row input[type=checkbox] { width: 22px !important; height: 22px; flex: none; margin: 0; }
.submit-sheet .scheck-row input[type=checkbox]:checked { accent-color: #a33; }
.submit-sheet .cf-turnstile { align-self: center; margin: 6px auto; }
.submit-sheet .sdetails { border: 2px dashed rgba(0,0,0,.2); border-radius: 12px; padding: 8px 12px 12px; }
.submit-sheet .sdetails summary { font-size: 13px; font-weight: 800; cursor: pointer; }
.submit-sheet .cf-turnstile { align-self: center; }

/* ===== journey + up-next suggestion ===== */
.hunt-journey { margin: 16px 18px 0; }
.hj-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: rgba(0,0,0,.4); margin-bottom: 6px; }
.hj-rows { display: grid; gap: 6px; }
.hj-row { display: flex; align-items: center; gap: 10px; background: var(--card, #fffdf5); border: 2px solid rgba(0,0,0,.12);
    border-radius: 12px; padding: 8px 12px; font-size: 13.5px; font-weight: 700; }
.hj-row .hj-town { margin-left: auto; font-size: 11px; font-weight: 600; color: rgba(0,0,0,.4); letter-spacing: .06em; }
#huntSuggest { margin-top: 12px; }
#huntSuggest .nc-label { color: #0a6ea8; }
.nc-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.nc-btns .paper-btn { flex: 1; min-width: 130px; margin: 0; }
a.nc-dir { text-decoration: none; text-align: center; background: var(--mint, #dff3e4); color: #0d5c2c; }