/* Pocket Bells — design tokens + component recipes (drop-in starting point) */
@font-face{font-family:"Lilita One";src:url(fonts/LilitaOne-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/Nunito-latin-var.woff2) format("woff2");font-weight:200 1000;font-display:swap}
:root{
  --pb-outline:#3B1F0E;
  --pb-sky-top:#2F8FE6; --pb-sky-mid:#7CC6F6; --pb-horizon:#C9EEFC; --pb-snow:#EEF6FF; --pb-snow-shade:#D3E7F8;
  --pb-gold:#FCBC13; --pb-gold-light:#FFE27A; --pb-gold-dark:#C98A00; --pb-strap:#A81515;
  --pb-green-1:#7CCB0A; --pb-green-2:#429700; --pb-green-edge:#256300;
  --pb-orange-1:#FF8A1F; --pb-orange-2:#E06200; --pb-orange-edge:#9A3F00;
  --pb-red-1:#EE3B26; --pb-red-2:#C50D0B; --pb-red-edge:#7E0A06;
  --pb-brown-1:#A65A1C; --pb-brown-2:#7A3D0E; --pb-brown-edge:#4A2306;
  --pb-cream:#FFF4DC; --pb-tan:#F4D9A6; --pb-text:#3B1F0E; --pb-tagline:#FFE08A;
  --pb-card-cream:#FEE1AA; --pb-card-green:#78B917; --pb-card-purple:#A354DB;
  --pb-title-purple:#B46BEB; --pb-close-red:#EE1A10;
  --pb-track-sens:linear-gradient(90deg,#93D712 0%,#FCBD04 55%,#FB7D03 100%);
  --pb-track-vol:linear-gradient(90deg,#40B1FD 0%,#7C7CF6 55%,#9748F1 100%);
  --pb-radius-btn:20px; --pb-radius-card:22px; --pb-radius-pill:999px; --pb-stroke:3px;
  --pb-font-display:"Lilita One","Fredoka","Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;
  --pb-font-body:"Nunito","Varela Round",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* text outline used on white button labels */
  --pb-text-outline:
    2px 0 0 var(--pb-outline),-2px 0 0 var(--pb-outline),0 2px 0 var(--pb-outline),0 -2px 0 var(--pb-outline),
    1.5px 1.5px 0 var(--pb-outline),-1.5px 1.5px 0 var(--pb-outline),1.5px -1.5px 0 var(--pb-outline),-1.5px -1.5px 0 var(--pb-outline),
    0 4px 0 var(--pb-outline);
  --pb-hz:clamp(220px,49svh,110vw); /* horizon distance from bottom */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100svh;font-family:var(--pb-font-body);color:var(--pb-text);background:var(--pb-snow);
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}

/* ---------- background layers (fixed, z-index 0) ---------- */
.pb-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,var(--pb-sky-top) 0%,var(--pb-sky-mid) calc(100% - var(--pb-hz) - 18%),var(--pb-horizon) calc(100% - var(--pb-hz)),var(--pb-snow) calc(100% - var(--pb-hz) + 1px),var(--pb-snow-shade) 100%)}
.pb-bg img{position:absolute;height:auto;max-width:none;user-select:none}
.pb-bg .cloud-1{width:clamp(110px,32vw,240px);left:-4vw;top:7%}
.pb-bg .cloud-2{width:clamp(100px,29vw,220px);right:-4vw;top:12%}
.pb-bg .cloud-3{width:clamp(80px,23vw,170px);left:56%;top:27%;opacity:.95}
.pb-bg .hills-back{width:106%;left:-3%;bottom:calc(var(--pb-hz) - 25vw)}
.pb-bg .cabin{width:clamp(70px,21vw,170px);right:7%;bottom:calc(var(--pb-hz) - 6vw)}
.pb-bg .hills-mid{width:130%;left:-15%;bottom:calc(var(--pb-hz) - 33vw);transform:scaleX(-1)}
.pb-bg .pines-left{width:clamp(130px,43vw,330px);left:-10vw;bottom:calc(var(--pb-hz) - 36vw)}
.pb-bg .pines-right{width:clamp(120px,40vw,310px);right:-9vw;bottom:calc(var(--pb-hz) - 39vw)}
.pb-bg .hills-front{width:160%;left:-30%;bottom:-2px;transform:scaleX(-1)}
.pb-snow{position:fixed;inset:0;z-index:1;pointer-events:none} /* canvas snow goes here */

