/* =========================================================
   VIVA-MC 公式サイト 共通スタイル ― 古地図（ポルトラン海図）
   欧文見出し : Cormorant Garamond / 小型大文字 : Cormorant SC
   欧文本文・数字 : EB Garamond / 和文 : Shippori Mincho
   ========================================================= */

:root{
    /* 墨（文字） */
    --ink:#2F2010; --ink-2:#584327; --ink-3:#6F5A35;
    /* 紙（面） */
    --paper-0:#DCC698; --paper:#E9D8B0; --paper-2:#F5EAD1; --paper-3:#EFE1C2;
    --paper-hi:#FBF4E4;
    /* 罫 */
    --line:#C2A871; --rule:#937344; --rule-dk:#6E5228;
    /* 差し色 */
    --ember:#93301C; --ember-dk:#6E1E11; --ember-lt:#BE6650;
    --sea:#375663; --sea-dk:#213842; --sea-lt:#5C808D;
    --honey:#8A6820; --honey-lt:#E3CB92; --gold:#B08A32;
    --moss:#3C6836; --verdigris:#3F7268; --brick:#93301C;
    /* 影 */
    --sh-1:0 1px 0 rgba(255,250,238,.55) inset;
    --sh-2:2px 3px 0 rgba(47,32,16,.10),6px 10px 22px -10px rgba(47,32,16,.45);
    --sh-3:3px 4px 0 rgba(47,32,16,.12),10px 18px 32px -14px rgba(47,32,16,.5);
    --topbar-h:72px;

    /* 書体 */
    --f-disp:'Cormorant Garamond','Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
    --f-body:'EB Garamond','Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
    --f-caps:'Cormorant SC','Shippori Mincho','Hiragino Mincho ProN',serif;
    --f-lat:'EB Garamond',Georgia,serif;
    --f-mono:'SFMono-Regular',Consolas,'Courier New',monospace;

    /* 文字の大きさ（1rem = 17px） */
    --t-3xs:.64rem; --t-2xs:.72rem; --t-xs:.8rem;  --t-sm:.88rem; --t-md:.95rem;
    --t-lg:1.12rem; --t-xl:1.3rem;  --t-2xl:1.55rem; --t-3xl:1.85rem;
    --t-4xl:2.2rem; --t-5xl:2.8rem;

    /* 字送り */
    --ls-caps:.22em; --ls-ttl:.03em;
    --measure:34em;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;font-size:17px;-webkit-text-size-adjust:100%}

body{
    font-family:var(--f-body);font-size:1rem;font-weight:400;
    color:var(--ink);line-height:1.95;letter-spacing:.015em;
    background-color:var(--paper);
    background-attachment:fixed,fixed,scroll,scroll;
    font-feature-settings:"palt" 1,"kern" 1;font-kerning:normal;
    font-variant-numeric:oldstyle-nums proportional-nums;
    text-spacing-trim:trim-start;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    background-image:
        linear-gradient(180deg, rgba(255,250,238,.55) 0, rgba(255,250,238,0) 420px),
        linear-gradient(0deg, rgba(120,88,44,.12) 0, rgba(120,88,44,0) 380px),
        repeating-linear-gradient(90deg, rgba(120,88,44,.045) 0 1px, transparent 1px 120px),
        repeating-linear-gradient(0deg, rgba(120,88,44,.045) 0 1px, transparent 1px 120px);
}
/* 経年のシミ */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:2;mix-blend-mode:multiply;opacity:.5;
    background-image:
      radial-gradient(ellipse 180px 100px at 7% 18%, rgba(122,90,44,.10), transparent 70%),
      radial-gradient(ellipse 130px 150px at 94% 10%, rgba(122,90,44,.09), transparent 70%),
      radial-gradient(ellipse 210px 120px at 74% 76%, rgba(122,90,44,.08), transparent 70%),
      radial-gradient(ellipse 150px 130px at 20% 90%, rgba(122,90,44,.07), transparent 70%)}

/* ---------- 見出し・本文の骨格 ---------- */
h1,h2,h3,h4{font-weight:700;line-height:1.55;letter-spacing:var(--ls-ttl);
    font-feature-settings:"palt" 1,"kern" 1;text-wrap:balance;word-break:auto-phrase}
h1,h2{font-weight:800}
p{text-wrap:pretty}
p+p{margin-top:1.05em}

.disp{font-family:var(--f-disp);font-weight:600;letter-spacing:.02em;font-style:normal}
.cz{font-family:var(--f-caps);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase}
/* 小型大文字のラベル（罫線つき） */
.caps{font-family:var(--f-caps);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;
    font-size:var(--t-2xs);color:var(--ember-dk)}
/* 欧文イタリックの添え書き */
.gloss{font-family:var(--f-lat);font-style:italic;color:var(--ink-3);letter-spacing:.08em}
.dot{font-family:var(--f-lat);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.1em}
/* 数値は等幅の大文字数字で */
.num-lining{font-family:var(--f-lat);font-variant-numeric:lining-nums tabular-nums}

/* ---------- リンク：ペン書きの下線 ---------- */
a{color:var(--ember-dk);text-decoration:none;
    background-image:linear-gradient(var(--line),var(--line));
    background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
    transition:background-size .25s ease,background-image .25s ease,color .2s}
a:hover{color:var(--ember);background-image:linear-gradient(var(--ember),var(--ember));
    background-size:100% 2px}
a.plain,a:has(>img),.site-nav a,.mobile-nav a,.wiki-subnav a,.btn,.pager a,
.news li>a,.news h3 a,.news-article h1 a,
.topbar-cta a,.foot a,.tag,.chip{background-image:none}
a.plain:hover,.btn:hover{background-image:none}

/* ---------- 引用・強調 ---------- */
em{font-style:italic;font-family:var(--f-lat)}
strong,b{font-weight:700;color:var(--ink)}
mark{background:linear-gradient(transparent 62%,rgba(190,102,80,.42) 0);color:inherit;padding:0 .1em}
::selection{background:rgba(147,48,28,.2);color:var(--ink)}

/* ---------- 引用符つきの添え書き ---------- */
blockquote{font-family:var(--f-lat);font-style:italic;font-size:var(--t-lg);color:var(--ink-2);
    border-left:2px solid var(--rule);padding:2px 0 2px 20px;margin:20px 0;line-height:1.85}

/* ---------- コード ---------- */
code{font-family:var(--f-mono);font-size:.86em;letter-spacing:0;background:rgba(47,32,16,.09);
    border:1px solid rgba(138,106,56,.35);color:var(--ink);padding:.1em .45em;border-radius:1px;
    font-variant-numeric:lining-nums;word-break:break-all}
pre code{display:block;padding:14px 16px;overflow-x:auto;line-height:1.8}

/* ---------- 箇条書き ---------- */
.body-list{list-style:none;margin:14px 0}
.body-list li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--ink-2)}
.body-list li::before{content:'';position:absolute;left:4px;top:.82em;width:6px;height:6px;
    background:var(--honey);transform:rotate(45deg)}

/* ---------- 読み幅 ---------- */
.news-article p,.callout,.steps p,.row-item p,.faq .ans p{max-width:var(--measure)}

/* ---------- 和欧混植のすき間 ---------- */
:lang(ja){text-autospace:normal}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
    white-space:nowrap;border:0}
.skip-link{position:absolute;left:50%;top:-60px;transform:translateX(-50%);z-index:500;background:var(--ink);
    color:var(--paper-2);padding:10px 22px;font-weight:700}
.skip-link:focus{top:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 36px;position:relative;z-index:3}

/* =========================================================
   トップバー
   ========================================================= */
.topbar{position:sticky;top:0;z-index:300;display:flex;align-items:center;justify-content:space-between;gap:18px;
    height:var(--topbar-h);padding:0 30px;background:linear-gradient(180deg,var(--paper-2),var(--paper));
    border-bottom:4px double var(--rule)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:var(--paper-2);flex:none;
    transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.brand:hover img{transform:rotate(360deg)}
.brand-name{font-size:var(--t-xl);color:var(--ink)}
.brand-sub{display:none}
.site-nav{display:flex;align-items:center;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav ul{list-style:none;display:flex;gap:2px}
.site-nav a{position:relative;display:flex;align-items:center;padding:9px 15px;color:var(--ink-2);
    font-weight:700;font-size:var(--t-sm);letter-spacing:.05em;white-space:nowrap;transition:color .2s}
.site-nav a:hover{color:var(--ink);text-decoration:none}
.site-nav a::after{content:'';position:absolute;left:13px;right:13px;bottom:5px;height:2px;background:var(--ember);
    transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{background:var(--ember);color:#FBF4E4}
.site-nav a[aria-current="page"]::after{display:none}
.site-nav i{display:none}
.topbar-cta{display:flex;align-items:center;gap:9px;flex:none}
.topbar-cta .ip-copy{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--rule);
    color:var(--ink);padding:9px 15px;font-family:inherit;font-size:var(--t-sm);cursor:pointer;
    transition:background-color .25s,transform .18s}
.topbar-cta .ip-copy:hover{background:rgba(47,32,16,.08)}
.topbar-cta .ip-copy i{color:var(--ink-3)}
.side-discord{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;background:var(--sea);
    color:var(--paper-2);font-weight:700;font-size:var(--t-sm);letter-spacing:.06em;flex:none;transition:transform .2s,background-color .25s}
.side-discord:hover{background:var(--sea-dk);text-decoration:none;transform:translateY(-2px)}
.menu-btn{display:none;background:var(--ember);color:#FBF4E4;border:none;padding:10px 16px;font-family:inherit;
    font-weight:700;font-size:var(--t-sm);cursor:pointer;align-items:center;gap:7px;flex:none}

.mobile-nav{display:none;position:fixed;left:0;right:0;top:var(--topbar-h);z-index:290;background:var(--paper-2);
    border-bottom:4px double var(--rule);max-height:calc(100vh - var(--topbar-h));overflow-y:auto;padding:10px 16px 20px;
    max-height:calc(100dvh - var(--topbar-h));
    box-shadow:0 18px 30px -20px rgba(47,32,16,.5)}
.mobile-nav.open{display:block}
.mobile-nav ul{list-style:none}
.mobile-nav li+li{margin-top:2px}
.mobile-nav a{display:flex;align-items:center;gap:12px;padding:13px 14px;color:var(--ink);font-weight:700;font-size:var(--t-md)}
.mobile-nav a i{width:20px;text-align:center;color:var(--ember)}
.mobile-nav a[aria-current="page"]{background:var(--ember);color:#FBF4E4}
.mobile-nav a[aria-current="page"] i{color:#FBF4E4}
.mobile-nav .m-server{margin-top:14px;padding-top:16px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:10px}
.mobile-nav .ip-copy{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:13px 15px;
    background:var(--paper);border:1px dashed var(--rule);cursor:pointer;font-family:inherit;text-align:left}
.mobile-nav .ip-copy .lab{display:block;font-size:var(--t-3xs);color:var(--ink-2);letter-spacing:.12em;font-family:var(--f-lat)}
.mobile-nav .ip-copy .val{display:block;font-size:1rem;color:var(--ink);font-weight:700}
.mobile-nav .ip-copy .btn{flex:none;width:32px;height:32px;background:var(--ember);color:#FBF4E4;display:flex;
    align-items:center;justify-content:center;font-size:var(--t-sm)}
.mobile-nav .side-discord{width:100%}

/* Wikiのサブナビ */
.wiki-subnav{position:sticky;top:var(--topbar-h);z-index:200;background:var(--paper-2);
    border-bottom:1px solid var(--rule)}
.wiki-subnav .wrap{display:flex;gap:6px;padding:11px 36px;max-width:1180px;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%)}
.wiki-subnav .wrap::-webkit-scrollbar{display:none}
.wiki-subnav .wrap.more-l{--fl:44px}.wiki-subnav .wrap.more-r{--fr:64px}
.wiki-subnav a{display:flex;align-items:center;gap:7px;padding:7px 15px;background:var(--paper);color:var(--ink-2);
    font-weight:700;font-size:var(--t-xs);white-space:nowrap;flex:none;border:1px solid transparent;transition:all .22s}
.wiki-subnav a:hover{border-color:var(--rule);color:var(--ink);text-decoration:none;transform:translateY(-2px)}
.wiki-subnav a[aria-current="page"]{background:var(--ember);color:#FBF4E4;border-color:var(--ember-dk)}
.wiki-subnav i{color:var(--ember);font-size:var(--t-xs)}
.wiki-subnav a[aria-current="page"] i{color:#FBF4E4}

/* =========================================================
   本文
   ========================================================= */
.main{min-height:100vh;max-width:1180px;margin:0 auto;animation:pageIn .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}}

.page-head{border-bottom:4px double var(--rule);padding:48px 0 34px;position:relative;overflow:hidden}
.page-head::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:
    repeating-linear-gradient(90deg, rgba(120,88,44,.10) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg, rgba(120,88,44,.10) 0 1px, transparent 1px 60px)}
.page-head .wrap{display:flex;align-items:flex-start;gap:20px}
.page-head .num{flex:none;width:52px;height:52px;margin-top:4px;background:var(--ember);color:#FBF4E4;
    display:flex;align-items:center;justify-content:center;font-size:var(--t-lg);
    font-family:var(--f-disp);font-weight:700;box-shadow:4px 4px 0 rgba(47,32,16,.35)}
.page-head .num i{font-size:var(--t-lg)}
.page-head h1{font-size:var(--t-3xl);line-height:1.45;letter-spacing:var(--ls-ttl);font-weight:800}
.page-head p{color:var(--ink-2);font-size:var(--t-md);margin-top:10px;max-width:42em;line-height:1.9;word-break:auto-phrase}
.page-head .kicker{display:flex;align-items:center;gap:10px;font-family:var(--f-caps);font-weight:600;
    font-size:var(--t-2xs);text-transform:uppercase;color:var(--ember-dk);letter-spacing:var(--ls-caps);
    margin-bottom:8px}
.page-head .kicker::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

section{padding:52px 0}
section+section{border-top:1px solid var(--line);position:relative}
section+section::before{content:'';position:absolute;left:50%;top:-5px;width:9px;height:9px;
    background:var(--paper);border:1px solid var(--rule);transform:translateX(-50%) rotate(45deg)}

h2.sec{font-size:var(--t-2xl);font-weight:800;margin-bottom:10px;display:flex;align-items:baseline;gap:14px;
    letter-spacing:var(--ls-ttl);line-height:1.5}
h2.sec::before{content:'';align-self:center;width:9px;height:9px;flex:none;background:var(--ember);
    transform:rotate(45deg);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--line)}

.sec-note{color:var(--ink-2);font-size:var(--t-md);margin-bottom:28px;max-width:42em;line-height:1.95;word-break:auto-phrase}

/* =========================================================
   部品
   ========================================================= */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:14px 28px;
    border:none;font-family:var(--f-body);font-weight:700;font-size:var(--t-md);letter-spacing:.1em;cursor:pointer;
    transition:transform .14s ease,box-shadow .14s ease}
.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.22);transform:translateX(-101%);
    transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.btn:hover::before{transform:translateX(0)}
.btn.fill{background:linear-gradient(180deg,var(--sea-lt) -40%,var(--sea) 42%,var(--sea-dk));color:#FBF4E4;
    box-shadow:var(--sh-2),0 1px 0 rgba(255,255,255,.25) inset;border:1px solid var(--sea-dk)}
.btn.fill:hover{box-shadow:var(--sh-3),0 1px 0 rgba(255,255,255,.3) inset}
.btn.fill:hover{text-decoration:none}
.btn.plain{background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));color:var(--ink);
    border:1px solid var(--rule-dk);box-shadow:var(--sh-2),var(--sh-1)}
