/* =========================================================
   PARK AVENUE - CAP THE BOTTLE  |  Kiosk game styles
   Portrait-first, fills the viewport exactly, never scrolls.
   ========================================================= */
:root{
  --navy-0:#02091c;
  --navy-1:#04102c;
  --navy-2:#071c47;
  --blue:#0b3dff;
  --blue-lt:#2e86ff;
  --blue-glow:rgba(46,134,255,.55);
  --gold:#f5b91e;
  --gold-lt:#ffd84d;
  --white:#ffffff;
  --muted:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.14);
  --good:#25d07d;
  --bad:#ff4d5e;
  --pad: clamp(18px, 3.2vmin, 46px);
  --r: clamp(14px, 2.2vmin, 28px);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  font-family:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--white);
  background:var(--navy-0);
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
}
body.kiosk{cursor:none}
img{display:block;max-width:100%;pointer-events:none}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* ---------- stage ---------- */
#stage{
  position:fixed;inset:0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(11,61,255,.30) 0%, transparent 60%),
    radial-gradient(90% 55% at 50% 108%, rgba(46,134,255,.18) 0%, transparent 62%),
    linear-gradient(178deg, var(--navy-1) 0%, var(--navy-0) 55%, #010613 100%);
}
#stage::before{
  content:"";position:absolute;inset:0;
  background-image:url(../assets/bg.jpg);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.34;mix-blend-mode:screen;filter:saturate(.7);
}
#stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 80% at 50% 45%, transparent 45%, rgba(0,0,0,.62) 100%);
}

.screen{
  position:absolute;inset:0;
  display:none;flex-direction:column;align-items:center;
  padding:var(--pad);
  text-align:center;
  z-index:2;
}
.screen.active{display:flex;animation:screenIn .45s cubic-bezier(.2,.8,.25,1) both}
@keyframes screenIn{from{opacity:0;transform:translateY(2.4vmin) scale(.99)}to{opacity:1;transform:none}}

/* ---------- shared brand bits ---------- */
.logo{width:min(74vw,52vh);filter:drop-shadow(0 0 30px rgba(46,134,255,.45))}
.logo.sm{width:min(46vw,30vh)}
.logo.xs{width:min(34vw,20vh)}

.eyebrow{
  font-size:clamp(11px,1.55vmin,17px);font-weight:700;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
  margin:0;
}
.title{
  font-size:clamp(26px,5.2vmin,64px);font-weight:900;line-height:1.02;
  letter-spacing:.02em;text-transform:uppercase;margin:0;
}
.sub{
  font-size:clamp(13px,2.05vmin,24px);font-weight:500;color:var(--muted);
  margin:0;line-height:1.45;max-width:34ch;
}
.rule{
  width:min(46vw,320px);height:3px;border-radius:3px;flex:0 0 auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.col{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.8vmin,24px);width:100%;flex:0 0 auto}
.grow{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,2.2vmin,28px);width:100%;min-height:0}
#s-reg .grow{justify-content:space-evenly}
#s-result .grow{justify-content:center;gap:clamp(12px,2.4vh,34px);padding-top:clamp(8px,1.8vh,24px)}
#resBottle{
  flex:1 1 auto;min-height:0;height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 2.4vmin 3.6vmin rgba(0,0,0,.65));
  animation:floaty 5s ease-in-out infinite;
}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:clamp(14px,2.3vmin,26px) clamp(34px,6vmin,74px);
  border-radius:999px;
  font-size:clamp(15px,2.5vmin,30px);font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;
  color:#00102e;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  box-shadow:0 .8vmin 3vmin rgba(245,185,30,.42), inset 0 -3px 0 rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:active{transform:scale(.96)}
.btn.ghost{
  color:var(--white);background:rgba(255,255,255,.06);
  border:2px solid var(--line);box-shadow:none;
}
.btn[disabled]{opacity:.32;pointer-events:none}
.btn.pulse{animation:pulse 2.1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 .8vmin 3vmin rgba(245,185,30,.35)}50%{box-shadow:0 .8vmin 5.5vmin rgba(245,185,30,.85)}}
.btn-row{display:flex;gap:clamp(10px,2vmin,22px);flex-wrap:wrap;justify-content:center}

