:root{--font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;--sky-top: #7ec8f7;--sky-bottom: #cdeefd;--grass: #8fd469;--card-face: #fffdf5;--card-border: #d9a066;--tile-size: 56px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{font-family:var(--font-family);background:var(--sky-top);user-select:none;-webkit-user-select:none;overscroll-behavior:none;touch-action:manipulation}.app-shell{width:100%;height:100dvh;display:flex;justify-content:center;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 68%,#a7e085 68%,var(--grass) 100%);overflow:hidden}.app-scene{position:relative;display:flex;flex-direction:column;width:100%;max-width:480px;height:100%;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px calc(env(safe-area-inset-bottom,0px) + 10px)}.app-scene:before,.app-scene:after{content:"";position:absolute;z-index:0;background:#ffffffd9;border-radius:999px;filter:blur(1px)}.app-scene:before{width:120px;height:34px;top:90px;left:-20px;opacity:.75}.app-scene:after{width:84px;height:26px;top:150px;right:-12px;opacity:.6}.game-header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:4px 2px 8px}.game-header__title{display:flex;align-items:center;gap:10px}.game-header__logo{font-size:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}.game-header__name{font-size:20px;font-weight:800;color:#fff;text-shadow:0 2px 4px rgba(46,110,160,.45);letter-spacing:1px}.game-header__sub{font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(46,110,160,.4);opacity:.92}.btn-round{width:42px;height:42px;border:none;border-radius:50%;background:#ffffffe6;color:#5b9bd5;font-size:20px;font-weight:700;box-shadow:0 3px 8px #2e6ea059;cursor:pointer;transition:transform .15s ease}.btn-round:active{transform:scale(.9)}.app-board-zone{position:relative;z-index:1;flex:1;min-height:0}.board-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:6px 0}.board{width:100%;height:100%;position:relative}.board__inner{position:absolute;left:0;top:0;transform-origin:0 0}.tile{position:absolute;left:0;top:0;transition:transform .32s cubic-bezier(.34,1.2,.64,1);will-change:transform;padding:0;border:none;background:none}.tile__card{width:100%;height:100%;border-radius:12px;--depth-shadow: calc(var(--depth, 0) * 2px);box-shadow:0 calc(3px + var(--depth-shadow)) 0 #b4783266,0 calc(5px + var(--depth-shadow) * 1.5) 10px #5a3c1438,inset 0 -4px 6px #d9a0662e;background:linear-gradient(160deg,#fffef8,#fdf3dd);border:2px solid var(--card-border);display:flex;align-items:center;justify-content:center;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;animation:tile-enter .42s cubic-bezier(.34,1.4,.64,1) both;animation-delay:calc(var(--depth, 0) * 50ms)}.tile__icon{width:78%;height:78%;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18));pointer-events:none}.tile__icon svg{width:100%;height:100%}.fly-card__icon{width:72%;height:72%;display:flex;align-items:center;justify-content:center}.fly-card__icon svg{width:100%;height:100%}.slot-tile__icon{width:80%;height:80%;display:flex;align-items:center;justify-content:center}.slot-tile__icon svg{width:100%;height:100%}.tile--clickable{cursor:pointer}.tile--clickable .tile__card:hover{transform:scale(1.05)}.tile--clickable .tile__card:active{transform:scale(.94)}.tile--blocked .tile__card{filter:brightness(.82) saturate(.7);cursor:default}.tile--blocked{pointer-events:none}.tile--picked .tile__card{transform:scale(1.06);box-shadow:0 0 0 3px #ffd54a,0 3px #b4783259,0 4px 10px #5a3c144d}.tile__badge{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;border-radius:999px;background:#ff7043;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 2px 4px #0000004d}.slot-tray{position:relative;z-index:3;margin-top:4px}.slot-tray__cells{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:#ffffff52;border-radius:18px;padding:8px;box-shadow:inset 0 2px 6px #2e6ea02e;backdrop-filter:blur(2px)}.slot-cell{position:relative;aspect-ratio:1;border-radius:12px;background:#ffffff80;border:2px dashed rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center}.slot-cell--filled{border-style:solid;border-color:#d9a066e6;background:linear-gradient(160deg,#fffef8,#fdf3dd)}.slot-tile{width:92%;height:92%;border-radius:10px;background:linear-gradient(160deg,#fffef8,#fdf3dd);border:2px solid var(--card-border);box-shadow:0 2px #b4783259;display:flex;align-items:center;justify-content:center;animation:slot-pop .26s cubic-bezier(.34,1.56,.64,1)}.slot-tile__icon{font-size:22px;line-height:1}.slot-tile--flash{position:absolute;inset:4%;animation:tile-boom .42s cubic-bezier(.3,0,.7,.4) forwards;pointer-events:none}@keyframes slot-pop{0%{transform:scale(.3);opacity:.2}to{transform:scale(1);opacity:1}}@keyframes tile-boom{0%{transform:scale(1);opacity:1}45%{transform:scale(1.18);opacity:1}to{transform:scale(.1);opacity:0}}.slot-tray__out{margin-top:6px;text-align:center;font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(46,110,160,.5)}.fly-layer{position:fixed;inset:0;z-index:9999;pointer-events:none}.fly-card{position:fixed;left:0;top:0;border-radius:12px;background:linear-gradient(160deg,#fffef8,#fdf3dd);border:2px solid var(--card-border);box-shadow:0 4px 10px #5a3c144d;display:flex;align-items:center;justify-content:center;transition:transform .34s cubic-bezier(.45,0,.35,1.2),opacity .2s ease;opacity:1}.fly-card__icon{font-size:26px;line-height:1}.fly-card--fail{animation:fail-shake .4s ease .34s}@keyframes fail-shake{0%,to{transform:translate(-50%,-50%) scale(.5) translate(0)}25%{transform:translate(-50%,-50%) scale(.5) translate(-6px)}50%{transform:translate(-50%,-50%) scale(.5) translate(6px)}75%{transform:translate(-50%,-50%) scale(.5) translate(-4px)}}@keyframes tile-enter{0%{opacity:0;transform:scale(.5) translateY(-28px)}70%{opacity:1;transform:scale(1.06) translateY(0)}to{opacity:1;transform:scale(1) translateY(0)}}@media(min-width:520px){.app-shell{align-items:center;padding:24px 0}.app-scene{height:min(100dvh - 48px,860px);max-width:440px;border-radius:28px;box-shadow:0 18px 60px #1e508266;overflow:hidden;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 68%,#a7e085 68%,var(--grass) 100%);border:3px solid rgba(255,255,255,.55)}}.toolbar{position:relative;z-index:3;display:flex;justify-content:center;gap:14px;padding:10px 0 4px}.tool-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:76px;padding:8px 6px 6px;border:none;border-radius:16px;background:#ffffffeb;box-shadow:0 3px 8px #2e6ea04d;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;color:#4a7fb5}.tool-btn:active:not(:disabled){transform:scale(.92)}.tool-btn--active{background:#ffe27a;box-shadow:0 0 0 3px #ffd54a,0 3px 8px #2e6ea04d}.tool-btn--disabled{opacity:.45;cursor:not-allowed}.tool-btn__icon{font-size:22px;line-height:1}.tool-btn__label{font-size:12px;font-weight:700}.tool-btn__count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;background:#ff7043;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 2px 4px #00000040}.removeout-bar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 12px;border-radius:16px;background:#fffffff0;box-shadow:0 4px 14px #2e6ea059;animation:bar-in .24s cubic-bezier(.34,1.4,.64,1)}.removeout-bar__hint{font-size:13px;font-weight:700;color:#d84315}.removeout-bar__actions{display:flex;gap:8px}.btn-ghost,.btn-primary{border:none;border-radius:12px;padding:7px 14px;font-size:13px;font-weight:800;cursor:pointer;transition:transform .12s ease}.btn-ghost{background:#eef3f8;color:#5b7a99}.btn-primary{background:linear-gradient(160deg,#ffb84d,#ff8f3d);color:#fff;box-shadow:0 2px 6px #ff8f3d73}.btn-ghost:active,.btn-primary:active{transform:scale(.94)}.btn-ghost:disabled,.btn-primary:disabled{opacity:.5;cursor:not-allowed}@keyframes bar-in{0%{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}.out-chip{margin-top:8px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:none;border-radius:999px;background:#ffffffe6;box-shadow:0 2px 8px #2e6ea04d;font-size:12px;font-weight:700;color:#5b7a99;cursor:pointer;animation:bar-in .24s ease}.out-chip__icon{font-size:15px}.out-chip__restore{color:#ff8f3d;font-weight:800}.modal-mask{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#1e466e73;backdrop-filter:blur(3px);animation:mask-in .22s ease}.modal-card{width:min(320px,86vw);padding:26px 22px 22px;border-radius:24px;background:linear-gradient(170deg,#fffef8,#fff3d6);box-shadow:0 16px 50px #1e466e80;text-align:center;animation:card-in .38s cubic-bezier(.34,1.4,.64,1);border:3px solid rgba(255,255,255,.85)}.modal-card--win{background:linear-gradient(170deg,#fffef8,#ffe9a8)}.modal-card__emoji{font-size:56px;line-height:1;animation:bounce-emoji .8s ease infinite alternate}.modal-card__title{margin:12px 0 6px;font-size:24px;font-weight:900;color:#5b3a1e}.modal-card__desc{margin:0 0 12px;font-size:14px;color:#8a6a45}.modal-card__reward{display:flex;justify-content:center;gap:10px;margin-bottom:14px;font-size:13px;font-weight:800;color:#d84315}.modal-card__actions{display:flex;justify-content:center;gap:12px}.btn-big{font-size:17px;padding:12px 34px;border-radius:999px}@keyframes mask-in{0%{opacity:0}to{opacity:1}}@keyframes card-in{0%{transform:scale(.6) translateY(30px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes bounce-emoji{0%{transform:translateY(0) scale(1)}to{transform:translateY(-8px) scale(1.06)}}.modal-mask--start{background:linear-gradient(180deg,#7ec8f7e6,#8fd469eb)}.start-card{text-align:center;padding:30px 34px;border-radius:28px;background:#ffffffe0;box-shadow:0 18px 60px #1e508273;border:3px solid rgba(255,255,255,.9);animation:card-in .42s cubic-bezier(.34,1.4,.64,1)}.start-card__logo{font-size:74px;line-height:1;animation:bounce-emoji .9s ease infinite alternate}.start-card__title{margin:10px 0 4px;font-size:34px;font-weight:900;color:#d84315;letter-spacing:4px;text-shadow:0 2px 0 rgba(255,213,74,.6)}.start-card__sub{margin:0 0 18px;font-size:14px;color:#7a6a4e}.game-header__buttons{display:flex;gap:8px}.btn-round:disabled{opacity:.5;cursor:not-allowed}.settings-row{display:flex;justify-content:center;gap:10px;margin:4px 0 14px}.toggle-chip{border:2px solid #e5d9c3;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;background:#f6f1e6;color:#8a6a45;cursor:pointer;transition:all .15s ease}.toggle-chip--on{background:#ffe27a;border-color:#ffb84d;color:#7a4a10}.start-card .settings-row{margin-bottom:18px}
