/* Bách Trảm Bánh Trăng — fixed 420 × 610 world, scaled equally everywhere. */
.slice-game-dialog{background:#260615}.slice-game-dialog::backdrop{background:#17020deb}
.slice-game-shell{align-items:center;justify-content:center;background:#350817 url('assets/bach-tram/gameplay-bg-desktop-v2.webp') center/cover no-repeat}
.slice-game-shell:before{opacity:.2;background:linear-gradient(90deg,#19020dcc,transparent 30%,transparent 70%,#19020dcc)}
.slice-game-shell .moon-game-header{background:linear-gradient(180deg,#21040fd9,transparent)}
.slice-game-shell .moon-game-heading{transition:opacity .25s ease}.slice-game-shell:has(.slice-game-stage.is-menu) .moon-game-heading{opacity:0;visibility:hidden}.slice-game-shell .moon-game-heading>span{color:#f5b85c}.slice-game-shell .moon-game-heading h2{color:#fff1c4}
.slice-game-stage{--slice-column:420px;flex:1 1 100%;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;border-radius:0;aspect-ratio:auto;background:transparent;box-shadow:none}
.slice-game-stage canvas{z-index:1;cursor:crosshair}
.slice-game-stage:after{z-index:2;border:0;border-radius:0;box-shadow:none;background:radial-gradient(ellipse var(--slice-column) 74% at 50% 44%,#ffd48a17,#ffbe6c08 46%,transparent 73%),radial-gradient(ellipse 128% 86% at 50% 50%,transparent 40%,#19020bb0 100%)}
/* ---------- Màn chờ: vòng bánh xoay, chém một đường là vào ván ---------- */
.slice-menu{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(3vh,20px);padding:clamp(8px,2.5vh,22px) 14px clamp(12px,3vh,26px);overflow:hidden;background:radial-gradient(ellipse 80% 64% at 50% 47%,#8d204534 0,#2a0613a8 56%,#170209ec 100%);opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease;touch-action:none;user-select:none;-webkit-user-select:none}
.slice-menu.is-visible{opacity:1;visibility:visible}.slice-menu.is-leaving{opacity:0;pointer-events:none}
.slice-menu-trail{position:absolute!important;inset:0!important;z-index:6!important;width:100%!important;height:100%!important;pointer-events:none}

/* Trang trí: đèn lồng đung đưa, mây trôi, đốm sáng bay lên. */
.slice-menu-decor{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.slice-menu-lantern{position:absolute;width:13%;max-width:74px;object-fit:contain;transform-origin:50% 0;filter:drop-shadow(0 9px 18px #16020a7d);animation:slice-lantern-sway 6.4s ease-in-out infinite}
.slice-menu-lantern.lantern-a{left:5%;top:2%}.slice-menu-lantern.lantern-b{right:6%;top:7%;width:10.5%;animation-delay:-2.6s}.slice-menu-lantern.lantern-c{left:10%;bottom:13%;width:9%;opacity:.78;animation-delay:-4.3s}
.slice-menu-cloud{position:absolute;width:46%;object-fit:contain;opacity:.2;animation:slice-cloud-drift 14s ease-in-out infinite}
.slice-menu-cloud.cloud-a{left:-13%;bottom:4%}.slice-menu-cloud.cloud-b{right:-15%;top:24%;width:39%;animation-delay:-7s}
.slice-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffeab4;box-shadow:0 0 9px 3px #ffc56a7a;animation:slice-spark-float 5.4s ease-in-out infinite}
.slice-spark.spark-a{left:18%;top:32%}.slice-spark.spark-b{left:30%;bottom:22%;animation-delay:-1.1s}.slice-spark.spark-c{right:22%;top:40%;animation-delay:-2.2s}.slice-spark.spark-d{right:32%;bottom:26%;animation-delay:-3.3s}.slice-spark.spark-e{left:46%;top:14%;animation-delay:-4.1s}.slice-spark.spark-f{right:12%;bottom:38%;animation-delay:-2.7s}

.slice-menu-title{position:relative;z-index:3;margin:0;text-align:center}
.slice-menu-title span{display:block;margin-bottom:6px;color:#f0b062;font-size:8px;font-weight:600;letter-spacing:.26em}
.slice-menu-title h3{margin:0;color:#ffe9b5;font-family:'SVN Gang of Three','Be Vietnam Pro',sans-serif;font-size:clamp(26px,6vw,46px);font-weight:400;line-height:.94;text-transform:uppercase;text-shadow:0 3px 0 #7c1637,0 11px 26px #16020b8c}

.slice-menu-panel{position:relative;z-index:3;flex:0 0 auto;width:min(calc(var(--slice-column) * .64),40vh,300px);aspect-ratio:1}

/* Vòng chém chính: viền xoay có chữ ở hai đầu, bánh xoay ngược bên trong. */
.slice-menu-start{position:absolute;inset:0;border-radius:50%;cursor:crosshair;filter:drop-shadow(0 20px 30px #17010991);animation:slice-menu-breathe 2.8s ease-in-out infinite}
.slice-menu-start:before{content:'';position:absolute;inset:17.5%;border-radius:50%;background:radial-gradient(circle at 50% 38%,#7f1d41,#4a0d27 62%,#280613);box-shadow:inset 0 0 0 2px #ffc86b5c,inset 0 10px 28px #150108a6,0 0 30px #ff9b3226}
.slice-menu-start:after{content:'';position:absolute;inset:-10%;z-index:-1;border-radius:50%;background:radial-gradient(circle,#ffb04a2e,transparent 66%);animation:slice-menu-halo 3.8s ease-in-out infinite}
.slice-menu-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;will-change:transform;animation:slice-spin-cw 26s linear infinite}
.slice-menu-ring .ring-band{stroke:#450c22;stroke-width:32}
.slice-menu-ring .ring-rim{stroke:#f6ba57;stroke-width:2.6}
.slice-menu-ring .ring-hair{stroke:#ffcf8e;stroke-width:1.2;stroke-dasharray:2 7;opacity:.5}
.slice-menu-ring text{fill:#fff3ca;font-family:'SVN Gang of Three','Be Vietnam Pro',sans-serif;font-size:23px;letter-spacing:1.5px;text-transform:uppercase;dominant-baseline:central}
.slice-menu-start img{position:absolute;left:24%;top:24%;width:52%;height:52%;object-fit:contain;will-change:transform;filter:drop-shadow(0 10px 13px #2b05106b);animation:slice-spin-ccw 15s linear infinite}

/* Nút nhạc cũng là một vòng để chém. */
.slice-menu-sound{position:absolute;z-index:4;right:-24%;top:50%;display:grid;width:32%;aspect-ratio:1;place-items:center;transform:translateY(-50%);cursor:crosshair;filter:drop-shadow(0 12px 18px #17010984)}
.slice-sound-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;will-change:transform;animation:slice-spin-ccw 19s linear infinite}
.slice-sound-ring .ring-band{stroke:#14503c;stroke-width:28}
.slice-sound-ring .ring-rim{stroke:#ffd98c;stroke-width:2.4}
.slice-sound-ring text{fill:#fff4d2;font-family:'SVN Gang of Three','Be Vietnam Pro',sans-serif;font-size:20px;letter-spacing:1.4px;text-transform:uppercase;dominant-baseline:central}
.slice-menu-sound i{position:relative;z-index:1;display:grid;width:55%;aspect-ratio:1;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 36%,#1d6c52,#0c3326);box-shadow:inset 0 0 0 2px #ffd98c5c,inset 0 6px 16px #04140e8c;color:#ffeec0;font:400 clamp(15px,3.2vh,25px)/1 'SVN Gang of Three','Be Vietnam Pro',sans-serif;font-style:normal}
.slice-menu-sound[aria-pressed="true"] i{color:#9cb4a7}
.slice-menu-sound[aria-pressed="true"] i:after{content:'';position:absolute;left:24%;right:24%;top:50%;height:2px;border-radius:2px;background:currentColor;transform:rotate(-45deg)}
.slice-menu-sound.is-sliced{animation:slice-sound-pop .34s ease}
.slice-menu-start:focus-visible,.slice-menu-sound:focus-visible{outline:3px solid #fff0bd;outline-offset:6px;border-radius:50%}

.slice-menu-hint{position:relative;z-index:3;margin:0;color:#ffd79a;font-size:9px;font-weight:600;letter-spacing:.13em;text-align:center;text-transform:uppercase;animation:slice-hint-pulse 2.8s ease-in-out infinite}
.slice-menu-message{position:relative;z-index:3;margin:0;color:#ffc07d;font-size:9px;font-weight:600;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.slice-menu-message:empty{display:none}
.slice-menu.is-loading .slice-menu-start{animation:slice-menu-loading .8s ease-in-out infinite alternate}
.slice-menu-start.is-sliced{animation:none;transform:scale(1.07);filter:drop-shadow(0 0 36px #ffd274)}
.slice-game-stage.is-menu .slice-game-hud,.slice-game-stage.is-menu>.slice-sound,.slice-game-stage.is-menu>.slice-game-tip{opacity:0;visibility:hidden;pointer-events:none}

/* Đếm ngược 3 giây trước khi bánh bay lên. */
.slice-countdown{position:absolute;inset:0;z-index:7;display:grid;align-content:center;justify-items:center;gap:10px;pointer-events:none;background:radial-gradient(ellipse 62% 46% at 50% 50%,#2a061259,transparent 72%);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.slice-countdown.is-visible{opacity:1;visibility:visible}
.slice-countdown strong{color:#ffeab6;font-family:'SVN Gang of Three','Be Vietnam Pro',sans-serif;font-size:clamp(76px,19vh,142px);font-weight:400;line-height:1;text-shadow:0 6px 0 #7c1637,0 16px 40px #14020ab5}
.slice-countdown span{color:#ffc98c;font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.slice-countdown.is-go strong{color:#ffd76f;font-size:clamp(44px,11vh,84px)}
.slice-countdown.is-tick strong{animation:slice-count-pop .5s cubic-bezier(.2,.9,.3,1.18)}

@keyframes slice-spin-cw{to{transform:rotate(360deg)}}
@keyframes slice-spin-ccw{to{transform:rotate(-360deg)}}
@keyframes slice-menu-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes slice-menu-halo{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes slice-menu-loading{to{transform:scale(.97);opacity:.68}}
@keyframes slice-sound-pop{50%{transform:translateY(-50%) scale(1.12)}}
@keyframes slice-hint-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes slice-lantern-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes slice-cloud-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
@keyframes slice-spark-float{0%,100%{opacity:.15;transform:translateY(8px) scale(.6)}50%{opacity:.9;transform:translateY(-12px) scale(1)}}
@keyframes slice-count-pop{0%{transform:scale(1.75);opacity:0}45%{opacity:1}100%{transform:scale(1);opacity:1}}
.slice-game-hud{position:absolute;z-index:4;top:74px;left:50%;right:auto;width:min(var(--slice-column),calc(100% - 20px));transform:translateX(-50%);display:grid;grid-template-columns:1.15fr .85fr 1.25fr 1fr;border:1px solid #ffe3a45c;border-radius:12px;background:linear-gradient(180deg,#421025dc,#210612cf);box-shadow:0 8px 22px #22020e75;backdrop-filter:blur(7px)}
.slice-game-hud>div{position:relative;display:flex;min-width:0;min-height:47px;flex-direction:column;align-items:center;justify-content:center}.slice-game-hud>div+div:before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:1px;background:linear-gradient(transparent,#f9c86e69,transparent)}
.slice-sound{position:absolute;z-index:5;top:128px;right:max(11px,calc(50% - var(--slice-column)/2 + 6px));display:grid;width:31px;height:31px;padding:0;place-items:center;border:1px solid #ffe2a34a;border-radius:50%;background:#2b0718a8;color:#ffe6a7;font:700 15px/1 sans-serif;backdrop-filter:blur(6px)}.slice-sound[aria-pressed="true"]{color:#b99678}
.slice-game-tip{position:absolute;z-index:4;left:50%;right:auto;bottom:18px;width:min(var(--slice-column),calc(100% - 32px));transform:translateX(-50%);margin:0;padding:7px 11px;border:1px solid #ffe1a52c;border-radius:20px;background:#24051299;color:#f5d9a8;font-size:7px;font-weight:600;letter-spacing:.08em;text-align:center;text-transform:uppercase;backdrop-filter:blur(6px)}
.slice-game-tip{position:absolute;z-index:4;left:45px;right:45px;bottom:15px;margin:0;padding:7px 11px;border:1px solid #ffe1a52c;border-radius:20px;background:#24051299;color:#f5d9a8;font-size:7px;font-weight:600;letter-spacing:.08em;text-align:center;text-transform:uppercase;backdrop-filter:blur(6px)}
.slice-game-overlay{z-index:10;background:linear-gradient(180deg,#250411a3,#21030fe8)}.slice-overlay-card{border-color:#ffdc9185;background:linear-gradient(155deg,#6e1738ee,#37091ff5)}.slice-overlay-card h3{text-shadow:0 4px 0 #741435}
.slice-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 19px}.slice-rules span{display:flex;min-width:0;padding:8px 4px;flex-direction:column;align-items:center;border:1px solid #ffdfa834;border-radius:8px;background:#26061469;color:#e8c99a;font-size:7px;text-transform:uppercase}.slice-rules i{display:block;width:25px;height:25px;margin-bottom:3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd878,#d27322 55%,#773315);box-shadow:inset 0 0 0 3px #ffd98755}.slice-rules .slice-rule-gold{background:radial-gradient(circle at 35% 30%,#fff5a4,#f6b41b 50%,#9a4a05);box-shadow:0 0 9px #ffca4f99,inset 0 0 0 3px #fff4a37a}.slice-rules .slice-rule-burnt{border-radius:42% 55% 45% 58%;background:radial-gradient(circle at 35% 30%,#9c426f,#371129 55%,#12050d);box-shadow:inset 0 0 0 3px #cf5a7555}.slice-rules b{margin-bottom:2px;color:#fff1bc;font-family:'SVN Gang of Three',sans-serif;font-size:16px;font-weight:400}
@media(max-width:700px){.slice-game-shell{background-image:url('assets/bach-tram/gameplay-bg-v1.webp')}.slice-menu-panel{width:min(calc(var(--slice-column) * .64),40vh,300px)}.slice-menu-title h3{font-size:clamp(24px,8vw,38px)}.slice-game-hud{top:55px}.slice-sound{top:109px}.slice-game-shell .moon-game-heading h2{font-size:17px}.slice-overlay-card{padding:23px 19px 20px}.slice-overlay-card h3{font-size:40px}}
@media(max-height:620px){.slice-game-hud{top:7px;left:50px;right:50px}.slice-sound{top:57px}.slice-game-tip{display:none}.slice-menu{gap:min(2vh,12px)}.slice-menu-title span{display:none}.slice-menu-title h3{font-size:clamp(20px,4.4vh,30px)}.slice-menu-panel{width:min(calc(var(--slice-column) * .82),50vh,240px)}.slice-menu-hint{display:none}.slice-menu-ring text{font-size:25px}.slice-sound-ring text{font-size:22px}.slice-overlay-card{padding:18px}.slice-rules{margin-bottom:12px}.slice-overlay-card h3{font-size:34px;margin:6px 0 8px}.slice-overlay-card p{margin-bottom:9px;font-size:9px}}