.btn.plain:hover{border-color:var(--ink);box-shadow:var(--sh-3),var(--sh-1)}
.btn.plain:hover{text-decoration:none}
.btn:active{transform:translate(3px,3px)}
.btn.fill:active{box-shadow:1px 1px 0 rgba(47,32,16,.4)}

.tag{display:inline-block;padding:4px 12px;font-family:var(--f-caps);font-size:var(--t-2xs);font-weight:600;
    text-transform:uppercase;letter-spacing:.14em;line-height:1.5;white-space:nowrap;
    border:1px solid currentColor;vertical-align:.14em}
.tag.honey{color:#6E5218;background:rgba(176,138,50,.16);border-color:rgba(138,104,32,.5)}
.tag.moss{color:#2F5A2A;background:rgba(60,104,54,.15);border-color:rgba(60,104,54,.45)}
.tag.brick{color:var(--ember-dk);background:rgba(147,48,28,.13);border-color:rgba(147,48,28,.42)}

/* 手順 */
.steps{list-style:none;position:relative}
.steps::before{content:'';position:absolute;left:23px;top:14px;bottom:14px;width:2px;
    background:repeating-linear-gradient(0deg,var(--rule) 0 4px,transparent 4px 10px)}
.steps>li{position:relative;padding:0 0 28px 64px}
.steps>li:last-child{padding-bottom:0}
.steps .n{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:var(--paper-2);
    border:2px solid var(--ember);color:var(--ember-dk);display:flex;align-items:center;justify-content:center;
    font-family:var(--f-disp);font-weight:700;font-size:var(--t-lg);z-index:1}
.steps h3{font-size:var(--t-lg);margin-bottom:5px}
.steps p{color:var(--ink-2);font-size:var(--t-md)}

/* 表 */
.spec{width:100%;border-collapse:collapse;font-size:var(--t-md)}
.spec th,.spec td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left}
.spec{font-variant-numeric:lining-nums tabular-nums}
.spec th{width:38%;color:var(--ink-2);font-weight:700;background:rgba(120,88,44,.10);
    letter-spacing:.06em;font-size:var(--t-sm);word-break:auto-phrase}
.spec td{font-variant-numeric:tabular-nums}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:none}
.table-wrap{overflow-x:auto;border:1px solid var(--rule);background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));
    box-shadow:var(--sh-2),var(--sh-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.table-wrap:hover{transform:translateY(-3px);box-shadow:8px 10px 0 rgba(47,32,16,.18)}

/* 2列 */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.duo .col{border:1px solid var(--rule);overflow:hidden;background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));
    box-shadow:var(--sh-2),var(--sh-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.duo .col:hover{transform:translateY(-4px);box-shadow:9px 11px 0 rgba(47,32,16,.18)}
.duo .col>h3{padding:13px 18px;font-size:1rem;color:var(--paper-2);display:flex;align-items:center;gap:9px;letter-spacing:.06em}
.duo .col.no>h3{background:var(--brick)}
.duo .col.ok>h3{background:var(--moss)}
.duo .col.step-a>h3{background:var(--sea)}
.duo .col.step-b>h3{background:var(--honey)}
.duo ul{list-style:none;padding:14px 18px 18px}
.duo li{position:relative;padding-left:24px;margin-bottom:10px;font-size:var(--t-md)}
.duo li::before{position:absolute;left:0;font-weight:700}
.duo .no li::before{content:'×';color:var(--brick)}
.duo .ok li::before{content:'○';color:var(--moss)}
.duo .step-a li::before,.duo .step-b li::before{content:'▸';color:var(--ember-dk)}

/* 記事一覧の行 */
.rows{display:flex;flex-direction:column;gap:22px}
.row-item{display:grid;grid-template-columns:58px 1fr;gap:20px;padding-bottom:22px;border-bottom:1px dashed var(--line)}
.rows .row-item:last-child{border-bottom:none;padding-bottom:0}
.row-item .ico{width:58px;height:58px;background:var(--paper-2);border:1px solid var(--rule);display:flex;
    align-items:center;justify-content:center;font-size:var(--t-xl);color:var(--ember-dk);
    transition:transform .3s cubic-bezier(.3,1.4,.4,1),background-color .3s}
.row-item:hover .ico{transform:rotate(-6deg) scale(1.06);background:var(--honey-lt)}
.row-item h3{font-size:var(--t-lg);margin-bottom:6px}
.row-item p{color:var(--ink-2);font-size:var(--t-md);margin-bottom:4px}
.row-item ol,.row-item ul{margin:6px 0 0 18px;color:var(--ink-2);font-size:var(--t-md)}

/* 注意書き */
.callout{display:flex;gap:14px;background:linear-gradient(90deg,rgba(147,48,28,.13),rgba(147,48,28,.05));
    border:1px solid rgba(147,48,28,.28);border-left:4px solid var(--brick);
    padding:17px 20px;margin-bottom:26px;font-size:var(--t-md)}
.callout i{color:var(--brick);font-size:var(--t-lg);margin-top:4px}

/* FAQ */
.faq{border:1px solid var(--rule);overflow:hidden;background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));
    box-shadow:var(--sh-2),var(--sh-1)}
.faq>div+div{border-top:1px solid var(--line)}
.faq button{width:100%;background:none;border:none;cursor:pointer;font-family:inherit;padding:18px 20px;text-align:left;
    font-weight:700;font-size:var(--t-md);color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px;
    transition:background-color .25s}
.faq button:hover{background:rgba(120,88,44,.10)}
.faq button i{color:var(--ember);transition:transform .35s cubic-bezier(.3,1.4,.4,1);flex:none}
.faq .ans{max-height:0;overflow:hidden;transition:max-height .35s ease-out}
.faq .ans p{padding:0 20px 18px;color:var(--ink-2);font-size:var(--t-md)}
.faq .open button i{transform:rotate(180deg)}
.faq .open .ans{max-height:340px}

/* お知らせ */
.news{list-style:none;display:flex;flex-direction:column;gap:16px}
.news li{position:relative;display:grid;grid-template-columns:110px 1fr;gap:20px;padding:24px 26px;
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));border:1px solid var(--rule);
    box-shadow:var(--sh-2),var(--sh-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.news li:hover{transform:translateY(-5px) rotate(-.3deg);box-shadow:9px 11px 0 rgba(47,32,16,.2)}
.news li::before{content:'';position:absolute;top:-9px;left:26px;width:18px;height:18px;background:var(--ember);
    border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 0 2px var(--paper-hi);
    transition:transform .3s cubic-bezier(.3,1.5,.4,1)}
.news li:hover::before{transform:rotate(-45deg) scale(1.28)}
.news .when{font-family:var(--f-lat);font-size:var(--t-sm);color:var(--ink-3);letter-spacing:.05em;
    padding-top:5px;font-variant-numeric:oldstyle-nums proportional-nums}
.news h3{font-size:var(--t-lg);margin-bottom:6px;line-height:1.7}
.news p{color:var(--ink-2);font-size:var(--t-sm)}
.news .more{display:inline-block;margin-top:8px;font-size:var(--t-sm);font-weight:700}
.news-all{margin-top:20px;text-align:right}
.news-all a{font-weight:700;font-size:var(--t-md)}

.page-head+.wrap>.news-article:first-child{padding-top:44px}
.news-article p{color:var(--ink-2);font-size:var(--t-md);max-width:62ch}
.news-article p+p{margin-top:16px}
.news-back{margin:34px 0 56px;padding-top:22px;border-top:1px dashed var(--line)}
.news-back a{font-weight:700}

/* 臨時アドレス */
.addr{list-style:none;display:flex;flex-direction:column;gap:12px}
.addr li{display:flex;align-items:center;flex-wrap:wrap;gap:14px;border:1px solid var(--rule);
    border-left:4px solid var(--ember);padding:16px 18px;
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));box-shadow:var(--sh-1);
    transition:transform .25s ease,box-shadow .25s}
.addr li:hover{transform:translateX(4px);box-shadow:var(--sh-2),var(--sh-1)}
.addr .when{font-weight:700;color:var(--ember-dk);min-width:92px;font-size:var(--t-sm);font-family:var(--f-lat)}
.addr .host{flex:1;font-size:1rem;font-weight:700;word-break:break-all}

/* プレイヤー統計 */
.finder{border:3px double var(--rule);padding:24px;background:var(--paper-2);box-shadow:var(--sh-2),var(--sh-1)}
.finder .field{display:flex;gap:10px;flex-wrap:wrap}
.finder input{flex:1 1 200px;padding:13px 15px;font-family:inherit;font-size:var(--t-md);border:1px solid var(--rule);
    background:var(--paper);color:var(--ink);transition:border-color .25s,box-shadow .25s}
.finder input:focus{border-color:var(--ember);outline:none;box-shadow:0 0 0 3px rgba(142,46,28,.14)}
#statErr{color:var(--brick);font-weight:700;font-size:var(--t-sm);margin-top:12px;display:none}
#statOut{display:none;margin-top:18px}
#statOut h3{font-size:var(--t-lg);padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:6px}

/* 接続履歴 */
.log{max-height:420px;overflow-y:auto;border:1px solid var(--rule);padding:18px 20px;background:var(--paper-2);
    box-shadow:var(--sh-2),var(--sh-1)}
.log ul{list-style:none;position:relative;padding-left:22px;
    border-left:2px dashed var(--line)}
.log li{position:relative;margin-bottom:16px;font-size:var(--t-sm)}
.log li::before{content:'';position:absolute;left:-29px;top:7px;width:11px;height:11px;border-radius:50%;
    background:var(--ink-3);border:2px solid var(--paper-2)}
.log li.on::before{background:var(--moss);box-shadow:0 0 0 3px rgba(63,107,58,.22)}
.log .who{font-weight:700}
.log .at{font-size:var(--t-xs);color:var(--ink-2)}
.muted{color:var(--ink-2);font-size:var(--t-sm);text-align:center;padding:18px}

/* =========================================================
   ホームの海図ヒーロー
   ========================================================= */
.chartzone{position:relative;isolation:isolate;overflow:hidden;min-height:880px;background:var(--paper);display:flex;align-items:stretch;
    border-bottom:4px double var(--rule)}
