/* LOCAL DRAFT — Where's This Food deck (home + browse) */
/* Published home + browse deck. Scoped mobile typography and positive-swipe illustration. */
.wtf-deck{max-width:480px;margin:0 auto;padding:12px;font-family:system-ui,sans-serif;display:flex;flex-direction:column;gap:12px;outline:none}
.wtf-deck[hidden]{display:none!important}
.wtf-deck__area{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wtf-deck__area label{width:100%;font-size:.9rem}
.wtf-deck__area input{flex:1;min-width:0;padding:10px;font-size:1rem;border:1px solid #999;border-radius:8px}
.wtf-deck__stage{position:relative;aspect-ratio:3/4;width:100%;touch-action:pan-y;isolation:isolate}
.wtf-card{position:absolute;inset:0;margin:0;border-radius:16px;overflow:hidden;background:#222;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .38s cubic-bezier(.2,1.5,.4,1),opacity .2s ease;user-select:none;z-index:3;touch-action:pan-y}
.wtf-card.is-dragging{transition:none;cursor:grabbing}
.wtf-card--next{z-index:1;pointer-events:none;transform:translateY(calc(10px - var(--progress,0)*10px)) scale(calc(.95 + var(--progress,0)*.05));opacity:calc(.55 + var(--progress,0)*.45)}
.wtf-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.wtf-card__badge{position:absolute;top:20px;padding:4px 10px;border:3px solid;border-radius:6px;font-weight:800;font-size:1.4rem;background:rgba(0,0,0,.3)}
.wtf-card__badge--no{right:20px;color:#ff5a5a;opacity:var(--no,0)}
.wtf-card__badge--yes{left:20px;color:#3ddc84;opacity:var(--yes,0)}
.wtf-deck__status{min-height:1.4em;text-align:center;margin:0}
.wtf-deck__actions{display:flex;flex-wrap:wrap;gap:12px}
.wtf-deck__hint{display:none;text-align:center;margin:0;font-size:.85rem}
.wtf-btn{flex:1;min-height:48px;font-size:1.05rem;border:0;border-radius:24px;cursor:pointer;background:#333;color:#fff}
.wtf-btn--no{background:#e04848}.wtf-btn--yes{background:#1f9d55}
.wtf-btn:disabled{opacity:.4;cursor:default}
.wtf-btn:focus-visible,.wtf-deck:focus-visible{outline:3px solid #f5b400;outline-offset:2px}
/* Large inset mobile card, not full bleed. svh avoids toolbar resize jumps. */
@media (any-pointer:coarse){
 .wtf-card:not(.wtf-card--next){cursor:grab}
 .wtf-deck__hint{display:block}
 .wtf-deck__actions{justify-content:center;gap:16px}
 .wtf-deck__actions .wtf-btn{flex:0 1 120px;font-size:.95rem;min-height:44px}
}
@media (max-width:600px) and (any-pointer:coarse){
 .wtf-deck{box-sizing:border-box;max-width:100%;padding:12px 18px calc(12px + env(safe-area-inset-bottom));gap:10px;overflow:hidden}
 .wtf-deck__stage{aspect-ratio:auto;height:calc(100vh - 220px);height:calc(100svh - 220px);max-height:760px;min-height:180px}
 .wtf-card{border-radius:20px}
 .wtf-deck__status:empty{display:none}
}
@media (prefers-reduced-motion:reduce){
 .wtf-card{transition:opacity .08s linear}
 .wtf-card--next{transform:none;transition:none}
}

/* Browse/homepage shell: keep swipe stage above injected ads; tighter top chrome. */
.wtf-deck-shell{position:relative;z-index:2;isolation:isolate;max-width:520px;margin:0 auto}
.wtf-deck-shell .wtf-deck{margin:0 auto}
@media (max-width:600px){
 .wtf-deck-shell .wtf-deck{padding-top:8px;gap:8px}
 .wtf-deck-shell .wtf-deck__area{gap:6px}
 .wtf-deck-shell .wtf-deck__area label{font-size:.8rem}
}

/* Text metrics must not inherit the Elementor kit's compressed heading metrics. */
.wtf-deck .wtf-deck__area label,.wtf-deck .wtf-deck__status,.wtf-deck .wtf-deck__hint{line-height:1.4;overflow-wrap:anywhere}
.wtf-deck .wtf-btn{font-size:1.05rem;line-height:1.3;padding:10px 14px;min-width:0;white-space:normal;background:#333;color:#fff}
.wtf-deck .wtf-btn--no{background:#e04848}.wtf-deck .wtf-btn--yes{background:#1f9d55}
.wtf-deck__yum{display:flex;flex-direction:column;position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden;background:#fff5e9;visibility:hidden;pointer-events:none}
.wtf-deck__yum img{display:block;width:100%;height:100%;min-height:0;flex:1 1 0;object-fit:contain}
.wtf-deck .wtf-deck__yum-caption{display:none;flex:0 0 auto;margin:0;padding:10px 8px 6px;text-align:center;font:700 clamp(16px,4vw,22px)/1.3 system-ui,sans-serif;color:#3d2518;background:#fff5e9;overflow-wrap:anywhere}
.wtf-deck[data-state="revealing"] .wtf-deck__yum-caption{display:block}
.wtf-deck__stage.is-positive .wtf-deck__yum{visibility:visible}
.wtf-deck__stage.is-positive .wtf-card--next{visibility:hidden}
@media(max-width:600px){
 .wtf-deck .wtf-deck__area input{flex:1 1 125px;width:0;min-width:0;line-height:1.4}
 .wtf-deck .wtf-deck__area .wtf-btn{flex:0 1 auto;max-width:100%}
 .wtf-deck .wtf-deck__status,.wtf-deck .wtf-deck__hint{margin:0}
 .wtf-deck .wtf-deck__actions .wtf-btn{flex:1 1 0;max-width:120px}
}

/* Category selector — native control, 44px+ targets on phones */
.wtf-deck__category{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.wtf-deck__category label{width:100%;font-size:.9rem;line-height:1.4}
.wtf-deck__category-select{flex:1;min-width:0;width:100%;min-height:44px;padding:10px 12px;font-size:1rem;line-height:1.4;border:1px solid #999;border-radius:8px;background:#fff;color:#111}
.wtf-deck .wtf-deck__category label{line-height:1.4;overflow-wrap:anywhere}
@media (max-width:600px){
 .wtf-deck-shell .wtf-deck__category{gap:6px}
 .wtf-deck-shell .wtf-deck__category label{font-size:.8rem}
 .wtf-deck .wtf-deck__category-select{font-size:16px} /* avoid iOS zoom */
}

/* t62: cycle-boundary shuffle cue — abstract cards only, never real food photos */
.wtf-deck__shuffle{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-radius:inherit;background:#1c1c1c;color:#fff;pointer-events:none}
.wtf-deck .wtf-deck__shuffle-caption{margin:0;padding:0 16px;text-align:center;font:700 clamp(16px,4vw,22px)/1.3 system-ui,sans-serif;color:#fff;overflow-wrap:anywhere}
.wtf-deck__shuffle-cards{position:relative;width:76px;height:100px}
.wtf-deck__shuffle-card{position:absolute;inset:0;border-radius:12px;background:linear-gradient(160deg,#3f3f3f,#2a2a2a);border:2px solid #5a5a5a;box-shadow:0 6px 16px rgba(0,0,0,.4);transform-origin:50% 80%}
.wtf-deck__shuffle-card:nth-child(1){animation:wtf-shuffle-a .6s ease-in-out both}
.wtf-deck__shuffle-card:nth-child(2){animation:wtf-shuffle-b .6s ease-in-out both}
.wtf-deck__shuffle-card:nth-child(3){animation:wtf-shuffle-c .6s ease-in-out both}
@keyframes wtf-shuffle-a{0%,100%{transform:translate(0,0) rotate(0)}35%{transform:translate(-18px,-6px) rotate(-12deg)}65%{transform:translate(14px,-4px) rotate(8deg)}}
@keyframes wtf-shuffle-b{0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(16px,-8px) rotate(10deg)}70%{transform:translate(-12px,-2px) rotate(-7deg)}}
@keyframes wtf-shuffle-c{0%,100%{transform:translate(0,4px) scale(.96)}50%{transform:translate(0,-10px) scale(1)}}
@media (prefers-reduced-motion:reduce){
 .wtf-deck__shuffle-cards{display:none}
 .wtf-deck__shuffle-card{animation:none}
}
.wtf-deck[data-state="shuffling"] .wtf-deck__hint{visibility:hidden}


/* t65: high-contrast home hero banner, scoped to front page only. */
body.home .container > header{background-color:#9b3b0b!important;color:#fff!important}
body.home .container > header > h1{color:#fff!important}
/* Put swipe guidance immediately before the card on desktop and touch screens. */
.wtf-deck__area{order:0}
.wtf-deck__category{order:1}
.wtf-deck .wtf-deck__hint{display:block;order:2;margin:0;padding:6px 8px;text-align:center;color:#2d241f;background:#fff7ed;border:1px solid #d6b8a5;border-radius:6px;font:600 .9rem/1.4 system-ui,sans-serif}
.wtf-deck .wtf-deck__stage{order:3}
.wtf-deck .wtf-deck__status{order:4}
.wtf-deck .wtf-deck__actions{order:5}
.wtf-deck:not([data-state="card"]) .wtf-deck__hint{display:none}
/* No-area is a deliberate first step, never an empty/black photo card. */
.wtf-deck[data-state="need-area"] .wtf-deck__stage{display:none}
.wtf-deck[data-state="need-area"] .wtf-deck__hint{display:none}
.wtf-deck[data-state="need-area"] .wtf-deck__actions{display:none}
.wtf-deck[data-state="need-area"] .wtf-deck__status{order:2;display:block;min-height:0;margin:4px 0;padding:12px 14px;text-align:left;color:#5b2600;background:#fff7ed;border:2px solid #9b3b0b;border-radius:8px;font-weight:700;line-height:1.4}


/* Contain only our deck, never ads, consent, or the whole page. */
.wtf-deck-shell{width:100%;max-width:520px;min-width:0;box-sizing:border-box;overflow:clip}
.wtf-deck-shell [data-wtf-deck],.wtf-deck-shell .wtf-deck{min-width:0;max-width:100%;box-sizing:border-box}
.wtf-deck .wtf-deck__hint-touch{display:none}
.wtf-deck .wtf-deck__hint-click{display:inline}
@media (pointer:coarse){
 .wtf-deck .wtf-deck__hint-touch{display:inline}
 .wtf-deck .wtf-deck__hint-click{display:none}
}
@media (hover:hover) and (pointer:fine){
 .wtf-deck .wtf-deck__hint-touch{display:none}
 .wtf-deck .wtf-deck__hint-click{display:inline}
}