/* ---------- 1. attract ---------- */
.hero-bottles{
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,2vmin,26px);
  width:100%;flex:1 1 auto;min-height:0;
  padding:clamp(8px,1.6vmin,20px) 0;
}
.hero-bottles img{
  height:100%;width:auto;max-width:30%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 3vmin 4vmin rgba(0,0,0,.65));
  animation:floaty 5s ease-in-out infinite;
}
.hero-bottles img:nth-child(1){height:84%;animation-delay:-.8s}
.hero-bottles img:nth-child(2){animation-delay:-1.6s}
.hero-bottles img:nth-child(3){height:84%;animation-delay:-2.4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6vmin)}}

/* ---------- 2. register ---------- */
.field{width:min(88vw,760px);text-align:center}
.field label{
  display:block;font-size:clamp(10px,1.5vmin,15px);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 .6em;
}
.field .box{
  width:100%;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(52px,7.2vh,110px);
  padding:0 clamp(16px,2.6vmin,28px);
  border-radius:var(--r);
  background:rgba(255,255,255,.055);
  border:2px solid var(--line);
  font-size:clamp(18px,3.4vh,44px);font-weight:700;letter-spacing:.06em;
  text-align:center;color:var(--white);
  transition:border-color .2s, box-shadow .2s, background .2s;
  overflow:hidden;white-space:nowrap;
}
.field .box.on{border-color:var(--blue-lt);background:rgba(46,134,255,.12);
  box-shadow:0 0 0 4px rgba(46,134,255,.16), 0 0 4vmin var(--blue-glow)}
.field .box.err{border-color:var(--bad);box-shadow:0 0 0 4px rgba(255,77,94,.16)}
.field .box .ph{color:rgba(255,255,255,.28);font-weight:500;letter-spacing:.04em}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--gold);margin-left:3px;
  animation:blink 1s steps(1) infinite;vertical-align:-.14em}
@keyframes blink{50%{opacity:0}}
.hint{font-size:clamp(10px,1.5vmin,15px);color:var(--bad);min-height:1.3em;letter-spacing:.06em;width:100%}

/* on-screen keyboard */
#kb{width:min(96vw,980px);display:flex;flex-direction:column;gap:clamp(5px,.9vmin,10px);flex:0 0 auto}
#kb .krow{display:flex;gap:clamp(5px,.9vmin,10px);justify-content:center}
#kb .key{
  flex:1 1 0;min-width:0;
  height:clamp(38px,5vh,84px);
  display:flex;align-items:center;justify-content:center;
  border-radius:clamp(8px,1.3vmin,16px);
  background:rgba(255,255,255,.085);
  border:1px solid rgba(255,255,255,.10);
  font-size:clamp(14px,2.3vmin,26px);font-weight:700;
  transition:background .1s, transform .08s;
}
#kb .key:active{background:var(--blue);transform:scale(.94)}
#kb .key.wide{flex:2.4 1 0}
#kb .key.xwide{flex:4.5 1 0}
#kb .key.act{background:rgba(245,185,30,.16);color:var(--gold-lt)}
#kb.num{gap:clamp(7px,1.3vmin,14px)}
/* width, not max-width: auto side margins would cancel the flex stretch
   and leave the keys shrink-to-fit narrow */
#kb.num .krow{width:min(66vw,486px);max-width:100%;margin:0 auto;gap:clamp(7px,1.3vmin,14px)}
#kb.num .key{
  height:clamp(48px,6vh,96px);
  border-radius:clamp(10px,1.6vmin,18px);
  font-size:clamp(20px,3.4vh,42px);
}

