/* Top account access and image-first gallery. */
header { grid-template-columns: auto 1fr auto; gap: 18px; padding: 0 2.5%; }
header nav { justify-self: center; }
.header-tools { display:flex; align-items:center; gap:12px; font-family:Arial,sans-serif; }
.account-controls { position:relative; }
.account-toggle { display:flex; align-items:center; gap:8px; color:#eef1f4; border:0; background:#ffffff0a; border-radius:4px; padding:12px; min-height:46px; font-size:16px; font-weight:700; }
.account-toggle > span:first-child { font-size:24px; line-height:1; }
.account-icon { flex-shrink:0; }
.auth-tabs { display:flex;gap:8px;margin:20px 0; }
.auth-tabs button { flex:1;padding:12px 8px;border:1px solid #506272;background:#14212e;color:#d8e0e6;font:700 14px Arial,sans-serif; }
.auth-tabs button[aria-pressed=true] { border-color:#d8ae70;color:#f5d49b; }
#email-form label:not(.consent) { display:block;margin:14px 0 6px; }
#email-form input:not([type=checkbox]),#recovery-output { display:block;width:100%;padding:12px;background:#0b1520;color:#eef2f5;border:1px solid #526373;font:16px Arial,sans-serif; }
#email-form input[type=checkbox] { margin-top:3px; }
#email-form .consent { margin:20px 0 4px; }
.auth-recovery { color:#b9d4e8;border:0;background:transparent;font:12px/1.5 Arial,sans-serif;text-align:left;padding:14px 0; }
.auth-divider { display:flex;align-items:center;gap:15px;font:12px Arial,sans-serif;color:#a6b8c6;margin:15px 0; }
.auth-divider:before,.auth-divider:after { content:'';height:1px;background:#ffffff20;flex:1; }
#recovery-panel { border:1px solid #c39556;padding:18px;margin-bottom:22px;background:#49352244; }
#recovery-panel h3 { font-size:21px; }
#recovery-output { font:12px/1.6 monospace; }
#auth-challenge { margin:20px 0;min-width:0; }
#email-warning { color:#e8c68b; }
#account-label { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-menu { position:absolute; right:0; top:calc(100% + 12px); width:270px; padding:18px; background:#111b26; border:1px solid #3a4956; box-shadow:0 15px 30px #0008; z-index:15; }
.account-menu button,.account-menu a { display:block; width:100%; padding:13px; text-align:left; border:0; background:transparent; color:#e6ebef; font:700 15px Arial,sans-serif; }
.account-menu button:first-child { background:#315975; border:1px solid #5885a4; margin-bottom:8px; text-align:center; }
.account-menu a { border-top:1px solid #ffffff15; margin-top:10px; }
.account-menu button:hover,.account-menu a:hover { color:#f3ca89; background-color:#ffffff0a; }
.download-link { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border:1px solid #d1a25a; background:linear-gradient(#aa742d,#85531c); color:#fff1db; font-weight:700; font-size:15px; white-space:nowrap; }
.download-link:hover { color:white; background:#b47a31; }
.account-dialog { position:fixed; margin:auto; width:min(480px,calc(100% - 32px)); max-height:calc(100svh - 36px); padding:30px; overflow:auto; color:var(--text); border:1px solid #8d7450; background:linear-gradient(135deg,#23323f,#0f1923); box-shadow:0 30px 100px #000c; }
.account-dialog::backdrop { background:#020810c9; backdrop-filter:blur(5px); }
.account-dialog h2 { margin:0 36px 25px 0; font-size:29px; }
.account-dialog .account-panel { padding:0; background:transparent; border:0; box-shadow:none; }
.dialog-close { position:absolute; right:14px; top:10px; color:#d2dae0; background:transparent; border:0; font-size:30px; width:44px; height:44px; }
.carousel-stage { max-width:1320px; margin:24px auto 0; position:relative; padding:0 72px; }
.gallery .gallery-top { max-width:1170px; }
.gallery .carousel-stage figure { margin:0; width:100%; max-width:none; }
.gallery .carousel-stage figure > img { aspect-ratio:auto; height:auto; object-fit:contain; }
.carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border:1px solid #5f8ba9; border-radius:50%; background:#102b42cc; color:#d4eaf9; font:34px/1 Arial,sans-serif; display:grid; place-items:center; padding:0 0 4px; box-shadow:0 0 16px #237fc244; opacity:0; transition:opacity .2s,background .2s; }
.carousel-arrow.previous { left:0; }.carousel-arrow.next { right:0; }
.carousel-stage:hover .carousel-arrow,.carousel-stage:focus-within .carousel-arrow,.carousel-arrow:focus-visible { opacity:1; }
.carousel-arrow:hover { background:#245c86; box-shadow:0 0 22px #3b9bd066; }
@media(hover:none) { .carousel-arrow { opacity:1; } }
@media(max-width:1250px) {
 header .brand { font-size:18px; }
 header .brand small { font-size:8px; }
 header nav a { padding:0 11px; }
 .header-tools { gap:8px; }
 header select { min-width:70px; }
 .download-link { padding:12px 14px; }
 .account-toggle { padding:10px; font-size:15px; }
}
@media(max-width:900px) {
 header { height:auto; min-height:122px; grid-template-columns:1fr auto; padding:12px 3% 0; gap:8px; }
 .header-tools { grid-column:2; grid-row:1; }
 header nav { grid-column:1/-1; grid-row:2; width:100%; height:48px; justify-self:stretch; }
 header nav a { flex:1; }
 html { scroll-padding-top:145px; }
 .hero { height:calc(100svh - 122px); }
}
@media(max-width:620px) {
 header { grid-template-columns:1fr; min-height:168px; padding:10px 4% 0; gap:6px; }
 header .brand { grid-column:1; grid-row:1; font-size:18px; }
 header .brand-emblem { width:38px; height:38px; }
 .header-tools { grid-column:1; grid-row:2; justify-content:space-between; width:100%; }
 header nav { grid-column:1; grid-row:3; height:43px; font-size:15px; }
 header nav a { min-height:43px; }
 header select { min-height:38px; padding:6px; }
 .account-controls { margin-left:auto; }
 .account-toggle { min-height:40px; font-size:14px; }
 .download-link { min-height:40px; padding:10px 15px; font-size:14px; }
 #account-label { max-width:95px; }
 .account-menu { right:-82px; max-width:calc(100vw - 30px); }
 html { scroll-padding-top:190px; }
 .hero { height:auto; }
 .carousel-stage { padding:0; margin-left:0; margin-right:0; }
 .carousel-arrow { width:44px; height:44px; font-size:30px; opacity:1; background:#0a243ce8; }
 .carousel-arrow.previous { left:8px; }.carousel-arrow.next { right:8px; }
 .account-dialog { padding:25px; }
}
@media(prefers-reduced-motion:reduce) { .carousel-arrow { transition:none; } }


/* Official light Google treatment; isolate it from the game's metallic CTAs. */
@font-face { font-family:'Google Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/google-sans-medium.ttf') format('truetype'); }
.google-access { margin:22px 0 0; }
.google-access .consent { margin:0 0 14px; padding:12px; border:1px solid #d8ae7055; background:#d8ae700b; color:#dce5ed; font:13px/1.6 Arial,sans-serif; }
.google-access .consent input { flex-shrink:0; width:17px; height:17px; margin:2px 0 0; }
.account-panel .google-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px; padding:12px; border:1px solid #747775; border-radius:4px; background:#fff; color:#1f1f1f; font:500 14px/20px 'Google Sans',Arial,sans-serif; letter-spacing:.25px; text-transform:none; text-shadow:none; box-shadow:none; clip-path:none; }
.account-panel .google-button img { flex:0 0 20px; width:20px; height:20px; object-fit:contain; }
.account-panel .google-button:hover:not(:disabled) { background:#f8faff; border-color:#4d6a8d; box-shadow:0 1px 3px #0003; }
.account-panel .google-button:disabled { opacity:.65; cursor:not-allowed; }
#google-register-help,#google-login-help { margin:10px 0 0; color:#bdcbd6; font:12px/1.6 Arial,sans-serif; }
#google-register-help { color:#e8c58e; }
.auth-divider { margin:24px 0 18px; font-size:12px; color:#a7b9c7; }
#guest>h3 { margin-bottom:10px; }
#guest>p { margin-bottom:18px; }

#display-name[readonly] { color:#b4c3ce;border-color:#354552;cursor:default; }
#name-policy { color:#e8c58e;line-height:1.6; }