/* ═══ 22-concept.css ═══ ページごとのコンセプト（2026-10-04、持ち主「全体のフォントや色、レイアウトを調整し、かっこよさ、やわらかさ、おしゃれなどのコンセプトを各ページに決めて、それぞれに合わせて変える」）
   go() が html に data-pv="画面" を付ける。コンセプトは 4 つの系統：
     やわらか（ホーム・コミュニティ・つくるーる・支援）＝丸い見出し（M PLUS Rounded 1c）、パステルのにじみ、角の丸いカード
     かっこいい（SANDBOX・採掘・タイピング・残光・ゲーセン）＝太く詰めた見出し＋英字の小さな札、左の線、光るアクセント、角の立ったカード
     おしゃれ（おえかき・マイページ・店・CRIEIT・持ち物・ボックス）＝明朝の見出し（端末の明朝。外の字は読まない）、広い字間、細い線、紙や金の色
     ポップ（ひまつぶし）＝丸い見出しに虹のグラデーション
   色は白モード・アングラモードの両方で効くよう、薄いにじみ（透明度つき）とアクセント（--pvA）で決める。本文の字は読みやすさのため変えない。 */
:root{--pvA:var(--irm);--pvA2:var(--ok);--pvT1:transparent;--pvT2:transparent;--pvR:12px;
  --mincho:"Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP","Noto Serif CJK JP","Source Han Serif JP",serif}
