/* SKTL GAME ホーム(P2 v2・2026-10-12)。配色は既定が生成り+墨+朱1色(B)。?theme=a|b|c で切替(a=紺+金・c=黒+ネオン)。   全ボタン・バナーは同じ枠(角3px・罫1px・同じ影・内側の細罫)。画像は filter と一色のかぶせで色味をそろえる */
:root{--hm-bg:#efeadd;--hm-fg:#1d2025;--hm-dim:#5b5f66;--hm-rule:#1d2025;--hm-in:rgba(29,32,37,.35);--hm-acc:#c8372d;--hm-tint:#cdbf9e;--hm-tintop:0;--hm-shadow:rgba(29,32,37,.28);--hm-panel:rgba(255,255,255,.45);--hm-logo:none;--hm-photo:#e2dac4;--hm-grain:.35}
:root[data-theme="a"]{--hm-bg:#0e1a30;--hm-fg:#ece5d2;--hm-dim:#a8afbd;--hm-rule:#b8964e;--hm-in:rgba(184,150,78,.45);--hm-acc:#b8964e;--hm-tint:#1c2f58;--hm-tintop:.32;--hm-shadow:rgba(0,0,0,.55);--hm-panel:rgba(255,255,255,.04);--hm-logo:invert(1) sepia(.35) brightness(.95);--hm-photo:#16254a;--hm-grain:.5}
:root[data-theme="c"]{--hm-bg:#0b0b0c;--hm-fg:#ececec;--hm-dim:#9b9b9f;--hm-rule:#34343a;--hm-in:rgba(255,255,255,.14);--hm-acc:#19e3ff;--hm-tint:#202026;--hm-tintop:.3;--hm-shadow:rgba(0,0,0,.7);--hm-panel:rgba(255,255,255,.03);--hm-logo:invert(1);--hm-photo:#17171a;--hm-grain:.45}
.app:has(#scTitle:not([hidden])){background-color:var(--hm-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
html:has(#scTitle:not([hidden])){background:var(--hm-bg)}
body:has(#scTitle:not([hidden])){background:var(--hm-bg)}
#scTitle{padding:14px 14px 18px;text-align:center;color:var(--hm-fg)}
#scTitle .logo img{width:240px;max-width:68%;height:auto;filter:var(--hm-logo)}
.hm-name{margin:10px 0 0;text-align:left;font-size:24px;font-weight:900;letter-spacing:.05em;line-height:1.3;border-bottom:2px solid var(--hm-acc);padding-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-prof{display:flex;gap:12px;align-items:stretch;margin:12px 0 0;text-align:left;border:1px solid var(--hm-rule);border-radius:3px;padding:8px;background:var(--hm-panel);box-shadow:0 2px 0 var(--hm-shadow)}
.hm-photo{flex:0 0 84px;width:84px;height:84px;border:1px solid var(--hm-rule);border-radius:3px;background:var(--hm-photo);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900;color:var(--hm-dim)}
.hm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hm-stats{flex:1;min-width:0;margin:0;font-size:15px;line-height:1.5;display:flex;flex-direction:column;justify-content:center}
.hm-stats div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--hm-in);padding:3px 0}
.hm-stats div:last-child{border-bottom:0}
.hm-stats dt{margin:0;color:var(--hm-dim);white-space:nowrap;font-size:13px;align-self:center}
.hm-stats dd{margin:0;font-weight:900;white-space:nowrap;font-size:16px;font-variant-numeric:tabular-nums}
.hm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 0}
.hm-banners{display:grid;gap:10px;margin:10px 0 0}
/* 全部同じ枠 */
.hm-tile,.hm-banner{display:block;padding:0;margin:0;border:1px solid var(--hm-rule);border-radius:3px;background:var(--hm-tint);overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;position:relative;box-shadow:0 2px 0 var(--hm-shadow);-webkit-user-select:none;user-select:none;touch-action:manipulation;isolation:isolate}
.hm-tile{aspect-ratio:1/1;width:100%}
.hm-tile img,.hm-banner img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.hm-banner img{height:auto}
.hm-tile::before,.hm-banner::before{content:"";position:absolute;inset:3px;border:1px solid var(--hm-in);border-radius:1px;z-index:2;pointer-events:none}
.hm-tile:active,.hm-banner:active{transform:translateY(1px);box-shadow:0 1px 0 var(--hm-shadow);filter:brightness(.82)}
.hm-tile:focus-visible,.hm-banner:focus-visible{outline:3px solid var(--hm-acc);outline-offset:2px}
#scTitle .acct-line{margin:10px 0 0;max-width:none;text-align:left;color:var(--hm-dim)}
#scTitle .note{max-width:none;margin:14px 0 0;color:var(--hm-dim);border-top:1px solid var(--hm-in)}
.hm-jisseki{margin:12px auto 0;width:min(72%,260px)}
@media (hover:hover){.hm-tile:hover,.hm-banner:hover{filter:brightness(1.08)}}
@media (prefers-reduced-motion:reduce){.hm-tile:active,.hm-banner:active{transform:none}}
/* 背の低い画面(360x640・375x667)は1画面に収める */
@media (max-height:700px){
#scTitle{padding:8px 14px 8px}
#scTitle .logo img{width:150px}
.hm-name{margin-top:4px;font-size:20px;padding-bottom:2px}
.hm-prof{margin-top:8px;padding:6px;gap:10px}
.hm-photo{flex-basis:58px;width:58px;height:58px;font-size:24px}
.hm-stats{font-size:13px;line-height:1.3}
.hm-stats div{padding:1px 0}
.hm-stats dt{font-size:12px}.hm-stats dd{font-size:14px}
.hm-grid{gap:6px;margin-top:8px}
.hm-banners{gap:6px;margin-top:6px}
.hm-banner{aspect-ratio:4.4/1}.hm-banner img{height:100%;object-fit:cover}
#scTitle .note{display:none}
#scTitle .acct-line{margin-top:4px}
}