:root{--gold:#ffd75e;--gold2:#f5a623;--soil:#7a4a21;--soil2:#5c3618;--wood:#6b4226;--brown:#3a2410;--green:#58a84f;--cream:#fdf6e3;--evil:#d94b3a;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{background:linear-gradient(180deg,#1a0f08 0%,#3a2010 55%,#1a0f08 100%);font-family:'ZCOOL KuaiLe','Microsoft YaHei','PingFang SC',sans-serif;color:var(--cream);display:flex;align-items:center;justify-content:center;padding:12px;min-height:100vh;}
.page{width:100%;max-width:860px;}
.hud{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;background:linear-gradient(180deg,#8a5a2b,#6b3f18);border:4px solid var(--brown);border-bottom:none;border-radius:14px 14px 0 0;padding:8px 14px;box-shadow:inset 0 2px 0 rgba(255,215,94,.22);}
.hgroup{display:flex;gap:16px;}
.stat{display:flex;flex-direction:column;align-items:center;line-height:1.05;min-width:52px;}
.stat span{font-size:12px;color:#ffd98a;letter-spacing:3px;}
.stat b{font-size:20px;color:#fff2c4;text-shadow:0 2px 0 rgba(0,0,0,.35);}
.stat.warn b{color:#ff6b5e;animation:blink .5s steps(1) infinite;}
@keyframes blink{50%{opacity:.35}}
.hbtn{font-family:inherit;background:linear-gradient(180deg,#ffd75e,#f0a120);color:#4a2c0f;border:3px solid var(--brown);border-radius:10px;padding:5px 14px;font-size:15px;cursor:pointer;box-shadow:0 3px 0 var(--brown);white-space:nowrap;}
.hbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--brown);}
.iconbtn{background:linear-gradient(180deg,#ffd75e,#f0a120);border:3px solid var(--brown);border-radius:10px;width:38px;height:36px;cursor:pointer;box-shadow:0 3px 0 var(--brown);display:flex;align-items:center;justify-content:center;color:#4a2c0f;}
.iconbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--brown);}
.iconbtn svg{width:20px;height:20px;}
.stage{position:relative;border:4px solid var(--brown);border-top:none;border-radius:0 0 16px 16px;background:#5c3618;box-shadow:0 14px 34px rgba(0,0,0,.5);}
canvas{display:block;width:100%;height:auto;border-radius:0 0 12px 12px;touch-action:none;}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(22,11,3,.56);border-radius:0 0 12px 12px;z-index:5;padding:12px;}
.hidden{display:none!important;}
.card{background:linear-gradient(180deg,#8a5a2b,#6b3f18);border:3px solid var(--brown);border-radius:18px;padding:20px 26px;text-align:center;max-width:92%;max-height:96%;overflow:auto;box-shadow:0 10px 28px rgba(0,0,0,.5);}
h1{font-size:34px;color:#ffe14d;text-shadow:0 3px 0 #7a4a21,0 7px 0 rgba(0,0,0,.28);line-height:1.12;letter-spacing:2px;}
.factoryTitle{font-size:44px;margin-bottom:6px;color:#ffe14d;text-shadow:0 4px 0 #7a4a21,0 8px 0 rgba(0,0,0,.4);letter-spacing:8px;margin-bottom:8px;}
.factoryScreen{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 50%,#3a2410 0%,#120803 70%);z-index:5;overflow:hidden;}
.factoryLeft{position:absolute;left:6%;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.factoryOd{position:absolute;right:0;bottom:0;height:96%;z-index:1;filter:drop-shadow(0 12px 16px rgba(0,0,0,.5));}
.frogBtn{position:relative;cursor:pointer;width:200px;height:200px;display:flex;align-items:center;justify-content:center;transition:transform .15s;filter:drop-shadow(0 0 24px rgba(255,225,77,.8)) drop-shadow(0 0 48px rgba(255,157,61,.5));}
.frogBtn:hover{transform:scale(1.08);}
.frogBtn img{width:100%;height:100%;object-fit:contain;animation:floatFrog 2.4s ease-in-out infinite;}
.difficultyBar{display:flex;gap:8px;margin-top:10px;justify-content:center;}
.diffBtn{padding:6px 16px;font-size:14px;background:#e8c878;color:#5a3818;border:2px solid #a06810;border-radius:8px;cursor:pointer;font-family:inherit;}
.diffBtn.active{background:#ffd75e;box-shadow:0 0 12px rgba(255,215,94,.7);font-weight:bold;}
.frogBtnLabel{position:absolute;bottom:18%;left:0;right:0;text-align:center;font-size:26px;color:#4a2c0f;letter-spacing:3px;text-shadow:0 2px 0 rgba(255,255,255,.6);font-weight:bold;pointer-events:none;}
@keyframes floatFrog{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.factorySub{display:flex;gap:10px;margin-top:6px;}
.frogs{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:10px 0 6px;}
.frogs img{width:72px;height:auto;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4));animation:bob 2.2s ease-in-out infinite;}
.frogs img:nth-child(2){width:52px;animation-delay:.6s;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.laughBox{width:162px;height:216px;margin:10px auto 4px;background-image:url('assets/laugh-sheet2.webp');background-size:3240px 216px;animation:laughplay 1.8s steps(20) infinite;filter:drop-shadow(0 10px 12px rgba(0,0,0,.4));}
@keyframes laughplay{from{background-position:0 0}to{background-position:-3240px 0}}
.dexGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px auto 6px;max-width:440px;}
.dexCell{background:rgba(0,0,0,.22);border:2px solid #7a4a21;border-radius:12px;padding:8px 4px 6px;text-align:center;}
.dexCell img{width:60px;height:60px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));}
.dexCell .nm{font-size:13px;color:#ffe9b8;margin-top:4px;line-height:1.2;}
.dexCell.locked img{filter:grayscale(1) brightness(.45);}
.dexCell.locked .nm{color:#9c8661;}
.rules{list-style:none;text-align:left;font-size:14px;color:#ffefc9;margin:10px auto 14px;max-width:330px;line-height:1.75;}
.rules li::before{content:'· ';color:#ffe14d;font-weight:bold;}
.bigbtn{font-family:inherit;font-size:22px;letter-spacing:4px;color:#4a2c0f;background:linear-gradient(180deg,#ffe14d,#f5a623);border:3px solid #7a4a21;border-radius:14px;padding:11px 38px;cursor:pointer;box-shadow:0 5px 0 #7a4a21;transition:transform .06s;width:100%;}
.bigbtn:active{transform:translateY(4px);box-shadow:0 1px 0 #7a4a21;}
.bigbtn:hover{filter:brightness(1.06);}
.bigbtn.evil{background:linear-gradient(180deg,#ff9d8a,#d94b3a);color:#fff;border-color:#7a1a10;}
.row{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap;}
.smallbtn{font-family:inherit;font-size:17px;color:#4a2c0f;background:linear-gradient(180deg,#ffe9a0,#f5a623);border:3px solid #7a4a21;border-radius:12px;padding:9px 22px;cursor:pointer;box-shadow:0 4px 0 #7a4a21;}
.smallbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #7a4a21;}
.smallbtn.danger{background:linear-gradient(180deg,#ff9d8a,#d94b3a);color:#fff;border-color:#7a1a10;box-shadow:0 4px 0 #7a1a10;}
.smallbtn.danger:active{box-shadow:0 1px 0 #7a1a10;}
.setWarn{font-size:13px;color:#ffd0c8;line-height:1.6;margin:10px 0 4px;}
.setDivider{border-top:1px solid rgba(122,74,33,.7);margin:16px 0 12px;}
.sub{font-size:14px;color:#ffe9b8;margin-top:8px;}
.setCard{min-width:min(420px,86vw);}
.setRow{margin:18px 0 6px;text-align:left;}
.setLabel{display:flex;justify-content:space-between;align-items:baseline;font-size:17px;color:#ffefc9;margin-bottom:8px;}
.setVal{font-size:15px;color:#ffe14d;min-width:52px;text-align:right;}
.setRow input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:14px;border-radius:8px;background:#3a2410;border:2px solid #7a4a21;outline:none;cursor:pointer;}
.setRow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,#ffe14d,#f5a623);border:3px solid #4a2c0f;box-shadow:0 2px 0 rgba(0,0,0,.4);cursor:pointer;}
.setRow input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#ffd75e;border:3px solid #4a2c0f;box-shadow:0 2px 0 rgba(0,0,0,.4);cursor:pointer;}
.setRow input[type=range]::-moz-range-track{height:14px;border-radius:8px;background:#3a2410;}
.hint{text-align:center;font-size:13px;color:#cbb489;margin-top:10px;line-height:1.7;}
.kbd{background:#6b4226;border:1px solid #3a2410;border-bottom-width:3px;border-radius:5px;padding:1px 7px;font-family:inherit;font-size:12px;color:#ffe9b8;}
.loadingBox{text-align:center;color:#ffe14d;font-size:22px;letter-spacing:4px;}
.loadingDot{display:inline-block;width:14px;height:14px;border-radius:50%;background:#ffe14d;margin:14px 4px 0;animation:bounce 1s infinite ease-in-out;}
.loadingDot:nth-child(2){animation-delay:.15s}
.loadingDot:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:scale(0.6);opacity:.4}40%{transform:scale(1);opacity:1}}
.introScreen{position:absolute;inset:0;background:#1a0f08;border-radius:0 0 12px 12px;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;}
.introScene{font-size:28px;color:#ffe14d;text-align:center;padding:20px;line-height:1.5;max-width:700px;}
.introArrow{position:absolute;bottom:20px;right:30px;color:#ffe14d;font-size:20px;animation:blink 1s infinite;}
.introImg{max-width:180px;max-height:160px;margin:10px auto;display:block;}
.rareShow{position:absolute;inset:0;background:rgba(0,0,0,.85);border-radius:0 0 12px 12px;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.rareShow .rareImg{width:200px;height:200px;object-fit:contain;filter:drop-shadow(0 0 30px rgba(255,215,94,.8));animation:rarePop .6s cubic-bezier(.2,1.6,.4,1);}
.rareShow .rareLabel{font-size:32px;color:#ffe14d;margin-top:16px;text-shadow:0 3px 0 #7a4a21;}
.rareShow .rareTag{font-size:16px;color:#ff9d3d;margin-top:6px;letter-spacing:4px;}
@keyframes rarePop{0%{transform:scale(0) rotate(-10deg)}100%{transform:scale(1) rotate(0)}}
@media(max-width:560px){
  .page{max-width:100%;}
  h1{font-size:22px;}
  .factoryTitle{font-size:26px;letter-spacing:3px;}
  .factoryOd{height:38%;right:-5%;opacity:.35;}
  .factoryLeft{left:4%;top:42%;gap:8px;align-items:center;}
  .factoryTitle{font-size:22px !important;letter-spacing:2px !important;margin-bottom:0 !important;}
  .frogBtn{width:100px !important;height:100px !important;}
  .frogBtnLabel{font-size:14px !important;bottom:12% !important;}
  .factorySub{gap:4px;}
  .smallbtn{font-size:11px;padding:3px 8px;}
  .difficultyBar{margin-top:2px;}
  .diffBtn{padding:3px 8px;font-size:11px;}
  .frogBtn{width:130px;height:130px;}
  .frogBtnLabel{font-size:18px;}
  .goldStart{width:160px;height:120px;}
  .goldStart .label{font-size:20px;}
  .hud{padding:5px 8px;gap:3px 6px;}
  .stat span{font-size:10px;letter-spacing:1px;}
  .stat b{font-size:14px;}
  .hgroup{gap:8px;}
  .hbtn{font-size:12px;padding:3px 8px;}
  .iconbtn{width:30px;height:28px;}
  .frogs{margin:4px 0 2px;}
  .frogs img{width:40px;}
  .frogs img:nth-child(2){width:28px;}
  .rules{font-size:10px;margin:4px auto 6px;line-height:1.4;}
  .card{padding:12px 14px;}
  .bigbtn{font-size:16px;padding:8px 20px;}
  .dexGrid{grid-template-columns:repeat(4,1fr);gap:6px;}
  .dexCell img{width:48px;height:48px;}
  .introScene{font-size:18px;padding:0 12px;}
  .rareShow .rareImg{width:120px;height:120px;}
  .difficultyBar{gap:4px;}
  .diffBtn{padding:4px 10px;font-size:12px;}
}