/* ═══ 19zzn-feed.css ═══ サイトの外枠とホーム（2026-11-08、持ち主の最終ラフ）
   上の帯／左の帯／ホームの大きなカードとギミック／右の欄／ひまつぶし・ソフトの 2 列のカード／コミュニティの「投稿兼スレッド」。
   色は青（--ok）・黄（--irm）・緑（--good・--gem）。紫は少しだけ。絵文字は使わず、印は線の絵（下の --i-*）。
   動きは transform と opacity。見えない所・窓が隠れたとき（html.tabhid）・控えめ（html.mcalm）・OS の「視覚効果を減らす」で止まる。
   js：19zzn-feed.js */

:root{
  --shTop:58px;
  --fd-r:20px;
  --fd-ease:cubic-bezier(.2,.8,.2,1);
  /* 線の印（mask に使う。色は currentColor） */
  --i-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --i-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --i-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 4c4.97 0 9 3.36 9 7.5S16.97 19 12 19c-1.1 0-2.15-.16-3.12-.46L4 20l1.3-3.6C3.85 15.1 3 13.38 3 11.5 3 7.36 7.03 4 12 4z'/%3E%3Ccircle cx='8.5' cy='11.5' r='.9' fill='black'/%3E%3Ccircle cx='12' cy='11.5' r='.9' fill='black'/%3E%3Ccircle cx='15.5' cy='11.5' r='.9' fill='black'/%3E%3C/svg%3E");
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
  --i-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 1 1 12 0v5l1.6 2H4.4L6 16z'/%3E%3Cpath d='M10 20.5a2.2 2.2 0 0 0 4 0' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-share:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3.5M7.5 8 12 3.5 16.5 8'/%3E%3Cpath d='M5 12.5V19a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 19v-6.5'/%3E%3C/svg%3E");
  --i-snd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E");
  --i-mute:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M16 9.5l5 5M21 9.5l-5 5'/%3E%3C/svg%3E");
  --i-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z'/%3E%3C/svg%3E");
  --i-vote:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 4 4.5 12.5H9V20h6v-7.5h4.5z'/%3E%3C/svg%3E");
  --i-cm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5h15v10h-8l-4.5 3.5v-3.5H4.5z'/%3E%3C/svg%3E");
  --i-qt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10.5v6.5M14.5 10.5l3 3 3-3M17 17H6.5v-6.5M9.5 13.5l-3-3-3 3'/%3E%3C/svg%3E");
  --i-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20h-5.5v-5.5h-5V20H4z'/%3E%3C/svg%3E");
  --i-apps:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.6'/%3E%3C/svg%3E");
  --i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20c1.2-3.6 4.1-5.5 7.5-5.5s6.3 1.9 7.5 5.5'/%3E%3C/svg%3E");
  --i-save:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h11v16l-5.5-4-5.5 4z'/%3E%3C/svg%3E");
}

/* ═══════ 上の帯 ═══════ */
/* 下へ読み進めても上の帯は隠さない（2026-11-09、持ち主。19e-ux.js の uxHdScroll が付ける .hdhide を効かせない。左の帯もこの下に付いている） */
#top.hdhide{transform:none!important}
#top #topin{max-width:none;padding:9px 18px;gap:10px;align-items:center}
#nav{display:none!important}   /* 前の帯（ホーム／ソフト／…）は左の帯に入った */
#logo{margin:0;flex:none}
#sidebtn{display:none;flex:none;width:38px;height:38px;border-radius:12px;border:1px solid var(--line2);background:var(--sur);color:var(--tx);cursor:pointer;padding:0;place-items:center}
#sidebtn i,#sidex i{display:block;width:20px;height:20px;background:currentColor;-webkit-mask:var(--i-menu) center/contain no-repeat;mask:var(--i-menu) center/contain no-repeat}
html.sh-tuck #sidebtn{display:grid}
#sidebtn:hover{border-color:var(--ok);color:var(--ok)}
#purse{margin-left:auto}
#hdtools,#hdmain{display:flex;align-items:center;gap:6px;flex:none}
#hdmain{padding-left:10px;margin-left:4px;border-left:1px solid var(--line)}
/* 印だけの小さな釦：中の絵文字は見せず（font-size:0）、線の絵を出す */
#sharebtn,#soundbtn,#privbtn,#hdchat,#bell{position:relative;width:36px;height:36px;padding:0;border-radius:11px;border:1px solid transparent;background:transparent;color:var(--dim);cursor:pointer;font-size:0;line-height:0;display:grid;place-items:center;min-width:0;min-height:0;margin:0}
#bell[hidden],#privbtn[hidden]{display:none}
#sharebtn::before,#soundbtn::before,#hdchat::before,#bell::before{content:"";width:21px;height:21px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
#sharebtn{--ic:var(--i-share)}#soundbtn{--ic:var(--i-snd)}#soundbtn[aria-pressed="false"]{--ic:var(--i-mute)}#hdchat{--ic:var(--i-chat)}#bell{--ic:var(--i-bell)}
#privbtn{font-size:15px;line-height:1}
#sharebtn:hover,#soundbtn:hover,#hdchat:hover,#bell:hover{color:var(--tx);background:var(--sur2);border-color:var(--line2)}
#bell i{font-size:10.5px;line-height:16px;min-width:16px;height:16px;padding:0 4px;top:2px;right:1px;border-radius:999px}
#themebtn{margin-left:2px;height:32px;padding:0 12px;font-size:11.5px}
#hdnew{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 10px;border-radius:12px;border:1px solid var(--line2);background:var(--sur);color:var(--tx);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap}
#hdnew::before{content:"";width:19px;height:19px;background:currentColor;-webkit-mask:var(--i-plus) center/contain no-repeat;mask:var(--i-plus) center/contain no-repeat}
#hdnew:hover{border-color:var(--irm);color:var(--irm)}
@media (max-width:760px){
  #top #topin{padding:8px 10px;gap:6px}
  #hdtools #sharebtn,#themebtn{display:none}   /* 狭い画面はマイページから（共有はマイページ・表示モードは設定） */
  #hdmain{padding-left:2px;border-left:0;gap:2px}
  #hdnew span{display:none} #hdnew{padding:0;width:36px;justify-content:center} #hdnew::before{margin:0}
  #sidebtn{width:36px;height:36px}
  #logo{font-size:16px}
  #purse{gap:6px;font-size:10.5px}
  #purse>div{padding:0;gap:2px}
}
@media (max-width:380px){ #purse #gemv,#purse>div:nth-child(3){display:none} }
/* スマホの下の帯：絵文字ではなく線の印 */
#tabbar button[data-v] i{font-size:0;line-height:0;display:block;width:22px;height:22px;margin:0 auto 2px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
#tabbar button[data-v="games"]{--ic:var(--i-home)}#tabbar button[data-v="soft"]{--ic:var(--i-apps)}#tabbar button[data-v="home"]{--ic:var(--i-chat)}#tabbar button[data-v="me"]{--ic:var(--i-user)}

/* ═══════ 左の帯 ═══════ */
#side{position:fixed;left:0;top:var(--shTop);bottom:0;width:236px;z-index:30;display:none;flex-direction:column;
  padding:16px 14px 30px;overflow-y:auto;overflow-x:visible;overscroll-behavior:contain;
  background:var(--bg);border-right:1px solid var(--line)}
