/* Eggly sign-in sheet: the engine's sheet (gamekit/web/signin.js + signin.css, every site) dressed in the landing's
   brand kit (v2/landing.css — the base design for every Eggly box, owner 2026-10-16): dark violet game panel, thick ink
   outline, thin gold rim, 3D bottom edge, Lilita One titles with an ink outline, gold = action (the PLAY button).
   Only colours, borders, type and depth change; layout, sizes (44 px taps) and behaviour stay the engine's.
   ":root" in front of every rule outranks signin.css, which loads after this file. */
:root {
  --eg-ink: #120a24; --eg-panel-1: #3a2470; --eg-panel-2: #1a0e3a; --eg-panel-3: #0f0826; --eg-btn-1: #4a2f8a; --eg-btn-2: #2a1856;
  --eg-gold-1: #fff1a8; --eg-gold-2: #ffcf3a; --eg-gold-3: #f59a12; --eg-gold: #ffc23a; --eg-rim: rgba(255, 210, 110, .55);
  --eg-text: #f3eeff; --eg-muted: #c2b6e6;
}
:root .si-back { background: radial-gradient(120% 80% at 50% 100%, rgba(58, 36, 112, .6), rgba(4, 2, 10, .8)); }
:root .si-sheet { color: var(--eg-text); font: 500 15px/1.45 Fredoka, system-ui, sans-serif;
  background: linear-gradient(180deg, var(--eg-panel-1), var(--eg-panel-2) 50%, var(--eg-panel-3)); border: 3px solid var(--eg-ink); border-radius: 20px;
  box-shadow: inset 0 0 0 1.5px var(--eg-rim), inset 0 2px 0 1.5px rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .6), 0 0 30px rgba(255, 170, 60, .3); }
:root .si-head h2 { font: 400 24px/1.1 'Lilita One', Fredoka, sans-serif; letter-spacing: .02em; color: var(--eg-gold);
  text-shadow: 2px 0 var(--eg-ink), -2px 0 var(--eg-ink), 0 2px var(--eg-ink), 0 -2px var(--eg-ink), 1.5px 1.5px var(--eg-ink), -1.5px 1.5px var(--eg-ink), 0 4px 0 var(--eg-ink), 0 0 18px rgba(255, 150, 40, .45); }
:root .si-x { border: 2.5px solid var(--eg-ink); border-radius: 12px; background: var(--eg-panel-3); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 210, 110, .4), 0 3px 0 var(--eg-ink); }
:root .si-btn { border: 2.5px solid var(--eg-ink); border-radius: 14px; color: #fff; font-weight: 700;
  background: linear-gradient(180deg, var(--eg-btn-1), var(--eg-btn-2)); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 110, .3), inset 0 2px 0 rgba(255, 255, 255, .14), 0 4px 0 var(--eg-ink);
  transition: transform .08s, box-shadow .08s; }
