/* =========================================================
   SHOCKER v62 — 商品版ホーム / キャラクター名鑑
   実在のキャラクター、トランプ、宝石の型をUIの中心に置く。
   ========================================================= */

/* ---------- HOME : SHOCKERの世界観を直接見せる ---------- */
#home-screen.v62-shocker-home {
    --v62-gold:#d9b766;
    --v62-gold-bright:#ffe6a1;
    --v62-ink:#050608;
    --v62-wine:#4c1018;
    --v62-teal:#0b2930;
    overflow:auto !important;
    color:#f3e5bd !important;
    background:
        radial-gradient(ellipse at 73% 31%, rgba(43,107,119,.28), transparent 29%),
        radial-gradient(ellipse at 24% 35%, rgba(128,25,36,.28), transparent 32%),
        linear-gradient(118deg,#030406 0 47%,#11070a 47.2% 63%,#051316 100%) !important;
    font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif !important;
}
#home-screen.v62-shocker-home::before {
    content:"" !important;
    position:fixed !important;
    inset:-18% !important;
    opacity:.24 !important;
    pointer-events:none !important;
    background:
        repeating-conic-gradient(from 45deg at 50% 50%,transparent 0 10deg,rgba(255,255,255,.035) 10.2deg 10.6deg,transparent 10.8deg 22deg),
        repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.022) 6px) !important;
    box-shadow:none !important;
    animation:v62-home-texture-drift 18s linear infinite !important;
}
#home-screen.v62-shocker-home::after {
    content:"♠   ♥   ♦   ♣" !important;
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    bottom:auto !important;
    width:auto !important;
    height:auto !important;
    transform:translate(-50%,-50%) rotate(-8deg) !important;
    border:0 !important;
    clip-path:none !important;
    opacity:.035 !important;
    color:#fff !important;
    background:none !important;
    font:900 clamp(80px,17vw,250px)/1 Georgia,serif !important;
    letter-spacing:.18em !important;
    white-space:nowrap !important;
    pointer-events:none !important;
}

