/* Retro CRT 90's terminal vibes */
:root{
  --bg:#020402;
  --fg:#00ff88;
  --dim:#00995c;
  --accent:#00ffaa;
  --alert:#ff5577;
  --scan:#00cc77;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(ellipse at center, #021 0%, #000 70%);
  color:var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(0,255,136,.25);
  overflow:hidden;
}
#crt-overlay{
  position:fixed; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.0) 2px, rgba(0,255,100,0.04) 3px, rgba(0,255,100,0.04) 4px),
    radial-gradient(ellipse at center, rgba(0,255,136,0.06), rgba(0,255,136,0) 60%);
  mix-blend-mode: screen;
  animation:flicker 2.5s infinite steps(60);
}
@keyframes flicker{0%,100%{opacity:.9} 50%{opacity:.95} 52%{opacity:.85}}
.terminal{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:10px;
  gap:10px;
}
.bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 10px;
  border:2px solid var(--dim);
  background: linear-gradient(180deg, rgba(0,40,24,0.5), rgba(0,0,0,0.3));
  box-shadow: inset 0 0 10px rgba(0,255,136,.15), 0 0 20px rgba(0,255,136,.1);
}
.bar-bottom{margin-top:auto}
#table{
  flex:1;
  border:2px solid var(--dim);
  padding:10px;
  display:grid;
  grid-template-rows: auto 1fr auto;
  gap:8px;
  position:relative;
  background: linear-gradient(180deg, rgba(0,40,24,0.3), rgba(0,0,0,0.2));
}
#dealer-btn{
  position:absolute; top:8px; right:8px;
  border:2px solid var(--accent);
  padding:2px 6px; border-radius:50%;
  font-weight:bold;
  text-shadow: 0 0 6px var(--accent);
}
#board{
  display:flex; gap:6px; justify-content:center; align-items:center;
  min-height:64px;
}
.card{
  border:2px solid var(--accent);
  min-width:46px; min-height:64px;
  padding:4px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,40,24,0.25);
  box-shadow: inset 0 0 10px rgba(0,255,170,.25);
}
.card.dim{opacity:.5; filter:grayscale(1)}
#pot{ text-align:center; font-weight:bold; }
#players{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:8px;
}
.player{
  border:2px solid var(--dim);
  padding:8px; background: rgba(0,40,24,0.18);
  display:grid; grid-template-columns: auto 1fr; gap:6px 10px; align-items:center;
}
.player .name{ grid-column:1 / span 2; font-weight:bold;}
.player .stack{opacity:.9}
.player .actions{ grid-column:1 / span 2; opacity:.8}
.player .hand{display:flex; gap:6px}
.badge{border:1px solid var(--accent); padding:1px 4px; margin-left:6px}
.folded{opacity:.35; filter:grayscale(1)}
#hud{
  border:2px solid var(--dim);
  padding:10px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background: rgba(0,40,24,0.12);
}
#msg{flex:1; min-width:240px}
#controls{display:flex; gap:8px; flex-wrap:wrap}
button{
  color:var(--fg);
  background: transparent;
  border:2px solid var(--accent);
  padding:6px 10px; cursor:pointer;
  text-shadow: 0 0 6px rgba(0,255,136,.6);
  box-shadow: inset 0 0 12px rgba(0,255,136,.15), 0 0 12px rgba(0,255,136,.08);
}
button[disabled]{opacity:.35; cursor:not-allowed}
button:hover{filter:brightness(1.2)}
.betlabel input{
  background: transparent; color:var(--fg);
  border:2px solid var(--accent); padding:4px; width:84px;
  box-shadow: inset 0 0 8px rgba(0,255,136,.2);
}
.win{color:#aaff00}
.alert{color:var(--alert)}
kbd{border:1px solid var(--accent); padding:0 4px}
@media (max-width:720px){
  #board{min-height:54px}
  .card{min-width:40px; min-height:56px}
}