/* Foofle — styles (ported from the approved mockup; fits the screen on mobile) */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@600;700;800&display=swap');

#foofle-app{
  --ff-accent:#534AB7; --ff-gold:#F0B429; --ff-gold-lt:#ffd54a;
  --ff-green:#34c47a; --ff-present:#f0b429; --ff-absent:#534a70;
  --ff-tile:#241a45; --ff-tile-bd:#473a78; --ff-muted:#b9aee8;
  --ts:min(12.8vw, 7vh, 52px);            /* tile size — shrinks to fit short screens */
  display:block; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
#foofle-app *{box-sizing:border-box;margin:0;padding:0}

/* lock page scroll while the game is on screen — kills the iOS rubber-band jank */
body.foofle-active{overflow:hidden;overscroll-behavior:none;position:relative}

.ff-wrap{
  position:relative; width:100%; max-width:520px; margin:0 auto;
  height:100vh; height:100dvh; max-height:100dvh;
  font-family:'Nunito',sans-serif; color:#fff;
  display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 22px) max(26px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom,0px) + 20px) max(26px,env(safe-area-inset-left));
  overflow:hidden; overscroll-behavior:none;
  background:
    radial-gradient(900px 380px at 50% -6%, rgba(255,213,74,.16), transparent 60%),
    linear-gradient(180deg,#1d1140 0%, #3b2470 55%, #2a1a52 100%);
}

.ff-head{position:relative;flex:0 0 auto;text-align:center;padding:2px 0 6px}
.ff-logo{display:flex;gap:5px;justify-content:center;margin-bottom:6px}
.ff-logo span{
  width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:21px;color:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.25);
}
.ff-logo span:nth-child(1){background:var(--ff-green);transform:rotate(-4deg)}
.ff-logo span:nth-child(2){background:var(--ff-gold);transform:rotate(3deg)}
.ff-logo span:nth-child(3){background:var(--ff-accent);transform:rotate(-2deg)}
.ff-logo span:nth-child(4){background:var(--ff-green);transform:rotate(4deg)}
.ff-logo span:nth-child(5){background:var(--ff-accent);transform:rotate(-3deg)}
.ff-logo span:nth-child(6){background:var(--ff-gold);transform:rotate(2deg)}
.ff-tag{font-size:13px;color:var(--ff-muted);font-weight:700}
.ff-meta{display:flex;justify-content:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.ff-chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,213,74,.35);border-radius:999px;
  padding:4px 12px;font-size:12px;font-weight:800;color:var(--ff-gold-lt)}