/* ---------- 3. bottle select ---------- */
.picks{
  display:flex;gap:clamp(8px,1.8vmin,26px);width:100%;
  flex:1 1 auto;min-height:0;align-items:stretch;justify-content:center;
}
.pick{
  position:relative;
  flex:1 1 0;max-width:34%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:clamp(4px,1vmin,12px);
  padding:clamp(10px,1.8vmin,22px);
  border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:2px solid var(--line);
  transition:transform .18s cubic-bezier(.2,.8,.25,1), border-color .18s, box-shadow .18s, background .18s;
  min-height:0;
}
.pick img{flex:1 1 auto;min-height:0;height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 2vmin 3vmin rgba(0,0,0,.6));transition:transform .18s}
.pick .nm{font-size:clamp(13px,2.1vmin,26px);font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.pick .ds{font-size:clamp(8px,1.3vmin,14px);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.pick.on{
  border-color:var(--gold);background:linear-gradient(180deg,rgba(245,185,30,.20),rgba(11,61,255,.10));
  box-shadow:0 0 5vmin rgba(245,185,30,.35);transform:translateY(-1vmin);
}
.pick.on img{transform:scale(1.05)}
.pick .tick{
  position:absolute;top:1.2vmin;right:1.2vmin;
  width:clamp(24px,3.4vmin,42px);height:clamp(24px,3.4vmin,42px);
  border-radius:50%;background:var(--gold);color:#00102e;font-weight:900;
  display:none;align-items:center;justify-content:center;font-size:clamp(13px,2vmin,22px);
}
.pick.on .tick{display:flex}

/* ---------- 4. countdown ---------- */
#s-count{justify-content:center;gap:2vmin}
#countNum{
  font-size:min(46vw,42vh);font-weight:900;line-height:.9;
  text-shadow:0 0 8vmin var(--blue-glow), 0 0 2vmin rgba(255,255,255,.6);
}
#countNum.go{font-size:min(26vw,24vh);color:var(--gold-lt)}
#countNum.anim{animation:cd .95s cubic-bezier(.2,.8,.25,1)}
@keyframes cd{0%{opacity:0;transform:scale(2.1)}30%{opacity:1;transform:scale(1)}100%{opacity:.25;transform:scale(.75)}}
#s-count .sub{font-size:clamp(14px,2.4vmin,30px);letter-spacing:.3em;text-transform:uppercase}

/* ---------- 5. game ---------- */
#s-game{padding:0}
#hud{
  width:100%;flex:0 0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(8px,1.6vmin,20px);
  padding:clamp(10px,2vmin,24px) var(--pad);
  background:linear-gradient(180deg,rgba(2,9,28,.92),rgba(2,9,28,0));
  z-index:5;
}
.hud-cell{display:flex;flex-direction:column;align-items:center;gap:.25em}
.hud-cell .lb{font-size:clamp(8px,1.25vmin,13px);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.hud-cell .vl{font-size:clamp(22px,4.4vmin,54px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
#hudScore{align-items:flex-start}
#hudScore .vl{color:var(--gold-lt);text-shadow:0 0 3vmin rgba(245,185,30,.5)}
#hudScore.bump .vl{animation:bump .32s cubic-bezier(.2,.8,.25,1)}
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
#hudTarget{flex-direction:row;gap:.7em;align-items:center;justify-content:flex-end}
#hudTarget img{height:clamp(38px,7vmin,86px);width:auto;filter:drop-shadow(0 0 2vmin var(--blue-glow))}
#hudTarget .tx{text-align:right}
#hudTarget .tx .lb{display:block;letter-spacing:.22em}
#hudTarget .tx .nm{font-size:clamp(11px,1.9vmin,22px);font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold)}

#timerRing{position:relative;width:clamp(64px,11vmin,132px);height:clamp(64px,11vmin,132px)}
#timerRing svg{transform:rotate(-90deg);width:100%;height:100%;display:block}
#timerRing circle{fill:none;stroke-width:7;stroke-linecap:round}
#timerRing .bg{stroke:rgba(255,255,255,.13)}
#timerRing .fg{stroke:var(--blue-lt);transition:stroke-dashoffset .25s linear, stroke .3s}
#timerRing.warn .fg{stroke:var(--bad)}
#timerRing.warn{animation:tick 1s ease-in-out infinite}
@keyframes tick{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
#timerTxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(18px,3.4vmin,42px);font-weight:900;font-variant-numeric:tabular-nums}

#field{position:relative;flex:1 1 auto;width:100%;min-height:0;overflow:hidden;z-index:3;touch-action:none}
#field .ground{
  position:absolute;left:0;right:0;bottom:0;height:clamp(46px,9vh,120px);
  background:linear-gradient(0deg,rgba(11,61,255,.35),transparent);
  border-top:2px solid rgba(46,134,255,.35);pointer-events:none;
}
.faller{
  position:absolute;top:0;left:0;
  will-change:transform;transform-origin:50% 50%;touch-action:none;
}
.faller img{height:100%;width:auto;filter:drop-shadow(0 1.4vmin 2.4vmin rgba(0,0,0,.55))}
.faller.tgt img{filter:drop-shadow(0 0 2.2vmin rgba(245,185,30,.5)) drop-shadow(0 1.4vmin 2.4vmin rgba(0,0,0,.55))}
.faller.gone{transition:transform .45s cubic-bezier(.2,.8,.25,1), opacity .45s ease;opacity:0}
/* ---- the branded catch bucket ---- */
#bucket{
  position:absolute;left:0;bottom:clamp(12px,2.4vh,40px);
  width:26%;max-width:340px;min-width:120px;
  z-index:4;will-change:transform;pointer-events:none;
  filter:drop-shadow(0 1.2vmin 2.4vmin rgba(0,0,0,.6));
}
#bucket .rim{
  height:clamp(9px,1.5vmin,18px);
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold) 55%,#b8860b);
  box-shadow:0 0 3vmin rgba(245,185,30,.55), inset 0 -2px 3px rgba(0,0,0,.25);
}
#bucket .body{
  position:relative;
  height:clamp(52px,9vmin,120px);
  margin:-2px auto 0;width:100%;
  clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);
  background:
    linear-gradient(180deg,rgba(11,61,255,.55),rgba(4,16,44,.98) 62%),
    linear-gradient(90deg,rgba(0,0,0,.45),transparent 22%,transparent 78%,rgba(0,0,0,.45));
  border-top:2px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
}
#bucket .body::before{ /* gold brand band, like the bottle */
  content:"";position:absolute;left:0;right:0;top:22%;height:11%;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  opacity:.9;
}
#bucket .body img{
  position:relative;width:74%;margin-top:8%;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
