:root{
  --bg:#000;
  --btn-dark:#333333;
  --btn-mid:#a5a5a5;
  --btn-op:#ff9f0a;
  --txt:#ffffff;
  --txt-dark:#000000;
  --safe-top: env(safe-area-inset-top);
  --safe-bot: env(safe-area-inset-bottom);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
}
.app{
  width:min(430px, 100vw);
  height:min(880px, 100vh);
  padding-top:calc(12px + var(--safe-top));
  padding-bottom:calc(16px + var(--safe-bot));
  display:flex;
  flex-direction:column;
}
.displayWrap{
  padding:14px 18px 8px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.topRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:22px;
}
.connPill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #2a2a2c;
  background:#111;
  color:#cfcfcf;
}
.modeHint{
  font-size:12px;
  color:#b8b8b8;
  text-align:right;
  flex:1;
  overflow:hidden;
  white-space:nowrap;
}
.subline{
  height:18px;
  font-size:13px;
  color:#b8b8b8;
  text-align:right;
  overflow:hidden;
  white-space:nowrap;
}
.display{
  height:140px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:0 4px 6px 4px;
  font-weight:300;
  letter-spacing:-.02em;
  font-size:74px;
  line-height:1;
  overflow:hidden;
  white-space:nowrap;
}
.reveal{
  height:0;
  overflow:hidden;
  opacity:0;
  transition:opacity .08s ease;
  font-size:16px;
  text-align:right;
  color:#fff;
  white-space:pre-line;
}
.reveal.show{
  height:auto;
  opacity:1;
  margin-top:4px;
}
.keypad{
  flex:1;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  align-content:end;
  padding:0 18px 10px 18px;
}
.btn{
  border:none;
  border-radius:50%;
  font-size:30px;
  height:72px;
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .05s ease, filter .05s ease;
}
.btn:active{transform:scale(.985); filter:brightness(1.12);}
.dark{background:var(--btn-dark); color:var(--txt); font-weight:400;}
.mid{background:var(--btn-mid); color:var(--txt-dark); font-weight:700;}
.op{background:var(--btn-op); color:var(--txt); font-weight:700;}
.iconBtn{background:#1a1a1c; color:#fff; font-weight:700;}
.small{font-size:26px}
.xsmall{font-size:22px}

.overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.panel{
  width:min(420px, 100%);
  border:1px solid #1f1f1f;
  background:#0f0f10;
  border-radius:18px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.panel h2{margin:0; font-size:16px; letter-spacing:.02em;}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
input,button.pairBtn{
  border-radius:12px;
  border:1px solid #2a2a2c;
  background:#111;
  color:#fff;
  padding:10px 12px;
  font-size:14px;
}
button.pairBtn{cursor:pointer; background:#1a1a1c; font-weight:800;}
.note{font-size:12px; color:#a0a0a0; line-height:1.35}

.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.86);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal.show{display:flex;}
.modal .box{
  width:min(420px,100%);
  border:1px solid #1f1f1f;
  background:#0f0f10;
  border-radius:18px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.modal .box h3{margin:0; font-size:14px; color:#d8d8d8; letter-spacing:.02em;}
.modal .box .row{display:flex; gap:10px; align-items:center;}
.modal .box input{flex:1}
.modal .box .hint{font-size:12px;color:#a0a0a0;line-height:1.35}

/* V23 UI tweaks (no impact on Firebase/connection) */
html,body{height:100%; overflow:hidden; overscroll-behavior:none; touch-action:manipulation;}
*{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
/* Slightly bigger & closer buttons */
:root{ --btnSize: 86px; --btnGap: 9px; }
.keypad{ gap: var(--btnGap) !important; }
.btn{ width: var(--btnSize) !important; height: var(--btnSize) !important; border-radius:999px !important; }
/* Display closer to keys and slightly smaller digits */
.displayWrap{ padding-top: 34px !important; }
.display{ font-size:70px !important; }
/* Reveal (modo 1) larger + brighter; keep vertical via pre-line; hidden by JS unless holding */
#reveal{ font-size:22px !important; color:#fff !important; opacity:.98 !important; white-space:pre-line !important; }
/* Hide neocities footer/creator text */
.bottomCover{position:fixed; left:0; right:0; bottom:0; height:58px; background:#000; z-index:99999; pointer-events:none;}
a[href*="neocities"], a[href*="aerocreator.neocities.org"]{display:none !important; color:#000 !important;}
/* Replace status text with orange menu icon when connected */
#statusPill{ position:relative; }
body.connected #statusPill{ color:transparent !important; }
body.connected #statusPill::before{
  content:"";
  position:absolute; left:10px; top:50%;
  width:20px; height:14px;
  transform:translateY(-50%);
  background:
    radial-gradient(circle, var(--btn-op) 2px, transparent 3px) 0 0/20px 6px no-repeat,
    radial-gradient(circle, var(--btn-op) 2px, transparent 3px) 0 6px/20px 6px no-repeat,
    radial-gradient(circle, var(--btn-op) 2px, transparent 3px) 0 12px/20px 6px no-repeat;
}
body.connected #statusPill::after{
  content:"";
  position:absolute; left:16px; top:50%;
  width:18px; height:14px;
  transform:translateY(-50%);
  background:
    linear-gradient(var(--btn-op),var(--btn-op)) 0 1px/18px 2px no-repeat,
    linear-gradient(var(--btn-op),var(--btn-op)) 0 6px/18px 2px no-repeat,
    linear-gradient(var(--btn-op),var(--btn-op)) 0 11px/18px 2px no-repeat;
}

/* V34 CSS-ONLY (connect-safe): no JS/HTML changes */
/* Hide neocities footer text inside page */
a[href*="neocities"],a[href*="aerocreator.neocities.org"]{display:none !important;color:#000 !important;}
/* Minimal bottom cover to hide any injected footer line without covering buttons */
.bottomCover{
  position:fixed; left:0; right:0; bottom:0;
  height:calc(14px + env(safe-area-inset-bottom));
  background:#000;
  z-index:99999;
  pointer-events:none;
}
/* Ensure keypad stays above safe area */
.keypad{ padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important; }

/* Replace connected text with orange compact icon (3 dots + 3 lines) using pseudo-elements */
#statusPill{ position:fixed; top:10px; left:10px; z-index:9999; }
body.connected #statusPill{
  font-size:0 !important; line-height:0 !important;
}
body.connected #statusPill::before{
  content:""; display:inline-block; width:3px; height:3px; border-radius:50%;
  background:var(--btn-op);
  box-shadow: 0 6px 0 var(--btn-op), 0 12px 0 var(--btn-op);
  margin-right:3px; transform:translateY(1px);
}
body.connected #statusPill::after{
  content:""; display:inline-block; width:16px; height:2px; border-radius:2px;
  background:var(--btn-op);
  box-shadow: 0 6px 0 var(--btn-op), 0 12px 0 var(--btn-op);
}

/* V36 JS OK badge */
#jsokBadge{
  position:fixed;
  top:10px;
  right:10px;
  z-index:100000;
  padding:6px 10px;
  border-radius:12px;
  font:600 12px/1 -apple-system,system-ui;
  background:rgba(255,255,255,.12);
  color:#fff;
  letter-spacing:.2px;
  pointer-events:none;
  opacity:.95;
}
#jsokBadge.hide{ opacity:0; transition:opacity .25s ease; }

/* V39 connect-safe UI (no edits to calc.nomodule.js) */
#statusPill{ position:fixed; top:10px; left:10px; z-index:9999; color:transparent !important; }
body.connected #statusPill{ font-size:0 !important; line-height:0 !important; color:transparent !important; }
body.connected #statusPill::before{
  content:""; display:inline-block; width:3px; height:3px; border-radius:50%;
  background:var(--btn-op);
  box-shadow: 0 6px 0 var(--btn-op), 0 12px 0 var(--btn-op);
  margin-right:3px; transform:translateY(1px);
}
body.connected #statusPill::after{
  content:""; display:inline-block; width:16px; height:2px; border-radius:2px;
  background:var(--btn-op);
  box-shadow: 0 6px 0 var(--btn-op), 0 12px 0 var(--btn-op);
}
#modeHint{ display:none !important; }
.bottomCover{position:fixed;left:0;right:0;bottom:0;height:calc(14px + env(safe-area-inset-bottom));background:#000;z-index:99999;pointer-events:none;}
.keypad{padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;}

/* V45: overlay layering + icon only after real connect */
#pairOverlay, .overlay{ z-index:200000 !important; }
#jsokBadge{ z-index:200001 !important; }
#statusPill{ color:transparent !important; }

/* Show compact orange icon only after connection */
body.connected #statusPill{ font-size:0 !important; line-height:0 !important; }
body.connected #statusPill::before{
  content:""; display:inline-block; width:3px; height:3px; border-radius:50%;
  background:var(--btn-op);
  box-shadow: 0 6px 0 var(--btn-op), 0 12px 0 var(--btn-op);
  margin-right:3px; transform:translateY(1px);
}
body.connected #statusPill::after{
  content:""; display:inline-block; width:16px; height:2px; border-radius:2px;
  background:var(--btn-op);
  box-shadow: 0 6px 0 var(--btn-op), 0 12px 0 var(--btn-op);
}
/* Hide fixed mode hint on calculator; mode visible on monitor */
#modeHint{ display:none !important; }

/* Slightly bigger buttons */
.btn{ height:74px !important; font-size:30px !important; }
.keypad{ gap:10px !important; }

/* Reveal overlay (created by gamepatch) */
#revealEl{
  position:absolute;
  right:18px;
  top:62px;
  text-align:right;
  font-weight:700;
  font-size:22px;
  white-space:pre;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .05s ease;
}
#revealEl.show{ opacity:1; }

