/* Login panel — dimensions aligned with play/.puzzle-card (420px, 24px padding) */

:root {

  --login-panel-width: min(420px, 94vw);

  --login-debug-layout-width: min(900px, 96vw);

  --login-panel-padding: 24px;

  --login-panel-bg: #0a0a0a;

  --login-panel-border: 1px solid #333;

  --login-panel-height: min(420px, 85vh);

}



*, *::before, *::after {

  box-sizing: border-box;

}



html {

  width: 100%;

  min-height: 100%;

  overflow-x: hidden;

}



body {

  margin: 0;

  min-height: 100vh;

  width: 100%;

  max-width: none;

  padding: 24px max(12px, 3vw) 32px;

  overflow-x: hidden;

  font-family: Georgia, "Times New Roman", serif;

  background: #0c0c0c;

  color: #ececec;

}



/* /login, /logintest: single centered column */

.login-shell {

  width: min(100%, var(--login-panel-width));

  max-width: var(--login-panel-width);

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



/* /login-debug: login form + debug log as one centered block */

.login-layout {

  width: min(100%, var(--login-debug-layout-width));

  max-width: var(--login-debug-layout-width);

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 16px;

  align-items: stretch;

}



.login-layout .login-shell {

  width: min(100%, var(--login-panel-width));

  max-width: var(--login-panel-width);

  margin: 0 auto;

}



.login-layout .log-card {

  width: 100%;

  padding: 24px 28px;

  border: 1px solid #333;

  background: #141414;

}



@media (min-width: 768px) {

  .login-layout {

    flex-direction: row;

    align-items: flex-start;

  }



  .login-layout .login-shell {

    flex: 0 1 var(--login-panel-width);

    min-width: 0;

    margin-left: 0;

    margin-right: 0;

  }



  .login-layout .log-card {

    flex: 1 1 380px;

    min-width: 0;

  }

}



.login-box {

  width: 100%;

  padding: var(--login-panel-padding);

  border: var(--login-panel-border);

  background: var(--login-panel-bg);

  display: flex;

  flex-direction: column;

  height: var(--login-panel-height);

  min-height: 300px;

}



.login-box h1 {

  margin: 0 0 6px;

  font-size: 18px;

  font-weight: 600;

  color: #fff;

  flex-shrink: 0;

}



.login-logo {

  text-align: center;

  margin: 0 0 1rem;

}



.login-logo img {

  display: block;

  margin: 0 auto 15px;

  max-height: 100px;

  width: auto;

  height: auto;

}



.login-box label {

  display: block;

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: #888;

  margin: 6px 0 4px;

  flex-shrink: 0;

}



.login-box input {

  width: 100%;

  padding: 10px 12px;

  font: inherit;

  font-size: 1rem;

  background: #111;

  border: 1px solid #444;

  color: #fff;

  border-radius: 0;

  flex-shrink: 0;

}



.login-box input:focus {

  outline: 1px solid #ccc;

  border-color: #ccc;

}



.login-box input:disabled,

.login-box textarea:disabled {

  opacity: 0.45;

  cursor: not-allowed;

}



.login-box .password-wrap {

  position: relative;

  flex: 0 1 auto;

  min-height: 0;

}



.login-box .password-wrap textarea {

  width: 100%;

  display: block;

  box-sizing: border-box;

  min-height: calc(20px + 1.35em);

  padding: 10px 12px;

  padding-right: 5.5rem;

  font: inherit;

  font-size: 1rem;

  line-height: 1.35;

  background: #111;

  border: 1px solid #444;

  color: #fff;

  border-radius: 0;

  resize: none;

  overflow-y: hidden;

  overflow-x: hidden;

  word-break: break-word;

  overflow-wrap: break-word;

  white-space: pre-wrap;

}



.login-box .password-wrap textarea:focus {

  outline: 1px solid #ccc;

  border-color: #ccc;

}



.login-box .password-wrap textarea.masked {

  -webkit-text-security: disc;

  text-security: disc;

}



.login-box .password-wrap.revealed textarea {

  padding-right: 12px;

}



.login-box .password-toggle {

  position: absolute;

  right: 6px;

  top: 6px;

  margin: 0;

  width: auto;

  padding: 6px 10px;

  font-size: 0.78rem;

  background: #1a1a1a;

  color: #bbb;

  border: 1px solid #444;

  cursor: pointer;

  border-radius: 2px;

  z-index: 1;

}



.login-box .password-toggle:hover {

  color: #fff;

  border-color: #666;

}



.login-box .password-toggle:focus {

  outline: 1px solid #ccc;

  outline-offset: 1px;

}



/* Login buttons — high specificity beats play/index inline `button` rules (variant A default) */

#screen-login .login-box button#submit,

.login-shell > .login-box button#submit {

  margin-top: 12px;

  width: 100%;

  padding: 12px;

  font: inherit;

  font-size: 0.95rem;

  background: #f0f0f0;

  color: #111;

  border: none;

  cursor: pointer;

  border-radius: 2px;

  flex-shrink: 0;

}