#home-screen.v62-shocker-home .home-fog {
    position:fixed !important;
    background:
        linear-gradient(104deg,transparent 0 34%,rgba(255,235,185,.035) 47%,transparent 58%),
        radial-gradient(ellipse at 52% 100%,rgba(217,183,102,.11),transparent 55%) !important;
    mix-blend-mode:screen;
}
#home-screen.v62-shocker-home .home-grain {
    position:fixed !important;
    opacity:.055 !important;
}
#home-screen.v62-shocker-home .home-shell {
    width:min(100%,1600px) !important;
    min-height:100% !important;
    height:auto !important;
    margin:0 auto !important;
    padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)) !important;
}
#home-screen.v62-shocker-home .home-topbar {
    position:relative;
    z-index:20;
    min-height:72px;
    padding:0 0 11px !important;
    border-bottom:1px solid rgba(217,183,102,.43) !important;
}
#home-screen.v62-shocker-home .home-topbar::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:min(36vw,430px);
    height:3px;
    background:linear-gradient(90deg,var(--v62-gold-bright),var(--v62-gold),transparent);
    box-shadow:0 0 13px rgba(217,183,102,.48);
}
#home-screen.v62-shocker-home .home-brand-small {
    color:#a99a76 !important;
    font:700 9px/1.2 "Courier New",monospace !important;
    letter-spacing:.42em !important;
}
#home-screen.v62-shocker-home .home-brand-title {
    position:relative;
    display:inline-block;
    margin-top:4px !important;
    color:#f5df9f !important;
    font:900 clamp(29px,4vw,48px)/.9 Georgia,serif !important;
    letter-spacing:.2em !important;
    text-shadow:0 3px 0 #000,0 0 22px rgba(217,183,102,.34) !important;
}
#home-screen.v62-shocker-home .home-brand-title::after {
    content:"♠";
    position:absolute;
    right:-27px;
    top:2px;
    color:#971d2a;
    font-size:.52em;
    text-shadow:0 0 12px rgba(198,36,52,.6);
}
#home-screen.v62-shocker-home .home-resources {
    gap:7px !important;
    align-items:stretch;
}
#home-screen.v62-shocker-home .home-resource {
    min-width:112px !important;
    padding:8px 12px !important;
    border:1px solid rgba(217,183,102,.32) !important;
    border-radius:2px !important;
    background:linear-gradient(135deg,rgba(0,0,0,.74),rgba(35,21,15,.66)) !important;
    color:#9f9275 !important;
    font:700 8px/1.15 "Courier New",monospace !important;
    letter-spacing:.15em;
    text-align:left;
}
#home-screen.v62-shocker-home .home-resource b {
    display:block;
    margin:4px 0 0 !important;
    color:#f2d991 !important;
    font:900 12px/1 Georgia,serif !important;
    letter-spacing:.1em;
}
#home-screen.v62-shocker-home .home-main {
    position:relative;
    z-index:10;
    grid-template-columns:minmax(0,1.55fr) minmax(280px,.62fr) !important;
    gap:14px !important;
    min-height:620px;
    height:calc(100dvh - 132px);
    padding:14px 0 12px !important;
}
#home-screen.v62-shocker-home .home-hero {
    position:relative !important;
    min-height:0 !important;
    overflow:hidden !important;
    isolation:isolate;
    border:1px solid rgba(217,183,102,.56) !important;
    border-radius:2px !important;
    clip-path:polygon(0 0,calc(100% - 25px) 0,100% 25px,100% 100%,25px 100%,0 calc(100% - 25px)) !important;
    background:
        linear-gradient(90deg,rgba(3,4,7,.97) 0 32%,rgba(17,7,10,.84) 55%,rgba(4,24,28,.72) 100%),
        radial-gradient(circle at 82% 39%,rgba(72,154,165,.25),transparent 32%),
        radial-gradient(circle at 57% 64%,rgba(153,28,43,.25),transparent 34%) !important;
    box-shadow:inset 0 0 70px rgba(0,0,0,.7),0 18px 44px rgba(0,0,0,.48) !important;
}
#home-screen.v62-shocker-home .home-hero::before {
    content:"SHOCKER" !important;
    position:absolute !important;
    left:auto !important;
    right:-1.5% !important;
    top:3% !important;
    transform:none !important;
    color:rgba(255,239,195,.055) !important;
    font:900 clamp(76px,12vw,190px)/1 Georgia,serif !important;
    letter-spacing:-.05em;
    text-shadow:none !important;
    z-index:0;
}
#home-screen.v62-shocker-home .home-hero::after {
    content:"";
    position:absolute;
    inset:9px;
    z-index:12;
    pointer-events:none;
    border:1px solid rgba(217,183,102,.16);
    clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
}
#home-screen.v62-shocker-home .home-hero-copy {
    left:clamp(20px,3.2vw,48px) !important;
    bottom:clamp(24px,6vh,64px) !important;
    z-index:10 !important;
    width:47%;
    max-width:520px !important;
}
#home-screen.v62-shocker-home .home-season {
    padding:6px 10px !important;
    border:0 !important;
    border-left:3px solid #a42130 !important;
    border-radius:0 !important;
    color:#d6be80 !important;
    background:linear-gradient(90deg,rgba(0,0,0,.82),transparent) !important;
    font:700 9px/1 "Courier New",monospace !important;
    letter-spacing:.2em !important;
}
#home-screen.v62-shocker-home .home-hero-title {
    margin:13px 0 10px !important;
    color:#fff0c1 !important;
    font:900 clamp(38px,5.9vw,82px)/.92 Georgia,"Yu Mincho",serif !important;
    letter-spacing:.03em !important;
    text-shadow:0 5px 0 #000,0 10px 30px rgba(0,0,0,.88) !important;
}
#home-screen.v62-shocker-home .home-hero-title em {
    color:#d9b766;
    font-style:normal;
}
#home-screen.v62-shocker-home .home-hero-text {
    color:#c6b995 !important;
    font-size:clamp(10px,1.15vw,14px) !important;
    line-height:1.7 !important;
    letter-spacing:.05em;
    text-shadow:0 2px 5px #000;
}
.v62-mechanics {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:14px;
}
.v62-mechanic {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 8px;
    border:1px solid rgba(217,183,102,.3);
    background:rgba(0,0,0,.62);
    color:#cab98b;
    font:700 8px/1 "Courier New",monospace;
    letter-spacing:.08em;
}
.v62-mechanic strong { color:#f5de9b;font-size:11px; }
.v62-home-showcase {
    position:absolute;
    inset:3% 0 0 44%;
    z-index:5;
    pointer-events:none;
}
.v62-home-character {
    position:absolute;
    bottom:-4%;
    width:48%;
    height:96%;
    margin:0;
    filter:drop-shadow(0 18px 17px rgba(0,0,0,.78));
    transform-origin:center bottom;
}
.v62-home-character img {
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    -webkit-user-drag:none;
    user-select:none;
}
.v62-home-character figcaption {
    position:absolute;
    bottom:7%;
    left:50%;
    transform:translateX(-50%);
    padding:5px 10px;
    border-left:2px solid var(--v62-char-gem,#d9b766);
    color:#ead9aa;
    background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.42));
    font:700 9px/1 Georgia,"Yu Mincho",serif;
    letter-spacing:.09em;
    white-space:nowrap;
    opacity:.86;
}
.v62-home-character.is-left { left:-8%;z-index:1;transform:translateX(-3%) scale(.88) rotate(-3deg);filter:brightness(.72) saturate(.8) drop-shadow(0 18px 17px rgba(0,0,0,.8));animation:v62-character-left 6.5s ease-in-out infinite; }
.v62-home-character.is-center { left:25%;z-index:3;transform:scale(1.08);animation:v62-character-center 5.8s ease-in-out infinite; }
.v62-home-character.is-right { right:-11%;z-index:2;transform:translateX(2%) scale(.9) rotate(3deg);filter:brightness(.77) saturate(.86) drop-shadow(0 18px 17px rgba(0,0,0,.8));animation:v62-character-right 7s ease-in-out infinite; }
.v62-home-showcase::before {
    content:"";
    position:absolute;
    left:12%;
    right:4%;
    bottom:1%;
    height:36%;
    z-index:0;
    background:radial-gradient(ellipse,rgba(217,183,102,.18),transparent 65%);
    filter:blur(12px);
}
#home-screen.v62-shocker-home .home-side {
    grid-template-rows:auto minmax(0,1fr) !important;
    gap:9px !important;
}
#home-screen.v62-shocker-home .home-notice {
    position:relative;
    overflow:hidden;
    padding:12px 14px 13px !important;
    border:1px solid rgba(217,183,102,.34) !important;
    border-radius:1px !important;
    background:linear-gradient(125deg,rgba(47,12,18,.88),rgba(5,8,9,.9)) !important;
}
#home-screen.v62-shocker-home .home-notice::after {
    content:"♠";
    position:absolute;
    right:-7px;
    top:-18px;
    color:rgba(217,183,102,.09);
    font-size:86px;
}
#home-screen.v62-shocker-home .home-notice-label {
    color:#d1af5e !important;
    font:700 8px/1 "Courier New",monospace !important;
    letter-spacing:.28em !important;
}
#home-screen.v62-shocker-home .home-notice-title {
    position:relative;
    z-index:2;
    margin-top:7px !important;
    color:#dfd1aa !important;
    font-size:11px !important;
    line-height:1.55;
}
#home-screen.v62-shocker-home .home-menu-grid {
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
}
#home-screen.v62-shocker-home .home-menu-btn {
    position:relative !important;
    min-height:84px !important;
    padding:11px 10px 10px 53px !important;
    overflow:hidden !important;
    border:1px solid rgba(217,183,102,.28) !important;
    border-radius:1px !important;
    color:#d8c99f !important;
    background:linear-gradient(115deg,rgba(27,24,20,.96),rgba(4,7,8,.98)) !important;
    text-align:left !important;
    transition:transform .18s ease,border-color .18s ease,filter .18s ease !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 18px rgba(0,0,0,.3) !important;
}
#home-screen.v62-shocker-home .home-menu-btn::before {
    content:attr(data-v62-number);
    position:absolute;
    right:7px;
    top:7px;
    color:rgba(217,183,102,.3);
    font:700 8px/1 "Courier New",monospace;
    letter-spacing:.15em;
}
#home-screen.v62-shocker-home .home-menu-btn::after {
    content:"" !important;
    position:absolute !important;
    inset:auto -28% -75% 22% !important;
    height:145% !important;
    opacity:.72;
    background:radial-gradient(circle,rgba(217,183,102,.16),transparent 65%) !important;
}
#home-screen.v62-shocker-home .home-menu-btn:hover,
#home-screen.v62-shocker-home .home-menu-btn:focus-visible {
    transform:translateY(-2px) !important;
    border-color:rgba(255,226,150,.7) !important;
    filter:brightness(1.12);
}
#home-screen.v62-shocker-home .home-menu-icon {
    position:absolute !important;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    display:flex !important;
    width:31px;
    height:42px;
    margin:0 !important;
    align-items:center;
    justify-content:center;
    border-right:1px solid rgba(217,183,102,.3);
    color:#c7a650;
    font-size:22px !important;
    text-shadow:0 0 13px rgba(217,183,102,.38);
}
#home-screen.v62-shocker-home .home-menu-name {
    display:block !important;
    color:#e8d8af !important;
    font:800 13px/1.1 Georgia,"Yu Mincho",serif !important;
    letter-spacing:.08em !important;
}
#home-screen.v62-shocker-home .home-menu-sub {
    display:block !important;
    margin-top:6px !important;
    color:#827a68 !important;
    font:700 7px/1 "Courier New",monospace !important;
    letter-spacing:.13em !important;
}
#home-screen.v62-shocker-home .home-menu-btn.primary {
    grid-column:1/-1 !important;
    min-height:104px !important;
    padding-left:72px !important;
    border-color:rgba(246,209,113,.74) !important;
    background:
        linear-gradient(105deg,rgba(106,18,29,.96),rgba(40,8,13,.98) 54%,rgba(7,17,19,.98)) !important;
    box-shadow:0 0 23px rgba(169,29,43,.18),inset 0 1px 0 rgba(255,241,190,.14),0 11px 24px rgba(0,0,0,.45) !important;
}
#home-screen.v62-shocker-home .home-menu-btn.primary .home-menu-icon {
    left:18px;
    width:42px;
    height:55px;
    color:#ffe09a;
    font-size:31px !important;
}
#home-screen.v62-shocker-home .home-menu-btn.primary .home-menu-name {
    color:#fff0c2 !important;
    font-size:20px !important;
}
#home-screen.v62-shocker-home .home-bottom {
    position:relative;
    z-index:20;
    min-height:30px;
    padding-top:8px !important;
    border-top:1px solid rgba(217,183,102,.24) !important;
    color:#756d5c !important;
    font:700 8px/1 "Courier New",monospace !important;
    letter-spacing:.13em !important;
}

