/* Aniluxa — 画面の部品の手触り（2026-10-13 オーナー「サイト全体が華やかに、おしゃれに。一目で『お！』と思わせて、実用的で軽く」・D-376）
 * 動き方の元は Lucian UX/UI Prompt（MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/）の #083・#093・#032・#039。
 * 色はネオンの見た目（theme-neon.css の --sk-*）に合わせ直した。外の部品は読み込まない。動きを減らす設定の人には動かさない */
:root[data-theme="dark"] { --ux-onMint:#06120c; --ux-mint:#4dffb0; --ux-warn:#ffd24f; --ux-trk:rgba(255,255,255,.10); }
:root:not([data-theme="dark"]) { --ux-onMint:#ffffff; --ux-mint:#077a4f; --ux-warn:#9a6a00; --ux-trk:rgba(30,20,60,.10); }

/* ── 作っている間：順番待ちの流れる帯 → 埋まっていく帯（#083） ── */
.genPh .gq { position:relative; width:min(88%, 320px); margin:12px auto 14px; text-align:left; }
.genPh:has(.gq) .genPhTx { display:none; }
.gq-h { display:flex; align-items:center; gap:8px; }
.gq-pill { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.04em;
  color:var(--c, var(--sk-c2ink)); background:color-mix(in srgb, var(--c, var(--sk-c2)) 14%, transparent); transition:color .4s, background-color .4s; }
.gq-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; animation:gqBlink 1.2s ease-in-out infinite; }
@keyframes gqBlink { 50% { opacity:.3; } }
.gq-r { margin-left:auto; font-size:12px; font-weight:700; color:var(--sub); font-variant-numeric:tabular-nums; }
.gq-trk { position:relative; height:6px; margin:10px 0 0; border-radius:3px; background:var(--ux-trk); overflow:hidden; }
.gq-seg { position:absolute; top:0; bottom:0; border-radius:inherit; background:linear-gradient(90deg, var(--sk-c1), var(--sk-c2)); transition:opacity .4s; }
.gq-seg.a { animation:gqA 1.6s cubic-bezier(.65,.05,.35,1) infinite; }
.gq-seg.b { animation:gqB 1.6s cubic-bezier(.25,.6,.4,1) .55s infinite; }
@keyframes gqA { 0% { left:-35%; right:100%; } 60%,100% { left:100%; right:-90%; } }
@keyframes gqB { 0% { left:-200%; right:100%; } 60%,100% { left:107%; right:-8%; } }
.gq-fill { position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, var(--sk-c1), var(--sk-c2)); box-shadow:0 0 12px var(--sk-c2);
  transform-origin:0 50%; transform:scaleX(var(--p, 0)); opacity:0; transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.gq.det .gq-seg { opacity:0; }
.gq.det .gq-fill { opacity:1; }
.gq-log { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:700; line-height:1.45; }
.gq-log li { display:flex; align-items:center; gap:8px; color:var(--sk-c2ink); animation:gqIn .45s cubic-bezier(.2,.8,.2,1); }
.gq-log li.ok { color:var(--sub); font-weight:600; }
@keyframes gqIn { from { opacity:0; transform:translateY(8px); } }
.gq-st { width:13px; height:13px; flex:none; position:relative; }
.gq-st::before { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--sk-c1); border-right-color:transparent; animation:gqSpin .7s linear infinite; }
.gq-log li.ok .gq-st::before { border:0; animation:none; background:var(--ux-mint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
@keyframes gqSpin { to { transform:rotate(360deg); } }

/* ── 画像・動画を選ぶ受け口：点線が流れる・持ってくると膨らむ（#032） ── */
.slot .dropzone { position:relative; border-color:transparent !important; transition:transform .5s cubic-bezier(.3,1.5,.5,1), background-color .3s; }
.slot .dropzone::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, var(--sk-c2) 55%, transparent 0) 0 0 / 14px 1.5px repeat-x,
    linear-gradient(90deg, var(--sk-c2) 55%, transparent 0) 0 100% / 14px 1.5px repeat-x,
    linear-gradient(0deg, var(--sk-c2) 55%, transparent 0) 0 0 / 1.5px 14px repeat-y,
    linear-gradient(0deg, var(--sk-c2) 55%, transparent 0) 100% 0 / 1.5px 14px repeat-y;
  opacity:.55; transition:opacity .3s; }
.slot .dropzone:hover::after, .slot.drop .dropzone::after { opacity:1; animation:uxMarch .9s linear infinite; }
@keyframes uxMarch { to { background-position:14px 0, -14px 100%, 0 -14px, 100% 14px; } }
.slot .dropzone .plus { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; font-size:24px !important; color:#fff !important;
  background:linear-gradient(140deg, var(--sk-c1), var(--sk-part)); box-shadow:0 10px 24px -10px var(--sk-c1); transition:transform .5s cubic-bezier(.3,1.5,.5,1); margin-bottom:6px; }
.slot .dropzone:hover .plus { transform:translateY(-4px); }
.slot.drop .dropzone { transform:scale(1.03); }
.slot.drop .dropzone .plus { transform:translateY(-8px) scale(1.1) rotate(-6deg); }
.slot.drop { outline:none !important; }

/* ── 上のタブ：光る帯が選んだタブへ滑る（#039） ── */
.tabs.uxTabs { position:relative; }
.tabs.uxTabs button[aria-selected] { border-bottom-color:transparent !important; }
.uxTabBar { position:absolute; left:0; bottom:-1px; height:3px; width:var(--w, 0); border-radius:3px; pointer-events:none;
  background:linear-gradient(90deg, var(--sk-c1), var(--sk-c2)); box-shadow:0 0 12px var(--sk-c1), 0 0 4px var(--sk-c2);
  transform:translateX(var(--x, 0)); transition:transform .5s cubic-bezier(.3,1.4,.5,1), width .5s cubic-bezier(.3,1.4,.5,1); }

/* ── できあがり：紙吹雪（#093） ── */
.uxConfetti { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; }

/* ── 押した手応えの粒（#022） ── */
.uxSpark { position:fixed; z-index:9999; width:6px; height:6px; border-radius:50%; pointer-events:none; }

/* ── アイデアの札（D-383） ── */
#ideaChips:not(.hidden) { display:block; margin:8px 0 2px; }
#ideaChips .ideaTabs { display:flex; gap:4px; margin-bottom:6px; overflow-x:auto; scrollbar-width:none; }
#ideaChips button.ideaTab { width:auto; margin:0; padding:3px 10px; border:0 !important; border-radius:999px; font-size:12px; font-weight:700; background:transparent !important; color:var(--sub) !important; clip-path:none !important; white-space:nowrap; }
#ideaChips button.ideaTab[aria-selected="true"] { color:var(--ink) !important; background:var(--field, rgba(127,127,127,.15)) !important; box-shadow:inset 0 -2px 0 var(--sk-c1, var(--gold)); }
#ideaChips .ideaRow { display:flex; flex-wrap:wrap; gap:6px; }
#ideaChips button.ideaChip { width:auto; margin:0; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:700; border:1px solid var(--sk-c2, var(--line)) !important;
  background:transparent !important; color:var(--ink) !important; clip-path:none !important; transition:transform .3s cubic-bezier(.34,1.45,.64,1), background-color .2s; }
#ideaChips button.ideaChip:hover { transform:translateY(-1px); }
#ideaChips button.ideaChip[aria-pressed="true"] { background:var(--sk-btn, var(--goldGrad)) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 0 14px var(--sk-blob1, transparent); }
#ideaNote { margin:4px 0 0; font-size:12px; }

