/* 21 prieš Vaidotą. One green felt table with a wooden rail; Vaidotas stands behind it, the shoe on his left, and every
   player sits round the arc of the table.
   Card sizes follow the stage (a size container), so the table looks the same on a phone and on a screen. */
.bj-panel{--brass:#e6b95c;--felt:#17663d;--felt-dark:#0a3a22;--win:#62d873;--bust:#ff5a4a;--gold:#ffd25a;display:grid;gap:10px;background:radial-gradient(ellipse at 50% 0,#2d1b0e,#150e08 70%)}
.bj-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bj-head>div:first-child{flex:1;min-width:0}
.bj-head h1{margin:2px 0 0;font:700 clamp(26px,5vw,40px)/1.05 Georgia,"Times New Roman",serif}
.bj-head h1 em{color:var(--gold);font-style:italic}
.bj-track{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.bj-track li{display:grid;place-items:center;min-width:28px;height:28px;padding:0 4px;border-radius:14px;border:1px solid #ffffff2e;background:#ffffff10;color:#d8c39c;font:800 12px/1 system-ui;transition:background .3s,transform .3s,border-color .3s}
.bj-track li.current{transform:scale(1.15);border-color:var(--gold);box-shadow:0 0 12px #ffd25a88;color:#fff}
.bj-track li.won{background:#62d87333;border-color:#62d873aa;color:#c9ffd0}
.bj-track li.lost{background:#ff5a4a22;border-color:#ff5a4a77;color:#ffb4aa}

.bj-stage{position:relative;height:clamp(300px,52dvh,540px);border-radius:16px;overflow:hidden;border:1px solid #7a5530;background:#0d0805;box-shadow:inset 0 0 50px #000a,0 10px 30px #0007;user-select:none;-webkit-user-select:none;container-type:size;--dw:min(11.5cqw,16.5cqh)}
/* The bar behind him: warm shelf light and blurred bottles. */
.bj-backdrop{position:absolute;inset:0;background:
  radial-gradient(circle at 12% 18%,#ffb74a33 0 3%,transparent 9%),radial-gradient(circle at 26% 10%,#ff8a3a2b 0 2%,transparent 7%),radial-gradient(circle at 74% 14%,#ffcf6a2e 0 3%,transparent 9%),radial-gradient(circle at 88% 22%,#ff9d4a26 0 2%,transparent 8%),radial-gradient(circle at 60% 6%,#fff1c022 0 2%,transparent 6%),
  linear-gradient(transparent 27%,#2a170b 27.5%,#3b2310 29%,transparent 29.5%),
  radial-gradient(ellipse at 50% 0,#4a2c14,#1a0f07 60%,#0d0805)}
.bj-host{position:absolute;z-index:1;left:50%;top:1%;height:98%;aspect-ratio:2/3;transform:translateX(-50%);background:no-repeat 0 0/400% 400%;filter:drop-shadow(0 10px 16px #000c);pointer-events:none}
.bj-rail{position:absolute;z-index:2;left:-12%;right:-12%;top:40%;bottom:-40%;border-radius:50% 50% 0 0/24% 24% 0 0;padding:clamp(8px,2.2cqh,16px);background:linear-gradient(#a8743b,#6a4120 40%,#3d230f);box-shadow:0 -8px 24px #000b,inset 0 3px 0 #d39b5c,inset 0 -2px 0 #2a170a}
.bj-felt{position:relative;width:100%;height:100%;border-radius:inherit;overflow:hidden;background:
  radial-gradient(ellipse at 50% 30%,#22894f,var(--felt) 40%,var(--felt-dark) 85%);box-shadow:inset 0 0 40px #000a,inset 0 10px 18px #0008}
.bj-felt::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 30% 40%,#ffffff05 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.bj-felt::after{content:"";position:absolute;left:10%;right:10%;top:12%;height:120%;border-radius:50%;border:2px solid #ffd25a40}
.bj-print{position:absolute;left:0;top:0;width:100%;height:60%;overflow:visible}
.bj-print text{fill:#ffd25a66;font:700 22px Georgia,serif;letter-spacing:4px}
.bj-shoe{position:absolute;z-index:3;right:4%;top:27%;width:calc(var(--dw) * 1.25);aspect-ratio:1.1;border-radius:8px 8px 6px 6px;background:linear-gradient(135deg,#3a2414,#1b0f07);border:2px solid #8a5a2c;box-shadow:0 8px 16px #000b;transform:perspective(300px) rotateX(18deg) rotate(-8deg)}
.bj-shoe i{position:absolute;left:14%;right:10%;top:-12%;height:58%;border-radius:4px;background:repeating-linear-gradient(45deg,#7b1424 0 4px,#92202f 4px 8px);border:2px solid #f3e6c8;box-shadow:0 2px 4px #000a}

/* The hands. */
.bj-hand{position:absolute;z-index:4;left:50%;display:flex;align-items:center;gap:10px;transform:translateX(-50%)}
.bj-dealer{top:40%;--w:var(--dw)}
/* A seat: the cards stand on the seat's point, the plate with the face, the name and the total hangs just under it.
   Plates are a layer above all cards, so nobody's name or total is ever covered. */
.bj-stage[data-size=l]{--sw:min(11.5cqw,17.5cqh)}
.bj-stage[data-size=m]{--sw:min(9.6cqw,15cqh)}
.bj-stage[data-size=s]{--sw:min(7.6cqw,12.5cqh)}
.bj-spot{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-100%);--w:var(--sw);transition:filter .3s}
.bj-spot .bj-cards{justify-content:center;min-width:calc(var(--w) * 1.6);min-height:calc(var(--w) * 1.4)}
.bj-plate{position:absolute;z-index:7;transform:translate(-50%,4px);display:flex;align-items:center;gap:4px;--w:var(--sw);--left:1;max-width:calc(var(--w) * 3.2);padding:2px 6px 2px 2px;border-radius:999px;background:#08170fd9;border:1px solid #ffffff22;box-shadow:0 3px 8px #0008;white-space:nowrap}
.bj-avatar{position:relative;flex:none;width:clamp(20px,7.5cqh,32px);aspect-ratio:1;border-radius:50%}
.bj-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #c79f54;display:block}
.bj-name{min-width:0;overflow:hidden;text-overflow:ellipsis;font:700 clamp(9px,3cqh,12px)/1 system-ui;color:#f1dcb4}
.bj-plate .bj-total{min-width:0;padding:2px 6px;border-width:1px;font-size:clamp(10px,3.4cqh,14px)}
.bj-stage[data-size=s] .bj-name{display:none}
.bj-plate.is-me{border-color:var(--gold);background:#2a1d06e6}
.bj-plate.is-me .bj-name{color:var(--gold)}
/* Whose turn it is: a spotlight under the seat and a time ring round the face. */
.bj-spot::before{content:"";position:absolute;z-index:-1;left:50%;top:80%;width:calc(var(--w) * 3.4);aspect-ratio:1.4;border-radius:50%;transform:translate(-50%,-50%) scale(.6);background:radial-gradient(closest-side,#ffd25a55,#ffd25a18 60%,transparent);opacity:0;transition:opacity .3s,transform .3s}
.bj-spot.is-active::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.bj-plate.is-active .bj-avatar::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--left) * 360deg),#ffffff22 0);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 3px))}
.bj-plate.is-active{border-color:var(--gold);box-shadow:0 0 14px #ffd25a88}
.bj-spot.is-active{z-index:5;filter:drop-shadow(0 0 10px #ffd25a55)}
.bj-plate.is-next{border-color:#ffd25a88}
.bj-spot.is-bust .bj-card{filter:grayscale(.5) brightness(.8)}
.bj-plate.is-bust .bj-total{border-color:var(--bust);color:#ffc1b8;background:#3a0d0ae6}
.bj-yourturn{position:absolute;z-index:9;left:50%;top:62%;padding:6px 18px;white-space:nowrap;border-radius:12px;background:linear-gradient(#ffd25a,#e9a516);color:#2a1604;font:900 clamp(18px,7cqh,34px)/1 Georgia,serif;letter-spacing:.06em;box-shadow:0 8px 24px #000a;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}
.bj-yourturn.show{animation:bj-yourturn 1.6s cubic-bezier(.2,1.4,.4,1) forwards}
.bj-cards{display:flex;align-items:flex-end;min-width:var(--w);min-height:calc(var(--w) * 1.4)}
.bj-card{position:relative;width:var(--w);aspect-ratio:5/7;flex:none;perspective:600px;--dx:0px;--dy:0px}
.bj-card+.bj-card{margin-left:calc(var(--w) * -0.26)}
.bj-cards[data-tight=x] .bj-card+.bj-card{margin-left:calc(var(--w) * -0.5)}
.bj-cards[data-tight=xx] .bj-card+.bj-card{margin-left:calc(var(--w) * -0.62)}
/* Overlapped cards show their rank and suit in the part left uncovered. */
.bj-cards[data-tight] .bj-card:not(:last-child) :is(.bj-rank,.bj-suit){right:auto;left:5%;font-size:calc(var(--w) * .36)}
.bj-cards[data-tight] .bj-card:not(:last-child) .bj-suit{top:40%}
.bj-cards .bj-card:nth-child(2){transform:rotate(2deg) translateY(-2%)}
.bj-cards .bj-card:nth-child(3){transform:rotate(4deg) translateY(-4%)}
.bj-cards .bj-card:nth-child(4){transform:rotate(6deg) translateY(-5%)}
.bj-cards .bj-card:nth-child(n+5){transform:rotate(8deg) translateY(-6%)}
.bj-face,.bj-back{position:absolute;inset:0;border-radius:calc(var(--w) * .09);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .55s cubic-bezier(.3,1.3,.5,1)}
.bj-face{background:linear-gradient(160deg,#fffdf7,#f3ead6);box-shadow:0 4px 10px #000a,inset 0 0 0 1px #0000001f;color:#16120d;overflow:hidden}
.bj-card.is-red .bj-face{color:#c3122d}
.bj-back{transform:rotateY(180deg);background:
  radial-gradient(circle at 50% 50%,#ffd25a 0 9%,transparent 10%),
  repeating-linear-gradient(45deg,#7b1424 0 5px,#92202f 5px 10px),#7b1424;box-shadow:0 4px 10px #000a,inset 0 0 0 calc(var(--w) * .05) #f3e6c8,inset 0 0 0 calc(var(--w) * .07) #7b1424,inset 0 0 0 calc(var(--w) * .08) #ffd25a99}
.bj-card.is-down .bj-face{transform:rotateY(180deg)}
.bj-card.is-down .bj-back{transform:rotateY(0)}
.bj-card.is-turned .bj-face{animation:bj-turn .6s cubic-bezier(.3,1.3,.5,1)}
.bj-rank{position:absolute;left:2%;right:18%;top:5%;text-align:center;font:700 calc(var(--w) * .5)/1 "Arial Narrow",Arial,system-ui,sans-serif;letter-spacing:-.06em}
.bj-suit{position:absolute;left:2%;right:18%;top:48%;text-align:center;font-size:calc(var(--w) * .48);line-height:1}
.bj-card .bj-face{display:block}
.bj-card.is-dealt{animation:bj-deal .5s cubic-bezier(.2,.8,.3,1) both}
.bj-total{min-width:2.4em;padding:4px 10px;border-radius:999px;background:#0b1f14e6;border:2px solid #ffd25a99;color:#fff6dc;font:800 clamp(14px,4.2cqh,22px)/1 system-ui;text-align:center;box-shadow:0 4px 10px #0009;font-variant-numeric:tabular-nums}
.bj-total:empty{display:none}
.bj-hand.is-bust .bj-total{border-color:var(--bust);color:#ffc1b8;background:#3a0d0ae6}
.bj-hand.is-bust .bj-card{filter:grayscale(.5) brightness(.8)}
.bj-stamp{position:absolute;z-index:6;left:50%;top:0;padding:2px 8px;border:3px solid currentColor;border-radius:8px;transform:translate(-50%,-50%) rotate(-10deg);font:900 clamp(11px,4.2cqh,24px)/1 Georgia,serif;letter-spacing:.06em;white-space:nowrap;text-shadow:0 2px 0 #0008;background:#0008;pointer-events:none;animation:bj-stamp .45s cubic-bezier(.2,1.6,.4,1) both}
.bj-stamp:empty{display:none}
.bj-stamp.is-bust{color:var(--bust)}
.bj-stamp.is-lose{color:#ff9b8c}
.bj-stamp.is-push{color:#d9d2c0}
.bj-stamp.is-win{color:var(--win)}
.bj-stamp.is-blackjack,.bj-stamp.is-bj{color:var(--gold);animation:bj-stamp .45s cubic-bezier(.2,1.6,.4,1) both,bj-shine 1.2s ease-in-out .45s infinite alternate}
.bj-dealer .bj-stamp{left:calc(var(--w) * .8)}
.bj-spot .bj-stamp{top:62%;padding:1px 6px;border-width:2px;border-radius:6px;font-size:clamp(9px,3.4cqh,17px);letter-spacing:.03em}
.bj-spot .bj-stamp.is-win,.bj-spot .bj-stamp.is-blackjack{font-size:clamp(12px,4.6cqh,22px)}
.bj-spot .bj-stamp.is-win{color:var(--gold);border-color:var(--win);background:#0f3a1fd9}
@container (max-width:430px){.bj-name{display:none}}
.bj-bubble{position:absolute;z-index:8;right:3%;top:4%;max-width:min(36%,320px);padding:8px 12px;border-radius:14px 14px 4px 14px;background:#fff6e3;color:#2a1708;box-shadow:0 8px 24px #0009;pointer-events:none}
.bj-bubble p{margin:0;font:700 clamp(12px,4.2cqh,17px)/1.25 Georgia,serif;text-wrap:balance}
.bj-bubble.pop{animation:bj-pop .3s cubic-bezier(.2,1.5,.4,1)}
.bj-clock{position:absolute;z-index:8;left:3%;top:4%;width:clamp(40px,14cqh,58px);aspect-ratio:1;display:grid;place-items:center;--left:1}
.bj-clock[hidden]{display:none}
.bj-clock svg{position:absolute;inset:0;transform:rotate(-90deg)}
.bj-clock circle{fill:#1b110acc;stroke:#ffffff22;stroke-width:4}
.bj-clock .bj-clock-run{fill:none;stroke:var(--gold);stroke-dasharray:106.8;stroke-dashoffset:calc(106.8 * (1 - var(--left)));stroke-linecap:round}
.bj-clock span{position:relative;color:#ffe9bd;font:800 clamp(15px,5.5cqh,22px)/1 Georgia,serif;font-variant-numeric:tabular-nums}
.bj-clock.urgent .bj-clock-run{stroke:var(--bust)}
.bj-clock.urgent{animation:bj-urgent .45s ease-in-out infinite alternate}
.bj-stage[data-phase=dealer] .bj-dealer,.bj-stage[data-phase=closing] .bj-dealer{filter:drop-shadow(0 0 14px #ffd25a66)}

/* The two big buttons. */
.bj-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bj-controls[hidden]{display:none}
.bj-controls button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;border-radius:14px;border:0;font:900 20px/1 Georgia,serif;letter-spacing:.03em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .1s,filter .2s,opacity .2s}
.bj-controls button i{font-style:normal;font-size:1.25em}
.bj-hit{background:linear-gradient(#ffd25a,#e9a516);color:#2a1604;box-shadow:0 5px 0 #8a5b08,0 10px 20px #0008}
.bj-stand{background:linear-gradient(#2f6b47,#1a4a2e);color:#eaffef;box-shadow:0 5px 0 #0e2b1a,0 10px 20px #0008;border:1px solid #62d87355!important}
.bj-controls button:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #0008}
.bj-controls button:disabled{opacity:.35;filter:grayscale(.6);cursor:default}
.bj-controls[data-state=turn] button:not(:disabled){animation:bj-ready 1.4s ease-in-out infinite alternate}
/* Choosing in advance: the buttons are dimmer, the chosen one is ticked and outlined. */
.bj-controls[data-state=plan] button{filter:saturate(.55) brightness(.85)}
.bj-controls[data-state=plan] button.is-planned{filter:none;outline:3px solid #fff;outline-offset:2px}
.bj-controls button.is-planned::after{content:"✓ iš anksto";margin-left:6px;padding:3px 6px;border-radius:6px;background:#0008;color:#fff;font:800 11px/1 system-ui;letter-spacing:0}

/* Everybody's seat: face, cards, total, points and five dots for the five hands. */
.bj-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin:0;padding:0;list-style:none}
.bj-seat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pic name pts" "pic dots total";align-items:center;column-gap:7px;row-gap:2px;padding:4px 8px 4px 4px;border-radius:12px;border:2px solid transparent;background:#ffffff0c;transition:background .25s,border-color .25s}
.bj-seat img{grid-area:pic;width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid #c79f54aa;background:#2b1b0e}
.bj-seat>b{grid-area:name;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#f1dcb4}
.bj-seat>b em{color:var(--brass);font-style:normal;font-size:10px}
.bj-seat output{grid-area:pts;font:900 15px/1 Georgia,serif;color:var(--gold)}
.bj-seat output::after{content:" tšk.";font:600 9px system-ui;color:#c9b07c}
.bj-seat-total{grid-area:total;font:800 11px/1 system-ui;color:#e9d5ab;white-space:nowrap}
.bj-dots{grid-area:dots;display:flex;gap:3px;margin:0;padding:0;list-style:none}
.bj-dots li{width:8px;height:8px;border-radius:50%;background:#ffffff1c}
.bj-dots li.won{background:var(--win);box-shadow:0 0 6px #62d873}
.bj-dots li.lost{background:#a1887a}
.bj-dots li.bust{background:var(--bust)}
.bj-dots li.push{background:#e9c46a}
.bj-track li.push{background:#e9c46a33;border-color:#e9c46aaa;color:#fff1c4}
.bj-spot .bj-stamp.is-push{color:#ffe6a6;border-color:#e9c46a;background:#2e2410d9}
.bj-seat.is-me{border-color:#ffd25a66;background:#ffd25a14}
.bj-seat[data-state=is-thinking]{border-color:#ffd25a99}
.bj-seat[data-state=is-thinking] .bj-seat-total{color:var(--gold)}
.bj-seat[data-state=is-bust]{background:#8c2b2038}
.bj-seat[data-state=is-bust] .bj-seat-total{color:#ff9b8c}
.bj-seat[data-state=is-win],.bj-seat[data-state=is-blackjack]{background:#62d87322;border-color:#62d87388}
.bj-seat[data-state=is-win] .bj-seat-total,.bj-seat[data-state=is-blackjack] .bj-seat-total{color:var(--gold)}
.bj-seat.is-lowest img{box-shadow:0 0 0 2px var(--bust),0 0 10px var(--bust)}
.bj-feedback{margin:0;min-height:2.4em;color:#cdb68d;font-size:13px;line-height:1.35;text-align:center}

@keyframes bj-deal{0%{transform:translate(var(--dx),var(--dy)) rotate(-30deg) scale(.6);opacity:0}12%{opacity:1}100%{opacity:1}}
@keyframes bj-turn{0%{transform:rotateY(180deg) scale(1.15)}60%{transform:rotateY(0) scale(1.15)}100%{transform:none}}
@keyframes bj-stamp{from{transform:translate(-50%,-50%) rotate(-10deg) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) rotate(-10deg) scale(1);opacity:1}}
@keyframes bj-shine{to{text-shadow:0 0 18px #ffd25a,0 2px 0 #0008;box-shadow:0 0 22px #ffd25a88}}
@keyframes bj-pop{from{transform:scale(.85)}to{transform:none}}
@keyframes bj-urgent{to{transform:scale(1.08)}}
@keyframes bj-ready{to{filter:brightness(1.12)}}
@keyframes bj-blink{50%{opacity:0}}
@keyframes bj-yourturn{0%{transform:translate(-50%,-50%) scale(0);opacity:0}20%{transform:translate(-50%,-50%) scale(1.1);opacity:1}30%,80%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(.9);opacity:0}}
@media(min-width:900px){
  .bj-panel{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);grid-template-areas:"pause pause" "head head" "stage controls" "stage players" "feedback players";align-items:start;column-gap:18px}
  .bj-panel>.bj-pause{grid-area:pause}
  .bj-panel>.bj-head{grid-area:head}
  .bj-panel>.bj-stage{grid-area:stage;height:clamp(380px,62dvh,560px)}
  .bj-panel>.bj-controls{grid-area:controls}
  .bj-panel>.bj-players{grid-area:players;grid-template-columns:1fr}
  .bj-panel>.bj-feedback{grid-area:feedback}
}
@media(max-width:560px){.bj-track li{min-width:24px;height:24px}.bj-bubble{max-width:44%}.bj-players{grid-template-columns:1fr 1fr}.bj-controls button{min-height:54px;font-size:18px}}
@media(prefers-reduced-motion:reduce){.bj-card.is-dealt,.bj-stamp,.bj-clock.urgent,.bj-controls button{animation:none!important}}

/* Practice page against bots (/?blackjack-preview). */
.bj-practice{display:grid;gap:14px;max-width:760px;margin:0 auto}
.bj-practice.is-playing{max-width:1180px}
.bj-practice-setup{display:grid;gap:12px;padding:18px;border:1px solid #7a5530;border-radius:16px;background:#1b110acc}
.bj-practice-setup h1{margin:0;font:700 clamp(26px,5vw,40px)/1.05 Georgia,serif}
.bj-practice-setup h1 em{color:#ffd25a;font-style:italic}
.bj-practice-setup p{margin:0;color:#d9c093}
.bj-practice-setup .bj-options{display:flex;flex-wrap:wrap;gap:10px}
.bj-practice-setup label{display:grid;gap:4px;font:600 12px/1.2 system-ui;color:#e9d3a8}
.bj-practice-setup select{min-height:40px;padding:4px 8px;border-radius:10px;border:1px solid #7a5530;background:#120b06;color:#ffe9bd;font:600 14px system-ui}
.bj-practice-actions{display:flex;flex-wrap:wrap;gap:8px}
.bj-practice-note{margin:0;color:#a58a63;font-size:12px;text-align:center}
.bj-practice-results{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.bj-practice-results li{display:grid;grid-template-columns:28px 30px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:#ffffff0c;color:#f1dcb4}
.bj-practice-results li img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.bj-practice-results li.loser{background:#8c2b2038;border:1px solid #d8493a55}
.bj-practice-results li em{font-style:normal;font-weight:800;color:#a8e59a}
.bj-practice-results li.loser em{color:#ff8e7c}
.bj-practice-pause{display:flex;justify-content:flex-end}
@media (orientation:landscape) and (max-height:650px) and (max-width:1400px){
  body.bj-practice-page.game-screen .bj-practice{gap:0}
  body.bj-practice-page.game-screen .bj-practice-note{display:none}
  body.bj-practice-page.game-screen .bj-panel{padding:6px 64px 4px max(14px,env(safe-area-inset-left));border:0;border-radius:0;margin:0}
  body.bj-practice-page.game-screen .bj-practice-pause{position:fixed;z-index:44;right:max(8px,env(safe-area-inset-right));top:8px}
  body.bj-practice-page.game-screen .bj-practice-pause .button{width:48px;min-width:0;min-height:44px;padding:0;font-size:0}
  body.bj-practice-page.game-screen .bj-practice-pause .button::before{content:"Ⅱ";font-size:18px}
  body.bj-practice-page.game-screen .bj-practice-pause .button.is-paused::before{content:"▶"}
}