:root{--g:#174e31;--cream:#fffdf5;--line:#d7e3cc}
*{box-sizing:border-box}html,body{margin:0;background:#dff0b9;color:var(--g);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC",sans-serif}
.app{width:min(100%,520px);min-height:100vh;margin:auto;background:var(--cream);padding-bottom:72px}
header{padding:18px 20px 8px}h1{margin:0;font-size:29px}.eng{font-size:11px;letter-spacing:2px}.tag{margin-top:7px;color:#607565}
.page{display:none}.page.on{display:block}.game{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden}
.art{position:absolute;inset:0;background:url("../assets/images/game-bg.png") center/cover no-repeat}
.mask{position:absolute;left:23%;right:23%;top:67%;height:12%;background:#f4c17a;border-radius:42px}
.status{position:absolute;top:62.6%;left:5%;right:5%;text-align:center;font-weight:900;text-shadow:0 2px #fff}
.bar{position:absolute;top:66.1%;left:18%;right:18%;height:17px;background:white;border:3px solid var(--g);border-radius:20px;overflow:hidden}
.fill{height:100%;width:0;background:#66b84d;transition:.18s}
.action{position:absolute;top:70.7%;left:25%;right:25%;height:7.3%;border:0;border-radius:999px;background:#2e8a3e;color:white;font-weight:900;font-size:18px;box-shadow:0 5px 0 #175a29;cursor:pointer}
.action:active{transform:translateY(3px);box-shadow:0 2px #175a29}
.seed{position:absolute;left:47%;top:39%;width:6%;aspect-ratio:1;background:#e9b56a;border:3px solid var(--g);border-radius:55% 45% 55% 45%;transform:rotate(14deg);transition:opacity .12s}
.seed:before,.seed:after{content:"";position:absolute;top:34%;width:12%;height:12%;background:var(--g);border-radius:50%}.seed:before{left:25%}.seed:after{right:25%}
.sprout{position:absolute;left:47%;top:34%;width:7%;height:9%;opacity:0;transform:scale(.4);transition:.25s}.sprout.show{opacity:1;transform:scale(1)}
.sprout:before,.sprout:after{content:"";position:absolute;bottom:25%;width:70%;height:42%;background:#65b44d;border:3px solid var(--g)}.sprout:before{right:45%;border-radius:90% 10% 90% 10%;transform:rotate(20deg)}.sprout:after{left:45%;border-radius:10% 90% 10% 90%;transform:rotate(-20deg)}.sprout i{position:absolute;left:45%;bottom:0;width:12%;height:55%;background:var(--g)}
.character-card{position:absolute;left:50%;top:20.5%;width:300px;height:250px;transform:translateX(-50%) scale(.96);opacity:0;background:#fffaf0e8;border:2px solid #eadfc9;border-radius:26px;box-shadow:0 12px 30px #3a2b1824;backdrop-filter:blur(2px);transition:.25s;z-index:4}.character-card.show{opacity:1;transform:translateX(-50%) scale(1)}
.character{position:absolute;left:50%;top:23%;width:38%;height:35%;transform:translate(-50%,100px) scale(.65);opacity:0;object-fit:contain;filter:drop-shadow(0 8px 7px #0002);transition:.5s cubic-bezier(.2,.9,.2,1.2);z-index:5}
.character.show{transform:translate(-50%,0) scale(1);opacity:1}
.result{position:absolute;left:10%;right:10%;top:60.2%;z-index:8;background:#fffdf3ee;border:3px solid var(--g);border-radius:20px;text-align:center;padding:9px;backdrop-filter:blur(3px)}.result h2,.result p{margin:3px}.result .moomoo-name{margin-top:4px;font-size:17px;font-weight:900;color:var(--g)}
.content{padding:20px}.card{background:white;border:2px solid var(--line);border-radius:22px;padding:18px;margin:12px 0}.placeholder{height:150px;border-radius:16px;background:#e9efdf;display:grid;place-items:center;color:#718171}
.links a,.links button{display:block;width:100%;margin:12px 0;border:0;border-radius:22px;padding:15px;text-align:center;text-decoration:none;background:#2d843d;color:white;font-weight:900;font-size:17px}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);height:72px;background:#fffdf7;border-top:1px solid var(--line);display:flex;z-index:20}.nav button{flex:1;border:0;background:transparent;color:#5a705e;font-weight:800}.nav button.on{background:#e7f4c8;color:#1d6134}.nav span{display:block;font-size:22px}

.game.result-mode .status{visibility:hidden}.game.result-mode .bar{visibility:hidden}

/* QA PATCH v2 — result layout alignment only */
.game.result-mode .character-card{
  top:14.5%;
  width:300px;
  height:250px;
}
.game.result-mode .character{
  top:15.2%;
  height:238px;
  max-height:238px;
  object-fit:contain;
  transform:translateX(-50%) translateY(0) scale(.92);
}
.game.result-mode .character.show{
  transform:translateX(-50%) translateY(0) scale(.92);
}
.game.result-mode .result{
  top:55.5%;
  left:10%;
  right:10%;
  min-height:88px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.game.result-mode #action{
  position:absolute;
  left:25%;
  right:25%;
  width:50%;
  top:70.5%;
  z-index:9;
}
.game.result-mode .status,
.game.result-mode .bar{
  visibility:hidden;
}

/* Feature patch: collection, share card, DIY long page, OneCan brand */
.result-tools{display:none;position:absolute;left:12%;right:12%;top:80.5%;z-index:10;gap:8px}
.game.result-mode .result-tools{display:flex}
.result-tools button,.wide-btn{flex:1;border:0;border-radius:999px;padding:10px 12px;background:#fffaf0;color:var(--g);font-weight:900;box-shadow:0 2px 8px #0001;cursor:pointer}

.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px;background:#163a2dcc}
.modal.open{display:flex}
.modal-sheet{position:relative;width:min(94vw,720px);max-height:88vh;overflow:auto;border-radius:26px;background:#fffdf5;padding:24px;color:var(--g)}
.modal-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:30px;color:var(--g);cursor:pointer}
.modal-sub{color:#6f7d70}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.book-card{min-height:155px;padding:10px;border:1px solid #d9e1cf;border-radius:18px;background:#f7f6e9;text-align:center}
.book-card img{width:100%;height:105px;object-fit:contain}
.book-card strong{display:block;font-size:13px}
.book-card small{color:#7a867d}
.book-mystery{display:grid;place-items:center;min-height:155px;font-size:34px;color:#8da08f;filter:saturate(.4)}
#shareCanvas{display:block;width:min(100%,450px);height:auto;margin:14px auto;border-radius:24px;box-shadow:0 8px 26px #0002;background:#f8f2dc}
.share-sheet .wide-btn{display:block;width:min(100%,450px);margin:auto;background:var(--g);color:white}

.support-long{padding-bottom:28px}
.section-head{margin-bottom:18px}
.section-head h2{margin-bottom:4px}
.diy-card{margin:0 0 26px;padding:16px;border:1px solid #d9e1cf;border-radius:24px;background:#fffdf8}
.diy-image-frame{width:100%;aspect-ratio:4/3;padding:12px;border:2px solid #d9e1cf;border-radius:22px;background:#eef4dd;overflow:hidden}
.diy-image-frame img,.diy-placeholder{width:100%;height:100%;object-fit:contain;border-radius:14px;background:#fffaf0}
.diy-placeholder{display:grid;place-items:center;text-align:center;color:#55705d;font-weight:900}
.diy-placeholder small{font-weight:500}
.diy-card h3{margin:14px 2px 4px}.diy-card p{margin:0 2px;color:#667368}

.about-wrap{text-align:center;padding:18px 8px 34px}
.onecan-logo{display:block;max-width:220px;max-height:160px;object-fit:contain;margin:8px auto 18px}
.about-link{display:block;margin:18px auto 0;padding:14px 18px;border-radius:999px;text-decoration:none;font-weight:900}
.about-link.primary{background:#171717;color:white}

/* Features v2 */
.support-long{padding:4px 0 40px}
.support-long .section-head{padding:2px 2px 10px}
.support-long .section-head h2{margin:0 0 5px;font-size:25px}
.diy-card{margin:0 0 28px;padding:14px;border:1px solid #d8e1cd;border-radius:24px;background:#fffdf8;box-shadow:0 8px 20px #183e2710}
.diy-image-frame{width:100%;height:420px;padding:12px;border:2px solid #d4dfc7;border-radius:22px;background:#eaf2d7;overflow:hidden}
.diy-image-frame>img,.diy-image-frame>.diy-placeholder{width:100%;height:100%;object-fit:contain;border-radius:14px;background:#fffaf0}
.diy-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#315f43;text-align:center}
.diy-placeholder strong{font-size:24px}.diy-placeholder span{font-size:14px;color:#748276}
.diy-copy{padding:2px 4px}.diy-copy h3{margin:14px 0 5px}.diy-copy p{margin:0;line-height:1.7;color:#657367}

.brand-logo-frame{width:min(100%,320px);min-height:180px;margin:4px auto 18px;display:grid;place-items:center;border-radius:24px;background:#fff}
.onecan-logo{max-width:280px;max-height:160px;object-fit:contain}

/* The result page no longer needs the decorative growth-process strip. */
.game.result-mode .growth,
.game.result-mode .growth-process,
.game.result-mode .process,
.game.result-mode .steps,
.game.result-mode .evolution{
  display:none!important;
}

/* v3 actual sections */
.support-long{padding-bottom:40px}.support-long .diy-card{margin:22px 0 30px;padding:16px;border:2px solid #d6e1ca;border-radius:24px;background:#fff}
.diy-image-frame{width:100%;height:420px;padding:12px;box-sizing:border-box;border-radius:20px;background:#eaf0df;overflow:hidden}
.diy-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:14px;background:#fffaf0}
.diy-placeholder strong{font-size:24px}.diy-placeholder span{color:#718073}.diy-card h3{font-size:22px;margin:16px 4px 8px}.diy-card p{margin:0 4px 8px}
.about-card{padding:22px;border:2px solid #d6e1ca;border-radius:24px;background:#fff;text-align:center}
.onecan-logo-local{display:block;max-width:220px;height:230px;object-fit:contain;margin:0 auto 14px}
.about-action{display:block;margin-top:14px;padding:16px;border-radius:22px;text-align:center;text-decoration:none;font-weight:900}.about-action.site{background:#2d8f43;color:#fff}.about-action.threads{background:#222;color:#fff}
.game.result-mode .growth,.game.result-mode .process,.game.result-mode .steps,.game.result-mode .evolution,.game.result-mode .timeline{display:none!important}

/* patch_02 */
.nav-onecan-logo{display:block;width:26px;height:26px;object-fit:contain;margin:0 auto 2px}
.nav button[data-page="about"]{font-size:13px}
.about-bio{margin-top:22px;padding-top:18px;border-top:1px solid #d6e1ca;text-align:left}
.about-bio p{margin:8px 0;line-height:1.65}


/* patch_04 — use the clean lower-table area of the user-supplied background */
.game:not(.result-mode) .mask{
  top:77.2%;
  height:18.5%;
}
.game:not(.result-mode) .status{
  top:79.0%;
}
.game:not(.result-mode) .bar{
  top:82.6%;
}
.game:not(.result-mode) .action{
  top:87.0%;
}

/* patch_05 — remove orange control backing panel */
.game:not(.result-mode) .mask{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* patch_06 — fix BOTH orange "split-pants" backings + use lower empty space */

/* 1) Growing-state backing: remove it entirely, not merely visually style it. */
.game:not(.result-mode) .mask{
  display:none !important;
}

/* 2) Result-state orange backing behind "再種一隻": remove it too. */
.game.result-mode .mask{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Keep the result CTA itself clean and independent. */
.game.result-mode .action{
  box-shadow:0 5px 0 rgba(16,88,54,.18);
}

/* Move share / collection controls downward into the intentionally empty table area. */
.game.result-mode .result-actions{
  top:84.5% !important;
}

/* patch_07 — result controls follow QA arrow positions */

/* 再種一隻：往下，與結果框拉開 */
.game.result-mode .action{
  top:69.5% !important;
}

/* 分享 / 收藏：再往下放進大片空桌面 */
.game.result-mode .result-actions{
  top:86.8% !important;
}

/* patch_08 — QA: use the菜刀, not the雕刻刀. Move BOTH result control rows by a real 100px. */
.game.result-mode .action{
  transform:translateY(100px) !important;
}
.game.result-mode .action:active{
  transform:translateY(103px) !important;
}
.game.result-mode .result-tools{
  transform:translateY(100px) !important;
}