/* ── 作ったもののお気に入り（D-377） ── */
.grid figure { position:relative; }
.grid figure .favStar { position:absolute; top:8px; right:8px; z-index:2; width:34px !important; height:34px; padding:0 !important; margin:0 !important; border:0 !important; border-radius:50% !important;
  display:grid; place-items:center; font-size:19px; line-height:1; cursor:pointer; color:#fff; background:rgba(8,6,18,.55) !important; backdrop-filter:blur(4px); clip-path:none !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18); transition:transform .3s cubic-bezier(.34,1.45,.64,1), color .2s; }
.grid figure .favStar:hover { transform:scale(1.1); }
.grid figure .favStar.on { color:#ffe14f; text-shadow:0 0 10px rgba(255,225,79,.8); }
.favFilter[aria-pressed="true"] { background:var(--goldGrad) !important; color:var(--onGold) !important; border-color:transparent !important; }
.favFilter .num:not(:empty) { margin-left:6px; opacity:.8; font-size:.85em; }

/* ── 残高：数字が桁ごとに転がる（#098） ── */
.odo { display:inline-block; height:1.15em; overflow:hidden; vertical-align:-0.2em; }
.odoS { display:flex; flex-direction:column; transform:translateY(calc(var(--d, 0) * -1.15em)); transition:transform .9s cubic-bezier(.3,1.25,.5,1); transition-delay:calc(var(--i, 0) * 45ms); }
.odoS span { display:block; height:1.15em; line-height:1.15em; text-align:center; }
#coin .cv .odoWrap { font-variant-numeric:tabular-nums; }

/* ── コピー：チェックに変わって、欄が光る（#008） ── */
button.uxCopied { position:relative; background:var(--ux-mint) !important; color:var(--ux-onMint) !important; border-color:transparent !important; animation:uxCopyPop .45s cubic-bezier(.34,1.45,.64,1); }
button.uxCopied::before { content:"✓ "; font-weight:900; }
@keyframes uxCopyPop { 0% { transform:scale(.88); } 100% { transform:none; } }
.uxCopiedField { box-shadow:0 0 0 1.5px var(--ux-mint), 0 0 0 6px color-mix(in srgb, var(--ux-mint) 18%, transparent) !important; transition:box-shadow .3s; }

/* ── プランのカード：触れると浮く・おすすめは枠に光が回る（#015 の手触り。押したときの流れは今まで通り） ── */
.plan { transition:transform .45s cubic-bezier(.34,1.45,.64,1), box-shadow .3s; }
.plan:hover { transform:translateY(-4px); box-shadow:0 18px 36px -20px var(--sk-c1), 0 0 0 1px var(--sk-c2); }
.plan button:active, #packs .pack button:active { transform:scale(.97); }
@property --uxA { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.plan.hero { border-color:transparent !important; }
.plan.hero::before { content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px; pointer-events:none;
  background:conic-gradient(from var(--uxA), var(--sk-c1), var(--sk-c2), #ffe14f, var(--sk-c1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:uxSpinA 4s linear infinite; }
@keyframes uxSpinA { to { --uxA:360deg; } }
#packs .pack { transition:transform .45s cubic-bezier(.34,1.45,.64,1), box-shadow .3s; }
#packs .pack:hover { transform:translateY(-3px); box-shadow:0 14px 28px -18px var(--sk-c1); }

/* ── 作ったものが0件のとき：浮かぶチビルクサと、作る画面へ（#088） ── */
.uxEmpty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:28px 16px 32px; }
.uxEmpty.hidden { display:none; }
.uxEmpty .uxEmptyArt { position:relative; width:150px; height:150px; margin-bottom:10px; }
.uxEmpty .uxEmptyArt img { width:100%; height:100%; object-fit:cover; border-radius:28px; box-shadow:0 0 0 1px var(--line), 0 18px 40px -18px var(--sk-c1), 0 0 30px var(--sk-blob1);
  animation:uxFloat 4s ease-in-out infinite; }
.uxEmpty .uxEmptyArt::after { content:""; position:absolute; left:20%; right:20%; bottom:-14px; height:10px; border-radius:50%; background:var(--sk-c1); opacity:.25; filter:blur(6px); animation:uxShadow 4s ease-in-out infinite; }
@keyframes uxFloat { 50% { transform:translateY(-8px) rotate(-1.5deg); } }
@keyframes uxShadow { 50% { transform:scaleX(.8); opacity:.15; } }
.uxEmpty b { font-size:16px; color:var(--ink); }
.uxEmpty small { font-size:13px; color:var(--sub); }
.uxEmpty button { margin-top:12px; }

@media (prefers-reduced-motion: reduce) {
  .odoS, .plan, #packs .pack { transition:none !important; } .plan.hero::before, button.uxCopied { animation:none !important; } .plan:hover, #packs .pack:hover { transform:none; }
  .uxEmpty .uxEmptyArt img, .uxEmpty .uxEmptyArt::after { animation:none !important; }
  .gq-seg.a, .gq-seg.b, .gq-pill::before, .gq-st::before, .gq-log li, .slot .dropzone:hover::after, .slot.drop .dropzone::after { animation:none !important; }
  .gq-seg.b { opacity:0; } .gq-seg.a { left:0; right:60%; }
  .uxTabBar, .gq-fill, .slot .dropzone, .slot .dropzone .plus { transition:none !important; }
}

/* ── カット割り（D-385） ── 絵は明るい地のまま（暗い画面でも棒人間が見えるように） */
#shotbox .shotLane { display:flex; align-items:center; gap:6px; min-height:60px; padding:8px; margin:6px 0 8px; border:1px dashed var(--line); border-radius:10px; overflow-x:auto; }
#shotbox .shotLane .ph { font-size:12.5px; color:var(--sub); line-height:1.5; }
#shotbox .shotLane .cut { position:relative; flex:none; width:84px; }
#shotbox .shotLane .cut svg { display:block; width:84px; border-radius:6px; }
#shotbox .shotLane .cut b { position:absolute; left:4px; top:3px; font-size:11px; background:var(--sk-c1, var(--gold)); color:#fff; border-radius:999px; padding:0 6px; }
#shotbox .shotLane .cut span { display:block; font-size:11px; text-align:center; color:var(--sub); margin-top:2px; white-space:nowrap; }
#shotbox .shotLane .arr { flex:none; color:var(--sub); }
#shotbox .shotLane button.x { position:absolute; right:2px; top:2px; width:22px; height:22px; min-height:0; margin:0; padding:0; border:0 !important; border-radius:50%; background:rgba(0,0,0,.55) !important; color:#fff !important; font-size:12px; line-height:22px; clip-path:none !important; }
#shotbox .shotGrid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
@media (min-width:560px) { #shotbox .shotGrid { grid-template-columns:repeat(6, minmax(0, 1fr)); } } /* 18種＝3段（9列では名前が切れた） */
#shotbox button.shot { position:relative; width:auto; margin:0; padding:0; border:1px solid var(--line) !important; border-radius:10px; overflow:hidden; background:var(--card) !important; color:var(--ink) !important; text-align:left; clip-path:none !important; }
#shotbox button.shot svg { display:block; width:100%; aspect-ratio:16/10; }
#shotbox button.shot .lb { display:block; padding:4px 7px 6px; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#shotbox button.shot.on { border-color:var(--sk-c2, var(--gold)) !important; box-shadow:0 0 0 2px var(--sk-c2, var(--gold)); }
#shotbox button.shot .n { position:absolute; left:5px; top:5px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--sk-c1, var(--gold)); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; }
#shotbox button.shot .two { position:absolute; right:5px; top:5px; padding:0 6px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:10.5px; font-weight:700; }
#shotbox button.shot:disabled { opacity:.4; }
/* 広い画面では「仕上がり」の欄が横に並ぶので、カット割りだけは1行を丸ごと使う。3つ並んでも幅に収まるように縮める */
#shotbox { grid-column:1 / -1; flex:1 1 100%; width:100%; min-width:0; }
#shotbox .shotLane .cut { flex:1 1 0; width:auto; min-width:0; max-width:120px; }
#shotbox .shotLane .cut svg { width:100%; }
#camera:disabled { opacity:.5; }

/* ★スマホでは「作る」が画面の下に付いてくる★（2026-10-13 オーナー「作るボタンが下に行ってスクロールしなきゃいけない」）
   sticky なので、作る画面の枠の中にいる間だけ下に付き、本来の位置まで来たらそこに収まる（ほかのタブ・結果の上には出ない） */
@media (max-width:560px) {
  #goRow { position:sticky; bottom:0; z-index:40; margin-left:-12px; margin-right:-12px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--card); border-top:1px solid var(--line); box-shadow:0 -10px 24px rgba(0,0,0,.18); }
  /* 付いてくる帯を細く保つ：ボタンと値段を折り返さない（360px で「動画を作／る」「1,000 コイ／ン」になっていた） */
  #goRow #go { white-space:nowrap; padding:12px 22px !important; letter-spacing:.04em; }
  #goRow .price { white-space:nowrap; }
  /* ★ボタンは縮ませない・値段の文が長いときは値段の側を折り返す★（2026-10-15 オーナー「スマホで画像を生成するボタンが画面の右側に隠れてしまいます」）
     「無料（きょうあと18枚）（通常 100 コイン）」のような長い文が折り返せず、ボタンが 44px まで押し縮められていた */
  #goRow #go { flex:none; }
  #goRow .price { white-space:normal; word-break:keep-all; min-width:0; flex:1 1 auto; font-size:13px; line-height:1.3; }
  #goRow .price > strong, #goRow .price > span { display:inline-block; } /* 「無料（…）」と「（通常 …）」の切れ目で折る（言葉の途中で折らない） */
  #goRow .price > span { font-size:11.5px; }
}
@media (max-width:400px) { #goRow { gap:10px; } #goRow #go { padding:12px 14px !important; } }
@media (max-width:340px) { #goRow .price { word-break:normal; font-size:12px; } } /* 320 では「（きょうあと18枚）」がボタンの下に潜った → 折ってよい */

/* ── 出演の動きの決め方（案A・2026-10-14） ── */
.srcFlow { margin:6px 0 10px; padding:7px 10px; border-left:3px solid var(--sk-c2, var(--gold)); background:var(--field, rgba(127,127,127,.08)); font-size:13px; font-weight:700; color:var(--ink); line-height:1.5; }
#refMoveBox { margin:4px 0 12px; }
#refMoveBox .refMoveSeg { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
#refMoveBox .refMoveSeg button { width:auto; margin:0; padding:10px 10px; text-align:left; display:grid; gap:3px; border:1px solid var(--line) !important; border-radius:10px; background:var(--card) !important; color:var(--ink) !important; clip-path:none !important; }
#refMoveBox .refMoveSeg button b { font-size:14px; }
#refMoveBox .refMoveSeg button small { font-size:11.5px; color:var(--sub); font-weight:500; line-height:1.4; }
#refMoveBox .refMoveSeg button[aria-checked="true"] { border-color:var(--sk-c2, var(--gold)) !important; box-shadow:0 0 0 2px var(--sk-c2, var(--gold)); }


/* ════ D-395：見た目を一段おしゃれに（2026-10-14 オーナー「HP 全体をおしゃれに」） ════
   ① PC は2列（幅1100以上・オーナーのドックが閉じているとき）② 見出しにメリハリ ③ 背景の奥で光がゆっくり動く ④ 枠を少し透ける質感に */
html.mk2 main#app { max-width:1320px; }
#tab-make.mk2col { display:grid; grid-template-columns:minmax(0, 1fr) 440px; gap:26px; align-items:start; }
#tab-make.mk2col > :not(#makeForm):not(#mkSide):not(#mkLeft) { grid-column:1 / -1; }
#tab-make.mk2col > #makeForm { grid-column:1; grid-row:span 1; }
#mkSide { position:sticky; top:84px; display:grid; gap:16px; min-width:0; }
#mkSide.hidden { display:none; }
#mkSide #result { margin:0; }
#mkSide #result:not(.hidden) ~ #mkEx, #mkSide #result:not(.hidden) ~ #mkTips { display:none; } /* 作っている間・出来上がりは、そちらを主役に */
#mkSide .mkCard { padding:18px; border-radius:20px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg, color-mix(in srgb, var(--card) 88%, transparent), color-mix(in srgb, var(--bg, #0c0a18) 80%, transparent));
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px rgba(0,0,0,.35); backdrop-filter:blur(14px) saturate(140%); }
#mkSide h4 { margin:0 0 4px; font-size:12px; letter-spacing:.16em; color:var(--sk-c2ink, var(--sk-c2)); font-weight:800; }
#mkSide .mkTitle { font-size:22px; font-weight:900; margin:0 0 12px; line-height:1.35; color:var(--ink); }
#mkSide .mkHero { position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4 / 5; max-height:420px; width:100%; background:#000; }
#mkSide .mkHero video { width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block; }
#mkSide .mkCap { position:absolute; left:0; right:0; bottom:0; padding:30px 14px 12px; background:linear-gradient(transparent, rgba(0,0,0,.75)); font-size:12.5px; color:#fff; }
#mkSide .mkCap:empty { display:none; }
#mkSide .mkThumbs { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:10px; }
#mkSide .mkThumbs video { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:2px solid transparent; cursor:pointer; background:#000; }
#mkSide .mkThumbs video.on { border-color:var(--sk-c1, var(--gold)); }
#mkSide .mkTips { display:grid; gap:8px; font-size:13px; color:var(--ink); }
#mkSide .mkTips div { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:color-mix(in srgb, var(--ink) 5%, transparent); }
#mkSide .mkTips b { font-size:18px; }

/* ② 見出しにメリハリ（スマホも） */
#makeForm .secHead { font-size:19px !important; letter-spacing:.06em !important; margin:6px 0 14px !important; }
#makeForm .secHead b { width:32px !important; height:32px; display:inline-grid; place-items:center; font-size:15px; }
#makeForm .langNote { font-size:12px !important; line-height:1.7 !important; opacity:.72; }
#makeForm textarea#prompt { font-size:16px; border-radius:14px; }
/* ★触っていない間は、欄の中をスクロールさせない★（2026-10-15 オーナー「作ったあと下まで行って上に戻ろうとするとカクカクして戻れない」「プロンプトが長いときだけ」・D-420）
   長い文章の欄は画面の4割で頭打ちになり中がスクロールする。上へ戻る途中でマウス・指が欄に乗ると、ページではなく欄の中が動いてページが止まって見えた。
   押して書いている間（:focus）は今まで通り中をスクロールできる */
#makeForm textarea#prompt:not(:focus) { overflow:hidden; }
@media (max-width:560px) { #makeForm .secHead { font-size:17px !important; } }

/* ③ 背景の奥でゆっくり動く光（CSS だけ・動きを減らす設定の人には止める） */
body::before, body::after { content:""; position:fixed; z-index:-1; width:70vmax; height:70vmax; border-radius:50%; filter:blur(90px); pointer-events:none; }
body::before { left:-22vmax; top:-26vmax; background:radial-gradient(circle, var(--sk-c1, #ff3fa4) 0%, transparent 62%); opacity:.22; animation:mkBgA 24s ease-in-out infinite alternate; }
body::after { right:-26vmax; bottom:-32vmax; background:radial-gradient(circle, var(--sk-c2, #35e0f0) 0%, transparent 62%); opacity:.2; animation:mkBgB 28s ease-in-out infinite alternate; }
:root[data-theme="light"] body::before, :root[data-theme="light"] body::after { opacity:.12; }
@keyframes mkBgA { to { transform:translate(18vmax, 14vmax) scale(1.1); } }
@keyframes mkBgB { to { transform:translate(-16vmax, -12vmax) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation:none; } }

/* ④ 作る枠を少し透ける質感に（角は丸く） */
#makeForm.card { border-radius:20px !important; clip-path:none !important; border:1px solid color-mix(in srgb, var(--ink) 9%, transparent) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px rgba(0,0,0,.28) !important; backdrop-filter:blur(12px) saturate(130%); }
@media (min-width:1100px) { #makeForm.card { padding:26px 28px !important; } }
#mkSide #result.card { border-radius:20px !important; clip-path:none !important; border:1px solid color-mix(in srgb, var(--ink) 9%, transparent) !important; } /* 右の列の作っている枠も、作る枠と同じ角丸に */
#mkSide .mkHero img { width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block; }
#mkSide .mkHero img.hidden, #mkSide .mkHero video.hidden { display:none; }
#mkSide .mkThumbs img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:2px solid transparent; cursor:pointer; background:#000; }
#mkSide .mkThumbs img.on { border-color:var(--sk-c1, var(--gold)); }
#mkSide .mkCard.hidden { display:none; } /* 画像の画面では TIPS を出さない */
html.mk2 #exampleCard2 { display:none !important; } /* ★PC の2列のときは、右の列に作例があるので下の「こんなものが作れます」は出さない（2026-10-14 オーナー）★ スマホ・1列では今まで通り */

/* ════ D-396：作ったものの一覧も、作る画面と同じ質感に（2026-10-14） ════ */
#tab-works > .card { border-radius:20px !important; clip-path:none !important; border:1px solid color-mix(in srgb, var(--ink) 9%, transparent) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px rgba(0,0,0,.28) !important; backdrop-filter:blur(12px) saturate(130%); }
@media (min-width:1100px) { #tab-works > .card { padding:26px 28px !important; } #tab-works .grid { grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:18px; } }
#tab-works .grid figure { border-radius:16px !important; clip-path:none !important; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; }
#tab-works .grid figure > video, #tab-works .grid figure > img { transition:transform .5s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover) and (pointer:fine) {
  #tab-works .grid figure:not(.working):hover { transform:translateY(-4px); border-color:var(--sk-c2, var(--gold)) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.35), 0 0 0 1px var(--sk-c2, var(--gold)), 0 0 24px color-mix(in srgb, var(--sk-c2, #35e0f0) 35%, transparent); }
}
/* 作品が少ないときの「＋ 新しく作る」 */
#tab-works .grid .wkAdd { display:grid; place-content:center; justify-items:center; gap:6px; min-height:260px; width:auto; margin:0; padding:20px; border-radius:16px;
  border:2px dashed color-mix(in srgb, var(--ink) 18%, transparent) !important; background:color-mix(in srgb, var(--ink) 3%, transparent) !important; color:var(--sub) !important; clip-path:none !important; cursor:pointer; transition:border-color .2s, color .2s, background .2s; }
#tab-works .grid .wkAdd:hover { border-color:var(--sk-c1, var(--gold)) !important; color:var(--ink) !important; background:color-mix(in srgb, var(--sk-c1, #ff3fa4) 8%, transparent) !important; }
#tab-works .grid .wkAdd .wkAddPlus { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-size:28px; color:#fff; background:var(--sk-btn, linear-gradient(135deg, #ff3fa4, #8a3cff)); box-shadow:0 8px 24px rgba(255,63,164,.3); }
#tab-works .grid .wkAdd b { font-size:15px; color:var(--ink); }
#tab-works .grid .wkAdd small { font-size:12px; }
@media (prefers-reduced-motion: reduce) { #tab-works .grid figure, #tab-works .grid figure > video, #tab-works .grid figure > img { transition:none; } }

/* ── とても広い画面は3列（左：最近の作品・D-396） ── */
html.mk3 main#app { max-width:1780px; }
html.mk3 #tab-make.mk2col { grid-template-columns:280px minmax(0, 1fr) 420px; grid-auto-flow:row dense; }
html.mk3 #tab-make.mk2col > #mkLeft { grid-column:1; }
html.mk3 #tab-make.mk2col > #makeForm { grid-column:2; }
html.mk3 #tab-make.mk2col > #mkSide { grid-column:3; }

#mkLeft { position:sticky; top:84px; min-width:0; }
#mkLeft.hidden { display:none; }
#mkLeft .mkCard { padding:18px; border-radius:20px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg, color-mix(in srgb, var(--card) 88%, transparent), color-mix(in srgb, var(--bg, #0c0a18) 80%, transparent));
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px rgba(0,0,0,.35); backdrop-filter:blur(14px) saturate(140%); }
#mkLeft h4 { margin:0 0 4px; font-size:12px; letter-spacing:.16em; color:var(--sk-c2ink, var(--sk-c2)); font-weight:800; }
#mkLeft .mkTitle { font-size:18px; font-weight:900; margin:0 0 12px; color:var(--ink); }
#mkLeft .mkRecent { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:calc(100vh - 260px); overflow:auto; scrollbar-width:thin; }
#mkLeft .mkRecent img, #mkLeft .mkRecent video { width:100%; aspect-ratio:3 / 4; object-fit:cover; border-radius:10px; background:#000; cursor:zoom-in; border:1px solid transparent; transition:border-color .2s, transform .2s; }
#mkLeft .mkRecent img:hover, #mkLeft .mkRecent video:hover { border-color:var(--sk-c2, var(--gold)); transform:translateY(-2px); }
#mkLeft .mkNone { font-size:12px; color:var(--sub); margin:0; }
#mkLeft button.mkAll { width:100%; margin:12px 0 0; padding:8px; font-size:13px; border-radius:10px; clip-path:none !important; }
:root[data-service="image"] #makeForm .secHead > b { display:none !important; } /* ★画像の画面は番号を出さない（もとの決まり・theme-v2.css）★ D-395 で番号を大きくしたときに、この決まりより強くなって「2」だけ出ていた */
/* ★バナーは切らずに全体を見せる★（2026-10-14 オーナー「バナーがおかしな表示に」）D-395 で本文を広げたら、バナーの絵が横に伸びて
   「高さ180pxまで・はみ出しは切る」で上下と右が切れた。広い画面ではバナーの幅を元の本文の幅（960）までにし、絵は縦横比のまま出す */
html.mk2 #banners { max-width:960px; margin-left:auto; margin-right:auto; }
#banners .banner img { max-height:none !important; height:auto !important; object-fit:contain !important; }

/* ════ D-397：光を追って傾くカード・ガラスの「作る」ボタン（2026-10-14） ════ */
.tilt { position:relative; transform-style:preserve-3d; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s !important; }
.tilt.tiltOn { transition:transform .08s linear, box-shadow .25s, border-color .25s !important; transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) !important; }
/* 光の筋：マウスの位置を中心に、白い光がうっすら乗る（下の動画・絵の操作は邪魔しない） */
#tab-works .grid figure.tilt::after, #mkSide .mkHero.tilt::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; opacity:0; transition:opacity .25s;
  background:radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), rgba(255,255,255,.06) 30%, transparent 55%); mix-blend-mode:screen; }
#tab-works .grid figure.tiltOn::after, #mkSide .mkHero.tiltOn::after { opacity:1; }
#mkLeft .mkRecent > .tiltOn { box-shadow:0 10px 24px rgba(0,0,0,.4), 0 0 0 1px var(--sk-c2, var(--gold)); }

/* ガラスの「作る」ボタン：今の形（平行四辺形）と色はそのまま、上に光の層・マウスの位置に光の点 */
#goRow #go:not(:disabled) { background:
    radial-gradient(160px circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.38), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.10) 46%, rgba(255,255,255,0) 50%, rgba(0,0,0,.10) 100%),
    var(--sk-btn, linear-gradient(135deg, #ff3fa4, #8a3cff)) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.25); }
#goRow #go:not(:disabled):hover { filter:saturate(1.15) brightness(1.06); }

/* ── お休み中・メンテナンス中の枠も、作る枠と同じ真ん中の列へ（2026-10-14 オーナー「お休み中のときレイアウトこわれてない？」）
   作る枠が隠れて、この枠だけ全幅になり、左右の列が下の段へ落ちていた ── */
#tab-make.mk2col { grid-auto-flow:row dense; }
#tab-make.mk2col > #offline, #tab-make.mk2col > #maint { grid-column:1 !important; }
#tab-make.mk2col > #mkSide { grid-column:2; }
html.mk3 #tab-make.mk2col > #offline, html.mk3 #tab-make.mk2col > #maint { grid-column:2 !important; }
#tab-make > #offline.card, #tab-make > #maint.card { border-radius:20px !important; clip-path:none !important; border:1px solid color-mix(in srgb, var(--ink) 9%, transparent) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px rgba(0,0,0,.28) !important; backdrop-filter:blur(12px) saturate(130%); }

/* ════ D-398：ログインボーナスを派手に・押したときの爽快感（2026-10-14） ════ */
/* PC の2列・3列では作る枠と同じ列に（全幅に伸びて横長になっていた） */
#tab-make.mk2col > #stampCard { grid-column:1 !important; }
html.mk3 #tab-make.mk2col > #stampCard { grid-column:2 !important; }
#stampCard { border-radius:20px !important; }
/* まだ押していない日：目立たせる（ふちが光る・札を大きく・ボタンがゆっくり脈打つ） */
#stampCard:not(.done) { padding:18px 20px !important; border:1px solid color-mix(in srgb, var(--sk-c1, #ff3fa4) 55%, transparent) !important;
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sk-c1, #ff3fa4) 16%, transparent), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--sk-c2, #35e0f0) 12%, transparent), transparent 60%), var(--card) !important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--sk-c1, #ff3fa4) 20%, transparent), 0 14px 40px color-mix(in srgb, var(--sk-c1, #ff3fa4) 18%, transparent) !important; }
#stampCard:not(.done) #stampTitle { font-size:17px !important; font-weight:900; }
#stampCard:not(.done) #stampRow { gap:8px; }
#stampCard:not(.done) #stampRow .s { width:42px; height:42px; font-size:15px; border-radius:12px; }
#stampCard:not(.done) #stampRow .s.big { width:58px; }
#stampCard:not(.done) #stampRow .s.now { border:2px dashed var(--sk-c1, var(--gold)) !important; color:var(--sk-c1, var(--gold)) !important; animation:stampNow 1.6s ease-in-out infinite; }
@keyframes stampNow { 50% { transform:scale(1.08); box-shadow:0 0 16px color-mix(in srgb, var(--sk-c1, #ff3fa4) 55%, transparent); } }
#stampBtn:not(:disabled) { background:var(--sk-btn, linear-gradient(135deg, #ff3fa4, #8a3cff)) !important; color:#fff !important; border:0 !important;
  padding:11px 22px !important; font-size:15px !important; font-weight:900; letter-spacing:.06em; border-radius:12px; clip-path:none !important;
  box-shadow:0 6px 20px color-mix(in srgb, var(--sk-c1, #ff3fa4) 45%, transparent); animation:stampBtnPulse 2s ease-in-out infinite; position:relative; overflow:hidden; }
#stampBtn:not(:disabled)::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform:translateX(-120%); animation:stampShine 2.6s ease-in-out infinite; pointer-events:none; }
#stampBtn:not(:disabled):active { transform:scale(.94); }
@keyframes stampBtnPulse { 50% { box-shadow:0 6px 30px color-mix(in srgb, var(--sk-c1, #ff3fa4) 75%, transparent), 0 0 0 4px color-mix(in srgb, var(--sk-c1, #ff3fa4) 18%, transparent); } }
@keyframes stampShine { 60%, 100% { transform:translateX(120%); } }
/* 押した瞬間：はんこが上から落ちて「ドン」・カードが一瞬揺れる・波紋 */
#stampRow .s.slam { animation:stampSlam .55s cubic-bezier(.2,1.3,.4,1) !important; position:relative; z-index:3; }
@keyframes stampSlam { 0% { transform:scale(2.6) rotate(-14deg); opacity:0; } 45% { transform:scale(.88) rotate(3deg); opacity:1; } 70% { transform:scale(1.12); } 100% { transform:scale(1); } }
#stampCard.shake { animation:stampShake .32s .2s ease-out; }
@keyframes stampShake { 20% { transform:translate(-3px, 2px); } 40% { transform:translate(3px, -2px); } 60% { transform:translate(-2px, 1px); } 80% { transform:translate(1px, 0); } }
.stampRing { position:fixed; z-index:9999; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; pointer-events:none;
  border:3px solid var(--sk-c1, var(--gold)); animation:stampRing .7s .18s ease-out forwards; opacity:0; }
@keyframes stampRing { 0% { opacity:.9; transform:scale(1); } 100% { opacity:0; transform:scale(7); } }
.flyCoin { position:fixed; z-index:9999; width:22px; height:22px; border-radius:50%; pointer-events:none; display:grid; place-items:center;
  font-size:13px; font-weight:900; color:#7a4a00; background:radial-gradient(circle at 35% 30%, #fff3c4, #f1d27a 45%, #c8901f); box-shadow:0 0 10px rgba(241,210,122,.8); opacity:0; }
.confetti { position:fixed; top:0; z-index:9998; width:8px; height:13px; border-radius:2px; pointer-events:none; }
@media (prefers-reduced-motion: reduce) { #stampBtn:not(:disabled), #stampBtn:not(:disabled)::after, #stampCard:not(.done) #stampRow .s.now { animation:none; } }
@media (max-width:560px) {
  #stampCard:not(.done) { padding:14px !important; }
  #stampCard:not(.done) #stampRow { gap:4px; flex-wrap:nowrap; }
  #stampCard:not(.done) #stampRow .s { width:33px; height:38px; }
  #stampCard:not(.done) #stampRow .s.big { width:44px; }
}
/* ★段をはっきり決める（D-398 追記・2026-10-14 オーナー「レイアウトが崩れちゃってます」）★
   ボーナスを左の列に入れたら、背の高い右の列がボーナスと同じ段に並び、その段が伸びて作る枠が下へ押し出されていた。
   1段目＝ボーナス、2段目＝作る枠（お休み・止められている人の枠も）、左右の列は1〜2段目にまたがる。ボーナスが無い人は2段目から */
#tab-make.mk2col > #stampCard { grid-row:1; }
#tab-make.mk2col > #makeForm, #tab-make.mk2col > #offline, #tab-make.mk2col > #maint, #tab-make.mk2col > #suspended { grid-row:2; }
#tab-make.mk2col > #mkSide, #tab-make.mk2col > #mkLeft { grid-row:1 / span 2; }
#tab-make.mk2col:not(:has(> #stampCard:not(.hidden))) > #mkSide, #tab-make.mk2col:not(:has(> #stampCard:not(.hidden))) > #mkLeft { grid-row:2; }
/* 右の列の高さは2段目だけで受ける（1段目＝ボーナスは伸ばさない）。作る枠・お休みの枠は2段目の上に寄せる */
#tab-make.mk2col { grid-template-rows:auto 1fr; }
#tab-make.mk2col > #makeForm, #tab-make.mk2col > #offline, #tab-make.mk2col > #maint, #tab-make.mk2col > #suspended { align-self:start; }

/* ════ D-399：おしゃれの続き（2026-10-14 オーナー「6までいっていいですよ」） ════ */
/* 1 できあがり：光の幕が左右に開く */
.uxCurtain { position:absolute; z-index:5; pointer-events:none; overflow:hidden; }
.uxCurtain i { position:absolute; top:0; bottom:0; width:calc(50% + 1px); background:linear-gradient(90deg, #160c2c, #2c1450); animation:uxCurL .85s .12s cubic-bezier(.7,0,.2,1) forwards; }
.uxCurtain i:first-child { left:0; }
.uxCurtain i + i { right:0; background:linear-gradient(270deg, #160c2c, #2c1450); animation-name:uxCurR; }
.uxCurtain b { position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 10px 2px var(--sk-c1, #ff3fa4), 0 0 22px 4px color-mix(in srgb, var(--sk-c2, #35e0f0) 60%, transparent); animation:uxCurB .85s .12s ease-out forwards; }
@keyframes uxCurL { to { transform:translateX(-100%); } }
@keyframes uxCurR { to { transform:translateX(100%); } }
@keyframes uxCurB { 0% { opacity:1; transform:scaleX(1); } 35% { opacity:.9; transform:scaleX(4); } 100% { opacity:0; transform:scaleX(10); } }

/* 2 タブの切り替え：前の画面がすっと消え、次の画面が下からふわっと（ヘッダーは動かさない） */
header { view-transition-name:uxHeader; }
::view-transition-old(root) { animation:uxVtOut .16s ease-in both; }
::view-transition-new(root) { animation:uxVtIn .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes uxVtOut { to { opacity:0; transform:translateY(-8px); } }
@keyframes uxVtIn { from { opacity:0; transform:translateY(14px); } }

/* 4 読み込みの間の仮の枠：光が流れる */
.uxSkel { position:relative; overflow:hidden; display:block; margin:0; border-radius:16px; min-height:260px; background:color-mix(in srgb, var(--ink) 6%, transparent) !important; border:1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
#mkRecent .uxSkel { min-height:0; aspect-ratio:3 / 4; border-radius:10px; }
.uxSkel::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--sk-c2, #35e0f0) 14%, transparent) 50%, transparent 80%); animation:uxSkel 1.3s ease-in-out infinite; }
@keyframes uxSkel { to { transform:translateX(100%); } }

/* 5 小さなお知らせ：画面の下の真ん中から */
#uxToasts { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:10000; display:grid; gap:8px; justify-items:center; width:max-content; max-width:calc(100vw - 32px); pointer-events:none; }
.uxToast { pointer-events:auto; cursor:pointer; display:flex; align-items:center; gap:10px; padding:11px 18px 11px 12px; border-radius:14px; font-size:14px; font-weight:700; color:#fff;
  background:color-mix(in srgb, #140c26 86%, transparent); backdrop-filter:blur(14px) saturate(150%); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 34px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--sk-c2, #35e0f0) 25%, transparent); animation:uxToastIn .38s cubic-bezier(.2,1.2,.4,1) both; }
.uxToast.out { animation:uxToastOut .28s ease-in forwards; }
.uxToastIc { width:24px; height:24px; flex:0 0 24px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:900; background:var(--ux-mint, #4dffb0); color:#06120c; }
.uxToast.err .uxToastIc { background:#ff5a7a; color:#fff; }
.uxToast.coin .uxToastIc { background:radial-gradient(circle at 35% 30%, #fff3c4, #f1d27a 45%, #c8901f); color:#7a4a00; }
.uxToast.coin { box-shadow:0 12px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(241,210,122,.5), 0 0 24px rgba(241,210,122,.3); }
@keyframes uxToastIn { from { opacity:0; transform:translateY(16px) scale(.96); } }
@keyframes uxToastOut { to { opacity:0; transform:translateY(10px) scale(.97); } }
@media (max-width:560px) { #uxToasts { bottom:calc(92px + env(safe-area-inset-bottom)); } } /* スマホは下に「作る」ボタンが付いてくるので、その上に */

/* 6 見出しの書体（Dela Gothic One）：見出しだけ。本文はそのまま */
#makeForm .secHead, #mkSide .mkTitle, #mkLeft .mkTitle, #stampTitle, #tab-works > .card > h2, #tab-invite h2, #offline h2, #maint h2, #tab-works .grid .wkAdd b {
  font-family:"Dela Gothic One", "M PLUS 1p", system-ui, sans-serif !important; font-weight:400 !important; letter-spacing:.04em !important; }
#makeForm .secHead b { font-family:"Orbitron", sans-serif !important; } /* 番号は今のまま */

@media (prefers-reduced-motion: reduce) { .uxSkel::after, .uxToast, .uxToast.out { animation:none; } ::view-transition-old(root), ::view-transition-new(root) { animation:none; } }
#makeForm .secHead button, #makeForm .secHead button * { font-family:"M PLUS 1p", system-ui, sans-serif !important; font-weight:700 !important; letter-spacing:normal !important; } /* 見出しの横のボタンは本文の書体のまま（太い書体だと小さい字がつぶれた） */
/* ★2列の作る画面も、ほかのタブでは隠す（D-399 で見つけた D-395 からの不具合）★ #tab-make.mk2col { display:grid } が .hidden より強く、
   PC（幅1100以上）で「作ったもの」「友だちに教える」に移っても作る画面が残り、その下に一覧が並んでいた */
#tab-make.mk2col.hidden { display:none; }

/* ════ D-400：チビルクサを囲む輪（2026-10-14） ════ */
.genPh.gqR { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gqRing { position:relative; width:min(78%, 290px); aspect-ratio:1; margin:14px auto 0; flex:none; }
.gqSvg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.gq-ot { fill:none; stroke:var(--ux-trk, rgba(255,255,255,.08)); stroke-width:11; }
.gq-o { fill:none; stroke:url(#gqG); stroke-width:11; stroke-linecap:round; filter:drop-shadow(0 0 6px var(--sk-c1, #ff3fa4)); transition:stroke-dasharray .9s cubic-bezier(.2,.8,.2,1); }
.gq-og { transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.gq-tip { fill:#fff; filter:drop-shadow(0 0 5px #fff); }
.gq-is { fill:none; stroke-width:7; stroke-linecap:round; stroke:color-mix(in srgb, var(--sk-c2, #35e0f0) 16%, transparent); transition:stroke .4s; }
.gq-is.ok { stroke:var(--sk-c2, #35e0f0); filter:drop-shadow(0 0 4px var(--sk-c2, #35e0f0)); }
.gq-is.now { stroke:var(--sk-c2, #35e0f0); animation:gqNow 1.2s ease-in-out infinite; }
@keyframes gqNow { 50% { opacity:.3; } }
/* 順番待ち：外の輪が回る・％は出さない */
.genPh.gqWait .gq-og { animation:gqTurn 1.6s linear infinite; transform-origin:100px 100px; }
.genPh.gqWait .gq-tip { opacity:0; }
.genPh.gqWait .gq-o { stroke:var(--ux-warn, #ffd24f); filter:drop-shadow(0 0 6px var(--ux-warn, #ffd24f)); }
@keyframes gqTurn { to { transform:rotate(360deg); } }
/* 真ん中のチビルクサ（丸い窓） */
.genPh.gqR .gqRing .genChibi { position:absolute; left:50%; top:50%; width:66%; height:auto; aspect-ratio:1; margin:0; transform:translate(-50%, -50%); border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 3px rgba(255,255,255,.06), 0 0 30px color-mix(in srgb, var(--sk-c1, #ff3fa4) 35%, transparent) !important; border:0 !important; }
/* 下の情報：大きな％・今の一言・秒、4つの札、記録の行。横棒は目に見えない形で残す（読み上げ用） */
.genPh.gqR .gq { margin:10px auto 14px; }
.genPh.gqR .gq-h { justify-content:center; flex-wrap:wrap; row-gap:4px; }
.gq-pct { font:900 26px/1 "Orbitron", sans-serif; color:var(--ink); text-shadow:0 0 12px color-mix(in srgb, var(--sk-c1, #ff3fa4) 70%, transparent); font-variant-numeric:tabular-nums; }
.gq-pct:empty { display:none; }
.gq-pct small { font-size:13px; opacity:.7; margin-left:2px; }
.genPh.gqR .gq-r { margin-left:0; }
.gq-steps { display:flex; justify-content:center; gap:6px; margin-top:10px; font-size:11px; font-weight:800; letter-spacing:.04em; }
.gq-steps span { padding:3px 9px; border-radius:999px; color:var(--sub); background:color-mix(in srgb, var(--ink) 6%, transparent); white-space:nowrap; transition:all .3s; }
.gq-steps span.ok { color:var(--sk-c2ink, var(--sk-c2)); background:color-mix(in srgb, var(--sk-c2, #35e0f0) 14%, transparent); }
.gq-steps span.now { color:#fff; background:var(--sk-btn, linear-gradient(135deg, #ff3fa4, #8a3cff)); }
.genPh.gqR .gq-trk { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:0; }
.genPh.gqR .gq-log { align-items:center; }
/* 横長：輪は左・情報は右 */
.genPh.gqR.genWide { flex-direction:row; gap:5%; padding:0 5%; }
.genPh.gqR.genWide .gqRing { width:auto; height:80%; margin:0; }
.genPh.gqR.genWide .gq { flex:1; min-width:0; margin:0; }
.genPh.gqR.genWide .gq-h, .genPh.gqR.genWide .gq-steps, .genPh.gqR.genWide .gq-log { justify-content:flex-start; align-items:flex-start; }
.genPh.gqR.genWide .gq-steps { flex-wrap:wrap; gap:4px; }
@media (max-width:560px) { .genPh.gqR.genWide .gq-steps span { padding:2px 6px; font-size:10px; } .genPh.gqR.genWide .gq-pct { font-size:20px; } .genPh.gqR.genWide .gq-log { display:none; } }
@media (prefers-reduced-motion: reduce) { .gq-o, .gq-og { transition:none; } .gq-is.now, .genPh.gqWait .gq-og { animation:none; } }
/* 横長は高さが足りないので、記録の行は今の1行だけ・札は1列に詰める */
.genPh.gqR.genWide .gq-log li:not(:last-child) { display:none; }
.genPh.gqR.genWide .gq-steps { flex-wrap:nowrap; }
@media (max-width:560px) { .genPh.gqR.genWide { gap:4%; padding:0 4%; } .genPh.gqR.genWide .gqRing { height:74%; } .genPh.gqR.genWide .gq-steps { gap:3px; } .genPh.gqR.genWide .gq-steps span { padding:2px 5px; font-size:9.5px; letter-spacing:0; } }
.genPh.gqR.genWide .gq-steps { display:none; } /* 横長は幅が足りず札がはみ出した。段階は内側の輪の4区切りで見える */
@media (max-width:560px) { .genPh.gqR.genWide .gq-log { display:flex; font-size:11.5px; } } /* 順番待ちの「あと◯人」が消えていた。今の1行だけは出す */
/* ★できあがりの光の帯（D-364）は、扉（D-399）が出るときは出さない★（2026-10-14 オーナー「光の扉がやっぱりはみでてません？」）
   帯は結果の枠の外（左 -40%）から走り始めるので、2列の右の列では左の作る枠の上まで出ていた。扉と重なって光が二重にもなっていた */
#resultBody.genSweep:has(.uxCurtain)::after { display:none; }
#resultBody.genSweep { overflow:hidden; } /* 扉が出ない人（動きを減らす設定は帯も止まる）でも、枠の外へは出さない */
/* 受け取り済みで畳んだ1行は本文の書体（総点検で見つけた：太い見出しの書体だと「受け取り済み」の取・済がつぶれた）。押す前の大きい見出しはそのまま */
#stampCard.done #stampTitle { font-family:"M PLUS 1p", system-ui, sans-serif !important; font-weight:800 !important; letter-spacing:.02em !important; }

/* ════ D-401：ログイン前の画面を作り込む（2026-10-14） ════ */
#guest > .card { border-radius:22px !important; clip-path:none !important; border:1px solid color-mix(in srgb, var(--ink) 9%, transparent) !important;
  background:linear-gradient(160deg, color-mix(in srgb, var(--card) 90%, transparent), color-mix(in srgb, var(--bg, #0c0a18) 82%, transparent)) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px rgba(0,0,0,.30) !important; backdrop-filter:blur(12px) saturate(130%); }
@media (min-width:900px) { main#guest { max-width:1080px; } }
/* ヒーロー：大きな見出し・光る特典・大きなボタン */
#guest .hero { position:relative; overflow:hidden; padding:36px 40px !important; gap:40px !important; }
#guest .hero::before { content:""; position:absolute; inset:-40%; z-index:0; pointer-events:none;
  background:radial-gradient(40% 40% at 25% 30%, color-mix(in srgb, var(--sk-c1, #ff3fa4) 22%, transparent), transparent 70%), radial-gradient(40% 40% at 80% 70%, color-mix(in srgb, var(--sk-c2, #35e0f0) 16%, transparent), transparent 70%);
  animation:gAura 18s ease-in-out infinite alternate; }
@keyframes gAura { to { transform:translate(6%, -4%) rotate(8deg); } }
#guest .hero > * { position:relative; z-index:1; }
#guest .hero-media { flex:0 0 300px !important; }
#guest .hero-media video, #guest .hero-media img { border-radius:20px !important; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.45), 0 0 60px color-mix(in srgb, var(--sk-c1, #ff3fa4) 25%, transparent) !important; }
.gEyebrow { display:inline-block; margin:0 0 12px; padding:4px 12px; border-radius:999px; font:800 11px/1.4 "Orbitron", sans-serif; letter-spacing:.24em;
  color:var(--sk-c2ink, var(--sk-c2, #35e0f0)); border:1px solid color-mix(in srgb, var(--sk-c2, #35e0f0) 45%, transparent); background:color-mix(in srgb, var(--sk-c2, #35e0f0) 8%, transparent); }
#guestTitle { font-family:"Dela Gothic One", "M PLUS 1p", system-ui, sans-serif !important; font-weight:400 !important; font-size:clamp(24px, 3.2vw, 36px) !important; line-height:1.35 !important; letter-spacing:.02em;
  background:linear-gradient(100deg, var(--ink) 30%, var(--sk-c1, #ff3fa4) 70%, #8a3cff); -webkit-background-clip:text; background-clip:text; color:transparent !important; margin:0 0 12px !important; }
#guestLead { font-size:14px !important; }
#guestOffer { position:relative; overflow:hidden; border-radius:16px !important; border:1px solid color-mix(in srgb, var(--sk-c1, #ff3fa4) 55%, transparent) !important;
  background:linear-gradient(135deg, color-mix(in srgb, var(--sk-c1, #ff3fa4) 18%, transparent), color-mix(in srgb, #8a3cff 14%, transparent)) !important;
  box-shadow:0 0 30px color-mix(in srgb, var(--sk-c1, #ff3fa4) 22%, transparent); padding:14px 18px !important; }
#guestOffer::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform:translateX(-120%); animation:stampShine 3.2s ease-in-out infinite; pointer-events:none; }
#guestOffer .big { font-family:"Dela Gothic One", "M PLUS 1p", sans-serif; font-weight:400 !important; font-size:30px !important; color:var(--sk-c1, var(--gold)) !important; letter-spacing:.02em; }
#guest #google, #gCtaBtn { width:100%; max-width:360px; padding:16px 20px !important; font-size:17px !important; font-weight:900 !important; letter-spacing:.06em; border:0 !important; border-radius:14px !important; color:#fff !important; clip-path:none !important;
  background:radial-gradient(160px circle at 30% 0%, rgba(255,255,255,.35), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 50%), var(--sk-btn, linear-gradient(135deg, #ff3fa4, #8a3cff)) !important;
  box-shadow:0 10px 30px color-mix(in srgb, var(--sk-c1, #ff3fa4) 45%, transparent) !important; animation:stampBtnPulse 2.4s ease-in-out infinite; }
#guest #google:hover, #gCtaBtn:hover { filter:saturate(1.15) brightness(1.06); transform:translateY(-1px); }
/* 作例が流れる帯 */
#gStrip { overflow:hidden; margin:0 0 16px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
#gStrip.hidden { display:none; }
.gStripIn { display:flex; gap:12px; width:max-content; animation:gStrip calc(var(--n, 6) * 6s) linear infinite; }
.gStripIn img { height:180px; aspect-ratio:9 / 14; object-fit:cover; border-radius:14px; flex:none; box-shadow:0 8px 24px rgba(0,0,0,.35); opacity:.92; }
@keyframes gStrip { to { transform:translateX(-50%); } }
/* 3つの手順 */
#gSteps h2, #exampleCard h2 { font-family:"Dela Gothic One", "M PLUS 1p", sans-serif !important; font-weight:400 !important; font-size:22px !important; text-align:center; margin:4px 0 18px !important; }
.gStepList { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.gStepList li { text-align:center; padding:16px 12px 18px; border-radius:18px; background:color-mix(in srgb, var(--ink) 4%, transparent); border:1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.gStepArt { height:120px; margin:0 auto 12px; display:grid; place-items:center; }
.gStepArt img { width:120px; height:120px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px color-mix(in srgb, var(--sk-c1, #ff3fa4) 40%, transparent), 0 10px 30px rgba(0,0,0,.35); }
.gType { width:100%; max-width:240px; height:96px !important; margin-top:12px !important; padding:10px 12px; border-radius:12px; text-align:left; place-items:start !important; display:block !important;
  font-size:13px; line-height:1.6; color:var(--ink); background:var(--field); border:1px solid color-mix(in srgb, var(--sk-c2, #35e0f0) 45%, transparent); box-shadow:0 0 18px color-mix(in srgb, var(--sk-c2, #35e0f0) 18%, transparent); }
.gType i { display:inline-block; width:2px; height:1.1em; margin-left:1px; vertical-align:-2px; background:var(--sk-c1, #ff3fa4); animation:gqBlink 1s steps(1) infinite; }
.gStepList b { display:flex; align-items:center; justify-content:center; gap:8px; font-size:17px; font-weight:900; color:var(--ink); }
.gStepList b em { font:900 14px/1 "Orbitron", sans-serif; font-style:normal; width:26px; height:26px; display:grid; place-items:center; border-radius:8px; color:#fff; background:var(--sk-btn, linear-gradient(135deg, #ff3fa4, #8a3cff)); }
.gStepList p { margin:6px 0 0; font-size:13px; color:var(--sub); }
.gFeats { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:18px 0 2px; }
.gFeats span { padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700; color:var(--ink); background:color-mix(in srgb, var(--sk-c2, #35e0f0) 10%, transparent); border:1px solid color-mix(in srgb, var(--sk-c2, #35e0f0) 30%, transparent); }
/* 作例の一覧：角丸・浮く */
#exampleGrid .item { border-radius:16px; overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
#exampleGrid .item video, #exampleGrid .item img { border-radius:16px; }
@media (hover:hover) and (pointer:fine) { #exampleGrid .item:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.4), 0 0 0 1px var(--sk-c2, var(--gold)); } }
/* いちばん下でもう一度 */
#gCta { text-align:center; padding:30px 20px !important; }
.gCtaOffer { display:grid; gap:4px; margin:0 0 16px; font-size:13px; color:var(--sub); }
.gCtaOffer:empty { display:none; }
.gCtaBig { font-family:"Dela Gothic One", "M PLUS 1p", sans-serif; font-size:30px; color:var(--sk-c1, var(--gold)); }
@media (max-width:640px) {
  #guest .hero { padding:22px 16px !important; gap:16px !important; }
  #guest .hero-media { flex:none !important; width:min(200px, 58%) !important; }
  .gStepList { grid-template-columns:1fr; gap:10px; }
  .gStepList li { display:grid; grid-template-columns:84px 1fr; grid-template-rows:auto auto; column-gap:12px; text-align:left; align-items:center; padding:12px; }
  .gStepArt { grid-row:1 / span 2; height:auto; margin:0; }
  .gStepArt img { width:76px; height:76px; }
  .gType { grid-row:1 / span 2; width:84px; height:76px !important; margin:0 !important; font-size:9.5px; padding:6px; overflow:hidden; }
  .gStepList b { justify-content:flex-start; font-size:15px; }
  .gStepList p { margin:2px 0 0; }
  .gStripIn img { height:130px; }
  #gSteps h2, #exampleCard h2 { font-size:19px !important; }
}
@media (prefers-reduced-motion: reduce) { #guest .hero::before, #guestOffer::after, #guest #google, #gCtaBtn, .gStripIn, .gType i { animation:none; } }
/* 見出し・説明は文節で折る（「音のつ／いた」と途中で折れていた）。対応していないブラウザは今まで通り */
#guestTitle, #guestLead, #guestOffer .sub, .gCtaOffer span, .gStepList p { word-break:auto-phrase; }
#guestOffer .big, .gCtaBig { white-space:nowrap; }
@media (max-width:640px) { #guestOffer .big, .gCtaBig { font-size:24px !important; } #guestTitle { font-size:22px !important; } }
/* ★スマホはログインのボタンを最初の1画面に★（style.css の決まり「大きく置くとログインボタンが沈む」）絵は小さめ・すき間を詰める */
@media (max-width:640px) {
  #guest .hero-media { width:min(140px, 40%) !important; }
  #guest .hero { gap:10px !important; padding:16px 14px !important; }
  .gEyebrow { margin:0 0 6px; }
  #guestTitle { font-size:20px !important; margin:0 0 6px !important; }
  #guestOffer { padding:10px 14px !important; }
  #guest #google { margin-top:0; }
  #guest .hero-copy p[style*="margin-top:24px"] { margin-top:14px !important; }
}
.gFeats.hidden { display:none; } /* 画像のページでは動画の札を出さない（.gFeats の display:flex が .hidden より後ろで勝っていた） */

/* ════ D-402：友だちに教える＝2人ともトク（2026-10-14） ════ */
#inviteHero { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin:6px 0 16px; padding:20px 18px 16px; border-radius:20px; position:relative; overflow:hidden;
  background:radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--sk-c1, #ff3fa4) 20%, transparent), transparent 60%), radial-gradient(80% 120% at 100% 100%, color-mix(in srgb, var(--sk-c2, #35e0f0) 16%, transparent), transparent 60%), color-mix(in srgb, var(--ink) 4%, transparent);
  border:1px solid color-mix(in srgb, var(--sk-c1, #ff3fa4) 40%, transparent); box-shadow:0 0 30px color-mix(in srgb, var(--sk-c1, #ff3fa4) 15%, transparent); }
#inviteHero.hidden { display:none; }
#inviteHero::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%); transform:translateX(-120%); animation:stampShine 3.6s ease-in-out infinite; pointer-events:none; }
.ivSide { display:grid; justify-items:center; gap:4px; text-align:center; }
.ivWho { font-size:12px; font-weight:800; letter-spacing:.1em; padding:3px 12px; border-radius:999px; color:#fff; background:var(--sk-btn, linear-gradient(135deg, #ff3fa4, #8a3cff)); }
.ivFriend .ivWho { background:linear-gradient(135deg, var(--sk-c2, #35e0f0), #3c7cff); }
.ivBig { font-family:"Dela Gothic One", "M PLUS 1p", sans-serif; font-weight:400; font-size:clamp(22px, 3vw, 30px); line-height:1.2; color:var(--sk-c1, var(--gold)); white-space:nowrap; }
.ivFriend .ivBig { color:var(--sk-c2ink, var(--sk-c2, #35e0f0)); }
.ivSide small { font-size:12px; color:var(--sub); }
.ivMid { display:grid; justify-items:center; gap:4px; font-size:12px; font-weight:900; text-align:center; color:var(--ink); }
.ivMid img { width:76px; height:76px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px color-mix(in srgb, var(--sk-c1, #ff3fa4) 45%, transparent), 0 8px 24px rgba(0,0,0,.35); animation:ivBob 2.4s ease-in-out infinite; }
@keyframes ivBob { 50% { transform:translateY(-4px); } }
.ivMore { grid-column:1 / -1; margin:6px 0 0; text-align:center; font-size:13px; color:var(--ink); }
.ivMore b { color:var(--sk-c1, var(--gold)); font-size:15px; }
@media (max-width:560px) { #inviteHero { gap:6px; padding:16px 10px 14px; } .ivMid img { width:56px; height:56px; } .ivBig { font-size:20px; } .ivSide small { font-size:11px; } }
/* 足りないときの一言・共有の下の一言 */
.shortRef { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:10px 0 0; padding:10px 12px; border-radius:12px; font-size:13px; color:var(--ink);
  background:color-mix(in srgb, var(--sk-c2, #35e0f0) 10%, transparent); border:1px dashed color-mix(in srgb, var(--sk-c2, #35e0f0) 45%, transparent); }
.shortRef.hidden { display:none; }
.shortRef button { padding:6px 12px !important; font-size:12px !important; }
.refHint { margin:8px 0 0; font-size:12px; color:var(--sub); }
.refHint::before { content:"🎁 "; }
@media (prefers-reduced-motion: reduce) { #inviteHero::after, .ivMid img { animation:none; } }
/* スマホ：横に3つは入らずはみ出した → 上にチビルクサと「2人ともトク」、下に「あなた」「友だち」を2つ並べる */
@media (max-width:560px) {
  #inviteHero { grid-template-columns:1fr 1fr; row-gap:10px; }
  .ivMid { grid-column:1 / -1; order:-1; grid-auto-flow:column; align-items:center; gap:10px; font-size:13px; }
  .ivMid br { display:none; }
  .ivBig { font-size:clamp(16px, 5vw, 20px); }
}
/* 友だちに教えるタブの外枠も、作る・作ったものと同じ角丸の透ける枠に */
#tab-invite > .card { border-radius:20px !important; clip-path:none !important; border:1px solid color-mix(in srgb, var(--ink) 9%, transparent) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px rgba(0,0,0,.28) !important; backdrop-filter:blur(12px) saturate(130%); }
@media (max-width:560px) { .ivMid { justify-content:center; } }

/* ════ D-403：ログインボーナスを7つに区切った輪に（2026-10-14） ════ */
#stampRow { display:none !important; } /* 四角は使わない（作りは残す） */
#stampCard:not(.done) { display:grid !important; grid-template-columns:auto 1fr; grid-template-areas:"ring head" "ring note" "ring next" "perk perk"; column-gap:22px; row-gap:4px; align-items:center; }
#stampCard:not(.done) > .stRing { grid-area:ring; }
#stampCard:not(.done) > .stamp-head { grid-area:head; margin:0 !important; align-self:end; }
#stampCard:not(.done) > .stamp-note { grid-area:note; margin:0 !important; }
#stampCard:not(.done) > .stNext { grid-area:next; align-self:start; }
#stampCard:not(.done) > #perkBonus { grid-area:perk; }
.stRing { position:relative; width:150px; aspect-ratio:1; flex:none; }
.stSvg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.stSeg { fill:none; stroke-width:9; stroke-linecap:round; stroke:color-mix(in srgb, var(--ink) 10%, transparent); transition:stroke .4s; }
.stSeg.on { stroke:url(#stG); filter:drop-shadow(0 0 5px var(--sk-c1, #ff3fa4)); }
.stSeg.now { stroke:color-mix(in srgb, var(--sk-c1, #ff3fa4) 55%, transparent); animation:gqNow 1.2s ease-in-out infinite; }
.stSeg.big { stroke:color-mix(in srgb, #f1d27a 35%, transparent); }
.stSeg.big.now { stroke:#f1d27a; }
.stSeg.big.on { stroke:#f1d27a; filter:drop-shadow(0 0 8px #f1d27a); }
.stSeg.stJust { animation:stJust .9s ease-out; }
@keyframes stJust { 0% { stroke-width:9; } 40% { stroke-width:15; filter:drop-shadow(0 0 14px #fff); } 100% { stroke-width:9; } }
.stGift { position:absolute; transform:translate(-50%, -50%); font-size:16px; line-height:1; pointer-events:none; filter:drop-shadow(0 0 4px #f1d27a); }
#stampRing #stampBtn { position:absolute; left:50%; top:50%; width:54%; aspect-ratio:1; height:auto; transform:translate(-50%, -50%); margin:0; padding:0 !important; border-radius:50% !important; border:0 !important;
  display:grid; place-content:center; gap:1px; font-size:12px !important; line-height:1.2; text-align:center; color:#fff !important; cursor:pointer; clip-path:none !important; animation:none !important;
  background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.35), transparent 55%), var(--sk-btn, linear-gradient(135deg, #ff3fa4, #8a3cff)) !important; box-shadow:0 4px 14px color-mix(in srgb, var(--sk-c1, #ff3fa4) 40%, transparent) !important; }
#stampRing #stampBtn::after { display:none !important; }
#stampRing #stampBtn b { font-size:18px; font-weight:900; font-family:"M PLUS 1p", system-ui, sans-serif; }
#stampRing #stampBtn:not(:disabled):hover { filter:brightness(1.08); }
#stampRing #stampBtn:not(:disabled):active { transform:translate(-50%, -50%) scale(.92) !important; }
#stampRing #stampBtn.stDone { background:color-mix(in srgb, var(--ink) 8%, transparent) !important; color:var(--sk-c1, var(--gold)) !important; box-shadow:none !important; }
.stRing.slam { animation:stRingPop .55s cubic-bezier(.2,1.3,.4,1); }
@keyframes stRingPop { 0% { transform:scale(.86); } 55% { transform:scale(1.08); } 100% { transform:scale(1); } }
.stNext { display:inline-flex; justify-self:start; align-items:center; margin-top:6px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:800; color:#7a4a00; background:linear-gradient(135deg, #fff3c4, #f1d27a); white-space:nowrap; }
.stNext:empty { display:none; }
.stNext.stBig { font-size:13px; box-shadow:0 0 18px rgba(241,210,122,.6); animation:stampBtnPulse 2s ease-in-out infinite; }
/* 受け取り済みで畳んだ1行：左に小さな輪・右に次の札 */
#stampCard.done { flex-wrap:nowrap !important; }
#stampCard.done .stRing { width:38px; }
#stampCard.done .stSeg { stroke-width:15; }
#stampCard.done #stampRing #stampBtn, #stampCard.done .stGift { display:none; }
#stampCard.done .stNext { margin:0 0 0 auto; padding:3px 10px; font-size:11px; color:var(--sub); background:color-mix(in srgb, var(--ink) 6%, transparent); }
#stampCard.done .stamp-note { display:none; }
@media (max-width:560px) {
  #stampCard:not(.done) { column-gap:14px; }
  .stRing { width:108px; }
  #stampRing #stampBtn b { font-size:15px; }
  #stampRing #stampBtn { font-size:11px !important; }
  #stampCard:not(.done) #stampTitle { font-size:15px !important; }
  #stampCard:not(.done) .stamp-note { font-size:11.5px !important; line-height:1.55; }
  .stNext { font-size:11px; padding:4px 10px; }
  #stampCard.done .stNext { display:none; } /* 畳んだ1行は狭いので、次の札は出さない */
}
@media (prefers-reduced-motion: reduce) { .stSeg.now, .stSeg.stJust, .stRing.slam, .stNext.stBig { animation:none; } }

/* ════ D-404：じぶんのパネルを今の見た目に（2026-10-14） ════ */
#settingsBox .inner { border-radius:22px !important; clip-path:none !important; border:1px solid color-mix(in srgb, var(--ink) 9%, transparent) !important; overflow:auto;
  background:linear-gradient(170deg, color-mix(in srgb, var(--sk-c1, #ff3fa4) 14%, var(--card)) 0, var(--card) 150px) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 80px rgba(0,0,0,.5) !important; }
#settingsBox .prof-sec { border-top-color:color-mix(in srgb, var(--ink) 8%, transparent) !important; }
#settingsBox .prof-sec h3 { font-size:11px !important; letter-spacing:.14em; font-weight:800 !important; color:var(--sk-c2ink, var(--sk-c2, var(--sub))) !important; }
.prof-head img, .prof-head .letter { box-shadow:0 0 0 3px color-mix(in srgb, var(--sk-c1, #ff3fa4) 45%, transparent), 0 8px 20px rgba(0,0,0,.35); }
#profName { font-size:17px; }
.profStreak { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:12px; font-weight:700; color:var(--ink); }
.profStreak.hidden { display:none; }
.profStreak .stSvg { position:static; width:20px; height:20px; transform:rotate(-90deg); flex:none; }
.profStreak .stSeg { stroke-width:16; }
#profBalance { font-family:"Dela Gothic One", "M PLUS 1p", sans-serif; font-weight:400 !important; font-size:28px !important; color:var(--sk-c1, var(--gold)) !important; letter-spacing:.01em; }
.profUnits { font-size:13px; font-weight:700; color:var(--ink); margin-top:2px; }
.profUnits:empty { display:none; }
.profRefGain { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 10px; padding:12px 14px; border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--sk-c1, #ff3fa4) 12%, transparent), color-mix(in srgb, var(--sk-c2, #35e0f0) 10%, transparent)); border:1px solid color-mix(in srgb, var(--sk-c1, #ff3fa4) 30%, transparent); }
.profRefGain.hidden { display:none; }
.profRefGain > div { display:flex; align-items:center; gap:6px; }
.profRefGain b { font-size:15px; font-weight:900; color:var(--sk-c1, var(--gold)); white-space:nowrap; }
.profRefGain > div:nth-child(2) b { color:var(--sk-c2ink, var(--sk-c2, #35e0f0)); }
.profRefGain .ivWho { font-size:10.5px; padding:2px 8px; }
.profRefGain .ivWho.ivF { background:linear-gradient(135deg, var(--sk-c2, #35e0f0), #3c7cff); }
.profRefGain small { font-size:11px; color:var(--sub); }
.profRefGain button { margin-left:auto; padding:5px 12px !important; font-size:12px !important; }
#settingsBox button { border-radius:12px !important; clip-path:none !important; }
#settingsBox select, #settingsBox input { border-radius:12px !important; }
#profBalance { white-space:nowrap; font-size:clamp(20px, 7vw, 28px) !important; } /* 桁が多いとスマホで「コイ／ン」と折れていた */
/* ★隠す指定を勝たせる（2026-10-14 見直し）★ オーナーだけの欄（D-412）と、ボーナスの情報が無い人のボーナスの枠（D-403 の display:grid が .hidden より強かった） */
.tagOwner.hidden, #interrogateParts.hidden, #stampCard.hidden { display:none !important; }
/* ★友だちに教えるは読む画面なので、PC でも幅を絞って真ん中に（2026-10-14 オーナー「パソコンだと横に長くて見にくい」）★ 作る画面のために広げた幅（mk2・mk3）を使わない */
#tab-invite > .card { max-width:880px; margin-left:auto !important; margin-right:auto !important; }
@media (min-width:900px) { #tab-invite > .card { padding:28px 32px !important; } #inviteHero { padding:24px 28px 18px; } }

/* ── 必ず載せる LoRA（D-391・D-418・オーナーだけ） ── */
#forceLoraBox { grid-column:1 / -1; flex:1 1 100%; width:100%; min-width:0; margin-top:6px; }
#forceLoraBox .flChips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
#forceLoraBox button.flChip { width:auto; margin:0; padding:5px 10px; font-size:12px; border:1px solid var(--line) !important; border-radius:999px; background:var(--card) !important; color:var(--ink) !important; clip-path:none !important; }
#forceLoraBox button.flChip[aria-pressed="true"] { border-color:#ff8a3d !important; box-shadow:0 0 0 2px #ff8a3d; font-weight:700; }