/* Area 51 Keno: a 1920x1080 stage (780x1400 on an upright phone), scaled to fit. Aliens land in Vegas: deep space, alien green for drawn numbers, neon pink for yours. */
.tablewrap{position:relative;margin:0 auto;overflow:hidden;border-radius:18px;background:#05020f;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;user-select:none;-webkit-user-select:none;overflow:hidden;font-family:Inter,Arial,sans-serif;
  background:radial-gradient(760px 520px at 1250px 210px,rgba(125,40,200,.42) 0,rgba(125,40,200,0) 70%),radial-gradient(900px 600px at 10% 85%,rgba(20,120,140,.28) 0,rgba(20,120,140,0) 70%),radial-gradient(700px 400px at 70% 100%,rgba(255,79,216,.16) 0,rgba(255,79,216,0) 70%),radial-gradient(1400px 1000px at 40% 40%,#120a2e 0,#08041a 55%,#04020c 100%)}
.stars{position:absolute;inset:0;pointer-events:none;opacity:.85;
  background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 120px 80px,#e4ffcf,transparent),radial-gradient(1.5px 1.5px at 210px 160px,#fff,transparent),radial-gradient(1px 1px at 60px 210px,#ffd1f3,transparent),radial-gradient(2px 2px at 260px 40px,#fff,transparent),radial-gradient(1px 1px at 170px 250px,#fff,transparent);
  background-size:290px 270px;animation:twinkle 4s ease-in-out infinite alternate}
.stars::after{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 50px 120px,#fff,transparent),radial-gradient(1.5px 1.5px at 330px 60px,#c8ffb0,transparent),radial-gradient(1px 1px at 250px 300px,#fff,transparent);background-size:410px 380px;animation:twinkle 3s ease-in-out 1.5s infinite alternate}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
.skyline{opacity:.95}
.blk{animation:blk 1.2s steps(2) infinite}.blk.b2{animation-delay:.3s}.blk.b3{animation-delay:.6s}.blk.b4{animation-delay:.9s}
@keyframes blk{50%{fill:#ff4fd8}}
.print{position:absolute;inset:0;width:1920px;height:1080px;pointer-events:none}
.ink{opacity:.96}

/* the countdown */
.clock{position:absolute;left:560px;top:34px;width:440px;height:126px;box-sizing:border-box;padding:10px 20px;border-radius:18px;text-align:center;z-index:6;
  background:linear-gradient(180deg,rgba(14,8,34,.92),rgba(8,4,22,.92));border:2px solid rgba(125,255,90,.55);box-shadow:inset 0 0 0 5px rgba(8,4,22,.9),inset 0 0 0 6px rgba(125,255,90,.25),0 10px 30px rgba(0,0,0,.4)}
.clock small{display:block;font:800 16px Inter;letter-spacing:4px;color:#ff8be6}
.clock b{display:block;font:900 60px/1.05 "Exo 2",Inter;color:#c8ffb0;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(125,255,90,.55)}
.clock span{display:block;font:700 16px Inter;color:#cfc6f2;letter-spacing:1px;margin-top:2px}
.clock.soon b{color:#fff;animation:pulse 1s ease-in-out infinite}
.clock.drawing b{color:#ff8be6;text-shadow:0 0 18px rgba(255,79,216,.6)}
@keyframes pulse{50%{transform:scale(1.06)}}

/* the 80 numbers: dim bulbs; yours glow cyan; drawn ones light amber; a catch is both */
.kgrid{position:absolute;left:60px;top:192px;width:940px;display:grid;grid-template-columns:repeat(10,1fr);grid-auto-rows:71px;gap:4px;z-index:5}
.cell{position:relative;border:0;padding:0;border-radius:12px;cursor:pointer;font:800 31px "Exo 2",Inter;color:rgba(200,190,255,.5);font-variant-numeric:tabular-nums;
  background:radial-gradient(circle at 50% 40%,#1d1240,#110a2c 70%);box-shadow:inset 0 0 0 1.5px rgba(125,255,90,.16),inset 0 -6px 12px rgba(0,0,0,.35);transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .15s ease}
.cell:nth-child(n+41){top:12px}
.cell:hover{box-shadow:inset 0 0 0 2px rgba(125,255,90,.6),inset 0 -6px 12px rgba(0,0,0,.35);color:#e4ffcf}
.cell:disabled{cursor:default}
.cell:disabled:hover{box-shadow:inset 0 0 0 1.5px rgba(125,255,90,.16),inset 0 -6px 12px rgba(0,0,0,.35);color:rgba(200,190,255,.5)}
.cell.pick,.cell.pick:hover{color:#ffe0f7;background:radial-gradient(circle at 50% 40%,#6a1660,#2e0a33 75%);box-shadow:inset 0 0 0 3px #ff4fd8,0 0 16px rgba(255,79,216,.45);text-shadow:0 0 10px rgba(255,139,230,.8)}
.cell.lit,.cell.lit:hover,.cell.lit:disabled:hover{color:#062a00;text-shadow:none;background:radial-gradient(circle at 45% 35%,#f2ffe8,#9dff7a 45%,#3fc93a 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 0 24px rgba(125,255,90,.8)}
.cell.hit,.cell.hit:hover,.cell.hit:disabled:hover{color:#062a00;background:radial-gradient(circle at 45% 35%,#ffffff,#b8ff9a 45%,#4fe03a 100%);box-shadow:inset 0 0 0 4px #ff4fd8,0 0 0 3px rgba(255,139,230,.55),0 0 34px rgba(255,79,216,.9);z-index:2}
.cell.flash{animation:flash .55s ease-out}
.cell.hit.flash{animation:hitpop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes flash{0%{transform:scale(1.18);filter:brightness(1.6)}100%{transform:scale(1);filter:none}}
@keyframes hitpop{0%{transform:scale(1.45);filter:brightness(1.8)}100%{transform:scale(1);filter:none}}
.cell.miss{opacity:.55}
.cell .star{position:absolute;inset:-14px;border-radius:50%;pointer-events:none;border:3px solid rgba(255,139,230,.9);animation:ring .8s ease-out forwards}
@keyframes ring{from{transform:scale(.4);opacity:1}to{transform:scale(1.25);opacity:0}}

/* keno balls */
.kball{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;font:900 19px Inter;color:#120a2e;font-variant-numeric:tabular-nums;
  background:radial-gradient(circle at 35% 30%,#fff 0,#f6efe0 40%,#d9ccb0 85%,#b8a888 100%);box-shadow:0 3px 6px rgba(0,0,0,.45),inset 0 -3px 5px rgba(0,0,0,.12)}
.kball.hit{box-shadow:0 0 0 3px #ff4fd8,0 0 16px rgba(255,79,216,.8)}
.kball.sm{width:34px;height:34px;font-size:15px}
.rail{position:absolute;left:60px;top:842px;width:940px;height:46px;display:flex;justify-content:space-between;z-index:6}
.rail .slot{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(125,255,90,.22);background:rgba(0,0,0,.25);display:grid;place-items:center}
.rail .slot .kball{animation:land .3s ease-out}
@keyframes land{from{transform:scale(1.3)}to{transform:scale(1)}}
.flyball{position:absolute;left:0;top:0;z-index:60;pointer-events:none;transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.flyball .kball{width:64px;height:64px;font-size:28px}

/* the ball machine: a flying saucer holding the balls in its tractor beam */
.machine{position:absolute;left:1050px;top:26px;width:380px;height:440px;z-index:4}
.saucer{position:absolute;left:10px;top:0;width:360px;height:150px;z-index:2;animation:hover 3.2s ease-in-out infinite;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(125,255,90,.25))}
@keyframes hover{50%{transform:translateY(-7px)}}
.rim circle{fill:#ff4fd8;animation:rim 1s steps(2) infinite}.rim circle:nth-child(even){fill:#7dff5a;animation-delay:.5s}
@keyframes rim{50%{fill:#fff6a8}}
.hatch{animation:hatch 2s ease-in-out infinite alternate}
@keyframes hatch{from{opacity:.6}to{opacity:1}}
.beam{position:absolute;left:80px;top:100px;width:220px;height:262px;overflow:hidden;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(200,255,180,.55),rgba(125,255,90,.22) 55%,rgba(125,255,90,.06));animation:beam 2.4s ease-in-out infinite alternate}
@keyframes beam{from{opacity:.75}to{opacity:1}}
.machine.blow .beam{background:linear-gradient(180deg,rgba(230,255,215,.85),rgba(125,255,90,.4) 55%,rgba(125,255,90,.12));animation-duration:.25s}
.tumble{position:absolute;inset:0}
.tumble .tb{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;display:grid;place-items:center;font:900 13px Inter;color:#120a2e;
  background:radial-gradient(circle at 35% 30%,#fff 0,#f2f7ec 40%,#c7d6bd 85%);box-shadow:0 0 10px rgba(125,255,90,.6);animation:bob var(--d,3s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes bob{0%{transform:translate(0,0)}50%{transform:translate(calc(var(--x1) * .6),var(--y1))}100%{transform:translate(calc(var(--x2) * .6),var(--y2))}}
.machine.blow .tb{animation:blow var(--f,.5s) linear var(--dl,0s) infinite}
@keyframes blow{0%{transform:translate(0,0)}25%{transform:translate(calc(var(--x1) * .5),calc(var(--y1) - 40px))}50%{transform:translate(calc(var(--x2) * .5),calc(var(--y2) - 110px))}75%{transform:translate(calc(var(--x3) * .5),var(--y1))}100%{transform:translate(0,0)}}
.base{position:absolute;left:80px;top:366px;width:220px;height:68px;border-radius:14px;text-align:center;box-sizing:border-box;padding-top:7px;
  background:rgba(14,8,36,.92);border:2px solid #ff4fd8;box-shadow:0 0 18px rgba(255,79,216,.55),inset 0 0 12px rgba(255,79,216,.25)}
.base small{display:block;font:800 12px Orbitron,Inter;letter-spacing:4px;color:#7dff5a}
.base b{display:block;font:900 28px "Exo 2",Inter;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(255,79,216,.8)}

/* the lounge: players, hot and cold, big hits */
.lounge{position:absolute;left:1040px;top:470px;width:400px;height:440px;box-sizing:border-box;padding:16px 20px;border-radius:18px;z-index:5;
  background:rgba(8,4,22,.72);border:1.5px solid rgba(125,255,90,.3);color:#efeaff}
.lounge small{display:block;font:800 14px Inter;letter-spacing:3px;color:#ff8be6;margin-bottom:6px}
.lrow b{font:900 30px Inter;color:#c8ffb0;margin-right:10px}
.lrow span{font-size:24px;letter-spacing:2px}
.hc{margin-top:12px}
.hc > span{display:flex;gap:10px;height:58px}
.hc .kball{width:40px;height:40px;font-size:17px;position:relative;flex:none}
.hc .kball i{position:absolute;left:50%;top:44px;transform:translateX(-50%);font:700 12px Inter;font-style:normal;color:#a99fd0;white-space:nowrap}
.hc.hot .kball{background:radial-gradient(circle at 35% 30%,#fff 0,#eaffdf 40%,#a8f08a 100%);box-shadow:0 0 12px rgba(125,255,90,.75)}
.hc.cold .kball{background:radial-gradient(circle at 35% 30%,#fff 0,#e3ecff 40%,#93aee6 100%);box-shadow:0 0 10px rgba(120,170,255,.55)}
.mem{margin:8px 0 0;font:600 13px/1.35 Inter;color:#a99fd0}
.hits{margin-top:12px}
.hits ol{list-style:none;margin:0;padding:0;font:700 17px Inter;color:#efeaff}
.hits li{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid rgba(125,255,90,.14);white-space:nowrap}
.hits li b{color:#c8ffb0}
.hits li.none{color:#a99fd0;font-weight:600;border:0}

/* right panel */
.panel{position:absolute;left:1480px;top:34px;width:380px;box-sizing:border-box;padding:16px 22px 18px;border-radius:20px;background:rgba(8,4,22,.82);border:1.5px solid rgba(125,255,90,.4);box-shadow:0 14px 40px rgba(0,0,0,.45);z-index:40}
.panel .lbl{font:800 15px Inter;letter-spacing:4px;color:#ff8be6}
.panel .bank{font:900 52px/1.1 "Exo 2",Inter;color:#c8ffb0;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(125,255,90,.35)}
.panel .hand{font:600 17px Inter;color:#cfc6f2;margin:2px 0 6px;min-height:22px}
.panel .hand a{color:#ff8be6;cursor:pointer;text-decoration:underline}
.panel .row{display:flex;justify-content:space-between;font:600 19px Inter;color:#cfc6f2;padding:8px 0 0}
.panel .row b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.panel .rule{height:1px;background:rgba(125,255,90,.3);margin:8px 0}
#last.win{color:#4ade80}#last.lose{color:#ff8a8a}
.catch{text-align:center;padding:4px 0 6px}
.catch small{display:block;font:800 14px Inter;letter-spacing:3px;color:#a99fd0}
.catch b{font:900 64px/1 Inter;color:#ff8be6;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,79,216,.5)}
.catch span{font:800 30px Inter;color:#a99fd0;margin-left:6px}
.catch.bump b{animation:bump .4s cubic-bezier(.2,1.6,.4,1)}
.catch.dim b{color:#a99fd0;text-shadow:none}
.catch.dim small{color:#ff8be6}
@keyframes bump{from{transform:scale(1.5)}to{transform:scale(1)}}
.ptab{width:100%;border-collapse:collapse;font:700 18px Inter;color:#cfc6f2;font-variant-numeric:tabular-nums}
.ptab td{padding:4px 8px;border-top:1px solid rgba(125,255,90,.14)}
.ptab td:last-child{text-align:right;color:#fff}
.ptab th{font:800 13px Inter;letter-spacing:2px;color:#a99fd0;text-align:left;padding:2px 8px 4px}
.ptab th:last-child{text-align:right}
.ptab tr.on td{background:rgba(125,255,90,.2);color:#c8ffb0}
.ptab tr.on td:last-child{color:#c8ffb0}
.ptab tr.got td{background:linear-gradient(90deg,rgba(255,79,216,.35),rgba(125,255,90,.35));color:#fff}
.ptab .empty td{color:#a99fd0;font-weight:600;text-align:left}

/* controls under the board */
.controls{position:absolute;left:40px;width:1400px;top:948px;height:96px;display:flex;justify-content:center;align-items:center;gap:16px;z-index:80}
.controls [hidden]{display:none!important}
.btn{font:900 24px Inter;letter-spacing:1px;padding:16px 26px;border-radius:16px;border:2px solid rgba(125,255,90,.55);background:rgba(14,8,36,.95);color:#f6f2ff;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.45);white-space:nowrap}
.btn:hover{background:rgba(36,20,80,.98)}
.btn:active{transform:translateY(2px)}
.btn.primary{background:linear-gradient(180deg,#e4ffcf,#7dff5a 55%,#2fbf3a);border-color:#1f7a1f;color:#0a1f02}
.btn.pink{background:linear-gradient(180deg,#ffb3ee,#ff4fd8 60%,#c2189b);border-color:#8a0f6e;color:#2a0322}
.btn small{display:block;font:800 15px Inter;letter-spacing:.5px;opacity:.85;margin-top:2px}
.btn:disabled{opacity:.4;cursor:default}
.btn i{font-style:normal;color:#ff8be6;margin-left:4px}
.grp{display:flex;align-items:center;gap:6px}
.grp small{font:800 14px Inter;letter-spacing:3px;color:#a99fd0;margin-right:4px}
.grp .arr{padding:14px 16px;min-width:52px}
.grp.bet b{font:900 28px Inter;color:#c8ffb0;min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.runs button{font:900 22px Inter;min-width:52px;padding:14px 10px;border-radius:12px;border:2px solid rgba(125,255,90,.4);background:rgba(14,8,36,.95);color:#cfc6f2;cursor:pointer}
.runs button.on{background:linear-gradient(180deg,#ffb3ee,#ff4fd8 60%,#c2189b);border-color:#8a0f6e;color:#2a0322}
.runs button:disabled{opacity:.4;cursor:default}

.banner{position:absolute;left:530px;top:496px;text-align:center;line-height:1.05;transform:translate(-50%,-50%) scale(.8);opacity:0;transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .25s ease;z-index:70;font:900 46px Inter;padding:12px 30px 14px;border-radius:18px;background:rgba(8,4,22,.92);box-shadow:0 10px 30px rgba(0,0,0,.5);white-space:nowrap;pointer-events:none}
.banner small{display:block;font:800 19px Inter;letter-spacing:2px;opacity:.92;margin-bottom:4px}
.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.banner.win{color:#4ade80}.banner.lose{color:#ff8a8a}.banner.push{color:#e2e8f0}.banner.info{color:#ff8be6}
.banner.big{color:#0a1f02;background:linear-gradient(180deg,#f2ffe8,#7dff5a);box-shadow:0 0 0 4px #ff8be6,0 0 60px rgba(125,255,90,.9)}
.banner.big small{color:#0a2a02}
.tip{position:absolute;left:530px;top:496px;transform:translate(-50%,-50%);font:800 26px Inter;color:#efeaff;z-index:7;padding:12px 24px;border-radius:14px;background:rgba(8,4,22,.85);pointer-events:none;white-space:nowrap}
.tip:empty{display:none}
.note{position:absolute;left:530px;top:900px;transform:translateX(-50%);padding:7px 18px;border-radius:12px;background:rgba(8,4,22,.92);font:700 20px Inter;color:#e2e8f0;z-index:60;width:max-content;max-width:940px;text-align:center}
.note.ok{color:#86efac}.note.miss{color:#fcd34d}.note.hint{color:#ff8be6}
.note[hidden]{display:none}
.watch{position:absolute;left:960px;top:14px;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:18px;padding:10px 12px 10px 24px;border-radius:16px;
  background:rgba(8,4,22,.96);border:2px solid #ff4fd8;box-shadow:0 0 30px rgba(255,79,216,.5);font:800 24px Inter;color:#ffe0f7;animation:drop .35s cubic-bezier(.2,1.4,.4,1)}
.watch[hidden]{display:none}
.watch .btn{font-size:20px;padding:10px 20px}
@keyframes drop{from{transform:translate(-50%,-120%)}to{transform:translate(-50%,0)}}

/* panel: mode switch, buttons, fast draw */
.mode{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(0,0,0,.35);margin-bottom:12px}
.mode button{flex:1;padding:9px 0;border:0;border-radius:9px;background:none;color:#cfc6f2;font:800 14px Inter;letter-spacing:1.5px;cursor:pointer}
.mode button.on{background:linear-gradient(180deg,#e4ffcf,#7dff5a 55%,#2fbf3a);color:#0a1f02}
.mode button[data-mode=live]::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff4d6d;margin-right:6px;vertical-align:1px;box-shadow:0 0 8px #ff4d6d;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.mode button:disabled{cursor:default}
.trainer{display:flex;align-items:center;gap:10px;margin-top:10px;font:700 18px Inter;color:#c8ffb0;cursor:pointer}
.trainer[hidden]{display:none}
.trainer input{width:22px;height:22px;accent-color:#7dff5a}
.pbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pbtn{padding:10px 0;border-radius:10px;border:1.5px solid rgba(125,255,90,.5);background:rgba(0,0,0,.3);color:#e4ffcf;font:800 15px Inter;letter-spacing:1.5px;cursor:pointer}
.pbtn:hover{background:rgba(125,255,90,.12)}

/* sheets inside the table: game over, Top 25, stats, pays, results */
.sheet{position:absolute;inset:0;z-index:300;display:grid;place-items:center;background:rgba(0,0,0,.6)}
.sheet[hidden]{display:none}
.sheet .box{position:relative;width:820px;max-height:92%;overflow:auto;padding:34px 40px;border-radius:24px;box-sizing:border-box;background:#0c0624;border:1.5px solid rgba(125,255,90,.55);box-shadow:0 30px 80px rgba(0,0,0,.6);font:500 24px Inter;color:#efeaff}
.sheet .x{position:absolute;right:16px;top:12px;width:52px;height:52px;border:0;background:none;color:#cfc6f2;font:400 44px/1 Inter;cursor:pointer}
.sheet h2{margin:0 0 4px;font:900 38px Orbitron,Inter;color:#7dff5a;letter-spacing:1px;text-shadow:0 0 14px rgba(125,255,90,.5)}
.sheet .sub{margin:4px 0 14px;color:#a99fd0;font-size:21px}
.sheet .final{font:900 72px Inter;color:#c8ffb0;margin:4px 0}
.sheet .form{display:flex;gap:12px;margin:16px 0}
.sheet .form input,.sheet .form select{font:800 28px Inter;padding:12px 16px;border-radius:12px;border:2px solid #7dff5a;background:#05020f;color:#fff;min-width:0}
.sheet .form input{width:150px;text-transform:uppercase;letter-spacing:6px}
.sheet .row2{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.sheet .btn{font-size:22px;padding:14px 24px}
.lb{width:100%;border-collapse:collapse;font-size:23px}
.lb td,.lb th{padding:9px 6px;border-top:1px solid rgba(125,255,90,.18)}
.lb th{text-align:left;color:#c8ffb0;font-weight:800;padding-top:18px}
.lb td:first-child{color:#a99fd0;width:52px}
.lb td:last-child{text-align:right;font-weight:800;color:#c8ffb0;font-variant-numeric:tabular-nums}
.lb.pays td:first-child{width:auto;color:#efeaff}
.lb.pays td{font-variant-numeric:tabular-nums}
.lb.pays td.odds{color:#a99fd0;text-align:right;font-weight:600;font-size:19px}
.lb tr.me td{background:rgba(125,255,90,.16)}
.lb .cc{font:700 14px Inter;padding:2px 4px;border-radius:4px;background:rgba(255,255,255,.12)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 16px}
.tiles div{padding:12px;border-radius:14px;background:rgba(0,0,0,.35)}
.tiles small{display:block;font-size:16px;color:#a99fd0}
.tiles b{font-size:30px;color:#c8ffb0}.tiles b.acc{color:#ff8be6}
.spotpick{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.spotpick button{font:800 20px Inter;min-width:46px;padding:8px 0;border-radius:10px;border:1.5px solid rgba(125,255,90,.4);background:rgba(0,0,0,.3);color:#cfc6f2;cursor:pointer}
.spotpick button.on{background:#7dff5a;color:#0a1f02;border-color:#7dff5a}
.draws{list-style:none;margin:0;padding:0}
.draws li{padding:12px 0;border-top:1px solid rgba(125,255,90,.18)}
.draws li header{display:flex;justify-content:space-between;font:800 19px Inter;color:#c8ffb0;margin-bottom:8px}
.draws li header span{color:#a99fd0;font-weight:600}
.draws .bs{display:flex;flex-wrap:wrap;gap:4px}
.draws .kball{width:32px;height:32px;font-size:14px}
.tres{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.tres span{font:800 17px Inter;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.35);color:#cfc6f2}
.tres span.w{background:rgba(74,222,128,.18);color:#86efac}

/* ---- an upright phone: the 780x1400 table ---- */
.stage.tall{background:radial-gradient(700px 500px at 50% 0,rgba(125,40,200,.42) 0,rgba(125,40,200,0) 70%),radial-gradient(700px 500px at 0 100%,rgba(20,120,140,.28) 0,rgba(20,120,140,0) 70%),radial-gradient(900px 1300px at 50% 60%,#120a2e 0,#08041a 55%,#04020c 100%)}
.stage.tall .print,.stage.tall .hc,.stage.tall .mem{display:none}
/* on a phone the saucer waits off to the right, flies in over the board for a draw, beams the balls down, then leaves */
.stage.tall .machine{left:200px;top:254px;z-index:30;pointer-events:none;transform-origin:50% 0;transform:translateX(640px) scale(.5);transition:transform .9s cubic-bezier(.3,.7,.3,1)}
.stage.tall .machine.blow{transform:translateX(0) scale(.5)}
.stage.tall .beam{height:130px}
.stage.tall .machine .base{display:none}
.stage.tall .panel{left:12px;top:12px;width:756px;padding:12px 16px 12px}
.stage.tall .panel .mode button{font-size:19px;padding:11px 0}
.stage.tall .panel .lbl{font-size:15px}
.stage.tall .panel .bank{font-size:46px}
.stage.tall .panel .hand{font-size:18px;max-width:420px}
.stage.tall .panel .rule,.stage.tall .panel .row{display:none}
.stage.tall .pbtns{grid-template-columns:repeat(4,1fr)}
.stage.tall .pbtn{font-size:17px;padding:12px 0}
.stage.tall .trainer{position:absolute;right:6px;top:1256px;margin:0;font-size:19px}
.stage.tall .clock{left:446px;top:80px;width:310px;height:116px;padding:8px 12px;z-index:45}
.stage.tall .clock b{font-size:50px}
.stage.tall .clock small{font-size:14px;letter-spacing:3px}
.stage.tall .clock span{font-size:15px}
.stage.tall .kgrid{left:12px;top:386px;width:756px;grid-auto-rows:62px}
.stage.tall .cell{font-size:27px;border-radius:10px}
.stage.tall .rail{left:12px;top:944px;width:756px;height:112px;display:grid;grid-template-columns:repeat(10,52px);justify-content:space-between;row-gap:8px}
.stage.tall .rail .slot,.stage.tall .rail .kball{width:52px;height:52px}
.stage.tall .rail .kball{font-size:22px}
.stage.tall .catch{position:absolute;left:0;top:1058px;width:236px;padding:6px 0;border-radius:16px;background:rgba(8,4,22,.82);border:1.5px solid rgba(125,255,90,.3)}
.stage.tall .catch b{font-size:56px}
.stage.tall .catch span{font-size:26px}
.stage.tall .catch small{font-size:13px;letter-spacing:2px}
.stage.tall .ptab{position:absolute;left:248px;top:1058px;width:508px;display:block;font-size:16px;background:rgba(8,4,22,.82);border:1.5px solid rgba(125,255,90,.3);border-radius:14px;overflow:hidden;box-sizing:border-box;padding:4px 6px}
.stage.tall .ptab tbody{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
.stage.tall .ptab tr{display:flex;justify-content:space-between}
.stage.tall .ptab tr:first-child,.stage.tall .ptab tr.empty{grid-column:1/-1}
.stage.tall .ptab td,.stage.tall .ptab th{display:block;padding:3px 6px;border:0}
.stage.tall .ptab tr.on,.stage.tall .ptab tr.got{border-radius:8px;overflow:hidden}
.stage.tall .lounge{left:12px;top:1190px;width:756px;height:auto;padding:8px 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.stage.tall .lounge small{font-size:12px;margin-bottom:2px}
.stage.tall .lrow b{font-size:24px}.stage.tall .lrow span{font-size:20px}
.stage.tall .hits{margin:0}
.stage.tall .hits li{border:0;padding:0;font-size:16px}
.stage.tall .hits li:nth-child(n+2){display:none}
.stage.tall .controls{left:0;width:780px;top:1272px;height:232px;flex-wrap:wrap;align-content:center;gap:12px 12px;padding:0 10px;box-sizing:border-box}
.stage.tall .btn{font-size:25px;padding:16px 22px}
.stage.tall .grp .arr{padding:16px 16px}
.stage.tall #play,.stage.tall #stop,.stage.tall #reset,.stage.tall #newgame{flex:1 1 60%}
.stage.tall .banner{left:390px;top:666px;font-size:40px;max-width:740px}
.stage.tall .tip{left:390px;top:666px;font-size:26px}
.stage.tall .note{left:390px;top:1236px;font-size:18px;padding:5px 14px;max-width:740px;white-space:normal}
.stage.tall .watch{left:390px;font-size:21px;width:max-content}
.stage.tall .sheet .box{width:740px;max-height:94%;padding:30px 28px}
.stage.tall .tiles{grid-template-columns:repeat(2,1fr)}
.stage,.sheet h2,.sheet .final{font-variant-numeric:lining-nums}

/* ---- a tablet held upright: the 1080x1440 table (the phone layout, wider: a bigger board, the 20 balls in one row) ---- */
.stage.mid .panel{left:16px;top:16px;width:1048px;padding:14px 20px}
.stage.mid .panel .mode button{font-size:21px;padding:12px 0}
.stage.mid .panel .bank{font-size:56px}
.stage.mid .panel .hand{font-size:20px;max-width:560px}
.stage.mid .pbtn{font-size:19px;padding:13px 0}
.stage.mid .clock{left:660px;top:86px;width:390px;height:126px}
.stage.mid .clock b{font-size:56px}
.stage.mid .machine{left:350px;top:250px;transform:translateX(900px) scale(.62)}
.stage.mid .machine.blow{transform:translateX(0) scale(.62)}
.stage.mid .beam{height:110px}
.stage.mid .kgrid{left:16px;top:384px;width:1048px;grid-auto-rows:70px}
.stage.mid .cell{font-size:32px}
.stage.mid .rail{left:16px;top:998px;width:1048px;height:48px;display:flex;justify-content:space-between}
.stage.mid .rail .slot,.stage.mid .rail .kball{width:48px;height:48px}
.stage.mid .rail .kball{font-size:20px}
.stage.mid .catch{top:1046px;width:300px}
.stage.mid .ptab{left:312px;top:1046px;width:720px;font-size:18px}
.stage.mid .lounge{left:16px;top:1172px;width:1048px}
.stage.mid .trainer{top:1226px;right:8px}
.stage.mid .controls{width:1080px;top:1252px;height:180px;padding:0 16px}
.stage.mid #play,.stage.mid #stop,.stage.mid #reset,.stage.mid #newgame{flex:0 1 auto;min-width:340px}
.stage.mid .banner{left:540px;top:680px;font-size:46px}
.stage.mid .tip{left:540px;top:680px}
.stage.mid .note{left:540px;top:1140px;max-width:1000px}
.stage.mid .watch{left:540px}
.stage.mid .sheet .box{width:900px}