/* V46 clean top: remove texts, keep icon only after connect */
#statusPill{ color:transparent !important; text-shadow:none !important; }
body.connected #statusPill{ font-size:0 !important; line-height:0 !important; }
body.connected #statusPill::before{
  content:""; display:inline-block; width:3px; height:3px; border-radius:50%;
  background:var(--btn-op);
  box-shadow:0 6px 0 var(--btn-op),0 12px 0 var(--btn-op);
  margin-right:3px; transform:translateY(1px);
}
body.connected #statusPill::after{
  content:""; display:inline-block; width:16px; height:2px; border-radius:2px;
  background:var(--btn-op);
  box-shadow:0 6px 0 var(--btn-op),0 12px 0 var(--btn-op);
}
body.connected #jsokBadge{ display:none !important; }

/* V46 round buttons + slightly larger */
.btn{
  border-radius:9999px !important;
  aspect-ratio:1/1 !important;
}
.keypad{ gap:10px !important; } /* slightly tighter */
.btn{ width: calc(var(--btn-size) + 4px) !important; height: calc(var(--btn-size) + 4px) !important; }

/* V47 hide status text after connect */
body.hideStatus #statusPill{ color:transparent !important; }

/* V48 mode toast (momentary, clear) */
#modeToast{
  position:fixed;
  top:84px;
  left:50%;
  transform:translateX(-50%);
  z-index:220000;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.14);
  font:800 16px/1 -apple-system,system-ui;
  letter-spacing:.6px;
  color:var(--btn-op);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}
