*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;background:#19191f;color:#f5f5f7}button,input{font:inherit}button{cursor:pointer}.save-header{height:68px;background:#f38ab7;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px}.back{justify-self:start;text-decoration:none;color:#29131d;border:1px solid #ffffff55;border-radius:8px;padding:9px 13px;font-weight:700}.logo{display:flex;align-items:center;justify-content:center}.logo img{height:49px;max-width:250px;object-fit:contain}.header-spacer{width:1px}.save-layout{min-height:calc(100dvh - 68px);display:grid;grid-template-columns:1fr 1fr}.preview-side{background:#18191f;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:34px 32px 22px;min-width:0;border-right:1px solid #393941}.preview-frame{width:min(100%,640px);min-height:300px;border:1px solid #444650;border-radius:20px;background:#25262e;display:flex;justify-content:center;align-items:center;padding:0 22px;overflow:hidden}.preview-frame canvas{display:block;width:auto;max-width:100%;max-height:min(75dvh,760px);height:auto;object-fit:contain;background:transparent}.preview-side p{font-size:12px;color:#bfc0c9;text-align:center}.controls-side{background:#26272f;padding:42px clamp(24px,4vw,55px);min-width:0}.controls-inner{max-width:720px;margin:0 auto}.controls-inner h1{font-size:30px;margin:0 0 13px}.lead{color:#bfc0c9;font-size:14px;line-height:1.6;margin:0 0 38px}.controls-inner h2{font-size:19px;margin:0 0 16px}.save-options{display:grid;grid-template-columns:1fr 1fr;gap:13px}.save-options button{display:flex;min-height:136px;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:#34353e;border:1px solid #545561;color:#fff;border-radius:13px;padding:14px 9px}.save-options button.active{background:#d81f67;border:2px solid #ff6da1}.format-icon{font-size:28px}.save-options strong{font-size:14px}.save-options small{font-size:12px;color:#d8d8e0}.format-detail{color:#c0c0ca;margin:14px 0 30px;font-size:13px}.nickname-area label{display:block;font-size:16px;font-weight:700;margin-bottom:13px}.nickname-area label span{font-size:12px;color:#bfc0c9;font-weight:400;margin-left:10px}.nickname-controls{display:flex;gap:9px}.nickname-controls input{min-width:0;flex:1;background:#353640;border:1px solid #555864;color:white;border-radius:9px;padding:12px}.nickname-controls button{border:1px solid #5d5e68;background:#454650;border-radius:9px;color:#fff;padding:10px 16px;font-weight:700}.nickname-controls #nickname-register{background:#b5a038;color:white;border:1px solid #c5b352}.nickname-note,.help,.fallback{font-size:12px;color:#bfc0c9;line-height:1.5}.frames-group{margin-top:24px}.frames-group h2{font-size:15px}.frame-options{display:flex;gap:7px;flex-wrap:wrap}.frame-options button{border:1px solid #585965;background:#373841;border-radius:8px;color:#fff;padding:8px 11px;font-size:12px}.frame-options button.active{border-color:#f38ab7;background:#7d334e}.controls-inner hr{border:0;border-top:1px solid #454650;margin:30px 0 25px}.save-actions{display:grid;gap:10px}.save-actions button{border:0;border-radius:11px;padding:17px;color:white;font-weight:800;background:#f62b7d}.save-actions #share-image{background:#393a43;border:1px solid #61616b}.save-actions #share-image:not([hidden]){display:block}.help{margin-top:26px}.fallback{color:#9799a4}@media(max-width:800px){.save-header{height:56px}.logo img{height:39px;max-width:175px}.save-layout{display:flex;flex-direction:column}.preview-side{padding:20px 12px 14px;border:0}.preview-frame{max-width:440px;min-height:150px;padding:0 14px}.preview-frame canvas{max-height:48dvh}.controls-side{padding:25px 18px 55px}.controls-inner h1{font-size:25px}.lead{margin-bottom:24px}.save-options button{min-height:108px}.nickname-controls button{padding:10px}.nickname-area label span{display:block;margin-left:0;margin-top:4px}}

