/* PEGNIO desktop: enlarge the complete game card on click, then show live game preview. */
@media (min-width:900px) {
  /* Carousel controls float over the game artwork, as on the reference. */
  .peg-desk-rowbuttons {padding:0 3px!important;}
  .peg-desk-arrow {
    width:59px!important;height:59px!important;min-width:59px!important;
    border:1px solid #bdb9c7b8!important;border-radius:19px!important;
    background:#090909ed!important;color:#fff!important;
    box-shadow:0 5px 18px #000b!important;font:500 37px/1 system-ui!important;
    backdrop-filter:blur(9px);
  }
  .peg-desk-arrow:hover:not(:disabled) {
    background:#262032f3!important;border-color:#fff!important;
  }
  .peg-desk-arrow:disabled{visibility:hidden!important}
  .peg-desk-game {transition:box-shadow .15s ease,filter .15s ease!important;}
  .peg-desk-game:hover {box-shadow:0 0 0 2px #bba5f2!important}
  .peg-desk-game:hover img {transform:none!important;}
}
.peg-preview-backdrop {
  position:fixed;inset:0;z-index:16000;
  background:#030308ad;backdrop-filter:blur(3px);
  opacity:0;transition:opacity .23s ease;
}
.peg-preview-backdrop.peg-preview-visible {opacity:1;}
.peg-preview-card {
  position:fixed;z-index:16001;
  box-sizing:border-box;overflow:hidden;border-radius:14px;
  border:1px solid #9c83d3;background:#11121b;
  box-shadow:0 18px 70px #000d,0 0 0 1px #ffffff11;
  transition:left .28s cubic-bezier(.22,1,.36,1),
             top .28s cubic-bezier(.22,1,.36,1),
             width .28s cubic-bezier(.22,1,.36,1),
             height .28s cubic-bezier(.22,1,.36,1);
  contain:layout;
}
.peg-preview-media{
  position:relative;display:block;width:100%;height:100%;
  background:#141520;overflow:hidden;
  transition:height .28s cubic-bezier(.22,1,.36,1);
}
.peg-preview-card.peg-preview-expanded .peg-preview-media{height:calc(100% - 66px);}
.peg-preview-cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.14) contrast(1.06);
  transition:opacity .35s ease;
}
.peg-preview-card.peg-preview-has-frame .peg-preview-cover{opacity:0;pointer-events:none;}
.peg-preview-frame{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;background:#141520;
  opacity:0;transition:opacity .3s ease;
}
.peg-preview-card.peg-preview-has-frame .peg-preview-frame{opacity:1;}
.peg-preview-wait {
  position:absolute;left:16px;top:16px;
  background:#070711bb;color:#f3e9ff;padding:6px 10px;
  border-radius:8px;font:600 12px system-ui;z-index:1;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
}
.peg-preview-card.peg-preview-loading .peg-preview-wait{opacity:1;}
.peg-preview-footer{
  display:flex;align-items:center;gap:12px;position:absolute;bottom:0;left:0;right:0;
  min-height:66px;box-sizing:border-box;padding:10px 12px;
  background:linear-gradient(100deg,#29233b,#171723);
  opacity:0;transition:opacity .2s ease;
}
.peg-preview-expanded .peg-preview-footer{opacity:1;}
.peg-preview-info {display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.peg-preview-name{font:800 16px/1.2 system-ui;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peg-preview-category{font:600 11px system-ui;color:#b8b0ce}
.peg-preview-play,.peg-preview-close {
  flex-shrink:0;display:grid;place-items:center;cursor:pointer;
  min-height:40px;border-radius:9px;color:#fff;font:750 13px system-ui;
}
.peg-preview-play{padding:0 16px;border:1px solid #9368f1;background:#7650ce}
.peg-preview-play:hover{background:#926cf1;}
.peg-preview-close{
  position:absolute;z-index:3;right:10px;top:10px;
  width:38px;height:38px;border:1px solid #ffffff70;
  background:#10101bda;font:700 26px/1 system-ui;
  opacity:0;transition:opacity .16s;
}
.peg-preview-expanded .peg-preview-close{opacity:1;}
.peg-preview-close:hover{background:#483760;}
.peg-preview-backdrop:focus-visible,.peg-preview-play:focus-visible,.peg-preview-close:focus-visible{outline:3px solid #ceb8ff;outline-offset:3px;}
@media(prefers-reduced-motion:reduce) {
 .peg-preview-backdrop,.peg-preview-card,.peg-preview-media,.peg-preview-footer,
 .peg-preview-frame,.peg-preview-cover{transition:none!important}
}
@media(max-width:899px){
 .peg-preview-backdrop,.peg-preview-card{display:none!important;}
}