.play-container{
  max-width:1180px;
  margin:0 auto;
  padding:18px 16px 40px
}

.breadcrumb{
  padding:12px;
  font-size:13px;
  color:var(--muted)
}
.breadcrumb ol{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center
}
.breadcrumb li{
  display:flex;
  align-items:center;
  gap:8px
}
.breadcrumb li+li::before{
  content:"›";
  color:#9ca3af
}
.breadcrumb a{
  color:var(--text2);
  background:var(--soft);
  border:1px solid var(--soft2);
  padding:4px 8px;
  border-radius:var(--r10);
  text-decoration:none
}
.breadcrumb a:hover{
  border-color:#d1d5db;
  background:#fff;
  text-decoration:underline
}
.breadcrumb .active{
  color:var(--text);
  font-weight:700
}

.play-card{
  overflow:hidden
}

.play-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:14px 14px 12px
}
.play-title{
  display:flex;
  flex-direction:column;
  justify-content:center
}
.play-title h1{
  margin:0;
  font:700 26px/1.1 var(--head);
  letter-spacing:-.2px
}

.quick-info-bar{
  display:flex;
  flex-wrap:wrap;
  gap:14px 20px;
  margin-top:6px;
  font-size:14px;
  color:#555
}
.top-info-item{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap
}
.top-info-label{
  font-weight:500;
  color:#777
}
.top-info-value{
  font-weight:600;
  color:var(--text2)
}
.top-info-value a{
  color:#1677ff
}

.boxplay{
  display:flex;
  width:100%;
  gap:16px;
  align-items:flex-start;
  padding:0 12px
}
.dkplay,
.player{
  flex:1;
  min-width:0;
  width:100%;
  position:relative;
  border:1px solid var(--line)
}
.player-ratio{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:#000
}
.player-ratio iframe,
#gameFrame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0
}
@supports not (aspect-ratio:4/3){
  .player-ratio{
    padding-top:75%
  }
}

.mobile-cover{
  position:absolute;
  inset:0;
  z-index:5;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#0b0f1a
}
.mobile-cover .bg-cover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.32;
  filter:blur(6px);
  transform:scale(1.06)
}
.cover-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:520px;
  padding:18px;
  text-align:center
}
.play-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border:0;
  border-radius:var(--pill);
  background:var(--red);
  color:#fff;
  font:800 16px/1 var(--head);
  cursor:pointer;
  transition:transform .2s
}
.play-btn:hover{
  transform:scale(1.05)
}
.tap-hint{
  margin:10px 0 0;
  color:rgba(255,255,255,.88);
  font-size:13px;
  line-height:1.4
}

.player.is-fake-fs{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:999999;
  background:#000
}
.player.is-fake-fs iframe{
  width:100%;
  height:100%;
  border:0
}
body.fs-lock,
html.fs-lock{
  overflow:hidden;
  height:100%
}
.fs-exit-btn{
  position:fixed;
  top:env(safe-area-inset-top,10px);
  left:env(safe-area-inset-right,10px);
  z-index:1000000;
  display:none;
  padding:8px 14px;
  border-radius:999px;
  color:red;
  font-size:14px;
  font-weight:600;
  user-select:none
}
.player.is-fake-fs .fs-exit-btn{
  display:block
}
.fs-exit-btn:active{
  transform:scale(.96)
}

.play-actions{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
  padding:10px
}
.game-controls-wrap{
  overflow:hidden
}
.game-controls-toggle,
.btn-icon{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 10px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:999px;
  background:var(--soft);
  color:var(--text2);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s,box-shadow .15s,transform .05s
}
.btn-icon svg,
.game-controls-toggle svg{
  width:14px;
  height:14px;
  opacity:.75;
  fill:var(--text)
}
.gc-caret{
  font-size:14px;
  opacity:.7;
  transition:transform .18s
}
.game-controls-toggle[aria-expanded=true] .gc-caret{
  transform:rotate(180deg)
}
.game-controls-box{
  padding:14px;
  border-top:1px solid #e5e7eb;
  background:#fff
}
.game-controls-box[hidden]{
  display:none
}
.controls-label{
  margin:10px 0 6px;
  padding-left:8px;
  border-left:3px solid #fd3a40;
  font-size:14px;
  font-weight:600;
  opacity:.9
}
.controls-grid{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  padding:0;
  margin:0
}
.control-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 6px
}
.key-cap{
  padding:2px 6px;
  border:1px solid #f1b6b6;
  border-radius:4px;
  background:#fff;
  color:#b71c1c;
  font:600 .7rem/1.4 ui-monospace,SFMono-Regular,monospace;
  white-space:nowrap
}
.control-item:hover .key-cap{
  background:#fff5f5;
  border-color:#e57373
}
.key-action{
  color:var(--text2);
  font-size:.7rem;
  white-space:nowrap
}
.bcn{
  display:flex;
  justify-content:flex-end;
  gap:5px
}