/* ── 色（アクセントと背景のにじみ） ── */
html[data-pv="games"]{--pvA:#ff8a5c;--pvA2:#a58bff;--pvT1:rgba(255,160,120,.16);--pvT2:rgba(165,139,255,.14);--pvR:18px}
html[data-pv="home"],html[data-pv="rooms"]{--pvA:#5aa9ff;--pvA2:#ff7eb6;--pvT1:rgba(90,169,255,.14);--pvT2:rgba(255,126,182,.12);--pvR:18px}
html[data-pv="rule"]{--pvA:#2fbf8f;--pvA2:#f5c518;--pvT1:rgba(47,191,143,.14);--pvT2:rgba(245,197,24,.13);--pvR:18px}
html[data-pv="sup"]{--pvA:#ff7a6b;--pvA2:#ffb35c;--pvT1:rgba(255,122,107,.13);--pvT2:rgba(255,179,92,.12);--pvR:18px}
html[data-pv="arc"]{--pvA:#ff5ad1;--pvA2:#5ad1ff;--pvT1:rgba(255,90,209,.11);--pvT2:rgba(90,209,255,.12);--pvR:16px}
html[data-pv="zen"]{--pvA:#38d9f5;--pvA2:#7b8cff;--pvT1:rgba(56,217,245,.12);--pvT2:rgba(123,140,255,.10);--pvR:8px}
html[data-pv="mine"]{--pvA:#f0a43a;--pvA2:#c8732a;--pvT1:rgba(240,164,58,.15);--pvT2:rgba(120,130,150,.14);--pvR:8px}
html[data-pv="type"]{--pvA:#22d3ee;--pvA2:#e5e7eb;--pvT1:rgba(34,211,238,.12);--pvT2:rgba(100,116,139,.10);--pvR:6px}
html[data-pv="zk"]{--pvA:#5ef0a0;--pvA2:#2bb673;--pvT1:rgba(94,240,160,.10);--pvT2:rgba(30,60,50,.12);--pvR:6px}
html[data-pv="gc"]{--pvA:#c86bff;--pvA2:#4cc9ff;--pvT1:rgba(200,107,255,.16);--pvT2:rgba(76,201,255,.13);--pvR:10px}
html[data-pv="draw"]{--pvA:#c8643c;--pvA2:#7a5c3a;--pvT1:rgba(214,170,110,.16);--pvT2:rgba(200,100,60,.08);--pvR:6px}
html[data-pv="me"],html[data-pv="box"]{--pvA:#6b7fa8;--pvA2:#b9a27a;--pvT1:rgba(107,127,168,.12);--pvT2:rgba(185,162,122,.10);--pvR:14px}
html[data-pv="shop"]{--pvA:#c9a24a;--pvA2:#8a6d2a;--pvT1:rgba(201,162,74,.17);--pvT2:rgba(60,50,30,.08);--pvR:10px}
html[data-pv="rinbas"]{--pvA:#9a6b3f;--pvA2:#c9a24a;--pvT1:rgba(196,160,110,.16);--pvT2:rgba(110,70,40,.08);--pvR:8px}
html[data-pv="bag"]{--pvA:#a7744a;--pvA2:#6f8f4e;--pvT1:rgba(167,116,74,.14);--pvT2:rgba(111,143,78,.10);--pvR:12px}
/* 背景：上のほうに 2 色のにじみ（下は今までの地の色） */
html[data-pv] body{background-image:radial-gradient(1100px 460px at 12% -120px,var(--pvT1),transparent 70%),radial-gradient(900px 420px at 92% -80px,var(--pvT2),transparent 70%);background-repeat:no-repeat;background-attachment:fixed}
/* かっこいい系：うすい方眼（SANDBOX・採掘・タイピング）と走査線（残光） */
html[data-pv="zen"] body,html[data-pv="type"] body{background-image:radial-gradient(1100px 460px at 12% -120px,var(--pvT1),transparent 70%),radial-gradient(900px 420px at 92% -80px,var(--pvT2),transparent 70%),linear-gradient(rgba(127,140,170,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(127,140,170,.06) 1px,transparent 1px);background-size:auto,auto,28px 28px,28px 28px;background-repeat:no-repeat,no-repeat,repeat,repeat}
html[data-pv="mine"] body{background-image:radial-gradient(1100px 460px at 12% -120px,var(--pvT1),transparent 70%),radial-gradient(900px 420px at 92% -80px,var(--pvT2),transparent 70%),repeating-linear-gradient(135deg,rgba(127,130,140,.05) 0 2px,transparent 2px 14px);background-repeat:no-repeat,no-repeat,repeat}
html[data-pv="zk"] body{background-image:radial-gradient(1100px 460px at 12% -120px,var(--pvT1),transparent 70%),repeating-linear-gradient(0deg,rgba(94,240,160,.035) 0 1px,transparent 1px 4px);background-repeat:no-repeat,repeat}
/* おしゃれ系：紙の手ざわり（おえかき・CRIEIT） */
html[data-pv="draw"] body,html[data-pv="rinbas"] body{background-image:radial-gradient(1100px 460px at 12% -120px,var(--pvT1),transparent 70%),radial-gradient(900px 420px at 92% -80px,var(--pvT2),transparent 70%),radial-gradient(rgba(140,110,70,.06) 1px,transparent 1.2px);background-size:auto,auto,7px 7px;background-repeat:no-repeat,no-repeat,repeat}

/* ── 見出し（各画面の h2）と説明（lede） ── */
main>section>h2{font-size:24px;line-height:1.35;color:var(--tx);margin:4px 0 6px;font-weight:800;letter-spacing:.02em}
main>section>.lede{max-width:46em}
/* やわらか：丸い字＋2 色の丸 */
:is(html[data-pv="games"],html[data-pv="home"],html[data-pv="rooms"],html[data-pv="rule"],html[data-pv="sup"]) main>section>h2{font-family:var(--disp);letter-spacing:.03em}
:is(html[data-pv="games"],html[data-pv="home"],html[data-pv="rooms"],html[data-pv="rule"],html[data-pv="sup"]) main>section>h2::before{content:"";display:inline-block;width:.62em;height:.62em;border-radius:50%;margin-right:.45em;vertical-align:.04em;background:linear-gradient(135deg,var(--pvA),var(--pvA2));box-shadow:0 0 0 4px color-mix(in srgb,var(--pvA) 18%,transparent)}
/* かっこいい：詰めた太字、左の線、英字の札 */
:is(html[data-pv="zen"],html[data-pv="mine"],html[data-pv="type"],html[data-pv="zk"],html[data-pv="gc"]) main>section>h2{font-family:var(--jp);font-weight:800;letter-spacing:.06em;border-left:4px solid var(--pvA);padding-left:12px;text-shadow:0 0 18px color-mix(in srgb,var(--pvA) 35%,transparent)}
:is(html[data-pv="zen"],html[data-pv="mine"],html[data-pv="type"],html[data-pv="zk"],html[data-pv="gc"]) main>section>h2::after{font-family:var(--num);font-size:11px;font-weight:700;letter-spacing:.28em;color:var(--pvA);margin-left:12px;vertical-align:.25em;text-shadow:none}
html[data-pv="zen"] #v-zen>h2::after{content:"PHYSICS LAB"}
html[data-pv="mine"] #v-mine>h2::after{content:"MINING OPS"}
html[data-pv="type"] #v-type>h2::after{content:"TYPING ARENA"}
html[data-pv="zk"] #v-zk>h2::after{content:"AFTERGLOW"}
html[data-pv="gc"] #v-gc>h2::after{content:"ARCADE"}
/* おしゃれ：明朝、字間を広く、下に細い線 */
:is(html[data-pv="draw"],html[data-pv="me"],html[data-pv="box"],html[data-pv="shop"],html[data-pv="rinbas"],html[data-pv="bag"]) main>section>h2{font-family:var(--mincho);font-weight:700;font-size:27px;letter-spacing:.14em}
:is(html[data-pv="draw"],html[data-pv="me"],html[data-pv="box"],html[data-pv="shop"],html[data-pv="rinbas"],html[data-pv="bag"]) main>section>h2::after{content:"";display:block;width:52px;height:1px;margin-top:10px;background:linear-gradient(90deg,var(--pvA),transparent)}
:is(html[data-pv="draw"],html[data-pv="me"],html[data-pv="box"],html[data-pv="shop"],html[data-pv="rinbas"],html[data-pv="bag"]) main>section>.lede{letter-spacing:.04em;line-height:1.95}
html[data-pv="shop"] #v-shop>h2{background:linear-gradient(90deg,#b8862b,#e9c96a 45%,#b8862b);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ポップ：虹の字 */
html[data-pv="arc"] #v-arc>h2{font-family:var(--disp);letter-spacing:.04em;background:linear-gradient(90deg,#ff5ad1,#ffb35c 30%,#5ad1ff 65%,#7cf29a);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── カード（角の丸さと縁） ── */
html[data-pv] main .card{border-radius:var(--pvR)}
:is(html[data-pv="games"],html[data-pv="home"],html[data-pv="rooms"],html[data-pv="rule"],html[data-pv="sup"],html[data-pv="arc"]) main .card{box-shadow:0 6px 22px rgba(40,50,90,.07),0 0 0 1px color-mix(in srgb,var(--pvA) 8%,transparent)}
:is(html[data-pv="zen"],html[data-pv="mine"],html[data-pv="type"],html[data-pv="zk"],html[data-pv="gc"]) main .card{box-shadow:0 0 0 1px color-mix(in srgb,var(--pvA) 22%,var(--line)),0 8px 24px rgba(0,0,0,.08)}
:is(html[data-pv="draw"],html[data-pv="me"],html[data-pv="box"],html[data-pv="shop"],html[data-pv="rinbas"],html[data-pv="bag"]) main .card{box-shadow:0 1px 0 color-mix(in srgb,var(--pvA) 25%,transparent),0 10px 30px rgba(60,45,25,.06)}

/* ── 画面ごとの小さな仕上げ ── */
/* ホーム：棚の札は持ち上がる */
html[data-pv="games"] .gl{transition:transform .18s ease,box-shadow .18s ease}
html[data-pv="games"] .gl:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(255,138,92,.16)}
html[data-pv="games"] #v-games>h2{font-size:26px}
/* タイピング：数字は等幅で締める */
html[data-pv="type"] #v-type .lede{font-family:var(--jp);letter-spacing:.02em}
/* 採掘：見出しは琥珀の光 */
html[data-pv="mine"] #v-mine>h2{color:color-mix(in srgb,var(--tx) 80%,var(--pvA))}
/* マイページ・店：目次の札をアクセントで */
html[data-pv="me"] .metoc button:hover{border-color:var(--pvA);color:var(--tx)}
/* 狭い画面では見出しを少し小さく */
@media (max-width:560px){main>section>h2{font-size:21px}:is(html[data-pv="draw"],html[data-pv="me"],html[data-pv="box"],html[data-pv="shop"],html[data-pv="rinbas"],html[data-pv="bag"]) main>section>h2{font-size:23px}
  :is(html[data-pv="zen"],html[data-pv="mine"],html[data-pv="type"],html[data-pv="zk"],html[data-pv="gc"]) main>section>h2::after{display:block;margin:2px 0 0}}
@media (prefers-reduced-motion:reduce){html[data-pv="games"] .gl:hover{transform:none}}

/* 白モードでは地の色が明るく、にじみが見えにくい。少し濃くする */
body.light{--pvLift:1}
html[data-pv] body.light{background-image:radial-gradient(1100px 460px at 12% -120px,color-mix(in srgb,var(--pvA) 20%,transparent),transparent 70%),radial-gradient(900px 420px at 92% -80px,color-mix(in srgb,var(--pvA2) 17%,transparent),transparent 70%)}
html:is([data-pv="zen"],[data-pv="type"]) body.light{background-image:radial-gradient(1100px 460px at 12% -120px,color-mix(in srgb,var(--pvA) 18%,transparent),transparent 70%),linear-gradient(rgba(90,110,150,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(90,110,150,.07) 1px,transparent 1px);background-size:auto,28px 28px,28px 28px;background-repeat:no-repeat,repeat,repeat}
html[data-pv="mine"] body.light{background-image:radial-gradient(1100px 460px at 12% -120px,color-mix(in srgb,var(--pvA) 20%,transparent),transparent 70%),repeating-linear-gradient(135deg,rgba(100,105,120,.06) 0 2px,transparent 2px 14px);background-repeat:no-repeat,repeat}
html:is([data-pv="draw"],[data-pv="rinbas"]) body.light{background-image:radial-gradient(1100px 460px at 12% -120px,color-mix(in srgb,var(--pvA) 16%,transparent),transparent 70%),radial-gradient(rgba(140,110,70,.08) 1px,transparent 1.2px);background-size:auto,7px 7px;background-repeat:no-repeat,repeat}