/* Phone game — tennis-lawn theme, reusing the display's design tokens:
   lawn gradient + mowing stripes, cream text, gold accents, serif
   headlines, big touch targets, no navigation. */

:root{
  --green-deep:#16300F;
  --green:#234A1E;
  --cream:#F3EDDC;
  --white:#FBF9F2;
  --gold:#C9A227;
  --gold-bright:#E8C547;
  --ball:#D7E443;
  --berry:#C2363B;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:
    radial-gradient(140% 60% at 50% 0%, rgba(255,255,255,.06), rgba(0,0,0,0) 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 48px, rgba(255,255,255,.03) 48px 96px),
    linear-gradient(180deg,#2A5523 0%, var(--green) 45%, #1B3A15 100%);
  background-attachment:fixed;
  color:var(--cream);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
#app{max-width:480px;margin:0 auto;padding:22px 24px 48px;min-height:100dvh;
  display:flex;flex-direction:column;}

.ph-brand{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 26px;}
.ph-brand .pb{font:700 11px/1 var(--sans);letter-spacing:.42em;text-indent:.42em;color:rgba(232,197,71,.85);}
.wf-row{display:flex;align-items:center;gap:10px;}
.wf-logo{height:30px;width:auto;display:block;}

section{display:none;flex-direction:column;align-items:center;text-align:center;gap:18px;flex:1;}
section.on{display:flex;}

.hl{font:700 56px/1.04 var(--serif);color:var(--white);text-shadow:0 3px 0 rgba(0,0,0,.18);margin-top:18px;}
.hl.sm{font-size:42px;}
.hl em{font-style:normal;color:var(--gold-bright);}
.sub{font:400 19px/1.45 var(--serif);font-style:italic;color:rgba(243,237,220,.92);max-width:340px;}
.sub.gold{color:var(--gold-bright);}
.sub strong{color:var(--gold-bright);font-style:normal;}
.mph{font:800 16px/1 var(--sans);letter-spacing:.34em;text-indent:.34em;color:var(--gold-bright);}

.spinner{width:44px;height:44px;border-radius:50%;margin-top:18px;
  border:4px solid rgba(243,237,220,.2);border-top-color:var(--gold-bright);
  animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

form{width:100%;display:flex;flex-direction:column;gap:16px;margin-top:8px;text-align:left;}
.fld{display:flex;flex-direction:column;gap:7px;}
.fld span{font:600 14px/1 var(--sans);letter-spacing:.06em;color:var(--cream);}
.fld span small{color:rgba(243,237,220,.6);font-weight:400;}
.fld input{
  appearance:none;border:2px solid rgba(243,237,220,.25);border-radius:14px;
  background:rgba(0,0,0,.25);color:var(--white);
  font:600 20px/1.2 var(--sans);padding:16px 18px;width:100%;
}
.fld input:focus{outline:none;border-color:var(--gold-bright);}
.consent{display:flex;gap:12px;align-items:flex-start;font:400 13px/1.45 var(--sans);
  color:rgba(243,237,220,.85);}
.consent input{width:22px;height:22px;flex:none;accent-color:var(--gold);margin-top:2px;}
.consent a{color:var(--gold-bright);}

.cta{
  appearance:none;border:none;border-radius:60px;cursor:pointer;width:100%;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#241A02;
  font:800 19px/1 var(--sans);letter-spacing:.14em;text-indent:.14em;
  padding:20px 28px;margin-top:6px;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.cta:active{transform:translateY(1px);}
.cta[disabled]{opacity:.55;}

.err{font:600 15px/1.4 var(--sans);color:#FFB3B3;min-height:1.2em;}

.serve-dots{display:flex;gap:14px;margin-top:10px;}
.serve-dots span{width:16px;height:16px;border-radius:50%;background:rgba(243,237,220,.2);
  border:2px solid rgba(243,237,220,.3);}
.serve-dots span.done{background:var(--ball);border-color:var(--ball);}
.serve-dots span.now{border-color:var(--gold-bright);animation:dotpulse 1s ease-in-out infinite;}
@keyframes dotpulse{50%{box-shadow:0 0 12px rgba(232,197,71,.6);}}

.echo{font:800 34px/1.2 var(--sans);color:var(--gold-bright);min-height:1.3em;}
.echo small{display:block;font:400 17px/1.4 var(--serif);font-style:italic;color:var(--cream);margin-top:6px;}

#sc-final .hl{font-size:96px;font-family:var(--sans);font-weight:900;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  text-shadow:0 0 18px rgba(232,197,71,.4), 0 6px 0 rgba(0,0,0,.25);}

.cal{font:500 15px/1.7 ui-monospace,Menlo,Consolas,monospace;color:var(--cream);
  background:rgba(0,0,0,.3);border-radius:12px;padding:16px;width:100%;text-align:left;
  white-space:pre-wrap;min-height:200px;}