/* English computer setup SEO additions. Keep the existing game settings as the primary first viewport. */
html.setup-computer body{
  overflow-x:hidden;
  overflow-y:auto;
}

html.setup-computer .page{
  min-height:100dvh;
}

html.setup-computer .dialog-head{
  position:relative;
}

html.setup-computer .dialog-heading{
  margin:0;
  color:#f4cd73;
  font-family:Georgia,serif;
  font-size:clamp(24px,4vw,36px);
  line-height:1.1;
  letter-spacing:.5px;
  text-align:center;
}

html.setup-computer .computer-settings-slot{
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
}

html.setup-computer .computer-settings-slot .chessvola-global-settings-button{
  width:38px;
  height:38px;
  border:0;
  color:#d8c69f;
  font-size:21px;
}

html.setup-computer .computer-settings-slot .chessvola-global-settings-button:hover{
  color:#f4cd73;
}

/* Match the verified Ukrainian decorative board exactly. */
html.setup-computer .back-board{
  opacity:.16;
}

html.setup-computer .board-shell{
  width:min(72vh,680px,86vw);
  aspect-ratio:1;
  padding:6px;
  border:1px solid #b37a25;
  border-radius:18px;
  background:#06131e;
  box-shadow:0 22px 70px #0009;
}

html.setup-computer .board{
  border:1px solid #c18a36;
  border-radius:5px;
}

html.setup-computer .sq.light{
  background:#efd18f;
}

html.setup-computer .sq.dark{
  background:#936036;
}

/* Desktop geometry is declared here in full so stale setup.css cannot shift or crop the board. */
@media(min-width:521px){
  html.setup-computer .back-board{
    position:fixed;
    inset:0;
    z-index:-2;
    width:100vw;
    height:100dvh;
    opacity:.16;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    overflow:visible;
  }

  html.setup-computer .board-shell{
    box-sizing:border-box;
    flex:0 0 auto;
    width:min(72vh,680px,86vw);
    aspect-ratio:1;
    padding:6px;
    border:1px solid #b37a25;
    border-radius:18px;
    background:#06131e;
    box-shadow:0 22px 70px #0009;
  }

  html.setup-computer .board{
    box-sizing:border-box;
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    grid-template-rows:repeat(8,minmax(0,1fr));
    overflow:hidden;
    border:1px solid #c18a36;
    border-radius:5px;
  }

  html.setup-computer .sq{
    min-width:0;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
}

html.setup-computer #board .piece-glyph{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",serif;
  font-size:clamp(34px,8vw,68px);
  line-height:1;
  pointer-events:none;
  user-select:none;
  opacity:.78;
  transform:translateY(-1px);
  text-shadow:0 3px 4px #0009;
}

html.setup-computer #board .piece-glyph.black{
  color:#120d09;
}

html.setup-computer #board .piece-glyph.white{
  color:#fff7df;
  text-shadow:0 2px 3px #000b;
}

.computer-seo-content{
  position:relative;
  z-index:1;
  width:min(860px,calc(100% - 28px));
  margin:0 auto;
  padding:clamp(30px,5vw,54px) 0 clamp(38px,6vw,66px);
  color:#d8c69f;
  text-align:center;
}

.computer-seo-content h1{
  margin:0 0 12px;
  color:#f4cd73;
  font-family:Georgia,serif;
  font-size:clamp(24px,3.3vw,34px);
  line-height:1.15;
}

.computer-seo-content p{
  max-width:760px;
  margin:0 auto;
  font-size:clamp(14px,1.8vw,16px);
  line-height:1.65;
}

.computer-seo-content a{
  color:#f4cd73;
  font-weight:700;
  text-underline-offset:3px;
}

html.setup-computer[data-theme="light"] .dialog-heading{
  color:#8f5e0d;
}

html.setup-computer[data-theme="light"] .computer-settings-slot .chessvola-global-settings-button{
  color:#6b5c4f;
}

html.setup-computer[data-theme="light"] .computer-settings-slot .chessvola-global-settings-button:hover{
  color:#8f5e0d;
}

html.setup-computer[data-theme="light"] .computer-seo-content{
  color:#5f5549;
}

html.setup-computer[data-theme="light"] .computer-seo-content h1,
html.setup-computer[data-theme="light"] .computer-seo-content a{
  color:#8d5e12;
}

@media(max-width:520px){
  html.setup-computer .computer-settings-slot{
    left:12px;
  }

  html.setup-computer .dialog-heading{
    font-size:22px;
  }

  .computer-seo-content{
    width:min(100% - 22px,860px);
    padding-top:24px;
  }
}