.guide-page{max-width:1160px;padding-top:22px;padding-bottom:50px}.breadcrumbs{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:14px;margin-bottom:18px}.breadcrumbs span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guide-hero{background:var(--panel);border:1px solid #383838;padding:30px;margin-bottom:36px}.guide-hero h1{font-size:36px;margin:7px 0 8px}.guide-badges{display:flex;gap:8px}.guide-badges span{display:inline-block;border:1px solid #535353;color:#d2d2d2;padding:3px 8px;font-size:12px;line-height:1.4}.guide-updated{font-size:13px;color:var(--muted);margin-bottom:15px}.guide-intro{max-width:880px;margin-bottom:21px}.guide-content{max-width:970px;margin:auto;color:#d0d0d0}.guide-content>section{margin-bottom:46px}.guide-content h2{color:var(--text);font-size:26px;margin-bottom:14px}.guide-content h3{color:var(--text);font-size:18px;margin-bottom:8px}.guide-content p{margin-bottom:15px}.evidence-note{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:20px;padding:15px 17px;border-left:3px solid var(--accent);background:var(--panel)}.evidence-note strong{color:var(--text)}.evidence-note span{color:var(--muted)}.guide-table-wrap{width:100%;overflow-x:auto;margin-top:20px}.guide-content table{width:100%;border-collapse:collapse;text-align:left;font-size:15px}.guide-content th,.guide-content td{padding:12px 14px;border-bottom:1px solid #3a3a3a;vertical-align:top}.guide-content th{background:#2b2b2b;color:#eee}.guide-content kbd{display:inline-block;min-width:32px;text-align:center;border:1px solid #666;border-bottom-width:2px;border-radius:3px;padding:2px 6px;color:var(--text);font:700 14px Arial,sans-serif}.guide-steps{list-style:none;counter-reset:steps;padding:0;margin:24px 0}.guide-steps li{position:relative;padding:0 0 22px 50px;counter-increment:steps}.guide-steps li:before{content:counter(steps);position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;background:#333;border:1px solid #555;color:#fff;font-weight:bold}.guide-steps strong{display:block;color:var(--text);margin-bottom:4px}.guide-steps p{margin:0}.external-callout{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px;background:var(--panel);border-left:3px solid var(--accent)}.external-callout div{display:grid}.external-callout span{color:var(--muted);font-size:14px}.roblox-link{flex-shrink:0;background:var(--accent);color:#0b1626;font-weight:bold;padding:10px 14px;border-radius:3px}.roblox-link:hover{color:#0b1626}.guide-tool{background:var(--panel);padding:25px;border:1px solid #3b3b3b}.tool-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.tool-fields label{display:grid;gap:7px;color:var(--text);font-weight:bold}.guide-tool select{width:100%;min-height:46px;padding:8px 10px;background:#191919;color:#fff;border:1px solid #555;border-radius:3px;font:inherit}.tool-result{margin-top:18px;padding:17px;background:#1d1d1d;border:1px solid #444}.tool-result strong{color:var(--text)}.tool-result p{margin:6px 0 0}.deep-sections{display:grid;gap:16px;margin-top:20px}.deep-sections article{padding:20px;background:var(--panel);border:1px solid #393939}.deep-sections article p:last-child{margin-bottom:0}.community-label{display:inline-block;margin:4px 0 18px;padding:5px 9px;border:1px solid #5a5a5a;color:var(--muted);font-size:13px}.tips-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.tips-grid article{padding:18px;background:var(--panel);border-left:3px solid #555}.tips-grid p{margin:0}.external-callout-late{margin-top:22px}.guide-games .section-head{align-items:flex-start}.guide-games .section-head p{color:var(--muted);max-width:760px;margin:5px 0 0}.guide-games .related-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.guide-content .faq details{padding:14px 0}.guide-content .faq p{margin:10px 0 3px}.guide-content .faq summary{font-size:16px}
[data-theme="light"] .guide-hero,[data-theme="light"] .guide-tool,[data-theme="light"] .deep-sections article{border-color:#c8c8c8}[data-theme="light"] .guide-content th,[data-theme="light"] .guide-content td,[data-theme="light"] .guide-content .faq details{border-color:#ccc}[data-theme="light"] .guide-content{color:#3d3d3d}[data-theme="light"] .guide-content th{background:#e5e5e5;color:#202020}[data-theme="light"] .guide-badges span{color:#444;border-color:#aaa}[data-theme="light"] .guide-steps li:before{background:#ddd;border-color:#aaa;color:#111}[data-theme="light"] .guide-tool select{background:#fff;color:#202020;border-color:#aaa}[data-theme="light"] .tool-result{background:#f7f7f7;border-color:#ccc}[data-theme="light"] .roblox-link{color:#fff}[data-theme="light"] .community-label{border-color:#aaa}[data-theme="light"] .tips-grid article{border-color:#999}
@media(max-width:800px){.guide-page{padding-top:16px}.guide-hero{padding:22px 18px;margin-bottom:30px}.guide-hero h1{font-size:30px}.guide-content>section{margin-bottom:38px}.guide-games .related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.external-callout{align-items:flex-start;flex-direction:column}.roblox-link{width:100%;text-align:center;min-height:44px}.tool-fields{grid-template-columns:1fr}.tips-grid{grid-template-columns:1fr}}
@media(max-width:600px){.guide-page{width:calc(100% - 24px)}.guide-hero h1{font-size:27px}.guide-content h2{font-size:23px}.guide-content table,.guide-content tbody,.guide-content tr,.guide-content td{display:block;width:100%}.guide-content thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.guide-content tr{padding:10px 0;border-bottom:1px solid #3a3a3a}.guide-content td{display:grid;grid-template-columns:106px minmax(0,1fr);gap:10px;border:0;padding:5px 8px}.guide-content td:before{content:attr(data-label);font-weight:bold;color:var(--text)}.guide-games .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-tool{padding:20px 15px}.deep-sections article{padding:17px 15px}}




.guide-roblox-shell { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 3px; overflow: hidden; display: block; text-decoration: none; border: 1px solid #333; }
.guide-roblox-shell img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: opacity 0.2s, transform 0.2s; }
.guide-roblox-shell:hover img { opacity: 0.5; transform: scale(1.02); }
.guide-roblox-btn { white-space: nowrap; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--accent); color: #0c182b; font-weight: bold; font-size: 18px; padding: 15px 30px; border-radius: 4px; display: flex; align-items: center; gap: 10px; transition: background 0.2s, transform 0.2s; }
.guide-roblox-shell:hover .guide-roblox-btn { background: #93bdff; transform: translate(-50%, -50%) scale(1.05); }
.guide-roblox-btn svg { width: 24px; height: 24px; fill: currentColor; }

.guide-yt-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  margin-bottom: 36px;
}
.guide-yt-player {
  position: relative;
  width: 100%;
  background: #080808;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #333;
}
.guide-yt-main {
  height: 100%;
}
.guide-yt-player.featured {
  height: 100%;
}
.guide-yt-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.guide-yt-side .guide-yt-player {
  aspect-ratio: 16/9;
}
.guide-yt-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.guide-yt-player:hover img {
  transform: scale(1.03);
}
.guide-yt-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.guide-yt-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px;
  z-index: 2;
  pointer-events: none;
}
.guide-yt-label {
  display: inline-block;
  background: #c4302b;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.guide-yt-title {
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.guide-yt-side .guide-yt-title {
  font-size: 14px;
  padding: 12px;
  margin-bottom: 0;
}
.guide-yt-side .guide-yt-info {
  padding: 0;
}
.guide-yt-side .guide-yt-label {
  display: none;
}
.guide-yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  width: 68px;
  height: 48px;
  transition: transform 0.2s;
}
.guide-yt-play .yt-bg {
  transition: fill 0.2s;
  fill: #ff0000;
  fill-opacity: 0.9;
}
.guide-yt-player:hover .guide-yt-play {
  transform: translate(-50%, -50%) scale(1.05);
}
.guide-yt-player:hover .yt-bg {
  fill: #ff3333;
  fill-opacity: 1;
}
.guide-yt-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 10;
  background: #000;
}
@media (max-width: 800px) {
  .guide-yt-grid {
    grid-template-columns: 1fr;
  }
  .guide-yt-main {
    aspect-ratio: 16/9;
  }
  .guide-yt-side .guide-yt-title {
    font-size: 16px;
    padding: 16px;
  }
}

.guide-yt-side .guide-yt-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.guide-yt-side .guide-yt-play {
  transform: translate(-50%, -50%) scale(0.7);
}
.guide-yt-side .guide-yt-player:hover .guide-yt-play {
  transform: translate(-50%, -50%) scale(0.8);
}

.guide-top-games {
  margin-bottom: 36px;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  gap: 10px !important;
}
.guide-top-games .game-card > span {
  font-size: 13px !important;
  padding: 6px 8px !important;
  height: 48px !important;
  line-height: 18px !important;
}
@media(max-width: 1000px) {
  .guide-top-games {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}
@media(max-width: 600px) {
  .guide-top-games {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
}

.guide-yt-modal {
  border: 0;
  padding: 0;
  background: transparent;
  width: calc(100% - 32px);
  max-width: 1100px;
  overflow: visible;
  margin: auto;
}
.guide-yt-modal::backdrop {
  background: rgba(0,0,0,0.85);
}
.guide-yt-modal-inner {
  position: relative;
  width: 100%;
  background: #111;
  border-radius: 4px;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
}
.guide-yt-modal-close {
  position: absolute;
  top: -40px;
  right: -5px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
}
.guide-yt-modal-close:hover {
  color: #ff3333;
}
.guide-yt-modal-body {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
.guide-yt-modal-body iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.guide-yt-modal-title {
  padding: 16px 20px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
body.modal-open {
  overflow: hidden;
}

.guide-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  margin-top: 25px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.guide-jump::-webkit-scrollbar { display: none; }
.guide-jump a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #ccc;
  padding: 8px 14px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.guide-jump a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.guide-jump a:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}



[data-theme="light"] .guide-jump {
  background: #f8f8f8;
  border-color: #ddd;
}
[data-theme="light"] .guide-jump a {
  color: #444;
}
[data-theme="light"] .guide-jump a:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #111;
}
[data-theme="light"] .guide-jump a:not(:last-child) {
  border-right-color: rgba(0, 0, 0, 0.06);
}

/* Scroll margin top for all anchor sections */
.guide-content > section,
.guide-yt-section,
.guide-play-now,
.guide-games {
  scroll-margin-top: 100px;
}
@media (max-width: 600px) {
  .guide-content > section,
  .guide-yt-section,
  .guide-play-now,
  .guide-games {
    scroll-margin-top: 80px;
  }
}

@media(max-width:600px) {
  .guide-roblox-btn {
    font-size: 16px;
    padding: 12px 18px;
    gap: 8px;
  }
  .guide-roblox-btn svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
  }
}