/* The menu artwork owns the frame, baked labels and row decoration. Only wager,
   balance, prices and the purchase hit areas remain live. Confirmation keeps the
   existing readable rules and full-cost display. */
.buy-screen[data-step="menu"]{
  width:min(96vw,calc(96dvh * 1672 / 941));
  aspect-ratio:1672 / 941;
  max-height:96dvh;
  border:0;
  border-radius:0;
  background:url('../../assets/ui/buy-feature-v3/menu-desktop-v3.png') center / 100% 100% no-repeat;
  box-shadow:0 22px 60px #000d;
  overflow:visible;
}
.buy-screen[data-step="menu"] .buy-panel{position:relative;display:block;padding:0;overflow:visible}
.buy-screen[data-step="menu"] .buy-panel-head{position:absolute;inset:0;display:block;pointer-events:none}
.buy-screen[data-step="menu"] .buy-panel-head h2,
.buy-screen[data-step="menu"] .buy-row :is(.buy-row-title,.buy-row-tag,.buy-row-line,.buy-row-ribbon),
.buy-screen[data-step="menu"] .buy-row:not(.buy-row-superHoldSpin) .buy-icon,
.buy-screen[data-step="menu"] .buy-menu-note{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important
}
.buy-screen[data-step="menu"] .buy-close{
  position:absolute;right:1.3%;top:3%;translate:none;width:4.4%;min-width:28px;
  background:#200c1eeb;color:#fff3c5;border:1px solid #ffe497;pointer-events:auto;
  font-size:clamp(18px,2.2vw,26px);box-shadow:0 2px 8px #0009
}
.buy-screen[data-step="menu"] .buy-strip{
  position:absolute;left:5%;right:5%;top:8%;height:7%;padding:0;display:flex;align-items:center;justify-content:space-between;
  background:none;border:0;box-shadow:none
}
.buy-screen[data-step="menu"] .buy-bet{width:24%;justify-content:center;gap:2%;white-space:nowrap}
.buy-screen[data-step="menu"] .buy-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.buy-screen[data-step="menu"] .buy-bet-step{width:24%;min-width:24px;border:0;background:none;box-shadow:none;color:#fff1b0;font-size:clamp(18px,2.1vw,30px)}
.buy-screen[data-step="menu"] .buy-bet output{min-width:4ch;padding:0;background:none;border:0;color:#fff9db;font-size:clamp(16px,2vw,28px)}
.buy-screen[data-step="menu"] .buy-wallet{width:24%;justify-content:center;white-space:nowrap}
.buy-screen[data-step="menu"] .buy-wallet dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.buy-screen[data-step="menu"] .buy-wallet dd{font-size:clamp(14px,1.8vw,26px);color:#fff9db}
.buy-screen[data-step="menu"] .buy-menu,.buy-screen[data-step="menu"] .buy-rows{position:absolute;inset:0;display:block;margin:0;padding:0}
/* Price and BUY sit inside the painted dark price window, measured on menu-phone-v2 (66.9-91.6% x, 17-87% of the
   row) and menu-desktop-v2 (59.4-87.4% x, 21-87%; the wide desktop window takes price and BUY side by side) - Barak 2026-09-29: the prices spilled out of the frame. */
/* The rows box covers the whole screen but only the painted rows take taps (2026-09-29, Barak: the ×, − and + on the
   Buy screen did not respond; this full-screen box sat above them and swallowed the taps). */
.buy-screen[data-step="menu"] .buy-menu,.buy-screen[data-step="menu"] .buy-rows{pointer-events:none}
.buy-screen[data-step="menu"] .buy-row{pointer-events:auto}
.buy-screen[data-step="menu"] .buy-row{
  position:absolute;left:0;width:100%;height:9.2%;padding:0;margin:0;display:block;
  border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;animation:none!important
}
.buy-screen[data-step="menu"] .buy-row:nth-child(1){top:27.7%}
.buy-screen[data-step="menu"] .buy-row:nth-child(2){top:37.8%}
.buy-screen[data-step="menu"] .buy-row:nth-child(3){top:47.9%}
.buy-screen[data-step="menu"] .buy-row:nth-child(4){top:58.4%}
.buy-screen[data-step="menu"] .buy-row:nth-child(5){top:68.6%}
.buy-screen[data-step="menu"] .buy-row:nth-child(6){top:79.3%}
/* Each row reuses its approved painted fragment; sorting prices must also sort
   the painted title/icon rather than just moving invisible purchase hit areas. */
.buy-screen[data-step="menu"] .buy-row::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url('../../assets/ui/buy-feature-v3/menu-desktop-v3.png');background-size:100% 1086.9565%;background-position:0 var(--paint-y);background-repeat:no-repeat}
.buy-screen[data-step="menu"] .buy-row::before{display:none}
.buy-screen[data-step="menu"] .buy-row-cup5{--paint-y:30.5066%}
.buy-screen[data-step="menu"] .buy-row-cup4{--paint-y:41.63%}
.buy-screen[data-step="menu"] .buy-row-superHoldSpin{--paint-y:52.7533%}
.buy-screen[data-step="menu"] .buy-row-holdSpin{--paint-y:64.3172%}
.buy-screen[data-step="menu"] .buy-row-cup3{--paint-y:75.5507%}
.buy-screen[data-step="menu"] .buy-row-cannon{--paint-y:87.3348%}
.buy-screen[data-step="menu"] .buy-row :is(.buy-row-buy,.buy-row-price){z-index:2}
.buy-screen[data-step="menu"] .buy-row-superHoldSpin .buy-icon{
  position:absolute;left:8.5%;top:-5%;width:21%;height:110%;aspect-ratio:auto;z-index:1
}
.buy-screen[data-step="menu"] .buy-row-superHoldSpin .buy-icon img{
  top:0;width:33.33%;height:100%;border-radius:0;background:none;object-fit:contain;
  animation:none;transform:scale(1.12);transform-origin:center
}
.buy-screen[data-step="menu"] .buy-row-superHoldSpin .buy-icon img:nth-child(1){left:0}
.buy-screen[data-step="menu"] .buy-row-superHoldSpin .buy-icon img:nth-child(2){left:33.33%}
.buy-screen[data-step="menu"] .buy-row-superHoldSpin .buy-icon img:nth-child(3){left:66.66%}
.buy-screen[data-step="menu"] .buy-row-price{
  position:absolute;left:60.5%;top:21%;width:15.5%;height:66%;padding:0;display:grid;place-items:center;
  border:0;border-radius:0;background:none;box-shadow:none
}
.buy-screen[data-step="menu"] .buy-row-price b{font-size:clamp(16px,2.1vw,27px);color:#fff9df;text-shadow:0 2px 4px #000}
.buy-screen[data-step="menu"] .buy-row-price small{display:none}
.buy-screen[data-step="menu"] .buy-row-buy{
  position:absolute;left:76%;top:25%;width:10.4%;height:58%;min-height:0;padding:0;
  border:0;border-radius:14px;background:none;box-shadow:none;color:#fff3bb;
  font:900 clamp(14px,2vw,25px)/1 CarnivalCoin,Georgia,serif;text-shadow:0 2px 3px #000,0 0 7px #ffcb63;
}
.buy-screen[data-step="menu"] .buy-row-buy:is(:hover,:focus-visible){background:#fff3ba20;filter:none;box-shadow:inset 0 0 15px #fff2a94d}
.buy-screen[data-step="menu"] .buy-row-buy:active{transform:none;background:#fff3ba36}
.buy-screen[data-step="menu"] .buy-row[data-affordable="false"] .buy-row-buy{
  border:0;background:none;color:#ffd5c9;font:800 clamp(8px,1.1vw,14px)/1 'Trebuchet MS',sans-serif;
  text-shadow:0 1px 3px #000
}
.buy-screen[data-step="menu"] .buy-row[data-affordable="false"] .buy-row-price b{color:#ffd5c9}

@media (max-width:600px) and (orientation:portrait){
  .buy-screen[data-step="menu"]{
    width:min(98vw,calc(98dvh * 853 / 1848));aspect-ratio:853 / 1848;max-height:98dvh;
    background-image:url('../../assets/ui/buy-feature-v3/menu-phone-v3.png')
  }
  .buy-screen[data-step="menu"] .buy-close{right:2%;top:1.5%;width:8%;min-width:26px;font-size:17px}
  .buy-screen[data-step="menu"] .buy-strip{left:5%;right:5%;top:22%;height:5.1%}
  .buy-screen[data-step="menu"] .buy-bet,.buy-screen[data-step="menu"] .buy-wallet{width:46%}
  .buy-screen[data-step="menu"] .buy-bet-step{min-width:20px;font-size:clamp(16px,5vw,23px)}
  .buy-screen[data-step="menu"] .buy-bet output,.buy-screen[data-step="menu"] .buy-wallet dd{font-size:clamp(12px,3.6vw,17px)}
  .buy-screen[data-step="menu"] .buy-row{height:7.5%}
  .buy-screen[data-step="menu"] .buy-row::after{background-image:url('../../assets/ui/buy-feature-v3/menu-phone-v3.png');background-size:100% 1333.3333%}
  .buy-screen[data-step="menu"] .buy-row-cup5{--paint-y:32.7568%}
  .buy-screen[data-step="menu"] .buy-row-cup4{--paint-y:42.2703%}
  .buy-screen[data-step="menu"] .buy-row-superHoldSpin{--paint-y:51.7838%}
  .buy-screen[data-step="menu"] .buy-row-holdSpin{--paint-y:61.2973%}
  .buy-screen[data-step="menu"] .buy-row-cup3{--paint-y:70.8108%}
  .buy-screen[data-step="menu"] .buy-row-cannon{--paint-y:80.3243%}
  .buy-screen[data-step="menu"] .buy-row:nth-child(1){top:30.3%}
  .buy-screen[data-step="menu"] .buy-row:nth-child(2){top:39.1%}
  .buy-screen[data-step="menu"] .buy-row:nth-child(3){top:47.9%}
  .buy-screen[data-step="menu"] .buy-row:nth-child(4){top:56.7%}
  .buy-screen[data-step="menu"] .buy-row:nth-child(5){top:65.5%}
  .buy-screen[data-step="menu"] .buy-row:nth-child(6){top:74.3%}
  .buy-screen[data-step="menu"] .buy-row-superHoldSpin .buy-icon{left:5%;top:-5%;width:29%;height:110%}
  .buy-screen[data-step="menu"] .buy-row-price{left:66.9%;top:19%;width:24.7%;height:34%}
  .buy-screen[data-step="menu"] .buy-row-price b{font-size:clamp(12px,3.7vw,17px);line-height:1}
  .buy-screen[data-step="menu"] .buy-row-buy{left:66.9%;top:52%;width:24.7%;height:34%;font-size:clamp(12px,3.8vw,17px)}
  .buy-screen[data-step="menu"] .buy-row[data-affordable="false"] .buy-row-buy{font-size:clamp(7px,2vw,9px)}
}
/* Full width; source aspect stays intact. Short phones scroll the painted
   canvas so the last purchase is reachable instead of shrinking all six. */
@media (max-width:600px) and (orientation:portrait){
 .buy-screen[data-step="menu"]{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;aspect-ratio:auto;overflow-x:hidden;overflow-y:auto;background:#35060f;border-radius:0;box-shadow:none;overscroll-behavior:contain}
 .buy-screen[data-step="menu"] .buy-panel{flex:none;width:100%;height:calc(100vw * 1848 / 853);min-height:0;background:url('../../assets/ui/buy-feature-v3/menu-phone-v3.png') center/100% 100% no-repeat}
}