#screen-login .login-box button#submit:hover:not(:disabled),

.login-shell > .login-box button#submit:hover:not(:disabled) {

  background: #e0e0e0;

  border-color: transparent;

}



#screen-login .login-box button#submit:disabled,

.login-shell > .login-box button#submit:disabled {

  opacity: 0.45;

  cursor: not-allowed;

}



#screen-login .login-box button.secondary,

.login-shell > .login-box button.secondary {

  margin-top: 8px;

  width: 100%;

  padding: 10px;

  font: inherit;

  font-size: 0.85rem;

  background: transparent;

  color: #aaa;

  border: 1px solid #444;

  cursor: pointer;

  border-radius: 2px;

  flex-shrink: 0;

}



#screen-login .login-box button.secondary:hover:not(:disabled),

.login-shell > .login-box button.secondary:hover:not(:disabled) {

  background: transparent;

  color: #fff;

  border-color: #666;

}



#userHint {

  font-size: 0.8rem;

  min-height: 1.2em;

  line-height: 1.35;

}



#userHint.ok { color: #6c6; }

#userHint.err { color: #e88; }



.rules-panel {

  width: 100%;

}



#rules {

  list-style: none;

  padding: 0;

  margin: 0;

}



#rules li {

  padding: 8px 10px;

  margin-bottom: 6px;

  font-size: 0.88rem;

  line-height: 1.35;

  border-left: 3px solid #444;

  background: #1a1a1a;

}



#rules li.passed  { border-color: #4a4; color: #bdb; }

#rules li.pending { border-color: #666; color: #aaa; }

#rules li.failed  { border-color: #c44; color: #fbb; background: #221010; }



.rule-color-swatch {

  display: inline-block;

  vertical-align: text-bottom;

  width: 14px;

  height: 14px;

  margin: 0 1px;

  padding: 0;

  border: 1px solid #555;

  border-radius: 2px;

  background: #333;

  cursor: pointer;

  font: inherit;

}



.rule-color-swatch:hover:not(:disabled) {

  border-color: #888;

}



.rule-color-swatch:disabled {

  opacity: 0.45;

  cursor: not-allowed;

}



#rules li a {

  color: #9cf;

  text-decoration: underline;

}



#msg {

  font-size: 0.85rem;

  min-height: 1.2em;

  line-height: 1.35;

}



#msg.err { color: #f88; }

#msg.ok { color: #8f8; }



#mapsPanel { margin-top: 12px; display: none; }

#mapsPanel.visible { display: block; }



/* Clip Google Maps embed chrome (address bar, footer, links) — cross-origin, no iframe CSS. */

#mapsPanel .maps-embed-clip {

  position: relative;

  overflow: hidden;

  width: 100%;

  height: min(360px, 42vh);

  min-height: 280px;

  border: 1px solid #444;

  border-radius: 2px;

  background: #0a0a0a;

}



