:root{
  --g-bg:#070a12;
  --g-panel:#0d1422;
  --g-panel2:#111a2b;
  --g-text:#f4f0e6;
  --g-muted:#a8b0bd;
  --g-gold:#d3ad62;
  --g-gold2:#f1d394;
  --g-line:rgba(211,173,98,.22);
  --g-blue:#75a4d7;
  --g-red:#b24b59;
  --g-green:#6db28d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--g-bg)}
body{
  margin:0;background:
  radial-gradient(circle at 18% 0%,rgba(74,97,134,.13),transparent 30%),
  radial-gradient(circle at 88% 18%,rgba(137,91,57,.08),transparent 32%),
  var(--g-bg);color:var(--g-text);
  font-family:"Noto Serif JP",Georgia,serif;line-height:1.85
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.guide-header{
  position:sticky;top:0;z-index:50;height:70px;padding:0 clamp(18px,4vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  background:rgba(7,10,18,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--g-line)
}
.guide-brand{display:flex;align-items:center;gap:11px;font-family:"Cinzel",serif}
.guide-brand img{width:38px;height:38px;object-fit:contain}
.guide-brand strong{display:block;font-size:12px;letter-spacing:.16em}
.guide-brand small{display:block;font-size:7px;letter-spacing:.25em;color:var(--g-gold)}
.guide-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.guide-nav a{font:600 9px/1 "Cinzel",serif;letter-spacing:.14em;color:#b8c0cc}
.guide-nav a:hover,.guide-nav a.active{color:var(--g-gold2)}
.lang-toggle-guide{
  border:1px solid var(--g-line);background:rgba(255,255,255,.02);color:#e7dfce;
  padding:8px 11px;cursor:pointer;font:600 9px/1 "Cinzel",serif;letter-spacing:.12em
}
.guide-hero{
  min-height:440px;display:flex;align-items:end;position:relative;overflow:hidden;
  padding:120px clamp(20px,6vw,96px) 66px;border-bottom:1px solid var(--g-line);
  background:
    linear-gradient(to top,rgba(7,10,18,.98),rgba(7,10,18,.35)),
    radial-gradient(circle at 70% 35%,rgba(211,173,98,.13),transparent 28%),
    linear-gradient(120deg,#111a2c,#0a0e17 55%,#171012)
}
.guide-hero:before{
  content:"";position:absolute;right:6%;top:58px;width:380px;height:380px;border-radius:50%;
  border:1px solid rgba(211,173,98,.1);box-shadow:inset 0 0 80px rgba(211,173,98,.03)
}
.guide-hero-inner{position:relative;z-index:2;max-width:940px}
.kicker{font:600 9px/1.4 "Cinzel",serif;letter-spacing:.28em;color:var(--g-gold);margin:0 0 16px}
.guide-hero h1{font:600 clamp(38px,6vw,78px)/1.05 "Cinzel",serif;letter-spacing:.05em;margin:0 0 22px}
.guide-hero p{max-width:760px;color:#b0b7c3;margin:0;font-size:15px}
.guide-hero .era{display:inline-flex;margin-top:20px;padding:8px 11px;border:1px solid var(--g-line);font:600 8px/1 "Cinzel",serif;letter-spacing:.12em;color:#d8c188}
.guide-container{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:72px 0 110px}
.guide-section{margin:0 0 82px;scroll-margin-top:92px}
.guide-section h2{font:600 clamp(28px,4vw,48px)/1.15 "Cinzel",serif;letter-spacing:.04em;margin:0 0 22px}
.guide-section h3{font:600 20px/1.3 "Cinzel",serif;margin:32px 0 12px;color:#efe4cb}
.guide-section>p,.guide-copy{color:var(--g-muted);font-size:14px}
.lead{font-size:16px!important;color:#c4cad2!important}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.guide-card{
  border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(17,25,41,.88),rgba(9,13,22,.88));
  padding:28px;min-height:210px;position:relative;overflow:hidden
}
.guide-card:before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--g-gold);opacity:.55}
.guide-card .no{font:600 32px/1 "Cinzel",serif;color:rgba(211,173,98,.28);display:block;margin-bottom:18px}
.guide-card h3{margin:0 0 10px;font-size:20px}
.guide-card p{margin:0 0 20px;color:#9fa8b6;font-size:12px}
.card-link{font:600 9px/1 "Cinzel",serif;letter-spacing:.12em;color:var(--g-gold2)}
.character-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.character-card{
  border:1px solid rgba(255,255,255,.08);background:rgba(13,20,34,.74);padding:24px;position:relative
}
.character-card .role{display:block;color:var(--g-gold);font:600 8px/1.2 "Cinzel",serif;letter-spacing:.15em;margin-bottom:8px}
.character-card h3{margin:0 0 8px;font-size:22px}
.character-card p{color:#a8b0bd;font-size:13px;margin:0}
.character-card .form{display:inline-block;margin-top:12px;padding:6px 8px;border:1px solid rgba(211,173,98,.18);color:#bfae83;font-size:11px}
.operation-shot{
  margin:28px 0;border:1px solid var(--g-line);background:#090d15;padding:8px;box-shadow:0 25px 60px rgba(0,0,0,.25)
}
.operation-shot img{width:100%;height:auto}
.steps{counter-reset:steps;display:grid;gap:12px;margin-top:26px}
.step{
  counter-increment:steps;display:grid;grid-template-columns:52px 1fr;gap:18px;
  padding:20px;border:1px solid rgba(255,255,255,.07);background:rgba(14,20,31,.64)
}
.step:before{
  content:counter(steps,decimal-leading-zero);font:600 19px/1 "Cinzel",serif;color:var(--g-gold);
  padding-top:4px
}
.step h3{margin:0 0 7px;font-size:17px}
.step p{margin:0;color:#a5adba;font-size:13px}
.command-table{width:100%;border-collapse:collapse;margin-top:24px;font-size:13px}
.command-table th,.command-table td{border-bottom:1px solid rgba(255,255,255,.08);padding:13px 12px;text-align:left;vertical-align:top}
.command-table th{color:var(--g-gold2);font-size:11px}
.command-table td{color:#aab2be}
.tip{
  margin:28px 0;padding:20px 22px;border-left:3px solid var(--g-gold);background:rgba(211,173,98,.06);
  color:#c4c5c1;font-size:13px
}
.guide-breadcrumb{font:600 8px/1.2 "Cinzel",serif;letter-spacing:.12em;color:#7f8998;margin-bottom:18px}
.guide-breadcrumb a:hover{color:var(--g-gold)}
.quick-nav{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:28px
}
.quick-nav a{padding:9px 11px;border:1px solid rgba(255,255,255,.09);font-size:11px;color:#b3bac5}
.quick-nav a:hover{border-color:var(--g-line);color:var(--g-gold2)}
.cta-box{
  margin-top:60px;padding:34px;border:1px solid var(--g-line);
  background:linear-gradient(135deg,rgba(211,173,98,.08),rgba(13,20,34,.8))
}
.cta-box h2{margin:0 0 12px}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.cta-actions a{padding:12px 16px;border:1px solid rgba(211,173,98,.5);font:600 9px/1 "Cinzel",serif;letter-spacing:.12em}
.cta-actions a.primary{background:var(--g-gold);color:#10141c}
.article-note{font-size:11px;color:#778291;margin-top:14px}
.guide-footer{
  border-top:1px solid var(--g-line);padding:28px clamp(20px,5vw,76px);display:flex;justify-content:space-between;gap:20px;
  color:#727d8c;font:500 8px/1.5 "Cinzel",serif;letter-spacing:.1em
}
.lang-en-content{display:none}
html[data-lang="en"] .lang-ja-content{display:none}
html[data-lang="en"] .lang-en-content{display:block}
html[data-lang="ja"] .lang-ja-content{display:block}
html[data-lang="ja"] .lang-en-content{display:none}
@media(max-width:900px){
  .guide-nav a:not(.active){display:none}
  .guide-grid{grid-template-columns:1fr}
  .character-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .guide-header{padding:0 14px;height:62px}
  .guide-brand strong{font-size:10px}.guide-brand small{font-size:6px}.guide-brand img{width:32px}
  .guide-nav{gap:10px}.guide-nav .active{font-size:8px}
  .guide-hero{min-height:380px;padding:100px 20px 48px}
  .guide-hero h1{font-size:40px}
  .guide-container{width:min(100% - 28px,1180px);padding:54px 0 80px}
  .guide-section{margin-bottom:62px}
  .guide-card,.character-card{padding:20px}
  .step{grid-template-columns:38px 1fr;padding:16px;gap:10px}
  .command-table{font-size:11px}
  .command-table th,.command-table td{padding:10px 7px}
  .guide-footer{flex-direction:column;text-align:center}
}


/* v1.4 — SCC1 transparent character portraits */
#characters .character-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
#characters .character-card{
  min-height:290px;
  padding:28px 28px 26px 46%;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 34%,rgba(211,173,98,.10),transparent 28%),
    linear-gradient(145deg,rgba(17,25,41,.92),rgba(9,13,22,.94));
}
.character-portrait{
  position:absolute;
  left:0;
  bottom:0;
  width:43%;
  height:94%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
  overflow:hidden;
}
.character-portrait:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(13,20,34,.78) 100%);
}
.character-portrait img{
  position:relative;
  z-index:1;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.38));
}
#characters .character-card .role,
#characters .character-card h3,
#characters .character-card p,
#characters .character-card .form{
  position:relative;
  z-index:2;
}
@media(max-width:900px){
  #characters .character-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  #characters .character-card{
    min-height:330px;
    padding:210px 20px 22px;
  }
  .character-portrait{
    top:0;
    bottom:auto;
    width:100%;
    height:205px;
  }
  .character-portrait:after{
    background:linear-gradient(to bottom,transparent 55%,rgba(13,20,34,.96) 100%);
  }
}


/* v1.5 — Living World ONLINE guide */
.guide-card-online{
  border-color:rgba(104,184,230,.18);
  background:
    radial-gradient(circle at 82% 18%,rgba(91,178,230,.12),transparent 28%),
    linear-gradient(145deg,rgba(12,30,45,.9),rgba(8,13,22,.9));
}
.guide-card-online:before{background:#80c6ed}
.guide-card-online .no,.guide-card-online .card-link{color:#9ed9f6}


/* v1.12 — Living World ONLINE onboarding / permanent guide */
.card-link-sub{display:block;margin-top:10px;color:#7f96aa}
.guide-hero-start{
  background:
    linear-gradient(to top,rgba(7,10,18,.98),rgba(7,10,18,.28)),
    radial-gradient(circle at 68% 28%,rgba(84,170,224,.14),transparent 25%),
    radial-gradient(circle at 26% 72%,rgba(211,173,98,.09),transparent 28%),
    linear-gradient(120deg,#0d1a29,#080d16 58%,#10131c);
}
.online-start-panel{
  padding:32px;border:1px solid rgba(107,190,235,.18);
  background:
    radial-gradient(circle at 92% 12%,rgba(86,177,229,.11),transparent 26%),
    linear-gradient(145deg,rgba(12,27,42,.84),rgba(9,14,23,.9));
}
.start-guide-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:24px 0 8px}
.start-guide-actions span{font-size:11px;color:#7f8c9b}
.start-guide-primary{
  display:inline-flex;padding:13px 17px;border:1px solid rgba(118,202,244,.46);
  color:#c8ebfb;background:rgba(86,177,229,.08);
  font:600 9px/1 "Cinzel",serif;letter-spacing:.1em
}
.start-guide-primary:hover{background:rgba(86,177,229,.16);border-color:#91d7f7}
.start-checklist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:28px}
.start-checklist>div{
  min-height:190px;padding:20px 18px;border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(150deg,rgba(16,24,38,.9),rgba(9,13,21,.86))
}
.start-checklist span{
  display:block;margin-bottom:18px;color:var(--g-gold);
  font:600 23px/1 "Cinzel",serif;opacity:.72
}
.start-checklist strong{display:block;color:#eee3ca;font-size:14px;line-height:1.5;margin-bottom:8px}
.start-checklist p{margin:0;color:#919ba9;font-size:11px;line-height:1.75}
.tutorial-screen{
  position:relative;margin:28px 0 18px;border:1px solid var(--g-line);
  background:#080c13;padding:8px;box-shadow:0 24px 70px rgba(0,0,0,.3)
}
.tutorial-screen img{width:100%;height:auto}
.screen-pin{
  position:absolute;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:#d3ad62;color:#111722;border:3px solid rgba(7,10,18,.9);
  box-shadow:0 5px 18px rgba(0,0,0,.45),0 0 0 2px rgba(211,173,98,.28);
  font:700 13px/1 "Cinzel",serif;transform:translate(-50%,-50%)
}
.pin-player{left:9%;top:28%}
.pin-map{left:53%;top:30%}
.pin-side{left:89%;top:27%}
.pin-dock{left:52%;top:94%}
.screen-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.screen-legend>div{
  position:relative;padding:20px 18px 18px 54px;border:1px solid rgba(255,255,255,.07);
  background:rgba(13,20,32,.7)
}
.screen-legend>div>span{
  position:absolute;left:17px;top:18px;width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;border:1px solid rgba(211,173,98,.38);color:var(--g-gold2);
  font:600 9px/1 "Cinzel",serif
}
.screen-legend h3{margin:0 0 7px;font-size:14px}
.screen-legend p{margin:0;color:#929ba8;font-size:11px}
.recommend-grid,.guide-topic-grid,.life-path-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px
}
.recommend-grid article,.guide-topic-grid article,.life-path-grid article{
  padding:22px;border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(150deg,rgba(16,24,38,.82),rgba(9,13,21,.86))
}
.recommend-grid article>span,.guide-topic-grid article>span{
  display:block;margin-bottom:11px;color:#78bce2;
  font:600 7px/1 "Cinzel",serif;letter-spacing:.15em
}
.recommend-grid h3,.guide-topic-grid h3,.life-path-grid h3{font-size:16px;margin:0 0 8px}
.recommend-grid p,.guide-topic-grid p,.life-path-grid p{margin:0;color:#969fac;font-size:11px}
.guide-topic-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.guide-topic-grid article{min-height:160px}
.life-path-grid article{text-align:center;min-height:180px}
.life-path-grid b{
  display:grid;place-items:center;width:44px;height:44px;margin:0 auto 12px;
  border:1px solid rgba(211,173,98,.23);color:var(--g-gold2);font-size:21px;font-weight:400
}
.start-world-note .tip{margin-bottom:0}

@media(max-width:1000px){
  .start-checklist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .screen-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-topic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .recommend-grid,.life-path-grid,.guide-topic-grid{grid-template-columns:1fr}
  .start-checklist{grid-template-columns:1fr}
  .start-checklist>div{min-height:0}
  .screen-legend{grid-template-columns:1fr}
  .online-start-panel{padding:22px 18px}
  .screen-pin{width:29px;height:29px;font-size:10px;border-width:2px}
}