.boxright{
  width:280px;
  flex-shrink:0
}
.rate-widget{
  padding:0
}
.rate-widget-title{
  margin:0 0 10px;
  font-size:15px;
  font-weight:600
}
.boxright .hrate{
  margin:0 0 12px;
  padding:12px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px 12px;
  align-items:center;
  border:1px solid rgba(0,0,0,.08);
  border-radius:2px;
  background:rgba(255,255,255,.75)
}
.boxright .star-rating{
  display:inline-flex;
  flex-direction:row;
  gap:4px;
  line-height:1;
  user-select:none;
  -webkit-tap-highlight-color:transparent
}
.boxright .star-rating span{
  position:relative;
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer
}
.boxright .star-rating span::before{
  content:"★";
  font-size:18px;
  color:rgba(0,0,0,.22);
  transition:transform .12s,color .12s
}
.boxright .star-rating span.full::before{
  color:#f59e0b
}
.boxright .star-rating span.half::after{
  content:"★";
  position:absolute;
  left:0;
  top:0;
  width:50%;
  overflow:hidden;
  font-size:18px;
  color:#f59e0b;
  pointer-events:none
}
.boxright .star-rating span.hover::before{
  color:red;
  transform:translateY(-1px)
}
.boxright .rating-text-small{
  overflow:hidden;
  color:rgba(0,0,0,.68);
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis
}
.boxright .rating-text-small strong{
  color:var(--text2);
  font-weight:900
}
.boxright .no-votes,
.boxright .rating-text-small .muted{
  color:var(--muted);
  font-weight:650
}
.boxright .rating-feedback,
.boxright .rating-msg{
  grid-column:1/-1;
  min-height:18px;
  margin-top:2px;
  color:#28a745;
  font-size:12.5px;
  font-weight:800
}
.boxright .rating-feedback.error{
  color:#dc3545
}

.sidebar-widget{
  padding:12px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  background:#f9fafb
}
.sidebar-title{
  margin:0 0 10px;
  padding-bottom:10px;
  border-bottom:2px solid rgba(0,0,0,.75);
  color:var(--text2);
  font-size:15px;
  font-weight:600
}
.sidebar-list{
  list-style:none;
  max-height:512px;
  overflow:auto;
  margin:0;
  padding:0
}
.sidebar-list::-webkit-scrollbar{
  width:8px
}
.sidebar-list::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(0,0,0,.18)
}
.sidebar-item{
  border-bottom:1px solid rgba(0,0,0,.12)
}
.sidebar-item:last-child{
  border-bottom:0
}
.sidebar-link{
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:12px;
  color:inherit;
  text-decoration:none;
  transition:background .15s,border-color .15s,transform .05s
}
.sidebar-link:hover{
  background:rgba(255,255,255,.9);
  text-decoration:none
}
.sidebar-thumb{
  display:block;
  width:40px;
  height:40px;
  border-radius:10px;
  object-fit:cover;
  background:rgba(0,0,0,.06)
}
.sidebar-game-title{
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  color:var(--text2);
  font-size:14px;
  font-weight:500;
  line-height:1.25
}
.yty{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  border-left:1px solid rgba(0,0,0,.12)
}
.sidebar-game-meta{
  padding-left:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap
}
.sidebar-game-meta-y{
  color:var(--muted);
  font-size:11px;
  font-weight:500
}

.game-layout-horizontal{
  margin:10px;
  font-family:"Segoe UI",sans-serif
}
.gh-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:18px;
  align-items:start;
  margin-top:14px
}
.gh-left{
  min-width:0;
  display:flex;
  gap:16px;
  align-items:flex-start
}
.gh-main-content{
  flex:1;
  min-width:0
}
.gh-header{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  margin-bottom:10px
}
.gh-header h2{
  margin:0 0 6px;
  color:var(--text);
  font-size:22px
}
.altname{
  margin-top:2px;
  padding:var(--r10);
  border-radius:var(--r10);
  background:var(--soft);
  color:var(--muted);
  font-size:13px
}
.altname .label{
  margin-right:6px;
  color:var(--text2);
  font-weight:700
}
.alt-names-container{
  color:var(--text2);
  font-size:14px;
  font-style:italic;
  line-height:1.6
}
.gh-desc-text{
  color:var(--text2);
  font-size:15px;
  line-height:1.75
}
.gh-desc-text p{
  margin:0 0 12px
}