.chartzone .chartmap{position:absolute;inset:0;z-index:0;will-change:transform;transform:translateZ(0)}
.chartzone .chart{position:absolute;inset:0;width:100%;height:100%;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.chartzone .chart-fx{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E"),radial-gradient(ellipse 96% 112% at 50% 46%,rgba(58,42,20,0) 58%,rgba(58,42,20,.42) 100%),radial-gradient(ellipse 6.5% 12.4% at 38.2% 74.0%,rgba(122,90,44,0.070) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 8.9% 10.8% at 27.7% 51.4%,rgba(122,90,44,0.130) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 5.8% 9.3% at 9.1% 23.2%,rgba(122,90,44,0.096) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 6.4% 8.9% at 81.8% 44.0%,rgba(122,90,44,0.076) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 8.8% 10.7% at 15.2% 30.3%,rgba(122,90,44,0.093) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 7.1% 10.6% at 80.7% 48.6%,rgba(122,90,44,0.116) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 8.7% 7.1% at 78.9% 61.7%,rgba(122,90,44,0.161) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 5.3% 8.3% at 27.1% 78.0%,rgba(122,90,44,0.166) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 5.6% 7.3% at 81.9% 35.0%,rgba(122,90,44,0.147) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 9.6% 12.9% at 74.6% 29.0%,rgba(122,90,44,0.109) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 4.8% 9.1% at 65.5% 75.3%,rgba(122,90,44,0.073) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 8.2% 8.0% at 17.7% 11.0%,rgba(122,90,44,0.093) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 6.1% 9.1% at 93.9% 51.2%,rgba(122,90,44,0.157) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 6.4% 9.9% at 80.1% 62.4%,rgba(122,90,44,0.086) 0%,rgba(122,90,44,0) 72%);background-size:220px 220px,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto;background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat}
.chartzone .overlay{position:absolute;inset:0;z-index:1;
    background:radial-gradient(120% 90% at 50% 15%, rgba(233,214,163,.08), rgba(233,214,163,.32) 75%)}
.opening{position:relative;z-index:3;width:100%;padding:52px 0 40px;display:flex;align-items:center;background:transparent}
.opening .grid{display:grid;grid-template-columns:560px 1fr;gap:40px;align-items:start;min-height:740px}

.cartouche{position:relative;padding:40px 40px 36px;margin-top:16px;
    background:linear-gradient(180deg, rgba(246,234,203,.97), rgba(236,219,177,.95));border:3px solid var(--ink);
    box-shadow:0 0 0 1px var(--ink) inset, 0 0 0 7px rgba(246,234,203,.85), 0 0 0 9px var(--ink), 14px 16px 30px rgba(47,32,16,.35)}
.cartouche .cnr{position:absolute;width:26px;height:26px;border:2px solid var(--ember);opacity:.85}
.cartouche .c1{top:10px;left:10px;border-right:none;border-bottom:none}
.cartouche .c2{top:10px;right:10px;border-left:none;border-bottom:none}
.cartouche .c3{bottom:10px;left:10px;border-right:none;border-top:none}
.cartouche .c4{bottom:10px;right:10px;border-left:none;border-top:none}
.opening .eyebrow{display:flex;align-items:center;gap:12px;color:var(--ember-dk);font-family:var(--f-caps);
    font-weight:600;text-transform:uppercase;font-size:var(--t-2xs);letter-spacing:var(--ls-caps);
    margin-bottom:20px}
.opening .eyebrow::before,.opening .eyebrow::after{content:'';height:1px;background:var(--ember-dk);flex:1;max-width:56px;
    transform-origin:left}
.opening h1{font-size:var(--t-4xl);font-weight:800;line-height:1.5;letter-spacing:var(--ls-ttl);
    margin-bottom:12px;word-break:auto-phrase}
.opening h1 em{font-style:normal;color:var(--ember);background-image:linear-gradient(rgba(142,46,28,.35),rgba(142,46,28,.35));
    background-repeat:no-repeat;background-position:0 88%;background-size:0 2px}
.opening .sub{font-family:var(--f-lat);font-style:italic;color:var(--ink-3);letter-spacing:.06em;
    margin-bottom:24px;font-size:var(--t-lg);line-height:1.6}
.opening .lead{color:var(--ink-2);font-size:var(--t-md);max-width:var(--measure);margin-bottom:30px;line-height:2}
.opening .lead::first-letter{float:left;font-family:var(--f-disp);font-weight:600;color:var(--ember-dk);
    font-size:3.1em;line-height:.82;margin:.08em .14em 0 0}
.opening .cta{display:flex;gap:14px;flex-wrap:wrap}

.logbook{width:360px;margin-left:auto;margin-top:290px;background:linear-gradient(180deg,var(--paper-hi),#E9D6A8);
    border:3px double var(--ink);padding:18px;box-shadow:12px 14px 26px rgba(47,32,16,.4);transform:rotate(-1.2deg);
    transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.logbook:hover{transform:rotate(0) translateY(-6px);box-shadow:16px 20px 34px rgba(47,32,16,.45)}
.logbook .ttl{display:flex;align-items:center;justify-content:space-between;font-family:var(--f-lat);font-style:italic;
    font-size:var(--t-xs);color:var(--ink-2);letter-spacing:.1em;margin-bottom:12px;border-bottom:1px solid var(--rule);padding-bottom:8px}
.logbook .shot{border:1px solid var(--ink);aspect-ratio:4/3;overflow:hidden;margin-bottom:14px}
.logbook .shot img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.45) contrast(1.06) saturate(.85);
    animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.09)}}
.logbook .ip-row{display:flex;align-items:center;gap:14px;border:1px dashed var(--rule);padding:12px 14px;
    background:rgba(242,227,188,.7);width:100%;font-family:inherit;text-align:left;cursor:pointer}
.logbook .ip-row .lab{font-family:var(--f-lat);font-style:italic;font-size:var(--t-3xs);color:var(--ink-2);
    letter-spacing:.12em;display:block}
.logbook .ip-row .val{font-size:var(--t-lg);font-weight:700;display:block}
.logbook .ip-row .go{margin-left:auto;width:38px;height:38px;border-radius:50%;background:var(--sea);color:var(--paper-2);
    display:flex;align-items:center;justify-content:center;flex:none;transition:transform .3s cubic-bezier(.3,1.5,.4,1)}
.logbook:hover .ip-row .go{transform:translateX(4px) scale(1.08)}
.status-row{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);color:var(--ink-2);padding:10px 3px 0}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none;position:relative}
.dot-live.on{background:var(--moss)}
.dot-live.on::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;
    animation:ripple 1.9s infinite ease-out}
@keyframes ripple{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;color:var(--ink);
    font-family:var(--f-lat);font-style:italic;font-size:var(--t-xs);letter-spacing:.18em}
.scroll-cue i{display:block;text-align:center;margin-top:4px;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(8px);opacity:1}}

/* 数字 */
.facts,.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:3px double var(--rule);
    border-bottom:3px double var(--rule);padding:26px 0;margin-top:30px}
.facts div,.stats div{text-align:center}
.facts dt,.stats dt{font-family:var(--f-lat);font-size:var(--t-4xl);font-weight:600;color:var(--ember-dk);
    font-variant-numeric:lining-nums tabular-nums;line-height:1.3}
.stats dt{font-size:var(--t-5xl);color:var(--ink)}
.facts dd,.stats dd{font-family:var(--f-caps);font-weight:600;text-transform:uppercase;
    font-size:var(--t-2xs);color:var(--ink-2);letter-spacing:var(--ls-caps);margin-top:5px}
.stats .unit{font-size:1rem;margin-left:4px;color:var(--ink-2)}

/* 柱 */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.pillars>div{padding:28px 24px;background:linear-gradient(180deg,var(--paper-hi),var(--paper-3));border:1px solid var(--rule);
    box-shadow:var(--sh-2),var(--sh-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pillars>div:hover{transform:translateY(-7px);box-shadow:10px 12px 0 rgba(47,32,16,.2)}
.pillars .k{font-family:var(--f-caps);font-weight:600;text-transform:uppercase;font-size:var(--t-2xs);
    letter-spacing:var(--ls-caps);color:var(--ember-dk)}
.pillars h3{font-size:var(--t-lg);margin:8px 0 8px}
.pillars p{font-size:var(--t-sm);color:var(--ink-2)}

/* 資源リセット */
.reset{background:linear-gradient(180deg,var(--paper-hi),var(--paper-3));border:3px double var(--rule);
    padding:30px;text-align:center;box-shadow:var(--sh-3),var(--sh-1)}
.reset .lab{font-family:var(--f-lat);font-style:italic;color:var(--ink-2);font-size:var(--t-sm);letter-spacing:.1em}
.reset .big{font-family:var(--f-lat);font-size:var(--t-5xl);font-weight:600;line-height:1.2;
    font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
.reset .sub{color:var(--ember-dk);font-weight:700;font-size:var(--t-sm);font-variant-numeric:tabular-nums;font-family:var(--f-lat)}
.reset .bar{height:12px;background:rgba(47,32,16,.14);border:1px solid var(--rule);margin-top:16px;overflow:hidden}
.reset .bar i{display:block;height:100%;width:0;
    background:repeating-linear-gradient(90deg,var(--ember) 0 8px,#A8503C 8px 16px);
    transition:width 1.8s cubic-bezier(.2,.8,.2,1)}

/* 写真の帯 */
.strip{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0}
.strip .track{display:flex;gap:16px;width:max-content;animation:marquee 46s linear infinite}
.strip:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.strip img{width:290px;height:174px;object-fit:cover;border:1px solid var(--rule);display:block;
    filter:sepia(.42) contrast(1.05);transition:filter .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.strip img:hover{filter:sepia(0) contrast(1);transform:scale(1.05)}

/* 締めの帯 */
.closing{background:linear-gradient(145deg,#41626F 0%,var(--sea) 46%,var(--sea-dk) 100%);color:#FBF4E4;
    text-align:center;padding:60px 40px;
    border:3px double var(--rule);position:relative;overflow:hidden;margin:0 max(36px,calc((100% - 1008px) / 2)) 56px}
.closing::before{content:'';position:absolute;inset:0;background-image:
    repeating-linear-gradient(90deg,rgba(242,227,188,.06) 0 1px,transparent 1px 60px),
    repeating-linear-gradient(0deg,rgba(242,227,188,.06) 0 1px,transparent 1px 60px);
    animation:gridDrift 24s linear infinite}
@keyframes gridDrift{to{transform:translate(60px,60px)}}
.closing h2{font-size:var(--t-3xl);margin-bottom:10px;position:relative}
.closing p{color:rgba(242,227,188,.82);font-size:var(--t-md);margin-bottom:24px;position:relative;word-break:auto-phrase}
.closing .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.closing .btn.plain{background:transparent;color:var(--paper-2);border:1.5px solid rgba(242,227,188,.6);box-shadow:none}
.closing .btn.plain:hover{background:rgba(242,227,188,.12)}

.foot{border-top:4px double var(--rule);padding:26px 0 56px;text-align:center;color:var(--ink-3);font-size:var(--t-2xs);
    font-family:var(--f-caps);font-weight:600;text-transform:uppercase;
    letter-spacing:.12em;font-family:var(--f-lat)}

/* 404 */
.lost{border:3px double var(--rule);overflow:hidden;box-shadow:6px 7px 0 rgba(47,32,16,.18);background:var(--paper-2);
    line-height:0;margin-bottom:28px}
.lost img{width:100%;height:auto;display:block;image-rendering:pixelated}

/* トースト */
.toast{position:fixed;left:50%;bottom:-80px;transform:translateX(-50%);background:var(--ink);color:var(--paper-2);
    padding:14px 26px;font-weight:700;font-size:var(--t-sm);z-index:400;display:flex;align-items:center;gap:10px;
    transition:bottom .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 14px 30px rgba(47,32,16,.45)}
.toast.show{bottom:26px}
.toast i{color:var(--honey-lt)}

/* 記事の前後 */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:32px 0 48px;border-top:1px dashed var(--line)}
.pager a{display:block;padding:17px 20px;background:var(--paper-2);border:1px solid var(--rule);
    box-shadow:4px 5px 0 rgba(47,32,16,.14);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.pager a:hover{text-decoration:none;transform:translateY(-3px);box-shadow:7px 8px 0 rgba(47,32,16,.2)}
.pager .lab{display:block;font-family:var(--f-lat);font-size:var(--t-3xs);color:var(--ink-3);letter-spacing:.14em;margin-bottom:3px}
.pager .ttl{display:block;font-size:1rem;color:var(--ink)}
.pager .next{grid-column:2;text-align:right}

/* =========================================================
   航路レール（スクロール）
   ========================================================= */
.rail{position:fixed;left:12px;top:92px;bottom:64px;width:40px;z-index:25;pointer-events:none;opacity:0;
    transition:opacity .6s ease}
.rail.show{opacity:.9}
.rail svg{width:100%;height:100%}
.rail-line{stroke-dashoffset:calc(1 - var(--p,0))}
.rail-ship{position:absolute;left:50%;top:0;width:26px;height:26px;margin-left:-13px;margin-top:-13px;display:flex;
    align-items:center;justify-content:center;color:var(--ember);font-size:var(--t-md);background:var(--paper-2);
    border:1.5px solid var(--ember);border-radius:50%;transition:top .18s linear,transform .3s ease}
@media(max-width:1240px){.rail{display:none}}

/* インクバー（ホームの描画進捗） */
.inkbar{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--ember),var(--ink));
    transform-origin:0 50%;transform:scaleX(0);z-index:600}
.has-chart .inkbar{animation:inkbar 4.7s cubic-bezier(.3,.7,.35,1) forwards, inkfade .5s 4.9s forwards}
@keyframes inkbar{to{transform:scaleX(1)}}
@keyframes inkfade{to{opacity:0}}

/* =========================================================
   海図の描画アニメーション
   ========================================================= */
@keyframes drawln{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:var(--o,1)}}
@keyframes unfurl{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.chartmap{opacity:0;animation:fadeIn .7s ease-out both}
/* 最初の描画が落ち着いてから走らせる（出だしのカクつき防止） */
.has-chart:not(.go) .chartmap,.has-chart:not(.go) .chart .draw,.has-chart:not(.go) .chart .fade,
.has-chart:not(.go) .cartouche,.has-chart:not(.go) .cartouche .cnr,
.has-chart:not(.go) .logbook,.has-chart:not(.go) .scroll-cue,
.has-chart:not(.go) .inkbar{animation-play-state:paused}
.chart .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:drawln var(--dur,1s) cubic-bezier(.3,.7,.35,1) var(--d,0s) forwards}
.chart .fade{opacity:0;animation:fadeIn var(--dur,.7s) ease-out var(--d,0s) forwards}
@keyframes waveShift{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.chart .waves{animation:waveShift 7s ease-in-out 5s infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.chart .ship-inner{animation:bob 3.4s ease-in-out 6s infinite}
@keyframes roseSpin{from{transform:rotate(-26deg) scale(.9)}to{transform:rotate(0) scale(1)}}
.chart .rose-star{transform-origin:0 0;animation:roseSpin 1.4s cubic-bezier(.2,.9,.25,1) 3.1s backwards;
    transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.chart .town{transition:transform .3s cubic-bezier(.3,1.5,.4,1);transform-origin:center}
.chart .town:hover{transform:scale(1.18)}

/* ヒーローは地図を描き終えてから */
@keyframes cartIn{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}}
@keyframes logIn{from{opacity:0;transform:translateY(40px) rotate(-8deg)}
    70%{opacity:1;transform:translateY(-4px) rotate(.6deg)}to{opacity:1;transform:rotate(-1.2deg)}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes underline{to{background-size:100% 2px}}
.has-chart .cartouche{opacity:0;animation:cartIn .95s cubic-bezier(.2,.8,.2,1) 4.8s forwards}
.has-chart .logbook{opacity:0;animation:logIn 1.1s cubic-bezier(.2,.8,.2,1) 5.15s forwards}
.has-chart .cartouche .cnr{opacity:0;animation:fadeIn .45s ease-out 5.7s forwards}
.has-chart .opening .eyebrow::before,.has-chart .opening .eyebrow::after{animation:lineGrow .6s ease-out 5.5s backwards}
.has-chart .opening h1 em{animation:underline .9s cubic-bezier(.2,.8,.2,1) 5.6s forwards}
.has-chart .scroll-cue{opacity:0;animation:fadeIn .6s ease-out 6s forwards}

/* ナビの登場 */
@keyframes navDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.topbar .brand,.topbar .site-nav li,.topbar-cta>*{opacity:0;animation:navDown .5s ease-out forwards}
.topbar .brand{animation-delay:.08s}
.site-nav li:nth-child(1){animation-delay:.18s}.site-nav li:nth-child(2){animation-delay:.24s}
.site-nav li:nth-child(3){animation-delay:.3s}.site-nav li:nth-child(4){animation-delay:.36s}
.site-nav li:nth-child(5){animation-delay:.42s}.site-nav li:nth-child(6){animation-delay:.48s}
.site-nav li:nth-child(7){animation-delay:.54s}.site-nav li:nth-child(8){animation-delay:.6s}
.topbar-cta>*:nth-child(1){animation-delay:.66s}.topbar-cta>*:nth-child(2){animation-delay:.72s}

/* スクロールで出る */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .75s cubic-bezier(.2,.8,.2,1);
    transition-delay:calc(var(--i,0)*.1s)}
[data-rv].in{opacity:1;transform:none}
.sec-underline{position:relative}
.sec-underline::after{content:'';position:absolute;left:0;right:0;bottom:-10px;height:4px;background:none;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);opacity:.8;
    transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1) .15s}
.sec-underline.in::after{transform:scaleX(1)}
.reset.in .bar i{width:var(--w,60%)}
.svg-draw path,.svg-draw circle{stroke-dasharray:1;stroke-dashoffset:1;animation:drawln 1.1s ease forwards;
    animation-play-state:paused}
.in .svg-draw path,.in .svg-draw circle{animation-play-state:running}

/* =========================================================
   投票（MinePortal）
   ========================================================= */
.vote-card{display:flex;align-items:center;gap:22px;padding:22px 26px;text-decoration:none;color:var(--ink);
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));border:1px solid var(--rule);
    box-shadow:var(--sh-2),var(--sh-1);position:relative;overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.vote-card::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 35%,rgba(255,250,238,.65) 50%,transparent 65%);
    transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.vote-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3),var(--sh-1);color:var(--ink);background-image:linear-gradient(180deg,var(--paper-hi),var(--paper-2))}