/* ---------- app shell ---------- */
.pb-screen{position:relative;z-index:2;width:100%;max-width:520px;margin-inline:auto;height:100svh;height:100dvh;
  padding:calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 14px) calc(env(safe-area-inset-left) + 16px);
  display:grid;gap:clamp(6px,1.6svh,14px)}
.pb-main{grid-template-rows:auto minmax(0,1fr) auto auto auto auto}
.pb-header{display:flex;align-items:center;gap:8px;min-height:52px}
.pb-brand{display:flex;align-items:center;gap:6px;margin:0;min-width:0;flex:1}
.pb-brand .logo-bell{height:clamp(32px,9.5vw,46px);width:auto;flex:none}
.pb-brand .wordmark{height:clamp(26px,7.6vw,40px);width:auto;min-width:0;object-fit:contain;object-position:left}
.pb-header-actions{display:flex;gap:8px;flex:none}

/* round icon buttons (cocoa, gear, back) */
.pb-icon-btn{position:relative;width:52px;height:52px;border-radius:50%;padding:0;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,var(--pb-brown-1),var(--pb-brown-2) 70%);border:var(--pb-stroke) solid var(--pb-outline);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.25),inset 0 -4px 0 rgba(0,0,0,.2),0 4px 0 var(--pb-brown-edge),0 6px 10px rgba(30,50,110,.25);
  transition:transform .08s,box-shadow .08s}
.pb-icon-btn img{width:62%;height:62%;object-fit:contain;pointer-events:none}
.pb-icon-btn .label{position:absolute;bottom:-6px;left:50%;translate:-50% 0;font:800 10px/1 var(--pb-font-body);color:#fff;
  background:var(--pb-brown-2);border:2px solid var(--pb-outline);border-radius:999px;padding:2px 6px}
