/* iOS Calculator — Pixel-Perfect Replica */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

html, body {
    height: 100%;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background: #000;
    font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
    /* Prevent iOS pinch-to-zoom (CSS level) */
    touch-action: manipulation;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ─── Outer wrapper ─── */
#calculator {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ─── Calculator Container ─── */
.calc {
    width: 100%;
    max-width: 430px;
    height: 100%;
    max-height: 932px;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 16px env(safe-area-inset-bottom, 32px) 16px;
    padding-bottom: max(env(safe-area-inset-bottom, 32px), 32px);
}

/* ─── Display Area ─── */
.calc-display {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 12px 16px 12px;
    min-height: 80px;
    overflow: hidden;
}

.calc-display-text {
    color: #fff;
    font-size: 96px;
    font-weight: 200;
    line-height: 1;
    text-align: right;
    letter-spacing: -3px;
    white-space: nowrap;
    width: 100%;
    font-variant-numeric: tabular-nums;
}

/* Shrink for long numbers */
.calc-display-text.shrink-1 { font-size: 76px; letter-spacing: -2px; }
.calc-display-text.shrink-2 { font-size: 62px; letter-spacing: -1.5px; }
.calc-display-text.shrink-3 { font-size: 50px; letter-spacing: -1px; }
.calc-display-text.shrink-4 { font-size: 42px; letter-spacing: -0.5px; }

/* ─── Button Grid ─── */
.calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    flex-shrink: 0;
}

/* ─── Base Button ─── */
.calc-btn {
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    position: relative;
    overflow: hidden;
    transition: none;
}

/* Pressed highlight effect */
.calc-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,0.15);
    opacity: 0;
    transition: opacity 0.08s ease-out;
    pointer-events: none;
}
.calc-btn:active::after {
    opacity: 1;
    transition: none;
}

.calc-btn span {
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
}

/* ─── Number Buttons (dark gray #333) ─── */
.calc-btn-num {
    background: #333;
}
.calc-btn-num span {
    color: #fff;
}

/* ─── Zero Button (wide, spans 2 columns) ─── */
.calc-btn-zero {
    grid-column: span 2;
    border-radius: 999px;
    aspect-ratio: auto;
    height: 100%;
    justify-content: flex-start;
    padding-left: 34px;
}

/* ─── Operator Buttons (orange #f09a36) ─── */
.calc-btn-op {
    background: #f09a36;
}
.calc-btn-op span {
    color: #fff;
    font-size: 44px;
    font-weight: 300;
}

/* Active operator = white bg, orange text */
.calc-btn-op.active {
    background: #fff;
}
.calc-btn-op.active span {
    color: #f09a36;
}
.calc-btn-op.active::after {
    display: none; /* no highlight on active state */
}

/* ─── Function Buttons (light gray #a5a5a5) ─── */
.calc-btn-fn {
    background: #a5a5a5;
}
.calc-btn-fn span {
    color: #000;
    font-size: 28px;
    font-weight: 500;
}
/* Override highlight for light buttons — darken instead of lighten */
.calc-btn-fn::after {
    background: rgba(0,0,0,0.12);
}

/* ─── Desktop: vertically center the calculator ─── */
@media (min-width: 431px) {
    .calc {
        border-radius: 44px;
        overflow: hidden;
        max-height: min(932px, 96vh);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
    }
}

/* ─── Short screens (landscape / small phones) ─── */
@media (max-height: 620px) {
    .calc-display-text { font-size: 56px; }
    .calc-grid { gap: 8px; }
    .calc-btn span { font-size: 26px; }
    .calc-btn-op span { font-size: 32px; }
    .calc-btn-fn span { font-size: 22px; }
    .calc-display { min-height: 50px; padding-bottom: 8px; }
}

/* ─── Medium height phones (iPhone SE etc.) ─── */
@media (min-height: 621px) and (max-height: 740px) {
    .calc-display-text { font-size: 72px; }
    .calc-grid { gap: 11px; }
    .calc-btn span { font-size: 32px; }
    .calc-btn-op span { font-size: 38px; }
}