.vote-card:hover::after{transform:translateX(120%)}
/* 封蝋 */
.vote-seal{flex:none;width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#FBF4E4;font-size:1.5rem;position:relative;
    background:radial-gradient(circle at 35% 30%,#C0563E,var(--ember) 55%,var(--ember-dk));
    box-shadow:0 0 0 4px rgba(147,48,28,.18),inset 0 -3px 6px rgba(0,0,0,.25),inset 0 2px 4px rgba(255,255,255,.2);
    transition:transform .5s cubic-bezier(.3,1.5,.4,1)}
.vote-seal::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px dashed rgba(147,48,28,.45);
    animation:sealTurn 14s linear infinite}
.vote-card:hover .vote-seal{transform:rotate(-14deg) scale(1.08)}
.vote-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.vote-k{font-family:var(--f-caps);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-caps);
    font-size:var(--t-2xs);color:var(--ember-dk)}
.vote-t{font-size:var(--t-xl);font-weight:800;letter-spacing:var(--ls-ttl);line-height:1.4}
.vote-s{font-size:var(--t-xs);color:var(--ink-3)}
.vote-go{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--rule);color:var(--ember-dk);transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s,color .3s}
.vote-card:hover .vote-go{transform:translateX(6px);background:var(--ember);color:#FBF4E4;border-color:var(--ember-dk)}
.vote-card.in .vote-seal{animation:stampIn .75s cubic-bezier(.2,1.4,.3,1) .15s backwards}
@keyframes stampIn{from{transform:scale(2.2) rotate(-30deg);opacity:0}60%{opacity:1}}
@keyframes sealTurn{to{transform:rotate(360deg)}}

/* =========================================================
   アニメーション追加
   （transform / opacity だけを動かす。終わったら元のスタイルに戻る
     backwards 指定にして、ホバー時の動きを邪魔しない）
   ========================================================= */
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes slideR{from{opacity:0;transform:translateX(-26px)}}
@keyframes popIn{from{opacity:0;transform:scale(.4) rotate(-20deg)}}
@keyframes inkIn{from{clip-path:inset(0 100% 0 0);opacity:.3}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes stamp{from{opacity:0;transform:scale(1.7) rotate(-14deg)}70%{opacity:1;transform:scale(.94) rotate(2deg)}}
@keyframes diaSpin{from{transform:rotate(-315deg) scale(0)}}
@keyframes pinDrop{from{opacity:0;transform:translateY(-26px) rotate(45deg)}70%{opacity:1;transform:translateY(3px) rotate(45deg)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes barFlow{to{background-position:32px 0}}

/* ページ見出し：墨で書くように左から現れる／番号札は判を押すように */
.page-head h1{animation:inkIn 1s cubic-bezier(.2,.8,.2,1) .15s backwards}
.page-head .num{animation:stamp .7s cubic-bezier(.2,.8,.2,1) .05s backwards}
.page-head p{animation:rise .7s cubic-bezier(.2,.8,.2,1) .45s backwards}
.page-head .kicker{animation:rise .6s cubic-bezier(.2,.8,.2,1) .05s backwards}

/* セクション見出しの菱形がくるっと回って止まる */
.sec-underline.in::before{animation:diaSpin .9s cubic-bezier(.2,.8,.2,1) backwards}

/* 並んだものは一つずつ順番に */
.news.in>li{animation:slideR .6s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),10)*70ms) backwards}
.news.in>li::before{animation:pinDrop .6s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),10)*70ms + .2s) backwards}
.pillars.in>div{animation:rise .7s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*110ms) backwards}
.steps.in>li{animation:rise .6s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*110ms) backwards}
.faq.in>div{animation:rise .5s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),10)*55ms) backwards}
.addr.in>li{animation:slideR .55s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*80ms) backwards}
.duo.in>.col{animation:rise .7s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*130ms) backwards}
.table-wrap.in tbody tr{animation:slideR .5s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),12)*45ms + .1s) backwards}
.row-item.in .ico{animation:popIn .6s cubic-bezier(.3,1.5,.4,1) .1s backwards}
.callout.in>i{animation:popIn .6s cubic-bezier(.3,1.5,.4,1) .15s backwards}
.wiki-subnav .wrap>a{animation:navDown .45s ease-out calc(min(var(--k,0),14)*35ms + .1s) backwards}

/* ちょっとした動き */
.tag{transition:transform .2s}
.news li:hover .tag,.tag:hover{animation:wiggle .45s ease-in-out}
.row-item:hover .ico{animation:floaty 1.4s ease-in-out infinite}
.reset .bar i{background-size:32px 100%;animation:barFlow 1.2s linear infinite}
.news-all a i,.news .more{transition:transform .25s}
.news-all a:hover i{transform:translateX(5px)}
.news .more:hover{transform:translateX(4px)}

/* 最初のボタンに、波紋がゆっくり広がる（輪郭線だけを動かす） */
@keyframes ctaRing{from{outline:1.5px solid rgba(55,86,99,.6);outline-offset:0}
    to{outline:1.5px solid rgba(55,86,99,0);outline-offset:12px}}
.opening .cta .btn.fill{animation:ctaRing 2.4s ease-out 6.5s infinite}

/* ---------- サイト全体の動き（第2弾） ---------- */
@keyframes menuDown{from{opacity:0;transform:translateY(-14px)}}
@keyframes pageOut{to{opacity:0;transform:translateY(-10px)}}

/* ページを移るとき、ふっと消えてから次へ */
body.leaving .main{animation:pageOut .22s ease-in forwards}

/* 上のバー：少しスクロールすると影が落ちる */
.topbar{transition:box-shadow .3s ease}
.topbar.scrolled{box-shadow:0 10px 22px -14px rgba(47,32,16,.55)}

/* スマホのメニュー：下りてきて、項目が順に並ぶ */
.mobile-nav.open{animation:menuDown .32s cubic-bezier(.2,.8,.2,1)}
.mobile-nav.open ul>li{animation:slideR .4s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*40ms + .05s) backwards}
.mobile-nav.open .m-server{animation:rise .45s cubic-bezier(.2,.8,.2,1) .35s backwards}
.menu-btn i{transition:transform .35s cubic-bezier(.3,1.4,.4,1)}
.menu-btn[aria-expanded="true"] i{transform:rotate(90deg)}

/* お知らせの記事は段落ごとに */
.news-article.in>*{animation:rise .6s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),8)*90ms) backwards}

/* 前後のページ送り */
.pager.in>a{animation:rise .6s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*120ms) backwards}
.pager .lab i{display:inline-block;transition:transform .25s}
.pager .prev:hover .lab i{transform:translateX(-5px)}
.pager .next:hover .lab i{transform:translateX(5px)}

/* ページ見出しのラベル横の線が伸びる */
.page-head .kicker::after{transform-origin:left;animation:lineGrow .9s cubic-bezier(.2,.8,.2,1) .35s backwards}

/* 写真は近づくと少し寄る */
.logbook .shot img{transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s}
.logbook:hover .shot img{transform:scale(1.07);filter:sepia(.2) contrast(1.04) saturate(.95)}

/* 戻るリンクの矢印 */
.news-back a i{transition:transform .25s}
.news-back a:hover i{transform:translateX(-5px)}

/* 表の行は乗せると色がつく */
.spec tbody tr{transition:background-color .2s}
.spec tbody tr:hover{background:rgba(147,48,28,.06)}

/* フッター：規約へのリンクと、Minecraft非公式の表記 */
.foot p+p{margin-top:8px}
.foot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px}
.foot-links a{color:var(--ink-2);letter-spacing:.14em}
.foot-links a:hover{color:var(--ember)}
.foot-note{font-family:var(--f-body);text-transform:none;font-weight:400;letter-spacing:.04em;
    font-size:var(--t-3xs);color:var(--ink-3);line-height:1.8;max-width:46em;margin-left:auto;margin-right:auto}

/* =========================================================
   質問AI（右下のボタンと会話パネル）
   ========================================================= */
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:450;display:flex;align-items:center;gap:9px;
    padding:12px 18px 12px 14px;border:1px solid var(--ember-dk);cursor:pointer;
    background:linear-gradient(180deg,#B23D22,var(--ember) 55%,var(--ember-dk));color:#FBF4E4;
    font-family:var(--f-body);font-weight:700;font-size:var(--t-sm);letter-spacing:.08em;
    box-shadow:var(--sh-3),0 1px 0 rgba(255,255,255,.25) inset;border-radius:999px;
    transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;animation:rise .6s cubic-bezier(.2,.8,.2,1) 1.2s backwards}
