/* -------------------------------------------------------------------
   Input field sizing.

   These fields are real HTML inputs laid over the game canvas. Construct
   scales the input BOX with the canvas but leaves the text alone (the
   elements have "auto font size" switched off), so a fixed px size looks
   right on one screen and wrong on every other one.

   The project is 720x1280 in "letterbox scale", so the canvas scales by
   min(vw/720, vh/1280). Matching that keeps the text a constant share of
   the box on every device:

       a text height of N layout units  ->  min(N/7.2 vw, N/12.8 vh)

   Below, N = 22.68 for the form fields and N = 31.5 for the OTP boxes -
   both 37% smaller than the 36 / 50 they started at. To resize, change N
   and redo that division - or just nudge the vw/vh numbers together,
   keeping their ratio. Scale the clamp bounds by the same factor or the
   ends of the range quietly stop matching the middle.

   The floors are low enough that iOS Safari would normally zoom the page
   in when a field is tapped (it does that under 16px). What stops it is
   the viewport meta in index.html, which sets maximum-scale=1.0 - if that
   is ever removed, raise --field-font-size's floor back to 16px or typing
   on an iPhone becomes unpleasant.

   Rendered size, form fields:
       iPhone SE            12px      iPad        21px
       iPhone 14            13px      Laptop      16px
       iPhone Pro Max       14px      1920x1080   19px
   ------------------------------------------------------------------- */
:root {
    --field-font-size: clamp(10.08px, min(3.15vw, 1.771875vh), 25.2px);
    --otp-font-size:   clamp(12.6px, min(4.3722vw, 2.4633vh), 35.28px);
}

#nameId,#emailId,#numberId,#bDayId,#loginName,#otp1,#otp2,#otp3,#otp4{
    font-size: var(--field-font-size);
    line-height: 1.15;
    border: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    outline: none;
    /* The box is short; don't let padding steal height from the text. */
    padding-top: 0;
    padding-bottom: 0;
}
#otp1,#otp2,#otp3,#otp4{
    font-size: var(--otp-font-size);
    align-items: center;
    justify-content: center;
    text-align: center;
}
#loginName{
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* -------------------------------------------------------------------
   Birth date field.

   It is a plain text box until tapped, then becomes <input type="date">
   (see the Register event sheet). WebKit renders date inputs with their
   own inner parts, which ignore the usual text styling and default to
   centred - these rules keep it looking like the other four fields.
   ------------------------------------------------------------------- */
#bDayId {
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
}
#bDayId::-webkit-date-and-time-value {
    font-size: var(--field-font-size);
    text-align: left;
    margin: 0;
}
#bDayId::-webkit-datetime-edit {
    font-size: var(--field-font-size);
    padding: 0;
}
/* Keep the calendar button tappable but out of the text's way. */
#bDayId::-webkit-calendar-picker-indicator {
    margin-left: 4px;
    cursor: pointer;
}

/* Placeholders track the field size and stay legible. */
#nameId::placeholder,
#emailId::placeholder,
#numberId::placeholder,
#bDayId::placeholder,
#loginName::placeholder {
    font-size: var(--field-font-size);
    opacity: 0.65;
}

#nameId:-webkit-autofill,
#emailId:-webkit-autofill,
#numberId:-webkit-autofill,
#loginName:-webkit-autofill,
#bDayId:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 5000s ease-in-out 0s;
    font-size: var(--field-font-size) !important;
}

#nameId:-webkit-autofill:focus,
#emailId:-webkit-autofill:focus,
#numberId:-webkit-autofill:focus,
#loginName:-webkit-autofill:focus,
#bDayId:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
}

/* ===================================================================
   FIELD VALIDATION TOOLTIPS

   The register fields are HTML inputs floating over the canvas, so the
   warnings are separate fixed-position bubbles anchored to each input's
   on-screen rect (the register event sheet keeps them in place).

   Sized with the same min(vw,vh) rule as the fields themselves so they
   scale with the 720x1280 canvas.
   =================================================================== */
.papare-tip{
    position: fixed;
    z-index: 2147482000;
    /* Width is pinned to the field it belongs to (set from JS), so a
       bubble can never spill outside the register card. */
    box-sizing: border-box;
    padding: min(1.7vw,1vh) min(2.4vw,1.4vh);
    border-radius: min(2vw,1.15vh);
    background: #c8102e;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: min(3.3vw, 1.85vh);
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    box-shadow: 0 min(.8vw,.45vh) min(2.4vw,1.4vh) rgba(0,0,0,.45);
    pointer-events: none;
    opacity: 0;
    transform: translateY(min(1vw,.6vh));
    transition: opacity .16s ease, transform .16s ease;
}
.papare-tip.show{ opacity: 1; transform: translateY(0); }

/* Little arrow pointing at the field. */
.papare-tip::after{
    content:'';
    position:absolute;
    left: min(4vw,2.3vh);
    width: 0; height: 0;
    border-left:  min(1.6vw,.9vh) solid transparent;
    border-right: min(1.6vw,.9vh) solid transparent;
}
.papare-tip.below::after{
    top: calc(-1 * min(1.6vw,.9vh));
    border-bottom: min(1.6vw,.9vh) solid #c8102e;
}
.papare-tip.above::after{
    bottom: calc(-1 * min(1.6vw,.9vh));
    border-top: min(1.6vw,.9vh) solid #c8102e;
}