/* ===== Bingo Card Maker ===== */

.bm-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.bm-card{padding:16px 16px 18px;display:flex;flex-direction:column;gap:12px}
.bm-h{margin:0;font:800 1.05rem 'Baloo 2','Inter',sans-serif;display:flex;align-items:center;gap:9px;color:var(--text)}
.bm-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bm-row2 .field{min-width:0}
.bm-card .field{margin:0}
.bm-card .check-row{margin:0}

/* theme picker: each button shows a real mini card */
.bm-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bm-theme{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 5px;border-radius:12px;border:3px solid var(--line);background:var(--bg);cursor:pointer;color:var(--soft);font:700 .72rem 'Inter',sans-serif;min-width:0;transition:transform .08s,border-color .12s}
.bm-theme canvas{width:100%;height:auto;border-radius:6px;display:block;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.bm-theme:hover{transform:translateY(-1px);border-color:var(--muted)}
.bm-theme[aria-pressed=true]{border-color:var(--sky);color:var(--text);box-shadow:0 0 0 2px var(--sky)}
.bm-theme span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* adding words and pictures */
.bm-add{display:flex;gap:8px;align-items:stretch}
.bm-add textarea{flex:1;min-width:0;resize:vertical;min-height:62px}
.bm-add .btn{align-self:stretch;flex:none;padding:0 16px}
.bm-meter{display:flex;align-items:center;gap:10px;font:700 .8rem 'Inter',sans-serif;color:var(--soft)}
.bm-bar{flex:0 0 90px;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bm-bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:99px;transition:width .2s}
.bm-meter.ok .bm-bar i{background:var(--green)}
.bm-meter.ok{color:var(--green)}
.bm-pool-h{display:flex;justify-content:space-between;align-items:center}
#poolChips{max-height:180px}
#poolChips:empty::before{content:'Nothing yet. Add words above, or pictures from your library.';color:var(--muted);font-size:.82rem}

/* the two big actions */
.bm-actions{display:grid;gap:10px}
.bm-big{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 16px;border-radius:14px;width:100%}
.bm-big>i{font-size:1.5rem;width:30px;text-align:center;flex:none}
.bm-big span{display:flex;flex-direction:column;line-height:1.2}
.bm-big b{font:800 1rem 'Baloo 2','Inter',sans-serif}
.bm-big small{font:600 .76rem 'Inter',sans-serif;opacity:.8}

/* preview */
.bm-previewp{padding:16px;min-width:0}
.bm-ph{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.bm-stage{display:flex;justify-content:center;padding:18px;border-radius:14px;background:
  radial-gradient(circle at 50% 0,rgba(148,163,184,.14),transparent 70%),repeating-linear-gradient(45deg,rgba(148,163,184,.06) 0 12px,transparent 12px 24px),var(--bg)}
.bm-canvas{display:block;width:min(100%,640px,calc(var(--gic-maxh) * .95));height:auto;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35)}

@media(max-width:900px){
  .bm-stage{padding:10px}
}
@media(max-width:420px){.bm-row2{grid-template-columns:1fr}}

/* ===== presentation mode ===== */
.pres{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:#0f172a;color:var(--pi,#0f172a);
  --pcard:#fff;--pborder:#1e3a8a;--pink:#0f172a;--paccent:#1d4ed8;--pbar:rgba(255,255,255,.88);--pbarink:#0f172a}
.pres[hidden]{display:none}
.pres-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pres-setup{position:relative;flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:16px}
.pres-box{width:min(560px,100%);background:var(--panel,#1e293b);color:var(--text,#f1f5f9);border:3px solid var(--hard,#0f172a);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.5);padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.pres-box h2{margin:0;font:800 1.4rem 'Baloo 2','Inter',sans-serif}
.pres-box .field{margin:0}
.pres-box .segmented button{padding:8px 4px;font-size:.78rem}
.pres-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.pres-run{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.pres-run[hidden],.pres-setup[hidden]{display:none}
.pres-bar{position:relative;flex:none;display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--pbar);color:var(--pbarink);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-bottom:3px solid var(--pborder)}
.pres-count{font:800 1.15rem 'Baloo 2','Inter',sans-serif;white-space:nowrap}
.pres-title{flex:1;min-width:0;font:700 .95rem 'Inter',sans-serif;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pres-btns{display:flex;gap:8px;flex:none}
.pb{width:46px;height:46px;border-radius:12px;border:3px solid var(--pborder);background:var(--pcard);color:var(--pink);font-size:1.05rem;cursor:pointer;display:grid;place-items:center;padding:0}
.pb:hover{filter:brightness(.94)}
.pb[hidden]{display:none}
.pb.on{background:var(--paccent);color:#fff}
.pb-exit{background:#f43f5e;color:#fff;border-color:#9f1239}
.pres-prog{position:absolute;left:0;bottom:-3px;height:5px;width:0;background:var(--paccent)}
.pres-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vmin,34px)}
.pres-item{position:relative;width:100%;height:100%;max-width:1500px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vmin;text-align:center;
  background:var(--pcard);color:var(--pink);border:clamp(4px,.8vmin,10px) solid var(--pborder);border-radius:clamp(18px,4vmin,44px);box-shadow:0 1.2vmin 0 rgba(0,0,0,.28),0 2.6vmin 5vmin rgba(0,0,0,.3);
  padding:3vmin;overflow:hidden;font-family:'Baloo 2','Inter',sans-serif;font-weight:800;line-height:1.08}
.pres-item.pop{animation:presPop .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes presPop{from{transform:scale(.9) translateY(3%);opacity:.2}to{transform:none;opacity:1}}
.pres-item .pw{max-width:100%;word-break:break-word}
.pres-item img{flex:1 1 0;min-height:0;max-width:100%;object-fit:contain;display:block;filter:drop-shadow(0 .6vmin 1vmin rgba(0,0,0,.25))}
.pres-item .pcap{flex:none;max-width:100%;font-size:clamp(22px,7vmin,90px);word-break:break-word}
.pres-item .phide{display:flex;flex-direction:column;align-items:center;gap:2.4vmin;opacity:.9}
.pres-item .phide i{font-size:clamp(60px,22vmin,260px);color:var(--paccent)}
.pres-item .phide span{font-size:clamp(20px,5vmin,56px);opacity:.75}
.pres-item .preveal{font:800 clamp(16px,3.2vmin,30px) 'Inter',sans-serif;border:3px solid var(--pborder);background:var(--paccent);color:#fff;border-radius:99px;padding:.5em 1.4em;cursor:pointer}
.pres-item .pend{display:flex;flex-direction:column;align-items:center;gap:2vmin}
.pres-item .pend b{font-size:clamp(34px,10vmin,120px)}
.pres-item .pend span{font:700 clamp(16px,3vmin,30px) 'Inter',sans-serif;opacity:.75}
.pres-foot2{position:relative;flex:none;display:flex;align-items:center;gap:12px;padding:10px 14px 12px;background:var(--pbar);color:var(--pbarink);border-top:3px solid var(--pborder)}
.pres-next{font-size:1.1rem;padding:12px 28px;flex:none}
.pres-called{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;max-height:calc(20 * var(--vh,1vh));overflow:auto;align-content:flex-start}
.pres-called:empty{display:none}
.pres-called .pc{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:99px;border:2px solid var(--pborder);background:var(--pcard);color:var(--pink);font:700 .9rem 'Inter',sans-serif;max-width:220px}
.pres-called .pc.cur{background:var(--paccent);color:#fff}
.pres-called .pc img{width:24px;height:24px;border-radius:6px;object-fit:cover}
.pres-called .pc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pres.nolist .pres-called{display:none}
@media(max-width:560px){.pres-title{display:none}.pb{width:40px;height:40px}.pres-btns{gap:5px;margin-left:auto}.pres-next{padding:10px 18px}}
@media(max-height:480px){.pres-bar{padding:6px 10px}.pb{width:38px;height:38px}.pres-foot2{padding:6px 10px}.pres-next{padding:8px 18px}}
@media(prefers-reduced-motion:reduce){.pres-item.pop{animation:none}}

.gic-set .bm-actions{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* STAGE: keep the header buttons clear of the floating menu */
html.gic-stage.gic-fs .bm-ph{padding-right:84px}
@media (orientation:landscape) and (max-height:560px){html.gic-stage.gic-fs .bm-ph{padding-right:60px}}
.pres-item .pmean{flex:none;max-width:100%;word-break:break-word;opacity:.8;font-weight:600;line-height:1.2}
.pres-item .pclue{font-weight:700;line-height:1.2}
/* presenting from the phone: the screen shows only the caller (no buttons) */
html.gic-present .pres-btns,html.gic-present .pres-next,html.gic-present .preveal{display:none!important}