.ai-fab i{font-size:1.15rem;transition:transform .6s cubic-bezier(.3,1.4,.4,1)}
.ai-fab:hover{transform:translateY(-3px)}
.ai-fab:hover i,.ai-fab.open i{transform:rotate(200deg)}
.ai-panel{position:fixed;right:22px;bottom:84px;z-index:449;padding:0;width:min(380px,calc(100vw - 32px));
    height:min(560px,calc(100vh - 140px));display:flex;flex-direction:column;
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));border:1px solid var(--rule);
    box-shadow:var(--sh-3),0 24px 60px -24px rgba(47,32,16,.55);animation:menuDown .3s cubic-bezier(.2,.8,.2,1)}
.ai-panel[hidden]{display:none}
.ai-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
    background:linear-gradient(145deg,#41626F,var(--sea) 50%,var(--sea-dk));color:#FBF4E4;border-bottom:3px double var(--rule)}
.ai-head strong{display:block;font-size:var(--t-md);letter-spacing:.06em}
.ai-k{display:block;font-family:var(--f-caps);font-weight:600;font-size:var(--t-3xs);letter-spacing:.22em;color:rgba(251,244,228,.75)}
.ai-close{background:none;border:none;color:#FBF4E4;font-size:1.1rem;cursor:pointer;width:34px;height:34px}
.ai-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.ai-msg{max-width:90%;font-size:var(--t-sm);line-height:1.85;word-break:break-word;animation:fadeIn .25s ease-out}
/* AIの返事は吹き出しにせず、そのまま文章で */
.ai-msg.bot{align-self:flex-start;color:var(--ink);padding:2px 2px}
/* 自分の質問だけ、うすい色の角丸で */
.ai-msg.me{align-self:flex-end;background:rgba(55,86,99,.12);color:var(--ink);padding:7px 13px;border-radius:16px}
.ai-msg.err{color:var(--ember-dk)}
.ai-msg a{color:var(--ember-dk)}
.ai-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--ink-3);
    animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px}
.ai-chips button{border:1px solid var(--rule);background:var(--paper-hi);color:var(--ink-2);font-family:inherit;
    font-size:var(--t-xs);padding:6px 10px;cursor:pointer;border-radius:999px;transition:background-color .2s,color .2s}
.ai-chips button:hover{background:var(--ember);color:#FBF4E4;border-color:var(--ember-dk)}
.ai-dots{display:inline-flex;gap:4px}
.ai-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:dotPulse 1s ease-in-out infinite}
.ai-dots i:nth-child(2){animation-delay:.15s}.ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes dotPulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.ai-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--paper-2)}
.ai-form textarea{flex:1;resize:none;border:1px solid var(--rule);background:var(--paper-hi);color:var(--ink);
    font-family:inherit;font-size:var(--t-sm);padding:9px 10px;line-height:1.5;max-height:90px}
.ai-form textarea:focus{outline:2px solid var(--sea);outline-offset:0}
.ai-send{flex:none;width:42px;border:1px solid var(--ember-dk);background:var(--ember);color:#FBF4E4;cursor:pointer}
.ai-send:hover{background:var(--ember-dk)}
.ai-note{padding:0 12px 10px;font-size:var(--t-3xs);color:var(--ink-3);line-height:1.7;background:var(--paper-2)}

/* =========================================================
   画面が狭いとき
   ========================================================= */
@media (max-width:980px){
    .site-nav,.topbar-cta .side-discord{display:none}
    .menu-btn{display:flex}
    .wrap{padding:0 20px}
    .page-head{padding:30px 0 24px}
    .page-head h1{font-size:var(--t-2xl)}
    .opening .grid{grid-template-columns:1fr;min-height:0}
    .logbook{width:100%;margin:26px 0 0;transform:rotate(-.6deg)}
    .chartzone{min-height:0}
    .duo,.pillars{grid-template-columns:1fr}
    .facts,.stats{grid-template-columns:1fr 1fr;gap:16px}
    .news li{grid-template-columns:1fr;gap:6px;padding:22px 20px}
    .row-item{grid-template-columns:46px 1fr;gap:14px}
    .row-item .ico{width:46px;height:46px;font-size:var(--t-lg)}
    .pager{grid-template-columns:1fr}
    .pager .next{grid-column:1;text-align:left}
    section{padding:36px 0}
    .closing{margin:0 20px 40px;padding:44px 24px}
    .wiki-subnav .wrap{padding:10px 20px}
    .cartouche{padding:28px 24px 24px;margin-top:0}
    .opening h1{font-size:var(--t-3xl)}
}

/* --- スマホ --- */
@media (max-width:700px){
    /* 上のバー：IP表示を省いてメニューが必ず入るように */
    .topbar{padding:0 14px;gap:10px}
    .topbar-cta .ip-copy{display:none}
    .brand-name{font-size:var(--t-lg)}
    .brand img{width:32px;height:32px}
    .menu-btn{padding:9px 13px;font-size:var(--t-sm)}

    /* 地図は切り取らず全体を見せる */
    .chartzone{min-height:0;padding:0;display:block}
    .chartzone .chartmap{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/11;
        will-change:auto;transform:none;animation-duration:.9s;
        border-bottom:1px solid var(--rule)}
    .chartzone .chart{will-change:auto;transform:none}
    .chartzone .chart-fx{background-size:140px 140px,auto}
    .chartzone .overlay{position:relative;padding:0}
    .chartzone .opening{padding:22px 0 30px}
    .chartzone .opening .grid{gap:0}

    /* 端末が重いので1本ずつ描くのはやめ、完成した地図を出す */
    .chart .draw{stroke-dashoffset:0;animation:none}
    .chart .fade{opacity:var(--o,1);animation:none}
    .chart .waves,.chart .ship-inner{animation:none}
    .has-chart .inkbar{animation:inkbar 1s cubic-bezier(.3,.7,.35,1) forwards,inkfade .4s 1.1s forwards}
    .has-chart .cartouche{animation-delay:.5s}
    .has-chart .logbook{animation-delay:.72s}
    .has-chart .cartouche .cnr{animation-delay:.95s}
    .has-chart .scroll-cue{animation-delay:1.1s}

    /* 余白と文字を詰める */
    .cartouche{padding:20px 16px 18px;margin:0}
    .opening h1{font-size:var(--t-2xl);line-height:1.5}
    .opening .lead{font-size:var(--t-sm);line-height:1.85}
    .opening .eyebrow{font-size:var(--t-3xs);letter-spacing:.14em}
    /* 航海日誌：斜めにしない・少し詰める */
    .logbook{margin:18px 0 0;transform:none;padding:14px;
        box-shadow:0 10px 22px -12px rgba(47,32,16,.5)}
    .logbook:hover{transform:none}
    .logbook .shot{aspect-ratio:16/10;margin-bottom:12px}
    .logbook .ttl{margin-bottom:10px}
    .opening .cta{display:grid;gap:10px}
    .opening .cta>*{width:100%;justify-content:center;text-align:center}
    .rail{display:none}

    /* スクロール案内は重ねずに、いちばん下へ置く */
    .scroll-cue{position:static;transform:none;display:block;text-align:center;
        margin:4px 0 22px;font-size:var(--t-2xs);letter-spacing:.2em}
    .scroll-cue i{margin-top:2px}

    /* 文字を少し詰めて1行に入る量を増やす */
    body{line-height:1.85}
    h2.sec{font-size:var(--t-xl)}
    .sec-note,.news p,.row-item p,.steps p,.duo li,.faq .ans p,.callout,.pillars p{font-size:var(--t-sm)}
    .row-item h3,.steps h3,.pillars h3,.news h3{font-size:1rem}
    section{padding:30px 0}

    .closing h2{font-size:var(--t-2xl);word-break:auto-phrase}
    .ai-fab{right:14px;bottom:14px;padding:11px 15px 11px 12px}
    .ai-panel{right:0;left:0;bottom:0;width:100%;height:78vh;height:78dvh;border-left:none;border-right:none}
    .ai-fab.open{display:none}
    .vote-card{gap:14px;padding:16px}
    .vote-seal{width:52px;height:52px;font-size:1.15rem}
    .vote-t{font-size:var(--t-lg)}
    .vote-go{display:none}
    .opening .cta .btn.fill{animation-delay:1.6s}

    .page-head .wrap{gap:13px}
    .page-head .num{width:42px;height:42px;margin-top:2px}
    .spec{font-size:var(--t-sm)}
    .spec th,.spec td{padding:11px 12px}
    .spec th{width:46%}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
        transition-duration:.001ms!important;scroll-behavior:auto!important}
    .chart .draw{stroke-dashoffset:0}
    .chart .fade,.has-chart .cartouche,.has-chart .logbook,.has-chart .cartouche .cnr,.has-chart .scroll-cue,
    .topbar .brand,.topbar .site-nav li,.topbar-cta>*{opacity:1}
    [data-rv]{opacity:1;transform:none}
    .sec-underline::after{transform:scaleX(1)}
    .has-chart .opening h1 em{background-size:100% 2px}
    .strip .track,.closing::before{animation:none!important}
    .svg-draw path,.svg-draw circle{stroke-dashoffset:0}
    .vote-seal::before,.reset .bar i,.opening .cta .btn.fill{animation:none!important}
    .ai-dots i,.ai-caret{animation:none!important;opacity:.6}
}

/* =========================================================
   サーバーのデータを使うページ（第3弾）
   ランキング・プレイヤー・サーバーの様子・国家図鑑・年表・マップ
   ========================================================= */

/* 取得できないとき・まだ無いとき */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:40px 22px;
    border:1px dashed var(--rule);background:rgba(251,244,228,.45);color:var(--ink-2);font-size:var(--t-sm)}
.empty i{font-size:1.9rem;color:var(--ink-3);animation:floaty 2.6s ease-in-out infinite}
.busy{opacity:.55;transition:opacity .2s}
.muted.left{text-align:left;padding:4px 0}
.count{font-size:var(--t-md);color:var(--ink-3);font-weight:600;margin-left:2px}

/* 顔アイコン（スキン） */
.face{width:var(--fs,30px);height:var(--fs,30px);image-rendering:pixelated;border:1px solid var(--ink);
    background:var(--paper-2);box-shadow:2px 2px 0 rgba(47,32,16,.2);flex:none}
.body-shot{display:block;image-rendering:pixelated;filter:drop-shadow(4px 6px 0 rgba(47,32,16,.22))}
.body-shot.fallback{width:60%;margin:30px auto;filter:sepia(.3)}

/* 切り替えボタン（タブ・絞り込み） */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.tabs button{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1px solid var(--rule);
    background:var(--paper-hi);color:var(--ink-2);font-family:inherit;font-weight:700;font-size:var(--t-sm);
    cursor:pointer;transition:background-color .2s,color .2s,transform .2s,box-shadow .2s}
