/* Telephone: one clear activity, large faces and optional number pad. */
.phone-stage{display:block;max-width:470px;margin:auto;--caller-size:140px}
.phone-view-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.phone-view-tabs button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:18px;background:#202c47;color:#c3cde5;font-size:16px;font-weight:750}
.phone-view-tabs button span{font-size:26px;line-height:1}
.phone-view-tabs button[aria-pressed=true]{background:#d1c7ff;color:#292343;box-shadow:0 3px 0 #877db0}
.phone-stage[data-phone-view=friends] .dialpad{display:none}
.phone-stage[data-phone-view=friends] .phone-friend{height:calc(var(--caller-size) + 12px);min-height:0}
.phone-stage[data-phone-view=friends] .phone-friend>span:first-child{font-size:110px}
.phone-stage[data-phone-view=friends] .phone-friend>span.phone-portrait{width:var(--caller-size);height:var(--caller-size);line-height:var(--caller-size);border-radius:28px}
.phone-stage[data-phone-view=friends] .friend-line>span{display:none}
.phone-stage[data-phone-view=friends] .friend-line{justify-content:center;margin-top:5px}
.phone-stage[data-phone-view=friends] #callCaption{text-align:center}
.phone-stage[data-phone-view=numbers] .contact-groups,.phone-stage[data-phone-view=numbers] .contacts,.phone-stage[data-phone-view=numbers] .call-play{display:none}
.phone-stage[data-phone-view=numbers] .dialpad{margin-top:12px}
.phone-stage .contact-groups{grid-template-columns:repeat(3,minmax(0,1fr))}
.phone-stage .contact-groups button{min-height:44px;font-size:12px;padding:5px 2px}
.phone-stage .call-actions{gap:8px}
.phone-stage .call-button{gap:8px;font-size:17px;min-width:0}
.phone-stage .hangup-button{flex:0 0 56px;width:56px}
.caller-veil{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--caller-size);height:var(--caller-size);border-radius:28px;touch-action:none;cursor:pointer}
.caller-veil[hidden],.call-play[hidden]{display:none!important}
.swipe-cue{display:none;position:absolute;z-index:4;pointer-events:none;left:50%;top:50%;width:44px;height:44px;margin:-22px;border-radius:50%;border:3px solid #fff;background:#ffffff22;box-shadow:0 2px 8px #30355c30}
.swipe-cue i{position:absolute;top:11px;left:8px;width:23px;height:12px;border-bottom:3px solid #fff}
.swipe-cue i:after{content:'';position:absolute;right:0;bottom:-6px;width:9px;height:9px;border-right:3px solid #fff;border-top:3px solid #fff;transform:rotate(45deg)}
.caller-veil.show-swipe+.swipe-cue{display:block;animation:caller-swipe 1.3s ease-in-out 2 both}
.call-play{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.call-play button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:68px;border-radius:20px;background:#efdcff;color:#3d3153;font-size:16px;font-weight:750;box-shadow:0 3px 0 #8e7eaa}
.call-play button+button{background:#ffdfb8;box-shadow:0 3px 0 #af8c64;color:#533d28}
.call-play svg{width:40px;height:40px;flex-shrink:0}
.call-play button:active{transform:translateY(2px)}
.waving .phone-friend>span:first-child{animation:caller-wave .5s ease-in-out 3}
.clapping .phone-friend>span:first-child{animation:caller-clap .45s ease-in-out 3}
.phone-stage.ringing .phone-friend{animation-iteration-count:3}
@keyframes caller-swipe{0%,100%{transform:translateX(-30px);opacity:.5}50%{transform:translateX(30px);opacity:1}}
@keyframes caller-wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}70%{transform:rotate(8deg)}}
@keyframes caller-clap{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.05)}}
@media(max-height:750px) and (orientation:portrait){.phone-stage{--caller-size:112px}.phone-view-tabs{margin-bottom:10px}.phone-view-tabs button{min-height:48px}.call-play{margin:9px 0}.call-play button{min-height:58px;font-size:14px}.call-play svg{width:32px;height:32px}.phone-stage .phone-display{padding:9px 14px}.phone-stage[data-phone-view=friends] #callCaption{font-size:12px;min-height:36px}.phone-stage .friend-line strong{font-size:19px}.phone-stage[data-phone-view=friends] .phone-friend>span:first-child{font-size:90px}}
@media(prefers-reduced-motion:reduce){.phone-stage *, .phone-stage *:after{animation:none!important;transition:none!important}}