cabinw
8026e4628d
- 玩法一 数字一笔：规则库、求解器、26 关、竖屏触摸 Web 原型、测试 - 玩法二 连连气球：连消畅玩版核心、Web 原型、Cocos 球槽组件与导出脚本 - 玩法三 六边一笔：规则库、求解器、10 关 + 转墙实验包、Web 原型、测试 - 产品文档、UI 设计规范、各玩法 GDD / HANDOFF - 文档移除全部外部参考作引用；删除玩法二 v0 旧稿
7 lines
13 KiB
CSS
7 lines
13 KiB
CSS
:root{font-family:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;color:#40678e;background:#eaf5ff;font-synthesis:none;-webkit-tap-highlight-color:transparent;font-weight:500}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 15% 20%,#ffffff 0,transparent 48%),radial-gradient(ellipse at 84% 90%,#eae8ff 0,transparent 45%),#eaf5ff}button{font:inherit;color:inherit;cursor:pointer;border:0;-webkit-user-select:none;user-select:none}button:focus-visible{outline:3px solid #659de6;outline-offset:3px}button:disabled{opacity:.36;cursor:default}button:not(:disabled):active{transform:scale(.97)}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.symbols{position:absolute;width:0;height:0;overflow:hidden}.app{width:432px;height:min(890px,calc(100svh - 32px));min-height:740px;padding:22px 24px 16px;display:flex;flex-direction:column;gap:10px;background:#f9fcff;border:1px solid #fff;border-radius:30px;box-shadow:0 24px 80px #5f8fb518;position:relative;overflow:hidden}.brand-bar{height:44px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.brand{display:flex;gap:8px;align-items:center}.brand-mark{height:40px;width:34px;color:#77b7f5;display:grid;place-items:center}.brand-mark svg{width:27px;height:31px;stroke-width:1.8}.brand h1{margin:0;font-size:20px;letter-spacing:2px;font-weight:750;color:#46739f}.brand div>span{display:block;font-size:8px;letter-spacing:2.2px;color:#a0b6cb;margin-top:2px;font-weight:650}.header-actions{display:flex}.icon-button{width:44px;height:44px;display:grid;place-items:center;background:transparent;color:#94adc4;border-radius:50%}.icon-button:hover{background:#eaf4ff}.scoreboard{display:flex;align-items:center;justify-content:space-between;min-height:88px;padding:4px 4px 0;flex-shrink:0}.score-main{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px}.eyebrow{font-size:10px;color:#7c94ac;letter-spacing:1px}.score-main .eyebrow{grid-column:1/-1}.score-main>strong{font-size:48px;font-weight:700;color:#477cac;line-height:1.15;letter-spacing:-2px;font-variant-numeric:tabular-nums}.best-line{font-size:9px;color:#a2b3c7;grid-column:1/-1;margin-top:1px}.best-line b{font-weight:500;font-variant-numeric:tabular-nums}.collection{background:transparent;padding:0;min-width:60px;min-height:75px;display:flex;flex-direction:column;gap:8px;align-items:center;color:#9aaec0;font-size:9px}.best-balloon{position:relative;display:grid;place-items:center;width:42px;height:46px;background:#f9d16c;border-radius:48% 48% 47% 47%;color:#fff;font-size:25px;font-weight:750;text-shadow:0 1px #d7a847}.best-balloon:before{content:"";width:12px;height:5px;position:absolute;background:#ffffffad;left:8px;top:7px;border-radius:50%;transform:rotate(-18deg)}.best-balloon:after{content:"";position:absolute;bottom:-4px;left:17px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid #ecc059}.flow-bar{display:flex;align-items:center;gap:23px;background:#fff;border:1px solid #e7eff8;border-radius:15px;padding:12px 14px;flex-shrink:0;height:61px}.fever-block{flex:1;min-width:0}.fever-label{display:flex;justify-content:space-between;font-size:10px;color:#6d89a4;margin-bottom:7px}.fever-label b{font-weight:500;font-size:9px;white-space:nowrap;margin-left:6px}.fever-track{height:6px;border-radius:5px;background:#edf2f9;overflow:hidden}.fever-track>i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#83bdfa,#b79fee,#f2a0c2,#f5ce74);transition:width .35s}.upcoming{display:flex;align-items:center;gap:9px;border-left:1px solid #eaf0f7;padding-left:13px}.upcoming>span{font-size:9px;color:#a1b2c5}.upcoming>div{display:flex;gap:4px}.next-ball{height:23px;width:21px;display:inline-grid;place-items:center;position:relative;border-radius:48%;color:#fff;font-weight:700;font-size:12px;box-shadow:inset 0 1px 0 #ffffff60}.next-ball:after{position:absolute;content:"";width:4px;height:3px;border-radius:1px;background:inherit;bottom:-2px;left:8px}.stage{flex:1;min-height:300px;border:1.5px solid #dfecf9;border-radius:25px;background:linear-gradient(180deg,#f3f9ff 0,#fafdff 45%,#f0f7ff 100%);position:relative;overflow:hidden;isolation:isolate;transition:border-color .3s,background .3s}.stage:before,.stage:after{content:"";position:absolute;z-index:-1;background:#ffffffb5;height:29px;width:99px;border-radius:60%;left:-27px;top:90px;box-shadow:22px -13px 0 -1px #ffffffb5}.stage:after{left:auto;right:-28px;top:36px;width:80px;opacity:.7}canvas{display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none}.welcome{position:absolute;top:12%;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none;transition:opacity .3s}.welcome>span{font-size:18px;color:#86aed3;letter-spacing:2px;font-weight:650}.welcome i{font-size:10px;color:#afc2d3;font-weight:400;letter-spacing:0;padding:0 5px;font-style:normal}.welcome p{font-size:10px;color:#a3b7cb;letter-spacing:1px;margin:8px 0}.welcome.hidden{opacity:0}.stage-caption{position:absolute;top:14px;left:0;right:0;text-align:center;font-size:9px;color:#87a3bd;letter-spacing:1px;pointer-events:none}.chain-preview{height:31px;display:flex;justify-content:center;align-items:center;gap:5px;flex-shrink:0;font-size:11px;color:#6e8cab;white-space:nowrap;min-width:0}.chain-preview .mini-ball{display:inline-grid;place-items:center;border-radius:48%;color:#fff;min-width:22px;height:24px;font-size:13px;font-weight:700}.chain-preview .gain{font-size:10px;color:#aaa0cf;margin-left:5px}.chain-preview .predict{padding:4px 7px;border-radius:7px;background:#efe9fd;color:#9876c7;font-size:10px}.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex-shrink:0}.tools button{min-height:61px;border-radius:15px;border:1px solid #e4edf7;background:#f0f6fc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 1px;color:#6487a9}.tools button>span{font-size:11px}.tools svg{width:20px;height:20px}.tools .hint-button{background:#82b6ee;border-color:#82b6ee;color:#fff;box-shadow:0 3px 0 #6094cc19}.game-footer{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:.2px;color:#afbfce;min-height:13px;flex-shrink:0}.toast{position:absolute;bottom:28px;left:50%;transform:translateX(-50%) translateY(8px);border-radius:12px;padding:10px 14px;max-width:94%;width:max-content;background:#ffffffed;border:1px solid #dcebf9;color:#749abc;font-size:11px;line-height:1.6;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:4;box-shadow:0 4px 18px #7facd112}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.combo-banner{position:absolute;top:17%;left:0;right:0;text-align:center;pointer-events:none;z-index:5;opacity:0}.combo-banner.show{opacity:1;animation:combo-pop .85s both}.combo-banner strong{font-size:31px;font-weight:800;letter-spacing:2px;color:#a083d5;text-shadow:0 2px 0 white;display:block}.combo-banner span{display:block;font-size:10px;color:#a7a7cd;letter-spacing:2px;margin-top:3px}.combo-banner.rainbow strong{background:linear-gradient(90deg,#6ca9e9,#b17fdf,#ef98b5,#e9b357);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none}.score-pop{pointer-events:none;position:absolute;color:#669bd1;font-size:24px;font-weight:750;text-shadow:0 2px white;z-index:6;animation:score-up .7s both}.spark{pointer-events:none;position:absolute;width:5px;height:9px;background:var(--spark-color);border-radius:3px;z-index:5;animation:spark .65s ease-out both}.app.fever .stage{border-color:#cfbef0;background:linear-gradient(150deg,#f7f0ff,#fafdff 45%,#fff3f4)}.app.fever .fever-label{color:#a08ac7}.app.fever .fever-track>i{background:linear-gradient(90deg,#79baff,#ba99f0,#f895bf,#f4ce70)}.desktop-note{position:absolute;right:calc(50% + 285px);top:23%;width:275px;color:#90b1cf;padding-top:140px}.desktop-note p{font-size:10px;letter-spacing:2.2px;color:#a2b9cf;font-weight:600}.desktop-note h2{font-size:26px;line-height:1.8;color:#7e9fbc;font-weight:500;letter-spacing:2px;margin:22px 0 18px}.desktop-note>span{font-size:10px;letter-spacing:1px;color:#adc3d5}.floating-balloon{position:absolute;top:8px;width:68px;height:76px;display:grid;place-items:center;border-radius:48%;font-size:34px;font-weight:700;color:#fff;background:#a3cdf5;transform:rotate(-12deg)}.floating-balloon:before{content:"";position:absolute;top:13px;left:12px;width:23px;height:8px;background:#ffffff88;border-radius:50%;transform:rotate(-18deg)}.floating-balloon:after{content:"";height:65px;width:16px;border-left:1px solid #a5b9cd;position:absolute;top:79px;left:33px;border-radius:40%}.b-two{left:78px;top:-14px;background:#f5a7b8;transform:rotate(10deg)}.b-three{left:149px;top:21px;background:#acddcc;transform:rotate(-3deg)}.modal-backdrop{position:fixed;inset:0;background:#6187ac30;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(5px)}[hidden]{display:none!important}.sheet{width:405px;max-height:90svh;overflow-y:auto;border-radius:27px;padding:26px;background:#fbfdff;box-shadow:0 20px 80px #3d70902a;animation:sheet-in .2s ease-out;outline:none}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.sheet h2{font-size:23px;font-weight:650;margin:0;letter-spacing:1px;color:#5b86ad}.sheet p{font-size:12px;line-height:1.9;color:#657f99}.sheet .eyebrow{font-size:9px;margin-bottom:6px;display:block}.help-chain{display:flex;justify-content:center;align-items:center;gap:9px;background:#eef6ff;border-radius:17px;padding:18px 8px;margin:18px 0}.help-ball{display:grid;place-items:center;width:39px;height:42px;border-radius:48%;font-size:22px;font-weight:700;color:#fff}.help-rule{display:flex;gap:11px;align-items:flex-start;margin:16px 0}.help-rule>span{flex-shrink:0;background:#eaf3fe;color:#7fa8d2;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-size:11px}.help-rule p{margin:0;font-size:12px}.help-rule b{color:#507494;font-weight:650}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:9px;border-radius:14px;min-height:48px;padding:12px 16px;width:100%;font-size:13px;font-weight:600;letter-spacing:.5px}.primary{color:#fff;background:#83b4eb;box-shadow:0 3px 0 #5b90c81a}.secondary{background:#edf5fd;border:1px solid #e2edf8;color:#8ba9c6;margin-top:10px}.record-hero{text-align:center;margin:22px 0}.record-hero>strong{font-size:43px;font-weight:650;color:#5988b4;letter-spacing:-1px;display:block}.record-hero>span{font-size:10px;color:#a3b6c7}.record-grid{display:grid;grid-template-columns:repeat(3,1fr);background:#eff6fd;border-radius:16px;margin:18px 0;padding:17px 3px;text-align:center}.record-grid strong{display:block;font-size:25px;color:#769bbc;font-weight:600}.record-grid span{font-size:9px;color:#a6bacb}.sky-collection{display:flex;justify-content:space-around;gap:12px;padding:20px 8px;margin-bottom:15px}.sky-item{text-align:center;font-size:9px;color:#a9b7cc}.sky-item .help-ball{margin-bottom:8px;opacity:.25}.sky-item.earned .help-ball{opacity:1}.sheet .small-note{text-align:center;font-size:10px;line-height:1.8;margin:15px 0}.close{width:44px;height:44px}.save-note{font-size:9px!important;color:#c19c78!important}@keyframes combo-pop{0%{opacity:0;transform:translateY(8px) scale(.86)}18%{opacity:1;transform:translateY(0) scale(1.04)}65%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-10px)}}@keyframes score-up{0%{opacity:0;transform:translate(-50%,4px) scale(.8)}20%{opacity:1;transform:translate(-50%,-4px) scale(1.05)}100%{opacity:0;transform:translate(-50%,-57px) scale(.9)}}@keyframes spark{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(130deg) scale(.25)}}@keyframes sheet-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
|
|
@media(max-width:1090px){.desktop-note{display:none}}
|
|
@media(max-width:520px){body{align-items:flex-start;background:#f9fcff}.app{width:100%;height:100svh;min-height:740px;border-radius:0;border:0;box-shadow:none;padding:calc(13px + env(safe-area-inset-top)) 18px calc(12px + env(safe-area-inset-bottom));gap:9px}.modal-backdrop{align-items:flex-end;padding:0}.sheet{width:100%;max-width:480px;max-height:92svh;border-radius:27px 27px 0 0;padding:24px 24px calc(24px + env(safe-area-inset-bottom))}.scoreboard{min-height:80px}.score-main>strong{font-size:46px}.flow-bar{gap:12px;padding:11px 12px}}
|
|
@media(max-height:750px){.app{min-height:650px;gap:7px;padding-top:10px;padding-bottom:10px}.brand-bar{height:36px}.scoreboard{min-height:68px;padding-top:0}.score-main>strong{font-size:39px}.collection{min-height:61px}.best-balloon{width:34px;height:38px;font-size:22px}.best-balloon:after{left:13px}.flow-bar{height:53px}.tools button{min-height:55px}.chain-preview{height:27px}.game-footer{font-size:7.5px}.stage{min-height:300px}}
|
|
@media(max-width:350px){.app{padding-left:12px;padding-right:12px}.flow-bar{gap:9px;padding-left:10px;padding-right:10px}.upcoming{gap:6px;padding-left:9px}.upcoming>span{font-size:8px}.next-ball{width:19px;height:21px}.tools{gap:7px}.chain-preview{font-size:10px}.chain-preview .gain{font-size:9px}.sheet{padding-left:19px;padding-right:19px}}
|
|
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
|