.tabs button i{color:var(--ember);transition:color .2s}
.tabs button:hover{transform:translateY(-2px);box-shadow:3px 4px 0 rgba(47,32,16,.14)}
.tabs button[aria-selected="true"],.tabs button[aria-pressed="true"]{background:var(--ember);color:#FBF4E4;border-color:var(--ember-dk)}
.tabs button[aria-selected="true"] i,.tabs button[aria-pressed="true"] i{color:#FBF4E4}
.tabs.loaded>button{animation:navDown .4s ease-out calc(var(--k,0)*40ms) backwards}

/* ---------- ランキング ---------- */
.podium{list-style:none;display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:14px;margin:6px 0 30px}
.pod a{display:flex;flex-direction:column;align-items:center;color:var(--ink);text-align:center}
.pod a:hover{color:var(--ink)}
.pod .body-shot{height:150px;width:auto;margin-bottom:8px;transition:transform .35s cubic-bezier(.3,1.4,.4,1)}
.pod a:hover .body-shot{transform:translateY(-6px) rotate(-2deg)}
.pod-1 .body-shot{height:190px}
.pod-name{font-weight:800;font-size:var(--t-lg);line-height:1.4;word-break:break-all}
.pod-val{font-size:var(--t-sm);color:var(--ember-dk);font-weight:700;margin-bottom:10px}
.pod-step{align-self:stretch;display:flex;align-items:flex-start;justify-content:center;padding-top:10px;
    border:2px solid var(--ink);border-bottom:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.pod-1 .pod-step{height:120px;background:linear-gradient(180deg,#E9C870,#C9A13E)}
.pod-2 .pod-step{height:88px;background:linear-gradient(180deg,#E4E0D2,#B9B3A0)}
.pod-3 .pod-step{height:64px;background:linear-gradient(180deg,#D9A57A,#B07A4E)}
.pod-rank{font-size:var(--t-3xl);font-weight:700;color:var(--ink);font-family:var(--f-lat);font-variant-numeric:lining-nums}
.pod.none{visibility:hidden}
.podium .pod{animation:rise .7s cubic-bezier(.2,.8,.2,1) backwards}
.podium .pod-1{animation-delay:.25s}.podium .pod-2{animation-delay:.1s}.podium .pod-3{animation-delay:.4s}
.podium .pod-1 .pod-rank{animation:stamp .6s cubic-bezier(.2,.8,.2,1) .7s backwards;display:inline-block}

.rank-list{list-style:none;border:1px solid var(--rule);background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));
    box-shadow:var(--sh-2),var(--sh-1)}
.rank-list li{display:grid;grid-template-columns:34px 30px minmax(0,1fr) minmax(60px,26%) auto;align-items:center;gap:12px;
    padding:10px 16px;border-bottom:1px solid var(--line);font-size:var(--t-md);transition:background-color .2s}
.rank-list li:last-child{border-bottom:none}
.rank-list li:hover{background:rgba(147,48,28,.06)}
.rank-list a{justify-self:start;max-width:100%;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk{color:var(--ink-3);font-weight:700;text-align:right}
.rbar{height:8px;background:rgba(47,32,16,.1)}
.rbar i{display:block;height:100%;background:var(--honey);border-radius:0 4px 4px 0}
.rv{font-weight:700;text-align:right;white-space:nowrap}
.rank-list.loaded>li{animation:slideR .5s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),15)*35ms) backwards}

/* ---------- プレイヤー ---------- */
.profile{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start}
.portrait{position:relative;border:3px double var(--rule);background:
    radial-gradient(ellipse at 50% 85%,rgba(47,32,16,.18),transparent 55%),
    linear-gradient(180deg,var(--paper-hi),var(--paper-3));padding:22px 10px 34px;text-align:center;
    box-shadow:var(--sh-3),var(--sh-1);animation:rise .7s cubic-bezier(.2,.8,.2,1) backwards}
.portrait .body-shot{height:300px;width:auto;margin:0 auto}
.portrait-cap{position:absolute;left:0;right:0;bottom:8px;font-size:var(--t-3xs);letter-spacing:.24em;color:var(--ink-3)}
.pinfo{animation:rise .7s cubic-bezier(.2,.8,.2,1) .12s backwards;min-width:0}
.pname{font-variant-numeric:lining-nums;display:flex;align-items:center;gap:12px;font-size:var(--t-3xl);line-height:1.3;word-break:break-all}
.pname .face{--fs:34px}
.pmeta{color:var(--ink-2);font-size:var(--t-sm);margin-top:8px}
.affs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.aff{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 6px;border:1px solid var(--rule);background:var(--paper-hi);
    font-weight:700;font-size:var(--t-sm);color:var(--ink);transition:transform .2s}
a.aff:hover{transform:translateY(-2px);color:var(--ember-dk)}
.aff .crest{flex:none}
.muted-aff{color:var(--ink-3);font-weight:400;padding-left:12px}
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;font-size:var(--t-xs);font-weight:700;
    border:1px solid rgba(138,104,32,.5);background:rgba(176,138,50,.16);color:#6E5218;border-radius:999px;
    animation:popIn .5s cubic-bezier(.3,1.5,.4,1) backwards}
.badge:nth-child(2){animation-delay:.06s}.badge:nth-child(3){animation-delay:.12s}.badge:nth-child(4){animation-delay:.18s}
.badge:nth-child(5){animation-delay:.24s}.badge:nth-child(n+6){animation-delay:.3s}
.badge.b-rich,.badge.b-old{border-color:rgba(147,48,28,.45);background:rgba(147,48,28,.12);color:var(--ember-dk)}
.badge.b-citizen,.badge.b-new{border-color:rgba(60,104,54,.45);background:rgba(60,104,54,.13);color:#2F5A2A}
.badge.none{border-style:dashed;background:none;color:var(--ink-3);font-weight:400}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--rule);
    box-shadow:var(--sh-2),var(--sh-1)}
.pstats>div{background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));padding:12px 14px}
.pstats dt{font-size:var(--t-2xs);color:var(--ink-2);font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:6px}
.pstats dd{font-size:var(--t-xl);font-weight:700;line-height:1.4;font-family:var(--f-lat)}
.rank-pill{font-size:var(--t-3xs);background:var(--ember);color:#FBF4E4;padding:0 6px;border-radius:999px;letter-spacing:.04em}
.badge-help{margin-top:22px;font-size:var(--t-sm);color:var(--ink-2)}
.badge-help summary{cursor:pointer;font-weight:700;color:var(--ember-dk)}
.badge-help ul{list-style:none;margin-top:8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 18px}
.badge-help i{width:20px;color:var(--honey)}
.finder form{display:flex;gap:10px;flex-wrap:wrap}

/* 顔の並び */
.faces{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.faces a{display:flex;flex-direction:column;align-items:center;gap:5px;width:78px;text-align:center;color:var(--ink);
    font-size:var(--t-2xs);font-weight:700;line-height:1.3;word-break:break-all;transition:transform .25s cubic-bezier(.3,1.4,.4,1)}
.faces a:hover{transform:translateY(-4px) rotate(-3deg);color:var(--ember-dk)}
.faces .face{--fs:40px}
.faces.big .face{--fs:48px}
.faces.mini{gap:6px}
.faces.mini a{width:auto}
.faces.mini .face{--fs:30px}
.faces.mini .more{display:flex;align-items:center;font-size:var(--t-xs);color:var(--ink-2);font-weight:700}
.faces.loaded>li{animation:popIn .45s cubic-bezier(.3,1.5,.4,1) calc(min(var(--k,0),24)*30ms) backwards}

/* ---------- サーバーの様子 ---------- */
.srv-boxes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.srv{border:1px solid var(--rule);border-top:4px solid var(--ink-3);padding:18px 20px;
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));box-shadow:var(--sh-2),var(--sh-1)}
.srv.on{border-top-color:var(--moss)}
.srv.off{border-top-color:var(--brick)}
.srv-top{display:flex;align-items:center;gap:9px;font-weight:700}
.srv-top>i{color:var(--ember)}
.srv-state{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--ink-2)}
.srv-n{font-size:var(--t-5xl);font-weight:600;line-height:1.25;margin-top:6px;font-family:var(--f-lat)}
.srv-n small{font-size:var(--t-lg);color:var(--ink-2)}
.srv-sub{font-size:var(--t-xs);color:var(--ink-3)}
.srv-motd{margin-top:8px;font-size:var(--t-xs);color:var(--ink-2);border-top:1px dashed var(--line);padding-top:8px}
.srv-boxes.loaded>.srv{animation:rise .6s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*120ms) backwards}

.chart-wrap{position:relative;border:1px solid var(--rule);background:var(--paper-hi);padding:10px 8px 4px;box-shadow:var(--sh-2),var(--sh-1)}
.ochart{display:block;width:100%;height:auto;overflow:visible}
.ochart .g{stroke:rgba(111,90,53,.22);stroke-width:1}
.ochart .g.v{stroke-dasharray:2 4}
.ochart .g.base{stroke:var(--rule);stroke-width:1.2}
.ochart .ar{fill:rgba(55,86,99,.16)}
.ochart .ln{fill:none;stroke:var(--sea);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ochart text{font-family:var(--f-lat);font-size:11px;fill:var(--ink-3);font-variant-numeric:lining-nums tabular-nums}
.ochart .xh{stroke:var(--ink-2);stroke-width:1}
.ochart .xh.off,.ochart .xd.off{display:none}
.ochart .xd{fill:var(--sea);stroke:var(--paper-hi);stroke-width:2}
.ochart .hit{fill:transparent;cursor:crosshair;outline:none}
.ochart .hit:focus-visible{stroke:var(--ember);stroke-width:2}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper-2);padding:5px 11px;font-size:var(--t-xs);
    line-height:1.5;white-space:nowrap;box-shadow:0 6px 14px -6px rgba(47,32,16,.6);display:flex;flex-direction:column}
.tip b{color:#FBF4E4;font-size:var(--t-md);font-family:var(--f-lat)}
.tip span{color:rgba(251,244,228,.75)}
.chart-note{font-size:var(--t-xs);color:var(--ink-2);margin-top:10px}
.chart-table{margin-top:8px;font-size:var(--t-sm)}
.chart-table summary{cursor:pointer;color:var(--ember-dk);font-weight:700;font-size:var(--t-xs)}
.chart-table table{margin-top:8px;max-width:360px}

/* ---------- 国家図鑑 ---------- */
.crest{display:block;flex:none;filter:drop-shadow(2px 3px 0 rgba(47,32,16,.18))}
.tools{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 30px}
#natFacts{margin-top:0;margin-bottom:34px}
.tools input,.tools select{padding:11px 14px;font-family:inherit;font-size:var(--t-md);border:1px solid var(--rule);background:var(--paper-hi);color:var(--ink)}
.tools input{flex:1 1 220px}
.tools input:focus,.tools select:focus{border-color:var(--ember);outline:none;box-shadow:0 0 0 3px rgba(142,46,28,.14)}
.ncards{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:36px}
.ncards.small{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.ncard{display:flex;gap:14px;align-items:center;padding:16px 18px;height:100%;color:var(--ink);position:relative;overflow:hidden;
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));border:1px solid var(--rule);border-left:5px solid var(--c,var(--ember));
    box-shadow:var(--sh-2),var(--sh-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.ncard:hover{transform:translateY(-4px);box-shadow:8px 10px 0 rgba(47,32,16,.18);color:var(--ink)}
.ncard:hover .crest{animation:wiggle .5s ease-in-out}
.nbody{display:flex;flex-direction:column;min-width:0}
.nname{font-weight:800;font-size:var(--t-lg);line-height:1.4;word-break:break-all}
.ncards.small .nname{font-size:var(--t-md)}
.nsub{font-size:var(--t-xs);color:var(--ink-2)}
.nnums{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--t-xs);color:var(--ink-2);margin-top:4px}
.nnums i{color:var(--ember);margin-right:4px;font-size:.9em}
.ncards.loaded>li{animation:rise .55s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),12)*50ms) backwards}

.wars{display:flex;flex-direction:column;gap:14px;margin-bottom:34px}
.war-card{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:14px;padding:18px 20px;
    border:1px solid rgba(147,48,28,.4);border-left:5px solid var(--brick);
    background:linear-gradient(90deg,rgba(147,48,28,.10),rgba(251,244,228,.6) 50%,rgba(147,48,28,.10));box-shadow:var(--sh-2)}
.war-side{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-weight:800;overflow-wrap:anywhere;min-width:0}
.war-role{font-size:var(--t-2xs);color:var(--ink-3);font-weight:700;letter-spacing:.1em}
.war-mid{display:flex;flex-direction:column;align-items:center;gap:6px}
.war-x{font-size:1.5rem;color:var(--brick);animation:wiggle 1.6s ease-in-out infinite}
.war-score{font-size:var(--t-2xl);font-weight:700}
.war-bar{width:100%;height:9px;background:var(--sea);border:1px solid var(--ink);overflow:hidden}
.war-bar i{display:block;height:100%;background:var(--brick)}
.war-left{font-size:var(--t-xs);color:var(--ink-2)}

.nat-head .num{background:none;box-shadow:none;width:auto;height:auto}
.nat-head .kicker{margin-bottom:2px}
.nat-facts dt{font-size:var(--t-3xl)}
.nat-facts dt small{font-size:var(--t-md);margin:0 4px 0 2px;color:var(--ink-2)}
.nat-spec{margin:26px 0 8px;border:1px solid var(--rule);background:var(--paper-2)}
.rel-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.rel-cols h3{font-size:var(--t-md);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.rel-cols h3 i{color:var(--ember)}
.rel-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.rel-chips a{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 6px;border:1px solid var(--rule);background:var(--paper-hi);
    font-weight:700;font-size:var(--t-sm);color:var(--ink);transition:transform .2s}
.rel-chips a:hover{transform:translateY(-2px);color:var(--ember-dk)}
.rel-chips .ally a{border-color:rgba(60,104,54,.5);background:rgba(60,104,54,.1)}
.rel-chips .enemy a{border-color:rgba(147,48,28,.5);background:rgba(147,48,28,.1)}
.swatch{width:14px;height:14px;border:1px solid var(--ink);display:inline-block;margin-left:4px}

/* ---------- 年表 ---------- */
.chron-day{position:relative;padding-left:4px;margin-bottom:22px}
.chron-date{font-size:var(--t-md);color:var(--ember-dk);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.chron-date::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.chron{list-style:none;position:relative;padding-left:4px}
.chron::before{content:'';position:absolute;left:19px;top:6px;bottom:6px;width:2px;
    background:repeating-linear-gradient(0deg,var(--rule) 0 4px,transparent 4px 9px)}
.ev{position:relative;display:flex;gap:14px;align-items:flex-start;padding:8px 0}
.ev-ico{position:relative;z-index:1;flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--paper-2);border:2px solid var(--ink-3);color:var(--ink-2);font-size:var(--t-sm)}
.ev-war .ev-ico{border-color:var(--brick);color:var(--brick)}
.ev-diplo .ev-ico{border-color:var(--sea);color:var(--sea)}
.ev-found .ev-ico{border-color:var(--honey);color:var(--honey)}
.ev-body{display:flex;flex-direction:column;padding-top:3px;min-width:0}
.ev-text{font-size:var(--t-md);line-height:1.75}
.ev-text a{font-weight:700}
.ev-when{font-size:var(--t-2xs);color:var(--ink-3)}
.chron.loaded>li{animation:slideR .5s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),12)*45ms) backwards}
.chron.loaded>li .ev-ico{animation:popIn .5s cubic-bezier(.3,1.5,.4,1) calc(min(var(--k,0),12)*45ms + .1s) backwards}
.chron.mini .ev{padding:5px 0}
.chron.mini .ev-text{font-size:var(--t-sm);line-height:1.6}
.chron.mini .ev-ico{width:26px;height:26px;font-size:var(--t-2xs)}
.chron.mini::before{left:16px}