/* ---------- CHARACTER SELECT : 宝石の型で選ぶ名鑑 ---------- */
#character-select-screen.v62-roster-screen {
    --v62-select-gold:#d9b766;
    align-items:flex-start !important;
    padding:max(12px,env(safe-area-inset-top)) 0 max(10px,env(safe-area-inset-bottom)) !important;
    color:#f0dfb4 !important;
    background:
        radial-gradient(ellipse at 18% 38%,rgba(102,17,29,.28),transparent 31%),
        radial-gradient(ellipse at 82% 42%,rgba(16,70,79,.25),transparent 32%),
        linear-gradient(112deg,#030507 0 48%,#15090c 48.2% 63%,#041216 100%) !important;
}
#character-select-screen.v62-roster-screen::before {
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    opacity:.2 !important;
    pointer-events:none !important;
    background:
        linear-gradient(90deg,transparent 49.85%,rgba(217,183,102,.42) 50%,transparent 50.15%),
        repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.025) 7px),
        repeating-linear-gradient(90deg,transparent 0 89px,rgba(255,255,255,.018) 90px) !important;
}
#character-select-screen.v62-roster-screen::after {
    content:"♠  ♥  ♦  ♣";
    position:fixed;
    left:50%;
    top:47%;
    transform:translate(-50%,-50%) rotate(-7deg);
    color:rgba(255,255,255,.035);
    font:900 clamp(80px,20vw,270px)/1 Georgia,serif;
    letter-spacing:.08em;
    white-space:nowrap;
    pointer-events:none;
}
#character-select-screen.v62-roster-screen .character-select-shell {
    position:relative !important;
    z-index:2 !important;
    width:min(100%,1540px) !important;
    min-height:100% !important;
    margin:0 auto !important;
    padding:0 max(16px,2vw) max(8px,env(safe-area-inset-bottom)) !important;
    display:flex !important;
    flex-direction:column !important;
}
#character-select-screen.v62-roster-screen .character-select-kicker {
    margin:0 !important;
    color:#aa9565 !important;
    font:700 9px/1.15 "Courier New",monospace !important;
    letter-spacing:.42em !important;
    text-align:center;
}
#character-select-screen.v62-roster-screen .character-select-title {
    margin:5px 0 3px !important;
    color:#f4dda0 !important;
    font:900 clamp(27px,4.1vw,52px)/1 Georgia,"Yu Mincho",serif !important;
    letter-spacing:.1em !important;
    text-align:center;
    text-shadow:0 3px 0 #000,0 0 21px rgba(217,183,102,.27) !important;
}
#character-select-screen.v62-roster-screen .character-select-title::before,
#character-select-screen.v62-roster-screen .character-select-title::after {
    content:"◆";
    display:inline-block;
    margin:0 .65em;
    color:#9b1f2d;
    font-size:.3em;
    vertical-align:middle;
    text-shadow:0 0 10px rgba(193,35,51,.62);
}
#character-select-screen.v62-roster-screen .character-select-sub {
    margin:0 0 8px !important;
    color:#a99c7f !important;
    font-size:10px !important;
    line-height:1.45;
    letter-spacing:.08em !important;
    text-align:center;
}
.v62-archetype-bar {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:42px;
    padding:6px 8px;
    border-top:1px solid rgba(217,183,102,.18);
    border-bottom:1px solid rgba(217,183,102,.24);
    background:linear-gradient(90deg,transparent,rgba(0,0,0,.58) 12% 88%,transparent);
    overflow-x:auto;
    scrollbar-width:none;
}
.v62-archetype-bar::-webkit-scrollbar { display:none; }
.v62-filter-button {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:28px;
    padding:6px 9px;
    border:1px solid rgba(217,183,102,.22);
    border-radius:2px;
    color:#908774;
    background:rgba(4,6,7,.74);
    font:700 9px/1 sans-serif;
    letter-spacing:.05em;
    cursor:pointer;
    transition:.18s ease;
}
.v62-filter-button:hover,
.v62-filter-button:focus-visible { color:#e9d8aa;border-color:rgba(217,183,102,.65);transform:translateY(-1px); }
.v62-filter-button.active {
    color:#fff0c1;
    border-color:var(--filter-color,#d9b766);
    background:linear-gradient(180deg,color-mix(in srgb,var(--filter-color,#d9b766) 22%,#08090a),#08090a);
    box-shadow:0 0 12px color-mix(in srgb,var(--filter-color,#d9b766) 36%,transparent),inset 0 1px rgba(255,255,255,.08);
}
.v62-filter-gem {
    width:8px;
    height:8px;
    transform:rotate(45deg);
    border:1px solid rgba(255,255,255,.72);
    background:var(--filter-color,#d9b766);
    box-shadow:0 0 7px var(--filter-color,#d9b766);
}
.v62-filter-count {
    flex:0 0 auto;
    margin-left:5px;
    padding-left:10px;
    border-left:1px solid rgba(217,183,102,.24);
    color:#746d5f;
    font:700 8px/1 "Courier New",monospace;
    letter-spacing:.1em;
    white-space:nowrap;
}
#character-select-screen.v62-roster-screen .character-grid,
#character-select-screen.v62-roster-screen #character-grid {
    flex:1 1 auto !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:clamp(12px,1.8vw,24px) !important;
    padding:15px max(8vw,42px) 18px !important;
    scroll-padding-inline:max(8vw,42px) !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-color:rgba(217,183,102,.42) rgba(0,0,0,.28) !important;
}
#character-select-screen.v62-roster-screen .character-card {
    --v62-card-gem:#d9b766;
    --v62-card-glow:rgba(217,183,102,.5);
    position:relative !important;
    flex:0 0 clamp(226px,20vw,292px) !important;
    width:clamp(226px,20vw,292px) !important;
    min-width:clamp(226px,20vw,292px) !important;
    height:min(59dvh,548px) !important;
    min-height:360px !important;
    max-height:calc(100dvh - 222px) !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    isolation:isolate;
    border:1px solid rgba(217,183,102,.42) !important;
    border-radius:8px !important;
    clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px)) !important;
    color:#edddb4 !important;
    background:
        radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--v62-card-gem) 18%,transparent),transparent 43%),
        linear-gradient(155deg,#161618,#050607 72%) !important;
    box-shadow:0 15px 30px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.025) !important;
    line-height:normal !important;
    scroll-snap-align:center !important;
    transition:transform .25s cubic-bezier(.2,.75,.2,1),filter .25s ease,box-shadow .25s ease,border-color .25s ease !important;
    animation:v62-roster-card-in .52s cubic-bezier(.16,.8,.2,1) both;
    animation-delay:var(--v62-card-delay,0ms);
}
#character-select-screen.v62-roster-screen .character-card[hidden] { display:none !important; }
#character-select-screen.v62-roster-screen .character-card::before {
    content:"";
    position:absolute;
    inset:7px;
    z-index:5;
    pointer-events:none;
    border:1px solid color-mix(in srgb,var(--v62-card-gem) 34%,rgba(255,255,255,.08));
    clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
}
#character-select-screen.v62-roster-screen .character-card::after {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:12%;
    right:12%;
    bottom:47px;
    height:34%;
    z-index:0;
    opacity:.38;
    pointer-events:none;
    background:radial-gradient(ellipse,var(--v62-card-glow),transparent 70%) !important;
    filter:blur(8px);
}
#character-select-screen.v62-roster-screen .character-card:hover,
#character-select-screen.v62-roster-screen .character-card:focus-visible {
    transform:translateY(-7px) scale(1.018) !important;
    filter:brightness(1.08) !important;
    border-color:rgba(255,226,148,.75) !important;
    box-shadow:0 19px 38px rgba(0,0,0,.72),0 0 17px var(--v62-card-glow) !important;
}
#character-select-screen.v62-roster-screen .character-card.selected {
    transform:translateY(-9px) scale(1.025) !important;
    border-color:var(--v62-card-gem) !important;
    box-shadow:0 0 0 2px rgba(255,255,255,.11),0 0 26px var(--v62-card-glow),0 22px 40px rgba(0,0,0,.75) !important;
}
#character-select-screen.v62-roster-screen .character-card.selected::before {
    border-color:var(--v62-card-gem);
    box-shadow:inset 0 0 15px color-mix(in srgb,var(--v62-card-gem) 18%,transparent);
}
#character-select-screen.v62-roster-screen .character-card > .character-card-image {
    position:absolute !important;
    inset:10px 10px 62px !important;
    display:block !important;
    width:calc(100% - 20px) !important;
    height:calc(100% - 72px) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:4px !important;
    clip-path:none !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    background:transparent !important;
    transform:none !important;
    filter:drop-shadow(0 10px 9px rgba(0,0,0,.6));
    z-index:2;
}
#character-select-screen.v62-roster-screen .character-card.has-awaken-preview {
    aspect-ratio:925/1133 !important;
}
#character-select-screen.v62-roster-screen .character-card.v47-card-crop.has-awaken-preview {
    aspect-ratio:925/1281 !important;
}
#character-select-screen.v62-roster-screen .character-card.has-awaken-preview > .character-card-image,
#character-select-screen.v62-roster-screen .character-card.has-awaken-preview > .character-card-awaken-image {
    position:absolute !important;
    inset:46% auto auto 50% !important;
    display:block !important;
    width:76% !important;
    height:75% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:6px !important;
    clip-path:inset(0 round 6px) !important;
    object-fit:contain !important;
    object-position:center !important;
    box-shadow:0 10px 20px rgba(0,0,0,.72) !important;
}
#character-select-screen.v62-roster-screen .character-card.has-awaken-preview > .character-card-image {
    z-index:3 !important;
    transform:translate(-50%,-50%) translate(-19px,-8px) rotate(-2deg) !important;
    filter:none !important;
}
#character-select-screen.v62-roster-screen .character-card.has-awaken-preview > .character-card-awaken-image {
    z-index:2 !important;
    transform:translate(-50%,-50%) translate(20px,11px) rotate(2deg) scale(.98) !important;
    filter:brightness(.58) saturate(.8) !important;
}
#character-select-screen.v62-roster-screen .character-card.has-awaken-preview.selection-awaken-front > .character-card-image {
    z-index:2 !important;
    transform:translate(-50%,-50%) translate(20px,11px) rotate(2deg) scale(.98) !important;
    filter:brightness(.58) saturate(.8) !important;
}
#character-select-screen.v62-roster-screen .character-card.has-awaken-preview.selection-awaken-front > .character-card-awaken-image {
    z-index:3 !important;
    transform:translate(-50%,-50%) translate(-19px,-8px) rotate(-2deg) !important;
    filter:none !important;
}
.v62-card-index {
    position:absolute;
    left:13px;
    top:13px;
    z-index:8;
    display:flex;
    align-items:center;
    gap:5px;
    padding:5px 7px;
    border:1px solid color-mix(in srgb,var(--v62-card-gem) 58%,#fff);
    color:#fff0c8;
    background:rgba(0,0,0,.78);
    font:900 11px/1 Georgia,serif;
    text-shadow:0 0 8px var(--v62-card-glow);
    pointer-events:none;
}
.v62-card-index-gem {
    width:7px;
    height:7px;
    transform:rotate(45deg);
    border:1px solid rgba(255,255,255,.75);
    background:var(--v62-card-gem);
    box-shadow:0 0 7px var(--v62-card-gem);
}
.v62-card-meta {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:7;
    min-height:58px;
    padding:10px 14px 8px;
    border-top:1px solid color-mix(in srgb,var(--v62-card-gem) 48%,rgba(217,183,102,.2));
    color:#f1dfb4;
    background:linear-gradient(90deg,rgba(3,4,5,.98),rgba(18,13,12,.96) 64%,color-mix(in srgb,var(--v62-card-gem) 12%,#060708));
    text-align:left;
    pointer-events:none;
}
.v62-card-name {
    display:block;
    overflow:hidden;
    color:#f6e5b8;
    font:800 13px/1.15 Georgia,"Yu Mincho",serif;
    letter-spacing:.05em;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-shadow:0 2px 5px #000;
}
.v62-card-role {
    display:block;
    margin-top:5px;
    overflow:hidden;
    color:#8f8672;
    font:700 8px/1.1 "Courier New",monospace;
    letter-spacing:.08em;
    white-space:nowrap;
    text-overflow:ellipsis;
}
#character-select-screen.v62-roster-screen .character-card-tap-label,
#character-select-screen.v62-roster-screen .character-card-toggle-hint {
    left:auto !important;
    right:12px !important;
    top:13px !important;
    bottom:auto !important;
    transform:none !important;
    z-index:9 !important;
    padding:5px 7px !important;
    border:1px solid rgba(217,183,102,.44) !important;
    border-radius:1px !important;
    color:#d7c28b !important;
    background:rgba(0,0,0,.78) !important;
    font:700 7px/1 sans-serif !important;
    letter-spacing:.04em !important;
    opacity:.72 !important;
}
#character-select-screen.v62-roster-screen .character-select-footer {
    display:grid !important;
    grid-template-columns:minmax(180px,1fr) auto !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 !important;
    padding:9px 0 0 !important;
    border-top:1px solid rgba(217,183,102,.28);
    background:linear-gradient(90deg,rgba(0,0,0,.44),transparent);
}
#character-select-screen.v62-roster-screen #character-selection-status {
    min-width:0;
    color:#9f947b !important;
    font:700 10px/1.3 Georgia,"Yu Mincho",serif;
    letter-spacing:.07em;
    text-align:left;
}
#character-select-screen.v62-roster-screen .character-select-footer-buttons {
    flex-wrap:nowrap !important;
    gap:7px !important;
}
#character-select-screen.v62-roster-screen #character-back-home-btn,
#character-select-screen.v62-roster-screen #confirm-character-btn {
    min-height:44px !important;
    padding:10px 17px !important;
    border-radius:1px !important;
    font:800 11px/1 Georgia,"Yu Mincho",serif !important;
    letter-spacing:.08em !important;
    cursor:pointer;
}
#character-select-screen.v62-roster-screen #character-back-home-btn {
    border:1px solid rgba(217,183,102,.3) !important;
    color:#b8aa88 !important;
    background:linear-gradient(180deg,#27241f,#0b0c0c) !important;
}
#character-select-screen.v62-roster-screen #confirm-character-btn {
    min-width:178px;
    border:1px solid rgba(217,183,102,.55) !important;
    color:#8d8066 !important;
    background:linear-gradient(110deg,#2d2820,#0c0d0d) !important;
    box-shadow:none !important;
}
#character-select-screen.v62-roster-screen #confirm-character-btn.ready {
    border-color:#f1d17a !important;
    color:#fff0bf !important;
    background:linear-gradient(110deg,#7d1826,#390a12 58%,#10191a) !important;
    box-shadow:0 0 18px rgba(157,28,43,.3),inset 0 1px rgba(255,239,187,.12) !important;
}