.moregames{
  padding:10px;
  border-radius:10px;
  background:var(--soft3)
}
.platform-section-play{
  margin-top:3px;
  margin-bottom:30px
}
.platform-section-play>h3{
  margin:0 0 12px;
  color:var(--text);
  font:800 18px/1.1 var(--head)
}
.platform-section-play>a{
  display:inline-block;
  margin-bottom:12px;
  text-decoration:none
}
.platform-section-play>a h3{
  margin:0;
  color:#1677ff;
  font:700 18px/1.3 var(--head)
}
.platform-section-play>a h3::after{
  content:" →";
  font-weight:400;
  opacity:.6;
  transition:opacity .2s
}
.platform-section-play>a:hover h3::after{
  opacity:1
}
.game-grid-play{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:stretch
}
.game-card-play{
  position:relative;
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadowS);
  transition:transform .15s,box-shadow .15s
}
.game-card-play:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadowM)
}
.card-link-play{
  display:block
}
.card-img-play{
  background:var(--soft);
  border-bottom:1px solid rgba(0,0,0,.06)
}
.card-thumb-img-play{
  display:block;
  width:100%;
  max-height:240px;
  object-fit:cover
}
.card-body-play{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:8px;
  min-height:92px;
  padding:10px
}
.card-title-play{
  min-height:36px;
  margin:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  color:var(--text2);
  font:800 15px/1.25 var(--head)
}
.btn-play-play{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:34px;
  margin-top:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--soft3);
  color:var(--text);
  font:800 13px/1 var(--head);
  text-decoration:none;
  transition:background .15s,border-color .15s,transform .05s
}
.btn-play-play:hover{
  border-color:#d1d5db;
  background:#fff
}
.btn-play-play:active{
  transform:scale(.985)
}

