/*!
 * BENKO CHESS COPYRIGHT NOTICE
 * © 2023–2026 Petar Benković / Benko Chess. All rights reserved.
 * This notice applies to original Benko Chess code in this file.
 * Third-party components, where present, retain their respective licences and notices.
 */
:root{
  --mate-blue:#08245c;
  --mate-dark:#5d86a4;
  --mate-light:#d8edf7;
  --mate-gold:#d99a23;
  --mate-text:#111827;
  --mate-muted:#4b5563;
}
html,body{margin:0;min-height:100%;background:transparent;color:var(--mate-text);font-family:Arial,Helvetica,sans-serif;}
.contact-mate-page{display:flex;justify-content:center;}
.mate-shell{
  width:min(100%,430px);
  padding:12px 10px 10px;
  text-align:center;
  box-sizing:border-box;
}
.mate-shell h1{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.15;
  font-weight:900;
  color:var(--mate-blue);
}
.contact-mate-page .board-resize-shell{
  width:min(100%,380px);
  max-width:380px;
  min-width:240px;
  min-height:240px;
  margin:0 auto;
  aspect-ratio:1;
}
.contact-mate-page .board-resize-shell.coords-outside .board{
  width:calc(100% - 32px);
  height:calc(100% - 32px);
  margin-left:32px;
}
.contact-mate-page .board{
  border-radius:5px;
  background-image:none;
  box-shadow:0 22px 42px rgba(8,36,92,.14);
}
.contact-mate-page .square.light{background:var(--mate-light);}
.contact-mate-page .square.dark{background:var(--mate-dark);}
.contact-mate-page .square{border:0;padding:0;}
.contact-mate-page .square.selected{box-shadow:inset 0 0 0 999px rgba(217,154,35,.38);}
.contact-mate-page .square.hint:after{background:rgba(217,154,35,.42);}
.contact-mate-page .square.capture-hint:after{border-color:rgba(217,154,35,.65);}
.contact-mate-page .piece{width:88%;height:88%;}
.contact-mate-page .coord-out{
  color:#1f3855;
  font-size:13px;
  font-weight:900;
}
.contact-mate-page .coord-out.file{bottom:4px;}
.contact-mate-page .coord-out.rank{left:7px;}
.mate-side{
  margin:10px 0 0;
  font-size:18px;
  line-height:1.15;
  font-weight:900;
  color:var(--mate-blue);
}
.mate-status{
  margin:0 auto;
  max-width:520px;
  min-height:0;
  color:var(--mate-muted);
  font-size:15px;
  font-weight:800;
}
.mate-status:empty{display:none;}
.mate-status.error{color:#9f1d1d;}
.mate-status.success{color:#0b6b35;}
.mate-status.locked{color:#7a4b00;}
@media(max-width:520px){
  .mate-shell{padding:12px 8px 10px;}
  .contact-mate-page .coord-out{font-size:14px;}
  .mate-status{font-size:13px;}
}