:root .si-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 110, .3), 0 1px 0 var(--eg-ink); }
:root .si-main { min-height: 52px; border-color: #5a2c00; color: #2a1400; font: 400 19px/1 'Lilita One', Fredoka, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--eg-gold-1) 0%, var(--eg-gold-2) 38%, var(--eg-gold-3) 75%, #ffbf3a 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(160, 70, 0, .45), 0 5px 0 #8a4300, 0 0 22px rgba(255, 170, 60, .45); }
:root .si-main:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 2px 0 #8a4300; }
:root .si-tabs { border: 2.5px solid var(--eg-ink); border-radius: 14px; background: var(--eg-panel-3); box-shadow: inset 0 0 0 1px rgba(255, 210, 110, .2); }
:root .si-tabs button { color: var(--eg-muted); font: 400 16px/1 'Lilita One', Fredoka, sans-serif; letter-spacing: .03em; }
:root .si-tabs button[aria-selected="true"] { color: #2a1400; background: linear-gradient(180deg, #ffe27a, var(--eg-gold) 60%, var(--eg-gold-3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 #5a2c00; }
:root .si-field { color: #fff; }
:root .si-field small { color: var(--eg-muted); }
:root .si-field input { border: 2.5px solid var(--eg-ink); border-radius: 12px; background: var(--eg-panel-3); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 210, 110, .22); }
:root .si-field input::placeholder { color: #7d70a8; }
:root .si-field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--eg-gold), 0 0 14px rgba(255, 190, 60, .45); }
:root .si-or, :root .si-note { color: var(--eg-muted); }
:root .si-or::before, :root .si-or::after { background: rgba(255, 210, 110, .3); }
:root .si-link, :root .si-note a { color: var(--eg-gold); }
:root .si-key { border: 2px dashed var(--eg-gold); background: var(--eg-panel-3); color: #ffe9a8; box-shadow: inset 0 0 18px rgba(255, 190, 60, .25), 0 0 14px rgba(255, 190, 60, .25); }
:root .si-warn { border: 2px solid var(--eg-gold); border-radius: 12px; background: rgba(255, 194, 58, .1); color: #ffe9b8; }
:root .si-check input { accent-color: var(--eg-gold-3); }
:root .si-out { border: 2px solid #ff5d7a; border-radius: 12px; background: rgba(255, 60, 100, .12); color: #ffd0da; }
:root .si-sheet :focus-visible { outline-color: var(--eg-gold); }
@media (max-width: 600px) { :root .si-sheet { border-radius: 22px 22px 0 0; border-bottom: 0; } }
/* words stay whole (docs/PROTOCOL-LAYOUT.md): the thicker Eggly borders leave Telegram / Wallet too little room side by
   side on the smallest phones, so the pair wraps onto two rows there instead of breaking a word */
:root .si-back { overflow-wrap: normal; }
:root .si-pair { flex-wrap: wrap; }
:root .si-pair .si-btn { flex: 1 1 128px; }
/* "I saved my recovery key" (owner 2026-10-16: more highlighted, centred): a glowing gold-rim box, a big gold tick box,
   bold text; it pulses until ticked, then turns green */
:root .si-check { justify-content: center; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; cursor: pointer;
  border: 2.5px solid var(--eg-gold); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 207, 58, .18), rgba(245, 154, 18, .08));
  box-shadow: 0 0 0 0 rgba(255, 194, 58, .6); animation: eg-ask 1.6s ease-out infinite; }
:root .si-check input { appearance: none; -webkit-appearance: none; flex: none; width: 30px; height: 30px; margin: 0; cursor: pointer; border-radius: 9px;
  border: 2.5px solid var(--eg-ink); background: var(--eg-panel-3); box-shadow: inset 0 0 0 2px var(--eg-gold), 0 3px 0 var(--eg-ink); display: grid; place-items: center; }
:root .si-check input::after { content: ""; width: 9px; height: 16px; margin-top: -4px; border: solid #2a1400; border-width: 0 4px 4px 0; transform: rotate(45deg) scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
:root .si-check input:checked { background: linear-gradient(180deg, #b8ffcf, #3cf08a 55%, #18b860); box-shadow: inset 0 0 0 2px #fff, 0 3px 0 var(--eg-ink), 0 0 14px rgba(60, 240, 138, .8); }
:root .si-check input:checked::after { transform: rotate(45deg) scale(1); }
:root .si-check label { min-width: 0; text-align: center; font: 400 17px/1.25 'Lilita One', Fredoka, sans-serif; letter-spacing: .02em; color: #fff; cursor: pointer;
  text-shadow: 1.5px 0 var(--eg-ink), -1.5px 0 var(--eg-ink), 0 1.5px var(--eg-ink), 0 -1.5px var(--eg-ink), 0 2.5px 0 var(--eg-ink); }
:root .si-check:has(input:checked) { animation: none; border-color: #3cf08a; background: rgba(60, 240, 138, .12); box-shadow: 0 0 16px rgba(60, 240, 138, .45); }
@keyframes eg-ask { 0% { box-shadow: 0 0 0 0 rgba(255, 194, 58, .7); } 100% { box-shadow: 0 0 0 12px rgba(255, 194, 58, 0); } }
@media (prefers-reduced-motion: reduce) { :root .si-check { animation: none; } }