/* BUY FEATURE panel (2026-09-25): one centred, classic panel over the dimmed game with a tinted row per
   feature (small real-art icon, title, one line, tag, price box, BUY). BUY opens a confirm view in the same
   panel with the full cost. No baked text or values: prices come from src/math/economy.mjs (BUY_PRICES).
   Desktop and phone portrait are laid out separately; if a small phone cannot fit, the panel scrolls. */
.buy-screen{
  --gold:#ffcf4d;--gold-deep:#b8862d;--cream:#fff3cf;--ink:#07030c;
  width:min(640px,calc(100vw - 20px));max-width:none;max-height:calc(100dvh - 16px);margin:auto;padding:0;
  border:3px solid var(--gold);border-radius:20px;color:var(--cream);font-family:CarnivalCoin,Georgia,serif;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% -10%,#ffb52e38,transparent 44%),
    repeating-linear-gradient(90deg,#0000 0 2.6%,#0000001f 3.4% 4.6%,#0000 5.4% 6%),
    linear-gradient(#5e0d1c,#35060f 60%,#1f040a);
  box-shadow:0 0 0 3px #6a2006,0 0 0 5px #f7c24a,0 24px 60px #000e,0 0 40px #ff9d2555
}
.buy-screen[open]{display:flex;flex-direction:column;animation:buy-panel-in .3s cubic-bezier(.2,.9,.3,1.12) both}
.buy-screen::backdrop{background:#07020bc9;backdrop-filter:blur(4px)}
.buy-screen *{box-sizing:border-box}
.buy-screen [hidden]{display:none!important}
.buy-panel{
  position:relative;flex:1 1 auto;min-height:0;margin:0;display:flex;flex-direction:column;gap:clamp(6px,1dvh,10px);
  padding:clamp(10px,1.6dvh,16px) clamp(10px,1.8vw,18px) clamp(10px,1.6dvh,16px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch
}

/* Header and bet/balance strip */
.buy-panel-head{position:relative;display:grid;place-items:center;min-height:clamp(32px,5dvh,46px)}
.buy-panel-head h2{
  margin:0;padding:0 48px;font-size:clamp(24px,4.4dvh,38px);line-height:1;letter-spacing:.04em;white-space:nowrap;
  background:linear-gradient(#fffbe0 8%,#ffd84f 44%,#e48a14 74%,#ffe07a 96%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px #6f1b0d;filter:drop-shadow(0 3px 0 #5c160c) drop-shadow(0 0 9px #ff8a2a88)
}
.buy-close{
  position:absolute;right:0;top:50%;translate:0 -50%;width:clamp(34px,5dvh,42px);aspect-ratio:1;padding:0;border-radius:50%;
  border:2px solid #ffd36b;background:radial-gradient(circle at 50% 35%,#ffe58a,#d7931c 60%,#8a5208);color:#4a1206;
  font:700 clamp(20px,3.2dvh,26px)/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 8px #000a,inset 0 1px 0 #fff8
}
.buy-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 8px;border-radius:14px;border:1px solid #b8862d99;background:#0b0413d9;box-shadow:inset 0 0 12px #000a}
.buy-bet{display:flex;align-items:center;gap:6px}
.buy-label,.buy-wallet dt{font:900 clamp(9px,1.35dvh,11px)/1 'Trebuchet MS',sans-serif;letter-spacing:.16em;color:#ffcf6a}
.buy-bet-step{
  width:clamp(32px,4.8dvh,38px);aspect-ratio:1;padding:0;border-radius:50%;border:2px solid #ffd36b;cursor:pointer;
  background:radial-gradient(circle at 50% 35%,#c8302f,#5a0f18);color:#fff3a4;font:900 clamp(18px,2.8dvh,22px)/1 'Trebuchet MS',sans-serif;
  box-shadow:0 2px 6px #000a
}
.buy-bet-step:disabled{filter:grayscale(.8) brightness(.55);cursor:default}
.buy-bet output{min-width:4.2ch;padding:.14em .45em;border-radius:9px;text-align:center;border:1px solid var(--gold-deep);background:var(--ink);font-size:clamp(15px,2.5dvh,20px);color:#fff;font-variant-numeric:tabular-nums}
.buy-wallet{margin:0;display:flex;align-items:center;gap:8px}
.buy-wallet dd{margin:0;font-size:clamp(15px,2.5dvh,20px);line-height:1;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}

/* The list: one tinted row per feature */
.buy-menu{display:flex;flex-direction:column;gap:clamp(5px,.8dvh,8px)}
.buy-rows{display:flex;flex-direction:column;gap:clamp(5px,.9dvh,9px)}
.buy-row{
  --tint-a:#5a3a12;--tint-b:#241204;--edge:#b8862d;
  position:relative;overflow:hidden;display:grid;grid-template-columns:clamp(52px,7.6dvh,68px) minmax(0,1fr) clamp(136px,15dvh,160px);
  grid-template-areas:"icon title price" "icon tag price" "icon line buy";column-gap:12px;row-gap:2px;align-items:center;
  padding:clamp(5px,.8dvh,8px) 10px clamp(5px,.8dvh,8px) 8px;border-radius:14px;border:2px solid var(--edge);
  background:radial-gradient(ellipse at 20% 0%,#ffffff14,transparent 50%),linear-gradient(135deg,var(--tint-a),var(--tint-b));
  box-shadow:inset 0 0 16px #0009,0 3px 8px #0008
}
.buy-row-holdSpin{--tint-a:#6a4814;--tint-b:#2a1604;--edge:#d9a441}
.buy-row-superHoldSpin{
  border:3px solid transparent;
  background:radial-gradient(ellipse at 20% 0%,#ffe07a2a,transparent 55%) padding-box,linear-gradient(135deg,#8e1420,#3a0508) padding-box,
    conic-gradient(from 30deg,#ff3b2e,#ffe07a,#c8102e,#ffd84f,#ff3b2e,#ffe07a,#c8102e,#ffd84f,#ff3b2e) border-box;
  box-shadow:inset 0 0 16px #0009,0 0 18px 2px #ff7a2eaa,0 3px 8px #0008
}
.buy-row-cup3{--tint-a:#5e1630;--tint-b:#260812;--edge:#b8862d}
.buy-row-cup4{--tint-a:#861019;--tint-b:#3a0508;--edge:#e0a23a}
.buy-row-cup5{--tint-a:#5b2186;--tint-b:#1f0a36;--edge:#e6b3ff;box-shadow:inset 0 0 16px #0009,0 0 16px 2px #b86bff88,0 3px 8px #0008}
.buy-row-cannon{--tint-a:#173a7a;--tint-b:#071632;--edge:#7fb2ff}
.buy-row-cup5::before{
  content:"\2726   \2727   \2726";position:absolute;z-index:3;left:10px;bottom:3px;font-size:10px;letter-spacing:.3em;color:#fff4b0;text-shadow:0 0 6px #ffd24a;
  pointer-events:none;animation:buy-sparkle 1.8s ease-in-out infinite
}
.buy-row-ribbon{
  position:absolute;z-index:2;left:-32px;top:12px;width:112px;rotate:-38deg;padding:.3em 0;text-align:center;
  font:900 9px/1 'Trebuchet MS',sans-serif;letter-spacing:.1em;color:#fff7d0;background:linear-gradient(#e2403f,#8e1420);
  box-shadow:0 0 0 1px #ffd35c,0 2px 6px #000b;pointer-events:none
}
.buy-row-cup5 .buy-row-price,.buy-row-cup5 .buy-row-buy{position:relative;z-index:3}
.buy-row-title{grid-area:title;margin:0;font-size:clamp(14px,2.2dvh,19px);line-height:1.05;color:#ffe27a;-webkit-text-stroke:.4px #5c160c;text-shadow:0 2px 0 #3a0906;overflow-wrap:anywhere}
.buy-row-tag{
  grid-area:tag;justify-self:start;max-width:100%;padding:.25em .7em;border-radius:999px;border:1px solid #ffcf4d88;background:#0007;
  font:900 clamp(8px,1.25dvh,10px)/1.1 'Trebuchet MS',sans-serif;letter-spacing:.1em;color:#ffe9a8
}
.buy-row-superHoldSpin .buy-row-tag{color:#3a0906;background:linear-gradient(#fff1b0,#ffc93d);border-color:#7a3a06}
.buy-row-line{grid-area:line;margin:0;font:700 clamp(9px,1.4dvh,12px)/1.22 'Trebuchet MS',sans-serif;color:#fff1d8}
.buy-row-price{
  grid-area:price;align-self:end;display:grid;justify-items:center;gap:1px;padding:3px 6px;border-radius:9px;border:1px solid #b8862d88;background:#07030ce6
}
.buy-row-price b{font-size:clamp(15px,2.3dvh,19px);line-height:1;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.buy-row-price small{font:900 clamp(8px,1.2dvh,10px)/1 'Trebuchet MS',sans-serif;letter-spacing:.12em;color:#ffcf6a}
.buy-row-buy{
  grid-area:buy;align-self:start;width:100%;min-height:clamp(30px,4.3dvh,36px);padding:.2em .4em;border-radius:10px;cursor:pointer;
  font:700 clamp(15px,2.4dvh,19px)/1 CarnivalCoin,Georgia,serif;letter-spacing:.06em;box-shadow:0 3px 6px #000a,inset 0 1px 0 #fff7
}
.buy-row-buy-primary{border:2px solid #b6f5a8;color:#fff;background:linear-gradient(#5fd455,#239a1f 55%,#135511);text-shadow:0 2px 0 #0b3a09}
.buy-row-buy-gold{border:2px solid #fff1b0;color:#4a1206;background:linear-gradient(#ffe58a,#e0a52a 55%,#a86a12);text-shadow:0 1px 0 #fff4}
.buy-row-buy:hover{filter:brightness(1.1)}
.buy-row-buy:active{transform:translateY(1px);filter:brightness(.9)}
.buy-row[data-affordable="false"] .buy-row-buy{font:900 clamp(8px,1.2dvh,10px)/1.2 'Trebuchet MS',sans-serif;letter-spacing:.04em;color:#ffb3a8;background:#2a1a22;border-color:#ff5a4a;text-shadow:none}
.buy-row[data-affordable="false"] .buy-row-price b{color:#ffb3a8}
.buy-menu-note{margin:0;text-align:center;font:700 clamp(9px,1.3dvh,11px)/1.3 'Trebuchet MS',sans-serif;color:#ffe6a6;opacity:.9}
.buy-menu-note strong{color:#ffe27a}

/* Small real-art icons */
.buy-icon{grid-area:icon;position:relative;display:block;width:100%;aspect-ratio:1}
.buy-icon img{position:absolute;object-fit:contain;filter:drop-shadow(0 3px 3px #000b)}
.buy-icon-hold-spin img{width:62%;height:62%}
.buy-icon-hold-spin img:nth-child(1){left:0;top:30%}.buy-icon-hold-spin img:nth-child(2){left:19%;top:4%;z-index:2}.buy-icon-hold-spin img:nth-child(3){right:0;top:30%}
.buy-icon-super img{width:56%;height:56%;border-radius:50%;background:radial-gradient(circle,#fff3,#0000 70%)}
.buy-icon-super img:nth-child(1){left:0;top:36%}.buy-icon-super img:nth-child(2){left:22%;top:2%;z-index:2}.buy-icon-super img:nth-child(3){right:0;top:36%}
.buy-icon-cup img{width:74%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:5px;border:1px solid #ffd96b}
.buy-icon-cup img:nth-child(1){left:0;top:4%;rotate:-8deg}.buy-icon-cup img:nth-child(2){left:9%;top:17%;rotate:-2deg}.buy-icon-cup img:nth-child(3){left:18%;top:30%;rotate:4deg}
.buy-icon-cup img:nth-child(4){left:26%;top:43%;rotate:9deg}.buy-icon-cup img:nth-child(5){left:26%;top:56%;rotate:14deg;width:70%}
.buy-icon-cup[data-count="5"] img{width:66%}
.buy-icon-cannon img{inset:4%;width:92%;height:92%}
/* Animate the supplied symbols, not another painted UI layer. The three Chompers
   above are actual authored animated WebPs; the other art gets only a small cue. */
.buy-screen[open] .buy-icon-hold-spin img:nth-child(2){animation:buy-coin-hover 2.1s ease-in-out infinite}
.buy-screen[open] .buy-icon-cup img:nth-child(2){animation:buy-cup-lift 2.7s ease-in-out infinite}
.buy-screen[open] .buy-icon-cannon img{animation:buy-cannon-aim 3s ease-in-out infinite;transform-origin:24% 75%}
@keyframes buy-coin-hover{50%{transform:translateY(-7%)}}
@keyframes buy-cup-lift{35%{transform:translateY(-12%)}60%{transform:translateY(0)}}
@keyframes buy-cannon-aim{50%{transform:rotate(-4deg)}}

/* Confirm view (same panel) */
.buy-confirm-step{display:flex;flex-direction:column;gap:clamp(5px,1dvh,10px)}
.buy-confirm-head{display:grid;grid-template-columns:clamp(46px,7dvh,60px) minmax(0,1fr);align-items:center;gap:10px}
.buy-confirm-icon{display:block}
.buy-confirm-icon .buy-icon{width:100%}
.buy-confirm-kicker,.buy-mods-title{margin:0;font:900 clamp(9px,1.35dvh,11px)/1 'Trebuchet MS',sans-serif;letter-spacing:.24em;color:#ffcf6a}
.buy-confirm-head h3{margin:.15em 0 0;font-size:clamp(19px,3.3dvh,28px);line-height:1.05;color:#ffe27a;-webkit-text-stroke:.5px #6f1b0d;text-shadow:0 2px 0 #5c160c,0 0 10px #ff9d2566}
.buy-hero{display:flex;flex-direction:column;align-items:center}
.buy-hero-board{
  position:relative;container-type:inline-size;width:min(100%,calc(21dvh * 5 / 3));aspect-ratio:5/3;margin-top:8px;
  display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:1.3%;padding:2%;border-radius:4.5%;
  border:2px solid #e7a93a;background:linear-gradient(#2e0d1c,#12040b);
  box-shadow:0 0 0 2px #6a2006,0 0 0 4px #ffcf4d,0 8px 20px #000b,0 0 24px #ffb52e55,inset 0 0 20px #000
}
.buy-hero-board::before{
  content:"EXAMPLE";position:absolute;z-index:3;left:50%;top:0;translate:-50% -58%;padding:.28em .9em;border-radius:999px;
  font:900 max(8px,2.4cqw)/1 'Trebuchet MS',sans-serif;letter-spacing:.24em;color:#3a0906;background:linear-gradient(#fff1b0,#ffc93d);box-shadow:0 0 0 2px #7a3a06
}
.buy-hero-cell{position:relative;container-type:size;display:grid;place-items:center;min-width:0;min-height:0;border-radius:12%;border:1px solid #9c6a2f;background:radial-gradient(circle at 50% 40%,#3f1a45,#150818 76%)}
.buy-hero-cell.locked{border-color:#ffd96b;box-shadow:0 0 8px #ffc83d66}
.buy-hero-cell img{position:absolute;left:-5%;top:-5%;width:110%;height:110%;object-fit:contain;filter:drop-shadow(0 .6cqw .6cqw #000b)}
.buy-hero-cell b{position:relative;font:700 28cqmin/1 CarnivalCoin,Georgia,serif;letter-spacing:-.04em;color:#fff3a8;-webkit-text-stroke:.045em #4b1808;text-shadow:0 .06em 0 #8b3b0a,0 .12em .16em #000}
.buy-hero-caption{margin:6px 0 0;text-align:center;font:800 clamp(8px,1.25dvh,11px)/1.3 'Trebuchet MS',sans-serif;letter-spacing:.05em;color:#ffe6a6}
.buy-prize-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.buy-prize-chip{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;column-gap:6px;padding:6px 12px;border-radius:12px;border:1px solid #ffcf4d99;background:#0b0413d9}
.buy-prize-chip img{grid-row:1/3;width:clamp(28px,4.6dvh,40px);height:auto}
.buy-prize-chip b{font-size:clamp(18px,3dvh,26px);line-height:1;color:#ffe27a}
.buy-prize-chip small{font:900 9px/1 'Trebuchet MS',sans-serif;letter-spacing:.12em;color:#ffcf6a}
.buy-prize-wheel{display:block;padding:6px 10px;font:700 clamp(13px,2dvh,17px)/1 CarnivalCoin,Georgia,serif;color:#fff3c4}
.buy-details{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.buy-details li{position:relative;padding-left:1.3em;font:700 clamp(10px,1.6dvh,13px)/1.25 'Trebuchet MS',sans-serif;color:var(--cream)}
.buy-details li::before{content:"★";position:absolute;left:0;top:0;color:#ffcf4d}
.buy-details b{color:#ffe27a}
.buy-mods-block{display:grid;gap:5px}
.buy-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.buy-mod{
  margin:0;display:grid;justify-items:center;gap:.2em;padding:5px 4px;border-radius:10px;text-align:center;border:2px solid #8a6a3a;
  background:linear-gradient(#3a2a31,#1d1218);filter:saturate(.2) brightness(.7);opacity:.82
}
.buy-mod b{font-size:clamp(12px,1.9dvh,16px);line-height:1;color:#fff4c4}
.buy-mod small{font:700 clamp(8px,1.2dvh,10px)/1.15 'Trebuchet MS',sans-serif;color:#fff1d8}
.buy-mod-state{padding:.2em .6em;border-radius:999px;font:900 8px/1 'Trebuchet MS',sans-serif;font-style:normal;letter-spacing:.12em;color:#fff1d8;background:#0007}
.buy-mod.mod-red{background:linear-gradient(#c8302f,#6f1019)}
.buy-mod.mod-blue{background:linear-gradient(#1f84d4,#0a3a74)}
.buy-mod.mod-green{background:linear-gradient(#45a83e,#1b5419)}
.buy-mod[data-armed="true"]{filter:none;opacity:1;border-color:#ffe58a}
.buy-mod.mod-red[data-armed="true"]{box-shadow:0 0 12px 2px #ff4a3dcc}
.buy-mod.mod-blue[data-armed="true"]{box-shadow:0 0 12px 2px #3ab4ffcc}
.buy-mod.mod-green[data-armed="true"]{box-shadow:0 0 12px 2px #6cf05acc}
.buy-mod[data-armed="true"] .buy-mod-state{color:#3a0906;background:#ffe58a}
.buy-mod-note{margin:0;text-align:center;font:700 clamp(8px,1.2dvh,10px)/1.25 'Trebuchet MS',sans-serif;color:#ffe6a6}
.buy-screen-price{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:2px solid var(--gold);background:#0b0413f0;box-shadow:inset 0 0 18px #000b}
.buy-price-multiple{margin:0;display:flex;align-items:center;gap:.25em}
.buy-price-multiple strong{font-size:clamp(28px,5dvh,44px);line-height:.9;background:linear-gradient(#fffbe0 8%,#ffd84f 46%,#e48a14 80%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px #6f1b0d}
.buy-price-multiple span{font:900 clamp(9px,1.4dvh,12px)/1.05 'Trebuchet MS',sans-serif;letter-spacing:.14em;color:#ffe9a8}
.buy-price-table{margin:0;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px}
.buy-price-table>div{display:grid;justify-items:center;gap:.2em;padding:4px 2px;border-radius:9px;border:1px solid #b8862d99;background:var(--ink)}
.buy-price-table dt{font:900 clamp(8px,1.2dvh,10px)/1 'Trebuchet MS',sans-serif;letter-spacing:.12em;color:#ffcf6a}
.buy-price-table dd{margin:0;font-size:clamp(12px,2dvh,17px);line-height:1;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.buy-price-table .buy-cost{border:2px solid var(--gold)}
.buy-price-table .buy-cost output{font-size:clamp(16px,2.8dvh,24px);color:#ffe27a}
.buy-bonus-message{margin:0;min-height:1.2em;text-align:center;font:900 clamp(9px,1.5dvh,12px)/1.2 'Trebuchet MS',sans-serif;color:#ffb3a8}
.buy-screen-actions{display:grid;grid-template-columns:1fr 1.7fr;gap:10px}
.buy-screen-actions button{min-height:clamp(44px,6.8dvh,58px);padding:.1em .6em;border-radius:12px;cursor:pointer;font-family:CarnivalCoin,Georgia,serif;box-shadow:0 4px 10px #000b,inset 0 1px 0 #fff6}
.buy-cancel{border:2px solid #ffcf4d;color:#fff4c4;font-size:clamp(14px,2.3dvh,19px);background:linear-gradient(#c8302f,#6f1019);text-shadow:0 2px 0 #4a0a0e}
.buy-confirm{display:grid;place-items:center;align-content:center;gap:.1em;border:2px solid #b6f5a8;color:#fff;background:linear-gradient(#5fd455,#239a1f 55%,#135511);text-shadow:0 2px 0 #0b3a09}
.buy-confirm>span{font-size:clamp(20px,3.6dvh,32px);line-height:1}
.buy-confirm small{font:800 clamp(9px,1.4dvh,12px)/1 'Trebuchet MS',sans-serif;color:#eaffd8}
.buy-confirm[aria-disabled="true"]{filter:grayscale(.9) brightness(.55);cursor:not-allowed}
.buy-screen[data-affordable="false"] .buy-price-table .buy-cost{border-color:#ff5a4a;box-shadow:0 0 10px #ff3b2e77}
.buy-keys{margin:0;text-align:center;font:700 9px/1 'Trebuchet MS',sans-serif;letter-spacing:.18em;color:#ffe6a6;opacity:.6}
.buy-screen button:focus-visible{outline:3px solid #fff5ae;outline-offset:2px}
.buy-rejected .buy-screen-price{animation:buy-shake .42s ease-in-out}

/* Motion */
.buy-screen[open] .buy-row{animation:buy-row-in .32s cubic-bezier(.2,.8,.25,1.1) both}
.buy-screen[open] .buy-row:nth-child(2){animation-delay:.04s}.buy-screen[open] .buy-row:nth-child(3){animation-delay:.08s}
.buy-screen[open] .buy-row:nth-child(4){animation-delay:.12s}.buy-screen[open] .buy-row:nth-child(5){animation-delay:.16s}.buy-screen[open] .buy-row:nth-child(6){animation-delay:.2s}
.buy-screen[open] .buy-confirm-step:not([hidden]){animation:buy-step-in .24s ease-out both}
.buy-screen[open] .buy-hero-cell.locked>*{animation:buy-coin-drop .5s cubic-bezier(.2,.8,.25,1.3) both;animation-delay:calc(.12s + var(--coin-order,0) * .07s)}
@keyframes buy-panel-in{from{opacity:0;transform:scale(.92)}}
@keyframes buy-row-in{from{opacity:0;transform:translateY(10px)}}
@keyframes buy-step-in{from{opacity:0;transform:translateX(12px)}}
@keyframes buy-coin-drop{0%{opacity:0;transform:translateY(-45%) scale(.5) rotate(-12deg)}65%{opacity:1;transform:translateY(3%) scale(1.08) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes buy-sparkle{50%{opacity:.25}}
@keyframes buy-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){
  .buy-screen[open],.buy-screen[open] .buy-row,.buy-screen[open] .buy-confirm-step,.buy-screen[open] .buy-hero-cell.locked>*,.buy-row-cup5::before,.buy-rejected .buy-screen-price,.buy-icon img{animation:none!important}
}
.buy-screen[data-motion="reduced"][open],.buy-screen[data-motion="reduced"] :is(.buy-row,.buy-confirm-step,.buy-hero-cell.locked>*,.buy-icon img){animation:none!important}

/* Phone portrait: full width with margins, compact rows (icon | text | price + BUY). */
@media (max-width:600px) and (orientation:portrait){
  .buy-screen{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:16px}
  .buy-panel{padding:8px 8px 10px;gap:6px}
  .buy-panel-head h2{font-size:clamp(22px,7.4vw,30px);padding:0 40px}
  .buy-close{width:34px}
  .buy-strip{padding:4px 6px;gap:6px}
  .buy-bet{gap:4px}
  .buy-bet .buy-label{font-size:8px;letter-spacing:.08em;max-width:3.6em;line-height:1.05}
  .buy-bet-step{width:32px}
  .buy-bet output{font-size:15px}
  .buy-wallet{gap:5px}
  .buy-wallet dd{font-size:15px}
  .buy-rows{gap:5px}
  .buy-row{grid-template-columns:40px minmax(0,1fr) 98px;column-gap:7px;row-gap:2px;padding:6px 7px 6px 5px;border-radius:11px}
  .buy-row-title{font-size:clamp(12px,3.7vw,15px)}
  .buy-row-tag{font-size:7.5px;padding:.25em .55em}
  .buy-row-line{font-size:clamp(8.5px,2.6vw,10.5px);line-height:1.18}
  .buy-row-price{padding:3px 4px}
  .buy-row-price b{font-size:clamp(13px,4vw,16px)}
  .buy-row-price small{font-size:8px}
  .buy-row-buy{min-height:32px;font-size:15px}
  .buy-row-ribbon{left:-30px;top:7px;width:92px;font-size:6.5px}
  .buy-row-cup5::before{left:4px;font-size:8px}
  .buy-prize-chips{gap:5px}
  .buy-prize-chip{padding:4px 6px;column-gap:4px}
  .buy-prize-chip img{width:24px}
  .buy-prize-chip b{font-size:18px}
  .buy-prize-chip small{font-size:7.5px}
  .buy-menu-note{font-size:9px}
  .buy-hero-board{width:min(100%,calc(22dvh * 5 / 3))}
  .buy-details li{font-size:clamp(9px,2.8vw,11.5px)}
  .buy-screen-price{grid-template-columns:auto minmax(0,1fr);gap:7px;padding:7px}
  .buy-price-multiple strong{font-size:clamp(24px,8vw,34px)}
  .buy-price-table{gap:4px}
  .buy-price-table dt{font-size:7.5px;letter-spacing:.06em}
  .buy-price-table dd{font-size:clamp(11px,3.4vw,14px)}
  .buy-price-table .buy-cost output{font-size:clamp(14px,4.4vw,18px)}
  .buy-keys{display:none}
}
@media (hover:none) and (pointer:coarse){.buy-keys{display:none}}

/* Confirmation composition: approved carnival characters and coin art,
   live amounts, readable rules, and one prominent full-cost purchase. */
.buy-screen[data-step="confirm"] .buy-confirm-step{gap:12px}
.buy-screen[data-step="confirm"] .buy-confirm-head{display:flex;justify-content:center;text-align:center;padding:8px 0 0}
.buy-screen[data-step="confirm"] .buy-confirm-icon{display:none}
.buy-screen[data-step="confirm"] .buy-confirm-head h3{font-size:clamp(23px,3.6dvh,32px);margin-top:7px}
.buy-screen[data-step="confirm"] .buy-hero-board{width:min(100%,360px);margin:8px 0 10px}
.buy-screen[data-step="confirm"] .buy-hero-caption{font:600 11px/1.4 'Trebuchet MS',sans-serif;max-width:330px;text-align:center;letter-spacing:0;color:#f5dca6}
.buy-confirm-overview{margin:0;text-align:center;font:700 14px/1.4 'Trebuchet MS',sans-serif;color:#fff1c8}
.buy-confirm-rules{order:4;border-top:1px solid #ae79394d;padding-top:8px}
.buy-confirm-rules summary{cursor:pointer;min-height:32px;display:list-item;list-style-position:inside;text-align:center;font:700 12px/1.6 'Trebuchet MS',sans-serif;color:#ebca8a}
.buy-confirm-rules[open] .buy-details{padding:10px 6px;gap:8px}
.buy-screen[data-step="confirm"] .buy-details li{font-size:12px;line-height:1.5}
.buy-screen[data-step="confirm"] .buy-mods-block{order:2;gap:9px}
.buy-screen[data-step="confirm"] .buy-mods-title{display:none}
.buy-screen[data-step="confirm"] .buy-mods{gap:8px}
.buy-screen[data-step="confirm"] .buy-mod{padding:8px 5px 10px;border-width:1px;box-shadow:inset 0 1px 0 #ffeba666,0 3px 8px #0005;filter:none;opacity:1;background:linear-gradient(#2c111d,#170713)}
.buy-screen[data-step="confirm"] .buy-mod img{width:56px;height:48px;object-fit:contain;filter:drop-shadow(0 3px 2px #0008)}
.buy-screen[data-step="confirm"] .buy-mod b{font-size:15px;color:#ffe6a3}
.buy-screen[data-step="confirm"] .buy-mod small{font-size:10px;line-height:1.3;min-height:2.6em;max-width:105px}
.buy-screen[data-step="confirm"] .buy-mod-state{font-size:9px;letter-spacing:.07em;padding:4px 7px}
.buy-screen[data-step="confirm"] .buy-mod-note{font-size:11px;line-height:1.4;color:#e6c7a2}
.buy-screen[data-step="confirm"] .buy-screen-price{order:5;display:block;background:#190910;border:1px solid #a2753a;padding:12px}
.buy-screen[data-step="confirm"] .buy-price-multiple{justify-content:center;margin-bottom:12px;gap:8px}
.buy-screen[data-step="confirm"] .buy-price-multiple strong{font-size:29px}
.buy-screen[data-step="confirm"] .buy-price-multiple span{font-size:10px}
.buy-screen[data-step="confirm"] .buy-price-table{grid-template-columns:1fr 1fr 1fr}
.buy-screen[data-step="confirm"] .buy-price-table>div{background:none;border:0;padding:0}
.buy-screen[data-step="confirm"] .buy-price-table dt{font-size:9px;letter-spacing:.06em}
.buy-screen[data-step="confirm"] .buy-price-table dd{font-size:15px;margin-top:5px}
.buy-screen[data-step="confirm"] .buy-price-table .buy-cost output{font-size:18px}
.buy-screen[data-step="confirm"] .buy-bonus-message{order:6;min-height:0}
.buy-screen[data-step="confirm"] .buy-bonus-message:empty{display:none}
.buy-screen[data-step="confirm"] .buy-screen-actions{order:7;grid-template-columns:1fr 1.8fr;align-items:stretch}
.buy-screen[data-step="confirm"] .buy-confirm{background:radial-gradient(ellipse at 50% 0,#ffe09b55,transparent 65%),linear-gradient(#ab201e,#6a0d15);border:2px solid #ffd872;box-shadow:inset 0 0 0 2px #792511,inset 0 0 0 3px #c39342,0 3px 8px #0009;color:#fff2be;text-shadow:0 2px 1px #3f0906;min-height:64px}
.buy-screen[data-step="confirm"] .buy-confirm small{font-size:13px;color:#ffe7a9}
.buy-screen[data-step="confirm"] .buy-cancel{background:#210b16;border:1px solid #9d743a;box-shadow:none;color:#e8cda5;font-size:16px}
.buy-screen[data-step="confirm"] .buy-keys{order:8}
@media(max-width:600px) and (orientation:portrait){
 .buy-screen[data-step="confirm"] .buy-panel{padding:10px 16px 16px}
 .buy-screen[data-step="confirm"] .buy-hero-board{width:min(100%,300px)}
 .buy-screen[data-step="confirm"] .buy-confirm-head h3{font-size:25px}
 .buy-screen[data-step="confirm"] .buy-mod img{width:50px;height:43px}
}