/* ===================================================================== おばけ算数 － 見た目（3/5）：タイトル・図鑑・ヒントの演出 --------------------------------------------------------------------- もとは1本の style.css でした。中身は1文字も変えず、行の順番も そのままで 5 本に分けただけです。 ★ CSSは「後に書いたほうが勝つ」ので、index.html の の 並び順を入れ替えないでください。1→2→3→4→5 の順です。 ===================================================================== */ :root{ --css-3-loaded:1; } /* ================= レスポンシブ ================= */ /* タブレット縦：全体を大きく、余白を広げる */ @media (min-width:700px) and (orientation:portrait){ #stage{--apple:96px; --btn-size:118px; --ghost-w:min(28vw,260px); --line-fs:clamp(22px,3vw,30px); --num-fs:clamp(52px,7vw,70px);} .card{padding:64px 48px 56px;} .card h1{font-size:38px;} .card p{font-size:21px;} .bigBtn{font-size:31px;padding:20px 58px;} #bannerTitle{font-size:36px;} #bannerSub{font-size:21px;} #bannerIcon{font-size:74px;} #miniGhost{width:150px;} #endGhost{width:160px;} } /* 横向き（タブレット横・スマホ横）：左におばけ、右に問題 */ @media (orientation:landscape) and (min-width:820px){ #stage{--apple:82px; --btn-size:112px; --ghost-w:min(26vw,300px); --line-fs:clamp(20px,2.4vw,28px); --num-fs:clamp(46px,5vw,64px);} #tree{height:22%;} #treeCrown{width:min(70vw,700px);} .card{padding:38px 40px;} .card h1{font-size:32px;} .card p{font-size:19px;} .bigBtn{font-size:27px;padding:17px 50px;} } /* 小型スマホ縦：はみ出しを防ぐ */ @media (max-width:360px){ #stage{--apple:52px; --btn-size:74px; --ghost-w:min(44vw,160px);} } /* ================= v007: タイトル・図鑑・完了画面 ================= */ .btnRow{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;} .midBtn{border:none;border-radius:30px;background:#EFE6D2;box-shadow:0 5px 0 #CBBFA4; font-family:inherit;font-weight:900;font-size:17px;color:#5A4A2A;padding:12px 22px; min-height:48px;transition:transform .1s, box-shadow .1s;} .midBtn:active{transform:translateY(4px);box-shadow:0 1px 0 #CBBFA4;} .midBtn.subBtn{background:#E3DCEF;box-shadow:0 5px 0 #B9AECF;color:#5A4E78;font-size:15px;} #bookBtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(60,45,110,.25);} #bookBtn svg{width:62%;height:62%;} /* ---- v0.11: ゲーム中からマップへ戻るボタン（ずかんボタンの左どなり） ---- */ #mapBtn{position:absolute;left:4%;top:12px;z-index:76; width:clamp(48px,11vw,58px);height:clamp(48px,11vw,58px);border:none;border-radius:50%; background:rgba(255,249,239,.92);box-shadow:0 4px 0 rgba(60,45,110,.25); display:flex;align-items:center;justify-content:center;padding:0;} #mapBtn svg{width:62%;height:62%;} #mapBtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(60,45,110,.25);} @media (min-width:700px) and (orientation:portrait){ #mapBtn{width:70px;height:70px;top:22px;font-size:26px;} } @media (orientation:landscape) and (min-width:820px){ #mapBtn{width:62px;height:62px;left:2.5%;} } /* ===================================================================== v0.11: オープニング画面（1枚絵を全画面で使う） --------------------------------------------------------------------- 絵の縦横比は 1536:1024（3:2）。どの端末でも絵全体が切れずに入るよう、 中央は「contain」で表示し、余白は同じ絵をぼかして敷いて埋める。 「はじめる」は絵の中に描かれているので、その位置に透明ボタンを重ねる。 ボタン位置は元画像の座標（x540〜1000 / y475〜608）から算出した％。 絵を差し替えたらこの％も測り直すこと。 ===================================================================== */ #miniGhost[hidden]{display:none;} /* --------------------------------------------------------------------- タイトル画面の考え方（重要） --------------------------------------------------------------------- はじめる ボタンは、絵の中に描かれたボタンの上に透明な当たり判定を 重ねる作りだった。そのため絵が出ないと、見えないボタンだけが残り、 真っ暗な画面で操作できなくなる事故が起きた。 そこで既定と例外を入れ替えた。 既定 … 文字のタイトル＋色つきのボタン（必ず見える） 絵が読めたら … JS が artReady を付けて、絵のレイアウトへ切り替える 絵が届かない・遅い・名前が違う、のどれであっても遊べる状態から始まる。 --------------------------------------------------------------------- */ #startOverlay{padding:0;background:#2B2450;backdrop-filter:none;background-image:none;} #startOverlay::before{content:'';position:absolute;inset:0;display:none; backdrop-filter:blur(30px) brightness(.55);} #titleArt{position:relative;z-index:1; aspect-ratio:1536/1024; width:min(100%, calc(100dvh * 1536 / 1024)); max-height:100dvh; background-image:none; background-size:contain;background-position:center;background-repeat:no-repeat; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;} #titleFallback{display:block;text-align:center; font-size:clamp(34px,9vw,52px);font-weight:900;color:#FFF3C9; text-shadow:0 4px 0 rgba(0,0,0,.25);letter-spacing:.04em;} #titleFallback small{display:block;font-size:.4em; color:#C9BCEA;margin-top:10px;font-weight:700;} #startBtn{position:static;width:auto;height:auto;border:none; font-size:23px;color:#5A3A00;border-radius:40px;padding:15px 42px; background:var(--btn);box-shadow:0 7px 0 var(--btn-shadow);animation:none; font-family:inherit;font-weight:900; -webkit-tap-highlight-color:transparent;cursor:pointer;} #startBtn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--btn-shadow);} /* ---- ここから下は「絵が読めたとき」だけ ---- */ #startOverlay.artReady{background:#1A1533; background-image:var(--title-img);background-size:cover;background-position:center;} #startOverlay.artReady::before{display:block;} #startOverlay.artReady #titleArt{background-image:var(--title-img);display:block;} #startOverlay.artReady #titleFallback{display:none;} #startOverlay.artReady #startBtn{position:absolute;left:35%;top:46.3%;width:30%;height:13.2%; background:transparent;box-shadow:none;padding:0;border-radius:999px; font-size:0;color:transparent; animation:titleBtnPulse 2.4s ease-in-out infinite;} #startOverlay.artReady #startBtn:active{background:rgba(255,255,255,.30); animation:none;transform:none;box-shadow:none;} @keyframes titleBtnPulse{ 0%,100%{box-shadow:0 0 10px 1px rgba(255,226,142,0);} 50% {box-shadow:0 0 28px 9px rgba(255,226,142,.55);}} /* ====================================================================== タイトルの飾り：ゆれる火の玉と、たまに横切るコウモリ 絵の上に重ねるだけ。pointer-events:none なので「はじめる」は普通に押せる。 絵が読めなかったとき（artReady なし）は出さない。 ====================================================================== */ #titleFx{position:absolute;inset:0;z-index:2;pointer-events:none; overflow:hidden;display:none;} #startOverlay.artReady #titleFx{display:block;} /* ---- 火の玉 ---- 絵に描かれている青い炎のそばに、動く光をそっと重ねる。 位置はたて向きの絵で実測。よこ向きの絵でも暗い場所に来るように選んである。 */ #titleFx .tFlame{position:absolute; width:var(--w);aspect-ratio:1; left:var(--x);top:var(--y); transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 50% 60%, rgba(232,248,255,.95) 0%, rgba(140,205,255,.72) 30%, rgba(80,150,255,.34) 56%, rgba(60,120,255,0) 74%); animation:tFlameFloat var(--d) ease-in-out infinite; animation-delay:var(--dl);} @keyframes tFlameFloat{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.50; } 28% { transform:translate(-49%,-58%) scale(1.14); opacity:.95; } 58% { transform:translate(-52%,-64%) scale(.92); opacity:.66; } 80% { transform:translate(-50%,-55%) scale(1.04); opacity:.82; } } /* ---- コウモリ ---- 3層に分けて、横に進む・上下にゆれる・羽ばたく をそれぞれ担当させる。 1つの要素にまとめると transform が競合して羽ばたきが消える。 */ #titleFx .tBat{position:absolute;top:var(--y);width:var(--w); animation:tBatFly var(--d) linear forwards;} #titleFx .tBat.rl{animation-name:tBatFlyRL;} #titleFx .tBat > i{display:block; animation:tBatBob calc(var(--d)/5) ease-in-out infinite;} #titleFx .tBat.rl > i{transform:scaleX(-1);} #titleFx .tBat svg{display:block;width:100%;height:auto; fill:#150E28;opacity:.80; animation:tBatFlap var(--f) ease-in-out infinite;} @keyframes tBatFlap{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.42);}} @keyframes tBatBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9%);}} #titleFx .tBat.rl > i{animation-name:tBatBobRL;} @keyframes tBatBobRL{0%,100%{transform:scaleX(-1) translateY(0);} 50% {transform:scaleX(-1) translateY(-9%);}} @keyframes tBatFly {0%{left:-16%;opacity:0;} 9%,90%{opacity:1;} 100%{left:114%;opacity:0;}} @keyframes tBatFlyRL{0%{left:114%;opacity:0;} 9%,90%{opacity:1;} 100%{left:-16%;opacity:0;}} /* 動きを減らす設定の端末では、飾りを止める */ @media (prefers-reduced-motion: reduce){ #titleFx .tFlame{animation:none;opacity:.6;} #titleFx .tBat{display:none;} } #titleSubBtns{position:fixed;left:0;right:0;z-index:3;gap:10px; bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);} #titleSubBtns .midBtn{font-size:14px;padding:9px 16px;min-height:40px;opacity:.94;} @media (min-width:700px){ #titleSubBtns .midBtn{font-size:17px;padding:12px 22px;min-height:48px;} } /* --------------------------------------------------------------------- 縦画面（スマホ）は縦長版の絵を画面いっぱいに敷く。 絵は 852:1847。画面より大きく引き伸ばして、はみ出た分は切る。 縦長版が見つからない時は hasTall が付かないので、上の横長＋contain の表示のまま（＝真っ暗にはならない）。 ボタン位置は縦長版での座標（x198〜650 / y921〜1033）から算出。 --------------------------------------------------------------------- */ #startOverlay{overflow:hidden;} @media (orientation:portrait){ #startOverlay.artReady.hasTall{background-image:var(--title-img-tall);background-size:cover;} #startOverlay.artReady.hasTall::before{display:none;} #startOverlay.artReady.hasTall #titleArt{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); aspect-ratio:852/1847; width:max(100vw, calc(100dvh * 852 / 1847)); max-height:none;height:auto; background-image:var(--title-img-tall); background-size:100% 100%;} #startOverlay.artReady.hasTall #startBtn{left:23.2%;top:49.8%;width:53.1%;height:6.1%;} } @media (min-width:700px) and (orientation:portrait){ } @media (orientation:landscape) and (min-width:820px){ } /* --- 図鑑 --- */ /* ===================================================================== おばけ図鑑 --------------------------------------------------------------------- 背景は本の1枚絵（1086:1448）。表示は5体×2段＝1ページ10体。 1ワールド分のおばけが、図鑑の1ページにまとまる構成にしている。 マスの位置は元画像の座標から算出した％で指定している： 横 …… 1マス目の中心x=227、マスの間隔=156.75 縦 …… 1行目の中心y=546、行の間隔=181 絵を描き直したら、この％も測り直すこと。 おばけは絵に描き込まず、必ずHTML側で並べる（増えてもページが増えるだけ）。 ===================================================================== */ #zukanOverlay{z-index:120;align-items:center;justify-content:center;padding:0; overflow:hidden;touch-action:none;} #zukanBackdrop{position:fixed;inset:0;z-index:0;background:#191233; background-image:var(--zukan-img);background-size:cover;background-position:center;} #zukanBackdrop::after{content:"";position:absolute;inset:0; backdrop-filter:blur(26px) brightness(.5);background:rgba(15,11,34,.35);} #zukanBook{position:relative;z-index:1;aspect-ratio:1086/1448; width:min(100vw, calc(100dvh * 1086 / 1448)); background-image:var(--zukan-img);background-size:contain; background-position:center;background-repeat:no-repeat; overflow:hidden;} /* 横向きの広い画面（iPad横など）では、本を高さいっぱいより大きく表示して 左右の余白を減らす。本の外周は装飾なので、上下が少しはみ出て切れても おばけのマス（中央寄り）には影響しない。 */ @media (orientation:landscape) and (min-aspect-ratio:5/4){ #zukanBook{ height:min(132dvh, calc(94vw * 1448 / 1086)); width:calc(min(132dvh, calc(94vw * 1448 / 1086)) * 1086 / 1448); aspect-ratio:auto;} } /* ページ全体。左右スワイプでめくる */ #zukanPages{position:absolute;left:13.68%;top:31.46%;width:72.2%;height:37.5%;} /* 5体×2段。2段を紙面の中央へ広げ、下側だけが余らないようにする。 */ .zPage{position:absolute;inset:0;display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:48%; align-content:center;} /* 本の絵に印刷されている空きマスを、紙と同じ色で隠す。 元画像に残る3段目の空きマスを紙と同じ色で隠す。 縦方向のグラデーションにすることで、大きい画面（iPad）でも 下の空きマスが透けないようにする。 HTML側のおばけはこの上に表示される。 */ #zPageVeil{position:absolute;inset:-4% -4% -8%;z-index:0;pointer-events:none; background:linear-gradient(180deg, rgba(231,185,134,0) 0%, rgba(231,185,134,0) 30%, rgba(231,185,134,.55) 40%, rgba(231,185,134,.97) 52%, rgba(231,185,134,.99) 100%);} /* ---- ページめくり ---------------------------------------------------- ページの上を「紙」が弧を描いて通りすぎ、その裏で中身が入れ替わる。 紙が通過しきる前に次のページを出すと、めくった下から新しい面が あらわれたように見える。時間は0.42秒。 --------------------------------------------------------------------- */ #zukanPages{perspective:1400px;} .zPage{backface-visibility:hidden;} .zPage.fadeOut{animation:zFadeOut .16s ease-in forwards;} .zPage.fadeIn {animation:zFadeIn .22s ease-out;} @keyframes zFadeOut{to{opacity:0;}} @keyframes zFadeIn{from{opacity:0;}} /* めくれる紙。ページ枠より少し大きくして、紙のふちが見えるようにする */ #zSheet{position:absolute;left:-6%;top:-9%;width:112%;height:120%; z-index:4;pointer-events:none;opacity:0;border-radius:5px 16px 16px 5px; background:linear-gradient(105deg,#F6EAD0 0%,#FBF3E2 38%,#F1E3C6 72%,#E4D2AE 100%); box-shadow:-8px 6px 22px rgba(40,25,10,.42), inset 0 0 34px rgba(190,160,110,.35); transform-origin:left center;transform-style:preserve-3d; will-change:transform,opacity;} #zSheet::after{content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(105deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 34%, rgba(90,60,20,.16) 82%,rgba(70,45,15,.3) 100%);} #zSheet.flipNext{animation:zFlipNext .42s cubic-bezier(.4,.02,.35,1) forwards;} #zSheet.flipPrev{animation:zFlipPrev .42s cubic-bezier(.4,.02,.35,1) forwards;} @keyframes zFlipNext{ /* 右から左へ、右ふちを持ち上げてめくる */ 0% {opacity:0; transform:rotateY(0deg);} 12% {opacity:1; transform:rotateY(-14deg);} 100%{opacity:1; transform:rotateY(-168deg);} } @keyframes zFlipPrev{ /* 左から右へ（もどる時） */ 0% {opacity:1; transform:rotateY(-168deg);} 88% {opacity:1; transform:rotateY(-14deg);} 100%{opacity:0; transform:rotateY(0deg);} } #zSheet.flipPrev{transform-origin:left center;} /* めくっている間、下のページに紙の影が落ちる */ #zShade{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0; background:linear-gradient(100deg,rgba(40,25,10,.34) 0%,rgba(40,25,10,.10) 45%,transparent 72%);} #zShade.on{animation:zShade .42s ease-out forwards;} @keyframes zShade{0%{opacity:.9}70%{opacity:.35}100%{opacity:0}} @media (prefers-reduced-motion:reduce){ #zSheet,#zShade{display:none;} } /* 1マス。絵のマスより少し大きくして、小さい指でも押しやすくする */ .zslot{position:relative;border:none;background:transparent;padding:0;font-family:inherit; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; -webkit-tap-highlight-color:transparent;} .zslot img{width:84%;height:auto;max-height:70%;object-fit:contain;} .zslot.locked img{filter:brightness(0);opacity:.42;} .zslot:not(.locked):active{transform:scale(.92);} .zq{font-size:clamp(17px,4.6vw,26px);font-weight:900;color:rgba(120,102,80,.45);line-height:1;} .zname{font-size:clamp(9px,2.5vw,13px);font-weight:900;color:#5A4A2A;line-height:1.1; text-align:center;margin-top:1px;} .newBadge{position:absolute;top:-2px;right:-2px;background:#FF6B81;color:#fff; font-size:9px;font-weight:900;padding:2px 6px;border-radius:9px;letter-spacing:.4px; box-shadow:0 2px 5px rgba(0,0,0,.35);} .zslot.pop{animation:zpop 1.1s cubic-bezier(.3,1.5,.5,1);} @keyframes zpop{0%{transform:scale(.4)}45%{transform:scale(1.22)}70%{transform:scale(.96)}100%{transform:scale(1)}} .zslot.shine::before{content:"";position:absolute;inset:-8%;border-radius:50%; background:radial-gradient(circle,rgba(255,238,170,.95) 0%,rgba(255,214,110,.5) 45%,transparent 72%); animation:zshine 1.4s ease-out 2;pointer-events:none;} @keyframes zshine{0%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.35)}} /* ページ送り */ #zPrev,#zNext{position:absolute;top:52%;z-index:3;width:clamp(48px,12vw,62px); height:clamp(48px,12vw,62px);border:none;border-radius:50%;padding:0; background:rgba(255,249,239,.94);box-shadow:0 4px 0 rgba(50,32,10,.35); font-family:inherit;font-weight:900;font-size:clamp(20px,5vw,26px);color:#5A4A2A;} #zPrev{left:1.5%;} #zNext{right:1.5%;} #zPrev:active,#zNext:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(50,32,10,.35);} #zPrev[disabled],#zNext[disabled]{opacity:.28;} /* ページ番号・もどるボタンは本の外（画面基準）に固定する。 本を大きくしても画面の外に出ないようにするため。 */ #zPageNo{position:fixed;left:50%;z-index:118;transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom, 0px) + 74px); font-size:clamp(13px,3.4vw,17px);font-weight:900;color:#FFF3C9; background:rgba(40,28,66,.78);padding:4px 16px;border-radius:14px; text-shadow:0 1px 4px rgba(0,0,0,.6);} #zukanClose{position:fixed;left:50%;z-index:118;transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom, 0px) + 14px); min-height:52px;font-size:clamp(16px,4.2vw,19px);padding:13px 34px; box-shadow:0 6px 0 rgba(40,25,10,.4);} #zukanToast{position:absolute;left:50%;top:76%;transform:translateX(-50%);z-index:4; background:rgba(74,63,102,.94);color:#fff;font-weight:700;font-size:15px;text-align:center; padding:11px 20px;border-radius:20px;line-height:1.6;white-space:nowrap;} #zukanDetail{z-index:130;} #detailImg img{width:min(46vw,190px);height:min(46vw,190px);object-fit:contain;} #detailDesc{white-space:pre-line;line-height:1.9;} #detailStage{font-size:14px;font-weight:900;color:#fff;background:#6C5FA7; padding:4px 14px;border-radius:13px;display:inline-block;} .zno{font-size:13px;font-weight:700;color:#9A8FBB;} /* --- 救出完了カード --- */ #compGhostCard .zcard{position:relative;background:#FFF9EF;border-radius:22px; padding:16px 26px;display:flex;flex-direction:column;align-items:center;gap:5px; box-shadow:0 6px 0 rgba(40,25,10,.15);pointer-events:none;} #compGhostCard .zcard img{width:min(38vw,150px);height:min(38vw,150px);object-fit:contain;} #compGhostCard .zname{font-size:20px;color:var(--ink);} #compGhostCard .newBadge{top:9px;right:11px;font-size:11px;padding:3px 9px;} #endGhost img{width:110px;display:block;} /* ================= v008 盤面（1〜2枚のお皿） ================= */ /* おばけ・問題文・お皿を縦に積む。行数や画面比が変わっても重ならない */ .plate.hot{filter:brightness(1.06); box-shadow: inset 0 0 0 4px rgba(154,116,64,.55), inset 0 3px 0 rgba(255,248,228,.75), 0 0 0 6px rgba(255,238,160,.95), 0 9px 0 var(--plate-wood), 0 12px 0 var(--plate-deep), 0 18px 24px rgba(20,12,4,.45);} .plate.flash{animation:plateFlash .6s ease-in-out 2;} #zoneSource.flash{animation:plateFlash .6s ease-in-out 2;border-radius:24px;} @keyframes plateFlash{ 0%,100%{box-shadow:inset 0 0 0 4px rgba(154,116,64,.55), 0 9px 0 var(--plate-wood), 0 12px 0 var(--plate-deep), 0 16px 20px rgba(20,12,4,.42)} 50% {box-shadow:inset 0 0 0 4px rgba(154,116,64,.55), 0 0 0 8px rgba(255,238,160,.95), 0 9px 0 var(--plate-wood), 0 12px 0 var(--plate-deep), 0 16px 24px rgba(20,12,4,.42)}} /* 触れないお皿は、木の色を沈ませる */ .plate.locked{ background: repeating-linear-gradient(178deg, rgba(120,96,60,.12) 0 1px, rgba(0,0,0,0) 1px 7px), radial-gradient(ellipse at 50% 34%, #E3D6BC 58%, #BCA582 100%); filter:saturate(.7) brightness(.96);} #plateWrap.hide{opacity:0;transition:opacity .4s;pointer-events:none;} #playArea.hide{opacity:0;transition:opacity .4s;} .item{position:absolute;z-index:10;touch-action:none;will-change:transform; width:62px;height:62px; transition:left .18s ease, top .18s ease, width .18s, height .18s;} .item svg,.item img{width:100%;height:100%;display:block;object-fit:contain; filter:drop-shadow(0 4px 5px rgba(20,40,10,.4));pointer-events:none;transition:transform .15s;} .item.fixed{opacity:.95;} .item.fixed::after{content:"";position:absolute;inset:0;} .item.dragging{z-index:50;transition:none;} .item.dragging svg,.item.dragging img{transform:scale(1.14); filter:drop-shadow(0 12px 10px rgba(20,40,10,.45)) brightness(1.05);} .item.wiggle svg,.item.wiggle img{animation:itemWiggle .5s ease-in-out 2;} /* ====================================================================== ヒントの演出（段階1〜3） 段階1：静かに光らせるだけ（数は教えない） 段階2：目標の側を強めに光らせる（既存の .flash を使う） 段階3：最初の1個だけ、行き先へ向かって動いて戻る（移動はしない） ====================================================================== */ /* 段階1：動かせる物。ふわっと明るくなるだけで、跳ねたりはしない */ .item.canMove{animation:itemCanMove 1.5s ease-in-out 1;} @keyframes itemCanMove{ 0%,100%{ filter:none; transform:translate(0,0); } 45% { filter:brightness(1.22) drop-shadow(0 0 9px rgba(255,244,214,.85)); transform:translateY(-3%); } } /* 段階1：置ける場所。.flash より弱く、ゆっくり明滅する */ .plate.softGlow, #zoneSource.softGlow{animation:zoneSoftGlow 1.7s ease-in-out 1;} @keyframes zoneSoftGlow{ 0%,100%{ box-shadow:inherit; filter:none; } 50% { filter:brightness(1.12) drop-shadow(0 0 14px rgba(255,240,205,.55)); } } /* 段階3：行き先へ向かって出て、戻ってくる。最後まで運ばないのが大事 */ .item.demoMove{ z-index:40; animation:itemDemoMove 1.5s cubic-bezier(.35,.9,.4,1) 1; } @keyframes itemDemoMove{ 0% { transform:translate(0,0) scale(1); } 38% { transform:translate(var(--demoX,0), var(--demoY,0)) scale(1.07); } 62% { transform:translate(var(--demoX,0), var(--demoY,0)) scale(1.07); } 100%{ transform:translate(0,0) scale(1); } } /* 動きを減らす設定では、移動の実演をやめて明るさの変化だけにする */ @media (prefers-reduced-motion:reduce){ .item.demoMove{ animation:itemCanMove 1.2s ease-in-out 1; } .item.canMove{ animation:none; filter:brightness(1.2); } } @keyframes itemWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}} .item.eaten{transition:left .29s ease-in, top .29s ease-in;} .item.eaten svg,.item.eaten img{transition:transform .29s ease-in,opacity .29s;transform:scale(.1);opacity:0;} /* タブレット縦 */ @media (min-width:700px) and (orientation:portrait){ } /* 横向き：左におばけ、右に問題 */ @media (orientation:landscape) and (min-width:820px){ } /* 小型スマホ縦 */ @media (max-width:360px){ } /* 縦が短い画面（アプリ内ブラウザ・小型端末）：全体を詰める */ @media (max-height:820px) and (orientation:portrait){ #stage{--ghost-w:min(34vw,150px);} } /* 横向きで縦が狭い場合（スマートフォン横持ち）：さらに詰める */ @media (orientation:landscape) and (max-height:520px){ #stage{--ghost-w:min(20vw,190px); --apple:56px; --btn-size:84px;} }