#bucket.catch{animation:gulp .3s cubic-bezier(.2,.9,.3,1)}
@keyframes gulp{0%{transform:translate3d(var(--bx),0,0) scaleY(1)}
  40%{transform:translate3d(var(--bx),0,0) scale(1.06,.9)}
  100%{transform:translate3d(var(--bx),0,0) scaleY(1)}}
#bucket.miss{animation:bshake .34s ease}
@keyframes bshake{0%,100%{filter:drop-shadow(0 1.2vmin 2.4vmin rgba(0,0,0,.6))}
  50%{filter:drop-shadow(0 0 2.4vmin rgba(255,77,94,.9))}}

#dragHint{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(74px,13vmin,168px);z-index:5;pointer-events:none;
  font-size:clamp(10px,1.6vmin,17px);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
  animation:hintPulse 1.5s ease-in-out infinite;
}
#dragHint.hide{display:none}
@keyframes hintPulse{0%,100%{opacity:.35}50%{opacity:1}}

.capfx{position:absolute;pointer-events:none;z-index:6;animation:capDrop .55s cubic-bezier(.3,1.3,.5,1) forwards}
@keyframes capDrop{0%{opacity:0;transform:translate(-50%,-160%) scale(.65)}
  40%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  100%{opacity:0;transform:translate(-50%,-40%) scale(1.15)}}
.float{
  position:absolute;pointer-events:none;z-index:7;
  font-size:clamp(22px,4.2vmin,52px);font-weight:900;letter-spacing:.04em;
  animation:floatUp .85s cubic-bezier(.2,.8,.25,1) forwards;
  text-shadow:0 .4vmin 1.4vmin rgba(0,0,0,.6);
}
.float.up{color:var(--gold-lt)}
.float.down{color:var(--bad)}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,0) scale(.6)}
  25%{opacity:1;transform:translate(-50%,-2vmin) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-11vmin) scale(1)}}
.ripple{position:absolute;pointer-events:none;z-index:6;width:18vmin;height:18vmin;
  border-radius:50%;border:.5vmin solid var(--gold);animation:rip .55s ease-out forwards}
@keyframes rip{from{transform:translate(-50%,-50%) scale(.15);opacity:.95}
  to{transform:translate(-50%,-50%) scale(1);opacity:0}}
