:root{--marble-full-size:2.4rem;--marble-full-size-not:-2.8rem;--marble-size:2.4rem;--marble-margin:0.1rem;--marble-border:0.1rem;--board-size:15rem}body,html{margin:0;padding:0;font-family:monospace}@keyframes translate-right{0%{transform:translateX(var(--marble-full-size-not))}to{transform:translateX(0)}}@keyframes fade-out{0%{transform:translateY(-1rem);opacity:1}25%{transform:translateY(0)}50%{opacity:1}to{opacity:0}}@keyframes moving-up{0%{transform:translateY(var(--marble-full-size))}to{transform:translateY(0)}}@keyframes moving-down{0%{transform:translateY(var(--marble-full-size-not))}to{transform:translateY(0)}}.marble{text-align:center;height:var(--marble-size);width:var(--marble-size);display:inline-block;margin:var(--marble-margin);border:var(--marble-border) solid #fdfdfd;border-radius:10px;box-shadow:inset 0 0 0 3px hsla(0,0%,99.2%,.5);background:#eee;transition:opacity 1s;line-height:var(--marble-size);font-weight:700;font-size:1.2rem;color:#fff}.translate-right{animation:translate-right 90ms}.moving-down{animation:moving-down .12s}.moving-up{animation:moving-up .12s}.marble.d{background-color:#000}.marble.r{background-color:red}.marble.g{background-color:green}.marble.o{background-color:orange}.marble.b{background-color:#00f}.row.center{transform:translateY(-100%);margin-bottom:var(--marble-full-size-not);position:relative;outline:3px solid #ccc}.row.center .marble{border:var(--marble-border) solid transparent;box-shadow:none;background:none}.row.center .cursor{border:var(--marble-border) solid #295a70}#p1,#p2{width:var(--board-size);text-align:center;margin:1rem}#p1,#p2,.score{display:inline-block}.score{vertical-align:top}.receive{text-align:center;font-size:1.5rem;font-family:Verdana,sans-serif;font-weight:700;color:#ccc;text-shadow:0 0 1px #000}.receive>div{opacity:0;animation:fade-out 5s ease-out}#p1,#p1-score{float:left}#p2,#p2-score{float:right}