*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#0b5d2a;color:#fff;
  font-family:system-ui,-apple-system,Roboto,sans-serif;user-select:none;-webkit-user-select:none}
body{display:flex;flex-direction:column;height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
header{display:flex;align-items:center;gap:6px;padding:8px;background:rgba(0,0,0,.25);flex-wrap:wrap}
header button{background:#14803d;color:#fff;border:0;border-radius:8px;padding:9px 12px;font-size:14px;font-weight:600}
header button:active{background:#0f6a32}
header button:disabled{opacity:.4}
#stats{display:flex;justify-content:space-between;padding:6px 14px;font-size:15px;font-weight:600;background:rgba(0,0,0,.15)}
#stats span{min-width:30%}
#stats span:nth-child(2){text-align:center}
#stats span:last-child{text-align:right}
#board{flex:1;position:relative;touch-action:none;overflow:hidden}
.slot{position:absolute;left:0;top:0;width:var(--cw);height:calc(var(--cw)*1.42);
  border:2px dashed rgba(255,255,255,.25);border-radius:calc(var(--cw)*.08);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);font-size:calc(var(--cw)*.4)}
.card{position:absolute;left:0;top:0;width:var(--cw);height:calc(var(--cw)*1.42);
  border-radius:calc(var(--cw)*.08);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.5);
  font-size:calc(var(--cw)*.44);transition:transform .2s ease;will-change:transform;overflow:hidden}
.card.drag{transition:none;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.card .tl{position:absolute;left:.08em;top:.04em;line-height:1;font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.card .mid{position:absolute;right:.08em;bottom:0;font-size:1.9em;line-height:1}
.card.red{color:#d32f2f}
.card.blk{color:#111}
.card.down{background:repeating-linear-gradient(45deg,#2b5aa8 0 6px,#244b8d 6px 12px);border:2px solid #fff}
.card.down *{visibility:hidden}
#win{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;text-align:center;z-index:5000}
#win[hidden],#paused[hidden]{display:none}
#paused{position:fixed;inset:0;background:#0b5d2a;display:flex;align-items:center;justify-content:center;text-align:center;z-index:4000}
#paused button{background:#fff;color:#0b5d2a;border:0;border-radius:8px;padding:12px 22px;font-size:18px;font-weight:700}
#win div{background:#0b5d2a;padding:28px 36px;border-radius:16px;border:2px solid #fff}
#win button{background:#fff;color:#0b5d2a;border:0;border-radius:8px;padding:12px 22px;font-size:18px;font-weight:700}