/* ===== FUN HUB ===== */
.fun-intro{max-width:640px}
.fun-intro p{font-size:1.02rem;color:var(--muted);line-height:1.8;margin-top:14px}

.fun-cat-block{margin-top:3.5rem}
.fun-cat-head{display:flex;align-items:center;gap:14px;margin-bottom:1.75rem}
.fun-cat-emoji{font-size:28px;line-height:1;width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fun-cat-head h2{font-family:var(--disp);font-size:1.45rem;color:var(--ink);line-height:1.2}
.fun-cat-head span{font-size:12.5px;color:var(--muted);display:block;margin-top:2px}

.fun-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.fun-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:26px 24px;text-decoration:none;display:block;transition:all .25s;position:relative;overflow:hidden}
button.fun-card{width:100%;text-align:left;font:inherit;-webkit-appearance:none;appearance:none}
.fun-card:hover{transform:translateY(-5px) rotate(-.5deg);box-shadow:var(--shadow2);border-color:var(--card-accent,var(--sage))}
.fun-card-icon{font-size:30px;margin-bottom:14px;display:inline-block;transition:transform .3s}
.fun-card:hover .fun-card-icon{transform:scale(1.15) rotate(8deg)}
.fun-card h3{font-family:var(--disp);font-size:1.08rem;color:var(--ink);margin-bottom:6px;line-height:1.3}
.fun-card p{font-size:.82rem;color:var(--muted);line-height:1.6;margin-bottom:14px}
.fun-card-cta{font-size:.78rem;font-weight:600;color:var(--card-accent,var(--sage));display:inline-flex;align-items:center;gap:6px}
.fun-card:hover .fun-card-cta i{transform:translateX(4px)}
.fun-card-cta i{transition:transform .25s}

/* per-category accent colors, applied via inline CSS var on the block */
.fun-cat-block[data-accent="orange"] .fun-cat-emoji{background:#fdecd8}
.fun-cat-block[data-accent="orange"] .fun-card{--card-accent:#d98a3d}
.fun-cat-block[data-accent="blue"] .fun-cat-emoji{background:#dde8fb}
.fun-cat-block[data-accent="blue"] .fun-card{--card-accent:#4d78c9}
.fun-cat-block[data-accent="purple"] .fun-cat-emoji{background:#ece0f7}
.fun-cat-block[data-accent="purple"] .fun-card{--card-accent:#8b5fc4}
.fun-cat-block[data-accent="pink"] .fun-cat-emoji{background:var(--blush-pal)}
.fun-cat-block[data-accent="pink"] .fun-card{--card-accent:var(--blush2)}
.fun-cat-block[data-accent="green"] .fun-cat-emoji{background:var(--sage-pal)}
.fun-cat-block[data-accent="green"] .fun-card{--card-accent:var(--sage)}

/* ===== INDIVIDUAL ACTIVITY PAGE ===== */
.fun-widget-wrap{max-width:640px;margin:0 auto}
.fun-widget-card{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:44px 40px;text-align:center}
.fun-widget-emoji{font-size:52px;margin-bottom:18px;display:block}
.fun-widget-card h2{font-family:var(--disp);font-size:1.4rem;color:var(--ink);margin-bottom:10px}
.fun-widget-card .fun-widget-desc{font-size:.92rem;color:var(--muted);line-height:1.7;margin-bottom:28px;max-width:460px;margin-left:auto;margin-right:auto}

.fun-input-row{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap;justify-content:center}
.fun-input{flex:1;min-width:180px;padding:13px 18px;border-radius:50px;border:1.5px solid var(--border);background:var(--bg);color:var(--ink);font-size:.9rem;font-family:var(--sans);outline:none;transition:border-color .2s}
.fun-input:focus{border-color:var(--sage)}
.fun-btn{background:var(--ink);color:var(--bg);border:0;padding:13px 28px;border-radius:50px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--sans);white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.fun-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.fun-btn:active{transform:translateY(0)}
.fun-btn:disabled{opacity:.6;cursor:default;transform:none}

.fun-result{margin-top:24px;min-height:60px;display:flex;align-items:center;justify-content:center}
.fun-result-content{width:100%;animation:funFadeIn .35s ease}
@keyframes funFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fun-result-text{font-size:1.05rem;color:var(--ink);line-height:1.7;font-family:var(--disp);font-style:italic}
.fun-result-sub{font-size:.82rem;color:var(--muted);margin-top:10px}
.fun-result-img{max-width:100%;max-height:320px;border-radius:16px;object-fit:cover;box-shadow:0 8px 30px rgba(0,0,0,.15)}
.fun-result-card{background:var(--bg2);border-radius:16px;padding:20px;text-align:left}
.fun-result-card .frc-title{font-weight:700;color:var(--ink);font-size:1rem;margin-bottom:4px}
.fun-result-card .frc-row{font-size:.82rem;color:var(--muted);margin-top:4px}
.fun-result-card .frc-row strong{color:var(--ink2)}

.fun-loading{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem}
.fun-spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--border);border-top-color:var(--sage);animation:funSpin .7s linear infinite}
@keyframes funSpin{to{transform:rotate(360deg)}}
.fun-error{color:var(--blush2);font-size:.85rem;background:var(--blush-pal);padding:12px 18px;border-radius:12px;display:inline-block}

.fun-back-link{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);margin-bottom:24px;font-weight:500}
.fun-back-link:hover{color:var(--sage)}

.fun-related{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border)}
.fun-related h3{font-family:var(--disp);font-size:1.05rem;color:var(--ink);margin-bottom:1rem}
.fun-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.fun-related-link{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 16px;font-size:.8rem;color:var(--ink2);font-weight:500;transition:all .2s}
.fun-related-link:hover{border-color:var(--sage);color:var(--sage);transform:translateY(-2px)}

@media(max-width:640px){
  .fun-widget-card{padding:32px 24px}
  .fun-card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .fun-input-row{flex-direction:column}
  .fun-btn{width:100%;justify-content:center}
}

/* ===== FUN MODAL — activities open in-place instead of a separate page ===== */
.fun-modal-backdrop{position:fixed;inset:0;background:rgba(20,20,26,.55);backdrop-filter:blur(3px);z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .25s ease}
.fun-modal-backdrop.open{display:flex}
.fun-modal-backdrop.show{opacity:1}
.fun-modal{background:var(--card);border-radius:24px;max-width:560px;width:100%;max-height:88vh;overflow-y:auto;position:relative;box-shadow:0 24px 64px rgba(0,0,0,.3);transform:translateY(16px) scale(.97);transition:transform .25s ease}
.fun-modal-backdrop.show .fun-modal{transform:translateY(0) scale(1)}
.fun-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:var(--bg2);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;z-index:2;transition:background .2s}
.fun-modal-close:hover{background:var(--border2);color:var(--sage)}
.fun-modal .fun-widget-card{border:none;border-radius:24px;padding:44px 36px}
body.fun-modal-locked{overflow:hidden}
@media(max-width:640px){
  .fun-modal{max-height:92vh}
  .fun-modal .fun-widget-card{padding:36px 22px}
}
@media(prefers-reduced-motion:reduce){
  .fun-modal-backdrop,.fun-modal{transition:none}
}