#mapsPano {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

}



#mapsPano[hidden],

#mapsEmbed[hidden] {

  display: none;

}



#mapsEmbed {

  position: absolute;

  top: -60px;

  left: 0;

  width: calc(100% + 56px);

  height: calc(100% + 88px);

  border: 0;

  background: #0a0a0a;

  outline: none;

}



#chessPanel { margin-top: 12px; display: none; }

#chessPanel.visible { display: block; }



#chessBoard {

  width: min(100%, 320px);

  margin: 0 auto;

}



@media (max-width: 480px) {

  :root {

    --login-panel-height: min(380px, 80vh);

  }



  .login-box h1 { font-size: 16px; }



  #rules li { font-size: 0.82rem; }



  #mapsPanel .maps-embed-clip {

    height: min(300px, 38vh);

    min-height: 220px;

  }

}



.login-fade-overlay {

  position: fixed;

  inset: 0;

  z-index: 99999;

  background: #000;

  opacity: 0;

  pointer-events: none;

  transition: opacity 600ms ease;

}



.login-fade-overlay.visible {

  opacity: 1;

  pointer-events: auto;

}



.login-antibot-panel {

  width: var(--login-panel-width);

  margin: 16px auto 0;

  padding: var(--login-panel-padding);

  background: var(--login-panel-bg);

  border: var(--login-panel-border);

  text-align: center;

}



.login-antibot-hint {

  margin: 0 0 16px;

  font-size: 0.95rem;

  color: #bdbdbd;

}



.login-antibot-swatches {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  justify-content: center;

}



.login-antibot-swatch {

  width: 44px;

  height: 44px;

  border-radius: 6px;

  border: 2px solid #444;

  cursor: pointer;

  transition: transform 0.12s ease, border-color 0.12s ease;

}



.login-antibot-swatch:hover:not(.done) {

  transform: scale(1.06);

  border-color: #888;

}



.login-antibot-swatch.picked {

  border-color: #6c6;

  box-shadow: 0 0 0 2px rgba(102, 204, 102, 0.35);

}



/* Login UX variants (login page only) */

.login-actions {

  display: flex;

  flex-direction: column;

  gap: 0;

  margin-top: 12px;

}



.login-actions #submit {

  margin-top: 0;

}



/* Variant B — swapped visuals; labels stay honest (Entrar / Reiniciar contraseña) */

#screen-login .login-box.login-variant-b.login-variant-b-swapped-styles button#submit,

.login-shell > .login-box.login-variant-b.login-variant-b-swapped-styles button#submit {

  background: transparent;

  color: #aaa;

  border: 1px solid #444;

  padding: 10px;

  font-size: 0.85rem;

}



#screen-login .login-box.login-variant-b.login-variant-b-swapped-styles button#submit:hover:not(:disabled),

.login-shell > .login-box.login-variant-b.login-variant-b-swapped-styles button#submit:hover:not(:disabled) {

  background: transparent;

  color: #fff;

  border-color: #666;

}



#screen-login .login-box.login-variant-b.login-variant-b-swapped-styles button#submit:disabled,

.login-shell > .login-box.login-variant-b.login-variant-b-swapped-styles button#submit:disabled {

  opacity: 0.45;

}



#screen-login .login-box.login-variant-b.login-variant-b-swapped-styles button#resetPassword,

.login-shell > .login-box.login-variant-b.login-variant-b-swapped-styles button#resetPassword {

  background: #f0f0f0;

  color: #111;

  border: none;

  padding: 12px;

  font-size: 0.95rem;

}



#screen-login .login-box.login-variant-b.login-variant-b-swapped-styles button#resetPassword:hover:not(:disabled),

.login-shell > .login-box.login-variant-b.login-variant-b-swapped-styles button#resetPassword:hover:not(:disabled) {

  background: #e0e0e0;

  border-color: transparent;

}



