:root{
  --bingo-marked-bg: #ebddeb;
  --bingo-marked-border: #d8c2d8;
  --card-bg: var(--accent); /* fallback */
  --card-bg: color-mix(in srgb, var(--accent) 12%, #ffffff);
  --card-border: var(--accent); /* fallback */
  --card-border: color-mix(in srgb, var(--accent) 24%, #ffffff);
  --card-shadow: 0 14px 28px rgba(16,94,92,0.12);
  --text-main:#0f1f2f;
  --text-sub:#4c5c6e;
}

.bi-shell{padding:14px 10px 26px; display:flex; justify-content:center;}
.bi-card{background:color-mix(in srgb, var(--accent) 14%, #ffffff); border:1px solid var(--card-border); border-radius:18px; box-shadow:var(--card-shadow); padding:14px; width:min(960px, 94vw); display:grid; grid-template-columns: minmax(320px,1fr) minmax(260px,0.9fr); gap:12px; align-items:stretch;}
.tt-card--result{width:min(1100px, 96vw); max-width:1100px;}
.bi-result-grid{display:grid; grid-template-columns:minmax(360px, 1.1fr) minmax(300px, 1fr); gap:14px; align-items:start; width:100%; box-sizing:border-box;}
.bi-right-col{display:flex; flex-direction:column; gap:12px; height:auto; align-self:start;}
.bi-right-col > .panel:last-child{flex:0 0 auto;}
.bi-board-preview{display:flex; flex-direction:column; gap:10px; position:relative;}
.bi-board-meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.bi-board-grid--result{width:100%; aspect-ratio:1/1; max-height:620px; min-height:320px;}
.bi-board-grid--result .bi-cell{cursor:default;}
.bi-cell--result{background:color-mix(in srgb, var(--accent) 6%, #f9fafc);}
.bi-cell--result.marked{background:color-mix(in srgb, var(--accent) 16%, #eef3ff); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 28%, #dde6ff);}
.bi-card__right{display:flex; flex-direction:column; gap:12px; height:100%;}
.bi-status{display:flex; flex-direction:column; gap:8px;}
.bi-call-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(70px,1fr));
  grid-auto-rows:minmax(44px,52px);
  gap:8px;
  width:100%;
  flex:1 1 auto;
  min-height:180px;
  max-height:180px; /* ~4 rows before scroll */
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px;
  box-sizing:border-box;
}
.bi-card__left{display:flex; flex-direction:column; gap:12px; align-self:stretch;}
.bi-card__right{display:flex; flex-direction:column; gap:12px; align-self:stretch; height:100%;}
.bi-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap;}
.bi-head--right{margin-bottom:8px;}
.bi-head h1{margin:0;font-size:30px;font-weight:800;color:var(--text-main);} 
.bi-head p{margin:4px 0 0;color:var(--text-sub);font-weight:600;}
.bi-chipset{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.bi-chipset--top{margin-left:auto; justify-content:flex-end;}
.bi-chip--turn{
  background: var(--accent); /* fallback */
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
  box-shadow: var(--accent); /* fallback */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, #ffffff);
}
.bi-chip--restart{
  background: var(--accent); /* fallback */
  background: color-mix(in srgb, var(--accent) 18%, #ffffff);
  box-shadow: var(--accent); /* fallback */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, #ffffff);
}
.bi-chip{background:#fff; border:1px solid color-mix(in srgb, var(--accent) 18%, #ffffff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, #ffffff); padding:8px 12px; border-radius:12px; font-weight:700; color:var(--text-main); display:inline-flex; gap:8px; align-items:center; min-height:42px;}
.bi-chip .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); display:inline-block; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 16%, #ffffff);} 
.bi-row{display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;}
.bi-btn{border-radius:12px; padding:12px 14px; font-weight:800; border:1px solid color-mix(in srgb, var(--accent) 30%, #ffffff); background:color-mix(in srgb, var(--accent) 70%, #ffffff); color:#0d1c2c; box-shadow:0 8px 18px rgba(0,0,0,0.08); cursor:pointer; transition:transform .12s ease, box-shadow .15s ease;}
.bi-btn:hover{transform:translateY(-1px); box-shadow:0 12px 22px rgba(0,0,0,0.12);} 
.bi-btn:disabled{opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none;}
.bi-btn.ghost{background:#fff; border-color:color-mix(in srgb, var(--accent) 20%, #ffffff); color:var(--text-main); box-shadow:none;}

.bi-boards{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:10px; width:100%;}
.bi-board-card{background:#fff; border:1px solid color-mix(in srgb, var(--accent) 18%, #ffffff); border-radius:14px; padding:12px; padding-bottom:30px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, #ffffff); display:flex; flex-direction:column; gap:8px; min-height:300px; position:relative;}
.bi-board-title{font-weight:800; color:var(--text-main); display:flex; align-items:center; justify-content:space-between; gap:8px;}
.bi-board-grid{display:grid; gap:6px; width:100%; max-width:min(420px, 92vw); aspect-ratio:1/1; margin:0 auto; position:relative;}
.bi-board-grid[data-size="10"]{gap:4px;}
.bi-cell{background:color-mix(in srgb, var(--accent) 4%, #f4f6f8); border:1px solid color-mix(in srgb, var(--accent) 14%, #e6eaef); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--text-main); font-size:clamp(12px, 1.6vw, 18px); position:relative; cursor:default;}
.bi-cell.marked{background:var(--bingo-marked-bg); color:#0c2730; box-shadow: inset 0 0 0 2px var(--bingo-marked-border);} 
.bi-cell.win-line{background:color-mix(in srgb, var(--accent) 32%, #ffffff); border-color:color-mix(in srgb, var(--accent) 40%, #ffffff);}
.bi-cell span{pointer-events:none;}
.bi-win-overlay{position:absolute; pointer-events:none; z-index:5;}
.bi-win-stroke{
  position:absolute;
  height:8px;
  border-radius:999px;
  background:color-mix(in srgb, var(--accent) 46%, transparent);
  box-shadow:0 0 0 2px rgba(255,255,255,0.45), 0 8px 14px rgba(15, 31, 47, 0.08);
  transform-origin:left center;
  opacity:0.7;
}

.bi-call-panel{
  background:#fff;
  border: var(--accent); /* fallback */
  border:1px solid color-mix(in srgb, var(--accent) 18%, #ffffff);
  border-radius:14px;
  padding:12px;
  box-shadow: var(--accent); /* fallback */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, #ffffff);
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
  min-height:220px;
  height:100%;
}
.bi-badge{display:inline-flex; justify-content:center; align-items:center; padding:8px 10px; border-radius:12px; border:1px solid color-mix(in srgb, var(--accent) 18%, #ffffff); background:color-mix(in srgb, var(--accent) 10%, #ffffff); font-weight:800; color:var(--text-main);} 
.bi-badge.secondary{background:#f4f7fb; color:#1f2937;}
.bi-status{display:flex; flex-direction:column; gap:8px;}
.bi-status-row{display:flex; justify-content:space-between; align-items:center; font-weight:700; color:var(--text-main); padding:8px 10px; border-radius:10px; background:color-mix(in srgb, var(--accent) 6%, #ffffff); border:1px solid color-mix(in srgb, var(--accent) 18%, #ffffff);} 
.bi-status-row small{color:var(--text-sub); font-weight:600;}
.bi-status-row--top{background:transparent; border:0; padding:0;}

.bi-overlay{position:fixed; inset:0; background:rgba(9,18,33,0.46); display:none; align-items:center; justify-content:center; z-index:40;}
.bi-overlay.is-open{display:flex;}
.bi-modal{background:#fff; border-radius:18px; padding:20px; width:min(520px, 92vw); box-shadow:0 20px 46px rgba(0,0,0,0.22); border:1px solid color-mix(in srgb, var(--accent) 22%, #ffffff);}
.bi-modal h2{margin:0; font-size:26px; font-weight:800; color:var(--text-main);} 
.bi-overlay-outcome{margin:10px 0 0; font-size:28px; line-height:1.1; font-weight:900; color:var(--text-main);}
.bi-overlay-outcome.is-win{color:#166534;}
.bi-overlay-outcome.is-lose{color:#991b1b;}
.bi-overlay-outcome.is-draw{color:#1f3b7a;}
.bi-modal p{margin:8px 0 12px; color:var(--text-sub); font-weight:600;}
.bi-modal .actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;}

/* Outcome & toggle chips used on result page */
.chip--win{background:#dcfce7 !important; border-color:#22c55e !important; color:#166534 !important; box-shadow: inset 0 0 0 1px #bbf7d0 !important;}
.chip--lose{background:#fee2e2 !important; border-color:#ef4444 !important; color:#991b1b !important; box-shadow: inset 0 0 0 1px #fecdd3 !important;}
.chip--switch{margin-left:auto; font-weight:800; cursor:pointer;}

@media (max-width: 980px){
  .bi-card{grid-template-columns:1fr;}
  .bi-result-grid{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .bi-card{
    width:min(100%, calc(100vw - 16px));
    padding:12px;
    gap:10px;
    border-radius:18px;
  }
  .bi-head{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .bi-chipset--top{
    margin-left:0;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    justify-content:stretch;
    width:100%;
  }
  .bi-chip{
    min-height:40px;
    padding:8px 12px;
    font-size:14px;
  }
  .bi-chipset--top .bi-chip{
    width:100%;
    min-width:0;
    justify-content:center;
    text-align:center;
    white-space:nowrap;
    padding-inline:10px;
  }
  .bi-chip--turn{
    width:100%;
    justify-content:flex-start;
  }
  .bi-card__left,
  .bi-card__right{
    gap:10px;
  }
}