.pb-icon-btn:active{transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.2),0 1px 0 var(--pb-brown-edge),0 2px 4px rgba(30,50,110,.25)}
.pb-icon-btn.close{background:radial-gradient(circle at 50% 30%,#FF5A45,var(--pb-close-red) 70%);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 4px 0 var(--pb-red-edge)}

/* bells tap surface: built from layers so faces can swap while ringing */
.pb-bells{position:relative;min-height:0;width:100%;display:grid;place-items:center;border:0;background:none;padding:0;touch-action:none;container-type:size}
.pb-bells .cluster{position:relative;display:block;width:min(108cqw,137cqh);margin-inline:-4cqw;aspect-ratio:960/700}
.pb-bells .cluster>*{position:absolute;height:auto;pointer-events:none}
.pb-bells .strap{left:3%;top:9%;width:94%;z-index:0}
.pb-bells .bell{width:27%;transform-origin:50% 6%}
.pb-bells .b1{left:2%;top:19%;z-index:2}.pb-bells .b2{left:21%;top:9%;width:25%;z-index:1}
.pb-bells .b3{left:39%;top:3%;width:22%;z-index:0}.pb-bells .b4{left:54%;top:9%;width:25%;z-index:1}
.pb-bells .b5{left:71%;top:19%;z-index:2}.pb-bells .b6{left:31%;top:31%;width:38%;z-index:3}
.pb-bells.ringing .bell{animation:pb-swing .42s cubic-bezier(.3,1.6,.5,1)}
.pb-bells.ringing .b2,.pb-bells.ringing .b4{animation-delay:.04s}.pb-bells.ringing .b3{animation-delay:.07s}
@keyframes pb-swing{0%{rotate:0deg}25%{rotate:-9deg}55%{rotate:7deg}80%{rotate:-3deg}100%{rotate:0deg}}

.pb-tagline{margin:0;text-align:center;font:400 clamp(20px,6.2vw,28px)/1.1 var(--pb-font-display);color:var(--pb-tagline);text-shadow:var(--pb-text-outline)}

/* chunky glossy button */
.pb-btn{--c1:var(--pb-green-1);--c2:var(--pb-green-2);--edge:var(--pb-green-edge);
  position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;width:100%;
  padding:8px 18px;border:var(--pb-stroke) solid var(--pb-outline);border-radius:var(--pb-radius-btn);
  background:linear-gradient(180deg,var(--c1),var(--c2));color:#fff;
  font:400 clamp(22px,6.4vw,30px)/1.05 var(--pb-font-display);letter-spacing:.01em;text-shadow:var(--pb-text-outline);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.16),0 6px 0 var(--edge),0 9px 14px rgba(30,50,110,.28);
  transition:transform .08s ease-out,box-shadow .08s ease-out,filter .15s}
.pb-btn::before{content:"";position:absolute;left:12px;right:12px;top:5px;height:36%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));pointer-events:none}
.pb-btn:active,.pb-btn.is-pressed{transform:translateY(5px);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.16),0 1px 0 var(--edge),0 2px 4px rgba(30,50,110,.25)}
.pb-btn:focus-visible,.pb-icon-btn:focus-visible,.pb-pill button:focus-visible{outline:4px solid #fff;outline-offset:3px}
@media (hover:hover){.pb-btn:hover{filter:brightness(1.06)}.pb-icon-btn:hover{filter:brightness(1.1)}}
.pb-btn.orange{--c1:var(--pb-orange-1);--c2:var(--pb-orange-2);--edge:var(--pb-orange-edge)}
.pb-btn.red{--c1:var(--pb-red-1);--c2:var(--pb-red-2);--edge:var(--pb-red-edge)}
.pb-btn.shake{min-height:clamp(64px,11svh,96px);font-size:clamp(22px,6.6vw,32px);text-align:left;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.16),0 6px 0 var(--edge),0 0 0 6px rgba(255,236,120,.55),0 0 28px 8px rgba(255,236,120,.65)}
.pb-btn.shake img{height:clamp(44px,8svh,68px);width:auto;flex:none}
.pb-btn.shake.is-on{--c1:#FFD54A;--c2:#F2A900;--edge:#9A6A00}
.pb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pb-row .pb-btn{min-height:clamp(48px,8svh,64px)}

/* Classic / Full pill toggle (role=radiogroup or two aria-pressed buttons) */
.pb-pill{justify-self:center;display:grid;grid-template-columns:1fr 1fr;width:min(100%,320px);min-height:48px;padding:4px;
  border-radius:999px;background:var(--pb-brown-2);border:var(--pb-stroke) solid var(--pb-outline);
  box-shadow:0 0 0 3px #F0D373,0 5px 0 3px var(--pb-brown-edge),inset 0 3px 6px rgba(0,0,0,.35)}
.pb-pill button{border:0;border-radius:999px;background:transparent;color:#FBE7C3;min-height:40px;
  font:400 clamp(18px,5.4vw,24px)/1 var(--pb-font-display);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.pb-pill button[aria-checked="true"],.pb-pill button[aria-pressed="true"]{color:var(--pb-text);text-shadow:0 1px 0 rgba(255,255,255,.6);
  background:linear-gradient(180deg,#FFE27A,#F5B010);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.15),0 0 0 2px var(--pb-outline)}

/* ---------- settings dialog ---------- */
dialog.pb-dialog{border:0;padding:0;background:transparent;width:min(92vw,420px);max-height:calc(100dvh - 32px);overflow:visible}
dialog.pb-dialog::backdrop{background:rgba(20,60,120,.45);backdrop-filter:blur(3px)}
.pb-wood{position:relative;border-style:solid;border-width:36px 34px 38px;border-image:url(ui/wood-panel.webp) 110 fill / 36px 34px 38px stretch;
  padding:52px 6px 14px;display:grid;gap:18px;filter:drop-shadow(0 10px 14px rgba(20,40,90,.35))}
.pb-dialog h2{position:absolute;left:50%;top:-58px;translate:-50% 0;margin:0;white-space:nowrap;font:400 40px/1 var(--pb-font-display);
  color:var(--pb-title-purple);text-shadow:var(--pb-text-outline)}
.pb-dialog .close{position:absolute;left:50%;top:-6px;translate:-50% 0;width:52px;height:52px}
.pb-field{display:grid;gap:8px}
.pb-field label{font:400 24px/1 var(--pb-font-display);color:#fff;text-shadow:var(--pb-text-outline)}
.pb-slider{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:6px}
.pb-slider .end{width:52px;height:52px;border-radius:50%;border:3px solid var(--pb-outline);display:grid;place-items:center;background:#fff;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.pb-slider .end img{width:78%;height:78%;object-fit:contain}
/* range: 48px hit area, 18px visible track, bell thumb */
.pb-range{--track:var(--pb-track-sens);--fill:50%;-webkit-appearance:none;appearance:none;width:100%;height:48px;margin:0;background:transparent;box-shadow:none;filter:none;touch-action:pan-y}
.pb-range::-webkit-slider-runnable-track{height:20px;border-radius:999px;background:var(--track);border:3px solid var(--pb-outline);box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
.pb-range::-moz-range-track{height:14px;border-radius:999px;background:var(--track);border:3px solid var(--pb-outline)}
.pb-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:52px;margin-top:-20px;border:0;background:transparent url(icons/bell-thumb-shadow.png) center/contain no-repeat;box-shadow:none;filter:none;border-radius:0;-webkit-tap-highlight-color:transparent}
.pb-range::-moz-range-thumb{width:44px;height:52px;border:0;box-shadow:none;filter:none;background:transparent url(icons/bell-thumb-shadow.png) center/contain no-repeat}
.pb-range.vol{--track:var(--pb-track-vol)}
.pb-range:focus-visible{outline:none}.pb-range:focus-visible::-webkit-slider-thumb{filter:none;box-shadow:none;outline:3px solid #fff;outline-offset:2px;border-radius:50%}

/* ---------- cocoa + thank you ---------- */
.pb-cocoa{grid-template-rows:auto minmax(0,1fr) auto auto auto auto auto}
.pb-cocoa .pb-header{position:relative;justify-content:center;padding-inline:58px}
.pb-cocoa .pb-header .back{position:absolute;left:0;top:0}
.pb-thanks{grid-template-rows:auto minmax(0,1fr) auto auto}
.pb-title{margin:0;text-align:center;font:400 clamp(36px,11vw,56px)/.95 var(--pb-font-display);color:#FFF4DC;text-shadow:var(--pb-text-outline)}
.pb-title .gold{color:var(--pb-gold)}
.pb-hero{min-height:0;display:grid;place-items:center;container-type:size}
.pb-hero img{height:100cqh;width:auto;max-width:86cqw;object-fit:contain}
.pb-sub{margin:0;text-align:center;font:400 clamp(16px,4.6vw,21px)/1.2 var(--pb-font-display);color:var(--pb-tagline);text-shadow:var(--pb-text-outline)}
.pb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pb-card{position:relative;display:grid;justify-items:center;gap:2px;padding:10px 4px 8px;min-height:120px;border-radius:var(--pb-radius-card);
  border:var(--pb-stroke) solid var(--pb-outline);background:linear-gradient(180deg,#FFF0CC,var(--pb-card-cream));color:var(--pb-text);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.6),0 5px 0 #B98A45;font:400 clamp(14px,4.2vw,18px)/1.1 var(--pb-font-display)}
.pb-card .amt{font-size:clamp(20px,6vw,26px)}
.pb-card img{width:70%;height:auto;margin-top:4px}
.pb-card.green{background:linear-gradient(180deg,#9AD62C,var(--pb-card-green));color:#fff;text-shadow:var(--pb-text-outline);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 5px 0 var(--pb-green-edge)}
.pb-card.purple{background:linear-gradient(180deg,#BE7BEF,var(--pb-card-purple));color:#fff;text-shadow:var(--pb-text-outline);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 5px 0 #5E2A8A}
.pb-card[aria-checked="true"]{outline:4px solid #FFE45C;outline-offset:2px;box-shadow:0 0 18px 6px rgba(255,228,92,.8)}
.pb-chip{justify-self:center;min-height:44px;padding:6px 18px;border-radius:999px;border:2px solid #6D7675;background:#E9EEF0;font:800 16px/1 var(--pb-font-body);color:#333}
.pb-fine{margin:0;text-align:center;font:800 13px/1.3 var(--pb-font-body);color:var(--pb-text)}

/* thank-you: cheering bell row over the mug + confetti/notes (decorative) */
.pb-stack{position:relative;min-height:0;display:grid;grid-template-rows:minmax(0,36fr) minmax(0,64fr)}
.pb-bells.mini{pointer-events:none}
.pb-bells .cluster.row{aspect-ratio:1000/330;width:min(100cqw,303cqh);margin-inline:0}
.pb-bells .row .strap{top:4%;left:2%;width:96%}
.pb-bells .row .bell{width:21%;top:14%;animation:pb-swing 1.6s ease-in-out infinite}
.pb-bells .row .r1{left:0;top:22%}.pb-bells .row .r2{left:19.5%;top:12%;animation-delay:.2s}.pb-bells .row .r3{left:39.5%;top:6%;animation-delay:.4s}
.pb-bells .row .r4{left:59.5%;top:12%;animation-delay:.6s}.pb-bells .row .r5{left:79%;top:22%;animation-delay:.8s}
.pb-stack .deco{position:absolute;width:clamp(22px,7vw,36px);height:auto;pointer-events:none;animation:pb-float 2.4s ease-in-out infinite alternate}
.deco.n1{left:2%;top:4%}.deco.n2{right:2%;top:2%}.deco.n3{left:4%;top:44%}.deco.n4{right:3%;top:46%}
.deco.s1{left:18%;top:40%;width:clamp(18px,5vw,28px)}.deco.s2{right:16%;top:58%;width:clamp(18px,5vw,28px)}
.deco.c1{left:12%;top:60%;width:14px;rotate:20deg}.deco.c2{right:10%;top:36%;width:14px;rotate:-15deg}.deco.c3{left:28%;top:34%;width:16px}.deco.c4{right:24%;top:70%;width:16px}
@keyframes pb-float{to{translate:0 -6px}}

/* ---------- short screens & landscape ---------- */
@media (max-height:667px){.pb-header{min-height:48px}.pb-icon-btn{width:48px;height:48px}.pb-tagline{font-size:clamp(18px,5.4vw,24px)}}
@media (orientation:landscape) and (max-height:520px){
  .pb-main{grid-template-columns:1.1fr 1fr;grid-template-rows:auto 1fr auto auto auto;max-width:900px;column-gap:20px}
  .pb-main .pb-header{grid-column:1/-1}
  .pb-main .pb-bells{grid-column:1;grid-row:2/6}
  .pb-main>:not(.pb-header):not(.pb-bells){grid-column:2}
  .pb-main .pb-tagline{align-self:end}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.pb-snow{display:none}}

/* ---------- grown-up gate + real-money confirm ---------- */
.pb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pb-gate{grid-template-rows:auto auto auto auto minmax(0,1fr)}
.pb-gate .pb-header,.pb-confirm .pb-header{position:relative;justify-content:center;padding-inline:58px}
.pb-gate .pb-header .back{position:absolute;left:0;top:0}
.pb-question{margin:0;text-align:center;font:400 clamp(32px,10vw,52px)/1.05 var(--pb-font-display);color:var(--pb-tagline);text-shadow:var(--pb-text-outline)}
.pb-answer{justify-self:center;width:min(100%,280px);min-height:clamp(52px,9svh,72px);display:grid;place-items:center;padding:6px 18px;
  border-radius:var(--pb-radius-card);border:var(--pb-stroke) solid var(--pb-outline);
  background:linear-gradient(180deg,#FFF8E8,var(--pb-cream));color:var(--pb-text);
  font:400 clamp(36px,10vw,52px)/1 var(--pb-font-display);letter-spacing:.06em;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.65),0 5px 0 #B98A45}
.pb-answer:empty::before{content:"—";color:#C4A87A;letter-spacing:.2em}
@keyframes pb-nudge{0%,100%{translate:0}20%{translate:-8px 0}40%{translate:8px 0}60%{translate:-5px 0}80%{translate:4px 0}}
.pb-answer.is-wrong{animation:pb-nudge .42s cubic-bezier(.36,.07,.19,.97)}
.pb-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.4svh,12px);width:min(100%,360px);justify-self:center;align-self:end;padding:clamp(8px,1.6svh,14px);border-radius:24px;border:var(--pb-stroke) solid var(--pb-outline);background:linear-gradient(180deg,#8B4E1F,#6A3510);box-shadow:inset 0 3px 0 rgba(255,255,255,.2),0 6px 0 #4A2306}
.pb-key{--c1:#FFF0CC;--c2:var(--pb-card-cream);--edge:#B98A45;
  position:relative;display:grid;place-items:center;min-width:48px;min-height:48px;height:clamp(48px,9.2svh,72px);padding:0;
  border:var(--pb-stroke) solid var(--pb-outline);border-radius:var(--pb-radius-btn);
  background:linear-gradient(180deg,var(--c1),var(--c2));color:var(--pb-text);
  font:400 clamp(22px,6.4vw,32px)/1 var(--pb-font-display);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -5px 0 rgba(0,0,0,.12),0 5px 0 var(--edge),0 8px 12px rgba(30,50,110,.22);
  transition:transform .08s ease-out,box-shadow .08s ease-out,filter .15s}
.pb-key::before{content:"";position:absolute;left:10px;right:10px;top:4px;height:36%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));pointer-events:none}
.pb-key:active,.pb-key.is-pressed{transform:translateY(4px);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.12),0 1px 0 var(--edge),0 2px 4px rgba(30,50,110,.22)}
.pb-key.ok{--c1:var(--pb-green-1);--c2:var(--pb-green-2);--edge:var(--pb-green-edge);color:#fff;text-shadow:var(--pb-text-outline)}
.pb-key.clear svg{width:clamp(22px,7vw,30px);height:auto;display:block;margin:auto;position:relative;z-index:1;overflow:visible}
.pb-key.clear{--c1:var(--pb-orange-1);--c2:var(--pb-orange-2);--edge:var(--pb-orange-edge);color:#fff;text-shadow:var(--pb-text-outline)}
.pb-pad[aria-disabled="true"] .pb-key{pointer-events:none;filter:saturate(.7)}
@media (hover:hover){.pb-key:hover{filter:brightness(1.06)}}
.pb-confirm{grid-template-rows:auto auto auto minmax(0,1fr) auto auto;justify-items:stretch}
.pb-confirm .pb-btn.pay{grid-row:5}
.pb-confirm .pb-btn.cancel{grid-row:6}
.pb-cup{width:clamp(72px,22vw,110px);height:auto;justify-self:center;margin-top:clamp(8px,3svh,28px)}
.pb-amount{margin:0;padding:4px 0 10px;text-align:center;font:400 clamp(64px,22vw,112px)/.95 var(--pb-font-display);color:var(--pb-gold);text-shadow:var(--pb-text-outline)}
.pb-money{margin:0;text-align:center;max-width:22em;justify-self:center;font:800 clamp(16px,4.4vw,20px)/1.35 var(--pb-font-body);color:var(--pb-text)}
.pb-btn.pay{font-size:clamp(20px,5.6vw,28px)}
.pb-icon-btn{min-width:44px;min-height:44px}
@media (orientation:landscape) and (max-height:520px){
  .pb-gate{grid-template-columns:1fr minmax(220px,1fr);grid-template-rows:auto 1fr auto;max-width:900px;column-gap:20px}
  .pb-gate .pb-header{grid-column:1/-1}
  .pb-gate .pb-question{grid-column:1;align-self:end}
  .pb-gate .pb-answer{grid-column:1;align-self:start}
  .pb-gate .pb-gate-note{grid-column:1;align-self:start}
  .pb-gate .pb-pad{grid-column:2;grid-row:2/5;align-self:stretch;width:100%}
  .pb-confirm{grid-template-columns:1fr 1.15fr;grid-template-rows:1fr auto auto auto 1fr;max-width:900px;column-gap:24px;align-items:center}
  .pb-confirm .pb-cup{grid-column:1;grid-row:2;margin-top:0;align-self:end}
  .pb-confirm .pb-amount{grid-column:1;grid-row:3;align-self:start}
  .pb-confirm .pb-money{grid-column:2;grid-row:2;justify-self:stretch;text-align:left}
  .pb-confirm .pb-btn.pay{grid-column:2;grid-row:3}
  .pb-confirm .pb-btn.cancel{grid-column:2;grid-row:4}
}