.auth-screen[hidden],.auth-account-button[hidden]{display:none!important}
.auth-screen{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;padding:18px max(18px,env(safe-area-inset-right)) 18px max(18px,env(safe-area-inset-left));overflow:auto;background:radial-gradient(ellipse at 50% 10%,#4f774eaa,transparent 65%),#10251ef2;backdrop-filter:blur(12px);color:#f8edcc;font-family:Fredoka,system-ui,sans-serif}
.auth-card{width:min(100%,440px);max-height:calc(100dvh - 36px);overflow:auto;padding:26px 30px 20px;text-align:center;border:3px solid #b49654;border-radius:25px;background:linear-gradient(155deg,#304d39,#182e25);box-shadow:0 8px 0 #0d1e17,0 24px 90px #0008;scrollbar-width:thin}
.auth-emblem{width:62px;height:62px;border-radius:50%;background:#172e24;box-shadow:0 0 0 3px #d1b568,0 4px 0 #081d15;margin:0 auto 18px;display:grid;place-items:center}
.auth-emblem img{width:42px;height:42px}
.auth-eyebrow{font-size:11px;letter-spacing:2.6px;color:#dfc580;font-weight:700}
.auth-card h1{font-size:30px;line-height:1.1;letter-spacing:-.5px;color:#fff2cc;margin:10px 0 14px;text-shadow:0 3px 0 #10251d}
.auth-intro,.auth-card p{font-size:14px;line-height:1.45;color:#c5d7be;margin:0 0 18px}
.auth-card form{text-align:left;display:grid;gap:9px}
.auth-card label{display:block;text-align:left;font-size:14px;color:#f1e2b9;margin:6px 0 2px}
.auth-card input{width:100%;min-height:45px;border:2px solid #6b845d;border-radius:10px;background:#10271e;color:#fff2d5;font:inherit;padding:10px 12px;box-sizing:border-box;outline:none;user-select:text}
.auth-card input:focus{border-color:#f5d884;box-shadow:0 0 0 3px #f5d88422}
.auth-card small{font:12px/1.4 system-ui,sans-serif;color:#a9c3a1}
.auth-card button{font:inherit;color:#e5eacb;border:1px solid #74845b;border-radius:10px;background:#344d34;min-height:39px;padding:8px 13px;cursor:pointer;margin:5px 3px}
.auth-card button:hover{filter:brightness(1.13)}
.auth-card button:focus-visible,.auth-account-button:focus-visible{outline:3px solid #ffe394;outline-offset:3px}
.auth-card button:disabled{opacity:.55;cursor:wait}
.auth-card .auth-primary{width:100%;background:linear-gradient(#f6d57f,#dca74e);border:2px solid #ffe8a1;box-shadow:0 4px 0 #8b602e;color:#253723;font-weight:700;min-height:48px;margin:14px 0 10px}
.auth-password-row{display:flex;gap:6px}
.auth-password-row input{min-width:0}
.auth-password-row button{margin:0}
.auth-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin-top:12px}
.auth-tabs button,.auth-card .auth-offline{background:transparent;border-color:transparent;color:#d3d8b5;font-size:13px}
.auth-card .auth-offline{text-decoration:underline;text-underline-offset:4px}
.auth-card .auth-message{color:#ffdfa2;min-height:18px;margin:12px 0 2px;font:13px/1.4 system-ui,sans-serif}
.auth-card .auth-footnote{font:11px/1.4 system-ui,sans-serif;color:#93ac91;margin:10px 0 0}
.auth-save-state{padding:13px;background:#132a20;border-radius:12px;color:#e2d393;margin:0 0 10px}
.auth-account-button{position:relative;flex:0 1 auto;min-width:0;max-width:min(42vw,320px);min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #aebf8a;border-radius:9px;background:#203e30ee;color:#f4e2ad;font:12px Fredoka,system-ui,sans-serif;padding:7px 11px;cursor:pointer;box-shadow:0 3px 8px #0005}
@media(max-height:560px){.auth-account-button{font-size:11px;padding:6px 9px}}
.auth-check{display:flex!important;align-items:center;gap:10px;line-height:1.4}
.auth-check input{width:20px;min-height:20px;flex-shrink:0}
@media(max-height:700px){.auth-card{padding:16px 24px}.auth-emblem{display:none}.auth-card h1{font-size:26px}.auth-intro{margin-bottom:10px!important}.auth-screen{align-items:flex-start}}
@media(max-width:460px){.auth-card{padding:20px}.auth-card h1{font-size:27px}}

/* ---- The pause menu's carved frame around the account card ----------------
   Wood rim, gold hairline, moss panel, vines on the corners and the acorn
   crest on the top edge (assets/ui/frame-*.svg). The card scrolls inside. */
.auth-wood {
  position: relative; flex: none; width: min(100%, 476px); margin: 46px auto 8px; padding: 13px; border-radius: 32px;
  background:
    repeating-linear-gradient(97deg, rgba(40,20,6,.16) 0 2px, transparent 2px 11px, rgba(255,210,150,.06) 11px 13px, transparent 13px 23px),
    radial-gradient(120% 60% at 50% 0, rgba(255,214,150,.22), transparent 60%),
    linear-gradient(180deg, #9a6535 0%, #7a4b24 22%, #64391a 55%, #7b4a23 82%, #5a3216 100%);
  box-shadow: 0 0 0 3px #2a170a, inset 0 2px 0 rgba(255,214,160,.35), inset 0 -3px 0 rgba(30,14,4,.45), 0 9px 0 3px rgba(20,10,3,.55), 0 24px 70px rgba(0,0,0,.55);
  animation: auth-in .32s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes auth-in { from { transform: translateY(16px) scale(.96); opacity: 0; } }
.auth-wood .auth-card {
  width: 100%; max-height: calc(100dvh - 120px); padding: 54px 28px 18px; border: 0; border-radius: 21px;
  background: radial-gradient(90% 45% at 50% 0, #2f5d31 0%, transparent 70%), linear-gradient(180deg, #1f4626 0%, #183a20 45%, #10291a 100%);
  box-shadow: 0 0 0 2px #d9a64a, 0 0 0 4px #3a2210, inset 0 8px 24px rgba(0,0,0,.35);
  scrollbar-color: #b8873a transparent;
}
.auth-vine, .auth-crest { position: absolute; z-index: 2; pointer-events: none; display: block; background: center / contain no-repeat; }
.auth-vine { width: 124px; height: 105px; background-image: url('../../assets/ui/frame-vine.svg'); }
.auth-vine.tl { left: -15px; top: -15px; }
.auth-vine.tr { right: -15px; top: -15px; transform: scaleX(-1); }
.auth-vine.bl { left: -15px; bottom: -15px; transform: scale(.75, -.75); transform-origin: 0 57.143%; }
.auth-vine.br { right: -15px; bottom: -15px; transform: scale(-.75, -.75); transform-origin: 57.143% 57.143%; }
.auth-crest { left: 50%; top: -46px; width: 156px; height: 98px; transform: translateX(-50%); background-image: url('../../assets/ui/frame-crest.svg'); filter: drop-shadow(0 4px 3px rgba(0,0,0,.45)); }
.auth-wood .auth-emblem { display: none; }
.auth-wood .auth-eyebrow { color: #f8dd98; text-shadow: 0 2px 0 #2a170a; }
.auth-wood .auth-card h1 {
  color: #fff3d6; font-size: 32px;
  text-shadow: 0 3px 0 #2a1708, 0 -2px 0 #2a1708, 2px 0 0 #2a1708, -2px 0 0 #2a1708, 2px 2px 0 #2a1708, -2px 2px 0 #2a1708, 0 6px 10px rgba(0,0,0,.4);
}
.auth-wood .auth-intro, .auth-wood .auth-card p { color: #cfd6b4; }
.auth-wood .auth-intro strong { color: #f8dd98; }
.auth-wood .auth-card label { color: #ead7a6; font-weight: 700; }
.auth-wood .auth-card small { color: #b9c7a4; }
.auth-wood .auth-card input {
  border: 2px solid rgba(201,150,65,.65); border-radius: 12px; color: #fff3d6; background: rgba(6,18,10,.62);
  box-shadow: 0 0 0 2px #2a170a, inset 0 3px 6px rgba(0,0,0,.4);
}
.auth-wood .auth-card input:focus { border-color: #ffe394; box-shadow: 0 0 0 2px #2a170a, 0 0 0 5px rgba(255,227,148,.25), inset 0 3px 6px rgba(0,0,0,.4); }
.auth-wood .auth-card input[type="checkbox"] { box-shadow: none; }
/* Buttons: the pause menu's moss buttons; the main one is the green Resume button. */
.auth-wood .auth-card button {
  border: 2px solid #b8873a; border-radius: 13px; font-weight: 700; color: #fff3d6;
  text-shadow: 0 2px 0 #0c1a0e, 0 -1px 0 #0c1a0e, 1px 0 0 #0c1a0e, -1px 0 0 #0c1a0e;
  background: linear-gradient(180deg, #33603a 0%, #23472b 45%, #1a3820 100%);
  box-shadow: 0 0 0 2px #2a170a, 0 4px 0 2px #160c04, inset 0 2px 0 rgba(255,236,170,.2), inset 0 -3px 0 rgba(0,0,0,.2);
  margin: 7px 4px;
}
.auth-wood .auth-card button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 2px #2a170a, 0 1px 0 2px #160c04, inset 0 2px 0 rgba(255,236,170,.2); }
.auth-wood .auth-card .auth-primary {
  min-height: 56px; margin: 16px 0 12px; border: 3px solid #f4c95a; border-radius: 16px; font-size: 20px; color: #fffaf0;
  text-shadow: 0 2px 0 #1d4a14, 0 -1px 0 #1d4a14, 2px 0 0 #1d4a14, -2px 0 0 #1d4a14;
  background: radial-gradient(70% 60% at 50% 0, rgba(255,255,210,.32), transparent 70%), linear-gradient(180deg, #8fe06a 0%, #62c447 36%, #45a236 70%, #2f8029 100%);
  box-shadow: 0 0 0 2.5px #2a170a, 0 6px 0 2.5px #160c04, inset 0 2px 0 rgba(255,255,220,.55), inset 0 -5px 0 rgba(20,70,12,.38);
}
.auth-wood .auth-password-row button { margin: 0; flex: none; }
.auth-wood .auth-tabs button, .auth-wood .auth-card .auth-offline {
  border-color: transparent; background: transparent; box-shadow: none; text-shadow: 0 1px 0 #0c1a0e; color: #f8dd98; font-weight: 600;
}
.auth-wood .auth-card .auth-message { color: #ffe394; }
.auth-wood .auth-card .auth-footnote { color: #a9b394; }
.auth-wood .auth-save-state { border: 2px solid rgba(201,150,65,.55); background: rgba(6,18,10,.5); color: #f8dd98; box-shadow: inset 0 3px 8px rgba(0,0,0,.3); }
/* An empty status line takes no room (it stays rendered so announcements still reach screen readers). */
.auth-wood .auth-card .auth-message:empty { min-height: 0; margin: 0; }
/* Laptop-height screens: keep the whole sign-in card, Play offline included, in view without scrolling. */
@media (max-height: 820px) {
  .auth-wood .auth-card { padding-top: 44px; }
  .auth-wood .auth-intro { margin-bottom: 12px; }
  .auth-wood .auth-card .auth-primary { margin: 12px 0 8px; }
  .auth-wood .auth-tabs { margin-top: 4px; }
  .auth-wood .auth-tabs button, .auth-wood .auth-card .auth-offline { min-height: 34px; margin: 2px 4px; }
}
@media (max-height: 700px) {
  .auth-wood { margin-top: 36px; padding: 10px; border-radius: 26px; }
  .auth-wood .auth-card { max-height: calc(100dvh - 82px); padding: 40px 22px 14px; border-radius: 18px; }
  .auth-crest { top: -38px; width: 128px; height: 80px; }
  .auth-vine { width: 96px; height: 82px; }
  .auth-wood .auth-card h1 { font-size: 26px; }
}
@media (max-height: 420px) {
  .auth-wood .auth-card .auth-primary { min-height: 46px; margin: 10px 0 8px; font-size: 18px; }
}
@media (max-width: 460px) {
  .auth-wood .auth-card { padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) { .auth-wood { animation: none; } }