/* Egyptian Ratscrew centre: your stack, the pile (the slap target), the challenge banner and the slap-rule legend.
   Tokens from styles.css only. No hand to arrange, and no hint or undo in a reflex game. */
.ers #sort,.ers #arrange,.ers #hint,.ers #undo{display:none}
/* No hand: keep its room so your seat stays inside the felt, as War does. */
.ers .hand-wrap{min-height:0;height:var(--space-12);padding:0;visibility:hidden;overflow:hidden}
.ers-table{display:grid;gap:var(--space-2);justify-items:center;width:100%}
.table-center .ers-banner{margin:0;max-width:100%;text-wrap:balance;font-family:var(--display);font-size:16px;font-weight:700;color:var(--lime)}
.ers-row{display:flex;align-items:flex-end;justify-content:center;gap:var(--space-6)}
.ers-spot{display:grid;justify-items:center;gap:var(--space-1)}
.ers-cap{color:var(--muted);font-size:12px;white-space:nowrap}
.ers-burned{color:var(--paper)}
.ers-stack{display:grid;place-items:center;width:64px;height:92px;color:var(--paper);font-weight:800;font-variant-numeric:tabular-nums}
.ers-stack>span{background:var(--ink-soft);border:1px solid var(--line-strong);border-radius:999px;padding:2px 8px;font-size:13px;line-height:1.2}
.ers-stack.empty{background:var(--felt-deep)}
.ers-pile{position:relative;display:block;width:176px;height:120px;padding:0;border:1px dashed var(--line-strong);border-radius:12px;background:var(--felt-deep);cursor:pointer;touch-action:manipulation}
.ers-pile:hover{border-color:var(--lime)}
.ers-fan{position:absolute;inset:0}
.ers-fan .card{position:absolute;top:13px;left:calc(var(--space-4) + var(--i) * 40px);width:64px;height:92px;box-shadow:none}
.ers-fan .card[data-lit]{outline:3px solid var(--lime);outline-offset:1px}
.ers-empty{position:absolute;inset:13px 56px;border:1px solid var(--line);border-radius:8px}
button.ers-pile:focus-visible,button.ers-stack:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.ers-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1) var(--space-2);margin:0;padding:0;list-style:none;font-size:12px;color:var(--muted)}
.ers-legend li{border:1px solid var(--line-strong);border-radius:999px;padding:2px 10px}
.ers-legend strong{color:var(--paper);font-weight:700}
.ers-legend li.lit{border-color:var(--lime);background:var(--ink-soft)}
.ers-legend li.lit strong{color:var(--lime)}
.ers .game-actions button{min-width:140px}
#players .ring-seat.ers-out{opacity:.45}
/* Guide demos: a fanned pile, the card that lands, the match outlined. Scenes wrap on phones. */
[data-rule-demo]>div{min-width:0}
[data-rule-demo] .rule-scene{flex-wrap:wrap;row-gap:var(--space-2)}
[data-rule-demo] .demo-pile{text-align:center;max-width:100%}
.ers-demo-pile{display:flex;align-items:center}
.ers-demo-pile .guide-card+.guide-card{margin-left:-24px}
.ers-demo-pile .guide-card[data-ers-hit]{outline:3px solid var(--lime);outline-offset:1px}
.ers-chances{width:100%;max-width:360px;border-collapse:collapse;margin-top:var(--space-3);font-size:14px;font-variant-numeric:tabular-nums}
.ers-chances th,.ers-chances td{padding:4px;border-bottom:1px solid var(--line);text-align:center}
.ers-glossary{display:grid;gap:var(--space-3);padding:0;list-style:none}
.ers-glossary li{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.ers-glossary .example-hand .guide-card{width:40px;height:56px}
/* 768–1099 px: the shell stacks a seat's count under its details, so the top seat (2 and 4 players) reaches the
   prompt line; the centre starts lower there. */
@media(min-width:768px) and (max-width:1099px){.ers #players[data-count="2"]~.table-center,.ers #players[data-count="4"]~.table-center{margin-top:192px}}
@media(max-width:1100px){.table-center .ers-banner{max-width:240px}.ers-legend span{display:none}}
@media(max-width:767px){
 .ers-chances{font-size:13px}
 .ers .table-top{flex-direction:column;align-items:flex-start;gap:2px}
 .ers-row{gap:var(--space-3)}
 .ers-stack,.ers-fan .card{width:56px;height:80px}
 .ers-pile{width:152px;height:104px}
 .ers-fan .card{top:11px;left:calc(var(--space-3) + var(--i) * 36px)}
 .ers-legend span{display:none}
 .ers .game-actions{flex:1 1 100%;display:flex;gap:var(--space-2)}
 .ers .game-actions button{flex:1;min-width:0;min-height:56px;font-size:15px}
}