.elementor-178 .elementor-element.elementor-element-2c36dc5{--display:flex;}.elementor-178 .elementor-element.elementor-element-2c36dc5.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-178 .elementor-element.elementor-element-994acaa{background-color:#FFFFFF;}.elementor-178 .elementor-element.elementor-element-0ad445a{background-color:#FDFDFD;}.elementor-178 .elementor-element.elementor-element-8f9d04e{background-color:#FDFDFD;}.elementor-178 .elementor-element.elementor-element-7a89855{background-color:#FDFDFD;}.elementor-178 .elementor-element.elementor-element-a4d66af{background-color:#FDFDFD;}.elementor-178 .elementor-element.elementor-element-b598f0c{background-color:#FDFDFD;}.elementor-178 .elementor-element.elementor-element-43cd90d{background-color:#FDFDFD;}@media(min-width:768px){.elementor-178 .elementor-element.elementor-element-2c36dc5{--width:100%;}}/* Start custom CSS */<!--
GAMECLIP AI HOW-TO GUIDE — COMPLETE STYLES
Add this entire file to one Elementor HTML widget above the guide intro.
If a guide styles HTML widget already exists, replace its contents instead.
This includes the existing layout styles plus the newer camera-position
and badge table styles. Keep the eight content widgets as they are.
No JavaScript is required. Styles apply only to GameClip guide classes.
-->
  .gc-guide,
  .gc-guide * { box-sizing: border-box; }

  .gc-guide {
    --gc-red: #d7192d;
    --gc-red-dark: #aa1121;
    --gc-ink: #111318;
    --gc-text: #3f4652;
    --gc-muted: #6f7784;
    --gc-line: #e7e9ed;
    --gc-soft: #f5f6f8;
    --gc-white: #ffffff;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    color: var(--gc-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .gc-guide { background:#fff; }
  .gc-guide-section { padding: 46px 20px; }
  .gc-guide-section + .gc-guide-section { border-top: 1px solid var(--gc-line); }
  .gc-guide-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--gc-red);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .gc-guide-kicker::before {
    content: "";
    width: 22px;
    height: 3px;
    border-radius: 10px;
    background: var(--gc-red);
  }
  .gc-guide h1,
  .gc-guide h2,
  .gc-guide h3,
  .gc-guide p { margin-top: 0; }
  .gc-guide h1 {
    margin-bottom: 16px;
    font-size: clamp(38px, 6vw, 68px);
    line-height: .98;
    letter-spacing: -.045em;
  }
  .gc-guide h2 {
    margin-bottom: 14px;
    font-size: clamp(28px, 4vw, 43px);
    line-height: 1.05;
    letter-spacing: -.035em;
  }
  .gc-guide h3 {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.3;
  }
  .gc-guide p {
    margin-bottom: 18px;
    color: var(--gc-text);
    font-size: 17px;
    line-height: 1.65;
  }
  .gc-guide a { color: var(--gc-red); }
  .gc-guide-lead { max-width: 720px; font-size: 20px !important; }
  .gc-guide-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
    align-items: center;
    gap: clamp(32px, 6vw, 74px);
  }
  .gc-guide-grid--wide-image {
    grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
  }
  .gc-guide-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
    border: 1px solid rgba(17,19,24,.12);
    box-shadow: 0 24px 60px rgba(17,19,24,.14);
  }
  .gc-guide-image--phone { max-width: 390px; margin: 0 auto; }
  .gc-guide-image--landscape { max-width: 760px; margin: 0 auto; }
  .gc-guide-steps {
    display: grid;
    gap: 14px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: gcstep;
  }
  .gc-guide-step {
    position: relative;
    min-height: 52px;
    padding: 3px 0 0 66px;
    counter-increment: gcstep;
  }
  .gc-guide-step::before {
    content: counter(gcstep);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--gc-white);
    background: var(--gc-red);
    font-size: 17px;
    font-weight: 800;
  }
  .gc-guide-step p { margin: 0; font-size: 16px; }
  .gc-guide-card-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
  }
  .gc-guide-card {
    padding: 22px;
    border: 1px solid var(--gc-line);
    border-radius: 18px;
    background: var(--gc-white);
  }
  .gc-guide-card p { margin: 0; font-size: 15px; }
  .gc-guide-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--gc-red-dark);
    background: #fff0f2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  .gc-guide-note {
    margin-top: 24px;
    padding: 18px 20px;
    border-left: 4px solid var(--gc-red);
    border-radius: 0 14px 14px 0;
    background: var(--gc-soft);
  }
  .gc-guide-note p { margin: 0; font-size: 15px; }
  .gc-guide-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
  }
  .gc-guide-duo figure { margin: 0; }
  .gc-guide-duo img { width: 100%; max-width: 340px; margin: 0 auto; }
  .gc-guide-duo figcaption {
    max-width: 390px;
    margin: 14px auto 0;
    color: var(--gc-muted);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }
  .gc-guide-hero {
    overflow: hidden;
    padding: clamp(58px, 9vw, 100px) 20px;
    border-radius: 28px;
    color: var(--gc-white);
    background:
      radial-gradient(circle at 90% 10%, rgba(215,25,45,.46), transparent 34%),
      linear-gradient(135deg, #090a0d 0%, #15171d 100%);
  }
  .gc-guide-hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }
  .gc-guide-hero p { max-width: 680px; margin: 0 auto 24px; color: #d8dbe2; }
  .gc-guide-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
  }
  .gc-guide-nav a {
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: var(--gc-white);
    background: rgba(255,255,255,.08);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  .gc-guide-nav a:hover { border-color: var(--gc-red); background: var(--gc-red); }
  .gc-guide-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: 12px;
    color: var(--gc-white) !important;
    background: var(--gc-red);
    font-weight: 800;
    text-decoration: none;
  }
  .gc-guide-footer {
    padding: 38px 20px;
    border-radius: 22px;
    color: var(--gc-white);
    background: var(--gc-ink);
    text-align: center;
  }
  .gc-guide-footer p { color: #d8dbe2; }

  .gc-guide-section { scroll-margin-top: 110px; }
  .gc-guide-hero h1, .gc-guide-footer h2 { color: #fff; }
  .gc-guide-details { margin-top: 18px; border: 1px solid var(--gc-line); border-radius: 16px; background: #fff; }
  .gc-guide-details summary { padding: 18px 20px; cursor: pointer; font-size: 17px; font-weight: 750; line-height: 1.4; }
  .gc-guide-details > div { padding: 0 20px 20px; }
  .gc-guide-details p, .gc-guide-details li { font-size: 16px; line-height: 1.65; color: var(--gc-text); }
  .gc-guide-details ul { padding-left: 22px; margin-bottom: 0; }
  .gc-guide-details li + li { margin-top: 10px; }
  .gc-guide a:focus-visible, .gc-guide summary:focus-visible { outline: 3px solid var(--gc-red); outline-offset: 4px; }
  .gc-guide-status { margin: 18px 0 0; }
  .gc-guide-status dt { font-weight: 750; margin-top: 14px; }
  .gc-guide-status dd { margin: 4px 0 0; color: var(--gc-text); line-height: 1.6; }

  @media (max-width: 767px) {
    .gc-guide-section { padding: 38px 16px; }
    .gc-guide-grid,
    .gc-guide-grid--wide-image { grid-template-columns: 1fr; gap: 30px; }
    .gc-guide-grid--wide-image .gc-guide-copy { order: -1; }
    .gc-guide-card-row,
    .gc-guide-duo { grid-template-columns: 1fr; }
    .gc-guide-card-row { gap: 12px; }
    .gc-guide-image { border-radius: 18px; }
    .gc-guide-lead { font-size: 18px !important; }
  }
</style>


<style>
.gc-guide-table-wrap{overflow-x:auto;margin-top:20px;border:1px solid var(--gc-line);border-radius:14px;background:#fff;}
.gc-guide .gc-guide-table{width:100%;border-collapse:collapse;margin:0;font-size:15px;line-height:1.55;color:var(--gc-text);}
.gc-guide-table th,.gc-guide-table td{padding:13px 15px;text-align:left;border:0;border-bottom:1px solid var(--gc-line);vertical-align:top;}
.gc-guide-table th{background:var(--gc-soft);color:var(--gc-ink);font-weight:750;}
.gc-guide-table tr:last-child td{border-bottom:0;}
.gc-guide-table caption{text-align:left;padding:14px 15px;color:var(--gc-ink);font-weight:750;}
.gc-guide .gc-guide-subtitle{margin-top:26px;}
@media(max-width:480px){.gc-guide-table th,.gc-guide-table td{padding:10px;font-size:14px;}}/* End custom CSS */