html.sh-side #side{display:flex}
/* スクロールの棒（2026-11-09、持ち主「色が浮いている」）：ふだんは地の色に溶かし、帯に乗せたときだけ細く出す。地と同じ色の溝で白い帯を出さない */
#side{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .2s}
#side:hover,#side:focus-within{scrollbar-color:color-mix(in srgb,var(--line2) 80%,transparent) transparent}
#side::-webkit-scrollbar{width:6px;background:transparent}
#side::-webkit-scrollbar-track{background:transparent}
#side::-webkit-scrollbar-thumb{background:transparent;border-radius:6px}
#side:hover::-webkit-scrollbar-thumb{background:var(--line2)}
/* たたむ釦（ラフの、帯の右上の丸） */
#sidex{position:absolute;right:10px;top:12px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);background:var(--bg);color:var(--dim);cursor:pointer;display:grid;place-items:center;padding:0;z-index:2}
#sidex i{width:16px;height:16px}
#sidex:hover{color:var(--tx);border-color:var(--ok)}
#side.sopen #sidex i{-webkit-mask-image:var(--i-x);mask-image:var(--i-x)}
.sdnav{display:grid;gap:2px;margin:2px 0 6px}
.sdi{display:flex;align-items:center;width:100%;padding:10px 14px;border:0;border-radius:12px;background:none;color:var(--tx);
  font:inherit;font-size:16px;font-weight:800;letter-spacing:.02em;text-align:left;cursor:pointer;position:relative;transition:background .16s,color .16s}