/* Stable snapshot styles migrated from JS (2026-11-04). */

  /* All three choices share the available width, including narrow mobile screens. */
  .gf-snapshot-formats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;gap:clamp(6px,1vw,12px)!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;overflow:visible!important;padding:0!important}
  .gf-snapshot-formats>[data-format]{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:clamp(5px,0.8vw,10px)!important;box-sizing:border-box!important;min-width:0!important;width:100%!important;max-width:none!important;height:auto!important;min-height:132px!important;padding:clamp(8px,1.4vw,17px) clamp(3px,0.9vw,14px)!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;flex:none!important}
  .gf-snapshot-formats .gf-format-icon{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 36px!important;width:36px!important;height:36px!important;line-height:1!important;font-size:32px!important;font-weight:700!important;color:inherit!important}
  .gf-snapshot-formats .gf-format-icon-profile::before{content:'';display:block;width:24px;height:24px;border:3px solid currentColor;box-shadow:inset 0 0 0 3px transparent;box-sizing:border-box}
  .gf-snapshot-formats .gf-format-icon-fullbody::before{content:'';display:block;width:18px;height:29px;border:3px solid currentColor;border-radius:2px;box-sizing:border-box}
  .gf-snapshot-formats .gf-format-label{display:block!important;width:100%!important;font-size:clamp(11px,1.35vw,17px)!important;line-height:1.4!important;font-weight:700!important;text-wrap:balance;white-space:normal!important}
  .gf-snapshot-formats .gf-format-filetype{display:block!important;font-size:clamp(10px,1vw,14px)!important;line-height:1.2!important;font-weight:400!important;opacity:.8}
  @media(max-width:520px){
    .gf-snapshot-formats>[data-format]{min-height:112px!important}
    .gf-snapshot-formats .gf-format-label{font-size:11px!important}
    .gf-snapshot-formats .gf-format-icon{flex-basis:30px!important;width:30px!important;height:30px!important;font-size:28px!important}
  }
  #avatar.gf-transparent-preview{background-color:#f7f7f7!important;background-image:conic-gradient(#e8e8e8 25%,#fff 0 50%,#e8e8e8 0 75%,#fff 0)!important;background-size:24px 24px!important}
  #gf-snapshot-ad{clear:both;position:relative;box-sizing:border-box;width:100%;padding:24px 16px;min-height:130px;text-align:center;margin:0 auto}
  #gf-snapshot-ad ins.adsbygoogle{display:block;max-width:970px;margin:0 auto}
 

/* 2026-11-07: Leave room for automatic side-rail ads on desktop. */
@media (min-width:821px){
 .save-layout{max-width:1280px;margin-left:auto;margin-right:auto}
}
/* The existing #gf-snapshot-ad is inserted directly after <main> by gf.js.
   This guide follows the ad and remains visible on mobile. */
