/* Big Photo Bingo — Mini-Block Bingo ("Points Bingo") styles.
   Kept in its own file so the mode's styles never collide with the core
   board styles in styles.css. Blocks stay square (aspect-ratio: 1:1);
   minis FILL the interior of the block (Stephen, 2026-11-07) — a 5-day
   block is 5 mini-blocks tiling the inside — never a small strip at the
   bottom. The block title stays readable on top; the block's TOTAL points
   show as a large bold number at the bottom. */

/* --- minis fill the block interior (play board) --- */
.cell .mini-cell-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:6px;pointer-events:none;min-height:0}
.cell .mini-title{font-weight:700;font-size:clamp(12px,2.4vw,13px);line-height:1.2;text-align:center;overflow-wrap:break-word}
.cell .mini-fill{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;margin-top:4px}
.cell .mini-tiles{flex:1;min-height:0;display:grid;gap:3px}
.cell .mini-tile{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;border-radius:6px;background:rgba(255,255,255,.75);border:1px solid var(--line);font-size:12px;font-weight:800;line-height:1;font-style:normal;color:var(--ink)}
.cell .mini-tile.done{background:var(--success);border-color:var(--green-dark);color:var(--white)}
.cell .mini-tile.future{opacity:.4}
.cell .mini-tile.photo{box-shadow:0 0 0 1px var(--azure)}
.cell .mini-foot{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.cell .mini-total{font-size:20px;font-weight:800;line-height:1;white-space:nowrap}
.cell .mini-count{font-size:12px;font-weight:700;white-space:nowrap;opacity:.85}
/* Marked (complete) mini block: green fill, white text, tiles stay readable */
.cell.marked .mini-tile{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.5);color:var(--white)}
.cell.marked .mini-tile.done{background:rgba(255,255,255,.45);border-color:var(--white)}
/* Block colour (Block Builder): the cell takes the block's colour and the
   text auto-contrasts (dark text on light colours, white on dark). Tiles
   follow the same light/dark split. */
.cell.block-dark{color:var(--white)}
.cell.block-dark .mini-tile{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:var(--white)}
.cell.block-dark .mini-tile.done{background:var(--success);border-color:var(--green-dark)}
.cell.block-light{color:var(--ink)}
/* A photo filling the block (overall proof): scrim + white text, same as
   the rest of the board — the minis and total stay readable over it. */
.cell.has-photo .mini-cell-inner{color:var(--white)}
.cell.has-photo .mini-tile{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);color:var(--white)}
.cell.has-photo .mini-tile.done{background:var(--success);border-color:var(--green-dark)}
/* Icon image filling the block (Block Builder upload): same treatment as a
   photo — cover the block, text reads over it. */
.cell img.block-icon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.cell.has-icon::before{content:"";position:absolute;left:0;right:0;bottom:0;height:75%;background:linear-gradient(to top,rgba(10,20,30,.78),rgba(10,20,30,0));z-index:2;pointer-events:none}
.cell.has-icon .mini-cell-inner,.cell.has-icon span.label{color:var(--white);font-weight:800;text-shadow:0 1px 6px rgba(0,0,0,.65)}
.cell.has-icon .mini-tile{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);color:var(--white)}

/* --- mini modal --- */
.mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin:12px 0}
.mini-cell{position:relative;border:1.5px solid var(--line);border-radius:12px;background:var(--white);padding:10px 4px 8px;font-weight:700;font-size:12px;text-align:center;min-height:56px}
.mini-cell.done{background:var(--success);border-color:var(--green-dark);color:var(--white)}
.mini-cell.future{opacity:.45}
.mini-cell:disabled{cursor:not-allowed}
.mini-cell .mini-pts{display:block;font-size:12px;font-weight:600;opacity:.8;margin-top:2px}
.mini-cell .mini-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px;opacity:.85}
.mini-cell .mini-cam{position:absolute;top:2px;right:2px;z-index:2;width:22px;height:22px;border-radius:50%;background:var(--white);border:1.5px solid var(--line);font-size:12px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.mini-cell.done .mini-cam{background:rgba(255,255,255,.9)}
#miniProofBox{border:2px dashed var(--sunny);border-radius:14px;padding:12px;margin:12px 0;text-align:center}
#miniProofBox p{margin:0 0 10px}

/* --- office dashboard --- */
.dash-list{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.dash-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:14px;text-align:left;box-shadow:var(--shadow-soft);width:100%}
.dash-row .gi{flex:1;min-width:0}
.dash-rank{font-weight:800;color:var(--muted);min-width:28px}
.dash-dot{width:14px;height:14px;border-radius:50%;flex:none}
.dash-pts{margin-left:auto;white-space:nowrap}
.dash-card{display:flex;flex-direction:column;gap:10px}
.dash-block{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-md);padding:12px}
.dash-block-title{display:block;font-weight:700;margin-bottom:8px}
/* Dashboard rows use the same fill (tiles + total) in a flat row layout. */
.dash-block .mini-fill{display:flex;flex-direction:column;gap:6px}
.dash-block .mini-tiles{display:grid;gap:3px;grid-auto-rows:26px}
.dash-block .mini-tile{display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--tint-soft);border:1px solid var(--line);font-size:12px;font-weight:800;font-style:normal;color:var(--ink)}
.dash-block .mini-tile.done{background:var(--success);border-color:var(--green-dark);color:var(--white)}
.dash-block .mini-tile.future{opacity:.4}
.dash-block .mini-foot{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.dash-block .mini-total{font-size:18px;font-weight:800}
.dash-block .mini-count{font-size:12px;font-weight:700;color:var(--muted)}

/* Mini cells with an optional photo: same scrim as the play board — the
   thumbnail fills the cell, so the label sits on a dark gradient in bold
   white with a soft shadow. */
.mini-cell.has-photo::before{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;background:linear-gradient(to top,rgba(10,20,30,.78),rgba(10,20,30,0));z-index:1;border-radius:10px;pointer-events:none}
.mini-cell.has-photo span{position:relative;z-index:2;color:var(--white);font-weight:800;text-shadow:0 1px 6px rgba(0,0,0,.65)}
.mini-wrap{position:relative;display:flex}.mini-wrap>.mini-cell{flex:1;width:100%}
.mini-wrap>.mini-cam{position:absolute;top:2px;right:2px;z-index:2;width:22px;height:22px;border-radius:50%;background:var(--white);border:1.5px solid var(--line);font-size:12px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.mini-wrap>.mini-cell.done+.mini-cam{background:rgba(255,255,255,.9)}