.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:4px;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  box-shadow:0 2px 4px rgba(0,0,0,.2)
}
.game-card-play .badge{
  position:absolute;
  top:5px;
  right:5px;
  z-index:2
}
.badge[data-type=nes]{background:#d32f2f;border:1px solid #b71c1c}
.badge[data-type=snes]{background:linear-gradient(135deg,#9c27b0 50%,#7b1fa2 50%);border:1px solid #7b1fa2}
.badge[data-type=sega]{background:#0089cf;border:1px solid #005f99}
.badge[data-type=flash]{background:linear-gradient(to bottom,#ff9a3b,#cd201f);text-shadow:0 1px 1px rgba(0,0,0,.3)}
.badge[data-type=dos]{background:#000;color:#0f0;border:1px solid #0f0;font-family:"Courier New",Courier,monospace;box-shadow:none}
.badge[data-type=gameboy]{background:linear-gradient(135deg,#9bbc0f 50%,#6b8e23 50%);border:1px solid #6b8e23}
.badge[data-type=gameboy-advance]{background:linear-gradient(135deg,#7e57c2 50%,#5e35b1 50%);border:1px solid #5e35b1}
.badge[data-type=gameboy-color]{background:linear-gradient(135deg,#00bcd4 50%,#0097a7 50%);border:1px solid #0097a7}

.gh-right{
  min-width:0
}
.gh-bottom-info{
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff
}
.info-header{
  margin:0;
  padding:0 0 10px;
  border-bottom:1px solid var(--line);
  color:var(--text);
  font-size:15px;
  font-weight:900;
  letter-spacing:.2px
}
.gh-thumb{
  margin:0 auto;
  padding-top:10px
}
.gh-thumb figure{
  margin:0;
  padding:0
}
.gh-thumb img{
  width:100%;
  height:auto;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  background:#fff
}
.gh-info-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px
}
.info-item{
  height:auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:9px 10px;
  border:1px solid rgba(0,0,0,.05);
  border-radius:12px;
  background:var(--soft3)
}
.info-item .label{
  margin-bottom:4px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase
}
.info-item .value{
  color:var(--text);
  font-size:14px;
  font-weight:500
}
.info-item .value a{
  color:#1677ff;
  text-decoration:none
}
.tags-container{
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.tag-chip{
  display:inline-block;
  margin:0;
  padding:4px 10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:#fff;
  color:#495057!important;
  font-size:12px;
  text-decoration:none!important
}
.full-width-item{
  grid-column:auto;
  margin-top:0;
  padding-top:9px;
  border-top:0
}

body.dark .breadcrumb a{
  border-color:var(--line);
  background:var(--bg);
  color:var(--text2)
}
body.dark .game-controls-toggle,
body.dark .btn-icon,
body.dark .game-controls-box,
body.dark .boxright .hrate{
  background:var(--surface);
  border-color:var(--line);
  color:var(--text)
}
body.dark .key-cap{
  background:#2d1a1a;
  border-color:#5c2b2b;
  color:#fca5a5
}
body.dark .sidebar-widget,
body.dark .gh-bottom-info,
body.dark .game-card-play{
  background:var(--surface);
  border-color:var(--line)
}
body.dark .sidebar-link:hover{
  background:var(--soft2)
}
body.dark .card-img-play{
  background:#000;
  border-bottom-color:var(--line)
}
body.dark .card-title-play{
  color:var(--text)
}
body.dark .btn-play-play{
  background:var(--bg);
  color:var(--text2);
  border-color:var(--line)
}
body.dark .btn-play-play:hover{
  background:var(--line);
  color:var(--text);
  border-color:var(--text2)
}
body.dark .gh-desc-text,
body.dark .alt-names-container{
  color:var(--text2)
}
body.dark .info-item{
  background:var(--bg);
  border-color:var(--line)
}
body.dark .info-item .value{
  color:var(--text2)
}
body.dark .info-item .value a,
body.dark .top-info-value a,
body.dark .platform-section-play>a h3{
  color:#60a5fa
}
body.dark .tag-chip{
  background:var(--bg);
  border-color:var(--line);
  color:var(--text2)!important
}
body.dark .boxright .star-rating span::before{
  color:rgba(255,255,255,.2)
}
body.dark .boxright .star-rating span.full::before,
body.dark .boxright .star-rating span.hover::before,
body.dark .boxright .star-rating span.half::after{
  color:#ef4444
}
body.dark .boxright .rating-text-small{
  color:var(--text2)
}
body.dark .boxright .rating-text-small strong{
  color:var(--text)
}

@media(min-width:1024px){
  .gh-right .gh-bottom-info{
    position:sticky;
    top:12px
  }
}
@media(max-width:1024px){
  .gh-main-grid{
    grid-template-columns:1fr
  }
  .gh-left{
    flex-direction:column
  }
  .gh-thumb{
    width:100%;
    flex:none
  }
  .game-grid-play{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
@media(max-width:1023px){
  .boxplay{
    flex-direction:column
  }
  .boxright{
    width:100%;
    min-width:0;
    position:static
  }
  .sidebar-list{
    max-height:260px
  }
}
@media(max-width:768px){
  .mobile-cover{
    display:flex
  }
  .play-title h1{
    font-size:18px
  }
  .btn-icon{
    height:30px;
    padding:0 9px;
    font-size:12px
  }
  .btn-icon span{
    display:none
  }
  .boxright .hrate{
    grid-template-columns:1fr;
    gap:8px
  }
  .boxright .star-rating span{
    width:16px;
    height:16px
  }
  .boxright .star-rating span::before,
  .boxright .star-rating span.half::after{
    font-size:16px
  }
  .boxright .rating-text-small{
    white-space:normal
  }
}
@media(max-width:640px){
  .quick-info-bar{
    gap:8px 14px;
    font-size:13px
  }
  .game-grid-play{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .card-body-play{
    min-height:88px;
    padding:9px
  }
  .btn-play-play{
    height:32px;
    border-radius:10px
  }
}
@media(max-width:600px){
  .controls-grid{
    gap:6px 10px
  }
}


.hero_list{
  padding:12px
}

.hero_list h1{
  margin:0 0 10px;
  font:700 34px/1.15 var(--head);
  letter-spacing:-.2px
}

.hero_list p{
  margin:0 0 14px;
  max-width:860px;
  color:var(--text2)
}

.home-container{
  padding:18px 0 40px
}

.platform-section{
  margin-top:22px;
  scroll-margin-top:90px
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.game-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px
}

.game-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadowS);
  transition:transform .15s,box-shadow .15s
}

.game-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadowM)
}

.card-img{
  overflow:hidden;
  background:var(--soft)
}

.card-link{
  display:block
}

.card-thumb-img{
  display:block;
  width:100%;
  height:100%;
  max-height:240px;
  object-fit:initial;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges
}

.card-body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:10px;
  padding:12px
}

.card-title{
  margin:0;
  font:700 16px/1.2 var(--head)
}

.btn-play{
  display:block;
  margin-top:auto;
  padding:10px 12px;
  border:1px solid var(--line);
  background:var(--soft3);
  color:var(--text);
  font-family:var(--head);
  font-weight:700;
  text-align:center;
  text-decoration:none;
  transition:transform .2s,background .2s,border-color .2s
}

.btn-play:hover{
  transform:scale(1.05);
  border-color:#d1d5db;
  background:#fff;
  text-decoration:none
}

.load-more-wrapper{
  margin:30px 0 40px;
  text-align:center
}

.btn-cta{
  display:inline-block;
  padding:12px 30px;
  border:0;
  border-radius:50px;
  background:var(--red);
  color:#fff;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 4px 15px rgba(225,29,72,.18);
  transition:transform .2s,box-shadow .2s
}

.btn-cta:hover{
  transform:scale(1.05)
}

#loader-icon{
  display:none;
  margin-top:12px;
  color:var(--text2)
}

body.dark .game-card{
  background:var(--surface);
  border-color:var(--line)
}

body.dark .card-img{
  background:#000
}

body.dark .card-title{
  color:var(--text)
}

body.dark .btn-play{
  background:var(--bg);
  color:var(--text2);
  border-color:var(--line)
}

body.dark .btn-play:hover{
  background:var(--line);
  color:var(--text);
  border-color:var(--text2)
}

@media(max-width:768px){
  .card-title{
    font-size:14px
  }
}

@media(max-width:520px){
  .hero_list h1{
    font-size:28px
  }

  .game-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

.screenshots-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #2a303d;
}

.screenshots-section h3 {
    margin: 0 0 15px;
    color: var(--text2);
    font-size: 15px;
}

.cg-shots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.cg-shot-btn {
    padding: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 2px solid transparent;
    border-radius: 6px;
    background: #1a1e24;
    cursor: pointer;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}

.cg-shot-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.cg-shot-btn:hover {
    border-color: #0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 0, .15);
}

/* Screenshot lightbox */
.cg-lightbox{
  position:fixed;
  inset:0;
  z-index:1000000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease
}

.cg-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto
}

.cg-lb-overlay{
  position:absolute;
  inset:0;
  background:rgba(10,15,25,.9);
  backdrop-filter:blur(4px);
  cursor:zoom-out
}

.cg-lb-content{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:90vw;
  max-height:80vh;
  pointer-events:none
}

#cgLbImg{
  display:block;
  max-width:100%;
  max-height:80vh;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 10px 40px rgba(0,0,0,.8);
  pointer-events:auto
}

.cg-lb-close,
.cg-lb-nav{
  position:fixed;
  z-index:3;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:1.5rem;
  cursor:pointer;
  transition:background .2s,transform .2s
}

.cg-lb-close:hover,
.cg-lb-nav:hover{
  background:var(--red);
  color:#fff
}

.cg-lb-close{
  top:20px;
  right:20px;
  font-size:2rem
}

.cg-lb-nav{
  top:50%;
  transform:translateY(-50%)
}

.cg-lb-nav.prev{
  left:20px
}

.cg-lb-nav.next{
  right:20px
}

.cg-lb-nav:hover{
  transform:translateY(-50%) scale(1.08)
}

.cg-lb-info{
  position:fixed;
  left:0;
  right:0;
  bottom:20px;
  z-index:3;
  text-align:center;
  pointer-events:none
}

#cgLbCaption{
  margin-bottom:4px;
  color:#fff;
  font-size:1.05rem;
  font-weight:600;
  text-shadow:1px 1px 3px #000
}

#cgLbCount{
  color:#aaa;
  font:13px/1.4 ui-monospace,SFMono-Regular,monospace
}

@media(max-width:768px){
  .cg-lb-nav{
    display:none
  }

  .cg-lb-close{
    top:10px;
    right:10px;
    width:40px;
    height:40px
  }

  #cgLbCaption{
    font-size:1rem
  }
}

.character-box {
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-color: var(--line);
}
.character-box a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px;
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
  transition: 0.2s;
  background: var(--gd-sidebar);
}
.character-box img {
  border-radius: 8px;
}