/* The account doorway uses the game's teak, brass and songket, over its own island artwork.
   Scoped here so the shared account/backup and privacy styles keep their existing contract. */
.account-page {
  --teak-dark:#160e08; --teak-deep:#21150d; --teak-plank:#382416; --teak-lit:#4c3320;
  --teak-beam:#75502e; --teak-edge:#ad7a43; --brass-light:#e3bd70; --songket-deep:#572127;
  --door-bg:var(--teak-deep); --door-surface:var(--teak-plank); --door-lit:var(--teak-lit);
  --door-beam:var(--teak-beam); --door-edge:var(--teak-edge); --door-shadow:var(--teak-dark);
  --door-fg:var(--sand-50); --door-muted:var(--sand-100); --door-trim:var(--brass-light);
  --door-selected:var(--songket-deep); --door-width:580px; --door-border:14px;
  --door-emblem:72px; --door-logo:clamp(3rem,7vw,5rem); --door-title:clamp(1.75rem,4vw,2.5rem);
  --door-grain:url('/characters/wood-grain.svg'); --door-grain-size:640px 192px;
  --door-plank-size:96px; --door-fixing:16px; --door-choice-height:52px;
  --door-radius:2px; --door-bottom:8px; --door-lift:12px; --door-shadow-blur:48px;
  --door-overlay:rgba(10,25,23,.56); --door-scrim:rgba(7,19,20,.82);
  --door-seam:rgba(17,9,4,.64); --door-sheen:rgba(237,186,107,.17);
  --door-clear-shadow:rgba(0,0,0,.5); --door-photo-tint:rgba(19,37,31,.22);
  --door-title-shadow:0 2px 0 var(--door-shadow); --door-speed:120ms;
  background:var(--door-bg); min-height:100svh; position:relative; isolation:isolate;
}
.island-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(var(--door-photo-tint),var(--door-overlay) 55%,var(--door-scrim)),url('/img/v046-shore.jpg') center/cover no-repeat}
.account-page:not([data-view="account"]){display:flex;flex-direction:column}
.account-page:not([data-view="account"]) .masthead{position:relative;justify-content:center;border:0;padding-block:var(--space-8) var(--space-6)}
.account-page:not([data-view="account"]) .brand{align-items:center;font-size:var(--door-logo);letter-spacing:.04em;color:var(--door-fg);text-shadow:0 4px 0 var(--door-shadow),0 8px 24px var(--door-shadow)}
.account-page:not([data-view="account"]) .brand span{font-size:var(--text-base);letter-spacing:.08em;color:var(--door-fg);text-shadow:var(--door-title-shadow);max-width:none}
.account-page:not([data-view="account"]) .home-link{position:absolute;left:0;top:var(--space-6);font-size:var(--text-small);text-shadow:var(--door-title-shadow)}
.account-page:not([data-view="account"]) #main{width:min(var(--door-width),calc(100% - var(--space-8)));margin-block:auto; padding-top:var(--space-4)}
.account-page:not([data-view="account"]) .page-heading{display:none}
.account-page .timber-panel{
  position:relative;isolation:isolate;display:block;text-align:center;
  color:var(--door-fg);padding:var(--space-8) var(--space-8) var(--space-6);
  border:var(--door-border) solid var(--door-beam);border-radius:var(--door-radius);
  background:var(--door-grain) center/var(--door-grain-size),
    repeating-linear-gradient(0deg,transparent 0 calc(var(--door-plank-size) - var(--edge)),var(--door-seam) calc(var(--door-plank-size) - var(--edge)) var(--door-plank-size)),
    linear-gradient(110deg,var(--door-surface),var(--door-lit) 42%,var(--door-surface));
  box-shadow:inset 0 0 0 var(--edge) var(--door-shadow),inset 0 var(--space-1) var(--space-4) var(--door-shadow),
    0 0 0 var(--edge) var(--door-shadow),0 var(--door-bottom) 0 var(--door-shadow),0 var(--space-6) var(--door-shadow-blur) var(--door-clear-shadow);
}
.account-page .timber-panel::before{content:"";position:absolute;z-index:-1;inset:calc(-1 * var(--door-border));border:var(--edge) solid var(--door-edge);border-radius:var(--door-radius);pointer-events:none;background:var(--door-grain) center/var(--door-grain-size);box-shadow:inset 0 var(--edge) 0 var(--door-sheen),inset 0 calc(-1 * var(--space-1)) 0 var(--door-shadow)}
.account-page .timber-panel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:inset var(--space-3) 0 var(--space-4) var(--door-seam),inset calc(-1 * var(--space-3)) 0 var(--space-4) var(--door-seam)}
.timber-fixing{position:absolute;width:var(--door-fixing);height:var(--door-fixing);border:var(--edge) solid var(--door-shadow);background:linear-gradient(145deg,var(--door-trim),var(--door-edge));box-shadow:inset 0 var(--line) 0 var(--door-trim),0 var(--edge) var(--edge) var(--door-shadow);transform:rotate(45deg);pointer-events:none}
.timber-fixing::after{content:"";position:absolute;inset:var(--space-1);border-radius:50%;background:var(--door-shadow)}
.fixing-tl{top:calc(-1 * var(--door-border));left:calc(-1 * var(--door-border))}.fixing-tr{top:calc(-1 * var(--door-border));right:calc(-1 * var(--door-border))}.fixing-bl{bottom:calc(-1 * var(--door-border));left:calc(-1 * var(--door-border))}.fixing-br{bottom:calc(-1 * var(--door-border));right:calc(-1 * var(--door-border))}
.account-page #signed-out .welcome-copy{max-width:none}
.account-page #signed-out .eyebrow{color:var(--door-trim);font-size:var(--text-small);letter-spacing:.13em;margin-block:var(--space-3) var(--space-2);text-shadow:var(--door-title-shadow)}
.account-page #welcome-title{font-size:var(--door-title);max-width:none;text-shadow:var(--door-title-shadow)}
.welcome-emblem{margin:calc(-1 * var(--space-4)) auto 0;width:var(--door-emblem);height:calc(var(--door-emblem)*1.1);overflow:hidden}
.welcome-emblem canvas{width:var(--door-emblem);height:auto}
.account-choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-6)}
.account-choice{position:relative;min-height:var(--door-choice-height);padding:var(--space-2) var(--space-4);border:var(--edge) solid var(--door-edge);border-radius:var(--door-radius);font:700 var(--text-large)/var(--leading-tight) var(--display);color:var(--door-fg);background:var(--door-grain) center/var(--door-grain-size),linear-gradient(var(--door-lit),var(--door-surface));box-shadow:inset 0 var(--line) 0 var(--door-sheen),0 var(--space-1) 0 var(--door-shadow);cursor:pointer;text-shadow:var(--door-title-shadow)}
.account-choice:hover{border-color:var(--door-trim);background-color:var(--door-beam)}
.account-choice[aria-pressed="true"]{background:var(--door-selected);border-color:var(--door-trim);box-shadow:inset 0 0 0 var(--edge) var(--door-shadow),0 var(--space-1) 0 var(--door-shadow)}
.account-choice[aria-pressed="true"]::after{content:"";position:absolute;bottom:var(--space-1);left:calc(50% - var(--space-3));width:var(--space-6);height:var(--edge);background:var(--door-trim)}
.account-choice:active{transform:translateY(var(--press))}
.login-description{min-height:104px;margin-top:var(--space-6)}
.account-page .login-description h2{font:700 var(--text-large)/var(--leading-tight) var(--body);text-shadow:var(--door-title-shadow);margin-inline:auto}
.account-page .login-description p{margin:var(--space-2) auto 0;color:var(--door-muted);max-width:36ch;line-height:1.4}
.account-page .login-actions{margin-top:var(--space-3)}
.account-page #google-signin{width:100%;min-height:var(--door-choice-height);padding-inline:var(--space-6);justify-content:space-between;border-color:var(--door-shadow);border-radius:var(--door-radius);box-shadow:inset 0 var(--edge) 0 var(--door-trim),0 var(--space-1) 0 var(--door-shadow)}
.account-page .login-status{font-size:var(--text-small);color:var(--door-muted);margin:var(--space-4) auto 0;max-width:38ch;line-height:1.4}
.account-page .timber-panel a:focus-visible,.account-page .timber-panel button:focus-visible{outline:var(--edge) solid var(--door-fg);outline-offset:var(--ring-offset)}
.account-page #check-signin{color:var(--door-fg);margin-top:var(--space-4)}
.account-page .loading{min-height:360px;padding-top:var(--space-16)}
.account-page #load-error p{margin-inline:auto}
.account-page:not([data-view="account"]) .notice{background:var(--door-bg);color:var(--door-fg);text-align:center;margin-bottom:var(--space-6)}
.account-page:not([data-view="account"]) .notice.error{color:var(--danger)}
.account-page:not([data-view="account"]) .page-footer{text-align:center;padding-block:var(--space-6);color:var(--door-muted);text-shadow:var(--door-title-shadow)}
.account-page:not([data-view="account"]) .page-footer .actions{justify-content:center;gap:var(--space-6);margin:0}
.account-page:not([data-view="account"]) .page-footer .quiet-link{margin:0}
.account-page:not([data-view="account"]) .account-footer-copy{display:none}
.island-caption{margin:var(--space-2) auto 0;text-transform:uppercase;font-size:.75rem;letter-spacing:.12em}
.account-page[data-view="account"] .island-backdrop{opacity:.2}
.account-page[data-view="account"] .island-caption{display:none}
@media(max-width:760px){
  .account-page:not([data-view="account"]) .masthead{padding-top:var(--space-16);padding-bottom:var(--space-4)}
  .account-page:not([data-view="account"]) .home-link{top:var(--space-2)}
  .account-page:not([data-view="account"]) .brand span{line-height:var(--leading-tight)}
  .account-page .timber-panel{padding:var(--space-6) var(--space-4)}
}
@media(max-width:380px){
  .account-page{--door-border:10px;--door-emblem:56px;--door-fixing:12px}
  .account-page:not([data-view="account"]) #main{width:calc(100% - var(--space-6))}
  .account-page .timber-panel{padding-inline:var(--space-3)}
  .account-choices{gap:var(--space-2)}
}
@media(max-height:740px) and (min-width:761px){
  .account-page{--door-emblem:48px;--door-logo:3rem}
  .account-page:not([data-view="account"]) .masthead{padding-block:var(--space-4)}
  .account-page .timber-panel{padding-block:var(--space-4)}
  .login-description{min-height:88px;margin-top:var(--space-4)}
}
@media(prefers-reduced-motion:no-preference){.account-choice{transition:border-color var(--door-speed),transform 60ms ease}}