/* ---------- マップ ---------- */
#mapStage{border:3px double var(--rule);background:var(--paper-2);box-shadow:var(--sh-3),var(--sh-1);min-height:320px;
    display:flex;align-items:center;justify-content:center}
#mapStage.ready{display:block;height:min(78vh,760px)}
#mapStage iframe{width:100%;height:100%;border:0;display:block}
.map-off{text-align:center;color:var(--ink-2);padding:30px 20px;font-size:var(--t-sm)}
.map-doodle{width:200px;color:var(--ember);margin-bottom:10px}
.map-doodle path{stroke-dasharray:4 6;animation:barFlow 1.6s linear infinite}

/* ---------- トップページ「いまのVIVA-MC」 ---------- */
.live-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:18px}
.live-card{display:flex;flex-direction:column;padding:20px 20px 16px;background:linear-gradient(180deg,var(--paper-hi),var(--paper-3));
    border:1px solid var(--rule);box-shadow:var(--sh-2),var(--sh-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.live-card:hover{transform:translateY(-5px);box-shadow:10px 12px 0 rgba(47,32,16,.18)}
.live-card h3{display:flex;align-items:center;gap:9px;font-size:var(--t-md);margin-bottom:10px}
.live-card h3 i{color:var(--ember)}
.live-card .go{margin-top:auto;padding-top:12px;font-size:var(--t-sm);font-weight:700}
.live-big{font-size:var(--t-5xl);font-weight:600;line-height:1.1;margin-bottom:10px;font-family:var(--f-lat)}
.live-big small{font-size:var(--t-lg);color:var(--ink-2);margin-left:4px}
.live-sub{color:var(--ink-2);font-size:var(--t-sm)}
.mini-rank{list-style:none}
.mini-rank li{display:grid;grid-template-columns:18px 26px 1fr auto;gap:9px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line);font-size:var(--t-sm)}
.mini-rank li:last-child{border-bottom:none}
.mini-rank .face{--fs:26px}
.mini-rank a{justify-self:start;max-width:100%;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-grid.in>.live-card{animation:rise .7s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*120ms) backwards}

/* ナビが増えたので、横幅が中くらいのときは詰める */
@media (max-width:1600px){
    .topbar{padding:0 24px;gap:14px}
    .site-nav a{padding:9px 9px;letter-spacing:.02em}
    .site-nav a::after{left:8px;right:8px}
    .topbar-cta .ip-copy{padding:9px 12px}
}
@media (max-width:1340px){.topbar-cta .ip-copy{display:none}}
@media (max-width:1280px){
    .topbar{padding:0 20px;gap:12px}
    .site-nav a{padding:9px 7px;font-size:var(--t-xs)}
}
/* 項目が入りきらない幅では、メニューボタンにまとめる */
@media (max-width:1180px){
    .site-nav,.topbar-cta .side-discord,.topbar-cta .lang-switch{display:none}
    .menu-btn{display:flex}
}
.site-nav li:nth-child(9){animation-delay:.66s}.site-nav li:nth-child(10){animation-delay:.72s}

@media (max-width:980px){
    .live-grid{grid-template-columns:1fr}
    .profile{grid-template-columns:1fr}
    .portrait{max-width:260px;margin:0 auto}
    .srv-boxes{grid-template-columns:1fr}
}
@media (max-width:700px){
    .podium{gap:6px}
    .pod .body-shot{height:104px}
    .pod-1 .body-shot{height:128px}
    .pod-name{font-size:var(--t-sm)}
    .pod-val{font-size:var(--t-2xs)}
    .pod-1 .pod-step{height:84px}.pod-2 .pod-step{height:62px}.pod-3 .pod-step{height:46px}
    .pod-rank{font-size:var(--t-2xl)}
    .rank-list li{grid-template-columns:26px 26px minmax(0,1fr) auto;gap:8px;padding:9px 12px;font-size:var(--t-sm)}
    .rank-list .rbar{display:none}
    .pstats{grid-template-columns:1fr 1fr}
    .pstats dd{font-size:var(--t-lg)}
    .pname{font-size:var(--t-2xl)}
    .war-card{grid-template-columns:1fr;text-align:center}
    .rel-cols{grid-template-columns:1fr}
    .ncards,.ncards.small{grid-template-columns:1fr}
    .faces a{width:66px}
    .srv-n{font-size:var(--t-4xl)}
    #mapStage.ready{height:70vh}
}
@media (prefers-reduced-motion:reduce){
    .empty i,.war-x,.map-doodle path{animation:none!important}
}

/* ---------- 参加方法の診断 ---------- */
.wiz-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.wiz-pick button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:18px 10px;cursor:pointer;font-family:inherit;color:var(--ink);
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));border:1px solid var(--rule);box-shadow:var(--sh-2),var(--sh-1);
    transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background-color .25s}
.wiz-pick button i{font-size:1.6rem;color:var(--ember);margin-bottom:4px;transition:transform .35s cubic-bezier(.3,1.5,.4,1)}
.wiz-pick button b{font-size:var(--t-md)}
.wiz-pick button small{font-size:var(--t-2xs);color:var(--ink-3);letter-spacing:.08em}
.wiz-pick button:hover{transform:translateY(-4px);box-shadow:8px 10px 0 rgba(47,32,16,.16)}
.wiz-pick button:hover i{transform:scale(1.15) rotate(-6deg)}
.wiz-pick button[aria-pressed="true"]{background:var(--ember);color:#FBF4E4;border-color:var(--ember-dk)}
.wiz-pick button[aria-pressed="true"] i,.wiz-pick button[aria-pressed="true"] small{color:#FBF4E4}
.wiz-panel{border:3px double var(--rule);background:var(--paper-2);padding:22px 24px;box-shadow:var(--sh-2),var(--sh-1);
    animation:rise .45s cubic-bezier(.2,.8,.2,1)}
.wiz-panel h3{display:flex;align-items:center;gap:10px;font-size:var(--t-lg);margin-bottom:12px}
.wiz-panel h3 i{color:var(--ember)}
.wiz-panel p{color:var(--ink-2);font-size:var(--t-md);max-width:var(--measure)}
.wiz-steps{counter-reset:w;list-style:none}
.wiz-steps li{counter-increment:w;position:relative;padding:6px 0 6px 42px;font-size:var(--t-md);color:var(--ink-2)}
.wiz-steps li::before{content:counter(w);position:absolute;left:0;top:6px;width:28px;height:28px;border-radius:50%;
    background:var(--ember);color:#FBF4E4;display:flex;align-items:center;justify-content:center;font-family:var(--f-lat);font-weight:700;font-size:var(--t-sm)}
.wiz-panel:not([hidden]) .wiz-steps li{animation:slideR .45s cubic-bezier(.2,.8,.2,1) backwards}
.wiz-steps li:nth-child(2){animation-delay:.07s}.wiz-steps li:nth-child(3){animation-delay:.14s}.wiz-steps li:nth-child(4){animation-delay:.21s}
.chip-copy{display:inline-flex;align-items:center;gap:6px;padding:1px 10px;border:1px dashed var(--ember);background:var(--paper-hi);
    color:var(--ember-dk);font-family:inherit;font-weight:700;font-size:inherit;cursor:pointer}
.chip-copy:hover{background:var(--ember);color:#FBF4E4}
.wiz-tip{margin-top:12px;font-size:var(--t-sm)!important;display:flex;gap:8px}
.wiz-tip i{color:var(--honey);margin-top:5px}
.wiz-after{margin-top:14px;font-size:var(--t-sm);color:var(--ink-2)}
@media (max-width:700px){
    .wiz-pick{grid-template-columns:1fr 1fr;gap:10px}
    .wiz-pick button{padding:14px 8px}
    .wiz-panel{padding:18px 16px}
}

/* ---------- Discordのお知らせ ---------- */
.dnews{list-style:none;display:flex;flex-direction:column;gap:14px}
.dnews>li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:20px 24px;border:1px solid var(--rule);border-left:4px solid #5865F2;
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));box-shadow:var(--sh-2),var(--sh-1)}
.dnews .when{font-family:var(--f-lat);font-size:var(--t-sm);color:var(--ink-3);display:flex;flex-direction:column;line-height:1.5}
.dnews .when small{font-size:var(--t-2xs)}
.dn-body{min-width:0;font-size:var(--t-md);color:var(--ink-2);overflow-wrap:anywhere}
.dn-body p+p,.dn-embed{margin-top:10px}
.dn-embed{border-left:3px solid var(--rule);padding:4px 0 4px 12px}
.dn-imgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dn-imgs img{max-height:220px;max-width:100%;border:1px solid var(--rule);display:block}
.dn-by{display:block;margin-top:8px;font-size:var(--t-xs);color:var(--ink-3)}
.dnews.loaded>li{animation:slideR .55s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),8)*70ms) backwards}
@media (max-width:700px){.dnews>li{grid-template-columns:1fr;gap:6px;padding:18px 18px}}
@media (max-width:700px){.pstats>div:last-child:nth-child(odd){grid-column:span 2}}

/* =========================================================
   VIVA Portal（アプリとして使うホーム）
   ========================================================= */
.portal-head .num{background:none;box-shadow:none;width:auto;height:auto}
.portal-head .num img{width:56px;height:56px;border:2px solid var(--ink);box-shadow:4px 4px 0 rgba(47,32,16,.35);image-rendering:pixelated;display:block}
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.pcard{grid-column:span 2;display:flex;flex-direction:column;padding:20px 20px 16px;min-width:0;
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-3));border:1px solid var(--rule);box-shadow:var(--sh-2),var(--sh-1)}
.pcard h2{display:flex;align-items:center;gap:9px;font-size:var(--t-md);font-weight:800;margin-bottom:12px;letter-spacing:.04em}
.pcard h2 i{color:var(--ember)}
.pcard .go{margin-top:auto;padding-top:12px;font-size:var(--t-sm);font-weight:700}
.p-status{grid-column:span 2;border-top:4px solid var(--ink-3)}
.p-status.is-on{border-top-color:var(--moss)}
.ps-state{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--t-sm);color:var(--ink-2)}
.ps-num{font-size:var(--t-5xl);font-family:var(--f-lat);font-weight:600;line-height:1.2;margin:4px 0 10px}
.ps-num small{font-size:var(--t-lg);color:var(--ink-2)}
.ps-copy{justify-content:center;padding:12px 18px}
.ps-sub{font-size:var(--t-xs);color:var(--ink-3);margin:8px 0 10px}
.p-me,.p-notify{grid-column:span 2}
.p-install{grid-column:span 2}
.p-install.done{opacity:.85}
.p-links{grid-column:span 4}
.p-world{grid-column:span 4}
.p-reset{grid-column:span 2}
.p-reset .reset-mini .big{font-size:var(--t-5xl)}
.me-form{display:flex;gap:8px;margin-top:10px}
.me-form input{flex:1;min-width:0;padding:10px 12px;font-family:inherit;font-size:var(--t-md);border:1px solid var(--rule);background:var(--paper-hi);color:var(--ink)}
.me-form input:focus{border-color:var(--ember);outline:none;box-shadow:0 0 0 3px rgba(142,46,28,.14)}
.me-form .btn{padding:10px 18px}
.me-card{display:flex;align-items:center;gap:12px;color:var(--ink)}
.me-card .face{--fs:48px}
.me-card b{display:block;font-size:var(--t-lg);line-height:1.3;word-break:break-all}
.me-card small{display:block;font-size:var(--t-xs);color:var(--ink-3)}
.me-card:hover b{color:var(--ember-dk)}
.me-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:14px 0 8px}
.me-stats dt{font-size:var(--t-3xs);color:var(--ink-3);font-weight:700;letter-spacing:.08em}
.me-stats dd{font-weight:700;font-size:var(--t-sm);word-break:break-all}
.linkish{background:none;border:none;padding:0;font-family:inherit;font-size:var(--t-xs);color:var(--ember-dk);cursor:pointer;text-decoration:underline;
    text-underline-offset:3px;align-self:flex-start;margin-top:6px}
.nt-on{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--moss);font-size:var(--t-sm);margin-bottom:8px}
.nt-msg{margin-top:10px;font-size:var(--t-xs);color:var(--ember-dk);font-weight:700}
.nt-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nt-actions .btn{padding:9px 16px;font-size:var(--t-sm)}
.p-notify .btn.fill{align-self:flex-start;padding:11px 20px;font-size:var(--t-sm)}
.switches{list-style:none;margin:8px 0 14px}
.switches li+li{margin-top:6px}
.switches label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--t-sm);font-weight:700}
.switches input{position:absolute;opacity:0;width:1px;height:1px}
.switches .sw{position:relative;flex:none;width:40px;height:22px;border-radius:999px;background:rgba(47,32,16,.22);border:1px solid var(--rule);transition:background-color .25s}
.switches .sw::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--paper-hi);
    box-shadow:0 1px 2px rgba(47,32,16,.4);transition:transform .25s cubic-bezier(.3,1.4,.4,1)}