.sdi:hover{background:var(--sur2)}
.sdi.on{background:linear-gradient(90deg,color-mix(in srgb,var(--ok) 16%,transparent),transparent 85%)}
.sdi.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--ok),var(--good))}
.sdi.sm{font-size:13px;font-weight:700;padding:7px 14px;color:var(--dim)}
.sdi.sm:hover{color:var(--tx)}
.sdsec{border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.sdh{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;padding:2px 14px 8px;font-size:14.5px;font-weight:900;letter-spacing:.02em;white-space:nowrap}
.sdh small{font-size:10.5px;font-weight:700;color:var(--faint);letter-spacing:.08em}
.sdrank{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sdrank li.mute{font-size:12px;color:var(--faint);padding:6px 14px;line-height:1.6}
.sdrk{position:relative;display:grid;grid-template-columns:18px 44px minmax(0,1fr);align-items:center;gap:9px;width:100%;padding:7px 8px;border:0;border-radius:12px;background:none;color:var(--tx);font:inherit;text-align:left;cursor:pointer;transition:background .16s}
.sdrk:hover{background:var(--sur2)}
.sdrk i{font-style:normal;font:900 16px/1 var(--disp);color:var(--faint);text-align:center}
.sdrank li:nth-child(1) .sdrk i{color:var(--irm)}.sdrank li:nth-child(2) .sdrk i{color:#cfd8e6}.sdrank li:nth-child(3) .sdrk i{color:#e0a46a}
.sdth{position:relative;width:46px;height:29px;border-radius:7px;overflow:hidden;background:linear-gradient(135deg,var(--sur2),var(--line2));display:grid;place-items:center;font:900 13px var(--disp);color:var(--dim)}
.sdth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.sdrk b{font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 上がった・下がった・NEW の印は、小さな絵の右下に重ねる（名前を長く見せるため。2026-11-09） */
.sdrk em{position:absolute;left:62px;bottom:5px;font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.04em;line-height:1;padding:2px 4px;border-radius:5px;border:0;background:var(--bg);box-shadow:0 0 0 1px var(--line2)}
.sdrk em.up{color:var(--good)}.sdrk em.dn{color:var(--faint)}
.sdrank li.on .sdrk,.sdrk:focus-visible{background:var(--sur2)}
.sdall{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.sdall summary{list-style:none;cursor:pointer;padding:6px 14px;font-size:12.5px;font-weight:800;color:var(--dim);letter-spacing:.06em}
.sdall summary::-webkit-details-marker{display:none}
.sdall summary::after{content:"＋";float:right;color:var(--faint)}
.sdall[open] summary::after{content:"－"}
.sdall #sdall{display:grid;gap:0;margin-top:4px}
/* 引き出し（狭い画面・遊んでいる最中・自分でたたんだとき） */
html #side.sopen{display:flex;top:0;z-index:72;width:min(300px,86vw);box-shadow:12px 0 50px rgba(0,0,0,.45);padding-top:58px}
#sideback{position:fixed;inset:0;z-index:71;background:rgba(3,5,10,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* ═══════ 本文の位置（左の帯が出ているとき） ═══════ */
html.sh-side main{max-width:var(--shW,900px);margin-left:var(--shL,264px);margin-right:0}
html.sh-side #foot,html.sh-side .aboutmore{max-width:var(--shW,900px);margin-left:var(--shL,264px);margin-right:0}
/* ホームで右の欄があるとき：本文を 2 列に */
html.sh-rcol #v-games{display:grid;grid-template-columns:minmax(0,1fr) 312px;column-gap:28px;align-items:start}
html.sh-rcol #v-games>*{grid-column:1;min-width:0}
html.sh-rcol #v-games>#rcol{grid-column:2;grid-row:1 / span 60}
#v-games[hidden]{display:none!important}

/* ═══════ ホームの大きなカード ═══════ */
#hfeed{display:flex;flex-direction:column;gap:22px;margin:6px 0 24px}
#hfeed>.card,#hfeed>.hcwrap{margin:0}
.hcslot{display:grid;gap:14px}
.hcslot:empty{display:none}
.hc{position:relative;border-radius:var(--fd-r);overflow:hidden;background:var(--sur);border:1px solid var(--line2);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -24px rgba(0,0,0,.6);transition:border-color .2s,box-shadow .25s,transform .25s var(--fd-ease)}
.hc:hover{border-color:color-mix(in srgb,var(--ok) 45%,var(--line2));box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 26px 60px -28px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--ok) 18%,transparent)}
.hcmedia{position:relative;aspect-ratio:16/9;overflow:hidden;background:#05070b;isolation:isolate;cursor:pointer}
.hcshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform 7s var(--fd-ease),opacity .6s}
.hc:hover .hcshot{transform:scale(1.045)}
/* 題とキャッチコピー（絵の上に重ねる） */
.hctitle{position:absolute;left:0;right:0;top:0;z-index:4;padding:22px 24px 56px;color:#fff;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,6,11,.86) 0%,rgba(4,6,11,.5) 55%,transparent 100%)}
.hctitle h3{margin:0;font:900 clamp(24px,3.1vw,36px)/1.08 var(--disp);letter-spacing:.005em;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hccatch{margin:8px 0 0;font-family:var(--mincho,serif);font-weight:500;font-size:clamp(15px,1.7vw,19.5px);letter-spacing:.1em;line-height:1.5;opacity:.96;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hchint{position:absolute;right:12px;bottom:12px;z-index:4;font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:999px;
  background:rgba(4,6,11,.62);color:#e9f1fb;border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.hcfoot{padding:15px 22px 18px;display:grid;gap:8px}
.hcmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:20px}
.hckind{font-size:10.5px;font-weight:900;letter-spacing:.16em;color:var(--ok)}
.hcrank,.hccont,.hcnew{font-size:10.5px;font-weight:900;letter-spacing:.04em;padding:2px 9px;border-radius:999px;border:1px solid var(--line2)}
.hcrank{color:var(--irm);border-color:color-mix(in srgb,var(--irm) 45%,transparent);background:color-mix(in srgb,var(--irm) 10%,transparent)}
.hccont{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.hcnew{color:#071018;background:var(--good);border-color:transparent}
.hcrank[hidden],.hccont[hidden],.hcnew[hidden]{display:none}
.hcdesc{margin:0;font-size:13.5px;line-height:1.8;color:var(--dim)}
.hcact{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.hcact .btn{min-width:120px}

/* SANDBOX & SANDBOX＋：ラフどおり、題とキャッチコピーが上、その下に横長の小さなプレイ画面 */
.hctop>.hctitle{position:static;padding:22px 24px 12px;color:var(--tx);background:none}
.hctop>.hctitle h3{text-shadow:none}
.hctop>.hctitle .hccatch{text-shadow:none;color:var(--dim)}
.hcsand .hcmedia{aspect-ratio:auto;height:clamp(150px,19vw,200px);margin:0 18px;border-radius:14px;border:1px solid var(--line2);cursor:crosshair;background:#0a1120}
.hcmini{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;opacity:0;transition:opacity .6s;z-index:1}
.hcmini.live{opacity:1}
/* 本物の小窓（各ゲームの ?mini=1）。描けるまではスクショ、描けたら重ねる */
.hcreal{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;opacity:0;transition:opacity .6s;z-index:1;background:#05070b}
.hcreal.live{opacity:1}
.pv-real .hcmedia{cursor:crosshair;margin:0 18px;border-radius:14px;border:1px solid var(--line2)}
@media (max-width:760px){ .pv-real .hcmedia{margin:0 12px;aspect-ratio:4/3} }
.hcmedia.live .hcshot{opacity:0}
.hcmat{position:absolute;left:10px;bottom:10px;z-index:5;display:flex;gap:6px}
.hcmat button{height:28px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(4,6,11,.62);color:#e9f1fb;font:inherit;font-size:12px;font-weight:800;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hcmat button[data-mm="sand"].on{background:#d9b45f;color:#1b1406;border-color:transparent}
.hcmat button[data-mm="water"].on{background:#4aa6ff;color:#06121f;border-color:transparent}
.hcmat button[data-mm="reset"]{opacity:.8}

/* カーソルの光（EXFIL・S3D・ANBASCOP）：暗がりに丸い穴が空いて、そこだけ見える。穴は transform で動かす */
.hclight{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hclight i{position:absolute;left:0;top:0;width:100%;height:100%;transform:translate3d(58%,46%,0)}
.hclight i::before{content:"";position:absolute;left:-1000px;top:-1000px;width:2000px;height:2000px;border-radius:50%;
  background:radial-gradient(circle at center,rgba(2,3,6,0) 0,rgba(2,3,6,0) 78px,rgba(2,3,6,.62) 150px,rgba(2,3,6,.9) 300px)}
.hclight i::after{content:"";position:absolute;left:-120px;top:-120px;width:240px;height:240px;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle at center,rgba(255,222,150,.26) 0,rgba(255,222,150,.08) 45%,transparent 70%)}
.pv-light .hcmedia{cursor:none}
.pv-light .hcmedia.lit .hclight i{transition:transform .08s linear}

/* EXFIL・S3D：見た目だけの簡易版（19zzn-minis.js が canvas に描く）。下に敷いたスクショの上に重ねる */
.mcv{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;cursor:crosshair;touch-action:pan-y;background:transparent}
.mcv3{image-rendering:auto;cursor:none}
.pv-exmini .hcmedia,.pv-s3mini .hcmedia{background:#05070b}
.pv-s3mini .hchint{right:auto;left:12px;bottom:34px}   /* 右下は銃なので、案内は左へ */

/* URG_RNG：見た目だけの簡易版。空（色が移る）・光の筋・相の札・「観測する」・本物の相と確率のルーレット */
.ugsky{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(120% 90% at 40% 0,var(--s2,#141a33) 0,var(--s1,#070912) 70%);transition:background .9s}
.ugsky::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 34% 46%,color-mix(in srgb,var(--sa,#6f7db5) 22%,transparent),transparent 70%);transition:background .9s}
.ugrays{position:absolute;left:34%;top:46%;width:180%;aspect-ratio:1;translate:-50% -50%;opacity:.55;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--sa,#6f7db5) 26%,transparent) 0deg 4deg,transparent 4deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%)}
.ugdust{position:absolute;inset:-20%;opacity:.7;background-image:radial-gradient(1.5px 1.5px at 12% 30%,#fff8,transparent),radial-gradient(1px 1px at 28% 72%,#fff7,transparent),radial-gradient(1.5px 1.5px at 46% 18%,#fff6,transparent),
  radial-gradient(1px 1px at 63% 54%,#fff8,transparent),radial-gradient(1.5px 1.5px at 81% 26%,#fff6,transparent),radial-gradient(1px 1px at 90% 80%,#fff7,transparent),radial-gradient(1px 1px at 8% 88%,#fff6,transparent)}
.ugcard{position:absolute;z-index:3;left:6%;top:31%;width:min(42%,320px);padding:14px 16px 13px;border-radius:14px;text-align:center;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,30,30,.55),rgba(10,16,20,.72));border:1px solid color-mix(in srgb,var(--au,#79c96a) 65%,transparent);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 26px color-mix(in srgb,var(--au,#79c96a) 30%,transparent),0 14px 30px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ugtier{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;color:color-mix(in srgb,var(--au,#79c96a) 70%,#fff)}
.ugname{display:block;margin:4px 0 2px;font-family:var(--mincho,serif);font-weight:700;font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:.06em;color:#f4f7ee;text-shadow:0 0 18px color-mix(in srgb,var(--au,#79c96a) 60%,transparent)}
.ugodds{display:block;font:800 clamp(12px,1.4vw,15px) var(--disp);letter-spacing:.3em;color:color-mix(in srgb,var(--au,#79c96a) 55%,#fff)}
.ugnew{position:absolute;right:8px;top:7px;font-style:normal;font-size:9px;font-weight:900;letter-spacing:.1em;padding:1px 6px;border-radius:4px;color:var(--au,#79c96a);border:1px solid currentColor}
.ugbtn{position:absolute;z-index:3;left:calc(6% + min(21%,160px));top:calc(31% + 128px);translate:-50% 0;padding:9px 30px 7px;border-radius:999px;text-align:center;cursor:pointer;
  background:linear-gradient(180deg,#1d4a52,#0f2b32);border:1px solid rgba(120,220,220,.45);box-shadow:0 0 18px rgba(80,200,210,.25);color:#e6fbff;font:900 14px var(--disp);letter-spacing:.18em;white-space:nowrap}
.ugbtn small{display:block;font-size:9px;letter-spacing:.2em;opacity:.7;font-weight:700}
.ugskyl{position:absolute;right:14px;top:14px;z-index:4;font-size:11px;font-weight:800;letter-spacing:.08em;padding:4px 10px;border-radius:999px;color:#e9f1fb;background:rgba(4,6,11,.55);border:1px solid rgba(255,255,255,.14)}
.pv-roulette.spin .ugcard{border-color:rgba(255,255,255,.25)}
.rlt{position:absolute;z-index:3;right:5%;top:58%;width:min(38%,290px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
.rltw{position:absolute;inset:0;border-radius:50%;will-change:transform;transform:rotate(var(--rot,0deg));
  box-shadow:0 0 0 5px rgba(10,14,24,.85),0 0 0 7px rgba(200,220,255,.35),0 24px 60px rgba(0,0,0,.65),inset 0 0 0 1px rgba(0,0,0,.25)}
.rltw::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.28),transparent 45%),radial-gradient(circle,transparent 62%,rgba(0,0,0,.25) 100%)}
.rltl{position:absolute;inset:0;pointer-events:none;transform:rotate(var(--a,0deg))}
.rltl b{position:absolute;left:50%;top:8%;transform:translateX(-50%);writing-mode:vertical-rl;font:900 clamp(11px,1.35vw,15px)/1 var(--disp);letter-spacing:.08em;color:rgba(8,12,22,.82)}
.rltp{position:absolute;left:50%;top:-5%;z-index:2;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:22px solid #ffd76a;transform:translateX(-50%);filter:drop-shadow(0 3px 5px rgba(0,0,0,.65))}
.rltc{position:absolute;left:50%;top:50%;z-index:2;width:28%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 35%,#26304a,#0a0e18 75%);box-shadow:0 0 0 3px rgba(200,220,255,.3),0 6px 16px rgba(0,0,0,.5);color:#d6e6ff;font:900 clamp(11px,1.3vw,14px) var(--disp);letter-spacing:.12em}
.pv-roulette.rare .rltw{box-shadow:0 0 0 5px rgba(10,14,24,.85),0 0 0 7px #ffd76a,0 0 50px rgba(255,215,106,.55),0 24px 60px rgba(0,0,0,.65)}
.pv-roulette.rare .ugcard{box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 44px color-mix(in srgb,var(--au) 60%,transparent),0 14px 30px rgba(0,0,0,.45)}
@media (max-width:760px){
  .pv-roulette .hcmedia{aspect-ratio:4/3}
  .ugcard{left:4%;top:34%;width:50%;padding:10px 10px 9px}
  .ugbtn{left:calc(4% + 25%);top:calc(34% + 104px);padding:7px 20px 6px;font-size:12px}
  .rlt{width:42%;right:3%;top:64%}
}

/* RNG（URG_RNG・ゲーセン）：光がかすめる。押すと弾ける */
.pv-rng .hcmedia::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:40%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.14) 50%,transparent 100%);transform:translate3d(-120%,0,0) skewX(-12deg)}
.hcflash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 55%,rgba(255,214,120,.55),rgba(95,208,255,.18) 40%,transparent 70%)}

/* TRPG：2d6 */
.pv-dice .hcmedia{display:grid;place-items:center;background:radial-gradient(110% 90% at 50% 40%,#17402c 0,#0c2018 60%,#06100b 100%)}
.pv-dice .hcmedia::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px);pointer-events:none}
.hcdice{position:relative;z-index:1;display:flex;gap:26px;margin-top:40px}
.dz{display:block;width:clamp(64px,9vw,92px);aspect-ratio:1;border-radius:22%;background-color:#f4f6fa;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.12),inset 0 2px 0 #fff,0 14px 24px rgba(0,0,0,.45);--p:#1c2230;--r:9%}
.dz[data-v="1"]{background-image:radial-gradient(circle at 50% 50%,#c8202e var(--r),transparent calc(var(--r) + .5%))}
.dz[data-v="2"]{background-image:radial-gradient(circle at 27% 27%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 73% 73%,var(--p) var(--r),transparent calc(var(--r) + .5%))}
.dz[data-v="3"]{background-image:radial-gradient(circle at 25% 25%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 50% 50%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 75% 75%,var(--p) var(--r),transparent calc(var(--r) + .5%))}
.dz[data-v="4"]{background-image:radial-gradient(circle at 28% 28%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 72% 28%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 28% 72%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 72% 72%,var(--p) var(--r),transparent calc(var(--r) + .5%))}
.dz[data-v="5"]{background-image:radial-gradient(circle at 27% 27%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 73% 27%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 50% 50%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 27% 73%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 73% 73%,var(--p) var(--r),transparent calc(var(--r) + .5%))}
.dz[data-v="6"]{background-image:radial-gradient(circle at 28% 24%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 72% 24%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 28% 50%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 72% 50%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 28% 76%,var(--p) var(--r),transparent calc(var(--r) + .5%)),radial-gradient(circle at 72% 76%,var(--p) var(--r),transparent calc(var(--r) + .5%))}
.hcsum{position:absolute;left:24px;bottom:16px;z-index:2;font:900 15px var(--disp);letter-spacing:.08em;color:#d8f5e4}

/* ゲーセン：3 つのリール（目押し） */
.pv-slot .hcmedia{display:grid;place-items:center;background:radial-gradient(120% 100% at 50% 0,#3b2a07 0,#1a1206 45%,#0a0805 100%)}
.pv-slot .hcmedia::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,194,71,.06) 0 1px,transparent 1px 22px),radial-gradient(60% 40% at 50% 100%,rgba(255,194,71,.18),transparent 70%)}
.hcslots{position:relative;z-index:1;display:flex;gap:12px;margin-top:46px;padding:14px;border-radius:20px;
  background:linear-gradient(180deg,#2a1e06,#120c04);border:1px solid rgba(255,194,71,.45);box-shadow:0 0 0 4px rgba(255,194,71,.08),0 18px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.reel{position:relative;width:clamp(70px,10vw,104px);height:clamp(70px,10vw,104px);overflow:hidden;border-radius:12px;
  background:linear-gradient(180deg,#d8dbe2 0,#fbfcfe 22%,#fbfcfe 78%,#c9ccd4 100%);box-shadow:inset 0 6px 10px rgba(0,0,0,.25),inset 0 -6px 10px rgba(0,0,0,.25)}
.reel::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(200,30,46,.35);pointer-events:none}
.strip{display:flex;flex-direction:column;will-change:transform}
.sy{flex:none;display:grid;place-items:center;height:clamp(70px,10vw,104px);font:900 clamp(30px,4.4vw,46px)/1 var(--disp);letter-spacing:-.02em}
.sy-7{color:#d8202e;text-shadow:0 2px 0 #7a0d16}
.sy-bar{font-size:clamp(17px,2.4vw,24px);color:#fff;background:linear-gradient(#1c2230,#1c2230) center/86% 44% no-repeat;letter-spacing:.06em}
.sy-irm{font-size:clamp(18px,2.6vw,26px);color:#b07a00}
.sy-dia{color:#2f86e6}
.sy-star{color:#e0a000}
.sy-inf{color:#1e9e5a}
.pv-slot .hcsum{color:#ffe3a3}
.pv-slot.win .hcslots{border-color:#ffd76a;box-shadow:0 0 0 4px rgba(255,215,106,.25),0 0 46px rgba(255,194,71,.45),0 18px 40px rgba(0,0,0,.55)}

/* ひまつぶし：作品のスクショを敷きつめる */
.hcmosaic{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:3px;background:#05070b}
.hcmosaic img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform 6s var(--fd-ease)}
.hc:hover .hcmosaic img{transform:scale(1.07)}

/* コミュニティ：本物の投稿が流れる */
.pv-feed .hcmedia{background:radial-gradient(120% 90% at 80% 0,#15324a 0,#0b1520 60%,#070b12 100%)}
.hcfeed{position:absolute;inset:0;padding:112px 24px 18px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 22%,#000 40%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent 22%,#000 40%,#000 88%,transparent)}
.hcfeed ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hcfeed li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:9px 14px;font-size:13px;line-height:1.6;color:#e6edf7;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcfeed li b{color:var(--ok);margin-right:8px;font-weight:800}
.hcfeed li.mute{color:#9fb0c6;cursor:default}

/* 「はじめての人へ」の小さな絵 */
#first3 .f3:has(i.f3shot){grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:start;row-gap:3px;padding:10px}
#first3 .f3 i.f3shot{grid-row:auto;display:block;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--sur2);margin-bottom:5px;font-size:0;align-self:start}
#first3 .f3 i.f3shot img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .6s var(--fd-ease)}
#first3 .f3:hover i.f3shot img{transform:scale(1.06)}

/* 広告の入る所（枠 ID をもらうまでは出さない。?adcheck で場所だけ見える） */
.fdad{display:none}
html.adcheck .fdad{display:grid;place-items:center;min-height:120px;border:1px dashed var(--line2);border-radius:var(--fd-r);color:var(--faint);font-size:12px;letter-spacing:.06em;padding:12px;text-align:center}

/* ═══════ 右の欄 ═══════ */
#rcol{display:none}
html.sh-rcol #rcol{display:flex;flex-direction:column;gap:16px;padding-top:4px}
.rc{background:var(--sur);border:1px solid var(--line2);border-radius:18px;padding:16px 18px}
.rc h4{margin:0 0 10px;display:flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:900;letter-spacing:.02em}
.rc h4 small{font-size:10.5px;font-weight:700;color:var(--faint);letter-spacing:.06em}
.rchello{background:linear-gradient(160deg,color-mix(in srgb,var(--ok) 10%,var(--sur)) 0,var(--sur) 70%)}
.rchi{font-size:12.5px;font-weight:800;color:var(--dim);letter-spacing:.12em}
.rcname{display:block;margin:2px 0 4px;font:900 25px/1.2 var(--disp);cursor:pointer;width:fit-content;
  background:linear-gradient(90deg,var(--ok),var(--good));-webkit-background-clip:text;background-clip:text;color:transparent}
.rcsub{font-size:12px;color:var(--dim);margin-bottom:6px}
.rchello #dashlv{margin-top:10px}
.rchello #dashlv .dcard{background:none;border:0;padding:0;margin:0;box-shadow:none}
.rctick{position:relative;height:236px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent)}
.rctick ul{list-style:none;margin:0;padding:0}
.rctick li{padding:10px 2px;border-bottom:1px dashed var(--line);cursor:pointer}
.rctick li:hover b{color:var(--ok)}
.rctick li b{display:block;font-size:13px;font-weight:700;line-height:1.55;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rctick li span{display:flex;gap:10px;font-size:11px;color:var(--faint);margin-top:2px}
.rctick li em{font-style:normal}
.rctick li.mute{cursor:default;color:var(--faint);font-size:12.5px;border:0}
.rcplay ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rcplay li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 4px;border-radius:10px;font-size:13.5px}
.rcplay li:nth-child(odd){background:color-mix(in srgb,var(--sur2) 60%,transparent)}
.rcplay li i{font-style:normal;font:900 16px/1 var(--disp);color:var(--faint);text-align:center}
.rcplay li:nth-child(1) i{color:var(--irm)}.rcplay li:nth-child(2) i{color:#cfd8e6}.rcplay li:nth-child(3) i{color:#e0a46a}
.rcplay li b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcplay li em{font-style:normal;font-size:11.5px;color:var(--dim);font-weight:700}
.rcplay li.mute,.rctick li.mute{display:block;background:none;font-size:12.5px;color:var(--faint);line-height:1.6}
.rclv #dashms .dcard,.rclv #dash .dcard{background:none;border:0;padding:0;margin:0 0 10px;box-shadow:none}
.rclv #dash .rkmini{display:none}   /* タイピングの世界ランキングは長い。右の欄では今日のイベントだけ */
#railslot{width:160px;height:616px;margin:0 auto}
html:not(.hastall) #railslot,html.norail #railslot{display:none}

/* ═══════ ひまつぶし・ソフト：2 列のカード（ラフ「ゲームとスクショまたはギミックとキャッチコピー＆簡単な説明」） ═══════ */
#v-arc .arcgrid,#softgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#softgrid{display:grid;margin:8px 0 20px}
#v-arc .arccard,#softgrid .arccard{flex-direction:row;align-items:stretch;min-height:118px;border-radius:16px}
#v-arc .arccard .acart,#softgrid .arccard .acart{width:42%;max-width:230px;height:auto;min-height:118px;flex:none;background:linear-gradient(135deg,var(--c1,#2a3a5e),var(--c2,#151922))}
#v-arc .arccard .acart::before,#softgrid .arccard .acart::before{display:none}
.acini{position:absolute;inset:0;display:grid;place-items:center;font:900 36px var(--disp);color:rgba(255,255,255,.82);text-shadow:0 4px 16px rgba(0,0,0,.4)}
.arccard .acart img,.ahcard .ahart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .6s var(--fd-ease)}
.arccard:hover .acart img{transform:scale(1.07)}
#v-arc .arccard .acbody,#softgrid .arccard .acbody{padding:12px 14px 12px;gap:4px;min-width:0}
#v-arc .arccard .acbody b,#softgrid .arccard .acbody b{font-size:15.5px;font-weight:900}
.accatch{font-style:normal;display:block;font-family:var(--mincho,serif);font-size:13px;font-weight:500;letter-spacing:.06em;line-height:1.5;color:var(--tx)}
#v-arc .arccard .acbody>span,#softgrid .arccard .acbody>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px}
.archero .ahcard .ahart{position:relative;width:104px;height:66px;flex:none;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.25);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.archero .ahcard .ahart .acini{font-size:24px}
@media (max-width:640px){
  #v-arc .arcgrid,#softgrid{grid-template-columns:minmax(0,1fr)}
  #v-arc .arccard .acart,#softgrid .arccard .acart{width:40%}
}

/* ═══════ コミュニティ：投稿兼スレッド（ラフ：題・説明・画像、押すとスレッドの頁。投票・コメントの数・共有・引用） ═══════ */
#grid .post.xp{background:none;border:0;border-bottom:1px dashed var(--line2);border-radius:0;padding:18px 6px 16px;transition:background .18s}
#grid .post.xp:hover{background:color-mix(in srgb,var(--sur2) 55%,transparent)}
#grid .post.xp .xttl{font:900 clamp(18px,2.2vw,23px)/1.3 var(--disp);margin:4px 0 6px;letter-spacing:.01em}
#grid .post.xp .xbody{font-size:14px;line-height:1.85}
#grid .post.xp .xbody img{border-radius:14px}
.xacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.xacts .xa{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--sur2);border:1px solid transparent;color:var(--dim);font-size:12.5px;font-weight:800;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.xacts .xa b{font-weight:900;color:var(--tx)}
.xacts .xa:hover{color:var(--tx);border-color:var(--line2)}
.xacts .xa i{font-style:normal;width:17px;height:17px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.xa i.ic-vote{--ic:var(--i-vote)}.xa i.ic-cm{--ic:var(--i-cm)}.xa i.ic-share{--ic:var(--i-share)}.xa i.ic-qt{--ic:var(--i-qt)}.xa i.ic-save{--ic:var(--i-save)}
.xacts .xa.lk.on{color:#ffb04a;background:color-mix(in srgb,var(--irm) 14%,transparent);border-color:color-mix(in srgb,var(--irm) 40%,transparent)}
.xacts .xa.lk.on b{color:var(--irm)}
.xacts .xa.rp.on{color:var(--good)}
.xacts .xa.bm{padding:0 10px;margin-left:auto}
.xacts .xa.bm.on{color:var(--ok)}
.xacts .xa.bm.on i{-webkit-mask-image:var(--i-save);mask-image:var(--i-save);background:var(--ok)}

/* ═══════ マイページのアイコン（03-account.js の meAvatarHTML） ═══════ */
#acctbox .meav .xav{width:46px;height:46px;flex:none;font-size:19px;border-radius:50%;box-shadow:0 0 0 2px var(--sur),0 0 0 3px color-mix(in srgb,var(--ok) 55%,transparent)}
#acctbox .meav .xav img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#acctbox .meavbtn{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#acctbox .meavpick{margin:2px 0 4px 74px}
#acctbox .meavhint{margin:2px 0 8px 74px}
@media (max-width:480px){ #acctbox .meavpick,#acctbox .meavhint{margin-left:0} }

/* ═══════ 狭い画面 ═══════ */
@media (max-width:760px){
  #hfeed{gap:16px}
  .hc{border-radius:16px}
  .hctitle{padding:16px 16px 44px}
  .hcfoot{padding:12px 15px 15px}
  .hctop>.hctitle{padding:16px 16px 10px}
  .hcsand .hcmedia{margin:0 12px;height:150px}
  .hcact .btn{min-width:0;flex:1}
  .hcopen{display:none}
  .hcfeed{padding-top:96px}
  .hcdice{gap:18px;margin-top:30px}
  .rc{border-radius:16px}
}

/* ═══════ 動き（控えめ・OS の設定・窓が隠れたときは止める） ═══════ */
@media (prefers-reduced-motion:no-preference){
html:not(.mcalm){
  .pv-light .hcmedia:not(.lit) .hclight i{animation:hc-sweep 10s ease-in-out infinite alternate}
  .pv-rng .hcmedia::after{animation:hc-shine 5.2s ease-in-out infinite}
  .hcflash.go{animation:hc-flash .7s ease-out}
  .ugrays{animation:ug-rot 70s linear infinite}
  .ugdust{animation:ug-dust 26s linear infinite}
  .ugcard.pop{animation:ug-pop .55s cubic-bezier(.2,1.4,.4,1)}
  .ugskyl.pop{animation:ug-pop .55s cubic-bezier(.2,1.4,.4,1)}
  &.tabhid .ugrays,&.tabhid .ugdust{animation-play-state:paused}
  .pv-pan .hcshot{animation:hc-pan 26s ease-in-out infinite alternate}
  .dz.roll{animation:hc-roll .55s cubic-bezier(.2,.75,.3,1.3)}
  .dz:nth-child(2).roll{animation-duration:.62s}
  .hcfeed ul{animation:hc-up 30s linear infinite alternate}
  .rctick ul.run{animation:rc-tick var(--tk,40s) linear infinite}
  .rctick:hover ul.run{animation-play-state:paused}
  &.tabhid .hclight i,&.tabhid .hcmedia::after,&.tabhid .hcshot,&.tabhid .hcfeed ul,&.tabhid .rctick ul{animation-play-state:paused!important}
  #side.sopen{animation:sd-in .26s var(--fd-ease)}
  #sideback{animation:sd-fade .26s}
}
}
@keyframes ug-rot{to{transform:rotate(360deg)}}
@keyframes ug-dust{from{transform:translate3d(0,0,0)}to{transform:translate3d(-8%,-14%,0)}}
@keyframes ug-pop{0%{transform:scale(.92);opacity:.4}60%{transform:scale(1.04);opacity:1}100%{transform:none}}
@keyframes hc-sweep{0%{transform:translate3d(22%,52%,0)}35%{transform:translate3d(48%,32%,0)}70%{transform:translate3d(70%,60%,0)}100%{transform:translate3d(84%,38%,0)}}
@keyframes hc-shine{0%,55%{transform:translate3d(-120%,0,0) skewX(-12deg)}100%{transform:translate3d(420%,0,0) skewX(-12deg)}}
@keyframes hc-flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes hc-pan{from{transform:scale(1.04) translate3d(-1.5%,0,0)}to{transform:scale(1.12) translate3d(2%,-1.5%,0)}}
@keyframes hc-roll{0%{transform:translate3d(0,0,0) rotate(0)}45%{transform:translate3d(0,-30px,0) rotate(210deg)}100%{transform:translate3d(0,0,0) rotate(360deg)}}
@keyframes hc-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-38%,0)}}
@keyframes rc-tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes sd-in{from{transform:translate3d(-100%,0,0)}to{transform:none}}
@keyframes sd-fade{from{opacity:0}to{opacity:1}}