*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#111;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;gap:10px;padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));max-width:720px;margin:0 auto}
.turn{flex:0 0 auto;text-align:center;font-weight:800;font-size:clamp(20px,6vw,30px);padding:12px 10px;border-radius:14px;letter-spacing:.2px}
.t-es .turn{background:#FFC400;color:#111}
.t-en .turn{background:#1E63D6;color:#fff}
.panel{flex:0 1 auto;max-height:42%;overflow-y:auto;background:#fff;color:#111;border-radius:16px;padding:12px 14px;-webkit-user-select:text;user-select:text}
.hint{font-size:clamp(22px,6.4vw,32px);font-weight:700;line-height:1.25;text-align:center}
.lbl{font-size:15px;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
.orig{font-size:clamp(17px,4.6vw,22px);line-height:1.3;color:#444;margin-top:2px}
.lbl2{margin-top:12px;border-top:1px solid #ddd;padding-top:8px}
.trans{font-size:clamp(26px,7.6vw,40px);line-height:1.22;font-weight:800;color:#000;margin-top:2px}
.msg{font-size:clamp(20px,5.6vw,26px);font-weight:700;color:#B00020;text-align:center;line-height:1.3}
.exchange+.msg{margin-top:8px}
.big{flex:1 1 auto;min-height:40vh;width:100%;border:0;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;cursor:pointer;font:inherit;touch-action:manipulation;transition:background-color .2s,transform .08s;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.big:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.big:focus-visible,.swap:focus-visible{outline:4px solid #fff;outline-offset:3px}
.t-es .big{background:#FFC400;color:#111}
.t-en .big{background:#1E63D6;color:#fff}
.big.rec{background:#D50000 !important;color:#fff !important;animation:pulse 1.2s ease-in-out infinite}
.big.busy{background:#3A3F44 !important;color:#fff !important}
.big-icon{font-size:clamp(64px,22vw,120px);line-height:1}
.big-text{font-size:clamp(28px,8.4vw,46px);font-weight:900;text-align:center;line-height:1.12}
.big-sub{font-size:clamp(17px,4.6vw,22px);font-weight:600;opacity:.9;text-align:center}
.big-sub:empty{display:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(213,0,0,.7)}50%{box-shadow:0 0 0 14px rgba(213,0,0,0)}}
.swap{flex:0 0 auto;align-self:center;background:transparent;color:#ddd;border:2px solid #666;border-radius:999px;padding:10px 18px;font-size:16px;font-weight:700;cursor:pointer;touch-action:manipulation}
@media (prefers-reduced-motion:reduce){.big.rec{animation:none}}