/* 詳細モーダルも名鑑と同じ意匠へ統一 */
#character-detail-modal.v62-detail-modal { background:rgba(0,0,0,.9) !important;backdrop-filter:blur(8px) !important; }
#character-detail-modal.v62-detail-modal .character-detail-panel {
    --v62-detail-gem:#d9b766;
    border:1px solid color-mix(in srgb,var(--v62-detail-gem) 54%,#a9915b) !important;
    border-radius:3px !important;
    clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
    background:
        radial-gradient(circle at 77% 18%,color-mix(in srgb,var(--v62-detail-gem) 13%,transparent),transparent 32%),
        linear-gradient(145deg,#181516,#050708 68%) !important;
    box-shadow:0 25px 70px rgba(0,0,0,.86),inset 0 0 45px rgba(0,0,0,.5) !important;
}
#character-detail-modal.v62-detail-modal .character-detail-portrait-wrap { background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--v62-detail-gem) 18%,transparent),transparent 42%),#070809 !important;border-right:1px solid rgba(217,183,102,.25) !important; }
#character-detail-modal.v62-detail-modal .character-detail-kicker { color:#ad9968 !important;letter-spacing:.34em !important; }
#character-detail-modal.v62-detail-modal #character-detail-name { color:#f4dfa6 !important;text-shadow:0 3px 0 #000,0 0 17px color-mix(in srgb,var(--v62-detail-gem) 35%,transparent) !important; }
#character-detail-modal.v62-detail-modal #character-detail-type { color:var(--v62-detail-gem) !important; }
#character-detail-modal.v62-detail-modal .character-detail-ability { border:1px solid rgba(217,183,102,.24) !important;border-radius:2px !important;background:rgba(0,0,0,.38) !important; }
#character-detail-modal.v62-detail-modal .character-detail-ability-title { color:#e0bd67 !important; }
#character-detail-modal.v62-detail-modal #character-detail-select { border-radius:1px !important;background:linear-gradient(110deg,#7d1826,#390a12 62%,#10191a) !important; }
#character-detail-modal.v62-detail-modal #character-detail-close { border-radius:1px !important;background:linear-gradient(180deg,#2b2925,#0d0e0e) !important; }

@keyframes v62-home-texture-drift { from{transform:translate3d(-1%,-1%,0) rotate(-.25deg)}to{transform:translate3d(1%,1%,0) rotate(.25deg)} }
@keyframes v62-character-left { 0%,100%{transform:translateX(-3%) scale(.88) rotate(-3deg)}50%{transform:translateX(-1%) translateY(-8px) scale(.9) rotate(-2.4deg)} }
@keyframes v62-character-center { 0%,100%{transform:scale(1.08) translateY(0)}50%{transform:scale(1.095) translateY(-9px)} }
@keyframes v62-character-right { 0%,100%{transform:translateX(2%) scale(.9) rotate(3deg)}50%{transform:translateX(0) translateY(-6px) scale(.92) rotate(2.2deg)} }
@keyframes v62-roster-card-in { from{opacity:0;transform:translateY(30px) rotateX(10deg);filter:blur(7px)}to{opacity:1;transform:translateY(0) rotateX(0);filter:blur(0)} }

@media(max-width:900px) {
    #home-screen.v62-shocker-home .home-main { grid-template-columns:1fr !important;grid-template-rows:minmax(390px,58dvh) auto !important;height:auto !important;min-height:0 !important; }
    #home-screen.v62-shocker-home .home-hero-copy { width:52%; }
    #home-screen.v62-shocker-home .home-side { grid-template-rows:auto auto !important; }
    #home-screen.v62-shocker-home .home-menu-btn { min-height:72px !important; }
    #home-screen.v62-shocker-home .home-menu-btn.primary { min-height:86px !important; }
    #character-select-screen.v62-roster-screen .character-card { flex-basis:clamp(220px,32vw,276px) !important;width:clamp(220px,32vw,276px) !important;min-width:clamp(220px,32vw,276px) !important; }
}

@media(max-width:700px) {
    #home-screen.v62-shocker-home .home-shell { padding-inline:9px !important; }
    #home-screen.v62-shocker-home .home-topbar { min-height:61px; }
    #home-screen.v62-shocker-home .home-brand-small { font-size:7px !important;letter-spacing:.25em !important; }
    #home-screen.v62-shocker-home .home-brand-title { font-size:29px !important; }
    #home-screen.v62-shocker-home .home-brand-title::after { right:-18px; }
    #home-screen.v62-shocker-home .home-resources { gap:3px !important; }
    #home-screen.v62-shocker-home .home-resource { min-width:70px !important;padding:6px !important;font-size:6px !important; }
    #home-screen.v62-shocker-home .home-resource b { font-size:9px !important; }
    #home-screen.v62-shocker-home .home-main { grid-template-rows:minmax(335px,52dvh) auto !important;gap:8px !important;padding:8px 0 !important; }
    #home-screen.v62-shocker-home .home-hero { clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)) !important; }
    #home-screen.v62-shocker-home .home-hero-copy { left:15px !important;bottom:17px !important;width:57%;max-width:none !important; }
    #home-screen.v62-shocker-home .home-season { padding:4px 6px !important;font-size:6px !important;letter-spacing:.1em !important; }
    #home-screen.v62-shocker-home .home-hero-title { margin:8px 0 7px !important;font-size:clamp(29px,9.4vw,45px) !important; }
    #home-screen.v62-shocker-home .home-hero-text { font-size:8px !important;line-height:1.5 !important; }
    .v62-mechanics { gap:3px;margin-top:8px; }
    .v62-mechanic { padding:4px 5px;font-size:6px;gap:3px; }
    .v62-mechanic strong { font-size:8px; }
    .v62-home-showcase { inset:2% -4% 0 48%; }
    .v62-home-character { width:62%;height:95%; }
    .v62-home-character.is-left { left:-22%;opacity:.56; }
    .v62-home-character.is-center { left:12%; }
    .v62-home-character.is-right { right:-35%;opacity:.45; }
    .v62-home-character figcaption { display:none; }
    #home-screen.v62-shocker-home .home-notice { padding:9px 10px !important; }
    #home-screen.v62-shocker-home .home-menu-grid { gap:5px !important; }
    #home-screen.v62-shocker-home .home-menu-btn { min-height:64px !important;padding:8px 7px 8px 42px !important; }
    #home-screen.v62-shocker-home .home-menu-btn.primary { min-height:76px !important;padding-left:57px !important; }
    #home-screen.v62-shocker-home .home-menu-icon { left:8px;width:27px;height:35px;font-size:17px !important; }
    #home-screen.v62-shocker-home .home-menu-btn.primary .home-menu-icon { left:11px;width:34px;height:43px;font-size:24px !important; }
    #home-screen.v62-shocker-home .home-menu-name { font-size:10px !important; }
    #home-screen.v62-shocker-home .home-menu-btn.primary .home-menu-name { font-size:15px !important; }
    #home-screen.v62-shocker-home .home-menu-sub { margin-top:4px !important;font-size:5.5px !important; }
    #home-screen.v62-shocker-home .home-bottom { font-size:6px !important; }

    #character-select-screen.v62-roster-screen { overflow-y:auto !important;padding-top:8px !important; }
    #character-select-screen.v62-roster-screen .character-select-shell { height:auto !important;min-height:100% !important;padding-inline:8px !important; }
    #character-select-screen.v62-roster-screen .character-select-kicker { font-size:6.5px !important;letter-spacing:.24em !important; }
    #character-select-screen.v62-roster-screen .character-select-title { font-size:clamp(24px,7vw,34px) !important;letter-spacing:.04em !important; }
    #character-select-screen.v62-roster-screen .character-select-title::before,
    #character-select-screen.v62-roster-screen .character-select-title::after { margin:0 .35em; }
    #character-select-screen.v62-roster-screen .character-select-sub { margin-bottom:5px !important;font-size:8px !important; }
    .v62-archetype-bar { justify-content:flex-start;min-height:37px;padding-inline:4px; }
    .v62-filter-button { padding:5px 7px;font-size:8px; }
    .v62-filter-count { font-size:7px; }
    #character-select-screen.v62-roster-screen .character-grid,
    #character-select-screen.v62-roster-screen #character-grid { min-height:440px !important;padding:12px 12vw 15px !important;gap:13px !important; }
    #character-select-screen.v62-roster-screen .character-card { flex:0 0 min(72vw,285px) !important;width:min(72vw,285px) !important;min-width:min(72vw,285px) !important;height:min(55dvh,510px) !important;min-height:410px !important;max-height:none !important; }
    #character-select-screen.v62-roster-screen .character-select-footer { position:sticky;bottom:0;z-index:20;grid-template-columns:1fr !important;gap:6px !important;padding:7px 4px max(6px,env(safe-area-inset-bottom)) !important;background:rgba(4,6,7,.95) !important;backdrop-filter:blur(8px); }
    #character-select-screen.v62-roster-screen #character-selection-status { min-height:17px;text-align:center;font-size:8px !important; }
    #character-select-screen.v62-roster-screen .character-select-footer-buttons { width:100%; }
    #character-select-screen.v62-roster-screen #character-back-home-btn,
    #character-select-screen.v62-roster-screen #confirm-character-btn { flex:1 1 0 !important;min-width:0 !important;min-height:41px !important;padding:8px !important;font-size:9px !important; }
}

@media(max-height:650px) and (min-width:701px) {
    #home-screen.v62-shocker-home .home-main { min-height:490px;height:calc(100dvh - 120px); }
    #character-select-screen.v62-roster-screen .character-card { height:calc(100dvh - 205px) !important;min-height:320px !important; }
}

@media(prefers-reduced-motion:reduce) {
    #home-screen.v62-shocker-home::before,
    .v62-home-character,
    #character-select-screen.v62-roster-screen .character-card { animation-duration:.01ms !important;animation-iteration-count:1 !important; }
}