.login-box.login-variant-c {

  position: relative;

  overflow: hidden;

}



.login-box.login-variant-c .login-actions.login-variant-c-stage {

  position: relative;

}



.login-box.login-variant-c #submit {

  position: absolute;

  transition: left 0.08s linear, top 0.08s linear;

  z-index: 2;

}



.login-box.login-variant-c #submit.login-variant-c-cornered {

  transition: left 0.2s ease, top 0.2s ease;

}



.login-btn-main {

  display: block;

  font-size: 0.95rem;

}



.login-btn-sub {

  display: block;

  font-size: 0.32rem;

  opacity: 0.72;

  margin-top: 2px;

  line-height: 1.2;

}



.login-variant-e {

  display: none;

  flex-direction: column;

  gap: 8px;

  margin-top: 12px;

}



.login-variant-e.login-variant-e-ready {

  display: flex;

}



.login-box.login-variant-e.login-variant-e-panel-active .login-actions {

  display: none !important;

}



#screen-login .login-variant-e-choice,

.login-shell .login-variant-e-choice {

  margin-top: 0;

  width: 100%;

  padding: 10px;

  font: inherit;

  font-size: 0.85rem;

  background: transparent;

  color: #aaa;

  border: 1px solid #444;

  cursor: pointer;

  border-radius: 2px;

  flex-shrink: 0;

}



#screen-login .login-variant-e-choice:hover:not(:disabled),

.login-shell .login-variant-e-choice:hover:not(:disabled) {

  background: transparent;

  color: #fff;

  border-color: #666;

}



.login-shell.login-variant-g-active:not(.login-variant-g-ready) .login-box.login-variant-g-form {

  display: none !important;

}



.login-shell.login-variant-g-active.login-variant-g-ready:not(.login-variant-g-show-form) .login-box.login-variant-g-form {

  display: none !important;

}



.login-shell.login-variant-g-active .login-variant-g-prelude:not(.login-variant-g-ready) {

  display: none !important;

}



.login-shell.login-variant-g-active.login-variant-g-show-form .login-variant-g-prelude {

  display: none !important;

}



.login-variant-g-prelude {

  width: 100%;

  padding: var(--login-panel-padding);

  border: var(--login-panel-border);

  background: var(--login-panel-bg);

  display: flex;

  flex-direction: column;

  align-items: stretch;

  min-height: 300px;

  text-align: center;

  justify-content: center;

}



.login-variant-g-actions {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.login-variant-g-title {

  margin: 0 0 8px;

  font-size: 1.05rem;

  font-weight: 600;

}



.login-variant-g-lead {

  margin: 0 0 16px;

  font-size: 0.85rem;

  color: #888;

}



.login-variant-g-link {

  display: inline-block;

  margin-top: 20px;

  font-size: 0.72rem;

  color: #777;

  text-decoration: underline;

}



.login-variant-g-link:hover {

  color: #bbb;

}



.login-variant-g-hidden {

  display: none !important;

}



#screen-login .login-variant-g-prelude button.secondary,

.login-shell .login-variant-g-prelude button.secondary {

  margin-top: 0;

  width: 100%;

  padding: 10px;

  font: inherit;

  font-size: 0.85rem;

  background: transparent;

  color: #aaa;

  border: 1px solid #444;

  cursor: pointer;

  border-radius: 2px;

  flex-shrink: 0;

}



#screen-login .login-variant-g-prelude button.secondary:hover:not(:disabled),

.login-shell .login-variant-g-prelude button.secondary:hover:not(:disabled) {

  background: transparent;

  color: #fff;

  border-color: #666;

}



.login-variant-debug-badge {

  display: block;

  width: fit-content;

  margin: 0 0 10px;

  padding: 2px 6px;

  font-size: 0.58rem;

  font-family: ui-monospace, Consolas, monospace;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: #6a6;

  background: #141414;

  border: 1px solid #333;

  border-radius: 2px;

  pointer-events: none;

  user-select: none;

}