/* A compact social profile: fixed composition, a dark hover, Chess.com green. */
.chess-tile{
  --chess-green:#81b64c;
  --chess-surface:#fff;
  --chess-border:#f0f0f3;
  --chess-text:#55545a;
  --chess-muted:#929198;
  --chess-rating:#5e5d63;
  --chess-panel-bottom:#f0f0f2;
  --chess-panel-border:#e6e6e9;
  --chess-panel-highlight:#ffffffb3;
  --chess-button:#fff;
  --chess-button-border:#e4e4e7;
  --chess-button-text:#28272c;
  --chess-avatar-border:#34323840;
  grid-column:1;
  grid-row:4;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:258px;
  padding:20px;
  background:var(--chess-surface);
  border-color:var(--chess-border);
  color:var(--chess-text);
  cursor:default;
  transition:background-color .55s ease-in-out,border-color .55s ease-in-out,color .55s ease-in-out;
}
.chess-profile-heading{display:flex;align-items:center;gap:12px;min-width:0;height:56px;flex:none}
.chess-avatar{
  position:relative;display:block;width:56px;height:56px;flex:none;
  border:1px solid var(--chess-avatar-border);border-radius:50%;overflow:hidden;
  background:#e2e0dd;isolation:isolate;
  transition:border-color .55s ease-in-out;
}
/* Display just the supplied 240px portrait; the original screenshot is intact. */
.chess-avatar img{position:absolute;max-width:none;width:502.5%;height:auto;left:-15%;top:-10%;filter:grayscale(1);user-select:none;transition:filter .55s ease-in-out}
.chess-identity{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.chess-name-row{display:flex;align-items:center;gap:6px;white-space:nowrap}
.chess-username{font-size:14px;font-weight:600;line-height:20px;letter-spacing:0;color:var(--chess-text);transition:color .55s ease-in-out}
.chess-flag{display:block;width:18px;height:14px;object-fit:contain;flex:none}
.chess-badge{display:block;width:18px;height:18px;object-fit:contain;flex:none}
.chess-joined{font-size:12px;line-height:16px;color:var(--chess-muted);white-space:nowrap;transition:color .55s ease-in-out}
/* 56px profile + 74px ratings + 44px button leave two equal 20px gaps. */
.chess-ratings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,168px);align-self:center;margin:0;padding:0;flex:none}
.chess-rating-panel{
  display:grid;grid-template-rows:24px 20px 14px;align-content:center;justify-items:center;row-gap:2px;
  min-width:0;height:74px;padding:5px 6px;
  border:1px solid var(--chess-panel-border);border-radius:8px;
  background-color:var(--chess-panel-bottom);
  background-image:linear-gradient(#ffffff0b,#ffffff00);
  box-shadow:inset 0 1px 0 var(--chess-panel-highlight);
  transition:background-color .55s ease-in-out,border-color .55s ease-in-out,box-shadow .55s ease-in-out;
}
.chess-ratings dt{display:contents}
.chess-ratings dt>span{grid-row:3;font-size:12px;line-height:14px;font-weight:600;color:var(--chess-muted);transition:color .55s ease-in-out}
.chess-rating-icon{display:block;grid-row:1;width:24px;height:24px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .55s ease-in-out,opacity .55s ease-in-out}
.chess-ratings dd{grid-row:2;margin:0;font-size:18px;line-height:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--chess-rating);transition:color .55s ease-in-out}
.chess-play{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:44px;margin:0;padding:7px 10px;flex:none;
  border:2px solid var(--chess-button-border);border-radius:999px;
  background:var(--chess-button);color:var(--chess-button-text);
  font-size:16px;line-height:22px;font-weight:600;white-space:nowrap;
  box-shadow:inset 0 1px 0 #ffffff0a;
  transition:background-color .45s ease-in-out,border-color .45s ease-in-out,color .45s ease-in-out,box-shadow .25s ease-in-out;
}
.chess-play img{display:block;flex:none;width:19px;height:24px;object-fit:contain;filter:grayscale(1) brightness(.35);transition:filter .45s ease-in-out}
.chess-tile:is(:hover,:has(:focus-visible)){
  --chess-surface:#262522;
  --chess-border:#141410;
  --chess-text:#e4e3dd;
  --chess-muted:#aaa9a2;
  --chess-rating:#f2f2ee;
  --chess-panel-bottom:#383735;
  --chess-panel-border:#53524e;
  --chess-panel-highlight:#ffffff12;
  --chess-button:#30312c;
  --chess-button-border:#3e4037;
  --chess-button-text:#f5f5ef;
  --chess-avatar-border:#0b0b09;
}
.chess-tile:is(:hover,:has(:focus-visible)) .chess-play img{filter:none}
.chess-tile:is(:hover,:has(:focus-visible)) .chess-avatar img{filter:grayscale(0)}
.chess-tile:is(:hover,:has(:focus-visible)) .chess-rating-icon{filter:none;opacity:1}
.chess-play:is(:hover,:focus-visible){background:#373f2b;border-color:var(--chess-green);box-shadow:inset 0 1px 0 #c8e4ab19,0 2px 4px #00000028}
.chess-play:active{background:#303923;box-shadow:inset 0 1px 3px #0004}
.chess-play:focus-visible{outline:2px solid #9ccc65;outline-offset:4px}
@media(min-width:701px) and (max-width:1100px){
  .chess-tile{grid-column:1;grid-row:6}
}
@media(max-width:700px){
  .chess-tile{grid-column:1/3;grid-row:7}
}
/* This tile changes only colour, light and saturation, with no movement.
   Keep its requested dissolve even when the page disables motion globally. */
.chess-tile,.chess-avatar,.chess-avatar img,.chess-username,.chess-joined,
.chess-rating-panel,.chess-rating-icon,.chess-ratings dt>span,.chess-ratings dd,
.chess-play,.chess-play img{
  transition-property:background-color,border-color,color,box-shadow,filter,opacity!important;
  transition-duration:.3s!important;
  transition-timing-function:ease-in-out!important;
  transition-delay:0s!important;
}