/* ========================================================= まなびモンスター — スタイル（v1.3 / モック準拠） docs/STYLE_GUIDE.md と デザインモック（まなびモンスター.dc.html）に そろえてあります。数字は モックから そのまま 持ってきています。 決めごと： ・画面は 400px はば 固定。たてだけ のびる（js/core/stage.js） ・絵は ぜんぶ 四角い ブロックの つみかさね。曲線は UIの 角丸だけ ・立体感は「下に のびる box-shadow の 足」＋「inset の 白い帯」 ・アニメは bob / pulse / drift / shine の 4つだけ ・さわる ところは 44px 以上 ========================================================= */ :root { /* ---- 背景の 紺 ---- */ --bg-0: #0d1220; --bg-1: #131c36; --bg-2: #16224a; --bg-3: #101a33; /* ---- UIの わく ---- */ --frame: #1b2540; --hd-1: #243255; --hd-2: #1a2442; --hd-edge: #0c1330; /* ---- ゴールド（メイン） ---- */ --gold: #ffd447; --gold-2: #f2b93c; --gold-lt: #ffe89a; --gold-sh: #b8801d; --gold-ink: #6a4208; /* ---- アクション緑 ---- */ --grn-1: #63d94f; --grn-2: #34a52c; --grn-sh: #1f7a1c; /* ---- 現在地オレンジ ---- */ --org-1: #ff8f5e; --org-2: #ef4f2e; --org-sh: #a92a13; /* ---- 危険・敵 ---- */ --dgr-1: #ff5e7a; --dgr-2: #d62f52; /* ---- ロック灰 ---- */ --lock-1: #5b6b95; --lock-2: #3d4a70; --lock-sh: #26304d; --lock-tx: #aab8d8; /* ---- 地形 ---- */ --sea: #2a5fa8; --shal: #4b8fd8; --grass: #58ad4d; --forest: #4b9b44; --rock: #9aa4b5; --sand: #e8d194; --road: #d7b56e; /* ---- 文字 ---- */ --tx: #e8ecf7; --tx-dim: #8fa0c4; --tx-sub: #9fb2dd; /* ---- 紙（問題カード・メモ） ---- */ --paper-1: #fffdf4; --paper-2: #fff3d2; --paper-sh: #c99a35; --paper-ink: #2a2140; --paper-lbl: #a3762a; --memo-sh: #b9c2dd; --memo-line: #e8edf9; --memo-ink: #4a5b8f; /* ---- バー ---- */ --exp-1: #4fd3ff; --exp-2: #7cf9c4; --hp-1: #ff5e7a; --hp-2: #ff9d4d; --groove: #0d142b; /* ---- クリーム／紺の ボタン ---- */ --cream-1: #fff6d8; --cream-2: #ffe49b; --cream-tx: #21306b; --navy-1: #3c4a76; --navy-2: #26305a; --navy-sh: #171e3c; --navy-tx: #dfe7ff; --f-head: 'Mochiy Pop One', 'Yu Gothic UI', sans-serif; /* 本文（v7.9）：ドット文字（DotGothic16）は 1本の 線が 1px で 小3には 細すぎた → まるゴシック（Zen Maru Gothic・500/700 の 太さが ある）。ドット感は 絵で 出す */ --f-body: 'Zen Maru Gothic', 'BIZ UDPGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic UI', sans-serif; --stage-h: 720px; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } body { font-family: var(--f-body); font-weight: 500; /* v7.9：本文は 中太。700 に すると 見出しの Mochiy が にせ太字に なる */ font-size: 16px; line-height: 1.5; color: var(--tx); background: radial-gradient(1200px 700px at 50% -10%, #1d2b4d 0%, var(--bg-0) 70%); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; word-break: keep-all; /* ことばの 途中で 折り返さない */ overflow-wrap: anywhere; /* どうしても 入らない ときだけ 切る */ overscroll-behavior: none; } /* ---- ステージ（400px はば・たて可変） ---- */ .stage { position: fixed; left: 50%; top: 50%; width: 400px; height: 720px; transform: translate(-50%, -50%); transform-origin: 50% 50%; overflow: hidden; background: var(--bg-1); } .screen { position: absolute; inset: 0; display: none; overflow: hidden; } .screen.is-active { display: block; } /* 上バー・まん中・下バー の たてならび */ .page { display: flex; flex-direction: column; height: 100%; } .page__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .wrap { padding: 12px 12px 22px; } /* .screen の 直下に ある .wrap は それ自身が スクロールする はこに なる （図かん・すがた・写真・けっかの 画面。これが ないと 下が 見えない） */ .screen > .wrap { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ========================================================= アニメは この 4つだけ ========================================================= */ @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes drift { 0% { transform: translateX(0); } 100% { transform: translateX(28px); } } @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } } /* shine（v13.10）：前は background-position を 動かして いて、ボタンの ところが 毎コマ 描き直し（Paint）に なって いた （たたかいの 画面では 何も して いなくても 1秒に 95回）。いまは .btn__shine::before を transform で 動かす（位置は 前と 同じ・下の .btn__shine を 見る） */ @keyframes shine { 0% { transform: translateX(-30.9091%); } 100% { transform: translateX(-82.7273%); } } @keyframes popin { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; } } /* ========================================================= 文字 ========================================================= */ .px { font-family: var(--f-head); } .label { margin: 14px 0 6px; font-family: var(--f-head); font-size: 14px; color: var(--tx-sub); letter-spacing: .04em; } .sprite { image-rendering: pixelated; display: block; } /* ========================================================= 3D ボタン ========================================================= */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 18px; border: 0; border-radius: 14px; cursor: pointer; overflow: hidden; font-family: var(--f-head); font-size: 20px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.28); background: linear-gradient(var(--grn-1), var(--grn-2)); box-shadow: 0 6px 0 var(--grn-sh), 0 10px 18px rgba(0,0,0,.32), inset 0 3px 0 rgba(255,255,255,.45); } .btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--grn-sh), 0 5px 10px rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.4); } .btn--big { width: 100%; height: 78px; border-radius: 16px; font-size: 26px; box-shadow: 0 8px 0 var(--grn-sh), 0 12px 22px rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.45); } .btn--big:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--grn-sh), 0 6px 12px rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.4); } /* クリーム（サブ） */ .btn--cream { font-family: var(--f-body); font-size: 19px; color: var(--cream-tx); text-shadow: none; background: linear-gradient(var(--cream-1), var(--cream-2)); box-shadow: 0 6px 0 var(--paper-sh), inset 0 2px 0 #fff; } .btn--cream:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--paper-sh), inset 0 2px 0 #fff; } /* 紺（もどる など） */ .btn--stone { font-family: var(--f-body); font-size: 18px; color: var(--navy-tx); text-shadow: none; background: linear-gradient(var(--navy-1), var(--navy-2)); box-shadow: 0 6px 0 var(--navy-sh), inset 0 2px 0 rgba(255,255,255,.18); } .btn--stone:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--navy-sh), inset 0 2px 0 rgba(255,255,255,.18); } .btn--danger { background: linear-gradient(var(--dgr-1), var(--dgr-2)); box-shadow: 0 6px 0 #8e1f38, inset 0 2px 0 rgba(255,255,255,.28); } .btn--danger:active { transform: translateY(4px); box-shadow: 0 2px 0 #8e1f38, inset 0 2px 0 rgba(255,255,255,.28); } .btn--small { min-height: 44px; padding: 0 14px; font-size: 15px; border-radius: 12px; box-shadow: 0 5px 0 var(--grn-sh), inset 0 2px 0 rgba(255,255,255,.4); } .btn--small:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--grn-sh), inset 0 2px 0 rgba(255,255,255,.4); } .btn--small.btn--stone { box-shadow: 0 5px 0 var(--navy-sh), inset 0 2px 0 rgba(255,255,255,.18); } .btn--small.btn--stone:active { box-shadow: 0 2px 0 var(--navy-sh), inset 0 2px 0 rgba(255,255,255,.18); } .btn--small.btn--cream { box-shadow: 0 5px 0 var(--paper-sh), inset 0 2px 0 #fff; } .btn--small.btn--cream:active { box-shadow: 0 2px 0 var(--paper-sh), inset 0 2px 0 #fff; } .btn:disabled { opacity: .45; cursor: default; } .btn:disabled:active { transform: none; } /* 主ボタンの 光沢スイープ */ /* v13.10：光の すじは ::before に 描いて transform で すべらせる（GPU だけ・描き直し なし）。 前の 形＝はば 220% の 絵を くり返して background-position -140%→240%（絵の ずれ ＋1.68→−2.88 ボタン はば）。 同じ 見た目に する ため ::before を 絵 4まいぶん（880%）に して、ずれを 絵 2まいぶん（4.4）ずらした 位置から 動かす： −2.72→−7.28 ボタン はば ＝ 自分の はばの −30.9091%→−82.7273%。とちゅうも くり返しの つぎ目も 前と 同じ */ .btn__shine { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .btn__shine::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 880%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); background-size: 25% 100%; animation: shine 3.4s linear infinite; } .input { width: 100%; min-height: 56px; padding: 0 14px; border: 0; border-radius: 14px; background: linear-gradient(var(--paper-1), var(--paper-2)); box-shadow: 0 6px 0 var(--paper-sh), inset 0 2px 0 #fff; font-family: var(--f-body); font-size: 22px; color: var(--paper-ink); } .input:focus { outline: 0; box-shadow: 0 6px 0 var(--paper-sh), 0 0 0 4px var(--gold), 0 0 18px rgba(255,212,71,.6); } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } /* ---- ピル（ゾーン帯・小さな 見出し） ---- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(14,22,44,.88); box-shadow: 0 3px 8px rgba(0,0,0,.35); white-space: nowrap; } .pill__name { font-family: var(--f-head); font-size: 13px; color: #fff; } .pill__sub { font-size: 11px; color: var(--tx-sub); } .tag { display: inline-block; padding: 2px 8px; border-radius: 8px; background: rgba(14,22,44,.8); font-size: 11px; color: #fff; } .tag--time { color: var(--exp-2); } /* ---- バー ---- */ .xpbar { height: 12px; border-radius: 999px; background: var(--groove); box-shadow: inset 0 2px 0 rgba(0,0,0,.4); overflow: hidden; } .xpbar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--exp-1), var(--exp-2)); box-shadow: 0 0 10px rgba(124,249,196,.6); transition: width .4s ease; } /* ---- お知らせ ---- */ .toast { position: absolute; left: 50%; bottom: 26px; transform: translate(-50%, 16px); padding: 8px 18px; border-radius: 14px; background: rgba(16,24,48,.9); box-shadow: 0 8px 20px rgba(0,0,0,.4); font-family: var(--f-head); font-size: 16px; color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 90; max-width: 360px; text-align: center; } .toast.is-shown { opacity: 1; transform: translate(-50%, 0); } /* ========================================================= HUD（なまえ・しょうごう・レベル・EXP） ========================================================= */ .hud { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(var(--hd-1), var(--hd-2)); border-bottom: 4px solid var(--hd-edge); } .hud__img { width: 52px; height: 52px; flex: none; border-radius: 12px; background: linear-gradient(#4fb8f5, #2a5fa8); box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), 0 0 0 3px #0f1730; object-fit: cover; object-position: 50% 30%; } .hud__body { flex: 1; min-width: 0; } .hud__name { font-size: 22px; color: #fff; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hud__title { font-size: 13px; color: var(--tx-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hud__body .xpbar { margin-top: 6px; } .hud__right { text-align: center; flex: none; } .hud__lv { display: block; font-family: var(--f-head); font-size: 24px; color: var(--gold); text-shadow: 0 3px 0 #8a5a12; line-height: 1.1; } /* 地図の 上の 1行（v8.0）：80px → 60px。図かんの HUD は そのまま */ .hud--slim { padding: 8px 12px; gap: 10px; } .hud--slim .hud__img { width: 40px; height: 40px; border-radius: 10px; } .hud--slim .hud__name { font-size: 17px; } .hud--slim .hud__title { font-size: 11px; } .hud--slim .hud__body .xpbar { height: 8px; margin-top: 4px; } .hud--slim .hud__lv { font-size: 20px; } .hud--slim .hud__xp { font-size: 11px; } .hud--slim .hud__pal { width: 26px; height: 26px; } /* ---- ガードくだき（2026-09-14）：主人公の まもりの アイコン ---- 主人公（.hero・84px）の 頭の 左よこ。頭の 真上は ボスの HP バーで あきが ない（タブレットで 実測）。 相棒の なまえ（その 下）とは かさならない。動かすのは transform と opacity だけ（v13.10） */ .guardrow { position: absolute; left: -44px; top: 0; z-index: 6; display: flex; align-items: center; gap: 7px; pointer-events: none; } .guardico { position: relative; display: block; width: 17px; height: 19px; } .guardico__shape { position: absolute; inset: 0; display: block; background: #ffd447; } .guardico__shape::after { content: ''; position: absolute; inset: 2px; } /* たて＝青い たて（金の ふち） */ .guardico--shield .guardico__shape, .guardico--shield .guardico__shape::after { clip-path: polygon(0 0, 100% 0, 100% 56%, 50% 100%, 0 56%); } .guardico--shield .guardico__shape::after { background: linear-gradient(#7cc4ff, #2e6fd6); } /* よろい＝むねあて（金の ふち・銀） */ .guardico--freeze .guardico__shape, .guardico--freeze .guardico__shape::after { clip-path: polygon(0 18%, 28% 0, 72% 0, 100% 18%, 86% 100%, 14% 100%); } .guardico--freeze .guardico__shape::after { background: linear-gradient(#f2f4fa, #9aa6c0); } .guardico__n { position: absolute; right: -7px; top: 5px; font-family: var(--f-head); font-size: 11px; line-height: 1; color: #fff; text-shadow: -1px -1px 0 #1b2240, 1px -1px 0 #1b2240, -1px 1px 0 #1b2240, 1px 1px 0 #1b2240; } /* こわれて のこり 0 */ .guardico.is-out { opacity: .55; } .guardico.is-out .guardico__shape { background: #5a6378; } .guardico.is-out .guardico__shape::after { background: #3a4254; } /* こわれた まもりが ある 種類は ヒビの 線が のこる（のこりが 0 なら 灰色）。数は 右よこ（下だと 相棒の ゲージに かかる） */ .guardico.has-broken::after, .guardico.is-out::after { content: ''; position: absolute; left: 8px; top: -1px; width: 2px; height: 22px; background: #10152a; transform: rotate(28deg); } /* なおるまでの れんぞく 正解 */ .guardfix { display: flex; flex-direction: column; gap: 2px; margin-left: 1px; } .guardfix i { display: block; width: 5px; height: 5px; background: #2b3656; box-shadow: 0 0 0 1px rgba(255,255,255,.25); } .guardfix i.is-on { background: #ffd447; } /* ヒビ（ふつう）・こわれた（本気）・なおった・ふえた */ .guardico.is-crack { animation: guardCrack .5s ease-out; } @keyframes guardCrack { 0%, 100% { transform: none; } 20% { transform: translateX(-3px) rotate(-8deg); } 45% { transform: translateX(3px) rotate(6deg); } 70% { transform: translateX(-2px); } } .guardico.is-crack::before { content: ''; position: absolute; left: 7px; top: 1px; width: 2px; height: 16px; background: #fff; transform: rotate(-24deg); animation: guardCrackLine .9s ease-out forwards; } @keyframes guardCrackLine { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } } .guardico.is-break { animation: guardBreak .6s ease-out; } @keyframes guardBreak { 0% { transform: scale(1); } 25% { transform: scale(1.35) rotate(-10deg); } 60% { transform: scale(.85) rotate(6deg); } 100% { transform: none; } } .guardshard { position: absolute; left: 6px; top: 6px; width: 5px; height: 5px; background: #ffd447; animation: guardShard .75s ease-out forwards; } .guardshard--shield { background: #5aa8ff; } @keyframes guardShard { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(160deg); opacity: 0; } } .guardico.is-fix, .guardico.is-gain { animation: guardGain .7s cubic-bezier(.2, 1.5, .4, 1); } @keyframes guardGain { 0% { transform: scale(.4); } 60% { transform: scale(1.3); } 100% { transform: none; } } /* ことばの ふだ（アイコンの 下に 出て 少し 上がって きえる） */ .guardpop { position: absolute; left: -46px; top: 26px; z-index: 7; padding: 2px 7px; border-radius: 8px; white-space: nowrap; pointer-events: none; font-family: var(--f-head); font-size: 12px; line-height: 1.3; color: #fff; background: rgba(14, 20, 40, .9); box-shadow: 0 2px 0 rgba(0,0,0,.35); animation: guardPop 1.4s ease-out forwards; } .guardpop--ok { color: #cfe6ff; } .guardpop--bad { color: #ff9a8a; box-shadow: 0 0 0 2px #e0463c, 0 2px 0 rgba(0,0,0,.35); } .guardpop--fix, .guardpop--gain { color: #ffe07a; box-shadow: 0 0 0 2px #ffd447, 0 2px 0 rgba(0,0,0,.35); } @keyframes guardPop { 0% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .guardico, .guardico::before, .guardshard, .guardpop { animation: none !important; } } /* 地図の HUD の「タイトル」ボタン（2026-09-13）：家の アイコン＋小さな 字。いつも 見えて いる 場所 */ .hud__home { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 50px; height: 46px; margin-left: -2px; padding: 0; border: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(var(--navy-1), var(--navy-2)); color: #dbe6ff; box-shadow: 0 4px 0 var(--navy-sh), inset 0 2px 0 rgba(255,255,255,.16); } .hud__home:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy-sh), inset 0 2px 0 rgba(255,255,255,.16); } .hud__homeico { position: relative; display: block; width: 22px; height: 18px; } .hud__homeico .roof { position: absolute; left: 0; top: 0; width: 22px; height: 10px; background: #e0463c; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .hud__homeico .wall { position: absolute; left: 3px; top: 9px; width: 16px; height: 9px; background: #fff4dc; } .hud__homeico .door { position: absolute; left: 9px; top: 12px; width: 4px; height: 6px; background: #8a5a12; } .hud__homet { font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 0; } .hud__xp { display: block; font-size: 12px; color: var(--tx-sub); } .frags { display: flex; gap: 3px; justify-content: center; margin-top: 2px; } .frag { width: 12px; height: 12px; } .frag--off { opacity: .22; filter: grayscale(1); } /* ---- 星 ---- */ .stars { display: inline-flex; gap: 1px; font-size: 12px; line-height: 1; } .star { color: rgba(255,255,255,.25); } .star.is-on { color: var(--gold); text-shadow: 0 1px 0 rgba(0,0,0,.7); } /* ========================================================= 01 タイトル（v1.8 / モック準拠） 画面は たてに flex で 4つ： head（ロゴ）→ scene（空・のびちぢみ）→ land（地面）→ actions 空・後光・雲は そのうしろに 絶対配置で しく。 ========================================================= */ .title { position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; background: #4fb0ee; } .title__sky { position: absolute; inset: 0; z-index: 0; background: linear-gradient(#8fdcff 0%, #4fb0ee 46%, #7ccdf2 100%); } /* まん中の やわらかい 光（上から さす） */ .title__glow { position: absolute; left: 50%; top: -160px; width: 440px; height: 440px; transform: translateX(-50%); z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(255,255,255,.6), rgba(255,255,255,0)); } /* かみふぶき（色とりどりの 小さい 四角） */ .title__bits { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .title__bits i { position: absolute; display: block; } /* ---- ロゴ（v5.1・木の かんばん）---- 上の あき（title__top）と 空（title__scene）で 高さを 分けあうので、 画面が 高い ほど ロゴが 下がって まん中に 寄る。 scene の min-height は ドラゴンが ロゴに かぶらない ための 見はり。 */ .title__top { position: relative; z-index: 4; flex: 1 1 0; min-height: 52px; } .title__head { position: relative; z-index: 4; flex: none; padding: 0; text-align: center; } /* 木の かんばん */ .title__plaque { position: relative; display: inline-block; padding: 14px 16px 16px; border-radius: 22px; transform: rotate(-2deg); background: linear-gradient(#e6b878, #c68e50 55%, #a9743c); box-shadow: 0 0 0 4px #6b4423, 0 7px 0 #593819, 0 13px 20px rgba(20,20,60,.42), inset 0 4px 0 rgba(255,255,255,.45), inset 0 -7px 0 rgba(90,58,28,.3); } .title__plaque::before { content: ''; position: absolute; inset: 7px; border-radius: 15px; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255,240,205,.34); } /* みどりの 宝石（四すみの かざり） */ .plq__gem { position: absolute; display: block; z-index: 2; background: linear-gradient(#8ff5b4, #23a05a 60%, #158a48); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); filter: drop-shadow(0 0 7px rgba(90,240,155,.75)); } .plq__gem--a { left: 20px; top: -11px; width: 22px; height: 26px; animation: pulse 2.6s ease-in-out infinite; } .plq__gem--b { right: 46px; top: -9px; width: 17px; height: 20px; animation: pulse 3.2s ease-in-out .7s infinite; } .plq__gem--c { right: 12px; bottom: -10px; width: 19px; height: 23px; animation: pulse 2.9s ease-in-out 1.2s infinite; } /* 本（左上） */ .plq__book { position: absolute; left: -10px; top: -16px; width: 50px; height: 42px; z-index: 3; transform: rotate(-13deg); filter: drop-shadow(0 4px 4px rgba(20,20,60,.45)); } .plq__book .cover { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(#8a5a2c, #5f3a17); box-shadow: inset 0 3px 0 rgba(255,255,255,.28), inset -6px 0 0 rgba(0,0,0,.22); } .plq__book .pages { position: absolute; left: 5px; right: 9px; bottom: 4px; height: 9px; background: #fff6e0; box-shadow: inset 0 -3px 0 #d8c9a8; } .plq__book .gem { position: absolute; left: 15px; top: 9px; width: 18px; height: 21px; background: linear-gradient(#8ff5b4, #23a05a 60%, #158a48); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); filter: drop-shadow(0 0 6px rgba(90,240,155,.85)); } /* えんぴつ（右上） */ .plq__pen { position: absolute; right: -10px; top: -22px; width: 26px; height: 56px; z-index: 3; transform: rotate(19deg); filter: drop-shadow(0 4px 4px rgba(20,20,60,.45)); } .plq__pen .tip { position: absolute; left: 3px; top: 0; width: 20px; height: 15px; background: #ffdca8; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .plq__pen .lead { position: absolute; left: 8px; top: 0; width: 10px; height: 8px; background: #3a3a48; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .plq__pen .body { position: absolute; left: 3px; top: 15px; width: 20px; height: 30px; background: linear-gradient(90deg, #ff9a6a, #e8542c 55%, #b03a18); } .plq__pen .end { position: absolute; left: 3px; bottom: 0; width: 20px; height: 11px; border-radius: 0 0 5px 5px; background: linear-gradient(#ffe89a, #f2b93c); box-shadow: inset 0 -3px 0 #b8801d; } .title__logowrap { position: relative; display: block; } .title__logo { font-family: var(--f-head); font-size: 58px; line-height: 1.04; letter-spacing: .02em; background: linear-gradient(#fff8d0 8%, var(--gold) 40%, #f2a01c 60%, #ffe89a 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 5px #4a2a06; paint-order: stroke fill; filter: drop-shadow(0 3px 0 #8a530e) drop-shadow(0 6px 0 #4a2a06); } /* 4とがりの 星（文字では なく かたちで 描く） */ .title__spark, .title__chest .spark { position: absolute; background: #fff; clip-path: polygon(50% 0%, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0% 50%, 44% 44%); filter: drop-shadow(0 0 7px rgba(255,255,255,.95)); } .title__spark--a { top: -6px; left: -18px; width: 22px; height: 22px; animation: pulse 1.4s ease-in-out infinite; } .title__spark--b { bottom: 4px; right: -16px; width: 17px; height: 17px; background: #fff4c6; filter: drop-shadow(0 0 8px rgba(255,232,150,.95)); animation: pulse 1.9s ease-in-out .5s infinite; } /* ひとこと（左右に 小さな 宝石） */ .title__tagrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; } .tag__gem { display: block; width: 13px; height: 16px; flex: none; background: linear-gradient(#8ff5b4, #23a05a 60%, #158a48); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); filter: drop-shadow(0 0 6px rgba(90,240,155,.7)); } /* ひとこと（v7.9）：ただの 丸い 帯 → **リボンの 旗**に した（ユーザー「カッコ良くして」）。 ロゴ（木の かんばん＋金の 字）の 下に つく 副題なので、 ・色は ロゴと 同じ 金（--gold）と こげ茶。あたらしい 色は 作らない ・ふちは 金の 2px、内がわに 明るい 帯（このアプリの 立体感の 出し方） ・左右に **折れた しっぽ**（::before / ::after を 旗の 外に おく。かさならない ので z-index は いらない） ・字は 見出し書体（Mochiy Pop One）。ロゴより 小さく して、金では なく クリーム色 （金の 字を 2つ ならべると ロゴと けんかする） ・光が ゆっくり 1回 走る（ボタンの shine と 同じ 語彙。動きは これ 1つだけ） */ .title__tag { position: relative; display: inline-block; margin: 0; padding: 8px 20px; border-radius: 5px; border: 2px solid var(--gold); background: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,240,190,.22) 47%, rgba(255,255,255,0) 56%), linear-gradient(#26325a, #141c3c); background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; box-shadow: 0 5px 14px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.2), 0 0 16px rgba(255,212,71,.3); font-family: var(--f-head); font-size: 16px; line-height: 1.2; letter-spacing: .02em; color: #ffeccb; text-shadow: 0 2px 0 rgba(0,0,0,.55); white-space: nowrap; animation: tagShine 4.6s ease-in-out infinite; } /* 折れた しっぽ。旗の すぐ 外に おく（内がわが へこんだ 五角形） */ .title__tag::before, .title__tag::after { content: ''; position: absolute; top: 50%; margin-top: -12px; width: 15px; height: 24px; background: linear-gradient(#e0a92a, #a8741a 60%, #7d4a0c); box-shadow: 0 3px 6px rgba(0,0,0,.4); } .title__tag::before { left: -15px; clip-path: polygon(0 0, 100% 16%, 100% 84%, 0 100%, 42% 50%); } .title__tag::after { right: -15px; clip-path: polygon(100% 0, 0 16%, 0 84%, 100% 100%, 58% 50%); } @keyframes tagShine { 0%, 62% { background-position: 150% 0, 0 0; } 92%, 100% { background-position: -50% 0, 0 0; } } /* ---- 空の あき（画面が 高い ぶんは ここが のびる） ---- */ .title__scene { position: relative; z-index: 2; flex: 1.35 1 0; min-height: 126px; } /* ---- 地面（草 → 土）と そこに いる みんな ---- みんなは この 中で「下から の 位置」で おく。上に はみ出して 立つので overflow は かけない。画面が 高く なっても ボタンの すぐ 上に そろう。 */ .title__land { position: relative; z-index: 3; flex: none; height: 120px; } /* タイトルの 地面（v9.2）。まえは 緑と 茶の まっ平らな 帯 2本だった。 **1マス 12.5px の ブロックの ならび**に する（地図の マス目と 同じ 大きさ）。 四角を 何十個も 置くと 重いので、くり返しの グラデーション 2枚で 作る： たて方向 … 上 2px を 明るく・下 1.5px を 暗く（＝上の 面の 光） よこ方向 … 右はしを 暗く（＝右の 面） 色は そのまま。**マイクラ風の つみき**に 見える ように するだけ。 */ .title__grass, .title__dirt { background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.13) 0 2px, rgba(0,0,0,0) 2px 11px, rgba(0,0,0,.13) 11px 12.5px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 11.3px, rgba(0,0,0,.12) 11.3px 12.5px); } .title__grass { position: absolute; left: 0; right: 0; top: 0; height: 26px; background-color: #63c94a; box-shadow: inset 0 4px 0 rgba(255,255,255,.22); } .title__dirt { position: absolute; left: 0; right: 0; top: 26px; bottom: 0; background-color: #8a5a32; } /* v12.5.1（ユーザー「タイトルの メニューが 出て くるまでの ブルーの 下の カラーが 気に なる。ブラウンに 統一」）： オープニングで ボタン（.title__actions）が せり上がって くる まえ、地面の 下に 空の 青が 見えて いた。 地面の 下を ボタンの 台と 同じ 茶の しま（#7d502c／#714727）で うめる。ボタンは z-index 5 で この 上に のる */ .title__land::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 600px; z-index: 0; background: repeating-linear-gradient(90deg, #7d502c 0 22px, #714727 22px 44px); } .title__speck { position: absolute; background: #7d502c; } .title__speck--a { left: 44px; top: 40px; width: 10px; height: 10px; } .title__speck--b { left: 320px; top: 52px; width: 12px; height: 12px; } .title__speck--c { left: 180px; top: 62px; width: 10px; height: 10px; } /* うかぶ もんだいブロック（A） */ .title__cube { position: absolute; left: 84px; bottom: 150px; z-index: 1; width: 44px; height: 44px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: var(--f-head); font-size: 22px; color: #5a3a06; background: linear-gradient(#ffe6a8, #e8b34d); box-shadow: inset 0 4px 0 rgba(255,255,255,.65), inset 0 -5px 0 rgba(0,0,0,.18); filter: drop-shadow(0 4px 4px rgba(20,20,60,.3)); animation: bob 3.8s ease-in-out .8s infinite; } /* ---- タイトルに ならぶ モンスター（絵は ゲームの 本物）---- */ .tmob { position: absolute; filter: drop-shadow(0 5px 5px rgba(20,20,60,.4)); } .tmob--dragon { left: 250px; bottom: 118px; z-index: 1; animation: bob 3.6s ease-in-out infinite; filter: drop-shadow(0 9px 9px rgba(60,15,10,.4)); } .tmob--bat { left: 26px; bottom: 196px; z-index: 1; animation: bob 3.1s ease-in-out .4s infinite; } .tmob--robo { left: 10px; bottom: 112px; z-index: 1; animation: bob 4.2s ease-in-out .7s infinite; } .tmob--slime { left: 10px; bottom: 76px; z-index: 2; animation: bob 1.9s ease-in-out infinite; } .tmob--lizard { left: 68px; bottom: 74px; z-index: 2; animation: bob 2.6s ease-in-out .3s infinite; } .tmob--ghost { left: 256px; bottom: 82px; z-index: 2; animation: bob 2.9s ease-in-out .5s infinite; } .tmob--golem { left: 320px; bottom: 68px; z-index: 2; animation: bob 3.2s ease-in-out .6s infinite; } .tmob--ninja { left: 38px; bottom: 6px; z-index: 5; animation: bob 2.3s ease-in-out .2s infinite; } .tmob--gold { left: 146px; bottom: 2px; z-index: 5; animation: bob 2.1s ease-in-out .9s infinite; } .tmob--magma { left: 316px; bottom: 4px; z-index: 5; animation: bob 3.4s ease-in-out .4s infinite; } /* ---- タイトルだけ 夕やけの 光（v10.3・ユーザー「B で お願いします」）---- v10.1 で 勇者（`poster()`）に `lit: 'sunset'` が ついた ので、 **勇者だけ 夕日に 照らされて いる** ちぐはぐが 出た。 ここは **タイトルの 中だけ**（`.title` の 下の `.tmob`）。 地図・バトル・ずかん・お知らせの モンスターは いままでの まま。 数字は `docs/v10.1ひかりメモ.md` の sunset に そろえた： ・ふちの 光（リム）＝ **そとがわの 右と 上**に 夕日の 色 #ffcc7c ・すこし あたたかく・すこし はっきり（勇者の sat 0.2 と 同じ 向き） **`box-shadow` は さわらない**（ブロックの 3面の 光が 消える）。 */ .title .tmob .bx { filter: drop-shadow(1.5px -1.5px 0 rgba(255, 204, 124, .5)) saturate(1.1) brightness(1.03); } /* 勇者（決まった 一枚絵。その子の アバターでは ない） */ .title__hero { position: absolute; left: 104px; bottom: 62px; z-index: 4; /* bob が transform を 使うので translateX は 使わない */ animation: bob 2.8s ease-in-out infinite; filter: drop-shadow(0 8px 7px rgba(10,10,40,.45)); } .title__heroimg { display: block; width: 130px; height: 138px; } /* v12.1：2D の 勇者も 3D と 同じ 見本キャラ（48マスの 絵を 138px の わくに・3D の .v3scene と 同じ 大きさ） */ .title__heroimg--avatar { width: 138px; height: 138px; image-rendering: pixelated; } .title__hero.is-2d { filter: drop-shadow(0 6px 5px rgba(10,10,40,.4)); } .title__hero.is-2d .shadow--poster { left: 36px; width: 66px; } .shadow--poster { position: absolute; left: 31px; bottom: -3px; width: 71px; height: 11px; } .shadow { border-radius: 50%; background: rgba(10,20,50,.28); } /* ---- ゴージャスな たからばこ（勇者の 右どなり・手まえ）---- */ .title__chest { position: absolute; left: 232px; bottom: 6px; width: 74px; z-index: 6; filter: drop-shadow(0 6px 6px rgba(10,10,40,.45)); } .title__chest .glow { position: absolute; left: -12px; top: -16px; width: 98px; height: 90px; background: radial-gradient(closest-side, rgba(255,224,122,.55), rgba(255,224,122,0)); } .title__chest .lid { position: relative; margin: 0 2px; height: 17px; border-radius: 8px 8px 0 0; background: linear-gradient(#fff0b8, var(--gold-2)); box-shadow: inset 0 3px 0 rgba(255,255,255,.75), inset 0 -4px 0 #b8791f; } .title__chest .gem { position: absolute; left: 30px; top: 3px; width: 10px; height: 8px; background: #ff4d5e; box-shadow: inset 0 -3px 0 #c22740, 0 0 8px rgba(255,77,94,.85); } .title__chest .coins { position: relative; height: 10px; margin: 0 6px; background: #ffe89a; box-shadow: 0 0 16px rgba(255,224,122,.95); } .title__chest .coins i { position: absolute; display: block; border-radius: 3px; background: var(--gold); box-shadow: inset 0 -3px 0 #d99b18, inset 0 2px 0 #fff0b8; } .title__chest .coins i:nth-child(1) { left: 6px; top: -5px; width: 11px; height: 11px; } .title__chest .coins i:nth-child(2) { left: 24px; top: -8px; width: 12px; height: 12px; background: #ffe07a; } .title__chest .coins i:nth-child(3) { left: 44px; top: -5px; width: 11px; height: 11px; } .title__chest .box { position: relative; margin: 0 2px; height: 36px; background: #8a5320; box-shadow: inset -10px 0 0 #6e3f14, inset 0 4px 0 rgba(255,255,255,.2); } .title__chest .box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--gold); } .title__chest .box::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #b8791f; } .title__chest .band { position: absolute; top: 0; width: 9px; height: 36px; background: linear-gradient(#ffe89a, #e8a838); box-shadow: inset 0 -4px 0 #b8791f; } .title__chest .band--l { left: 8px; } .title__chest .band--r { right: 8px; } .title__chest .lock { position: absolute; left: 27px; top: 0; width: 16px; height: 19px; border-radius: 0 0 5px 5px; background: linear-gradient(#fff0b8, #e8a838); box-shadow: inset 0 -3px 0 #b8791f, 0 0 10px rgba(255,224,122,.8); } .title__chest .lock::after { content: ''; position: absolute; left: 5px; top: 5px; width: 6px; height: 9px; background: #6e3f14; clip-path: polygon(20% 0, 80% 0, 80% 45%, 100% 100%, 0 100%, 20% 45%); } .title__chest .spark--a { top: -12px; right: -6px; width: 20px; height: 20px; background: #fff4c6; filter: drop-shadow(0 0 8px rgba(255,224,122,.95)); animation: pulse 1.7s ease-in-out infinite; } .title__chest .spark--b { top: 6px; left: -8px; width: 13px; height: 13px; animation: pulse 2.2s ease-in-out .6s infinite; } /* ---- いちばん下（ボタン） ---- */ .title__actions { position: relative; z-index: 5; flex: none; padding: 13px 21px 20px; display: flex; flex-direction: column; gap: 11px; background: repeating-linear-gradient(90deg, #7d502c 0 22px, #714727 22px 44px); } .title__row { display: flex; gap: 12px; } .title__row .btn { flex: 1; height: 65px; } .title__row .btn--fix { flex: none; width: 90px; } .title__sound { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; z-index: 6; } /* おうちの人ページの 入口（v7.8）。左上の おと／きょく と 同じ 小さい チップで 右上に */ .sw--parent { position: absolute; top: 8px; right: 8px; z-index: 6; } /* ---- オープニング（v10.4）：アプリを ひらいた とき みんなが とびこんで くる ---- .title に is-opening が ついて いる あいだ（1.75秒）だけ、bob の かわりに とうじょうの アニメを かける。 おわるか タップで is-opening が 外れて、いつもの bob に もどる（bob は translateY(0) から 始まるので つぎ目は 出ない）。 じゅんばん：かんばんが 落ちる（0〜.6秒）→ リボン（.5）→ モンスターが 左右から ジャンプ（.35〜1.2）→ 「A」が 落ちる（.55）→ たからばこ（.95）→ 勇者が 上から 着地（.85〜1.35）→ 着地の しゅんかん（1.15）に 地面が ゆれる・土ぼこり・コインが はじける・かみふぶきが 降る → ボタンが せり上がる（1.2）。 動かすのは transform と opacity だけ（filter に さわると v10.3 の 夕日の ふちや 影が 消える）。 --tshift＝とちゅうで 描き直した とき（フォントが 読めた とき）の おくれ（負の 秒）。さいしょから やり直さず つづきから。 「動きを へらす」の 端末は いちばん 上の reduced-motion の きまりで ぜんぶ 止まり、さいごの 形が そのまま 出る。 */ .title.is-opening .title__plaque { animation: tOpenDrop .6s cubic-bezier(.3,.9,.35,1.15) calc(0s + var(--tshift, 0s)) both; } .title.is-opening .title__tagrow { animation: tOpenPop .38s cubic-bezier(.3,1.4,.5,1) calc(.5s + var(--tshift, 0s)) both; } .title.is-opening .tmob, .title.is-opening .title__hero, .title.is-opening .title__cube, .title.is-opening .title__chest { transform-origin: 50% 100%; } .title.is-opening .tmob--bat { animation: tOpenJumpL .5s ease-out calc(.35s + var(--tshift, 0s)) both; } .title.is-opening .tmob--robo { animation: tOpenJumpL .5s ease-out calc(.42s + var(--tshift, 0s)) both; } .title.is-opening .tmob--slime { animation: tOpenJumpL .5s ease-out calc(.49s + var(--tshift, 0s)) both; } .title.is-opening .tmob--lizard { animation: tOpenJumpL .5s ease-out calc(.56s + var(--tshift, 0s)) both; } .title.is-opening .tmob--ninja { animation: tOpenJumpL .5s ease-out calc(.63s + var(--tshift, 0s)) both; } .title.is-opening .tmob--dragon { animation: tOpenJumpR .5s ease-out calc(.40s + var(--tshift, 0s)) both; } .title.is-opening .tmob--ghost { animation: tOpenJumpR .5s ease-out calc(.47s + var(--tshift, 0s)) both; } .title.is-opening .tmob--golem { animation: tOpenJumpR .5s ease-out calc(.54s + var(--tshift, 0s)) both; } .title.is-opening .tmob--magma { animation: tOpenJumpR .5s ease-out calc(.61s + var(--tshift, 0s)) both; } .title.is-opening .tmob--gold { animation: tOpenJumpR .5s ease-out calc(.68s + var(--tshift, 0s)) both; } .title.is-opening .title__cube { animation: tOpenFall .5s cubic-bezier(.3,.9,.35,1.2) calc(.55s + var(--tshift, 0s)) both; } .title.is-opening .title__chest { animation: tOpenPop .35s cubic-bezier(.3,1.4,.5,1) calc(.95s + var(--tshift, 0s)) both; } .title.is-opening .title__hero { animation: tOpenHero .5s linear calc(.85s + var(--tshift, 0s)) both; } .title.is-opening .title__land { animation: quake1fx .32s linear calc(1.15s + var(--tshift, 0s)) both; } .title.is-opening .title__actions { animation: tOpenRise .45s cubic-bezier(.2,.9,.3,1.1) calc(1.2s + var(--tshift, 0s)) both; } /* かみふぶき：inline の rotate が あるので transform は 使わず margin-top で 降らせる */ .title.is-opening .title__bits i { animation: tOpenBits .8s ease-out calc(1.1s + var(--tshift, 0s)) both; } .title.is-opening .title__bits i:nth-child(even) { animation-delay: calc(1.25s + var(--tshift, 0s)); } /* 土ぼこり（勇者の 足もと）と コイン（たからばこ）。ふだんは opacity 0 で 見えない */ .title__dust, .title__fly { position: absolute; width: 0; height: 0; pointer-events: none; } .title__dust { left: 169px; bottom: 60px; z-index: 5; } .title__fly { left: 269px; bottom: 58px; z-index: 7; } .title__dust i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; background: #e9d9b0; opacity: 0; } .title__fly i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 3px; background: var(--gold); box-shadow: inset 0 -3px 0 #d99b18, inset 0 2px 0 #fff0b8; opacity: 0; } .title__dust i:nth-child(1) { --dx: -42px; --dy: -14px; } .title__dust i:nth-child(2) { --dx: 42px; --dy: -14px; } .title__dust i:nth-child(3) { --dx: -26px; --dy: -30px; } .title__dust i:nth-child(4) { --dx: 26px; --dy: -30px; } .title__dust i:nth-child(5) { --dx: -58px; --dy: -4px; } .title__dust i:nth-child(6) { --dx: 58px; --dy: -4px; } .title__fly i:nth-child(1) { --dx: -46px; --dy: -70px; } .title__fly i:nth-child(2) { --dx: -22px; --dy: -88px; } .title__fly i:nth-child(3) { --dx: 6px; --dy: -94px; } .title__fly i:nth-child(4) { --dx: 30px; --dy: -86px; } .title__fly i:nth-child(5) { --dx: 52px; --dy: -66px; } .title.is-opening .title__dust i { animation: tOpenDust .5s ease-out calc(1.15s + var(--tshift, 0s)) both; } .title.is-opening .title__fly i { animation: tOpenCoin .75s cubic-bezier(.2,.7,.5,1) calc(1.15s + var(--tshift, 0s)) both; } @keyframes tOpenDrop { 0% { transform: translateY(-460px) rotate(-2deg); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(16px) rotate(-2deg); } 85% { transform: translateY(-6px) rotate(-2deg); } 100% { transform: translateY(0) rotate(-2deg); opacity: 1; } } @keyframes tOpenPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes tOpenJumpL { 0% { transform: translate(-190px, -30px); opacity: 0; } 12% { opacity: 1; } 55% { transform: translate(-36px, -58px); } 84% { transform: translate(0, 0) scale(1); } 92% { transform: translate(0, 0) scale(1.08, .9); } 100% { transform: translate(0, 0) scale(1); opacity: 1; } } @keyframes tOpenJumpR { 0% { transform: translate(190px, -30px); opacity: 0; } 12% { opacity: 1; } 55% { transform: translate(36px, -58px); } 84% { transform: translate(0, 0) scale(1); } 92% { transform: translate(0, 0) scale(1.08, .9); } 100% { transform: translate(0, 0) scale(1); opacity: 1; } } @keyframes tOpenFall { 0% { transform: translateY(-220px) rotate(-30deg); opacity: 0; } 20% { opacity: 1; } 75% { transform: translateY(10px) rotate(4deg); } 100% { transform: translateY(0) rotate(0); opacity: 1; } } @keyframes tOpenHero { 0% { transform: translateY(-380px); opacity: 0; } 8% { opacity: 1; } 20% { transform: translateY(-300px); } 40% { transform: translateY(-180px); } 55% { transform: translateY(-40px); } 62% { transform: translateY(0) scale(1); } 72% { transform: translateY(0) scale(1.14, .84); } 86% { transform: translateY(0) scale(.97, 1.04); } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes tOpenRise { 0% { transform: translateY(70px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes tOpenBits { 0% { margin-top: -80px; opacity: 0; } 40% { opacity: 1; } 100% { margin-top: 0; opacity: 1; } } /* 0% は opacity 0（fill both は delay の あいだ 0% の 形で 待つ ので、ここが 見えて いると 着地の 前から 土が 出る） */ @keyframes tOpenDust { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 8% { opacity: .95; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.3); opacity: 0; } } @keyframes tOpenCoin { 0% { transform: translate(0, 10px); opacity: 0; } 15% { opacity: 1; } 55% { transform: translate(var(--dx), var(--dy)); opacity: 1; } 100% { transform: translate(calc(var(--dx) * 1.5), 6px); opacity: 0; } } .sw { min-height: 34px; padding: 0 9px; border: 0; border-radius: 9px; cursor: pointer; background: rgba(14,22,44,.7); color: #a8b6d8; font-family: var(--f-body); font-size: 11px; box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.12); } .sw:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.45); } .sw.is-on { background: linear-gradient(var(--gold-lt), var(--gold-2)); color: var(--gold-ink); box-shadow: 0 3px 0 var(--gold-sh), inset 0 2px 0 #fff; } /* だれで あそぶ？ */ .players { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .player { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 14px; cursor: pointer; background: linear-gradient(var(--hd-1), var(--hd-2)); box-shadow: 0 5px 0 var(--hd-edge), inset 0 2px 0 rgba(255,255,255,.14); color: var(--tx); font-family: var(--f-body); text-align: left; } .player:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--hd-edge); } .player__img { width: 40px; height: 40px; flex: none; } .player__name { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player__lv { font-family: var(--f-head); font-size: 14px; color: var(--gold); } /* ========================================================= 02 ワールドマップ（v1.6 / RPGの 世界地図ふう） 地形は Canvas に マス目で 描く（1マス 12.5px・市松もよう）。 その上に のせる もの（ノード・見出し・かざり・橋・塔）だけが ここ。 ========================================================= */ .map { display: flex; flex-direction: column; height: 100%; background: var(--bg-3); } .map__scroll { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: #2a76c4; } .map__sheet { position: relative; } .map__bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; } .map__layer { position: absolute; inset: 0; } /* v13.4.1：スクロールの 外（.map__view）で 画面に 止まった まま。.map__scroll の 中に もどさない（いっしょに 動いて 地図に よこ線が 出た） */ .map__view { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; } .map__view > .map__scroll { flex: 1; } .map__vig { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 40px rgba(8,16,44,.45); z-index: 8; } /* 木の 板の 橋（川と 道が 交わる ところ） */ .bridge { position: absolute; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, #b58a58 0 5px, #8f6539 5px 7px); box-shadow: inset 0 3px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.28); } /* ゾーン見出し（ノードの 行と かさならない 余白に おく） */ .biome { position: absolute; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 9px; white-space: nowrap; padding: 5px 14px; border-radius: 999px; background: rgba(14,22,44,.88); box-shadow: 0 3px 0 rgba(6,10,26,.5), inset 0 1px 0 rgba(255,255,255,.14); } .biome__name { font-family: var(--f-head); font-size: 15px; color: #fff; } .biome__stars { font-family: var(--f-head); font-size: 13px; color: var(--gold); } /* ---- ステージノード（v8.0 で 1列 3つに して 大きく した）---- */ .node { position: absolute; transform: translate(-50%, -26px); display: flex; flex-direction: column; align-items: center; border: 0; background: none; padding: 0; cursor: pointer; z-index: 4; } .node__dot { position: relative; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--f-head); font-size: 24px; background: linear-gradient(var(--gold-lt), var(--gold-2)); color: var(--gold-ink); box-shadow: 0 5px 0 var(--gold-sh), 0 9px 9px rgba(8,16,44,.4), inset 0 3px 0 rgba(255,255,255,.85), 0 0 0 2px rgba(255,255,255,.5); } .node:active .node__dot { transform: translateY(3px); box-shadow: 0 2px 0 var(--gold-sh), inset 0 3px 0 rgba(255,255,255,.85), 0 0 0 2px rgba(255,255,255,.5); } /* ★は ノードの 下の へりに かさねる */ .node .stars { position: relative; z-index: 1; margin-top: -9px; padding: 0 6px; border-radius: 999px; background: rgba(14,22,44,.82); font-size: 12px; line-height: 16px; letter-spacing: -.5px; } /* 1列 3つ に なった ので 名前も 大きく（v8.0）。となりと ぶつからない はば は 126px */ .node__name { margin-top: 5px; max-width: 126px; padding: 3px 8px; border-radius: 7px; background: rgba(14,22,44,.88); box-shadow: 0 2px 0 rgba(6,10,26,.45); font-size: 13px; line-height: 1.25; color: #fff; text-align: center; } .node__soon { margin-top: 6px; padding: 2px 8px; border-radius: 6px; white-space: nowrap; background: linear-gradient(var(--dgr-1), var(--dgr-2)); box-shadow: 0 2px 0 #8f1c39; font-size: 11px; color: #fff; } .node--lock .node__dot { background: linear-gradient(var(--lock-1), var(--lock-2)); color: var(--lock-tx); font-family: var(--f-body); font-size: 22px; box-shadow: 0 5px 0 var(--lock-sh), 0 9px 9px rgba(8,16,44,.4), inset 0 3px 0 rgba(255,255,255,.2); } .node--lock .node__name { color: #c6d2ee; } .node--fog { cursor: default; } .node--fog .node__dot { background: linear-gradient(#3c4a78, #26304f); color: #93a2c8; font-family: var(--f-body); font-size: 22px; box-shadow: 0 5px 0 #171d34, 0 9px 9px rgba(8,16,44,.4), inset 0 3px 0 rgba(255,255,255,.14); } .node--lock .stars, .node--fog .stars { display: none; } .node--now { z-index: 7; transform: translate(-50%, -30px); } .node--now .node__dot { width: 60px; height: 60px; border-radius: 16px; font-size: 28px; color: #fff; background: linear-gradient(var(--org-1), var(--org-2)); box-shadow: 0 5px 0 var(--org-sh), 0 9px 10px rgba(8,16,44,.45), inset 0 3px 0 rgba(255,255,255,.5), 0 0 22px rgba(255,143,94,.9); animation: pulse 1.6s ease-in-out infinite; } .node__here { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--org-2); font-family: var(--f-head); font-size: 11px; white-space: nowrap; box-shadow: 0 2px 0 rgba(6,10,26,.35); } .node__here::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 5px; margin-left: -4px; background: #fff; } /* ---- さいごの塔（海を はさんだ 小島の 上） ---- */ .tower { position: absolute; transform: translate(-50%, -100%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; padding: 0; cursor: pointer; } .tower__aura { position: absolute; left: 50%; bottom: -58px; width: 260px; height: 215px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgba(205,140,255,.72), rgba(168,86,255,.4) 46%, rgba(126,54,220,0) 100%); } .tower__sign, .tower__sub, .tower__art { position: relative; z-index: 1; } .tower__sign { padding: 3px 10px; border-radius: 7px; background: rgba(14,22,44,.9); box-shadow: 0 3px 0 rgba(6,10,26,.5); font-family: var(--f-head); font-size: 13px; color: #fff; white-space: nowrap; } .tower__sub { padding: 2px 8px; border-radius: 6px; background: rgba(14,22,44,.85); font-size: 11px; color: #f0c7ff; white-space: nowrap; } .tower__art { display: flex; flex-direction: column; align-items: center; margin-top: 3px; filter: drop-shadow(0 6px 6px rgba(10,10,40,.55)); } /* さいごの塔「まおうの 城」（v9.3・3案から ユーザーが B を えらんだ） 四角の ならびは js/ui/map.js の TOWER_B（左・下から・よこ・たて・たね）。 ここは 色と 光だけ。石は モンスターと 同じ 3面の 光（上が 明るく 右と 下が 暗い）＋ まわりに こい ふち。学年で 色を 変えないので box-shadow でも よいが、 かざりと そろえて border と outline で かける。 */ /* 城は 前の 塔より 24px 高い。`.tower` は **下**が 地図の 位置に そろう ので、 そのままだと 看板が 24px 上がって、上の ステージ名と かさなる。 下に はみ出させて（margin-bottom マイナス）**場所を とる 高さを 前と 同じ**に する。 */ .tower__art { position: relative; width: 100px; height: 108px; margin-bottom: -24px; } .twb { position: absolute; display: block; box-sizing: border-box; border-top: 2px solid rgba(255,255,255,.20); border-right: 2px solid rgba(0,0,0,.22); border-bottom: 1px solid rgba(0,0,0,.16); outline: 1px solid rgba(10,8,26,.45); } .twb--stone { background: #4a3a72; } .twb--stone2 { background: #5a4889; } .twb--dark { background: #2f2450; } .twb--gate { background: #150f2c; border-top-color: rgba(255,255,255,.10); } .twb--arch { background: #8b2f4f; } .twb--pole { background: #241b40; } .twb--flag { background: #c9304f; } /* 光る ところ（門の 上の 目・小塔の まど）は ふちを つけずに にじませる */ .twb--eye, .twb--win { border: 0; outline: 0; animation: pulse 1.7s ease-in-out infinite; } .twb--eye { background: #ff4d4d; box-shadow: 0 0 12px #ff4d4d; } .twb--win { background: #ff6a3d; box-shadow: 0 0 9px #ff6a3d; } /* かけらが そろって いない ときは 城ぜんたいを 暗く（目も おとなしく） */ .tower--lock .tower__art { filter: grayscale(.42) brightness(.72); } .tower--lock .twb--eye, .tower--lock .twb--win { animation: none; opacity: .75; } @media (prefers-reduced-motion: reduce) { .twb--eye, .twb--win { animation: none; } } .tower--lock .tower__aura { opacity: .8; } /* ---- 地形の かざり ---- */ .deco { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .deco i { display: block; } /* かざりの 立体感（v9.2）… モンスターと 同じ「上が 明るく・右と 下が 暗い」3面。 **`border` で かける**のが みそ。学年ごとの 色（`.map--g1 .deco--tree i` など）が `box-shadow` を まるごと 上書きする ので、box-shadow で 光を 足すと 小1・小2・ 小4・小5 だけ 消えて しまう。border なら 色を 変えても のこる。 `outline` は 場所を とらずに まわりを かこむ ので、四角どうしの さかいめが 出る。 花（光る 点）と 波は のぞく。 */ .deco--mt i, .deco--tree i, .deco--house i, .deco--rock i, .deco--dead i { box-sizing: border-box; border-top: 2px solid rgba(255,255,255,.26); border-right: 2px solid rgba(0,0,0,.13); border-bottom: 1px solid rgba(0,0,0,.10); outline: 1px solid rgba(14,22,44,.22); } /* 雪山 */ .deco--mt { transform: translate(-50%, -100%); filter: drop-shadow(0 4px 3px rgba(20,30,60,.4)); } .deco--mt i:nth-child(1) { width: 18px; height: 12px; background: #f2f7ff; } .deco--mt i:nth-child(2) { width: 36px; height: 13px; background: #b3bece; box-shadow: inset -10px 0 0 #909cb0; } .deco--mt i:nth-child(3) { width: 54px; height: 16px; background: #9dabbe; box-shadow: inset -16px 0 0 #78859a; } /* 木（3段の カノピー＋幹） */ .deco--tree { transform: translate(-50%, -100%); filter: drop-shadow(0 3px 2px rgba(10,40,15,.42)); } .deco--tree i:nth-child(1) { width: 12px; height: 7px; background: #3a9c46; } .deco--tree i:nth-child(2) { width: 20px; height: 8px; background: #2f8f3d; box-shadow: inset 0 -3px 0 #276f31; } .deco--tree i:nth-child(3) { position: relative; width: 26px; height: 9px; background: #2b8438; box-shadow: inset 0 -3px 0 #21682c; margin-bottom: 7px; } .deco--tree i:nth-child(3)::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -3px; width: 6px; height: 7px; background: #6d4726; } /* 赤い屋根の 家 */ .deco--house { transform: translate(-50%, -100%); filter: drop-shadow(0 3px 2px rgba(20,30,60,.35)); } .deco--house i:nth-child(1) { width: 32px; height: 10px; background: #d65a4a; box-shadow: inset 0 -3px 0 #b8443a, inset 0 2px 0 rgba(255,255,255,.22); } .deco--house i:nth-child(2) { position: relative; width: 24px; height: 15px; background: #f2ead6; box-shadow: inset -4px 0 0 #d9d0ba; } .deco--house i:nth-child(2)::after { content: ''; position: absolute; bottom: 0; left: 9px; width: 7px; height: 9px; background: #6d4726; } .deco--house i:nth-child(3) { display: none; } /* 岩 */ .deco--rock { transform: translate(-50%, -100%); filter: drop-shadow(0 3px 2px rgba(20,30,60,.35)); } .deco--rock i:nth-child(1) { width: 10px; height: 5px; background: #b3bcca; } .deco--rock i:nth-child(2) { width: 20px; height: 9px; background: #98a2b2; box-shadow: inset -6px 0 0 #808b9c; } .deco--rock i:nth-child(3) { display: none; } /* 花（光る 5px の 点） */ .deco--flower { transform: translate(-50%, -100%); } .deco--flower i:nth-child(1) { width: 5px; height: 5px; background: #ffe36b; box-shadow: 0 0 7px rgba(255,227,107,.9); } .deco--flower i:nth-child(2), .deco--flower i:nth-child(3) { display: none; } /* ---- 学年ごとの かざりの 色（v4.7）------------------------ 地面の 色は js/core/tiles.js の THEMES。ここは その上に のる 木・花・岩の 色を そろえる ため。小3は 上の 標準の まま。 */ /* 小1 はるの しま：やわらかい 黄緑の 木と ピンクの 花 */ .map--g1 .deco--tree i:nth-child(1) { background: #62c153; } .map--g1 .deco--tree i:nth-child(2) { background: #55b449; box-shadow: inset 0 -3px 0 #429036; } .map--g1 .deco--tree i:nth-child(3) { background: #4fac45; box-shadow: inset 0 -3px 0 #3c8832; } .map--g1 .deco--flower i:nth-child(1) { background: #ff9ec4; box-shadow: 0 0 7px rgba(255,158,196,.9); } /* 小2 なつの しま：こい 緑の 木と 白い 花 */ .map--g2 .deco--tree i:nth-child(1) { background: #2f9a3f; } .map--g2 .deco--tree i:nth-child(2) { background: #248a35; box-shadow: inset 0 -3px 0 #1a6a28; } .map--g2 .deco--tree i:nth-child(3) { background: #217f31; box-shadow: inset 0 -3px 0 #175f23; } .map--g2 .deco--flower i:nth-child(1) { background: #fffbe8; box-shadow: 0 0 7px rgba(255,251,232,.9); } /* 小4 あきの 大陸：紅葉した 木と 実の 色の 花・くすんだ 岩 */ .map--g4 .deco--tree i:nth-child(1) { background: #e0913a; } .map--g4 .deco--tree i:nth-child(2) { background: #cf7330; box-shadow: inset 0 -3px 0 #a75620; } .map--g4 .deco--tree i:nth-child(3) { background: #bf5c2b; box-shadow: inset 0 -3px 0 #96421c; } .map--g4 .deco--tree i:nth-child(3)::after { background: #6b4a2c; } .map--g4 .deco--flower i:nth-child(1) { background: #ffcf6b; box-shadow: 0 0 7px rgba(255,207,107,.85); } .map--g4 .deco--rock i:nth-child(1) { background: #b7ae9f; } .map--g4 .deco--rock i:nth-child(2) { background: #9d9483; box-shadow: inset -6px 0 0 #857c6c; } /* 小5 ふゆの 大陸（v6.5）：雪を かぶった 木・氷の 花・青みの 岩 */ .map--g5 .deco--tree i:nth-child(1) { background: #e8f1f7; } .map--g5 .deco--tree i:nth-child(2) { background: #2f6b4f; box-shadow: inset 0 -3px 0 #24523c; } .map--g5 .deco--tree i:nth-child(3) { background: #27563f; box-shadow: inset 0 -3px 0 #1c4030; } .map--g5 .deco--tree i:nth-child(3)::after { background: #5a3f2a; } .map--g5 .deco--flower i:nth-child(1) { background: #9fe3ff; box-shadow: 0 0 7px rgba(159,227,255,.9); } .map--g5 .deco--rock i:nth-child(1) { background: #aab7c9; } .map--g5 .deco--rock i:nth-child(2) { background: #8d9bb0; box-shadow: inset -6px 0 0 #74829a; } /* 小6 やみの 大陸（v11.0・ユーザー指定「小6は 闇の ステージ」）。 かれ木・むらさきに 光る 花・黒い 岩。地面の 色は js/core/tiles.js の THEMES.g6 */ .map--g6 .deco--tree i:nth-child(1) { background: #3a2f52; } .map--g6 .deco--tree i:nth-child(2) { background: #2a2140; box-shadow: inset 0 -3px 0 #1e1830; } .map--g6 .deco--tree i:nth-child(3) { background: #241d38; box-shadow: inset 0 -3px 0 #171227; } .map--g6 .deco--tree i:nth-child(3)::after { background: #4a3a2c; } .map--g6 .deco--flower i:nth-child(1) { background: #c07bff; box-shadow: 0 0 8px rgba(176,75,255,.95); } .map--g6 .deco--rock i:nth-child(1) { background: #5a5170; } .map--g6 .deco--rock i:nth-child(2) { background: #453d5a; box-shadow: inset -6px 0 0 #332c45; } /* 分数の 見た目（v6.5・小5）。問題文の 中で 分子を 上、分母を 下に */ .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; margin: 0 3px; font-family: var(--f-head); } .frac__n { border-bottom: 2px solid currentColor; padding: 0 4px; } .frac__d { padding: 0 4px; } .mixed { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; } .mixed__w { font-family: var(--f-head); } .mixed .frac { font-size: .78em; } /* 枯れ木（塔の 小島） */ .deco--dead { transform: translate(-50%, -100%); filter: drop-shadow(0 3px 2px rgba(20,10,40,.5)); } .deco--dead i:nth-child(1) { width: 17px; height: 3px; background: #6b5b52; } .deco--dead i:nth-child(2) { width: 11px; height: 3px; background: #5c4d45; margin-top: 4px; } .deco--dead i:nth-child(3) { width: 5px; height: 15px; background: #4e4039; } /* 光る 紫の クリスタル（塔の 小島） */ .deco--crystal { transform: translate(-50%, -100%); } .deco--crystal i:nth-child(1) { width: 6px; height: 6px; background: #d6a9ff; box-shadow: 0 0 10px rgba(180,107,255,.95); } .deco--crystal i:nth-child(2) { width: 11px; height: 14px; background: #b46bff; box-shadow: 0 0 12px rgba(180,107,255,.8), inset -3px 0 0 rgba(0,0,0,.25), inset 0 3px 0 rgba(255,255,255,.3); } .deco--crystal i:nth-child(3) { display: none; } /* 海の 白い 波 */ .deco--wave { transform: none; width: 16px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.55); animation: drift 6s ease-in-out infinite alternate; z-index: 1; } /* ---- 上下の バー ---- */ .maptop { flex: none; } /* きょうの ミッション（v3.1） */ .missions { margin: 0 12px 6px; border-radius: 12px; background: linear-gradient(var(--navy-1), var(--navy-2)); box-shadow: 0 4px 0 var(--navy-sh); overflow: hidden; } .missions__head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: 0; background: transparent; color: #fff; cursor: pointer; font-family: var(--f-head); font-size: 15px; text-align: left; } .missions__title { flex: 1; color: var(--gold); } .missions__count { font-size: 14px; color: #fff; } .missions__arrow { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--gold); transition: transform .2s; } .missions.is-open .missions__arrow { transform: rotate(180deg); } .missions__list { display: none; padding: 0 10px 8px; } .missions.is-open .missions__list { display: block; } .mission { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.08); font-family: var(--f-body); font-size: 14px; color: #dbe4ff; } .mission__check { flex: none; width: 22px; height: 22px; border-radius: 6px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-head); font-size: 14px; color: #fff; } .mission.is-done .mission__check { background: linear-gradient(var(--grn-1), var(--grn-2)); box-shadow: 0 2px 0 var(--grn-sh); } .mission.is-done .mission__text { color: #9fb2dd; text-decoration: line-through; } .mission__text { flex: 1; min-width: 0; } .mission__prog { flex: none; font-size: 12px; color: var(--gold); } .missions__all { margin-top: 4px; font-size: 11px; color: var(--tx-sub); text-align: right; } .missions.is-all .missions__all { color: var(--gold); } .missions.is-all .missions__head { color: var(--gold); } /* ---- きょうの フィーバー教科（v7.2）：HUD の すぐ 下の オレンジの 帯 ---- */ .fever { position: relative; margin: 6px 12px 4px; padding: 6px 12px 7px; border-radius: 12px; overflow: hidden; background: linear-gradient(var(--org-1), var(--org-2)); box-shadow: 0 4px 0 var(--org-sh), inset 0 2px 0 rgba(255,255,255,.4); color: #fff; display: flex; flex-direction: column; gap: 2px; } /* v13.10：光の すじは left で なく transform で 動かす（left は 毎コマ レイアウトの やり直し）。left −40%→120% ＝ 自分の はば（40%）の 0→400% */ .fever::before { content: ''; position: absolute; top: -40%; left: -40%; width: 40%; height: 180%; background: rgba(255,255,255,.18); transform: translateX(0) rotate(18deg); animation: feverShine 3.2s ease-in-out infinite; pointer-events: none; } @keyframes feverShine { 0% { transform: translateX(0) rotate(18deg); } 60% { transform: translateX(400%) rotate(18deg); } 100% { transform: translateX(400%) rotate(18deg); } } .fever__row { display: flex; align-items: center; gap: 8px; } .fever__star { flex: none; width: 18px; height: 18px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 6px rgba(255,232,154,.95)); animation: pulse 1.4s ease-in-out infinite; } .fever__label { flex: none; font-family: var(--f-head); font-size: 11px; color: #ffe89a; letter-spacing: .04em; } .fever__name { flex: 1; min-width: 0; font-family: var(--f-head); font-size: 18px; line-height: 1.2; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.28); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fever__go { flex: none; min-height: 32px; padding: 0 12px; font-size: 14px; } .fever__sub { font-size: 12px; color: #fff3d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fever__pal { display: flex; align-items: center; gap: 6px; } .fever__palimg { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; } .fever__bubble { position: relative; min-width: 0; padding: 3px 9px; border-radius: 10px; background: #fff; color: #1c2647; font-size: 12px; line-height: 1.3; box-shadow: 0 2px 0 rgba(0,0,0,.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fever__bubble::before { content: ''; position: absolute; left: -6px; top: 8px; border: 5px solid transparent; border-right-color: #fff; border-left: 0; } /* 地図の ゾーン見出し と ステージも 光る */ .biome--fever { box-shadow: 0 0 0 2px var(--gold), 0 3px 0 rgba(6,10,26,.5), 0 0 16px rgba(255,212,71,.7), inset 0 1px 0 rgba(255,255,255,.14); } .biome__fever { padding: 1px 8px; border-radius: 999px; background: linear-gradient(var(--org-1), var(--org-2)); font-family: var(--f-head); font-size: 11px; color: #fff; box-shadow: 0 2px 0 var(--org-sh); animation: pulse 1.4s ease-in-out infinite; } .node--fever .node__dot { box-shadow: 0 5px 0 var(--gold-sh), 0 9px 10px rgba(8,16,44,.45), inset 0 3px 0 rgba(255,255,255,.5), 0 0 0 3px var(--org-1), 0 0 18px rgba(255,160,60,.95); } .node--fever.node--now .node__dot { box-shadow: 0 5px 0 var(--org-sh), 0 9px 10px rgba(8,16,44,.45), inset 0 3px 0 rgba(255,255,255,.5), 0 0 0 3px var(--gold), 0 0 24px rgba(255,212,71,1); } /* バトル：上の バーの ピル と、さいしょの 1問めの 帯 */ .pillstat__fever { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: linear-gradient(var(--org-1), var(--org-2)); font-family: var(--f-head); font-size: 11px; color: #fff; font-style: normal; box-shadow: 0 2px 0 var(--org-sh); vertical-align: 1px; } .modebanner { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); z-index: 7; max-width: 340px; padding: 6px 14px 7px; background: rgba(10,14,34,.9); border: 2px solid var(--gold); border-radius: 10px; text-align: center; line-height: 1.3; animation: modeBanner 2.6s ease-out forwards; } .modebanner--fever { border-color: var(--org-1); box-shadow: 0 0 18px rgba(255,160,60,.7); } .modebanner b { display: block; font-family: var(--f-head); font-size: 15px; color: var(--gold); text-shadow: 0 1px 0 rgba(0,0,0,.7); } .modebanner span { display: block; font-size: 11px; color: #ffe9a8; } @keyframes modeBanner { 0% { opacity: 0; transform: translate(-50%, -8px) scale(.92); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .modebanner, .fever::before { animation-duration: .01s; } } /* けっか画面の 1行 */ .rs__fever { margin: -2px 0 0; padding: 4px 10px; border-radius: 10px; text-align: center; font-size: 12px; line-height: 1.35; color: #ffe0b8; background: rgba(255,143,94,.16); box-shadow: inset 0 0 0 2px var(--org-1); } /* おうちの人ページ */ .pfever { margin-bottom: 18px; } .pfever__now { margin: 0 0 4px; font-family: var(--f-head); font-size: 15px; color: var(--gold-lt); } .pfever__list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; } .pfever__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 4px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 12px; color: #c6d2ee; } .pfever__row.is-fever { box-shadow: inset 0 0 0 2px var(--org-1); color: #fff; } .pfever__name { font-family: var(--f-head); font-size: 13px; color: #fff; } .pfever__lv { text-align: right; color: #ffe9a8; } /* ========================================================= 地図の 上と 下（v8.0）：上を たたんで 地図を 広く する 前は 顔・フィーバー・ミッション・ボタン3つ・学年チップ で **355px**（たて700 の タブレットでは 画面の 半分）。いまは 顔 60px ＋ 帯 40px の 100px だけ。 .mapobi … フィーバーと ミッションを まとめた 1本の 帯（押すと ひらく） .mappanel … その 中身。地図の 上に かぶさる（地図を せまく しない） .mapdim … かぶさって いる あいだの 黒み。さわると とじる .maptabs … 画面の 下の ボタンの 段（図かん・タイムアタック・プレイヤー・学年） .gradesheet… 学年えらび。「小3 ▾」で 出る ========================================================= */ .maptop { position: relative; z-index: 6; } .mapobi { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 0 8px; border: 0; cursor: pointer; background: var(--bg-2); border-bottom: 3px solid var(--hd-edge); font-family: var(--f-body); text-align: left; } .mapobi__fever { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 9px; border-radius: 999px; color: #fff; background: linear-gradient(var(--org-1), var(--org-2)); box-shadow: 0 3px 0 var(--org-sh), inset 0 2px 0 rgba(255,255,255,.4); } .mapobi__star { flex: none; width: 13px; height: 13px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px rgba(255,232,154,.95)); animation: pulse 1.4s ease-in-out infinite; } .mapobi__lbl { flex: none; font-family: var(--f-head); font-size: 10px; color: #ffe89a; letter-spacing: .04em; } .mapobi__name { flex: 1; min-width: 0; font-family: var(--f-head); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 rgba(0,0,0,.28); } .mapobi__x2 { flex: none; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.28); font-family: var(--f-head); font-size: 11px; font-style: normal; } .mapobi__mis { flex: none; display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; background: linear-gradient(var(--navy-1), var(--navy-2)); box-shadow: 0 3px 0 var(--navy-sh); color: var(--gold); font-size: 12px; } .mapobi__mis b { color: #fff; font-family: var(--f-head); } .mapobi__mis.is-all { color: var(--gold-lt); box-shadow: 0 3px 0 var(--navy-sh), inset 0 0 0 2px var(--gold); } .mapobi__arrow { flex: none; width: 0; height: 0; margin: 0 4px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--gold); transition: transform .2s; } .mapobi.is-open .mapobi__arrow { transform: rotate(180deg); } .mappanel { position: absolute; left: 0; right: 0; top: 100%; z-index: 7; max-height: calc(var(--stage-h) - 190px); overflow-y: auto; padding: 8px 0 10px; background: rgba(16,26,51,.97); border-radius: 0 0 14px 14px; box-shadow: 0 10px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1); } .mappanel .missions { margin-bottom: 0; } .mapdim { position: absolute; inset: 0; z-index: 5; background: rgba(8,12,30,.45); } .mapbottom { position: relative; z-index: 6; } .maptabs { display: flex; gap: 6px; padding: 7px 10px; background: var(--bg-2); border-top: 3px solid var(--hd-edge); } .maptab { flex: 1; min-height: 42px; padding: 0 4px; border: 0; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; background: linear-gradient(var(--navy-1), var(--navy-2)); color: var(--navy-tx); font-family: var(--f-body); font-size: 13px; box-shadow: 0 4px 0 var(--navy-sh), inset 0 2px 0 rgba(255,255,255,.18); } .maptab:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy-sh), inset 0 2px 0 rgba(255,255,255,.18); } .maptab--grade { flex: 0 0 78px; color: var(--gold-ink); background: linear-gradient(var(--gold-lt), var(--gold-2)); box-shadow: 0 4px 0 var(--gold-sh), inset 0 2px 0 #fff; } .maptab--grade b { font-family: var(--f-head); font-size: 15px; } .maptab__arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--gold-ink); } .gradesheet { padding: 8px 0 2px; background: var(--bg-2); box-shadow: 0 -6px 14px rgba(0,0,0,.4); } .gradesheet__note { margin: 0 12px 6px; font-size: 12px; color: var(--tx-sub); } .gradesheet .grrow { border-bottom: 0; padding-top: 0; } /* がくねん えらび（v4.5）。予習・復習で いつでも 変えられる。★＝その子の 学年 */ .grrow { display: flex; gap: 5px; padding: 8px 12px; background: var(--bg-2); border-bottom: 3px solid var(--hd-edge); } .chip--g { flex: 1; min-height: 34px; padding: 0; justify-content: center; position: relative; font-family: var(--f-head); font-size: 14px; letter-spacing: .02em; box-shadow: 0 3px 0 var(--navy-sh); } .chip--g.is-on { box-shadow: 0 3px 0 var(--gold-sh); } .chip--g.is-prep { opacity: .4; } .chip__own { position: absolute; top: -5px; right: -1px; font-size: 10px; font-style: normal; color: var(--gold-lt); } .chip--g.is-on .chip__own { color: #7a5a00; } .mapbottom { flex: none; } /* ========================================================= 03 バトル ========================================================= */ .battle { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--bg-1); } /* バトルの 絵の 高さは 画面の たてに あわせて のびちぢみ する */ /* v5.6：どうしても 問題が 入らない ときだけ、バトル画面を 少し ちぢめて 場所を つくる。 ふだんは これまでどおり（v2.7.2 で 決めた 高さ）。 */ .battle.is-cram .arena { height: clamp(150px, calc(var(--stage-h) * 0.24), 232px); } .battle.is-cram .key { height: clamp(36px, calc(var(--stage-h) * 0.052), 46px); } .battle.is-cram .choice { min-height: 46px; } .arena { position: relative; height: clamp(176px, calc(var(--stage-h) * 0.30), 232px); /* v2.7.2：少し 高く。タイムと モンスターが かぶらない ように */ flex: none; overflow: hidden; background: linear-gradient(#4fb8f5 0%, #86d6ff 55%, #b7e8ff 100%); } /* ---- バトルの 背景（CSS の しきつめ。画像ファイルは 使わない） ---- */ .arena__bg { position: absolute; inset: 0; } .arena__sky { position: absolute; inset: 0; background: linear-gradient(#4fb8f5 0%, #86d6ff 55%, #b7e8ff 100%); } /* 遠くの 山・地面は v12.6 から css/scenery.css（.bgfar／.afloor） */ .arena__grass { position: absolute; left: 0; right: 0; bottom: 60px; height: 14px; background: repeating-linear-gradient(90deg, #6fcf4a 0 24px, #63c243 24px 48px); } .cloud--c { top: 54px; left: 40px; animation: drift 10s ease-in-out infinite alternate; } .cloud--c i { width: 18px; height: 18px; } .cloud--c i:nth-child(2) { height: 34px; } /* エリアごとの 時間帯 */ .arena__bg--forest .arena__sky { background: linear-gradient(#3a3f7a 0%, #9c55c4 42%, #ff8d5c 78%, #ffcf8a 100%); } .arena__bg--forest .arena__grass { background: repeating-linear-gradient(90deg, #4b9b44 0 24px, #43913c 24px 48px); } .arena__bg--sea .arena__sky { background: linear-gradient(#2f8fd8 0%, #71c8f2 52%, #b7e8ff 100%); } .arena__bg--sea .arena__grass { background: repeating-linear-gradient(90deg, #4b8fd8 0 24px, #4587cf 24px 48px); } .arena__bg--sky .arena__sky { background: linear-gradient(#5aa6ea 0%, #a8d8f5 50%, #e6f4ff 100%); } .arena__bg--sky .arena__grass { background: repeating-linear-gradient(90deg, #ffffff 0 24px, #f2fbff 24px 48px); } .arena__bg--tower .arena__sky { background: linear-gradient(#0d1220 0%, #241a4a 55%, #3b2a63 100%); } .arena__bg--tower .arena__grass { background: repeating-linear-gradient(90deg, #4b3a7a 0 24px, #43336d 24px 48px); } .arena__bg--tower .cloud--c { display: none; } /* ---- 主人公と 敵 ---- */ .shadow--hero { position: absolute; left: 6px; bottom: -6px; width: 74px; height: 9px; } .shadow--foe { position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 62px; height: 8px; } .enemy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; } .enemy--small .shadow--foe { width: 44px; } .enemy--boss .shadow--foe { width: 80px; } .enemy--r3 .shadow--foe { width: 72px; } .enemy--rare .enemy__img { filter: drop-shadow(0 0 10px rgba(255,212,71,.95)) drop-shadow(0 4px 4px rgba(10,10,40,.45)); } /* リベンジ（v3.1）：赤い オーラ＋リボン */ .enemy--revenge .enemy__img { filter: drop-shadow(0 0 10px rgba(255,70,70,.95)) drop-shadow(0 4px 4px rgba(10,10,40,.45)); } .enemy--revenge .enemy__name { background: linear-gradient(#c62828, #8e1f1f); color: #fff; } .enemy__ribbon { position: absolute; top: -14px; right: -2px; padding: 2px 8px; border-radius: 6px; background: linear-gradient(#ff5e3a, #c62828); color: #fff; font-family: var(--f-head); font-size: 11px; white-space: nowrap; box-shadow: 0 2px 0 #7d1f1f; animation: pulse 1.2s ease-in-out infinite; z-index: 3; } .enemy__img .bx { pointer-events: none; } .enemy--done { opacity: .28; filter: grayscale(1); } .enemy--waiting { opacity: .82; } .enemy__name { position: static; padding: 3px 8px; border-radius: 8px; background: rgba(16,24,48,.85); font-size: 11px; color: #ffd0d8; white-space: nowrap; } .enemy--boss .enemy__name { font-size: 13px; } /* ボスは 絵が 大きいので、名前と HP は 足もとに かさねる （たてに ならべると 頭が バトル画面から はみ出す） */ .enemy--boss .enemy__name { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; } .enemy--boss .bosshp { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 28px; } /* ラスボス（112px）は 足もとが 右下の アイテムボタンに かくれる ので、名前と HP は 頭の 上に（v6.4） */ .enemy--last .enemy__name { top: auto; bottom: 100%; left: auto; right: 0; transform: none; margin: 0 0 3px; } .enemy--last .bosshp { margin-top: 2px; } /* ボス戦の 画面を 見やすく（v12.8・息子さんの 実機の 写真「バトルシーンが 台無し」） 1体だけの ボスは 名前・弱点・HP を 右上の パネルに まとめる。足もとに おくと 右下の アイテムボタンに かくれ、 頭の 上に おくと 3D の 図が 上まで あって 画面から はみ出た。ぶんしん・呼ばれた ザコの となり（twin）は いままで どおり */ .bossinfo { position: absolute; top: 6px; right: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; pointer-events: none; } .bossinfo[hidden] { display: none; } .bossinfo .enemy__name { position: static; transform: none; margin: 0; font-size: 12px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .bossinfo__row { display: flex; align-items: center; justify-content: flex-end; gap: 4px; } .bossinfo__row:empty { display: none; } .bossinfo .enemy__weak { position: static; transform: none; margin: 0; } .bossinfo .foecharge { position: static; transform: none; margin: 0; padding: 3px 5px; border-radius: 999px; background: rgba(10,16,40,.72); } .hpbar--boss .hpbar__fill { background: linear-gradient(90deg, #ff8a5a, #ff3d5e); } /* ボス戦の バーは ボスの HP＝赤 */ .enemy--last .foecharge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); margin: 0; } /* 名前が 頭の 上から パネルへ うつった ので ためは 頭の 上に もどす */ .combo.is-sp { font-size: 20px; max-width: 150px; white-space: normal; line-height: 1.05; } /* 「13 コンボ！／ひっさつ！」は 2行に（右下の アイテムボタンの 下に もぐらない） */ /* 相棒の なまえと ゲージは 左はしに そろえる（まん中ぞろえだと 長い なまえが 画面の 左に はみ出た＝実機の 写真） */ /* ---- 当たった／よけた などの うごき ---- */ .is-appear { animation: popin .22s ease-out; } .is-hit { animation: hitfx .3s ease-out; } /* ひっさつの ふっとび（is-hit より 強い。12コンボ〜は 大きく、16〜は すいこまれて はじける） */ .is-blast { animation: blastfx .45s ease-out; } .is-blast-big { animation: blastbigfx .62s ease-out; } .is-blast-max { animation: blastmaxfx .78s ease-in-out; } .is-down { animation: downfx .5s ease-in forwards; } .is-bossdown { animation: downfx .9s ease-in forwards; } .is-flee { animation: fleefx .5s ease-in forwards; } .is-out { opacity: 0; } .is-attack { animation: attackfx .32s ease-out; } .is-dodge { animation: dodgefx .34s ease-out; } .is-hurt { animation: hurtfx .3s ease-out; } .is-guard { animation: hurtfx .3s ease-out; } .is-special { animation: specialfx .5s ease-out; } .is-enrage { filter: drop-shadow(0 0 12px rgba(255,94,122,.9)); } .is-shake { animation: shakefx .4s ease-out; } .is-flash { animation: flashfx .3s ease-out; } .is-run { animation: runfx .5s ease-out; } .combo.is-pop { animation: popin .22s ease-out; } .combo--crit { color: #ffe07a; } .pillstat.is-hurry { background: rgba(120,20,40,.9); } .pillstat.is-hurry b { color: #ffd0d8; } @keyframes blastfx { 0% { transform: translateX(0); filter: brightness(1); } 15% { transform: translateX(-22px) rotate(-8deg); filter: brightness(3); } 50% { transform: translateX(14px) rotate(5deg); filter: brightness(1.6); } 100% { transform: translateX(0) rotate(0); filter: brightness(1); } } @keyframes blastbigfx { 0% { transform: translate(0,0); filter: brightness(1); } 12% { transform: translate(-30px,-16px) rotate(-14deg); filter: brightness(3.5); } 40% { transform: translate(18px,-6px) rotate(10deg); filter: brightness(2); } 70% { transform: translate(-8px,0) rotate(-4deg); } 100% { transform: translate(0,0); filter: brightness(1); } } @keyframes blastmaxfx { 0% { transform: scale(1) rotate(0); filter: brightness(1); } 55% { transform: scale(.55) rotate(180deg); filter: brightness(.6); } 66% { transform: scale(.3) rotate(360deg); filter: brightness(4); } 80% { transform: scale(1.5) rotate(390deg); filter: brightness(3); } 100% { transform: scale(1.3) rotate(400deg); filter: brightness(2); } } @keyframes hitfx { 0% { transform: translateX(0); } 30% { transform: translateX(-7px); } 60% { transform: translateX(5px); } 100% { transform: translateX(0); } } @keyframes downfx { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(26px) rotate(28deg); opacity: 0; } } @keyframes fleefx { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(60px); opacity: 0; } } @keyframes attackfx { 0% { transform: translateX(0); } 45% { transform: translateX(26px); } 100% { transform: translateX(0); } } /* ========================================================= こうげきの 演出（v7.5） ① 斬撃の 弧　② 光の つぶ・まっ白・画面の 寄り　③ モーション 3種 ④ コンボで 大きく　⑤ とどめ ========================================================= */ /* ③ モーション 3種。どれも 主人公が 敵の ほうへ 出て もどる */ .hero.atk--slash { animation: atkSlash .34s ease-out; } .hero.atk--thrust { animation: atkThrust .30s cubic-bezier(.2,.9,.3,1); } .hero.atk--smash { animation: atkSmash .40s ease-out; } @keyframes atkSlash { 0% { transform: translate(0,0) rotate(0); } 40% { transform: translate(28px,-4px) rotate(-12deg); } 100% { transform: translate(0,0) rotate(0); } } @keyframes atkThrust { 0% { transform: translateX(0) scaleX(1); } 35% { transform: translateX(38px) scaleX(1.12); } 100% { transform: translateX(0) scaleX(1); } } @keyframes atkSmash { 0% { transform: translate(0,0); } 30% { transform: translate(14px,-16px); } 55% { transform: translate(26px,4px); } 100% { transform: translate(0,0); } } /* ⑤ とどめは ゆっくり 大きく */ .hero.is-finish { animation-duration: .58s !important; } .hero.is-finish.atk--slash { animation-name: atkSlashBig; } .hero.is-finish.atk--thrust { animation-name: atkThrustBig; } .hero.is-finish.atk--smash { animation-name: atkSmashBig; } @keyframes atkSlashBig { 0% { transform: translate(0,0) rotate(0) scale(1); } 18% { transform: translate(-8px,0) scale(1.06); } 52% { transform: translate(34px,-6px) rotate(-16deg) scale(1.16); } 100% { transform: translate(0,0) rotate(0) scale(1); } } @keyframes atkThrustBig { 0% { transform: translateX(0) scale(1); } 20% { transform: translateX(-10px) scale(1.06); } 50% { transform: translateX(46px) scale(1.18); } 100% { transform: translateX(0) scale(1); } } @keyframes atkSmashBig { 0% { transform: translate(0,0) scale(1); } 22% { transform: translate(8px,-26px) scale(1.12); } 52% { transform: translate(30px,6px) scale(1.18); } 100% { transform: translate(0,0) scale(1); } } /* ① 斬撃の 閃光。敵の 上を ななめに 走る 光の すじ（教科の 色）。 まん中が 白く、はしに 行くほど 教科の 色 → すきとおる */ .slash { position: absolute; left: 50%; top: 50%; width: 62px; height: 9px; margin: -4px 0 0 -31px; pointer-events: none; z-index: 5; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--el, #ffd447) 22%, #ffffff 50%, var(--el, #ffd447) 74%, rgba(255,255,255,0) 100%); filter: drop-shadow(0 0 6px var(--el, #ffd447)); transform: rotate(var(--r, -34deg)); animation: slashFx .32s ease-out forwards; } /* ④ コンボが 乗ると 太く 長く */ .slash--big { width: 84px; height: 13px; margin: -6px 0 0 -42px; } /* ③ モーションで 向きが 変わる（斬る＝ななめ／突く＝よこ／たたく＝たて）*/ .slash--slash { --r: -34deg; } .slash--thrust { --r: 0deg; } .slash--smash { --r: -78deg; } @keyframes slashFx { 0% { opacity: 0; transform: rotate(var(--r, -34deg)) scaleX(.15) scaleY(.6); } 22% { opacity: 1; } 60% { opacity: 1; transform: rotate(var(--r, -34deg)) scaleX(1) scaleY(1); } 100% { opacity: 0; transform: rotate(var(--r, -34deg)) scaleX(1.3) scaleY(.5); } } /* ② 光の つぶ（白い 四角が 外に はじける）*/ .sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 5; } .sparks__p { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: #fffbe8; box-shadow: 0 0 6px 2px rgba(255,240,180,.9); animation: sparkFx .34s ease-out forwards; } @keyframes sparkFx { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,0)) scale(.3); } } /* ② 敵が 一瞬 まっ白に */ .enemy__img.is-white { filter: brightness(4) saturate(0) drop-shadow(0 4px 4px rgba(10,10,40,.45)); } /* ② 画面が ぐっと 寄る（当たった 手ごたえ）*/ .arena.is-punch { animation: punchFx .14s ease-out; } .arena.is-punch-big { animation: punchBigFx .2s ease-out; } @keyframes punchFx { 0%,100% { transform: scale(1); } 45% { transform: scale(1.018); } } @keyframes punchBigFx { 0%,100% { transform: scale(1); } 40% { transform: scale(1.035); } } @media (prefers-reduced-motion: reduce) { .slash, .sparks__p, .arena.is-punch, .arena.is-punch-big { animation-duration: .01s; } } @keyframes dodgefx { 0% { transform: translateX(0); } 45% { transform: translateX(-16px); } 100% { transform: translateX(0); } } @keyframes hurtfx { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } @keyframes specialfx { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } } @keyframes shakefx { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-5px,3px); } 75% { transform: translate(5px,-3px); } } @keyframes flashfx { 0% { filter: brightness(3); } 100% { filter: brightness(1); } } @keyframes runfx { 0% { transform: translateX(0); } 100% { transform: translateX(-30px); } } .arena__field { position: absolute; inset: 0; } .arena__top { position: absolute; top: 10px; left: 10px; width: 256px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; z-index: 3; } /* 右がわは あけて モンスターと かぶらない */ .arena__msg.is-quiet { opacity: 0; } /* ふきだし＝アリーナの いちばん 下の 帯（v12.9）。 前は 勇者と てきの あいだ（top 70・left 132・max 152）に おいて いたが、タブレット（ステージ 700）だと 2体 ならぶ てき・ぶんしん・呼ばれた ザコが ふきだしの うしろに かくれた（ユーザー「吹き出しで モンスター 隠れてる」）。 足もとの 下（ゆかの 上）なら だれも かくれない。右は 小さく なった アイテムボタン（44px）の ぶんだけ あける */ .arena__msg { position: absolute; left: 8px; right: 62px; bottom: 6px; padding: 5px 10px; border-radius: 12px; background: #fff; color: #1c2647; font-size: 13px; line-height: 1.35; box-shadow: 0 4px 0 rgba(0,0,0,.22); z-index: 4; /* v10.5：相棒（3）より 上。ふきだしは いつも 読める */ } /* v10.5：カットインの あいだ（0.62秒）は ふきだしと 相棒を 消す。 帯は 半透明なので、下に ふきだしと 相棒が いると すけて 見えて ごちゃごちゃ した（息子さん「相棒が 前に かぶる」）。 相棒は カットインの 中（.cutin__pal）に 出て いる ので、ここで 消えても「とびこんだ」ように 見える。 */ .arena__msg, .pal { transition: opacity .12s ease-out; } .arena.is-cutin .arena__msg { opacity: 0; } /* v12.2.1：相棒は 消さない（カットインは 上・相棒は 下の 草。③で 走って いる） */ .foes { position: absolute; right: 16px; bottom: 62px; display: flex; align-items: flex-end; gap: 8px; z-index: 2; } /* 主人公は 76 → 88px（v9.4）。HD で 点の 数が 2倍に なった ので、 大きく しても ぼやけない。てきは もともと 72〜112px で 大きかった ので そのまま。 ふきだし（.arena__msg）の 左はしと ぶつかる ので、少し 左に よせて ある。 */ /* v12.1：主人公を 32px 右へ。左はしの 同じ 地面に 相棒が 立つ（ユーザー「相棒の 位置に 違和感」→ まん中の 暗い ゆかから、主人公の うしろの 草の 上へ） */ .hero { position: absolute; left: 46px; bottom: 62px; z-index: 2; } .hero__img { image-rendering: pixelated; } .hero__img, .enemy__img { filter: drop-shadow(0 4px 4px rgba(10,10,40,.45)); } .hero__img { width: 84px; height: 84px; animation: bob 2.4s ease-in-out infinite; } .enemy__img { animation: bob 1.8s ease-in-out infinite; } /* ---- なかま（相棒・v4.3）：主人公と てきの あいだ・手まえに 小さく いる ---- v10.5：left 134 / bottom 20 → **left 190 / bottom 12**。前の 場所は ふきだし（top 70・2〜3行で y 130 まで）の まっ下で、頭が ふきだしに かぶり（あとに 描く 相棒が 勝つ）、名前と ゲージは 左下の ためゲージ（x 12〜170）と コンボの 字に かくれて いた。まん中（x 190〜230）なら ふきだし・ためゲージ・アイテムボタン（x 240〜）の どれとも ぶつからない。 */ /* v12.1：相棒は 主人公の うしろ（左はし）・同じ 草の 上（bottom 62）・主人公より うしろ（z 1）。 なまえと ゲージは 足もとの 下（暗い ゆか）に 出す。ためゲージと コンボは 54px 右へ よけた */ .pal { position: absolute; left: 6px; bottom: 62px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; } .pal__name { position: absolute; bottom: 100%; left: 0; margin-bottom: 2px; } /* v12.9：頭の 上（足もとは ふきだしの 帯） */ .pal__gauge { position: absolute; bottom: calc(100% + 15px); left: 0; } .pal .mons { filter: drop-shadow(0 3px 3px rgba(10,10,40,.45)); animation: bob 2s ease-in-out infinite; } .pal__name { font-family: var(--f-head); font-size: 9px; color: #ffe9a8; text-shadow: 0 1px 0 rgba(0,0,0,.6); white-space: nowrap; } .pal.is-hit { animation: palJump .55s ease-out; } .pal.is-hit .pal__name { opacity: .4; } @keyframes palJump { 0% { transform: translate(0, 0); } 35% { transform: translate(120px, -30px); } /* v12.1：左はしから 主人公の 前まで とび出す */ 55% { transform: translate(150px, -12px); } 100% { transform: translate(0, 0); } } .pal__slash { position: absolute; right: 54px; top: 96px; width: 40px; height: 6px; background: #fff2b0; box-shadow: 0 0 12px 4px rgba(255,214,90,.85); animation: palSlash .5s ease-out forwards; z-index: 4; } @keyframes palSlash { 0% { opacity: 0; transform: scaleX(.2) rotate(-18deg); } 30% { opacity: 1; transform: scaleX(1.2) rotate(-18deg); } 100% { opacity: 0; transform: scaleX(1.6) rotate(-18deg); } } /* なかまゲージ（v5.2）：正解で たまる 玉。まちがえても へらない */ .pal__gauge { display: flex; gap: 3px; margin-top: 1px; } .pal__dot { width: 8px; height: 8px; background: rgba(10,16,40,.7); border: 1px solid rgba(255,233,168,.55); } .pal__dot.is-on { background: #ffe07a; border-color: #fff3c4; box-shadow: 0 0 5px 1px rgba(255,214,90,.9); } .pal.is-hit .pal__gauge { opacity: .4; } /* 追い打ちの ときの 帯（ひっさつの 技名バナーの 小さい ばん） */ .palbanner { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); /* ふきだしと 同じ 高さ（上の バーの 下） */ padding: 3px 12px; background: rgba(10,14,34,.86); border: 2px solid var(--gold); border-radius: 8px; font-family: var(--f-head); font-size: 13px; color: #ffe9a8; text-shadow: 0 1px 0 rgba(0,0,0,.7); white-space: nowrap; z-index: 6; animation: palBanner .9s ease-out forwards; } @keyframes palBanner { 0% { opacity: 0; transform: translateX(-50%) scale(.7); } 18% { opacity: 1; transform: translateX(-50%) scale(1.08); } 30% { transform: translateX(-50%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; } } /* なまえを つける（図かんの なかまタブ） */ .palnow__rename { align-self: center; margin-top: 8px; padding: 0 18px; font-size: 13px; } .palname, .rename { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px 10px; border: 3px solid var(--gold); border-radius: 14px; background: rgba(245,197,66,.10); } .palname__input, .rename__input { width: 100%; text-align: center; } .palname__btns, .rename__btns { display: flex; gap: 8px; } .palname__btns .btn, .rename__btns .btn { flex: 1; } @media (prefers-reduced-motion: reduce) { .pal.is-hit, .pal__slash, .palbanner { animation-duration: .01s; } } .combo { position: absolute; top: 62px; left: 134px; font-family: var(--f-head); font-size: 24px; color: #fff; text-shadow: 0 3px 0 #d6491f, 0 0 14px rgba(255,150,80,.8); z-index: 3; } .dmg { position: absolute; font-family: var(--f-head); font-size: 22px; color: #fff; text-shadow: 0 2px 0 #d6491f; z-index: 4; } .tag--hp { display: flex; align-items: center; } .hpbar { flex: 1 1 100%; order: 3; height: 14px; border-radius: 999px; background: rgba(16,24,48,.7); padding: 3px; } .hpbar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--hp-1), #ffb14f); transition: width .3s ease; } .pillstat { padding: 6px 12px; border-radius: 10px; background: rgba(16,24,48,.94); font-size: 15px; color: #fff; white-space: nowrap; } .pillstat b { color: var(--gold); } .pillstat--time b { color: var(--exp-2); } .bosshp { display: flex; gap: 3px; margin-top: 3px; } .bosshp__seg { width: 16px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--hp-1), var(--hp-2)); box-shadow: 0 0 6px rgba(255,94,122,.5); } .bosshp__seg.is-lost { background: var(--groove); box-shadow: none; } /* ボスを 強く（v12.7）：HP の 玉が 多い（ラスボス 9）ときは 細く */ .bosshp--many { gap: 2px; } .bosshp--many .bosshp__seg { width: 11px; } .warning { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; z-index: 5; background: rgba(12,18,38,.72); } .warning__text { font-family: var(--f-head); font-size: 34px; color: var(--dgr-1); text-shadow: 0 3px 0 #6d1128, 0 0 18px rgba(255,94,122,.8); animation: pulse 1s ease-in-out infinite; } .warning__sub { font-size: 14px; color: #fff; } /* ---- 問題まわり ---- */ .battle__body { position: relative; flex: 1; min-height: 0; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 7px; background: linear-gradient(#1a2544, var(--bg-1)); overflow: hidden; } .card { border-radius: 16px; padding: 10px 14px 12px; background: linear-gradient(var(--paper-1), var(--paper-2)); box-shadow: 0 6px 0 var(--paper-sh); /* v5.6：問題が いちばん だいじ。場所は メモ欄が 先に ゆずる。 ヒントが 出た ときだけ カードも 少し ちぢむ が、min-height より 下には ならず、 はみ出しは fitPrompt が 字を 小さくして 直す（＝ぜったいに 切れない）。 */ flex: 0 1 auto; min-height: 62px; max-height: 58%; overflow: hidden; } /* メモ欄が ない ときは カードが のこりの 場所を もらい、問題文を まん中に おく（v5.6）。 前は 下に 大きな すきまが できて、問題が 上に へばりついて 見えた。 */ .battle__body:not(.has-memo) .card { flex: 1 1 auto; } /* グラフは たてに 長いので 画面に あわせて 小さくする。 0.22 だと たて700の 端末で 下の 問題文が 切れた（v4.4 で 0.17 に）*/ /* 図の 大きさの つまみ（v5.6）。カードに 入らない とき fitPrompt が 1 → .85 → .7 → .55 に する。 ぜんぶの 図（グラフ・とけい・かたち・見くらべ）が これ 1つで そろって 小さくなる。 */ .card { --figk: 1; } .graph, .figwide { display: block; width: 100%; height: auto; max-height: calc(var(--stage-h) * 0.17 * var(--figk)); } /* v5.6：

の ブラウザ標準の margin（上下 14px ずつ＝28px）が むだに 場所を とって いて、 たて700の 端末では その ぶん 問題文が 切れて いた。 */ .card__unit { margin: 0 0 2px; font-size: 14px; color: var(--paper-lbl); } .card__q { font-family: var(--f-head); font-size: 34px; color: var(--paper-ink); letter-spacing: .04em; line-height: 1.2; } .card__q--xl { font-size: 46px; } .card__q--l { font-size: 39px; } .card__q--m { font-size: 26px; } .card__q--s { font-size: 21px; line-height: 1.3; } .card__q--xs { font-size: 17px; line-height: 1.35; } .card__ans { display: block; margin-top: 4px; font-size: 46px; letter-spacing: .1em; } /* ---- よみあげ「きく」ボタン（v5.3） ---- 英語の 文（英語ステージ）と 小1の 問題文に つく。声の ない 端末では 出ない。 スピーカーの 絵は CSS の 四角（絵文字は 使わない・画像も 使わない）*/ .card__listen { display: flex; justify-content: flex-end; margin-top: 6px; } .card__listen[hidden] { display: none; } .listen { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(#ffe27a, var(--gold)); color: #4a3208; font-family: var(--f-head); font-size: 15px; letter-spacing: .04em; box-shadow: 0 4px 0 var(--paper-sh), inset 0 2px 0 rgba(255,255,255,.55); } .listen:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--paper-sh), inset 0 2px 0 rgba(255,255,255,.55); } /* スピーカー：四角い 本体＋右に ひろがる ラッパ（三角）＋音の 波 2本。 ぜんぶ CSS（画像も 絵文字も 使わない）*/ .listen__ico { position: relative; width: 17px; height: 14px; flex: none; } /* 本体（左の 四角）＋ ラッパ（右に ひろがる 三角）*/ .listen__ico::before { content: ''; position: absolute; left: 0; top: 4px; width: 4px; height: 6px; background: #4a3208; } .listen__ico i { position: absolute; left: 4px; top: 1px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 5px solid #4a3208; } /* 音の 波 2本（右に 弧を 2つ）*/ .listen__ico b { position: absolute; left: 10px; top: 3px; width: 4px; height: 8px; border: 2px solid #4a3208; border-left: 0; border-radius: 0 8px 8px 0; } .listen__ico b::after { content: ''; position: absolute; left: 2px; top: -3px; width: 3px; height: 12px; border: 2px solid #4a3208; border-left: 0; border-radius: 0 9px 9px 0; opacity: .55; } /* 読んで いる あいだは 光って ゆれる */ .listen.is-playing { animation: listenOn .7s ease-in-out infinite; } @keyframes listenOn { 0%, 100% { box-shadow: 0 4px 0 var(--paper-sh), inset 0 2px 0 rgba(255,255,255,.55), 0 0 0 0 rgba(255,212,71,.7); } 50% { box-shadow: 0 4px 0 var(--paper-sh), inset 0 2px 0 rgba(255,255,255,.55), 0 0 14px 4px rgba(255,212,71,.85); } } /* 正解の ふきだしの 中では 少し 小さく */ .feedback .listen { margin-top: 2px; min-height: 36px; font-size: 14px; } @media (prefers-reduced-motion: reduce) { .listen.is-playing { animation-duration: .01s; } } .pillstat span { margin-right: 5px; font-size: 13px; } /* 中身が ないときは 出さない（空の 黒い わくが 見えてしまうため） */ .feedback:empty, .arena__msg:empty, .card__unit:empty, .combo:empty { display: none; } .hissan__row { display: block; } .hissan__sign { margin-right: 8px; } .card__q ruby rt { font-size: .45em; } .hissan { font-family: var(--f-head); font-size: 30px; color: var(--paper-ink); line-height: 1.12; text-align: right; display: inline-block; } .hissan u { text-decoration: none; display: block; border-bottom: 3px solid var(--paper-ink); padding-bottom: 2px; } .memo { position: relative; flex: 1 1 auto; min-height: 64px; --memo-min: 64px; border-radius: 16px; padding: 8px 12px; background: #fff; box-shadow: 0 6px 0 var(--memo-sh); overflow: hidden; } .memo__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; background-image: linear-gradient(var(--memo-line) 1px, transparent 1px), linear-gradient(90deg, var(--memo-line) 1px, transparent 1px); background-size: 24px 24px; } .memo__btns { position: absolute; top: 8px; right: 10px; display: flex; gap: 6px; z-index: 2; } .memo__btn { min-height: 34px; padding: 6px 10px; border: 0; border-radius: 10px; background: #eef3ff; color: var(--memo-ink); font-family: var(--f-body); font-size: 13px; cursor: pointer; } .memo__btn:active { transform: translateY(2px); } .memo__hint { position: absolute; bottom: 6px; left: 12px; font-size: 12px; color: #93a0c4; pointer-events: none; } /* 「ひろげる」：問題の 場所（.battle__body）いっぱいの メモ帳に なる。JS は memo--wide を つける */ /* ヒントが 出て いる あいだは メモ欄が もっと 小さく なる（v5.6）。 問題文が 切れる くらいなら メモを ちぢめる。「ひろげる」で 画面いっぱいに できる */ .battle__body.has-hint .memo { min-height: 34px; } .memo--wide { position: absolute; inset: 12px; z-index: 30; } .battle__body.is-wide > :not(.memo) { visibility: hidden; } .memo--wide .hissan { font-size: 52px; margin: 6px 0 0 6px; } /* ひろげた ときだけ、問題文を メモの 左上に 小さく 出す（キーと カードが かくれるので） */ .memo__q { display: none; position: relative; margin: 2px 130px 4px 4px; font-family: var(--f-head); font-size: 24px; line-height: 1.25; color: var(--paper-ink); max-height: 3.8em; overflow: hidden; } .memo--wide .memo__q:not(:empty) { display: block; } .memo--wide .memo__hint { display: none; } .displays { display: flex; gap: 10px; flex: none; } .display { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; cursor: pointer; padding: 6px 14px; border-radius: 14px; font-family: var(--f-body); font-size: 15px; color: #4a3208; background: linear-gradient(var(--paper-1), #ffeec2); box-shadow: 0 6px 0 var(--paper-sh); } .display.is-on { box-shadow: 0 6px 0 var(--paper-sh), 0 0 0 4px var(--gold), 0 0 18px rgba(255,212,71,.6); } .display__label { flex: none; } .display__value { font-family: var(--f-head); font-size: 30px; color: var(--paper-ink); } .display__value--roma { font-size: 22px; letter-spacing: .06em; word-break: break-all; text-align: right; } .display__caret { color: var(--gold-sh); animation: pulse 1s steps(2) infinite; } .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; } .keyrow { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; } .key { height: clamp(40px, calc(var(--stage-h) * 0.058), 50px); border: 0; border-radius: 13px; cursor: pointer; font-family: var(--f-head); font-size: 24px; color: #26305a; background: linear-gradient(#f4f8ff, #d5dff2); box-shadow: 0 5px 0 #9aa8c9, inset 0 2px 0 #fff; } .key:active { transform: translateY(4px); box-shadow: 0 1px 0 #9aa8c9, inset 0 2px 0 #fff; } .key--del { color: #e6ecff; background: linear-gradient(#4a5680, #333d61); box-shadow: 0 5px 0 #202844, inset 0 2px 0 rgba(255,255,255,.2); } .key--del:active { box-shadow: 0 1px 0 #202844, inset 0 2px 0 rgba(255,255,255,.2); } .key--go, .key--go3 { color: #fff; background: linear-gradient(var(--grn-1), var(--grn-2)); box-shadow: 0 5px 0 var(--grn-sh), inset 0 2px 0 rgba(255,255,255,.45); } .key--go:active, .key--go3:active { box-shadow: 0 1px 0 var(--grn-sh), inset 0 2px 0 rgba(255,255,255,.45); } .key--go3 { grid-column: span 3; } .key--wide { grid-column: span 2; } .key--roma { height: clamp(38px, calc(var(--stage-h) * 0.054), 44px); font-size: 18px; border-radius: 10px; } /* ローマ字の QWERTY（1段ずつ 横に ならべる） */ .keys.keys--roma { display: block; } .keys--roma .keyrow { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-bottom: 5px; } .keys--roma .keyrow--in1 { grid-template-columns: repeat(9, 1fr); padding: 0 14px; } .keys--roma .keyrow--in2 { grid-template-columns: repeat(9, 1fr); padding: 0 28px; } .keys--roma .keyrow:last-child { grid-template-columns: 1fr 3fr; padding: 0; margin-bottom: 0; } .keys--roma .keyrow:last-child .key--go3 { grid-column: auto; } /* かん字を 書く 問題の ボタン */ .keys.keys--write { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* 小数（v3.0）：4行目が . 0 けす、5行目が こたえる */ .keys--dec .key--go3 { grid-column: span 3; } .key--dot { font-size: 30px; } /* 数直線（v3.0）：よこ長の 図 */ .numline { max-height: calc(70px * var(--figk, 1)); } /* 学期の おすすめ（v3.0） */ .termsug { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,212,71,.12); box-shadow: inset 0 0 0 2px var(--gold); } .termsug__t { flex: 1; font-size: 13px; line-height: 1.45; color: #ffe89a; } .termsug .btn { flex: none; } .keys--write .key--go3 { grid-column: span 2; } .keys--write .key { font-size: 18px; } .choices { display: grid; gap: 8px; flex: none; } .choice { min-height: 50px; padding: 8px 14px; border: 0; border-radius: 14px; cursor: pointer; font-family: var(--f-body); font-size: 19px; color: var(--paper-ink); text-align: left; background: linear-gradient(var(--paper-1), #ffeec2); box-shadow: 0 6px 0 var(--paper-sh); } .choice:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--paper-sh); } .choice.is-right { background: linear-gradient(#c8f7c0, #8fe08a); box-shadow: 0 6px 0 var(--grn-sh); } .choice.is-wrong { background: linear-gradient(#ffc7d2, #ff9db0); box-shadow: 0 6px 0 #a8324c; } /* こたえた あとの ふきだし。 見出し（せいかい！）は 大きく、補足は 小さく 折り返す。 画面（400px）から はみ出さないよう max-width で とめる。 */ .feedback { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); box-sizing: border-box; width: max-content; max-width: calc(100% - 16px); display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 16px; border-radius: 14px; background: rgba(16,24,48,.94); font-family: var(--f-head); font-size: 20px; color: var(--exp-2); text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,.45); z-index: 20; animation: popin .18s ease-out; } .feedback__head { font-family: var(--f-head); font-size: 22px; line-height: 1.25; } .feedback__note { font-family: var(--f-body); font-size: 15px; line-height: 1.5; color: #dbe4ff; overflow-wrap: anywhere; } .feedback--ng { color: #ff9db0; } .feedback--big .feedback__head { font-size: 26px; } .hintbox { border-radius: 12px; padding: 6px 12px; background: rgba(255,255,255,.1); font-size: 14px; line-height: 1.35; color: #dbe4ff; flex: none; } .note { margin: 10px 0 0; font-size: 13px; color: var(--tx-sub); line-height: 1.45; } .panel { border-radius: 14px; padding: 10px 12px; background: rgba(16,24,48,.7); } .panelspacer { height: 8px; } /* ========================================================= ひっさつわざの エフェクト（v2.5：7しゅるい。コンボで はでさが 変わる） 5〜7 コンボ … 教科の わざ .fx--fire ほのお ギリ！ オレンジの 炎（算数） .fx--leaf はっぱ カッター！ みどりの はっぱの あらし（国語） .fx--ice こおりの やいば！ 水色の こおりが とんで われる（理科社会） .fx--wind かぜの たつまき！ 白い たつまき（英語） .fx--bolt 8〜11 コンボ … いなずま おとし！青白い かみなり .fx--star 12〜15 コンボ … ひかりの メテオ！金の いん石 .fx--nova 16 コンボ〜 … ぎんがの ビッグバン！虹色の 大ばくはつ ぜんぶ CSS の 四角。敵は 画面の 右がわに いるので、 エフェクトも 右がわ（right: 40〜80px あたり）に そろえてある。 画面ぜんたいの 演出は .fxscreen（.battle の 直下）、ゆれは .battle.is-quake-N。 ========================================================= */ .fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; } .fx:empty { display: none; } /* ---- 技の 名前（黒い 帯の 上に 大きく 出て、はねる） ---- */ /* v12.2 ②：帯・技名・星は アリーナの いちばん 下（問題カードの すぐ 上）。主人公の 頭と てきの 上半身に かぶらない。 --arena-h は battle.js の playScreenFx が 入れる（176〜232px） */ .fxband { position: absolute; left: -20px; right: -20px; top: calc(var(--arena-h, 176px) - 54px); height: 48px; z-index: 2; background: linear-gradient(90deg, rgba(10,14,30,0), rgba(10,14,30,.78) 18%, rgba(10,14,30,.78) 82%, rgba(10,14,30,0)); transform: skewX(-12deg); animation: fxbandfx .9s ease-out forwards; } .fxscreen--t3 .fxband, .fxscreen--t4 .fxband, .fxscreen--t5 .fxband { top: calc(var(--arena-h, 176px) - 62px); height: 58px; } @keyframes fxbandfx { 0% { transform: skewX(-12deg) scaleX(0); opacity: 0; } 18% { transform: skewX(-12deg) scaleX(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: skewX(-12deg) scaleX(1.04); opacity: 0; } } .fxname { position: absolute; left: 50%; top: calc(var(--arena-h, 176px) - 50px); transform: translateX(-50%); z-index: 3; font-family: var(--f-head); font-size: 34px; color: #fff; white-space: nowrap; letter-spacing: 1px; animation: fxnamefx .9s ease-out forwards; } .fx .fxname { top: 34px; } /* アイテムの わざ名（.fx＝アリーナの 中）は いままで どおり 上に */ .fxname--big { font-size: 38px; top: calc(var(--arena-h, 176px) - 58px); } .fxname--max { font-size: 36px; top: calc(var(--arena-h, 176px) - 57px); animation-duration: 1.4s; } /* v14.2：技名は SVG の 本物の 線で ふちどる（js/ui/fxtext.js・色は MQ.ui.fxtext.STYLE）。 ユーザー「文字の カクカク（画質が 悪い）」＝前の 8方向に ずらした text-shadow は ふちが 階段の ギザギザ に なった。もどさない */ .fxname--svg { width: 400px; line-height: 0; text-shadow: none; } .fxname__svg { display: block; overflow: visible; } @keyframes fxnamefx { 0% { transform: translateX(-50%) scale(.3); opacity: 0; } 16% { transform: translateX(-50%) scale(1.35); opacity: 1; } 26% { transform: translateX(-50%) scale(.95); } 34% { transform: translateX(-54%) scale(1.05); } 44% { transform: translateX(-46%) scale(1); } 80% { transform: translateX(-50%) scale(1); opacity: 1; } 100% { transform: translateX(-50%) scale(1.1); opacity: 0; } } /* 技名の 左右で はじける 星（45度の 四角） */ .fxstars { position: absolute; left: 50%; top: calc(var(--arena-h, 176px) - 30px); z-index: 3; } .fxscreen--t3 .fxstars, .fxscreen--t4 .fxstars, .fxscreen--t5 .fxstars { top: calc(var(--arena-h, 176px) - 33px); } .fxstars i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px rgba(255,255,255,.7); transform: rotate(45deg) scale(0); animation: fxstarfx .7s ease-out forwards; } @keyframes fxstarfx { 0% { transform: translate(0, 0) rotate(45deg) scale(0); opacity: 0; } 40% { transform: translate(var(--x), var(--y)) rotate(135deg) scale(1.3); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(225deg) scale(.3); opacity: 0; } } /* ---- つぶつぶ（火の粉・電気・きらきら） ---- */ .fx__sparks { position: absolute; right: 78px; bottom: 96px; } .fx__sparks i { position: absolute; left: 0; top: 0; display: block; animation: sparkfx .7s ease-out forwards; } .fx__sparks--fire i { background: #ffcf5e; box-shadow: 0 0 8px rgba(255,150,60,.95); } .fx__sparks--bolt i { background: #dff1ff; box-shadow: 0 0 8px rgba(120,200,255,.95); } .fx__sparks--gold i { background: #fff0a8; box-shadow: 0 0 10px rgba(255,212,71,1); } .fx__sparks--ice i { background: #e8fbff; box-shadow: 0 0 8px rgba(159,230,255,1); } .fx__sparks--leaf i { background: #b8f59a; box-shadow: 0 0 8px rgba(126,224,106,1); } .fx__sparks--wind i { background: #ffffff; box-shadow: 0 0 8px rgba(200,235,255,1); } @keyframes sparkfx { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(.25); opacity: 0; } } /* すいこむ（外から 中へ） */ .fx__sparks--in i { animation-name: sparkinfx; animation-timing-function: ease-in; } @keyframes sparkinfx { 0% { transform: translate(var(--x), var(--y)) scale(1.2); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(0, 0) scale(.3); opacity: 1; } } /* ---- 空の 光（技ごとの 色） ---- */ .fx__sky { position: absolute; inset: 0; background: radial-gradient(closest-side at 76% 62%, rgba(255,255,255,.8), rgba(150,205,255,.5) 52%, rgba(40,80,160,.28)); animation: skyfx .34s ease-out forwards; } .fx__sky--fire { background: radial-gradient(closest-side at 76% 62%, rgba(255,240,200,.85), rgba(255,150,60,.5) 52%, rgba(160,40,10,.3)); animation-duration: .5s; } .fx__sky--ice { background: radial-gradient(closest-side at 76% 62%, rgba(255,255,255,.9), rgba(159,230,255,.55) 52%, rgba(40,120,200,.3)); animation-duration: .5s; animation-delay: .3s; opacity: 0; } .fx__sky--leaf { background: radial-gradient(closest-side at 76% 62%, rgba(240,255,220,.85), rgba(126,224,106,.5) 52%, rgba(20,110,40,.3)); animation-duration: .5s; } .fx__sky--wind { background: radial-gradient(closest-side at 76% 62%, rgba(255,255,255,.9), rgba(220,240,255,.55) 52%, rgba(120,160,200,.3)); animation-duration: .7s; } .fx__sky--bolt { animation: skyflickfx .6s ease-out forwards; } .fx__sky--gold { background: radial-gradient(closest-side at 76% 60%, rgba(255,252,225,.92), rgba(255,214,120,.55) 52%, rgba(190,120,20,.3)); animation-duration: .7s; animation-delay: .4s; opacity: 0; } .fx__sky--dark { background: radial-gradient(closest-side at 76% 62%, rgba(60,20,110,.6), rgba(20,8,50,.9) 60%, rgba(5,2,20,.96)); animation: skydarkfx 1.9s ease-out forwards; } .fx__sky--white { background: #fff; animation: skywhitefx 1.3s ease-out forwards; opacity: 0; animation-delay: .5s; } @keyframes skyfx { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } } @keyframes skyflickfx { 0% { opacity: 0; } 10% { opacity: 1; } 22% { opacity: .2; } 34% { opacity: 1; } 100% { opacity: 0; } } @keyframes skydarkfx { 0% { opacity: 0; } 12% { opacity: 1; } 26% { opacity: 1; } 32% { opacity: 0; } 100% { opacity: 0; } } @keyframes skywhitefx { 0% { opacity: 0; } 8% { opacity: 1; } 30% { opacity: .55; } 100% { opacity: 0; } } /* ---- 斬撃（ほのお／はっぱ で 色が 変わる） ---- */ .fx__slash { position: absolute; right: 22px; bottom: 104px; width: 230px; height: 18px; transform-origin: right center; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 42%, #ffd447 70%, rgba(255,143,94,0)); box-shadow: 0 0 26px rgba(255,180,80,1); animation: slashfx .5s ease-out forwards; } .fx__slash--b { bottom: 66px; height: 13px; animation-delay: .1s; animation-name: slashbfx; } .fx__slash--c { bottom: 86px; height: 10px; animation-delay: .2s; animation-name: slashcfx; } .fx__slash--leaf { background: linear-gradient(90deg, rgba(255,255,255,0), #fff 42%, #9df08a 70%, rgba(60,180,80,0)); box-shadow: 0 0 26px rgba(126,224,106,1); } @keyframes slashfx { 0% { transform: rotate(-22deg) scaleX(0); opacity: 0; } 24% { transform: rotate(-22deg) scaleX(1); opacity: 1; } 70% { transform: rotate(-22deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-22deg) scaleX(1); opacity: 0; } } @keyframes slashbfx { 0% { transform: rotate(18deg) scaleX(0); opacity: 0; } 24% { transform: rotate(18deg) scaleX(1); opacity: 1; } 70% { transform: rotate(18deg) scaleX(1); opacity: 1; } 100% { transform: rotate(18deg) scaleX(1); opacity: 0; } } @keyframes slashcfx { 0% { transform: rotate(-4deg) scaleX(0); opacity: 0; } 24% { transform: rotate(-4deg) scaleX(1); opacity: 1; } 70% { transform: rotate(-4deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-4deg) scaleX(1); opacity: 0; } } /* ---- ほのお ギリ：炎 ---- */ .fx__flame { position: absolute; right: 18px; bottom: 56px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; } .fx__flame i { position: relative; width: 15px; transform-origin: bottom center; background: linear-gradient(#fff6c9, #ffc24d 28%, #ff7a2e 60%, #e03a12); box-shadow: 0 0 22px rgba(255,140,60,1); animation: flamefx .7s ease-out forwards; } /* 先っぽの とがり（小さい 四角を 上に のせる） */ .fx__flame i::before { content: ''; position: absolute; left: 4px; top: -10px; width: 7px; height: 10px; background: #fff2b0; box-shadow: 0 0 14px rgba(255,225,130,1); } /* 中の 明るい しん */ .fx__flame i b { position: absolute; left: 4px; bottom: 5px; width: 7px; height: 46%; background: rgba(255,250,210,.85); } @keyframes flamefx { 0% { transform: scaleY(.08); opacity: 0; } 22% { transform: scaleY(1.14); opacity: 1; } 60% { transform: scaleY(.9); opacity: 1; } 100% { transform: scaleY(.16); opacity: 0; } } /* ---- しょうげきの わ（四角い わ。技ごとに 色） ---- */ .fx__ring { position: absolute; right: 50px; bottom: 58px; width: 46px; height: 46px; margin: 0 -23px -23px 0; border: 6px solid #eaf6ff; box-shadow: 0 0 18px rgba(120,200,255,.95); animation: ringfx .6s ease-out forwards; } .fx__ring--b { animation-delay: .14s; border-width: 4px; } .fx__ring--fire { border-color: #ffb347; box-shadow: 0 0 18px rgba(255,150,60,.95); animation-delay: .12s; } .fx__ring--ice { border-color: #c9f2ff; box-shadow: 0 0 18px rgba(159,230,255,1); animation-delay: .32s; } .fx__ring--leaf { border-color: #b8f59a; box-shadow: 0 0 18px rgba(126,224,106,1); animation-delay: .2s; } .fx__ring--wind { border-color: #fff; box-shadow: 0 0 18px rgba(220,240,255,1); animation-delay: .3s; } .fx__ring--gold { border-color: #ffe98a; box-shadow: 0 0 22px rgba(255,212,71,1); animation-delay: .46s; border-width: 8px; } @keyframes ringfx { 0% { transform: scale(.25); opacity: 1; } 100% { transform: scale(3); opacity: 0; } } /* ---- こおりの やいば：とぶ こおり → われる ---- */ .fx__shards { position: absolute; left: 96px; bottom: 104px; } .fx__shards i { position: absolute; left: 0; top: 0; width: 34px; height: 10px; background: linear-gradient(90deg, #ffffff, #c9f2ff 50%, #5fc8f5); box-shadow: 0 0 12px rgba(159,230,255,1); transform: translateX(0) rotate(-6deg); animation: shardfx .36s ease-in forwards; } /* 先っぽ（45度の 小さい 四角） */ .fx__shards i::after { content: ''; position: absolute; right: -4px; top: 1px; width: 8px; height: 8px; background: #ffffff; transform: rotate(45deg); } @keyframes shardfx { 0% { transform: translateX(-40px) rotate(-6deg); opacity: 0; } 20% { opacity: 1; } 92% { transform: translateX(210px) rotate(-6deg); opacity: 1; } 100% { transform: translateX(216px) rotate(-6deg); opacity: 0; } } .fx__frost { position: absolute; right: 74px; bottom: 84px; width: 60px; height: 60px; margin: 0 -30px -30px 0; background: radial-gradient(closest-side, #ffffff, #c9f2ff 45%, rgba(95,200,245,0)); animation: burstfx .6s ease-out .3s forwards; opacity: 0; } .fx__cubes { position: absolute; right: 78px; bottom: 96px; } .fx__cubes i { position: absolute; left: 0; top: 0; width: 9px; height: 9px; background: linear-gradient(135deg, #ffffff, #9fe6ff); box-shadow: inset -2px -2px 0 #4fa9d8, 0 0 6px rgba(159,230,255,.9); animation: cubefx .6s ease-out forwards; opacity: 0; } @keyframes cubefx { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 40px)) rotate(200deg); opacity: 0; } } .fx__snow { position: absolute; left: 0; right: 0; top: -10px; height: 100%; } .fx__snow i { position: absolute; top: 0; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.9); animation: snowfx .9s linear forwards; opacity: 0; } @keyframes snowfx { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .95; } 100% { transform: translateY(190px); opacity: 0; } } /* ---- はっぱ カッター：まわる はっぱ ---- */ .fx__storm { position: absolute; right: 74px; bottom: 96px; animation: stormfx .85s ease-out forwards; } .fx__storm i { position: absolute; left: -8px; top: -4px; width: 16px; height: 8px; background: linear-gradient(90deg, #b8f59a, #4cbf4a 55%, #2a8f3a); box-shadow: 0 0 6px rgba(126,224,106,.9); animation: leaffx .85s ease-out forwards; opacity: 0; } @keyframes stormfx { 0% { transform: rotate(0) scale(.3); } 30% { transform: rotate(200deg) scale(1.1); } 100% { transform: rotate(560deg) scale(1.6); } } @keyframes leaffx { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } /* ---- かぜの たつまき ---- */ .fx__tornado { position: absolute; right: 36px; bottom: 60px; width: 110px; height: 130px; } .fx__tornado i { position: absolute; left: 50%; height: 14px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 12px, rgba(200,230,255,.55) 12px 24px); box-shadow: 0 0 12px rgba(220,240,255,.9); animation: torfx .8s ease-out forwards, torspinfx .22s linear infinite; opacity: 0; } @keyframes torfx { 0% { opacity: 0; transform: translateX(-50%) scaleX(.2); } 25% { opacity: 1; transform: translateX(-50%) scaleX(1.1); } 70% { opacity: 1; transform: translateX(-46%) scaleX(1); } 100% { opacity: 0; transform: translateX(-50%) scaleX(1.2) translateY(-30px); } } @keyframes torspinfx { 0% { background-position: 0 0; } 100% { background-position: 24px 0; } } .fx__gust { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .fx__gust i { position: absolute; left: 0; width: 260px; height: 5px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 40%, rgba(255,255,255,0)); box-shadow: 0 0 8px rgba(255,255,255,.8); animation: gustfx .55s ease-out forwards; opacity: 0; } @keyframes gustfx { 0% { transform: translateX(-280px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(240px); opacity: 0; } } /* ---- いなずま おとし ---- */ .fx__bolt { position: absolute; right: 38px; bottom: 60px; width: 64px; height: 124px; filter: drop-shadow(0 0 3px #1d55a8) drop-shadow(0 0 3px #1d55a8) drop-shadow(0 0 12px rgba(120,200,255,.95)) drop-shadow(0 0 26px rgba(80,150,255,.85)); } .fx__bolt--b { right: 112px; bottom: 70px; width: 24px; height: 90px; } .fx__bolt i { position: absolute; width: 16px; height: 24px; background: #ffffff; animation: boltfx .5s steps(3, end) forwards; } @keyframes boltfx { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } /* 地面の ひび（黒い 横線が 光る） */ .fx__cracks { position: absolute; right: 60px; bottom: 56px; } .fx__cracks i { position: absolute; height: 4px; background: #0f1a33; box-shadow: 0 0 8px rgba(120,200,255,.95), inset 0 -1px 0 rgba(150,210,255,.8); transform: scaleX(0); transform-origin: left center; animation: crackfx .5s ease-out forwards; } @keyframes crackfx { 0% { transform: scaleX(0); opacity: 0; } 30% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } } /* ---- ひかりの メテオ ---- */ .fx__meteor { position: absolute; right: 74px; bottom: 96px; } .fx__meteor i { position: absolute; left: 0; top: 0; width: 26px; height: 26px; background: linear-gradient(#fffdf0, #ffd447 52%, #f2932c); box-shadow: 0 0 22px rgba(255,212,71,1), 20px -20px 0 -2px rgba(255,222,110,.7), 40px -40px 0 -6px rgba(255,212,71,.45), 60px -60px 0 -10px rgba(255,212,71,.25); animation: meteorfx .62s ease-in forwards; } @keyframes meteorfx { 0% { transform: translate(170px, -220px) scale(.6); opacity: 0; } 18% { opacity: 1; } 100% { transform: translate(0, 0) scale(1.1); opacity: 0; } } .fx__burst { position: absolute; right: 74px; bottom: 84px; width: 72px; height: 72px; margin: 0 -36px -36px 0; background: radial-gradient(closest-side, #fffdf0, #ffd447 45%, rgba(242,147,44,0)); animation: burstfx .8s ease-out .42s forwards; opacity: 0; } @keyframes burstfx { 0% { transform: scale(.2); opacity: 0; } 25% { transform: scale(3); opacity: 1; } 100% { transform: scale(4.2); opacity: 0; } } .fx__rays { position: absolute; right: 74px; bottom: 84px; } .fx__rays i { position: absolute; left: -5px; top: -110px; width: 10px; height: 110px; transform-origin: 50% 100%; background: linear-gradient(rgba(255,240,168,0), #ffe98a 60%, #ffd447); animation: raysfx .8s ease-out .42s forwards; opacity: 0; } @keyframes raysfx { 0% { opacity: 0; } 25% { opacity: .95; } 100% { opacity: 0; } } /* ---- ぎんがの ビッグバン ---- */ .fx__core { position: absolute; right: 74px; bottom: 84px; width: 20px; height: 20px; margin: 0 -10px -10px 0; background: #fff; box-shadow: 0 0 20px #fff, 0 0 40px #c48bff, 0 0 60px #4fd3ff; animation: corefx .75s ease-in forwards; } @keyframes corefx { 0% { transform: scale(.2); opacity: 0; } 15% { opacity: 1; } 60% { transform: scale(1.6); opacity: 1; } 68% { transform: scale(.5); } 80% { transform: scale(9); opacity: 1; } 100% { transform: scale(12); opacity: 0; } } .fx__nrings { position: absolute; right: 74px; bottom: 84px; } .fx__nrings i { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border: 7px solid #fff; animation: ringfx .9s ease-out forwards; opacity: 0; } .fx__rays--nova i { top: -150px; height: 150px; width: 12px; left: -6px; animation-delay: .5s; animation-duration: 1.2s; } .fx__galaxy { position: absolute; right: 74px; bottom: 84px; animation: galaxyfx 1.3s ease-out .5s forwards; opacity: 0; } .fx__galaxy i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; } @keyframes galaxyfx { 0% { transform: rotate(0) scale(.2); opacity: 0; } 20% { opacity: 1; } 100% { transform: rotate(420deg) scale(2.4); opacity: 0; } } /* コンボ表示も 技に あわせて 色を かえる */ .combo--fire { color: #ffd08a; text-shadow: 0 3px 0 #c0400f, 0 0 16px rgba(255,150,80,.95); } .combo--leaf { color: #d6ffc4; text-shadow: 0 3px 0 #1f7a2e, 0 0 16px rgba(126,224,106,.95); } .combo--ice { color: #e8fbff; text-shadow: 0 3px 0 #1c6fa0, 0 0 16px rgba(159,230,255,.95); } .combo--wind { color: #ffffff; text-shadow: 0 3px 0 #4a6a94, 0 0 16px rgba(220,240,255,.95); } .combo--bolt { color: #d8f0ff; text-shadow: 0 3px 0 #1a5fb0, 0 0 18px rgba(120,200,255,.95); } .combo--star { color: #fff3c0; text-shadow: 0 3px 0 #b8801d, 0 0 22px rgba(255,212,71,1); } .combo--nova { color: #fff; text-shadow: 0 3px 0 #3a1d6b, 0 0 12px #ff5e7a, 0 0 24px #4fd3ff; } /* ---- 画面ぜんたいの 演出（.battle の 直下。z-index は アイテムの モーダルより 下） ---- */ .fxscreen { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; } .fxscreen:empty { display: none; } /* v12.2 ②：色の 光は アリーナの 中だけ（問題・テンキーは 読める まま）。中心は てきの 位置（--fs-x／--fs-y） */ .fxscreen__tint { position: absolute; left: 0; right: 0; top: 0; height: var(--arena-h, 176px); opacity: 0; background: radial-gradient(circle at var(--fs-x, 348px) var(--fs-y, 112px), var(--fs-c1, rgba(255,255,255,.7)), var(--fs-c2, rgba(255,200,120,.35)) 30%, var(--fs-c3, rgba(0,0,0,0)) 62%); animation: fstintfx .7s ease-out forwards; } .fxscreen--t2 .fxscreen__tint { animation-duration: .8s; } .fxscreen--t3 .fxscreen__tint { animation-duration: 1.1s; animation-delay: .4s; } .fxscreen--t4 .fxscreen__tint, .fxscreen--t5 .fxscreen__tint { animation: fstintmaxfx 1.4s ease-out .5s forwards; } /* ビッグバンの すいこむ あいだ（0〜0.5秒）は まっくら */ .fxscreen__dark { position: absolute; left: 0; right: 0; top: 0; height: var(--arena-h, 176px); opacity: 0; background: radial-gradient(circle at var(--fs-x, 348px) var(--fs-y, 112px), rgba(80,30,140,.25), rgba(12,5,35,.9) 40%, rgba(3,1,12,.97) 75%); animation: fsdarkfx .62s ease-in forwards; } @keyframes fsdarkfx { 0% { opacity: 0; } 25% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } } @keyframes fstintfx { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } } @keyframes fstintmaxfx { 0% { opacity: 0; } 8% { opacity: 1; } 30% { opacity: .85; } 100% { opacity: 0; } } .fxscreen--fire { --fs-c1: rgba(255,235,190,.75); --fs-c2: rgba(255,150,60,.4); --fs-c3: rgba(120,30,0,.18); } .fxscreen--leaf { --fs-c1: rgba(235,255,215,.75); --fs-c2: rgba(126,224,106,.4); --fs-c3: rgba(10,90,30,.18); } .fxscreen--ice { --fs-c1: rgba(255,255,255,.8); --fs-c2: rgba(159,230,255,.45); --fs-c3: rgba(20,90,160,.2); } .fxscreen--wind { --fs-c1: rgba(255,255,255,.85); --fs-c2: rgba(230,246,255,.4); --fs-c3: rgba(90,130,180,.18); } .fxscreen--bolt { --fs-c1: rgba(255,255,255,.9); --fs-c2: rgba(150,205,255,.5); --fs-c3: rgba(20,50,120,.3); } .fxscreen--star { --fs-c1: rgba(255,252,225,.95); --fs-c2: rgba(255,214,120,.55); --fs-c3: rgba(120,70,0,.3); } .fxscreen--nova .fxscreen__tint { background: radial-gradient(circle at var(--fs-x, 348px) var(--fs-y, 112px), rgba(255,255,255,1), rgba(196,139,255,.7) 26%, rgba(79,211,255,.45) 48%, rgba(20,8,50,.85) 80%); } /* 集中線（8コンボ〜）：敵の ところから 画面の 外へ のびる 細い 四角 */ .fxscreen__lines { position: absolute; left: var(--fs-x, 348px); top: var(--fs-y, 112px); } /* v12.2：中心は てき */ .fxscreen__lines i { position: absolute; left: -4px; top: 0; width: 8px; height: 800px; transform-origin: 50% 0; background: linear-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,0) 70px, var(--fs-line, rgba(255,255,255,.7)) 220px, var(--fs-line, rgba(255,255,255,.7))); animation: fslinefx .55s ease-out forwards; opacity: 0; } .fxscreen--t3 .fxscreen__lines i { animation-duration: .7s; } .fxscreen--t4 .fxscreen__lines i, .fxscreen--t5 .fxscreen__lines i { animation-duration: 1.1s; width: 10px; left: -5px; } .fxscreen--bolt { --fs-line: rgba(200,235,255,.75); } .fxscreen--star { --fs-line: rgba(255,230,140,.8); } .fxscreen--nova { --fs-line: rgba(255,255,255,.9); } @keyframes fslinefx { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } } /* 大きな しょうげきの わ（12コンボ〜。画面の 外まで ひろがる） */ .fxscreen__ring { position: absolute; left: var(--fs-x, 348px); top: var(--fs-y, 112px); width: 80px; height: 80px; margin: -40px 0 0 -40px; border: 10px solid var(--fs-ring, #fff); box-shadow: 0 0 24px var(--fs-ring, #fff), inset 0 0 24px var(--fs-ring, #fff); animation: fsringfx .9s ease-out .46s forwards; opacity: 0; } .fxscreen__ring--b { animation-delay: .62s; border-width: 6px; } .fxscreen--star { --fs-ring: #ffe98a; } .fxscreen--nova { --fs-ring: #fff; } .fxscreen--nova .fxscreen__ring { animation-delay: .5s; } .fxscreen--nova .fxscreen__ring--b { border-color: #ff5e7a; box-shadow: 0 0 24px #ff5e7a; animation-delay: .66s; } @keyframes fsringfx { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(9); opacity: 0; } } /* ---- 画面の ゆれ（コンボが 高いほど 大きく） ---- */ .battle.is-quake-1 { animation: quake1fx .45s ease-out; } .battle.is-quake-2 { animation: quake2fx .6s ease-out; } .battle.is-quake-3 { animation: quake3fx .9s ease-out .42s; } .battle.is-quake-4 { animation: quake4fx 1.4s ease-out .5s; } @keyframes quake1fx { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px,4px); } 40% { transform: translate(6px,-4px); } 60% { transform: translate(-4px,2px); } 80% { transform: translate(3px,-2px); } } @keyframes quake2fx { 0%,100% { transform: translate(0,0); } 15% { transform: translate(-9px,6px); } 30% { transform: translate(9px,-6px); } 45% { transform: translate(-7px,4px); } 60% { transform: translate(6px,-3px); } 80% { transform: translate(-3px,2px); } } @keyframes quake3fx { 0%,100% { transform: translate(0,0) rotate(0); } 10% { transform: translate(-12px,8px) rotate(-.6deg); } 22% { transform: translate(12px,-8px) rotate(.6deg); } 36% { transform: translate(-10px,6px); } 50% { transform: translate(9px,-5px); } 66% { transform: translate(-6px,3px); } 82% { transform: translate(4px,-2px); } } @keyframes quake4fx { 0%,100% { transform: translate(0,0) rotate(0); } 8% { transform: translate(-16px,10px) rotate(-1deg); } 18% { transform: translate(16px,-10px) rotate(1deg); } 28% { transform: translate(-14px,8px) rotate(-.8deg); } 40% { transform: translate(12px,-8px) rotate(.8deg); } 54% { transform: translate(-9px,5px); } 68% { transform: translate(7px,-4px); } 82% { transform: translate(-4px,2px); } 92% { transform: translate(2px,-1px); } } /* ---- 主人公：ひっさつの ときは 大きく とびこんで、うしろに 色の オーラ ---- */ .hero.is-special { animation: specialbigfx .6s ease-out; } @keyframes specialbigfx { 0% { transform: translateX(0) scale(1); } 35% { transform: translateX(36px) scale(1.3); } 100% { transform: translateX(0) scale(1); } } .hero.is-special::before { content: ''; position: absolute; left: -14px; top: -14px; right: -14px; bottom: 6px; z-index: -1; background: radial-gradient(closest-side, var(--el, #ffd447), rgba(255,255,255,0)); animation: aurafx .7s ease-out forwards; } /* ========================================================= 04 けっか（v1.9 / モック準拠） スクロールなしで 400×720 に おさめる。たてに flex で ならべ、 ボタンだけ 下に よせる。 ========================================================= */ .rs { position: relative; height: 100%; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 14px; background: linear-gradient(#1b2c6e 0%, #101a33 45%, #0d1428 100%); } .rs > * { position: relative; z-index: 1; } /* 後光＋金の グロー＋紙ふぶき */ .rs__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(closest-side at 50% 6%, rgba(255,212,71,.38), rgba(255,212,71,0) 100%) no-repeat; background-size: 380px 300px; background-position: 50% -110px; } .rs__fx::before { content: ''; position: absolute; left: 50%; top: -270px; width: 720px; height: 720px; transform: translateX(-50%); background: repeating-conic-gradient(from 0deg, rgba(255,224,102,.16) 0deg 3deg, rgba(255,224,102,0) 3deg 22deg); -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 74%); mask-image: radial-gradient(closest-side, #000 20%, transparent 74%); } /* 紙ふぶき：5px の 点を 1つ おいて、box-shadow で コピーする */ .rs__fx::after { content: ''; position: absolute; left: 50%; top: 40px; width: 5px; height: 5px; background: #ffd447; box-shadow: -150px 60px 0 1px #ff5e7a, -95px 110px 0 0 #7cf9c4, -30px 86px 0 1px #ffd447, 60px 100px 0 0 #8b4de0, 120px 64px 0 1px #6ee85a, 165px 114px 0 0 #ffd447, -170px 150px 0 0 #ffd447, 175px 170px 0 1px #ff8f5e, -60px 20px 0 0 #7cf9c4, 100px 10px 0 0 #ff5e7a; } .rs--sad .rs__fx::before, .rs--sad .rs__fx::after { display: none; } /* 出てくる アニメ */ .rs__in { opacity: 0; transform: translateY(8px); transition: opacity .28s ease-out, transform .28s ease-out; } .rs__in.is-in { opacity: 1; transform: none; } /* ---- 1. バナー ---- */ .rs__banner { text-align: center; padding-top: 2px; } .rs__title { margin: 0; display: inline-block; transform: rotate(-2deg); font-family: var(--f-head); font-size: 35px; line-height: 1.15; white-space: nowrap; background: linear-gradient(#fff8d0 8%, #ffd447 40%, #f2a01c 60%, #ffe89a 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 3px #4a2a06; paint-order: stroke fill; filter: drop-shadow(0 5px 0 #7d4a0c) drop-shadow(0 9px 12px rgba(0,0,0,.45)); } .rs--sad .rs__title { background: linear-gradient(#dfe6f7, #93a2c8); -webkit-text-stroke: 3px #1d2540; filter: drop-shadow(0 5px 0 #0d142b); } .rs__stars { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-top: 2px; } .rs__stars .star { font-size: 30px; line-height: 1; color: rgba(255,255,255,.18); } .rs__stars .star:nth-child(2) { font-size: 42px; } .rs__stars .star.is-on { color: var(--gold); text-shadow: 0 3px 0 #8a5a12, 0 0 16px rgba(255,212,71,.8); animation: pulse 1.4s ease-in-out infinite; } .rs__stars .star.is-on:nth-child(2) { animation-delay: .2s; } .rs__stars .star.is-on:nth-child(3) { animation-delay: .4s; } /* ---- カード共通 ---- */ .rs__boss, .rs__lv, .rs__ttl, .rs__chip, .rs__item { border-radius: 14px; background: linear-gradient(#243255, #222d52); box-shadow: 0 5px 0 #0d142b, inset 0 2px 0 rgba(255,255,255,.1); } /* ---- 2. ボスの カード ---- */ .rs__boss { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 72px; } .rs__boss--win { box-shadow: 0 5px 0 #0d142b, inset 0 0 0 2px rgba(255,212,71,.35), inset 0 2px 0 rgba(255,255,255,.1); } .rs__bossbox { position: relative; flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 3px; } .rs__bossimg { display: block; } .rs__bossbox.is-ko .rs__bossimg { filter: saturate(.45) brightness(.78); transform: rotate(-14deg) translateY(4px); } .rs__tag { padding: 2px 8px; border-radius: 6px; background: #4b5a86; font-size: 11px; color: #fff; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.35); } .rs__tag--win { background: linear-gradient(var(--dgr-1), var(--dgr-2)); } .rs__score { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; } .rs__num { font-family: var(--f-head); font-size: 38px; line-height: 1; color: var(--gold); text-shadow: 0 4px 0 #8a5a12; } .rs__den { margin-left: 5px; font-family: var(--f-head); font-size: 17px; color: #c6d2ee; } .rs__scoresub { font-size: 11px; color: var(--tx-sub); } .rs__stamp { flex: none; padding: 5px 9px; border-radius: 8px; transform: rotate(-9deg); background: linear-gradient(#5b6b95, #3d4a70); color: #fff; font-family: var(--f-head); font-size: 13px; white-space: nowrap; box-shadow: 0 3px 0 #26304d; } .rs__stamp--on { background: linear-gradient(var(--org-1), var(--org-2)); box-shadow: 0 3px 0 var(--org-sh), 0 0 16px rgba(255,143,94,.6); animation: pulse 1.6s ease-in-out infinite; } /* ---- 3. レベルの 帯 ---- */ .rs__lv { padding: 8px 12px 9px; } .rs__lv--up { background: linear-gradient(#2f7f4a, #1f5c34); box-shadow: 0 5px 0 #0f3a1e, inset 0 2px 0 rgba(255,255,255,.18); } .rs__lvrow { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .rs__lvlabel { padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.28); font-size: 12px; color: #fff; } .rs__lv--up .rs__lvlabel { background: #6ee85a; color: #0f3a1e; font-family: var(--f-head); } .rs__lvnum { flex: 1; display: flex; align-items: baseline; gap: 6px; font-family: var(--f-head); } .rs__lvfrom { font-size: 16px; color: #c6d2ee; } .rs__lvarrow { font-size: 13px; color: #fff; } .rs__lvto { font-size: 26px; line-height: 1; color: var(--gold); text-shadow: 0 3px 0 rgba(0,0,0,.35); } .rs__exp { font-family: var(--f-head); font-size: 16px; color: #7cf9c4; } .rs__bar { margin-top: 7px; height: 10px; border-radius: 999px; background: rgba(0,0,0,.4); box-shadow: inset 0 2px 0 rgba(0,0,0,.4); overflow: hidden; } .rs__barfill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4fd3ff, #7cf9c4); transition: width .8s ease-out; } .rs__best { margin: -2px 0 0; text-align: center; font-size: 13px; color: #7cf9c4; white-space: nowrap; } .hud__pal { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-left: -4px; } /* ---- 図かんの「なかま」タブ（v4.3） ---- */ .palnow { display: flex; gap: 12px; align-items: center; padding: 10px; border: 3px solid var(--gold); border-radius: 14px; background: rgba(245,197,66,.12); } .palnow__art { width: 88px; height: 88px; flex: none; display: flex; align-items: center; justify-content: center; } .palnow__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .palnow__label { font-family: var(--f-body); font-size: 11px; color: #ffd98a; letter-spacing: 1px; } .palnow__name { font-family: var(--f-head); font-size: 19px; color: #fff; } .palnow__lv { font-family: var(--f-head); font-size: 13px; color: #eaf0ff; } .palnow__bar { height: 8px; border-radius: 4px; background: rgba(0,0,0,.4); overflow: hidden; } .palnow__fill { height: 100%; background: linear-gradient(90deg, #6be2a8, #34c47a); } .palnow__evo { font-family: var(--f-body); font-size: 11px; color: #bcd0ff; } .palcell.is-on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,197,66,.35); } .palshop { display: flex; flex-direction: column; gap: 6px; } .palshop__row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 2px solid var(--frame); border-radius: 10px; background: rgba(16,24,48,.7); } .palshop__art { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; } .palshop__name { flex: 1; min-width: 0; font-family: var(--f-head); font-size: 13px; color: #eaf0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .palshop__price { font-family: var(--f-head); font-size: 12px; color: var(--gold); flex: none; } .palshop__coin { font-family: var(--f-head); font-size: 15px; color: var(--gold); } /* ---- けっか画面の なかま（v4.3） ---- */ .rs__pal, .rs__paloffer { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 10px; background: rgba(24,34,64,.75); border: 2px solid var(--frame); } .rs__paloffer { border-color: var(--gold); background: rgba(245,197,66,.14); } .rs__pal--evo { border-color: var(--gold); background: rgba(245,197,66,.14); } .rs__palimg { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; } .rs__palmid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rs__palname, .rs__palotext { font-family: var(--f-head); font-size: 12px; color: #eaf0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs__palotext { flex: 1; color: var(--gold); } .rs__palbar { height: 5px; border-radius: 3px; background: rgba(0,0,0,.4); overflow: hidden; } .rs__palfill { height: 100%; background: linear-gradient(90deg, #6be2a8, #34c47a); } .rs__palexp { font-family: var(--f-head); font-size: 12px; color: #9ff0c4; flex: none; } .rs__palget { min-height: 30px; padding: 0 10px; font-size: 12px; flex: none; } .rs__paloffer.is-got { border-color: #34c47a; background: rgba(52,196,122,.16); } .rs__mission { margin: -2px 0 0; padding: 4px 10px; border-radius: 10px; text-align: center; font-size: 12px; line-height: 1.35; color: #ffe89a; background: rgba(255,212,71,.12); box-shadow: inset 0 0 0 2px var(--gold); } /* たての みじかい 端末で 入りきらない ときだけ 余白を つめる（v4.3） */ .rs--tight { gap: 5px; padding: 8px 12px 10px; } .rs--tight .rs__lv { padding: 6px 12px 7px; } .rs--tight .rs__item { min-height: 70px; } .rs--tight .rs__chip { padding: 4px 4px 5px; } .rs--tight .rs__pal, .rs--tight .rs__paloffer { padding: 3px 8px; } .rs--tight .rs__btns { gap: 6px; } /* ---- 4. ボーナスチップ ---- */ .rs__chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .rs__chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 7px; white-space: nowrap; } .rs__chipk { font-size: 11px; color: var(--tx-sub); } .rs__chipv { font-family: var(--f-head); font-size: 17px; color: #fff; } .rs__chip--on .rs__chipv { color: var(--gold); } /* ---- 5. 手に入れた もの ---- */ .rs__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .rs__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px 4px 7px; min-height: 86px; } .rs__item--gold { background: linear-gradient(#4a3a12, #33270c); box-shadow: 0 5px 0 #0d142b, inset 0 0 0 2px var(--gold), 0 0 16px rgba(255,212,71,.45); } .rs__item--gold::after { content: ''; position: absolute; left: 8px; top: 8px; width: 9px; height: 9px; background: #fff6c9; clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%); filter: drop-shadow(0 0 5px #ffe07a); animation: pulse 1.6s ease-in-out infinite; } .rs__item--dim { opacity: .5; } .rs__item--text .rs__itemimg { font-size: 0; } .rs__itemimg { display: flex; align-items: center; justify-content: center; height: 46px; } .rs__itemimg .sprite, .rs__itemimg img { width: 44px; height: 44px; } .rs__itemname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 1.2; color: #fff; text-align: center; white-space: nowrap; } .rs__badge { position: absolute; top: -7px; right: -4px; padding: 2px 7px; border-radius: 999px; font-family: var(--f-head); font-size: 10px; color: #fff; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.4); } .rs__badge--new { background: linear-gradient(var(--org-1), var(--org-2)); animation: pulse 1.6s ease-in-out infinite; } .rs__badge--gold { background: linear-gradient(var(--gold-lt), var(--gold-2)); color: var(--gold-ink); } .rs__badge--pika { background: linear-gradient(#b48cff, #8a55f0); } /* ---- 6. しょうごう ---- */ .rs__ttl { display: flex; align-items: center; gap: 8px; padding: 6px 10px; white-space: nowrap; } .rs__ttllabel { padding: 2px 8px; border-radius: 6px; background: linear-gradient(#8b4de0, #6a35b8); font-size: 11px; color: #fff; } .rs__ttlname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--f-head); font-size: 15px; color: var(--gold); } .rs__ttlmore { font-size: 11px; color: var(--tx-sub); } /* ---- 7. ボタン ---- */ .rs__btns { margin-top: auto; display: flex; flex-direction: column; gap: 9px; } .rs__btns .btn--big { height: 64px; font-size: 24px; } .rs__row { display: flex; gap: 9px; } .rs__row .btn { flex: 1; min-height: 50px; font-size: 16px; } /* ========================================================= 図かん・そうび・たからばこ ========================================================= */ .tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 8px; padding-bottom: 2px; } .tab { flex: 0 0 auto; min-height: 44px; padding: 0 7px; font-size: 14px; border: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(var(--navy-1), var(--navy-2)); color: #c6d2ee; font-family: var(--f-body); box-shadow: 0 4px 0 var(--navy-sh), inset 0 2px 0 rgba(255,255,255,.14); } .tab.is-on { background: linear-gradient(var(--gold-lt), var(--gold-2)); color: var(--gold-ink); box-shadow: 0 4px 0 var(--gold-sh), inset 0 2px 0 #fff; } .dexcard { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: linear-gradient(var(--hd-1), var(--hd-2)); box-shadow: 0 6px 0 var(--hd-edge); } .dexcard__img { width: 92px; height: 92px; flex: none; } .dexcard__body { flex: 1; min-width: 0; } .dexcard__name { margin: 0; font-family: var(--f-head); font-size: 20px; color: #fff; } .dexcard__title { margin: 2px 0 6px; font-size: 13px; color: var(--gold); } .dexcard__lv { margin: 0 0 6px; font-size: 13px; color: var(--tx-sub); } .dexcard__stats { margin: 6px 0 0; font-size: 12px; color: var(--tx-sub); } .dexcard__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .dexcard__btns .btn { flex: 1 1 auto; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; } .cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 0; border-radius: 12px; cursor: pointer; text-align: center; background: linear-gradient(var(--hd-1), var(--hd-2)); color: var(--tx); font-family: var(--f-body); box-shadow: 0 4px 0 var(--hd-edge), inset 0 2px 0 rgba(255,255,255,.12); } .cell:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--hd-edge); } .cell__img { width: 52px; height: 52px; } .cell__name { font-size: 12px; line-height: 1.2; } .cell__tag { font-size: 10px; color: var(--tx-sub); } .cell__count { font-size: 10px; color: var(--gold); } /* そうびの ちから（v5.4） */ .cell__pow { font-size: 10px; color: var(--gold); line-height: 1.2; } .gearnow { margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(var(--hd-1), var(--hd-2)); box-shadow: 0 3px 0 var(--hd-edge), inset 0 0 0 2px var(--gold); } .gearnow__t { display: block; font-size: 11px; color: var(--gold); margin-bottom: 6px; } .gearnow__chips { display: flex; flex-wrap: wrap; gap: 4px; } .gearnow__chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 3px 6px; border-radius: 8px; background: rgba(0,0,0,.28); } .gearnow__chip b { font-size: 10px; color: var(--tx-sub); font-weight: normal; } .gearnow__chip i { font-size: 11px; color: var(--tx); font-style: normal; } .gearnow__chip.is-off i { color: var(--tx-sub); } .gearnow__chip--set { background: rgba(255,212,71,.18); } .gearnow__chip--set i { color: var(--gold); } .cell.is-unknown { opacity: .55; } .cell.is-unknown .cell__img { filter: brightness(.3); } .cell.is-on { box-shadow: 0 4px 0 var(--gold-sh), inset 0 0 0 3px var(--gold); } .cell--gold { background: linear-gradient(#5a4620, #3d2f14); box-shadow: 0 4px 0 var(--gold-sh), inset 0 0 0 2px var(--gold); } .cell:disabled { cursor: default; } .cell:disabled:active { transform: none; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; border: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(var(--navy-1), var(--navy-2)); color: #c6d2ee; font-family: var(--f-body); font-size: 15px; box-shadow: 0 4px 0 var(--navy-sh); } .chip.is-on { background: linear-gradient(var(--gold-lt), var(--gold-2)); color: var(--gold-ink); box-shadow: 0 4px 0 var(--gold-sh); } .pbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pbar__name { flex: 0 0 42%; font-size: 13px; color: var(--tx-sub); line-height: 1.2; } .pbar__track { flex: 1 1 auto; display: block; height: 10px; border-radius: 999px; background: var(--groove); overflow: hidden; } .pbar__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--exp-1), var(--exp-2)); } .pbar__pct { flex: 0 0 auto; min-width: 44px; text-align: right; font-family: var(--f-head); font-size: 13px; color: var(--gold); } .plog__row { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; } .plog__at { flex: none; color: var(--tx-sub); font-size: 12px; } .parent { font-size: 14px; } /* 学校で ならった ところ（v2.6・おうちの人ページ） */ .terms { margin-bottom: 18px; } .termrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; } /* 教科書（出版社）（v12.4） */ .books { margin: 6px 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); } .books .ulist__name { margin-bottom: 4px; } .bookrow { margin-top: 8px; } .bookrow__name { font-size: 13px; font-weight: 700; color: #ffe89a; margin: 0 0 2px; } .bookrow__chips { margin: 4px 0 2px; } .chip--book { min-height: 34px; padding: 0 10px; font-size: 13px; } .bookrow__note { margin: 2px 0 0; font-size: 12px; } .termrow .chip { min-height: 40px; padding: 0 12px; font-size: 14px; } .ulist { margin: 10px 0 4px; } .ulist__name { margin: 0 0 6px; font-family: var(--f-head); font-size: 15px; color: var(--gold-lt); } .ulist__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .unit { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: #c6d2ee; font-family: var(--f-body); font-size: 13px; line-height: 1.2; text-align: left; cursor: pointer; } .unit.is-on { background: rgba(124,249,196,.14); color: #eafff5; box-shadow: inset 0 0 0 2px rgba(124,249,196,.55); } .unit--soon { opacity: .45; } .unit__mark { flex: none; width: 18px; height: 18px; border-radius: 5px; background: rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; } .unit.is-on .unit__mark { background: var(--grn-1); } .unit__name { flex: 1; } .unit__term { flex: none; font-size: 11px; color: #93a0c4; } .unit.is-on .unit__term { color: #9fe9c4; } .file { display: none; } .slider { width: 100%; accent-color: var(--gold); } /* ========================================================= ブロックの 絵（CSS の div だけで 描く。画像ファイルは 使わない） .bxbox … 画面に おく 入れもの（大きさは JS が 決める） .bx … 48×48（たからものは 40×40）の 中の 世界 .bx i … 四角 1つ ぶん ========================================================= */ .bxbox { position: relative; flex: none; } .bxbox > .bx { position: absolute; left: 0; top: 0; transform-origin: 0 0; } .bx { position: relative; } /* image-rendering は ざらつきの タイルを ぼかさない ため（拡大しても ドットの まま） */ .bx i { position: absolute; display: block; image-rendering: pixelated; } /* いきている 感じ（v9.1） ずかんで 220体が いっせいに 動くと うるさいので、 **バトルと タイトルの 中だけ** 動かす。 .bx__glow … 光る 目・コアが 呼吸するように 明るくなる .bx__eye … ときどき まばたき（たてに つぶれる） ずらしは JS が --bxwait に 入れる */ .arena .bx__glow, .title .bx__glow, .news__list .bx__glow { animation: bxGlow 2.6s ease-in-out infinite; animation-delay: calc(var(--bxwait, 0s) * -1); } .arena .bx__eye, .title .bx__eye { transform-origin: 50% 50%; animation: bxBlink 6.5s steps(1, end) infinite; animation-delay: var(--bxwait, 0s); } @keyframes bxGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.4); } } @keyframes bxBlink { 0%, 95.5%, 100% { transform: scaleY(1); } 96.5%, 98.5% { transform: scaleY(.12); } } @media (prefers-reduced-motion: reduce) { .arena .bx__glow, .title .bx__glow, .news__list .bx__glow, .arena .bx__eye, .title .bx__eye { animation: none; } } .bxbox__png { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; } /* まだ 見ていない もの＝まっ黒の かげ */ .bxbox.is-shadow .bx i { background: #182040 !important; box-shadow: none !important; } .bxbox.is-shadow .bxbox__png { filter: brightness(0) saturate(0) opacity(.4); } /* ========================================================= ずかんの タイル（モンスター・たからもの） ========================================================= */ .dexhead { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; } .dexhead__t { margin: 0; flex: none; font-family: var(--f-head); font-size: 19px; color: #fff; } .dexbar { flex: 1; min-width: 40px; height: 12px; border-radius: 999px; background: #0d142b; box-shadow: inset 0 2px 0 rgba(0,0,0,.5); overflow: hidden; } .dexbar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb43c, var(--gold)); box-shadow: 0 0 10px rgba(255,212,71,.6); transition: width .4s ease; } .dexhead__n { flex: none; font-family: var(--f-head); font-size: 16px; color: #8fa0c8; } .dexhead__n b { font-size: 19px; color: var(--gold); } .dexhead__chip { flex: none; padding: 5px 12px; border-radius: 999px; background: #3a2a52; color: #e0c9ff; font-size: 12px; } .dexgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; margin-top: 16px; } .dexcell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px 10px; border-radius: 13px; background: linear-gradient(#222d52, #1a2340); box-shadow: 0 4px 0 #0d142b, inset 0 2px 0 rgba(255,255,255,.07); } .dexcell__art { position: relative; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; } .dexcell__art .bxbox { position: relative; z-index: 1; } .dexcell__name { font-size: 13px; line-height: 1.2; color: #e6ecff; text-align: center; } .dexcell__sub { font-size: 11px; line-height: 1.2; color: #6b7aa5; text-align: center; } .dexcell__num { padding: 2px 11px; border-radius: 8px; background: #0f1730; color: var(--gold); font-family: var(--f-head); font-size: 13px; } .dexcell.is-unknown { background: linear-gradient(#28345e, #1e2848); box-shadow: 0 4px 0 #0f1730; } .dexcell.is-unknown .dexcell__name { color: #55618a; } /* SR は むらさき、うしろに 光を 出す */ .dexcell.is-sr { background: linear-gradient(#3a2258, #241640); box-shadow: 0 4px 0 #14092b, inset 0 2px 0 rgba(255,255,255,.1); } .dexcell.is-sr .dexcell__art::before { content: ''; position: absolute; inset: -12px; background: radial-gradient(circle, rgba(199,140,255,.55), rgba(199,140,255,0) 70%); } /* ぴかぴか（★3の たからもの） */ .dexcell.is-gold { background: linear-gradient(#4a3a18, #2e2410); box-shadow: 0 4px 0 #1a1408, inset 0 0 0 2px var(--gold), 0 0 16px rgba(255,212,71,.35); } .dexcell.is-gold .dexcell__art::before { content: ''; position: absolute; inset: -12px; background: radial-gradient(circle, rgba(255,212,71,.5), rgba(255,212,71,0) 70%); } .dexcell__badge { position: absolute; top: -8px; right: -3px; padding: 2px 10px; border-radius: 999px; font-family: var(--f-head); font-size: 11px; box-shadow: 0 2px 0 rgba(0,0,0,.4); z-index: 3; } .badge--gold { background: linear-gradient(var(--gold-lt), var(--gold-2)); color: var(--gold-ink); } .dexcell__new { position: absolute; top: -9px; left: -3px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(#ffb07a, #ff6a2e); color: #fff; font-family: var(--f-head); font-size: 11px; box-shadow: 0 2px 0 #a92a13; animation: pulse 1.6s ease-in-out infinite; z-index: 4; } .dexcell__spark { position: absolute; top: 5px; right: 9px; font-size: 14px; color: #fff; text-shadow: 0 0 8px var(--gold), 0 0 14px var(--gold); z-index: 3; } /* ボタンの 中の 小さな アイコン（絵文字は 使わない） */ .ic { display: block; flex: none; } .ic--cam { position: relative; width: 22px; height: 15px; background: #fff; box-shadow: inset -3px 0 0 rgba(0,0,0,.16); } .ic--cam::before { content: ''; position: absolute; top: -4px; left: 5px; width: 8px; height: 4px; background: #fff; } .ic--cam::after { content: ''; position: absolute; top: 4px; left: 7px; width: 8px; height: 8px; background: #2f7a34; box-shadow: inset -2px 0 0 rgba(0,0,0,.28); } /* ========================================================= すがたを えらぶ（v1.4 ／ キャラは ブロック調・UI は 今どきの ゲーム風） ========================================================= */ .wrap--look { padding: 0 0 22px; } .look { position: relative; } /* ---- プレビュー（むらさきの 空 ＋ ドットの 星 ＋ スポットライト） ---- */ .look__stage { position: relative; height: 186px; overflow: hidden; background: linear-gradient(#7150d6 0%, #5a3cb0 55%, #3f2a86 100%); } .look__stars { position: absolute; inset: 0; pointer-events: none; opacity: .85; background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 4px 4px, 3px 3px, 4px 4px, 3px 3px, 4px 4px, 3px 3px, 4px 4px, 3px 3px; background-position: 36px 24px, 128px 62px, 186px 14px, 236px 48px, 308px 96px, 96px 110px, 352px 36px, 262px 128px; background-repeat: no-repeat; } .look__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: rgba(20,12,60,.35); } .look__title { position: absolute; top: 12px; left: 16px; margin: 0; z-index: 2; font-family: var(--f-head); font-size: 20px; color: #fff; text-shadow: 0 3px 0 rgba(20,10,60,.55); } .look__random { position: absolute; top: 10px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 0; border-radius: 14px; cursor: pointer; font-family: var(--f-head); font-size: 17px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.28); background: linear-gradient(#ff8f5e, #ef4f2e); box-shadow: 0 5px 0 #a92a13, 0 8px 14px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.4); } .look__random:active { transform: translateY(4px); box-shadow: 0 1px 0 #a92a13, inset 0 2px 0 rgba(255,255,255,.4); } /* サイコロ（白い 四角に 四角い てん 3つ。絵文字は 使わない） */ .dice { display: block; width: 18px; height: 18px; border-radius: 4px; background-color: #fff; background-image: linear-gradient(#ef4f2e, #ef4f2e), linear-gradient(#ef4f2e, #ef4f2e), linear-gradient(#ef4f2e, #ef4f2e); background-size: 4px 4px; background-repeat: no-repeat; background-position: 3px 3px, 7px 7px, 11px 11px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); } .look__spot { position: absolute; left: calc(50% + 12px); bottom: 28px; width: 210px; height: 44px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(255,226,120,.55), rgba(255,226,120,0) 70%); pointer-events: none; } .look__shadow { position: absolute; left: calc(50% + 12px); bottom: 38px; width: 100px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: rgba(10,20,50,.42); } .look__hero { position: absolute; left: 50%; bottom: 40px; width: 144px; height: 144px; margin-left: -60px; /* 見出しと かさならないよう 少し 右 */ animation: bob 2.6s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(10,10,40,.35)); } .look__chip { position: absolute; bottom: 10px; z-index: 2; display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 12px; background: rgba(14,22,44,.86); font-family: var(--f-body); font-size: 14px; color: #c6d2ee; box-shadow: 0 3px 0 rgba(0,0,0,.35); } .look__chip b { font-family: var(--f-head); font-size: 18px; color: #fff; } .look__chip--name { left: 12px; } .look__chip--name span { color: var(--gold); font-size: 13px; } .look__chip--count { right: 12px; } .look__chip--count b { color: var(--gold); font-size: 16px; } /* ---- カテゴリの タブ ---- */ .look__tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 12px 12px 0; } .look__tab { min-height: 48px; border: 0; border-radius: 14px; cursor: pointer; font-family: var(--f-body); font-size: 17px; color: #c6d2ee; background: linear-gradient(var(--navy-1), var(--navy-2)); box-shadow: 0 4px 0 var(--navy-sh), inset 0 2px 0 rgba(255,255,255,.14); } .look__tab:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy-sh); } .look__tab.is-on { background: linear-gradient(var(--gold-lt), var(--gold-2)); color: var(--gold-ink); font-family: var(--f-head); box-shadow: 0 4px 0 var(--gold-sh), inset 0 2px 0 #fff; } /* ---- パーツの 一覧（4れつ） ---- */ .look__body { padding: 0 12px; } .look__sec { margin-top: 14px; } .look__sectop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .look__sechead { margin: 0; font-family: var(--f-body); font-size: 17px; color: #e6ecff; } .look__hint { font-size: 12px; color: #7f8db3; text-align: right; } .lookgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .lookcell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 108px; padding: 8px 4px; border: 0; border-radius: 14px; cursor: pointer; text-align: center; background: linear-gradient(#1f2a4c, #172038); color: #dbe4ff; font-family: var(--f-body); font-size: 13px; box-shadow: 0 4px 0 #0f1730, inset 0 2px 0 rgba(255,255,255,.08); } .lookcell:active { transform: translateY(3px); box-shadow: 0 1px 0 #0f1730; } .lookcell__img { width: 72px; height: 52px; } .lookcell__name { line-height: 1.15; } .lookcell.is-on { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(255,212,71,.55), 0 4px 0 #0f1730; color: var(--gold); } .lookcell.is-lock { background: linear-gradient(#171d33, #121729); } .lookcell.is-lock .lookcell__img { filter: grayscale(1) brightness(.35); } .lookcell.is-lock .lookcell__name { color: #55618a; } .lookcell__lock { position: absolute; left: 6px; right: 6px; top: 32px; font-size: 13px; line-height: 1.3; color: #c6d2ee; text-shadow: 0 2px 0 rgba(0,0,0,.5); } .badge { position: absolute; top: -7px; right: -4px; padding: 2px 9px; border-radius: 999px; font-family: var(--f-head); font-size: 11px; box-shadow: 0 2px 0 rgba(0,0,0,.35); } .badge--r { background: linear-gradient(var(--gold-lt), var(--gold-2)); color: var(--gold-ink); } .badge--sr { background: linear-gradient(#b48cff, #8a55f0); color: #fff; } /* ---- いろの 四角（8つ ならぶ） ---- */ .swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; } .swatch { position: relative; height: 44px; padding: 0; border: 0; border-radius: 10px; cursor: pointer; background: transparent; } .swatch__chip { position: absolute; inset: 0; border-radius: 10px; box-shadow: inset 0 3px 0 rgba(255,255,255,.38), inset 0 -5px 0 rgba(0,0,0,.28), 0 3px 0 rgba(0,0,0,.4); } .swatch:active .swatch__chip { transform: translateY(2px); } .swatch.is-on .swatch__chip { box-shadow: inset 0 3px 0 rgba(255,255,255,.38), inset 0 -5px 0 rgba(0,0,0,.28), 0 0 0 3px var(--gold), 0 0 16px rgba(255,212,71,.6); } .swatch__spark { position: absolute; top: -9px; right: -5px; font-size: 14px; line-height: 1; color: #fff; text-shadow: 0 0 6px #ffd447, 0 0 12px #ffd447; } .swatch.is-lock .swatch__chip { filter: saturate(.3) brightness(.45); } .swatch__lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-head); font-size: 11px; color: #c6d2ee; text-shadow: 0 1px 0 #000; } .look__actions { display: grid; gap: 10px; padding: 18px 12px 0; } .look__actions .btn--small { justify-self: center; min-width: 120px; } .maker { position: relative; z-index: 1; padding: 12px 0 24px; } .maker .label { padding: 0 12px; color: #fff; text-shadow: 0 2px 0 rgba(10,8,6,.6); } .maker .input { width: calc(100% - 24px); margin: 0 12px 12px; } /* ========================================================= じぶんの モンスターを つくる（写真） ========================================================= */ .photo { display: grid; gap: 14px; padding: 12px 12px 22px; } .photo__stage { position: relative; border-radius: 16px; overflow: hidden; background: #0b1120; box-shadow: inset 0 0 0 3px var(--frame); } .photo__img { display: block; width: 100%; } .photo__crop { position: absolute; border: 3px solid var(--gold); box-shadow: 0 0 0 9999px rgba(6,10,22,.6); } .photo__handle { position: absolute; right: -10px; bottom: -10px; width: 26px; height: 26px; border-radius: 8px; background: var(--gold); box-shadow: 0 3px 0 var(--gold-sh); } .photo__preview { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: rgba(16,24,48,.7); } /* できあがり（v2.7）：大きな みほん＋バトルでの 見え方＋スライダー */ .photo__preview { flex-direction: column; align-items: stretch; } .photo__views { display: flex; gap: 12px; justify-content: center; } .photo__view { display: flex; flex-direction: column; align-items: center; gap: 4px; } .photo__out { width: 128px; height: 128px; image-rendering: pixelated; object-fit: contain; border-radius: 10px; background-color: #e9edf5; background-image: linear-gradient(45deg, #cfd6e6 25%, transparent 25%, transparent 75%, #cfd6e6 75%), linear-gradient(45deg, #cfd6e6 25%, transparent 25%, transparent 75%, #cfd6e6 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; } .photo__sky { position: relative; width: 128px; height: 128px; border-radius: 10px; overflow: hidden; background: linear-gradient(#4fb8f5 0%, #86d6ff 55%, #b7e8ff 100%); } .photo__sky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: repeating-linear-gradient(90deg, #8f9aa8 0 16px, #848f9d 16px 32px); box-shadow: inset 0 4px 0 #6fcf4a; } .photo__outb { position: absolute; left: 50%; bottom: 30px; width: 96px; height: 96px; transform: translateX(-50%); z-index: 2; image-rendering: pixelated; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(10,10,40,.45)); } .photo__shadow { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1; } .photo__cap { font-size: 12px; color: var(--tx-sub); } .photo__row { display: flex; align-items: center; gap: 10px; } .photo__lbl { flex: none; width: 100px; font-size: 13px; color: #dbe4ff; } /* モンスターの 候補 3体（v3.8）。タップで えらぶ */ .photo__picks { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .photo__picks .photo__lbl { width: 100%; } .photo__pick { flex: none; width: 62px; height: 62px; padding: 0; border: 3px solid var(--frame); border-radius: 12px; background: rgba(16,24,48,.85); cursor: pointer; display: flex; align-items: center; justify-content: center; } .photo__pick.is-on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,197,66,.35), 0 3px 0 var(--gold-sh); } .photo__pickimg { width: 52px; height: 52px; image-rendering: pixelated; object-fit: contain; } /* v5.8：体が 45しゅるいに なった → 名前つきの タイル＋「ほかの すがた」で ぜんぶ 見る */ .photo__pick { flex-direction: column; gap: 1px; height: auto; padding: 3px 0 2px; } .photo__pickname { font-size: 9px; line-height: 1.1; color: #cfdaf6; max-width: 56px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .photo__pick.is-on .photo__pickname { color: var(--gold); } .photo__grouprow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .photo__grouprow .photo__lbl { width: 100%; } /* v6.0：AIに 見てもらう（絵を 送って しゅるいを 文字で もらう） */ .photo__seerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .photo__seenote { flex: 1; min-width: 120px; font-size: 12px; color: var(--gold); } .photo__seenote.is-err { color: #ffd0d8; } .photo__glbl { flex: 0 0 100%; margin: 4px 0 0; font-family: var(--font-head); font-size: 12px; color: var(--gold); } .photo__all { max-height: 300px; overflow-y: auto; padding: 6px; border: 2px solid var(--frame); border-radius: 12px; background: rgba(10,16,36,.6); } /* もじを えらぶ（v4.0）：字の モンスターの もじを 子どもが タップで 直す */ .photo__letters { display: flex; flex-direction: column; gap: 6px; } .photo__lhead { display: flex; align-items: center; gap: 8px; } .photo__lcur { flex: 1; font-family: var(--font-head); font-size: 20px; color: var(--gold); letter-spacing: 2px; } .photo__lgrid { display: flex; flex-wrap: wrap; gap: 4px; } .photo__lbtn { width: 30px; height: 30px; padding: 0; flex: none; border: 2px solid var(--frame); border-radius: 8px; background: rgba(16,24,48,.85); color: #eaf0ff; font-family: var(--font-head); font-size: 14px; line-height: 1; cursor: pointer; } .photo__lbtn.is-on { border-color: var(--gold); background: var(--gold); color: var(--gold-ink); } .photo__btns { display: flex; gap: 8px; justify-content: center; } .chips--tight { gap: 6px; } .chip--s { min-height: 36px; padding: 0 10px; font-size: 13px; } .photo__empty { color: #ffd0d8; margin: 0; } /* ---- AIで かっこよく する（v2.8）：金の 3Dボタン＋まちがい＋まっている 幕 ---- */ .photo { position: relative; } .btn--ai { width: 100%; min-height: 70px; flex-direction: column; gap: 0; color: var(--gold-ink); text-shadow: 0 1px 0 rgba(255,255,255,.45); background: linear-gradient(var(--gold-lt), var(--gold-2)); box-shadow: 0 6px 0 var(--gold-sh), 0 10px 18px rgba(0,0,0,.32), inset 0 3px 0 rgba(255,255,255,.55); } .btn--ai:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--gold-sh), 0 5px 10px rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.5); } .btn--ai:disabled { filter: saturate(.4) brightness(.8); cursor: default; } .btn--ai .btn__shine { clip-path: inset(0 round 14px); } .btn--ai__t { font-size: 23px; line-height: 1.1; } .btn--ai__n { font-family: var(--f-body); font-size: 12px; margin-top: 3px; opacity: .85; } .photo__airow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .photo__ainote { margin: 0; } .photo__wait { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-start; justify-content: center; padding-top: 70px; border-radius: 16px; background: rgba(6,10,22,.74); } .photo__waitbox { text-align: center; padding: 22px 24px; border-radius: 16px; background: linear-gradient(var(--navy-1), var(--navy-2)); box-shadow: 0 6px 0 var(--navy-sh), 0 0 0 3px var(--gold), 0 0 22px rgba(255,212,71,.45); } .photo__waiticon { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; } .photo__waiticon span { display: block; width: 16px; height: 16px; background: var(--gold); box-shadow: inset -4px 0 0 rgba(0,0,0,.22), inset 0 -4px 0 rgba(0,0,0,.22); animation: bob .7s ease-in-out infinite; } .photo__waiticon span:nth-child(2) { animation-delay: .12s; } .photo__waiticon span:nth-child(3) { animation-delay: .24s; } .photo__waitt { font-family: var(--f-head); font-size: 21px; color: var(--gold); } .photo__waits { margin-top: 4px; font-size: 13px; color: #c6d2ee; } /* おうちの人ページ：AIの かぎ */ .ai { margin-bottom: 18px; } .ai__steps { margin: 8px 0 0; padding-left: 22px; font-size: 13px; color: var(--tx-sub); line-height: 1.5; } .ai__steps li { margin-top: 3px; } .ai__link { color: var(--gold); word-break: break-all; } .ai__key { margin-top: 10px; min-height: 48px; font-family: monospace; font-size: 15px; } .ai__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ai__status { margin: 10px 0 0; min-height: 20px; font-size: 14px; color: #dbe4ff; line-height: 1.45; } .ai__status--ok { color: var(--grn-1); } .ai__status--bad { color: #ffd0d8; } .ai__sub { margin: 12px 0 6px; font-size: 13px; color: var(--tx-sub); } /* ---- ドットを 直す（v2.9）：できあがりの 下の ボタン ---- */ .photo__editrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .photo__redo { display: none; } .photo__edited { display: none; margin: 0; color: #ffe89a; } .photo__preview.is-edited .photo__row, .photo__preview.is-edited .photo__btns { display: none; } .photo__preview.is-edited .photo__redo { display: inline-flex; } .photo__preview.is-edited .photo__edited { display: block; } /* ========================================================= ドット絵エディタ（v2.9）：#stage に かぶせる 1枚。マス目を ゆびで 直す ========================================================= */ .pixed { position: absolute; inset: 0; z-index: 95; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; background: linear-gradient(#1a2544, var(--bg-1)); } .pixed__head { display: flex; align-items: center; gap: 8px; } .pixed__head .btn--small { margin-left: auto; min-height: 38px; } .pixed__title { flex: none; white-space: nowrap; font-family: var(--f-head); font-size: 19px; color: var(--gold); } .pixed__hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--tx-sub); } .pixed__view { position: relative; flex: none; align-self: center; overflow: hidden; border-radius: 12px; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: crosshair; box-shadow: 0 0 0 3px var(--frame), 0 6px 0 var(--navy-sh); background-color: #e9edf5; background-image: linear-gradient(45deg, #cfd6e6 25%, transparent 25%, transparent 75%, #cfd6e6 75%), linear-gradient(45deg, #cfd6e6 25%, transparent 25%, transparent 75%, #cfd6e6 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; } .pixed__view[data-tool="move"] { cursor: grab; } .pixed__cv { position: absolute; left: 0; top: 0; image-rendering: pixelated; } .pixed__grid { position: absolute; left: 0; top: 0; pointer-events: none; background-image: linear-gradient(rgba(0,0,0,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.16) 1px, transparent 1px); } .pixed__chips { gap: 5px; } .pixed__chips .chip { min-height: 38px; padding: 0 11px; } .pixed__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pixed__lbl { font-size: 12px; color: var(--tx-sub); } .pixed__palwrap { display: flex; align-items: center; gap: 8px; } .pixed__cur { flex: none; width: 46px; height: 46px; border-radius: 10px; box-shadow: 0 0 0 3px var(--gold), inset -6px 0 0 rgba(0,0,0,.18), inset 0 -6px 0 rgba(0,0,0,.18); } .pixed__pal { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 30px); grid-auto-columns: 30px; gap: 4px; overflow-x: auto; padding: 4px 3px; } .pixed__sw { width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer; padding: 0; box-shadow: inset -4px 0 0 rgba(0,0,0,.18), inset 0 -4px 0 rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.35); } .pixed__sw.is-on { box-shadow: 0 0 0 3px var(--gold), inset -4px 0 0 rgba(0,0,0,.18), inset 0 -4px 0 rgba(0,0,0,.18); } .pixed__sw--sep { margin-left: 8px; } .pixed__foot { display: flex; gap: 8px; margin-top: auto; } .pixed__foot .btn { flex: 1; min-height: 58px; } /* ---- かん字の はんてい（v2.9）：おてほん・見くらべ ---- */ :root { --f-kanji: 'UD Digi Kyokasho N-R', 'UD Digi Kyokasho N', 'HGKyokashotai', 'BIZ UDMincho Medium', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', 'Noto Serif CJK JP', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; } .card__model { display: block; margin-top: 2px; font-family: var(--f-body); font-size: 15px; color: var(--paper-lbl); } .card__model b { font-family: var(--f-kanji); font-weight: 400; font-size: 44px; line-height: 1; color: var(--paper-ink); margin-left: 10px; vertical-align: middle; } /* 「おなじ 形に かけたら ◯」の 一言（v5.6・前は 黒い ふきだしが 字に かぶさって いた） */ .wcmp__say { display: block; margin-top: 8px; font-family: var(--f-body); font-size: 14px; color: var(--paper-lbl); text-align: center; } .wcmp { display: flex; gap: 16px; justify-content: center; align-items: flex-end; margin-top: 6px; } .wcmp__box { display: flex; flex-direction: column; align-items: center; gap: 3px; } .wcmp__img, .wcmp__k { display: flex; align-items: center; justify-content: center; width: calc(84px * var(--figk, 1)); height: calc(84px * var(--figk, 1)); background: #fff; border-radius: 10px; box-shadow: inset 0 0 0 2px #dfe4f0; } .wcmp__img { object-fit: contain; } .wcmp__k { font-family: var(--f-kanji); font-size: calc(62px * var(--figk, 1)); line-height: 1; color: var(--paper-ink); } .wcmp__cap { font-family: var(--f-body); font-size: 12px; color: var(--paper-lbl); } /* ========================================================= アイテム（v2.0）：たからものを たたかいの 中で 使う。モックの 部品で 組む .bagbtn … バトル画面 右下の 金の 3Dボタン（光沢スイープ＋のこり数の チップ） .bag … 画面ぜんたいに かぶせる モーダル。紺の カード＋金わく＋金グラデの バナー文字＋✦ .bagrow … アイテム 1つ＝1行（種類の 色で 光る 台座の 絵／わざ名／一言／「つかう」） .hero.has-* … 効果が のこっている あいだ 主人公が 光る .fx--item … 使った ときの 演出（技名＋色の 光＋主人公の まわりの つぶつぶ） .inv / .invslot … ずかんの もちもの（インベントリ） .itempanel … ずかんで えらんだ たからものの せつめい（画面の 下に はりつく） 種類の 色：atk=#ff5e3a（赤）def=#5ab0ff（青）wis=#63d94f（みどり）luck=#ffd447（金） ========================================================= */ /* ---- 種類の 色（CSS 変数で まとめて わたす） ---- */ .k--atk { --kind: #ff5e3a; --kind-2: #c0400f; --kind-tx: #ffb09a; --kind-glow: rgba(255,94,58,.45); } .k--def { --kind: #5ab0ff; --kind-2: #2f6fc0; --kind-tx: #a9d6ff; --kind-glow: rgba(90,176,255,.45); } .k--wis { --kind: #63d94f; --kind-2: #34a52c; --kind-tx: #b6f2a8; --kind-glow: rgba(99,217,79,.45); } .k--luck { --kind: #ffd447; --kind-2: #f2a01c; --kind-tx: #ffe89a; --kind-glow: rgba(255,212,71,.5); } .pw--atk { color: #ffb09a; } .pw--def { color: #a9d6ff; } .pw--wis { color: #b6f2a8; } .pw--luck { color: var(--gold-lt); } /* ---- 右下の ボタン ---- */ .bagbtn { position: absolute; right: 10px; bottom: 8px; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; cursor: pointer; /* v12.9：字を やめて 四角に（前は 143×48） */ font-family: var(--f-head); font-size: 16px; color: var(--gold-ink); text-shadow: 0 1px 0 rgba(255,255,255,.45); background: linear-gradient(var(--gold-lt), var(--gold-2)); box-shadow: 0 6px 0 var(--gold-sh), 0 10px 18px rgba(0,0,0,.32), inset 0 3px 0 rgba(255,255,255,.55); } .bagbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--gold-sh), 0 5px 10px rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.5); } .bagbtn .btn__shine { clip-path: inset(0 round 14px); } .bagbtn__t { display: none; } .bagbtn__n { position: absolute; left: -7px; bottom: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; border: 2px solid var(--gold-lt); /* のこり数は 左下（右上は 効果の 点） */ display: inline-flex; align-items: center; justify-content: center; background: #1b2540; color: var(--gold); font-size: 13px; text-shadow: none; box-shadow: inset 0 2px 0 rgba(0,0,0,.45); } .bagbtn.is-empty { background: linear-gradient(var(--lock-1), var(--lock-2)); color: var(--lock-tx); text-shadow: none; box-shadow: 0 6px 0 var(--lock-sh), 0 10px 18px rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.15); } .bagbtn.is-empty .btn__shine, .bagbtn.is-empty .bagbtn__n { display: none; } /* ふくろ（ブロック絵）：茶色の 袋＋口の ひも＋金の とめ具。絵文字は 使わない */ .ic--bag { position: relative; width: 22px; height: 20px; background: #a3672f; box-shadow: inset -5px 0 0 #6d4218, inset 0 -4px 0 #6d4218, inset 3px 3px 0 rgba(255,255,255,.28); } .ic--bag::before { content: ''; position: absolute; top: -6px; left: 5px; width: 12px; height: 6px; background: #d9a76a; box-shadow: inset -3px 0 0 #a3672f, inset 0 -2px 0 #a3672f; } .ic--bag::after { content: ''; position: absolute; top: 7px; left: 8px; width: 6px; height: 6px; background: var(--gold); box-shadow: inset -2px 0 0 var(--gold-sh), inset 0 -2px 0 var(--gold-sh), 0 0 6px rgba(255,212,71,.8); } .bagbtn.is-empty .ic--bag { filter: grayscale(1) brightness(.85); } .bagbtn__dots { position: absolute; top: -9px; right: -5px; display: flex; gap: 3px; } .bagbtn__dot { display: block; width: 13px; height: 13px; border-radius: 3px; animation: pulse 1.6s ease-in-out infinite; } .bagbtn__dot--burst { background: #ff5e3a; box-shadow: inset -3px 0 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.25), 0 0 8px rgba(255,94,58,.9); } .bagbtn__dot--shield { background: #5ab0ff; box-shadow: inset -3px 0 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.25), 0 0 8px rgba(90,176,255,.9); } .bagbtn__dot--freeze { background: #9ff4ff; box-shadow: inset -3px 0 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.25), 0 0 8px rgba(159,244,255,.9); } .bagbtn__dot--power { background: var(--gold); box-shadow: inset -3px 0 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.25), 0 0 8px rgba(255,212,71,.9); } /* ---- モーダル（画面ぜんたい） ---- */ .bag { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px 14px; background: rgba(6,10,24,.82); } .bag::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(closest-side at 50% 32%, rgba(255,212,71,.22), rgba(255,212,71,0)); } .bagcard { position: relative; width: 100%; max-width: 372px; padding: 14px 12px 12px; border-radius: 18px; background: linear-gradient(var(--hd-1), var(--hd-2)); box-shadow: 0 8px 0 var(--hd-edge), 0 18px 30px rgba(0,0,0,.5), inset 0 0 0 3px var(--gold), inset 0 3px 0 rgba(255,255,255,.12); animation: popin .22s ease-out; } .bagcard__head { text-align: center; } .bagcard__title { display: inline-block; margin: 0; transform: rotate(-2deg); font-family: var(--f-head); font-size: 30px; line-height: 1.15; white-space: nowrap; background: linear-gradient(#fff8d0 8%, #ffd447 40%, #f2a01c 60%, #ffe89a 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 3px #4a2a06; paint-order: stroke fill; filter: drop-shadow(0 4px 0 #7d4a0c) drop-shadow(0 8px 10px rgba(0,0,0,.45)); } .bagcard__subrow { margin-top: 5px; } .bagcard__sub { display: inline-block; padding: 3px 12px; border-radius: 999px; background: rgba(14,22,44,.88); font-size: 12px; color: var(--tx-sub); box-shadow: 0 3px 8px rgba(0,0,0,.35); } /* ✦ は 文字で 出さず、4とがりの 星を clip-path で */ .bagcard__star { position: absolute; top: 18px; width: 18px; height: 18px; background: #fff6c9; clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%); filter: drop-shadow(0 0 6px #ffe07a); animation: pulse 1.6s ease-in-out infinite; } .bagcard__star--l { left: 24px; } .bagcard__star--r { right: 24px; animation-delay: .5s; } .bag__list { display: grid; gap: 8px; margin-top: 12px; } .bagrow { position: relative; display: flex; align-items: center; gap: 10px; min-height: 78px; padding: 8px; border-radius: 14px; background: linear-gradient(#222d52, #1a2340); box-shadow: 0 5px 0 #0d142b, inset 0 2px 0 rgba(255,255,255,.08); } .bagrow.is-gold { background: linear-gradient(#4a3a12, #33270c); box-shadow: 0 5px 0 #0d142b, inset 0 0 0 2px var(--gold), 0 0 16px rgba(255,212,71,.35); } .bagrow__art { position: relative; flex: none; width: 58px; height: 58px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #0f1730; box-shadow: inset 0 3px 0 rgba(0,0,0,.5), inset 0 0 0 2px var(--kind); } .bagrow__art::before { content: ''; position: absolute; inset: 4px; background: radial-gradient(circle, var(--kind-glow), transparent 70%); } .bagrow__art .bxbox { position: relative; z-index: 1; } .bagrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .bagrow__pw { font-family: var(--f-head); font-size: 16px; line-height: 1.15; color: var(--kind-tx); white-space: nowrap; } .bagrow__desc { font-size: 12px; line-height: 1.2; color: #dbe4ff; } .bagrow__tags { display: flex; gap: 4px; flex-wrap: wrap; } .bagrow__tag { padding: 1px 7px; border-radius: 6px; font-size: 10px; color: #fff; background: rgba(0,0,0,.3); } .bagrow__tag--kind { background: var(--kind); color: #fff; font-family: var(--f-head); text-shadow: 0 1px 0 rgba(0,0,0,.3); } .bagrow__tag--gold { background: linear-gradient(#b48cff, #8a55f0); } .bagrow__use { flex: none; min-height: 46px; padding: 0 14px; font-size: 17px; border-radius: 12px; overflow: hidden; } .bagrow__stamp { flex: none; padding: 5px 9px; border-radius: 8px; transform: rotate(-9deg); background: linear-gradient(#5b6b95, #3d4a70); color: #fff; font-family: var(--f-head); font-size: 13px; white-space: nowrap; box-shadow: 0 3px 0 #26304d; } .bagrow__stamp--off { background: linear-gradient(var(--dgr-1), var(--dgr-2)); box-shadow: 0 3px 0 #8e1f38; font-size: 11px; max-width: 96px; white-space: normal; line-height: 1.2; text-align: center; } .bagrow.is-used, .bagrow.is-off { opacity: .55; } .bagrow.is-used .bagrow__art, .bagrow.is-off .bagrow__art { filter: grayscale(1) brightness(.7); } .bag__close { margin-top: 12px; width: 100%; } /* ---- 効果が のこっている あいだの 主人公（光の 色で わかる） ---- */ .hero.has-burst .hero__img { filter: drop-shadow(0 4px 4px rgba(10,10,40,.45)) drop-shadow(0 0 10px rgba(255,94,58,.95)); } .hero.has-power .hero__img { filter: drop-shadow(0 4px 4px rgba(10,10,40,.45)) drop-shadow(0 0 10px rgba(255,212,71,.95)); } .hero.has-freeze .hero__img { filter: drop-shadow(0 4px 4px rgba(10,10,40,.45)) drop-shadow(0 0 10px rgba(159,244,255,.95)); } /* たて：主人公の 前（右）に 青い ブロックの たて */ .hero.has-shield::after { content: ''; position: absolute; right: -14px; bottom: 22px; width: 18px; height: 24px; z-index: 3; background: #5ab0ff; box-shadow: inset -4px 0 0 #2f6fc0, inset 0 -4px 0 #2f6fc0, inset 0 0 0 3px #dff0ff, 0 0 12px rgba(90,176,255,.9); animation: bob 2.4s ease-in-out infinite; } /* ---- 使った ときの 演出 ---- */ .fx--item .fxname { font-size: 26px; } /* アイテムの わざ名の ふちと 光の 色は js/ui/fxtext.js の STYLE（atk def wis luck）・v14.2 */ .fx__tint { position: absolute; inset: 0; animation: tintfx .8s ease-out forwards; } .fx__tint--atk { background: radial-gradient(closest-side at 24% 62%, rgba(255,120,80,.6), rgba(255,94,58,0)); } .fx__tint--def { background: radial-gradient(closest-side at 24% 62%, rgba(140,200,255,.6), rgba(90,176,255,0)); } .fx__tint--wis { background: radial-gradient(closest-side at 24% 62%, rgba(150,240,130,.55), rgba(99,217,79,0)); } .fx__tint--luck { background: radial-gradient(closest-side at 24% 62%, rgba(255,240,170,.7), rgba(255,212,71,0)); } @keyframes tintfx { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } } .fx__sparks--hero { right: auto; left: 58px; } .fx__sparks--atk i { background: #ffb09a; box-shadow: 0 0 8px rgba(255,94,58,.95); } .fx__sparks--def i { background: #dff0ff; box-shadow: 0 0 8px rgba(90,176,255,.95); } .fx__sparks--wis i { background: #d8ffcf; box-shadow: 0 0 8px rgba(99,217,79,.95); } .fx__sparks--luck i { background: #fff0a8; box-shadow: 0 0 10px rgba(255,212,71,1); } /* 四角い オーラ（主人公の まわりに ひろがる） */ .fx__aura { position: absolute; left: 14px; bottom: 56px; width: 88px; height: 88px; border: 6px solid #5ab0ff; box-shadow: 0 0 18px rgba(90,176,255,.9), inset 0 0 18px rgba(90,176,255,.5); animation: aurafx .8s ease-out forwards; } @keyframes aurafx { 0% { transform: scale(.4); opacity: 0; } 30% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } } /* ---- ずかん：もちもの（インベントリ） ---- */ .inv { position: relative; margin-top: 12px; padding: 12px 10px 12px; border-radius: 16px; background: linear-gradient(var(--hd-1), var(--hd-2)); box-shadow: 0 6px 0 var(--hd-edge), inset 0 0 0 2px rgba(255,212,71,.6), inset 0 2px 0 rgba(255,255,255,.1); } .inv__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .inv__t { font-family: var(--f-head); font-size: 17px; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.35); } .inv__sub { flex: 1; font-size: 11px; color: var(--tx-sub); } .inv__n { padding: 2px 10px; border-radius: 999px; background: #0f1730; color: var(--gold); font-family: var(--f-head); font-size: 13px; box-shadow: inset 0 2px 0 rgba(0,0,0,.4); } .inv__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .invslot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 112px; padding: 10px 4px 8px; border: 0; border-radius: 12px; cursor: pointer; text-align: center; background: #0f1730; color: #e6ecff; font-family: var(--f-body); box-shadow: inset 0 3px 0 rgba(0,0,0,.5), inset 0 0 0 2px var(--kind, #2b3860); } .invslot:active { transform: translateY(2px); } .invslot__no { position: absolute; top: -8px; left: -4px; width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: linear-gradient(var(--gold-lt), var(--gold-2)); color: var(--gold-ink); font-family: var(--f-head); font-size: 12px; box-shadow: 0 2px 0 var(--gold-sh); } .invslot__art { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .invslot__art::before { content: ''; position: absolute; inset: -8px; background: radial-gradient(circle, var(--kind-glow, rgba(255,255,255,.1)), transparent 70%); } .invslot__art .bxbox { position: relative; z-index: 1; } .invslot__pw { font-family: var(--f-head); font-size: 11px; line-height: 1.15; color: var(--kind-tx, #fff); } .invslot__name { font-size: 10px; line-height: 1.15; color: #aab8d8; } .invslot--empty { cursor: default; } .invslot--empty .invslot__no { background: linear-gradient(#3c4a78, #26304f); color: #93a2c8; box-shadow: 0 2px 0 #171d34; } .invslot__plus { position: relative; width: 26px; height: 26px; opacity: .45; } .invslot__plus::before { content: ''; position: absolute; left: 10px; top: 0; width: 6px; height: 26px; background: #93a2c8; } .invslot__plus::after { content: ''; position: absolute; left: 0; top: 10px; width: 26px; height: 6px; background: #93a2c8; } .invslot--empty .invslot__name { color: #6b7aa5; } /* ---- ずかん：たなの タイル ---- */ .dexgrid--tr .dexcell { cursor: pointer; } .dexcell__pw { font-family: var(--f-head); font-size: 10px; line-height: 1.15; text-align: center; } .dexcell.is-unknown .dexcell__pw { opacity: .75; } .dexcell__bag { position: absolute; bottom: -8px; left: -3px; padding: 2px 8px; border-radius: 999px; background: linear-gradient(#7cc4ff, #2f7fe0); color: #fff; font-family: var(--f-head); font-size: 10px; box-shadow: 0 2px 0 #1a4f96; z-index: 4; } .dexcell.is-pick { box-shadow: 0 4px 0 #0d142b, 0 0 0 3px var(--gold), 0 0 16px rgba(255,212,71,.5); } /* ---- ずかん：えらんだ たからものの せつめい（画面の 下に はりつく） ---- */ .itempanel { position: sticky; bottom: 4px; z-index: 5; margin-top: 14px; border-radius: 16px; overflow: hidden; background: linear-gradient(var(--hd-1), var(--hd-2)); box-shadow: 0 6px 0 var(--hd-edge), 0 -8px 22px rgba(0,0,0,.5), inset 0 0 0 3px var(--gold); animation: popin .2s ease-out; } .itempanel__band { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 12px; background: linear-gradient(90deg, var(--kind), var(--kind-2)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); } .itempanel__kind { padding: 2px 9px; border-radius: 6px; background: rgba(0,0,0,.3); color: #fff; font-size: 11px; white-space: nowrap; } .itempanel__pw { flex: 1; margin: 0; font-family: var(--f-head); font-size: 16px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .itempanel__x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 9px; cursor: pointer; background: rgba(0,0,0,.32); color: #fff; font-family: var(--f-head); font-size: 17px; box-shadow: inset 0 2px 0 rgba(0,0,0,.3); } .itempanel__x:active { transform: translateY(2px); } .itempanel__main { display: flex; align-items: center; gap: 12px; padding: 10px 12px 12px; } .itempanel__art { position: relative; flex: none; width: 72px; height: 72px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #0f1730; box-shadow: inset 0 3px 0 rgba(0,0,0,.5), inset 0 0 0 2px var(--kind); } .itempanel__art::before { content: ''; position: absolute; inset: 6px; background: radial-gradient(circle, var(--kind-glow), transparent 70%); } .itempanel__art .bxbox { position: relative; z-index: 1; } .itempanel__body { flex: 1; min-width: 0; } .itempanel__name { margin: 0; display: flex; align-items: center; gap: 6px; font-family: var(--f-head); font-size: 16px; color: #fff; } .itempanel__spark { display: inline-block; width: 14px; height: 14px; background: #fff6c9; clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%); filter: drop-shadow(0 0 5px #ffe07a); animation: pulse 1.6s ease-in-out infinite; } .itempanel__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .itempanel__chip { padding: 2px 8px; border-radius: 7px; background: #0f1730; color: var(--kind-tx); font-family: var(--f-head); font-size: 12px; white-space: nowrap; box-shadow: inset 0 2px 0 rgba(0,0,0,.4); } .itempanel__sub { margin: 6px 0 0; font-size: 11px; line-height: 1.3; color: var(--tx-sub); } .itempanel__btns { display: grid; gap: 6px; flex: none; } .itempanel__btns .btn--small { min-width: 100px; padding: 0 10px; font-size: 15px; overflow: hidden; } .itempanel.is-gold .itempanel__main { background: linear-gradient(rgba(255,212,71,.1), rgba(255,212,71,0)); } /* ---- じゅうてん（v2.0 第2段階：コイン 2まいで もう1回） ---- */ .bagcard__coins { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px 10px; border-radius: 999px; vertical-align: middle; background: rgba(14,22,44,.88); font-size: 12px; color: var(--tx-sub); box-shadow: 0 3px 8px rgba(0,0,0,.35); } .bagcard__coins b { font-family: var(--f-head); font-size: 14px; color: var(--gold); } .bagrow__recol { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; } .bagrow__re { position: relative; min-height: 40px; padding: 0 12px; border: 0; border-radius: 11px; cursor: pointer; font-family: var(--f-head); font-size: 14px; color: var(--gold-ink); text-shadow: 0 1px 0 rgba(255,255,255,.4); background: linear-gradient(var(--gold-lt), var(--gold-2)); box-shadow: 0 4px 0 var(--gold-sh), inset 0 2px 0 rgba(255,255,255,.5); } .bagrow__re:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-sh), inset 0 2px 0 rgba(255,255,255,.5); } .bagrow__recost { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: #aab8d8; white-space: nowrap; } /* 使いおわったが じゅうてんできる 行：絵だけ 灰色に、金の ボタンは 目立たせる */ .bagrow.is-re .bagrow__art { filter: grayscale(1) brightness(.7); } .bagrow.is-re .bagrow__pw, .bagrow.is-re .bagrow__desc, .bagrow.is-re .bagrow__tags { opacity: .55; } /* ---- がくねん えらび（v2.1：公開前の 準備。いまは 小3 だけ あそべる） ---- */ .grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; } .gradecell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(var(--hd-1), var(--hd-2)); color: #e6ecff; font-family: var(--f-body); box-shadow: 0 4px 0 var(--hd-edge), inset 0 2px 0 rgba(255,255,255,.12); } .gradecell:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--hd-edge); } .gradecell__g { font-family: var(--f-head); font-size: 18px; } .gradecell__s { font-size: 10px; color: var(--tx-sub); } .gradecell.is-on { background: linear-gradient(var(--gold-lt), var(--gold-2)); color: var(--gold-ink); box-shadow: 0 4px 0 var(--gold-sh), inset 0 2px 0 #fff; } .gradecell.is-on .gradecell__s { color: var(--gold-ink); } .gradecell.is-prep { opacity: .55; } .gradecell.is-prep .gradecell__g { color: #93a2c8; } /* プレイヤーえらびの 学年チップ */ .player__grade { flex: none; padding: 1px 7px; border-radius: 7px; background: #0f1730; color: #8fa0c8; font-family: var(--f-head); font-size: 11px; } /* 小1 さんすう：●○ を ならべて かぞえる（v2.2） */ .num.dots { letter-spacing: .08em; } /* --------------------------------------------------------- とけい（小1 さんすう v2.2）。画像なし・CSS だけ。 黒い ふち・白い 文字ばん・目もり 60・赤い はり。12 が 上。 数字と はりの むきは js/content/sansu1.js の clockHtml が 計算する。 もとの 大きさは 184px（＋外の わ 5px）。--cs で ちぢめて、問題文の 右に おく。 画面が 高い 端末では すこし 大きく（min-height: 820px）。 --------------------------------------------------------- */ .clockq { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .clockq__t { flex: 1 1 auto; min-width: 0; } .clockbox { --cs: clamp(.55, calc(var(--stage-hn, 700) / 900 * .8), .8); position: relative; flex: 0 0 auto; width: calc(194px * var(--cs) * var(--figk, 1)); height: calc(194px * var(--cs) * var(--figk, 1)); } .clock { position: absolute; left: calc(5px * var(--cs) * var(--figk, 1)); top: calc(5px * var(--cs) * var(--figk, 1)); display: block; width: 172px; height: 172px; margin: 0; transform: scale(calc(var(--cs) * var(--figk, 1))); transform-origin: 0 0; border-radius: 50%; background: #fff; border: 6px solid #1a1a1a; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1a1a1a, 0 6px 0 rgba(0,0,0,.12); } .clock__tick { position: absolute; left: 50%; top: 3px; width: 2px; height: 8px; margin-left: -1px; background: #1a1a1a; transform-origin: 50% 83px; } .clock__tick--big { width: 4px; height: 12px; margin-left: -2px; } .clock__num { position: absolute; width: 36px; height: 28px; margin: -14px 0 0 -18px; text-align: center; white-space: nowrap; font-family: 'Mochiy Pop One', sans-serif; font-weight: 700; font-size: 22px; line-height: 28px; color: #1a1a1a; } .clock__hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; background: #d42a20; border-radius: 4px 4px 2px 2px; } .clock__hand--h { width: 10px; height: 50px; margin-left: -5px; } .clock__hand--m { width: 6px; height: 74px; margin-left: -3px; } .clock__center { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #d42a20; } /* あたらしい バージョンの お知らせ（v2.3）。画面の 下に 出る */ .upd { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 370px; padding: 8px 8px 8px 16px; border-radius: 14px; background: rgba(16,24,48,.95); border: 2px solid #FFD166; box-shadow: 0 8px 20px rgba(0,0,0,.4); color: #fff; font-size: 14px; } .upd .btn { margin: 0; } /* かたち・ぶんすうの 図（小2 さんすう v2.3）。inline SVG。線は 黒・中は クリーム・ちょっかくは 赤 */ .figq { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .figq__t { flex: 1 1 auto; min-width: 0; } .figbox { flex: 0 0 auto; width: calc(var(--stage-h) * .2 * var(--figk, 1)); height: calc(var(--stage-h) * .15 * var(--figk, 1)); } .figbox svg { display: block; width: 100%; height: 100%; } .figpair { display: flex; justify-content: center; gap: 18px; margin-top: 4px; } .figpair .fig { display: flex; flex-direction: column; align-items: center; } .figpair .fig b { font-size: 16px; line-height: 20px; } .figpair .fig svg { display: block; width: calc(var(--stage-h) * .144 * var(--figk, 1)); height: calc(var(--stage-h) * .109 * var(--figk, 1)); } /* 問題文の 中の 表（小4「整理の しかた」「かわり方」v4.4） */ .tbl { width: 100%; border-collapse: collapse; margin: 2px 0 4px; font-family: var(--f-body); font-size: 14px; line-height: 1.1; color: var(--paper-ink); letter-spacing: 0; } .tbl th, .tbl td { border: 2px solid var(--paper-ink); padding: 1px 4px; text-align: center; font-weight: normal; white-space: nowrap; } .tbl th { background: rgba(0, 0, 0, .07); font-size: 12px; } .tbl .tbl__q { color: #d42a20; font-weight: bold; } /* 分数など、とちゅうで 切りたくない ところ */ .nw { white-space: nowrap; } @media (min-height: 820px) { .tbl { font-size: 17px; } .tbl th { font-size: 15px; } } /* ========================================================= おうちの人ページ「学習レポート」（v7.3・js/ui/parent.js） 明るい 紙色・白い カード・アクセントは 金 1色・大人向けの 文体。 正本は Claude Design の モック「まなびモンスター 学習レポート」。 ========================================================= */ .pp { --pp-bg: #f4f2ec; --pp-card: #fffdf9; --pp-line: #e7e2d7; --pp-line2: #ece8df; --pp-ink: #26231f; --pp-mut: #756f64; --pp-dim: #9a9488; --pp-gold: #c98c12; --pp-gold-tx: #a8741a; --pp-good: #2e8b3f; --pp-mid: #d99a1e; --pp-weak: #c8413b; --pp-fh: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--pp-bg); color: var(--pp-ink); font-family: 'BIZ UDPGothic', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .pp__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .pp button { font-family: inherit; } .pp-head { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 14px; background: var(--pp-card); border-bottom: 1px solid var(--pp-line); } .pp-head__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pp-kicker { font-family: var(--pp-fh); font-weight: 700; font-size: 12px; letter-spacing: .14em; color: var(--pp-gold-tx); } .pp-title { font-family: var(--pp-fh); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--pp-ink); } .pp-head__name { display: flex; align-items: baseline; gap: 10px; } .pp-head__period { display: flex; align-items: center; gap: 4px; margin-top: 4px; } .pp-head__range { margin-left: auto; } .pp-seg { min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--pp-mut); font-family: var(--pp-fh); font-weight: 700; font-size: 13px; cursor: pointer; } .pp-seg.is-on { background: #fbf1d6; color: #7e5610; } .pp-seg.is-off { opacity: .4; } .pp-segrow { display: flex; flex-wrap: wrap; gap: 4px; } .pp-segrow .pp-seg { background: #ece8df; } .pp-segrow .pp-seg.is-on { background: var(--pp-ink); color: var(--pp-card); } /* お子さんの 切りかえ（v7.8・タイトルから 来た ときだけ） */ .pp-kids { margin-top: 8px; } .pp-back { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--pp-mut); font-size: 13px; cursor: pointer; } .pp-main { display: flex; flex-direction: column; gap: 22px; padding: 18px 18px 32px; } .pp-card { background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 16px; } .pp-pad { padding: 14px 16px; } .pp-muted { color: var(--pp-mut); } .pp-small { font-size: 12px; } .pp-tiny { font-size: 11px; } .pp-center { text-align: center; } .pp-note { margin: 8px 0 0; } .pp-num { font-family: var(--pp-fh); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.01em; font-size: 20px; line-height: 1; white-space: nowrap; } .pp-num small { font-size: .55em; font-weight: 900; } .pp-num--big { font-size: 30px; } .pp-c-good { color: var(--pp-good); } .pp-c-mid { color: #b57d12; } .pp-c-weak { color: var(--pp-weak); } .pp-c-few, .pp-c-none { color: var(--pp-dim); } .pp-f-good { background: var(--pp-good); } .pp-f-mid { background: var(--pp-mid); } .pp-f-weak { background: var(--pp-weak); } .pp-f-few { background: #a9a396; } .pp-f-none { background: #d6d1c6; } .pp-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--pp-line2); overflow: hidden; } .pp-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; } .pp-bar--thick { height: 8px; border-radius: 4px; margin-top: 8px; } .pp-bar--fixed { flex: 0 0 92px; } .pp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; } .pp-h { margin: 0; font-family: var(--pp-fh); font-weight: 700; font-size: 17px; color: var(--pp-ink); } .pp-h--s { font-size: 15px; } .pp-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; } .pp-sec--sub { margin: 12px 0 8px; } .pp-section { display: flex; flex-direction: column; } .pp-section .pp-card + .pp-card { margin-top: 10px; } .pp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .pp-tile { display: flex; flex-direction: column; gap: 5px; padding: 14px 12px 12px; } .pp-delta { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; } .pp-dots { display: flex; gap: 4px; margin-top: 3px; } .pp-dots i { width: 8px; height: 8px; border-radius: 50%; background: #e7e2d7; box-sizing: border-box; } .pp-dots i.is-on { background: var(--pp-mid); } .pp-dots i.is-future { background: transparent; border: 1px solid #e7e2d7; } .pp-chart { margin-top: 12px; padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 10px; } .pp-card__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .pp-card__hd--in { padding: 12px 16px 6px; } .pp-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; height: 96px; } .pp-bars__b { position: relative; background: #f0d89a; border-radius: 4px 4px 0 0; } .pp-bars__b.is-this { background: #e9b74a; } .pp-bars__b.is-today { background: var(--pp-gold); } .pp-bars__v { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-family: var(--pp-fh); font-weight: 900; font-size: 11px; color: var(--pp-ink); white-space: nowrap; } .pp-bars__x { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; font-size: 10px; color: var(--pp-dim); text-align: center; border-top: 1px solid var(--pp-line2); padding-top: 6px; } .pp-bars__x .is-today { color: var(--pp-ink); font-weight: 700; white-space: nowrap; } .pp-list { display: flex; flex-direction: column; padding: 4px 0; } .pp-list > *:not(:first-child):not(.pp-link) { border-top: 1px solid var(--pp-line2); } .pp-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; } .pp-rank { width: 26px; height: 26px; border-radius: 50%; background: var(--pp-ink); color: var(--pp-card); display: inline-flex; align-items: center; justify-content: center; font-family: var(--pp-fh); font-weight: 900; font-size: 13px; flex: none; } .pp-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .pp-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .pp-row__name b { font-family: var(--pp-fh); font-weight: 700; font-size: 15px; } .pp-ic { display: inline-flex; flex: none; } .pp-row > .pp-ic { color: #a39d92; } .pp-urow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font-size: 13px; } .pp-urow__name { flex: 1 1 auto; min-width: 0; } .pp-urow.is-none .pp-urow__name { color: var(--pp-dim); } .pp-urow__pct { width: 44px; text-align: right; font-size: 13px; } .pp-urow--u { cursor: default; } .pp-link { display: block; width: 100%; padding: 8px 16px 10px; border: 0; background: none; color: var(--pp-gold-tx); font-size: 13px; text-align: left; cursor: pointer; } .pp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: 12px; color: var(--pp-mut); } .pp-legend__i { display: inline-flex; align-items: center; gap: 5px; } .pp-growth { display: flex; flex-direction: column; gap: 12px; } .pp-growth__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .pp-growth__ft { display: flex; flex-direction: column; gap: 4px; } .pp-growth__ab { display: flex; align-items: center; gap: 6px; } .pp-growth__ab .pp-num { font-size: 26px; } .pp-growth__ab .pp-ic { color: var(--pp-dim); } .pp-pill { padding: 6px 10px; border-radius: 10px; font-family: var(--pp-fh); font-weight: 900; font-size: 15px; white-space: nowrap; } .pp-pill--good { background: #e6f3e8; color: var(--pp-good); } .pp-pill--weak { background: #fbe6e4; color: var(--pp-weak); } .pp-pill--none { background: #f1efe9; color: var(--pp-mut); } .pp-svg { display: block; } .pp-growth__x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); font-size: 10px; color: var(--pp-dim); } .pp-growth__x span { text-align: center; } .pp-growth__x span:first-child { text-align: left; } .pp-growth__x .is-now { color: var(--pp-ink); font-weight: 700; text-align: right; } .pp-growth__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 10px; border-top: 1px solid var(--pp-line2); } .pp-growth__cell { display: flex; flex-direction: column; gap: 3px; } .pp-growth__v { display: flex; align-items: baseline; gap: 6px; } .pp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pp-good { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-color: #cfe4d2; background: #f2f9f3; text-align: left; color: inherit; cursor: pointer; } .pp-actions { display: flex; flex-direction: column; gap: 10px; } .pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 0 16px; border: 0; border-radius: 12px; font-family: var(--pp-fh); font-weight: 700; font-size: 14px; cursor: pointer; } .pp-btn--p { background: var(--pp-ink); color: var(--pp-card); } .pp-btn--lg { min-height: 50px; font-size: 15px; } .pp-btn--s { background: var(--pp-card); color: var(--pp-ink); border: 1px solid #d9d3c6; } .pp-btn--sm { width: auto; min-height: 36px; padding: 0 12px; font-size: 13px; } .pp-btn--danger { color: var(--pp-weak); border-color: #e8c2bf; } .pp-empty { padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; } .pp-empty .pp-muted { margin: 0; } .pp-head__dt { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 6px; } .pp-head__dtl { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pp-head__dtr { display: flex; flex-direction: column; align-items: flex-end; flex: none; } .pp-head__dtr .pp-num--big { font-size: 34px; } .pp-head__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12px; color: var(--pp-mut); } .pp-q { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; } .pp-q__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pp-q__t { font-size: 14px; line-height: 1.45; } .pp-q__a { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; } .pp-q__a b { font-weight: 700; } .pp-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: #f1efe9; color: var(--pp-mut); flex: none; white-space: nowrap; } .pp-tag--weak { background: #fbe6e4; color: #a8332d; } .pp-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; } .pp-line--col { flex-direction: column; align-items: stretch; gap: 8px; } .pp-line__in { display: flex; gap: 8px; align-items: center; } .pp-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid #d9d3c6; border-radius: 10px; background: #fff; color: var(--pp-ink); font-family: inherit; font-size: 16px; } .pp-ta { width: 100%; height: 140px; padding: 8px; border: 1px solid #d9d3c6; border-radius: 10px; font-family: inherit; font-size: 13px; resize: none; box-sizing: border-box; } .pp-tabox { margin-bottom: 4px; } .pp-report { padding: 16px; display: flex; flex-direction: column; gap: 16px; } .pp-report__hd { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 3px solid var(--pp-ink); } .pp-report__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pp-rtile { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--pp-line); border-radius: 10px; } .pp-report__sec { display: flex; flex-direction: column; gap: 6px; } .pp-report__sec .pp-sec { flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; } .pp-report__sec .pp-sec .pp-h { white-space: nowrap; } .pp-report__sec .pp-list { padding: 0; } .pp-report__sec .pp-q { padding: 10px 0; } .pp-report__notes { padding: 12px 14px; background: #f7f5ef; border-radius: 10px; } .pp-report__notes ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; } .pp-tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .pp-tbl th { text-align: left; font-weight: 700; color: var(--pp-mut); font-size: 11px; padding: 5px 6px; border-bottom: 2px solid var(--pp-ink); } .pp-tbl td { padding: 6px; border-bottom: 1px solid var(--pp-line); vertical-align: top; } .pp-tbl .r { text-align: right; white-space: nowrap; } .pp-tbl tr.is-weak td:nth-child(2), .pp-tbl tr.is-weak td:nth-child(3), .pp-tbl tr.is-weak td:nth-child(5) { color: var(--pp-weak); } /* 図かんの 設定の 部品（terms / fever / judge / ai / records）を 明るい 見た目に そろえる */ .pp-legacy .label { margin: 0 0 6px; font-family: var(--pp-fh); font-weight: 700; font-size: 15px; color: var(--pp-ink); text-shadow: none; } .pp-legacy .label + .label, .pp-legacy .terms, .pp-legacy .ai, .pp-legacy .pfever { margin-bottom: 0; } .pp-legacy .note { margin: 6px 0 0; font-size: 12px; color: var(--pp-mut); line-height: 1.5; } .pp-legacy .note b { color: var(--pp-ink); } .pp-legacy .chip { min-height: 36px; padding: 0 12px; border-radius: 10px; background: #ece8df; color: var(--pp-mut); box-shadow: none; font-family: var(--pp-fh); font-weight: 700; font-size: 13px; } .pp-legacy .chip.is-on { background: var(--pp-ink); color: var(--pp-card); box-shadow: none; } .pp-legacy .termrow { margin: 10px 0 8px; } .pp-legacy .termsug { background: #fbf1d6; box-shadow: none; border: 1px solid #efd9a2; color: var(--pp-ink); font-size: 13px; } .pp-legacy .termsug__t { color: var(--pp-ink); } .pp-legacy .btn { min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--pp-ink); color: var(--pp-card); box-shadow: none; font-family: var(--pp-fh); font-weight: 700; font-size: 13px; text-shadow: none; } .pp-legacy .btn--stone, .pp-legacy .btn--cream { background: var(--pp-card); color: var(--pp-ink); border: 1px solid #d9d3c6; } .pp-legacy .btn--danger { background: #fbe6e4; color: #a8332d; } .pp-legacy .btn:active { transform: none; box-shadow: none; } .pp-legacy .btn .btn__shine { display: none; } .pp-legacy .ulist__name { color: var(--pp-ink); font-family: var(--pp-fh); font-size: 14px; } .pp-legacy .unit { background: var(--pp-card); border: 1px solid var(--pp-line); color: var(--pp-ink); box-shadow: none; border-radius: 10px; } .pp-legacy .unit.is-on { background: #f2f9f3; border-color: #cfe4d2; box-shadow: none; } .pp-legacy .unit__mark { color: var(--pp-good); } .pp-legacy .unit__name { color: var(--pp-ink); } .pp-legacy .unit__term { color: var(--pp-mut); } .pp-legacy .unit--soon { opacity: .5; } .pp-legacy .books { background: #f6f3ec; box-shadow: none; border: 1px solid var(--pp-line); } .pp-legacy .bookrow__name { color: var(--pp-ink); font-family: var(--pp-fh); } .pp-legacy .chip--book { min-height: 34px; padding: 0 10px; font-size: 13px; } .pp-legacy .bookrow__chips { margin: 4px 0 2px; } .pp-legacy .input, .pp-legacy textarea.input { background: #fff; color: var(--pp-ink); border: 1px solid #d9d3c6; box-shadow: none; border-radius: 10px; font-family: inherit; } .pp-legacy .input:focus { box-shadow: 0 0 0 3px #fbf1d6; } .pp-legacy .ai__status { color: var(--pp-mut); } .pp-legacy .ai__status--ok { color: var(--pp-good); } .pp-legacy .ai__status--bad { color: var(--pp-weak); } .pp-legacy .ai__sub { color: var(--pp-mut); } .pp-legacy .ai__link { color: var(--pp-gold-tx); } .pp-legacy .ai__steps { color: var(--pp-ink); font-size: 13px; } .pp-legacy .pfever__now { color: var(--pp-ink); font-family: var(--pp-fh); } .pp-legacy .pfever__row { background: #f7f5ef; color: var(--pp-mut); } .pp-legacy .pfever__row.is-fever { box-shadow: inset 0 0 0 2px var(--pp-gold); color: var(--pp-ink); } .pp-legacy .pfever__name { color: var(--pp-ink); } .pp-legacy .pfever__lv { color: var(--pp-gold-tx); } /* ========================================================= ⑦ ためゲージ／⑥ カットイン／⑨ オーロラ フィナーレ（v7.5） ========================================================= */ /* ⑦ ためゲージ：コンボの すぐ 下。あと 何問で ひっさつか 見える */ .charge { position: absolute; left: 134px; top: 64px; z-index: 4; /* v12.9：勇者と てきの あいだ。コンボが 出て いる ときは その 下（.combo + .charge） */ display: flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 10px; background: rgba(10,14,34,.72); font-family: var(--f-body); font-size: 10px; color: #ffe9a8; } .charge[hidden] { display: none; } .combo:not([hidden]) + .charge { top: 94px; } .combo.is-sp:not([hidden]) + .charge { top: 108px; } .charge__dots { display: flex; gap: 3px; } .charge__dot { width: 7px; height: 7px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,233,168,.5); } .charge__dot.is-on { background: #ffe07a; border-color: #fff3c4; box-shadow: 0 0 5px 1px rgba(255,214,90,.9); } .charge.is-pop { animation: chargePop .22s ease-out; } @keyframes chargePop { 0% { transform: scale(.86); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } } /* ⑥ カットイン：わざの 前に 主人公が よこから 大きく 入る */ .cutin { position: absolute; left: 0; right: 0; top: 8px; height: 96px; z-index: 30; /* v12.2：上へ（技名の 帯が アリーナの 下に 来た ので） */ display: flex; align-items: center; justify-content: center; pointer-events: none; animation: cutinBox .62s ease-out forwards; } .cutin__band { position: absolute; left: -10%; right: -10%; top: 8px; bottom: 8px; background: linear-gradient(90deg, rgba(10,14,34,0), rgba(10,14,34,.92) 18%, rgba(10,14,34,.92) 82%, rgba(10,14,34,0)); border-top: 2px solid var(--el, #ffd447); border-bottom: 2px solid var(--el, #ffd447); transform: skewY(-3deg); } .cutin__face { position: relative; display: flex; align-items: flex-end; gap: 4px; animation: cutinFace .62s cubic-bezier(.15,.9,.25,1) forwards; } .cutin__hero { width: 92px; height: 92px; image-rendering: pixelated; filter: drop-shadow(0 0 10px var(--el, #ffd447)); } .cutin__pal { display: flex; align-items: flex-end; filter: drop-shadow(0 0 8px #ffd447); } .cutin__tx { position: relative; margin-left: 8px; font-family: var(--f-head); font-size: 15px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 10px var(--el, #ffd447); animation: cutinTx .62s ease-out forwards; } @keyframes cutinBox { 0% { opacity: 0; } 12% { opacity: 1; } 74% { opacity: 1; } 100% { opacity: 0; } } @keyframes cutinFace { 0% { transform: translateX(-190px) scale(.8); } 42% { transform: translateX(0) scale(1); } 78% { transform: translateX(0) scale(1); } 100% { transform: translateX(40px) scale(1); } } @keyframes cutinTx { 0% { opacity: 0; transform: translateX(90px); } 46% { opacity: 1; transform: translateX(0); } 80% { opacity: 1; } 100% { opacity: 0; } } /* ⑧ 相棒と いっしょの ときは 金の わく */ .cutin--pal .cutin__band { border-color: #ffd447; box-shadow: inset 0 0 24px rgba(255,212,71,.35); } /* ⑨ オーロラ フィナーレ（20コンボ〜）*/ .fx__sky--starburst { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,6,38,.92), rgba(24,10,60,.7) 60%, rgba(10,30,50,.5)); animation: fxfade 1.9s ease-out forwards; } /* 虹の カーテンが 空に ゆれる */ .fx__curtain { position: absolute; inset: 0; overflow: hidden; } .fx__curtain i { position: absolute; top: -10px; width: 40px; height: 150px; opacity: 0; filter: blur(1px); animation: burstCurtain 1.5s ease-out forwards; } @keyframes burstCurtain { 0% { opacity: 0; transform: scaleY(.2) skewX(0deg); } 28% { opacity: .95; transform: scaleY(1) skewX(8deg); } 60% { opacity: .8; transform: scaleY(1.05) skewX(-8deg); } 100% { opacity: 0; transform: scaleY(1.1) skewX(4deg); } } /* 光の 柱が 敵の ところに 立つ */ .fx__pillars { position: absolute; right: 54px; bottom: 40px; } .fx__pillars i { position: absolute; bottom: 0; width: 12px; height: 0; background: linear-gradient(180deg, #fff, #7cf9c4); box-shadow: 0 0 16px 5px rgba(124,249,196,.8); animation: burstPillar .7s ease-out forwards; } @keyframes burstPillar { 0% { height: 0; opacity: 0; } 30% { height: 150px; opacity: 1; } 100% { height: 170px; opacity: 0; } } .fx__ring--starburst { border-color: #b8ffe6; box-shadow: 0 0 26px #7cf9c4; animation-delay: .5s; } /* 光が ふる */ .fx__fall { position: absolute; inset: 0; overflow: hidden; } .fx__fall i { position: absolute; top: -8px; background: #eafff6; box-shadow: 0 0 8px 2px rgba(180,255,230,.9); animation: burstFall 1.1s linear forwards; } @keyframes burstFall { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(220px); opacity: 0; } } .fxscreen--starburst { --fs-line: rgba(200,255,240,.9); --fs-ring: #b8ffe6; } .fxscreen--starburst .fxscreen__tint { background: radial-gradient(circle at var(--fs-x, 348px) var(--fs-y, 112px), rgba(255,255,255,1), rgba(124,249,196,.7) 26%, rgba(79,211,255,.45) 50%, rgba(10,20,44,.85) 82%); } @media (prefers-reduced-motion: reduce) { .cutin, .cutin__face, .cutin__tx, .fx__curtain i, .fx__pillars i, .fx__fall i { animation-duration: .01s; } } /* ========================================================= エラーの 保険（v7.6・js/core/guard.js） 画面の 下の バー「こまった ことが おきたみたい」。こうしんの バー（.upd）と 同じ 場所・同じ 作りで、ふちは 赤オレンジ。トースト（90）より 上。 ========================================================= */ .guard { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; gap: 8px; width: 356px; max-width: calc(100% - 24px); padding: 10px 12px; border-radius: 14px; background: rgba(16,24,48,.96); border: 2px solid #FF7A59; box-shadow: 0 8px 20px rgba(0,0,0,.45); color: #fff; font-size: 13px; line-height: 1.4; } .guard__t { display: flex; flex-direction: column; gap: 2px; } .guard__t b { font-family: var(--f-head); font-size: 15px; color: #FFD166; } .guard__t span { color: #dfe6f5; } .guard__row { display: flex; gap: 8px; justify-content: flex-end; } .guard .btn { margin: 0; } /* おうちの人ページ「こまったとき・感想を送る」 */ .pp-errlist { display: flex; flex-direction: column; gap: 6px; } .pp-err { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 8px; background: #fbf1ee; border: 1px solid #efd4cf; } .pp-err__when { font-size: 11px; color: var(--pp-mut); } .pp-err__msg { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--pp-ink); word-break: break-all; } .pp-ta--fb { height: 190px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.45; } /* ========================================================= てきの ため → カウンター（v7.7） 敵の 頭の 上に「ため」の 玉。たまりきった 問題は 敵が 赤く 光って こうげきに 出る。 正解 → カウンター（金の 帯＋主人公の 大きな ふみこみ）／まちがい → 敵が つっこんで きて 主人公が よろける ========================================================= */ .foecharge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; z-index: 3; } .foecharge__dot { width: 8px; height: 8px; background: rgba(10,16,40,.7); border: 1px solid rgba(255,120,120,.6); } .foecharge__dot.is-on { background: #ff5e3a; border-color: #ffd0c0; box-shadow: 0 0 5px 1px rgba(255,94,58,.9); } .foecharge__label { margin-left: 2px; padding: 1px 6px; border-radius: 6px; background: linear-gradient(#ff5e3a, #c62828); color: #fff; font-family: var(--f-head); font-size: 10px; white-space: nowrap; box-shadow: 0 2px 0 #7d1f1f; animation: pulse 0.9s ease-in-out infinite; } .enemy--boss .foecharge { top: -16px; } .enemy.is-charging .enemy__img { filter: drop-shadow(0 0 7px rgba(255,94,58,.7)) drop-shadow(0 4px 4px rgba(10,10,40,.45)); } .enemy.is-attacking .enemy__img { filter: drop-shadow(0 0 12px rgba(255,60,40,1)) drop-shadow(0 4px 4px rgba(10,10,40,.45)); animation: foeMenace 0.7s ease-in-out infinite; } @keyframes foeMenace { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.06); } } /* まちがえた：敵が つっこんで くる（主人公の ほうへ） */ .enemy.is-lunge { animation: foeLunge .55s ease-out; z-index: 4; } @keyframes foeLunge { 0% { transform: translateX(0); } 40% { transform: translateX(-150px) scale(1.1); } 60% { transform: translateX(-140px) scale(1.1); } 100% { transform: translateX(0); } } .hero.is-struck { animation: heroStruck .6s ease-out; } @keyframes heroStruck { 0% { transform: translateX(0); } 45% { transform: translateX(-14px) rotate(-10deg); } 65% { transform: translateX(-10px) rotate(-6deg); } 100% { transform: translateX(0); } } .hero.is-struck .hero__img { filter: drop-shadow(0 4px 4px rgba(10,10,40,.45)) brightness(1.6) sepia(1) hue-rotate(-40deg); } /* カウンター：主人公の 大きな ふみこみ＋金の 帯 */ .hero.is-counter { animation: heroCounter .55s ease-out; z-index: 5; } @keyframes heroCounter { 0% { transform: translateX(0); } 30% { transform: translateX(150px) scale(1.15); } 55% { transform: translateX(160px) scale(1.15); } 100% { transform: translateX(0); } } .counterbanner { position: absolute; left: 50%; top: 62px; transform: translateX(-50%) rotate(-4deg); z-index: 8; padding: 5px 16px; background: linear-gradient(#fff3b0, var(--gold), #f2a01c); border: 3px solid #4a2a06; border-radius: 10px; font-family: var(--f-head); font-size: 22px; color: #4a2a06; text-shadow: 0 1px 0 rgba(255,255,255,.6); white-space: nowrap; box-shadow: 0 4px 0 #8a5a12, 0 0 22px rgba(255,212,71,.9); animation: counterBanner 1.1s ease-out forwards; } @keyframes counterBanner { 0% { opacity: 0; transform: translateX(-50%) rotate(-4deg) scale(.5); } 18% { opacity: 1; transform: translateX(-50%) rotate(-4deg) scale(1.15); } 30% { transform: translateX(-50%) rotate(-4deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) rotate(-4deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .enemy.is-lunge, .hero.is-struck, .hero.is-counter, .counterbanner, .enemy.is-attacking .enemy__img { animation-duration: .01s; } } /* かん字の 見くらべ（v7.6）：2〜3文字の ことばは わくを 横長に して 字を 小さく（はみ出し 防止） */ .wcmp--n2 .wcmp__img, .wcmp--n2 .wcmp__k { width: calc(147px * var(--figk, 1)); } .wcmp--n2 .wcmp__k { font-size: calc(50px * var(--figk, 1)); white-space: nowrap; } .wcmp--n3 .wcmp__img, .wcmp--n3 .wcmp__k { width: calc(168px * var(--figk, 1)); } .wcmp--n3 .wcmp__k { font-size: calc(38px * var(--figk, 1)); white-space: nowrap; } /* ラスボスは 名前が 頭の 上（v6.4）なので、ための 玉は HPの 下に おく（かさならない ように・claude-db の 指摘） */ .enemy--last .foecharge { position: static; transform: none; margin-top: 3px; } /* ========================================================= 敵がわの 攻防（v8.1） 中ボス（金の オーラ＋「中ボス」の リボン＋HPの 玉）／弱点の バッジ（むらさき）／ ボスの わざ（たての かまえ＝青い たて・ぶんしん＝うすい 2体め・すきだらけ＝黄色く 光る）／ なかまを よぶ（2体めが 右から とびこむ）／帯は カウンターの 帯の 色ちがい ========================================================= */ .enemy--elite .enemy__img { filter: drop-shadow(0 0 12px rgba(255,190,50,.95)) drop-shadow(0 4px 4px rgba(10,10,40,.45)); } .enemy--elite .enemy__name { background: linear-gradient(#b8860b, #7a5208); color: #fff7d6; font-size: 12px; } .enemy--elite .shadow--foe { width: 80px; } .enemy__ribbon--elite { background: linear-gradient(#ffe27a, #e0a020); color: #4a2a06; box-shadow: 0 2px 0 #8a5a12; animation: pulse 1.4s ease-in-out infinite; } /* ボスを 強く（v12.7） 本気モード：むらさきの リボン「本気」＋ むらさきの オーラ。さいごの 力（第3形態）：赤い オーラが どくどく 光る。 オーラは ::before（3D の 図に filter を かけない きまり） */ .enemy__ribbon--hard { background: linear-gradient(#c77dff, #6a1fb8); color: #fff; box-shadow: 0 2px 0 #3d0f70; top: 34px; right: -14px; } /* 頭の 上は ため・わざの ラベルが 出る ので 右の かた */ /* ふつうの ボスの HP の 玉は 足もとに かさねる（前は 名前の 下＝右下の アイテムボタンに かくれて 見えなかった・v12.7） */ .enemy--boss:not(.enemy--last):not(.enemy--twin) .bosshp { margin-top: -12px; z-index: 3; padding: 3px 5px; border-radius: 999px; background: rgba(10,16,40,.72); } .enemy--last .bosshp { margin-top: -6px; z-index: 3; padding: 3px 5px; border-radius: 999px; background: rgba(10,16,40,.72); } .enemy--boss.enemy--hard, .enemy--boss.is-final { isolation: isolate; } .enemy--boss.enemy--hard::before, .enemy--boss.is-final::before { content: ''; position: absolute; left: 50%; top: 46%; width: 150%; height: 120%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(closest-side, rgba(170,90,255,0) 40%, rgba(196,120,255,.85) 64%, rgba(170,90,255,.35) 80%, rgba(170,90,255,0) 100%); animation: bossAura 2.2s ease-in-out infinite; } .enemy--boss.is-final::before { background: radial-gradient(closest-side, rgba(255,60,60,0) 38%, rgba(255,70,50,.9) 62%, rgba(255,150,40,.4) 80%, rgba(255,60,60,0) 100%); animation-duration: .9s; } .enemy--boss.enemy--hard.is-final::before { background: radial-gradient(closest-side, rgba(255,60,90,0) 38%, rgba(255,60,110,.9) 60%, rgba(180,90,255,.55) 78%, rgba(170,90,255,0) 100%); } @keyframes bossAura { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .enemy--boss.enemy--hard::before, .enemy--boss.is-final::before { animation: none; } } .card__unit--recap { color: #b06a00; font-weight: 700; } /* ふつう／本気 を えらぶ（v12.7）。問題の 場所に かぶせる 紺の パネル */ .bosspick { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: 14px 18px; background: linear-gradient(rgba(14,20,44,.94), rgba(10,14,34,.97)); box-shadow: inset 0 0 0 2px var(--gold); border-radius: 14px; animation: pickIn .28s ease-out; } .bosspick__t { margin: 0; text-align: center; font-family: var(--f-head); font-size: 20px; color: var(--gold-lt); text-shadow: 0 2px 0 rgba(0,0,0,.45); } .bosspick__s { margin: 0 0 4px; text-align: center; font-size: 15px; font-weight: 700; color: #dfe6ff; } .bosspick__btn { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 8px 12px; border: 0; border-radius: 14px; cursor: pointer; font-family: var(--f-body); } .bosspick__btn b { font-family: var(--f-head); font-weight: 400; font-size: 18px; } .bosspick__btn span { font-size: 13px; font-weight: 700; } .bosspick__btn--norm { background: linear-gradient(#fff6dc, #f1dfae); color: #4a3510; box-shadow: 0 5px 0 #b8964e; } .bosspick__btn--hard { background: linear-gradient(#b268ff, #6a1fb8); color: #fff; box-shadow: 0 5px 0 #3d0f70, 0 0 18px rgba(170,90,255,.55); } .bosspick__btn:active { transform: translateY(3px); box-shadow: none; } @keyframes pickIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* 中ボスの HP は 頭の 上・左（右は「中ボス」の リボン）。足もとに おくと 名前の 下で 切れる */ .elitehp { position: absolute; top: -13px; left: -2px; margin: 0; } /* 弱点：名前の 下の むらさきの ピル。その 教科の 問題の ときは 光る */ .enemy__weak { padding: 2px 8px; border-radius: 6px; background: linear-gradient(#8a5cff, #5a2fd0); color: #fff; font-family: var(--f-head); font-size: 10px; white-space: nowrap; box-shadow: 0 2px 0 #3a1a90; } .enemy__weak.is-now { background: linear-gradient(#ff9de0, #c04ad0); box-shadow: 0 2px 0 #7a1a90, 0 0 10px rgba(255,120,220,.9); animation: pulse 1s ease-in-out infinite; } .enemy--boss:not(.enemy--last) .enemy__weak { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 44px; } /* ボスの わざの ラベル（ための ラベルと 同じ 場所・青） */ /* わざの ラベルは **右ぞろえ**（まん中ぞろえだと 画面の 右から はみ出て 切れる） */ .enemy__skill { position: absolute; top: -14px; right: 0; padding: 2px 8px; border-radius: 6px; background: linear-gradient(#5aa8ff, #2a5fd0); color: #fff; font-family: var(--f-head); font-size: 10px; white-space: nowrap; box-shadow: 0 2px 0 #163a8a; z-index: 3; animation: pulse 1.2s ease-in-out infinite; } .enemy__skill--open, .enemy--open .enemy__skill { background: linear-gradient(#ffe27a, #e0a020); color: #4a2a06; box-shadow: 0 2px 0 #8a5a12; } .enemy--last .enemy__skill { position: static; margin: 2px 0 0; } /* たての かまえ：主人公がわ（左）に 青い たてを かまえる */ .enemy__kamae { position: absolute; left: -8px; bottom: 34px; width: 26px; height: 32px; border-radius: 5px 5px 13px 13px; background: linear-gradient(#bfe0ff, #3a6cc4); border: 2px solid #eaf4ff; box-shadow: 0 0 10px rgba(120,190,255,.9), inset 0 -6px 0 rgba(0,0,0,.18); z-index: 3; animation: kamaeBob 1.1s ease-in-out infinite; } .enemy__kamae::before { content: ''; position: absolute; left: 50%; top: 5px; width: 3px; height: 18px; margin-left: -1.5px; background: #fff; box-shadow: 0 6px 0 -0px #fff; } .enemy__kamae::after { content: ''; position: absolute; top: 11px; left: 4px; right: 4px; height: 3px; background: #fff; } @keyframes kamaeBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .enemy--kamae .enemy__img { filter: drop-shadow(0 0 10px rgba(90,168,255,.9)) drop-shadow(0 4px 4px rgba(10,10,40,.45)); } /* すきだらけ：黄色く 光って ふらつく */ .enemy--open .enemy__img { filter: drop-shadow(0 0 12px rgba(255,226,122,1)) drop-shadow(0 4px 4px rgba(10,10,40,.45)); animation: openWobble 0.9s ease-in-out infinite; } @keyframes openWobble { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(2px); } } /* ぶんしん：2体めは うすく・青みがかる。当たった ほうは 消える */ .enemy--clone .enemy__img { opacity: .72; filter: drop-shadow(0 0 8px rgba(120,200,255,.9)) hue-rotate(35deg); } .enemy--twin .shadow--foe { width: 64px; } /* ボスが 2体 ならぶ とき（ぶんしん・なかまを よんだ）は 名前と HP を 足もとに かさねない （かさねると 2つの 名前が 重なり、右下の アイテムボタンにも かくれる）。 ラスボスは 名前が 頭の 上（v6.4）で いい ので そのまま */ .enemy--twin:not(.enemy--last) .enemy__name { position: static; transform: none; margin: 2px 0 0; font-size: 11px; } .enemy--twin:not(.enemy--last) .bosshp { position: static; transform: none; margin: 2px 0 0; } .enemy.is-vanish { animation: cloneVanish .5s ease-in forwards; } @keyframes cloneVanish { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4) translateY(-20px); } } /* なかまを よぶ：2体めが 右から とびこんで くる */ .enemy.is-summoned { animation: summonIn .5s ease-out; } @keyframes summonIn { 0% { transform: translateX(120px) translateY(-30px); opacity: 0; } 60% { transform: translateX(-8px) translateY(0); opacity: 1; } 100% { transform: translateX(0); } } /* 帯の 色ちがい */ .counterbanner--weak { background: linear-gradient(#f0d8ff, #c07aff, #7a3ad0); border-color: #2a0a50; color: #2a0a50; box-shadow: 0 4px 0 #4a1a90, 0 0 22px rgba(200,120,255,.9); } .counterbanner--break { background: linear-gradient(#e8f4ff, #7ab8ff, #2a5fd0); border-color: #0a2050; color: #0a2050; box-shadow: 0 4px 0 #163a8a, 0 0 22px rgba(120,190,255,.9); } .counterbanner--open { background: linear-gradient(#fff3b0, #ffd447, #ff8a2a); border-color: #4a2a06; color: #4a2a06; } .counterbanner--clone { background: linear-gradient(#e8fff4, #7ae0b8, #2aa070); border-color: #0a3020; color: #0a3020; box-shadow: 0 4px 0 #166a48, 0 0 22px rgba(120,255,200,.9); } @media (prefers-reduced-motion: reduce) { .enemy__kamae, .enemy--open .enemy__img, .enemy.is-vanish, .enemy.is-summoned, .enemy__skill, .enemy__ribbon--elite { animation-duration: .01s; } } /* ========================================================= 文字の 太さ（v7.9・2026-09-06） ユーザー「メニューの はじめから とかの 細い字が 気に なる／こういう 細字の ところ 全部 直して」→ 本文の 書体を ドット文字（DotGothic16）から まるゴシック（Zen Maru Gothic）に かえた（--f-body）。ここでは その 上で **押す ところ・名前・ラベル**を 太字（700）に して、読む ところ（説明文・ ヒント・注記）は 中太（500・body の きほん）の まま のこす。 ※ 見出しの Mochiy Pop One は **400 しか ない**ので、`--f-head` を つかう ところに font-weight を つけない（700 に すると ブラウザが にせの 太字を 作って にじむ）。下の ならびは ぜんぶ `--f-body` の ところだけ。 ========================================================= */ .btn--cream, .btn--stone, .sw, .tab, .chip, .unit, .cell, .gradecell, .invslot, .look__tab, .look__chip, .lookcell, .look__sechead, .memo__btn, .display, .choice, .mission, .charge, .revenge, .mixbtn, .node__name, .hud__name, .player, .card__unit, .card__model, .wcmp__cap { font-weight: 700; } /* 動きを へらす せっていの 端末では ひとことの 光を 止める（v7.9） */ @media (prefers-reduced-motion: reduce) { .title__tag { animation: none; } } /* ========================================================= あたらしい こと！（お知らせ・v8.3） こうしんした あと、地図に 行った ところで 1回だけ 出る。 見た目は アイテムの モーダル（.bag）と そろえる ＝紺の カード＋金わく＋金グラデの バナー文字＋✦。 3つずつ ページ送り（.news__dot）。 ========================================================= */ .news { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px 14px; background: rgba(6,10,24,.82); } .news::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(closest-side at 50% 30%, rgba(255,212,71,.24), rgba(255,212,71,0)); } .newscard { position: relative; width: 100%; max-width: 372px; padding: 14px 12px 12px; border-radius: 18px; background: linear-gradient(var(--hd-1), var(--hd-2)); box-shadow: 0 8px 0 var(--hd-edge), 0 18px 30px rgba(0,0,0,.5), inset 0 0 0 3px var(--gold), inset 0 3px 0 rgba(255,255,255,.12); animation: popin .22s ease-out; } .news__title { font-size: 27px; } /* ×（右上）。子どもが いつでも とじられる */ .news__x { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: rgba(10,16,36,.9); color: #cfe0ff; font-family: var(--f-head); font-size: 19px; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 #0a1024, inset 0 0 0 2px rgba(255,212,71,.5); } .news__x:active { transform: translateY(3px); box-shadow: 0 0 0 #0a1024, inset 0 0 0 2px rgba(255,212,71,.5); } .news__list { display: grid; gap: 8px; margin-top: 12px; } /* さいごの塔が ひらいた！（v9.3） お知らせ画面（.news / .newscard）の 入れものを 借りて、中だけ べつに する。 ラスボスを 大きく 見せて、「いく！」と「あとで」を ならべる。 */ /* 見出しは 学年で 長さが 変わる（「さいごの塔が ひらいた！」／「さいごの とうが ひらいた！」）。 左右の ✦に かからない ように 少し 小さく、内がわに 余白を とる */ .towerpop__title { font-size: 20px; padding: 0 26px; } .towerpop__art { position: relative; display: flex; justify-content: center; align-items: flex-end; margin: 12px 0 6px; padding: 10px 0 6px; border-radius: 14px; background: rgba(8,12,30,.55); box-shadow: inset 0 0 0 2px rgba(255,212,71,.28); } .towerpop__art::before { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; background: radial-gradient(closest-side at 50% 62%, rgba(255,77,77,.32), rgba(255,77,77,0)); } .towerpop__boss { position: relative; filter: drop-shadow(0 6px 7px rgba(6,8,26,.6)); animation: bob 2.6s ease-in-out infinite; } .towerpop__line { margin: 4px 0 2px; text-align: center; font-family: var(--f-head); font-size: 17px; color: #ffd447; } .towerpop__sub { margin: 0 0 12px; text-align: center; font-size: 12px; color: var(--tx-sub); } .towerpop__foot { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; } .towerpop__later { flex: none; padding-left: 18px; padding-right: 18px; } @media (prefers-reduced-motion: reduce) { .towerpop__boss { animation: none; } } .newsrow { display: flex; align-items: center; gap: 10px; min-height: 74px; padding: 8px; border-radius: 14px; background: linear-gradient(#222d52, #1a2340); box-shadow: 0 5px 0 #0d142b, inset 0 2px 0 rgba(255,255,255,.08); } .newsrow__art { position: relative; flex: none; width: 84px; height: 58px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 1px; background: #0f1730; box-shadow: inset 0 3px 0 rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,212,71,.45); } .newsrow__art::before { content: ''; position: absolute; inset: 4px; background: radial-gradient(circle, rgba(255,212,71,.22), transparent 70%); } .newsrow__art > * { position: relative; z-index: 1; } .newsrow__row { display: flex; align-items: flex-end; gap: 1px; } .newsrow__hero { width: 46px; height: 46px; image-rendering: pixelated; } .newsrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .newsrow__t { font-family: var(--f-head); font-size: 15px; line-height: 1.2; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.45); } .newsrow__d { font-size: 12px; line-height: 1.3; color: #dbe4ff; } .news__foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .news__dots { display: flex; gap: 6px; flex: none; } .news__dot { display: block; width: 10px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.22); } .news__dot.is-on { background: var(--gold); box-shadow: 0 0 8px rgba(255,212,71,.8); } .news__count { padding: 3px 10px; border-radius: 999px; background: #0f1730; color: var(--gold); font-family: var(--f-head); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* v13.12：ページが 多い ときは 点の かわりに 数 */ .news__next { flex: 1; min-height: 50px; font-size: 19px; } /* ========================================================= スタンプカレンダー（つづけた 日・v8.4） 地図の 帯を 押すと 出る パネルの いちばん 上。 その日 1問でも 答えたら スタンプ 1つ。7マスで ひとまわり。 3日 コイン1／5日 コイン2／7日 コイン3。**切れても ばつは ゼロ**。 ルールは js/core/streak.js ========================================================= */ .stamp { margin: 6px 12px 4px; padding: 8px 12px 9px; border-radius: 12px; background: linear-gradient(var(--hd-1), var(--hd-2)); box-shadow: 0 4px 0 var(--hd-edge), inset 0 2px 0 rgba(255,255,255,.10); display: flex; flex-direction: column; gap: 6px; } .stamp__head { display: flex; align-items: center; gap: 8px; } .stamp__ttl { flex: 1; min-width: 0; font-family: var(--f-head); font-size: 13px; color: var(--gold-lt); letter-spacing: .04em; } .stamp__days { flex: none; display: flex; align-items: baseline; gap: 3px; padding: 1px 9px; border-radius: 999px; background: rgba(0,0,0,.3); font-size: 11px; color: #dbe4ff; } .stamp__days b { font-family: var(--f-head); font-size: 17px; line-height: 1; color: var(--gold); } .stamp__row { display: flex; gap: 5px; } .stamp__cell { position: relative; flex: 1 1 0; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--frame); box-shadow: inset 0 0 0 2px rgba(255,255,255,.14), inset 0 3px 0 rgba(0,0,0,.35); } .stamp__n { font-family: var(--f-head); font-size: 15px; color: var(--lock-1); } /* ごほうびの ある マスは 金の わくで 目じるし */ .stamp__cell.has-gift { box-shadow: inset 0 0 0 2px rgba(255,212,71,.45), inset 0 3px 0 rgba(0,0,0,.35); } .stamp__cell.has-gift .stamp__n { color: var(--tx-dim); } .stamp__gift { position: absolute; top: -9px; right: -4px; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 2px var(--gold); font-family: var(--f-head); font-size: 10px; font-style: normal; color: var(--gold); } /* スタンプが ついた マス */ .stamp__cell.is-on { background: linear-gradient(#ffe07a, var(--gold-2)); box-shadow: 0 3px 0 var(--gold-sh), inset 0 2px 0 rgba(255,255,255,.55); } .stamp__cell.is-on .stamp__n { font-size: 20px; color: var(--gold-ink); } .stamp__cell.is-on .stamp__gift { background: linear-gradient(var(--org-1), var(--org-2)); box-shadow: 0 2px 0 var(--org-sh); color: #fff; } /* きょうの マス（まだ なら オレンジの わくが ゆっくり ひかる） */ .stamp__cell.is-today { box-shadow: inset 0 0 0 3px var(--org-1), inset 0 3px 0 rgba(0,0,0,.3); animation: pulse 1.6s ease-in-out infinite; } .stamp__cell.is-on.is-today { box-shadow: 0 3px 0 var(--gold-sh), inset 0 0 0 3px var(--org-1), inset 0 2px 0 rgba(255,255,255,.4); animation: none; } /* きょう もらった マスは ぽんと はねる */ .stamp__cell.is-got { animation: stampPop .5s ease-out; } @keyframes stampPop { 0% { transform: scale(.4) rotate(-14deg); } 60% { transform: scale(1.22) rotate(4deg); } 100% { transform: scale(1); } } .stamp__sub { font-size: 12px; color: var(--gold-lt); } .stamp.is-done .stamp__sub { color: var(--gold-lt); } /* 上の 帯の「れんぞく N日」（v8.4） */ .mapobi__stk { flex: none; display: flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 9px; border-radius: 999px; background: linear-gradient(var(--navy-1), var(--navy-2)); box-shadow: 0 3px 0 var(--navy-sh); font-size: 12px; color: var(--tx-sub); } .mapobi__stk b { font-family: var(--f-head); color: var(--gold); } .mapobi__fire { flex: none; width: 11px; height: 13px; border-radius: 6px 6px 5px 5px; background: linear-gradient(var(--gold), var(--org-2)); opacity: .55; } .mapobi__stk.is-today .mapobi__fire { opacity: 1; box-shadow: 0 0 8px rgba(255,143,94,.9); } @media (prefers-reduced-motion: reduce) { .stamp__cell.is-today, .stamp__cell.is-got { animation: none; } } /* ========================================================= おうちの人からの てがみ（v8.5） ・地図の いちばん 下の 封筒（.tegamibtn）… 読んだら 消える ・押すと 紙の 色の カード（.tegami） 見た目の 正本は docs/STYLE_GUIDE.md の「おうちの人からの てがみ」 ========================================================= */ /* 封筒（CSS だけで 描く） */ .tegamibtn__env, .tegami__env { position: relative; flex: none; display: block; width: 34px; height: 24px; border-radius: 3px; background: linear-gradient(#fffdf4, #f0e2bd); box-shadow: 0 3px 0 rgba(0,0,0,.18), inset 0 0 0 2px #c99a35; animation: pulse 1.5s ease-in-out infinite; } /* ふた（三角）。うすいと ただの 四角に 見えるので しっかり こく する */ .tegamibtn__env .flap, .tegami__env .flap { position: absolute; left: 2px; top: 2px; width: 30px; height: 15px; background: linear-gradient(#e8d5a4, #c9a961); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 1px 0 rgba(0,0,0,.22)); } .tegamibtn__env .seal, .tegami__env .seal { position: absolute; left: 12px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(var(--dgr-1), var(--dgr-2)); box-shadow: 0 1px 0 rgba(0,0,0,.3); } /* ---- てがみの カード ---- */ .tegami { position: absolute; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 16px 14px; background: rgba(6,10,24,.82); } .tegami__card { position: relative; width: 100%; max-width: 340px; padding: 14px 16px 14px; border-radius: 14px; background: linear-gradient(var(--paper-1), var(--paper-2)); box-shadow: 0 8px 0 var(--paper-sh), 0 18px 30px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.7); color: var(--paper-ink); animation: popin .22s ease-out; display: flex; flex-direction: column; gap: 10px; } .tegami__head { display: flex; align-items: center; gap: 9px; } .tegami__env { animation: none; } .tegami__ttl { font-family: var(--f-head); font-size: 17px; color: var(--paper-lbl); } .tegami__text { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 700; word-break: break-word; } .tegami__mis { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 10px; background: rgba(255,212,71,.28); box-shadow: inset 0 0 0 2px var(--paper-sh); } .tegami__mislbl { flex: none; padding: 1px 7px; border-radius: 6px; background: var(--paper-sh); color: #fffdf4; font-family: var(--f-head); font-size: 11px; } .tegami__mistx { flex: 1; min-width: 0; font-size: 13px; } .tegami__coin { flex: none; display: flex; align-items: center; gap: 3px; font-family: var(--f-head); font-size: 13px; color: #8a6420; } .tegami__ok { min-height: 50px; } /* ミッションの 中の てがみの ぶん（金わく） */ .mission--letter { border-top: 0; padding: 6px 8px; border-radius: 10px; background: rgba(255,212,71,.12); box-shadow: inset 0 0 0 2px rgba(255,212,71,.5); } .mission--letter .mission__text { color: var(--gold-lt); } /* ---- おうちの人ページの「子どもへの手紙」（v8.5・大人向けの 明るい 画面） ---- */ .pp-ta--letter { min-height: 68px; } .pp-seg--rec { position: relative; } .pp-seg__rec { position: absolute; top: -8px; right: -6px; padding: 0 5px; border-radius: 6px; background: #c98c12; color: #fff; font-size: 9px; font-style: normal; line-height: 15px; } .pp-line--now .pp-letter__now { font-size: 15px; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .tegamibtn__env { animation: none; } } /* ---- オーロラの そうび（げきレア・v9.0）を 5点 そろえると 主人公が 光る ---- カプセルマシンの げきレアが「しょぼい」と 言われた ので、 数字だけで なく **見て すぐ わかる ごほうび**を つけた（2026-09-07）。 絵じたいは 変えない（class を つけるだけ）ので、どの 画面でも 同じに 光る。 ※ わざの「スターバースト」（.fx--starburst）とは べつもの。名前を かぶらせない ため class は is-gearaura（gear ＝ そうび）。 */ .hero.is-gearaura .hero__img, img.sprite.is-gearaura { animation: gearAura 2.4s ease-in-out infinite; } @keyframes gearAura { 0%, 100% { filter: drop-shadow(0 4px 4px rgba(10,10,40,.45)) drop-shadow(0 0 5px rgba(180,140,255,.85)) drop-shadow(0 0 9px rgba(255,212,71,.35)); } 50% { filter: drop-shadow(0 4px 4px rgba(10,10,40,.45)) drop-shadow(0 0 10px rgba(205,175,255,1)) drop-shadow(0 0 17px rgba(255,212,71,.65)); } } .hero.is-gearaura::before { content: ''; position: absolute; z-index: -1; left: 50%; bottom: 2px; width: 62px; height: 20px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(190,150,255,.8), rgba(140,220,255,.35) 55%, rgba(190,150,255,0) 72%); animation: gearAuraRing 2.4s ease-in-out infinite; pointer-events: none; } @keyframes gearAuraRing { 0%, 100% { opacity: .55; transform: translateX(-50%) scale(.9); } 50% { opacity: 1; transform: translateX(-50%) scale(1.12); } } @media (prefers-reduced-motion: reduce) { .hero.is-gearaura .hero__img, img.sprite.is-gearaura, .hero.is-gearaura::before { animation: none; } } /* ---- カプセルマシン（v9.0）---- 見た目は アイテムの モーダル（.bag / .bagcard）を 借りて いる。 ここは その 中身だけ。**.newscard は 借りない**（お知らせの 検査と 取りちがえる）。 */ .capsule__card { max-width: 340px; } .capsule__body { margin-top: 10px; text-align: center; } /* しゅるいの チップ（なかま／そうび／すがた） */ .capchips { display: flex; gap: 6px; justify-content: center; } .capchip { flex: 1; min-height: 38px; padding: 0 6px; border: 0; border-radius: 12px; cursor: pointer; font-family: var(--f-head); font-size: 15px; color: #cfe0ff; background: linear-gradient(#2b3a63, #1d2846); box-shadow: 0 4px 0 #0d142b, inset 0 2px 0 rgba(255,255,255,.12); } .capchip.is-on { color: #3a2606; background: linear-gradient(#ffe89a, #ffc93c); box-shadow: 0 4px 0 #a06a10, inset 0 2px 0 rgba(255,255,255,.6); } /* マシン（CSS の 四角だけ。画像ファイルは 使わない） */ /* position: relative … カプセルと 光の すじの 置きどころ（ないと カード全体に ついて 場所が ずれる） z-index: 0 … ここで 1つの 層を 作る。ないと 光の すじ（z-index:-1）が カードの 背景の うしろに 回って **見えなく なる** */ .capstage { position: relative; z-index: 0; height: 150px; display: flex; align-items: flex-end; justify-content: center; margin: 8px 0 6px; overflow: visible; } .capmc { position: relative; width: 96px; height: 124px; } .capmc__dome { position: absolute; left: 4px; top: 0; width: 88px; height: 62px; border-radius: 44px 44px 8px 8px; background: linear-gradient(160deg, rgba(230,246,255,.95), rgba(150,200,235,.75)); box-shadow: inset 0 4px 0 rgba(255,255,255,.7), inset 0 -6px 10px rgba(30,60,100,.35), 0 3px 0 #24406a; } .capmc__ball { position: absolute; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 3px 0 rgba(255,255,255,.55); } .capmc__ball--1 { left: 16px; top: 26px; background: #ff8f5e; } .capmc__ball--2 { left: 38px; top: 16px; background: #63d94f; } .capmc__ball--3 { left: 58px; top: 30px; background: #b48cff; } .capmc__body { position: absolute; left: 0; top: 58px; width: 96px; height: 52px; border-radius: 10px; background: linear-gradient(#e35b4c, #a8342a); box-shadow: 0 6px 0 #6d1d17, inset 0 3px 0 rgba(255,255,255,.28); } .capmc__knob { position: absolute; left: 62px; top: 74px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#ffe89a, #f2a01c); box-shadow: 0 3px 0 #8a5a08, inset 0 2px 0 rgba(255,255,255,.6); } .capmc__slot { position: absolute; left: 12px; top: 78px; width: 34px; height: 16px; border-radius: 5px; background: #3a1410; box-shadow: inset 0 3px 6px rgba(0,0,0,.6); } /* まわして いる あいだ：マシンが ゆれて 玉が はねる */ .capmc.is-roll { animation: capShake .18s linear infinite; } .capmc.is-roll .capmc__ball { animation: capBall .42s ease-in-out infinite; } .capmc.is-roll .capmc__ball--2 { animation-delay: .1s; } .capmc.is-roll .capmc__ball--3 { animation-delay: .2s; } @keyframes capShake { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } } @keyframes capBall { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* あつめぐあい */ .capbar { position: relative; height: 20px; border-radius: 999px; background: rgba(10,16,36,.85); box-shadow: inset 0 2px 6px rgba(0,0,0,.6); overflow: hidden; } .capbar__fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#7ee06a, #3f9a5c); } .capbar__t { position: relative; display: block; line-height: 20px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); } /* 天井（引く 前から 見せる）と わりあい */ .capline { margin: 8px 0 4px; font-family: var(--f-head); font-size: 15px; color: #ffd447; } .caprate { display: flex; gap: 5px; justify-content: center; margin: 0 0 10px; flex-wrap: wrap; } .caprate__i { padding: 2px 8px; border-radius: 999px; font-size: 11px; background: rgba(10,16,36,.8); color: #9fb2dd; } .caprate__i--r { color: #ffd447; } .caprate__i--sr { color: #d9c2ff; box-shadow: inset 0 0 0 1px rgba(180,140,255,.5); } /* まわす ボタン（金の 3D） */ .capgo { width: 100%; height: 62px; flex-direction: column; gap: 0; color: #3a2606; background: linear-gradient(#ffe89a, #ffc93c 55%, #f2a01c); box-shadow: 0 7px 0 #a06a10, 0 12px 20px rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.6); } .capgo:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 3px 0 #a06a10, inset 0 3px 0 rgba(255,255,255,.6); } .capgo:disabled { filter: grayscale(.6) brightness(.8); } .capgo__t { font-family: var(--f-head); font-size: 24px; line-height: 1.1; } .capgo__c { font-size: 12px; font-weight: 700; opacity: .85; } .capcoins { margin: 6px 0 0; font-size: 12px; color: var(--tx-sub); } .capsule__close { width: 100%; margin-top: 10px; } /* メニューの「カプセル」タブ（2026-09-13）：モーダルと 同じ カードを タブの 中に。とじる ボタンは なし */ .captab { padding: 6px 0 2px; } .capsule--tab .capsule__card { margin: 0 auto; } .tab { position: relative; } .tab--capsule { display: inline-flex; align-items: center; gap: 4px; } /* タブの 小さな カプセル（上 白・下 赤）。えらんで いる ときも 同じ */ .tab__cap { flex: none; width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(#fff4dc 50%, #e0463c 50%); box-shadow: 0 0 0 2px rgba(20,24,48,.55), inset 0 -2px 0 rgba(0,0,0,.2); } /* タブが 6つに なったので メニューの タブは 1行に つめる（小1の ひらがなでも 入る はば：13px・よこの すきま 4px） */ #screen-dex .tabs { flex-wrap: nowrap; gap: 4px; } #screen-dex .tab { flex: 1 1 auto; min-width: 0; padding: 0 4px; font-size: 13px; white-space: nowrap; } #screen-dex .tab--capsule { justify-content: center; gap: 3px; } /* むりょうけんの 数（赤い 丸） */ .tab__badge { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e0463c; color: #fff; font-family: var(--f-head); font-size: 12px; line-height: 18px; text-align: center; box-shadow: 0 2px 0 #7a1a14; } /* 出た もの */ .capsule__result { position: absolute; inset: 0; border-radius: 18px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px; background: linear-gradient(#16203f, #0b1128); animation: popin .22s ease-out; } .capres__rare { padding: 3px 14px; border-radius: 999px; font-family: var(--f-head); font-size: 14px; color: #0e1424; background: #9fb2dd; } .r--r .capres__rare { background: linear-gradient(#ffe89a, #ffc93c); box-shadow: 0 0 16px rgba(255,212,71,.7); } .r--sr .capres__rare { background: linear-gradient(#d9c2ff, #9a6ae8); color: #fff; box-shadow: 0 0 20px rgba(180,140,255,.9); } .capres__art { display: flex; align-items: center; justify-content: center; min-height: 104px; } .capart__img { image-rendering: pixelated; width: 96px; height: 96px; } .r--r .capres__art { filter: drop-shadow(0 0 14px rgba(255,212,71,.8)); } .r--sr .capres__art { filter: drop-shadow(0 0 16px rgba(180,140,255,1)) drop-shadow(0 0 30px rgba(120,80,220,.7)); } .capres__name { margin: 0; font-family: var(--f-head); font-size: 22px; color: #fff; text-align: center; } .capres__msg { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #ffd447; text-align: center; } .capres__ok { min-width: 160px; } @media (prefers-reduced-motion: reduce) { .capmc.is-roll, .capmc.is-roll .capmc__ball { animation: none; } } /* なかまタブの「カプセルマシン」ボタン（金の 3D） */ .capbtn { width: 100%; min-height: 62px; margin: 10px 0 4px; flex-direction: column; gap: 1px; color: #3a2606; background: linear-gradient(#ffe89a, #ffc93c 55%, #f2a01c); box-shadow: 0 7px 0 #a06a10, 0 12px 20px rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.6); } .capbtn:active { transform: translateY(4px); box-shadow: 0 3px 0 #a06a10, inset 0 3px 0 rgba(255,255,255,.6); } .capbtn__t { font-family: var(--f-head); font-size: 22px; line-height: 1.1; } .capbtn__s { font-size: 11px; font-weight: 700; opacity: .85; } /* カプセルが ころころ 落ちて くる（1.0〜1.8秒。タップで とばせる） */ .capdrop { position: absolute; left: 50%; top: 8px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: linear-gradient(#ffe89a 0 48%, #ff8f5e 48% 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.6), inset 0 -4px 6px rgba(120,50,20,.35), 0 4px 10px rgba(0,0,0,.45); animation: capDrop .8s cubic-bezier(.35,.05,.3,1) forwards; } .capdrop.r--r { background: linear-gradient(#fff3c4 0 48%, #ffc93c 48% 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.7), 0 0 16px rgba(255,212,71,.8), 0 4px 10px rgba(0,0,0,.45); } .capdrop.r--sr { background: linear-gradient(#e9dcff 0 48%, #9a6ae8 48% 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.7), 0 0 20px rgba(180,140,255,1), 0 4px 10px rgba(0,0,0,.45); } @keyframes capDrop { 0% { transform: translateY(0) scale(.7); opacity: 0; } 18% { transform: translateY(34px) scale(1); opacity: 1; } 46% { transform: translateY(92px) scale(1); } 60% { transform: translateY(74px) scale(1.04); } 74% { transform: translateY(92px) scale(1); } 86% { transform: translateY(86px) scale(1.12); } 100% { transform: translateY(88px) scale(1.3); opacity: .9; } } @media (prefers-reduced-motion: reduce) { .capdrop { animation-duration: .01s; } } /* ---- 期待度で 変わる 演出（v9.10）---- レアなほど ゆれが 強く・光が つき・時間が 長い。色は ウソを つかない （金＝レア いじょう／むらさき＝げきレア）。 */ .capmc.is-roll--r { animation-duration: .14s; } .capmc.is-roll--sr { animation-duration: .10s; } /* 「ためる」だんかい：マシンが 光る */ .capmc.is-hot .capmc__dome { box-shadow: inset 0 4px 0 rgba(255,255,255,.8), 0 0 22px 6px var(--cap-glow, rgba(255,212,71,.9)); } .capmc.is-roll--r { --cap-glow: rgba(255,212,71,.9); } .capmc.is-roll--sr { --cap-glow: rgba(180,140,255,1); } /* 光の すじ（マシンの うしろ） */ .capray { position: absolute; left: 50%; bottom: 6px; width: 190px; height: 190px; margin-left: -95px; pointer-events: none; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, transparent 0 11deg, var(--ray) 11deg 15deg); -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,.15) 30%, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, rgba(0,0,0,.15) 30%, #000 62%, transparent 100%); animation: capRay 1.6s linear infinite; } .capray--r { --ray: rgba(255,212,71,.55); } .capray--sr { --ray: rgba(190,150,255,.75); } @keyframes capRay { to { transform: rotate(360deg); } } /* げきレアは 画面ぜんたいが すこし 暗く なって マシンだけ 光る */ .capsule.is-rolling--sr .bagcard { box-shadow: 0 8px 0 var(--hd-edge), 0 18px 30px rgba(0,0,0,.5), inset 0 0 0 3px #b48cff, inset 0 3px 0 rgba(255,255,255,.12), 0 0 40px rgba(180,140,255,.55); } .capsule.is-rolling--sr .capsule__body > *:not(.capstage) { opacity: .35; transition: opacity .3s; } .capsule.is-rolling--r .capsule__body > *:not(.capstage) { opacity: .6; transition: opacity .3s; } @media (prefers-reduced-motion: reduce) { .capray { animation: none; } } /* ========================================================= ふくしゅう（v11.1）：まえに まちがえた 問題が また 出る リベンジ（赤）と 見分ける ため 水色。ばつでは ない ので やわらかく ========================================================= */ .enemy--review .enemy__img { filter: drop-shadow(0 0 10px rgba(120,210,255,.95)) drop-shadow(0 4px 4px rgba(10,10,40,.45)); } .enemy--review .enemy__name { background: linear-gradient(#2a72c0, #1b4b86); color: #fff; } /* ふくしゅうの リボンは みどり（青い モンスターと 同じ 色みに すると 読めない）。 z-index は 4（モンスターの 絵より 上）・字は 5文字（6文字だと 絵から はみ出す） */ .enemy__ribbon--review { background: linear-gradient(#8ce06a, #2f9a2a); color: #fff; box-shadow: 0 2px 0 #1d6a18; text-shadow: 0 1px 0 rgba(0,0,0,.35); z-index: 4; animation: pulse 1.4s ease-in-out infinite; } /* ========================================================= はじめての 子の 案内（v11.1） 地図で「ここを おしてね」と 指さす ふきだし。1回めの たたかいの まえだけ ========================================================= */ .mapguide { position: absolute; z-index: 8; transform: translateX(-50%); pointer-events: none; } .mapguide__in { display: flex; flex-direction: column; align-items: center; animation: guideBob 1.1s ease-in-out infinite; } .mapguide__box { padding: 5px 12px; border-radius: 10px; background: linear-gradient(#fff6d8, #ffe6a8); color: #4a2a06; font-family: var(--f-head); font-size: 13px; white-space: nowrap; box-shadow: 0 3px 0 #b8862a, 0 6px 12px rgba(0,0,0,.35); } /* しっぽは 上むき（ノードを さす） */ .mapguide__tail { flex: none; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 9px solid #fff6d8; } @keyframes guideBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @media (prefers-reduced-motion: reduce) { .mapguide__in { animation: none; } } /* バトルの 中の 案内（1回めの たたかいの 1問めだけ・こたえ欄の 上） */ .qguide { margin: 4px 6px 0; padding: 5px 10px; border-radius: 9px; background: linear-gradient(#fff6d8, #ffe6a8); color: #4a2a06; font-family: var(--f-head); font-size: 12px; text-align: center; box-shadow: 0 3px 0 #b8862a; } /* できる ことが ふえた！（v11.1・はじめての たたかいの あと 1回だけ） */ .unlockpop__list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; } .unlockpop__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px rgba(255,212,71,.28); } .unlockpop__ico { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; } .unlockpop__star { width: 26px; height: 26px; } .unlockpop__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .unlockpop__t { font-family: var(--f-head); font-size: 14px; color: #ffd447; } .unlockpop__s { font-size: 11px; color: var(--tx-sub); } /* ========================================================= しゅぎょうば（v13.0）：相棒が 指導して くれる 予習・復習 紺の 画面・上に 帯（ステージ名＋3だんの 点）・左に 相棒・右に 白い ふきだし。 問題カード・テンキー・えらぶ・こたえの わくは バトルの 部品（.card .keys .display .choice）を 借りる。 ========================================================= */ .dojo { display: flex; flex-direction: column; height: 100%; background: linear-gradient(var(--bg-1), var(--bg-0)); color: #fff; } .dojo__top { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(var(--hd-1), var(--hd-2)); box-shadow: 0 3px 0 var(--hd-edge); } .dojo__back { flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: linear-gradient(#4a5680, #333d61); color: #fff; font-size: 30px; line-height: 1; padding: 0 0 4px; box-shadow: 0 4px 0 #202844, inset 0 2px 0 rgba(255,255,255,.2); cursor: pointer; } .dojo__back:active { transform: translateY(3px); box-shadow: 0 1px 0 #202844, inset 0 2px 0 rgba(255,255,255,.2); } .dojo__title { flex: 1; min-width: 0; } .dojo__title b { display: block; font-family: var(--f-head); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dojo__dots { flex: none; display: flex; gap: 8px; } .dojo__dot { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; color: #8fa0c8; } .dojo__dot i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #2b3a66; box-shadow: inset 0 -2px 0 rgba(0,0,0,.35); } .dojo__dot.is-done i { background: linear-gradient(var(--grn-1), var(--grn-2)); } .dojo__dot.is-on { color: #fff; } .dojo__dot.is-on i { background: linear-gradient(var(--gold-lt), var(--gold-2)); box-shadow: 0 0 8px rgba(255,212,71,.8); } /* 相棒と ふきだし */ .dojo__sensei { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 10px 4px; } .dojo__sensei--list { padding-top: 14px; } .dojo__img { flex: none; width: 72px; height: 72px; display: flex; align-items: flex-end; justify-content: center; } .dojo__sensei--list .dojo__img { width: 60px; height: 60px; } .dojo__bubble { position: relative; flex: 1; min-width: 0; min-height: 46px; padding: 8px 12px; border-radius: 14px; background: #fff; color: #1c2647; font-size: 14px; line-height: 1.4; box-shadow: 0 3px 0 rgba(0,0,0,.28); } .dojo__tail { position: absolute; left: -8px; bottom: 16px; border: 8px solid transparent; border-right-color: #fff; border-left: 0; } .dojo__say { font-weight: 700; } .dojo__bubble.is-pop { animation: dojoPop .26s ease-out; } @keyframes dojoPop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } } /* まん中：スクロールするのは ここだけ */ .dojo__main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 10px 14px; } .dojo__pane { display: flex; flex-direction: column; gap: 8px; } .dojo__label { margin: 0; font-family: var(--f-head); font-size: 12px; color: #8fa0c8; } .dojo__card { flex: none; max-height: none; min-height: 0; overflow: visible; } .dojo__card .card__q { text-align: center; } .dojo__card--ex .dojo__exbody { font-size: 17px; line-height: 1.55; color: var(--paper-ink); } .dojo__ex p { margin: 4px 0; } .dojo__ex b { color: var(--org-2); font-family: var(--f-head); } .dojo__exbody .num { white-space: nowrap; } /* はじめの 案内 */ .dojo__hello { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); } .dojo__hello b { font-family: var(--f-head); font-size: 18px; color: var(--gold); } .dojo__hello span { font-size: 13px; color: #dbe4ff; } .dojo__plan { display: flex; gap: 6px; margin-top: 4px; } .dojo__plan span { flex: 1; padding: 6px 4px; border-radius: 8px; background: #1b2a52; text-align: center; font-size: 12px; color: #c9d2ee; } /* まず なにを する？ */ .dojo__steps { display: flex; flex-direction: column; gap: 8px; } .dojo__step { min-height: 48px; padding: 8px 14px; border: 0; border-radius: 12px; background: linear-gradient(#fff8e6, #f3e6c2); color: #1c2647; font-family: var(--f-head); font-size: 15px; line-height: 1.3; text-align: left; box-shadow: 0 5px 0 var(--paper-sh); cursor: pointer; } .dojo__step:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--paper-sh); } .dojo__step:disabled { cursor: default; opacity: .8; } .dojo__step.is-ok { background: linear-gradient(#c8f7c0, #8fe08a); box-shadow: 0 5px 0 var(--grn-sh); opacity: 1; } .dojo__step.is-ng { background: linear-gradient(#ffc7d2, #ff9db0); box-shadow: 0 5px 0 #a8324c; opacity: 1; } /* ヒント・こたえ */ .dojo__hint { background: rgba(255,255,255,.12); } .dojo__hint .hintbox__label { margin-right: 6px; } .dojo__answer { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; border: 2px solid var(--gold); background: rgba(255,212,71,.12); } .dojo__answer.is-ok { border-color: var(--grn-1); background: rgba(99,217,79,.14); } .dojo__anslabel { font-size: 12px; color: var(--gold-lt); } .dojo__answer b { font-family: var(--f-head); font-size: 28px; color: var(--gold); } .dojo__answer.is-ok b { color: #c8f7c0; } .dojo__next { width: 100%; min-height: 56px; } .dojo__input { display: flex; flex-direction: column; gap: 8px; } .dojo__choices { grid-template-columns: 1fr; } /* 一覧 */ .dojo__scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 10px 16px; } .dojosec__t { margin: 14px 0 6px; font-family: var(--f-head); font-size: 15px; color: var(--gold); } .dojosec__n { margin: 0 0 8px; font-size: 12px; color: #8fa0c8; } .dojorow { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 8px; padding: 9px 10px; border: 0; border-radius: 12px; background: rgba(255,255,255,.07); color: #fff; font-family: var(--f-body); text-align: left; box-shadow: 0 3px 0 rgba(0,0,0,.35); cursor: pointer; } .dojorow:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); } .dojorow--pre { border: 2px solid var(--gold); padding: 7px 8px; } .dojorow__sub { flex: none; padding: 4px 8px; border-radius: 8px; color: #1c2647; font-size: 12px; font-weight: 700; } .dojorow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .dojorow__t { font-family: var(--f-head); font-size: 15px; } .dojorow__s { font-size: 11px; color: #c9d2ee; } .dojorow__go { flex: none; font-family: var(--f-head); font-size: 18px; color: var(--gold); } .dojorow--done .dojorow__go { color: var(--grn-1); } /* 合格 */ .dojodone { position: relative; } .dojodone__body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 6px; } .dojodone__stage { font-family: var(--f-head); font-size: 17px; color: #fff; } .dojodone__lines { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 13px; color: #dbe4ff; } .dojodone__xp { font-family: var(--f-head); font-size: 24px; color: var(--gold); } .dojodone__lv { color: #c8f7c0; font-weight: 700; } .dojodone__btns { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .dojodone__btns .btn { min-height: 52px; } /* 地図：よしゅうの リボン・霧の ノードの 入口（しゅぎょうばの ボタンは v13.3 の ドック） */ .node__pre { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); z-index: 3; padding: 1px 7px; border-radius: 999px; background: linear-gradient(#ffe89a, #f2b93c); color: #6a4208; font-family: var(--f-head); font-size: 10px; white-space: nowrap; box-shadow: 0 2px 0 #b8801d; } .node--preview .node__dot { box-shadow: 0 5px 0 #b8801d, 0 0 0 3px rgba(255,212,71,.55), 0 9px 9px rgba(8,16,44,.4), inset 0 3px 0 rgba(255,255,255,.35); } .node--dojo { cursor: pointer; } .node--dojo .node__dot { color: var(--gold); box-shadow: 0 5px 0 #171d34, 0 0 0 3px rgba(255,212,71,.45), 0 9px 9px rgba(8,16,44,.4), inset 0 3px 0 rgba(255,255,255,.14); } .node__pre--fog { top: -9px; } /* 「いま ここ」の ふきだしと かさなる ので、いまの ステージでは 右上に ななめの ふだ */ .node--now .node__pre { left: auto; right: -20px; top: -4px; transform: rotate(14deg); } /* 一覧の 教科チップ（--c-* は 定義が ない ので 色を 書く） */ .dojorow__sub[data-area="sansu"] { background: #ff8f5e; } .dojorow__sub[data-area="kokugo"] { background: #63d94f; } .dojorow__sub[data-area="rikashakai"], .dojorow__sub[data-area="rika"] { background: #4fd3ff; } .dojorow__sub[data-area="shakai"] { background: #c9b0ff; } .dojorow__sub[data-area="eigo"] { background: #ffd447; } .previewblk { margin-bottom: 6px; } /* しゅぎょうばの 自動の 指導（v13.1）：れいの 問題・こたえ・せつめい */ .dojo__exq { margin: 2px 0 8px; font-family: var(--f-head); font-size: 22px; line-height: 1.35; text-align: center; color: var(--paper-ink); } .dojo__exq .num { white-space: nowrap; } .dojo__exnote { font-size: 14px; line-height: 1.45; color: #6a5a3a; } /* ことばを 学年に 合わせる（v13.2）：小5・小6は 文節の スペースが ない ので、ことばの 途中でも 折り返す （keep-all の ままだと 1行が 長く なって 問題カードから はみ出す） */ body.is-nospace { word-break: normal; overflow-wrap: anywhere; } /* ========================================================= 地図の ドック（v13.3・案A） まえは 地図の 下に 帯が つみ上がり、混む 日は 地図が 311/700 まで へった。 下の 段を アイコンの ならびに して、ごちゃまぜは まん中で ひと回り 大きく 飛び出す。 てがみ と にげた敵は 地図の すみに 浮かぶ ふだ（.mapchips）。 アイコンは js/ui/map.js の DOCK_ICONS（ブロックの ぬり方）。 見た目の 正本は docs/STYLE_GUIDE.md の「地図の ドック（v13.3）」 ========================================================= */ .maptabs { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 74px; padding: 6px 8px 8px; box-sizing: border-box; background: var(--bg-2); border-top: 3px solid var(--hd-edge); } .maptab { flex: 1; min-width: 0; height: 58px; min-height: 0; padding: 3px 0 0; position: relative; flex-direction: column; justify-content: flex-start; gap: 1px; } .maptab .dockico { flex: none; } .maptab__t { font-family: var(--f-body); font-weight: 700; font-size: 11px; letter-spacing: .02em; line-height: 1.25; white-space: nowrap; } .maptab--dojo { color: #fff; background: linear-gradient(#3a9ad9, #1f5fa8); box-shadow: 0 4px 0 #12406f, inset 0 2px 0 rgba(255,255,255,.3); } .maptab--dojo:active { box-shadow: 0 1px 0 #12406f, inset 0 2px 0 rgba(255,255,255,.3); } .maptab__badge { position: absolute; top: -8px; right: -5px; padding: 0 6px; height: 18px; border-radius: 9px; background: linear-gradient(#ff7a6a, #e8443a); color: #fff; font-family: var(--f-head); font-size: 10px; line-height: 18px; box-shadow: 0 2px 0 #9a2a20; white-space: nowrap; } /* まん中の ごちゃまぜ：ドックより 26px 上に 飛び出す（地図の いちばん 下に かかる ぶんは .map__pad で あける） */ .maptab--mix { flex: 0 0 88px; height: 84px; margin-top: -26px; border-radius: 16px; padding-top: 5px; gap: 2px; color: #fff; background: linear-gradient(#9d6cff, #5a2fd0); box-shadow: 0 5px 0 #3a1c8a, inset 0 3px 0 rgba(255,255,255,.35), 0 0 0 3px var(--gold), 0 8px 18px rgba(0,0,0,.45); } .maptab--mix:active { transform: translateY(3px); box-shadow: 0 2px 0 #3a1c8a, inset 0 3px 0 rgba(255,255,255,.35), 0 0 0 3px var(--gold); } .maptab--mix .maptab__t { font-family: var(--f-head); font-weight: 400; font-size: 13px; } .maptab__coin { position: absolute; top: -9px; right: -9px; display: flex; align-items: center; gap: 1px; height: 22px; padding: 0 6px 0 3px; border-radius: 11px; background: linear-gradient(#ffe89a, #f2b93c); color: var(--gold-ink); font-family: var(--f-head); font-size: 11px; box-shadow: 0 2px 0 var(--gold-sh); } /* コインの ふだの 中の 小さな コイン（CSS の 丸。たからものの コインの 絵は 14px だと 四角に 見えた） */ .maptab__coinico { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0 0 25%, #ffd447 26% 60%, #d99a1e 61%); box-shadow: 0 0 0 1px #9a6a10; } .maptab--grade { flex: 0 0 62px; justify-content: center; padding-top: 0; } .maptab--grade b { font-size: 17px; } .maptab__arrow { margin-top: 2px; } /* 地図の すみの ふだ（出る 日だけ）。ドックの 上に 浮かぶ */ .mapchips { position: absolute; left: 8px; right: 8px; top: -66px; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; } .mapchip { pointer-events: auto; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 7px; border: 0; border-radius: 19px; cursor: pointer; font-family: var(--f-head); font-size: 13px; white-space: nowrap; box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 6px 12px rgba(0,0,0,.35); } .mapchip:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); } .mapchip.tegamibtn { background: linear-gradient(#fff6d6, #ffe3a0); color: #4a2a06; } .mapchip .tegamibtn__env { width: 30px; height: 21px; } .mapchip .tegamibtn__env .flap { width: 26px; height: 13px; } .mapchip .tegamibtn__env .seal { left: 10px; top: 7px; } .tegamibtn__t { font-family: var(--f-head); font-size: 13px; } .mapchip.revenge { background: linear-gradient(var(--dgr-1), var(--dgr-2)); color: #fff; } .revenge__mon { margin: -6px -2px -6px 0; } .revenge__text b { font-size: 16px; margin: 0 1px; } .revenge__go { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #fff; margin-left: 2px; } /* 地図の いちばん 下の あき：ごちゃまぜの ボタン（26px）と ふだ（66px）に かくれる ぶん。 ふだは ごちゃまぜの コインの ふだ（ドックの 上 35px）より 上に 置く（かさならない） */ .map__pad { height: 30px; } .map__pad.has-chips { height: 72px; } /* 学年えらびの 中の「プレイヤーを かえる」 */ .gradesheet__player { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 24px); margin: 2px 12px 8px; min-height: 36px; border: 0; border-radius: 10px; cursor: pointer; color: var(--navy-tx); font-family: var(--f-body); font-weight: 700; font-size: 13px; background: linear-gradient(var(--navy-1), var(--navy-2)); box-shadow: 0 3px 0 var(--navy-sh), inset 0 2px 0 rgba(255,255,255,.18); } .gradesheet__go { font-style: normal; font-size: 11px; } /* ごちゃまぜの ボタンは ドックより 上に 飛び出す（26px＋コインの ふだ）ので、その ぶん あけて「プレイヤーを かえる」に かぶらない ように */ .has-mix .gradesheet { padding-bottom: 32px; } /* ========================================================= 地図を なめらかに（v13.4・B案「ジオラマ」） 地面・木・岩・花は js/core/tiles.js の paintSmooth / paintDecos が canvas に 描く（2ばい・なめらか）。 家と さいごの塔の 城は 本物の 3D（js/ui/map.js の house3d / castle3d）。 **3D の 図に filter を かけない**（平らに なる）。まだ 開いて いない 城は 暗い 色で 作る。 ドックの アイコンは SVG（ジオラマ仕上げ・js/ui/map.js の DOCK_ICONS）。 見た目の 正本は docs/STYLE_GUIDE.md の「地図を なめらかに（v13.4）」 ========================================================= */ .map__bg--smooth { image-rendering: auto; } .mapbld { position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, -100%); } /* v13.4.3：城の 足もとを 島の まん中（＋28px）に。-30 だと 城が 島の 南の へりに 立って 上に はみ出し、島が ほとんど 見えなかった（ユーザー「建物を 真ん中の バランス いい 位置に」）。実測：島は t.y−57〜+43・城の 3D の 高さ 131 */ .tower__art--3d, .tower--lock .tower__art--3d { width: 116px; height: 116px; margin-bottom: -13px; filter: none; transform: translate(9px, -7px); } /* v13.4.4：ユーザー「もう少し 右上に」。島の かたまりが 右下に ふくらんで いる ので 城を 右上へ 9・7 */ .dockico { display: block; flex: none; } .dockico svg { display: block; } /* ========================================================= レベルの ごほうび・そうびを きたえる（v13.15） ルールは js/core/levelup.js と js/core/forge.js。 見た目の 正本は docs/STYLE_GUIDE.md の「レベルの ごほうびと かじや（v13.15）」 動かすのは transform と opacity だけ（v13.10 の きまり） ========================================================= */ /* レベルの バッジ（Lv10 ブロンズ → 20 シルバー → 30 ゴールド → 40 プラチナ → 50 レインボー） */ .lvb { display: inline-block; padding: 1px 7px; border-radius: 8px; color: #2a1a04; text-shadow: none; box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.55); } .lvb--bronze { background: linear-gradient(#f3c08a, #c98a4b 60%, #9a6232); } .lvb--silver { background: linear-gradient(#ffffff, #cfd8e6 55%, #9aa8bf); } .lvb--gold { background: linear-gradient(#fff3b0, #ffd447 55%, #e0a01c); } .lvb--plat { background: linear-gradient(#f2fdff, #b9f3ff 50%, #7fc9e6); } .lvb--rainbow { background: linear-gradient(90deg, #ff8a8a, #ffd447, #7cf9a4, #6fc8ff, #c9a2ff); } .hud__lv.lvb { font-size: 20px; color: #2a1a04; margin-bottom: 2px; } .hud--slim .hud__lv.lvb { font-size: 17px; } .dexcard__lvn { font-family: var(--f-head); color: var(--gold); } .dexcard__lvn.lvb { font-size: 13px; color: #2a1a04; } /* カプセルの むりょう券（金の 券＋まん中に カプセル） */ .tkt { position: relative; display: inline-block; flex: none; border-radius: 4px; background: radial-gradient(circle at 0 50%, transparent 22%, #ffd447 23%) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 22%, #ffd447 23%) right / 51% 100% no-repeat; box-shadow: 0 2px 0 rgba(120,70,8,.7); vertical-align: middle; } .tkt::before { content: ''; position: absolute; inset: 18% 22%; border: 1px dashed rgba(106,66,8,.55); border-radius: 2px; } .tkt__cap { position: absolute; left: 50%; top: 50%; width: 42%; height: 62%; border-radius: 999px; transform: translate(-50%, -50%) rotate(-30deg); background: linear-gradient(#ff8f5e 50%, #fff 50%); box-shadow: 0 0 0 1px rgba(106,66,8,.6); } /* けっか画面：レベルの 帯の 下の ごほうび 1行 */ .rs__lvgift { display: flex; align-items: center; gap: 8px; margin-top: 7px; white-space: nowrap; } .rs__lvgiftk { padding: 2px 7px; border-radius: 6px; background: var(--gold); color: #3a2606; font-family: var(--f-head); font-size: 12px; } .rs__lvgiftv { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-head); font-size: 14px; color: var(--gold); } .rs__lvgiftv b { font-weight: normal; } .rs__lvgiftv--badge { font-size: 12px; color: #2a1a04; } .rs--tight .rs__lvgift { margin-top: 4px; } /* メニュー「じぶん」：レベルの みち */ .lvroad { margin: 0 0 10px; padding: 9px 10px 8px; border-radius: 12px; background: linear-gradient(var(--hd-1), var(--hd-2)); box-shadow: 0 3px 0 var(--hd-edge), inset 0 0 0 2px var(--gold); } .lvroad__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .lvroad__one { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 86px; padding: 6px 2px 5px; border-radius: 10px; background: rgba(0,0,0,.28); text-align: center; } .lvroad__one.is-big { background: rgba(255,212,71,.14); } .lvroad__one.is-next { box-shadow: inset 0 0 0 2px var(--gold); } .lvroad__lv { font-family: var(--f-head); font-size: 13px; color: #fff; } .lvroad__what { font-size: 11px; color: var(--gold); line-height: 1.2; } .lvroad__sub { font-size: 9px; color: var(--tx-sub); line-height: 1.1; } .lvroad__badge { font-family: var(--f-head); font-size: 11px; padding: 4px 6px; margin: 2px 0; } .lvroad__note { margin: 7px 2px 0; font-size: 11px; color: var(--tx-sub); } /* メニュー「じぶん」：かじや（そうびを きたえる） */ .forge { margin: 0 0 10px; padding: 9px 10px 8px; border-radius: 12px; background: linear-gradient(var(--hd-1), var(--hd-2)); box-shadow: 0 3px 0 var(--hd-edge), inset 0 0 0 2px var(--gold); } .forge__lead { margin: 0 2px 7px; font-size: 11px; color: var(--tx-sub); line-height: 1.4; } .forge__rows { display: flex; flex-direction: column; gap: 5px; } .forge__row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 10px; background: rgba(0,0,0,.28); } .forge__row.is-off { opacity: .6; } .forge__row.is-max { background: linear-gradient(90deg, rgba(255,212,71,.22), rgba(0,0,0,.28)); } .forge__icon { position: relative; width: 44px; height: 44px; border-radius: 9px; background: rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; } .forge__icon .sprite { width: 40px; height: 40px; } .forge__icon.is-max { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(255,212,71,.75); } .forge__empty { width: 22px; height: 22px; border-radius: 6px; border: 2px dashed rgba(255,255,255,.25); } .forge__plus { position: absolute; right: -5px; bottom: -5px; padding: 0 5px; border-radius: 7px; font-family: var(--f-head); font-size: 12px; line-height: 17px; color: #3a2606; background: linear-gradient(#fff0b0, var(--gold)); box-shadow: 0 2px 0 var(--gold-sh); } .forge__icon.is-max .forge__plus { background: linear-gradient(90deg, #ff8a8a, #ffd447, #7cf9a4, #6fc8ff); } .forge__mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .forge__name { font-size: 11px; color: var(--tx-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .forge__now { font-family: var(--f-head); font-size: 14px; color: #fff; } .forge__next { font-size: 11px; color: #7cf9c4; } .forge__next.is-max { color: var(--gold); } .forge__btn { flex-direction: column; gap: 0; min-width: 84px; padding: 4px 8px; } .forge__bt { font-family: var(--f-head); font-size: 14px; line-height: 1.15; } .forge__bc { font-size: 10px; opacity: .9; } .forge__done { min-width: 84px; text-align: center; font-family: var(--f-head); font-size: 22px; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.4); } .forge__coins { display: flex; align-items: center; gap: 5px; margin: 7px 2px 0; font-size: 12px; color: var(--gold); } .forge__row.is-forged .forge__icon { animation: forgeHit .55s ease-out both; } .forge__row.is-forged .forge__plus { animation: forgePlus .6s ease-out .1s both; } @keyframes forgeHit { 0% { transform: scale(1); } 25% { transform: scale(1.25) rotate(-6deg); } 55% { transform: scale(.94) rotate(3deg); } 100% { transform: scale(1); } } @keyframes forgePlus { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .forge__row.is-forged .forge__icon, .forge__row.is-forged .forge__plus { animation: none; } } /* カプセル：むりょう券で まわす ときの ボタン（みどり＝ただ） */ .capgo--ticket { color: #0f3a1e; background: linear-gradient(#d4ffe0, #7cf0a0 55%, #34b866); box-shadow: 0 7px 0 #1f7a41, 0 12px 20px rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.6); } .capgo--ticket:active:not(:disabled) { box-shadow: 0 3px 0 #1f7a41, inset 0 3px 0 rgba(255,255,255,.6); } .newsrow__gear { width: 46px; height: 46px; image-rendering: pixelated; } .forge__btn.is-short { filter: grayscale(.55) brightness(.75); } /* ========================================================= ぴかぴか あつめ・しゅうまつ イベント（v13.16） 見た目の 正本は docs/STYLE_GUIDE.md の「ぴかぴか あつめと しゅうまつ イベント（v13.16）」 ========================================================= */ /* 地図：ステージの すみの たからもの（ボスから もらった もの。金色＝ぴかぴか） */ .node__tr { position: absolute; left: -12px; top: -10px; z-index: 2; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; pointer-events: none; background: rgba(14,22,44,.88); box-shadow: 0 2px 0 rgba(6,10,26,.5), inset 0 0 0 1px rgba(255,255,255,.14); } .node__tr.is-gold { background: radial-gradient(circle, rgba(255,232,154,.5), rgba(14,22,44,.92) 72%); box-shadow: 0 2px 0 rgba(6,10,26,.5), 0 0 0 2px var(--gold), 0 0 10px rgba(255,212,71,.85); } .node__tr.is-gold::after { content: '✦'; position: absolute; right: -6px; top: -8px; font-size: 11px; line-height: 1; color: #fff6c4; text-shadow: 0 0 4px rgba(255,212,71,.95); } /* ゾーン見出しの ✦ と かんむり（開いて いる ステージが ぜんぶ ぴかぴか） */ .biome__pika { display: inline-flex; align-items: center; gap: 3px; font-family: var(--f-head); font-size: 12px; color: #fff3b8; } .biome__pika b { font-weight: normal; } .biome__spark { font-style: normal; color: var(--gold); text-shadow: 0 0 5px rgba(255,212,71,.9); } .biome__pika.is-all b { color: var(--gold); } .biome__crown, .pika__crown { display: inline-block; width: 15px; height: 11px; background: linear-gradient(var(--gold-lt), var(--gold-2)); clip-path: polygon(0 100%, 0 20%, 25% 55%, 50% 0, 75% 55%, 100% 20%, 100% 100%); filter: drop-shadow(0 0 3px rgba(255,212,71,.95)); } /* メニュー「もちもの」：ぴかぴか あつめの カード */ .pika { margin: 14px 0 4px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(160deg, #3a2c10, #1d1a2c 62%); box-shadow: inset 0 0 0 2px rgba(255,212,71,.55), 0 4px 0 rgba(0,0,0,.35); } .pika__head { display: flex; align-items: baseline; justify-content: space-between; } .pika__t { font-family: var(--f-head); font-size: 17px; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.4); } .pika__have { font-family: var(--f-head); font-size: 13px; color: #fff3b8; } .pika__have b { margin-right: 2px; font-size: 24px; font-weight: normal; color: #fff; } .pika__next { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .pika__nexts { flex: none; font-size: 12px; color: #ffe9a8; } .pika__bar { flex: 1; min-width: 40px; height: 8px; border-radius: 4px; background: rgba(0,0,0,.4); overflow: hidden; } .pika__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-2), var(--gold-lt)); } .pika__rows { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; } .pika__row { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 8px; } .pika__area { font-family: var(--f-head); font-size: 12px; color: #fff; white-space: nowrap; } .pika__row.is-all .pika__area { color: var(--gold); } .pika__dots { display: flex; flex-wrap: wrap; gap: 3px; } .pika__dot { width: 9px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .pika__dot.is-got { background: #b9c2dd; } .pika__dot.is-gold { background: linear-gradient(var(--gold-lt), var(--gold-2)); box-shadow: 0 0 5px rgba(255,212,71,.8); } .pika__n { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-head); font-size: 12px; color: #aab8d8; } .pika__n b { font-size: 14px; font-weight: normal; color: var(--gold); } .pika__note { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: #c6d2ee; } /* けっか画面の 1行（ぴかぴか・しゅうまつ） */ .rs__pika { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -2px 0 0; padding: 4px 10px; border-radius: 10px; white-space: nowrap; background: rgba(255,212,71,.12); box-shadow: inset 0 0 0 2px rgba(255,212,71,.7); } .rs__pika--hint { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 2px rgba(255,212,71,.35); } .rs__pikak { font-family: var(--f-head); font-size: 14px; color: var(--gold); } .rs__pikas { font-size: 12px; color: #ffe9a8; } .rs__pikav { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-head); font-size: 14px; color: var(--gold); } .rs__pikav b { font-weight: normal; } .rs__wk { color: #f3e0ff; background: rgba(168,104,255,.16); box-shadow: inset 0 0 0 2px #a868ff; } /* しゅうまつ イベントの むらさき */ .wkchip { background: linear-gradient(#c38bff, #7a3fe0); color: #fff; } .wkchip__ico { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .wkchip__t { display: flex; flex-direction: column; line-height: 1.05; text-align: left; } .wkchip__t i { font-style: normal; font-size: 9px; color: #f3e0ff; letter-spacing: .04em; } .wkchip__t b { font-weight: normal; font-size: 13px; } .wkpanel { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 6px 12px 4px; padding: 7px 12px; border: 0; border-radius: 12px; text-align: left; color: #fff; cursor: pointer; font-family: var(--f-body); background: linear-gradient(135deg, #9a5cf0, #5a2dab); box-shadow: 0 3px 0 #3a1a78, inset 0 2px 0 rgba(255,255,255,.3); } .wkpanel--pre { cursor: default; background: rgba(122,63,224,.22); box-shadow: inset 0 0 0 2px rgba(178,124,255,.6); } .wkpanel__ico { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .wkpanel__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .wkpanel__lbl { font-size: 10px; color: #f0dcff; } .wkpanel__name { font-family: var(--f-head); font-weight: normal; font-size: 15px; color: #fff; } .wkpanel__sub { font-size: 11px; color: #fff3b8; } .wkpop__card { text-align: center; } .wkpop__art { display: flex; align-items: flex-end; justify-content: center; gap: 12px; min-height: 104px; margin: 10px 0 2px; } .wkpop__bob { display: inline-flex; animation: bob 1.8s ease-in-out infinite; } .wkpop__name { margin: 6px 0 2px; font-family: var(--f-head); font-size: 22px; color: #e6c8ff; text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 12px rgba(178,124,255,.8); } .wkpop__line { margin: 0; font-family: var(--f-head); font-size: 15px; color: #fff; } .wkpop__sub { margin: 4px 0 0; font-size: 12px; color: #ffe9a8; } .wkpop__note { margin: 8px 0 12px; font-size: 11px; color: #c6d2ee; } @media (prefers-reduced-motion: reduce) { .wkpop__bob { animation: none; } } .modebanner--wk { border-color: #b27cff; box-shadow: 0 0 18px rgba(178,124,255,.7); } .modebanner b.modebanner__wk { color: #f0dcff; }