/* =====================================================================
   Calcolatrice — glass display + glossy aqua keys (Frutiger Aero)
   ===================================================================== */
.calc-win .win-body { overflow: hidden; }
.app.calc {
  padding: 12px 12px 0; gap: 10px;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(225,244,255,0.6), rgba(190,225,255,0.45));
  position: relative;
}

/* ---------- glass display ---------- */
.app.calc .calc-display {
  flex: none; position: relative; overflow: hidden;
  height: 118px; padding: 12px 16px 10px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(200,236,255,0.55) 50%, rgba(150,210,255,0.5) 51%, rgba(220,242,255,0.7) 100%);
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 6px 18px rgba(0,40,120,0.25), 0 2px 8px rgba(0,60,150,0.25) inset, 0 1px 0 rgba(255,255,255,0.9) inset;
  transition: box-shadow 0.3s ease;
}
.app.calc .calc-display::before { height: 42%; opacity: 0.85; }
.app.calc .calc-expr {
  font: 500 0.95rem var(--font); color: rgba(11,58,128,0.7);
  min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8); position: relative; z-index: 1;
}
.app.calc .calc-main {
  font: 700 2.9rem/1.15 var(--font-display); color: #0b3a80;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(0,60,160,0.25);
  letter-spacing: -0.01em; position: relative; z-index: 1;
  transition: color 0.3s ease, font-size 0.15s ease;
}
.app.calc .calc-main.locked { font-size: 1.55rem; color: #8b5a00; text-shadow: 0 1px 0 rgba(255,255,255,0.9); animation: calc-lock-in 0.35s cubic-bezier(.2,1.4,.3,1) both; }
.app.calc .calc-main.error { color: #c2321c; }
@keyframes calc-lock-in { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* unlock: glow + sparkles */
.app.calc .calc-sparkle {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2;
  background: url("../../assets/ui/sparkles.png") center / 115% auto no-repeat; filter: brightness(1.4) drop-shadow(0 0 4px #fff);
}
.app.calc .calc-display.unlocked { animation: calc-glow 1.8s ease both; }
.app.calc .calc-display.unlocked .calc-sparkle { animation: calc-sparkle 1.8s ease both; }
.app.calc .calc-display.unlocked .calc-main { animation: calc-reveal 0.6s cubic-bezier(.2,1.4,.3,1) both; color: #1c7a10; }
@keyframes calc-glow {
  0%   { box-shadow: 0 6px 18px rgba(0,40,120,0.25), 0 0 0 rgba(160,255,120,0); }
  25%  { box-shadow: 0 6px 18px rgba(0,40,120,0.25), 0 0 34px rgba(160,255,120,0.95), 0 0 14px rgba(255,255,255,1) inset; }
  100% { box-shadow: 0 6px 18px rgba(0,40,120,0.25), 0 0 0 rgba(160,255,120,0); }
}
@keyframes calc-sparkle { 0% { opacity: 0; transform: scale(0.85) rotate(-5deg); } 25% { opacity: 1; } 65% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.3) rotate(6deg); } }
@keyframes calc-reveal { from { transform: scale(0.6); filter: blur(4px); } to { transform: none; filter: none; } }

/* ---------- keys ---------- */
.app.calc .calc-keys {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 8px;
  padding-bottom: 8px;
}
.app.calc .calc-key {
  position: relative; overflow: hidden; cursor: pointer; user-select: none;
  border-radius: 14px; border: 1px solid #7fa9d8;
  font: 600 1.45rem var(--font-display); color: #0b3a80;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
  background: linear-gradient(180deg, #ffffff 0%, #eaf6ff 45%, #cfe6fb 52%, #e3f2ff 100%);
  box-shadow: 0 3px 7px rgba(0,40,120,0.25), 0 1px 0 rgba(255,255,255,0.95) inset, 0 -2px 4px rgba(0,60,150,0.08) inset;
  transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.app.calc .calc-key::before {
  content: ""; position: absolute; left: 5%; right: 5%; top: 4%; height: 46%;
  border-radius: 12px 12px 40% 40% / 12px 12px 60% 60%;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.15));
  pointer-events: none;
}
.app.calc .calc-key span { position: relative; z-index: 1; }
.app.calc .calc-key:hover { filter: brightness(1.06) saturate(1.1); box-shadow: 0 4px 12px rgba(0,60,160,0.35), 0 0 12px rgba(120,210,255,0.7), 0 1px 0 rgba(255,255,255,0.95) inset; }
.app.calc .calc-key:active, .app.calc .calc-key.pressed { transform: translateY(2px) scale(0.97); filter: brightness(0.94); box-shadow: 0 1px 3px rgba(0,40,120,0.3), 0 2px 5px rgba(0,40,120,0.25) inset; }
.app.calc .calc-key.op {
  color: #fff; text-shadow: 0 -1px 0 rgba(0,40,120,0.7); border-color: #0b4ea8;
  background: linear-gradient(180deg, #a9ecff 0%, #3aa8ff 45%, #0f7de8 52%, #0b5fd6 100%);
}
.app.calc .calc-key.op::before { background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.1)); }
.app.calc .calc-key.red {
  color: #fff; text-shadow: 0 -1px 0 rgba(120,20,0,0.6); border-color: #8f2312;
  background: linear-gradient(180deg, #ffd0c6 0%, #ff7a5c 45%, #e0432a 52%, #c2321c 100%);
}
.app.calc .calc-key.eq {
  color: #fff; text-shadow: 0 -1px 0 rgba(20,80,0,0.6); border-color: #2f7a0c; font-size: 1.8rem;
  background: linear-gradient(180deg, #e2ffb0 0%, #a4f04a 45%, #7ddc2b 52%, #3f9a12 100%);
  box-shadow: 0 3px 7px rgba(0,40,120,0.25), 0 0 14px rgba(125,220,43,0.45), 0 1px 0 rgba(255,255,255,0.95) inset;
}

/* ---------- status + toast ---------- */
.app.calc .app-status { display: flex; justify-content: space-between; gap: 8px; margin: 0 -12px; white-space: nowrap; }
.app.calc .calc-msg { overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.app.calc .calc-spent { font-weight: 700; color: #0b5fd6; flex: none; }
.app.calc .calc-toast {
  position: absolute; left: 50%; bottom: 48px; transform: translate(-50%, 20px); opacity: 0;
  padding: 9px 18px; border-radius: 999px; z-index: 5; pointer-events: none; white-space: nowrap;
  font: 700 0.95rem var(--font); color: #fff; text-shadow: 0 -1px 0 rgba(20,80,0,0.6);
  background: linear-gradient(180deg, #e2ffb0 0%, #a4f04a 45%, #7ddc2b 52%, #3f9a12 100%);
  border: 1px solid #2f7a0c; box-shadow: 0 6px 18px rgba(0,40,120,0.35), 0 0 16px rgba(125,220,43,0.6), 0 1px 0 rgba(255,255,255,0.9) inset;
  transition: transform 0.3s cubic-bezier(.2,1.3,.3,1), opacity 0.3s ease;
}
.app.calc .calc-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- paywall dialog ---------- */
.dlg.calc-paywall { width: min(500px, 94vw); }
.dlg.calc-paywall .calc-pay { display: flex; gap: 16px; align-items: center; }
.dlg.calc-paywall .calc-pay-img { width: 96px; height: 96px; flex: none; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,20,80,0.4)); animation: float 3s ease-in-out infinite; }
.dlg.calc-paywall .calc-pay-text p { margin: 0 0 6px; }
.dlg.calc-paywall .calc-pay-note { font-size: 0.78rem; opacity: 0.65; }
.dlg.calc-paywall .calc-expired { color: #c2321c; font-weight: 700; }
.dlg.calc-paywall .dlg-buttons { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; }
.dlg.calc-paywall .dlg-buttons .aqua-btn { font-size: 0.84rem; padding: 0.55em 0.8em; white-space: nowrap; }
.dlg.calc-paywall .calc-proc { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 6px; min-height: 96px; justify-content: center; }
.dlg.calc-paywall .calc-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 5px solid rgba(58,168,255,0.25); border-top-color: #0b5fd6; border-right-color: #3aa8ff;
  box-shadow: 0 0 12px rgba(120,210,255,0.6);
  animation: calc-spin 0.8s linear infinite;
}
@keyframes calc-spin { to { transform: rotate(360deg); } }
.dlg.calc-paywall .calc-proc-msg { font-weight: 700; font-size: 1.05rem; }
.dlg.calc-paywall .calc-proc-msg.flip { animation: calc-flip 0.25s ease both; }
@keyframes calc-flip { from { opacity: 0.35; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.dlg.calc-paywall .calc-proc-sub { font-size: 0.8rem; opacity: 0.65; }
.dlg.calc-paywall .calc-proc.ok .calc-proc-msg { color: #1c7a10; }
.dlg.calc-paywall .calc-check {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font: 700 1.6rem var(--font-display); text-shadow: 0 -1px 0 rgba(20,80,0,0.6);
  background: linear-gradient(180deg, #e2ffb0 0%, #a4f04a 45%, #7ddc2b 52%, #3f9a12 100%);
  border: 1px solid #2f7a0c; box-shadow: 0 4px 12px rgba(0,40,120,0.3), 0 0 16px rgba(125,220,43,0.7), 0 1px 0 rgba(255,255,255,0.9) inset;
  animation: calc-lock-in 0.4s cubic-bezier(.2,1.4,.3,1) both;
}