.gf-snapshot-guide{clear:both;padding:10px 18px 42px;background:#19191f}
.gf-snapshot-guide-inner{max-width:980px;margin:0 auto;padding:22px 26px;background:#25262d;border:1px solid #40404a;border-radius:9px}
.gf-snapshot-guide h2{font-size:18px;line-height:1.5;margin:0 0 10px}
.gf-snapshot-guide h3{font-size:14px;line-height:1.5;margin:18px 0 6px}
.gf-snapshot-guide p{font-size:13px;line-height:1.8;color:#cacbd3;margin:0 0 7px}
@media (max-width:800px){
 .gf-snapshot-guide{padding:12px 12px 32px}
 .gf-snapshot-guide-inner{padding:17px 15px}
 .gf-snapshot-guide h2{font-size:16px}
 .gf-snapshot-guide p{font-size:12px}
}

/* GirlFashion card: playful score and fantasy weekday attribute preview. */
.frame-options.gf-score-box{display:flex;flex-direction:column;align-items:flex-start;gap:5px;flex-wrap:nowrap}
.gf-score-box .gf-card-rating-info{font-weight:700;font-size:14px;line-height:1.5;color:#f8d7e4;margin:0}
.gf-score-box .gf-card-rating-note{font-weight:400;font-size:12px;line-height:1.65;color:#bfc0c9;margin:0}

/* Browser-local five-card collection (snapshot only). */
[hidden]{display:none!important}
.gf-collection{margin:27px 0 0;padding:24px 0 0;border-top:1px solid #464751}
.gf-collection-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.gf-collection-heading h2{margin:0 0 10px!important;font-size:18px!important}
#gf-collection-count{font-size:13px;white-space:nowrap;color:#f5accd;font-weight:700}
.gf-collection-intro{font-size:13px;color:#c8c9d2;line-height:1.6;margin:0 0 15px}
.gf-collection-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:stretch}
.gf-collection-slot{display:flex;min-width:0;aspect-ratio:2 / 3;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;background:#34353e;border:1px dashed #62636d;border-radius:7px;padding:0;position:relative;color:#b9bac2;font-size:11px;font-weight:700}
button.gf-collection-slot{cursor:pointer;border-style:solid;transition:border-color .15s ease,transform .15s ease}
button.gf-collection-slot:hover,button.gf-collection-slot:focus-visible{border-color:#ffa6ca;outline:2px solid #f38ab7;outline-offset:1px}
.gf-collection-plus{font-size:26px;font-weight:300;line-height:1.1}
.gf-collection-filled img{display:block;width:100%;height:100%;object-fit:contain;background:#17171b}
.gf-collection-slot-info{position:absolute;bottom:0;left:0;right:0;min-height:20px;display:flex;align-items:center;justify-content:center;padding:2px 3px;background:rgba(19,17,22,.86);color:#fff;font-size:10px;line-height:1.25;text-align:center}
.gf-collection-replacing .gf-collection-filled{border:2px solid #f38ab7}
.gf-collection-replacing .gf-collection-slot-info{background:#a21756}
.gf-collection-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gf-collection-buttons button{font-size:13px;font-weight:700;border-radius:9px;padding:12px 15px;color:#fff;background:#b82667;border:1px solid #e45b93}
.gf-collection-buttons button:disabled{cursor:default;opacity:.6}
#gf-collection-cancel{background:#41424b;border-color:#6f7079}
.gf-collection-status{min-height:1.5em;margin:8px 0 0;color:#f7d29f;font-size:12px;line-height:1.5}
.gf-collection-note{font-size:11px;line-height:1.65;color:#adaeb9;margin:7px 0 0}
.gf-collection-viewer{margin-top:15px;padding:14px;border:1px solid #555762;background:#1e2027;border-radius:10px}
.gf-collection-view-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px;font-size:13px}
#gf-collection-close{font-size:12px;color:#ddd;background:#373943;border:1px solid #595b63;border-radius:7px;padding:7px 10px}
#gf-collection-view-image{display:block;width:auto;max-width:100%;max-height:420px;height:auto;margin:0 auto;border:1px solid #504a3a;object-fit:contain}
#gf-collection-view-info{margin:10px 0;color:#e5d7c4;text-align:center;font-size:13px}
.gf-collection-view-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.gf-collection-view-actions>a,.gf-collection-view-actions>button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:8px;padding:10px 15px;font-size:12px;font-weight:700;color:#fff;border:1px solid #676875;background:#454650}
#gf-collection-download{background:#d32975;border-color:#ef6aa2}
@media(max-width:480px){
 .gf-collection-slots{gap:5px}
 .gf-collection-slot{border-radius:5px;font-size:9px}
 .gf-collection-slot-info{font-size:9px;min-height:18px}
 .gf-collection-heading h2{font-size:16px!important}
 .gf-collection-buttons button{width:100%}
}
/* Keep the image preview at the top when the controls/collection column grows tall.
   Mobile layout remains unchanged. */
@media (min-width: 801px) {
  .save-layout > .preview-side { justify-content: flex-start; }
}

/* Preview-only trading-card reveal replay and opt-in sound controls. */
.gf-card-effect-controls{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 0}
.gf-card-effect-controls button{appearance:none;cursor:pointer;border:1px solid #6d586b;
 background:#37313e;color:#f4e5ec;padding:9px 13px;border-radius:8px;
 font-size:12px;font-weight:700;line-height:1.4}
.gf-card-effect-controls button:hover,.gf-card-effect-controls button:focus-visible{border-color:#eaaac6;background:#4b3344}
.gf-card-effect-controls button[aria-pressed="true"]{background:#70435a;color:#fff;border-color:#f19cbe}
.gf-card-effect-controls button[hidden]{display:none!important}