#flash{position:absolute;inset:0;pointer-events:none;z-index:8;opacity:0}
#flash.good{animation:fl .32s ease;background:radial-gradient(circle,rgba(245,185,30,.28),transparent 70%)}
#flash.bad{animation:fl .32s ease;background:radial-gradient(circle,rgba(255,77,94,.28),transparent 70%)}
@keyframes fl{0%{opacity:1}100%{opacity:0}}

/* ---------- 6. result ---------- */
.score-card{
  width:min(90vw,780px);
  padding:clamp(20px,3.4vh,54px);
  border-radius:calc(var(--r) * 1.3);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  border:2px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vmin,16px);
}
.score-card.win{border-color:var(--gold);box-shadow:0 0 7vmin rgba(245,185,30,.35)}
.score-card.lose{border-color:rgba(255,77,94,.55)}
.big-score{font-size:clamp(56px,15vmin,190px);font-weight:900;line-height:.88;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.verdict{font-size:clamp(24px,5.4vmin,68px);font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.verdict.win{color:var(--gold-lt);text-shadow:0 0 4vmin rgba(245,185,30,.6)}
.verdict.lose{color:var(--bad)}
.stats{display:flex;gap:clamp(10px,2.4vmin,34px);flex-wrap:wrap;justify-content:center}
.stat{display:flex;flex-direction:column;align-items:center;gap:.2em;min-width:clamp(58px,10vmin,120px)}
.stat .v{font-size:clamp(18px,3.2vmin,40px);font-weight:900;font-variant-numeric:tabular-nums}
.stat .k{font-size:clamp(8px,1.25vmin,13px);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.playerline{font-size:clamp(13px,2.2vmin,28px);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.playerline span{color:var(--gold)}

.conf{position:absolute;top:-8vmin;width:1.1vmin;height:2.4vmin;border-radius:1px;z-index:9;
  pointer-events:none;animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(115vh) rotate(760deg)}}

/* ---------- footer / brand strip ---------- */
.brandbar{
  flex:0 0 auto;width:100%;
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vmin,18px);
  font-size:clamp(9px,1.3vmin,14px);letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
  padding-top:clamp(6px,1.2vmin,14px);
}
.brandbar img{height:clamp(14px,2.2vmin,26px);width:auto;opacity:.75}

/* ---------- loading screen ---------- */
#loader{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,2.2vh,30px);padding:var(--pad);text-align:center;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(11,61,255,.30), transparent 60%),
    linear-gradient(178deg,var(--navy-1),var(--navy-0) 60%,#010613);
  transition:opacity .5s ease, visibility .5s;
}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
#loadBar{
  width:min(72vw,560px);height:clamp(8px,1.3vh,18px);
  border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.10);
  border:1px solid var(--line);
}
#loadFill{
  display:block;height:100%;width:0%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--blue-lt),var(--gold-lt),var(--gold));
  box-shadow:0 0 2.4vmin rgba(245,185,30,.6);
  transition:width .3s cubic-bezier(.3,.9,.4,1);
}
#loadPct{
  font-size:clamp(28px,5.4vh,72px);font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--gold-lt);
  text-shadow:0 0 3vmin rgba(245,185,30,.45);
}
#loadWhat{font-size:clamp(11px,1.7vh,18px);letter-spacing:.24em;text-transform:uppercase}

#netpill{
  position:fixed;top:8px;left:50%;transform:translateX(-50%);
  z-index:99;padding:6px 16px;border-radius:99px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;background:rgba(255,77,94,.92);color:#fff;display:none;
}
#netpill.on{display:block}

#adminDot{position:fixed;left:0;bottom:0;width:56px;height:56px;z-index:100;opacity:0}

@media (orientation:landscape){
  .logo{width:min(42vw,34vh)}
  .logo.sm{width:min(26vw,22vh)}
  .logo.xs{width:min(20vw,16vh)}
  #kb .key{height:clamp(32px,6.6vh,60px)}
  #kb.num .key{height:clamp(42px,8.5vh,84px);font-size:clamp(20px,4.4vh,38px)}
  .picks{max-width:min(92vw,1400px);margin:0 auto}
}