.ff-chip span{color:#fff}

/* board: natural height, centered — no stretching */
.ff-board-area{flex:0 0 auto;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;max-width:420px;margin:clamp(20px,7vh,64px) auto 0}
.ff-board{display:grid;grid-auto-rows:var(--ts);gap:6px}
.ff-row{display:grid;grid-template-columns:repeat(var(--cols,5),var(--ts));gap:6px}
.ff-tile{
  width:var(--ts);height:var(--ts);border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:calc(var(--ts)*.52);text-transform:uppercase;
  background:var(--ff-tile);border:2px solid var(--ff-tile-bd);color:#fff;
}
.ff-tile.filled{border-color:#6f5fb8}
.ff-tile.pop{animation:ff-pop .12s ease}
@keyframes ff-pop{50%{transform:scale(1.08)}}
.ff-tile.reveal{animation:ff-flip .5s ease forwards}
@keyframes ff-flip{0%{transform:rotateX(0)}45%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.ff-tile.correct{background:var(--ff-green);border-color:var(--ff-green);box-shadow:0 0 14px rgba(52,196,122,.5)}
.ff-tile.present{background:var(--ff-present);border-color:var(--ff-present);color:#3a2600;box-shadow:0 0 14px rgba(240,180,41,.5)}
.ff-tile.absent{background:var(--ff-absent);border-color:var(--ff-absent);color:#cfc7ea}
.ff-row.shake{animation:ff-shake .42s}
@keyframes ff-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

.ff-locked{color:var(--ff-muted);font-weight:700;text-align:center;padding:40px 20px;font-size:15px}

/* keyboard: pinned at the bottom with clear separation from the board */
.ff-kb{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;margin:18px auto 0;width:100%;max-width:420px}
.ff-kbrow{display:flex;gap:5px;justify-content:center}
.ff-key{flex:1;min-width:0;height:min(6.6vh,50px);border-radius:9px;border:none;cursor:pointer;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;text-transform:uppercase;
  background:#564a8f;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.3);transition:transform .05s;touch-action:manipulation}
.ff-key:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.ff-key.wide{flex:1.6;font-size:12px}
.ff-key.correct{background:var(--ff-green)}
.ff-key.present{background:var(--ff-present);color:#3a2600}
.ff-key.absent{background:#3a3360;color:#9d93c4}

.ff-toast{position:fixed;top:14%;left:50%;transform:translateX(-50%);z-index:99;
  background:#fff;color:#2a1a52;font-weight:800;padding:10px 18px;border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s;font-size:14px}
.ff-toast.show{opacity:1}

.ff-ov{position:fixed;inset:0;z-index:100;background:rgba(20,10,45,.72);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:22px}
.ff-ov.show{display:flex}
.ff-card{background:linear-gradient(165deg,#2f2160,#241a45);border:2px solid var(--ff-gold);
  border-radius:22px;padding:26px 22px;max-width:360px;width:100%;text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.55);font-family:'Nunito',sans-serif;color:#fff}
.ff-card h2{font-family:'Fredoka',sans-serif;font-size:28px;color:var(--ff-gold-lt);margin-bottom:2px;line-height:1.1}
.ff-sub{color:var(--ff-muted);font-size:14px;font-weight:700;margin-bottom:14px}
.ff-sharegrid{font-size:22px;line-height:1.18;letter-spacing:3px;margin:10px 0 16px;white-space:pre}
.ff-rewards{display:flex;gap:10px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.ff-r{background:rgba(255,255,255,.06);border:1px solid rgba(255,213,74,.3);border-radius:14px;padding:10px 14px;min-width:96px}
.ff-r b{display:block;font-family:'Fredoka',sans-serif;font-size:22px;color:var(--ff-gold-lt)}
.ff-r span{font-size:11px;color:var(--ff-muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.ff-practice-note{color:var(--ff-muted);font-weight:800;font-size:13px;margin-bottom:16px}
.ff-btns{display:flex;gap:10px}
.ff-btn{flex:1;border:none;border-radius:999px;padding:13px;font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.ff-btn-primary{background:linear-gradient(180deg,var(--ff-gold-lt),var(--ff-gold));color:#3a2600}
.ff-btn-ghost{background:rgba(255,255,255,.1);color:#fff}
.ff-note{margin-top:14px;font-size:11px;color:var(--ff-muted);font-weight:700}
.ff-portal{display:inline-block;margin-top:12px;color:var(--ff-gold-lt);font-weight:800;font-size:13px;text-decoration:none}

/* leaderboard */
#foofle-leaderboard{--ff-gold-lt:#ffd54a;--ff-muted:#8a7fb8;font-family:'Nunito',sans-serif}
.ff-lb{max-width:460px;margin:0 auto}
.ff-lb-title{font-family:'Fredoka',sans-serif;font-size:20px;margin-bottom:10px}
.ff-lb-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:rgba(83,74,183,.08);margin-bottom:6px}
.ff-lb-row.me{background:rgba(240,180,41,.16);outline:2px solid rgba(240,180,41,.5)}
.ff-lb-rank{font-weight:800;width:22px;text-align:center;color:#8a7fb8}
.ff-lb-av{width:34px;height:34px;border-radius:50%;object-fit:cover}
.ff-lb-av.ph{display:flex;align-items:center;justify-content:center;background:#534AB7;color:#fff;font-weight:800;text-transform:uppercase}
.ff-lb-name{flex:1;font-weight:800}
.ff-lb-val{font-weight:800}
.ff-lb-loading,.ff-lb-empty{color:#8a7fb8;font-weight:700;padding:8px 2px}

@media (prefers-reduced-motion: reduce){ .ff-tile.reveal,.ff-tile.pop{animation:none} }
@media (max-height:660px){ .ff-logo span{width:32px;height:32px;font-size:19px} .ff-meta{margin-top:5px} }

/* ===== Desktop / large screens: centered full-window stage =====
   On mobile the game fills the screen (app style). On desktop the theme tends to
   constrain & left-align the page column, so margin:auto can't center it. Instead
   we pin the whole game to the viewport as a dark stage and center a phone-sized
   card in the middle — robust regardless of the theme's layout. */
@media (min-width:600px){
  #foofle-app{
    position:fixed; inset:0; z-index:5;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    background:radial-gradient(1100px 560px at 50% 0%, rgba(83,74,183,.40), transparent 62%), #130d2c;
  }
  body.admin-bar #foofle-app{ top:32px; }   /* keep the WP admin bar visible while logged in */
  .ff-wrap{
    height:min(100% , 760px);
    max-height:760px; max-width:432px; width:100%;
    margin:0; border-radius:28px;
    box-shadow:0 30px 80px rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.08);
  }
}

/* Persistent "Back to Portal" button (top-left of the header) */
.ff-back{position:absolute;left:0;top:0;z-index:3;display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:800;text-decoration:none;color:var(--ff-gold-lt,#ffd54a);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,213,74,.35);
  border-radius:999px;padding:5px 11px;line-height:1}
.ff-back:hover{background:rgba(255,255,255,.14)}