#modeToast.show{ opacity:1; }

/* V49 status text momentary then icon */
#statusPill{ color:transparent !important; text-shadow:none !important; }
body.connected:not(.hideStatus) #statusPill{ color:rgba(255,255,255,.75) !important; font:600 12px/1 -apple-system,system-ui !important; }
body.connected.hideStatus #statusPill{ font-size:0 !important; line-height:0 !important; }
body.connected.hideStatus #statusPill::before{
  content:""; display:inline-block; width:3px; height:3px; border-radius:50%;
  background:var(--btn-op);
  box-shadow:0 6px 0 var(--btn-op),0 12px 0 var(--btn-op);
  margin-right:3px; transform:translateY(1px);
}
body.connected.hideStatus #statusPill::after{
  content:""; display:inline-block; width:16px; height:2px; border-radius:2px;
  background:var(--btn-op);
  box-shadow:0 6px 0 var(--btn-op),0 12px 0 var(--btn-op);
}

/* V50: hard-hide 'Listo (sala...)' text, show our own icon */
#statusPill{ opacity:0 !important; pointer-events:none !important; } /* hide text completely */
#connIcon{
  position:fixed;
  top:10px; left:10px;
  z-index:250000;
  width:26px; height:18px;
  display:none;
}
#connIcon .dots{
  position:absolute; left:0; top:1px;
  width:3px; height:3px; border-radius:50%;
  background:var(--btn-op);
  box-shadow:0 6px 0 var(--btn-op),0 12px 0 var(--btn-op);
}
#connIcon .bars{
  position:absolute; left:7px; top:2px;
  width:16px; height:2px; border-radius:2px;
  background:var(--btn-op);
  box-shadow:0 6px 0 var(--btn-op),0 12px 0 var(--btn-op);
}
body.connected #connIcon{ display:block; }

/* V50: mode pop at % key */
#modePop{
  position:fixed;
  z-index:260000;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.14);
  font:900 18px/1 -apple-system,system-ui;
  color:var(--btn-op);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.98);
  transition:opacity .08s ease, transform .08s ease;
}
#modePop.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* V51: hide connection text under icon after brief moment */
#connLive{ color:rgba(255,255,255,.75); font-size:12px; }
body.hideStatus #connLive{ opacity:0 !important; }
body.connected:not(.hideStatus) #connLive{ opacity:1 !important; }
body.connected.hideStatus #connLive{ opacity:0 !important; }

/* V51: make entered-numbers subline bigger and darker gray */
.subline{
  height:30px !important;
  font-size:26px !important;
  color:#8f8f8f !important;
  margin-top:6px !important;
}

/* V55: reveal pred (mode2) larger for quick glance */
#revealEl.show{
  font-size:22px !important;
  color:#fff !important;
}

/* V56: more realistic mini-calculator icon */
#calcGlyph{
  display:inline-block;
  width:26px; height:38px;           /* vertical rectangle like iPhone */
  border-radius:7px;
  border:2px solid #fff;
  position:relative;
  box-sizing:border-box;
  opacity:.95;
  overflow:hidden;
}
#calcGlyph::before{
  content:"";
  position:absolute;
  left:3px; right:3px; top:4px;
  height:8px;
  border-radius:3px;
  background:#fff;
  opacity:.9;
}
#calcGlyph::after{
  content:"";
  position:absolute;
  left:5px; top:16px;
  width:2.2px; height:2.2px;
  border-radius:1px;
  background:#fff;
  box-shadow:
    6px 0 0 #fff, 12px 0 0 #fff,
    0 6px 0 #fff, 6px 6px 0 #fff, 12px 6px 0 #fff,
    0 12px 0 #fff, 6px 12px 0 #fff, 12px 12px 0 #fff;
  opacity:.9;
}