:root{color-scheme:dark; font-family:ui-rounded,"Hiragino Kaku Gothic ProN","Hiragino Sans", "Yu Gothic", system-ui,sans-serif; background:#0b1021; color:#fff7ee; -webkit-tap-highlight-color:transparent} *{box-sizing:border-box}html,body{height:100%;margin:0;overscroll-behavior:none;user-select:none;-webkit-user-select:none}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #f8d469;outline-offset:3px} body{min-height:100dvh;display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse at 50% 25%,#32305b,#111324 65%,#070b15)} #app{position:relative; width:min(100vw,calc(100dvh * .5625)); height:min(100dvh,calc(100vw / .5625)); aspect-ratio:9/16;overflow:hidden;contain:layout paint;container-type:inline-size;background:#16162d;box-shadow:0 0 0 2px #56435a,0 36px 100px #000b;touch-action:none} #playfield{width:100%;height:100%;display:block;touch-action:none} .vignette{position:absolute;pointer-events:none;inset:0;background:linear-gradient(90deg,#090d21aa,transparent 7%,transparent 93%,#080b1eaa)} .screen{position:absolute;inset:0;display:none;overflow:hidden}.screen.active{display:block}.hidden{display:none!important} .home-screen{background:#151528}.home-art{position:absolute;inset:0;background-image:linear-gradient(180deg,#12152555 0%,transparent 18%,#0e123644 45%,#080d22f8 77%,#080d22 100%),url('assets/key-visual.webp');background-position:center,center 33%;background-size:cover,cover;transform:scale(1.04)} .home-content{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:5cqw 6cqw 3cqw;text-align:center} .corner-label{align-self:center;border:1px solid #ffffff55;background:#10172b99;padding:1.6cqw 3cqw;border-radius:4cqw;letter-spacing:.12em;font-size:2.35cqw;font-weight:900;color:#fbe3aa;box-shadow:0 4px 20px #0004} .home-heading{padding:3cqw 0 3.5cqw;border-radius:5cqw;background:linear-gradient(180deg,#0e163bd8,#101a327d 72%,transparent);text-shadow:0 4px 2px #4d2021,0 7px 15px #0a101a;position:absolute;top:16%;left:2%;right:2%}.home-eyebrow{font-size:3.45cqw;color:#fff3d3;font-weight:900;text-shadow:0 2px 5px black}.home-heading h1{margin:1cqw 0 0;font-weight:1000;letter-spacing:-.04em;line-height:1.14}.home-heading h1 span{display:block;color:#fff4b2;-webkit-text-fill-color:#fff4b2;font-size:9cqw;-webkit-text-stroke:2px #482934;paint-order:stroke fill;text-shadow:0 3px 0 #7e4128,0 6px 12px #071126}.home-heading h1 strong{display:block;color:#fff8e4;-webkit-text-fill-color:#fff8e4;font-size:8.8cqw;-webkit-text-stroke:2.3px #482934;paint-order:stroke fill;text-shadow:0 3px 0 #a45836,0 7px 10px #081322}.home-sub{font-size:4cqw;font-weight:1000;margin-top:2cqw;color:#fcdf99} .home-bottom{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:2cqw;filter:drop-shadow(0 3px 9px #070c22)}.home-records{display:flex;justify-content:space-between;gap:2cqw;background:#0b1323d9;border:1px solid #d9b87970;border-radius:3cqw;padding:2.3cqw 3.1cqw;font-size:2.65cqw}.home-records b{color:#fdd67a;font-size:3.5cqw} .milestone-banner{min-height:7cqw;padding:2cqw;border-radius:2.5cqw;background:#323053dd;color:#f7e1bd;font-size:2.85cqw;font-weight:800;display:grid;place-items:center} .big-button{min-height:13cqw;width:100%;display:flex;align-items:center;justify-content:center;gap:2cqw;border:2px solid #fff8b7;border-radius:3.8cqw;color:#42200c;font-size:4.8cqw;font-weight:1000;text-shadow:0 1px #fff4c0;background:linear-gradient(#fff09e,#ffbd4f 55%,#ef8935);box-shadow:inset 0 2px #fffdf1,0 5px #92531f,0 9px 22px #0008;transition:transform .12s,filter .12s}.big-button:active{transform:translateY(3px);box-shadow:inset 0 2px #fffdf1,0 2px #92531f}.big-button small{font-size:2.65cqw;opacity:.65;letter-spacing:.15em}.big-button span{font-size:5cqw} .home-secondary{display:flex;gap:2.5cqw;width:100%}.small-button{flex:1;border:1px solid #a6b1d8;border-radius:3cqw;background:linear-gradient(#383d67,#262b53);color:#fff8e9;font-weight:900;padding:3cqw 1.5cqw;font-size:3.4cqw;box-shadow:inset 0 1px #ffffff30}.no-ads{margin:0;font-size:2.45cqw;opacity:.76;letter-spacing:.06em} .game-ui{position:absolute;inset:0;pointer-events:none}.pause-button{pointer-events:auto;position:absolute;top:2.2%;right:4.4%;height:9cqw;width:9cqw;border:2px solid #ffdd97;background:#433052;color:#fff7e9;font-size:5cqw;font-weight:900;border-radius:2.6cqw;box-shadow:0 3px 9px #0008}.coach-tip{position:absolute;top:13.4%;left:9%;right:9%;border:1px solid #eccc86;background:#101d37e8;padding:2.3cqw 3cqw;border-radius:3cqw;text-align:center;font-size:3.1cqw;font-weight:900;box-shadow:0 5px 25px #0007;opacity:0;transition:opacity .3s}.coach-tip.visible{opacity:1} .shop-screen{background:radial-gradient(ellipse at 50% 20%,#503859,#211a36 50%,#111524 90%);padding:5cqw 5cqw 3cqw}.shop-spark{position:absolute;top:18%;left:0;right:0;text-align:center;color:#fce7a7;font-size:11cqw;opacity:.08}.shop-header{text-align:center;position:relative}.eyebrow,.result-heading>span{letter-spacing:.17em;font-size:3.3cqw;font-weight:1000;color:#ffd183}.shop-header h2{margin:1cqw 0 0;font-size:9.3cqw;font-weight:1000;color:#ffedc2;text-shadow:0 3px 0 #5f3e38,0 7px 20px #0008}.shop-catch{font-size:2.95cqw;margin:1.7cqw 0;color:#d9ccdf}.ore-wallet{display:inline-block;border:1px solid #ffcd84;background:#372c40;border-radius:99px;padding:2.2cqw 5cqw;color:#fff2d0;font-size:3.4cqw;font-weight:900}.ore-wallet strong{color:#fbc76b;font-size:4.3cqw}.next-wave-wrap{position:absolute;top:28%;left:5%;right:5%;min-height:17%;background:linear-gradient(125deg,#42304b,#293455);border:2px solid #c69a78;border-radius:4cqw;padding:3.5cqw 4cqw;display:flex;flex-direction:column;gap:1.1cqw;box-shadow:0 5px 25px #0004}.next-wave-wrap .label-small{font-size:2.6cqw;color:#e9c692;font-weight:800}.next-wave-wrap strong{font-size:6.7cqw;color:#fceac6}.next-wave-wrap span{font-size:3.3cqw;color:#e2e2ed;line-height:1.35} .shop-cards{position:absolute;top:48%;bottom:18.5%;left:5%;right:5%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2.6cqw}.shop-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-width:0;padding:2.5cqw 2.6cqw 2.8cqw;border:2px solid #b7aac6;border-radius:3.5cqw;background:linear-gradient(145deg,#383150,#1e2440);color:#fff9ef;text-align:left;box-shadow:0 5px 0 #101425,0 10px 20px #0006;transition:transform .12s}.shop-card:active{transform:scale(.98)}.shop-card .card-icon{font-size:5.2cqw;line-height:1;color:var(--tint)}.shop-card .card-name{font-size:3.45cqw;font-weight:1000;line-height:1.2}.shop-card .card-description{font-size:2.65cqw;color:#dce2ef;line-height:1.3}.shop-card .card-price{align-self:flex-end;font-size:3.1cqw;font-weight:950;color:#f8cf76}.shop-card:disabled{border-color:#8bbf9c;background:linear-gradient(#2b494e,#1b3844);opacity:.75}.shop-card:disabled .card-price{color:#99f5c6}.shop-footer{position:absolute;bottom:3%;left:5%;right:5%;display:flex;flex-direction:column;gap:1.6cqw;text-align:center}.sub-button{align-self:center;border:1px solid #977ca4;border-radius:2.5cqw;background:#36304d;color:#fff6e8;font-size:2.7cqw;padding:1.5cqw 4cqw}.sub-button b{color:#ffce87}.shop-footer .big-button{min-height:11cqw;font-size:4.3cqw}.shop-footer p{margin:0;color:#b7b3c5;font-size:2.5cqw} .result-screen{background:radial-gradient(ellipse at 50% 25%,#554466,#25213f 65%,#111526);text-align:center;padding:7cqw 5cqw}.result-stars{font-size:7cqw;color:#fbd476;opacity:.6}.result-heading{margin-top:2cqw}.result-heading h2{font-size:8.4cqw;margin:1cqw 0;color:#fbe4a8;text-shadow:0 4px 0 #634142}.result-heading p{margin:0;font-size:3.15cqw;color:#e9d6e0}.result-mog{height:27cqw;width:27cqw;border-radius:50%;border:3px solid #8f6e56;background:linear-gradient(#cf9d6e,#915d42);position:absolute;top:27%;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;font-size:6.5cqw;font-weight:1000;color:#3d281f;box-shadow:inset 0 5px 15px #fff5,0 15px 30px #0005}.result-mog>span{position:absolute;top:-20%;font-size:12cqw}.result-mog i{position:absolute;bottom:-2.5cqw;left:-6cqw;right:-6cqw;font-style:normal;font-size:9cqw;border-radius:3cqw;background:#665b6d;color:#d7d7e2;border:2px solid #bbabb7} .result-depth{position:absolute;top:44%;left:4%;right:4%;display:flex;flex-direction:column;gap:1cqw;align-items:center}.result-depth small{font-size:3.3cqw;color:#fae2b3;font-weight:900}.result-depth strong{font-size:18cqw;color:#fff2b2;line-height:1;font-weight:1000;font-variant-numeric:tabular-nums;text-shadow:0 4px 0 #81543b}.result-depth em{font-size:7cqw;font-style:normal}.result-depth span{font-size:3.45cqw;color:#fff5e3;font-weight:850}.result-stats{position:absolute;top:62%;left:5%;right:5%;display:flex;gap:2cqw}.result-stats>div{flex:1;border:1px solid #977c95;border-radius:3cqw;background:#383351;padding:2.4cqw 0;display:flex;flex-direction:column;gap:.9cqw}.result-stats b{font-size:5.3cqw;color:#fbd178}.result-stats span{font-size:2.55cqw;color:#ddd2dd}.result-actions{position:absolute;bottom:3%;left:5%;right:5%;display:flex;flex-direction:column;gap:2.4cqw} .modal{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#090c1ade;padding:5cqw;backdrop-filter:blur(7px)}.modal-inner{background:linear-gradient(#30304e,#1a2239);border:2px solid #d0b58c;border-radius:5cqw;max-height:90%;width:100%;display:flex;flex-direction:column;box-shadow:0 25px 70px #000c}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:3.3cqw 4cqw;border-bottom:1px solid #ffffff2a}.modal-header h2{margin:0;font-size:5.2cqw;color:#ffe2a2}.close-button{min-width:9cqw;min-height:9cqw;font-size:4cqw;border-radius:2cqw;border:1px solid #a898aa;background:#4c3c54;color:white}.modal-body{overflow:auto;overscroll-behavior:contain;padding:4cqw;font-size:3.3cqw;line-height:1.65;text-align:left;touch-action:pan-y}.modal-body h3{color:#f9d38d;font-size:4.2cqw;margin:3cqw 0 1cqw}.modal-body p{margin:1.5cqw 0}.modal-body .guide-image{display:block;width:100%;max-height:60cqh;object-fit:contain;border-radius:3cqw}.guide-tabs{display:flex;gap:1cqw;position:sticky;top:0;background:#242943;padding-bottom:2cqw;z-index:1}.guide-tab{flex:1;background:#343954;color:#e7e5f6;border:1px solid #8885a8;border-radius:2cqw;padding:2cqw 1cqw;font-size:2.7cqw;font-weight:900}.guide-tab.selected{background:#dba85e;color:#302232;border-color:#f6d68c}.info-row{display:grid;grid-template-columns:10cqw 1fr;align-items:center;gap:2cqw;border-bottom:1px solid #ffffff19;padding:2.6cqw 0}.info-row .info-emoji{font-size:7cqw;text-align:center}.info-row b{color:#f9dcab}.settings-row{display:flex;gap:3cqw;justify-content:space-between;align-items:center;padding:4cqw 0;border-bottom:1px solid #ffffff25}.settings-row small{display:block;color:#bfc6df;font-size:2.8cqw}.settings-row strong{font-size:3.5cqw}.toggle{min-height:10cqw;min-width:23cqw;border-radius:99px;border:1px solid #907a92;background:#343651;color:#e2dce6;font-size:3.1cqw;font-weight:900}.toggle.on{background:#52a584;color:#0c2530;border-color:#b3f2cb} .toast{position:absolute;z-index:20;top:19%;left:12%;right:12%;border-radius:3cqw;border:1px solid #f5cc84;background:#202341ed;text-align:center;color:#ffebb6;font-size:3.2cqw;font-weight:900;padding:2.7cqw;pointer-events:none;opacity:0;transition:opacity .25s}.toast.visible{opacity:1} #turn-phone{display:none}@media(orientation:landscape) and (max-height:480px){#turn-phone{position:absolute;display:block;bottom:1%;width:100%;text-align:center;font-size:2.5cqw;background:#141724cc;padding:1cqw;pointer-events:none}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}} .result-depth.boss-defeat{top:41%}.result-depth.boss-defeat #result-boss{color:#ffb9b8;font-size:3cqw} /* ===== 2026-11 改良：参考画像に合わせた見た目の調整（上の定義を上書き） ===== */ .corner-label{border-color:#e9cf9d88;color:#ffe9a8;letter-spacing:.22em} .home-heading{background:linear-gradient(180deg,#0b1030e6,#10163acc 70%,transparent);top:13%} .home-heading h1 span{color:#ffe9a0;-webkit-text-fill-color:#ffe9a0;font-size:10.5cqw;-webkit-text-stroke:2.4px #5a2a12;text-shadow:0 4px 0 #8a4a14,0 8px 14px #071126} .home-heading h1 strong{color:#ffc93d;-webkit-text-fill-color:#ffc93d;font-size:10.2cqw;-webkit-text-stroke:2.6px #5a2a12;text-shadow:0 4px 0 #8a4a14,0 9px 14px #081322} .reborn-ribbon{display:inline-block;margin-top:1.6cqw;padding:.9cqw 6cqw;border:1.5px solid #e9cf9d;border-radius:1.6cqw;background:linear-gradient(#6a3fb0,#43247a);color:#ffe9a8;font-size:3.1cqw;font-weight:1000;letter-spacing:.38em;text-shadow:0 2px 0 #2a1450;box-shadow:0 3px 10px #0007} .home-sub{margin-top:1.6cqw} .milestone-banner{display:flex;align-items:center;justify-content:center;gap:2cqw;border:1.5px solid #e9cf9d88;border-radius:99px;background:#1b1f45e8;font-size:3.1cqw} .start-button{min-height:16.5cqw;border-radius:99px;font-size:7.4cqw;letter-spacing:.06em;border-width:3px}.start-button span{font-size:6cqw} .home-secondary .small-button{border-radius:99px;border-color:#b9a8c9;padding:3.4cqw 1.5cqw} .shop-screen{background:radial-gradient(ellipse at 50% 12%,#4a3a78,#221c44 48%,#10142a 92%);padding:3.5cqw 5cqw 3cqw} .shop-header h2{font-size:8.2cqw;color:#ffe9a8;text-shadow:0 3px 0 #7a4a14,0 7px 18px #000a} .shop-catch{margin:1cqw 0 1.6cqw} .ore-wallet{display:inline-flex;align-items:center;gap:2.4cqw;border:1.5px solid #e9cf9d;background:#1a1638;padding:1.6cqw 4.5cqw} .ore-wallet small{font-size:2.6cqw;color:#d9ccdf}.ore-wallet span{color:#ffd45c;font-size:4cqw}.ore-wallet strong{color:#fff8e4;font-size:5.4cqw} .ore-wallet em{font-style:normal;font-size:2.5cqw;color:#5a2a05;background:#ffd84a;border-radius:99px;padding:.5cqw 2cqw} .next-wave-wrap{top:24.5%;min-height:0;height:8.6%;padding:0 3.5cqw!important;display:flex!important;flex-direction:row!important;align-items:center;gap:2.4cqw;border-radius:3cqw} .next-wave-wrap .label-small{font-size:2.4cqw;white-space:nowrap;margin:0}.next-wave-wrap strong{font-size:5.4cqw;white-space:nowrap;line-height:1}.next-wave-wrap span{font-size:2.8cqw;line-height:1.25;margin:0} .shop-cards{top:35%;bottom:17.5%;gap:3.6cqw 2.8cqw} .shop-card{position:relative;align-items:center;justify-content:flex-end;text-align:center;gap:.5cqw;padding:5.4cqw 2cqw 2.2cqw;border:2px solid var(--tint);background:linear-gradient(160deg,#3a3260,#1b2040 70%);box-shadow:inset 0 0 0 1.5px #0007,inset 0 0 6cqw #ffffff0d,0 5px 0 #0d1022,0 10px 20px #0007} .shop-card .card-cat{position:absolute;top:-2px;left:-2px;background:var(--tint);color:#1a1430;font-size:2.55cqw;font-weight:1000;padding:.8cqw 2.8cqw .9cqw;border-radius:3.3cqw 0 3cqw 0} .shop-card .card-new{position:absolute;top:1.4cqw;right:1.4cqw;background:#ffd84a;color:#5a2a05;font-size:2.3cqw;font-weight:1000;padding:.4cqw 1.6cqw;border-radius:1cqw;transform:rotate(8deg)} .shop-card .card-art{flex:1;min-height:0;display:grid;place-items:center}.shop-card .card-icon{font-size:9cqw;filter:drop-shadow(0 0 2.5cqw var(--tint))}.shop-card .card-ball{height:11cqw;width:11cqw;filter:drop-shadow(0 0 2.5cqw var(--tint))} .shop-card .card-name{font-size:4cqw;text-shadow:0 2px 0 #0008}.shop-card .card-description{font-size:2.6cqw} .shop-card .card-change{font-size:2.65cqw;font-weight:900;color:#ffe9a8;line-height:1.25} .shop-card .card-price{align-self:stretch;margin-top:.6cqw;border:1.5px solid #e0b25a;background:#15122c;border-radius:99px;padding:.9cqw 0;font-size:3.7cqw;color:#ffd45c} .shop-card.evolve{box-shadow:inset 0 0 0 1.5px #0007,inset 0 0 8cqw #ffd84a33,0 0 5cqw #ffd84a66,0 5px 0 #0d1022} .shop-card:disabled:not(.bought){border-color:#6b6780;background:linear-gradient(160deg,#2c2942,#1a1c30);opacity:.55} .shop-card.bought .card-price{color:#9fe8b8;border-color:#8bbf9c} .result-mog{background:none;border:none;box-shadow:none;border-radius:0;height:29cqw;width:34cqw;top:25.5%} .result-mog img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2cqw 3cqw #0008)} .result-screen.won{background:radial-gradient(ellipse at 50% 25%,#7a5a2a,#3a2a55 60%,#111526)} /* ===== v3：AUTO切替・設定の音量・ショップの案内役 ===== */ /* AUTOボタン：見た目は小さなピル、押せる範囲は44px以上。ポーズボタン・HP・深度とは重ならない位置（HUDの下・右端） */ .auto-button{pointer-events:auto;position:absolute;top:8.6%;right:1.4%;width:27cqw;height:max(44px,6.4cqw);padding:0;border:0;background:transparent;display:flex;align-items:flex-start;justify-content:flex-end;touch-action:manipulation} .auto-pill{display:flex;align-items:center;justify-content:center;gap:1.1cqw;margin-top:.55cqw;width:25.8cqw;height:5.3cqw;border-radius:99px;border:2px solid #8d86a8;background:#171b32f2;color:#d9d6ea;font-size:2.7cqw;font-weight:1000;letter-spacing:.04em;box-shadow:0 2px 6px #0008} .auto-pill i{font-style:normal;font-size:2.9cqw;opacity:.7}.auto-pill b{font-size:2.6cqw;min-width:8.4cqw;text-align:left} .auto-button.on .auto-pill{border-color:#9ff0b0;background:linear-gradient(#1f5a3a,#123a28);color:#eafff0;box-shadow:0 0 2.2cqw #6fe08a88,0 2px 6px #0008} .auto-button.on .auto-pill i{opacity:1;color:#9ff0b0} .auto-button:active .auto-pill{transform:scale(.96)} .coach-tip{top:14.6%} .settings-row input.volume{width:34cqw;height:max(32px,6cqw);accent-color:#ffc02e;touch-action:pan-x} .modal-inner{max-height:92%;overflow-y:auto} .shop-advisor{position:absolute;left:-1cqw;top:9.5cqw;width:17cqw;height:17cqw;pointer-events:none;filter:drop-shadow(0 1cqw 1.5cqw #0008)} .shop-balls{position:absolute;right:0;top:15.5cqw;font-size:2.5cqw;font-weight:900;color:#ffe9a8;background:#1a1638cc;border:1px solid #e9cf9d66;border-radius:99px;padding:.7cqw 2.2cqw;white-space:nowrap} .shop-card .card-multi{display:flex;align-items:center}.shop-card .card-multi img{height:9cqw;width:9cqw;margin:0 -1.6cqw} .shop-card .card-multi img:nth-child(2){transform:translateY(-1.6cqw) scale(1.1);z-index:1} .shop-catch{display:none} .shop-advisor{position:static;display:inline-block;vertical-align:middle;width:13.5cqw;height:13.5cqw;margin:-1.5cqw -.5cqw -1.5cqw 0} .ore-wallet{vertical-align:middle} .shop-balls{position:static;display:block;width:max-content;margin:1.2cqw auto 0} .shop-header h2{margin-bottom:.6cqw} .shop-header{position:relative} .shop-advisor{position:absolute;left:.5cqw;bottom:-2.2cqw;width:15cqw;height:15cqw;margin:0} .shop-balls{position:absolute;right:0;bottom:.3cqw;width:23cqw;margin:0;white-space:pre-line;font-size:2.35cqw;line-height:1.35;border-radius:2.4cqw;padding:.8cqw .6cqw;text-align:center} .next-wave-wrap span{flex:1;min-width:0} /* ポーズボタン：見た目はそのまま、押せる範囲だけ44px前後に広げる（下はAUTOボタンと重ならないよう控えめ） */ .pause-button::before{content:'';position:absolute;inset:-10px -8px -4px -8px} /* ===== v4：理想画像リスキン（見た目のみ。配置・機能は従来どおり。上の定義を上書き） ===== */ :root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px); --ink:#140f3c;--panel-a:#2b2264;--panel-b:#161040;--gold:#f2c25a;--gold-hi:#fff3b8;--gold-lo:#a8681c;--pink-line:#ff9ad84d; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",system-ui,sans-serif;background:#0c0828} /* iPhoneのノッチ・ホームバーを避けつつ、9:16の画面を最大まで広げる */ body{background:radial-gradient(ellipse at 50% 30%,#2e2068,#120c34 62%,#08061c)} #app{background:#140f3c;box-shadow:0 0 0 2px #4a3478,0 36px 100px #000b} .vignette{background:linear-gradient(90deg,#08041833,transparent 6%,transparent 94%,#08041833)} button{font-family:inherit} /* ---- プレイ画面：一時停止（メインHUDの右端・紫の角丸ボタン＋金の縁） ---- */ .pause-button{top:11.72%;right:auto;left:87.3%;width:9.4cqw;height:9.4cqw;border:.42cqw solid var(--gold);border-radius:2.4cqw;background:linear-gradient(#7c48c0,#4e2690 55%,#3a1a70);color:#fff;font-size:5.2cqw;font-weight:900;line-height:1;text-shadow:0 .3cqw 0 #2a0c4a;box-shadow:inset 0 .4cqw 0 #ffffff40,inset 0 0 0 .35cqw #2a0c4a,0 .6cqw 1.2cqw #0009} .pause-button:active{transform:translateY(1px)} /* ---- AUTO（2段目の右端。押せる範囲は44px以上のまま） ---- */ .auto-button{top:18.95%;right:1.6%;width:27.6cqw;height:max(44px,6.6cqw)} .auto-pill{width:27.2cqw;height:5.3cqw;margin-top:.15cqw;border:.32cqw solid #c8b8f0;background:linear-gradient(#2a2160,#150f3a);color:#ece8ff;font-size:2.9cqw;font-weight:900;letter-spacing:.08em;gap:1.4cqw;box-shadow:inset 0 0 0 .3cqw #2a0c4a,inset 0 0 0 .5cqw #ff9ad833,0 .5cqw 1cqw #0009} .auto-pill i{font-size:3.2cqw;opacity:.9;color:#d8ccff}.auto-pill b{font-size:2.9cqw;min-width:9cqw;color:#d8ccff} .auto-button.on .auto-pill{border-color:#9ff0b0;background:linear-gradient(#1f5a3a,#123a28)} /* ---- ヒント表示：クリーム色の吹き出し・金の枠・挿絵・紫の鉱石（表示中だけ） ---- */ .coach-tip{top:24.1%;left:15%;right:9.6%;min-height:21cqw;display:flex;align-items:center;justify-content:center;padding:5cqw 2.6cqw 3.4cqw 18cqw;border:.7cqw solid #e9b543;border-radius:5cqw; background:radial-gradient(ellipse at 30% 20%,#fffdf6,#fff6e2 55%,#f5e1b8);color:#3a2418;text-align:center;font-weight:900;font-size:4cqw; box-shadow:0 0 0 .55cqw #4a1f72,0 0 0 1cqw #f8d47a55,inset 0 -1cqw 2cqw #e8c48a66,0 2.4cqw 5cqw #000a;transform:translateY(1.5cqw) scale(.97);transition:opacity .3s,transform .3s} .coach-tip.visible{transform:none} .coach-tip::after{content:'';position:absolute;bottom:-2.2cqw;left:50%;width:3.6cqw;height:3.6cqw;transform:translateX(-50%) rotate(45deg);background:#f5e1b8;border-right:.7cqw solid #e9b543;border-bottom:.7cqw solid #e9b543} .coach-tag{position:absolute;top:-4.4cqw;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:1.6cqw;padding:1cqw 5cqw 1.1cqw 3.4cqw;border-radius:99px;border:.45cqw solid var(--gold);background:linear-gradient(#5e3296,#3a1a66);color:#fff;font-size:3.7cqw;font-style:italic;font-weight:900;letter-spacing:.06em;white-space:nowrap;box-shadow:0 .6cqw 1.2cqw #0007;text-shadow:0 .3cqw 0 #1a0630} .wakaba{display:inline-block;width:3.2cqw;height:4.2cqw;background:linear-gradient(90deg,#ffd400 50%,#1aa84a 50%);clip-path:polygon(0 0,50% 24%,100% 0,100% 74%,50% 100%,0 74%);filter:drop-shadow(0 0 1px #fff)} .coach-mog{position:absolute;left:-3.4cqw;top:50%;width:22cqw;height:22cqw;transform:translateY(-52%);filter:drop-shadow(0 1cqw 1.2cqw #0006);pointer-events:none} .coach-mog:not([src]){display:none} .coach-text{position:relative;z-index:1;margin:0;display:flex;flex-direction:column;align-items:center;gap:.8cqw;line-height:1.2} .coach-l1{font-size:3.5cqw;color:#3a2418;white-space:nowrap}.coach-l1:empty{display:none} .coach-l2{font-size:3.8cqw;white-space:nowrap;color:#c0183f;padding:0 1.2cqw;background:linear-gradient(transparent 56%,#ffe45c 56%,#ffe45c 94%,transparent 94%)} .coach-gems{position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cg stroke='%233a1458' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M14 18 L21 27 L20 48 L10 48 L8 27Z' fill='%238f5ce8'/%3E%3Cpath d='M47 14 L54 23 L52 48 L42 48 L41 23Z' fill='%23d6a8ff'/%3E%3Cpath d='M30 2 L38 14 L36 48 L24 48 L22 14Z' fill='%23b77cff'/%3E%3C/g%3E%3Cpath d='M30 2 L22 14 L27 46Z' fill='%23fff' opacity='.5'/%3E%3Cpath d='M14 18 L8 27 L12 46Z' fill='%23fff' opacity='.4'/%3E%3C/svg%3E") right -3.4cqw bottom -2.4cqw/10.5cqw no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cg stroke='%233a1458' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M14 18 L21 27 L20 48 L10 48 L8 27Z' fill='%23b77cff'/%3E%3Cpath d='M47 14 L54 23 L52 48 L42 48 L41 23Z' fill='%236ab8ff'/%3E%3Cpath d='M30 2 L38 14 L36 48 L24 48 L22 14Z' fill='%238f5ce8'/%3E%3C/g%3E%3Cpath d='M30 2 L22 14 L27 46Z' fill='%23fff' opacity='.5'/%3E%3C/svg%3E") left -4cqw bottom -2cqw/11cqw no-repeat} /* ---- ほかの画面：同じ色・枠・書体の規則（配置と機能は変えない） ---- */ .small-button,.sub-button{border:.35cqw solid #e2b85a;background:linear-gradient(#33287a,#1c1550);color:#fff8e9;box-shadow:inset 0 0 0 .3cqw #2a0c4a,inset 0 .4cqw 0 #ffffff26,0 .6cqw 0 #0b0820} .big-button{border-color:var(--gold-hi);box-shadow:inset 0 2px #fffdf1,inset 0 0 0 .35cqw #e08a1055,0 5px #8a4a14,0 9px 22px #0008} .modal{background:#0c0828d8} .modal-inner{background:linear-gradient(#2b2264,#1a1446 55%,#120e34);border:.5cqw solid var(--gold);box-shadow:inset 0 0 0 .5cqw #2a0c4a,inset 0 0 0 .8cqw var(--pink-line),0 25px 70px #000c} .modal-header{border-bottom-color:#f2c25a40}.modal-header h2{color:#ffd45c;text-shadow:0 .4cqw 0 #2a0c3a} .close-button{border:.4cqw solid var(--gold);background:linear-gradient(#7c48c0,#4e2690 55%,#3a1a70);font-weight:900} .guide-tabs{background:#211a52}.guide-tab{background:#2a2160;border-color:#8a76c8}.guide-tab.selected{background:linear-gradient(#ffe68a,#f2b23a);color:#3a1a06;border-color:var(--gold-hi)} .toggle{border:.3cqw solid #b8a6e0;background:#221a54}.toggle.on{background:linear-gradient(#6fe0a0,#3ea878);color:#0c2530;border-color:#d8ffe6} .toast{border:.4cqw solid var(--gold);background:linear-gradient(#2b2264,#161040);box-shadow:inset 0 0 0 .5cqw #2a0c4a,0 1cqw 3cqw #0008} .home-records{background:linear-gradient(#251c58e8,#120e34e8);border:.35cqw solid #e2b85a} .milestone-banner{background:linear-gradient(#2b2264e8,#161040e8);border-color:#e2b85a} .corner-label{background:#1a1446cc} .shop-screen{background:radial-gradient(ellipse at 50% 12%,#4a3290,#221a5c 48%,#100c30 92%)} .next-wave-wrap{background:linear-gradient(125deg,#3e2a82,#22265a);border-color:var(--gold);box-shadow:inset 0 0 0 .4cqw #2a0c4a,0 5px 25px #0005} .ore-wallet,.shop-balls{background:#1a1446;border-color:var(--gold)} .result-screen{background:radial-gradient(ellipse at 50% 25%,#4e3a96,#221a5c 62%,#100c30)} .result-stats>div{background:linear-gradient(#2b2264,#161040);border:.35cqw solid #e2b85a;box-shadow:inset 0 0 0 .3cqw #2a0c4a} /* v5：ロゴバナーを外し、HUDを上端へ（上に14pxぶんの余白）。押せる範囲は従来どおり */ .pause-button{top:2.11%} .auto-button{top:9.34%} /* ===== 新章：星核の光を取り戻せ！（追加5ステージ）。既存の画面要素の位置は変えない ===== */ .chapter-button{position:relative;width:100%;border:.5cqw solid #f2c25a;border-radius:99px;padding:2.2cqw 4cqw 2.2cqw 15cqw;background:linear-gradient(100deg,#0c4930 0%,#ac6228 26%,#0d397e 50%,#7a1428 74%,#3a1c8a 100%);color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:.4cqw;box-shadow:inset 0 .5cqw 0 #ffffff40,0 .8cqw 2cqw #0009;text-align:left;cursor:pointer} .chapter-button b{font-size:3.9cqw;font-weight:900;text-shadow:0 .35cqw 0 #1a0630,0 0 1.5cqw #0008;letter-spacing:.02em} .chapter-button small{font-size:2.7cqw;font-weight:800;color:#fff3c8;text-shadow:0 .25cqw 0 #1a0630} .chapter-tag{position:absolute;left:3cqw;top:50%;transform:translateY(-50%);background:linear-gradient(#ff7a6a,#db4431);border:.35cqw solid #fff3b8;border-radius:2cqw;padding:.6cqw 1.4cqw;font-size:2.6cqw;font-weight:900;color:#fff} .chapter-button:active{transform:scale(.98)} .chapter-lead{font-size:3.2cqw;line-height:1.6;margin:0 0 2.5cqw} .chapter-note{font-size:2.6cqw;opacity:.75;margin:2.5cqw 0 0} .stage-list{display:flex;flex-direction:column;gap:2cqw} .stage-row{display:flex;align-items:center;gap:3cqw;width:100%;padding:2cqw 3cqw;border-radius:3.2cqw;border:.45cqw solid #f2c25a;color:#fff;text-align:left;cursor:pointer;box-shadow:inset 0 .4cqw 0 #ffffff30,0 .6cqw 1.4cqw #0007} .stage-row.locked{filter:grayscale(.85) brightness(.6);cursor:not-allowed} .stage-row b{display:block;font-size:4.6cqw;font-weight:900;text-shadow:0 .35cqw 0 #0008} .stage-row small{display:block;font-size:2.6cqw;font-weight:800;color:#fff3c8} .stage-row em{display:block;font-style:normal;font-size:2.8cqw;font-weight:700;opacity:.92} .stage-thumb{flex:0 0 13cqw;height:13cqw;border-radius:2.6cqw;background-size:800% 100%;background-position:0 0;box-shadow:0 .4cqw 1cqw #0008} .st-forest{background:linear-gradient(120deg,#1f6a3a,#0c4930)} .st-desert{background:linear-gradient(120deg,#c8803a,#7a3a14)} .st-ice{background:linear-gradient(120deg,#2a6ac8,#0d397e)} .st-fire{background:linear-gradient(120deg,#a8202c,#4f1025)} .st-space{background:linear-gradient(120deg,#5a2ab8,#1c1159)} .story-card{border:.45cqw solid #f2c25a;border-radius:3.5cqw;padding:4cqw;margin-bottom:3.5cqw;color:#fff;box-shadow:inset 0 .4cqw 0 #ffffff30} .story-line{font-size:4.2cqw;font-weight:900;line-height:1.6;margin:0 0 2.5cqw;text-shadow:0 .3cqw 0 #0008} .story-prev{font-size:2.8cqw;opacity:.85;margin:0 0 2.5cqw} .story-boss{font-size:3cqw;margin:0;color:#fff3c8} .next-stage-button{background:linear-gradient(#7c48c0,#4e2690);color:#fff;border-color:#f2c25a} /* MacBookなど横長の画面：ゲーム画面の左右に、いま遊んでいるステージの景色をぼかして広げる */ body[data-stage]:not([data-stage=""])::before{content:'';position:fixed;inset:-40px;z-index:0;background-size:cover;background-position:center;filter:blur(22px) brightness(.55) saturate(1.2);pointer-events:none} body[data-stage=forest]::before{background-image:url(assets/stages/forest.webp)} body[data-stage=desert]::before{background-image:url(assets/stages/desert.webp)} body[data-stage=ice]::before{background-image:url(assets/stages/ice.webp)} body[data-stage=fire]::before{background-image:url(assets/stages/fire.webp)} body[data-stage=space]::before{background-image:url(assets/stages/space.webp)} .result-screen.has-next .result-mog{display:none}.result-screen.has-next .result-depth{top:33%}.result-screen.has-next .result-stats{top:50%}.result-screen.has-next .result-heading p{font-size:3cqw;line-height:1.55} .result-screen.has-next.final .result-depth{top:37%}.result-screen.has-next.final .result-stats{top:54%} /* ===== v9：強化ショップ（参考画像に合わせた見た目のみ。ボタンの数・文言・処理・画面遷移は従来どおり） 配色は #app の data-shop-theme（cave＝既存の地層／forest・desert・ice・fire・space＝新章）で切り替わる。 色の値は shopart.mjs が --sh-* 変数として入れる。配置は全テーマ共通 ===== */ #screen-shop{background:#120a30;padding:0} #screen-shop .shop-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none} #screen-shop .shop-spark,#screen-shop .shop-catch{display:none} #screen-shop .shop-header{position:static;text-align:center} /* 「WAVE 1 CLEAR!」の紙札 */ #screen-shop .eyebrow{position:absolute;z-index:3;top:1.1%;left:50%;transform:translateX(-50%);width:41cqw;height:5.6cqw;margin:0;display:flex;align-items:center;justify-content:center;background:var(--sh-plank-wave) center/100% 100% no-repeat;font-size:4.5cqw;font-weight:900;font-style:italic;letter-spacing:.05em;line-height:1;color:var(--sh-accent);text-shadow:0 .3cqw 0 var(--sh-accent-lo),0 0 .1cqw var(--sh-accent-lo);white-space:nowrap} /* 「強化ショップ」の紙看板 */ #screen-shop .shop-header h2{position:absolute;z-index:2;top:1%;left:50%;transform:translateX(-50%);width:76cqw;height:23cqw;margin:0;padding-top:8.3cqw;display:flex;justify-content:center;align-items:flex-start;gap:0;background:var(--sh-plank-title) center/100% 100% no-repeat;font-size:10cqw;line-height:1;font-weight:900;letter-spacing:-.07em;text-shadow:none;color:#3a1c10;white-space:nowrap} #screen-shop .shop-header h2 .t-a{color:#3a1a12;text-shadow:0 .55cqw 0 #00000038,0 -.15cqw 0 #ffffffa0} #screen-shop .shop-header h2 .t-b{color:var(--sh-accent);text-shadow:0 .55cqw 0 var(--sh-accent-lo),0 -.15cqw 0 #ffffffa0} /* 左上のモグタマ（頭の上に集中線） */ #screen-shop .shop-advisor{position:absolute;z-index:2;left:.6cqw;top:7.3%;bottom:auto;width:21cqw;height:21cqw;margin:0;filter:drop-shadow(0 1cqw 1.2cqw #000a)} #screen-shop .shop-header::before{content:'';position:absolute;z-index:2;left:3cqw;top:7.2%;width:6.4cqw;height:6.4cqw;background:var(--sh-burst) center/contain no-repeat;transform:rotate(28deg)} /* 所持鉱石・反射球（濃い色の箱＋金の縁） */ #screen-shop .ore-wallet{position:absolute;z-index:2;top:12.5%;left:28.2cqw;width:36.7cqw;height:8.7cqw;margin:0;padding:0 3cqw;display:flex;align-items:center;justify-content:center;gap:2.2cqw;border:.6cqw solid var(--sh-gold);border-radius:99px;background:linear-gradient(var(--sh-panel-a),var(--sh-panel-b));box-shadow:0 0 0 .3cqw #4a2606,inset 0 0 0 .3cqw #00000066,inset 0 .6cqw 0 #ffffff22,0 1cqw 1.8cqw #000a;color:#fff} #screen-shop .ore-wallet small{font-size:3.7cqw;font-weight:900;color:#fff4dc;white-space:nowrap} #screen-shop .ore-wallet span{display:flex;align-items:center;gap:1.2cqw;color:#ffd83a;font-size:5cqw;font-weight:900;text-shadow:0 .3cqw 0 #8a5a06} #screen-shop .ore-wallet strong{color:#fff;font-size:7.4cqw;line-height:1;text-shadow:0 .4cqw 0 #0008} #screen-shop .ore-wallet em{position:absolute;top:calc(100% + .8cqw);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:2.7cqw;font-weight:900;box-shadow:0 .4cqw .8cqw #0008} #screen-shop .shop-balls{position:absolute;z-index:2;top:12.3%;left:69cqw;right:auto;bottom:auto;width:26cqw;height:9.6cqw;margin:0;padding:0;display:flex;align-items:center;justify-content:center;white-space:pre-line;text-align:center;font-size:3.4cqw;line-height:1.38;font-weight:900;color:#fff8ea;border:.5cqw solid var(--sh-gold);border-radius:2.6cqw;background:linear-gradient(var(--sh-panel-a),var(--sh-panel-b));box-shadow:0 0 0 .3cqw #4a2606,inset 0 0 0 .3cqw #00000066,inset 0 .5cqw 0 #ffffff1c,0 1cqw 1.8cqw #000a} /* 「つぎの地層」の紙札 */ #screen-shop .next-wave-wrap{position:absolute;z-index:1;top:24.8%;left:2.1cqw;right:2.3cqw;height:11.7cqw;min-height:0;margin:0;padding:0 4.4cqw 0 5.2cqw!important;display:flex!important;flex-direction:row!important;align-items:center;gap:2cqw;border:0;border-radius:0;background:var(--sh-plank-next) center/100% 100% no-repeat;box-shadow:none} #screen-shop .next-wave-wrap.compact .label-small{width:11.6cqw;white-space:normal;text-align:center;line-height:1.15} #screen-shop .next-wave-wrap .label-small{font-size:3.6cqw;font-weight:900;color:#3a2414;white-space:nowrap;margin:0} #screen-shop .next-wave-wrap strong{display:flex;align-items:center;gap:1cqw;font-size:8.4cqw;line-height:1;white-space:nowrap;font-weight:900;color:var(--sh-accent)} #screen-shop .next-wave-wrap strong .next-glyph{font-style:normal;font-size:.9em;filter:drop-shadow(0 .4cqw .3cqw #0006)} #screen-shop .next-wave-wrap strong .next-name{flex:none;margin:0;font-size:inherit;line-height:1;color:inherit;-webkit-text-stroke:.55cqw #fff;paint-order:stroke fill;text-shadow:0 .5cqw 0 var(--sh-accent-lo)} #screen-shop .next-wave-wrap span#shop-next-detail{flex:1;min-width:0;font-size:3.5cqw;font-weight:900;line-height:1.3;color:#3a2414;margin:0} /* 強化カード（2×2のまま） */ #screen-shop .shop-cards{position:absolute;top:32.9%;bottom:20.5%;left:2.4cqw;right:2.4cqw;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:3.6cqw 2.8cqw} #screen-shop .shop-card{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.15cqw;padding:4.6cqw 2.2cqw 2.4cqw;text-align:center;color:#fff;opacity:1;filter:none;border:1cqw solid transparent;border-radius:4.4cqw;background:var(--sh-card) center/cover padding-box,linear-gradient(155deg,#fff8d0 0%,#f5c860 22%,#b8761e 48%,#ffe28a 72%,#9a5a14 100%) border-box;box-shadow:0 0 0 .32cqw #4a2606,inset 0 0 0 .32cqw #4a260699,inset 0 0 3.5cqw #0009,0 1.2cqw 2.2cqw #000b,0 0 3.4cqw var(--sh-glow-a)} #screen-shop .shop-card:active{transform:scale(.97)} #screen-shop .shop-card.bought{opacity:1} #screen-shop .shop-card:disabled:not(.bought){opacity:1;filter:saturate(.45) brightness(.72)} #screen-shop .shop-card.evolve{box-shadow:0 0 0 .32cqw #4a2606,inset 0 0 0 .32cqw #4a260699,inset 0 0 3.5cqw #0009,0 1.2cqw 2.2cqw #000b,0 0 5cqw #ffd84acc} #screen-shop .shop-card .card-art{position:absolute;z-index:0;top:.8cqw;bottom:17.4cqw;left:0;right:0;display:flex;align-items:center;justify-content:center;pointer-events:none} #screen-shop .shop-card>span:not(.card-art):not(.card-cat):not(.card-new){position:relative;z-index:1} #screen-shop .shop-card .card-illust{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 .6cqw .8cqw #0009)} #screen-shop .shop-card .card-name{font-size:5.3cqw;line-height:1.08;font-weight:900;color:#fff;-webkit-text-stroke:.6cqw #1a0a2a;paint-order:stroke fill;text-shadow:0 .5cqw .2cqw #000a;white-space:nowrap;max-width:100%} #screen-shop .shop-card .card-description{font-size:3.1cqw;line-height:1.2;font-weight:800;color:#fff;-webkit-text-stroke:.3cqw #1a0a2a;paint-order:stroke fill} #screen-shop .shop-card .card-change{font-size:3.2cqw;line-height:1.2;font-weight:900;color:#ffe14a;-webkit-text-stroke:.35cqw #2a1206;paint-order:stroke fill} #screen-shop .shop-card .card-price{align-self:stretch;margin:.8cqw 1.2cqw 0;min-height:6cqw;padding:0;display:flex;align-items:center;justify-content:center;gap:1.2cqw;border:.5cqw solid var(--sh-gold);border-radius:99px;background:linear-gradient(var(--sh-panel-a),var(--sh-panel-b));font-size:4.3cqw;font-weight:900;color:#fff;box-shadow:0 0 0 .28cqw #2a1206,inset 0 .5cqw 0 #ffffff26,0 .6cqw .6cqw #0008} #screen-shop .shop-card .card-price i{font-style:normal} #screen-shop .shop-card .card-price .gem{color:#ffd83a;text-shadow:0 .3cqw 0 #8a5a06} #screen-shop .shop-card.bought .card-price{background:linear-gradient(#2f7a3c,#185024 55%,#0f3a18);border-color:#8fe890;color:#e8ffe2;box-shadow:0 0 0 .28cqw #0a2a10,inset 0 .5cqw 0 #ffffff30,0 .6cqw .6cqw #0008} #screen-shop .shop-card.bought .card-price .ok{color:#a8ff9c;font-size:1.15em;text-shadow:0 .3cqw 0 #0a3a12} /* カテゴリのラベル（色分け・右端に宝石） */ #screen-shop .shop-card .card-cat{--cat:linear-gradient(#fff8b0,#ffd83a 55%,#f0a21a);--cat-ink:#4a2604;--gem:linear-gradient(135deg,#fff8c0,#ffc21a 50%,#c87a06);position:absolute;z-index:2;top:-3cqw;left:-2.2cqw;right:auto;height:6.6cqw;padding:0 4.6cqw 0 3cqw;display:flex;align-items:center;border:.45cqw solid #fff8e0;border-radius:1.4cqw;background:var(--cat);color:var(--cat-ink);font-size:3.75cqw;font-weight:900;font-style:italic;white-space:nowrap;transform:skewX(-10deg);text-shadow:0 0 .35cqw #fff,0 0 .35cqw #fff;box-shadow:0 0 0 .25cqw #2a1206,0 .6cqw .6cqw #0008} #screen-shop .shop-card .card-cat::after{content:'';position:absolute;right:-2.6cqw;top:50%;width:4.6cqw;height:4.6cqw;transform:translateY(-50%) rotate(45deg) skewX(8deg);border:.4cqw solid #fff8e0;border-radius:.6cqw;background:var(--gem);box-shadow:0 0 0 .25cqw #2a1206,0 0 2cqw #fff8} #screen-shop .cat-stat .card-cat{--cat:linear-gradient(#d8f8ff,#6cd0ff 55%,#2a8ae8);--cat-ink:#0a2a5a;--gem:linear-gradient(135deg,#e8fbff,#5ab8ff 50%,#1a5ad0)} #screen-shop .cat-helper .card-cat{--cat:linear-gradient(#ffe2f6,#ff9ad8 55%,#e050b0);--cat-ink:#4a0a34;--gem:linear-gradient(135deg,#fff0fb,#ff7ad0 50%,#b02a8a)} #screen-shop .cat-heal .card-cat{--cat:linear-gradient(#e0ffe8,#7aeea6 55%,#22b060);--cat-ink:#0a3a1a;--gem:linear-gradient(135deg,#f0fff4,#5ae890 50%,#14904a)} #screen-shop .cat-evolve .card-cat{--cat:linear-gradient(#ffe8b0,#ffa84a 55%,#e8601a);--cat-ink:#4a1604;--gem:linear-gradient(135deg,#fff0c8,#ff8a2a 50%,#b03a06)} #screen-shop .shop-card .card-new{top:-2.4cqw;right:-1.4cqw;z-index:3;padding:.6cqw 2cqw;border:.4cqw solid #fff3b8;border-radius:1.4cqw;background:linear-gradient(#ff7a6a,#d8302a);color:#fff;font-size:3cqw;text-shadow:0 .3cqw 0 #6a0a0a;box-shadow:0 .5cqw .8cqw #0009} /* 下部：入れ替え（細長い補助ボタン）・次の地層へ（大きなメインボタン）・説明文 */ #screen-shop .shop-footer{position:absolute;top:80.6%;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:0;text-align:center} #screen-shop .sub-button{align-self:center;height:7.4cqw;width:44.2cqw;padding:0 2cqw;display:flex;align-items:center;justify-content:center;gap:1.4cqw;border:.5cqw solid var(--sh-gold);border-radius:99px;background:linear-gradient(var(--sh-panel-a),var(--sh-panel-b));color:#fff;font-size:3.9cqw;font-weight:900;white-space:nowrap;box-shadow:0 0 0 .3cqw #4a2606,inset 0 .5cqw 0 #ffffff22,0 .8cqw 1.4cqw #0009} #screen-shop .sub-button b{color:#ffd83a;font-size:4.2cqw;text-shadow:0 .3cqw 0 #6a3a06} #screen-shop .sub-button:disabled{opacity:.6;filter:saturate(.6)} #screen-shop .shop-footer .big-button{margin-top:2.4cqw;width:auto;align-self:stretch;margin-left:4.5cqw;margin-right:4.9cqw;min-height:12.8cqw;height:12.8cqw;gap:3cqw;border:.6cqw solid #fff6c0;border-radius:99px;font-size:7.4cqw;font-weight:900;letter-spacing:.03em;color:#3a1806;text-shadow:0 .3cqw 0 #fff6b8;background:radial-gradient(ellipse 70% 40% at 50% 12%,#ffffffb0,#fff0 70%),linear-gradient(#fff4a0 0%,#ffe04a 32%,#ffc01a 62%,#ff9a12 100%);box-shadow:0 0 0 .4cqw #8a4a0a,inset 0 -.8cqw 1.2cqw #e0700a80,0 1.1cqw 0 #a8520a,0 1.6cqw 2.4cqw #000b,0 0 4cqw #ffc84a55} #screen-shop .shop-footer .big-button:active{transform:translateY(.6cqw);box-shadow:0 0 0 .4cqw #8a4a0a,inset 0 -.8cqw 1.2cqw #e0700a80,0 .4cqw 0 #a8520a,0 .8cqw 1.4cqw #000b} #screen-shop .shop-footer .big-button span{font-size:7.6cqw;line-height:1} #screen-shop .shop-footer p{margin:2.2cqw 0 0;font-size:3.4cqw;font-weight:800;color:#fff;text-shadow:0 .3cqw .4cqw #000,0 0 1.2cqw #000a} /* 購入時の通知（「強化！ ○○」）：ショップでは見出しと紙札の間に、横長の帯で出す */ #screen-shop.active ~ .toast{top:19.7%;left:12.8%;right:12.9%;height:7.4cqw;padding:0 2cqw;display:flex;align-items:center;justify-content:center;border:.55cqw solid var(--sh-gold);border-radius:99px;background:linear-gradient(var(--sh-panel-a),var(--sh-panel-b));color:#fff;font-size:4.4cqw;font-weight:900;letter-spacing:.06em;white-space:nowrap;text-shadow:0 .35cqw 0 #0009;box-shadow:0 0 0 .3cqw #4a2606,inset 0 .5cqw 0 #ffffff22,0 1cqw 2cqw #000a,0 0 3cqw var(--sh-glow-a)} #screen-shop.active ~ .toast::before,#screen-shop.active ~ .toast::after{content:'';flex:none;width:6.4cqw;height:6.4cqw;margin:0 2.4cqw;background:var(--sh-burst) center/contain no-repeat} #screen-shop.active ~ .toast::after{transform:scaleX(-1)} /* ===== v10：クリア後の結果画面（参考画像に合わせた見た目のみ。ボタンの数・処理・数値の計算は従来どおり） 位置は 720×1280 の論理座標を % と cqw（1cqw＝7.2px）に直したもの。配色は resultart.mjs が --rs-* 変数で入れる。 safe-area の余白はここでは足さない（#app 自体がすでに画面内に収まっているため、二重にしない） ===== */ #screen-result{--rs-panel-a:#2e1f6a;--rs-panel-b:#150c3c;--rs-btn-a:#8a4ae0;--rs-btn-b:#4a1c9c;--rs-btn-c:#2e0e70;padding:0;background:#1a0c44;text-align:center} #screen-result.won,#screen-result:not(.won){background:#1a0c44} #screen-result .result-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none} #screen-result .result-stars{display:none} #screen-result .rs-head{position:absolute;z-index:3;top:0;left:0;width:100%;height:auto;pointer-events:none} #screen-result #result-kicker,#screen-result #result-title,#screen-result #result-depth{position:absolute!important;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* サブタイトルと区切り線 */ #screen-result .result-heading{position:absolute;z-index:3;top:19.4%;left:0;right:0;margin:0;padding:0 6cqw;display:flex;flex-direction:column;align-items:center} #screen-result .result-heading p{margin:0;max-width:88cqw;font-size:3.1cqw;line-height:1.42;font-weight:800;color:#fff;letter-spacing:.02em;text-shadow:0 0 .5cqw #12002a,0 .3cqw .2cqw #12002a,.2cqw 0 .2cqw #12002a,-.2cqw 0 .2cqw #12002a} #screen-result .rs-divider{position:relative;display:block;width:70cqw;height:3cqw;margin-top:1.6cqw} #screen-result .rs-divider::before{content:'';position:absolute;left:0;right:0;top:50%;height:.32cqw;transform:translateY(-50%);background:linear-gradient(90deg,#f2c25a00,#f2c25a 30%,#fff3b8 50%,#f2c25a 70%,#f2c25a00)} #screen-result .rs-divider::after{content:'';position:absolute;left:50%;top:50%;width:2.4cqw;height:2.4cqw;transform:translate(-50%,-50%) rotate(45deg);background:linear-gradient(135deg,#fff6c0,#f4c040 50%,#b06a10);box-shadow:0 0 0 .3cqw #5a2a04,0 0 2cqw #ffd86a} /* モグタマ（後光・光芒・結晶つきのトロッコ） */ #screen-result .result-mog{position:absolute;z-index:1;top:20%;left:50%;width:44cqw;height:40.3cqw;transform:translateX(-50%);margin:0;background:none;border:0;border-radius:0;box-shadow:none} #screen-result .result-mog img{width:100%;height:100%;object-fit:contain;filter:none;animation:rs-pop .5s cubic-bezier(.3,1.5,.5,1) both} #screen-result .result-mog::before{content:'';position:absolute;left:50%;top:44%;width:56cqw;height:56cqw;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ffe9a040,#ffb04a14 45%,#0000 70%);animation:rs-glow 2.6s ease-in-out infinite;pointer-events:none} /* 到達深度 */ #screen-result .result-depth{position:absolute;z-index:2;top:42.35%;left:0;right:0;height:30cqw;display:block;gap:0} #screen-result .result-depth small{position:absolute;top:0;left:50%;transform:translateX(-50%);height:4.6cqw;min-width:26.5cqw;padding:0 3.2cqw;display:flex;align-items:center;justify-content:center;border-radius:99px;font-size:3.3cqw;font-weight:900;letter-spacing:.06em;color:#fff4dc;background:linear-gradient(#4a2a6a,#2a1240);box-shadow:0 0 0 .32cqw #f2c25a,0 0 0 .55cqw #5a2a04,inset 0 .3cqw 0 #ffffff26,0 .6cqw 1.2cqw #0008;text-shadow:0 .25cqw 0 #12002a} #screen-result .result-depth small::before,#screen-result .result-depth small::after{content:'';position:absolute;top:50%;width:12cqw;height:.3cqw;background:linear-gradient(90deg,#f2c25a00,#f2c25a)} #screen-result .result-depth small::before{right:calc(100% + 1.2cqw)} #screen-result .result-depth small::after{left:calc(100% + 1.2cqw);transform:scaleX(-1)} #screen-result .rs-num{position:absolute;top:3.9cqw;left:0;width:100%;height:auto;pointer-events:none;animation:rs-pop .55s .08s cubic-bezier(.3,1.6,.5,1) both} #screen-result #result-record{position:absolute;top:21.4cqw;left:0;right:0;font-size:3.75cqw;font-weight:900;font-style:italic;letter-spacing:.02em;color:#fff3c8;text-shadow:0 .3cqw 0 #3a1206,.25cqw 0 0 #3a1206,-.25cqw 0 0 #3a1206,0 -.25cqw 0 #3a1206,0 0 1.6cqw #ffb02a90} #screen-result #result-boss{position:absolute;top:26.2cqw;left:0;right:0;font-size:3cqw;font-weight:900;color:#ffc4c8;text-shadow:0 .25cqw 0 #3a0610,.2cqw 0 0 #3a0610,-.2cqw 0 0 #3a0610} /* 3つの記録カード */ #screen-result .result-stats{position:absolute;z-index:2;top:58.9%;left:5.55cqw;right:5.4cqw;display:flex;gap:2.25cqw} #screen-result .result-stats>div{position:relative;flex:1;height:14.9cqw;padding:5.2cqw 0 0;display:flex;flex-direction:column;align-items:center;gap:.6cqw;border:0;border-radius:3.4cqw;background:linear-gradient(var(--rs-panel-a),var(--rs-panel-b));box-shadow:0 0 0 .5cqw #f4c84a,0 0 0 .8cqw #6a3408,inset 0 0 0 .4cqw #2a0c4a,inset 0 .6cqw 0 .4cqw #ffffff14,inset 0 0 0 .7cqw #ff9ad830,0 1.2cqw 1.6cqw #000a;animation:rs-rise .45s both} #screen-result .result-stats>div:nth-child(2){animation-delay:.06s}#screen-result .result-stats>div:nth-child(3){animation-delay:.12s} #screen-result .result-stats i{position:absolute;top:-5.9cqw;left:50%;width:8cqw;height:8cqw;transform:translateX(-50%);background:center/contain no-repeat;filter:drop-shadow(0 .5cqw .5cqw #000a)} #screen-result .st-rock i{background-image:var(--rs-icon-rock)}#screen-result .st-combo i{background-image:var(--rs-icon-crystal);top:-5.6cqw;width:8.2cqw;height:8.2cqw}#screen-result .st-time i{background-image:var(--rs-icon-watch)} #screen-result .result-stats b{font-size:5.8cqw;line-height:1;font-weight:900;color:#ffd84a;font-variant-numeric:tabular-nums;background:linear-gradient(#fff6b0,#ffd23a 50%,#f4a412);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(.22cqw 0 0 #3a1206) drop-shadow(-.22cqw 0 0 #3a1206) drop-shadow(0 .22cqw 0 #3a1206) drop-shadow(0 -.22cqw 0 #3a1206)} #screen-result .result-stats span{font-size:3.05cqw;font-weight:800;color:#fff;text-shadow:0 .25cqw 0 #12002a} /* ボタン */ #screen-result .result-actions{position:absolute;z-index:2;top:69.6%;bottom:auto;left:6.1cqw;right:6cqw;display:flex;flex-direction:column;gap:0} #screen-result .result-actions button{position:relative;display:flex;align-items:center;justify-content:center;gap:2.2cqw;width:100%;margin:0;padding:0;border:0;border-radius:99px;font-weight:900;letter-spacing:.04em;transition:transform .1s,filter .1s;animation:rs-rise .45s .15s both} #screen-result .result-actions button:active{transform:translateY(.5cqw);filter:brightness(1.08)} #screen-result .result-actions button::before{content:'';position:absolute;left:6%;right:6%;top:9%;height:36%;border-radius:99px;background:linear-gradient(#ffffffa0,#ffffff10);pointer-events:none} #screen-result .rs-ico{width:1.1em;height:1.1em;flex:none;overflow:visible} #screen-result .result-actions .big-button{min-height:0;height:12.5cqw;font-size:5.4cqw;color:#3a1606;text-shadow:0 .3cqw 0 #fff6b8;background:linear-gradient(#ffec6e,#ffcc22 46%,#f8a810 54%,#f08a08);box-shadow:inset 0 -1cqw 1.4cqw #d8600a90,inset 0 .4cqw 0 #fffbe0,0 0 0 .55cqw #fff0a0,0 0 0 1cqw #b8680c,0 1.3cqw 0 .6cqw #5a2204,0 0 4cqw #ffb02a70} #screen-result .result-actions .big-button span{font-size:inherit} #screen-result .result-actions .big-button .rs-ico{color:#4a1c06;filter:drop-shadow(0 .25cqw 0 #fff6b8)} #screen-result .result-actions .next-stage-button{margin-bottom:3.6cqw;font-size:4.8cqw;color:#fff;text-shadow:0 .3cqw 0 #063a2a,.2cqw 0 0 #063a2a,-.2cqw 0 0 #063a2a;background:linear-gradient(#7af0b0,#22c27a 48%,#11a062 54%,#0a7a4a);box-shadow:inset 0 -1cqw 1.4cqw #04502e90,inset 0 .4cqw 0 #e0ffe8,0 0 0 .55cqw #fff0a0,0 0 0 1cqw #b8680c,0 1.3cqw 0 .6cqw #063a20,0 0 4cqw #22c27a60} #screen-result .home-secondary{display:flex;gap:2.1cqw;margin-top:3.5cqw} #screen-result .result-actions .small-button{flex:1;height:10.7cqw;font-size:4.3cqw;color:#fff;text-shadow:0 .3cqw 0 #1a0640,.22cqw 0 0 #1a0640,-.22cqw 0 0 #1a0640,0 -.15cqw 0 #1a0640;background:linear-gradient(var(--rs-btn-a),var(--rs-btn-b) 55%,var(--rs-btn-c));box-shadow:inset 0 -.8cqw 1.2cqw #12002a80,inset 0 .35cqw 0 #ffffff50,0 0 0 .45cqw #f6cd5a,0 0 0 .8cqw #5a2a08,0 1cqw 0 .4cqw #12002a,0 0 3cqw #a060ff40} #screen-result .result-actions .small-button .rs-ico{filter:drop-shadow(0 .25cqw 0 #1a0640)} #screen-result .result-actions .rs-save{text-shadow:0 .3cqw 0 #052060,.22cqw 0 0 #052060,-.22cqw 0 0 #052060,0 -.15cqw 0 #052060;background:linear-gradient(#6ad0ff,#2a8af0 45%,#1462d8 55%,#0c3ea0);box-shadow:inset 0 -.8cqw 1.2cqw #04206080,inset 0 .35cqw 0 #ffffff70,0 0 0 .45cqw #e8f4ff,0 0 0 .8cqw #0a2a70,0 1cqw 0 .4cqw #061648,0 0 3.4cqw #3ab0ff90} #screen-result .result-actions .rs-save .rs-ico{filter:drop-shadow(0 .25cqw 0 #052060)} #screen-result #endless-button{flex:none;height:10cqw;margin-top:2.7cqw} /* 新章のクリア（次のステージへ がある）：長いストーリー文のぶん、モグタマを外して上へ詰める */ #screen-result.has-next .result-mog{display:none} #screen-result.has-next .result-heading p{font-size:3cqw;line-height:1.5} #screen-result.has-next .result-depth{top:28.4%} #screen-result.has-next .result-stats{top:46.6%} #screen-result.has-next .result-actions{top:58.2%} #screen-result.has-next.final .result-depth{top:30%} #screen-result.has-next.final .result-stats{top:48.6%} #screen-result.has-next.final .result-actions{top:62%} /* ボス戦で負けたとき：残りHPの行を入れるため、少し上へ */ #screen-result .result-depth.boss-defeat{top:40.4%} #screen-result:has(.boss-defeat) .result-mog{top:18.4%;width:40cqw;height:36.6cqw} @keyframes rs-pop{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:none}} @keyframes rs-rise{0%{opacity:0;transform:translateY(3cqw)}100%{opacity:1;transform:none}} @keyframes rs-glow{0%,100%{opacity:.75}50%{opacity:1}} #screen-result .result-actions .small-button .rs-ico{width:1.25em;height:1.25em} #screen-result .result-heading p{text-wrap:balance} #screen-result:has(.boss-defeat) .result-stats{top:60.6%} #screen-result:has(.boss-defeat) .result-actions{top:71.3%} /* ===== v13：プレイ中のヒント吹き出し（参考画像1枚目に合わせた見た目のみ。文言は従来の coach() のまま） ===== */ .coach-tip{top:19.8%;left:12.4%;right:9.6%;min-height:26.4cqw;padding:5.6cqw 3cqw 4.4cqw 22cqw;border:.5cqw solid #d9a04a;border-radius:4.2cqw; background:linear-gradient(#fffaf0,#fbf0da 60%,#f3e1bd); box-shadow:0 0 0 .45cqw #5b2e86,inset 0 0 0 .5cqw #fffdf5,inset 0 -1.2cqw 1.6cqw #e5c99455,0 1.8cqw 3cqw #0009} .coach-tip::after{bottom:-2.6cqw;left:50%;width:4.4cqw;height:4.4cqw;background:#f3e1bd;border-right:.5cqw solid #d9a04a;border-bottom:.5cqw solid #d9a04a;box-shadow:.45cqw .45cqw 0 0 #5b2e86} .coach-tag{top:-4.6cqw;left:51%;gap:1.8cqw;padding:1.1cqw 5.4cqw 1.2cqw 4.4cqw;border:.45cqw solid #d9a04a;background:linear-gradient(#4b2a9a,#2f1772);font-size:5.1cqw;font-style:normal;letter-spacing:.04em; box-shadow:0 0 0 .35cqw #2a0e52,0 .8cqw 1.4cqw #0007;text-shadow:0 .35cqw 0 #170630} .coach-tag .wakaba{width:3.6cqw;height:4.8cqw} .coach-mog{left:-.2cqw;top:auto;bottom:-.2cqw;width:23.2cqw;height:auto;transform:none;filter:none} .coach-text{gap:1.6cqw;align-items:center} .coach-l1{color:#2e1a10;letter-spacing:.02em} .coach-l2{color:#d0122f;padding:0 .6cqw .6cqw;background:linear-gradient(transparent 82%,#f6c623 82%,#f6c623 96%,transparent 96%)} .coach-gems{border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23ffd21f' stroke='%233a1c08' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M6 2 L13 1 L12 17 L8 18Z'/%3E%3Cpath d='M30 9 L37 14 L25 24 L21 21Z'/%3E%3C/g%3E%3C/svg%3E") left 18.4cqw top 1.4cqw/8.4cqw no-repeat} /* v13：HUDを少し内側に縮めたぶん、DOMの一時停止・AUTOも同じだけ動かす（押せる範囲は44px以上のまま） */ .pause-button{translate:-2.52cqw 1.16cqw;scale:.94} .auto-button{translate:-2.08cqw .35cqw;scale:.94} .coach-tip{min-height:22.6cqw;padding:4.6cqw 3cqw 3.2cqw 22cqw} .coach-tag{top:-4cqw;padding:.8cqw 4.4cqw .9cqw 3.6cqw;font-size:4.4cqw;gap:1.4cqw} .coach-tag .wakaba{width:3.2cqw;height:4.2cqw} .coach-gems{background-position:left 19.4cqw top 1.2cqw;background-size:8cqw} /* ===== v13：強化ショップ（参考画像2枚目に合わせた見た目のみ） ===== */ #screen-shop .shop-advisor{z-index:4;left:.8cqw;top:6.4%;width:31cqw;height:auto;filter:drop-shadow(0 .8cqw 1cqw #0009)} #screen-shop .shop-header::before{z-index:4;left:8.6cqw;top:2.6%;width:13cqw;height:9cqw;transform:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Cg fill='%23ffd21f' stroke='%233a1c08' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 26 L10 21 L19 33 L15 36Z'/%3E%3Cpath d='M22 6 L30 5 L30 25 L25 26Z'/%3E%3Cpath d='M46 6 L54 10 L42 27 L38 25Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat} #screen-shop .shop-header h2{left:55.5%;width:66cqw;height:21.6cqw;padding-top:7.6cqw;font-size:9.8cqw} #screen-shop .eyebrow{left:55.5%;top:1.4%;width:40cqw;height:6.2cqw;font-size:4.6cqw} #screen-shop .ore-wallet{left:31cqw;width:37.4cqw} #screen-shop .shop-balls{left:70.4cqw;width:25cqw} #screen-shop .shop-card .card-illust{filter:none} #screen-shop .shop-card .card-art{top:1.4cqw;bottom:20.6cqw} #screen-shop .shop-card .card-illust{width:100%;height:100%;object-fit:contain} #screen-shop .shop-card .card-art{top:1.6cqw;bottom:22.4cqw} #screen-shop .ore-wallet{left:31.6cqw;width:38.4cqw;padding:0 2.2cqw;gap:1.6cqw} #screen-shop .ore-wallet small{font-size:3.5cqw} #screen-shop .ore-wallet strong{font-size:6.9cqw} #screen-shop .shop-balls{left:71.6cqw;width:24.2cqw;font-size:3.3cqw} /* ===== v13：クリア後の結果画面（参考画像3・4枚目に合わせた見た目のみ） ===== */ #screen-result .rs-divider{visibility:hidden} #screen-result .result-depth small::before,#screen-result .result-depth small::after{display:none} #screen-result .result-mog{top:18.9%;width:47cqw;height:43.1cqw} #screen-result .result-mog::before{display:none} #screen-result .result-stats>div{height:16.2cqw;padding-top:4.2cqw;gap:1.2cqw;justify-content:flex-start} #screen-result .result-stats b{font-size:6.2cqw} #screen-result .result-stats span{font-size:3.2cqw;line-height:1} #screen-shop .shop-card .card-art{bottom:23.4cqw} #screen-shop .shop-advisor{top:8.2%} #screen-shop .shop-header::before{top:4.3%} #screen-shop .shop-header h2{top:2.4%} #screen-shop .eyebrow{top:2.6%} #screen-shop .ore-wallet{top:15.4%} #screen-shop .shop-balls{top:15.2%} /* v13 レビュー反映：ショップの主人公を看板の手前に重ねる／結果画面の主人公を少し大きく */ #screen-shop .shop-advisor{left:1.6cqw;width:32cqw} #screen-shop .shop-header h2{left:57%;width:62cqw} #screen-shop .eyebrow{left:57%} #screen-result .result-mog{top:18.2%;width:50cqw;height:45.8cqw} /* ===== v14：オープニング画面（参考画像に合わせた見た目。背景・ロゴ・主人公は参考画像そのもの、数値とボタンはDOM） ===== */ #screen-home{background:#1e0c40} #screen-home .home-art{background:url('assets/title/title-bg.webp') center/100% 100% no-repeat;transform:none} #screen-home .home-content{position:absolute;inset:0;padding:0;display:block} #screen-home .corner-label,#screen-home .home-heading,#screen-home .no-ads{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0} #screen-home .home-bottom{position:static;margin:0;filter:none;display:block} #screen-home .home-bottom>*{position:absolute;left:5.5cqw;right:5.4cqw;margin:0;box-sizing:border-box} /* 最高深度｜累計深度 */ #screen-home .home-records{top:61.1%;height:7.6cqw;padding:0 3.4cqw;display:flex;align-items:center;justify-content:space-between;border:.45cqw solid #f0c060;border-radius:99px;background:linear-gradient(#3a1f78,#241052 55%,#1a0a40);box-shadow:0 0 0 .3cqw #3a1606,inset 0 .4cqw 0 #ffffff1c,inset 0 0 0 .3cqw #12052e,0 .8cqw 1.6cqw #0009;font-size:3cqw;font-weight:900;color:#fff} #screen-home .home-records::after{content:'';position:absolute;left:50%;top:22%;bottom:22%;width:.3cqw;background:#ffffff40} #screen-home .home-records span{display:flex;align-items:baseline;gap:2.2cqw;text-shadow:0 .25cqw 0 #12002a} #screen-home .home-records b{font-size:4.4cqw;color:#ffd83a;text-shadow:0 .3cqw 0 #6a3a06} /* 出発特典のお知らせ */ #screen-home .milestone-banner{top:66.4%;min-height:0;height:6.6cqw;padding:0 3cqw;gap:1.8cqw;border:.45cqw solid #f0c060;border-radius:99px;background:linear-gradient(#34196e,#20104c 60%,#180a3c);box-shadow:0 0 0 .3cqw #3a1606,inset 0 .4cqw 0 #ffffff1a,0 .8cqw 1.6cqw #0009;font-size:3.35cqw;font-weight:900;color:#fff;text-shadow:0 .25cqw 0 #12002a} #screen-home .milestone-banner span:first-child{font-size:4.4cqw} /* スタート（大きな金色） */ #screen-home .start-button{top:71%;left:6.2cqw;right:6cqw;width:auto;min-height:0;height:12.2cqw;gap:3.2cqw;border:.7cqw solid #fff3b0;border-radius:99px;font-size:9.4cqw;font-weight:900;letter-spacing:.04em;color:#3a1a06;text-shadow:0 .3cqw 0 #fff6b8; background:radial-gradient(ellipse 72% 34% at 50% 14%,#ffffffc0,#fff0 72%),linear-gradient(#fff3a0 0%,#ffe04a 34%,#ffc21a 64%,#f59a12 100%); box-shadow:0 0 0 .45cqw #8a4a0a,inset 0 -1cqw 1.4cqw #e0700a80,0 1.2cqw 0 #a8520a,0 1.8cqw 2.6cqw #000b,0 0 4.6cqw #ffc84a66} #screen-home .start-button span{font-size:8.6cqw;line-height:1} #screen-home .start-button:active{transform:translateY(.6cqw)} /* 続きから（紫＋金の縁） */ #screen-home .continue-button{top:79%;left:6.6cqw;right:7cqw;height:10.4cqw;display:flex;align-items:center;justify-content:center;gap:3cqw;padding:0;border:.6cqw solid #f6c860;border-radius:99px;color:#ffe9a0;font-family:inherit;font-size:8.2cqw;font-weight:900;letter-spacing:.06em;text-shadow:0 .45cqw 0 #3a0a70,0 0 .2cqw #3a0a70; background:radial-gradient(ellipse 70% 36% at 50% 14%,#ffffff70,#fff0 72%),linear-gradient(#c070ff 0%,#9a3ef0 38%,#7420d0 70%,#5a14a8 100%); box-shadow:0 0 0 .4cqw #4a1a06,inset 0 -.9cqw 1.4cqw #3a0a8a90,0 1cqw 0 #3a0c78,0 1.6cqw 2.4cqw #000b,0 0 4cqw #b060ff55;cursor:pointer;touch-action:manipulation} #screen-home .continue-button .ct-ico{width:7.2cqw;height:7.2cqw;color:#ffe08a;filter:drop-shadow(0 .4cqw 0 #3a0a70)} #screen-home .continue-button small{position:absolute;right:5cqw;font-size:2.8cqw;letter-spacing:0;color:#fff4d0;text-shadow:0 .25cqw 0 #2a0650} #screen-home .continue-button:active{transform:translateY(.5cqw)} #screen-home .continue-button.empty{filter:saturate(.75) brightness(.92)} /* 新章 */ #screen-home .chapter-button{top:85.6%;height:11.4cqw;padding:0 20cqw 0 23cqw;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.6cqw;text-align:left;border:.5cqw solid #f0c060;border-radius:99px; background:linear-gradient(#34196e,#1e0e4a 60%,#150838);box-shadow:0 0 0 .3cqw #3a1606,inset 0 .4cqw 0 #ffffff1a,0 .8cqw 1.6cqw #0009} #screen-home .chapter-button b{display:flex;align-items:center;gap:1.4cqw;font-size:4.6cqw;color:#fff;white-space:nowrap;text-shadow:0 .3cqw 0 #12002a} #screen-home .chapter-button .ch-star{font-style:normal;color:#ffd21f;font-size:5.4cqw;text-shadow:0 .3cqw 0 #8a5206} #screen-home .chapter-button small{font-size:3cqw;color:#ffe28a;font-weight:800;padding-left:.4cqw;white-space:nowrap} #screen-home .chapter-button .chapter-tag{position:absolute;left:3.4cqw;top:50%;transform:translateY(-50%);padding:.8cqw 2.6cqw;border:.45cqw solid #fff;border-radius:99px;background:linear-gradient(#ff6a5a,#e0141e);color:#fff;font-size:4.2cqw;font-weight:900;letter-spacing:.02em;box-shadow:0 .4cqw .6cqw #0008;text-shadow:0 .25cqw 0 #7a0608;animation:none} #screen-home .chapter-button .ch-icon{position:absolute;right:2.6cqw;top:50%;transform:translateY(-58%);width:14cqw;height:auto;pointer-events:none} /* 遊びかた・設定 */ #screen-home .home-secondary{top:92.4%;left:7.8cqw;right:7.6cqw;display:flex;gap:2.6cqw} #screen-home .home-secondary .small-button{height:9cqw;padding:0;display:flex;align-items:center;justify-content:center;gap:1.6cqw;border:.45cqw solid #f0c060;border-radius:99px;background:linear-gradient(#3a1f78,#241052 60%,#1a0a40);font-size:4.4cqw;font-weight:900;color:#fff;box-shadow:0 0 0 .3cqw #3a1606,inset 0 .4cqw 0 #ffffff1c,0 .8cqw 1.4cqw #0009;text-shadow:0 .3cqw 0 #12002a} #screen-home .home-secondary .hm-ico{width:5.4cqw;height:5.4cqw} /* セーブ枠の一覧（続きから／セーブ） */ .slot-list{display:flex;flex-direction:column;gap:2.4cqw;margin-top:2cqw} .slot-row{position:relative;display:flex;align-items:center;gap:3cqw;width:100%;padding:2.6cqw 3cqw;border:.45cqw solid #f0c060;border-radius:3.4cqw;background:linear-gradient(#3a1f78,#1e0e4a);color:#fff;text-align:left;font-family:inherit;box-shadow:0 .6cqw 1.2cqw #0008} .slot-row:disabled{opacity:.55} .slot-no{flex:none;width:11cqw;height:11cqw;display:grid;place-items:center;border-radius:2.4cqw;background:linear-gradient(#ffe46a,#f0a012);color:#3a1a06;font-size:5.4cqw;font-weight:900} .slot-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.6cqw} .slot-body b{font-size:3.8cqw;font-weight:900} .slot-body small{font-size:2.9cqw;color:#ffe9b0;font-weight:800} .slot-body em{font-size:2.6cqw;color:#cfc4f0;font-style:normal} .slot-row.confirm{border-color:#ff8a7a;box-shadow:0 0 0 .4cqw #ff6a5a80} .slot-del{flex:none;padding:1.4cqw 2.4cqw;border:.35cqw solid #d8b0ff;border-radius:99px;background:#2a1450;color:#f0e0ff;font-size:2.8cqw;font-weight:900;font-family:inherit} .slot-del.confirm{background:#a8202a;border-color:#ffb0a8;color:#fff} .slot-note{margin-top:2.6cqw;font-size:2.8cqw;line-height:1.5;opacity:.85} #screen-home .continue-button.empty{filter:none} #screen-home .start-button{font-size:8.8cqw} #screen-home .start-button span{font-size:8cqw} #screen-home .continue-button{font-size:7.8cqw} #screen-home .chapter-button{padding:0 17cqw 0 21.4cqw;gap:.2cqw} #screen-home .chapter-button b{font-size:4.05cqw;gap:1cqw} #screen-home .chapter-button .ch-star{font-size:4.6cqw} #screen-home .chapter-button small{font-size:2.75cqw} #screen-home .chapter-button .chapter-tag{left:3cqw;padding:.5cqw 2.2cqw;font-size:3.6cqw} #screen-home .chapter-button .ch-icon{right:2cqw;width:13.4cqw} #screen-home .home-bottom>*{width:auto!important} #screen-home .chapter-button{padding:0 16cqw 0 16.4cqw} #screen-home .chapter-button .chapter-tag{left:2.4cqw} #screen-home .chapter-button b{font-size:4.2cqw} #screen-home .chapter-button b{font-size:3.85cqw;gap:.8cqw} #screen-home .chapter-button .ch-star{font-size:4.3cqw} #screen-home .chapter-button .ch-icon{right:2.2cqw;width:12cqw} .modal:not(.hidden) ~ .toast{top:auto;bottom:6%;z-index:80} /* ===== v15：オープニング画面のエフェクト（src/titlefx.mjs） ===== */ #screen-home .home-art{overflow:hidden} .tfx{position:absolute;inset:0;pointer-events:none} .tfx>*{position:absolute;pointer-events:none} /* ロゴ：文字の形（logo-mask）にだけ光を走らせる */ .tfx-title{left:15.94%;top:1.196%;width:69.08%;height:32.3%;transform-origin:50% 45%;animation:tfxBreath 3.2s ease-in-out infinite} .tfx-title>*{position:absolute;inset:0;width:100%;height:100%} .tfx-logo-glow{background:url('assets/title/logo-glow.webp') center/100% 100% no-repeat;mix-blend-mode:screen;transform:scale(1.06);animation:tfxGlow 3.2s ease-in-out infinite} @keyframes tfxBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}} @keyframes tfxGlow{0%,100%{opacity:.35}50%{opacity:.9}} #screen-home.tfx-intro .tfx-title{animation:tfxPop .9s cubic-bezier(.2,1.6,.4,1) .2s both,tfxBreath 3.2s ease-in-out 1.1s infinite} @keyframes tfxPop{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}} .tfx-logo{left:15.94%;top:1.196%;width:69.08%;height:32.3%;-webkit-mask:url('assets/title/logo-mask.webp') center/100% 100% no-repeat;mask:url('assets/title/logo-mask.webp') center/100% 100% no-repeat} .tfx-logo>i{position:absolute;inset:0} .tfx-logo-shine{background:linear-gradient(112deg,#fff0 41%,#fff8d830 45%,#fffbe8b0 48.6%,#fff 49.6%,#fff 50.4%,#fffbe8b0 51.4%,#fff8d830 55%,#fff0 59%) 0 0/300% 100% no-repeat;background-position:150% 0;animation:tfxSweep 4.2s cubic-bezier(.5,0,.4,1) 1.1s infinite} .tfx-logo-flash{background:#fff;opacity:0} @keyframes tfxSweep{0%{background-position:150% 0}26%,100%{background-position:-50% 0}} /* 4方向に光る星 */ .tfx-star{width:calc(7cqw * var(--s,1));height:calc(7cqw * var(--s,1));margin:calc(-3.5cqw * var(--s,1)) 0 0 calc(-3.5cqw * var(--s,1)); background:radial-gradient(circle,#fff 0 6%,#fff8c0cc 12%,#ffd04a00 38%),linear-gradient(90deg,#fff0 0,#fffbe0 50%,#fff0 100%) center/100% 9% no-repeat,linear-gradient(0deg,#fff0 0,#fffbe0 50%,#fff0 100%) center/9% 100% no-repeat; mix-blend-mode:screen;opacity:0;transform:scale(.2) rotate(0deg);animation:tfxTwinkle 3.4s ease-in-out infinite} @keyframes tfxTwinkle{0%,62%,100%{opacity:0;transform:scale(.2) rotate(0deg)}74%{opacity:1;transform:scale(1) rotate(45deg)}86%{opacity:.15;transform:scale(.45) rotate(90deg)}} /* ゲートの光 */ .tfx-gate-glow{width:34%;height:16%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#e6b0ffaa,#a060ff55 45%,#7030ff00);mix-blend-mode:screen;animation:tfxPulse 3.2s ease-in-out infinite} .tfx-gate-rays{width:62%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%; background:repeating-conic-gradient(from 0deg,#f4d0ff70 0deg 4deg,#fff0 7deg 15deg,#ffe6a040 17deg 19deg,#fff0 21deg 30deg); -webkit-mask:radial-gradient(closest-side,#000 8%,#0008 40%,#0000 72%);mask:radial-gradient(closest-side,#000 8%,#0008 40%,#0000 72%); mix-blend-mode:screen;opacity:.9;animation:tfxSpin 30s linear infinite} @keyframes tfxPulse{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}} @keyframes tfxSpin{to{transform:translate(-50%,-50%) rotate(360deg)}} /* ヘッドランプのきらり */ .tfx-lamp{width:24cqw;height:24cqw;transform:translate(-50%,-50%); background:radial-gradient(circle,#fffbe8 0 5%,#fff2a0aa 14%,#ffd04a00 42%),linear-gradient(90deg,#fff0,#fff6d0d0 50%,#fff0) center/100% 4% no-repeat,linear-gradient(0deg,#fff0,#fff6d099 50%,#fff0) center/3% 60% no-repeat; mix-blend-mode:screen;animation:tfxLamp 2.8s ease-in-out infinite} @keyframes tfxLamp{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.75) rotate(0deg)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(8deg)}} /* 光の粒のキャンバス（ボタンの操作は通す） */ .tfx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3} #screen-home .home-content{z-index:2} /* ボタン：光の筋と鼓動 */ #screen-home .start-button,#screen-home .continue-button,#screen-home .chapter-button{overflow:hidden;isolation:isolate} .tfx-btn-shine{position:absolute;top:-20%;bottom:-20%;left:0;width:30%;pointer-events:none;z-index:1;transform:translateX(-160%) skewX(-22deg); background:linear-gradient(90deg,#fff0,#ffffffb0 45%,#fff 50%,#ffffffb0 55%,#fff0);mix-blend-mode:soft-light;animation:tfxBtnSweep 3s ease-in-out infinite} .tfx-btn-shine.is-start{mix-blend-mode:normal;opacity:.75;background:linear-gradient(90deg,#fff0,#fffbe099 40%,#fffffff0 50%,#fffbe099 60%,#fff0)} .tfx-btn-shine.is-continue{animation-duration:3.8s;animation-delay:1.1s;mix-blend-mode:normal;opacity:.45} .tfx-btn-shine.is-chapter{animation-duration:5.2s;animation-delay:2.2s;mix-blend-mode:normal;opacity:.3} @keyframes tfxBtnSweep{0%{transform:translateX(-160%) skewX(-22deg)}45%,100%{transform:translateX(420%) skewX(-22deg)}} #screen-home .start-button{animation:tfxStartBeat 1.6s ease-in-out infinite} @keyframes tfxStartBeat{0%,100%{scale:1;box-shadow:0 0 0 .45cqw #8a4a0a,inset 0 -1cqw 1.4cqw #e0700a80,0 1.2cqw 0 #a8520a,0 1.8cqw 2.6cqw #000b,0 0 4.6cqw #ffc84a66} 50%{scale:1.025;box-shadow:0 0 0 .45cqw #8a4a0a,inset 0 -1cqw 1.4cqw #e0700a80,0 1.2cqw 0 #a8520a,0 1.8cqw 2.6cqw #000b,0 0 7.5cqw #ffd85ad0}} #screen-home .continue-button .ct-ico{animation:tfxSpinBack 3.8s ease-in-out infinite} @keyframes tfxSpinBack{0%,70%{transform:rotate(0)}85%{transform:rotate(-360deg)}100%{transform:rotate(-360deg)}} #screen-home .chapter-button .chapter-tag{animation:tfxTag 2.4s ease-in-out infinite} @keyframes tfxTag{0%,100%{scale:1}8%{scale:1.16}16%{scale:.96}24%{scale:1.05}32%{scale:1}} #screen-home .chapter-button .ch-icon{animation:tfxGem 2.6s ease-in-out infinite} @keyframes tfxGem{0%,100%{filter:drop-shadow(0 0 .6cqw #7ad8ff88) brightness(1)}50%{filter:drop-shadow(0 0 2.6cqw #9ae4ffee) brightness(1.18)}} #screen-home .chapter-button .ch-star{display:inline-block;animation:tfxStarSpin 4s ease-in-out infinite} @keyframes tfxStarSpin{0%,75%,100%{transform:rotate(0) scale(1)}85%{transform:rotate(72deg) scale(1.3)}} /* 登場演出：白い光 → ロゴがきらっ → ボタンが順に飛び出す */ #screen-home.tfx-intro::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at 50% 22%,#fff 0,#fff8d0 30%,#ffe08a00 75%);animation:tfxFlash .9s ease-out both} @keyframes tfxFlash{from{opacity:.95}to{opacity:0}} #screen-home.tfx-intro .tfx-logo-flash{animation:tfxLogoFlash 1.3s ease-out .35s both} @keyframes tfxLogoFlash{0%{opacity:0}25%{opacity:.9}100%{opacity:0}} #screen-home.tfx-intro .home-bottom>*{animation:tfxRise .6s cubic-bezier(.2,1.5,.4,1) backwards} #screen-home.tfx-intro .home-bottom>:nth-child(1){animation-delay:.25s} #screen-home.tfx-intro .home-bottom>:nth-child(2){animation-delay:.33s} #screen-home.tfx-intro .home-bottom>:nth-child(3){animation:tfxRise .6s cubic-bezier(.2,1.5,.4,1) .41s backwards,tfxStartBeat 1.6s ease-in-out 1.1s infinite} #screen-home.tfx-intro .home-bottom>:nth-child(4){animation-delay:.49s} #screen-home.tfx-intro .home-bottom>:nth-child(5){animation-delay:.57s} #screen-home.tfx-intro .home-bottom>:nth-child(6){animation-delay:.65s} @keyframes tfxRise{from{opacity:0;translate:0 8cqw;scale:.9}} /* 動きを減らす設定（ゲームの設定またはOSの設定）では止める */ #screen-home.tfx-calm .tfx,#screen-home.tfx-calm .tfx-canvas{display:none} #screen-home.tfx-calm *,#screen-home.tfx-calm{animation:none!important} @media (prefers-reduced-motion:reduce){#screen-home .tfx,#screen-home .tfx-canvas{display:none}#screen-home,#screen-home *{animation:none!important}} /* ===== v16：ショップ・結果・プレイ中のエフェクト（src/screenfx.mjs） ===== */ .sfx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .sfx-front{z-index:30} .sfx-ui{z-index:0} .sfx-stars{position:absolute;inset:0;pointer-events:none} .sfx-stars.off{display:none} #screen-result .sfx-stars{z-index:1} .sfx-star{position:absolute;width:calc(7cqw * var(--s,1));height:calc(7cqw * var(--s,1));margin:calc(-3.5cqw * var(--s,1)) 0 0 calc(-3.5cqw * var(--s,1)); background:radial-gradient(circle,#fff 0 6%,#fff8c0cc 12%,#ffd04a00 38%),linear-gradient(90deg,#fff0 0,#fffbe0 50%,#fff0 100%) center/100% 9% no-repeat,linear-gradient(0deg,#fff0 0,#fffbe0 50%,#fff0 100%) center/9% 100% no-repeat; mix-blend-mode:screen;opacity:0;animation:tfxTwinkle 3.4s ease-in-out infinite} .is-battle .sfx-star{animation-duration:4.2s} /* 光の筋（内側の層で切り抜く） */ .sfx-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2} .sfx-shine{position:absolute;top:-20%;bottom:-20%;left:0;width:28%;transform:translateX(-170%) skewX(-22deg); background:linear-gradient(90deg,#fff0,#fffbe080 40%,#ffffffe0 50%,#fffbe080 60%,#fff0);opacity:.6;animation:sfxSweep 3.6s ease-in-out infinite} .sfx-shine.is-gold{opacity:.8;animation-duration:2.8s} .sfx-shine.is-soft{opacity:.32;animation-duration:4.4s;animation-delay:1.2s} .sfx-shine.is-plank{opacity:.55;width:22%;animation-duration:4.2s;animation-delay:.6s} .sfx-shine.is-card{opacity:.3;width:22%;animation-duration:5.6s;animation-delay:calc(var(--i,0) * .45s + 1s)} .sfx-shine.is-tip{opacity:.5;animation:sfxSweepOnce 1.1s ease-out .35s both} @keyframes sfxSweep{0%{transform:translateX(-170%) skewX(-22deg)}42%,100%{transform:translateX(470%) skewX(-22deg)}} @keyframes sfxSweepOnce{from{transform:translateX(-170%) skewX(-22deg)}to{transform:translateX(470%) skewX(-22deg)}} @keyframes sfxBeat{0%,100%{scale:1;filter:brightness(1)}50%{scale:1.03;filter:brightness(1.08) drop-shadow(0 0 2.4cqw #ffd85aa0)}} @keyframes sfxBob{0%,100%{translate:0 0}50%{translate:0 -1.2cqw}} @keyframes sfxFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -.8cqw;rotate:-1.5deg}} @keyframes sfxDrop{0%{opacity:0;translate:0 -14cqw;scale:1.15}60%{opacity:1;translate:0 1.2cqw;scale:.98}80%{translate:0 -.4cqw}100%{translate:0 0;scale:1}} @keyframes sfxStamp{0%{opacity:0;scale:2.4;rotate:-8deg}55%{opacity:1;scale:.92;rotate:2deg}75%{scale:1.05}100%{scale:1;rotate:0deg}} @keyframes sfxPopIn{0%{opacity:0;scale:.3;rotate:-12deg}60%{opacity:1;scale:1.1;rotate:4deg}80%{scale:.97;rotate:-1deg}100%{scale:1;rotate:0deg}} @keyframes sfxRise{from{opacity:0;translate:0 9cqw;scale:.92}} @keyframes sfxCardIn{0%{opacity:0;translate:0 10cqw;scale:.7;rotate:-4deg}65%{opacity:1;translate:0 -1cqw;scale:1.04;rotate:1deg}100%{translate:0 0;scale:1;rotate:0deg}} @keyframes sfxUnfurl{from{opacity:0;scale:.2 1}70%{opacity:1;scale:1.03 1}} @keyframes sfxFlash{from{opacity:.85}to{opacity:0}} @keyframes sfxBump{0%{scale:1}35%{scale:1.4;color:#fff6b0;text-shadow:0 0 3cqw #ffd85a}100%{scale:1}} @keyframes sfxSlam{0%{opacity:0;scale:2.6}45%{opacity:1;scale:.9}62%{scale:1.08}78%{scale:.98}100%{scale:1}} @keyframes sfxShake{0%,100%{translate:0 0}20%{translate:-1.2cqw .6cqw}40%{translate:1cqw -.6cqw}60%{translate:-.6cqw .4cqw}80%{translate:.4cqw 0}} @keyframes sfxGlowPulse{0%,100%{filter:drop-shadow(0 0 0 #ffd85a00)}50%{filter:drop-shadow(0 0 2cqw #ffd85acc) brightness(1.15)}} /* --- 強化ショップ --- */ #screen-shop .sfx-stars{z-index:1} #screen-shop .shop-advisor{animation:sfxBob 2.4s ease-in-out infinite} #screen-shop .card-art{animation:sfxFloat 3s ease-in-out infinite} #screen-shop .shop-card:nth-child(2) .card-art{animation-delay:-.7s} #screen-shop .shop-card:nth-child(3) .card-art{animation-delay:-1.4s} #screen-shop .shop-card:nth-child(4) .card-art{animation-delay:-2.1s} #screen-shop #next-wave-button{animation:sfxBeat 1.6s ease-in-out infinite} #shop-ore{display:inline-block} #shop-ore.sfx-bump{animation:sfxBump .5s ease-out} #screen-shop.sfx-intro::after{content:'';position:absolute;inset:0;z-index:29;pointer-events:none;background:radial-gradient(circle at 50% 14%,#fff 0,#fff3c8 25%,#ffe08a00 70%);animation:sfxFlash .8s ease-out both} #screen-shop.sfx-intro h2{animation:sfxDrop .8s cubic-bezier(.3,1.3,.5,1) .1s both} #screen-shop.sfx-intro .eyebrow{animation:sfxStamp .6s cubic-bezier(.3,1.4,.5,1) .55s both} #screen-shop.sfx-intro .shop-advisor{animation:sfxPopIn .7s cubic-bezier(.3,1.4,.5,1) .3s both,sfxBob 2.4s ease-in-out 1s infinite} #screen-shop.sfx-intro .ore-wallet,#screen-shop.sfx-intro .shop-balls{animation:sfxRise .5s cubic-bezier(.2,1.4,.4,1) .45s both} #screen-shop.sfx-intro .next-wave-wrap{animation:sfxUnfurl .6s cubic-bezier(.2,1.3,.4,1) .55s both} #screen-shop.sfx-intro .shop-card{animation:sfxCardIn .65s cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(.7s + var(--i,0) * .1s)} #screen-shop.sfx-intro .shop-footer>*{animation:sfxRise .55s cubic-bezier(.2,1.4,.4,1) 1.1s both} /* --- 結果画面 --- */ .sfx-rays{position:absolute;left:50%;top:31%;width:120cqw;height:120cqw;margin:-60cqw 0 0 -60cqw;pointer-events:none;border-radius:50%; background:repeating-conic-gradient(from 0deg,#fff2b8a0 0deg 6deg,#fff0 9deg 16deg,#f0d8ff70 18deg 21deg,#fff0 24deg 30deg); -webkit-mask:radial-gradient(closest-side,#000 10%,#0009 40%,#0000 75%);mask:radial-gradient(closest-side,#000 10%,#0009 40%,#0000 75%); mix-blend-mode:screen;opacity:1;animation:tfxSpin 28s linear infinite} .sfx-rays-glow{position:absolute;inset:28%;border-radius:50%;background:radial-gradient(closest-side,#fff4c0b0,#ffd85a40 50%,#ffd85a00);animation:sfxRaysPulse 2.6s ease-in-out infinite} @keyframes sfxRaysPulse{0%,100%{opacity:.5;scale:.9}50%{opacity:1;scale:1.1}} #screen-result:not(.won) .sfx-rays{opacity:.35;filter:hue-rotate(60deg) saturate(.6)} #screen-result .result-mog{animation:sfxBob 2.6s ease-in-out infinite} #screen-result #retry-button,#screen-result #next-stage-button{animation:sfxBeat 1.6s ease-in-out infinite} #screen-result.won #result-record{animation:sfxGlowPulse 1.8s ease-in-out infinite} #screen-result .result-stats>div>i{animation:sfxFloat 3s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.8s)} #screen-result.sfx-intro::after{content:'';position:absolute;inset:0;z-index:29;pointer-events:none;background:radial-gradient(circle at 50% 30%,#fff 0,#fff3c8 30%,#ffe08a00 75%);animation:sfxFlash 1s ease-out both} #screen-result.sfx-intro .rs-head{animation:sfxDrop .85s cubic-bezier(.3,1.3,.5,1) .15s both} #screen-result.sfx-intro .result-heading{animation:sfxRise .5s ease-out .55s both} #screen-result.sfx-intro .result-mog{animation:sfxPopIn .8s cubic-bezier(.3,1.4,.5,1) .45s both,sfxBob 2.6s ease-in-out 1.3s infinite} #screen-result.sfx-intro .sfx-rays{animation:sfxRaysIn 1s ease-out .4s both,tfxSpin 28s linear infinite} @keyframes sfxRaysIn{from{opacity:0;scale:.3}} #screen-result.sfx-intro .result-depth{animation:sfxSlam .7s cubic-bezier(.3,1.2,.5,1) .85s both} #screen-result.sfx-intro.won .result-depth{animation:sfxSlam .7s cubic-bezier(.3,1.2,.5,1) .85s both,sfxShake .35s linear 1.15s} #screen-result.sfx-intro .result-stats>div{animation:sfxCardIn .6s cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(1.25s + var(--i,0) * .12s)} #screen-result.sfx-intro .result-actions>*{animation:sfxRise .55s cubic-bezier(.2,1.4,.4,1) 1.6s both} #screen-result.sfx-intro #retry-button,#screen-result.sfx-intro #next-stage-button{animation:sfxRise .55s cubic-bezier(.2,1.4,.4,1) 1.6s both,sfxBeat 1.6s ease-in-out 2.2s infinite} #screen-shop.sfx-intro #next-wave-button{animation:sfxRise .55s cubic-bezier(.2,1.4,.4,1) 1.1s both,sfxBeat 1.6s ease-in-out 1.7s infinite} /* --- プレイ中（操作の邪魔をしない控えめなもの） --- */ #game-ui .sfx-stars{z-index:0} .coach-tip.sfx-pop{animation:sfxTipPop .55s cubic-bezier(.3,1.5,.5,1) both} @keyframes sfxTipPop{0%{scale:.6;opacity:0}60%{scale:1.05;opacity:1}100%{scale:1}} .coach-tip.sfx-pop .coach-mog{animation:sfxPopIn .6s cubic-bezier(.3,1.4,.5,1) .1s both} .coach-tip .sfx-shine{animation-play-state:paused} .coach-tip.sfx-pop .sfx-shine{animation-play-state:running} .sfx-sweep{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(105deg,#fff0 35%,#fff6d040 47%,#ffffff70 50%,#fff6d040 53%,#fff0 65%) 0 0/300% 100% no-repeat} #game-ui.sfx-enter .sfx-sweep{animation:sfxScreenSweep 1s ease-out both} @keyframes sfxScreenSweep{0%{opacity:1;background-position:150% 0}100%{opacity:1;background-position:-50% 0}} /* 動きを減らす設定では止める */ #app.sfx-calm .sfx-canvas,#app.sfx-calm .sfx-stars,#app.sfx-calm .sfx-clip,#app.sfx-calm .sfx-rays,#app.sfx-calm .sfx-sweep{display:none} #app.sfx-calm #screen-shop *,#app.sfx-calm #screen-result *,#app.sfx-calm #game-ui *,#app.sfx-calm #screen-shop::after,#app.sfx-calm #screen-result::after{animation:none!important} @media (prefers-reduced-motion:reduce){.sfx-canvas,.sfx-stars,.sfx-clip,.sfx-rays,.sfx-sweep{display:none}#screen-shop *,#screen-result *,#game-ui *{animation:none!important}} /* ===== v17：一時停止画面（参考画像そのもの assets/title/pause-panel.webp。ボタンは絵の位置に透明で重ねる） ===== */ #modal[data-type=pause]{padding:0;background:#0a0420c8} #modal[data-type=pause] .modal-inner{position:relative;width:94cqw;max-width:none;max-height:none;aspect-ratio:1044/1324;height:auto;padding:0;border:0;border-radius:0;box-shadow:none; background:url('assets/title/pause-panel.webp') center/100% 100% no-repeat;filter:drop-shadow(0 2cqw 4cqw #000c)} #modal[data-type=pause] .modal-header{position:static;padding:0;border:0} #modal[data-type=pause] .modal-header h2,#modal[data-type=pause] .modal-body>p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #modal[data-type=pause] .modal-body{position:absolute;inset:0;padding:0;overflow:visible} #modal[data-type=pause] .home-secondary{display:contents} #modal[data-type=pause] #modal-close,#modal[data-type=pause] .modal-body button{position:absolute!important;margin:0!important;min-height:0;min-width:0;padding:0;border:0;background:transparent;box-shadow:none;color:transparent;text-shadow:none;font-size:0;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:99px;transition:filter .12s,scale .12s} #modal[data-type=pause] #modal-close{left:81.42%;top:22.05%;width:11.02%;height:7.93%;border-radius:2.4cqw;z-index:3} #modal[data-type=pause] #resume-button{left:9.77%;top:44.41%;width:79.79%!important;height:11.25%} #modal[data-type=pause] #pause-guide{left:5.56%;top:57.93%;width:43.49%!important;height:8.84%} #modal[data-type=pause] #pause-settings{left:50.96%;top:57.93%;width:43.49%!important;height:8.84%} #modal[data-type=pause] #pause-save{left:5.27%;top:68.88%;width:89.37%!important;height:9.06%} #modal[data-type=pause] #pause-home{left:5.27%;top:79.83%;width:89.37%!important;height:8.84%} /* 押したとき：絵のボタンを少し暗く沈める */ #modal[data-type=pause] .modal-body button::before,#modal[data-type=pause] #modal-close::before{content:'';position:absolute;inset:6% 1%;border-radius:inherit;background:#000;opacity:0;transition:opacity .1s} #modal[data-type=pause] .modal-body button:active::before,#modal[data-type=pause] #modal-close:active::before{opacity:.22} #modal[data-type=pause] .modal-body button:active{scale:.97} #modal[data-type=pause] button:focus-visible{outline:.6cqw solid #fff6b0;outline-offset:.4cqw} #modal[data-type=pause] .pause-slot{position:absolute;right:4%;top:-34%;padding:.5cqw 2cqw;border:.35cqw solid #fff3b0;border-radius:99px;background:linear-gradient(#ffe46a,#f0a012);color:#3a1a06;font-size:2.7cqw;font-weight:900;font-style:normal;white-space:nowrap;box-shadow:0 .4cqw .8cqw #0008} /* セーブ枠の一覧も同じ金と紫の枠に */ #modal[data-type=slots-save] .modal-inner,#modal[data-type=slots-load] .modal-inner{border:.7cqw solid #f6c860;border-radius:5cqw;background:radial-gradient(ellipse 80% 30% at 50% 0,#8a3ae055,#0000),linear-gradient(#3a1680,#24105a 55%,#180a40);box-shadow:0 0 0 .5cqw #6a3008,inset 0 0 0 .4cqw #ffffff14,0 0 5cqw #b060ff66,0 2cqw 4cqw #000c} #modal[data-type=slots-save] .modal-header h2,#modal[data-type=slots-load] .modal-header h2{color:#ffd84a;text-shadow:0 .4cqw 0 #6a2a06} /* 一時停止画面のエフェクト */ .pfx{display:none} #modal[data-type=pause] .pfx{display:block;position:absolute;inset:0;pointer-events:none;z-index:1} #modal[data-type=pause] .modal-body{z-index:2} .pfx-sheen{position:absolute;inset:0;-webkit-mask:url('assets/title/pause-panel.webp') center/100% 100% no-repeat;mask:url('assets/title/pause-panel.webp') center/100% 100% no-repeat; background:linear-gradient(112deg,#fff0 42%,#fff5 47%,#fffbe8c0 50%,#fff5 53%,#fff0 58%) 0 0/300% 100% no-repeat;background-position:150% 0;mix-blend-mode:soft-light;animation:tfxSweep 6s cubic-bezier(.5,0,.4,1) .5s infinite} .pfx-emblem{position:absolute;width:18cqw;height:18cqw;margin:-9cqw 0 0 -9cqw;border-radius:50%;background:radial-gradient(closest-side,#fff6c0d0,#ffd04a60 45%,#ffd04a00);mix-blend-mode:screen;animation:sfxRaysPulse 2.2s ease-in-out infinite} #modal[data-type=pause] .sfx-stars{z-index:1} #modal[data-type=pause] #resume-button{animation:pfxGlow 1.6s ease-in-out infinite} @keyframes pfxGlow{0%,100%{box-shadow:0 0 0 0 #ffd85a00}50%{box-shadow:0 0 3.4cqw .4cqw #ffd85ab0,inset 0 0 2cqw #fff6c060}} #modal[data-type=pause] .sfx-clip{inset:8% 2%} .pfx-canvas{display:none} #modal[data-type=pause] .pfx-canvas{display:block} /* 登場：パネルが上から弾んで現れ、ボタンが順に光る */ #modal.pfx-intro[data-type=pause]{animation:pfxFade .3s ease-out both} #modal.pfx-intro[data-type=pause] .modal-inner{animation:pfxIn .6s cubic-bezier(.25,1.45,.45,1) both} #modal.pfx-intro[data-type=pause] .modal-body button{animation:pfxBtn .5s ease-out both;animation-delay:calc(.35s + var(--i,0) * .07s)} #modal.pfx-intro[data-type=pause] #resume-button{animation:pfxBtn .5s ease-out .35s both,pfxGlow 1.6s ease-in-out .9s infinite} @keyframes pfxFade{from{opacity:0}} @keyframes pfxIn{0%{opacity:0;scale:.55;translate:0 -6cqw}60%{opacity:1;scale:1.04;translate:0 0}80%{scale:.985}100%{scale:1}} @keyframes pfxBtn{0%{box-shadow:0 0 0 0 #fff0}40%{box-shadow:0 0 3cqw .6cqw #fff6c0b0,inset 0 0 6cqw #ffffff70}100%{box-shadow:0 0 0 0 #fff0}} #app.sfx-calm .pfx,#app.sfx-calm .pfx-canvas{display:none!important} #app.sfx-calm #modal *,#app.sfx-calm #modal{animation:none!important} @media (prefers-reduced-motion:reduce){.pfx,.pfx-canvas{display:none!important}#modal,#modal *{animation:none!important}} /* ===== v18：ボタンを押したときのエフェクト（光の輪・ぱっと光る） ===== */ .sfx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,#fffbe8f0,#fff3b080 40%,#ffd85a30 62%,#ffd85a00 72%);mix-blend-mode:screen;scale:0;opacity:1;animation:sfxRipple .6s cubic-bezier(.2,.7,.3,1) forwards} @keyframes sfxRipple{to{scale:1;opacity:0}} .sfx-press{animation:sfxPress .4s ease-out!important} @keyframes sfxPress{0%{filter:brightness(1.6) drop-shadow(0 0 3cqw #fff6c0)}100%{filter:brightness(1)}} #modal[data-type=slots-save] .pfx-canvas,#modal[data-type=slots-load] .pfx-canvas{display:block} .slot-row{overflow:hidden} .pause-button{overflow:hidden} #app.sfx-calm .sfx-ripple{display:none} .sfx-tap{z-index:200} #app.sfx-calm .sfx-tap{display:none} /* ===== v20：新章「星核の光を取り戻せ！」画面（参考画像そのもの assets/title/chapter-bg.webp） ===== */ #modal[data-type=chapter]{padding:0;background:#12062e;backdrop-filter:none} #modal[data-type=chapter] .modal-inner{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none; background:url('assets/title/chapter-bg.webp') center/100% 100% no-repeat} #modal[data-type=chapter] .modal-header{position:static;padding:0;border:0} #modal[data-type=chapter] .modal-header h2,#modal[data-type=chapter] .chapter-lead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0} #modal[data-type=chapter] .modal-body{position:absolute;inset:0;padding:0;overflow:visible} #modal[data-type=chapter] #modal-close{position:absolute;left:85.55%;top:11.48%;width:9.56%;height:4.55%;min-width:0;min-height:0;padding:0;border:0;border-radius:2.4cqw;background:transparent;color:transparent;font-size:0;box-shadow:none;z-index:3} #modal[data-type=chapter] .stage-list{position:absolute;inset:0;display:block;margin:0} #modal[data-type=chapter] .stage-row{position:absolute;left:4.25%;width:91.9%;margin:0;padding:0;min-height:0;display:block;border:0;border-radius:5cqw;background:transparent;box-shadow:none;color:#fff;opacity:1;filter:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:scale .12s} #modal[data-type=chapter] .stage-row:nth-child(1){top:28.59%;height:11.6%} #modal[data-type=chapter] .stage-row:nth-child(2){top:41.15%;height:10.89%} #modal[data-type=chapter] .stage-row:nth-child(3){top:52.93%;height:10.83%} #modal[data-type=chapter] .stage-row:nth-child(4){top:64.77%;height:10.71%} #modal[data-type=chapter] .stage-row:nth-child(5){top:76.56%;height:10.89%} #modal[data-type=chapter] .stage-row:active{scale:.98} #modal[data-type=chapter] .stage-row::before{content:'';position:absolute;inset:3% .6%;border-radius:inherit;background:#000;opacity:0;transition:opacity .1s;pointer-events:none} #modal[data-type=chapter] .stage-row:active::before{opacity:.18} #modal[data-type=chapter] button:focus-visible{outline:.6cqw solid #fff6b0;outline-offset:.3cqw} /* 状態で変わる札（第N話の右） */ .ch-badge{position:absolute;left:41.85%;top:9.4%;display:flex;align-items:center;gap:1cqw;white-space:nowrap;font-weight:900;line-height:1;pointer-events:none} .ch-badge.is-open,.ch-badge.is-done{height:25%;padding:0 2.6cqw;border-radius:99px;font-size:3.2cqw;letter-spacing:.02em} .ch-badge.is-open{color:#fff6c8;text-shadow:0 .25cqw 0 #0b3a06;border:.4cqw solid #c8ff6a;background:linear-gradient(#2f9a1c,#17660c 60%,#0f4a08);box-shadow:0 0 1.6cqw #9cff5a90,inset 0 .3cqw 0 #ffffff40} .ch-badge.is-done{color:#4a2406;text-shadow:0 .2cqw 0 #fff4c0;border:.4cqw solid #fff3b0;background:linear-gradient(#ffe46a,#f5b31a 60%,#e08a0a);box-shadow:0 0 1.6cqw #ffd85a90,inset 0 .3cqw 0 #ffffff70} .ch-badge.is-done small{font-size:2.5cqw;margin-left:1.2cqw;color:#5a2a06} .stage-row:nth-child(1) .ch-badge{top:8.8%;height:24%} .ch-badge.is-lock{top:12.6%;height:19%;gap:1.4cqw;font-size:2.75cqw;color:#fff;font-weight:800;text-shadow:0 .25cqw .3cqw #1a0636} .ch-badge.is-lock i{width:3.3cqw;height:3.9cqw;position:relative;display:block} .ch-badge.is-lock i::before{content:'';position:absolute;left:18%;right:18%;top:0;height:55%;border:.6cqw solid #e8b02a;border-bottom:0;border-radius:2cqw 2cqw 0 0} .ch-badge.is-lock i::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60%;border-radius:.7cqw;background:radial-gradient(circle at 50% 45%,#7a4a06 0 14%,#0000 16%),linear-gradient(#ffd75a,#f0a514);box-shadow:inset 0 -.3cqw 0 #c07a08} /* 挑戦できる行：金色の光る縁取り（効果） */ #modal[data-type=chapter] .stage-row.ch-open::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 .5cqw #ffe27a,0 0 3cqw .6cqw #ffd85acc;animation:chGlow 1.6s ease-in-out infinite} @keyframes chGlow{0%,100%{opacity:.35}50%{opacity:1}} #modal[data-type=chapter] .stage-row.ch-shake{animation:chShake .4s linear} @keyframes chShake{0%,100%{translate:0}20%{translate:-1.6cqw}40%{translate:1.4cqw}60%{translate:-.9cqw}80%{translate:.5cqw}} /* 新章の画面のエフェクト */ .chx{display:none} #modal[data-type=chapter] .chx{display:block;position:absolute;inset:0;pointer-events:none;z-index:1} #modal[data-type=chapter] .modal-body{z-index:2} #modal[data-type=chapter] .sfx-stars{z-index:1} .chx-sheen{position:absolute;inset:0;background:linear-gradient(112deg,#fff0 44%,#fff4 48%,#fffbe8a0 50%,#fff4 52%,#fff0 56%) 0 0/300% 100% no-repeat;background-position:150% 0;mix-blend-mode:soft-light;animation:tfxSweep 7s cubic-bezier(.5,0,.4,1) 1s infinite} .chx-glow{position:absolute;width:40cqw;height:40cqw;margin:-20cqw 0 0 -20cqw;border-radius:50%;background:radial-gradient(closest-side,#e8f8ffc0,#8ad8ff50 45%,#8ad8ff00);mix-blend-mode:screen;animation:sfxRaysPulse 2.4s ease-in-out infinite} .chx-glow.is-small{width:16cqw;height:16cqw;margin:-8cqw 0 0 -8cqw;background:radial-gradient(closest-side,#fff6c0d0,#ffd04a60 45%,#ffd04a00)} #modal[data-type=chapter] .stage-row .sfx-clip{inset:2% .4%} #modal.chx-intro[data-type=chapter]{animation:pfxFade .35s ease-out both} #modal.chx-intro[data-type=chapter] .modal-inner{animation:chxIn .55s cubic-bezier(.2,1.2,.4,1) both} @keyframes chxIn{from{opacity:0;scale:1.08;filter:brightness(1.8)}} #modal.chx-intro[data-type=chapter] .stage-row{animation:chxRow .7s ease-out both;animation-delay:calc(.35s + var(--i,0) * .1s)} @keyframes chxRow{0%{box-shadow:0 0 0 0 #fff0}35%{box-shadow:0 0 4cqw .8cqw #fff6c0c0,inset 0 0 10cqw #ffffff70}100%{box-shadow:0 0 0 0 #fff0}} #modal.chx-intro[data-type=chapter] .ch-badge{animation:sfxStamp .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.6s + var(--i,0) * .1s)} #app.sfx-calm .chx{display:none!important} .ch-badge.is-lock{font-size:2.55cqw;font-weight:700;gap:1.2cqw} /* ===== v21：ゲーム設定画面（参考画像そのもの assets/title/settings-bg.webp。ON/OFFと音量だけDOM） ===== */ #modal[data-type=settings]{padding:0;background:#12062e;backdrop-filter:none} #modal[data-type=settings] .modal-inner{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none;background:url('assets/title/settings-bg.webp') center/100% 100% no-repeat} #modal[data-type=settings] .modal-header{position:static;padding:0;border:0} #modal[data-type=settings] .modal-header h2,#modal[data-type=settings] .settings-row strong,#modal[data-type=settings] .settings-row:not(.is-vol) small,#modal[data-type=settings] .settings-note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0} #modal[data-type=settings] .modal-body{position:absolute;inset:0;padding:0;overflow:visible} #modal[data-type=settings] .settings-row{display:contents} #modal[data-type=settings] .settings-row>div{display:contents} #modal[data-type=settings] #modal-close{position:absolute;left:83.1%;top:11.66%;width:9.56%;height:4.49%;min-width:0;min-height:0;padding:0;border:0;border-radius:2.4cqw;background:transparent;color:transparent;font-size:0;box-shadow:none;z-index:3} #modal[data-type=settings] .toggle{position:absolute;left:70.46%;width:21.79%;height:4.9%;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:99px;color:transparent;font-size:0;text-shadow:none;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent; background:url('assets/title/set-off.webp') center/100% 100% no-repeat;transition:scale .12s} #modal[data-type=settings] .toggle.on{background-image:url('assets/title/set-on.webp')} #modal[data-type=settings] .settings-row:nth-child(1) .toggle{top:24.88%} #modal[data-type=settings] .settings-row:nth-child(2) .toggle{top:34.09%} #modal[data-type=settings] .settings-row:nth-child(3) .toggle{top:42.46%} #modal[data-type=settings] .settings-row:nth-child(4) .toggle{top:50.9%} #modal[data-type=settings] .settings-row:nth-child(5) .toggle{top:59.15%} #modal[data-type=settings] .toggle:active{scale:.95} #modal[data-type=settings] .toggle.sfx-flip{animation:setFlip .35s cubic-bezier(.3,1.6,.5,1)} @keyframes setFlip{0%{scale:.8}60%{scale:1.08}100%{scale:1}} /* 音量 */ #modal[data-type=settings] .is-vol small{position:absolute;left:24.2%;width:13%;font-size:4.3cqw;font-weight:900;color:#f6ecff;letter-spacing:.02em;text-shadow:0 .3cqw 0 #2a0a50,0 0 .6cqw #2a0a50;line-height:1;display:block} #modal[data-type=settings] .settings-row:nth-child(6) small{top:70.0%} #modal[data-type=settings] .settings-row:nth-child(7) small{top:78.38%} #modal[data-type=settings] .volume{position:absolute;left:49.73%;width:41.87%;height:3.35%;margin:0;padding:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;touch-action:none} #modal[data-type=settings] .settings-row:nth-child(6) .volume{top:68.18%} #modal[data-type=settings] .settings-row:nth-child(7) .volume{top:76.56%} #modal[data-type=settings] .volume::-webkit-slider-runnable-track{height:3cqw;border-radius:99px;border:.4cqw solid #2a1050;box-shadow:inset 0 .3cqw .5cqw #0008,0 0 0 .25cqw #5a3a8a;background:linear-gradient(90deg,#ffd23a,#ffb21a var(--v,50%),#1c0a3c var(--v,50%))} #modal[data-type=settings] .volume::-moz-range-track{height:3cqw;border-radius:99px;border:.4cqw solid #2a1050;background:linear-gradient(90deg,#ffd23a,#ffb21a var(--v,50%),#1c0a3c var(--v,50%))} #modal[data-type=settings] .volume::-webkit-slider-thumb{-webkit-appearance:none;width:5.2cqw;height:5.2cqw;margin-top:-1.5cqw;border-radius:50%;border:.5cqw solid #e8a020;background:radial-gradient(circle at 40% 35%,#fff,#f2ecf8 60%,#d8cce6);box-shadow:0 .4cqw .8cqw #0009} #modal[data-type=settings] .volume::-moz-range-thumb{width:5.2cqw;height:5.2cqw;border-radius:50%;border:.5cqw solid #e8a020;background:radial-gradient(circle at 40% 35%,#fff,#f2ecf8 60%,#d8cce6)} #modal[data-type=settings] .volume:active::-webkit-slider-thumb{scale:1.15;box-shadow:0 0 2cqw #ffd85a} /* 設定画面のエフェクト */ .stx{display:none} #modal[data-type=settings] .stx{display:block;position:absolute;inset:0;pointer-events:none;z-index:1} #modal[data-type=settings] .modal-body{z-index:2} #modal[data-type=settings] .sfx-stars{z-index:1} .stx-glow{position:absolute;width:20cqw;height:20cqw;margin:-10cqw 0 0 -10cqw;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(closest-side,#fff0c0c0,#ffb84a60 45%,#ffb84a00);animation:stxFlicker 2.2s ease-in-out infinite} .stx-glow.is-tunnel{width:26cqw;height:26cqw;margin:-13cqw 0 0 -13cqw;animation-duration:3s} .stx-glow.is-gem{width:24cqw;height:24cqw;margin:-12cqw 0 0 -12cqw;background:radial-gradient(closest-side,#e8f8ffc0,#8ad8ff50 45%,#8ad8ff00);animation:sfxRaysPulse 2.4s ease-in-out infinite} @keyframes stxFlicker{0%,100%{opacity:.55;scale:.95}30%{opacity:.9;scale:1.05}55%{opacity:.65}75%{opacity:1;scale:1.08}} #modal[data-type=settings] .toggle .sfx-clip{inset:12% 3%} #modal.stx-intro[data-type=settings]{animation:pfxFade .35s ease-out both} #modal.stx-intro[data-type=settings] .modal-inner{animation:chxIn .55s cubic-bezier(.2,1.2,.4,1) both} #modal.stx-intro[data-type=settings] .toggle{animation:sfxStamp .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.35s + var(--i,0) * .08s)} #modal.stx-intro[data-type=settings] .volume,#modal.stx-intro[data-type=settings] .is-vol small{animation:sfxRise .5s cubic-bezier(.2,1.4,.4,1) .8s both} #app.sfx-calm .stx{display:none!important} /* ===== v22：タイトルの「あと○mで新しい出発特典が解放！」帯を消し、空いた分スタート・続きからを大きく ===== */ #screen-home .milestone-banner{display:none!important} #screen-home .start-button{top:66.6%;height:16cqw;font-size:10.6cqw;gap:3.6cqw;border-width:.8cqw} #screen-home .start-button span{font-size:9.4cqw} #screen-home .continue-button{top:76.8%;height:13.6cqw;font-size:9cqw;gap:3.4cqw;left:6.2cqw;right:6.4cqw} #screen-home .continue-button .ct-ico{width:8.4cqw;height:8.4cqw} /* ===== v23：「続きから」画面（参考画像そのもの assets/title/load-bg.webp。モグタマは切り抜いて動かす） ===== */ #modal[data-type=slots-load]{padding:0;background:#12062e;backdrop-filter:none} #modal[data-type=slots-load] .modal-inner{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none;background:url('assets/title/load-bg.webp') center/100% 100% no-repeat} #modal[data-type=slots-load] .modal-header{position:static;padding:0;border:0} #modal[data-type=slots-load] .modal-header h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0} #modal[data-type=slots-load] .modal-body{position:absolute;inset:0;padding:0;overflow:visible} #modal[data-type=slots-load] #modal-close{position:absolute;left:82.89%;top:12.86%;width:10.4%;height:4.96%;min-width:0;min-height:0;padding:0;border:0;border-radius:2.4cqw;background:transparent;color:transparent;font-size:0;box-shadow:none;z-index:3} #modal[data-type=slots-load] .slot-list{position:absolute;inset:0;display:block;margin:0} #modal[data-type=slots-load] .slot-wrap{position:absolute;left:6.38%;width:87.14%} #modal[data-type=slots-load] .slot-wrap:nth-child(1){top:27.21%;height:11.06%} #modal[data-type=slots-load] .slot-wrap:nth-child(2){top:40.19%;height:11.12%} #modal[data-type=slots-load] .slot-wrap:nth-child(3){top:53.11%;height:11.18%} #modal[data-type=slots-load] .slot-row{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:4.4cqw;background:transparent;box-shadow:none;opacity:1;display:block;overflow:hidden;cursor:pointer;transition:scale .12s} #modal[data-type=slots-load] .slot-row:disabled{opacity:1;cursor:default} #modal[data-type=slots-load] .slot-row.confirm{border:0;box-shadow:0 0 0 .6cqw #ff8a7a,0 0 3cqw #ff6a5a} #modal[data-type=slots-load] .slot-row:not(:disabled):active{scale:.98} #modal[data-type=slots-load] .slot-no{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} #modal[data-type=slots-load] .slot-body{position:absolute;left:25.6%;right:4%;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:.8cqw;text-align:left} #modal[data-type=slots-load] .slot-body b{font-size:4.9cqw;font-weight:900;color:#fff4f8;letter-spacing:.04em;text-shadow:0 .35cqw 0 #3a0c6a,0 0 .8cqw #3a0c6a;white-space:nowrap} #modal[data-type=slots-load] .slot-body small{font-size:3.1cqw;font-weight:800;color:#ffe6a8;letter-spacing:.03em;text-shadow:0 .25cqw 0 #2a0650} #modal[data-type=slots-load] .slot-row:not(:disabled) .slot-body{right:16%;gap:.6cqw} #modal[data-type=slots-load] .slot-row:not(:disabled) .slot-body b{font-size:3.7cqw;color:#ffd84a;text-shadow:0 .3cqw 0 #5a2206,0 0 .8cqw #2a0650} #modal[data-type=slots-load] .slot-row:not(:disabled) .slot-body small{font-size:2.6cqw;color:#fff4e0;white-space:normal;line-height:1.35} #modal[data-type=slots-load] .slot-body em{font-size:2.4cqw;color:#d8c8ff;font-style:normal;text-shadow:0 .2cqw 0 #1a0636} #modal[data-type=slots-load] .slot-del{position:absolute;right:3.4%;top:50%;translate:0 -50%;z-index:3;padding:1.6cqw 3cqw;border:.45cqw solid #ffd0e0;border-radius:99px;background:linear-gradient(#5a1a7a,#3a0c5a);font-size:3cqw;color:#fff;box-shadow:0 .4cqw .8cqw #0009} #modal[data-type=slots-load] .slot-del.confirm{background:linear-gradient(#e0303a,#a0101a);border-color:#ffd0c8} #modal[data-type=slots-load] .slot-note{position:absolute;left:24.65%;right:6%;top:0;bottom:0;margin:0;opacity:1;font-size:2.95cqw;line-height:1.45;color:#f2eaff;font-weight:700;text-shadow:0 .25cqw 0 #1a0636} #modal[data-type=slots-load] .slot-note br{display:none} #modal[data-type=slots-load] .slot-note .n1{position:absolute;left:0;right:0;top:69.1%} #modal[data-type=slots-load] .slot-note .n2{position:absolute;left:0;right:0;top:75.3%} /* 「続きから」画面のエフェクト */ .lfx{display:none} #modal[data-type=slots-load] .lfx{display:block;position:absolute;inset:0;pointer-events:none;z-index:1} #modal[data-type=slots-load] .modal-body,#modal[data-type=slots-load] .slot-list,#modal[data-type=slots-load] .slot-note{z-index:2;pointer-events:none} #modal[data-type=slots-load] .slot-row,#modal[data-type=slots-load] .slot-del{pointer-events:auto} #modal[data-type=slots-load] .sfx-stars{z-index:1} .lfx-hero{position:absolute;left:9.35%;top:11.24%;width:30.71%;height:12.86%;pointer-events:auto;cursor:pointer;transform-origin:50% 100%;-webkit-user-drag:none;user-select:none; animation:lfxBreathe 1.8s ease-in-out infinite,lfxWiggle 5.2s ease-in-out 1.5s infinite} @keyframes lfxBreathe{0%,100%{scale:1 1}50%{scale:1.025 .975}} @keyframes lfxWiggle{0%,78%,100%{rotate:0deg;translate:0 0}82%{rotate:-5deg;translate:0 -1.4cqw}86%{rotate:4deg;translate:0 -.6cqw}90%{rotate:-2deg;translate:0 -1cqw}94%{rotate:1deg;translate:0 0}} .lfx-hero.is-hop{animation:lfxHop .65s cubic-bezier(.3,1.5,.5,1)!important} @keyframes lfxHop{0%{scale:1.08 .9;translate:0 0}30%{scale:.94 1.08;translate:0 -4cqw;rotate:-6deg}60%{scale:1.06 .94;translate:0 0;rotate:3deg}80%{scale:.98 1.02;rotate:-1deg}100%{scale:1;rotate:0deg}} .lfx-glow{position:absolute;width:24cqw;height:24cqw;margin:-12cqw 0 0 -12cqw;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(closest-side,#e8f8ffc0,#a88aff50 45%,#a88aff00);animation:sfxRaysPulse 2.4s ease-in-out infinite} .lfx-glow.is-sm{width:16cqw;height:16cqw;margin:-8cqw 0 0 -8cqw;animation-delay:-1s} .lfx-glow.is-warm{width:30cqw;height:14cqw;margin:-7cqw 0 0 -15cqw;background:radial-gradient(closest-side,#fff0c0c0,#ffb84a60 50%,#ffb84a00);animation:stxFlicker 2.2s ease-in-out infinite} .lfx-glow.is-bang{width:12cqw;height:12cqw;margin:-6cqw 0 0 -6cqw;background:radial-gradient(closest-side,#fff8c0f0,#ffd84a80 45%,#ffd84a00);animation:lfxBang 1.2s ease-in-out infinite} @keyframes lfxBang{0%,100%{opacity:.2;scale:.8}20%{opacity:1;scale:1.15}40%{opacity:.4;scale:.9}} #modal.lfx-intro[data-type=slots-load]{animation:pfxFade .35s ease-out both} #modal.lfx-intro[data-type=slots-load] .modal-inner{animation:chxIn .55s cubic-bezier(.2,1.2,.4,1) both} #modal.lfx-intro[data-type=slots-load] .lfx-hero{animation:lfxPopUp .8s cubic-bezier(.3,1.6,.5,1) .3s both,lfxBreathe 1.8s ease-in-out 1.1s infinite,lfxWiggle 5.2s ease-in-out 2.5s infinite} @keyframes lfxPopUp{0%{opacity:0;scale:.3 .3;translate:0 3cqw}50%{opacity:1;scale:1.12 .9}70%{scale:.95 1.08;translate:0 -1.6cqw}100%{scale:1;translate:0 0}} #modal.lfx-intro[data-type=slots-load] .slot-row{animation:chxRow .7s ease-out both;animation-delay:calc(.45s + var(--i,0) * .12s)} #modal.lfx-intro[data-type=slots-load] .slot-body{animation:sfxRise .5s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.55s + var(--i,0) * .12s)} #modal.lfx-intro[data-type=slots-load] .slot-note{animation:sfxRise .5s ease-out 1s both} #modal[data-type=slots-load] .slot-row .sfx-clip{inset:2% .5%} #app.sfx-calm .lfx-glow,#app.sfx-calm .lfx .sfx-stars{display:none!important} #modal[data-type=slots-load] .slot-row:not(:disabled) .slot-body{right:19%} #modal[data-type=slots-load] .slot-row:not(:disabled) .slot-body small{font-size:2.45cqw} #modal[data-type=slots-load] .slot-note{font-size:3.1cqw;right:5%} #modal[data-type=slots-load] .slot-row:not(:disabled) .slot-body{gap:.4cqw} #modal[data-type=slots-load] .slot-row:not(:disabled) .slot-body b{font-size:3.4cqw;white-space:normal;line-height:1.18} #modal[data-type=slots-load] .slot-row:not(:disabled) .slot-body small{line-height:1.3} #modal[data-type=slots-load] .slot-row:not(:disabled) .slot-body em{font-size:2.3cqw} /* ===== v24：「セーブする（3枠）」画面（参考画像そのもの assets/title/save-bg.webp。モグタマは切り抜いて動かす。説明文は絵のまま） ===== */ #modal[data-type=slots-save]{padding:0;background:#12062e;backdrop-filter:none} #modal[data-type=slots-save] .modal-inner{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none;background:url('assets/title/save-bg.webp') center/100% 100% no-repeat} #modal[data-type=slots-save] .modal-header{position:static;padding:0;border:0} #modal[data-type=slots-save] .modal-header h2,#modal[data-type=slots-save] .slot-note,#modal[data-type=slots-save] .slot-no{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0} #modal[data-type=slots-save] .modal-body{position:absolute;inset:0;padding:0;overflow:visible;z-index:2;pointer-events:none} #modal[data-type=slots-save] #modal-close{position:absolute;left:81.6%;top:22.31%;width:10%;height:4.96%;min-width:0;min-height:0;padding:0;border:0;border-radius:2.4cqw;background:transparent;color:transparent;font-size:0;box-shadow:none;z-index:3;transition:scale .12s} #modal[data-type=slots-save] #modal-close:active{scale:.92} #modal[data-type=slots-save] .slot-list{position:absolute;inset:0;display:block;margin:0;pointer-events:none} #modal[data-type=slots-save] .slot-wrap{position:absolute;left:7.97%;width:84.27%} #modal[data-type=slots-save] .slot-wrap:nth-child(1){top:31.70%;height:11.84%} #modal[data-type=slots-save] .slot-wrap:nth-child(2){top:44.98%;height:10.94%} #modal[data-type=slots-save] .slot-wrap:nth-child(3){top:57.12%;height:10.94%} #modal[data-type=slots-save] .slot-row{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:4.4cqw;background:transparent;box-shadow:none;opacity:1;display:block;overflow:hidden;cursor:pointer;pointer-events:auto;transition:scale .12s} #modal[data-type=slots-save] .slot-row:active{scale:.98} #modal[data-type=slots-save] .slot-row.confirm{border:0;box-shadow:0 0 0 .6cqw #ff8a7a,0 0 3cqw #ff6a5a} #modal[data-type=slots-save] .slot-body{position:absolute;left:20.8%;right:4%;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:1.5cqw;text-align:left;padding-bottom:.6cqw} #modal[data-type=slots-save] .slot-body b{font-size:3.85cqw;font-weight:900;color:#fff6fb;letter-spacing:.03em;text-shadow:0 .35cqw 0 #3a0c6a,0 0 .8cqw #3a0c6a;white-space:nowrap} #modal[data-type=slots-save] .slot-body small{font-size:2.95cqw;font-weight:900;color:#ffe08a;letter-spacing:.03em;text-shadow:0 .25cqw 0 #2a0650} #modal[data-type=slots-save] .slot-row.is-filled .slot-body{right:10%;gap:1.5cqw} #modal[data-type=slots-save] .slot-row.is-filled .slot-body b{font-size:3.25cqw;white-space:normal;line-height:1.2} #modal[data-type=slots-save] .slot-row.is-filled .slot-body small{font-size:2.55cqw;line-height:1.3;word-spacing:.15em} #modal[data-type=slots-save] .slot-row.is-filled .slot-body em{font-size:2.3cqw;color:#ddd2f2;font-style:normal;font-weight:700;text-shadow:0 .2cqw 0 #1a0636} #modal[data-type=slots-save] .slot-row.confirm .slot-body small{color:#ffb0a0} #modal[data-type=slots-save] .slot-row .sfx-clip{inset:2% .5%} #modal[data-type=slots-save] .slot-row.is-saved{animation:svxSaved .5s ease-out both} @keyframes svxSaved{0%{box-shadow:0 0 0 0 #fff0}30%{box-shadow:0 0 5cqw 1.2cqw #fff6c0,inset 0 0 14cqw #ffffffa0;scale:1.03}100%{box-shadow:0 0 2cqw .4cqw #ffd84a80;scale:1}} /* 「セーブする」画面のエフェクト */ .svx{display:none} #modal[data-type=slots-save] .svx{display:block;position:absolute;inset:0;pointer-events:none;z-index:1} #modal[data-type=slots-save] .sfx-stars{z-index:1} .svx .lfx-hero{left:9.35%;top:19.74%;width:24.44%;height:12.08%} #modal.svx-intro[data-type=slots-save]{animation:pfxFade .35s ease-out both} #modal.svx-intro[data-type=slots-save] .modal-inner{animation:chxIn .55s cubic-bezier(.2,1.2,.4,1) both} #modal.svx-intro[data-type=slots-save] .lfx-hero{animation:svxRide .9s cubic-bezier(.25,1.4,.5,1) .3s both,lfxBreathe 1.8s ease-in-out 1.2s infinite,lfxWiggle 5.2s ease-in-out 2.6s infinite} @keyframes svxRide{0%{opacity:0;translate:-30cqw 0;rotate:8deg}55%{opacity:1;translate:2cqw 0;rotate:-6deg}75%{translate:-1cqw 0;rotate:3deg}100%{translate:0 0;rotate:0deg}} #modal.svx-intro[data-type=slots-save] .slot-row{animation:chxRow .7s ease-out both;animation-delay:calc(.45s + var(--i,0) * .12s)} #modal.svx-intro[data-type=slots-save] .slot-body{animation:sfxRise .5s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.55s + var(--i,0) * .12s)} #app.sfx-calm .svx .lfx-glow,#app.sfx-calm .svx .sfx-stars{display:none!important} /* ===== v25：設定画面の×が iPhone で押せない問題の修正 全面に広がる .modal-body（透明）が×の上に重なり、iOS のスクロール領域では z-index が効かずタップを奪っていた。 本文は素通しにし、押せる部品（ON/OFF・音量）と×だけがタップを受ける ===== */ #modal[data-type=settings] .modal-inner{overflow:hidden} #modal[data-type=settings] .modal-body{pointer-events:none} #modal[data-type=settings] .toggle,#modal[data-type=settings] .volume{pointer-events:auto} #modal[data-type=settings] .modal-header{position:absolute;inset:0;z-index:6;pointer-events:none} #modal[data-type=settings] #modal-close{z-index:6;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;transition:scale .12s} #modal[data-type=settings] #modal-close:active{scale:.92} /* ===== v26：ウェーブ終了「採掘おつかれさま！」パネル（参考画像の切り抜き：パネル・看板・モグタマ・！・鉱石。数字だけDOM） ===== */ .hv{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden} .hv.is-out{opacity:0;transition:opacity .2s} .hv-veil{position:absolute;inset:0;background:radial-gradient(ellipse 70% 42% at 50% 47%,#1a083a70,#0a031a00 75%)} .hv-box{position:absolute;left:3.875cqw;top:53.28cqw;width:92.36cqw;height:65.34cqw} .hv-panel{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 2.2cqw #ffb83a90) drop-shadow(0 1.6cqw 2cqw #000a)} .hv-rays{position:absolute;left:50.6%;top:84.8%;width:70cqw;height:70cqw;margin:-35cqw 0 0 -35cqw;border-radius:50%;opacity:.55;mix-blend-mode:screen; background:repeating-conic-gradient(from 0deg,#ffe8a000 0deg,#ffe8a060 6deg,#ffe8a000 14deg);-webkit-mask:radial-gradient(closest-side,#000 15%,#0000 70%);mask:radial-gradient(closest-side,#000 15%,#0000 70%);animation:hvSpin 14s linear infinite;z-index:1;clip-path:inset(0 0 22% 0 round 0)} .hv-panel{z-index:0} @keyframes hvSpin{to{rotate:360deg}} .hv-pile{position:absolute;left:50.6%;top:86%;width:34cqw;height:16cqw;margin:-8cqw 0 0 -17cqw;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(closest-side,#fff4c0d0,#ffc84a70 45%,#ffb84a00);animation:sfxRaysPulse 2s ease-in-out infinite;z-index:1} .hv-heroclip{position:absolute;left:30.77%;top:-15.65%;width:47.2%;height:47.78%;overflow:hidden;z-index:2} .hv-hero{position:absolute;left:0;top:13.79%;width:100%;transform-origin:45% 100%;animation:hvBob 1.6s ease-in-out infinite} @keyframes hvBob{0%,100%{translate:0 0;rotate:0deg}25%{translate:0 -1.2%;rotate:-1.2deg}50%{translate:0 -2.2%;rotate:0deg}75%{translate:0 -1.2%;rotate:1.2deg}} .hv-marks{position:absolute;left:32.98%;top:-7.41%;width:9.91%;z-index:3;transform-origin:90% 90%;animation:hvMarks 1.6s ease-in-out infinite} @keyframes hvMarks{0%,100%{scale:1;opacity:1}45%{scale:1.14;opacity:1}60%{scale:.94;opacity:.75}} .hv-sign{position:absolute;left:2.8%;top:18.12%;width:94.41%;z-index:4} .hv-sign img{display:block;width:100%;filter:drop-shadow(0 .8cqw 1cqw #0008)} .hv-sign-shine{position:absolute;inset:0;-webkit-mask:url('assets/title/harvest-sign.webp') center/100% 100% no-repeat;mask:url('assets/title/harvest-sign.webp') center/100% 100% no-repeat; background:linear-gradient(105deg,#fff0 40%,#fff8 47%,#fffbe8 50%,#fff8 53%,#fff0 60%) 0 0/300% 100% no-repeat;background-position:150% 0;mix-blend-mode:overlay;animation:tfxSweep 3.2s cubic-bezier(.5,0,.4,1) .9s infinite} .hv-row{position:absolute;left:50%;top:68.86%;translate:-50% -50%;display:flex;align-items:center;gap:2.2cqw;z-index:4;white-space:nowrap} .hv-ore{width:10.2cqw;height:auto;filter:drop-shadow(0 0 1.6cqw #ffd84ac0);animation:hvOre 2.4s ease-in-out infinite} @keyframes hvOre{0%,100%{rotate:0deg;scale:1}50%{rotate:-6deg;scale:1.06}} .hv-num{position:relative;display:grid;font-family:'M PLUS Rounded 1c',sans-serif;font-weight:900;font-size:12.4cqw;line-height:1.05;letter-spacing:-.02em} .hv-num>span{grid-area:1/1;padding:0 .5cqw} .hv-num-s{color:#5a1e06;-webkit-text-stroke:2.4cqw #5a1e06;text-shadow:0 1cqw 0 #2a0a02,0 0 3cqw #ffb84a90} .hv-num-f{background:linear-gradient(#fffbd0 10%,#ffe24a 42%,#ffbc1c 72%,#ff9c10);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.35cqw #fff2b0} .hv-row{isolation:isolate} .hv .sfx-stars{z-index:5} .hv-fx{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none} /* 登場：パネルがポン→看板がドン→モグタマが看板の後ろからひょっこり→！がピカッ→数字が数え上がってドン */ .hv.is-in .hv-veil{animation:pfxFade .3s ease-out both} .hv.is-in .hv-box{animation:hvPanelIn .5s cubic-bezier(.25,1.5,.45,1) both} @keyframes hvPanelIn{0%{opacity:0;scale:.55;filter:brightness(2)}60%{opacity:1;scale:1.05}100%{scale:1;filter:none}} .hv.is-in .hv-sign{animation:hvStamp .45s cubic-bezier(.3,1.5,.5,1) .18s both} @keyframes hvStamp{0%{opacity:0;scale:1.6;filter:brightness(2.2)}55%{opacity:1;scale:.94;filter:brightness(1.3)}80%{scale:1.03}100%{scale:1;filter:none}} .hv.is-in .hv-hero{animation:hvPeek .6s cubic-bezier(.3,1.6,.5,1) .4s both,hvBob 1.6s ease-in-out 1s infinite} @keyframes hvPeek{0%{translate:0 70%;scale:1 .9}55%{translate:0 -8%;scale:.96 1.06}75%{translate:0 2%;scale:1.03 .97}100%{translate:0 0;scale:1}} .hv.is-in .hv-marks{animation:hvMarksIn .4s cubic-bezier(.3,1.8,.5,1) .85s both,hvMarks 1.6s ease-in-out 1.25s infinite} @keyframes hvMarksIn{0%{opacity:0;scale:.2;rotate:-25deg}100%{opacity:1;scale:1;rotate:0deg}} .hv.is-in .hv-row{animation:hvRowIn .4s cubic-bezier(.3,1.5,.5,1) .5s both} @keyframes hvRowIn{0%{opacity:0;scale:.6}100%{opacity:1;scale:1}} .hv.is-in .hv-rays,.hv.is-in .hv-pile{animation-delay:0s} .hv-num.is-pop,.hv-ore.is-pop{animation:hvNumPop .55s cubic-bezier(.3,1.7,.5,1)} @keyframes hvNumPop{0%{scale:1.45;filter:brightness(1.8)}100%{scale:1;filter:none}} .hv.is-in .hv-box::after{content:'';position:absolute;inset:-4%;border-radius:8cqw;background:radial-gradient(closest-side,#fffbe0,#fff0);mix-blend-mode:screen;animation:hvFlash .6s ease-out .18s both;pointer-events:none;z-index:6} @keyframes hvFlash{0%{opacity:0}25%{opacity:.85}100%{opacity:0}} .hv.is-static *{animation:none!important} #app.sfx-calm .hv *{animation:none!important} #app.hv-on .coach-tip{opacity:0!important;transition:opacity .15s} /* ===== v27：遊びかた（冒険ガイド）— 全画面・6ページ・操作の実演アニメ・ページめくり演出 ===== */ #modal[data-type=guide]{padding:0;background:#0e0526;backdrop-filter:none} #modal[data-type=guide] .modal-inner{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden; background:linear-gradient(#170838d0,#12062ee0 40%,#0c0420f0),url('assets/cave/cave-0.webp') center/cover no-repeat} #modal[data-type=guide] .modal-header{position:absolute;inset:0;z-index:8;pointer-events:none;padding:0;border:0} #modal[data-type=guide] .modal-header h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0} #modal[data-type=guide] #modal-close{position:absolute;right:3.6cqw;top:4.2cqw;width:11cqw;height:11cqw;min-width:0;min-height:0;padding:0;pointer-events:auto;border-radius:3cqw;font-size:5.2cqw; border:.6cqw solid #f6c75a;background:linear-gradient(#8a52d8,#5a2aa8 55%,#3e1a80);box-shadow:0 0 0 .3cqw #6a3a10,0 .8cqw 1.6cqw #000a,inset 0 .4cqw 0 #ffffff40;color:#fff;touch-action:manipulation} #modal[data-type=guide] #modal-close:active{scale:.92} #modal[data-type=guide] .modal-body{position:absolute;inset:0;padding:0;overflow:visible;z-index:2} .gd{position:absolute;inset:0;font-family:'M PLUS Rounded 1c',sans-serif;color:#f4ecff} .gd em{font-style:normal;color:#ffd84a;font-weight:900} .gd-head{position:absolute;left:0;right:0;top:2.6cqw;display:flex;justify-content:center;pointer-events:none} .gd-sign{position:relative;padding:1.6cqw 9cqw 2cqw;border-radius:3.2cqw;text-align:center; background:linear-gradient(#a8642c,#7a3e16 55%,#5a2a0e);border:.7cqw solid #f8cf62;box-shadow:0 0 0 .35cqw #5a2a08,0 1cqw 2cqw #000b,inset 0 .5cqw 0 #ffd89a70,inset 0 -.6cqw 0 #3a1806} .gd-sign::before,.gd-sign::after{content:'';position:absolute;top:50%;width:2.6cqw;height:2.6cqw;margin-top:-1.3cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c0,#e8a628 60%,#8a5208);box-shadow:0 .2cqw .3cqw #0008} .gd-sign::before{left:2.4cqw}.gd-sign::after{right:2.4cqw} .gd-sign small{display:block;font-size:2.3cqw;font-weight:900;letter-spacing:.18em;color:#ffe7a8;opacity:.9} .gd-sign b{display:block;font-size:8.4cqw;font-weight:900;line-height:1.05;letter-spacing:.06em;color:#fff4c8; background:linear-gradient(#fffbe0 15%,#ffe066 50%,#ffb21c 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .45cqw 0 #4a1a04) drop-shadow(0 0 .3cqw #4a1a04)} .gd-tabs{position:absolute;left:3cqw;right:3cqw;top:22.5cqw;display:grid;grid-template-columns:repeat(6,1fr);gap:1.2cqw;z-index:3} .gd-tab{display:flex;flex-direction:column;align-items:center;gap:.6cqw;min-width:0;min-height:0;padding:1.6cqw 0 1.3cqw;border-radius:2.6cqw;border:.45cqw solid #8b6cd8; background:linear-gradient(#3e2488,#24135a);color:#e8dcff;font:900 2.45cqw/1 'M PLUS Rounded 1c',sans-serif;box-shadow:0 .6cqw 1cqw #0008,inset 0 .3cqw 0 #ffffff22;transition:translate .15s,background .2s;touch-action:manipulation;white-space:nowrap} .gd-tab svg{width:5.4cqw;height:5.4cqw} .gd-tab span{letter-spacing:-.02em} .gd-tab.is-on{border-color:#fff1b0;background:linear-gradient(#ffe78a,#f6b22c 70%,#e08a10);color:#4a1c04;translate:0 -1cqw;box-shadow:0 0 2.4cqw #ffcf4a90,0 .8cqw 1.2cqw #000a,inset 0 .4cqw 0 #fff8} .gd-tab:active{scale:.94} .gd-card{position:absolute;left:3cqw;right:3cqw;top:37.5cqw;bottom:27cqw;border-radius:4.4cqw;padding:.7cqw;z-index:2; background:linear-gradient(135deg,#fff3b0,#f2b23a 25%,#ffe38a 50%,#d48a18 75%,#ffe9a0);box-shadow:0 0 3cqw #ffb83a70,0 1.4cqw 3cqw #000c} .gd-card::before{content:'';position:absolute;inset:.7cqw;border-radius:3.8cqw;background:radial-gradient(120% 60% at 50% 0%,#4a2a9a,#24105a 55%,#170a3c);box-shadow:inset 0 0 0 .35cqw #2a0c4a,inset 0 0 0 .7cqw #c08af050} .gd-scroll{position:absolute;inset:.7cqw;border-radius:3.8cqw;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:3.6cqw 4.4cqw 6cqw;scrollbar-width:none;touch-action:pan-y} .gd-scroll::-webkit-scrollbar{display:none} .gd-page{display:none} .gd-page.is-on{display:block} .gd-page p{margin:0 0 2.6cqw;font-size:3.35cqw;line-height:1.75;font-weight:700;color:#efe6ff} .gd-h{display:flex;align-items:baseline;gap:2cqw;margin:4.6cqw 0 2.4cqw;font-size:5cqw;font-weight:900;color:#ffe27a;text-shadow:0 .4cqw 0 #3a0c5a} .gd-h:first-child{margin-top:.4cqw} .gd-h small{font-size:2.3cqw;letter-spacing:.2em;color:#b9a2ff;text-shadow:none} .gd-h::after{content:'';flex:1;height:.4cqw;align-self:center;border-radius:9px;background:linear-gradient(90deg,#ffd84a,#ffd84a00)} .gd-hero{position:relative;margin:0 0 2.4cqw;border-radius:3cqw;overflow:hidden;border:.5cqw solid #f6c75a;box-shadow:0 .8cqw 1.6cqw #000a} .gd-hero img{display:block;width:100%;animation:gdKen 9s ease-in-out infinite alternate} @keyframes gdKen{from{scale:1.02;translate:0 0}to{scale:1.1;translate:-1.5% -2%}} .gd-hero figcaption{position:absolute;left:0;right:0;bottom:0;padding:5cqw 3cqw 2cqw;background:linear-gradient(#0000,#12062ee0);text-align:center} .gd-hero figcaption b{font-size:4.6cqw;font-weight:900;color:#fff;text-shadow:0 .4cqw 0 #3a0c5a,0 0 2cqw #ffb84a} .gd-hero-shine{position:absolute;inset:0;background:linear-gradient(105deg,#fff0 40%,#fff6 48%,#fff0 56%) 0 0/300% 100% no-repeat;background-position:150% 0;animation:tfxSweep 4.5s cubic-bezier(.5,0,.4,1) 1.2s infinite;pointer-events:none} .gd-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;margin:0 0 3cqw} .gd-chips span{padding:2cqw 1cqw;border-radius:2.4cqw;text-align:center;background:linear-gradient(#3a2080,#26145e);border:.35cqw solid #8b6cd8;font-size:2.5cqw;font-weight:800;color:#cdbfff} .gd-chips b{display:block;font-size:3.5cqw;color:#ffe27a;margin-bottom:.6cqw} .gd-box{margin:3cqw 0;padding:3cqw 3.4cqw;border-radius:3cqw;border:.45cqw solid #8b6cd8;background:linear-gradient(#36207a,#22125a)} .gd-box p{margin:0;font-size:3.15cqw} .gd-box-t{display:block;margin-bottom:1.4cqw;font-size:3.8cqw;font-weight:900;color:#fff} .gd-box.is-gold{border-color:#f6c75a;background:linear-gradient(#4a2a70,#2a1450);box-shadow:inset 0 0 3cqw #ffb83a30} .gd-box.is-gold .gd-box-t{color:#ffe27a} .gd-box.is-rush{border-color:#ffd84a;background:linear-gradient(110deg,#5a2a10,#3a1a50 60%,#2a1060);box-shadow:0 0 2.4cqw #ffb83a50} .gd-box.is-rush .gd-box-t{color:#ffe27a;animation:gdRush 1.4s ease-in-out infinite} @keyframes gdRush{50%{text-shadow:0 0 2cqw #ffd84a,0 0 4cqw #ff9a1a}} .gd-box.is-red{border-color:#ff8a9a;background:linear-gradient(#5a1a40,#2a0c3a)} .gd-box.is-red .gd-box-t{color:#ffb0c0} .gd-list{list-style:none;margin:0 0 2cqw;padding:0;display:grid;gap:2cqw} .gd-list li{display:flex;gap:2.6cqw;align-items:flex-start;padding:2.4cqw 2.6cqw;border-radius:2.8cqw;background:#ffffff0c;border:.3cqw solid #ffffff18;font-size:3.05cqw;line-height:1.65;font-weight:700;color:#e6dcff} .gd-list li b{display:block;font-size:3.6cqw;color:#fff;margin-bottom:.4cqw} .gd-ico{flex:none;display:grid;place-items:center;width:8.6cqw;height:8.6cqw;border-radius:2.4cqw;font-style:normal;font-size:4.4cqw;font-weight:900;color:#fff; background:linear-gradient(#7a52d8,#4a2aa0);border:.35cqw solid #c9b2ff;box-shadow:0 .5cqw .8cqw #0008,inset 0 .3cqw 0 #fff4} .gd-ico.is-gold{background:linear-gradient(#ffe27a,#e8920e);border-color:#fff3c0;color:#5a2204} .gd-ico.is-pink{background:linear-gradient(#ff7ab8,#c02a78);border-color:#ffd0e8} .gd-ico.is-red{background:linear-gradient(#ff6a5a,#b01a2a);border-color:#ffc8c0} .gd-ico.is-auto{background:linear-gradient(#4ade80,#16a34a);border-color:#c8ffd8;font-size:4cqw} .gd-ico.is-ball{background:radial-gradient(circle at 35% 30%,#fff,#d8dce8 45%,#7a8094);border-color:#fff;color:#4a4f60} .gd-hud{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw} .gd-hud span{padding:1.8cqw 2.2cqw;border-radius:2.2cqw;background:#0c0624a0;border:.3cqw solid #f6c75a70;font-size:2.7cqw;font-weight:700;color:#d8ccff} .gd-hud b{display:block;font-size:3.2cqw;color:#ffe27a} /* 操作の実演 */ .gd-demos{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;margin-bottom:3cqw} .gd-demo p{margin:1.6cqw 0 0;font-size:2.85cqw;line-height:1.5;text-align:center} .c-g{color:#6aff9a}.c-p{color:#ff9ad0} .gd-scene{position:relative;aspect-ratio:480/435;border-radius:2.6cqw;overflow:hidden;border:.45cqw solid #f6c75a;background:url('assets/guide/demo-bg.webp') center/cover;box-shadow:0 .6cqw 1.2cqw #000a} .gd-line{position:absolute;left:4%;right:4%;top:72%;border-top:.55cqw dashed #ffd84a;filter:drop-shadow(0 0 .6cqw #ffd84a)} .gd-line b{position:absolute;left:0;top:-3.6cqw;font-size:2.2cqw;font-weight:900;color:#ffd84a;text-shadow:0 .2cqw 0 #3a1404} .gd-cart{position:absolute;bottom:2%;width:30%;left:35%;translate:-50% 0;filter:drop-shadow(0 .5cqw .6cqw #000a)} .gd-finger{position:absolute;width:7cqw;height:7cqw;margin:-3.5cqw 0 0 -3.5cqw;border-radius:50%;background:radial-gradient(circle,#ffffffe0 30%,#ffffff60 45%,#fff0 70%);opacity:0} .gd-finger::after{content:'';position:absolute;inset:-30%;border-radius:50%;border:.5cqw solid #fff;opacity:0} .is-move .gd-finger{animation:gdFingerMove 4.4s ease-in-out infinite} .is-move .gd-finger::after{animation:gdRipple 2.2s ease-out infinite} .is-move .gd-cart{animation:gdCartMove 4.4s cubic-bezier(.4,0,.2,1) infinite} @keyframes gdFingerMove{0%{left:76%;top:86%;opacity:0}10%{opacity:1;scale:1.2}18%{scale:.85}30%{opacity:1;scale:1}42%{opacity:0;left:76%;top:86%}50%{left:24%;top:86%;opacity:0}60%{opacity:1;scale:1.2}68%{scale:.85}80%{opacity:1;scale:1}92%,100%{opacity:0;left:24%;top:86%}} @keyframes gdRipple{0%,14%{opacity:0;scale:.3}20%{opacity:.9;scale:.6}45%,100%{opacity:0;scale:1.6}} @keyframes gdCartMove{0%,18%{left:30%}34%,68%{left:72%}84%,100%{left:30%}} .is-fire .gd-cart{left:50%} .is-fire .gd-finger{animation:gdFingerFire 4.4s ease-in-out infinite} .is-fire .gd-finger::after{animation:gdRipple 2.2s ease-out infinite} @keyframes gdFingerFire{0%{left:78%;top:24%;opacity:0}10%{opacity:1;scale:1.2}18%{scale:.85}30%{opacity:1}40%{opacity:0;left:78%;top:24%}50%{left:22%;top:30%;opacity:0}60%{opacity:1;scale:1.2}68%{scale:.85}80%{opacity:1}90%,100%{opacity:0;left:22%;top:30%}} .gd-shot{position:absolute;width:4cqw;height:4cqw;margin:-2cqw 0 0 -2cqw;border-radius:50%;background:radial-gradient(circle,#fff 30%,#ff9ad0 60%,#ff5aa800 72%);box-shadow:0 0 2.4cqw #ff7ac0;opacity:0;animation:gdShot 4.4s linear infinite} @keyframes gdShot{0%,17%{left:50%;top:80%;opacity:0}18%{opacity:1;left:50%;top:80%}30%{left:78%;top:24%;opacity:1}31%,67%{opacity:0;left:50%;top:80%}68%{opacity:1;left:50%;top:80%}80%{left:22%;top:30%;opacity:1}81%,100%{opacity:0}} .gd-rock{position:absolute;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;border-radius:22%;background:linear-gradient(135deg,#c79a6a,#8a5a34 55%,#5a3418);box-shadow:inset 0 0 0 .4cqw #3a1e0a,inset .6cqw .6cqw 0 #ffffff30} .gd-rock.r1{left:78%;top:24%;animation:gdRock1 4.4s linear infinite} .gd-rock.r2{left:22%;top:30%;animation:gdRock2 4.4s linear infinite} .gd-rock.r3{left:50%;top:14%;background:linear-gradient(135deg,#ffe98a,#e8a818 60%,#9a5a08);box-shadow:inset 0 0 0 .4cqw #6a3a04,0 0 1.6cqw #ffd84a} @keyframes gdRock1{0%,29%{opacity:1;scale:1}32%{opacity:0;scale:1.6}90%{opacity:0;scale:.2}100%{opacity:1;scale:1}} @keyframes gdRock2{0%,79%{opacity:1;scale:1}82%{opacity:0;scale:1.6}95%{opacity:0;scale:.2}100%{opacity:1;scale:1}} .gd-boom{position:absolute;width:16cqw;height:16cqw;margin:-8cqw 0 0 -8cqw;border-radius:50%;background:radial-gradient(circle,#fff 10%,#ffd84a90 35%,#ff8a2a00 70%);opacity:0;animation:gdBoom 4.4s linear infinite} @keyframes gdBoom{0%,29%{left:78%;top:24%;opacity:0;scale:.3}31%{opacity:1;scale:1}38%{opacity:0;scale:1.4}79%{left:22%;top:30%;opacity:0;scale:.3}81%{left:22%;top:30%;opacity:1;scale:1}88%,100%{left:22%;top:30%;opacity:0;scale:1.4}} /* キャッチの図 */ .gd-catch{position:relative;margin:0 auto 3cqw;width:62%;padding-top:7cqw} .gd-catch img{display:block;width:46%;margin:0 auto} .gd-cbar{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6cqw} .gd-cbar i{height:5cqw;border-radius:1.4cqw;background:#ffffff20;border:.3cqw solid #ffffff40;font:900 2.4cqw/5cqw 'M PLUS Rounded 1c',sans-serif;font-style:normal;text-align:center;color:#5a2204} .gd-cbar i.is-p{background:linear-gradient(#ffe98a,#f2a81c);border-color:#fff3c0;box-shadow:0 0 2cqw #ffd84a;animation:gdPerfect 1.2s ease-in-out infinite} @keyframes gdPerfect{50%{scale:1.08;filter:brightness(1.25)}} .gd-balls{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8cqw;margin-bottom:3cqw} .gd-bcard{display:flex;flex-direction:column;align-items:center;gap:.8cqw;padding:2.6cqw 1.2cqw;border-radius:2.8cqw;background:linear-gradient(#36207a,#1e0f50);border:.35cqw solid #8b6cd8;text-align:center} .gd-bcard b{font-size:3.3cqw;font-weight:900;color:#fff} .gd-bcard b.evo{color:#ffe27a} .gd-bcard small{font-size:2.3cqw;line-height:1.4;color:#cdbfff;min-height:6.4cqw} .gd-arrow{font-size:2cqw;font-weight:900;color:#ffb0d8;margin:.6cqw 0} .gd-ball{display:block;width:9cqw;height:9cqw;border-radius:50%;animation:gdBallSpin 3s ease-in-out infinite} .gd-ball.is-iron{background:radial-gradient(circle at 35% 30%,#fff,#dfe2ea 40%,#8a90a4 80%,#5a6074);box-shadow:0 0 1.6cqw #c9d9ec} .gd-ball.is-fire{background:radial-gradient(circle at 35% 30%,#fff6c0,#ffb23a 40%,#f2541a 80%,#9a2208);box-shadow:0 0 2cqw #ff8a3b} .gd-ball.is-ice{background:radial-gradient(circle at 35% 30%,#fff,#bff4ff 40%,#45c4f0 80%,#1a6aa8);box-shadow:0 0 2cqw #71e1ff} .gd-ball.is-evo{width:11cqw;height:11cqw;position:relative} .gd-ball.is-evo::after{content:'';position:absolute;inset:-22%;border-radius:50%;border:.5cqw dashed #ffffffa0;animation:hvSpin 4s linear infinite} .gd-ball.is-iron.is-evo{background:radial-gradient(circle at 35% 30%,#fff,#e8eef8 35%,#6a7a94 75%,#2a3248);box-shadow:0 0 3cqw #dfe9ff} .gd-ball.is-fire.is-evo{background:radial-gradient(circle at 35% 30%,#fff,#ffd84a 30%,#ff3a0a 70%,#5a0a02);box-shadow:0 0 3.4cqw #ff6a1a} .gd-ball.is-ice.is-evo{background:conic-gradient(from 20deg,#e8fbff,#7ae0ff,#fff,#a8c8ff,#e8fbff,#5ad0ff,#e8fbff);box-shadow:0 0 3.4cqw #a8f0ff;border-radius:22%;rotate:45deg} @keyframes gdBallSpin{50%{translate:0 -1cqw}} /* 地層 */ .gd-flow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;margin:0 0 2cqw;padding:0;counter-reset:f} .gd-flow li{position:relative;padding:2.2cqw 1.2cqw;border-radius:2.4cqw;text-align:center;background:linear-gradient(#3a2080,#26145e);border:.35cqw solid #8b6cd8;font-size:2.55cqw;font-weight:800;color:#d8ccff} .gd-flow li b{display:block;font-size:3.8cqw;color:#ffe27a;margin-bottom:.4cqw} .gd-flow li+li::before{content:'›';position:absolute;left:-1.6cqw;top:50%;translate:-30% -50%;font-size:5cqw;color:#ffd84a} .gd-layers{list-style:none;margin:0 0 2.4cqw;padding:0;display:grid;gap:1.4cqw} .gd-layers li{display:flex;align-items:center;gap:2.4cqw;padding:1.8cqw 2.4cqw;border-radius:2.6cqw;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 30%,#1a0c40),#1a0c40 70%);border:.35cqw solid color-mix(in srgb,var(--c) 70%,#fff);font-size:2.8cqw;font-weight:700;color:#e6dcff} .gd-layers li>i{flex:none;display:grid;place-items:center;width:8cqw;height:8cqw;border-radius:50%;font-style:normal;font-size:4.4cqw;background:radial-gradient(circle at 35% 30%,#fff8,var(--c) 60%);box-shadow:0 0 1.6cqw var(--c)} .gd-layers b{display:flex;align-items:baseline;gap:1.6cqw;font-size:3.5cqw;color:#fff} .gd-layers b small{font-size:2.4cqw;color:color-mix(in srgb,var(--c) 60%,#fff)} .gd-stages{display:grid;gap:1.8cqw} .gd-st{display:flex;gap:2.4cqw;align-items:center;padding:1.4cqw;border-radius:2.8cqw;background:#ffffff0c;border:.35cqw solid color-mix(in srgb,var(--c) 75%,#fff)} .gd-st img{flex:none;width:30cqw;aspect-ratio:9/5;object-fit:cover;border-radius:1.8cqw} .gd-st b{display:block;font-size:3.4cqw;color:#fff} .gd-st small{display:block;font-size:2.6cqw;color:color-mix(in srgb,var(--c) 55%,#fff);font-weight:800;margin:.4cqw 0} .gd-st em{font-size:2.5cqw;color:#ffb0c0} /* ショップ */ .gd-shophead{display:flex;gap:2.4cqw;align-items:center;margin-bottom:2.4cqw} .gd-shophead img{flex:none;width:24cqw;filter:drop-shadow(0 .6cqw .8cqw #000a);animation:gdBob 2.2s ease-in-out infinite;transform-origin:50% 100%} .gd-shophead p{margin:0;font-size:3.1cqw} @keyframes gdBob{50%{translate:0 -1.2cqw;rotate:-2deg}} .gd-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.8cqw;margin-bottom:3cqw} .gd-c{display:flex;flex-direction:column;align-items:center;gap:.8cqw;padding:2.6cqw 1.6cqw;border-radius:2.8cqw;text-align:center;border:.45cqw solid var(--b);background:linear-gradient(color-mix(in srgb,var(--b) 35%,#24105a),#1a0c44);box-shadow:0 .6cqw 1cqw #0008} .gd-c i{font-style:normal;display:grid;place-items:center;width:10cqw;height:10cqw;border-radius:50%;font-size:5cqw;font-weight:900;color:#fff;background:radial-gradient(circle at 35% 30%,#fff8,var(--b) 65%);box-shadow:0 0 2cqw var(--b)} .gd-c b{font-size:3.6cqw;color:#fff} .gd-c small{font-size:2.4cqw;line-height:1.45;color:#ddd2ff} .gd-c.is-blue{--b:#5ab8ff}.gd-c.is-gold{--b:#f6c03a}.gd-c.is-purple{--b:#b07aff}.gd-c.is-pink{--b:#ff7ab8} .gd-steps{list-style:none;counter-reset:s;margin:0 0 1.4cqw;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw} .gd-steps li{counter-increment:s;display:flex;align-items:center;gap:1.4cqw;padding:1.4cqw 1.8cqw;border-radius:2cqw;background:#ffffff14;font-size:2.9cqw;font-weight:900;color:#fff} .gd-steps li::before{content:counter(s);display:grid;place-items:center;flex:none;width:5cqw;height:5cqw;border-radius:50%;background:linear-gradient(#ffe27a,#e8920e);color:#5a2204;font-size:2.8cqw} .gd-note{font-size:2.7cqw!important;color:#cdbfff!important} /* 便利機能 */ .gd-slots{display:grid;gap:1.2cqw;margin-bottom:2.4cqw} .gd-slots span{display:flex;align-items:center;gap:2cqw;padding:1.6cqw 2cqw;border-radius:2.4cqw;border:.4cqw solid #f6c75a;background:linear-gradient(90deg,#4a2a90,#2a1460);font-size:3cqw;font-weight:900;color:#fff} .gd-slots span.is-empty{color:#cdbfff;border-color:#f6c75a90} .gd-slots b{display:grid;place-items:center;width:6.4cqw;height:6.4cqw;border-radius:1.6cqw;background:linear-gradient(#ffe27a,#e8920e);color:#4a1c04;font-size:3.6cqw;box-shadow:inset 0 .3cqw 0 #fff8} .gd-miles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;margin-bottom:2cqw} .gd-miles span{padding:2cqw 1cqw;border-radius:2.4cqw;text-align:center;border:.35cqw solid #6aff9a90;background:linear-gradient(#1e5a3a,#14341e);font-size:2.45cqw;font-weight:800;color:#d8ffe6} .gd-miles b{display:block;font-size:3.8cqw;color:#8aff9a;margin-bottom:.4cqw} .gd-free{text-align:center;font-size:2.8cqw!important;color:#ffe27a!important;margin-top:3cqw!important} /* 下：案内役のモグタマ・ふきだし・ページ送り */ .gd-foot{position:absolute;left:0;right:0;bottom:0;height:27cqw;z-index:4;pointer-events:none} .gd-guide{position:absolute;left:2cqw;bottom:6cqw;width:22cqw;pointer-events:auto;transform-origin:50% 100%;filter:drop-shadow(0 .8cqw 1cqw #000a);animation:gdGuide 2.4s ease-in-out infinite} @keyframes gdGuide{0%,100%{scale:1 1;rotate:0deg}50%{scale:1.03 .97;rotate:-2deg}} .gd-guide.is-pop{animation:gdGuidePop .5s cubic-bezier(.3,1.6,.5,1),gdGuide 2.4s ease-in-out .5s infinite} .gd-guide.is-hop{animation:lfxHop .65s cubic-bezier(.3,1.5,.5,1)!important} @keyframes gdGuidePop{0%{scale:.9 1.1;translate:0 -2cqw}100%{scale:1;translate:0 0}} .gd-bubble{position:absolute;left:24cqw;right:3cqw;bottom:15.2cqw;padding:2cqw 3cqw;border-radius:3.6cqw;background:linear-gradient(#fffdf2,#fff0c8);border:.45cqw solid #f6c75a;color:#4a1c04;font-size:3.2cqw;font-weight:900;line-height:1.4;box-shadow:0 .6cqw 1.2cqw #000a} .gd-bubble::before{content:'';position:absolute;left:-2.4cqw;bottom:2.4cqw;border:1.4cqw solid transparent;border-right:2cqw solid #f6c75a;border-left:0} .gd-bubble.is-pop{animation:gdBubble .45s cubic-bezier(.3,1.6,.5,1)} @keyframes gdBubble{0%{scale:.6;opacity:0;transform-origin:0 100%}100%{scale:1;opacity:1}} .gd-nav{position:absolute;left:24cqw;right:3cqw;bottom:3.4cqw;display:flex;align-items:center;justify-content:space-between;pointer-events:auto} .gd-nav button{width:13cqw;height:9.6cqw;min-width:0;min-height:0;padding:0;border-radius:99px;font:900 6.4cqw/1 'M PLUS Rounded 1c',sans-serif;color:#4a1c04;border:.5cqw solid #fff1b0;background:linear-gradient(#ffe78a,#f6b22c 70%,#e08a10);box-shadow:0 .6cqw 0 #8a4a08,0 .9cqw 1.4cqw #000a;touch-action:manipulation} .gd-nav button:active{translate:0 .5cqw;box-shadow:0 .1cqw 0 #8a4a08} .gd-dots{display:flex;gap:1.6cqw} .gd-dots i{width:2.2cqw;height:2.2cqw;border-radius:50%;background:#ffffff40;transition:all .25s} .gd-dots i.is-on{width:6cqw;border-radius:99px;background:linear-gradient(90deg,#ffe27a,#ffb21c);box-shadow:0 0 1.4cqw #ffd84a} /* ページの出入りと文字の登場 */ .gd-page.is-in{animation:gdPageIn .42s cubic-bezier(.2,.9,.3,1) both} .gd.is-back .gd-page.is-in{animation-name:gdPageInBack} @keyframes gdPageIn{from{opacity:0;translate:8cqw 0}} @keyframes gdPageInBack{from{opacity:0;translate:-8cqw 0}} .gd-page.is-in .rv{animation:gdRise .5s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(.08s + var(--d,0) * .06s)} @keyframes gdRise{from{opacity:0;translate:0 3cqw;filter:blur(.4cqw)}} .gd-page.is-in .gd-h.rv{animation-name:gdHead} @keyframes gdHead{0%{opacity:0;translate:-4cqw 0;letter-spacing:.3em}100%{opacity:1}} /* 開いたときの登場 */ #modal.gdx-intro[data-type=guide]{animation:pfxFade .3s ease-out both} #modal.gdx-intro[data-type=guide] .gd-sign{animation:hvStamp .5s cubic-bezier(.3,1.5,.5,1) .1s both} #modal.gdx-intro[data-type=guide] .gd-tab{animation:sfxRise .45s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.25s + var(--i,0) * .05s)} #modal.gdx-intro[data-type=guide] .gd-card{animation:gdCardIn .5s cubic-bezier(.2,1.2,.4,1) .2s both} @keyframes gdCardIn{from{opacity:0;scale:.92;translate:0 4cqw}} #modal.gdx-intro[data-type=guide] .gd-guide{animation:lfxPopUp .7s cubic-bezier(.3,1.6,.5,1) .5s both,gdGuide 2.4s ease-in-out 1.2s infinite} #modal.gdx-intro[data-type=guide] .gd-bubble{animation:gdBubble .45s cubic-bezier(.3,1.6,.5,1) .85s both} #modal.gdx-intro[data-type=guide] .gd-nav{animation:sfxRise .45s ease-out .7s both} .gdx{display:none} #modal[data-type=guide] .gdx{display:block;position:absolute;inset:0;pointer-events:none;z-index:1} .gd-sign-shine{position:absolute;inset:0;border-radius:2.6cqw;background:linear-gradient(105deg,#fff0 40%,#fff5 48%,#fff0 56%) 0 0/300% 100% no-repeat;background-position:150% 0;animation:tfxSweep 4s cubic-bezier(.5,0,.4,1) 1s infinite;pointer-events:none} #app.sfx-calm .gd *,#app.sfx-calm .gdx *{animation:none!important} #modal[data-type=guide] .gd-tab .sfx-clip{border-radius:2.2cqw} .gd-card{bottom:29.5cqw} .gd-scroll{-webkit-mask:linear-gradient(#000 0,#000 calc(100% - 5cqw),#0000);mask:linear-gradient(#000 0,#000 calc(100% - 5cqw),#0000)} .gd-tab{font-size:2.6cqw} /* ===== v28：タイトルの主人公（トロッコで走る）と背景の動き ===== */ #screen-home .home-art{background-image:url('assets/title/title-bg-nohero.webp')} #screen-home .home-art{animation:tfxKen 22s ease-in-out infinite alternate;transform-origin:50% 42%} @keyframes tfxKen{from{scale:1}to{scale:1.035}} .tfx-world{position:absolute;inset:0;pointer-events:none} .tfx-world>i{position:absolute;pointer-events:none;translate:-50% -50%;mix-blend-mode:screen} .tfx-back{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* 溶岩：ゆらめく赤い光と流れ落ちる溶岩 */ .tw-lava-glow{width:46cqw;height:40cqw;border-radius:50%;background:radial-gradient(closest-side,#ff8a2a90,#ff4a1a40 50%,#ff2a0a00);animation:twFlicker 2.6s ease-in-out infinite} @keyframes twFlicker{0%,100%{opacity:.55;scale:1}30%{opacity:.9;scale:1.04}55%{opacity:.6}75%{opacity:1;scale:1.07}} .tw-lavafall,.tw-icefall,.tw-forestfall{width:7cqw;height:22cqw;border-radius:40%;-webkit-mask:radial-gradient(closest-side,#000 55%,#0000);mask:radial-gradient(closest-side,#000 55%,#0000);background-size:100% 6cqw;animation:twFlow .9s linear infinite} .tw-lavafall{background-image:repeating-linear-gradient(180deg,#ffe0a000 0,#ffd27a90 1.2cqw,#ff9a3a00 3cqw,#ff6a1a00 6cqw);opacity:.9} .tw-lavafall.is-b{width:5cqw;height:12cqw;animation-duration:1.2s;opacity:.6} .tw-icefall{width:9cqw;height:24cqw;background-image:repeating-linear-gradient(180deg,#ffffff00 0,#e8fbffb0 .8cqw,#9ae6ff00 2.4cqw,#ffffff00 6cqw);animation-duration:.7s} .tw-icefall.is-b{width:6cqw;height:16cqw;animation-duration:.85s;opacity:.7} .tw-forestfall{width:8cqw;height:16cqw;background-image:repeating-linear-gradient(180deg,#ffffff00 0,#eaffffb0 .8cqw,#a0f0e000 2.4cqw,#ffffff00 6cqw);animation-duration:.75s} .tw-forestfall.is-b{width:5cqw;height:12cqw;animation-duration:.9s;opacity:.7} @keyframes twFlow{from{background-position:0 0}to{background-position:0 6cqw}} /* ポータル：渦を巻いて脈打つ */ .tw-portal{width:30cqw;height:34cqw;border-radius:50%;opacity:.75;background:repeating-conic-gradient(from 0deg,#ffffff00 0deg,#e8c8ff90 10deg,#ffffff00 24deg,#a0e0ff70 34deg,#ffffff00 46deg); -webkit-mask:radial-gradient(closest-side,#000 10%,#0008 50%,#0000 72%);mask:radial-gradient(closest-side,#000 10%,#0008 50%,#0000 72%);animation:twSpin 7s linear infinite} @keyframes twSpin{to{rotate:360deg}} .tw-portal-core{width:12cqw;height:12cqw;border-radius:50%;background:radial-gradient(closest-side,#fff,#f0d8ffc0 35%,#b080ff00);animation:twCore 1.8s ease-in-out infinite} @keyframes twCore{50%{scale:1.35;opacity:.75}} /* 宇宙：惑星がゆっくり漂い、銀河が回る */ .tw-planet{width:20cqw;height:12cqw;border-radius:50%;background:radial-gradient(closest-side,#f0d8ff60,#c090ff20 60%,#0000);animation:twFloat 6s ease-in-out infinite} @keyframes twFloat{50%{translate:-50% -62%;opacity:.6}} .tw-galaxy{width:16cqw;height:16cqw;border-radius:50%;background:conic-gradient(from 0deg,#ff9ae800,#ffb0f090,#ff9ae800 30%,#a0c8ff80 55%,#ff9ae800 75%);-webkit-mask:radial-gradient(closest-side,#000 20%,#0000 75%);mask:radial-gradient(closest-side,#000 20%,#0000 75%);animation:twSpin 12s linear infinite;opacity:.8} /* 森の大樹の光の実・砂漠の神殿の光 */ .tw-orb{width:13cqw;height:13cqw;border-radius:50%;background:radial-gradient(closest-side,#f0ffd0,#7aff5ab0 35%,#3aff4a00);animation:twCore 2.4s ease-in-out infinite} .tw-temple{width:26cqw;height:20cqw;border-radius:50%;background:radial-gradient(closest-side,#ffe0a050,#ffb84a00);animation:twFlicker 5s ease-in-out infinite} /* 主人公：トロッコでガタゴト進む */ .tfx-ride{position:absolute;left:29.44%;top:40.79%;width:37.09%;aspect-ratio:349/325;pointer-events:none} .tfx-ride-sway,.tfx-ride-bump{position:absolute;inset:0} .tfx-ride-sway{transform-origin:50% 95%;animation:tfxSway 3.4s ease-in-out infinite} @keyframes tfxSway{0%,100%{rotate:-1.2deg;translate:-.8% 0}50%{rotate:1.4deg;translate:.8% 0}} .tfx-ride-bump{transform-origin:50% 100%;animation:tfxRattle .46s linear infinite,tfxBigBump 5.2s cubic-bezier(.3,0,.4,1) 1.2s infinite} @keyframes tfxRattle{0%,100%{translate:0 0}12%{translate:0 -.9%}24%{translate:0 .35%}36%{translate:0 0}58%{translate:0 -.5%}70%{translate:0 .2%}} @keyframes tfxBigBump{0%,86%,100%{scale:1 1}89%{scale:1.04 .94}92%{scale:.97 1.05;translate:0 -4%}95%{scale:1.03 .97;translate:0 0}97%{scale:1}} .tfx-ride-hero{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 1.4cqw #fff6c070)} .tfx-ride-shadow{position:absolute;left:14%;right:10%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,#1a0a30a0,#1a0a3000);animation:tfxShadow .46s linear infinite} @keyframes tfxShadow{12%{scale:.94 .9;opacity:.8}} /* ヘッドランプ（トロッコと一緒に動く） */ .tfx-ride-lamp{position:absolute;left:46.5%;top:8.5%;width:30%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(closest-side,#fffbe8,#fff3b0c0 25%,#ffd85a50 50%,#ffd85a00);animation:tfxLampPulse 1.6s ease-in-out infinite} @keyframes tfxLampPulse{50%{scale:1.18;opacity:.8}} .tfx-ride-beam{position:absolute;left:46.5%;top:8.5%;width:80%;height:46%;translate:-50% -100%;transform-origin:50% 100%;mix-blend-mode:screen;opacity:.35; background:conic-gradient(from -22deg at 50% 100%,#fff6c000 0deg,#fff6c0 22deg,#fff6c000 44deg,#0000 0);-webkit-mask:radial-gradient(100% 100% at 50% 100%,#000 10%,#0000 85%);mask:radial-gradient(100% 100% at 50% 100%,#000 10%,#0000 85%);animation:tfxBeam 4.2s ease-in-out infinite} @keyframes tfxBeam{0%,100%{rotate:-14deg}50%{rotate:12deg}} .tfx-ride-marks{position:absolute;left:80.2%;top:1.5%;width:24.6%;transform-origin:0% 100%;animation:tfxMarks 1.1s ease-in-out infinite} @keyframes tfxMarks{0%,100%{scale:1;opacity:1}40%{scale:1.16;rotate:-4deg}60%{scale:.94;opacity:.8}} /* 登場：トロッコが奥から走り込んでくる */ #screen-home.tfx-intro .tfx-ride{animation:tfxRideIn 1.1s cubic-bezier(.2,1.25,.4,1) .15s both} @keyframes tfxRideIn{0%{opacity:0;scale:.35;translate:0 -30%;filter:brightness(2.4)}55%{opacity:1;scale:1.08;translate:0 3%;filter:brightness(1.3)}75%{scale:.97;translate:0 -1%}100%{scale:1;translate:0 0;filter:none}} #screen-home.tfx-calm .tfx-world{display:none} @media (prefers-reduced-motion:reduce){#screen-home .tfx-world{display:none}}