:root{--tb-navy:#081532;--tb-navy-2:#0d1b3d;--tb-panel:#101f43;--tb-panel-2:#122347;--tb-line:#26385e;--tb-highlight:#E42320;--tb-highlight-2:#c41e1b;--tb-white:#f8fbff;--tb-muted:#9eabc5;--tb-primary:#1947BA;--tb-accent:#E42320;--tb-bg-grad:radial-gradient(ellipse 62% 58% at 50% 30%,rgba(4,9,23,.75) 0%,rgba(4,9,23,.62) 42%,rgba(4,9,23,.42) 70%,rgba(4,9,23,.15) 100%),linear-gradient(180deg,rgba(4,10,26,.45) 0%,rgba(5,11,27,.6) 35%,rgba(4,9,23,.85) 75%,rgba(4,9,23,.92) 100%);--tb-bg-image:url("images/tb-bg.jpg");--tb-topbar-bg:rgba(5,15,39,.92);--tb-card-grad:linear-gradient(145deg,rgba(18,35,71,.94),rgba(13,27,61,.94));--tb-input-bg:#0a1735;--tb-cell-grad:linear-gradient(145deg,#132449,#101f40);--tb-cell-completed-grad:linear-gradient(145deg,#3a1414,#2a1010);--tb-modal-grad:linear-gradient(145deg,#162a54,#0d1c3c);--tb-close-bg:#122347;--tb-score-bg:#3a1414;--tb-rule-bg:rgba(255,255,255,.035);--tb-progress-bg:rgba(17,34,69,.78);--tb-progress-track:#3a3f4b}
*{box-sizing:border-box}
.tb-app{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--tb-white);background-color:#050b17;background-image:var(--tb-bg-grad),var(--tb-bg-image);background-repeat:no-repeat,no-repeat;background-position:center top,center top;background-size:cover,cover;position:relative;isolation:isolate;overflow:hidden;transition:background .25s ease,color .25s ease;
  /* Full-bleed: breaks the app out of the theme's centered content column so
     it spans the entire browser width edge-to-edge, and fills at least the
     full viewport height — a dedicated full-screen app feel rather than a
     widget embedded inside the page.
     Using calc(50% - 50vw) for the side margins (not left/right + a plain
     -50vw margin) is deliberate: that older combo computes "50%" relative to
     whatever narrower column the theme wraps this in, while "-50vw" is
     relative to the full viewport — the two don't cancel out and the app
     ends up shoved sideways and clipped. calc(50% - 50vw) ties both halves
     of the same expression to the *same* reference width, so it self-cancels
     correctly no matter how wide the surrounding theme container is. */
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  min-height:100vh;min-height:100dvh;
}

/* Layered ambient background: soft brand-colour glows (TEAM blue + red) + a
   faint dot grid, fixed behind the content so the game reads as a "space". */
.tb-app::before,.tb-app::after{content:"";position:absolute;z-index:-2;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.5}
.tb-app::before{width:520px;height:520px;top:-140px;left:-120px;background:radial-gradient(circle,var(--tb-primary) 0%,transparent 72%);animation:tbDrift1 22s ease-in-out infinite}
.tb-app::after{width:460px;height:460px;bottom:-160px;right:-100px;background:radial-gradient(circle,var(--tb-accent) 0%,transparent 74%);opacity:.3;animation:tbDrift2 26s ease-in-out infinite}
.tb-bg-dots{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.09) 1.4px,transparent 1.4px);background-size:26px 26px;mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 45%,transparent 100%)}
@keyframes tbDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes tbDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-35px,-25px)}}

/* Ticker strip: a slow-scrolling row of the same icons used on the cells,
   full-bleed under the top bar so the board feels like it continues past
   the card edges instead of being sealed in a box. */
