:root{--green:#25ef3f;--green2:#0fb52d;--black:#030503;--panel:rgba(0,0,0,.84);--white:#f8f8f8}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:#000;color:var(--white);font-family:Arial,Helvetica,sans-serif;overflow:hidden;touch-action:manipulation}
.app-shell{width:100vw;height:100vh;padding:1.5vh 2vw 1.5vh;display:grid;grid-template-columns:43% 57%;gap:1.8vw;background:radial-gradient(circle at 50% 50%,rgba(26,255,64,.15),#000 66%)}
.brand-panel{display:flex;align-items:center;justify-content:center;min-width:0}
.brand-logo{width:100%;height:96vh;object-fit:contain;object-position:center;filter:drop-shadow(0 0 28px rgba(37,239,63,.55))}
.kiosk-panel{min-width:0;display:grid;grid-template-rows:auto auto 1fr auto;align-content:center;gap:1.4vh;padding-right:1vw}
.title-block{text-align:center;margin-bottom:.4vh}.welcome{letter-spacing:.5em;font-weight:900;font-size:clamp(15px,1.6vw,28px)}
h1{margin:.35vh 0;color:var(--green);font-size:clamp(42px,4.9vw,88px);line-height:.9;text-shadow:0 0 20px rgba(37,239,63,.75)}
.title-block p{margin:.3vh 0;letter-spacing:.3em;font-weight:900;font-size:clamp(13px,1.35vw,24px)}
.screen{display:none;border:2px solid var(--green);border-radius:22px;background:var(--panel);box-shadow:0 0 25px rgba(37,239,63,.28);padding:2vh 3vw;text-align:center}.screen.active{display:block}
.label{display:block;color:var(--green);font-weight:900;letter-spacing:.08em;font-size:clamp(17px,1.6vw,28px);margin-bottom:1vh}
.phone-input,.name-input{width:100%;background:#030303;border:2px solid var(--green);border-radius:16px;color:white;text-align:center;font-weight:900;outline:none;box-shadow:inset 0 0 14px rgba(37,239,63,.28);font-size:clamp(34px,4.1vw,72px);padding:1.1vh 1vw;letter-spacing:.12em}.name-input{font-size:clamp(25px,3vw,50px);letter-spacing:.03em}
.submit-btn,.back-btn{border:0;border-radius:18px;background:linear-gradient(180deg,#45fa4b,#12c832);color:#000;font-weight:900;font-size:clamp(19px,1.8vw,32px);padding:1.4vh 4.5vw;margin-top:1.4vh;cursor:pointer;box-shadow:0 0 18px rgba(37,239,63,.45)}.back-btn{background:#111;color:var(--green);border:2px solid var(--green)}
.small-note{margin-top:1.1vh;color:#e8e8e8;font-size:clamp(13px,1.15vw,20px)}h2{font-size:clamp(32px,3.7vw,66px);color:var(--green);margin:0 0 .8vh}.screen-text{font-size:clamp(18px,1.7vw,30px);margin:.7vh}.visit-counter{font-size:clamp(58px,6.4vw,118px);font-weight:900;color:var(--green);text-shadow:0 0 24px rgba(37,239,63,.6)}.celebration{background:radial-gradient(circle,rgba(37,239,63,.22),#020202 70%)}.free-text{font-size:clamp(34px,4.4vw,80px);font-weight:900;color:var(--green);text-shadow:0 0 25px var(--green)}
.rewards-row,.address{border:1.5px solid var(--green);background:rgba(0,0,0,.76);border-radius:16px}.rewards-row{display:grid;grid-template-columns:repeat(3,1fr);padding:1vh .8vw;text-align:center}.rewards-row div{font-size:clamp(20px,2vw,36px);border-right:1px solid rgba(37,239,63,.45)}.rewards-row div:last-child{border-right:0}.rewards-row span{display:block;font-size:clamp(10px,.9vw,16px);font-weight:900;letter-spacing:.08em;margin-top:.3vh}.address{padding:1vh;text-align:center;font-size:clamp(16px,1.45vw,26px)}
.touch-keyboard{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,70vw);background:rgba(0,0,0,.97);border:3px solid var(--green);border-radius:28px;display:none;grid-template-columns:repeat(3,1fr);gap:1.2vw;padding:2.2vh 2vw;z-index:20;box-shadow:0 0 55px rgba(37,239,63,.62)}.touch-keyboard.active{display:grid}
.key{min-height:clamp(70px,10vh,112px);border:2px solid var(--green);border-radius:18px;background:#101010;color:#fff;font-size:clamp(32px,4vw,62px);font-weight:900;box-shadow:inset 0 0 14px rgba(37,239,63,.18)}.key.action{background:var(--green);color:#000}.key.wide{grid-column:span 3}.key.space{grid-column:span 3}
.touch-keyboard.letters{width:min(1050px,86vw);grid-template-columns:repeat(10,1fr);gap:.65vw;padding:1.6vh 1.5vw}.touch-keyboard.letters .key{min-height:clamp(52px,7.2vh,82px);font-size:clamp(22px,2.4vw,42px)}.touch-keyboard.letters .key.wide{grid-column:span 2}.touch-keyboard.letters .key.space{grid-column:span 4}
@media (max-height:740px){.app-shell{grid-template-columns:40% 60%;gap:1vw}.brand-logo{height:94vh}h1{font-size:clamp(36px,4.2vw,70px)}.screen{padding:1.4vh 2.4vw}.key{min-height:42px}.rewards-row{display:none}.address{font-size:18px;padding:.7vh}}
@media (orientation:portrait){body:before{content:'Please rotate tablet to landscape mode';position:fixed;inset:0;background:#000;color:var(--green);z-index:99;display:flex;align-items:center;justify-content:center;text-align:center;font-size:32px;font-weight:900;padding:30px}.app-shell{display:none}}

.keyboard-display{
  grid-column:1 / -1;
  min-height:clamp(64px,9vh,105px);
  border:2px solid var(--green);
  border-radius:18px;
  background:#050505;
  color:#fff;
  font-size:clamp(36px,5vw,72px);
  font-weight:900;
  letter-spacing:.12em;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 22px rgba(37,239,63,.22), 0 0 18px rgba(37,239,63,.2);
  margin-bottom:.6vh;
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
}
.touch-keyboard.letters .keyboard-display{
  font-size:clamp(26px,3.2vw,48px);
  letter-spacing:.05em;
}