.switches input:checked+.sw{background:var(--moss)}
.switches input:checked+.sw::after{transform:translateX(18px)}
.switches input:focus-visible+.sw{outline:3px solid var(--ember);outline-offset:2px}
.p-install .btn.fill{align-self:flex-start;padding:11px 20px;font-size:var(--t-sm);margin-top:6px}
.wiz-steps.small li{font-size:var(--t-sm);padding:4px 0 4px 36px}
.wiz-steps.small li::before{width:24px;height:24px;top:5px;font-size:var(--t-xs)}
.tiles{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;gap:8px}
.tiles a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 4px;text-align:center;
    background:var(--paper-hi);border:1px solid var(--rule);color:var(--ink);font-size:var(--t-2xs);font-weight:700;line-height:1.35;
    height:100%;word-break:auto-phrase;overflow-wrap:anywhere;letter-spacing:0;
    transition:transform .25s cubic-bezier(.3,1.4,.4,1),background-color .2s,color .2s}
.tiles i{font-size:1.25rem;color:var(--ember)}
.tiles a:hover{transform:translateY(-3px);background:var(--ember);color:#FBF4E4}
.tiles a:hover i{color:#FBF4E4}
.p-world .wars{margin-bottom:12px}
.p-world .war-card{grid-template-columns:1fr auto 1fr;padding:12px 10px;gap:8px}
.p-world .war-side{font-size:var(--t-xs)}
.reset-mini{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.reset-mini .big{font-size:var(--t-4xl);font-weight:600;line-height:1.1;font-family:var(--f-lat)}
.reset-mini .u{font-size:var(--t-md);color:var(--ink-2);margin-right:10px}
.reset-mini .sub{color:var(--ember-dk);font-weight:700;font-size:var(--t-sm);font-family:var(--f-lat)}
.p-reset .bar{height:10px;background:rgba(47,32,16,.14);border:1px solid var(--rule);margin-top:10px;overflow:hidden}
.p-reset .bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--ember) 0 8px,#A8503C 8px 16px);
    background-size:32px 100%;animation:barFlow 1.2s linear infinite;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.pgrid>.pcard.in{animation:rise .6s cubic-bezier(.2,.8,.2,1) backwards}
.mobile-nav .m-portal{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:12px 14px;border:1px solid var(--ember-dk);
    background:linear-gradient(180deg,#B23D22,var(--ember) 55%,var(--ember-dk));color:#FBF4E4;font-weight:700}
.mobile-nav .m-portal img{width:26px;height:26px;border:1px solid #FBF4E4;image-rendering:pixelated}
.mobile-nav .m-portal small{margin-left:auto;font-weight:400;font-size:var(--t-2xs);opacity:.85}
@media (max-width:980px){
    .pgrid{grid-template-columns:1fr 1fr}
    .pcard,.p-status,.p-me,.p-notify,.p-install{grid-column:span 1}
    .p-links,.p-world,.p-reset{grid-column:span 2}
}
@media (max-width:700px){
    .pgrid{grid-template-columns:1fr;gap:14px}
    .pcard,.p-status,.p-me,.p-notify,.p-install,.p-links,.p-world,.p-reset{grid-column:span 1}
    .tiles{grid-template-columns:repeat(4,1fr)}
    .ps-num{font-size:var(--t-4xl)}
}
/* ホーム画面から開いたとき（アプリ表示）は、上のバーを少し詰める */
@media (display-mode:standalone){
    .rail{display:none}
}
.portal-cta{margin-top:22px}
.portal-cta .vote-seal{background:radial-gradient(circle at 35% 30%,#5C808D,var(--sea) 55%,var(--sea-dk));box-shadow:0 0 0 4px rgba(55,86,99,.18),inset 0 -3px 6px rgba(0,0,0,.25)}
.portal-cta .vote-seal::before{border-color:rgba(55,86,99,.45)}

/* ---------- 投票してくれた人 ---------- */
.voters{margin-top:18px;padding:16px 20px;border:1px dashed var(--rule);background:rgba(251,244,228,.5);display:flex;flex-direction:column}
.voters h3{display:flex;align-items:center;gap:8px;font-size:var(--t-md);margin-bottom:6px}
.voters h3 i{color:var(--gold)}
.voters .go{margin-top:8px;font-size:var(--t-sm);font-weight:700;align-self:flex-start}
.badge.b-supporter{border-color:rgba(55,86,99,.5);background:rgba(55,86,99,.12);color:var(--sea-dk)}

/* =========================================================
   イベントカレンダー
   ========================================================= */
.cal-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cal-title{font-size:var(--t-2xl);min-width:8.5em;text-align:center;font-variant-numeric:lining-nums}
.cal-nav,.cal-today{border:1px solid var(--rule);background:var(--paper-hi);color:var(--ink);cursor:pointer;font-family:inherit;
    height:40px;transition:background-color .2s,color .2s,transform .2s}
.cal-nav{width:40px}
.cal-today{padding:0 14px;font-weight:700;font-size:var(--t-sm);margin-left:auto}
.cal-nav:hover,.cal-today:hover{background:var(--ember);color:#FBF4E4;transform:translateY(-2px)}
.cal{border:1px solid var(--rule);background:var(--paper-hi);box-shadow:var(--sh-2),var(--sh-1)}
.cal-head,.cal-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-head span{padding:8px 0;text-align:center;font-weight:700;font-size:var(--t-xs);color:var(--ink-2);background:rgba(120,88,44,.1);border-bottom:1px solid var(--rule)}
.cal-head .sun,.cday.sun .dnum{color:var(--brick)}
.cal-head .sat,.cday.sat .dnum{color:var(--sea)}
.cday{min-height:96px;padding:5px 5px 6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0}
.cday:nth-child(7n){border-right:none}
.cday:nth-last-child(-n+7){border-bottom:none}
.cday.out{background:rgba(120,88,44,.06)}
.cday.out .dnum{opacity:.45}
.dnum{font-size:var(--t-xs);font-weight:700;font-variant-numeric:lining-nums;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.cday.today .dnum{background:var(--ember);color:#FBF4E4!important;border-radius:50%}
.cev{display:block;padding:2px 6px;font-size:var(--t-3xs);font-weight:700;line-height:1.5;border-left:3px solid currentColor;color:var(--ink);
    background:rgba(120,88,44,.1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:transform .2s}
a.cev:hover{transform:translateX(2px);color:var(--ink)}
.cev .cev-t{overflow:hidden;text-overflow:ellipsis}
.cev.k-discord{border-left-color:#5865F2;background:rgba(88,101,242,.12)}
.cev.k-site{border-left-color:var(--ember);background:rgba(147,48,28,.1)}
.cev.k-reset{border-left-color:var(--moss);background:rgba(60,104,54,.12)}
.cev.more{border:none;background:none;color:var(--ink-3)}
.cal-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:var(--t-xs);color:var(--ink-2)}
.cal-legend li{display:flex;align-items:center;gap:6px}
.cdot{width:10px;height:10px;display:inline-block}
.cdot.k-discord{background:#5865F2}.cdot.k-site{background:var(--ember)}.cdot.k-reset{background:var(--moss)}
.cal-up{list-style:none;display:flex;flex-direction:column;gap:14px}
.cal-up>li{display:grid;grid-template-columns:76px 1fr;gap:18px;padding:18px 20px;border:1px solid var(--rule);border-left:4px solid var(--ink-3);
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));box-shadow:var(--sh-2),var(--sh-1)}
.cal-up>li.k-discord{border-left-color:#5865F2}.cal-up>li.k-site{border-left-color:var(--ember)}.cal-up>li.k-reset{border-left-color:var(--moss)}
.cal-up>li.live{box-shadow:0 0 0 2px rgba(147,48,28,.35),var(--sh-2)}
.cu-date{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;border-right:1px dashed var(--line);padding-right:12px}
.cu-date .m{font-size:var(--t-xs);color:var(--ember-dk);font-weight:700}
.cu-date .d{font-size:var(--t-4xl);font-weight:600;line-height:1.1;font-variant-numeric:lining-nums}
.cu-date .w{font-size:var(--t-xs);color:var(--ink-3)}
.cu-body{min-width:0}
.cu-body img{width:100%;max-height:200px;object-fit:cover;border:1px solid var(--rule);margin-bottom:10px;display:block}
.cu-body h3{font-size:var(--t-lg);line-height:1.5}
.cu-meta{font-size:var(--t-xs);color:var(--ink-2);margin-top:4px}
.cu-meta i{color:var(--ember);margin-right:4px}
.cu-desc{font-size:var(--t-sm);color:var(--ink-2);margin-top:8px;max-width:var(--measure);overflow-wrap:anywhere}
.cu-go{display:inline-block;margin-top:8px;font-size:var(--t-sm);font-weight:700}
.cal-up.loaded>li{animation:slideR .5s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),10)*60ms) backwards}
.cal-sub{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:700px){
    .cal-title{font-size:var(--t-xl);min-width:0;flex:1}
    .cal-today{margin-left:0}
    .cday{min-height:58px;padding:3px 2px}
    .cev{font-size:0;padding:0;height:6px;border-left:none;border-radius:3px}
    .cev.k-discord{background:#5865F2}.cev.k-site{background:var(--ember)}.cev.k-reset{background:var(--moss)}
    .cev.more{display:none}
    .dnum{width:20px;height:20px;font-size:var(--t-3xs)}
    .cal-up>li{grid-template-columns:56px 1fr;gap:12px;padding:16px}
    .cu-date .d{font-size:var(--t-3xl)}
    .cal-sub .btn{width:100%;justify-content:center}
}
.mini-cal{list-style:none}
.mini-cal li{display:flex;gap:12px;align-items:flex-start;padding:7px 0;border-bottom:1px dashed var(--line)}
.mini-cal li:last-child{border-bottom:none}
.mc-d{flex:none;width:48px;text-align:center;font-weight:700;font-size:var(--t-md);color:var(--ember-dk);line-height:1.2;font-variant-numeric:lining-nums}
.mc-d small{display:block;font-size:var(--t-3xs);color:var(--ink-3)}
.mc-t{font-size:var(--t-sm);font-weight:700;line-height:1.5;min-width:0}
.mc-t small{display:block;font-weight:400;color:var(--ink-3);font-size:var(--t-2xs)}
.live-grid{grid-template-columns:1fr 1fr}
.tiles{grid-template-columns:repeat(6,1fr)}
@media (max-width:980px){.live-grid{grid-template-columns:1fr}}
@media (max-width:700px){.tiles{grid-template-columns:repeat(4,1fr)}}
@media (max-width:440px){.tiles{grid-template-columns:repeat(3,1fr)}.tiles a{padding:12px 6px;font-size:var(--t-xs)}}

/* ---------- 言語の切り替え ---------- */
.lang-switch{display:flex;align-items:center;justify-content:center;min-width:40px;height:38px;padding:0 10px;border:1px solid var(--rule);
    font-family:var(--f-lat);font-weight:700;font-size:var(--t-sm);letter-spacing:.08em;color:var(--ink);background:transparent;
    transition:background-color .25s,color .25s}
.lang-switch:hover{background:var(--ink);color:var(--paper-2)}
.mobile-nav .m-lang{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border:1px solid var(--rule);
    background:var(--paper);color:var(--ink);font-weight:700}
.mobile-nav .m-lang i{color:var(--ember)}
@media (max-width:980px){.topbar-cta .lang-switch{display:none}}

/* カレンダー：色つきの予定、何日も続く予定 */
.cev.has-color{border-left-color:var(--ec);background:var(--ecbg)}
.cev.span{border-left-width:4px}
.cev.cont{border-left-style:dotted;opacity:.85}
.cal-up>li.has-color{border-left-color:var(--ec)}
.cal-up>li.has-color .cu-date .m{color:var(--ec)}
@media (max-width:700px){
    .cev.has-color{background:var(--ec)}
    .cev.cont{opacity:.6}
}
.badge.b-admin{border-color:#8A6212;background:linear-gradient(135deg,#D9AE45,#A97A16);color:#FFF8E6;text-shadow:0 1px 0 rgba(90,60,8,.45);box-shadow:0 2px 8px rgba(138,98,18,.35)}
.badge.b-admin i{color:#FFF3C8}

/* =========================================================
   仕上げ：幅と余白をそろえる
   ========================================================= */
/* メニューボタンになる中くらいの幅では、右に寄せたパネルにする */
@media (min-width:701px) and (max-width:1180px){
    .mobile-nav{left:auto;width:380px;border-left:1px solid var(--rule)}
}
@media (min-width:1181px){.mobile-nav.open{display:none}}

/* スマホの見出し：説明文はアイコンの下から全幅で */
@media (max-width:700px){
    .page-head .wrap{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:13px;align-items:center}
    .page-head .wrap>div:not(.num){display:contents}
    .page-head .num{grid-column:1;grid-row:1;margin-top:0}
    .page-head .wrap:has(.kicker) .num{grid-row:1 / span 2;align-self:start;margin-top:4px}
    .page-head .kicker,.page-head h1{grid-column:2}
    .page-head p{grid-column:1 / -1;margin-top:14px}
    .portal-head .num img{width:42px;height:42px}
    .spec th{letter-spacing:.02em}
    .closing .cta{flex-direction:column;align-items:center}
    .closing .cta .btn{width:min(100%,280px);justify-content:center}
}
@media (max-width:700px){.tools select{flex:1 1 100%}}