.tb-ticker{overflow:hidden;margin:0 -28px 22px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.015);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tb-ticker-track{display:flex;align-items:center;gap:46px;width:max-content;animation:tbTicker 34s linear infinite}
.tb-ticker-icon{display:flex;flex-shrink:0;opacity:.4}
.tb-ticker-icon svg{width:19px;height:19px;stroke:var(--tb-highlight);fill:none;stroke-width:1.6}
@keyframes tbTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tb-app::before,.tb-app::after,.tb-ticker-track{animation:none}}

.tb-logo-img{max-height:32px;width:auto;display:block}
.tb-closed-notice{text-align:center}
.tb-shell{max-width:1180px;margin:0 auto;padding:28px 28px 60px;position:relative}
.tb-topbar{height:66px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);margin:-28px -28px 32px;padding:0 28px;background:var(--tb-topbar-bg);backdrop-filter:blur(14px);position:sticky;top:0;z-index:50;box-shadow:0 8px 24px rgba(3,9,26,.18)}
.tb-top-left,.tb-nav,.tb-nav-item{display:flex;align-items:center}
.tb-top-left{gap:18px}.tb-mini-logo{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.5px;font-size:16px;padding-right:18px;border-right:1px solid rgba(255,255,255,.1)}.tb-mini-logo span:last-child{color:#e9eef9}
.tb-nav{gap:22px}.tb-nav-item{gap:8px;color:#e9eef9;text-decoration:none;font-size:14px;font-weight:750;opacity:.94;padding:8px 4px;border-radius:8px;transition:opacity .18s}.tb-nav-item:hover{opacity:1}.tb-nav-item svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}.tb-nav-item.active{color:#fff}
.tb-switch{border:1px solid #34486f;background:transparent;color:#eaf0fb;border-radius:999px;padding:9px 16px;font-weight:750;font-size:13.5px;cursor:pointer;transition:.18s}.tb-switch:hover{border-color:var(--tb-highlight);background:rgba(228,35,32,.1);color:#fff}
.tb-brand{display:none}

/* Player chip: avatar (photo or initials) + name, shown in the top bar once
   a participant has verified. The avatar is optional — clicking it opens a
   file picker; until a photo is set it falls back to two-letter initials on
   a brand-colored circle. */
.tb-player-chip{display:flex;align-items:center;gap:10px}
.tb-avatar{position:relative;width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;overflow:hidden;background:linear-gradient(135deg,var(--tb-primary),var(--tb-highlight));display:grid;place-items:center;flex-shrink:0;transition:transform .18s,box-shadow .18s}
.tb-avatar:hover{transform:scale(1.06);box-shadow:0 0 0 3px rgba(228,35,32,.18)}
.tb-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.tb-avatar span{color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.3px}
.tb-player-name{font-size:14px;font-weight:700;color:#e9eef9;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-optional{font-weight:500;color:var(--tb-muted);font-size:12px;text-transform:none;letter-spacing:0}
.tb-kicker{font-size:12px;letter-spacing:3px;font-weight:850;color:var(--tb-highlight);text-transform:uppercase}
.tb-card h2{margin:0 0 8px;font-weight:900}
.tb-muted{margin:0;color:var(--tb-muted);line-height:1.55}
.tb-card{background:var(--tb-card-grad);border:1px solid var(--tb-line);border-radius:24px;padding:28px;box-shadow:0 22px 55px rgba(0,0,0,.22);margin-bottom:20px;transition:background .25s ease,border-color .25s ease}.tb-step{width:34px;height:34px;border-radius:50%;background:var(--tb-highlight);color:#fff;display:grid;place-items:center;font-weight:900;margin-bottom:14px}.tb-card label{display:block;font-weight:750;margin:22px 0 8px}.tb-card input,.tb-card textarea{width:100%;border:1px solid #33476d;border-radius:12px;padding:13px 15px;font:inherit;color:#fff;background:var(--tb-input-bg);outline:none}.tb-card input:focus,.tb-card textarea:focus{border-color:var(--tb-highlight);box-shadow:0 0 0 3px rgba(228,35,32,.14)}

/* Auth screen layout: the login/verify cards on the left, a branded hero
   panel on the right that fills the otherwise-empty space with something
   relevant to the TotalEnergies × ADNOC "TEAM" identity and a quick
   how-it-works recap, rather than leaving it blank. */
.tb-auth-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}
.tb-auth-col{min-width:0}
.tb-hero-panel{position:relative;overflow:hidden;border-radius:24px;padding:34px 30px;background:linear-gradient(150deg,#132a5c 0%,#0d1d40 55%,#2a1010 130%);border:1px solid var(--tb-line);box-shadow:0 22px 55px rgba(0,0,0,.22);color:#fff}
.tb-hero-panel::before{content:"";position:absolute;top:-90px;right:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--tb-highlight) 0%,transparent 70%);opacity:.35;pointer-events:none}
.tb-hero-panel::after{content:"";position:absolute;bottom:-100px;left:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,var(--tb-primary) 0%,transparent 72%);opacity:.35;pointer-events:none}
.tb-hero-logo{position:relative;background:#fff;display:inline-block;padding:10px 16px;border-radius:12px;margin-bottom:22px}
.tb-hero-logo img{display:block;height:26px;width:auto}
.tb-hero-kicker{position:relative;font-size:12px;letter-spacing:3px;font-weight:850;color:#ff9a97;text-transform:uppercase;margin-bottom:8px}
.tb-hero-panel h3{position:relative;margin:0 0 14px;font-size:26px;line-height:1.2;font-weight:900}
.tb-hero-copy{position:relative;margin:0 0 26px;font-size:14px;line-height:1.65;color:#c3cce6}
.tb-hero-steps{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.tb-hero-steps li{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;line-height:1.5;color:#e4e9f7}
.tb-hero-step-num{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;font-weight:800;font-size:12px}
@media(max-width:860px){.tb-auth-grid{grid-template-columns:1fr}.tb-hero-panel{order:2;padding:28px 24px}}
.tb-btn{border:0;border-radius:12px;padding:13px 20px;background:var(--tb-highlight);color:#fff;font-weight:900;cursor:pointer;margin-top:14px;transition:transform .2s,box-shadow .2s,filter .2s}.tb-btn:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(228,35,32,.28);filter:brightness(1.06)}.tb-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}.tb-link-btn{border:0;background:none;color:var(--tb-muted);font-size:12.5px;font-weight:700;cursor:pointer;padding:8px 0;text-decoration:underline}.tb-note{font-size:12px;color:#7f8da9;margin-top:13px}.tb-msg{margin-top:12px;font-size:14px}.tb-msg.error{color:#ff8e8e}.tb-msg.success{color:#a8e7bd}.tb-hidden{display:none!important}
.tb-game-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}.tb-game-top h2{font-size:27px}.tb-progress-wrap{margin:0 0 24px;padding:21px 20px 18px;border:1px solid var(--tb-line);border-radius:20px;background:var(--tb-progress-bg)}.tb-progress-head{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:15px;font-weight:850}.tb-progress-head .tb-lines-meta{color:var(--tb-muted);font-weight:700}.tb-progress-track{height:10px;border-radius:999px;background:var(--tb-progress-track);margin:13px 0 10px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}.tb-progress-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--tb-primary),var(--tb-highlight));transition:width .45s cubic-bezier(.22,.61,.36,1);box-shadow:0 0 14px rgba(228,35,32,.25)}.tb-progress-caption{font-size:13px;color:var(--tb-muted)}.tb-rule{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:var(--tb-rule-bg);color:var(--tb-muted);font-size:13px}
.tb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tb-cell{position:relative;min-height:132px;text-align:left;border:1px solid #2b3d62;background:var(--tb-cell-grad);color:#fff;border-radius:16px;padding:14px 14px 32px;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}
.tb-cell:hover{transform:translateY(-3px);border-color:#4b6597;box-shadow:0 12px 22px rgba(0,0,0,.2)}
.tb-cell:active{transform:translateY(-1px) scale(.99)}
.tb-cell.completed{background:var(--tb-cell-completed-grad);border:2px solid var(--tb-highlight);box-shadow:0 0 0 1px rgba(228,35,32,.1),0 8px 20px rgba(0,0,0,.2)}
.tb-cell-top{display:flex;align-items:center;gap:8px}
.tb-icon-badge{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.06);flex-shrink:0}
.tb-icon-badge svg{width:14px;height:14px;stroke:var(--tb-primary);fill:none;stroke-width:1.9}
.tb-cell.completed .tb-icon-badge{background:rgba(228,35,32,.18)}
.tb-num{font-size:9px;font-weight:900;color:#7484a4;letter-spacing:1px}
.tb-q{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.36;font-weight:750;color:#f6f8fc}
.tb-type-badge{align-self:flex-start;margin-top:auto;font-size:10px;font-weight:800;letter-spacing:.3px;color:var(--tb-primary);background:rgba(25,71,186,.14);border-radius:999px;padding:3px 8px}
.tb-cell.completed .tb-type-badge{color:var(--tb-highlight);background:rgba(228,35,32,.14)}
.tb-check{position:absolute;right:9px;bottom:9px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--tb-highlight);color:#fff;font-weight:950;font-size:12px;opacity:0;transform:scale(.7);transition:.2s}
.tb-cell.completed .tb-check{opacity:1;transform:scale(1)}
.tb-submit-row{display:flex;align-items:center;justify-content:space-between;margin-top:22px}.tb-submit-row .tb-btn{margin-top:0}.tb-success{text-align:center;padding:28px 10px}.tb-trophy{font-size:52px;color:var(--tb-highlight);animation:tbPulse 1.2s infinite}.tb-success h2{font-size:32px}.tb-score{display:inline-block;margin-top:15px;padding:12px 18px;background:var(--tb-score-bg);color:var(--tb-highlight);border-radius:99px;font-weight:900;border:1px solid #6a2320}
.tb-modal{position:fixed;inset:0;background:rgba(2,8,22,.72);z-index:999999;display:grid;place-items:center;padding:20px;backdrop-filter:blur(7px);animation:tbOverlayIn .24s ease-out}.tb-modal-box{background:var(--tb-modal-grad);border:1px solid #344b76;border-radius:26px;padding:32px;max-width:620px;width:100%;box-shadow:0 35px 100px rgba(0,0,0,.48);position:relative;animation:tbModalIn .34s cubic-bezier(.16,1,.3,1);max-height:90vh;overflow-y:auto}.tb-close{position:absolute;right:18px;top:18px;z-index:2;border:1px solid #34486d;background:var(--tb-close-bg);color:#c7d1e8;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;padding:0;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s;box-shadow:0 3px 10px rgba(0,0,0,.18)}.tb-close svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;fill:none}.tb-close:hover{background:var(--tb-highlight);border-color:var(--tb-highlight);color:#fff;transform:scale(1.07)}.tb-close:active{transform:scale(.95)}.tb-modal h3{font-size:22px;margin:0;color:#fff;line-height:1.3}.tb-modal textarea{margin-top:0}.tb-modal .tb-kicker{font-size:11px;letter-spacing:3px;margin-bottom:2px}
.tb-modal-head{display:flex;align-items:flex-start;gap:14px;margin:6px 0 22px;padding-right:28px}
.tb-modal-icon{flex-shrink:0;width:44px;height:44px;border-radius:13px;background:rgba(25,71,186,.16);display:grid;place-items:center}
.tb-modal-icon svg{width:22px;height:22px;stroke:var(--tb-primary);fill:none;stroke-width:1.8}
#tb-answer-text-wrap label,#tb-answer-photo-wrap label{margin-top:0;margin-bottom:8px}
#tb-answer-photo-wrap{margin-top:20px}
.tb-verify-links{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
.tb-link-btn-danger:hover{color:var(--tb-highlight)}

/* Photo answer widget. Empty state: one big primary button — tap it, the
   file/camera picker opens immediately, and (for a photo-only challenge)
   the answer auto-saves the moment the upload finishes, no second "Save"
   tap needed. Filled state: a preview with a small "done" badge plus
   compact change/remove actions underneath. */
.tb-btn-block{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14.5px}
.tb-btn-block svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
#tb-photo-empty{position:relative}
.tb-photo-uploading{position:absolute;inset:0;border-radius:12px;background:rgba(5,12,30,.72);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;letter-spacing:.4px}
.tb-photo-preview-wrap{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--tb-line);background:#000}
#tb-photo-preview{width:100%;max-height:260px;object-fit:contain;display:block}
.tb-photo-done-badge{position:absolute;left:10px;bottom:10px;background:rgba(20,120,60,.92);color:#fff;font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:999px;letter-spacing:.2px}
.tb-photo-filled-actions{display:flex;justify-content:space-between;gap:12px;margin-top:10px}

#tb-confetti{position:fixed;inset:0;pointer-events:none;z-index:1000000}
@keyframes tbPulse{50%{transform:scale(1.15)}}@keyframes tbOverlayIn{from{opacity:0}to{opacity:1}}@keyframes tbModalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:900px){.tb-topbar{margin:-20px -20px 26px;padding:0 18px}.tb-ticker{margin:0 -20px 20px}.tb-shell{padding:20px}.tb-nav{gap:13px}.tb-nav-item span{display:none}.tb-player-name{display:none}.tb-grid{gap:9px}.tb-cell{min-height:118px}}
@media(max-width:650px){.tb-topbar{height:auto;min-height:58px;flex-wrap:wrap;padding:10px 14px;gap:8px}.tb-top-left{gap:12px}.tb-mini-logo{padding-right:12px}.tb-nav{order:3;width:100%;justify-content:space-around;padding-top:7px;border-top:1px solid rgba(255,255,255,.07)}.tb-grid{grid-template-columns:repeat(2,1fr);gap:9px}.tb-cell{min-height:128px;padding:13px 13px 30px}.tb-q{font-size:13px}.tb-game-top,.tb-submit-row{align-items:flex-start;flex-direction:column}.tb-submit-row .tb-btn{width:100%}.tb-modal-box{padding:27px 20px}}

/* v3.0 fixes: make the Bingo application truly full-bleed even when the
   WordPress theme wraps the shortcode in a narrow content container. */
html:has(#total-bingo-app),
body:has(#total-bingo-app){margin:0!important;padding:0!important}
body:has(#total-bingo-app) .site-content,
body:has(#total-bingo-app) .content-area,
body:has(#total-bingo-app) .elementor-section,
body:has(#total-bingo-app) .elementor-container{max-width:none!important}
#total-bingo-app.tb-app{
  position:relative!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:100vw!important;
  max-width:100vw!important;
  margin-left:0!important;
  margin-right:0!important;
  min-height:calc(100dvh - var(--wp-admin--admin-bar--height, 0px))!important;
}
#total-bingo-app .tb-shell{max-width:1280px!important;width:100%;margin:0 auto;padding-left:32px;padding-right:32px}
#total-bingo-app .tb-card h1,
#total-bingo-app .tb-card h2,
#total-bingo-app .tb-card h3,
#total-bingo-app .tb-card h4,
#total-bingo-app .tb-game-top h2,
#total-bingo-app .tb-success h2{
  color:#fff!important;
}
#total-bingo-app .tb-card label{color:#fff!important}
#total-bingo-app .tb-hero-panel h3{color:#fff!important}
#total-bingo-app .tb-hero-panel .tb-hero-copy{color:#d6def0!important}
#total-bingo-app .tb-logo-img,
#total-bingo-app .tb-hero-logo img{max-width:100%;object-fit:contain}
#total-bingo-app .tb-hero-logo{min-width:190px;min-height:48px;display:flex;align-items:center;justify-content:center}
@media(max-width:650px){
  #total-bingo-app .tb-shell{padding-left:14px;padding-right:14px}
}