/* ===== PUBLIC BOARD CSS — refined design ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font,'Inter',system-ui,sans-serif);background:radial-gradient(1200px 720px at 8% -8%,rgba(59,130,246,.18),transparent 55%),radial-gradient(900px 560px at 100% 0%,rgba(14,165,233,.12),transparent 52%),linear-gradient(135deg,#0b1221 0%,#17243d 100%);color:#f8fafc;line-height:1.5}

/* --- top bar --- */
.top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 28px;
  background:rgba(10,18,34,.78);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(2,6,23,.28);
  position:sticky;top:0;z-index:30
}
.top-title{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em;color:#f8fafc;text-wrap:balance}
.top-actions{display:flex;gap:8px;align-items:center}
.session-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:0 10px;border-radius:999px;
  border:1px solid rgba(148,163,184,.34);
  background:rgba(15,23,42,.44);
  color:#cbd5e1;font-size:12px;font-weight:600;letter-spacing:.01em;
  max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.top-btn{
  padding:8px 16px;border:1px solid rgba(255,255,255,.16);border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));color:#e2e8f0;
  cursor:pointer;font:inherit;font-size:13px;font-weight:500;
  transition:all .2s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px rgba(2,6,23,.18)
}
.top-btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));border-color:rgba(255,255,255,.28);color:#fff;transform:translateY(-1px)}
.top-link{font-size:12px;color:#64748b;text-decoration:none;opacity:.7;transition:opacity .2s}
.top-link:hover{opacity:1;color:#94a3b8}

.organizer-toast{
  position:fixed;
  top:68px;
  right:18px;
  z-index:10020;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(15,23,42,.92);
  border:1px solid rgba(148,163,184,.35);
  color:#e2e8f0;
  font-size:13px;
  font-weight:600;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.organizer-toast.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* --- layout --- */
html,body{height:100%;overflow:hidden}
.board-layout{display:grid;grid-template-columns:1fr 380px;gap:0;height:calc(100vh - 54px)}
.grid-wrap{
  padding:22px;overflow:hidden;
  display:flex;flex-direction:column;gap:16px;
  min-height:0;height:100%
}
.detail-panel{
  background:rgba(8,16,31,.58);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.04),-14px 0 30px rgba(2,6,23,.16);
  padding:28px;overflow:auto;height:100%
}

/* --- compact mode (broadcast) --- */
body.compact-mode .board-layout{
  grid-template-columns:1fr;
  height:calc(100vh - 54px);
}
body.compact-mode .detail-panel{display:none}
body.compact-mode .grid-wrap{padding:14px;gap:12px}
body.compact-mode .grid{gap:9px}
body.compact-mode .block-title{margin-bottom:6px;font-size:14px}
body.compact-mode .top-bar{padding:10px 14px}
body.compact-mode .top-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}
body.compact-mode .top-btn{padding:6px 12px;font-size:12px}

/* --- block sections --- */
.block-section{display:flex;flex-direction:column;min-height:0;flex:var(--rows,3)}
.block-title{
  margin:0 0 8px;font-size:15px;font-weight:700;letter-spacing:-.01em;
  color:#f8fafc;padding-bottom:4px;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.06)
}
.theme-light .block-title{color:#0f172a;border-bottom-color:rgba(0,0,0,.08)}

/* --- grid --- */
.grid{
  display:grid;
  grid-template-columns:repeat(var(--cols,5),1fr);
  grid-template-rows:repeat(var(--rows,3),1fr);
  gap:11px;
  width:100%;flex:1;min-height:0
}

/* --- card flip --- */
.card-flip{
  position:relative;border:none;background:transparent;padding:0;cursor:pointer;
  perspective:1000px;font:inherit;
  min-width:0;min-height:0;width:100%;height:100%;
  outline:none;-webkit-tap-highlight-color:transparent;
  isolation:isolate
}
.organizer-status{
  position:absolute;
  top:8px;
  right:8px;
  z-index:4;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(100,116,139,.28);
  color:#e2e8f0;
  pointer-events:none;
}
.organizer-status[data-state="open"]{
  background:rgba(34,197,94,.25);
  color:#bbf7d0;
  border-color:rgba(34,197,94,.45);
}
.organizer-status[data-state="closed"]{
  background:rgba(100,116,139,.28);
  color:#e2e8f0;
  border-color:rgba(148,163,184,.35);
}
.card-flip.is-empty{cursor:default;opacity:.4}
.card-inner{
  display:block;position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .56s cubic-bezier(.23,1,.32,1)
}
.card-flip.flipped .card-inner{transform:rotateY(180deg)}
.card-front,.card-back{
  position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--radius,16px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:12px;backface-visibility:hidden;overflow:hidden;
  box-sizing:border-box
}

/* front — uniform mono side */
.card-front{
  background:var(--filled-bg,#2563eb);
  color:var(--card-fg,var(--filled-text,#fff));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 22px rgba(2,6,23,.28),inset 0 1px 0 rgba(255,255,255,.18)
}
.card-flip.is-empty .card-front{
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.08);
  box-shadow:none;color:rgba(255,255,255,.15)
}
.card-flip.is-filled:not(.flipped):hover .card-front{
  filter:brightness(1.08);
  box-shadow:0 12px 26px rgba(2,6,23,.34),inset 0 1px 0 rgba(255,255,255,.2)
}
.card-flip.is-filled:not(.flipped){transition:transform .17s ease}
.card-flip.is-filled:not(.flipped):hover{transform:translateY(-2px) scale(1.02);z-index:2}
.card-icon{
  display:flex;align-items:center;justify-content:center;
  opacity:.3;filter:drop-shadow(0 2px 8px rgba(0,0,0,.2))
}
.card-icon svg{width:clamp(22px,4vw,40px);height:clamp(22px,4vw,40px)}

.organizer-mode .card-front{padding:8px;justify-content:flex-start}
.card-front-content{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
}
.card-front-content.has-logo{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  justify-items:center;
  align-content:stretch;
}
.card-front-logo-wrap{
  width:min(84%, 190px);
  height:clamp(34px, 5.3vw, 54px);
  display:flex;align-items:center;justify-content:center;
  padding:6px 10px;border-radius:9px;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(0,0,0,.16)
}
.card-front-content.no-logo .card-front-logo-wrap{display:none}
.card-front-content.no-logo{gap:6px}

/* back — colorful content side */
.card-back{
  transform:rotateY(180deg);
  background:var(--card-bg,var(--card-back-bg,#1e293b));
  color:var(--card-fg,#fff);
  flex-direction:column;
  justify-content:flex-start;
  gap:4px;
  font-size:13px;line-height:1.45;
  padding:8px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 28px rgba(2,6,23,.28),inset 0 1px 0 rgba(255,255,255,.16)
}
.card-back.has-logo{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  justify-items:center;
  align-content:stretch;
}
.card-logo-wrap{
  width:min(84%, 190px);
  height:clamp(34px, 5.3vw, 54px);
  display:flex;align-items:center;justify-content:center;
  padding:6px 10px;border-radius:9px;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(0,0,0,.16)
}
.card-img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  filter:none
}
.card-bank-name{
  margin-top:0;display:block;
  font-size:clamp(11px,1.45vw,14px);font-weight:800;
  color:var(--card-fg,rgba(255,255,255,.95));
  text-shadow:none;
  background:none;
  padding:0;
  border-radius:0;
  max-width:96%;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.card-back.no-logo .card-bank-name{display:block}
.card-back.no-logo .card-logo-wrap{display:none}
.card-text{
  font-size:var(--card-fs,clamp(12px,2.6vw,19px));font-weight:800;
  word-break:break-word;
  text-shadow:none;
  background:none;
  padding:0;
  border-radius:0
}
.card-preview{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  line-clamp:3;
  overflow:hidden;
  font-size:clamp(9px,1.2vw,11px);
  opacity:.98;
  margin-top:0;
  text-shadow:none;
  line-height:1.3
}
.card-preview-logo{
  margin-top:0;
  background:none;
  padding:0;
  border-radius:0;
  width:100%;
  max-width:100%;
  text-align:center;
  display:-webkit-box;
  -webkit-line-clamp:1;
  line-clamp:1;
}

.card-back.no-logo{
  justify-content:center;
  gap:6px;
}
.card-back.no-logo .card-preview{
  -webkit-line-clamp:1;
  line-clamp:1;
}

/* active ring */
.card-flip.is-active .card-front,
.card-flip.is-active .card-back{
  outline:2px solid rgba(14,165,233,.8);outline-offset:3px;
  box-shadow:0 0 20px rgba(14,165,233,.25),0 8px 32px rgba(0,0,0,.3)
}

/* --- detail panel --- */
.detail-title{margin:0 0 18px;font-size:20px;font-weight:700;letter-spacing:-.02em;color:#f8fafc}
.detail-split{display:flex;flex-direction:column;height:100%;min-height:0}
.detail-half{flex:1 1 50%;min-height:0;overflow:auto}
.detail-half-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
.detail-subtitle{margin:0 0 10px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:#f8fafc}
.detail-body{font-size:14px;line-height:1.72;color:#d0d9e8}
.detail-analytics{font-size:13px;line-height:1.62;color:#d0d9e8}
.detail-body h3{margin:0 0 8px;color:#f8fafc;font-weight:600}
.detail-body p{margin:10px 0}
.detail-body code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:6px;font-size:12px}
.detail-placeholder{color:#475569;text-align:center;padding:48px 0;font-size:14px}
.detail-source{
  margin-top:20px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);font-size:13px
}
.detail-source a{color:#60a5fa;text-decoration:none;word-break:break-all;transition:color .15s}
.detail-source a:hover{color:#93bbfc;text-decoration:underline}
.detail-stats{
  margin-top:0;padding-top:0;border-top:none
}
.detail-stats h3{margin:0 0 8px;font-size:14px;font-weight:700}
.detail-stats p{margin:8px 0;font-size:13px;line-height:1.5}
.detail-stats-list{margin:8px 0 0;padding-left:16px;font-size:13px}
.detail-stats-list li{margin:4px 0}
.stat-color{display:inline-flex;align-items:center;gap:6px;margin:2px 8px 2px 0;white-space:nowrap}
.stat-dot{width:9px;height:9px;border-radius:999px;background:var(--dot,#94a3b8);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 8px color-mix(in srgb, var(--dot,#94a3b8) 55%, transparent)}
.detail-insights{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.14)}
.detail-insights p{margin:8px 0;font-size:12.5px;line-height:1.55;color:#94a3b8}

/* --- mobile bottom-sheet --- */
.sheet-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;
  display:flex;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(4px)
}
.sheet-overlay[hidden]{display:none!important}
.sheet{
  width:100%;max-height:80vh;
  background:#1e293b;color:#f8fafc;
  border-radius:20px 20px 0 0;
  display:flex;flex-direction:column;overflow:hidden;
  animation:slideUp .35s cubic-bezier(.23,1,.32,1);
  box-shadow:0 -8px 40px rgba(0,0,0,.4)
}
@keyframes slideUp{from{transform:translateY(60%);opacity:0}to{transform:none;opacity:1}}
.sheet-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06)
}
.sheet-title{font-weight:700;font-size:16px}
.sheet-close{
  background:rgba(255,255,255,.06);border:none;font-size:18px;
  cursor:pointer;color:#94a3b8;padding:6px 10px;border-radius:10px;
  transition:background .15s
}
.sheet-close:hover{background:rgba(255,255,255,.12)}
.sheet-split{display:flex;flex-direction:column;min-height:0;flex:1}
.sheet-body{padding:20px;overflow:auto;flex:1 1 50%;font-size:14px;line-height:1.7;color:#cbd5e1}
.sheet-analytics{padding:14px 20px 20px;overflow:auto;flex:1 1 50%;border-top:1px solid rgba(255,255,255,.06);font-size:13px;line-height:1.6;color:#cbd5e1}
.sheet-body h3{margin:0 0 8px;color:#f8fafc}

/* --- responsive --- */
@media(max-width:860px){
  html,body{overflow:auto}
  .board-layout{grid-template-columns:1fr;height:auto}
  .detail-panel{display:none}
  .grid-wrap{padding:16px;gap:16px;overflow:auto;height:auto}
  .block-section{flex:none}
  .grid{gap:8px;flex:none}
  .card-flip{height:auto}
  .card-inner{padding-top:100%;height:auto}
  .top-bar{padding:10px 16px}
  .top-title{font-size:16px}
  .top-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .top-btn{padding:7px 12px;font-size:12px}
  .card-logo-wrap{height:clamp(30px, 9.5vw, 44px)}
  .card-bank-name{font-size:10px;padding:3px 6px}
  .card-preview{font-size:clamp(8px,2.2vw,10px)}
}
@media(min-width:861px){
  .sheet-overlay{display:none!important}
}

/* --- celebration effect: confetti / image rain --- */
.celebrate-container{
  position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden
}
.celebrate-particle{
  position:absolute;top:-40px;
  animation:confetti-fall var(--fall-duration,3s) ease-in forwards;
  animation-delay:inherit;
  will-change:transform,opacity
}
@keyframes confetti-fall{
  0%{
    transform:translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity:1
  }
  15%{
    opacity:1
  }
  85%{
    opacity:.9
  }
  100%{
    transform:translateY(calc(100vh + 60px)) translateX(var(--drift,0px)) rotate(var(--spin,360deg)) scale(0.5);
    opacity:0
  }
}

.celebrate-flash{
  position:fixed;inset:0;z-index:9998;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.35) 0%,transparent 70%);
  animation:flash-fade .8s ease-out forwards;
  pointer-events:none
}
@keyframes flash-fade{
  0%{opacity:1}
  100%{opacity:0}
}

.winner-popup{
  position:fixed;
  left:18px;
  bottom:16px;
  z-index:10001;
  pointer-events:none;
  opacity:0;
  transform:translateY(130%);
  transition:transform .45s cubic-bezier(.23,1,.32,1),opacity .3s ease;
}
.winner-popup.is-visible{
  opacity:1;
  transform:translateY(0);
}
.winner-character{
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.winner-bubble{
  max-width:min(68vw, 380px);
  background:rgba(255,255,255,.96);
  color:#0f172a;
  border-radius:14px;
  padding:10px 14px;
  font-size:15px;
  font-weight:700;
  line-height:1.35;
  box-shadow:0 8px 30px rgba(15,23,42,.3);
  border:1px solid rgba(15,23,42,.08);
}
.winner-image{
  width:min(var(--winner-size, 180px), 52vw);
  height:min(var(--winner-size, 180px), 52vw);
  object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(15,23,42,.35));
}

@media(max-width:860px){
  .winner-popup{left:12px;right:12px;bottom:12px}
  .winner-character{align-items:flex-end}
  .winner-bubble{max-width:none;font-size:14px;padding:9px 12px}
  .winner-image{width:min(var(--winner-size, 160px), 68vw);height:min(var(--winner-size, 160px), 68vw)}
}

/* ====== LIGHT THEME ====== */
[data-theme="light"] body,
body.theme-light{
  background:linear-gradient(135deg,#f0f4f8 0%,#e2e8f0 100%);
  color:#1e293b
}
.theme-light .top-bar{
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 24px rgba(15,23,42,.08)
}
.theme-light .top-title{color:#0f172a}
.theme-light .top-btn{
  border:1px solid rgba(0,0,0,.12);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.72));color:#334155;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(15,23,42,.08)
}
.theme-light .top-btn:hover{background:linear-gradient(180deg,#fff,rgba(255,255,255,.85));color:#0f172a}
.theme-light .top-link{color:#64748b}
.theme-light .top-link:hover{color:#2563eb}
.theme-light .session-pill{
  border-color:rgba(0,0,0,.14);
  background:rgba(255,255,255,.76);
  color:#334155
}

.theme-light .detail-panel{
  background:rgba(255,255,255,.8);
  border-left:1px solid rgba(0,0,0,.08);
  backdrop-filter:blur(20px);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.7),-10px 0 20px rgba(15,23,42,.06)
}
.theme-light .detail-title{color:#0f172a}
.theme-light .detail-subtitle{color:#0f172a}
.theme-light .detail-body{color:#475569}
.theme-light .detail-analytics{color:#475569}
.theme-light .detail-body h3{color:#0f172a}
.theme-light .detail-body code{background:rgba(0,0,0,.06)}
.theme-light .detail-placeholder{color:#94a3b8}
.theme-light .detail-source{border-top-color:rgba(0,0,0,.08)}
.theme-light .detail-source a{color:#2563eb}
.theme-light .detail-source a:hover{color:#1d4ed8}
.theme-light .detail-stats{border-top-color:rgba(0,0,0,.08)}
.theme-light .detail-half-bottom{border-top-color:rgba(0,0,0,.08)}
.theme-light .stat-dot{box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.theme-light .detail-insights{border-top-color:rgba(0,0,0,.12)}
.theme-light .detail-insights p{color:#64748b}

.theme-light .card-front{
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 20px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.4)
}
.theme-light .card-flip.is-empty .card-front{
  background:rgba(0,0,0,.04);border:1px dashed rgba(0,0,0,.12);color:rgba(0,0,0,.2)
}
.theme-light .card-flip.is-filled:not(.flipped):hover .card-front{
  box-shadow:0 8px 32px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.4)
}
.theme-light .card-back{
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 20px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.3)
}
.theme-light .card-logo-wrap{
  background:#fff;
  box-shadow:0 3px 12px rgba(15,23,42,.12)
}
.theme-light .card-text{text-shadow:0 1px 2px rgba(0,0,0,.15)}

.theme-light .card-flip.is-active .card-front,
.theme-light .card-flip.is-active .card-back{
  outline:2px solid rgba(37,99,235,.6);outline-offset:3px;
  box-shadow:0 0 16px rgba(37,99,235,.15),0 4px 20px rgba(0,0,0,.1)
}

.theme-light .sheet{background:#fff;color:#0f172a;box-shadow:0 -8px 40px rgba(0,0,0,.15)}
.theme-light .sheet-header{border-bottom-color:rgba(0,0,0,.08)}
.theme-light .sheet-close{background:rgba(0,0,0,.05);color:#64748b}
.theme-light .sheet-close:hover{background:rgba(0,0,0,.1)}
.theme-light .sheet-body{color:#475569}
.theme-light .sheet-analytics{color:#475569;border-top-color:rgba(0,0,0,.08)}
.theme-light .sheet-body h3{color:#0f172a}
.theme-light .sheet-overlay{background:rgba(0,0,0,.3)}